@hed-hog/operations 0.0.306 → 0.0.310

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

@@ -316,12 +316,54 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
   const t = useTranslations('operations.ProjectDetailsPage');
   const commonT = useTranslations('operations.Common');
   const formT = useTranslations('operations.ProjectFormPage');
+  const contractT = useTranslations('operations.ContractFormPage');
   const { request, currentLocaleCode, getSettingValue } = useApp();
   const access = useOperationsAccess();
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
 
+  const getProjectStatusLabel = (value?: string | null) => {
+    if (!value) return commonT('labels.notAvailable');
+    try {
+      return formT(`options.statuses.${value}`);
+    } catch {
+      return formatEnumLabel(value);
+    }
+  };
+  const getContractStatusLabel = (value?: string | null) => {
+    if (!value) return commonT('labels.notAvailable');
+    try {
+      return contractT(`options.statuses.${value}`);
+    } catch {
+      return formatEnumLabel(value);
+    }
+  };
+  const getContractCategoryLabel = (value?: string | null) => {
+    if (!value) return commonT('labels.notAvailable');
+    try {
+      return contractT(`options.contractCategories.${value}`);
+    } catch {
+      return formatEnumLabel(value);
+    }
+  };
+  const getContractTypeLabel = (value?: string | null) => {
+    if (!value) return commonT('labels.notAvailable');
+    try {
+      return contractT(`options.contractTypes.${value}`);
+    } catch {
+      return formatEnumLabel(value);
+    }
+  };
+  const getSignatureStatusLabel = (value?: string | null) => {
+    if (!value) return commonT('labels.notAvailable');
+    try {
+      return contractT(`options.signatureStatuses.${value}`);
+    } catch {
+      return formatEnumLabel(value);
+    }
+  };
+
   const isEditSheetOpen = useMemo(
     () => shouldOpenEditSheet(searchParams.get('edit'), projectId),
     [projectId, searchParams]
@@ -401,6 +443,21 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
     enabled: Boolean(project),
   });
 
+  const { data: projectStats } = useQuery<{
+    weeklyVelocity: Array<{ weekLabel: string; loggedHours: number }>;
+    allocationByCollaborator: Array<{ name: string; allocation: number }>;
+    quickRadar: {
+      activeAssignments: number;
+      pendingTimesheets: number;
+      totalWeeklyHours: number;
+    };
+  }>({
+    queryKey: ['operations-project-stats', projectId],
+    queryFn: () =>
+      fetchOperations(request, `/operations/projects/${projectId}/stats`),
+    enabled: Boolean(project),
+  });
+
   const [boardState, setBoardState] = useState<BoardState | null>(null);
   const [selectedTaskId, setSelectedTaskId] = useState<number | null>(null);
   const [taskFormOpen, setTaskFormOpen] = useState(false);
