@hed-hog/finance 0.0.235 → 0.0.237

package/hedhog/frontend/app/administration/period-close/page.tsx.ejs

@@ -0,0 +1,502 @@
+'use client';
+
+import { Page, PageHeader, PaginationFooter } 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,
+  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 { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { CalendarCheck2, Plus, Search, X } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+type PeriodClose = {
+  id: string;
+  periodStart: string | null;
+  periodEnd: string | null;
+  status: 'open' | 'closed';
+  closedAt: string | null;
+  closedByUserId: string | null;
+  closedByName: string;
+  closedByEmail: string;
+  notes: string;
+  createdAt: string | null;
+};
+
+type PaginatedPeriodClose = {
+  total: number;
+  lastPage: number;
+  page: number;
+  pageSize: number;
+  data: PeriodClose[];
+};
+
+type ClosePeriodFormValues = {
+  periodStart: string;
+  periodEnd: string;
+  notes?: string;
+  status: 'closed' | 'open';
+};
+
+function ClosePeriodSheet({
+  open,
+  onOpenChange,
+  onCreated,
+  t,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onCreated: () => Promise<any> | void;
+  t: ReturnType<typeof useTranslations>;
+}) {
+  const { request, showToastHandler } = useApp();
+
+  const closePeriodSchema = z.object({
+    periodStart: z.string().min(1, t('sheet.validation.startRequired')),
+    periodEnd: z.string().min(1, t('sheet.validation.endRequired')),
+    notes: z.string().optional(),
+    status: z.enum(['closed', 'open']).default('closed'),
+  });
+
+  const form = useForm<ClosePeriodFormValues>({
+    resolver: zodResolver(closePeriodSchema),
+    defaultValues: {
+      periodStart: '',
+      periodEnd: '',
+      notes: '',
+      status: 'closed',
+    },
+  });
+
+  const onSubmit = async (values: ClosePeriodFormValues) => {
+    try {
+      await request({
+        url: '/finance/period-close',
+        method: 'POST',
+        data: {
+          period_start: values.periodStart,
+          period_end: values.periodEnd,
+          notes: values.notes?.trim() || undefined,
+          status: values.status,
+        },
+      });
+
+      await onCreated();
+      form.reset();
+      onOpenChange(false);
+      showToastHandler?.('success', t('messages.createSuccess'));
+    } catch {
+      showToastHandler?.('error', t('messages.createError'));
+    }
+  };
+
+  return (
+    <Sheet
+      open={open}
+      onOpenChange={(nextOpen) => {
+        onOpenChange(nextOpen);
+        if (!nextOpen) {
+          form.reset();
+        }
+      }}
+    >
+      <SheetContent className="w-full sm:max-w-lg">
+        <SheetHeader>
+          <SheetTitle>{t('sheet.title')}</SheetTitle>
+          <SheetDescription>{t('sheet.description')}</SheetDescription>
+        </SheetHeader>
+
+        <Form {...form}>
+          <form
+            className="space-y-4 p-4"
+            onSubmit={form.handleSubmit(onSubmit)}
+          >
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+              <FormField
+                control={form.control}
+                name="periodStart"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('sheet.fields.startDate')}</FormLabel>
+                    <FormControl>
+                      <Input type="date" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="periodEnd"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('sheet.fields.endDate')}</FormLabel>
+                    <FormControl>
+                      <Input type="date" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <FormField
+              control={form.control}
+              name="status"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('sheet.fields.status')}</FormLabel>
+                  <Select value={field.value} onValueChange={field.onChange}>
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue placeholder={t('common.select')} />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      <SelectItem value="closed">
+                        {t('status.closed')}
+                      </SelectItem>
+                      <SelectItem value="open">{t('status.open')}</SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="notes"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('sheet.fields.notes')}</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder={t('sheet.fields.notesPlaceholder')}
+                      {...field}
+                      value={field.value || ''}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="flex justify-end gap-2">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => onOpenChange(false)}
+              >
+                {t('common.cancel')}
+              </Button>
+              <Button type="submit" disabled={form.formState.isSubmitting}>
+                {t('common.save')}
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+export default function PeriodClosePage() {
+  const t = useTranslations('finance.AdminPeriodClosePage');
+  const { request } = useApp();
+
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const [search, setSearch] = useState('');
+  const [status, setStatus] = useState('all');
+  const [user, setUser] = useState('');
+  const [from, setFrom] = useState('');
+  const [to, setTo] = useState('');
+
+  const { data, isLoading, refetch } = useQuery<PaginatedPeriodClose>({
+    queryKey: [
+      'finance-period-close',
+      page,
+      pageSize,
+      search,
+      status,
+      user,
+      from,
+      to,
+    ],
+    queryFn: async () => {
+      const params = new URLSearchParams();
+      params.set('page', String(page));
+      params.set('pageSize', String(pageSize));
+      params.set('sortField', 'period_start');
+      params.set('sortOrder', 'desc');
+
+      if (search.trim()) params.set('search', search.trim());
+      if (status !== 'all') params.set('status', status);
+      if (user.trim()) params.set('user', user.trim());
+      if (from) params.set('from', from);
+      if (to) params.set('to', to);
+
+      const response = await request({
+        url: `/finance/period-close?${params.toString()}`,
+        method: 'GET',
+      });
+
+      return (response.data || {
+        total: 0,
+        lastPage: 1,
+        page: 1,
+        pageSize,
+        data: [],
+      }) as PaginatedPeriodClose;
+    },
+    placeholderData: (old) => old,
+  });
+
+  const rows = data?.data || [];
+
+  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') },
+        ]}
+      />
+
+      <Card>
+        <CardHeader className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+          <div>
+            <CardTitle className="flex items-center gap-2">
+              <CalendarCheck2 className="h-5 w-5" />
+              {t('card.title')}
+            </CardTitle>
+            <CardDescription>{t('card.description')}</CardDescription>
+          </div>
+          <Button className="gap-2" onClick={() => setSheetOpen(true)}>
+            <Plus className="h-4 w-4" />
+            {t('actions.new')}
+          </Button>
+        </CardHeader>
+
+        <CardContent className="space-y-4">
+          <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-4">
+            <div className="relative lg:col-span-2">
+              <Search className="pointer-events-none absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+              <Input
+                placeholder={t('filters.searchPlaceholder')}
+                value={search}
+                onChange={(event) => {
+                  setSearch(event.target.value);
+                  setPage(1);
+                }}
+                className="pl-8"
+              />
+            </div>
+
+            <Select
+              value={status}
+              onValueChange={(value) => {
+                setStatus(value);
+                setPage(1);
+              }}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder={t('filters.status')} />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">{t('filters.allStatus')}</SelectItem>
+                <SelectItem value="closed">{t('status.closed')}</SelectItem>
+                <SelectItem value="open">{t('status.open')}</SelectItem>
+              </SelectContent>
+            </Select>
+
+            <Input
+              placeholder={t('filters.userPlaceholder')}
+              value={user}
+              onChange={(event) => {
+                setUser(event.target.value);
+                setPage(1);
+              }}
+            />
+
+            <Input
+              type="date"
+              value={from}
+              onChange={(event) => {
+                setFrom(event.target.value);
+                setPage(1);
+              }}
+            />
+
+            <Input
+              type="date"
+              value={to}
+              onChange={(event) => {
+                setTo(event.target.value);
+                setPage(1);
+              }}
+            />
+
+            <Button
+              variant="outline"
+              className="gap-2"
+              onClick={() => {
+                setSearch('');
+                setStatus('all');
+                setUser('');
+                setFrom('');
+                setTo('');
+                setPage(1);
+                refetch();
+              }}
+            >
+              <X className="h-4 w-4" />
+              {t('filters.clear')}
+            </Button>
+          </div>
+
+          <div className="rounded-md border">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>{t('table.headers.start')}</TableHead>
+                  <TableHead>{t('table.headers.end')}</TableHead>
+                  <TableHead>{t('table.headers.status')}</TableHead>
+                  <TableHead>{t('table.headers.closedBy')}</TableHead>
+                  <TableHead>{t('table.headers.closedAt')}</TableHead>
+                  <TableHead>{t('table.headers.notes')}</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {isLoading ? (
+                  <TableRow>
+                    <TableCell colSpan={6} className="h-24 text-center">
+                      {t('table.loading')}
+                    </TableCell>
+                  </TableRow>
+                ) : rows.length === 0 ? (
+                  <TableRow>
+                    <TableCell colSpan={6} className="h-24 text-center">
+                      {t('table.empty')}
+                    </TableCell>
+                  </TableRow>
+                ) : (
+                  rows.map((row) => (
+                    <TableRow key={row.id}>
+                      <TableCell>
+                        {row.periodStart
+                          ? new Date(row.periodStart).toLocaleDateString(
+                              'pt-BR'
+                            )
+                          : '-'}
+                      </TableCell>
+                      <TableCell>
+                        {row.periodEnd
+                          ? new Date(row.periodEnd).toLocaleDateString('pt-BR')
+                          : '-'}
+                      </TableCell>
+                      <TableCell>
+                        <Badge
+                          variant={
+                            row.status === 'closed' ? 'default' : 'secondary'
+                          }
+                        >
+                          {row.status === 'closed'
+                            ? t('status.closed')
+                            : t('status.open')}
+                        </Badge>
+                      </TableCell>
+                      <TableCell>
+                        <div className="flex flex-col">
+                          <span>{row.closedByName || '-'}</span>
+                          <span className="text-xs text-muted-foreground">
+                            {row.closedByEmail || row.closedByUserId || '-'}
+                          </span>
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        {row.closedAt
+                          ? new Date(row.closedAt).toLocaleString('pt-BR')
+                          : '-'}
+                      </TableCell>
+                      <TableCell className="max-w-[320px] truncate">
+                        {row.notes || '-'}
+                      </TableCell>
+                    </TableRow>
+                  ))
+                )}
+              </TableBody>
+            </Table>
+          </div>
+
+          <PaginationFooter
+            currentPage={data?.page || page}
+            pageSize={data?.pageSize || pageSize}
+            totalItems={data?.total || 0}
+            onPageChange={(newPage) => setPage(newPage)}
+            onPageSizeChange={(newPageSize) => {
+              setPageSize(newPageSize);
+              setPage(1);
+            }}
+            pageSizeOptions={[10, 20, 30, 40, 50]}
+          />
+        </CardContent>
+      </Card>
+
+      <ClosePeriodSheet
+        open={sheetOpen}
+        onOpenChange={setSheetOpen}
+        onCreated={refetch}
+        t={t}
+      />
+    </Page>
+  );
+}