update

app/dashboard/(overview)/loading.tsx

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

app/dashboard/(overview)/page.tsx

@@ -1,36 +1,38 @@
-import CardWrapper, { Card } from '@/app/ui/dashboard/cards';
-import RevenueChart from '@/app/ui/dashboard/revenue-chart';
-import LatestInvoices from '@/app/ui/dashboard/latest-invoices';
-import { lusitana } from '@/app/ui/fonts';
-import { Suspense } from 'react';
-import { CardSkeleton, LatestInvoicesSkeleton, RevenueChartSkeleton } from '@/app/ui/skeletons';
-import { Metadata } from 'next';
- 
-export const metadata: Metadata = {
-  title: 'Dashboard',
-};
-export default async function Page() {
-
-  return (
-    <main>
-      <h1 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>
-        Dashboard
-      </h1>
-      <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
-        <Suspense fallback={<CardSkeleton />}>
-          <CardWrapper />
-        </Suspense>
-      </div>
-      <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-8">
-
-        <Suspense fallback={<RevenueChartSkeleton />}>
-          <RevenueChart />
-        </Suspense>
-
-        <Suspense fallback={<LatestInvoicesSkeleton />}>
-          <LatestInvoices />
-        </Suspense>
-      </div>
-    </main>
-  );
-}
+import type { Metadata } from "next";
+import { Suspense } from "react";
+import CardWrapper from "@/app/ui/dashboard/cards";
+import LatestInvoices from "@/app/ui/dashboard/latest-invoices";
+import RevenueChart from "@/app/ui/dashboard/revenue-chart";
+import { lusitana } from "@/app/ui/fonts";
+import {
+  CardSkeleton,
+  LatestInvoicesSkeleton,
+  RevenueChartSkeleton,
+} from "@/app/ui/skeletons";
+
+export const metadata: Metadata = {
+  title: "Dashboard",
+};
+export default async function Page() {
+  return (
+    <main>
+      <h1 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>
+        Dashboard
+      </h1>
+      <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
+        <Suspense fallback={<CardSkeleton />}>
+          <CardWrapper />
+        </Suspense>
+      </div>
+      <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-8">
+        <Suspense fallback={<RevenueChartSkeleton />}>
+          <RevenueChart />
+        </Suspense>
+
+        <Suspense fallback={<LatestInvoicesSkeleton />}>
+          <LatestInvoices />
+        </Suspense>
+      </div>
+    </main>
+  );
+}

app/dashboard/customers/page.tsx

@@ -1,9 +1,9 @@
-export default function Page() {
-  return <p>Customers Page</p>;
-  
-}
-import { Metadata } from 'next';
- 
-export const metadata: Metadata = {
-  title: 'Customers',
-};
+export default function Page() {
+  return <p>Customers Page</p>;
+}
+
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Customers",
+};

app/dashboard/invoices/[id]/edit/not-found.tsx

@@ -1,6 +1,6 @@
-import Link from 'next/link';
-import { FaceFrownIcon } from '@heroicons/react/24/outline';
- 
+import { FaceFrownIcon } from "@heroicons/react/24/outline";
+import Link from "next/link";
+
 export default function NotFound() {
   return (
     <main className="flex h-full flex-col items-center justify-center gap-2">
@@ -15,4 +15,4 @@ export default function NotFound() {
       </Link>
     </main>
   );
-}
+}

app/dashboard/invoices/[id]/edit/page.tsx

@@ -1,11 +1,11 @@
-import Form from '@/app/ui/invoices/edit-form';
-import Breadcrumbs from '@/app/ui/invoices/breadcrumbs';
-import { fetchInvoiceById, fetchCustomers } from '@/app/lib/data';
-import { notFound } from 'next/navigation'; 
-import { Metadata } from 'next';
- 
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { fetchCustomers, fetchInvoiceById } from "@/app/lib/data";
+import Breadcrumbs from "@/app/ui/invoices/breadcrumbs";
+import Form from "@/app/ui/invoices/edit-form";
+
 export const metadata: Metadata = {
-  title: 'Edit invoices',
+  title: "Edit invoices",
 };
 
 export default async function Page(props: { params: Promise<{ id: string }> }) {
@@ -16,17 +16,17 @@ export default async function Page(props: { params: Promise<{ id: string }> }) {
     fetchCustomers(),
   ]);
 
