@hed-hog/finance 0.0.299 → 0.0.301

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

@@ -3,13 +3,6 @@
 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,
@@ -43,7 +36,7 @@ import {
 } 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 { Plus, Search, X } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
@@ -309,187 +302,175 @@ export default function PeriodClosePage() {
           },
           { 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>
+        actions={
           <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>
+        }
+      />
 
+      <div 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.userPlaceholder')}
-              value={user}
+              placeholder={t('filters.searchPlaceholder')}
+              value={search}
               onChange={(event) => {
-                setUser(event.target.value);
+                setSearch(event.target.value);
                 setPage(1);
               }}
+              className="pl-8"
             />
+          </div>
 
-            <Input
-              type="date"
-              value={from}
-              onChange={(event) => {
-                setFrom(event.target.value);
-                setPage(1);
-              }}
-            />
+          <Select
+            value={status}
+            onValueChange={(value) => {
+              setStatus(value);
+              setPage(1);
+            }}
+          >
+            <SelectTrigger className="w-full">
+              <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={to}
-              onChange={(event) => {
-                setTo(event.target.value);
-                setPage(1);
-              }}
-            />
+          <Input
+            type="date"
+            value={from}
+            onChange={(event) => {
+              setFrom(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>
+          <Input
+            type="date"
+            value={to}
+            onChange={(event) => {
+              setTo(event.target.value);
+              setPage(1);
+            }}
+          />
 
-          <div className="rounded-md border">
-            <Table>
-              <TableHeader>
+          <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>
-                  <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>
+                  <TableCell colSpan={6} className="h-24 text-center">
+                    {t('table.loading')}
+                  </TableCell>
                 </TableRow>
-              </TableHeader>
-              <TableBody>
-                {isLoading ? (
-                  <TableRow>
-                    <TableCell colSpan={6} className="h-24 text-center">
-                      {t('table.loading')}
+              ) : 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>
-                  </TableRow>
-                ) : rows.length === 0 ? (
-                  <TableRow>
-                    <TableCell colSpan={6} className="h-24 text-center">
-                      {t('table.empty')}
+                    <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-80 truncate">
+                      {row.notes || '-'}
                     </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>
+                ))
+              )}
+            </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]}
+        />
+      </div>
 
       <ClosePeriodSheet
         open={sheetOpen}