stash

backend/toolshed/admin.py

@@ -1,11 +1,11 @@
 from django.contrib import admin
 
-from toolshed.models import InventoryItem, Property, Tag, Category
+from toolshed.models import InventoryItem, Property, Tag, Category, StorageLocation, WorkflowInstance
 
 
 class InventoryItemAdmin(admin.ModelAdmin):
-    list_display = ('name', 'description', 'category', 'availability_policy', 'owned_quantity', 'owner')
+    list_display = ('name', 'description', 'category', 'availability_policy', 'owned_quantity', 'owner', 'storage_location')
-    search_fields = ('name', 'description', 'category', 'availability_policy', 'owned_quantity', 'owner')
+    search_fields = ('name', 'description', 'category__name', 'availability_policy', 'owner__username', 'storage_location__name')
 
 
 admin.site.register(InventoryItem, InventoryItemAdmin)
@@ -13,7 +13,7 @@ admin.site.register(InventoryItem, InventoryItemAdmin)
 
 class PropertyAdmin(admin.ModelAdmin):
     list_display = ('name', 'description', 'category', 'unit_symbol', 'base2_prefix', 'dimensions', 'origin')
-    search_fields = ('name', 'description', 'category', 'unit_symbol', 'base2_prefix', 'dimensions', 'origin')
+    search_fields = ('name', 'description', 'category__name', 'unit_symbol', 'origin')
 
 
 admin.site.register(Property, PropertyAdmin)
@@ -21,7 +21,7 @@ admin.site.register(Property, PropertyAdmin)
 
 class TagAdmin(admin.ModelAdmin):
     list_display = ('name', 'description', 'category', 'origin')
-    search_fields = ('name', 'description', 'category', 'origin')
+    search_fields = ('name', 'description', 'category__name', 'origin')
 
 
 admin.site.register(Tag, TagAdmin)
@@ -29,7 +29,16 @@ admin.site.register(Tag, TagAdmin)
 
 class CategoryAdmin(admin.ModelAdmin):
     list_display = ('name', 'description', 'parent', 'origin')
-    search_fields = ('name', 'description', 'parent', 'origin')
+    search_fields = ('name', 'description', 'parent__name', 'origin')
 
 
 admin.site.register(Category, CategoryAdmin)
+
+
+class StorageLocationAdmin(admin.ModelAdmin):
+    list_display = ('name', 'description', 'category', 'parent', 'owner')
+    search_fields = ('name', 'description', 'category__name', 'parent__name', 'owner__username')
+    list_filter = ('category', 'owner')
+
+
+admin.site.register(StorageLocation, StorageLocationAdmin)

backend/toolshed/api/inventory.py

@@ -72,6 +72,19 @@ class StorageLocationViewSet(viewsets.ModelViewSet):
             return StorageLocation.objects.filter(owner=self.request.user.user.get())
         return StorageLocation.objects.none()
 
+    def perform_create(self, serializer):
+        with transaction.atomic():
+            serializer.save(owner=self.request.user.user.get())
+
+    def perform_update(self, serializer):
+        with transaction.atomic():
+            if serializer.instance.owner == self.request.user.user.get():
+                serializer.save()
+
+    def perform_destroy(self, instance):
+        if instance.owner == self.request.user.user.get():
+            instance.delete()
+
 
 router.register(r'inventory_items', InventoryItemViewSet, basename='inventory_items')
 router.register(r'storage_locations', StorageLocationViewSet, basename='storage_locations')

backend/toolshed/models.py

@@ -1,5 +1,5 @@
 from django.db import models
-from django.core.validators import MinValueValidator
+from django.core.validators import MinValueValidator, MaxValueValidator
 from django_softdelete.models import SoftDeleteModel
 from rest_framework.exceptions import ValidationError
 

backend/toolshed/serializers.py

@@ -50,12 +50,12 @@ class CategorySerializer(serializers.ModelSerializer):
 
 class StorageLocationSerializer(serializers.ModelSerializer):
     owner = OwnerSerializer(read_only=True)
-    category = CategorySerializer(required=False, allow_null=True)
+    category = serializers.CharField(required=False, allow_null=True, allow_blank=True)
     path = serializers.SerializerMethodField()
 
     class Meta:
         model = StorageLocation
-        fields = ['id', 'name', 'description', 'path', 'category', 'owner']
+        fields = ['id', 'name', 'description', 'path', 'category', 'owner', 'parent']
         read_only_fields = ['path']
 
     @staticmethod

frontend/src/components/Sidebar.vue

@@ -15,6 +15,18 @@
                         <span class="align-middle">Inventory</span>
                     </router-link>
                 </li>
+                <li class="sidebar-item">
+                    <router-link to="/storage-location" class="sidebar-link">
+                        <b-icon-boxes class="bi-valign-middle"></b-icon-boxes>
+                        <span class="align-middle">Storage Locations</span>
+                    </router-link>
+                </li>
+                <li class="sidebar-item">
+                    <router-link to="/workflows" class="sidebar-link">
+                        <b-icon-diagram3 class="bi-valign-middle"></b-icon-diagram3>
+                        <span class="align-middle">Workflows</span>
+                    </router-link>
+                </li>
                 <li class="sidebar-item">
                     <router-link to="/friends" class="sidebar-link">
                         <b-icon-people class="bi-valign-middle"></b-icon-people>

