extended-28

1<script setup lang="ts">
2import { Card, CardContent, CardHeader, CardTitle } from "@/registry/default/ui/card";
3import { Progress } from "@/registry/default/ui/progress";
4import {
5  Select,
6  SelectContent,
7  SelectItem,
8  SelectTrigger,
9  SelectValue,
10} from "@/registry/default/ui/select";
11import { onMounted, onUnmounted, ref } from "vue";
12 
13const progress = ref(13);
14 
15let timer: ReturnType<typeof setTimeout> | null = null;
16 
17onMounted(() => {
18  timer = setTimeout(() => {
19    progress.value = 66;
20  }, 500);
21});
22 
23onUnmounted(() => {
24  if (timer) {
25    clearTimeout(timer);
26  }
27});
28</script>
29 
30<template>
31  <div class="*:not-first:mt-2">
32    <Card class="mx-auto w-full md:w-[450px]">
33      <CardHeader class="flex items-center justify-between">
34        <CardTitle>Tasks Overview</CardTitle>
35        <div class="ml-auto">
36          <Select defaultValue="this-month">
37            <SelectTrigger class="w-32">
38              <SelectValue placeholder="Select range" />
39            </SelectTrigger>
40            <SelectContent>
41              <SelectItem value="this-month">This Month</SelectItem>
42              <SelectItem value="last-month">Last Month</SelectItem>
43              <SelectItem value="this-year">This Year</SelectItem>
44              <SelectItem value="last-year">Last Year</SelectItem>
45            </SelectContent>
46          </Select>
47        </div>
48      </CardHeader>
49      <CardContent class="flex flex-col gap-5">
50        <!-- Progress bar and done tasks -->
51        <div class="mb-6 grow">
52          <div class="mb-1 flex items-center justify-between">
53            <span class="text-foreground text-sm font-medium">Tasks Done</span>
54            <span class="text-sm font-semibold text-green-500">12</span>
55          </div>
56          <Progress :modelValue="progress" />
57        </div>
58 
59        <!-- Task summary -->
60        <div class="space-y-6">
61          <!-- Tasks list -->
62          <div class="grid grid-cols-3 gap-2.5">
63            <div
64              class="bg-muted/60 flex flex-col items-center justify-center gap-1 rounded-lg px-2 py-3.5"
65            >
66              <span class="text-lg font-bold text-green-500">28</span>
67              <span class="text-accent-foreground text-xs">Backlog</span>
68            </div>
69            <div
70              class="bg-muted/60 flex flex-col items-center justify-center gap-1 rounded-lg px-2 py-3.5"
71            >
72              <span class="text-lg font-bold text-yellow-500">14</span>
73// … truncated