mfathy/LogisicsApp_Client
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add archive endpoint to user , driver , car ,order ,trip and update trip fails also update saidecar

Browse Source
This commit is contained in:
m7amedez5511
2026-07-02 19:04:51 +03:00
parent c33778012a
commit d225291b70
29 changed files with 2096 additions and 432 deletions
Download Patch File Download Diff File Expand all files Collapse all files

268
app/components/layout/Sidebar.tsx
View File

@@ -7,8 +7,7 @@ import { getStoredUser } from "@/src/lib/auth";
import Logo from "@/src/utils/logo";
import BrandIcon from "@/src/utils/brandIcon";
//ــــــــــــــ Drawer Context
//ــــــــــــــ Drawer Context
const DrawerCtx = createContext<{
open: boolean;
@@ -35,26 +34,82 @@ const navSections = [
{
label: "الرئيسية",
items: [
{ href: "/dashboard", label: "Dashboard", icon: "ti-layout-dashboard", permission: "read-dashboard" },
{ href: "/dashboard/users", label: "Users", icon: "ti-users", permission: "read-user" },
{
href: "/dashboard",
label: "لوحة التحكم",
icon: "ti-layout-dashboard",
permission: "read-dashboard",
},
{
href: "/dashboard/users",
label: "المستخدمون",
icon: "ti-users",
permission: "read-user",
},
],
},
{
label: "الأسطول",
items: [
{ href: "/dashboard/cars", label: "Cars", icon: "ti-car", permission: "read-car" },
{ href: "/dashboard/drivers", label: "Drivers", icon: "ti-steering-wheel", permission: "read-driver" },
{ href: "/dashboard/trips", label: "Trips", icon: "ti-route", permission: "read-trip" },
{
href: "/dashboard/cars",
label: "السيارات",
icon: "ti-car",
permission: "read-car",
},
{
href: "/dashboard/cars_maintenance",
label: "صيانة السيارات",
icon: "ti-tool",
permission: "read-maintenance",
},
{
href: "/dashboard/drivers",
label: "السائقون",
icon: "ti-steering-wheel",
permission: "read-driver",
},
{
href: "/dashboard/trips",
label: "الرحلات",
icon: "ti-route",
permission: "read-trip",
},
],
},
{
label: "العمليات",
items: [
{ href: "/dashboard/orders", label: "Orders", icon: "ti-package", permission: "read-order" },
{ href: "/dashboard/clients", label: "Clients", icon: "ti-users-group", permission: "read-client" },
{ href: "/dashboard/branches", label: "Branches", icon: "ti-building", permission: "read-branch" },
{ href: "/dashboard/roles", label: "Roles", icon: "ti-shield", permission: "read-role" },
{ href: "/dashboard/audit", label: "Audit", icon: "ti-clipboard-list", permission: "read-audit" },
{
href: "/dashboard/orders",
label: "الطلبات",
icon: "ti-package",
permission: "read-order",
},
{
href: "/dashboard/clients",
label: "العملاء",
icon: "ti-users-group",
permission: "read-client",
},
{
href: "/dashboard/branches",
label: "الفروع",
icon: "ti-building",
permission: "read-branch",
},
{
href: "/dashboard/roles",
label: "الادوار",
icon: "ti-shield",
permission: "read-role",
},
{
href: "/dashboard/audit",
label: "سجل العمليات",
icon: "ti-clipboard-list",
permission: "read-audit",
},
],
},
];
@@ -63,7 +118,6 @@ const navSections = [
Brand Icon
══════════════════════════════════════════ */
export function BrandIconButton({ onClick }: { onClick: () => void }) {
return (
<button
@@ -74,9 +128,12 @@ export function BrandIconButton({ onClick }: { onClick: () => void }) {
background: "transparent",
border: "1px solid var(--color-border)",
borderRadius: 8,
width: 36, height: 36,
width: 36,
height: 36,
padding: 2,
display: "flex", alignItems: "center", justifyContent: "center",
display: "flex",
alignItems: "center",
justifyContent: "center",
cursor: "pointer",
flexShrink: 0,
}}
@@ -94,16 +151,22 @@ const GRAD = "linear-gradient(175deg, #1E3A8A 0%, #1D4ED8 60%, #1565C0 100%)";
globals.css controls ALL display with !important
══════════════════════════════════════════ */
export function Sidebar() {
const pathname = usePathname();
const user = getStoredUser();
const permissions = user?.permissions ?? navSections.flatMap(s => s.items.map(i => i.permission));
const pathname = usePathname();
const user = getStoredUser();
const permissions =
user?.permissions ??
navSections.flatMap((s) => s.items.map((i) => i.permission));
const { open, setOpen } = useSidebarDrawer();
useEffect(() => { setOpen(false); }, [pathname, setOpen]);
useEffect(() => {
setOpen(false);
}, [pathname, setOpen]);
useEffect(() => {
document.body.style.overflow = open ? "hidden" : "";
return () => { document.body.style.overflow = ""; };
return () => {
document.body.style.overflow = "";
};
}, [open]);
return (
@@ -114,14 +177,19 @@ export function Sidebar() {
suppressHydrationWarning
style={{
background: GRAD,
flexDirection: "column", /* NO display property */
flexDirection: "column" /* NO display property */,
width: "var(--sidebar-width)",
flexShrink: 0,
minHeight: "100vh",
padding: "20px 12px",
}}
>
<SidebarContent pathname={pathname} permissions={permissions} user={user} compact={false} />
<SidebarContent
pathname={pathname}
permissions={permissions}
user={user}
compact={false}
/>
</aside>
{/* ══ 2. Compact rail */}
@@ -131,7 +199,7 @@ export function Sidebar() {
aria-label="التنقل المصغر"
style={{
background: GRAD,
flexDirection: "column", /* NO display property */
flexDirection: "column" /* NO display property */,
alignItems: "center",
position: "fixed",
top: 0,
@@ -144,7 +212,12 @@ export function Sidebar() {
overflowY: "auto",
}}
>
<SidebarContent pathname={pathname} permissions={permissions} user={user} compact={true} />
<SidebarContent
pathname={pathname}
permissions={permissions}
user={user}
compact={true}
/>
</aside>
{/* mobile drower*/}
@@ -156,7 +229,10 @@ export function Sidebar() {
aria-hidden="true"
style={{
position: "fixed",
top: 0, left: 0, right: 0, bottom: 0,
top: 0,
left: 0,
right: 0,
bottom: 0,
background: "rgba(0,0,0,0.5)",
zIndex: 40,
}}
@@ -170,7 +246,7 @@ export function Sidebar() {
aria-label="قائمة التنقل"
style={{
background: GRAD,
flexDirection: "column", /* NO display property */
flexDirection: "column" /* NO display property */,
position: "fixed",
top: 0,
bottom: 0,
@@ -180,7 +256,7 @@ export function Sidebar() {
padding: "20px 12px",
zIndex: 50,
overflowY: "auto",
transform: open ? "translateX(0)" : "translateX(100%)",
transition: "transform 280ms cubic-bezier(0.4,0,0.2,1)",
}}
@@ -197,19 +273,34 @@ export function Sidebar() {
background: "rgba(255,255,255,0.12)",
border: "none",
borderRadius: 8,
width: 30, height: 30,
display: "flex", alignItems: "center", justifyContent: "center",
width: 30,
height: 30,
display: "flex",
alignItems: "center",
justifyContent: "center",
cursor: "pointer",
color: "#fff",
}}
>
<svg width="13" height="13" viewBox="0 0 24 24" fill="none"
stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
<path d="M18 6 6 18M6 6l12 12"/>
<svg
width="13"
height="13"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2.5"
strokeLinecap="round"
>
<path d="M18 6 6 18M6 6l12 12" />
</svg>
</button>
<SidebarContent pathname={pathname} permissions={permissions} user={user} compact={false} />
<SidebarContent
pathname={pathname}
permissions={permissions}
user={user}
compact={false}
/>
</aside>
</>
);
@@ -219,7 +310,10 @@ export function Sidebar() {
SidebarContent
══════════════════════════════════════════ */
function SidebarContent({
pathname, permissions, user, compact,
pathname,
permissions,
user,
compact,
}: {
pathname: string;
permissions: string[];
@@ -228,28 +322,52 @@ function SidebarContent({
}) {
return (
<>
<div style={{ marginBottom: 28, display: "flex", justifyContent: compact ? "center" : "flex-start" }}>
<div
style={{
marginBottom: 28,
display: "flex",
justifyContent: compact ? "center" : "flex-start",
}}
>
{compact ? <BrandIcon size={36} /> : <Logo white />}
</div>
<nav style={{ flex: 1, display: "flex", flexDirection: "column", width: "100%" }}
aria-label="Main navigation">
<nav
style={{
flex: 1,
display: "flex",
flexDirection: "column",
width: "100%",
}}
aria-label="Main navigation"
>
{navSections.map((section) => (
<div key={section.label} style={{ marginBottom: 8 }}>
{!compact && (
<p style={{
fontSize: 9, letterSpacing: "0.14em", textTransform: "uppercase",
color: "rgba(255,255,255,0.45)", padding: "8px 8px 4px",
fontWeight: 600, textAlign: "start", margin: 0,
}}>
<p
style={{
fontSize: 9,
letterSpacing: "0.14em",
textTransform: "uppercase",
color: "rgba(255,255,255,0.45)",
padding: "8px 8px 4px",
fontWeight: 600,
textAlign: "start",
margin: 0,
}}
>
{section.label}
</p>
)}
{section.items.map((item) => {
const allowed = item.permission === "read-dashboard" || permissions.includes(item.permission);
const allowed =
item.permission === "read-dashboard" ||
permissions.includes(item.permission);
if (!allowed) return null;
const active = pathname === item.href
|| (item.href !== "/dashboard" && pathname.startsWith(item.href));
const active =
pathname === item.href ||
(item.href !== "/dashboard" &&
pathname.startsWith(item.href + "/"));
return (
<Link
key={item.href}
@@ -266,15 +384,20 @@ function SidebarContent({
fontSize: 13,
fontWeight: active ? 500 : 400,
color: active ? "#FFFFFF" : "rgba(255,255,255,0.55)",
background: active ? "rgba(255,255,255,0.15)" : "transparent",
background: active
? "rgba(255,255,255,0.15)"
: "transparent",
textDecoration: "none",
transition: "var(--transition-base)",
marginBottom: 2,
textAlign: "start",
}}
>
<i className={`ti ${item.icon}`} aria-hidden="true"
style={{ fontSize: compact ? 18 : 16, flexShrink: 0 }} />
<i
className={`ti ${item.icon}`}
aria-hidden="true"
style={{ fontSize: compact ? 18 : 16, flexShrink: 0 }}
/>
{!compact && item.label}
</Link>
);
@@ -288,27 +411,56 @@ function SidebarContent({
suppressHydrationWarning
title={user?.name ?? user?.userName ?? "—"}
style={{
width: 36, height: 36, borderRadius: "var(--radius-full)",
width: 36,
height: 36,
borderRadius: "var(--radius-full)",
background: "rgba(255,255,255,0.18)",
display: "flex", alignItems: "center", justifyContent: "center",
fontSize: 13, fontWeight: 600, color: "#fff", marginTop: 8,
display: "flex",
alignItems: "center",
justifyContent: "center",
fontSize: 13,
fontWeight: 600,
color: "#fff",
marginTop: 8,
}}
>
{(user?.name ?? user?.userName ?? "—").slice(0, 1)}
</div>
) : (
<div style={{
background: "rgba(255,255,255,0.12)", borderRadius: 10,
padding: "10px 12px", marginTop: 8, width: "100%",
}}>
<p suppressHydrationWarning style={{ fontSize: 13, fontWeight: 500, color: "#fff", margin: 0, textAlign: "start" }}>
<div
style={{
background: "rgba(255,255,255,0.12)",
borderRadius: 10,
padding: "10px 12px",
marginTop: 8,
width: "100%",
}}
>
<p
suppressHydrationWarning
style={{
fontSize: 13,
fontWeight: 500,
color: "#fff",
margin: 0,
textAlign: "start",
}}
>
{user?.name ?? user?.userName ?? "—"}
</p>
<p suppressHydrationWarning style={{ fontSize: 11, color: "rgba(255,255,255,0.55)", marginTop: 2, textAlign: "start" }}>
<p
suppressHydrationWarning
style={{
fontSize: 11,
color: "rgba(255,255,255,0.55)",
marginTop: 2,
textAlign: "start",
}}
>
{user?.role ?? "Signed in"}
</p>
</div>
)}
</>
);
}
}