src/app/dashboard/(overview)/page.tsx

@@ -1,5 +1,5 @@
 import { LatestInvoicesSkeleton, RevenueChartSkeleton } from "@/app/components/skeleton/skeletons";
-import CardWrapper from "@/app/dashboard/components/cards";
+import CardWrapper from "@/app/dashboard/components/cards/cards";
 import LatestInvoices from "@/app/dashboard/components/latest-invoices";
 import RevenueChart from "@/app/dashboard/components/revenue-chart";
 import { Suspense } from "react";

src/app/dashboard/components/card/card-controller.ts

@@ -0,0 +1,19 @@
+import {
+  BanknotesIcon,
+  ClockIcon,
+  UserGroupIcon,
+  InboxIcon,
+} from '@heroicons/react/24/outline';
+
+export default function cardController(props: {  type: 'invoices' | 'customers' | 'pending' | 'collected'; }) {
+    const { type } = props
+    const iconMap = {
+        collected: BanknotesIcon,
+        customers: UserGroupIcon,
+        pending: ClockIcon,
+        invoices: InboxIcon,
+    };
+    return {
+        Icon: iconMap[type]
+    }
+}

src/app/dashboard/components/card/card.tsx

@@ -0,0 +1,29 @@
+import cardController from "@/app/dashboard/components/card/card-controller";
+
+
+
+export function Card({
+  title,
+  value,
+  type,
+}: {
+  title: string;
+  value: number | string;
+  type: 'invoices' | 'customers' | 'pending' | 'collected';
+}) {
+ const { Icon } = cardController({type})
+
+  return (
+    <div className="rounded-xl bg-gray-50 p-2 shadow-sm">
+      <div className="flex p-4">
+        {Icon ? <Icon className="h-5 w-5 text-gray-700" /> : null}
+        <h3 className="ml-2 text-sm font-medium">{title}</h3>
+      </div>
+      <p
+        className="rounded-xl bg-white px-4 py-8 text-center text-2xl"
+      >
+        {value}
+      </p>
+    </div>
+  );
+}

src/app/dashboard/components/cards.tsx

@@ -1,57 +0,0 @@
-import fetchSummaryInfoUsecase from '@/feature/core/summary-info/domain/usecase/fetch-summary-info-usecase';
-import {
-  BanknotesIcon,
-  ClockIcon,
-  UserGroupIcon,
-  InboxIcon,
-} from '@heroicons/react/24/outline';
-
-const iconMap = {
-  collected: BanknotesIcon,
-  customers: UserGroupIcon,
-  pending: ClockIcon,
-  invoices: InboxIcon,
-};
-
-export default async function CardWrapper() {
-   const {customersNumber, invoicesNumber, invoicesSummary } = await fetchSummaryInfoUsecase();
-  
-  return (
-    <>
-      <Card title="Collected" value={invoicesSummary.paid} type="collected" />
-      <Card title="Pending" value={invoicesSummary.pending} type="pending" />
-      <Card title="Total Invoices" value={invoicesNumber} type="invoices" />
-      <Card
-        title="Total Customers"
-        value={customersNumber}
-        type="customers"
-      />
-    </>
-  );
-}
-
-export function Card({
-  title,
-  value,
-  type,
-}: {
-  title: string;
-  value: number | string;
-  type: 'invoices' | 'customers' | 'pending' | 'collected';
-}) {
-  const Icon = iconMap[type];
-
-  return (
-    <div className="rounded-xl bg-gray-50 p-2 shadow-sm">
-      <div className="flex p-4">
-        {Icon ? <Icon className="h-5 w-5 text-gray-700" /> : null}
-        <h3 className="ml-2 text-sm font-medium">{title}</h3>
-      </div>
-      <p
-        className="rounded-xl bg-white px-4 py-8 text-center text-2xl"
-      >
-        {value}
-      </p>
-    </div>
-  );
-}

src/app/dashboard/components/cards/cards-controller.ts

@@ -0,0 +1,5 @@
+import fetchSummaryInfoUsecase from "@/feature/core/summary-info/domain/usecase/fetch-summary-info-usecase";
+
+export default function cardsController() {
+   return fetchSummaryInfoUsecase();
+}

src/app/dashboard/components/cards/cards.tsx

