From 8f2e5e282ce2322520e26c4ca4e1fa71b15a78fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20Pocrnji=C4=8D?= <simon.pocrnjic@lume-solutions.si>
Date: Sat, 18 Oct 2025 22:56:51 +0200
Subject: [PATCH] Changes to UI

---
 app/Http/Controllers/WorkflowController.php   |   4 +-
 .../Components/DataTable/DataTableClient.vue  |  29 +-
 .../Components/DataTable/DataTableServer.vue  |   2 +-
 resources/js/Components/InlineColorPicker.vue |  61 ++
 resources/js/Components/PersonInfoGrid.vue    | 795 ++++++++++--------
 resources/js/Pages/Dashboard.vue              |   4 +-
 resources/js/Pages/Imports/Create.vue         |  28 +-
 resources/js/Pages/Imports/Index.vue          | 212 +++--
 resources/js/Pages/Segments/Index.vue         |  11 +-
 resources/js/Pages/Segments/Show.vue          | 180 ++--
 .../Pages/Settings/Partials/ActionTable.vue   | 595 ++++++-------
 .../Pages/Settings/Partials/DecisionTable.vue | 643 +++++++-------
 routes/breadcrumbs.php                        |  13 +
 13 files changed, 1440 insertions(+), 1137 deletions(-)
 create mode 100644 resources/js/Components/InlineColorPicker.vue

