changes to UI mostly

2025-09-30 22:00:03 +02:00
parent 53917f2ca0
commit db99a57030
18 changed files with 2169 additions and 777 deletions
@@ -0,0 +1,156 @@
+<script setup>
+import AppLayout from "@/Layouts/AppLayout.vue";
+import { Link, router } from "@inertiajs/vue3";
+import { debounce } from "lodash";
+import { ref, watch, onUnmounted } from "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);
+
+watch(search, (v) => applySearch(v));
+onUnmounted(() => applySearch.cancel && applySearch.cancel());
+
+function formatDate(value) {
+  if (!value) {
+    return "-";
+  }
+  const d = new Date(value);
+  if (isNaN(d)) return value;
+  return `${String(d.getDate()).padStart(2, "0")}.${String(d.getMonth() + 1).padStart(
+    2,
+    "0"
+  )}.${d.getFullYear()}`;
+}
+
+function formatCurrency(value) {
+  if (value === null || value === undefined) return "-";
+  const n = Number(value);
+  if (isNaN(n)) return String(value);
+  return (
+    n.toLocaleString("sl-SI", { minimumFractionDigits: 2, maximumFractionDigits: 2 }) +
+    " €"
+  );
+}
+</script>
+
+<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>
+    <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="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"
+        >
+          <div>
+            Prikazano {{ contracts.from || 0 }}–{{ contracts.to || 0 }} od
+            {{ contracts.total }}
+          </div>
+          <div class="flex items-center gap-2">
+            <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
+            >
+            <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>
+      </div>
+    </div>
+  </AppLayout>
+</template>