Changes to UI

resources/js/Components/DataTable/DataTableClient.vue

@@ -209,7 +209,7 @@ function setPageSize(ps) {
               @click="toggleSort(col)"
               :aria-sort="sort?.key === col.key ? sort.direction || 'none' : 'none'"
             >
-              <span>{{ col.label }}</span>
+              <span class="uppercase">{{ col.label }}</span>
               <span v-if="sort?.key === col.key && sort.direction === 'asc'">▲</span>
               <span v-else-if="sort?.key === col.key && sort.direction === 'desc'"
                 >▼</span
@@ -281,9 +281,14 @@ function setPageSize(ps) {
       </FwbTable>
     </div>
 
-    <nav class="mt-3 flex flex-wrap items-center justify-between gap-3 text-sm text-gray-700" aria-label="Pagination">
+    <nav
+      class="mt-3 flex flex-wrap items-center justify-between gap-3 text-sm text-gray-700"
+      aria-label="Pagination"
+    >
       <div v-if="showPageStats">
-        <span v-if="total > 0">Prikazano: {{ showingFrom }}–{{ showingTo }} od {{ total }}</span>
+        <span v-if="total > 0"
+          >Prikazano: {{ showingFrom }}–{{ showingTo }} od {{ total }}</span
+        >
         <span v-else>Ni zadetkov</span>
       </div>
       <div class="flex items-center gap-1">
@@ -311,7 +316,9 @@ function setPageSize(ps) {
           v-if="visiblePages[0] > 1"
           class="px-2 py-1 rounded border border-gray-300 hover:bg-gray-50"
           @click="setPage(1)"
-        >1</button>
+        >
+          1
+        </button>
         <span v-if="visiblePages[0] > 2" class="px-1">…</span>
 
         <!-- Page numbers -->
@@ -319,7 +326,11 @@ function setPageSize(ps) {
           v-for="p in visiblePages"
           :key="p"
           class="px-3 py-1 rounded border transition-colors"
-          :class="p === currentPage ? 'border-indigo-600 bg-indigo-600 text-white' : 'border-gray-300 hover:bg-gray-50'"
+          :class="
+            p === currentPage
+              ? 'border-indigo-600 bg-indigo-600 text-white'
+              : 'border-gray-300 hover:bg-gray-50'
+          "
           :aria-current="p === currentPage ? 'page' : undefined"
           @click="setPage(p)"
         >
@@ -327,12 +338,16 @@ function setPageSize(ps) {
         </button>
 
         <!-- Trailing ellipsis / last page when window doesn't include last -->
-        <span v-if="visiblePages[visiblePages.length - 1] < lastPage - 1" class="px-1">…</span>
+        <span v-if="visiblePages[visiblePages.length - 1] < lastPage - 1" class="px-1"
+          >…</span
+        >
         <button
           v-if="visiblePages[visiblePages.length - 1] < lastPage"
           class="px-2 py-1 rounded border border-gray-300 hover:bg-gray-50"
           @click="setPage(lastPage)"
-        >{{ lastPage }}</button>
+        >
+          {{ lastPage }}
+        </button>
 
         <!-- Next -->
         <button

resources/js/Components/DataTable/DataTableServer.vue

@@ -209,7 +209,7 @@ function goToPageInput() {
               @click="toggleSort(col)"
               :aria-sort="sort?.key === col.key ? sort.direction || 'none' : 'none'"
             >
-              <span>{{ col.label }}</span>
+              <span class="uppercase">{{ col.label }}</span>
               <span v-if="sort?.key === col.key && sort.direction === 'asc'">▲</span>
               <span v-else-if="sort?.key === col.key && sort.direction === 'desc'"
                 >▼</span

resources/js/Components/InlineColorPicker.vue

@@ -0,0 +1,61 @@
+<script setup>
+import { computed, ref } from 'vue'
+
+const props = defineProps({
+  modelValue: { type: String, default: null },
+  defaultColor: { type: String, default: '#000000' },
+  clearLabel: { type: String, default: 'Počisti' },
+  selectLabel: { type: String, default: 'Izberi barvo' },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const inputRef = ref(null)
+
+const inputValue = computed(() => props.modelValue || props.defaultColor)
+const hasValue = computed(() => !!props.modelValue)
+
+function onInput(e) {
+  const val = e.target.value
+  emit('update:modelValue', val)
+}
+
+function clear() {
+  emit('update:modelValue', null)
+}
+</script>
+
+<template>
+  <div class="flex items-center gap-2">
+    <div
+      class="relative px-2 py-1 rounded border border-gray-300 hover:bg-gray-50 inline-flex items-center gap-2 select-none"
+    >
+      <span
+        v-if="hasValue"
+        class="inline-block h-4 w-4 rounded"
+        :style="{ backgroundColor: modelValue }"
+      />
+      <span class="text-sm text-gray-700">{{ hasValue ? modelValue : selectLabel }}</span>
+
+      <!-- Keep the same input element always mounted, positioned over the trigger to anchor the native picker -->
+      <input
+        ref="inputRef"
+        type="color"
+        class="absolute inset-0 opacity-0 cursor-pointer"
+        :value="inputValue"
+        @input="onInput"
+        aria-label="Color picker"
+      />
+    </div>
+
+    <button
+      v-if="hasValue"
+      type="button"
+      class="px-2 py-1 rounded border border-gray-300 hover:bg-gray-50 text-sm"
+      @click="clear"
+    >
+      {{ clearLabel }}
+    </button>
+  </div>
+  
+</template>

resources/js/Components/PersonInfoGrid.vue

@@ -1,39 +1,37 @@
 <script setup>
-import { FwbBadge } from 'flowbite-vue';
-import { EditIcon, PlusIcon, UserEditIcon, TrashBinIcon } from '@/Utilities/Icons';
-import CusTab from './CusTab.vue';
-import CusTabs from './CusTabs.vue';
-import { provide, ref, watch } from 'vue';
-import axios from 'axios';
-import PersonUpdateForm from './PersonUpdateForm.vue';
-import AddressCreateForm from './AddressCreateForm.vue';
-import AddressUpdateForm from './AddressUpdateForm.vue';
-import PhoneCreateForm from './PhoneCreateForm.vue';
-import EmailCreateForm from './EmailCreateForm.vue';
-import EmailUpdateForm from './EmailUpdateForm.vue';
-import TrrCreateForm from './TrrCreateForm.vue';
-import TrrUpdateForm from './TrrUpdateForm.vue';
-import ConfirmDialog from './ConfirmDialog.vue';
-
+import { FwbBadge } from "flowbite-vue";
+import { EditIcon, PlusIcon, UserEditIcon, TrashBinIcon } from "@/Utilities/Icons";
+import CusTab from "./CusTab.vue";
+import CusTabs from "./CusTabs.vue";
+import { provide, ref, watch } from "vue";
+import axios from "axios";
+import PersonUpdateForm from "./PersonUpdateForm.vue";
+import AddressCreateForm from "./AddressCreateForm.vue";
+import AddressUpdateForm from "./AddressUpdateForm.vue";
+import PhoneCreateForm from "./PhoneCreateForm.vue";
+import EmailCreateForm from "./EmailCreateForm.vue";
+import EmailUpdateForm from "./EmailUpdateForm.vue";
+import TrrCreateForm from "./TrrCreateForm.vue";
+import TrrUpdateForm from "./TrrUpdateForm.vue";
+import ConfirmDialog from "./ConfirmDialog.vue";
 
 const props = defineProps({
-    person: Object,
-    edit: {
-        type: Boolean,
-        default: false
+  person: Object,
+  edit: {
+    type: Boolean,
+    default: false,
+  },
+  tabColor: {
+    type: String,
+    default: "blue-600",
+  },
+  types: {
+    type: Object,
+    default: {
+      address_types: [],
+      phone_types: [],
     },
-    tabColor: {
-        type: String,
-        default: 'blue-600'
-    },
-    types: {
-        type: Object,
-        default: {
-            address_types: [],
-            phone_types: []
-        }
-    }
-
+  },
 });
 
 const drawerUpdatePerson = ref(false);
@@ -54,353 +52,462 @@ const editTrrId = ref(0);
 
 // Confirm dialog state
 const confirm = ref({
-    show: false,
-    title: 'Potrditev brisanja',
-    message: '',
-    type: '', // 'email' | 'trr' | 'address' | 'phone'
-    id: 0,
+  show: false,
+  title: "Potrditev brisanja",
+  message: "",
+  type: "", // 'email' | 'trr' | 'address' | 'phone'
+  id: 0,
 });
 
-const openConfirm = (type, id, label = '') => {
-    confirm.value = {
-        show: true,
-        title: 'Potrditev brisanja',
-        message: label ? `Ali res želite izbrisati “${label}”?` : 'Ali res želite izbrisati izbran element?',
-        type,
-        id,
-    };
-}
-const closeConfirm = () => { confirm.value.show = false; };
+const openConfirm = (type, id, label = "") => {
+  confirm.value = {
+    show: true,
+    title: "Potrditev brisanja",
+    message: label
+      ? `Ali res želite izbrisati “${label}”?`
+      : "Ali res želite izbrisati izbran element?",
+    type,
+    id,
+  };
+};
+const closeConfirm = () => {
+  confirm.value.show = false;
+};
 
 const getMainAddress = (adresses) => {
-    const addr = adresses.filter( a => a.type.id === 1 )[0] ?? '';
-    if( addr !== '' ){
-        const tail = (addr.post_code && addr.city) ? `, ${addr.post_code} ${addr.city}` : '';
-        const country = addr.country !== '' ? ` - ${addr.country}` : '';
-        return addr.address !== '' ? (addr.address + tail + country) : '';
-    }
-    
-    return '';
-}
+  const addr = adresses.filter((a) => a.type.id === 1)[0] ?? "";
+  if (addr !== "") {
+    const tail = addr.post_code && addr.city ? `, ${addr.post_code} ${addr.city}` : "";
+    const country = addr.country !== "" ? ` - ${addr.country}` : "";
+    return addr.address !== "" ? addr.address + tail + country : "";
+  }
+
+  return "";
+};
 
 const getMainPhone = (phones) => {
-    const pho = phones.filter( a => a.type.id === 1 )[0] ?? '';
-    if( pho !== '' ){
-        const countryCode = pho.country_code !== null ? `+${pho.country_code} ` : '';
-        return pho.nu !== '' ? countryCode + pho.nu: '';
-    }
+  const pho = phones.filter((a) => a.type.id === 1)[0] ?? "";
+  if (pho !== "") {
+    const countryCode = pho.country_code !== null ? `+${pho.country_code} ` : "";
+    return pho.nu !== "" ? countryCode + pho.nu : "";
+  }
 
-    return '';
-    
-}
+  return "";
+};
 
 const openDrawerUpdateClient = () => {
-    drawerUpdatePerson.value = true;
-}
+  drawerUpdatePerson.value = true;
+};
 
 const openDrawerAddAddress = (edit = false, id = 0) => {
-    drawerAddAddress.value = true;
-    editAddress.value = edit;
-    editAddressId.value = id;
-    
-}
+  drawerAddAddress.value = true;
+  editAddress.value = edit;
+  editAddressId.value = id;
+};
 
 const operDrawerAddPhone = (edit = false, id = 0) => {
-    drawerAddPhone.value = true;
-    editPhone.value = edit;
-    editPhoneId.value = id;
-}
+  drawerAddPhone.value = true;
+  editPhone.value = edit;
+  editPhoneId.value = id;
+};
 
 const openDrawerAddEmail = (edit = false, id = 0) => {
-    drawerAddEmail.value = true;
-    editEmail.value = edit;
-    editEmailId.value = id;
-}
+  drawerAddEmail.value = true;
+  editEmail.value = edit;
+  editEmailId.value = id;
+};
 
 const openDrawerAddTrr = (edit = false, id = 0) => {
-    drawerAddTrr.value = true;
-    editTrr.value = edit;
-    editTrrId.value = id;
-}
+  drawerAddTrr.value = true;
+  editTrr.value = edit;
+  editTrrId.value = id;
+};
 
 // Delete handlers (expects routes: person.email.delete, person.trr.delete)
-const deleteEmail = async (emailId, label = '') => {
-    if (!emailId) return;
-    openConfirm('email', emailId, label || 'email');
-}
+const deleteEmail = async (emailId, label = "") => {
+  if (!emailId) return;
+  openConfirm("email", emailId, label || "email");
+};
 
-const deleteTrr = async (trrId, label = '') => {
-    if (!trrId) return;
-    openConfirm('trr', trrId, label || 'TRR');
-}
+const deleteTrr = async (trrId, label = "") => {
+  if (!trrId) return;
+  openConfirm("trr", trrId, label || "TRR");
+};
 
 const onConfirmDelete = async () => {
-    const { type, id } = confirm.value;
-    try {
-        if (type === 'email') {
-            await axios.delete(route('person.email.delete', { person: props.person, email_id: id }));
-            const list = props.person.emails || [];
-            const idx = list.findIndex(e => e.id === id);
-            if (idx !== -1) list.splice(idx, 1);
-        } else if (type === 'trr') {
-            await axios.delete(route('person.trr.delete', { person: props.person, trr_id: id }));
-            let list = props.person.trrs || props.person.bank_accounts || props.person.accounts || props.person.bankAccounts || [];
-            const idx = list.findIndex(a => a.id === id);
-            if (idx !== -1) list.splice(idx, 1);
-        } else if (type === 'address') {
-            await axios.delete(route('person.address.delete', { person: props.person, address_id: id }));
-            const list = props.person.addresses || [];
-            const idx = list.findIndex(a => a.id === id);
-            if (idx !== -1) list.splice(idx, 1);
-        } else if (type === 'phone') {
-            await axios.delete(route('person.phone.delete', { person: props.person, phone_id: id }));
-            const list = props.person.phones || [];
-            const idx = list.findIndex(p => p.id === id);
-            if (idx !== -1) list.splice(idx, 1);
-        }
-        closeConfirm();
-    } catch (e) {
-        console.error('Delete failed', e?.response || e);
-        closeConfirm();
+  const { type, id } = confirm.value;
+  try {
+    if (type === "email") {
+      await axios.delete(
+        route("person.email.delete", { person: props.person, email_id: id })
+      );
+      const list = props.person.emails || [];
+      const idx = list.findIndex((e) => e.id === id);
+      if (idx !== -1) list.splice(idx, 1);
+    } else if (type === "trr") {
+      await axios.delete(
+        route("person.trr.delete", { person: props.person, trr_id: id })
+      );
+      let list =
+        props.person.trrs ||
+        props.person.bank_accounts ||
+        props.person.accounts ||
+        props.person.bankAccounts ||
+        [];
+      const idx = list.findIndex((a) => a.id === id);
+      if (idx !== -1) list.splice(idx, 1);
+    } else if (type === "address") {
+      await axios.delete(
+        route("person.address.delete", { person: props.person, address_id: id })
+      );
+      const list = props.person.addresses || [];
+      const idx = list.findIndex((a) => a.id === id);
+      if (idx !== -1) list.splice(idx, 1);
+    } else if (type === "phone") {
+      await axios.delete(
+        route("person.phone.delete", { person: props.person, phone_id: id })
+      );
+      const list = props.person.phones || [];
+      const idx = list.findIndex((p) => p.id === id);
+      if (idx !== -1) list.splice(idx, 1);
     }
-}
+    closeConfirm();
+  } catch (e) {
+    console.error("Delete failed", e?.response || e);
+    closeConfirm();
+  }
+};
 
 // Safe accessors for optional collections
-const getEmails = (p) => Array.isArray(p?.emails) ? p.emails : []
+const getEmails = (p) => (Array.isArray(p?.emails) ? p.emails : []);
 const getTRRs = (p) => {
-    if (Array.isArray(p?.trrs)) return p.trrs
-    if (Array.isArray(p?.bank_accounts)) return p.bank_accounts
-    if (Array.isArray(p?.accounts)) return p.accounts
-    if (Array.isArray(p?.bankAccounts)) return p.bankAccounts
-    return []
-}
-
+  if (Array.isArray(p?.trrs)) return p.trrs;
+  if (Array.isArray(p?.bank_accounts)) return p.bank_accounts;
+  if (Array.isArray(p?.accounts)) return p.accounts;
+  if (Array.isArray(p?.bankAccounts)) return p.bankAccounts;
+  return [];
+};
 </script>
 
 <template>
-    <CusTabs :selected-color="tabColor">
-        <CusTab name="person" title="Oseba">
-            <div class="flex justify-end mb-2">
-                <span class=" border-b-2 border-gray-500 hover:border-gray-800">
-                    <button @click="openDrawerUpdateClient"><UserEditIcon size="lg" css="text-gray-500 hover:text-gray-800" /></button>
-                </span>
+  <CusTabs :selected-color="tabColor">
+    <CusTab name="person" title="Oseba">
+      <div class="flex justify-end mb-2">
+        <span class="border-b-2 border-gray-500 hover:border-gray-800">
+          <button @click="openDrawerUpdateClient">
+            <UserEditIcon size="lg" css="text-gray-500 hover:text-gray-800" />
+          </button>
+        </span>
+      </div>
+      <div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2">
+        <div class="rounded p-2 shadow">
+          <p class="text-xs leading-5 md:text-sm text-gray-500">Nu.</p>
+          <p class="text-sm md:text-base leading-7 text-gray-900">{{ person.nu }}</p>
+        </div>
+        <div class="rounded p-2 shadow">
+          <p class="text-sm leading-5 md:text-sm text-gray-500">Name.</p>
+          <p class="text-sm md:text-base leading-7 text-gray-900">
+            {{ person.full_name }}
+          </p>
+        </div>
+        <div class="rounded p-2 shadow">
+          <p class="text-sm leading-5 md:text-sm text-gray-500">Tax NU.</p>
+          <p class="text-sm md:text-base leading-7 text-gray-900">
+            {{ person.tax_number }}
+          </p>
+        </div>
+        <div class="rounded p-2 shadow">
+          <p class="text-sm leading-5 md:text-sm text-gray-500">Social security NU.</p>
+          <p class="text-sm md:text-base leading-7 text-gray-900">
+            {{ person.social_security_number }}
+          </p>
+        </div>
+      </div>
+      <div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 mt-1">
+        <div class="rounded p-2 shadow">
+          <p class="text-sm leading-5 md:text-sm text-gray-500">Address</p>
+          <p class="text-sm md:text-base leading-7 text-gray-900">
+            {{ getMainAddress(person.addresses) }}
+          </p>
+        </div>
+        <div class="rounded p-2 shadow">
+          <p class="text-sm leading-5 md:text-sm text-gray-500">Phone</p>
+          <p class="text-sm md:text-base leading-7 text-gray-900">
+            {{ getMainPhone(person.phones) }}
+          </p>
+        </div>
+        <div class="md:col-span-full lg:col-span-1 rounded p-2 shadow">
+          <p class="text-sm leading-5 md:text-sm text-gray-500">Description</p>
+          <p class="text-sm md:text-base leading-7 text-gray-900">
+            {{ person.description }}
+          </p>
+        </div>
+      </div>
+    </CusTab>
+    <CusTab name="addresses" title="Naslovi">
+      <div class="flex justify-end mb-2">
+        <span class="border-b-2 border-gray-500 hover:border-gray-800">
+          <button>
+            <PlusIcon
+              @click="openDrawerAddAddress(false, 0)"
+              size="lg"
+              css="text-gray-500 hover:text-gray-800"
+            />
+          </button>
+        </span>
+      </div>
+      <div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 mt-1">
+        <div class="rounded p-2 shadow" v-for="address in person.addresses">
+          <div class="text-sm leading-5 md:text-sm text-gray-500 flex justify-between">
+            <div class="flex">
+              <FwbBadge type="yellow">{{ address.country }}</FwbBadge>
+              <FwbBadge>{{ address.type.name }}</FwbBadge>
             </div>
-            <div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2">
-                <div class="rounded p-2 shadow">
-                    <p class="text-xs leading-5 md:text-sm text-gray-500">Nu.</p>
-                    <p class="text-sm md:text-base leading-7 text-gray-900">{{ person.nu }}</p>
-                </div>
-                <div class="rounded p-2 shadow">
-                    <p class="text-sm leading-5 md:text-sm text-gray-500">Name.</p>
-                    <p class="text-sm md:text-base leading-7 text-gray-900">{{ person.full_name }}</p>
-                </div>
-                <div class="rounded p-2 shadow">
-                    <p class="text-sm leading-5 md:text-sm text-gray-500">Tax NU.</p>
-                    <p class="text-sm md:text-base leading-7 text-gray-900">{{ person.tax_number }}</p>
-                </div>
-                <div class="rounded p-2 shadow">
-                    <p class="text-sm leading-5 md:text-sm text-gray-500">Social security NU.</p>
-                    <p class="text-sm md:text-base leading-7 text-gray-900">{{ person.social_security_number }}</p>
-                </div>
+            <div class="flex items-center gap-2">
+              <button>
+                <EditIcon
+                  @click="openDrawerAddAddress(true, address.id)"
+                  size="md"
+                  css="text-gray-500 hover:text-gray-800"
+                />
+              </button>
+              <button @click="openConfirm('address', address.id, address.address)">
+                <TrashBinIcon size="md" css="text-red-600 hover:text-red-700" />
+              </button>
             </div>
-            <div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 mt-1">
-                <div class="rounded p-2 shadow">
-                    <p class="text-sm leading-5 md:text-sm text-gray-500">Address</p>
-                    <p class="text-sm md:text-base leading-7 text-gray-900">{{ getMainAddress(person.addresses) }}</p>
-                </div>
-                <div class="rounded p-2 shadow">
-                    <p class="text-sm leading-5 md:text-sm text-gray-500">Phone</p>
-                    <p class="text-sm md:text-base leading-7 text-gray-900">{{ getMainPhone(person.phones) }}</p>
-                </div>
-                <div class="md:col-span-full lg:col-span-1 rounded p-2 shadow">
-                    <p class="text-sm leading-5 md:text-sm text-gray-500">Description</p>
-                    <p class="text-sm md:text-base leading-7 text-gray-900">{{ person.description }}</p>
-                </div>
+          </div>
+          <p class="text-sm md:text-base leading-7 text-gray-900">
+            {{
+              address.post_code && address.city
+                ? `${address.address}, ${address.post_code} ${address.city}`
+                : address.address
+            }}
+          </p>
+        </div>
+      </div>
+    </CusTab>
+    <CusTab name="phones" title="Telefonske">
+      <div class="flex justify-end mb-2">
+        <span class="border-b-2 border-gray-500 hover:border-gray-800">
+          <button>
+            <PlusIcon
+              @click="operDrawerAddPhone(false, 0)"
+              size="lg"
+              css="text-gray-500 hover:text-gray-800"
+            />
+          </button>
+        </span>
+      </div>
+      <div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 mt-1">
+        <div class="rounded p-2 shadow" v-for="phone in person.phones">
+          <div class="text-sm leading-5 md:text-sm text-gray-500 flex justify-between">
+            <div class="flex">
+              <FwbBadge title type="yellow">+{{ phone.country_code }}</FwbBadge>
+              <FwbBadge>{{ phone.type.name }}</FwbBadge>
             </div>
-        </CusTab >
-        <CusTab name="addresses" title="Naslovi">
-            <div class="flex justify-end mb-2">
-                <span class="border-b-2 border-gray-500 hover:border-gray-800">
-                    <button><PlusIcon @click="openDrawerAddAddress(false, 0)" size="lg" css="text-gray-500 hover:text-gray-800" /></button>
-                </span>
+            <div class="flex items-center gap-2">
+              <button>
+                <EditIcon
+                  @click="operDrawerAddPhone(true, phone.id)"
+                  size="md"
+                  css="text-gray-500 hover:text-gray-800"
+                />
+              </button>
+              <button @click="openConfirm('phone', phone.id, phone.nu)">
+                <TrashBinIcon size="md" css="text-red-600 hover:text-red-700" />
+              </button>
             </div>
-            <div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 mt-1">
-                <div class="rounded p-2 shadow" v-for="address in person.addresses">
-                    <div class="text-sm leading-5 md:text-sm text-gray-500 flex justify-between">
-                        <div class="flex ">
-                            <FwbBadge type="yellow">{{ address.country }}</FwbBadge>
-                            <FwbBadge>{{ address.type.name }}</FwbBadge>
-                        </div>
-                        <div class="flex items-center gap-2">
-                            <button><EditIcon @click="openDrawerAddAddress(true, address.id)" size="md" css="text-gray-500 hover:text-gray-800" /></button>
-                            <button @click="openConfirm('address', address.id, address.address)"><TrashBinIcon size="md" css="text-red-600 hover:text-red-700" /></button>
-                        </div>
-                    </div>
-                    <p class="text-sm md:text-base leading-7 text-gray-900">
-                        {{ (address.post_code && address.city) ? `${address.address}, ${address.post_code} ${address.city}` : address.address }}
-                    </p>
-                </div>
+          </div>
+          <p class="text-sm md:text-base leading-7 text-gray-900">{{ phone.nu }}</p>
+        </div>
+      </div>
+    </CusTab>
+    <CusTab name="emails" title="Email">
+      <div class="flex justify-end mb-2">
+        <span class="border-b-2 border-gray-500 hover:border-gray-800">
+          <button>
+            <PlusIcon
+              @click="openDrawerAddEmail(false, 0)"
+              size="lg"
+              css="text-gray-500 hover:text-gray-800"
+            />
+          </button>
+        </span>
+      </div>
+      <div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 mt-1">
+        <template v-if="getEmails(person).length">
+          <div
+            class="rounded p-2 shadow"
+            v-for="(email, idx) in getEmails(person)"
+            :key="idx"
+          >
+            <div class="text-sm leading-5 md:text-sm text-gray-500 flex justify-between">
+              <div class="flex gap-2">
+                <FwbBadge v-if="email?.label">{{ email.label }}</FwbBadge>
+                <FwbBadge v-else type="indigo">Email</FwbBadge>
+              </div>
+              <div class="flex items-center gap-2">
+                <button>
+                  <EditIcon
+                    @click="openDrawerAddEmail(true, email.id)"
+                    size="md"
+                    css="text-gray-500 hover:text-gray-800"
+                  />
+                </button>
+                <button
+                  @click="
+                    deleteEmail(email.id, email?.value || email?.email || email?.address)
+                  "
+                >
+                  <TrashBinIcon size="md" css="text-red-600 hover:text-red-700" />
+                </button>
+              </div>
             </div>
-        </CusTab>
-        <CusTab name="phones" title="Telefonske">
-            <div class="flex justify-end mb-2">
-                <span class="border-b-2 border-gray-500 hover:border-gray-800">
-                    <button><PlusIcon @click="operDrawerAddPhone(false, 0)" size="lg" css="text-gray-500 hover:text-gray-800" /></button>
-                </span>
+            <p class="text-sm md:text-base leading-7 text-gray-900">
+              {{ email?.value || email?.email || email?.address || "-" }}
+            </p>
+            <p v-if="email?.note" class="mt-1 text-xs text-gray-500 whitespace-pre-wrap">
+              {{ email.note }}
+            </p>
+          </div>
+        </template>
+        <p v-else class="p-2 text-sm text-gray-500">Ni e-poštnih naslovov.</p>
+      </div>
+    </CusTab>
+    <CusTab name="trr" title="TRR">
+      <div class="flex justify-end mb-2">
+        <span class="border-b-2 border-gray-500 hover:border-gray-800">
+          <button>
+            <PlusIcon
+              @click="openDrawerAddTrr(false, 0)"
+              size="lg"
+              css="text-gray-500 hover:text-gray-800"
+            />
+          </button>
+        </span>
+      </div>
+      <div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 mt-1">
+        <template v-if="getTRRs(person).length">
+          <div
+            class="rounded p-2 shadow"
+            v-for="(acc, idx) in getTRRs(person)"
+            :key="idx"
+          >
+            <div class="text-sm leading-5 md:text-sm text-gray-500 flex justify-between">
+              <div class="flex gap-2">
+                <FwbBadge v-if="acc?.bank_name">{{ acc.bank_name }}</FwbBadge>
+                <FwbBadge v-if="acc?.holder_name" type="indigo">{{
+                  acc.holder_name
+                }}</FwbBadge>
+                <FwbBadge v-if="acc?.currency" type="yellow">{{ acc.currency }}</FwbBadge>
+              </div>
+              <div class="flex items-center gap-2">
+                <button>
+                  <EditIcon
+                    @click="openDrawerAddTrr(true, acc.id)"
+                    size="md"
+                    css="text-gray-500 hover:text-gray-800"
+                  />
+                </button>
+                <button @click="deleteTrr(acc.id, acc?.iban || acc?.account_number)">
+                  <TrashBinIcon size="md" css="text-red-600 hover:text-red-700" />
+                </button>
+              </div>
             </div>
-            <div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 mt-1">
-                <div class="rounded p-2 shadow" v-for="phone in person.phones">
-                    <div class="text-sm leading-5 md:text-sm text-gray-500 flex justify-between">
-                        <div class="flex ">
-                            <FwbBadge title type="yellow">+{{ phone.country_code }}</FwbBadge>
-                            <FwbBadge>{{ phone.type.name }}</FwbBadge>
-                        </div>
-                        <div class="flex items-center gap-2">
-                            <button><EditIcon @click="operDrawerAddPhone(true, phone.id)" size="md" css="text-gray-500 hover:text-gray-800" /></button>
-                            <button @click="openConfirm('phone', phone.id, phone.nu)"><TrashBinIcon size="md" css="text-red-600 hover:text-red-700" /></button>
-                        </div>
-                    </div>
-                    <p class="text-sm md:text-base leading-7 text-gray-900">{{ phone.nu }}</p>
-                </div>
-            </div>
-        </CusTab>
-        <CusTab name="emails" title="Email">
-            <div class="flex justify-end mb-2">
-                <span class="border-b-2 border-gray-500 hover:border-gray-800">
-                    <button><PlusIcon @click="openDrawerAddEmail(false, 0)" size="lg" css="text-gray-500 hover:text-gray-800" /></button>
-                </span>
-            </div>
-            <div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 mt-1">
-                <template v-if="getEmails(person).length">
-                    <div class="rounded p-2 shadow" v-for="(email, idx) in getEmails(person)" :key="idx">
-                        <div class="text-sm leading-5 md:text-sm text-gray-500 flex justify-between">
-                            <div class="flex gap-2">
-                                <FwbBadge v-if="email?.label">{{ email.label }}</FwbBadge>
-                                <FwbBadge v-else type="indigo">Email</FwbBadge>
-                            </div>
-                            <div class="flex items-center gap-2">
-                                <button><EditIcon @click="openDrawerAddEmail(true, email.id)" size="md" css="text-gray-500 hover:text-gray-800" /></button>
-                                <button @click="deleteEmail(email.id, email?.value || email?.email || email?.address)"><TrashBinIcon size="md" css="text-red-600 hover:text-red-700" /></button>
-                            </div>
-                        </div>
-                        <p class="text-sm md:text-base leading-7 text-gray-900">
-                            {{ email?.value || email?.email || email?.address || '-' }}
-                        </p>
-                        <p v-if="email?.note" class="mt-1 text-xs text-gray-500 whitespace-pre-wrap">{{ email.note }}</p>
-                    </div>
-                </template>
-                <p v-else class="p-2 text-sm text-gray-500">Ni e-poštnih naslovov.</p>
-            </div>
-        </CusTab>
-        <CusTab name="trr" title="TRR">
-            <div class="flex justify-end mb-2">
-                <span class="border-b-2 border-gray-500 hover:border-gray-800">
-                    <button><PlusIcon @click="openDrawerAddTrr(false, 0)" size="lg" css="text-gray-500 hover:text-gray-800" /></button>
-                </span>
-            </div>
-            <div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 mt-1">
-                <template v-if="getTRRs(person).length">
-                    <div class="rounded p-2 shadow" v-for="(acc, idx) in getTRRs(person)" :key="idx">
-                        <div class="text-sm leading-5 md:text-sm text-gray-500 flex justify-between">
-                            <div class="flex gap-2">
-                                <FwbBadge v-if="acc?.bank_name">{{ acc.bank_name }}</FwbBadge>
-                                <FwbBadge v-if="acc?.holder_name" type="indigo">{{ acc.holder_name }}</FwbBadge>
-                                <FwbBadge v-if="acc?.currency" type="yellow">{{ acc.currency }}</FwbBadge>
-                            </div>
-                            <div class="flex items-center gap-2">
-                                <button><EditIcon @click="openDrawerAddTrr(true, acc.id)" size="md" css="text-gray-500 hover:text-gray-800" /></button>
-                                <button @click="deleteTrr(acc.id, acc?.iban || acc?.account_number)"><TrashBinIcon size="md" css="text-red-600 hover:text-red-700" /></button>
-                            </div>
-                        </div>
-                        <p class="text-sm md:text-base leading-7 text-gray-900">
-                            {{ acc?.iban || acc?.account_number || acc?.account || acc?.nu || acc?.number || '-' }}
-                        </p>
-                        <p v-if="acc?.notes" class="mt-1 text-xs text-gray-500 whitespace-pre-wrap">{{ acc.notes }}</p>
-                    </div>
-                </template>
-                <p v-else class="p-2 text-sm text-gray-500">Ni TRR računov.</p>
-            </div>
-        </CusTab>
-        <CusTab name="other" title="Drugo"> 
-            ssss4
-        </CusTab>
-    </CusTabs>
-    <PersonUpdateForm 
-        :show="drawerUpdatePerson"
-        @close="drawerUpdatePerson = false"
-        :person="person"
-    />
+            <p class="text-sm md:text-base leading-7 text-gray-900">
+              {{
+                acc?.iban ||
+                acc?.account_number ||
+                acc?.account ||
+                acc?.nu ||
+                acc?.number ||
+                "-"
+              }}
+            </p>
+            <p v-if="acc?.notes" class="mt-1 text-xs text-gray-500 whitespace-pre-wrap">
+              {{ acc.notes }}
+            </p>
+          </div>
+        </template>
+        <p v-else class="p-2 text-sm text-gray-500">Ni TRR računov.</p>
+      </div>
+    </CusTab>
+  </CusTabs>
+  <PersonUpdateForm
+    :show="drawerUpdatePerson"
+    @close="drawerUpdatePerson = false"
+    :person="person"
+  />
 
-    <AddressCreateForm 
-        :show="drawerAddAddress"
-        @close="drawerAddAddress = false"
-        :person="person"
-        :types="types.address_types"
-        :id="editAddressId"
-        :edit="editAddress"
-    />
-    <AddressUpdateForm 
-        :show="drawerAddAddress && editAddress"
-        @close="drawerAddAddress = false"
-        :person="person"
-        :types="types.address_types"
-        :id="editAddressId"
-    />
+  <AddressCreateForm
+    :show="drawerAddAddress"
+    @close="drawerAddAddress = false"
+    :person="person"
+    :types="types.address_types"
+    :id="editAddressId"
+    :edit="editAddress"
+  />
+  <AddressUpdateForm
+    :show="drawerAddAddress && editAddress"
+    @close="drawerAddAddress = false"
+    :person="person"
+    :types="types.address_types"
+    :id="editAddressId"
+  />
 
-    <PhoneCreateForm 
-        :show="drawerAddPhone"
-        @close="drawerAddPhone = false"
-        :person="person"
-        :types="types.phone_types"
-        :id="editPhoneId"
-        :edit="editPhone"
-    />
-    <!-- Email dialogs -->
-    <EmailCreateForm
-        :show="drawerAddEmail && !editEmail"
-        @close="drawerAddEmail = false"
-        :person="person"
-        :types="types.email_types ?? []"
-        :is-client-context="!!person?.client"
-    />
-    <EmailUpdateForm
-        :show="drawerAddEmail && editEmail"
-        @close="drawerAddEmail = false"
-        :person="person"
-        :types="types.email_types ?? []"
-        :id="editEmailId"
-        :is-client-context="!!person?.client"
-    />
+  <PhoneCreateForm
+    :show="drawerAddPhone"
+    @close="drawerAddPhone = false"
+    :person="person"
+    :types="types.phone_types"
+    :id="editPhoneId"
+    :edit="editPhone"
+  />
+  <!-- Email dialogs -->
+  <EmailCreateForm
+    :show="drawerAddEmail && !editEmail"
+    @close="drawerAddEmail = false"
+    :person="person"
+    :types="types.email_types ?? []"
+    :is-client-context="!!person?.client"
+  />
+  <EmailUpdateForm
+    :show="drawerAddEmail && editEmail"
+    @close="drawerAddEmail = false"
+    :person="person"
+    :types="types.email_types ?? []"
+    :id="editEmailId"
+    :is-client-context="!!person?.client"
+  />
 
-    <!-- TRR dialogs -->
-    <TrrCreateForm
-        :show="drawerAddTrr && !editTrr"
-        @close="drawerAddTrr = false"
-        :person="person"
-        :types="types.trr_types ?? []"
-        :banks="types.banks ?? []"
-        :currencies="types.currencies ?? ['EUR']"
-    />
-    <TrrUpdateForm
-        :show="drawerAddTrr && editTrr"
-        @close="drawerAddTrr = false"
-        :person="person"
-        :types="types.trr_types ?? []"
-        :banks="types.banks ?? []"
-        :currencies="types.currencies ?? ['EUR']"
-        :id="editTrrId"
-    />
-    
-    <!-- Confirm deletion dialog -->
-    <ConfirmDialog
-        :show="confirm.show"
-        :title="confirm.title"
-        :message="confirm.message"
-        confirm-text="Izbriši"
-        cancel-text="Prekliči"
-        :danger="true"
-        @close="closeConfirm"
-        @confirm="onConfirmDelete"
-    />
-    
-</template>
+  <!-- TRR dialogs -->
+  <TrrCreateForm
+    :show="drawerAddTrr && !editTrr"
+    @close="drawerAddTrr = false"
+    :person="person"
+    :types="types.trr_types ?? []"
+    :banks="types.banks ?? []"
+    :currencies="types.currencies ?? ['EUR']"
+  />
+  <TrrUpdateForm
+    :show="drawerAddTrr && editTrr"
+    @close="drawerAddTrr = false"
+    :person="person"
+    :types="types.trr_types ?? []"
+    :banks="types.banks ?? []"
+    :currencies="types.currencies ?? ['EUR']"
+    :id="editTrrId"
+  />
+
+  <!-- Confirm deletion dialog -->
+  <ConfirmDialog
+    :show="confirm.show"
+    :title="confirm.title"
+    :message="confirm.message"
+    confirm-text="Izbriši"
+    cancel-text="Prekliči"
+    :danger="true"
+    @close="closeConfirm"
+    @confirm="onConfirmDelete"
+  />
+</template>