Dashboard final version, TODO: update main sidebar menu
This commit is contained in:
Simon Pocrnjič
@@ -0,0 +1,108 @@
|
||||
<script setup>
|
||||
import { computed, onMounted } from "vue";
|
||||
import { Link } from "@inertiajs/vue3";
|
||||
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
||||
import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/Components/ui/card";
|
||||
import Badge from "@/Components/ui/badge/Badge.vue";
|
||||
import AppCard from "@/Components/app/ui/card/AppCard.vue";
|
||||
import {
|
||||
Item,
|
||||
ItemActions,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/Components/ui/item";
|
||||
import { BadgeCheckIcon, ChevronRightIcon, Radar, Radio, RssIcon } from "lucide-vue-next";
|
||||
import { ScrollArea } from "@/Components/ui/scroll-area";
|
||||
|
||||
const props = defineProps({
|
||||
activities: Array,
|
||||
systemHealth: Object,
|
||||
});
|
||||
|
||||
function buildRelated(a) {
|
||||
const links = [];
|
||||
if (a.client_case_uuid || a.client_case_id) {
|
||||
const caseParam = a.client_case_uuid || a.client_case_id;
|
||||
try {
|
||||
const href = String(route("clientCase.show", { client_case: caseParam }));
|
||||
links.push({
|
||||
type: "client_case",
|
||||
label: "Primer",
|
||||
href,
|
||||
});
|
||||
} catch (e) {
|
||||
links.push({
|
||||
type: "client_case",
|
||||
label: "Primer",
|
||||
href: `/client-cases/${caseParam}`,
|
||||
});
|
||||
}
|
||||
}
|
||||
return links;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
console.log((props.activities || []).map((a) => ({ ...a, links: buildRelated(a) })));
|
||||
});
|
||||
|
||||
const activityItems = computed(() =>
|
||||
(props.activities || []).map((a) => ({ ...a, links: buildRelated(a) }))
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppCard
|
||||
title=""
|
||||
padding="none"
|
||||
class="p-0! gap-2"
|
||||
header-class="py-3! px-4 border-b text-muted-foreground gap-0"
|
||||
body-class="flex flex-col gap-4"
|
||||
>
|
||||
<template #header>
|
||||
<div class="flex items-center gap-2">
|
||||
<Radio size="20" />
|
||||
<CardTitle class="uppercase"> Aktivnost </CardTitle>
|
||||
</div>
|
||||
</template>
|
||||
<ScrollArea class="h-96 w-full">
|
||||
<div class="flex flex-col gap-1 px-1" v-if="activities">
|
||||
<Item v-for="a in activityItems" :key="a.id" variant="outline" size="sm" as-child>
|
||||
<a :href="a.links[0].href ?? ''">
|
||||
<ItemMedia>
|
||||
<span class="w-2 h-2 mt-2 rounded-full bg-primary" />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>{{ a.note || "Dogodek" }}</ItemTitle>
|
||||
<ItemDescription>
|
||||
{{ new Date(a.created_at).toLocaleString() }}
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<ChevronRightIcon class="size-4" />
|
||||
</ItemActions>
|
||||
</a>
|
||||
</Item>
|
||||
<div v-if="!activities?.length" class="py-4 text-xs text-gray-500 text-center">
|
||||
Ni zabeleženih aktivnosti.
|
||||
</div>
|
||||
</div>
|
||||
<ul v-else class="animate-pulse space-y-2">
|
||||
<li v-for="n in 5" :key="n" class="h-5 bg-gray-100 rounded" />
|
||||
</ul>
|
||||
</ScrollArea>
|
||||
|
||||
<div class="flex justify-between items-center text-[11px] p-2">
|
||||
<Link
|
||||
:href="route('dashboard')"
|
||||
class="inline-flex items-center gap-1 font-medium text-primary hover:underline"
|
||||
>Več kmalu <FontAwesomeIcon :icon="faArrowUpRightFromSquare" class="w-3 h-3"
|
||||
/></Link>
|
||||
<span v-if="systemHealth" class="text-gray-400"
|
||||
>Posodobljeno {{ new Date(systemHealth.generated_at).toLocaleTimeString() }}</span
|
||||
>
|
||||
</div>
|
||||
</AppCard>
|
||||
</template>
|
||||
@@ -0,0 +1,173 @@
|
||||
<script setup>
|
||||
import { computed, ref, watch } from "vue";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/Components/ui/card";
|
||||
import { VisAxis, VisGroupedBar, VisXYContainer } from "@unovis/vue";
|
||||
import {
|
||||
ChartAutoLegend,
|
||||
ChartContainer,
|
||||
ChartTooltipContent,
|
||||
ChartCrosshair,
|
||||
provideChartContext,
|
||||
componentToString,
|
||||
} from "@/Components/ui/chart";
|
||||
import AppChartDisplay from "@/Components/app/ui/charts/AppChartDisplay.vue";
|
||||
|
||||
const props = defineProps({
|
||||
trends: Object,
|
||||
});
|
||||
|
||||
const chartData = computed(() => {
|
||||
if (
|
||||
!props.trends?.labels ||
|
||||
!props.trends?.field_jobs_completed ||
|
||||
!props.trends?.field_jobs
|
||||
) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return props.trends.labels.map((label, i) => ({
|
||||
date: new Date(label),
|
||||
dateLabel: label,
|
||||
completed: props.trends.field_jobs_completed[i] || 0,
|
||||
assigned: props.trends.field_jobs[i] || 0,
|
||||
}));
|
||||
});
|
||||
|
||||
const chartConfig = {
|
||||
completed: {
|
||||
label: "Zaključeni",
|
||||
color: "var(--chart-1)",
|
||||
},
|
||||
assigned: {
|
||||
label: "Dodeljeni",
|
||||
color: "var(--chart-2)",
|
||||
},
|
||||
};
|
||||
|
||||
// Provide chart context at component root so legend (outside ChartContainer) can access it
|
||||
provideChartContext(chartConfig);
|
||||
|
||||
// (No gradients needed for bar chart)
|
||||
|
||||
// Active series keys controlled by auto legend
|
||||
const activeKeys = ref(["completed", "assigned"]);
|
||||
const activeSeries = computed(() => activeKeys.value);
|
||||
const yAccessors = computed(() => activeSeries.value.map((key) => (d) => d[key]));
|
||||
|
||||
// Prevent all series from being disabled (Unovis crosshair needs at least one component with x accessor)
|
||||
let _lastNonEmpty = [...activeKeys.value];
|
||||
watch(activeKeys, (val, oldVal) => {
|
||||
if (val.length === 0) {
|
||||
// revert to previous non-empty selection
|
||||
activeKeys.value = _lastNonEmpty.length ? _lastNonEmpty : oldVal;
|
||||
} else {
|
||||
_lastNonEmpty = [...val];
|
||||
}
|
||||
});
|
||||
|
||||
// Crosshair template using componentToString to render advanced tooltip component
|
||||
const crosshairTemplate = componentToString(chartConfig, ChartTooltipContent, {
|
||||
labelKey: "dateLabel",
|
||||
labelFormatter: (x) => crosshairLabelFormatter(x),
|
||||
});
|
||||
|
||||
const totalCompleted = computed(() => {
|
||||
return chartData.value.reduce((sum, item) => sum + item.completed, 0);
|
||||
});
|
||||
|
||||
const totalAssigned = computed(() => {
|
||||
return chartData.value.reduce((sum, item) => sum + item.assigned, 0);
|
||||
});
|
||||
|
||||
// Formatter for tooltip title (date) and potential item labels
|
||||
const crosshairLabelFormatter = (value) => {
|
||||
// Handle Date objects or parsable date strings
|
||||
const date = value instanceof Date ? value : new Date(value);
|
||||
if (isNaN(date)) return value?.toString?.() ?? "";
|
||||
return date.toLocaleDateString("sl-SI", { month: "long", day: "numeric" });
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppChartDisplay name="ChartLine" class="md:col-span-2 lg:col-span-3">
|
||||
<Card class="p-0">
|
||||
<CardHeader class="flex flex-col items-stretch border-b p-0! sm:flex-row">
|
||||
<div class="flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6">
|
||||
<CardTitle>Terenska dela - Pregled</CardTitle>
|
||||
<CardDescription>Zadnjih 7 dni</CardDescription>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div
|
||||
class="relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left sm:border-l sm:border-t-0 sm:px-8 sm:py-6"
|
||||
>
|
||||
<span class="text-xs text-muted-foreground">Zaključeni</span>
|
||||
<span class="text-lg font-bold leading-none sm:text-3xl">
|
||||
{{ totalCompleted.toLocaleString() }}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left sm:border-l sm:border-t-0 sm:px-8 sm:py-6"
|
||||
>
|
||||
<span class="text-xs text-muted-foreground">Dodeljeni</span>
|
||||
<span class="text-lg font-bold leading-none sm:text-3xl">
|
||||
{{ totalAssigned.toLocaleString() }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent class="px-2 sm:px-6 sm:pt-6 pb-4">
|
||||
<div v-if="chartData.length" class="w-full aspect-auto h-[250px]">
|
||||
<ChartContainer :config="chartConfig" class="h-full">
|
||||
<VisXYContainer
|
||||
:data="chartData"
|
||||
:height="250"
|
||||
:margin="{ left: 5, right: 5 }"
|
||||
>
|
||||
<VisGroupedBar
|
||||
:x="(d) => d.date"
|
||||
:y="yAccessors"
|
||||
:color="(d, i) => chartConfig[activeSeries[i]].color"
|
||||
:bar-padding="0.3"
|
||||
/>
|
||||
|
||||
<VisAxis
|
||||
type="x"
|
||||
:tick-line="false"
|
||||
:grid-line="false"
|
||||
:num-ticks="7"
|
||||
:tick-format="
|
||||
(d) => {
|
||||
const date = new Date(d);
|
||||
return date.toLocaleDateString('sl-SI', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
});
|
||||
}
|
||||
"
|
||||
/>
|
||||
<VisAxis type="y" :num-ticks="4" :tick-line="false" :grid-line="true" />
|
||||
<ChartCrosshair
|
||||
:index="'date'"
|
||||
:template="crosshairTemplate"
|
||||
:colors="[chartConfig.completed.color, chartConfig.assigned.color]"
|
||||
/>
|
||||
</VisXYContainer>
|
||||
</ChartContainer>
|
||||
</div>
|
||||
<div v-else class="h-[250px] animate-pulse bg-gray-100 rounded" />
|
||||
</CardContent>
|
||||
<div class="border-t px-6 py-2 flex justify-center">
|
||||
<ChartAutoLegend
|
||||
v-model:activeKeys="activeKeys"
|
||||
:order="['completed', 'assigned']"
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
</AppChartDisplay>
|
||||
</template>
|
||||
@@ -0,0 +1,110 @@
|
||||
<script setup>
|
||||
import { Link } from "@inertiajs/vue3";
|
||||
import { computed } from "vue";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/Components/ui/card";
|
||||
import AppCard from "@/Components/app/ui/card/AppCard.vue";
|
||||
import { ChevronRightIcon, MapIcon, UserRound } from "lucide-vue-next";
|
||||
import { ScrollArea } from "@/Components/ui/scroll-area";
|
||||
import {
|
||||
Item,
|
||||
ItemActions,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/Components/ui/item";
|
||||
import { Badge } from "@/Components/ui/badge";
|
||||
|
||||
const props = defineProps({
|
||||
fieldJobsAssignedToday: Array,
|
||||
});
|
||||
|
||||
// Robust time formatter to avoid fixed 02:00:00 (timezone / fallback issues)
|
||||
function formatJobTime(ts) {
|
||||
if (!ts) return "";
|
||||
try {
|
||||
const d = new Date(ts);
|
||||
if (isNaN(d.getTime())) return "";
|
||||
const pad = (n) => n.toString().padStart(2, "0");
|
||||
const h = pad(d.getHours());
|
||||
const m = pad(d.getMinutes());
|
||||
const s = d.getSeconds();
|
||||
return s ? `${h}:${m}:${pad(s)}` : `${h}:${m}`;
|
||||
} catch (e) {
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
// Safely build a client case href using Ziggy when available, with a plain fallback.
|
||||
function safeCaseHref(uuid, segment = null) {
|
||||
if (!uuid) {
|
||||
return "#";
|
||||
}
|
||||
try {
|
||||
const params = { client_case: uuid };
|
||||
if (segment != null) {
|
||||
params.segment = segment;
|
||||
}
|
||||
return String(route("clientCase.show", params));
|
||||
} catch (e) {
|
||||
return segment != null
|
||||
? `/client-cases/${uuid}?segment=${segment}`
|
||||
: `/client-cases/${uuid}`;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppCard
|
||||
title=""
|
||||
padding="none"
|
||||
class="p-0! gap-2"
|
||||
header-class="py-3! px-4 border-b gap-0 text-muted-foreground"
|
||||
body-class="flex flex-col gap-4"
|
||||
>
|
||||
<template #header>
|
||||
<div class="flex items-center gap-2">
|
||||
<MapIcon size="18" />
|
||||
<CardTitle class="text-muted-foreground uppercase"> Današnji teren </CardTitle>
|
||||
</div>
|
||||
</template>
|
||||
<ScrollArea
|
||||
class="h-96 w-full"
|
||||
v-if="fieldJobsAssignedToday && fieldJobsAssignedToday.length > 0"
|
||||
>
|
||||
<div class="flex flex-col gap-1 px-1">
|
||||
<Item
|
||||
v-for="f in fieldJobsAssignedToday"
|
||||
:key="f.id"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
as-child
|
||||
>
|
||||
<a :href="safeCaseHref(f.contract.client_case_uuid, f.contract.segment_id)">
|
||||
<ItemMedia>
|
||||
<span class="w-2 h-2 mt-2 rounded-full bg-primary" />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>
|
||||
<span>{{ f.contract.person_full_name }}</span>
|
||||
</ItemTitle>
|
||||
<ItemDescription class="flex gap-1">
|
||||
<Badge>{{ f.contract.reference }}</Badge>
|
||||
<Badge variant="outline">{{ formatJobTime(f.created_at) }}</Badge>
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<ChevronRightIcon class="size-4" />
|
||||
</ItemActions>
|
||||
</a>
|
||||
</Item>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
<div
|
||||
v-if="!fieldJobsAssignedToday?.length"
|
||||
class="py-4 text-xs text-gray-500 text-center"
|
||||
>
|
||||
Ni zabeleženih primerov.
|
||||
</div>
|
||||
</AppCard>
|
||||
</template>
|
||||
@@ -0,0 +1,49 @@
|
||||
<script setup>
|
||||
import { Card, CardContent } from "@/Components/ui/card";
|
||||
|
||||
const props = defineProps({
|
||||
label: String,
|
||||
value: [String, Number],
|
||||
icon: Object,
|
||||
iconBg: {
|
||||
type: String,
|
||||
default: "bg-primary/10",
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
default: "text-primary",
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card class="hover:border-primary/30 hover:shadow transition">
|
||||
<CardContent class="px-4 py-5 flex items-center gap-4">
|
||||
<span
|
||||
:class="[
|
||||
'inline-flex items-center justify-center h-10 w-10 rounded-md transition',
|
||||
iconBg,
|
||||
iconColor,
|
||||
]"
|
||||
>
|
||||
<component :is="icon" class="w-5 h-5" />
|
||||
</span>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-xs text-muted-foreground uppercase tracking-wide truncate">
|
||||
{{ label }}
|
||||
</p>
|
||||
<p
|
||||
v-if="!loading"
|
||||
class="text-2xl font-semibold tracking-tight text-foreground mt-1"
|
||||
>
|
||||
{{ value ?? "—" }}
|
||||
</p>
|
||||
<div v-else class="h-8 w-20 bg-muted animate-pulse rounded mt-1" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</template>
|
||||
@@ -0,0 +1,110 @@
|
||||
<script setup>
|
||||
import AppCard from "@/Components/app/ui/card/AppCard.vue";
|
||||
import {
|
||||
Card,
|
||||
CardAction,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/Components/ui/card";
|
||||
import {
|
||||
Item,
|
||||
ItemActions,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemTitle,
|
||||
} from "@/Components/ui/item";
|
||||
import {
|
||||
MessageSquare,
|
||||
Send,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
MessageCircle,
|
||||
Smartphone,
|
||||
} from "lucide-vue-next";
|
||||
|
||||
const props = defineProps({
|
||||
smsStats: { type: Array, required: false },
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppCard
|
||||
title=""
|
||||
padding="none"
|
||||
class="p-0! gap-2"
|
||||
header-class="py-3! px-4 border-b gap-0 text-muted-foreground"
|
||||
body-class=""
|
||||
>
|
||||
<template #header>
|
||||
<div class="flex items-center gap-2">
|
||||
<Smartphone size="18" />
|
||||
<CardTitle class="uppercase">SMS stanje </CardTitle>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-if="smsStats?.length">
|
||||
<div v-for="p in smsStats" :key="p.id" class="flex flex-col rounded-lg bg-card">
|
||||
<Item variant="outline" size="lg" class="rounded-t-none border-t-0">
|
||||
<ItemContent class="gap-0">
|
||||
<ItemTitle
|
||||
class="w-full flex flex-row items-center justify-between border-b py-2 px-4"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-semibold text-base">{{ p.name }}</span>
|
||||
<span
|
||||
class="px-2 py-0.5 text-xs font-medium rounded-full"
|
||||
:class="
|
||||
p.active
|
||||
? 'bg-emerald-100 text-emerald-700'
|
||||
: 'bg-gray-100 text-gray-500'
|
||||
"
|
||||
>
|
||||
{{ p.active ? "Aktiven" : "Neaktiven" }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-right flex-1">
|
||||
<div class="text-xs text-muted-foreground">Bilanca</div>
|
||||
<div class="text-xl font-bold">{{ p.balance ?? "—" }}</div>
|
||||
</div>
|
||||
</ItemTitle>
|
||||
<!-- 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-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-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-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-col gap-2">
|
||||
<span class="text-muted-foreground text-xs">Failed</span>
|
||||
<span class="text-xl font-bold">{{ p.today?.failed ?? 0 }}</span>
|
||||
</div>
|
||||
<XCircle class="h-5 w-5 text-rose-600" />
|
||||
</div>
|
||||
</div>
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="text-sm text-gray-500 p-4">Ni podatkov o SMS.</div>
|
||||
</AppCard>
|
||||
</template>
|
||||
Reference in New Issue
Block a user