feat: Implement Staff Detail View

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

@@ -13,6 +13,7 @@ export default function EditStaff() {
   const [staff, setStaff] = useState<Staff | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
 
   useEffect(() => {
     const fetchStaff = async () => {
@@ -41,7 +42,8 @@ export default function EditStaff() {
     setIsSubmitting(true);
     try {
       await workforceService.entities.Staff.update(id, staffData);
-      navigate("/staff");
+      setStaff(staffData);
+      setIsEditing(false);
     } catch (error) {
       console.error("Failed to update staff", error);
     } finally {
@@ -49,6 +51,10 @@ export default function EditStaff() {
     }
   };
 
+  const handleCancel = () => {
+    setIsEditing(false);
+  };
+
   if (isLoading) {
     return (
       <div className="flex flex-col items-center justify-center min-h-[60vh] gap-4">
@@ -60,7 +66,7 @@ export default function EditStaff() {
 
   return (
     <DashboardLayout
-      title={`Edit: ${staff?.employee_name || 'Staff Member'}`}
+      title={isEditing ? `Edit: ${staff?.employee_name || 'Staff Member'}` : staff?.employee_name || 'Staff Member'}
       subtitle={`Management of ${staff?.employee_name}'s professional records`}
       backAction={
         <Button
@@ -74,11 +80,42 @@ export default function EditStaff() {
       }
     >
       {staff && (
-        <StaffForm
-          staff={staff}
-          onSubmit={handleSubmit}
-          isSubmitting={isSubmitting}
-        />
+        <div>
+          {!isEditing && (
+            <div className="mb-6 flex justify-end">
+              <Button onClick={() => setIsEditing(true)} variant="secondary">
+                Edit
+              </Button>
+            </div>
+          )}
+          {isEditing && (
+            <div className="mb-6 flex justify-end gap-2">
+              <Button
+                onClick={handleCancel}
+                variant="outline"
+                disabled={isSubmitting}
+              >
+                Cancel
+              </Button>
+              <Button
+                onClick={() => {
+                  // Trigger form submission by dispatching event or calling form submit
+                  const form = document.querySelector('form');
+                  if (form) form.requestSubmit();
+                }}
+                disabled={isSubmitting}
+              >
+                {isSubmitting ? 'Saving...' : 'Save'}
+              </Button>
+            </div>
+          )}
+          <StaffForm
+            staff={staff}
+            onSubmit={handleSubmit}
+            isSubmitting={isSubmitting}
+            disabled={!isEditing}
+          />
+        </div>
       )}
     </DashboardLayout>
   );