Nemo (Claude Code)
b719d87e1b
- Chart of Accounts (FIBEROPS-234): type-filtered table, add/seed/toggle-active - Journal Entries (FIBEROPS-235): double-entry form with debit=credit validation, read-only view modal - Expenses (FIBEROPS-236): date-range filtered table, record expense against expense accounts - Company Accounts + Transfers (FIBEROPS-237): balance cards, add account modal, transfer modal, transfers table - Financial Reports (FIBEROPS-238): Trial Balance, P&L, Balance Sheet, Cash Flow with date pickers - Sidebar nav entry (FIBEROPS-239): Accounting link with BookOpen icon, placed between Reports and Settings - AccountingNav horizontal sub-nav component shared across all accounting pages - New types: Account, JournalEntry, Expense, CompanyAccount, Transfer and report types added to src/types/index.ts
113 lines
3.5 KiB
TypeScript
113 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { cn } from "@/lib/utils";
|
|
import {
|
|
LayoutDashboard,
|
|
Users,
|
|
CreditCard,
|
|
FileText,
|
|
Banknote,
|
|
Ticket,
|
|
CheckSquare,
|
|
UserCog,
|
|
ClipboardList,
|
|
Settings,
|
|
Wifi,
|
|
Briefcase,
|
|
BarChart2,
|
|
BookOpen,
|
|
X,
|
|
} from "lucide-react";
|
|
|
|
const navItems = [
|
|
{ href: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
|
|
{ href: "/clients", label: "Clients", icon: Users },
|
|
{ href: "/subscriptions", label: "Subscriptions", icon: Wifi },
|
|
{ href: "/invoices", label: "Invoices", icon: FileText },
|
|
{ href: "/payments", label: "Payments", icon: Banknote },
|
|
{ href: "/remittances", label: "Remittances", icon: Briefcase },
|
|
{ href: "/tickets", label: "Tickets", icon: Ticket },
|
|
{ href: "/tasks", label: "Tasks", icon: CheckSquare },
|
|
{ href: "/users", label: "Users", icon: UserCog },
|
|
{ href: "/audit-log", label: "Audit Log", icon: ClipboardList },
|
|
{ href: "/reports", label: "Reports", icon: BarChart2 },
|
|
{ href: "/accounting", label: "Accounting", icon: BookOpen },
|
|
{ href: "/settings", label: "Settings", icon: Settings },
|
|
];
|
|
|
|
interface SidebarProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export function Sidebar({ isOpen, onClose }: SidebarProps) {
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
<>
|
|
{/* Mobile overlay */}
|
|
{isOpen && (
|
|
<div
|
|
className="fixed inset-0 z-20 bg-black/30 lg:hidden"
|
|
onClick={onClose}
|
|
/>
|
|
)}
|
|
|
|
{/* Sidebar */}
|
|
<aside
|
|
className={cn(
|
|
"fixed top-0 left-0 z-30 h-full w-60 bg-white border-r border-gray-200 flex flex-col transition-transform duration-200",
|
|
"lg:translate-x-0 lg:static lg:z-auto",
|
|
isOpen ? "translate-x-0" : "-translate-x-full"
|
|
)}
|
|
>
|
|
{/* Logo */}
|
|
<div className="flex items-center justify-between px-4 py-4 border-b border-gray-100">
|
|
<div className="flex items-center gap-2">
|
|
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-600">
|
|
<Wifi className="h-4 w-4 text-white" />
|
|
</div>
|
|
<span className="text-base font-bold text-gray-900">FiberOps</span>
|
|
</div>
|
|
<button
|
|
onClick={onClose}
|
|
className="rounded-lg p-1 text-gray-400 hover:bg-gray-100 lg:hidden"
|
|
>
|
|
<X className="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Nav items */}
|
|
<nav className="flex-1 overflow-y-auto px-3 py-4 space-y-0.5">
|
|
{navItems.map(({ href, label, icon: Icon }) => {
|
|
const isActive = pathname === href || pathname.startsWith(href + "/");
|
|
return (
|
|
<Link
|
|
key={href}
|
|
href={href}
|
|
onClick={onClose}
|
|
className={cn(
|
|
"flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
|
|
isActive
|
|
? "bg-blue-50 text-blue-700"
|
|
: "text-gray-600 hover:bg-gray-100 hover:text-gray-900"
|
|
)}
|
|
>
|
|
<Icon className={cn("h-4 w-4 shrink-0", isActive ? "text-blue-600" : "text-gray-400")} />
|
|
{label}
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
{/* Footer */}
|
|
<div className="border-t border-gray-100 px-3 py-3">
|
|
<p className="text-xs text-gray-400 text-center">FiberOps v1.0</p>
|
|
</div>
|
|
</aside>
|
|
</>
|
|
);
|
|
}
|