@@ -543,18 +600,20 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
   );
 
   const allocationChartData = useMemo(() => {
+    if (projectStats?.allocationByCollaborator?.length) {
+      return projectStats.allocationByCollaborator;
+    }
     if (!project) {
       return [];
     }
-
     return project.assignments.slice(0, 6).map((assignment) => ({
       name: getInitials(assignment.collaboratorName),
       allocation:
         typeof assignment.allocationPercent === 'number'
-          ? Math.round(assignment.allocationPercent * 100)
+          ? Math.round(assignment.allocationPercent)
           : 0,
     }));
-  }, [project]);
+  }, [project, projectStats]);
 
   const sensors = useSensors(
     useSensor(PointerSensor, {
@@ -563,22 +622,15 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
   );
 
   const velocityChartData = useMemo(() => {
-    if (!project) {
-      return [];
+    if (projectStats?.weeklyVelocity?.length) {
+      return projectStats.weeklyVelocity.map((row) => ({
+        week: row.weekLabel,
+        loggedHours: row.loggedHours,
+        completedTasks: 0,
+      }));
     }
-
-    const totalHours = Math.max(project.timesheetSummary.totalHours ?? 0, 8);
-    const closedBase = Math.max(
-      project.operationalIndicators.billableAssignments,
-      1
-    );
-
-    return [0, 1, 2, 3, 4, 5].map((index) => ({
-      week: `S${index + 1}`,
-      loggedHours: Math.round((totalHours / 6) * (0.8 + index * 0.08)),
-      completedTasks: Math.round((closedBase / 6) * (0.6 + index * 0.1)),
-    }));
-  }, [project]);
+    return [];
+  }, [projectStats]);
 
   const findColumnByTask = (taskId: number) => {
     const match = KANBAN_COLUMNS.find((column) =>
@@ -781,7 +833,7 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
               </dt>
               <dd className="font-medium">
                 <StatusBadge
-                  label={formatEnumLabel(project.status)}
+                  label={getProjectStatusLabel(project.status)}
                   className={getStatusBadgeClass(project.status)}
                 />
               </dd>
@@ -826,7 +878,11 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
               </dt>
               <dd className="font-medium">
                 {project.budgetAmount
-                  ? formatCurrency(project.budgetAmount)
+                  ? formatCurrency(
+                      project.budgetAmount,
+                      getSettingValue,
+                      currentLocaleCode
+                    )
                   : commonT('labels.notAvailable')}
               </dd>
             </div>
@@ -858,7 +914,7 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
               <dd className="font-medium">
                 {project.contractStatus ? (
                   <StatusBadge
-                    label={formatEnumLabel(project.contractStatus)}
+                    label={getContractStatusLabel(project.contractStatus)}
                     className={getStatusBadgeClass(project.contractStatus)}
                   />
                 ) : (
@@ -895,7 +951,7 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
                   </div>
                 </div>
                 <StatusBadge
-                  label={formatEnumLabel(project.relatedContract.status)}
+                  label={getContractStatusLabel(project.relatedContract.status)}
                   className={getStatusBadgeClass(
                     project.relatedContract.status
                   )}
@@ -908,7 +964,7 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
                   </dt>
                   <dd className="font-medium">
                     {project.relatedContract.contractCategory
-                      ? formatEnumLabel(
+                      ? getContractCategoryLabel(
                           project.relatedContract.contractCategory
                         )
                       : commonT('labels.notAvailable')}
@@ -920,7 +976,9 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
                   </dt>
                   <dd className="font-medium">
                     {project.relatedContract.contractType
-                      ? formatEnumLabel(project.relatedContract.contractType)
+                      ? getContractTypeLabel(
+                          project.relatedContract.contractType
+                        )
                       : commonT('labels.notAvailable')}
                   </dd>
                 </div>
@@ -951,7 +1009,9 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
                   </dt>
                   <dd className="font-medium">
                     {project.relatedContract.signatureStatus
-                      ? formatEnumLabel(project.relatedContract.signatureStatus)
+                      ? getSignatureStatusLabel(
+                          project.relatedContract.signatureStatus
+                        )
                       : commonT('labels.notAvailable')}
                   </dd>
                 </div>
@@ -961,7 +1021,11 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
                   </dt>
                   <dd className="font-medium">
                     {project.relatedContract.budgetAmount
-                      ? formatCurrency(project.relatedContract.budgetAmount)
+                      ? formatCurrency(
+                          project.relatedContract.budgetAmount,
+                          getSettingValue,
+                          currentLocaleCode
+                        )
                       : commonT('labels.notAvailable')}
                   </dd>
                 </div>
@@ -984,15 +1048,15 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
 
       <div className="grid gap-4 xl:grid-cols-12">
         <SectionCard
-          title="Saude da entrega"
-          description="Leitura visual de alocacao e ritmo operacional da equipe."
+          title={t('sections.deliveryHealth')}
+          description={t('sections.deliveryHealthDescription')}
           className="rounded-xl border bg-card p-4 shadow-sm xl:col-span-7"
         >
           <div className="grid gap-4 lg:grid-cols-2">
             <div className="rounded-lg border bg-muted/10 p-3">
               <div className="mb-2 flex items-center gap-2 text-sm font-medium">
                 <BarChart3 className="size-4 text-sky-700" />
-                Alocacao por colaborador
+                {t('charts.allocationByCollaborator')}
               </div>
               <ChartContainer className="h-60 w-full" config={boardChartConfig}>
                 <BarChart data={allocationChartData}>
@@ -1012,7 +1076,7 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
             <div className="rounded-lg border bg-muted/10 p-3">
               <div className="mb-2 flex items-center gap-2 text-sm font-medium">
                 <Rocket className="size-4 text-emerald-700" />
-                Velocidade semanal
+                {t('charts.weeklyVelocity')}
               </div>
               <ChartContainer className="h-60 w-full" config={boardChartConfig}>
                 <LineChart data={velocityChartData}>
@@ -1041,38 +1105,43 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
         </SectionCard>
 
         <SectionCard
-          title="Radar rapido"
-          description="Sinais para tomada de decisao no curto prazo."
+          title={t('sections.quickRadar')}
+          description={t('sections.quickRadarDescription')}
           className="rounded-xl border bg-card p-4 shadow-sm xl:col-span-5"
         >
           <div className="space-y-3">
             <div className="rounded-lg border bg-emerald-50/50 p-3">
               <div className="flex items-center justify-between text-sm">
                 <span className="text-muted-foreground">
-                  Atribuicoes ativas
+                  {t('quickRadar.activeAssignments')}
                 </span>
                 <span className="font-semibold text-emerald-700">
-                  {project.operationalIndicators.activeAssignments}
+                  {projectStats?.quickRadar?.activeAssignments ??
+                    project.operationalIndicators.activeAssignments}
                 </span>
               </div>
             </div>
             <div className="rounded-lg border bg-amber-50/50 p-3">
               <div className="flex items-center justify-between text-sm">
                 <span className="text-muted-foreground">
-                  Pendencias de timesheet
+                  {t('quickRadar.timesheetPendencies')}
                 </span>
                 <span className="font-semibold text-amber-700">
-                  {project.timesheetSummary.pendingTimesheets}
+                  {projectStats?.quickRadar?.pendingTimesheets ??
+                    project.timesheetSummary.pendingTimesheets}
                 </span>
               </div>
             </div>
             <div className="rounded-lg border bg-sky-50/50 p-3">
               <div className="flex items-center justify-between text-sm">
                 <span className="text-muted-foreground">
-                  Horas semanais planejadas
+                  {t('quickRadar.plannedWeeklyHours')}
                 </span>
                 <span className="font-semibold text-sky-700">
-                  {formatHours(project.operationalIndicators.totalWeeklyHours)}
+                  {formatHours(
+                    projectStats?.quickRadar?.totalWeeklyHours ??
+                      project.operationalIndicators.totalWeeklyHours
+                  )}
                 </span>
               </div>
             </div>
@@ -1081,8 +1150,8 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
       </div>
 
       <SectionCard
-        title="Quadro de tarefas"
-        description="Board estilo Kanban com arraste entre colunas e detalhe lateral da tarefa."
+        title={t('sections.taskBoard')}
+        description={t('sections.taskBoardDescription')}
         className="rounded-xl border bg-card p-4 shadow-sm"
         actions={
           <Button
@@ -1091,7 +1160,7 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
             onClick={() => openCreateTaskForm()}
           >
             <Plus className="size-4" />
-            Nova tarefa
+            {t('taskForm.titleNew')}
           </Button>
         }
       >
@@ -1182,6 +1251,38 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
                                     : ''}
                                 </span>
                               </div>
+
+                              {task.assigneeName ? (
+                                <div className="mt-2 flex items-center gap-1.5">
+                                  <div className="flex size-5 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted text-[9px] font-semibold uppercase text-muted-foreground ring-1 ring-border">
+                                    {(() => {
+                                      const photoUrl = getUserPhotoUrl(
+                                        task.assigneeUserPhotoId
+                                      );
+                                      const avatarUrl =
+                                        task.assigneePersonAvatarId
+                                          ? getPersonAvatarUrl(
+                                              task.assigneePersonAvatarId
+                                            )
+                                          : null;
+                                      const imgSrc = photoUrl ?? avatarUrl;
+                                      return imgSrc ? (
+                                        // eslint-disable-next-line @next/next/no-img-element
+                                        <img
+                                          src={imgSrc}
+                                          alt={task.assigneeName}
+                                          className="size-full object-cover"
+                                        />
+                                      ) : (
+                                        getInitials(task.assigneeName)
+                                      );
+                                    })()}
+                                  </div>
+                                  <span className="truncate text-[11px] text-muted-foreground">
+                                    {task.assigneeName}
+                                  </span>
+                                </div>
+                              ) : null}
                             </button>
                           )}
                         </DraggableTaskCard>
@@ -1291,10 +1392,10 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
             </div>
             <div>
               <dt className="text-muted-foreground">
-                {t('indicators.billableAssignments')}
+                {t('indicators.completedAssignments')}
               </dt>
               <dd className="font-medium">
-                {project.operationalIndicators.billableAssignments}
+                {project.operationalIndicators.completedAssignments}
               </dd>
             </div>
             <div>
@@ -1518,16 +1619,16 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
         <DialogContent className="sm:max-w-lg">
           <DialogHeader>
             <DialogTitle>
-              {editingTaskId ? 'Editar tarefa' : 'Nova tarefa'}
+              {editingTaskId ? t('taskForm.titleEdit') : t('taskForm.titleNew')}
             </DialogTitle>
           </DialogHeader>
 
           <div className="space-y-4">
             <div className="space-y-1.5">
-              <Label htmlFor="task-name">Nome *</Label>
+              <Label htmlFor="task-name">{t('taskForm.nameLabel')} *</Label>
               <Input
                 id="task-name"
-                placeholder="Nome da tarefa"
+                placeholder={t('taskForm.namePlaceholder')}
                 value={taskFormData.name}
                 onChange={(e) =>
                   setTaskFormData((prev) => ({ ...prev, name: e.target.value }))
@@ -1536,10 +1637,12 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
             </div>
 
             <div className="space-y-1.5">
-              <Label htmlFor="task-description">Descricao</Label>
+              <Label htmlFor="task-description">
+                {t('taskForm.descriptionLabel')}
+              </Label>
               <Textarea
                 id="task-description"
-                placeholder="Descricao opcional"
+                placeholder={t('taskForm.descriptionPlaceholder')}
                 rows={3}
                 value={taskFormData.description}
                 onChange={(e) =>
@@ -1553,7 +1656,7 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
 
             <div className="grid grid-cols-2 gap-3">
               <div className="space-y-1.5">
-                <Label>Prioridade</Label>
+                <Label>{t('taskForm.priorityLabel')}</Label>
                 <Select
                   value={taskFormData.priority}
                   onValueChange={(v) =>
@@ -1563,7 +1666,7 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
                     }))
                   }
                 >
-                  <SelectTrigger>
+                  <SelectTrigger className="w-full">
                     <SelectValue />
                   </SelectTrigger>
                   <SelectContent>
@@ -1581,7 +1684,7 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
               </div>
 
               <div className="space-y-1.5">
-                <Label>Coluna</Label>
+                <Label>{t('taskForm.columnLabel')}</Label>
                 <Select
                   value={taskFormData.status}
                   onValueChange={(v) =>
@@ -1591,7 +1694,7 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
                     }))
                   }
                 >
