restore: old src/ components, subscriptions, audit-log, client detail pages; fix tsconfig @/* paths; merge api.ts

2026-03-25 16:15:17 +08:00
parent 6565590eb3
commit 2b385ba866
19 changed files with 1423 additions and 48 deletions
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -0,0 +1,110 @@
+"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,
+  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: "/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>
+    </>
+  );
+}