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

src/components/Providers.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { AuthProvider } from "@/contexts/AuthContext";
+import { Toaster } from "sonner";
+import { useState } from "react";
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 30 * 1000,
+            retry: 1,
+          },
+        },
+      })
+  );
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <AuthProvider>
+        {children}
+        <Toaster richColors position="top-right" />
+      </AuthProvider>
+    </QueryClientProvider>
+  );
+}

src/components/layout/AppLayout.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { Sidebar } from "./Sidebar";
+import { TopBar } from "./TopBar";
+import { useAuth } from "@/contexts/AuthContext";
+
+export function AppLayout({ children }: { children: React.ReactNode }) {
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const { isAuthenticated } = useAuth();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!isAuthenticated) {
+      const token = localStorage.getItem("accessToken");
+      if (!token) {
+        router.push("/login");
+      }
+    }
+  }, [isAuthenticated, router]);
+
+  return (
+    <div className="flex h-screen bg-gray-50 overflow-hidden">
+      <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
+      <div className="flex flex-1 flex-col min-w-0 overflow-hidden">
+        <TopBar onMenuClick={() => setSidebarOpen(true)} />
+        <main className="flex-1 overflow-y-auto p-4 md:p-6">
+          {children}
+        </main>
+      </div>
+    </div>
+  );
+}

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>
+    </>
+  );
+}

src/components/layout/TopBar.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { useAuth } from "@/contexts/AuthContext";
+import { Menu, LogOut, User } from "lucide-react";
+
+interface TopBarProps {
+  onMenuClick: () => void;
+}
+
+export function TopBar({ onMenuClick }: TopBarProps) {
+  const { user, tenantSlug, logout } = useAuth();
+
+  return (
+    <header className="sticky top-0 z-10 flex h-14 items-center justify-between border-b border-gray-200 bg-white px-4 shadow-sm">
+      <div className="flex items-center gap-3">
+        <button
+          onClick={onMenuClick}
+          className="rounded-lg p-1.5 text-gray-500 hover:bg-gray-100 lg:hidden"
+        >
+          <Menu className="h-5 w-5" />
+        </button>
+        <div className="flex items-center gap-2">
+          <span className="text-xs font-medium text-gray-400 uppercase tracking-wide">Tenant:</span>
+          <span className="text-sm font-semibold text-blue-600">{tenantSlug}</span>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-3">
+        <div className="hidden sm:flex items-center gap-2 text-sm text-gray-600">
+          <User className="h-4 w-4 text-gray-400" />
+          <span>{user?.name || user?.email || "User"}</span>
+          <span className="text-xs text-gray-400 bg-gray-100 px-2 py-0.5 rounded-full">{user?.role}</span>
+        </div>
+        <button
+          onClick={logout}
+          className="flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm text-gray-600 hover:bg-red-50 hover:text-red-600 transition-colors"
+        >
+          <LogOut className="h-4 w-4" />
+          <span className="hidden sm:inline">Logout</span>
+        </button>
+      </div>
+    </header>
+  );
+}

src/components/ui/Badge.tsx

@@ -0,0 +1,31 @@
+import { cn } from "@/lib/utils";
+
+interface BadgeProps {
+  children: React.ReactNode;
+  variant?: "default" | "success" | "warning" | "danger" | "info" | "muted" | "purple";
+  className?: string;
+}
+
+const variantClasses: Record<string, string> = {
+  default: "bg-blue-100 text-blue-800",
+  success: "bg-green-100 text-green-800",
+  warning: "bg-amber-100 text-amber-800",
+  danger: "bg-red-100 text-red-800",
+  info: "bg-sky-100 text-sky-800",
+  muted: "bg-gray-100 text-gray-700",
+  purple: "bg-purple-100 text-purple-800",
+};
+
+export function Badge({ children, variant = "default", className }: BadgeProps) {
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
+        variantClasses[variant],
+        className
+      )}
+    >
+      {children}
+    </span>
+  );
+}

src/components/ui/Button.tsx

@@ -0,0 +1,50 @@
+import { cn } from "@/lib/utils";
+import { ButtonHTMLAttributes, forwardRef } from "react";
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "primary" | "secondary" | "danger" | "ghost" | "outline";
+  size?: "sm" | "md" | "lg";
+  isLoading?: boolean;
+}
+
+const variantClasses: Record<string, string> = {
+  primary: "bg-blue-600 hover:bg-blue-700 text-white border-transparent",
+  secondary: "bg-gray-100 hover:bg-gray-200 text-gray-700 border-transparent",
+  danger: "bg-red-600 hover:bg-red-700 text-white border-transparent",
+  ghost: "bg-transparent hover:bg-gray-100 text-gray-700 border-transparent",
+  outline: "bg-white hover:bg-gray-50 text-gray-700 border-gray-300",
+};
+
+const sizeClasses: Record<string, string> = {
+  sm: "px-3 py-1.5 text-sm",
+  md: "px-4 py-2 text-sm",
+  lg: "px-6 py-3 text-base",
+};
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ variant = "primary", size = "md", isLoading, className, children, disabled, ...props }, ref) => {
+    return (
+      <button
+        ref={ref}
+        disabled={disabled || isLoading}
+        className={cn(
+          "inline-flex items-center justify-center gap-2 rounded-lg border font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 disabled:opacity-50 disabled:cursor-not-allowed",
+          variantClasses[variant],
+          sizeClasses[size],
+          className
+        )}
+        {...props}
+      >
+        {isLoading && (
+          <svg className="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+          </svg>
+        )}
+        {children}
+      </button>
+    );
+  }
+);
+
+Button.displayName = "Button";

