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

production #1

Merged
sipo merged 45 commits from production into master 2026-01-27 18:02:44 +00:00
Conversation 0 Commits 45 Files Changed 553 +963 -650
3 changed files with 963 additions and 650 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 6871fe8796 - Show all commits

124
app/Http/Controllers/PhoneViewController.php
View File

@ -13,8 +13,12 @@ public function __construct(protected ReferenceDataCache $referenceCache) {}
public function index(Request $request) public function index(Request $request)
{ {
$userId = $request->user()->id; $userId = $request->user()->id;
$search = $request->input('search');
$clientFilter = $request->input('client');
$perPage = $request->integer('per_page', 15);
$perPage = max(1, min(100, $perPage));
$jobs = FieldJob::query() $query = FieldJob::query()
->where('assigned_user_id', $userId) ->where('assigned_user_id', $userId)
->whereNull('completed_at') ->whereNull('completed_at')
->whereNull('cancelled_at') ->whereNull('cancelled_at')
@ -23,32 +27,78 @@ public function index(Request $request)
$q->with([ $q->with([
'type:id,name', 'type:id,name',
'account', 'account',
'clientCase.person' => function ($pq) { 'clientCase.person.address.type',
$pq->with(['addresses', 'phones']); 'clientCase.person.phones',
},
'clientCase.client:id,uuid,person_id', 'clientCase.client:id,uuid,person_id',
'clientCase.client.person:id,full_name', 'clientCase.client.person:id,full_name',
]); ]);
}, },
]) ])
->orderByDesc('assigned_at') ->orderByDesc('assigned_at');
->limit(100)
->get(); // Apply client filter
if ($clientFilter) {
$query->whereHas('contract.clientCase.client', function ($q) use ($clientFilter) {
$q->where('uuid', $clientFilter);
});
}
// Apply search filter
if ($search) {
$query->where(function ($q) use ($search) {
$q->whereHas('contract', function ($cq) use ($search) {
$cq->where('reference', 'ilike', '%'.$search.'%')
->orWhereHas('clientCase.person', function ($pq) use ($search) {
$pq->where('full_name', 'ilike', '%'.$search.'%');
})
->orWhereHas('clientCase.client.person', function ($pq) use ($search) {
$pq->where('full_name', 'ilike', '%'.$search.'%');
});
});
});
}
$jobs = $query->paginate($perPage)->withQueryString();
// Get unique clients for filter dropdown
$clients = \App\Models\Client::query()
->whereHas('clientCases.contracts.fieldJobs', function ($q) use ($userId) {
$q->where('assigned_user_id', $userId)
->whereNull('completed_at')
->whereNull('cancelled_at');
})
->with(['person:id,full_name'])
->get(['uuid', 'person_id'])
->map(fn ($c) => [
'uuid' => (string) $c->uuid,
'name' => (string) optional($c->person)->full_name,
])
->sortBy('name', SORT_NATURAL | SORT_FLAG_CASE)
->values();
return Inertia::render('Phone/Index', [ return Inertia::render('Phone/Index', [
'jobs' => $jobs, 'jobs' => $jobs,
'clients' => $clients,
'view_mode' => 'assigned', 'view_mode' => 'assigned',
'filters' => [
'search' => $search,
'client' => $clientFilter,
],
]); ]);
} }
public function completedToday(Request $request) public function completedToday(Request $request)
{ {
$userId = $request->user()->id; $userId = $request->user()->id;
$search = $request->input('search');
$clientFilter = $request->input('client');
$perPage = $request->integer('per_page', 15);
$perPage = max(1, min(100, $perPage));
$start = now()->startOfDay(); $start = now()->startOfDay();
$end = now()->endOfDay(); $end = now()->endOfDay();
$jobs = FieldJob::query() $query = FieldJob::query()
->where('assigned_user_id', $userId) ->where('assigned_user_id', $userId)
->whereNull('cancelled_at') ->whereNull('cancelled_at')
->whereBetween('completed_at', [$start, $end]) ->whereBetween('completed_at', [$start, $end])
@ -57,21 +107,63 @@ public function completedToday(Request $request)
$q->with([ $q->with([
'type:id,name', 'type:id,name',
'account', 'account',
'clientCase.person' => function ($pq) { 'clientCase.person.address.type',
$pq->with(['addresses', 'phones']); 'clientCase.person.phones',
},
'clientCase.client:id,uuid,person_id', 'clientCase.client:id,uuid,person_id',
'clientCase.client.person:id,full_name', 'clientCase.client.person:id,full_name',
]); ]);
}, },
]) ])
->orderByDesc('completed_at') ->orderByDesc('completed_at');
->limit(100)
->get(); // Apply client filter
if ($clientFilter) {
$query->whereHas('contract.clientCase.client', function ($q) use ($clientFilter) {
$q->where('uuid', $clientFilter);
});
}
// Apply search filter
if ($search) {
$query->where(function ($q) use ($search) {
$q->whereHas('contract', function ($cq) use ($search) {
$cq->where('reference', 'ilike', '%'.$search.'%')
->orWhereHas('clientCase.person', function ($pq) use ($search) {
$pq->where('full_name', 'ilike', '%'.$search.'%');
})
->orWhereHas('clientCase.client.person', function ($pq) use ($search) {
$pq->where('full_name', 'ilike', '%'.$search.'%');
});
});
});
}
$jobs = $query->paginate($perPage)->withQueryString();
// Get unique clients for filter dropdown
$clients = \App\Models\Client::query()
->whereHas('clientCases.contracts.fieldJobs', function ($q) use ($userId, $start, $end) {
$q->where('assigned_user_id', $userId)
->whereNull('cancelled_at')
->whereBetween('completed_at', [$start, $end]);
})
->with(['person:id,full_name'])
->get(['uuid', 'person_id'])
->map(fn ($c) => [
'uuid' => (string) $c->uuid,
'name' => (string) optional($c->person)->full_name,
])
->sortBy('name', SORT_NATURAL | SORT_FLAG_CASE)
->values();
return Inertia::render('Phone/Index', [ return Inertia::render('Phone/Index', [
'jobs' => $jobs, 'jobs' => $jobs,
'clients' => $clients,
'view_mode' => 'completed-today', 'view_mode' => 'completed-today',
'filters' => [
'search' => $search,
'client' => $clientFilter,
],
]); ]);
} }
@ -81,7 +173,7 @@ public function showCase(\App\Models\ClientCase $clientCase, Request $request)
$completedMode = $request->boolean('completed'); $completedMode = $request->boolean('completed');
// Eager load case with person details // Eager load case with person details
$case = $clientCase->load('person.addresses', 'person.phones', 'person.emails', 'person.bankAccounts'); $case = $clientCase->load('person.address.type', 'person.phones', 'person.emails', 'person.bankAccounts');
// Query contracts based on field jobs // Query contracts based on field jobs
$contractsQuery = FieldJob::query() $contractsQuery = FieldJob::query()
@ -131,7 +223,7 @@ public function showCase(\App\Models\ClientCase $clientCase, Request $request)
->unique(); ->unique();
return Inertia::render('Phone/Case/Index', [ return Inertia::render('Phone/Case/Index', [
'client' => $case->client->load('person.addresses', 'person.phones', 'person.emails', 'person.bankAccounts'), 'client' => $case->client->load('person.address.type', 'person.phones', 'person.emails', 'person.bankAccounts'),
'client_case' => $case, 'client_case' => $case,
'contracts' => $contracts, 'contracts' => $contracts,
'documents' => $documents, 'documents' => $documents,

712
resources/js/Pages/Phone/Case/Index.vue
View File

@ -1,20 +1,60 @@
<script setup> <script setup>
import AppPhoneLayout from "@/Layouts/AppPhoneLayout.vue"; import AppPhoneLayout from "@/Layouts/AppPhoneLayout.vue";
import SectionTitle from "@/Components/SectionTitle.vue";
import PersonDetailPhone from "@/Components/PersonDetailPhone.vue"; import PersonDetailPhone from "@/Components/PersonDetailPhone.vue";
// Removed table-based component for phone; render a list instead
// import DocumentsTable from '@/Components/DocumentsTable.vue';
import DocumentViewerDialog from "@/Components/DocumentsTable/DocumentViewerDialog.vue"; import DocumentViewerDialog from "@/Components/DocumentsTable/DocumentViewerDialog.vue";
import { classifyDocument } from "@/Services/documents"; import { classifyDocument } from "@/Services/documents";
import { reactive, ref, computed, watch, onMounted } from "vue"; import { reactive, ref, computed, watch } from "vue";
import DialogModal from "@/Components/DialogModal.vue";
import InputLabel from "@/Components/InputLabel.vue";
import TextInput from "@/Components/TextInput.vue";
import PrimaryButton from "@/Components/PrimaryButton.vue";
import BasicButton from "@/Components/buttons/BasicButton.vue";
import { useForm, router } from "@inertiajs/vue3"; import { useForm, router } from "@inertiajs/vue3";
import ActivityDrawer from "@/Pages/Cases/Partials/ActivityDrawer.vue"; import ActivityDrawer from "@/Pages/Cases/Partials/ActivityDrawer.vue";
import ConfirmationModal from "@/Components/ConfirmationModal.vue"; import {
Card,
CardContent,
CardHeader,
CardTitle,
CardDescription,
CardFooter,
} from "@/Components/ui/card";
import { Button } from "@/Components/ui/button";
import { Badge } from "@/Components/ui/badge";
import { Separator } from "@/Components/ui/separator";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/Components/ui/dialog";
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from "@/Components/ui/alert-dialog";
import { Input } from "@/Components/ui/input";
import { Label } from "@/Components/ui/label";
import { Checkbox } from "@/Components/ui/checkbox";
import {
ArrowLeft,
CheckCircle2,
FileText,
Calendar,
Euro,
User,
Plus,
Upload,
Download,
Eye,
Building2,
Phone,
Mail,
MapPin,
Activity,
} from "lucide-vue-next";
const props = defineProps({ const props = defineProps({
client: Object, client: Object,
@ -234,297 +274,304 @@ const clientSummary = computed(() => {
<template #header> <template #header>
<div class="flex items-center justify-between gap-3"> <div class="flex items-center justify-between gap-3">
<div class="flex items-center gap-3 min-w-0"> <div class="flex items-center gap-3 min-w-0">
<a <Button
:href="route('phone.index')" variant="ghost"
class="text-sm text-blue-600 hover:underline shrink-0" size="sm"
>← Nazaj</a @click="router.visit(route('phone.index'))"
class="shrink-0"
> >
<h2 class="font-semibold text-xl text-gray-800 truncate"> <ArrowLeft class="w-4 h-4 mr-1" />
Nazaj
</Button>
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-100 truncate">
{{ client_case?.person?.full_name }} {{ client_case?.person?.full_name }}
</h2> </h2>
</div> </div>
<div class="shrink-0"> <div class="shrink-0">
<span <Badge
v-if="props.completed_mode" v-if="props.completed_mode"
class="inline-flex items-center px-2 py-1 rounded-full bg-emerald-100 text-emerald-700 text-xs font-medium" variant="secondary"
class="bg-emerald-100 text-emerald-700 hover:bg-emerald-100"
> >
<CheckCircle2 class="w-3 h-3 mr-1" />
Zaključeno danes Zaključeno danes
</span> </Badge>
<button <Button
v-else v-else
type="button"
class="px-3 py-2 rounded bg-green-600 text-white hover:bg-green-700"
@click="confirmComplete = true" @click="confirmComplete = true"
class="bg-green-600 hover:bg-green-700"
> >
<CheckCircle2 class="w-4 h-4 mr-2" />
Zaključi Zaključi
</button> </Button>
</div> </div>
</div> </div>
</template> </template>
<div class="py-4 sm:py-6"> <div class="py-4 sm:py-6">
<div class="mx-auto max-w-5xl px-2 sm:px-4"> <div class="mx-auto max-w-5xl px-2 sm:px-4 space-y-4">
<!-- Client details (account holder) --> <!-- Client details (account holder) -->
<div class="bg-white rounded-lg shadow border overflow-hidden"> <Card>
<div class="p-3 sm:p-4"> <CardHeader>
<h3 <CardTitle class="flex items-center gap-2 text-base">
class="text-base font-semibold text-gray-900 leading-tight flex items-center gap-2" <Building2 class="w-5 h-5 text-gray-500" />
>
<span class="truncate">{{ clientSummary.name }}</span> <span class="truncate">{{ clientSummary.name }}</span>
<span class="chip-base chip-indigo">Naročnik</span> <Badge variant="secondary">Naročnik</Badge>
</h3> </CardTitle>
<div class="mt-4 pt-4 border-t border-dashed"> </CardHeader>
<PersonDetailPhone <CardContent>
:types="types" <Separator class="mb-4" />
:person="client.person" <PersonDetailPhone
default-tab="phones" :types="types"
/> :person="client.person"
</div> default-tab="phones"
</div> />
</div> </CardContent>
</Card>
<!-- Person (case person) --> <!-- Person (case person) -->
<div class="bg-white rounded-lg shadow border overflow-hidden"> <Card>
<div class="p-3 sm:p-4"> <CardHeader>
<h3 <CardTitle class="flex items-center gap-2 text-base">
class="text-base font-semibold text-gray-900 leading-tight flex items-center gap-2" <User class="w-5 h-5 text-gray-500" />
>
<span class="truncate">{{ client_case.person.full_name }}</span> <span class="truncate">{{ client_case.person.full_name }}</span>
<span class="chip-base chip-indigo">Primer</span> <Badge variant="secondary">Primer</Badge>
</h3> </CardTitle>
<div <CardDescription
v-if="client_case?.person?.description" v-if="client_case?.person?.description"
class="mt-2 text-sm text-gray-700 whitespace-pre-line" class="mt-2 whitespace-pre-line"
> >
{{ client_case.person.description }} {{ client_case.person.description }}
</div> </CardDescription>
<div class="mt-4 pt-4 border-t border-dashed"> </CardHeader>
<PersonDetailPhone <CardContent>
:types="types" <Separator class="mb-4" />
:person="client_case.person" <PersonDetailPhone
default-tab="addresses" :types="types"
/> :person="client_case.person"
</div> default-tab="addresses"
</div> />
</div> </CardContent>
</Card>
<!-- Contracts assigned to me --> <!-- Contracts assigned to me -->
<div class="mt-4 sm:mt-6 bg-white rounded-lg shadow border overflow-hidden"> <Card>
<div class="p-3 sm:p-4"> <CardHeader>
<SectionTitle> <CardTitle class="flex items-center gap-2">
<template #title>Pogodbe</template> <FileText class="w-5 h-5" />
</SectionTitle> Pogodbe
<div class="mt-3 space-y-3"> </CardTitle>
<div </CardHeader>
v-for="c in contracts" <CardContent class="space-y-3">
:key="c.uuid || c.id" <Card
class="rounded border p-3 sm:p-4 bg-white shadow-sm" v-for="c in contracts"
> :key="c.uuid || c.id"
<!-- Header Row --> class="border-l-4 border-l-indigo-500"
>
<CardHeader class="pb-3">
<div class="flex items-start justify-between gap-3"> <div class="flex items-start justify-between gap-3">
<div class="min-w-0"> <div class="min-w-0 flex-1">
<div class="flex items-center gap-2 flex-wrap"> <div class="flex items-center gap-2 flex-wrap">
<p <CardTitle class="text-sm">
class="font-semibold text-gray-900 text-sm leading-tight truncate"
>
{{ c.reference || c.uuid }} {{ c.reference || c.uuid }}
</p> </CardTitle>
<span <Badge v-if="c.type?.name" variant="secondary" class="text-[11px]">
v-if="c.type?.name"
class="inline-flex items-center px-2 py-0.5 rounded-full bg-indigo-100 text-indigo-700 text-[11px] font-medium"
>
{{ c.type.name }} {{ c.type.name }}
</span> </Badge>
</div> </div>
<div v-if="c.account" class="mt-2 flex items-baseline gap-2"> <div v-if="c.account" class="mt-3 flex items-center gap-2">
<span class="uppercase tracking-wide text-[11px] text-gray-400" <Euro class="w-4 h-4 text-gray-400" />
>Odprto</span <div class="flex items-baseline gap-2">
> <span class="text-xs text-gray-500 uppercase">Odprto</span>
<span <span
class="text-lg font-semibold text-gray-900 leading-none tracking-tight" class="text-lg font-semibold text-gray-900 dark:text-gray-100"
>{{ formatAmount(c.account.balance_amount) }} €</span >
> {{ formatAmount(c.account.balance_amount) }} €
</span>
</div>
</div> </div>
</div> </div>
<div class="flex flex-col gap-1.5 w-32 text-right shrink-0"> <div class="flex flex-col gap-2 shrink-0">
<button <Button size="sm" @click="openDrawerAddActivity(c)">
type="button" <Plus class="w-4 h-4 mr-1" />
class="text-sm px-3 py-2 rounded-md bg-indigo-600 text-white hover:bg-indigo-700 active:scale-[.97] transition shadow" Aktivnost
@click="openDrawerAddActivity(c)" </Button>
> <Button size="sm" variant="secondary" @click="openDocDialog(c)">
+ Aktivnost <Upload class="w-4 h-4 mr-1" />
</button> Dokument
<button </Button>
type="button"
class="text-sm px-3 py-2 rounded-md bg-indigo-600 text-white hover:bg-indigo-700 active:scale-[.97] transition shadow"
@click="openDocDialog(c)"
>
+ Dokument
</button>
<!--button
type="button"
:disabled="!getContractObjects(c).length"
@click="openObjectsModal(c)"
class="relative text-sm px-3 py-2 rounded-md flex items-center justify-center transition disabled:cursor-not-allowed disabled:opacity-50 bg-slate-600 text-white hover:bg-slate-700 active:scale-[.97] shadow"
>
Predmeti
<span
class="ml-1 inline-flex items-center justify-center min-w-[1.1rem] h-5 text-[11px] px-1.5 rounded-full bg-white/90 text-slate-700 font-medium"
>{{ getContractObjects(c).length }}</span
>
</button-->
</div> </div>
</div> </div>
<!-- Subject / Last Object --> </CardHeader>
<div v-if="c.last_object" class="mt-3 border-t pt-3"> <CardContent v-if="c.last_object" class="pt-0">
<p class="text-[11px] uppercase tracking-wide text-gray-400 mb-1"> <Separator class="mb-3" />
Zadnji predmet <div class="space-y-1">
</p> <p class="text-xs text-gray-500 uppercase">Zadnji predmet</p>
<div class="text-sm font-medium text-gray-800"> <div class="text-sm font-medium text-gray-800 dark:text-gray-200">
{{ c.last_object.name || c.last_object.reference }} {{ c.last_object.name || c.last_object.reference }}
<span <span
v-if="c.last_object.type" v-if="c.last_object.type"
class="ml-2 text-xs font-normal text-gray-500" class="ml-2 text-xs font-normal text-gray-500"
>({{ c.last_object.type }})</span
> >
({{ c.last_object.type }})
</span>
</div> </div>
<div <div
v-if="c.last_object.description" v-if="c.last_object.description"
class="mt-1 text-sm text-gray-600 leading-snug" class="text-sm text-gray-600 dark:text-gray-400"
> >
{{ c.last_object.description }} {{ c.last_object.description }}
</div> </div>
</div> </div>
</div> </CardContent>
<p v-if="!contracts?.length" class="text-sm text-gray-600"> </Card>
Ni pogodbenih obveznosti dodeljenih vam za ta primer. <p
</p> v-if="!contracts?.length"
</div> class="text-sm text-gray-600 dark:text-gray-400 text-center py-4"
</div> >
</div> Ni pogodbenih obveznosti dodeljenih vam za ta primer.
</p>
</CardContent>
</Card>
<!-- Activities --> <!-- Activities -->
<div class="mt-4 sm:mt-6 bg-white rounded-lg shadow border overflow-hidden"> <Card>
<div class="p-3 sm:p-4"> <CardHeader>
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<SectionTitle> <CardTitle class="flex items-center gap-2">
<template #title>Aktivnosti</template> <Activity class="w-5 h-5" />
</SectionTitle> Aktivnosti
<button </CardTitle>
class="text-xs font-medium px-3 py-2 rounded-md bg-indigo-600 text-white shadow-sm active:scale-[.98] hover:bg-indigo-700" <Button size="sm" @click="openDrawerAddActivity()">
@click="openDrawerAddActivity()" <Plus class="w-4 h-4 mr-1" />
>
Nova Nova
</button> </Button>
</div> </div>
<div class="mt-3 space-y-3"> </CardHeader>
<div <CardContent class="space-y-3">
v-for="a in activities" <Card
:key="a.id" v-for="a in activities"
class="rounded-md border border-gray-200 bg-gray-50/70 px-3 py-3 shadow-sm text-[13px]" :key="a.id"
> class="bg-gray-50/70 dark:bg-gray-800/50"
<!-- Top line: action + date/user --> >
<CardHeader class="pb-3">
<div class="flex items-start justify-between gap-3"> <div class="flex items-start justify-between gap-3">
<div class="font-medium text-gray-800 leading-snug truncate"> <CardTitle class="text-sm font-medium truncate">
{{ activityActionLine(a) || "Aktivnost" }} {{ activityActionLine(a) || "Aktivnost" }}
</div> </CardTitle>
<div <div
class="shrink-0 text-right text-[11px] text-gray-500 leading-tight" class="shrink-0 text-right text-xs text-gray-500 dark:text-gray-400"
> >
<div v-if="a.created_at">{{ formatDateShort(a.created_at) }}</div> <div v-if="a.created_at" class="flex items-center gap-1">
<div v-if="(a.user && a.user.name) || a.user_name" class="truncate"> <Calendar class="w-3 h-3" />
{{ formatDateShort(a.created_at) }}
</div>
<div
v-if="(a.user && a.user.name) || a.user_name"
class="truncate flex items-center gap-1 mt-1"
>
<User class="w-3 h-3" />
{{ a.user?.name || a.user_name }} {{ a.user?.name || a.user_name }}
</div> </div>
</div> </div>
</div> </div>
</CardHeader>
<!-- Badges row --> <CardContent class="pt-0 space-y-2">
<div class="mt-2 flex flex-wrap gap-1.5"> <div class="flex flex-wrap gap-1.5">
<span <Badge v-if="a.contract" variant="secondary" class="text-[10px]">
v-if="a.contract" <FileText class="w-3 h-3 mr-1" />
class="inline-flex items-center rounded-full bg-indigo-100 text-indigo-700 px-2 py-0.5 text-[10px] font-medium" Pogodba: {{ a.contract.reference }}
>Pogodba: {{ a.contract.reference }}</span </Badge>
> <Badge
<span
v-if="a.due_date" v-if="a.due_date"
class="inline-flex items-center rounded-full bg-amber-100 text-amber-700 px-2 py-0.5 text-[10px] font-medium" variant="secondary"
>Zapadlost: {{ formatDateShort(a.due_date) || a.due_date }}</span class="bg-amber-100 text-amber-700 hover:bg-amber-100 text-[10px]"
> >
<span <Calendar class="w-3 h-3 mr-1" />
Zapadlost: {{ formatDateShort(a.due_date) || a.due_date }}
</Badge>
<Badge
v-if="a.amount != null" v-if="a.amount != null"
class="inline-flex items-center rounded-full bg-emerald-100 text-emerald-700 px-2 py-0.5 text-[10px] font-medium" variant="secondary"
>Znesek: {{ formatAmount(a.amount) }} €</span class="bg-emerald-100 text-emerald-700 hover:bg-emerald-100 text-[10px]"
>
<span
v-if="a.status"
class="inline-flex items-center rounded-full bg-gray-200 text-gray-700 px-2 py-0.5 text-[10px] font-medium"
>{{ a.status }}</span
> >
<Euro class="w-3 h-3 mr-1" />
Znesek: {{ formatAmount(a.amount) }} €
</Badge>
<Badge v-if="a.status" variant="outline" class="text-[10px]">
{{ a.status }}
</Badge>
</div> </div>
<p v-if="a.note" class="text-sm text-gray-700 dark:text-gray-300">
<!-- Note -->
<div v-if="a.note" class="mt-2 text-gray-700 leading-snug">
{{ a.note }} {{ a.note }}
</div> </p>
</div> </CardContent>
<div </Card>
v-if="!activities?.length" <p
class="text-gray-600 text-sm py-2 text-center" v-if="!activities?.length"
> class="text-sm text-gray-600 dark:text-gray-400 text-center py-4"
Ni aktivnosti. >
</div> Ni aktivnosti.
</div> </p>
</div> </CardContent>
</div> </Card>
<!-- Documents (case + assigned contracts) --> <!-- Documents (case + assigned contracts) -->
<div class="mt-4 sm:mt-6 bg-white rounded-lg shadow border overflow-hidden"> <Card>
<div class="p-3 sm:p-4"> <CardHeader>
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<SectionTitle> <CardTitle class="flex items-center gap-2">
<template #title>Dokumenti</template> <FileText class="w-5 h-5" />
</SectionTitle> Dokumenti
<button </CardTitle>
class="text-sm px-3 py-2 rounded bg-indigo-600 text-white hover:bg-indigo-700" <Button size="sm" variant="secondary" @click="openDocDialog()">
@click="openDocDialog()" <Upload class="w-4 h-4 mr-1" />
>
Dodaj Dodaj
</button> </Button>
</div> </div>
</CardHeader>
<div class="mt-3 divide-y"> <CardContent>
<div v-for="d in documents" :key="d.uuid || d.id" class="py-3"> <div class="divide-y">
<div v-for="d in documents" :key="d.uuid || d.id" class="py-3 first:pt-0">
<div class="flex items-start justify-between gap-3"> <div class="flex items-start justify-between gap-3">
<div class="min-w-0"> <div class="min-w-0 flex-1">
<div class="font-medium text-gray-900 truncate"> <div
class="font-medium text-gray-900 dark:text-gray-100 truncate flex items-center gap-2"
>
<FileText class="w-4 h-4 text-gray-400 shrink-0" />
{{ d.name || d.original_name }} {{ d.name || d.original_name }}
</div> </div>
<div class="text-xs text-gray-500 mt-0.5">
<span v-if="d.contract_reference"
>Pogodba: {{ d.contract_reference }}</span
>
<span v-else>Primer</span>
<span v-if="d.created_at" class="ml-2"
>· {{ new Date(d.created_at).toLocaleDateString("sl-SI") }}</span
>
</div>
<div <div
class="text-xs text-gray-500 dark:text-gray-400 mt-1 flex items-center gap-2"
>
<Badge
v-if="d.contract_reference"
variant="outline"
class="text-[10px]"
>
Pogodba: {{ d.contract_reference }}
</Badge>
<Badge v-else variant="outline" class="text-[10px]"> Primer </Badge>
<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") }}
</span>
</div>
<p
v-if="d.description" v-if="d.description"
class="text-gray-600 text-sm mt-1 line-clamp-2" class="text-sm text-gray-600 dark:text-gray-400 mt-1 line-clamp-2"
> >
{{ d.description }} {{ d.description }}
</div> </p>
</div> </div>
<div class="shrink-0 flex flex-col items-end gap-2"> <div class="shrink-0 flex gap-2">
<button <Button size="sm" variant="ghost" @click="openViewer(d)">
type="button" <Eye class="w-4 h-4" />
class="text-xs px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 text-gray-800" </Button>
@click="openViewer(d)" <Button
> size="sm"
Ogled variant="ghost"
</button> as="a"
<a
class="text-xs px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 text-gray-800"
:href=" :href="
(() => { (() => {
const isC = (d?.documentable_type || '') const isC = (d?.documentable_type || '')
@ -541,17 +588,21 @@ const clientSummary = computed(() => {
}); });
})() })()
" "
>Prenesi</a
> >
<Download class="w-4 h-4" />
</Button>
</div> </div>
</div> </div>
</div> </div>
<div v-if="!documents?.length" class="text-gray-600 text-sm py-2"> <p
v-if="!documents?.length"
class="text-sm text-gray-600 dark:text-gray-400 text-center py-4"
>
Ni dokumentov. Ni dokumentov.
</div> </p>
</div> </div>
</div> </CardContent>
</div> </Card>
</div> </div>
</div> </div>
@ -573,177 +624,74 @@ const clientSummary = computed(() => {
:contracts="contracts" :contracts="contracts"
/> />
<ConfirmationModal :show="confirmComplete" @close="confirmComplete = false"> <!-- Complete Case Confirmation -->
<template #title>Potrditev</template> <AlertDialog :open="confirmComplete" @update:open="confirmComplete = $event">
<template #content> Ali ste prepričani da želite že zaključit stranko? </template> <AlertDialogContent>
<template #footer> <AlertDialogHeader>
<button <AlertDialogTitle>Potrditev</AlertDialogTitle>
type="button" <AlertDialogDescription>
class="px-3 py-2 rounded bg-gray-100 hover:bg-gray-200" Ali ste prepričani da želite že zaključit stranko?
@click="confirmComplete = false" </AlertDialogDescription>
> </AlertDialogHeader>
Prekliči <AlertDialogFooter>
</button> <AlertDialogCancel @click="confirmComplete = false">
<button Prekliči
type="button" </AlertDialogCancel>
class="px-3 py-2 rounded bg-green-600 text-white hover:bg-green-700 ml-2" <AlertDialogAction
@click="submitComplete" @click="submitComplete"
> class="bg-green-600 hover:bg-green-700"
Potrdi
</button>
</template>
</ConfirmationModal>
<!-- Contract Objects (Predmeti) Modal -->
<DialogModal :show="objectsModal.open" @close="closeObjectsModal">
<template #title>
Predmeti
<span
v-if="objectsModal.contract"
class="block text-xs font-normal text-gray-500 mt-0.5"
>
{{ objectsModal.contract.reference || objectsModal.contract.uuid }}
</span>
</template>
<template #content>
<div
v-if="objectsModal.items.length"
class="space-y-3 max-h-[60vh] overflow-y-auto pr-1"
>
<div
v-for="(o, idx) in objectsModal.items"
:key="o.id || o.uuid || idx"
class="rounded border border-gray-200 bg-gray-50 px-3 py-2 text-sm"
> >
<div class="font-medium text-gray-800 truncate"> Potrdi
{{ o.name || o.reference || "#" + (o.id || o.uuid || idx + 1) }} </AlertDialogAction>
</div> </AlertDialogFooter>
<div class="mt-0.5 text-xs text-gray-500 flex flex-wrap gap-x-2 gap-y-0.5"> </AlertDialogContent>
<span </AlertDialog>
v-if="o.type"
class="inline-flex items-center bg-indigo-100 text-indigo-700 px-1.5 py-0.5 rounded-full"
>{{ o.type }}</span
>
<span
v-if="o.status"
class="inline-flex items-center bg-gray-200 text-gray-700 px-1.5 py-0.5 rounded-full"
>{{ o.status }}</span
>
<span
v-if="o.amount != null"
class="inline-flex items-center bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded-full"
>{{ formatAmount(o.amount) }} €</span
>
</div>
<div v-if="o.description" class="mt-1 text-gray-600 leading-snug">
{{ o.description }}
</div>
</div>
</div>
<div v-else class="text-gray-600 text-sm">Ni predmetov.</div>
</template>
<template #footer>
<button
type="button"
class="px-3 py-2 rounded bg-gray-100 hover:bg-gray-200"
@click="closeObjectsModal"
>
Zapri
</button>
</template>
</DialogModal>
<!-- Upload Document Modal --> <!-- Upload Document Dialog -->
<DialogModal :show="docDialogOpen" @close="closeDocDialog"> <Dialog :open="docDialogOpen" @update:open="docDialogOpen = $event">
<template #title>Dodaj dokument</template> <DialogContent class="max-w-md">
<template #content> <DialogHeader>
<div class="space-y-4"> <DialogTitle>Dodaj dokument</DialogTitle>
<div v-if="selectedContract" class="text-sm text-gray-700"> <DialogDescription v-if="selectedContract">
Dokument bo dodan k pogodbi: Dokument bo dodan k pogodbi:
<span class="font-medium">{{ <strong>{{ selectedContract.reference || selectedContract.uuid }}</strong>
selectedContract.reference || selectedContract.uuid </DialogDescription>
}}</span> </DialogHeader>
</div> <div class="space-y-4">
<div> <div>
<InputLabel for="docFile" value="Datoteka" /> <Label for="docFile">Datoteka</Label>
<input <Input id="docFile" type="file" class="mt-1" @change="onPickDocument" />
id="docFile" <p v-if="docForm.errors.file" class="text-sm text-red-600 mt-1">
type="file"
class="mt-1 block w-full"
@change="onPickDocument"
/>
<div v-if="docForm.errors.file" class="text-sm text-red-600 mt-1">
{{ docForm.errors.file }} {{ docForm.errors.file }}
</div> </p>
</div> </div>
<div> <div>
<InputLabel for="docName" value="Ime" /> <Label for="docName">Ime</Label>
<TextInput id="docName" v-model="docForm.name" class="mt-1 block w-full" /> <Input id="docName" v-model="docForm.name" class="mt-1" />
<div v-if="docForm.errors.name" class="text-sm text-red-600 mt-1"> <p v-if="docForm.errors.name" class="text-sm text-red-600 mt-1">
{{ docForm.errors.name }} {{ docForm.errors.name }}
</div> </p>
</div> </div>
<div> <div>
<InputLabel for="docDesc" value="Opis" /> <Label for="docDesc">Opis</Label>
<TextInput <Input id="docDesc" v-model="docForm.description" class="mt-1" />
id="docDesc" <p v-if="docForm.errors.description" class="text-sm text-red-600 mt-1">
v-model="docForm.description"
class="mt-1 block w-full"
/>
<div v-if="docForm.errors.description" class="text-sm text-red-600 mt-1">
{{ docForm.errors.description }} {{ docForm.errors.description }}
</div> </p>
</div> </div>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<input id="docPublic" type="checkbox" v-model="docForm.is_public" /> <Checkbox id="docPublic" :model-value="docForm.is_public" />
<InputLabel for="docPublic" value="Javno" /> <Label for="docPublic">Javno</Label>
</div> </div>
</div> </div>
</template> <DialogFooter>
<template #footer> <Button variant="outline" @click="closeDocDialog"> Prekliči </Button>
<div class="flex justify-end gap-2"> <Button :disabled="docForm.processing || !docForm.file" @click="submitDocument">
<button <Upload class="w-4 h-4 mr-2" />
type="button"
class="px-3 py-2 rounded bg-gray-100 hover:bg-gray-200"
@click="closeDocDialog"
>
Prekliči
</button>
<button
type="button"
class="px-3 py-2 rounded bg-indigo-600 text-white hover:bg-indigo-700"
:disabled="docForm.processing || !docForm.file"
@click="submitDocument"
>
Naloži Naloži
</button> </Button>
</div> </DialogFooter>
</template> </DialogContent>
</DialogModal> </Dialog>
</AppPhoneLayout> </AppPhoneLayout>
</template> </template>
<style scoped>
/* Using basic CSS since @apply is not processed in this scoped block by default */
.chip-base {
display: inline-flex;
align-items: center;
padding: 0.125rem 0.5rem; /* py-0.5 px-2 */
border-radius: 9999px;
font-size: 11px;
font-weight: 500;
line-height: 1.1;
}
.chip-indigo {
background: #eef2ff;
color: #3730a3;
} /* approx indigo-50 / indigo-700 */
.chip-default {
background: #f1f5f9;
color: #334155;
} /* slate-100 / slate-700 */
.chip-emerald {
background: #ecfdf5;
color: #047857;
} /* emerald-50 / emerald-700 */
</style>

777
resources/js/Pages/Phone/Index.vue
View File

@ -1,67 +1,94 @@
<script setup> <script setup>
import AppPhoneLayout from "@/Layouts/AppPhoneLayout.vue"; import AppPhoneLayout from "@/Layouts/AppPhoneLayout.vue";
import { Separator } from "reka-ui"; import { Badge } from "@/Components/ui/badge";
import { computed, ref } from "vue"; import { Button } from "@/Components/ui/button";
import {
Card,
CardContent,
CardFooter,
CardHeader,
CardTitle,
} from "@/Components/ui/card";
import { Input } from "@/Components/ui/input";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/Components/ui/select";
import { Separator } from "@/Components/ui/separator";
import { Skeleton } from "@/Components/ui/skeleton";
import { router } from "@inertiajs/vue3";
import { computed, ref, watch } from "vue";
import { useDebounceFn } from "@vueuse/core";
import {
CalendarDays,
FileText,
FilterIcon,
MapPin,
Phone,
Wallet,
} from "lucide-vue-next";
const props = defineProps({ const props = defineProps({
jobs: { type: Array, default: () => [] }, jobs: { type: Object, required: true },
view_mode: { type: String, default: "assigned" }, // 'assigned' | 'completed-today' clients: { type: Array, default: () => [] },
view_mode: { type: String, default: "assigned" },
filters: { type: Object, default: () => ({ search: "", client: "" }) },
}); });
const items = computed(() => props.jobs || []); const search = ref(props.filters.search || "");
const clientFilter = ref(props.filters.client || "");
const isLoading = ref(false);
// Client filter options derived from jobs const listNonActivity = computed(() =>
const clientFilter = ref(""); (props.jobs.data || []).filter((item) => !item.added_activity)
const listNonActivity = ref([]); );
const listActivity = ref([]);
const clientOptions = computed(() => { const listActivity = computed(() =>
const map = new Map(); (props.jobs.data || []).filter((item) => !!item.added_activity)
for (const job of items.value) { );
const client = job?.contract?.client_case?.client;
const uuid = client?.uuid; const debouncedSearch = useDebounceFn((value) => {
const name = client?.person?.full_name; performSearch();
if (uuid && name && !map.has(uuid)) { }, 500);
map.set(uuid, { uuid, name });
watch(search, (newValue) => {
debouncedSearch(newValue);
});
watch(clientFilter, () => {
performSearch();
});
function performSearch() {
isLoading.value = true;
router.get(
route(props.view_mode === "completed-today" ? "phone.completed" : "phone.index"),
{
search: search.value || undefined,
client: clientFilter.value || undefined,
},
{
preserveState: true,
preserveScroll: true,
only: ["jobs", "filters"],
onFinish: () => {
isLoading.value = false;
},
} }
} );
return Array.from(map.values()).sort((a, b) => a.name.localeCompare(b.name)); }
});
// Search filter (contract reference or person full name) function clearSearch() {
const search = ref(""); search.value = "";
const filteredJobs = computed(() => { clientFilter.value = "";
const term = search.value.trim().toLowerCase(); }
const filterList = items.value.filter((job) => {
// Filter by selected client (if any)
if (clientFilter.value) {
const juuid = job?.contract?.client_case?.client?.uuid;
if (juuid !== clientFilter.value) {
return false;
}
}
// Text search
if (!term) return true;
const refStr = (job.contract?.reference || job.contract?.uuid || "")
.toString()
.toLowerCase();
const nameStr = (job.contract?.client_case?.person?.full_name || "").toLowerCase();
const clientNameStr = (
job.contract?.client_case?.client?.person?.full_name || ""
).toLowerCase();
return (
refStr.includes(term) || nameStr.includes(term) || clientNameStr.includes(term)
);
});
listNonActivity.value = filterList.filter((item) => !item.added_activity);
listActivity.value = filterList.filter((item) => !!item.added_activity);
return filterList;
});
function formatDateDMY(d) { function formatDateDMY(d) {
if (!d) return "-"; if (!d) return "-";
// Handle date-only strings from Laravel JSON casts (YYYY-MM-DD...)
if (/^\d{4}-\d{2}-\d{2}/.test(d)) { if (/^\d{4}-\d{2}-\d{2}/.test(d)) {
const [y, m, rest] = d.split("-"); const [y, m, rest] = d.split("-");
const day = (rest || "").slice(0, 2) || "01"; const day = (rest || "").slice(0, 2) || "01";
@ -85,226 +112,472 @@ function formatAmount(val) {
}); });
} }
// Safely resolve a client case UUID for a job
function getCaseUuid(job) { function getCaseUuid(job) {
return ( return (
job?.contract?.client_case?.uuid || job?.client_case?.uuid || job?.case_uuid || null job?.contract?.client_case?.uuid || job?.client_case?.uuid || job?.case_uuid || null
); );
} }
function changePage(url) {
if (!url) return;
isLoading.value = true;
router.get(
url,
{},
{
preserveState: true,
preserveScroll: false,
only: ["jobs"],
onFinish: () => {
isLoading.value = false;
},
}
);
}
</script> </script>
<template> <template>
<AppPhoneLayout title="Phone"> <AppPhoneLayout title="Phone">
<template #header> <template #header>
<h2 class="font-semibold text-xl text-gray-800 leading-tight"> <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
{{ {{
props.view_mode === "completed-today" props.view_mode === "completed-today" ? "Zaključeno danes" : "Terenska opravila"
? "Zaključena opravila danes"
: "Moja terenska opravila"
}} }}
</h2> </h2>
</template> </template>
<div class="py-4 sm:py-8"> <div class="py-6 sm:py-8">
<div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8"> <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 space-y-4">
<div class="mb-4 flex items-center gap-2 flex-wrap"> <!-- Filters Section -->
<select <Card>
v-model="clientFilter" <CardHeader class="flex flex-row gap-1 items-center">
class="rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" <FilterIcon size="20" />
> <CardTitle class="text-xl">Filter</CardTitle>
<option value="">Vsi naročniki</option> </CardHeader>
<option v-for="c in clientOptions" :key="c.uuid" :value="c.uuid"> <CardContent>
{{ c.name }} <div class="flex flex-col sm:flex-row gap-4">
</option> <div class="flex-1">
</select> <Input
<input v-model="search"
v-model="search" type="text"
type="text" placeholder="Išči po referenci ali imenu..."
placeholder="Išči po referenci ali imenu..." class="w-full"
class="flex-1 rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
/> </div>
<button
v-if="search"
type="button"
@click="search = ''"
class="text-xs px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 text-gray-600"
>
Počisti
</button>
</div>
<template v-if="filteredJobs.length"> <Select v-model="clientFilter">
<h2 class="py-4">Nove / Ne obdelane</h2> <SelectTrigger class="w-full sm:w-64">
<div class="grid grid-cols-1 gap-3 sm:gap-4 md:grid-cols-2 lg:grid-cols-3"> <SelectValue placeholder="Vsi naročniki" />
<div </SelectTrigger>
v-for="job in listNonActivity" <SelectContent>
:key="job.id" <SelectItem
class="bg-white rounded-lg shadow border p-3 sm:p-4" v-for="client in props.clients"
> :key="client.uuid"
<div class="mb-4 flex gap-2"> :value="client.uuid"
<a >
v-if="getCaseUuid(job)" {{ client.name }}
:href=" </SelectItem>
route('phone.case', { </SelectContent>
client_case: getCaseUuid(job), </Select>
completed: props.view_mode === 'completed-today' ? 1 : undefined,
}) <Button
" v-if="search || clientFilter"
class="inline-flex-1 flex-1 text-center px-3 py-2 rounded-md bg-blue-600 text-white text-sm hover:bg-blue-700" variant="outline"
> @click="clearSearch"
Odpri primer >
</a> Počisti
<button </Button>
v-else </div>
type="button" </CardContent>
disabled </Card>
class="inline-flex-1 flex-1 text-center px-3 py-2 rounded-md bg-gray-300 text-gray-600 text-sm cursor-not-allowed"
> <!-- Loading Skeleton -->
Manjka primer <div v-if="isLoading" class="space-y-6">
</button> <div class="space-y-3">
</div> <Skeleton class="h-8 w-48" />
<div class="flex items-center justify-between"> <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
<p class="text-sm text-gray-500"> <Skeleton v-for="i in 6" :key="i" class="h-72" />
Dodeljeno:
<span class="font-medium text-gray-700">{{
formatDateDMY(job.assigned_at)
}}</span>
</p>
<span
v-if="job.priority"
class="inline-block text-xs px-2 py-0.5 rounded bg-amber-100 text-amber-700"
>Prioriteta</span
>
</div>
<div class="mt-2">
<p class="text-base sm:text-lg font-semibold text-gray-800">
{{ job.contract?.client_case?.person?.full_name || "—" }}
</p>
<p class="text-sm text-gray-600">
Naročnik:
<span class="font-semibold text-gray-800">
{{ job.contract?.client_case?.client?.person?.full_name || "—" }}
</span>
</p>
<p class="text-sm text-gray-600 truncate">
Kontrakt: {{ job.contract?.reference || job.contract?.uuid }}
</p>
<p
class="text-sm text-gray-600"
v-if="
job.contract?.account &&
job.contract.account.balance_amount !== null &&
job.contract.account.balance_amount !== undefined
"
>
Odprto: {{ formatAmount(job.contract.account.balance_amount) }} €
</p>
</div>
<div class="mt-3 text-sm text-gray-600">
<p>
<span class="font-medium">Naslov:</span>
{{ job.contract?.client_case?.person?.addresses?.[0]?.address || "—" }}
</p>
<p>
<span class="font-medium">Telefon:</span>
{{ job.contract?.client_case?.person?.phones?.[0]?.nu || "—" }}
</p>
</div>
</div> </div>
</div> </div>
<h2 class="py-4">Obdelane pogodbe</h2>
<div class="grid grid-cols-1 gap-3 sm:gap-4 md:grid-cols-2 lg:grid-cols-3">
<div
v-for="job in listActivity"
:key="job.id"
class="bg-white rounded-lg shadow border p-3 sm:p-4"
>
<div class="mb-4 flex gap-2">
<a
v-if="getCaseUuid(job)"
:href="
route('phone.case', {
client_case: getCaseUuid(job),
completed: props.view_mode === 'completed-today' ? 1 : undefined,
})
"
class="inline-flex-1 flex-1 text-center px-3 py-2 rounded-md bg-blue-600 text-white text-sm hover:bg-blue-700"
>
Odpri primer
</a>
<button
v-else
type="button"
disabled
class="inline-flex-1 flex-1 text-center px-3 py-2 rounded-md bg-gray-300 text-gray-600 text-sm cursor-not-allowed"
>
Manjka primer
</button>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">
Dodeljeno:
<span class="font-medium text-gray-700">{{
formatDateDMY(job.assigned_at)
}}</span>
</p>
<span
v-if="job.priority"
class="inline-block text-xs px-2 py-0.5 rounded bg-amber-100 text-amber-700"
>Prioriteta</span
>
</div>
<div class="mt-2">
<p class="text-base sm:text-lg font-semibold text-gray-800">
{{ job.contract?.client_case?.person?.full_name || "—" }}
</p>
<p class="text-sm text-gray-600">
Naročnik:
<span class="font-semibold text-gray-800">
{{ job.contract?.client_case?.client?.person?.full_name || "—" }}
</span>
</p>
<p class="text-sm text-gray-600 truncate">
Kontrakt: {{ job.contract?.reference || job.contract?.uuid }}
</p>
<p
class="text-sm text-gray-600"
v-if="
job.contract?.account &&
job.contract.account.balance_amount !== null &&
job.contract.account.balance_amount !== undefined
"
>
Odprto: {{ formatAmount(job.contract.account.balance_amount) }} €
</p>
</div>
<div class="mt-3 text-sm text-gray-600">
<p>
<span class="font-medium">Naslov:</span>
{{ job.contract?.client_case?.person?.addresses?.[0]?.address || "—" }}
</p>
<p>
<span class="font-medium">Telefon:</span>
{{ job.contract?.client_case?.person?.phones?.[0]?.nu || "—" }}
</p>
</div>
<div class="mt-3 text-sm text-gray-600">
<p>
<span class="font-medium">Zadnja aktivnost:</span>
{{ formatDateDMY(job.last_activity) || "—" }}
</p>
</div>
</div>
</div>
</template>
<div
v-else
class="col-span-full bg-white rounded-lg shadow border p-6 text-center text-gray-600"
>
<span v-if="search">Ni zadetkov za podani filter.</span>
<span v-else>Trenutno nimate dodeljenih terenskih opravil.</span>
</div> </div>
<!-- Content -->
<div v-else-if="props.jobs.data && props.jobs.data.length" class="space-y-8">
<!-- Non-Activity Jobs -->
<section v-if="listNonActivity.length" class="space-y-4">
<div class="flex items-center gap-3">
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">
Nove / Ne obdelano
</h2>
<Badge variant="secondary" class="text-sm">
{{ listNonActivity.length }}
</Badge>
</div>
<div class="grid grid-cols-1 gap-2 md:grid-cols-2 xl:grid-cols-3">
<Card
v-for="job in listNonActivity"
:key="job.id"
class="flex flex-col hover:shadow-xl transition-all duration-200 border-l-2 border-l-blue-500"
>
<CardHeader>
<div class="flex items-start justify-between gap-2">
<div class="flex-1 min-w-0">
<h3
class="text-xl font-bold text-gray-900 dark:text-gray-100 truncate mb-1"
>
{{ job.contract?.client_case?.person?.full_name || "—" }}
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">
<span class="font-semibold text-indigo-600 dark:text-indigo-400"
>Naročnik:</span
>
<span class="ml-1 font-medium text-gray-900 dark:text-gray-200">
{{
job.contract?.client_case?.client?.person?.full_name || "—"
}}
</span>
</p>
</div>
<Badge
v-if="job.priority"
variant="destructive"
class="shrink-0 animate-pulse"
>
Prioriteta
</Badge>
</div>
</CardHeader>
<CardContent class="flex-1 space-y-3 pt-4">
<div class="space-y-3 text-sm">
<div class="flex items-start gap-3">
<CalendarDays class="w-5 h-5 text-gray-400 shrink-0 mt-0.5" />
<div class="flex-1 min-w-0">
<p
class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-0.5"
>
Dodeljeno
</p>
<p class="font-semibold text-gray-900 dark:text-gray-100">
{{ formatDateDMY(job.assigned_at) }}
</p>
</div>
</div>
<Separator />
<div class="flex items-start gap-3">
<FileText class="w-5 h-5 text-gray-400 shrink-0 mt-0.5" />
<div class="flex-1 min-w-0">
<p
class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-0.5"
>
Pogodba
</p>
<p
class="font-mono text-xs text-gray-900 dark:text-gray-100 bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded inline-block"
>
{{ job.contract?.reference || job.contract?.uuid }}
</p>
</div>
</div>
<div class="flex items-start gap-3">
<MapPin class="w-5 h-5 text-gray-400 shrink-0 mt-0.5" />
<div class="flex-1 min-w-0">
<p
class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-0.5"
>
Naslov
</p>
<p class="text-gray-900 dark:text-gray-100">
{{ job.contract?.client_case?.person?.address?.address || "—" }}
</p>
</div>
</div>
<div class="flex items-start gap-3">
<Phone class="w-5 h-5 text-gray-400 shrink-0 mt-0.5" />
<div class="flex-1 min-w-0">
<p
class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-0.5"
>
Telefon
</p>
<p class="font-medium text-gray-900 dark:text-gray-100">
{{ job.contract?.client_case?.person?.phones?.[0]?.nu || "—" }}
</p>
</div>
</div>
<div
v-if="job.contract?.account?.balance_amount != null"
class="flex items-start gap-3 p-3 bg-red-50 dark:bg-red-950/20 rounded border border-red-200 dark:border-red-900 mt-4"
>
<Wallet
class="w-5 h-5 text-red-600 dark:text-red-400 shrink-0 mt-0.5"
/>
<div class="flex-1 min-w-0">
<p
class="text-xs text-red-600 dark:text-red-400 uppercase tracking-wide mb-0.5"
>
Odprto
</p>
<p class="font-bold text-red-700 dark:text-red-400 text-lg">
{{ formatAmount(job.contract.account.balance_amount) }} €
</p>
</div>
</div>
</div>
</CardContent>
<CardFooter class="pt-4 mt-auto">
<Button
v-if="getCaseUuid(job)"
as="a"
:href="
route('phone.case', {
client_case: getCaseUuid(job),
completed: props.view_mode === 'completed-today' ? 1 : undefined,
})
"
class="w-full font-semibold"
size="lg"
>
Odpri primer
</Button>
<Button v-else disabled class="w-full" variant="secondary" size="lg">
Manjka primer
</Button>
</CardFooter>
</Card>
</div>
</section>
<!-- Activity Jobs -->
<section v-if="listActivity.length" class="space-y-4">
<div class="flex items-center gap-3">
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">
Obdelane pogodbe
</h2>
<Badge variant="secondary" class="text-sm">
{{ listActivity.length }}
</Badge>
</div>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
<Card
v-for="job in listActivity"
:key="job.id"
class="flex flex-col hover:shadow-xl transition-all duration-200 border-l-2 border-l-green-500"
>
<CardHeader>
<div class="flex items-start justify-between gap-2">
<div class="flex-1 min-w-0">
<h3
class="text-xl font-bold text-gray-900 dark:text-gray-100 truncate mb-1"
>
{{ job.contract?.client_case?.person?.full_name || "—" }}
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">
<span class="font-semibold text-indigo-600 dark:text-indigo-400"
>Naročnik:</span
>
<span class="ml-1 font-medium text-gray-900 dark:text-gray-200">
{{
job.contract?.client_case?.client?.person?.full_name || "—"
}}
</span>
</p>
</div>
<Badge
v-if="job.priority"
variant="destructive"
class="shrink-0 animate-pulse"
>
Prioriteta
</Badge>
</div>
</CardHeader>
<CardContent class="flex-1 space-y-3 pt-4">
<div class="space-y-3 text-sm">
<div class="flex items-start gap-3">
<CalendarDays class="w-5 h-5 text-gray-400 shrink-0 mt-0.5" />
<div class="flex-1 min-w-0">
<p
class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-0.5"
>
Dodeljeno
</p>
<p class="font-semibold text-gray-900 dark:text-gray-100">
{{ formatDateDMY(job.assigned_at) }}
</p>
</div>
</div>
<div
class="flex items-start gap-3 p-2 bg-green-50 dark:bg-green-900/20 rounded"
>
<CalendarDays
class="w-5 h-5 text-green-600 dark:text-green-400 shrink-0 mt-0.5"
/>
<div class="flex-1 min-w-0">
<p
class="text-xs text-green-600 dark:text-green-400 uppercase tracking-wide mb-0.5"
>
Zadnja aktivnost
</p>
<p class="font-semibold text-green-700 dark:text-green-400">
{{ formatDateDMY(job.last_activity) || "—" }}
</p>
</div>
</div>
<Separator />
<div class="flex items-start gap-3">
<FileText class="w-5 h-5 text-gray-400 shrink-0 mt-0.5" />
<div class="flex-1 min-w-0">
<p
class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-0.5"
>
Kontrakt
</p>
<p
class="font-mono text-xs text-gray-900 dark:text-gray-100 bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded inline-block"
>
{{ job.contract?.reference || job.contract?.uuid }}
</p>
</div>
</div>
<div class="flex items-start gap-3">
<MapPin class="w-5 h-5 text-gray-400 shrink-0 mt-0.5" />
<div class="flex-1 min-w-0">
<p
class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-0.5"
>
Naslov
</p>
<p class="text-gray-900 dark:text-gray-100">
{{ job.contract?.client_case?.person?.address?.address || "—" }}
</p>
</div>
</div>
<div class="flex items-start gap-3">
<Phone class="w-5 h-5 text-gray-400 shrink-0 mt-0.5" />
<div class="flex-1 min-w-0">
<p
class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-0.5"
>
Telefon
</p>
<p class="font-medium text-gray-900 dark:text-gray-100">
{{ job.contract?.client_case?.person?.phones?.[0]?.nu || "—" }}
</p>
</div>
</div>
<div
v-if="job.contract?.account?.balance_amount != null"
class="flex items-start gap-3 p-3 bg-red-50 dark:bg-red-950/20 rounded border border-red-200 dark:border-red-900 mt-4"
>
<Wallet
class="w-5 h-5 text-red-600 dark:text-red-400 shrink-0 mt-0.5"
/>
<div class="flex-1 min-w-0">
<p
class="text-xs text-red-600 dark:text-red-400 uppercase tracking-wide mb-0.5"
>
Odprto
</p>
<p class="font-bold text-red-700 dark:text-red-400 text-lg">
{{ formatAmount(job.contract.account.balance_amount) }} €
</p>
</div>
</div>
</div>
</CardContent>
<CardFooter class="pt-4 mt-auto">
<Button
v-if="getCaseUuid(job)"
as="a"
:href="
route('phone.case', {
client_case: getCaseUuid(job),
completed: props.view_mode === 'completed-today' ? 1 : undefined,
})
"
class="w-full font-semibold"
variant="secondary"
size="lg"
>
Odpri primer
</Button>
<Button v-else disabled class="w-full" variant="secondary" size="lg">
Manjka primer
</Button>
</CardFooter>
</Card>
</div>
</section>
<!-- Pagination -->
<Card v-if="props.jobs.links && props.jobs.links.length > 3">
<CardContent class="pt-6">
<div class="flex flex-wrap items-center justify-center gap-2">
<Button
v-for="(link, index) in props.jobs.links"
:key="index"
:variant="link.active ? 'default' : 'outline'"
:disabled="!link.url"
@click="changePage(link.url)"
size="sm"
v-html="link.label"
/>
</div>
</CardContent>
</Card>
</div>
<!-- Empty State -->
<Card v-else>
<CardContent class="py-12">
<div class="text-center space-y-3">
<div
class="mx-auto w-16 h-16 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center"
>
<svg
class="w-8 h-8 text-gray-400 dark:text-gray-600"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
/>
</svg>
</div>
<p class="text-lg font-medium text-gray-900 dark:text-gray-100">
{{ search || clientFilter ? "Ni zadetkov" : "Ni opravil" }}
</p>
<p class="text-sm text-gray-600 dark:text-gray-400">
{{
search || clientFilter
? "Poskusite spremeniti iskalne kriterije"
: "Trenutno nimate dodeljenih terenskih opravil"
}}
</p>
</div>
</CardContent>
</Card>
</div> </div>
</div> </div>
</AppPhoneLayout> </AppPhoneLayout>