refactor: refactor item page UI (#235)

* fix generated types

* fix tailwind auto-complete

* force lowercase buttons

* add title and change style for items page

* add copy button support for item details

* empty state for log

* fix duplicate padding

* add option for create without closing the current dialog.

* hide purchase price is not set

* invert toggle for edit mode

* update styles on item cards

* add edit support for maintenance logs

frontend/components/global/DetailsSection/DetailsSection.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="border-t border-gray-300 px-4 py-5 sm:p-0">
     <dl class="sm:divide-y sm:divide-gray-300">
-      <div v-for="(detail, i) in details" :key="i" class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+      <div v-for="(detail, i) in details" :key="i" class="py-4 sm:grid group sm:grid-cols-3 sm:gap-4 sm:px-6">
         <dt class="text-sm font-medium text-base-content">
           {{ detail.name }}
         </dt>
-        <dd class="mt-1 text-sm text-base-content sm:col-span-2 sm:mt-0">
+        <dd class="text-sm text-base-content text-start sm:col-span-2">
           <slot :name="detail.slot || detail.name" v-bind="{ detail }">
             <DateTime v-if="detail.type == 'date'" :date="detail.text" />
             <Currency v-else-if="detail.type == 'currency'" :amount="detail.text" />
@@ -23,7 +23,15 @@
               </ClientOnly>
             </template>
             <template v-else>
-              {{ detail.text }}
+              <span class="flex items-center">
+                {{ detail.text }}
+                <span
+                  v-if="detail.copyable"
+                  class="opacity-0 group-hover:opacity-100 ml-4 my-0 duration-75 transition-opacity"
+                >
+                  <CopyText :text="detail.text.toString()" :icon-size="16" class="btn btn-xs btn-ghost btn-circle" />
+                </span>
+              </span>
             </template>
           </slot>
         </dd>