src/components/ui/Card.tsx

@@ -0,0 +1,34 @@
+import { cn } from "@/lib/utils";
+
+interface CardProps {
+  children: React.ReactNode;
+  className?: string;
+  onClick?: () => void;
+}
+
+export function Card({ children, className, onClick }: CardProps) {
+  return (
+    <div
+      className={cn("rounded-xl border border-gray-200 bg-white shadow-sm", className)}
+      onClick={onClick}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function CardHeader({ children, className }: CardProps) {
+  return (
+    <div className={cn("flex items-center justify-between border-b border-gray-100 px-6 py-4", className)}>
+      {children}
+    </div>
+  );
+}
+
+export function CardTitle({ children, className }: CardProps) {
+  return <h3 className={cn("text-base font-semibold text-gray-900", className)}>{children}</h3>;
+}
+
+export function CardContent({ children, className }: CardProps) {
+  return <div className={cn("px-6 py-4", className)}>{children}</div>;
+}

src/components/ui/Input.tsx

@@ -0,0 +1,39 @@
+import { cn } from "@/lib/utils";
+import { InputHTMLAttributes, forwardRef } from "react";
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+  hint?: string;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ label, error, hint, className, id, ...props }, ref) => {
+    const inputId = id || label?.toLowerCase().replace(/\s+/g, "-");
+    return (
+      <div className="flex flex-col gap-1.5">
+        {label && (
+          <label htmlFor={inputId} className="text-sm font-medium text-gray-700">
+            {label}
+          </label>
+        )}
+        <input
+          ref={ref}
+          id={inputId}
+          className={cn(
+            "block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400",
+            "focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500",
+            "disabled:bg-gray-50 disabled:cursor-not-allowed",
+            error && "border-red-500 focus:border-red-500 focus:ring-red-500",
+            className
+          )}
+          {...props}
+        />
+        {error && <p className="text-xs text-red-600">{error}</p>}
+        {hint && !error && <p className="text-xs text-gray-500">{hint}</p>}
+      </div>
+    );
+  }
+);
+
+Input.displayName = "Input";

src/components/ui/Modal.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { cn } from "@/lib/utils";
+import { X } from "lucide-react";
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function Modal({ isOpen, onClose, title, children, className }: ModalProps) {
+  const overlayRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    if (isOpen) document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [isOpen, onClose]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      ref={overlayRef}
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
+      onClick={(e) => e.target === overlayRef.current && onClose()}
+    >
+      <div className={cn("w-full max-w-lg rounded-xl bg-white shadow-xl", className)}>
+        <div className="flex items-center justify-between border-b border-gray-100 px-6 py-4">
+          <h3 className="text-base font-semibold text-gray-900">{title}</h3>
+          <button
+            onClick={onClose}
+            className="rounded-lg p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+        <div className="px-6 py-4">{children}</div>
+      </div>
+    </div>
+  );
+}

src/components/ui/Table.tsx

@@ -0,0 +1,58 @@
+import { cn } from "@/lib/utils";
+
+interface TableProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function Table({ children, className }: TableProps) {
+  return (
+    <div className="overflow-x-auto rounded-xl border border-gray-200 bg-white">
+      <table className={cn("w-full text-sm", className)}>
+        {children}
+      </table>
+    </div>
+  );
+}
+
+export function TableHead({ children }: TableProps) {
+  return <thead className="bg-gray-50 text-xs uppercase text-gray-500">{children}</thead>;
+}
+
+export function TableBody({ children }: TableProps) {
+  return <tbody className="divide-y divide-gray-100">{children}</tbody>;
+}
+
+export function TableRow({ children, className, onClick }: TableProps & { onClick?: () => void }) {
+  return (
+    <tr
+      className={cn("transition-colors", onClick && "cursor-pointer hover:bg-blue-50", className)}
+      onClick={onClick}
+    >
+      {children}
+    </tr>
+  );
+}
+
+export function Th({ children, className }: TableProps) {
+  return <th className={cn("px-4 py-3 text-left font-medium", className)}>{children}</th>;
+}
+
+export function Td({ children, className }: TableProps) {
+  return <td className={cn("px-4 py-3 text-gray-700", className)}>{children}</td>;
+}
+
+export function EmptyState({ message = "No data yet" }: { message?: string }) {
+  return (
+    <tr>
+      <td colSpan={100} className="py-12 text-center text-gray-400">
+        <div className="flex flex-col items-center gap-2">
+          <svg className="h-12 w-12 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
+          </svg>
+          <span className="text-sm">{message}</span>
+        </div>
+      </td>
+    </tr>
+  );
+}