Dashboard final version, TODO: update main sidebar menu

2025-11-23 21:33:01 +01:00
parent c3de189e9d
commit c1ac92efbf
67 changed files with 5195 additions and 844 deletions
@@ -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>