Initial commit

resources/js/pages/apps/components/UploadModal.vue

@@ -0,0 +1,78 @@
+<script setup>
+const props = defineProps({
+  modelValue: Boolean,
+  files: Array,
+  fileError: String,
+  activeModelColor: String,
+});
+const emit = defineEmits(["update:modelValue", "triggerInput", "remove", "done"]);
+</script>
+
+<template>
+  <VDialog :model-value="modelValue" max-width="500" @update:modelValue="emit('update:modelValue', $event)">
+    <VCard>
+      <VCardTitle class="pb-2 pt-4">
+        <span class="text-h5">Upload Files</span>
+      </VCardTitle>
+
+      <VCardText>
+        <div class="text-subtitle-2 mb-4">
+          Select files to upload (Max 5 files, 5MB each)
+        </div>
+
+        <div
+          class="upload-area pa-6 border-dashed rounded d-flex flex-column align-center justify-center"
+          @click="emit('triggerInput')"
+          @dragover.prevent
+          @drop.prevent="$event => emit('triggerInput', $event)"
+        >
+          <VIcon :icon="'tabler-upload'" :size="36" :color="activeModelColor" class="mb-3" />
+          <div class="text-body-1 mb-1">Drag files here or click to upload</div>
+          <div class="text-caption text-grey">Supported formats: Images, PDF, DOC, DOCX, TXT</div>
+        </div>
+
+        <div v-if="fileError" class="text-error mt-2">{{ fileError }}</div>
+
+        <div v-if="files.length > 0">
+          <div class="text-subtitle-2 mt-4 mb-2">Selected files:</div>
+          <VList density="compact" class="bg-grey-lighten-5 rounded">
+            <VListItem v-for="(file, index) in files" :key="index">
+              <template v-slot:prepend>
+                <VIcon :icon="file.type.startsWith('image/') ? 'tabler-photo' : file.type.includes('pdf') ? 'tabler-file-type-pdf' : file.type.includes('word') ? 'tabler-file-type-doc' : file.type.includes('text') ? 'tabler-file-text' : 'tabler-file'" />
+              </template>
+              <VListItemTitle>{{ file.name }}</VListItemTitle>
+              <VListItemSubtitle>{{ (file.size / (1024 * 1024)).toFixed(1) }} MB</VListItemSubtitle>
+              <template v-slot:append>
+                <VBtn icon size="small" variant="text" @click="emit('remove', index)">
+                  <VIcon icon="tabler-x" />
+                </VBtn>
+              </template>
+            </VListItem>
+          </VList>
+        </div>
+      </VCardText>
+
+      <VCardActions class="pb-4 px-4">
+        <VSpacer></VSpacer>
+        <VBtn color="grey-darken-1" variant="text" @click="emit('update:modelValue', false)">Cancel</VBtn>
+        <VBtn :color="activeModelColor" variant="tonal" @click="emit('done')" :disabled="files.length === 0">Done</VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>
+
+<style scoped>
+.border-dashed {
+  border: 2px dashed rgba(var(--v-theme-on-surface), 0.2);
+}
+
+.upload-area {
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.upload-area:hover {
+  background-color: rgba(var(--v-theme-on-surface), 0.05);
+  border-color: rgba(var(--v-theme-on-surface), 0.4);
+}
+</style>