@@ -0,0 +1,20 @@
+import { Card } from '@/app/dashboard/components/card/card';
+import cardsController from '@/app/dashboard/components/cards/cards-controller';
+
+
+export default async function CardWrapper() {
+  const {customersNumber, invoicesNumber, invoicesSummary } = await cardsController();
+  
+  return (
+    <>
+      <Card title="Collected" value={invoicesSummary.paid} type="collected" />
+      <Card title="Pending" value={invoicesSummary.pending} type="pending" />
+      <Card title="Total Invoices" value={invoicesNumber} type="invoices" />
+      <Card
+        title="Total Customers"
+        value={customersNumber}
+        type="customers"
+      />
+    </>
+  );
+}

src/app/lib/placeholder-data.js

@@ -1,188 +0,0 @@
-// This file contains placeholder data that you'll be replacing with real data in the Data Fetching chapter:
-// https://nextjs.org/learn/dashboard-app/fetching-data
-const users = [
-  {
-    id: '410544b2-4001-4271-9855-fec4b6a6442a',
-    name: 'User',
-    email: 'user@nextmail.com',
-    password: '123456',
-  },
-];
-
-const customers = [
-  {
-    id: '3958dc9e-712f-4377-85e9-fec4b6a6442a',
-    name: 'Delba de Oliveira',
-    email: 'delba@oliveira.com',
-    image_url: '/customers/delba-de-oliveira.png',
-  },
-  {
-    id: '3958dc9e-742f-4377-85e9-fec4b6a6442a',
-    name: 'Lee Robinson',
-    email: 'lee@robinson.com',
-    image_url: '/customers/lee-robinson.png',
-  },
-  {
-    id: '3958dc9e-737f-4377-85e9-fec4b6a6442a',
-    name: 'Hector Simpson',
-    email: 'hector@simpson.com',
-    image_url: '/customers/hector-simpson.png',
-  },
-  {
-    id: '50ca3e18-62cd-11ee-8c99-0242ac120002',
-    name: 'Steven Tey',
-    email: 'steven@tey.com',
-    image_url: '/customers/steven-tey.png',
-  },
-  {
-    id: '3958dc9e-787f-4377-85e9-fec4b6a6442a',
-    name: 'Steph Dietz',
-    email: 'steph@dietz.com',
-    image_url: '/customers/steph-dietz.png',
-  },
-  {
-    id: '76d65c26-f784-44a2-ac19-586678f7c2f2',
-    name: 'Michael Novotny',
-    email: 'michael@novotny.com',
-    image_url: '/customers/michael-novotny.png',
-  },
-  {
-    id: 'd6e15727-9fe1-4961-8c5b-ea44a9bd81aa',
-    name: 'Evil Rabbit',
-    email: 'evil@rabbit.com',
-    image_url: '/customers/evil-rabbit.png',
-  },
-  {
-    id: '126eed9c-c90c-4ef6-a4a8-fcf7408d3c66',
-    name: 'Emil Kowalski',
-    email: 'emil@kowalski.com',
-    image_url: '/customers/emil-kowalski.png',
-  },
-  {
-    id: 'CC27C14A-0ACF-4F4A-A6C9-D45682C144B9',
-    name: 'Amy Burns',
-    email: 'amy@burns.com',
-    image_url: '/customers/amy-burns.png',
-  },
-  {
-    id: '13D07535-C59E-4157-A011-F8D2EF4E0CBB',
-    name: 'Balazs Orban',
-    email: 'balazs@orban.com',
-    image_url: '/customers/balazs-orban.png',
-  },
-];
-
-const invoices = [
-  {
-    customer_id: customers[0].id,
-    amount: 15795,
-    status: 'pending',
-    date: '2022-12-06',
-  },
-  {
-    customer_id: customers[1].id,
-    amount: 20348,
-    status: 'pending',
-    date: '2022-11-14',
-  },
-  {
-    customer_id: customers[4].id,
-    amount: 3040,
-    status: 'paid',
-    date: '2022-10-29',
-  },
-  {
-    customer_id: customers[3].id,
-    amount: 44800,
-    status: 'paid',
-    date: '2023-09-10',
-  },
-  {
-    customer_id: customers[5].id,
-    amount: 34577,
-    status: 'pending',
-    date: '2023-08-05',
-  },
-  {
-    customer_id: customers[7].id,
-    amount: 54246,
-    status: 'pending',
-    date: '2023-07-16',
-  },
-  {
-    customer_id: customers[6].id,
-    amount: 666,
-    status: 'pending',
-    date: '2023-06-27',
-  },
-  {
-    customer_id: customers[3].id,
-    amount: 32545,
-    status: 'paid',
-    date: '2023-06-09',
-  },
-  {
-    customer_id: customers[4].id,
-    amount: 1250,
-    status: 'paid',
-    date: '2023-06-17',
-  },
-  {
-    customer_id: customers[5].id,
-    amount: 8546,
-    status: 'paid',
-    date: '2023-06-07',
-  },
-  {
-    customer_id: customers[1].id,
-    amount: 500,
-    status: 'paid',
-    date: '2023-08-19',
-  },
-  {
-    customer_id: customers[5].id,
-    amount: 8945,
-    status: 'paid',
-    date: '2023-06-03',
-  },
-  {
-    customer_id: customers[2].id,
-    amount: 8945,
-    status: 'paid',
-    date: '2023-06-18',
-  },
-  {
-    customer_id: customers[0].id,
-    amount: 8945,
-    status: 'paid',
-    date: '2023-10-04',
-  },
-  {
-    customer_id: customers[2].id,
-    amount: 1000,
-    status: 'paid',
-    date: '2022-06-05',
-  },
-];
-
-const revenue = [
-  { month: 'Jan', revenue: 2000 },
-  { month: 'Feb', revenue: 1800 },
-  { month: 'Mar', revenue: 2200 },
-  { month: 'Apr', revenue: 2500 },
-  { month: 'May', revenue: 2300 },
-  { month: 'Jun', revenue: 3200 },
-  { month: 'Jul', revenue: 3500 },
-  { month: 'Aug', revenue: 3700 },
-  { month: 'Sep', revenue: 2500 },
-  { month: 'Oct', revenue: 2800 },
-  { month: 'Nov', revenue: 3000 },
-  { month: 'Dec', revenue: 4800 },
-];
-
-module.exports = {
-  users,
-  customers,
-  invoices,
-  revenue,
-};

