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

handel login page and logout alson andel create order page to client and build spinner page and complet project structuer , create logo tamplet

Browse Source
This commit is contained in:
m7amedez5511
2026-06-08 17:24:53 +03:00
parent 5554f5238c
commit 70853958f5
27 changed files with 1425 additions and 303 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,34 +1,50 @@
// File: app/components/layout/Sidebar.tsx
"use client";
import Link from "next/link";
// FIX: Import getStoredUser so the sidebar reads the authenticated user's
// name and role from localStorage instead of showing hardcoded placeholders.
import { getStoredUser } from "../../../src/lib/auth";
const navItems = [
{ href: "/dashboard", label: "Dashboard", permission: "read-dashboard" },
{ href: "/users", label: "Users", permission: "read-user" },
{ href: "/cars", label: "Cars", permission: "read-car" },
{ href: "/drivers", label: "Drivers", permission: "read-driver" },
{ href: "/clients", label: "Clients", permission: "read-client" },
{ href: "/orders", label: "Orders", permission: "read-order" },
{ href: "/trips", label: "Trips", permission: "read-trip" },
{ href: "/branches", label: "Branches", permission: "read-branch" },
{ href: "/roles", label: "Roles", permission: "read-role" },
{ href: "/audit", label: "Audit", permission: "read-audit" },
{ href: "/users", label: "Users", permission: "read-user" },
{ href: "/cars", label: "Cars", permission: "read-car" },
{ href: "/drivers", label: "Drivers", permission: "read-driver" },
{ href: "/clients", label: "Clients", permission: "read-client" },
{ href: "/orders", label: "Orders", permission: "read-order" },
{ href: "/trips", label: "Trips", permission: "read-trip" },
{ href: "/branches", label: "Branches", permission: "read-branch" },
{ href: "/roles", label: "Roles", permission: "read-role" },
{ href: "/audit", label: "Audit", permission: "read-audit" },
];
export function Sidebar() {
const permissions = navItems.map((item) => item.permission);
// FIX: Read the stored user on render. suppressHydrationWarning handles
// the SSR/CSR mismatch since localStorage is browser-only.
const user = getStoredUser();
const permissions = user?.permissions ?? navItems.map((i) => i.permission);
return (
<aside suppressHydrationWarning className="hidden w-72 shrink-0 border-r border-white/10 bg-slate-950/80 p-6 lg:flex lg:flex-col">
<aside
suppressHydrationWarning
className="hidden w-72 shrink-0 border-r border-white/10 bg-slate-950/80 p-6 lg:flex lg:flex-col"
>
<div>
<p className="text-xs uppercase tracking-[0.35em] text-cyan-200">Logistics</p>
<h2 className="mt-3 text-xl font-semibold text-white">Ops Console</h2>
<p className="mt-2 text-sm text-slate-300">Fleet, clients, orders, and compliance in one place.</p>
<p className="mt-2 text-sm text-slate-300">
Fleet, clients, orders, and compliance in one place.
</p>
</div>
<nav className="mt-8 space-y-2">
{navItems.map((item) => {
const hasPermission = permissions.includes(item.permission) || item.permission === "read-dashboard";
// FIX: Check the real user permissions array fetched from stored auth.
// Dashboard is always visible regardless of permissions.
const hasPermission =
item.permission === "read-dashboard" ||
permissions.includes(item.permission);
if (!hasPermission) return null;
return (
@@ -46,9 +62,15 @@ export function Sidebar() {
<div className="mt-auto rounded-3xl border border-emerald-400/20 bg-emerald-400/10 p-4 text-sm text-emerald-50">
<p className="text-xs uppercase tracking-[0.25em] text-emerald-100">Authenticated</p>
<p suppressHydrationWarning className="mt-2 font-semibold">Operations user</p>
<p suppressHydrationWarning className="text-xs text-emerald-100/90">Signed in</p>
{/* FIX: Show the real user name and role from the stored auth session,
replacing the previous hardcoded "Operations user" / "Signed in" text. */}
<p suppressHydrationWarning className="mt-2 font-semibold">
{user?.name ?? user?.userName ?? "—"}
</p>
<p suppressHydrationWarning className="text-xs text-emerald-100/90">
{user?.role ? `Role: ${user.role}` : "Signed in"}
</p>
</div>
</aside>
);
}
}