# task_completion.svelte —  Task Completion

<span style="white-space: pre-wrap;">Displays the history of completed tasks read from the </span>`<span class="editor-theme-code">tasks/</span>`<span style="white-space: pre-wrap;"> app data directory. On mount it lists all task files and deserialises each JSON file into a </span>`<span class="editor-theme-code">Task</span>`<span style="white-space: pre-wrap;"> object.</span>

### Task list

Each task is shown as a card with its name, number, completion time, and finish timestamp. Clicking a card opens a detail modal. A delete button removes the task file and all associated sample images.

### Task detail modal

<span style="white-space: pre-wrap;">Shows full task metadata and a list of all attached </span>`<span class="editor-theme-code">Sample</span>`<span style="white-space: pre-wrap;"> objects with their location, coordinates, measurement, weight, and image paths. Image paths are clickable links that open the image viewer modal.</span>

### Image viewer modal

<span style="white-space: pre-wrap;">Loads the before and after sample images using </span>`<span class="editor-theme-code">appDataDir()</span>`<span style="white-space: pre-wrap;"> + </span>`<span class="editor-theme-code">convertFileSrc()</span>`<span style="white-space: pre-wrap;"> and displays them side by side.</span>