Phone view case updated

package.json

@@ -34,12 +34,13 @@
         "@headlessui/vue": "^1.7.23",
         "@heroicons/vue": "^2.2.0",
         "@internationalized/date": "^3.10.0",
+        "@lucide/vue": "^1.21.0",
         "@tanstack/vue-table": "^8.21.3",
         "@unovis/ts": "^1.6.2",
         "@unovis/vue": "^1.6.2",
         "@vee-validate/zod": "^4.15.1",
         "@vuepic/vue-datepicker": "^11.0.3",
-        "@vueuse/core": "^14.1.0",
+        "@vueuse/core": "^14.3.0",
         "apexcharts": "^4.7.0",
         "class-variance-authority": "^0.7.1",
         "clean": "^4.0.2",
@@ -51,11 +52,12 @@
         "monaco-editor": "^0.55.1",
         "preline": "^2.7.0",
         "quill": "^1.3.7",
-        "reka-ui": "^2.7.0",
+        "reka-ui": "^2.10.0",
         "tailwind-merge": "^3.4.0",
         "tailwindcss-animate": "^1.0.7",
         "tailwindcss-inner-border": "^0.2.0",
         "v-calendar": "^3.1.2",
+        "vaul-vue": "^0.4.1",
         "vee-validate": "^4.15.1",
         "vue-currency-input": "^3.2.1",
         "vue-multiselect": "^3.4.0",

resources/js/Components/DatePicker.vue

@@ -140,7 +140,7 @@ const open = ref(false);
       </Button>
     </PopoverTrigger>
     <PopoverContent class="w-auto p-0" align="start">
-      <Calendar locale="si-SI" v-model="calendarDate" :disabled="disabled" />
+      <Calendar locale="sl-SI" v-model="calendarDate" :disabled="disabled" />
     </PopoverContent>
   </Popover>
   <p v-if="error" class="mt-1 text-sm text-red-600">

resources/js/Components/DocumentsTable/DocumentViewerDrawer.vue

