update components to use stripe api naming conventions

app/(app)/account/_components/invoice-card.tsx

@@ -1,22 +1,12 @@
 import { Suspense } from "react"
-import Link from "next/link"
-import {
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  ChevronsLeftIcon,
-  ChevronsRightIcon,
-  ExternalLink,
-} from "lucide-react"
+import { ExternalLink } from "lucide-react"
 import { currentUser } from "@/services/currentUser"
-import { invoicesLimit } from "@/lib/constants"
-import { centsToCurrency, cn } from "@/lib/utils"
+import { centsToCurrency } from "@/lib/utils"
 import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
 import {
   Card,
   CardContent,
   CardDescription,
-  CardFooter,
   CardHeader,
   CardTitle,
 } from "@/components/ui/card"
@@ -80,17 +70,19 @@ async function LoadInvoiceTableRows({ page }: Readonly<{ page: number }>) {
         <TableRow key={invoice.id}>
           <TableCell>
             <LinkExternal
-              href={invoice.hostedInvoiceUrl ?? "#"}
+              href={invoice.hosted_invoice_url ?? "#"}
               className="group font-medium"
             >
               <div className="flex flex-row items-center md:w-60">
-                {invoice.invoiceNumber}
+                {invoice.number}
                 <ExternalLink className="ml-1 hidden size-4 group-hover:block" />
               </div>
             </LinkExternal>
           </TableCell>
-          <TableCell>{invoice.created.toLocaleDateString()}</TableCell>
-          <TableCell>{centsToCurrency(invoice.amountPaid)}</TableCell>
+          <TableCell>
+            {new Date(invoice.created).toLocaleDateString()}
+          </TableCell>
+          <TableCell>{centsToCurrency(invoice.amount_paid)}</TableCell>
           <TableCell className="hidden md:block">
             <Badge>{invoice.status}</Badge>
           </TableCell>
@@ -100,103 +92,6 @@ async function LoadInvoiceTableRows({ page }: Readonly<{ page: number }>) {
   )
 }
 
-async function LoadPagination({ page }: Readonly<{ page: number }>) {
-  const user = await currentUser.invoicesTotal()
-
-  if (!user?.invoicesTotal) {
-    return null
-  }
-
-  const totalPages = Math.ceil(user.invoicesTotal / invoicesLimit)
-  const firstPageDisabled = page === 1
-  const lastPageDisabled = totalPages === page
-  const previousPageDisabled = page === 1
-  const nextPageDisabled = totalPages === page
-  const nextPage = page + 1
-  const previousPage = page - 1
-
-  if (totalPages <= 1) {
-    return null
-  }
-
-  return (
-    <div className="flex w-full items-center justify-center space-x-2">
-      <Button
-        asChild
-        variant="outline"
-        className={cn(
-          "size-8 p-0",
-          firstPageDisabled && "bg-muted text-muted-foreground"
-        )}
-      >
-        <Link
-          href="/account?page=1"
-          aria-disabled={firstPageDisabled}
-          tabIndex={firstPageDisabled ? -1 : 0}
-          className={firstPageDisabled ? "pointer-events-none" : ""}
-        >
-          <span className="sr-only">Go to first page</span>
-          <ChevronsLeftIcon className="size-4" />
-        </Link>
-      </Button>
-      <Button
-        asChild
-        variant="outline"
-        className={cn(
-          "size-8 p-0",
-          previousPageDisabled && "bg-muted text-muted-foreground"
-        )}
-      >
-        <Link
-          href={`/account?page=${previousPage}`}
-          aria-disabled={previousPageDisabled}
-          tabIndex={previousPageDisabled ? -1 : 0}
-          className={previousPageDisabled ? "pointer-events-none" : ""}
-        >
-          <span className="sr-only">Go to previous page</span>
-          <ChevronLeftIcon className="size-4" />
-        </Link>
-      </Button>
-      <Button
-        asChild
-        variant="outline"
-        className={cn(
-          "size-8 p-0",
-          nextPageDisabled && "bg-muted text-muted-foreground"
-        )}
-      >
-        <Link
-          href={`/account?page=${nextPage}`}
-          aria-disabled={nextPageDisabled}
-          tabIndex={nextPageDisabled ? -1 : 0}
-          className={nextPageDisabled ? "pointer-events-none" : ""}
-        >
-          <span className="sr-only">Go to next page</span>
-          <ChevronRightIcon className="size-4" />
-        </Link>
-      </Button>
-      <Button
-        asChild
-        variant="outline"
-        className={cn(
-          "size-8 p-0",
-          lastPageDisabled && "bg-muted text-muted-foreground"
-        )}
-      >
-        <Link
-          href={`/account?page=${totalPages}`}
-          aria-disabled={lastPageDisabled}
-          tabIndex={lastPageDisabled ? -1 : 0}
-          className={lastPageDisabled ? "pointer-events-none" : ""}
-        >
-          <span className="sr-only">Go to last page</span>
-          <ChevronsRightIcon className="size-4" />
-        </Link>
-      </Button>
-    </div>
-  )
-}
-
 export function InvoiceCard({ page }: Readonly<{ page: number }>) {
   return (
     <Card className="w-full">
@@ -221,13 +116,6 @@ export function InvoiceCard({ page }: Readonly<{ page: number }>) {
           </ErrorBoundary>
         </Table>
       </CardContent>
-      <CardFooter>
-        <ErrorBoundary fallback={null}>
-          <Suspense fallback={null}>
-            <LoadPagination page={page} />
-          </Suspense>
-        </ErrorBoundary>
-      </CardFooter>
     </Card>
   )
 }

app/(app)/dashboard/_components/recent-transactions-card.tsx

@@ -39,9 +39,9 @@ async function LoadRecentTransactions() {
       {recentTransactions.map(transaction => (
         <TableRow key={transaction.id}>
           <TableCell className="hidden font-medium md:table-cell">
-            {transaction.user.email}
+            {transaction.customer_email}
           </TableCell>
-          <TableCell>${transaction.amountPaid / 100}</TableCell>
+          <TableCell>${transaction.amount_paid / 100}</TableCell>
           <TableCell className="text-right">{transaction.status}</TableCell>
         </TableRow>
       ))}

services/analytic.ts

@@ -203,7 +203,7 @@ export const analytic = {
   gross: cache(async (range: { from: Date; to: Date }) => {
     const invoices = await invoice.list({ range })
     const gross = invoices.reduce((acc, invoice) => {
-      return acc + invoice.amountPaid
+      return acc + invoice.amount_paid
     }, 0)
 
     // convert from cents to dollars with 2 decimal places