general dashboard

src/components/cards/MetricCard.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="bg-white rounded-2xl shadow-sm flex flex-col justify-between aspect-square p-4">
+    <h6 class="text-sm font-bold text-gray-500">{{ title }}</h6>
+    <div class="flex-grow flex items-center justify-start">
+      <p class="text-gray-900 font-bold text-2xl">
+        {{ content }} <span class="text-sm text-gray-500">{{ details }}</span>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  title: string
+  content: string | number
+  details?: string | number
+}>()
+</script>