manager is now using react

1 files changed, 66 insertions, 0 deletions

diff --git a/174bg/manager/src/components/RequiredInfo.jsx b/174bg/manager/src/components/RequiredInfo.jsx
new file mode 100644
index 0000000..67c6799
--- /dev/null
+++ b/174bg/manager/src/components/RequiredInfo.jsx
@@ -0,0 +1,66 @@
+import { RANK_NAMES } from "../lib/roles";
+
+const REQUIRED_INFO_FIELDS = [
+  { field: "id", label: "174BG ID" },
+  { field: "UEE_Citizen_Record_ID", label: "UEE Citizen Record ID" },
+  { field: "RSI_Display_Name", label: "RSI Display Name" },
+  { field: "RSI_Handle", label: "RSI Handle" },
+  { field: "joined_rsi_org", label: "Joined RSI Organisation" },
+  { field: "email", label: "Email" },
+  { field: "Branch", label: "Branch" },
+  { field: "Rank_Number", label: "Rank Number" },
+];
+
+export default function RequiredInfo({ record }) {
+  let anyMissing = false;
+
+  const rows = REQUIRED_INFO_FIELDS.map(({ field, label }) => {
+    const value = record?.[field];
+    // Treat only null/undefined/empty-string as missing so legitimately
+    // falsy values (e.g. Rank_Number 0, joined_rsi_org false) still show.
+    const missing = value == null || value === "";
+    if (missing) anyMissing = true;
+    return { field, label, value, missing };
+  });
+
+  const branch = record?.Branch;
+  const rankNumber = record?.Rank_Number;
+  const rankName = RANK_NAMES[branch]?.[rankNumber];
+  if (!rankName) anyMissing = true;
+
+  const staffRolesRaw = record?.StaffRoles;
+  const staffList = Array.isArray(staffRolesRaw)
+    ? staffRolesRaw
+    : staffRolesRaw
+      ? [staffRolesRaw]
+      : [];
+
+  return (
+    <div id="required-info">
+      <h2>Required Information</h2>
+      {rows.map(({ field, label, value, missing }) => (
+        <div key={field}>
+          <b>{label}:</b>{" "}
+          <span style={{ color: missing ? "red" : "" }}>
+            {missing ? "MISSING" : value}
+          </span>
+        </div>
+      ))}
+      <div>
+        <b>Rank Name:</b>{" "}
+        <span style={{ color: rankName ? "" : "red" }}>
+          {rankName ?? "MISSING"}
+        </span>
+      </div>
+      <div>
+        <b>Staff Roles:</b>{" "}
+        <span>{staffList.length > 0 ? staffList.join(", ") : "none"}</span>
+      </div>
+      {anyMissing && (
+        <div id="profile-warning">
+          ⚠️ Your profile is incomplete. Message an officer ASAP!
+        </div>
+      )}
+    </div>
+  );
+}