# Payment operations 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/payment-operations-dashboard).

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

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/watermelon/payment-operations-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-dialog`, `@radix-ui/react-dropdown-menu`, `@radix-ui/react-popover`, `@radix-ui/react-select`, `@radix-ui/react-separator`, `@radix-ui/react-slot`, `@radix-ui/react-switch`, `@radix-ui/react-tooltip`, `@tabler/icons-react`, `class-variance-authority`, `lucide-react`, `next-themes`, `recharts`
- Registry items: `avatar`, `badge`, `button`, `card`, `chart`, `dialog`, `dropdown-menu`, `input`, `popover`, `select`, `separator`, `sheet`, `sidebar`, `skeleton`, `switch`, `table`, `tooltip`

## Files

### `src/components/dashboards/payment-operations-dashboard/components/app-sidebar.tsx`

```tsx
"use client";

import * as React from "react";
import {
  IconCurrencyDollar,
  IconCreditCard,
  IconDashboard,
  IconFileText,
  IconInfoCircle,
  IconInnerShadowTop,
  IconReceipt,
  IconTarget,
  IconSettings,
  IconUsers,
  IconArrowsExchange,
  IconBell,
  IconWallet,
  IconLayersSelected,
} from "@tabler/icons-react";

import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarTrigger,
  useSidebar,
} from "@/components/ui/sidebar";
import { NavMain } from "./nav-main";
import { NavUser } from "./nav-footer";
import { NavSecondary } from "./nav-options";

const data = {
  user: {
    name: "Vansh",
    email: "vansh@example.com",
    avatar: "/avatars/vansh.jpg",
  },

  navMain: [
    {
      title: "Dashboard",
      url: "/dashboard",
      icon: IconDashboard,
      isActive: true,
    },
    {
      title: "Balances",
      url: "/balances",
      icon: IconWallet,
    },
    {
      title: "Transactions",
      url: "/transactions",
      icon: IconArrowsExchange,
    },
    {
      title: "Customers",
      url: "/customers",
      icon: IconUsers,
    },
    {
      title: "Product Catalog",
      url: "/products",
      icon: IconLayersSelected,
    },
    {
      title: "Budget",
      url: "/budget",
      icon: IconReceipt,
    },
    {
      title: "Goals",
      url: "/goals",
      icon: IconTarget,
    },
  ],

  products: [
    {
      name: "Billings",
      url: "/billings",
      icon: IconCurrencyDollar,
    },
    {
      name: "Payments",
      url: "/payments",
      icon: IconCreditCard,
    },
    {
      name: "Reports",
      url: "/reports",
      icon: IconFileText,
    },
  ],

  options: [
    {
      name: "Notifications",
      url: "/notifications",
      icon: IconBell,
    },
    {
      name: "Help & Support",
      url: "/help",
      icon: IconInfoCircle,
    },
    {
      name: "Settings",
      url: "/settings",
      icon: IconSettings,
    },
  ],
};

export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
  const { state } = useSidebar(); // "expanded" | "collapsed"
  return (
    <Sidebar collapsible="icon" {...props}>
      <SidebarHeader className="mt-2">
        <SidebarMenu>
          <SidebarMenuItem className="flex items-center gap-2 ">
            {state === "expanded" && (
              <SidebarMenuButton
                asChild
                className="data-[slot=sidebar-menu-button]:!p-1.5  group-data-[collapsed=icon]:hidden"
              >
                <a href="#" className="">
                  <IconInnerShadowTop className="!size-8" />
                  <span className=" font-semibold text-2xl">OceanLabs</span>
                </a>
              </SidebarMenuButton>
            )}
            <SidebarTrigger />
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarHeader>
      <SidebarContent className="">
        <NavMain items={data.navMain} />

        <NavSecondary items={data.options} className="mt-auto" />
      </SidebarContent>
      <SidebarFooter>
        <NavUser user={data.user} />
      </SidebarFooter>
    </Sidebar>
  );
}
```

### `src/components/dashboards/payment-operations-dashboard/components/failed-payment.tsx`

```tsx
import { BanknoteX } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

