diff --git a/components/dashboard/customer/orders.tsx b/components/dashboard/customer/orders.tsx index 38523a2..b0f0b1b 100644 --- a/components/dashboard/customer/orders.tsx +++ b/components/dashboard/customer/orders.tsx @@ -13,11 +13,14 @@ import PriceCheckIcon from '@mui/icons-material/PriceCheck'; import AssignmentTurnedInIcon from '@mui/icons-material/AssignmentTurnedIn'; import AssignmentLateIcon from '@mui/icons-material/AssignmentLate'; import { useEffect, useState } from "react"; +import { useMediaQuery } from '@mui/material'; import dayjs from 'dayjs'; export default function CustomerOrders() { + const isSmallScreen = useMediaQuery(theme => theme.breakpoints.down('sm')); // Check if the screen size is small + const columns = [ { field: 'id', headerName: 'ID', flex: 0.1}, { field: 'status', headerName: 'Status', flex: 0.15, @@ -42,12 +45,15 @@ export default function CustomerOrders() { } } }, - { field: 'amount', headerName: 'Amount', flex: 0.1, renderCell: (params) => { + { field: 'amount', headerName: '$', flex: 0.1, renderCell: (params) => { return ; }}, - { field: 'requestDate', headerName: 'Request Date', flex:0.15, type: 'date' , - valueGetter: (params) => { return new Date(params.row.requestDate); }} ]; + if(!isSmallScreen){ + columns.push( + { field: 'requestDate', headerName: 'Request Date', flex:0.15, type: 'date' , + valueGetter: (params) => { return new Date(params.row.requestDate); }} ); + } const [isLoading, setIsLoading] = React.useState(true); const [requestCount, setRequestCount] = React.useState(null); const [requestData, setRequestData] = React.useState({}); diff --git a/pages/dashboard/artist/requests.tsx b/pages/dashboard/artist/requests.tsx index 53fc5d7..ff98e4f 100644 --- a/pages/dashboard/artist/requests.tsx +++ b/pages/dashboard/artist/requests.tsx @@ -21,130 +21,239 @@ import AssignmentTurnedInIcon from '@mui/icons-material/AssignmentTurnedIn'; import AssignmentLateIcon from '@mui/icons-material/AssignmentLate'; import { Card, CardHeader } from '@mui/material'; import { Dialog, DialogActions, DialogContent, DialogTitle, Grid, Stack } from '@mui/material'; -import RequestReferences from '../../../components/requestReferences'; - +import { useMediaQuery } from '@mui/material'; export default function ServerPaginationGrid() { + const isSmallScreen = useMediaQuery(theme => theme.breakpoints.down('sm')); // Check if the screen size is small + const router = useRouter(); - const columns = [ - { field: 'id', headerName: 'ID', flex: 0.1}, - { field: 'status', headerName: 'Status', flex: 0.15, - renderCell: (params) => { - if(params.row.completed){ - return } label="Completed" variant="outlined" color="success" /> + let columns = [] + if(isSmallScreen){ + columns = [ + { field: 'id', headerName: 'ID', flex: 0.1, filterable: false, sortable: false}, + { field: 'status', headerName: 'Status', flex: 0.15, filterable: false, sortable: false, + renderCell: (params) => { + if(params.row.completed){ + return + } + else if(params.row.paid){ + return + } + else if(params.row.accepted && params.row.paid==false){ + return + } + else if(params.row.accepted && params.row.paid){ + return + } + else if(params.row.declined){ + return + } + else{ + return + } } - else if(params.row.paid){ - return } label="Paid" variant="outlined" color="success" /> - } - else if(params.row.accepted && params.row.paid==false){ - return } label="Pending Payment" variant="outlined" color="warning" /> - } - else if(params.row.accepted && params.row.paid){ - return } label="Accepted" variant="outlined" color="info" /> - } - else if(params.row.declined){ - return } label="Declined" variant="outlined" color="error" /> - } - else{ - return } label="Pending" variant="outlined" color="secondary" /> - } - } - }, - { field: 'message', headerName: 'Message', flex: 0.5, - renderCell: (params) => { - return ; + }, + { field: 'amount', headerName: 'Amount', flex: 0.15, filterable: false, sortable: false, renderCell: (params) => { + return ; }}, - { field: 'amount', headerName: 'Amount', flex: 0.1, renderCell: (params) => { - return ; - }}, - { field: 'requestDate', headerName: 'Request Date', flex:0.15, - renderCell: (params) =>{ - - let formattedTime = "" - const date = new Date(params.row.requestDate); - formattedTime = date.toLocaleTimeString('en-US', { month: 'long', day: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' }); // Example format - return - } }, - { field: 'action', headerName: '', flex:0.15, + { field: 'action', headerName: '', flex:0.1, filterable: false, sortable: false, + renderCell: (params) =>{ + + const acceptRequest = async () => { + let response = await fetch('/api/artist/requests/'+params.row["id"]+"/accept", { method: 'PUT' }) + if(response.status === 200){ + router.push("/dashboard/artist/requests/"+params.row["id"]) + } + else{ + alert("Error accepting request.") + } + } + + const viewRequest = async () => { + + } + + const denyRequest = async () => { + let response = await fetch('/api/artist/requests/'+params.row["id"]+"/deny", { method: 'PUT' }) + if(response.status === 200){ + router.push("/dashboard/artist/requests/"+params.row["id"]) + } + else{ + alert("Error accepting request.") + } + } + + const completeRequest = async () => { + let response = await fetch('/api/artist/requests/'+params.row["id"]+"/complete", { method: 'PUT' }) + if(response.status === 200){ + router.push("/dashboard/artist/requests/"+params.row["id"]) + } + else{ + alert("Error accepting request.") + } + } + + const [open, setOpen] = React.useState(false); + + const handleClickOpen = () => { + setOpen(true); + }; + + const handleClose = () => { + setOpen(false); + }; + + let formattedTime = "" + const date = new Date(params.row.requestDate); + formattedTime = date.toLocaleTimeString('en-US', { month: 'long', day: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' }); // Example format + + return (<> + { router.push("/dashboard/artist/requests/"+params.row["id"])}} aria-label="accept" color="primary" > + {((params.row.accepted==false && params.row.declined==false && params.row.completed==false) ? ( + <> + + + + + + + + ): null + )} + {((params.row.accepted==true && params.row.declined==false && params.row.completed==false && params.row.paid==true) ? ( + <> + + + + + ): null + )} + + ) + } } + ]; + } + else{ + columns = [ + { field: 'id', headerName: 'ID', flex: 0.1, filterable: false, sortable: false}, + { field: 'status', headerName: 'Status', flex: 0.15, filterable: false, sortable: false, filterable: false, + renderCell: (params) => { + if(params.row.completed){ + return } label="Completed" variant="outlined" color="success" /> + } + else if(params.row.paid){ + return } label="Paid" variant="outlined" color="success" /> + } + else if(params.row.accepted && params.row.paid==false){ + return } label="Pending Payment" variant="outlined" color="warning" /> + } + else if(params.row.accepted && params.row.paid){ + return } label="Accepted" variant="outlined" color="info" /> + } + else if(params.row.declined){ + return } label="Declined" variant="outlined" color="error" /> + } + else{ + return } label="Pending" variant="outlined" color="secondary" /> + } + } + }, + { field: 'message', headerName: 'Message', flex: 0.5, filterable: false, sortable: false, + renderCell: (params) => { + return ; + }}, + { field: 'amount', headerName: 'Amount', flex: 0.1, filterable: false, sortable: false, renderCell: (params) => { + return ; + }}, + { field: 'requestDate', headerName: 'Request Date', flex:0.15, filterable: false, sortable: false, renderCell: (params) =>{ - - const acceptRequest = async () => { - let response = await fetch('/api/artist/requests/'+params.row["id"]+"/accept", { method: 'PUT' }) - if(response.status === 200){ - router.push("/dashboard/artist/requests/"+params.row["id"]) - } - else{ - alert("Error accepting request.") - } - } - - const viewRequest = async () => { - - } - - const denyRequest = async () => { - let response = await fetch('/api/artist/requests/'+params.row["id"]+"/deny", { method: 'PUT' }) - if(response.status === 200){ - router.push("/dashboard/artist/requests/"+params.row["id"]) - } - else{ - alert("Error accepting request.") - } - } - - const completeRequest = async () => { - let response = await fetch('/api/artist/requests/'+params.row["id"]+"/complete", { method: 'PUT' }) - if(response.status === 200){ - router.push("/dashboard/artist/requests/"+params.row["id"]) - } - else{ - alert("Error accepting request.") - } - } - - const [open, setOpen] = React.useState(false); - - const handleClickOpen = () => { - setOpen(true); - }; - - const handleClose = () => { - setOpen(false); - }; - + let formattedTime = "" const date = new Date(params.row.requestDate); formattedTime = date.toLocaleTimeString('en-US', { month: 'long', day: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' }); // Example format - - return (<> - { router.push("/dashboard/artist/requests/"+params.row["id"])}} aria-label="accept" color="primary" > - {((params.row.accepted==false && params.row.declined==false && params.row.completed==false) ? ( - <> - - - - - + return + } }, + { field: 'action', headerName: '', flex:0.15, filterable: false, sortable: false, + renderCell: (params) =>{ + + const acceptRequest = async () => { + let response = await fetch('/api/artist/requests/'+params.row["id"]+"/accept", { method: 'PUT' }) + if(response.status === 200){ + router.push("/dashboard/artist/requests/"+params.row["id"]) + } + else{ + alert("Error accepting request.") + } + } + + const viewRequest = async () => { + + } + + const denyRequest = async () => { + let response = await fetch('/api/artist/requests/'+params.row["id"]+"/deny", { method: 'PUT' }) + if(response.status === 200){ + router.push("/dashboard/artist/requests/"+params.row["id"]) + } + else{ + alert("Error accepting request.") + } + } + + const completeRequest = async () => { + let response = await fetch('/api/artist/requests/'+params.row["id"]+"/complete", { method: 'PUT' }) + if(response.status === 200){ + router.push("/dashboard/artist/requests/"+params.row["id"]) + } + else{ + alert("Error accepting request.") + } + } + + const [open, setOpen] = React.useState(false); + + const handleClickOpen = () => { + setOpen(true); + }; + + const handleClose = () => { + setOpen(false); + }; + + let formattedTime = "" + const date = new Date(params.row.requestDate); + formattedTime = date.toLocaleTimeString('en-US', { month: 'long', day: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' }); // Example format + + return (<> + { router.push("/dashboard/artist/requests/"+params.row["id"])}} aria-label="accept" color="primary" > + {((params.row.accepted==false && params.row.declined==false && params.row.completed==false) ? ( + <> + + - - ): null - )} - {((params.row.accepted==true && params.row.declined==false && params.row.completed==false && params.row.paid==true) ? ( - <> - - - - - ): null - )} - - ) - } } - ]; + + + + + ): null + )} + {((params.row.accepted==true && params.row.declined==false && params.row.completed==false && params.row.paid==true) ? ( + <> + + + + + ): null + )} + + ) + } } + ]; + } const [isLoading, setIsLoading] = React.useState(true); const [requestCount, setRequestCount] = React.useState(null); const [requestData, setRequestData] = React.useState({}); diff --git a/pages/dashboard/requests.tsx b/pages/dashboard/requests.tsx index 8d27107..ab2e284 100644 --- a/pages/dashboard/requests.tsx +++ b/pages/dashboard/requests.tsx @@ -25,78 +25,138 @@ import { Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, F import { Grid } from '@mui/material'; import { useRouter } from 'next/router'; import { request } from 'http'; +import { useMediaQuery } from '@mui/material'; export default function ServerPaginationGrid() { + const isSmallScreen = useMediaQuery(theme => theme.breakpoints.down('sm')); // Check if the screen size is small const router = useRouter(); - const columns = [ - { field: 'id', headerName: 'ID', flex: 0.1}, - { field: 'status', headerName: 'Status', flex: 0.15, - renderCell: (params) => { - if(params.row.completed){ - return } label="Completed" variant="outlined" color="success" /> - } - else if(params.row.paid){ - return } label="Paid" variant="outlined" color="success" /> - } - else if(params.row.accepted && params.row.paid==false){ - return } label="Pending Payment" variant="outlined" color="warning" /> - } - else if(params.row.accepted && params.row.paid){ - return } label="Accepted" variant="outlined" color="info" /> - } - else if(params.row.declined){ - return } label="Declined" variant="outlined" color="error" /> - } - else{ - return } label="Pending" variant="outlined" color="secondary" /> - } - } - }, - { field: 'message', headerName: 'Message', flex: 0.5, - renderCell: (params) => { - return ; - }}, - { field: 'amount', headerName: 'Amount', flex: 0.1, renderCell: (params) => { - return ; - }}, - { field: 'requestDate', headerName: 'Request Date', flex:0.15, - renderCell: (params) =>{ + let columns = []; + if(isSmallScreen){ - let formattedTime = "" - const date = new Date(params.row.requestDate); - formattedTime = date.toLocaleTimeString('en-US', { month: 'long', day: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' }); // Example format - return - } }, - { field: 'download', headerName: '', flex:0.1, - renderCell: (params) =>{ - - const handlePay = async () => { - var paymentUrlRequest = await fetch('/api/requests/'+params.row.id+'/payment') - //console.log(paymentUrlRequest); - var paymentUrlJson = await paymentUrlRequest.json(); - var paymentUrl = paymentUrlJson.paymentUrl; - window.open(paymentUrl); + columns = [ + { field: 'id', headerName: '', flex: 0.05, sortable: false, filterable: false}, + { field: 'status', headerName: 'Status', flex: 0.15, filterable: false, sortable: false, + renderCell: (params) => { + if(params.row.completed){ + return } - return (<> - { router.push("/dashboard/requests/"+params.row.id)}} aria-label="accept" color="primary"> - {((params.row.accepted==true &¶ms.row.declined==false && params.row.paid==false) ? ( - - ): null - )} - {((params.row.completed) ? ( - - ): null - )} - - ) - } } - ]; + else if(params.row.paid){ + return + } + else if(params.row.accepted && params.row.paid==false){ + return + } + else if(params.row.accepted && params.row.paid){ + return + } + else if(params.row.declined){ + return + } + else{ + return + } + } + }, + { field: 'amount', headerName: 'Amount', flex: 0.15, sortable: false, filterable: false, renderCell: (params) => { + return ; + }}, + { field: 'actions', headerName: '', flex:0.1, sortable: false, filterable: false, + renderCell: (params) =>{ + + const handlePay = async () => { + var paymentUrlRequest = await fetch('/api/requests/'+params.row.id+'/payment') + //console.log(paymentUrlRequest); + var paymentUrlJson = await paymentUrlRequest.json(); + var paymentUrl = paymentUrlJson.paymentUrl; + window.open(paymentUrl); + } + return (<> + { router.push("/dashboard/requests/"+params.row.id)}} aria-label="accept" color="primary"> + {((params.row.accepted==true &¶ms.row.declined==false && params.row.paid==false) ? ( + + ): null + )} + {((params.row.completed) ? ( + + ): null + )} + + ) + } } + ]; + } + else{ + + columns = [ + { field: 'id', headerName: 'ID', flex: 0.1, sortable: false, filterable: false}, + { field: 'status', headerName: 'Status', flex: 0.15, sortable: false, filterable: false, + renderCell: (params) => { + if(params.row.completed){ + return } label="Completed" variant="outlined" color="success" /> + } + else if(params.row.paid){ + return } label="Paid" variant="outlined" color="success" /> + } + else if(params.row.accepted && params.row.paid==false){ + return } label="Pending Payment" variant="outlined" color="warning" /> + } + else if(params.row.accepted && params.row.paid){ + return } label="Accepted" variant="outlined" color="info" /> + } + else if(params.row.declined){ + return } label="Declined" variant="outlined" color="error" /> + } + else{ + return } label="Pending" variant="outlined" color="secondary" /> + } + } + }, + { field: 'message', headerName: 'Message', flex: 0.5, sortable: false, filterable: false, + renderCell: (params) => { + return ; + }}, + { field: 'amount', headerName: 'Amount', flex: 0.1, filterable: false, renderCell: (params) => { + return ; + }}, + { field: 'requestDate', headerName: 'Request Date', sortable: false, flex:0.15, filterable: false, + renderCell: (params) =>{ + + let formattedTime = "" + const date = new Date(params.row.requestDate); + formattedTime = date.toLocaleTimeString('en-US', { month: 'long', day: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' }); // Example format + return + } }, + { field: 'download', headerName: '', sortable: false, flex:0.1, filterable: false, + renderCell: (params) =>{ + + const handlePay = async () => { + var paymentUrlRequest = await fetch('/api/requests/'+params.row.id+'/payment') + //console.log(paymentUrlRequest); + var paymentUrlJson = await paymentUrlRequest.json(); + var paymentUrl = paymentUrlJson.paymentUrl; + window.open(paymentUrl); + } + return (<> + { router.push("/dashboard/requests/"+params.row.id)}} aria-label="accept" color="primary"> + {((params.row.accepted==true &¶ms.row.declined==false && params.row.paid==false) ? ( + + ): null + )} + {((params.row.completed) ? ( + + ): null + )} + + ) + } } + ]; + } const [isLoading, setIsLoading] = React.useState(true); const [requestCount, setRequestCount] = React.useState(null); const [requestData, setRequestData] = React.useState({}); diff --git a/pages/dashboard/requests/[requestId].tsx b/pages/dashboard/requests/[requestId].tsx index fcebbbb..27fa702 100644 --- a/pages/dashboard/requests/[requestId].tsx +++ b/pages/dashboard/requests/[requestId].tsx @@ -278,6 +278,15 @@ const RequestDetails = () => { disabled={!review || alreadyReviewed} onChange={handleRatingChange}/> + + {request.completed ? ( + request.reviewed ? ( + You have reviewed this request so others know the quality of this artists work! + ):( + Please leave a review for this request so other users know the quality of this artists work! + ) + ): null} +