From aa375ce0dad3b74b3b16f58da5f7cb9eb3a18f2d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20Pocrnji=C4=8D?= <simon.pocrnjic@lume-solutions.si>
Date: Wed, 28 Jan 2026 20:12:26 +0100
Subject: [PATCH] bug fixes, sms, smaller screens elements were overlaping
 parent containers and updated document viewer

---
 .../DocumentsTable/DocumentUploadDialog.vue   | 203 ++++++++++--------
 .../DocumentsTable/DocumentViewerDialog.vue   | 121 ++++++++++-
 .../Components/PersonInfo/PersonInfoGrid.vue  |   2 +-
 .../PersonInfo/PersonInfoSmsDialog.vue        |  27 +--
 resources/js/Pages/Cases/Show.vue             |  14 +-
 resources/js/Pages/Phone/Case/Index.vue       |   8 +-
 6 files changed, 253 insertions(+), 122 deletions(-)

diff --git a/resources/js/Components/DocumentsTable/DocumentUploadDialog.vue b/resources/js/Components/DocumentsTable/DocumentUploadDialog.vue
index 63cdcc6..ae2abef 100644
--- a/resources/js/Components/DocumentsTable/DocumentUploadDialog.vue
+++ b/resources/js/Components/DocumentsTable/DocumentUploadDialog.vue
@@ -1,15 +1,27 @@
 <script setup>
-import CreateDialog from '@/Components/Dialogs/CreateDialog.vue'
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-import * as z from 'zod'
-import { ref, watch } from 'vue'
-import { router } from '@inertiajs/vue3'
-import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/Components/ui/form'
-import { Input } from '@/Components/ui/input'
-import { Textarea } from '@/Components/ui/textarea'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/Components/ui/select'
-import { Switch } from '@/Components/ui/switch'
+import CreateDialog from "@/Components/Dialogs/CreateDialog.vue";
+import { useForm } from "vee-validate";
+import { toTypedSchema } from "@vee-validate/zod";
+import * as z from "zod";
+import { ref, watch } from "vue";
+import { router } from "@inertiajs/vue3";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/Components/ui/form";
+import { Input } from "@/Components/ui/input";
+import { Textarea } from "@/Components/ui/textarea";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/Components/ui/select";
+import { Switch } from "@/Components/ui/switch";
 
 const props = defineProps({
   show: { type: Boolean, default: false },
@@ -17,112 +29,128 @@ const props = defineProps({
   // Optional list of contracts to allow attaching the document directly to a contract
   // Each item should have at least: { uuid, reference }
   contracts: { type: Array, default: () => [] },
-})
-const emit = defineEmits(['close', 'uploaded'])
+});
+const emit = defineEmits(["close", "uploaded"]);
 
-const MAX_SIZE = 25 * 1024 * 1024 // 25MB
-const ALLOWED_EXTS = ['doc','docx','pdf','txt','csv','xls','xlsx','jpeg','jpg','png']
+const MAX_SIZE = 25 * 1024 * 1024; // 25MB
+const ALLOWED_EXTS = [
+  "doc",
+  "docx",
+  "pdf",
+  "txt",
+  "csv",
+  "xls",
+  "xlsx",
+  "jpeg",
+  "jpg",
+  "png",
+];
 
-const formSchema = toTypedSchema(z.object({
-  name: z.string().min(1, 'Ime je obvezno'),
-  description: z.string().optional(),
-  file: z.instanceof(File).refine((file) => file.size > 0, 'Izberite datoteko'),
-  is_public: z.boolean().default(true),
-  contract_uuid: z.string().nullable().optional(),
-}))
+const formSchema = toTypedSchema(
+  z.object({
+    name: z.string().min(1, "Ime je obvezno"),
+    description: z.string().optional(),
+    file: z.instanceof(File).refine((file) => file.size > 0, "Izberite datoteko"),
+    is_public: z.boolean().default(true),
+    contract_uuid: z.string().nullable().optional(),
+  })
+);
 
 const form = useForm({
   validationSchema: formSchema,
   initialValues: {
-    name: '',
-    description: '',
+    name: "",
+    description: "",
     file: null,
     is_public: true,
     contract_uuid: null,
   },
-})
+});
 
-const localError = ref('')
+const localError = ref("");
 
