Kyle Pope
8945295e2a
- Calendar: move view selector left, inline EventDetailPanel with view/edit/create modes, fix resize on panel close, remove all Sheet/Dialog usage - Todos: add TodoDetailPanel with inline view/edit/create, replace CategoryFilterBar with shared component (drag-and-drop categories), 55/45 split layout - Reminders: add ReminderDetailPanel with inline view/edit/create, 55/45 split layout - Dashboard: all widget items now deep-link to destination page AND open the relevant item's detail panel (events, todos, reminders) - Fix TS errors: unused imports, undefined→null coalescing Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
65 lines
2.2 KiB
TypeScript
65 lines
2.2 KiB
TypeScript
import { format } from 'date-fns';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import { Calendar } from 'lucide-react';
|
||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||
|
||
interface DashboardEvent {
|
||
id: number;
|
||
title: string;
|
||
start_datetime: string;
|
||
end_datetime: string;
|
||
all_day: boolean;
|
||
color?: string;
|
||
is_starred?: boolean;
|
||
}
|
||
|
||
interface CalendarWidgetProps {
|
||
events: DashboardEvent[];
|
||
}
|
||
|
||
export default function CalendarWidget({ events }: CalendarWidgetProps) {
|
||
const navigate = useNavigate();
|
||
const todayStr = format(new Date(), 'yyyy-MM-dd');
|
||
|
||
return (
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center gap-2">
|
||
<div className="p-1.5 rounded-md bg-purple-500/10">
|
||
<Calendar className="h-4 w-4 text-purple-400" />
|
||
</div>
|
||
Today's Events
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
{events.length === 0 ? (
|
||
<p className="text-sm text-muted-foreground text-center py-6">
|
||
No events today
|
||
</p>
|
||
) : (
|
||
<div className="space-y-0.5">
|
||
{events.map((event) => (
|
||
<div
|
||
key={event.id}
|
||
onClick={() => navigate('/calendar', { state: { date: todayStr, view: 'timeGridDay', eventId: event.id } })}
|
||
className="flex items-center gap-2 py-1.5 px-2 rounded-md hover:bg-white/5 transition-colors duration-150 cursor-pointer"
|
||
>
|
||
<div
|
||
className="w-1.5 h-1.5 rounded-full shrink-0"
|
||
style={{ backgroundColor: event.color || 'hsl(var(--primary))' }}
|
||
/>
|
||
<span className="text-[11px] text-muted-foreground shrink-0 whitespace-nowrap tabular-nums">
|
||
{event.all_day
|
||
? 'All day'
|
||
: `${format(new Date(event.start_datetime), 'h:mm a')} – ${format(new Date(event.end_datetime), 'h:mm a')}`}
|
||
</span>
|
||
<span className="text-sm font-medium truncate">{event.title}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
);
|
||
}
|