updated sms package creator, removed result for segments with exeption true, replaced some ui elements

2026-02-01 13:43:18 +01:00 · 2026-02-01 13:43:18 +01:00 · b1c531bb70
commit b1c531bb70
parent 9cc1b7072c
9 changed files with 484 additions and 200 deletions
--- a/app/Http/Controllers/Admin/PackageController.php
+++ b/app/Http/Controllers/Admin/PackageController.php
@ -12,6 +12,7 @@
 use App\Models\SmsTemplate;
 use App\Services\Contact\PhoneSelector;
 use App\Services\Sms\SmsService;
+use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Bus;
@ -50,6 +51,7 @@ public function create(Request $request): Response
            ->get(['id', 'name', 'content']);
        $segments = \App\Models\Segment::query()
            ->where('active', true)
+            ->where('exclude', false)
            ->orderBy('name')
            ->get(['id', 'name']);
        // Provide a lightweight list of recent clients with person names for filtering
@ -321,7 +323,6 @@ public function contracts(Request $request, PhoneSelector $selector): \Illuminat
        $request->validate([
            'segment_id' => ['nullable', 'integer', 'exists:segments,id'],
            'q' => ['nullable', 'string'],
-          
            'client_id' => ['nullable', 'integer', 'exists:clients,id'],
            'only_mobile' => ['nullable', 'boolean'],
            'only_validated' => ['nullable', 'boolean'],
@ -333,12 +334,12 @@ public function contracts(Request $request, PhoneSelector $selector): \Illuminat

        $segmentId = $request->input('segment_id') ? (int) $request->input('segment_id') : null;

-
        $query = Contract::query()
            ->with([
                'clientCase.person.phones',
                'clientCase.client.person',
                'account',
+                'segments:id,name',
            ])
            ->select('contracts.*')
            ->latest('contracts.id');
@ -350,6 +351,15 @@ public function contracts(Request $request, PhoneSelector $selector): \Illuminat
                    ->where('contract_segment.segment_id', '=', $segmentId)
                    ->where('contract_segment.active', true);
            });
+        } else {
+            // Only include contracts that have at least one active, non-excluded segment
+            $query->whereExists(fn ($exist) => $exist->select(\DB::raw(1))
+                ->from('contract_segment')
+                ->join('segments', 'segments.id', '=', 'contract_segment.segment_id')
+                ->where('contract_segment.active', true)
+                ->where('segments.exclude', false)
+                ->whereColumn('contract_segment.contract_id', 'contracts.id')
+            );
        }

        if ($q = trim((string) $request->input('q'))) {
@ -399,13 +409,14 @@ public function contracts(Request $request, PhoneSelector $selector): \Illuminat
            });
        }

-        $contracts = $query->get();
+        $contracts = $query->limit(500)->get();

        $data = collect($contracts)->map(function (Contract $contract) use ($selector) {
            $person = $contract->clientCase?->person;
            $selected = $person ? $selector->selectForPerson($person) : ['phone' => null, 'reason' => 'no_person'];
            $phone = $selected['phone'];
            $clientPerson = $contract->clientCase?->client?->person;
+            $segment = collect($contract->segments)->last();

            return [
                'id' => $contract->id,
@ -423,6 +434,7 @@ public function contracts(Request $request, PhoneSelector $selector): \Illuminat
                    'uuid' => $person?->uuid,
                    'full_name' => $person?->full_name,
                ],
+                'segment' => $segment,
                // Stranka: the client person
                'client' => $clientPerson ? [
                    'id' => $contract->clientCase?->client?->id,
@ -440,7 +452,7 @@ public function contracts(Request $request, PhoneSelector $selector): \Illuminat
        });

        return response()->json([
-            'data' => $data
+            'data' => $data,
        ]);
    }

