diff --git a/components/swipableView.tsx b/components/swipableView.tsx new file mode 100644 index 0000000..622b55e --- /dev/null +++ b/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 +) { + const containerRef = useRef(null) + const scrollTimeout = useRef() + + useEffect(() => { + containerRef.current?.children[index]?.scrollIntoView({ behavior: "smooth" }) + }, [index]) + + return ( +
{ + if (scrollTimeout.current) clearTimeout(scrollTimeout.current) + scrollTimeout.current = window.setTimeout(() => { + const pageWidth = currentTarget.scrollWidth / currentTarget.children.length + onChangeIndex(Math.round(currentTarget.scrollLeft / pageWidth)) + }, 100) + }} + /> + ) +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index cbe1157..d469261 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index a0ca3c6..91d9279 100644 --- a/package.json +++ b/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", diff --git a/pages/api/seller/profile.tsx b/pages/api/seller/profile.tsx new file mode 100644 index 0000000..5b54203 --- /dev/null +++ b/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); +}); + diff --git a/pages/api/sellers/profile.tsx b/pages/api/seller/request.tsx similarity index 54% rename from pages/api/sellers/profile.tsx rename to pages/api/seller/request.tsx index 038ca6e..707560e 100644 --- a/pages/api/sellers/profile.tsx +++ b/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){ - res.status(200); - } - else{ - let result = await response.json(); - res.status(200).json(result); - } + let result = await response.json(); + res.status(200).json(result); }); diff --git a/pages/sellerDashboard.tsx b/pages/sellerDashboard.tsx index 7affeb3..b6c1739 100644 --- a/pages/sellerDashboard.tsx +++ b/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 ( + + ); + } + + 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(); - {(Object.keys(sellerData).length>0) ? ( - <> - - - - - - - Seller Dashboard - - - - - - - - - - - - - - TODO - - - - - - - - - - ) : ( + 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 ( + - + + Seller Dashboard - {/* */} + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + Item Two + + + Item Three + + - )} ); };