@hed-hog/finance 0.0.299 → 0.0.301

package/hedhog/frontend/app/reports/overview-results/page.tsx.ejs

@@ -1,14 +1,9 @@
 'use client';
 
+import { FinancePageSection } from '@/app/(app)/(libraries)/finance/_components/finance-layout';
 import { Page, PageHeader } from '@/components/entity-list';
 import { Badge } from '@/components/ui/badge';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Money } from '@/components/ui/money';
@@ -108,6 +103,56 @@ export default function OverviewResultsReportPage() {
     [data.rows, groupBy, locale]
   );
   const totals = data.totals;
+  const summaryCards = [
+    {
+      key: 'revenue',
+      title: t('cards.revenue'),
+      value: <Money value={totals.faturamento} />,
+      icon: TrendingUp,
+      layout: 'compact' as const,
+      iconContainerClassName: 'bg-blue-500/10 text-blue-600',
+      accentClassName: 'from-blue-500/20 via-sky-500/10 to-transparent',
+    },
+    {
+      key: 'expensesAndLoans',
+      title: t('cards.expensesAndLoans'),
+      value: <Money value={totals.despesasEmprestimos} />,
+      icon: TrendingDown,
+      layout: 'compact' as const,
+      iconContainerClassName: 'bg-orange-500/10 text-orange-600',
+      accentClassName: 'from-orange-500/20 via-amber-500/10 to-transparent',
+    },
+    {
+      key: 'difference',
+      title: t('cards.resultDifference'),
+      value: <Money value={totals.diferenca} showSign />,
+      icon: totals.diferenca >= 0 ? TrendingUp : TrendingDown,
+      layout: 'compact' as const,
+      valueClassName: totals.diferenca >= 0 ? 'text-green-600' : 'text-red-600',
+      iconContainerClassName:
+        totals.diferenca >= 0
+          ? 'bg-green-500/10 text-green-600'
+          : 'bg-red-500/10 text-red-600',
+      accentClassName:
+        totals.diferenca >= 0
+          ? 'from-green-500/20 via-emerald-500/10 to-transparent'
+          : 'from-red-500/20 via-rose-500/10 to-transparent',
+    },
+    {
+      key: 'margin',
+      title: t('cards.margin'),
+      value: `${totals.margem.toFixed(1)}%`,
+      description: (
+        <Badge variant={totals.margem >= 0 ? 'default' : 'destructive'}>
+          {totals.margem >= 0 ? t('status.positive') : t('status.negative')}
+        </Badge>
+      ),
+      icon: Target,
+      layout: 'compact' as const,
+      iconContainerClassName: 'bg-violet-500/10 text-violet-600',
+      accentClassName: 'from-violet-500/20 via-fuchsia-500/10 to-transparent',
+    },
+  ];
 
   return (
     <Page>
@@ -121,182 +166,102 @@ export default function OverviewResultsReportPage() {
         ]}
       />
 
