View Modes

#### **Month View**
- Shows all weeks of the month
- Up to 3 classes per day (+ indicator for more)
- Click on day to see detail or create class

#### **Week View**
- Shows 7 complete days
- Up to 10 classes per day
- Weekly navigation

#### **Day View** (Excel Type)
- Detailed spreadsheet-style view
- Columns: Fixed time + column per horse
- Rows: 30-minute time slots (09:00 - 18:30)
- Click empty cell to quickly create class

{viewMode === "day" ? (
  <Card className="overflow-hidden">
    <CardHeader className="border-b bg-secondary/30 py-3">
      <CardTitle className="text-base font-medium">
        {format(currentDate, "EEEE d 'de' MMMM", { locale: es })} —
        <span className="ml-2 text-muted-foreground">
          {
            filteredClases.filter(
              (c) => c.dia === format(currentDate, "yyyy-MM-dd"),
            ).length
          }{" "}
          clases
        </span>
      </CardTitle>
    </CardHeader>
    <CardContent className="p-0">
      <DayView
        selectedDate={currentDate}
        clases={filteredClases}
        caballos={caballos}
        // ... props
      />
    </CardContent>
  </Card>
) : (
  <Card className="overflow-hidden">
    <CardContent className="p-0">
      {viewMode === "month" ? (
        <MonthView
          currentDate={currentDate}
          calendarDays={calendarDays}
          clasesByDate={clasesByDate}
          // ... props
        />
      ) : (
        <WeekView
          calendarDays={calendarDays}
          clasesByDate={clasesByDate}
          // ... props
        />
      )}
    </CardContent>
  </Card>
)}

### 2. View System (Table / Cards)

All main sections allow switching between:
- **Table View**: Traditional row and column format
- **Cards View**: Visual cards with key information

<GenericCard
  item={row}
  // ... other props
  onSendWhatsApp={function (item: unknown): void {
    // WhatsApp functionality
  }}
/>

<CalendarControls
  currentDate={currentDate}
  viewMode={viewMode}
  onNavigate={navigate}
  onToday={goToToday}
  onViewModeChange={setViewMode}
/>

showExport={viewMode === "day"}
onExportExcel={handleExportExcel}
showCancelDay={viewMode === "day"}

- Click on day to see detail or create class
- Shows up to 3 classes per day
- "+ more" indicator when exceeds 3

- Shows up to 10 classes per day
- Full week navigation
- Balanced overview and detail

<DataTable
  columns={columns}
  data={paginatedData}
  emptyMessage={
    isSearchActive
      ? "No se encontraron resultados para tu búsqueda"
      : "No hay alumnos registrados"
  }
/>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  {paginatedData.map((row) => (
    <GenericCard
      key={row.id}
      item={row}
      // ... props
    />
  ))}
</div>

const [viewMode, setViewMode] = useState<"month" | "week" | "day">("day");

const handleDayClick = (date: Date) => {
  navigate(date);
  setViewMode("day");
};