@hed-hog/finance 0.0.300 → 0.0.301

package/hedhog/frontend/app/cash-and-banks/bank-reconciliation/page.tsx.ejs

@@ -1,5 +1,6 @@
 'use client';
 
+import { FinancePageSection } from '@/app/(app)/(libraries)/finance/_components/finance-layout';
 import { Page, PageHeader } from '@/components/entity-list';
 import {
   AlertDialog,
@@ -13,13 +14,8 @@ import {
 } 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 { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
 import { Checkbox } from '@/components/ui/checkbox';
 import {
   Form,
@@ -32,7 +28,6 @@ import {
 import { Input } from '@/components/ui/input';
 import { InputMoney } from '@/components/ui/input-money';
 import { Money } from '@/components/ui/money';
-import { Progress } from '@/components/ui/progress';
 import {
   Select,
   SelectContent,
@@ -508,6 +503,49 @@ export default function ConciliacaoPage() {
     totalExtratoConta > 0
       ? Math.round((totalConciliado / totalExtratoConta) * 100)
       : 0;
+  const summaryCards = [
+    {
+      key: 'reconciled',
+      title: t('cards.reconciled'),
+      value: `${percentualConciliado}%`,
+      description: `${totalConciliado}/${totalExtratoConta}`,
+      icon: Check,
+      layout: 'compact' as const,
+      iconContainerClassName: 'bg-green-500/10 text-green-700',
+      accentClassName: 'from-green-500/20 via-emerald-500/10 to-transparent',
+    },
+    {
+      key: 'pending',
+      title: t('cards.pending'),
+      value: extratosFiltered.length,
+      description: t('cards.transactions'),
+      icon: RefreshCw,
+      layout: 'compact' as const,
+    },
+    {
+      key: 'discrepancies',
+      title: t('cards.discrepancies'),
+      value: reconciliationSummary?.discrepancies || 0,
+      description: t('cards.toResolve'),
+      icon: DollarSign,
+      layout: 'compact' as const,
+      valueClassName: 'text-orange-600',
+      iconContainerClassName: 'bg-orange-500/10 text-orange-700',
+      accentClassName: 'from-orange-500/20 via-amber-500/10 to-transparent',
+    },
+    {
+      key: 'difference',
+      title: t('cards.difference'),
+      value: <Money value={reconciliationSummary?.difference || 0} />,
+      description: t('cards.notReconciled'),
+      icon:
+        reconciliationSummary?.difference &&
+        reconciliationSummary.difference < 0
+          ? Trash2
+          : Link2,
+      layout: 'compact' as const,
+    },
+  ];
 
   const handleRefreshData = async () => {
     await Promise.all([
@@ -591,7 +629,7 @@ export default function ConciliacaoPage() {
             router.replace(`${pathname}?${params.toString()}`);
           }}
         >
-          <SelectTrigger className="w-full sm:w-[280px]">
+          <SelectTrigger className="w-full sm:w-70">
             <SelectValue placeholder={t('filters.selectAccount')} />
           </SelectTrigger>
           <SelectContent>
@@ -619,100 +657,95 @@ export default function ConciliacaoPage() {
         </div>
       </div>
 
-      <div className="grid gap-4 md:grid-cols-4">
-        <Card>
-          <CardHeader className="pb-2">
-            <CardTitle className="text-sm font-medium">
-              {t('cards.reconciled')}
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">{percentualConciliado}%</div>
-            <Progress value={percentualConciliado} className="mt-2" />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader className="pb-2">
-            <CardTitle className="text-sm font-medium">
-              {t('cards.pending')}
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">{extratosFiltered.length}</div>
-            <p className="text-xs text-muted-foreground">
-              {t('cards.transactions')}
-            </p>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader className="pb-2">
-            <CardTitle className="text-sm font-medium">
-              {t('cards.discrepancies')}
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold text-orange-600">
-              {reconciliationSummary?.discrepancies || 0}
-            </div>
-            <p className="text-xs text-muted-foreground">
-              {t('cards.toResolve')}
-            </p>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader className="pb-2">
-            <CardTitle className="text-sm font-medium">
-              {t('cards.difference')}
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">
-              <Money value={reconciliationSummary?.difference || 0} />
-            </div>
-            <p className="text-xs text-muted-foreground">
-              {t('cards.notReconciled')}
-            </p>
-          </CardContent>
-        </Card>
-      </div>
+      <KpiCardsGrid items={summaryCards} columns={4} />
 
       <div className="grid gap-6 lg:grid-cols-2">
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
+        <FinancePageSection
+          title={
+            <span className="flex items-center gap-2">
               <RefreshCw className="h-4 w-4" />
               {t('statement.title')}
-            </CardTitle>
-            <CardDescription>{t('statement.description')}</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-2">
-              {extratosFiltered.length > 0 ? (
-                extratosFiltered.map((extrato) => (
-                  <div
-                    key={extrato.id}
-                    className={`flex cursor-pointer items-center gap-3 rounded-lg border p-3 transition-colors ${
-                      selectedExtrato === extrato.id
-                        ? 'border-primary bg-primary/5'
-                        : 'hover:bg-muted/50'
-                    }`}
-                    onClick={() =>
+            </span>
+          }
+          description={t('statement.description')}
+          contentClassName="p-4 sm:p-5"
+        >
+          <div className="space-y-2">
+            {extratosFiltered.length > 0 ? (
+              extratosFiltered.map((extrato) => (
+                <div
+                  key={extrato.id}
+                  className={`flex cursor-pointer items-center gap-3 rounded-lg border p-3 transition-colors ${
+                    selectedExtrato === extrato.id
+                      ? 'border-primary bg-primary/5'
+                      : 'hover:bg-muted/50'
+                  }`}
+                  onClick={() =>
+                    setSelectedExtrato(
+                      selectedExtrato === extrato.id ? null : extrato.id
+                    )
+                  }
+                >
+                  <Checkbox
+                    checked={selectedExtrato === extrato.id}
+                    onCheckedChange={() =>
                       setSelectedExtrato(
                         selectedExtrato === extrato.id ? null : extrato.id
                       )
                     }
+                  />
+                  <div className="flex-1">
+                    <div className="flex items-center justify-between">
+                      <span className="text-sm font-medium">
+                        {extrato.descricao}
+                      </span>
+                      <span
+                        className={`font-semibold ${
+                          extrato.tipo === 'entrada'
+                            ? 'text-green-600'
+                            : 'text-red-600'
+                        }`}
+                      >
+                        {extrato.tipo === 'saida' && '-'}
+                        {formatarMoeda(Math.abs(extrato.valor))}
+                      </span>
+                    </div>
+                    <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                      <span>{formatarData(extrato.data)}</span>
+                      <StatusBadge
+                        status={extrato.statusConciliacao}
+                        type="conciliacao"
+                      />
+                    </div>
+                  </div>
+                </div>
+              ))
+            ) : (
+              <div className="flex flex-col items-center justify-center py-8 text-center">
+                <Check className="h-12 w-12 text-green-500" />
+                <p className="mt-2 font-medium">{t('statement.emptyTitle')}</p>
+                <p className="text-sm text-muted-foreground">
+                  {t('statement.emptyDescription')}
+                </p>
+              </div>
+            )}
+
+            {extratosConciliadosFiltered.length > 0 ? (
+              <>
+                <div className="mt-6 border-t pt-4">
+                  <p className="text-sm font-medium">
+                    {t('statement.reconciledTitle')}
+                  </p>
+                  <p className="text-xs text-muted-foreground">
+                    {t('statement.reconciledDescription')}
+                  </p>
+                </div>
+
+                {extratosConciliadosFiltered.map((extrato) => (
+                  <div
+                    key={`reconciled-${extrato.id}`}
+                    className="flex items-center gap-3 rounded-lg border p-3"
                   >
-                    <Checkbox
-                      checked={selectedExtrato === extrato.id}
-                      onCheckedChange={() =>
-                        setSelectedExtrato(
-                          selectedExtrato === extrato.id ? null : extrato.id
-                        )
-                      }
-                    />
                     <div className="flex-1">
                       <div className="flex items-center justify-between">
                         <span className="text-sm font-medium">
@@ -737,149 +770,94 @@ export default function ConciliacaoPage() {
                         />
                       </div>
                     </div>
-                  </div>
-                ))
-              ) : (
-                <div className="flex flex-col items-center justify-center py-8 text-center">
-                  <Check className="h-12 w-12 text-green-500" />
-                  <p className="mt-2 font-medium">
-                    {t('statement.emptyTitle')}
-                  </p>
-                  <p className="text-sm text-muted-foreground">
-                    {t('statement.emptyDescription')}
-                  </p>
-                </div>
-              )}
-
-              {extratosConciliadosFiltered.length > 0 ? (
-                <>
-                  <div className="mt-6 border-t pt-4">
-                    <p className="text-sm font-medium">
-                      {t('statement.reconciledTitle')}
-                    </p>
-                    <p className="text-xs text-muted-foreground">
-                      {t('statement.reconciledDescription')}
-                    </p>
-                  </div>
-
-                  {extratosConciliadosFiltered.map((extrato) => (
-                    <div
-                      key={`reconciled-${extrato.id}`}
-                      className="flex items-center gap-3 rounded-lg border p-3"
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      onClick={() =>
+                        setReconciliationToUndo(
+                          extrato.reconciliationId || null
+                        )
+                      }
+                      disabled={!extrato.reconciliationId}
                     >
-                      <div className="flex-1">
-                        <div className="flex items-center justify-between">
-                          <span className="text-sm font-medium">
-                            {extrato.descricao}
-                          </span>
-                          <span
-                            className={`font-semibold ${
-                              extrato.tipo === 'entrada'
-                                ? 'text-green-600'
-                                : 'text-red-600'
-                            }`}
-                          >
-                            {extrato.tipo === 'saida' && '-'}
-                            {formatarMoeda(Math.abs(extrato.valor))}
-                          </span>
-                        </div>
-                        <div className="flex items-center gap-2 text-xs text-muted-foreground">
-                          <span>{formatarData(extrato.data)}</span>
-                          <StatusBadge
-                            status={extrato.statusConciliacao}
-                            type="conciliacao"
-                          />
-                        </div>
-                      </div>
-                      <Button
-                        type="button"
-                        variant="outline"
-                        size="sm"
-                        onClick={() =>
-                          setReconciliationToUndo(
-                            extrato.reconciliationId || null
-                          )
-                        }
-                        disabled={!extrato.reconciliationId}
-                      >
-                        <Trash2 className="mr-2 h-4 w-4" />
-                        {t('unreconcile.action')}
-                      </Button>
-                    </div>
-                  ))}
-                </>
-              ) : null}
-            </div>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
+                      <Trash2 className="mr-2 h-4 w-4" />
+                      {t('unreconcile.action')}
+                    </Button>
+                  </div>
+                ))}
+              </>
+            ) : null}
+          </div>
+        </FinancePageSection>
+
+        <FinancePageSection
+          title={
+            <span className="flex items-center gap-2">
               <DollarSign className="h-4 w-4" />
               {t('openTitles.title')}
-            </CardTitle>
-            <CardDescription>{t('openTitles.description')}</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="max-h-[400px] space-y-2 overflow-y-auto">
-              {titulosCompativeis.map((titulo) => (
-                <div
-                  key={titulo.id}
-                  className={`flex cursor-pointer items-center gap-3 rounded-lg border p-3 transition-colors ${
-                    selectedTitulo === titulo.id
-                      ? 'border-primary bg-primary/5'
-                      : 'hover:bg-muted/50'
-                  }`}
-                  onClick={() =>
+            </span>
+          }
+          description={t('openTitles.description')}
+          contentClassName="p-4 sm:p-5"
+        >
+          <div className="max-h-100 space-y-2 overflow-y-auto">
+            {titulosCompativeis.map((titulo) => (
+              <div
+                key={titulo.id}
+                className={`flex cursor-pointer items-center gap-3 rounded-lg border p-3 transition-colors ${
+                  selectedTitulo === titulo.id
+                    ? 'border-primary bg-primary/5'
+                    : 'hover:bg-muted/50'
+                }`}
+                onClick={() =>
+                  setSelectedTitulo(
+                    selectedTitulo === titulo.id ? null : titulo.id
+                  )
+                }
+              >
+                <Checkbox
+                  checked={selectedTitulo === titulo.id}
+                  onCheckedChange={() =>
                     setSelectedTitulo(
                       selectedTitulo === titulo.id ? null : titulo.id
                     )
                   }
-                >
-                  <Checkbox
-                    checked={selectedTitulo === titulo.id}
-                    onCheckedChange={() =>
-                      setSelectedTitulo(
-                        selectedTitulo === titulo.id ? null : titulo.id
-                      )
-                    }
-                  />
-                  <div className="flex-1">
-                    <div className="flex items-center justify-between">
-                      <div className="flex items-center gap-2">
-                        <span className="text-sm font-medium">
-                          {titulo.documento}
-                        </span>
-                        <Badge
-                          variant="outline"
-                          className={
-                            titulo.tipo === 'pagar'
-                              ? 'border-red-200 text-red-700'
-                              : 'border-green-200 text-green-700'
-                          }
-                        >
-                          {titulo.tipo === 'pagar'
-                            ? t('openTitles.pay')
-                            : t('openTitles.receive')}
-                        </Badge>
-                      </div>
-                      <span className="font-semibold">
-                        {formatarMoeda(titulo.valor)}
+                />
+                <div className="flex-1">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <span className="text-sm font-medium">
+                        {titulo.documento}
                       </span>
+                      <Badge
+                        variant="outline"
+                        className={
+                          titulo.tipo === 'pagar'
+                            ? 'border-red-200 text-red-700'
+                            : 'border-green-200 text-green-700'
+                        }
+                      >
+                        {titulo.tipo === 'pagar'
+                          ? t('openTitles.pay')
+                          : t('openTitles.receive')}
+                      </Badge>
                     </div>
-                    <div className="text-xs text-muted-foreground">
-                      {t('openTitles.personDue', {
-                        person: titulo.pessoa,
-                        dueDate: formatarData(titulo.vencimento),
-                      })}
-                    </div>
+                    <span className="font-semibold">
+                      {formatarMoeda(titulo.valor)}
+                    </span>
+                  </div>
+                  <div className="text-xs text-muted-foreground">
+                    {t('openTitles.personDue', {
+                      person: titulo.pessoa,
+                      dueDate: formatarData(titulo.vencimento),
+                    })}
                   </div>
                 </div>
-              ))}
-            </div>
-          </CardContent>
-        </Card>
+              </div>
+            ))}
+          </div>
+        </FinancePageSection>
       </div>
 
       {selectedExtratoItem && selectedTituloItem && (