# Invoice manager dashboard

A shadcn/ui block from the [@watermelon](https://ui.watermelon.sh/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/watermelon/invoice-manager-dashboard).

- Page, with a live preview: https://shadcn.exchange/r/watermelon/invoice-manager-dashboard
- Screenshot: https://shadcn.exchange/shot/watermelon/invoice-manager-dashboard/light.png
- Registry item: https://registry.watermelon.sh/r/invoice-manager-dashboard.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/watermelon/invoice-manager-dashboard.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `@radix-ui/react-avatar`, `@radix-ui/react-checkbox`, `@radix-ui/react-collapsible`, `@radix-ui/react-dialog`, `@radix-ui/react-dropdown-menu`, `@radix-ui/react-label`, `@radix-ui/react-select`, `@radix-ui/react-separator`, `@radix-ui/react-slot`, `@radix-ui/react-tooltip`, `class-variance-authority`, `lucide-react`
- Registry items: `avatar`, `badge`, `breadcrumb`, `button`, `checkbox`, `collapsible`, `dialog`, `dropdown-menu`, `input`, `label`, `pagination`, `popover`, `select`, `separator`, `sheet`, `sidebar`, `skeleton`, `table`, `tooltip`

## Files

### `src/components/dashboards/invoice-manager-dashboard/components/app-sidebar.tsx`

```tsx
"use client"

import * as React from "react"
import {
  LayoutDashboard,
  Users,
  FolderKanban,
  DollarSign,
  Landmark,
  ChartSpline,
  Headset,
  Bell,
  UsersRound,
  Workflow,
  Plug,
  ShieldCheck,
  Command,
  KeyRound,
  Terminal,
  Settings,
} from "lucide-react"
import { Button } from "@/components/ui/button"

import { TeamSwitcher } from "./team-switcher"
import {
  Sidebar,
  SidebarContent,
  SidebarHeader,
  SidebarRail,
} from "@/components/ui/sidebar"
import { NavTertiary } from "./nav-Tertiary"
import { NavMain } from "./nav-main"
import { NavSecondary } from "./nav-secondary"
import { NavFooter } from "./nav-footer"
import { SearchForm } from "./search-form"

// This is sample data.
const data = {
  user: {
    name: "John Doe",
    email: "john@revnix.com",
    avatar: "/avatars/user.jpg",
  },
  teams: [
    {
      name: "Revnix",
      logo: Command,
      plan: "Enterprise",
    },
  ],
  navMain: [
    {
      name: "Overview",
      url: "#",
      icon: LayoutDashboard,
      isDisabled: true,
    },
    {
      name: "Clients",
      url: "#",
      icon: Users,
      isDisabled: true,
    },
    {
      name: "Projects",
      url: "#",
      icon: FolderKanban,
      isDisabled: true,
    },

  ],
  navSecondary: [
    {
      title: "Payments Hub",
      url: "#",
      icon: DollarSign,
      isDisabled: true,
    },
    {
      title: "Financial Center",
      url: "#",
      icon: Landmark,
      isActive: true,
      items: [
        {
          title: "Invoices Dashboard",
          url: "#",
          isDisabled: true,
        },
        {
          title: "Invoice Manager",
          url: "/financial-center/invoice-manager",
        },
        {
          title: "Payment History",
          url: "#",
          isDisabled: true,
        },
        {
          title: "Subscriptions",
          url: "#",
          isDisabled: true,
        },
        {
          title: "Revenue Insights",
          url: "#",
          isDisabled: true,
        },
      ],
    },
    {
      title: "Analytics",
      url: "#",
      icon: ChartSpline,
      isDisabled: true,
      items: [
        {
          title: "Growth Overview",
          url: "#",
          isDisabled: true,
        },
        {
          title: "Expense Tracker",
          url: "#",
          isDisabled: true,
        },
        {
          title: "Performance Reports",
          url: "#",
          isDisabled: true,
        },
      ],
    },
    {
      title: "Support Center",
      url: "#",
      icon: Headset,
      dialog: {
        title: "Customer Support",
        description: "How can we help you today?",
        content: (
          <div className="grid gap-4 py-4">
            <p className="text-sm text-muted-foreground">Contact our support team for any issues or questions about your account.</p>
            <div className="flex flex-col gap-2">
              <Button className="w-full">Open Live Chat</Button>
              <Button variant="outline" className="w-full">Read Documentation</Button>
            </div>
          </div>
        )
      }
    },
    {
      title: "Notifications",
      url: "#",
      icon: Bell,
      dialog: {
        title: "System Notifications",
        description: "Stay updated with your latest alerts.",
        content: (
          <div className="space-y-4 py-4">
            {[1, 2].map((i) => (
              <div key={i} className="flex gap-3 items-start border-b pb-3 last:border-0 last:pb-0">
                <div className="size-2 bg-primary rounded-full mt-1.5 shrink-0" />
                <div>
                  <p className="text-sm font-medium">New Feature: AI Invoicing</p>
                  <p className="text-xs text-muted-foreground">You can now use AI to generate invoice descriptions automatically.</p>
                </div>
              </div>
            ))}
            <Button variant="link" className="w-full text-xs h-auto p-0">View all alerts</Button>
          </div>
        )
      }
    },
  ],
  navTertiary: [

    {
      name: "Team Access",
      url: "#",
      icon: UsersRound,
      isDisabled: true,
    },
    {
      name: "Automation Rules",
      url: "#",
      icon: Workflow,
      isDisabled: true,
    },
    {
      name: "Integrations",
      url: "#",
      icon: Plug,
      isDisabled: true,
    },
    {
      name: "Compliance Center",
      url: "#",
      icon: ShieldCheck,
      isDisabled: true,
    },
  ],
  navFooter: [
    {
      name: "API Management",
      url: "#",
      icon: KeyRound,
      isDisabled: true,
    },
    {
      name: "Developer Console",
      url: "#",
      icon: Terminal,
      isDisabled: true,
    },
    {
      name: "Admin Panel",
      url: "#",
      icon: Settings,
      isDisabled: true,
    },
  ],
}

export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
  return (
    <Sidebar {...props}>
      <SidebarHeader className="border-b">
        <TeamSwitcher teams={data.teams} />
      </SidebarHeader>
      <SidebarContent className="gap-0">
        <SearchForm />
        <NavMain items={data.navMain} />
        <NavSecondary items={data.navSecondary} />
        <NavTertiary items={data.navTertiary} />
        <NavFooter items={data.navFooter} />
      </SidebarContent>
      <SidebarRail />
    </Sidebar>
  )
}
```

### `src/components/dashboards/invoice-manager-dashboard/components/nav-Tertiary.tsx`

```tsx
"use client"

import {
  type LucideIcon,
} from "lucide-react"

import {
  SidebarGroup,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from "@/components/ui/sidebar"

export function NavTertiary({
  items,
}: {
  items: {
    name: string
    url: string
    icon: LucideIcon
    isDisabled?: boolean
  }[]
}) {
  const pathname = "/financial-center/invoice-manager";
  return (
    <SidebarGroup className="group-data-[collapsible=icon]:hidden py-3 border-b">
      <SidebarMenu>
        {items.map((item) => (
          <SidebarMenuItem key={item.name}>
            <SidebarMenuButton
              asChild
              className={`rounded transition-colors duration-200 hover:bg-muted ${pathname === item.url ? "text-sidebar-foreground bg-sidebar-accent" : "text-sidebar-foreground/70"}`}
              isActive={pathname === item.url}
            >
              <a href={item.isDisabled ? "#" : item.url} onClick={(e) => {
                if (item.isDisabled) {
                  e.preventDefault();
                }
              }}>
                <item.icon />
                <span>{item.name}</span>
              </a>
            </SidebarMenuButton>
          </SidebarMenuItem>
        ))}
      </SidebarMenu>
    </SidebarGroup>
  )
}
```

### `src/components/dashboards/invoice-manager-dashboard/components/nav-footer.tsx`

```tsx
"use client"

import {
  type LucideIcon,
} from "lucide-react"

import {
  SidebarGroup,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from "@/components/ui/sidebar"

export function NavFooter({
  items,
}: {
  items: {
    name: string
    url: string
    icon: LucideIcon
    isDisabled?: boolean
  }[]
}) {
  const pathname = "/financial-center/invoice-manager";
  return (
    <SidebarGroup className="group-data-[collapsible=icon]:hidden mt-auto">
      <SidebarMenu>
        {items.map((item) => (
          <SidebarMenuItem key={item.name}>
            <SidebarMenuButton
              asChild
              className={`rounded transition-colors duration-200 hover:bg-muted ${pathname === item.url ? "text-sidebar-foreground bg-sidebar-accent" : "text-sidebar-foreground/70"}`}
              isActive={pathname === item.url}
            >
              <a href={item.isDisabled ? "#" : item.url} onClick={(e) => {
                if (item.isDisabled) {
                  e.preventDefault();
                }
              }}>
                <item.icon />
                <span>{item.name}</span>
              </a>
            </SidebarMenuButton>
          </SidebarMenuItem>
        ))}
      </SidebarMenu>
    </SidebarGroup>
  )
}
```

### `src/components/dashboards/invoice-manager-dashboard/components/nav-main.tsx`

```tsx
"use client"

import {
  type LucideIcon,
} from "lucide-react"

import {
  SidebarGroup,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from "@/components/ui/sidebar"

export function NavMain({
  items,
}: {
  items: {
    name: string
    url: string
    icon: LucideIcon
    isDisabled?: boolean
  }[]
}) {
  const pathname = "/financial-center/invoice-manager"

  return (
    <SidebarGroup className="group-data-[collapsible=icon]:hidden border-b pb-3 pt-0">
      <SidebarMenu>
        {items.map((item) => (
          <SidebarMenuItem key={item.name}  >
            <SidebarMenuButton
              asChild
              tooltip={item.name}
              className={`rounded transition-colors duration-200 hover:bg-muted ${pathname === item.url ? "text-sidebar-foreground bg-sidebar-accent" : "text-sidebar-foreground/70"}`}
              isActive={pathname === item.url}
            >

              <a href={item.isDisabled ? "#" : item.url} onClick={(e) => {
                if (item.isDisabled) {
                  e.preventDefault();
                }
              }}>
                <item.icon />
                <span>{item.name}</span>
              </a>
            </SidebarMenuButton>
          </SidebarMenuItem>
        ))}
      </SidebarMenu>
    </SidebarGroup>
  )
}
```

### `src/components/dashboards/invoice-manager-dashboard/components/nav-secondary.tsx`

```tsx
"use client"

import { ChevronRight, type LucideIcon } from "lucide-react"

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"
import {
  SidebarGroup,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
} from "@/components/ui/sidebar"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"

export function NavSecondary({
  items,
}: {
  items: {
    title: string
    url: string
    icon?: LucideIcon
    isActive?: boolean
    isDisabled?: boolean
    items?: {
      title: string
      url: string
      isDisabled?: boolean
    }[]
    dialog?: {
      title: string
      description: string
      content: React.ReactNode
    }
  }[]
}) {
  const pathname = "/financial-center/invoice-manager"
  return (
    <SidebarGroup className="py-3! border-b">
      <SidebarMenu>
        {items.map((item) =>
          item.items && item.items.length > 0 ? (
            <Collapsible
              key={item.title}
              asChild
              defaultOpen={item.isActive}
              className="group/collapsible"
            >
              <SidebarMenuItem>
                <CollapsibleTrigger asChild>
                  <SidebarMenuButton
                    tooltip={item.title}
                    className={`rounded transition-colors duration-200 hover:bg-muted ${pathname === item.url ? "text-sidebar-foreground bg-sidebar-accent" : "text-sidebar-foreground/70"}`}
                    isActive={pathname === item.url}
                  >

                    {item.icon && <item.icon />}
                    <span>{item.title}</span>
                    <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
                  </SidebarMenuButton>
                </CollapsibleTrigger>
                <CollapsibleContent>
                  <SidebarMenuSub>
                    {item.items.map((subItem) => (
                      <SidebarMenuSubItem key={subItem.title}>
                        <SidebarMenuSubButton
                          asChild
                          className={`rounded transition-colors duration-200 hover:bg-muted ${pathname === subItem.url ? "text-sidebar-foreground bg-sidebar-accent" : "text-sidebar-foreground/70"}`}
                          isActive={pathname === subItem.url}
                        >

                          <a href={subItem.isDisabled ? "#" : subItem.url} onClick={(e) => {
                            if (subItem.isDisabled) {
                              e.preventDefault();
                            }
                          }}>
                            <span>{subItem.title}</span>
                          </a>
                        </SidebarMenuSubButton>
                      </SidebarMenuSubItem>
                    ))}
                  </SidebarMenuSub>
                </CollapsibleContent>
              </SidebarMenuItem>
            </Collapsible>
          ) : (
            <SidebarMenuItem key={item.title}>
              {item.dialog ? (
                <Dialog>
                  <DialogTrigger asChild>
                    <SidebarMenuButton
                      tooltip={item.title}
                      className={`rounded transition-colors duration-200 hover:bg-muted ${pathname === item.url ? "text-sidebar-foreground bg-sidebar-accent" : "text-sidebar-foreground/70"}`}
                    >
                      {item.icon && <item.icon />}
                      <span>{item.title}</span>
                    </SidebarMenuButton>
                  </DialogTrigger>
                  <DialogContent>
                    <DialogHeader>
                      <DialogTitle>{item.dialog.title}</DialogTitle>
                      <DialogDescription>
                        {item.dialog.description}
                      </DialogDescription>
                    </DialogHeader>
                    {item.dialog.content}
                  </DialogContent>
                </Dialog>
              ) : (
                <SidebarMenuButton
                  asChild
                  tooltip={item.title}
                  className={`rounded transition-colors duration-200 hover:bg-muted ${pathname === item.url ? "text-sidebar-foreground bg-sidebar-accent" : "text-sidebar-foreground/70"}`}
                  isActive={pathname === item.url}
                >
                  <a href={item.isDisabled ? "#" : item.url} onClick={(e) => {
                    if (item.isDisabled) {
                      e.preventDefault();
                    }
                  }}>
                    {item.icon && <item.icon />}
                    <span>{item.title}</span>
                  </a>
                </SidebarMenuButton>
              )}
            </SidebarMenuItem>
          )
        )}
      </SidebarMenu>
    </SidebarGroup>
  )
}
```

### `src/components/dashboards/invoice-manager-dashboard/components/search-form.tsx`

```tsx
import { Search } from "lucide-react"

import { Label } from "@/components/ui/label"
import {
    SidebarGroup,
    SidebarGroupContent,
    SidebarInput,
} from "@/components/ui/sidebar"

export function SearchForm({ ...props }: React.ComponentProps<"form">) {
    return (
        <form {...props}>
            <SidebarGroup className="pt-2 pb-1">
                <SidebarGroupContent className="relative">
                    <Label htmlFor="search" className="sr-only">
                        Search
                    </Label>
                    <SidebarInput
                        id="search"
                        placeholder="Search"
                        className="pl-8 bg-neutral-500/5 dark:bg-neutral-500/10 border-border/50 rounded transition-colors duration-200 focus:bg-background focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:border-neutral-400 dark:focus-visible:border-neutral-600 outline-none shadow-none"
                    />
                    <Search className="pointer-events-none absolute top-1/2 left-2 size-3.5 -translate-y-1/2 text-muted-foreground select-none" />
                </SidebarGroupContent>
            </SidebarGroup>
        </form>
    )
}
```

### `src/components/dashboards/invoice-manager-dashboard/components/site-header.tsx`

```tsx
"use client"

import {
    Breadcrumb,
    BreadcrumbItem,
    BreadcrumbLink,
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
import { Button } from "@/components/ui/button"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import {
    ArrowLeft,
    Grid3X3,
    Bell,
    MessageSquare,
    ChevronRight,
    User,
    Settings,
    LogOut,
} from "lucide-react"
import React from "react"
import { SidebarTrigger } from "@/components/ui/sidebar"
import {
    Popover,
    PopoverContent,
    PopoverTrigger,
    PopoverHeader,
    PopoverTitle,
    PopoverDescription,
} from "@/components/ui/popover"
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
    DropdownMenuSeparator,
} from "@/components/ui/dropdown-menu"


// Convert kebab-case to Title Case (e.g., "financial-center" -> "Financial Center")
function formatBreadcrumb(segment: string): string {
    return segment
        .split("-")
        .map(word => word.charAt(0).toUpperCase() + word.slice(1))
        .join(" ")
}

export const SiteHeader = () => {
    const pathname = "/financial-center/invoice-manager"
    const router = { back: () => { } }

    // Split path and filter empty segments
    const segments = pathname.split("/").filter(Boolean)

    // Build breadcrumb items with cumulative paths
    const breadcrumbItems = segments.map((segment, index) => {
        const href = "/" + segments.slice(0, index + 1).join("/")
        const label = formatBreadcrumb(segment)
        const isLast = index === segments.length - 1

        return { href, label, isLast }
    })

    return (
        <header className="flex h-12 shrink-0 items-center justify-between gap-2 border-b px-2">
            {/* Left side: Sidebar Trigger + Back button + Breadcrumbs */}
            <div className="flex items-center gap-3">
                <SidebarTrigger className="-ml-1 md:hidden transition-colors duration-200 hover:shadow-sm" />
                <Button
                    variant="ghost"
                    size="icon"
                    className="size-6 bg-muted-foreground/5 rounded transition-colors duration-200 hover:bg-muted-foreground/10"
                    onClick={() => router.back()}
                >
                    <ArrowLeft className="size-2.5" />
                </Button>

                <Breadcrumb className="hidden sm:block">
                    <BreadcrumbList>
                        {breadcrumbItems.map((item, index) => (
                            <React.Fragment key={item.href}>
                                {index > 0 && (
                                    <BreadcrumbSeparator>
                                        <ChevronRight className="size-3.5" />
                                    </BreadcrumbSeparator>
                                )}
                                <BreadcrumbItem>
                                    {item.isLast ? (
                                        <BreadcrumbPage>{item.label}</BreadcrumbPage>
                                    ) : (
                                        <BreadcrumbLink href={item.href}>
                                            {item.label}
                                        </BreadcrumbLink>
                                    )}
                                </BreadcrumbItem>
                            </React.Fragment>
                        ))}
                    </BreadcrumbList>
                </Breadcrumb>

            </div>

            {/* Right side: Icons + Avatar */}
            <div className="flex items-center gap-2">
                <Popover>
                    <PopoverTrigger asChild>
                        <Button variant="ghost" size="icon" className="size-6 bg-muted-foreground/5 rounded hidden sm:flex transition-colors duration-200 hover:bg-muted-foreground/10">
                            <Grid3X3 className="size-2.5" />
                        </Button>
                    </PopoverTrigger>
                    <PopoverContent align="end" className="w-64 p-4">
                        <PopoverHeader className="mb-2">
                            <PopoverTitle>Shortcuts</PopoverTitle>
                            <PopoverDescription>Quick access to your apps.</PopoverDescription>
                        </PopoverHeader>
                        <div className="grid grid-cols-3 gap-4 py-2">
                            {['Email', 'Calendar', 'Files', 'Tasks', 'Notes', 'Chat'].map((app) => (
                                <div key={app} className="flex flex-col items-center gap-1 cursor-pointer hover:bg-accent p-2 rounded-md transition-colors">
                                    <div className="size-8 bg-primary/10 rounded-lg flex items-center justify-center">
                                        <Grid3X3 className="size-4 text-primary" />
                                    </div>
                                    <span className="text-[10px]">{app}</span>
                                </div>
                            ))}
                        </div>
                    </PopoverContent>
                </Popover>

                <Popover>
                    <PopoverTrigger asChild>
                        <Button variant="ghost" size="icon" className="size-6 bg-muted-foreground/5 rounded hidden sm:flex transition-colors duration-200 hover:bg-muted-foreground/10">
                            <Bell className="size-2.5" />
                        </Button>
                    </PopoverTrigger>
                    <PopoverContent align="end" className="w-80 p-0">
                        <PopoverHeader className="p-4 border-b">
                            <PopoverTitle>Notifications</PopoverTitle>
                        </PopoverHeader>
                        <div className="max-h-64 overflow-y-auto">
                            {[1, 2, 3].map((i) => (
                                <div key={i} className="p-4 border-b last:border-0 hover:bg-accent cursor-pointer transition-colors">
                                    <p className="text-xs font-medium">New invoice created</p>
                                    <p className="text-[10px] text-muted-foreground mt-1">Invoice #INV-2024-{i} has been successfully generated.</p>
                                    <p className="text-[9px] text-muted-foreground mt-2 italic">2 mins ago</p>
                                </div>
                            ))}
                        </div>
                        <div className="p-2 bg-muted/50 text-center">
                            <Button variant="link" className="text-[10px] h-auto p-0">View all notifications</Button>
                        </div>
                    </PopoverContent>
                </Popover>

                <Popover>
                    <PopoverTrigger asChild>
                        <Button variant="ghost" size="icon" className="size-6 bg-muted-foreground/5 rounded hidden sm:flex transition-colors duration-200 hover:bg-muted-foreground/10">
                            <MessageSquare className="size-2.5" />
                        </Button>
                    </PopoverTrigger>
                    <PopoverContent align="end" className="w-80 p-0">
                        <PopoverHeader className="p-4 border-b">
                            <PopoverTitle>Messages</PopoverTitle>
                        </PopoverHeader>
                        <div className="max-h-64 overflow-y-auto">
                            {[
                                { name: 'John Doe', msg: "Hey, can you check the new invoice?" },
                                { name: 'Sarah Wilson', msg: "The payment for INV-882 is pending." }
                            ].map((m, i) => (
                                <div key={i} className="p-4 border-b last:border-0 hover:bg-accent cursor-pointer transition-colors flex gap-3">
                                    <Avatar className="size-8">
                                        <AvatarFallback className="text-[10px]">{m.name[0]}</AvatarFallback>
                                    </Avatar>
                                    <div className="flex-1 min-w-0">
                                        <p className="text-xs font-medium">{m.name}</p>
                                        <p className="text-[10px] text-muted-foreground truncate">{m.msg}</p>
                                    </div>
                                    <div className="size-2 bg-primary rounded-full mt-1 shrink-0" />
                                </div>
                            ))}
                        </div>
                        <div className="p-2 bg-muted/50 text-center">
                            <Button variant="link" className="text-[10px] h-auto p-0">Open Message Center</Button>
                        </div>
                    </PopoverContent>
                </Popover>

                <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                        <Avatar className="size-5 transition-colors duration-200 cursor-pointer hover:ring-2 hover:ring-muted-foreground/20">
                            <AvatarImage src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=1480&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
                            <AvatarFallback className="text-xs">JD</AvatarFallback>
                        </Avatar>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end" className="w-56">
                        <div className="flex items-center gap-2 p-2">
                            <Avatar className="size-8">
                                <AvatarImage src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=1480&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
                                <AvatarFallback>JD</AvatarFallback>
                            </Avatar>
                            <div className="flex flex-col">
                                <span className="text-sm font-medium">John Doe</span>
                                <span className="text-xs text-muted-foreground">john@watermelon.ai</span>
                            </div>
                        </div>
                        <DropdownMenuSeparator />
                        <DropdownMenuItem>
                            <User className="size-4 mr-2" />
                            Profile
                        </DropdownMenuItem>
                        <DropdownMenuItem>
                            <Settings className="size-4 mr-2" />
                            Settings
                        </DropdownMenuItem>
                        <DropdownMenuSeparator />
                        <DropdownMenuItem className="text-destructive">
                            <LogOut className="size-4 mr-2" />
                            Log out
                        </DropdownMenuItem>
                    </DropdownMenuContent>
                </DropdownMenu>
            </div>
        </header>
    )
}
```

### `src/components/dashboards/invoice-manager-dashboard/components/team-switcher.tsx`

```tsx
"use client"

import * as React from "react"

import {
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarTrigger,
} from "@/components/ui/sidebar"

export function TeamSwitcher({
  teams,
}: {
  teams: {
    name: string
    logo: React.ElementType
    plan: string
  }[]
}) {
  const [activeTeam] = React.useState(teams[0])

  return (
    <SidebarMenu>
      <SidebarMenuItem>
        <div className="flex w-full items-center">
          <SidebarMenuButton
            size="default"
            className="flex-1 data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground hover:bg-transparent active:bg-transparent group-data-[collapsible=icon]:p-0! group-data-[collapsible=icon]:w-auto! group-data-[collapsible=icon]:flex-none"
          >
            <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-7 items-center justify-center rounded transition-transform duration-200 group-hover:scale-110">
              <activeTeam.logo className="size-3.5" />
            </div>
            <div className="grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden">
              <span className="truncate font-medium text-lg">{activeTeam.name}</span>
              {/* <span className="truncate text-xs">{activeTeam.plan}</span> */}
            </div>
          </SidebarMenuButton>
          <SidebarTrigger className="group-data-[collapsible=icon]:hidden transition-all duration-200 hover:scale-110 active:scale-95" />
        </div>
      </SidebarMenuItem>
    </SidebarMenu>
  )
}
```

### `src/components/dashboards/invoice-manager-dashboard/dashboardLayout.tsx`

```tsx
import { AppSidebar } from "./components/app-sidebar"
import { SiteHeader } from "./components/site-header"
import {
    SidebarInset,
    SidebarProvider,
} from "@/components/ui/sidebar"

export const DashboardLayout = ({ children }: { children: React.ReactNode }) => {
    return (
        <SidebarProvider>
            <AppSidebar />
            <SidebarInset>
                <SiteHeader />
                <main className="flex-1">
                    {children}
                </main>
            </SidebarInset>
        </SidebarProvider>
    )
}
```

### `src/components/dashboards/invoice-manager-dashboard/demo.tsx`

```tsx
"use client";

import { DashboardLayout } from "./dashboardLayout";
import { InvoiceManagerView } from "./invoiceManagerView";

export default function InvoiceManagerDashboardDemo() {
    return (
        <DashboardLayout>
            <InvoiceManagerView />
        </DashboardLayout>
    );
}
```

### `src/components/dashboards/invoice-manager-dashboard/invoiceManagerView.tsx`

```tsx
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/components/ui/table"
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select"
import {
    Pagination,
    PaginationContent,
    PaginationItem,
    PaginationLink,
} from "@/components/ui/pagination"
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from "@/components/ui/dialog"
import {
    Popover,
    PopoverContent,
    PopoverTrigger,
} from "@/components/ui/popover"
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
    DropdownMenuSeparator,
} from "@/components/ui/dropdown-menu"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
    ChevronLeft,
    ChevronRight,
    Plus,
    Filter,
    ArrowUpDown,
    Search,
    RefreshCw,
    GripVertical,
    Download,
    Upload,
    FileJson,
    FileSpreadsheet,
    FileText,
    Share2,
    Copy,
} from "lucide-react"
import { invoiceData } from "./data"

const StatusBadge = ({ status }: { status: string }) => {
    const statusStyles: Record<string, string> = {
        Rejected: "bg-red-500/10 text-red-600 dark:text-red-400 border-red-500/20",
        Accepted: "bg-green-500/10 text-green-600 dark:text-green-400 border-green-500/20",
        "Under Review": "bg-yellow-500/10 text-yellow-600 dark:text-yellow-400 border-yellow-500/20",
        Processing: "bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/20",
    }

    return (
        <span
            className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-[10px] sm:text-xs font-medium border transition-colors duration-200 cursor-default ${statusStyles[status] || "bg-muted text-muted-foreground border-border"
                }`}
        >
            {status}
        </span>
    )
}

