@hed-hog/finance 0.0.235 → 0.0.237

package/hedhog/frontend/app/administration/cost-centers/page.tsx.ejs

@@ -0,0 +1,378 @@
+'use client';
+
+import { Page, PageHeader } 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 {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Building2, Pencil, Plus, Trash2 } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+type CostCenterFormValues = {
+  nome: string;
+};
+
+type CostCenter = {
+  id: string;
+  codigo: string;
+  nome: string;
+  status: 'active' | 'inactive';
+  ativo: boolean;
+};
+
+function CentroCustoSheet({
+  open,
+  onOpenChange,
+  onSaved,
+  editingCostCenter,
+  onEditingChange,
+  t,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSaved: () => Promise<any> | void;
+  editingCostCenter: CostCenter | null;
+  onEditingChange: (costCenter: CostCenter | null) => void;
+  t: ReturnType<typeof useTranslations>;
+}) {
+  const { request, showToastHandler } = useApp();
+
+  const costCenterFormSchema = z.object({
+    nome: z.string().trim().min(1, t('sheet.validation.nameRequired')),
+  });
+
+  const form = useForm<CostCenterFormValues>({
+    resolver: zodResolver(costCenterFormSchema),
+    defaultValues: {
+      nome: '',
+    },
+  });
+
+  useEffect(() => {
+    if (!open) {
+      form.reset({ nome: '' });
+      return;
+    }
+
+    if (editingCostCenter) {
+      form.reset({ nome: editingCostCenter.nome });
+      return;
+    }
+
+    form.reset({ nome: '' });
+  }, [open, editingCostCenter, form]);
+
+  const handleSubmit = async (values: CostCenterFormValues) => {
+    try {
+      if (editingCostCenter) {
+        await request({
+          url: `/finance/cost-centers/${editingCostCenter.id}`,
+          method: 'PATCH',
+          data: {
+            name: values.nome,
+          },
+        });
+      } else {
+        await request({
+          url: '/finance/cost-centers',
+          method: 'POST',
+          data: {
+            name: values.nome,
+          },
+        });
+      }
+
+      await onSaved();
+      form.reset({ nome: '' });
+      onEditingChange(null);
+      onOpenChange(false);
+      showToastHandler?.(
+        'success',
+        editingCostCenter
+          ? t('messages.updateSuccess')
+          : t('messages.createSuccess')
+      );
+    } catch {
+      showToastHandler?.(
+        'error',
+        editingCostCenter
+          ? t('messages.updateError')
+          : t('messages.createError')
+      );
+    }
+  };
+
+  const handleOpenChange = (nextOpen: boolean) => {
+    onOpenChange(nextOpen);
+
+    if (!nextOpen) {
+      form.reset({ nome: '' });
+      onEditingChange(null);
+    }
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={handleOpenChange}>
+      <SheetContent className="w-full sm:max-w-lg">
+        <SheetHeader>
+          <SheetTitle>
+            {editingCostCenter ? t('sheet.editTitle') : t('sheet.newTitle')}
+          </SheetTitle>
+          <SheetDescription>
+            {editingCostCenter
+              ? t('sheet.editDescription')
+              : t('sheet.newDescription')}
+          </SheetDescription>
+        </SheetHeader>
+
+        <Form {...form}>
+          <form
+            className="space-y-4 p-4"
+            onSubmit={form.handleSubmit(handleSubmit)}
+          >
+            <FormField
+              control={form.control}
+              name="nome"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('sheet.fields.name')}</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder={t('sheet.fields.namePlaceholder')}
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="flex justify-end gap-2">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => handleOpenChange(false)}
+              >
+                {t('common.cancel')}
+              </Button>
+              <Button type="submit" disabled={form.formState.isSubmitting}>
+                {t('common.save')}
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+export default function CostCentersPage() {
+  const t = useTranslations('finance.AdminCostCentersPage');
+  const { request, showToastHandler } = useApp();
+
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const [editingCostCenter, setEditingCostCenter] = useState<CostCenter | null>(
+    null
+  );
+  const [costCenterIdToDelete, setCostCenterIdToDelete] = useState<
+    string | null
+  >(null);
+
+  const { data: costCenters, refetch } = useQuery<CostCenter[]>({
+    queryKey: ['finance-cost-centers'],
+    queryFn: async () => {
+      const response = await request({
+        url: '/finance/cost-centers',
+        method: 'GET',
+      });
+
+      return (response.data || []) as CostCenter[];
+    },
+    placeholderData: [],
+  });
+
+  const handleDelete = async () => {
+    if (!costCenterIdToDelete) {
+      return;
+    }
+
+    try {
+      await request({
+        url: `/finance/cost-centers/${costCenterIdToDelete}`,
+        method: 'DELETE',
+      });
+
+      await refetch();
+      setCostCenterIdToDelete(null);
+      showToastHandler?.('success', t('messages.deleteSuccess'));
+    } catch {
+      showToastHandler?.('error', t('messages.deleteError'));
+    }
+  };
+
+  const centers = costCenters || [];
+
+  return (
+    <Page>
+      <PageHeader
+        title={t('header.title')}
+        description={t('header.description')}
+        breadcrumbs={[
+          { label: t('breadcrumbs.finance'), href: '/finance' },
+          {
+            label: t('breadcrumbs.administration'),
+            href: '/finance/administration',
+          },
+          { label: t('breadcrumbs.current') },
+        ]}
+      />
+
+      <div className="grid gap-4">
+        <Card>
+          <CardHeader className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+            <div>
+              <CardTitle>{t('card.title')}</CardTitle>
+              <CardDescription>{t('card.description')}</CardDescription>
+            </div>
+            <Button
+              onClick={() => {
+                setEditingCostCenter(null);
+                setSheetOpen(true);
+              }}
+              className="gap-2"
+            >
+              <Plus className="h-4 w-4" />
+              {t('actions.newCostCenter')}
+            </Button>
+          </CardHeader>
+
+          <CardContent>
+            {centers.length === 0 ? (
+              <div className="rounded-md border border-dashed p-8 text-center text-sm text-muted-foreground">
+                {t('table.empty')}
+              </div>
+            ) : (
+              <div className="grid gap-3">
+                {centers.map((costCenter) => (
+                  <div
+                    key={costCenter.id}
+                    className="flex flex-col gap-3 rounded-md border p-4 sm:flex-row sm:items-center sm:justify-between"
+                  >
+                    <div className="flex items-start gap-3">
+                      <div className="rounded-md bg-muted p-2">
+                        <Building2 className="h-4 w-4" />
+                      </div>
+                      <div>
+                        <p className="text-sm font-medium">{costCenter.nome}</p>
+                        <p className="text-xs text-muted-foreground">
+                          {t('table.code', { code: costCenter.codigo })}
+                        </p>
+                      </div>
+                    </div>
+
+                    <div className="flex items-center gap-2">
+                      <Badge
+                        variant={costCenter.ativo ? 'default' : 'secondary'}
+                      >
+                        {costCenter.ativo
+                          ? t('table.status.active')
+                          : t('table.status.inactive')}
+                      </Badge>
+                      <Button
+                        variant="outline"
+                        size="icon"
+                        onClick={() => {
+                          setEditingCostCenter(costCenter);
+                          setSheetOpen(true);
+                        }}
+                      >
+                        <Pencil className="h-4 w-4" />
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="icon"
+                        onClick={() => setCostCenterIdToDelete(costCenter.id)}
+                        disabled={!costCenter.ativo}
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+
+      <CentroCustoSheet
+        open={sheetOpen}
+        onOpenChange={setSheetOpen}
+        onSaved={refetch}
+        editingCostCenter={editingCostCenter}
+        onEditingChange={setEditingCostCenter}
+        t={t}
+      />
+
+      <AlertDialog
+        open={!!costCenterIdToDelete}
+        onOpenChange={(open) => {
+          if (!open) {
+            setCostCenterIdToDelete(null);
+          }
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t('deleteDialog.title')}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {t('deleteDialog.description')}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t('common.cancel')}</AlertDialogCancel>
+            <AlertDialogAction onClick={handleDelete}>
+              {t('deleteDialog.confirm')}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </Page>
+  );
+}