refactor: fix dashboard for staff, fix status button for manager in w…

…arranty request

frontend/src/components/nav/TopNav.tsx

@@ -1,7 +1,4 @@
 import {
-  ChevronDown,
-  //FlaskConical,
-  // Heart,
   LineChart,
   Mail,
   MapPin,
@@ -13,13 +10,10 @@ import {
 import Logo from "../logo/Logo";
 import { App } from "antd";
 import SearchBar from "../SearchBar";
-import { useState } from "react";
-import JewelryItem from "./components/JewelryItem";
-import DiamondItem from "./components/DiamondItem";
-import { Link, useNavigate } from "react-router-dom";
+import { useEffect, useState } from "react";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 import { useCartStore } from "../../store/cartStore";
 import { GET } from "../../utils/request";
-import { useQueries } from "@tanstack/react-query";
 import { jwtDecode } from "jwt-decode";
 import { getCookie } from "../../utils/cookie";
 
@@ -66,22 +60,16 @@ export default function TopNav() {
   const [diamondDrop, setDiamondDrop] = useState(false);
   const [menuDrop, setMenuDrop] = useState(false);
   const { message } = App.useApp();
-
+  const [account, setAccount] = useState<any>();
+  const location = useLocation();
   const navigate = useNavigate();
-  const [shapes, accessoryTypes] = useQueries({
-    queries: [
-      {
-        queryKey: ["shapes"],
-        queryFn: () => GET("/api/Shapes/"),
-        staleTime: Infinity,
-      },
-      {
-        queryKey: ["accessoryTypes"],
-        queryFn: () => GET("/api/AccessoryTypes/"),
-        staleTime: Infinity,
-      },
-    ],
-  });
+  useEffect(() => {
+    const fetchData = async () => {
+      const response = await GET("/api/Accounts/me");
+      setAccount(response);
+    };
+    fetchData();
+  }, [location, account]);
   return (
     <div className="top-0 left-0 relative gap-4 py-3 px-4 bg-white w-full shadow-lg h-full">
       <div className="flex justify-between md:hidden">
@@ -109,18 +97,32 @@ export default function TopNav() {
           <div className="cursor-pointer">
             <SearchBar />
           </div>
-          {/* <Link to="/test">
-            <FlaskConical size={20} strokeWidth={2} absoluteStrokeWidth />
-          </Link> */}
           {decode && decode?.role != "Customer" && (
             <div
               className="cursor-pointer"
               onClick={async () => {
                 const response = await GET("/api/Accounts/me");
-                console.log(response);
-                if (response.role != "Customer") {
-                  navigate("/admin");
-                }
+                console.log(response);    
+                  switch(response.role) {
+                    case "Manager":
+                      navigate("/admin");
+                      break;
+                    case "SaleStaff":
+                      navigate("/admin/sale-staffs");
+                      break;
+                    case "DeliveryStaff":
+                      navigate("/admin/delivery-staffs");
+                      break;
+                    case "Administrator":
+                      navigate("/admin");
+                      break;
+                    case "WarrantyStaff":
+                      navigate("/admin/warranty-request");
+                      break;
+                    default:
+                      navigate("/");
+                      break;
+                  }                
               }}
             >
               <LineChart size={20} strokeWidth={2} absoluteStrokeWidth />
@@ -137,6 +139,11 @@ export default function TopNav() {
               )}
             </Link>
           </div>
+          {account && (
+            <div className="text-lg font-semibold text-gray-800 pl-4 py-2">
+              Welcome, {account?.name}
+            </div>
+          )}
           <div
             className="cursor-pointer"
             onClick={async () => {

frontend/src/layouts/CheckoutLayout.tsx

@@ -270,7 +270,9 @@ export default function CheckoutLayout() {
             </div>
             <div className="flex justify-between">
               <div>Discount</div>
-              <div className="font-semibold">{totalDiscount * 100 + "%"}</div>
+              <div className="font-semibold">
+                {(totalDiscount * 100).toFixed(0) + "%"}
+              </div>
             </div>
           </div>
           <Divider />

frontend/src/pages/authentication/Login.tsx

@@ -118,11 +118,26 @@ export default function Login() {
                 setCookie("accessToken", authResponse.token, 7);
                 // Check the role of the user
                 const decoded = jwtDecode(authResponse.token || "") as any;
-                if (decoded.role != "Customer") {
-                  navigate("/admin");
-                } else {
-                  navigate("/");
-                }
+                switch(decoded.role) {
+                  case "Manager":
+                    navigate("/admin");
+                    break;
+                  case "SaleStaff":
+                    navigate("/admin/sale-staffs");
+                    break;
+                  case "DeliveryStaff":
+                    navigate("/admin/delivery-staffs");
+                    break;
+                  case "Administrator":
+                    navigate("/admin");
+                    break;
+                  case "WarrantyStaff":
+                    navigate("/admin/warranty-request");
+                    break;
+                  default:
+                    navigate("/");
+                    break;
+                  }
               } else {
                 setIsLoading(false);
                 setError("password", {

frontend/src/pages/dashboard/blog/components/BlogListItem.tsx

@@ -23,7 +23,7 @@ export default function BlogListItem({ blog }: { blog: any }) {
       <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
         {moment(blog?.createdAt).format("MMMM Do, YYYY")}
       </td>
-      <td className="px-6 py-4 whitespace-nowrap text-sm text-indigo-600">
+      <td className="px-6 py-4 whitespace-nowrap text-sm text-indigo-600 font-bold">
         {blog?.isHidden ? "Unavailable" : "Available"}
       </td>
     </tr>

frontend/src/pages/dashboard/components/DashboardHeader.tsx

@@ -66,7 +66,7 @@ export default function DashboardHeader() {
               anchor="bottom end"
               className="w-52 origin-top-right rounded-xl border border-white/5 bg-black p-1 text-sm/6 text-white [--anchor-gap:var(--spacing-1)] focus:outline-none"
             >
-              <MenuItem>
+              {/* <MenuItem>
                 {({ active }) => (
                   <a
                     href="/profile"
@@ -77,7 +77,7 @@ export default function DashboardHeader() {
                     Your Profile
                   </a>
                 )}
-              </MenuItem>
+              </MenuItem> */}
 
               <MenuItem>
                 <Button

frontend/src/pages/dashboard/components/Sidebar.tsx

@@ -57,7 +57,7 @@ const ROLE_PERMISSIONS: Record<Role, string[]> = {
     "price",
     "blog",
   ],
-  SaleStaff: ["salestaff", "warranty-request"],
+  SaleStaff: ["salestaff"],
   DeliveryStaff: ["deliverystaff", "warranty-request"],
   WarrantyStaff: ["warranty-request"],
 };
@@ -388,19 +388,23 @@ export default function Sidebar() {
       {/* Sidebar */}
       <div className="sm:hidden flex flex-col bg-neutral-800 w-auto h-auto text-white overflow-y-auto">
         <Link to={"/"} className="flex items-center gap-2 px-1 py-3 mx-3">
-          <Gem strokeWidth={1.75} />
-          <div className="text-neutral-100 text-xl">DatJ</div>
+          <Gem strokeWidth={1.75} width={15} />
+          <div className="text-neutral-100 text-sm">DatJ</div>
         </Link>
         <Button
-          className="w-8 flex justify-center ml-6 bg-neutral-800"
+          className="mx-3 w-8 flex justify-center ml-6 bg-neutral-800"
           type="link"
           onClick={toggleCollapsed}
           style={{ marginBottom: 16, transition: "all 0.5s" }}
         >
-          {collapsed ? <MenuUnfoldOutlined className="mt-1"/> : <MenuFoldOutlined className="mt-1" />}
+          {collapsed ? (
+            <MenuUnfoldOutlined className="mt-1" />
+          ) : (
+            <MenuFoldOutlined className="mt-1" />
+          )}
         </Button>
         <Menu
-          className="bg-neutral-800 text-neutral-100 items-center p-4  "
+          className="bg-neutral-800 text-neutral-100 items-center p-4 "
           mode="inline"
           theme="dark"
           inlineCollapsed={collapsed}

frontend/src/pages/dashboard/diamond/DiamondRow.tsx

@@ -30,34 +30,6 @@ export default function DiamondRow({
   return (
     <>
       <tr key={diamond.diamondId}>
-        {/* select checkbox */}
-        {/* <td className="px-6 py-4 whitespace-nowrap">
-          <div className="flex items-center">
-            <label className="flex items-center">
-              <input
-                type="checkbox"
-                value="0"
-                className="form-checkbox w-5 h-5"
-                checked={selectedDiamonds.includes(diamond.diamondId)}
-                onChange={(e) => {
-                  if (e.target.checked) {
-                    setSelectedDiamonds([
-                      ...selectedDiamonds,
-                      diamond.diamondId,
-                    ]);
-                  } else {
-                    setSelectedDiamonds(
-                      selectedDiamonds.filter((id) => id !== diamond.diamondId)
-                    );
-                  }
-                }}
-              />
-              <span className="checkbox-unchecked"></span>
-              <span className="pl-2"></span>
-              <input type="hidden" value="0" />
-            </label>
-          </div>
-        </td> */}
         {/* map diamond */}
         <td className="px-6 py-4 whitespace-nowrap">
           <div className="flex items-center">
@@ -110,7 +82,7 @@ export default function DiamondRow({
           {diamond.cut}
         </td>
         <td className="px-6 py-4 whitespace-nowrap text-left text-sm font-medium">
-          <div className="text-indigo-600 hover:text-indigo-900">
+          <div className="text-indigo-600 hover:text-indigo-900 font-bold">
             {diamond.availability ? "Available" : "Not Available"}
           </div>
         </td>

frontend/src/pages/dashboard/diamond/DiamondView.tsx

@@ -1,6 +1,6 @@
 import { useParams, Link, useNavigate } from "react-router-dom";
 import { GET, PUT, DELETE, POST } from "../../../utils/request";
-import { useState } from "react";
+import { useState, useRef } from "react";
 import { v4 } from "uuid";
 import {
   getDownloadURL,
@@ -165,6 +165,7 @@ const schema = z.object({
   availability: z.boolean(),
 });
 export default function DiamondView() {
+  const certificateNumberRef = useRef<any>(null);
   const [isLoading, setIsLoading] = useState(false);
   // const [certificateFile, setCertificateFile] = useState<UploadFile[]>([]);
   const [diamondFile, setDiamondFile] = useState<UploadFile[]>([]);
@@ -312,7 +313,32 @@ export default function DiamondView() {
           className=""
           layout="vertical"
           //submit form
+
           onFinish={handleSubmit(async (formData) => {
+            try {
+              const checkdiamond = await GET(
+                "/api/Diamonds?SearchQuery=" + formData.certificateNumber
+              );
+              console.log("API Response:", checkdiamond);
+
+              if (checkdiamond?.diamonds && checkdiamond.diamonds.length > 0) {
+                setError("certificateNumber", {
+                  type: "manual",
+                  message: "Duplicate Certificate number",
+                });
+                if (certificateNumberRef.current) {
+                  certificateNumberRef.current.scrollIntoView({
+                    behavior: "smooth",
+                  });
+                }
+                return;
+              }
+              console.log(
+                "No duplicate found, proceeding with form submission."
+              );
+            } catch (error) {
+              console.error("Error fetching data:", error);
+            }
             if (!diamondFile || diamondFile?.length === 0) {
               setError("image", {
                 type: "manual",
@@ -376,17 +402,19 @@ export default function DiamondView() {
               className="font-thin border p-2 rounded-md w-full"
             />
           </FormItem>
-          <FormItem
-            label="Certificate Numnber"
-            name="certificateNumber"
-            control={control}
-            required
-          >
-            <Input
-              placeholder="Diamond lab"
-              className="font-thin border p-2 rounded-md w-full"
-            />
-          </FormItem>
+          <div ref={certificateNumberRef}>
+            <FormItem
+              label="Certificate Number"
+              name="certificateNumber"
+              control={control}
+              required
+            >
+              <Input
+                placeholder="Diamond lab"
+                className="font-thin border p-2 rounded-md w-full"
+              />
+            </FormItem>
+          </div>
           <FormItem label="Carat" name="carat" control={control} required>
             <Input
               type="number"

frontend/src/pages/dashboard/warranty_request/components/StatusMenu.tsx

@@ -16,7 +16,7 @@ export const StatusMenu = ({
   const [targetStatus, setTargetStatus] = useState("");
   const [thisStatus, setThisStatus] = useState("");
 
-  let style = "text-white bg-green-500";
+  let style = "text-yellow bg-green-500";
   switch (statusText) {
     case "Pending":
       style = "text-white bg-yellow-500";
@@ -37,6 +37,30 @@ export const StatusMenu = ({
       style = "text-white bg-green-500";
       break;
   }
+  if (role == "Manager") {
+    switch (statusText) {
+      case "Pending":
+        style = "text-yellow-500 font-bold";
+        break;
+      case "Getting":
+        style = "text-blue-500 font-bold";
+        break;
+      case "Processing":
+        style = "text-blue-600 font-bold";
+        break;
+      case "Returning":
+        style = "text-blue-800 font-bold";
+        break;
+      case "Failed":
+        style = "text-red-500 font-bold";
+        break;
+      case "Completed":
+        style = "text-green-500 font-bold";
+        break;
+      default:
+        break;
+    }
+  } 
   const handleStatusChange = (newStatus: string) => {
     setTargetStatus(newStatus);
     setThisStatus(statusText);
@@ -88,14 +112,11 @@ export const StatusMenu = ({
   return (
     <>
       {role === "Manager" ? (
-        <Button className={`border p-2 rounded-md flex items-center ${style}`}>
-          <span>{statusText}</span>
-        </Button>
+        <div className={`p-2 rounded-md flex items-center ${style}`}>
+         {statusText}
+        </div>
       ) : (
         <Dropdown
-          // disabled={
-          //   (jwtDecode(getCookie("accessToken") || "") as any)?.role == "Manager"
-          // }
           overlay={
             <Menu>
               <Menu.Item key="2" disabled={isDisabled("Getting")}>