@devpablocristo/modules-scheduling 0.4.0

package/src/SchedulingDaySummary.test.tsx

@@ -0,0 +1,136 @@
+// @vitest-environment jsdom
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { cleanup, render, screen, waitFor } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import type { SchedulingClient } from './client';
+import { SchedulingDaySummary } from './SchedulingDaySummary';
+import type { DashboardStats, DayAgendaItem } from './types';
+
+function createClient(overrides?: Partial<Record<keyof SchedulingClient, unknown>>): SchedulingClient {
+  const dashboard: DashboardStats = {
+    date: '2099-12-01',
+    timezone: 'America/Argentina/Tucuman',
+    bookings_today: 12,
+    confirmed_bookings_today: 7,
+    active_queues: 2,
+    waiting_tickets: 5,
+    tickets_in_service: 1,
+  };
+  const dayAgenda: DayAgendaItem[] = [
+    {
+      type: 'booking',
+      id: 'booking-1',
+      branch_id: 'branch-1',
+      service_id: 'service-1',
+      start_at: '2099-12-01T10:00:00Z',
+      end_at: '2099-12-01T10:30:00Z',
+      status: 'confirmed',
+      label: 'Consulta Ada',
+    },
+    {
+      type: 'queue_ticket',
+      id: 'ticket-1',
+      branch_id: 'branch-1',
+      status: 'waiting',
+      label: 'A-17',
+    },
+  ];
+
+  return {
+    listBranches: vi.fn(),
+    listServices: vi.fn(),
+    listResources: vi.fn(),
+    listSlots: vi.fn(),
+    listBookings: vi.fn(),
+    getBooking: vi.fn(),
+    createBooking: vi.fn(),
+    confirmBooking: vi.fn(),
+    cancelBooking: vi.fn(),
+    checkInBooking: vi.fn(),
+    startService: vi.fn(),
+    completeBooking: vi.fn(),
+    markBookingNoShow: vi.fn(),
+    rescheduleBooking: vi.fn(),
+    listWaitlist: vi.fn(),
+    listQueues: vi.fn(),
+    createQueueTicket: vi.fn(),
+    getQueuePosition: vi.fn(),
+    pauseQueue: vi.fn(),
+    reopenQueue: vi.fn(),
+    closeQueue: vi.fn(),
+    callNext: vi.fn(),
+    serveTicket: vi.fn(),
+    completeTicket: vi.fn(),
+    markTicketNoShow: vi.fn(),
+    cancelTicket: vi.fn(),
+    returnTicketToWaiting: vi.fn(),
+    getDashboard: vi.fn(async () => dashboard),
+    getDayAgenda: vi.fn(async () => dayAgenda),
+    ...(overrides ?? {}),
+  } as SchedulingClient;
+}
+
+function renderSummary(client: SchedulingClient) {
+  cleanup();
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <SchedulingDaySummary client={client} locale="es" initialDate="2099-12-01" />
+    </QueryClientProvider>,
+  );
+}
+
+function renderSummaryWithLocale(client: SchedulingClient, locale: string) {
+  cleanup();
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <SchedulingDaySummary client={client} locale={locale} initialDate="2099-12-01" />
+    </QueryClientProvider>,
+  );
+}
+
+describe('SchedulingDaySummary', () => {
+  it('renders stats, next booking and queue flow from the shared client', async () => {
+    const client = createClient();
+
+    renderSummary(client);
+
+    await waitFor(() => {
+      expect(screen.getByText('Agenda de hoy')).toBeTruthy();
+      expect(screen.getByText('12')).toBeTruthy();
+      expect(screen.getByText('7')).toBeTruthy();
+      expect(screen.getByText('2')).toBeTruthy();
+      expect(screen.getByText('5')).toBeTruthy();
+    });
+
+    expect(screen.getByText('Consulta Ada')).toBeTruthy();
+    expect(screen.getByText('Confirmada')).toBeTruthy();
+    expect(screen.getByText('A-17')).toBeTruthy();
+    expect(screen.getAllByText('Esperando').length).toBeGreaterThan(0);
+  });
+
+  it('supports regional locales while keeping the correct copy preset', async () => {
+    const client = createClient();
+
+    renderSummaryWithLocale(client, 'es-AR');
+
+    await waitFor(() => {
+      expect(screen.getByText('Agenda de hoy')).toBeTruthy();
+      expect(screen.getByText(/\d{1,2}\/\d{1,2}\/\d{4}/)).toBeTruthy();
+    });
+  });
+});

