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}
+