-watch(() => props.show, (v) => {
-  if (!v) return
-  localError.value = ''
-  form.resetForm()
-})
+watch(
+  () => props.show,
+  (v) => {
+    if (!v) return;
+    localError.value = "";
+    form.resetForm();
+  }
+);
 
 const onFileChange = (e) => {
-  localError.value = ''
-  const f = e.target.files?.[0]
+  localError.value = "";
+  const f = e.target.files?.[0];
   if (!f) {
-    form.setFieldValue('file', null)
-    return
+    form.setFieldValue("file", null);
+    return;
   }
-  const ext = (f.name.split('.').pop() || '').toLowerCase()
+  const ext = (f.name.split(".").pop() || "").toLowerCase();
   if (!ALLOWED_EXTS.includes(ext)) {
-    localError.value = 'Nepodprta vrsta datoteke. Dovoljeno: ' + ALLOWED_EXTS.join(', ')
-    e.target.value = ''
-    form.setFieldValue('file', null)
-    return
+    localError.value = "Nepodprta vrsta datoteke. Dovoljeno: " + ALLOWED_EXTS.join(", ");
+    e.target.value = "";
+    form.setFieldValue("file", null);
+    return;
   }
   if (f.size > MAX_SIZE) {
-    localError.value = 'Datoteka je prevelika. Največja velikost je 25MB.'
-    e.target.value = ''
-    form.setFieldValue('file', null)
-    return
+    localError.value = "Datoteka je prevelika. Največja velikost je 25MB.";
+    e.target.value = "";
+    form.setFieldValue("file", null);
+    return;
   }
-  form.setFieldValue('file', f)
+  form.setFieldValue("file", f);
   if (!form.values.name) {
-    form.setFieldValue('name', f.name.replace(/\.[^.]+$/, ''))
+    form.setFieldValue("name", f.name.replace(/\.[^.]+$/, ""));
   }
-}
+};
 
 const submit = form.handleSubmit(async (values) => {
-  localError.value = ''
+  localError.value = "";
   if (!values.file) {
-    localError.value = 'Prosimo izberite datoteko.'
-    return
+    localError.value = "Prosimo izberite datoteko.";
+    return;
   }
-  const ext = (values.file.name.split('.').pop() || '').toLowerCase()
+  const ext = (values.file.name.split(".").pop() || "").toLowerCase();
   if (!ALLOWED_EXTS.includes(ext)) {
-    localError.value = 'Nepodprta vrsta datoteke. Dovoljeno: ' + ALLOWED_EXTS.join(', ')
-    return
+    localError.value = "Nepodprta vrsta datoteke. Dovoljeno: " + ALLOWED_EXTS.join(", ");
+    return;
   }
   if (values.file.size > MAX_SIZE) {
-    localError.value = 'Datoteka je prevelika. Največja velikost je 25MB.'
-    return
+    localError.value = "Datoteka je prevelika. Največja velikost je 25MB.";
+    return;
   }
 
-  const formData = new FormData()
-  formData.append('name', values.name)
-  formData.append('description', values.description || '')
-  formData.append('file', values.file)
-  formData.append('is_public', values.is_public ? '1' : '0')
+  const formData = new FormData();
+  formData.append("name", values.name);
+  formData.append("description", values.description || "");
+  formData.append("file", values.file);
+  formData.append("is_public", values.is_public ? "1" : "0");
   if (values.contract_uuid) {
-    formData.append('contract_uuid', values.contract_uuid)
+    formData.append("contract_uuid", values.contract_uuid);
   }
 
   router.post(props.postUrl, formData, {
     forceFormData: true,
     onSuccess: () => {
-      emit('uploaded')
-      emit('close')
-      form.resetForm()
+      emit("uploaded");
+      emit("close");
+      form.resetForm();
     },
     onError: (errors) => {
       // Set form errors if any
-      if (errors.name) form.setFieldError('name', errors.name)
-      if (errors.description) form.setFieldError('description', errors.description)
-      if (errors.file) form.setFieldError('file', errors.file)
-      if (errors.contract_uuid) form.setFieldError('contract_uuid', errors.contract_uuid)
+      if (errors.name) form.setFieldError("name", errors.name);
+      if (errors.description) form.setFieldError("description", errors.description);
+      if (errors.file) form.setFieldError("file", errors.file);
+      if (errors.contract_uuid) form.setFieldError("contract_uuid", errors.contract_uuid);
     },
-  })
-})
+  });
+});
 
-const close = () => emit('close')
+const close = () => emit("close");
 
 const onConfirm = () => {
-  submit()
-}
+  submit();
+};
 </script>
 
 <template>
