Added transactions page

apps/user-app/.prettierignore

@@ -0,0 +1,2 @@
+node_modules
+.github

apps/user-app/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "none"
+}

apps/user-app/app/(dashboard)/transactions/page.tsx

@@ -1,6 +1,112 @@
+import prisma from "@repo/db/client"
+import { getServerSession } from "next-auth"
+import { authOptions } from "../../lib/auth"
+import { OnRampTransactions } from "../../../components/OnRampTransactions"
 
-export default function() {
-    return <div>
+async function getOnRampTransactions(status: any) {
+  const session = await getServerSession(authOptions)
+  const txns = await prisma.onRampTransaction.findMany({
+    where: {
+      userId: Number(session?.user?.id),
+      status: status,
+    },
+  })
+  return txns.map((t) => ({
+    time: t.startTime,
+    amount: t.amount,
+    status: t.status,
+    provider: t.provider,
+  }))
+}
+
+async function getsentP2PTransactions() {
+  const session = await getServerSession(authOptions)
+  const txns = await prisma.p2pTransfer.findMany({
+    where: {
+      fromUserId: Number(session?.user?.id),
+    },
+  })
+
+  return txns.map((t) => ({
+    time: t.timestamp,
+    amount: t.amount,
+    status: "Success",
+    provider: t.toUserId,
+  }))
+}
+
+async function getreceiveP2PTransactions() {
+  const session = await getServerSession(authOptions)
+  const txns = await prisma.p2pTransfer.findMany({
+    where: {
+      toUserId: Number(session?.user?.id),
+    },
+  })
+
+  return txns.map((t) => ({
+    time: t.timestamp,
+    amount: t.amount,
+    status: "Success",
+    provider: t.fromUserId,
+  }))
+}
+
+export default async function () {
+  const successTransactions = await getOnRampTransactions("Success")
+  const processingTransactions = await getOnRampTransactions("Processing")
+  const failureTransactions = await getOnRampTransactions("Failure")
+  const sentTransactions: any = await getsentP2PTransactions()
+  const receivedTransactions: any = await getreceiveP2PTransactions()
+
+  return (
+    <div className="flex flex-col gap-5">
+      <h1 className="text-4xl text-[#6a51a6] pt-8 mb-8 font-bold">
         Transactions
+      </h1>
+
+      <div className="w-[80vw] grid grid-cols-1 md:grid-cols-2 px-10 gap-3">
+        <h1 className="text-2xl text-[#6a51a6] pt-2 font-bold col-span-2">
+          P2P Transactions
+        </h1>
+        <div>
+          <OnRampTransactions
+            title={"Sent transactions"}
+            transactions={sentTransactions}
+          />
+        </div>
+        <div>
+          <OnRampTransactions
+            title={"Received transactions"}
+            transactions={receivedTransactions}
+          />
+        </div>
+      </div>
+
+      <div className="w-[80vw] grid grid-cols-1 md:grid-cols-2 px-10 gap-3">
+        <h1 className="text-2xl text-[#6a51a6] pt-2 font-bold col-span-2">
+          Wallet Transactions
+        </h1>
+        <div>
+          <OnRampTransactions
+            title={"Successfull transactions"}
+            transactions={successTransactions}
+          />
+        </div>
+
+        <div>
+          <OnRampTransactions
+            title={"Processing Transactions"}
+            transactions={processingTransactions}
+          />
+        </div>
+
+        <div>
+          <OnRampTransactions
+            title={"Failure Transactions"}
+            transactions={failureTransactions}
+          />
+        </div>
+      </div>
     </div>
-}
+  )
+}

apps/user-app/app/(dashboard)/transfer/page.tsx