frontend/src/router.js

@@ -12,9 +12,14 @@ import Search from '@/views/Search.vue';
 import InventoryDetail from '@/views/InventoryDetail.vue';
 import InventoryNew from '@/views/InventoryNew.vue';
 import InventoryEdit from '@/views/InventoryEdit.vue';
+import StorageLocation from '@/views/StorageLocation.vue';
+import StorageLocationDetail from '@/views/StorageLocationDetail.vue';
+import StorageLocationNew from '@/views/StorageLocationNew.vue';
+import StorageLocationEdit from '@/views/StorageLocationEdit.vue';
 import Admin from '@/views/Admin.vue';
 import Swatch from '@/views/Swatch.vue';
 import Files from '@/views/Files.vue';
+import Workflows from '@/views/Workflows.vue';
 
 import Account from '@/views/settings/Account.vue';
 import Password from '@/views/settings/Password.vue';
@@ -43,6 +48,10 @@ const routes = [{path: '/', component: Dashboard, meta: {requiresAuth: true}}, {
     component: Friends,
     meta: {requiresAuth: true}
 }, {path: '/files', component: Files, meta: {requiresAuth: true}}, {
+    path: '/workflows',
+    component: Workflows,
+    meta: {requiresAuth: true}
+}, {
     path: '/admin',
     component: Admin,
     meta: {requiresAuth: true}
@@ -73,6 +82,24 @@ const routes = [{path: '/', component: Dashboard, meta: {requiresAuth: true}}, {
     }, {
         path: 'data/', name: 'data', component: Data, meta: {requiresAuth: true}
     }]
+}, {
+    path: '/storage-location',
+    component: StorageLocation,
+    meta: {requiresAuth: true}
+}, {
+    path: '/storage-locations/:id',
+    component: StorageLocationDetail,
+    meta: {requiresAuth: true},
+    props: true
+}, {
+    path: '/storage-locations/:id/edit',
+    component: StorageLocationEdit,
+    meta: {requiresAuth: true},
+    props: true
+}, {
+    path: '/storage-locations/new',
+    component: StorageLocationNew,
+    meta: {requiresAuth: true}
 }, {path: '/:pathMatch(.*)*', redirect: '/'}]
 
 const router = createRouter({

frontend/src/store.js

@@ -30,6 +30,7 @@ export default createStore({
         availability_policies: [],
         domains: [],
         storage_locations: [],
+        active_workflows: [],
     },
     mutations: {
         setInventoryItems(state, {url, items}) {
@@ -65,6 +66,9 @@ export default createStore({
         setFiles(state, files) {
             state.files = files;
         },
+        setActiveWorkflows(state, workflows) {
+            state.active_workflows = workflows;
+        },
         setUser(state, user) {
             state.user = user;
             if (state.remember)
@@ -351,6 +355,28 @@ export default createStore({
             state.last_load.storage_locations = Date.now()
             return data
         },
+        async deleteStorageLocation({state, dispatch, getters}, location) {
+            const servers = await dispatch('getHomeServers')
+            const ret = await servers.delete(getters.signAuth, '/api/storage_locations/' + location.id + '/')
+            dispatch('fetchStorageLocations')
+            return ret
+        },
+        async createStorageLocation({state, dispatch, getters}, location) {
+            const servers = await dispatch('getHomeServers')
+            const data = {...location}
+            if (data.parent === '') data.parent = null
+            const reply = await servers.post(getters.signAuth, '/api/storage_locations/', data)
+            state.last_load.storage_locations = 0
+            return reply
+        },
+        async updateStorageLocation({state, dispatch, getters}, location) {
+            const servers = await dispatch('getHomeServers')
+            const data = {...location}
+            if (data.parent === '') data.parent = null
+            const reply = await servers.patch(getters.signAuth, '/api/storage_locations/' + location.id + '/', data)
+            dispatch('fetchStorageLocations')
+            return reply
+        },
         async fetchInfo({state, commit, dispatch, getters}) {
             const last_load_info = Math.min(
                 state.last_load.tags,
@@ -378,6 +404,72 @@ export default createStore({
         },
         async userIdentityRecord({state}, {password}) {
             return await serializeIdentityRecord(state.user, state.keypair, password);
+        },
+        // Workflow actions
+        async fetchWorkflows({state, commit, dispatch, getters}) {
+            if (state.last_load.workflows > Date.now() - 1000 * 60 * 5) { // Cache for 5 minutes
+                return state.workflows
+            }
+            const servers = await dispatch('getHomeServers')
+            const data = await servers.get(getters.signAuth, '/api/workflows/')
+            commit('setWorkflows', data)
+            state.last_load.workflows = Date.now()
+            return data
+        },
+        async fetchActiveWorkflows({state, commit, dispatch, getters}) {
+            if (state.last_load.active_workflows > Date.now() - 1000 * 60 * 5) { // Cache for 5 minutes
+                return state.active_workflows
+            }
+            const servers = await dispatch('getHomeServers')
+            const data = await servers.get(getters.signAuth, '/api/workflows/active/')
+            commit('setActiveWorkflows', data)
+            state.last_load.active_workflows = Date.now()
+            return data
+        },
+        async createWorkflow({state, commit, dispatch, getters}, workflowData) {
+            const servers = await dispatch('getHomeServers')
+            const data = await servers.post(getters.signAuth, '/api/workflows/', workflowData)
+            state.last_load.active_workflows = 0 // Invalidate cache
+            return data
+        },
+        async updateWorkflow({state, commit, dispatch, getters}, workflow) {
+            const servers = await dispatch('getHomeServers')
+            const data = await servers.patch(getters.signAuth, '/api/workflows/' + workflow.id + '/', workflow)
+            state.last_load.active_workflows = 0 // Invalidate cache
+            return data
+        },
+        async updateWorkflowStep({state, commit, dispatch, getters}, {workflowId, currentStep, payload}) {
+            const servers = await dispatch('getHomeServers')
+            const data = await servers.post(getters.signAuth, '/api/workflows/' + workflowId + '/update_step/', {
+                current_step: currentStep,
+                payload: payload
+            })
+            state.last_load.active_workflows = 0 // Invalidate cache
+            return data
+        },
+        async pauseWorkflow({state, commit, dispatch, getters}, workflowId) {
+            const servers = await dispatch('getHomeServers')
+            const data = await servers.post(getters.signAuth, '/api/workflows/' + workflowId + '/pause/')
+            state.last_load.active_workflows = 0 // Invalidate cache
+            return data
+        },
+        async resumeWorkflow({state, commit, dispatch, getters}, workflowId) {
+            const servers = await dispatch('getHomeServers')
+            const data = await servers.post(getters.signAuth, '/api/workflows/' + workflowId + '/resume/')
+            state.last_load.active_workflows = 0 // Invalidate cache
+            return data
+        },
+        async cancelWorkflow({state, commit, dispatch, getters}, workflowId) {
+            const servers = await dispatch('getHomeServers')
+            const data = await servers.post(getters.signAuth, '/api/workflows/' + workflowId + '/cancel/')
+            state.last_load.active_workflows = 0 // Invalidate cache
+            return data
+        },
+        async deleteWorkflow({state, commit, dispatch, getters}, workflowId) {
+            const servers = await dispatch('getHomeServers')
+            await servers.delete(getters.signAuth, '/api/workflows/' + workflowId + '/')
+            state.last_load.active_workflows = 0 // Invalidate cache
+            return true
         }
     },
     getters: {

frontend/src/views/InventoryEdit.vue

@@ -39,6 +39,17 @@
                                     </option>
                                 </select>
                             </div>
+                            <div class="mb-3">
+                                <label for="storage_location" class="form-label">Storage Location</label>
+                                <select class="form-select" id="storage_location" name="storage_location"
+                                        v-model="item.storage_location">
+                                    <option value="">No storage location</option>
+                                    <option v-for="location in storage_locations" :value="location.id"
+                                            :key="location.id">
+                                        {{ location.path }}
+                                    </option>
+                                </select>
+                            </div>
                             <div class="mb-3">
                                 <label for="image" class="form-label">Image</label>
                                 <combined-file-field :item_files="item.files" :item_id="item.id"
@@ -82,7 +93,7 @@ export default {
     },
     computed: {
         ...mapGetters(["inventory_items"]),
-        ...mapState(["availability_policies"]),
+        ...mapState(["availability_policies", "storage_locations"]),
         item() {
             return {
                 tags: [],

frontend/src/views/InventoryNew.vue

@@ -39,6 +39,17 @@
                                     </option>
                                 </select>
                             </div>
+                            <div class="mb-3">
+                                <label for="storage_location" class="form-label">Storage Location</label>
+                                <select class="form-select" id="storage_location" name="storage_location"
+                                        v-model="item.storage_location_id">
+                                    <option value="">No storage location</option>
+                                    <option v-for="location in storage_locations" :value="location.id"
+                                            :key="location.id">
+                                        {{ location.path }}
+                                    </option>
+                                </select>
+                            </div>
                             <div class="mb-3">
                                 <label for="image" class="form-label">Image</label>
                                 <combined-file-field :item_files="item.files" create
@@ -92,7 +103,7 @@ export default {
         ...mapActions(['createInventoryItem', 'fetchInfo'])
     },
     computed: {
-        ...mapState(["availability_policies"]),
+        ...mapState(["availability_policies", "storage_locations"]),
     },
     async mounted() {
         await this.fetchInfo();

frontend/src/views/StorageLocation.vue

@@ -0,0 +1,134 @@
+<template>
+    <BaseLayout>
+        <main class="content">
+            <div class="container-fluid p-0">
+                <h1 class="h3 mb-3">Storage Locations</h1>
+                <div class="row">
+                    <div class="col-12 col-xl-12">
+                        <div class="card">
+                            <div class="card-header">
+                                <h5 class="card-title">{{ user }}'s Storage Locations</h5>
+                                <button v-if="layout === 'grid'" @click="layout = 'table'" class="btn">
+                                    <b-icon-list></b-icon-list>
+                                </button>
+                                <button v-else @click="layout = 'grid'" class="btn">
+                                    <b-icon-grid></b-icon-grid>
+                                </button>
+                            </div>
+                            <table class="table table-striped" v-if="layout === 'table'">
+                                <thead>
+                                <tr>
+                                    <th style="width:40%;">Name</th>
+                                    <th style="width:25%">Path</th>
+                                    <th class="d-none d-md-table-cell" style="width:25%">Category</th>
+                                    <th>Actions</th>
+                                </tr>
+                                </thead>
+                                <tbody>
+                                <tr v-for="location in storage_locations" :key="location.id">
+                                    <td>
+                                        <router-link :to="`/storage-locations/${location.id}`">{{ location.name }}</router-link>
+                                    </td>
+                                    <td class="d-none d-md-table-cell">
+                                        <span class="text-muted">{{ location.path }}</span>
+                                    </td>
+                                    <td class="d-none d-md-table-cell">
+                                        <span class="badge bg-info text-white" v-if="location.category">{{ location.category }}</span>
+                                        <span class="text-muted" v-else>-</span>
+                                    </td>
+                                    <td class="table-action">
+                                        <router-link :to="`/storage-locations/${location.id}/edit`">
+                                            <b-icon-pencil-square></b-icon-pencil-square>
+                                        </router-link>
+                                        <a :href="`/storage-locations/${location.id}/delete`" @click.prevent="deleteStorageLocation(location)">
+                                            <b-icon-trash></b-icon-trash>
+                                        </a>
+                                    </td>
+                                </tr>
+                                </tbody>
+                            </table>
+                            <div class="card-body" v-else>
+                                <div class="row">
+                                    <div class="col-12 col-md-4 col-lg-3 col-xl-2" v-for="location in storage_locations"
+                                         :key="location.id">
+                                        <div class="card">
+                                            <div class="card-body">
+                                                <h5 class="card-title mb-0">
+                                                    <router-link :to="`/storage-locations/${location.id}`">
+                                                        {{ location.name }}
+                                                    </router-link>
+                                                </h5>
+                                                <div class="card-text text-black-50">
+                                                    <small class="text-muted d-block">{{ location.path }}</small>
+                                                    <span class="badge bg-info text-white" v-if="location.category">{{ location.category }}</span>
+                                                </div>
+                                                <div class="card-text" v-if="location.description">
+                                                    <small>{{ location.description }}</small>
+                                                </div>
+                                                <div class="btn-group mt-2">
+                                                    <button class="btn btn-danger btn-sm"
+                                                            @click="deleteStorageLocation(location.id)">Delete
+                                                    </button>
+                                                    <router-link :to="`/storage-locations/${location.id}/edit`"
+                                                                 class="btn btn-primary btn-sm">Edit
+                                                    </router-link>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                        </div>
+                        <div class="card">
+                            <button class="btn" @click="fetchStorageLocations">Refresh</button>
+                            <router-link to="/storage-locations/new" class="btn btn-primary">Add</router-link>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </BaseLayout>
+</template>
+
+<script>
+import {mapActions, mapState} from "vuex";
+import * as BIcons from "bootstrap-icons-vue";
+import BaseLayout from "@/components/BaseLayout.vue";
+
+export default {
+    name: "StorageLocation",
+    data() {
+        return {
+            layout: "grid",
+        }
+    },
+    components: {
+        BaseLayout,
+        ...BIcons
+    },
+    computed: {
+        ...mapState(["user", "storage_locations"]),
+    },
+    methods: {
+        ...mapActions(["fetchStorageLocations", "deleteStorageLocation"]),
+    },
+    async mounted() {
+        await this.fetchStorageLocations()
+    }
+}
+</script>
+
+<style scoped>
+.card-text small {
+    font-size: 0.8rem;
+}
+
+.btn-group {
+    width: 100%;
+}
+
+.btn-group .btn {
+    flex: 1;
+}
+</style>

frontend/src/views/StorageLocationDetail.vue

@@ -0,0 +1,80 @@
+<template>
+    <BaseLayout>
+        <main class="content">
+            <div class="row">
+                <div class="col">
+                    <div class="card">
+                        <div class="card-header">{{ location.name }}</div>
+                        <div class="card-body">
+                            <div class="mb-3">
+                                <label for="path" class="form-label">Path</label>
+                                <div>{{ location.path }}</div>
+                            </div>
+                            <div class="mb-3">
+                                <label for="description" class="form-label">Description</label>
+                                <div>{{ location.description || '-' }}</div>
+                            </div>
+                            <div class="mb-3">
+                                <label for="category" class="form-label">Category</label>
+                                <div>
+                                    <span class="badge bg-info text-white" v-if="location.category">{{ location.category }}</span>
+                                    <span class="text-muted" v-else>-</span>
+                                </div>
+                            </div>
+                            <div class="mb-3">
+                                <label for="owner" class="form-label">Owner</label>
+                                <div>{{ location.owner?.username || '-' }}</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="card">
+                        <button class="btn btn-primary" @click="$router.push('/storage-locations/' + id + '/edit')">
+                            <b-icon-pencil-square></b-icon-pencil-square>
+                            Edit
+                        </button>
+                        <button type="submit" class="btn btn-danger"
+                                @click="deleteStorageLocation(location).then(() => $router.push('/storage-location'))">
+                            <b-icon-trash></b-icon-trash>
+                            Delete
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </BaseLayout>
+</template>
+
+<script>
+import * as BIcons from "bootstrap-icons-vue";
+import BaseLayout from "@/components/BaseLayout.vue";
+import {mapActions, mapState} from "vuex";
+
+export default {
+    name: "StorageLocationDetail",
+    components: {
+        BaseLayout,
+        ...BIcons
+    },
+    props: {
+        id: {
+            type: String,
+            required: true
+        }
+    },
+    computed: {
+        ...mapState(["storage_locations"]),
+        location() {
+            return this.storage_locations.find(loc => loc.id === parseInt(this.id)) || {}
+        }
+    },
+    methods: {
+        ...mapActions(["fetchStorageLocations", "deleteStorageLocation"]),
+    },
+    async mounted() {
+        await this.fetchStorageLocations()
+    }
+}
+</script>
+
+<style scoped>
+</style>

frontend/src/views/StorageLocationEdit.vue

@@ -0,0 +1,119 @@
+<template>
+    <BaseLayout>
+        <main class="content">
+            <div class="row">
+                <div class="col">
+                    <div class="card">
+                        <div class="card-header">Edit Storage Location</div>
+                        <div class="card-body">
+                            <div class="mb-3">
+                                <label for="name" class="form-label">Name</label>
+                                <input type="text" class="form-control" id="name" name="name"
+                                       placeholder="Enter storage location name" v-model="location.name">
+                            </div>
+                            <div class="mb-3">
+                                <label for="description" class="form-label">Description</label>
+                                <textarea class="form-control" id="description" name="description"
+                                          placeholder="Enter description" v-model="location.description"></textarea>
+                            </div>
+                            <div class="mb-3">
+                                <label for="category" class="form-label">Category</label>
+                                <select class="form-select" id="category" name="category"
+                                        v-model="location.category">
+                                    <option value="">No Category</option>
+                                    <option v-for="category in categories" :value="category"
+                                            :selected="category === location.category">
+                                        {{ category }}
+                                    </option>
+                                </select>
+                            </div>
+                            <div class="mb-3">
+                                <label for="parent" class="form-label">Parent Location</label>
+                                <select class="form-select" id="parent" name="parent"
+                                        v-model="location.parent">
+                                    <option value="">No Parent</option>
+                                    <option v-for="parent in availableParents" :value="parent.id"
+                                            :selected="parent.id === location.parent">
+                                        {{ parent.path }}
+                                    </option>
+                                </select>
+                            </div>
+                            <div class="mb-3">
+                                <button type="submit" class="btn btn-primary" style="width: 100%"
+                                        @click="submitForm()">Update
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </BaseLayout>
+</template>
+
+<script>
+import * as BIcons from "bootstrap-icons-vue";
+import {mapActions, mapState} from "vuex";
+import BaseLayout from "@/components/BaseLayout.vue";
+
+export default {
+    name: "StorageLocationEdit",
+    components: {
+        BaseLayout,
+        ...BIcons
+    },
+    props: {
+        id: {
+            type: String,
+            required: true
+        }
+    },
+    computed: {
+        ...mapState(["storage_locations", "categories"]),
+        location() {
+            return {
+                name: "",
+                description: "",
+                category: null,
+                parent: null,
+                ...this.storage_locations.find(loc => loc.id === parseInt(this.id))
+            }
+        },
+        availableParents() {
+            // Filter out self and children to prevent circular references
+            return this.storage_locations.filter(loc =>
+                loc.id !== parseInt(this.id) &&
+                !this.isChildOf(loc, parseInt(this.id))
+            )
+        }
+    },
+    methods: {
+        ...mapActions(["fetchStorageLocations", "updateStorageLocation", "fetchInfo"]),
+        submitForm() {
+            // Convert empty strings to null for ForeignKey fields
+            const locationData = {
+                ...this.location,
+                category: this.location.category === "" ? null : this.location.category,
+                parent: this.location.parent === "" ? null : this.location.parent
+            };
+            this.updateStorageLocation(locationData);
+        },
+        isChildOf(location, parentId) {
+            // Simple check to prevent circular references
+            let current = location;
+            while (current && current.parent) {
+                if (current.parent === parentId) return true;
+                current = this.storage_locations.find(loc => loc.id === current.parent);
+            }
+            return false;
+        }
+    },
+    async mounted() {
+        await this.fetchInfo();
+        await this.fetchStorageLocations();
+    }
+}
+</script>
+
+<style scoped>
+</style>

frontend/src/views/StorageLocationNew.vue

@@ -0,0 +1,96 @@
+<template>
+    <BaseLayout>
+        <main class="content">
+            <div class="row">
+                <div class="col">
+                    <div class="card">
+                        <div class="card-header">Create New Storage Location</div>
+                        <div class="card-body">
+                            <div class="mb-3">
+                                <label for="name" class="form-label">Name</label>
+                                <input type="text" class="form-control" id="name" name="name"
+                                       placeholder="Enter storage location name" v-model="location.name">
+                            </div>
+                            <div class="mb-3">
+                                <label for="description" class="form-label">Description</label>
+                                <textarea class="form-control" id="description" name="description"
+                                          placeholder="Enter description" v-model="location.description"></textarea>
+                            </div>
+                            <div class="mb-3">
+                                <label for="category" class="form-label">Category</label>
+                                <select class="form-select" id="category" name="category"
+                                        v-model="location.category">
+                                    <option value="">No Category</option>
+                                    <option v-for="category in categories" :value="category">
+                                        {{ category }}
+                                    </option>
+                                </select>
+                            </div>
+                            <div class="mb-3">
+                                <label for="parent" class="form-label">Parent Location</label>
+                                <select class="form-select" id="parent" name="parent"
+                                        v-model="location.parent">
+                                    <option value="">No Parent</option>
+                                    <option v-for="parent in storage_locations" :value="parent.id">
+                                        {{ parent.path }}
+                                    </option>
+                                </select>
+                            </div>
+                            <div class="mb-3">
+                                <button type="submit" class="btn btn-primary" style="width: 100%"
+                                        @click="submitForm()">Add
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </BaseLayout>
+</template>
+
+<script>
+import * as BIcons from "bootstrap-icons-vue";
+import {mapActions, mapState} from "vuex";
+import BaseLayout from "@/components/BaseLayout.vue";
+
+export default {
+    name: "StorageLocationNew",
+    components: {
+        BaseLayout,
+        ...BIcons
+    },
+    data() {
+        return {
+            location: {
+                name: "",
+                description: "",
+                category: null,
+                parent: null
+            }
+        }
+    },
+    methods: {
+        ...mapActions(['createStorageLocation', 'fetchInfo', 'fetchStorageLocations']),
+        submitForm() {
+            // Convert empty strings to null for ForeignKey fields
+            const locationData = {
+                ...this.location,
+                category: this.location.category === "" ? null : this.location.category,
+                parent: this.location.parent === "" ? null : this.location.parent
+            };
+            this.createStorageLocation(locationData).then(() => this.$router.push('/storage-location'));
+        }
+    },
+    computed: {
+        ...mapState(["categories", "storage_locations"]),
+    },
+    async mounted() {
+        await this.fetchInfo();
+        await this.fetchStorageLocations();
+    }
+}
+</script>
+
+<style scoped>
+</style>

frontend/src/views/Workflows.vue

@@ -0,0 +1,449 @@
+<template>
+    <BaseLayout>
+        <main class="content">
+            <div class="container-fluid p-0">
+                <h1 class="h3 mb-3">Workflows</h1>
+
+                <!-- Active/Unfinished Workflows Section - Only show if there are active workflows -->
+                <div v-if="activeWorkflows.length > 0" class="row mb-4">
+                    <div class="col-12">
+                        <div class="card">
+                            <div class="card-header d-flex justify-content-between align-items-center">
+                                <h5 class="card-title mb-0">Workflows in progress</h5>
+                                <span class="badge bg-primary">{{ activeWorkflows.length }}</span>
+                            </div>
+                            <div class="card-body">
+                                <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>
+                                        </thead>
+                                        <tbody>
+                                            <tr v-for="workflow in activeWorkflows" :key="workflow.id">
+                                                <td>
+                                                    <strong>{{ workflow.workflow_type }}</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.status)">
+                                                        </div>
+                                                    </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 v-if="workflow.status === 'running'"
+                                                            class="btn btn-sm btn-outline-warning me-1"
+                                                            @click="pauseWorkflowInstance(workflow)"
+                                                            :disabled="loading">
+                                                        <b-icon-pause></b-icon-pause>
+                                                    </button>
+                                                    <button v-if="workflow.status === 'paused'"
+                                                            class="btn btn-sm btn-outline-success me-1"
+                                                            @click="resumeWorkflowInstance(workflow)"
+                                                            :disabled="loading">
+                                                        <b-icon-play></b-icon-play>
+                                                    </button>
+                                                    <button class="btn btn-sm btn-outline-danger"
+                                                            @click="cancelWorkflowInstance(workflow)"
+                                                            :disabled="workflow.status === 'completed' || workflow.status === 'cancelled' || loading">
+                                                        <b-icon-x-circle></b-icon-x-circle>
+                                                    </button>
+                                                </td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Available System Workflows Section -->
+                <div class="row">
+                    <div class="col-12">
+                        <div class="card">
+                            <div class="card-header">
+                                <h5 class="card-title mb-0">Available Workflows</h5>
+                                <small class="text-muted">Start a new workflow instance</small>
+                            </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 class="card h-100 workflow-card">
+                                            <div class="card-body d-flex flex-column">
+                                                <div class="d-flex align-items-center mb-3">
+                                                    <div class="workflow-icon me-3">
+                                                        <component :is="workflow.icon" class="text-primary" style="font-size: 1.5rem;"></component>
+                                                    </div>
+                                                    <div>
+                                                        <h6 class="card-title mb-1">{{ workflow.name }}</h6>
+                                                        <small class="text-muted">{{ workflow.category }}</small>
+                                                    </div>
+                                                </div>
+                                                <p class="card-text flex-grow-1">{{ workflow.description }}</p>
+                                                <div class="mt-auto">
+                                                    <div class="d-flex justify-content-between align-items-center mb-2">
+                                                        <small class="text-muted">
+                                                            <b-icon-clock class="me-1"></b-icon-clock>
+                                                            ~{{ workflow.estimatedDuration }}
+                                                        </small>
+                                                        <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)">
+                                                        <b-icon-play-fill class="me-1"></b-icon-play-fill>
+                                                        {{ isWorkflowRunning(workflow.id) ? 'Running...' : 'Start Workflow' }}
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </BaseLayout>
+</template>
+
+<script>
+import * as BIcons from "bootstrap-icons-vue";
+import BaseLayout from "@/components/BaseLayout.vue";
+import { mapState, mapActions } from 'vuex';
+
+export default {
+    name: 'Workflows',
+    components: {
+        ...BIcons,
+        BaseLayout
+    },
+    data() {
+        return {
+            availableWorkflows: [
+                {
+                    id: 'inventory-audit',
+                    name: 'Inventory Audit',
+                    category: 'Inventory Management',
+                    description: 'Perform a complete audit of your inventory items, checking quantities, locations, and conditions.',
+                    icon: 'b-icon-clipboard-check',
+                    estimatedDuration: '2-4 hours',
+                    steps: 8
+                },
+                {
+                    id: 'storage-optimization',
+                    name: 'Storage Optimization',
+                    category: 'Storage Management',
+                    description: 'Analyze and reorganize storage locations for maximum efficiency and accessibility.',
+                    icon: 'b-icon-boxes',
+                    estimatedDuration: '1-2 hours',
+                    steps: 5
+                },
+                {
+                    id: 'foto-first-import',
+                    name: 'Foto First Import',
+                    category: 'Data Management',
+                    description: 'Capture unlimited photos via mobile camera or upload images, then sequentially enter details for each item.',
+                    icon: 'b-icon-camera',
+                    estimatedDuration: '10-60 minutes',
+                    steps: 4
+                },
+                {
+                    id: 'maintenance-schedule',
+                    name: 'Maintenance Schedule',
+                    category: 'Tool Maintenance',
+                    description: 'Create and execute maintenance schedules for tools and equipment.',
+                    icon: 'b-icon-tools',
+                    estimatedDuration: '30 minutes',
+                    steps: 4
+                },
+                {
+                    id: 'expiry-check',
+                    name: 'Expiry Date Check',
+                    category: 'Quality Control',
+                    description: 'Identify and handle items approaching or past their expiry dates.',
+                    icon: 'b-icon-calendar-x',
+                    estimatedDuration: '45 minutes',
+                    steps: 6
+                },
+                {
+                    id: 'backup-restore',
+                    name: 'Data Backup',
+                    category: 'System Maintenance',
+                    description: 'Create a comprehensive backup of your inventory and settings data.',
+                    icon: 'b-icon-cloud-arrow-up',
+                    estimatedDuration: '15 minutes',
+                    steps: 3
+                },
+                {
+                    id: 'import-items',
+                    name: 'Bulk Item Import',
+                    category: 'Data Management',
+                    description: 'Import multiple inventory items from CSV or Excel files with validation.',
+                    icon: 'b-icon-file-earmark-spreadsheet',
+                    estimatedDuration: '20-60 minutes',
+                    steps: 7
+                }
+            ],
+            loading: false,
+            error: null
+        }
+    },
+    computed: {
+        ...mapState(['active_workflows']),
+        activeWorkflows() {
+            return this.active_workflows;
+        }
+    },
+    async mounted() {
+        await this.loadActiveWorkflows();
+    },
+    methods: {
+        ...mapActions([
+            'fetchActiveWorkflows',
+            'createWorkflow',
+            'updateWorkflow',
+            'pauseWorkflow',
+            'resumeWorkflow',
+            'cancelWorkflow',
+            'deleteWorkflow'
+        ]),
+        async loadActiveWorkflows() {
+            try {
+                this.loading = true;
+                this.error = null;
+                await this.fetchActiveWorkflows();
+            } catch (error) {
+                console.error('Error loading active workflows:', error);
+                this.error = 'Failed to load active workflows';
+            } finally {
+                this.loading = false;
+            }
+        },
+        getStatusBadgeClass(status) {
+            const classes = {
+                'running': 'badge bg-success',
+                'paused': 'badge bg-warning',
+                'failed': 'badge bg-danger',
+                'completed': 'badge bg-primary',
+                'cancelled': 'badge bg-secondary'
+            };
+            return classes[status] || 'badge bg-secondary';
+        },
+        getProgressBarClass(status) {
+            const classes = {
+                'running': 'bg-success',
+                'paused': 'bg-warning',
+                'failed': 'bg-danger',
+                'completed': 'bg-primary',
+                'cancelled': 'bg-secondary'
+            };
+            return classes[status] || 'bg-secondary';
+        },
+        formatDate(dateString) {
+            const date = new Date(dateString);
+            return new Intl.DateTimeFormat('en-US', {
+                month: 'short',
+                day: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit'
+            }).format(date);
+        },
+        isWorkflowRunning(workflowId) {
+            return this.activeWorkflows.some(active =>
+                active.workflow_type === workflowId &&
+                active.state === 'running'
+            );
+        },
+        async startWorkflow(workflow) {
+            try {
+                this.loading = true;
+                this.error = null;
+
+                const workflowData = {
+                    workflow_type: workflow.id,
+                    state: 'running',
+                    current_step: 0,
+                    total_steps: workflow.steps,
+                    payload: {
+                        workflow_config: {
+                            name: workflow.name,
+                            description: workflow.description,
+                            category: workflow.category,
+                            estimated_duration: workflow.estimatedDuration
+                        }
+                    }
+                };
+
+                await this.createWorkflow(workflowData);
+                console.log('Workflow started successfully:', workflow.name);
+
+                // Refresh active workflows to show the new one
+                await this.loadActiveWorkflows();
+
+            } catch (error) {
+                console.error('Error starting workflow:', error);
+                this.error = `Failed to start ${workflow.name}`;
+            } finally {
+                this.loading = false;
+            }
+        },
+        async viewWorkflowDetails(workflow) {
+            // TODO: Implement workflow details view/modal
+            console.log('Viewing workflow details:', workflow);
+            // For now, show an alert with workflow information
+            const details = `
+Workflow: ${workflow.workflow_type}
+Status: ${workflow.status_display || workflow.state}
+Progress: ${workflow.progress_percentage}%
+Step: ${workflow.current_step + 1} of ${workflow.total_steps}
+Started: ${this.formatDate(workflow.started_at)}
+            `.trim();
+            alert(details);
+        },
+        async pauseWorkflowInstance(workflow) {
+            try {
+                this.loading = true;
+                this.error = null;
+                await this.pauseWorkflow(workflow.id);
+                await this.loadActiveWorkflows();
+                console.log('Workflow paused successfully:', workflow.workflow_type);
+            } catch (error) {
+                console.error('Error pausing workflow:', error);
+                this.error = `Failed to pause ${workflow.workflow_type}`;
+            } finally {
+                this.loading = false;
+            }
+        },
+        async resumeWorkflowInstance(workflow) {
+            try {
+                this.loading = true;
+                this.error = null;
+                await this.resumeWorkflow(workflow.id);
+                await this.loadActiveWorkflows();
+                console.log('Workflow resumed successfully:', workflow.workflow_type);
+            } catch (error) {
+                console.error('Error resuming workflow:', error);
+                this.error = `Failed to resume ${workflow.workflow_type}`;
+            } finally {
+                this.loading = false;
+            }
+        },
+        async cancelWorkflowInstance(workflow) {
+            if (confirm(`Are you sure you want to cancel "${workflow.workflow_type}"?`)) {
+                try {
+                    this.loading = true;
+                    this.error = null;
+                    await this.cancelWorkflow(workflow.id);
+                    await this.loadActiveWorkflows();
+                    console.log('Workflow cancelled successfully:', workflow.workflow_type);
+                } catch (error) {
+                    console.error('Error cancelling workflow:', error);
+                    this.error = `Failed to cancel ${workflow.workflow_type}`;
+                } finally {
+                    this.loading = false;
+                }
+            }
+        }
+    }
+}
+</script>
+
+<style scoped>
+.workflow-card {
+    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+    border: 1px solid #e9ecef;
+}
+
+.workflow-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.workflow-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    background-color: rgba(13, 110, 253, 0.1);
+    border-radius: 8px;
+    flex-shrink: 0;
+}
+
+.progress {
+    border-radius: 4px;
+    background-color: #e9ecef;
+}
+
+.progress-bar {
+    border-radius: 4px;
+    transition: width 0.3s ease;
+}
+
+.table th {
+    border-top: none;
+    font-weight: 600;
+    color: #495057;
+    font-size: 0.875rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.table td {
+    vertical-align: middle;
+}
+
+.badge {
+    font-size: 0.75rem;
+    font-weight: 500;
+}
+
+.btn-sm {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.875rem;
+}
+
+.card-header {
+    background-color: #f8f9fa;
+    border-bottom: 1px solid #e9ecef;
+}
+
+.workflow-card .btn {
+    border-radius: 6px;
+    font-weight: 500;
+    transition: all 0.2s ease;
+}
+
+.workflow-card .btn:hover {
+    transform: translateY(-1px);
+}
+
+.workflow-card .btn:disabled {
+    opacity: 0.6;
+    transform: none;
+}
+</style>