Changes 0228092025 Laptop

resources/js/Pages/Settings/ContractConfigs/Index.vue

@@ -0,0 +1,172 @@
+<script setup>
+import AppLayout from '@/Layouts/AppLayout.vue'
+import SectionTitle from '@/Components/SectionTitle.vue'
+import PrimaryButton from '@/Components/PrimaryButton.vue'
+import DialogModal from '@/Components/DialogModal.vue'
+import ConfirmationModal from '@/Components/ConfirmationModal.vue'
+import InputLabel from '@/Components/InputLabel.vue'
+import InputError from '@/Components/InputError.vue'
+import { useForm, router } from '@inertiajs/vue3'
+import { ref } from 'vue'
+
+const props = defineProps({
+  configs: Array,
+  types: Array,
+  segments: Array,
+})
+
+// create modal
+const showCreate = ref(false)
+const openCreate = () => { showCreate.value = true }
+const closeCreate = () => { showCreate.value = false; createForm.reset() }
+const createForm = useForm({ contract_type_id: null, segment_id: null, is_initial: false })
+const submitCreate = () => {
+  createForm.post(route('settings.contractConfigs.store'), {
+    preserveScroll: true,
+    onSuccess: () => closeCreate(),
+  })
+}
+
+// inline edit
+const editing = ref(null)
+const editForm = useForm({ segment_id: null, is_initial: false, active: true })
+const openEdit = (row) => { editing.value = row; editForm.segment_id = row?.segment_id ?? row?.segment?.id; editForm.is_initial = !!row.is_initial; editForm.active = !!row.active }
+const closeEdit = () => { editing.value = null }
+const submitEdit = () => {
+  if (!editing.value) return
+  editForm.put(route('settings.contractConfigs.update', editing.value.id), {
+    preserveScroll: true,
+    onSuccess: () => closeEdit(),
+  })
+}
+
+// delete confirmation
+const showDelete = ref(false)
+const toDelete = ref(null)
+const confirmDelete = (row) => { toDelete.value = row; showDelete.value = true }
+const cancelDelete = () => { toDelete.value = null; showDelete.value = false }
+const destroyConfig = () => {
+  if (!toDelete.value) return
+  router.delete(route('settings.contractConfigs.destroy', toDelete.value.id), {
+    preserveScroll: true,
+    onFinish: () => cancelDelete(),
+  })
+}
+</script>
+
+<template>
+  <AppLayout title="Settings: Contract Configurations">
+    <template #header />
+    <div class="pt-12">
+      <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+        <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg border-l-4 border-indigo-400">
+          <div class="p-4 flex items-center justify-between">
+            <SectionTitle>
+              <template #title>Contract configurations</template>
+            </SectionTitle>
+            <PrimaryButton @click="openCreate">+ New</PrimaryButton>
+          </div>
+          <div class="px-4 pb-4">
+            <table class="min-w-full text-left text-sm">
+              <thead>
+                <tr class="border-b">
+                  <th class="py-2 pr-4">Type</th>
+                  <th class="py-2 pr-4">Segment</th>
+                  <th class="py-2 pr-4">Active</th>
+                  <th class="py-2 pr-4 text-right">Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="cfg in configs" :key="cfg.id" class="border-b last:border-0">
+                  <td class="py-2 pr-4">{{ cfg.type?.name }}</td>
+                  <td class="py-2 pr-4">{{ cfg.segment?.name }} <span v-if="cfg.is_initial" class="ml-2 text-xs text-indigo-600">(initial)</span></td>
+                  <td class="py-2 pr-4">{{ cfg.active ? 'Yes' : 'No' }}</td>
+      <td class="py-2 pr-4 text-right">
+            <button class="px-2 py-1 text-indigo-600 hover:underline" @click="openEdit(cfg)">Edit</button>
+            <button class="ml-2 px-2 py-1 text-red-600 hover:underline" @click="confirmDelete(cfg)">Delete</button>
+                  </td>
+                </tr>
+                <tr v-if="!configs || configs.length === 0">
+                  <td colspan="4" class="py-6 text-center text-gray-500">No configurations.</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- create modal -->
+    <DialogModal :show="showCreate" @close="closeCreate">
+      <template #title>New Contract Configuration</template>
+      <template #content>
+        <div class="space-y-4">
+          <div>
+            <InputLabel for="type">Contract Type</InputLabel>
+            <select id="type" v-model="createForm.contract_type_id" class="mt-1 w-full rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500">
+              <option :value="null" disabled>-- select type --</option>
+              <option v-for="t in types" :key="t.id" :value="t.id">{{ t.name }}</option>
+            </select>
+            <InputError :message="createForm.errors.contract_type_id" />
+          </div>
+          <div>
+            <InputLabel for="segment">Segment</InputLabel>
+            <select id="segment" v-model="createForm.segment_id" class="mt-1 w-full rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500">
+              <option :value="null" disabled>-- select segment --</option>
+              <option v-for="s in segments" :key="s.id" :value="s.id">{{ s.name }}</option>
+            </select>
+            <InputError :message="createForm.errors.segment_id" />
+            <div class="mt-3 flex items-center gap-2">
+              <input id="is_initial" type="checkbox" v-model="createForm.is_initial" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+              <label for="is_initial" class="text-sm text-gray-700">Mark as initial</label>
+            </div>
+          </div>
+        </div>
+      </template>
+      <template #footer>
+        <button class="px-4 py-2 rounded bg-gray-200" @click="closeCreate">Cancel</button>
+  <PrimaryButton class="ml-2" :disabled="createForm.processing || !createForm.contract_type_id || !createForm.segment_id" @click="submitCreate">Create</PrimaryButton>
+      </template>
+    </DialogModal>
+
+    <!-- simple inline edit dialog -->
+    <DialogModal :show="!!editing" @close="closeEdit">
+      <template #title>Edit Configuration</template>
+      <template #content>
+        <div class="space-y-4">
+          <div>
+            <InputLabel>Segment</InputLabel>
+            <select v-model="editForm.segment_id" class="mt-1 w-full rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500">
+              <option v-for="s in segments" :key="s.id" :value="s.id">{{ s.name }}</option>
+            </select>
+            <InputError :message="editForm.errors.segment_id" />
+          </div>
+          <div class="flex items-center gap-2">
+            <input id="is_initial_edit" type="checkbox" v-model="editForm.is_initial" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+            <label for="is_initial_edit" class="text-sm text-gray-700">Initial</label>
+          </div>
+          <div class="flex items-center gap-2">
+            <input id="active" type="checkbox" v-model="editForm.active" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+            <label for="active" class="text-sm text-gray-700">Active</label>
+          </div>
+        </div>
+      </template>
+      <template #footer>
+        <button class="px-4 py-2 rounded bg-gray-200" @click="closeEdit">Cancel</button>
+  <PrimaryButton class="ml-2" :disabled="editForm.processing || !editForm.segment_id" @click="submitEdit">Save</PrimaryButton>
+      </template>
+    </DialogModal>
+  </AppLayout>
+  <ConfirmationModal :show="showDelete" @close="cancelDelete">
+    <template #title>
+      Delete configuration
+    </template>
+    <template #content>
+      Are you sure you want to delete configuration for type "{{ toDelete?.type?.name }}"?
+    </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="destroyConfig">Delete</PrimaryButton>
+    </template>
+  </ConfirmationModal>
+</template>

