e.stopPropagation()}> Actions Edit Invoice Copy Link Download PDF Archive

{/* Second Row */}

{invoice.amount} #{invoice.id}

{/* Third Row */}

Ein flexibles Abonnementmodell für {invoice.title.toLowerCase()}...

{/* Bottom Row */}

Due date: {invoice.date}

) } ``` ### `src/components/dashboards/business-operations-dashboard/components/nav-main.tsx` ```tsx "use client" import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, } from "@/components/ui/sidebar" export function NavMain({ items, label, }: { items: { title: string url: string // eslint-disable-next-line @typescript-eslint/no-explicit-any icon?: any isDisabled?: boolean isActive?: boolean }[] label?: string }) { return ( {label && {label}} {items.map((item) => ( { if (item.isDisabled) { e.preventDefault(); } }}> {item.icon && } {item.title} ))} ) } ``` ### `src/components/dashboards/business-operations-dashboard/components/nav-projects.tsx` ```tsx "use client" import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, } from "@/components/ui/sidebar" export function NavProjects({ projects, label, }: { projects: { name: string url: string // eslint-disable-next-line @typescript-eslint/no-explicit-any icon: any color?: string isDisabled?: boolean }[] label?: string }) { return ( {label && {label}} {projects.map((item) => ( { if (item.isDisabled) { e.preventDefault(); } }}> {item.name} ))} ) } ``` ### `src/components/dashboards/business-operations-dashboard/components/nav-user.tsx` ```tsx "use client" import { BadgeCheck, Bell, CreditCard, LogOut, Sparkles, } from "lucide-react" import { Avatar, AvatarFallback, AvatarImage, } from "@/components/ui/avatar" import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar, } from "@/components/ui/sidebar" import { IconDots } from "@tabler/icons-react" export function NavUser({ user, }: { user: { name: string email: string avatar: string } }) { const { isMobile } = useSidebar() return ( LS

{user.name} PRO

{user.name} {user.email}

Upgrade to Pro Account Billing Notifications Log out ) } ``` ### `src/components/dashboards/business-operations-dashboard/components/team-switcher.tsx` ```tsx "use client" import * as React from "react" import { ChevronsUpDown, Plus } from "lucide-react" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar, } from "@/components/ui/sidebar" export function TeamSwitcher({ teams, }: { teams: { name: string logo: React.ElementType plan: string }[] }) { const { isMobile } = useSidebar() const [activeTeam, setActiveTeam] = React.useState(teams[0]) if (!activeTeam) { return null } return (

{activeTeam.name} {activeTeam.plan}

Teams {teams.map((team, index) => ( setActiveTeam(team)} className="gap-2 p-2" >

{team.name} ⌘{index + 1} ))}

Add team

) } ``` ### `src/components/dashboards/business-operations-dashboard/dashboardLayout.tsx` ```tsx import { AppSidebar } from "./components/app-sidebar" import { SidebarInset, SidebarProvider, } from "@/components/ui/sidebar" export const DashboardLayout = ({ children }: { children: React.ReactNode }) => { return ( {children} ) } ``` ### `src/components/dashboards/business-operations-dashboard/data.ts` ```ts import { IconLayoutDashboard, IconCheckbox, IconUsers, IconFileInvoice, IconChartBar, IconSettings, IconUserPlus, IconCircleFilled, } from "@tabler/icons-react" import { type Invoice } from "./components/invoice-card" export const data = { user: { name: "Lily Senate", email: "lily@kansas.inc", avatar: "/avatars/lily.jpg", }, navMain: [ { title: "Dashboard", url: "#", icon: IconLayoutDashboard, isDisabled: true, }, { title: "Tasks", url: "#", icon: IconCheckbox, isDisabled: true, }, { title: "Customers", url: "#", icon: IconUsers, isDisabled: true, }, { title: "Invoices", url: "/dashboard/invoices", icon: IconFileInvoice, isActive: true, isDisabled: true, }, { title: "Reports", url: "#", icon: IconChartBar, isDisabled: true, }, ], settings: [ { title: "Settings", url: "#", icon: IconSettings, isDisabled: true, }, { title: "Invite users", url: "#", icon: IconUserPlus, isDisabled: true, }, ], favorites: [ { name: "Neo Gen", url: "#", icon: IconCircleFilled, color: "text-blue-500", isDisabled: true, }, { name: "Stacks.com", url: "https://www.google.com/search?q=Stacks.com", icon: IconCircleFilled, color: "text-orange-500", isDisabled: true, }, { name: "Aether AI", url: "#", icon: IconCircleFilled, color: "text-teal-500", isDisabled: true, }, { name: "CloudChat", url: "#", icon: IconCircleFilled, color: "text-purple-500", isDisabled: true, }, ], } export const invoices: Invoice[] = [ // Unpaid { id: "INV-S0030", amount: "€12,450.00", status: "unpaid", date: "March 5, 2027", title: "Product Design Service", gradient: "from-blue-400 to-purple-500" }, { id: "INV-S0078", amount: "€15,300.00", status: "unpaid", date: "August 14, 2027", title: "Brand Identity", gradient: "from-orange-400 to-rose-500" }, { id: "INV-S0045", amount: "€8,750.00", status: "unpaid", date: "October 22, 2027", title: "UI/UX Audit", gradient: "from-cyan-400 to-blue-600" }, { id: "INV-S0067", amount: "€2,300.00", status: "unpaid", date: "May 19, 2027", title: "Icon Set", gradient: "from-teal-400 to-yellow-500" }, { id: "INV-S0035", amount: "€9,900.00", status: "unpaid", date: "October 1, 2027", title: "Design Systems", gradient: "from-pink-400 to-indigo-500" }, // Paid { id: "INV-S0132", amount: "€17,650.00", status: "paid", date: "September 3, 2027", title: "SAAS Platform", gradient: "from-violet-500 to-fuchsia-500" }, { id: "INV-S0101", amount: "€3,600.00", status: "paid", date: "December 30, 2027", title: "Consulting", gradient: "from-blue-300 to-emerald-400" }, { id: "INV-S0123", amount: "€19,200.00", status: "paid", date: "February 18, 2027", title: "Full Scale Design", gradient: "from-indigo-400 to-cyan-400" }, { id: "INV-S0094", amount: "€11,100.00", status: "paid", date: "June 27, 2027", title: "Design Support", gradient: "from-rose-300 to-pink-500" }, { id: "INV-S0115", amount: "€16,750.00", status: "paid", date: "November 30, 2027", title: "User Research", gradient: "from-blue-500 to-indigo-600" }, // Draft { id: "INV-S0056", amount: "€1,500.00", status: "draft", date: "January 25, 2027", title: "Maintenance", gradient: "from-orange-500 to-yellow-400" }, { id: "INV-S0089", amount: "€5,800.00", status: "draft", date: "April 9, 2027", title: "App Redesign", gradient: "from-purple-400 to-pink-400" }, { id: "INV-S0110", amount: "€14,900.00", status: "draft", date: "November 11, 2027", title: "Marketing Web", gradient: "from-blue-400 to-emerald-400" }, { id: "INV-S0120", amount: "€4,400.00", status: "draft", date: "July 15, 2027", title: "Landing Page", gradient: "from-indigo-400 to-purple-500" }, { id: "INV-S0108", amount: "€7,250.00", status: "draft", date: "December 12, 2027", title: "Illustration", gradient: "from-blue-900 to-indigo-950" }, ] ``` ### `src/components/dashboards/business-operations-dashboard/demo.tsx` ```tsx "use client"; import { DashboardLayout } from "./dashboardLayout"; import InvoicesPageView from "./invoicesPageView"; export default function BusinessOperationsDashboardDemo() { return ( ); } ``` ### `src/components/dashboards/business-operations-dashboard/invoicesPageView.tsx` ```tsx "use client" import { IconPlus, IconSearch, IconLayoutGrid, IconFilter, IconLayoutSidebar, IconCalendarEvent, IconFileInvoice, IconDots, IconClockFilled, IconCircleCheckFilled, IconFileStarFilled, } from "@tabler/icons-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Tabs, TabsContent, TabsList, TabsTrigger, } from "@/components/ui/tabs" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { SidebarTrigger, useSidebar } from "@/components/ui/sidebar" import { InvoiceCard } from "./components/invoice-card" import { Separator } from '@/components/ui/separator' import { invoices } from "./data" export default function InvoicesPageView() { const { state, isMobile } = useSidebar() return (

{/* Header */}

{(state === "collapsed" || isMobile) && <>

}

Invoices

Page Settings Rename Page Duplicate Page Export as JSON Delete Page