@hed-hog/finance 0.0.275 → 0.0.278

package/hedhog/frontend/app/planning/receivables-calendar/page.tsx.ejs

@@ -1,227 +1,227 @@
-'use client';
-
-import { Page, PageHeader } from '@/components/entity-list';
-import { Badge } from '@/components/ui/badge';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-import { Money } from '@/components/ui/money';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import { Building2, CalendarDays, CreditCard, Smartphone } from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { formatarData } from '../../_lib/formatters';
-import { useFinanceData } from '../../_lib/use-finance-data';
-
-export default function RecebiveisPage() {
-  const t = useTranslations('finance.ReceivablesCalendarPage');
-  const { data } = useFinanceData();
-  const { recebiveis, adquirentes } = data;
-
-  const statusConfig = {
-    confirmado: {
-      label: t('status.confirmado'),
-      className: 'bg-green-100 text-green-700',
-    },
-    pendente: {
-      label: t('status.pendente'),
-      className: 'bg-yellow-100 text-yellow-700',
-    },
-    liquidado: {
-      label: t('status.liquidado'),
-      className: 'bg-blue-100 text-blue-700',
-    },
-  };
-
-  const totalBruto = recebiveis.reduce((acc, r) => acc + r.bruto, 0);
-  const totalTaxas = recebiveis.reduce((acc, r) => acc + r.taxas, 0);
-  const totalLiquido = recebiveis.reduce((acc, r) => acc + r.liquido, 0);
-  const taxasPercentual =
-    totalBruto > 0 ? ((totalTaxas / totalBruto) * 100).toFixed(2) : '0.00';
-
-  return (
-    <Page>
-      <PageHeader
-        title={t('header.title')}
-        description={t('header.description')}
-        breadcrumbs={[
-          { label: t('breadcrumbs.home'), href: '/' },
-          { label: t('breadcrumbs.finance'), href: '/finance' },
-          { label: t('breadcrumbs.current') },
-        ]}
-      />
-
-      <div className="grid gap-4 md:grid-cols-4">
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">
-              {t('cards.totalGross')}
-            </CardTitle>
-            <CalendarDays className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">
-              <Money value={totalBruto} />
-            </div>
-            <p className="text-xs text-muted-foreground">
-              {t('cards.receivablesCount', { count: recebiveis.length })}
-            </p>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">
-              {t('cards.fees')}
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold text-red-600">
-              - <Money value={totalTaxas} />
-            </div>
-            <p className="text-xs text-muted-foreground">
-              {t('cards.percentOfGross', {
-                percent: taxasPercentual,
-              })}
-            </p>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">
-              {t('cards.totalNet')}
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold text-green-600">
-              <Money value={totalLiquido} />
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">
-              {t('cards.confirmed')}
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">
-              {recebiveis.filter((r) => r.status === 'confirmado').length}
-            </div>
-            <p className="text-xs text-muted-foreground">
-              {t('cards.ofTotal', { total: recebiveis.length })}
-            </p>
-          </CardContent>
-        </Card>
-      </div>
-
-      <div className="grid gap-6 lg:grid-cols-3">
-        {adquirentes.map((adquirente) => {
-          const Icon =
-            adquirente.nome === 'PagSeguro'
-              ? Smartphone
-              : adquirente.nome === 'Cielo'
-                ? CreditCard
-                : Building2;
-          return (
-            <Card key={adquirente.nome}>
-              <CardHeader>
-                <div className="flex items-center gap-3">
-                  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-muted">
-                    <Icon className="h-5 w-5" />
-                  </div>
-                  <div>
-                    <CardTitle className="text-base">
-                      {adquirente.nome}
-                    </CardTitle>
-                    <CardDescription>
-                      {t('acquirers.transactions', {
-                        count: adquirente.transacoes,
-                      })}
-                    </CardDescription>
-                  </div>
-                </div>
-              </CardHeader>
-              <CardContent>
-                <div className="text-2xl font-bold">
-                  <Money value={adquirente.total} />
-                </div>
-                <p className="text-xs text-muted-foreground">
-                  {t('acquirers.toReceive')}
-                </p>
-              </CardContent>
-            </Card>
-          );
-        })}
-      </div>
-
-      <Card>
-        <CardHeader>
-          <CardTitle>{t('table.title')}</CardTitle>
-          <CardDescription>{t('table.description')}</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>{t('table.headers.channel')}</TableHead>
-                <TableHead>{t('table.headers.acquirer')}</TableHead>
-                <TableHead>{t('table.headers.expectedDate')}</TableHead>
-                <TableHead className="text-right">
-                  {t('table.headers.gross')}
-                </TableHead>
-                <TableHead className="text-right">
-                  {t('table.headers.fees')}
-                </TableHead>
-                <TableHead className="text-right">
-                  {t('table.headers.net')}
-                </TableHead>
-                <TableHead>{t('table.headers.status')}</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {recebiveis.map((recebivel) => {
-                const status =
-                  statusConfig[recebivel.status as keyof typeof statusConfig];
-                return (
-                  <TableRow key={recebivel.id}>
-                    <TableCell className="font-medium">
-                      {recebivel.canal}
-                    </TableCell>
-                    <TableCell>{recebivel.adquirente}</TableCell>
-                    <TableCell>
-                      {formatarData(recebivel.dataPrevista)}
-                    </TableCell>
-                    <TableCell className="text-right">
-                      <Money value={recebivel.bruto} />
-                    </TableCell>
-                    <TableCell className="text-right text-red-600">
-                      - <Money value={recebivel.taxas} />
-                    </TableCell>
-                    <TableCell className="text-right font-semibold">
-                      <Money value={recebivel.liquido} />
-                    </TableCell>
-                    <TableCell>
-                      <Badge className={status.className} variant="outline">
-                        {status.label}
-                      </Badge>
-                    </TableCell>
-                  </TableRow>
-                );
-              })}
-            </TableBody>
-          </Table>
-        </CardContent>
-      </Card>
-    </Page>
-  );
-}
+'use client';
+
+import { Page, PageHeader } from '@/components/entity-list';
+import { Badge } from '@/components/ui/badge';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Money } from '@/components/ui/money';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Building2, CalendarDays, CreditCard, Smartphone } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { formatarData } from '../../_lib/formatters';
+import { useFinanceData } from '../../_lib/use-finance-data';
+
+export default function RecebiveisPage() {
+  const t = useTranslations('finance.ReceivablesCalendarPage');
+  const { data } = useFinanceData();
+  const { recebiveis, adquirentes } = data;
+
+  const statusConfig = {
+    confirmado: {
+      label: t('status.confirmado'),
+      className: 'bg-green-100 text-green-700',
+    },
+    pendente: {
+      label: t('status.pendente'),
+      className: 'bg-yellow-100 text-yellow-700',
+    },
+    liquidado: {
+      label: t('status.liquidado'),
+      className: 'bg-blue-100 text-blue-700',
+    },
+  };
+
+  const totalBruto = recebiveis.reduce((acc, r) => acc + r.bruto, 0);
+  const totalTaxas = recebiveis.reduce((acc, r) => acc + r.taxas, 0);
+  const totalLiquido = recebiveis.reduce((acc, r) => acc + r.liquido, 0);
+  const taxasPercentual =
+    totalBruto > 0 ? ((totalTaxas / totalBruto) * 100).toFixed(2) : '0.00';
+
+  return (
+    <Page>
+      <PageHeader
+        title={t('header.title')}
+        description={t('header.description')}
+        breadcrumbs={[
+          { label: t('breadcrumbs.home'), href: '/' },
+          { label: t('breadcrumbs.finance'), href: '/finance' },
+          { label: t('breadcrumbs.current') },
+        ]}
+      />
+
+      <div className="grid gap-4 md:grid-cols-4">
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">
+              {t('cards.totalGross')}
+            </CardTitle>
+            <CalendarDays className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              <Money value={totalBruto} />
+            </div>
+            <p className="text-xs text-muted-foreground">
+              {t('cards.receivablesCount', { count: recebiveis.length })}
+            </p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">
+              {t('cards.fees')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-red-600">
+              - <Money value={totalTaxas} />
+            </div>
+            <p className="text-xs text-muted-foreground">
+              {t('cards.percentOfGross', {
+                percent: taxasPercentual,
+              })}
+            </p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">
+              {t('cards.totalNet')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-green-600">
+              <Money value={totalLiquido} />
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">
+              {t('cards.confirmed')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              {recebiveis.filter((r) => r.status === 'confirmado').length}
+            </div>
+            <p className="text-xs text-muted-foreground">
+              {t('cards.ofTotal', { total: recebiveis.length })}
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="grid gap-6 lg:grid-cols-3">
+        {adquirentes.map((adquirente) => {
+          const Icon =
+            adquirente.nome === 'PagSeguro'
+              ? Smartphone
+              : adquirente.nome === 'Cielo'
+                ? CreditCard
+                : Building2;
+          return (
+            <Card key={adquirente.nome}>
+              <CardHeader>
+                <div className="flex items-center gap-3">
+                  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-muted">
+                    <Icon className="h-5 w-5" />
+                  </div>
+                  <div>
+                    <CardTitle className="text-base">
+                      {adquirente.nome}
+                    </CardTitle>
+                    <CardDescription>
+                      {t('acquirers.transactions', {
+                        count: adquirente.transacoes,
+                      })}
+                    </CardDescription>
+                  </div>
+                </div>
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold">
+                  <Money value={adquirente.total} />
+                </div>
+                <p className="text-xs text-muted-foreground">
+                  {t('acquirers.toReceive')}
+                </p>
+              </CardContent>
+            </Card>
+          );
+        })}
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('table.title')}</CardTitle>
+          <CardDescription>{t('table.description')}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>{t('table.headers.channel')}</TableHead>
+                <TableHead>{t('table.headers.acquirer')}</TableHead>
+                <TableHead>{t('table.headers.expectedDate')}</TableHead>
+                <TableHead className="text-right">
+                  {t('table.headers.gross')}
+                </TableHead>
+                <TableHead className="text-right">
+                  {t('table.headers.fees')}
+                </TableHead>
+                <TableHead className="text-right">
+                  {t('table.headers.net')}
+                </TableHead>
+                <TableHead>{t('table.headers.status')}</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {recebiveis.map((recebivel) => {
+                const status =
+                  statusConfig[recebivel.status as keyof typeof statusConfig];
+                return (
+                  <TableRow key={recebivel.id}>
+                    <TableCell className="font-medium">
+                      {recebivel.canal}
+                    </TableCell>
+                    <TableCell>{recebivel.adquirente}</TableCell>
+                    <TableCell>
+                      {formatarData(recebivel.dataPrevista)}
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <Money value={recebivel.bruto} />
+                    </TableCell>
+                    <TableCell className="text-right text-red-600">
+                      - <Money value={recebivel.taxas} />
+                    </TableCell>
+                    <TableCell className="text-right font-semibold">
+                      <Money value={recebivel.liquido} />
+                    </TableCell>
+                    <TableCell>
+                      <Badge className={status.className} variant="outline">
+                        {status.label}
+                      </Badge>
+                    </TableCell>
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </Page>
+  );
+}