feat: scaffold fetching of user receipts

Author: bassgeta

src/app/dashboard/receipts/page.tsx

@@ -0,0 +1,16 @@
+import { DashboardReceipts } from "@/components/dashboard/receipts";
+import { getCurrentSession } from "@/server/auth";
+import { api } from "@/trpc/server";
+import { redirect } from "next/navigation";
+
+export default async function ReceiptsPage() {
+  const { user } = await getCurrentSession();
+
+  if (!user) {
+    redirect("/");
+  }
+
+  const clientPayments = await api.ecommerce.getAllUserReceipts.query();
+
+  return <DashboardReceipts initialClientPayments={clientPayments} />;
+}

src/components/dashboard-navigation.tsx

@@ -14,14 +14,16 @@ export function DashboardNavigation() {
       setActiveTab("pay");
     } else if (pathname.includes("/subscriptions")) {
       setActiveTab("subscriptions");
+    } else if (pathname.includes("/receipts")) {
+      setActiveTab("receipts");
     } else {
       setActiveTab("get-paid");
     }
   }, [pathname]);
 
   return (
     <Tabs value={activeTab} className="w-full mb-8">
-      <TabsList className="grid w-full grid-cols-3">
+      <TabsList className="grid w-full grid-cols-4">
         <TabsTrigger value="get-paid" asChild>
           <Link href="/dashboard/get-paid">Get Paid</Link>
         </TabsTrigger>
@@ -31,6 +33,9 @@ export function DashboardNavigation() {
         <TabsTrigger value="subscriptions" asChild>
           <Link href="/dashboard/subscriptions">Subscriptions</Link>
         </TabsTrigger>
+        <TabsTrigger value="receipts" asChild>
+          <Link href="/dashboard/receipts">Receipts</Link>
+        </TabsTrigger>
       </TabsList>
     </Tabs>
   );

src/components/dashboard/receipts.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import type { ClientPayment } from "@/server/db/schema";
+
+interface DashboardReceiptsProps {
+  initialClientPayments: ClientPayment[];
+}
+
+export function DashboardReceipts({
+  initialClientPayments,
+}: DashboardReceiptsProps) {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-semibold">My Receipts</h1>
+        <p className="text-sm text-muted-foreground">
+          View all your payment receipts from ecommerce transactions
+        </p>
+      </div>
+      <div className="p-8 bg-zinc-50 rounded-lg text-center">
+        <p className="text-zinc-600">Receipts component coming soon...</p>
+        <p className="text-sm text-zinc-500 mt-2">
+          Found {initialClientPayments.length} payment receipts
+        </p>
+      </div>
+    </div>
+  );
+}

src/server/routers/ecommerce.ts

@@ -5,7 +5,7 @@ import {
   ecommerceClientApiSchema,
   editecommerceClientApiSchema,
 } from "@/lib/schemas/ecommerce";
-import { and, eq, not } from "drizzle-orm";
+import { and, eq, not, sql } from "drizzle-orm";
 import { ulid } from "ulid";
 import { z } from "zod";
 import { clientPaymentTable, ecommerceClientTable } from "../db/schema";
@@ -161,4 +161,19 @@ export const ecommerceRouter = router({
       throw toTRPCError(error);
     }
   }),
+  getAllUserReceipts: protectedProcedure.query(async ({ ctx }) => {
+    const { db, user } = ctx;
+    try {
+      const receipts = await db
+        .select()
+        .from(clientPaymentTable)
+        .where(
+          sql`${clientPaymentTable.customerInfo}->>'email' = ${user.email}`,
+        );
+
+      return receipts;
+    } catch (error) {
+      throw toTRPCError(error);
+    }
+  }),
 });