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

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

resources/js/Pages/Admin/EmailTemplates/Edit.vue

@@ -64,6 +64,7 @@ import "quill/dist/quill.snow.css";
 
 const props = defineProps({
   template: { type: Object, default: null },
+  actions: { type: Array, default: () => [] },
 });
 
 const form = useForm({
@@ -75,6 +76,9 @@ const form = useForm({
   entity_types: props.template?.entity_types ?? ["client", "contract"],
   allow_attachments: props.template?.allow_attachments ?? false,
   active: props.template?.active ?? true,
+  client: props.template?.client ?? false,
+  action_id: props.template?.action_id ?? null,
+  decision_id: props.template?.decision_id ?? null,
 });
 
 const preview = ref({ subject: "", html: "", text: "" });
@@ -732,7 +736,8 @@ const placeholderGroups = computed(() => {
       "contract.id",
       "contract.uuid",
       "contract.reference",
-      "contract.amount",
+      "contract.account.balance_amount",
+      "contract.account.initial_amount",
       "contract.meta.some_key",
     ]);
   }
@@ -747,6 +752,13 @@ const placeholderGroups = computed(() => {
   ]);
   // Extra is always useful for ad-hoc data
   add("extra", "Extra", ["extra.some_key"]);
+  // Profile signature tokens (resolved from the active mail profile at send time)
+  add("profile", "Profil / Podpis", [
+    "profile.signature.ime",
+    "profile.signature.naziv",
+    "profile.signature.telefon",
+    "profile.signature.email",
+  ]);
   return groups;
 });
 
