filter at order admin

src/pages/admin/order.js

@@ -16,13 +16,17 @@ import {
   FormControl,
   Select,
   MenuItem,
+  Button,
 } from "@mui/material";
+import { useRouter } from "next/router";
 
 export default function Order() {
   const user = useContext(UserContext);
+  const router = useRouter();
   const adminOrder = useContext(AdminOrderContext);
   const [message, setMessage] = useState({ message: "", error: false });
   const [userAll, setUserAll] = useState([]);
+  const [payStatusFilter, setPayStatusFilter] = useState(0);
 
   useEffect(() => {
     axios
@@ -70,6 +74,15 @@ export default function Order() {
         isError={message.error}
         message={message.message}
       />
+      <Box sx={{ maxWidth: 1200, mx: "auto" }}>
+        <Box sx={{ textAlign: "right", mb: 2 }}>
+          <Button
+            onClick={() => setPayStatusFilter(!payStatusFilter)}
+            variant={payStatusFilter ? "contained" : "text"}
+          >
+            ยังไม่ชำระเงิน
+          </Button>
+        </Box>
         <Paper sx={{ p: 1, overflowX: "scroll" }}>
           {adminOrder.value?.length > 0 ? (
             <Box>
@@ -93,6 +106,9 @@ export default function Order() {
                 <TableBody>
                   {adminOrder.value.map(
                     (order, idx) =>
+                      (!payStatusFilter || order.pay_status === 0) &&
+                      (!router.query?.q ||
+                        order.id === Number(router.query.q)) &&
                       order && (
                         <TableRow key={idx}>
                           <TableCell>{order.id}</TableCell>
@@ -159,10 +175,13 @@ export default function Order() {
             </Box>
           ) : (
             <div className="text-center">
-            {user.value?.token ? "รายการว่างเปล่า" : "คุณยังไม่ได้เข้าสู่ระบบ"}
+              {user.value?.token
+                ? "รายการว่างเปล่า"
+                : "คุณยังไม่ได้เข้าสู่ระบบ"}
             </div>
           )}
         </Paper>
+      </Box>
     </>
   );
 }