Saeed0920/inogen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' of https://git.pelekan.org/Saeed0920/inogen into refactor_#1

Browse Source
This commit is contained in:
Saeed AB 2025-09-17 12:23:01 +03:30
commit bf973d3147
5 changed files with 173 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
app/components/dashboard/header.tsx
View File

@ -5,17 +5,16 @@ import { cn } from "~/lib/utils";
import { Button } from "~/components/ui/button"; import { Button } from "~/components/ui/button";
import { import {
PanelLeft, PanelLeft,
Search,
Bell,
Settings, Settings,
User, User,
Moon,
Sun,
Menu, Menu,
ChevronDown, ChevronDown,
Globe, Server,
HelpCircle,
} from "lucide-react"; } from "lucide-react";
import apiService from "~/lib/api";
interface HeaderProps { interface HeaderProps {
onToggleSidebar?: () => void; onToggleSidebar?: () => void;
@ -32,6 +31,17 @@ export function Header({
const [isProfileMenuOpen, setIsProfileMenuOpen] = useState(false); const [isProfileMenuOpen, setIsProfileMenuOpen] = useState(false);
const [isNotificationOpen, setIsNotificationOpen] = useState(false); const [isNotificationOpen, setIsNotificationOpen] = useState(false);
const redirectHandler = async () => {
try {
const getData = await apiService.post('/GenerateSsoCode')
const url = `http://localhost:3000/redirect/${getData.data}`;
// const url = `https://inogen-bpms.pelekan.org/redirect/${getData.data}`;
window.open(url, "_blank");
} catch (error) {
console.log(error);
}
}
return ( return (
<header <header
className={cn( className={cn(
@ -63,26 +73,36 @@ export function Header({
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{/* User Menu */} {/* User Menu */}
<div className="relative"> <div className="relative">
<Button <div className="flex items-center gap-2">
variant="ghost"
size="sm"
onClick={() => setIsProfileMenuOpen(!isProfileMenuOpen)}
className="flex items-center gap-2 text-gray-300"
>
<div className="w-8 h-8 bg-gradient-to-r from-emerald-500/20 to-teal-500/20 text-emerald-400 rounded-full flex items-center justify-center">
<User className="h-4 w-4" />
</div>
<div className="hidden sm:block text-right">
<div className="text-sm font-medium font-persian">
{user?.name} {user?.family}
</div>
<div className="text-xs text-gray-400 font-persian">
{user?.username}
</div>
</div>
<ChevronDown className="h-3 w-3" />
</Button>
{
user?.id === 2041 && <button
className="flex w-full items-center gap-2 px-3 py-2 text-sm text-gray-300 hover:bg-gradient-to-r hover:from-emerald-500/10 hover:to-teal-500/10 hover:text-emerald-300 font-persian"
onClick={redirectHandler}>
<Server className="h-4 w-4" />
ورود به میزکار مدیریت</button>
}
<Button
variant="ghost"
size="sm"
onClick={() => setIsProfileMenuOpen(!isProfileMenuOpen)}
className="flex items-center gap-2 text-gray-300"
>
<div className="w-8 h-8 bg-gradient-to-r from-emerald-500/20 to-teal-500/20 text-emerald-400 rounded-full flex items-center justify-center">
<User className="h-4 w-4" />
</div>
<div className="hidden sm:block text-right">
<div className="text-sm font-medium font-persian">
{user?.name} {user?.family}
</div>
<div className="text-xs text-gray-400 font-persian">
{user?.username}
</div>
</div>
<ChevronDown className="h-3 w-3" />
</Button>
</div>
{/* Profile Dropdown */} {/* Profile Dropdown */}
{isProfileMenuOpen && ( {isProfileMenuOpen && (
<div className="absolute left-0 top-full mt-2 w-48 bg-gray-800 border border-emerald-500/30 rounded-lg shadow-lg z-50"> <div className="absolute left-0 top-full mt-2 w-48 bg-gray-800 border border-emerald-500/30 rounded-lg shadow-lg z-50">

6
app/components/dashboard/layout.tsx
View File

@ -3,6 +3,7 @@ import { cn } from "~/lib/utils";
import { Sidebar } from "./sidebar"; import { Sidebar } from "./sidebar";
import { Header } from "./header"; import { Header } from "./header";
import { StrategicAlignmentPopup } from "./strategic-alignment-popup"; import { StrategicAlignmentPopup } from "./strategic-alignment-popup";
import apiService from "~/lib/api";
interface DashboardLayoutProps { interface DashboardLayoutProps {
children: React.ReactNode; children: React.ReactNode;
@ -27,10 +28,12 @@ export function DashboardLayout({
setIsMobileSidebarOpen(!isMobileSidebarOpen); setIsMobileSidebarOpen(!isMobileSidebarOpen);
}; };
return ( return (
<div <div
className="h-screen flex overflow-hidden bg-[linear-gradient(to_bottom_left,#464861,20%,#111628)] relative overflow-x-hidden" className="h-screen flex overflow-hidden bg-[linear-gradient(to_bottom_left,#464861,20%,#111628)] relative overflow-x-hidden"
dir="rtl" dir="rtl"
> >
{/* Gradient overlay */} {/* Gradient overlay */}
<div className="absolute inset-0 pointer-events-none" /> <div className="absolute inset-0 pointer-events-none" />
@ -58,6 +61,7 @@ export function DashboardLayout({
onToggleCollapse={toggleSidebarCollapse} onToggleCollapse={toggleSidebarCollapse}
className="h-full flex-shrink-0 relative z-10" className="h-full flex-shrink-0 relative z-10"
onStrategicAlignmentClick={() => setIsStrategicAlignmentPopupOpen(true)} onStrategicAlignmentClick={() => setIsStrategicAlignmentPopupOpen(true)}
/> />
</div> </div>

55
app/components/dashboard/sidebar.tsx
View File

@ -15,6 +15,7 @@ import {
Settings, Settings,
Star, Star,
Workflow, Workflow,
DiscAlbum
} from "lucide-react"; } from "lucide-react";
import React, { useState } from "react"; import React, { useState } from "react";
import { Link, useLocation } from "react-router"; import { Link, useLocation } from "react-router";
@ -38,7 +39,7 @@ interface MenuItem {
} }
const menuItems: MenuItem[] = [ const menuItems: MenuItem[] = [
{ {
id: "dashboard", id: "dashboard",
label: "صفحه اصلی", label: "صفحه اصلی",
@ -106,12 +107,13 @@ const menuItems: MenuItem[] = [
icon: Star, icon: Star,
href: "/dashboard/top-innovations", href: "/dashboard/top-innovations",
}, },
{ {
id: "strategic-alignment", id: "strategic-alignment",
label: "میزان انطباق راهبردی", label: "میزان انطباق راهبردی",
icon: null, icon: null,
href: "#", // This is not a route, it opens a popup href: "#", // This is not a route, it opens a popup
}, },
]; ];
const bottomMenuItems: MenuItem[] = [ const bottomMenuItems: MenuItem[] = [
@ -206,6 +208,7 @@ export function Sidebar({
const handleClick = () => { const handleClick = () => {
if (item.id === "strategic-alignment") { if (item.id === "strategic-alignment") {
console.log("test")
onStrategicAlignmentClick?.(); onStrategicAlignmentClick?.();
} else if (item.id === "logout") { } else if (item.id === "logout") {
logout(); logout();
@ -214,30 +217,24 @@ export function Sidebar({
} }
}; };
if (item.id === "strategic-alignment") { if (item.id === "strategic-alignment") {
return ( return (
<button <button
key={item.id} key={item.id}
className={cn( className={cn(
"w-full text-right", "flex items-center justify-center w-full px-2 rounded-lg mt-4 transition-all duration-200 group",
)} )}
onClick={handleClick} onClick={handleClick}
> >
<div <div className="flex justify-center rounded-xl border-gray-500/20 border-2 cursor-pointer transition-all hover:bg-[#3F415A]/50 bg-[#3F415A] py-2 text-center items-center gap-3 min-w-0 flex-1">
className={cn( <span className="font-persian text-sm font-medium truncate">
"flex items-center justify-center w-full px-2 rounded-lg mt-4 transition-all duration-200 group", {item.label}
)} </span>
> </div>
<div className="flex justify-center rounded-xl border-gray-500/20 border-2 cursor-pointer transition-all hover:bg-[#3F415A]/50 bg-[#3F415A] py-2 text-center items-center gap-3 min-w-0 flex-1"> </button>
<span className="font-persian text-sm font-medium truncate"> )
{item.label}
</span>
</div>
</div>
</button>
)
} }
return ( return (
<div key={item.id} className="relative"> <div key={item.id} className="relative">
@ -293,10 +290,10 @@ return (
"w-full text-right", "w-full text-right",
// Disable pointer cursor when child is active (cannot collapse) // Disable pointer cursor when child is active (cannot collapse)
item.children && item.children &&
item.children.some( item.children.some(
(child) => child.href && location.pathname === child.href (child) => child.href && location.pathname === child.href
) && ) &&
"cursor-not-allowed" "cursor-not-allowed"
)} )}
onClick={handleClick} onClick={handleClick}
> >

31
app/lib/api.ts
View File

@ -39,6 +39,19 @@ class ApiService {
this.token = null; this.token = null;
} }
private handleSessionExpired(message?: string) {
this.clearToken();
localStorage.removeItem("auth_token");
localStorage.removeItem("auth_user");
try {
sessionStorage.setItem("sessionExpired", "1");
} catch {}
if (message) {
toast.error(message);
}
window.location.href = "/login";
}
private async request<T = any>( private async request<T = any>(
endpoint: string, endpoint: string,
options: RequestInit = {}, options: RequestInit = {},
@ -66,6 +79,11 @@ class ApiService {
const response = await fetch(url, config); const response = await fetch(url, config);
const data: ApiResponse<T> = await response.json(); const data: ApiResponse<T> = await response.json();
if (data.errorCode === 301) {
this.handleSessionExpired("نشست شما منقضی شده است. لطفا دوباره وارد شوید.");
throw new Error(data.message || "Session expired");
}
// Handle different response states // Handle different response states
if (!response.ok) { if (!response.ok) {
throw new Error( throw new Error(
@ -91,13 +109,7 @@ class ApiService {
// Handle authentication errors // Handle authentication errors
if (error instanceof Error && error.message.includes("401")) { if (error instanceof Error && error.message.includes("401")) {
this.clearToken(); this.handleSessionExpired();
localStorage.removeItem("auth_token");
localStorage.removeItem("auth_user");
try {
sessionStorage.setItem("sessionExpired", "1");
} catch {}
window.location.href = "/login";
throw error; throw error;
} }
@ -128,6 +140,11 @@ class ApiService {
const response = await fetch(fullUrl, config); const response = await fetch(fullUrl, config);
const apiData: ApiResponse<T> = await response.json(); const apiData: ApiResponse<T> = await response.json();
if (apiData.errorCode === 301) {
this.handleSessionExpired("نشست شما منقضی شده است. لطفا دوباره وارد شوید.");
throw new Error(apiData.message || "Session expired");
}
if (!response.ok) { if (!response.ok) {
throw new Error(apiData?.message || `HTTP error! status: ${response.status}`); throw new Error(apiData?.message || `HTTP error! status: ${response.status}`);
} }

73
package-lock.json generated
View File

@ -10,10 +10,12 @@
"@radix-ui/react-dialog": "^1.1.14", "@radix-ui/react-dialog": "^1.1.14",
"@radix-ui/react-dropdown-menu": "^2.1.15", "@radix-ui/react-dropdown-menu": "^2.1.15",
"@radix-ui/react-label": "^2.0.2", "@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-popover": "^1.1.15",
"@radix-ui/react-progress": "^1.1.7", "@radix-ui/react-progress": "^1.1.7",
"@radix-ui/react-select": "^2.2.5", "@radix-ui/react-select": "^2.2.5",
"@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-slot": "^1.0.2",
"@radix-ui/react-tabs": "^1.1.13", "@radix-ui/react-tabs": "^1.1.13",
"@radix-ui/react-tooltip": "^1.2.8",
"@react-router/node": "^7.7.0", "@react-router/node": "^7.7.0",
"@react-router/serve": "^7.7.1", "@react-router/serve": "^7.7.1",
"@types/d3": "^7.4.3", "@types/d3": "^7.4.3",
@ -967,6 +969,43 @@
} }
} }
}, },
"node_modules/@radix-ui/react-popover": {
"version": "1.1.15",
"resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.15.tgz",
"integrity": "sha512-kr0X2+6Yy/vJzLYJUPCZEc8SfQcf+1COFoAqauJm74umQhta9M7lNJHP7QQS3vkvcGLQUbWpMzwrXYwrYztHKA==",
"license": "MIT",
"dependencies": {
"@radix-ui/primitive": "1.1.3",
"@radix-ui/react-compose-refs": "1.1.2",
"@radix-ui/react-context": "1.1.2",
"@radix-ui/react-dismissable-layer": "1.1.11",
"@radix-ui/react-focus-guards": "1.1.3",
"@radix-ui/react-focus-scope": "1.1.7",
"@radix-ui/react-id": "1.1.1",
"@radix-ui/react-popper": "1.2.8",
"@radix-ui/react-portal": "1.1.9",
"@radix-ui/react-presence": "1.1.5",
"@radix-ui/react-primitive": "2.1.3",
"@radix-ui/react-slot": "1.2.3",
"@radix-ui/react-use-controllable-state": "1.2.2",
"aria-hidden": "^1.2.4",
"react-remove-scroll": "^2.6.3"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-popper": { "node_modules/@radix-ui/react-popper": {
"version": "1.2.8", "version": "1.2.8",
"license": "MIT", "license": "MIT",
@ -1202,6 +1241,40 @@
} }
} }
}, },
"node_modules/@radix-ui/react-tooltip": {
"version": "1.2.8",
"resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.2.8.tgz",
"integrity": "sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg==",
"license": "MIT",
"dependencies": {
"@radix-ui/primitive": "1.1.3",
"@radix-ui/react-compose-refs": "1.1.2",
"@radix-ui/react-context": "1.1.2",
"@radix-ui/react-dismissable-layer": "1.1.11",
"@radix-ui/react-id": "1.1.1",
"@radix-ui/react-popper": "1.2.8",
"@radix-ui/react-portal": "1.1.9",
"@radix-ui/react-presence": "1.1.5",
"@radix-ui/react-primitive": "2.1.3",
"@radix-ui/react-slot": "1.2.3",
"@radix-ui/react-use-controllable-state": "1.2.2",
"@radix-ui/react-visually-hidden": "1.2.3"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-use-callback-ref": { "node_modules/@radix-ui/react-use-callback-ref": {
"version": "1.1.1", "version": "1.1.1",
"license": "MIT", "license": "MIT",