fix: filtering and sorting disabled now

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 <CurrencyTextField size="small" fullWidth value={params.row.amount} currencySymbol="$" disabled />;
       }},
-      { 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({});  

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 = [
+  let columns = []
-    { field: 'id', headerName: 'ID', flex: 0.1},
+  if(isSmallScreen){
-    { field: 'status', headerName: 'Status', flex: 0.15,
+    columns = [
-      renderCell: (params) => {
+      { field: 'id', headerName: 'ID', flex: 0.1, filterable: false, sortable: false},
-        if(params.row.completed){
+      { field: 'status', headerName: 'Status', flex: 0.15, filterable: false, sortable: false,
-            return <Chip icon={<Check />} label="Completed" variant="outlined" color="success" />
+        renderCell: (params) => {
+          if(params.row.completed){
+              return <Check color="success" />
+          }
+          else if(params.row.paid){
+              return <PriceCheckIcon color="success" />
+          }
+          else if(params.row.accepted && params.row.paid==false){
+              return <PriceCheckIcon color="warning" />
+          }
+          else if(params.row.accepted && params.row.paid){
+              return <AssignmentTurnedInIcon color="info" />
+          }
+          else if(params.row.declined){
+              return <AssignmentLateIcon color="error" />
+          }
+          else{
+              return <Refresh color="secondary" />
+          }
         }
-        else if(params.row.paid){
+    },
-            return <Chip icon={<PriceCheckIcon />} label="Paid" variant="outlined" color="success" />
+      { field: 'amount', headerName: 'Amount', flex: 0.15, filterable: false, sortable: false, renderCell: (params) => {
-        }
+        return <CurrencyTextField size="small" fullWidth value={params.row.amount} currencySymbol="$" disabled />;
-        else if(params.row.accepted && params.row.paid==false){
-            return <Chip icon={<PriceCheckIcon />} label="Pending Payment" variant="outlined" color="warning" />
-        }
-        else if(params.row.accepted && params.row.paid){
-            return <Chip icon={<AssignmentTurnedInIcon />} label="Accepted" variant="outlined" color="info" />
-        }
-        else if(params.row.declined){
-            return <Chip icon={<AssignmentLateIcon />} label="Declined" variant="outlined" color="error" />
-        }
-        else{
-            return <Chip icon={<Refresh />} label="Pending" variant="outlined" color="secondary" />
-        }
-      }
-  },
-    { field: 'message', headerName: 'Message', flex: 0.5,
-      renderCell: (params) => {
-          return <TextField size="small" fullWidth value={params.row.message} disabled />;
       }},
-    { field: 'amount', headerName: 'Amount', flex: 0.1, renderCell: (params) => {
+        { field: 'action', headerName: '', flex:0.1, filterable: false, sortable: false, 
-      return <CurrencyTextField size="small" fullWidth value={params.row.amount} currencySymbol="$" disabled />;
+          renderCell: (params) =>{
-    }},
+  
-    { field: 'requestDate', headerName: 'Request Date', flex:0.15, 
+              const acceptRequest = async () => {
-      renderCell: (params) =>{
+                let response = await fetch('/api/artist/requests/'+params.row["id"]+"/accept", { method: 'PUT' })
-
+                if(response.status === 200){
-          let formattedTime = ""
+                  router.push("/dashboard/artist/requests/"+params.row["id"])
-          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  
+                else{
-          return <DateField
+                  alert("Error accepting request.")
-          size='small'
+                }
-          disabled
+              }
-          defaultValue={dayjs(params.row.requestDate)}
+  
-          format="LL"
+              const viewRequest = async () => {
-        />
+  
-      } },
+              }
-      { field: 'action', headerName: '', flex:0.15, 
+  
+              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 (<>
+                <Tooltip arrow title="View more details."><IconButton onClick={() => { router.push("/dashboard/artist/requests/"+params.row["id"])}}  aria-label="accept" color="primary" ><OpenInNew/></IconButton></Tooltip>
+                {((params.row.accepted==false && params.row.declined==false && params.row.completed==false) ? (
+                    <>
+                    <Tooltip arrow title="Accept this request.">
+                    <IconButton onClick={acceptRequest}  aria-label="accept" color="success"><Check/></IconButton>
+                  </Tooltip>
+                    <Tooltip arrow title="Deny this request.">
+                      <IconButton  onClick={denyRequest} aria-label="deny" sx={{marginLeft:"2px"}} color="error"><Close/></IconButton>
+                    </Tooltip>
+                    </>
+                ): null
+                )}
+                {((params.row.accepted==true && params.row.declined==false && params.row.completed==false && params.row.paid==true) ? (
+                    <>
+                    <Tooltip arrow title="Complete this request.">
+                      <IconButton onClick={completeRequest}  aria-label="complete" color="success"><ClipboardCheck/></IconButton>
+                    </Tooltip>
+                    </>
+                ): 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 <Chip icon={<Check />} label="Completed" variant="outlined" color="success" />
+          }
+          else if(params.row.paid){
+              return <Chip icon={<PriceCheckIcon />} label="Paid" variant="outlined" color="success" />
+          }
+          else if(params.row.accepted && params.row.paid==false){
+              return <Chip icon={<PriceCheckIcon />} label="Pending Payment" variant="outlined" color="warning" />
+          }
+          else if(params.row.accepted && params.row.paid){
+              return <Chip icon={<AssignmentTurnedInIcon />} label="Accepted" variant="outlined" color="info" />
+          }
+          else if(params.row.declined){
+              return <Chip icon={<AssignmentLateIcon />} label="Declined" variant="outlined" color="error" />
+          }
+          else{
+              return <Chip icon={<Refresh />} label="Pending" variant="outlined" color="secondary" />
+          }
+        }
+    },
+      { field: 'message', headerName: 'Message', flex: 0.5, filterable: false, sortable: false,
+        renderCell: (params) => {
+            return <TextField size="small" fullWidth value={params.row.message} disabled />;
+        }},
+      { field: 'amount', headerName: 'Amount', flex: 0.1, filterable: false, sortable: false, renderCell: (params) => {
+        return <CurrencyTextField size="small" fullWidth value={params.row.amount} currencySymbol="$" disabled />;
+      }},
+      { 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 <DateField
-            return (<>
+            size='small'
-              <Tooltip arrow title="View more details."><IconButton onClick={() => { router.push("/dashboard/artist/requests/"+params.row["id"])}}  aria-label="accept" color="primary" ><OpenInNew/></IconButton></Tooltip>
+            disabled
-              {((params.row.accepted==false && params.row.declined==false && params.row.completed==false) ? (
+            defaultValue={dayjs(params.row.requestDate)}
-                  <>
+            format="LL"
-                  <Tooltip arrow title="Accept this request.">
+          />
-                  <IconButton onClick={acceptRequest}  aria-label="accept" color="success"><Check/></IconButton>
+        } },
-                </Tooltip>
+        { field: 'action', headerName: '', flex:0.15, filterable: false, sortable: false, 
-                  <Tooltip arrow title="Deny this request.">
+          renderCell: (params) =>{
-                    <IconButton  onClick={denyRequest} aria-label="deny" sx={{marginLeft:"2px"}} color="error"><Close/></IconButton>
+  
+              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 (<>
+                <Tooltip arrow title="View more details."><IconButton onClick={() => { router.push("/dashboard/artist/requests/"+params.row["id"])}}  aria-label="accept" color="primary" ><OpenInNew/></IconButton></Tooltip>
+                {((params.row.accepted==false && params.row.declined==false && params.row.completed==false) ? (
+                    <>
+                    <Tooltip arrow title="Accept this request.">
+                    <IconButton onClick={acceptRequest}  aria-label="accept" color="success"><Check/></IconButton>
                   </Tooltip>
-                  </>
+                    <Tooltip arrow title="Deny this request.">
-              ): null
+                      <IconButton  onClick={denyRequest} aria-label="deny" sx={{marginLeft:"2px"}} color="error"><Close/></IconButton>
-              )}
+                    </Tooltip>
-              {((params.row.accepted==true && params.row.declined==false && params.row.completed==false && params.row.paid==true) ? (
+                    </>
-                  <>
+                ): null
-                  <Tooltip arrow title="Complete this request.">
+                )}
-                    <IconButton onClick={completeRequest}  aria-label="complete" color="success"><ClipboardCheck/></IconButton>
+                {((params.row.accepted==true && params.row.declined==false && params.row.completed==false && params.row.paid==true) ? (
-                  </Tooltip>
+                    <>
-                  </>
+                    <Tooltip arrow title="Complete this request.">
-              ): null
+                      <IconButton onClick={completeRequest}  aria-label="complete" color="success"><ClipboardCheck/></IconButton>
-              )}
+                    </Tooltip>
-          </>
+                    </>
-          )
+                ): null
-        } }
+                )}
-  ];
+            </>
+            )
+          } }
+    ];
+  }
   const [isLoading, setIsLoading] = React.useState(true);
   const [requestCount, setRequestCount] = React.useState(null);  
   const [requestData, setRequestData] = React.useState({});  

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 = [
+    let columns = [];
-        { field: 'id', headerName: 'ID', flex: 0.1},
+    if(isSmallScreen){
-        { field: 'status', headerName: 'Status', flex: 0.15,
-        renderCell: (params) => {
-            if(params.row.completed){
-                return <Chip icon={<Check />} label="Completed" variant="outlined" color="success" />
-            }
-            else if(params.row.paid){
-                return <Chip icon={<PriceCheckIcon />} label="Paid" variant="outlined" color="success" />
-            }
-            else if(params.row.accepted && params.row.paid==false){
-                return <Chip icon={<PriceCheckIcon />} label="Pending Payment" variant="outlined" color="warning" />
-            }
-            else if(params.row.accepted && params.row.paid){
-                return <Chip icon={<AssignmentTurnedInIcon />} label="Accepted" variant="outlined" color="info" />
-            }
-            else if(params.row.declined){
-                return <Chip icon={<AssignmentLateIcon />} label="Declined" variant="outlined" color="error" />
-            }
-            else{
-                return <Chip icon={<Refresh />} label="Pending" variant="outlined" color="secondary" />
-            }
-        }
-    },
-        { field: 'message', headerName: 'Message', flex: 0.5,
-        renderCell: (params) => {
-            return <TextField size="small" fullWidth value={params.row.message} disabled />;
-        }},
-        { field: 'amount', headerName: 'Amount', flex: 0.1, renderCell: (params) => {
-        return <CurrencyTextField size="small" fullWidth value={params.row.amount} currencySymbol="$" disabled />;
-        }},
-        { field: 'requestDate', headerName: 'Request Date', flex:0.15, 
-        renderCell: (params) =>{
 
-            let formattedTime = ""
+     columns = [
-            const date = new Date(params.row.requestDate);  
+            { field: 'id', headerName: '', flex: 0.05, sortable: false, filterable: false},
-            formattedTime = date.toLocaleTimeString('en-US', { month: 'long', day: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' }); // Example format  
+          { field: 'status', headerName: 'Status', flex: 0.15, filterable: false, sortable: false,
-            return <DateField
+          renderCell: (params) => {
-            size='small'
+              if(params.row.completed){
-            disabled
+                  return <Check  color="success" />
-            defaultValue={dayjs(params.row.requestDate)}
-            format="LL"
-            />
-        } },
-        { 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);
               }
-                return (<>
+              else if(params.row.paid){
-                    <Tooltip arrow title="View more details."><IconButton onClick={() => { router.push("/dashboard/requests/"+params.row.id)}}  aria-label="accept" color="primary"><OpenInNew/></IconButton></Tooltip>
+                  return <PriceCheckIcon color="success" />
-                    {((params.row.accepted==true &&params.row.declined==false && params.row.paid==false) ? (
+              }
-                        <Tooltip arrow title="Pay for this request."><IconButton onClick={handlePay}  aria-label="accept" color="success"><ShoppingCartCheckoutIcon/></IconButton></Tooltip>
+              else if(params.row.accepted && params.row.paid==false){
-                    ): null
+                  return <PriceCheckIcon  color="warning" />
-                    )}
+              }
-                    {((params.row.completed) ? (
+              else if(params.row.accepted && params.row.paid){
-                        <Tooltip arrow title="Download requests assets."><IconButton aria-label="download" color="secondary"><Download/></IconButton></Tooltip>
+                  return <AssignmentTurnedInIcon  color="info" />
-                    ): null
+              }
-                    )}
+              else if(params.row.declined){
-                </>
+                  return <AssignmentLateIcon color="error" />
-                )
+              }
-            } }
+              else{
-    ];
+                  return <Refresh color="secondary" />
+              }
+          }
+      },
+          { field: 'amount', headerName: 'Amount', flex: 0.15, sortable: false, filterable: false, renderCell: (params) => {
+          return <CurrencyTextField size="small" fullWidth value={params.row.amount} currencySymbol="$" disabled />;
+          }},
+          { 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 (<>
+                      <Tooltip arrow title="View more details."><IconButton onClick={() => { router.push("/dashboard/requests/"+params.row.id)}}  aria-label="accept" color="primary"><OpenInNew/></IconButton></Tooltip>
+                      {((params.row.accepted==true &&params.row.declined==false && params.row.paid==false) ? (
+                          <Tooltip arrow title="Pay for this request."><IconButton onClick={handlePay}  aria-label="accept" color="success"><ShoppingCartCheckoutIcon/></IconButton></Tooltip>
+                      ): null
+                      )}
+                      {((params.row.completed) ? (
+                          <Tooltip arrow title="Download requests assets."><IconButton aria-label="download" color="secondary"><Download/></IconButton></Tooltip>
+                      ): 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 <Chip icon={<Check />} label="Completed" variant="outlined" color="success" />
+          }
+          else if(params.row.paid){
+              return <Chip icon={<PriceCheckIcon />} label="Paid" variant="outlined" color="success" />
+          }
+          else if(params.row.accepted && params.row.paid==false){
+              return <Chip icon={<PriceCheckIcon />} label="Pending Payment" variant="outlined" color="warning" />
+          }
+          else if(params.row.accepted && params.row.paid){
+              return <Chip icon={<AssignmentTurnedInIcon />} label="Accepted" variant="outlined" color="info" />
+          }
+          else if(params.row.declined){
+              return <Chip icon={<AssignmentLateIcon />} label="Declined" variant="outlined" color="error" />
+          }
+          else{
+              return <Chip icon={<Refresh />} label="Pending" variant="outlined" color="secondary" />
+          }
+      }
+  },
+      { field: 'message', headerName: 'Message', flex: 0.5, sortable: false, filterable: false,
+      renderCell: (params) => {
+          return <TextField size="small" fullWidth value={params.row.message} disabled />;
+      }},
+      { field: 'amount', headerName: 'Amount', flex: 0.1, filterable: false, renderCell: (params) => {
+      return <CurrencyTextField size="small" fullWidth value={params.row.amount} currencySymbol="$" disabled />;
+      }},
+      { 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 <DateField
+          size='small'
+          disabled
+          defaultValue={dayjs(params.row.requestDate)}
+          format="LL"
+          />
+      } },
+      { 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 (<>
+                  <Tooltip arrow title="View more details."><IconButton onClick={() => { router.push("/dashboard/requests/"+params.row.id)}}  aria-label="accept" color="primary"><OpenInNew/></IconButton></Tooltip>
+                  {((params.row.accepted==true &&params.row.declined==false && params.row.paid==false) ? (
+                      <Tooltip arrow title="Pay for this request."><IconButton onClick={handlePay}  aria-label="accept" color="success"><ShoppingCartCheckoutIcon/></IconButton></Tooltip>
+                  ): null
+                  )}
+                  {((params.row.completed) ? (
+                      <Tooltip arrow title="Download requests assets."><IconButton aria-label="download" color="secondary"><Download/></IconButton></Tooltip>
+                  ): null
+                  )}
+              </>
+              )
+          } }
+  ];
+    }
   const [isLoading, setIsLoading] = React.useState(true);
   const [requestCount, setRequestCount] = React.useState(null);  
   const [requestData, setRequestData] = React.useState({});  

pages/dashboard/requests/[requestId].tsx

@@ -278,6 +278,15 @@ const RequestDetails = () => {
                                     disabled={!review || alreadyReviewed}
                                     onChange={handleRatingChange}/>
                                 </Grid>
+                                <Grid item xs={12} md={12}>
+                                    {request.completed ? (
+                                      request.reviewed ? (
+                                        <Alert sx={{width:"100%"}} severity="info">You have reviewed this request so others know the quality of this artists work!</Alert>
+                                      ):(
+                                        <Alert sx={{width:"100%"}} severity="warning">Please leave a review for this request so other users know the quality of this artists work!</Alert>
+                                      )
+                                    ): null}
+                                </Grid>
                               </Grid>
                               </Paper>
                             </Grid>