Projeto bot pontos

web/app/(painel)/contas/page.tsx

@@ -0,0 +1,84 @@
+import { ForbiddenError, apiGet } from "@/lib/server-api";
+import { fmtDateTime } from "@/lib/format";
+import type { Account, Me, UserSummary } from "@/lib/types";
+import { AccountActions, CreateAccountForm } from "./forms";
+
+export default async function AccountsPage() {
+  const me = await apiGet<Me>("/auth/me");
+  if (me.account.role !== "owner") {
+    return (
+      <>
+        <h1>Contas do painel</h1>
+        <p className="muted">Somente contas owner gerenciam as contas do painel.</p>
+      </>
+    );
+  }
+
+  let accounts: Account[] = [];
+  let users: UserSummary[] = [];
+  try {
+    [accounts, users] = await Promise.all([
+      apiGet<{ accounts: Account[] }>("/accounts").then((r) => r.accounts),
+      apiGet<{ users: UserSummary[] }>("/users").then((r) => r.users),
+    ]);
+  } catch (err) {
+    if (!(err instanceof ForbiddenError)) throw err;
+  }
+  const userOptions = users.map((u) => ({ id: u.id, name: u.display_name }));
+
+  return (
+    <>
+      <h1>Contas do painel</h1>
+      <p className="muted">
+        <strong>owner</strong> gerencia contas; <strong>admin</strong> altera usuários, lembretes, feriados e
+        configurações; <strong>leitura</strong> só consulta. Uma conta de leitura ligada a um usuário do Telegram enxerga e
+        altera somente os dados desse usuário. Sempre existe pelo menos um owner ativo.
+      </p>
+
+      <div className="table-wrap">
+        <table>
+          <thead>
+            <tr>
+              <th>Usuário</th>
+              <th>Papel</th>
+              <th>Usuário do Telegram</th>
+              <th>Situação</th>
+              <th>Último login</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody>
+            {accounts.map((a) => (
+              <tr key={a.id}>
+                <td>
+                  {a.username}
+                  {a.id === me.account.id && <span className="muted"> (você)</span>}
+                </td>
+                <td>{a.role === "viewer" ? "leitura" : a.role}</td>
+                <td>{userOptions.find((u) => u.id === a.user_id)?.name ?? <span className="muted">—</span>}</td>
+                <td>
+                  {a.disabled ? (
+                    <span className="badge error">desativada</span>
+                  ) : a.locked_until && new Date(a.locked_until) > new Date() ? (
+                    <span className="badge warn">bloqueada até {fmtDateTime(a.locked_until)}</span>
+                  ) : (
+                    <span className="badge ok">ativa</span>
+                  )}
+                </td>
+                <td>{fmtDateTime(a.last_login_at)}</td>
+                <td>
+                  <AccountActions account={a} isSelf={a.id === me.account.id} users={userOptions} />
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      <section className="card">
+        <h2>Nova conta</h2>
+        <CreateAccountForm users={userOptions} />
+      </section>
+    </>
+  );
+}