export function FailedPayments() {
  const data = [
    {
      amount: "₹6,450",
      date: "6th Jan, 00:21",
      email: "jakepaul@gmail.com",
      initials: "JP",
      status: "Failed",
    },
    {
      amount: "₹5,200",
      date: "6th Jan, 00:21",
      email: "dankoe@gmail.com",
      initials: "DK",
      status: "Failed",
    },
    {
      amount: "₹6,800",
      date: "6th Jan, 00:21",
      email: "johndoe@gmail.com",
      initials: "JD",
      status: "Failed",
    },
  ];

  return (
    <Card className="border-none shadow-sm bg-zinc-100 dark:bg-zinc-800 rounded-none p-0.5 gap-0 group/card">
      <CardHeader className="flex flex-row items-center justify-between p-2">
        <div className="flex items-center gap-2">
          <div className="bg-muted p-1 rounded">
            <BanknoteX className="size-4 text-muted-foreground group-hover/card:text-foreground transition-colors" />
          </div>
          <CardTitle className="text-xs font-semibold text-md text-foreground">
            Failed Payments
          </CardTitle>
        </div>
      </CardHeader>

      <CardContent className="bg-white dark:bg-zinc-900 p-2 rounded-none overflow-hidden ">
        <div className="">
          {data.map((item, i) => (
            <div
              key={i}
              className="flex items-center justify-between p-2 hover:bg-muted dark:hover:bg-muted transition-colors duration-200 cursor-pointer group gap-4 rounded-md"
            >
              <div className="flex items-center gap-3">
                <div className="flex flex-col">
                  <span className="text-md font-medium text-base leading-none">
                    {item.amount}
                  </span>
                  <span className="text-sm text-muted-foreground mt-1 font-medium truncate line-clamp-1">
                    {item.date} • {item.email}
                  </span>
                </div>
              </div>
              <Badge className="bg-red-500/20 text-red-600 hover:bg-red-500/30 transition-colors border-none px-1.5 py-0.5 flex gap-0.5 items-center font-medium cursor-pointer uppercase rounded-none">
                {item.status}
              </Badge>
            </div>
          ))}
        </div>
      </CardContent>
      <CardFooter className="bg-white dark:bg-zinc-900 flex-1 px-3 pb-2 ">
        <div className=" flex justify-between items-center text-xs text-muted-foreground w-full">
          <button className="text-muted-foreground text-sm font-medium hover:text-foreground transition-colors">
            3 of 3
          </button>
          <span className="text-sm font-medium text-muted-foreground">
            Last updated 6h ago
          </span>
        </div>
      </CardFooter>
    </Card>
  );
}
```

### `src/components/dashboards/payment-operations-dashboard/components/header.tsx`

```tsx
"use client";
import { Search, Plus } from "lucide-react";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
import { Button } from "@/components/ui/button";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { ModeToggle } from "./theme-toggle";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";