@@ -0,0 +1,427 @@
+<script setup>
+import { ref, computed, watch, onUnmounted } from "vue";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerFooter,
+  DrawerClose,
+} from "@/Components/ui/drawer";
+import { ScrollArea } from "@/Components/ui/scroll-area";
+import { Button } from "@/Components/ui/button";
+import { Badge } from "@/Components/ui/badge";
+import { Loader2, RotateCcwIcon } from "lucide-vue-next";
+import axios from "axios";
+
+const props = defineProps({
+  show: { type: Boolean, default: false },
+  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 previewGenerating = ref(false);
+const previewError = ref("");
+
+// Image viewer – zoom & pan state
+const containerRef = ref(null);
+const imageRef = ref(null);
+const imageScale = ref(1);
+const translateX = ref(0);
+const translateY = ref(0);
+const fitScale = ref(1);
+const isDragging = ref(false);
+const hasMoved = ref(false);
+const dragStartX = ref(0);
+const dragStartY = ref(0);
+const dragStartTX = ref(0);
+const dragStartTY = ref(0);
+
+const MAX_SCALE = 8;
+
+const imageCursorClass = computed(() => {
+  if (isDragging.value && hasMoved.value) return "cursor-grabbing";
+  if (imageScale.value > fitScale.value + 0.01) return "cursor-grab";
+  return "cursor-default";
+});
+
+const initImageView = () => {
+  const container = containerRef.value;
+  const img = imageRef.value;
+  if (!container || !img) return;
+  const cW = container.clientWidth;
+  const cH = container.clientHeight;
+  const iW = img.naturalWidth || cW;
+  const iH = img.naturalHeight || cH;
+  const fs = Math.min(1, cW / iW, cH / iH);
+  fitScale.value = fs;
+  imageScale.value = fs;
+  translateX.value = (cW - iW * fs) / 2;
+  translateY.value = (cH - iH * fs) / 2;
+};
+
+const resetImageView = () => initImageView();
+
+const clampTranslate = (tx, ty, scale) => {
+  const container = containerRef.value;
+  const img = imageRef.value;
+  if (!container || !img) return { tx, ty };
+  const cW = container.clientWidth;
+  const cH = container.clientHeight;
+  const iW = img.naturalWidth * scale;
+  const iH = img.naturalHeight * scale;
+  const minX = iW >= cW ? cW - iW : (cW - iW) / 2;
+  const maxX = iW >= cW ? 0 : (cW - iW) / 2;
+  const minY = iH >= cH ? cH - iH : (cH - iH) / 2;
+  const maxY = iH >= cH ? 0 : (cH - iH) / 2;
+  return {
+    tx: Math.min(maxX, Math.max(minX, tx)),
+    ty: Math.min(maxY, Math.max(minY, ty)),
+  };
+};
+
+const zoomAt = (mx, my, factor) => {
+  const raw = imageScale.value * factor;
+  const newScale = Math.min(MAX_SCALE, Math.max(fitScale.value, raw));
+  if (newScale === imageScale.value) return;
+  let tx = mx - ((mx - translateX.value) / imageScale.value) * newScale;
+  let ty = my - ((my - translateY.value) / imageScale.value) * newScale;
+  const clamped = clampTranslate(tx, ty, newScale);
+  translateX.value = clamped.tx;
+  translateY.value = clamped.ty;
+  imageScale.value = newScale;
+};
+
+const mousePos = (e) => {
+  const rect = containerRef.value.getBoundingClientRect();
+  return { mx: e.clientX - rect.left, my: e.clientY - rect.top };
+};
+
+const handleImageLoad = () => initImageView();
+
+const handleWheel = (e) => {
+  e.preventDefault();
+  const { mx, my } = mousePos(e);
+  zoomAt(mx, my, e.deltaY < 0 ? 1.2 : 1 / 1.2);
+};
+
+// Touch pinch-to-zoom
+let lastTouchDist = null;
+let lastTouchMidX = null;
+let lastTouchMidY = null;
+
+const getTouchDist = (touches) => {
+  const dx = touches[0].clientX - touches[1].clientX;
+  const dy = touches[0].clientY - touches[1].clientY;
+  return Math.hypot(dx, dy);
+};
+
+const handleTouchStart = (e) => {
+  if (e.touches.length === 2) {
+    lastTouchDist = getTouchDist(e.touches);
+    const rect = containerRef.value.getBoundingClientRect();
+    lastTouchMidX = (e.touches[0].clientX + e.touches[1].clientX) / 2 - rect.left;
+    lastTouchMidY = (e.touches[0].clientY + e.touches[1].clientY) / 2 - rect.top;
+    e.preventDefault();
+  } else if (e.touches.length === 1) {
+    isDragging.value = true;
+    hasMoved.value = false;
+    dragStartX.value = e.touches[0].clientX;
+    dragStartY.value = e.touches[0].clientY;
+    dragStartTX.value = translateX.value;
+    dragStartTY.value = translateY.value;
+  }
+};
+
+const handleTouchMove = (e) => {
+  if (e.touches.length === 2 && lastTouchDist !== null) {
+    e.preventDefault();
+    const dist = getTouchDist(e.touches);
+    const factor = dist / lastTouchDist;
+    const rect = containerRef.value.getBoundingClientRect();
+    const midX = (e.touches[0].clientX + e.touches[1].clientX) / 2 - rect.left;
+    const midY = (e.touches[0].clientY + e.touches[1].clientY) / 2 - rect.top;
+    zoomAt(midX, midY, factor);
+    lastTouchDist = dist;
+    lastTouchMidX = midX;
+    lastTouchMidY = midY;
+  } else if (e.touches.length === 1 && isDragging.value) {
+    const dx = e.touches[0].clientX - dragStartX.value;
+    const dy = e.touches[0].clientY - dragStartY.value;
+    if (!hasMoved.value && (Math.abs(dx) > 3 || Math.abs(dy) > 3)) {
+      hasMoved.value = true;
+    }
+    if (hasMoved.value) {
+      const clamped = clampTranslate(
+        dragStartTX.value + dx,
+        dragStartTY.value + dy,
+        imageScale.value
+      );
+      translateX.value = clamped.tx;
+      translateY.value = clamped.ty;
+    }
+  }
+};
+
+const handleTouchEnd = () => {
+  lastTouchDist = null;
+  isDragging.value = false;
+  setTimeout(() => { hasMoved.value = false; }, 0);
+};
+
+const onMouseMove = (e) => {
+  if (!isDragging.value) return;
+  const dx = e.clientX - dragStartX.value;
+  const dy = e.clientY - dragStartY.value;
+  if (!hasMoved.value && (Math.abs(dx) > 3 || Math.abs(dy) > 3)) hasMoved.value = true;
+  if (hasMoved.value) {
+    const clamped = clampTranslate(
+      dragStartTX.value + dx,
+      dragStartTY.value + dy,
+      imageScale.value
+    );
+    translateX.value = clamped.tx;
+    translateY.value = clamped.ty;
+  }
+};
+
+const onMouseUp = () => {
+  isDragging.value = false;
+  setTimeout(() => { hasMoved.value = false; }, 0);
+  window.removeEventListener("mousemove", onMouseMove);
+  window.removeEventListener("mouseup", onMouseUp);
+};
+
+const handleMouseDown = (e) => {
+  if (e.button !== 0) return;
+  isDragging.value = true;
+  hasMoved.value = false;
+  dragStartX.value = e.clientX;
+  dragStartY.value = e.clientY;
+  dragStartTX.value = translateX.value;
+  dragStartTY.value = translateY.value;
+  window.addEventListener("mousemove", onMouseMove);
+  window.addEventListener("mouseup", onMouseUp);
+};
+
+onUnmounted(() => {
+  window.removeEventListener("mousemove", onMouseMove);
+  window.removeEventListener("mouseup", onMouseUp);
+});
+
+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 (["doc", "docx"].includes(ext) || mime.includes("word") || mime.includes("msword"))
+    return "docx";
+  if (["jpg", "jpeg", "png", "gif", "webp", "heic", "heif"].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 axios.get(props.src);
+    textContent.value = response.data;
+  } catch {
+    textContent.value = "Napaka pri nalaganju vsebine.";
+  } finally {
+    loading.value = false;
+  }
+};
+
+const docxPreviewUrl = ref("");
+const loadDocxPreview = async () => {
+  if (!props.src || viewerType.value !== "docx") return;
+  previewGenerating.value = true;
+  previewError.value = "";
+  docxPreviewUrl.value = "";
+  const maxRetries = 15;
+  const retryDelay = 2000;
+  for (let attempt = 0; attempt < maxRetries; attempt++) {
+    try {
+      const response = await axios.head(props.src, { validateStatus: () => true });
+      if (response.status >= 200 && response.status < 300) {
+        docxPreviewUrl.value = props.src;
+        previewGenerating.value = false;
+        return;
+      } else if (response.status === 202) {
+        await new Promise((resolve) => setTimeout(resolve, retryDelay));
+      } else {
+        previewError.value = "Napaka pri nalaganju predogleda.";
+        previewGenerating.value = false;
+        return;
+      }
+    } catch {
+      previewError.value = "Napaka pri nalaganju predogleda.";
+      previewGenerating.value = false;
+      return;
+    }
+  }
+  previewError.value = "Predogled ni na voljo. Prosimo poskusite znova kasneje.";
+  previewGenerating.value = false;
+};
+
+watch(
+  () => [props.show, props.src],
+  ([show]) => {
+    if (show && viewerType.value === "text") loadTextContent();
+    if (show && viewerType.value === "docx") loadDocxPreview();
+    if (!show) {
+      previewGenerating.value = false;
+      previewError.value = "";
+      docxPreviewUrl.value = "";
+      imageScale.value = 1;
+      translateX.value = 0;
+      translateY.value = 0;
+      fitScale.value = 1;
+    }
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <Drawer :open="show" @update:open="(val) => !val && emit('close')">
+    <DrawerContent class="flex flex-col h-[95vh]">
+      <DrawerHeader class="border-b px-4 py-3 shrink-0">
+        <DrawerTitle class="truncate pr-4">{{ title }}</DrawerTitle>
+        <div class="mt-1">
+          <Badge>{{ fileExtension }}</Badge>
+        </div>
+      </DrawerHeader>
+
+      <!-- Viewer area: flex-1 + min-h-0 works because parent has fixed h-[95vh] -->
+      <div class="flex-1 min-h-0 overflow-hidden">
+        <!-- PDF Viewer -->
+        <template v-if="viewerType === 'pdf' && src">
+          <iframe :src="src" class="w-full h-full" type="application/pdf" />
+        </template>
+
+        <!-- DOCX Viewer (converted to PDF by backend) -->
+        <template v-else-if="viewerType === 'docx'">
+          <div
+            v-if="previewGenerating"
+            class="flex flex-col items-center justify-center h-full gap-4"
+          >
+            <Loader2 class="h-8 w-8 animate-spin text-indigo-600" />
+            <span class="text-gray-500">Priprava predogleda dokumenta...</span>
+          </div>
+          <div
+            v-else-if="previewError"
+            class="flex flex-col items-center justify-center h-full gap-4 text-gray-500"
+          >
+            <span>{{ previewError }}</span>
+            <Button as="a" :href="src" target="_blank" variant="outline">
+              Prenesi datoteko
+            </Button>
+          </div>
+          <iframe
+            v-else-if="docxPreviewUrl"
+            :src="docxPreviewUrl"
+            class="w-full h-full"
+            type="application/pdf"
+          />
+        </template>
+
+        <!-- Image Viewer with touch pinch-to-zoom -->
+        <template v-else-if="viewerType === 'image' && src">
+          <div
+            ref="containerRef"
+            class="relative h-full overflow-hidden select-none"
+            :class="imageCursorClass"
+            @mousedown="handleMouseDown"
+            @wheel.prevent="handleWheel"
+            @touchstart.prevent="handleTouchStart"
+            @touchmove.prevent="handleTouchMove"
+            @touchend="handleTouchEnd"
+          >
+            <img
+              ref="imageRef"
+              :src="src"
+              :alt="title"
+              draggable="false"
+              class="absolute top-0 left-0 max-w-none"
+              :style="{
+                transformOrigin: '0 0',
+                transform: `translate(${translateX}px, ${translateY}px) scale(${imageScale})`,
+                transition: isDragging ? 'none' : 'transform 0.12s ease',
+              }"
+              @load="handleImageLoad"
+            />
+            <div
+              class="absolute bottom-2 right-2 bg-black/50 text-white text-xs px-2 py-1 rounded pointer-events-none"
+            >
+              {{ Math.round(imageScale * 100) }}%
+            </div>
+            <Button
+              v-if="imageScale > fitScale + 0.01"
+              size="icon-sm"
+              variant="secondary"
+              class="absolute top-2 right-2 opacity-70 hover:opacity-100"
+              title="Ponastavi pogled"
+              @click.stop="resetImageView"
+            >
+              <RotateCcwIcon class="h-3 w-3" />
+            </Button>
+            <div
+              v-if="imageScale <= fitScale + 0.01"
+              class="absolute bottom-2 left-1/2 -translate-x-1/2 bg-black/40 text-white text-xs px-2 py-1 rounded pointer-events-none select-none"
+            >
+              Ščipni za povečavo · Povleči za premik
+            </div>
+          </div>
+        </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>
+          <ScrollArea v-else class="h-full">
+            <pre
+              class="p-4 bg-gray-50 dark:bg-gray-900 text-sm whitespace-pre-wrap wrap-break-word"
+              >{{ textContent }}</pre
+            >
+          </ScrollArea>
+        </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="src" target="_blank" variant="outline">
+              Prenesi datoteko
+            </Button>
+          </div>
+        </template>
+
+        <div v-else class="flex items-center justify-center h-full text-sm text-gray-500">
+          Ni dokumenta za prikaz.
+        </div>
+      </div>
+
+      <DrawerFooter class="border-t shrink-0 px-4 py-3">
+        <DrawerClose as-child>
+          <Button variant="outline" class="w-full" @click="emit('close')">Zapri</Button>
+        </DrawerClose>
+      </DrawerFooter>
+    </DrawerContent>
+  </Drawer>
+</template>

resources/js/Components/PersonDetailPhone.vue

@@ -1,13 +1,17 @@
 <script setup>
 import { computed, ref, watch } from "vue";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import {
-  faLocationDot,
-  faPhone,
-  faEnvelope,
-  faLandmark,
-  faChevronDown,
-} from "@fortawesome/free-solid-svg-icons";
+  MapPin,
+  Phone,
+  Mail,
+  Landmark,
+  ChevronDown,
+  CheckIcon,
+  CircleCheckIcon,
+  CircleCheckBigIcon,
+} from "lucide-vue-next";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/Components/ui/tabs";
+import Badge from "./ui/badge/Badge.vue";
 
 const props = defineProps({
   person: { type: Object, required: true },
@@ -76,13 +80,6 @@ watch(
     }
   }
 );
-
-function maskIban(iban) {
-  if (!iban || typeof iban !== "string") return null;
-  const clean = iban.replace(/\s+/g, "");
-  if (clean.length <= 8) return clean;
-  return `${clean.slice(0, 4)} **** **** ${clean.slice(-4)}`;
-}
 </script>
 
 <template>
@@ -90,11 +87,11 @@ function maskIban(iban) {
   <div class="text-sm">
     <div class="mt-2 flex flex-wrap gap-1.5">
       <span v-if="primaryAddress" class="pill pill-slate" title="Naslov">
-        <FontAwesomeIcon :icon="faLocationDot" class="w-4 h-4 mr-1" />
+        <MapPin class="w-4 h-4 mr-1" />
         <span class="truncate max-w-36">{{ primaryAddress.address }}</span>
       </span>
       <span v-if="summaryPhones.length" class="pill pill-indigo" title="Telefon">
-        <FontAwesomeIcon :icon="faPhone" class="w-4 h-4 mr-1" />
+        <Phone class="w-4 h-4 mr-1" />
         {{ summaryPhones[0].nu
         }}<span
           v-if="
@@ -108,11 +105,11 @@ function maskIban(iban) {
         >
       </span>
       <span v-if="primaryEmail && showMore" class="pill pill-default" title="E-pošta">
-        <FontAwesomeIcon :icon="faEnvelope" class="w-4 h-4 mr-1" />
+        <Mail class="w-4 h-4 mr-1" />
         <span class="truncate max-w-36">{{ primaryEmail }}</span>
       </span>
       <span v-if="bankIban" class="pill pill-emerald" title="TRR (zadnji dodan)">
-        <FontAwesomeIcon :icon="faLandmark" class="w-4 h-4 mr-1" />
+        <Landmark class="w-4 h-4 mr-1" />
         {{ bankIban }}
       </span>
     </div>
@@ -142,8 +139,7 @@ function maskIban(iban) {
       class="mt-3 inline-flex items-center text-[11px] font-medium text-indigo-600 hover:text-indigo-700 focus:outline-none"
       @click="showMore = !showMore"
     >
-      <FontAwesomeIcon
-        :icon="faChevronDown"
+      <ChevronDown
         :class="[
           'w-3 h-3 mr-1 transition-transform',
           showMore ? 'rotate-180' : 'rotate-0',
@@ -154,83 +150,91 @@ function maskIban(iban) {
   </div>
 
   <!-- Segmented Tabs -->
-  <div class="mt-5">
-    <div class="relative">
-      <div
-        class="flex w-full text-[11px] font-medium rounded-lg border bg-gray-50 overflow-hidden"
-      >
-        <button
-          type="button"
-          @click="activeTab = 'addresses'"
-          :class="['seg-btn', activeTab === 'addresses' && 'seg-active']"
-        >
-          <FontAwesomeIcon :icon="faLocationDot" class="w-3.5 h-3.5 mr-1 shrink-0" />
+  <div class="mt-4 text-sm">
+    <Tabs :default-value="activeTab" @update:model-value="activeTab = $event">
+      <TabsList class="w-full">
+        <TabsTrigger value="addresses" class="flex-1">
+          <div class="flex flex-row items-center gap-1">
+            <MapPin class="w-3.5 h-3.5 shrink-0" />
             <span class="truncate">Naslovi ({{ allAddresses.length }})</span>
-        </button>
-        <button
-          type="button"
-          @click="activeTab = 'phones'"
-          :class="['seg-btn', activeTab === 'phones' && 'seg-active']"
-        >
-          <FontAwesomeIcon :icon="faPhone" class="w-3.5 h-3.5 mr-1 shrink-0" />
+          </div>
+        </TabsTrigger>
+        <TabsTrigger value="phones" class="flex-1">
+          <div class="flex flex-row items-center gap-1">
+            <Phone class="w-3.5 h-3.5 shrink-0" />
             <span class="truncate">Telefoni ({{ allPhones.length }})</span>
-        </button>
-        <button
-          type="button"
-          @click="activeTab = 'emails'"
-          :class="['seg-btn', activeTab === 'emails' && 'seg-active']"
-        >
-          <FontAwesomeIcon :icon="faEnvelope" class="w-3.5 h-3.5 mr-1 shrink-0" />
-          <span class="truncate">E‑pošta ({{ allEmails.length }})</span>
-        </button>
           </div>
+        </TabsTrigger>
+        <TabsTrigger value="emails" class="flex-1">
+          <div class="flex flex-row items-center gap-1">
+            <Mail class="w-3.5 h-3.5 shrink-0" />
+            <span class="truncate">E&#8209;pošta ({{ allEmails.length }})</span>
           </div>
+        </TabsTrigger>
+      </TabsList>
 
-    <div class="mt-3 rounded-md border bg-white/60 p-2">
-      <!-- Addresses -->
-      <div v-if="activeTab === 'addresses'">
-        <div v-if="!allAddresses.length" class="empty">Ni naslovov.</div>
-        <div v-for="(a, idx) in allAddresses" :key="a.id || idx" class="item-row">
-          <div class="font-medium text-gray-800">{{ a.address }}</div>
-          <div v-if="a.country" class="sub">{{ a.country }}</div>
-        </div>
-      </div>
-      <!-- Phones -->
-      <div v-else-if="activeTab === 'phones'">
-        <div v-if="!allPhones.length" class="empty">Ni telefonov.</div>
-        <div v-for="(p, idx) in allPhones" :key="p.id || idx" class="item-row">
-          <div class="font-medium text-gray-800">
-            {{ p.nu }}
-            <span
-              v-if="(p.type_id && phoneTypes[p.type_id]) || p.type?.name"
-              class="sub ml-1"
-              >({{ p.type?.name || phoneTypes[p.type_id] }})</span
+      <TabsContent value="addresses" class="mt-2 rounded-md border">
+        <div v-if="!allAddresses.length" class="p-2 text-center">Ni naslovov.</div>
+        <div
+          v-for="(a, idx) in allAddresses"
+          :key="a.id || idx"
+          class="flex flex-row gap-1 items-center p-2 border-b last:border-0"
         >
+          <p class="font-bold wrap-break-word max-w-60">{{ a.address }}</p>
+          <Badge v-if="a.country" variant="outline" class="text-xs">{{
+            a.country
+          }}</Badge>
         </div>
+      </TabsContent>
+
+      <TabsContent value="phones" class="mt-2 rounded-md border">
+        <div v-if="!allPhones.length" class="p-2 text-center">Ni telefonov.</div>
+        <div
+          v-for="(p, idx) in allPhones"
+          :key="p.id || idx"
+          class="flex flex-row gap-1 items-center p-2 border-b last:border-0"
+        >
+          <p class="font-bold wrap-break-word max-w-60">{{ p.nu }}</p>
+
+          <CircleCheckBigIcon v-if="p.validated" class="text-green-500" :size="16" />
+          <Badge variant="outline" v-if="p.label" class="text-xs font-medium">{{
+            p.label
+          }}</Badge>
+
+          <Badge
+            variant="outline"
+            v-if="(p.type_id && phoneTypes[p.type_id]) || p.type?.name"
+          >
+            {{ p.type?.name || phoneTypes[p.type_id] }}
+          </Badge>
         </div>
+      </TabsContent>
+
+      <TabsContent value="emails" class="mt-2 rounded-md border">
+        <div v-if="!allEmails.length" class="p-2 text-center">Ni e-poštnih naslovov.</div>
+        <div
+          v-for="(e, idx) in allEmails"
+          :key="e.id || idx"
+          class="flex flex-row gap-1 items-center p-2 border-b last:border-0"
+        >
+          <p class="font-bold wrap-break-word max-w-60">
+            {{ e.value }}
+          </p>
+          <CircleCheckBigIcon v-if="e.valid" class="text-green-500" :size="16" />
+          <Badge v-if="e.label" variant="outline">({{ e.label }})</Badge>
         </div>
-      <!-- Emails -->
-      <div v-else-if="activeTab === 'emails'">
-        <div v-if="!allEmails.length" class="empty">Ni e-poštnih naslovov.</div>
-        <div v-for="(e, idx) in allEmails" :key="e.id || idx" class="item-row">
-          <div class="font-medium text-gray-800">
-            {{ e.value }}<span v-if="e.label" class="sub ml-1">({{ e.label }})</span>
-          </div>
-        </div>
-      </div>
-      <!-- (TRR tab removed; last bank account surfaced in summary) -->
-    </div>
+      </TabsContent>
+    </Tabs>
   </div>
 </template>
 
 <style scoped>
-/* Basic utility replacements (no Tailwind processor here) */
 .pill {
   display: inline-flex;
   align-items: center;
   max-width: 100%;
   border-radius: 9999px;
-  padding: 0.35rem 0.75rem; /* slightly larger */
+  padding: 0.35rem 0.75rem;
   font-size: 12px;
   font-weight: 600;
   line-height: 1.15;
@@ -253,36 +257,6 @@ function maskIban(iban) {
   color: #047857;
 }
 
-.seg-btn {
-  flex: 1 1 0;
-  min-width: 0; /* allow flex item to shrink below intrinsic size */
-  white-space: nowrap;
-  padding: 0.5rem 0.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.25rem;
-  border-right: 1px solid #e5e7eb;
-  font-size: 11px;
-  background: transparent;
-  color: #4b5563;
-  transition: background 0.15s, color 0.15s;
-  overflow: hidden;
-}
-.seg-btn:last-child {
-  border-right: none;
-}
-.seg-btn:hover {
-  background: #ffffffb3;
-  color: #1f2937;
-}
-.seg-active {
-  background: #fff;
-  color: #111827;
-  font-weight: 600;
-  box-shadow: inset 0 0 0 1px #e5e7eb;
-}
-
 .item-row {
   padding: 0.375rem 0;
   border-bottom: 1px dashed #e5e7eb;

resources/js/Components/ui/drawer/Drawer.vue

@@ -0,0 +1,41 @@
+<script setup>
+import { useForwardPropsEmits } from "reka-ui";
+import { DrawerRoot } from "vaul-vue";
+
+const props = defineProps({
+  activeSnapPoint: { type: [Number, String, null], required: false },
+  closeThreshold: { type: Number, required: false },
+  shouldScaleBackground: { type: Boolean, required: false, default: true },
+  setBackgroundColorOnScale: { type: Boolean, required: false },
+  scrollLockTimeout: { type: Number, required: false },
+  fixed: { type: Boolean, required: false },
+  dismissible: { type: Boolean, required: false },
+  modal: { type: Boolean, required: false },
+  open: { type: Boolean, required: false },
+  defaultOpen: { type: Boolean, required: false },
+  nested: { type: Boolean, required: false },
+  direction: { type: String, required: false },
+  noBodyStyles: { type: Boolean, required: false },
+  handleOnly: { type: Boolean, required: false },
+  preventScrollRestoration: { type: Boolean, required: false },
+  snapPoints: { type: Array, required: false },
+  fadeFromIndex: { type: null, required: false },
+});
+
+const emits = defineEmits([
+  "drag",
+  "release",
+  "close",
+  "update:open",
+  "update:activeSnapPoint",
+  "animationEnd",
+]);
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DrawerRoot v-bind="forwarded">
+    <slot />
+  </DrawerRoot>
+</template>

resources/js/Components/ui/drawer/DrawerContent.vue

@@ -0,0 +1,44 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { useForwardPropsEmits } from "reka-ui";
+import { DrawerContent, DrawerPortal } from "vaul-vue";
+import { cn } from "@/lib/utils";
+import DrawerOverlay from "./DrawerOverlay.vue";
+
+const props = defineProps({
+  forceMount: { type: Boolean, required: false },
+  disableOutsidePointerEvents: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+});
+const emits = defineEmits([
+  "escapeKeyDown",
+  "pointerDownOutside",
+  "focusOutside",
+  "interactOutside",
+  "openAutoFocus",
+  "closeAutoFocus",
+]);
+
+const delegatedProps = reactiveOmit(props, "class");
+const forwardedProps = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerContent
+      v-bind="forwardedProps"
+      :class="
+        cn(
+          'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',
+          props.class,
+        )
+      "
+    >
+      <div class="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      <slot />
+    </DrawerContent>
+  </DrawerPortal>
+</template>

resources/js/Components/ui/drawer/DrawerDescription.vue

@@ -0,0 +1,22 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { DrawerDescription } from "vaul-vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+});
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <DrawerDescription
+    v-bind="delegatedProps"
+    :class="cn('text-sm text-muted-foreground', props.class)"
+  >
+    <slot />
+  </DrawerDescription>
+</template>

resources/js/Components/ui/drawer/DrawerFooter.vue

@@ -0,0 +1,13 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: { type: null, required: false },
+});
+</script>
+
+<template>
+  <div :class="cn('mt-auto flex flex-col gap-2 p-4', props.class)">
+    <slot />
+  </div>
+</template>

resources/js/Components/ui/drawer/DrawerHeader.vue

@@ -0,0 +1,13 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: { type: null, required: false },
+});
+</script>
+
+<template>
+  <div :class="cn('grid gap-1.5 p-4 text-center sm:text-left', props.class)">
+    <slot />
+  </div>
+</template>

resources/js/Components/ui/drawer/DrawerOverlay.vue

@@ -0,0 +1,21 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { DrawerOverlay } from "vaul-vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  forceMount: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+});
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <DrawerOverlay
+    v-bind="delegatedProps"
+    :class="cn('fixed inset-0 z-50 bg-black/80', props.class)"
+  />
+</template>

resources/js/Components/ui/drawer/DrawerTitle.vue

@@ -0,0 +1,24 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { DrawerTitle } from "vaul-vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+});
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <DrawerTitle
+    v-bind="delegatedProps"
+    :class="
+      cn('text-lg font-semibold leading-none tracking-tight', props.class)
+    "
+  >
+    <slot />
+  </DrawerTitle>
+</template>

resources/js/Components/ui/drawer/index.js

@@ -0,0 +1,8 @@
+export { default as Drawer } from "./Drawer.vue";
+export { default as DrawerContent } from "./DrawerContent.vue";
+export { default as DrawerDescription } from "./DrawerDescription.vue";
+export { default as DrawerFooter } from "./DrawerFooter.vue";
+export { default as DrawerHeader } from "./DrawerHeader.vue";
+export { default as DrawerOverlay } from "./DrawerOverlay.vue";
+export { default as DrawerTitle } from "./DrawerTitle.vue";
+export { DrawerClose, DrawerPortal, DrawerTrigger } from "vaul-vue";

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

@@ -0,0 +1,582 @@
+<script setup>
+import DatePicker from "@/Components/DatePicker.vue";
+import CurrencyInput from "@/Components/CurrencyInput.vue";
+import { useForm as useInertiaForm, usePage } from "@inertiajs/vue3";
+import { Textarea } from "@/Components/ui/textarea";
+import { Label } from "@/Components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/Components/ui/select";
+import { Switch } from "@/Components/ui/switch";
+import { Button } from "@/Components/ui/button";
+import AppMultiSelect from "@/Components/app/ui/AppMultiSelect.vue";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerFooter,
+  DrawerClose,
+} from "@/Components/ui/drawer";
+import { ScrollArea } from "@/Components/ui/scroll-area";
+import { ref, watch, computed } from "vue";
+
+const props = defineProps({
+  show: { type: Boolean, default: false },
+  client_case: { type: Object, required: true },
+  actions: { type: Array, default: () => [] },
+  contractUuid: { type: String, default: null },
+  phoneMode: { type: Boolean, default: false },
+  documents: { type: Array, default: null },
+  contracts: { type: Array, default: null },
+});
+
+const page = usePage();
+
+const decisions = ref(
+  Array.isArray(props.actions) && props.actions.length > 0
+    ? props.actions[0].decisions || []
+    : []
+);
+
+const emit = defineEmits(["close", "saved"]);
+const close = () => emit("close");
+
+const form = useInertiaForm({
+  due_date: null,
+  amount: null,
+  note: "",
+  action_id:
+    Array.isArray(props.actions) && props.actions.length > 0 ? props.actions[0].id : null,
+  decision_id:
+    Array.isArray(props.actions) &&
+    props.actions.length > 0 &&
+    Array.isArray(props.actions[0].decisions) &&
+    props.actions[0].decisions.length > 0
+      ? props.actions[0].decisions[0].id
+      : null,
+  contract_uuids: props.contractUuid
+    ? [props.contractUuid]
+    : (props.contracts || []).filter((item) => item.active == 1).map((c) => c.uuid),
+  send_auto_mail: true,
+  attach_documents: false,
+  attachment_document_ids: [],
+  call_back_at_date: null,
+  call_back_at_time: null,
+});
+
+watch(
+  () => props.actions,
+  (list) => {
+    if (!Array.isArray(list) || list.length === 0) {
+      decisions.value = [];
+      form.action_id = null;
+      form.decision_id = null;
+      return;
+    }
+    if (!form.action_id) {
+      form.action_id = list[0].id;
+    }
+    const found = list.find((el) => el.id === form.action_id) || list[0];
+    decisions.value = Array.isArray(found.decisions) ? found.decisions : [];
+    if (!form.decision_id && decisions.value.length > 0) {
+      form.decision_id = decisions.value[0].id;
+    }
+  },
+  { immediate: true }
+);
+
+watch(
+  () => form.action_id,
+  (action_id) => {
+    const a = Array.isArray(props.actions)
+      ? props.actions.find((el) => el.id === action_id)
+      : null;
+    decisions.value = Array.isArray(a?.decisions) ? a.decisions : [];
+    form.decision_id = decisions.value[0]?.id ?? null;
+    form.send_auto_mail = true;
+  }
+);
+
+watch(
+  () => props.contractUuid,
+  (cu) => {
+    form.contract_uuids = cu
+      ? [cu]
+      : (props.contracts || []).filter((item) => item.active == 1).map((c) => c.uuid);
+  }
+);
+
+watch(
+  () => props.show,
+  (visible) => {
+    if (visible) {
+      form.contract_uuids = props.contractUuid
+        ? [props.contractUuid]
+        : (props.contracts || []).filter((item) => item.active == 1).map((c) => c.uuid);
+    }
+  }
+);
+
+const store = async () => {
+  const formatDateForSubmit = (value) => {
+    if (!value) return null;
+    const d = value instanceof Date ? value : new Date(value);
+    if (isNaN(d.getTime())) return null;
+    const y = d.getFullYear();
+    const m = String(d.getMonth() + 1).padStart(2, "0");
+    const day = String(d.getDate()).padStart(2, "0");
+    return `${y}-${m}-${day}`;
+  };
+
+  const contractUuids =
+    Array.isArray(form.contract_uuids) && form.contract_uuids.length > 0
+      ? form.contract_uuids
+      : null;
+
+  const isMultipleContracts = contractUuids && contractUuids.length > 1;
+
+  const buildCallBackAt = (date, time) => {
+    if (!date) return null;
+    const t = time || "00:00";
+    const [h, m] = t.split(":");
+    const d = date instanceof Date ? date : new Date(date);
+    if (isNaN(d.getTime())) return null;
+    const y = d.getFullYear();
+    const mo = String(d.getMonth() + 1).padStart(2, "0");
+    const dy = String(d.getDate()).padStart(2, "0");
+    const hh = String(Number(h || 0)).padStart(2, "0");
+    const mm = String(Number(m || 0)).padStart(2, "0");
+    return `${y}-${mo}-${dy} ${hh}:${mm}:00`;
+  };
+
+  form
+    .transform((data) => ({
+      ...data,
+      phone_view: props.phoneMode,
+      due_date: formatDateForSubmit(data.due_date),
+      contract_uuids: contractUuids,
+      create_for_all_contracts: isMultipleContracts,
+      attachment_document_ids:
+        templateAllowsAttachments.value && data.attach_documents && !isMultipleContracts
+          ? data.attachment_document_ids
+          : [],
+      call_back_at: hasCallLaterEvent.value
+        ? buildCallBackAt(data.call_back_at_date, data.call_back_at_time)
+        : null,
+      call_back_at_date: undefined,
+      call_back_at_time: undefined,
+    }))
+    .post(route("clientCase.activity.store", props.client_case), {
+      onSuccess: () => {
+        close();
+        form.reset(
+          "due_date",
+          "amount",
+          "note",
+          "contract_uuids",
+          "call_back_at_date",
+          "call_back_at_time"
+        );
+        emit("saved");
+      },
+    });
+};
+
+const currentDecision = () => {
+  if (!Array.isArray(decisions.value) || decisions.value.length === 0) {
+    return null;
+  }
+  return (
+    decisions.value.find((d) => d.id === form.decision_id) || decisions.value[0] || null
+  );
+};
+
+const hasCallLaterEvent = computed(() => {
+  const d = currentDecision();
+  if (!d) return false;
+  return Array.isArray(d.events) && d.events.some((e) => e.key === "add_call_later");
+});
+
+watch(
+  () => hasCallLaterEvent.value,
+  (has) => {
+    if (!has) {
+      form.call_back_at_date = null;
+      form.call_back_at_time = null;
+    }
+  }
+);
+
+const showSendAutoMail = () => {
+  const d = currentDecision();
+  return !!(d && d.auto_mail && d.email_template_id);
+};
+
+const templateAllowsAttachments = computed(() => {
+  const d = currentDecision();
+  const tmpl = d?.email_template || d?.emailTemplate || null;
+  return !!(tmpl && tmpl.allow_attachments);
+});
+
+const autoMailRequiresContract = computed(() => {
+  const d = currentDecision();
+  if (!d) return false;
+  const tmpl = d.email_template || d.emailTemplate || null;
+  const types = Array.isArray(tmpl?.entity_types) ? tmpl.entity_types : [];
+  return types.includes("contract");
+});
+
+const contractItems = computed(() => {
+  return pageContracts.value.map((c) => ({
+    value: c.uuid,
+    label: c.active == 1 ? `${c.reference}` : `${c.reference} (Arhivirano)`,
+  }));
+});
+
+const autoMailDisabled = computed(() => {
+  if (!showSendAutoMail()) return false;
+  if (form.contract_uuids && form.contract_uuids.length > 1) return true;
+  if (
+    autoMailRequiresContract.value &&
+    (!form.contract_uuids || form.contract_uuids.length === 0)
+  ) {
+    return true;
+  }
+  return false;
+});
+
+const autoMailDisabledHint = computed(() => {
+  if (!showSendAutoMail()) return "";
+  if (form.contract_uuids && form.contract_uuids.length > 1) {
+    return "Avtomatska e-pošta ni na voljo pri več pogodbah.";
+  }
+  if (
+    autoMailRequiresContract.value &&
+    (!form.contract_uuids || form.contract_uuids.length === 0)
+  ) {
+    return "Ta e-poštna predloga zahteva pogodbo. Najprej izberite pogodbo.";
+  }
+  return "";
+});
+
+watch(
+  () => autoMailDisabled.value,
+  (disabled) => {
+    if (disabled) {
+      form.send_auto_mail = false;
+    }
+  }
+);
+
+const isToday = (val) => {
+  try {
+    if (!val) return false;
+    let d;
+    if (val instanceof Date) {
+      d = val;
+    } else if (typeof val === "string") {
+      const s = val.includes("T") ? val : val.replace(" ", "T");
+      d = new Date(s);
+      if (isNaN(d.getTime())) {
+        const m = val.match(/^(\d{4})-(\d{2})-(\d{2})[ T](\d{2}):(\d{2})(?::(\d{2}))?/);
+        if (m) {
+          const [_, yy, mm, dd, hh, mi, ss] = m;
+          d = new Date(
+            Number(yy),
+            Number(mm) - 1,
+            Number(dd),
+            Number(hh),
+            Number(mi),
+            Number(ss || "0")
+          );
+        }
+      }
+    } else if (typeof val === "number") {
+      d = new Date(val);
+    } else {
+      return false;
+    }
+    if (isNaN(d.getTime())) return false;
+    const today = new Date();
+    return (
+      d.getFullYear() === today.getFullYear() &&
+      d.getMonth() === today.getMonth() &&
+      d.getDate() === today.getDate()
+    );
+  } catch {
+    return false;
+  }
+};
+
+const docsSource = computed(() => {
+  if (Array.isArray(props.documents)) {
+    return props.documents;
+  }
+  const propsVal = page?.props?.value || {};
+  return Array.isArray(propsVal.documents) ? propsVal.documents : [];
+});
+
+const availableContractDocs = computed(() => {
+  if (!form.contract_uuids || form.contract_uuids.length === 0) return [];
+  if (form.contract_uuids.length > 1) return [];
+  const selectedUuid = form.contract_uuids[0];
+  const docs = docsSource.value;
+  const all = docs.filter((d) => d.contract_uuid === selectedUuid);
+  if (!props.phoneMode) return all;
+  return all.filter((d) => {
+    const mime = (d.mime_type || "").toLowerCase();
+    const isImage =
+      mime.startsWith("image/") ||
+      ["jpg", "jpeg", "png", "gif", "webp", "heic", "heif"].includes(
+        (d.extension || "").toLowerCase()
+      );
+    return isImage && isToday(d.created_at || d.createdAt);
+  });
+});
+
+const pageContracts = computed(() => {
+  if (Array.isArray(props.contracts)) {
+    return props.contracts;
+  }
+  if (props.contracts?.data) {
+    return props.contracts.data;
+  }
+  const propsVal = page?.props?.value || {};
+  if (propsVal.contracts?.data) {
+    return propsVal.contracts.data;
+  }
+  return Array.isArray(propsVal.contracts) ? propsVal.contracts : [];
+});
+
+watch(
+  [
+    () => props.phoneMode,
+    () => templateAllowsAttachments.value,
+    () => form.contract_uuids,
+    () => form.decision_id,
+    () => availableContractDocs.value.length,
+  ],
+  () => {
+    if (!props.phoneMode) return;
+    if (!templateAllowsAttachments.value) return;
+    if (!form.contract_uuids || form.contract_uuids.length !== 1) return;
+    const docs = availableContractDocs.value;
+    if (docs.length === 0) return;
+    form.attach_documents = true;
+    if (
+      !Array.isArray(form.attachment_document_ids) ||
+      form.attachment_document_ids.length === 0
+    ) {
+      form.attachment_document_ids = docs.map((d) => d.id);
+    }
+  }
+);
+</script>
+
+<template>
+  <Drawer :open="show" @update:open="(val) => !val && close()">
+    <DrawerContent class="flex flex-col max-h-[90vh]">
+      <DrawerHeader class="border-b px-4 py-3 shrink-0">
+        <DrawerTitle>Dodaj aktivnost</DrawerTitle>
+      </DrawerHeader>
+
+      <ScrollArea class="flex-1 min-h-0">
+        <form @submit.prevent="store" class="px-4 py-4 space-y-4">
+          <div class="space-y-2">
+            <Label>Akcija</Label>
+            <Select v-model="form.action_id" :disabled="!actions || !actions.length">
+              <SelectTrigger>
+                <SelectValue placeholder="Izberi akcijo" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem v-for="a in actions" :key="a.id" :value="a.id">
+                  {{ a.name }}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div class="space-y-2">
+            <Label>Odločitev</Label>
+            <Select v-model="form.decision_id" :disabled="!decisions || !decisions.length">
+              <SelectTrigger>
+                <SelectValue placeholder="Izberi odločitev" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem v-for="d in decisions" :key="d.id" :value="d.id">
+                  {{ d.name }}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div class="space-y-2">
+            <Label>Pogodbe</Label>
+            <AppMultiSelect
+              v-model="form.contract_uuids"
+              :items="contractItems"
+              placeholder="Izberi pogodbe (neobvezno)"
+              search-placeholder="Išči pogodbo..."
+              empty-text="Ni pogodb."
+              :clearable="true"
+              :show-selected-chips="true"
+            />
+            <p
+              v-if="form.contract_uuids && form.contract_uuids.length > 1"
+              class="text-xs text-muted-foreground"
+            >
+              Bo ustvarjenih {{ form.contract_uuids.length }} aktivnosti (ena za vsako
+              pogodbo).
+            </p>
+          </div>
+
+          <div class="space-y-2">
+            <Label for="activityNote">Opomba</Label>
+            <Textarea
+              id="activityNote"
+              v-model="form.note"
+              class="block w-full max-h-40"
+              placeholder="Opomba"
+            />
+          </div>
+
+          <div class="space-y-2">
+            <Label for="activityDueDate">Datum zapadlosti</Label>
+            <DatePicker
+              id="activityDueDate"
+              v-model="form.due_date"
+              format="dd.MM.yyyy"
+              :error="form.errors.due_date"
+            />
+          </div>
+
+          <div v-if="hasCallLaterEvent" class="space-y-2">
+            <Label>Datum in ura povratnega klica</Label>
+            <div class="flex gap-2">
+              <DatePicker
+                v-model="form.call_back_at_date"
+                format="dd.MM.yyyy"
+                :error="form.errors.call_back_at"
+                class="flex-1"
+              />
+              <input
+                v-model="form.call_back_at_time"
+                type="time"
+                class="flex-1 border rounded-md px-3 py-2 text-sm bg-background focus:outline-none focus:ring-2 focus:ring-ring"
+              />
+            </div>
+            <p v-if="form.errors.call_back_at" class="text-xs text-destructive">
+              {{ form.errors.call_back_at }}
+            </p>
+          </div>
+
+          <div class="space-y-2">
+            <Label for="activityAmount">Znesek</Label>
+            <CurrencyInput
+              id="activityAmount"
+              v-model="form.amount"
+              :precision="{ min: 0, max: 4 }"
+              placeholder="0,00"
+              class="w-full"
+            />
+          </div>
+
+          <div v-if="showSendAutoMail()" class="space-y-2">
+            <div class="flex items-center space-x-2">
+              <Switch v-model="form.send_auto_mail" :disabled="autoMailDisabled" />
+              <Label class="cursor-pointer">Pošlji samodejno e-pošto</Label>
+            </div>
+            <p v-if="autoMailDisabled" class="text-xs text-amber-600">
+              {{ autoMailDisabledHint }}
+            </p>
+
+            <div
+              v-if="
+                templateAllowsAttachments &&
+                form.contract_uuids &&
+                form.contract_uuids.length === 1
+              "
+              class="mt-3"
+            >
+              <label class="inline-flex items-center gap-2">
+                <Switch v-model="form.attach_documents" />
+                <span class="text-sm">Dodaj priponke iz izbrane pogodbe</span>
+              </label>
+              <div
+                v-if="form.attach_documents"
+                class="mt-2 border rounded p-2 max-h-40 overflow-auto"
+              >
+                <div class="text-xs text-gray-600 mb-2">
+                  Izberite dokumente, ki bodo poslani kot priponke:
+                </div>
+                <div class="space-y-1">
+                  <template v-for="c in pageContracts" :key="c.uuid || c.id">
+                    <div v-if="c.uuid === form.contract_uuids[0]">
+                      <div class="font-medium text-sm text-gray-700 mb-1">
+                        Pogodba {{ c.reference }}
+                      </div>
+                      <div class="space-y-1">
+                        <div
+                          v-for="doc in availableContractDocs"
+                          :key="doc.uuid || doc.id"
+                          class="flex items-center max-w-sm gap-2 text-sm"
+                        >
+                          <Switch
+                            :model-value="form.attachment_document_ids.includes(doc.id)"
+                            @update:model-value="
+                              (checked) => {
+                                if (checked) {
+                                  if (!form.attachment_document_ids.includes(doc.id)) {
+                                    form.attachment_document_ids.push(doc.id);
+                                  }
+                                } else {
+                                  form.attachment_document_ids =
+                                    form.attachment_document_ids.filter(
+                                      (id) => id !== doc.id
+                                    );
+                                }
+                              }
+                            "
+                          />
+                          <div class="wrap-anywhere">
+                            <p>
+                              <span>{{ doc.name }}.{{ doc.extension }}</span>
+                            </p>
+                            <span class="text-xs text-gray-400"
+                              >({{ doc.extension?.toUpperCase() || "" }},
+                              {{ (doc.size / 1024 / 1024).toFixed(2) }} MB)</span
+                            >
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </template>
+                  <div
+                    v-if="availableContractDocs.length === 0"
+                    class="text-sm text-gray-500"
+                  >
+                    Ni dokumentov, povezanih s to pogodbo.
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </form>
+      </ScrollArea>
+
+      <DrawerFooter class="border-t shrink-0 flex-row gap-2 px-4 py-3">
+        <Button class="flex-1" :disabled="form.processing" @click="store">
+          Shrani
+        </Button>
+        <DrawerClose as-child>
+          <Button variant="outline" class="flex-1" @click="close">Prekliči</Button>
+        </DrawerClose>
+      </DrawerFooter>
+    </DrawerContent>
+  </Drawer>
+</template>

resources/js/Pages/Phone/Case/Index.vue

@@ -1,11 +1,11 @@
 <script setup>
 import AppPhoneLayout from "@/Layouts/AppPhoneLayout.vue";
 import PersonDetailPhone from "@/Components/PersonDetailPhone.vue";
-import DocumentViewerDialog from "@/Components/DocumentsTable/DocumentViewerDialog.vue";
+import DocumentViewerDrawer from "@/Components/DocumentsTable/DocumentViewerDrawer.vue";
 import { classifyDocument } from "@/Services/documents";
 import { reactive, ref, computed, watch } from "vue";
 import { useForm, router } from "@inertiajs/vue3";
-import ActivityDrawer from "@/Pages/Cases/Partials/ActivityDrawer.vue";
+import ActivityDrawerMobile from "@/Pages/Cases/Partials/ActivityDrawerMobile.vue";
 import {
   Card,
   CardContent,
@@ -24,13 +24,14 @@ import {
   AccordionTrigger,
 } from "@/Components/ui/accordion";
 import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/Components/ui/dialog";
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerFooter,
+  DrawerClose,
+} from "@/Components/ui/drawer";
+import { ScrollArea } from "@/Components/ui/scroll-area";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -57,7 +58,14 @@ import {
   Eye,
   Building2,
   Activity,
+  ChevronDown,
+  ChevronUp,
+  NotebookIcon,
+  NotebookPenIcon,
+  ListPlusIcon,
+  HouseIcon,
 } from "lucide-vue-next";
+import { fmtCurrency, fmtDateDMY } from "@/Utilities/functions";
 
 const props = defineProps({
   client: Object,
@@ -136,6 +144,14 @@ function formatDateShort(val) {
   }
 }
 
+function textTrancate(text, maxLength = 100, showAll = false) {
+  if (!text) return "";
+
+  if (showAll) return text;
+
+  return text.length > maxLength ? text.slice(0, maxLength) + "…" : text;
+}
+
 function activityActionLine(a) {
   const base = a?.action?.name || "";
   const decision = a?.decision?.name ? ` → ${a.decision.name}` : "";
@@ -264,6 +280,18 @@ function closeObjectsModal() {
   objectsModal.contract = null;
 }
 
+// Expanded activity notes
+const expandedNotes = ref(new Set());
+const toggleNote = (id) => {
+  const next = new Set(expandedNotes.value);
+  if (next.has(id)) {
+    next.delete(id);
+  } else {
+    next.add(id);
+  }
+  expandedNotes.value = next;
+};
+
 // Client details (Stranka) summary
 const clientSummary = computed(() => {
   const p = props.client?.person || {};
@@ -313,16 +341,17 @@ const clientSummary = computed(() => {
     <div class="py-4 sm:py-2">
       <div class="mx-auto max-w-5xl px-2 sm:px-4 space-y-4">
         <!-- Client details (account holder) -->
-        <Card class="p-0 py-3 gap-3">
-          <CardHeader class="px-3 py-2">
-            <CardTitle class="flex items-center gap-2 text-base">
-              <Building2 class="w-5 h-5 text-gray-500" />
-              <span class="truncate">{{ clientSummary.name }}</span>
+        <Card class="p-0 py-2! gap-2">
+          <CardHeader class="px-3 py-2! border-b">
+            <CardTitle class="flex items-center gap-2 text-base justify-between">
+              <div class="flex flex-row items-center gap-1">
+                <Building2 class="w-5 h-5" />
+                <p class="wrap-break-word max-w-36">{{ clientSummary.name }}</p>
+              </div>
               <Badge variant="secondary">Naročnik</Badge>
             </CardTitle>
           </CardHeader>
-          <CardContent class="px-3">
-            <Separator class="mb-4" />
+          <CardContent class="px-2">
             <PersonDetailPhone
               :types="types"
               :person="client.person"
@@ -332,11 +361,13 @@ const clientSummary = computed(() => {
         </Card>
 
         <!-- Person (case person) -->
-        <Card class="p-0 py-3 gap-3">
-          <CardHeader class="px-3 py-2">
-            <CardTitle class="flex items-center gap-2 text-base">
-              <User class="w-5 h-5 text-gray-500" />
-              <span class="truncate">{{ client_case.person.full_name }}</span>
+        <Card class="p-0 py-2! gap-2">
+          <CardHeader class="px-3 py-2! border-b">
+            <CardTitle class="flex items-center gap-2 text-base justify-between">
+              <div class="flex flex-row items-center gap-1">
+                <User class="w-5 h-5" />
+                <p class="wrap-break-word max-w-36">{{ client_case.person.full_name }}</p>
+              </div>
               <Badge variant="secondary">Primer</Badge>
             </CardTitle>
             <CardDescription
@@ -353,8 +384,7 @@ const clientSummary = computed(() => {
               {{ client_case.person.employer }}
             </p>
           </CardHeader>
-          <CardContent class="px-3">
-            <Separator class="mb-4" />
+          <CardContent class="px-2">
             <PersonDetailPhone
               :types="types"
               :person="client_case.person"
@@ -364,155 +394,108 @@ const clientSummary = computed(() => {
         </Card>
 
         <!-- Contracts assigned to me -->
-        <Card class="p-0 py-3 gap-1">
-          <CardHeader class="px-3 py-2 pb-0">
-            <CardTitle class="flex items-center gap-2">
+        <Card class="p-0 py-2! gap-2">
+          <CardHeader class="px-3 py-2! border-b">
+            <CardTitle class="flex items-center justify-between">
+              <div class="flex flex-row items-center gap-1">
                 <FileText class="w-5 h-5" />
-              Pogodbe
+                <span>Pogodbe</span>
+              </div>
+              <Badge v-if="contracts?.length" variant="secondary" class="ml-1 text-sm">
+                {{ contracts.length }}
+              </Badge>
             </CardTitle>
           </CardHeader>
-          <CardContent class="p-2 space-y-1">
-            <Card
+          <CardContent class="px-0">
+            <Accordion v-if="contracts?.length" type="multiple" class="w-full mb-2">
+              <AccordionItem
                 v-for="c in contracts"
                 :key="c.uuid || c.id"
-              class="overflow-hidden p-0 gap-2"
+                :value="c.uuid || c.id"
+                class="py-2 last:border-b-0"
+              >
+                <AccordionTrigger
+                  class="px-3 py-2 text-sm font-medium tracking-wide flex items-center gap-2"
+                >
+                  <div class="flex items-center gap-2">
+                    <p
+                      class="font-bold rounded-md bg-accent max-w-36 px-3 py-2 wrap-break-word"
                     >
-              <!-- Contract header: reference + type badge -->
-              <CardHeader class="p-3 pb-2 gap-0">
-                <div class="flex items-center flex-wrap">
-                  <CardTitle class="text-base font-semibold">
                       {{ c.reference || "Šifra pogodbe ni določena" }}
-                  </CardTitle>
-                </div>
-              </CardHeader>
-
-              <!-- Balance row -->
-              <div
-                v-if="c.account"
-                class="mx-3 rounded-xl bg-red-50 dark:bg-red-950/20 border border-red-100 dark:border-red-900 px-2 py-2 flex items-center justify-between"
-              >
-                <div class="flex items-center gap-2 text-red-500">
-                  <Euro class="w-4 h-4 shrink-0" />
-                  <span class="text-xs font-medium uppercase tracking-wide text-red-400"
-                    >Odprto</span
-                  >
-                </div>
+                    </p>
                     <span
-                  class="text-2xl font-bold text-red-600 dark:text-red-400 tabular-nums"
-                >
-                  {{ formatAmount(c.account.balance_amount) }} €
+                      class="font-bold rounded-md px-3 py-2 bg-red-50 text-red-600 border-red-100 tabular-nums"
+                      >{{ fmtCurrency(c.account.balance_amount) }}
                     </span>
                   </div>
-
-              <!-- Collapsibles: description, meta, last object -->
-              <CardContent
-                v-if="
-                  c.description ||
-                  c.latest_object ||
-                  (c.meta && Object.keys(c.meta).length)
-                "
-                class="pt-0 px-0 space-y-0"
-              >
-                <!-- Description + Meta + Latest Object Accordion -->
-                <template
-                  v-if="
-                    c.description ||
-                    (c.meta && Object.keys(c.meta).length) ||
-                    c.latest_object
-                  "
-                >
-                  <Separator />
-                  <Accordion type="multiple" class="w-full">
-                    <AccordionItem
-                      v-if="c.description"
-                      value="description"
-                      class="border-b-0"
-                    >
-                      <AccordionTrigger
-                        class="px-3 py-2 text-xs font-medium uppercase tracking-wide hover:no-underline"
-                      >
-                        Opis
-                      </AccordionTrigger>
-                      <AccordionContent class="px-3 pb-3">
-                        <p
-                          class="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-line rounded-lg bg-gray-50 dark:bg-gray-800/50 px-3 py-2.5"
-                        >
-                          {{ c.description }}
-                        </p>
-                      </AccordionContent>
-                    </AccordionItem>
-                    <AccordionItem
-                      v-if="c.meta && Object.keys(c.meta).length"
-                      value="meta"
-                      class="border-b-0"
-                      :class="c.description ? 'border-t' : ''"
-                    >
-                      <AccordionTrigger
-                        class="px-3 py-2 text-xs font-medium uppercase tracking-wide hover:no-underline"
-                      >
-                        <div>
-                          <span class="mr-1">Dodatni podatki</span>
-                          <Badge
-                            class="bg-blue-500 text-white dark:bg-blue-600 h-5 min-w-5 rounded-full px-2 font-mono tabular-nums"
-                            >{{ Object.keys(c.meta).length }}</Badge
-                          >
+                  <div class="flex flex-row gap-2 flex-1 justify-end-safe pr-3">
+                    <Button variant="outline" @click.stop="openDrawerAddActivity(c)">
+                      <Activity class="w-4 h-4" />
+                    </Button>
+                    <Button variant="outline" @click.stop="openDocDialog(c)">
+                      <Upload class="w-4 h-4" />
+                    </Button>
                   </div>
                 </AccordionTrigger>
-                      <AccordionContent class="pb-2">
+                <AccordionContent class="px-4">
+                  <div class="flex flex-col gap-1">
+                    <div class="flex items-center justify-between border-b p-2">
+                      <span class="font-bold"> Opis </span>
+                      <NotebookPenIcon :size="18" />
+                    </div>
+                    <p class="wrap-break-word p-2 max-w-xs">
+                      {{ textTrancate(c.description, 50, false) }}
+                    </p>
+                  </div>
+                  <template v-if="c.meta && Object.keys(c.meta).length > 0">
+                    <Separator class="my-1" />
                     <div
-                          class="divide-y divide-gray-100 dark:divide-gray-700 rounded-lg border border-gray-100 dark:border-gray-700 overflow-hidden"
+                      v-if="c.meta && Object.keys(c.meta).length > 0"
+                      class="flex flex-col gap-1"
                     >
+                      <div class="flex items-center justify-between border-b p-2">
+                        <span class="font-bold"> Dodatno </span>
+                        <ListPlusIcon :size="18" />
+                      </div>
+                      <div class="grid grid-cols-2 gap-1">
                         <div
                           v-for="(val, key) in c.meta"
                           :key="key"
-                            class="flex items-center justify-between gap-3 px-3 py-2 bg-white dark:bg-gray-900 even:bg-gray-50/60 dark:even:bg-gray-800/40"
+                          class="flex items-center justify-between gap-3 px-3 py-2 bg-gray-50 dark:bg-gray-800/50 even:bg-gray-100 dark:even:bg-gray-700/50 rounded-lg"
                         >
                           <span
-                              class="text-xs text-gray-500 dark:text-gray-400 shrink-0"
-                              >{{ val?.title || key }}</span
+                            class="text-xs text-gray-500 dark:text-gray-400 shrink-0 uppercase"
+                            >{{ val?.title?.replace(/_/g, " ") || key }}</span
                           >
-                            <span
-                              class="text-xs font-semibold text-gray-800 dark:text-gray-200 text-right"
+                          <p
+                            class="text-xs wrap-break-word font-semibold text-gray-800 dark:text-gray-200 text-right"
                           >
                             <template v-if="val?.type === 'date'">{{
-                                formatDateShort(val.value) || val.value || "—"
+                              formatDateShort(val.value) || val.value || ""
                             }}</template>
                             <template v-else-if="val?.type === 'number'">{{
-                                val.value ?? "—"
+                              val.value.toString().replace(/\./, ",") ?? ""
                             }}</template>
-                              <template v-else>{{ val?.value ?? val ?? "—" }}</template>
-                            </span>
-                          </div>
-                        </div>
-                      </AccordionContent>
-                    </AccordionItem>
-                    <AccordionItem
-                      v-if="c.latest_object"
-                      value="latest_object"
-                      class="border-b-0"
-                      :class="
-                        c.description || (c.meta && Object.keys(c.meta).length)
-                          ? 'border-t'
-                          : ''
-                      "
-                    >
-                      <AccordionTrigger
-                        class="px-3 py-2 text-xs font-medium uppercase tracking-wide hover:no-underline"
-                      >
-                        Zadnji predmet
-                      </AccordionTrigger>
-                      <AccordionContent class="px-3 pb-3">
-                        <div
-                          class="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-line rounded-lg bg-gray-50 dark:bg-gray-800/50 px-3 py-2.5"
-                        >
-                          <p class="text-sm font-medium text-gray-800 dark:text-gray-200">
-                            {{ c.latest_object.name || c.latest_object.reference }}
-                            <span
-                              v-if="c.latest_object.type"
-                              class="ml-1.5 text-xs font-normal text-gray-400"
-                              >({{ c.latest_object.type }})</span
-                            >
+                            <template v-else>{{ val?.value ?? val ?? "" }}</template>
                           </p>
+                        </div>
+                      </div>
+                    </div>
+                  </template>
+                  <template v-if="c.latest_object">
+                    <Separator class="my-1" />
+                    <div class="flex flex-col gap-1">
+                      <div class="flex items-center justify-between border-b p-2">
+                        <span class="font-bold"> Zadnji predmet </span>
+                        <HouseIcon :size="18" />
+                      </div>
+                      <div class="p-2 max-w-xs flex items-center gap-1">
+                        <p class="font-medium wrap-break-word">
+                          {{ c.latest_object.name || c.latest_object.reference }}
+                        </p>
+                        <Badge variant="outline" v-if="c.latest_object.type">{{
+                          c.latest_object.type
+                        }}</Badge>
                         <p
                           v-if="c.latest_object.description"
                           class="text-xs text-gray-500 dark:text-gray-400 mt-1"
@@ -520,30 +503,11 @@ const clientSummary = computed(() => {
                           {{ c.latest_object.description }}
                         </p>
                       </div>
+                    </div>
+                  </template>
                 </AccordionContent>
               </AccordionItem>
             </Accordion>
-                </template>
-              </CardContent>
-
-              <!-- Action buttons: full-width row at bottom -->
-              <div class="grid grid-cols-2 gap-0 border-t mt-0">
-                <button
-                  class="flex items-center justify-center gap-2 py-3 bg-secondary text-sm font-medium text-accent-foreground hover:bg-secondary/5 active:bg-secondary/10 transition-colors border-r"
-                  @click="openDrawerAddActivity(c)"
-                >
-                  <Plus class="w-4 h-4" />
-                  Aktivnost
-                </button>
-                <button
-                  class="flex items-center justify-center gap-2 py-3 bg-secondary text-sm font-medium text-accent-foreground hover:bg-secondary/5 active:bg-secondary/10 transition-colors"
-                  @click="openDocDialog(c)"
-                >
-                  <Upload class="w-4 h-4" />
-                  Dokument
-                </button>
-              </div>
-            </Card>
             <p
               v-if="!contracts?.length"
               class="text-sm text-gray-600 dark:text-gray-400 text-center py-4"
@@ -555,29 +519,56 @@ const clientSummary = computed(() => {
 
         <!-- Activities -->
         <Card class="p-0 py-2 gap-2">
-          <CardHeader class="px-3 py-2">
+          <CardHeader class="px-3 py-1! border-b">
             <div class="flex items-center justify-between">
               <CardTitle class="flex items-center gap-2">
-                <Activity class="w-5 h-5" />
+                <Activity class="w-4 h-4" />
                 Aktivnosti
               </CardTitle>
               <Button size="lg" @click="openDrawerAddActivity()">
-                <Plus class="w-6 h-6" />
-                <span class=" text-lg">Dodaj aktivnost</span>
+                <span class="text-sm">Nova Aktivnost</span>
+                <Plus :size="14" />
               </Button>
             </div>
           </CardHeader>
-          <CardContent class="space-y-1 px-2">
+          <CardContent class="p-0">
             <Card
               v-for="a in activities"
               :key="a.id"
-              class="bg-gray-50/70 dark:bg-gray-800/50 p-0 py-2 gap-2"
+              class="p-0 py-2 gap-0 rounded-none border-x-0 border-t-0 border-b border-gray-200 dark:border-gray-700 last:border-b-0 shadow-none"
             >
               <CardHeader class="px-3 py-2">
                 <div class="flex items-start justify-between">
+                  <div class="flex flex-col gap-1">
                     <CardTitle class="text-sm font-medium truncate">
                       {{ activityActionLine(a) || "Aktivnost" }}
                     </CardTitle>
+                    <CardDescription class="flex flex-wrap gap-1.5">
+                      <Badge v-if="a.contract" variant="secondary" class="text-xs">
+                        <FileText class="w-3 h-3" />
+                        Pogodba: {{ a.contract.reference }}
+                      </Badge>
+                      <Badge
+                        v-if="a.due_date"
+                        variant="secondary"
+                        class="bg-amber-100 text-amber-700 hover:bg-amber-100"
+                      >
+                        <Calendar class="w-3 h-3" />
+                        Zapadlost: {{ fmtDateDMY(a.due_date) || "" }}
+                      </Badge>
+                      <Badge
+                        v-if="a.amount != null"
+                        variant="secondary"
+                        class="bg-emerald-100 text-emerald-700 hover:bg-emerald-100"
+                      >
+                        <Euro class="w-3 h-3" />
+                        Znesek: {{ fmtCurrency(a.amount) }}
+                      </Badge>
+                      <Badge v-if="a.status" variant="outline" class="text-[10px]">
+                        {{ a.status }}
+                      </Badge>
+                    </CardDescription>
+                  </div>
                   <div
                     class="shrink-0 text-right text-xs text-gray-500 dark:text-gray-400"
                   >
@@ -595,38 +586,23 @@ const clientSummary = computed(() => {
                   </div>
                 </div>
               </CardHeader>
-              <CardContent class="p-2 pt-0 space-y-2">
-                <div class="flex flex-wrap gap-1.5">
-                  <Badge v-if="a.contract" variant="secondary" class="text-[10px]">
-                    <FileText class="w-3 h-3 mr-1" />
-                    Pogodba: {{ a.contract.reference }}
-                  </Badge>
-                  <Badge
-                    v-if="a.due_date"
-                    variant="secondary"
-                    class="bg-amber-100 text-amber-700 hover:bg-amber-100 text-[10px]"
-                  >
-                    <Calendar class="w-3 h-3 mr-1" />
-                    Zapadlost: {{ formatDateShort(a.due_date) || a.due_date }}
-                  </Badge>
-                  <Badge
-                    v-if="a.amount != null"
-                    variant="secondary"
-                    class="bg-emerald-100 text-emerald-700 hover:bg-emerald-100 text-[10px]"
-                  >
-                    <Euro class="w-3 h-3 mr-1" />
-                    Znesek: {{ formatAmount(a.amount) }} €
-                  </Badge>
-                  <Badge v-if="a.status" variant="outline" class="text-[10px]">
-                    {{ a.status }}
-                  </Badge>
-                </div>
-                <p
+              <CardContent class="px-2 py-0">
+                <div
                   v-if="a.note"
-                  class="text-sm text-gray-900 dark:text-gray-300 whitespace-pre-line rounded-lg bg-secondary dark:bg-gray-800/50 p-2"
+                  class="flex flex-col gap-1 cursor-pointer bg-accent rounded-lg p-2"
+                  @click="toggleNote(a.id)"
                 >
-                  {{ a.note }}
+                  <p class="leading-7 wrap-break-word text-sm whitespace-pre-line">
+                    {{ textTrancate(a.note, 50, expandedNotes.has(a.id)) }}
                   </p>
+                  <div class="flex justify-end">
+                    <Badge variant="outline" v-if="a.note?.length > 50">
+                      <ChevronDown v-if="!expandedNotes.has(a.id)" :size="14" />
+                      <ChevronUp v-else :size="14" />
+                      {{ expandedNotes.has(a.id) ? "Skrij" : "Pokaži več" }}</Badge
+                    >
+                  </div>
+                </div>
               </CardContent>
             </Card>
             <p
@@ -640,28 +616,28 @@ const clientSummary = computed(() => {
 
         <!-- Documents (case + assigned contracts) -->
         <Card class="p-0 py-2 gap-2">
-          <CardHeader class="px-3 py-2">
+          <CardHeader class="px-3 py-1! border-b">
             <div class="flex items-center justify-between">
-              <CardTitle class="flex items-center gap-2">
-                <FileText class="w-5 h-5" />
+              <CardTitle class="flex items-center gap-1">
+                <FileText class="w-4 h-4" />
                 Dokumenti
               </CardTitle>
-              <Button size="sm" variant="secondary" @click="openDocDialog()">
-                <Upload class="w-4 h-4 mr-1" />
+              <Button size="lg" variant="secondary" @click="openDocDialog()">
                 Dodaj
+                <Upload class="w-4 h-4" />
               </Button>
             </div>
           </CardHeader>
-          <CardContent>
+          <CardContent class="p-0">
             <div class="divide-y">
-              <div v-for="d in documents" :key="d.uuid || d.id" class="py-3 first:pt-0">
+              <div v-for="d in documents" :key="d.uuid || d.id" class="p-3 first:pt-0">
                 <div class="flex items-start justify-between gap-3">
-                  <div class="min-w-0 flex-1">
+                  <div class="flex-1">
                     <div
-                      class="font-medium text-gray-900 dark:text-gray-100 truncate flex items-center gap-2"
+                      class="font-medium text-gray-900 dark:text-gray-100 flex items-center gap-2"
                     >
                       <FileText class="w-4 h-4 text-gray-400 shrink-0" />
-                      {{ d.name || d.original_name }}
+                      <p class="wrap-break-word">{{ d.name || d.original_name }}</p>
                     </div>
                     <div
                       class="text-xs text-gray-500 dark:text-gray-400 mt-1 flex items-center gap-2 flex-wrap"
@@ -691,7 +667,7 @@ const clientSummary = computed(() => {
                       {{ d.description }}
                     </p>
                   </div>
-                  <div class="shrink-0 flex gap-2">
+                  <div class="flex gap-1">
                     <Button size="sm" variant="ghost" @click="openViewer(d)">
                       <Eye class="w-4 h-4" />
                     </Button>
@@ -733,7 +709,7 @@ const clientSummary = computed(() => {
       </div>
     </div>
 
-    <DocumentViewerDialog
+    <DocumentViewerDrawer
       :show="viewer.open"
       :src="viewer.src"
       :title="viewer.title"
@@ -741,7 +717,7 @@ const clientSummary = computed(() => {
       :filename="viewer.filename"
       @close="closeViewer"
     />
-    <ActivityDrawer
+    <ActivityDrawerMobile
       :show="drawerAddActivity"
       @close="closeDrawer"
       @saved="onActivitySaved"
@@ -776,17 +752,18 @@ const clientSummary = computed(() => {
       </AlertDialogContent>
     </AlertDialog>
 
-    <!-- Upload Document Dialog -->
-    <Dialog :open="docDialogOpen" @update:open="docDialogOpen = $event">
-      <DialogContent class="max-w-md">
-        <DialogHeader>
-          <DialogTitle>Dodaj dokument</DialogTitle>
-          <DialogDescription v-if="selectedContract">
+    <!-- Upload Document Drawer -->
+    <Drawer :open="docDialogOpen" @update:open="(val) => !val && closeDocDialog()">
+      <DrawerContent class="flex flex-col max-h-[90vh]">
+        <DrawerHeader class="border-b px-4 py-3 shrink-0">
+          <DrawerTitle>Dodaj dokument</DrawerTitle>
+          <p v-if="selectedContract" class="text-sm text-muted-foreground mt-1">
             Dokument bo dodan k pogodbi:
             <strong>{{ selectedContract.reference || selectedContract.uuid }}</strong>
-          </DialogDescription>
-        </DialogHeader>
-        <div class="space-y-4">
+          </p>
+        </DrawerHeader>
+        <ScrollArea class="flex-1 min-h-0">
+          <div class="px-4 py-4 space-y-4">
             <div>
               <Label for="docFile">Datoteka</Label>
               <Input id="docFile" type="file" class="mt-1" @change="onPickDocument" />
@@ -813,14 +790,23 @@ const clientSummary = computed(() => {
               <Label for="docPublic">Javno</Label>
             </div>
           </div>
-        <DialogFooter>
-          <Button variant="outline" @click="closeDocDialog"> Prekliči </Button>
-          <Button :disabled="docForm.processing || !docForm.file" @click="submitDocument">
-            <Upload class="w-4 h-4 mr-2" />
+        </ScrollArea>
+        <DrawerFooter class="border-t shrink-0 flex-row gap-2 px-4 py-3">
+          <Button
+            class="flex-1"
+            :disabled="docForm.processing || !docForm.file"
+            @click="submitDocument"
+          >
+            <Upload class="w-4 h-4" />
             Naloži
           </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+          <DrawerClose as-child>
+            <Button variant="outline" class="flex-1" @click="closeDocDialog"
+              >Prekliči</Button
+            >
+          </DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
   </AppPhoneLayout>
 </template>