1d954217b7
- Added createWallet, updateWallet, deleteWallet, depositWallet, transferWallet, and listMovements handlers. - Created corresponding routes for wallet operations. - Developed frontend components for wallet management including dialogs for creating, editing, depositing, adjusting balance, transferring, and viewing movements. - Integrated wallet management into the authenticated routes.
89 lines
2.7 KiB
TypeScript
89 lines
2.7 KiB
TypeScript
import { Link } from "@tanstack/react-router";
|
|
import {
|
|
FileText,
|
|
Landmark,
|
|
LayoutDashboard,
|
|
Settings,
|
|
TrendingUp,
|
|
Wallet,
|
|
} from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const navItems = [
|
|
{ to: "/", label: "Panel", icon: LayoutDashboard },
|
|
{ to: "/expenses", label: "Gastos", icon: Wallet },
|
|
{ to: "/wallets", label: "Billeteras", icon: Landmark },
|
|
{ to: "/quotes", label: "Cotizaciones", icon: FileText },
|
|
{ to: "/quotes/belo", label: "BELO", icon: TrendingUp },
|
|
];
|
|
|
|
const bottomItems = [
|
|
{ to: "/settings", label: "Configuración", icon: Settings },
|
|
];
|
|
|
|
interface SidebarProps {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export function Sidebar({ open, onClose }: SidebarProps) {
|
|
return (
|
|
<>
|
|
{open && (
|
|
<button
|
|
type="button"
|
|
className="fixed inset-0 z-40 bg-black/20 md:hidden cursor-default"
|
|
onClick={onClose}
|
|
aria-label="Cerrar menú"
|
|
/>
|
|
)}
|
|
<aside
|
|
className={cn(
|
|
"fixed inset-y-0 left-0 z-50 flex w-60 flex-col border-r bg-sidebar transition-transform duration-200 md:relative md:translate-x-0",
|
|
open ? "translate-x-0" : "-translate-x-full",
|
|
)}
|
|
>
|
|
<div className="flex h-14 items-center border-b px-4">
|
|
<span className="text-lg font-semibold text-sidebar-foreground">
|
|
Personal Admin
|
|
</span>
|
|
</div>
|
|
<nav className="flex-1 space-y-1 p-3">
|
|
{navItems.map((item) => (
|
|
<Link
|
|
key={item.to}
|
|
to={item.to}
|
|
activeProps={{
|
|
className:
|
|
"bg-sidebar-accent text-sidebar-accent-foreground font-medium",
|
|
}}
|
|
className="flex items-center gap-3 rounded-lg px-3 py-2 text-sm text-sidebar-foreground/70 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
|
|
onClick={onClose}
|
|
>
|
|
<item.icon className="size-4" />
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
<div className="border-t p-3">
|
|
{bottomItems.map((item) => (
|
|
<Link
|
|
key={item.to}
|
|
to={item.to}
|
|
activeProps={{
|
|
className:
|
|
"bg-sidebar-accent text-sidebar-accent-foreground font-medium",
|
|
}}
|
|
className="flex items-center gap-3 rounded-lg px-3 py-2 text-sm text-sidebar-foreground/70 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
|
|
onClick={onClose}
|
|
>
|
|
<item.icon className="size-4" />
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</aside>
|
|
</>
|
|
);
|
|
}
|