Phone view case updated

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" />
-          <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" />
-          <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>
-    </div>
+  <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>
+          </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>
+          </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>
+      <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>
-      </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
-            >
-          </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>
-      </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>
+      </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>
-      </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";