ui: rework location/labels pages (#475)

* formatting * slimdown locations page * update location/labels * fix dependency issues * fix type generator * cleanup unused variables Former-commit-id: 016780920d
2024-11-24 17:45:41 +00:00 · 2023-07-27 13:21:28 -08:00 · 2023-07-27 13:21:28 -08:00 · 6fd228f1f4
commit 6fd228f1f4
parent 0eb0b283b2
12 changed files with 137 additions and 267 deletions
--- a/Taskfile.yml
+++ b/Taskfile.yml
@ -20,7 +20,7 @@ tasks:
      - db:generate
    cmds:
      - cd backend/app/api/static && swag fmt --dir=../
-      - cd backend/app/api/static && swag init --dir=../,../../../internal,../../../pkgs --parseDependency
+      - cd backend/app/api/static && swag init --dir=../,../../../internal,../../../pkgs
      - |
        npx swagger-typescript-api \
          --no-client \
@ -139,4 +139,4 @@ tasks:
      - task: go:all
      - task: ui:check
      - task: ui:fix
-      - task: test:ci
+      - task: test:ci
--- a/backend/app/api/static/docs/docs.go
+++ b/backend/app/api/static/docs/docs.go
@ -731,7 +731,7 @@ const docTemplate = `{
                    "422": {
                        "description": "Unprocessable Entity",
                        "schema": {
-                            "$ref": "#/definitions/mid.ErrorResponse"
+                            "$ref": "#/definitions/validate.ErrorResponse"
                        }
                    }
                }
@ -1799,20 +1799,6 @@ const docTemplate = `{
        }
    },
    "definitions": {
-        "mid.ErrorResponse": {
-            "type": "object",
-            "properties": {
-                "error": {
-                    "type": "string"
-                },
-                "fields": {
-                    "type": "object",
-                    "additionalProperties": {
-                        "type": "string"
-                    }
-                }
-            }
-        },
        "repo.DocumentOut": {
            "type": "object",
            "properties": {
@ -2853,6 +2839,17 @@ const docTemplate = `{
            "properties": {
                "item": {}
            }
+        },
+        "validate.ErrorResponse": {
+            "type": "object",
+            "properties": {
+                "error": {
+                    "type": "string"
+                },
+                "fields": {
+                    "type": "string"
+                }
+            }
        }
    },
    "securityDefinitions": {
--- a/backend/app/api/static/docs/swagger.json
+++ b/backend/app/api/static/docs/swagger.json
@ -723,7 +723,7 @@
                    "422": {
                        "description": "Unprocessable Entity",
                        "schema": {
-                            "$ref": "#/definitions/mid.ErrorResponse"
+                            "$ref": "#/definitions/validate.ErrorResponse"
                        }
                    }
                }
@ -1791,20 +1791,6 @@
        }
    },
    "definitions": {
-        "mid.ErrorResponse": {
-            "type": "object",
-            "properties": {
-                "error": {
-                    "type": "string"
-                },
-                "fields": {
-                    "type": "object",
-                    "additionalProperties": {
-                        "type": "string"
-                    }
-                }
-            }
-        },
        "repo.DocumentOut": {
            "type": "object",
            "properties": {
@ -2845,6 +2831,17 @@
            "properties": {
                "item": {}
            }
+        },
+        "validate.ErrorResponse": {
+            "type": "object",
+            "properties": {
+                "error": {
+                    "type": "string"
+                },
+                "fields": {
+                    "type": "string"
+                }
+            }
        }
    },
    "securityDefinitions": {
--- a/backend/app/api/static/docs/swagger.yaml
+++ b/backend/app/api/static/docs/swagger.yaml
@ -1,14 +1,5 @@
 basePath: /api
 definitions:
-  mid.ErrorResponse:
-    properties:
-      error:
-        type: string
-      fields:
-        additionalProperties:
-          type: string
-        type: object
-    type: object
  repo.DocumentOut:
    properties:
      id:
@ -707,6 +698,13 @@ definitions:
    properties:
      item: {}
    type: object
+  validate.ErrorResponse:
+    properties:
+      error:
+        type: string
+      fields:
+        type: string
+    type: object
 info:
  contact:
    name: Don't
@ -1084,7 +1082,7 @@ paths:
        "422":
          description: Unprocessable Entity
          schema:
-            $ref: '#/definitions/mid.ErrorResponse'
+            $ref: '#/definitions/validate.ErrorResponse'
      security:
      - Bearer: []
      summary: Create Item Attachment
--- a/backend/go.mod
+++ b/backend/go.mod
@ -17,8 +17,7 @@ require (
 	github.com/pkg/errors v0.9.1
 	github.com/rs/zerolog v1.29.1
 	github.com/stretchr/testify v1.8.4
-	github.com/swaggo/http-swagger/v2 v2.0.1
-	github.com/swaggo/http-swagger/v2 v2.0.1
+	github.com/swaggo/http-swagger v1.3.4
 	github.com/swaggo/swag v1.16.1
 	github.com/yeqown/go-qrcode/v2 v2.2.2
 	github.com/yeqown/go-qrcode/writer/standard v1.2.1
--- a/backend/go.sum
+++ b/backend/go.sum
@ -192,8 +192,6 @@ github.com/DataDog/datadog-go v3.2.0+incompatible/go.mod h1:LButxg5PwREeZtORoXG3
 github.com/KyleBanks/depth v1.2.1 h1:5h8fQADFrWtarTdtDudMmGsC7GPbOAu6RVB3ffsVFHc=
 github.com/KyleBanks/depth v1.2.1/go.mod h1:jzSb9d0L43HxTQfT+oSA1EEp2q+ne2uh6XgeJcm8brE=
 github.com/OneOfOne/xxhash v1.2.2/go.mod h1:HSdplMjZKSmBqAxg5vPj2TmRDmfkzw+cTzAElWljhcU=
-github.com/PuerkitoBio/purell v1.1.1/go.mod h1:c11w/QuzBsJSee3cPx9rAFu61PvFxuPbtSwDGJws/X0=
-github.com/PuerkitoBio/urlesc v0.0.0-20170810143723-de5bf2ad4578/go.mod h1:uGdkoq3SwY9Y+13GIhn11/XLaGBb4BfwItxLd5jeuXE=
 github.com/agext/levenshtein v1.2.3 h1:YB2fHEn0UJagG8T1rrWknE3ZQzWM06O8AMAatNn7lmo=
 github.com/agext/levenshtein v1.2.3/go.mod h1:JEDfjyjHDjOF/1e4FlBE/PkbqA9OfWu2ki2W0IB5558=
 github.com/alecthomas/template v0.0.0-20160405071501-a0175ee3bccc/go.mod h1:LOuyumcjzFXgccqObfd/Ljyb9UuFJ6TxHnclSeseNhc=
@ -202,7 +200,6 @@ github.com/alecthomas/units v0.0.0-20151022065526-2efee857e7cf/go.mod h1:ybxpYRF
 github.com/alecthomas/units v0.0.0-20190717042225-c3de453c63f4/go.mod h1:ybxpYRFXyAe+OPACYpWeL0wqObRcbAqCMya13uyzqw0=
 github.com/alecthomas/units v0.0.0-20190924025748-f65c72e2690d/go.mod h1:rBZYJk541a8SKzHPHnH3zbiI+7dagKZ0cgpgrD7Fyho=
 github.com/antihax/optional v1.0.0/go.mod h1:uupD/76wgC+ih3iEmQUL+0Ugr19nfwCT1kdvxnR2qWY=
-github.com/apparentlymart/go-dump v0.0.0-20180507223929-23540a00eaa3/go.mod h1:oL81AME2rN47vu18xqj1S1jPIPuN7afo62yKTNn3XMM=
 github.com/apparentlymart/go-textseg/v13 v13.0.0 h1:Y+KvPE1NYz0xl601PVImeQfFyEy6iT90AvPUL1NNfNw=
 github.com/apparentlymart/go-textseg/v13 v13.0.0/go.mod h1:ZK2fH7c4NqDTLtiYLvIkEghdlcqw7yxLeM89kiTRPUo=
 github.com/ardanlabs/conf/v3 v3.1.6 h1:t6AkG131ncy21ko18KQvBIc6+fWGZHTho12fd8JaUo8=
@ -313,7 +310,6 @@ github.com/go-playground/validator/v10 v10.14.1/go.mod h1:9iXMNT7sEkjXb0I+enO7QX
 github.com/go-stack/stack v1.8.0/go.mod h1:v0f6uXyyMGvRgIKkXu+yp6POWl0qKG85gN/melR3HDY=
 github.com/go-task/slim-sprig v0.0.0-20210107165309-348f09dbbbc0/go.mod h1:fyg7847qk6SyHyPtNmDHnmrv/HOrqktSC+C9fM+CJOE=
 github.com/go-test/deep v1.0.3 h1:ZrJSEWsXzPOxaZnFteGEfooLba+ju3FYIbOrS+rQd68=
-github.com/go-test/deep v1.0.3/go.mod h1:wGDj63lr65AM2AQyKZd/NYHGb0R+1RLqB8NKt3aSFNA=
 github.com/gocarina/gocsv v0.0.0-20230616125104-99d496ca653d h1:KbPOUXFUDJxwZ04vbmDOc3yuruGvVO+LOa7cVER3yWw=
 github.com/gocarina/gocsv v0.0.0-20230616125104-99d496ca653d/go.mod h1:5YoVOkjYAQumqlV356Hj3xeYh4BdZuLE0/nRkf2NKkI=
 github.com/godbus/dbus/v5 v5.0.4/go.mod h1:xhWf0FNVPg57R7Z0UbKHbJfkEywrmjJnf7w5xrFpKfA=
@ -491,7 +487,6 @@ github.com/kr/text v0.1.0/go.mod h1:4Jbv+DJW3UT/LiOwJeYQe1efqtUx/iVham/4vfdArNI=
 github.com/kr/text v0.2.0 h1:5Nx0Ya0ZqY2ygV366QzturHI13Jq95ApcVaJBhpS+AY=
 github.com/kr/text v0.2.0/go.mod h1:eLer722TekiGuMkidMxC/pM04lWEeraHUUmBw8l2grE=
 github.com/kylelemons/godebug v0.0.0-20170820004349-d65d576e9348 h1:MtvEpTB6LX3vkb4ax0b5D2DHbNAUsen0Gx5wZoq3lV4=
-github.com/kylelemons/godebug v0.0.0-20170820004349-d65d576e9348/go.mod h1:B69LEHPfb2qLo0BaaOLcbitczOKLWTsrBG9LczfCD4k=
 github.com/leodido/go-urn v1.2.4 h1:XlAE/cm/ms7TE/VMVoduSpNBoyc2dOxHs5MZSwAN63Q=
 github.com/leodido/go-urn v1.2.4/go.mod h1:7ZrI8mTSeBSHl/UaRyKQW1qZeMgak41ANeCNaVckg+4=
 github.com/magiconair/properties v1.8.6/go.mod h1:y3VJvCyxH9uVvJTWEGAELF3aiYNyPKd5NZ3oSwXrF60=
@ -516,8 +511,6 @@ github.com/mattn/go-isatty v0.0.14/go.mod h1:7GGIvUiUoEMVVmxf/4nioHXj79iQHKdU27k
 github.com/mattn/go-isatty v0.0.16/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
 github.com/mattn/go-isatty v0.0.19 h1:JITubQf0MOLdlGRuRq+jtsDlekdYPia9ZFsB8h/APPA=
 github.com/mattn/go-isatty v0.0.19/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
-github.com/mattn/go-runewidth v0.0.9 h1:Lm995f3rfxdpd6TSmuVCHVb/QhupuXlYr8sCI/QdE+0=
-github.com/mattn/go-runewidth v0.0.9/go.mod h1:H031xJmbD/WCDINGzjvQ9THkh0rPKHF+m2gUSrubnMI=
 github.com/mattn/go-sqlite3 v1.14.17 h1:mCRHCLDUBXgpKAqIKsaAaAsrAlbkeomtRFKXh2L6YIM=
 github.com/mattn/go-sqlite3 v1.14.17/go.mod h1:2eHXhiwb8IkHr+BDWZGa96P6+rkvnG63S2DGjv9HUNg=
 github.com/matttproud/golang_protobuf_extensions v1.0.1/go.mod h1:D8He9yQNgCq6Z5Ld7szi9bcBfOoFv/3dc6xSMkL2PC0=
@ -543,8 +536,6 @@ github.com/mwitkow/go-conntrack v0.0.0-20190716064945-2f068394615f/go.mod h1:qRW
 github.com/niemeyer/pretty v0.0.0-20200227124842-a10e7caefd8e/go.mod h1:zD1mROLANZcx1PVRCS0qkT7pwLkGfwJo4zjcN/Tysno=
 github.com/nxadm/tail v1.4.4/go.mod h1:kenIhsEOeOJmVchQTgglprH7qJGnHDVpk1VPCcaMI8A=
 github.com/nxadm/tail v1.4.8/go.mod h1:+ncqLTQzXmGhMZNUePPaPqPvBxHAIsmXswZKocGu+AU=
-github.com/olekukonko/tablewriter v0.0.5 h1:P2Ga83D34wi1o9J6Wh1mRuqd4mF/x/lgBS7N7AbDhec=
-github.com/olekukonko/tablewriter v0.0.5/go.mod h1:hPp6KlRPjbx+hW8ykQs1w3UBbZlj6HuIJcUGPhkA7kY=
 github.com/onsi/ginkgo v1.6.0/go.mod h1:lLunBs/Ym6LB5Z9jYTR76FiuTmxDTDusOGeTQH+WWjE=
 github.com/onsi/ginkgo v1.12.1/go.mod h1:zj2OWP4+oCPe1qIXoGWkgMRwljMUYCdkwsT2108oapk=
 github.com/onsi/ginkgo v1.16.4 h1:29JGrr5oVBm5ulCWet69zQkzWipVXIol6ygQUe/EzNc=
@ -609,7 +600,6 @@ github.com/ryanuber/columnize v2.1.0+incompatible/go.mod h1:sm1tb6uqfes/u+d4ooFo
 github.com/sagikazarmark/crypt v0.8.0/go.mod h1:TmKwZAo97S4Fy4sfMH/HX/cQP5D+ijra2NyLpNNmttY=
 github.com/sean-/seed v0.0.0-20170313163322-e2103e2c3529/go.mod h1:DxrIzT+xaE7yg65j358z/aeFdxmN0P9QXhEzd20vsDc=
 github.com/sergi/go-diff v1.0.0 h1:Kpca3qRNrduNnOQeazBd0ysaKrUJiIuISHxogkT9RPQ=
-github.com/sergi/go-diff v1.0.0/go.mod h1:0CfEIISq7TuYL3j771MWULgwwjU+GofnZX9QAmXWZgo=
 github.com/sirupsen/logrus v1.2.0/go.mod h1:LxeOpSwHxABJmUn/MG1IvRgCAasNZTLOkJPxbbu5VWo=
 github.com/sirupsen/logrus v1.4.2/go.mod h1:tLMulIdttU9McNUspp0xgXVQah82FyeX6MwdIuYE2rE=
 github.com/sirupsen/logrus v1.6.0/go.mod h1:7uNnSEd1DgxDLC74fIahvMZmmYsHGZGEOFrfsX/uA88=
@ -617,10 +607,7 @@ github.com/spaolacci/murmur3 v0.0.0-20180118202830-f09979ecbc72/go.mod h1:JwIasO
 github.com/spf13/afero v1.9.2/go.mod h1:iUV7ddyEEZPO5gA3zD4fJt6iStLlL+Lg4m2cihcDf8Y=
 github.com/spf13/cast v1.5.0/go.mod h1:SpXXQ5YoyJw6s3/6cMTQuxvgRl3PCJiyaX9p6b155UU=
 github.com/spf13/cobra v1.6.1/go.mod h1:IOw/AERYS7UzyrGinqmz6HLUo219MORXGxhbaJUqzrY=
-github.com/spf13/cobra v1.7.0 h1:hyqWnYt1ZQShIddO5kBpj3vu05/++x6tJ6dg8EC572I=
-github.com/spf13/cobra v1.7.0/go.mod h1:uLxZILRyS/50WlhOIKD7W6V5bgeIt+4sICxh6uRMrb0=
 github.com/spf13/jwalterweatherman v1.1.0/go.mod h1:aNWZUN0dPAAO/Ljvb5BEdw96iTZ0EXowPYD95IqWIGo=
-github.com/spf13/pflag v1.0.5 h1:iy+VFUOCP1a+8yFto/drg2CJ5u0yRoB7fZw3DKv/JXA=
 github.com/spf13/pflag v1.0.5/go.mod h1:McXfInJRrz4CZXVZOBLb0bTZqETkiAhM9Iw0y3An2Bg=
 github.com/spf13/viper v1.14.0/go.mod h1:WT//axPky3FdvXHzGw33dNdXXXfFQqmEalje+egj8As=
 github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
@ -645,7 +632,6 @@ github.com/swaggo/files v1.0.1 h1:J1bVJ4XHZNq0I46UU90611i9/YzdrF7x92oX1ig5IdE=
 github.com/swaggo/files v1.0.1/go.mod h1:0qXmMNH6sXNf+73t65aKeB+ApmgxdnkQzVTAj2uaMUg=
 github.com/swaggo/http-swagger v1.3.4 h1:q7t/XLx0n15H1Q9/tk3Y9L4n210XzJF5WtnDX64a5ww=
 github.com/swaggo/http-swagger v1.3.4/go.mod h1:9dAh0unqMBAlbp1uE2Uc2mQTxNMU/ha4UbucIg1MFkQ=
-github.com/swaggo/http-swagger/v2 v2.0.1/go.mod h1:XYhrQVIKz13CxuKD4p4kvpaRB4jJ1/MlfQXVOE+CX8Y=
 github.com/swaggo/swag v1.16.1 h1:fTNRhKstPKxcnoKsytm4sahr8FaYzUcT7i1/3nd/fBg=
 github.com/swaggo/swag v1.16.1/go.mod h1:9/LMvHycG3NFHfR6LwvikHv5iFvmPADQ359cKikGxto=
 github.com/tv42/httpunix v0.0.0-20150427012821-b75d8614f926/go.mod h1:9ESjWnEqriFuLhtthL60Sar/7RFoluCcXsuvEwTV5KM=
@ -664,7 +650,6 @@ github.com/yuin/goldmark v1.4.1/go.mod h1:mwnBkeHKe2W/ZEtQ+71ViKU8L12m81fl3OWwC1
 github.com/yuin/goldmark v1.4.13/go.mod h1:6yULJ656Px+3vBD8DxQVa3kxgyrAnzto9xy5taEt/CY=
 github.com/zclconf/go-cty v1.13.2 h1:4GvrUxe/QUDYuJKAav4EYqdM47/kZa672LwmXFmEKT0=
 github.com/zclconf/go-cty v1.13.2/go.mod h1:YKQzy/7pZ7iq2jNFzy5go57xdxdWoLLpaEp4u238AE0=
-github.com/zclconf/go-cty-debug v0.0.0-20191215020915-b22d67c1ba0b/go.mod h1:ZRKQfBXbGkpdV6QMzT3rU1kSTAnfu1dO8dPKjYprgj8=
 go.etcd.io/etcd/api/v3 v3.5.5/go.mod h1:KFtNaxGDw4Yx/BA4iPPwevUTAuqcsPxzyX8PHydchN8=
 go.etcd.io/etcd/client/pkg/v3 v3.5.5/go.mod h1:ggrwbk069qxpKPq8/FKkQ3Xq9y39kbFR4LnKszpRXeQ=
 go.etcd.io/etcd/client/v2 v2.305.5/go.mod h1:zQjKllfqfBVyVStbt4FaosoX2iYd8fV/GRy/PbowgP4=
--- a/docs/docs/api/openapi-2.0.json
+++ b/docs/docs/api/openapi-2.0.json
@ -723,7 +723,7 @@
                    "422": {
                        "description": "Unprocessable Entity",
                        "schema": {
-                            "$ref": "#/definitions/mid.ErrorResponse"
+                            "$ref": "#/definitions/validate.ErrorResponse"
                        }
                    }
                }
@ -1791,20 +1791,6 @@
        }
    },
    "definitions": {
-        "mid.ErrorResponse": {
-            "type": "object",
-            "properties": {
-                "error": {
-                    "type": "string"
-                },
-                "fields": {
-                    "type": "object",
-                    "additionalProperties": {
-                        "type": "string"
-                    }
-                }
-            }
-        },
        "repo.DocumentOut": {
            "type": "object",
            "properties": {
@ -2845,6 +2831,17 @@
            "properties": {
                "item": {}
            }
+        },
+        "validate.ErrorResponse": {
+            "type": "object",
+            "properties": {
+                "error": {
+                    "type": "string"
+                },
+                "fields": {
+                    "type": "string"
+                }
+            }
        }
    },
    "securityDefinitions": {
--- a/frontend/components/Item/View/Selectable.vue
+++ b/frontend/components/Item/View/Selectable.vue
@ -25,9 +25,8 @@

 <template>
  <section>
-    <BaseSectionHeader class="mb-5 flex justify-between items-center">
+    <BaseSectionHeader class="mb-2 flex justify-between items-center">
      Items
-
      <template #description>
        <div v-if="!viewSet" class="dropdown dropdown-hover dropdown-left">
          <label tabindex="0" class="btn btn-ghost m-1">
@ -57,6 +56,7 @@
    <template v-else>
      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
        <ItemCard v-for="item in items" :key="item.id" :item="item" />
+        <div class="first:block hidden text-lg">No Items to Display</div>
      </div>
    </template>
  </section>
--- a/frontend/lib/api/types/data-contracts.ts
+++ b/frontend/lib/api/types/data-contracts.ts
@ -10,11 +10,6 @@
 * ---------------------------------------------------------------
 */

-export interface MidErrorResponse {
-  error: string;
-  fields: Record<string, string>;
-}
-
 export interface DocumentOut {
  id: string;
  path: string;
@ -432,3 +427,8 @@ export interface TokenResponse {
 export interface Wrapped {
  item: any;
 }
+
+export interface ValidateErrorResponse {
+  error: string;
+  fields: string;
+}
--- a/frontend/pages/label/[id].vue
+++ b/frontend/pages/label/[id].vue
@ -1,6 +1,4 @@
 <script setup lang="ts">
-  import type { AnyDetail, Details } from "~~/components/global/DetailsSection/types";
-
  definePageMeta({
    middleware: ["auth"],
  });
@ -9,8 +7,6 @@
  const api = useUserApi();
  const toast = useNotifier();

-  const preferences = useViewPreferences();
-
  const labelId = computed<string>(() => route.params.id as string);

  const { data: label } = useAsyncData(labelId.value, async () => {
@ -23,42 +19,6 @@
    return data;
  });

-  const details = computed<Details>(() => {
-    const details = [
-      {
-        name: "Name",
-        text: label.value?.name,
-      } as AnyDetail,
-      {
-        name: "Description",
-        type: "markdown",
-        text: label.value?.description,
-      } as AnyDetail,
-    ];
-
-    if (preferences.value.showDetails) {
-      return [
-        ...details,
-        {
-          name: "Created",
-          text: label.value?.createdAt,
-          type: "date",
-        } as AnyDetail,
-        {
-          name: "Updated",
-          text: label.value?.updatedAt,
-          type: "date",
-        } as AnyDetail,
-        {
-          name: "Database ID",
-          text: label.value?.id,
-        } as AnyDetail,
-      ];
-    }
-
-    return details;
-  });
-
  const confirm = useConfirm();

  async function confirmDelete() {
@ -123,40 +83,50 @@
      </form>
    </BaseModal>

-    <BaseCard class="mb-16">
-      <template #title>
-        <BaseSectionHeader>
-          <Icon name="mdi-tag" class="mr-2 -mt-1 text-base-content" />
+    <BaseContainer v-if="label" class="space-y-6 mb-16">
+      <section>
+        <BaseSectionHeader v-if="label">
+          <Icon name="mdi-package-variant" class="mr-2 -mt-1 text-base-content" />
          <span class="text-base-content">
            {{ label ? label.name : "" }}
          </span>
-        </BaseSectionHeader>
-      </template>

-      <template #title-actions>
-        <div class="flex flex-wrap mt-2 gap-2">
-          <div class="form-control max-w-[160px]">
-            <label class="label cursor-pointer">
-              <input v-model="preferences.showDetails" type="checkbox" class="toggle toggle-primary" />
-              <span class="label-text ml-2"> Detailed View </span>
-            </label>
+          <template #description>
+            <Markdown class="text-lg" :source="label.description"> </Markdown>
+          </template>
+        </BaseSectionHeader>
+
+        <div class="flex gap-3 flex-wrap mb-6 text-sm italic">
+          <div>
+            Created
+            <DateTime :date="label?.createdAt" />
          </div>
-          <BaseButton class="ml-auto" size="sm" @click="openUpdate">
-            <Icon class="mr-1" name="mdi-pencil" />
-            Edit
-          </BaseButton>
-          <BaseButton size="sm" @click="confirmDelete">
-            <Icon class="mr-1" name="mdi-delete" />
+          <div>
+            <Icon name="mdi-circle-small" />
+          </div>
+          <div>
+            Last Updated
+            <DateTime :date="label?.updatedAt" />
+          </div>
+        </div>
+
+        <div class="flex flex-wrap items-center justify-between mb-6 mt-3">
+          <div class="btn-group">
+            <PageQRCode class="dropdown-right" />
+            <BaseButton class="ml-auto" size="sm" @click="openUpdate">
+              <Icon class="mr-1" name="mdi-pencil" />
+              Edit
+            </BaseButton>
+          </div>
+          <BaseButton class="btn btn-sm" @click="confirmDelete()">
+            <Icon name="mdi-delete" class="mr-2" />
            Delete
          </BaseButton>
-          <PageQRCode />
        </div>
-      </template>
+      </section>
+    </BaseContainer>

-      <DetailsSection :details="details" />
-    </BaseCard>
-
-    <section v-if="label && label.items && label.items.length > 0">
+    <section v-if="label && label.items">
      <ItemViewSelectable :items="label.items" />
    </section>
  </BaseContainer>
--- a/frontend/pages/location/[id].vue
+++ b/frontend/pages/location/[id].vue
@ -1,5 +1,4 @@
 <script setup lang="ts">
-  import { AnyDetail, Details } from "~~/components/global/DetailsSection/types";
  import { LocationSummary, LocationUpdate } from "~~/lib/api/types/data-contracts";
  import { useLocationStore } from "~~/stores/locations";

@ -11,8 +10,6 @@
  const api = useUserApi();
  const toast = useNotifier();

-  const preferences = useViewPreferences();
-
  const locationId = computed<string>(() => route.params.id as string);

  const { data: location } = useAsyncData(locationId.value, async () => {
@ -30,42 +27,6 @@
    return data;
  });

-  const details = computed<Details>(() => {
-    const details = [
-      {
-        name: "Name",
-        text: location.value?.name ?? "",
-      },
-      {
-        name: "Description",
-        type: "markdown",
-        text: location.value?.description ?? "",
-      } as AnyDetail,
-    ];
-
-    if (preferences.value.showDetails) {
-      return [
-        ...details,
-        {
-          name: "Created",
-          text: location.value?.createdAt,
-          type: "date",
-        } as AnyDetail,
-        {
-          name: "Updated",
-          text: location.value?.updatedAt,
-          type: "date",
-        } as AnyDetail,
-        {
-          name: "Database ID",
-          text: location.value?.id,
-        } as AnyDetail,
-      ];
-    }
-
-    return details;
-  });
-
  const confirm = useConfirm();

  async function confirmDelete() {
@ -125,6 +86,7 @@

 <template>
  <div>
+    <!-- Update Dialog -->
    <BaseModal v-model="updateModal">
      <template #title> Update Location </template>
      <form v-if="location" @submit.prevent="update">
@ -136,47 +98,56 @@
        </div>
      </form>
    </BaseModal>
-    <BaseContainer class="space-y-10 mb-16">
-      <BaseCard>
-        <template #title>
-          <BaseSectionHeader>
-            <Icon name="mdi-map-marker" class="mr-2 -mt-1 text-base-content" />
-            <span class="text-base-content">
-              {{ location ? location.name : "" }}
-            </span>
-            <div v-if="location && location.parent" class="text-sm breadcrumbs pb-0">
-              <ul class="text-base-content/70">
-                <li>
-                  <NuxtLink :to="`/location/${location.parent.id}`"> {{ location.parent.name }}</NuxtLink>
-                </li>
-                <li>{{ location.name }}</li>
-              </ul>
-            </div>
-          </BaseSectionHeader>
-        </template>

-        <template #title-actions>
-          <div class="flex flex-wrap mt-2 gap-2">
-            <div class="form-control max-w-[160px]">
-              <label class="label cursor-pointer">
-                <input v-model="preferences.showDetails" type="checkbox" class="toggle toggle-primary" />
-                <span class="label-text ml-2"> Detailed View </span>
-              </label>
-            </div>
+    <BaseContainer v-if="location" class="space-y-6 mb-16">
+      <section>
+        <BaseSectionHeader v-if="location">
+          <Icon name="mdi-package-variant" class="mr-2 -mt-1 text-base-content" />
+          <span class="text-base-content">
+            {{ location ? location.name : "" }}
+          </span>
+
+          <div v-if="location?.parent" class="text-sm breadcrumbs pb-0">
+            <ul class="text-base-content/70">
+              <li>
+                <NuxtLink :to="`/location/${location.parent.id}`"> {{ location.parent.name }}</NuxtLink>
+              </li>
+              <li>{{ location.name }}</li>
+            </ul>
+          </div>
+          <template #description>
+            <Markdown class="text-lg" :source="location.description"> </Markdown>
+          </template>
+        </BaseSectionHeader>
+
+        <div class="flex gap-3 flex-wrap mb-6 text-sm italic">
+          <div>
+            Created
+            <DateTime :date="location?.createdAt" />
+          </div>
+          <div>
+            <Icon name="mdi-circle-small" />
+          </div>
+          <div>
+            Last Updated
+            <DateTime :date="location?.updatedAt" />
+          </div>
+        </div>
+
+        <div class="flex flex-wrap items-center justify-between mb-6 mt-3">
+          <div class="btn-group">
+            <PageQRCode class="dropdown-right" />
            <BaseButton class="ml-auto" size="sm" @click="openUpdate">
              <Icon class="mr-1" name="mdi-pencil" />
              Edit
            </BaseButton>
-            <BaseButton size="sm" @click="confirmDelete">
-              <Icon class="mr-1" name="mdi-delete" />
-              Delete
-            </BaseButton>
-            <PageQRCode />
          </div>
-        </template>
-
-        <DetailsSection :details="details" />
-      </BaseCard>
+          <BaseButton class="btn btn-sm" @click="confirmDelete()">
+            <Icon name="mdi-delete" class="mr-2" />
+            Delete
+          </BaseButton>
+        </div>
+      </section>

      <template v-if="location && location.items.length > 0">
        <ItemViewSelectable :items="location.items" />
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@ -87,7 +87,7 @@ devDependencies:
    version: 6.0.0(eslint@8.29.0)(typescript@5.0.2)
  '@vite-pwa/nuxt':
    specifier: ^0.1.0
-    version: 0.1.0(@nuxt/kit@3.6.3)(vite-plugin-pwa@0.16.4)
+    version: 0.1.0(@nuxt/kit@3.6.5)(vite-plugin-pwa@0.16.4)
  eslint:
    specifier: ^8.23.0
    version: 8.29.0
@ -1900,32 +1900,6 @@ packages:
      - supports-color
    dev: false

-  /@nuxt/kit@3.6.3(rollup@2.79.1):
-    resolution: {integrity: sha512-Eq+2whSIsZ+2IdB9J3okYOc+nZHassjt13vJZowxO3dw0rsXTnWGFHx40IX+wrBYE6eiOHjU/cXQ1XHdiU2GyQ==}
-    engines: {node: ^14.18.0 || >=16.10.0}
-    dependencies:
-      '@nuxt/schema': 3.6.3(rollup@2.79.1)
-      c12: 1.4.2
-      consola: 3.2.3
-      defu: 6.1.2
-      globby: 13.2.2
-      hash-sum: 2.0.0
-      ignore: 5.2.4
-      jiti: 1.19.1
-      knitwork: 1.0.0
-      mlly: 1.4.0
-      pathe: 1.1.1
-      pkg-types: 1.0.3
-      scule: 1.0.0
-      semver: 7.5.4
-      unctx: 2.3.1
-      unimport: 3.0.14(rollup@2.79.1)
-      untyped: 1.3.2
-    transitivePeerDependencies:
-      - rollup
-      - supports-color
-    dev: true
-
  /@nuxt/kit@3.6.5(rollup@2.79.1):
    resolution: {integrity: sha512-uBI5I2Zx6sk+vRHU+nBmifwxg/nyXCGZ1g5hUKrUfgv1ZfiKB8JkN5T9iRoduDOaqbwM6XSnEl1ja73iloDcrw==}
    engines: {node: ^14.18.0 || >=16.10.0}
@ -2009,24 +1983,6 @@ packages:
      - supports-color
    dev: false

-  /@nuxt/schema@3.6.3(rollup@2.79.1):
-    resolution: {integrity: sha512-ZkcDt1DbgKX4Zv6Y+uLdn4Zt2WUDsZy+cuVx9XTRPoGVaG9PXZEgQr1XYoVH1vBMH/8VgDApvjok/Vzo+x+Nrg==}
-    engines: {node: ^14.18.0 || >=16.10.0}
-    dependencies:
-      defu: 6.1.2
-      hookable: 5.5.3
-      pathe: 1.1.1
-      pkg-types: 1.0.3
-      postcss-import-resolver: 2.0.0
-      std-env: 3.3.3
-      ufo: 1.1.2
-      unimport: 3.0.14(rollup@2.79.1)
-      untyped: 1.3.2
-    transitivePeerDependencies:
-      - rollup
-      - supports-color
-    dev: true
-
  /@nuxt/schema@3.6.5(rollup@2.79.1):
    resolution: {integrity: sha512-UPUnMB0W5TZ/Pi1fiF71EqIsPlj8LGZqzhSf8wOeh538KHwxbA9r7cuvEUU92eXRksOZaylbea3fJxZWhOITVw==}
    engines: {node: ^14.18.0 || >=16.10.0}
@ -2896,13 +2852,13 @@ packages:
      - encoding
      - supports-color

-  /@vite-pwa/nuxt@0.1.0(@nuxt/kit@3.6.3)(vite-plugin-pwa@0.16.4):
+  /@vite-pwa/nuxt@0.1.0(@nuxt/kit@3.6.5)(vite-plugin-pwa@0.16.4):
    resolution: {integrity: sha512-w6wm/0Y9yIqo6UTj9LeQUMR+xuRTf2sRdUTffu03SbRyWBzF7SnQcTqTRkXQy+NK+XafZuIDDLC12VkhValg4g==}
    peerDependencies:
      '@nuxt/kit': ^3.5.3
      vite-plugin-pwa: '>=0.16.3 <1'
    dependencies:
-      '@nuxt/kit': 3.6.3(rollup@2.79.1)
+      '@nuxt/kit': 3.6.5(rollup@2.79.1)
      vite-plugin-pwa: 0.16.4(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@7.0.0)
    dev: true