feat: Implement vendor dashboard

apps/web/src/features/workforce/directory/StaffList.tsx

@@ -1,5 +1,8 @@
 import { useState, useMemo} from "react";
 import { Link } from "react-router-dom";
+import { useSelector } from "react-redux";
+import type { RootState } from "@/store/store";
+import { useToast } from "@/common/components/ui/use-toast";
 import { Button } from "../../../common/components/ui/button";
 import { Card, CardContent } from "../../../common/components/ui/card";
 import { Badge } from "../../../common/components/ui/badge";
@@ -30,14 +33,29 @@ function StaffActiveStatus({ staffId }: { staffId: string }) {
 }
 
 export default function StaffList() {
+  const { toast } = useToast();
   const [searchTerm, setSearchTerm] = useState("");
   const [statusFilter, setStatusFilter] = useState("all");
   const [skillsFilter, setSkillsFilter] = useState<string[]>([]);
   const [ratingRange, setRatingRange] = useState<[number, number]>([0, 5]);
   const [currentPage, setCurrentPage] = useState(1);
 
+  const user = useSelector((state: RootState) => state.auth.user);
+  const isAdmin = user?.userRole === "admin" || user?.userRole === "ADMIN";
+
   const { data: staffData, isLoading } = useListStaff(dataConnect);
 
+  const handleRestrictedAction = (e: React.MouseEvent) => {
+    if (!isAdmin) {
+      e.preventDefault();
+      toast({
+        title: "Access Restricted",
+        description: "Only administrators can perform this action.",
+        variant: "destructive"
+      });
+    }
+  };
+
   const staff = useMemo(() => {
     return staffData?.staffs || [];
   }, [staffData]);
@@ -103,8 +121,11 @@ export default function StaffList() {
       title="Staff Directory"
       subtitle={`${filteredStaff.length} staff members`}
       actions={
-        <Link to="/staff/add">
-          <Button leadingIcon={<UserPlus />}>
+        <Link to="/staff/add" onClick={handleRestrictedAction}>
+          <Button 
+            leadingIcon={<UserPlus />}
+            className={!isAdmin ? "opacity-50 cursor-not-allowed hover:opacity-50" : ""}
+          >
             Add New Staff
           </Button>
         </Link>
@@ -289,7 +310,11 @@ export default function StaffList() {
                         className="hover:bg-primary/5 transition-colors group"
                       >
                         <td className="py-4 px-6">
-                          <Link to={`/staff/${member.id}/edit`} className="font-bold text-foreground group-hover:text-primary transition-colors hover:underline">
+                          <Link 
+                            to={`/staff/${member.id}/edit`} 
+                            onClick={handleRestrictedAction}
+                            className={`font-bold transition-colors hover:underline ${!isAdmin ? "text-muted-foreground cursor-not-allowed" : "text-foreground group-hover:text-primary"}`}
+                          >
                             {member.fullName || 'N/A'}
                           </Link>
                         </td>