@hed-hog/operations 0.0.331 → 0.0.332

package/hedhog/frontend/app/_components/project-assignments-tab.tsx.ejs

@@ -10,9 +10,17 @@ import {
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
-import { Check, Loader2, Pencil, Plus, X } from 'lucide-react';
+import { Switch } from '@/components/ui/switch';
+import {
+  Check,
+  Loader2,
+  Pencil,
+  Plus,
+  SlidersHorizontal,
+  X,
+} from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { fetchOperations, mutateOperations } from '../_lib/api';
 import type {
   OperationsCollaboratorDetails,
@@ -29,6 +37,7 @@ import { ProjectFormScreen } from './project-form-screen';
 import { StatusBadge } from './status-badge';
 
 const PAGE_SIZE = 10;
+const LS_AUTO_REBALANCE_KEY = 'operations.projectAllocation.autoRebalance';
 
 type AssignmentEditState = {
   roleLabel: string;
@@ -53,14 +62,26 @@ export function ProjectAssignmentsTab({
 }: ProjectAssignmentsTabProps) {
   const commonT = useTranslations('operations.Common');
   const detailsT = useTranslations('operations.CollaboratorDetailsPage');
+  const allocT = useTranslations(
+    'operations.CollaboratorFormPage.projectAllocation'
+  );
 
   const [page, setPage] = useState(0);
   const [editingId, setEditingId] = useState<number | null>(null);
   const [editState, setEditState] = useState<AssignmentEditState | null>(null);
   const [saving, setSaving] = useState(false);
+  const [distributing, setDistributing] = useState(false);
   const [adding, setAdding] = useState(false);
   const [createSheetOpen, setCreateSheetOpen] = useState(false);
   const [pickerKey, setPickerKey] = useState(0);
+  const [autoRebalance, setAutoRebalance] = useState(() => {
+    if (typeof window === 'undefined') return false;
+    return localStorage.getItem(LS_AUTO_REBALANCE_KEY) === 'true';
+  });
+
+  useEffect(() => {
+    localStorage.setItem(LS_AUTO_REBALANCE_KEY, String(autoRebalance));
+  }, [autoRebalance]);
 
   const projects = collaborator?.assignedProjects ?? [];
   const assignedIds = new Set(projects.map((p) => p.id));
@@ -70,6 +91,29 @@ export function ProjectAssignmentsTab({
     (page + 1) * PAGE_SIZE
   );
 
+  const savedTotal = projects.reduce(
+    (sum, p) => sum + (p.allocationPercent ?? 0),
+    0
+  );
+
+  // When editing, show projected total
+  const editingProject =
+    editingId != null ? projects.find((p) => p.id === editingId) : null;
+  const projectedTotal =
+    editState && editingProject
+      ? projects.reduce((sum, p) => {
+          if (p.id === editingId) {
+            return sum + (parseNumberInput(editState.allocationPercent) ?? 0);
+          }
+          return sum + (p.allocationPercent ?? 0);
+        }, 0)
+      : savedTotal;
+
+  const displayTotal = editState ? projectedTotal : savedTotal;
+
+  const allocationWarning =
+    displayTotal < 100 ? 'idle' : displayTotal > 100 ? 'overloaded' : null;
+
   const startEditing = (
     project: OperationsCollaboratorDetails['assignedProjects'][number]
   ) => {
@@ -98,6 +142,8 @@ export function ProjectAssignmentsTab({
     if (!collaborator || !editState) return;
     setSaving(true);
     try {
+      const newPercent = parseNumberInput(editState.allocationPercent);
+
       await mutateOperations(
         request,
         `/operations/collaborators/${collaborator.id}/projects/${projectId}`,
@@ -105,11 +151,66 @@ export function ProjectAssignmentsTab({
         {
           roleLabel: trimToNull(editState.roleLabel),
           weeklyHours: parseNumberInput(editState.weeklyHours),
-          allocationPercent: parseNumberInput(editState.allocationPercent),
+          allocationPercent: newPercent,
           startDate: trimToNull(editState.startDate),
           endDate: trimToNull(editState.endDate),
         }
       );
+
+      // Auto-rebalance: distribute remaining % among other projects
+      if (autoRebalance && newPercent != null) {
+        const others = projects.filter((p) => p.id !== projectId);
+        if (others.length > 0) {
+          const remaining = 100 - newPercent;
+          const othersTotal = others.reduce(
+            (sum, p) => sum + (p.allocationPercent ?? 0),
+            0
+          );
+          await Promise.all(
+            others.map((p, idx) => {
+              let newValue: number;
+              if (othersTotal > 0) {
+                newValue =
+                  Math.round(
+                    ((p.allocationPercent ?? 0) / othersTotal) * remaining * 100
+                  ) / 100;
+              } else {
+                newValue = Math.round((remaining / others.length) * 100) / 100;
+              }
+              // Ensure the last item corrects rounding drift
+              if (idx === others.length - 1) {
+                const alreadyAssigned = others
+                  .slice(0, idx)
+                  .reduce((sum, op) => {
+                    if (othersTotal > 0) {
+                      return (
+                        sum +
+                        Math.round(
+                          ((op.allocationPercent ?? 0) / othersTotal) *
+                            remaining *
+                            100
+                        ) /
+                          100
+                      );
+                    }
+                    return (
+                      sum + Math.round((remaining / others.length) * 100) / 100
+                    );
+                  }, 0);
+                newValue =
+                  Math.round((remaining - alreadyAssigned) * 100) / 100;
+              }
+              return mutateOperations(
+                request,
+                `/operations/collaborators/${collaborator.id}/projects/${p.id}`,
+                'PATCH',
+                { allocationPercent: newValue }
+              );
+            })
+          );
+        }
+      }
+
       setEditingId(null);
       setEditState(null);
       onUpdated();
@@ -120,6 +221,37 @@ export function ProjectAssignmentsTab({
     }
   };
 
+  const distributeEqually = async () => {
+    if (!collaborator) return;
+    const activeProjects = projects.filter((p) => p.status === 'active');
+    const targetProjects =
+      activeProjects.length > 0 ? activeProjects : projects;
+    if (targetProjects.length === 0) return;
+    setDistributing(true);
+    try {
+      const equalShare = Math.floor((100 / targetProjects.length) * 100) / 100;
+      const remainder =
+        Math.round((100 - equalShare * (targetProjects.length - 1)) * 100) /
+        100;
+      await Promise.all(
+        targetProjects.map((p, idx) =>
+          mutateOperations(
+            request,
+            `/operations/collaborators/${collaborator.id}/projects/${p.id}`,
+            'PATCH',
+            {
+              allocationPercent:
+                idx === targetProjects.length - 1 ? remainder : equalShare,
+            }
+          )
+        )
+      );
+      onUpdated();
+    } finally {
+      setDistributing(false);
+    }
+  };
+
   const assignProject = async (projectId: number) => {
     if (!collaborator) return;
     setAdding(true);
@@ -139,6 +271,72 @@ export function ProjectAssignmentsTab({
 
   return (
     <div className="space-y-3">
+      {/* Allocation summary bar */}
+      {projects.length > 0 && (
+        <div className="flex flex-wrap items-center justify-between gap-2 rounded-lg border px-3 py-2">
+          <div className="flex items-center gap-3">
+            <span className="text-xs text-muted-foreground">
+              {allocT('total')}:
+            </span>
+            <span
+              className={`text-sm font-semibold ${
+                allocationWarning === 'overloaded'
+                  ? 'text-destructive'
+                  : allocationWarning === 'idle'
+                    ? 'text-amber-600 dark:text-amber-400'
+                    : 'text-green-600 dark:text-green-400'
+              }`}
+            >
+              {displayTotal}%
+            </span>
+            {allocationWarning === 'overloaded' && (
+              <span className="rounded-full bg-destructive/10 px-2 py-0.5 text-[10px] font-medium text-destructive">
+                {allocT('overloaded')} +
+                {Math.round((displayTotal - 100) * 100) / 100}%
+              </span>
+            )}
+            {allocationWarning === 'idle' && (
+              <span className="rounded-full bg-amber-500/10 px-2 py-0.5 text-[10px] font-medium text-amber-600 dark:text-amber-400">
+                {allocT('idle')} -{Math.round((100 - displayTotal) * 100) / 100}
+                %
+              </span>
+            )}
+          </div>
+          {!disabled && (
+            <div className="flex items-center gap-3">
+              {/* Auto-rebalance toggle */}
+              <div className="flex items-center gap-1.5">
+                <SlidersHorizontal className="size-3 text-muted-foreground" />
+                <span className="text-[11px] text-muted-foreground">
+                  {allocT('autoRebalance')}
+                </span>
+                <Switch
+                  checked={autoRebalance}
+                  onCheckedChange={setAutoRebalance}
+                  className="scale-75"
+                />
+              </div>
+              {/* Distribute equally */}
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                className="h-6 px-2 text-[11px]"
+                disabled={distributing || projects.length === 0}
+                onClick={() => void distributeEqually()}
+              >
+                {distributing ? (
+                  <Loader2 className="mr-1 size-3 animate-spin" />
+                ) : null}
+                {distributing
+                  ? allocT('distributing')
+                  : allocT('distributeEqually')}
+              </Button>
+            </div>
+          )}
+        </div>
+      )}
+
       {!disabled ? (
         <div className="flex items-center gap-2">
           <div className="min-w-0 flex-1">
@@ -161,8 +359,7 @@ export function ProjectAssignmentsTab({
                 return {
                   items: res.data.filter((proj) => !assignedIds.has(proj.id)),
                   hasMore:
-                    (res.page ?? p) * (res.pageSize ?? ps) <
-                    (res.total ?? 0),
+                    (res.page ?? p) * (res.pageSize ?? ps) < (res.total ?? 0),
                 };
               }}
               getOptionValue={(opt) => opt.id}
@@ -194,7 +391,9 @@ export function ProjectAssignmentsTab({
       ) : null}
 
       {projects.length === 0 ? (
-        <p className="text-sm text-muted-foreground">{detailsT('noProjects')}</p>
+        <p className="text-sm text-muted-foreground">
+          {detailsT('noProjects')}
+        </p>
       ) : (
         <>
           <div className="space-y-2">
@@ -243,8 +442,13 @@ export function ProjectAssignmentsTab({
                         />
                       </div>
                       <div className="space-y-1">
-                        <div className="text-[10px] uppercase tracking-wide text-muted-foreground">
+                        <div className="flex items-center gap-1 text-[10px] uppercase tracking-wide text-muted-foreground">
                           {commonT('labels.allocationPercent')}
+                          {autoRebalance && (
+                            <span className="rounded bg-primary/10 px-1 text-[9px] text-primary">
+                              auto
+                            </span>
+                          )}
                         </div>
                         <div className="relative">
                           <Input
@@ -370,7 +574,9 @@ export function ProjectAssignmentsTab({
                         onClick={() => startEditing(project)}
                       >
                         <Pencil className="size-3" />
-                        <span className="sr-only">{commonT('actions.edit')}</span>
+                        <span className="sr-only">
+                          {commonT('actions.edit')}
+                        </span>
                       </Button>
                     ) : null}
                   </div>
@@ -417,7 +623,9 @@ export function ProjectAssignmentsTab({
         <SheetContent className="w-full overflow-x-hidden overflow-y-auto sm:max-w-[min(92vw,64rem)]">
           <SheetHeader>
             <SheetTitle>{detailsT('createProject')}</SheetTitle>
-            <SheetDescription>{detailsT('createProjectDescription')}</SheetDescription>
+            <SheetDescription>
+              {detailsT('createProjectDescription')}
+            </SheetDescription>
           </SheetHeader>
           <ProjectFormScreen
             onCancel={() => setCreateSheetOpen(false)}
@@ -432,4 +640,4 @@ export function ProjectAssignmentsTab({
       </Sheet>
     </div>
   );
-}
+}