export function DashboardHeader() {
  return (
    <header className="flex h-fit items-start justify-between gap-4 flex-col md:flex-row md:items-center">
      <div className="">
        <h1 className="text-2xl font-medium tracking-tight leading-tight cursor-default">
          Dashboard
        </h1>
        <div className="flex items-center gap-2 text-sm text-muted-foreground">
          Showing data for the last
          <Select defaultValue="21">
            <SelectTrigger className="h-fit shadow-none rounded-none max-h-6 border-none bg-linear-to-b from-zinc-100 to-zinc-200 dark:bg-linear-to-b dark:from-zinc-700 dark:to-zinc-800 px-2 py-0 text-xs font-sm focus:ring-0 text-foreground hover:bg-zinc-200 dark:hover:bg-zinc-600 transition-colors duration-200">
              <SelectValue placeholder="Select" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="7">7 Days</SelectItem>
              <SelectItem value="21">21 Days</SelectItem>
              <SelectItem value="30">30 Days</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </div>

      <div className="flex items-center gap-4 flex-row md:flex-row   ">
        <div className="relative w-full group/search">
          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 size-4 text-muted-foreground group-hover/search:text-foreground transition-colors duration-300" />
          <Input
            placeholder="Search Anything..."
            className="pl-9 h-9 bg-zinc-200/50 dark:black/20 border-none focus-visible:ring-1 hover:bg-zinc-200/80 dark:hover:bg-zinc-800/50 transition-colors duration-300"
          />
        </div>
        <div className="flex gap-4 items-center w-full     ">
          <div className="flex items-center gap-2 md:border-l dark:border-zinc-500 pl-4">
            <span className="text-sm text-muted-foreground">Test Mode</span>
            <Switch className="data-[state=checked]:bg-zinc-400 dark:data-[state=checked]:bg-zinc-100" />
          </div>

          <Dialog>
            <DialogTrigger asChild>
              <Button
                size="icon"
                className="size-8 rounded-full bg-zinc-700 dark:bg-zinc-100 hover:bg-black transition-colors duration-300 shadow-md group/btn"
              >
                <Plus className="size-4 text-white dark:text-black" />
              </Button>
            </DialogTrigger>
            <DialogContent className="sm:max-w-[425px] rounded-none shadow-2xl p-0 overflow-hidden border-zinc-200 dark:border-zinc-800">
              <div className="p-6 pb-0">
                <DialogHeader>
                  <DialogTitle className="text-xl">New Transaction</DialogTitle>
                  <DialogDescription>
                    Start a manual payment or invoice.
                  </DialogDescription>
                </DialogHeader>
              </div>
              <div className="p-6 grid gap-5">
                <div className="flex flex-col gap-2">
                  <label htmlFor="customer" className="text-sm font-medium text-foreground">Customer Name</label>
                  <Input id="customer" placeholder="Enter name or email" className="h-9 rounded-none bg-zinc-50 dark:bg-zinc-900/50 border-zinc-200 dark:border-zinc-800 focus-visible:ring-1" />
                </div>
                <div className="flex flex-col gap-2">
                  <label htmlFor="amount" className="text-sm font-medium text-foreground">Amount</label>
                  <div className="relative">
                    <span className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground text-sm font-medium">₹</span>
                    <Input id="amount" type="number" placeholder="0.00" className="pl-7 h-9 rounded-none bg-zinc-50 dark:bg-zinc-900/50 border-zinc-200 dark:border-zinc-800 focus-visible:ring-1" />
                  </div>
                </div>
                <div className="flex flex-col gap-2">
                  <label htmlFor="method" className="text-sm font-medium text-foreground">Payment Method</label>
                  <Select>
                    <SelectTrigger className="h-9 rounded-none bg-zinc-50 dark:bg-zinc-900/50 border-zinc-200 dark:border-zinc-800 focus:ring-1">
                      <SelectValue placeholder="Select method" />
                    </SelectTrigger>
                    <SelectContent className="rounded-none">
                      <SelectItem value="card">Credit Card</SelectItem>
                      <SelectItem value="bank">Bank Transfer</SelectItem>
                      <SelectItem value="cash">Cash</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>
              <div className="flex items-center justify-end gap-3 p-4 bg-zinc-50 dark:bg-zinc-900/50 border-t border-zinc-200 dark:border-zinc-800">
                <Button variant="outline" className="rounded-none h-9 text-xs font-medium hover:bg-zinc-100 dark:hover:bg-zinc-800">Cancel</Button>
                <Button type="submit" className="rounded-none h-9 text-xs font-medium bg-zinc-900 text-white hover:bg-zinc-800 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200 transition-colors">Create Transaction</Button>
              </div>
            </DialogContent>
          </Dialog>
          <ModeToggle />
        </div>
      </div>
    </header>
  );
}
```

### `src/components/dashboards/payment-operations-dashboard/components/nav-footer.tsx`

```tsx
"use client";

import {
  IconCreditCard,
  IconDotsVertical,
  IconLogout,
  IconNotification,
  IconUserCircle,
} from "@tabler/icons-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";

export function NavUser({
  user,
}: {
  user: {
    name: string;
    email: string;
    avatar: string;
  };
}) {
  const { isMobile } = useSidebar();

  return (
    <SidebarMenu>
      <SidebarMenuItem>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <SidebarMenuButton
              size="lg"
              className="data-[active=true]:bg-white data-[active=true]:text-zinc-900 data-[active=true]:shadow-sm rounded-none hover:bg-zinc-100 hover:text-zinc-900 dark:hover:bg-zinc-800 dark:hover:text-white transition-colors duration-200 group/userBtn"
            >
              <Avatar className="h-8 w-8 rounded-none">
                <AvatarImage src={user.avatar} alt={user.name} />
                <AvatarFallback className="rounded-none bg-zinc-200">CN</AvatarFallback>
              </Avatar>
              <div className="grid flex-1 text-left text-sm leading-tight">
                <span className="truncate font-medium">{user.name}</span>
                <span className="text-muted-foreground truncate text-xs">
                  {user.email}
                </span>
              </div>
              <IconDotsVertical className="ml-auto size-4" />
            </SidebarMenuButton>
          </DropdownMenuTrigger>
          <DropdownMenuContent
            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
            side={isMobile ? "bottom" : "right"}
            align="end"
            sideOffset={4}
          >
            <DropdownMenuLabel className="p-0 font-normal">
              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
                <Avatar className="h-8 w-8 rounded-lg">
                  <AvatarImage src={user.avatar} alt={user.name} />
                  <AvatarFallback className="rounded-lg">CN</AvatarFallback>
                </Avatar>
                <div className="grid flex-1 text-left text-sm leading-tight">
                  <span className="truncate font-medium">{user.name}</span>
                  <span className="text-muted-foreground truncate text-xs">
                    {user.email}
                  </span>
                </div>
              </div>
            </DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuGroup>
              <DropdownMenuItem>
                <IconUserCircle />
                Account
              </DropdownMenuItem>
              <DropdownMenuItem>
                <IconCreditCard />
                Billing
              </DropdownMenuItem>
              <DropdownMenuItem>
                <IconNotification />
                Notifications
              </DropdownMenuItem>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuItem>
              <IconLogout />
              Log out
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </SidebarMenuItem>
    </SidebarMenu>
  );
}
```

### `src/components/dashboards/payment-operations-dashboard/components/nav-main.tsx`

```tsx
"use client";

