feat: enhance housekeeping page with search, import mode and inline form editing

src/app/admin/housekeeping/page.tsx

@@ -4,20 +4,42 @@ import { prisma } from "@/lib/prisma";
 
 export const dynamic = "force-dynamic";
 
-export default async function AdminHousekeeping() {
+export default async function AdminHousekeeping({
+  searchParams,
+}: {
+  searchParams: Promise<{ q?: string; mode?: "manage" | "import" }>;
+}) {
+  const sp = await searchParams;
+  const q = (sp.q ?? "").trim();
+  const mode = sp.mode === "import" ? "import" : "manage";
+
   let permissions: Awaited<
     ReturnType<typeof prisma.websiteHousekeepingPermissions.findMany>
   > = [];
   try {
     permissions = await prisma.websiteHousekeepingPermissions.findMany({
-      orderBy: [{ minRank: "asc" }, { permission: "asc" }],
+      orderBy: [{ permission: "asc" }],
     });
   } catch {
     permissions = [];
   }
 
+  const filtered = q
+    ? permissions.filter((p) => p.permission.toLowerCase().includes(q.toLowerCase()))
+    : permissions;
+
   const ranks = permissions.map((p) => p.minRank);
   const maxRank = ranks.length ? Math.max(...ranks) : 0;
+  const totalMin = ranks.reduce((sum, r) => sum + r, 0);
+
+  const selectedIds = new Set<number>();
+  if (mode === "import") {
+    const importRaw = String(sp.q ?? "");
+    if (importRaw) {
+      const importIds = importRaw.split(",").map((i) => Number(i.trim())).filter((i) => !isNaN(i));
+      importIds.forEach((id) => selectedIds.add(id));
+    }
+  }
 
   return (
     <main>
@@ -30,8 +52,51 @@ export default async function AdminHousekeeping() {
       <div className="admin-stats">
         <StatusCard label="Permissions" value={permissions.length} icon="🔑" />
         <StatusCard label="Highest min rank" value={maxRank} icon="⬆️" />
+        <StatusCard label="Total min rank" value={totalMin} icon="∑" />
       </div>
 
+      <div className="card admin-section-header" style={{ marginBottom: "1rem" }}>
+        <div style={{ display: "flex", gap: "0.5rem", alignItems: "center", flexWrap: "wrap" }}>
+          <form style={{ display: "flex", gap: "0.5rem", flex: 1 }}>
+            <input
+              name="q"
+              defaultValue={q}
+              placeholder="Search permission key..."
+              style={{ flex: 1, minWidth: 220 }}
+            />
+            <button type="submit" className="btn btn-primary">Search</button>
+          </form>
+          <div style={{ display: "flex", gap: "0.5rem" }}>
+            <button
+              type="button"
+              className="btn btn-outline"
+              onClick={() => window.location.href = window.location.pathname + "?mode=manage"}
+            >
+              Manage
+            </button>
+            <button
+              type="button"
+              className="btn btn-outline"
+              onClick={() => window.location.href = window.location.pathname + "?mode=import&form=selected_ids"}
+            >
+              Import selection
+            </button>
+            <button
+              type="button"
+              className="btn btn-danger"
+              onClick={() => {
+                if (confirm("Are you sure you want to delete selected permissions?")) {
+                  // TODO: implement bulk delete
+                }
+              }}
+            >
+              Delete selected
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {mode === "manage" ? (
         <section className="admin-section">
           <h2>Add / overwrite permission</h2>
           <form action={upsertPermission} className="card">
@@ -39,24 +104,37 @@ export default async function AdminHousekeeping() {
               <input name="permission" placeholder="permission key" required style={{ minWidth: 200 }} />
               <input name="minRank" type="number" min={0} placeholder="Min rank" required style={{ width: 110 }} />
               <input name="description" placeholder="description" style={{ flex: 1, minWidth: 160 }} />
-            <button type="submit" className="btn btn-primary">
+              <button type="submit" className="btn btn-primary">Save</button>
-              Save
-            </button>
             </div>
           </form>
         </section>
+      ) : (
+        <section className="admin-section">
+          <h2>Import Permissions</h2>
+          <p className="muted" style={{ marginTop: "-0.4rem" }}>
+            Paste comma-separated permission IDs to import them as a selection.
+          </p>
+          <form action={upsertPermission} className="card">
+            <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
+              <input name="q" placeholder="Permission IDs (comma-separated)" required style={{ flex: 1, minWidth: 200 }} />
+              <button type="submit" className="btn btn-primary">Import</button>
+            </div>
+          </form>
+        </section>
+      )}
 
       <section className="admin-section">
         <h2>
-          Permissions <span className="admin-badge">{permissions.length}</span>
+          Permissions <span className="admin-badge">{filtered.length}</span>
         </h2>
-        {permissions.length === 0 ? (
+        {filtered.length === 0 ? (
-          <p className="muted">No housekeeping permissions defined yet.</p>
+          <p className="muted">No housekeeping permissions match this search.</p>
         ) : (
           <div className="card" style={{ padding: 0, overflowX: "auto" }}>
             <table>
               <thead>
                 <tr>
+                  <th style={{ width: "40px" }}>#</th>
                   <th>Permission</th>
                   <th>Description</th>
                   <th style={{ width: 200 }}>Min rank</th>
@@ -64,8 +142,9 @@ export default async function AdminHousekeeping() {
                 </tr>
               </thead>
               <tbody>
-                {permissions.map((p) => (
+                {filtered.map((p, i) => (
-                  <tr key={String(p.id)}>
+                  <tr key={String(p.id)} style={mode === "import" && selectedIds.has(i) ? { backgroundColor: "color-mix(in srgb, var(--color-primary) 5%, transparent)" } : {}}>
+                    <td className="muted" style={{ width: "40px" }}>{i + 1}</td>
                     <td>
                       <strong>{p.permission}</strong>
                     </td>