components.json

@@ -11,10 +11,10 @@
     "prefix": ""
   },
   "aliases": {
-    "components": "@/app/components",
+    "components": "@/components",
-    "utils": "@/bootstrap/helpers/lib/ui-utils",
+    "utils": "@/lib/utils",
-    "ui": "@/app/components",
+    "ui": "@/components/ui",
-    "lib": "@/bootstrap/helpers/lib",
+    "lib": "@/lib",
-    "hooks": "@/bootstrap/helpers/vm/hooks"
+    "hooks": "@/hooks"
   }
 }

package.json

@@ -13,7 +13,6 @@
   "dependencies": {
     "@heroicons/react": "^2.1.5",
     "@radix-ui/react-icons": "^1.3.1",
-    "@radix-ui/react-slot": "^1.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "lucide-react": "^0.454.0",

src/app/components/button/button.tsx

@@ -2,68 +2,11 @@
 import BaseView, { BuildProps } from "@/bootstrap/helpers/view/base-view";
 import ButtonVm from "@/app/components/button/button-vm";
 import { ReactNode } from "react";
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "@/bootstrap/helpers/lib/ui-utils";
 
 export default class Button extends BaseView<ButtonVm> {
     protected Build(props: BuildProps<ButtonVm>): ReactNode {
         const {vm} = props
         
-        return <ButtonUi onClick={vm.onClick} >{vm.props.title}</ButtonUi> 
+        return <button onClick={vm.onClick} >{vm.props.title}</button>
     }
 }
-
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline:
-          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean
-}
-
-const ButtonUi = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-ButtonUi.displayName = "Button"
-
-export { buttonVariants }

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

@@ -0,0 +1,5 @@
+import DashboardSkeleton from "@/app/components/skeleton/skeletons";
+
+export default function Loading() {
+  return <DashboardSkeleton />;
+}

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