import { type Icon } from "@tabler/icons-react";

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

export function NavMain({
  items,
}: {
  items: {
    title: string;
    url: string;
    icon?: Icon;
    isActive?: boolean;
  }[];
}) {
  return (
    <SidebarGroup>
      <SidebarGroupContent className="flex flex-col gap-0">
        <SidebarMenu className="gap-0.5">
          {items.map((item) => (
            <SidebarMenuItem key={item.title}>
              <SidebarMenuButton
                tooltip={item.title}
                isActive={item.isActive}
                className="data-[active=true]:bg-white data-[active=true]:text-zinc-900 data-[active=true]:shadow-sm rounded-none hover:bg-zinc-100 hover:text-zinc-900 dark:hover:bg-zinc-800 dark:hover:text-white transition-colors duration-200 group/navItem"
              >
                {item.icon && <item.icon />}
                <span>{item.title}</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
          ))}
        </SidebarMenu>
      </SidebarGroupContent>
    </SidebarGroup>
  );
}
```

### `src/components/dashboards/payment-operations-dashboard/components/nav-options.tsx`

```tsx
"use client";

import * as React from "react";
import { type Icon } from "@tabler/icons-react";

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

export function NavSecondary({
  items,
  ...props
}: {
  items: {
    name: string;
    url: string;
    icon: Icon;
  }[];
} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
  return (
    <SidebarGroup {...props}>
      <SidebarGroupContent>
        <SidebarGroupLabel className="font-mono uppercase">
          Options
        </SidebarGroupLabel>
        <SidebarMenu className="gap-0">
          {items.map((item) => (
            <SidebarMenuItem key={item.name}>
              <SidebarMenuButton
              className="data-[active=true]:bg-white data-[active=true]:text-zinc-900 data-[active=true]:shadow-sm rounded-none hover:bg-zinc-100 hover:text-zinc-900 dark:hover:bg-zinc-800 dark:hover:text-white transition-colors duration-200 group/navItem"
              >
                  <item.icon />
                  <span>{item.name}</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
          ))}
        </SidebarMenu>
      </SidebarGroupContent>
    </SidebarGroup>
  );
}
```

### `src/components/dashboards/payment-operations-dashboard/components/nav-products.tsx`

```tsx
"use client";

import { type Icon } from "@tabler/icons-react";

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

export function NavDocuments({
  items,
}: {
  items: {
    name: string;
    url: string;
    icon: Icon;
  }[];
}) {
  return (
    <SidebarGroup className="group-data-[collapsible=icon]:hidden ">
      <SidebarGroupLabel className="font-mono uppercase">
        Documents
      </SidebarGroupLabel>
      <SidebarMenu className="gap-0">
        {items.map((item) => (
          <SidebarMenuItem key={item.name}>
            <SidebarMenuButton
            className="data-[active=true]:bg-white data-[active=true]:text-zinc-900 data-[active=true]:shadow-sm rounded-none hover:bg-zinc-100 hover:text-zinc-900 dark:hover:bg-zinc-800 dark:hover:text-white transition-colors duration-200 group/navItem"
            >
                <item.icon />
                <span>{item.name}</span>
            </SidebarMenuButton>
          </SidebarMenuItem>
        ))}
      </SidebarMenu>
    </SidebarGroup>
  );
}
```

### `src/components/dashboards/payment-operations-dashboard/components/payment-summary.tsx`

```tsx
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { BanknoteX, ArrowUpRight } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";

