consultoria-as/app-padel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(dashboard): add dashboard with statistics

Browse Source 
- Add dashboard stats API endpoint with key metrics
- Add stat-card component for displaying metrics
- Add occupancy-chart component for court occupancy visualization
- Add recent-bookings component for today's bookings list
- Add quick-actions component for common admin actions
- Update dashboard page with full implementation

Stats include: today's bookings, revenue, occupancy rate,
active members, pending bookings, and upcoming tournaments.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Ivan
2026-02-01 07:31:23 +00:00
parent 973588e861
commit 83fc48d7df
7 changed files with 1314 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

201
apps/web/components/dashboard/occupancy-chart.tsx Normal file
View File

@@ -0,0 +1,201 @@
"use client";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { cn } from "@/lib/utils";
interface CourtOccupancy {
courtId: string;
courtName: string;
availableHours: number;
bookedHours: number;
occupancyPercent: number;
}
interface OccupancyChartProps {
data: CourtOccupancy[];
isLoading?: boolean;
}
export function OccupancyChart({ data, isLoading = false }: OccupancyChartProps) {
if (isLoading) {
return <OccupancyChartSkeleton />;
}
if (data.length === 0) {
return (
<Card>
<CardHeader className="pb-2">
<CardTitle className="text-lg flex items-center gap-2">
<svg
className="w-5 h-5 text-primary-500"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
/>
</svg>
Ocupacion de Canchas
</CardTitle>
</CardHeader>
<CardContent>
<div className="flex flex-col items-center justify-center py-8 text-primary-500">
<svg
className="w-12 h-12 mb-2 opacity-50"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M20 12H4M12 20V4"
/>
</svg>
<p className="text-sm">No hay canchas configuradas</p>
</div>
</CardContent>
</Card>
);
}
// Calculate overall occupancy
const totalAvailable = data.reduce((sum, c) => sum + c.availableHours, 0);
const totalBooked = data.reduce((sum, c) => sum + c.bookedHours, 0);
const overallOccupancy = totalAvailable > 0
? Math.round((totalBooked / totalAvailable) * 100)
: 0;
return (
<Card>
<CardHeader className="pb-2">
<div className="flex items-center justify-between">
<CardTitle className="text-lg flex items-center gap-2">
<svg
className="w-5 h-5 text-primary-500"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
/>
</svg>
Ocupacion de Canchas
</CardTitle>
<div className="flex items-center gap-2">
<span
className={cn(
"text-2xl font-bold",
overallOccupancy >= 80
? "text-green-600"
: overallOccupancy >= 50
? "text-blue-600"
: "text-primary-600"
)}
>
{overallOccupancy}%
</span>
<span className="text-sm text-primary-500">total</span>
</div>
</div>
</CardHeader>
<CardContent>
<div className="space-y-4">
{data.map((court) => (
<div key={court.courtId}>
<div className="flex items-center justify-between mb-1">
<span className="text-sm font-medium text-primary-700">
{court.courtName}
</span>
<span className="text-sm text-primary-500">
{court.bookedHours}h / {court.availableHours}h
</span>
</div>
<div className="relative h-4 bg-gray-100 rounded-full overflow-hidden">
{/* Available bar (background) */}
<div className="absolute inset-0 bg-green-100"></div>
{/* Booked bar */}
<div
className={cn(
"absolute inset-y-0 left-0 rounded-full transition-all duration-500",
court.occupancyPercent >= 80
? "bg-blue-500"
: court.occupancyPercent >= 50
? "bg-blue-400"
: "bg-blue-300"
)}
style={{ width: `${court.occupancyPercent}%` }}
></div>
</div>
<div className="flex items-center justify-between mt-1">
<span
className={cn(
"text-xs font-medium",
court.occupancyPercent >= 80
? "text-blue-600"
: court.occupancyPercent >= 50
? "text-blue-500"
: "text-primary-500"
)}
>
{court.occupancyPercent}% ocupado
</span>
<span className="text-xs text-green-600">
{court.availableHours - court.bookedHours}h disponible
</span>
</div>
</div>
))}
</div>
{/* Legend */}
<div className="flex items-center justify-center gap-6 mt-6 pt-4 border-t border-primary-100">
<div className="flex items-center gap-2">
<div className="w-3 h-3 rounded-full bg-blue-400"></div>
<span className="text-xs text-primary-500">Ocupado</span>
</div>
<div className="flex items-center gap-2">
<div className="w-3 h-3 rounded-full bg-green-100"></div>
<span className="text-xs text-primary-500">Disponible</span>
</div>
</div>
</CardContent>
</Card>
);
}
// Loading skeleton
export function OccupancyChartSkeleton() {
return (
<Card>
<CardHeader className="pb-2">
<div className="flex items-center justify-between">
<div className="h-6 bg-primary-100 rounded w-40 animate-pulse"></div>
<div className="h-8 bg-primary-100 rounded w-16 animate-pulse"></div>
</div>
</CardHeader>
<CardContent>
<div className="space-y-4">
{[1, 2, 3].map((i) => (
<div key={i} className="animate-pulse">
<div className="flex items-center justify-between mb-1">
<div className="h-4 bg-primary-100 rounded w-24"></div>
<div className="h-4 bg-primary-100 rounded w-16"></div>
</div>
<div className="h-4 bg-primary-100 rounded-full"></div>
</div>
))}
</div>
</CardContent>
</Card>
);
}