-      <Card>
-        <CardHeader>
-          <CardTitle>{t('filters.title')}</CardTitle>
-          <CardDescription>{t('filters.description')}</CardDescription>
-        </CardHeader>
-        <CardContent className="grid gap-4 md:grid-cols-3">
-          <div className="space-y-2">
-            <Label htmlFor="from">{t('filters.from')}</Label>
-            <Input
-              id="from"
-              type="date"
-              value={from}
-              onChange={(event) => setFrom(event.target.value)}
-              max={to}
-            />
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor="to">{t('filters.to')}</Label>
-            <Input
-              id="to"
-              type="date"
-              value={to}
-              onChange={(event) => setTo(event.target.value)}
-              min={from}
-            />
-          </div>
-          <div className="space-y-2">
-            <Label>{t('filters.groupBy')}</Label>
-            <Select
-              value={groupBy}
-              onValueChange={(value) => setGroupBy(value as GroupBy)}
-            >
-              <SelectTrigger>
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="day">{t('groupBy.day')}</SelectItem>
-                <SelectItem value="week">{t('groupBy.week')}</SelectItem>
-                <SelectItem value="month">{t('groupBy.month')}</SelectItem>
-                <SelectItem value="year">{t('groupBy.year')}</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-        </CardContent>
-      </Card>
-
-      <div className="grid gap-3 md:grid-cols-4">
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-1 pt-3 px-4">
-            <CardTitle className="text-xs font-medium tracking-wide text-muted-foreground uppercase">
-              {t('cards.revenue')}
-            </CardTitle>
-            <div className="rounded-full bg-blue-500/10 p-1.5">
-              <TrendingUp className="h-4 w-4 text-blue-600" />
-            </div>
-          </CardHeader>
-          <CardContent className="pb-3 pt-0 px-4">
-            <div className="text-xl font-bold">
-              <Money value={totals.faturamento} />
-            </div>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-1 pt-3 px-4">
-            <CardTitle className="text-xs font-medium tracking-wide text-muted-foreground uppercase">
-              {t('cards.expensesAndLoans')}
-            </CardTitle>
-            <div className="rounded-full bg-orange-500/10 p-1.5">
-              <TrendingDown className="h-4 w-4 text-orange-600" />
-            </div>
-          </CardHeader>
-          <CardContent className="pb-3 pt-0 px-4">
-            <div className="text-xl font-bold">
-              <Money value={totals.despesasEmprestimos} />
-            </div>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-1 pt-3 px-4">
-            <CardTitle className="text-xs font-medium tracking-wide text-muted-foreground uppercase">
-              {t('cards.resultDifference')}
-            </CardTitle>
-            <div
-              className={`rounded-full p-1.5 ${totals.diferenca >= 0 ? 'bg-green-500/10' : 'bg-red-500/10'}`}
-            >
-              {totals.diferenca >= 0 ? (
-                <TrendingUp className="h-4 w-4 text-green-600" />
-              ) : (
-                <TrendingDown className="h-4 w-4 text-red-600" />
-              )}
-            </div>
-          </CardHeader>
-          <CardContent className="pb-3 pt-0 px-4">
-            <div
-              className={`text-xl font-bold ${totals.diferenca >= 0 ? 'text-green-600' : 'text-red-600'}`}
-            >
-              <Money value={totals.diferenca} showSign />
-            </div>
-          </CardContent>
-        </Card>
+      <FinancePageSection
+        title={t('filters.title')}
+        description={t('filters.description')}
+        contentClassName="grid gap-4 p-4 md:grid-cols-3 sm:p-5"
+      >
+        <div className="space-y-2">
+          <Label htmlFor="from">{t('filters.from')}</Label>
+          <Input
+            id="from"
+            type="date"
+            value={from}
+            onChange={(event) => setFrom(event.target.value)}
+            max={to}
+          />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="to">{t('filters.to')}</Label>
+          <Input
+            id="to"
+            type="date"
+            value={to}
+            onChange={(event) => setTo(event.target.value)}
+            min={from}
+          />
+        </div>
+        <div className="space-y-2">
+          <Label>{t('filters.groupBy')}</Label>
+          <Select
+            value={groupBy}
+            onValueChange={(value) => setGroupBy(value as GroupBy)}
+          >
+            <SelectTrigger>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="day">{t('groupBy.day')}</SelectItem>
+              <SelectItem value="week">{t('groupBy.week')}</SelectItem>
+              <SelectItem value="month">{t('groupBy.month')}</SelectItem>
+              <SelectItem value="year">{t('groupBy.year')}</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </FinancePageSection>
 
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-1 pt-3 px-4">
-            <CardTitle className="text-xs font-medium tracking-wide text-muted-foreground uppercase">
-              {t('cards.margin')}
-            </CardTitle>
-            <div className="rounded-full bg-violet-500/10 p-1.5">
-              <Target className="h-4 w-4 text-violet-600" />
-            </div>
-          </CardHeader>
-          <CardContent className="pb-3 pt-0 px-4">
-            <div className="text-xl font-bold">{totals.margem.toFixed(1)}%</div>
-            <Badge
-              className="mt-1"
-              variant={totals.margem >= 0 ? 'default' : 'destructive'}
-            >
-              {totals.margem >= 0 ? t('status.positive') : t('status.negative')}
-            </Badge>
-          </CardContent>
-        </Card>
-      </div>
+      <KpiCardsGrid items={summaryCards} columns={4} />
 
