117 lines
4.5 KiB
TypeScript
117 lines
4.5 KiB
TypeScript
"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";
|
|
|
|
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 AppShellProps = {
|
|
title: string;
|
|
subtitle?: string;
|
|
children: React.ReactNode;
|
|
};
|
|
|
|
export function AppShell({ title, subtitle, children }: AppShellProps) {
|
|
const pathname = usePathname();
|
|
const router = useRouter();
|
|
|
|
const onLogout = () => {
|
|
localStorage.removeItem("ledgerone_token");
|
|
localStorage.removeItem("ledgerone_user_id");
|
|
router.push("/login");
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background flex font-sans text-foreground">
|
|
{/* 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>
|
|
{navItems.map((item) => {
|
|
const isActive = pathname === item.href;
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
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"
|
|
}`}
|
|
>
|
|
{/* Icons could be added here */}
|
|
<span>{item.label}</span>
|
|
</Link>
|
|
);
|
|
})}
|
|
</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">
|
|
AC
|
|
</div>
|
|
<div className="overflow-hidden">
|
|
<p className="text-sm font-medium text-foreground truncate">Alex Chen</p>
|
|
<p className="text-xs text-muted-foreground truncate">Pro Plan</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-6 lg:px-8">
|
|
<div>
|
|
{/* Breadcrumbs or Title */}
|
|
<h1 className="text-lg font-semibold text-foreground">{title}</h1>
|
|
{subtitle && <p className="text-sm text-muted-foreground">{subtitle}</p>}
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4">
|
|
<div className="relative hidden md:block">
|
|
<input
|
|
type="text"
|
|
placeholder="Search..."
|
|
className="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"></path></svg>
|
|
</div>
|
|
<CurrencyToggle />
|
|
<MoodToggle />
|
|
<button onClick={onLogout} className="text-sm font-medium text-muted-foreground hover:text-foreground">
|
|
Log out
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main className="flex-1 p-6 lg:p-8 overflow-y-auto">
|
|
<div className="max-w-6xl mx-auto">
|
|
{children}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|