Add/update inital try of order components and add csv update script + update import script

2025-01-10 00:01:43 -05:00
parent afe8510751
commit 8bdd188dfe
17 changed files with 38513 additions and 37881 deletions
--- a/inventory/package-lock.json
+++ b/inventory/package-lock.json
@@ -13,6 +13,7 @@
        "@radix-ui/react-dialog": "^1.1.4",
        "@radix-ui/react-dropdown-menu": "^2.1.4",
        "@radix-ui/react-label": "^2.1.1",
+        "@radix-ui/react-popover": "^1.1.4",
        "@radix-ui/react-progress": "^1.1.1",
        "@radix-ui/react-select": "^2.1.4",
        "@radix-ui/react-separator": "^1.1.1",
@@ -26,8 +27,10 @@
        "@tanstack/virtual-core": "^3.11.2",
        "class-variance-authority": "^0.7.1",
        "clsx": "^2.1.1",
+        "date-fns": "^3.6.0",
        "lucide-react": "^0.469.0",
        "react": "^18.3.1",
+        "react-day-picker": "^8.10.1",
        "react-dom": "^18.3.1",
        "react-router-dom": "^7.1.1",
        "recharts": "^2.15.0",
@@ -1529,6 +1532,43 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-popover": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.4.tgz",
+      "integrity": "sha512-aUACAkXx8LaFymDma+HQVji7WhvEhpFJ7+qPz17Nf4lLZqtreGOFRiNQWQmhzp7kEWg9cOyyQJpdIMUMPc/CPw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.3",
+        "@radix-ui/react-focus-guards": "1.1.1",
+        "@radix-ui/react-focus-scope": "1.1.1",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-popper": "1.2.1",
+        "@radix-ui/react-portal": "1.1.3",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-slot": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "^2.6.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-popper": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.1.tgz",
@@ -3435,6 +3475,16 @@
        "node": ">= 12"
      }
    },
