Init

resources/js/Pages/Dashboard.vue

@@ -0,0 +1,57 @@
+<template>
+    <AppLayout>
+        <PanelFolder title="CSV Product Import" :badge="productImportCount">
+            <ProductImport :import-jobs="importJobs" />
+        </PanelFolder>
+        <PanelFolder title="Order Fulfillment · Saga" :badge="orders.length || undefined">
+            <OrderFulfillment :orders="orders" />
+        </PanelFolder>
+        <PanelFolder title="User Data Migration" :badge="migrationCount">
+            <UserMigration :import-jobs="importJobs" />
+        </PanelFolder>
+        <PanelFolder title="External API Sync" :default-open="false">
+            <ExternalApiSync />
+        </PanelFolder>
+        <PanelFolder title="Webhook Delivery" :default-open="false">
+            <WebhookDelivery />
+        </PanelFolder>
+        <PanelFolder title="Data Enrichment Pipeline" :default-open="false">
+            <DataEnrichment />
+        </PanelFolder>
+        <PanelFolder title="Eloquent Query Pipeline" :default-open="false">
+            <EloquentQuery />
+        </PanelFolder>
+        <PanelFolder title="System Health Monitor" :default-open="false">
+            <SystemMonitor />
+        </PanelFolder>
+    </AppLayout>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import AppLayout from '../Layouts/AppLayout.vue';
+import PanelFolder from '../Components/PanelFolder.vue';
+import ProductImport from '../Components/ProductImport.vue';
+import OrderFulfillment from '../Components/OrderFulfillment.vue';
+import UserMigration from '../Components/UserMigration.vue';
+import ExternalApiSync from '../Components/ExternalApiSync.vue';
+import WebhookDelivery from '../Components/WebhookDelivery.vue';
+import DataEnrichment from '../Components/DataEnrichment.vue';
+import EloquentQuery from '../Components/EloquentQuery.vue';
+import SystemMonitor from '../Components/SystemMonitor.vue';
+
+const props = defineProps({
+    importJobs: { type: Array, default: () => [] },
+    orders: { type: Array, default: () => [] },
+});
+
+const productImportCount = computed(() => {
+    const count = props.importJobs.filter(j => j.type === 'product_import').length;
+    return count || undefined;
+});
+
+const migrationCount = computed(() => {
+    const count = props.importJobs.filter(j => j.type === 'user_migration').length;
+    return count || undefined;
+});
+</script>