@hed-hog/finance 0.0.300 → 0.0.301

package/hedhog/frontend/app/accounts-receivable/collections-default/page.tsx.ejs

@@ -1,26 +1,25 @@
-'use client';
-
-import { EmptyState, Page, PageHeader } from '@/components/entity-list';
-import { RichTextEditor } from '@/components/rich-text-editor';
-import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-import {
-  Form,
-  FormControl,
+'use client';
+
+import {
+  FinancePageSection,
+  FinanceSheetBody,
+  FinanceSheetSection,
+} from '@/app/(app)/(libraries)/finance/_components/finance-layout';
+import { EmptyState, Page, PageHeader } from '@/components/entity-list';
+import { RichTextEditor } from '@/components/rich-text-editor';
+import { Button } from '@/components/ui/button';
+import {
+  Form,
+  FormControl,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/components/ui/form';
-import { Input } from '@/components/ui/input';
-import { InputMoney } from '@/components/ui/input-money';
-import { Money } from '@/components/ui/money';
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { InputMoney } from '@/components/ui/input-money';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
+import { Money } from '@/components/ui/money';
 import {
   Sheet,
   SheetContent,
@@ -106,21 +105,22 @@ function HistoricoContatosSheet({
 }) {
   return (
     <Sheet>
-      <SheetTrigger asChild>
-        <Button variant="outline" size="sm">
-          <FileText className="mr-2 h-4 w-4" />
-          {t('actions.history')}
-        </Button>
-      </SheetTrigger>
-      <SheetContent>
-        <SheetHeader>
-          <SheetTitle>{t('history.title')}</SheetTitle>
-          <SheetDescription>{cliente}</SheetDescription>
-        </SheetHeader>
-        <div className="mt-6 space-y-4 px-4">
-          {historicoContatos.length === 0 ? (
-            <div className="rounded-lg border p-4 text-sm text-muted-foreground">
-              -
+      <SheetTrigger asChild>
+        <Button variant="outline" size="sm">
+          <FileText className="mr-2 h-4 w-4" />
+          {t('actions.history')}
+        </Button>
+      </SheetTrigger>
+      <SheetContent className="flex h-full w-full flex-col overflow-hidden p-0 sm:max-w-xl">
+        <SheetHeader className="border-b border-border/50 px-4 py-4 sm:px-6">
+          <SheetTitle>{t('history.title')}</SheetTitle>
+          <SheetDescription>{cliente}</SheetDescription>
+        </SheetHeader>
+        <FinanceSheetBody>
+          <FinanceSheetSection title={t('history.title')}>
+          {historicoContatos.length === 0 ? (
+            <div className="rounded-lg border p-4 text-sm text-muted-foreground">
+              -
             </div>
           ) : (
             historicoContatos.map((contato, i) => (
@@ -138,13 +138,14 @@ function HistoricoContatosSheet({
                 <p className="mt-1 text-xs text-muted-foreground">
                   {t('history.by')} {contato.responsavel}
                 </p>
-              </div>
-            ))
-          )}
-        </div>
-      </SheetContent>
-    </Sheet>
-  );
+              </div>
+            ))
+          )}
+          </FinanceSheetSection>
+        </FinanceSheetBody>
+      </SheetContent>
+    </Sheet>
+  );
 }
 
 function EnviarCobrancaDialog({
@@ -197,48 +198,62 @@ function EnviarCobrancaDialog({
           {t('actions.collect')}
         </Button>
       </SheetTrigger>
-      <SheetContent side="right" className="w-[90vw] sm:max-w-xl">
-        <SheetHeader>
-          <SheetTitle>{t('send.title')}</SheetTitle>
-          <SheetDescription>
-            {t('send.description', { cliente })}
+      <SheetContent
+        side="right"
+        className="flex h-full w-[90vw] flex-col overflow-hidden p-0 sm:max-w-xl"
+      >
+        <SheetHeader className="border-b border-border/50 px-4 py-4 sm:px-6">
+          <SheetTitle>{t('send.title')}</SheetTitle>
+          <SheetDescription>
+            {t('send.description', { cliente })}
           </SheetDescription>
         </SheetHeader>
-
-        <Form {...form}>
-          <form
-            className="space-y-4 px-4"
-            onSubmit={form.handleSubmit(onSubmit)}
-          >
-            <FormField
-              control={form.control}
-              name="message"
-              render={({ field }) => (
-                <FormItem className="space-y-2">
-                  <FormLabel>{t('send.message')}</FormLabel>
-                  <FormControl>
-                    <RichTextEditor
-                      className="w-full max-w-full min-w-0 overflow-hidden [&_.ProseMirror]:max-w-full [&_.ProseMirror]:mx-0"
-                      value={field.value ?? ''}
-                      onChange={field.onChange}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <div className="flex flex-col gap-2">
-              <Button
-                type="submit"
-                className="w-full"
-                disabled={form.formState.isSubmitting}
-              >
-                {t('send.submit')}
-              </Button>
-            </div>
-          </form>
-        </Form>
+
+        <Form {...form}>
+          <form
+            className="flex h-full flex-col overflow-hidden"
+            onSubmit={form.handleSubmit(onSubmit)}
+          >
+            <FinanceSheetBody>
+              <FinanceSheetSection
+                title={t('send.title')}
+                description={t('send.description', { cliente })}
+              >
+                <FormField
+                  control={form.control}
+                  name="message"
+                  render={({ field }) => (
+                    <FormItem className="space-y-2">
+                      <FormLabel>{t('send.message')}</FormLabel>
+                      <FormControl>
+                        <RichTextEditor
+                          className="w-full max-w-full min-w-0 overflow-hidden [&_.ProseMirror]:max-w-full [&_.ProseMirror]:mx-0"
+                          value={field.value ?? ''}
+                          onChange={field.onChange}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </FinanceSheetSection>
+            </FinanceSheetBody>
+
+            <div className="border-t border-border/50 px-4 py-4 sm:px-6">
+              <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
+                <Button type="button" variant="outline" onClick={() => setOpen(false)}>
+                  {t('common.cancel')}
+                </Button>
+                <Button
+                  type="submit"
+                  disabled={form.formState.isSubmitting}
+                >
+                  {t('send.submit')}
+                </Button>
+              </div>
+            </div>
+          </form>
+        </Form>
       </SheetContent>
     </Sheet>
   );
@@ -297,101 +312,115 @@ function RegistrarAcordoDialog({
           {t('actions.registerAgreement')}
         </Button>
       </SheetTrigger>
-      <SheetContent side="right" className="w-[90vw] sm:max-w-xl">
-        <SheetHeader>
-          <SheetTitle>{t('agreement.title')}</SheetTitle>
-          <SheetDescription>
-            {t('agreement.description', { cliente })}
+      <SheetContent
+        side="right"
+        className="flex h-full w-[90vw] flex-col overflow-hidden p-0 sm:max-w-xl"
+      >
+        <SheetHeader className="border-b border-border/50 px-4 py-4 sm:px-6">
+          <SheetTitle>{t('agreement.title')}</SheetTitle>
+          <SheetDescription>
+            {t('agreement.description', { cliente })}
           </SheetDescription>
         </SheetHeader>
-
-        <Form {...form}>
-          <form
-            className="space-y-4 px-4"
-            onSubmit={form.handleSubmit(onSubmit)}
-          >
-            <div className="grid grid-cols-2 gap-4">
-              <FormField
-                control={form.control}
-                name="amount"
-                render={({ field }) => (
-                  <FormItem className="space-y-2">
-                    <FormLabel>{t('agreement.value')}</FormLabel>
-                    <FormControl>
-                      <InputMoney
-                        placeholder="0,00"
-                        value={field.value ?? 0}
-                        onValueChange={(value) => field.onChange(value ?? 0)}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="installments"
-                render={({ field }) => (
-                  <FormItem className="space-y-2">
-                    <FormLabel>{t('agreement.installments')}</FormLabel>
-                    <FormControl>
-                      <Input
-                        type="number"
-                        min={1}
-                        max={120}
-                        value={field.value}
-                        onChange={field.onChange}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            </div>
-
-            <FormField
-              control={form.control}
-              name="first_due_date"
-              render={({ field }) => (
-                <FormItem className="space-y-2">
-                  <FormLabel>{t('agreement.firstDueDate')}</FormLabel>
-                  <FormControl>
-                    <Input type="date" {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              control={form.control}
-              name="notes"
-              render={({ field }) => (
-                <FormItem className="space-y-2">
-                  <FormLabel>{t('agreement.notes')}</FormLabel>
-                  <FormControl>
-                    <Textarea
-                      placeholder={t('agreement.notesPlaceholder')}
-                      {...field}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <div className="flex flex-col gap-2">
-              <Button
-                type="submit"
-                className="w-full"
-                disabled={form.formState.isSubmitting}
-              >
-                {t('agreement.submit')}
-              </Button>
-            </div>
-          </form>
-        </Form>
+
+        <Form {...form}>
+          <form
+            className="flex h-full flex-col overflow-hidden"
+            onSubmit={form.handleSubmit(onSubmit)}
+          >
+            <FinanceSheetBody>
+              <FinanceSheetSection
+                title={t('agreement.title')}
+                description={t('agreement.description', { cliente })}
+              >
+                <div className="grid grid-cols-2 gap-4">
+                  <FormField
+                    control={form.control}
+                    name="amount"
+                    render={({ field }) => (
+                      <FormItem className="space-y-2">
+                        <FormLabel>{t('agreement.value')}</FormLabel>
+                        <FormControl>
+                          <InputMoney
+                            placeholder="0,00"
+                            value={field.value ?? 0}
+                            onValueChange={(value) => field.onChange(value ?? 0)}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name="installments"
+                    render={({ field }) => (
+                      <FormItem className="space-y-2">
+                        <FormLabel>{t('agreement.installments')}</FormLabel>
+                        <FormControl>
+                          <Input
+                            type="number"
+                            min={1}
+                            max={120}
+                            value={field.value}
+                            onChange={field.onChange}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </div>
+
+                <FormField
+                  control={form.control}
+                  name="first_due_date"
+                  render={({ field }) => (
+                    <FormItem className="space-y-2">
+                      <FormLabel>{t('agreement.firstDueDate')}</FormLabel>
+                      <FormControl>
+                        <Input type="date" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="notes"
+                  render={({ field }) => (
+                    <FormItem className="space-y-2">
+                      <FormLabel>{t('agreement.notes')}</FormLabel>
+                      <FormControl>
+                        <Textarea
+                          placeholder={t('agreement.notesPlaceholder')}
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </FinanceSheetSection>
+            </FinanceSheetBody>
+
+            <div className="border-t border-border/50 px-4 py-4 sm:px-6">
+              <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
+                <Button type="button" variant="outline" onClick={() => setOpen(false)}>
+                  {t('common.cancel')}
+                </Button>
+                <Button
+                  type="submit"
+                  disabled={form.formState.isSubmitting}
+                >
+                  {t('agreement.submit')}
+                </Button>
+              </div>
+            </div>
+          </form>
+        </Form>
       </SheetContent>
     </Sheet>
   );
@@ -451,11 +480,39 @@ export default function CobrancaPage() {
     },
   ];
 
-  const totalInadimplencia = agingInadimplencia.reduce(
-    (acc, c) => acc + c.total,
-    0
-  );
-  const totalClientes = agingInadimplencia.length;
+  const totalInadimplencia = agingInadimplencia.reduce(
+    (acc, c) => acc + c.total,
+    0
+  );
+  const totalClientes = agingInadimplencia.length;
+  const summaryCards = [
+    {
+      key: 'default',
+      title: t('cards.totalDefault'),
+      value: <Money value={totalInadimplencia} />,
+      icon: AlertTriangle,
+      layout: 'compact' as const,
+      iconContainerClassName: 'bg-red-500/10 text-red-700',
+      accentClassName: 'from-red-500/20 via-orange-500/10 to-transparent',
+    },
+    {
+      key: 'clients',
+      title: t('cards.lateClients'),
+      value: totalClientes,
+      icon: FileText,
+      layout: 'compact' as const,
+    },
+    {
+      key: 'delay',
+      title: t('cards.maxDelay'),
+      value: t('cards.maxDelayValue'),
+      icon: AlertTriangle,
+      layout: 'compact' as const,
+      valueClassName: 'text-destructive',
+      iconContainerClassName: 'bg-orange-500/10 text-orange-700',
+      accentClassName: 'from-orange-500/20 via-amber-500/10 to-transparent',
+    },
+  ];
 
   return (
     <Page>
@@ -469,53 +526,16 @@ export default function CobrancaPage() {
         ]}
       />
 
-      <div className="grid gap-4 md:grid-cols-3">
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">
-              {t('cards.totalDefault')}
-            </CardTitle>
-            <AlertTriangle className="h-4 w-4 text-destructive" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">
-              <Money value={totalInadimplencia} />
-            </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.lateClients')}
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">{totalClientes}</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.maxDelay')}
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold text-destructive">
-              {t('cards.maxDelayValue')}
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-
-      <Card>
-        <CardHeader>
-          <CardTitle>{t('aging.title')}</CardTitle>
-          <CardDescription>{t('aging.description')}</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <ResponsiveContainer width="100%" height={250}>
-            <BarChart data={chartData}>
-              <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
+      <KpiCardsGrid items={summaryCards} columns={3} />
+
+      <FinancePageSection
+        title={t('aging.title')}
+        description={t('aging.description')}
+        contentClassName="p-4 sm:p-6"
+      >
+          <ResponsiveContainer width="100%" height={250}>
+            <BarChart data={chartData}>
+              <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
               <XAxis dataKey="name" tick={{ fontSize: 12 }} />
               <YAxis
                 tick={{ fontSize: 12 }}
@@ -536,22 +556,20 @@ export default function CobrancaPage() {
                 dataKey="valor"
                 radius={[4, 4, 0, 0]}
                 fill="var(--primary)"
-              />
-            </BarChart>
-          </ResponsiveContainer>
-        </CardContent>
-      </Card>
-
-      <Card>
-        <CardHeader>
-          <CardTitle>{t('table.title')}</CardTitle>
-          <CardDescription>{t('table.description')}</CardDescription>
-        </CardHeader>
-        <CardContent>
-          {agingInadimplencia.length > 0 ? (
-            <Table>
-              <TableHeader>
-                <TableRow>
+              />
+            </BarChart>
+          </ResponsiveContainer>
+      </FinancePageSection>
+
+      <FinancePageSection
+        title={t('table.title')}
+        description={t('table.description')}
+      >
+          {agingInadimplencia.length > 0 ? (
+            <div className="overflow-x-auto">
+            <Table className="min-w-[980px]">
+              <TableHeader>
+                <TableRow>
                   <TableHead>{t('table.headers.client')}</TableHead>
                   <TableHead className="text-right">
                     {t('table.headers.range0to30')}
@@ -572,13 +590,13 @@ export default function CobrancaPage() {
                     {t('table.headers.actions')}
                   </TableHead>
                 </TableRow>
-              </TableHeader>
-              <TableBody>
-                {agingInadimplencia.map((item) => (
-                  <TableRow key={item.clienteId}>
-                    <TableCell className="font-medium">
-                      {item.cliente}
-                    </TableCell>
+              </TableHeader>
+              <TableBody>
+                {agingInadimplencia.map((item) => (
+                  <TableRow key={item.clienteId} className="hover:bg-muted/30">
+                    <TableCell className="font-medium">
+                      {item.cliente}
+                    </TableCell>
                     <TableCell className="text-right">
                       {item.bucket0_30 > 0 ? (
                         <Money value={item.bucket0_30} />
@@ -636,22 +654,24 @@ export default function CobrancaPage() {
                       </div>
                     </TableCell>
                   </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          ) : (
-            <EmptyState
-              icon={<FileText className="h-12 w-12" />}
-              title={t('empty.title')}
-              description={t('empty.description')}
-              actionLabel={t('empty.action')}
-              onAction={() => {
-                void refetch();
-              }}
-            />
-          )}
-        </CardContent>
-      </Card>
-    </Page>
-  );
-}
+                ))}
+              </TableBody>
+            </Table>
+            </div>
+          ) : (
+            <div className="px-4 py-8 sm:px-6">
+              <EmptyState
+                icon={<FileText className="h-12 w-12" />}
+                title={t('empty.title')}
+                description={t('empty.description')}
+                actionLabel={t('empty.action')}
+                onAction={() => {
+                  void refetch();
+                }}
+              />
+            </div>
+          )}
+      </FinancePageSection>
+    </Page>
+  );
+}