+    "node_modules/date-fns": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
    "node_modules/debug": {
      "version": "4.4.0",
      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
@@ -5238,6 +5288,20 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/react-day-picker": {
+      "version": "8.10.1",
+      "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-8.10.1.tgz",
+      "integrity": "sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA==",
+      "license": "MIT",
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/gpbl"
+      },
+      "peerDependencies": {
+        "date-fns": "^2.28.0 || ^3.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
    "node_modules/react-dom": {
      "version": "18.3.1",
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
--- a/inventory/package.json
+++ b/inventory/package.json
@@ -15,6 +15,7 @@
    "@radix-ui/react-dialog": "^1.1.4",
    "@radix-ui/react-dropdown-menu": "^2.1.4",
    "@radix-ui/react-label": "^2.1.1",
+    "@radix-ui/react-popover": "^1.1.4",
    "@radix-ui/react-progress": "^1.1.1",
    "@radix-ui/react-select": "^2.1.4",
    "@radix-ui/react-separator": "^1.1.1",
@@ -28,8 +29,10 @@
    "@tanstack/virtual-core": "^3.11.2",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
+    "date-fns": "^3.6.0",
    "lucide-react": "^0.469.0",
    "react": "^18.3.1",
+    "react-day-picker": "^8.10.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^7.1.1",
    "recharts": "^2.15.0",
--- a/inventory/src/App.tsx
+++ b/inventory/src/App.tsx
@@ -4,6 +4,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Products } from './pages/Products';
 import { Import } from './pages/Import';
 import { Dashboard } from './pages/Dashboard';
+import { Orders } from './pages/Orders';

 const queryClient = new QueryClient();

@@ -16,6 +17,7 @@ function App() {
            <Route path="/" element={<Dashboard />} />
            <Route path="/products" element={<Products />} />
            <Route path="/import" element={<Import />} />
+            <Route path="/orders" element={<Orders />} />
          </Routes>
        </MainLayout>
      </Router>
--- a/inventory/src/components/ui/calendar.tsx
+++ b/inventory/src/components/ui/calendar.tsx
@@ -0,0 +1,74 @@
+import * as React from "react"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import { DayPicker } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell:
+          "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: cn(
+          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
+          props.mode === "range"
+            ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
+            : "[&:has([aria-selected])]:rounded-md"
+        ),
+        day: cn(
+          buttonVariants({ variant: "ghost" }),
+          "h-8 w-8 p-0 font-normal aria-selected:opacity-100"
+        ),
+        day_range_start: "day-range-start",
+        day_range_end: "day-range-end",
+        day_selected:
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside:
+          "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle:
+          "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        IconLeft: ({ className, ...props }) => (
+          <ChevronLeft className={cn("h-4 w-4", className)} {...props} />
+        ),
+        IconRight: ({ className, ...props }) => (
+          <ChevronRight className={cn("h-4 w-4", className)} {...props} />
+        ),
+      }}
+      {...props}
+    />
+  )
+}
+Calendar.displayName = "Calendar"
+
+export { Calendar }
--- a/inventory/src/components/ui/date-range-picker.tsx
+++ b/inventory/src/components/ui/date-range-picker.tsx
@@ -0,0 +1,65 @@
+import * as React from "react";
+import { format } from "date-fns";
+import { Calendar as CalendarIcon } from "lucide-react";
+import { DateRange } from "react-day-picker";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+
+interface DateRangePickerProps {
+  value: DateRange;
+  onChange: (range: DateRange) => void;
+  className?: string;
+}
+
+export function DateRangePicker({
+  value,
+  onChange,
+  className,
+}: DateRangePickerProps) {
+  return (
+    <div className={cn("grid gap-2", className)}>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            id="date"
+            variant={"outline"}
+            className={cn(
+              "h-8 w-[300px] justify-start text-left font-normal",
+              !value && "text-muted-foreground"
+            )}
+          >
+            <CalendarIcon className="mr-2 h-4 w-4" />
+            {value?.from ? (
+              value.to ? (
+                <>
+                  {format(value.from, "LLL dd, y")} -{" "}
+                  {format(value.to, "LLL dd, y")}
+                </>
+              ) : (
+                format(value.from, "LLL dd, y")
+              )
+            ) : (
+              <span>Pick a date range</span>
+            )}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <Calendar
+            initialFocus
+            mode="range"
+            defaultMonth={value?.from}
+            selected={value}
+            onSelect={onChange}
+            numberOfMonths={2}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+} 
--- a/inventory/src/components/ui/popover.tsx
+++ b/inventory/src/components/ui/popover.tsx
@@ -0,0 +1,31 @@
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverAnchor = PopoverPrimitive.Anchor
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
--- a/inventory/src/pages/Orders.tsx
+++ b/inventory/src/pages/Orders.tsx
@@ -0,0 +1,318 @@
+import { useState, useCallback } from 'react';
+import { useQuery, keepPreviousData } from '@tanstack/react-query';
+import { format } from 'date-fns';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/components/ui/pagination";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { DateRangePicker } from "@/components/ui/date-range-picker";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { ArrowUpDown, Search } from "lucide-react";
+import debounce from 'lodash/debounce';
+import config from '../config';
+
+interface Order {
+  order_number: string;
+  customer: string;
+  date: string;
+  status: string;
+  total_amount: number;
+  items_count: number;
+  payment_method: string;
+  shipping_method: string;
+}
+
+interface OrderFilters {
+  search: string;
+  status: string;
+  dateRange: { from: Date | null; to: Date | null };
+  minAmount: string;
+  maxAmount: string;
+}
+
+export function Orders() {
+  const [page, setPage] = useState(1);
+  const [sortColumn, setSortColumn] = useState<keyof Order>('date');
+  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
+  const [filters, setFilters] = useState<OrderFilters>({
+    search: '',
+    status: 'all',
+    dateRange: { from: null, to: null },
+    minAmount: '',
+    maxAmount: '',
+  });
+
+  const { data, isLoading, isFetching } = useQuery({
+    queryKey: ['orders', page, sortColumn, sortDirection, filters],
+    queryFn: async () => {
+      const searchParams = new URLSearchParams({
+        page: page.toString(),
+        limit: '50',
+        sortColumn: sortColumn.toString(),
+        sortDirection,
+        ...filters.dateRange.from && { fromDate: filters.dateRange.from.toISOString() },
+        ...filters.dateRange.to && { toDate: filters.dateRange.to.toISOString() },
+        ...filters.minAmount && { minAmount: filters.minAmount },
+        ...filters.maxAmount && { maxAmount: filters.maxAmount },
+        ...filters.status !== 'all' && { status: filters.status },
+        ...filters.search && { search: filters.search },
+      });
+
+      const response = await fetch(`${config.apiUrl}/orders?${searchParams}`);
+      if (!response.ok) throw new Error('Failed to fetch orders');
+      return response.json();
+    },
+    placeholderData: keepPreviousData,
+    staleTime: 30000,
+  });
+
+  const debouncedFilterChange = useCallback(
+    debounce((newFilters: Partial<OrderFilters>) => {
+      setFilters(prev => ({ ...prev, ...newFilters }));
+      setPage(1);
+    }, 300),
+    []
+  );
+
+  const handleSort = (column: keyof Order) => {
+    if (sortColumn === column) {
+      setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc');
+    } else {
+      setSortColumn(column);
+      setSortDirection('asc');
+    }
+  };
+
+  const getOrderStatusBadge = (status: string) => {
+    const variants: Record<string, { variant: "default" | "secondary" | "destructive" | "outline"; label: string }> = {
+      pending: { variant: "outline", label: "Pending" },
+      processing: { variant: "secondary", label: "Processing" },
+      completed: { variant: "default", label: "Completed" },
+      cancelled: { variant: "destructive", label: "Cancelled" },
+    };
+
+    const statusConfig = variants[status.toLowerCase()] || variants.pending;
+    return <Badge variant={statusConfig.variant}>{statusConfig.label}</Badge>;
+  };
+
+  const renderSortButton = (column: keyof Order, label: string) => (
+    <Button 
+      variant="ghost" 
+      onClick={() => handleSort(column)}
+      className="w-full justify-start font-medium"
+    >
+      {label}
+      <ArrowUpDown className={`ml-2 h-4 w-4 ${sortColumn === column && sortDirection === 'desc' ? 'rotate-180' : ''}`} />
+    </Button>
+  );
+
+  return (
+    <div className="p-8 space-y-8">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold">Orders</h1>
+        <div className="text-sm text-muted-foreground">
+          {data?.pagination.total.toLocaleString() ?? '...'} orders
+        </div>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Total Orders</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{data?.stats.totalOrders ?? '...'}</div>
+            <p className="text-xs text-muted-foreground">
+              +{data?.stats.orderGrowth ?? 0}% from last month
+            </p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Total Revenue</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              ${(data?.stats.totalRevenue ?? 0).toLocaleString()}
+            </div>
+            <p className="text-xs text-muted-foreground">
+              +{data?.stats.revenueGrowth ?? 0}% from last month
+            </p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Average Order Value</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              ${(data?.stats.averageOrderValue ?? 0).toLocaleString()}
+            </div>
+            <p className="text-xs text-muted-foreground">
+              +{data?.stats.aovGrowth ?? 0}% from last month
+            </p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Conversion Rate</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              {(data?.stats.conversionRate ?? 0).toFixed(1)}%
+            </div>
+            <p className="text-xs text-muted-foreground">
+              +{data?.stats.conversionGrowth ?? 0}% from last month
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="flex flex-col gap-4 md:flex-row md:items-center">
+        <div className="flex items-center gap-2 flex-1">
+          <Search className="h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder="Search orders..."
+            value={filters.search}
+            onChange={(e) => debouncedFilterChange({ search: e.target.value })}
+            className="h-8 w-[300px]"
+          />
+        </div>
+        <div className="flex flex-wrap items-center gap-2">
+          <Select
+            value={filters.status}
+            onValueChange={(value) => debouncedFilterChange({ status: value })}
+          >
+            <SelectTrigger className="h-8 w-[180px]">
+              <SelectValue placeholder="Status" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All Status</SelectItem>
+              <SelectItem value="pending">Pending</SelectItem>
+              <SelectItem value="processing">Processing</SelectItem>
+              <SelectItem value="completed">Completed</SelectItem>
+              <SelectItem value="cancelled">Cancelled</SelectItem>
+            </SelectContent>
+          </Select>
+          <DateRangePicker
+            value={filters.dateRange}
+            onChange={(range) => debouncedFilterChange({ dateRange: range })}
+          />
+          <div className="flex items-center gap-2">
+            <Input
+              type="number"
+              placeholder="Min $"
+              value={filters.minAmount}
+              onChange={(e) => debouncedFilterChange({ minAmount: e.target.value })}
+              className="h-8 w-[100px]"
+            />
+            <span>-</span>
+            <Input
+              type="number"
+              placeholder="Max $"
+              value={filters.maxAmount}
+              onChange={(e) => debouncedFilterChange({ maxAmount: e.target.value })}
+              className="h-8 w-[100px]"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>{renderSortButton('order_number', 'Order')}</TableHead>
+              <TableHead>{renderSortButton('customer', 'Customer')}</TableHead>
+              <TableHead>{renderSortButton('date', 'Date')}</TableHead>
+              <TableHead>{renderSortButton('status', 'Status')}</TableHead>
+              <TableHead className="text-right">{renderSortButton('total_amount', 'Total')}</TableHead>
+              <TableHead className="text-center">{renderSortButton('items_count', 'Items')}</TableHead>
+              <TableHead>{renderSortButton('payment_method', 'Payment')}</TableHead>
+              <TableHead>{renderSortButton('shipping_method', 'Shipping')}</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {isLoading ? (
+              <TableRow>
+                <TableCell colSpan={8} className="text-center py-8">
+                  Loading orders...
+                </TableCell>
+              </TableRow>
+            ) : data?.orders.map((order: Order) => (
+              <TableRow key={order.order_number}>
+                <TableCell className="font-medium">#{order.order_number}</TableCell>
+                <TableCell>{order.customer}</TableCell>
+                <TableCell>{format(new Date(order.date), 'MMM d, yyyy')}</TableCell>
+                <TableCell>{getOrderStatusBadge(order.status)}</TableCell>
+                <TableCell className="text-right">${order.total_amount.toFixed(2)}</TableCell>
+                <TableCell className="text-center">{order.items_count}</TableCell>
+                <TableCell>{order.payment_method}</TableCell>
+                <TableCell>{order.shipping_method}</TableCell>
+              </TableRow>
+            ))}
+            {!isLoading && !data?.orders.length && (
+              <TableRow>
+                <TableCell colSpan={8} className="text-center py-8 text-muted-foreground">
+                  No orders found
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      {data?.pagination.pages > 1 && (
+        <Pagination>
+          <PaginationContent>
+            <PaginationItem>
+              <PaginationPrevious 
+                onClick={() => setPage(p => Math.max(1, p - 1))}
+                disabled={page === 1 || isFetching}
+              />
+            </PaginationItem>
+            {Array.from({ length: data.pagination.pages }, (_, i) => i + 1).map((p) => (
+              <PaginationItem key={p}>
+                <PaginationLink
+                  onClick={() => setPage(p)}
+                  isActive={p === page}
+                  disabled={isFetching}
+                >
+                  {p}
+                </PaginationLink>
+              </PaginationItem>
+            ))}
+            <PaginationItem>
+              <PaginationNext
+                onClick={() => setPage(p => Math.min(data.pagination.pages, p + 1))}
+                disabled={page === data.pagination.pages || isFetching}
+              />
+            </PaginationItem>
+          </PaginationContent>
+        </Pagination>
+      )}
+    </div>
+  );
+}