export function PaymentsSummary() {
  const data = [
    {
      label: "Succeeded",
      amount: "₹3,42,800",
      color: "bg-green-500",
      width: "w-[60%]",
    },
    {
      label: "Uncaptured",
      amount: "₹0",
      color: "bg-yellow-400",
      width: "w-[10%]",
    },
    {
      label: "Refunded",
      amount: "₹4,200",
      color: "bg-orange-500",
      width: "w-[15%]",
    },
    {
      label: "Failed",
      amount: "₹18,450",
      color: "bg-red-500",
      width: "w-[15%]",
    },
  ];

  return (
    <Card className="border-none shadow-sm bg-zinc-100 dark:bg-zinc-800 rounded-none p-0.5 gap-0 group/card">
      <CardHeader className="flex flex-row items-center gap-2 p-2">
        <div className="bg-muted p-1 rounded">
          <BanknoteX className="size-4 text-muted-foreground group-hover/card:text-foreground transition-colors" />
        </div>
        <CardTitle className="text-md font-medium text-foreground">
          Payments
        </CardTitle>
      </CardHeader>
      <CardContent className="bg-white dark:bg-zinc-900 p-4 rounded-none">
        <div className="flex h-3 w-full rounded-full overflow-hidden mb-6 gap-1 ">
          {data.map((item, i) => (
            <div
              key={i}
              className={`${item.color} border border-${item.color}/10 last:border-none ${item.width}  `}
            />
          ))}
        </div>
        <div className="space-y-3">
          {data.map((item, i) => (
            <div key={i} className="flex justify-between items-center text-sm p-2 -mx-2 hover:bg-muted/50 rounded-md transition-colors duration-200 cursor-pointer group">
              <div className="flex items-center gap-2">
                <div className={`w-3 h-3 rounded-sm ${item.color}`} />
                <span className="text-muted-foreground group-hover:text-foreground transition-colors duration-200">{item.label}</span>
              </div>
              <span className="font-medium tabular-nums">{item.amount}</span>
            </div>
          ))}
        </div>
        <div className="mt-8 flex justify-between items-center text-xs text-muted-foreground">
          <Popover>
            <PopoverTrigger asChild>
              <button className="text-muted-foreground font-medium text-sm underline underline-offset-3 hover:text-foreground transition-colors duration-200">
                View More
              </button>
            </PopoverTrigger>
            <PopoverContent align="start" className="w-80 p-0 rounded-none shadow-xl border border-zinc-200 dark:border-zinc-800">
              <div className="p-4 border-b border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900/50">
                <h4 className="font-semibold text-foreground">Detailed Breakdown</h4>
                <p className="text-xs text-muted-foreground">Extended analytics for the current period.</p>
              </div>
              <div className="p-4 space-y-4 text-sm">
                <div className="space-y-2">
                  <div className="flex justify-between items-center">
                    <span className="text-muted-foreground font-medium">Successful Trxs</span>
                    <span className="font-semibold tabular-nums">1,248</span>
                  </div>
                  <div className="h-1.5 w-full bg-zinc-100 dark:bg-zinc-800 rounded-full overflow-hidden">
                    <div className="h-full bg-green-500 w-[85%] rounded-full" />
                  </div>
                </div>
                <div className="space-y-2">
                  <div className="flex justify-between items-center">
                    <span className="text-muted-foreground font-medium">Failed Trxs</span>
                    <span className="font-semibold tabular-nums">42</span>
                  </div>
                  <div className="h-1.5 w-full bg-zinc-100 dark:bg-zinc-800 rounded-full overflow-hidden">
                    <div className="h-full bg-red-500 w-[5%] rounded-full" />
                  </div>
                </div>
                <div className="space-y-2">
                  <div className="flex justify-between items-center">
                    <span className="text-muted-foreground font-medium">Refund Rate</span>
                    <span className="font-semibold tabular-nums">2.1%</span>
                  </div>
                  <div className="h-1.5 w-full bg-zinc-100 dark:bg-zinc-800 rounded-full overflow-hidden">
                    <div className="h-full bg-orange-500 w-[10%] rounded-full" />
                  </div>
                </div>
              </div>
              <div className="p-2 border-t border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900/50">
                <Button variant="ghost" className="w-full h-8 text-xs font-medium justify-between group hover:bg-zinc-200/50 dark:hover:bg-zinc-800 rounded-none text-foreground">
                  Open full analytics
                  <ArrowUpRight className="size-3.5" />
                </Button>
              </div>
            </PopoverContent>
          </Popover>
          <span className="text-muted-foreground text-sm font-medium">
            Last updated 6h ago
          </span>
        </div>
      </CardContent>
    </Card>
  );
}
```

### `src/components/dashboards/payment-operations-dashboard/components/revenue-charts.tsx`

```tsx
"use client";

import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
import { ArrowUpRight, DollarSign } from "lucide-react";
import {
  Card,
  CardContent,

  CardHeader,

} from "@/components/ui/card";
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
} from "@/components/ui/chart";
import { Badge } from "@/components/ui/badge";

const chartData = [
  { date: "Jan 01", net: 45000, gross: 52000 },
  { date: "Jan 03", net: 52000, gross: 60000 },
  { date: "Jan 05", net: 48000, gross: 55000 },
  { date: "Jan 07", net: 61000, gross: 70000 },
  { date: "Jan 09", net: 55000, gross: 65000 },
  { date: "Jan 11", net: 67000, gross: 78000 },
  { date: "Jan 13", net: 72000, gross: 85000 },
  { date: "Jan 15", net: 68000, gross: 80000 },
  { date: "Jan 17", net: 85000, gross: 98000 },
  { date: "Jan 19", net: 79000, gross: 92000 },
  { date: "Today", net: 92000, gross: 105000 },
];