resources/js/Pages/Settings/FieldJob/Index.vue

@@ -1,10 +1,51 @@
 <script setup>
 import AppLayout from '@/Layouts/AppLayout.vue';
-import { Link } from '@inertiajs/vue3';
+import { Link, useForm } from '@inertiajs/vue3';
+import DialogModal from '@/Components/DialogModal.vue';
+import PrimaryButton from '@/Components/PrimaryButton.vue';
+import InputLabel from '@/Components/InputLabel.vue';
+import InputError from '@/Components/InputError.vue';
+import { ref, onMounted } from 'vue';
+import Multiselect from 'vue-multiselect';
 
 const props = defineProps({
   settings: Array,
+  segments: Array,
+  decisions: Array,
 });
+
+const showCreate = ref(false);
+const segmentOptions = ref([]);
+const decisionOptions = ref([]);
+
+onMounted(() => {
+  segmentOptions.value = (props.segments || []).map(s => ({ id: s.id, name: s.name }));
+  decisionOptions.value = (props.decisions || []).map(d => ({ id: d.id, name: d.name }));
+});
+
+const form = useForm({
+  segment_id: null,
+  initial_decision_id: null,
+  asign_decision_id: null,
+  complete_decision_id: null,
+});
+
+const openCreate = () => {
+  form.reset();
+  showCreate.value = true;
+};
+
+const closeCreate = () => {
+  showCreate.value = false;
+  form.reset();
+};
+
+const store = () => {
+  form.post(route('settings.fieldjob.store'), {
+    preserveScroll: true,
+    onSuccess: () => closeCreate(),
+  });
+};
 </script>
 
 <template>
