feat(manage): add CAS time dashboard on activity record (#636)

* deps(pnpm): update dependencies

* fix(eslint): format code style

* feat(manage): add CAS time dashboard on activity record

* docs: add changeset

.changeset/slow-melons-jog.md

@@ -0,0 +1,5 @@
+---
+"enspire": minor
+---
+
+Added a CAS time dashboard to the Activity Record, allowing for display of individual, combined, and total sums across all records.

.github/workflows/on-commit.yml

@@ -23,7 +23,7 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: 20
-          cache: 'pnpm'
+          cache: pnpm
       - name: Install dependencies
         run: pnpm install
       - name: Apply all pending migrations to the database

.github/workflows/on-release.yml

@@ -31,7 +31,7 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: 20
-          cache: 'pnpm'
+          cache: pnpm
       - name: Install dependencies
         run: pnpm install
       - name: Apply all pending migrations to the database

.travis.yml

@@ -6,13 +6,13 @@ dist: jammy
 cache:
   npm: false
   directories:
-    - "~/.pnpm-store"
-    
+    - ~/.pnpm-store
+
 before_install:
   - corepack enable
   - corepack prepare pnpm@latest-9 --activate
   - pnpm config set store-dir ~/.pnpm-store
-  
+
 install:
   - pnpm install
 

components/custom/CAS/Record/ViewMyActivityRecords.vue

@@ -1,6 +1,12 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
 import {
   Select,
   SelectContent,
@@ -48,13 +54,33 @@ async function onRefresh() {
   isLoading.value = false
 }
 
-watch(() => props.refreshWatcher, () => {
-  onRefresh()
-})
+watch(
+  () => props.refreshWatcher,
+  () => {
+    onRefresh()
+  },
+)
 
 watch(selectedClub, async () => {
   await onRefresh()
 })
+
+// Computed properties to calculate total CAS times
+const totalCTime = computed(() => {
+  return data.value?.data.reduce((sum, record) => sum + record.cTime, 0) || 0
+})
+
+const totalATime = computed(() => {
+  return data.value?.data.reduce((sum, record) => sum + record.aTime, 0) || 0
+})
+
+const totalSTime = computed(() => {
+  return data.value?.data.reduce((sum, record) => sum + record.sTime, 0) || 0
+})
+
+const totalCASTime = computed(() => {
+  return totalCTime.value + totalATime.value + totalSTime.value
+})
 </script>
 
 <template>
@@ -76,18 +102,60 @@ watch(selectedClub, async () => {
             <SelectGroup>
               <SelectItem
                 v-for="club in [...clubs.vice, ...clubs.president]"
-                :key="club.id" :value="String(club.id)"
+                :key="club.id"
+                :value="String(club.id)"
               >
                 {{ club.name.zh }}
               </SelectItem>
             </SelectGroup>
           </SelectContent>
         </Select>
-        <Button size="icon" variant="outline" :disabled="isLoading || !selectedClub" @click="onRefresh()">
-          <Icon name="material-symbols:refresh" :class="{ 'animate-spin': isLoading }" />
+        <Button
+          size="icon"
+          variant="outline"
+          :disabled="isLoading || !selectedClub"
+          @click="onRefresh()"
+        >
+          <Icon
+            name="material-symbols:refresh"
+            :class="{ 'animate-spin': isLoading }"
+          />
         </Button>
       </div>
-      <DataTable v-if="data && selectedClub" :columns="columns" :data="data.data" :refresh-function="refresh" />
+      <div v-if="selectedClub" class="mb-4 text-sm">
+        <div class="rounded border p-2 mt-1 flex justify-between">
+          <div class="flex items-center space-x-0.5">
+            <p class="font-bold">
+              C:
+            </p>
+            <div>{{ totalCTime }} 小时</div>
+          </div>
+          <div class="flex items-center space-x-0.5">
+            <p class="font-bold">
+              A:
+            </p>
+            <div>{{ totalATime }} 小时</div>
+          </div>
+          <div class="flex items-center space-x-0.5">
+            <p class="font-bold">
+              S:
+            </p>
+            <div>{{ totalSTime }} 小时</div>
+          </div>
+          <div class="flex items-center space-x-0.5">
+            <p class="font-bold">
+              Total:
+            </p>
+            <div>{{ totalCASTime }} 小时</div>
+          </div>
+        </div>
+      </div>
+      <DataTable
+        v-if="data && selectedClub"
+        :columns="columns"
+        :data="data.data"
+        :refresh-function="refresh"
+      />
     </CardContent>
   </Card>
   <Toaster />

components/custom/CAS/Record/view-activity-records/DataTable.vue

@@ -12,7 +12,6 @@ import {
   TableRow,
 } from '@/components/ui/table'
 import { valueUpdater } from '@/lib/utils'
-
 import {
   FlexRender,
   getCoreRowModel,

components/custom/club-card.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import type { PropType } from 'vue'
-import type { Club } from '~/types/clubs'
+import Badge from '@/components/ui/badge/Badge.vue'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
 import { cn } from '@/lib/utils'
-import Badge from '@/components/ui/badge/Badge.vue'
 import sanitizeHtml from 'sanitize-html'
+import type { Club } from '~/types/clubs'
 
 const props = defineProps({
   club: {

components/custom/sidebar.vue

@@ -92,7 +92,7 @@ if (import.meta.client) {
             </Button>
           </NuxtLink>
           <NuxtLink to="/manage/record">
-            <Button v-if="isPresidentOrVicePresident" :variant="route.name === 'manage-record' ? 'secondary' : 'ghost'" class="w-full justify-start mt-1">
+            <Button :variant="route.name === 'manage-record' ? 'secondary' : 'ghost'" class="w-full justify-start mt-1">
               <Icon class="mr-2 h-4 w-4" name="charm:tick-double" />
               活动签到
             </Button>

data/forms/forms.yaml

@@ -1,7 +1,7 @@
 ---
 20240930_0001:
-  title: "社团注册表"
-  description: "提交社团注册表，如有多个社团可反复在此提交。"
-  url: "https://wzvkx0jz.nocodb.com/#/nc/form/4b639cfb-a057-414f-b778-016c02309f32?embed"
-  start_date: "2024-09-30"
-  end_date: "2024-10-30"
+  title: 社团注册表
+  description: 提交社团注册表，如有多个社团可反复在此提交。
+  url: 'https://wzvkx0jz.nocodb.com/#/nc/form/4b639cfb-a057-414f-b778-016c02309f32?embed'
+  start_date: 2024-09-30
+  end_date: 2024-10-30

db/migrations/migration_lock.toml

@@ -1,3 +1,3 @@
 # Please do not edit this file manually
 # It should be added in your version-control system (i.e. Git)
-provider = "postgresql"
+provider = "postgresql"

layouts/sign-in-or-out.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useFavicon, usePreferredDark } from '@vueuse/core'
 import IconLogo from '@/assets/logo.svg'
+import { useFavicon, usePreferredDark } from '@vueuse/core'
 
 const isDark = usePreferredDark()
 const favicon = computed(() => isDark.value ? '/favicon-dark.ico' : '/favicon.ico')

lib/utils.ts

@@ -1,9 +1,9 @@
-import { type ClassValue, clsx } from 'clsx'
-import { twMerge } from 'tailwind-merge'
-
 import type { Updater } from '@tanstack/vue-table'
 import type { Ref } from 'vue'
 
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }

package.json

@@ -16,71 +16,71 @@
     "typecheck": "vue-tsc --noEmit --skipLibCheck"
   },
   "dependencies": {
-    "@changesets/cli": "^2.27.8",
-    "@clerk/clerk-sdk-node": "^5.0.46",
-    "@clerk/themes": "^2.1.33",
+    "@changesets/cli": "^2.27.9",
+    "@clerk/clerk-sdk-node": "^5.0.52",
+    "@clerk/themes": "^2.1.37",
     "@netlify/edge-functions": "^2.11.0",
     "@netlify/functions": "^2.8.2",
     "@netlify/integrations": "^0.5.4",
     "@netlify/sentry": "^0.0.10",
-    "@nuxt/content": "^2.13.2",
+    "@nuxt/content": "^2.13.4",
     "@radix-icons/vue": "^1.0.0",
-    "@sentry/nuxt": "^8.32.0",
+    "@sentry/nuxt": "^8.34.0",
     "@tanstack/vue-table": "^8.20.5",
     "@unovis/ts": "^1.4.4",
     "@unovis/vue": "^1.4.4",
-    "@vee-validate/zod": "^4.13.2",
+    "@vee-validate/zod": "^4.14.3",
     "@vite-pwa/nuxt": "^0.10.5",
     "@vueuse/core": "^11.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "dotenv": "^16.4.5",
-    "h3": "^1.12.0",
+    "h3": "^1.13.0",
     "h3-clerk": "^0.4.12",
     "iron-webcrypto": "^1.2.1",
     "lucide-vue-next": "^0.441.0",
-    "ofetch": "^1.4.0",
-    "radix-vue": "^1.9.6",
-    "sanitize-html": "^2.13.0",
-    "tailwind-merge": "^2.5.2",
+    "ofetch": "^1.4.1",
+    "radix-vue": "^1.9.7",
+    "sanitize-html": "^2.13.1",
+    "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
     "uncrypto": "^0.1.3",
     "unstorage": "^1.12.0",
     "uuid": "^10.0.0",
     "v-calendar": "^3.1.2",
     "vaul-vue": "^0.2.0",
-    "vee-validate": "^4.13.2",
-    "vue-clerk": "^0.6.16",
-    "yaml": "^2.5.1",
+    "vee-validate": "^4.14.3",
+    "vue-clerk": "^0.6.19",
+    "yaml": "^2.6.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^3.7.3",
+    "@antfu/eslint-config": "^3.8.0",
     "@changesets/changelog-github": "^0.5.0",
-    "@netlify/blobs": "^8.0.1",
+    "@netlify/blobs": "^8.1.0",
     "@nuxt/fonts": "^0.8.0",
-    "@nuxt/icon": "^1.5.2",
-    "@nuxt/image": "^1.8.0",
+    "@nuxt/icon": "^1.5.6",
+    "@nuxt/image": "^1.8.1",
     "@nuxtjs/google-fonts": "^3.2.0",
-    "@nuxtjs/tailwindcss": "^6.12.1",
-    "@prisma/client": "^5.20.0",
+    "@nuxtjs/tailwindcss": "^6.12.2",
+    "@prisma/client": "^5.21.1",
     "@rollup/plugin-wasm": "^6.2.2",
     "@tailwindcss/typography": "^0.5.15",
     "@types/node-fetch": "^2.6.11",
     "@types/sanitize-html": "^2.13.0",
     "@types/uuid": "^10.0.0",
     "@types/ws": "^8.5.12",
     "dayjs-nuxt": "^2.1.11",
-    "eslint": "^9.11.1",
+    "eslint": "^9.13.0",
     "netlify": "^13.1.21",
     "nuxt": "^3.13.2",
     "nuxt-svgo": "^4.0.6",
-    "prisma": "^5.20.0",
+    "prisma": "^5.21.1",
     "shadcn-nuxt": "^0.10.4",
     "ts-node": "^10.9.2",
     "tsx": "^4.19.1",
-    "typescript": "^5.6.2",
-    "vue": "^3.5.10",
+    "typescript": "^5.6.3",
+    "vue": "^3.5.12",
     "vue-router": "4.4.5",
     "vue-tsc": "^2.1.6"
   },

pages/cas/clubs/[id].vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { useRoute } from 'vue-router'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import sanitizeHtml from 'sanitize-html'
+import { useRoute } from 'vue-router'
 import type { Club, Clubs } from '~/types/clubs'
 
 const { data } = await useFetch<Clubs>('/api/club/all_details')

pages/cas/rating.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-import * as z from 'zod'
-import { cn } from '~/lib/utils'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent } from '@/components/ui/card'
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Textarea } from '@/components/ui/textarea'
 import { useToast } from '@/components/ui/toast/use-toast'
-import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { ref } from 'vue'
+import * as z from 'zod'
+import { cn } from '~/lib/utils'
 
 const { toast } = useToast()
 

pages/manage/manage.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
+import Toaster from '@/components/ui/toast/Toaster.vue'
+import { useToast } from '@/components/ui/toast/use-toast'
 import { LoaderCircle } from 'lucide-vue-next'
 import { onMounted } from 'vue'
 import { enums } from '~/components/custom/enum2str'
-import { useToast } from '@/components/ui/toast/use-toast'
-import Toaster from '@/components/ui/toast/Toaster.vue'
 
 definePageMeta({
   middleware: ['auth'],

pages/sign-in.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { SignIn } from 'vue-clerk'
-import { usePreferredDark } from '@vueuse/core'
 import { dark } from '@clerk/themes'
+import { usePreferredDark } from '@vueuse/core'
+import { SignIn } from 'vue-clerk'
 
 const isDark = usePreferredDark()