Add base vm for create invoice button

components.json

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

package.json

@@ -13,6 +13,7 @@
   "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,11 +2,68 @@
 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 <button onClick={vm.onClick} >{vm.props.title}</button>
+        return <ButtonUi onClick={vm.onClick} >{vm.props.title}</ButtonUi> 
     }
 }
+
+
+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

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

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/client/create-random-invoice/create-random-invoice.tsx

@@ -0,0 +1,13 @@
+"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

@@ -0,0 +1,29 @@
+
+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/client/nav-links/nav-links.tsx

@@ -1,25 +1,10 @@
 'use client'
-import { DocumentIcon } from '@/app/components/icons/document';
-import HomeIcon from '@/app/components/icons/home';
-import { UserIcon } from '@/app/components/icons/user';
+import navLinkPersonalVM from '@/app/dashboard/components/client/nav-links/nav-link-controller';
 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 pathname = usePathname()
+  const { links, isLinkActive  } = navLinkPersonalVM()
   return (
     <>
       {links.map((link) => {
@@ -31,7 +16,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': pathname === link.href,
+                'bg-sky-100 text-blue-600': isLinkActive(link),
               },
             )}
           >

src/app/dashboard/components/server/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/server/card/card.tsx

@@ -0,0 +1,29 @@
+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

@@ -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/server/cards/cards.tsx

@@ -0,0 +1,20 @@
+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

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

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

@@ -1,19 +1,13 @@
-import fetchCustomerInvoicesUsecase from '@/feature/core/customer-invoice/domain/usecase/fetch-customer-invoices-usecase';
+import CreateRandomInvoiceContainer from '@/app/dashboard/components/client/create-random-invoice/create-random-invoice';
+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 fetchCustomerInvoicesUsecase();
+  const latestInvoices = await latestInvoicesController();
 
-  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) => {
+  const invoices = latestInvoices.map((invoice, i) => {
             return (
               <div
                 key={invoice.id}
@@ -48,12 +42,22 @@ 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-center pb-2 pt-6">
+        <div className="flex items-end mt-auto 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/server/revenue-chart/revenue-chart-controller.ts

@@ -1,13 +1,21 @@
 import Revenue from "@/feature/core/revenue/domain/entity/revenue";
+import fetchRevenuesUsecase from "@/feature/core/revenue/domain/usecase/fetch-revenues-usecase";
 
-export const formatCurrency = (amount: number) => {
-  return (amount / 100).toLocaleString('en-US', {
-    style: 'currency',
-    currency: 'USD',
-  });
-};
+export default async function revenueChartController() {
+  const revenue = await fetchRevenuesUsecase();
+  const chartHeight = 350;
 
-export const generateYAxis = (revenue: Revenue[]) => {
+  const { yAxisLabels, topLabel } = generateYAxis(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/app/dashboard/components/server/revenue-chart/revenue-chart.tsx

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

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

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

src/app/dashboard/layout.tsx

@@ -1,13 +1,20 @@
-import SideNav from "@/app/dashboard/components/sidenav";
+"use client"
+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 (
-    <div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
-      <div className="w-full flex-none md:w-64">
-        <SideNav />
+    <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>
-      <div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
-    </div>
+    </DiContext.Provider>
   );
 }

src/app/dashboard/loading.tsx

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

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

@@ -1,27 +1,9 @@
+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(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
-    })
+    dashboardDi.register(CreateRandomInvoiceButtonVM, CreateRandomInvoiceButtonVM)
     return dashboardDi
 }

src/app/dashboard/page.tsx

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

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

@@ -0,0 +1,15 @@
+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

@@ -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/bootstrap/helpers/view/base-view.tsx

@@ -69,13 +69,17 @@ 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;
 
-  /* -------------------------------- Renderer -------------------------------- */
+  protected get componentName() {
+    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

@@ -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";

yarn.lock

@@ -613,11 +613,23 @@
   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"