Merge pull request #9 from Divyateja04/transactions

Adding transaction display for customer
thenicekat · Mar 2, 2024 · e8163ac · e8163ac
2 parents 5fd3177 + a6977e1
commit e8163ac
Show file tree

Hide file tree

Showing 5 changed files with 593 additions and 116 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules/
diff --git a/frontend/app/user/dashboard/page.tsx b/frontend/app/user/dashboard/page.tsx
@@ -7,8 +7,12 @@ import { useState } from "react";
 import { Button } from "@nextui-org/button";
 import axios from "axios";
 import { siteConfig } from "@/config/site";
-import { User } from "@/types";
+import { User, Post } from "@/types";
 import { HttpCodes } from "@/types/HttpCodes";
+import { Table, TableHeader, TableBody, TableColumn, TableRow, TableCell } from "@nextui-org/table";
+import { Chip } from "@nextui-org/chip";
+import { Tabs, Tab } from "@nextui-org/tabs";
+import { HandRaisedIcon, BanknotesIcon, CreditCardIcon } from '@heroicons/react/24/solid'
 
 type UserProfile = {
   name: string;
@@ -22,6 +26,26 @@ export default function UserProfile() {
   const [message, setMessage] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
 
+  const [userPosts, setUserPosts] = useState<Post[]>([]);
+
+  const fetchUserPosts = async () => {
+    try {
+      const response = await axios.get(
+        siteConfig.server_url + "/post/my",
+        {
+          params: {},
+          withCredentials: true,
+        }
+      );
+
+      setUserPosts(response.data.data);
+      setError(null);
+    } catch (err) {
+      console.error("Error fetching user posts:", err);
+      setError("Error fetching user posts.");
+    }
+  };
+
   const fetchUserData = async () => {
     try {
       const response = await axios.get(
@@ -47,6 +71,7 @@ export default function UserProfile() {
 
   useEffect(() => {
     fetchUserData();
+    fetchUserPosts();
   }, []);
 
   const onSubmit = async (data: User) => {
@@ -108,6 +133,50 @@ export default function UserProfile() {
           </Button>
         </div>
       </Form>
+
+      <h1 className={title()}>Transactions</h1>
+      <div className="p-2">
+        <Tabs aria-label="Options" color="primary" variant="bordered">
+          <Tab
+            key="myposts"
+            title={
+              <div className="flex items-center space-x-2">
+                <BanknotesIcon className="h-5 w-5" />
+                <span>My Posts</span>
+              </div>
+            }
+          >
+            <Table aria-label="Example static collection table">
+              <TableHeader>
+                <TableColumn>Post content</TableColumn>
+                <TableColumn>The guy who accepted it</TableColumn>
+                <TableColumn>Points</TableColumn>
+              </TableHeader>
+              <TableBody>
+                {userPosts.map((post, index) => (
+                  <TableRow key={index}>
+                    <TableCell>{post.source} to {post.destination}</TableCell>
+                    <TableCell>{post.author ? <Chip color="success">post.author.name</Chip> : <Chip color="default">Not accepted</Chip>}</TableCell>
+                    <TableCell>{post.costInPoints}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </Tab>
+
+          <Tab
+            key="acceptedposts"
+            title={
+              <div className="flex items-center space-x-2">
+                <HandRaisedIcon className="h-5 w-5" />
+                <span>The Posts I accepted</span>
+              </div>
+            }
+          >
+            Wow so empty <CreditCardIcon className="h-5 w-5" />
+          </Tab>
+        </Tabs>
+      </div>
     </div>
   );
 }
diff --git a/frontend/components/Post.tsx b/frontend/components/Post.tsx
@@ -2,7 +2,6 @@ import React from "react";
 import { Card, CardHeader, CardBody, CardFooter } from "@nextui-org/card";
 import { Divider } from "@nextui-org/divider";
 import { Link } from "@nextui-org/link";
-import { Avatar } from "@nextui-org/avatar";
 import { Chip } from "@nextui-org/chip";
 import { Post } from "@/types";
 
@@ -15,8 +14,11 @@ export default function PostComponent({
 }: Post) {
     return (
         <Card className="min-w-md max-w-[400px] m-3">
-            <CardHeader className="flex gap-3">
-                <Avatar isBordered radius="lg" name={author.name} />
+            <CardHeader className="flex gap-3 flex-row">
+                <img
+                    src={`https://api.dicebear.com/7.x/notionists/svg?seed=${author.email}&size=40&radius=0&scale=200`}
+                    alt="avatar"
+                />
                 <div className="flex flex-col">
                     <p className="text-md">{source} to {destination}</p>
                     <p className="text-small text-default-500">{author.name}</p>
@@ -32,7 +34,7 @@ export default function PostComponent({
                 <Link
                     isExternal
                     showAnchorIcon
-                    href="https://github.com/nextui-org/nextui"
+                    href={`tel:${author.phoneNumber}`}
                 >
                     Request this geddit
                 </Link>