feat: artist dashboard

components/artist.tsx

@@ -26,7 +26,7 @@ const Artist = ({user, artistId}) => {
   const [sellerData, setSellerData] = useState([]);
   useEffect(() => {
     const getData = async () => {
-      const response = await fetch('/api/discovery/seller/'+artistId);
+      const response = await fetch('/api/discovery/artist/'+artistId);
       const data = await response.json();
       setSellerData(data);
     }
@@ -53,9 +53,9 @@ const Artist = ({user, artistId}) => {
         </Grid>
         <Grid item xs={6} md={4}>
           <Grid item xs={6} md={4}>
-            <Button href={"seller/"+artistId} color="primary" variant='contained' sx={{width:160}}>View Profile</Button>
+            <Button href={"artist/"+artistId} color="primary" variant='contained' sx={{width:160}}>View Profile</Button>
               {user ? (
-                <Button color="secondary" variant='contained' href={"/seller/"+artistId+"/request"} sx={{ width: 160, marginTop:2 }}>Submit Request</Button>
+                <Button color="secondary" variant='contained' href={"/artist/"+artistId+"/request"} sx={{ width: 160, marginTop:2 }}>Submit Request</Button>
               ) : (
                 <Tooltip title="Log in order to place a request.">
                   <span>

components/artistPortfolio.tsx

@@ -8,7 +8,7 @@ const ArtistPortfolio = ({artistId}) => {
   const [loading, setLoading] = useState(true); // State for loading indicator
   useEffect(() => {
     const getData = async () => {
-      const response = await fetch('/api/discovery/seller/'+artistId+'/portfolio');
+      const response = await fetch('/api/discovery/artist/'+artistId+'/portfolio');
       const data = await response.json();
       setPortfolioData(data);
       setLoading(false);

components/header.tsx

@@ -104,8 +104,8 @@ function ResponsiveAppBar() {
                     open={Boolean(anchorElUser)}
                     onClose={handleCloseUserMenu}
                   >
-                  <MenuItem key="sellerDashboard" onClick={handleCloseUserMenu}>
+                  <MenuItem key="artistDashboard" onClick={handleCloseUserMenu}>
-                    <Button fullWidth color="secondary" variant='contained' href="/sellerDashboard">Seller Dashboard</Button>
+                    <Button fullWidth color="secondary" variant='contained' href="/artistDashboard">Artist Dashboard</Button>
                   </MenuItem>
                   <MenuItem key="myOrders" onClick={handleCloseUserMenu}>
                     <Button fullWidth color="primary" href="profile">My Orders</Button>

package-lock.json

@@ -13,7 +13,9 @@
         "@mui/icons-material": "^5.15.6",
         "@mui/material": "^5.15.6",
         "@mui/x-data-grid": "^6.19.4",
+        "@mui/x-date-pickers": "^6.19.4",
         "@novu/notification-center": "^0.22.0",
+        "dayjs": "^1.11.10",
         "next": "latest",
         "openapi-typescript-fetch": "^1.1.3",
         "react": "^18.2.0",
@@ -691,6 +693,71 @@
         "react-dom": "^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/@mui/x-date-pickers": {
+      "version": "6.19.4",
+      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-6.19.4.tgz",
+      "integrity": "sha512-LekaacLGnoQNN5hD6iXeHFL4LbZPnr1BM57hnUKy5UgKDHqzHzZSdPGc2p7Ktv/Z2NDbpPaLEAgrLwISKIYcow==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2",
+        "@mui/base": "^5.0.0-beta.22",
+        "@mui/utils": "^5.14.16",
+        "@types/react-transition-group": "^4.4.8",
+        "clsx": "^2.0.0",
+        "prop-types": "^15.8.1",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.9.0",
+        "@emotion/styled": "^11.8.1",
+        "@mui/material": "^5.8.6",
+        "@mui/system": "^5.8.0",
+        "date-fns": "^2.25.0 || ^3.2.0",
+        "date-fns-jalali": "^2.13.0-0",
+        "dayjs": "^1.10.7",
+        "luxon": "^3.0.2",
+        "moment": "^2.29.4",
+        "moment-hijri": "^2.1.2",
+        "moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "date-fns": {
+          "optional": true
+        },
+        "date-fns-jalali": {
+          "optional": true
+        },
+        "dayjs": {
+          "optional": true
+        },
+        "luxon": {
+          "optional": true
+        },
+        "moment": {
+          "optional": true
+        },
+        "moment-hijri": {
+          "optional": true
+        },
+        "moment-jalaali": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@next/env": {
       "version": "14.1.0",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-14.1.0.tgz",
@@ -1374,6 +1441,11 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
+    "node_modules/dayjs": {
+      "version": "1.11.10",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
+      "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",

package.json

@@ -14,7 +14,9 @@
     "@mui/icons-material": "^5.15.6",
     "@mui/material": "^5.15.6",
     "@mui/x-data-grid": "^6.19.4",
+    "@mui/x-date-pickers": "^6.19.4",
     "@novu/notification-center": "^0.22.0",
+    "dayjs": "^1.11.10",
     "next": "latest",
     "openapi-typescript-fetch": "^1.1.3",
     "react": "^18.2.0",

pages/api/artist/onboarded.tsx

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

pages/api/artist/onboardurl.tsx

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

pages/api/artist/profile.tsx

@@ -1,7 +1,6 @@
 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: {

pages/api/artist/request.tsx

@@ -0,0 +1,20 @@
+import { getAccessToken, withApiAuthRequired, getSession } from '@auth0/nextjs-auth0';
+
+export default withApiAuthRequired(async function products(req, res) {
+  const { accessToken } = await getAccessToken(req, res);
+  const response = await fetch(process.env.NEXT_PUBLIC_API_URL+'/api/SellerProfile/Request', {
+    headers: {
+      "Authorization": `Bearer ${accessToken}`
+    },
+    method: 'GET'
+  });
+  if(response.status == 404)
+  {
+    res.status(200).json({})
+  }
+  else{
+    let result = await response.json();
+    res.status(200).json(result);
+  }
+});
+

pages/artist/[id].tsx

@@ -15,7 +15,7 @@ const SellerProfile = () => {
     useEffect(() => {
       const getData = async () => {
         if(id){
-          const response = await fetch('/api/discovery/seller/'+id);
+          const response = await fetch('/api/discovery/artist/'+id);
           const data = await response.json();
           setSellerData(data);
           setLoading(false); // Once data is fetched, set loading to false
@@ -82,7 +82,7 @@ const SellerProfile = () => {
             </Grid>
             <Grid item xs={12} sm={12} sx={{textAlign:"center"}} >
             {user ? (
-              <Button size="large" color="secondary" variant="contained" href={"/seller/"+id+"/request"}>
+              <Button size="large" color="secondary" variant="contained" href={"/artist/"+id+"/request"}>
                 Request Order
               </Button>
             ) : (

pages/artist/[id]/request.tsx

@@ -21,7 +21,7 @@ const SellerProfile = () => {
     useEffect(() => {
       const getData = async () => {
         if(id){
-          const response = await fetch('/api/discovery/seller/'+id);
+          const response = await fetch('/api/discovery/artist/'+id);
           const data = await response.json();
           setSellerData(data);
           setLoading(false); // Once data is fetched, set loading to false

pages/artistDashboard.tsx

@@ -0,0 +1,338 @@
+import { useUser } from "@auth0/nextjs-auth0/client";
+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, CircularProgress } from "@mui/material";
+import { useState, useEffect } from "react";
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import CardActions from '@mui/material/CardActions';
+import { styled } from '@mui/material/styles';
+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 [isOnboarded, setIsOnboarded] = useState(false);
+  const [onBoardUrl, setOnBoardUrl] = useState("");
+
+  const [tabValue, setTabValue] = useState(1);
+
+  const getData = async () => {
+    const response = await fetch('/api/artist/profile');
+    const sellerProfile = await response.json();
+    setSellerData(sellerProfile);
+    const requestResponse = await fetch('/api/artist/request', { method: "GET" });
+    const sellerRequest = await requestResponse.json();
+    setSellerRequestData(sellerRequest);
+    const onboardCheckRequest = await fetch('/api/artist/onboarded', { method: "GET" });
+    const onboardCheckResponse = await onboardCheckRequest.json();
+    setIsOnboarded(onboardCheckResponse["onboarded"]);
+    const onboardUrlRequest = await fetch('/api/artist/onboardurl', { method: "GET" });
+    const onboardUrlResponse = await onboardUrlRequest.json();
+    setOnBoardUrl(onboardUrlResponse["onboardUrl"]);
+  
+    setLoading(false); // Once data is fetched, set loading to false
+  }
+
+  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+    setTabValue(newValue);
+  };
+
+  const handleChangeIndex = (index: number) => {
+    setTabValue(index);
+  };
+
+  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(() => {
+    getData();
+  }, []);
+  const theme = useTheme();
+
+  const columns: GridColDef[] = [
+    { field: 'requestor', headerName: 'User', width: 150 },
+    { field: 'message', headerName: 'Message', width: 280 },
+    { field: 'amount', headerName: 'Amount', width: 125 },
+  ];
+  const rows = [
+    { id: 1, requestor: 'Snow', message: 'This is a test message!', amount: 35.00 },
+    { id: 2, requestor: 'Lannister', message: 'This is a test message!', amount: 42.00 },
+    { id: 3, requestor: 'Lannister', message: 'This is a test message!', amount: 45.00 },
+    { id: 4, requestor: 'Stark', message: 'This is a test message!', amount: 16.00 },
+    { id: 5, requestor: 'Targaryen', message: 'This is a test message!', amount: 150.00 },
+    { id: 6, requestor: 'Melisandre', message: "This is a test message!", amount: 150.00 },
+    { id: 7, requestor: 'Clifford', message: 'This is a test message!', amount: 44.00 },
+    { id: 8, requestor: 'Frances', message: 'This is a test message!', amount: 36.00 },
+    { id: 9, requestor: 'Roxie', message: 'This is a test message!', amount: 65.00 },
+  ];
+
+
+  let formattedTime = ""
+  if (sellerRequestData) {
+    const date = new Date(sellerRequestData["requestDate"]);
+    formattedTime = date.toLocaleTimeString('en-US', { month: 'long', day: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' }); // Example format  
+  }
+
+  const payoutButton = () =>{
+    fetch('/api/artist/payout').then((response) => {
+      if (response.ok) {
+        fetch('/api/artist/request').then((requestResponse) => {
+          requestResponse.json().then((sellerRequest) => {
+            setSellerRequestData(sellerRequest);
+          });
+        });
+      }
+    });
+  }
+
+  const requestButton = () => {
+    fetch('/api/artist/newRequest').then((response) => {
+      if (response.ok) {
+        fetch('/api/artist/request').then((requestResponse) => {
+          requestResponse.json().then((sellerRequest) => {
+            setSellerRequestData(sellerRequest);
+            getData();
+          });
+        });
+      }
+    });
+  }
+
+  return (
+    <>
+      {loading ? ( // Render loading indicator if loading is true
+        <Box sx={{ textAlign: "center", paddingTop: 20 }}>
+          <Typography variant="h4" sx={{ textAlign: "center" }}>
+            Loading...
+          </Typography>
+          <CircularProgress sx={{ paddingTop: 5 }} />
+        </Box>
+      ) : (
+        <Layout user={user} loading={isLoading}>
+          <Grid container spacing={2} sx={{ padding: 4 }}>
+
+            {(Object.keys(sellerData).length > 0 ? (
+              <>
+                <Grid item container sx={{ textAlign: "center" }}>
+                  <Grid item xs={12} sm={2} sx={{ textAlign: "center" }}>
+                    <Button color="primary" variant="contained" href="../">
+                      Back
+                    </Button>
+                  </Grid>
+                  <Grid item xs={12} sm={8} sx={{ textAlign: "center" }}>
+                    <Typography variant="h4">
+                      Artist Dashboard
+                    </Typography>
+                  </Grid>
+                  <Grid item xs={12} sm={2} sx={{ textAlign: "center" }}>
+                  </Grid>
+                </Grid>
+                {(Object.keys(sellerRequestData).length > 0 ? (
+                  <>
+                    <Grid item xs={12} sm={12} sx={{ textAlign: "center" }}>
+                      <Card sx={{ minWidth: 275, paddingTop: 2 }}>
+                        <CardContent>
+                          <Typography variant="h5" gutterBottom>
+                            Request Status
+                          </Typography>
+                          {(sellerRequestData["accepted"] ? (
+                            <Typography variant="body2" color="text.warning" component="div">Accepted</Typography>
+                          ) : (
+                            <Typography variant="h6" color="text.warning" component="div">Pending</Typography>
+                          ))}
+                          <Typography variant="body2" color="text.secondary" component="div">Request submitted on {formattedTime ?? ''}</Typography>
+                        </CardContent>
+                        <CardActions>
+                          <Button color="primary" href="https://discord.gg/SAGBA3uTEF" target="_blank" size="small">Contact Us On Discord</Button>
+                        </CardActions>
+                      </Card>
+                    </Grid>
+                    <Grid item xs={12} sm={12}>
+                      {(sellerRequestData["accepted"] ? (
+                        <>
+  
+                          {(isOnboarded ? (<>
+                            <Button sx={{ width: "50%" }} color="primary" variant="contained" href={onBoardUrl}>Payout Settings</Button>
+                            <Button sx={{ width: "50%" }} color="secondary" variant="contained">Payout Portal</Button>
+                            </>
+                          ) : (
+                            <>
+                            <Button sx={{ width: "50%" }} href={onBoardUrl} color="secondary" variant="contained">Payout Onboarding</Button>
+                            <Button sx={{ width: "50%" }} color="secondary" variant="contained" disabled>Payout Portal</Button>
+                            </>
+                          ))}
+                          
+
+                          <Grid item container xs={12} sm={12} sx={{paddingTop:2}}>
+
+                            <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
+                              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>
+                  </>
+                ) : (
+                  <>
+                    <Grid item xs={12} sm={12} sx={{ textAlign: "center" }}>
+                      {(Object.keys(sellerRequestData).length==0 || sellerRequestData["accepted"]==false ? (<><Button sx={{ width: "50%" }} color="secondary" onClick={requestButton} variant="contained">Request Artist Access</Button></>):(<></>))}
+                    </Grid>
+                  </>
+                ))}
+              </>
+
+            ) : (
+              <>
+                <Grid item container sx={{ textAlign: "center" }}>
+                  <Grid item xs={12} sm={10} sx={{ textAlign: "center" }}>
+                  </Grid>
+                  <Grid item xs={12} sm={2} sx={{ textAlign: "center" }}>
+                    <Button color="secondary" variant="contained" href="../">
+                      Save
+                    </Button>
+                  </Grid>
+                </Grid>
+                <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
+                    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 item container xs={12} sm={12}>
+            </Grid>
+          </Grid>
+        </Layout>)}
+    </>
+  );
+};
+
+export default SellerDashoard;

pages/index.tsx

@@ -9,7 +9,7 @@ const Home = () => {
   const [loading, setLoading] = useState(true); // State for loading indicator
   useEffect(() => {
     const getData = async () => {
-      const response = await fetch('/api/discovery/sellers');
+      const response = await fetch('/api/discovery/artists');
       const data = await response.json();
       setSellersData(data);
       setLoading(false);

pages/sellerDashboard.tsx

@@ -1,188 +0,0 @@
-import { useUser } from "@auth0/nextjs-auth0/client";
-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/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();
-  }, []);
-  const theme = useTheme();
-
-  const columns: GridColDef[] = [
-    { field: 'requestor', headerName: 'User', width: 150 },
-    { field: 'message', headerName: 'Message', width: 280 },
-    { field: 'amount', headerName: 'Amount', width:125 },
-  ];
-  const rows = [
-    { id: 1, requestor: 'Snow', message: 'This is a test message!', amount: 35.00 },
-    { id: 2, requestor: 'Lannister', message: 'This is a test message!', amount: 42.00 },
-    { id: 3, requestor: 'Lannister', message: 'This is a test message!', amount: 45.00 },
-    { id: 4, requestor: 'Stark', message: 'This is a test message!', amount: 16.00 },
-    { id: 5, requestor: 'Targaryen', message: 'This is a test message!', amount: 150.00 },
-    { id: 6, requestor: 'Melisandre', message: "This is a test message!", amount: 150.00 },
-    { id: 7, requestor: 'Clifford', message: 'This is a test message!', amount: 44.00 },
-    { id: 8, requestor: 'Frances', message: 'This is a test message!', amount: 36.00 },
-    { id: 9, requestor: 'Roxie', message: 'This is a test message!', amount: 65.00 },
-  ];
-
-
-  return (
-      <Layout user={user} loading={isLoading}>
-        <Grid container spacing={2} sx={{padding:4}}>
-          <Grid item container   sx={{textAlign:"center"}}>
-            <Grid item xs={12} sm={2}  sx={{textAlign:"center"}}>
-              <Button color="primary" variant="contained" href="../">
-                Back
-              </Button>
-            </Grid>
-            <Grid item xs={12} sm={8}  sx={{textAlign:"center"}}>
-              <Typography variant="h4">
-                Seller Dashboard
-              </Typography>
-            </Grid>
-            <Grid item xs={12} sm={2}  sx={{textAlign:"center"}}>
-            <Button color="secondary" variant="contained" href="../">
-                Save
-              </Button>
-            </Grid>
-          </Grid>
-
-          <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>
-  );
-};
-
-export default SellerDashoard;