feat: add SingleRecordMnt component for student record maintenance with search, add, edit, view, and delete functionalities

src/components/base/analysis/AnalysisTrendChart.vue

@@ -0,0 +1,68 @@
+<template>
+  <v-card class="rounded-lg" elevation="2" v-bind="$attrs">
+    <v-card-title class="d-flex align-center py-4 px-4">
+      <div class="d-flex align-center">
+        <v-icon class="mr-2" color="primary" icon="mdi-chart-timeline-variant"></v-icon>
+        <span>{{ title }}</span>
+      </div>
+      <v-spacer></v-spacer>
+      <div class="d-flex">
+        <v-btn
+          v-for="filter in filters"
+          :key="filter"
+          :color="activeFilter === filter ? 'primary' : 'grey'"
+          density="compact"
+          variant="text"
+          @click="$emit('filter-change', filter)"
+        >
+          {{ filter }}
+        </v-btn>
+      </div>
+    </v-card-title>
+
+    <v-card-text class="pt-6 pb-2">
+      <div class="chart-container" style="height: 300px; position: relative">
+        <v-sparkline
+          auto-draw
+          fill
+          :gradient="['#1890ff', '#e6f7ff']"
+          gradient-direction="top"
+          height="100"
+          :line-width="2"
+          :model-value="data"
+          :padding="8"
+          :smooth="10"
+          stroke-linecap="round"
+        >
+          <template #label="item">
+            {{ item.value }}
+          </template>
+        </v-sparkline>
+        <slot name="x-axis">
+          <div class="d-flex justify-space-between mt-2 px-2 text-caption text-grey">
+            <span v-for="i in 12" :key="i">{{ 6 + i }}:00</span>
+          </div>
+        </slot>
+      </div>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  title: string
+  data: number[]
+  filters: string[]
+  activeFilter: string
+}
+
+defineProps<Props>()
+
+defineEmits(['filter-change'])
+</script>
+
+<style scoped>
+.chart-container {
+  overflow: hidden;
+}
+</style>