feat: Display meal details on the dashboard using Echarts radial charts and update package dependencies.

package.json

@@ -21,10 +21,12 @@
     "dependencies": {
         "axios": "^1.13.2",
         "dolphin-components": "^3.1.0",
+        "echarts": "^6.0.0",
         "nepali-date-library": "^1.1.11",
         "pinia": "^3.0.4",
-        "typescript-eslint": "^8.50.0",
+        "typescript-eslint": "^8.52.0",
-        "vue": "^3.5.25",
+        "vue": "^3.5.26",
+        "vue-echarts": "^8.0.1",
         "vue-router": "^4.6.4"
     },
     "devDependencies": {
@@ -42,6 +44,6 @@
         "typescript": "~5.9.3",
         "vite": "^7.3.0",
         "vite-plugin-vue-devtools": "^8.0.5",
-        "vue-tsc": "^3.1.8"
+        "vue-tsc": "^3.2.2"
     }
 }

src/views/Dashboard/Index.vue

@@ -1,5 +1,99 @@
 <template>
-    <div>test</div>
+    <div class="text-[16px] font-[500] pb-[15px]">Meal Details</div>
+    <div class="grid grid-cols-4 gap-[15px] rounded-default">
+        <div class="p-[15px] bg-white">
+            <div class="text-[#2f2f2f]">
+                <span v-if="data.schedule.running == 1">Running</span>
+                <span v-else>Previous</span>
+                Schedule
+            </div>
+            <div class="text-[24px] text-[#333131]">
+                {{ data.schedule.name ? data.schedule.name : "N/A" }}
+            </div>
+        </div>
+        <div class="p-[15px] bg-white">
+            <div class="text-[#2f2f2f]">Total Employee</div>
+            <div class="text-[24px] text-[#333131]">
+                {{ data.total ? data.total : "0" }}
+            </div>
+        </div>
+        <div class="p-[15px] bg-white relative">
+            <div class="text-[#2f2f2f]">Scanned Employee</div>
+            <div class="text-[24px] text-[#333131]">
+                {{ data.scanned ? data.scanned : "0" }}
+            </div>
+            <div class="text-[#2f2f2f]">({{ getPercentage(data.total, data.scanned) }} % of {{ data.total }})</div>
+            <div class="w-[100px] h-[70px] ml-auto absolute right-0 top-[20px]">
+                <v-chart :option="getRadialOption(getPercentage(data.total, data.scanned))" />
+            </div>
+        </div>
+        <div class="p-[15px] bg-white relative">
+            <div class="w-fit">
+                <div class="text-[#2f2f2f]">Pending Employee</div>
+                <div class="text-[24px] text-[#333131]">
+                    {{ data.pending ? data.pending : "0" }}
+                </div>
+                <div class="text-[#2f2f2f]">({{ getPercentage(data.total, data.pending) }} % of {{ data.total }})</div>
+            </div>
+            <div class="w-[100px] h-[70px] ml-auto absolute right-0 top-[20px]">
+                <v-chart :option="getRadialOption(getPercentage(data.total, data.pending))" />
+            </div>
+        </div>
+    </div>
 </template>
 
-<script lang="ts" setup></script>
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import VChart from "vue-echarts";
+import { use } from "echarts/core";
+import { CanvasRenderer } from "echarts/renderers";
+import { PieChart } from "echarts/charts";
+import { TitleComponent, TooltipComponent, LegendComponent } from "echarts/components";
+
+use([CanvasRenderer, PieChart, TitleComponent, TooltipComponent, LegendComponent]);
+
+const data = ref({
+    total: 10,
+    pending: 200,
+    scanned: 100,
+    schedule: {
+        name: "Testing",
+        running: 1,
+    },
+});
+
+const getRadialOption = (percent: number) => ({
+    series: [
+        {
+            type: "pie",
+            radius: ["80%", "100%"],
+            avoidLabelOverlap: false,
+            silent: true,
+            data: [
+                { value: percent, itemStyle: { color: "#4a8e57" } },
+                { value: 100 - percent, itemStyle: { color: "#e6edf7" } },
+            ],
+            label: {
+                show: true,
+                position: "center",
+                formatter: `${Math.round(percent)}%`,
+                fontSize: 12,
+                color: "#6b7280", // Tailwind's gray-500
+                fontWeight: 500,
+            },
+            labelLine: { show: false },
+            emphasis: { disabled: true },
+            hoverAnimation: false,
+        },
+    ],
+    tooltip: { show: false },
+    legend: { show: false },
+});
+
+const getPercentage = (total: number, by: number) => {
+    if (!by) {
+        return 0;
+    }
+    return parseFloat(((by / total) * 100).toFixed(2));
+};
+</script>