sipo/Teren-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update case index page segment index and show page

Browse Source
This commit is contained in:
Simon Pocrnjič
2025-12-14 20:57:39 +01:00
parent a6ec92ec6b
commit 80948d2944
14 changed files with 1141 additions and 626 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/Pages/Segments/Index.vue
+108 -60
View File
@@ -2,6 +2,17 @@
import AppLayout from "@/Layouts/AppLayout.vue";
import { Link } from "@inertiajs/vue3";
import { computed, ref } from "vue";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/Components/ui/card";
import { Input } from "@/Components/ui/input";
import { Badge } from "@/Components/ui/badge";
import { Search } from "lucide-vue-next";
import { fmtCurrency } from "@/Utilities/functions";
const props = defineProps({
segments: Array,
@@ -26,74 +37,111 @@ const filtered = computed(() => {
});
});
function formatCurrencyEUR(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 }) +
" €"
);
}
const totalBalance = computed(() =>
filtered.value.reduce((sum, segment) => sum + Number(segment.total_balance ?? 0), 0)
);
</script>
<template>
<AppLayout title="Segmenti">
<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">
<label class="block text-sm font-medium text-gray-700 mb-1"
>Iskanje (segment ali opis)</label
>
<input
v-model="search"
type="text"
class="border rounded px-3 py-2 w-full max-w-xl"
placeholder="Išči po nazivu segmenta ali opisu"
/>
</div>
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-6">
<h2 class="text-xl font-semibold mb-4">Aktivni segmenti</h2>
<div
v-if="filtered.length"
class="grid gap-4 sm:gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
>
<div
v-for="s in filtered"
:key="s.id"
class="border rounded-lg p-4 shadow-sm hover:shadow transition bg-white"
>
<div class="flex items-start justify-between mb-2">
<h3 class="text-base font-semibold text-gray-900">
<Link :href="route('segments.show', s.id)" class="hover:underline">{{
s.name
}}</Link>
</h3>
<span
class="inline-flex items-center text-xs px-2 py-0.5 rounded-full bg-indigo-50 text-indigo-700 border border-indigo-100"
>
{{ s.contracts_count ?? 0 }} pogodb
</span>
<div class="py-8">
<div class="max-w-6xl mx-auto space-y-6 px-4 sm:px-6 lg:px-8">
<Card>
<CardHeader class="pb-3">
<CardTitle class="text-2xl font-semibold tracking-tight">Segmenti</CardTitle>
<CardDescription>
Pregled vseh aktivnih segmentov in njihovih ključnih kazalnikov.
</CardDescription>
</CardHeader>
<CardContent>
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
<div class="rounded-lg border bg-muted/40 p-4">
<p class="text-xs uppercase text-muted-foreground">Število segmentov</p>
<p class="text-2xl font-semibold">{{ filtered.length }}</p>
</div>
<p class="text-sm text-gray-600 min-h-[1.25rem]">
{{ s.description || "" }}
</p>
<div class="mt-4 flex items-center justify-between">
<div class="text-sm text-gray-500">Vsota stanj</div>
<div class="text-sm font-medium text-gray-900">
{{ formatCurrencyEUR(s.total_balance) }}
</div>
<div class="rounded-lg border bg-muted/40 p-4">
<p class="text-xs uppercase text-muted-foreground">Skupaj pogodb</p>
<p class="text-2xl font-semibold">
{{
filtered.reduce((sum, s) => sum + Number(s.contracts_count ?? 0), 0)
}}
</p>
</div>
<div class="rounded-lg border bg-muted/40 p-4">
<p class="text-xs uppercase text-muted-foreground">Skupaj stanj</p>
<p class="text-2xl font-semibold">{{ fmtCurrency(totalBalance) }}</p>
</div>
</div>
</div>
<div v-else class="text-gray-500">Ni aktivnih segmentov.</div>
</div>
<div class="mt-6">
<label class="text-sm font-medium text-muted-foreground"
>Iskanje (segment ali opis)</label
>
<div class="relative mt-2 max-w-md">
<Search
class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground"
/>
<Input
v-model="search"
type="text"
placeholder="Išči po nazivu segmenta ali opisu"
class="pl-9"
/>
</div>
</div>
</CardContent>
</Card>
<Card>
<CardHeader class="pb-3">
<CardTitle>Aktivni segmenti</CardTitle>
<CardDescription
>Rezultati so razporejeni v kartice. Klik na segment vodi na
podrobnosti.</CardDescription
>
</CardHeader>
<CardContent>
<div
v-if="filtered.length"
class="grid gap-4 sm:gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
>
<Card
v-for="s in filtered"
:key="s.id"
class="border border-border/70 shadow-sm transition hover:-translate-y-0.5 hover:shadow-md"
>
<CardHeader class="space-y-1 pb-2">
<div class="flex items-start justify-between gap-2">
<CardTitle class="text-lg font-semibold">
<Link :href="route('segments.show', s.id)" class="hover:underline">
{{ s.name }}
</Link>
</CardTitle>
<Badge variant="secondary" class="text-xs font-medium">
{{ s.contracts_count ?? 0 }} pogodb
</Badge>
</div>
<CardDescription class="min-h-[1.5rem]">{{
s.description || ""
}}</CardDescription>
</CardHeader>
<CardContent>
<dl class="space-y-3 text-sm">
<div class="flex items-center justify-between">
<dt class="text-muted-foreground">Vsota stanj</dt>
<dd class="font-medium">{{ fmtCurrency(s.total_balance) }}</dd>
</div>
<div class="flex items-center justify-between">
<dt class="text-muted-foreground">Aktivne pogodbe</dt>
<dd class="font-medium">{{ s.contracts_count ?? 0 }}</dd>
</div>
</dl>
</CardContent>
</Card>
</div>
<div v-else class="text-sm text-muted-foreground">Ni aktivnih segmentov.</div>
</CardContent>
</Card>
</div>
</div>
</AppLayout>