Update componen template

2026-03-13 03:56:11 +00:00
parent 6bb6a1d430
commit f2ed1b2556
33 changed files with 1899 additions and 0 deletions
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { getPrimary, getLightPrimary } from '@/utils/UpdateColors';
+
+/ Chart /
+const chartOptions = computed(() => {
+    return {
+        labels: ['', '', ''],
+        chart: {
+            type: 'donut',
+            height: 150,
+            fontFamily: `inherit`,
+            foreColor: '#a1aab2',
+            toolbar: {
+                show: false
+            }
+        },
+        colors: [getPrimary.value, 'rgba(var(--v-theme-light))', '#F9F9FD'],
+        plotOptions: {
+            pie: {
+                startAngle: 0,
+                endAngle: 360,
+                donut: {
+                    size: '75%',
+                    background: 'transparent'
+                }
+            }
+        },
+        stroke: {
+            show: false
+        },
+        dataLabels: {
+            enabled: false
+        },
+        legend: {
+            show: false
+        },
+        tooltip: {
+            enabled: false
+        },
+        responsive: [
+            {
+                breakpoint: 991,
+                options: {
+                    chart: {
+                        height: 140
+                    }
+                }
+            },
+            {
+                breakpoint: 600,
+                options: {
+                    chart: {
+                        height: 130
+                    }
+                }
+            }
+        ]
+    };
+});
+const Chart = [38, 40, 25];
+</script>
+<template>
+    <v-card elevation="10" >
+        <v-card-item>
+            <div class="d-sm-flex align-center justify-space-between">
+                <v-card-title class="text-h5">Yearly Breakup</v-card-title>
+            </div>
+            <v-row>
+                <v-col cols="7" sm="7">
+                    <div class="mt-3">
+                        <h3 class="text-h3">$36,358</h3>
+                        <div class="mt-2 d-flex gap-2 align-center">
+                            <v-avatar class="bg-lightsuccess text-success" size="25">
+                                <ArrowUpLeftIcon size="20" />
+                            </v-avatar>
+                            <span class="text-body-1">+9%</span>
+                            <span class="text-body-1 textSecondary ">last year</span>
+                        </div>
+                        <div class="d-flex align-center mt-sm-10 mt-8">
+                            <p class="text-body-1 textSecondary">
+                                <v-icon icon="mdi mdi-checkbox-blank-circle" class="mr-1" size="10" color="primary"></v-icon> 2023
+                            </p>
+                            <p class="text-body-1 textSecondary pl-5">
+                                <v-icon icon="mdi mdi-checkbox-blank-circle" class="mr-1" size="10" color="light    "></v-icon> 2024
+                            </p>
+                        </div>
+                    </div>
+                </v-col>
+                <v-col cols="5" sm="5">
+                    <div class="d-flex align-center flex-shrink-0">
+                        <apexchart class="pt-6" type="donut" height="150" :options="chartOptions" :series="Chart"> </apexchart>
+                    </div>
+                </v-col>
+            </v-row>
+        </v-card-item>
+    </v-card>
+</template>