79 lines
2.8 KiB
Vue
79 lines
2.8 KiB
Vue
<script setup>
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/Components/ui/dialog";
|
|
import { Button } from "@/Components/ui/button";
|
|
import { Badge } from "@/Components/ui/badge";
|
|
import { Skeleton } from "@/Components/ui/skeleton";
|
|
|
|
const props = defineProps({
|
|
show: { type: Boolean, default: false },
|
|
loading: { type: Boolean, default: false },
|
|
contracts: { type: Array, default: () => [] },
|
|
formatMoney: { type: Function, required: true },
|
|
});
|
|
|
|
const emit = defineEmits(["close"]);
|
|
</script>
|
|
|
|
<template>
|
|
<Dialog :open="show" @update:open="(val) => !val && emit('close')">
|
|
<DialogContent class="max-w-3xl max-h-[80vh] overflow-hidden flex flex-col">
|
|
<DialogHeader>
|
|
<DialogTitle>Manjkajoče pogodbe (aktivne, ne-arhivirane)</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<div class="flex-1 overflow-auto">
|
|
<div v-if="loading" class="space-y-3 p-4">
|
|
<Skeleton v-for="i in 5" :key="i" class="h-16 w-full" />
|
|
</div>
|
|
|
|
<div v-else-if="!contracts.length" class="py-12 text-center">
|
|
<p class="text-sm text-gray-500">Ni zadetkov.</p>
|
|
</div>
|
|
|
|
<div v-else class="divide-y">
|
|
<div
|
|
v-for="row in contracts"
|
|
:key="row.uuid"
|
|
class="p-4 hover:bg-gray-50 transition-colors"
|
|
>
|
|
<div class="flex items-start justify-between gap-4">
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center gap-2 mb-1">
|
|
<code class="text-sm font-medium text-gray-900">{{
|
|
row.reference
|
|
}}</code>
|
|
<Badge variant="secondary" class="text-[10px]">Aktivna</Badge>
|
|
</div>
|
|
<div class="text-xs text-gray-600 space-y-0.5">
|
|
<div class="flex items-center gap-2">
|
|
<span class="font-medium">Primer:</span>
|
|
<span class="truncate">{{ row.full_name || "—" }}</span>
|
|
</div>
|
|
<div v-if="row.balance_amount != null" class="flex items-center gap-2">
|
|
<span class="font-medium">Stanje:</span>
|
|
<span class="font-mono">{{ formatMoney(row.balance_amount) }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
as="a"
|
|
:href="route('clientCase.show', { client_case: row.case_uuid })"
|
|
class="shrink-0"
|
|
>
|
|
Odpri primer
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border-t pt-4 flex justify-end">
|
|
<Button variant="secondary" @click="emit('close')">Zapri</Button>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</template>
|