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,92 @@
+<script lang="ts" setup>
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+} from "@/Components/ui/card";
+import { cn } from "@/lib/utils";
+import { computed, HTMLAttributes } from "vue";
+
+interface Props {
+  title?: string;
+  description?: string;
+  loading?: boolean;
+  padding?: "default" | "none" | "tight";
+  hover?: boolean; // subtle hover style
+  clickable?: boolean; // adds cursor + focus ring
+  disabled?: boolean;
+  class?: HTMLAttributes["class"];
+  headerClass?: HTMLAttributes["class"];
+  bodyClass?: HTMLAttributes["class"];
+}
+
+const props = defineProps<Props>();
+
+// Emit click for consumers if clickable
+const emit = defineEmits<{ (e: "click", ev: MouseEvent): void }>();
+
+const wrapperClasses = computed(() => {
+  const base = "relative transition-colors";
+  const hover = props.hover ? "hover:bg-muted/50" : "";
+  const clickable =
+    props.clickable && !props.disabled
+      ? "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+      : "";
+  const disabled = props.disabled ? "opacity-60 pointer-events-none" : "";
+  return [base, hover, clickable, disabled].filter(Boolean).join(" ");
+});
+
+const paddingClasses = computed(() => {
+  switch (props.padding) {
+    case "none":
+      return "p-0";
+    case "tight":
+      return "p-3 sm:p-4";
+    default:
+      return "p-4 sm:p-6";
+  }
+});
+</script>
+
+<template>
+  <Card
+    :class="cn(wrapperClasses, props.class)"
+    @click="props.clickable && emit('click', $event)"
+  >
+    <!-- Header Slot / Fallback -->
+    <CardHeader
+      v-if="title || description || $slots.header"
+      :class="cn('space-y-1', headerClass)"
+    >
+      <template v-if="$slots.header">
+        <slot name="header" />
+      </template>
+      <template v-else>
+        <CardTitle v-if="title">{{ title }}</CardTitle>
+        <CardDescription v-if="description">{{ description }}</CardDescription>
+      </template>
+    </CardHeader>
+
+    <!-- Loading Skeleton -->
+    <div v-if="loading" class="animate-pulse space-y-3 px-4 py-4">
+      <div class="h-4 w-1/3 rounded bg-muted" />
+      <div class="h-3 w-1/2 rounded bg-muted" />
+      <div class="h-32 rounded bg-muted" />
+    </div>
+
+    <!-- Content Slot -->
+    <CardContent v-else :class="cn(paddingClasses, bodyClass)">
+      <slot />
+    </CardContent>
+
+    <!-- Footer Slot -->
+    <CardFooter v-if="$slots.footer" class="border-t px-4 py-3 sm:px-6">
+      <slot name="footer" />
+    </CardFooter>
+  </Card>
+</template>
+
+<style scoped></style>