mirror of
https://github.com/Tony0410/nextstep.git
synced 2026-05-25 13:51:40 +08:00
Initial commit: Next Step health management app
A calm, reliable app to help manage appointments, medications, and notes for chemo patients and their families. Features: - Today dashboard with next appointment and medications due - Medication tracking with multiple schedule types (fixed times, interval, weekdays, PRN) - One-tap dose logging with 5-minute undo window - Questions for doctor tracking - Family sharing with workspace model and invite links - Offline-first with IndexedDB and sync - Docker Compose deployment with Tailscale Funnel support Tech stack: - Next.js 14 (App Router) + TypeScript + Tailwind CSS - PostgreSQL + Prisma - Argon2 password hashing + session cookies - Dexie.js for IndexedDB Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Gemini Agent
164
src/app/(app)/appointments/page.tsx
Normal file
164
src/app/(app)/appointments/page.tsx
Normal file
@@ -0,0 +1,164 @@
|
||||
'use client'
|
||||
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { format, isToday, isTomorrow, parseISO, startOfDay } from 'date-fns'
|
||||
import { toZonedTime } from 'date-fns-tz'
|
||||
import { Plus, Calendar, MapPin, Clock, ChevronRight } from 'lucide-react'
|
||||
import { useLiveQuery } from 'dexie-react-hooks'
|
||||
|
||||
import { db } from '@/lib/sync'
|
||||
import { Card, LoadingState, EmptyState } from '@/components/ui'
|
||||
import { Header, PageContainer } from '@/components/layout/header'
|
||||
import { useApp } from '../provider'
|
||||
|
||||
const TIMEZONE = 'Australia/Perth'
|
||||
|
||||
export default function AppointmentsPage() {
|
||||
const router = useRouter()
|
||||
const { currentWorkspace } = useApp()
|
||||
|
||||
const appointments = useLiveQuery(
|
||||
() =>
|
||||
db.appointments
|
||||
.where('workspaceId')
|
||||
.equals(currentWorkspace.id)
|
||||
.and((a) => !a.deletedAt)
|
||||
.sortBy('datetime'),
|
||||
[currentWorkspace.id]
|
||||
)
|
||||
|
||||
// Group appointments by date
|
||||
const groupedAppointments = appointments?.reduce(
|
||||
(groups, appt) => {
|
||||
const date = toZonedTime(parseISO(appt.datetime), TIMEZONE)
|
||||
const dateKey = format(startOfDay(date), 'yyyy-MM-dd')
|
||||
|
||||
if (!groups[dateKey]) {
|
||||
groups[dateKey] = {
|
||||
date,
|
||||
appointments: [],
|
||||
}
|
||||
}
|
||||
groups[dateKey].appointments.push(appt)
|
||||
return groups
|
||||
},
|
||||
{} as Record<string, { date: Date; appointments: typeof appointments }>
|
||||
)
|
||||
|
||||
const sortedDates = Object.keys(groupedAppointments || {}).sort()
|
||||
|
||||
const formatDateHeader = (date: Date) => {
|
||||
if (isToday(date)) return 'Today'
|
||||
if (isTomorrow(date)) return 'Tomorrow'
|
||||
return format(date, 'EEEE, MMMM d')
|
||||
}
|
||||
|
||||
if (!appointments) {
|
||||
return (
|
||||
<>
|
||||
<Header
|
||||
title="Appointments"
|
||||
rightAction={{
|
||||
icon: <Plus className="w-6 h-6 text-secondary-700" />,
|
||||
label: 'Add appointment',
|
||||
onClick: () => router.push('/appointments/new'),
|
||||
}}
|
||||
/>
|
||||
<PageContainer>
|
||||
<LoadingState message="Loading appointments..." />
|
||||
</PageContainer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header
|
||||
title="Appointments"
|
||||
rightAction={{
|
||||
icon: <Plus className="w-6 h-6 text-secondary-700" />,
|
||||
label: 'Add appointment',
|
||||
onClick: () => router.push('/appointments/new'),
|
||||
}}
|
||||
/>
|
||||
<PageContainer className="pt-4">
|
||||
{appointments.length === 0 ? (
|
||||
<EmptyState
|
||||
type="appointments"
|
||||
title="No appointments"
|
||||
description="Add your upcoming appointments to keep track of them."
|
||||
action={{
|
||||
label: 'Add Appointment',
|
||||
onClick: () => router.push('/appointments/new'),
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
{sortedDates.map((dateKey) => {
|
||||
const group = groupedAppointments![dateKey]
|
||||
const isPast = group.date < startOfDay(new Date())
|
||||
|
||||
return (
|
||||
<div key={dateKey}>
|
||||
<h2
|
||||
className={`text-sm font-semibold mb-3 ${
|
||||
isPast ? 'text-secondary-400' : 'text-secondary-600'
|
||||
}`}
|
||||
>
|
||||
{formatDateHeader(group.date)}
|
||||
</h2>
|
||||
<div className="space-y-3">
|
||||
{group.appointments.map((appt) => (
|
||||
<Card
|
||||
key={appt.id}
|
||||
onClick={() => router.push(`/appointments/${appt.id}`)}
|
||||
className={`${isPast ? 'opacity-60' : ''}`}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<div
|
||||
className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 ${
|
||||
isPast
|
||||
? 'bg-secondary-100'
|
||||
: 'bg-primary-100'
|
||||
}`}
|
||||
>
|
||||
<Calendar
|
||||
className={`w-5 h-5 ${
|
||||
isPast
|
||||
? 'text-secondary-400'
|
||||
: 'text-primary-600'
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="font-semibold text-secondary-900 truncate">
|
||||
{appt.title}
|
||||
</h3>
|
||||
<p className="text-sm text-secondary-500 flex items-center gap-1 mt-1">
|
||||
<Clock className="w-4 h-4" />
|
||||
{format(
|
||||
toZonedTime(parseISO(appt.datetime), TIMEZONE),
|
||||
'h:mm a'
|
||||
)}
|
||||
</p>
|
||||
{appt.location && (
|
||||
<p className="text-sm text-secondary-400 flex items-center gap-1 mt-0.5">
|
||||
<MapPin className="w-4 h-4" />
|
||||
<span className="truncate">{appt.location}</span>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<ChevronRight className="w-5 h-5 text-secondary-300" />
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</PageContainer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user