@@ -1028,6 +1040,49 @@ watch(
               />
               <Label for="active" class="font-normal cursor-pointer">Aktivno</Label>
             </div>
+            <div class="flex items-center gap-2">
+              <Switch
+                id="client"
+                :default-value="form.client"
+                @update:model-value="(val) => (form.client = val)"
+              />
+              <Label for="client" class="font-normal cursor-pointer">Samo za stranke</Label>
+            </div>
+          </div>
+
+          <!-- Activity after send: action + decision -->
+          <div>
+            <Label class="mb-2 block">Aktivnost po pošiljanju</Label>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div class="space-y-2">
+                <Label for="action_id">Akcija</Label>
+                <Select v-model="form.action_id" @update:model-value="(val) => { form.action_id = val; form.decision_id = null; }">
+                  <SelectTrigger id="action_id">
+                    <SelectValue placeholder="Brez" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem :value="null">Brez</SelectItem>
+                    <SelectItem v-for="a in props.actions" :key="a.id" :value="a.id">{{ a.name }}</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div class="space-y-2">
+                <Label for="decision_id">Odločitev</Label>
+                <Select v-model="form.decision_id" :disabled="!form.action_id">
+                  <SelectTrigger id="decision_id">
+                    <SelectValue placeholder="Brez" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem :value="null">Brez</SelectItem>
+                    <SelectItem
+                      v-for="d in props.actions?.find((x) => x.id === form.action_id)?.decisions || []"
+                      :key="d.id"
+                      :value="d.id"
+                    >{{ d.name }}</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
           </div>
 
           <Separator />
@@ -1223,6 +1278,25 @@ watch(
                   </Button>
                 </div>
               </div>
+
+              <!-- Special tokens -->
+              <div class="space-y-2">
+                <div class="text-sm font-medium text-muted-foreground">Posebni žetoni</div>
+                <p class="text-xs text-muted-foreground">
+                  <code class="font-mono">&#123;&#123; body_text &#125;&#125;</code> — pri pošiljanju ga nadomesti besedilo, ki ga vnese pošiljatelj.
+                </p>
+                <div class="flex flex-wrap gap-2">
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    @click="insertPlaceholder('body_text')"
+                    class="font-mono text-xs"
+                  >
+                    <PlusCircleIcon class="h-3 w-3 mr-1" />
+                    body_text
+                  </Button>
+                </div>
+              </div>
             </div>
           </div>
         </CardContent>

resources/js/Pages/Admin/MailProfiles/Index.vue

@@ -9,6 +9,7 @@ import {
   PencilIcon,
   SendIcon,
   MoreVerticalIcon,
+  Trash2Icon,
 } from "lucide-vue-next";
 import {
   Card,
@@ -62,6 +63,32 @@ const createOpen = ref(false); // create modal
 const editOpen = ref(false); // edit modal
 const editTarget = ref(null); // profile being edited
 
+// Signature items — array of {key, value} pairs edited in the dialog
+const signatureItems = ref([{ key: "", value: "" }]);
+
+function addSignatureItem() {
+  signatureItems.value.push({ key: "", value: "" });
+}
+function removeSignatureItem(index) {
+  signatureItems.value.splice(index, 1);
+  if (signatureItems.value.length === 0)
+    signatureItems.value.push({ key: "", value: "" });
+}
+function signatureToObject() {
+  const obj = {};
+  signatureItems.value.forEach(({ key, value }) => {
+    const k = (key || "").trim();
+    if (k) obj[k] = value ?? "";
+  });
+  return Object.keys(obj).length ? obj : null;
+}
+function signatureFromObject(sig) {
+  const entries = Object.entries(sig || {});
+  return entries.length
+    ? entries.map(([key, value]) => ({ key, value }))
+    : [{ key: "", value: "" }];
+}
+
 const form = useForm({
   name: "",
   host: "",
@@ -76,6 +103,7 @@ const form = useForm({
 
 function openCreate() {
   form.reset();
+  signatureItems.value = [{ key: "", value: "" }];
   createOpen.value = true;
   editTarget.value = null;
 }
@@ -93,6 +121,7 @@ function openEdit(p) {
   form.from_name = p.from_name || "";
   form.priority = p.priority ?? 10;
   editTarget.value = p;
+  signatureItems.value = signatureFromObject(p.signature);
   editOpen.value = true;
 }
 
@@ -102,12 +131,14 @@ function closeCreate() {
 }
 
 function submitCreate() {
-  form.post(route("admin.mail-profiles.store"), {
-    preserveScroll: true,
-    onSuccess: () => {
-      createOpen.value = false;
-    },
-  });
+  form
+    .transform((data) => ({ ...data, signature: signatureToObject() }))
+    .post(route("admin.mail-profiles.store"), {
+      preserveScroll: true,
+      onSuccess: () => {
+        createOpen.value = false;
+      },
+    });
 }
 
 function closeEdit() {
@@ -128,6 +159,7 @@ function submitEdit() {
     from_address: form.from_address,
     from_name: form.from_name || null,
     priority: form.priority,
+    signature: signatureToObject(),
   };
   if (form.password && form.password.trim() !== "") {
     payload.password = form.password.trim();
@@ -351,6 +383,43 @@ const statusClass = (p) => {
               <Input id="create-priority" v-model.number="form.priority" type="number" />
             </div>
           </div>
+
+          <div class="space-y-2">
+            <div class="flex items-center justify-between">
+              <Label>Podpis (signature)</Label>
+              <Button type="button" size="sm" variant="outline" @click="addSignatureItem">
+                <PlusIcon class="h-3 w-3 mr-1" />
+                Dodaj vrstico
+              </Button>
+            </div>
+            <p class="text-xs text-muted-foreground">
+              Vrednosti so dostopne v predlogah kot
+              <code class="font-mono" v-pre>{{ profile.signature.ključ }}</code
+              >.
+            </p>
+            <div class="space-y-2">
+              <div
+                v-for="(item, i) in signatureItems"
+                :key="i"
+                class="flex gap-2 items-start"
+              >
+                <Input
+                  v-model="item.key"
+                  placeholder="Ključ (npr. ime)"
+                  class="w-36 shrink-0 font-mono text-xs"
+                />
+                <Input v-model="item.value" placeholder="Vrednost" class="flex-1" />
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  @click="removeSignatureItem(i)"
+                >
+                  <Trash2Icon class="h-4 w-4 text-destructive" />
+                </Button>
+              </div>
+            </div>
+          </div>
         </form>
         <DialogFooter>
           <Button variant="outline" @click="closeCreate" :disabled="form.processing"
@@ -419,6 +488,43 @@ const statusClass = (p) => {
               <Input id="edit-priority" v-model.number="form.priority" type="number" />
             </div>
           </div>
+
+          <div class="space-y-2">
+            <div class="flex items-center justify-between">
+              <Label>Podpis (signature)</Label>
+              <Button type="button" size="sm" variant="outline" @click="addSignatureItem">
+                <PlusIcon class="h-3 w-3 mr-1" />
+                Dodaj vrstico
+              </Button>
+            </div>
+            <p class="text-xs text-muted-foreground">
+              Vrednosti so dostopne v predlogah kot
+              <code class="font-mono" v-pre>{{ profile.signature.ključ }}</code
+              >.
+            </p>
+            <div class="space-y-2">
+              <div
+                v-for="(item, i) in signatureItems"
+                :key="i"
+                class="flex gap-2 items-start"
+              >
+                <Input
+                  v-model="item.key"
+                  placeholder="Ključ (npr. ime)"
+                  class="w-36 shrink-0 font-mono text-xs"
+                />
+                <Input v-model="item.value" placeholder="Vrednost" class="flex-1" />
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  @click="removeSignatureItem(i)"
+                >
+                  <Trash2Icon class="h-4 w-4 text-destructive" />
+                </Button>
+              </div>
+            </div>
+          </div>
           <p class="text-sm text-muted-foreground">
             Pusti geslo prazno, če želiš obdržati obstoječe.
           </p>

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>

resources/js/Pages/Cases/Show.vue

@@ -324,6 +324,7 @@ const submitAttachSegment = () => {
               :person="client_case.person"
               :person-edit="hasPerm('person-edit')"
               :enable-sms="true"
+              :enable-email="true"
               :client-case-uuid="client_case.uuid"
             />
           </div>

resources/js/Pages/Packages/Create.vue

@@ -38,6 +38,8 @@ import {
   CheckCircle2Icon,
   XCircleIcon,
   BadgeCheckIcon,
+  CircleCheckIcon,
+  BadgeXIcon,
 } from "lucide-vue-next";
 import { fmtDateDMY } from "@/Utilities/functions";
 import { upperFirst } from "lodash";
@@ -519,10 +521,7 @@ const numbersCount = computed(() => {
               </div>
             </div>
             <div class="flex justify-end gap-2">
-              <Button
-                @click="router.visit(route('packages.index'))"
-                variant="outline"
-              >
+              <Button @click="router.visit(route('packages.index'))" variant="outline">
                 Prekliči
               </Button>
               <Button
@@ -702,10 +701,7 @@ const numbersCount = computed(() => {
                   <CheckCircle2Icon class="h-3 w-3" />
                   Izbrano: {{ selectedContractIds.size }}
                 </Badge>
-                <Button
-                  @click="router.visit(route('packages.index'))"
-                  variant="outline"
-                >
+                <Button @click="router.visit(route('packages.index'))" variant="outline">
                   Prekliči
                 </Button>
                 <Button
@@ -769,26 +765,26 @@ const numbersCount = computed(() => {
               </template>
 
               <template #cell-selected_phone="{ row }">
-                <div v-if="row.selected_phone" class="space-y-1">
-                  <div class="flex flex-col items-center gap-1">
-                    <span>{{ row.selected_phone.number }}</span>
-                    <span
-                      ><Badge
-                        v-if="row.selected_phone.validated"
-                        variant="secondary"
-                        class="text-xs"
-                      >
-                        <BadgeCheckIcon />
-                        Potrjena
-                      </Badge>
-                      <Badge
-                        v-else
-                        variant="destructive"
-                        class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums text-accent"
-                      >
-                        Nepotrjena
-                      </Badge></span
-                    >
+                <div v-if="row.selected_phone" class="space-y-1 flex flex-col gap-1">
+                  <div class="flex flex-row gap-1 items-center">
+                    <span>
+                      {{ row.selected_phone.number }}
+                    </span>
+                    <BadgeCheckIcon
+                      size="18"
+                      color="green"
+                      v-if="row.selected_phone.validated"
+                    />
+                    <BadgeXIcon
+                      size="18"
+                      color="red"
+                      v-if="!row.selected_phone.validated"
+                    />
+                  </div>
+                  <div v-if="row.selected_phone.description">
+                    <Badge variant="secondary" class="break-all">
+                      {{ row.selected_phone.description }}
+                    </Badge>
                   </div>
                 </div>
                 <span v-else class="text-xs text-destructive">Ni telefonske št.</span>

resources/js/Pages/Packages/Index.vue

@@ -1,176 +1,45 @@
 <script setup>
 import AppLayout from "@/Layouts/AppLayout.vue";
-import { Link, router } from "@inertiajs/vue3";
-import { ref } from "vue";
-import { Card, CardHeader, CardTitle } from "@/Components/ui/card";
-import { Button } from "@/Components/ui/button";
-import { Badge } from "@/Components/ui/badge";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/Components/ui/alert-dialog";
-import DataTableNew2 from "@/Components/DataTable/DataTableNew2.vue";
-import { PackageIcon, PlusIcon, Trash2Icon, EyeIcon } from "lucide-vue-next";
-import AppCard from "@/Components/app/ui/card/AppCard.vue";
-import { fmtDateTime } from "@/Utilities/functions";
-
-const props = defineProps({
-  packages: { type: Object, required: true },
-});
-
-const deletingId = ref(null);
-const packageToDelete = ref(null);
-const showDeleteDialog = ref(false);
-
-const columns = [
-  { accessorKey: "id", header: "ID" },
-  { accessorKey: "name", header: "Ime" },
-  { accessorKey: "type", header: "Tip" },
-  { accessorKey: "status", header: "Status" },
-  { accessorKey: "total_items", header: "Skupaj" },
-  { accessorKey: "sent_count", header: "Poslano" },
-  { accessorKey: "failed_count", header: "Neuspešno" },
-  { accessorKey: "finished_at", header: "Zaključeno" },
-  { accessorKey: "actions", header: "", enableSorting: false },
-];
-
-function getStatusVariant(status) {
-  if (["queued", "running"].includes(status)) return "secondary";
-  if (status === "completed") return "default";
-  if (status === "failed") return "destructive";
-  return "outline";
-}
-
-function goShow(id) {
-  router.visit(route("packages.show", id));
-}
-
-function openDeleteDialog(pkg) {
-  if (!pkg || pkg.status !== "draft") return;
-  packageToDelete.value = pkg;
-  showDeleteDialog.value = true;
-}
-
-function confirmDelete() {
-  if (!packageToDelete.value) return;
-  deletingId.value = packageToDelete.value.id;
-  router.delete(route("packages.destroy", packageToDelete.value.id), {
-    onSuccess: () => {
-      router.reload({ only: ["packages"] });
-    },
-    onFinish: () => {
-      deletingId.value = null;
-      showDeleteDialog.value = false;
-      packageToDelete.value = null;
-    },
-  });
-}
+import { Link } from "@inertiajs/vue3";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/Components/ui/card";
+import { MessageSquareIcon, MailIcon } from "lucide-vue-next";
 </script>
 
 <template>
-  <AppLayout title="SMS paketi">
-    <Card class="mb-4">
-      <CardHeader>
-        <div class="flex items-center justify-between">
-          <div class="flex items-center gap-2">
-            <PackageIcon class="h-5 w-5 text-muted-foreground" />
+  <AppLayout title="Paketi">
+    <div class="mb-6">
+      <h1 class="text-2xl font-bold tracking-tight">Paketi</h1>
+      <p class="text-sm text-muted-foreground">Izberite vrsto paketa za pošiljanje</p>
+    </div>
+
+    <div class="grid gap-4 sm:grid-cols-2 max-w-2xl">
+      <Link :href="route('packages.sms.index')">
+        <Card class="cursor-pointer hover:border-primary transition-colors h-full">
+          <CardHeader>
+            <div class="flex items-center gap-3 mb-2">
+              <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
+                <MessageSquareIcon class="h-5 w-5 text-primary" />
+              </div>
+            </div>
             <CardTitle>SMS paketi</CardTitle>
-          </div>
-          <Link :href="route('packages.create')">
-            <Button>
-              <PlusIcon class="h-4 w-4" />
-              Nov paket
-            </Button>
-          </Link>
-        </div>
-      </CardHeader>
-    </Card>
+            <CardDescription>Pošlji SMS sporočila v paketu prejemnikom iz pogodb ali ročno vnesenih številk</CardDescription>
+          </CardHeader>
+        </Card>
+      </Link>
 
-    <AppCard
-      title=""
-      padding="none"
-      class="p-0! gap-0"
-      header-class="py-3! px-4 gap-0 text-muted-foreground"
-      body-class=""
-    >
-      <template #header>
-        <div class="flex items-center gap-2">
-          <PackageIcon size="18" />
-          <CardTitle class="uppercase">Paketi</CardTitle>
-        </div>
-      </template>
-      <DataTableNew2
-        :columns="columns"
-        :data="packages.data"
-        :meta="packages"
-        route-name="packages.index"
-      >
-        <template #cell-name="{ row }">
-          <span class="text-sm">{{ row.name ?? "—" }}</span>
-        </template>
-
-        <template #cell-type="{ row }">
-          <Badge variant="outline" class="uppercase">{{ row.type }}</Badge>
-        </template>
-
-        <template #cell-status="{ row }">
-          <Badge :variant="getStatusVariant(row.status)">{{ row.status }}</Badge>
-        </template>
-
-        <template #cell-finished_at="{ row }">
-          <span class="text-xs text-muted-foreground">{{
-            fmtDateTime(row.finished_at) ?? "—"
-          }}</span>
-        </template>
-
-        <template #cell-actions="{ row }">
-          <div class="flex justify-end gap-2">
-            <Button @click="goShow(row.id)" variant="ghost" size="sm">
-              <EyeIcon class="h-4 w-4" />
-            </Button>
-            <Button
-              v-if="row.status === 'draft'"
-              @click="openDeleteDialog(row)"
-              :disabled="deletingId === row.id"
-              variant="ghost"
-              size="sm"
-            >
-              <Trash2Icon class="h-4 w-4" />
-            </Button>
-          </div>
-        </template>
-      </DataTableNew2>
-    </AppCard>
-
-    <!-- Delete Confirmation Dialog -->
-    <AlertDialog v-model:open="showDeleteDialog">
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>Izbriši paket?</AlertDialogTitle>
-          <AlertDialogDescription>
-            Ali ste prepričani, da želite izbrisati paket
-            <strong v-if="packageToDelete"
-              >#{{ packageToDelete.id }} -
-              {{ packageToDelete.name || "Brez imena" }}</strong
-            >? Tega dejanja ni mogoče razveljaviti.
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel>Prekliči</AlertDialogCancel>
-          <AlertDialogAction
-            @click="confirmDelete"
-            class="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-          >
-            Izbriši
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
+      <Link :href="route('packages.email.index')">
+        <Card class="cursor-pointer hover:border-primary transition-colors h-full">
+          <CardHeader>
+            <div class="flex items-center gap-3 mb-2">
+              <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
+                <MailIcon class="h-5 w-5 text-primary" />
+              </div>
+            </div>
+            <CardTitle>E-mail paketi</CardTitle>
+            <CardDescription>Pošlji e-mail sporočila v paketu prejemnikom iz pogodb z e-mail predlogami</CardDescription>
+          </CardHeader>
+        </Card>
+      </Link>
+    </div>
   </AppLayout>
 </template>

resources/js/Pages/Packages/Mail/Create.vue

@@ -0,0 +1,592 @@
+<script setup>
+import AppLayout from "@/Layouts/AppLayout.vue";
+import { Link, router, useForm } from "@inertiajs/vue3";
+import { ref, computed, nextTick } from "vue";
+import axios from "axios";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/Components/ui/card";
+import { Button } from "@/Components/ui/button";
+import { Input } from "@/Components/ui/input";
+import { Textarea } from "@/Components/ui/textarea";
+import { Label } from "@/Components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/Components/ui/select";
+import { Checkbox } from "@/Components/ui/checkbox";
+import { Badge } from "@/Components/ui/badge";
+import { Separator } from "@/Components/ui/separator";
+import DataTableNew2 from "@/Components/DataTable/DataTableNew2.vue";
+import {
+  MailIcon,
+  UsersIcon,
+  SearchIcon,
+  SaveIcon,
+  ArrowLeftIcon,
+  FilterIcon,
+  CalendarIcon,
+  CheckCircle2Icon,
+  XCircleIcon,
+  BadgeCheckIcon,
+} from "lucide-vue-next";
+import { fmtDateDMY } from "@/Utilities/functions";
+import { upperFirst } from "lodash";
+import AppCombobox from "@/Components/app/ui/AppCombobox.vue";
+import AppRangeDatePicker from "@/Components/app/ui/AppRangeDatePicker.vue";
+
+const props = defineProps({
+  emailTemplates: { type: Array, default: () => [] },
+  mailProfiles: { type: Array, default: () => [] },
+  segments: { type: Array, default: () => [] },
+  clients: { type: Array, default: () => [] },
+});
+
+const creatingFromContracts = ref(false);
+const hasBodyText = ref(false);
+
+const form = useForm({
+  name: "",
+  description: "",
+  mail_profile_id: null,
+  template_id: null,
+  subject: "",
+  body_text: "",
+});
+
+function onTemplateChange(newTemplateId) {
+  const template = props.emailTemplates.find((t) => t.id === newTemplateId);
+  if (template?.subject_template && !form.subject) {
+    form.subject = template.subject_template;
+  }
+  hasBodyText.value = !!template?.has_body_text;
+  if (template?.has_body_text && template?.text_template) {
+    form.body_text = template.text_template;
+  } else {
+    form.body_text = "";
+  }
+}
+
+// Contracts mode state & actions
+const contracts = ref({
+  data: [],
+  meta: { current_page: 1, last_page: 1, per_page: 25, total: 0 },
+});
+const segmentId = ref(null);
+const search = ref("");
+const clientId = ref(null);
+const startDateRange = ref({ start: null, end: null });
+const promiseDateRange = ref({ start: null, end: null });
+const onlyVerified = ref(false);
+const onlyWithEmail = ref(false);
+const loadingContracts = ref(false);
+
+const clientItems = computed(() =>
+  props.clients.map((c) => ({
+    value: c.id,
+    label: c.name,
+  }))
+);
+const selectedContractIds = ref(new Set());
+const perPage = ref(25);
+
+const contractColumns = [
+  { accessorKey: "reference", header: "Pogodba" },
+  {
+    id: "person",
+    accessorFn: (row) => row.person?.full_name || "—",
+    header: "Primer",
+  },
+  {
+    id: "client",
+    accessorFn: (row) => row.client?.name || "—",
+    header: "Stranka",
+  },
+  { accessorKey: "start_date", header: "Datum začetka" },
+  { accessorKey: "promise_date", header: "Zadnja obljuba" },
+  {
+    id: "selected_email",
+    accessorFn: (row) => row.selected_email?.value || "—",
+    header: "Izbrani e-mail",
+  },
+  {
+    id: "segment",
+    accessorFn: (row) => upperFirst(row.segment?.name) || "—",
+    header: "Segment",
+  },
+  { accessorKey: "no_email_reason", header: "Opomba" },
+];
+
+function onSelectionChange(selectedKeys) {
+  const newSelection = new Set();
+  selectedKeys.forEach((key) => {
+    const index = parseInt(key);
+    if (contracts.value.data[index]) {
+      newSelection.add(contracts.value.data[index].id);
+    }
+  });
+  selectedContractIds.value = newSelection;
+}
+
+async function loadContracts(url = null) {
+  loadingContracts.value = true;
+  try {
+    const params = new URLSearchParams();
+    if (segmentId.value) params.append("segment_id", segmentId.value);
+    if (search.value) params.append("q", search.value);
+    if (clientId.value) params.append("client_id", clientId.value);
+    if (startDateRange.value?.start)
+      params.append("start_date_from", startDateRange.value.start);
+    if (startDateRange.value?.end)
+      params.append("start_date_to", startDateRange.value.end);
+    if (promiseDateRange.value?.start)
+      params.append("promise_date_from", promiseDateRange.value.start);
+    if (promiseDateRange.value?.end)
+      params.append("promise_date_to", promiseDateRange.value.end);
+    if (onlyVerified.value) params.append("only_verified", "1");
+    if (onlyWithEmail.value) params.append("only_with_email", "1");
+    params.append("per_page", perPage.value);
+
+    const target = url || `${route("packages.email.contracts")}?${params.toString()}`;
+    const { data: json } = await axios.get(target, {
+      headers: { "X-Requested-With": "XMLHttpRequest" },
+    });
+
+    await nextTick();
+
+    contracts.value = {
+      data: json.data || [],
+      meta: json.meta || { current_page: 1, last_page: 1, per_page: 25, total: 0 },
+    };
+  } finally {
+    loadingContracts.value = false;
+  }
+}
+
+const rowSelection = computed(() => {
+  const selection = {};
+  contracts.value.data.forEach((contract, index) => {
+    if (selectedContractIds.value.has(contract.id)) {
+      selection[index.toString()] = true;
+    }
+  });
+  return selection;
+});
+
+const tableKey = computed(() => {
+  return `contracts-${contracts.value.meta.current_page}-${contracts.value.data.length}`;
+});
+
+function resetFilters() {
+  segmentId.value = null;
+  clientId.value = null;
+  search.value = "";
+  startDateRange.value = { start: null, end: null };
+  promiseDateRange.value = { start: null, end: null };
+  onlyVerified.value = false;
+  onlyWithEmail.value = false;
+  contracts.value = {
+    data: [],
+    meta: { current_page: 1, last_page: 1, per_page: 25, total: 0 },
+  };
+}
+
+function submitCreateFromContracts() {
+  const ids = Array.from(selectedContractIds.value);
+  if (!ids.length) return;
+
+  const visibleById = new Map((contracts.value.data || []).map((c) => [c.id, c]));
+  const selectedVisible = ids.map((id) => visibleById.get(id)).filter(Boolean);
+  if (selectedVisible.length && selectedVisible.every((c) => !c?.selected_email)) {
+    alert("Za izbrane pogodbe ni mogoče najti prejemnikov (e-mail naslovov).");
+    return;
+  }
+
+  const payload = {
+    type: "email",
+    name: form.name || `E-mail paket (segment) ${new Date().toLocaleString()}`,
+    description: form.description || "",
+    payload: {
+      mail_profile_id: form.mail_profile_id,
+      template_id: form.template_id,
+      subject: form.subject && form.subject.trim() ? form.subject.trim() : null,
+      body_text: form.body_text && form.body_text.trim() ? form.body_text.trim() : null,
+    },
+    contract_ids: ids,
+  };
+
+  creatingFromContracts.value = true;
+  router.post(route("packages.email.store-from-contracts"), payload, {
+    onSuccess: () => {
+      router.visit(route("packages.email.index"));
+    },
+    onError: (errors) => {
+      const first = errors && Object.values(errors)[0];
+      if (first) {
+        alert(String(first));
+      }
+    },
+    onFinish: () => {
+      creatingFromContracts.value = false;
+    },
+  });
+}
+</script>
+
+<template>
+  <AppLayout title="Ustvari e-mail paket">
+    <!-- Header -->
+    <div class="mb-6">
+      <div class="flex items-center gap-3 mb-2">
+        <Link :href="route('packages.email.index')">
+          <Button variant="ghost" size="sm">
+            <ArrowLeftIcon class="h-4 w-4 mr-2" />
+            Nazaj
+          </Button>
+        </Link>
+      </div>
+      <div class="flex items-center gap-3">
+        <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
+          <MailIcon class="h-6 w-6 text-primary" />
+        </div>
+        <div>
+          <h1 class="text-2xl font-bold tracking-tight">Ustvari e-mail paket</h1>
+          <p class="text-sm text-muted-foreground">Pošlji e-mail sporočila v paketu</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Package Details Card -->
+    <Card class="mb-6">
+      <CardHeader>
+        <CardTitle>Podatki o paketu</CardTitle>
+        <CardDescription>Osnovne informacije in e-mail nastavitve</CardDescription>
+      </CardHeader>
+      <CardContent class="space-y-6">
+        <!-- Basic Info -->
+        <div class="grid gap-4 md:grid-cols-2">
+          <div class="space-y-2">
+            <Label for="name">Ime paketa</Label>
+            <Input
+              id="name"
+              v-model="form.name"
+              placeholder="Npr. E-mail kampanja december 2024"
+            />
+          </div>
+          <div class="space-y-2">
+            <Label for="description">Opis</Label>
+            <Input
+              id="description"
+              v-model="form.description"
+              placeholder="Neobvezen opis paketa"
+            />
+          </div>
+        </div>
+
+        <Separator />
+
+        <!-- Email Configuration -->
+        <div>
+          <h3 class="text-sm font-semibold mb-4">E-mail nastavitve</h3>
+          <div class="grid gap-4 md:grid-cols-2">
+            <div class="space-y-2">
+              <Label>E-mail profil</Label>
+              <Select v-model="form.mail_profile_id">
+                <SelectTrigger>
+                  <SelectValue placeholder="Izberi profil" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem :value="null">—</SelectItem>
+                  <SelectItem v-for="p in mailProfiles" :key="p.id" :value="p.id">
+                    {{ p.name }}
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div class="space-y-2">
+              <Label>Predloga</Label>
+              <Select v-model="form.template_id" @update:model-value="onTemplateChange">
+                <SelectTrigger>
+                  <SelectValue placeholder="Izberi predlogo" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem :value="null">—</SelectItem>
+                  <SelectItem v-for="t in emailTemplates" :key="t.id" :value="t.id">
+                    {{ t.name }}
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <div class="mt-4 space-y-2">
+            <Label for="subject">Zadeva (neobvezno — prepiše zadevo iz predloge)</Label>
+            <Input
+              id="subject"
+              v-model="form.subject"
+              placeholder="Npr. Vaša pogodba ..."
+            />
+          </div>
+          <div v-if="hasBodyText" class="mt-4 space-y-2">
+            <Label for="body_text">Besedilo sporočila (neobvezno — vstavi se na mesto <code>&#123;&#123;body_text&#125;&#125;</code>)</Label>
+            <Textarea
+              id="body_text"
+              v-model="form.body_text"
+              placeholder="Vnesite besedilo sporočila..."
+              class="min-h-[120px] resize-y"
+            />
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+
+    <!-- Contracts Filter Card -->
+    <Card class="mb-6">
+      <CardHeader>
+        <div class="flex items-center justify-between">
+          <div>
+            <CardTitle>Filtri za pogodbe</CardTitle>
+            <CardDescription>Najdi prejemnike glede na pogodbe in segmente</CardDescription>
+          </div>
+          <Badge variant="outline" class="text-xs">
+            <FilterIcon class="h-3 w-3 mr-1" />
+            Napredno iskanje
+          </Badge>
+        </div>
+      </CardHeader>
+      <CardContent class="space-y-6">
+        <!-- Basic filters -->
+        <div class="grid gap-4 md:grid-cols-3">
+          <div class="space-y-2">
+            <Label>Segment</Label>
+            <Select v-model="segmentId" @update:model-value="loadContracts()">
+              <SelectTrigger>
+                <SelectValue placeholder="Vsi segmenti" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem :value="null">Vsi segmenti</SelectItem>
+                <SelectItem v-for="s in segments" :key="s.id" :value="s.id">
+                  {{ s.name }}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div class="space-y-2">
+            <Label>Stranka</Label>
+            <AppCombobox
+              v-model="clientId"
+              :items="clientItems"
+              placeholder="Vse stranke"
+              search-placeholder="Išči stranko..."
+              empty-text="Stranka ni najdena."
+              button-class="w-full"
+              @update:model-value="loadContracts()"
+            />
+          </div>
+          <div class="space-y-2">
+            <Label>Iskanje po referenci</Label>
+            <Input
+              v-model="search"
+              @keyup.enter="loadContracts()"
+              placeholder="Vnesi referenco..."
+            />
+          </div>
+        </div>
+
+        <Separator />
+
+        <!-- Date filters -->
+        <div>
+          <h4 class="text-sm font-semibold mb-3 flex items-center gap-2">
+            <CalendarIcon class="h-4 w-4" />
+            Datumski filtri
+          </h4>
+          <div class="grid gap-4 md:grid-cols-2">
+            <div class="space-y-3">
+              <p class="text-sm text-muted-foreground">Datum začetka pogodbe</p>
+              <AppRangeDatePicker
+                v-model="startDateRange"
+                placeholder="Izberi obdobje"
+                button-class="w-full"
+                :number-of-months="1"
+              />
+            </div>
+            <div class="space-y-3">
+              <p class="text-sm text-muted-foreground">Datum obljube plačila</p>
+              <AppRangeDatePicker
+                v-model="promiseDateRange"
+                placeholder="Izberi obdobje"
+                button-class="w-full"
+                :number-of-months="1"
+              />
+            </div>
+          </div>
+        </div>
+
+        <Separator />
+
+        <!-- Email filters -->
+        <div>
+          <h4 class="text-sm font-semibold mb-3">E-mail filtri</h4>
+          <div class="flex flex-wrap gap-4">
+            <div class="flex items-center gap-2">
+              <Checkbox
+                :model-value="onlyWithEmail"
+                @update:model-value="(val) => { onlyWithEmail = val; }"
+                id="only-with-email"
+              />
+              <Label for="only-with-email" class="cursor-pointer text-sm">
+                Samo pogodbe z e-mail naslovom
+              </Label>
+            </div>
+            <div class="flex items-center gap-2">
+              <Checkbox
+                :model-value="onlyVerified"
+                @update:model-value="(val) => { onlyVerified = val; }"
+                id="only-verified"
+              />
+              <Label for="only-verified" class="cursor-pointer text-sm">
+                Samo potrjeni e-mail naslovi
+              </Label>
+            </div>
+          </div>
+        </div>
+
+        <!-- Action buttons -->
+        <div class="flex items-center gap-2">
+          <Button @click="loadContracts()">
+            <SearchIcon class="h-4 w-4" />
+            Išči pogodbe
+          </Button>
+          <Button @click="resetFilters" variant="outline">
+            <XCircleIcon class="h-4 w-4" />
+            Počisti filtre
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+
+    <!-- Results -->
+    <Card v-if="contracts.data.length > 0 || loadingContracts">
+      <CardHeader>
+        <div class="flex items-center justify-between">
+          <div>
+            <CardTitle>Rezultati iskanja (do 500 zapisov)</CardTitle>
+            <CardDescription v-if="contracts.meta.total > 0">
+              Najdeno {{ contracts.meta.total }}
+              {{
+                contracts.meta.total === 1
+                  ? "pogodba"
+                  : contracts.meta.total < 5
+                  ? "pogodbe"
+                  : "pogodb"
+              }}
+            </CardDescription>
+          </div>
+
+          <!-- Create Button -->
+          <div class="flex justify-end gap-2" v-if="selectedContractIds.size > 0">
+            <Badge variant="secondary" class="text-sm">
+              <CheckCircle2Icon class="h-3 w-3" />
+              Izbrano: {{ selectedContractIds.size }}
+            </Badge>
+            <Button @click="router.visit(route('packages.email.index'))" variant="outline">
+              Prekliči
+            </Button>
+            <Button
+              @click="submitCreateFromContracts"
+              :disabled="selectedContractIds.size === 0 || creatingFromContracts"
+            >
+              <SaveIcon class="h-4 w-4" />
+              Ustvari paket ({{ selectedContractIds.size }}
+              {{
+                selectedContractIds.size === 1
+                  ? "pogodba"
+                  : selectedContractIds.size < 5
+                  ? "pogodbe"
+                  : "pogodb"
+              }})
+            </Button>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent class="p-0">
+        <DataTableNew2
+          v-if="!loadingContracts"
+          :key="tableKey"
+          :columns="contractColumns"
+          :data="contracts.data"
+          :enableRowSelection="true"
+          :rowSelection="rowSelection"
+          :showPagination="true"
+          :page-size="50"
+          :page-size-options="[10, 15, 25, 50, 100]"
+          :showToolbar="false"
+          @selection:change="onSelectionChange"
+        >
+          <template #cell-reference="{ row }">
+            <div v-if="row.original" class="space-y-1">
+              <p class="font-medium">{{ row.original.reference || "—" }}</p>
+              <p class="text-xs text-muted-foreground font-mono">
+                #{{ row.original.id }}
+              </p>
+            </div>
+          </template>
+
+          <template #cell-person="{ row }">
+            <span v-if="row.original" class="text-xs">{{
+              row.original.person?.full_name || "—"
+            }}</span>
+          </template>
+
+          <template #cell-client="{ row }">
+            <span v-if="row.original" class="text-xs">{{
+              row.original.client?.name || "—"
+            }}</span>
+          </template>
+
+          <template #cell-start_date="{ row }">
+            {{ fmtDateDMY(row.start_date) || "—" }}
+          </template>
+
+          <template #cell-promise_date="{ row }">
+            {{ fmtDateDMY(row.promise_date) || "—" }}
+          </template>
+
+          <template #cell-selected_email="{ row }">
+            <div v-if="row.selected_email" class="space-y-1 flex flex-col gap-1">
+              <div class="flex flex-row gap-1 items-center">
+                <span class="text-xs">{{ row.selected_email.value }}</span>
+                <BadgeCheckIcon
+                  size="18"
+                  color="green"
+                  v-if="row.selected_email.verified"
+                />
+              </div>
+              <div v-if="row.selected_email.label">
+                <Badge variant="secondary" class="break-all text-xs">
+                  {{ row.selected_email.label }}
+                </Badge>
+              </div>
+            </div>
+            <span v-else class="text-xs text-destructive">Ni e-mail naslova.</span>
+          </template>
+
+          <template #cell-no_email_reason="{ row }">
+            <span v-if="row.original" class="text-xs text-muted-foreground">{{
+              row.original.no_email_reason || "—"
+            }}</span>
+          </template>
+        </DataTableNew2>
+
+        <div v-else class="text-center text-muted-foreground py-24">Nalaganje...</div>
+      </CardContent>
+    </Card>
+  </AppLayout>
+</template>

resources/js/Pages/Packages/Mail/Index.vue

@@ -0,0 +1,177 @@
+<script setup>
+import AppLayout from "@/Layouts/AppLayout.vue";
+import { Link, router } from "@inertiajs/vue3";
+import { ref } from "vue";
+import { Card, CardHeader, CardTitle } from "@/Components/ui/card";
+import { Button } from "@/Components/ui/button";
+import { Badge } from "@/Components/ui/badge";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/Components/ui/alert-dialog";
+import DataTableNew2 from "@/Components/DataTable/DataTableNew2.vue";
+import { MailIcon, PlusIcon, Trash2Icon, EyeIcon, ArrowLeftIcon } from "lucide-vue-next";
+import AppCard from "@/Components/app/ui/card/AppCard.vue";
+import { fmtDateTime } from "@/Utilities/functions";
+
+const props = defineProps({
+  packages: { type: Object, required: true },
+});
+
+const deletingId = ref(null);
+const packageToDelete = ref(null);
+const showDeleteDialog = ref(false);
+
+const columns = [
+  { accessorKey: "id", header: "ID" },
+  { accessorKey: "name", header: "Ime" },
+  { accessorKey: "status", header: "Status" },
+  { accessorKey: "total_items", header: "Skupaj" },
+  { accessorKey: "sent_count", header: "Poslano" },
+  { accessorKey: "failed_count", header: "Neuspešno" },
+  { accessorKey: "finished_at", header: "Zaključeno" },
+  { accessorKey: "actions", header: "", enableSorting: false },
+];
+
+function getStatusVariant(status) {
+  if (["queued", "running"].includes(status)) return "secondary";
+  if (status === "completed") return "default";
+  if (status === "failed") return "destructive";
+  return "outline";
+}
+
+function goShow(id) {
+  router.visit(route("packages.email.show", id));
+}
+
+function openDeleteDialog(pkg) {
+  if (!pkg || pkg.status !== "draft") return;
+  packageToDelete.value = pkg;
+  showDeleteDialog.value = true;
+}
+
+function confirmDelete() {
+  if (!packageToDelete.value) return;
+  deletingId.value = packageToDelete.value.id;
+  router.delete(route("packages.email.destroy", packageToDelete.value.id), {
+    onSuccess: () => {
+      router.reload({ only: ["packages"] });
+    },
+    onFinish: () => {
+      deletingId.value = null;
+      showDeleteDialog.value = false;
+      packageToDelete.value = null;
+    },
+  });
+}
+</script>
+
+<template>
+  <AppLayout title="E-mail paketi">
+    <Card class="mb-4">
+      <CardHeader>
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-2">
+            <Button variant="ghost" size="sm" as-child>
+              <Link :href="route('packages.index')">
+                <ArrowLeftIcon class="h-4 w-4 mr-2" />
+                Paketi
+              </Link>
+            </Button>
+            <MailIcon class="h-5 w-5 text-muted-foreground" />
+            <CardTitle>E-mail paketi</CardTitle>
+          </div>
+          <Link :href="route('packages.email.create')">
+            <Button>
+              <PlusIcon class="h-4 w-4" />
+              Nov paket
+            </Button>
+          </Link>
+        </div>
+      </CardHeader>
+    </Card>
+
+    <AppCard
+      title=""
+      padding="none"
+      class="p-0! gap-0"
+      header-class="py-3! px-4 gap-0 text-muted-foreground"
+      body-class=""
+    >
+      <template #header>
+        <div class="flex items-center gap-2">
+          <MailIcon size="18" />
+          <CardTitle class="uppercase">E-mail Paketi</CardTitle>
+        </div>
+      </template>
+      <DataTableNew2
+        :columns="columns"
+        :data="packages.data"
+        :meta="packages"
+        route-name="packages.email.index"
+      >
+        <template #cell-name="{ row }">
+          <span class="text-sm">{{ row.name ?? "—" }}</span>
+        </template>
+
+        <template #cell-status="{ row }">
+          <Badge :variant="getStatusVariant(row.status)">{{ row.status }}</Badge>
+        </template>
+
+        <template #cell-finished_at="{ row }">
+          <span class="text-xs text-muted-foreground">{{
+            fmtDateTime(row.finished_at) ?? "—"
+          }}</span>
+        </template>
+
+        <template #cell-actions="{ row }">
+          <div class="flex justify-end gap-2">
+            <Button @click="goShow(row.id)" variant="ghost" size="sm">
+              <EyeIcon class="h-4 w-4" />
+            </Button>
+            <Button
+              v-if="row.status === 'draft'"
+              @click="openDeleteDialog(row)"
+              :disabled="deletingId === row.id"
+              variant="ghost"
+              size="sm"
+            >
+              <Trash2Icon class="h-4 w-4" />
+            </Button>
+          </div>
+        </template>
+      </DataTableNew2>
+    </AppCard>
+
+    <!-- Delete Confirmation Dialog -->
+    <AlertDialog v-model:open="showDeleteDialog">
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Izbriši paket?</AlertDialogTitle>
+          <AlertDialogDescription>
+            Ali ste prepričani, da želite izbrisati paket
+            <strong v-if="packageToDelete"
+              >#{{ packageToDelete.id }} -
+              {{ packageToDelete.name || "Brez imena" }}</strong
+            >? Tega dejanja ni mogoče razveljaviti.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Prekliči</AlertDialogCancel>
+          <AlertDialogAction
+            @click="confirmDelete"
+            class="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+          >
+            Izbriši
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  </AppLayout>
+</template>

resources/js/Pages/Packages/Mail/Show.vue

@@ -0,0 +1,242 @@
+<script setup>
+import AppLayout from "@/Layouts/AppLayout.vue";
+import { Link, router } from "@inertiajs/vue3";
+import { onMounted, onUnmounted, ref, computed } from "vue";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from "@/Components/ui/card";
+import { Button } from "@/Components/ui/button";
+import { Badge } from "@/Components/ui/badge";
+import DataTableNew2 from "@/Components/DataTable/DataTableNew2.vue";
+import {
+  MailIcon,
+  ArrowLeftIcon,
+  PlayIcon,
+  XCircleIcon,
+  RefreshCwIcon,
+} from "lucide-vue-next";
+import AppCard from "@/Components/app/ui/card/AppCard.vue";
+
+const props = defineProps({
+  package: { type: Object, required: true },
+  items: { type: Object, required: true },
+});
+
+const columns = [
+  { accessorKey: "id", header: "ID" },
+  { accessorKey: "target", header: "Prejemnik" },
+  { accessorKey: "subject", header: "Zadeva" },
+  { accessorKey: "status", header: "Status" },
+  { accessorKey: "last_error", header: "Napaka" },
+];
+
+function getStatusVariant(status) {
+  if (["queued", "processing"].includes(status)) return "secondary";
+  if (status === "sent") return "default";
+  if (status === "failed") return "destructive";
+  return "outline";
+}
+
+const refreshing = ref(false);
+let timer = null;
+
+const isRunning = computed(() => ["queued", "running"].includes(props.package.status));
+
+const firstItem = computed(() =>
+  props.items?.data && props.items.data.length ? props.items.data[0] : null
+);
+const firstPayload = computed(() =>
+  firstItem.value ? firstItem.value.payload_json || {} : {}
+);
+const payloadSummary = computed(() => ({
+  mail_profile_id: firstPayload.value?.mail_profile_id ?? null,
+  template_id: firstPayload.value?.template_id ?? null,
+  subject: firstPayload.value?.subject ?? null,
+}));
+
+function reload() {
+  refreshing.value = true;
+  router.reload({
+    only: ["package", "items"],
+    onFinish: () => (refreshing.value = false),
+    preserveScroll: true,
+    preserveState: true,
+  });
+}
+
+function dispatchPkg() {
+  router.post(
+    route("packages.email.dispatch", props.package.id),
+    {},
+    { onSuccess: reload }
+  );
+}
+function cancelPkg() {
+  router.post(
+    route("packages.email.cancel", props.package.id),
+    {},
+    { onSuccess: reload }
+  );
+}
+
+onMounted(() => {
+  if (isRunning.value) {
+    timer = setInterval(reload, 3000);
+  }
+});
+onUnmounted(() => {
+  if (timer) clearInterval(timer);
+});
+</script>
+
+<template>
+  <AppLayout :title="`E-mail paket #${package.id}`">
+    <Card class="mb-4">
+      <CardHeader>
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-3">
+            <MailIcon class="h-5 w-5 text-muted-foreground" />
+            <div>
+              <CardTitle>E-mail paket #{{ package.id }}</CardTitle>
+              <CardDescription class="font-mono"
+                >UUID: {{ package.uuid }}</CardDescription
+              >
+            </div>
+          </div>
+          <div class="flex items-center gap-2">
+            <Button variant="ghost" size="sm" as-child>
+              <Link :href="route('packages.email.index')">
+                <ArrowLeftIcon class="h-4 w-4 mr-2" />
+                Nazaj
+              </Link>
+            </Button>
+            <Button
+              v-if="['draft', 'failed'].includes(package.status)"
+              @click="dispatchPkg"
+              size="sm"
+            >
+              <PlayIcon class="h-4 w-4 mr-2" />
+              Zaženi
+            </Button>
+            <Button v-if="isRunning" @click="cancelPkg" variant="destructive" size="sm">
+              <XCircleIcon class="h-4 w-4 mr-2" />
+              Prekliči
+            </Button>
+            <Button v-if="!isRunning" @click="reload" variant="outline" size="sm">
+              <RefreshCwIcon class="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      </CardHeader>
+    </Card>
+
+    <div class="grid sm:grid-cols-4 gap-3 mb-4">
+      <Card>
+        <CardHeader class="pb-2">
+          <CardDescription>Status</CardDescription>
+          <CardTitle class="text-xl uppercase">{{ package.status }}</CardTitle>
+        </CardHeader>
+      </Card>
+      <Card>
+        <CardHeader class="pb-2">
+          <CardDescription>Skupaj</CardDescription>
+          <CardTitle class="text-xl">{{ package.total_items }}</CardTitle>
+        </CardHeader>
+      </Card>
+      <Card>
+        <CardHeader class="pb-2">
+          <CardDescription>Poslano</CardDescription>
+          <CardTitle class="text-xl text-emerald-700">{{ package.sent_count }}</CardTitle>
+        </CardHeader>
+      </Card>
+      <Card>
+        <CardHeader class="pb-2">
+          <CardDescription>Neuspešno</CardDescription>
+          <CardTitle class="text-xl text-rose-700">{{ package.failed_count }}</CardTitle>
+        </CardHeader>
+      </Card>
+    </div>
+
+    <!-- E-mail settings summary -->
+    <Card class="mb-4">
+      <CardHeader>
+        <CardTitle class="text-base">Nastavitve pošiljanja</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <dl class="text-sm grid grid-cols-3 gap-y-2">
+          <dt class="col-span-1 text-muted-foreground">E-mail profil</dt>
+          <dd class="col-span-2">{{ payloadSummary.mail_profile_id ?? "—" }}</dd>
+          <dt class="col-span-1 text-muted-foreground">Predloga</dt>
+          <dd class="col-span-2">{{ payloadSummary.template_id ?? "—" }}</dd>
+          <dt class="col-span-1 text-muted-foreground">Zadeva</dt>
+          <dd class="col-span-2">{{ payloadSummary.subject ?? "—" }}</dd>
+        </dl>
+        <div
+          v-if="
+            package.meta && (package.meta.source || package.meta.skipped !== undefined)
+          "
+          class="mt-3 pt-3 border-t text-xs text-muted-foreground"
+        >
+          <span v-if="package.meta.source" class="mr-3"
+            >Vir: {{ package.meta.source }}</span
+          >
+          <span v-if="package.meta.skipped !== undefined"
+            >Preskočeno: {{ package.meta.skipped }}</span
+          >
+        </div>
+      </CardContent>
+    </Card>
+
+    <AppCard
+      title=""
+      padding="none"
+      class="p-0! gap-0"
+      header-class="py-3! px-4 gap-0 text-muted-foreground"
+      body-class=""
+    >
+      <template #header>
+        <div class="flex items-center gap-2">
+          <MailIcon size="18" />
+          <CardTitle class="uppercase">Uvozi</CardTitle>
+        </div>
+      </template>
+      <DataTableNew2
+        :columns="columns"
+        :data="items.data"
+        :meta="items"
+        route-name="packages.email.show"
+        :route-params="{ id: package.id }"
+      >
+        <template #cell-target="{ row }">
+          <span class="text-sm">{{
+            (row.target_json && row.target_json.email) || "—"
+          }}</span>
+        </template>
+
+        <template #cell-subject="{ row }">
+          <span class="text-xs text-muted-foreground">{{
+            (row.result_json && row.result_json.subject) ||
+            (row.payload_json && row.payload_json.subject) ||
+            "—"
+          }}</span>
+        </template>
+
+        <template #cell-status="{ row }">
+          <Badge :variant="getStatusVariant(row.status)">{{ row.status }}</Badge>
+        </template>
+
+        <template #cell-last_error="{ row }">
+          <span class="text-xs text-rose-700">{{ row.last_error ?? "—" }}</span>
+        </template>
+      </DataTableNew2>
+    </AppCard>
+
+    <div v-if="refreshing" class="mt-2 text-xs text-muted-foreground">
+      Osveževanje ...
+    </div>
+  </AppLayout>
+</template>

resources/js/Pages/Packages/Sms/Create.vue

@@ -0,0 +1,791 @@
+<script setup>
+import AppLayout from "@/Layouts/AppLayout.vue";
+import { Link, router, useForm } from "@inertiajs/vue3";
+import { ref, computed, nextTick } from "vue";
+import axios from "axios";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/Components/ui/card";
+import { Button } from "@/Components/ui/button";
+import { Input } from "@/Components/ui/input";
+import { Label } from "@/Components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/Components/ui/select";
+import { Textarea } from "@/Components/ui/textarea";
+import { Checkbox } from "@/Components/ui/checkbox";
+import { Badge } from "@/Components/ui/badge";
+import { Separator } from "@/Components/ui/separator";
+import DataTableNew2 from "@/Components/DataTable/DataTableNew2.vue";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/Components/ui/tabs";
+import {
+  PackageIcon,
+  PhoneIcon,
+  UsersIcon,
+  SearchIcon,
+  SaveIcon,
+  ArrowLeftIcon,
+  FilterIcon,
+  CalendarIcon,
+  CheckCircle2Icon,
+  XCircleIcon,
+  BadgeCheckIcon,
+  BadgeXIcon,
+} from "lucide-vue-next";
+import { fmtDateDMY } from "@/Utilities/functions";
+import { upperFirst } from "lodash";
+import AppCombobox from "@/Components/app/ui/AppCombobox.vue";
+import AppRangeDatePicker from "@/Components/app/ui/AppRangeDatePicker.vue";
+
+const props = defineProps({
+  profiles: { type: Array, default: () => [] },
+  senders: { type: Array, default: () => [] },
+  templates: { type: Array, default: () => [] },
+  segments: { type: Array, default: () => [] },
+  clients: { type: Array, default: () => [] },
+});
+
+const creatingFromContracts = ref(false);
+
+const createMode = ref("numbers"); // 'numbers' | 'contracts'
+const form = useForm({
+  type: "sms",
+  name: "",
+  description: "",
+  profile_id: null,
+  sender_id: null,
+  template_id: null,
+  delivery_report: false,
+  body: "",
+  numbers: "", // one per line
+});
+
+const filteredSenders = computed(() => {
+  if (!form.profile_id) return props.senders;
+  return props.senders.filter((s) => s.profile_id === form.profile_id);
+});
+
+function onTemplateChange() {
+  const template = props.templates.find((t) => t.id === form.template_id);
+  if (template?.content) {
+    form.body = template.content;
+  } else {
+    form.body = "";
+  }
+}
+
+function submitCreate() {
+  const lines = (form.numbers || "")
+    .split(/\r?\n/)
+    .map((s) => s.trim())
+    .filter(Boolean);
+  if (!lines.length) return;
+  if (!form.profile_id && !form.template_id) {
+    alert("Izberi SMS profil ali predlogo.");
+    return;
+  }
+  if (!form.template_id && !form.body) {
+    alert("Vnesi vsebino sporočila ali izberi predlogo.");
+    return;
+  }
+
+  const payload = {
+    type: "sms",
+    name: form.name || `SMS paket ${new Date().toLocaleString()}`,
+    description: form.description || "",
+    items: lines.map((number) => ({
+      number,
+      payload: {
+        profile_id: form.profile_id,
+        sender_id: form.sender_id,
+        template_id: form.template_id,
+        delivery_report: !!form.delivery_report,
+        body: form.body && form.body.trim() ? form.body.trim() : null,
+      },
+    })),
+  };
+
+  router.post(route("packages.sms.store"), payload, {
+    onSuccess: () => {
+      router.visit(route("packages.sms.index"));
+    },
+  });
+}
+
+// Contracts mode state & actions
+const contracts = ref({
+  data: [],
+  meta: { current_page: 1, last_page: 1, per_page: 25, total: 0 },
+});
+const segmentId = ref(null);
+const search = ref("");
+const clientId = ref(null);
+const startDateRange = ref({ start: null, end: null });
+const promiseDateRange = ref({ start: null, end: null });
+const onlyMobile = ref(false);
+const onlyValidated = ref(false);
+const loadingContracts = ref(false);
+
+// Transform clients for AppCombobox
+const clientItems = computed(() =>
+  props.clients.map((c) => ({
+    value: c.id,
+    label: c.name,
+  }))
+);
+const selectedContractIds = ref(new Set());
+const perPage = ref(25);
+
+// DataTable columns definition
+const contractColumns = [
+  { accessorKey: "reference", header: "Pogodba" },
+  {
+    id: "person",
+    accessorFn: (row) => row.person?.full_name || "—",
+    header: "Primer",
+  },
+  {
+    id: "client",
+    accessorFn: (row) => row.client?.name || "—",
+    header: "Stranka",
+  },
+  { accessorKey: "start_date", header: "Datum začetka" },
+  { accessorKey: "promise_date", header: "Zadnja obljuba" },
+  {
+    id: "selected_phone",
+    accessorFn: (row) => row.selected_phone?.number || "—",
+    header: "Izbrana številka",
+  },
+  {
+    id: "segment",
+    accessorFn: (row) => upperFirst(row.segment?.name) || "—",
+    header: "Segment",
+  },
+  { accessorKey: "no_phone_reason", header: "Opomba" },
+];
+
+function onSelectionChange(selectedKeys) {
+  const newSelection = new Set();
+  selectedKeys.forEach((key) => {
+    const index = parseInt(key);
+    if (contracts.value.data[index]) {
+      newSelection.add(contracts.value.data[index].id);
+    }
+  });
+  selectedContractIds.value = newSelection;
+}
+
+async function loadContracts(url = null) {
+  loadingContracts.value = true;
+  try {
+    const params = new URLSearchParams();
+    if (segmentId.value) params.append("segment_id", segmentId.value);
+    if (search.value) params.append("q", search.value);
+    if (clientId.value) params.append("client_id", clientId.value);
+    if (startDateRange.value?.start)
+      params.append("start_date_from", startDateRange.value.start);
+    if (startDateRange.value?.end)
+      params.append("start_date_to", startDateRange.value.end);
+    if (promiseDateRange.value?.start)
+      params.append("promise_date_from", promiseDateRange.value.start);
+    if (promiseDateRange.value?.end)
+      params.append("promise_date_to", promiseDateRange.value.end);
+    if (onlyMobile.value) params.append("only_mobile", "1");
+    if (onlyValidated.value) params.append("only_validated", "1");
+    params.append("per_page", perPage.value);
+
+    const target = url || `${route("packages.sms.contracts")}?${params.toString()}`;
+    const { data: json } = await axios.get(target, {
+      headers: { "X-Requested-With": "XMLHttpRequest" },
+    });
+
+    await nextTick();
+
+    contracts.value = {
+      data: json.data || [],
+      meta: json.meta || { current_page: 1, last_page: 1, per_page: 25, total: 0 },
+    };
+  } finally {
+    loadingContracts.value = false;
+  }
+}
+
+function toggleSelectContract(id) {
+  const s = selectedContractIds.value;
+  if (s.has(id)) {
+    s.delete(id);
+  } else {
+    s.add(id);
+  }
+  selectedContractIds.value = new Set(Array.from(s));
+}
+
+const rowSelection = computed(() => {
+  const selection = {};
+  contracts.value.data.forEach((contract, index) => {
+    if (selectedContractIds.value.has(contract.id)) {
+      selection[index.toString()] = true;
+    }
+  });
+  return selection;
+});
+
+const tableKey = computed(() => {
+  return `contracts-${contracts.value.meta.current_page}-${contracts.value.data.length}`;
+});
+
+function clearSelection() {
+  selectedContractIds.value = new Set();
+}
+
+function goToPage(page) {
+  if (page < 1 || page > contracts.value.meta.last_page) return;
+
+  const params = new URLSearchParams();
+  if (segmentId.value) params.append("segment_id", segmentId.value);
+  if (search.value) params.append("q", search.value);
+  if (clientId.value) params.append("client_id", clientId.value);
+  if (startDateRange.value?.start)
+    params.append("start_date_from", startDateRange.value.start);
+  if (startDateRange.value?.end) params.append("start_date_to", startDateRange.value.end);
+  if (promiseDateRange.value?.start)
+    params.append("promise_date_from", promiseDateRange.value.start);
+  if (promiseDateRange.value?.end)
+    params.append("promise_date_to", promiseDateRange.value.end);
+  if (onlyMobile.value) params.append("only_mobile", "1");
+  if (onlyValidated.value) params.append("only_validated", "1");
+  params.append("per_page", perPage.value);
+  params.append("page", page);
+
+  const url = `${route("packages.sms.contracts")}?${params.toString()}`;
+  loadContracts(url);
+}
+
+function resetFilters() {
+  segmentId.value = null;
+  clientId.value = null;
+  search.value = "";
+  startDateRange.value = { start: null, end: null };
+  promiseDateRange.value = { start: null, end: null };
+  onlyMobile.value = false;
+  onlyValidated.value = false;
+  contracts.value = {
+    data: [],
+    meta: { current_page: 1, last_page: 1, per_page: 25, total: 0 },
+  };
+}
+
+function submitCreateFromContracts() {
+  const ids = Array.from(selectedContractIds.value);
+  if (!ids.length) return;
+
+  const visibleById = new Map((contracts.value.data || []).map((c) => [c.id, c]));
+  const selectedVisible = ids.map((id) => visibleById.get(id)).filter(Boolean);
+  if (selectedVisible.length && selectedVisible.every((c) => !c?.selected_phone)) {
+    alert("Za izbrane pogodbe ni mogoče najti prejemnikov (telefonov).");
+    return;
+  }
+
+  const payload = {
+    type: "sms",
+    name: form.name || `SMS paket (segment) ${new Date().toLocaleString()}`,
+    description: form.description || "",
+    payload: {
+      profile_id: form.profile_id,
+      sender_id: form.sender_id,
+      template_id: form.template_id,
+      delivery_report: !!form.delivery_report,
+      body: form.body && form.body.trim() ? form.body.trim() : null,
+    },
+    contract_ids: ids,
+  };
+
+  creatingFromContracts.value = true;
+  router.post(route("packages.sms.store-from-contracts"), payload, {
+    onSuccess: () => {
+      router.visit(route("packages.sms.index"));
+    },
+    onError: (errors) => {
+      const first = errors && Object.values(errors)[0];
+      if (first) {
+        alert(String(first));
+      }
+    },
+    onFinish: () => {
+      creatingFromContracts.value = false;
+    },
+  });
+}
+
+const numbersCount = computed(() => {
+  return (form.numbers || "")
+    .split(/\r?\n/)
+    .map((s) => s.trim())
+    .filter(Boolean).length;
+});
+</script>
+
+<template>
+  <AppLayout title="Ustvari SMS paket">
+    <!-- Header -->
+    <div class="mb-6">
+      <div class="flex items-center gap-3 mb-2">
+        <Link :href="route('packages.sms.index')">
+          <Button variant="ghost" size="sm">
+            <ArrowLeftIcon class="h-4 w-4 mr-2" />
+            Nazaj
+          </Button>
+        </Link>
+      </div>
+      <div class="flex items-center gap-3">
+        <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
+          <PackageIcon class="h-6 w-6 text-primary" />
+        </div>
+        <div>
+          <h1 class="text-2xl font-bold tracking-tight">Ustvari SMS paket</h1>
+          <p class="text-sm text-muted-foreground">Pošlji SMS sporočila v paketu</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Main Content -->
+    <Tabs v-model="createMode" class="w-full">
+      <TabsList class="flex flex-row justify-baseline py-4">
+        <TabsTrigger value="numbers" class="p-3">
+          <span class="flex gap-2 items-center align-middle justify-center">
+            <PhoneIcon class="h-5 w-5" />Vnos številk
+          </span>
+        </TabsTrigger>
+        <TabsTrigger value="contracts" class="p-3">
+          <span class="flex gap-2 items-center align-middle justify-center">
+            <UsersIcon class="h-5 w-5" />Iz pogodb (segment)
+          </span>
+        </TabsTrigger>
+      </TabsList>
+
+      <!-- Package Details Card -->
+      <Card class="mb-6">
+        <CardHeader>
+          <CardTitle>Podatki o paketu</CardTitle>
+          <CardDescription>Osnovne informacije in SMS nastavitve</CardDescription>
+        </CardHeader>
+        <CardContent class="space-y-6">
+          <!-- Basic Info -->
+          <div class="grid gap-4 md:grid-cols-2">
+            <div class="space-y-2">
+              <Label for="name">Ime paketa</Label>
+              <Input
+                id="name"
+                v-model="form.name"
+                placeholder="Npr. SMS kampanja december 2024"
+              />
+            </div>
+            <div class="space-y-2">
+              <Label for="description">Opis</Label>
+              <Input
+                id="description"
+                v-model="form.description"
+                placeholder="Neobvezen opis paketa"
+              />
+            </div>
+          </div>
+
+          <Separator />
+
+          <!-- SMS Configuration -->
+          <div>
+            <h3 class="text-sm font-semibold mb-4">SMS nastavitve</h3>
+            <div class="grid gap-4 md:grid-cols-3">
+              <div class="space-y-2">
+                <Label>SMS profil</Label>
+                <Select v-model="form.profile_id">
+                  <SelectTrigger>
+                    <SelectValue placeholder="Izberi profil" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem :value="null">—</SelectItem>
+                    <SelectItem v-for="p in profiles" :key="p.id" :value="p.id">
+                      {{ p.name }}
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div class="space-y-2">
+                <Label>Pošiljatelj</Label>
+                <Select v-model="form.sender_id">
+                  <SelectTrigger>
+                    <SelectValue placeholder="Izberi pošiljatelja" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem :value="null">—</SelectItem>
+                    <SelectItem v-for="s in filteredSenders" :key="s.id" :value="s.id">
+                      {{ s.sname }}
+                      <span v-if="s.phone_number" class="text-muted-foreground">
+                        ({{ s.phone_number }})
+                      </span>
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div class="space-y-2">
+                <Label>Predloga</Label>
+                <Select v-model="form.template_id" @update:model-value="onTemplateChange">
+                  <SelectTrigger>
+                    <SelectValue placeholder="Izberi predlogo" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem :value="null">—</SelectItem>
+                    <SelectItem v-for="t in templates" :key="t.id" :value="t.id">
+                      {{ t.name }}
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+          </div>
+
+          <div class="space-y-2">
+            <Label for="body">Vsebina sporočila</Label>
+            <Textarea
+              id="body"
+              v-model="form.body"
+              rows="4"
+              placeholder="Vsebina SMS sporočila..."
+              class="font-mono text-sm"
+            />
+            <div class="flex items-center justify-between">
+              <div class="flex items-center gap-2">
+                <Checkbox
+                  :model-value="form.delivery_report"
+                  @update:model-value="(val) => (form.delivery_report = val)"
+                  id="delivery-report"
+                  :disabled="true"
+                />
+                <Label for="delivery-report" class="cursor-pointer text-sm">
+                  Zahtevaj delivery report
+                </Label>
+              </div>
+              <p class="text-xs text-muted-foreground">
+                {{ form.body?.length || 0 }} znakov
+              </p>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <!-- Numbers Mode -->
+      <TabsContent value="numbers">
+        <Card>
+          <CardHeader>
+            <CardTitle>Telefonske številke</CardTitle>
+            <CardDescription
+              >Vnesi telefonske številke prejemnikov (ena na vrstico)</CardDescription
+            >
+          </CardHeader>
+          <CardContent class="space-y-4">
+            <div class="space-y-2">
+              <Textarea
+                v-model="form.numbers"
+                rows="10"
+                placeholder="+38640123456&#10;+38640123457&#10;+38641234567"
+                class="font-mono text-sm"
+              />
+              <div class="flex items-center justify-between">
+                <p class="text-sm text-muted-foreground">
+                  <strong>{{ numbersCount }}</strong>
+                  {{
+                    numbersCount === 1
+                      ? "številka"
+                      : numbersCount < 5
+                      ? "številke"
+                      : "številk"
+                  }}
+                </p>
+                <Badge v-if="numbersCount > 0" variant="secondary">
+                  <CheckCircle2Icon class="h-3 w-3 mr-1" />
+                  Pripravljeno
+                </Badge>
+              </div>
+            </div>
+            <div class="flex justify-end gap-2">
+              <Button @click="router.visit(route('packages.sms.index'))" variant="outline">
+                Prekliči
+              </Button>
+              <Button
+                @click="submitCreate"
+                :disabled="numbersCount === 0 || (!form.profile_id && !form.template_id)"
+              >
+                <SaveIcon class="h-4 w-4 mr-2" />
+                Ustvari paket
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      </TabsContent>
+
+      <!-- Contracts Mode -->
+      <TabsContent value="contracts">
+        <Card class="mb-6">
+          <CardHeader>
+            <div class="flex items-center justify-between">
+              <div>
+                <CardTitle>Filtri za pogodbe</CardTitle>
+                <CardDescription
+                  >Najdi prejemnike glede na pogodbe in segmente</CardDescription
+                >
+              </div>
+              <Badge variant="outline" class="text-xs">
+                <FilterIcon class="h-3 w-3 mr-1" />
+                Napredno iskanje
+              </Badge>
+            </div>
+          </CardHeader>
+          <CardContent class="space-y-6">
+            <!-- Basic filters -->
+            <div class="grid gap-4 md:grid-cols-3">
+              <div class="space-y-2">
+                <Label>Segment</Label>
+                <Select v-model="segmentId" @update:model-value="loadContracts()">
+                  <SelectTrigger>
+                    <SelectValue placeholder="Vsi segmenti" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem :value="null">Vsi segmenti</SelectItem>
+                    <SelectItem v-for="s in segments" :key="s.id" :value="s.id">
+                      {{ s.name }}
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div class="space-y-2">
+                <Label>Stranka</Label>
+                <AppCombobox
+                  v-model="clientId"
+                  :items="clientItems"
+                  placeholder="Vse stranke"
+                  search-placeholder="Išči stranko..."
+                  empty-text="Stranka ni najdena."
+                  button-class="w-full"
+                  @update:model-value="loadContracts()"
+                />
+              </div>
+              <div class="space-y-2">
+                <Label>Iskanje po referenci</Label>
+                <Input
+                  v-model="search"
+                  @keyup.enter="loadContracts()"
+                  placeholder="Vnesi referenco..."
+                />
+              </div>
+            </div>
+
+            <Separator />
+
+            <!-- Date filters -->
+            <div>
+              <h4 class="text-sm font-semibold mb-3 flex items-center gap-2">
+                <CalendarIcon class="h-4 w-4" />
+                Datumski filtri
+              </h4>
+              <div class="grid gap-4 md:grid-cols-2">
+                <div class="space-y-3">
+                  <p class="text-sm text-muted-foreground">Datum začetka pogodbe</p>
+                  <AppRangeDatePicker
+                    v-model="startDateRange"
+                    placeholder="Izberi obdobje"
+                    button-class="w-full"
+                    :number-of-months="1"
+                  />
+                </div>
+                <div class="space-y-3">
+                  <p class="text-sm text-muted-foreground">Datum obljube plačila</p>
+                  <AppRangeDatePicker
+                    v-model="promiseDateRange"
+                    placeholder="Izberi obdobje"
+                    button-class="w-full"
+                    :number-of-months="1"
+                  />
+                </div>
+              </div>
+            </div>
+
+            <Separator />
+
+            <!-- Phone filters -->
+            <div>
+              <h4 class="text-sm font-semibold mb-3">Telefonski filtri</h4>
+              <div class="flex flex-wrap gap-4">
+                <div class="flex items-center gap-2">
+                  <Checkbox
+                    :model-value="onlyMobile"
+                    @update:model-value="(val) => { onlyMobile = val; }"
+                    id="only-mobile"
+                  />
+                  <Label for="only-mobile" class="cursor-pointer text-sm">
+                    Samo mobilne številke
+                  </Label>
+                </div>
+                <div class="flex items-center gap-2">
+                  <Checkbox
+                    :model-value="onlyValidated"
+                    @update:model-value="(val) => { onlyValidated = val; }"
+                    id="only-validated"
+                  />
+                  <Label for="only-validated" class="cursor-pointer text-sm">
+                    Samo potrjene številke
+                  </Label>
+                </div>
+              </div>
+            </div>
+
+            <!-- Action buttons -->
+            <div class="flex items-center gap-2">
+              <Button @click="loadContracts()">
+                <SearchIcon class="h-4 w-4" />
+                Išči pogodbe
+              </Button>
+              <Button @click="resetFilters" variant="outline">
+                <XCircleIcon class="h-4 w-4" />
+                Počisti filtre
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+
+        <!-- Results -->
+        <Card v-if="contracts.data.length > 0 || loadingContracts">
+          <CardHeader>
+            <div class="flex items-center justify-between">
+              <div>
+                <CardTitle>Rezultati iskanja (do 500 zapisov)</CardTitle>
+                <CardDescription v-if="contracts.meta.total > 0">
+                  Najdeno {{ contracts.meta.total }}
+                  {{
+                    contracts.meta.total === 1
+                      ? "pogodba"
+                      : contracts.meta.total < 5
+                      ? "pogodbe"
+                      : "pogodb"
+                  }}
+                </CardDescription>
+              </div>
+
+              <!-- Create Button -->
+              <div class="flex justify-end gap-2" v-if="selectedContractIds.size > 0">
+                <Badge
+                  v-if="selectedContractIds.size > 0"
+                  variant="secondary"
+                  class="text-sm"
+                >
+                  <CheckCircle2Icon class="h-3 w-3" />
+                  Izbrano: {{ selectedContractIds.size }}
+                </Badge>
+                <Button @click="router.visit(route('packages.sms.index'))" variant="outline">
+                  Prekliči
+                </Button>
+                <Button
+                  @click="submitCreateFromContracts"
+                  :disabled="selectedContractIds.size === 0 || creatingFromContracts"
+                >
+                  <SaveIcon class="h-4 w-4" />
+                  Ustvari paket ({{ selectedContractIds.size }}
+                  {{
+                    selectedContractIds.size === 1
+                      ? "pogodba"
+                      : selectedContractIds.size < 5
+                      ? "pogodbe"
+                      : "pogodb"
+                  }})
+                </Button>
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent class="p-0">
+            <DataTableNew2
+              v-if="!loadingContracts"
+              :key="tableKey"
+              :columns="contractColumns"
+              :data="contracts.data"
+              :enableRowSelection="true"
+              :rowSelection="rowSelection"
+              :showPagination="true"
+              :page-size="50"
+              :page-size-options="[10, 15, 25, 50, 100]"
+              :showToolbar="false"
+              @selection:change="onSelectionChange"
+            >
+              <template #cell-reference="{ row }">
+                <div v-if="row.original" class="space-y-1">
+                  <p class="font-medium">{{ row.original.reference || "—" }}</p>
+                  <p class="text-xs text-muted-foreground font-mono">
+                    #{{ row.original.id }}
+                  </p>
+                </div>
+              </template>
+
+              <template #cell-person="{ row }">
+                <span v-if="row.original" class="text-xs">{{
+                  row.original.person?.full_name || "—"
+                }}</span>
+              </template>
+
+              <template #cell-client="{ row }">
+                <span v-if="row.original" class="text-xs">{{
+                  row.original.client?.name || "—"
+                }}</span>
+              </template>
+
+              <template #cell-start_date="{ row }">
+                {{ fmtDateDMY(row.start_date) || "—" }}
+              </template>
+
+              <template #cell-promise_date="{ row }">
+                {{ fmtDateDMY(row.promise_date) || "—" }}
+              </template>
+
+              <template #cell-selected_phone="{ row }">
+                <div v-if="row.selected_phone" class="space-y-1 flex flex-col gap-1">
+                  <div class="flex flex-row gap-1 items-center">
+                    <span>{{ row.selected_phone.number }}</span>
+                    <BadgeCheckIcon
+                      size="18"
+                      color="green"
+                      v-if="row.selected_phone.validated"
+                    />
+                    <BadgeXIcon
+                      size="18"
+                      color="red"
+                      v-if="!row.selected_phone.validated"
+                    />
+                  </div>
+                  <div v-if="row.selected_phone.description">
+                    <Badge variant="secondary" class="break-all">
+                      {{ row.selected_phone.description }}
+                    </Badge>
+                  </div>
+                </div>
+                <span v-else class="text-xs text-destructive">Ni telefonske št.</span>
+              </template>
+
+              <template #cell-no_phone_reason="{ row }">
+                <span v-if="row.original" class="text-xs text-muted-foreground">{{
+                  row.original.no_phone_reason || "—"
+                }}</span>
+              </template>
+            </DataTableNew2>
+
+            <div v-else class="text-center text-muted-foreground py-24">Nalaganje...</div>
+          </CardContent>
+        </Card>
+      </TabsContent>
+    </Tabs>
+  </AppLayout>
+</template>

resources/js/Pages/Packages/Sms/Index.vue

@@ -0,0 +1,177 @@
+<script setup>
+import AppLayout from "@/Layouts/AppLayout.vue";
+import { Link, router } from "@inertiajs/vue3";
+import { ref } from "vue";
+import { Card, CardHeader, CardTitle } from "@/Components/ui/card";
+import { Button } from "@/Components/ui/button";
+import { Badge } from "@/Components/ui/badge";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/Components/ui/alert-dialog";
+import DataTableNew2 from "@/Components/DataTable/DataTableNew2.vue";
+import { MessageSquareIcon, PlusIcon, Trash2Icon, EyeIcon, ArrowLeftIcon } from "lucide-vue-next";
+import AppCard from "@/Components/app/ui/card/AppCard.vue";
+import { fmtDateTime } from "@/Utilities/functions";
+
+const props = defineProps({
+  packages: { type: Object, required: true },
+});
+
+const deletingId = ref(null);
+const packageToDelete = ref(null);
+const showDeleteDialog = ref(false);
+
+const columns = [
+  { accessorKey: "id", header: "ID" },
+  { accessorKey: "name", header: "Ime" },
+  { accessorKey: "status", header: "Status" },
+  { accessorKey: "total_items", header: "Skupaj" },
+  { accessorKey: "sent_count", header: "Poslano" },
+  { accessorKey: "failed_count", header: "Neuspešno" },
+  { accessorKey: "finished_at", header: "Zaključeno" },
+  { accessorKey: "actions", header: "", enableSorting: false },
+];
+
+function getStatusVariant(status) {
+  if (["queued", "running"].includes(status)) return "secondary";
+  if (status === "completed") return "default";
+  if (status === "failed") return "destructive";
+  return "outline";
+}
+
+function goShow(id) {
+  router.visit(route("packages.sms.show", id));
+}
+
+function openDeleteDialog(pkg) {
+  if (!pkg || pkg.status !== "draft") return;
+  packageToDelete.value = pkg;
+  showDeleteDialog.value = true;
+}
+
+function confirmDelete() {
+  if (!packageToDelete.value) return;
+  deletingId.value = packageToDelete.value.id;
+  router.delete(route("packages.sms.destroy", packageToDelete.value.id), {
+    onSuccess: () => {
+      router.reload({ only: ["packages"] });
+    },
+    onFinish: () => {
+      deletingId.value = null;
+      showDeleteDialog.value = false;
+      packageToDelete.value = null;
+    },
+  });
+}
+</script>
+
+<template>
+  <AppLayout title="SMS paketi">
+    <Card class="mb-4">
+      <CardHeader>
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-2">
+            <Button variant="ghost" size="sm" as-child>
+              <Link :href="route('packages.index')">
+                <ArrowLeftIcon class="h-4 w-4 mr-2" />
+                Paketi
+              </Link>
+            </Button>
+            <MessageSquareIcon class="h-5 w-5 text-muted-foreground" />
+            <CardTitle>SMS paketi</CardTitle>
+          </div>
+          <Link :href="route('packages.sms.create')">
+            <Button>
+              <PlusIcon class="h-4 w-4" />
+              Nov paket
+            </Button>
+          </Link>
+        </div>
+      </CardHeader>
+    </Card>
+
+    <AppCard
+      title=""
+      padding="none"
+      class="p-0! gap-0"
+      header-class="py-3! px-4 gap-0 text-muted-foreground"
+      body-class=""
+    >
+      <template #header>
+        <div class="flex items-center gap-2">
+          <MessageSquareIcon size="18" />
+          <CardTitle class="uppercase">SMS Paketi</CardTitle>
+        </div>
+      </template>
+      <DataTableNew2
+        :columns="columns"
+        :data="packages.data"
+        :meta="packages"
+        route-name="packages.sms.index"
+      >
+        <template #cell-name="{ row }">
+          <span class="text-sm">{{ row.name ?? "—" }}</span>
+        </template>
+
+        <template #cell-status="{ row }">
+          <Badge :variant="getStatusVariant(row.status)">{{ row.status }}</Badge>
+        </template>
+
+        <template #cell-finished_at="{ row }">
+          <span class="text-xs text-muted-foreground">{{
+            fmtDateTime(row.finished_at) ?? "—"
+          }}</span>
+        </template>
+
+        <template #cell-actions="{ row }">
+          <div class="flex justify-end gap-2">
+            <Button @click="goShow(row.id)" variant="ghost" size="sm">
+              <EyeIcon class="h-4 w-4" />
+            </Button>
+            <Button
+              v-if="row.status === 'draft'"
+              @click="openDeleteDialog(row)"
+              :disabled="deletingId === row.id"
+              variant="ghost"
+              size="sm"
+            >
+              <Trash2Icon class="h-4 w-4" />
+            </Button>
+          </div>
+        </template>
+      </DataTableNew2>
+    </AppCard>
+
+    <!-- Delete Confirmation Dialog -->
+    <AlertDialog v-model:open="showDeleteDialog">
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Izbriši paket?</AlertDialogTitle>
+          <AlertDialogDescription>
+            Ali ste prepričani, da želite izbrisati paket
+            <strong v-if="packageToDelete"
+              >#{{ packageToDelete.id }} -
+              {{ packageToDelete.name || "Brez imena" }}</strong
+            >? Tega dejanja ni mogoče razveljaviti.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Prekliči</AlertDialogCancel>
+          <AlertDialogAction
+            @click="confirmDelete"
+            class="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+          >
+            Izbriši
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  </AppLayout>
+</template>

resources/js/Pages/Packages/Sms/Show.vue

@@ -0,0 +1,333 @@
+<script setup>
+import AppLayout from "@/Layouts/AppLayout.vue";
+import { Link, router } from "@inertiajs/vue3";
+import { onMounted, onUnmounted, ref, computed } from "vue";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from "@/Components/ui/card";
+import { Button } from "@/Components/ui/button";
+import { Badge } from "@/Components/ui/badge";
+import { Separator } from "@/Components/ui/separator";
+import DataTableNew2 from "@/Components/DataTable/DataTableNew2.vue";
+import {
+  PackageIcon,
+  ArrowLeftIcon,
+  PlayIcon,
+  XCircleIcon,
+  RefreshCwIcon,
+  CopyIcon,
+} from "lucide-vue-next";
+import AppCard from "@/Components/app/ui/card/AppCard.vue";
+
+const props = defineProps({
+  package: { type: Object, required: true },
+  items: { type: Object, required: true },
+  preview: { type: [Object, null], default: null },
+});
+
+const columns = [
+  { accessorKey: "id", header: "ID" },
+  { accessorKey: "target", header: "Prejemnik" },
+  { accessorKey: "message", header: "Sporočilo" },
+  { accessorKey: "status", header: "Status" },
+  { accessorKey: "last_error", header: "Napaka" },
+  { accessorKey: "provider_message_id", header: "Provider ID" },
+  { accessorKey: "cost", header: "Cena" },
+  { accessorKey: "currency", header: "Valuta" },
+];
+
+function getStatusVariant(status) {
+  if (["queued", "processing"].includes(status)) return "secondary";
+  if (status === "sent") return "default";
+  if (status === "failed") return "destructive";
+  return "outline";
+}
+
+const refreshing = ref(false);
+let timer = null;
+
+const isRunning = computed(() => ["queued", "running"].includes(props.package.status));
+
+const firstItem = computed(() =>
+  props.items?.data && props.items.data.length ? props.items.data[0] : null
+);
+const firstPayload = computed(() =>
+  firstItem.value ? firstItem.value.payload_json || {} : {}
+);
+const messageBody = computed(() => {
+  const b = firstPayload.value?.body;
+  if (typeof b === "string") {
+    const t = b.trim();
+    return t.length ? t : null;
+  }
+  return null;
+});
+const payloadSummary = computed(() => ({
+  profile_id: firstPayload.value?.profile_id ?? null,
+  sender_id: firstPayload.value?.sender_id ?? null,
+  template_id: firstPayload.value?.template_id ?? null,
+  delivery_report: !!firstPayload.value?.delivery_report,
+}));
+
+function reload() {
+  refreshing.value = true;
+  router.reload({
+    only: ["package", "items"],
+    onFinish: () => (refreshing.value = false),
+    preserveScroll: true,
+    preserveState: true,
+  });
+}
+
+function dispatchPkg() {
+  router.post(
+    route("packages.sms.dispatch", props.package.id),
+    {},
+    { onSuccess: reload }
+  );
+}
+function cancelPkg() {
+  router.post(
+    route("packages.sms.cancel", props.package.id),
+    {},
+    { onSuccess: reload }
+  );
+}
+
+onMounted(() => {
+  if (isRunning.value) {
+    timer = setInterval(reload, 3000);
+  }
+});
+onUnmounted(() => {
+  if (timer) clearInterval(timer);
+});
+
+async function copyText(text) {
+  if (!text) return;
+  try {
+    await navigator.clipboard.writeText(text);
+  } catch (e) {
+    const ta = document.createElement("textarea");
+    ta.value = text;
+    ta.style.position = "fixed";
+    ta.style.opacity = "0";
+    document.body.appendChild(ta);
+    ta.focus();
+    ta.select();
+    try {
+      document.execCommand("copy");
+    } catch (_) {}
+    document.body.removeChild(ta);
+  }
+}
+</script>
+
+<template>
+  <AppLayout :title="`SMS paket #${package.id}`">
+    <Card class="mb-4">
+      <CardHeader>
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-3">
+            <PackageIcon class="h-5 w-5 text-muted-foreground" />
+            <div>
+              <CardTitle>SMS paket #{{ package.id }}</CardTitle>
+              <CardDescription class="font-mono"
+                >UUID: {{ package.uuid }}</CardDescription
+              >
+            </div>
+          </div>
+          <div class="flex items-center gap-2">
+            <Button variant="ghost" size="sm" as-child>
+              <Link :href="route('packages.sms.index')">
+                <ArrowLeftIcon class="h-4 w-4 mr-2" />
+                Nazaj
+              </Link>
+            </Button>
+            <Button
+              v-if="['draft', 'failed'].includes(package.status)"
+              @click="dispatchPkg"
+              size="sm"
+            >
+              <PlayIcon class="h-4 w-4 mr-2" />
+              Zaženi
+            </Button>
+            <Button v-if="isRunning" @click="cancelPkg" variant="destructive" size="sm">
+              <XCircleIcon class="h-4 w-4 mr-2" />
+              Prekliči
+            </Button>
+            <Button v-if="!isRunning" @click="reload" variant="outline" size="sm">
+              <RefreshCwIcon class="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      </CardHeader>
+    </Card>
+
+    <div class="grid sm:grid-cols-4 gap-3 mb-4">
+      <Card>
+        <CardHeader class="pb-2">
+          <CardDescription>Status</CardDescription>
+          <CardTitle class="text-xl uppercase">{{ package.status }}</CardTitle>
+        </CardHeader>
+      </Card>
+      <Card>
+        <CardHeader class="pb-2">
+          <CardDescription>Skupaj</CardDescription>
+          <CardTitle class="text-xl">{{ package.total_items }}</CardTitle>
+        </CardHeader>
+      </Card>
+      <Card>
+        <CardHeader class="pb-2">
+          <CardDescription>Poslano</CardDescription>
+          <CardTitle class="text-xl text-emerald-700">{{ package.sent_count }}</CardTitle>
+        </CardHeader>
+      </Card>
+      <Card>
+        <CardHeader class="pb-2">
+          <CardDescription>Neuspešno</CardDescription>
+          <CardTitle class="text-xl text-rose-700">{{ package.failed_count }}</CardTitle>
+        </CardHeader>
+      </Card>
+    </div>
+
+    <!-- Payload / Message preview -->
+    <div class="mb-4 grid gap-3 sm:grid-cols-2">
+      <Card>
+        <CardHeader>
+          <CardTitle class="text-base">Sporočilo</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <template v-if="preview && preview.content">
+            <div class="text-sm whitespace-pre-wrap mb-3">{{ preview.content }}</div>
+            <Button @click="copyText(preview.content)" size="sm" variant="outline">
+              <CopyIcon class="h-3.5 w-3.5 mr-2" />
+              Kopiraj
+            </Button>
+            <p
+              v-if="preview.source === 'template' && preview.template"
+              class="mt-3 text-xs text-muted-foreground"
+            >
+              Predloga: {{ preview.template.name }} (#{{ preview.template.id }})
+            </p>
+          </template>
+          <template v-else>
+            <div v-if="messageBody" class="text-sm whitespace-pre-wrap">
+              {{ messageBody }}
+            </div>
+            <div v-else class="text-sm text-muted-foreground">
+              <template v-if="payloadSummary.template_id">
+                Uporabljena bo predloga #{{ payloadSummary.template_id }}.
+              </template>
+              <template v-else> Vsebina sporočila ni določena. </template>
+            </div>
+          </template>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle class="text-base">Meta / Nastavitve pošiljanja</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <dl class="text-sm grid grid-cols-3 gap-y-2">
+            <dt class="col-span-1 text-muted-foreground">Profil</dt>
+            <dd class="col-span-2">{{ payloadSummary.profile_id ?? "—" }}</dd>
+            <dt class="col-span-1 text-muted-foreground">Pošiljatelj</dt>
+            <dd class="col-span-2">{{ payloadSummary.sender_id ?? "—" }}</dd>
+            <dt class="col-span-1 text-muted-foreground">Predloga</dt>
+            <dd class="col-span-2">{{ payloadSummary.template_id ?? "—" }}</dd>
+            <dt class="col-span-1 text-muted-foreground">Delivery report</dt>
+            <dd class="col-span-2">{{ payloadSummary.delivery_report ? "da" : "ne" }}</dd>
+          </dl>
+          <div
+            v-if="
+              package.meta && (package.meta.source || package.meta.skipped !== undefined)
+            "
+            class="mt-3 pt-3 border-t text-xs text-muted-foreground"
+          >
+            <span v-if="package.meta.source" class="mr-3"
+              >Vir: {{ package.meta.source }}</span
+            >
+            <span v-if="package.meta.skipped !== undefined"
+              >Preskočeno: {{ package.meta.skipped }}</span
+            >
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+
+    <AppCard
+      title=""
+      padding="none"
+      class="p-0! gap-0"
+      header-class="py-3! px-4 gap-0 text-muted-foreground"
+      body-class=""
+    >
+      <template #header>
+        <div class="flex items-center gap-2">
+          <PackageIcon size="18" />
+          <CardTitle class="uppercase">Uvozi</CardTitle>
+        </div>
+      </template>
+      <DataTableNew2
+        :columns="columns"
+        :data="items.data"
+        :meta="items"
+        route-name="packages.sms.show"
+        :route-params="{ id: package.id }"
+      >
+        <template #cell-target="{ row }">
+          <span class="text-sm">{{
+            (row.target_json && row.target_json.number) || "—"
+          }}</span>
+        </template>
+
+        <template #cell-message="{ row }">
+          <div class="flex items-start gap-2">
+            <div class="text-xs max-w-[420px] line-clamp-2 whitespace-pre-wrap">
+              {{ row.rendered_preview || "—" }}
+            </div>
+            <Button
+              v-if="row.rendered_preview"
+              @click="copyText(row.rendered_preview)"
+              size="sm"
+              variant="ghost"
+            >
+              <CopyIcon class="h-3.5 w-3.5" />
+            </Button>
+          </div>
+        </template>
+
+        <template #cell-status="{ row }">
+          <Badge :variant="getStatusVariant(row.status)">{{ row.status }}</Badge>
+        </template>
+
+        <template #cell-last_error="{ row }">
+          <span class="text-xs text-rose-700">{{ row.last_error ?? "—" }}</span>
+        </template>
+
+        <template #cell-provider_message_id="{ row }">
+          <span class="font-mono text-xs text-muted-foreground">{{
+            row.provider_message_id ?? "—"
+          }}</span>
+        </template>
+
+        <template #cell-cost="{ row }">
+          <span class="text-sm">{{ row.cost ?? "—" }}</span>
+        </template>
+
+        <template #cell-currency="{ row }">
+          <span class="text-sm">{{ row.currency ?? "—" }}</span>
+        </template>
+      </DataTableNew2>
+    </AppCard>
+
+    <div v-if="refreshing" class="mt-2 text-xs text-muted-foreground">
+      Osveževanje ...
+    </div>
+  </AppLayout>
+</template>

resources/js/Pages/Reports/Show.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { reactive, ref, computed, onMounted } from "vue";
+import { reactive, ref, computed, onMounted, watch } from "vue";
 import { Link, router, usePage } from "@inertiajs/vue3";
 import axios from "axios";
 import AppLayout from "@/Layouts/AppLayout.vue";
@@ -138,11 +138,61 @@ const hasClientFilter = computed(() =>
   (props.inputs || []).some((i) => i.type === "select:client")
 );
 
+// Async action options for select:action inputs
+const actionOptions = ref([]);
+const actionLoading = ref(false);
+async function fetchActions() {
+  actionLoading.value = true;
+  try {
+    const res = await axios.get(route("reports.actions"));
+    actionOptions.value = Array.isArray(res.data) ? res.data : [];
+  } finally {
+    actionLoading.value = false;
+  }
+}
+const hasActionFilter = computed(() =>
+  (props.inputs || []).some((i) => i.type === "select:action")
+);
+
+// Async decision options for select:decision inputs (filtered by selected action)
+const decisionOptions = ref([]);
+const decisionLoading = ref(false);
+async function fetchDecisions(actionId = null) {
+  decisionLoading.value = true;
+  try {
+    const params = actionId ? { action_id: actionId } : {};
+    const res = await axios.get(route("reports.decisions"), { params });
+    decisionOptions.value = Array.isArray(res.data) ? res.data : [];
+  } finally {
+    decisionLoading.value = false;
+  }
+}
+const hasDecisionFilter = computed(() =>
+  (props.inputs || []).some((i) => i.type === "select:decision")
+);
+
 onMounted(() => {
   if (hasUserFilter.value) fetchUsers(true);
   if (hasClientFilter.value) fetchClients(true);
+  if (hasActionFilter.value) fetchActions();
+  if (hasDecisionFilter.value) {
+    const actionInput = (props.inputs || []).find((i) => i.type === "select:action");
+    fetchDecisions(actionInput ? (filters[actionInput.key] ?? null) : null);
+  }
 });
 
+// When action filter changes, reload decisions filtered to that action
+const actionKey = (props.inputs || []).find((i) => i.type === "select:action")?.key;
+if (hasDecisionFilter.value && actionKey) {
+  watch(
+    () => filters[actionKey],
+    (newActionId) => {
+      filters.decision_id = null;
+      fetchDecisions(newActionId ?? null);
+    }
+  );
+}
+
 // Formatting helpers (EU style)
 function formatNumberEU(val) {
   if (typeof val !== "number") return String(val ?? "");
@@ -382,6 +432,38 @@ function formatCell(value, key) {
                           Nalagam…
                         </div>
                       </template>
+                      <template v-else-if="inp.type === 'select:action'">
+                        <AppCombobox
+                          v-model="filters[inp.key]"
+                          :items="
+                            actionOptions.map((a) => ({ value: a.id, label: a.name }))
+                          "
+                          placeholder="Brez"
+                          search-placeholder="Išči akcijo..."
+                          empty-text="Ni akcij"
+                          :disabled="actionLoading"
+                          button-class="w-full"
+                        />
+                        <div v-if="actionLoading" class="text-xs text-muted-foreground">
+                          Nalagam…
+                        </div>
+                      </template>
+                      <template v-else-if="inp.type === 'select:decision'">
+                        <AppCombobox
+                          v-model="filters[inp.key]"
+                          :items="
+                            decisionOptions.map((d) => ({ value: d.id, label: d.name }))
+                          "
+                          placeholder="Brez"
+                          search-placeholder="Išči odločitev..."
+                          empty-text="Ni odločitev"
+                          :disabled="decisionLoading"
+                          button-class="w-full"
+                        />
+                        <div v-if="decisionLoading" class="text-xs text-muted-foreground">
+                          Nalagam…
+                        </div>
+                      </template>
                       <template v-else>
                         <Input
                           v-model="filters[inp.key]"