removed random string in responses

components/swipableView.tsx

@@ -0,0 +1,31 @@
+import { useEffect, useRef } from "react"
+
+export  default  function SwipeableViews(
+  { className = "", index, onChangeIndex, ...rootProps }: 
+    { index: number, onChangeIndex: (index: number) => void } & React.HTMLProps<HTMLDivElement>
+) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const scrollTimeout = useRef<number>()
+
+  useEffect(() => {
+    containerRef.current?.children[index]?.scrollIntoView({ behavior: "smooth" })
+  }, [index])
+
+  return (
+    <div
+      {...rootProps}
+      ref={containerRef}
+      className={
+        "flex snap-x snap-mandatory items-stretch overflow-x-scroll " +
+        "*:w-full *:flex-shrink-0 *:snap-center " + className
+      }
+      onScroll={({ currentTarget }) => {
+        if (scrollTimeout.current) clearTimeout(scrollTimeout.current)
+        scrollTimeout.current = window.setTimeout(() => {
+          const pageWidth = currentTarget.scrollWidth / currentTarget.children.length
+          onChangeIndex(Math.round(currentTarget.scrollLeft / pageWidth))
+        }, 100)
+      }}
+    />
+  )
+}

package-lock.json

@@ -12,6 +12,7 @@
         "@lupus-ai/mui-currency-textfield": "^1.0.3",
         "@mui/icons-material": "^5.15.6",
         "@mui/material": "^5.15.6",
+        "@mui/x-data-grid": "^6.19.4",
         "@novu/notification-center": "^0.22.0",
         "next": "latest",
         "openapi-typescript-fetch": "^1.1.3",
@@ -665,6 +666,31 @@
         }
       }
     },
+    "node_modules/@mui/x-data-grid": {
+      "version": "6.19.4",
+      "resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-6.19.4.tgz",
+      "integrity": "sha512-qXBe2mSetdsl3ZPqB/1LpKNkEiaYUiFXIaMHTIjuzLyusXgt+w7UsHYO7R+aJYUU7c3FeHla0R1nwRMY3kZ5ng==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2",
+        "@mui/utils": "^5.14.16",
+        "clsx": "^2.0.0",
+        "prop-types": "^15.8.1",
+        "reselect": "^4.1.8"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@mui/material": "^5.4.1",
+        "@mui/system": "^5.4.1",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/@next/env": {
       "version": "14.1.0",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-14.1.0.tgz",
@@ -1939,6 +1965,11 @@
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
       "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
     },
+    "node_modules/reselect": {
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.8.tgz",
+      "integrity": "sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ=="
+    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",

package.json

@@ -13,6 +13,7 @@
     "@lupus-ai/mui-currency-textfield": "^1.0.3",
     "@mui/icons-material": "^5.15.6",
     "@mui/material": "^5.15.6",
+    "@mui/x-data-grid": "^6.19.4",
     "@novu/notification-center": "^0.22.0",
     "next": "latest",
     "openapi-typescript-fetch": "^1.1.3",

pages/api/seller/profile.tsx

@@ -0,0 +1,15 @@
+import { getAccessToken, withApiAuthRequired, getSession } from '@auth0/nextjs-auth0';
+
+export default withApiAuthRequired(async function sellerProfile(req, res) {
+  console.log("TEST")
+  const { accessToken } = await getAccessToken(req, res);
+  const response = await fetch(process.env.NEXT_PUBLIC_API_URL+'/api/SellerProfile', {
+    headers: {
+      "Authorization": `Bearer ${accessToken}`
+    }
+  });
+  
+  let result = await response.json();
+  res.status(200).json(result);
+});
+

pages/api/seller/request.tsx

@@ -1,20 +1,14 @@
 import { getAccessToken, withApiAuthRequired, getSession } from '@auth0/nextjs-auth0';
 
 export default withApiAuthRequired(async function products(req, res) {
-  // If your Access Token is expired and you have a Refresh Token
-  // `getAccessToken` will fetch you a new one using the `refresh_token` grant
   const { accessToken } = await getAccessToken(req, res);
   const response = await fetch(process.env.NEXT_PUBLIC_API_URL+'/api/SellerProfile', {
     headers: {
       "Authorization": `Bearer ${accessToken}`
-    }
+    },
+    method: 'POST'
   });
-  if(response.status == 401 || response.status == 400){
+  let result = await response.json();
-    res.status(200);
+  res.status(200).json(result);
-  }
-  else{
-    let result = await response.json();
-    res.status(200).json(result);
-  }
 });
 

