feat(api, i18n): add admin report job functionalities and enhance locale support

- Introduced new API functions for managing admin report jobs, including download and post operations.
- Updated English, Nepali, and Chinese locale files to include new messages related to report job actions and rollback confirmations.
- Enhanced user experience by providing clearer instructions and feedback in the admin interface.
- Refactored related components to integrate new functionalities and improve overall usability.

src/modules/reports/report-jobs-panel.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import { Download, RefreshCw } from "lucide-react";
+
+import { downloadAdminReportJob, getAdminReportJobs } from "@/api/admin-report-jobs";
+import { AdminStatusBadge } from "@/components/admin/admin-status-badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { useAdminDateTimeFormatter } from "@/hooks/use-admin-datetime-formatter";
+import { LotteryApiBizError } from "@/types/api/errors";
+import type { AdminReportJobRow } from "@/types/api/admin-report-jobs";
+
+function downloadBlob(blob: Blob, filename: string): void {
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = filename;
+  document.body.appendChild(anchor);
+  anchor.click();
+  anchor.remove();
+  URL.revokeObjectURL(url);
+}
+
+type ReportJobsPanelProps = {
+  canExport: boolean;
+  refreshToken?: number;
+};
+
+export function ReportJobsPanel({ canExport, refreshToken = 0 }: ReportJobsPanelProps) {
+  const { t } = useTranslation(["reports", "common"]);
+  const formatTs = useAdminDateTimeFormatter();
+  const [jobs, setJobs] = useState<AdminReportJobRow[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [downloadingId, setDownloadingId] = useState<number | null>(null);
+
+  const loadJobs = useCallback(async () => {
+    setLoading(true);
+    try {
+      const data = await getAdminReportJobs({ page: 1, per_page: 10 });
+      setJobs(data.items);
+    } catch (e) {
+      toast.error(e instanceof LotteryApiBizError ? e.message : t("tasks.loadFailed"));
+      setJobs([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [t]);
+
+  useEffect(() => {
+    void loadJobs();
+  }, [loadJobs, refreshToken]);
+
+  async function handleDownload(job: AdminReportJobRow): Promise<void> {
+    if (!canExport || job.status !== "completed") {
+      return;
+    }
+    setDownloadingId(job.id);
+    try {
+      const { blob, filename } = await downloadAdminReportJob(job.id);
+      const fallback = `${job.job_no}.${job.export_format}`;
+      downloadBlob(blob, filename ?? fallback);
+      toast.success(t("tasks.downloadSuccess", { jobNo: job.job_no }));
+    } catch (e) {
+      toast.error(e instanceof LotteryApiBizError ? e.message : t("tasks.downloadFailed"));
+    } finally {
+      setDownloadingId(null);
+    }
+  }
+
+  function reportTypeLabel(reportType: string): string {
+    const key = `jobTypes.${reportType}`;
+    const label = t(key);
+    return label === key ? reportType : label;
+  }
+
+  return (
+    <Card className="admin-list-card">
+      <CardHeader className="admin-list-header flex flex-row items-center justify-between gap-3 pb-4">
+        <CardTitle className="admin-list-title">{t("recentTasks")}</CardTitle>
+        <Button type="button" variant="outline" size="sm" disabled={loading} onClick={() => void loadJobs()}>
+          <RefreshCw data-icon="inline-start" className={loading ? "animate-spin" : undefined} />
+          {t("tasks.refresh")}
+        </Button>
+      </CardHeader>
+      <CardContent className="pt-2">
+        <p className="mb-3 text-xs text-muted-foreground">{t("exportHint")}</p>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>{t("tasks.columns.jobNo")}</TableHead>
+              <TableHead>{t("tasks.columns.report")}</TableHead>
+              <TableHead>{t("tasks.columns.format")}</TableHead>
+              <TableHead>{t("tasks.columns.status")}</TableHead>
+              <TableHead>{t("tasks.columns.createdAt")}</TableHead>
+              <TableHead>{t("tasks.columns.actions")}</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {loading ? (
+              <TableRow>
+                <TableCell colSpan={6} className="text-muted-foreground">
+                  {t("states.loading", { ns: "common" })}
+                </TableCell>
+              </TableRow>
+            ) : jobs.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={6} className="text-muted-foreground">
+                  {t("taskEmpty")}
+                </TableCell>
+              </TableRow>
+            ) : (
+              jobs.map((job) => (
+                <TableRow key={job.id}>
+                  <TableCell className="font-mono text-xs">{job.job_no}</TableCell>
+                  <TableCell className="text-sm">{reportTypeLabel(job.report_type)}</TableCell>
+                  <TableCell className="uppercase">{job.export_format}</TableCell>
+                  <TableCell>
+                    <AdminStatusBadge status={job.status}>
+                      {t(`tasks.status.${job.status}`, { defaultValue: job.status })}
+                    </AdminStatusBadge>
+                  </TableCell>
+                  <TableCell className="text-xs text-muted-foreground">
+                    {formatTs(job.created_at ?? job.finished_at)}
+                  </TableCell>
+                  <TableCell>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      disabled={!canExport || job.status !== "completed" || downloadingId === job.id}
+                      onClick={() => void handleDownload(job)}
+                    >
+                      <Download data-icon="inline-start" />
+                      {t("tasks.download")}
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </CardContent>
+    </Card>
+  );
+}

src/modules/reports/reports-console.tsx

@@ -29,12 +29,20 @@ import {
 } from "@/lib/admin-play-types";
 import { getAdminDraws, getAdminDrawFinanceSummary } from "@/api/admin-draws";
 import { getAdminPlayers } from "@/api/admin-player";
+import { downloadAdminReportJob, postAdminReportJob } from "@/api/admin-report-jobs";
 import {
   getAdminReportDailyProfit,
   getAdminReportPlayDimension,
   getAdminReportPlayerWinLoss,
   getAdminReportRebateCommission,
 } from "@/api/admin-reports";
+import {
+  buildReportJobParameters,
+  REPORT_UI_SERVER_FULL_EXPORT,
+  REPORT_UI_TO_JOB_TYPE,
+  type ReportUiKey,
+} from "@/lib/report-export-map";
+import { ReportJobsPanel } from "@/modules/reports/report-jobs-panel";
 import { getAdminRiskPoolDetail, getAdminRiskPools } from "@/api/admin-risk";
 import { getAdminUsers } from "@/api/admin-users";
 import { getAdminTransferOrders } from "@/api/admin-wallet";
@@ -387,6 +395,7 @@ export function ReportsConsole() {
   const [page, setPage] = useState(1);
   const [perPage, setPerPage] = useState(20);
   const [exporting, setExporting] = useState<ExportFormat | null>(null);
+  const [jobRefreshToken, setJobRefreshToken] = useState(0);
   const [search, setSearch] = useState<SearchState>(emptySearch);
   const [playOptions, setPlayOptions] = useState<PlayOption[]>([]);
 
@@ -778,10 +787,55 @@ export function ReportsConsole() {
     setPage(1);
   }
 
+  const usesServerExport = REPORT_UI_SERVER_FULL_EXPORT.has(selectedReport.key as ReportUiKey);
+
+  async function exportViaServer(format: ExportFormat): Promise<void> {
+    if (!canExportReports) {
+      return;
+    }
+    setExporting(format);
+    try {
+      const parameters = buildReportJobParameters(selectedReport.key as ReportUiKey, {
+        dateFrom: filters.dateFrom,
+        dateTo: filters.dateTo,
+        playerId: filters.playerId,
+        play: filters.play,
+        operatorId: filters.operatorId,
+        drawId: filters.drawId,
+        drawNo: filters.drawNo,
+        number: filters.number,
+      });
+      const job = await postAdminReportJob({
+        report_type: REPORT_UI_TO_JOB_TYPE[selectedReport.key as ReportUiKey],
+        export_format: format === "excel" ? "xlsx" : "csv",
+        parameters,
+      });
+      setJobRefreshToken((n) => n + 1);
+      const { blob, filename } = await downloadAdminReportJob(job.id);
+      const ext = job.export_format === "xlsx" ? "xlsx" : "csv";
+      downloadBlob(blob, filename ?? `${exportFileBase}.${ext}`);
+      toast.success(
+        t("exportServerSuccess", {
+          report: t(`items.${selectedReport.key}.title`),
+          format: t(`formats.${format}`),
+          jobNo: job.job_no,
+        }),
+      );
+    } catch (err) {
+      toast.error(err instanceof LotteryApiBizError ? err.message : t("exportFailed"));
+    } finally {
+      setExporting(null);
+    }
+  }
+
   function exportReport(format: ExportFormat): void {
     if (!canExportReports) {
       return;
     }
+    if (usesServerExport) {
+      void exportViaServer(format);
+      return;
+    }
     if (!result || result.rows.length === 0) {
       toast.info(t("empty"));
       return;
@@ -1273,24 +1327,39 @@ export function ReportsConsole() {
               <div>
                 <CardTitle className="admin-list-title">{t("preview.title")}</CardTitle>
               </div>
-              <div className="flex shrink-0 gap-2">
-                <Button
-                  type="button"
-                  variant="outline"
-                  disabled={!canExportReports || !result || exporting !== null}
-                  onClick={() => exportReport("csv")}
-                >
-                  <FileDown data-icon="inline-start" />
-                  {t("formats.csv")}
-                </Button>
-                <Button
-                  type="button"
-                  disabled={!canExportReports || !result || exporting !== null}
-                  onClick={() => exportReport("excel")}
-                >
-                  <FileSpreadsheet data-icon="inline-start" />
-                  {t("formats.excel")}
-                </Button>
+              <div className="flex flex-col items-end gap-2 sm:flex-row sm:items-center">
+                {usesServerExport ? (
+                  <p className="text-xs text-muted-foreground sm:mr-2">{t("exportServerHint")}</p>
+                ) : (
+                  <p className="text-xs text-muted-foreground sm:mr-2">{t("exportClientHint")}</p>
+                )}
+                <div className="flex shrink-0 gap-2">
+                  <Button
+                    type="button"
+                    variant="outline"
+                    disabled={
+                      !canExportReports ||
+                      exporting !== null ||
+                      (!usesServerExport && (!result || result.rows.length === 0))
+                    }
+                    onClick={() => exportReport("csv")}
+                  >
+                    <FileDown data-icon="inline-start" />
+                    {usesServerExport ? t("formats.csvServer") : t("formats.csv")}
+                  </Button>
+                  <Button
+                    type="button"
+                    disabled={
+                      !canExportReports ||
+                      exporting !== null ||
+                      (!usesServerExport && (!result || result.rows.length === 0))
+                    }
+                    onClick={() => exportReport("excel")}
+                  >
+                    <FileSpreadsheet data-icon="inline-start" />
+                    {usesServerExport ? t("formats.excelServer") : t("formats.excel")}
+                  </Button>
+                </div>
               </div>
             </CardHeader>
             <CardContent className="space-y-4 pt-4">
@@ -1329,6 +1398,8 @@ export function ReportsConsole() {
           </Card>
         </div>
       </div>
+
+      <ReportJobsPanel canExport={canExportReports} refreshToken={jobRefreshToken} />
     </div>
   );
 }