govoplan-scheduling/webui/src/features/scheduling/SchedulingRequestsWidget.tsx

import { useCallback, type ReactNode } from "react";
import { CalendarClock } from "lucide-react";
import { Link } from "react-router";
import {
  DashboardWidgetList,
  DismissibleAlert,
  LoadingFrame,
  StatusBadge,
  formatDateTime,
  useDashboardWidgetData,
  type ApiSettings,
  type DashboardWidgetConfiguration
} from "@govoplan/core-webui";
import {
  listSchedulingRequests,
  type SchedulingRequest
} from "../../api/scheduling";

const I18N = {
  candidateSlots: "i18n:govoplan-scheduling.candidate_slots.c414946b",
  deadline: "i18n:govoplan-scheduling.response_deadline.7fd9e3aa",
  draft: "i18n:govoplan-scheduling.draft.23d33e22",
  empty: "i18n:govoplan-scheduling.no_scheduling_request_selected.ac940664",
  loading: "i18n:govoplan-scheduling.loading_scheduling_requests.f42be95d",
  open: "i18n:govoplan-scheduling.open.cf9b7706",
  openScheduling: "i18n:govoplan-scheduling.open_in_scheduling.48df1541",
  responded: "i18n:govoplan-scheduling.responded.4f218211"
} as const;

export default function SchedulingRequestsWidget({
  settings,
  refreshKey,
  configuration
}: {
  settings: ApiSettings;
  refreshKey: number;
  configuration: DashboardWidgetConfiguration;
}) {
  const maxItems = numberSetting(configuration.maxItems, 5, 1, 12);
  const includeDrafts = configuration.includeDrafts === true;
  const load = useCallback(async () => {
    const response = await listSchedulingRequests(settings);
    return response.requests
      .filter(
        (request) =>
          request.status === "collecting"
          || (includeDrafts && request.status === "draft")
      )
      .sort(compareRequests)
      .slice(0, maxItems);
  }, [includeDrafts, maxItems, settings]);
  const { data: requests, loading, error } = useDashboardWidgetData(
    load,
    refreshKey
  );

  return (
    <LoadingFrame loading={loading} label={I18N.loading}>
      {error && (
        <DismissibleAlert tone="warning" resetKey={error}>
          {error}
        </DismissibleAlert>
      )}
      <DashboardWidgetList
        emptyText={I18N.empty}
        items={(requests ?? []).map((request) => ({
          id: request.id,
          title: request.title,
          detail: responseLabel(request),
          meta: deadlineLabel(request),
          leading: <CalendarClock size={17} aria-hidden="true" />,
          trailing: (
            <StatusBadge
              status={request.status}
              label={request.status === "collecting" ? I18N.open : I18N.draft}
            />
          ),
          to: `/scheduling?request_id=${encodeURIComponent(request.id)}`
        }))}
      />
      <div className="dashboard-contribution-footer">
        <Link className="btn btn-secondary" to="/scheduling">
          {I18N.openScheduling}
        </Link>
      </div>
    </LoadingFrame>
  );
}

function compareRequests(
  left: SchedulingRequest,
  right: SchedulingRequest
): number {
  if (left.status !== right.status) {
    return left.status === "collecting" ? -1 : 1;
  }
  const leftDeadline = left.deadline_at
    ? new Date(left.deadline_at).getTime()
    : Number.POSITIVE_INFINITY;
  const rightDeadline = right.deadline_at
    ? new Date(right.deadline_at).getTime()
    : Number.POSITIVE_INFINITY;
  return (
    leftDeadline - rightDeadline
    || new Date(right.updated_at).getTime() - new Date(left.updated_at).getTime()
  );
}

function responseLabel(request: SchedulingRequest): ReactNode {
  const responded = request.participant_aggregate.status_counts.responded ?? 0;
  return <>{responded}/{request.participant_aggregate.total} {I18N.responded}</>;
}

function deadlineLabel(request: SchedulingRequest): ReactNode {
  if (!request.deadline_at) return <>{request.slots.length} {I18N.candidateSlots}</>;
  return <>{I18N.deadline}: {formatDateTime(request.deadline_at, {
    day: "2-digit",
    month: "short"
  })}</>;
}

function numberSetting(
  value: unknown,
  fallback: number,
  minimum: number,
  maximum: number
): number {
  const numeric = typeof value === "number" ? value : Number(value);
  return Number.isFinite(numeric)
    ? Math.max(minimum, Math.min(maximum, Math.floor(numeric)))
    : fallback;
}