Reordered dashboard & sidebar

X-Lovable-Edit-ID: edt-2b41c1b3-97a6-40d1-8934-6df957e2c40b
Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
This commit is contained in:
gpt-engineer-app[bot]
2026-04-18 21:21:21 +00:00
co-authored by renee-png
2 changed files with 53 additions and 51 deletions
+22 -19
View File
@@ -38,25 +38,28 @@ interface NavItem {
adminOnly?: boolean;
}
const NAV: NavItem[] = [
{ to: "/admin/users", label: "Users", icon: ShieldCheck, adminOnly: true },
{ to: "/calendar", label: "Calendar", icon: CalendarIcon },
{ to: "/cases", label: "Cases", icon: Briefcase },
{ to: "/clients", label: "Clients", icon: Users },
{ to: "/collections", label: "Collections", icon: DollarSign },
{ to: "/contacts", label: "Contacts", icon: UserPlus },
{ to: "/", label: "Dashboard", icon: LayoutDashboard },
{ to: "/files", label: "Files", icon: FilesIcon },
{ to: "/forms", label: "Forms", icon: ClipboardList },
{ to: "/inbox", label: "Inbox", icon: InboxIcon },
{ to: "/invoices", label: "Invoices", icon: Receipt },
{ to: "/messages", label: "Messages", icon: MessageSquare },
{ to: "/payments", label: "Payments", icon: CreditCard },
{ to: "/documents", label: "Pleadings", icon: FolderOpen },
{ to: "/settings", label: "Settings", icon: SettingsIcon },
{ to: "/status", label: "Status Updates", icon: Activity },
{ to: "/tasks", label: "Tasks", icon: CheckSquare },
].sort((a, b) => a.label.localeCompare(b.label));
const NAV: NavItem[] = (() => {
const dashboard: NavItem = { to: "/", label: "Dashboard", icon: LayoutDashboard };
const rest: NavItem[] = [
{ to: "/admin/users", label: "Users", icon: ShieldCheck, adminOnly: true },
{ to: "/calendar", label: "Calendar", icon: CalendarIcon },
{ to: "/cases", label: "Cases", icon: Briefcase },
{ to: "/clients", label: "Clients", icon: Users },
{ to: "/collections", label: "Collections", icon: DollarSign },
{ to: "/contacts", label: "Contacts", icon: UserPlus },
{ to: "/files", label: "Files", icon: FilesIcon },
{ to: "/forms", label: "Forms", icon: ClipboardList },
{ to: "/inbox", label: "Inbox", icon: InboxIcon },
{ to: "/invoices", label: "Invoices", icon: Receipt },
{ to: "/messages", label: "Messages", icon: MessageSquare },
{ to: "/payments", label: "Payments", icon: CreditCard },
{ to: "/documents", label: "Pleadings", icon: FolderOpen },
{ to: "/settings", label: "Settings", icon: SettingsIcon },
{ to: "/status", label: "Status Updates", icon: Activity },
{ to: "/tasks", label: "Tasks", icon: CheckSquare },
].sort((a, b) => a.label.localeCompare(b.label));
return [dashboard, ...rest];
})();
void FileText;
export function AppShell({ children }: { children: ReactNode }) {
+31 -32
View File
@@ -173,6 +173,37 @@ function Dashboard() {
</CardContent>
</Card>
{/* Recent payments (moved to top) */}
<Card className="mb-6">
<CardHeader className="flex flex-row items-center justify-between">
<CardTitle className="text-base flex items-center gap-2">
<CreditCard className="h-4 w-4" />
Recent payments
</CardTitle>
<Button asChild variant="ghost" size="sm">
<Link to="/payments">View all <ArrowRight className="h-3 w-3 ml-1" /></Link>
</Button>
</CardHeader>
<CardContent className="space-y-1">
{recentPayments.length === 0 && <p className="text-sm text-muted-foreground">No payment requests yet.</p>}
{recentPayments.map((p) => (
<Link key={p.id} to="/pay/$id" params={{ id: p.id }}
className="flex items-center justify-between py-2.5 px-2 rounded-md hover:bg-muted/60 -mx-2">
<div className="min-w-0">
<div className="text-sm font-medium truncate">{p.recipient_name}</div>
<div className="text-xs text-muted-foreground truncate">
{p.description || "Payment request"} · {formatDate(p.paid_at || p.created_at)}
</div>
</div>
<div className="flex items-center gap-2">
<span className="text-sm font-medium">{formatCurrency((p.total_amount_cents ?? 0) / 100)}</span>
<Badge variant="outline" className={statusBadgeClass(p.status)}>{p.status}</Badge>
</div>
</Link>
))}
</CardContent>
</Card>
{/* Financial + My tasks */}
<div className="grid lg:grid-cols-[2fr_1fr] gap-6 mb-6">
<Card>
@@ -317,38 +348,6 @@ function Dashboard() {
</Card>
</div>
{/* Recent payments */}
<div className="grid lg:grid-cols-2 gap-6 mt-6">
<Card>
<CardHeader className="flex flex-row items-center justify-between">
<CardTitle className="text-base flex items-center gap-2">
<CreditCard className="h-4 w-4" />
Recent payments
</CardTitle>
<Button asChild variant="ghost" size="sm">
<Link to="/payments">View all <ArrowRight className="h-3 w-3 ml-1" /></Link>
</Button>
</CardHeader>
<CardContent className="space-y-1">
{recentPayments.length === 0 && <p className="text-sm text-muted-foreground">No payment requests yet.</p>}
{recentPayments.map((p) => (
<Link key={p.id} to="/pay/$id" params={{ id: p.id }}
className="flex items-center justify-between py-2.5 px-2 rounded-md hover:bg-muted/60 -mx-2">
<div className="min-w-0">
<div className="text-sm font-medium truncate">{p.recipient_name}</div>
<div className="text-xs text-muted-foreground truncate">
{p.description || "Payment request"} · {formatDate(p.paid_at || p.created_at)}
</div>
</div>
<div className="flex items-center gap-2">
<span className="text-sm font-medium">{formatCurrency((p.total_amount_cents ?? 0) / 100)}</span>
<Badge variant="outline" className={statusBadgeClass(p.status)}>{p.status}</Badge>
</div>
</Link>
))}
</CardContent>
</Card>
</div>
</PageContainer>
);
}