Phone view case updated

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;