# TaskDetail

Drawer that opens when a collaborator clicks a task in the onboarding journey or My Tasks list. Handles all task types: `CUSTOM`, `FORM`, and `DOCUMENT`.

## Entry point

`TaskDetail/index.tsx` — opened via `useDrawerV2`. Triggered by `useEffect` on `taskId` URL param.

## File structure

```
TaskDetail/
├── index.tsx          — drawer shell: state, button logic, mutation dispatch
├── Task.tsx           — content router: renders the right section per task type
├── TaskInformation.tsx — status + due date card
├── TaskBody.tsx        — cover image + description
└── TaskAttachments.tsx — pre-existing attached files
```

## Task types

| Type | Button (pending) | Button (done) | Extra content |
|---|---|---|---|
| `CUSTOM` | "Marcar como completada" → marks done | "Reabrir tarea" → reopens | — |
| `FORM` | "Iniciar formulario" → navigates to form | "Ver mis respuestas" → navigates to results | — |
| `DOCUMENT` | "Completar tarea" → validates + marks done | "Ver en mis documentos" → navigates to folder | `DocumentUploadSection` |

## DOCUMENT task flow

1. `TaskDetail/index.tsx` tracks uploaded files via `uploadedDocuments` state (fed by `DocumentUploadSection` via `onDocumentFilesChange`).
2. On button click: if not all slots filled → sets `showDocumentErrors=true` (shows inline errors on empty slots, drawer stays open). If all filled → `markTaskAsDoneMutation.mutate(...)` with `{ type: DOCUMENT, documents: [{ fileAssetId }] }`. Drawer closes **only on mutation success** via `onSuccess` callback.
3. When task is `DONE`: `DocumentUploadSection` renders slots in read-only mode. Button navigates to `documentsRoutes.folders.detail(targetFolderId)`.
4. A `HuAlert warning` is shown in the drawer footer (via `footer` prop) while the task is pending.

## Key dependencies

| Hook / service | Purpose |
|---|---|
| `useGetJourneyTask(taskId)` | Fetches task detail |
| `useMarkTaskAsDone` | POST mark as done — accepts `DocumentTaskData` |
| `useReopenJourneyTask` | Reopen for CUSTOM tasks |
| `documentsRoutes.folders.detail(id)` | Navigate to personal documents folder |

## Tech debt

> **TODO: TECH-DEBT [SQGZ-892]** — Each task type's state and button logic lives in this single file. As new types are added it will keep growing. Planned refactor: split into per-type drawer components (`DocumentTaskDrawer`, `FormTaskDrawer`, etc.) and turn `TaskDetail` into a thin dispatcher. Migrate to `useDrawerLayer` at that point.

---

# DocumentUploadSection

Renders one upload slot per required document name for `DOCUMENT` tasks.

**Path:** `Tasks/components/DocumentUploadSection/`

## File structure

```
DocumentUploadSection/
├── index.tsx             — section container + slot list + "Ver en mis documentos" link
└── components/
    └── DocumentSlot/
        ├── index.tsx     — single upload slot (label + Uploader)
        └── hooks/
            └── useDocumentSlotUpload.ts  — upload logic: calls uploadOneFile, manages cards state
```

## Props

### `DocumentUploadSection`

| Prop | Type | Description |
|---|---|---|
| `documentNames` | `string[]` | Slot labels — one slot rendered per name |
| `isCompleted` | `boolean` | Renders all slots in read-only mode when true |
| `onFilesChange` | `(files: UploadedDocument[]) => void` | Called whenever a slot changes — propagates `[{ slotIndex, fileAssetId }]` for all filled slots |
| `onViewDocuments` | `() => void \| undefined` | When provided and `isCompleted`, renders a "Ver en mis documentos" link |
| `showValidationErrors` | `boolean \| undefined` | When true, marks empty slots with `error` + helper text |

### `DocumentSlot`

Each slot uses `Uploader` (material-hu) with:
- `acceptedTypes: ['pdf', 'image']`
- `maxFiles: 1`
- `fileSizeLimit: 50 MB`
- `error` + `helperText` driven by `showError` prop

### `useDocumentSlotUpload`

Encapsulates `cards` state and the upload function. Calls `uploadOneFile()` from `src/services/attachments.ts` — returns `FileAsset.id` as `fileAssetId`.

## API contract

**POST mark as done body:**
```json
{
  "type": "DOCUMENT",
  "documents": [{ "fileAssetId": 12345 }, { "fileAssetId": 67890 }]
}
```

## Translation keys (`employee_lifecycle` namespace)

| Key | ES |
|---|---|
| `document_task_detail.required_documents` | "Documentos requeridos" |
| `document_task_detail.complete_task` | "Completar tarea" |
| `document_task_detail.see_in_my_documents` | "Ver en mis documentos" |
| `document_task_detail.cannot_modify_warning` | "Recuerda que al completar la tarea no podrás modificar..." |
| `document_task_detail.file_required` | "Este archivo es requerido" |