@@ -12,20 +53,93 @@ const props = defineProps({
     <template #header></template>
     <div class="pt-12">
       <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
-          <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-6">
-            <h3 class="text-lg font-semibold mb-2">Segments</h3>
-            <p class="text-sm text-gray-600 mb-4">Manage segments used across the app.</p>
-            <Link :href="route('settings.segments')" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700">Open Segments</Link>
-          </div>
-        </div>
         <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-6">
-          <h2 class="text-xl font-semibold mb-4">Field Job Settings</h2>
+          <div class="flex items-center justify-between mb-4">
+            <h2 class="text-xl font-semibold">Field Job Settings</h2>
+            <PrimaryButton @click="openCreate">+ New</PrimaryButton>
+          </div>
+
+          <DialogModal :show="showCreate" @close="closeCreate">
+            <template #title>
+              Create Field Job Setting
+            </template>
+            <template #content>
+              <form @submit.prevent="store">
+                <div class="grid grid-cols-1 gap-4">
+                  <div>
+                    <InputLabel for="segment" value="Segment" />
+                    <multiselect
+                      id="segment"
+                      v-model="form.segment_id"
+                      :options="segmentOptions.map(o=>o.id)"
+                      :multiple="false"
+                      :searchable="true"
+                      placeholder="Select segment"
+                      :append-to-body="true"
+                      :custom-label="(opt) => (segmentOptions.find(o=>o.id===opt)?.name || '')"
+                    />
+                    <InputError :message="form.errors.segment_id" class="mt-1" />
+                  </div>
+
+                  <div>
+                    <InputLabel for="initialDecision" value="Initial Decision" />
+                    <multiselect
+                      id="initialDecision"
+                      v-model="form.initial_decision_id"
+                      :options="decisionOptions.map(o=>o.id)"
+                      :multiple="false"
+                      :searchable="true"
+                      placeholder="Select initial decision"
+                      :append-to-body="true"
+                      :custom-label="(opt) => (decisionOptions.find(o=>o.id===opt)?.name || '')"
+                    />
+                    <InputError :message="form.errors.initial_decision_id" class="mt-1" />
+                  </div>
+
+                  <div>
+                    <InputLabel for="assignDecision" value="Assign Decision" />
+                    <multiselect
+                      id="assignDecision"
+                      v-model="form.asign_decision_id"
+                      :options="decisionOptions.map(o=>o.id)"
+                      :multiple="false"
+                      :searchable="true"
+                      placeholder="Select assign decision"
+                      :append-to-body="true"
+                      :custom-label="(opt) => (decisionOptions.find(o=>o.id===opt)?.name || '')"
+                    />
+                    <InputError :message="form.errors.asign_decision_id" class="mt-1" />
+                  </div>
+
+                  <div class="mt-2">
+                    <InputLabel for="completeDecision" value="Complete Decision" />
+                    <multiselect
+                      id="completeDecision"
+                      v-model="form.complete_decision_id"
+                      :options="decisionOptions.map(o=>o.id)"
+                      :multiple="false"
+                      :searchable="true"
+                      placeholder="Select complete decision"
+                      :append-to-body="true"
+                      :custom-label="(opt) => (decisionOptions.find(o=>o.id===opt)?.name || '')"
+                    />
+                    <InputError :message="form.errors.complete_decision_id" class="mt-1" />
+                  </div>
+                </div>
+
+                <div class="flex justify-end gap-2 mt-6">
+                  <button type="button" @click="closeCreate" class="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300">Cancel</button>
+                  <PrimaryButton :disabled="form.processing">Create</PrimaryButton>
+                </div>
+              </form>
+            </template>
+          </DialogModal>
           <table class="min-w-full text-left text-sm">
             <thead>
               <tr class="border-b">
                 <th class="py-2 pr-4">ID</th>
                 <th class="py-2 pr-4">Segment</th>
+                <th class="py-2 pr-4">Initial Decision</th>
                 <th class="py-2 pr-4">Assign Decision</th>
                 <th class="py-2 pr-4">Complete Decision</th>
               </tr>
@@ -34,6 +148,7 @@ const props = defineProps({
               <tr v-for="row in settings" :key="row.id" class="border-b last:border-0">
                 <td class="py-2 pr-4">{{ row.id }}</td>
                 <td class="py-2 pr-4">{{ row.segment?.name }}</td>
+                <td class="py-2 pr-4">{{ row.initial_decision?.name || row.initialDecision?.name }}</td>
                 <td class="py-2 pr-4">{{ row.asign_decision?.name || row.asignDecision?.name }}</td>
                 <td class="py-2 pr-4">{{ row.complete_decision?.name || row.completeDecision?.name }}</td>
               </tr>

resources/js/Pages/Settings/Index.vue

@@ -24,6 +24,11 @@ import { Link } from '@inertiajs/vue3';
                                         <p class="text-sm text-gray-600 mb-4">Configure segment-based field job rules.</p>
                                         <Link :href="route('settings.fieldjob.index')" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700">Open Field Job</Link>
                                     </div>
+                                    <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-6">
+                                        <h3 class="text-lg font-semibold mb-2">Contract Configs</h3>
+                                        <p class="text-sm text-gray-600 mb-4">Auto-assign initial segments for contracts by type.</p>
+                                        <Link :href="route('settings.contractConfigs.index')" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700">Open Contract Configs</Link>
+                                    </div>
                                 </div>
             </div>
         </div>

resources/js/Pages/Settings/Partials/ActionTable.vue

@@ -1,9 +1,10 @@
 <script setup>
-import { FwbTable, FwbTableBody, FwbTableHead, FwbTableHeadCell, FwbTableCell, FwbTableRow, FwbDropdown } from 'flowbite-vue';
-import { DottedMenu, EditIcon, TrashBinIcon } from '@/Utilities/Icons';
+import { FwbTable, FwbTableBody, FwbTableHead, FwbTableHeadCell, FwbTableCell, FwbTableRow } from 'flowbite-vue';
+import { EditIcon, TrashBinIcon } from '@/Utilities/Icons';
 import DialogModal from '@/Components/DialogModal.vue';
-import { onMounted, ref } from 'vue';
-import { useForm } from '@inertiajs/vue3';
+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';
@@ -16,10 +17,13 @@ const props = defineProps({
     segments: Array
 });
 
-const menuDropdown = ref();
-
 const drawerEdit = ref(false);
 const drawerCreate = ref(false);
+const showDelete = ref(false);
+const toDelete = ref(null);
+
+const search = ref('');
+const selectedSegment = ref(null);
 
 const selectOptions = ref([]);
 const segmentOptions = ref([]);
@@ -91,6 +95,15 @@ onMounted(() => {
   
 });
 
+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 update = () => {
     form.put(route('settings.actions.update', { id: form.id }), {
         onSuccess: () => {
@@ -107,11 +120,44 @@ const store = () => {
     });
 };
 
+const confirmDelete = (action) => {
+    toDelete.value = action;
+    showDelete.value = true;
+};
+
+const cancelDelete = () => {
+    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(),
+    });
+};
+
 </script>
 <template>
-    <div class="py-4 px-3">
+    <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>
+
     <fwb-table>
         <fwb-table-head>
             <fwb-table-head-cell>#</fwb-table-head-cell>
@@ -123,22 +169,25 @@ const store = () => {
             </fwb-table-head-cell>
         </fwb-table-head>
         <fwb-table-body>
-            <fwb-table-row v-for="act in actions" :key="act.id">
+            <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>{{ act.color_tag }}</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"
-    >
 
+    <DialogModal :show="drawerEdit" @close="closeEditDrawer">
         <template #title>
             <span>Spremeni akcijo</span>
         </template>
@@ -215,10 +264,7 @@ const store = () => {
         </template>
     </DialogModal>
 
-    <DialogModal
-        :show="drawerCreate"
-        @close="closeCreateDrawer"
-    >
+    <DialogModal :show="drawerCreate" @close="closeCreateDrawer">
         <template #title>
             <span>Dodaj akcijo</span>
         </template>
@@ -290,4 +336,17 @@ const store = () => {
             </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>

resources/js/Pages/Settings/Partials/DecisionTable.vue

@@ -1,9 +1,10 @@
 <script setup>
 import { FwbTable, FwbTableBody, FwbTableHead, FwbTableHeadCell, FwbTableCell, FwbTableRow } from 'flowbite-vue';
-import { EditIcon } from '@/Utilities/Icons';
+import { EditIcon, TrashBinIcon } from '@/Utilities/Icons';
 import DialogModal from '@/Components/DialogModal.vue';
-import { onMounted, ref } from 'vue';
-import { useForm } from '@inertiajs/vue3';
+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';
@@ -17,6 +18,10 @@ const props = defineProps({
 
 const drawerEdit = ref(false);
 const drawerCreate = ref(false);
+const showDelete = ref(false);
+const toDelete = ref(null);
+
+const search = ref('');
 
 const actionOptions = ref([]);
 
@@ -72,6 +77,13 @@ onMounted(() => {
     });
 });
 
+const filtered = computed(() => {
+    const term = search.value?.toLowerCase() ?? '';
+    return (props.decisions || []).filter(d => {
+        return !term || d.name?.toLowerCase().includes(term) || d.color_tag?.toLowerCase().includes(term);
+    });
+});
+
 const update = () => {
     form.put(route('settings.decisions.update', { id: form.id }), {
         onSuccess: () => {
@@ -88,11 +100,31 @@ const store = () => {
     });
 };
 
+const confirmDelete = (decision) => {
+    toDelete.value = decision;
+    showDelete.value = true;
+};
+
+const cancelDelete = () => {
+    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(),
+    });
+};
+
 </script>
 <template>
-    <div class="py-4 px-3">
+    <div class="p-4 flex items-center justify-between gap-3">
+        <TextInput v-model="search" placeholder="Search decisions..." class="w-full sm:w-72" />
         <PrimaryButton @click="openCreateDrawer">+ Dodaj odločitev</PrimaryButton>
     </div>
+
     <fwb-table>
         <fwb-table-head>
             <fwb-table-head-cell>#</fwb-table-head-cell>
@@ -104,22 +136,25 @@ const store = () => {
             </fwb-table-head-cell>
         </fwb-table-head>
         <fwb-table-body>
-            <fwb-table-row v-for="d in decisions" :key="d.id">
+            <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>{{ d.color_tag }}</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>
                     <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>
 
-    <DialogModal
-        :show="drawerEdit"
-        @close="closeEditDrawer"
-    >
+    <DialogModal :show="drawerEdit" @close="closeEditDrawer">
         <template #title>
             <span>Spremeni odločitev</span>
         </template>
@@ -177,10 +212,7 @@ const store = () => {
         </template>
     </DialogModal>
 
-    <DialogModal
-        :show="drawerCreate"
-        @close="closeCreateDrawer"
-    >
+    <DialogModal :show="drawerCreate" @close="closeCreateDrawer">
         <template #title>
             <span>Dodaj odločitev</span>
         </template>
@@ -237,4 +269,17 @@ const store = () => {
             </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>

resources/js/Pages/Settings/Segments/Index.vue

@@ -1,9 +1,73 @@
 <script setup>
 import AppLayout from '@/Layouts/AppLayout.vue';
+import { useForm, router } from '@inertiajs/vue3';
+import { ref } from 'vue';
+import DialogModal from '@/Components/DialogModal.vue';
+import PrimaryButton from '@/Components/PrimaryButton.vue';
+import InputLabel from '@/Components/InputLabel.vue';
+import InputError from '@/Components/InputError.vue';
+import TextInput from '@/Components/TextInput.vue';
 
 const props = defineProps({
   segments: Array,
 });
+
+const showCreate = ref(false);
+const showEdit = ref(false);
+const editing = ref(null);
+
+const createForm = useForm({
+  name: '',
+  description: '',
+  active: true,
+});
+
+const editForm = useForm({
+  id: null,
+  name: '',
+  description: '',
+  active: true,
+});
+
+const openCreate = () => {
+  createForm.reset();
+  createForm.active = true;
+  showCreate.value = true;
+};
+
+const closeCreate = () => {
+  showCreate.value = false;
+  createForm.reset();
+};
+
+const store = () => {
+  createForm.post(route('settings.segments.store'), {
+    preserveScroll: true,
+    onSuccess: () => closeCreate(),
+  });
+};
+
+const openEdit = (segment) => {
+  editing.value = segment;
+  editForm.id = segment.id;
+  editForm.name = segment.name;
+  editForm.description = segment.description ?? '';
+  editForm.active = !!segment.active;
+  showEdit.value = true;
+};
+
+const closeEdit = () => {
+  showEdit.value = false;
+  editing.value = null;
+  editForm.reset();
+};
+
+const update = () => {
+  editForm.put(route('settings.segments.update', { segment: editForm.id }), {
+    preserveScroll: true,
+    onSuccess: () => closeEdit(),
+  });
+};
 </script>
 
 <template>
@@ -12,10 +76,93 @@ const props = defineProps({
     <div class="pt-12">
       <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">
-          <h2 class="text-xl font-semibold mb-4">Segments</h2>
-          <ul class="list-disc list-inside">
-            <li v-for="s in segments" :key="s.id">{{ s.name }}</li>
-          </ul>
+          <div class="flex items-center justify-between mb-4">
+            <h2 class="text-xl font-semibold">Segments</h2>
+            <PrimaryButton @click="openCreate">+ New</PrimaryButton>
+          </div>
+
+          <DialogModal :show="showCreate" @close="closeCreate">
+            <template #title>New Segment</template>
+            <template #content>
+              <form @submit.prevent="store" class="space-y-4">
+                <div>
+                  <InputLabel for="nameCreate" value="Name" />
+                  <TextInput id="nameCreate" v-model="createForm.name" type="text" class="mt-1 block w-full" />
+                  <InputError :message="createForm.errors.name" class="mt-1" />
+                </div>
+                <div>
+                  <InputLabel for="descCreate" value="Description" />
+                  <TextInput id="descCreate" v-model="createForm.description" type="text" class="mt-1 block w-full" />
+                  <InputError :message="createForm.errors.description" class="mt-1" />
+                </div>
+                <div class="flex items-center gap-2">
+                  <input id="activeCreate" type="checkbox" v-model="createForm.active" />
+                  <label for="activeCreate">Active</label>
+                </div>
+
+                <div class="flex justify-end gap-2 mt-4">
+                  <button type="button" @click="closeCreate" class="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300">Cancel</button>
+                  <PrimaryButton :disabled="createForm.processing">Create</PrimaryButton>
+                </div>
+              </form>
+            </template>
+          </DialogModal>
+
+          <DialogModal :show="showEdit" @close="closeEdit">
+            <template #title>Edit Segment</template>
+            <template #content>
+              <form @submit.prevent="update" class="space-y-4">
+                <div>
+                  <InputLabel for="nameEdit" value="Name" />
+                  <TextInput id="nameEdit" v-model="editForm.name" type="text" class="mt-1 block w-full" />
+                  <InputError :message="editForm.errors.name" class="mt-1" />
+                </div>
+                <div>
+                  <InputLabel for="descEdit" value="Description" />
+                  <TextInput id="descEdit" v-model="editForm.description" type="text" class="mt-1 block w-full" />
+                  <InputError :message="editForm.errors.description" class="mt-1" />
+                </div>
+                <div class="flex items-center gap-2">
+                  <input id="activeEdit" type="checkbox" v-model="editForm.active" />
+                  <label for="activeEdit">Active</label>
+                </div>
+
+                <div class="flex justify-end gap-2 mt-4">
+                  <button type="button" @click="closeEdit" class="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300">Cancel</button>
+                  <PrimaryButton :disabled="editForm.processing">Save</PrimaryButton>
+                </div>
+              </form>
+            </template>
+          </DialogModal>
+
+          <table class="min-w-full text-left text-sm">
+            <thead>
+              <tr class="border-b">
+                <th class="py-2 pr-4">ID</th>
+                <th class="py-2 pr-4">Name</th>
+                <th class="py-2 pr-4">Description</th>
+                <th class="py-2 pr-4">Active</th>
+                <th class="py-2 pr-4">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="s in segments" :key="s.id" class="border-b last:border-0">
+                <td class="py-2 pr-4">{{ s.id }}</td>
+                <td class="py-2 pr-4">{{ s.name }}</td>
+                <td class="py-2 pr-4">{{ s.description }}</td>
+                <td class="py-2 pr-4">
+                  <span class="inline-flex items-center gap-1">
+                    <span :class="s.active ? 'bg-green-500' : 'bg-gray-400'" class="inline-block w-2 h-2 rounded-full"></span>
+                    {{ s.active ? 'Yes' : 'No' }}
+                  </span>
+                </td>
+                <td class="py-2 pr-4">
+                  <button class="text-indigo-600 hover:text-indigo-800" @click="openEdit(s)">Edit</button>
+                  <!-- Delete intentionally skipped as requested -->
+                </td>
+              </tr>
+            </tbody>
+          </table>
         </div>
       </div>
     </div>