@@ -137,7 +165,11 @@ const onConfirm = () => {
     @confirm="onConfirm"
   >
     <form @submit.prevent="submit" class="space-y-4">
-      <FormField v-if="props.contracts && props.contracts.length" v-slot="{ value, handleChange }" name="contract_uuid">
+      <FormField
+        v-if="props.contracts && props.contracts.length"
+        v-slot="{ value, handleChange }"
+        name="contract_uuid"
+      >
         <FormItem>
           <FormLabel>Pripiši k</FormLabel>
           <Select :model-value="value" @update:model-value="handleChange">
@@ -148,11 +180,7 @@ const onConfirm = () => {
             </FormControl>
             <SelectContent>
               <SelectItem :value="null">Primer</SelectItem>
-              <SelectItem
-                v-for="c in props.contracts"
-                :key="c.uuid"
-                :value="c.uuid"
-              >
+              <SelectItem v-for="c in props.contracts" :key="c.uuid" :value="c.uuid">
                 Pogodba: {{ c.reference }}
               </SelectItem>
             </SelectContent>
@@ -165,7 +193,11 @@ const onConfirm = () => {
         <FormItem>
           <FormLabel>Ime</FormLabel>
           <FormControl>
-            <Input id="doc_name" v-bind="componentField" />
+            <Input
+              id="doc_name"
+              v-bind="componentField"
+              class="w-full max-w-full overflow-hidden text-ellipsis"
+            />
           </FormControl>
           <FormMessage />
         </FormItem>
@@ -184,29 +216,24 @@ const onConfirm = () => {
       <FormField v-slot="{ value, handleChange }" name="file">
         <FormItem>
           <FormLabel>Datoteka (max 25MB)</FormLabel>
-          <FormControl>
+          <FormControl class="flex w-full">
             <Input
               id="doc_file"
               type="file"
               @change="onFileChange"
               accept=".doc,.docx,.pdf,.txt,.csv,.xls,.xlsx,.jpeg,.jpg,.png"
+              class="min-w-0 w-full"
             />
           </FormControl>
           <FormMessage />
           <div v-if="localError" class="text-sm text-red-600 mt-1">{{ localError }}</div>
-          <div v-if="value" class="text-sm text-gray-600 mt-1">
-            Izbrana datoteka: {{ value.name }} ({{ (value.size / 1024).toFixed(2) }} KB)
-          </div>
         </FormItem>
       </FormField>
 
       <FormField v-slot="{ value, handleChange }" name="is_public">
         <FormItem class="flex flex-row items-start space-x-3 space-y-0">
           <FormControl>
-            <Switch
-              :model-value="value"
-              @update:model-value="handleChange"
-            />
+            <Switch :model-value="value" @update:model-value="handleChange" />
           </FormControl>
           <div class="space-y-1 leading-none">
             <FormLabel>Javno</FormLabel>
diff --git a/resources/js/Components/DocumentsTable/DocumentViewerDialog.vue b/resources/js/Components/DocumentsTable/DocumentViewerDialog.vue
index 822672e..18c0b16 100644
--- a/resources/js/Components/DocumentsTable/DocumentViewerDialog.vue
+++ b/resources/js/Components/DocumentsTable/DocumentViewerDialog.vue
@@ -1,30 +1,131 @@
 <script setup>
+import { ref, computed, watch } from "vue";
 import {
   Dialog,
   DialogContent,
+  DialogDescription,
   DialogHeader,
   DialogTitle,
-} from '@/Components/ui/dialog'
-import { Button } from '@/Components/ui/button'
+} from "@/Components/ui/dialog";
+import { Button } from "@/Components/ui/button";
+import { Badge } from "../ui/badge";
 
 const props = defineProps({
   show: { type: Boolean, default: false },
-  src: { type: String, default: '' },
-  title: { type: String, default: 'Dokument' }
-})
-const emit = defineEmits(['close'])
+  src: { type: String, default: "" },
+  title: { type: String, default: "Dokument" },
+  mimeType: { type: String, default: "" },
+  filename: { type: String, default: "" },
+});
+const emit = defineEmits(["close"]);
+
+const textContent = ref("");
+const loading = ref(false);
+
+const fileExtension = computed(() => {
+  if (props.filename) {
+    return props.filename.split(".").pop()?.toLowerCase() || "";
+  }
+  return "";
+});
+
+const viewerType = computed(() => {
+  const ext = fileExtension.value;
+  const mime = props.mimeType.toLowerCase();
+
+  if (ext === "pdf" || mime === "application/pdf") return "pdf";
+  if (["jpg", "jpeg", "png", "gif", "webp"].includes(ext) || mime.startsWith("image/"))
+    return "image";
+  if (["txt", "csv", "xml"].includes(ext) || mime.startsWith("text/")) return "text";
+
+  return "unsupported";
+});
+
+const loadTextContent = async () => {
+  if (!props.src || viewerType.value !== "text") return;
+  loading.value = true;
+  try {
+    const response = await fetch(props.src);
+    textContent.value = await response.text();
+  } catch (e) {
+    textContent.value = "Napaka pri nalaganju vsebine.";
+  } finally {
+    loading.value = false;
+  }
+};
+
+watch(
+  () => [props.show, props.src],
+  ([show]) => {
+    if (show && viewerType.value === "text") {
+      loadTextContent();
+    }
+  },
+  { immediate: true }
+);
 </script>
 
 <template>
   <Dialog :open="show" @update:open="(open) => !open && $emit('close')">
-    <DialogContent class="max-w-4xl">
+    <DialogContent class="max-w-full xl:max-w-7xl">
       <DialogHeader>
-        <DialogTitle>{{ props.title }}</DialogTitle>
+        <DialogTitle>
+          {{ title }}
+        </DialogTitle>
+        <DialogDescription>
+          <Badge>
+            {{ fileExtension }}
+          </Badge>
+        </DialogDescription>
       </DialogHeader>
-      <div class="h-[70vh]">
-        <iframe v-if="props.src" :src="props.src" class="w-full h-full rounded border" />
+
+      <div class="h-[70vh] overflow-auto">
+        <!-- PDF Viewer (browser native) -->
+        <template v-if="viewerType === 'pdf' && props.src">
+          <iframe
+            :src="props.src"
+            class="w-full h-full rounded border"
+            type="application/pdf"
+          />
+        </template>
+
+        <!-- Image Viewer -->
+        <template v-else-if="viewerType === 'image' && props.src">
+          <img
+            :src="props.src"
+            :alt="props.title"
+            class="max-w-full max-h-full mx-auto object-contain"
+          />
+        </template>
+
+        <!-- Text/CSV/XML Viewer -->
+        <template v-else-if="viewerType === 'text'">
+          <div v-if="loading" class="flex items-center justify-center h-full">
+            <div class="animate-pulse text-gray-500">Nalaganje...</div>
+          </div>
+          <pre
+            v-else
+            class="p-4 bg-gray-50 dark:bg-gray-900 rounded border text-sm overflow-auto h-full whitespace-pre-wrap wrap-break-word"
+            >{{ textContent }}</pre
+          >
+        </template>
+
+        <!-- Unsupported -->
+        <template v-else-if="viewerType === 'unsupported'">
+          <div
+            class="flex flex-col items-center justify-center h-full gap-4 text-gray-500"
+          >
+            <span>Predogled ni na voljo za to vrsto datoteke.</span>
+            <Button as="a" :href="props.src" target="_blank" variant="outline">
+              Prenesi datoteko
+            </Button>
+          </div>
+        </template>
+
+        <!-- No source -->
         <div v-else class="text-sm text-gray-500">Ni dokumenta za prikaz.</div>
       </div>
+
       <div class="flex justify-end mt-4">
         <Button type="button" variant="outline" @click="$emit('close')">Zapri</Button>
       </div>
diff --git a/resources/js/Components/PersonInfo/PersonInfoGrid.vue b/resources/js/Components/PersonInfo/PersonInfoGrid.vue
index b5ca32a..9ab637c 100644
--- a/resources/js/Components/PersonInfo/PersonInfoGrid.vue
+++ b/resources/js/Components/PersonInfo/PersonInfoGrid.vue
@@ -299,7 +299,7 @@ const switchToTab = (tab) => {
 
 <template>
   <Tabs v-model="activeTab" class="mt-2">
-    <TabsList class="flex w-full bg-white gap-2 p-1">
+    <TabsList class="flex flex-row flex-wrap bg-white gap-2 p-1">
       <TabsTrigger
         value="person"
         class="border border-gray-200 data-[state=active]:bg-primary-50 data-[state=active]:text-primary-700 flex-1 py-2"
diff --git a/resources/js/Components/PersonInfo/PersonInfoSmsDialog.vue b/resources/js/Components/PersonInfo/PersonInfoSmsDialog.vue
index bbc6df5..764c20f 100644
--- a/resources/js/Components/PersonInfo/PersonInfoSmsDialog.vue
+++ b/resources/js/Components/PersonInfo/PersonInfoSmsDialog.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { ref, watch, computed } from "vue";
+import axios from "axios";
 import {
   Dialog,
   DialogContent,
@@ -301,27 +302,13 @@ const updateSmsFromSelection = async () => {
     const url = route("clientCase.sms.preview", {
       client_case: props.clientCaseUuid,
     });
-    const res = await fetch(url, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        "X-Requested-With": "XMLHttpRequest",
-        "X-CSRF-TOKEN":
-          document.querySelector('meta[name="csrf-token"]')?.getAttribute("content") ||
-          "",
-      },
-      body: JSON.stringify({
-        template_id: form.values.template_id,
-        contract_uuid: form.values.contract_uuid || null,
-      }),
-      credentials: "same-origin",
+    const { data } = await axios.post(url, {
+      template_id: form.values.template_id,
+      contract_uuid: form.values.contract_uuid || null,
     });
-    if (res.ok) {
-      const data = await res.json();
-      if (typeof data?.content === "string" && data.content.trim() !== "") {
-        form.setFieldValue("message", data.content);
-        return;
-      }
+    if (typeof data?.content === "string" && data.content.trim() !== "") {
+      form.setFieldValue("message", data.content);
+      return;
     }
   } catch (e) {
     // ignore and fallback
diff --git a/resources/js/Pages/Cases/Show.vue b/resources/js/Pages/Cases/Show.vue
index 40912a7..5ece64d 100644
--- a/resources/js/Pages/Cases/Show.vue
+++ b/resources/js/Pages/Cases/Show.vue
@@ -107,7 +107,7 @@ const onDocSaved = () => {
   router.reload({ only: ["documents"] });
 };
 
-const viewer = ref({ open: false, src: "", title: "" });
+const viewer = ref({ open: false, src: "", title: "", mimeType: "", filename: "" });
 const openViewer = (doc) => {
   const kind = classifyDocument(doc);
   const isContractDoc = (doc?.documentable_type || "").toLowerCase().includes("contract");
@@ -122,7 +122,13 @@ const openViewer = (doc) => {
             client_case: props.client_case.uuid,
             document: doc.uuid,
           });
-    viewer.value = { open: true, src: url, title: doc.original_name || doc.name };
+    viewer.value = {
+      open: true,
+      src: url,
+      title: doc.name || doc.original_name,
+      mimeType: doc.mime_type || "",
+      filename: doc.original_name || doc.name || "",
+    };
   } else {
     const url =
       isContractDoc && doc.contract_uuid
@@ -140,6 +146,8 @@ const openViewer = (doc) => {
 const closeViewer = () => {
   viewer.value.open = false;
   viewer.value.src = "";
+  viewer.value.mimeType = "";
+  viewer.value.filename = "";
 };
 
 const clientDetails = ref(false);
@@ -482,6 +490,8 @@ const submitAttachSegment = () => {
       :show="viewer.open"
       :src="viewer.src"
       :title="viewer.title"
+      :mime-type="viewer.mimeType"
+      :filename="viewer.filename"
       @close="closeViewer"
     />
   </AppLayout>
diff --git a/resources/js/Pages/Phone/Case/Index.vue b/resources/js/Pages/Phone/Case/Index.vue
index d402883..fad830c 100644
--- a/resources/js/Pages/Phone/Case/Index.vue
+++ b/resources/js/Pages/Phone/Case/Index.vue
@@ -67,7 +67,7 @@ const props = defineProps({
   completed_mode: { type: Boolean, default: false },
 });
 
-const viewer = reactive({ open: false, src: "", title: "" });
+const viewer = reactive({ open: false, src: "", title: "", mimeType: "", filename: "" });
 function openViewer(doc) {
   const kind = classifyDocument(doc);
   const isContractDoc = (doc?.documentable_type || "").toLowerCase().includes("contract");
@@ -85,6 +85,8 @@ function openViewer(doc) {
     viewer.open = true;
     viewer.src = url;
     viewer.title = doc.original_name || doc.name;
+    viewer.mimeType = doc.mime_type || "";
+    viewer.filename = doc.original_name || doc.name || "";
   } else {
     const url =
       isContractDoc && doc.contract_uuid
@@ -102,6 +104,8 @@ function openViewer(doc) {
 function closeViewer() {
   viewer.open = false;
   viewer.src = "";
+  viewer.mimeType = "";
+  viewer.filename = "";
 }
 
 function formatAmount(val) {
@@ -610,6 +614,8 @@ const clientSummary = computed(() => {
       :show="viewer.open"
       :src="viewer.src"
       :title="viewer.title"
+      :mime-type="viewer.mimeType"
+      :filename="viewer.filename"
       @close="closeViewer"
     />
     <ActivityDrawer