pages/sellerDashboard.tsx

@@ -1,65 +1,114 @@
 import { useUser } from "@auth0/nextjs-auth0/client";
-import { getAccessToken } from "@auth0/nextjs-auth0";
+import { useTheme } from '@mui/material/styles';
+import AppBar from '@mui/material/AppBar';
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
 import Layout from "../components/layout";
 import { Grid, Button, Typography, TextField, Box } from "@mui/material";
 import { useState, useEffect } from "react";
+import SwipeableViews from '../components/swipableView';
+import { DataGrid, GridColDef, GridValueGetterParams } from '@mui/x-data-grid';
+
 
 
 
 
 const SellerDashoard = (ctx) => {
   const { user, isLoading } = useUser();
+  const [sellerRequestData, setSellerRequestData] = useState([]);
   const [sellerData, setSellerData] = useState([]);
   const [loading, setLoading] = useState(true); // State for loading indicator
+
+  const [tabValue, setTabValue] = useState(0);
+
+  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+    setTabValue(newValue);
+  };
+
+  const handleChangeIndex = (index: number) => {
+    setTabValue(index);
+  };
+
+  const requestSeller = () => {
+    const response = fetch('/api/seller/request', {
+      method: 'POST'
+    }).then((response) => { 
+      console.log(response);
+    });
+  }
+  
+  interface TabPanelProps {
+    children?: React.ReactNode;
+    dir?: string;
+    index: number;
+    value: number;
+  }
+
+  function TabPanel(props: TabPanelProps) {
+    const { children, value, index, ...other } = props;
+  
+    return (
+      <div
+        role="tabpanel"
+        hidden={value !== index}
+        id={`full-width-tabpanel-${index}`}
+        aria-labelledby={`full-width-tab-${index}`}
+        {...other}
+      >
+        {value === index && (
+          <Box sx={{ p: 3 }}>
+            <Typography>{children}</Typography>
+          </Box>
+        )}
+      </div>
+    );
+  }
+  
+  function a11yProps(index: number) {
+    return {
+      id: `full-width-tab-${index}`,
+      'aria-controls': `full-width-tabpanel-${index}`,
+    };
+  }
+  
+  
   useEffect(() => {
     const getData = async () => {
-      const response = await fetch('/api/sellers/profile');
+      const response = await fetch('/api/seller/profile');
       const sellerProfile = await response.json();
+      console.log(sellerProfile)
+      setSellerData(sellerProfile);
+      const requestResponse = await fetch('/api/seller/request', {method:"POST"});
+      const sellerRequest = await response.json();
       setSellerData(sellerProfile);
       setLoading(false); // Once data is fetched, set loading to false
     }
     getData();
   }, []);
