feat(admin): 仪表盘重构、代理线路修复与后台体验优化

- 各角色仪表盘：KPI 可点击跳转、快捷入口、去重冗余区块，代理/站点降级 analytics
- 代理线路：创建玩家权限、侧栏搜索、深链 URL、档案保存与删除预检等修复
- 统一密码最短 6 位；代理模块表格/侧栏背景色一致（admin-table-inset）
- 报表、钱包、对账、开奖、结算、配置等模块结构与 i18n 同步更新

src/modules/reconcile/reconcile-console.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { Eye, ShieldAlert } from "lucide-react";
+import Link from "next/link";
+import { ArrowUpRight, ChevronDown, ChevronRight, RefreshCw, Search } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useAsyncEffect } from "@/hooks/use-async-effect";
@@ -17,19 +18,18 @@ import {
   manuallyProcessTransferOrder,
   reverseTransferOrder,
 } from "@/api/admin-wallet";
-import { ReconcileItemActions } from "@/modules/reconcile/reconcile-item-actions";
 import { getAdminPlayers } from "@/api/admin-player";
 import { AdminDateRangeField } from "@/components/admin/admin-date-range-field";
 import { AdminNoResourceState, AdminTableNoResourceRow } from "@/components/admin/admin-no-resource-state";
+import { ReconcileJobDetailPanel, type ReconcileItemsFilter } from "@/modules/reconcile/reconcile-job-detail-panel";
 import { AdminListPaginationFooter } from "@/components/admin/admin-list-pagination-footer";
