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

Changes to dev branch

Browse Source
This commit is contained in:
Simon Pocrnjič
2025-12-07 09:20:04 +01:00
parent f5530edcea
commit 70dc0b893f
9 changed files with 335 additions and 319 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/Components/Dialogs/CreateDialog.vue
+33 -34
View File
@@ -6,40 +6,43 @@ import {
DialogFooter,
DialogHeader,
DialogTitle,
} from '@/Components/ui/dialog';
import { Button } from '@/Components/ui/button';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { faPlusCircle } from '@fortawesome/free-solid-svg-icons';
import { computed, ref, watch, nextTick } from 'vue';
} from "@/Components/ui/dialog";
import { Button } from "@/Components/ui/button";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { faPlusCircle } from "@fortawesome/free-solid-svg-icons";
import { computed, ref, watch, nextTick } from "vue";
const props = defineProps({
show: { type: Boolean, default: false },
title: { type: String, default: 'Ustvari novo' },
maxWidth: { type: String, default: '2xl' },
confirmText: { type: String, default: 'Ustvari' },
cancelText: { type: String, default: 'Prekliči' },
title: { type: String, default: "Ustvari novo" },
maxWidth: { type: String, default: "2xl" },
confirmText: { type: String, default: "Ustvari" },
cancelText: { type: String, default: "Prekliči" },
processing: { type: Boolean, default: false },
disabled: { type: Boolean, default: false },
});
const emit = defineEmits(['update:show', 'close', 'confirm']);
const emit = defineEmits(["update:show", "close", "confirm"]);
const open = ref(props.show);
watch(() => props.show, (newVal) => {
open.value = newVal;
if (newVal) {
// Emit custom event when dialog opens
nextTick(() => {
window.dispatchEvent(new CustomEvent('dialog:open'));
});
watch(
() => props.show,
(newVal) => {
open.value = newVal;
if (newVal) {
// Emit custom event when dialog opens
nextTick(() => {
window.dispatchEvent(new CustomEvent("dialog:open"));
});
}
}
});
);
watch(open, (newVal) => {
emit('update:show', newVal);
emit("update:show", newVal);
if (!newVal) {
emit('close');
emit("close");
}
});
@@ -48,19 +51,19 @@ const onClose = () => {
};
const onConfirm = () => {
emit('confirm');
emit("confirm");
};
const maxWidthClass = computed(() => {
const maxWidthMap = {
sm: 'sm:max-w-sm',
md: 'sm:max-w-md',
lg: 'sm:max-w-lg',
xl: 'sm:max-w-xl',
'2xl': 'sm:max-w-2xl',
wide: 'sm:max-w-[1200px]',
sm: "sm:max-w-sm",
md: "sm:max-w-md",
lg: "sm:max-w-lg",
xl: "sm:max-w-xl",
"2xl": "sm:max-w-2xl",
wide: "sm:max-w-[1200px]",
};
return maxWidthMap[props.maxWidth] || 'sm:max-w-2xl';
return maxWidthMap[props.maxWidth] || "sm:max-w-2xl";
});
</script>
@@ -70,7 +73,7 @@ const maxWidthClass = computed(() => {
<DialogHeader>
<DialogTitle>
<div class="flex items-center gap-2">
<FontAwesomeIcon :icon="faPlusCircle" class="h-5 w-5 text-primary-600" />
<FontAwesomeIcon :icon="faPlusCircle" class="h-5 w-5 text-primary" />
<span>{{ title }}</span>
</div>
</DialogTitle>
@@ -87,14 +90,10 @@ const maxWidthClass = computed(() => {
<Button variant="outline" @click="onClose" :disabled="processing">
{{ cancelText }}
</Button>
<Button
@click="onConfirm"
:disabled="processing || disabled"
>
<Button @click="onConfirm" :disabled="processing || disabled">
{{ confirmText }}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</template>
resources/js/Components/Dialogs/UpdateDialog.vue
+33 -34
View File
@@ -6,40 +6,43 @@ import {
DialogFooter,
DialogHeader,
DialogTitle,
} from '@/Components/ui/dialog';
import { Button } from '@/Components/ui/button';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { faPenToSquare } from '@fortawesome/free-solid-svg-icons';
import { computed, ref, watch, nextTick } from 'vue';
} from "@/Components/ui/dialog";
import { Button } from "@/Components/ui/button";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { faPenToSquare } from "@fortawesome/free-solid-svg-icons";
import { computed, ref, watch, nextTick } from "vue";
const props = defineProps({
show: { type: Boolean, default: false },
title: { type: String, default: 'Uredi' },
maxWidth: { type: String, default: '2xl' },
confirmText: { type: String, default: 'Shrani' },
cancelText: { type: String, default: 'Prekliči' },
title: { type: String, default: "Uredi" },
maxWidth: { type: String, default: "2xl" },
confirmText: { type: String, default: "Shrani" },
cancelText: { type: String, default: "Prekliči" },
processing: { type: Boolean, default: false },
disabled: { type: Boolean, default: false },
});
const emit = defineEmits(['update:show', 'close', 'confirm']);
const emit = defineEmits(["update:show", "close", "confirm"]);
const open = ref(props.show);
watch(() => props.show, (newVal) => {
open.value = newVal;
if (newVal) {
// Emit custom event when dialog opens
nextTick(() => {
window.dispatchEvent(new CustomEvent('dialog:open'));
});
watch(
() => props.show,
(newVal) => {
open.value = newVal;
if (newVal) {
// Emit custom event when dialog opens
nextTick(() => {
window.dispatchEvent(new CustomEvent("dialog:open"));
});
}
}
});
);
watch(open, (newVal) => {
emit('update:show', newVal);
emit("update:show", newVal);
if (!newVal) {
emit('close');
emit("close");
}
});
@@ -48,19 +51,19 @@ const onClose = () => {
};
const onConfirm = () => {
emit('confirm');
emit("confirm");
};
const maxWidthClass = computed(() => {
const maxWidthMap = {
sm: 'sm:max-w-sm',
md: 'sm:max-w-md',
lg: 'sm:max-w-lg',
xl: 'sm:max-w-xl',
'2xl': 'sm:max-w-2xl',
wide: 'sm:max-w-[1200px]',
sm: "sm:max-w-sm",
md: "sm:max-w-md",
lg: "sm:max-w-lg",
xl: "sm:max-w-xl",
"2xl": "sm:max-w-2xl",
wide: "sm:max-w-[1200px]",
};
return maxWidthMap[props.maxWidth] || 'sm:max-w-2xl';
return maxWidthMap[props.maxWidth] || "sm:max-w-2xl";
});
</script>
@@ -70,7 +73,7 @@ const maxWidthClass = computed(() => {
<DialogHeader>
<DialogTitle>
<div class="flex items-center gap-2">
<FontAwesomeIcon :icon="faPenToSquare" class="h-5 w-5 text-primary-600" />
<FontAwesomeIcon :icon="faPenToSquare" class="h-5 w-5 text-primary" />
<span>{{ title }}</span>
</div>
</DialogTitle>
@@ -87,14 +90,10 @@ const maxWidthClass = computed(() => {
<Button variant="outline" @click="onClose" :disabled="processing">
{{ cancelText }}
</Button>
<Button
@click="onConfirm"
:disabled="processing || disabled"
>
<Button @click="onConfirm" :disabled="processing || disabled">
{{ confirmText }}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</template>
resources/js/Pages/Cases/Index.vue
+99 -91
View File
@@ -7,6 +7,9 @@ import DataTable from "@/Components/DataTable/DataTableNew2.vue";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { faFolderOpen } from "@fortawesome/free-solid-svg-icons";
import Pagination from "@/Components/Pagination.vue";
import AppCard from "@/Components/app/ui/card/AppCard.vue";
import { FolderOpenIcon } from "lucide-vue-next";
import CardTitle from "@/Components/ui/card/CardTitle.vue";
const props = defineProps({
client_cases: Object,
@@ -41,101 +44,106 @@ const fmtDateDMY = (v) => {
<template>
<AppLayout title="Client cases">
<template #header> </template>
<div class="py-12">
<div class="py-6">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
<div class="mx-auto max-w-4x1 py-3">
<div class="pb-3 px-3">
<SectionTitle>
<template #title>Primeri</template>
</SectionTitle>
</div>
<DataTable
:columns="[
{ key: 'nu', label: 'Št.', sortable: false },
{ key: 'case', label: 'Primer', sortable: false },
{ key: 'client', label: 'Stranka', sortable: false },
{ key: 'tax', label: 'Davčna', sortable: false },
{ key: 'created_at', label: 'Ustvarjeno', sortable: false },
{
key: 'active_contracts',
label: 'Aktivne pogodbe',
sortable: false,
align: 'right',
},
{
key: 'balance',
label: 'Skupaj stanje',
sortable: false,
align: 'right',
},
]"
:data="client_cases.data || []"
:page-size="client_cases.per_page"
:show-pagination="false"
:show-toolbar="true"
:hoverable="true"
row-key="uuid"
empty-text="Ni najdenih primerov."
>
<template #cell-nu="{ row }">
{{ row.person?.nu || "-" }}
</template>
<template #cell-case="{ row }">
<Link
:href="route('clientCase.show', { client_case: row.uuid })"
class="text-indigo-600 hover:underline"
>
{{ row.person?.full_name || "-" }}
</Link>
<button
v-if="!row.person"
@click.prevent="
router.post(
route('clientCase.emergencyPerson', { client_case: row.uuid })
)
"
class="ml-2 inline-flex items-center rounded bg-red-50 px-2 py-0.5 text-xs font-semibold text-red-600 hover:bg-red-100 border border-red-200"
title="Emergency: recreate missing person"
>
Add Person
</button>
</template>
<template #cell-client="{ row }">
{{ row.client?.person?.full_name || "-" }}
</template>
<template #cell-tax="{ row }">
{{ row.person?.tax_number || "-" }}
</template>
<template #cell-created_at="{ row }">
{{ fmtDateDMY(row.created_at) }}
</template>
<template #cell-active_contracts="{ row }">
<div class="text-right">{{ row.active_contracts_count ?? 0 }}</div>
</template>
<template #cell-balance="{ row }">
<div class="text-right">
{{ fmtCurrency(row.active_contracts_balance_sum) }}
</div>
</template>
</DataTable>
<div class="border-t border-gray-200 p-4">
<Pagination
:links="client_cases.links"
:from="client_cases.from"
:to="client_cases.to"
:total="client_cases.total"
:per-page="client_cases.per_page || 20"
:last-page="client_cases.last_page"
:current-page="client_cases.current_page"
per-page-param="perPage"
page-param="clientCasesPage"
/>
<AppCard
title=""
padding="none"
class="p-0! gap-0"
header-class="py-3! px-4 gap-0 text-muted-foreground"
body-class=""
>
<template #header>
<div class="flex items-center gap-2">
<FolderOpenIcon size="18" />
<CardTitle class="uppercase">Primeri</CardTitle>
</div>
</template>
<DataTable
:columns="[
{ key: 'nu', label: 'Št.', sortable: false },
{ key: 'case', label: 'Primer', sortable: false },
{ key: 'client', label: 'Stranka', sortable: false },
{ key: 'tax', label: 'Davčna', sortable: false },
{ key: 'created_at', label: 'Ustvarjeno', sortable: false },
{
key: 'active_contracts',
label: 'Aktivne pogodbe',
sortable: false,
align: 'right',
},
{
key: 'balance',
label: 'Skupaj stanje',
sortable: false,
align: 'right',
},
]"
:data="client_cases.data || []"
:page-size="client_cases.per_page"
:show-pagination="false"
:show-toolbar="true"
:hoverable="true"
row-key="uuid"
empty-text="Ni najdenih primerov."
>
<template #cell-nu="{ row }">
{{ row.person?.nu || "-" }}
</template>
<template #cell-case="{ row }">
<Link
:href="route('clientCase.show', { client_case: row.uuid })"
class="text-indigo-600 hover:underline"
>
{{ row.person?.full_name || "-" }}
</Link>
<button
v-if="!row.person"
@click.prevent="
router.post(
route('clientCase.emergencyPerson', { client_case: row.uuid })
)
"
class="ml-2 inline-flex items-center rounded bg-red-50 px-2 py-0.5 text-xs font-semibold text-red-600 hover:bg-red-100 border border-red-200"
title="Emergency: recreate missing person"
>
Add Person
</button>
</template>
<template #cell-client="{ row }">
{{ row.client?.person?.full_name || "-" }}
</template>
<template #cell-tax="{ row }">
{{ row.person?.tax_number || "-" }}
</template>
<template #cell-created_at="{ row }">
{{ fmtDateDMY(row.created_at) }}
</template>
<template #cell-active_contracts="{ row }">
<div class="text-right">{{ row.active_contracts_count ?? 0 }}</div>
</template>
<template #cell-balance="{ row }">
<div class="text-right">
{{ fmtCurrency(row.active_contracts_balance_sum) }}
</div>
</template>
</DataTable>
<div class="border-t border-gray-200 p-4">
<Pagination
:links="client_cases.links"
:from="client_cases.from"
:to="client_cases.to"
:total="client_cases.total"
:per-page="client_cases.per_page || 20"
:last-page="client_cases.last_page"
:current-page="client_cases.current_page"
per-page-param="perPage"
page-param="clientCasesPage"
/>
</div>
<!-- Pagination handled by DataTableServer -->
</div>
</AppCard>
</div>
<!-- Pagination handled by DataTableServer -->
</div>
</AppLayout>
</template>
resources/js/Pages/Client/Index.vue
+82 -73
View File
@@ -28,8 +28,9 @@ import { useForm } from "vee-validate";
import { toTypedSchema } from "@vee-validate/zod";
import * as z from "zod";
import ActionMessage from "@/Components/ActionMessage.vue";
import { Mail, Plug2Icon, Plus } from "lucide-vue-next";
import { Mail, Plug2Icon, Plus, UsersRoundIcon } from "lucide-vue-next";
import { Separator } from "@/Components/ui/separator";
import AppCard from "@/Components/app/ui/card/AppCard.vue";
const props = defineProps({
clients: Object,
@@ -161,83 +162,91 @@ const fmtCurrency = (v) => {
</script>
<template>
<AppLayout title="Client">
<AppLayout>
<template #header> </template>
<div class="py-6">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<Card class="p-0">
<CardHeader>
<CardTitle>Naročniki</CardTitle>
</CardHeader>
<CardContent class="p-0">
<DataTable
:columns="[
{ key: 'nu', label: 'Št.', sortable: false },
{ key: 'name', label: 'Naročnik', sortable: false },
{
key: 'cases',
label: 'Primeri z aktivnimi pogodbami',
sortable: false,
align: 'right',
},
{
key: 'balance',
label: 'Skupaj stanje',
sortable: false,
align: 'right',
},
]"
:data="clients.data || []"
:show-pagination="false"
:show-toolbar="true"
:hoverable="true"
row-key="uuid"
:striped="true"
empty-text="Ni najdenih naročnikov."
>
<template #toolbar-actions>
<AppCard
title=""
padding="none"
class="p-0! gap-0"
header-class="py-3! px-4 gap-0 text-muted-foreground"
body-class=""
>
<template #header>
<div class="flex items-center gap-2">
<UsersRoundIcon size="18" />
<CardTitle class="uppercase">Naročniki</CardTitle>
</div>
</template>
<DataTable
:columns="[
{ key: 'nu', label: 'Št.', sortable: false },
{ key: 'name', label: 'Naročnik', sortable: false },
{
key: 'cases',
label: 'Primeri z aktivnimi pogodbami',
sortable: false,
align: 'right',
},
{
key: 'balance',
label: 'Skupaj stanje',
sortable: false,
align: 'right',
},
]"
:data="clients.data || []"
:show-pagination="false"
:show-toolbar="true"
:hoverable="true"
row-key="uuid"
:striped="true"
empty-text="Ni najdenih naročnikov."
>
<template #toolbar-actions>
<Button
variant="outline"
v-if="hasPerm('client-edit')"
@click="openDrawerCreateClient"
>
<Plus class="w-4 h-4" /> Novi naročnik
</Button>
</template>
<template #cell-nu="{ row }">
{{ row.person?.nu || "-" }}
</template>
<template #cell-name="{ row }">
<Link
:href="route('client.show', { uuid: row.uuid })"
class="font-semibold hover:underline text-primary-700"
>
{{ row.person?.full_name || "-" }}
</Link>
<div v-if="!row.person" class="mt-1">
<Button
variant="outline"
v-if="hasPerm('client-edit')"
@click="openDrawerCreateClient"
variant="destructive"
size="sm"
@click.prevent="
router.post(route('client.emergencyPerson', { uuid: row.uuid }))
"
>Add Person</Button
>
<Plus class="w-4 h-4" /> Novi naročnik
</Button>
</template>
<template #cell-nu="{ row }">
{{ row.person?.nu || "-" }}
</template>
<template #cell-name="{ row }">
<Link
:href="route('client.show', { uuid: row.uuid })"
class="font-semibold hover:underline text-primary-700"
>
{{ row.person?.full_name || "-" }}
</Link>
<div v-if="!row.person" class="mt-1">
<Button
variant="destructive"
size="sm"
@click.prevent="
router.post(route('client.emergencyPerson', { uuid: row.uuid }))
"
>Add Person</Button
>
</div>
</template>
<template #cell-cases="{ row }">
<div class="text-right">
{{ row.cases_with_active_contracts_count ?? 0 }}
</div>
</template>
<template #cell-balance="{ row }">
<div class="text-right">
{{ fmtCurrency(row.active_contracts_balance_sum) }}
</div>
</template>
</DataTable>
</CardContent>
</Card>
</div>
</template>
<template #cell-cases="{ row }">
<div class="text-right">
{{ row.cases_with_active_contracts_count ?? 0 }}
</div>
</template>
<template #cell-balance="{ row }">
<div class="text-right">
{{ fmtCurrency(row.active_contracts_balance_sum) }}
</div>
</template>
</DataTable>
</AppCard>
</div>
</div>
</AppLayout>
resources/js/Pages/Client/Show.vue
+3 -2
View File
@@ -14,6 +14,7 @@ import { Card } from "@/Components/ui/card";
import Badge from "@/Components/ui/badge/Badge.vue";
import { cn } from "@/lib/utils";
import { Input } from "@/Components/ui/input";
import { UsersRoundIcon } from "lucide-vue-next";
const props = defineProps({
client: Object,
@@ -60,7 +61,7 @@ function applySearch() {
<template>
<AppLayout title="Client">
<template #header></template>
<template #header> </template>
<div class="pt-6">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<Card class="border-l-4 border-blue-400 p-0!">
@@ -93,7 +94,7 @@ function applySearch() {
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
<div class="mx-auto max-w-4x1">
<div class="px-3 py-4 flex flex-row items-center gap-3">
<div class="p-2 flex flex-row items-center gap-2">
<Link
:class="
cn(
resources/js/Pages/Dashboard/Index.vue
+4 -4
View File
@@ -55,15 +55,15 @@ const formatBalance = (amount) => {
label="Skupno stanje"
:value="formatBalance(kpis?.total_balance)"
:icon="Banknote"
icon-bg="bg-chart-3/10"
icon-color="text-chart-3"
icon-bg="bg-chart-2/10"
icon-color="text-chart-2"
/>
<SimpleKpiCard
label="Aktivne obljube"
:value="kpis?.active_promises"
:icon="CalendarCheck"
icon-bg="bg-chart-4/10"
icon-color="text-chart-4"
icon-bg="bg-chart-2/10"
icon-color="text-chart-2"
/>
</div>
resources/js/Pages/Dashboard/Partials/SmsOverview.vue
+4 -4
View File
@@ -71,28 +71,28 @@ const props = defineProps({
<!-- Stats grid -->
<ItemDescription>
<div class="grid grid-cols-4 divide-x">
<div class="flex flex-row items-center justify-between p-2">
<div class="flex flex-row items-center justify-between p-3">
<div class="flex flex-col gap-2">
<span class="text-muted-foreground text-xs">Skupaj</span>
<span class="text-xl font-bold">{{ p.today?.total ?? 0 }}</span>
</div>
<MessageSquare class="h-5 w-5 text-gray-500" />
</div>
<div class="flex flex-row items-center justify-between p-2">
<div class="flex flex-row items-center justify-between p-3">
<div class="flex flex-col gap-2">
<span class="text-muted-foreground text-xs">Poslano</span>
<span class="text-xl font-bold">{{ p.today?.sent ?? 0 }}</span>
</div>
<Send class="h-5 w-5 text-sky-600" />
</div>
<div class="flex flex-row items-center justify-between p-2">
<div class="flex flex-row items-center justify-between p-3">
<div class="flex flex-col gap-2">
<span class="text-muted-foreground text-xs">Delivered</span>
<span class="text-xl font-bold">{{ p.today?.delivered ?? 0 }}</span>
</div>
<CheckCircle class="h-5 w-5 text-emerald-600" />
</div>
<div class="flex flex-row items-center justify-between p-2">
<div class="flex flex-row items-center justify-between p-3">
<div class="flex flex-col gap-2">
<span class="text-muted-foreground text-xs">Failed</span>
<span class="text-xl font-bold">{{ p.today?.failed ?? 0 }}</span>