-  return (
+  const theme = useTheme();
-    <Layout user={user} loading={isLoading}>
 
-    {(Object.keys(sellerData).length>0) ? (
+  const columns: GridColDef[] = [
-      <><Grid container spacing={2} sx={{padding:4}}>
+    { field: 'requestor', headerName: 'User', width: 150 },
-      <Grid container   sx={{textAlign:"center"}}>
+    { field: 'message', headerName: 'Message', width: 280 },
-        <Grid item xs={12} sm={2}  sx={{textAlign:"center"}}>
+    { field: 'amount', headerName: 'Amount', width:125 },
-          <Button color="primary" variant="contained" href="../">
+  ];
-            Back
+  const rows = [
-          </Button>
+    { id: 1, requestor: 'Snow', message: 'This is a test message!', amount: 35.00 },
-        </Grid>
+    { id: 2, requestor: 'Lannister', message: 'This is a test message!', amount: 42.00 },
-        <Grid item xs={12} sm={8}  sx={{textAlign:"center"}}>
+    { id: 3, requestor: 'Lannister', message: 'This is a test message!', amount: 45.00 },
-          <Typography variant="h4">
+    { id: 4, requestor: 'Stark', message: 'This is a test message!', amount: 16.00 },
-            Seller Dashboard
+    { id: 5, requestor: 'Targaryen', message: 'This is a test message!', amount: 150.00 },
-          </Typography>
+    { id: 6, requestor: 'Melisandre', message: "This is a test message!", amount: 150.00 },
-        </Grid>
+    { id: 7, requestor: 'Clifford', message: 'This is a test message!', amount: 44.00 },
-        <Grid item xs={12} sm={2}  sx={{textAlign:"center"}}>
+    { id: 8, requestor: 'Frances', message: 'This is a test message!', amount: 36.00 },
-        </Grid>
+    { id: 9, requestor: 'Roxie', message: 'This is a test message!', amount: 65.00 },
-      </Grid>
+  ];
-      <Grid item xs={12} sm={12}>
+
-      </Grid>
+
-    </Grid>
+  return (
-      <Grid container spacing={2} sx={{padding:4}}>
+      <Layout user={user} loading={isLoading}>
-        <Grid container   sx={{textAlign:"center"}}>
-          <Grid item xs={12} sm={2}  sx={{textAlign:"center"}}>
-          </Grid>
-          <Grid item xs={12} sm={8}  sx={{textAlign:"center"}}>
-              TODO
-          </Grid>
-          <Grid item xs={12} sm={2}  sx={{textAlign:"center"}}>
-          </Grid>
-        </Grid>
-        <Grid item xs={12} sm={12}>
-        </Grid>
-      </Grid>
-      </>
-      
-    ) : (
         <Grid container spacing={2} sx={{padding:4}}>
-          <Grid container   sx={{textAlign:"center"}}>
+          <Grid item container   sx={{textAlign:"center"}}>
             <Grid item xs={12} sm={2}  sx={{textAlign:"center"}}>
               <Button color="primary" variant="contained" href="../">
                 Back
@@ -67,19 +116,71 @@ const SellerDashoard = (ctx) => {
             </Grid>
             <Grid item xs={12} sm={8}  sx={{textAlign:"center"}}>
               <Typography variant="h4">
-                <Button size="large" color="secondary" variant="contained">Request To Become Seller</Button>
+                Seller Dashboard
               </Typography>
             </Grid>
             <Grid item xs={12} sm={2}  sx={{textAlign:"center"}}>
-              {/* <Button color="secondary" variant="contained" href="../">
+            <Button color="secondary" variant="contained" href="../">
                 Save
-              </Button> */}
+              </Button>
             </Grid>
           </Grid>
-          <Grid item xs={12} sm={12}>
+
+          <Grid item container xs={12} sm={12}>
+            <Grid item xs={12} sm={12}>
+              <TextField variant="filled" fullWidth label="Artist Name" />
+              <Box sx={{padding:1}} />
+              <TextField variant="outlined" fullWidth multiline rows={4} label="Biography"  />
+              <Box sx={{padding:1}} />
+            </Grid>
+            <Grid item xs={12} sm={12} sx={{textAlign:"center"}}>
+              <Button sx={{width:"50%"}} color="success" variant="contained">Payout Portal</Button>
+            </Grid>
+          </Grid>
+
+          <Grid item container xs={12} sm={12}>
+
+          <AppBar position="static">
+        <Tabs
+          value={tabValue}
+          onChange={handleChange}
+          indicatorColor="secondary"
+          textColor="inherit"
+          variant="fullWidth"
+          aria-label="full width tabs example"
+        >
+          <Tab label="New Requests" {...a11yProps(0)} />
+          <Tab label="Portfolio" {...a11yProps(1)} />
+          <Tab label="Ongoing Requests" {...a11yProps(2)} />
+        </Tabs>
+      </AppBar>
+      <SwipeableViews
+        axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'}
+        index={tabValue}
+        onChangeIndex={handleChangeIndex}
+      >
+        <TabPanel value={tabValue} index={0} dir={theme.direction}>
+          <DataGrid
+            rows={rows}
+            columns={columns}
+            initialState={{
+              pagination: {
+                paginationModel: { page: 0, pageSize: 5 },
+              },
+            }}
+            pageSizeOptions={[5, 10]}
+            sx={{width: '100%'}}
+          />
+        </TabPanel>
+        <TabPanel value={tabValue} index={1} dir={theme.direction}>
+          Item Two
+        </TabPanel>
+        <TabPanel value={tabValue} index={2} dir={theme.direction}>
+          Item Three
+        </TabPanel>
+      </SwipeableViews>
           </Grid>
         </Grid>
-    )}
       </Layout>
   );
 };