1efa979443
Adds complete initial codebase for the RJ Bulk Supplies fuel delivery backoffice: - Authentication pages and protected route layouts - Customer, supplier, fuel purchase, and delivery note management - Custom reporting and customer statement sending tools - Full UI component library and Tailwind styling - Server actions, API routes, and PocketBase integration - Development scripts and project configuration updates - Updated README and package metadata
114 lines
3.6 KiB
TypeScript
114 lines
3.6 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import {
|
|
LayoutDashboard,
|
|
Users,
|
|
Tag,
|
|
Package,
|
|
Banknote,
|
|
Truck,
|
|
Fuel,
|
|
Send,
|
|
BarChart3,
|
|
ScrollText,
|
|
Settings,
|
|
Boxes,
|
|
} from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type NavItem = {
|
|
href: string;
|
|
label: string;
|
|
icon: React.ComponentType<{ className?: string }>;
|
|
};
|
|
|
|
const groups: { label: string; items: NavItem[] }[] = [
|
|
{
|
|
label: "Overview",
|
|
items: [
|
|
{ href: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
|
|
],
|
|
},
|
|
{
|
|
label: "Operations",
|
|
items: [
|
|
{ href: "/customers", label: "Customers", icon: Users },
|
|
{ href: "/delivery-notes", label: "Delivery Notes", icon: Package },
|
|
{ href: "/cash-customers", label: "Cash Customers", icon: Banknote },
|
|
{ href: "/suppliers", label: "Suppliers", icon: Truck },
|
|
{ href: "/fuel-purchases", label: "Fuel Purchases", icon: Fuel },
|
|
],
|
|
},
|
|
{
|
|
label: "Pricing & reports",
|
|
items: [
|
|
{ href: "/pricing", label: "Pricing", icon: Tag },
|
|
{ href: "/send-statement", label: "Send Statement", icon: Send },
|
|
{ href: "/custom-reports", label: "Custom Reports", icon: BarChart3 },
|
|
{ href: "/statements", label: "Statement Log", icon: ScrollText },
|
|
],
|
|
},
|
|
{
|
|
label: "Admin",
|
|
items: [
|
|
{ href: "/settings", label: "Settings", icon: Settings },
|
|
],
|
|
},
|
|
];
|
|
|
|
export function Sidebar() {
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
<aside className="hidden md:flex md:w-64 md:flex-col md:fixed md:inset-y-0 z-30 border-r bg-sidebar text-sidebar-foreground">
|
|
<div className="flex h-16 items-center gap-2 border-b border-sidebar-border px-4">
|
|
<div className="flex h-9 w-9 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground font-bold">
|
|
RJ
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<span className="text-sm font-semibold">RJ Bulk Supplies</span>
|
|
<span className="text-xs text-muted-foreground">Back office</span>
|
|
</div>
|
|
</div>
|
|
<nav className="flex-1 overflow-y-auto px-3 py-4 space-y-5">
|
|
{groups.map((group) => {
|
|
const isAdminGroup = group.label === "Admin";
|
|
return (
|
|
<div key={group.label}>
|
|
<div className="px-3 mb-1.5 text-[11px] font-semibold uppercase tracking-[0.12em] text-primary/80">
|
|
{group.label}
|
|
</div>
|
|
<div className="space-y-1">
|
|
{group.items.map((item) => {
|
|
const Icon = item.icon;
|
|
const active = pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href + "/"));
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={cn(
|
|
"flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors",
|
|
active
|
|
? "bg-sidebar-accent text-sidebar-accent-foreground font-medium"
|
|
: "hover:bg-sidebar-accent/50",
|
|
isAdminGroup && "text-muted-foreground"
|
|
)}
|
|
>
|
|
<Icon className="h-4 w-4" />
|
|
{item.label}
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</nav>
|
|
<div className="px-4 py-3 border-t border-sidebar-border text-[10px] text-muted-foreground">
|
|
RJ Bulk v1.0
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|