From c0f70004eb2f5bb1843fb35d5dfc7af5119014bd Mon Sep 17 00:00:00 2001
From: jedi <git@m.j3d1.de>
Date: Sun, 16 Aug 2026 15:15:38 +0200
Subject: [PATCH] stash

---
 .../0004_alter_accountpreference_id.py        |   18 +
 backend/toolshed/admin.py                     |    4 +-
 .../0010_rename_name_workflowinstance_slug.py |   18 +
 backend/toolshed/models.py                    |    2 +-
 backend/toolshed/serializers.py               |    2 +-
 deploy/docker-compose.override.yml            |    1 +
 frontend/src/components/BaseLayout.vue        |    3 +-
 .../workflows/BackupRestoreWorkflow.vue       |    4 +-
 .../workflows/BulkItemImportWorkflow.vue      |    4 +-
 .../workflows/ExpiryCheckWorkflow.vue         |    4 +-
 .../workflows/FotoFirstBulkImportWorkflow.vue |  296 +++-
 .../FotoFirstBulkImportWorkflow2.vue          | 1352 +++++++++++++++++
 .../workflows/InventoryAuditWorkflow.vue      |    4 +-
 .../workflows/MaintenanceScheduleWorkflow.vue |    4 +-
 .../workflows/StorageOptimizationWorkflow.vue |    4 +-
 frontend/src/scss/toolshed.scss               |   37 +
 frontend/src/store.js                         |    9 +
 frontend/src/views/WorkflowDetail.vue         |  182 +--
 frontend/src/views/Workflows.vue              |  117 +-
 frontend/src/workflows.js                     |   46 +-
 frontend/vite.config.js                       |    4 +-
 21 files changed, 1855 insertions(+), 260 deletions(-)
 create mode 100644 backend/authentication/migrations/0004_alter_accountpreference_id.py
 create mode 100644 backend/toolshed/migrations/0010_rename_name_workflowinstance_slug.py
 create mode 100644 frontend/src/components/workflow/workflows/FotoFirstBulkImportWorkflow2.vue

diff --git a/backend/authentication/migrations/0004_alter_accountpreference_id.py b/backend/authentication/migrations/0004_alter_accountpreference_id.py
new file mode 100644
index 0000000..967b2fb
--- /dev/null
+++ b/backend/authentication/migrations/0004_alter_accountpreference_id.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.2.2 on 2026-08-09 13:08
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('authentication', '0003_accountpreference'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='accountpreference',
+            name='id',
+            field=models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID'),
+        ),
+    ]
diff --git a/backend/toolshed/admin.py b/backend/toolshed/admin.py
index bbd1525..a3d11a1 100644
--- a/backend/toolshed/admin.py
+++ b/backend/toolshed/admin.py
@@ -73,8 +73,8 @@ admin.site.register(StorageLocation, StorageLocationAdmin)
 
 
 class WorkflowInstanceAdmin(admin.ModelAdmin):
-    list_display = ('name', 'state', 'owner', 'created_at', 'updated_at')
-    search_fields = ('name', 'owner__username')
+    list_display = ('slug', 'state', 'owner', 'created_at', 'updated_at')
+    search_fields = ('slug', 'owner__username')
     list_filter = ('state', 'created_at', 'owner')
     readonly_fields = ('created_at', 'updated_at')
 
diff --git a/backend/toolshed/migrations/0010_rename_name_workflowinstance_slug.py b/backend/toolshed/migrations/0010_rename_name_workflowinstance_slug.py
new file mode 100644
index 0000000..8787453
--- /dev/null
+++ b/backend/toolshed/migrations/0010_rename_name_workflowinstance_slug.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.2.2 on 2026-08-09 13:08
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('toolshed', '0009_alter_workflowinstance_payload'),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name='workflowinstance',
+            old_name='name',
+            new_name='slug',
+        ),
+    ]
diff --git a/backend/toolshed/models.py b/backend/toolshed/models.py
index 47a790c..e89a501 100644
--- a/backend/toolshed/models.py
+++ b/backend/toolshed/models.py
@@ -135,7 +135,7 @@ class StorageLocation(models.Model):
 
 
 class WorkflowInstance(models.Model):
-    name = models.CharField(max_length=255)
+    slug = models.CharField(max_length=255)
     state = models.CharField(max_length=255)
     payload = models.TextField(default='', blank=True) # an opaque, frontend-serialized JSON string on the backend.
     owner = models.ForeignKey(ToolshedUser, on_delete=models.CASCADE, related_name='workflows')
diff --git a/backend/toolshed/serializers.py b/backend/toolshed/serializers.py
index 43c335b..777801c 100644
--- a/backend/toolshed/serializers.py
+++ b/backend/toolshed/serializers.py
@@ -206,6 +206,6 @@ class WorkflowInstanceSerializer(serializers.ModelSerializer):
 
     class Meta:
         model = WorkflowInstance
-        fields = ['id', 'name', 'state', 'payload', 'owner', 'created_at', 'updated_at']
+        fields = ['id', 'slug', 'state', 'payload', 'owner', 'created_at', 'updated_at']
         read_only_fields = ['owner', 'created_at', 'updated_at']
 
diff --git a/deploy/docker-compose.override.yml b/deploy/docker-compose.override.yml
index 6d542d7..77f21c7 100644
--- a/deploy/docker-compose.override.yml
+++ b/deploy/docker-compose.override.yml
@@ -1,4 +1,5 @@
 version: '3.8'
+name: deploy
 
 services:
   backend-a:
diff --git a/frontend/src/components/BaseLayout.vue b/frontend/src/components/BaseLayout.vue
index 8ec828c..d9a1ac2 100644
--- a/frontend/src/components/BaseLayout.vue
+++ b/frontend/src/components/BaseLayout.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="wrapper">
         <Sidebar/>
-        <div class="main">
+        <div class="main" id="page">
             <nav class="navbar navbar-expand navbar-light navbar-bg">
                 <a class="sidebar-toggle d-flex" @click="toggleSidebar">
                     <i class="hamburger align-self-center"></i>
@@ -55,6 +55,7 @@ export default {
         toggleSidebar() {
             closeAllDropdowns();
             document.getElementById("sidebar").classList.toggle("collapsed");
+            document.getElementById("page").classList.toggle("expanded");
         },
     },
 }
