405 lines
12 KiB
TypeScript
405 lines
12 KiB
TypeScript
import { useEffect, useState } from "react"
|
|
import { NavLink, useNavigate } from "react-router-dom"
|
|
import {
|
|
Users,
|
|
LayoutDashboard,
|
|
X,
|
|
PanelLeftClose,
|
|
PanelLeftOpen,
|
|
PanelRightClose,
|
|
PanelRightOpen,
|
|
Briefcase,
|
|
ChartColumn,
|
|
Clock3,
|
|
History,
|
|
Tags,
|
|
User,
|
|
Globe,
|
|
LogOut,
|
|
LogIn,
|
|
} from "lucide-react"
|
|
import { toast } from "sonner"
|
|
|
|
import { useOptionalWorkspace } from "../context/WorkspaceContext"
|
|
import { useTranslation } from "../hooks/useTranslation"
|
|
import { canWorkspace, WORKSPACE_LOGS_VIEW } from "../lib/permissions"
|
|
import { WorkspaceSelector } from "./WorkspaceSelector"
|
|
import { SettingsMenu } from "./SettingsMenu"
|
|
import { Button } from "./ui/button"
|
|
import { getUserProfile, logoutUser } from "../api/users"
|
|
import { clearSessionTokens, getAccessToken, getRefreshToken } from "../lib/session"
|
|
|
|
type SidebarProps = {
|
|
mobileOpen?: boolean
|
|
onMobileClose?: () => void
|
|
}
|
|
|
|
export const Sidebar = ({ mobileOpen = false, onMobileClose }: SidebarProps) => {
|
|
const [isCollapsed, setIsCollapsed] = useState(false)
|
|
const [showLogoutModal, setShowLogoutModal] = useState(false)
|
|
const [user, setUser] = useState<any>(null)
|
|
|
|
const navigate = useNavigate()
|
|
const { t, lang, setLanguage } = useTranslation()
|
|
|
|
const workspaceContext = useOptionalWorkspace()
|
|
const activeWorkspace = workspaceContext?.activeWorkspace ?? null
|
|
|
|
const isRtl = lang === "fa"
|
|
const canViewLogs = canWorkspace(activeWorkspace?.my_role, WORKSPACE_LOGS_VIEW)
|
|
|
|
const ToggleIcon = isRtl
|
|
? isCollapsed
|
|
? PanelRightOpen
|
|
: PanelRightClose
|
|
: isCollapsed
|
|
? PanelLeftOpen
|
|
: PanelLeftClose
|
|
|
|
useEffect(() => {
|
|
const handleProfileUpdated = ((e: CustomEvent) => {
|
|
if (e.detail) {
|
|
setUser((prev: any) => (prev ? { ...prev, ...e.detail } : e.detail))
|
|
}
|
|
}) as EventListener
|
|
|
|
window.addEventListener("profile_updated", handleProfileUpdated)
|
|
return () => window.removeEventListener("profile_updated", handleProfileUpdated)
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
const fetchUser = async () => {
|
|
const token = getAccessToken()
|
|
if (!token) return
|
|
|
|
try {
|
|
const userData = await getUserProfile()
|
|
setUser(userData)
|
|
} catch (error) {
|
|
console.error("Failed to fetch user profile:", error)
|
|
}
|
|
}
|
|
|
|
void fetchUser()
|
|
}, [])
|
|
|
|
const handleLogout = async () => {
|
|
try {
|
|
const refreshToken = getRefreshToken()
|
|
if (refreshToken) {
|
|
await logoutUser(refreshToken)
|
|
}
|
|
} catch (error) {
|
|
console.error("Logout API failed:", error)
|
|
} finally {
|
|
clearSessionTokens()
|
|
setUser(null)
|
|
setShowLogoutModal(false)
|
|
onMobileClose?.()
|
|
toast.success(t.logoutToast || "Successfully logged out!")
|
|
navigate("/auth")
|
|
}
|
|
}
|
|
|
|
const toggleLanguage = () => {
|
|
const newLang = isRtl ? "en" : "fa"
|
|
|
|
if (setLanguage) {
|
|
setLanguage(newLang)
|
|
} else {
|
|
localStorage.setItem("language", newLang)
|
|
window.location.reload()
|
|
}
|
|
}
|
|
|
|
const navItems = [
|
|
{
|
|
path: "/timesheet",
|
|
icon: Clock3,
|
|
label: t.sidebar?.timesheet || "Timesheet",
|
|
},
|
|
{
|
|
path: "/tags",
|
|
icon: Tags,
|
|
label: t.sidebar?.tags || "Tags",
|
|
},
|
|
{
|
|
path: "/clients",
|
|
icon: Users,
|
|
label: t.sidebar?.clients || "Clients",
|
|
},
|
|
{
|
|
path: "/projects",
|
|
icon: Briefcase,
|
|
label: t.sidebar?.projects || "Projects",
|
|
},
|
|
{
|
|
path: "/workspaces",
|
|
icon: LayoutDashboard,
|
|
label: t.sidebar?.workspaces || "Workspaces",
|
|
},
|
|
{
|
|
path: "/reports",
|
|
icon: ChartColumn,
|
|
label: t.sidebar?.reports || "Reports",
|
|
},
|
|
...(canViewLogs
|
|
? [
|
|
{
|
|
path: "/logs",
|
|
icon: History,
|
|
label: t.sidebar?.logs || "Logs",
|
|
},
|
|
]
|
|
: []),
|
|
]
|
|
|
|
const renderNavItems = (mobile = false) =>
|
|
navItems.map((item) => {
|
|
const Icon = item.icon
|
|
|
|
return (
|
|
<NavLink
|
|
key={`${mobile ? "mobile" : "desktop"}-${item.path}`}
|
|
to={item.path}
|
|
title={!mobile && isCollapsed ? item.label : undefined}
|
|
onClick={() => {
|
|
if (mobile) onMobileClose?.()
|
|
}}
|
|
className={({ isActive }) =>
|
|
`flex items-center rounded-lg text-sm font-medium transition-colors ${
|
|
mobile
|
|
? "gap-3 px-4 py-3"
|
|
: isCollapsed
|
|
? "justify-center px-0 py-2.5"
|
|
: "gap-3 px-3 py-2.5"
|
|
} ${
|
|
isActive
|
|
? "bg-blue-50 text-blue-600 dark:bg-blue-500/10 dark:text-blue-400"
|
|
: "text-slate-600 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-900/50"
|
|
}`
|
|
}
|
|
>
|
|
<Icon size={mobile ? 20 : isCollapsed ? 22 : 18} className="shrink-0" />
|
|
|
|
{(mobile || !isCollapsed) && (
|
|
<span className="truncate whitespace-nowrap">{item.label}</span>
|
|
)}
|
|
</NavLink>
|
|
)
|
|
})
|
|
|
|
const renderMobileTopSection = () => {
|
|
if (!user) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<div className="border-b border-slate-200 p-4 dark:border-slate-800">
|
|
<div className="w-full">
|
|
<WorkspaceSelector className="w-full" />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const renderMobileFooterSection = () => {
|
|
if (!user) {
|
|
return (
|
|
<div className="border-t border-slate-200 p-4 dark:border-slate-800">
|
|
<button
|
|
onClick={toggleLanguage}
|
|
className="flex w-full items-center gap-3 rounded-lg px-4 py-3 mb-3 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-900/50"
|
|
>
|
|
<Globe size={20} className="shrink-0" />
|
|
<span className="truncate whitespace-nowrap">
|
|
{isRtl ? "English" : "فارسی"}
|
|
</span>
|
|
</button>
|
|
|
|
<Button
|
|
onClick={() => {
|
|
onMobileClose?.()
|
|
navigate("/auth")
|
|
}}
|
|
className="w-full bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700"
|
|
>
|
|
<LogIn className="mr-2 h-4 w-4" />
|
|
{t.login?.signIn || "Login"}
|
|
</Button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-1 p-4">
|
|
<button
|
|
onClick={() => {
|
|
onMobileClose?.()
|
|
navigate("/profile")
|
|
}}
|
|
className="flex w-full items-center gap-3 rounded-lg px-4 py-3 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-900/50"
|
|
>
|
|
<User size={20} className="shrink-0" />
|
|
<span className="truncate whitespace-nowrap">
|
|
{t.profile?.title || "Profile"}
|
|
</span>
|
|
</button>
|
|
|
|
<button
|
|
onClick={toggleLanguage}
|
|
className="flex w-full items-center gap-3 rounded-lg px-4 py-3 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-900/50"
|
|
>
|
|
<Globe size={20} className="shrink-0" />
|
|
<span className="truncate whitespace-nowrap">
|
|
{isRtl ? "English" : "فارسی"}
|
|
</span>
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => setShowLogoutModal(true)}
|
|
className="flex w-full items-center gap-3 rounded-lg px-4 py-3 text-sm font-medium text-red-600 transition-colors hover:bg-red-50 dark:text-red-500 dark:hover:bg-red-950/50"
|
|
>
|
|
<LogOut size={20} className="shrink-0" />
|
|
<span className="truncate whitespace-nowrap">{t.logout || "Logout"}</span>
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{/* Desktop sidebar */}
|
|
<aside
|
|
className={`hidden h-screen shrink-0 flex-col border-e border-slate-200 bg-white transition-all duration-300 ease-in-out md:sticky md:top-0 md:flex dark:border-slate-800 dark:bg-slate-950 ${
|
|
isCollapsed ? "w-20" : "w-64"
|
|
}`}
|
|
>
|
|
<div
|
|
className={`flex h-[73px] shrink-0 items-center border-b border-slate-200 transition-all dark:border-slate-800 ${
|
|
isCollapsed ? "justify-center px-0" : "justify-between px-6"
|
|
}`}
|
|
>
|
|
{!isCollapsed && (
|
|
<h2 className="truncate text-xl font-bold text-slate-800 dark:text-white">
|
|
{t.title || "Qlockify"}
|
|
</h2>
|
|
)}
|
|
|
|
<button
|
|
onClick={() => setIsCollapsed(!isCollapsed)}
|
|
className="rounded-lg p-2 text-slate-500 transition-colors hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800"
|
|
title={
|
|
isCollapsed
|
|
? t.sidebar?.expand || "Expand"
|
|
: t.sidebar?.collapse || "Collapse"
|
|
}
|
|
>
|
|
<ToggleIcon size={20} />
|
|
</button>
|
|
</div>
|
|
|
|
<nav className="flex-1 space-y-1 overflow-y-auto overflow-x-hidden p-4">
|
|
{renderNavItems(false)}
|
|
</nav>
|
|
</aside>
|
|
|
|
{/* Mobile sidebar */}
|
|
<div
|
|
className={`fixed inset-0 z-[70] transition-all duration-200 md:hidden ${
|
|
mobileOpen ? "pointer-events-auto" : "pointer-events-none"
|
|
}`}
|
|
aria-hidden={!mobileOpen}
|
|
>
|
|
<button
|
|
type="button"
|
|
className={`absolute inset-0 bg-slate-950/50 backdrop-blur-[1px] transition-opacity ${
|
|
mobileOpen ? "opacity-100" : "opacity-0"
|
|
}`}
|
|
onClick={onMobileClose}
|
|
/>
|
|
|
|
<aside
|
|
dir={isRtl ? "rtl" : "ltr"}
|
|
className={`absolute inset-y-0 flex w-[19.5rem] max-w-[88vw] flex-col overflow-hidden bg-white shadow-2xl transition-transform dark:bg-slate-950 ${
|
|
isRtl
|
|
? `right-0 border-s border-slate-200 dark:border-slate-800 ${
|
|
mobileOpen ? "translate-x-0" : "translate-x-full"
|
|
}`
|
|
: `left-0 border-e border-slate-200 dark:border-slate-800 ${
|
|
mobileOpen ? "translate-x-0" : "-translate-x-full"
|
|
}`
|
|
}`}
|
|
>
|
|
<div className="flex min-h-0 flex-1 flex-col overflow-y-auto">
|
|
<div className="flex shrink-0 items-center justify-between border-b border-slate-200 px-5 py-5 dark:border-slate-800">
|
|
<h2 className="truncate text-lg font-bold text-slate-800 dark:text-white">
|
|
Qlockify.ir
|
|
</h2>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={onMobileClose}
|
|
className="rounded-lg p-2 text-slate-500 transition-colors hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800"
|
|
title="Close"
|
|
>
|
|
<X size={20} />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="shrink-0">
|
|
{renderMobileTopSection()}
|
|
</div>
|
|
|
|
<nav className="shrink-0 space-y-1 p-4">
|
|
{renderNavItems(true)}
|
|
</nav>
|
|
|
|
<div className="mt-auto shrink-0">
|
|
{renderMobileFooterSection()}
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
|
|
{showLogoutModal && (
|
|
<div
|
|
className="fixed inset-0 z-[90] flex items-center justify-center bg-black/50 px-4"
|
|
onClick={() => setShowLogoutModal(false)}
|
|
>
|
|
<div
|
|
className="w-full max-w-sm rounded-lg border bg-white p-6 shadow-lg dark:border-slate-800 dark:bg-slate-900"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<h2 className="mb-2 text-lg font-bold text-slate-900 dark:text-white">
|
|
{t.confirmLogoutTitle || "Confirm Logout"}
|
|
</h2>
|
|
|
|
<p className="mb-6 text-slate-600 dark:text-slate-400">
|
|
{t.confirmLogoutMessage ||
|
|
"Are you sure you want to log out of your account?"}
|
|
</p>
|
|
|
|
<div className="flex justify-end gap-3">
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setShowLogoutModal(false)}
|
|
className="dark:text-white"
|
|
>
|
|
{t.actions?.cancel || "Cancel"}
|
|
</Button>
|
|
|
|
<Button
|
|
variant="destructive"
|
|
onClick={handleLogout}
|
|
className="bg-red-500 text-white hover:bg-red-600 dark:bg-red-600 dark:hover:bg-red-700"
|
|
>
|
|
{t.logout || "Logout"}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
)
|
|
} |