updates to UI and add archiving option

resources/js/Components/DatePickerField.vue

@@ -1,7 +1,7 @@
 <script setup>
-import InputLabel from './InputLabel.vue'
-import InputError from './InputError.vue'
-import { computed } from 'vue'
+import InputLabel from "./InputLabel.vue";
+import InputError from "./InputError.vue";
+import { computed } from "vue";
 
 /*
   DatePickerField (v-calendar)
@@ -25,45 +25,44 @@ const props = defineProps({
   modelValue: { type: [Date, String, Number, null], default: null },
   id: { type: String, default: undefined },
   label: { type: String, default: undefined },
-  format: { type: String, default: 'dd.MM.yyyy' },
+  format: { type: String, default: "dd.MM.yyyy" },
   enableTimePicker: { type: Boolean, default: false },
   inline: { type: Boolean, default: false },
   // legacy/unused in v-calendar (kept to prevent breaking callers)
   autoApply: { type: Boolean, default: false },
-  teleportTarget: { type: [Boolean, String], default: 'body' },
+  teleportTarget: { type: [Boolean, String], default: "body" },
   autoPosition: { type: Boolean, default: true },
-  menuClassName: { type: String, default: 'dp-over-modal' },
+  menuClassName: { type: String, default: "dp-over-modal" },
   fixed: { type: Boolean, default: true },
   closeOnAutoApply: { type: Boolean, default: true },
   closeOnScroll: { type: Boolean, default: true },
-  placeholder: { type: String, default: '' },
+  placeholder: { type: String, default: "" },
   error: { type: [String, Array], default: undefined },
-})
+});
 
-const emit = defineEmits(['update:modelValue', 'change'])
+const emit = defineEmits(["update:modelValue", "change"]);
 
 const valueProxy = computed({
   get: () => props.modelValue,
   set: (val) => {
-    emit('update:modelValue', val)
-    emit('change', val)
+    emit("update:modelValue", val);
+    emit("change", val);
   },
-})
+});
 
 // Convert common date mask from lowercase tokens to v-calendar tokens
 const inputMask = computed(() => {
-  let m = props.format || 'dd.MM.yyyy'
-  return m
-    .replace(/yyyy/g, 'YYYY')
-    .replace(/dd/g, 'DD')
-    .replace(/MM/g, 'MM')
-    + (props.enableTimePicker ? ' HH:mm' : '')
-})
+  let m = props.format || "dd.MM.yyyy";
+  return (
+    m.replace(/yyyy/g, "YYYY").replace(/dd/g, "DD").replace(/MM/g, "MM") +
+    (props.enableTimePicker ? " HH:mm" : "")
+  );
+});
 
 const popoverCfg = computed(() => ({
-  visibility: props.inline ? 'visible' : 'click',
-  placement: 'bottom-start',
-}))
+  visibility: props.inline ? "visible" : "click",
+  placement: "bottom-start",
+}));
 </script>
 
 <template>
@@ -84,20 +83,24 @@ const popoverCfg = computed(() => ({
           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
           :placeholder="placeholder"
           :value="inputValue"
+          autocomplete="off"
           v-on="inputEvents"
         />
       </template>
     </VDatePicker>
 
     <template v-if="error">
-      <InputError v-if="Array.isArray(error)" v-for="(e, idx) in error" :key="idx" :message="e" />
+      <InputError
+        v-if="Array.isArray(error)"
+        v-for="(e, idx) in error"
+        :key="idx"
+        :message="e"
+      />
       <InputError v-else :message="error" />
     </template>
   </div>
-  
 </template>
 
 <style>
 /* Ensure the date picker menu overlays modals/dialogs */
-
 </style>