feat: Initialize core application structure including authentication, role-based dashboards, service task management, and integration workflows.

resources/js/Components/Dashboard/StatCard.vue

@@ -0,0 +1,37 @@
+<script setup>
+defineProps({
+    title: String,
+    value: [String, Number],
+    subValue: String,
+    icon: String,
+    color: {
+        type: String,
+        default: 'blue'
+    }
+});
+
+const colors = {
+    blue: 'text-blue-600 bg-blue-100 dark:bg-blue-900/30 dark:text-blue-400',
+    red: 'text-red-600 bg-red-100 dark:bg-red-900/30 dark:text-red-400',
+    green: 'text-green-600 bg-green-100 dark:bg-green-900/30 dark:text-green-400',
+    yellow: 'text-yellow-600 bg-yellow-100 dark:bg-yellow-900/30 dark:text-yellow-400',
+};
+</script>
+
+<template>
+    <div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
+        <div class="flex items-center">
+            <div :class="['p-3 rounded-full', colors[color]]">
+                <!-- Simple Circle as Placeholder for Icon -->
+                <div class="w-6 h-6 border-2 border-current rounded-full"></div>
+            </div>
+            <div class="ml-4 text-gray-500 dark:text-gray-400">
+                <p class="text-sm font-medium uppercase tracking-wider">{{ title }}</p>
+                <div class="flex items-baseline">
+                    <p class="text-2xl font-semibold text-gray-900 dark:text-white">{{ value }}</p>
+                    <p v-if="subValue" class="ml-2 text-xs font-semibold text-gray-500">{{ subValue }}</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>