Teren-app/resources/js/Pages/Segments/Index.vue

<script setup>
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,
});

const search = ref("");

const filtered = computed(() => {
  const q = (search.value || "").toLowerCase();
  if (!q) {
    return props.segments || [];
  }
  return (props.segments || []).filter((s) => {
    return (
      String(s.name || "")
        .toLowerCase()
        .includes(q) ||
      String(s.description || "")
        .toLowerCase()
        .includes(q)
    );
  });
});

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="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>
              <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 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>
</template>