const chartConfig = {
  net: {
    label: "Net Revenue",
    color: "hsl(var(--muted-foreground))",
  },
  gross: {
    label: "Gross Revenue",
    color: "hsl(var(--primary))",
  },
} satisfies ChartConfig;

export function RevenueChart() {
  return (
    <Card className="w-full rounded-none shadow-sm p-0.5 bg-zinc-100 dark:bg-zinc-800 gap-0 border-none group/card">
      <CardHeader className="w-full px-2 mt-1">
        <div className="flex items-center gap-2 text-muted-foreground">
          <DollarSign className="w-4 h-4 group-hover/card:text-primary transition-colors duration-300" />
          <span className="text-lg font-medium text-foreground">
            Net revenue
          </span>
        </div>
      </CardHeader>
      <CardContent className="px-2 py-4 sm:px-4  bg-white dark:bg-zinc-900">
        <div className="flex items-baseline gap-2">
          <h2 className="text-2xl font-medium tracking-tight tabular-nums">
            ₹18,46,720
          </h2>
          <Badge className="bg-green-500/20 text-green-600 hover:bg-green-500/30 transition-colors duration-200 border-none px-1.5 py-0.5 flex gap-0.5 items-center font-medium cursor-pointer">
            <ArrowUpRight className="size-5 stroke-2" /> 5.7%
          </Badge>
        </div>
        <ChartContainer
          config={chartConfig}
          className="aspect-[auto] h-[200px] "
        >
          <AreaChart
            accessibilityLayer
            data={chartData}
            margin={{ left: 10, right: 10, top: 10, bottom: 0 }}
          >
            <defs>
              <linearGradient id="fillNet" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor="var(--net)" stopOpacity={0.45} />
                <stop
                  offset="100%"
                  stopColor="var(--color-net)"
                  stopOpacity={0.01}
                />
              </linearGradient>
            </defs>
            <CartesianGrid
              vertical={false}
              strokeDasharray="3 3"
              className="stroke-muted/50"
            />
            <XAxis
              dataKey="date"
              tickLine={false}
              axisLine={{
                stroke: "var(--foreground)",
                strokeWidth: 1,
                opacity: 0.2,
              }}
              tickMargin={12}
              interval={0}
              ticks={[chartData[0].date, chartData[chartData.length - 1].date]}
              padding={{ left: 10, right: 10 }}
              className="text-xs text-foreground uppercase"
            />
            <YAxis hide domain={["dataMin - 10000", "dataMax + 10000"]} />
            <ChartTooltip
              cursor={{
                stroke: "hsl(var(--foreground))",
                strokeWidth: 1,
              }}
              content={({ active, payload, label }) => {
                if (active && payload && payload.length) {
                  return (
                    <div className="w-auto bg-zinc-100 border border-slate-200 dark:bg-zinc-800 dark:border-zinc-700 shadow-xl p-2 rounded-sm">
                      <p className="text-sm font-medium text-foreground mb-2 uppercase tracking-tight">
                        {label}
                      </p>

                      <div className="flex flex-col gap-1">
                        <div className="flex justify-between items-center text-xs gap-12">
                          <span className="text-muted-foreground font-medium">
                            Gross Revenue:
                          </span>
                          <span className="font-medium tabular-nums">
                            ₹{payload[0].payload.gross.toLocaleString("en-IN")}
                          </span>
                        </div>
                        <div className="flex justify-between items-center text-xs gap-16">
                          <span className="text-muted-foreground font-medium">
                            Net Revenue:
                          </span>
                          <span className="font-medium tabular-nums text-foreground">
                            ₹{payload[0].payload.net.toLocaleString("en-IN")}
                          </span>
                        </div>
                      </div>
                    </div>
                  );
                }
                return null;
              }}
            />
            <Area
              dataKey="net"
              type="monotone"
              fill="url(#fillNet)"
              fillOpacity={1}
              stroke="var(--color-net)"
              strokeWidth={2}
              stackId="a"
            />
          </AreaChart>
        </ChartContainer>
      </CardContent>
    </Card>
  );
}
```

### `src/components/dashboards/payment-operations-dashboard/components/theme-toggle.tsx`

```tsx
import { Moon, Sun } from "lucide-react";
import { useTheme } from "next-themes";

import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