diff --git a/app/Http/Controllers/WorkflowController.php b/app/Http/Controllers/WorkflowController.php
index 85f62a3..2498478 100644
--- a/app/Http/Controllers/WorkflowController.php
+++ b/app/Http/Controllers/WorkflowController.php
@@ -14,8 +14,8 @@ class WorkflowController extends Controller
     public function index(Request $request)
     {
         return Inertia::render('Settings/Workflow/Index', [
-            'actions' => Action::query()->with(['decisions', 'segment'])->withCount('activities')->get(),
-            'decisions' => Decision::query()->with('actions')->withCount('activities')->get(),
+            'actions' => Action::query()->with(['decisions', 'segment'])->withCount('activities')->orderBy('id')->get(),
+            'decisions' => Decision::query()->with('actions')->withCount('activities')->orderBy('id')->get(),
             'segments' => Segment::query()->get(),
             'email_templates' => EmailTemplate::query()->where('active', true)->get(['id', 'name', 'entity_types']),
         ]);
diff --git a/resources/js/Components/DataTable/DataTableClient.vue b/resources/js/Components/DataTable/DataTableClient.vue
index f1b879c..455950b 100644
--- a/resources/js/Components/DataTable/DataTableClient.vue
+++ b/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
diff --git a/resources/js/Components/DataTable/DataTableServer.vue b/resources/js/Components/DataTable/DataTableServer.vue
index 5ca94b7..b2b3fa4 100644
--- a/resources/js/Components/DataTable/DataTableServer.vue
+++ b/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
diff --git a/resources/js/Components/InlineColorPicker.vue b/resources/js/Components/InlineColorPicker.vue
new file mode 100644
index 0000000..f1fa056
--- /dev/null
+++ b/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>
diff --git a/resources/js/Components/PersonInfoGrid.vue b/resources/js/Components/PersonInfoGrid.vue
index 291bc68..320060f 100644
--- a/resources/js/Components/PersonInfoGrid.vue
+++ b/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>
\ No newline at end of file
+  <!-- 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>
diff --git a/resources/js/Pages/Dashboard.vue b/resources/js/Pages/Dashboard.vue
index d69c042..8413c85 100644
--- a/resources/js/Pages/Dashboard.vue
+++ b/resources/js/Pages/Dashboard.vue
@@ -153,9 +153,7 @@ function safeCaseHref(uuid, segment = null) {
 
 <template>
   <AppLayout title="Nadzorna plošča">
-    <template #header>
-      <h2 class="font-semibold text-xl text-gray-800 leading-tight">Nadzorna plošča</h2>
-    </template>
+    <template #header> </template>
 
     <div class="max-w-7xl mx-auto space-y-10 py-6">
       <!-- KPI Cards with trends -->
diff --git a/resources/js/Pages/Imports/Create.vue b/resources/js/Pages/Imports/Create.vue
index 2a907b7..90e82e7 100644
--- a/resources/js/Pages/Imports/Create.vue
+++ b/resources/js/Pages/Imports/Create.vue
@@ -48,7 +48,7 @@ const filteredTemplates = computed(() => {
   if (!cuuid) {
     return list.filter((t) => t.client_id == null);
   }
-  return list.filter((t) => t.client_uuid === cuuid);
+  return list.filter((t) => t.client_uuid === cuuid || t.client_id == null);
 });
 
 const uploading = ref(false);
@@ -232,19 +232,7 @@ async function startImport() {
           </div>
 
           <!-- Actions -->
-          <div class="flex flex-wrap gap-3 pt-2">
-            <button
-              type="button"
-              @click="startImport"
-              :disabled="uploading"
-              class="inline-flex items-center gap-2 px-5 py-2.5 rounded bg-indigo-600 disabled:bg-indigo-300 text-white text-sm font-medium shadow-sm"
-            >
-              <span
-                v-if="uploading"
-                class="h-4 w-4 border-2 border-white/60 border-t-transparent rounded-full animate-spin"
-              ></span>
-              <span>{{ uploading ? "Nalagam..." : "Začni uvoz" }}</span>
-            </button>
+          <div class="flex flex-wrap justify-end gap-3 pt-2">
             <button
               type="button"
               @click="
@@ -258,6 +246,18 @@ async function startImport() {
             >
               Počisti
             </button>
+            <button
+              type="button"
+              @click="startImport"
+              :disabled="uploading"
+              class="inline-flex items-center gap-2 px-5 py-2.5 rounded bg-indigo-600 disabled:bg-indigo-300 text-white text-sm font-medium shadow-sm"
+            >
+              <span
+                v-if="uploading"
+                class="h-4 w-4 border-2 border-white/60 border-t-transparent rounded-full animate-spin"
+              ></span>
+              <span>{{ uploading ? "Nalagam..." : "Začni uvoz" }}</span>
+            </button>
           </div>
 
           <div class="text-xs text-gray-400 pt-4 border-t">
diff --git a/resources/js/Pages/Imports/Index.vue b/resources/js/Pages/Imports/Index.vue
index b0b3eae..3d9f642 100644
--- a/resources/js/Pages/Imports/Index.vue
+++ b/resources/js/Pages/Imports/Index.vue
@@ -3,6 +3,16 @@ import AppLayout from "@/Layouts/AppLayout.vue";
 import { Link, router } from "@inertiajs/vue3";
 import { ref } from "vue";
 import ConfirmationModal from "@/Components/ConfirmationModal.vue";
+import DataTableServer from "@/Components/DataTable/DataTableServer.vue";
+import Dropdown from "@/Components/Dropdown.vue";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import {
+  faEllipsisVertical,
+  faEye,
+  faPlay,
+  faTrash,
+  faCircleCheck,
+} from "@fortawesome/free-solid-svg-icons";
 
 const props = defineProps({
   imports: Object,
@@ -11,6 +21,7 @@ const props = defineProps({
 const deletingId = ref(null);
 const confirming = ref(false);
 const errorMsg = ref(null);
+const search = ref(new URLSearchParams(window.location.search).get("search") || "");
 
 function canDelete(status) {
   return !["completed", "processing"].includes(status);
@@ -47,6 +58,28 @@ function statusBadge(status) {
   };
   return map[status] || "bg-gray-100 text-gray-800";
 }
+
+const columns = [
+  { key: "created_at", label: "Datum" },
+  { key: "original_name", label: "Datoteka" },
+  { key: "status", label: "Status" },
+  { key: "client", label: "Naročnik" },
+  { key: "template", label: "Predloga" },
+  { key: "actions", label: "Akcije", class: "w-px" },
+];
+
+function formatDateTimeNoSeconds(value) {
+  if (!value) return "-";
+  const d = new Date(value);
+  if (isNaN(d)) return String(value);
+  return d.toLocaleString("sl-SI", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
 </script>
 
 <template>
@@ -54,89 +87,116 @@ function statusBadge(status) {
     <template #header>
       <div class="flex items-center justify-between">
         <h2 class="font-semibold text-xl text-gray-800 leading-tight">Uvozi</h2>
-        <Link
-          :href="route('imports.create')"
-          class="px-3 py-2 rounded bg-blue-600 text-white text-sm"
-          >Novi uvoz</Link
-        >
       </div>
     </template>
 
     <div class="py-6">
       <div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
-        <div class="bg-white shadow sm:rounded-lg p-6">
-          <div class="overflow-x-auto">
-            <table class="min-w-full text-sm">
-              <thead>
-                <tr class="text-left text-xs uppercase text-gray-500 border-b">
-                  <th class="p-2">Datum</th>
-                  <th class="p-2">Datoteka</th>
-                  <th class="p-2">Status</th>
-                  <th class="p-2">Naročnik</th>
-                  <th class="p-2">Predloga</th>
-                  <th class="p-2">Akcije</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr v-for="imp in imports.data" :key="imp.uuid" class="border-b">
-                  <td class="p-2 whitespace-nowrap">
-                    {{ new Date(imp.created_at).toLocaleString() }}
-                  </td>
-                  <td class="p-2">{{ imp.original_name }}</td>
-                  <td class="p-2">
-                    <span
-                      :class="['px-2 py-0.5 rounded text-xs', statusBadge(imp.status)]"
-                      >{{ imp.status }}</span
-                    >
-                  </td>
-                  <td class="p-2">{{ imp.client?.person?.full_name ?? "—" }}</td>
-                  <td class="p-2">{{ imp.template?.name ?? "—" }}</td>
-                  <td class="p-2 space-x-2">
-                    <Link
-                      :href="route('imports.continue', { import: imp.uuid })"
-                      class="px-2 py-1 rounded bg-gray-200 text-gray-800 text-xs"
-                      >Poglej</Link
-                    >
-                    <Link
-                      v-if="imp.status !== 'completed'"
-                      :href="route('imports.continue', { import: imp.uuid })"
-                      class="px-2 py-1 rounded bg-amber-600 text-white text-xs"
-                      >Nadaljuj</Link
-                    >
-                    <button
-                      v-if="canDelete(imp.status)"
-                      class="px-2 py-1 rounded bg-red-600 text-white text-xs"
-                      @click="confirmDelete(imp)"
-                    >
-                      Izbriši
-                    </button>
-                    <span v-else class="text-xs text-gray-400">Zaključen</span>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+        <div class="flex flex-col gap-3 bg-white shadow sm:rounded-lg p-4">
+          <div class="flex justify-end">
+            <Link
+              :href="route('imports.create')"
+              class="px-3 py-2 rounded bg-blue-600 text-white text-sm"
+              >Novi uvoz</Link
+            >
           </div>
+          <DataTableServer
+            :columns="columns"
+            :rows="imports?.data || []"
+            :meta="
+              imports?.meta
+                ? {
+                    current_page: imports.meta.current_page,
+                    per_page: imports.meta.per_page,
+                    total: imports.meta.total,
+                    last_page: imports.meta.last_page,
+                  }
+                : {}
+            "
+            v-model:search="search"
+            route-name="imports.index"
+            :only-props="['imports']"
+            row-key="uuid"
+            empty-text="Ni uvozov."
+          >
+            <!-- Datum column formatted -->
+            <template #cell-created_at="{ row }">
+              {{ formatDateTimeNoSeconds(row.created_at) }}
+            </template>
 
-          <div class="flex items-center justify-between mt-4 text-sm text-gray-600">
-            <div>
-              Prikaz {{ imports.meta.from }}–{{ imports.meta.to }} od
-              {{ imports.meta.total }}
-            </div>
-            <div class="space-x-2">
-              <Link
-                v-if="imports.links.prev"
-                :href="imports.links.prev"
-                class="px-2 py-1 border rounded"
-                >Nazaj</Link
-              >
-              <Link
-                v-if="imports.links.next"
-                :href="imports.links.next"
-                class="px-2 py-1 border rounded"
-                >Naprej</Link
-              >
-            </div>
-          </div>
+            <!-- Status badge -->
+            <template #cell-status="{ row }">
+              <span :class="['px-2 py-0.5 rounded text-xs', statusBadge(row.status)]">
+                {{ row.status }}
+              </span>
+            </template>
+
+            <!-- Client name -->
+            <template #cell-client="{ row }">
+              {{ row.client?.person?.full_name ?? "—" }}
+            </template>
+
+            <!-- Template name -->
+            <template #cell-template="{ row }">
+              {{ row.template?.name ?? "—" }}
+            </template>
+
+            <!-- Actions -->
+            <template #cell-actions="{ row }">
+              <Dropdown width="48" :close-on-content-click="true">
+                <template #trigger>
+                  <button
+                    type="button"
+                    class="inline-flex items-center justify-center w-8 h-8 rounded hover:bg-gray-100"
+                    aria-label="Akcije"
+                  >
+                    <FontAwesomeIcon
+                      :icon="faEllipsisVertical"
+                      class="w-4 h-4 text-gray-600"
+                    />
+                  </button>
+                </template>
+                <template #content>
+                  <div class="py-1">
+                    <Link
+                      :href="route('imports.continue', { import: row.uuid })"
+                      class="flex items-center w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
+                    >
+                      <FontAwesomeIcon :icon="faEye" class="w-4 h-4 me-2 text-gray-500" />
+                      <span>Poglej</span>
+                    </Link>
+                    <Link
+                      v-if="row.status !== 'completed'"
+                      :href="route('imports.continue', { import: row.uuid })"
+                      class="flex items-center w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
+                    >
+                      <FontAwesomeIcon
+                        :icon="faPlay"
+                        class="w-4 h-4 me-2 text-gray-500"
+                      />
+                      <span>Nadaljuj</span>
+                    </Link>
+                    <button
+                      v-if="canDelete(row.status)"
+                      type="button"
+                      class="flex items-center w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50"
+                      @click="confirmDelete(row)"
+                    >
+                      <FontAwesomeIcon :icon="faTrash" class="w-4 h-4 me-2" />
+                      <span>Izbriši</span>
+                    </button>
+                    <div
+                      v-else
+                      class="flex items-center px-4 py-2 text-sm text-gray-400 cursor-default"
+                    >
+                      <FontAwesomeIcon :icon="faCircleCheck" class="w-4 h-4 me-2" />
+                      <span>Zaključen</span>
+                    </div>
+                  </div>
+                </template>
+              </Dropdown>
+            </template>
+          </DataTableServer>
           <ConfirmationModal
             :show="confirming"
             @close="
diff --git a/resources/js/Pages/Segments/Index.vue b/resources/js/Pages/Segments/Index.vue
index c8236e3..876cfa8 100644
--- a/resources/js/Pages/Segments/Index.vue
+++ b/resources/js/Pages/Segments/Index.vue
@@ -43,7 +43,7 @@ function formatCurrencyEUR(value) {
 
 <template>
   <AppLayout title="Segmenti">
-    <template #header>Segmenti</template>
+    <template #header></template>
     <div class="pt-12">
       <div class="max-w-5xl mx-auto sm:px-6 lg:px-8">
         <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-4 mb-6">
@@ -82,7 +82,7 @@ function formatCurrencyEUR(value) {
                 </span>
               </div>
               <p class="text-sm text-gray-600 min-h-[1.25rem]">
-                {{ s.description || "—" }}
+                {{ s.description || "" }}
               </p>
               <div class="mt-4 flex items-center justify-between">
                 <div class="text-sm text-gray-500">Vsota stanj</div>
@@ -90,13 +90,6 @@ function formatCurrencyEUR(value) {
                   {{ formatCurrencyEUR(s.total_balance) }}
                 </div>
               </div>
-              <div class="mt-3">
-                <Link
-                  :href="route('segments.show', s.id)"
-                  class="text-sm text-indigo-600 hover:underline"
-                  >Odpri</Link
-                >
-              </div>
             </div>
           </div>
           <div v-else class="text-gray-500">Ni aktivnih segmentov.</div>
diff --git a/resources/js/Pages/Segments/Show.vue b/resources/js/Pages/Segments/Show.vue
index 18aad8e..fe52ea7 100644
--- a/resources/js/Pages/Segments/Show.vue
+++ b/resources/js/Pages/Segments/Show.vue
@@ -1,35 +1,27 @@
 <script setup>
 import AppLayout from "@/Layouts/AppLayout.vue";
-import { Link, router } from "@inertiajs/vue3";
-import { debounce } from "lodash";
-import { ref, watch, onUnmounted } from "vue";
+import { Link } from "@inertiajs/vue3";
+import { ref } from "vue";
+import DataTableServer from "@/Components/DataTable/DataTableServer.vue";
 
 const props = defineProps({
   segment: Object,
   contracts: Object, // LengthAwarePaginator payload from Laravel
 });
 
-const search = ref("");
-const applySearch = debounce((v) => {
-  const params = Object.fromEntries(
-    new URLSearchParams(window.location.search).entries()
-  );
-  if (v) {
-    params.search = v;
-  } else {
-    delete params.search;
-  }
-  // reset pagination when typing
-  delete params.page;
-  router.get(
-    route("segments.show", { segment: props.segment?.id ?? props.segment }),
-    params,
-    { preserveState: true, replace: true, preserveScroll: true }
-  );
-}, 300);
+// Initialize search from current URL so input reflects server filter
+const search = ref(new URLSearchParams(window.location.search).get("search") || "");
 
-watch(search, (v) => applySearch(v));
-onUnmounted(() => applySearch.cancel && applySearch.cancel());
+// Column definitions for the server-driven table
+const columns = [
+  { key: "reference", label: "Pogodba", sortable: true },
+  { key: "client_case", label: "Primer" },
+  { key: "client", label: "Stranka" },
+  { key: "type", label: "Vrsta" },
+  { key: "start_date", label: "Začetek", sortable: true },
+  { key: "end_date", label: "Konec", sortable: true },
+  { key: "account", label: "Stanje", align: "right" },
+];
 
 function formatDate(value) {
   if (!value) {
@@ -56,100 +48,66 @@ function formatCurrency(value) {
 
 <template>
   <AppLayout :title="`Segment: ${segment?.name || ''}`">
-    <template #header>
-      <div class="flex items-center justify-between">
-        <h1 class="text-xl font-semibold">Segment: {{ segment?.name }}</h1>
-        <Link
-          :href="route('segments.index')"
-          class="text-sm text-indigo-600 hover:underline"
-          >Nazaj na segmente</Link
-        >
-      </div>
-    </template>
+    <template #header> </template>
     <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-      <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-6">
+      <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-4">
+        <h2 class="text-lg">{{ segment.name }}</h2>
         <div class="text-sm text-gray-600 mb-4">{{ segment?.description }}</div>
-        <div class="flex items-center justify-between mb-4 gap-3">
-          <input
-            v-model="search"
-            type="text"
-            placeholder="Iskanje po referenci ali imenu"
-            class="w-full sm:w-80 rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 px-3 py-2 text-sm"
-          />
-        </div>
-        <div class="overflow-x-auto">
-          <table class="min-w-full text-left text-sm">
-            <thead>
-              <tr class="border-b">
-                <th class="py-2 pr-4">Pogodba</th>
-                <th class="py-2 pr-4">Primer</th>
-                <th class="py-2 pr-4">Stranka</th>
-                <th class="py-2 pr-4">Vrsta</th>
-                <th class="py-2 pr-4">Začetek</th>
-                <th class="py-2 pr-4">Konec</th>
-                <th class="py-2 pr-4">Stanje</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr
-                v-for="c in contracts.data"
-                :key="c.uuid"
-                class="border-b last:border-0"
-              >
-                <td class="py-2 pr-4">{{ c.reference }}</td>
-                <td class="py-2 pr-4">
-                  <Link
-                    v-if="c.client_case?.uuid"
-                    :href="
-                      route('clientCase.show', {
-                        client_case: c.client_case.uuid,
-                        segment: segment.id,
-                      })
-                    "
-                    class="text-indigo-600 hover:underline"
-                  >
-                    {{ c.client_case?.person?.full_name || "Primer stranke" }}
-                  </Link>
-                  <span v-else>{{ c.client_case?.person?.full_name || "-" }}</span>
-                </td>
-                <td class="py-2 pr-4">{{ c.client?.person?.full_name || "-" }}</td>
-                <td class="py-2 pr-4">{{ c.type?.name }}</td>
-                <td class="py-2 pr-4">{{ formatDate(c.start_date) }}</td>
-                <td class="py-2 pr-4">{{ formatDate(c.end_date) }}</td>
-                <td class="py-2 pr-4">{{ formatCurrency(c.account?.balance_amount) }}</td>
-              </tr>
-              <tr v-if="!contracts.data || contracts.data.length === 0">
-                <td colspan="7" class="py-4 text-gray-500">Ni pogodb v tem segmentu.</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
 
-        <!-- Pagination -->
-        <div
-          class="flex items-center justify-between mt-4 text-sm text-gray-700"
-          v-if="contracts.total > 0"
+        <DataTableServer
+          :columns="columns"
+          :rows="contracts?.data || []"
+          :meta="contracts || {}"
+          v-model:search="search"
+          route-name="segments.show"
+          :route-params="{ segment: segment?.id ?? segment }"
+          :only-props="['contracts']"
+          :page-size-options="[10, 25, 50]"
+          empty-text="Ni pogodb v tem segmentu."
+          row-key="uuid"
         >
-          <div>
-            Prikazano {{ contracts.from || 0 }}–{{ contracts.to || 0 }} od
-            {{ contracts.total }}
-          </div>
-          <div class="flex items-center gap-2">
+          <!-- Primer (client_case) cell with link when available -->
+          <template #cell-client_case="{ row }">
             <Link
-              v-if="contracts.prev_page_url"
-              :href="contracts.prev_page_url"
-              class="px-2 py-1 border rounded hover:bg-gray-50"
-              >Prejšnja</Link
+              v-if="row.client_case?.uuid"
+              :href="
+                route('clientCase.show', {
+                  client_case: row.client_case.uuid,
+                  segment: segment?.id ?? segment,
+                })
+              "
+              class="text-indigo-600 hover:underline"
             >
-            <span>Stran {{ contracts.current_page }} / {{ contracts.last_page }}</span>
-            <Link
-              v-if="contracts.next_page_url"
-              :href="contracts.next_page_url"
-              class="px-2 py-1 border rounded hover:bg-gray-50"
-              >Naslednja</Link
-            >
-          </div>
-        </div>
+              {{ row.client_case?.person?.full_name || "Primer stranke" }}
+            </Link>
+            <span v-else>{{ row.client_case?.person?.full_name || "-" }}</span>
+          </template>
+
+          <!-- Stranka (client) name -->
+          <template #cell-client="{ row }">
+            {{ row.client?.person?.full_name || "-" }}
+          </template>
+
+          <!-- Vrsta (type) -->
+          <template #cell-type="{ row }">
+            {{ row.type?.name || "-" }}
+          </template>
+
+          <!-- Dates formatted -->
+          <template #cell-start_date="{ row }">
+            {{ formatDate(row.start_date) }}
+          </template>
+          <template #cell-end_date="{ row }">
+            {{ formatDate(row.end_date) }}
+          </template>
+
+          <!-- Account balance formatted -->
+          <template #cell-account="{ row }">
+            <div class="text-right">
+              {{ formatCurrency(row.account?.balance_amount) }}
+            </div>
+          </template>
+        </DataTableServer>
       </div>
     </div>
   </AppLayout>
diff --git a/resources/js/Pages/Settings/Partials/ActionTable.vue b/resources/js/Pages/Settings/Partials/ActionTable.vue
index daf23d8..f56c5cd 100644
--- a/resources/js/Pages/Settings/Partials/ActionTable.vue
+++ b/resources/js/Pages/Settings/Partials/ActionTable.vue
@@ -1,20 +1,22 @@
 <script setup>
-import { FwbTable, FwbTableBody, FwbTableHead, FwbTableHeadCell, FwbTableCell, FwbTableRow } from 'flowbite-vue';
-import { EditIcon, TrashBinIcon } from '@/Utilities/Icons';
-import DialogModal from '@/Components/DialogModal.vue';
-import ConfirmationModal from '@/Components/ConfirmationModal.vue';
-import { computed, onMounted, ref, watch } from 'vue';
-import { router, useForm } from '@inertiajs/vue3';
-import InputLabel from '@/Components/InputLabel.vue';
-import TextInput from '@/Components/TextInput.vue';
-import Multiselect from 'vue-multiselect';
-import PrimaryButton from '@/Components/PrimaryButton.vue';
-import ActionMessage from '@/Components/ActionMessage.vue';
+// flowbite-vue table imports removed; using DataTableClient
+import { EditIcon, TrashBinIcon } from "@/Utilities/Icons";
+import DialogModal from "@/Components/DialogModal.vue";
+import ConfirmationModal from "@/Components/ConfirmationModal.vue";
+import { computed, onMounted, ref } from "vue";
+import { router, useForm } from "@inertiajs/vue3";
+import InputLabel from "@/Components/InputLabel.vue";
+import TextInput from "@/Components/TextInput.vue";
+import Multiselect from "vue-multiselect";
+import PrimaryButton from "@/Components/PrimaryButton.vue";
+import ActionMessage from "@/Components/ActionMessage.vue";
+import DataTableClient from "@/Components/DataTable/DataTableClient.vue";
+import InlineColorPicker from "@/Components/InlineColorPicker.vue";
 
 const props = defineProps({
-    actions: Array,
-    decisions: Array,
-    segments: Array
+  actions: Array,
+  decisions: Array,
+  segments: Array,
 });
 
 const drawerEdit = ref(false);
@@ -22,331 +24,350 @@ const drawerCreate = ref(false);
 const showDelete = ref(false);
 const toDelete = ref(null);
 
-const search = ref('');
+const search = ref("");
 const selectedSegment = ref(null);
 
 const selectOptions = ref([]);
 const segmentOptions = ref([]);
 
+// DataTable state
+const sort = ref({ key: null, direction: null });
+const page = ref(1);
+const pageSize = ref(25);
+const columns = [
+  { key: "id", label: "#", sortable: true, class: "w-16" },
+  { key: "name", label: "Name", sortable: true },
+  { key: "color_tag", label: "Color tag", sortable: false },
+  { key: "decisions", label: "Decisions", sortable: false, class: "w-32" },
+];
+
 const form = useForm({
-    id: 0,
-    name: '',
-    color_tag: '',
-    segment_id: null,
-    decisions: []
+  id: 0,
+  name: "",
+  color_tag: "",
+  segment_id: null,
+  decisions: [],
 });
 
 const createForm = useForm({
-    name: '',
-    color_tag: '',
-    segment_id: null,
-    decisions: []
+  name: "",
+  color_tag: "",
+  segment_id: null,
+  decisions: [],
 });
 
 const openEditDrawer = (item) => {
-    form.decisions = [];
-    form.id = item.id;
-    form.name = item.name;
-    form.color_tag = item.color_tag;
-    form.segment_id = item.segment ? item.segment.id : null;
-    drawerEdit.value = true;
+  form.decisions = [];
+  form.id = item.id;
+  form.name = item.name;
+  form.color_tag = item.color_tag;
+  form.segment_id = item.segment ? item.segment.id : null;
+  drawerEdit.value = true;
 
-    item.decisions.forEach((d) => {
-        form.decisions.push({
-            name: d.name,
-            id: d.id
-        });
-    })
-}
+  item.decisions.forEach((d) => {
+    form.decisions.push({
+      name: d.name,
+      id: d.id,
+    });
+  });
+};
 
 const closeEditDrawer = () => {
-    drawerEdit.value = false;
-    form.reset();
-}
+  drawerEdit.value = false;
+  form.reset();
+};
 
 const openCreateDrawer = () => {
-    createForm.reset();
-    drawerCreate.value = true;
-}
+  createForm.reset();
+  drawerCreate.value = true;
+};
 
 const closeCreateDrawer = () => {
-    drawerCreate.value = false;
-    createForm.reset();
-}
+  drawerCreate.value = false;
+  createForm.reset();
+};
 
-const onColorPickerChange = () => {
-    console.log(form.color_tag);
-}
+// removed unused color picker change handler; InlineColorPicker handles updates
 
 onMounted(() => {
-    props.decisions.forEach((d) => {
-        selectOptions.value.push({
-            name: d.name,
-            id: d.id
-        });
-
+  props.decisions.forEach((d) => {
+    selectOptions.value.push({
+      name: d.name,
+      id: d.id,
     });
-    props.segments.forEach((s) => {
-        segmentOptions.value.push({
-            name: s.name,
-            id: s.id
-        })
-    })
-  
+  });
+  props.segments.forEach((s) => {
+    segmentOptions.value.push({
+      name: s.name,
+      id: s.id,
+    });
+  });
 });
 
 const filtered = computed(() => {
-    const term = search.value?.toLowerCase() ?? '';
-    return (props.actions || []).filter(a => {
-        const matchesSearch = !term || a.name?.toLowerCase().includes(term) || a.color_tag?.toLowerCase().includes(term);
-        const matchesSegment = !selectedSegment.value || a.segment?.id === selectedSegment.value;
-        return matchesSearch && matchesSegment;
-    });
+  const term = search.value?.toLowerCase() ?? "";
+  return (props.actions || []).filter((a) => {
+    const matchesSearch =
+      !term ||
+      a.name?.toLowerCase().includes(term) ||
+      a.color_tag?.toLowerCase().includes(term);
+    const matchesSegment =
+      !selectedSegment.value || a.segment?.id === selectedSegment.value;
+    return matchesSearch && matchesSegment;
+  });
 });
 
 const update = () => {
-    form.put(route('settings.actions.update', { id: form.id }), {
-        onSuccess: () => {
-            closeEditDrawer();
-        },
-    });
+  form.put(route("settings.actions.update", { id: form.id }), {
+    onSuccess: () => {
+      closeEditDrawer();
+    },
+  });
 };
 
 const store = () => {
-    createForm.post(route('settings.actions.store'), {
-        onSuccess: () => {
-            closeCreateDrawer();
-        },
-    });
+  createForm.post(route("settings.actions.store"), {
+    onSuccess: () => {
+      closeCreateDrawer();
+    },
+  });
 };
 
 const confirmDelete = (action) => {
-    toDelete.value = action;
-    showDelete.value = true;
+  toDelete.value = action;
+  showDelete.value = true;
 };
 
 const cancelDelete = () => {
-    toDelete.value = null;
-    showDelete.value = false;
+  toDelete.value = null;
+  showDelete.value = false;
 };
 
 const destroyAction = () => {
-    if (!toDelete.value) return;
-    router.delete(route('settings.actions.destroy', { id: toDelete.value.id }), {
-        preserveScroll: true,
-        onFinish: () => cancelDelete(),
-    });
+  if (!toDelete.value) return;
+  router.delete(route("settings.actions.destroy", { id: toDelete.value.id }), {
+    preserveScroll: true,
+    onFinish: () => cancelDelete(),
+  });
 };
-
 </script>
 <template>
-    <div class="p-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-        <div class="flex gap-3 items-center w-full sm:w-auto">
-            <TextInput v-model="search" placeholder="Search actions..." class="w-full sm:w-64" />
-            <div class="w-64">
-                <Multiselect
-                    v-model="selectedSegment"
-                    :options="segmentOptions.map(o=>o.id)"
-                    :multiple="false"
-                    :searchable="true"
-                    placeholder="Filter by segment"
-                    :append-to-body="true"
-                    :custom-label="(opt) => (segmentOptions.find(o=>o.id===opt)?.name || '')"
-                />
-            </div>
-        </div>
-        <PrimaryButton @click="openCreateDrawer">+ Dodaj akcijo</PrimaryButton>
+  <div class="p-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+    <div class="flex gap-3 items-center w-full sm:w-auto">
+      <TextInput
+        v-model="search"
+        placeholder="Search actions..."
+        class="w-full sm:w-64"
+      />
+      <div class="w-64">
+        <Multiselect
+          v-model="selectedSegment"
+          :options="segmentOptions.map((o) => o.id)"
+          :multiple="false"
+          :searchable="true"
+          placeholder="Filter by segment"
+          :append-to-body="true"
+          :custom-label="(opt) => segmentOptions.find((o) => o.id === opt)?.name || ''"
+        />
+      </div>
     </div>
+    <PrimaryButton @click="openCreateDrawer">+ Dodaj akcijo</PrimaryButton>
+  </div>
+  <div class="px-4 pb-4">
+    <DataTableClient
+      :columns="columns"
+      :rows="filtered"
+      :sort="sort"
+      :search="''"
+      :page="page"
+      :pageSize="pageSize"
+      :showToolbar="false"
+      @update:sort="(v) => (sort = v)"
+      @update:page="(v) => (page = v)"
+      @update:pageSize="(v) => (pageSize = v)"
+    >
+      <template #cell-color_tag="{ row }">
+        <div class="flex items-center gap-2">
+          <span
+            v-if="row.color_tag"
+            class="inline-block h-4 w-4 rounded"
+            :style="{ backgroundColor: row.color_tag }"
+          ></span>
+          <span>{{ row.color_tag || "—" }}</span>
+        </div>
+      </template>
+      <template #cell-decisions="{ row }">
+        {{ row.decisions?.length ?? 0 }}
+      </template>
+      <template #actions="{ row }">
+        <button class="px-2" @click="openEditDrawer(row)">
+          <EditIcon size="md" css="text-gray-500" />
+        </button>
+        <button
+          class="px-2 disabled:opacity-40"
+          :disabled="(row.activities_count ?? 0) > 0"
+          @click="confirmDelete(row)"
+        >
+          <TrashBinIcon size="md" css="text-red-500" />
+        </button>
+      </template>
+    </DataTableClient>
+  </div>
 
-    <fwb-table>
-        <fwb-table-head>
-            <fwb-table-head-cell>#</fwb-table-head-cell>
-            <fwb-table-head-cell>Name</fwb-table-head-cell>
-            <fwb-table-head-cell>Color tag</fwb-table-head-cell>
-            <fwb-table-head-cell>Decisions</fwb-table-head-cell>
-            <fwb-table-head-cell>
-                <span class="sr-only">Edit</span>
-            </fwb-table-head-cell>
-        </fwb-table-head>
-        <fwb-table-body>
-            <fwb-table-row v-for="act in filtered" :key="act.id">
-                <fwb-table-cell>{{ act.id }}</fwb-table-cell>
-                <fwb-table-cell>{{ act.name }}</fwb-table-cell>
-                <fwb-table-cell>
-                    <div class="flex items-center gap-2">
-                        <span class="inline-block h-4 w-4 rounded" :style="{ backgroundColor: act.color_tag }"></span>
-                        <span>{{ act.color_tag }}</span>
-                    </div>
-                </fwb-table-cell>
-                <fwb-table-cell>{{ act.decisions.length }}</fwb-table-cell>
-                <fwb-table-cell>
-                    <button class="px-2" @click="openEditDrawer(act)"><EditIcon size="md" css="text-gray-500" /></button>
-                    <button class="px-2 disabled:opacity-40" :disabled="(act.activities_count ?? 0) > 0" @click="confirmDelete(act)"><TrashBinIcon size="md" css="text-red-500" /></button>
-                </fwb-table-cell>
-            </fwb-table-row>
-        </fwb-table-body>
-    </fwb-table>
+  <DialogModal :show="drawerEdit" @close="closeEditDrawer">
+    <template #title>
+      <span>Spremeni akcijo</span>
+    </template>
+    <template #content>
+      <form @submit.prevent="update">
+        <div class="col-span-6 sm:col-span-4">
+          <InputLabel for="name" value="Ime" />
+          <TextInput
+            id="name"
+            ref="nameInput"
+            v-model="form.name"
+            type="text"
+            class="mt-1 block w-full"
+            autocomplete="name"
+          />
+        </div>
+        <div class="col-span-6 sm:col-span-4">
+          <InputLabel for="colorTag" value="Barva" />
+          <div class="mt-1">
+            <InlineColorPicker v-model="form.color_tag" />
+          </div>
+        </div>
 
-    <DialogModal :show="drawerEdit" @close="closeEditDrawer">
-        <template #title>
-            <span>Spremeni akcijo</span>
-        </template>
-        <template #content>
-            <form @submit.prevent="update">
-                <div class="col-span-6 sm:col-span-4">
-                    <InputLabel for="name" value="Ime"/>
-                    <TextInput 
-                        id="name"
-                        ref="nameInput"
-                        v-model="form.name"
-                        type="text"
-                        class="mt-1 block w-full"
-                        autocomplete="name"
-                    />
-                </div>
-                <div class="col-span-6 sm:col-span-4">
-                    <InputLabel for="colorTag" value="Barva"/>
-                    <div class="mt-1 w-full border flex p-1">
-                        <TextInput 
-                            id="colorTag"
-                            ref="colorTagInput"
-                            v-model="form.color_tag"
-                            @change="onColorPickerChange"
-                            type="color"
-                            class="mr-2" 
-                            autocomplete="color-tag"
-                        />
-                        <span>{{ form.color_tag }}</span>
-                    </div>
-                </div>
-                
-                <div class="col-span-6 sm:col-span-4">
-                    <InputLabel for="segmentEdit" value="Segment"/>
-                    <multiselect 
-                        id="segmentEdit"
-                        v-model="form.segment_id"
-                        :options="segmentOptions.map(s=>s.id)"
-                        :multiple="false"
-                        :searchable="true"
-                        :taggable="false"
-                        placeholder="Izberi segment"
-                        :append-to-body="true"
-                        :custom-label="(opt) => (segmentOptions.find(s=>s.id===opt)?.name || '')"
-                    />
-                </div>
+        <div class="col-span-6 sm:col-span-4">
+          <InputLabel for="segmentEdit" value="Segment" />
+          <multiselect
+            id="segmentEdit"
+            v-model="form.segment_id"
+            :options="segmentOptions.map((s) => s.id)"
+            :multiple="false"
+            :searchable="true"
+            :taggable="false"
+            placeholder="Izberi segment"
+            :append-to-body="true"
+            :custom-label="(opt) => segmentOptions.find((s) => s.id === opt)?.name || ''"
+          />
+        </div>
 
-                <div class="col-span-6 sm:col-span-4">
-                    <InputLabel for="decisions" value="Odločitve"/>
-                    <multiselect 
-                        id="decisions"
-                        ref="decisionsSelect"
-                        v-model="form.decisions" 
-                        :options="selectOptions"
-                        :multiple="true"
-                        track-by="id"
-                        :taggable="true"
-                        placeholder="Dodaj odločitev"
-                        :append-to-body="true"
-                        label="name"
-                    />
-                </div>
+        <div class="col-span-6 sm:col-span-4">
+          <InputLabel for="decisions" value="Odločitve" />
+          <multiselect
+            id="decisions"
+            ref="decisionsSelect"
+            v-model="form.decisions"
+            :options="selectOptions"
+            :multiple="true"
+            track-by="id"
+            :taggable="true"
+            placeholder="Dodaj odločitev"
+            :append-to-body="true"
+            label="name"
+          />
+        </div>
 
-                <div class="flex justify-end mt-4">
-                    <ActionMessage :on="form.recentlySuccessful" class="me-3">
-                        Shranjuje.
-                    </ActionMessage>
+        <div class="flex justify-end mt-4">
+          <ActionMessage :on="form.recentlySuccessful" class="me-3">
+            Shranjuje.
+          </ActionMessage>
 
-                    <PrimaryButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
-                        Shrani
-                    </PrimaryButton>
-                </div>
-            </form>
-        </template>
-    </DialogModal>
+          <PrimaryButton
+            :class="{ 'opacity-25': form.processing }"
+            :disabled="form.processing"
+          >
+            Shrani
+          </PrimaryButton>
+        </div>
+      </form>
+    </template>
+  </DialogModal>
 
-    <DialogModal :show="drawerCreate" @close="closeCreateDrawer">
-        <template #title>
-            <span>Dodaj akcijo</span>
-        </template>
-        <template #content>
-            <form @submit.prevent="store">
-                <div class="col-span-6 sm:col-span-4">
-                    <InputLabel for="nameCreate" value="Ime"/>
-                    <TextInput 
-                        id="nameCreate"
-                        v-model="createForm.name"
-                        type="text"
-                        class="mt-1 block w-full"
-                        autocomplete="name"
-                    />
-                </div>
-                <div class="col-span-6 sm:col-span-4">
-                    <InputLabel for="colorTagCreate" value="Barva"/>
-                    <div class="mt-1 w-full border flex p-1">
-                        <TextInput 
-                            id="colorTagCreate"
-                            v-model="createForm.color_tag"
-                            type="color"
-                            class="mr-2" 
-                            autocomplete="color-tag"
-                        />
-                        <span>{{ createForm.color_tag }}</span>
-                    </div>
-                </div>
-                
-                <div class="col-span-6 sm:col-span-4">
-                    <InputLabel for="segmentCreate" value="Segment"/>
-                    <multiselect 
-                        id="segmentCreate"
-                        v-model="createForm.segment_id"
-                        :options="segmentOptions.map(s=>s.id)"
-                        :multiple="false"
-                        :searchable="true"
-                        :taggable="false"
-                        placeholder="Izberi segment"
-                        :append-to-body="true"
-                        :custom-label="(opt) => (segmentOptions.find(s=>s.id===opt)?.name || '')"
-                    />
-                </div>
+  <DialogModal :show="drawerCreate" @close="closeCreateDrawer">
+    <template #title>
+      <span>Dodaj akcijo</span>
+    </template>
+    <template #content>
+      <form @submit.prevent="store">
+        <div class="col-span-6 sm:col-span-4">
+          <InputLabel for="nameCreate" value="Ime" />
+          <TextInput
+            id="nameCreate"
+            v-model="createForm.name"
+            type="text"
+            class="mt-1 block w-full"
+            autocomplete="name"
+          />
+        </div>
+        <div class="col-span-6 sm:col-span-4">
+          <InputLabel for="colorTagCreate" value="Barva" />
+          <div class="mt-1">
+            <InlineColorPicker v-model="createForm.color_tag" />
+          </div>
+        </div>
 
-                <div class="col-span-6 sm:col-span-4">
-                    <InputLabel for="decisionsCreate" value="Odločitve"/>
-                    <multiselect 
-                        id="decisionsCreate"
-                        v-model="createForm.decisions" 
-                        :options="selectOptions"
-                        :multiple="true"
-                        track-by="id"
-                        :taggable="true"
-                        placeholder="Dodaj odločitev"
-                        :append-to-body="true"
-                        label="name"
-                    />
-                </div>
+        <div class="col-span-6 sm:col-span-4">
+          <InputLabel for="segmentCreate" value="Segment" />
+          <multiselect
+            id="segmentCreate"
+            v-model="createForm.segment_id"
+            :options="segmentOptions.map((s) => s.id)"
+            :multiple="false"
+            :searchable="true"
+            :taggable="false"
+            placeholder="Izberi segment"
+            :append-to-body="true"
+            :custom-label="(opt) => segmentOptions.find((s) => s.id === opt)?.name || ''"
+          />
+        </div>
 
-                <div class="flex justify-end mt-4">
-                    <ActionMessage :on="createForm.recentlySuccessful" class="me-3">
-                        Shranjuje.
-                    </ActionMessage>
+        <div class="col-span-6 sm:col-span-4">
+          <InputLabel for="decisionsCreate" value="Odločitve" />
+          <multiselect
+            id="decisionsCreate"
+            v-model="createForm.decisions"
+            :options="selectOptions"
+            :multiple="true"
+            track-by="id"
+            :taggable="true"
+            placeholder="Dodaj odločitev"
+            :append-to-body="true"
+            label="name"
+          />
+        </div>
 
-                    <PrimaryButton :class="{ 'opacity-25': createForm.processing }" :disabled="createForm.processing">
-                        Dodaj
-                    </PrimaryButton>
-                </div>
-            </form>
-        </template>
-    </DialogModal>
+        <div class="flex justify-end mt-4">
+          <ActionMessage :on="createForm.recentlySuccessful" class="me-3">
+            Shranjuje.
+          </ActionMessage>
 
-    <ConfirmationModal :show="showDelete" @close="cancelDelete">
-        <template #title>
-            Delete action
-        </template>
-        <template #content>
-            Are you sure you want to delete action "{{ toDelete?.name }}"? This cannot be undone.
-        </template>
-        <template #footer>
-            <button @click="cancelDelete" class="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300 me-2">Cancel</button>
-            <PrimaryButton @click="destroyAction">Delete</PrimaryButton>
-        </template>
-    </ConfirmationModal>
-</template>
\ No newline at end of file
+          <PrimaryButton
+            :class="{ 'opacity-25': createForm.processing }"
+            :disabled="createForm.processing"
+          >
+            Dodaj
+          </PrimaryButton>
+        </div>
+      </form>
+    </template>
+  </DialogModal>
+
+  <ConfirmationModal :show="showDelete" @close="cancelDelete">
+    <template #title> Delete action </template>
+    <template #content>
+      Are you sure you want to delete action "{{ toDelete?.name }}"? This cannot be
+      undone.
+    </template>
+    <template #footer>
+      <button
+        @click="cancelDelete"
+        class="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300 me-2"
+      >
+        Cancel
+      </button>
+      <PrimaryButton @click="destroyAction">Delete</PrimaryButton>
+    </template>
+  </ConfirmationModal>
+</template>
diff --git a/resources/js/Pages/Settings/Partials/DecisionTable.vue b/resources/js/Pages/Settings/Partials/DecisionTable.vue
index 47e25bc..5fcda6e 100644
--- a/resources/js/Pages/Settings/Partials/DecisionTable.vue
+++ b/resources/js/Pages/Settings/Partials/DecisionTable.vue
@@ -1,20 +1,22 @@
 <script setup>
-import { FwbTable, FwbTableBody, FwbTableHead, FwbTableHeadCell, FwbTableCell, FwbTableRow } from 'flowbite-vue';
-import { EditIcon, TrashBinIcon } from '@/Utilities/Icons';
-import DialogModal from '@/Components/DialogModal.vue';
-import ConfirmationModal from '@/Components/ConfirmationModal.vue';
-import { computed, onMounted, ref } from 'vue';
-import { router, useForm } from '@inertiajs/vue3';
-import InputLabel from '@/Components/InputLabel.vue';
-import TextInput from '@/Components/TextInput.vue';
-import Multiselect from 'vue-multiselect';
-import PrimaryButton from '@/Components/PrimaryButton.vue';
-import ActionMessage from '@/Components/ActionMessage.vue';
+// flowbite-vue table imports removed; using DataTableClient
+import { EditIcon, TrashBinIcon } from "@/Utilities/Icons";
+import DialogModal from "@/Components/DialogModal.vue";
+import ConfirmationModal from "@/Components/ConfirmationModal.vue";
+import { computed, onMounted, ref } from "vue";
+import { router, useForm } from "@inertiajs/vue3";
+import InputLabel from "@/Components/InputLabel.vue";
+import TextInput from "@/Components/TextInput.vue";
+import Multiselect from "vue-multiselect";
+import PrimaryButton from "@/Components/PrimaryButton.vue";
+import ActionMessage from "@/Components/ActionMessage.vue";
+import DataTableClient from "@/Components/DataTable/DataTableClient.vue";
+import InlineColorPicker from "@/Components/InlineColorPicker.vue";
 
 const props = defineProps({
-    decisions: Array,
-    actions: Array,
-    emailTemplates: { type: Array, default: () => [] }
+  decisions: Array,
+  actions: Array,
+  emailTemplates: { type: Array, default: () => [] },
 });
 
 const drawerEdit = ref(false);
@@ -22,328 +24,403 @@ const drawerCreate = ref(false);
 const showDelete = ref(false);
 const toDelete = ref(null);
 
-const search = ref('');
+const search = ref("");
 const selectedTemplateId = ref(null);
 const onlyAutoMail = ref(false);
 
 const actionOptions = ref([]);
 
+// DataTable state
+const sort = ref({ key: null, direction: null });
+const page = ref(1);
+const pageSize = ref(25);
+const columns = [
+  { key: "id", label: "#", sortable: true, class: "w-16" },
+  { key: "name", label: "Name", sortable: true },
+  { key: "color_tag", label: "Color tag", sortable: false },
+  { key: "belongs", label: "Belongs to actions", sortable: false, class: "w-40" },
+  { key: "auto_mail", label: "Auto mail", sortable: false, class: "w-56" },
+];
+
 const form = useForm({
-    id: 0,
-    name: '',
-    color_tag: '',
-    actions: [],
-    auto_mail: false,
-    email_template_id: null,
+  id: 0,
+  name: "",
+  color_tag: "",
+  actions: [],
+  auto_mail: false,
+  email_template_id: null,
 });
 
 const createForm = useForm({
-    name: '',
-    color_tag: '',
-    actions: [],
-    auto_mail: false,
-    email_template_id: null,
+  name: "",
+  color_tag: "",
+  actions: [],
+  auto_mail: false,
+  email_template_id: null,
 });
 
 const openEditDrawer = (item) => {
-    form.actions = [];
-    form.id = item.id;
-    form.name = item.name;
-    form.color_tag = item.color_tag;
-    form.auto_mail = !!item.auto_mail;
-    form.email_template_id = item.email_template_id || null;
-    drawerEdit.value = true;
+  form.actions = [];
+  form.id = item.id;
+  form.name = item.name;
+  form.color_tag = item.color_tag;
+  form.auto_mail = !!item.auto_mail;
+  form.email_template_id = item.email_template_id || null;
+  drawerEdit.value = true;
 
-    item.actions.forEach((a) => {
-        form.actions.push({
-            name: a.name,
-            id: a.id
-        });
-    })
-}
+  item.actions.forEach((a) => {
+    form.actions.push({
+      name: a.name,
+      id: a.id,
+    });
+  });
+};
 
 const closeEditDrawer = () => {
-    drawerEdit.value = false;
-    form.reset();
-}
+  drawerEdit.value = false;
+  form.reset();
+};
 
 const openCreateDrawer = () => {
-    createForm.reset();
-    drawerCreate.value = true;
-}
+  createForm.reset();
+  drawerCreate.value = true;
+};
 
 const closeCreateDrawer = () => {
-    drawerCreate.value = false;
-    createForm.reset();
-}
+  drawerCreate.value = false;
+  createForm.reset();
+};
 
 onMounted(() => {
-    props.actions.forEach((a) => {
-        actionOptions.value.push({
-            name: a.name,
-            id: a.id
-        });
+  props.actions.forEach((a) => {
+    actionOptions.value.push({
+      name: a.name,
+      id: a.id,
     });
+  });
 });
 
 const filtered = computed(() => {
-    const term = search.value?.toLowerCase() ?? '';
-    const tplId = selectedTemplateId.value ? Number(selectedTemplateId.value) : null;
-    return (props.decisions || []).filter(d => {
-        const matchesSearch = !term || d.name?.toLowerCase().includes(term) || d.color_tag?.toLowerCase().includes(term);
-        const matchesAuto = !onlyAutoMail.value || !!d.auto_mail;
-        const matchesTemplate = !tplId || Number(d.email_template_id || 0) === tplId;
-        return matchesSearch && matchesAuto && matchesTemplate;
-    });
+  const term = search.value?.toLowerCase() ?? "";
+  const tplId = selectedTemplateId.value ? Number(selectedTemplateId.value) : null;
+  return (props.decisions || []).filter((d) => {
+    const matchesSearch =
+      !term ||
+      d.name?.toLowerCase().includes(term) ||
+      d.color_tag?.toLowerCase().includes(term);
+    const matchesAuto = !onlyAutoMail.value || !!d.auto_mail;
+    const matchesTemplate = !tplId || Number(d.email_template_id || 0) === tplId;
+    return matchesSearch && matchesAuto && matchesTemplate;
+  });
 });
 
 const update = () => {
-    form.put(route('settings.decisions.update', { id: form.id }), {
-        onSuccess: () => {
-            closeEditDrawer();
-        },
-    });
+  form.put(route("settings.decisions.update", { id: form.id }), {
+    onSuccess: () => {
+      closeEditDrawer();
+    },
+  });
 };
 
 const store = () => {
-    createForm.post(route('settings.decisions.store'), {
-        onSuccess: () => {
-            closeCreateDrawer();
-        },
-    });
+  createForm.post(route("settings.decisions.store"), {
+    onSuccess: () => {
+      closeCreateDrawer();
+    },
+  });
 };
 
 const confirmDelete = (decision) => {
-    toDelete.value = decision;
-    showDelete.value = true;
+  toDelete.value = decision;
+  showDelete.value = true;
 };
 
 const cancelDelete = () => {
-    toDelete.value = null;
-    showDelete.value = false;
+  toDelete.value = null;
+  showDelete.value = false;
 };
 
 const destroyDecision = () => {
-    if (!toDelete.value) return;
-    router.delete(route('settings.decisions.destroy', { id: toDelete.value.id }), {
-        preserveScroll: true,
-        onFinish: () => cancelDelete(),
-    });
+  if (!toDelete.value) return;
+  router.delete(route("settings.decisions.destroy", { id: toDelete.value.id }), {
+    preserveScroll: true,
+    onFinish: () => cancelDelete(),
+  });
 };
-
 </script>
 <template>
-    <div class="p-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
-        <div class="flex flex-col sm:flex-row gap-2 items-start sm:items-center">
-            <TextInput v-model="search" placeholder="Search decisions..." class="w-full sm:w-72" />
-            <select v-model="selectedTemplateId" class="block w-full sm:w-64 border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm">
-                <option :value="null">All templates</option>
-                <option v-for="t in emailTemplates" :key="t.id" :value="t.id">{{ t.name }}</option>
-            </select>
-            <label class="flex items-center gap-2 text-sm">
-                <input type="checkbox" v-model="onlyAutoMail" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500">
-                Only auto mail
-            </label>
-        </div>
-        <PrimaryButton @click="openCreateDrawer">+ Dodaj odločitev</PrimaryButton>
+  <div class="p-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+    <div class="flex flex-col sm:flex-row gap-2 items-start sm:items-center">
+      <TextInput
+        v-model="search"
+        placeholder="Search decisions..."
+        class="w-full sm:w-72"
+      />
+      <select
+        v-model="selectedTemplateId"
+        class="block w-full sm:w-64 border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
+      >
+        <option :value="null">All templates</option>
+        <option v-for="t in emailTemplates" :key="t.id" :value="t.id">
+          {{ t.name }}
+        </option>
+      </select>
+      <label class="flex items-center gap-2 text-sm">
+        <input
+          type="checkbox"
+          v-model="onlyAutoMail"
+          class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500"
+        />
+        Only auto mail
+      </label>
     </div>
+    <PrimaryButton @click="openCreateDrawer">+ Dodaj odločitev</PrimaryButton>
+  </div>
+  <div class="px-4 pb-4">
+    <DataTableClient
+      :columns="columns"
+      :rows="filtered"
+      :sort="sort"
+      :search="''"
+      :page="page"
+      :pageSize="pageSize"
+      :showToolbar="false"
+      @update:sort="(v) => (sort = v)"
+      @update:page="(v) => (page = v)"
+      @update:pageSize="(v) => (pageSize = v)"
+    >
+      <template #cell-color_tag="{ row }">
+        <div class="flex items-center gap-2">
+          <span
+            v-if="row.color_tag"
+            class="inline-block h-4 w-4 rounded"
+            :style="{ backgroundColor: row.color_tag }"
+          ></span>
+          <span>{{ row.color_tag || "—" }}</span>
+        </div>
+      </template>
+      <template #cell-belongs="{ row }">
+        {{ row.actions?.length ?? 0 }}
+      </template>
+      <template #cell-auto_mail="{ row }">
+        <div class="flex flex-col text-sm">
+          <span :class="row.auto_mail ? 'text-green-700' : 'text-gray-500'">{{
+            row.auto_mail ? "Enabled" : "Disabled"
+          }}</span>
+          <span v-if="row.auto_mail && row.email_template_id" class="text-gray-600">
+            Template:
+            {{ emailTemplates.find((t) => t.id === row.email_template_id)?.name || "—" }}
+          </span>
+        </div>
+      </template>
+      <template #actions="{ row }">
+        <button class="px-2" @click="openEditDrawer(row)">
+          <EditIcon size="md" css="text-gray-500" />
+        </button>
+        <button
+          class="px-2 disabled:opacity-40"
+          :disabled="(row.activities_count ?? 0) > 0"
+          @click="confirmDelete(row)"
+        >
+          <TrashBinIcon size="md" css="text-red-500" />
+        </button>
+      </template>
+    </DataTableClient>
+  </div>
+  <DialogModal :show="drawerEdit" @close="closeEditDrawer">
+    <template #title>
+      <span>Spremeni odločitev</span>
+    </template>
+    <template #content>
+      <form @submit.prevent="update">
+        <div class="col-span-6 sm:col-span-4">
+          <InputLabel for="name" value="Ime" />
+          <TextInput
+            id="name"
+            v-model="form.name"
+            type="text"
+            class="mt-1 block w-full"
+            autocomplete="name"
+          />
+        </div>
 
-    <fwb-table>
-        <fwb-table-head>
-            <fwb-table-head-cell>#</fwb-table-head-cell>
-            <fwb-table-head-cell>Name</fwb-table-head-cell>
-            <fwb-table-head-cell>Color tag</fwb-table-head-cell>
-            <fwb-table-head-cell>Belongs to actions</fwb-table-head-cell>
-            <fwb-table-head-cell>Auto mail</fwb-table-head-cell>
-            <fwb-table-head-cell>
-                <span class="sr-only">Edit</span>
-            </fwb-table-head-cell>
-        </fwb-table-head>
-        <fwb-table-body>
-            <fwb-table-row v-for="d in filtered" :key="d.id">
-                <fwb-table-cell>{{ d.id }}</fwb-table-cell>
-                <fwb-table-cell>{{ d.name }}</fwb-table-cell>
-                <fwb-table-cell>
-                    <div class="flex items-center gap-2">
-                        <span class="inline-block h-4 w-4 rounded" :style="{ backgroundColor: d.color_tag }"></span>
-                        <span>{{ d.color_tag }}</span>
-                    </div>
-                </fwb-table-cell>
-                <fwb-table-cell>{{ d.actions.length }}</fwb-table-cell>
-                <fwb-table-cell>
-                    <div class="flex flex-col text-sm">
-                        <span :class="d.auto_mail ? 'text-green-700' : 'text-gray-500'">{{ d.auto_mail ? 'Enabled' : 'Disabled' }}</span>
-                        <span v-if="d.auto_mail && d.email_template_id" class="text-gray-600">
-                            Template: {{ (emailTemplates.find(t => t.id === d.email_template_id)?.name) || '—' }}
-                        </span>
-                    </div>
-                </fwb-table-cell>
-                <fwb-table-cell>
-                    <button class="px-2" @click="openEditDrawer(d)"><EditIcon size="md" css="text-gray-500" /></button>
-                    <button class="px-2 disabled:opacity-40" :disabled="(d.activities_count ?? 0) > 0" @click="confirmDelete(d)"><TrashBinIcon size="md" css="text-red-500" /></button>
-                </fwb-table-cell>
-            </fwb-table-row>
-        </fwb-table-body>
-    </fwb-table>
+        <div class="mt-4 flex items-center gap-2">
+          <input
+            id="autoMailEdit"
+            type="checkbox"
+            v-model="form.auto_mail"
+            class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500"
+          />
+          <label for="autoMailEdit" class="text-sm">Samodejna pošta (auto mail)</label>
+        </div>
 
-    <DialogModal :show="drawerEdit" @close="closeEditDrawer">
-        <template #title>
-            <span>Spremeni odločitev</span>
-        </template>
-        <template #content>
-            <form @submit.prevent="update">
-                <div class="col-span-6 sm:col-span-4">
-                    <InputLabel for="name" value="Ime"/>
-                    <TextInput 
-                        id="name"
-                        v-model="form.name"
-                        type="text"
-                        class="mt-1 block w-full"
-                        autocomplete="name"
-                    />
-                </div>
+        <div class="col-span-6 sm:col-span-4 mt-2">
+          <InputLabel for="emailTemplateEdit" value="Email predloga" />
+          <select
+            id="emailTemplateEdit"
+            v-model="form.email_template_id"
+            :disabled="!form.auto_mail"
+            class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            <option :value="null">— Brez —</option>
+            <option v-for="t in emailTemplates" :key="t.id" :value="t.id">
+              {{ t.name }}
+            </option>
+          </select>
+          <p v-if="form.email_template_id" class="text-xs text-gray-500 mt-1">
+            <span
+              v-if="
+                (
+                  emailTemplates.find((t) => t.id === form.email_template_id)
+                    ?.entity_types || []
+                ).includes('contract')
+              "
+              >Ta predloga zahteva pogodbo.</span
+            >
+          </p>
+        </div>
+        <div class="col-span-6 sm:col-span-4">
+          <InputLabel for="colorTag" value="Barva" />
+          <div class="mt-1">
+            <InlineColorPicker v-model="form.color_tag" />
+          </div>
+        </div>
 
-                <div class="mt-4 flex items-center gap-2">
-                    <input id="autoMailEdit" type="checkbox" v-model="form.auto_mail" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500">
-                    <label for="autoMailEdit" class="text-sm">Samodejna pošta (auto mail)</label>
-                </div>
+        <div class="col-span-6 sm:col-span-4">
+          <InputLabel for="actionsSelect" value="Akcije" />
+          <multiselect
+            id="actionsSelect"
+            v-model="form.actions"
+            :options="actionOptions"
+            :multiple="true"
+            track-by="id"
+            :taggable="true"
+            placeholder="Dodaj akcijo"
+            :append-to-body="true"
+            label="name"
+          />
+        </div>
 
-                <div class="col-span-6 sm:col-span-4 mt-2">
-                    <InputLabel for="emailTemplateEdit" value="Email predloga"/>
-                    <select id="emailTemplateEdit" v-model="form.email_template_id" :disabled="!form.auto_mail" class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm disabled:opacity-50 disabled:cursor-not-allowed">
-                        <option :value="null">— Brez —</option>
-                        <option v-for="t in emailTemplates" :key="t.id" :value="t.id">{{ t.name }}</option>
-                    </select>
-                    <p v-if="form.email_template_id" class="text-xs text-gray-500 mt-1">
-                        <span v-if="(emailTemplates.find(t => t.id === form.email_template_id)?.entity_types || []).includes('contract')">Ta predloga zahteva pogodbo.</span>
-                    </p>
-                </div>
-                <div class="col-span-6 sm:col-span-4">
-                    <InputLabel for="colorTag" value="Barva"/>
-                    <div class="mt-1 w-full border flex p-1">
-                        <TextInput 
-                            id="colorTag"
-                            v-model="form.color_tag"
-                            type="color"
-                            class="mr-2" 
-                            autocomplete="color-tag"
-                        />
-                        <span>{{ form.color_tag }}</span>
-                    </div>
-                </div>
+        <div class="flex justify-end mt-4">
+          <ActionMessage :on="form.recentlySuccessful" class="me-3">
+            Shranjuje.
+          </ActionMessage>
 
-                <div class="col-span-6 sm:col-span-4">
-                    <InputLabel for="actionsSelect" value="Akcije"/>
-                    <multiselect 
-                        id="actionsSelect"
-                        v-model="form.actions" 
-                        :options="actionOptions"
-                        :multiple="true"
-                        track-by="id"
-                        :taggable="true"
-                        placeholder="Dodaj akcijo"
-                        :append-to-body="true"
-                        label="name"
-                    />
-                </div>
+          <PrimaryButton
+            :class="{ 'opacity-25': form.processing }"
+            :disabled="form.processing"
+          >
+            Shrani
+          </PrimaryButton>
+        </div>
+      </form>
+    </template>
+  </DialogModal>
 
-                <div class="flex justify-end mt-4">
-                    <ActionMessage :on="form.recentlySuccessful" class="me-3">
-                        Shranjuje.
-                    </ActionMessage>
+  <DialogModal :show="drawerCreate" @close="closeCreateDrawer">
+    <template #title>
+      <span>Dodaj odločitev</span>
+    </template>
+    <template #content>
+      <form @submit.prevent="store">
+        <div class="col-span-6 sm:col-span-4">
+          <InputLabel for="nameCreate" value="Ime" />
+          <TextInput
+            id="nameCreate"
+            v-model="createForm.name"
+            type="text"
+            class="mt-1 block w-full"
+            autocomplete="name"
+          />
+        </div>
 
-                    <PrimaryButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
-                        Shrani
-                    </PrimaryButton>
-                </div>
-            </form>
-        </template>
-    </DialogModal>
+        <div class="mt-4 flex items-center gap-2">
+          <input
+            id="autoMailCreate"
+            type="checkbox"
+            v-model="createForm.auto_mail"
+            class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500"
+          />
+          <label for="autoMailCreate" class="text-sm">Samodejna pošta (auto mail)</label>
+        </div>
 
-    <DialogModal :show="drawerCreate" @close="closeCreateDrawer">
-        <template #title>
-            <span>Dodaj odločitev</span>
-        </template>
-        <template #content>
-            <form @submit.prevent="store">
-                <div class="col-span-6 sm:col-span-4">
-                    <InputLabel for="nameCreate" value="Ime"/>
-                    <TextInput 
-                        id="nameCreate"
-                        v-model="createForm.name"
-                        type="text"
-                        class="mt-1 block w-full"
-                        autocomplete="name"
-                    />
-                </div>
+        <div class="col-span-6 sm:col-span-4 mt-2">
+          <InputLabel for="emailTemplateCreate" value="Email predloga" />
+          <select
+            id="emailTemplateCreate"
+            v-model="createForm.email_template_id"
+            :disabled="!createForm.auto_mail"
+            class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            <option :value="null">— Brez —</option>
+            <option v-for="t in emailTemplates" :key="t.id" :value="t.id">
+              {{ t.name }}
+            </option>
+          </select>
+          <p v-if="createForm.email_template_id" class="text-xs text-gray-500 mt-1">
+            <span
+              v-if="
+                (
+                  emailTemplates.find((t) => t.id === createForm.email_template_id)
+                    ?.entity_types || []
+                ).includes('contract')
+              "
+              >Ta predloga zahteva pogodbo.</span
+            >
+          </p>
+        </div>
+        <div class="col-span-6 sm:col-span-4">
+          <InputLabel for="colorTagCreate" value="Barva" />
+          <div class="mt-1">
+            <InlineColorPicker v-model="createForm.color_tag" />
+          </div>
+        </div>
 
-                <div class="mt-4 flex items-center gap-2">
-                    <input id="autoMailCreate" type="checkbox" v-model="createForm.auto_mail" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500">
-                    <label for="autoMailCreate" class="text-sm">Samodejna pošta (auto mail)</label>
-                </div>
+        <div class="col-span-6 sm:col-span-4">
+          <InputLabel for="actionsCreate" value="Akcije" />
+          <multiselect
+            id="actionsCreate"
+            v-model="createForm.actions"
+            :options="actionOptions"
+            :multiple="true"
+            track-by="id"
+            :taggable="true"
+            placeholder="Dodaj akcijo"
+            :append-to-body="true"
+            label="name"
+          />
+        </div>
 
-                <div class="col-span-6 sm:col-span-4 mt-2">
-                    <InputLabel for="emailTemplateCreate" value="Email predloga"/>
-                    <select id="emailTemplateCreate" v-model="createForm.email_template_id" :disabled="!createForm.auto_mail" class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm disabled:opacity-50 disabled:cursor-not-allowed">
-                        <option :value="null">— Brez —</option>
-                        <option v-for="t in emailTemplates" :key="t.id" :value="t.id">{{ t.name }}</option>
-                    </select>
-                    <p v-if="createForm.email_template_id" class="text-xs text-gray-500 mt-1">
-                        <span v-if="(emailTemplates.find(t => t.id === createForm.email_template_id)?.entity_types || []).includes('contract')">Ta predloga zahteva pogodbo.</span>
-                    </p>
-                </div>
-                <div class="col-span-6 sm:col-span-4">
-                    <InputLabel for="colorTagCreate" value="Barva"/>
-                    <div class="mt-1 w-full border flex p-1">
-                        <TextInput 
-                            id="colorTagCreate"
-                            v-model="createForm.color_tag"
-                            type="color"
-                            class="mr-2" 
-                            autocomplete="color-tag"
-                        />
-                        <span>{{ createForm.color_tag }}</span>
-                    </div>
-                </div>
+        <div class="flex justify-end mt-4">
+          <ActionMessage :on="createForm.recentlySuccessful" class="me-3">
+            Shranjuje.
+          </ActionMessage>
 
-                <div class="col-span-6 sm:col-span-4">
-                    <InputLabel for="actionsCreate" value="Akcije"/>
-                    <multiselect 
-                        id="actionsCreate"
-                        v-model="createForm.actions" 
-                        :options="actionOptions"
-                        :multiple="true"
-                        track-by="id"
-                        :taggable="true"
-                        placeholder="Dodaj akcijo"
-                        :append-to-body="true"
-                        label="name"
-                    />
-                </div>
+          <PrimaryButton
+            :class="{ 'opacity-25': createForm.processing }"
+            :disabled="createForm.processing"
+          >
+            Dodaj
+          </PrimaryButton>
+        </div>
+      </form>
+    </template>
+  </DialogModal>
 
-                <div class="flex justify-end mt-4">
-                    <ActionMessage :on="createForm.recentlySuccessful" class="me-3">
-                        Shranjuje.
-                    </ActionMessage>
-
-                    <PrimaryButton :class="{ 'opacity-25': createForm.processing }" :disabled="createForm.processing">
-                        Dodaj
-                    </PrimaryButton>
-                </div>
-            </form>
-        </template>
-    </DialogModal>
-
-    <ConfirmationModal :show="showDelete" @close="cancelDelete">
-        <template #title>
-            Delete decision
-        </template>
-        <template #content>
-            Are you sure you want to delete decision "{{ toDelete?.name }}"? This cannot be undone.
-        </template>
-        <template #footer>
-            <button @click="cancelDelete" class="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300 me-2">Cancel</button>
-            <PrimaryButton @click="destroyDecision">Delete</PrimaryButton>
-        </template>
-    </ConfirmationModal>
-</template>
\ No newline at end of file
+  <ConfirmationModal :show="showDelete" @close="cancelDelete">
+    <template #title> Delete decision </template>
+    <template #content>
+      Are you sure you want to delete decision "{{ toDelete?.name }}"? This cannot be
+      undone.
+    </template>
+    <template #footer>
+      <button
+        @click="cancelDelete"
+        class="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300 me-2"
+      >
+        Cancel
+      </button>
+      <PrimaryButton @click="destroyDecision">Delete</PrimaryButton>
+    </template>
+  </ConfirmationModal>
+</template>
diff --git a/routes/breadcrumbs.php b/routes/breadcrumbs.php
index 39cd9da..e65a63d 100644
--- a/routes/breadcrumbs.php
+++ b/routes/breadcrumbs.php
@@ -6,6 +6,7 @@
 // this import. This is nice for IDE syntax and refactoring.
 use App\Models\Client;
 use App\Models\ClientCase;
+use App\Models\Segment;
 use Diglactic\Breadcrumbs\Breadcrumbs;
 // This import is also not required, and you could replace `BreadcrumbTrail $trail`
 //  with `$trail`. This is nice for IDE type checking and completion.
@@ -88,3 +89,15 @@
     $trail->parent('settings');
     $trail->push('Plačila', route('settings.payment.edit'));
 });
+
+// Dashboard > Segments
+Breadcrumbs::for('segments.index', function (BreadcrumbTrail $trail) {
+    $trail->parent('dashboard');
+    $trail->push('Segmenti', route('segments.index'));
+});
+
+// Dashboard > Segments > [Segment]
+Breadcrumbs::for('segments.show', function (BreadcrumbTrail $trail, Segment $segment) {
+    $trail->parent('segments.index');
+    $trail->push($segment->name, route('segments.show', $segment));
+});