Fix arm builds not getting runner

Added a dropdown for selecting the database type in the bug report template.

.github/FUNDING.yml

@@ -1 +1,2 @@
+open_collective: homebox
 github: [tankerkiller125,katosdev,tonyaellie]

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -58,6 +58,17 @@ body:
         - Other
     validations:
       required: true
+  - type: dropdown
+    id: database
+    attributes:
+      label: Database Type
+      description: What database backend are you using?
+      multiple: false
+      options:
+        - SQLite
+        - PostgreSQL
+    validations:
+      required: true
   - type: dropdown
     id: arch
     attributes:

.github/screenshots/readme.md

@@ -1,8 +1,8 @@
-# Screenshots
-
-These screenshots are taken from our public [Demo](https://demo.homebox.software) instance.
-Note that whilst we will make every effort to ensure that these are maintained and updated, they may be outdated or missing functionality and we would always advise reviewing our demo instances:
-
-- [Demo](https://demo.homebox.software)
-- [Nightly](https://nightly.homebox.software)
+# Screenshots
+
+These screenshots are taken from our public [Demo](https://demo.homebox.software) instance.
+Note that whilst we will make every effort to ensure that these are maintained and updated, they may be outdated or missing functionality and we would always advise reviewing our demo instances:
+
+- [Demo](https://demo.homebox.software)
+- [Nightly](https://nightly.homebox.software)
 - [VNext](https://vnext.homebox.software/)

.github/scripts/update_currencies.py

@@ -1,16 +1,33 @@
 #!/usr/bin/env python3
+import csv
+import io
 import json
 import logging
+import os
 import sys
 from pathlib import Path
 
 import requests
-from requests.adapters import HTTPAdapter, Retry
+from requests.adapters import HTTPAdapter
+from urllib3.util.retry import Retry
 
 API_URL    = 'https://restcountries.com/v3.1/all?fields=name,common,currencies'
+# Default to a pinned commit for supply-chain security
+DEFAULT_ISO_4217_URL = 'https://raw.githubusercontent.com/datasets/currency-codes/052b3088938ba32028a14e75040c286c5e142145/data/codes-all.csv'
+ISO_4217_URL = os.environ.get('ISO_4217_URL', DEFAULT_ISO_4217_URL)
 SAVE_PATH  = Path('backend/internal/core/currencies/currencies.json')
 TIMEOUT    = 10  # seconds
 
+# Known currency decimal overrides
+CURRENCY_DECIMAL_OVERRIDES = {
+    "BTC": 8,  # Bitcoin uses 8 decimal places
+    "JPY": 0,  # Japanese Yen has no decimal places
+    "BHD": 3,  # Bahraini Dinar uses 3 decimal places
+}
+DEFAULT_DECIMALS = 2
+MIN_DECIMALS = 0
+MAX_DECIMALS = 6
+
 
 def setup_logging():
     logging.basicConfig(
@@ -19,7 +36,93 @@ def setup_logging():
     )
 
 
+def get_currency_decimals(code, iso_data):
+    """
+    Get the decimal places for a currency code.
+    Checks overrides first, then ISO data, then uses default.
+    Clamps result to safe range [MIN_DECIMALS, MAX_DECIMALS].
+    """
+    # Normalize the input code
+    normalized_code = (code or "").strip().upper()
+    
+    # First check overrides
+    if normalized_code in CURRENCY_DECIMAL_OVERRIDES:
+        decimals = CURRENCY_DECIMAL_OVERRIDES[normalized_code]
+    # Then check ISO data
+    elif normalized_code in iso_data:
+        decimals = iso_data[normalized_code]
+    # Finally use default
+    else:
+        decimals = DEFAULT_DECIMALS
+    
+    # Ensure it's an integer and clamp to safe range
+    try:
+        decimals = int(decimals)
+    except (ValueError, TypeError):
+        decimals = DEFAULT_DECIMALS
+    
+    return max(MIN_DECIMALS, min(MAX_DECIMALS, decimals))
+
+
+def fetch_iso_4217_data():
+    """
+    Fetch ISO 4217 currency data to get minor units (decimal places).
+    Returns a dict mapping currency code to minor units.
+    """
+    # Log the resolved URL for transparency
+    logging.info("Fetching ISO 4217 data from: %s", ISO_4217_URL)
+    if not ISO_4217_URL.lower().startswith("https://"):
+        logging.error("Refusing non-HTTPS ISO_4217_URL: %s", ISO_4217_URL)
+        return {}
+    
+    session = requests.Session()
+    retries = Retry(
+        total=3,
+        backoff_factor=1,
+        status_forcelist=[429, 500, 502, 503, 504],
+        allowed_methods=frozenset(['GET'])
+    )
+    session.mount('https://', HTTPAdapter(max_retries=retries))
+
+    try:
+        # Add Accept header for CSV content
+        headers = {'Accept': 'text/csv'}
+        resp = session.get(ISO_4217_URL, timeout=TIMEOUT, headers=headers)
+        resp.raise_for_status()
+    except requests.exceptions.RequestException as e:
+        logging.error("Failed to fetch ISO 4217 data: %s", e)
+        return {}
+
+    # Parse CSV data
+    iso_data = {}
+    try:
+        # Decode with utf-8-sig to strip BOM if present
+        csv_content = resp.content.decode('utf-8-sig')
+        csv_reader = csv.DictReader(io.StringIO(csv_content))
+        
+        for row in csv_reader:
+            code = row.get('AlphabeticCode', '').strip()
+            minor_unit = row.get('MinorUnit', '').strip()
+            
+            if code and minor_unit != 'N.A.':
+                try:
+                    # Convert minor unit to int (decimal places)
+                    iso_data[code] = int(minor_unit) if minor_unit.isdigit() else 2
+                except (ValueError, TypeError):
+                    iso_data[code] = 2  # Default to 2 if parsing fails
+                    
+        logging.info("Successfully loaded decimal data for %d currencies from ISO 4217", len(iso_data))
+        return iso_data
+        
+    except Exception as e:
+        logging.error("Failed to parse ISO 4217 CSV data: %s", e)
+        return {}
+
+
 def fetch_currencies():
+    # First, fetch ISO 4217 data for decimal places
+    iso_data = fetch_iso_4217_data()
+    
     session = requests.Session()
     retries = Retry(
         total=3,
@@ -46,11 +149,15 @@ def fetch_currencies():
     for country in countries:
         country_name = country.get('name', {}).get('common') or "Unknown"
         for code, info in country.get('currencies', {}).items():
+            # Get decimal places using the helper function
+            decimals = get_currency_decimals(code, iso_data)
+            
             results.append({
-                'code':   code,
-                'local':  country_name,
-                'symbol': info.get('symbol', ''),
-                'name':   info.get('name', '')
+                'code':     code,
+                'local':    country_name,
+                'symbol':   info.get('symbol', ''),
+                'name':     info.get('name', ''),
+                'decimals': decimals
             })
 
     # sort by country name for consistency

.github/workflows/binaries-publish.yaml

@@ -9,6 +9,8 @@ jobs:
   goreleaser:
     name: goreleaser
     runs-on: ubuntu-latest
+    outputs:
+      hashes: ${{ steps.binary.outputs.hashes }}
     permissions:
       contents: write
       packages: write
@@ -42,18 +44,30 @@ jobs:
           go install github.com/sigstore/cosign/cmd/cosign@latest
 
       - name: Run GoReleaser
+        id: releaser
         if: startsWith(github.ref, 'refs/tags/')
         uses: goreleaser/goreleaser-action@v5
         with:
           workdir: "backend"
           distribution: goreleaser
           version: "~> v2"
-          args: release --clean
+          args: release --rm-dist
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           COSIGN_PWD: ${{ secrets.COSIGN_PWD }}
           COSIGN_YES: "true"
 
+      - name: Generate binary hashes
+        if: startsWith(github.ref, 'refs/tags/')
+        id: binary
+        env:
+          ARTIFACTS: "${{ steps.releaser.outputs.artifacts }}"
+        run: |
+          set -euo pipefail
+          
+          checksum_file=$(echo "$ARTIFACTS" | jq -r '.[] | select (.type=="Checksum") | .path')
+          echo "hashes=$(cat $checksum_file | base64 -w0)" >> "$GITHUB_OUTPUT"
+
       - name: Run GoReleaser No Release
         if: ${{ !startsWith(github.ref, 'refs/tags/') }}
         uses: goreleaser/goreleaser-action@v5
@@ -65,4 +79,50 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           COSIGN_PWD: ${{ secrets.COSIGN_PWD }}
-          COSIGN_YES: "true"
+          COSIGN_YES: "true"
+
+  binary-provenance:
+    if: startsWith(github.ref, 'refs/tags/')
+    needs: [ goreleaser ]
+    permissions:
+      actions: read # To read the workflow path.
+      id-token: write # To sign the provenance.
+      contents: write # To add assets to a release.
+    uses: slsa-framework/slsa-github-generator/.github/workflows/generator_generic_slsa3.yml@v1.9.0
+    with:
+      base64-subjects: "${{ needs.goreleaser.outputs.hashes }}"
+      upload-assets: true # upload to a new release
+
+  verification-with-slsa-verifier:
+    if: startsWith(github.ref, 'refs/tags/')
+    needs: [goreleaser, binary-provenance]
+    runs-on: ubuntu-latest
+    permissions: read-all
+    steps:
+      - name: Install the verifier
+        uses: slsa-framework/slsa-verifier/actions/installer@v2.4.0
+
+      - name: Download assets
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          PROVENANCE: "${{ needs.binary-provenance.outputs.provenance-name }}"
+        run: |
+          set -euo pipefail
+          gh -R "$GITHUB_REPOSITORY" release download "$GITHUB_REF_NAME" -p "*.tar.gz"
+          gh -R "$GITHUB_REPOSITORY" release download "$GITHUB_REF_NAME" -p "*.zip"
+          gh -R "$GITHUB_REPOSITORY" release download "$GITHUB_REF_NAME" -p "$PROVENANCE"
+      - name: Verify assets
+        env:
+          CHECKSUMS: ${{ needs.goreleaser.outputs.hashes }}
+          PROVENANCE: "${{ needs.binary-provenance.outputs.provenance-name }}"
+        run: |
+          set -euo pipefail
+          checksums=$(echo "$CHECKSUMS" | base64 -d)
+          while read -r line; do
+              fn=$(echo $line | cut -d ' ' -f2)
+              echo "Verifying $fn"
+              slsa-verifier verify-artifact --provenance-path "$PROVENANCE" \
+                                            --source-uri "github.com/$GITHUB_REPOSITORY" \
+                                            --source-tag "$GITHUB_REF_NAME" \
+                                            "$fn"
+          done <<<"$checksums"

.github/workflows/docker-publish-hardened.yaml

@@ -33,7 +33,7 @@ env:
 
 jobs:
   build:
-    runs-on: ubuntu-latest
+    runs-on: ${{ matrix.runner }}
     permissions:
       contents: read
       packages: write
@@ -43,10 +43,11 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        platform:
-          - linux/amd64
-          - linux/arm64
-          - linux/arm/v7
+        include:
+          - platform: linux/amd64
+            runner: ubuntu-latest
+          - platform: linux/arm64
+            runner: ubuntu-24.04-arm
 
     steps:
       - name: Enable Debug Logs

.github/workflows/docker-publish-rootless.yaml

@@ -37,7 +37,7 @@ env:
 
 jobs:
   build:
-    runs-on: ubuntu-latest
+    runs-on: ${{ matrix.runner }}
     permissions:
       contents: read
       packages: write
@@ -47,10 +47,11 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        platform:
-          - linux/amd64
-          - linux/arm64
-          - linux/arm/v7
+        include:
+          - platform: linux/amd64
+            runner: ubuntu-latest
+          - platform: linux/arm64
+            runner: ubuntu-24.04-arm
 
     steps:
       - name: Enable Debug Logs

.github/workflows/docker-publish.yaml

@@ -37,7 +37,7 @@ permissions:
 
 jobs:
   build:
-    runs-on: ubuntu-latest
+    runs-on: ${{ matrix.runner }}
     permissions:
       contents: read     # Allows access to repository contents (read-only)
       packages: write    # Allows pushing to GHCR
@@ -47,10 +47,11 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        platform:
-          - linux/amd64
-          - linux/arm64
-          - linux/arm/v7
+        include:
+          - platform: linux/amd64
+            runner: ubuntu-latest
+          - platform: linux/arm64
+            runner: ubuntu-24.04-arm
 
     steps:
       - name: Checkout repository

.github/workflows/update-currencies.yml

@@ -5,18 +5,22 @@ on:
     branches: [ main ]
   workflow_dispatch:
 
+permissions:
+  contents: write
+  pull-requests: write
+
 jobs:
   update-currencies:
     runs-on: ubuntu-latest
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
       - name: Set up Python
-        uses: actions/setup-python@v4
+        uses: actions/setup-python@v5
         with:
           python-version: '3.8'
           cache: 'pip'
@@ -25,15 +29,14 @@ jobs:
       - name: Install dependencies
         run: |
           python -m pip install --upgrade pip
-          pip install requests
+          pip install -r .github/workflows/update-currencies/requirements.txt
 
       - name: Run currency update script
         run: python .github/scripts/update_currencies.py
 
-      - name: Check for file changes
-        id: changes
+      - name: Check for currencies.json changes
         run: |
-          if git diff --quiet; then
+          if git diff --quiet -- backend/internal/core/currencies/currencies.json; then
             echo "changed=false" >> $GITHUB_ENV
           else
             echo "changed=true"  >> $GITHUB_ENV
@@ -41,14 +44,16 @@ jobs:
 
       - name: Create Pull Request
         if: env.changed == 'true'
-        uses: peter-evans/create-pull-request@v7.0.8
+        uses: peter-evans/create-pull-request@v7
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           branch: update-currencies
           base: main
           title: "Update currencies.json"
           commit-message: "chore: update currencies.json"
-          path: backend/internal/core/currencies/currencies.json
+          path: .  
+          add-paths: |
+            backend/internal/core/currencies/currencies.json
 
       - name: No updates needed
         if: env.changed == 'false'

.vscode/settings.json

@@ -4,7 +4,7 @@
   },
   "explorer.fileNesting.enabled": true,
   "explorer.fileNesting.patterns": {
-    "package.json": "package-lock.json, yarn.lock, .eslintrc.js, tsconfig.json, .prettierrc, .editorconfig, pnpm-lock.yaml, postcss.config.js, tailwind.config.js",
+    "package.json": "package-lock.json, yarn.lock, eslint.config.mjs, tsconfig.json, .prettierrc, .editorconfig, pnpm-lock.yaml, postcss.config.js, tailwind.config.js",
     "docker-compose.yml": "Dockerfile, .dockerignore, docker-compose.dev.yml, docker-compose.yml",
     "README.md": "LICENSE, SECURITY.md"
   },
@@ -22,6 +22,7 @@
     "editor.defaultFormatter": "dbaeumer.vscode-eslint"
   },
   "eslint.format.enable": true,
+  "eslint.useFlatConfig": true,
   "css.validate": false,
 	"tailwindCSS.includeLanguages": {
 		"vue": "html",

README.md

@@ -2,36 +2,59 @@
   <img src="/docs/public/lilbox.svg" height="200"/>
 </div>
 
-<h1 align="center" style="margin-top: -10px"> HomeBox </h1>
-<p align="center" style="width: 100;">
+<h1 align="center" style="margin-top: -10px;"> HomeBox </h1>
+<p align="center" style="width: 100%;">
    <a href="https://homebox.software/en/">Docs</a>
    |
    <a href="https://demo.homebox.software">Demo</a>
    |
    <a href="https://discord.gg/aY4DCkpNA9">Discord</a>
 </p>
+<p align="center" style="width: 100%;">
+    <img src="https://img.shields.io/github/check-runs/sysadminsmedia/homebox/main" alt="Github Checks"/>
+    <img src="https://img.shields.io/github/license/sysadminsmedia/homebox"/>
+    <img src="https://img.shields.io/github/v/release/sysadminsmedia/homebox?sort=semver&display_name=release"/>
+    <img src="https://img.shields.io/weblate/progress/homebox?server=https%3A%2F%2Ftranslate.sysadminsmedia.com"/>
+</p>
+<p align="center" style="width: 100%;">
+    <img src="https://img.shields.io/reddit/subreddit-subscribers/homebox"/>
+    <img src="https://img.shields.io/mastodon/follow/110749314839831923?domain=infosec.exchange"/>
+    <img src="https://img.shields.io/lemmy/homebox%40lemmy.world?label=lemmy"/>
+</p>
 
 ## What is HomeBox
 
-HomeBox is the inventory and organization system built for the Home User! With a focus on simplicity and ease of use, Homebox is the perfect solution for your home inventory, organization, and management needs. While developing this project, I've tried to keep the following principles in mind:
+HomeBox is the inventory and organization system built for the Home User! With a focus on simplicity and ease of use, Homebox is the perfect solution for your home inventory, organization, and management needs. While developing this project, We've tried to keep the following principles in mind:
 
-- _Simple_ - Homebox is designed to be simple and easy to use. No complicated setup or configuration required. Use either a single docker container, or deploy yourself by compiling the binary for your platform of choice.
-- _Blazingly Fast_ - Homebox is written in Go, which makes it extremely fast and requires minimal resources to deploy. In general, idle memory usage is less than 50MB for the whole container.
-- _Portable_ - Homebox is designed to be portable and run on anywhere. We use SQLite and an embedded Web UI to make it easy to deploy, use, and backup.
+- 🧘 _Simple but Expandable_ - Homebox is designed to be simple and easy to use. No complicated setup or configuration required. But expandable to whatever level of infrastructure you want to put into it.
+- 🚀 _Blazingly Fast_ - Homebox is written in Go, which makes it extremely fast and requires minimal resources to deploy. In general, idle memory usage is less than 50MB for the whole container.
+- 📦 _Portable_ - Homebox is designed to be portable and run on anywhere. We use SQLite and an embedded Web UI to make it easy to deploy, use, and backup.
+
+### Key Features
+- 📇 Rich Organization - Organize your items into categories, locations, and tags. You can also create custom fields to store additional information about your items.
+- 🔍 Powerful Search - Quickly find items in your inventory using the powerful search feature.
+- 📸 Image Upload - Upload images of your items to make it easy to identify them.
+- 📄 Document and Warranty Tracking - Keep track of important documents and warranties for your items.
+- 💰 Purchase & Maintenance Tracking - Track purchase dates, prices, and maintenance schedules for your items.
+- 📱 Responsive Design - Homebox is designed to work on any device, including desktops, tablets, and smartphones.
+
+## Screenshots
+![Login Screen](.github/screenshots/1.png)
+![Dashboard](.github/screenshots/2.png)
+![Item View](.github/screenshots/3.png)
+![Create Item](.github/screenshots/9.png)
+![Search](.github/screenshots/8.png)
 
-# Screenshots
-Check out screenshots of the project [here](https://github.com/sysadminsmedia/homebox/tree/main/screenshots).
 You can also try the demo instances of Homebox:
 - [Demo](https://demo.homebox.software)
 - [Nightly](https://nightly.homebox.software)
-- [VNext](https://vnext.homebox.software/)
 
 ## Quick Start
 
 [Configuration & Docker Compose](https://homebox.software/en/quick-start.html)
 
 ```bash
-# If using the rootless image, ensure data 
+# If using the rootless or hardened image, ensure data 
 # folder has correct permissions
 mkdir -p /path/to/data/folder
 chown 65532:65532 -R /path/to/data/folder
@@ -43,6 +66,7 @@ docker run -d \
   --volume /path/to/data/folder/:/data \
   ghcr.io/sysadminsmedia/homebox:latest
 # ghcr.io/sysadminsmedia/homebox:latest-rootless
+# ghcr.io/sysadminsmedia/homebox:latest-hardened
 ```
 
 <!-- CONTRIBUTING -->
@@ -51,14 +75,20 @@ docker run -d \
 
 Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
 
-If you are not a coder, you can still contribute financially. Financial contributions help me prioritize working on this project over others and helps me know that there is a real demand for project development.
+To get started with code based contributions, please see our [contributing guide](https://homebox.software/en/contribute/get-started.html).
+
+If you are not a coder and can't help translate, you can still contribute financially. Financial contributions help us maintain the project and keep demos running.
 
 ## Help us Translate
 We want to make sure that Homebox is available in as many languages as possible. If you are interested in helping us translate Homebox, please help us via our [Weblate instance](https://translate.sysadminsmedia.com/projects/homebox/).
 
-[![Translation status](http://translate.sysadminsmedia.com/widget/homebox/multi-auto.svg)](http://translate.sysadminsmedia.com/engage/homebox/)
+[![Translation status](https://translate.sysadminsmedia.com/widget/homebox/multi-auto.svg)](https://translate.sysadminsmedia.com/engage/homebox/)
 
 ## Credits
-
 - Original project by [@hay-kot](https://github.com/hay-kot)
 - Logo by [@lakotelman](https://github.com/lakotelman)
+
+### Contributors
+<a href="https://github.com/sysadminsmedia/homebox/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=sysadminsmedia/homebox" />
+</a>

Taskfile.yml

@@ -23,10 +23,13 @@ tasks:
       INTERNAL: "../../../internal"
       PKGS: "../../../pkgs"
     cmds:
-      - swag fmt --dir={{ .API }}
       - swag init --dir={{ .API }},{{ .INTERNAL }}/core/services,{{ .INTERNAL }}/data/repo --parseDependency
-      - cp -r ./docs/swagger.json ../../../../docs/en/api/openapi-2.0.json
-      - cp -r ./docs/swagger.yaml ../../../../docs/en/api/openapi-2.0.yaml
+      - npx -y -p swagger2openapi swagger2openapi --outfile ./docs/openapi-3.json ./docs/swagger.json
+      - npx -y -p swagger2openapi swagger2openapi --yaml --outfile ./docs/openapi-3.yaml ./docs/swagger.json
+      - cp -r ./docs/swagger.json ../../../../docs/en/api/swagger-2.0.json
+      - cp -r ./docs/swagger.yaml ../../../../docs/en/api/swagger-2.0.yaml
+      - cp -r ./docs/openapi-3.json ../../../../docs/en/api/openapi-3.0.json
+      - cp -r ./docs/openapi-3.yaml ../../../../docs/en/api/openapi-3.0.yaml
     sources:
       - "./backend/app/api/**/*"
       - "./backend/internal/data/**"
@@ -93,6 +96,16 @@ tasks:
       - go run ./app/api/ {{ .CLI_ARGS }} &
     silent: true
 
+  go:ci:with-frontend:
+      desc: Run backend with frontend in CI mode
+      dir: frontend
+      cmds:
+        - pnpm install
+        - pnpm run build
+        - cp -r ./.output/public ../backend/app/api/static/
+        - task: go:ci
+      silent: true
+
   go:test:
     desc: Runs all go tests using gotestsum - supports passing gotestsum args
     dir: backend
@@ -201,12 +214,11 @@ tasks:
     desc: Runs end-to-end test on a live server
     dir: frontend
     cmds:
-      - task: go:ci
-      - task: ui:ci
+      - task: go:ci:with-frontend
       - pnpm exec playwright install-deps
       - pnpm exec playwright install
       - sleep 30
-      - TEST_SHUTDOWN_API_SERVER=true pnpm exec playwright test -c ./test/playwright.config.ts {{ .CLI_ARGS }}
+      - TEST_SHUTDOWN_API_SERVER=true E2E_BASE_URL=http://localhost:7745 pnpm exec playwright test -c ./test/playwright.config.ts {{ .CLI_ARGS }}
 
   pr:
     desc: Runs all tasks required for a PR

backend/.goreleaser.yaml

@@ -17,24 +17,18 @@ builds:
       - freebsd
     goarch:
       - amd64
-      - "386"
-      - arm
       - arm64
       - riscv64
-    ignore:
-      - goos: windows
-        goarch: arm
-      - goos: windows
-        goarch: "386"
-      - goos: freebsd
-        goarch: arm
-      - goos: freebsd
-        goarch: "386"
+    flags:
+      - -trimpath
+    ldflags:
+      - -s -w
+      - -X main.version={{.Version}}
+      - -X main.commit={{.Commit}}
+      - -X main.date={{.Date}}
     tags:
       - >-
         {{- if eq .Arch "riscv64" }}nodynamic
-        {{- else if eq .Arch "arm" }}nodynamic
-        {{- else if eq .Arch "386" }}nodynamic
         {{- else if eq .Os "freebsd" }}nodynamic
         {{ end }}
 
@@ -56,7 +50,6 @@ archives:
       {{ .ProjectName }}_
       {{- title .Os }}_
       {{- if eq .Arch "amd64" }}x86_64
-      {{- else if eq .Arch "386" }}i386
       {{- else }}{{ .Arch }}{{ end }}
       {{- if .Arm }}v{{ .Arm }}{{ end }}
     # use zip for windows archives

backend/app/api/handlers/v1/v1_ctrl_items_attachments.go

@@ -186,7 +186,7 @@ func (ctrl *V1Controller) handleItemAttachmentsHandler(w http.ResponseWriter, r
 			log.Err(err).Msg("failed to open bucket")
 			return validate.NewRequestError(err, http.StatusInternalServerError)
 		}
-		file, err := bucket.NewReader(ctx, doc.Path, nil)
+		file, err := bucket.NewReader(ctx, ctrl.repo.Attachments.GetFullPath(doc.Path), nil)
 		if err != nil {
 			log.Err(err).Msg("failed to open file")
 			return validate.NewRequestError(err, http.StatusInternalServerError)

backend/app/api/static/docs/docs.go

@@ -2240,6 +2240,9 @@ const docTemplate = `{
                 "code": {
                     "type": "string"
                 },
+                "decimals": {
+                    "type": "integer"
+                },
                 "local": {
                     "type": "string"
                 },
@@ -3480,6 +3483,19 @@ const docTemplate = `{
                 "id": {
                     "type": "string"
                 },
+                "labelIds": {
+                    "type": "array",
+                    "items": {
+                        "type": "string"
+                    },
+                    "x-nullable": true,
+                    "x-omitempty": true
+                },
+                "locationId": {
+                    "type": "string",
+                    "x-nullable": true,
+                    "x-omitempty": true
+                },
                 "quantity": {
                     "type": "integer",
                     "x-nullable": true,

backend/app/api/static/docs/swagger.json

@@ -2238,6 +2238,9 @@
                 "code": {
                     "type": "string"
                 },
+                "decimals": {
+                    "type": "integer"
+                },
                 "local": {
                     "type": "string"
                 },
@@ -3478,6 +3481,19 @@
                 "id": {
                     "type": "string"
                 },
+                "labelIds": {
+                    "type": "array",
+                    "items": {
+                        "type": "string"
+                    },
+                    "x-nullable": true,
+                    "x-omitempty": true
+                },
+                "locationId": {
+                    "type": "string",
+                    "x-nullable": true,
+                    "x-omitempty": true
+                },
                 "quantity": {
                     "type": "integer",
                     "x-nullable": true,

backend/app/api/static/docs/swagger.yaml

@@ -34,6 +34,8 @@ definitions:
     properties:
       code:
         type: string
+      decimals:
+        type: integer
       local:
         type: string
       name:
@@ -873,6 +875,16 @@ definitions:
     properties:
       id:
         type: string
+      labelIds:
+        items:
+          type: string
+        type: array
+        x-nullable: true
+        x-omitempty: true
+      locationId:
+        type: string
+        x-nullable: true
+        x-omitempty: true
       quantity:
         type: integer
         x-nullable: true

backend/go.sum

@@ -337,7 +337,6 @@ github.com/nats-io/nuid v1.0.1 h1:5iA8DT8V7q8WK2EScv2padNa/rTESc1KdnPw4TC2paw=
 github.com/nats-io/nuid v1.0.1/go.mod h1:19wcPz3Ph3q0Jbyiqsd0kePYG7A95tJPxeL+1OSON2c=
 github.com/ncruces/go-strftime v0.1.9 h1:bY0MQC28UADQmHmaF5dgpLmImcShSi2kHU9XLdhx/f4=
 github.com/ncruces/go-strftime v0.1.9/go.mod h1:Fwc5htZGVVkseilnfgOVb9mKy6w1naJmn9CehxcKcls=
-github.com/niemeyer/pretty v0.0.0-20200227124842-a10e7caefd8e/go.mod h1:zD1mROLANZcx1PVRCS0qkT7pwLkGfwJo4zjcN/Tysno=
 github.com/olahol/melody v1.3.0 h1:n7UlKiQnxVrgxKoM0d7usZiN+Z0y2lVENtYLgKtXS6s=
 github.com/olahol/melody v1.3.0/go.mod h1:GgkTl6Y7yWj/HtfD48Q5vLKPVoZOH+Qqgfa7CvJgJM4=
 github.com/onsi/ginkgo/v2 v2.9.2 h1:BA2GMJOtfGAfagzYtrAlufIP0lq6QERkFmHLMLPwFSU=

backend/internal/core/currencies/currencies.go

@@ -7,6 +7,7 @@ import (
 	_ "embed"
 	"encoding/json"
 	"io"
+	"log"
 	"slices"
 	"strings"
 	"sync"
@@ -15,6 +16,24 @@ import (
 //go:embed currencies.json
 var defaults []byte
 
+const (
+	MinDecimals = 0
+	MaxDecimals = 18
+)
+
+// clampDecimals ensures the decimals value is within a safe range [0, 18]
+func clampDecimals(decimals int, code string) int {
+	original := decimals
+	if decimals < MinDecimals {
+		decimals = MinDecimals
+		log.Printf("WARNING: Currency %s had negative decimals (%d), normalized to %d", code, original, decimals)
+	} else if decimals > MaxDecimals {
+		decimals = MaxDecimals
+		log.Printf("WARNING: Currency %s had excessive decimals (%d), normalized to %d", code, original, decimals)
+	}
+	return decimals
+}
+
 type CollectorFunc func() ([]Currency, error)
 
 func CollectJSON(reader io.Reader) CollectorFunc {
@@ -25,6 +44,11 @@ func CollectJSON(reader io.Reader) CollectorFunc {
 			return nil, err
 		}
 
+		// Clamp decimals during collection to ensure early normalization
+		for i := range currencies {
+			currencies[i].Decimals = clampDecimals(currencies[i].Decimals, currencies[i].Code)
+		}
+
 		return currencies, nil
 	}
 }
@@ -48,10 +72,11 @@ func CollectionCurrencies(collectors ...CollectorFunc) ([]Currency, error) {
 }
 
 type Currency struct {
-	Name   string `json:"name"`
-	Code   string `json:"code"`
-	Local  string `json:"local"`
-	Symbol string `json:"symbol"`
+	Name     string `json:"name"`
+	Code     string `json:"code"`
+	Local    string `json:"local"`
+	Symbol   string `json:"symbol"`
+	Decimals int    `json:"decimals"`
 }
 
 type CurrencyRegistry struct {
@@ -62,7 +87,10 @@ type CurrencyRegistry struct {
 func NewCurrencyService(currencies []Currency) *CurrencyRegistry {
 	registry := make(map[string]Currency, len(currencies))
 	for i := range currencies {
-		registry[currencies[i].Code] = currencies[i]
+		// Clamp decimals to safe range before adding to registry
+		currency := currencies[i]
+		currency.Decimals = clampDecimals(currency.Decimals, currency.Code)
+		registry[currency.Code] = currency
 	}
 
 	return &CurrencyRegistry{

backend/internal/core/services/service_items_attachments_test.go

@@ -52,8 +52,8 @@ func TestItemService_AddAttachment(t *testing.T) {
 	// Check that the file exists
 	storedPath := afterAttachment.Attachments[0].Path
 
-	// {root}/{group}/{item}/{attachment}
-	assert.Equal(t, path.Join("/", tGroup.ID.String(), "documents"), path.Dir(storedPath))
+	// path should now be relative: {group}/{documents}
+	assert.Equal(t, path.Join(tGroup.ID.String(), "documents"), path.Dir(storedPath))
 
 	// Check that the file contents are correct
 	bts, err := os.ReadFile(path.Join(os.TempDir(), storedPath))

backend/internal/data/migrations/postgres/20250826000000_make_attachment_paths_relative.sql

@@ -0,0 +1,25 @@
+-- +goose Up
+-- Make attachment paths relative by removing the prefix path
+-- This migration converts absolute paths to relative paths by finding the UUID/documents pattern
+
+-- Update Unix-style paths that contain "/documents/" by extracting the part starting from the UUID
+-- The approach: find the "/documents/" substring, go back 37 characters (UUID + slash), 
+-- and extract from there to get "uuid/documents/hash"
+UPDATE attachments 
+SET path = SUBSTRING(path FROM POSITION('/documents/' IN path) - 36)
+WHERE path LIKE '%/documents/%' 
+  AND POSITION('/documents/' IN path) > 36;
+
+-- Update Windows-style paths that contain "\documents\" by extracting the part starting from the UUID
+-- Convert backslashes to forward slashes in the process for consistency
+UPDATE attachments 
+SET path = REPLACE(SUBSTRING(path FROM POSITION('\documents\' IN path) - 36), '\', '/')
+WHERE path LIKE '%\documents\%' 
+  AND POSITION('\documents\' IN path) > 36;
+
+-- For paths that already look like relative paths (start with UUID), leave them unchanged
+-- This handles cases where the migration might be run multiple times
+
+-- +goose Down
+-- Note: This down migration cannot be safely implemented because we don't know 
+-- what the original prefix paths were. This is a one-way migration.

backend/internal/data/migrations/sqlite3/20250826000000_make_attachment_paths_relative.sql

@@ -0,0 +1,25 @@
+-- +goose Up
+-- Make attachment paths relative by removing the prefix path
+-- This migration converts absolute paths to relative paths by finding the UUID/documents pattern
+
+-- Update Unix-style paths that contain "/documents/" by extracting the part starting from the UUID
+-- The approach: find the "/documents/" substring, go back 37 characters (UUID + slash), 
+-- and extract from there to get "uuid/documents/hash"
+UPDATE attachments 
+SET path = SUBSTR(path, INSTR(path, '/documents/') - 36)
+WHERE path LIKE '%/documents/%' 
+  AND INSTR(path, '/documents/') > 36;
+
+-- Update Windows-style paths that contain "\documents\" by extracting the part starting from the UUID
+-- Convert backslashes to forward slashes in the process for consistency
+UPDATE attachments 
+SET path = REPLACE(SUBSTR(path, INSTR(path, '\documents\') - 36), '\', '/')
+WHERE path LIKE '%\documents\%' 
+  AND INSTR(path, '\documents\') > 36;
+
+-- For paths that already look like relative paths (start with UUID), leave them unchanged
+-- This handles cases where the migration might be run multiple times
+
+-- +goose Down
+-- Note: This down migration cannot be safely implemented because we don't know 
+-- what the original prefix paths were. This is a one-way migration.

backend/internal/data/repo/repo_item_attachments.go

@@ -98,7 +98,15 @@ func ToItemAttachment(attachment *ent.Attachment) ItemAttachment {
 }
 
 func (r *AttachmentRepo) path(gid uuid.UUID, hash string) string {
-	return filepath.Join(r.storage.PrefixPath, gid.String(), "documents", hash)
+	return filepath.Join(gid.String(), "documents", hash)
+}
+
+func (r *AttachmentRepo) fullPath(relativePath string) string {
+	return filepath.Join(r.storage.PrefixPath, relativePath)
+}
+
+func (r *AttachmentRepo) GetFullPath(relativePath string) string {
+	return r.fullPath(relativePath)
 }
 
 func (r *AttachmentRepo) GetConnString() string {
@@ -385,7 +393,7 @@ func (r *AttachmentRepo) Delete(ctx context.Context, gid uuid.UUID, itemId uuid.
 				log.Err(err).Msg("failed to open bucket for thumbnail deletion")
 				return err
 			}
-			err = thumbBucket.Delete(ctx, thumb.Path)
+			err = thumbBucket.Delete(ctx, r.fullPath(thumb.Path))
 			if err != nil {
 				return err
 			}
@@ -407,7 +415,7 @@ func (r *AttachmentRepo) Delete(ctx context.Context, gid uuid.UUID, itemId uuid.
 				log.Err(err).Msg("failed to close bucket")
 			}
 		}(bucket)
-		err = bucket.Delete(ctx, doc.Path)
+		err = bucket.Delete(ctx, r.fullPath(doc.Path))
 		if err != nil {
 			return err
 		}
@@ -475,7 +483,7 @@ func (r *AttachmentRepo) CreateThumbnail(ctx context.Context, groupId, attachmen
 		}
 	}(bucket)
 
-	origFile, err := bucket.Open(path)
+	origFile, err := bucket.Open(r.fullPath(path))
 	if err != nil {
 		err := tx.Rollback()
 		if err != nil {
@@ -785,14 +793,15 @@ func (r *AttachmentRepo) UploadFile(ctx context.Context, itemGroup *ent.Group, d
 		ContentType: contentType,
 		ContentMD5:  md5hash.Sum(nil),
 	}
-	path := r.path(itemGroup.ID, fmt.Sprintf("%x", hashOut))
-	err = bucket.WriteAll(ctx, path, contentBytes, options)
+	relativePath := r.path(itemGroup.ID, fmt.Sprintf("%x", hashOut))
+	fullPath := r.fullPath(relativePath)
+	err = bucket.WriteAll(ctx, fullPath, contentBytes, options)
 	if err != nil {
 		log.Err(err).Msg("failed to write file to bucket")
 		return "", err
 	}
 
-	return path, nil
+	return relativePath, nil
 }
 
 func isImageFile(mimetype string) bool {
@@ -842,7 +851,7 @@ func (r *AttachmentRepo) processThumbnailFromImage(ctx context.Context, groupId
 	}
 	newWidth, newHeight := calculateThumbnailDimensions(bounds.Dx(), bounds.Dy(), r.thumbnail.Width, r.thumbnail.Height)
 	dst := image.NewRGBA(image.Rect(0, 0, newWidth, newHeight))
-	draw.ApproxBiLinear.Scale(dst, dst.Rect, img, img.Bounds(), draw.Over, nil)
+	draw.CatmullRom.Scale(dst, dst.Rect, img, img.Bounds(), draw.Over, nil)
 
 	buf := new(bytes.Buffer)
 	err := webp.Encode(buf, dst, webp.Options{Quality: 80, Lossless: false})

backend/internal/data/repo/repo_items.go

@@ -120,9 +120,11 @@ type (
 	}
 
 	ItemPatch struct {
-		ID        uuid.UUID `json:"id"`
-		Quantity  *int      `json:"quantity,omitempty" extensions:"x-nullable,x-omitempty"`
-		ImportRef *string   `json:"-,omitempty"        extensions:"x-nullable,x-omitempty"`
+		ID         uuid.UUID   `json:"id"`
+		Quantity   *int        `json:"quantity,omitempty" extensions:"x-nullable,x-omitempty"`
+		ImportRef  *string     `json:"-,omitempty"        extensions:"x-nullable,x-omitempty"`
+		LocationID uuid.UUID   `json:"locationId"         extensions:"x-nullable,x-omitempty"`
+		LabelIDs   []uuid.UUID `json:"labelIds"           extensions:"x-nullable,x-omitempty"`
 	}
 
 	ItemSummary struct {
@@ -814,7 +816,20 @@ func (e *ItemsRepository) GetAllZeroImportRef(ctx context.Context, gid uuid.UUID
 }
 
 func (e *ItemsRepository) Patch(ctx context.Context, gid, id uuid.UUID, data ItemPatch) error {
-	q := e.db.Item.Update().
+	tx, err := e.db.Tx(ctx)
+	if err != nil {
+		return err
+	}
+	committed := false
+	defer func() {
+		if !committed {
+			if err := tx.Rollback(); err != nil {
+				log.Warn().Err(err).Msg("failed to rollback transaction during item patch")
+			}
+		}
+	}()
+
+	q := tx.Item.Update().
 		Where(
 			item.ID(id),
 			item.HasGroupWith(group.ID(gid)),
@@ -828,8 +843,81 @@ func (e *ItemsRepository) Patch(ctx context.Context, gid, id uuid.UUID, data Ite
 		q.SetQuantity(*data.Quantity)
 	}
 
+	if data.LocationID != uuid.Nil {
+		q.SetLocationID(data.LocationID)
+	}
+
+	err = q.Exec(ctx)
+	if err != nil {
+		return err
+	}
+
+	if data.LabelIDs != nil {
+		currentLabels, err := tx.Item.Query().Where(item.ID(id), item.HasGroupWith(group.ID(gid))).QueryLabel().All(ctx)
+		if err != nil {
+			return err
+		}
+		set := newIDSet(currentLabels)
+
+		addLabels := []uuid.UUID{}
+		for _, l := range data.LabelIDs {
+			if set.Contains(l) {
+				set.Remove(l)
+			} else {
+				addLabels = append(addLabels, l)
+			}
+		}
+
+		if len(addLabels) > 0 {
+			if err := tx.Item.Update().
+				Where(item.ID(id), item.HasGroupWith(group.ID(gid))).
+				AddLabelIDs(addLabels...).
+				Exec(ctx); err != nil {
+				return err
+			}
+		}
+		if set.Len() > 0 {
+			if err := tx.Item.Update().
+				Where(item.ID(id), item.HasGroupWith(group.ID(gid))).
+				RemoveLabelIDs(set.Slice()...).
+				Exec(ctx); err != nil {
+				return err
+			}
+		}
+	}
+
+	if data.LocationID != uuid.Nil {
+		itemEnt, err := tx.Item.Query().Where(item.ID(id), item.HasGroupWith(group.ID(gid))).Only(ctx)
+		if err != nil {
+			return err
+		}
+		if itemEnt.SyncChildItemsLocations {
+			children, err := tx.Item.Query().Where(item.ID(id), item.HasGroupWith(group.ID(gid))).QueryChildren().All(ctx)
+			if err != nil {
+				return err
+			}
+			for _, child := range children {
+				childLocation, err := child.QueryLocation().First(ctx)
+				if err != nil {
+					return err
+				}
+				if data.LocationID != childLocation.ID {
+					err = child.Update().SetLocationID(data.LocationID).Exec(ctx)
+					if err != nil {
+						return err
+					}
+				}
+			}
+		}
+	}
+
+	if err := tx.Commit(); err != nil {
+		return err
+	}
+	committed = true
+
 	e.publishMutationEvent(gid)
-	return q.Exec(ctx)
+	return nil
 }
 
 func (e *ItemsRepository) GetAllCustomFieldValues(ctx context.Context, gid uuid.UUID, name string) ([]string, error) {

backend/internal/sys/config/conf_database.go

@@ -17,7 +17,7 @@ type Database struct {
 	Host             string `yaml:"host"`
 	Port             string `yaml:"port"`
 	Database         string `yaml:"database"`
-	SslMode          string `yaml:"ssl_mode"           conf:"default:prefer"`
+	SslMode          string `yaml:"ssl_mode"           conf:"default:require"`
 	SslRootCert      string `yaml:"ssl_rootcert"`
 	SslCert          string `yaml:"ssl_cert"`
 	SslKey           string `yaml:"ssl_key"`

docs/en/api/index.md

@@ -50,7 +50,7 @@ document.head.appendChild(elementStyle);
 <client-only>
   <elements-api
     :key="componentKey"
-    apiDescriptionUrl="https://raw.githubusercontent.com/sysadminsmedia/homebox/refs/heads/main/docs/en/api/openapi-2.0.json"
+    apiDescriptionUrl="https://raw.githubusercontent.com/sysadminsmedia/homebox/refs/heads/main/docs/en/api/openapi-3.0.json"
     router="hash"
     layout="responsive"
     hideSchemas="true"

docs/en/api/swagger-2.0.json

@@ -2238,6 +2238,9 @@
                 "code": {
                     "type": "string"
                 },
+                "decimals": {
+                    "type": "integer"
+                },
                 "local": {
                     "type": "string"
                 },
@@ -3478,6 +3481,19 @@
                 "id": {
                     "type": "string"
                 },
+                "labelIds": {
+                    "type": "array",
+                    "items": {
+                        "type": "string"
+                    },
+                    "x-nullable": true,
+                    "x-omitempty": true
+                },
+                "locationId": {
+                    "type": "string",
+                    "x-nullable": true,
+                    "x-omitempty": true
+                },
                 "quantity": {
                     "type": "integer",
                     "x-nullable": true,

docs/en/api/swagger-2.0.yaml

@@ -34,6 +34,8 @@ definitions:
     properties:
       code:
         type: string
+      decimals:
+        type: integer
       local:
         type: string
       name:
@@ -873,6 +875,16 @@ definitions:
     properties:
       id:
         type: string
+      labelIds:
+        items:
+          type: string
+        type: array
+        x-nullable: true
+        x-omitempty: true
+      locationId:
+        type: string
+        x-nullable: true
+        x-omitempty: true
       quantity:
         type: integer
         x-nullable: true

docs/en/configure/index.md

@@ -14,7 +14,7 @@ aside: false
 | HBOX_WEB_HOST                           |                                                                            | host to run the web server on, if you're using docker do not change this. see below for examples                                                                                          |
 | HBOX_OPTIONS_ALLOW_REGISTRATION         | true                                                                       | allow users to register themselves                                                                                                                                                        |
 | HBOX_OPTIONS_AUTO_INCREMENT_ASSET_ID    | true                                                                       | auto-increments the asset_id field for new items                                                                                                                                          |
-| HBOX_OPTIONS_CURRENCY_CONFIG            |                                                                            | json configuration file containing additional currencie                                                                                                                                   |
+| HBOX_OPTIONS_CURRENCY_CONFIG            |                                                                            | json configuration file containing additional currencies                                                                                                                                   |
 | HBOX_OPTIONS_ALLOW_ANALYTICS            | false                                                                      | Allows the homebox team to view extremely basic information about the system that your running on. This helps make decisions regarding builds and other general decisions.                |
 | HBOX_WEB_MAX_UPLOAD_SIZE                | 10                                                                         | maximum file upload size supported in MB                                                                                                                                                  |
 | HBOX_WEB_READ_TIMEOUT                   | 10s                                                                        | Read timeout of HTTP sever                                                                                                                                                                |

docs/en/user-guide/tips-tricks.md

@@ -102,3 +102,11 @@ The copy to clipboard functionality requires a secure context (HTTPS or localhos
 To enable this feature:
 - Use HTTPS by setting up a reverse proxy (like Nginx or Caddy)
 - OR access Homebox through localhost
+
+## Open Multiple Items in New Tabs
+
+By default browsers prevent opening multiple tabs with one click, to allow for the `View Items` button to work you therefore need to enable a setting usually called `Allow pop-ups and redirects` or similar for the domain you're using Homebox on.
+
+- Chrome: [Block or allow pop-ups in Chrome](https://support.google.com/chrome/answer/95472?hl=en-GB&co=GENIE.Platform%3DDesktop#zippy=%2Callow-pop-ups-and-redirects-from-a-site)
+- Firefox: [Pop-up blocker settings, exceptions and troubleshooting](https://support.mozilla.org/en-US/kb/pop-blocker-settings-exceptions-troubleshooting)
+- Safari: [Block pop-up ads and windows in Safari](https://support.apple.com/en-gb/102524)

frontend/.eslintrc.js

@@ -1,55 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2021: true,
-    node: true,
-  },
-  extends: [
-    "eslint:recommended",
-    "plugin:vue/essential",
-    "plugin:@typescript-eslint/recommended",
-    "@nuxtjs/eslint-config-typescript",
-    "plugin:vue/vue3-recommended",
-    "plugin:prettier/recommended",
-    "plugin:tailwindcss/recommended",
-  ],
-  parserOptions: {
-    ecmaVersion: "latest",
-    parser: "@typescript-eslint/parser",
-    sourceType: "module",
-  },
-  plugins: ["vue", "@typescript-eslint"],
-  rules: {
-    "no-console": 0,
-    "no-unused-vars": "off",
-    "vue/multi-word-component-names": "off",
-    "vue/no-setup-props-destructure": 0,
-    "vue/no-multiple-template-root": 0,
-    "vue/no-v-model-argument": 0,
-    "vue/no-v-html": 0,
-    "@typescript-eslint/consistent-type-imports": "error",
-    "@typescript-eslint/ban-ts-comment": 0,
-    "tailwindcss/no-custom-classname": "warn",
-    "@typescript-eslint/no-unused-vars": [
-      "error",
-      {
-        ignoreRestSiblings: true,
-        destructuredArrayIgnorePattern: "_",
-        caughtErrors: "none",
-      },
-    ],
-    "prettier/prettier": [
-      "warn",
-      {
-        arrowParens: "avoid",
-        semi: true,
-        tabWidth: 2,
-        useTabs: false,
-        vueIndentScriptAndStyle: true,
-        singleQuote: false,
-        trailingComma: "es5",
-        printWidth: 120,
-      },
-    ],
-  },
-};

frontend/app.vue

@@ -6,7 +6,7 @@
 
     <NuxtLayout>
       <Html :lang="locale" :data-theme="theme || 'homebox'" />
-      <Link rel="icon" type="image/svg" href="/favicon.svg"></Link>
+      <Link rel="icon" type="image/svg" href="/favicon.svg" />
       <Link rel="apple-touch-icon" href="/apple-touch-icon.png" size="180x180" />
       <Link rel="mask-icon" href="/mask-icon.svg" color="#5b7f67" />
       <Meta name="theme-color" content="#5b7f67" />

frontend/components/App/CreateModal.vue

@@ -47,7 +47,8 @@
   import { useMediaQuery } from "@vueuse/core";
   import type { DialogID } from "@/components/ui/dialog-provider/utils";
   import { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from "@/components/ui/drawer";
-  import { Dialog, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+  import { Dialog, DialogFooter, DialogHeader, DialogScrollContent, DialogTitle } from "@/components/ui/dialog";
+  import { Shortcut } from "@/components/ui/shortcut";
 
   const isDesktop = useMediaQuery("(min-width: 768px)");
 

frontend/components/App/ImportDialog.vue

@@ -51,7 +51,7 @@
   import { Button } from "@/components/ui/button";
   import { Input } from "@/components/ui/input";
   type Props = {
-    modelValue: boolean;
+    modelValue?: boolean;
   };
 
   const { t } = useI18n();
@@ -66,13 +66,13 @@
 
   const api = useUserApi();
 
-  const importCsv = ref<File | null>(null);
+  const importCsv = ref<File | undefined>(undefined);
   const importLoading = ref(false);
   const importRef = ref<HTMLInputElement>();
   whenever(
     () => !dialog.value,
     () => {
-      importCsv.value = null;
+      importCsv.value = undefined;
     }
   );
 
@@ -102,7 +102,7 @@
     // Reset
     dialog.value = false;
     importLoading.value = false;
-    importCsv.value = null;
+    importCsv.value = undefined;
 
     if (importRef.value) {
       importRef.value.value = "";

frontend/components/App/OutdatedModal.vue

@@ -29,12 +29,12 @@
   import { lt } from "semver";
   import {
     AlertDialog,
+    AlertDialogAction,
     AlertDialogContent,
-    AlertDialogHeader,
-    AlertDialogTitle,
     AlertDialogDescription,
     AlertDialogFooter,
-    AlertDialogAction,
+    AlertDialogHeader,
+    AlertDialogTitle,
   } from "@/components/ui/alert-dialog";
   import { useDialog } from "@/components/ui/dialog-provider";
 

frontend/components/App/QuickMenuModal.vue

@@ -3,11 +3,11 @@
   import { DialogID, type NoParamDialogIDs, type OptionalDialogIDs } from "@/components/ui/dialog-provider/utils";
   import {
     CommandDialog,
-    CommandInput,
-    CommandList,
     CommandEmpty,
     CommandGroup,
+    CommandInput,
     CommandItem,
+    CommandList,
     CommandSeparator,
   } from "~/components/ui/command";
   import { Shortcut } from "~/components/ui/shortcut";

frontend/components/App/ScannerModal.vue

@@ -33,7 +33,7 @@
           </ButtonGroup>
         </div>
         <!-- eslint-disable-next-line tailwindcss/no-custom-classname -->
-        <video ref="video" class="aspect-video w-full rounded-lg bg-muted shadow" poster="data:image/gif,AAAA"></video>
+        <video ref="video" class="aspect-video w-full rounded-lg bg-muted shadow" poster="data:image/gif,AAAA" />
         <div class="mt-4">
           <Select v-model="selectedSource">
             <SelectTrigger class="w-full">
@@ -52,13 +52,13 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, watch, computed } from "vue";
-  import { BrowserMultiFormatReader, NotFoundException, BarcodeFormat } from "@zxing/library";
+  import { computed, ref, watch } from "vue";
+  import { BarcodeFormat, BrowserMultiFormatReader, NotFoundException } from "@zxing/library";
   import { useI18n } from "vue-i18n";
   import { DialogID } from "@/components/ui/dialog-provider/utils";
-  import { Dialog, DialogHeader, DialogTitle, DialogScrollContent } from "@/components/ui/dialog";
-  import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select";
-  import { Button } from "@/components/ui/button";
+  import { Dialog, DialogHeader, DialogScrollContent, DialogTitle } from "@/components/ui/dialog";
+  import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+  import { Button, ButtonGroup } from "@/components/ui/button";
   import MdiBarcode from "~icons/mdi/barcode";
   import MdiAlertCircleOutline from "~icons/mdi/alert-circle-outline";
   import { useDialog } from "@/components/ui/dialog-provider";
@@ -113,12 +113,12 @@
 
       if (devices.length > 0) {
         for (let i = 0; i < devices.length; i++) {
-          if (devices[i].label.toLowerCase().includes("back")) {
-            selectedSource.value = devices[i].deviceId;
+          if (devices[i]!.label.toLowerCase().includes("back")) {
+            selectedSource.value = devices[i]!.deviceId;
           }
         }
         if (!selectedSource.value) {
-          selectedSource.value = devices[0].deviceId;
+          selectedSource.value = devices[0]!.deviceId;
         }
       } else {
         errorMessage.value = t("scanner.no_sources");

frontend/components/App/ThemePicker.vue

@@ -19,9 +19,9 @@
     >
       <div :data-theme="theme.value" class="w-full cursor-pointer bg-background-accent text-foreground">
         <div class="grid grid-cols-5 grid-rows-3">
-          <div class="col-start-1 row-start-1 bg-background"></div>
-          <div class="col-start-1 row-start-2 bg-sidebar"></div>
-          <div class="col-start-1 row-start-3 bg-background-accent"></div>
+          <div class="col-start-1 row-start-1 bg-background" />
+          <div class="col-start-1 row-start-2 bg-sidebar" />
+          <div class="col-start-1 row-start-3 bg-background-accent" />
           <div class="col-span-4 col-start-2 row-span-3 row-start-1 flex flex-col gap-1 bg-background p-2">
             <div class="font-bold">{{ theme.label }}</div>
             <div class="flex flex-wrap gap-1">

frontend/components/Base/Card.vue

@@ -3,7 +3,7 @@
     <CardHeader v-if="$slots.title" class="px-4 py-5 sm:px-6">
       <component :is="collapsable ? 'button' : 'div'" v-on="collapsable ? { click: toggle } : {}">
         <h3 class="flex items-center text-lg font-medium leading-6">
-          <slot name="title"></slot>
+          <slot name="title" />
           <template v-if="collapsable">
             <span class="ml-2 transition-transform" :class="{ 'rotate-180': collapsed }">
               <MdiChevronDown class="size-6" />
@@ -13,10 +13,10 @@
       </component>
       <div>
         <p v-if="$slots.subtitle" class="mt-1 max-w-2xl text-sm text-gray-500">
-          <slot name="subtitle"></slot>
+          <slot name="subtitle" />
         </p>
         <template v-if="$slots['title-actions']">
-          <slot name="title-actions"></slot>
+          <slot name="title-actions" />
         </template>
       </div>
     </CardHeader>

frontend/components/Base/SectionHeader.vue

@@ -3,6 +3,7 @@
     <CardTitle class="flex items-center">
       <slot />
     </CardTitle>
+    <slot name="subtitle" />
     <CardDescription v-if="$slots.description">
       <slot name="description" />
     </CardDescription>

frontend/components/DetailAction.vue

@@ -2,24 +2,24 @@
   <div class="flex flex-col gap-10 py-6 md:flex-row">
     <div class="flex-1">
       <h4 class="mb-1 text-lg font-semibold">
-        <slot name="title"></slot>
+        <slot name="title" />
       </h4>
       <p class="text-sm">
-        <slot></slot>
+        <slot />
       </p>
     </div>
     <div class="flex items-center">
       <template v-if="to">
         <NuxtLink :to="to" :class="buttonVariants({ size: 'lg' })" class="min-w-52 grow">
           <slot name="button">
-            <slot name="title"></slot>
+            <slot name="title" />
           </slot>
         </NuxtLink>
       </template>
       <template v-else>
         <Button class="min-w-52 grow" size="lg" @click="$emit('action')">
           <slot name="button">
-            <slot name="title"></slot>
+            <slot name="title" />
           </slot>
         </Button>
       </template>

frontend/components/Form/ColorSelector.vue

@@ -11,7 +11,7 @@
   const props = defineProps({
     modelValue: {
       type: String,
-      required: true,
+      required: false,
       default: "",
     },
     label: {
@@ -81,7 +81,7 @@
         :aria-label="`${t('components.color_selector.color')}: ${modelValue || t('components.color_selector.no_color_selected')}`"
         role="button"
         tabindex="0"
-        @click="$refs.colorInput.click()"
+        @click="($refs.colorInput as HTMLInputElement).click()"
       />
       <span v-if="showHex" class="font-mono text-xs text-muted-foreground">{{
         modelValue || t("components.color_selector.no_color")
@@ -122,7 +122,7 @@
         :aria-label="`${t('components.color_selector.color')}: ${modelValue || t('components.color_selector.no_color_selected')}`"
         role="button"
         tabindex="0"
-        @click="$refs.colorInput.click()"
+        @click="($refs.colorInput as HTMLInputElement).click()"
       />
       <span v-if="showHex" class="font-mono text-xs text-muted-foreground">{{
         modelValue || t("components.color_selector.no_color")

frontend/components/Form/DatePicker.vue

@@ -10,7 +10,6 @@
 </template>
 
 <script setup lang="ts">
-  // @ts-ignore
   import VueDatePicker from "@vuepic/vue-datepicker";
   import "@vuepic/vue-datepicker/dist/main.css";
   import * as datelib from "~/lib/datelib/datelib";

frontend/components/Form/Password.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="relative">
-    <FormTextField v-model="value" :placeholder="localizedPlaceholder" :label="localizedLabel" :type="inputType">
-    </FormTextField>
+    <FormTextField v-model="value" :placeholder="localizedPlaceholder" :label="localizedLabel" :type="inputType" />
     <TooltipProvider :delay-duration="0">
       <Tooltip>
         <TooltipTrigger as-child>
@@ -22,7 +21,8 @@
 <script setup lang="ts">
   import { useI18n } from "vue-i18n";
   import MdiEye from "~icons/mdi/eye";
-  import { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider } from "@/components/ui/tooltip";
+  import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+  import FormTextField from "@/components/Form/TextField.vue";
 
   const { t } = useI18n();
   type Props = {

frontend/components/Form/TextArea.vue

@@ -2,7 +2,7 @@
   <div v-if="!inline" class="flex w-full flex-col gap-1.5">
     <Label :for="id" class="flex w-full px-1">
       <span>{{ label }}</span>
-      <span class="grow"></span>
+      <span class="grow" />
       <span :class="{ 'text-destructive': isLengthInvalid }">
         {{ lengthIndicator }}
       </span>
@@ -18,7 +18,7 @@
   <div v-else class="sm:grid sm:grid-cols-4 sm:items-start sm:gap-4">
     <Label :for="id" class="flex w-full px-1 py-2">
       <span>{{ label }}</span>
-      <span class="grow"></span>
+      <span class="grow" />
       <span :class="{ 'text-destructive': isLengthInvalid }">
         {{ lengthIndicator }}
       </span>

frontend/components/Form/TextField.vue

@@ -2,7 +2,7 @@
   <div v-if="!inline" class="flex w-full flex-col gap-1.5">
     <Label :for="id" class="flex w-full px-1">
       <span> {{ label }} </span>
-      <span class="grow"></span>
+      <span class="grow" />
       <span
         :class="{
           'text-destructive':
@@ -26,7 +26,7 @@
   <div v-else class="sm:grid sm:grid-cols-4 sm:items-start sm:gap-4">
     <Label class="flex w-full px-1 py-2" :for="id">
       <span> {{ label }} </span>
-      <span class="grow"></span>
+      <span class="grow" />
       <span
         :class="{
           'text-destructive':

frontend/components/Item/AttachmentsList.vue

@@ -43,7 +43,7 @@
   import MdiDownload from "~icons/mdi/download";
   import MdiOpenInNew from "~icons/mdi/open-in-new";
   import { buttonVariants } from "@/components/ui/button";
-  import { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider } from "@/components/ui/tooltip";
+  import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 
   const props = defineProps({
     attachments: {

frontend/components/Item/BarcodeModal.vue

@@ -115,7 +115,11 @@
   import MdiAlertCircleOutline from "~icons/mdi/alert-circle-outline";
   import MdiBarcode from "~icons/mdi/barcode";
   import MdiLoading from "~icons/mdi/loading";
-  import type { TableData } from "~/components/Item/View/Table.types";
+  import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+  import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+  import { Separator } from "@/components/ui/separator";
+  import BaseCard from "@/components/Base/Card.vue";
+  import FormTextField from "@/components/Form/TextField.vue";
 
   const { openDialog, registerOpenDialogCallback } = useDialog();
   const { t } = useI18n();
@@ -220,7 +224,8 @@
     }
   }
 
-  function extractValue(data: TableData, value: string) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  function extractValue(data: Record<string, any>, value: string) {
     const parts = value.split(".");
     let current = data;
     for (const part of parts) {

frontend/components/Item/Card.vue

@@ -1,8 +1,30 @@
 <template>
-  <Card class="overflow-hidden">
+  <Card class="relative overflow-hidden">
+    <div v-if="tableRow" class="absolute left-1 top-1 z-10">
+      <Checkbox
+        class="size-5 bg-accent hover:bg-background-accent"
+        :model-value="tableRow.getIsSelected()"
+        :aria-label="$t('components.item.view.selectable.select_card')"
+        @update:model-value="tableRow.toggleSelected()"
+      />
+    </div>
     <NuxtLink :to="`/item/${item.id}`">
       <div class="relative h-[200px]">
-        <img v-if="imageUrl" class="h-[200px] w-full object-cover shadow-md" loading="lazy" :src="imageUrl" alt="" />
+        <img
+          v-if="imageUrl && objectContain"
+          class="absolute h-[200px] w-full object-cover blur-md"
+          loading="lazy"
+          :src="imageUrl"
+          alt=""
+        />
+        <img
+          v-if="imageUrl"
+          class="absolute h-[200px] w-full shadow-md"
+          :class="objectContain ? 'object-contain' : 'object-cover'"
+          loading="lazy"
+          :src="imageUrl"
+          :alt="item.name"
+        />
         <div class="absolute inset-x-1 bottom-1">
           <Badge class="text-wrap bg-secondary text-secondary-foreground hover:bg-secondary/70 hover:underline">
             <NuxtLink v-if="item.location" :to="`/location/${item.location.id}`">
@@ -32,7 +54,7 @@
                 {{ $t("global.archived") }}
               </TooltipContent>
             </Tooltip>
-            <div class="grow"></div>
+            <div class="grow" />
             <Tooltip>
               <TooltipTrigger>
                 <Badge>
@@ -62,8 +84,13 @@
   import { Card } from "@/components/ui/card";
   import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
   import { Separator } from "@/components/ui/separator";
+  import Markdown from "@/components/global/Markdown.vue";
+  import LabelChip from "@/components/Label/Chip.vue";
+  import type { Row } from "@tanstack/vue-table";
+  import { Checkbox } from "@/components/ui/checkbox";
 
   const api = useUserApi();
+  const preferences = useViewPreferences();
 
   const imageUrl = computed(() => {
     if (!props.item.imageId) {
@@ -90,8 +117,15 @@
       required: false,
       default: () => [],
     },
+    tableRow: {
+      type: Object as () => Row<ItemSummary>,
+      required: false,
+      default: () => null,
+    },
   });
 
+  const objectContain = computed(() => imageUrl.value !== "/no-image.jpg" && !preferences.value.legacyImageFit);
+
   const locationString = computed(
     () => props.locationFlatTree.find(l => l.id === props.item.location?.id)?.treeString || props.item.location?.name
   );

frontend/components/Item/CreateModal.vue

@@ -39,6 +39,8 @@
         :items="results"
         item-text="name"
         no-results-text="Type to search..."
+        :is-loading="isLoading"
+        :trigger-search="triggerSearch"
       />
       <FormTextField
         ref="nameInput"
@@ -190,6 +192,10 @@
   import { useDialog, useDialogHotkey } from "~/components/ui/dialog-provider";
   import LabelSelector from "~/components/Label/Selector.vue";
   import ItemSelector from "~/components/Item/Selector.vue";
+  import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "~/components/ui/tooltip";
+  import LocationSelector from "~/components/Location/Selector.vue";
+  import FormTextField from "~/components/Form/TextField.vue";
+  import FormTextArea from "~/components/Form/TextArea.vue";
 
   interface PhotoPreview {
     photoName: string;
@@ -215,7 +221,7 @@
   const router = useRouter();
 
   const parent = ref();
-  const { query, results } = useItemSearch(api, { immediate: false });
+  const { query, results, isLoading, triggerSearch } = useItemSearch(api, { immediate: false });
   const subItemCreateParam = useRouteQuery("subItemCreate", "n");
   const subItemCreate = ref();
 
@@ -276,8 +282,8 @@
   function setPrimary(index: number) {
     const primary = form.photos.findIndex(p => p.primary);
 
-    if (primary !== -1) form.photos[primary].primary = false;
-    if (primary !== index) form.photos[index].primary = true;
+    if (primary !== -1) form.photos[primary]!.primary = false;
+    if (primary !== index) form.photos[index]!.primary = true;
   }
 
   function previewImage(event: Event) {
@@ -306,7 +312,7 @@
       let parentItemLocationId = null;
 
       if (subItemCreate.value && itemId.value) {
-        const itemIdRead = typeof itemId.value === "string" ? (itemId.value as string) : itemId.value[0];
+        const itemIdRead = typeof itemId.value === "string" ? (itemId.value as string) : itemId.value[0]!;
         const { data, error } = await api.items.get(itemIdRead);
         if (error || !data) {
           toast.error(t("components.item.create_modal.toast.failed_load_parent"));
@@ -376,7 +382,7 @@
 
     loading.value = true;
 
-    if (shift.value) close = false;
+    if (shift?.value) close = false;
 
     const out: ItemCreate = {
       parentId: form.parentId,
@@ -440,7 +446,7 @@
   function dataURLtoFile(dataURL: string, fileName: string) {
     try {
       const arr = dataURL.split(",");
-      const mimeMatch = arr[0].match(/:(.*?);/);
+      const mimeMatch = arr[0]!.match(/:(.*?);/);
       if (!mimeMatch || !mimeMatch[1]) {
         throw new Error("Invalid data URL format");
       }
@@ -451,7 +457,7 @@
         throw new Error("Invalid mime type, expected image");
       }
 
-      const bstr = atob(arr[arr.length - 1]);
+      const bstr = atob(arr[arr.length - 1]!);
       let n = bstr.length;
       const u8arr = new Uint8Array(n);
       while (n--) {
@@ -500,8 +506,8 @@
 
     // Encode image to data-uri with base64
     try {
-      form.photos[index].fileBase64 = offScreenCanvas.toDataURL(imageType, 100);
-      form.photos[index].file = dataURLtoFile(form.photos[index].fileBase64, form.photos[index].photoName);
+      form.photos[index]!.fileBase64 = offScreenCanvas.toDataURL(imageType, 100);
+      form.photos[index]!.file = dataURLtoFile(form.photos[index]!.fileBase64, form.photos[index]!.photoName);
     } catch (error) {
       toast.error(t("components.item.create_modal.toast.rotate_process_failed"));
       console.error(error);

frontend/components/Item/ImageDialog.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
   import { useI18n } from "vue-i18n";
   import { Dialog, DialogContent } from "@/components/ui/dialog";
-  import { buttonVariants, Button } from "@/components/ui/button";
+  import { Button, buttonVariants } from "@/components/ui/button";
   import { useDialog } from "@/components/ui/dialog-provider";
   import { DialogID } from "~/components/ui/dialog-provider/utils";
   import { useConfirm } from "@/composables/use-confirm";

frontend/components/Item/Selector.vue

@@ -18,7 +18,13 @@
         <Command :ignore-filter="true">
           <CommandInput v-model="search" :placeholder="localizedSearchPlaceholder" :display-value="_ => ''" />
           <CommandEmpty>
-            {{ localizedNoResultsText }}
+            <div v-if="isLoading" class="flex items-center justify-center p-4">
+              <div class="size-4 animate-spin rounded-full border-2 border-primary border-t-transparent"></div>
+              <span class="ml-2">{{ t("components.item.selector.searching") }}</span>
+            </div>
+            <div v-else>
+              {{ localizedNoResultsText }}
+            </div>
           </CommandEmpty>
           <CommandList>
             <CommandGroup>
@@ -37,7 +43,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, computed, watch } from "vue";
+  import { computed, ref, watch } from "vue";
   import { Check, ChevronsUpDown } from "lucide-vue-next";
   import fuzzysort from "fuzzysort";
   import { useVModel } from "@vueuse/core";
@@ -47,7 +53,6 @@
   import { Label } from "~/components/ui/label";
   import { Popover, PopoverContent, PopoverTrigger } from "~/components/ui/popover";
   import { cn } from "~/lib/utils";
-  import { useId } from "#imports";
 
   const { t } = useI18n();
 
@@ -56,9 +61,9 @@
   };
 
   interface Props {
-    label: string;
-    modelValue: string | ItemsObject | null | undefined;
-    items: ItemsObject[] | string[];
+    label?: string;
+    modelValue?: string | ItemsObject | null | undefined;
+    items?: ItemsObject[] | string[];
     itemText?: string;
     itemValue?: string;
     search?: string;
@@ -66,6 +71,8 @@
     noResultsText?: string;
     placeholder?: string;
     excludeItems?: ItemsObject[];
+    isLoading?: boolean;
+    triggerSearch?: () => Promise<boolean>;
   }
 
   const emit = defineEmits(["update:modelValue", "update:search"]);
@@ -80,12 +87,15 @@
     noResultsText: undefined,
     placeholder: undefined,
     excludeItems: undefined,
+    isLoading: false,
+    triggerSearch: undefined,
   });
 
   const id = useId();
   const open = ref(false);
   const search = ref(props.search);
   const value = useVModel(props, "modelValue", emit);
+  const hasInitialSearch = ref(false);
 
   const localizedSearchPlaceholder = computed(
     () => props.searchPlaceholder ?? t("components.item.selector.search_placeholder")
@@ -93,6 +103,32 @@
   const localizedNoResultsText = computed(() => props.noResultsText ?? t("components.item.selector.no_results"));
   const localizedPlaceholder = computed(() => props.placeholder ?? t("components.item.selector.placeholder"));
 
+  // Trigger search when popover opens for the first time if no results exist
+  async function handlePopoverOpen() {
+    if (hasInitialSearch.value || props.items.length !== 0 || !props.triggerSearch) return;
+
+    try {
+      const success = await props.triggerSearch();
+      if (success) {
+        // Only mark as attempted after successful completion
+        hasInitialSearch.value = true;
+      }
+      // If not successful, leave hasInitialSearch false to allow retries
+    } catch (err) {
+      console.error("triggerSearch failed:", err);
+      // Leave hasInitialSearch false to allow retries on subsequent opens
+    }
+  }
+
+  watch(
+    () => open.value,
+    isOpen => {
+      if (isOpen) {
+        handlePopoverOpen();
+      }
+    }
+  );
+
   watch(
     () => props.search,
     val => {
@@ -108,7 +144,7 @@
   );
 
   function isStrings(arr: string[] | ItemsObject[]): arr is string[] {
-    return typeof arr[0] === "string";
+    return arr.length > 0 && typeof arr[0] === "string";
   }
 
   function displayValue(item: string | ItemsObject | null | undefined): string {

frontend/components/Item/View/ItemChangeDetails.vue

@@ -0,0 +1,169 @@
+<script setup lang="ts">
+  import { Dialog, DialogContent, DialogFooter, DialogTitle, DialogHeader } from "@/components/ui/dialog";
+  import { Button } from "@/components/ui/button";
+  import { useDialog } from "@/components/ui/dialog-provider";
+  import { DialogID } from "~/components/ui/dialog-provider/utils";
+  import type { ItemPatch, ItemSummary, LabelOut, LocationSummary } from "~/lib/api/types/data-contracts";
+  import LocationSelector from "~/components/Location/Selector.vue";
+  import MdiLoading from "~icons/mdi/loading";
+  import { toast } from "~/components/ui/sonner";
+  import { useI18n } from "vue-i18n";
+  import LabelSelector from "~/components/Label/Selector.vue";
+
+  const { closeDialog, registerOpenDialogCallback } = useDialog();
+
+  const api = useUserApi();
+  const { t } = useI18n();
+  const labelStore = useLabelStore();
+
+  const allLabels = computed(() => labelStore.labels);
+
+  const items = ref<ItemSummary[]>([]);
+  const saving = ref(false);
+
+  const enabled = reactive({
+    changeLocation: false,
+    addLabels: false,
+    removeLabels: false,
+  });
+
+  const newLocation = ref<LocationSummary | null>(null);
+  const addLabels = ref<string[]>([]);
+  const removeLabels = ref<string[]>([]);
+
+  const availableToAddLabels = ref<LabelOut[]>([]);
+  const availableToRemoveLabels = ref<LabelOut[]>([]);
+
+  const intersectLabelIds = (items: ItemSummary[]): string[] => {
+    if (items.length === 0) return [];
+    const counts = new Map<string, number>();
+    for (const it of items) {
+      const seen = new Set<string>();
+      for (const l of it.labels || []) seen.add(l.id);
+      for (const id of seen) counts.set(id, (counts.get(id) || 0) + 1);
+    }
+    return [...counts.entries()].filter(([_, c]) => c === items.length).map(([id]) => id);
+  };
+
+  const unionLabelIds = (items: ItemSummary[]): string[] => {
+    const s = new Set<string>();
+    for (const it of items) for (const l of it.labels || []) s.add(l.id);
+    return Array.from(s);
+  };
+
+  onMounted(() => {
+    const cleanup = registerOpenDialogCallback(DialogID.ItemChangeDetails, params => {
+      items.value = params.items;
+      enabled.changeLocation = params.changeLocation ?? false;
+      enabled.addLabels = params.addLabels ?? false;
+      enabled.removeLabels = params.removeLabels ?? false;
+
+      if (params.changeLocation && params.items.length > 0) {
+        // if all locations are the same then set the current location to said location
+        if (
+          params.items[0]!.location &&
+          params.items.every(item => item.location?.id === params.items[0]!.location?.id)
+        ) {
+          newLocation.value = params.items[0]!.location;
+        }
+      }
+
+      if (params.addLabels && params.items.length > 0) {
+        const intersection = intersectLabelIds(params.items);
+        availableToAddLabels.value = allLabels.value.filter(l => !intersection.includes(l.id));
+      }
+
+      if (params.removeLabels && params.items.length > 0) {
+        const union = unionLabelIds(params.items);
+        availableToRemoveLabels.value = allLabels.value.filter(l => union.includes(l.id));
+      }
+    });
+
+    onUnmounted(cleanup);
+  });
+
+  const save = async () => {
+    const location = newLocation.value;
+    const labelsToAdd = addLabels.value;
+    const labelsToRemove = removeLabels.value;
+    if (!items.value.length || (enabled.changeLocation && !location)) {
+      return;
+    }
+
+    saving.value = true;
+
+    await Promise.allSettled(
+      items.value.map(async item => {
+        const patch: ItemPatch = {
+          id: item.id,
+        };
+
+        if (enabled.changeLocation) {
+          patch.locationId = location!.id;
+        }
+
+        let currentLabels = item.labels.map(l => l.id);
+
+        if (enabled.addLabels) {
+          currentLabels = currentLabels.concat(labelsToAdd);
+        }
+
+        if (enabled.removeLabels) {
+          currentLabels = currentLabels.filter(l => !labelsToRemove.includes(l));
+        }
+
+        if (enabled.addLabels || enabled.removeLabels) {
+          patch.labelIds = Array.from(new Set(currentLabels));
+        }
+
+        const { error, data } = await api.items.patch(item.id, patch);
+
+        if (error) {
+          console.error("failed to update item", item.id, data);
+          toast.error(t("components.item.view.change_details.failed_to_update_item"));
+          return;
+        }
+      })
+    );
+
+    closeDialog(DialogID.ItemChangeDetails, true);
+    enabled.changeLocation = false;
+    enabled.addLabels = false;
+    enabled.removeLabels = false;
+    items.value = [];
+    addLabels.value = [];
+    removeLabels.value = [];
+    availableToAddLabels.value = [];
+    availableToRemoveLabels.value = [];
+    saving.value = false;
+  };
+</script>
+
+<template>
+  <Dialog :dialog-id="DialogID.ItemChangeDetails">
+    <DialogContent>
+      <DialogHeader>
+        <DialogTitle>{{ $t("components.item.view.change_details.title") }}</DialogTitle>
+      </DialogHeader>
+      <LocationSelector v-if="enabled.changeLocation" v-model="newLocation" />
+      <LabelSelector
+        v-if="enabled.addLabels"
+        v-model="addLabels"
+        :labels="availableToAddLabels"
+        :name="$t('components.item.view.change_details.add_labels')"
+      />
+      <LabelSelector
+        v-if="enabled.removeLabels"
+        v-model="removeLabels"
+        :labels="availableToRemoveLabels"
+        :name="$t('components.item.view.change_details.remove_labels')"
+      />
+      <DialogFooter>
+        <Button type="submit" :disabled="saving || (enabled.changeLocation && !newLocation)" @click="save">
+          <span v-if="!saving">{{ $t("global.save") }}</span>
+          <MdiLoading v-else class="animate-spin" />
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>

frontend/components/Item/View/Selectable.vue

@@ -5,15 +5,33 @@
   import MdiTable from "~icons/mdi/table";
   import { Badge } from "@/components/ui/badge";
   import { Button, ButtonGroup } from "@/components/ui/button";
+  import BaseSectionHeader from "@/components/Base/SectionHeader.vue";
+  import DataTable from "./table/data-table.vue";
+  import { makeColumns } from "./table/columns";
+  import { useI18n } from "vue-i18n";
+  import type { Pagination } from "./pagination";
+  import MaintenanceEditModal from "@/components/Maintenance/EditModal.vue";
+  import ItemChangeDetails from "./ItemChangeDetails.vue";
 
-  type Props = {
+  const props = defineProps<{
     view?: ViewType;
     items: ItemSummary[];
-  };
+    locationFlatTree?: FlatTreeItem[];
+    pagination?: Pagination;
+  }>();
+
+  const emit = defineEmits<{
+    (e: "refresh"): void;
+  }>();
 
   const preferences = useViewPreferences();
+  const { t } = useI18n();
+  const columns = computed(() =>
+    makeColumns(t, () => {
+      emit("refresh");
+    })
+  );
 
-  const props = defineProps<Props>();
   const viewSet = computed(() => {
     return !!props.view;
   });
@@ -25,17 +43,29 @@
   function setViewPreference(view: ViewType) {
     preferences.value.itemDisplayView = view;
   }
+
+  const externalPagination = computed(() => !!props.pagination);
 </script>
 
 <template>
   <section>
-    <BaseSectionHeader class="mb-2 mt-4 flex items-center justify-between">
+    <MaintenanceEditModal />
+    <ItemChangeDetails />
+
+    <BaseSectionHeader class="flex items-center justify-between" :class="{ 'mb-2 mt-4': !externalPagination }">
       <div class="flex gap-2 text-nowrap">
         {{ $t("components.item.view.selectable.items") }}
-        <Badge>
+        <Badge v-if="!externalPagination">
           {{ items.length }}
         </Badge>
       </div>
+      <template #subtitle>
+        <div
+          id="selectable-subtitle"
+          class="flex grow items-center px-2"
+          :class="{ hidden: !preferences.quickActions.enabled }"
+        />
+      </template>
       <template #description>
         <div v-if="!viewSet">
           <ButtonGroup>
@@ -56,15 +86,26 @@
       </template>
     </BaseSectionHeader>
 
-    <template v-if="itemView === 'table'">
-      <ItemViewTable :items="items" />
-    </template>
-    <template v-else>
-      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
-        <ItemCard v-for="item in items" :key="item.id" :item="item" />
-        <div class="hidden first:block">{{ $t("components.item.view.selectable.no_items") }}</div>
-      </div>
-    </template>
+    <p v-if="externalPagination && pagination!.totalSize > 0" class="mb-4 flex items-center text-base font-medium">
+      {{ $t("items.results", { total: pagination!.totalSize }) }}
+      <span class="ml-auto text-base">
+        {{
+          $t("items.pages", {
+            page: pagination!.page,
+            totalPages: Math.ceil(pagination!.totalSize / pagination!.pageSize),
+          })
+        }}
+      </span>
+    </p>
+
+    <DataTable
+      :view="itemView"
+      :columns="preferences.quickActions.enabled ? columns : columns.filter(c => c.enableHiding !== false)"
+      :data="items"
+      :location-flat-tree="locationFlatTree"
+      :external-pagination="pagination"
+      @refresh="$emit('refresh')"
+    />
   </section>
 </template>
 

frontend/components/Item/View/Table.types.ts

@@ -1,12 +0,0 @@
-import type { ItemSummary } from "~~/lib/api/types/data-contracts";
-
-export type TableHeaderType = {
-  text: string;
-  value: keyof ItemSummary;
-  sortable?: boolean;
-  align?: "left" | "center" | "right";
-  enabled: boolean;
-  type?: "price" | "boolean" | "name" | "location" | "date";
-};
-
-export type TableData = Record<string, any>;

frontend/components/Item/View/Table.vue

@@ -1,325 +1,19 @@
-<template>
-  <Dialog :dialog-id="DialogID.ItemTableSettings">
-    <DialogContent>
-      <DialogHeader>
-        <DialogTitle>{{ $t("components.item.view.table.table_settings") }}</DialogTitle>
-      </DialogHeader>
-
-      <div>{{ $t("components.item.view.table.headers") }}</div>
-      <div class="flex flex-col">
-        <div v-for="(h, i) in headers" :key="h.value" class="flex flex-row items-center gap-1">
-          <Button size="icon" class="size-6" variant="ghost" :disabled="i === 0" @click="moveHeader(i, i - 1)">
-            <MdiArrowUp />
-          </Button>
-          <Button
-            size="icon"
-            class="size-6"
-            variant="ghost"
-            :disabled="i === headers.length - 1"
-            @click="moveHeader(i, i + 1)"
-          >
-            <MdiArrowDown />
-          </Button>
-          <Checkbox :id="h.value" :model-value="h.enabled" @update:model-value="toggleHeader(h.value)" />
-          <label class="text-sm" :for="h.value"> {{ $t(h.text) }} </label>
-        </div>
-      </div>
-
-      <div class="flex flex-col gap-2">
-        <Label> {{ $t("components.item.view.table.rows_per_page") }} </Label>
-        <Select :model-value="pagination.rowsPerPage" @update:model-value="pagination.rowsPerPage = Number($event)">
-          <SelectTrigger>
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem :value="10">10</SelectItem>
-            <SelectItem :value="25">25</SelectItem>
-            <SelectItem :value="50">50</SelectItem>
-            <SelectItem :value="100">100</SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
-
-      <DialogFooter>
-        <Button @click="closeDialog(DialogID.ItemTableSettings)"> {{ $t("global.save") }} </Button>
-      </DialogFooter>
-    </DialogContent>
-  </Dialog>
-  <BaseCard>
-    <Table class="w-full">
-      <TableHeader>
-        <TableRow>
-          <TableHead
-            v-for="h in headers.filter(h => h.enabled)"
-            :key="h.value"
-            class="text-no-transform cursor-pointer bg-secondary text-sm text-secondary-foreground hover:bg-secondary/90"
-            @click="sortBy(h.value)"
-          >
-            <div
-              class="flex items-center gap-1"
-              :class="{
-                'justify-center': h.align === 'center',
-                'justify-start': h.align === 'right',
-                'justify-end': h.align === 'left',
-              }"
-            >
-              <template v-if="typeof h === 'string'">{{ h }}</template>
-              <template v-else>{{ $t(h.text) }}</template>
-              <div
-                :data-swap="pagination.descending"
-                :class="{ 'opacity-0': sortByProperty !== h.value }"
-                class="transition-transform duration-300 data-[swap=true]:rotate-180"
-              >
-                <MdiArrowUp class="size-5" />
-              </div>
-            </div>
-          </TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        <TableRow v-for="(d, i) in data" :key="d.id" class="relative cursor-pointer">
-          <TableCell
-            v-for="h in headers.filter(h => h.enabled)"
-            :key="`${h.value}-${i}`"
-            :class="{
-              'text-center': h.align === 'center',
-              'text-right': h.align === 'right',
-              'text-left': h.align === 'left',
-            }"
-          >
-            <template v-if="h.type === 'name'">
-              {{ d.name }}
-            </template>
-            <template v-else-if="h.type === 'price'">
-              <Currency :amount="d.purchasePrice" />
-            </template>
-            <template v-else-if="h.type === 'boolean'">
-              <MdiCheck v-if="d.insured" class="inline size-5 text-green-500" />
-              <MdiClose v-else class="inline size-5 text-destructive" />
-            </template>
-            <template v-else-if="h.type === 'location'">
-              <NuxtLink v-if="d.location" class="hover:underline" :to="`/location/${d.location.id}`">
-                {{ d.location.name }}
-              </NuxtLink>
-            </template>
-            <template v-else-if="h.type === 'date'">
-              <DateTime :date="d[h.value]" datetime-type="date" />
-            </template>
-            <slot v-else :name="cell(h)" v-bind="{ item: d }">
-              {{ extractValue(d, h.value) }}
-            </slot>
-          </TableCell>
-          <TableCell class="absolute inset-0">
-            <NuxtLink :to="`/item/${d.id}`" class="absolute inset-0">
-              <span class="sr-only">{{ $t("components.item.view.table.view_item") }}</span>
-            </NuxtLink>
-          </TableCell>
-        </TableRow>
-      </TableBody>
-    </Table>
-    <div
-      class="flex items-center justify-between gap-2 border-t p-3"
-      :class="{
-        hidden: disableControls,
-      }"
-    >
-      <Button class="size-10 p-0" variant="outline" @click="openDialog(DialogID.ItemTableSettings)">
-        <MdiTableCog />
-      </Button>
-      <Pagination
-        v-slot="{ page }"
-        :items-per-page="pagination.rowsPerPage"
-        :total="props.items.length"
-        :sibling-count="2"
-        @update:page="pagination.page = $event"
-      >
-        <PaginationList v-slot="{ pageItems }" class="flex items-center gap-1">
-          <PaginationFirst />
-          <template v-for="(item, index) in pageItems">
-            <PaginationListItem v-if="item.type === 'page'" :key="index" :value="item.value" as-child>
-              <Button class="size-10 p-0" :variant="item.value === page ? 'default' : 'outline'">
-                {{ item.value }}
-              </Button>
-            </PaginationListItem>
-            <PaginationEllipsis v-else :key="item.type" :index="index" />
-          </template>
-          <PaginationLast />
-        </PaginationList>
-      </Pagination>
-      <Button class="invisible hidden size-10 p-0 md:block">
-        <!-- properly centre the pagination buttons -->
-      </Button>
-    </div>
-  </BaseCard>
-</template>
-
 <script setup lang="ts">
-  import type { TableData, TableHeaderType } from "./Table.types";
-  import type { ItemSummary } from "~~/lib/api/types/data-contracts";
-  import MdiArrowDown from "~icons/mdi/arrow-down";
-  import MdiArrowUp from "~icons/mdi/arrow-up";
-  import MdiCheck from "~icons/mdi/check";
-  import MdiClose from "~icons/mdi/close";
-  import MdiTableCog from "~icons/mdi/table-cog";
-  import { Checkbox } from "@/components/ui/checkbox";
-  import { Table, TableBody, TableHeader, TableCell, TableHead, TableRow } from "@/components/ui/table";
-  import {
-    Pagination,
-    PaginationEllipsis,
-    PaginationFirst,
-    PaginationLast,
-    PaginationList,
-    PaginationListItem,
-  } from "@/components/ui/pagination";
-  import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-  import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
-  import { useDialog } from "@/components/ui/dialog-provider";
-  import { DialogID } from "~/components/ui/dialog-provider/utils";
+  import { computed } from "vue";
+  import type { ItemSummary } from "~/lib/api/types/data-contracts";
+  import DataTable from "./table/data-table.vue";
+  import { makeColumns } from "./table/columns";
+  import { useI18n } from "vue-i18n";
 
-  const { openDialog, closeDialog } = useDialog();
-
-  type Props = {
+  defineProps<{
     items: ItemSummary[];
-    disableControls?: boolean;
-  };
-  const props = defineProps<Props>();
+  }>();
 
-  const sortByProperty = ref<keyof ItemSummary | "">("");
+  const { t } = useI18n();
 
-  const preferences = useViewPreferences();
-
-  const defaultHeaders = [
-    { text: "items.asset_id", value: "assetId", enabled: false },
-    {
-      text: "items.name",
-      value: "name",
-      enabled: true,
-      type: "name",
-    },
-    { text: "items.quantity", value: "quantity", align: "center", enabled: true },
-    { text: "items.insured", value: "insured", align: "center", enabled: true, type: "boolean" },
-    { text: "items.purchase_price", value: "purchasePrice", align: "center", enabled: true, type: "price" },
-    { text: "items.location", value: "location", align: "center", enabled: false, type: "location" },
-    { text: "items.archived", value: "archived", align: "center", enabled: false, type: "boolean" },
-    { text: "items.created_at", value: "createdAt", align: "center", enabled: false, type: "date" },
-    { text: "items.updated_at", value: "updatedAt", align: "center", enabled: false, type: "date" },
-  ] satisfies TableHeaderType[];
-
-  const headers = ref<TableHeaderType[]>(
-    (preferences.value.tableHeaders ?? [])
-      .concat(defaultHeaders.filter(h => !preferences.value.tableHeaders?.find(h2 => h2.value === h.value)))
-      // this is a hack to make sure that any changes to the defaultHeaders are reflected in the preferences
-      .map(h => ({
-        ...(defaultHeaders.find(h2 => h2.value === h.value) as TableHeaderType),
-        enabled: h.enabled,
-      }))
-  );
-
-  const toggleHeader = (value: string) => {
-    const header = headers.value.find(h => h.value === value);
-    if (header) {
-      header.enabled = !header.enabled; // Toggle the 'enabled' state
-    }
-
-    preferences.value.tableHeaders = headers.value;
-  };
-  const moveHeader = (from: number, to: number) => {
-    const header = headers.value[from];
-    headers.value.splice(from, 1);
-    headers.value.splice(to, 0, header);
-
-    preferences.value.tableHeaders = headers.value;
-  };
-
-  const pagination = reactive({
-    descending: false,
-    page: 1,
-    rowsPerPage: preferences.value.itemsPerTablePage,
-    rowsNumber: 0,
-  });
-
-  watch(
-    () => pagination.rowsPerPage,
-    newRowsPerPage => {
-      preferences.value.itemsPerTablePage = newRowsPerPage;
-    }
-  );
-
-  function sortBy(property: keyof ItemSummary) {
-    if (sortByProperty.value === property) {
-      pagination.descending = !pagination.descending;
-    } else {
-      pagination.descending = false;
-    }
-    sortByProperty.value = property;
-  }
-
-  function extractSortable(item: ItemSummary, property: keyof ItemSummary): string | number | boolean {
-    const value = item[property];
-    if (typeof value === "string") {
-      // Try to parse number
-      const parsed = Number(value);
-      if (!isNaN(parsed)) {
-        return parsed;
-      }
-
-      return value.toLowerCase();
-    }
-
-    if (typeof value !== "number" && typeof value !== "boolean") {
-      return "";
-    }
-
-    return value;
-  }
-
-  function itemSort(a: ItemSummary, b: ItemSummary) {
-    if (!sortByProperty.value) {
-      return 0;
-    }
-
-    const aVal = extractSortable(a, sortByProperty.value);
-    const bVal = extractSortable(b, sortByProperty.value);
-
-    if (typeof aVal === "string" && typeof bVal === "string") {
-      return aVal.localeCompare(bVal, undefined, { numeric: true, sensitivity: "base" });
-    }
-
-    if (aVal < bVal) {
-      return -1;
-    }
-    if (aVal > bVal) {
-      return 1;
-    }
-    return 0;
-  }
-
-  const data = computed<TableData[]>(() => {
-    // sort by property
-    let data = [...props.items].sort(itemSort);
-
-    // sort descending
-    if (pagination.descending) {
-      data.reverse();
-    }
-
-    // paginate
-    const start = (pagination.page - 1) * pagination.rowsPerPage;
-    const end = start + pagination.rowsPerPage;
-    data = data.slice(start, end);
-    return data;
-  });
-
-  function extractValue(data: TableData, value: string) {
-    const parts = value.split(".");
-    let current = data;
-    for (const part of parts) {
-      current = current[part];
-    }
-    return current;
-  }
-
-  function cell(h: TableHeaderType) {
-    return `cell-${h.value.replace(".", "_")}`;
-  }
+  const columns = computed(() => makeColumns(t).filter(c => c.enableHiding !== false));
 </script>
+
+<template>
+  <DataTable view="table" :data="items" :columns="columns" disable-controls />
+</template>

frontend/components/Item/View/pagination.ts

@@ -0,0 +1,8 @@
+import type { ShallowUnwrapRef } from "vue";
+
+export type Pagination = ShallowUnwrapRef<{
+  page: WritableComputedRef<number, number>;
+  pageSize: ComputedRef<number>;
+  totalSize: Ref<number, number>;
+  setPage: (newPage: number) => void;
+}>;

frontend/components/Item/View/table/card-view.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+  import ItemCard from "@/components/Item/Card.vue";
+  import type { ItemSummary } from "~/lib/api/types/data-contracts";
+  import type { Table as TableType } from "@tanstack/vue-table";
+  import MdiSelectSearch from "~icons/mdi/select-search";
+  import { Checkbox } from "@/components/ui/checkbox";
+  import DropdownAction from "./data-table-dropdown.vue";
+
+  const preferences = useViewPreferences();
+
+  const props = defineProps<{
+    table: TableType<ItemSummary>;
+    locationFlatTree?: FlatTreeItem[];
+  }>();
+
+  defineEmits<{
+    (e: "refresh"): void;
+  }>();
+
+  const selectedCount = computed(() => props.table.getSelectedRowModel().rows.length);
+</script>
+
+<template>
+  <Teleport to="#selectable-subtitle" defer>
+    <Checkbox
+      class="size-6 p-0"
+      :model-value="
+        table.getIsAllPageRowsSelected() ? true : table.getSelectedRowModel().rows.length > 0 ? 'indeterminate' : false
+      "
+      :aria-label="$t('components.item.view.selectable.select_all')"
+      @update:model-value="table.toggleAllPageRowsSelected(!!$event)"
+    />
+
+    <div class="grow" />
+
+    <div :class="['relative inline-flex items-center', selectedCount === 0 ? 'pointer-events-none opacity-50' : '']">
+      <DropdownAction
+        :multi="{ items: table.getSelectedRowModel().rows, columns: table.getAllColumns() }"
+        view="card"
+        :table="table"
+        @refresh="$emit('refresh')"
+      />
+
+      <span v-if="selectedCount > 0" class="absolute -right-1 -top-1 flex size-4">
+        <span
+          class="pointer-events-none relative flex size-4 items-center justify-center whitespace-nowrap rounded-full bg-primary p-1 text-xs text-primary-foreground"
+        >
+          {{ String(selectedCount) }}
+        </span>
+      </span>
+    </div>
+  </Teleport>
+  <div v-if="table.getRowModel().rows?.length === 0" class="flex flex-col items-center gap-2">
+    <MdiSelectSearch class="size-10" />
+    <p>{{ $t("items.no_results") }}</p>
+  </div>
+  <div v-else class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+    <ItemCard
+      v-for="item in table.getRowModel().rows"
+      :key="item.original.id"
+      :item="item.original"
+      :table-row="preferences.quickActions.enabled ? item : undefined"
+      :location-flat-tree="locationFlatTree"
+    />
+  </div>
+</template>

frontend/components/Item/View/table/columns.ts

@@ -0,0 +1,270 @@
+import type { Column, ColumnDef } from "@tanstack/vue-table";
+import { h } from "vue";
+import DropdownAction from "./data-table-dropdown.vue";
+import { ArrowDown, ArrowUpDown, Check, X } from "lucide-vue-next";
+import Button from "~/components/ui/button/Button.vue";
+import Checkbox from "~/components/Form/Checkbox.vue";
+import type { ItemSummary } from "~/lib/api/types/data-contracts";
+import Currency from "~/components/global/Currency.vue";
+import DateTime from "~/components/global/DateTime.vue";
+import { cn } from "~/lib/utils";
+
+/**
+ * Create columns with i18n support.
+ * Pass `t` from useI18n() when creating the columns in your component.
+ */
+export function makeColumns(t: (key: string) => string, refresh?: () => void): ColumnDef<ItemSummary>[] {
+  const sortable = (column: Column<ItemSummary, unknown>, key: string) => {
+    const sortState = column.getIsSorted(); // 'asc' | 'desc' | false
+    if (!sortState) {
+      // show the neutral up/down icon when not sorted
+      return [t(key), h(ArrowUpDown, { class: "ml-2 h-4 w-4 opacity-40" })];
+    }
+    // show a single arrow that points up for asc (rotate-180) and down for desc
+    return [
+      t(key),
+      h(ArrowDown, {
+        class: cn(["ml-2 h-4 w-4 transition-transform opacity-100", sortState === "asc" ? "rotate-180" : ""]),
+      }),
+    ];
+  };
+
+  return [
+    {
+      id: "select",
+      header: ({ table }) =>
+        h(Checkbox, {
+          modelValue: table.getIsAllPageRowsSelected()
+            ? true
+            : table.getSelectedRowModel().rows.length > 0
+              ? ("indeterminate" as unknown as boolean) // :)
+              : false,
+          "onUpdate:modelValue": (value: boolean) => table.toggleAllPageRowsSelected(!!value),
+          ariaLabel: t("components.item.view.selectable.select_all"),
+        }),
+      cell: ({ row }) =>
+        h(Checkbox, {
+          modelValue: row.getIsSelected(),
+          "onUpdate:modelValue": (value: boolean) => row.toggleSelected(!!value),
+          ariaLabel: t("components.item.view.selectable.select_row"),
+        }),
+      enableHiding: false,
+    },
+    {
+      id: "assetId",
+      accessorKey: "assetId",
+      header: ({ column }) =>
+        h(
+          Button,
+          {
+            variant: "ghost",
+            onClick: () => column.toggleSorting(column.getIsSorted() === "asc"),
+          },
+          () => sortable(column, "items.asset_id")
+        ),
+      cell: ({ row }) => h("div", { class: "text-sm" }, String(row.getValue("assetId") ?? "")),
+    },
+    {
+      id: "name",
+      accessorKey: "name",
+      header: ({ column }) =>
+        h(
+          Button,
+          {
+            variant: "ghost",
+            onClick: () => column.toggleSorting(column.getIsSorted() === "asc"),
+          },
+          () => sortable(column, "items.name")
+        ),
+      cell: ({ row }) => h("span", { class: "text-sm font-medium" }, row.getValue("name")),
+    },
+    {
+      id: "quantity",
+      accessorKey: "quantity",
+      header: ({ column }) =>
+        h(
+          Button,
+          {
+            variant: "ghost",
+            onClick: () => column.toggleSorting(column.getIsSorted() === "asc"),
+          },
+          () => sortable(column, "items.quantity")
+        ),
+      cell: ({ row }) => h("div", { class: "text-center" }, String(row.getValue("quantity") ?? "")),
+    },
+    {
+      id: "insured",
+      accessorKey: "insured",
+      header: ({ column }) =>
+        h(
+          Button,
+          {
+            variant: "ghost",
+            onClick: () => column.toggleSorting(column.getIsSorted() === "asc"),
+          },
+          () => sortable(column, "items.insured")
+        ),
+      cell: ({ row }) => {
+        const val = row.getValue("insured");
+        return h(
+          "div",
+          { class: "block mx-auto w-min" },
+          val ? h(Check, { class: "h-4 w-4 text-green-500" }) : h(X, { class: "h-4 w-4 text-destructive" })
+        );
+      },
+    },
+    {
+      id: "purchasePrice",
+      accessorKey: "purchasePrice",
+      header: ({ column }) =>
+        h(
+          Button,
+          {
+            variant: "ghost",
+            onClick: () => column.toggleSorting(column.getIsSorted() === "asc"),
+          },
+          () => sortable(column, "items.purchase_price")
+        ),
+      cell: ({ row }) =>
+        h("div", { class: "text-center" }, h(Currency, { amount: Number(row.getValue("purchasePrice")) })),
+    },
+    {
+      id: "location",
+      accessorKey: "location",
+      header: ({ column }) =>
+        h(
+          Button,
+          {
+            variant: "ghost",
+            onClick: () => column.toggleSorting(column.getIsSorted() === "asc"),
+          },
+          () => sortable(column, "items.location")
+        ),
+      cell: ({ row }) => {
+        const loc = (row.original as ItemSummary).location as { id: string; name: string } | null;
+        if (loc) {
+          return h("NuxtLink", { to: `/location/${loc.id}`, class: "hover:underline text-sm" }, () => loc.name);
+        }
+        return h("div", { class: "text-sm text-muted-foreground" }, "");
+      },
+    },
+    {
+      id: "archived",
+      accessorKey: "archived",
+      header: ({ column }) =>
+        h(
+          Button,
+          {
+            variant: "ghost",
+            onClick: () => column.toggleSorting(column.getIsSorted() === "asc"),
+          },
+          () => sortable(column, "items.archived")
+        ),
+      cell: ({ row }) => {
+        const val = row.getValue("archived");
+        return h(
+          "div",
+          { class: "block mx-auto w-min" },
+          val ? h(Check, { class: "h-4 w-4 text-green-500" }) : h(X, { class: "h-4 w-4 text-destructive" })
+        );
+      },
+    },
+    {
+      id: "createdAt",
+      accessorKey: "createdAt",
+      header: ({ column }) =>
+        h(
+          Button,
+          {
+            variant: "ghost",
+            onClick: () => column.toggleSorting(column.getIsSorted() === "asc"),
+          },
+          () => sortable(column, "items.created_at")
+        ),
+      cell: ({ row }) =>
+        h(
+          "div",
+          { class: "text-center text-sm" },
+          h(DateTime, { date: row.getValue("createdAt") as Date, datetimeType: "date" })
+        ),
+    },
+    {
+      id: "updatedAt",
+      accessorKey: "updatedAt",
+      header: ({ column }) =>
+        h(
+          Button,
+          {
+            variant: "ghost",
+            onClick: () => column.toggleSorting(column.getIsSorted() === "asc"),
+          },
+          () => sortable(column, "items.updated_at")
+        ),
+      cell: ({ row }) =>
+        h(
+          "div",
+          { class: "text-center text-sm" },
+          h(DateTime, { date: row.getValue("updatedAt") as Date, datetimeType: "date" })
+        ),
+    },
+    {
+      id: "actions",
+      enableHiding: false,
+      header: ({ table }) => {
+        const selectedCount = table.getSelectedRowModel().rows.length;
+        return h(
+          "div",
+          {
+            class: [
+              "relative inline-flex items-center",
+              selectedCount === 0 ? "opacity-50 pointer-events-none" : "",
+            ].join(" "),
+          },
+          [
+            h(DropdownAction, {
+              multi: {
+                items: table.getSelectedRowModel().rows,
+                columns: table.getAllColumns(),
+              },
+              onExpand: () => {
+                table.getSelectedRowModel().rows.forEach(row => row.toggleExpanded());
+              },
+              view: "table",
+              onRefresh: () => refresh?.(),
+              table,
+            }),
+            selectedCount > 0 &&
+              h(
+                "span",
+                {
+                  class: "-right-1 -top-1 absolute flex size-4",
+                },
+                h(
+                  "span",
+                  {
+                    class:
+                      "relative flex size-4 items-center justify-center rounded-full bg-primary p-1 text-primary-foreground text-xs pointer-events-none whitespace-nowrap",
+                  },
+                  String(selectedCount)
+                )
+              ),
+          ]
+        );
+      },
+      cell: ({ row, table }) => {
+        const item = row.original;
+        return h(
+          "div",
+          { class: "relative" },
+          h(DropdownAction, {
+            item,
+            onExpand: row.toggleExpanded,
+            view: "table",
+            onRefresh: () => refresh?.(),
+            table,
+          })
+        );
+      },
+    },
+  ];
+}

frontend/components/Item/View/table/data-table-controls.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+  import type { Table as TableType } from "@tanstack/vue-table";
+  import type { ItemSummary } from "~/lib/api/types/data-contracts";
+
+  import MdiTableCog from "~icons/mdi/table-cog";
+
+  import Button from "~/components/ui/button/Button.vue";
+  import {
+    Pagination,
+    PaginationEllipsis,
+    PaginationFirst,
+    PaginationLast,
+    PaginationList,
+    PaginationListItem,
+  } from "@/components/ui/pagination";
+  import { DialogID, useDialog } from "~/components/ui/dialog-provider/utils";
+  import type { Pagination as PaginationType } from "../pagination";
+
+  const { openDialog } = useDialog();
+
+  const props = defineProps<{
+    table: TableType<ItemSummary>;
+    dataLength: number;
+    externalPagination?: PaginationType;
+  }>();
+
+  const setPage = (page: number) => {
+    if (props.externalPagination) {
+      if (page !== props.externalPagination.page) {
+        // clear selection and expanded
+        props.table.resetRowSelection();
+        props.table.resetExpanded();
+      }
+      props.externalPagination.setPage(page);
+    } else {
+      props.table.setPageIndex(page - 1);
+    }
+  };
+</script>
+
+<template>
+  <div class="flex flex-col gap-2 md:flex-row md:items-center md:justify-between md:gap-0">
+    <div class="order-2 flex items-center gap-2 md:order-1">
+      <Button class="size-10 p-0" variant="outline" @click="openDialog(DialogID.ItemTableSettings)">
+        <MdiTableCog />
+      </Button>
+      <div class="text-sm text-muted-foreground">
+        {{
+          $t("components.item.view.table.selected_rows", {
+            selected: table.getFilteredSelectedRowModel().rows.length,
+            total: table.getFilteredRowModel().rows.length,
+          })
+        }}
+      </div>
+    </div>
+    <div class="order-1 flex w-full justify-center md:order-2 md:w-auto">
+      <Pagination
+        v-slot="{ page }"
+        :items-per-page="externalPagination ? externalPagination.pageSize : table.getState().pagination.pageSize"
+        :total="externalPagination ? externalPagination.totalSize : dataLength"
+        :sibling-count="2"
+        :page="externalPagination ? externalPagination.page : table.getState().pagination.pageIndex + 1"
+        @update:page="val => setPage(val)"
+      >
+        <PaginationList v-slot="{ items: pageItems }" class="flex items-center gap-1">
+          <PaginationFirst @click="() => setPage(1)" />
+          <template v-for="(item, index) in pageItems">
+            <PaginationListItem v-if="item.type === 'page'" :key="index" :value="item.value" as-child>
+              <Button
+                class="size-10 p-0"
+                :variant="item.value === page ? 'default' : 'outline'"
+                @click="() => setPage(item.value)"
+              >
+                {{ item.value }}
+              </Button>
+            </PaginationListItem>
+            <PaginationEllipsis v-else :key="item.type" :index="index" />
+          </template>
+          <PaginationLast
+            @click="
+              () =>
+                setPage(
+                  externalPagination
+                    ? Math.ceil(externalPagination.totalSize / externalPagination.pageSize)
+                    : table.getPageCount()
+                )
+            "
+          />
+        </PaginationList>
+      </Pagination>
+    </div>
+  </div>
+</template>

frontend/components/Item/View/table/data-table-dropdown.vue

@@ -0,0 +1,273 @@
+<script setup lang="ts">
+  import { MoreHorizontal } from "lucide-vue-next";
+  import { Button } from "@/components/ui/button";
+  import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuTrigger,
+    DropdownMenuSeparator,
+  } from "@/components/ui/dropdown-menu";
+  import type { ItemSummary } from "~/lib/api/types/data-contracts";
+  import type { Column, Row, Table } from "@tanstack/vue-table";
+  import { useI18n } from "vue-i18n";
+  import { toast } from "~/components/ui/sonner";
+  import { useDialog } from "@/components/ui/dialog-provider";
+  import { DialogID } from "~/components/ui/dialog-provider/utils";
+
+  const { t } = useI18n();
+  const api = useUserApi();
+  const confirm = useConfirm();
+  const preferences = useViewPreferences();
+  const { openDialog } = useDialog();
+
+  const props = defineProps<{
+    item?: ItemSummary;
+    multi?: {
+      items: Row<ItemSummary>[];
+      columns: Column<ItemSummary>[];
+    };
+    view: "table" | "card";
+    table: Table<ItemSummary>;
+  }>();
+
+  const emit = defineEmits<{
+    (e: "expand"): void;
+    (e: "refresh"): void;
+  }>();
+
+  const resetSelection = () => {
+    props.table.resetRowSelection();
+    props.table.resetExpanded();
+    emit("refresh");
+  };
+
+  const openMultiTab = async (items: string[]) => {
+    if (!preferences.value.shownMultiTabWarning) {
+      // TODO: add warning with link to docs and just improve this
+      const { isCanceled } = await confirm.open({
+        message: t("components.item.view.table.dropdown.open_multi_tab_warning"),
+        href: "https://homebox.software/en/user-guide/tips-tricks#open-multiple-items-in-new-tabs",
+      });
+      if (isCanceled) {
+        return;
+      }
+      preferences.value.shownMultiTabWarning = true;
+    }
+
+    items.forEach(item => window.open(`/item/${item}`, "_blank"));
+  };
+
+  const escapeCsvField = (value: unknown): string => {
+    let str = String(value ?? "");
+    // Mitigate formula injection
+    if (/^[=+\-@]/.test(str)) {
+      str = "'" + str;
+    }
+    // Escape double quotes
+    str = str.replace(/"/g, '""');
+    // Wrap in double quotes
+    return `"${str}"`;
+  };
+
+  const downloadCsv = (items: Row<ItemSummary>[], columns: Column<ItemSummary>[]) => {
+    // get enabled columns
+    const enabledColumns = columns.filter(c => c.id !== undefined && c.getIsVisible() && c.getCanHide()).map(c => c.id);
+
+    // create CSV header (escaped)
+    const header = enabledColumns.map(escapeCsvField).join(",");
+
+    // map each item to a row matching enabled columns order, escaping each field
+    const rows = items.map(item =>
+      enabledColumns.map(col => escapeCsvField(item.original[col as keyof ItemSummary])).join(",")
+    );
+
+    const csv = [header, ...rows].join("\n");
+    const blob = new Blob([csv], { type: "text/csv" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "items.csv";
+    a.click();
+    a.remove();
+    URL.revokeObjectURL(url);
+  };
+
+  const downloadJson = (items: Row<ItemSummary>[], columns: Column<ItemSummary>[]) => {
+    // get enabled columns
+    const enabledColumns = columns.filter(c => c.id !== undefined && c.getIsVisible() && c.getCanHide()).map(c => c.id);
+
+    // map each item to an object with only enabled columns
+    const data = items.map(item => {
+      const obj: Record<string, unknown> = {};
+      enabledColumns.forEach(col => {
+        obj[col] = item.original[col as keyof ItemSummary] ?? null;
+      });
+      return obj;
+    });
+
+    const exportObj = {
+      headers: enabledColumns,
+      data,
+    };
+
+    const json = JSON.stringify(exportObj, null, 2);
+    const blob = new Blob([json], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "items.json";
+    a.click();
+    a.remove();
+    URL.revokeObjectURL(url);
+  };
+
+  const deleteItems = async (ids: string[]) => {
+    const { isCanceled } = await confirm.open(t("components.item.view.table.dropdown.delete_confirmation"));
+
+    if (isCanceled) {
+      return;
+    }
+
+    await Promise.allSettled(
+      ids.map(id =>
+        api.items.delete(id).catch(err => {
+          toast.error(t("components.item.view.table.dropdown.error_deleting"));
+          console.error(err);
+        })
+      )
+    );
+
+    resetSelection();
+  };
+
+  const duplicateItems = async (ids: string[]) => {
+    await Promise.allSettled(
+      ids.map(id =>
+        api.items
+          .duplicate(id, {
+            copyMaintenance: preferences.value.duplicateSettings.copyMaintenance,
+            copyAttachments: preferences.value.duplicateSettings.copyAttachments,
+            copyCustomFields: preferences.value.duplicateSettings.copyCustomFields,
+            copyPrefix: preferences.value.duplicateSettings.copyPrefixOverride ?? t("items.duplicate.prefix"),
+          })
+          .catch(err => {
+            toast.error(t("components.item.view.table.dropdown.error_duplicating"));
+            console.error(err);
+          })
+      )
+    );
+
+    resetSelection();
+  };
+</script>
+
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child>
+      <Button
+        :variant="view === 'table' ? 'ghost' : 'outline'"
+        class="size-8 p-0 hover:bg-primary hover:text-primary-foreground"
+      >
+        <span class="sr-only">{{ t("components.item.view.table.dropdown.open_menu") }}</span>
+        <MoreHorizontal class="size-4" />
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent align="end">
+      <DropdownMenuLabel>{{ t("components.item.view.table.dropdown.actions") }}</DropdownMenuLabel>
+      <DropdownMenuSeparator />
+      <DropdownMenuItem v-if="item" as-child>
+        <NuxtLink :to="`/item/${item.id}`" class="hover:underline">
+          {{ t("components.item.view.table.dropdown.view_item") }}
+        </NuxtLink>
+      </DropdownMenuItem>
+      <DropdownMenuItem v-if="multi" @click="openMultiTab(multi.items.map(row => row.original.id))">
+        {{ t("components.item.view.table.dropdown.view_items") }}
+      </DropdownMenuItem>
+      <DropdownMenuItem v-if="view === 'table'" @click="$emit('expand')">
+        {{ t("components.item.view.table.dropdown.toggle_expand") }}
+      </DropdownMenuItem>
+      <DropdownMenuSeparator />
+      <!-- change location -->
+      <DropdownMenuItem
+        @click="
+          openDialog(DialogID.ItemChangeDetails, {
+            params: { items: multi ? multi.items.map(row => row.original) : [item!], changeLocation: true },
+            onClose: result => {
+              if (result) {
+                toast.success(t('components.item.view.table.dropdown.change_location_success'));
+                resetSelection();
+              }
+            },
+          })
+        "
+      >
+        {{ t("components.item.view.table.dropdown.change_location") }}
+      </DropdownMenuItem>
+      <!-- change labels -->
+      <DropdownMenuItem
+        @click="
+          openDialog(DialogID.ItemChangeDetails, {
+            params: {
+              items: multi ? multi.items.map(row => row.original) : [item!],
+              addLabels: true,
+              removeLabels: true,
+            },
+            onClose: result => {
+              if (result) {
+                toast.success(t('components.item.view.table.dropdown.change_labels_success'));
+                resetSelection();
+              }
+            },
+          })
+        "
+      >
+        {{ t("components.item.view.table.dropdown.change_labels") }}
+      </DropdownMenuItem>
+      <!-- maintenance -->
+      <DropdownMenuItem
+        @click="
+          openDialog(DialogID.EditMaintenance, {
+            params: { type: 'create', itemId: multi ? multi.items.map(row => row.original.id) : item!.id },
+            onClose: result => {
+              if (result) {
+                toast.success(t('components.item.view.table.dropdown.create_maintenance_success'));
+              }
+            },
+          })
+        "
+      >
+        {{
+          multi
+            ? t("components.item.view.table.dropdown.create_maintenance_selected")
+            : t("components.item.view.table.dropdown.create_maintenance_item")
+        }}
+      </DropdownMenuItem>
+      <!-- duplicate -->
+      <DropdownMenuItem @click="duplicateItems(multi ? multi.items.map(row => row.original.id) : [item!.id])">
+        {{
+          multi
+            ? t("components.item.view.table.dropdown.duplicate_selected")
+            : t("components.item.view.table.dropdown.duplicate_item")
+        }}
+      </DropdownMenuItem>
+      <!-- delete -->
+      <DropdownMenuItem @click="deleteItems(multi ? multi.items.map(row => row.original.id) : [item!.id])">
+        {{
+          multi
+            ? t("components.item.view.table.dropdown.delete_selected")
+            : t("components.item.view.table.dropdown.delete_item")
+        }}
+      </DropdownMenuItem>
+      <!-- download -->
+      <DropdownMenuSeparator v-if="multi && view === 'table'" />
+      <DropdownMenuItem v-if="multi && view === 'table'" @click="downloadCsv(multi.items, multi.columns)">
+        {{ t("components.item.view.table.dropdown.download_csv") }}
+      </DropdownMenuItem>
+      <DropdownMenuItem v-if="multi && view === 'table'" @click="downloadJson(multi.items, multi.columns)">
+        {{ t("components.item.view.table.dropdown.download_json") }}
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>

frontend/components/Item/View/table/data-table-expanded-row.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+  import { computed } from "vue";
+  import type { ItemSummary } from "~/lib/api/types/data-contracts";
+  import LabelChip from "@/components/Label/Chip.vue";
+  import Badge from "~/components/ui/badge/Badge.vue";
+
+  const props = defineProps<{
+    item: ItemSummary;
+  }>();
+
+  const api = useUserApi();
+
+  const imageUrl = computed(() => {
+    if (!props.item.imageId) {
+      return "/no-image.jpg";
+    }
+    if (props.item.thumbnailId) {
+      return api.authURL(`/items/${props.item.id}/attachments/${props.item.thumbnailId}`);
+    } else {
+      return api.authURL(`/items/${props.item.id}/attachments/${props.item.imageId}`);
+    }
+  });
+</script>
+
+<template>
+  <div class="flex items-start gap-3">
+    <div class="shrink-0">
+      <img :src="imageUrl" class="size-32 rounded-lg bg-muted object-cover" />
+    </div>
+    <div class="flex min-w-0 flex-1 flex-col gap-2">
+      <h2 class="truncate text-xl font-bold">{{ item.name }}</h2>
+      <Badge class="w-min text-nowrap bg-secondary text-secondary-foreground hover:bg-secondary/70 hover:underline">
+        <NuxtLink v-if="item.location" :to="`/location/${item.location.id}`">
+          {{ item.location.name }}
+        </NuxtLink>
+      </Badge>
+      <div class="flex flex-wrap gap-2">
+        <LabelChip v-for="label in item.labels" :key="label.id" :label="label" size="sm" />
+      </div>
+      <p class="whitespace-pre-line break-words text-sm text-muted-foreground">
+        {{ item.description || $t("components.item.no_description") }}
+      </p>
+    </div>
+  </div>
+</template>

frontend/components/Item/View/table/data-table.vue

@@ -0,0 +1,252 @@
+<script setup lang="ts" generic="TData, TValue">
+  import BaseCard from "@/components/Base/Card.vue";
+  import type { ColumnDef, SortingState, VisibilityState, ExpandedState } from "@tanstack/vue-table";
+  import {
+    getCoreRowModel,
+    getPaginationRowModel,
+    getSortedRowModel,
+    getExpandedRowModel,
+    useVueTable,
+  } from "@tanstack/vue-table";
+
+  import { camelToSnakeCase, valueUpdater } from "@/lib/utils";
+
+  import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+  import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+  import Button from "~/components/ui/button/Button.vue";
+  import { DialogID } from "~/components/ui/dialog-provider/utils";
+  import MdiArrowDown from "~icons/mdi/arrow-down";
+  import MdiArrowUp from "~icons/mdi/arrow-up";
+  import Checkbox from "~/components/ui/checkbox/Checkbox.vue";
+  import Label from "~/components/ui/label/Label.vue";
+  import type { ItemSummary } from "~/lib/api/types/data-contracts";
+
+  import TableView from "./table-view.vue";
+  import CardView from "./card-view.vue";
+  import DataTableControls from "./data-table-controls.vue";
+  import type { Pagination } from "../pagination";
+  import Switch from "~/components/ui/switch/Switch.vue";
+
+  const props = defineProps<{
+    columns: ColumnDef<ItemSummary, TValue>[];
+    data: ItemSummary[];
+    disableControls?: boolean;
+    view: "table" | "card";
+    locationFlatTree?: FlatTreeItem[];
+    externalPagination?: Pagination;
+  }>();
+
+  defineEmits<{
+    (e: "refresh"): void;
+  }>();
+
+  const preferences = useViewPreferences();
+  const defaultPageSize = preferences.value.itemsPerTablePage;
+  const tableHeadersData = preferences.value.tableHeaders;
+  const defaultVisible = ["name", "quantity", "insured", "purchasePrice"];
+
+  const tableHeaders = computed(
+    () =>
+      tableHeadersData ??
+      props.columns
+        .filter(c => c.enableHiding !== false)
+        .map(c => ({
+          value: c.id!,
+          enabled: defaultVisible.includes(c.id ?? ""),
+        }))
+  );
+
+  const sorting = ref<SortingState>([]);
+  const columnOrder = ref<string[]>([
+    "select",
+    ...(tableHeaders.value ? tableHeaders.value.map(h => h.value) : []),
+    "actions",
+  ]);
+  const columnVisibility = ref<VisibilityState>(
+    tableHeaders.value?.reduce((acc, h) => ({ ...acc, [h.value]: h.enabled }), {})
+  );
+  const rowSelection = ref({});
+  const expanded = ref<ExpandedState>({});
+  const pagination = ref({
+    pageIndex: 0,
+    pageSize: defaultPageSize || 12,
+  });
+
+  watch(
+    () => pagination.value.pageSize,
+    newSize => {
+      preferences.value.itemsPerTablePage = newSize;
+    }
+  );
+
+  const table = useVueTable<ItemSummary>({
+    manualPagination: !!props.externalPagination,
+
+    get data() {
+      return props.data;
+    },
+    get columns() {
+      return props.columns;
+    },
+
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getExpandedRowModel: getExpandedRowModel(),
+
+    onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),
+    onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),
+    onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),
+    onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),
+    onColumnOrderChange: updaterOrValue => valueUpdater(updaterOrValue, columnOrder),
+    onPaginationChange: updaterOrValue => valueUpdater(updaterOrValue, pagination),
+
+    state: {
+      get sorting() {
+        return sorting.value;
+      },
+      get columnVisibility() {
+        return columnVisibility.value;
+      },
+      get rowSelection() {
+        return rowSelection.value;
+      },
+      get expanded() {
+        return expanded.value;
+      },
+      get columnOrder() {
+        return columnOrder.value;
+      },
+      get pagination() {
+        return pagination.value;
+      },
+    },
+  });
+
+  const persistHeaders = () => {
+    const headers = table
+      .getAllColumns()
+      .filter(column => column.getCanHide())
+      .map(h => ({
+        value: h.id as keyof ItemSummary,
+        enabled: h.getIsVisible(),
+      }));
+
+    preferences.value.tableHeaders = headers;
+  };
+
+  const moveHeader = (from: number, to: number) => {
+    // Only allow moving between the first and last index (excluding 'select' and 'actions')
+    const start = 1; // index of 'select'
+    const end = columnOrder.value.length - 2; // index before 'actions'
+
+    if (from < start || from > end || to < start || to > end || from === to) return;
+
+    const order = [...columnOrder.value];
+    const [moved] = order.splice(from, 1);
+    order.splice(to, 0, moved!);
+    columnOrder.value = order;
+
+    persistHeaders();
+  };
+
+  const toggleHeader = (id: string) => {
+    const header = table
+      .getAllColumns()
+      .filter(column => column.getCanHide())
+      .find(h => h.id === id);
+    if (header) {
+      header.toggleVisibility();
+    }
+
+    persistHeaders();
+  };
+</script>
+
+<template>
+  <div>
+    <Dialog :dialog-id="DialogID.ItemTableSettings">
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{{ $t("components.item.view.table.table_settings") }}</DialogTitle>
+        </DialogHeader>
+
+        <div class="flex flex-col gap-4">
+          <div v-if="props.view === 'table'" class="flex flex-col gap-2">
+            <div>{{ $t("components.item.view.table.headers") }}</div>
+            <div class="flex flex-col">
+              <div
+                v-for="(colId, i) in columnOrder.slice(1, columnOrder.length - 1)"
+                :key="colId"
+                class="flex flex-row items-center gap-1"
+              >
+                <Button size="icon" class="size-6" variant="ghost" :disabled="i === 0" @click="moveHeader(i + 1, i)">
+                  <MdiArrowUp />
+                </Button>
+                <Button
+                  size="icon"
+                  class="size-6"
+                  variant="ghost"
+                  :disabled="i === columnOrder.length - 3"
+                  @click="moveHeader(i + 1, i + 2)"
+                >
+                  <MdiArrowDown />
+                </Button>
+                <Checkbox
+                  :id="colId"
+                  :model-value="table.getColumn(colId)?.getIsVisible()"
+                  @update:model-value="toggleHeader(colId)"
+                />
+                <label class="text-sm" :for="colId"> {{ $t(`items.${camelToSnakeCase(colId)}`) }} </label>
+              </div>
+            </div>
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <Label> {{ $t("components.item.view.table.rows_per_page") }} </Label>
+            <Select :model-value="pagination.pageSize" @update:model-value="val => table.setPageSize(Number(val))">
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem :value="12">12</SelectItem>
+                <SelectItem :value="24">24</SelectItem>
+                <SelectItem :value="48">48</SelectItem>
+                <SelectItem :value="96">96</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <Label class="text-sm"> {{ $t("components.item.view.table.quick_actions") }} </Label>
+            <Switch v-model="preferences.quickActions.enabled" />
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+    <BaseCard v-if="props.view === 'table'">
+      <div>
+        <TableView :table="table" :columns="columns" />
+      </div>
+      <div v-if="!props.disableControls" class="border-t p-3">
+        <DataTableControls
+          :table="table"
+          :pagination="pagination"
+          :data-length="data.length"
+          :external-pagination="externalPagination"
+        />
+      </div>
+    </BaseCard>
+    <div v-else>
+      <CardView :table="table" :location-flat-tree="locationFlatTree" @refresh="$emit('refresh')" />
+      <div v-if="!props.disableControls" class="pt-2">
+        <DataTableControls
+          :table="table"
+          :pagination="pagination"
+          :data-length="data.length"
+          :external-pagination="externalPagination"
+        />
+      </div>
+    </div>
+  </div>
+</template>

frontend/components/Item/View/table/table-view.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts" generic="TValue">
+  import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+  import DataTableExpandedRow from "./data-table-expanded-row.vue";
+  import { FlexRender, type Column, type ColumnDef, type Table as TableType } from "@tanstack/vue-table";
+  import type { ItemSummary } from "~/lib/api/types/data-contracts";
+
+  defineProps<{
+    table: TableType<ItemSummary>;
+    columns: ColumnDef<ItemSummary, TValue>[];
+  }>();
+
+  const ariaSort = (column: Column<ItemSummary, unknown>) => {
+    const s = column.getIsSorted();
+    if (s === "asc") return "ascending";
+    if (s === "desc") return "descending";
+    return "none";
+  };
+</script>
+
+<template>
+  <Table class="w-full">
+    <TableHeader>
+      <TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
+        <TableHead
+          v-for="header in headerGroup.headers"
+          :key="header.id"
+          :class="[
+            'text-no-transform cursor-pointer bg-secondary text-sm text-secondary-foreground hover:bg-secondary/90',
+            header.column.id === 'select' || header.column.id === 'actions' ? 'w-10 px-3 text-center' : '',
+          ]"
+          :aria-sort="ariaSort(header.column)"
+        >
+          <FlexRender
+            v-if="!header.isPlaceholder"
+            :render="header.column.columnDef.header"
+            :props="header.getContext()"
+          />
+        </TableHead>
+      </TableRow>
+    </TableHeader>
+    <TableBody>
+      <template v-if="table.getRowModel().rows?.length">
+        <template v-for="row in table.getRowModel().rows" :key="row.id">
+          <TableRow :data-state="row.getIsSelected() ? 'selected' : undefined">
+            <TableCell
+              v-for="cell in row.getVisibleCells()"
+              :key="cell.id"
+              :href="
+                cell.column.id !== 'select' && cell.column.id !== 'actions' ? `/item/${row.original.id}` : undefined
+              "
+              :class="cell.column.id === 'select' || cell.column.id === 'actions' ? 'w-10 px-3' : ''"
+              :compact="cell.column.id === 'select' || cell.column.id === 'actions'"
+            >
+              <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
+            </TableCell>
+          </TableRow>
+          <TableRow v-if="row.getIsExpanded()">
+            <TableCell :colspan="row.getAllCells().length">
+              <DataTableExpandedRow :item="row.original" />
+            </TableCell>
+          </TableRow>
+        </template>
+      </template>
+      <template v-else>
+        <TableRow>
+          <TableCell :colspan="columns.length" class="h-24 text-center">
+            <p>{{ $t("items.no_results") }}</p>
+          </TableCell>
+        </TableRow>
+      </template>
+    </TableBody>
+  </Table>
+</template>

frontend/components/Label/CreateModal.vue

@@ -34,6 +34,9 @@
   import BaseModal from "@/components/App/CreateModal.vue";
   import { useDialog, useDialogHotkey } from "~/components/ui/dialog-provider";
   import ColorSelector from "@/components/Form/ColorSelector.vue";
+  import FormTextField from "~/components/Form/TextField.vue";
+  import FormTextArea from "~/components/Form/TextArea.vue";
+  import { Button, ButtonGroup } from "~/components/ui/button";
 
   const { t } = useI18n();
 
@@ -72,7 +75,7 @@
 
     loading.value = true;
 
-    if (shift.value) close = false;
+    if (shift?.value) close = false;
 
     const { error, data } = await api.labels.create(form);
 

frontend/components/Label/Selector.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col gap-1">
     <Label :for="id" class="px-1">
-      {{ $t("global.labels") }}
+      {{ props.name ?? $t("global.labels") }}
     </Label>
 
     <TagsInput
@@ -90,6 +90,7 @@
     TagsInputItemText,
   } from "@/components/ui/tags-input";
   import type { LabelOut } from "~/lib/api/types/data-contracts";
+  import { Label } from "@/components/ui/label";
 
   const { t } = useI18n();
 
@@ -107,6 +108,11 @@
       type: Array as () => LabelOut[],
       required: true,
     },
+    name: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
   });
 
   const modelValue = useVModel(props, "modelValue", emit);

frontend/components/Location/Card.vue

@@ -51,8 +51,6 @@
   });
 
   const count = computed(() => {
-    if (hasCount.value) {
-      return (props.location as LocationOutCount).itemCount;
-    }
+    return hasCount.value ? (props.location as LocationOutCount).itemCount : undefined;
   });
 </script>

frontend/components/Location/CreateModal.vue

@@ -37,6 +37,9 @@
   import BaseModal from "@/components/App/CreateModal.vue";
   import type { LocationSummary } from "~~/lib/api/types/data-contracts";
   import { useDialog, useDialogHotkey } from "~/components/ui/dialog-provider";
+  import LocationSelector from "~/components/Location/Selector.vue";
+  import FormTextField from "~/components/Form/TextField.vue";
+  import FormTextArea from "~/components/Form/TextArea.vue";
 
   const { t } = useI18n();
 
@@ -94,7 +97,7 @@
     }
     loading.value = true;
 
-    if (shift.value) close = false;
+    if (shift?.value) close = false;
 
     const { data, error } = await api.locations.create({
       name: form.name,

frontend/components/Location/Tree/Node.vue

@@ -4,6 +4,7 @@
   import MdiChevronRight from "~icons/mdi/chevron-right";
   import MdiMapMarker from "~icons/mdi/map-marker";
   import MdiPackageVariant from "~icons/mdi/package-variant";
+  import LocationTreeNode from "./Node.vue";
 
   type Props = {
     treeId: string;
@@ -51,7 +52,7 @@
           'hover:bg-accent hover:text-accent-foreground': hasChildren,
         }"
       >
-        <div v-if="!hasChildren" class="size-6"></div>
+        <div v-if="!hasChildren" class="size-6" />
         <div v-else class="group/node relative size-6" :data-swap="openRef">
           <div
             class="absolute inset-0 flex items-center justify-center transition-transform duration-300 group-data-[swap=true]/node:rotate-90"

frontend/components/Location/Tree/Root.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
   import type { TreeItem } from "~~/lib/api/types/data-contracts";
+  import LocationTreeNode from "./Node.vue";
 
   type Props = {
     locs: TreeItem[];

frontend/components/Maintenance/EditModal.vue

@@ -29,19 +29,19 @@
   import { useI18n } from "vue-i18n";
   import { DialogID } from "@/components/ui/dialog-provider/utils";
   import { toast } from "@/components/ui/sonner";
-  import type { MaintenanceEntry, MaintenanceEntryWithDetails } from "~~/lib/api/types/data-contracts";
   import MdiPost from "~icons/mdi/post";
   import DatePicker from "~~/components/Form/DatePicker.vue";
   import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
   import { useDialog } from "@/components/ui/dialog-provider";
+  import FormTextField from "~/components/Form/TextField.vue";
+  import FormTextArea from "~/components/Form/TextArea.vue";
+  import Button from "@/components/ui/button/Button.vue";
 
-  const { openDialog, closeDialog } = useDialog();
+  const { closeDialog, registerOpenDialogCallback } = useDialog();
 
   const { t } = useI18n();
   const api = useUserApi();
 
-  const emit = defineEmits(["changed"]);
-
   const entry = reactive({
     id: null as string | null,
     name: "",
@@ -49,7 +49,7 @@
     scheduledDate: null as Date | null,
     description: "",
     cost: "",
-    itemId: null as string | null,
+    itemIds: null as string[] | null,
   });
 
   async function dispatchFormSubmit() {
@@ -62,24 +62,28 @@
   }
 
   async function createEntry() {
-    if (!entry.itemId) {
-      return;
-    }
-    const { error } = await api.items.maintenance.create(entry.itemId, {
-      name: entry.name,
-      completedDate: entry.completedDate ?? "",
-      scheduledDate: entry.scheduledDate ?? "",
-      description: entry.description,
-      cost: parseFloat(entry.cost) ? entry.cost : "0",
-    });
-
-    if (error) {
-      toast.error(t("maintenance.toast.failed_to_create"));
+    if (!entry.itemIds) {
       return;
     }
 
-    closeDialog(DialogID.EditMaintenance);
-    emit("changed");
+    await Promise.allSettled(
+      entry.itemIds.map(async itemId => {
+        const { error } = await api.items.maintenance.create(itemId, {
+          name: entry.name,
+          completedDate: entry.completedDate ?? "",
+          scheduledDate: entry.scheduledDate ?? "",
+          description: entry.description,
+          cost: parseFloat(entry.cost) ? entry.cost : "0",
+        });
+
+        if (error) {
+          toast.error(t("maintenance.toast.failed_to_create"));
+          return;
+        }
+      })
+    );
+
+    closeDialog(DialogID.EditMaintenance, true);
   }
 
   async function editEntry() {
@@ -100,73 +104,42 @@
       return;
     }
 
-    closeDialog(DialogID.EditMaintenance);
-    emit("changed");
+    closeDialog(DialogID.EditMaintenance, true);
   }
 
-  const openCreateModal = (itemId: string) => {
-    entry.id = null;
-    entry.name = "";
-    entry.completedDate = null;
-    entry.scheduledDate = null;
-    entry.description = "";
-    entry.cost = "";
-    entry.itemId = itemId;
-    openDialog(DialogID.EditMaintenance);
-  };
-
-  const openUpdateModal = (maintenanceEntry: MaintenanceEntry | MaintenanceEntryWithDetails) => {
-    entry.id = maintenanceEntry.id;
-    entry.name = maintenanceEntry.name;
-    entry.completedDate = new Date(maintenanceEntry.completedDate);
-    entry.scheduledDate = new Date(maintenanceEntry.scheduledDate);
-    entry.description = maintenanceEntry.description;
-    entry.cost = maintenanceEntry.cost;
-    entry.itemId = null;
-    openDialog(DialogID.EditMaintenance);
-  };
-
-  const confirm = useConfirm();
-
-  async function deleteEntry(id: string) {
-    const result = await confirm.open(t("maintenance.modal.delete_confirmation"));
-    if (result.isCanceled) {
-      return;
-    }
-
-    const { error } = await api.maintenance.delete(id);
-
-    if (error) {
-      toast.error(t("maintenance.toast.failed_to_delete"));
-      return;
-    }
-    emit("changed");
-  }
-
-  async function complete(maintenanceEntry: MaintenanceEntry) {
-    const { error } = await api.maintenance.update(maintenanceEntry.id, {
-      name: maintenanceEntry.name,
-      completedDate: new Date(Date.now()),
-      scheduledDate: maintenanceEntry.scheduledDate ?? "null",
-      description: maintenanceEntry.description,
-      cost: maintenanceEntry.cost,
+  onMounted(() => {
+    const cleanup = registerOpenDialogCallback(DialogID.EditMaintenance, params => {
+      switch (params.type) {
+        case "create":
+          entry.id = null;
+          entry.name = "";
+          entry.completedDate = null;
+          entry.scheduledDate = null;
+          entry.description = "";
+          entry.cost = "";
+          entry.itemIds = typeof params.itemId === "string" ? [params.itemId] : params.itemId;
+          break;
+        case "update":
+          entry.id = params.maintenanceEntry.id;
+          entry.name = params.maintenanceEntry.name;
+          entry.completedDate = new Date(params.maintenanceEntry.completedDate);
+          entry.scheduledDate = new Date(params.maintenanceEntry.scheduledDate);
+          entry.description = params.maintenanceEntry.description;
+          entry.cost = params.maintenanceEntry.cost;
+          entry.itemIds = null;
+          break;
+        case "duplicate":
+          entry.id = null;
+          entry.name = params.maintenanceEntry.name;
+          entry.completedDate = null;
+          entry.scheduledDate = null;
+          entry.description = params.maintenanceEntry.description;
+          entry.cost = params.maintenanceEntry.cost;
+          entry.itemIds = [params.itemId];
+          break;
+      }
     });
-    if (error) {
-      toast.error(t("maintenance.toast.failed_to_update"));
-    }
-    emit("changed");
-  }
 
-  function duplicate(maintenanceEntry: MaintenanceEntry | MaintenanceEntryWithDetails, itemId: string) {
-    entry.id = null;
-    entry.name = maintenanceEntry.name;
-    entry.completedDate = null;
-    entry.scheduledDate = null;
-    entry.description = maintenanceEntry.description;
-    entry.cost = maintenanceEntry.cost;
-    entry.itemId = itemId;
-    openDialog(DialogID.EditMaintenance);
-  }
-
-  defineExpose({ openCreateModal, openUpdateModal, deleteEntry, complete, duplicate });
+    onUnmounted(cleanup);
+  });
 </script>

frontend/components/Maintenance/ListView.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import { useI18n } from "vue-i18n";
-  import type { MaintenanceEntryWithDetails } from "~~/lib/api/types/data-contracts";
+  import type { MaintenanceEntry, MaintenanceEntryWithDetails } from "~~/lib/api/types/data-contracts";
   import { MaintenanceFilterStatus } from "~~/lib/api/types/data-contracts";
   import type { StatsFormat } from "~~/components/global/StatCard/types";
   import MdiCheck from "~icons/mdi/check";
@@ -11,15 +11,25 @@
   import MdiWrenchClock from "~icons/mdi/wrench-clock";
   import MdiContentDuplicate from "~icons/mdi/content-duplicate";
   import MaintenanceEditModal from "~~/components/Maintenance/EditModal.vue";
-  import { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider } from "@/components/ui/tooltip";
+  import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
   import { Badge } from "@/components/ui/badge";
-  import { ButtonGroup, Button } from "@/components/ui/button";
+  import { Button, ButtonGroup } from "@/components/ui/button";
+  import StatCard from "~/components/global/StatCard/StatCard.vue";
+  import BaseCard from "@/components/Base/Card.vue";
+  import BaseSectionHeader from "@/components/Base/SectionHeader.vue";
+  import DateTime from "~/components/global/DateTime.vue";
+  import Currency from "~/components/global/Currency.vue";
+  import Markdown from "~/components/global/Markdown.vue";
+  import { toast } from "@/components/ui/sonner";
+  import { useDialog } from "@/components/ui/dialog-provider";
+  import { DialogID } from "../ui/dialog-provider/utils";
 
   const maintenanceFilterStatus = ref(MaintenanceFilterStatus.MaintenanceFilterStatusScheduled);
-  const maintenanceEditModal = ref<InstanceType<typeof MaintenanceEditModal>>();
 
   const api = useUserApi();
   const { t } = useI18n();
+  const confirm = useConfirm();
+  const { openDialog } = useDialog();
 
   const props = defineProps({
     currentItemId: {
@@ -75,6 +85,35 @@
       },
     ];
   });
+
+  async function deleteEntry(id: string) {
+    const result = await confirm.open(t("maintenance.modal.delete_confirmation"));
+    if (result.isCanceled) {
+      return;
+    }
+
+    const { error } = await api.maintenance.delete(id);
+
+    if (error) {
+      toast.error(t("maintenance.toast.failed_to_delete"));
+      return;
+    }
+    refreshList();
+  }
+
+  async function completeEntry(maintenanceEntry: MaintenanceEntry) {
+    const { error } = await api.maintenance.update(maintenanceEntry.id, {
+      name: maintenanceEntry.name,
+      completedDate: new Date(Date.now()),
+      scheduledDate: maintenanceEntry.scheduledDate ?? "null",
+      description: maintenanceEntry.description,
+      cost: maintenanceEntry.cost,
+    });
+    if (error) {
+      toast.error(t("maintenance.toast.failed_to_update"));
+    }
+    refreshList();
+  }
 </script>
 
 <template>
@@ -116,7 +155,16 @@
         v-if="props.currentItemId"
         class="ml-auto"
         size="sm"
-        @click="maintenanceEditModal?.openCreateModal(props.currentItemId)"
+        @click="
+          openDialog(DialogID.EditMaintenance, {
+            params: { type: 'create', itemId: props.currentItemId },
+            onClose: result => {
+              if (result) {
+                refreshList();
+              }
+            },
+          })
+        "
       >
         <MdiPlus />
         {{ $t("maintenance.list.new") }}
@@ -125,7 +173,7 @@
   </section>
   <section>
     <!-- begin -->
-    <MaintenanceEditModal ref="maintenanceEditModal" @changed="refreshList"></MaintenanceEditModal>
+    <MaintenanceEditModal ref="maintenanceEditModal" @changed="refreshList" />
     <div class="container space-y-6">
       <BaseCard v-for="e in maintenanceDataList" :key="e.id">
         <BaseSectionHeader class="border-b p-6">
@@ -165,24 +213,44 @@
           <Markdown :source="e.description" />
         </div>
         <ButtonGroup class="flex flex-wrap justify-end p-4">
-          <Button size="sm" @click="maintenanceEditModal?.openUpdateModal(e)">
+          <Button
+            size="sm"
+            @click="
+              openDialog(DialogID.EditMaintenance, {
+                params: { type: 'update', maintenanceEntry: e },
+                onClose: result => {
+                  if (result) {
+                    refreshList();
+                  }
+                },
+              })
+            "
+          >
             <MdiEdit />
             {{ $t("maintenance.list.edit") }}
           </Button>
-          <Button
-            v-if="!validDate(e.completedDate)"
-            size="sm"
-            variant="outline"
-            @click="maintenanceEditModal?.complete(e)"
-          >
+          <Button v-if="!validDate(e.completedDate)" size="sm" variant="outline" @click="completeEntry(e)">
             <MdiCheck />
             {{ $t("maintenance.list.complete") }}
           </Button>
-          <Button size="sm" variant="outline" @click="maintenanceEditModal?.duplicate(e, e.itemID)">
+          <Button
+            size="sm"
+            variant="outline"
+            @click="
+              openDialog(DialogID.EditMaintenance, {
+                params: { type: 'duplicate', maintenanceEntry: e, itemId: props.currentItemId! },
+                onClose: result => {
+                  if (result) {
+                    refreshList();
+                  }
+                },
+              })
+            "
+          >
             <MdiContentDuplicate />
             {{ $t("maintenance.list.duplicate") }}
           </Button>
-          <Button size="sm" variant="destructive" @click="maintenanceEditModal?.deleteEntry(e.id)">
+          <Button size="sm" variant="destructive" @click="deleteEntry(e.id)">
             <MdiDelete />
             {{ $t("maintenance.list.delete") }}
           </Button>
@@ -192,7 +260,16 @@
         <button
           type="button"
           class="relative block w-full rounded-lg border-2 border-dashed p-12 text-center"
-          @click="maintenanceEditModal?.openCreateModal(props.currentItemId)"
+          @click="
+            openDialog(DialogID.EditMaintenance, {
+              params: { type: 'create', itemId: props.currentItemId },
+              onClose: result => {
+                if (result) {
+                  refreshList();
+                }
+              },
+            })
+          "
         >
           <MdiWrenchClock class="inline size-16" />
           <span class="mt-2 block text-sm font-medium text-gray-900"> {{ $t("maintenance.list.create_first") }} </span>

frontend/components/ModalConfirm.vue

@@ -3,7 +3,14 @@
     <AlertDialogContent>
       <AlertDialogHeader>
         <AlertDialogTitle>{{ $t("global.confirm") }}</AlertDialogTitle>
-        <AlertDialogDescription> {{ text || $t("global.delete_confirm") }} </AlertDialogDescription>
+        <AlertDialogDescription>
+          {{ text || $t("global.delete_confirm") }}
+        </AlertDialogDescription>
+        <div v-if="href && href !== ''">
+          <a :href="href" target="_blank" rel="noopener noreferrer" class="break-all text-sm text-primary underline">
+            {{ href }}
+          </a>
+        </div>
       </AlertDialogHeader>
       <AlertDialogFooter>
         <AlertDialogCancel @click="cancel(false)">
@@ -19,8 +26,18 @@
 
 <script setup lang="ts">
   import { useDialog } from "./ui/dialog-provider";
+  import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+  } from "@/components/ui/alert-dialog";
 
-  const { text, isRevealed, confirm, cancel } = useConfirm();
+  const { text, href, isRevealed, confirm, cancel } = useConfirm();
   const { addAlert, removeAlert } = useDialog();
 
   watch(

frontend/components/Search/Filter.vue

@@ -50,13 +50,13 @@
   import { Label } from "@/components/ui/label";
 
   type Props = {
-    label: string;
+    label?: string;
     options: {
       name: string;
       id: string;
       treeString?: string;
     }[];
-    modelValue: {
+    modelValue?: {
       name: string;
       id: string;
       treeString?: string;

frontend/components/global/CopyText.vue

@@ -59,6 +59,7 @@
     AlertDialogHeader,
     AlertDialogTitle,
   } from "@/components/ui/alert-dialog";
+  import { Button } from "@/components/ui/button";
 
   const props = defineProps({
     text: {

frontend/components/global/Currency.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, computed } from "vue";
+  import { computed, ref } from "vue";
   import { useI18n } from "vue-i18n";
 
   const { t } = useI18n();
@@ -19,9 +19,7 @@
 
   const props = defineProps<Props>();
 
-  type AsyncReturnType<T extends (...args: any) => Promise<any>> = T extends (...args: any) => Promise<infer R>
-    ? R
-    : any;
+  type AsyncReturnType<T extends (...args: unknown[]) => unknown> = Awaited<ReturnType<T>>;
 
   const fmt = ref<AsyncReturnType<typeof useFormatCurrency> | null>(null);
 

frontend/components/global/DetailsSection/DetailsSection.vue

@@ -73,7 +73,11 @@
   import type { AnyDetail, Detail } from "./types";
   import MdiOpenInNew from "~icons/mdi/open-in-new";
   import { badgeVariants } from "~/components/ui/badge";
-  import { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider } from "@/components/ui/tooltip";
+  import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+  import DateTime from "@/components/global/DateTime.vue";
+  import Currency from "@/components/global/Currency.vue";
+  import Markdown from "@/components/global/Markdown.vue";
+  import CopyText from "@/components/global/CopyText.vue";
 
   defineProps({
     details: {
@@ -143,6 +147,4 @@
       overflow-wrap: break-word;
     }
   }
-
-
 </style>

frontend/components/global/LabelMaker.vue

@@ -11,14 +11,14 @@
   import {
     Dialog,
     DialogContent,
+    DialogDescription,
     DialogFooter,
     DialogHeader,
     DialogTitle,
-    DialogDescription,
   } from "@/components/ui/dialog";
   import { useDialog } from "@/components/ui/dialog-provider";
   import { Button, ButtonGroup } from "@/components/ui/button";
-  import { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider } from "@/components/ui/tooltip";
+  import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 
   const { t } = useI18n();
   const { openDialog, closeDialog } = useDialog();

frontend/components/global/Markdown.vue

@@ -4,7 +4,7 @@
   import DOMPurify from "dompurify";
 
   type Props = {
-    source: string | null | undefined;
+    source?: string | null;
   };
 
   const props = withDefaults(defineProps<Props>(), {
@@ -25,7 +25,7 @@
 
 <template>
   <!-- eslint-disable-next-line vue/no-v-html -->
-  <div class="markdown text-wrap break-words" v-html="raw"></div>
+  <div class="markdown text-wrap break-words" v-html="raw" />
 </template>
 
 <style scoped>

frontend/components/global/Spacer.vue

@@ -1,3 +1,3 @@
 <template>
-  <div class="max-w-full"></div>
+  <div class="max-w-full" />
 </template>

frontend/components/global/StatCard/StatCard.vue

@@ -12,6 +12,7 @@
 </template>
 
 <script setup lang="ts">
+  import Currency from "../Currency.vue";
   import type { StatsFormat } from "./types";
   import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
 

frontend/components/global/Table.types.ts

@@ -5,4 +5,5 @@ export type TableHeader = {
   align?: "left" | "center" | "right";
 };
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type TableData = Record<string, any>;

frontend/components/ui/checkbox/Checkbox.vue

@@ -1,32 +1,36 @@
 <script setup lang="ts">
-import type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui'
-import { cn } from '@/lib/utils'
-import { Check } from 'lucide-vue-next'
-import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+  import type { CheckboxRootEmits, CheckboxRootProps } from "reka-ui";
+  import { cn } from "@/lib/utils";
+  import { Check, Minus } from "lucide-vue-next";
+  import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from "reka-ui";
+  import { computed, type HTMLAttributes } from "vue";
 
-const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<CheckboxRootEmits>()
+  const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes["class"] }>();
+  const emits = defineEmits<CheckboxRootEmits>();
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+  });
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+  const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
   <CheckboxRoot
     v-bind="forwarded"
     :class="
-      cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
-         props.class)"
+      cn(
+        'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground',
+        props.class
+      )
+    "
   >
-    <CheckboxIndicator class="flex h-full w-full items-center justify-center text-current">
+    <CheckboxIndicator class="flex size-full items-center justify-center text-current">
       <slot>
-        <Check class="h-4 w-4" />
+        <Check v-if="typeof props.modelValue === 'boolean'" class="size-4" />
+        <Minus v-else class="size-4" />
       </slot>
     </CheckboxIndicator>
   </CheckboxRoot>

frontend/components/ui/dialog-provider/utils.ts

@@ -1,28 +1,29 @@
-import { computed, type ComputedRef } from 'vue';
-import { createContext } from 'reka-ui';
-import { useMagicKeys, useActiveElement } from '@vueuse/core';
-import type { BarcodeProduct } from '~~/lib/api/types/data-contracts';
+import { computed, type ComputedRef } from "vue";
+import { createContext } from "reka-ui";
+import { useMagicKeys, useActiveElement } from "@vueuse/core";
+import type { BarcodeProduct, ItemSummary, MaintenanceEntry, MaintenanceEntryWithDetails } from "~~/lib/api/types/data-contracts";
 
 export enum DialogID {
-  AttachmentEdit = 'attachment-edit',
-  ChangePassword = 'changePassword',
-  CreateItem = 'create-item',
-  CreateLocation = 'create-location',
-  CreateLabel = 'create-label',
-  CreateNotifier = 'create-notifier',
-  DuplicateSettings = 'duplicate-settings',
-  DuplicateTemporarySettings = 'duplicate-temporary-settings',
-  EditMaintenance = 'edit-maintenance',
-  Import = 'import',
-  ItemImage = 'item-image',
-  ItemTableSettings = 'item-table-settings',
-  PrintLabel = 'print-label',
-  ProductImport = 'product-import',
-  QuickMenu = 'quick-menu',
-  Scanner = 'scanner',
-  PageQRCode = 'page-qr-code',
-  UpdateLabel = 'update-label',
-  UpdateLocation = 'update-location',
+  AttachmentEdit = "attachment-edit",
+  ChangePassword = "changePassword",
+  CreateItem = "create-item",
+  CreateLocation = "create-location",
+  CreateLabel = "create-label",
+  CreateNotifier = "create-notifier",
+  DuplicateSettings = "duplicate-settings",
+  DuplicateTemporarySettings = "duplicate-temporary-settings",
+  EditMaintenance = "edit-maintenance",
+  Import = "import",
+  ItemImage = "item-image",
+  ItemTableSettings = "item-table-settings",
+  PrintLabel = "print-label",
+  ProductImport = "product-import",
+  QuickMenu = "quick-menu",
+  Scanner = "scanner",
+  PageQRCode = "page-qr-code",
+  UpdateLabel = "update-label",
+  UpdateLocation = "update-location",
+  ItemChangeDetails = "item-table-updater",
 }
 
 /**
@@ -31,34 +32,48 @@ export enum DialogID {
  * - Keys not present       => no params allowed
  */
 export type DialogParamsMap = {
-  [DialogID.ItemImage]:
-    | ({
-        type: 'preloaded';
+  [DialogID.ItemImage]: (
+    | {
+        type: "preloaded";
         originalSrc: string;
         originalType?: string;
         thumbnailSrc?: string;
       }
     | {
-        type: 'attachment';
+        type: "attachment";
         mimeType: string;
         thumbnailId?: string;
-      }) & {
-        itemId: string;
-        attachmentId: string;
-      };
+      }
+  ) & {
+    itemId: string;
+    attachmentId: string;
+  };
   [DialogID.CreateItem]?: { product?: BarcodeProduct };
   [DialogID.ProductImport]?: { barcode?: string };
+  [DialogID.EditMaintenance]:
+    | { type: "create"; itemId: string | string[] }
+    | { type: "update"; maintenanceEntry: MaintenanceEntry | MaintenanceEntryWithDetails }
+    | { type: "duplicate"; maintenanceEntry: MaintenanceEntry | MaintenanceEntryWithDetails; itemId: string };
+  [DialogID.ItemChangeDetails]: {
+    items: ItemSummary[];
+    changeLocation?: boolean;
+    addLabels?: boolean;
+    removeLabels?: boolean;
+  };
 };
 
 /**
  * Defines the payload type for a dialog's onClose callback.
  */
 export type DialogResultMap = {
-  [DialogID.ItemImage]?: { action: 'delete', id: string };
+  [DialogID.ItemImage]?: { action: "delete"; id: string };
+  [DialogID.EditMaintenance]?: boolean;
+  [DialogID.ItemChangeDetails]?: boolean;
 };
 
 /** Helpers to split IDs by requirement */
 type OptionalKeys<T> = {
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
   [K in keyof T]-?: {} extends Pick<T, K> ? K : never;
 }[keyof T];
 
@@ -69,13 +84,9 @@ export type NoParamDialogIDs = Exclude<DialogID, SpecifiedDialogIDs>;
 export type RequiredDialogIDs = RequiredKeys<DialogParamsMap>;
 export type OptionalDialogIDs = OptionalKeys<DialogParamsMap>;
 
-type ParamsOf<T extends DialogID> = T extends SpecifiedDialogIDs
-  ? DialogParamsMap[T]
-  : never;
+type ParamsOf<T extends DialogID> = T extends SpecifiedDialogIDs ? DialogParamsMap[T] : never;
 
-type ResultOf<T extends DialogID> = T extends keyof DialogResultMap
-  ? DialogResultMap[T]
-  : void;
+type ResultOf<T extends DialogID> = T extends keyof DialogResultMap ? DialogResultMap[T] : void;
 
 type OpenDialog = {
   // Dialogs with no parameters
@@ -101,22 +112,14 @@ type CloseDialog = {
   // Close a specific dialog that has a defined result type.
   <T extends keyof DialogResultMap>(dialogId: T, result?: ResultOf<T>): void;
   // Close a specific dialog that has NO defined result type.
-  <T extends Exclude<DialogID, keyof DialogResultMap>>(
-    dialogId: T,
-    result?: never
-  ): void;
+  <T extends Exclude<DialogID, keyof DialogResultMap>>(dialogId: T, result?: never): void;
+  <T extends DialogID>(dialogId: T): void;
 };
 
 type OpenCallback = {
   <T extends NoParamDialogIDs>(dialogId: T, cb: () => void): () => void;
-  <T extends RequiredDialogIDs>(
-    dialogId: T,
-    cb: (params: ParamsOf<T>) => void
-  ): () => void;
-  <T extends OptionalDialogIDs>(
-    dialogId: T,
-    cb: (params?: ParamsOf<T>) => void
-  ): () => void;
+  <T extends RequiredDialogIDs>(dialogId: T, cb: (params: ParamsOf<T>) => void): () => void;
+  <T extends OptionalDialogIDs>(dialogId: T, cb: (params?: ParamsOf<T>) => void): () => void;
 };
 
 export const [useDialog, provideDialogContext] = createContext<{
@@ -127,7 +130,7 @@ export const [useDialog, provideDialogContext] = createContext<{
   closeDialog: CloseDialog;
   addAlert: (alertId: string) => void;
   removeAlert: (alertId: string) => void;
-}>('DialogProvider');
+}>("DialogProvider");
 
 /**
  * Hotkey helper:
@@ -140,36 +143,27 @@ type HotkeyKey = {
   code: string;
 };
 
-export function useDialogHotkey<T extends NoParamDialogIDs | OptionalDialogIDs>(
-  dialogId: T,
-  key: HotkeyKey
-): void;
+export function useDialogHotkey<T extends NoParamDialogIDs | OptionalDialogIDs>(dialogId: T, key: HotkeyKey): void;
 export function useDialogHotkey<T extends RequiredDialogIDs>(
   dialogId: T,
   key: HotkeyKey,
   getParams: () => ParamsOf<T>
 ): void;
-export function useDialogHotkey(
-  dialogId: DialogID,
-  key: HotkeyKey,
-  getParams?: () => unknown
-) {
+export function useDialogHotkey(dialogId: DialogID, key: HotkeyKey, getParams?: () => unknown) {
   const { openDialog } = useDialog();
 
   const activeElement = useActiveElement();
 
   const notUsingInput = computed(
-    () =>
-      activeElement.value?.tagName !== 'INPUT' &&
-      activeElement.value?.tagName !== 'TEXTAREA'
+    () => activeElement.value?.tagName !== "INPUT" && activeElement.value?.tagName !== "TEXTAREA"
   );
 
   useMagicKeys({
     passive: false,
-    onEventFired: (event) => {
+    onEventFired: event => {
       if (
         notUsingInput.value &&
-        event.type === 'keydown' &&
+        event.type === "keydown" &&
         event.code === key.code &&
         (key.shift === undefined || event.shiftKey === key.shift) &&
         (key.ctrl === undefined || event.ctrlKey === key.ctrl)
@@ -185,4 +179,4 @@ export function useDialogHotkey(
       }
     },
   });
-}
+}

frontend/components/ui/dialog/Dialog.vue

@@ -7,9 +7,9 @@
 
   const { closeDialog, activeDialog } = useDialog();
 
-  const isOpen = computed(() => (activeDialog.value && activeDialog.value === props.dialogId));
+  const isOpen = computed(() => (activeDialog.value && activeDialog.value === props.dialogId) ?? false);
   const onOpenChange = (open: boolean) => {
-    if (!open) closeDialog(props.dialogId as any);
+    if (!open) closeDialog(props.dialogId);
   };
 
   const forwarded = useForwardPropsEmits(props, emits);