Package and individual mail sender, new report, and other changes

Co-authored-by: Copilot <copilot@github.com>

resources/js/Pages/Cases/Partials/ActivityTable.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { ref, computed, useSlots, watch, onMounted } from "vue";
 import { router } from "@inertiajs/vue3";
+import axios from "axios";
 import DataTable from "@/Components/DataTable/DataTableNew2.vue";
 import DeleteDialog from "@/Components/Dialogs/DeleteDialog.vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
@@ -20,7 +21,13 @@ import {
 } from "@/Components/ui/command";
 import { Popover, PopoverContent, PopoverTrigger } from "@/Components/ui/popover";
 import { RangeCalendar } from "@/Components/ui/range-calendar";
-import { CalendarIcon, X, Filter, Check, ChevronsUpDown } from "lucide-vue-next";
+import { CalendarIcon, X, Filter, Check, ChevronsUpDown, MailIcon } from "lucide-vue-next";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/Components/ui/dialog";
 import { cn } from "@/lib/utils";
 import { DateFormatter, getLocalTimeZone, parseDate } from "@internationalized/date";
 
@@ -242,6 +249,7 @@ const columns = [
   { key: "note", label: "Opomba", sortable: false },
   { key: "promise", label: "Obljuba", sortable: false },
   { key: "user", label: "Dodal", sortable: false },
+  { key: "email_action", label: "Akcija", sortable: false, align: "center" },
   { key: "actions", label: "", sortable: false, hideable: false, align: "center" },
 ];
 
@@ -301,6 +309,27 @@ const deleteActivity = (row) => {
 const confirmDelete = ref(false);
 const toDeleteRow = ref(null);
 
+// Email body dialog
+const emailBodyDialogOpen = ref(false);
+const emailBodyHtml = ref("");
+const emailBodyLoading = ref(false);
+const emailBodyError = ref(null);
+
+const openEmailBody = async (emailLogId) => {
+  emailBodyHtml.value = "";
+  emailBodyError.value = null;
+  emailBodyLoading.value = true;
+  emailBodyDialogOpen.value = true;
+  try {
+    const res = await axios.get(route("admin.email-logs.body", emailLogId));
+    emailBodyHtml.value = res.data.html ?? "";
+  } catch (err) {
+    emailBodyError.value = "Napaka pri nalaganju vsebine e-pošte.";
+  } finally {
+    emailBodyLoading.value = false;
+  }
+};
+
 const openDelete = (row) => {
   toDeleteRow.value = row;
   confirmDelete.value = true;
@@ -771,6 +800,21 @@ const copyToClipboard = async (text) => {
         </div>
       </template>
 
+      <template #cell-email_action="{ row }">
+        <div class="flex justify-center">
+          <Button
+            v-if="row.email_logs?.length"
+            variant="ghost"
+            size="icon"
+            class="h-7 w-7 text-blue-600 hover:text-blue-800"
+            :title="'Prikaži poslano e-pošto'"
+            @click="openEmailBody(row.email_logs[0].id)"
+          >
+            <MailIcon class="h-4 w-4" />
+          </Button>
+        </div>
+      </template>
+
       <template #cell-actions="{ row }" v-if="edit">
         <TableActions align="right">
           <template #default>
@@ -794,4 +838,27 @@ const copyToClipboard = async (text) => {
     @close="cancelDelete"
     @confirm="confirmDeleteAction"
   />
+
+  <Dialog v-model:open="emailBodyDialogOpen">
+    <DialogContent class="max-w-4xl w-full p-0 overflow-hidden">
+      <DialogHeader class="px-6 pt-6 pb-0">
+        <DialogTitle>Vsebina poslane e-pošte</DialogTitle>
+      </DialogHeader>
+      <div class="px-6 pb-6 pt-4">
+        <div v-if="emailBodyLoading" class="flex items-center justify-center h-64 text-muted-foreground">
+          Nalaganje…
+        </div>
+        <div v-else-if="emailBodyError" class="text-destructive py-8 text-center">
+          {{ emailBodyError }}
+        </div>
+        <iframe
+          v-else
+          :srcdoc="emailBodyHtml"
+          sandbox="allow-same-origin"
+          class="w-full border rounded"
+          style="height: 600px;"
+        />
+      </div>
+    </DialogContent>
+  </Dialog>
 </template>