-                  <SelectTrigger>
+                  <SelectTrigger className="w-full">
                     <SelectValue />
                   </SelectTrigger>
                   <SelectContent>
@@ -1634,7 +1737,9 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
 
             <div className="grid grid-cols-2 gap-3">
               <div className="space-y-1.5">
-                <Label htmlFor="task-due-date">Prazo</Label>
+                <Label htmlFor="task-due-date">
+                  {t('taskForm.deadlineLabel')}
+                </Label>
                 <Input
                   id="task-due-date"
                   type="date"
@@ -1649,7 +1754,9 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
               </div>
 
               <div className="space-y-1.5">
-                <Label htmlFor="task-estimate">Estimativa (h)</Label>
+                <Label htmlFor="task-estimate">
+                  {t('taskForm.estimateLabel')}
+                </Label>
                 <Input
                   id="task-estimate"
                   type="number"
@@ -1668,10 +1775,10 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
             </div>
 
             <div className="space-y-1.5">
-              <Label htmlFor="task-tags">Etiquetas</Label>
+              <Label htmlFor="task-tags">{t('taskForm.tagsLabel')}</Label>
               <Input
                 id="task-tags"
-                placeholder="planejamento, cliente, design (separadas por virgula)"
+                placeholder={t('taskForm.tagsPlaceholder')}
                 value={taskFormData.tags}
                 onChange={(e) =>
                   setTaskFormData((prev) => ({ ...prev, tags: e.target.value }))
@@ -1690,17 +1797,17 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
               }}
               disabled={taskFormLoading}
             >
-              Cancelar
+              {commonT('actions.cancel')}
             </Button>
             <Button
               onClick={() => void handleTaskFormSubmit()}
               disabled={taskFormLoading || !taskFormData.name.trim()}
             >
               {taskFormLoading
-                ? 'Salvando...'
+                ? t('taskForm.saving')
                 : editingTaskId
-                  ? 'Salvar'
-                  : 'Criar'}
+                  ? commonT('actions.save')
+                  : commonT('actions.create')}
             </Button>
           </DialogFooter>
         </DialogContent>