--- a/resources/js/Components/app/ui/AppRangeDatePicker.vue
+++ b/resources/js/Components/app/ui/AppRangeDatePicker.vue
@ -0,0 +1,177 @@
+<script setup>
+import { CalendarIcon, XIcon } from "lucide-vue-next";
+import { computed, ref } from "vue";
+import { cn } from "@/lib/utils";
+import { Button } from "@/Components/ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@/Components/ui/popover";
+import { RangeCalendar } from "@/Components/ui/range-calendar";
+import {
+  DateFormatter,
+  getLocalTimeZone,
+  today,
+  parseDate,
+  CalendarDate,
+} from "@internationalized/date";
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    default: () => ({ start: null, end: null }),
+  },
+  placeholder: {
+    type: String,
+    default: "Izberi datumski obseg",
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  buttonClass: {
+    type: String,
+    default: "w-[280px]",
+  },
+  locale: {
+    type: String,
+    default: "sl-SI",
+  },
+  numberOfMonths: {
+    type: Number,
+    default: 2,
+  },
+  minValue: {
+    type: Object,
+    default: undefined,
+  },
+  maxValue: {
+    type: Object,
+    default: undefined,
+  },
+  clearable: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const open = ref(false);
+
+const df = new DateFormatter(props.locale, {
+  dateStyle: "medium",
+});
+
+// Check if there's a selected value
+const hasValue = computed(() => {
+  const val = props.modelValue;
+  return val?.start || val?.end;
+});
+
+// Convert string dates to CalendarDate objects for the calendar
+const calendarValue = computed({
+  get() {
+    const val = props.modelValue;
+    if (!val) return undefined;
+
+    let start = null;
+    let end = null;
+
+    if (val.start) {
+      if (typeof val.start === "string") {
+        start = parseDate(val.start);
+      } else if (val.start instanceof CalendarDate) {
+        start = val.start;
+      }
+    }
+
+    if (val.end) {
+      if (typeof val.end === "string") {
+        end = parseDate(val.end);
+      } else if (val.end instanceof CalendarDate) {
+        end = val.end;
+      }
+    }
+
+    if (!start && !end) return undefined;
+    return { start, end };
+  },
+  set(newValue) {
+    if (!newValue) {
+      emit("update:modelValue", { start: null, end: null });
+      return;
+    }
+
+    // Convert CalendarDate to ISO string (YYYY-MM-DD) for easier handling
+    const result = {
+      start: newValue.start ? newValue.start.toString() : null,
+      end: newValue.end ? newValue.end.toString() : null,
+    };
+    emit("update:modelValue", result);
+
+    // Close popover when both dates are selected
+    if (result.start && result.end) {
+      open.value = false;
+    }
+  },
+});
+
+const displayText = computed(() => {
+  const val = calendarValue.value;
+  if (!val?.start) return props.placeholder;
+
+  const startFormatted = df.format(val.start.toDate(getLocalTimeZone()));
+  if (!val.end) return startFormatted;
+
+  const endFormatted = df.format(val.end.toDate(getLocalTimeZone()));
+  return `${startFormatted} - ${endFormatted}`;
+});
+
+function clearValue(event) {
+  event.stopPropagation();
+  emit("update:modelValue", { start: null, end: null });
+}
+</script>
+
+<template>
+  <Popover v-model:open="open">
+    <PopoverTrigger as-child>
+      <Button
+        variant="outline"
+        :disabled="disabled"
+        :class="
+          cn(
+            'justify-start text-left font-normal',
+            !calendarValue?.start && 'text-muted-foreground',
+            buttonClass
+          )
+        "
+      >
+        <CalendarIcon class="mr-2 h-4 w-4 shrink-0" />
+        <span class="truncate flex-1">{{ displayText }}</span>
+        <span
+          v-if="clearable && hasValue && !disabled"
+          class="ml-2 shrink-0 opacity-50 hover:opacity-100 cursor-pointer"
+          @click.stop.prevent="clearValue"
+        >
+          <XIcon class="h-4 w-4" />
+        </span>
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent class="w-auto p-0" align="start">
+      <RangeCalendar
+        v-model="calendarValue"
+        :locale="locale"
+        :number-of-months="numberOfMonths"
+        :min-value="minValue"
+        :max-value="maxValue"
+        initial-focus
+        @update:start-value="
+          (startDate) => {
+            if (calendarValue?.start?.toString() !== startDate?.toString()) {
+              calendarValue = { start: startDate, end: undefined };
+            }
+          }
+        "
+      />
+    </PopoverContent>
+  </Popover>
+</template>
--- a/resources/js/Pages/Admin/Packages/Create.vue
+++ b/resources/js/Pages/Admin/Packages/Create.vue
@ -2,6 +2,7 @@
 import AdminLayout from "@/Layouts/AdminLayout.vue";
 import { Link, router, useForm } from "@inertiajs/vue3";
 import { ref, computed, nextTick } from "vue";
+import axios from "axios";
 import {
  Card,
  CardContent,
@ -39,6 +40,9 @@ import {
  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({
  profiles: { type: Array, default: () => [] },
@ -123,13 +127,19 @@ const contracts = ref({
 const segmentId = ref(null);
 const search = ref("");
 const clientId = ref(null);
-const startDateFrom = ref("");
-const startDateTo = ref("");
-const promiseDateFrom = ref("");
-const promiseDateTo = ref("");
+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);

@ -153,6 +163,11 @@ const contractColumns = [
    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" },
 ];

@ -175,19 +190,22 @@ async function loadContracts(url = null) {
    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 (startDateFrom.value) params.append("start_date_from", startDateFrom.value);
-    if (startDateTo.value) params.append("start_date_to", startDateTo.value);
-    if (promiseDateFrom.value) params.append("promise_date_from", promiseDateFrom.value);
-    if (promiseDateTo.value) params.append("promise_date_to", promiseDateTo.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("admin.packages.contracts")}?${params.toString()}`;
-    const res = await fetch(target, {
+    const { data: json } = await axios.get(target, {
      headers: { "X-Requested-With": "XMLHttpRequest" },
    });
-    const json = await res.json();

    // Wait for next tick before updating to avoid Vue reconciliation issues
    await nextTick();
@ -238,10 +256,13 @@ function goToPage(page) {
  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 (startDateFrom.value) params.append("start_date_from", startDateFrom.value);
-  if (startDateTo.value) params.append("start_date_to", startDateTo.value);
-  if (promiseDateFrom.value) params.append("promise_date_from", promiseDateFrom.value);
-  if (promiseDateTo.value) params.append("promise_date_to", promiseDateTo.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);
@ -255,10 +276,8 @@ function resetFilters() {
  segmentId.value = null;
  clientId.value = null;
  search.value = "";
-  startDateFrom.value = "";
-  startDateTo.value = "";
-  promiseDateFrom.value = "";
-  promiseDateTo.value = "";
+  startDateRange.value = { start: null, end: null };
+  promiseDateRange.value = { start: null, end: null };
  onlyMobile.value = false;
  onlyValidated.value = false;
  contracts.value = {
@ -448,9 +467,10 @@ const numbersCount = computed(() => {
            <div class="flex items-center justify-between">
              <div class="flex items-center gap-2">
                <Checkbox
-                  :checked="form.delivery_report"
-                  @update:checked="(val) => (form.delivery_report = val)"
+                  :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
@ -553,17 +573,15 @@ const numbersCount = computed(() => {
              </div>
              <div class="space-y-2">
                <Label>Stranka</Label>
-                <Select v-model="clientId" @update:model-value="loadContracts()">
-                  <SelectTrigger>
-                    <SelectValue placeholder="Vse stranke" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem :value="null">Vse stranke</SelectItem>
-                    <SelectItem v-for="c in clients" :key="c.id" :value="c.id">
-                      {{ c.name }}
-                    </SelectItem>
-                  </SelectContent>
-                </Select>
+                <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>
@ -586,29 +604,21 @@ const numbersCount = computed(() => {
              <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>
-                  <div class="grid grid-cols-2 gap-2">
-                    <div class="space-y-2">
-                      <Label class="text-xs">Od</Label>
-                      <Input v-model="startDateFrom" type="date" />
-                    </div>
-                    <div class="space-y-2">
-                      <Label class="text-xs">Do</Label>
-                      <Input v-model="startDateTo" type="date" />
-                    </div>
-                  </div>
+                  <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>
-                  <div class="grid grid-cols-2 gap-2">
-                    <div class="space-y-2">
-                      <Label class="text-xs">Od</Label>
-                      <Input v-model="promiseDateFrom" type="date" />
-                    </div>
-                    <div class="space-y-2">
-                      <Label class="text-xs">Do</Label>
-                      <Input v-model="promiseDateTo" type="date" />
-                    </div>
-                  </div>
+                  <AppRangeDatePicker
+                    v-model="promiseDateRange"
+                    placeholder="Izberi obdobje"
+                    button-class="w-full"
+                    :number-of-months="1"
+                  />
                </div>
              </div>
            </div>
@ -621,8 +631,8 @@ const numbersCount = computed(() => {
              <div class="flex flex-wrap gap-4">
                <div class="flex items-center gap-2">
                  <Checkbox
-                    :checked="onlyMobile"
-                    @update:checked="
+                    :model-value="onlyMobile"
+                    @update:model-value="
                      (val) => {
                        onlyMobile = val;
                      }
@ -635,8 +645,8 @@ const numbersCount = computed(() => {
                </div>
                <div class="flex items-center gap-2">
                  <Checkbox
-                    :checked="onlyValidated"
-                    @update:checked="
+                    :model-value="onlyValidated"
+                    @update:model-value="
                      (val) => {
                        onlyValidated = val;
                      }
@ -653,11 +663,11 @@ const numbersCount = computed(() => {
            <!-- Action buttons -->
            <div class="flex items-center gap-2">
              <Button @click="loadContracts()">
-                <SearchIcon class="h-4 w-4 mr-2" />
+                <SearchIcon class="h-4 w-4" />
                Išči pogodbe
              </Button>
              <Button @click="resetFilters" variant="outline">
-                <XCircleIcon class="h-4 w-4 mr-2" />
+                <XCircleIcon class="h-4 w-4" />
                Počisti filtre
              </Button>
            </div>
@ -669,7 +679,7 @@ const numbersCount = computed(() => {
          <CardHeader>
            <div class="flex items-center justify-between">
              <div>
-                <CardTitle>Rezultati iskanja</CardTitle>
+                <CardTitle>Rezultati iskanja (do 500 zapisov)</CardTitle>
                <CardDescription v-if="contracts.meta.total > 0">
                  Najdeno {{ contracts.meta.total }}
                  {{
@ -689,7 +699,7 @@ const numbersCount = computed(() => {
                  variant="secondary"
                  class="text-sm"
                >
-                  <CheckCircle2Icon class="h-3 w-3 mr-1" />
+                  <CheckCircle2Icon class="h-3 w-3" />
                  Izbrano: {{ selectedContractIds.size }}
                </Badge>
                <Button
@ -702,7 +712,7 @@ const numbersCount = computed(() => {
                  @click="submitCreateFromContracts"
                  :disabled="selectedContractIds.size === 0 || creatingFromContracts"
                >
-                  <SaveIcon class="h-4 w-4 mr-2" />
+                  <SaveIcon class="h-4 w-4" />
                  Ustvari paket ({{ selectedContractIds.size }}
                  {{
                    selectedContractIds.size === 1
--- a/resources/js/Pages/Admin/Packages/Index.vue
+++ b/resources/js/Pages/Admin/Packages/Index.vue
@ -18,6 +18,7 @@ import {
 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 },
@ -29,7 +30,6 @@ const showDeleteDialog = ref(false);

 const columns = [
  { accessorKey: "id", header: "ID" },
-  { accessorKey: "uuid", header: "UUID" },
  { accessorKey: "name", header: "Ime" },
  { accessorKey: "type", header: "Tip" },
  { accessorKey: "status", header: "Status" },
@ -84,7 +84,7 @@ function confirmDelete() {
          </div>
          <Link :href="route('admin.packages.create')">
            <Button>
-              <PlusIcon class="h-4 w-4 mr-2" />
+              <PlusIcon class="h-4 w-4" />
              Nov paket
            </Button>
          </Link>
@ -111,10 +111,6 @@ function confirmDelete() {
        :meta="packages"
        route-name="admin.packages.index"
      >
-        <template #cell-uuid="{ row }">
-          <span class="font-mono text-xs text-muted-foreground">{{ row.uuid }}</span>
-        </template>
-
        <template #cell-name="{ row }">
          <span class="text-sm">{{ row.name ?? "—" }}</span>
        </template>
@ -128,7 +124,9 @@ function confirmDelete() {
        </template>

        <template #cell-finished_at="{ row }">
-          <span class="text-xs text-muted-foreground">{{ row.finished_at ?? "—" }}</span>
+          <span class="text-xs text-muted-foreground">{{
+            fmtDateTime(row.finished_at) ?? "—"
+          }}</span>
        </template>

        <template #cell-actions="{ row }">
@ -157,8 +155,10 @@ function confirmDelete() {
          <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.
+            <strong v-if="packageToDelete"
+              >#{{ packageToDelete.id }} -
+              {{ packageToDelete.name || "Brez imena" }}</strong
+            >? Tega dejanja ni mogoče razveljaviti.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
--- a/resources/js/Pages/Imports/Create.vue
+++ b/resources/js/Pages/Imports/Create.vue
@ -245,7 +245,7 @@ async function startImport() {

            <!-- Has Header Checkbox -->
            <div class="flex items-center space-x-2">
-              <Checkbox id="has-header" v-model:checked="form.has_header" />
+              <Checkbox id="has-header" :model-value="form.has_header" />
              <Label
                for="has-header"
                class="cursor-pointer text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
--- a/resources/js/Pages/Imports/Import.vue
+++ b/resources/js/Pages/Imports/Import.vue
@ -1317,7 +1317,8 @@ async function fetchSimulation() {
                <Checkbox
                  :id="'show-missing-checkbox'"
                  :checked="showMissingEnabled"
-                  @update:checked="
+                  :model-value="showMissingEnabled"
+                  @update:model-value="
                    (val) => {
                      showMissingEnabled = val;
                      saveImportOptions();
--- a/resources/js/Pages/Imports/Partials/ActionsBar.vue
+++ b/resources/js/Pages/Imports/Partials/ActionsBar.vue
@ -34,8 +34,8 @@ const emits = defineEmits([
      :disabled="!importId"
      title="Preznesi originalno uvozno datoteko"
    >
-      <ArrowDownTrayIcon class="h-4 w-4 mr-2" />
-      Presnemi datoteko
+      <ArrowDownTrayIcon class="h-4 w-4" />
+      Prenos datoteko
    </Button>

    <!-- Other action buttons - only when not completed -->
--- a/resources/js/Pages/Imports/Partials/MappingTable.vue
+++ b/resources/js/Pages/Imports/Partials/MappingTable.vue
@ -1,10 +1,24 @@
 <script setup>
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/Components/ui/table';
-import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/Components/ui/select';
-import { Checkbox } from '@/Components/ui/checkbox';
-import { Input } from '@/Components/ui/input';
-import { Badge } from '@/Components/ui/badge';
-import { ScrollArea } from '@/Components/ui/scroll-area';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/Components/ui/table";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/Components/ui/select";
+import { Checkbox } from "@/Components/ui/checkbox";
+import { Input } from "@/Components/ui/input";
+import { Badge } from "@/Components/ui/badge";
+import { ScrollArea } from "@/Components/ui/scroll-area";

 const props = defineProps({
  rows: Array,
@ -19,12 +33,12 @@ const props = defineProps({
  mappingError: String,
  show: { type: Boolean, default: true },
  fieldsForEntity: Function,
-})
-const emits = defineEmits(['update:rows','save'])
+});
+const emits = defineEmits(["update:rows", "save"]);

-function duplicateTarget(row){
-  if(!row || !row.entity || !row.field) return false
-  return props.duplicateTargets?.has?.(row.entity + '.' + row.field) || false
+function duplicateTarget(row) {
+  if (!row || !row.entity || !row.field) return false;
+  return props.duplicateTargets?.has?.(row.entity + "." + row.field) || false;
 }
 </script>
 <template>
@ -32,39 +46,63 @@ function duplicateTarget(row){
    <div class="flex items-center justify-between mb-2">
      <h3 class="font-semibold">
        Detected Columns
-        <Badge variant="outline" class="ml-2 text-[10px]">{{ detected?.has_header ? 'header' : 'positional' }}</Badge>
+        <Badge variant="outline" class="ml-2 text-[10px]">{{
+          detected?.has_header ? "header" : "positional"
+        }}</Badge>
      </h3>
      <div class="text-xs text-muted-foreground">
-        detected: {{ detected?.columns?.length || 0 }}, rows: {{ rows.length }}, delimiter: {{ detected?.delimiter || 'auto' }}
+        detected: {{ detected?.columns?.length || 0 }}, rows: {{ rows.length }},
+        delimiter: {{ detected?.delimiter || "auto" }}
      </div>
    </div>
-    <p v-if="detectedNote" class="text-xs text-muted-foreground mb-2">{{ detectedNote }}</p>
+    <p v-if="detectedNote" class="text-xs text-muted-foreground mb-2">
+      {{ detectedNote }}
+    </p>
    <div class="relative border rounded-lg">
      <ScrollArea class="h-[420px]">
        <Table>
          <TableHeader class="sticky top-0 z-10 bg-background">
            <TableRow class="hover:bg-transparent">
-              <TableHead class="w-[180px] bg-muted/95 backdrop-blur">Source column</TableHead>
+              <TableHead class="w-[180px] bg-muted/95 backdrop-blur"
+                >Source column</TableHead
+              >
              <TableHead class="w-[150px] bg-muted/95 backdrop-blur">Entity</TableHead>
              <TableHead class="w-[150px] bg-muted/95 backdrop-blur">Field</TableHead>
              <TableHead class="w-[140px] bg-muted/95 backdrop-blur">Meta key</TableHead>
              <TableHead class="w-[120px] bg-muted/95 backdrop-blur">Meta type</TableHead>
              <TableHead class="w-[120px] bg-muted/95 backdrop-blur">Transform</TableHead>
-              <TableHead class="w-[130px] bg-muted/95 backdrop-blur">Apply mode</TableHead>
-              <TableHead class="w-[60px] text-center bg-muted/95 backdrop-blur">Skip</TableHead>
+              <TableHead class="w-[130px] bg-muted/95 backdrop-blur"
+                >Apply mode</TableHead
+              >
+              <TableHead class="w-[60px] text-center bg-muted/95 backdrop-blur"
+                >Skip</TableHead
+              >
            </TableRow>
          </TableHeader>
          <TableBody>
-            <TableRow v-for="(row, idx) in rows" :key="idx" :class="duplicateTarget(row) ? 'bg-destructive/10' : ''">
+            <TableRow
+              v-for="(row, idx) in rows"
+              :key="idx"
+              :class="duplicateTarget(row) ? 'bg-destructive/10' : ''"
+            >
              <TableCell class="font-medium">{{ row.source_column }}</TableCell>
              <TableCell>
-              <Select :model-value="row.entity || ''" @update:model-value="(val) => row.entity = val || ''" :disabled="isCompleted">
+                <Select
+                  :model-value="row.entity || ''"
+                  @update:model-value="(val) => (row.entity = val || '')"
+                  :disabled="isCompleted"
+                >
                  <SelectTrigger class="h-8 text-xs">
                    <SelectValue placeholder="Select entity..." />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectGroup>
-                    <SelectItem v-for="opt in entityOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</SelectItem>
+                      <SelectItem
+                        v-for="opt in entityOptions"
+                        :key="opt.value"
+                        :value="opt.value"
+                        >{{ opt.label }}</SelectItem
+                      >
                    </SelectGroup>
                  </SelectContent>
                </Select>
@ -72,16 +110,26 @@ function duplicateTarget(row){
              <TableCell>
                <Select
                  :model-value="row.field || ''"
-                @update:model-value="(val) => row.field = val || ''" 
+                  @update:model-value="(val) => (row.field = val || '')"
                  :disabled="isCompleted"
                  :class="duplicateTarget(row) ? 'border-destructive' : ''"
                >
-                <SelectTrigger class="h-8 text-xs" :class="duplicateTarget(row) ? 'border-destructive bg-destructive/10' : ''">
+                  <SelectTrigger
+                    class="h-8 text-xs"
+                    :class="
+                      duplicateTarget(row) ? 'border-destructive bg-destructive/10' : ''
+                    "
+                  >
                    <SelectValue placeholder="Select field..." />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectGroup>
-                    <SelectItem v-for="f in fieldsForEntity(row.entity)" :key="f" :value="f">{{ f }}</SelectItem>
+                      <SelectItem
+                        v-for="f in fieldsForEntity(row.entity)"
+                        :key="f"
+                        :value="f"
+                        >{{ f }}</SelectItem
+                      >
                    </SelectGroup>
                  </SelectContent>
                </Select>
@ -101,7 +149,7 @@ function duplicateTarget(row){
                <Select
                  v-if="row.field === 'meta'"
                  :model-value="(row.options ||= {}).type || 'string'"
-                @update:model-value="(val) => (row.options ||= {}).type = val"
+                  @update:model-value="(val) => ((row.options ||= {}).type = val)"
                  :disabled="isCompleted"
                >
                  <SelectTrigger class="h-8 text-xs">
@ -119,7 +167,13 @@ function duplicateTarget(row){
                <span v-else class="text-muted-foreground text-xs">—</span>
              </TableCell>
              <TableCell>
-              <Select :model-value="row.transform || 'none'" @update:model-value="(val) => row.transform = val === 'none' ? '' : val" :disabled="isCompleted">
+                <Select
+                  :model-value="row.transform || 'none'"
+                  @update:model-value="
+                    (val) => (row.transform = val === 'none' ? '' : val)
+                  "
+                  :disabled="isCompleted"
+                >
                  <SelectTrigger class="h-8 text-xs">
                    <SelectValue />
                  </SelectTrigger>
@ -134,7 +188,11 @@ function duplicateTarget(row){
                </Select>
              </TableCell>
              <TableCell>
-              <Select :model-value="row.apply_mode || 'both'" @update:model-value="(val) => row.apply_mode = val" :disabled="isCompleted">
+                <Select
+                  :model-value="row.apply_mode || 'both'"
+                  @update:model-value="(val) => (row.apply_mode = val)"
+                  :disabled="isCompleted"
+                >
                  <SelectTrigger class="h-8 text-xs">
                    <SelectValue />
                  </SelectTrigger>
@ -149,20 +207,31 @@ function duplicateTarget(row){
                </Select>
              </TableCell>
              <TableCell class="text-center">
-              <Checkbox :checked="row.skip" @update:checked="(val) => row.skip = val" :disabled="isCompleted" />
+                <Checkbox
+                  :model-value="row.skip"
+                  @update:model-value="(val) => (row.skip = val)"
+                  :disabled="isCompleted"
+                />
              </TableCell>
            </TableRow>
          </TableBody>
        </Table>
      </ScrollArea>
    </div>
-    <div v-if="mappingSaved" class="text-sm text-emerald-700 mt-2 flex items-center gap-2">
+    <div
+      v-if="mappingSaved"
+      class="text-sm text-emerald-700 mt-2 flex items-center gap-2"
+    >
      <Badge variant="default" class="bg-emerald-600">Saved</Badge>
      <span>{{ mappingSavedCount }} mappings saved</span>
    </div>
-    <div v-else-if="mappingError" class="text-sm text-destructive mt-2">{{ mappingError }}</div>
+    <div v-else-if="mappingError" class="text-sm text-destructive mt-2">
+      {{ mappingError }}
+    </div>
    <div v-if="missingCritical?.length" class="mt-2">
-      <Badge variant="destructive" class="text-xs">Missing critical: {{ missingCritical.join(', ') }}</Badge>
+      <Badge variant="destructive" class="text-xs"
+        >Missing critical: {{ missingCritical.join(", ") }}</Badge
+      >
    </div>
  </div>
 </template>
--- a/resources/js/Pages/Testing/Index.vue
+++ b/resources/js/Pages/Testing/Index.vue
@ -1,13 +1,21 @@
 <script setup>
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import AppLayout from "@/Layouts/AppLayout.vue";
 import DataTableClient from "@/Components/DataTable/DataTableClient.vue";
 import DataTableExample from "../Examples/DataTableExample.vue";
+import { useForm } from "@inertiajs/vue3";
+import Checkbox from "@/Components/ui/checkbox/Checkbox.vue";

 const props = defineProps({
  example: { type: String, default: "Demo" },
 });

+const checkboxValue = ref(false);
+
+const testForm = useForm({
+  allowed: false,
+});
+
 // Dummy columns
 const columns = [
  { key: "id", label: "ID", sortable: true, class: "w-16" },
@ -53,10 +61,17 @@ function onRowClick(row) {
  // no-op demo; could show toast or details
  console.debug("Row clicked:", row);
 }
+
+watch(
+  () => testForm.allowed,
+  (newVal) => {
+    console.log(newVal);
+  }
+);
 </script>

 <template>
-  
-        <DataTableExample></DataTableExample>
-    
+  <AppLayout>
+    <Checkbox v-model:checked="testForm.allowed" />
+  </AppLayout>
 </template>