export function ModeToggle() {
  const { setTheme } = useTheme();

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="icon" className="relative transition-colors duration-300 shadow-sm">
          <Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90 group-hover:text-primary" />
          <Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0 group-hover:text-primary" />
          <span className="sr-only">Toggle theme</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem onClick={() => setTheme("light")}>
          Light
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("dark")}>
          Dark
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("system")}>
          System
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}
```

### `src/components/dashboards/payment-operations-dashboard/components/transaction-table.tsx`

```tsx
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

import { Card, CardHeader, CardTitle } from "@/components/ui/card";
import { ArrowLeftRight } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  IconActivity,
  IconClock,
  IconCreditCard,
  IconCurrencyRupee,
  IconSettings,
  IconUser,
} from "@tabler/icons-react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";

const transactions = [
  {
    customer: "Pratik Singh",
    amount: "₹24,999",
    status: "Success",
    method: "Card",
    time: "3 mins ago",
  },
  {
    customer: "Sarah Johnson",
    amount: "₹38,500",
    status: "Refunded",
    method: "Transfer",
    time: "1 hour ago",
  },
  {
    customer: "Mark Lee",
    amount: "₹19,999",
    status: "Failed",
    method: "Payment",
    time: "2 hours ago",
  },
  {
    customer: "Emily Davis",
    amount: "₹29,999",
    status: "Refunded",
    method: "Card",
    time: "5 mins ago",
  },
  {
    customer: "Michael Brown",
    amount: "₹41,999",
    status: "Success",
    method: "Transfer",
    time: "30 mins ago",
  },
];

export const rows = [
  { name: "CUSTOMER", icon: <IconUser size={14} stroke={2.5} /> },
  { name: "AMOUNT", icon: <IconCurrencyRupee size={14} stroke={2.5} /> },
  { name: "STATUS", icon: <IconActivity size={14} stroke={2.5} /> },
  { name: "METHOD", icon: <IconCreditCard size={14} stroke={2.5} /> },
  { name: "TIME", icon: <IconClock size={14} stroke={2.5} /> },
  { name: "ACTION", icon: <IconSettings size={14} stroke={2.5} /> },
];