-import { AdminRowActionsMenu } from "@/components/admin/admin-row-actions-menu";
 import { AdminStatusBadge } from "@/components/admin/admin-status-badge";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { AdminLoadingState, AdminLoadingInline, AdminTableLoadingRow } from "@/components/admin/admin-loading-state";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+import { AdminLoadingInline, AdminTableLoadingRow } from "@/components/admin/admin-loading-state";
 import {
   Table,
   TableBody,
@@ -51,103 +51,15 @@ import type {
   AdminReconcileItemsData,
   AdminReconcileJobListData,
 } from "@/types/api/admin-reconcile";
+import {
+  getJobSummaryValue,
+  jobStatusLabel,
+  renderPeriodRange,
+} from "@/modules/reconcile/reconcile-labels";
 
 const MANAGE = ["prd.wallet_reconcile.manage"] as const;
-
-/** 与后端 reconcile_type 对齐；扩展时在 API 与下拉同步增加 */
 const RECONCILE_TYPE = "wallet_transfer" as const;
 
-function jobStatusLabel(status: string, t: (key: string) => string): string {
-  switch (status) {
-    case "completed":
-      return t("statusCompleted");
-    case "running":
-      return t("statusRunning");
-    case "failed":
-      return t("statusFailed");
-    default:
-      return status;
-  }
-}
-
-function itemStatusLabel(status: string, t: (key: string) => string): string {
-  switch (status) {
-    case "mismatch":
-      return t("itemMismatch");
-    case "matched":
-      return t("itemMatched");
-    case "pending_check":
-      return t("itemPendingCheck");
-    case "stale_processing":
-      return t("itemStaleProcessing");
-    case "pending_reconcile":
-      return t("itemPendingReconcile");
-    case "missing_wallet_txn":
-      return t("itemMissingWalletTxn");
-    case "unexpected_wallet_txn":
-      return t("itemUnexpectedWalletTxn");
-    case "missing_refund":
-      return t("itemMissingRefund");
-    case "missing_reversal":
-      return t("itemMissingReversal");
-    case "main_site_record_missing":
-      return t("itemMainSiteRecordMissing");
-    case "main_site_failed":
-      return t("itemMainSiteFailed");
-    default:
-      return status;
-  }
-}
-
-function reconcileTypeLabel(type: string, t: (key: string) => string): string {
-  switch (type) {
-    case "wallet_transfer":
-      return t("reconcileTypeFixed");
-    default:
-      return type;
-  }
-}
-
-function mainSiteCheckLabel(status: string | null | undefined, t: (key: string) => string): string {
-  switch (status) {
-    case "matched":
-      return t("mainSiteMatched");
-    case "not_found":
-      return t("mainSiteNotFound");
-    case "failed_on_main":
-      return t("mainSiteFailed");
-    case "unavailable":
-      return t("mainSiteUnavailable");
-    default:
-      return t("mainSiteSkipped");
-  }
-}
-
-function itemResolutionLabel(
-  row: Pick<AdminReconcileItemsData["items"][number], "resolved_at" | "is_resolved">,
-  t: (key: string) => string,
-): string {
-  return row.is_resolved === true || row.resolved_at ? t("itemResolved") : t("itemUnresolved");
-}
-
-function itemResolutionTone(row: Pick<AdminReconcileItemsData["items"][number], "resolved_at" | "is_resolved">): "success" | "warning" {
-  return row.is_resolved === true || row.resolved_at ? "success" : "warning";
-}
-
-function getJobSummaryValue(summary: Record<string, unknown> | null | undefined, key: string): number {
-  const raw = summary?.[key];
-  return typeof raw === "number" && Number.isFinite(raw) ? raw : 0;
-}
-
-function renderPeriodRange(
-  row: Pick<AdminReconcileJobRow, "period_start" | "period_end">,
-  formatTs: (value: string | null | undefined) => string,
-): string {
-  const from = row.period_start ? formatTs(row.period_start) : "—";
-  const to = row.period_end ? formatTs(row.period_end) : "—";
-  return `${from} ~ ${to}`;
-}
-
 export function ReconcileConsole(): React.ReactElement {
   const { t } = useTranslation(["reconcile", "common"]);
   const tRef = useTranslationRef(["reconcile", "common"]);
@@ -163,18 +75,20 @@ export function ReconcileConsole(): React.ReactElement {
   const [page, setPage] = useState(1);
   const [perPage, setPerPage] = useState(10);
 
-  const [selectedId, setSelectedId] = useState<number | null>(null);
-  const [detailOpen, setDetailOpen] = useState(false);
+  const [selectedJob, setSelectedJob] = useState<AdminReconcileJobRow | null>(null);
   const [items, setItems] = useState<AdminReconcileItemsData | null>(null);
   const [itemsPage, setItemsPage] = useState(1);
-  const [itemsPerPage, setItemsPerPage] = useState(10);
+  const [itemsPerPage, setItemsPerPage] = useState(20);
   const [itemsLoading, setItemsLoading] = useState(false);
+  const [itemsFilter, setItemsFilter] = useState<ReconcileItemsFilter>("open");
 
+  const [scanOpen, setScanOpen] = useState(false);
   const [dateFrom, setDateFrom] = useState("");
   const [dateTo, setDateTo] = useState("");
   const [playerSearch, setPlayerSearch] = useState("");
   const [playerResults, setPlayerResults] = useState<AdminPlayerRow[]>([]);
   const [playerLoading, setPlayerLoading] = useState(false);
+  const [playerPickerOpen, setPlayerPickerOpen] = useState(false);
   const [selectedPlayer, setSelectedPlayer] = useState<AdminPlayerRow | null>(null);
   const [submitting, setSubmitting] = useState(false);
   const [actionBusy, setActionBusy] = useState(false);
@@ -191,20 +105,20 @@ export function ReconcileConsole(): React.ReactElement {
     } finally {
       setJobsLoading(false);
     }
-  }, [page, perPage]);
+  }, [page, perPage, tRef]);
 
   useAsyncEffect(() => {
     void loadJobs();
   }, [page, perPage]);
 
   const loadItems = useCallback(async () => {
-    if (selectedId == null) {
+    if (selectedJob == null) {
       setItems(null);
       return;
     }
     setItemsLoading(true);
     try {
-      const d = await getAdminReconcileJobItems(selectedId, {
+      const d = await getAdminReconcileJobItems(selectedJob.id, {
         page: itemsPage,
         per_page: itemsPerPage,
       });
@@ -215,11 +129,11 @@ export function ReconcileConsole(): React.ReactElement {
     } finally {
       setItemsLoading(false);
     }
-  }, [selectedId, itemsPage, itemsPerPage]);
+  }, [selectedJob, itemsPage, itemsPerPage, tRef]);
 
   useAsyncEffect(() => {
     void loadItems();
-  }, [selectedId, itemsPage, itemsPerPage]);
+  }, [selectedJob, itemsPage, itemsPerPage]);
 
   const loadPlayers = useCallback(async (keyword: string) => {
     const q = keyword.trim();
@@ -239,15 +153,14 @@ export function ReconcileConsole(): React.ReactElement {
   }, []);
 
   useEffect(() => {
-    const q = playerSearch.trim();
-    if (q === "") {
+    if (!playerPickerOpen) {
       return;
     }
     const timer = window.setTimeout(() => {
-      void loadPlayers(q);
+      void loadPlayers(playerSearch);
     }, 250);
     return () => window.clearTimeout(timer);
-  }, [loadPlayers, playerSearch]);
+  }, [loadPlayers, playerPickerOpen, playerSearch]);
 
   async function onCreate(): Promise<void> {
     if (!dateFrom.trim() || !dateTo.trim()) {
@@ -273,6 +186,7 @@ export function ReconcileConsole(): React.ReactElement {
           : resp.item_count ?? 0;
       toast.success(count > 0 ? t("createSuccess", { count }) : t("createSuccessEmpty"));
       setPage(1);
+      setScanOpen(false);
       setDateFrom("");
       setDateTo("");
       setPlayerSearch("");
@@ -328,36 +242,50 @@ export function ReconcileConsole(): React.ReactElement {
     });
   }
 
+  function openJobDetail(job: AdminReconcileJobRow): void {
+    setSelectedJob(job);
+    setItemsPage(1);
+    setItemsFilter("open");
+  }
+
+  function closeJobDetail(): void {
+    setSelectedJob(null);
+    setItems(null);
+  }
+
   const jm = jobs?.meta;
-  const im = items?.meta;
-  const selectedJob = jobs?.items.find((job) => job.id === selectedId) ?? null;
-  const selectedJobItemCount = getJobSummaryValue(selectedJob?.summary_json, "item_count");
-  const selectedJobMismatchCount = getJobSummaryValue(selectedJob?.summary_json, "mismatch_count");
-  const selectedJobMatchedCount = Math.max(0, selectedJobItemCount - selectedJobMismatchCount);
 
   return (
-    <div className="flex w-full max-w-none flex-col gap-6">
+    <div className="flex w-full flex-col gap-4">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <p className="text-sm text-muted-foreground">{t("workflowHint")}</p>
+        <Link
+          href="/admin/wallet/transfer-orders?abnormal=1"
+          title={t("shortcutAbnormalTransfers")}
+          className="inline-flex shrink-0 items-center gap-1 text-sm font-medium hover:underline"
+        >
+          {t("shortcutAbnormalTransfers")}
+          <ArrowUpRight className="size-3.5" />
+        </Link>
+      </div>
+
       {canCreate ? (
-        <Card className="admin-list-card">
-          <CardHeader className="admin-list-header">
-            <CardTitle className="admin-list-title">{t("createTitle")}</CardTitle>
-            <p className="text-sm text-muted-foreground">{t("createHint")}</p>
-          </CardHeader>
-          <CardContent className="admin-list-content">
-            <div className="admin-list-toolbar">
-              <div className="admin-list-field">
-                <span className="text-sm font-medium leading-none sm:shrink-0">{t("reconcileType")}</span>
-                <span className="inline-flex h-8 min-h-8 min-w-0 items-center rounded-md border border-border/60 bg-muted/30 px-2.5 text-sm text-foreground">
-                  {t("reconcileTypeFixed")}
-                </span>
-              </div>
-              <div className="admin-list-field">
-                <Label htmlFor="rc-date-range" className="sm:shrink-0">
-                  {t("dateRange")}
-                </Label>
-                <div className="min-w-0 w-full sm:w-60">
+        <div className="rounded-lg border border-border/60">
+          <button
+            type="button"
+            className="flex w-full items-center justify-between px-3 py-2.5 text-left text-sm font-medium"
+            onClick={() => setScanOpen((open) => !open)}
+          >
+            {t("createTitle")}
+            {scanOpen ? <ChevronDown className="size-4 text-muted-foreground" /> : <ChevronRight className="size-4 text-muted-foreground" />}
+          </button>
+          {scanOpen ? (
+            <div className="space-y-3 border-t border-border/60 px-3 py-3">
+              <div className="flex flex-wrap items-end gap-2">
+                <div className="min-w-[14rem] flex-1">
                   <AdminDateRangeField
                     id="rc-date-range"
+                    label={t("dateRange")}
                     from={dateFrom}
                     to={dateTo}
                     onRangeChange={({ from, to }) => {
@@ -366,23 +294,66 @@ export function ReconcileConsole(): React.ReactElement {
                     }}
                   />
                 </div>
-              </div>
-              <div className="admin-list-field min-w-0 flex-1">
-                <Label htmlFor="rc-player-search" className="sm:shrink-0">
-                  {t("playerSearch")}
-                </Label>
-                <Input
-                  id="rc-player-search"
-                  className="w-full sm:w-52"
-                  value={playerSearch}
-                  onChange={(e) => setPlayerSearch(e.target.value)}
-                  placeholder={t("playerSearchPlaceholder")}
-                />
-              </div>
-              <div className="admin-list-actions">
+                <div className="min-w-[12rem] flex-1">
+                  <Label htmlFor="rc-player-search" className="mb-1.5 block text-sm">
+                    {t("playerSearch")}
+                  </Label>
+                  <Popover open={playerPickerOpen} onOpenChange={setPlayerPickerOpen} modal={false}>
+                    <div className="flex gap-1.5">
+                      <Input
+                        id="rc-player-search"
+                        className="h-8"
+                        value={playerSearch}
+                        onChange={(e) => setPlayerSearch(e.target.value)}
+                        placeholder={t("playerSearchPlaceholder")}
+                      />
+                      <PopoverTrigger
+                        render={
+                          <Button
+                            type="button"
+                            variant="outline"
+                            size="sm"
+                            className="h-8 shrink-0 px-2"
+                            aria-label={t("searchPicker.open", { ns: "reports", defaultValue: "搜索" })}
+                          />
+                        }
+                      >
+                        <Search className="size-3.5" />
+                      </PopoverTrigger>
+                    </div>
+                    <PopoverContent align="start" className="w-[var(--anchor-width)] min-w-[16rem] p-2">
+                      <div className="max-h-48 overflow-y-auto">
+                        {playerLoading ? (
+                          <AdminLoadingInline className="py-2" label={t("loadingPlayers")} />
+                        ) : playerResults.length === 0 ? (
+                          <p className="px-2 py-3 text-sm text-muted-foreground">{t("playerEmpty", { defaultValue: "无匹配玩家" })}</p>
+                        ) : (
+                          playerResults.map((player) => (
+                            <button
+                              key={player.id}
+                              type="button"
+                              className="flex w-full rounded-md px-2 py-2 text-left text-sm hover:bg-muted"
+                              onClick={() => {
+                                setSelectedPlayer(player);
+                                setPlayerSearch(player.site_player_id);
+                                setPlayerPickerOpen(false);
+                              }}
+                            >
+                              <span className="truncate">
+                                {player.site_player_id}
+                                {player.nickname ? ` · ${player.nickname}` : ""}
+                              </span>
+                            </button>
+                          ))
+                        )}
+                      </div>
+                    </PopoverContent>
+                  </Popover>
+                </div>
                 <Button
                   type="button"
-                  className="w-full sm:w-auto"
+                  size="sm"
+                  className="h-8"
                   disabled={submitting}
                   onClick={() =>
                     requestConfirm({
@@ -399,353 +370,161 @@ export function ReconcileConsole(): React.ReactElement {
                   {submitting ? t("submitting") : t("createTask")}
                 </Button>
               </div>
+              {selectedPlayer ? (
+                <div className="flex items-center justify-between gap-2 rounded-md bg-muted/40 px-2.5 py-1.5 text-sm">
+                  <span className="min-w-0 truncate">
+                    {selectedPlayer.site_player_id}
+                    {selectedPlayer.nickname ? ` · ${selectedPlayer.nickname}` : ""}
+                  </span>
+                  <Button
+                    type="button"
+                    size="sm"
+                    variant="ghost"
+                    className="h-7 px-2"
+                    onClick={() => {
+                      setSelectedPlayer(null);
+                      setPlayerSearch("");
+                    }}
+                  >
+                    {t("playerClear")}
+                  </Button>
+                </div>
+              ) : null}
             </div>
-
-            {selectedPlayer ? (
-              <div className="flex items-center justify-between gap-3 rounded-lg border bg-muted/20 px-3 py-2 text-sm">
-                <div className="min-w-0 truncate font-medium text-foreground">
-                  {selectedPlayer.site_player_id}
-                  {selectedPlayer.nickname ? ` · ${selectedPlayer.nickname}` : ""}
-                  {selectedPlayer.username ? ` · ${selectedPlayer.username}` : ""}
-                  {` · ${selectedPlayer.site_code}`}
-                </div>
-                <Button
-                  type="button"
-                  size="sm"
-                  variant="outline"
-                  onClick={() => {
-                    setSelectedPlayer(null);
-                    setPlayerSearch("");
-                    setPlayerResults([]);
-                  }}
-                >
-                  {t("playerClear")}
-                </Button>
-              </div>
-            ) : null}
-
-            {playerSearch.trim() !== "" || playerResults.length > 0 || playerLoading ? (
-              <div className="rounded-lg border bg-background">
-                <div className="max-h-56 overflow-y-auto">
-                  {playerLoading ? (
-                    <AdminLoadingInline className="py-2" label={t("loadingPlayers")} />
-                  ) : playerResults.length === 0 ? (
-                    <AdminNoResourceState compact className="px-3 py-4" />
-                  ) : (
-                    <div className="divide-y">
-                      {playerResults.map((player) => {
-                        const active = selectedPlayer?.id === player.id;
-                        return (
-                          <button
-                            key={player.id}
-                            type="button"
-                            className={cn(
-                              "flex w-full px-3 py-2.5 text-left text-sm transition-colors hover:bg-muted/25",
-                              active && "bg-muted/30 font-medium",
-                            )}
-                            onClick={() => {
-                              setSelectedPlayer(player);
-                              setPlayerSearch(player.site_player_id);
-                            }}
-                          >
-                            <span className="min-w-0 truncate">
-                              {player.site_player_id}
-                              {player.nickname ? ` · ${player.nickname}` : ""}
-                              {player.username ? ` · ${player.username}` : ""}
-                              {` · ${player.site_code}`}
-                            </span>
-                          </button>
-                        );
-                      })}
-                    </div>
-                  )}
-                </div>
-              </div>
-            ) : null}
-          </CardContent>
-        </Card>
+          ) : null}
+        </div>
       ) : (
-        <p className="text-muted-foreground text-sm">{t("noCreatePermission")}</p>
+        <p className="text-sm text-muted-foreground">{t("viewOnlyHint")}</p>
       )}
 
-      <Card className="admin-list-card">
-        <CardHeader className="admin-list-header flex flex-row flex-wrap items-end justify-between gap-4">
-          <div>
-            <CardTitle className="admin-list-title">{t("jobsTitle")}</CardTitle>
-          </div>
-          <Button type="button" variant="secondary" size="sm" onClick={() => void loadJobs()}>
+      <div className="rounded-lg border border-border/60">
+        <div className="flex items-center justify-between gap-3 border-b border-border/60 px-3 py-2.5">
+          <h2 className="text-sm font-semibold">{t("jobsTitle")}</h2>
+          <Button type="button" variant="ghost" size="sm" className="h-8" disabled={jobsLoading} onClick={() => void loadJobs()}>
+            <RefreshCw className={cn("size-3.5", jobsLoading && "animate-spin")} />
             {t("refresh")}
           </Button>
-        </CardHeader>
-        <CardContent className="admin-list-content pt-4">
-          {jobsErr ? <p className="text-sm text-destructive">{jobsErr}</p> : null}
+        </div>
+        <div className="p-3 pt-2">
+          {jobsErr ? <p className="mb-2 text-sm text-destructive">{jobsErr}</p> : null}
           {jobs ? (
             <>
-              <div className="admin-table-shell">
-                <Table id="reconcile-jobs-table">
-                  <TableHeader>
-                    <TableRow>
-                      <TableHead className="sticky left-0 z-20 w-24 bg-muted shadow-[1px_0_0_rgba(203,213,225,0.7)]">
-                        {t("table.id", { ns: "common" })}
-                      </TableHead>
-                      <TableHead className="sticky left-24 z-20 min-w-[14rem] bg-muted shadow-[1px_0_0_rgba(203,213,225,0.7)]">
-                        {t("jobNo")}
-                      </TableHead>
-                      <TableHead>{t("type")}</TableHead>
-                      <TableHead>{t("status")}</TableHead>
-                      <TableHead className="text-center">{t("itemCount")}</TableHead>
-                      <TableHead className="text-center">{t("mismatchCount")}</TableHead>
-                      <TableHead>{t("period")}</TableHead>
-                      <TableHead>{t("finishedAt")}</TableHead>
-                      <TableHead>{t("createdAt")}</TableHead>
-                      <TableHead className="sticky right-0 z-20 w-14 bg-muted text-center shadow-[-1px_0_0_rgba(203,213,225,0.7)]">
-                        {t("operate")}
-                      </TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {jobsLoading && !jobs ? (
-                      <AdminTableLoadingRow colSpan={10} />
-                    ) : jobs.items.length === 0 ? (
-                      <AdminTableNoResourceRow colSpan={10} className="text-muted-foreground" />
-                    ) : (
-                      jobs.items.map((row) => (
-                        <TableRow key={row.id}>
-                          <TableCell className="sticky left-0 z-10 bg-card tabular-nums shadow-[1px_0_0_rgba(226,232,240,0.9)]">
-                            {row.id}
-                          </TableCell>
-                          <TableCell className="sticky left-24 z-10 min-w-[14rem] bg-card font-mono text-xs shadow-[1px_0_0_rgba(226,232,240,0.9)]">
-                            {row.job_no}
-                          </TableCell>
-                          <TableCell className="text-sm">{reconcileTypeLabel(row.reconcile_type, t)}</TableCell>
+              <Table id="reconcile-jobs-table">
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>{t("jobNo")}</TableHead>
+                    <TableHead>{t("status")}</TableHead>
+                    <TableHead className="text-center">{t("mismatchCount")}</TableHead>
+                    <TableHead>{t("period")}</TableHead>
+                    <TableHead>{t("finishedAt")}</TableHead>
+                    <TableHead className="w-[6.5rem] text-center">{t("operate")}</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {jobsLoading && jobs.items.length === 0 ? (
+                    <AdminTableLoadingRow colSpan={6} />
+                  ) : jobs.items.length === 0 ? (
+                    <AdminTableNoResourceRow colSpan={6} />
+                  ) : (
+                    jobs.items.map((row) => {
+                      const selected = selectedJob?.id === row.id;
+                      const mismatchCount = getJobSummaryValue(row.summary_json, "mismatch_count");
+                      return (
+                        <TableRow key={row.id} className={cn(selected && "bg-primary/[0.04]")}>
+                          <TableCell className="font-mono text-xs">{row.job_no}</TableCell>
                           <TableCell>
                             <AdminStatusBadge status={row.status}>
                               {jobStatusLabel(row.status, t)}
                             </AdminStatusBadge>
                           </TableCell>
-                          <TableCell className="text-center tabular-nums">
-                            {getJobSummaryValue(row.summary_json, "item_count")}
-                          </TableCell>
                           <TableCell className="text-center tabular-nums">
                             <span
                               className={cn(
-                                getJobSummaryValue(row.summary_json, "mismatch_count") > 0
-                                  ? "font-medium text-amber-700"
-                                  : "text-muted-foreground",
+                                mismatchCount > 0 ? "font-medium text-amber-700" : "text-muted-foreground",
                               )}
                             >
-                              {getJobSummaryValue(row.summary_json, "mismatch_count")}
+                              {mismatchCount}
                             </span>
                           </TableCell>
-                          <TableCell className="max-w-[16rem] text-xs text-muted-foreground">
-                            <span className="line-clamp-2">
-                              {renderPeriodRange(row, formatTs)}
-                            </span>
+                          <TableCell className="max-w-[14rem] text-xs text-muted-foreground">
+                            {renderPeriodRange(row, formatTs)}
                           </TableCell>
-                          <TableCell className="whitespace-nowrap font-mono text-[11px] text-muted-foreground">
+                          <TableCell className="whitespace-nowrap text-xs text-muted-foreground">
                             {formatTs(row.finished_at)}
                           </TableCell>
-                          <TableCell className="whitespace-nowrap font-mono text-[11px] text-muted-foreground">
-                            {formatTs(row.created_at)}
-                          </TableCell>
-                          <TableCell className="sticky right-0 z-10 bg-card text-center shadow-[-1px_0_0_rgba(226,232,240,0.9)]">
-                            <AdminRowActionsMenu
-                              actions={[
-                                {
-                                  key: "view-details",
-                                  label: t("viewDetails"),
-                                  icon: Eye,
-                                  onClick: () => {
-                                    setSelectedId(row.id);
-                                    setItemsPage(1);
-                                    setDetailOpen(true);
-                                  },
-                                },
-                              ]}
-                            />
+                          <TableCell className="text-center">
+                            <Button
+                              type="button"
+                              size="sm"
+                              variant={selected ? "default" : "outline"}
+                              className="h-8"
+                              onClick={() => openJobDetail(row)}
+                            >
+                              {t("viewDetails")}
+                            </Button>
                           </TableCell>
                         </TableRow>
-                      ))
-                    )}
-                  </TableBody>
-                </Table>
-              </div>
+                      );
+                    })
+                  )}
+                </TableBody>
+              </Table>
               {jm ? (
-                <AdminListPaginationFooter
-                  selectId="reconcile-jobs-per-page"
-                  total={jm.total}
-                  page={jm.current_page}
-                  lastPage={Math.max(1, jm.last_page)}
-                  perPage={jm.per_page}
-                  loading={jobsLoading}
-                  onPerPageChange={(n) => {
-                    setPerPage(n);
-                    setPage(1);
-                  }}
-                  onPageChange={setPage}
-                />
+                <div className="mt-3 border-t border-border/60 pt-2">
+                  <AdminListPaginationFooter
+                    selectId="reconcile-jobs-per-page"
+                    total={jm.total}
+                    page={jm.current_page}
+                    lastPage={Math.max(1, jm.last_page)}
+                    perPage={jm.per_page}
+                    loading={jobsLoading}
+                    onPerPageChange={(n) => {
+                      setPerPage(n);
+                      setPage(1);
+                    }}
+                    onPageChange={setPage}
+                  />
+                </div>
               ) : null}
             </>
+          ) : jobsLoading ? (
+            <AdminNoResourceState message={t("loadFailed")} />
           ) : null}
-        </CardContent>
-      </Card>
+        </div>
+      </div>
 
       <Dialog
-        open={detailOpen}
+        open={selectedJob != null}
         onOpenChange={(open) => {
-          setDetailOpen(open);
           if (!open) {
-            setSelectedId(null);
-            setItems(null);
+            closeJobDetail();
           }
         }}
       >
         <DialogContent
+          className="flex max-h-[min(90vh,48rem)] w-full max-w-[min(72rem,calc(100%-2rem))] flex-col gap-0 overflow-hidden p-0 sm:max-w-[min(72rem,calc(100%-2rem))]"
           showCloseButton
-          className="flex h-[min(86vh,780px)] !max-w-[min(920px,calc(100vw-2rem))] flex-col gap-0 overflow-hidden p-0"
         >
-          <DialogHeader className="shrink-0 space-y-1 border-b bg-background px-5 py-4 pr-12">
-            <DialogTitle className="text-base">{t("detailsTitle")}</DialogTitle>
-            <DialogDescription className="font-mono text-xs">
-              {selectedJob ? `${selectedJob.job_no} · #${selectedJob.id}` : selectedId != null ? `#${selectedId}` : ""}
-            </DialogDescription>
-          </DialogHeader>
-          <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain bg-muted/15 px-5 py-4">
-            {itemsLoading && !items ? (
-              <AdminLoadingState minHeight="6rem" className="py-6" />
-            ) : null}
-            {items ? (
-              <>
-                <div className="mb-4 grid gap-3 md:grid-cols-3">
-                  <div className="rounded-lg border bg-background px-4 py-3">
-                    <div className="text-xs text-muted-foreground">{t("itemCount")}</div>
-                    <div className="mt-1 text-xl font-semibold tabular-nums">{selectedJobItemCount}</div>
-                  </div>
-                  <div className="rounded-lg border bg-background px-4 py-3">
-                    <div className="text-xs text-muted-foreground">{t("mismatchCount")}</div>
-                    <div className="mt-1 flex items-center gap-2 text-xl font-semibold tabular-nums text-amber-700">
-                      <ShieldAlert className="size-4" />
-                      {selectedJobMismatchCount}
-                    </div>
-                  </div>
-                  <div className="rounded-lg border bg-background px-4 py-3">
-                    <div className="text-xs text-muted-foreground">{t("matchedCount")}</div>
-                    <div className="mt-1 text-xl font-semibold tabular-nums">{selectedJobMatchedCount}</div>
-                  </div>
-                </div>
-                <div className="mb-3 flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
-                  <span>{t("jobNo")} {items.job_no}</span>
-                  <span>·</span>
-                  <span className="inline-flex items-center gap-1.5">
-                    {t("status")}
-                    {selectedJob ? (
-                      <AdminStatusBadge status={selectedJob.status}>
-                        {jobStatusLabel(selectedJob.status, t)}
-                      </AdminStatusBadge>
-                    ) : (
-                      "—"
-                    )}
-                  </span>
-                  <span>·</span>
-                  <span>{t("period")} {selectedJob ? renderPeriodRange(selectedJob, formatTs) : "—"}</span>
-                </div>
-                <div className="rounded-lg border bg-background">
-                  <Table id={`reconcile-items-table-${selectedId ?? "none"}`}>
-                    <TableHeader>
-                      <TableRow>
-                        <TableHead className="w-20">{t("table.id", { ns: "common" })}</TableHead>
-                        <TableHead className="min-w-[10rem]">{t("transferNo")}</TableHead>
-                        <TableHead className="min-w-[10rem]">{t("walletTxnNo")}</TableHead>
-                        <TableHead className="min-w-[10rem]">{t("mainSiteRef")}</TableHead>
-                        <TableHead className="w-28">{t("mainSiteCheck")}</TableHead>
-                        <TableHead className="w-28 text-right">{t("differenceAmount")}</TableHead>
-                        <TableHead className="w-32">{t("itemResult")}</TableHead>
-                        <TableHead className="w-28">{t("processingStatus")}</TableHead>
-                        <TableHead className="min-w-[12rem]">{t("actions")}</TableHead>
-                        <TableHead className="w-36">{t("detectedAt")}</TableHead>
-                      </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                      {items.items.length === 0 ? (
-                        <AdminTableNoResourceRow colSpan={10} />
-                      ) : (
-                        items.items.map((r) => (
-                          <TableRow
-                            key={r.id}
-                            className={cn(
-                              r.is_resolved !== true && "bg-amber-500/5",
-                            )}
-                          >
-                            <TableCell className="align-top">{r.id}</TableCell>
-                            <TableCell className="align-top font-mono text-xs break-all">{r.side_a_ref ?? "—"}</TableCell>
-                            <TableCell className="align-top font-mono text-xs break-all">{r.side_b_ref ?? "—"}</TableCell>
-                            <TableCell className="align-top font-mono text-xs break-all">
-                              {r.main_site_external_ref_no ?? r.external_ref_no ?? "—"}
-                            </TableCell>
-                            <TableCell className="align-top text-xs">
-                              {mainSiteCheckLabel(r.main_site_check, t)}
-                            </TableCell>
-                            <TableCell className="align-top text-right tabular-nums">
-                              <span
-                                className={cn(
-                                  r.difference_amount !== 0 ? "font-medium text-amber-700" : "text-muted-foreground",
-                                )}
-                              >
-                                {r.difference_amount}
-                              </span>
-                            </TableCell>
-                            <TableCell className="align-top">
-                              <AdminStatusBadge status={r.status}>
-                                {itemStatusLabel(r.status, t)}
-                              </AdminStatusBadge>
-                            </TableCell>
-                            <TableCell className="align-top">
-                              <AdminStatusBadge status={r.resolved_at ? "resolved" : "unresolved"} tone={itemResolutionTone(r)}>
-                                {itemResolutionLabel(r, t)}
-                              </AdminStatusBadge>
-                            </TableCell>
-                            <TableCell className="align-top min-w-[12rem]">
-                              <ReconcileItemActions
-                                row={r}
-                                canWriteWallet={canWriteWallet}
-                                busy={actionBusy}
-                                onCompleteCredit={(transferNo) => void runTransferAction(transferNo, "complete_credit")}
-                                onReverse={(transferNo) => void runTransferAction(transferNo, "reverse")}
-                                onManualProcess={(transferNo) => void runTransferAction(transferNo, "manually_process")}
-                              />
-                            </TableCell>
-                            <TableCell className="align-top whitespace-nowrap font-mono text-[11px] text-muted-foreground">
-                              {formatTs(r.created_at)}
-                            </TableCell>
-                          </TableRow>
-                        ))
-                      )}
-                    </TableBody>
-                  </Table>
-                </div>
-                {im ? (
-                  <div className="pt-4">
-                    <AdminListPaginationFooter
-                      selectId="reconcile-items-per-page"
-                      total={im.total}
-                      page={im.current_page}
-                      lastPage={Math.max(1, im.last_page)}
-                      perPage={im.per_page}
-                      loading={itemsLoading}
-                      onPerPageChange={(n) => {
-                        setItemsPerPage(n);
-                        setItemsPage(1);
-                      }}
-                      onPageChange={setItemsPage}
-                    />
-                  </div>
-                ) : null}
-              </>
-            ) : null}
-          </div>
+          {selectedJob ? (
+            <ReconcileJobDetailPanel
+              job={selectedJob}
+              items={items}
+              itemsLoading={itemsLoading}
+              itemsFilter={itemsFilter}
+              onItemsFilterChange={setItemsFilter}
+              canWriteWallet={canWriteWallet}
+              actionBusy={actionBusy}
+              onCompleteCredit={(transferNo) => void runTransferAction(transferNo, "complete_credit")}
+              onReverse={(transferNo) => void runTransferAction(transferNo, "reverse")}
+              onManualProcess={(transferNo) => void runTransferAction(transferNo, "manually_process")}
+              onItemsPageChange={setItemsPage}
+              onItemsPerPageChange={setItemsPerPage}
+            />
+          ) : null}
         </DialogContent>
       </Dialog>
+
       <ConfirmDialog />
     </div>
   );
-}
+}