in order page can view only not make payment yet

src/pages/order.js

@@ -2,11 +2,14 @@ import {
   Box,
   Button,
   Paper,
+  Stack,
+  Switch,
   Table,
   TableBody,
   TableCell,
   TableHead,
   TableRow,
+  Typography,
 } from "@mui/material";
 import React, { useContext, useEffect, useState } from "react";
 import { CartContext, OrderContext, UserContext } from "./_app";
@@ -23,6 +26,7 @@ export default function Order() {
   const [message, setMessage] = useState({ error: false, message: "" });
   const order = useContext(OrderContext);
   const [payment, setPayment] = useState({ open: false, id: -1, price: -1 });
+  const [payFilter, setPayFilter] = useState(false);
 
   const fetchProduct = async () => {
     try {
@@ -57,6 +61,24 @@ export default function Order() {
           isError={message.error}
           message={message.message}
         />
+        <Box sx={{ maxWidth: 1200, mx: "auto" }}>
+          <Box>
+            <Stack
+              direction={"row"}
+              alignItems={"center"}
+              justifyContent={"end"}
+            >
+              <Typography>ทั้งหมด</Typography>
+              <Switch
+                checked={payFilter}
+                onChange={(e) => {
+                  console.log(e.target.checked);
+                  setPayFilter(e.target.checked);
+                }}
+              />
+              <Typography>ยังไม่ชำระเงิน</Typography>
+            </Stack>
+          </Box>
           <Paper sx={{ p: 1, overflowX: "scroll" }}>
             {order.value?.length > 0 ? (
               <Box>
@@ -79,7 +101,8 @@ export default function Order() {
                   <TableBody>
                     {order.value.map(
                       (order, idx) =>
-                      order && (
+                        order &&
+                        (!payFilter || order.pay_status === 0) && (
                           <TableRow key={idx}>
                             <TableCell>{order.id}</TableCell>
                             <TableCell>
@@ -116,7 +139,9 @@ export default function Order() {
                             <TableCell>
                               {order.send_status == 0 ? (
                                 <Box color="gray">
-                                {order.send_status ? "ส่งแล้ว" : "ยังไม่จัดส่ง"}
+                                  {order.send_status
+                                    ? "ส่งแล้ว"
+                                    : "ยังไม่จัดส่ง"}
                                 </Box>
                               ) : (
                                 <>
@@ -143,6 +168,7 @@ export default function Order() {
             )}
           </Paper>
         </Box>
+      </Box>
     </>
   );
 }