export const InvoiceManagerView = () => {
    const [selectedRows, setSelectedRows] = useState<number[]>([])
    const [currentPage, setCurrentPage] = useState(1)
    const [rowsPerPage, setRowsPerPage] = useState(7)

    const totalResults = 300
    const totalPages = Math.ceil(totalResults / 20)

    const toggleSelectAll = () => {
        if (selectedRows.length === invoiceData.length) {
            setSelectedRows([])
        } else {
            setSelectedRows(invoiceData.map((row) => row.id))
        }
    }

    const toggleSelectRow = (id: number) => {
        setSelectedRows((prev) =>
            prev.includes(id) ? prev.filter((rowId) => rowId !== id) : [...prev, id]
        )
    }

    const isAllSelected = selectedRows.length === invoiceData.length
    const selectedCount = selectedRows.length

    return (
        <div className="w-full h-full flex flex-col bg-background text-foreground">
            <div className="flex sm:flex-row sm:items-center justify-between px-4 py-3 bg-neutral-950/5 dark:bg-neutral-900 border-b border-border gap-4 sm:gap-2">

                <div className="flex items-center gap-2">
                    <button className="flex items-center text-muted-foreground hover:text-foreground transition-colors">
                        <ChevronLeft className="size-4" />
                    </button>
                    <h1 className="text-sm font-medium text-foreground">Invoice Manager</h1>
                </div>
                <div className="flex flex-wrap items-center gap-2">
                    <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                            <Button
                                size="sm"
                                className="text-[10px] sm:text-xs bg-white text-muted-foreground rounded hover:bg-white/80 dark:bg-muted dark:hover:bg-muted/80 h-8 sm:h-9 hidden sm:flex border border-border transition-colors duration-200 hover:shadow-sm"
                            >
                                <Download className="size-3 mr-1.5" />
                                Import & Export
                            </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end" className="w-48">
                            <DropdownMenuItem>
                                <Upload className="size-4 mr-2" />
                                Import CSV
                            </DropdownMenuItem>
                            <DropdownMenuSeparator />
                            <DropdownMenuItem>
                                <FileSpreadsheet className="size-4 mr-2" />
                                Export Excel
                            </DropdownMenuItem>
                            <DropdownMenuItem>
                                <FileText className="size-4 mr-2" />
                                Export PDF
                            </DropdownMenuItem>
                            <DropdownMenuItem>
                                <FileJson className="size-4 mr-2" />
                                Export JSON
                            </DropdownMenuItem>
                        </DropdownMenuContent>
                    </DropdownMenu>

                    <Dialog>
                        <DialogTrigger asChild>
                            <Button
                                size="sm"
                                className="text-[10px] sm:text-xs bg-white text-muted-foreground rounded hover:bg-white/80 dark:bg-muted dark:hover:bg-muted/80 h-8 sm:h-9 border border-border transition-colors duration-200 hover:shadow-sm"
                            >
                                <Plus className="size-3.5" />
                                <span className="hidden xs:inline">Add New</span>
                                <span className="xs:hidden">Add</span>
                            </Button>
                        </DialogTrigger>
                        <DialogContent>
                            <DialogHeader>
                                <DialogTitle>Create New Invoice</DialogTitle>
                                <DialogDescription>
                                    Enter the details for the new invoice here.
                                </DialogDescription>
                            </DialogHeader>
                            <div className="grid gap-4 py-4">
                                <div className="grid grid-cols-4 items-center gap-4">
                                    <Label htmlFor="company" className="text-right">Company</Label>
                                    <Input id="company" placeholder="Acme Inc." className="col-span-3 focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:border-neutral-400 dark:focus-visible:border-neutral-600 outline-none shadow-none" />
                                </div>
                                <div className="grid grid-cols-4 items-center gap-4">
                                    <Label htmlFor="client" className="text-right">Client Name</Label>
                                    <Input id="client" placeholder="John Smith" className="col-span-3 focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:border-neutral-400 dark:focus-visible:border-neutral-600 outline-none shadow-none" />
                                </div>
                                <div className="grid grid-cols-4 items-center gap-4">
                                    <Label htmlFor="value" className="text-right">Deal Value</Label>
                                    <Input id="value" placeholder="$0.00" className="col-span-3 focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:border-neutral-400 dark:focus-visible:border-neutral-600 outline-none shadow-none" />
                                </div>
                            </div>
                            <DialogFooter>
                                <Button type="submit">Save Invoice</Button>
                            </DialogFooter>
                        </DialogContent>
                    </Dialog>

                    <Dialog>
                        <DialogTrigger asChild>
                            <Button
                                size="sm"
                                className="text-[10px] sm:text-xs bg-white text-muted-foreground rounded hover:bg-white/80 dark:bg-muted dark:hover:bg-muted/80 h-8 sm:h-9 hidden sm:flex border border-border transition-colors duration-200 hover:shadow-sm"
                            >
                                <Share2 className="size-3 mr-1.5" />
                                Share
                            </Button>
                        </DialogTrigger>
                        <DialogContent className="max-w-md">
                            <DialogHeader>
                                <DialogTitle>Share Invoice</DialogTitle>
                                <DialogDescription>
                                    Anyone with the link can view this invoice.
                                </DialogDescription>
                            </DialogHeader>
                            <div className="flex items-center space-x-2 py-4">
                                <div className="grid flex-1 gap-2">
                                    <Label htmlFor="link" className="sr-only">
                                        Link
                                    </Label>
                                    <Input
                                        id="link"
                                        defaultValue="https://watermelon.xyz/invoice/inv-7821"
                                        readOnly
                                        className="focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:border-neutral-400 dark:focus-visible:border-neutral-600 outline-none shadow-none"
                                    />
                                </div>
                                <Button type="submit" size="sm" className="px-3">
                                    <span className="sr-only">Copy</span>
                                    <Copy className="h-4 w-4" />
                                </Button>
                            </div>
                            <DialogFooter className="sm:justify-start">
                                <Button type="button" variant="secondary" className="w-full">
                                    Email Link
                                </Button>
                            </DialogFooter>
                        </DialogContent>
                    </Dialog>

                </div>
            </div>

            <div className="flex flex-col lg:flex-row lg:items-center justify-between px-4 py-3 border-b border-border gap-4 lg:gap-2">

                <div className="flex flex-wrap items-center gap-2 sm:gap-3">
                    <Dialog>
                        <DialogTrigger asChild>
                            <Button
                                size="sm"
                                variant="ghost"
                                className="text-[10px] sm:text-xs bg-muted text-muted-foreground rounded hover:bg-muted/80 gap-1.5 h-8 sm:h-9 transition-colors duration-200 hover:shadow-sm"
                            >
                                <RefreshCw className="size-3.5" />
                                Update
                            </Button>
                        </DialogTrigger>
                        <DialogContent className="sm:max-w-[425px]">
                            <DialogHeader>
                                <DialogTitle>Data Synchronization</DialogTitle>
                                <DialogDescription>
                                    Refreshing your dashboard with the latest data from the server.
                                </DialogDescription>
                            </DialogHeader>
                            <div className="flex flex-col items-center justify-center py-8 gap-4">
                                <RefreshCw className="size-8 text-primary animate-spin" />
                                <p className="text-sm font-medium">Syncing invoices...</p>
                                <div className="w-full bg-muted rounded-full h-1.5 overflow-hidden">
                                    <div className="bg-primary h-full w-[65%] rounded-full animate-pulse" />
                                </div>
                            </div>
                            <DialogFooter>
                                <Button type="button" variant="secondary" className="w-full">Cancel Sync</Button>
                            </DialogFooter>
                        </DialogContent>
                    </Dialog>
                    {selectedCount > 0 && (
                        <span className="text-[10px] sm:text-xs bg-muted flex items-center justify-center text-muted-foreground px-2.5 py-1.5 h-8 sm:h-9 sm:py-2 rounded font-medium transition-all animate-in fade-in zoom-in-95 duration-200">
                            {selectedCount} Selected
                        </span>
                    )}
                    <Popover>
                        <PopoverTrigger asChild>
                            <Button
                                size="sm"
                                variant="ghost"
                                className="text-[10px] sm:text-xs text-muted-foreground bg-muted rounded hover:bg-muted/80 gap-1.5 h-8 sm:h-9 transition-colors duration-200 hover:shadow-sm"
                            >
                                <Filter className="size-3.5" />
                                Filter
                            </Button>
                        </PopoverTrigger>
                        <PopoverContent className="w-56 p-3">
                            <div className="space-y-3">
                                <h4 className="font-medium text-xs leading-none">Filters</h4>
                                <div className="space-y-2">
                                    <div className="flex items-center gap-2">
                                        <Checkbox id="status-accepted" />
                                        <Label htmlFor="status-accepted" className="text-xs">Accepted</Label>
                                    </div>
                                    <div className="flex items-center gap-2">
                                        <Checkbox id="status-review" />
                                        <Label htmlFor="status-review" className="text-xs">Under Review</Label>
                                    </div>
                                    <div className="flex items-center gap-2">
                                        <Checkbox id="status-rejected" />
                                        <Label htmlFor="status-rejected" className="text-xs">Rejected</Label>
                                    </div>
                                </div>
                                <Button size="sm" className="w-full text-xs h-7">Apply Filters</Button>
                            </div>
                        </PopoverContent>
                    </Popover>

                    <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                            <Button
                                size="sm"
                                variant="ghost"
                                className="text-[10px] sm:text-xs text-muted-foreground bg-muted rounded hover:bg-muted/80 gap-1.5 h-8 sm:h-9 transition-colors duration-200 hover:shadow-sm"
                            >
                                <ArrowUpDown className="size-3.5" />
                                Sort
                            </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="start" className="w-40">
                            <DropdownMenuItem>Date: NewestFirst</DropdownMenuItem>
                            <DropdownMenuItem>Date: Oldest First</DropdownMenuItem>
                            <DropdownMenuSeparator />
                            <DropdownMenuItem>Value: High to Low</DropdownMenuItem>
                            <DropdownMenuItem>Value: Low to High</DropdownMenuItem>
                        </DropdownMenuContent>
                    </DropdownMenu>
                    <span className="text-[10px] sm:text-xs text-muted-foreground font-medium ml-2">80 Results</span>
                </div>

                <div className="flex items-center gap-2 w-full lg:w-auto">
                    <div className="relative w-full lg:w-64">
                        <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 size-3.5 text-muted-foreground" />
                        <input
                            type="text"
                            placeholder="Search for the client"
                            className="w-full bg-muted/40 border border-border rounded px-8 py-1.5 text-xs text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:border-neutral-400 dark:focus-visible:border-neutral-600 shadow-none transition-colors"
                        />
                    </div>

                </div>
            </div>
            <div className="flex-1 overflow-auto">
                <Table>
                    <TableHeader>
                        <TableRow className="border-border bg-neutral-950/5 dark:bg-neutral-950">
                            <TableHead className="text-xs text-muted-foreground font-medium border-r border-border">
                                <div className="flex items-center gap-3">
                                    <GripVertical className="size-4 text-muted-foreground/40" />
                                    <Checkbox
                                        checked={isAllSelected}
                                        onCheckedChange={toggleSelectAll}
                                        className="border-border"
                                    />
                                    <span>Company</span>
                                </div>
                            </TableHead>
                            <TableHead className="text-[10px] sm:text-xs text-muted-foreground font-medium border-r border-border min-w-[150px]">Client Name</TableHead>
                            <TableHead className="text-[10px] sm:text-xs text-muted-foreground font-medium border-r border-border">Deal Value</TableHead>
                            <TableHead className="text-[10px] sm:text-xs text-muted-foreground font-medium border-r border-border">Business Report</TableHead>
                            <TableHead className="text-[10px] sm:text-xs text-muted-foreground font-medium border-r border-border">Invoice Date</TableHead>
                            <TableHead className="text-[10px] sm:text-xs text-muted-foreground font-medium border-r border-border">Status</TableHead>
                            <TableHead className="text-[10px] sm:text-xs text-muted-foreground font-medium">Category</TableHead>
                        </TableRow>
                    </TableHeader>


                    <TableBody className="[&_tr:last-child]:border-b">
                        {invoiceData.map((row) => (
                            <TableRow
                                key={row.id}
                                className={`border-border hover:bg-muted/20 border-b transition-colors duration-200 ${selectedRows.includes(row.id) ? "bg-muted/30" : ""
                                    }`}
                                data-state={selectedRows.includes(row.id) ? "selected" : undefined}
                            >
                                <TableCell className="border-r border-border">
                                    <div className="flex items-center gap-3">
                                        <GripVertical className="size-4 text-muted-foreground/40 cursor-grab" />
                                        <Checkbox
                                            checked={selectedRows.includes(row.id)}
                                            onCheckedChange={() => toggleSelectRow(row.id)}
                                            className="border-border"
                                        />
                                        <span className="text-xs text-foreground font-medium">{row.company}</span>
                                    </div>
                                </TableCell>
                                <TableCell className="border-r border-border min-w-[150px]">
                                    <div className="flex items-center gap-2">
                                        <img
                                            src={`https://avatar.vercel.sh/${row.clientName}`}
                                            alt={row.clientName}
                                            width={22.5}
                                            height={22.5}
                                            className="rounded-full"
                                        />
                                        <span className="text-[10px] sm:text-xs text-foreground font-medium">{row.clientName}</span>
                                    </div>
                                </TableCell>
                                <TableCell className="text-[10px] sm:text-xs text-foreground font-medium border-r border-border">
                                    {row.dealValue}
                                </TableCell>

                                <TableCell className="text-[10px] sm:text-xs text-muted-foreground max-w-xs truncate border-r border-border">
                                    {row.businessReport}
                                </TableCell>
                                <TableCell className="text-[10px] sm:text-xs text-muted-foreground border-r border-border">
                                    {row.invoiceDate}
                                </TableCell>
                                <TableCell className="border-r border-border">
                                    <StatusBadge status={row.status} />
                                </TableCell>
                                <TableCell className="text-[10px] sm:text-xs text-muted-foreground">
                                    {row.category}
                                </TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </div>

            <div className="flex flex-col md:flex-row items-center justify-between px-4 py-3 border-t border-border gap-4 md:gap-2 bg-background">
                <div className="text-xs text-muted-foreground font-medium order-2 md:order-1 max-w-xs truncate">
                    1-20 of 300
                </div>
                <Pagination className="order-1 md:order-2">
                    <PaginationContent className="gap-1">
                        <PaginationItem>
                            <button
                                className="size-8 sm:size-7 flex items-center justify-center rounded text-muted-foreground hover:bg-muted transition-colors duration-200 disabled:opacity-50"
                                disabled={currentPage === 1}
                                onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
                            >
                                <ChevronLeft className="size-4" />
                            </button>

                        </PaginationItem>
                        {[1, 2, 3, 4, 5].map((page) => (
                            <PaginationItem key={page} className={page > 3 ? "hidden sm:block" : ""}>
                                <PaginationLink
                                    href="#"
                                    onClick={(e) => {
                                        e.preventDefault()
                                        setCurrentPage(page)
                                    }}
                                    isActive={currentPage === page}
                                    className={`size-8 sm:size-7 text-[10px] sm:text-xs rounded transition-colors duration-200 ${currentPage === page
                                        ? "bg-primary text-primary-foreground dark:text-white font-medium"
                                        : "text-muted-foreground hover:bg-muted"
                                        }`}
                                >
                                    {page}
                                </PaginationLink>
                            </PaginationItem>
                        ))}
                        <PaginationItem className="hidden sm:block">
                            <span className="text-muted-foreground/30 px-1">...</span>
                        </PaginationItem>
                        <PaginationItem>
                            <button
                                className="size-8 sm:size-7 flex items-center justify-center rounded text-muted-foreground hover:bg-muted transition-colors duration-200"
                                onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
                            >
                                <ChevronRight className="size-4" />
                            </button>

                        </PaginationItem>
                    </PaginationContent>
                </Pagination>

                <div className="flex items-center gap-2 order-3">
                    <span className="text-[10px] sm:text-xs text-muted-foreground font-medium">Row/Page:</span>
                    <Select value={String(rowsPerPage)} onValueChange={(v) => setRowsPerPage(Number(v))}>
                        <SelectTrigger size="sm" className="h-6 sm:h-5 w-fit text-[10px] sm:text-xs px-2 sm:px-2.5 bg-muted border-none text-muted-foreground">
                            <SelectValue />
                        </SelectTrigger>
                        <SelectContent className="bg-popover border-border">
                            <SelectItem value="7" className="text-xs">7</SelectItem>
                            <SelectItem value="10" className="text-xs">10</SelectItem>
                            <SelectItem value="20" className="text-xs">20</SelectItem>
                        </SelectContent>
                    </Select>
                </div>

            </div>

        </div>
    )
}
```

### `src/components/dashboards/invoice-manager-dashboard/data.ts`

```ts
export interface Invoice {
  id: number;
  company: string;
  clientName: string;
  dealValue: string;
  businessReport: string;
  invoiceDate: string;
  status: string;
  category: string;
}

export const invoiceData: Invoice[] = [
  {
    id: 1,
    company: "BrightPath",
    clientName: "Olivia Carter",
    dealValue: "$1300",
    businessReport: "Financial dashboard for investment tracking.",
    invoiceDate: "24/10/2025",
    status: "Rejected",
    category: "Finance",
  },
  {
    id: 2,
    company: "CoreVision",
    clientName: "Ethan Miller",
    dealValue: "$2500",
    businessReport: "Designed an AI workflow tool for customer support.",
    invoiceDate: "26/10/2025",
    status: "Accepted",
    category: "AI",
  },
  {
    id: 3,
    company: "VentureEdge",
    clientName: "Amelia Thompson",
    dealValue: "$3600",
    businessReport: "Created a sleek B2B portfolio website.",
    invoiceDate: "31/10/2025",
    status: "Under Review",
    category: "B2B",
  },
  {
    id: 4,
    company: "Skyline Group",
    clientName: "Liam Johnson",
    dealValue: "$800",
    businessReport: "Developed a SaaS analytics platform for performance.",
    invoiceDate: "03/11/2025",
    status: "Processing",
    category: "SaaS",
  },
  {
    id: 5,
    company: "NextLink",
    clientName: "Charlotte Davis",
    dealValue: "$4200",
    businessReport: "Automated internal operations with a central dashboard.",
    invoiceDate: "07/11/2025",
    status: "Accepted",
    category: "Automation",
  },
  {
    id: 6,
    company: "HelloOne",
    clientName: "Noah Anderson",
    dealValue: "$2300",
    businessReport: "Smart AI platform for marketing personalization.",
    invoiceDate: "10/11/2025",
    status: "Rejected",
    category: "Tech",
  },
  {
    id: 7,
    company: "NovaTech",
    clientName: "Isabella White",
    dealValue: "$10,800",
    businessReport: "SaaS client dashboard for enterprise reporting.",
    invoiceDate: "8/11/2025",
    status: "Under Review",
    category: "SaaS",
  },
  {
    id: 8,
    company: "AxisLogic",
    clientName: "James Wilson",
    dealValue: "$2300",
    businessReport: "B2B CRM to streamline client communication.",
    invoiceDate: "12/11/2025",
    status: "Accepted",
    category: "B2B",
  },
  {
    id: 9,
    company: "FusionWorks",
    clientName: "Mia Martinez",
    dealValue: "$7500",
    businessReport: "Automation tool for logistics management.",
    invoiceDate: "14/11/2025",
    status: "Under Review",
    category: "Automation",
  },
  {
    id: 10,
    company: "DataVerse",
    clientName: "Benjamin Moore",
    dealValue: "$15,000",
    businessReport: "Built a big data analytics dashboard.",
    invoiceDate: "15/11/2025",
    status: "Processing",
    category: "Tech",
  },
  {
    id: 11,
    company: "Optima Corp",
    clientName: "Harper Lewis",
    dealValue: "$4200",
    businessReport: "Lead management dashboard for sales teams.",
    invoiceDate: "18/11/2025",
    status: "Rejected",
    category: "B2B",
  },
  {
    id: 12,
    company: "StratusFlow",
    clientName: "Lucas Robinson",
    dealValue: "$2500",
    businessReport: "Engineered a finance forecasting platform.",
    invoiceDate: "19/11/2025",
    status: "Accepted",
    category: "Finance",
  },
  {
    id: 13,
    company: "BluePeak",
    clientName: "Ella Walker",
    dealValue: "$4200",
    businessReport: "Designed a SaaS UI focused on client retention.",
    invoiceDate: "20/11/2025",
    status: "Accepted",
    category: "SaaS",
  },
  {
    id: 14,
    company: "NeuraSys",
    clientName: "Henry Hall",
    dealValue: "$1300",
    businessReport: "Built an AI interface for business predictions.",
    invoiceDate: "22/11/2025",
    status: "Under Review",
    category: "AI",
  },
  {
    id: 15,
    company: "VortexPro",
    clientName: "Grace Allen",
    dealValue: "$15,000",
    businessReport: "Automation dashboard for team operations.",
    invoiceDate: "23/11/2025",
    status: "Rejected",
    category: "Automation",
  },
  {
    id: 16,
    company: "OmniReach",
    clientName: "Jack Turner",
    dealValue: "$4200",
    businessReport: "Developed a B2B outreach portal for marketing.",
    invoiceDate: "24/11/2025",
    status: "Processing",
    category: "B2B",
  },
  {
    id: 17,
    company: "DataFusion",
    clientName: "Scarlett King",
    dealValue: "$4,890",
    businessReport: "Built a corporate finance reporting tool.",
    invoiceDate: "26/11/2025",
    status: "Accepted",
    category: "Finance",
  },
  {
    id: 18,
    company: "Lumeon",
    clientName: "William Scott",
    dealValue: "$1300",
    businessReport: "Designed an AI-driven business insights app.",
    invoiceDate: "29/11/2025",
    status: "Rejected",
    category: "Tech",
  },
];
```