-      <Card>
-        <CardHeader>
-          <CardTitle>{t('chart.title')}</CardTitle>
-          <CardDescription>{t('chart.description')}</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <ResponsiveContainer width="100%" height={360}>
-            <LineChart data={rows}>
-              <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
-              <XAxis dataKey="label" tick={{ fontSize: 12 }} />
-              <YAxis
-                tick={{ fontSize: 12 }}
-                tickFormatter={(value) => `${(value / 1000).toFixed(0)}k`}
-              />
-              <Tooltip content={renderSolidTooltip} />
-              <Legend />
-              <Line
-                type="monotone"
-                dataKey="faturamento"
-                name={t('chart.revenueLabel')}
-                stroke={LINE_COLORS.faturamento}
-                strokeWidth={3}
-                dot={false}
-              />
-              <Line
-                type="monotone"
-                dataKey="despesasEmprestimos"
-                name={t('chart.expensesLabel')}
-                stroke={LINE_COLORS.despesasEmprestimos}
-                strokeWidth={3}
-                dot={false}
-              />
-              <Line
-                type="monotone"
-                dataKey="diferenca"
-                name={t('chart.differenceLabel')}
-                stroke={LINE_COLORS.diferenca}
-                strokeWidth={2}
-                strokeDasharray="6 4"
-                dot={false}
-              />
-            </LineChart>
-          </ResponsiveContainer>
-        </CardContent>
-      </Card>
+      <FinancePageSection
+        title={t('chart.title')}
+        description={t('chart.description')}
+        contentClassName="p-4 sm:p-5"
+      >
+        <ResponsiveContainer width="100%" height={360}>
+          <LineChart data={rows}>
+            <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
+            <XAxis dataKey="label" tick={{ fontSize: 12 }} />
+            <YAxis
+              tick={{ fontSize: 12 }}
+              tickFormatter={(value) => `${(value / 1000).toFixed(0)}k`}
+            />
+            <Tooltip content={renderSolidTooltip} />
+            <Legend />
+            <Line
+              type="monotone"
+              dataKey="faturamento"
+              name={t('chart.revenueLabel')}
+              stroke={LINE_COLORS.faturamento}
+              strokeWidth={3}
+              dot={false}
+            />
+            <Line
+              type="monotone"
+              dataKey="despesasEmprestimos"
+              name={t('chart.expensesLabel')}
+              stroke={LINE_COLORS.despesasEmprestimos}
+              strokeWidth={3}
+              dot={false}
+            />
+            <Line
+              type="monotone"
+              dataKey="diferenca"
+              name={t('chart.differenceLabel')}
+              stroke={LINE_COLORS.diferenca}
+              strokeWidth={2}
+              strokeDasharray="6 4"
+              dot={false}
+            />
+          </LineChart>
+        </ResponsiveContainer>
+      </FinancePageSection>
 
-      <Card>
-        <CardHeader>
-          <CardTitle>{t('table.title')}</CardTitle>
-          <CardDescription>{t('table.description')}</CardDescription>
-        </CardHeader>
-        <CardContent>
+      <FinancePageSection
+        title={t('table.title')}
+        description={t('table.description')}
+        contentClassName="p-4 sm:p-5"
+      >
+        <div className="overflow-x-auto">
           <Table>
             <TableHeader>
               <TableRow>
@@ -348,8 +313,8 @@ export default function OverviewResultsReportPage() {
               )}
             </TableBody>
           </Table>
-        </CardContent>
-      </Card>
+        </div>
+      </FinancePageSection>
     </Page>
   );
 }

package/hedhog/frontend/app/reports/top-customers/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 { Button } from '@/components/ui/button';
 import {
@@ -10,6 +11,7 @@ import {
   CardTitle,
 } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
 import { Money } from '@/components/ui/money';
 import {
   Select,
@@ -90,6 +92,41 @@ export default function TopCustomersReportPage() {
     setAppliedFilters(filters);
   };
 
+  const summaryCards = [
+    {
+      key: 'total',
+      title: t('cards.total'),
+      value: <Money value={viewData.total} />,
+      icon: Users,
+      layout: 'compact' as const,
+      iconContainerClassName: 'bg-blue-500/10 text-blue-600',
+      accentClassName: 'from-blue-500/20 via-sky-500/10 to-transparent',
+    },
+    {
+      key: 'top5Concentration',
+      title: t('cards.top5Concentration'),
+      value: `${viewData.top5Percent.toFixed(1)}%`,
+      icon: PieChartIcon,
+      layout: 'compact' as const,
+      iconContainerClassName: 'bg-purple-500/10 text-purple-600',
+      accentClassName: 'from-purple-500/20 via-fuchsia-500/10 to-transparent',
+    },
+    {
+      key: 'leader',
+      title: t('cards.leader'),
+      value: viewData.leader?.customer || '-',
+      description: viewData.leader ? (
+        <Money value={viewData.leader.value} />
+      ) : (
+        '-'
+      ),
+      icon: Crown,
+      layout: 'compact' as const,
+      iconContainerClassName: 'bg-amber-500/10 text-amber-500',
+      accentClassName: 'from-amber-500/20 via-yellow-500/10 to-transparent',
+    },
+  ];
+
   const renderSolidTooltip = ({
     active,
     payload,
@@ -165,7 +202,7 @@ export default function TopCustomersReportPage() {
             }))
           }
           max={filters.to}
-          className="w-full lg:w-[170px]"
+          className="w-full lg:w-42.5"
           aria-label={t('filters.fromAria')}
           placeholder={t('filters.fromPlaceholder')}
         />
@@ -180,7 +217,7 @@ export default function TopCustomersReportPage() {
             }))
           }
           min={filters.from}
