Phone view updated with shadcn-vue components
This commit is contained in:
Simon Pocrnjič
parent
137e0b45ad
commit
6871fe8796
|
|
@ -13,8 +13,12 @@ public function __construct(protected ReferenceDataCache $referenceCache) {}
|
|||
public function index(Request $request)
|
||||
{
|
||||
$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)
|
||||
->whereNull('completed_at')
|
||||
->whereNull('cancelled_at')
|
||||
|
|
@ -23,32 +27,78 @@ public function index(Request $request)
|
|||
$q->with([
|
||||
'type:id,name',
|
||||
'account',
|
||||
'clientCase.person' => function ($pq) {
|
||||
$pq->with(['addresses', 'phones']);
|
||||
},
|
||||
'clientCase.person.address.type',
|
||||
'clientCase.person.phones',
|
||||
'clientCase.client:id,uuid,person_id',
|
||||
'clientCase.client.person:id,full_name',
|
||||
]);
|
||||
},
|
||||
])
|
||||
->orderByDesc('assigned_at')
|
||||
->limit(100)
|
||||
->get();
|
||||
->orderByDesc('assigned_at');
|
||||
|
||||
// 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', [
|
||||
'jobs' => $jobs,
|
||||
'clients' => $clients,
|
||||
'view_mode' => 'assigned',
|
||||
'filters' => [
|
||||
'search' => $search,
|
||||
'client' => $clientFilter,
|
||||
],
|
||||
]);
|
||||
}
|
||||
|
||||
public function completedToday(Request $request)
|
||||
{
|
||||
$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();
|
||||
$end = now()->endOfDay();
|
||||
|
||||
$jobs = FieldJob::query()
|
||||
$query = FieldJob::query()
|
||||
->where('assigned_user_id', $userId)
|
||||
->whereNull('cancelled_at')
|
||||
->whereBetween('completed_at', [$start, $end])
|
||||
|
|
@ -57,21 +107,63 @@ public function completedToday(Request $request)
|
|||
$q->with([
|
||||
'type:id,name',
|
||||
'account',
|
||||
'clientCase.person' => function ($pq) {
|
||||
$pq->with(['addresses', 'phones']);
|
||||
},
|
||||
'clientCase.person.address.type',
|
||||
'clientCase.person.phones',
|
||||
'clientCase.client:id,uuid,person_id',
|
||||
'clientCase.client.person:id,full_name',
|
||||
]);
|
||||
},
|
||||
])
|
||||
->orderByDesc('completed_at')
|
||||
->limit(100)
|
||||
->get();
|
||||
->orderByDesc('completed_at');
|
||||
|
||||
// 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', [
|
||||
'jobs' => $jobs,
|
||||
'clients' => $clients,
|
||||
'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');
|
||||
|
||||
// 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
|
||||
$contractsQuery = FieldJob::query()
|
||||
|
|
@ -131,7 +223,7 @@ public function showCase(\App\Models\ClientCase $clientCase, Request $request)
|
|||
->unique();
|
||||
|
||||
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,
|
||||
'contracts' => $contracts,
|
||||
'documents' => $documents,
|
||||
|
|
|
|||
|
|
@ -1,20 +1,60 @@
|
|||
<script setup>
|
||||
import AppPhoneLayout from "@/Layouts/AppPhoneLayout.vue";
|
||||
import SectionTitle from "@/Components/SectionTitle.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 { classifyDocument } from "@/Services/documents";
|
||||
import { reactive, ref, computed, watch, onMounted } 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 { reactive, ref, computed, watch } from "vue";
|
||||
import { useForm, router } from "@inertiajs/vue3";
|
||||
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({
|
||||
client: Object,
|
||||
|
|
@ -234,297 +274,304 @@ const clientSummary = computed(() => {
|
|||
<template #header>
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<div class="flex items-center gap-3 min-w-0">
|
||||
<a
|
||||
:href="route('phone.index')"
|
||||
class="text-sm text-blue-600 hover:underline shrink-0"
|
||||
>← Nazaj</a
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
@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 }}
|
||||
</h2>
|
||||
</div>
|
||||
<div class="shrink-0">
|
||||
<span
|
||||
<Badge
|
||||
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
|
||||
</span>
|
||||
<button
|
||||
</Badge>
|
||||
<Button
|
||||
v-else
|
||||
type="button"
|
||||
class="px-3 py-2 rounded bg-green-600 text-white hover:bg-green-700"
|
||||
@click="confirmComplete = true"
|
||||
class="bg-green-600 hover:bg-green-700"
|
||||
>
|
||||
<CheckCircle2 class="w-4 h-4 mr-2" />
|
||||
Zaključi
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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) -->
|
||||
<div class="bg-white rounded-lg shadow border overflow-hidden">
|
||||
<div class="p-3 sm:p-4">
|
||||
<h3
|
||||
class="text-base font-semibold text-gray-900 leading-tight flex items-center gap-2"
|
||||
>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle class="flex items-center gap-2 text-base">
|
||||
<Building2 class="w-5 h-5 text-gray-500" />
|
||||
<span class="truncate">{{ clientSummary.name }}</span>
|
||||
<span class="chip-base chip-indigo">Naročnik</span>
|
||||
</h3>
|
||||
<div class="mt-4 pt-4 border-t border-dashed">
|
||||
<Badge variant="secondary">Naročnik</Badge>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Separator class="mb-4" />
|
||||
<PersonDetailPhone
|
||||
:types="types"
|
||||
:person="client.person"
|
||||
default-tab="phones"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Person (case person) -->
|
||||
<div class="bg-white rounded-lg shadow border overflow-hidden">
|
||||
<div class="p-3 sm:p-4">
|
||||
<h3
|
||||
class="text-base font-semibold text-gray-900 leading-tight flex items-center gap-2"
|
||||
>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<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>
|
||||
<span class="chip-base chip-indigo">Primer</span>
|
||||
</h3>
|
||||
<div
|
||||
<Badge variant="secondary">Primer</Badge>
|
||||
</CardTitle>
|
||||
<CardDescription
|
||||
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 }}
|
||||
</div>
|
||||
<div class="mt-4 pt-4 border-t border-dashed">
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Separator class="mb-4" />
|
||||
<PersonDetailPhone
|
||||
:types="types"
|
||||
:person="client_case.person"
|
||||
default-tab="addresses"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Contracts assigned to me -->
|
||||
<div class="mt-4 sm:mt-6 bg-white rounded-lg shadow border overflow-hidden">
|
||||
<div class="p-3 sm:p-4">
|
||||
<SectionTitle>
|
||||
<template #title>Pogodbe</template>
|
||||
</SectionTitle>
|
||||
<div class="mt-3 space-y-3">
|
||||
<div
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle class="flex items-center gap-2">
|
||||
<FileText class="w-5 h-5" />
|
||||
Pogodbe
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-3">
|
||||
<Card
|
||||
v-for="c in contracts"
|
||||
:key="c.uuid || c.id"
|
||||
class="rounded border p-3 sm:p-4 bg-white shadow-sm"
|
||||
class="border-l-4 border-l-indigo-500"
|
||||
>
|
||||
<!-- Header Row -->
|
||||
<CardHeader class="pb-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">
|
||||
<p
|
||||
class="font-semibold text-gray-900 text-sm leading-tight truncate"
|
||||
>
|
||||
<CardTitle class="text-sm">
|
||||
{{ c.reference || c.uuid }}
|
||||
</p>
|
||||
<span
|
||||
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"
|
||||
>
|
||||
</CardTitle>
|
||||
<Badge v-if="c.type?.name" variant="secondary" class="text-[11px]">
|
||||
{{ c.type.name }}
|
||||
</Badge>
|
||||
</div>
|
||||
<div v-if="c.account" class="mt-3 flex items-center gap-2">
|
||||
<Euro class="w-4 h-4 text-gray-400" />
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="text-xs text-gray-500 uppercase">Odprto</span>
|
||||
<span
|
||||
class="text-lg font-semibold text-gray-900 dark:text-gray-100"
|
||||
>
|
||||
{{ formatAmount(c.account.balance_amount) }} €
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="c.account" class="mt-2 flex items-baseline gap-2">
|
||||
<span class="uppercase tracking-wide text-[11px] text-gray-400"
|
||||
>Odprto</span
|
||||
>
|
||||
<span
|
||||
class="text-lg font-semibold text-gray-900 leading-none tracking-tight"
|
||||
>{{ formatAmount(c.account.balance_amount) }} €</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1.5 w-32 text-right shrink-0">
|
||||
<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="openDrawerAddActivity(c)"
|
||||
>
|
||||
+ Aktivnost
|
||||
</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 class="flex flex-col gap-2 shrink-0">
|
||||
<Button size="sm" @click="openDrawerAddActivity(c)">
|
||||
<Plus class="w-4 h-4 mr-1" />
|
||||
Aktivnost
|
||||
</Button>
|
||||
<Button size="sm" variant="secondary" @click="openDocDialog(c)">
|
||||
<Upload class="w-4 h-4 mr-1" />
|
||||
Dokument
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Subject / Last Object -->
|
||||
<div v-if="c.last_object" class="mt-3 border-t pt-3">
|
||||
<p class="text-[11px] uppercase tracking-wide text-gray-400 mb-1">
|
||||
Zadnji predmet
|
||||
</p>
|
||||
<div class="text-sm font-medium text-gray-800">
|
||||
</CardHeader>
|
||||
<CardContent v-if="c.last_object" class="pt-0">
|
||||
<Separator class="mb-3" />
|
||||
<div class="space-y-1">
|
||||
<p class="text-xs text-gray-500 uppercase">Zadnji predmet</p>
|
||||
<div 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-2 text-xs font-normal text-gray-500"
|
||||
>({{ c.last_object.type }})</span
|
||||
>
|
||||
({{ c.last_object.type }})
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
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 }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p v-if="!contracts?.length" class="text-sm text-gray-600">
|
||||
</CardContent>
|
||||
</Card>
|
||||
<p
|
||||
v-if="!contracts?.length"
|
||||
class="text-sm text-gray-600 dark:text-gray-400 text-center py-4"
|
||||
>
|
||||
Ni pogodbenih obveznosti dodeljenih vam za ta primer.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Activities -->
|
||||
<div class="mt-4 sm:mt-6 bg-white rounded-lg shadow border overflow-hidden">
|
||||
<div class="p-3 sm:p-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div class="flex items-center justify-between">
|
||||
<SectionTitle>
|
||||
<template #title>Aktivnosti</template>
|
||||
</SectionTitle>
|
||||
<button
|
||||
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"
|
||||
@click="openDrawerAddActivity()"
|
||||
>
|
||||
<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" />
|
||||
Nova
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
<div class="mt-3 space-y-3">
|
||||
<div
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-3">
|
||||
<Card
|
||||
v-for="a in activities"
|
||||
:key="a.id"
|
||||
class="rounded-md border border-gray-200 bg-gray-50/70 px-3 py-3 shadow-sm text-[13px]"
|
||||
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="font-medium text-gray-800 leading-snug truncate">
|
||||
<CardTitle class="text-sm font-medium truncate">
|
||||
{{ activityActionLine(a) || "Aktivnost" }}
|
||||
</CardTitle>
|
||||
<div
|
||||
class="shrink-0 text-right text-xs text-gray-500 dark:text-gray-400"
|
||||
>
|
||||
<div v-if="a.created_at" class="flex items-center gap-1">
|
||||
<Calendar class="w-3 h-3" />
|
||||
{{ formatDateShort(a.created_at) }}
|
||||
</div>
|
||||
<div
|
||||
class="shrink-0 text-right text-[11px] text-gray-500 leading-tight"
|
||||
v-if="(a.user && a.user.name) || a.user_name"
|
||||
class="truncate flex items-center gap-1 mt-1"
|
||||
>
|
||||
<div v-if="a.created_at">{{ formatDateShort(a.created_at) }}</div>
|
||||
<div v-if="(a.user && a.user.name) || a.user_name" class="truncate">
|
||||
<User class="w-3 h-3" />
|
||||
{{ a.user?.name || a.user_name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Badges row -->
|
||||
<div class="mt-2 flex flex-wrap gap-1.5">
|
||||
<span
|
||||
v-if="a.contract"
|
||||
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 }}</span
|
||||
>
|
||||
<span
|
||||
</CardHeader>
|
||||
<CardContent class="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" />
|
||||
Pogodba: {{ a.contract.reference }}
|
||||
</Badge>
|
||||
<Badge
|
||||
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"
|
||||
>Zapadlost: {{ formatDateShort(a.due_date) || a.due_date }}</span
|
||||
variant="secondary"
|
||||
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"
|
||||
class="inline-flex items-center rounded-full bg-emerald-100 text-emerald-700 px-2 py-0.5 text-[10px] font-medium"
|
||||
>Znesek: {{ formatAmount(a.amount) }} €</span
|
||||
>
|
||||
<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
|
||||
variant="secondary"
|
||||
class="bg-emerald-100 text-emerald-700 hover:bg-emerald-100 text-[10px]"
|
||||
>
|
||||
<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>
|
||||
|
||||
<!-- Note -->
|
||||
<div v-if="a.note" class="mt-2 text-gray-700 leading-snug">
|
||||
<p v-if="a.note" class="text-sm text-gray-700 dark:text-gray-300">
|
||||
{{ a.note }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<p
|
||||
v-if="!activities?.length"
|
||||
class="text-gray-600 text-sm py-2 text-center"
|
||||
class="text-sm text-gray-600 dark:text-gray-400 text-center py-4"
|
||||
>
|
||||
Ni aktivnosti.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Documents (case + assigned contracts) -->
|
||||
<div class="mt-4 sm:mt-6 bg-white rounded-lg shadow border overflow-hidden">
|
||||
<div class="p-3 sm:p-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div class="flex items-center justify-between">
|
||||
<SectionTitle>
|
||||
<template #title>Dokumenti</template>
|
||||
</SectionTitle>
|
||||
<button
|
||||
class="text-sm px-3 py-2 rounded bg-indigo-600 text-white hover:bg-indigo-700"
|
||||
@click="openDocDialog()"
|
||||
>
|
||||
<CardTitle class="flex items-center gap-2">
|
||||
<FileText class="w-5 h-5" />
|
||||
Dokumenti
|
||||
</CardTitle>
|
||||
<Button size="sm" variant="secondary" @click="openDocDialog()">
|
||||
<Upload class="w-4 h-4 mr-1" />
|
||||
Dodaj
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div class="mt-3 divide-y">
|
||||
<div v-for="d in documents" :key="d.uuid || d.id" class="py-3">
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<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="min-w-0">
|
||||
<div class="font-medium text-gray-900 truncate">
|
||||
<div class="min-w-0 flex-1">
|
||||
<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 }}
|
||||
</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
|
||||
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"
|
||||
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 }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="shrink-0 flex flex-col items-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class="text-xs px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 text-gray-800"
|
||||
@click="openViewer(d)"
|
||||
>
|
||||
Ogled
|
||||
</button>
|
||||
<a
|
||||
class="text-xs px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 text-gray-800"
|
||||
<div class="shrink-0 flex gap-2">
|
||||
<Button size="sm" variant="ghost" @click="openViewer(d)">
|
||||
<Eye class="w-4 h-4" />
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
as="a"
|
||||
:href="
|
||||
(() => {
|
||||
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 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.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -573,177 +624,74 @@ const clientSummary = computed(() => {
|
|||
:contracts="contracts"
|
||||
/>
|
||||
|
||||
<ConfirmationModal :show="confirmComplete" @close="confirmComplete = false">
|
||||
<template #title>Potrditev</template>
|
||||
<template #content> Ali ste prepričani da želite že zaključit stranko? </template>
|
||||
<template #footer>
|
||||
<button
|
||||
type="button"
|
||||
class="px-3 py-2 rounded bg-gray-100 hover:bg-gray-200"
|
||||
@click="confirmComplete = false"
|
||||
>
|
||||
<!-- Complete Case Confirmation -->
|
||||
<AlertDialog :open="confirmComplete" @update:open="confirmComplete = $event">
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Potrditev</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
Ali ste prepričani da želite že zaključit stranko?
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel @click="confirmComplete = false">
|
||||
Prekliči
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="px-3 py-2 rounded bg-green-600 text-white hover:bg-green-700 ml-2"
|
||||
</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
@click="submitComplete"
|
||||
class="bg-green-600 hover:bg-green-700"
|
||||
>
|
||||
Potrdi
|
||||
</button>
|
||||
</template>
|
||||
</ConfirmationModal>
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
|
||||
<!-- 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">
|
||||
{{ o.name || o.reference || "#" + (o.id || o.uuid || idx + 1) }}
|
||||
</div>
|
||||
<div class="mt-0.5 text-xs text-gray-500 flex flex-wrap gap-x-2 gap-y-0.5">
|
||||
<span
|
||||
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 -->
|
||||
<DialogModal :show="docDialogOpen" @close="closeDocDialog">
|
||||
<template #title>Dodaj dokument</template>
|
||||
<template #content>
|
||||
<div class="space-y-4">
|
||||
<div v-if="selectedContract" class="text-sm text-gray-700">
|
||||
<!-- Upload Document Dialog -->
|
||||
<Dialog :open="docDialogOpen" @update:open="docDialogOpen = $event">
|
||||
<DialogContent class="max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Dodaj dokument</DialogTitle>
|
||||
<DialogDescription v-if="selectedContract">
|
||||
Dokument bo dodan k pogodbi:
|
||||
<span class="font-medium">{{
|
||||
selectedContract.reference || selectedContract.uuid
|
||||
}}</span>
|
||||
</div>
|
||||
<strong>{{ selectedContract.reference || selectedContract.uuid }}</strong>
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<InputLabel for="docFile" value="Datoteka" />
|
||||
<input
|
||||
id="docFile"
|
||||
type="file"
|
||||
class="mt-1 block w-full"
|
||||
@change="onPickDocument"
|
||||
/>
|
||||
<div v-if="docForm.errors.file" class="text-sm text-red-600 mt-1">
|
||||
<Label for="docFile">Datoteka</Label>
|
||||
<Input id="docFile" type="file" class="mt-1" @change="onPickDocument" />
|
||||
<p v-if="docForm.errors.file" class="text-sm text-red-600 mt-1">
|
||||
{{ docForm.errors.file }}
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<InputLabel for="docName" value="Ime" />
|
||||
<TextInput id="docName" v-model="docForm.name" class="mt-1 block w-full" />
|
||||
<div v-if="docForm.errors.name" class="text-sm text-red-600 mt-1">
|
||||
<Label for="docName">Ime</Label>
|
||||
<Input id="docName" v-model="docForm.name" class="mt-1" />
|
||||
<p v-if="docForm.errors.name" class="text-sm text-red-600 mt-1">
|
||||
{{ docForm.errors.name }}
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<InputLabel for="docDesc" value="Opis" />
|
||||
<TextInput
|
||||
id="docDesc"
|
||||
v-model="docForm.description"
|
||||
class="mt-1 block w-full"
|
||||
/>
|
||||
<div v-if="docForm.errors.description" class="text-sm text-red-600 mt-1">
|
||||
<Label for="docDesc">Opis</Label>
|
||||
<Input id="docDesc" v-model="docForm.description" class="mt-1" />
|
||||
<p v-if="docForm.errors.description" class="text-sm text-red-600 mt-1">
|
||||
{{ docForm.errors.description }}
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<input id="docPublic" type="checkbox" v-model="docForm.is_public" />
|
||||
<InputLabel for="docPublic" value="Javno" />
|
||||
<Checkbox id="docPublic" :model-value="docForm.is_public" />
|
||||
<Label for="docPublic">Javno</Label>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div class="flex justify-end gap-2">
|
||||
<button
|
||||
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"
|
||||
>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" @click="closeDocDialog"> Prekliči </Button>
|
||||
<Button :disabled="docForm.processing || !docForm.file" @click="submitDocument">
|
||||
<Upload class="w-4 h-4 mr-2" />
|
||||
Naloži
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</DialogModal>
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</AppPhoneLayout>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -1,67 +1,94 @@
|
|||
<script setup>
|
||||
import AppPhoneLayout from "@/Layouts/AppPhoneLayout.vue";
|
||||
import { Separator } from "reka-ui";
|
||||
import { computed, ref } from "vue";
|
||||
import { Badge } from "@/Components/ui/badge";
|
||||
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({
|
||||
jobs: { type: Array, default: () => [] },
|
||||
view_mode: { type: String, default: "assigned" }, // 'assigned' | 'completed-today'
|
||||
jobs: { type: Object, required: true },
|
||||
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 clientFilter = ref("");
|
||||
const listNonActivity = ref([]);
|
||||
const listActivity = ref([]);
|
||||
|
||||
const clientOptions = computed(() => {
|
||||
const map = new Map();
|
||||
for (const job of items.value) {
|
||||
const client = job?.contract?.client_case?.client;
|
||||
const uuid = client?.uuid;
|
||||
const name = client?.person?.full_name;
|
||||
if (uuid && name && !map.has(uuid)) {
|
||||
map.set(uuid, { uuid, name });
|
||||
}
|
||||
}
|
||||
return Array.from(map.values()).sort((a, b) => a.name.localeCompare(b.name));
|
||||
});
|
||||
|
||||
// Search filter (contract reference or person full name)
|
||||
const search = ref("");
|
||||
const filteredJobs = computed(() => {
|
||||
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)
|
||||
const listNonActivity = computed(() =>
|
||||
(props.jobs.data || []).filter((item) => !item.added_activity)
|
||||
);
|
||||
|
||||
const listActivity = computed(() =>
|
||||
(props.jobs.data || []).filter((item) => !!item.added_activity)
|
||||
);
|
||||
|
||||
const debouncedSearch = useDebounceFn((value) => {
|
||||
performSearch();
|
||||
}, 500);
|
||||
|
||||
watch(search, (newValue) => {
|
||||
debouncedSearch(newValue);
|
||||
});
|
||||
listNonActivity.value = filterList.filter((item) => !item.added_activity);
|
||||
listActivity.value = filterList.filter((item) => !!item.added_activity);
|
||||
return filterList;
|
||||
|
||||
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;
|
||||
},
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function clearSearch() {
|
||||
search.value = "";
|
||||
clientFilter.value = "";
|
||||
}
|
||||
|
||||
function formatDateDMY(d) {
|
||||
if (!d) return "-";
|
||||
// Handle date-only strings from Laravel JSON casts (YYYY-MM-DD...)
|
||||
if (/^\d{4}-\d{2}-\d{2}/.test(d)) {
|
||||
const [y, m, rest] = d.split("-");
|
||||
const day = (rest || "").slice(0, 2) || "01";
|
||||
|
|
@ -85,227 +112,473 @@ function formatAmount(val) {
|
|||
});
|
||||
}
|
||||
|
||||
// Safely resolve a client case UUID for a job
|
||||
function getCaseUuid(job) {
|
||||
return (
|
||||
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>
|
||||
|
||||
<template>
|
||||
<AppPhoneLayout title="Phone">
|
||||
<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"
|
||||
? "Zaključena opravila danes"
|
||||
: "Moja terenska opravila"
|
||||
props.view_mode === "completed-today" ? "Zaključeno danes" : "Terenska opravila"
|
||||
}}
|
||||
</h2>
|
||||
</template>
|
||||
|
||||
<div class="py-4 sm:py-8">
|
||||
<div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
|
||||
<div class="mb-4 flex items-center gap-2 flex-wrap">
|
||||
<select
|
||||
v-model="clientFilter"
|
||||
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"
|
||||
>
|
||||
<option value="">Vsi naročniki</option>
|
||||
<option v-for="c in clientOptions" :key="c.uuid" :value="c.uuid">
|
||||
{{ c.name }}
|
||||
</option>
|
||||
</select>
|
||||
<input
|
||||
<div class="py-6 sm:py-8">
|
||||
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 space-y-4">
|
||||
<!-- Filters Section -->
|
||||
<Card>
|
||||
<CardHeader class="flex flex-row gap-1 items-center">
|
||||
<FilterIcon size="20" />
|
||||
<CardTitle class="text-xl">Filter</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div class="flex flex-col sm:flex-row gap-4">
|
||||
<div class="flex-1">
|
||||
<Input
|
||||
v-model="search"
|
||||
type="text"
|
||||
placeholder="Išči po referenci ali imenu..."
|
||||
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"
|
||||
class="w-full"
|
||||
/>
|
||||
<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"
|
||||
</div>
|
||||
|
||||
<Select v-model="clientFilter">
|
||||
<SelectTrigger class="w-full sm:w-64">
|
||||
<SelectValue placeholder="Vsi naročniki" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem
|
||||
v-for="client in props.clients"
|
||||
:key="client.uuid"
|
||||
:value="client.uuid"
|
||||
>
|
||||
{{ client.name }}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Button
|
||||
v-if="search || clientFilter"
|
||||
variant="outline"
|
||||
@click="clearSearch"
|
||||
>
|
||||
Počisti
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Loading Skeleton -->
|
||||
<div v-if="isLoading" class="space-y-6">
|
||||
<div class="space-y-3">
|
||||
<Skeleton class="h-8 w-48" />
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
<Skeleton v-for="i in 6" :key="i" class="h-72" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-if="filteredJobs.length">
|
||||
<h2 class="py-4">Nove / Ne obdelane</h2>
|
||||
<div class="grid grid-cols-1 gap-3 sm:gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
<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="bg-white rounded-lg shadow border p-3 sm:p-4"
|
||||
class="flex flex-col hover:shadow-xl transition-all duration-200 border-l-2 border-l-blue-500"
|
||||
>
|
||||
<div class="mb-4 flex gap-2">
|
||||
<a
|
||||
<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="inline-flex-1 flex-1 text-center px-3 py-2 rounded-md bg-blue-600 text-white text-sm hover:bg-blue-700"
|
||||
class="w-full font-semibold"
|
||||
size="lg"
|
||||
>
|
||||
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"
|
||||
>
|
||||
</Button>
|
||||
<Button v-else disabled class="w-full" variant="secondary" size="lg">
|
||||
Manjka primer
|
||||
</button>
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</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
|
||||
>
|
||||
</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="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>
|
||||
<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
|
||||
|
||||
<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="bg-white rounded-lg shadow border p-3 sm:p-4"
|
||||
class="flex flex-col hover:shadow-xl transition-all duration-200 border-l-2 border-l-green-500"
|
||||
>
|
||||
<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"
|
||||
<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"
|
||||
>
|
||||
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 || "—" }}
|
||||
</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>
|
||||
<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
|
||||
"
|
||||
</div>
|
||||
<Badge
|
||||
v-if="job.priority"
|
||||
variant="destructive"
|
||||
class="shrink-0 animate-pulse"
|
||||
>
|
||||
Odprto: {{ formatAmount(job.contract.account.balance_amount) }} €
|
||||
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 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>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
<div
|
||||
v-else
|
||||
class="col-span-full bg-white rounded-lg shadow border p-6 text-center text-gray-600"
|
||||
|
||||
<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"
|
||||
>
|
||||
<span v-if="search">Ni zadetkov za podani filter.</span>
|
||||
<span v-else>Trenutno nimate dodeljenih terenskih opravil.</span>
|
||||
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>
|
||||
</AppPhoneLayout>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user