Integrate event and schedule page

src/components/events/attendance-actions.tsx

@@ -14,22 +14,22 @@ import {
   LogIn,
   LogOut,
 } from "lucide-react"
-import type { Schedule, Participant } from "@/types/events"
+import type { Participant } from "@/types/events"
 
 interface AttendanceActionsProps {
   participant: Participant
-  schedule: Schedule
+  markingType: "SOLO" | "DUO"
   onMark: (type: "CHECKIN" | "CHECKOUT" | "BOTH") => void
   onUnmark: (type: "CHECKIN" | "CHECKOUT" | "BOTH") => void
 }
 
 export function AttendanceActions({
   participant,
-  schedule,
+  markingType,
   onMark,
   onUnmark,
 }: AttendanceActionsProps) {
-  const isDuo = schedule.markingType === "DUO"
+  const isDuo = markingType === "DUO"
   // const isGroup = schedule.type === "GROUP" // Logic might differ if needed, but actions are similar
 
   return (
@@ -56,7 +56,7 @@ export function AttendanceActions({
             {/* DUO MARKING: Check In / Check Out */}
             <DropdownMenuItem
               onClick={() => onMark("CHECKIN")}
-              disabled={participant.checkInStatus}
+              disabled={!!participant.check_in}
               className="focus:bg-green-900/50 focus:text-green-300 cursor-pointer"
             >
               <LogIn className="mr-2 h-4 w-4 text-green-400" />
@@ -65,7 +65,7 @@ export function AttendanceActions({
 
             <DropdownMenuItem
               onClick={() => onMark("CHECKOUT")}
-              disabled={participant.checkOutStatus}
+              disabled={!!participant.check_out}
               className="focus:bg-blue-900/50 focus:text-blue-300 cursor-pointer"
             >
               <LogOut className="mr-2 h-4 w-4 text-blue-400" />
@@ -76,7 +76,7 @@ export function AttendanceActions({
 
             <DropdownMenuItem
               onClick={() => onUnmark("CHECKIN")}
-              disabled={!participant.checkInStatus}
+              disabled={!participant.check_in}
               className="focus:bg-red-900/50 focus:text-red-300 cursor-pointer"
             >
               <XCircle className="mr-2 h-4 w-4 text-red-400" />
@@ -85,7 +85,7 @@ export function AttendanceActions({
 
             <DropdownMenuItem
               onClick={() => onUnmark("CHECKOUT")}
-              disabled={!participant.checkOutStatus}
+              disabled={!participant.check_out}
               className="focus:bg-red-900/50 focus:text-red-300 cursor-pointer"
             >
               <XCircle className="mr-2 h-4 w-4 text-red-400" />
@@ -97,7 +97,7 @@ export function AttendanceActions({
             {/* SOLO MARKING: One time mark */}
             <DropdownMenuItem
               onClick={() => onMark("BOTH")}
-              disabled={participant.attendanceStatus}
+              disabled={!!participant.check_in}
               className="focus:bg-green-900/50 focus:text-green-300 cursor-pointer"
             >
               <CheckCircle2 className="mr-2 h-4 w-4 text-green-400" />
@@ -108,7 +108,7 @@ export function AttendanceActions({
 
             <DropdownMenuItem
               onClick={() => onUnmark("BOTH")}
-              disabled={!participant.attendanceStatus}
+              disabled={!participant.check_in}
               className="focus:bg-red-900/50 focus:text-red-300 cursor-pointer"
             >
               <XCircle className="mr-2 h-4 w-4 text-red-400" />

src/components/events/event-card.tsx

@@ -8,12 +8,22 @@ export function EventCard({
   className,
   isActive = false,
 }: EventCardProps) {
-  const isGroup = event.type === "GROUP"
+  const isGroup = event.is_group
+
+  // Derive date from first schedule or fallback
+  const eventDate = event.schedules?.[0]?.event_date
+
+  const formattedDate = eventDate
+    ? new Date(eventDate).toLocaleDateString("en-GB", {
+        day: "numeric",
+        month: "short",
+      })
+    : "TBD"
 
   return (
     <Link
       to="/events/$eventId"
-      params={{ eventId: event.id }}
+      params={{ eventId: event.event_id }}
       className="block focus:outline-none focus-visible:ring-2 focus-visible:ring-amber-400/50 rounded-2xl group"
     >
       <Card
@@ -40,7 +50,7 @@ export function EventCard({
         <CardHeader className="pb-1">
           <div className="flex justify-between items-start gap-2">
             <CardTitle className="text-xl font-bold text-white/90 group-hover:text-white transition-colors">
-              {event.name}
+              {event.event_name}
             </CardTitle>
 
             {/* Type Badges - DISTINCT COLORS */}
@@ -57,14 +67,20 @@ export function EventCard({
           </div>
         </CardHeader>
         <CardContent className="pt-2">
-          <div className="flex items-center gap-2">
+          {/* <div className="flex items-center gap-1.5 text-sm text-white/50">
+            <Building2 size={14} className="text-amber-400/60" />
+            <span>{event.organizer || "Organizer TBD"}</span>
+          </div> */}
+          <div className="flex items-center gap-2 mt-2">
+            {" "}
+            {/* Added mt-2 for spacing */}
             <div
               className={cn(
                 "inline-block rounded-lg px-3 py-1 text-sm font-semibold",
                 "bg-amber-500/10 text-amber-300/80 border border-amber-400/10"
               )}
             >
-              {event.day}
+              {formattedDate}
             </div>
           </div>
         </CardContent>