Feat/report history api

src/components/Global/BaseFormButton.vue

@@ -103,6 +103,11 @@ const buttonStyle = computed(() => ({
   background-color: $black;
 }
 
+.form-button--gray {
+  background-color: #D4D4D4;
+  color: $black;
+}
+
 .form-button:hover {
   opacity: 0.9;
 }

src/components/Global/BaseFormCheckbox.vue

@@ -20,7 +20,7 @@ const props = defineProps({
     variant: { type: String, default: 'square' },
 });
 
-const model = defineModel(); 
+const model = defineModel();
 
 const variantClass = computed(() => `form-checkbox--${props.variant}`);
 </script>
@@ -34,7 +34,6 @@ const variantClass = computed(() => `form-checkbox--${props.variant}`);
     display: flex;
     align-items: center;
     cursor: pointer;
-    margin-left: 20px;
     display: flex;
     align-items: flex-start;
     gap:0.5rem;
@@ -45,11 +44,11 @@ const variantClass = computed(() => `form-checkbox--${props.variant}`);
         width: 1rem;
         height: 1rem;
         border: 0.125rem solid $red;
-        border-radius: 0.25rem; 
+        border-radius: 0.25rem;
         position: relative;
         transition: all 0.3s ease;
         vertical-align: top;
-        margin-top: 2.2rem; 
+        margin-top: 0.4rem;
 
         @include sm {
             width: 0.9rem;
@@ -87,7 +86,7 @@ const variantClass = computed(() => `form-checkbox--${props.variant}`);
         border-width: 0 0.125rem 0.125rem 0;
         transform: translate(-50%, -50%) rotate(45deg);
 
-        
+
         @include sm {
             width: 0.23rem;
             height: 0.45rem;
@@ -114,8 +113,8 @@ const variantClass = computed(() => `form-checkbox--${props.variant}`);
         margin-top: 2rem;
         font-weight: bold;
         color: #9e2323;
-        line-height: 1.5; 
-        font-family: 'Inter', sans-serif; 
+        line-height: 1.5;
+        font-family: 'Inter', sans-serif;
 
         @include sm {
             font-size: 0.7 rem;

src/components/Global/BaseSelectInput.vue

@@ -1,15 +1,8 @@
 <template>
+  <label v-if="label" class="dropdown-label">{{ label }}</label>
   <div class="dropdown-container">
-    <select v-model="selectedValue" class="dropdown" :style="dropdownStyle">
-      <option value="" disabled class="placeholder">{{ placeholder }}</option>
-      <option
-        v-for="option in options"
-        :key="option.value"
-        :value="option.value"
-        class="dropdown-option"
-      >
-        {{ option.label }}
-      </option>
+    <select v-model="selectedValue" class="dropdown" :style="dropdownStyle" @change="handleChange">
+      <slot></slot>
     </select>
     <v-icon name="bi-caret-down-fill" class="dropdown-icon" />
   </div>
@@ -18,14 +11,21 @@
 <script setup lang="ts">
 import { ref, defineProps, computed } from 'vue'
 
+const emit = defineEmits(['update:modelValue'])
+
 const props = defineProps<{
-  options: { value: string; label: string }[]
   placeholder?: string
   width?: string | null
+  label?: string
 }>()
 
 const selectedValue = ref('')
 
+function handleChange(event: Event) {
+  const value = (event.target as HTMLSelectElement).value
+  emit('update:modelValue', value)
+}
+
 const dropdownStyle = computed(() => ({
   ...(props.width ? { width: props.width } : {}),
 }))
@@ -35,12 +35,19 @@ const dropdownStyle = computed(() => ({
 .dropdown-container {
   position: relative;
   display: inline-block;
+  width: 100%;
+}
+
+.dropdown-label {
+  font-size: small;
+  font-weight: bold;
+  color: #6f6f6f;
+  display: block;
+  text-align: left;
+  margin-bottom: 0.3rem;
 }
 
 .dropdown {
-  display: flex;
-  background-color: transparent;
-  text-overflow: ellipsis;
   font-family: 'Inter', serif;
   font-weight: bold;
   appearance: none;
@@ -52,21 +59,9 @@ const dropdownStyle = computed(() => ({
   cursor: pointer;
   color: $red;
   width: 100%;
-
-  @include sm {
-    width: 10rem;
-    font-size: 1em;
-  }
-
-  @include md {
-    width: 15rem;
-    font-size: 1em;
-  }
-
-  @include lg {
-    width: 20rem;
-    font-size: 1.3em;
-  }
+  height: 2.4rem;
+  position: relative;
+  background-color: transparent;
 
   &:not([value='']) {
     color: $red;

src/components/Global/BaseTextInput.vue

@@ -61,7 +61,6 @@ export default {
 }
 </script>
 
-
 <style lang="scss" scoped>
 .input-container {
   position: relative;
@@ -141,6 +140,14 @@ export default {
     color: $green;
   }
 }
+input:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0px 1000px white inset !important;
+  -webkit-text-fill-color: $red !important;
+}
+
+input:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0px 1000px white inset !important;
+}
 
 .input-box:focus + .input-label,
 .input-box:not(:placeholder-shown) + .input-label {

src/components/ReportHistory/DeleteModal.vue

@@ -0,0 +1,78 @@
+<template>
+  <div v-if="isOpen" class="modal-overlay">
+    <div class="modal">
+      <h2>Are you sure?</h2>
+      <p>This process cannot be undone.</p>
+      <div class="button-group">
+        <BaseFormButton variant="gray" width="8rem" @click="closeModal">Cancel</BaseFormButton>
+        <BaseFormButton variant="green" width="8rem" @click="confirmDelete">Confirm</BaseFormButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import BaseFormButton from '@/components/Global/BaseFormButton.vue';
+
+export default {
+  name: 'DeleteModal',
+  components: {
+    BaseFormButton,
+  },
+  props: {
+    isOpen: Boolean,
+  },
+  methods: {
+    closeModal() {
+      this.$emit('close');
+    },
+    confirmDelete() {
+      this.$emit('confirm-delete');
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(1, 68, 33, 0.3);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.modal {
+  background: white;
+  padding: 30px 30px;
+  border-radius: 20px;
+  text-align: start;
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+  width: 450px;
+  height: 260px;
+}
+.button-group {
+  margin-top: 80px;
+  display: flex;
+  gap: 10px;
+  justify-content: flex-end;
+  color: $black;
+}
+
+h2 {
+  font-family: Poppins, sans-serif;
+  font-size: 32px;
+  font-weight: 800;
+  color: #014421;
+}
+
+p {
+  font-family: Poppins, sans-serif;
+  font-size: 17.5px;
+  font-weight: 400;
+  color: $black;
+}
+</style>