@@ -1,7 +1,7 @@
-import { LatestInvoicesSkeleton, RevenueChartSkeleton } from "@/app/dashboard/components/server/skeletons/skeletons";
+import { LatestInvoicesSkeleton, RevenueChartSkeleton } from "@/app/components/skeleton/skeletons";
-import CardWrapper from "@/app/dashboard/components/server/cards/cards";
+import CardWrapper from "@/app/dashboard/components/cards";
-import LatestInvoices from "@/app/dashboard/components/server/latest-invoices/latest-invoices";
+import LatestInvoices from "@/app/dashboard/components/latest-invoices";
-import RevenueChart from "@/app/dashboard/components/server/revenue-chart/revenue-chart";
+import RevenueChart from "@/app/dashboard/components/revenue-chart";
 import { Suspense } from "react";
 
 export default async function Dashboard() {

src/app/dashboard/components/cards.tsx

@@ -0,0 +1,57 @@
+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/client/create-random-invoice/create-random-invoice.tsx

@@ -1,13 +0,0 @@
-"use client"
-
-import Button from "@/app/components/button/button"
-import CreateRandomInvoiceButtonVM from "@/app/dashboard/vm/create-random-invoice-button-vm"
-import { useDI } from "@/bootstrap/di/di-context"
-import { useRef } from "react"
-
-export default function CreateRandomInvoiceContainer() {
-    const di = useDI()
-    const vm = useRef(di.resolve(CreateRandomInvoiceButtonVM))
-
-    return <Button vm={vm.current}/>
-}

src/app/dashboard/components/client/nav-links/nav-link-controller.ts

@@ -1,29 +0,0 @@
-
-import { DocumentIcon } from '@/app/components/icons/document';
-import HomeIcon from '@/app/components/icons/home';
-import { UserIcon } from '@/app/components/icons/user';
-import { usePathname } from 'next/navigation';
-
-type LinkItem = {
-    name: string; 
-    href: string;
-    icon: (props: {className?: string}) => JSX.Element
-}
-export default function navLinkPersonalVM() {
-    const pathname = usePathname()
-    // Map of links to display in the side navigation.
-    // Depending on the size of the application, this would be stored in a database.
-    const links: LinkItem[] = [
-        { name: 'Home', href: '/dashboard', icon: HomeIcon },
-        {
-            name: 'Invoices',
-            href: '/dashboard/invoices',
-            icon: DocumentIcon,
-        },
-        { name: 'Customers', href: '/dashboard/customers', icon: UserIcon },
-    ];
-    return {
-        links,
-        isLinkActive: (link: LinkItem) => pathname === link.href
-    }
-}

src/app/dashboard/components/latest-invoices.tsx

@@ -1,13 +1,19 @@
-import CreateRandomInvoiceContainer from '@/app/dashboard/components/client/create-random-invoice/create-random-invoice';
+import fetchCustomerInvoicesUsecase from '@/feature/core/customer-invoice/domain/usecase/fetch-customer-invoices-usecase';
-import latestInvoicesController from '@/app/dashboard/components/server/latest-invoices/latest-invoices-controller';
 import { ArrowPathIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
 import Image from 'next/image';
-
 export default async function LatestInvoices() {
-  const latestInvoices = await latestInvoicesController();
+  const latestInvoices = await fetchCustomerInvoicesUsecase();
 
-  const invoices = latestInvoices.map((invoice, i) => {
+  return (
+    <div className="flex w-full flex-col md:col-span-4">
+      <h2 className="mb-4 text-xl md:text-2xl">
+        Latest Invoices
+      </h2>
+      <div className="flex grow flex-col justify-between rounded-xl bg-gray-50 p-4">
+
+        <div className="bg-white px-6">
+          {latestInvoices.map((invoice, i) => {
             return (
               <div
                 key={invoice.id}
@@ -42,22 +48,12 @@ export default async function LatestInvoices() {
                 </p>
               </div>
             );
-          })
+          })}
-  return (
-    <div className="flex w-full flex-col md:col-span-4">
-      <h2 className="mb-4 text-xl md:text-2xl">
-        Latest Invoices
-      </h2>
-      <div className="flex grow flex-col justify-between rounded-xl bg-gray-50 p-4">
-
-        <div className="bg-white px-6">
-          {invoices}
         </div>
-        <div className="flex items-end mt-auto pb-2 pt-6">
+        <div className="flex items-center pb-2 pt-6">
           <ArrowPathIcon className="h-5 w-5 text-gray-500" />
           <h3 className="ml-2 text-sm text-gray-500 ">Updated just now</h3>
         </div>
-        <CreateRandomInvoiceContainer />
       </div>
     </div>
   );

src/app/dashboard/components/nav-links.tsx

@@ -1,10 +1,25 @@
 'use client'
-import navLinkPersonalVM from '@/app/dashboard/components/client/nav-links/nav-link-controller';
+import { DocumentIcon } from '@/app/components/icons/document';
+import HomeIcon from '@/app/components/icons/home';
+import { UserIcon } from '@/app/components/icons/user';
 import clsx from 'clsx';
 import Link from 'next/link'
+import { usePathname } from 'next/navigation';
+
+// Map of links to display in the side navigation.
+// Depending on the size of the application, this would be stored in a database.
+const links = [
+  { name: 'Home', href: '/dashboard', icon: HomeIcon },
+  {
+    name: 'Invoices',
+    href: '/dashboard/invoices',
+    icon: DocumentIcon,
+  },
+  { name: 'Customers', href: '/dashboard/customers', icon: UserIcon },
+];
 
 export default function NavLinks() {
-  const { links, isLinkActive  } = navLinkPersonalVM()
+  const pathname = usePathname()
   return (
     <>
       {links.map((link) => {
@@ -16,7 +31,7 @@ export default function NavLinks() {
             className={clsx(
               'flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3',
               {
-                'bg-sky-100 text-blue-600': isLinkActive(link),
+                'bg-sky-100 text-blue-600': pathname === link.href,
               },
             )}
           >

src/app/dashboard/components/revenue-chart.tsx

@@ -1,8 +1,13 @@
-import revenueChartController from '@/app/dashboard/components/server/revenue-chart/revenue-chart-controller';
+import { generateYAxis } from '@/app/lib/utils';
+import fetchRevenuesUsecase from '@/feature/core/revenue/domain/usecase/fetch-revenues-usecase';
 import { CalendarIcon } from '@heroicons/react/24/outline';
 
 export default async function RevenueChart() {
-  const { chartHeight, revenue, topLabel, yAxisLabels } = await revenueChartController()
+  const revenue = await fetchRevenuesUsecase();
+
+  const chartHeight = 350;
+
+  const { yAxisLabels, topLabel } = generateYAxis(revenue);
 
   if (!revenue || revenue.length === 0) {
     return <p className="mt-4 text-gray-400">No data available.</p>;

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

@@ -1,19 +0,0 @@
-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/server/card/card.tsx

@@ -1,29 +0,0 @@
-import cardController from "@/app/dashboard/components/server/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/server/cards/cards-controller.ts

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

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

@@ -1,20 +0,0 @@
-import { Card } from '@/app/dashboard/components/server/card/card';
-import cardsController from '@/app/dashboard/components/server/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/dashboard/components/server/latest-invoices/latest-invoices-controller.ts

@@ -1,5 +0,0 @@
-import fetchCustomerInvoicesUsecase from "@/feature/core/customer-invoice/domain/usecase/fetch-customer-invoices-usecase";
-
-export default function latestInvoicesController() {
-    return fetchCustomerInvoicesUsecase()
-}

src/app/dashboard/components/sidenav.tsx

@@ -1,4 +1,4 @@
-import NavLinks from '@/app/dashboard/components/client/nav-links/nav-links';
+import NavLinks from '@/app/dashboard/components/nav-links';
 import Link from 'next/link';
 
 export default function SideNav() {

src/app/dashboard/layout.tsx

@@ -1,20 +1,13 @@
-"use client"
+import SideNav from "@/app/dashboard/components/sidenav";
-import SideNav from "@/app/dashboard/components/server/sidenav";
-import dashboardAppModule from "@/app/dashboard/module/dashboard-app-module";
-import { DiContext } from "@/bootstrap/di/di-context";
-import { useRef } from "react";
 
  
 export default function Layout({ children }: { children: React.ReactNode }) {
-  const di = useRef(dashboardAppModule())
   return (
-    <DiContext.Provider value={di.current}>
     <div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
       <div className="w-full flex-none md:w-64">
         <SideNav />
       </div>
       <div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
     </div>
-    </DiContext.Provider>
   );
 }

src/app/dashboard/loading.tsx

@@ -1,5 +0,0 @@
-import DashboardSkeleton from "@/app/dashboard/components/server/skeletons/skeletons";
-
-export default function Loading() {
-  return <DashboardSkeleton />;
-}

src/app/dashboard/module/dashboard-app-module.ts

@@ -1,9 +1,27 @@
-import CreateRandomInvoiceButtonVM from "@/app/dashboard/vm/create-random-invoice-button-vm";
 import di from "@/bootstrap/di/init-di"
+import fetchCustomerInvoicesUsecase from "@/feature/core/customer-invoice/domain/usecase/fetch-customer-invoices-usecase";
+import fetchCustomersUsecase from "@/feature/core/customer/domain/usecase/fetch-customers-usecase";
+import fetchAllInvoicesAmountUsecase from "@/feature/core/invoice/domain/usecase/fetch-all-invoices-amount-usecase";
+import fetchRevenuesUsecase from "@/feature/core/revenue/domain/usecase/fetch-revenues-usecase";
 
 export default function dashboardAppModule() {
     const dashboardDi = di.createChildContainer()
     
-    dashboardDi.register(CreateRandomInvoiceButtonVM, CreateRandomInvoiceButtonVM)
+    dashboardDi.register(fetchCustomersUsecase.name, {
+        useValue: fetchCustomersUsecase
+    })
+
+    dashboardDi.register(fetchAllInvoicesAmountUsecase.name, {
+        useValue: fetchAllInvoicesAmountUsecase
+    })
+    dashboardDi.register(fetchAllInvoicesAmountUsecase.name, {
+        useValue: fetchAllInvoicesAmountUsecase
+    })
+    dashboardDi.register(fetchCustomerInvoicesUsecase.name, {
+        useValue: fetchCustomerInvoicesUsecase
+    })
+    dashboardDi.register(fetchRevenuesUsecase.name, {
+        useValue: fetchRevenuesUsecase
+    })
     return dashboardDi
 }

src/app/dashboard/vm/create-random-invoice-button-vm.ts

@@ -1,15 +0,0 @@
-import ButtonVm from "@/app/components/button/button-vm";
-import BaseVM from "@/bootstrap/helpers/vm/base-vm";
-
-export default class CreateRandomInvoiceButtonVM extends BaseVM<ButtonVm> {
-    useVM(): ButtonVm {
-        return {
-            props: {
-                title: "Button Title"
-            },
-            onClick: () => {
-                console.log('clicked');
-            }
-        }
-    }
-} 

src/app/lib/placeholder-data.js

@@ -0,0 +1,188 @@
+// 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,21 +1,13 @@
 import Revenue from "@/feature/core/revenue/domain/entity/revenue";
-import fetchRevenuesUsecase from "@/feature/core/revenue/domain/usecase/fetch-revenues-usecase";
 
-export default async function revenueChartController() {
+export const formatCurrency = (amount: number) => {
-  const revenue = await fetchRevenuesUsecase();
+  return (amount / 100).toLocaleString('en-US', {
-  const chartHeight = 350;
+    style: 'currency',
+    currency: 'USD',
+  });
+};
 
-  const { yAxisLabels, topLabel } = generateYAxis(revenue);
+export const generateYAxis = (revenue: Revenue[]) => {
-
-  return {
-    revenue,
-    chartHeight,
-    yAxisLabels,
-    topLabel
-  }
-}
-
-function generateYAxis(revenue: Revenue[]) {
   // Calculate what labels we need to display on the y-axis
   // based on highest record and in 1000s
   const yAxisLabels = [];

src/bootstrap/helpers/view/base-view.tsx

@@ -69,17 +69,13 @@ export default abstract class BaseView<
   IVM extends IVMParent,
   PROPS extends IPropParent = undefined,
 > extends Component<BaseProps<IVM, PROPS>> {
+  /* -------------------------------- Abstracts ------------------------------- */
   protected abstract Build(props: BuildProps<IVM, PROPS>): ReactNode;
 
-  protected get componentName() {
+  /* -------------------------------- Renderer -------------------------------- */
-    return this.constructor.name
-  }
-
   render(): ReactNode {
     const { vm, restProps, memoizedByVM, children, ...rest } = this.props;
     
-    VvmConnector.displayName = this.componentName
-  
     return (
       <VvmConnector
         View={this.Build}

src/feature/common/feature-helpers.ts

@@ -1,6 +0,0 @@
-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,7 +1,8 @@
+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";

yarn.lock

@@ -613,23 +613,11 @@
   resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
   integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
 
-"@radix-ui/react-compose-refs@1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz#656432461fc8283d7b591dcf0d79152fae9ecc74"
-  integrity sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==
-
 "@radix-ui/react-icons@^1.3.1":
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-icons/-/react-icons-1.3.1.tgz#462c85fd726a77854cd5956e29eb19a575aa7ce5"
   integrity sha512-QvYompk0X+8Yjlo/Fv4McrzxohDdM5GgLHyQcPpcsPvlOSXCGFjdbuyGL5dzRbg0GpknAjQJJZzdiRK7iWVuFQ==
 
-"@radix-ui/react-slot@^1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.1.0.tgz#7c5e48c36ef5496d97b08f1357bb26ed7c714b84"
-  integrity sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==
-  dependencies:
-    "@radix-ui/react-compose-refs" "1.1.0"
-
 "@rollup/rollup-android-arm-eabi@4.24.3":
   version "4.24.3"
   resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.24.3.tgz#49a2a9808074f2683667992aa94b288e0b54fc82"