@hed-hog/billing 0.0.2 → 0.0.286

package/hedhog/frontend/app/coupons/page.tsx.ejs

@@ -1,6 +1,7 @@
 'use client';
 
 import {
+  EmptyState,
   Page,
   PageHeader,
   PaginationFooter,
@@ -52,7 +53,7 @@ import {
 } from '@/components/ui/table';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Pencil, Plus, Trash2 } from 'lucide-react';
+import { FileText, Pencil, Plus, Trash2 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
@@ -131,7 +132,7 @@ const mapDiscountTypeFromApi = (
 };
 
 export default function BillingCouponsPage() {
-  const t = useTranslations('BillingCouponsPage');
+  const t = useTranslations('billing.BillingCouponsPage');
   const { request, currentLocaleCode, showToastHandler } = useApp();
   const [search, setSearch] = useState('');
   const [statusFilter, setStatusFilter] = useState('all');
@@ -332,83 +333,86 @@ export default function BillingCouponsPage() {
         }}
       />
 
-      <div className="overflow-x-auto rounded-md border">
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>{t('table.columns.code')}</TableHead>
-              <TableHead>{t('table.columns.name')}</TableHead>
-              <TableHead>{t('table.columns.discountType')}</TableHead>
-              <TableHead>{t('table.columns.discountValue')}</TableHead>
-              <TableHead>{t('table.columns.uses')}</TableHead>
-              <TableHead>{t('table.columns.status')}</TableHead>
-              <TableHead className="w-[120px] text-right">
-                {t('table.columns.actions')}
-              </TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {items.length === 0 && (
+      {items.length > 0 ? (
+        <div className="overflow-x-auto rounded-md border">
+          <Table>
+            <TableHeader>
               <TableRow>
-                <TableCell
-                  colSpan={7}
-                  className="text-center text-muted-foreground"
-                >
-                  {t('table.empty')}
-                </TableCell>
+                <TableHead>{t('table.columns.code')}</TableHead>
+                <TableHead>{t('table.columns.name')}</TableHead>
+                <TableHead>{t('table.columns.discountType')}</TableHead>
+                <TableHead>{t('table.columns.discountValue')}</TableHead>
+                <TableHead>{t('table.columns.uses')}</TableHead>
+                <TableHead>{t('table.columns.status')}</TableHead>
+                <TableHead className="w-[120px] text-right">
+                  {t('table.columns.actions')}
+                </TableHead>
               </TableRow>
-            )}
-            {items.map((item) => (
-              <TableRow key={item.id}>
-                <TableCell className="font-medium">{item.code}</TableCell>
-                <TableCell>{item.name}</TableCell>
-                <TableCell>
-                  <Badge className={badgeClass(item.discount_type)}>
-                    {item.discount_type}
-                  </Badge>
-                </TableCell>
-                <TableCell>
-                  {item.discount_type === 'fixed'
-                    ? formatCurrency(
-                        Math.round(item.discount_value),
-                        item.currency
-                      )
-                    : `${item.discount_value}%`}
-                </TableCell>
-                <TableCell>
-                  {item.uses_count}/{item.max_uses ?? '-'}
-                </TableCell>
-                <TableCell>
-                  <Badge className={badgeClass(item.status)}>
-                    {item.status}
-                  </Badge>
-                </TableCell>
-                <TableCell>
-                  <div className="flex justify-end gap-2">
-                    <Button
-                      variant="outline"
-                      size="icon"
-                      onClick={() => {
-                        setEditingCoupon(item);
-                        setSheetOpen(true);
-                      }}
-                    >
-                      <Pencil className="size-4" />
-                    </Button>
-                    <Button
-                      variant="destructive"
-                      size="icon"
-                      onClick={() => setDeleteId(item.id)}
-                    >
-                      <Trash2 className="size-4" />
-                    </Button>
-                  </div>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </div>
+            </TableHeader>
+            <TableBody>
+              {items.map((item) => (
+                <TableRow key={item.id}>
+                  <TableCell className="font-medium">{item.code}</TableCell>
+                  <TableCell>{item.name}</TableCell>
+                  <TableCell>
+                    <Badge className={badgeClass(item.discount_type)}>
+                      {item.discount_type}
+                    </Badge>
+                  </TableCell>
+                  <TableCell>
+                    {item.discount_type === 'fixed'
+                      ? formatCurrency(
+                          Math.round(item.discount_value),
+                          item.currency
+                        )
+                      : `${item.discount_value}%`}
+                  </TableCell>
+                  <TableCell>
+                    {item.uses_count}/{item.max_uses ?? '-'}
+                  </TableCell>
+                  <TableCell>
+                    <Badge className={badgeClass(item.status)}>
+                      {item.status}
+                    </Badge>
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex justify-end gap-2">
+                      <Button
+                        variant="outline"
+                        size="icon"
+                        onClick={() => {
+                          setEditingCoupon(item);
+                          setSheetOpen(true);
+                        }}
+                      >
+                        <Pencil className="size-4" />
+                      </Button>
+                      <Button
+                        variant="destructive"
+                        size="icon"
+                        onClick={() => setDeleteId(item.id)}
+                      >
+                        <Trash2 className="size-4" />
+                      </Button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      ) : (
+        <EmptyState
+          icon={<FileText className="h-12 w-12" />}
+          title={t('table.empty')}
+          description={t('description')}
+          actionLabel={t('actions.create')}
+          onAction={() => {
+            setEditingCoupon(null);
+            setSheetOpen(true);
+          }}
+        />
+      )}
 
       <PaginationFooter
         currentPage={page}

package/hedhog/frontend/app/entitlements/page.tsx.ejs

@@ -1,6 +1,7 @@
 'use client';
 
 import {
+  EmptyState,
   Page,
   PageHeader,
   PaginationFooter,
@@ -51,7 +52,7 @@ import {
 } from '@/components/ui/table';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Plus, Trash2 } from 'lucide-react';
+import { FileText, Plus, Trash2 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
@@ -104,7 +105,7 @@ const badgeClass = (value: string) => {
 };
 
 export default function BillingEntitlementsPage() {
-  const t = useTranslations('BillingEntitlementsPage');
+  const t = useTranslations('billing.BillingEntitlementsPage');
   const { request, currentLocaleCode, showToastHandler } = useApp();
   const [search, setSearch] = useState('');
   const [page, setPage] = useState(1);
@@ -237,64 +238,64 @@ export default function BillingEntitlementsPage() {
         placeholder={t('filters.searchPlaceholder')}
       />
 
-      <div className="overflow-x-auto rounded-md border">
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>{t('table.columns.contactId')}</TableHead>
-              <TableHead>{t('table.columns.sourceType')}</TableHead>
-              <TableHead>{t('table.columns.targetType')}</TableHead>
-              <TableHead>{t('table.columns.accessType')}</TableHead>
-              <TableHead>{t('table.columns.status')}</TableHead>
-              <TableHead>{t('table.columns.startsAt')}</TableHead>
-              <TableHead>{t('table.columns.endsAt')}</TableHead>
-              <TableHead className="w-[100px] text-right">
-                {t('table.columns.actions')}
-              </TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {items.length === 0 && (
+      {items.length > 0 ? (
+        <div className="overflow-x-auto rounded-md border">
+          <Table>
+            <TableHeader>
               <TableRow>
-                <TableCell
-                  colSpan={8}
-                  className="text-center text-muted-foreground"
-                >
-                  {t('table.empty')}
-                </TableCell>
+                <TableHead>{t('table.columns.contactId')}</TableHead>
+                <TableHead>{t('table.columns.sourceType')}</TableHead>
+                <TableHead>{t('table.columns.targetType')}</TableHead>
+                <TableHead>{t('table.columns.accessType')}</TableHead>
+                <TableHead>{t('table.columns.status')}</TableHead>
+                <TableHead>{t('table.columns.startsAt')}</TableHead>
+                <TableHead>{t('table.columns.endsAt')}</TableHead>
+                <TableHead className="w-[100px] text-right">
+                  {t('table.columns.actions')}
+                </TableHead>
               </TableRow>
-            )}
-            {items.map((item) => (
-              <TableRow key={item.id}>
-                <TableCell>{item.contact_id}</TableCell>
-                <TableCell>{item.source_type}</TableCell>
-                <TableCell>{item.target_type}</TableCell>
-                <TableCell>
-                  <Badge className={badgeClass(item.access_type)}>
-                    {item.access_type}
-                  </Badge>
-                </TableCell>
-                <TableCell>
-                  <Badge className={badgeClass(item.status)}>
-                    {item.status}
-                  </Badge>
-                </TableCell>
-                <TableCell>{formatDate(item.starts_at)}</TableCell>
-                <TableCell>{formatDate(item.ends_at)}</TableCell>
-                <TableCell className="text-right">
-                  <Button
-                    variant="destructive"
-                    size="icon"
-                    onClick={() => setDeleteId(item.id)}
-                  >
-                    <Trash2 className="size-4" />
-                  </Button>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </div>
+            </TableHeader>
+            <TableBody>
+              {items.map((item) => (
+                <TableRow key={item.id}>
+                  <TableCell>{item.contact_id}</TableCell>
+                  <TableCell>{item.source_type}</TableCell>
+                  <TableCell>{item.target_type}</TableCell>
+                  <TableCell>
+                    <Badge className={badgeClass(item.access_type)}>
+                      {item.access_type}
+                    </Badge>
+                  </TableCell>
+                  <TableCell>
+                    <Badge className={badgeClass(item.status)}>
+                      {item.status}
+                    </Badge>
+                  </TableCell>
+                  <TableCell>{formatDate(item.starts_at)}</TableCell>
+                  <TableCell>{formatDate(item.ends_at)}</TableCell>
+                  <TableCell className="text-right">
+                    <Button
+                      variant="destructive"
+                      size="icon"
+                      onClick={() => setDeleteId(item.id)}
+                    >
+                      <Trash2 className="size-4" />
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      ) : (
+        <EmptyState
+          icon={<FileText className="h-12 w-12" />}
+          title={t('table.empty')}
+          description={t('description')}
+          actionLabel={t('actions.create')}
+          onAction={() => setSheetOpen(true)}
+        />
+      )}
 
       <PaginationFooter
         currentPage={page}

package/hedhog/frontend/app/gateways/page.tsx.ejs

@@ -1,15 +1,14 @@
 'use client';
 
-import { Page, PageHeader } from '@/components/entity-list';
+import {
+  EmptyState,
+  Page,
+  PageHeader,
+  PaginationFooter,
+  SearchBar,
+} from '@/components/entity-list';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
 import {
   Form,
   FormControl,
@@ -26,11 +25,19 @@ import {
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
 import { Switch } from '@/components/ui/switch';
 import { Textarea } from '@/components/ui/textarea';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Settings } from 'lucide-react';
+import { FileText, Settings } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
@@ -71,8 +78,11 @@ const fallbackGateways: Gateway[] = [
 ];
 
 export default function BillingGatewaysPage() {
-  const t = useTranslations('BillingGatewaysPage');
+  const t = useTranslations('billing.BillingGatewaysPage');
   const { request, currentLocaleCode, showToastHandler } = useApp();
+  const [search, setSearch] = useState('');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(12);
   const [sheetOpen, setSheetOpen] = useState(false);
   const [editingGateway, setEditingGateway] = useState<Gateway | null>(null);
 
@@ -104,6 +114,19 @@ export default function BillingGatewaysPage() {
   });
 
   const items = data ?? fallbackGateways;
+  const query = search.trim().toLowerCase();
+  const filteredItems = items.filter((gateway) => {
+    if (!query) {
+      return true;
+    }
+
+    return [gateway.name, gateway.slug].some((value) =>
+      value.toLowerCase().includes(query)
+    );
+  });
+  const totalItems = filteredItems.length;
+  const start = (page - 1) * pageSize;
+  const pagedItems = filteredItems.slice(start, start + pageSize);
 
   useEffect(() => {
     if (!sheetOpen || !editingGateway) {
@@ -174,54 +197,99 @@ export default function BillingGatewaysPage() {
         ]}
       />
 
-      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
-        {items.map((gateway) => (
-          <Card key={gateway.slug} className="shadow-none">
-            <CardHeader>
-              <CardTitle className="flex items-center justify-between text-lg">
-                {gateway.name}
-                <Badge
-                  className={
-                    gateway.is_active
-                      ? 'bg-green-100 text-green-800'
-                      : 'bg-gray-100 text-gray-800'
-                  }
-                >
-                  {gateway.is_active
-                    ? t('status.active')
-                    : t('status.inactive')}
-                </Badge>
-              </CardTitle>
-              <CardDescription>{gateway.slug}</CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="flex items-center justify-between">
-                <span className="text-sm text-muted-foreground">
-                  {t('fields.active')}
-                </span>
-                <Switch
-                  checked={gateway.is_active}
-                  onCheckedChange={(checked) =>
-                    void quickToggle(gateway, checked)
-                  }
-                />
-              </div>
+      <SearchBar
+        searchQuery={search}
+        onSearchChange={(value) => {
+          setSearch(value);
+          setPage(1);
+        }}
+        onSearch={() => setPage(1)}
+        placeholder={t('filters.searchPlaceholder')}
+      />
 
-              <Button
-                className="w-full"
-                variant="outline"
-                onClick={() => {
-                  setEditingGateway(gateway);
-                  setSheetOpen(true);
-                }}
-              >
-                <Settings className="mr-2 size-4" />
-                {t('actions.configure')}
-              </Button>
-            </CardContent>
-          </Card>
-        ))}
-      </div>
+      {pagedItems.length > 0 ? (
+        <div className="overflow-x-auto rounded-md border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>{t('table.columns.name')}</TableHead>
+                <TableHead>{t('table.columns.slug')}</TableHead>
+                <TableHead>{t('table.columns.status')}</TableHead>
+                <TableHead>{t('table.columns.active')}</TableHead>
+                <TableHead className="text-right">
+                  {t('table.columns.actions')}
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {pagedItems.map((gateway) => (
+                <TableRow key={gateway.slug}>
+                  <TableCell className="font-medium">{gateway.name}</TableCell>
+                  <TableCell>{gateway.slug}</TableCell>
+                  <TableCell>
+                    <Badge
+                      className={
+                        gateway.is_active
+                          ? 'bg-green-100 text-green-800'
+                          : 'bg-gray-100 text-gray-800'
+                      }
+                    >
+                      {gateway.is_active
+                        ? t('status.active')
+                        : t('status.inactive')}
+                    </Badge>
+                  </TableCell>
+                  <TableCell>
+                    <Switch
+                      checked={gateway.is_active}
+                      onCheckedChange={(checked) =>
+                        void quickToggle(gateway, checked)
+                      }
+                    />
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex justify-end">
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => {
+                          setEditingGateway(gateway);
+                          setSheetOpen(true);
+                        }}
+                      >
+                        <Settings className="mr-2 size-4" />
+                        {t('actions.configure')}
+                      </Button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      ) : (
+        <EmptyState
+          icon={<FileText className="h-12 w-12" />}
+          title={t('table.empty')}
+          description={t('description')}
+          actionLabel={t('emptyAction')}
+          onAction={() => {
+            setSearch('');
+            setPage(1);
+          }}
+        />
+      )}
+
+      <PaginationFooter
+        currentPage={page}
+        pageSize={pageSize}
+        totalItems={totalItems}
+        onPageChange={setPage}
+        onPageSizeChange={(nextSize) => {
+          setPageSize(nextSize);
+          setPage(1);
+        }}
+      />
 
       <Sheet
         open={sheetOpen}