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

create all proj components also build main screen ui also create sambil dashbord

Browse Source
This commit is contained in:
m7amedez5511
2026-06-04 21:24:01 +03:00
parent 54e57ff32a
commit 5554f5238c
27 changed files with 1274 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
app/components/layout/Navbar.tsx Normal file
View File

@@ -0,0 +1,61 @@
const navLinks = [
{ label: "الرئيسية", active: true },
{ label: "المميزات" },
{ label: "كيف يعمل" },
{ label: "الأسعار" },
{ label: "الأسئلة الشائعة" },
];
export default function Navbar() {
return (
<nav dir="rtl" className="w-full border-b border-slate-200 bg-white text-slate-900 shadow-sm">
<div className="mx-auto flex h-14 max-w-7xl items-center gap-4 px-6 lg:px-8">
<a href="#" className="flex items-center gap-3 text-right">
<span className="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-600 shadow-sm">
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.8"
strokeLinecap="round"
strokeLinejoin="round"
className="h-5 w-5 text-white"
aria-hidden="true"
>
<path d="M3 7h11l3 4h4l-2 4H8" />
<circle cx="9" cy="18" r="1.7" fill="currentColor" stroke="none" />
<circle cx="18" cy="18" r="1.7" fill="currentColor" stroke="none" />
</svg>
</span>
<span className="text-[16px] font-extrabold text-slate-900">LogiFlow</span>
</a>
<div className="hidden flex-1 items-center justify-center gap-6 md:flex">
{navLinks.map((link) => (
<a
key={link.label}
href="#"
className={`text-[13px] font-semibold transition hover:text-blue-600 ${
link.active ? "text-blue-600" : "text-slate-500"
}`}
>
{link.label}
</a>
))}
</div>
<div className="mr-auto flex items-center gap-2">
<button className="flex h-[34px] items-center rounded-lg border border-slate-200 bg-white px-3 text-[13px] font-semibold text-slate-700 shadow-sm transition hover:bg-slate-50">
إنشاء حساب عميل
</button>
<button className="flex h-[34px] items-center rounded-lg bg-blue-600 px-3 text-[13px] font-bold text-white shadow-sm transition hover:bg-blue-700">
تسجيل الدخول ←
</button>
</div>
</div>
</nav>
);
}

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

@@ -0,0 +1,54 @@
"use client";
import Link from "next/link";
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" },
];
export function Sidebar() {
const permissions = navItems.map((item) => item.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">
<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>
</div>
<nav className="mt-8 space-y-2">
{navItems.map((item) => {
const hasPermission = permissions.includes(item.permission) || item.permission === "read-dashboard";
if (!hasPermission) return null;
return (
<Link
key={item.href}
href={item.href}
className="flex items-center justify-between rounded-2xl border border-white/8 bg-slate-900/70 px-4 py-3 text-sm text-slate-200 transition hover:border-cyan-400/30 hover:bg-slate-800"
>
<span>{item.label}</span>
<span className="text-xs text-slate-400">→</span>
</Link>
);
})}
</nav>
<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>
</div>
</aside>
);
}

37
app/components/layout/Topbar.tsx Normal file
View File

@@ -0,0 +1,37 @@
"use client";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { clearAuth } from "../../lib/auth";
export function Topbar() {
const router = useRouter();
function handleLogout() {
clearAuth();
router.replace("/login");
}
return (
<header suppressHydrationWarning className="border-b border-white/10 bg-slate-950/70 px-4 py-4 lg:px-6">
<div className="mx-auto flex max-w-7xl items-center justify-between gap-4">
<div>
<p className="text-xs uppercase tracking-[0.35em] text-cyan-200">Operations dashboard</p>
<h1 className="text-xl font-semibold text-white lg:text-2xl">Logistics delivery management</h1>
</div>
<div className="flex items-center gap-3">
<Link href="/" className="rounded-full border border-white/10 bg-slate-900/80 px-4 py-2 text-sm text-slate-200 hover:bg-slate-800">Overview</Link>
<div suppressHydrationWarning className="hidden rounded-full border border-white/10 bg-slate-900/80 px-4 py-2 text-sm text-slate-200 md:block">Manager</div>
<button
type="button"
onClick={handleLogout}
className="rounded-full bg-rose-500/10 px-4 py-2 text-sm text-rose-100 hover:bg-rose-500/20"
>
Logout
</button>
</div>
</div>
</header>
);
}