@hed-hog/finance 0.0.301 → 0.0.303

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

@@ -1,25 +1,25 @@
-'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,
+'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 { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
-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,
@@ -105,47 +105,47 @@ 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 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) => (
-              <div
-                key={`${contato.data}-${i}`}
-                className="rounded-lg border p-4"
-              >
-                <div className="flex items-center justify-between">
-                  <span className="font-medium">{contato.tipo}</span>
-                  <span className="text-sm text-muted-foreground">
-                    {new Date(contato.data).toLocaleString()}
-                  </span>
+      <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) => (
+                <div
+                  key={`${contato.data}-${i}`}
+                  className="rounded-lg border p-4"
+                >
+                  <div className="flex items-center justify-between">
+                    <span className="font-medium">{contato.tipo}</span>
+                    <span className="text-sm text-muted-foreground">
+                      {new Date(contato.data).toLocaleString()}
+                    </span>
+                  </div>
+                  <p className="mt-2 text-sm">{contato.descricao}</p>
+                  <p className="mt-1 text-xs text-muted-foreground">
+                    {t('history.by')} {contato.responsavel}
+                  </p>
                 </div>
-                <p className="mt-2 text-sm">{contato.descricao}</p>
-                <p className="mt-1 text-xs text-muted-foreground">
-                  {t('history.by')} {contato.responsavel}
-                </p>
-              </div>
-            ))
-          )}
-          </FinanceSheetSection>
-        </FinanceSheetBody>
-      </SheetContent>
-    </Sheet>
-  );
+              ))
+            )}
+          </FinanceSheetSection>
+        </FinanceSheetBody>
+      </SheetContent>
+    </Sheet>
+  );
 }
 
 function EnviarCobrancaDialog({
@@ -198,62 +198,63 @@ function EnviarCobrancaDialog({
           {t('actions.collect')}
         </Button>
       </SheetTrigger>
-      <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 })}
+      <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="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>
+
+        <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>
   );
@@ -312,115 +313,118 @@ function RegistrarAcordoDialog({
           {t('actions.registerAgreement')}
         </Button>
       </SheetTrigger>
-      <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 })}
+      <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="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>
+
+        <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>
   );
@@ -480,39 +484,39 @@ export default function CobrancaPage() {
     },
   ];
 
-  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',
-    },
-  ];
+  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>
@@ -526,50 +530,47 @@ export default function CobrancaPage() {
         ]}
       />
 
-      <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 }}
-                tickFormatter={(value) => `${(value / 1000).toFixed(0)}k`}
-              />
-              <Tooltip
-                formatter={(value: number) => formatarMoeda(value)}
-                contentStyle={{
-                  backgroundColor: 'var(--background)',
-                  border: '1px solid var(--border)',
-                  borderRadius: '8px',
-                  color: 'var(--foreground)',
-                }}
-                labelStyle={{ color: 'var(--foreground)' }}
-                itemStyle={{ color: 'var(--foreground)' }}
-              />
-              <Bar
-                dataKey="valor"
-                radius={[4, 4, 0, 0]}
-                fill="var(--primary)"
-              />
-            </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>
+      <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 }}
+              tickFormatter={(value) => `${(value / 1000).toFixed(0)}k`}
+            />
+            <Tooltip
+              formatter={(value: number) => formatarMoeda(value)}
+              contentStyle={{
+                backgroundColor: 'var(--background)',
+                border: '1px solid var(--border)',
+                borderRadius: '8px',
+                color: 'var(--foreground)',
+              }}
+              labelStyle={{ color: 'var(--foreground)' }}
+              itemStyle={{ color: 'var(--foreground)' }}
+            />
+            <Bar dataKey="valor" radius={[4, 4, 0, 0]} fill="var(--primary)" />
+          </BarChart>
+        </ResponsiveContainer>
+      </FinancePageSection>
+
+      <FinancePageSection
+        variant="flat"
+        title={t('table.title')}
+        description={t('table.description')}
+      >
+        {agingInadimplencia.length > 0 ? (
+          <div className="overflow-x-auto">
+            <Table className="min-w-245">
+              <TableHeader>
+                <TableRow>
                   <TableHead>{t('table.headers.client')}</TableHead>
                   <TableHead className="text-right">
                     {t('table.headers.range0to30')}
@@ -590,13 +591,13 @@ export default function CobrancaPage() {
                     {t('table.headers.actions')}
                   </TableHead>
                 </TableRow>
-              </TableHeader>
-              <TableBody>
-                {agingInadimplencia.map((item) => (
-                  <TableRow key={item.clienteId} className="hover:bg-muted/30">
-                    <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} />
@@ -654,24 +655,22 @@ export default function CobrancaPage() {
                       </div>
                     </TableCell>
                   </TableRow>
-                ))}
-              </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>
-  );
-}
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        ) : (
+          <EmptyState
+            icon={<FileText className="h-12 w-12" />}
+            title={t('empty.title')}
+            description={t('empty.description')}
+            actionLabel={t('empty.action')}
+            onAction={() => {
+              void refetch();
+            }}
+          />
+        )}
+      </FinancePageSection>
+    </Page>
+  );
+}