@@ -6,51 +6,53 @@ import { getServerSession } from "next-auth";
 import { authOptions } from "../../lib/auth";
 
 async function getBalance() {
-    const session = await getServerSession(authOptions);
-    const balance = await prisma.balance.findFirst({
-        where: {
-            userId: Number(session?.user?.id)
-        }
-    });
-    return {
-        amount: balance?.amount || 0,
-        locked: balance?.locked || 0
+  const session = await getServerSession(authOptions);
+  const balance = await prisma.balance.findFirst({
+    where: {
+      userId: Number(session?.user?.id)
     }
+  });
+  return {
+    amount: balance?.amount || 0,
+    locked: balance?.locked || 0
+  };
 }
 
 async function getOnRampTransactions() {
-    const session = await getServerSession(authOptions);
-    const txns = await prisma.onRampTransaction.findMany({
-        where: {
-            userId: Number(session?.user?.id)
-        }
-    });
-    return txns.map(t => ({
-        time: t.startTime,
-        amount: t.amount,
-        status: t.status,
-        provider: t.provider
-    }))
+  const session = await getServerSession(authOptions);
+  const txns = await prisma.onRampTransaction.findMany({
+    where: {
+      userId: Number(session?.user?.id)
+    }
+  });
+  return txns.map((t) => ({
+    time: t.startTime,
+    amount: t.amount,
+    status: t.status,
+    provider: t.provider
+  }));
 }
 
-export default async function() {
-    const balance = await getBalance();
-    const transactions = await getOnRampTransactions();
+export default async function () {
+  const balance = await getBalance();
+  const transactions = await getOnRampTransactions();
 
-    return <div className="w-screen">
-        <div className="text-4xl text-[#6a51a6] pt-8 mb-8 font-bold">
-            Transfer
+  return (
+    <div className="w-screen">
+      <div className="text-4xl text-[#6a51a6] pt-8 mb-8 font-bold">
+        Transfer
+      </div>
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 p-4">
+        <div>
+          <AddMoney />
         </div>
-        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 p-4">
-            <div>
-                <AddMoney />
-            </div>
-            <div>
-                <BalanceCard amount={balance.amount} locked={balance.locked} />
-                <div className="pt-4">
-                    <OnRampTransactions transactions={transactions} />
-                </div>
-            </div>
+        <div>
+          <BalanceCard amount={balance.amount} locked={balance.locked} />
+          <div className="pt-4">
+            <OnRampTransactions transactions={transactions} />
+          </div>
         </div>
+      </div>
     </div>
-}
+  );
+}

apps/user-app/components/OnRampTransactions.tsx

@@ -1,39 +1,55 @@
-import { Card } from "@repo/ui/card"
+import { Card } from '@repo/ui/card'
+
+const getStatement = (status: string) => {
+  if (status === 'Success') {
+    return 'Received INR'
+  } else if (status === 'Processing') {
+    return 'To be Received INR'
+  } else {
+    return 'Failed'
+  }
+}
 
 export const OnRampTransactions = ({
-    transactions
+  transactions,
+  title = 'Recent wallet Transactions',
 }: {
-    transactions: {
-        time: Date,
-        amount: number,
-        // TODO: Can the type of `status` be more specific?
-        status: string,
-        provider: string
-    }[]
+  transactions: {
+    time: Date
+    amount: number
+    // TODO: Can the type of `status` be more specific?
+    status: string
+    provider: string
+  }[]
+  title?: string
 }) => {
-    if (!transactions.length) {
-        return <Card title="Recent Transactions">
-            <div className="text-center pb-8 pt-8">
-                No Recent transactions
-            </div>
-        </Card>
-    }
-    return <Card title="Recent Transactions">
-        <div className="pt-2">
-            {transactions.map(t => <div className="flex justify-between">
-                <div>
-                    <div className="text-sm">
-                        Received INR
-                    </div>
-                    <div className="text-slate-600 text-xs">
-                        {t.time.toDateString()}
-                    </div>
-                </div>
-                <div className="flex flex-col justify-center">
-                    + Rs {t.amount / 100}
-                </div>
+  if (!transactions.length) {
+    return (
+      <Card title={title}>
+        <div className="text-center pb-8 pt-8">No {title}</div>
+      </Card>
+    )
+  }
 
-            </div>)}
-        </div>
+  return (
+    <Card title={title}>
+      <div className="pt-2 flex flex-col gap-4">
+        {transactions.map((t) => (
+          <>
+            <div className="flex justify-between">
+              <div>
+                <div className="text-sm">{getStatement(t.status)}</div>
+                <div className="text-slate-600 text-xs">
+                  {t.time.toDateString()}
+                </div>
+              </div>
+              <div className="flex flex-col justify-center">
+                + Rs {t.amount / 100}
+              </div>
+            </div>
+          </>
+        ))}
+      </div>
     </Card>
-}
+  )
+}