New report system and views

resources/js/Pages/Imports/Index.vue

@@ -2,7 +2,16 @@
 import AppLayout from "@/Layouts/AppLayout.vue";
 import { Link, router } from "@inertiajs/vue3";
 import { ref, computed } from "vue";
-import ConfirmationModal from "@/Components/ConfirmationModal.vue";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/Components/ui/alert-dialog";
 import DataTable from "@/Components/DataTable/DataTableNew2.vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import {
@@ -225,41 +234,45 @@ function formatDateTimeNoSeconds(value) {
               </TableActions>
             </template>
           </DataTable>
-          <ConfirmationModal
-            :show="confirming"
-            @close="
+        </AppCard>
+      </div>
+    </div>
+
+    <!-- Delete Confirmation Dialog -->
+    <AlertDialog
+      :open="confirming"
+      @update:open="
+        (val) => {
+          if (!val) {
+            confirming = false;
+            deletingId = null;
+          }
+        }
+      "
+    >
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Potrditev brisanja</AlertDialogTitle>
+          <AlertDialogDescription>
+            Ste prepričani, da želite izbrisati ta uvoz? Datoteka bo odstranjena iz
+            shrambe, če je še prisotna.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <p v-if="errorMsg" class="text-sm text-red-600">{{ errorMsg }}</p>
+        <AlertDialogFooter>
+          <AlertDialogCancel
+            @click="
               confirming = false;
               deletingId = null;
             "
           >
-            <template #title>Potrditev brisanja</template>
-            <template #content>
-              <p class="text-sm">
-                Ste prepričani, da želite izbrisati ta uvoz? Datoteka bo odstranjena iz
-                shrambe, če je še prisotna.
-              </p>
-              <p v-if="errorMsg" class="text-sm text-red-600 mt-2">{{ errorMsg }}</p>
-            </template>
-            <template #footer>
-              <button
-                class="px-3 py-1.5 text-sm border rounded me-2"
-                @click="
-                  confirming = false;
-                  deletingId = null;
-                "
-              >
-                Prekliči
-              </button>
-              <button
-                class="px-3 py-1.5 text-sm rounded bg-red-600 text-white"
-                @click="performDelete"
-              >
-                Izbriši
-              </button>
-            </template>
-          </ConfirmationModal>
-        </AppCard>
-      </div>
-    </div>
+            Prekliči
+          </AlertDialogCancel>
+          <Button @click="performDelete" class="bg-destructive hover:bg-destructive/90">
+            Izbriši
+          </Button>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
   </AppLayout>
 </template>