-if (!invoice) {
+  if (!invoice) {
     notFound();
-}
+  }
 
   return (
     <main>
       <Breadcrumbs
         breadcrumbs={[
-          { label: 'Invoices', href: '/dashboard/invoices' },
+          { label: "Invoices", href: "/dashboard/invoices" },
           {
-            label: 'Edit Invoice',
+            label: "Edit Invoice",
             href: `/dashboard/invoices/${id}/edit`,
             active: true,
           },
@@ -35,4 +35,4 @@ if (!invoice) {
       <Form invoice={invoice} customers={customers} />
     </main>
   );
-}
+}

app/dashboard/invoices/create/page.tsx

@@ -1,23 +1,23 @@
-import Form from '@/app/ui/invoices/create-form';
-import Breadcrumbs from '@/app/ui/invoices/breadcrumbs';
-import { fetchCustomers } from '@/app/lib/data';
-import { Metadata } from 'next';
- 
+import type { Metadata } from "next";
+import { fetchCustomers } from "@/app/lib/data";
+import Breadcrumbs from "@/app/ui/invoices/breadcrumbs";
+import Form from "@/app/ui/invoices/create-form";
+
 export const metadata: Metadata = {
-  title: 'Create invoices',
+  title: "Create invoices",
 };
 
 export default async function Page() {
   const customers = await fetchCustomers();
- 
+
   return (
     <main>
       <Breadcrumbs
         breadcrumbs={[
-          { label: 'Invoices', href: '/dashboard/invoices' },
+          { label: "Invoices", href: "/dashboard/invoices" },
           {
-            label: 'Create Invoice',
-            href: '/dashboard/invoices/create',
+            label: "Create Invoice",
+            href: "/dashboard/invoices/create",
             active: true,
           },
         ]}
@@ -25,4 +25,4 @@ export default async function Page() {
       <Form customers={customers} />
     </main>
   );
-}
+}

app/dashboard/invoices/error.tsx

@@ -1,7 +1,7 @@
-'use client';
- 
-import { useEffect } from 'react';
- 
+"use client";
+
+import { useEffect } from "react";
+
 export default function Error({
   error,
   reset,
@@ -13,7 +13,7 @@ export default function Error({
     // Optionally log the error to an error reporting service
     console.error(error);
   }, [error]);
- 
+
   return (
     <main className="flex h-full flex-col items-center justify-center">
       <h2 className="text-center">Something went wrong!</h2>
@@ -28,4 +28,4 @@ export default function Error({
       </button>
     </main>
   );
-}
+}

app/dashboard/invoices/page.tsx

@@ -1,43 +1,43 @@
-import Pagination from '@/app/ui/invoices/pagination';
-import Search from '@/app/ui/search';
-import Table from '@/app/ui/invoices/table';
-import { CreateInvoice } from '@/app/ui/invoices/buttons';
-import { lusitana } from '@/app/ui/fonts';
-import { Suspense } from 'react';
-import { InvoicesTableSkeleton } from '@/app/ui/skeletons';
-import { fetchInvoicesPages } from '@/app/lib/data';
-import { Metadata } from 'next';
- 
-export const metadata: Metadata = {
-  title: 'Invoices',
-};
-
-export default async function Page(props: {
-  searchParams?: Promise<{
-    query?: string;
-    page?: string;
-  }>;
-}) {
-  const searchParams = await props.searchParams;
-  const query = searchParams?.query || '';
-  const currentPage = Number(searchParams?.page) || 1;
-  const totalPages = await fetchInvoicesPages(query);
- 
-  return (
-    <div className="w-full">
-      <div className="flex w-full items-center justify-between">
-        <h1 className={`${lusitana.className} text-2xl`}>Invoices</h1>
-      </div>
-      <div className="mt-4 flex items-center justify-between gap-2 md:mt-8">
-        <Search {...Search} />
-        <CreateInvoice />
-      </div>
-      <Suspense key={query + currentPage} fallback={<InvoicesTableSkeleton />}>
-        <Table query={query} currentPage={currentPage} />
-      </Suspense>
-      <div className="mt-5 flex w-full justify-center">
-        <Pagination totalPages={totalPages} />
-      </div>
-    </div>
-  );
-}
+import type { Metadata } from "next";
+import { Suspense } from "react";
+import { fetchInvoicesPages } from "@/app/lib/data";
+import { lusitana } from "@/app/ui/fonts";
+import { CreateInvoice } from "@/app/ui/invoices/buttons";
+import Pagination from "@/app/ui/invoices/pagination";
+import Table from "@/app/ui/invoices/table";
+import Search from "@/app/ui/search";
+import { InvoicesTableSkeleton } from "@/app/ui/skeletons";
+
+export const metadata: Metadata = {
+  title: "Invoices",
+};
+
+export default async function Page(props: {
+  searchParams?: Promise<{
+    query?: string;
+    page?: string;
+  }>;
+}) {
+  const searchParams = await props.searchParams;
+  const query = searchParams?.query || "";
+  const currentPage = Number(searchParams?.page) || 1;
+  const totalPages = await fetchInvoicesPages(query);
+
+  return (
+    <div className="w-full">
+      <div className="flex w-full items-center justify-between">
+        <h1 className={`${lusitana.className} text-2xl`}>Invoices</h1>
+      </div>
+      <div className="mt-4 flex items-center justify-between gap-2 md:mt-8">
+        <Search {...Search} />
+        <CreateInvoice />
+      </div>
+      <Suspense key={query + currentPage} fallback={<InvoicesTableSkeleton />}>
+        <Table query={query} currentPage={currentPage} />
+      </Suspense>
+      <div className="mt-5 flex w-full justify-center">
+        <Pagination totalPages={totalPages} />
+      </div>
+    </div>
+  );
+}

app/dashboard/layout.tsx

@@ -1,12 +1,12 @@
-import SideNav from '@/app/ui/dashboard/sidenav';
- 
-export default function Layout({ children }: { children: React.ReactNode }) {
-  return (
-    <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="grow p-6 md:overflow-y-auto md:p-12">{children}</div>
-    </div>
-  );
-}
+import SideNav from "@/app/ui/dashboard/sidenav";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <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="grow p-6 md:overflow-y-auto md:p-12">{children}</div>
+    </div>
+  );
+}