mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-08-26 18:42:49 +00:00
feat(freight:backoffice): added org structure managemnet
This commit is contained in:
Michael Abebe
@@ -37,7 +37,7 @@ function getInitialTheme(): Theme {
|
||||
}
|
||||
|
||||
const iconButtonClass =
|
||||
"inline-flex h-10 w-10 items-center justify-center rounded-xl border border-slate-200 text-slate-600 transition hover:border-[#10B981]/30 hover:bg-[#10B981]/10 hover:text-[#10B981] dark:border-slate-700 dark:text-slate-300 dark:hover:border-[#10B981]/40 dark:hover:bg-[#10B981]/20 dark:hover:text-white";
|
||||
"inline-flex h-10 w-10 items-center justify-center rounded-xl border border-border bg-card text-foreground transition hover:border-[#10B981]/30 hover:bg-accent hover:text-accent-foreground";
|
||||
|
||||
const DashboardLayout = ({
|
||||
title,
|
||||
@@ -112,7 +112,7 @@ const DashboardLayout = ({
|
||||
aria-label={
|
||||
theme === "dark" ? "Switch to light mode" : "Switch to dark mode"
|
||||
}
|
||||
className="inline-flex h-8 w-8 items-center justify-center rounded-lg text-slate-600 transition hover:bg-[#10B981]/10 hover:text-[#10B981] dark:text-slate-300 dark:hover:bg-[#10B981]/20 dark:hover:text-white"
|
||||
className="inline-flex h-8 w-8 items-center justify-center rounded-lg text-foreground transition hover:bg-accent hover:text-accent-foreground"
|
||||
>
|
||||
{theme === "dark" ? (
|
||||
<Sun className="h-4 w-4" />
|
||||
@@ -132,8 +132,8 @@ const DashboardLayout = ({
|
||||
headerExtra={themeToggleButton}
|
||||
/>
|
||||
<div className="flex flex-1 flex-col">
|
||||
<header className="flex h-16 items-center justify-between border-b px-6 ">
|
||||
<div className="text-base font-medium ">{title}</div>
|
||||
<header className="flex h-16 items-center justify-between border-b border-border bg-background px-6 text-foreground">
|
||||
<div className="text-base font-medium">{title}</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
@@ -159,31 +159,31 @@ const DashboardLayout = ({
|
||||
aria-haspopup="menu"
|
||||
aria-expanded={isUserMenuOpen}
|
||||
onClick={() => setIsUserMenuOpen((open) => !open)}
|
||||
className="flex items-center gap-2 rounded-xl border border-transparent px-2 py-1.5 transition hover:border-[#10B981]/20 hover:bg-[#10B981]/5 aria-expanded:border-[#10B981]/30 aria-expanded:bg-[#10B981]/10 dark:hover:border-[#10B981]/30 dark:hover:bg-[#10B981]/10 dark:aria-expanded:border-[#10B981]/40 dark:aria-expanded:bg-[#10B981]/20"
|
||||
>
|
||||
className="flex items-center gap-2 rounded-xl border border-transparent px-2 py-1.5 transition hover:border-[#10B981]/20 hover:bg-accent aria-expanded:border-[#10B981]/30 aria-expanded:bg-accent"
|
||||
>
|
||||
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-[#10B981] text-xs font-semibold text-white">
|
||||
{initials}
|
||||
</div>
|
||||
<span className="hidden text-sm font-medium text-slate-700 md:block dark:text-slate-200">
|
||||
<span className="hidden text-sm font-medium text-foreground md:block">
|
||||
{userName}
|
||||
</span>
|
||||
<ChevronDown
|
||||
className={`h-4 w-4 text-slate-400 transition dark:text-slate-500 ${isUserMenuOpen ? "rotate-180 text-[#33578D]" : ""
|
||||
}`}
|
||||
className={`h-4 w-4 text-muted-foreground transition ${isUserMenuOpen ? "rotate-180 text-[#10B981]" : ""
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
|
||||
{isUserMenuOpen ? (
|
||||
<div
|
||||
role="menu"
|
||||
className="absolute right-0 top-full z-50 mt-2 w-52 overflow-hidden rounded-xl border border-slate-200 bg-white py-1 shadow-lg dark:border-slate-700 dark:bg-slate-800"
|
||||
className="absolute right-0 top-full z-50 mt-2 w-52 overflow-hidden rounded-xl border border-border bg-card py-1 shadow-lg"
|
||||
>
|
||||
<div className="border-b border-slate-100 px-4 py-3 dark:border-slate-700">
|
||||
<p className="text-sm font-semibold text-slate-900 dark:text-slate-100">
|
||||
<div className="border-b border-border px-4 py-3">
|
||||
<p className="text-sm font-semibold text-card-foreground">
|
||||
{userName}
|
||||
</p>
|
||||
{userEmail ? (
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{userEmail}
|
||||
</p>
|
||||
) : null}
|
||||
@@ -192,7 +192,7 @@ const DashboardLayout = ({
|
||||
href="#profile"
|
||||
role="menuitem"
|
||||
onClick={() => setIsUserMenuOpen(false)}
|
||||
className="flex items-center gap-2 px-4 py-2 text-sm text-slate-700 transition hover:bg-[#10B981]/10 hover:text-[#10B981] dark:text-slate-300 dark:hover:bg-[#10B981]/20 dark:hover:text-white"
|
||||
className="flex items-center gap-2 px-4 py-2 text-sm text-card-foreground transition hover:bg-accent hover:text-accent-foreground"
|
||||
>
|
||||
<User className="h-4 w-4" />
|
||||
Profile
|
||||
|
||||
@@ -83,34 +83,38 @@ const Sidebar = ({
|
||||
item.children?.some((child) =>
|
||||
activePath.startsWith(child.href.toLowerCase()),
|
||||
) ?? false;
|
||||
const isActive =
|
||||
activePath === itemHref ||
|
||||
activePath.startsWith(`${itemHref}/`) ||
|
||||
childActive;
|
||||
const isCurrentItem = hasChildren
|
||||
? activePath === itemHref
|
||||
: activePath === itemHref || activePath.startsWith(`${itemHref}/`);
|
||||
const isSectionActive = childActive && !isCurrentItem;
|
||||
|
||||
return (
|
||||
<div key={item.href} className="flex flex-col gap-1">
|
||||
<div
|
||||
className={clsx(
|
||||
"group flex items-center gap-2 rounded-md transition",
|
||||
isActive
|
||||
isCurrentItem
|
||||
? "bg-sidebar-primary text-sidebar-primary-foreground shadow-sm"
|
||||
: "text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
|
||||
: isSectionActive
|
||||
? "bg-sidebar-accent/70 text-sidebar-accent-foreground"
|
||||
: "text-sidebar-foreground hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground",
|
||||
)}
|
||||
>
|
||||
<a
|
||||
href={item.href}
|
||||
onClick={(event) => navigateTo(event, item.href)}
|
||||
aria-current={isActive ? "page" : undefined}
|
||||
aria-current={isCurrentItem ? "page" : undefined}
|
||||
className="flex min-w-0 flex-1 items-center gap-3 px-3 py-2.5 text-sm font-medium"
|
||||
>
|
||||
{item.icon ? (
|
||||
<span
|
||||
className={clsx(
|
||||
"flex h-5 w-5 items-center justify-center [&_svg]:h-5 [&_svg]:w-5",
|
||||
isActive
|
||||
isCurrentItem
|
||||
? "text-white"
|
||||
: "text-slate-500 group-hover:text-[#10B981] dark:text-slate-400 dark:group-hover:text-white",
|
||||
: isSectionActive
|
||||
? "text-[#10B981] dark:text-emerald-300"
|
||||
: "text-slate-500 group-hover:text-[#10B981] dark:text-slate-400 dark:group-hover:text-white",
|
||||
)}
|
||||
>
|
||||
{item.icon}
|
||||
@@ -131,9 +135,11 @@ const Sidebar = ({
|
||||
}
|
||||
className={clsx(
|
||||
"mr-2 inline-flex h-8 w-8 items-center justify-center rounded-md transition",
|
||||
isActive
|
||||
isCurrentItem
|
||||
? "text-white/90 hover:bg-white/10"
|
||||
: "text-slate-500 hover:bg-sidebar-accent dark:text-slate-400",
|
||||
: isSectionActive
|
||||
? "text-[#10B981] hover:bg-sidebar-accent/80 dark:text-emerald-300"
|
||||
: "text-slate-500 hover:bg-sidebar-accent/60 dark:text-slate-400",
|
||||
)}
|
||||
>
|
||||
<ChevronDown
|
||||
@@ -161,7 +167,7 @@ const Sidebar = ({
|
||||
"rounded-md px-3 py-2 text-sm transition",
|
||||
childActiveHref
|
||||
? "bg-sidebar-primary text-sidebar-primary-foreground shadow-sm"
|
||||
: "text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
|
||||
: "text-sidebar-foreground hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground",
|
||||
)}
|
||||
>
|
||||
{child.label}
|
||||
|
||||
Reference in New Issue
Block a user