@hed-hog/billing 0.0.2 → 0.0.285

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

@@ -0,0 +1,826 @@
+'use client';
+
+import {
+  EmptyState,
+  Page,
+  PageHeader,
+  PaginationFooter,
+  SearchBar,
+  StatsCards,
+  type StatCardConfig,
+} from '@/components/entity-list';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Textarea } from '@/components/ui/textarea';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  BadgeCheck,
+  Building2,
+  KeyRound,
+  Pencil,
+  Plus,
+  Trash2,
+  UserRound,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+type ContractOption = {
+  id: number;
+  name: string;
+  company_name: string;
+  total_seats: number;
+};
+
+type ContractSeatOption = {
+  id: number;
+  contract_id: number;
+  label: string;
+  product_name: string;
+};
+
+type SeatAllocationStatus = 'active' | 'pending' | 'released';
+
+type SeatAllocation = {
+  id: number;
+  contract_id: number;
+  contract_name: string;
+  company_name: string;
+  seat_id: number;
+  seat_label: string;
+  product_name: string;
+  assigned_to: string;
+  assigned_email: string;
+  status: SeatAllocationStatus;
+  allocated_at: string;
+  released_at?: string | null;
+  notes?: string;
+};
+
+type SeatFormValues = z.infer<typeof seatSchema>;
+
+const CONTRACTS: ContractOption[] = [
+  {
+    id: 101,
+    name: 'Contrato Enterprise 2026',
+    company_name: 'Acme Industrial',
+    total_seats: 40,
+  },
+  {
+    id: 102,
+    name: 'Contrato Growth 2026',
+    company_name: 'Orbit Labs',
+    total_seats: 18,
+  },
+  {
+    id: 103,
+    name: 'Contrato Support 2026',
+    company_name: 'Nexa Services',
+    total_seats: 12,
+  },
+];
+
+const CONTRACT_SEATS: ContractSeatOption[] = [
+  {
+    id: 1001,
+    contract_id: 101,
+    label: 'Admin Platform Seat',
+    product_name: 'HedHog Admin Enterprise',
+  },
+  {
+    id: 1002,
+    contract_id: 101,
+    label: 'Analytics Seat',
+    product_name: 'HedHog Analytics',
+  },
+  {
+    id: 1003,
+    contract_id: 102,
+    label: 'Team Manager Seat',
+    product_name: 'HedHog Growth',
+  },
+  {
+    id: 1004,
+    contract_id: 102,
+    label: 'Contributor Seat',
+    product_name: 'HedHog Growth',
+  },
+  {
+    id: 1005,
+    contract_id: 103,
+    label: 'Support Operator Seat',
+    product_name: 'HedHog Support Desk',
+  },
+];
+
+const MOCK_ALLOCATIONS: SeatAllocation[] = [
+  {
+    id: 1,
+    contract_id: 101,
+    contract_name: 'Contrato Enterprise 2026',
+    company_name: 'Acme Industrial',
+    seat_id: 1001,
+    seat_label: 'Admin Platform Seat',
+    product_name: 'HedHog Admin Enterprise',
+    assigned_to: 'Marina Souza',
+    assigned_email: 'marina.souza@acme.example',
+    status: 'active',
+    allocated_at: '2026-02-04',
+    notes: 'Lider do time financeiro.',
+  },
+  {
+    id: 2,
+    contract_id: 101,
+    contract_name: 'Contrato Enterprise 2026',
+    company_name: 'Acme Industrial',
+    seat_id: 1002,
+    seat_label: 'Analytics Seat',
+    product_name: 'HedHog Analytics',
+    assigned_to: 'Bruno Lima',
+    assigned_email: 'bruno.lima@acme.example',
+    status: 'pending',
+    allocated_at: '2026-03-02',
+    notes: 'Aguardando ativacao do SSO.',
+  },
+  {
+    id: 3,
+    contract_id: 102,
+    contract_name: 'Contrato Growth 2026',
+    company_name: 'Orbit Labs',
+    seat_id: 1003,
+    seat_label: 'Team Manager Seat',
+    product_name: 'HedHog Growth',
+    assigned_to: 'Carla Nascimento',
+    assigned_email: 'carla@orbit.example',
+    status: 'active',
+    allocated_at: '2026-01-19',
+    notes: 'Gestora principal do workspace.',
+  },
+  {
+    id: 4,
+    contract_id: 103,
+    contract_name: 'Contrato Support 2026',
+    company_name: 'Nexa Services',
+    seat_id: 1005,
+    seat_label: 'Support Operator Seat',
+    product_name: 'HedHog Support Desk',
+    assigned_to: 'Thiago Martins',
+    assigned_email: 'thiago@nexa.example',
+    status: 'released',
+    allocated_at: '2026-01-10',
+    released_at: '2026-02-25',
+    notes: 'Assento liberado apos troca de equipe.',
+  },
+];
+
+const seatSchema = z.object({
+  contract_id: z.coerce.number().min(1),
+  seat_id: z.coerce.number().min(1),
+  assigned_to: z.string().trim().min(2),
+  assigned_email: z.string().trim().email(),
+  status: z.enum(['active', 'pending', 'released']),
+  allocated_at: z.string().min(1),
+  notes: z.string().optional(),
+});
+
+const defaultValues: SeatFormValues = {
+  contract_id: CONTRACTS[0].id,
+  seat_id: CONTRACT_SEATS[0].id,
+  assigned_to: '',
+  assigned_email: '',
+  status: 'active',
+  allocated_at: new Date().toISOString().slice(0, 10),
+  notes: '',
+};
+
+const badgeClass = (value: SeatAllocationStatus) => {
+  if (value === 'active') {
+    return 'bg-green-100 text-green-800';
+  }
+
+  if (value === 'pending') {
+    return 'bg-yellow-100 text-yellow-800';
+  }
+
+  return 'bg-gray-100 text-gray-800';
+};
+
+const formatDate = (value?: string | null) => {
+  if (!value) {
+    return '-';
+  }
+
+  return new Intl.DateTimeFormat('pt-BR', {
+    dateStyle: 'short',
+  }).format(new Date(value));
+};
+
+const buildAllocationFromValues = (
+  values: SeatFormValues,
+  currentId: number,
+  previous?: SeatAllocation | null
+): SeatAllocation => {
+  const contract = CONTRACTS.find((item) => item.id === values.contract_id);
+  const seat = CONTRACT_SEATS.find((item) => item.id === values.seat_id);
+
+  return {
+    id: currentId,
+    contract_id: values.contract_id,
+    contract_name: contract?.name ?? '-',
+    company_name: contract?.company_name ?? '-',
+    seat_id: values.seat_id,
+    seat_label: seat?.label ?? '-',
+    product_name: seat?.product_name ?? '-',
+    assigned_to: values.assigned_to.trim(),
+    assigned_email: values.assigned_email.trim(),
+    status: values.status,
+    allocated_at: values.allocated_at,
+    released_at:
+      values.status === 'released'
+        ? (previous?.released_at ?? new Date().toISOString().slice(0, 10))
+        : null,
+    notes: values.notes?.trim() || '',
+  };
+};
+
+export default function BillingSeatsPage() {
+  const t = useTranslations('billing.BillingSeatsPage');
+  const { showToastHandler } = useApp();
+  const [search, setSearch] = useState('');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(12);
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const [editingItem, setEditingItem] = useState<SeatAllocation | null>(null);
+  const [releaseId, setReleaseId] = useState<number | null>(null);
+  const [allocations, setAllocations] = useState<SeatAllocation[]>([]);
+
+  const form = useForm<SeatFormValues>({
+    resolver: zodResolver(seatSchema),
+    defaultValues,
+  });
+
+  const { data } = useQuery<SeatAllocation[]>({
+    queryKey: ['billing-seats-local'],
+    queryFn: async () => MOCK_ALLOCATIONS,
+    placeholderData: MOCK_ALLOCATIONS,
+  });
+
+  useEffect(() => {
+    setAllocations(data ?? MOCK_ALLOCATIONS);
+  }, [data]);
+
+  useEffect(() => {
+    if (!sheetOpen) {
+      return;
+    }
+
+    if (editingItem) {
+      form.reset({
+        contract_id: editingItem.contract_id,
+        seat_id: editingItem.seat_id,
+        assigned_to: editingItem.assigned_to,
+        assigned_email: editingItem.assigned_email,
+        status: editingItem.status,
+        allocated_at: editingItem.allocated_at,
+        notes: editingItem.notes ?? '',
+      });
+      return;
+    }
+
+    form.reset(defaultValues);
+  }, [editingItem, form, sheetOpen]);
+
+  const selectedContractId = form.watch('contract_id');
+  const seatOptions = CONTRACT_SEATS.filter(
+    (item) => item.contract_id === selectedContractId
+  );
+
+  const filteredItems = allocations.filter((item) => {
+    const query = search.trim().toLowerCase();
+    if (!query) {
+      return true;
+    }
+
+    return [
+      item.contract_name,
+      item.company_name,
+      item.product_name,
+      item.seat_label,
+      item.assigned_to,
+      item.assigned_email,
+      item.status,
+    ].some((value) => value.toLowerCase().includes(query));
+  });
+
+  const totalItems = filteredItems.length;
+  const totalPages = Math.max(1, Math.ceil(totalItems / pageSize));
+  const currentPage = Math.min(page, totalPages);
+  const pagedItems = filteredItems.slice(
+    (currentPage - 1) * pageSize,
+    currentPage * pageSize
+  );
+
+  useEffect(() => {
+    if (page > totalPages) {
+      setPage(totalPages);
+    }
+  }, [page, totalPages]);
+
+  const contractedSeats = CONTRACTS.reduce(
+    (sum, contract) => sum + contract.total_seats,
+    0
+  );
+  const allocatedSeats = allocations.filter(
+    (item) => item.status === 'active' || item.status === 'pending'
+  ).length;
+  const releasedSeats = allocations.filter(
+    (item) => item.status === 'released'
+  ).length;
+  const availableSeats = Math.max(contractedSeats - allocatedSeats, 0);
+
+  const stats: StatCardConfig[] = [
+    {
+      title: t('stats.contractedSeats'),
+      value: contractedSeats,
+      icon: <KeyRound className="size-5" />,
+      iconBgColor: 'bg-blue-50',
+      iconColor: 'text-blue-600',
+    },
+    {
+      title: t('stats.allocatedSeats'),
+      value: allocatedSeats,
+      icon: <BadgeCheck className="size-5" />,
+      iconBgColor: 'bg-green-50',
+      iconColor: 'text-green-600',
+    },
+    {
+      title: t('stats.availableSeats'),
+      value: availableSeats,
+      icon: <UserRound className="size-5" />,
+      iconBgColor: 'bg-amber-50',
+      iconColor: 'text-amber-600',
+    },
+    {
+      title: t('stats.releasedSeats'),
+      value: releasedSeats,
+      icon: <Building2 className="size-5" />,
+      iconBgColor: 'bg-slate-100',
+      iconColor: 'text-slate-700',
+    },
+  ];
+
+  const handleSubmit = async (values: SeatFormValues) => {
+    try {
+      if (editingItem) {
+        setAllocations((current) =>
+          current.map((item) =>
+            item.id === editingItem.id
+              ? buildAllocationFromValues(values, editingItem.id, item)
+              : item
+          )
+        );
+      } else {
+        const nextId =
+          allocations.reduce((max, item) => Math.max(max, item.id), 0) + 1;
+        setAllocations((current) => [
+          buildAllocationFromValues(values, nextId),
+          ...current,
+        ]);
+      }
+
+      showToastHandler?.('success', t('messages.saveSuccess'));
+      setSheetOpen(false);
+      setEditingItem(null);
+      form.reset(defaultValues);
+    } catch {
+      showToastHandler?.('error', t('messages.saveError'));
+    }
+  };
+
+  const handleRelease = async () => {
+    if (!releaseId) {
+      return;
+    }
+
+    try {
+      setAllocations((current) =>
+        current.map((item) => {
+          if (item.id !== releaseId) {
+            return item;
+          }
+
+          return {
+            ...item,
+            status: 'released',
+            released_at: new Date().toISOString().slice(0, 10),
+          };
+        })
+      );
+      setReleaseId(null);
+      showToastHandler?.('success', t('messages.deleteSuccess'));
+    } catch {
+      showToastHandler?.('error', t('messages.deleteError'));
+    }
+  };
+
+  return (
+    <Page>
+      <PageHeader
+        title={t('title')}
+        description={t('description')}
+        breadcrumbs={[
+          { label: t('breadcrumbs.home'), href: '/' },
+          { label: t('breadcrumbs.billing'), href: '/billing' },
+          { label: t('breadcrumbs.seats') },
+        ]}
+        actions={[
+          {
+            label: t('actions.create'),
+            onClick: () => {
+              setEditingItem(null);
+              setSheetOpen(true);
+            },
+            icon: <Plus className="size-4" />,
+          },
+        ]}
+      />
+
+      <StatsCards stats={stats} />
+
+      <SearchBar
+        searchQuery={search}
+        onSearchChange={(value) => {
+          setSearch(value);
+          setPage(1);
+        }}
+        onSearch={() => setPage(1)}
+        placeholder={t('filters.searchPlaceholder')}
+      />
+
+      <div className="rounded-md border border-dashed bg-muted/30 px-4 py-3 text-sm text-muted-foreground">
+        {t('messages.localMode')}
+      </div>
+
+      <div className="overflow-x-auto rounded-md border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>{t('table.columns.contract')}</TableHead>
+              <TableHead>{t('table.columns.company')}</TableHead>
+              <TableHead>{t('table.columns.seat')}</TableHead>
+              <TableHead>{t('table.columns.assignedTo')}</TableHead>
+              <TableHead>{t('table.columns.status')}</TableHead>
+              <TableHead>{t('table.columns.allocatedAt')}</TableHead>
+              <TableHead className="w-[120px] text-right">
+                {t('table.columns.actions')}
+              </TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {pagedItems.map((item) => (
+              <TableRow key={item.id}>
+                <TableCell>
+                  <div className="font-medium">{item.contract_name}</div>
+                  <div className="text-xs text-muted-foreground">
+                    {item.product_name}
+                  </div>
+                </TableCell>
+                <TableCell>{item.company_name}</TableCell>
+                <TableCell>{item.seat_label}</TableCell>
+                <TableCell>
+                  <div className="font-medium">{item.assigned_to}</div>
+                  <div className="text-xs text-muted-foreground">
+                    {item.assigned_email}
+                  </div>
+                </TableCell>
+                <TableCell>
+                  <Badge className={badgeClass(item.status)}>
+                    {t(`status.${item.status}`)}
+                  </Badge>
+                </TableCell>
+                <TableCell>{formatDate(item.allocated_at)}</TableCell>
+                <TableCell>
+                  <div className="flex justify-end gap-2">
+                    <Button
+                      variant="outline"
+                      size="icon"
+                      onClick={() => {
+                        setEditingItem(item);
+                        setSheetOpen(true);
+                      }}
+                    >
+                      <Pencil className="size-4" />
+                    </Button>
+                    <Button
+                      variant="destructive"
+                      size="icon"
+                      disabled={item.status === 'released'}
+                      onClick={() => setReleaseId(item.id)}
+                    >
+                      <Trash2 className="size-4" />
+                    </Button>
+                  </div>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+
+      {pagedItems.length === 0 && (
+        <EmptyState
+          icon={<KeyRound className="h-12 w-12" />}
+          title={t('table.empty')}
+          description={t('empty.description')}
+          actionLabel={t('empty.action')}
+          onAction={() => {
+            setSearch('');
+            setPage(1);
+          }}
+        />
+      )}
+
+      <PaginationFooter
+        currentPage={currentPage}
+        pageSize={pageSize}
+        totalItems={totalItems}
+        onPageChange={setPage}
+        onPageSizeChange={(nextSize) => {
+          setPageSize(nextSize);
+          setPage(1);
+        }}
+      />
+
+      <Sheet
+        open={sheetOpen}
+        onOpenChange={(open) => {
+          setSheetOpen(open);
+          if (!open) {
+            setEditingItem(null);
+          }
+        }}
+      >
+        <SheetContent className="w-full sm:max-w-xl">
+          <SheetHeader>
+            <SheetTitle>
+              {editingItem ? t('sheet.editTitle') : t('sheet.createTitle')}
+            </SheetTitle>
+            <SheetDescription>{t('sheet.description')}</SheetDescription>
+          </SheetHeader>
+
+          <Form {...form}>
+            <form
+              className="space-y-4 p-4"
+              onSubmit={form.handleSubmit(handleSubmit)}
+            >
+              <div className="grid gap-4 md:grid-cols-2">
+                <FormField
+                  control={form.control}
+                  name="contract_id"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('form.contract')}</FormLabel>
+                      <Select
+                        value={String(field.value)}
+                        onValueChange={(value) => {
+                          const contractId = Number(value);
+                          field.onChange(contractId);
+                          const nextSeat = CONTRACT_SEATS.find(
+                            (item) => item.contract_id === contractId
+                          );
+                          form.setValue('seat_id', nextSeat?.id ?? 0, {
+                            shouldValidate: true,
+                          });
+                        }}
+                      >
+                        <FormControl>
+                          <SelectTrigger className="w-full">
+                            <SelectValue
+                              placeholder={t('form.contractPlaceholder')}
+                            />
+                          </SelectTrigger>
+                        </FormControl>
+                        <SelectContent>
+                          {CONTRACTS.map((contract) => (
+                            <SelectItem
+                              key={contract.id}
+                              value={String(contract.id)}
+                            >
+                              {contract.name}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="seat_id"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('form.seat')}</FormLabel>
+                      <Select
+                        value={String(field.value)}
+                        onValueChange={(value) => field.onChange(Number(value))}
+                      >
+                        <FormControl>
+                          <SelectTrigger className="w-full">
+                            <SelectValue
+                              placeholder={t('form.seatPlaceholder')}
+                            />
+                          </SelectTrigger>
+                        </FormControl>
+                        <SelectContent>
+                          {seatOptions.map((seat) => (
+                            <SelectItem key={seat.id} value={String(seat.id)}>
+                              {seat.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+
+              <div className="grid gap-4 md:grid-cols-2">
+                <FormField
+                  control={form.control}
+                  name="assigned_to"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('form.assignedTo')}</FormLabel>
+                      <FormControl>
+                        <Input
+                          {...field}
+                          placeholder={t('form.assignedToPlaceholder')}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="assigned_email"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('form.assignedEmail')}</FormLabel>
+                      <FormControl>
+                        <Input
+                          {...field}
+                          type="email"
+                          placeholder={t('form.assignedEmailPlaceholder')}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+
+              <div className="grid gap-4 md:grid-cols-2">
+                <FormField
+                  control={form.control}
+                  name="status"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('form.status')}</FormLabel>
+                      <Select
+                        value={field.value}
+                        onValueChange={field.onChange}
+                      >
+                        <FormControl>
+                          <SelectTrigger className="w-full">
+                            <SelectValue />
+                          </SelectTrigger>
+                        </FormControl>
+                        <SelectContent>
+                          <SelectItem value="active">
+                            {t('status.active')}
+                          </SelectItem>
+                          <SelectItem value="pending">
+                            {t('status.pending')}
+                          </SelectItem>
+                          <SelectItem value="released">
+                            {t('status.released')}
+                          </SelectItem>
+                        </SelectContent>
+                      </Select>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="allocated_at"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('form.allocatedAt')}</FormLabel>
+                      <FormControl>
+                        <Input type="date" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+
+              <FormField
+                control={form.control}
+                name="notes"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('form.notes')}</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        {...field}
+                        value={field.value ?? ''}
+                        placeholder={t('form.notesPlaceholder')}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <Button className="w-full" type="submit">
+                {t('actions.save')}
+              </Button>
+            </form>
+          </Form>
+        </SheetContent>
+      </Sheet>
+
+      <AlertDialog
+        open={releaseId !== null}
+        onOpenChange={(open) => !open && setReleaseId(null)}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t('deleteDialog.title')}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {t('deleteDialog.description')}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t('deleteDialog.cancel')}</AlertDialogCancel>
+            <AlertDialogAction onClick={() => void handleRelease()}>
+              {t('deleteDialog.confirm')}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </Page>
+  );
+}