mirror of
https://github.com/marcogll/AnchorOS.git
synced 2026-03-15 11:24:26 +00:00
feat: Implementar HQ Dashboard
- Crear página principal de HQ Dashboard - Mostrar calendario diario con reservas - Listado de reservas con información detallada - Vista de disponibilidad de staff - PATCH endpoint para actualizar estado de reservas - Integrar con API de disponibilidad y reservas
This commit is contained in:
Marco Gallegos
53
app/api/bookings/[id]/route.ts
Normal file
53
app/api/bookings/[id]/route.ts
Normal file
@@ -0,0 +1,53 @@
|
||||
import { NextRequest, NextResponse } from 'next/server'
|
||||
import { supabaseAdmin } from '@/lib/supabase/client'
|
||||
|
||||
export async function PATCH(
|
||||
request: NextRequest,
|
||||
{ params }: { params: { id: string } }
|
||||
) {
|
||||
try {
|
||||
const bookingId = params.id
|
||||
const body = await request.json()
|
||||
const { status } = body
|
||||
|
||||
if (!status) {
|
||||
return NextResponse.json(
|
||||
{ error: 'Missing required field: status' },
|
||||
{ status: 400 }
|
||||
)
|
||||
}
|
||||
|
||||
const validStatuses = ['pending', 'confirmed', 'completed', 'cancelled', 'no_show']
|
||||
if (!validStatuses.includes(status)) {
|
||||
return NextResponse.json(
|
||||
{ error: `Invalid status. Must be one of: ${validStatuses.join(', ')}` },
|
||||
{ status: 400 }
|
||||
)
|
||||
}
|
||||
|
||||
const { data: booking, error: updateError } = await supabaseAdmin
|
||||
.from('bookings')
|
||||
.update({ status })
|
||||
.eq('id', bookingId)
|
||||
.select()
|
||||
.single()
|
||||
|
||||
if (updateError || !booking) {
|
||||
return NextResponse.json(
|
||||
{ error: updateError?.message || 'Failed to update booking' },
|
||||
{ status: 400 }
|
||||
)
|
||||
}
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
booking
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Update booking error:', error)
|
||||
return NextResponse.json(
|
||||
{ error: 'Internal server error' },
|
||||
{ status: 500 }
|
||||
)
|
||||
}
|
||||
}
|
||||
403
app/hq/page.tsx
Normal file
403
app/hq/page.tsx
Normal file
@@ -0,0 +1,403 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { format } from 'date-fns'
|
||||
import { Calendar, Clock, MapPin, Users, CheckCircle, XCircle, AlertCircle } from 'lucide-react'
|
||||
|
||||
interface Booking {
|
||||
id: string
|
||||
short_id: string
|
||||
status: string
|
||||
start_time_utc: string
|
||||
end_time_utc: string
|
||||
notes: string | null
|
||||
is_paid: boolean
|
||||
customer: {
|
||||
id: string
|
||||
email: string
|
||||
first_name: string | null
|
||||
last_name: string | null
|
||||
phone: string | null
|
||||
}
|
||||
service: {
|
||||
id: string
|
||||
name: string
|
||||
duration_minutes: number
|
||||
base_price: number
|
||||
}
|
||||
resource?: {
|
||||
id: string
|
||||
name: string
|
||||
type: string
|
||||
}
|
||||
staff: {
|
||||
id: string
|
||||
display_name: string
|
||||
}
|
||||
location: {
|
||||
id: string
|
||||
name: string
|
||||
}
|
||||
}
|
||||
|
||||
interface Location {
|
||||
id: string
|
||||
name: string
|
||||
}
|
||||
|
||||
interface Staff {
|
||||
staff_id: string
|
||||
staff_name: string
|
||||
role: string
|
||||
work_hours_start: string | null
|
||||
work_hours_end: string | null
|
||||
work_days: string | null
|
||||
location_id: string
|
||||
}
|
||||
|
||||
export default function HQDashboard() {
|
||||
const [locations, setLocations] = useState<Location[]>([])
|
||||
const [staffList, setStaffList] = useState<Staff[]>([])
|
||||
const [bookings, setBookings] = useState<Booking[]>([])
|
||||
const [selectedLocation, setSelectedLocation] = useState<string>('')
|
||||
const [selectedDate, setSelectedDate] = useState(format(new Date(), 'yyyy-MM-dd'))
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [activeTab, setActiveTab] = useState<'calendar' | 'bookings' | 'staff'>('calendar')
|
||||
|
||||
useEffect(() => {
|
||||
fetchLocations()
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedLocation) {
|
||||
fetchBookings()
|
||||
fetchStaff()
|
||||
}
|
||||
}, [selectedLocation, selectedDate])
|
||||
|
||||
const fetchLocations = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/admin/locations', {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${localStorage.getItem('admin_enrollment_key') || ''}`
|
||||
}
|
||||
})
|
||||
const data = await response.json()
|
||||
if (data.locations) {
|
||||
setLocations(data.locations)
|
||||
if (data.locations.length > 0) {
|
||||
setSelectedLocation(data.locations[0].id)
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch locations:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const fetchBookings = async () => {
|
||||
if (!selectedLocation) return
|
||||
|
||||
setLoading(true)
|
||||
try {
|
||||
const startDate = new Date(selectedDate).toISOString()
|
||||
const endDate = new Date(selectedDate)
|
||||
endDate.setDate(endDate.getDate() + 1)
|
||||
|
||||
const response = await fetch(`/api/bookings?location_id=${selectedLocation}`, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${localStorage.getItem('admin_enrollment_key') || ''}`
|
||||
}
|
||||
})
|
||||
const data = await response.json()
|
||||
if (data.bookings) {
|
||||
const filtered = data.bookings.filter((b: Booking) => {
|
||||
const bookingDate = new Date(b.start_time_utc)
|
||||
return bookingDate >= new Date(startDate) && bookingDate < new Date(endDate)
|
||||
})
|
||||
setBookings(filtered)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch bookings:', error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const fetchStaff = async () => {
|
||||
if (!selectedLocation) return
|
||||
|
||||
try {
|
||||
const startTime = new Date(selectedDate + 'T00:00:00.000Z').toISOString()
|
||||
const endTime = new Date(selectedDate + 'T23:59:59.999Z').toISOString()
|
||||
|
||||
const response = await fetch(`/api/availability/staff?location_id=${selectedLocation}&start_time_utc=${startTime}&end_time_utc=${endTime}`, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${localStorage.getItem('admin_enrollment_key') || ''}`
|
||||
}
|
||||
})
|
||||
const data = await response.json()
|
||||
if (data.staff) {
|
||||
setStaffList(data.staff)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch staff:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const updateBookingStatus = async (bookingId: string, newStatus: string) => {
|
||||
try {
|
||||
const response = await fetch(`/api/bookings/${bookingId}`, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${localStorage.getItem('admin_enrollment_key') || ''}`
|
||||
},
|
||||
body: JSON.stringify({ status: newStatus })
|
||||
})
|
||||
|
||||
if (response.ok) {
|
||||
setBookings(bookings.map(b =>
|
||||
b.id === bookingId ? { ...b, status: newStatus } : b
|
||||
))
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to update booking:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const getStatusBadge = (status: string) => {
|
||||
const config = {
|
||||
pending: { icon: AlertCircle, label: 'Pending', color: 'bg-yellow-100 text-yellow-800' },
|
||||
confirmed: { icon: Clock, label: 'Confirmed', color: 'bg-blue-100 text-blue-800' },
|
||||
completed: { icon: CheckCircle, label: 'Completed', color: 'bg-green-100 text-green-800' },
|
||||
cancelled: { icon: XCircle, label: 'Cancelled', color: 'bg-red-100 text-red-800' },
|
||||
no_show: { icon: XCircle, label: 'No Show', color: 'bg-gray-100 text-gray-800' }
|
||||
}
|
||||
|
||||
const { icon: Icon, label, color } = config[status as keyof typeof config] || config.pending
|
||||
|
||||
return (
|
||||
<Badge className={color}>
|
||||
<Icon className="w-3 h-3 mr-1" />
|
||||
{label}
|
||||
</Badge>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-gray-100 p-4">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<header className="mb-8">
|
||||
<h1 className="text-4xl font-bold text-gray-900 mb-2">
|
||||
HQ Dashboard
|
||||
</h1>
|
||||
<p className="text-gray-600">
|
||||
Operations management and scheduling
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<div className="mb-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label htmlFor="location">Location</Label>
|
||||
<Select onValueChange={setSelectedLocation} value={selectedLocation}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select location" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{locations.map((loc) => (
|
||||
<SelectItem key={loc.id} value={loc.id}>
|
||||
{loc.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="date">Date</Label>
|
||||
<Input
|
||||
id="date"
|
||||
type="date"
|
||||
value={selectedDate}
|
||||
onChange={(e) => setSelectedDate(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as any)} className="space-y-6">
|
||||
<TabsList className="grid w-full grid-cols-3">
|
||||
<TabsTrigger value="calendar">Calendar</TabsTrigger>
|
||||
<TabsTrigger value="bookings">Bookings</TabsTrigger>
|
||||
<TabsTrigger value="staff">Staff</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="calendar" className="space-y-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Daily Schedule</CardTitle>
|
||||
<CardDescription>
|
||||
{loading ? 'Loading...' : `${bookings.length} bookings for ${format(new Date(selectedDate), 'PPP')}`}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{bookings.length === 0 ? (
|
||||
<div className="text-center py-8 text-gray-500">
|
||||
No bookings for this date
|
||||
</div>
|
||||
) : (
|
||||
bookings
|
||||
.sort((a, b) => new Date(a.start_time_utc).getTime() - new Date(b.start_time_utc).getTime())
|
||||
.map((booking) => (
|
||||
<div key={booking.id} className="p-4 border rounded-lg hover:shadow-md transition-shadow">
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
{getStatusBadge(booking.status)}
|
||||
<span className="text-sm text-gray-500">
|
||||
{format(new Date(booking.start_time_utc), 'HH:mm')} - {format(new Date(booking.end_time_utc), 'HH:mm')}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="font-semibold text-lg">{booking.service.name}</h3>
|
||||
<p className="text-sm text-gray-600 mt-1">
|
||||
{booking.customer.first_name} {booking.customer.last_name} ({booking.customer.email})
|
||||
</p>
|
||||
<div className="flex items-center gap-4 mt-2 text-sm text-gray-500">
|
||||
<div className="flex items-center gap-1">
|
||||
<Users className="w-4 h-4" />
|
||||
{booking.staff.display_name}
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<MapPin className="w-4 h-4" />
|
||||
{booking.resource?.name || 'Not assigned'}
|
||||
</div>
|
||||
</div>
|
||||
{booking.notes && (
|
||||
<p className="text-sm text-gray-500 mt-2 italic">
|
||||
Note: {booking.notes}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-lg font-semibold">
|
||||
${booking.service.base_price.toFixed(2)}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
{booking.service.duration_minutes} min
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="bookings" className="space-y-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Bookings List</CardTitle>
|
||||
<CardDescription>
|
||||
All bookings for selected date
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{bookings.length === 0 ? (
|
||||
<div className="text-center py-8 text-gray-500">
|
||||
No bookings found
|
||||
</div>
|
||||
) : (
|
||||
bookings.map((booking) => (
|
||||
<div key={booking.id} className="p-4 border rounded-lg hover:shadow-md transition-shadow">
|
||||
<div className="flex justify-between items-start">
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Badge className="bg-slate-100 text-slate-800">
|
||||
{booking.short_id}
|
||||
</Badge>
|
||||
{getStatusBadge(booking.status)}
|
||||
</div>
|
||||
<h3 className="font-semibold">{booking.service.name}</h3>
|
||||
<p className="text-sm text-gray-600">
|
||||
{booking.customer.first_name} {booking.customer.last_name}
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-sm text-gray-500">
|
||||
{format(new Date(booking.start_time_utc), 'HH:mm')}
|
||||
</p>
|
||||
<p className="text-sm text-gray-500">
|
||||
{booking.staff.display_name}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="staff" className="space-y-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Staff Availability</CardTitle>
|
||||
<CardDescription>
|
||||
Available staff for selected date
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{staffList.length === 0 ? (
|
||||
<div className="text-center py-8 text-gray-500">
|
||||
No staff available
|
||||
</div>
|
||||
) : (
|
||||
staffList.map((staff) => (
|
||||
<div key={staff.staff_id} className="p-4 border rounded-lg hover:shadow-md transition-shadow">
|
||||
<div className="flex justify-between items-start">
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<h3 className="font-semibold">{staff.staff_name}</h3>
|
||||
<Badge variant="outline">
|
||||
{staff.role}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-sm text-gray-500">
|
||||
<div className="flex items-center gap-1">
|
||||
<Clock className="w-4 h-4" />
|
||||
{staff.work_hours_start || 'N/A'} - {staff.work_hours_end || 'N/A'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<Badge className="bg-green-100 text-green-800">
|
||||
Available
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user