Added top toolbar to AppShell

X-Lovable-Edit-ID: edt-4b99d7ff-d9f3-4422-9016-8547a45d41c9
Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
This commit is contained in:
gpt-engineer-app[bot]
2026-04-17 03:42:17 +00:00
co-authored by renee-png
+21 -1
View File
@@ -1,9 +1,13 @@
import { Link, useLocation, useNavigate } from "@tanstack/react-router";
import { useAuth } from "@/lib/auth";
import { Button } from "@/components/ui/button";
import { Briefcase, Users, FileText, Receipt, ShieldCheck, LogOut, Scale, LayoutDashboard, Calendar as CalendarIcon, CheckSquare, MessageSquare, Activity, DollarSign, FolderOpen, Files as FilesIcon, Settings as SettingsIcon, ClipboardList, UserPlus } from "lucide-react";
import { Briefcase, Users, FileText, Receipt, ShieldCheck, LogOut, Scale, LayoutDashboard, Calendar as CalendarIcon, CheckSquare, MessageSquare, Activity, DollarSign, FolderOpen, Files as FilesIcon, Settings as SettingsIcon, ClipboardList, UserPlus, User as UserIcon } from "lucide-react";
import { cn } from "@/lib/utils";
import type { ReactNode } from "react";
import { HeaderTimer } from "@/components/timer/header-timer";
import { QuickAddTime, QuickAddExpense } from "@/components/quick-add/quick-add";
import { DateCalculator } from "@/components/date-calculator";
import { NotificationBell } from "@/components/notifications/notification-bell";
interface NavItem {
to: string;
@@ -106,6 +110,22 @@ export function AppShell({ children }: { children: ReactNode }) {
</div>
<main className="flex-1 min-w-0 md:ml-0 mt-14 md:mt-0">
{/* Desktop top toolbar */}
<div className="hidden md:flex items-center justify-end gap-2 px-6 py-2 border-b bg-card/50">
<QuickAddTime />
<QuickAddExpense />
<DateCalculator />
<HeaderTimer />
<NotificationBell />
<Link
to="/settings/profile"
className="inline-flex items-center justify-center h-9 w-9 rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground transition-colors"
aria-label="My profile"
title="My profile"
>
<UserIcon className="h-4 w-4" />
</Link>
</div>
<div className="md:hidden flex overflow-x-auto gap-1 px-3 py-2 border-b bg-card">
{NAV.filter((n) => !n.adminOnly || isAdmin).map((item) => {
const active = item.to === "/" ? location.pathname === "/" : location.pathname.startsWith(item.to);