Major change update laravel, inertia v2 -> v3, other changes

This commit is contained in:
Simon Pocrnjič
2026-04-19 13:47:30 +02:00
parent 92f54f7103
commit 054202dc32
15 changed files with 1280 additions and 1167 deletions
+91 -71
View File
@@ -56,9 +56,6 @@ import {
Download,
Eye,
Building2,
Phone,
Mail,
MapPin,
Activity,
} from "lucide-vue-next";
@@ -284,16 +281,11 @@ const clientSummary = computed(() => {
<template #header>
<div class="flex items-center justify-between gap-3">
<div class="flex items-center gap-3 min-w-0">
<Button
variant="ghost"
size="sm"
@click="router.visit(route('phone.index'))"
class="shrink-0"
>
<ArrowLeft class="w-4 h-4 mr-1" />
<Button variant="outline" size="sm" @click="router.visit(route('phone.index'))">
<ArrowLeft />
Nazaj
</Button>
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-100 truncate">
<h2 class="font-semibold text-gray-800 dark:text-gray-100 truncate">
{{ client_case?.person?.full_name }}
</h2>
</div>
@@ -303,7 +295,7 @@ const clientSummary = computed(() => {
variant="secondary"
class="bg-emerald-100 text-emerald-700 hover:bg-emerald-100"
>
<CheckCircle2 class="w-3 h-3 mr-1" />
<CheckCircle2 class="w-4 h-4" />
Zaključeno danes
</Badge>
<Button
@@ -311,25 +303,25 @@ const clientSummary = computed(() => {
@click="confirmComplete = true"
class="bg-green-600 hover:bg-green-700"
>
<CheckCircle2 class="w-4 h-4 mr-2" />
<CheckCircle2 class="w-4 h-4" />
Zaključi
</Button>
</div>
</div>
</template>
<div class="py-4 sm:py-6">
<div class="py-4 sm:py-2">
<div class="mx-auto max-w-5xl px-2 sm:px-4 space-y-4">
<!-- Client details (account holder) -->
<Card class="gap-3">
<CardHeader>
<Card class="p-0 py-3 gap-3">
<CardHeader class="px-3 py-2">
<CardTitle class="flex items-center gap-2 text-base">
<Building2 class="w-5 h-5 text-gray-500" />
<span class="truncate">{{ clientSummary.name }}</span>
<Badge variant="secondary">Naročnik</Badge>
</CardTitle>
</CardHeader>
<CardContent>
<CardContent class="px-3">
<Separator class="mb-4" />
<PersonDetailPhone
:types="types"
@@ -340,8 +332,8 @@ const clientSummary = computed(() => {
</Card>
<!-- Person (case person) -->
<Card class="gap-3">
<CardHeader class="px-3">
<Card class="p-0 py-3 gap-3">
<CardHeader class="px-3 py-2">
<CardTitle class="flex items-center gap-2 text-base">
<User class="w-5 h-5 text-gray-500" />
<span class="truncate">{{ client_case.person.full_name }}</span>
@@ -353,6 +345,13 @@ const clientSummary = computed(() => {
>
{{ client_case.person.description }}
</CardDescription>
<p
v-if="client_case?.person?.employer"
class="text-xs text-gray-500 dark:text-gray-400 flex items-center gap-1 mt-1"
>
<Building2 class="w-3.5 h-3.5 shrink-0" />
{{ client_case.person.employer }}
</p>
</CardHeader>
<CardContent class="px-3">
<Separator class="mb-4" />
@@ -365,21 +364,21 @@ const clientSummary = computed(() => {
</Card>
<!-- Contracts assigned to me -->
<Card class="p-0 pt-3 gap-1">
<CardHeader class="px-4">
<Card class="p-0 py-3 gap-1">
<CardHeader class="px-3 py-2 pb-0">
<CardTitle class="flex items-center gap-2">
<FileText class="w-5 h-5" />
Pogodbe
</CardTitle>
</CardHeader>
<CardContent class="p-2">
<CardContent class="p-2 space-y-1">
<Card
v-for="c in contracts"
:key="c.uuid || c.id"
class="overflow-hidden p-0 gap-3"
class="overflow-hidden p-0 gap-2"
>
<!-- Contract header: reference + type badge -->
<CardHeader class="p-3 pb-2">
<CardHeader class="p-3 pb-2 gap-0">
<div class="flex items-center flex-wrap">
<CardTitle class="text-base font-semibold">
{{ c.reference || "Šifra pogodbe ni določena" }}
@@ -408,12 +407,20 @@ const clientSummary = computed(() => {
<!-- Collapsibles: description, meta, last object -->
<CardContent
v-if="
c.description || c.last_object || (c.meta && Object.keys(c.meta).length)
c.description ||
c.latest_object ||
(c.meta && Object.keys(c.meta).length)
"
class="pt-0 px-0 space-y-0"
>
<!-- Description + Meta Accordion -->
<template v-if="c.description || (c.meta && Object.keys(c.meta).length)">
<!-- Description + Meta + Latest Object Accordion -->
<template
v-if="
c.description ||
(c.meta && Object.keys(c.meta).length) ||
c.latest_object
"
>
<Separator />
<Accordion type="multiple" class="w-full">
<AccordionItem
@@ -479,43 +486,48 @@ const clientSummary = computed(() => {
</div>
</AccordionContent>
</AccordionItem>
</Accordion>
</template>
<!-- Last object -->
<template v-if="c.last_object">
<Separator
class="mb-3"
:class="
c.description || (c.meta && Object.keys(c.meta).length)
? 'mt-2'
: 'mt-0'
"
/>
<div class="py-1 space-y-1">
<p class="text-xs text-gray-400 uppercase tracking-wide font-medium">
Zadnji predmet
</p>
<p class="text-sm font-medium text-gray-800 dark:text-gray-200">
{{ c.last_object.name || c.last_object.reference }}
<span
v-if="c.last_object.type"
class="ml-1.5 text-xs font-normal text-gray-400"
>({{ c.last_object.type }})</span
>
</p>
<p
v-if="c.last_object.description"
class="text-xs text-gray-500 dark:text-gray-400"
<AccordionItem
v-if="c.latest_object"
value="latest_object"
class="border-b-0"
:class="
c.description || (c.meta && Object.keys(c.meta).length)
? 'border-t'
: ''
"
>
{{ c.last_object.description }}
</p>
</div>
<AccordionTrigger
class="px-3 py-2 text-xs font-medium uppercase tracking-wide hover:no-underline"
>
Zadnji predmet
</AccordionTrigger>
<AccordionContent class="px-3 pb-3">
<div
class="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-line rounded-lg bg-gray-50 dark:bg-gray-800/50 px-3 py-2.5"
>
<p class="text-sm font-medium text-gray-800 dark:text-gray-200">
{{ c.latest_object.name || c.latest_object.reference }}
<span
v-if="c.latest_object.type"
class="ml-1.5 text-xs font-normal text-gray-400"
>({{ c.latest_object.type }})</span
>
</p>
<p
v-if="c.latest_object.description"
class="text-xs text-gray-500 dark:text-gray-400 mt-1"
>
{{ c.latest_object.description }}
</p>
</div>
</AccordionContent>
</AccordionItem>
</Accordion>
</template>
</CardContent>
<!-- Action buttons: full-width row at bottom -->
<div class="grid grid-cols-2 gap-0 border-t mt-1">
<div class="grid grid-cols-2 gap-0 border-t mt-0">
<button
class="flex items-center justify-center gap-2 py-3 text-sm font-medium text-primary hover:bg-primary/5 active:bg-primary/10 transition-colors border-r"
@click="openDrawerAddActivity(c)"
@@ -542,27 +554,27 @@ const clientSummary = computed(() => {
</Card>
<!-- Activities -->
<Card>
<CardHeader>
<Card class="p-0 py-2 gap-2">
<CardHeader class="px-3 py-2">
<div class="flex items-center justify-between">
<CardTitle class="flex items-center gap-2">
<Activity class="w-5 h-5" />
Aktivnosti
</CardTitle>
<Button size="sm" @click="openDrawerAddActivity()">
<Plus class="w-4 h-4 mr-1" />
<Plus class="w-4 h-4" />
Nova
</Button>
</div>
</CardHeader>
<CardContent class="space-y-3">
<CardContent class="space-y-1 px-2">
<Card
v-for="a in activities"
:key="a.id"
class="bg-gray-50/70 dark:bg-gray-800/50"
class="bg-gray-50/70 dark:bg-gray-800/50 p-0 py-2 gap-2"
>
<CardHeader>
<div class="flex items-start justify-between gap-3">
<CardHeader class="px-3 py-2">
<div class="flex items-start justify-between">
<CardTitle class="text-sm font-medium truncate">
{{ activityActionLine(a) || "Aktivnost" }}
</CardTitle>
@@ -583,7 +595,7 @@ const clientSummary = computed(() => {
</div>
</div>
</CardHeader>
<CardContent class="pt-0 space-y-2">
<CardContent class="p-2 pt-0 space-y-2">
<div class="flex flex-wrap gap-1.5">
<Badge v-if="a.contract" variant="secondary" class="text-[10px]">
<FileText class="w-3 h-3 mr-1" />
@@ -609,7 +621,10 @@ const clientSummary = computed(() => {
{{ a.status }}
</Badge>
</div>
<p v-if="a.note" class="text-sm text-gray-700 dark:text-gray-300">
<p
v-if="a.note"
class="text-sm text-gray-900 dark:text-gray-300 whitespace-pre-line rounded-lg bg-secondary dark:bg-gray-800/50 p-2"
>
{{ a.note }}
</p>
</CardContent>
@@ -624,8 +639,8 @@ const clientSummary = computed(() => {
</Card>
<!-- Documents (case + assigned contracts) -->
<Card>
<CardHeader>
<Card class="p-0 py-2 gap-2">
<CardHeader class="px-3 py-2">
<div class="flex items-center justify-between">
<CardTitle class="flex items-center gap-2">
<FileText class="w-5 h-5" />
@@ -649,7 +664,7 @@ const clientSummary = computed(() => {
{{ d.name || d.original_name }}
</div>
<div
class="text-xs text-gray-500 dark:text-gray-400 mt-1 flex items-center gap-2"
class="text-xs text-gray-500 dark:text-gray-400 mt-1 flex items-center gap-2 flex-wrap"
>
<Badge
v-if="d.contract_reference"
@@ -659,6 +674,11 @@ const clientSummary = computed(() => {
Pogodba: {{ d.contract_reference }}
</Badge>
<Badge v-else variant="outline" class="text-[10px]"> Primer </Badge>
<span
v-if="d.mime_type"
class="text-[10px] text-gray-400 font-mono"
>{{ d.mime_type }}</span
>
<span v-if="d.created_at" class="flex items-center gap-1">
<Calendar class="w-3 h-3" />
{{ new Date(d.created_at).toLocaleDateString("sl-SI") }}