250 lines
9.2 KiB
JavaScript
250 lines
9.2 KiB
JavaScript
import { writeFileSync } from "fs";
|
|
|
|
writeFileSync("components/app-shell.tsx", `"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname, useRouter } from "next/navigation";
|
|
import React, { useEffect, useState } from "react";
|
|
import { CurrencyToggle, MoodToggle } from "./currency-toggle";
|
|
import { apiFetch, clearAuth, getStoredUser } from "../lib/api";
|
|
|
|
const navItems = [
|
|
{ href: "/app", label: "Dashboard" },
|
|
{ href: "/app/connect", label: "Accounts" },
|
|
{ href: "/transactions", label: "Transactions" },
|
|
{ href: "/rules", label: "Rules" },
|
|
{ href: "/exports", label: "Exports" },
|
|
{ href: "/tax", label: "Tax" },
|
|
{ href: "/settings", label: "Settings" },
|
|
];
|
|
|
|
type User = {
|
|
id: string;
|
|
email: string;
|
|
fullName?: string | null;
|
|
emailVerified?: boolean;
|
|
twoFactorEnabled?: boolean;
|
|
};
|
|
|
|
type SubscriptionData = {
|
|
plan?: string;
|
|
status?: string;
|
|
};
|
|
|
|
type AppShellProps = {
|
|
title: string;
|
|
subtitle?: string;
|
|
children: React.ReactNode;
|
|
};
|
|
|
|
function initials(user: User): string {
|
|
if (user.fullName) {
|
|
const parts = user.fullName.trim().split(/\\s+/);
|
|
if (parts.length >= 2) return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
|
|
return parts[0].slice(0, 2).toUpperCase();
|
|
}
|
|
return user.email.slice(0, 2).toUpperCase();
|
|
}
|
|
|
|
function displayName(user: User): string {
|
|
return user.fullName?.trim() || user.email;
|
|
}
|
|
|
|
export function AppShell({ title, subtitle, children }: AppShellProps) {
|
|
const pathname = usePathname();
|
|
const router = useRouter();
|
|
const [mobileOpen, setMobileOpen] = useState(false);
|
|
const [user, setUser] = useState<User | null>(getStoredUser<User>());
|
|
const [planLabel, setPlanLabel] = useState("Free Plan");
|
|
|
|
useEffect(() => {
|
|
// Fetch latest user profile
|
|
apiFetch<{ user: User }>("/api/auth/me")
|
|
.then((res) => {
|
|
if (!res.error && res.data?.user) {
|
|
setUser(res.data.user);
|
|
}
|
|
})
|
|
.catch(() => {});
|
|
|
|
// Fetch subscription plan
|
|
apiFetch<SubscriptionData>("/api/stripe/subscription")
|
|
.then((res) => {
|
|
if (!res.error && res.data?.plan) {
|
|
const p = res.data.plan;
|
|
setPlanLabel(p.charAt(0).toUpperCase() + p.slice(1) + " Plan");
|
|
}
|
|
})
|
|
.catch(() => {});
|
|
}, []);
|
|
|
|
const onLogout = async () => {
|
|
const refreshToken = localStorage.getItem("ledgerone_refresh_token") ?? "";
|
|
try {
|
|
await fetch("/api/auth/logout", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ refreshToken }),
|
|
});
|
|
} catch {}
|
|
clearAuth();
|
|
router.push("/login");
|
|
};
|
|
|
|
const NavLinks = () => (
|
|
<>
|
|
{navItems.map((item) => {
|
|
const isActive = pathname === item.href || (item.href !== "/app" && pathname.startsWith(item.href));
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
onClick={() => setMobileOpen(false)}
|
|
className={\`flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors \${
|
|
isActive
|
|
? "bg-secondary text-foreground"
|
|
: "text-muted-foreground hover:bg-secondary/50 hover:text-foreground"
|
|
}\`}
|
|
>
|
|
<span>{item.label}</span>
|
|
</Link>
|
|
);
|
|
})}
|
|
</>
|
|
);
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background flex font-sans text-foreground">
|
|
{/* Desktop Sidebar */}
|
|
<aside className="w-64 bg-background border-r border-border flex-col hidden lg:flex">
|
|
<div className="h-16 flex items-center px-6 border-b border-border">
|
|
<div className="flex items-center gap-2">
|
|
<div className="h-6 w-6 rounded bg-primary flex items-center justify-center text-primary-foreground font-bold text-xs shadow-glow-teal">
|
|
L1
|
|
</div>
|
|
<span className="font-semibold text-foreground tracking-tight">LedgerOne</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-4 space-y-1">
|
|
<div className="px-2 py-2 mb-2">
|
|
<p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Workspace</p>
|
|
</div>
|
|
<NavLinks />
|
|
</div>
|
|
|
|
<div className="mt-auto p-4 border-t border-border">
|
|
<div className="flex items-center gap-3 px-2 py-2">
|
|
<div className="h-8 w-8 rounded-full bg-primary/10 text-primary flex items-center justify-center text-xs font-medium flex-shrink-0">
|
|
{user ? initials(user) : "?"}
|
|
</div>
|
|
<div className="overflow-hidden">
|
|
<p className="text-sm font-medium text-foreground truncate">{user ? displayName(user) : "Loading..."}</p>
|
|
<p className="text-xs text-muted-foreground truncate">{planLabel}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
{/* Mobile overlay */}
|
|
{mobileOpen && (
|
|
<div
|
|
className="fixed inset-0 z-40 bg-black/50 lg:hidden"
|
|
onClick={() => setMobileOpen(false)}
|
|
/>
|
|
)}
|
|
|
|
{/* Mobile Sidebar drawer */}
|
|
<aside
|
|
className={\`fixed inset-y-0 left-0 z-50 w-64 bg-background border-r border-border flex flex-col transform transition-transform duration-200 lg:hidden \${
|
|
mobileOpen ? "translate-x-0" : "-translate-x-full"
|
|
}\`}
|
|
>
|
|
<div className="h-16 flex items-center justify-between px-6 border-b border-border">
|
|
<div className="flex items-center gap-2">
|
|
<div className="h-6 w-6 rounded bg-primary flex items-center justify-center text-primary-foreground font-bold text-xs shadow-glow-teal">
|
|
L1
|
|
</div>
|
|
<span className="font-semibold text-foreground tracking-tight">LedgerOne</span>
|
|
</div>
|
|
<button onClick={() => setMobileOpen(false)} className="text-muted-foreground hover:text-foreground">
|
|
<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div className="p-4 space-y-1 flex-1">
|
|
<div className="px-2 py-2 mb-2">
|
|
<p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Workspace</p>
|
|
</div>
|
|
<NavLinks />
|
|
</div>
|
|
|
|
<div className="p-4 border-t border-border">
|
|
<div className="flex items-center gap-3 px-2 py-2">
|
|
<div className="h-8 w-8 rounded-full bg-primary/10 text-primary flex items-center justify-center text-xs font-medium flex-shrink-0">
|
|
{user ? initials(user) : "?"}
|
|
</div>
|
|
<div className="overflow-hidden">
|
|
<p className="text-sm font-medium text-foreground truncate">{user ? displayName(user) : "Loading..."}</p>
|
|
<p className="text-xs text-muted-foreground truncate">{planLabel}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
{/* Main Content */}
|
|
<div className="flex-1 flex flex-col min-w-0">
|
|
<header className="h-16 bg-background border-b border-border flex items-center justify-between px-4 lg:px-8">
|
|
<div className="flex items-center gap-3">
|
|
{/* Hamburger — mobile only */}
|
|
<button
|
|
className="lg:hidden text-muted-foreground hover:text-foreground"
|
|
onClick={() => setMobileOpen(true)}
|
|
>
|
|
<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
|
|
</svg>
|
|
</button>
|
|
<div>
|
|
<h1 className="text-lg font-semibold text-foreground">{title}</h1>
|
|
{subtitle && <p className="text-sm text-muted-foreground">{subtitle}</p>}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3 lg:gap-4">
|
|
<div className="relative hidden md:block">
|
|
<input
|
|
type="text"
|
|
placeholder="Search..."
|
|
className="w-48 lg:w-64 pl-9 pr-4 py-1.5 bg-secondary/30 border border-border rounded-md text-sm text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all"
|
|
/>
|
|
<svg className="w-4 h-4 text-muted-foreground absolute left-3 top-1/2 -translate-y-1/2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
</div>
|
|
<CurrencyToggle />
|
|
<MoodToggle />
|
|
<button
|
|
onClick={onLogout}
|
|
className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
|
|
>
|
|
Log out
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main className="flex-1 p-4 lg:p-8 overflow-y-auto">
|
|
<div className="max-w-6xl mx-auto">
|
|
{children}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
`);
|
|
|
|
console.log("✅ AppShell updated with real user data and mobile nav");
|