TorbatYar/frontend/modules/beauty/features/owner/booking-schedules.tsx

"use client";

import { useQuery } from "@tanstack/react-query";
import { beautyBusinessApi } from "@/modules/beauty/services/beauty-business-api";
import { useTenantId } from "@/hooks/useTenantId";
import {
  PageHeader,
  DataTable,
  EmptyState,
  LoadingState,
  ErrorState,
  Badge,
} from "@/components/ds";

export default function SchedulesPage() {
  const { tenantId } = useTenantId();

  const listQ = useQuery({
    queryKey: ["beauty", tenantId, "staff-schedules"],
    queryFn: () => beautyBusinessApi.staffSchedules.list(tenantId!),
    enabled: !!tenantId,
  });

  if (!tenantId || listQ.isLoading) return <LoadingState />;
  if (listQ.error) {
    return <ErrorState message={listQ.error.message} onRetry={() => listQ.refetch()} />;
  }

  return (
    <div>
      <PageHeader title="برنامه کاری" description="برنامه هفتگی پرسنل." />
      <DataTable
        columns={[
          { key: "code", header: "کد" },
          { key: "staff_ref", header: "پرسنل" },
          { key: "day_of_week", header: "روز" },
          { key: "start_time", header: "شروع" },
          { key: "end_time", header: "پایان" },
          {
            key: "is_active",
            header: "فعال",
            render: (r) => (
              <Badge tone={r.is_active ? "success" : "default"}>
                {r.is_active ? "بله" : "خیر"}
              </Badge>
            ),
          },
        ]}
        rows={(listQ.data ?? []) as unknown as Record<string, unknown>[]}
        empty={<EmptyState title="برنامه‌ای ثبت نشده" />}
      />
    </div>
  );
}