mirror of
https://github.com/kjanat/livedash-node.git
synced 2026-01-16 07:52:10 +01:00
feat: comprehensive security and architecture improvements
- Add Zod validation schemas with strong password requirements (12+ chars, complexity) - Implement rate limiting for authentication endpoints (registration, password reset) - Remove duplicate MetricCard component, consolidate to ui/metric-card.tsx - Update README.md to use pnpm commands consistently - Enhance authentication security with 12-round bcrypt hashing - Add comprehensive input validation for all API endpoints - Fix security vulnerabilities in user registration and password reset flows 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@ -63,10 +63,11 @@ export default function DateRangePicker({
|
||||
const setLast30Days = () => {
|
||||
const thirtyDaysAgo = new Date();
|
||||
thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
|
||||
const thirtyDaysAgoStr = thirtyDaysAgo.toISOString().split('T')[0];
|
||||
const thirtyDaysAgoStr = thirtyDaysAgo.toISOString().split("T")[0];
|
||||
|
||||
// Use the later of 30 days ago or minDate
|
||||
const newStartDate = thirtyDaysAgoStr > minDate ? thirtyDaysAgoStr : minDate;
|
||||
const newStartDate =
|
||||
thirtyDaysAgoStr > minDate ? thirtyDaysAgoStr : minDate;
|
||||
setStartDate(newStartDate);
|
||||
setEndDate(maxDate);
|
||||
};
|
||||
@ -74,7 +75,7 @@ export default function DateRangePicker({
|
||||
const setLast7Days = () => {
|
||||
const sevenDaysAgo = new Date();
|
||||
sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
|
||||
const sevenDaysAgoStr = sevenDaysAgo.toISOString().split('T')[0];
|
||||
const sevenDaysAgoStr = sevenDaysAgo.toISOString().split("T")[0];
|
||||
|
||||
// Use the later of 7 days ago or minDate
|
||||
const newStartDate = sevenDaysAgoStr > minDate ? sevenDaysAgoStr : minDate;
|
||||
@ -146,7 +147,8 @@ export default function DateRangePicker({
|
||||
</div>
|
||||
|
||||
<div className="mt-2 text-xs text-gray-500">
|
||||
Available data: {new Date(minDate).toLocaleDateString()} - {new Date(maxDate).toLocaleDateString()}
|
||||
Available data: {new Date(minDate).toLocaleDateString()} -{" "}
|
||||
{new Date(maxDate).toLocaleDateString()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -48,7 +48,7 @@ const getCountryCoordinates = (): Record<string, [number, number]> => {
|
||||
BG: [42.7339, 25.4858],
|
||||
HR: [45.1, 15.2],
|
||||
SK: [48.669, 19.699],
|
||||
SI: [46.1512, 14.9955]
|
||||
SI: [46.1512, 14.9955],
|
||||
};
|
||||
// This function now primarily returns fallbacks.
|
||||
// The actual fetching using @rapideditor/country-coder will be in the component's useEffect.
|
||||
|
||||
@ -49,7 +49,9 @@ export default function MessageViewer({ messages }: MessageViewerProps) {
|
||||
{message.role}
|
||||
</span>
|
||||
<span className="text-xs opacity-75 ml-2">
|
||||
{message.timestamp ? new Date(message.timestamp).toLocaleTimeString() : 'No timestamp'}
|
||||
{message.timestamp
|
||||
? new Date(message.timestamp).toLocaleTimeString()
|
||||
: "No timestamp"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-sm whitespace-pre-wrap">
|
||||
@ -63,13 +65,18 @@ export default function MessageViewer({ messages }: MessageViewerProps) {
|
||||
<div className="mt-4 pt-3 border-t text-sm text-gray-500">
|
||||
<div className="flex justify-between">
|
||||
<span>
|
||||
First message: {messages[0].timestamp ? new Date(messages[0].timestamp).toLocaleString() : 'No timestamp'}
|
||||
First message:{" "}
|
||||
{messages[0].timestamp
|
||||
? new Date(messages[0].timestamp).toLocaleString()
|
||||
: "No timestamp"}
|
||||
</span>
|
||||
<span>
|
||||
Last message:{" "}
|
||||
{(() => {
|
||||
const lastMessage = messages[messages.length - 1];
|
||||
return lastMessage.timestamp ? new Date(lastMessage.timestamp).toLocaleString() : 'No timestamp';
|
||||
return lastMessage.timestamp
|
||||
? new Date(lastMessage.timestamp).toLocaleString()
|
||||
: "No timestamp";
|
||||
})()}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -1,88 +0,0 @@
|
||||
"use client";
|
||||
|
||||
interface MetricCardProps {
|
||||
title: string;
|
||||
value: string | number | null | undefined;
|
||||
description?: string;
|
||||
icon?: React.ReactNode;
|
||||
trend?: {
|
||||
value: number;
|
||||
label?: string;
|
||||
isPositive?: boolean;
|
||||
};
|
||||
variant?: "default" | "primary" | "success" | "warning" | "danger";
|
||||
}
|
||||
|
||||
export default function MetricCard({
|
||||
title,
|
||||
value,
|
||||
description,
|
||||
icon,
|
||||
trend,
|
||||
variant = "default",
|
||||
}: MetricCardProps) {
|
||||
// Determine background and text colors based on variant
|
||||
const getVariantClasses = () => {
|
||||
switch (variant) {
|
||||
case "primary":
|
||||
return "bg-blue-50 border-blue-200";
|
||||
case "success":
|
||||
return "bg-green-50 border-green-200";
|
||||
case "warning":
|
||||
return "bg-amber-50 border-amber-200";
|
||||
case "danger":
|
||||
return "bg-red-50 border-red-200";
|
||||
default:
|
||||
return "bg-white border-gray-200";
|
||||
}
|
||||
};
|
||||
|
||||
const getIconClasses = () => {
|
||||
switch (variant) {
|
||||
case "primary":
|
||||
return "bg-blue-100 text-blue-600";
|
||||
case "success":
|
||||
return "bg-green-100 text-green-600";
|
||||
case "warning":
|
||||
return "bg-amber-100 text-amber-600";
|
||||
case "danger":
|
||||
return "bg-red-100 text-red-600";
|
||||
default:
|
||||
return "bg-gray-100 text-gray-600";
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`rounded-xl border shadow-sm p-6 ${getVariantClasses()}`}>
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-500">{title}</p>
|
||||
<div className="mt-2 flex items-baseline">
|
||||
<p className="text-2xl font-semibold">{value ?? "-"}</p>
|
||||
{trend && (
|
||||
<span
|
||||
className={`ml-2 text-sm font-medium ${
|
||||
trend.isPositive !== false ? "text-green-600" : "text-red-600"
|
||||
}`}
|
||||
>
|
||||
{trend.isPositive !== false ? "↑" : "↓"}{" "}
|
||||
{Math.abs(trend.value).toFixed(1)}%
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{description && (
|
||||
<p className="mt-1 text-xs text-gray-500">{description}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{icon && (
|
||||
<div
|
||||
className={`flex h-12 w-12 rounded-full ${getIconClasses()} items-center justify-center`}
|
||||
>
|
||||
<span className="text-xl">{icon}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -68,8 +68,10 @@ export default function ResponseTimeDistribution({
|
||||
|
||||
// Determine color based on response time
|
||||
let color;
|
||||
if (i <= 2) color = "hsl(var(--chart-1))"; // Green for fast
|
||||
else if (i <= 5) color = "hsl(var(--chart-4))"; // Yellow for medium
|
||||
if (i <= 2)
|
||||
color = "hsl(var(--chart-1))"; // Green for fast
|
||||
else if (i <= 5)
|
||||
color = "hsl(var(--chart-4))"; // Yellow for medium
|
||||
else color = "hsl(var(--chart-3))"; // Red for slow
|
||||
|
||||
return {
|
||||
@ -82,10 +84,13 @@ export default function ResponseTimeDistribution({
|
||||
return (
|
||||
<div className="h-64">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart data={chartData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
|
||||
<CartesianGrid
|
||||
strokeDasharray="3 3"
|
||||
stroke="hsl(var(--border))"
|
||||
<BarChart
|
||||
data={chartData}
|
||||
margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
|
||||
>
|
||||
<CartesianGrid
|
||||
strokeDasharray="3 3"
|
||||
stroke="hsl(var(--border))"
|
||||
strokeOpacity={0.3}
|
||||
/>
|
||||
<XAxis
|
||||
@ -100,57 +105,53 @@ export default function ResponseTimeDistribution({
|
||||
fontSize={12}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
label={{
|
||||
value: 'Number of Responses',
|
||||
angle: -90,
|
||||
position: 'insideLeft',
|
||||
style: { textAnchor: 'middle' }
|
||||
label={{
|
||||
value: "Number of Responses",
|
||||
angle: -90,
|
||||
position: "insideLeft",
|
||||
style: { textAnchor: "middle" },
|
||||
}}
|
||||
/>
|
||||
<Tooltip content={<CustomTooltip />} />
|
||||
|
||||
<Bar
|
||||
dataKey="value"
|
||||
radius={[4, 4, 0, 0]}
|
||||
fill="hsl(var(--chart-1))"
|
||||
>
|
||||
|
||||
<Bar dataKey="value" radius={[4, 4, 0, 0]} fill="hsl(var(--chart-1))">
|
||||
{chartData.map((entry, index) => (
|
||||
<Bar key={`cell-${index}`} fill={entry.color} />
|
||||
))}
|
||||
</Bar>
|
||||
|
||||
{/* Average line */}
|
||||
<ReferenceLine
|
||||
x={Math.floor(average)}
|
||||
stroke="hsl(var(--primary))"
|
||||
<ReferenceLine
|
||||
x={Math.floor(average)}
|
||||
stroke="hsl(var(--primary))"
|
||||
strokeWidth={2}
|
||||
strokeDasharray="5 5"
|
||||
label={{
|
||||
value: `Avg: ${average.toFixed(1)}s`,
|
||||
label={{
|
||||
value: `Avg: ${average.toFixed(1)}s`,
|
||||
position: "top" as const,
|
||||
style: {
|
||||
style: {
|
||||
fill: "hsl(var(--primary))",
|
||||
fontSize: "12px",
|
||||
fontWeight: "500"
|
||||
}
|
||||
fontWeight: "500",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Target line (if provided) */}
|
||||
{targetResponseTime && (
|
||||
<ReferenceLine
|
||||
x={Math.floor(targetResponseTime)}
|
||||
stroke="hsl(var(--chart-2))"
|
||||
<ReferenceLine
|
||||
x={Math.floor(targetResponseTime)}
|
||||
stroke="hsl(var(--chart-2))"
|
||||
strokeWidth={2}
|
||||
strokeDasharray="3 3"
|
||||
label={{
|
||||
value: `Target: ${targetResponseTime}s`,
|
||||
label={{
|
||||
value: `Target: ${targetResponseTime}s`,
|
||||
position: "top" as const,
|
||||
style: {
|
||||
style: {
|
||||
fill: "hsl(var(--chart-2))",
|
||||
fontSize: "12px",
|
||||
fontWeight: "500"
|
||||
}
|
||||
fontWeight: "500",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
@ -90,7 +90,6 @@ export default function SessionDetails({ session }: SessionDetailsProps) {
|
||||
<span className="font-medium">{session.messagesSent || 0}</span>
|
||||
</div>
|
||||
|
||||
|
||||
{session.avgResponseTime !== null &&
|
||||
session.avgResponseTime !== undefined && (
|
||||
<div className="flex justify-between border-b pb-2">
|
||||
@ -132,7 +131,6 @@ export default function SessionDetails({ session }: SessionDetailsProps) {
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
{session.initialMsg && (
|
||||
<div className="border-b pb-2">
|
||||
<span className="text-gray-600 block mb-1">Initial Message:</span>
|
||||
@ -151,7 +149,6 @@ export default function SessionDetails({ session }: SessionDetailsProps) {
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
{session.fullTranscriptUrl && (
|
||||
<div className="flex justify-between pt-2">
|
||||
<span className="text-gray-600">Transcript:</span>
|
||||
|
||||
@ -1,14 +1,17 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import React from 'react';
|
||||
import { TopQuestion } from '../lib/types';
|
||||
import React from "react";
|
||||
import { TopQuestion } from "../lib/types";
|
||||
|
||||
interface TopQuestionsChartProps {
|
||||
data: TopQuestion[];
|
||||
title?: string;
|
||||
}
|
||||
|
||||
export default function TopQuestionsChart({ data, title = "Top 5 Asked Questions" }: TopQuestionsChartProps) {
|
||||
export default function TopQuestionsChart({
|
||||
data,
|
||||
title = "Top 5 Asked Questions",
|
||||
}: TopQuestionsChartProps) {
|
||||
if (!data || data.length === 0) {
|
||||
return (
|
||||
<div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
|
||||
@ -21,7 +24,7 @@ export default function TopQuestionsChart({ data, title = "Top 5 Asked Questions
|
||||
}
|
||||
|
||||
// Find the maximum count to calculate relative bar widths
|
||||
const maxCount = Math.max(...data.map(q => q.count));
|
||||
const maxCount = Math.max(...data.map((q) => q.count));
|
||||
|
||||
return (
|
||||
<div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
|
||||
@ -29,7 +32,8 @@ export default function TopQuestionsChart({ data, title = "Top 5 Asked Questions
|
||||
|
||||
<div className="space-y-4">
|
||||
{data.map((question, index) => {
|
||||
const percentage = maxCount > 0 ? (question.count / maxCount) * 100 : 0;
|
||||
const percentage =
|
||||
maxCount > 0 ? (question.count / maxCount) * 100 : 0;
|
||||
|
||||
return (
|
||||
<div key={index} className="relative">
|
||||
|
||||
@ -61,10 +61,13 @@ export default function ModernBarChart({
|
||||
)}
|
||||
<CardContent>
|
||||
<ResponsiveContainer width="100%" height={height}>
|
||||
<BarChart data={data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
|
||||
<CartesianGrid
|
||||
strokeDasharray="3 3"
|
||||
stroke="hsl(var(--border))"
|
||||
<BarChart
|
||||
data={data}
|
||||
margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
|
||||
>
|
||||
<CartesianGrid
|
||||
strokeDasharray="3 3"
|
||||
stroke="hsl(var(--border))"
|
||||
strokeOpacity={0.3}
|
||||
/>
|
||||
<XAxis
|
||||
@ -84,14 +87,14 @@ export default function ModernBarChart({
|
||||
axisLine={false}
|
||||
/>
|
||||
<Tooltip content={<CustomTooltip />} />
|
||||
<Bar
|
||||
dataKey={dataKey}
|
||||
<Bar
|
||||
dataKey={dataKey}
|
||||
radius={[4, 4, 0, 0]}
|
||||
className="transition-all duration-200"
|
||||
>
|
||||
{data.map((entry, index) => (
|
||||
<Cell
|
||||
key={`cell-${index}`}
|
||||
<Cell
|
||||
key={`cell-${index}`}
|
||||
fill={colors[index % colors.length]}
|
||||
className="hover:opacity-80"
|
||||
/>
|
||||
|
||||
@ -1,6 +1,13 @@
|
||||
"use client";
|
||||
|
||||
import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip, Legend } from "recharts";
|
||||
import {
|
||||
PieChart,
|
||||
Pie,
|
||||
Cell,
|
||||
ResponsiveContainer,
|
||||
Tooltip,
|
||||
Legend,
|
||||
} from "recharts";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
|
||||
interface DonutChartProps {
|
||||
@ -22,9 +29,7 @@ const CustomTooltip = ({ active, payload }: any) => {
|
||||
<div className="rounded-lg border bg-background p-3 shadow-md">
|
||||
<p className="text-sm font-medium">{data.name}</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
<span className="font-medium text-foreground">
|
||||
{data.value}
|
||||
</span>{" "}
|
||||
<span className="font-medium text-foreground">{data.value}</span>{" "}
|
||||
sessions ({((data.value / data.payload.total) * 100).toFixed(1)}%)
|
||||
</p>
|
||||
</div>
|
||||
@ -77,7 +82,7 @@ export default function ModernDonutChart({
|
||||
className,
|
||||
}: DonutChartProps) {
|
||||
const total = data.reduce((sum, item) => sum + item.value, 0);
|
||||
const dataWithTotal = data.map(item => ({ ...item, total }));
|
||||
const dataWithTotal = data.map((item) => ({ ...item, total }));
|
||||
|
||||
return (
|
||||
<Card className={className}>
|
||||
|
||||
@ -60,7 +60,10 @@ export default function ModernLineChart({
|
||||
)}
|
||||
<CardContent>
|
||||
<ResponsiveContainer width="100%" height={height}>
|
||||
<ChartComponent data={data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
|
||||
<ChartComponent
|
||||
data={data}
|
||||
margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
|
||||
>
|
||||
<defs>
|
||||
{gradient && (
|
||||
<linearGradient id="colorGradient" x1="0" y1="0" x2="0" y2="1">
|
||||
@ -69,9 +72,9 @@ export default function ModernLineChart({
|
||||
</linearGradient>
|
||||
)}
|
||||
</defs>
|
||||
<CartesianGrid
|
||||
strokeDasharray="3 3"
|
||||
stroke="hsl(var(--border))"
|
||||
<CartesianGrid
|
||||
strokeDasharray="3 3"
|
||||
stroke="hsl(var(--border))"
|
||||
strokeOpacity={0.3}
|
||||
/>
|
||||
<XAxis
|
||||
@ -88,7 +91,7 @@ export default function ModernLineChart({
|
||||
axisLine={false}
|
||||
/>
|
||||
<Tooltip content={<CustomTooltip />} />
|
||||
|
||||
|
||||
{gradient ? (
|
||||
<Area
|
||||
type="monotone"
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import * as React from "react"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import * as React from "react";
|
||||
import { Slot } from "@radix-ui/react-slot";
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const badgeVariants = cva(
|
||||
"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
|
||||
@ -23,7 +23,7 @@ const badgeVariants = cva(
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
function Badge({
|
||||
className,
|
||||
@ -32,7 +32,7 @@ function Badge({
|
||||
...props
|
||||
}: React.ComponentProps<"span"> &
|
||||
VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
|
||||
const Comp = asChild ? Slot : "span"
|
||||
const Comp = asChild ? Slot : "span";
|
||||
|
||||
return (
|
||||
<Comp
|
||||
@ -40,7 +40,7 @@ function Badge({
|
||||
className={cn(badgeVariants({ variant }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export { Badge, badgeVariants }
|
||||
export { Badge, badgeVariants };
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import * as React from "react"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import * as React from "react";
|
||||
import { Slot } from "@radix-ui/react-slot";
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||
@ -33,7 +33,7 @@ const buttonVariants = cva(
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
function Button({
|
||||
className,
|
||||
@ -43,9 +43,9 @@ function Button({
|
||||
...props
|
||||
}: React.ComponentProps<"button"> &
|
||||
VariantProps<typeof buttonVariants> & {
|
||||
asChild?: boolean
|
||||
asChild?: boolean;
|
||||
}) {
|
||||
const Comp = asChild ? Slot : "button"
|
||||
const Comp = asChild ? Slot : "button";
|
||||
|
||||
return (
|
||||
<Comp
|
||||
@ -53,7 +53,7 @@ function Button({
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export { Button, buttonVariants }
|
||||
export { Button, buttonVariants };
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import * as React from "react"
|
||||
import * as React from "react";
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
function Card({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
@ -12,7 +12,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
@ -25,7 +25,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
@ -35,7 +35,7 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
className={cn("leading-none font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
||||
@ -45,7 +45,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
|
||||
@ -58,7 +58,7 @@ function CardAction({ className, ...props }: React.ComponentProps<"div">) {
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
@ -68,7 +68,7 @@ function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
className={cn("px-6", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
@ -78,7 +78,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
@ -89,4 +89,4 @@ export {
|
||||
CardAction,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
"use client"
|
||||
"use client";
|
||||
|
||||
import * as React from "react"
|
||||
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
|
||||
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
|
||||
import * as React from "react";
|
||||
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
|
||||
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
function DropdownMenu({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
|
||||
return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
|
||||
return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
|
||||
}
|
||||
|
||||
function DropdownMenuPortal({
|
||||
@ -17,7 +17,7 @@ function DropdownMenuPortal({
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuTrigger({
|
||||
@ -28,7 +28,7 @@ function DropdownMenuTrigger({
|
||||
data-slot="dropdown-menu-trigger"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuContent({
|
||||
@ -48,7 +48,7 @@ function DropdownMenuContent({
|
||||
{...props}
|
||||
/>
|
||||
</DropdownMenuPrimitive.Portal>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuGroup({
|
||||
@ -56,7 +56,7 @@ function DropdownMenuGroup({
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuItem({
|
||||
@ -65,8 +65,8 @@ function DropdownMenuItem({
|
||||
variant = "default",
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
|
||||
inset?: boolean
|
||||
variant?: "default" | "destructive"
|
||||
inset?: boolean;
|
||||
variant?: "default" | "destructive";
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Item
|
||||
@ -79,7 +79,7 @@ function DropdownMenuItem({
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuCheckboxItem({
|
||||
@ -105,7 +105,7 @@ function DropdownMenuCheckboxItem({
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.CheckboxItem>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuRadioGroup({
|
||||
@ -116,7 +116,7 @@ function DropdownMenuRadioGroup({
|
||||
data-slot="dropdown-menu-radio-group"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuRadioItem({
|
||||
@ -140,7 +140,7 @@ function DropdownMenuRadioItem({
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.RadioItem>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuLabel({
|
||||
@ -148,7 +148,7 @@ function DropdownMenuLabel({
|
||||
inset,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
|
||||
inset?: boolean
|
||||
inset?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Label
|
||||
@ -160,7 +160,7 @@ function DropdownMenuLabel({
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuSeparator({
|
||||
@ -173,7 +173,7 @@ function DropdownMenuSeparator({
|
||||
className={cn("bg-border -mx-1 my-1 h-px", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuShortcut({
|
||||
@ -189,13 +189,13 @@ function DropdownMenuShortcut({
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuSub({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
|
||||
return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
|
||||
return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
|
||||
}
|
||||
|
||||
function DropdownMenuSubTrigger({
|
||||
@ -204,7 +204,7 @@ function DropdownMenuSubTrigger({
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
|
||||
inset?: boolean
|
||||
inset?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.SubTrigger
|
||||
@ -219,7 +219,7 @@ function DropdownMenuSubTrigger({
|
||||
{children}
|
||||
<ChevronRightIcon className="ml-auto size-4" />
|
||||
</DropdownMenuPrimitive.SubTrigger>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuSubContent({
|
||||
@ -235,7 +235,7 @@ function DropdownMenuSubContent({
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
@ -254,4 +254,4 @@ export {
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubTrigger,
|
||||
DropdownMenuSubContent,
|
||||
}
|
||||
};
|
||||
|
||||
@ -80,11 +80,11 @@ export default function MetricCard({
|
||||
|
||||
const getTrendIcon = () => {
|
||||
if (!trend) return null;
|
||||
|
||||
|
||||
if (trend.value === 0) {
|
||||
return <Minus className="h-3 w-3" />;
|
||||
}
|
||||
|
||||
|
||||
return trend.isPositive !== false ? (
|
||||
<TrendingUp className="h-3 w-3" />
|
||||
) : (
|
||||
@ -94,11 +94,13 @@ export default function MetricCard({
|
||||
|
||||
const getTrendColor = () => {
|
||||
if (!trend || trend.value === 0) return "text-muted-foreground";
|
||||
return trend.isPositive !== false ? "text-green-600 dark:text-green-400" : "text-red-600 dark:text-red-400";
|
||||
return trend.isPositive !== false
|
||||
? "text-green-600 dark:text-green-400"
|
||||
: "text-red-600 dark:text-red-400";
|
||||
};
|
||||
|
||||
return (
|
||||
<Card
|
||||
<Card
|
||||
className={cn(
|
||||
"relative overflow-hidden transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5",
|
||||
getVariantClasses(),
|
||||
@ -107,7 +109,7 @@ export default function MetricCard({
|
||||
>
|
||||
{/* Subtle gradient overlay */}
|
||||
<div className="absolute inset-0 bg-linear-to-br from-white/50 to-transparent dark:from-white/5 pointer-events-none" />
|
||||
|
||||
|
||||
<CardHeader className="pb-3 relative">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="space-y-1">
|
||||
@ -115,9 +117,7 @@ export default function MetricCard({
|
||||
{title}
|
||||
</p>
|
||||
{description && (
|
||||
<p className="text-xs text-muted-foreground/80">
|
||||
{description}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground/80">{description}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -137,13 +137,11 @@ export default function MetricCard({
|
||||
<CardContent className="relative">
|
||||
<div className="flex items-end justify-between">
|
||||
<div className="space-y-1">
|
||||
<p className="text-2xl font-bold tracking-tight">
|
||||
{value ?? "—"}
|
||||
</p>
|
||||
|
||||
<p className="text-2xl font-bold tracking-tight">{value ?? "—"}</p>
|
||||
|
||||
{trend && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className={cn(
|
||||
"text-xs font-medium px-2 py-0.5 gap-1",
|
||||
getTrendColor(),
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
"use client"
|
||||
"use client";
|
||||
|
||||
import * as React from "react"
|
||||
import * as SeparatorPrimitive from "@radix-ui/react-separator"
|
||||
import * as React from "react";
|
||||
import * as SeparatorPrimitive from "@radix-ui/react-separator";
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
function Separator({
|
||||
className,
|
||||
@ -22,7 +22,7 @@ function Separator({
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export { Separator }
|
||||
export { Separator };
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
@ -7,7 +7,7 @@ function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
|
||||
className={cn("bg-accent animate-pulse rounded-md", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export { Skeleton }
|
||||
export { Skeleton };
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
"use client"
|
||||
"use client";
|
||||
|
||||
import * as React from "react"
|
||||
import * as TooltipPrimitive from "@radix-ui/react-tooltip"
|
||||
import * as React from "react";
|
||||
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
function TooltipProvider({
|
||||
delayDuration = 0,
|
||||
@ -15,7 +15,7 @@ function TooltipProvider({
|
||||
delayDuration={delayDuration}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function Tooltip({
|
||||
@ -25,13 +25,13 @@ function Tooltip({
|
||||
<TooltipProvider>
|
||||
<TooltipPrimitive.Root data-slot="tooltip" {...props} />
|
||||
</TooltipProvider>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function TooltipTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
|
||||
return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
|
||||
return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
|
||||
}
|
||||
|
||||
function TooltipContent({
|
||||
@ -55,7 +55,7 @@ function TooltipContent({
|
||||
<TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]" />
|
||||
</TooltipPrimitive.Content>
|
||||
</TooltipPrimitive.Portal>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
|
||||
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
|
||||
|
||||
Reference in New Issue
Block a user