mirror of
https://github.com/D4M13N-D3V/comissions-app-ui.git
synced 2025-03-14 00:05:07 +00:00
more
This commit is contained in:
Damien Ostler
parent
12c5ee7a8b
commit
53cfd64da1
@ -54,13 +54,13 @@ 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:150}}>View Profile</Button>
|
||||
<Button href={"seller/"+artistId} color="primary" variant='contained' sx={{width:160}}>View Profile</Button>
|
||||
{user ? (
|
||||
<Button color="secondary" variant='contained' sx={{ width: 150, marginTop:2 }}>Request Order</Button>
|
||||
<Button color="secondary" variant='contained' sx={{ width: 160, marginTop:2 }}>Submit Request</Button>
|
||||
) : (
|
||||
<Tooltip title="Log in order to place a request.">
|
||||
<span>
|
||||
<Button disabled color="secondary" variant='contained' sx={{ width: 150, marginTop:2 }}>Request Order</Button>
|
||||
<Button disabled color="secondary" variant='contained' sx={{ width: 160, marginTop:2 }}>Submit Request</Button>
|
||||
</span>
|
||||
</Tooltip>
|
||||
)}
|
||||
|
||||
@ -22,7 +22,7 @@ type HeaderProps = {
|
||||
};
|
||||
|
||||
|
||||
const settings = ['Profile', 'Account', 'Dashboard', 'Logout'];
|
||||
const settings = ['Seller Dashboard', 'Account', 'Dashboard', 'Logout'];
|
||||
|
||||
function ResponsiveAppBar() {
|
||||
const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(null);
|
||||
@ -105,16 +105,16 @@ function ResponsiveAppBar() {
|
||||
onClose={handleCloseUserMenu}
|
||||
>
|
||||
<MenuItem key="sellerDashboard" onClick={handleCloseUserMenu}>
|
||||
<Button color="secondary" variant='contained' href="profile">Seller Dashboard</Button>
|
||||
<Button fullWidth color="secondary" variant='contained' href="/profile">Seller Dashboard</Button>
|
||||
</MenuItem>
|
||||
<MenuItem key="myOrders" onClick={handleCloseUserMenu}>
|
||||
<Button color="primary" href="profile">My Orders</Button>
|
||||
<Button fullWidth color="primary" href="profile">My Orders</Button>
|
||||
</MenuItem>
|
||||
<MenuItem key="settings" onClick={handleCloseUserMenu}>
|
||||
<Button color="primary" href="profile">Settings</Button>
|
||||
<Button fullWidth color="primary" href="/settings">Settings</Button>
|
||||
</MenuItem>
|
||||
<MenuItem key="logout" onClick={handleCloseUserMenu}>
|
||||
<Button color="error" href="/api/auth/logout">Logout</Button>
|
||||
<Button fullWidth color="error" href="/api/auth/logout">Logout</Button>
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</Box>
|
||||
|
||||
48
package-lock.json
generated
48
package-lock.json
generated
@ -9,6 +9,7 @@
|
||||
"@emotion/react": "^11.11.3",
|
||||
"@emotion/styled": "^11.11.0",
|
||||
"@fontsource/roboto": "^5.0.8",
|
||||
"@lupus-ai/mui-currency-textfield": "^1.0.3",
|
||||
"@mui/icons-material": "^5.15.6",
|
||||
"@mui/material": "^5.15.6",
|
||||
"@novu/notification-center": "^0.22.0",
|
||||
@ -345,6 +346,20 @@
|
||||
"@hapi/hoek": "^9.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@lupus-ai/mui-currency-textfield": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@lupus-ai/mui-currency-textfield/-/mui-currency-textfield-1.0.3.tgz",
|
||||
"integrity": "sha512-VF6+aBDZCCgA57yw0kC1BibSUs6xErjD28My1nPo1ZXtAiNMjyShdTEtmi6aZL2wN5bcjiJAguIVgvOQjpBidQ==",
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.10.5",
|
||||
"@emotion/styled": "^11.10.5",
|
||||
"@mui/material": "^5.11.1",
|
||||
"autonumeric": "^4.6.0",
|
||||
"prop-types": "^15.8.1",
|
||||
"react": "^18.2.0",
|
||||
"tss-react": "^4.5.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@mantine/core": {
|
||||
"version": "5.10.5",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/core/-/core-5.10.5.tgz",
|
||||
@ -1156,6 +1171,15 @@
|
||||
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
|
||||
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
|
||||
},
|
||||
"node_modules/autonumeric": {
|
||||
"version": "4.10.5",
|
||||
"resolved": "https://registry.npmjs.org/autonumeric/-/autonumeric-4.10.5.tgz",
|
||||
"integrity": "sha512-t7h1poYH37eVi/pDTdO0UBb8qk8A9gUHzABP/wUoqSw4w5aDFJr2gxfZPl+agta4ifb5OfBm4Bylv1G/dCC2zQ==",
|
||||
"funding": {
|
||||
"type": "patreon",
|
||||
"url": "https://www.patreon.com/AlexandreBonneau"
|
||||
}
|
||||
},
|
||||
"node_modules/axios": {
|
||||
"version": "1.6.7",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-1.6.7.tgz",
|
||||
@ -2093,6 +2117,30 @@
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
|
||||
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
|
||||
},
|
||||
"node_modules/tss-react": {
|
||||
"version": "4.9.4",
|
||||
"resolved": "https://registry.npmjs.org/tss-react/-/tss-react-4.9.4.tgz",
|
||||
"integrity": "sha512-4o+XFdaTcraNEIsCRxKiEX7g6xhcsdSxfHRjos3Kg9GbYIpzfK4M2MHMETTuXT54nUrldtnkipNC003v/q5KVg==",
|
||||
"dependencies": {
|
||||
"@emotion/cache": "*",
|
||||
"@emotion/serialize": "*",
|
||||
"@emotion/utils": "*"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@emotion/react": "^11.4.1",
|
||||
"@emotion/server": "^11.4.0",
|
||||
"@mui/material": "^5.0.0",
|
||||
"react": "^16.8.0 || ^17.0.2 || ^18.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@emotion/server": {
|
||||
"optional": true
|
||||
},
|
||||
"@mui/material": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/typescript": {
|
||||
"version": "4.9.5",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
"@emotion/react": "^11.11.3",
|
||||
"@emotion/styled": "^11.11.0",
|
||||
"@fontsource/roboto": "^5.0.8",
|
||||
"@lupus-ai/mui-currency-textfield": "^1.0.3",
|
||||
"@mui/icons-material": "^5.15.6",
|
||||
"@mui/material": "^5.15.6",
|
||||
"@novu/notification-center": "^0.22.0",
|
||||
|
||||
@ -1,24 +0,0 @@
|
||||
import { useUser } from "@auth0/nextjs-auth0/client";
|
||||
import Layout from "../components/layout";
|
||||
|
||||
const About = () => {
|
||||
const { user, isLoading } = useUser();
|
||||
|
||||
return (
|
||||
<Layout user={user} loading={isLoading}>
|
||||
<h1>About</h1>
|
||||
<p>
|
||||
This project shows different ways to display Profile info: using{" "}
|
||||
<i>Client rendered</i>, <i>Server rendered</i>, and <i>API rendered</i>
|
||||
</p>
|
||||
<p>
|
||||
Navigating between this page and <i>Home</i> is always pretty fast.
|
||||
However, when you navigate to the <i>Server rendered profile</i> page it
|
||||
takes more time because it uses SSR to fetch the user and then to
|
||||
display it
|
||||
</p>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default About;
|
||||
@ -17,41 +17,6 @@ interface TabPanelProps {
|
||||
value: number;
|
||||
}
|
||||
|
||||
function a11yProps(index: number) {
|
||||
return {
|
||||
id: `simple-tab-${index}`,
|
||||
'aria-controls': `simple-tabpanel-${index}`,
|
||||
};
|
||||
}
|
||||
|
||||
function createData(
|
||||
serviceName: string,
|
||||
rating: number,
|
||||
review: string
|
||||
) {
|
||||
return { serviceName, rating, review };
|
||||
}
|
||||
|
||||
function CustomTabPanel(props: TabPanelProps) {
|
||||
const { children, value, index, ...other } = props;
|
||||
|
||||
return (
|
||||
<div
|
||||
role="tabpanel"
|
||||
hidden={value !== index}
|
||||
id={`simple-tabpanel-${index}`}
|
||||
aria-labelledby={`simple-tab-${index}`}
|
||||
{...other}
|
||||
>
|
||||
{value === index && (
|
||||
<Box sx={{ p: 3 }}>
|
||||
<Typography>{children}</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const SellerProfile = () => {
|
||||
const { user, isLoading } = useUser();
|
||||
const router = useRouter()
|
||||
@ -132,14 +97,14 @@ const SellerProfile = () => {
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={12} sx={{textAlign:"center"}} >
|
||||
{user ? (
|
||||
<Button size="large" color="secondary" variant="contained" href={"../order/"+id}>
|
||||
<Button size="large" color="secondary" variant="contained" href={"/seller/"+id+"/request"}>
|
||||
Request Order
|
||||
</Button>
|
||||
) : (
|
||||
<Tooltip title="Log in order to place a request.">
|
||||
<span>
|
||||
<Button size="large" color="secondary" variant="contained" disabled>
|
||||
Request Order
|
||||
Submit Request
|
||||
</Button>
|
||||
</span>
|
||||
</Tooltip>
|
||||
|
||||
123
pages/seller/[id]/request.tsx
Normal file
123
pages/seller/[id]/request.tsx
Normal file
@ -0,0 +1,123 @@
|
||||
import Layout from "../../../components/layout";
|
||||
import { useUser } from "@auth0/nextjs-auth0/client";
|
||||
import { Box, Grid, Card, CardContent, Typography, List, ListItem, ListItemButton, ListItemIcon,
|
||||
ListItemText, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Button,
|
||||
Tabs, Tab, CircularProgress } from "@mui/material";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useRouter } from 'next/router'
|
||||
import { fetchSeller } from "../../../services/DiscoveryService";
|
||||
import ArtistPortfolio from "../../../components/artistPortfolio";
|
||||
import Tooltip from '@mui/material/Tooltip';
|
||||
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
||||
import { TextField } from "@mui/material";
|
||||
import CurrencyTextField from '@lupus-ai/mui-currency-textfield'
|
||||
|
||||
interface TabPanelProps {
|
||||
children?: React.ReactNode;
|
||||
index: number;
|
||||
value: number;
|
||||
}
|
||||
|
||||
const SellerProfile = () => {
|
||||
const { user, isLoading } = useUser();
|
||||
const router = useRouter()
|
||||
const { id } = router.query
|
||||
console.log(router.query)
|
||||
const [sellerData, setSellerData] = useState([]);
|
||||
const [loading, setLoading] = useState(true); // State for loading indicator
|
||||
useEffect(() => {
|
||||
const getData = async () => {
|
||||
if(id){
|
||||
const data = await fetchSeller(id);
|
||||
setSellerData(data);
|
||||
setLoading(false); // Once data is fetched, set loading to false
|
||||
}
|
||||
}
|
||||
getData();
|
||||
}, [id]);
|
||||
|
||||
const handleChange = (event: React.SyntheticEvent, newValue: number) => {
|
||||
setValue(newValue);
|
||||
};
|
||||
|
||||
const [value, setValue] = useState(0);
|
||||
return (
|
||||
<Layout user={user} loading={isLoading}>
|
||||
{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>
|
||||
) : (
|
||||
<Grid container spacing={2} sx={{padding:4}}>
|
||||
<Grid container sx={{textAlign:"center"}}>
|
||||
<Grid item xs={12} sm={2} sx={{textAlign:"center"}}>
|
||||
<Button color="primary" variant="contained" href={"../"+id}>
|
||||
Back
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={8} sx={{textAlign:"center"}}>
|
||||
<Typography variant="h4">
|
||||
New Request
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={2} sx={{textAlign:"center"}}>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container item xs={12} sm={12} sx={{textAlign:"center"}} >
|
||||
{user ? (
|
||||
<>
|
||||
|
||||
<Grid item xs={12} sm={12} sx={{textAlign:"center"}} >
|
||||
<TextField fullWidth disabled id="fo" label="Artist" variant="outlined" value={sellerData.name}/>
|
||||
<Box sx={{padding:2}} />
|
||||
<TextField id="outlined-multiline-static" label="Request Details" fullWidth multiline rows={4} defaultValue="" placeholder="Put the details of your request. Links to reference images. Descriptions of what you want. Things like that."/>
|
||||
<Box sx={{padding:2}} />
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={12} sx={{textAlign:"center"}} >
|
||||
<Button>
|
||||
<input type="file" multiple />
|
||||
</Button>
|
||||
</Grid>
|
||||
<Box sx={{padding:2}} />
|
||||
<Grid item xs={12} sm={12} sx={{textAlign:"center"}} >
|
||||
<CurrencyTextField
|
||||
label="Offer Amount"
|
||||
variant="standard"
|
||||
value={value}
|
||||
currencySymbol="USD "
|
||||
//minimumValue="0"
|
||||
outputFormat="string"
|
||||
|
||||
decimalCharacter="."
|
||||
digitGroupSeparator=","
|
||||
onChange={(event, value)=> setValue(value)}/>
|
||||
|
||||
</Grid>
|
||||
<Box sx={{padding:2}} />
|
||||
<Grid item xs={12} sm={12} sx={{textAlign:"center"}} >
|
||||
<Button color="secondary" variant="contained" >
|
||||
Submit Request
|
||||
</Button>
|
||||
</Grid>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Typography>
|
||||
Please login to place a request.
|
||||
</Typography>
|
||||
<Button color="primary" variant="contained" href="/api/auth/login">
|
||||
Login
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</Grid>
|
||||
</Grid>
|
||||
)}
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default SellerProfile;
|
||||
38
pages/settings.tsx
Normal file
38
pages/settings.tsx
Normal file
@ -0,0 +1,38 @@
|
||||
import { useUser } from "@auth0/nextjs-auth0/client";
|
||||
import Layout from "../components/layout";
|
||||
import { Grid, Button, Typography, TextField, Box } from "@mui/material";
|
||||
|
||||
const Settings = () => {
|
||||
const { user, isLoading } = useUser();
|
||||
|
||||
return (
|
||||
<Layout user={user} loading={isLoading}>
|
||||
<Grid container spacing={2} sx={{padding:4}}>
|
||||
<Grid 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">
|
||||
Settings
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={2} sx={{textAlign:"center"}}>
|
||||
<Button color="secondary" variant="contained" href="../">
|
||||
Save
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={12}>
|
||||
<TextField variant="filled" fullWidth label="Display Name" value={user?.email} />
|
||||
<Box sx={{padding:2}} />
|
||||
<TextField variant="outlined" fullWidth multiline rows={4} label="Biography" value={user?.email} />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Settings;
|
||||
Loading…
x
Reference in New Issue
Block a user