feat: add deploy dashboard page with components

2026-07-02 12:48:49 +05:00
parent 73d123a62d
commit 13d7d36088
4 changed files with 178 additions and 0 deletions
@@ -0,0 +1,42 @@
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  step: Number,
+  totalSteps: Number,
+  currentStep: String,
+  success: Boolean,
+  error: String,
+})
+
+const progress = computed(() => (props.step / props.totalSteps) * 100)
+</script>
+
+<template>
+  <div class="mt-6 p-4 bg-white rounded-lg shadow">
+    <div class="mb-2 flex justify-between text-sm">
+      <span>{{ currentStep }}</span>
+      <span>{{ step }}/{{ totalSteps }}</span>
+    </div>
+
+    <div class="w-full bg-gray-200 rounded-full h-3">
+      <div
+        class="h-3 rounded-full transition-all duration-500"
+        :class="{
+          'bg-blue-600': !success && !error,
+          'bg-green-600': success,
+          'bg-red-600': error
+        }"
+        :style="{ width: progress + '%' }"
+      />
+    </div>
+
+    <div v-if="error" class="mt-3 p-3 bg-red-100 text-red-700 rounded">
+      ❌ {{ error }}
+    </div>
+
+    <div v-else-if="success" class="mt-3 p-3 bg-green-100 text-green-700 rounded">
+      ✅ Deploy completed successfully
+    </div>
+  </div>
+</template>