feat: added balance feature

app/(payment)/pay/page.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function page() {
+  return (
+    <div>page</div>
+  )
+}
+
+export default page

app/account/page.tsx

@@ -1,19 +1,45 @@
-import { DarkModeToggle} from "@/components/ThemeToggle";
+import { DarkModeToggle } from "@/components/ThemeToggle";
 import SignOutButton from "@/components/signOutButton";
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
 import React from "react";
-import {getKindeServerSession} from "@kinde-oss/kinde-auth-nextjs/server";
+import Image from "next/image";
+import { getKindeServerSession } from "@kinde-oss/kinde-auth-nextjs/server";
+import { Label } from "@/components/ui/label";
+import { db } from "@/lib/db";
+import { Lightbulb } from "lucide-react";
 
 export default async function account() {
-  const {getUser} = getKindeServerSession();
+  const { getUser } = getKindeServerSession();
   const user = await getUser();
+  const dbUser = await db.user.findFirst({
+    where: {
+      id: user.id as string,
+    },
+})
+
+if (!dbUser) {
+    // create user in db
+    await db.user.create({
+      data: {
+        id: user.id as string,
+        email: user.email as string,
+      },
+    })
+}
   return (
     <div className="relative flex min-h-full flex-col gap-3 bg-neutral-100 p-3 dark:bg-neutral-800">
       <div className="flex h-full min-h-full items-center justify-center rounded-md bg-white p-3 dark:bg-neutral-900">
         {user ? (
           <div className="flex flex-col gap-3 items-center justify-center">
             Hi {user.given_name}
+            <Image
+              className="rounded-xl"
+              src={user.picture as string}
+              alt="Profile Image"
+              width={100}
+              height={100}
+            />
           </div>
         ) : (
           <div className="flex flex-col">You are not Logged In</div>
@@ -27,6 +53,11 @@ export default async function account() {
           <div className="flex w-full justify-center">
             <SignOutButton />
           </div>
+          <div className="flex w-full justify-center">
+            <div className="flex h-10 w-2/3 flex-row items-center justify-center rounded-md border-[1px] border-black bg-white px-2 shadow-2xl dark:bg-black lg:w-48">
+              <span className="flex flex-row items-center justify-center">Balance: {dbUser?.balance} <Lightbulb size={24} strokeWidth={2} /></span>
+            </div>
+          </div>
         </div>
       ) : (
         <div className="flex h-full min-h-full items-center justify-center rounded-md bg-white p-3 dark:bg-neutral-900">
@@ -37,4 +68,4 @@ export default async function account() {
       )}
     </div>
   );
-}
+}

app/api/auth/[kindeAuth]/route.ts

@@ -0,0 +1,10 @@
+import { handleAuth } from '@kinde-oss/kinde-auth-nextjs/server'
+import { NextRequest } from 'next/server'
+
+export async function GET(
+  request: NextRequest,
+  { params }: any
+) {
+  const endpoint = params.kindeAuth
+  return handleAuth(request, endpoint)
+}

app/api/shopping/balance/route.ts

@@ -0,0 +1,32 @@
+import {NextResponse} from "next/server";
+import {getKindeServerSession} from "@kinde-oss/kinde-auth-nextjs/server";
+import { db } from "@/lib/db";
+
+export async function GET() {
+    const {getUser, isAuthenticated} = getKindeServerSession();
+
+    if (await !isAuthenticated()) {
+        return new Response("Unauthorized", {status: 401});
+    }
+    const user = await getUser();
+    const dbUser = await db.user.findFirst({
+        where: {
+          id: user.id as string,
+        },
+    })
+
+    if (!dbUser) {
+        // create user in db
+        const dbUser = await db.user.create({
+          data: {
+            id: user.id as string,
+            email: user.email as string,
+          },
+        })
+    }
+
+
+    const data = {message: "Hello User", id: user.id, balance: dbUser?.balance};
+
+    return NextResponse.json({data});
+}

app/layout.tsx

@@ -30,7 +30,7 @@ export default async function RootLayout({
           defaultTheme="light"
           disableTransitionOnChange
         >
-          <main className="h-full flex-[1] overflow-scroll">{children}</main>
+          <main className="h-full flex-[1] overflow-scroll bg-neutral-100 dark:bg-neutral-800">{children}</main>
           <footer className="grid h-16 w-full grid-cols-3 grid-rows-1 dark:bg-neutral-900 bg-white shadow-2xl">
             <Link
               href="/"

middleware.ts

@@ -0,0 +1,7 @@
+import { authMiddleware } from '@kinde-oss/kinde-auth-nextjs/server'
+
+export const config = {
+  matcher: ['/dashboard/:path*', '/auth-callback'],
+}
+
+export default authMiddleware

prisma/schema.prisma

@@ -10,7 +10,7 @@ model User {
   id            String    @id @unique
   name          String?
   email         String?   @unique
-  image         String?
+  balance       Int? @default(0)
 
   @@map("users")
 }