-          className="w-full lg:w-[170px]"
+          className="w-full lg:w-42.5"
           aria-label={t('filters.toAria')}
           placeholder={t('filters.toPlaceholder')}
         />
@@ -194,7 +231,7 @@ export default function TopCustomersReportPage() {
           }
         >
           <SelectTrigger
-            className="w-full lg:w-[150px]"
+            className="w-full lg:w-37.5"
             aria-label={t('filters.groupByAria')}
           >
             <SelectValue placeholder={t('filters.groupByPlaceholder')} />
@@ -215,56 +252,7 @@ export default function TopCustomersReportPage() {
         </Button>
       </form>
 
-      <div className="grid gap-3 md:grid-cols-3">
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-1 pt-3 px-4">
-            <CardTitle className="text-xs font-medium tracking-wide text-muted-foreground uppercase">
-              {t('cards.total')}
-            </CardTitle>
-            <div className="rounded-full bg-blue-500/10 p-1.5">
-              <Users className="h-4 w-4 text-blue-600" />
-            </div>
-          </CardHeader>
-          <CardContent className="pb-3 pt-0 px-4">
-            <div className="text-xl font-bold">
-              <Money value={viewData.total} />
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-1 pt-3 px-4">
-            <CardTitle className="text-xs font-medium tracking-wide text-muted-foreground uppercase">
-              {t('cards.top5Concentration')}
-            </CardTitle>
-            <div className="rounded-full bg-purple-500/10 p-1.5">
-              <PieChartIcon className="h-4 w-4 text-purple-600" />
-            </div>
-          </CardHeader>
-          <CardContent className="pb-3 pt-0 px-4">
-            <div className="text-xl font-bold">
-              {viewData.top5Percent.toFixed(1)}%
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-1 pt-3 px-4">
-            <CardTitle className="text-xs font-medium tracking-wide text-muted-foreground uppercase">
-              {t('cards.leader')}
-            </CardTitle>
-            <div className="rounded-full bg-amber-500/10 p-1.5">
-              <Crown className="h-4 w-4 text-amber-500" />
-            </div>
-          </CardHeader>
-          <CardContent className="pb-3 pt-0 px-4">
-            <div className="text-sm font-medium">
-              {viewData.leader?.customer || '-'}
-            </div>
-            <div className="text-xs text-muted-foreground">
-              {viewData.leader ? <Money value={viewData.leader.value} /> : '-'}
-            </div>
-          </CardContent>
-        </Card>
-      </div>
+      <KpiCardsGrid items={summaryCards} columns={3} />
 
       <div className="grid gap-3 xl:grid-cols-5">
         <Card className="xl:col-span-3">
@@ -362,12 +350,12 @@ export default function TopCustomersReportPage() {
         </Card>
       </div>
 
-      <Card>
-        <CardHeader>
-          <CardTitle>{t('table.title')}</CardTitle>
-          <CardDescription>{t('table.description')}</CardDescription>
-        </CardHeader>
-        <CardContent>
+      <FinancePageSection
+        title={t('table.title')}
+        description={t('table.description')}
+        contentClassName="p-4 sm:p-5"
+      >
+        <div className="overflow-x-auto">
           <Table>
             <TableHeader>
               <TableRow>
@@ -412,8 +400,8 @@ export default function TopCustomersReportPage() {
               )}
             </TableBody>
           </Table>
-        </CardContent>
-      </Card>
+        </div>
+      </FinancePageSection>
     </Page>
   );
 }