@hed-hog/operations 0.0.331 → 0.0.332

package/hedhog/frontend/app/_components/project-details-screen.tsx.ejs

@@ -18,6 +18,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
+import { EntityPicker } from '@/components/ui/entity-picker';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Progress } from '@/components/ui/progress';
@@ -87,7 +88,6 @@ import {
   Gauge,
   GitCommitHorizontal,
   HeartPulse,
-  History,
   LineChart as LineChartIcon,
   Loader2,
   MessageSquare,
@@ -101,6 +101,7 @@ import {
   Timer,
   Trash2,
   TrendingUp,
+  UserPlus,
   Users,
   type LucideIcon,
 } from 'lucide-react';
@@ -133,8 +134,11 @@ import {
   useValuesVisibility,
 } from '../_lib/hooks/use-values-visibility';
 import type {
+  OperationsCollaborator,
+  OperationsCollaboratorDetails,
   OperationsProjectDetails,
   OperationsTaskOption,
+  PaginatedResponse,
 } from '../_lib/types';
 import {
   formatCurrency,
@@ -145,19 +149,16 @@ import {
   formatPercent,
   getStatusBadgeClass,
 } from '../_lib/utils/format';
+import { parseNumberInput } from '../_lib/utils/forms';
 import { OperationsHeader } from './operations-header';
 import { ProjectCostsSection } from './project-costs-section';
+import { ProjectFileAttachments } from './project-file-attachments';
 import { ProjectFormScreen } from './project-form-screen';
 import { SectionCard } from './section-card';
 import { StatusBadge } from './status-badge';
-import {
-  TaskDetailSheet,
-  type TaskDetailSheetData,
-} from './task-detail-sheet';
-import { ProjectFileAttachments } from './project-file-attachments';
-import { TaskFileAttachments } from './task-file-attachments';
-import { TaskFormSheet } from './task-form-sheet';
-import { TimesheetEntryCreateSheet } from './timesheet-entry-create-sheet';
+import { TaskDetailSheet, type TaskDetailSheetData } from './task-detail-sheet';
+import { TaskFormSheet } from './task-form-sheet';
+import { TimesheetEntryCreateSheet } from './timesheet-entry-create-sheet';
 
 type BoardColumnId = 'todo' | 'doing' | 'review' | 'done';
 
@@ -204,6 +205,15 @@ type TimesheetEntryPrefill = {
   taskLabel: string;
 };
 
+function formatAssignmentNumericValue(value: number) {
+  if (!Number.isFinite(value)) {
+    return '';
+  }
+
+  const roundedValue = Math.round(value * 100) / 100;
+  return String(roundedValue);
+}
+
 const KANBAN_COLUMNS: Array<{ id: BoardColumnId; label: string }> = [
   { id: 'todo', label: 'Backlog' },
   { id: 'doing', label: 'Em execução' },
@@ -386,7 +396,7 @@ function getInitials(value?: string | null) {
 function getPersonAvatarUrl(avatarId?: number | null) {
   return typeof avatarId === 'number' && avatarId > 0
     ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${avatarId}`
-    : '/placeholder.png';
+    : undefined;
 }
 
 function getUserPhotoUrl(photoId?: number | null) {
@@ -1092,6 +1102,7 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
   const commonT = useTranslations('operations.Common');
   const formT = useTranslations('operations.ProjectFormPage');
   const contractT = useTranslations('operations.ContractFormPage');
+  const collaboratorFormT = useTranslations('operations.CollaboratorFormPage');
   const { request, currentLocaleCode, getSettingValue } = useApp();
   const access = useOperationsAccess();
   const isLimitedView = !access.isDirector && !access.isSupervisor;
@@ -1299,6 +1310,26 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
   const [timesheetPrefill, setTimesheetPrefill] =
     useState<TimesheetEntryPrefill | null>(null);
 
+  // Assignment management state
+  const [assignmentSheetOpen, setAssignmentSheetOpen] = useState(false);
+  const [editingAssignment, setEditingAssignment] = useState<
+    OperationsProjectDetails['assignments'][0] | null
+  >(null);
+  const [assignmentFormData, setAssignmentFormData] = useState({
+    collaboratorId: '',
+    weeklyHours: '',
+    allocationPercent: '',
+    status: 'active',
+    startDate: '',
+    endDate: '',
+  });
+  const [selectedAssignmentCollaborator, setSelectedAssignmentCollaborator] =
+    useState<OperationsCollaborator | null>(null);
+  const [savingAssignment, setSavingAssignment] = useState(false);
+  const [removingAssignmentId, setRemovingAssignmentId] = useState<
+    number | null
+  >(null);
+
   const apiTasks = useMemo(() => rawTasks.map(apiTaskToBoardTask), [rawTasks]);
   const archivedTasks = useMemo(
     () =>
@@ -1506,7 +1537,11 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
   const handleDeleteProject = useCallback(async () => {
     setDeletingProject(true);
     try {
-      await mutateOperations(request, `/operations/projects/${projectId}`, 'DELETE');
+      await mutateOperations(
+        request,
+        `/operations/projects/${projectId}`,
+        'DELETE'
+      );
       router.push('/operations/projects');
     } catch {
       // ignore
@@ -1540,6 +1575,245 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
     [commonT, project, projectId]
   );
 
+  const loadCollaboratorOptions = useCallback(
+    async ({
+      page,
+      pageSize,
+      search,
+    }: {
+      page: number;
+      pageSize: number;
+      search: string;
+    }) => {
+      const params = new URLSearchParams({
+        page: String(page),
+        pageSize: String(pageSize),
+        sortField: 'displayName',
+        sortOrder: 'asc',
+      });
+      if (search.trim()) params.set('search', search.trim());
+      const result = await fetchOperations<
+        PaginatedResponse<OperationsCollaborator>
+      >(request, `/operations/collaborators?${params.toString()}`);
+      const items = result?.data ?? [];
+      const total = result?.total ?? 0;
+      return { items, hasMore: page * pageSize < total };
+    },
+    [request]
+  );
+
+  const loadAssignmentCollaboratorById = useCallback(
+    async (collaboratorId: number) => {
+      const collaborator = await fetchOperations<OperationsCollaboratorDetails>(
+        request,
+        `/operations/collaborators/${collaboratorId}`
+      );
+      setSelectedAssignmentCollaborator(collaborator);
+      return collaborator;
+    },
+    [request]
+  );
+
+  const createAssignmentCollaborator = useCallback(
+    async (values: Record<string, string>) => {
+      const displayName = values.displayName?.trim() ?? '';
+      const weeklyCapacityHours = parseNumberInput(
+        values.weeklyCapacityHours ?? ''
+      );
+
+      if (!displayName) {
+        return null;
+      }
+
+      return mutateOperations<OperationsCollaborator>(
+        request,
+        '/operations/collaborators',
+        'POST',
+        {
+          displayName,
+          weeklyCapacityHours,
+          status: 'active',
+          autoGenerateContractDraft: false,
+        }
+      );
+    },
+    [request]
+  );
+
+  const syncAssignmentFromWeeklyHours = useCallback(
+    (
+      weeklyHours: string,
+      currentFormData: typeof assignmentFormData,
+      collaborator?: OperationsCollaborator | null
+    ) => {
+      const capacity = collaborator?.weeklyCapacityHours;
+      if (!capacity || capacity <= 0) {
+        return {
+          weeklyHours,
+          allocationPercent: currentFormData.allocationPercent,
+        };
+      }
+
+      const parsedHours = parseNumberInput(weeklyHours);
+      if (parsedHours == null) {
+        return { weeklyHours, allocationPercent: '' };
+      }
+
+      return {
+        weeklyHours,
+        allocationPercent: formatAssignmentNumericValue(
+          (parsedHours / capacity) * 100
+        ),
+      };
+    },
+    []
+  );
+
+  const syncAssignmentFromAllocation = useCallback(
+    (
+      allocationPercent: string,
+      currentFormData: typeof assignmentFormData,
+      collaborator?: OperationsCollaborator | null
+    ) => {
+      const capacity = collaborator?.weeklyCapacityHours;
+      if (!capacity || capacity <= 0) {
+        return {
+          weeklyHours: currentFormData.weeklyHours,
+          allocationPercent,
+        };
+      }
+
+      const parsedPercent = parseNumberInput(allocationPercent);
+      if (parsedPercent == null) {
+        return { weeklyHours: '', allocationPercent };
+      }
+
+      return {
+        weeklyHours: formatAssignmentNumericValue(
+          (parsedPercent / 100) * capacity
+        ),
+        allocationPercent,
+      };
+    },
+    []
+  );
+
+  const openAddAssignment = useCallback(() => {
+    setEditingAssignment(null);
+    setSelectedAssignmentCollaborator(null);
+    setAssignmentFormData({
+      collaboratorId: '',
+      weeklyHours: '',
+      allocationPercent: '',
+      status: 'active',
+      startDate: '',
+      endDate: '',
+    });
+    setAssignmentSheetOpen(true);
+  }, []);
+
+  const openEditAssignment = useCallback(
+    (assignment: OperationsProjectDetails['assignments'][0]) => {
+      setEditingAssignment(assignment);
+      setSelectedAssignmentCollaborator(null);
+      setAssignmentFormData({
+        collaboratorId: String(assignment.collaboratorId),
+        weeklyHours:
+          assignment.weeklyHours != null ? String(assignment.weeklyHours) : '',
+        allocationPercent:
+          assignment.allocationPercent != null
+            ? String(assignment.allocationPercent)
+            : '',
+        status: assignment.status,
+        startDate: assignment.startDate?.slice(0, 10) ?? '',
+        endDate: assignment.endDate?.slice(0, 10) ?? '',
+      });
+      void loadAssignmentCollaboratorById(assignment.collaboratorId);
+      setAssignmentSheetOpen(true);
+    },
+    [loadAssignmentCollaboratorById]
+  );
+
+  const handleSaveAssignment = useCallback(async () => {
+    if (!project) return;
+    const collabId = Number(assignmentFormData.collaboratorId);
+    if (!collabId) return;
+    setSavingAssignment(true);
+    const newEntry = {
+      collaboratorId: collabId,
+      weeklyHours: assignmentFormData.weeklyHours
+        ? Number(assignmentFormData.weeklyHours)
+        : null,
+      allocationPercent: assignmentFormData.allocationPercent
+        ? Number(assignmentFormData.allocationPercent)
+        : null,
+      status: assignmentFormData.status,
+      startDate: assignmentFormData.startDate || null,
+      endDate: assignmentFormData.endDate || null,
+    };
+    const existingMapped = project.assignments.map((a) => ({
+      collaboratorId: a.collaboratorId,
+      weeklyHours: a.weeklyHours ?? null,
+      allocationPercent: a.allocationPercent ?? null,
+      status: a.status,
+      startDate: a.startDate ?? null,
+      endDate: a.endDate ?? null,
+    }));
+    const updatedAssignments = editingAssignment
+      ? existingMapped.map((a) =>
+          a.collaboratorId === editingAssignment.collaboratorId ? newEntry : a
+        )
+      : [...existingMapped, newEntry];
+    try {
+      await mutateOperations(
+        request,
+        `/operations/projects/${projectId}`,
+        'PATCH',
+        { teamAssignments: updatedAssignments }
+      );
+      await refetch();
+      setAssignmentSheetOpen(false);
+    } catch {
+      // ignore
+    } finally {
+      setSavingAssignment(false);
+    }
+  }, [
+    project,
+    assignmentFormData,
+    editingAssignment,
+    request,
+    projectId,
+    refetch,
+  ]);
+
+  const handleConfirmRemoveAssignment = useCallback(async () => {
+    if (!project || removingAssignmentId === null) return;
+    const updatedAssignments = project.assignments
+      .filter((a) => a.collaboratorId !== removingAssignmentId)
+      .map((a) => ({
+        collaboratorId: a.collaboratorId,
+        weeklyHours: a.weeklyHours ?? null,
+        allocationPercent: a.allocationPercent ?? null,
+        status: a.status,
+        startDate: a.startDate ?? null,
+        endDate: a.endDate ?? null,
+      }));
+    try {
+      await mutateOperations(
+        request,
+        `/operations/projects/${projectId}`,
+        'PATCH',
+        { teamAssignments: updatedAssignments }
+      );
+      await refetch();
+    } catch {
+      // ignore
+    } finally {
+      setRemovingAssignmentId(null);
+    }
+  }, [project, removingAssignmentId, request, projectId, refetch]);
+
   const allocationChartData = useMemo(() => {
     if (projectStats?.allocationByCollaborator?.length) {
       return projectStats.allocationByCollaborator;
@@ -2140,10 +2414,13 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
             <TooltipTrigger asChild>
               <div className="flex cursor-default items-center gap-1.5 border-r px-3 py-2 transition hover:bg-muted/30">
                 <Avatar className="size-5 shrink-0 border bg-muted">
-                  <AvatarImage
-                    src={getPersonAvatarUrl(project.clientAvatarId)}
-                    alt={project.clientName || ''}
-                  />
+                    <AvatarImage
+                      src={
+                        getUserPhotoUrl(project.clientUserPhotoId) ||
+                        getPersonAvatarUrl(project.clientAvatarId)
+                      }
+                      alt={project.clientName || ''}
+                    />
                   <AvatarFallback className="text-[9px]">
                     {getInitials(project.clientName)}
                   </AvatarFallback>
@@ -2462,7 +2739,10 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
                       <div className="flex items-center gap-2">
                         <Avatar className="h-8 w-8 border border-border/60 bg-muted">
                           <AvatarImage
-                            src={getPersonAvatarUrl(project.clientAvatarId)}
+                            src={
+                              getUserPhotoUrl(project.clientUserPhotoId) ||
+                              getPersonAvatarUrl(project.clientAvatarId)
+                            }
                             alt={project.clientName || commonT('labels.client')}
                           />
                           <AvatarFallback className="bg-muted text-xs font-semibold text-foreground">
@@ -2604,13 +2884,32 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
                           <div className="font-medium">
                             {project.relatedContract.name}
                           </div>
-                          <div className="text-sm text-muted-foreground">
-                            {[
-                              project.relatedContract.code,
-                              project.relatedContract.clientName,
-                            ]
-                              .filter(Boolean)
-                              .join(' • ') || commonT('labels.notAvailable')}
+                          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                            <span className="truncate">
+                              {project.relatedContract.code || '—'}
+                            </span>
+                            {project.relatedContract.clientName ? (
+                              <>
+                                <span>•</span>
+                                <Avatar className="h-4 w-4 shrink-0">
+                                  <AvatarImage
+                                    src={
+                                      getUserPhotoUrl(project.clientUserPhotoId) ||
+                                      getPersonAvatarUrl(project.clientAvatarId)
+                                    }
+                                    alt={project.relatedContract.clientName}
+                                  />
+                                  <AvatarFallback className="text-[8px] font-medium">
+                                    {getInitials(
+                                      project.relatedContract.clientName
+                                    )}
+                                  </AvatarFallback>
+                                </Avatar>
+                                <span className="truncate">
+                                  {project.relatedContract.clientName}
+                                </span>
+                              </>
+                            ) : null}
                           </div>
                         </div>
                         <div className="flex items-center gap-3">
@@ -3082,7 +3381,7 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
                       {(isOver) => (
                         <div
                           className={[
-                            'flex min-h-128 flex-col overflow-hidden rounded-3xl border bg-linear-to-b p-3 transition-all',
+                            'flex min-h-48 max-h-160 flex-col rounded-3xl border bg-linear-to-b p-3 transition-all',
                             getColumnClassName(column.id),
                             isOver
                               ? 'border-primary shadow-lg ring-2 ring-primary/15'
@@ -3125,7 +3424,7 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
                             </div>
                           </div>
 
-                          <div className="flex flex-1 flex-col gap-2">
+                          <div className="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto pb-1 pr-0.5">
                             <AnimatePresence initial={false}>
                               {filteredTaskColumns[column.id].map((task) => {
                                 const tags = getTaskTags(task);
@@ -3853,6 +4152,19 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
                 'rounded-2xl border bg-card p-4 shadow-sm',
                 isLimitedView ? 'xl:col-span-12' : 'xl:col-span-8',
               ].join(' ')}
+              actions={
+                !isLimitedView ? (
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    className="cursor-pointer"
+                    onClick={openAddAssignment}
+                  >
+                    <UserPlus className="mr-1.5 size-4" />
+                    {t('teamPanel.addCollaborator')}
+                  </Button>
+                ) : undefined
+              }
             >
               {project.assignments.length > 0 ? (
                 <div className="space-y-4">
@@ -3960,6 +4272,34 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
                                   <ToneIcon className="size-3" />
                                   {t(`teamPanel.status.${tone.labelKey}`)}
                                 </span>
+                                {!isLimitedView ? (
+                                  <div className="flex items-center gap-1">
+                                    <Button
+                                      type="button"
+                                      variant="ghost"
+                                      size="icon"
+                                      className="size-7 cursor-pointer"
+                                      onClick={() =>
+                                        openEditAssignment(assignment)
+                                      }
+                                    >
+                                      <Pencil className="size-3.5" />
+                                    </Button>
+                                    <Button
+                                      type="button"
+                                      variant="ghost"
+                                      size="icon"
+                                      className="size-7 cursor-pointer text-destructive hover:text-destructive"
+                                      onClick={() =>
+                                        setRemovingAssignmentId(
+                                          assignment.collaboratorId
+                                        )
+                                      }
+                                    >
+                                      <Trash2 className="size-3.5" />
+                                    </Button>
+                                  </div>
+                                ) : null}
                               </div>
                             </div>
                           </div>
@@ -4260,6 +4600,347 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
         }
       />
 
+      {/* Assignment Add/Edit Sheet */}
+      <Sheet
+        open={assignmentSheetOpen}
+        onOpenChange={(open) => {
+          if (!open) {
+            setAssignmentSheetOpen(false);
+            setSelectedAssignmentCollaborator(null);
+          }
+        }}
+      >
+        <SheetContent className="w-full overflow-y-auto sm:max-w-[min(92vw,28rem)]">
+          <SheetHeader>
+            <SheetTitle>
+              {editingAssignment
+                ? t('teamPanel.editTitle')
+                : t('teamPanel.addTitle')}
+            </SheetTitle>
+            <SheetDescription>
+              {t('teamPanel.formDescription')}
+            </SheetDescription>
+          </SheetHeader>
+          <div className="mt-6 space-y-4 px-1 sm:px-4">
+            {!editingAssignment ? (
+              <div className="space-y-2">
+                <Label className="text-sm font-medium">
+                  {commonT('labels.collaborator')}
+                </Label>
+                <EntityPicker<OperationsCollaborator>
+                  value={
+                    assignmentFormData.collaboratorId
+                      ? Number(assignmentFormData.collaboratorId)
+                      : null
+                  }
+                  onChange={(val, option) => {
+                    const collaborator = option ?? null;
+                    setSelectedAssignmentCollaborator(collaborator);
+                    setAssignmentFormData((prev) => {
+                      const collaboratorId = val ? String(val) : '';
+                      if (!collaboratorId) {
+                        return {
+                          ...prev,
+                          collaboratorId: '',
+                          weeklyHours: '',
+                          allocationPercent: '',
+                        };
+                      }
+
+                      const capacity = collaborator?.weeklyCapacityHours;
+                      if (!capacity || capacity <= 0) {
+                        return {
+                          ...prev,
+                          collaboratorId,
+                        };
+                      }
+
+                      const parsedHours = parseNumberInput(prev.weeklyHours);
+                      const parsedPercent = parseNumberInput(
+                        prev.allocationPercent
+                      );
+
+                      if (parsedHours != null) {
+                        return {
+                          ...prev,
+                          collaboratorId,
+                          ...syncAssignmentFromWeeklyHours(
+                            prev.weeklyHours,
+                            prev,
+                            collaborator
+                          ),
+                        };
+                      }
+
+                      if (parsedPercent != null) {
+                        return {
+                          ...prev,
+                          collaboratorId,
+                          ...syncAssignmentFromAllocation(
+                            prev.allocationPercent,
+                            prev,
+                            collaborator
+                          ),
+                        };
+                      }
+
+                      return {
+                        ...prev,
+                        collaboratorId,
+                        weeklyHours: formatAssignmentNumericValue(capacity),
+                        allocationPercent: '100',
+                      };
+                    });
+                  }}
+                  placeholder={commonT('labels.collaborator')}
+                  searchPlaceholder={commonT('labels.collaborator')}
+                  loadOptions={loadCollaboratorOptions}
+                  getOptionValue={(opt) => opt.id}
+                  getOptionLabel={(opt) => opt.displayName}
+                  renderOption={({ option }) => (
+                    <div className="flex min-w-0 items-center gap-2.5">
+                      <Avatar className="size-6 shrink-0">
+                        <AvatarImage
+                          src={
+                            getUserPhotoUrl(option.userPhotoId) ||
+                            getPersonAvatarUrl(option.personAvatarId)
+                          }
+                          alt={option.displayName}
+                        />
+                        <AvatarFallback className="text-[9px]">
+                          {getInitials(option.displayName)}
+                        </AvatarFallback>
+                      </Avatar>
+                      <div className="min-w-0">
+                        <div className="truncate text-sm">
+                          {option.displayName}
+                        </div>
+                        {option.department ? (
+                          <div className="truncate text-xs text-muted-foreground">
+                            {option.department}
+                          </div>
+                        ) : null}
+                      </div>
+                    </div>
+                  )}
+                  valueType="number"
+                  clearable
+                  allowEmptySelection
+                  showCreateButton
+                  entityLabel={commonT('labels.collaborator').toLowerCase()}
+                  createActionLabel={`${commonT('actions.create')} ${commonT(
+                    'labels.collaborator'
+                  ).toLowerCase()}`}
+                  createTitle={`${commonT('actions.create')} ${commonT(
+                    'labels.collaborator'
+                  ).toLowerCase()}`}
+                  createDescription={t('teamPanel.formDescription')}
+                  createFields={[
+                    {
+                      name: 'displayName',
+                      label: collaboratorFormT('fields.displayName'),
+                      placeholder: collaboratorFormT('fields.displayName'),
+                      required: true,
+                    },
+                    {
+                      name: 'weeklyCapacityHours',
+                      label: collaboratorFormT('fields.weeklyCapacityHours'),
+                      placeholder: '40',
+                      type: 'number',
+                    },
+                  ]}
+                  mapSearchToCreateValues={(search) => ({
+                    displayName: search,
+                    weeklyCapacityHours: '40',
+                  })}
+                  onCreate={createAssignmentCollaborator}
+                />
+              </div>
+            ) : (
+              <div className="flex items-center gap-3 rounded-xl border bg-muted/30 p-3">
+                <Avatar className="size-10 border bg-muted">
+                  <AvatarImage
+                    src={
+                      getUserPhotoUrl(editingAssignment.userPhotoId) ||
+                      getPersonAvatarUrl(editingAssignment.personAvatarId)
+                    }
+                    alt={editingAssignment.collaboratorName}
+                  />
+                  <AvatarFallback className="text-xs">
+                    {getInitials(editingAssignment.collaboratorName)}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="min-w-0">
+                  <div className="truncate text-sm font-semibold">
+                    {editingAssignment.collaboratorName}
+                  </div>
+                  {editingAssignment.roleLabel ? (
+                    <div className="truncate text-xs text-muted-foreground">
+                      {editingAssignment.roleLabel}
+                    </div>
+                  ) : null}
+                </div>
+              </div>
+            )}
+            <div className="space-y-2">
+              <Label className="text-sm font-medium">
+                {commonT('labels.allocationPercent')}
+              </Label>
+              <Input
+                type="number"
+                min="0"
+                max="200"
+                value={assignmentFormData.allocationPercent}
+                onChange={(e) =>
+                  setAssignmentFormData((prev) => ({
+                    ...prev,
+                    ...syncAssignmentFromAllocation(
+                      e.target.value,
+                      prev,
+                      selectedAssignmentCollaborator
+                    ),
+                  }))
+                }
+                placeholder="100"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label className="text-sm font-medium">
+                {commonT('labels.weeklyCapacity')}
+              </Label>
+              <Input
+                type="number"
+                min="0"
+                value={assignmentFormData.weeklyHours}
+                onChange={(e) =>
+                  setAssignmentFormData((prev) => ({
+                    ...prev,
+                    ...syncAssignmentFromWeeklyHours(
+                      e.target.value,
+                      prev,
+                      selectedAssignmentCollaborator
+                    ),
+                  }))
+                }
+                placeholder="40"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label className="text-sm font-medium">
+                {commonT('labels.status')}
+              </Label>
+              <Select
+                value={assignmentFormData.status}
+                onValueChange={(val) =>
+                  setAssignmentFormData((prev) => ({ ...prev, status: val }))
+                }
+              >
+                <SelectTrigger className="cursor-pointer">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="active">
+                    {formatEnumLabel('active')}
+                  </SelectItem>
+                  <SelectItem value="inactive">
+                    {formatEnumLabel('inactive')}
+                  </SelectItem>
+                  <SelectItem value="completed">
+                    {formatEnumLabel('completed')}
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-2">
+                <Label className="text-sm font-medium">
+                  {commonT('labels.startDate')}
+                </Label>
+                <Input
+                  type="date"
+                  value={assignmentFormData.startDate}
+                  onChange={(e) =>
+                    setAssignmentFormData((prev) => ({
+                      ...prev,
+                      startDate: e.target.value,
+                    }))
+                  }
+                />
+              </div>
+              <div className="space-y-2">
+                <Label className="text-sm font-medium">
+                  {commonT('labels.endDate')}
+                </Label>
+                <Input
+                  type="date"
+                  value={assignmentFormData.endDate}
+                  onChange={(e) =>
+                    setAssignmentFormData((prev) => ({
+                      ...prev,
+                      endDate: e.target.value,
+                    }))
+                  }
+                />
+              </div>
+            </div>
+            <div className="flex gap-2 pt-2">
+              <Button
+                variant="outline"
+                className="flex-1 cursor-pointer"
+                onClick={() => setAssignmentSheetOpen(false)}
+                disabled={savingAssignment}
+              >
+                {commonT('actions.cancel')}
+              </Button>
+              <Button
+                className="flex-1 cursor-pointer"
+                disabled={
+                  savingAssignment ||
+                  (!editingAssignment && !assignmentFormData.collaboratorId)
+                }
+                onClick={() => void handleSaveAssignment()}
+              >
+                {savingAssignment ? (
+                  <Loader2 className="mr-2 size-4 animate-spin" />
+                ) : null}
+                {commonT('actions.save')}
+              </Button>
+            </div>
+          </div>
+        </SheetContent>
+      </Sheet>
+
+      {/* Remove Assignment Confirm Dialog */}
+      <Dialog
+        open={removingAssignmentId !== null}
+        onOpenChange={(open) => {
+          if (!open) setRemovingAssignmentId(null);
+        }}
+      >
+        <DialogContent className="sm:max-w-sm">
+          <DialogHeader>
+            <DialogTitle>{t('teamPanel.removeTitle')}</DialogTitle>
+            <DialogDescription>
+              {t('teamPanel.removeDescription')}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="mt-4">
+            <Button
+              variant="outline"
+              onClick={() => setRemovingAssignmentId(null)}
+            >
+              {commonT('actions.cancel')}
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={() => void handleConfirmRemoveAssignment()}
+            >
+              {commonT('actions.delete')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
       <TimesheetEntryCreateSheet
         open={isTimesheetEntrySheetOpen}
         onOpenChange={(open) => {
@@ -4341,7 +5022,10 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
                   )
               : undefined
           }
-          onCountChanged={() => { setBoardState(null); void refetchTasks(); }}
+          onCountChanged={() => {
+            setBoardState(null);
+            void refetchTasks();
+          }}
           onSaved={() => {
             setBoardState(null);
             void refetchTasks();