package/src/SchedulingDaySummary.tsx

@@ -0,0 +1,190 @@
+import { useMemo, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import type { SchedulingClient } from './client';
+import { formatSchedulingDateTime, resolveSchedulingCopyLocale } from './locale';
+import type { DashboardStats, DayAgendaItem } from './types';
+
+const summaryKeys = {
+  dashboard: (date: string) => ['scheduling-summary', 'dashboard', date] as const,
+  day: (date: string) => ['scheduling-summary', 'day', date] as const,
+};
+
+export const schedulingDaySummaryCopyPresets = {
+  en: {
+    title: "Today's schedule",
+    description: 'Live bookings and queue activity for the current operating window.',
+    dateLabel: 'Date',
+    loading: 'Loading schedule snapshot…',
+    empty: 'No schedule activity for this date.',
+    bookings: 'Bookings',
+    confirmed: 'Confirmed',
+    activeQueues: 'Queues',
+    waiting: 'Waiting',
+    nextBooking: 'Next booking',
+    queueFlow: 'Queue flow',
+    noUpcoming: 'No upcoming bookings.',
+    noQueueFlow: 'No queue tickets in the agenda.',
+    statuses: {
+      confirmed: 'Confirmed',
+      waiting: 'Waiting',
+      called: 'Called',
+      serving: 'Serving',
+      completed: 'Completed',
+      cancelled: 'Cancelled',
+      no_show: 'No-show',
+    },
+  },
+  es: {
+    title: 'Agenda de hoy',
+    description: 'Reservas activas y movimiento de cola en la ventana operativa actual.',
+    dateLabel: 'Fecha',
+    loading: 'Cargando resumen de agenda…',
+    empty: 'No hay actividad en la agenda para esta fecha.',
+    bookings: 'Reservas',
+    confirmed: 'Confirmadas',
+    activeQueues: 'Colas',
+    waiting: 'Esperando',
+    nextBooking: 'Próxima reserva',
+    queueFlow: 'Flujo de cola',
+    noUpcoming: 'No hay reservas próximas.',
+    noQueueFlow: 'No hay tickets de cola en la agenda.',
+    statuses: {
+      confirmed: 'Confirmada',
+      waiting: 'Esperando',
+      called: 'Llamado',
+      serving: 'Atendiendo',
+      completed: 'Completado',
+      cancelled: 'Cancelado',
+      no_show: 'No-show',
+    },
+  },
+} as const;
+
+export type SchedulingDaySummaryProps = {
+  client: SchedulingClient;
+  locale?: string;
+  className?: string;
+  initialDate?: string;
+};
+
+function todayValue(): string {
+  return new Date().toISOString().slice(0, 10);
+}
+
+function isUpcomingBooking(item: DayAgendaItem): boolean {
+  if (item.type !== 'booking' || !item.start_at) {
+    return false;
+  }
+  return new Date(item.start_at).getTime() >= Date.now();
+}
+
+function isQueueItem(item: DayAgendaItem): boolean {
+  return item.type === 'queue_ticket';
+}
+
+export function SchedulingDaySummary({
+  client,
+  locale = 'en',
+  className = '',
+  initialDate,
+}: SchedulingDaySummaryProps) {
+  const copy = schedulingDaySummaryCopyPresets[resolveSchedulingCopyLocale(locale)];
+  const statusLabel = (status: string) => copy.statuses[status as keyof typeof copy.statuses] ?? status;
+  const [selectedDate, setSelectedDate] = useState(initialDate ?? todayValue());
+
+  const dashboardQuery = useQuery<DashboardStats>({
+    queryKey: summaryKeys.dashboard(selectedDate),
+    queryFn: () => client.getDashboard(undefined, selectedDate),
+    staleTime: 20_000,
+  });
+
+  const dayQuery = useQuery<DayAgendaItem[]>({
+    queryKey: summaryKeys.day(selectedDate),
+    queryFn: () => client.getDayAgenda(undefined, selectedDate),
+    staleTime: 20_000,
+  });
+
+  const nextBooking = useMemo(
+    () => (dayQuery.data ?? []).filter(isUpcomingBooking).sort((a, b) => (a.start_at ?? '').localeCompare(b.start_at ?? ''))[0],
+    [dayQuery.data],
+  );
+  const queueFlow = useMemo(() => (dayQuery.data ?? []).filter(isQueueItem).slice(0, 6), [dayQuery.data]);
+
+  return (
+    <div className={`card modules-scheduling__day-summary ${className}`.trim()}>
+      <div className="card-header">
+        <div>
+          <h2>{copy.title}</h2>
+          <p className="text-secondary">{copy.description}</p>
+        </div>
+        <div className="form-group">
+          <label htmlFor="scheduling-day-summary-date">{copy.dateLabel}</label>
+          <input
+            id="scheduling-day-summary-date"
+            type="date"
+            value={selectedDate}
+            onChange={(event) => setSelectedDate(event.target.value)}
+          />
+        </div>
+      </div>
+
+      {dashboardQuery.isLoading || dayQuery.isLoading ? (
+        <div className="modules-scheduling__empty">
+          <div className="spinner" />
+          <p>{copy.loading}</p>
+        </div>
+      ) : !dashboardQuery.data ? (
+        <div className="modules-scheduling__empty">{copy.empty}</div>
+      ) : (
+        <>
+          <div className="modules-scheduling__summary stats-grid">
+            <article className="stat-card">
+              <div className="stat-label">{copy.bookings}</div>
+              <div className="stat-value">{dashboardQuery.data.bookings_today}</div>
+            </article>
+            <article className="stat-card">
+              <div className="stat-label">{copy.confirmed}</div>
+              <div className="stat-value">{dashboardQuery.data.confirmed_bookings_today}</div>
+            </article>
+            <article className="stat-card">
+              <div className="stat-label">{copy.activeQueues}</div>
+              <div className="stat-value">{dashboardQuery.data.active_queues}</div>
+            </article>
+            <article className="stat-card">
+              <div className="stat-label">{copy.waiting}</div>
+              <div className="stat-value">{dashboardQuery.data.waiting_tickets}</div>
+            </article>
+          </div>
+
+          <div className="modules-scheduling__day-summary-grid">
+            <section className="modules-scheduling__day-summary-section">
+              <div className="modules-scheduling__day-summary-title">{copy.nextBooking}</div>
+              {nextBooking ? (
+                <div className="modules-scheduling__day-summary-item">
+                  <strong>{nextBooking.label}</strong>
+                  <span>{formatSchedulingDateTime(nextBooking.start_at, locale)}</span>
+                  <span>{statusLabel(nextBooking.status)}</span>
+                </div>
+              ) : (
+                <div className="modules-scheduling__queue-empty">{copy.noUpcoming}</div>
+              )}
+            </section>
+            <section className="modules-scheduling__day-summary-section">
+              <div className="modules-scheduling__day-summary-title">{copy.queueFlow}</div>
+              {queueFlow.length === 0 ? (
+                <div className="modules-scheduling__queue-empty">{copy.noQueueFlow}</div>
+              ) : (
+                queueFlow.map((item) => (
+                  <div key={item.id} className="modules-scheduling__day-summary-item">
+                    <strong>{item.label}</strong>
+                    <span>{statusLabel(item.status)}</span>
+                  </div>
+                ))
+              )}
+            </section>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

package/src/client.test.ts

@@ -0,0 +1,105 @@
+// @vitest-environment node
+
+import { describe, expect, it, vi } from "vitest";
+import { createPublicSchedulingClient, createSchedulingClient } from "./client";
+
+describe("scheduling client compatibility", () => {
+  it("normalizes deprecated appointments_enabled into scheduling_enabled for public info", async () => {
+    const request = vi.fn().mockResolvedValue({
+      org_id: "org-demo",
+      slug: "demo-org",
+      name: "Demo Org",
+      business_name: "Demo Scheduling",
+      appointments_enabled: true,
+    });
+
+    const client = createPublicSchedulingClient(request);
+    const info = await client.getBusinessInfo("demo-org");
+
+    expect(request).toHaveBeenCalledWith("/v1/public/demo-org/info");
+    expect(info.scheduling_enabled).toBe(true);
+    expect(info.appointments_enabled).toBe(true);
+  });
+
+  it("builds scheduling slot queries with branch, service and resource selectors", async () => {
+    const request = vi.fn().mockResolvedValue({ items: [] });
+
+    const client = createSchedulingClient(request);
+    await client.listSlots({
+      branchId: "branch-1",
+      serviceId: "service-1",
+      resourceId: "resource-1",
+      date: "2026-04-03",
+    });
+
+    expect(request).toHaveBeenCalledWith(
+      "/v1/scheduling/slots?branch_id=branch-1&service_id=service-1&resource_id=resource-1&date=2026-04-03",
+    );
+  });
+
+  it("lists blocked ranges with branch, resource and date filters", async () => {
+    const request = vi.fn().mockResolvedValue({ items: [] });
+
+    const client = createSchedulingClient(request);
+    await client.listBlockedRanges({ branchId: "branch-1", resourceId: "res-1", date: "2026-04-06" });
+
+    expect(request).toHaveBeenCalledWith(
+      "/v1/scheduling/blocked-ranges?branch_id=branch-1&resource_id=res-1&date=2026-04-06",
+    );
+  });
+
+  it("creates a blocked range with POST and the payload as body", async () => {
+    const request = vi.fn().mockResolvedValue({ id: "br-1" });
+
+    const client = createSchedulingClient(request);
+    await client.createBlockedRange({
+      branch_id: "branch-1",
+      kind: "manual",
+      reason: "Reunión con proveedor",
+      start_at: "2026-04-06T17:00:00Z",
+      end_at: "2026-04-06T18:00:00Z",
+    });
+
+    expect(request).toHaveBeenCalledWith("/v1/scheduling/blocked-ranges", {
+      method: "POST",
+      body: {
+        branch_id: "branch-1",
+        kind: "manual",
+        reason: "Reunión con proveedor",
+        start_at: "2026-04-06T17:00:00Z",
+        end_at: "2026-04-06T18:00:00Z",
+      },
+    });
+  });
+
+  it("updates a blocked range with PATCH and the id in the path", async () => {
+    const request = vi.fn().mockResolvedValue({ id: "br-1" });
+
+    const client = createSchedulingClient(request);
+    await client.updateBlockedRange("br-1", {
+      branch_id: "branch-1",
+      kind: "manual",
+      start_at: "2026-04-06T17:00:00Z",
+      end_at: "2026-04-06T19:00:00Z",
+    });
+
+    expect(request).toHaveBeenCalledWith("/v1/scheduling/blocked-ranges/br-1", {
+      method: "PATCH",
+      body: {
+        branch_id: "branch-1",
+        kind: "manual",
+        start_at: "2026-04-06T17:00:00Z",
+        end_at: "2026-04-06T19:00:00Z",
+      },
+    });
+  });
+
+  it("deletes a blocked range with DELETE", async () => {
+    const request = vi.fn().mockResolvedValue(undefined);
+
+    const client = createSchedulingClient(request);
+    await client.deleteBlockedRange("br-1");
+
+    expect(request).toHaveBeenCalledWith("/v1/scheduling/blocked-ranges/br-1", { method: "DELETE" });
+  });
+});