diff --git a/frontend/src/components/workflow/workflows/BackupRestoreWorkflow.vue b/frontend/src/components/workflow/workflows/BackupRestoreWorkflow.vue
index 2c99d06..fad395a 100644
--- a/frontend/src/components/workflow/workflows/BackupRestoreWorkflow.vue
+++ b/frontend/src/components/workflow/workflows/BackupRestoreWorkflow.vue
@@ -60,8 +60,8 @@ import * as BIcons from 'bootstrap-icons-vue';
 export default {
     name: 'BackupRestoreWorkflow',
     meta: {
-        id: 'backup-restore',
-        name: 'Data Backup',
+        slug: 'backup-restore',
+        title: 'Data Backup',
         category: 'System Maintenance',
         description: 'Create a comprehensive backup of your inventory and settings data.',
         icons: ['b-icon-gear', 'b-icon-download'],
diff --git a/frontend/src/components/workflow/workflows/BulkItemImportWorkflow.vue b/frontend/src/components/workflow/workflows/BulkItemImportWorkflow.vue
index 93f352a..360f045 100644
--- a/frontend/src/components/workflow/workflows/BulkItemImportWorkflow.vue
+++ b/frontend/src/components/workflow/workflows/BulkItemImportWorkflow.vue
@@ -279,8 +279,8 @@ export default {
     // `@/workflows.js` (via `Component.meta`) to assemble the catalog used
     // by the Workflows and WorkflowDetail views.
     meta: {
-        id: 'import-items',
-        name: 'Bulk Item Import',
+        slug: 'import-items',
+        title: 'Bulk Item Import',
         category: 'Data Management',
         description: 'Import multiple inventory items from CSV or Excel files with validation.',
         icons: ['b-icon-upload', 'b-icon-file-earmark-spreadsheet', 'b-icon-list-check'],
diff --git a/frontend/src/components/workflow/workflows/ExpiryCheckWorkflow.vue b/frontend/src/components/workflow/workflows/ExpiryCheckWorkflow.vue
index db4e4f9..ce5de9d 100644
--- a/frontend/src/components/workflow/workflows/ExpiryCheckWorkflow.vue
+++ b/frontend/src/components/workflow/workflows/ExpiryCheckWorkflow.vue
@@ -60,8 +60,8 @@ import * as BIcons from 'bootstrap-icons-vue';
 export default {
     name: 'ExpiryCheckWorkflow',
     meta: {
-        id: 'expiry-check',
-        name: 'Expiry Date Check',
+        slug: 'expiry-check',
+        title: 'Expiry Date Check',
         category: 'Quality Control',
         description: 'Identify and handle items approaching or past their expiry dates.',
         icons: ['b-icon-clock-history', 'b-icon-exclamation-triangle'],
diff --git a/frontend/src/components/workflow/workflows/FotoFirstBulkImportWorkflow.vue b/frontend/src/components/workflow/workflows/FotoFirstBulkImportWorkflow.vue
index bd26e09..f902a8d 100644
--- a/frontend/src/components/workflow/workflows/FotoFirstBulkImportWorkflow.vue
+++ b/frontend/src/components/workflow/workflows/FotoFirstBulkImportWorkflow.vue
@@ -2,10 +2,6 @@
     <div class="foto-first-workflow">
         <!-- Step 1: Photo Capture -->
         <div v-if="step === '1'" class="foto-first-step-1">
-            <div class="step-header mb-4">
-                <h4 class="mb-2">Photo Capture</h4>
-                <p class="text-muted">Capture or upload item photos to begin the import process.</p>
-            </div>
 
             <div class="upload-area mb-4">
                 <div class="row">
@@ -39,13 +35,67 @@
                                     @change="handleFileUpload"
                                     class="d-none"
                                 />
-                                <button class="btn btn-success" @click="$refs.fileInput.click()" :disabled="loadingCamera">
+                                <button class="btn btn-success" @click="$refs.fileInput.click()"
+                                        :disabled="loadingCamera">
                                     <b-icon-upload class="me-1"></b-icon-upload>
                                     Upload Photos
                                 </button>
                             </div>
                         </div>
                     </div>
+
+                    <hr>
+
+                    <drag-drop-file-source @input="addFiles">
+                        <ul>
+                            <li v-for="file in without_images(staged_files)" :key="file.id">
+                                {{ file.name }}
+                            </li>
+                        </ul>
+                        <hr>
+                        <div style="position: relative;">
+                            <div class="image-list">
+                                <deletable-wrapper v-for="file in only_images(staged_files).filter(file => file.owner)"
+                                                   :key="file.id"
+                                                   @delete="deleteFile(file)">
+                                    <authenticated-image :src="file.name" :owner="file.owner" class="img-thumbnail"/>
+                                </deletable-wrapper>
+                                <deletable-wrapper v-for="file in only_images(staged_files).filter(file => file.data)"
+                                                   :key="file.id"
+                                                   @delete="deleteTempFile(file)">
+                                    <img :alt="file.name" :src="'data:' + file.mime_type + ';base64,' + file.data"
+                                         class="img-thumbnail border-info">
+                                </deletable-wrapper>
+                                <fs-file-source @input="addFiles">
+                                    <div class="img-thumbnail btn btn-outline-primary">
+                                        <b-icon-upload></b-icon-upload>
+                                    </div>
+                                </fs-file-source>
+                                <camera-file-source @input="addFiles">
+                                    <div class="img-thumbnail btn btn-outline-primary">
+                                        <b-icon-camera></b-icon-camera>
+                                    </div>
+                                </camera-file-source>
+                                <webcam-file-source @input="addFiles">
+                                    <div class="img-thumbnail btn btn-outline-primary">
+                                        <b-icon-camera-video></b-icon-camera-video>
+                                    </div>
+                                </webcam-file-source>
+                                <label class="img-thumbnail btn btn-outline-primary" for="file-dropdown">
+                                    <b-icon-plus></b-icon-plus>
+                                </label>
+                            </div>
+                            <input type="checkbox" id="file-dropdown" class="invisible-input">
+                            <div class="dropdown-menu" v-if="only_images([]).length > 0">
+                                <div class="image-list">
+                    <span v-for="file in only_images([])" :key="file.id" @click="addExistingFiles([file])"
+                          style="cursor: pointer;">
+                        <authenticated-image :src="file.name" :owner="file.owner" class="img-thumbnail"/>
+                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </drag-drop-file-source>
                 </div>
             </div>
 
@@ -223,7 +273,8 @@
                 <div class="row">
                     <div v-for="(image, index) in processedImages" :key="index" class="col-sm-6 col-md-4 col-lg-3 mb-3">
                         <div class="card">
-                            <img :src="image.processedUrl" class="card-img-top processed-thumbnail" :alt="`Processed ${index + 1}`">
+                            <img :src="image.processedUrl" class="card-img-top processed-thumbnail"
+                                 :alt="`Processed ${index + 1}`">
                             <div class="card-body p-2">
                                 <div class="d-flex justify-content-between align-items-center mb-1">
                                     <small class="text-muted">{{ image.name }}</small>
@@ -233,10 +284,13 @@
                                 </div>
                                 <div class="processing-info">
                                     <small class="text-muted d-block">
-                                        {{ formatFileSize(image.originalSize) }} → {{ formatFileSize(image.processedSize) }}
+                                        {{ formatFileSize(image.originalSize) }} →
+                                        {{ formatFileSize(image.processedSize) }}
                                     </small>
                                     <small class="text-success">
-                                        {{ Math.round(((image.originalSize - image.processedSize) / image.originalSize) * 100) }}% reduced
+                                        {{
+                                            Math.round(((image.originalSize - image.processedSize) / image.originalSize) * 100)
+                                        }}% reduced
                                     </small>
                                 </div>
                             </div>
@@ -299,7 +353,8 @@
                     <!-- Image Preview -->
                     <div class="col-md-4">
                         <div class="card">
-                            <img :src="currentItem.processedUrl || currentItem.preview" class="card-img-top item-image" alt="Current item">
+                            <img :src="currentItem.processedUrl || currentItem.preview" class="card-img-top item-image"
+                                 alt="Current item">
                             <div class="card-body p-2">
                                 <small class="text-muted">{{ currentItem.name }}</small>
                             </div>
@@ -476,9 +531,11 @@
                     </div>
                     <div v-if="showCompleted" class="card-body">
                         <div class="row">
-                            <div v-for="(item, index) in completedItems" :key="index" class="col-sm-6 col-md-4 col-lg-3 mb-2">
+                            <div v-for="(item, index) in completedItems" :key="index"
+                                 class="col-sm-6 col-md-4 col-lg-3 mb-2">
                                 <div class="d-flex align-items-center">
-                                    <img :src="item.image.processedUrl || item.image.preview" class="completed-item-thumb me-2" alt="Item">
+                                    <img :src="item.image.processedUrl || item.image.preview"
+                                         class="completed-item-thumb me-2" alt="Item">
                                     <div class="flex-grow-1">
                                         <div class="fw-bold small">{{ item.details.name }}</div>
                                         <div class="text-muted small">{{ item.details.category || 'No category' }}</div>
@@ -563,7 +620,8 @@
                     </div>
                     <div class="card-body">
                         <div v-if="Object.keys(categoryBreakdown).length > 0" class="row">
-                            <div v-for="(count, category) in categoryBreakdown" :key="category" class="col-sm-6 col-md-4 col-lg-3 mb-2">
+                            <div v-for="(count, category) in categoryBreakdown" :key="category"
+                                 class="col-sm-6 col-md-4 col-lg-3 mb-2">
                                 <div class="d-flex justify-content-between align-items-center">
                                     <span class="text-capitalize">{{ category || 'Uncategorized' }}</span>
                                     <span class="badge bg-secondary">{{ count }}</span>
@@ -663,15 +721,19 @@
                     <div class="card-body">
                         <!-- Grid View -->
                         <div v-if="viewMode === 'grid'" class="row">
-                            <div v-for="(item, index) in completedItems" :key="index" class="col-sm-6 col-md-4 col-lg-3 mb-3">
+                            <div v-for="(item, index) in completedItems" :key="index"
+                                 class="col-sm-6 col-md-4 col-lg-3 mb-3">
                                 <div class="card h-100">
-                                    <img :src="item.image.processedUrl || item.image.preview" class="card-img-top item-thumb" :alt="item.details.name">
+                                    <img :src="item.image.processedUrl || item.image.preview"
+                                         class="card-img-top item-thumb" :alt="item.details.name">
                                     <div class="card-body p-2">
                                         <h6 class="card-title mb-1">{{ item.details.name }}</h6>
-                                        <p class="card-text small text-muted mb-1">{{ item.details.category || 'No category' }}</p>
+                                        <p class="card-text small text-muted mb-1">
+                                            {{ item.details.category || 'No category' }}</p>
                                         <div class="d-flex justify-content-between align-items-center">
                                             <small class="text-muted">Qty: {{ item.details.quantity }}</small>
-                                            <small v-if="item.details.estimated_value" class="text-success">${{ item.details.estimated_value }}</small>
+                                            <small v-if="item.details.estimated_value"
+                                                   class="text-success">${{ item.details.estimated_value }}</small>
                                         </div>
                                     </div>
                                 </div>
@@ -682,32 +744,35 @@
                         <div v-else class="table-responsive">
                             <table class="table table-sm">
                                 <thead>
-                                    <tr>
-                                        <th>Image</th>
-                                        <th>Name</th>
-                                        <th>Category</th>
-                                        <th>Quantity</th>
-                                        <th>Location</th>
-                                        <th>Value</th>
-                                    </tr>
+                                <tr>
+                                    <th>Image</th>
+                                    <th>Name</th>
+                                    <th>Category</th>
+                                    <th>Quantity</th>
+                                    <th>Location</th>
+                                    <th>Value</th>
+                                </tr>
                                 </thead>
                                 <tbody>
-                                    <tr v-for="(item, index) in completedItems" :key="index">
-                                        <td>
-                                            <img :src="item.image.processedUrl || item.image.preview" class="list-item-thumb" :alt="item.details.name">
-                                        </td>
-                                        <td class="fw-bold">{{ item.details.name }}</td>
-                                        <td>
-                                            <span v-if="item.details.category" class="badge bg-light text-dark">{{ item.details.category }}</span>
-                                            <span v-else class="text-muted">-</span>
-                                        </td>
-                                        <td>{{ item.details.quantity }} {{ item.details.unit }}</td>
-                                        <td>{{ item.details.location || '-' }}</td>
-                                        <td>
-                                            <span v-if="item.details.estimated_value" class="text-success">${{ item.details.estimated_value }}</span>
-                                            <span v-else class="text-muted">-</span>
-                                        </td>
-                                    </tr>
+                                <tr v-for="(item, index) in completedItems" :key="index">
+                                    <td>
+                                        <img :src="item.image.processedUrl || item.image.preview"
+                                             class="list-item-thumb" :alt="item.details.name">
+                                    </td>
+                                    <td class="fw-bold">{{ item.details.name }}</td>
+                                    <td>
+                                        <span v-if="item.details.category"
+                                              class="badge bg-light text-dark">{{ item.details.category }}</span>
+                                        <span v-else class="text-muted">-</span>
+                                    </td>
+                                    <td>{{ item.details.quantity }} {{ item.details.unit }}</td>
+                                    <td>{{ item.details.location || '-' }}</td>
+                                    <td>
+                                        <span v-if="item.details.estimated_value"
+                                              class="text-success">${{ item.details.estimated_value }}</span>
+                                        <span v-else class="text-muted">-</span>
+                                    </td>
+                                </tr>
                                 </tbody>
                             </table>
                         </div>
@@ -722,7 +787,8 @@
                         <b-icon-check-circle class="text-success mb-3" style="font-size: 3rem;"></b-icon-check-circle>
                         <h5 class="mb-3">Ready to Complete Import</h5>
                         <p class="text-muted mb-4">
-                            All {{ finalTotalItems }} items have been processed and are ready to be added to your inventory.
+                            All {{ finalTotalItems }} items have been processed and are ready to be added to your
+                            inventory.
                             This action cannot be undone.
                         </p>
                         <div class="d-flex justify-content-center gap-3">
@@ -755,34 +821,28 @@
 
 <script>
 import * as BIcons from "bootstrap-icons-vue";
+import {mapActions, mapState} from "vuex";
+import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
+import DeletableWrapper from "@/components/DeletableWrapper.vue";
+import DragDropFileSource from "@/components/inputs/DragDropFileSource.vue";
+import CameraFileSource from "@/components/inputs/CameraFileSource.vue";
+import FsFileSource from "@/components/inputs/FsFileSource.vue";
+import WebcamFileSource from "@/components/inputs/WebcamFileSource.vue";
 
-/**
- * Foto First Bulk Import Workflow
- *
- * This single component implements every step of the 'foto-first-bulk-import'
- * workflow (photo capture, image processing, item detail entry and import
- * completion). Keeping the whole workflow in one file avoids splitting
- * closely related state (photos, processed images, completed items) across
- * many small step components and their prop/emit boundaries.
- */
 export default {
     name: 'FotoFirstBulkImportWorkflow',
-    // Metadata describing this workflow, co-located with its implementation
-    // so there is a single source of truth per workflow type. Consumed by
-    // `@/workflows.js` (via `Component.meta`) to assemble the catalog used
-    // by the Workflows and WorkflowDetail views.
     meta: {
-        id: 'foto-first-bulk-import',
-        name: 'Foto First Bulk Import',
+        slug: 'foto-first-bulk-import',
+        title: 'Foto First Bulk Import',
         category: 'Data Management',
         description: 'Capture unlimited photos via mobile camera or upload images, then sequentially enter details for each item.',
         icons: ['b-icon-camera', 'b-icon-pencil-square'],
         estimatedDuration: '10-60 minutes',
         stepDefinitions: [
-            { step: '1', name: 'Photo Capture', description: 'Capture or upload item photos' },
-            { step: '2', name: 'Image Processing', description: 'Process and optimize images' },
-            { step: '3', name: 'Item Details Entry', description: 'Enter details for each photographed item' },
-            { step: '4', name: 'Import Completion', description: 'Finalize and save imported items' }
+            {step: '1', name: 'Photo Capture', description: 'Capture or upload item photos'},
+            {step: '2', name: 'Image Processing', description: 'Process and optimize images'},
+            {step: '3', name: 'Item Details Entry', description: 'Enter details for each photographed item'},
+            {step: '4', name: 'Import Completion', description: 'Finalize and save imported items'}
         ],
         getInitialPayload() {
             return {
@@ -797,6 +857,12 @@ export default {
         }
     },
     components: {
+        WebcamFileSource,
+        AuthenticatedImage,
+        DeletableWrapper,
+        DragDropFileSource,
+        CameraFileSource,
+        FsFileSource,
         ...BIcons
     },
     props: {
@@ -815,6 +881,7 @@ export default {
     },
     data() {
         return {
+            staged_files: [],
             // Step 1: photo capture
             loadingCamera: false,
             showCamera: false,
@@ -913,19 +980,20 @@ export default {
         });
     },
     methods: {
+        ...mapActions(['stageFile']),
         loadFromPayload() {
             if (this.payload.photos) this.photos = [...this.payload.photos];
             if (this.payload.processing_options) {
-                this.processingOptions = { ...this.processingOptions, ...this.payload.processing_options };
+                this.processingOptions = {...this.processingOptions, ...this.payload.processing_options};
             }
             if (this.payload.processed_images) {
                 this.processedImages = [...this.payload.processed_images];
                 this.processedCount = this.processedImages.length;
             }
             if (this.payload.completed_items) this.completedItems = [...this.payload.completed_items];
-            if (this.payload.current_item_details) this.currentItemDetails = { ...this.payload.current_item_details };
+            if (this.payload.current_item_details) this.currentItemDetails = {...this.payload.current_item_details};
             if (this.payload.current_item_index !== undefined) this.currentItemIndex = this.payload.current_item_index;
-            if (this.payload.import_options) this.importOptions = { ...this.importOptions, ...this.payload.import_options };
+            if (this.payload.import_options) this.importOptions = {...this.importOptions, ...this.payload.import_options};
         },
 
         // --- Step 1: Photo capture ---
@@ -933,7 +1001,7 @@ export default {
             try {
                 this.loadingCamera = true;
                 this.stream = await navigator.mediaDevices.getUserMedia({
-                    video: { facingMode: 'environment' }
+                    video: {facingMode: 'environment'}
                 });
                 this.$refs.video.srcObject = this.stream;
                 this.showCamera = true;
@@ -1010,7 +1078,7 @@ export default {
         },
 
         updatePhotosPayload() {
-            this.$emit('update', { photos: this.photos });
+            this.$emit('update', {photos: this.photos});
         },
 
         proceedFromStep1() {
@@ -1060,7 +1128,7 @@ export default {
                     const ctx = canvas.getContext('2d');
 
                     // Calculate new dimensions
-                    let { width, height } = this.calculateDimensions(
+                    let {width, height} = this.calculateDimensions(
                         img.width,
                         img.height,
                         this.processingOptions.max_width,
@@ -1103,7 +1171,7 @@ export default {
                 height = maxHeight;
             }
 
-            return { width: Math.round(width), height: Math.round(height) };
+            return {width: Math.round(width), height: Math.round(height)};
         },
 
         formatFileSize(bytes) {
@@ -1149,7 +1217,7 @@ export default {
 
             const itemData = {
                 image: this.currentItem,
-                details: { ...this.currentItemDetails },
+                details: {...this.currentItemDetails},
                 saved_at: new Date().toISOString()
             };
 
@@ -1187,7 +1255,7 @@ export default {
                 );
 
                 if (existingItem) {
-                    this.currentItemDetails = { ...existingItem.details };
+                    this.currentItemDetails = {...existingItem.details};
                 } else {
                     this.currentItemDetails = this.getDefaultItemDetails();
                 }
@@ -1199,7 +1267,7 @@ export default {
             const itemIndex = this.availableItems.findIndex(img => img === item.image);
             if (itemIndex >= 0) {
                 this.currentItemIndex = itemIndex;
-                this.currentItemDetails = { ...item.details };
+                this.currentItemDetails = {...item.details};
             }
         },
 
@@ -1267,6 +1335,54 @@ export default {
                     category_breakdown: this.categoryBreakdown
                 }
             });
+        },
+        async uploadFiles(files) {
+            const jobs = files.map(async file => {
+                return await this.stageFile({
+                    file: file,
+                    item_id: this.item_id
+                });
+            });
+            return await Promise.all(jobs);
+        },
+        addFiles(files) {
+            console.log("add files", files);
+            const new_files = files.filter(file => !this.staged_files.find(f => f.hash === file.hash));
+            if (new_files.length === 0) {
+                console.log("no new files");
+                return;
+            }
+            if (!this.create) {
+                this.uploadFiles(new_files).then((uploaded) => {
+                    this.$emit("change", [...this.staged_files, ...uploaded]);
+                })
+            } else {
+                this.$emit("change", [...this.staged_files, ...new_files]);
+            }
+
+        },
+        addExistingFiles(files) {
+            console.log("add existing files", files);
+            const new_files = files.filter(file => !this.staged_files.find(f => f.id === file.id));
+            if (new_files.length === 0) {
+                console.log("no new files");
+                return;
+            }
+            this.$emit("change", [...this.staged_files, ...new_files]);
+        },
+        deleteFile(file) {
+            this.deleteItemFile({item_id: this.item_id, file_id: file.id}).then(() => {
+                this.$emit("change", this.staged_files.filter(f => f.id !== file.id));
+            });
+        },
+        deleteTempFile(file) {
+            this.$emit("change", this.staged_files.filter(f => f.hash !== file.hash));
+        },
+        only_images(files) {
+            return files.filter(file => file.mime_type.startsWith("image/"));
+        },
+        without_images(files) {
+            return files.filter(file => !file.mime_type.startsWith("image/"));
         }
     }
 }
@@ -1348,5 +1464,45 @@ export default {
     border: 2px solid #28a745;
     background: linear-gradient(135deg, #f8fff8 0%, #e8f5e8 100%);
 }
+
+.img-thumbnail {
+    width: 95px;
+    height: 54px;
+    object-fit: cover;
+}
+
+.img-thumbnail svg {
+    width: 100%;
+    height: 100%;
+}
+
+.image-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+}
+
+.invisible-input {
+    display: none;
+}
+
+#file-dropdown:checked ~ .dropdown-menu {
+    display: block;
+}
+
+.dropdown-menu:hover {
+    display: block;
+}
+
+#file-dropdown:checked ~ label {
+    color: #fff;
+    background-color: var(--bs-primary);
+    border-color: var(--bs-primary);
+}
+
+#file-dropdown:checked ~ label:hover {
+    color: var(--bs-primary);
+    background-color: initial;
+}
 </style>
 
diff --git a/frontend/src/components/workflow/workflows/FotoFirstBulkImportWorkflow2.vue b/frontend/src/components/workflow/workflows/FotoFirstBulkImportWorkflow2.vue
new file mode 100644
index 0000000..ed7a100
--- /dev/null
+++ b/frontend/src/components/workflow/workflows/FotoFirstBulkImportWorkflow2.vue
@@ -0,0 +1,1352 @@
+<template>
+    <div class="foto-first-workflow">
+        <!-- Step 1: Photo Capture -->
+        <div v-if="step === '1'" class="foto-first-step-1">
+            <div class="step-header mb-4">
+                <h4 class="mb-2">Photo Capture</h4>
+                <p class="text-muted">Capture or upload item photos to begin the import process.</p>
+            </div>
+
+            <div class="upload-area mb-4">
+                <div class="row">
+                    <!-- Camera Capture -->
+                    <div class="col-md-6 mb-3">
+                        <div class="card h-100">
+                            <div class="card-body text-center">
+                                <b-icon-camera class="text-primary mb-3" style="font-size: 3rem;"></b-icon-camera>
+                                <h6>Camera Capture</h6>
+                                <p class="text-muted small">Use your device camera to capture photos</p>
+                                <button class="btn btn-primary" @click="startCamera" :disabled="loadingCamera">
+                                    <b-icon-camera class="me-1"></b-icon-camera>
+                                    Start Camera
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- File Upload -->
+                    <div class="col-md-6 mb-3">
+                        <div class="card h-100">
+                            <div class="card-body text-center">
+                                <b-icon-upload class="text-success mb-3" style="font-size: 3rem;"></b-icon-upload>
+                                <h6>File Upload</h6>
+                                <p class="text-muted small">Upload photos from your device</p>
+                                <input
+                                    type="file"
+                                    ref="fileInput"
+                                    multiple
+                                    accept="image/*"
+                                    @change="handleFileUpload"
+                                    class="d-none"
+                                />
+                                <button class="btn btn-success" @click="$refs.fileInput.click()" :disabled="loadingCamera">
+                                    <b-icon-upload class="me-1"></b-icon-upload>
+                                    Upload Photos
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Camera Preview -->
+            <div v-if="showCamera" class="camera-section mb-4">
+                <div class="card">
+                    <div class="card-header d-flex justify-content-between align-items-center">
+                        <h6 class="mb-0">Camera Preview</h6>
+                        <button class="btn btn-sm btn-outline-secondary" @click="stopCamera">
+                            <b-icon-x></b-icon-x>
+                        </button>
+                    </div>
+                    <div class="card-body">
+                        <div class="camera-container text-center">
+                            <video ref="video" autoplay muted class="camera-preview mb-3"></video>
+                            <div>
+                                <button class="btn btn-primary me-2" @click="capturePhoto" :disabled="!cameraReady">
+                                    <b-icon-camera class="me-1"></b-icon-camera>
+                                    Capture Photo
+                                </button>
+                                <button class="btn btn-outline-secondary" @click="stopCamera">
+                                    <b-icon-stop class="me-1"></b-icon-stop>
+                                    Stop Camera
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Photo Gallery -->
+            <div v-if="photos.length > 0" class="photo-gallery mb-4">
+                <div class="d-flex justify-content-between align-items-center mb-3">
+                    <h6 class="mb-0">Captured Photos ({{ photos.length }})</h6>
+                    <button class="btn btn-sm btn-outline-danger" @click="clearAllPhotos">
+                        <b-icon-trash class="me-1"></b-icon-trash>
+                        Clear All
+                    </button>
+                </div>
+                <div class="row">
+                    <div v-for="(photo, index) in photos" :key="index" class="col-sm-6 col-md-4 col-lg-3 mb-3">
+                        <div class="card">
+                            <img :src="photo.preview" class="card-img-top photo-thumbnail" :alt="`Photo ${index + 1}`">
+                            <div class="card-body p-2">
+                                <div class="d-flex justify-content-between align-items-center">
+                                    <small class="text-muted">Photo {{ index + 1 }}</small>
+                                    <button class="btn btn-sm btn-outline-danger" @click="removePhoto(index)">
+                                        <b-icon-trash></b-icon-trash>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Navigation -->
+            <div class="step-navigation d-flex justify-content-between">
+                <div></div>
+                <button
+                    class="btn btn-primary"
+                    @click="proceedFromStep1"
+                    :disabled="photos.length === 0 || loadingCamera"
+                >
+                    Next: Process Images
+                    <b-icon-chevron-right class="ms-1"></b-icon-chevron-right>
+                </button>
+            </div>
+        </div>
+
+        <!-- Step 2: Image Processing -->
+        <div v-else-if="step === '2'" class="foto-first-step-2">
+            <div class="step-header mb-4">
+                <h4 class="mb-2">Image Processing</h4>
+                <p class="text-muted">Processing and optimizing your captured images...</p>
+            </div>
+
+            <!-- Processing Status -->
+            <div class="processing-status mb-4">
+                <div class="card">
+                    <div class="card-body">
+                        <div class="d-flex justify-content-between align-items-center mb-3">
+                            <h6 class="mb-0">Processing Progress</h6>
+                            <span class="badge bg-primary">{{ processedCount }}/{{ totalPhotos }}</span>
+                        </div>
+
+                        <div class="progress mb-3" style="height: 12px;">
+                            <div
+                                class="progress-bar progress-bar-striped progress-bar-animated"
+                                :style="{ width: progressPercentage + '%' }"
+                                :class="{ 'bg-success': isComplete, 'bg-primary': !isComplete }"
+                            ></div>
+                        </div>
+
+                        <div class="processing-details">
+                            <div v-if="currentlyProcessing" class="d-flex align-items-center text-muted">
+                                <div class="spinner-border spinner-border-sm me-2" role="status"></div>
+                                <span>Processing: {{ currentlyProcessing }}</span>
+                            </div>
+                            <div v-else-if="isComplete" class="d-flex align-items-center text-success">
+                                <b-icon-check-circle class="me-2"></b-icon-check-circle>
+                                <span>All images processed successfully!</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Processing Options -->
+            <div class="processing-options mb-4">
+                <div class="card">
+                    <div class="card-header">
+                        <h6 class="mb-0">Processing Options</h6>
+                    </div>
+                    <div class="card-body">
+                        <div class="row">
+                            <div class="col-md-6">
+                                <div class="form-check mb-2">
+                                    <input
+                                        class="form-check-input"
+                                        type="checkbox"
+                                        id="autoRotate"
+                                        v-model="processingOptions.auto_rotate"
+                                        :disabled="processing"
+                                    >
+                                    <label class="form-check-label" for="autoRotate">
+                                        Auto-rotate images based on EXIF data
+                                    </label>
+                                </div>
+                                <div class="form-check mb-2">
+                                    <input
+                                        class="form-check-input"
+                                        type="checkbox"
+                                        id="compress"
+                                        v-model="processingOptions.compress"
+                                        :disabled="processing"
+                                    >
+                                    <label class="form-check-label" for="compress">
+                                        Compress images for optimal storage
+                                    </label>
+                                </div>
+                            </div>
+                            <div class="col-md-6">
+                                <div class="mb-3">
+                                    <label class="form-label">Max Width (px)</label>
+                                    <input
+                                        type="number"
+                                        class="form-control"
+                                        v-model.number="processingOptions.max_width"
+                                        :disabled="processing"
+                                        min="480"
+                                        max="4096"
+                                    >
+                                </div>
+                                <div class="mb-3">
+                                    <label class="form-label">Max Height (px)</label>
+                                    <input
+                                        type="number"
+                                        class="form-control"
+                                        v-model.number="processingOptions.max_height"
+                                        :disabled="processing"
+                                        min="480"
+                                        max="4096"
+                                    >
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Processed Images Preview -->
+            <div v-if="processedImages.length > 0" class="processed-images mb-4">
+                <h6 class="mb-3">Processed Images</h6>
+                <div class="row">
+                    <div v-for="(image, index) in processedImages" :key="index" class="col-sm-6 col-md-4 col-lg-3 mb-3">
+                        <div class="card">
+                            <img :src="image.processedUrl" class="card-img-top processed-thumbnail" :alt="`Processed ${index + 1}`">
+                            <div class="card-body p-2">
+                                <div class="d-flex justify-content-between align-items-center mb-1">
+                                    <small class="text-muted">{{ image.name }}</small>
+                                    <span class="badge bg-success">
+                                        <b-icon-check></b-icon-check>
+                                    </span>
+                                </div>
+                                <div class="processing-info">
+                                    <small class="text-muted d-block">
+                                        {{ formatFileSize(image.originalSize) }} → {{ formatFileSize(image.processedSize) }}
+                                    </small>
+                                    <small class="text-success">
+                                        {{ Math.round(((image.originalSize - image.processedSize) / image.originalSize) * 100) }}% reduced
+                                    </small>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Navigation -->
+            <div class="step-navigation d-flex justify-content-between">
+                <button class="btn btn-outline-secondary" @click="$emit('prev')" :disabled="processing">
+                    <b-icon-chevron-left class="me-1"></b-icon-chevron-left>
+                    Previous
+                </button>
+                <div class="d-flex gap-2">
+                    <button
+                        v-if="!processing && !isComplete"
+                        class="btn btn-primary"
+                        @click="startProcessing"
+                    >
+                        <b-icon-gear class="me-1"></b-icon-gear>
+                        Start Processing
+                    </button>
+                    <button
+                        v-if="isComplete"
+                        class="btn btn-success"
+                        @click="proceedFromStep2"
+                    >
+                        Next: Enter Item Details
+                        <b-icon-chevron-right class="ms-1"></b-icon-chevron-right>
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Step 3: Item Details Entry -->
+        <div v-else-if="step === '3'" class="foto-first-step-3">
+            <div class="step-header mb-4">
+                <h4 class="mb-2">Item Details Entry</h4>
+                <p class="text-muted">Enter details for each photographed item to complete the inventory import.</p>
+            </div>
+
+            <!-- Progress Indicator -->
+            <div class="progress-indicator mb-4">
+                <div class="d-flex justify-content-between align-items-center mb-2">
+                    <h6 class="mb-0">Item Progress</h6>
+                    <span class="badge bg-info">{{ currentItemIndex + 1 }} of {{ totalItems }}</span>
+                </div>
+                <div class="progress mb-2" style="height: 8px;">
+                    <div
+                        class="progress-bar bg-info"
+                        :style="{ width: itemProgressPercentage + '%' }"
+                    ></div>
+                </div>
+            </div>
+
+            <!-- Current Item Display -->
+            <div v-if="currentItem" class="current-item mb-4">
+                <div class="row">
+                    <!-- Image Preview -->
+                    <div class="col-md-4">
+                        <div class="card">
+                            <img :src="currentItem.processedUrl || currentItem.preview" class="card-img-top item-image" alt="Current item">
+                            <div class="card-body p-2">
+                                <small class="text-muted">{{ currentItem.name }}</small>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Item Details Form -->
+                    <div class="col-md-8">
+                        <div class="card">
+                            <div class="card-header">
+                                <h6 class="mb-0">Item Details</h6>
+                            </div>
+                            <div class="card-body">
+                                <form @submit.prevent="saveCurrentItem">
+                                    <div class="row">
+                                        <div class="col-md-6 mb-3">
+                                            <label class="form-label">Item Name *</label>
+                                            <input
+                                                type="text"
+                                                class="form-control"
+                                                v-model="currentItemDetails.name"
+                                                required
+                                                placeholder="Enter item name"
+                                            >
+                                        </div>
+                                        <div class="col-md-6 mb-3">
+                                            <label class="form-label">Category</label>
+                                            <select class="form-select" v-model="currentItemDetails.category">
+                                                <option value="">Select category...</option>
+                                                <option value="tools">Tools</option>
+                                                <option value="electronics">Electronics</option>
+                                                <option value="hardware">Hardware</option>
+                                                <option value="materials">Materials</option>
+                                                <option value="other">Other</option>
+                                            </select>
+                                        </div>
+                                    </div>
+
+                                    <div class="row">
+                                        <div class="col-md-4 mb-3">
+                                            <label class="form-label">Quantity</label>
+                                            <input
+                                                type="number"
+                                                class="form-control"
+                                                v-model.number="currentItemDetails.quantity"
+                                                min="1"
+                                                placeholder="1"
+                                            >
+                                        </div>
+                                        <div class="col-md-4 mb-3">
+                                            <label class="form-label">Unit</label>
+                                            <select class="form-select" v-model="currentItemDetails.unit">
+                                                <option value="piece">Piece</option>
+                                                <option value="set">Set</option>
+                                                <option value="box">Box</option>
+                                                <option value="pack">Pack</option>
+                                                <option value="meter">Meter</option>
+                                                <option value="kilogram">Kilogram</option>
+                                            </select>
+                                        </div>
+                                        <div class="col-md-4 mb-3">
+                                            <label class="form-label">Condition</label>
+                                            <select class="form-select" v-model="currentItemDetails.condition">
+                                                <option value="new">New</option>
+                                                <option value="excellent">Excellent</option>
+                                                <option value="good">Good</option>
+                                                <option value="fair">Fair</option>
+                                                <option value="poor">Poor</option>
+                                            </select>
+                                        </div>
+                                    </div>
+
+                                    <div class="mb-3">
+                                        <label class="form-label">Description</label>
+                                        <textarea
+                                            class="form-control"
+                                            rows="3"
+                                            v-model="currentItemDetails.description"
+                                            placeholder="Optional description or notes"
+                                        ></textarea>
+                                    </div>
+
+                                    <div class="mb-3">
+                                        <label class="form-label">Storage Location</label>
+                                        <input
+                                            type="text"
+                                            class="form-control"
+                                            v-model="currentItemDetails.location"
+                                            placeholder="e.g., Shelf A, Drawer 3, etc."
+                                        >
+                                    </div>
+
+                                    <div class="row">
+                                        <div class="col-md-6 mb-3">
+                                            <label class="form-label">Purchase Price</label>
+                                            <div class="input-group">
+                                                <span class="input-group-text">$</span>
+                                                <input
+                                                    type="number"
+                                                    class="form-control"
+                                                    v-model.number="currentItemDetails.purchase_price"
+                                                    step="0.01"
+                                                    min="0"
+                                                    placeholder="0.00"
+                                                >
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6 mb-3">
+                                            <label class="form-label">Estimated Value</label>
+                                            <div class="input-group">
+                                                <span class="input-group-text">$</span>
+                                                <input
+                                                    type="number"
+                                                    class="form-control"
+                                                    v-model.number="currentItemDetails.estimated_value"
+                                                    step="0.01"
+                                                    min="0"
+                                                    placeholder="0.00"
+                                                >
+                                            </div>
+                                        </div>
+                                    </div>
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Item Navigation -->
+            <div class="item-navigation mb-4">
+                <div class="d-flex justify-content-between align-items-center">
+                    <button
+                        class="btn btn-outline-secondary"
+                        @click="previousItem"
+                        :disabled="currentItemIndex === 0"
+                    >
+                        <b-icon-chevron-left class="me-1"></b-icon-chevron-left>
+                        Previous Item
+                    </button>
+
+                    <div class="btn-group">
+                        <button class="btn btn-primary" @click="saveCurrentItem">
+                            <b-icon-check class="me-1"></b-icon-check>
+                            Save Item
+                        </button>
+                        <button class="btn btn-outline-primary" @click="skipCurrentItem">
+                            <b-icon-skip-forward class="me-1"></b-icon-skip-forward>
+                            Skip
+                        </button>
+                    </div>
+
+                    <button
+                        class="btn btn-outline-secondary"
+                        @click="nextItem"
+                        :disabled="currentItemIndex >= totalItems - 1"
+                    >
+                        Next Item
+                        <b-icon-chevron-right class="ms-1"></b-icon-chevron-right>
+                    </button>
+                </div>
+            </div>
+
+            <!-- Completed Items Summary -->
+            <div v-if="completedItems.length > 0" class="completed-items mb-4">
+                <div class="card">
+                    <div class="card-header d-flex justify-content-between align-items-center">
+                        <h6 class="mb-0">Completed Items ({{ completedItems.length }})</h6>
+                        <button class="btn btn-sm btn-outline-info" @click="showCompleted = !showCompleted">
+                            <b-icon-eye v-if="!showCompleted"></b-icon-eye>
+                            <b-icon-eye-slash v-else></b-icon-eye-slash>
+                            {{ showCompleted ? 'Hide' : 'Show' }}
+                        </button>
+                    </div>
+                    <div v-if="showCompleted" class="card-body">
+                        <div class="row">
+                            <div v-for="(item, index) in completedItems" :key="index" class="col-sm-6 col-md-4 col-lg-3 mb-2">
+                                <div class="d-flex align-items-center">
+                                    <img :src="item.image.processedUrl || item.image.preview" class="completed-item-thumb me-2" alt="Item">
+                                    <div class="flex-grow-1">
+                                        <div class="fw-bold small">{{ item.details.name }}</div>
+                                        <div class="text-muted small">{{ item.details.category || 'No category' }}</div>
+                                    </div>
+                                    <button class="btn btn-sm btn-outline-secondary" @click="editItem(index)">
+                                        <b-icon-pencil></b-icon-pencil>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Navigation -->
+            <div class="step-navigation d-flex justify-content-between">
+                <button class="btn btn-outline-secondary" @click="$emit('prev')">
+                    <b-icon-chevron-left class="me-1"></b-icon-chevron-left>
+                    Previous
+                </button>
+                <button
+                    class="btn btn-success"
+                    @click="proceedFromStep3"
+                    :disabled="completedItems.length === 0"
+                >
+                    Next: Complete Import ({{ completedItems.length }} items)
+                    <b-icon-chevron-right class="ms-1"></b-icon-chevron-right>
+                </button>
+            </div>
+        </div>
+
+        <!-- Step 4: Import Completion -->
+        <div v-else-if="step === '4'" class="foto-first-step-4">
+            <div class="step-header mb-4">
+                <h4 class="mb-2">Import Completion</h4>
+                <p class="text-muted">Review and finalize your imported items.</p>
+            </div>
+
+            <!-- Import Summary -->
+            <div class="import-summary mb-4">
+                <div class="row">
+                    <div class="col-md-3 mb-3">
+                        <div class="card text-center">
+                            <div class="card-body">
+                                <h3 class="text-primary mb-2">{{ finalTotalItems }}</h3>
+                                <p class="card-text text-muted mb-0">Items Imported</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-3 mb-3">
+                        <div class="card text-center">
+                            <div class="card-body">
+                                <h3 class="text-success mb-2">{{ categorizedItems }}</h3>
+                                <p class="card-text text-muted mb-0">With Categories</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-3 mb-3">
+                        <div class="card text-center">
+                            <div class="card-body">
+                                <h3 class="text-info mb-2">{{ itemsWithLocation }}</h3>
+                                <p class="card-text text-muted mb-0">With Locations</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-3 mb-3">
+                        <div class="card text-center">
+                            <div class="card-body">
+                                <h3 class="text-warning mb-2">${{ totalValue }}</h3>
+                                <p class="card-text text-muted mb-0">Total Value</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Category Breakdown -->
+            <div class="category-breakdown mb-4">
+                <div class="card">
+                    <div class="card-header">
+                        <h6 class="mb-0">Items by Category</h6>
+                    </div>
+                    <div class="card-body">
+                        <div v-if="Object.keys(categoryBreakdown).length > 0" class="row">
+                            <div v-for="(count, category) in categoryBreakdown" :key="category" class="col-sm-6 col-md-4 col-lg-3 mb-2">
+                                <div class="d-flex justify-content-between align-items-center">
+                                    <span class="text-capitalize">{{ category || 'Uncategorized' }}</span>
+                                    <span class="badge bg-secondary">{{ count }}</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div v-else class="text-muted text-center py-3">
+                            No items to categorize
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Import Options -->
+            <div class="import-options mb-4">
+                <div class="card">
+                    <div class="card-header">
+                        <h6 class="mb-0">Import Options</h6>
+                    </div>
+                    <div class="card-body">
+                        <div class="row">
+                            <div class="col-md-6">
+                                <div class="form-check mb-3">
+                                    <input
+                                        class="form-check-input"
+                                        type="checkbox"
+                                        id="generateQr"
+                                        v-model="importOptions.generate_qr_codes"
+                                    >
+                                    <label class="form-check-label" for="generateQr">
+                                        Generate QR codes for items
+                                    </label>
+                                </div>
+                                <div class="form-check mb-3">
+                                    <input
+                                        class="form-check-input"
+                                        type="checkbox"
+                                        id="sendNotification"
+                                        v-model="importOptions.send_notification"
+                                    >
+                                    <label class="form-check-label" for="sendNotification">
+                                        Send completion notification
+                                    </label>
+                                </div>
+                            </div>
+                            <div class="col-md-6">
+                                <div class="form-check mb-3">
+                                    <input
+                                        class="form-check-input"
+                                        type="checkbox"
+                                        id="createReport"
+                                        v-model="importOptions.create_report"
+                                    >
+                                    <label class="form-check-label" for="createReport">
+                                        Create import report
+                                    </label>
+                                </div>
+                                <div class="form-check mb-3">
+                                    <input
+                                        class="form-check-input"
+                                        type="checkbox"
+                                        id="autoBackup"
+                                        v-model="importOptions.auto_backup"
+                                    >
+                                    <label class="form-check-label" for="autoBackup">
+                                        Auto-backup imported data
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Item List -->
+            <div class="item-list mb-4">
+                <div class="card">
+                    <div class="card-header d-flex justify-content-between align-items-center">
+                        <h6 class="mb-0">Imported Items</h6>
+                        <div class="btn-group btn-group-sm">
+                            <button
+                                class="btn"
+                                :class="viewMode === 'grid' ? 'btn-primary' : 'btn-outline-primary'"
+                                @click="viewMode = 'grid'"
+                            >
+                                <b-icon-grid></b-icon-grid>
+                            </button>
+                            <button
+                                class="btn"
+                                :class="viewMode === 'list' ? 'btn-primary' : 'btn-outline-primary'"
+                                @click="viewMode = 'list'"
+                            >
+                                <b-icon-list></b-icon-list>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="card-body">
+                        <!-- Grid View -->
+                        <div v-if="viewMode === 'grid'" class="row">
+                            <div v-for="(item, index) in completedItems" :key="index" class="col-sm-6 col-md-4 col-lg-3 mb-3">
+                                <div class="card h-100">
+                                    <img :src="item.image.processedUrl || item.image.preview" class="card-img-top item-thumb" :alt="item.details.name">
+                                    <div class="card-body p-2">
+                                        <h6 class="card-title mb-1">{{ item.details.name }}</h6>
+                                        <p class="card-text small text-muted mb-1">{{ item.details.category || 'No category' }}</p>
+                                        <div class="d-flex justify-content-between align-items-center">
+                                            <small class="text-muted">Qty: {{ item.details.quantity }}</small>
+                                            <small v-if="item.details.estimated_value" class="text-success">${{ item.details.estimated_value }}</small>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- List View -->
+                        <div v-else class="table-responsive">
+                            <table class="table table-sm">
+                                <thead>
+                                    <tr>
+                                        <th>Image</th>
+                                        <th>Name</th>
+                                        <th>Category</th>
+                                        <th>Quantity</th>
+                                        <th>Location</th>
+                                        <th>Value</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr v-for="(item, index) in completedItems" :key="index">
+                                        <td>
+                                            <img :src="item.image.processedUrl || item.image.preview" class="list-item-thumb" :alt="item.details.name">
+                                        </td>
+                                        <td class="fw-bold">{{ item.details.name }}</td>
+                                        <td>
+                                            <span v-if="item.details.category" class="badge bg-light text-dark">{{ item.details.category }}</span>
+                                            <span v-else class="text-muted">-</span>
+                                        </td>
+                                        <td>{{ item.details.quantity }} {{ item.details.unit }}</td>
+                                        <td>{{ item.details.location || '-' }}</td>
+                                        <td>
+                                            <span v-if="item.details.estimated_value" class="text-success">${{ item.details.estimated_value }}</span>
+                                            <span v-else class="text-muted">-</span>
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Final Action -->
+            <div class="final-action text-center">
+                <div class="card">
+                    <div class="card-body py-4">
+                        <b-icon-check-circle class="text-success mb-3" style="font-size: 3rem;"></b-icon-check-circle>
+                        <h5 class="mb-3">Ready to Complete Import</h5>
+                        <p class="text-muted mb-4">
+                            All {{ finalTotalItems }} items have been processed and are ready to be added to your inventory.
+                            This action cannot be undone.
+                        </p>
+                        <div class="d-flex justify-content-center gap-3">
+                            <button class="btn btn-outline-secondary" @click="$emit('prev')">
+                                <b-icon-chevron-left class="me-1"></b-icon-chevron-left>
+                                Go Back
+                            </button>
+                            <button
+                                class="btn btn-success btn-lg"
+                                @click="completeImport"
+                                :disabled="importing"
+                            >
+                                <div v-if="importing" class="spinner-border spinner-border-sm me-2" role="status"></div>
+                                <b-icon-check-circle v-else class="me-2"></b-icon-check-circle>
+                                {{ importing ? 'Importing...' : 'Complete Import' }}
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Fallback for unknown steps -->
+        <div v-else class="text-center py-5">
+            <b-icon-gear class="text-muted mb-3" style="font-size: 3rem;"></b-icon-gear>
+            <h5 class="text-muted">Unknown step "{{ step }}"</h5>
+        </div>
+    </div>
+</template>
+
+<script>
+import * as BIcons from "bootstrap-icons-vue";
+
+/**
+ * Foto First Bulk Import Workflow
+ *
+ * This single component implements every step of the 'foto-first-bulk-import'
+ * workflow (photo capture, image processing, item detail entry and import
+ * completion). Keeping the whole workflow in one file avoids splitting
+ * closely related state (photos, processed images, completed items) across
+ * many small step components and their prop/emit boundaries.
+ */
+export default {
+    name: 'FotoFirstBulkImportWorkflow',
+    // Metadata describing this workflow, co-located with its implementation
+    // so there is a single source of truth per workflow type. Consumed by
+    // `@/workflows.js` (via `Component.meta`) to assemble the catalog used
+    // by the Workflows and WorkflowDetail views.
+    meta: {
+        slug: 'foto-first-bulk-import',
+        title: 'Foto First Bulk Import',
+        category: 'Data Management',
+        description: 'Capture unlimited photos via mobile camera or upload images, then sequentially enter details for each item.',
+        icons: ['b-icon-camera', 'b-icon-pencil-square'],
+        estimatedDuration: '10-60 minutes',
+        stepDefinitions: [
+            { step: '1', name: 'Photo Capture', description: 'Capture or upload item photos' },
+            { step: '2', name: 'Image Processing', description: 'Process and optimize images' },
+            { step: '3', name: 'Item Details Entry', description: 'Enter details for each photographed item' },
+            { step: '4', name: 'Import Completion', description: 'Finalize and save imported items' }
+        ],
+        getInitialPayload() {
+            return {
+                photos: [],
+                processing_options: {
+                    auto_rotate: true,
+                    compress: true,
+                    max_width: 1920,
+                    max_height: 1080
+                }
+            };
+        }
+    },
+    components: {
+        ...BIcons
+    },
+    props: {
+        workflowInstance: {
+            type: Object,
+            required: true
+        },
+        step: {
+            type: String,
+            required: true
+        },
+        payload: {
+            type: Object,
+            default: () => ({})
+        }
+    },
+    data() {
+        return {
+            // Step 1: photo capture
+            loadingCamera: false,
+            showCamera: false,
+            cameraReady: false,
+            photos: [],
+            stream: null,
+
+            // Step 2: image processing
+            processing: false,
+            processedCount: 0,
+            currentlyProcessing: null,
+            processedImages: [],
+            processingOptions: {
+                auto_rotate: true,
+                compress: true,
+                max_width: 1920,
+                max_height: 1080
+            },
+
+            // Step 3: item details entry
+            currentItemIndex: 0,
+            currentItemDetails: this.getDefaultItemDetails(),
+            completedItems: [],
+            showCompleted: false,
+
+            // Step 4: completion
+            importing: false,
+            viewMode: 'grid',
+            importOptions: {
+                generate_qr_codes: true,
+                send_notification: true,
+                create_report: true,
+                auto_backup: false
+            }
+        }
+    },
+    computed: {
+        // Step 1/2
+        totalPhotos() {
+            return this.photos.length;
+        },
+        progressPercentage() {
+            return this.totalPhotos > 0 ? (this.processedCount / this.totalPhotos) * 100 : 0;
+        },
+        isComplete() {
+            return this.processedCount === this.totalPhotos && this.totalPhotos > 0;
+        },
+
+        // Step 3
+        availableItems() {
+            return this.processedImages.length > 0 ? this.processedImages : this.photos;
+        },
+        totalItems() {
+            return this.availableItems.length;
+        },
+        currentItem() {
+            return this.availableItems[this.currentItemIndex] || null;
+        },
+        itemProgressPercentage() {
+            return this.totalItems > 0 ? (this.completedItems.length / this.totalItems) * 100 : 0;
+        },
+
+        // Step 4
+        finalTotalItems() {
+            return this.completedItems.length;
+        },
+        categorizedItems() {
+            return this.completedItems.filter(item => item.details.category).length;
+        },
+        itemsWithLocation() {
+            return this.completedItems.filter(item => item.details.location).length;
+        },
+        totalValue() {
+            return this.completedItems.reduce((sum, item) => {
+                return sum + (item.details.estimated_value || 0);
+            }, 0).toFixed(2);
+        },
+        categoryBreakdown() {
+            const breakdown = {};
+            this.completedItems.forEach(item => {
+                const category = item.details.category || 'uncategorized';
+                breakdown[category] = (breakdown[category] || 0) + 1;
+            });
+            return breakdown;
+        }
+    },
+    mounted() {
+        this.loadFromPayload();
+    },
+    beforeUnmount() {
+        this.stopCamera();
+        this.processedImages.forEach(image => {
+            if (image.processedUrl && image.processedUrl.startsWith('blob:')) {
+                URL.revokeObjectURL(image.processedUrl);
+            }
+        });
+    },
+    methods: {
+        loadFromPayload() {
+            if (this.payload.photos) this.photos = [...this.payload.photos];
+            if (this.payload.processing_options) {
+                this.processingOptions = { ...this.processingOptions, ...this.payload.processing_options };
+            }
+            if (this.payload.processed_images) {
+                this.processedImages = [...this.payload.processed_images];
+                this.processedCount = this.processedImages.length;
+            }
+            if (this.payload.completed_items) this.completedItems = [...this.payload.completed_items];
+            if (this.payload.current_item_details) this.currentItemDetails = { ...this.payload.current_item_details };
+            if (this.payload.current_item_index !== undefined) this.currentItemIndex = this.payload.current_item_index;
+            if (this.payload.import_options) this.importOptions = { ...this.importOptions, ...this.payload.import_options };
+        },
+
+        // --- Step 1: Photo capture ---
+        async startCamera() {
+            try {
+                this.loadingCamera = true;
+                this.stream = await navigator.mediaDevices.getUserMedia({
+                    video: { facingMode: 'environment' }
+                });
+                this.$refs.video.srcObject = this.stream;
+                this.showCamera = true;
+                this.cameraReady = true;
+            } catch (error) {
+                console.error('Error accessing camera:', error);
+                alert('Could not access camera. Please check permissions or use file upload instead.');
+            } finally {
+                this.loadingCamera = false;
+            }
+        },
+
+        stopCamera() {
+            if (this.stream) {
+                this.stream.getTracks().forEach(track => track.stop());
+                this.stream = null;
+            }
+            this.showCamera = false;
+            this.cameraReady = false;
+        },
+
+        capturePhoto() {
+            if (!this.cameraReady) return;
+
+            const canvas = document.createElement('canvas');
+            const video = this.$refs.video;
+            canvas.width = video.videoWidth;
+            canvas.height = video.videoHeight;
+
+            const ctx = canvas.getContext('2d');
+            ctx.drawImage(video, 0, 0);
+
+            canvas.toBlob(blob => {
+                const photo = {
+                    file: blob,
+                    preview: URL.createObjectURL(blob),
+                    name: `camera-photo-${Date.now()}.jpg`,
+                    timestamp: new Date().toISOString()
+                };
+                this.photos.push(photo);
+                this.updatePhotosPayload();
+            }, 'image/jpeg', 0.8);
+        },
+
+        handleFileUpload(event) {
+            const files = Array.from(event.target.files);
+            files.forEach(file => {
+                if (file.type.startsWith('image/')) {
+                    const photo = {
+                        file: file,
+                        preview: URL.createObjectURL(file),
+                        name: file.name,
+                        timestamp: new Date().toISOString()
+                    };
+                    this.photos.push(photo);
+                }
+            });
+            this.updatePhotosPayload();
+            event.target.value = '';
+        },
+
+        removePhoto(index) {
+            URL.revokeObjectURL(this.photos[index].preview);
+            this.photos.splice(index, 1);
+            this.updatePhotosPayload();
+        },
+
+        clearAllPhotos() {
+            if (confirm('Are you sure you want to remove all photos?')) {
+                this.photos.forEach(photo => URL.revokeObjectURL(photo.preview));
+                this.photos = [];
+                this.updatePhotosPayload();
+            }
+        },
+
+        updatePhotosPayload() {
+            this.$emit('update', { photos: this.photos });
+        },
+
+        proceedFromStep1() {
+            this.updatePhotosPayload();
+            this.$emit('next');
+        },
+
+        // --- Step 2: Image processing ---
+        async startProcessing() {
+            if (this.photos.length === 0) {
+                alert('No photos to process. Please go back and add photos first.');
+                return;
+            }
+
+            this.processing = true;
+            this.processedCount = 0;
+            this.processedImages = [];
+
+            try {
+                for (let i = 0; i < this.photos.length; i++) {
+                    const photo = this.photos[i];
+                    this.currentlyProcessing = photo.name;
+
+                    const processedImage = await this.processImage(photo);
+                    this.processedImages.push(processedImage);
+                    this.processedCount++;
+
+                    // Small delay to show progress
+                    await new Promise(resolve => setTimeout(resolve, 500));
+                }
+
+                this.currentlyProcessing = null;
+                this.updateProcessingPayload();
+            } catch (error) {
+                console.error('Error processing images:', error);
+                alert('Error processing images. Please try again.');
+            } finally {
+                this.processing = false;
+            }
+        },
+
+        async processImage(photo) {
+            return new Promise((resolve) => {
+                const img = new Image();
+                img.onload = () => {
+                    const canvas = document.createElement('canvas');
+                    const ctx = canvas.getContext('2d');
+
+                    // Calculate new dimensions
+                    let { width, height } = this.calculateDimensions(
+                        img.width,
+                        img.height,
+                        this.processingOptions.max_width,
+                        this.processingOptions.max_height
+                    );
+
+                    canvas.width = width;
+                    canvas.height = height;
+
+                    // Draw and compress
+                    ctx.drawImage(img, 0, 0, width, height);
+
+                    canvas.toBlob(blob => {
+                        const processedImage = {
+                            name: photo.name,
+                            originalSize: photo.file.size,
+                            processedSize: blob.size,
+                            processedUrl: URL.createObjectURL(blob),
+                            processedFile: blob,
+                            timestamp: new Date().toISOString()
+                        };
+                        resolve(processedImage);
+                    }, 'image/jpeg', this.processingOptions.compress ? 0.8 : 0.95);
+                };
+                img.src = photo.preview;
+            });
+        },
+
+        calculateDimensions(originalWidth, originalHeight, maxWidth, maxHeight) {
+            let width = originalWidth;
+            let height = originalHeight;
+
+            if (width > maxWidth) {
+                height = (height * maxWidth) / width;
+                width = maxWidth;
+            }
+
+            if (height > maxHeight) {
+                width = (width * maxHeight) / height;
+                height = maxHeight;
+            }
+
+            return { width: Math.round(width), height: Math.round(height) };
+        },
+
+        formatFileSize(bytes) {
+            if (bytes === 0) return '0 Bytes';
+            const k = 1024;
+            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+            const i = Math.floor(Math.log(bytes) / Math.log(k));
+            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+        },
+
+        updateProcessingPayload() {
+            this.$emit('update', {
+                processing_options: this.processingOptions,
+                processed_images: this.processedImages
+            });
+        },
+
+        proceedFromStep2() {
+            this.updateProcessingPayload();
+            this.$emit('next');
+        },
+
+        // --- Step 3: Item details entry ---
+        getDefaultItemDetails() {
+            return {
+                name: '',
+                category: '',
+                quantity: 1,
+                unit: 'piece',
+                condition: 'good',
+                description: '',
+                location: '',
+                purchase_price: null,
+                estimated_value: null
+            };
+        },
+
+        saveCurrentItem() {
+            if (!this.currentItemDetails.name.trim()) {
+                alert('Please enter an item name before saving.');
+                return;
+            }
+
+            const itemData = {
+                image: this.currentItem,
+                details: { ...this.currentItemDetails },
+                saved_at: new Date().toISOString()
+            };
+
+            const existingIndex = this.completedItems.findIndex(item =>
+                item.image === this.currentItem
+            );
+
+            if (existingIndex >= 0) {
+                this.completedItems.splice(existingIndex, 1, itemData);
+            } else {
+                this.completedItems.push(itemData);
+            }
+
+            this.nextItem();
+            this.updateItemsPayload();
+        },
+
+        skipCurrentItem() {
+            this.nextItem();
+        },
+
+        nextItem() {
+            if (this.currentItemIndex < this.totalItems - 1) {
+                this.currentItemIndex++;
+                this.currentItemDetails = this.getDefaultItemDetails();
+            }
+        },
+
+        previousItem() {
+            if (this.currentItemIndex > 0) {
+                this.currentItemIndex--;
+
+                const existingItem = this.completedItems.find(item =>
+                    item.image === this.currentItem
+                );
+
+                if (existingItem) {
+                    this.currentItemDetails = { ...existingItem.details };
+                } else {
+                    this.currentItemDetails = this.getDefaultItemDetails();
+                }
+            }
+        },
+
+        editItem(index) {
+            const item = this.completedItems[index];
+            const itemIndex = this.availableItems.findIndex(img => img === item.image);
+            if (itemIndex >= 0) {
+                this.currentItemIndex = itemIndex;
+                this.currentItemDetails = { ...item.details };
+            }
+        },
+
+        updateItemsPayload() {
+            this.$emit('update', {
+                completed_items: this.completedItems,
+                current_item_details: this.currentItemDetails,
+                current_item_index: this.currentItemIndex
+            });
+        },
+
+        proceedFromStep3() {
+            if (this.completedItems.length === 0) {
+                alert('Please complete at least one item before proceeding.');
+                return;
+            }
+
+            this.updateItemsPayload();
+            this.$emit('next');
+        },
+
+        // --- Step 4: Completion ---
+        async completeImport() {
+            if (this.finalTotalItems === 0) {
+                alert('No items to import. Please go back and add items.');
+                return;
+            }
+
+            const confirmed = confirm(
+                `Are you sure you want to import ${this.finalTotalItems} items? This action cannot be undone.`
+            );
+
+            if (!confirmed) return;
+
+            try {
+                this.importing = true;
+
+                this.updateFinalPayload();
+
+                // Simulate import process
+                await new Promise(resolve => setTimeout(resolve, 2000));
+
+                this.$emit('update', {
+                    import_completed: true,
+                    completion_timestamp: new Date().toISOString()
+                });
+
+                this.$emit('complete');
+            } catch (error) {
+                console.error('Error completing import:', error);
+                alert('Error completing import. Please try again.');
+            } finally {
+                this.importing = false;
+            }
+        },
+
+        updateFinalPayload() {
+            this.$emit('update', {
+                import_options: this.importOptions,
+                final_summary: {
+                    total_items: this.finalTotalItems,
+                    categorized_items: this.categorizedItems,
+                    items_with_location: this.itemsWithLocation,
+                    total_value: parseFloat(this.totalValue),
+                    category_breakdown: this.categoryBreakdown
+                }
+            });
+        }
+    }
+}
+</script>
+
+<style scoped>
+.camera-preview {
+    max-width: 100%;
+    max-height: 400px;
+    border-radius: 8px;
+}
+
+.photo-thumbnail,
+.item-thumb {
+    height: 150px;
+    object-fit: cover;
+}
+
+.upload-area .card {
+    transition: transform 0.2s ease-in-out;
+}
+
+.upload-area .card:hover {
+    transform: translateY(-2px);
+}
+
+.camera-container {
+    position: relative;
+}
+
+.processed-thumbnail {
+    height: 120px;
+    object-fit: cover;
+}
+
+.processing-info {
+    font-size: 0.75rem;
+}
+
+.progress-bar-animated {
+    animation: progress-bar-stripes 1s linear infinite;
+}
+
+@keyframes progress-bar-stripes {
+    0% {
+        background-position: 1rem 0;
+    }
+    100% {
+        background-position: 0 0;
+    }
+}
+
+.item-image {
+    height: 300px;
+    object-fit: cover;
+}
+
+.completed-item-thumb {
+    width: 40px;
+    height: 40px;
+    object-fit: cover;
+    border-radius: 4px;
+}
+
+.item-navigation {
+    background: #f8f9fa;
+    padding: 1rem;
+    border-radius: 8px;
+}
+
+.list-item-thumb {
+    width: 40px;
+    height: 40px;
+    object-fit: cover;
+    border-radius: 4px;
+}
+
+.final-action .card {
+    border: 2px solid #28a745;
+    background: linear-gradient(135deg, #f8fff8 0%, #e8f5e8 100%);
+}
+</style>
+
diff --git a/frontend/src/components/workflow/workflows/InventoryAuditWorkflow.vue b/frontend/src/components/workflow/workflows/InventoryAuditWorkflow.vue
index 94e7c61..da923e9 100644
--- a/frontend/src/components/workflow/workflows/InventoryAuditWorkflow.vue
+++ b/frontend/src/components/workflow/workflows/InventoryAuditWorkflow.vue
@@ -60,8 +60,8 @@ import * as BIcons from 'bootstrap-icons-vue';
 export default {
     name: 'InventoryAuditWorkflow',
     meta: {
-        id: 'inventory-audit',
-        name: 'Inventory Audit',
+        slug: 'inventory-audit',
+        title: 'Inventory Audit',
         category: 'Inventory Management',
         description: 'Perform a complete audit of your inventory items, checking quantities, locations, and conditions.',
         icons: ['b-icon-list-ul'],
diff --git a/frontend/src/components/workflow/workflows/MaintenanceScheduleWorkflow.vue b/frontend/src/components/workflow/workflows/MaintenanceScheduleWorkflow.vue
index 59ccb8c..b654b77 100644
--- a/frontend/src/components/workflow/workflows/MaintenanceScheduleWorkflow.vue
+++ b/frontend/src/components/workflow/workflows/MaintenanceScheduleWorkflow.vue
@@ -60,8 +60,8 @@ import * as BIcons from 'bootstrap-icons-vue';
 export default {
     name: 'MaintenanceScheduleWorkflow',
     meta: {
-        id: 'maintenance-schedule',
-        name: 'Maintenance Schedule',
+        slug: 'maintenance-schedule',
+        title: 'Maintenance Schedule',
         category: 'Tool Maintenance',
         description: 'Create and execute maintenance schedules for tools and equipment.',
         icons: ['b-icon-tools', 'b-icon-calendar'],
diff --git a/frontend/src/components/workflow/workflows/StorageOptimizationWorkflow.vue b/frontend/src/components/workflow/workflows/StorageOptimizationWorkflow.vue
index 2098299..e47b52a 100644
--- a/frontend/src/components/workflow/workflows/StorageOptimizationWorkflow.vue
+++ b/frontend/src/components/workflow/workflows/StorageOptimizationWorkflow.vue
@@ -60,8 +60,8 @@ import * as BIcons from 'bootstrap-icons-vue';
 export default {
     name: 'StorageOptimizationWorkflow',
     meta: {
-        id: 'storage-optimization',
-        name: 'Storage Optimization',
+        slug: 'storage-optimization',
+        title: 'Storage Optimization',
         category: 'Storage Management',
         description: 'Analyze and reorganize storage locations for maximum efficiency and accessibility.',
         icons: ['b-icon-boxes', 'b-icon-diagram-3', 'b-icon-archive'],
diff --git a/frontend/src/scss/toolshed.scss b/frontend/src/scss/toolshed.scss
index 6342a05..b06de08 100644
--- a/frontend/src/scss/toolshed.scss
+++ b/frontend/src/scss/toolshed.scss
@@ -137,4 +137,41 @@ body {
   background-color: var(--bs-table-bg);
   background-image: linear-gradient(var(--bs-table-accent-bg), var(--bs-table-accent-bg));
   border-bottom-width: 1px !important;
+}
+
+
+@media (min-width: map-get($grid-breakpoints, xl)) {
+  .main.expanded {
+    .col-xl-12-ex {
+      flex: 0 0 100% !important;
+      max-width: 100% !important;
+    }
+
+    .col-xl-9-ex {
+      flex: 0 0 75% !important;
+      max-width: 75% !important;
+    }
+
+    .d-xl-block-ex {
+      display: block !important;
+    }
+  }
+}
+
+@media (min-width: map-get($grid-breakpoints, lg)) {
+  .main.expanded {
+    .col-lg-12-ex {
+      flex: 0 0 100% !important;
+      max-width: 100% !important;
+    }
+
+    .col-lg-9-ex {
+      flex: 0 0 75% !important;
+      max-width: 75% !important;
+    }
+
+    .d-lg-block-ex {
+      display: block !important;
+    }
+  }
 }
\ No newline at end of file
diff --git a/frontend/src/store.js b/frontend/src/store.js
index 6229a08..b55fa5e 100644
--- a/frontend/src/store.js
+++ b/frontend/src/store.js
@@ -488,6 +488,15 @@ export default createStore({
             await servers.delete(getters.signAuth, '/api/item_files/' + item_id + '/' + file_id + '/')
             state.files = state.files.filter(file => file.id !== file_id)
         },
+        async stageFile({state, dispatch, getters}, {lifetime_id, file}) {
+            const servers = await dispatch('getHomeServers')
+            const data = await servers.post(getters.signAuth, '/api/staged_files/' + lifetime_id + '/', file)
+            if (data.name) {
+                data.owner = state.user
+                //state.files.push(data)
+                return data
+            }
+        },
         async fetchTags({state, commit, dispatch, getters}) {
             if (state.last_load.tags > Date.now() - 1000 * 60 * 60 * 24) {
                 return state.tags
diff --git a/frontend/src/views/WorkflowDetail.vue b/frontend/src/views/WorkflowDetail.vue
index 19738a9..d5491bb 100644
--- a/frontend/src/views/WorkflowDetail.vue
+++ b/frontend/src/views/WorkflowDetail.vue
@@ -10,12 +10,11 @@
                                 <li class="breadcrumb-item">
                                     <router-link to="/workflows" class="text-decoration-none">Workflows</router-link>
                                 </li>
-                                <li class="breadcrumb-item active" aria-current="page">{{ workflowDefinition?.name || workflowInstance?.name || 'Loading...' }}</li>
+                                <li class="breadcrumb-item active" aria-current="page">{{ workflowDefinition?.title || workflowInstance?.title || 'Loading...' }}</li>
                             </ol>
                         </nav>
-                        <h1 class="h3 mb-0">{{ workflowDefinition?.name || workflowInstance?.name || 'Workflow Detail' }}</h1>
                     </div>
-                    <div class="btn-group" role="group">
+                    <div class="btn-group breadcrumb" role="group">
                         <button class="btn btn-outline-secondary" @click="$router.go(-1)">
                             <b-icon-arrow-left class="me-1"></b-icon-arrow-left>
                             Back
@@ -43,8 +42,86 @@
 
                 <!-- Workflow Content -->
                 <div v-else-if="workflowInstance" class="row">
+                    <!-- Main Content Area -->
+                    <div class="col-xl-9 col-lg-12 col-lg-9-ex">
+                        <!-- Current Step Content -->
+                        <div class="card">
+                            <div class="card-header d-flex justify-content-between align-items-center">
+                                <div>
+                                    <h5 class="card-title mb-0">
+                                        {{ currentStepDefinition?.name || `Step ${currentStep}` }}
+                                    </h5>
+                                    <small class="text-muted">{{ currentStepDefinition?.description }}</small>
+                                </div>
+                                <div class="step-navigation">
+                                    <button class="btn btn-sm btn-outline-secondary me-1"
+                                            @click="handlePrevStep"
+                                            :disabled="!canNavigatePrev">
+                                        <b-icon-chevron-left></b-icon-chevron-left>
+                                    </button>
+                                    <span class="mx-2 small">{{ currentStepIndex + 1 }} / {{ totalSteps }}</span>
+                                    <button class="btn btn-sm btn-outline-secondary"
+                                            @click="handleNextStep"
+                                            :disabled="!canNavigateNext">
+                                        <b-icon-chevron-right></b-icon-chevron-right>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="card-body">
+                                <!-- Step-specific content based on workflow type and current step -->
+                                <component
+                                    v-if="workflowComponent"
+                                    :is="workflowComponent"
+                                    :workflow-instance="workflowInstance"
+                                    :step="currentStep"
+                                    :payload="workflowInstance.payload"
+                                    @update="handleStepUpdate"
+                                    @next="handleNextStep"
+                                    @prev="handlePrevStep"
+                                    @complete="completeWorkflow"
+                                />
+
+                                <!-- Default step content if no specific component -->
+                                <div v-else class="text-center py-5">
+                                    <b-icon-gear class="text-muted mb-3" style="font-size: 3rem;"></b-icon-gear>
+                                    <h5 class="text-muted">{{ currentStepDefinition?.name || 'Step Content' }}</h5>
+                                    <p class="text-muted">{{ currentStepDefinition?.description || 'This step is in progress.' }}</p>
+
+                                    <!-- Step Navigation Buttons -->
+                                    <div class="mt-4">
+                                        <button v-if="canNavigatePrev"
+                                                class="btn btn-outline-secondary me-2"
+                                                @click="handlePrevStep">
+                                            <b-icon-chevron-left class="me-1"></b-icon-chevron-left>
+                                            Previous
+                                        </button>
+                                        <button v-if="canNavigateNext"
+                                                class="btn btn-primary"
+                                                @click="handleNextStep">
+                                            Next
+                                            <b-icon-chevron-right class="ms-1"></b-icon-chevron-right>
+                                        </button>
+                                        <button v-else-if="currentStepIndex === stepDefinitions.length - 1"
+                                                class="btn btn-success"
+                                                @click="completeWorkflow">
+                                            <b-icon-check-circle class="me-1"></b-icon-check-circle>
+                                            Complete Workflow
+                                        </button>
+                                    </div>
+                                </div>
+
+                                <!-- Debug Info (only in development) -->
+                                <div v-if="true" class="mt-4 border-top pt-3">
+                                    <details>
+                                        <summary class="text-muted small">Debug Info</summary>
+                                        <pre class="small mt-2">{{ JSON.stringify(workflowInstance, null, 2) }}</pre>
+                                    </details>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                     <!-- Workflow Progress Sidebar -->
-                    <div class="col-lg-3 mb-4">
+                    <div class="col-lg-3 mb-4 d-none d-xl-block d-lg-block-ex">
                         <div class="card">
                             <div class="card-header">
                                 <h6 class="card-title mb-0">Progress Overview</h6>
@@ -113,85 +190,6 @@
                             </div>
                         </div>
                     </div>
-
-                    <!-- Main Content Area -->
-                    <div class="col-lg-9">
-                        <!-- Current Step Content -->
-                        <div class="card">
-                            <div class="card-header d-flex justify-content-between align-items-center">
-                                <div>
-                                    <h5 class="card-title mb-0">
-                                        {{ currentStepDefinition?.name || `Step ${currentStep}` }}
-                                    </h5>
-                                    <small class="text-muted">{{ currentStepDefinition?.description }}</small>
-                                </div>
-                                <div class="step-navigation">
-                                    <button class="btn btn-sm btn-outline-secondary me-1"
-                                            @click="handlePrevStep"
-                                            :disabled="!canNavigatePrev">
-                                        <b-icon-chevron-left></b-icon-chevron-left>
-                                    </button>
-                                    <span class="mx-2 small">{{ currentStepIndex + 1 }} / {{ totalSteps }}</span>
-                                    <button class="btn btn-sm btn-outline-secondary"
-                                            @click="handleNextStep"
-                                            :disabled="!canNavigateNext">
-                                        <b-icon-chevron-right></b-icon-chevron-right>
-                                    </button>
-                                </div>
-                            </div>
-                            <div class="card-body">
-                                <!-- Step-specific content based on workflow type and current step -->
-                                <component
-                                    v-if="workflowComponent"
-                                    :is="workflowComponent"
-                                    :workflow-instance="workflowInstance"
-                                    :step="currentStep"
-                                    :payload="workflowInstance.payload"
-                                    @update="handleStepUpdate"
-                                    @next="handleNextStep"
-                                    @prev="handlePrevStep"
-                                    @complete="completeWorkflow"
-                                />
-
-                                <!-- Default step content if no specific component -->
-                                <div v-else class="text-center py-5">
-                                    <b-icon-gear class="text-muted mb-3" style="font-size: 3rem;"></b-icon-gear>
-                                    <h5 class="text-muted">{{ currentStepDefinition?.name || 'Step Content' }}</h5>
-                                    <p class="text-muted">{{ currentStepDefinition?.description || 'This step is in progress.' }}</p>
-
-                                    <!-- Step Navigation Buttons -->
-                                    <div class="mt-4">
-                                        <button v-if="canNavigatePrev"
-                                                class="btn btn-outline-secondary me-2"
-                                                @click="handlePrevStep">
-                                            <b-icon-chevron-left class="me-1"></b-icon-chevron-left>
-                                            Previous
-                                        </button>
-                                        <button v-if="canNavigateNext"
-                                                class="btn btn-primary"
-                                                @click="handleNextStep">
-                                            Next
-                                            <b-icon-chevron-right class="ms-1"></b-icon-chevron-right>
-                                        </button>
-                                        <button v-else-if="currentStepIndex === stepDefinitions.length - 1"
-                                                class="btn btn-success"
-                                                @click="completeWorkflow">
-                                            <b-icon-check-circle class="me-1"></b-icon-check-circle>
-                                            Complete Workflow
-                                        </button>
-                                    </div>
-                                </div>
-
-                                <!-- Debug Info (only in development) -->
-                                <div v-if="$isDevelopment" class="mt-4 border-top pt-3">
-                                    <details>
-                                        <summary class="text-muted small">Debug Info</summary>
-                                        <pre class="small mt-2">{{ JSON.stringify(workflowInstance, null, 2) }}</pre>
-                                    </details>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
                 </div>
             </div>
         </main>
@@ -217,7 +215,7 @@ export default {
         },
         step: {
             type: String,
-            default: "initial"
+            default: "1"
         }
     },
     data() {
@@ -232,13 +230,17 @@ export default {
         ...mapState(['active_workflows']),
 
         currentStep() {
-            return this.step || "initial";
+            return this.step || "1";
         },
 
         workflowDefinition() {
             // `name` doubles as the workflow type identifier (e.g. 'import-items').
-            if (!this.workflowInstance?.name) return null;
-            return getWorkflow(this.workflowInstance.name);
+            if (!this.workflowInstance?.slug) return null;
+            return getWorkflow(this.workflowInstance.slug);
+        },
+
+        getWorkflowDisplayName() {
+            return getWorkflow(this.workflowInstance.slug)?.title;
         },
 
         stepDefinitions() {
@@ -261,7 +263,7 @@ export default {
             // Return the single component implementing the whole workflow, if any,
             // using the workflow component registry. The component itself decides
             // what to render based on the `step` prop it receives.
-            const workflowType = this.workflowInstance?.name;
+            const workflowType = this.workflowInstance?.slug;
             return workflowType ? getWorkflowComponent(workflowType) : null;
         },
 
@@ -506,4 +508,8 @@ export default {
 .step-navigation {
     min-width: 120px;
 }
+
+.btn-group.breadcrumb{
+    padding: calc(0.5rem - 1px) 1rem;
+}
 </style>
diff --git a/frontend/src/views/Workflows.vue b/frontend/src/views/Workflows.vue
index 86406bb..fb9de2c 100644
--- a/frontend/src/views/Workflows.vue
+++ b/frontend/src/views/Workflows.vue
@@ -16,49 +16,51 @@
                                 <div class="table-responsive">
                                     <table class="table table-hover">
                                         <thead>
-                                            <tr>
-                                                <th>Workflow</th>
-                                                <th>Status</th>
-                                                <th>Progress</th>
-                                                <th>Started</th>
-                                                <th>Actions</th>
-                                            </tr>
+                                        <tr>
+                                            <th>Workflow</th>
+                                            <th>Status</th>
+                                            <th>Progress</th>
+                                            <th>Started</th>
+                                            <th>Actions</th>
+                                        </tr>
                                         </thead>
                                         <tbody>
-                                            <tr v-for="workflow in activeWorkflows" :key="workflow.id">
-                                                <td>
-                                                    <strong>{{ getWorkflowDisplayName(workflow) }}</strong>
-                                                    <br>
-                                                    <small class="text-muted">{{ workflow.payload?.workflow_config?.category || 'System' }}</small>
-                                                </td>
-                                                <td>
+                                        <tr v-for="workflow in activeWorkflows" :key="workflow.id">
+                                            <td>
+                                                <strong>{{ getWorkflowDisplayName(workflow) }}</strong>
+                                                <br>
+                                                <small class="text-muted">{{
+                                                        workflow.payload?.workflow_config?.category || 'System'
+                                                    }}</small>
+                                            </td>
+                                            <td>
                                                     <span :class="getStatusBadgeClass(workflow.state)">
                                                         {{ workflow.status_display || workflow.state }}
                                                     </span>
-                                                </td>
-                                                <td>
-                                                    <div class="progress" style="height: 8px;">
-                                                        <div class="progress-bar"
-                                                             :style="{ width: workflow.progress_percentage + '%' }"
-                                                             :class="getProgressBarClass(workflow.state)">
-                                                        </div>
+                                            </td>
+                                            <td>
+                                                <div class="progress" style="height: 8px;">
+                                                    <div class="progress-bar"
+                                                         :style="{ width: workflow.progress_percentage + '%' }"
+                                                         :class="getProgressBarClass(workflow.state)">
                                                     </div>
-                                                    <small class="text-muted">{{ workflow.progress_percentage }}%</small>
-                                                </td>
-                                                <td>{{ formatDate(workflow.started_at) }}</td>
-                                                <td>
-                                                    <button class="btn btn-sm btn-outline-primary me-1"
-                                                            @click="viewWorkflowDetails(workflow)"
-                                                            :disabled="loading">
-                                                        <b-icon-eye></b-icon-eye>
-                                                    </button>
-                                                    <button class="btn btn-sm btn-outline-danger"
-                                                            @click="abortWorkflowInstance(workflow)"
-                                                            :disabled="loading">
-                                                        <b-icon-x-circle></b-icon-x-circle>
-                                                    </button>
-                                                </td>
-                                            </tr>
+                                                </div>
+                                                <small class="text-muted">{{ workflow.progress_percentage }}%</small>
+                                            </td>
+                                            <td>{{ formatDate(workflow.started_at) }}</td>
+                                            <td>
+                                                <button class="btn btn-sm btn-outline-primary me-1"
+                                                        @click="viewWorkflowDetails(workflow)"
+                                                        :disabled="loading">
+                                                    <b-icon-eye></b-icon-eye>
+                                                </button>
+                                                <button class="btn btn-sm btn-outline-danger"
+                                                        @click="abortWorkflowInstance(workflow)"
+                                                        :disabled="loading">
+                                                    <b-icon-x-circle></b-icon-x-circle>
+                                                </button>
+                                            </td>
+                                        </tr>
                                         </tbody>
                                     </table>
                                 </div>
@@ -77,21 +79,25 @@
                             </div>
                             <div class="card-body">
                                 <div class="row">
-                                    <div v-for="workflow in availableWorkflows" :key="workflow.id" class="col-lg-4 col-md-6 mb-3">
+                                    <div v-for="workflow in availableWorkflows" :key="workflow.id"
+                                         class="col-lg-4 col-md-6 mb-3">
                                         <div class="card h-100 workflow-card">
                                             <div class="card-body d-flex flex-column">
                                                 <div class="d-flex align-items-center mb-3">
                                                     <template v-for="(icon, index) in workflow.icons" :key="icon">
                                                         <div class="workflow-icon me-3">
-                                                            <component :is="icon" class="text-primary" style="font-size: 1.5rem;"></component>
+                                                            <component :is="icon" class="text-primary"
+                                                                       style="font-size: 1.5rem;"></component>
                                                         </div>
                                                         <!-- Add arrow between icons, but not after the last one -->
-                                                        <div v-if="index < workflow.icons.length - 1" class="workflow-arrow me-3">
-                                                            <b-icon-arrow-right class="text-muted" style="font-size: 1rem;"></b-icon-arrow-right>
+                                                        <div v-if="index < workflow.icons.length - 1"
+                                                             class="workflow-arrow me-3">
+                                                            <b-icon-arrow-right class="text-muted"
+                                                                                style="font-size: 1rem;"></b-icon-arrow-right>
                                                         </div>
                                                     </template>
                                                     <div class="workflow-header">
-                                                        <h6 class="card-title mb-1">{{ workflow.name }}</h6>
+                                                        <h6 class="card-title mb-1">{{ workflow.title }}</h6>
                                                         <small class="text-muted">{{ workflow.category }}</small>
                                                     </div>
                                                 </div>
@@ -105,10 +111,9 @@
                                                         <span class="badge bg-light text-dark">{{ workflow.steps }} steps</span>
                                                     </div>
                                                     <button class="btn btn-primary w-100"
-                                                            @click="startWorkflow(workflow)"
-                                                            :disabled="isWorkflowRunning(workflow.id)">
+                                                            @click="startWorkflow(workflow)">
                                                         <b-icon-play-fill class="me-1"></b-icon-play-fill>
-                                                        {{ isWorkflowRunning(workflow.id) ? 'Running...' : 'Start Workflow' }}
+                                                        Start Workflow
                                                     </button>
                                                 </div>
                                             </div>
@@ -127,8 +132,8 @@
 <script>
 import * as BIcons from "bootstrap-icons-vue";
 import BaseLayout from "@/components/BaseLayout.vue";
-import { mapState, mapActions } from 'vuex';
-import { getAllWorkflows, getWorkflow, buildWorkflowApiPayload } from '@/workflows.js';
+import {mapState, mapActions} from 'vuex';
+import {getAllWorkflows, getWorkflow, buildWorkflowApiPayload} from '@/workflows.js';
 
 export default {
     name: 'Workflows',
@@ -213,15 +218,8 @@ export default {
                 minute: '2-digit'
             }).format(date);
         },
-        isWorkflowRunning(workflowId) {
-            return this.activeWorkflows.some(active =>
-                active.name === workflowId &&
-                active.state === 'running'
-            );
-        },
         getWorkflowDisplayName(workflow) {
-            // `name` doubles as the workflow type identifier (e.g. 'import-items').
-            return getWorkflow(workflow.name)?.name || workflow.name;
+            return getWorkflow(workflow.slug)?.title;
         },
         async startWorkflow(workflow) {
             try {
@@ -232,11 +230,10 @@ export default {
                 const workflowData = buildWorkflowApiPayload(workflow);
 
                 const newWorkflow = await this.createWorkflow(workflowData);
-                console.log('Workflow started successfully:', newWorkflow);
 
                 // Immediately navigate to the workflow detail view
                 // Get the first step from the workflow definition
-                const firstStep = workflow.stepDefinitions?.[0]?.step || "initial";
+                const firstStep = workflow.stepDefinitions?.[0]?.step || 1;
                 this.$router.push({
                     name: 'workflow-detail',
                     params: {
@@ -257,9 +254,9 @@ export default {
             // Navigate to the workflow detail view
             // Use the workflow's current step if available, otherwise use the first step
             const currentStep = workflow.current_step ||
-                                workflow.payload?.current_step ||
-                                getWorkflow(workflow.name)?.stepDefinitions?.[0]?.step ||
-                                "initial";
+                workflow.payload?.current_step ||
+                getWorkflow(workflow.name)?.stepDefinitions?.[0]?.step ||
+                "initial";
 
             this.$router.push({
                 name: 'workflow-detail',
diff --git a/frontend/src/workflows.js b/frontend/src/workflows.js
index c1ae90b..2164420 100644
--- a/frontend/src/workflows.js
+++ b/frontend/src/workflows.js
@@ -24,23 +24,20 @@ import StorageOptimizationWorkflow from '@/components/workflow/workflows/Storage
 import MaintenanceScheduleWorkflow from '@/components/workflow/workflows/MaintenanceScheduleWorkflow.vue';
 import ExpiryCheckWorkflow from '@/components/workflow/workflows/ExpiryCheckWorkflow.vue';
 import BackupRestoreWorkflow from '@/components/workflow/workflows/BackupRestoreWorkflow.vue';
+
 /**
  * Workflows with a fully co-located component + metadata.
  */
-const implementedWorkflows = [
-    { ...FotoFirstBulkImportWorkflow.meta, component: FotoFirstBulkImportWorkflow },
-    { ...BulkItemImportWorkflow.meta, component: BulkItemImportWorkflow },
-    { ...InventoryAuditWorkflow.meta, component: InventoryAuditWorkflow },
-    { ...StorageOptimizationWorkflow.meta, component: StorageOptimizationWorkflow },
-    { ...MaintenanceScheduleWorkflow.meta, component: MaintenanceScheduleWorkflow },
-    { ...ExpiryCheckWorkflow.meta, component: ExpiryCheckWorkflow },
-    { ...BackupRestoreWorkflow.meta, component: BackupRestoreWorkflow },
+const workflows = [
+    {...FotoFirstBulkImportWorkflow.meta, component: FotoFirstBulkImportWorkflow},
+    {...BulkItemImportWorkflow.meta, component: BulkItemImportWorkflow},
+    {...InventoryAuditWorkflow.meta, component: InventoryAuditWorkflow},
+    {...StorageOptimizationWorkflow.meta, component: StorageOptimizationWorkflow},
+    {...MaintenanceScheduleWorkflow.meta, component: MaintenanceScheduleWorkflow},
+    {...ExpiryCheckWorkflow.meta, component: ExpiryCheckWorkflow},
+    {...BackupRestoreWorkflow.meta, component: BackupRestoreWorkflow},
 ];
-/**
- * The full workflow catalog: every workflow type known to the frontend,
- * whether it has a custom UI or not.
- */
-const workflows = implementedWorkflows;
+
 /**
  * Get every workflow in the catalog.
  * @returns {Array<Object>}
@@ -48,14 +45,16 @@ const workflows = implementedWorkflows;
 export function getAllWorkflows() {
     return workflows;
 }
+
 /**
  * Get a single workflow definition by id.
  * @param {string} id
  * @returns {Object|undefined}
  */
-export function getWorkflow(id) {
-    return workflows.find(workflow => workflow.id === id);
+export function getWorkflow(slug) {
+    return workflows.find(workflow => workflow.slug === slug);
 }
+
 /**
  * Get the Vue component implementing a workflow's UI, if any.
  * @param {string} id
@@ -64,6 +63,7 @@ export function getWorkflow(id) {
 export function getWorkflowComponent(id) {
     return getWorkflow(id)?.component || null;
 }
+
 /**
  * Get all workflows belonging to a category.
  * @param {string} category
@@ -72,6 +72,7 @@ export function getWorkflowComponent(id) {
 export function getWorkflowsByCategory(category) {
     return workflows.filter(workflow => workflow.category === category);
 }
+
 /**
  * Get all unique categories present in the catalog.
  * @returns {Array<string>}
@@ -79,6 +80,7 @@ export function getWorkflowsByCategory(category) {
 export function getWorkflowCategories() {
     return [...new Set(workflows.map(workflow => workflow.category))];
 }
+
 /**
  * Build the payload sent to the backend to start a new instance of a
  * workflow, merging the common `workflow_config` metadata block with the
@@ -89,31 +91,28 @@ export function getWorkflowCategories() {
 export function buildWorkflowApiPayload(workflow) {
     const ownPayload = workflow.getInitialPayload ? workflow.getInitialPayload() : {};
     return {
-        name: workflow.name,
-        workflow_type: workflow.id,
+        title: workflow.title,
+        slug: workflow.slug,
         state: 'running',
         current_step: 1,
         total_steps: workflow.stepDefinitions.length,
         payload: {
-            workflow_config: {
-                name: workflow.name,
-                description: workflow.description,
-                category: workflow.category,
-                estimated_duration: workflow.estimatedDuration
-            },
             ...ownPayload
         }
     };
 }
+
 /**
  * The backend stores WorkflowInstance.payload as an opaque string - it never
  * parses or understands it as JSON. The frontend is fully responsible for
  * serializing it before sending and deserializing it after receiving.
  */
 export function serializeWorkflowPayload(workflow) {
+    console.log(workflow);
     if (!workflow || !('payload' in workflow)) return workflow;
     return {...workflow, payload: JSON.stringify(workflow.payload ?? {})};
 }
+
 export function deserializeWorkflowPayload(workflow) {
     if (!workflow) return workflow;
     let payload = {};
@@ -124,6 +123,7 @@ export function deserializeWorkflowPayload(workflow) {
     }
     return {...workflow, payload};
 }
+
 export default {
     getAllWorkflows,
     getWorkflow,
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 3524dae..de079f1 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -21,9 +21,9 @@ export default defineConfig({
             'Access-Control-Max-Age': '86400',
             //'Upgrade-Insecure-Requests': '1',
             'Content-Security-Policy': 'default-src \'self\';'
-                + ' script-src \'self\' \'wasm-unsafe-eval\' \'unsafe-eval\';'
+                + ' script-src \'self\' \'wasm-unsafe-eval\' \'unsafe-eval\' \'unsafe-inline\';'
                 + ' style-src \'self\' \'unsafe-inline\';'
-                + ' img-src \'self\' * data:;'
+                + ' img-src \'self\' * data: blob:;'
                 + ' connect-src * data:',
         },
     },