src/app/lib/utils.ts

@@ -1,11 +1,5 @@
 import Revenue from "@/feature/core/revenue/domain/entity/revenue";
 
-export const formatCurrency = (amount: number) => {
-  return (amount / 100).toLocaleString('en-US', {
-    style: 'currency',
-    currency: 'USD',
-  });
-};
 
 export const generateYAxis = (revenue: Revenue[]) => {
   // Calculate what labels we need to display on the y-axis

src/feature/common/feature-helpers.ts

@@ -0,0 +1,6 @@
+export const formatCurrency = (amount: number) => {
+  return (amount / 100).toLocaleString('en-US', {
+    style: 'currency',
+    currency: 'USD',
+  });
+};

src/feature/core/customer-invoice/data/repo/customer-invoice-db-repo.ts

@@ -1,5 +1,5 @@
-import { formatCurrency } from "@/app/lib/utils";
 import { sql } from "@/bootstrap/db/db";
+import { formatCurrency } from "@/feature/common/feature-helpers";
 import CustomerInvoice from "@/feature/core/customer-invoice/domain/entity/customer-invoice";
 import CustomerInvoiceRepo from "@/feature/core/customer-invoice/domain/i-repo/customer-invoice-repo";
 import postgres from "postgres";

src/feature/core/customer/data/repo/customer-db-repo.ts

@@ -1,8 +1,7 @@
-import { formatCurrency } from "@/app/lib/utils";
 import { sql } from "@/bootstrap/db/db";
+import { formatCurrency } from "@/feature/common/feature-helpers";
 import Customer from "@/feature/core/customer/domain/entity/customer";
 import CustomerRepo from "@/feature/core/customer/domain/i-repo/customer-repo";
-import { connection } from "next/server";
 import postgres from "postgres";
 
 type customerDbResponse = {

src/feature/core/invoice/data/repo/invoice-db-repo.ts

@@ -1,5 +1,5 @@
-import { formatCurrency } from "@/app/lib/utils";
 import { sql } from "@/bootstrap/db/db";
+import { formatCurrency } from "@/feature/common/feature-helpers";
 import InvoiceRepo from "@/feature/core/invoice/domain/i-repo/invoice-repo";
 import InvoiceStatusSummary from "@/feature/core/invoice/domain/value-object/invoice-status";
 import postgres from "postgres";