diff --git a/bun.lock b/bun.lock index e441fc9..5b02407 100644 --- a/bun.lock +++ b/bun.lock @@ -15,15 +15,15 @@ "@radix-ui/react-tabs": "^1.1.3", "@radix-ui/react-tooltip": "^1.1.8", "@t3-oss/env-core": "^0.12.0", - "@tanstack/react-query": "^5.66.9", - "axios": "^1.7.9", + "@tanstack/react-query": "^5.66.11", + "axios": "^1.8.1", "better-auth": "^1.1.21", "bluebun": "^0.0.34", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "date-fns": "^4.1.0", "dotenv": "^16.4.7", - "drizzle-kit": "^0.30.4", + "drizzle-kit": "^0.30.5", "drizzle-orm": "^0.40.0", "fluent-ffmpeg": "^2.1.3", "isbot": "^5.1.23", @@ -34,6 +34,7 @@ "next-themes": "^0.4.4", "pg": "^8.13.3", "react": "^19.0.0", + "react-countup": "^6.5.3", "react-dom": "^19.0.0", "react-file-icon": "^1.6.0", "react-hook-form": "^7.54.2", @@ -47,7 +48,7 @@ }, "devDependencies": { "@eslint/eslintrc": "^3.3.0", - "@tailwindcss/postcss": "^4.0.8", + "@tailwindcss/postcss": "^4.0.9", "@types/fluent-ffmpeg": "^2.1.27", "@types/node": "^22.13.5", "@types/pg": "^8.11.11", @@ -61,7 +62,7 @@ "ieee754": "^1.2.1", "postcss": "^8.5.3", "prettier-plugin-organize-imports": "^4.1.0", - "tailwindcss": "^4.0.8", + "tailwindcss": "^4.0.9", "tsx": "^4.19.3", "typescript": "^5.7.3", }, @@ -514,6 +515,8 @@ "concat-map": ["concat-map@0.0.1", "", {}, "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="], + "countup.js": ["countup.js@2.8.0", "", {}, "sha512-f7xEhX0awl4NOElHulrl4XRfKoNH3rB+qfNSZZyjSZhaAoUk6elvhH+MNxMmlmuUJ2/QNTWPSA7U4mNtIAKljQ=="], + "cross-spawn": ["cross-spawn@7.0.6", "", { "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", "which": "^2.0.1" } }, "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA=="], "csstype": ["csstype@3.1.3", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="], @@ -962,6 +965,8 @@ "react": ["react@19.0.0", "", {}, "sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ=="], + "react-countup": ["react-countup@6.5.3", "", { "dependencies": { "countup.js": "^2.8.0" }, "peerDependencies": { "react": ">= 16.3.0" } }, "sha512-udnqVQitxC7QWADSPDOxVWULkLvKUWrDapn5i53HE4DPRVgs+Y5rr4bo25qEl8jSh+0l2cToJgGMx+clxPM3+w=="], + "react-dom": ["react-dom@19.0.0", "", { "dependencies": { "scheduler": "^0.25.0" }, "peerDependencies": { "react": "^19.0.0" } }, "sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ=="], "react-fast-compare": ["react-fast-compare@3.2.2", "", {}, "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="], diff --git a/package.json b/package.json index 710c2c4..0db75a0 100644 --- a/package.json +++ b/package.json @@ -42,6 +42,7 @@ "next-themes": "^0.4.4", "pg": "^8.13.3", "react": "^19.0.0", + "react-countup": "^6.5.3", "react-dom": "^19.0.0", "react-file-icon": "^1.6.0", "react-hook-form": "^7.54.2", diff --git a/src/components/dashboard/user/statistic/statistic.tsx b/src/components/dashboard/user/statistic/statistic.tsx index 309a6f0..2455973 100644 --- a/src/components/dashboard/user/statistic/statistic.tsx +++ b/src/components/dashboard/user/statistic/statistic.tsx @@ -1,24 +1,33 @@ +"use client"; + import SimpleTooltip from "@/components/simple-tooltip"; +import { formatNumberWithCommas } from "@/lib/utils/number-utils"; +import { formatBytes } from "@/lib/utils/utils"; import { ReactElement } from "react"; +import CountUp from "react-countup"; type StatisticProps = { name: string; - value: unknown; + value: number; + format: "number" | "bytes"; icon: ReactElement; tooltip?: string | ReactElement; }; -export default function UserStatistic({ - name, - value, - icon, - tooltip, -}: StatisticProps) { +export default function UserStatistic({ name, value, format, icon, tooltip }: StatisticProps) { const base = (
{name} - {`${value}`} + + +
{icon}
diff --git a/src/components/dashboard/user/statistic/statistics.tsx b/src/components/dashboard/user/statistic/statistics.tsx index 5f4a562..81e0bd0 100644 --- a/src/components/dashboard/user/statistic/statistics.tsx +++ b/src/components/dashboard/user/statistic/statistics.tsx @@ -59,27 +59,6 @@ const statistics: Statistic[] = [ }, ]; -/** - * Formats the value for a statistic - * - * @param value the value to format - * @param format the format to use - * @returns the formatted value - */ -function format(value: unknown, format: Format) { - switch (format) { - case "number": { - return formatNumberWithCommas(value as number); - } - case "bytes": { - return formatBytes(value as number); - } - default: { - return value; - } - } -} - export default async function UserStatistics() { const statisticsResponse = await request.get( `${env.NEXT_PUBLIC_WEBSITE_URL}/api/user/statistics`, @@ -103,7 +82,8 @@ export default async function UserStatistics() { key={index} name={statistic.name} icon={statistic.icon} - value={format(value, statistic.format)} + format={statistic.format} + value={value} tooltip={statistic.tooltip && statistic.tooltip(statisticsResponse)} /> );