export function TransactionsTable() {
  return (
    <Card className="border-none rounded-none bg-zinc-100 dark:bg-zinc-800 w-full p-0.5 gap-0 pb-1 group/card">
      <CardHeader className="p-2">
        <div className="flex items-center gap-2">
          <ArrowLeftRight className="size-4 text-muted-foreground group-hover/card:text-primary transition-colors duration-300" />
          <CardTitle className="text-sm font-medium text-foreground">
            Recent Transactions
          </CardTitle>
        </div>
      </CardHeader>
      <Table className="bg-white dark:bg-zinc-900 gap-0 table-auto">
        <TableHeader className="bg-slate-50/50 dark:bg-neutral-900/20 dark:hover:bg-neutral-800">
          <TableRow>
            {rows.map((row, i) => (
              <TableHead key={i} className="w-[200px] text-xs font-semibold ">
                <div className="flex items-center gap-0.5">
                  <div>{row.icon}</div>
                  {row.name}
                </div>
              </TableHead>
            ))}
          </TableRow>
        </TableHeader>
        <TableBody className="">
          {transactions.map((tx, i) => (
            <TableRow
              key={i}
              className="hover:bg-slate-50/50 dark:hover:bg-neutral-800 transition-colors cursor-pointer group"
            >
              <TableCell className="font-medium text-muted-foreground group-hover:text-foreground transition-colors duration-200">
                {tx.customer}
              </TableCell>
              <TableCell className="tabular-nums font-medium text-muted-foreground">
                {tx.amount}
              </TableCell>
              <TableCell className="">
                <div
                  className={`
                  font-normal px-2 py-0.5 rounded-none w-fit 
                  ${tx.status === "Success"
                      ? "bg-green-500/20 text-green-600"
                      : tx.status === "Refunded"
                        ? "bg-orange-500/20 text-orange-600"
                        : "bg-red-500/20 text-red-600"
                    }
                `}
                >
                  {tx.status}
                </div>
              </TableCell>
              <TableCell className="text-muted-foreground">
                {tx.method}
              </TableCell>
              <TableCell className="text-muted-foreground">{tx.time}</TableCell>
              <TableCell>
                <Dialog>
                  <DialogTrigger asChild>
                    <button className="text-muted-foreground dark:text-muted-foreground text-sm font-medium underline underline-offset-3 hover:text-foreground transition-colors">
                      {tx.status === "Failed" ? "Retry" : "View"}
                    </button>
                  </DialogTrigger>
                  <DialogContent className="sm:max-w-md rounded-none shadow-2xl p-0 overflow-hidden border-zinc-200 dark:border-zinc-800">
                    <div className="p-6 pb-0">
                      <DialogHeader>
                        <DialogTitle className="text-xl tracking-tight">Transaction Details</DialogTitle>
                        <DialogDescription className="font-mono text-xs mt-1">
                          ID: TX-{10098 + i}
                        </DialogDescription>
                      </DialogHeader>
                    </div>

                    <div className="px-6 py-5">
                      <div className="flex items-center gap-4 mb-6">
                        <div className="flex-1 space-y-1">
                          <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Customer</p>
                          <p className="text-base font-medium text-foreground">{tx.customer}</p>
                        </div>
                        <div className="flex-1 space-y-1 text-right">
                          <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Amount</p>
                          <p className="text-2xl font-semibold tabular-nums tracking-tight text-foreground">{tx.amount}</p>
                        </div>
                      </div>

                      <div className="grid grid-cols-2 gap-y-6 gap-x-4 py-4 border-y border-zinc-200 dark:border-zinc-800">
                        <div className="space-y-2">
                          <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Status</p>
                          <div
                            className={`font-medium px-2 py-0.5 rounded-none w-fit text-xs inline-flex items-center 
                            ${tx.status === "Success"
                                ? "bg-green-500/20 text-green-700 dark:text-green-500"
                                : tx.status === "Refunded"
                                  ? "bg-orange-500/20 text-orange-700 dark:text-orange-500"
                                  : "bg-red-500/20 text-red-700 dark:text-red-500"
                              }`}
                          >
                            {tx.status}
                          </div>
                        </div>
                        <div className="space-y-1.5">
                          <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Method</p>
                          <p className="text-sm font-medium text-foreground">{tx.method}</p>
                        </div>
                        <div className="space-y-1.5">
                          <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Time</p>
                          <p className="text-sm font-medium text-foreground">{tx.time}</p>
                        </div>
                      </div>
                    </div>

                    <div className="flex flex-col sm:flex-row gap-2 px-6 py-4 bg-zinc-50 dark:bg-zinc-900/50 border-t border-zinc-200 dark:border-zinc-800 sm:justify-end">
                      <Button variant="outline" className="rounded-none h-9 text-xs font-medium w-full sm:w-auto hover:bg-zinc-100 dark:hover:bg-zinc-800">Download Receipt</Button>
                      <Button className="rounded-none h-9 text-xs font-medium w-full sm:w-auto bg-zinc-900 text-white hover:bg-zinc-800 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200 transition-colors">
                        {tx.status === "Failed" ? "Retry Payment" : tx.status === "Refunded" ? "View Refund" : "Refund Payment"}
                      </Button>
                    </div>
                  </DialogContent>
                </Dialog>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </Card>
  );
}
```

### `src/components/dashboards/payment-operations-dashboard/dashboardLayout.tsx`

```tsx
"use client";
import { AppSidebar } from "./components/app-sidebar";
import { SidebarProvider } from "@/components/ui/sidebar";

export const DashboardLayout = ({
  children,
}: {
  children: React.ReactNode;
}) => {
  return (
    <div className="bg-white dark:bg-white/5  h-svh w-screen overflow-hidden font-sans">
      <SidebarProvider
        className="h-full min-h-0! overflow-hidden gap-2 "
        style={
          {
            "--sidebar-width": "calc(var(--spacing) * 60)",
            "--header-height": "calc(var(--spacing) * 12)",
          } as React.CSSProperties
        }
      >
        <AppSidebar className="group" />

        {children}
      </SidebarProvider>
    </div>
  );
};
```

### `src/components/dashboards/payment-operations-dashboard/dashboardView.tsx`

```tsx
"use client";
import { FailedPayments } from "./components/failed-payment";
import { DashboardHeader } from "./components/header";
import { PaymentsSummary } from "./components/payment-summary";
import { RevenueChart } from "./components/revenue-charts";
import { TransactionsTable } from "./components/transaction-table";
import { SidebarTrigger, useSidebar } from "@/components/ui/sidebar";

export default function DashboardView() {
  const { isMobile } = useSidebar();

  return (
    <div className="flex flex-col min-h-screen w-full px-4 md:px-12 pt-16 pb-4 2xl:px-40 font-sans  gap-8 overflow-y-scroll overflow-x-hidden">
      {isMobile && <SidebarTrigger className="absolute inset-0" />}
      <DashboardHeader />
      <RevenueChart />
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
        <PaymentsSummary />
        <FailedPayments />
      </div>
      <TransactionsTable />
    </div>
  );
}
```

### `src/components/dashboards/payment-operations-dashboard/demo.tsx`

```tsx
import { DashboardLayout } from "./dashboardLayout";
import DashboardView from "./dashboardView";

export default function PaymentOperationsDemo() {
  return (
    <DashboardLayout>
      <DashboardView />
    </DashboardLayout>
  );
}
```