Skip to content

EOL Upgrade #129

Open
Open
EOL Upgrade#129
@rogelambrocio-byte

Description

@rogelambrocio-byte
rogelambrocio-byte
opened on Apr 27, 2026

import { useState, useMemo } from "react";

const STATUS_OPTIONS = [
"Completed Upgrade",
"Completed Traffic Swing",
"Decommed",
"For Decom (Housekeeping)",
"For Decom (Upgrade Not Needed)",
"For Decomm",
"Access",
"In Progress",
"Pending",
"",
];

const STATUS_COLORS = {
"Completed Upgrade": { bg: "#1a3a5c", text: "#7ec8f4", dot: "#4da6d8" },
"Completed Traffic Swing": { bg: "#0e2a40", text: "#5bbcf0", dot: "#3399cc" },
"Decommed": { bg: "#1a3d1a", text: "#7dcc7d", dot: "#4caf50" },
"For Decom (Housekeeping)": { bg: "#2a3d14", text: "#b5e07a", dot: "#8bc34a" },
"For Decom (Upgrade Not Needed)": { bg: "#3d2e00", text: "#f5c842", dot: "#e6a817" },
"For Decomm": { bg: "#3d2e00", text: "#f5c842", dot: "#e6a817" },
"Access": { bg: "#3d1a2e", text: "#f07ab5", dot: "#e91e8c" },
"In Progress": { bg: "#1a2a3d", text: "#80b3ff", dot: "#4488ff" },
"Pending": { bg: "#2d2d2d", text: "#aaaaaa", dot: "#888888" },
"": { bg: "#1e1e1e", text: "#666", dot: "#555" },
};

const ENV_COLORS = {
Prod: { bg: "#2a1a1a", text: "#ff7c7c", border: "#c0392b" },
NonProd: { bg: "#1a2a1a", text: "#7ccc7c", border: "#27ae60" },
};

const RAW_DATA = [
{ name: "amex-db-cluster4pro", tribe: "B2C", environment: "Prod", status: "", notes: "" },
{ name: "amex-db-cluster4pro-replica", tribe: "B2C", environment: "Prod", status: "", notes: "" },
{ name: "bifrost-prod", tribe: "Technology", environment: "Prod", status: "", notes: "" },
{ name: "buyload-test", tribe: "B2C", environment: "NonProd", status: "For Decomm", notes: "" },
{ name: "cluster5-shared-db-uat", tribe: "Technology", environment: "NonProd", status: "", notes: "" },
{ name: "ctr4pushnotifsvcdbpro", tribe: "Technology", environment: "Prod", status: "", notes: "" },
{ name: "ctr4pushnotifsvcdbpro-replica", tribe: "Technology", environment: "Prod", status: "", notes: "" },
{ name: "db-optimization-prod", tribe: "DBOps", environment: "NonProd", status: "", notes: "" },
{ name: "devtools-perf", tribe: "Technology", environment: "NonProd", status: "", notes: "" },
{ name: "gloanrds-prd", tribe: "Lending", environment: "Prod", status: "", notes: "" },
{ name: "gloanrds-prd-replica", tribe: "Lending", environment: "Prod", status: "", notes: "" },
{ name: "golbat", tribe: "B2B", environment: "Prod", status: "Decommed", notes: "" },
{ name: "golbat-replica", tribe: "B2B", environment: "Prod", status: "Decommed", notes: "" },
{ name: "knowhere", tribe: "B2C", environment: "Prod", status: "", notes: "" },
{ name: "konga", tribe: "Technology", environment: "Prod", status: "Access", notes: "" },
{ name: "konga-kong-cluster-production", tribe: "Technology", environment: "Prod", status: "", notes: "" },
{ name: "konga-kong-cluster-uat", tribe: "Technology", environment: "NonProd", status: "", notes: "" },
{ name: "l2-ackerman", tribe: "L2", environment: "Prod", status: "", notes: "" },
{ name: "marvel", tribe: "Technology", environment: "Prod", status: "", notes: "" },
{ name: "octdbprod", tribe: "Enterprise Services", environment: "Prod", status: "", notes: "" },
{ name: "octdbprod-old1", tribe: "Enterprise Services", environment: "Prod", status: "Decommed", notes: "" },
{ name: "partner-notifs-prd", tribe: "Lending", environment: "Prod", status: "Access", notes: "binlog_format (Mixed)" },
{ name: "partner-notifs-prd-replica", tribe: "Lending", environment: "Prod", status: "", notes: "" },
{ name: "payments-pickaxe-production", tribe: "B2C", environment: "Prod", status: "", notes: "" },
{ name: "payments-pickaxe-replica-production", tribe: "B2C", environment: "Prod", status: "", notes: "" },
{ name: "promocode", tribe: "New Business", environment: "Prod", status: "", notes: "" },
{ name: "promocode-replica", tribe: "New Business", environment: "Prod", status: "", notes: "" },
{ name: "rcbc", tribe: "Funds", environment: "Prod", status: "", notes: "No objects" },
{ name: "rcbc-replica", tribe: "Funds", environment: "Prod", status: "", notes: "" },
{ name: "sem-automation-rds", tribe: "Technology", environment: "NonProd", status: "", notes: "" },
{ name: "sendmoney-kkb-replica", tribe: "Funds", environment: "Prod", status: "For Decomm", notes: "" },
{ name: "sendmoney-perf", tribe: "Funds", environment: "NonProd", status: "For Decomm", notes: "" },
{ name: "shared-db-cluster1uat", tribe: "Technology", environment: "NonProd", status: "", notes: "" },
{ name: "shared-db-cluster1uat-replica", tribe: "Technology", environment: "NonProd", status: "", notes: "" },
{ name: "shared-db-cluster2uat", tribe: "Technology", environment: "NonProd", status: "", notes: "" },
{ name: "shared-db-cluster2uat-replica", tribe: "Technology", environment: "NonProd", status: "", notes: "" },
{ name: "shared-db-cluster4uat", tribe: "Technology", environment: "NonProd", status: "", notes: "" },
{ name: "shared-db-cluster4uat-replica", tribe: "Technology", environment: "NonProd", status: "", notes: "" },
{ name: "shared-rds-sit", tribe: "Technology", environment: "NonProd", status: "", notes: "" },
{ name: "shared-rds-sit-16-june-test", tribe: "Technology", environment: "NonProd", status: "For Decomm", notes: "" },
{ name: "sqlag-rds-uat", tribe: "DBOps", environment: "NonProd", status: "", notes: "MTCSD-287542" },
{ name: "telcoscore-db-prod", tribe: "New Business", environment: "Prod", status: "", notes: "" },
{ name: "telcoscore-db-prod-replica", tribe: "New Business", environment: "Prod", status: "", notes: "" },
{ name: "telcoscore-db-uat", tribe: "New Business", environment: "NonProd", status: "", notes: "" },
{ name: "unicorn-rds-sit", tribe: "New Business", environment: "NonProd", status: "", notes: "" },
{ name: "user-consent-serv", tribe: "Customer and Integration", environment: "Prod", status: "", notes: "" },
{ name: "user-consent-serv-replica", tribe: "Customer and Integration", environment: "Prod", status: "", notes: "" },
{ name: "ussd", tribe: "B2C", environment: "Prod", status: "", notes: "" },
{ name: "ussd-replica", tribe: "B2C", environment: "Prod", status: "", notes: "" },
{ name: "victoria-prd", tribe: "Lending", environment: "Prod", status: "Access", notes: "" },
{ name: "victoria-replica", tribe: "Lending", environment: "Prod", status: "", notes: "" },
{ name: "vmacqdpd01", tribe: "Funds", environment: "Prod", status: "", notes: "" },
{ name: "vmacqdpd01-replica", tribe: "Funds", environment: "Prod", status: "", notes: "" },
{ name: "vmbaiddv01", tribe: "Funds", environment: "NonProd", status: "", notes: "" },
{ name: "vmcladpd01", tribe: "Segments", environment: "Prod", status: "", notes: "" },
{ name: "vmcladpd02", tribe: "Segments", environment: "Prod", status: "", notes: "" },
{ name: "vmcladut01", tribe: "Segments", environment: "NonProd", status: "Completed Upgrade", notes: "Done April 20" },
{ name: "vmcladut02", tribe: "Segments", environment: "NonProd", status: "Completed Upgrade", notes: "Done April 20" },
{ name: "vmpokappdpd03", tribe: "B2B", environment: "Prod", status: "", notes: "" },
{ name: "vmpokappdpd03-replica", tribe: "B2B", environment: "Prod", status: "", notes: "" },
{ name: "vmpokdisdpd03", tribe: "B2B", environment: "Prod", status: "", notes: "" },
{ name: "vmpokdisdpd03-replica", tribe: "B2B", environment: "Prod", status: "", notes: "" },
{ name: "vmpokdispduat01", tribe: "B2B", environment: "NonProd", status: "Completed Upgrade", notes: "Done April 23" },
{ name: "vmpokdispduat01-old1", tribe: "B2B", environment: "NonProd", status: "Decommed", notes: "Done April 23" },
{ name: "vmpokpduat01", tribe: "B2B", environment: "NonProd", status: "Completed Upgrade", notes: "Done April 23" },
{ name: "vmrqrddv01", tribe: "Segments", environment: "NonProd", status: "", notes: "" },
{ name: "vmrqrdpd01", tribe: "Segments", environment: "Prod", status: "Access", notes: "" },
{ name: "wiirdsmysql", tribe: "Lending", environment: "NonProd", status: "Completed Upgrade", notes: "Done April 23" },
{ name: "wiirdsmysql-replica", tribe: "Lending", environment: "NonProd", status: "Completed Upgrade", notes: "Done April 23" },
{ name: "wiirdsprd", tribe: "Lending", environment: "Prod", status: "", notes: "" },
{ name: "wiirdsprd-replica", tribe: "Lending", environment: "Prod", status: "", notes: "" },
{ name: "wire-sms-production", tribe: "Technology", environment: "Prod", status: "", notes: "binlog_format (Mixed)" },
{ name: "wire-sms-production-replica", tribe: "Technology", environment: "Prod", status: "", notes: "" },
{ name: "xrecon-logs-uat", tribe: "Enterprise Services", environment: "NonProd", status: "Completed Upgrade", notes: "Done April 20" },
];

const TRIBES = [...new Set(RAW_DATA.map(r => r.tribe))].sort();

function StatusBadge({ status }) {
const c = STATUS_COLORS[status] || STATUS_COLORS[""];
return (
<span style={{
background: c.bg,
color: c.text,
border: 1px solid ${c.dot}33,
borderRadius: 4,
padding: "2px 8px",
fontSize: 11,
fontFamily: "'IBM Plex Mono', monospace",
whiteSpace: "nowrap",
display: "inline-flex",
alignItems: "center",
gap: 5,
}}>
<span style={{ width: 6, height: 6, borderRadius: "50%", background: c.dot, flexShrink: 0 }} />
{status || "—"}

);
}

function EnvBadge({ env }) {
const c = ENV_COLORS[env] || { bg: "#222", text: "#aaa", border: "#555" };
return (
<span style={{
background: c.bg,
color: c.text,
border: 1px solid ${c.border}55,
borderRadius: 3,
padding: "1px 7px",
fontSize: 11,
fontFamily: "'IBM Plex Mono', monospace",
letterSpacing: "0.03em",
}}>{env}
);
}

export default function App() {
const [data, setData] = useState(RAW_DATA.map((r, i) => ({ ...r, id: i })));
const [editingId, setEditingId] = useState(null);
const [editValues, setEditValues] = useState({});
const [filterTribe, setFilterTribe] = useState("All");
const [filterEnv, setFilterEnv] = useState("All");
const [filterStatus, setFilterStatus] = useState("All");
const [search, setSearch] = useState("");
const [showAddRow, setShowAddRow] = useState(false);
const [newRow, setNewRow] = useState({ name: "", tribe: "B2C", environment: "Prod", status: "", notes: "" });
const [activeTab, setActiveTab] = useState("table");

const filtered = useMemo(() => data.filter(r => {
if (filterTribe !== "All" && r.tribe !== filterTribe) return false;
if (filterEnv !== "All" && r.environment !== filterEnv) return false;
if (filterStatus !== "All" && r.status !== filterStatus) return false;
if (search && !r.name.toLowerCase().includes(search.toLowerCase()) && !r.tribe.toLowerCase().includes(search.toLowerCase())) return false;
return true;
}), [data, filterTribe, filterEnv, filterStatus, search]);

const summary = useMemo(() => {
const counts = {};
data.forEach(r => {
const k = r.status || "Pending";
counts[k] = (counts[k] || 0) + 1;
});
return counts;
}, [data]);

const tribeBreakdown = useMemo(() => {
const counts = {};
data.forEach(r => {
counts[r.tribe] = (counts[r.tribe] || 0) + 1;
});
return Object.entries(counts).sort((a, b) => b[1] - a[1]);
}, [data]);

function startEdit(row) {
setEditingId(row.id);
setEditValues({ status: row.status, notes: row.notes, tribe: row.tribe, environment: row.environment });
}

function saveEdit(id) {
setData(prev => prev.map(r => r.id === id ? { ...r, ...editValues } : r));
setEditingId(null);
}

function deleteRow(id) {
setData(prev => prev.filter(r => r.id !== id));
}

function addRow() {
if (!newRow.name.trim()) return;
setData(prev => [...prev, { ...newRow, id: Date.now() }]);
setNewRow({ name: "", tribe: "B2C", environment: "Prod", status: "", notes: "" });
setShowAddRow(false);
}

const allStatuses = [...new Set(data.map(r => r.status))].sort();

return (
<div style={{
minHeight: "100vh",
background: "#0d0d0d",
color: "#e0e0e0",
fontFamily: "'IBM Plex Sans', 'Segoe UI', sans-serif",
padding: "0",
}}>
{/* Header */}
<div style={{
background: "linear-gradient(135deg, #0a1628 0%, #0d1f3c 50%, #091a2e 100%)",
borderBottom: "1px solid #1e3a5f",
padding: "20px 28px 0",
}}>
<div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", marginBottom: 16 }}>


<div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 4 }}>
<span style={{
background: "#1a4a8a",
color: "#7ec8f4",
fontSize: 10,
padding: "2px 8px",
borderRadius: 2,
letterSpacing: "0.12em",
fontFamily: "'IBM Plex Mono', monospace",
fontWeight: 600,
}}>MYSQL 8.4
<span style={{ color: "#3a6a9a", fontSize: 11 }}>RDS UPGRADE TRACKER

<h1 style={{
margin: 0,
fontSize: 22,
fontWeight: 700,
color: "#d4e9ff",
letterSpacing: "-0.01em",
}}>MySQL RDS Upgrade Dashboard
<p style={{ margin: "4px 0 0", fontSize: 12, color: "#4a7aaa" }}>
Total: <strong style={{ color: "#7ec8f4" }}>{data.length} instances tracked



<button
onClick={() => setShowAddRow(!showAddRow)}
style={{
background: "#1a4a8a",
color: "#7ec8f4",
border: "1px solid #2a6ab5",
borderRadius: 5,
padding: "7px 14px",
fontSize: 12,
cursor: "pointer",
fontFamily: "inherit",
display: "flex",
alignItems: "center",
gap: 6,
}}>
+ Add Instance

    {/* Tabs */}
    <div style={{ display: "flex", gap: 0 }}>
      {["table", "summary"].map(tab => (
        <button key={tab} onClick={() => setActiveTab(tab)} style={{
          background: activeTab === tab ? "#0d0d0d" : "transparent",
          color: activeTab === tab ? "#7ec8f4" : "#4a7aaa",
          border: "none",
          borderTop: activeTab === tab ? "2px solid #4a9adf" : "2px solid transparent",
          borderLeft: "1px solid " + (activeTab === tab ? "#1e3a5f" : "transparent"),
          borderRight: "1px solid " + (activeTab === tab ? "#1e3a5f" : "transparent"),
          padding: "8px 18px",
          fontSize: 12,
          fontFamily: "inherit",
          cursor: "pointer",
          letterSpacing: "0.06em",
          textTransform: "uppercase",
        }}>
          {tab === "table" ? "Instance Table" : "Summary View"}
        </button>
      ))}
    </div>
  </div>

  <div style={{ padding: "20px 28px" }}>

    {/* Add Row Form */}
    {showAddRow && (
      <div style={{
        background: "#111c2e",
        border: "1px solid #1e3a5f",
        borderRadius: 8,
        padding: "16px",
        marginBottom: 20,
        display: "grid",
        gridTemplateColumns: "2fr 1fr 1fr 1.5fr 2fr auto",
        gap: 10,
        alignItems: "end",
      }}>
        {[
          ["RDS Name", "name", "text"],
          ["Tribe", "tribe", "tribe-select"],
          ["Environment", "environment", "env-select"],
          ["Status", "status", "status-select"],
          ["Notes", "notes", "text"],
        ].map(([label, key, type]) => (
          <div key={key}>
            <div style={{ fontSize: 10, color: "#4a7aaa", marginBottom: 4, letterSpacing: "0.08em" }}>{label}</div>
            {type === "text" ? (
              <input value={newRow[key]} onChange={e => setNewRow(p => ({ ...p, [key]: e.target.value }))}
                style={{ width: "100%", background: "#0d1f3c", border: "1px solid #1e3a5f", color: "#cde", borderRadius: 4, padding: "6px 8px", fontSize: 12, fontFamily: "'IBM Plex Mono', monospace", boxSizing: "border-box" }} />
            ) : type === "tribe-select" ? (
              <select value={newRow[key]} onChange={e => setNewRow(p => ({ ...p, [key]: e.target.value }))}
                style={{ width: "100%", background: "#0d1f3c", border: "1px solid #1e3a5f", color: "#cde", borderRadius: 4, padding: "6px 8px", fontSize: 12, fontFamily: "inherit" }}>
                {TRIBES.map(t => <option key={t}>{t}</option>)}
              </select>
            ) : type === "env-select" ? (
              <select value={newRow[key]} onChange={e => setNewRow(p => ({ ...p, [key]: e.target.value }))}
                style={{ width: "100%", background: "#0d1f3c", border: "1px solid #1e3a5f", color: "#cde", borderRadius: 4, padding: "6px 8px", fontSize: 12, fontFamily: "inherit" }}>
                <option>Prod</option><option>NonProd</option>
              </select>
            ) : (
              <select value={newRow[key]} onChange={e => setNewRow(p => ({ ...p, [key]: e.target.value }))}
                style={{ width: "100%", background: "#0d1f3c", border: "1px solid #1e3a5f", color: "#cde", borderRadius: 4, padding: "6px 8px", fontSize: 12, fontFamily: "inherit" }}>
                {STATUS_OPTIONS.map(s => <option key={s} value={s}>{s || "— none —"}</option>)}
              </select>
            )}
          </div>
        ))}
        <button onClick={addRow} style={{
          background: "#1a4a8a", color: "#7ec8f4", border: "1px solid #2a6ab5",
          borderRadius: 4, padding: "7px 14px", fontSize: 12, cursor: "pointer", fontFamily: "inherit"
        }}>Add</button>
      </div>
    )}

    {activeTab === "table" && (
      <>
        {/* Filters */}
        <div style={{ display: "flex", gap: 10, marginBottom: 16, flexWrap: "wrap", alignItems: "center" }}>
          <input placeholder="🔍  Search name or tribe…" value={search} onChange={e => setSearch(e.target.value)}
            style={{ background: "#111c2e", border: "1px solid #1e3a5f", color: "#cde", borderRadius: 5, padding: "7px 12px", fontSize: 12, fontFamily: "inherit", width: 220 }} />
          {[
            ["Tribe", filterTribe, setFilterTribe, ["All", ...TRIBES]],
            ["Env", filterEnv, setFilterEnv, ["All", "Prod", "NonProd"]],
            ["Status", filterStatus, setFilterStatus, ["All", ...allStatuses]],
          ].map(([label, val, setter, opts]) => (
            <div key={label} style={{ display: "flex", alignItems: "center", gap: 6 }}>
              <span style={{ fontSize: 11, color: "#4a7aaa", letterSpacing: "0.06em" }}>{label}</span>
              <select value={val} onChange={e => setter(e.target.value)}
                style={{ background: "#111c2e", border: "1px solid #1e3a5f", color: "#cde", borderRadius: 4, padding: "6px 10px", fontSize: 12, fontFamily: "inherit" }}>
                {opts.map(o => <option key={o} value={o}>{o || "— none —"}</option>)}
              </select>
            </div>
          ))}
          <span style={{ marginLeft: "auto", fontSize: 11, color: "#3a6a9a" }}>
            {filtered.length} of {data.length} instances
          </span>
        </div>

        {/* Table */}
        <div style={{ overflowX: "auto", borderRadius: 8, border: "1px solid #1a3050" }}>
          <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12 }}>
            <thead>
              <tr style={{ background: "#0a1a2e", borderBottom: "1px solid #1e3a5f" }}>
                {["#", "RDS Instance Name", "Tribe", "Environment", "Status", "Notes", "Actions"].map(h => (
                  <th key={h} style={{
                    padding: "10px 12px", textAlign: "left", color: "#4a8ab5",
                    fontWeight: 600, fontSize: 10, letterSpacing: "0.1em",
                    textTransform: "uppercase", whiteSpace: "nowrap",
                    borderRight: "1px solid #111c2e",
                  }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {filtered.map((row, idx) => (
                <tr key={row.id} style={{
                  background: idx % 2 === 0 ? "#0d0d0d" : "#0f1a28",
                  borderBottom: "1px solid #141e2e",
                  transition: "background 0.15s",
                }}
                  onMouseEnter={e => e.currentTarget.style.background = "#111c2e"}
                  onMouseLeave={e => e.currentTarget.style.background = idx % 2 === 0 ? "#0d0d0d" : "#0f1a28"}>
                  <td style={{ padding: "8px 12px", color: "#3a6a9a", fontFamily: "'IBM Plex Mono', monospace", fontSize: 11 }}>{idx + 1}</td>
                  <td style={{ padding: "8px 12px", color: "#b8d4f0", fontFamily: "'IBM Plex Mono', monospace", fontSize: 11 }}>{row.name}</td>

                  {/* Tribe */}
                  <td style={{ padding: "8px 12px" }}>
                    {editingId === row.id ? (
                      <select value={editValues.tribe} onChange={e => setEditValues(p => ({ ...p, tribe: e.target.value }))}
                        style={{ background: "#0d1f3c", border: "1px solid #2a6ab5", color: "#cde", borderRadius: 3, padding: "3px 6px", fontSize: 11, fontFamily: "inherit" }}>
                        {TRIBES.map(t => <option key={t}>{t}</option>)}
                      </select>
                    ) : <span style={{ color: "#9ab8d8", fontSize: 12 }}>{row.tribe}</span>}
                  </td>

                  {/* Environment */}
                  <td style={{ padding: "8px 12px" }}>
                    {editingId === row.id ? (
                      <select value={editValues.environment} onChange={e => setEditValues(p => ({ ...p, environment: e.target.value }))}
                        style={{ background: "#0d1f3c", border: "1px solid #2a6ab5", color: "#cde", borderRadius: 3, padding: "3px 6px", fontSize: 11, fontFamily: "inherit" }}>
                        <option>Prod</option><option>NonProd</option>
                      </select>
                    ) : <EnvBadge env={row.environment} />}
                  </td>

                  {/* Status */}
                  <td style={{ padding: "8px 12px" }}>
                    {editingId === row.id ? (
                      <select value={editValues.status} onChange={e => setEditValues(p => ({ ...p, status: e.target.value }))}
                        style={{ background: "#0d1f3c", border: "1px solid #2a6ab5", color: "#cde", borderRadius: 3, padding: "3px 6px", fontSize: 11, fontFamily: "inherit" }}>
                        {STATUS_OPTIONS.map(s => <option key={s} value={s}>{s || "— none —"}</option>)}
                      </select>
                    ) : <StatusBadge status={row.status} />}
                  </td>

                  {/* Notes */}
                  <td style={{ padding: "8px 12px", color: "#5a8aaa", fontSize: 11, fontStyle: "italic" }}>
                    {editingId === row.id ? (
                      <input value={editValues.notes} onChange={e => setEditValues(p => ({ ...p, notes: e.target.value }))}
                        style={{ background: "#0d1f3c", border: "1px solid #2a6ab5", color: "#cde", borderRadius: 3, padding: "3px 6px", fontSize: 11, fontFamily: "'IBM Plex Mono', monospace", width: 140 }} />
                    ) : row.notes || ""}
                  </td>

                  {/* Actions */}
                  <td style={{ padding: "8px 12px", whiteSpace: "nowrap" }}>
                    {editingId === row.id ? (
                      <div style={{ display: "flex", gap: 6 }}>
                        <button onClick={() => saveEdit(row.id)} style={{ background: "#1a4a8a", color: "#7ec8f4", border: "none", borderRadius: 3, padding: "3px 10px", fontSize: 11, cursor: "pointer" }}>Save</button>
                        <button onClick={() => setEditingId(null)} style={{ background: "#1a2a3a", color: "#7aaa9a", border: "none", borderRadius: 3, padding: "3px 8px", fontSize: 11, cursor: "pointer" }}>✕</button>
                      </div>
                    ) : (
                      <div style={{ display: "flex", gap: 6 }}>
                        <button onClick={() => startEdit(row)} style={{ background: "#0d1f3c", color: "#4a8ab5", border: "1px solid #1e3a5f", borderRadius: 3, padding: "3px 8px", fontSize: 11, cursor: "pointer" }}>Edit</button>
                        <button onClick={() => deleteRow(row.id)} style={{ background: "#1a0a0a", color: "#aa4444", border: "1px solid #3a1a1a", borderRadius: 3, padding: "3px 8px", fontSize: 11, cursor: "pointer" }}>Del</button>
                      </div>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </>
    )}

    {activeTab === "summary" && (
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
        {/* Status Summary */}
        <div style={{ background: "#0a1628", border: "1px solid #1e3a5f", borderRadius: 8, padding: 20 }}>
          <h3 style={{ margin: "0 0 16px", color: "#7ec8f4", fontSize: 13, letterSpacing: "0.08em", textTransform: "uppercase" }}>Overall Status</h3>
          {Object.entries(summary).sort((a, b) => b[1] - a[1]).map(([status, count]) => {
            const c = STATUS_COLORS[status] || STATUS_COLORS[""];
            const pct = ((count / data.length) * 100).toFixed(1);
            return (
              <div key={status} style={{ marginBottom: 12 }}>
                <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 4 }}>
                  <span style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 12 }}>
                    <span style={{ width: 8, height: 8, borderRadius: "50%", background: c.dot }} />
                    <span style={{ color: c.text }}>{status || "—"}</span>
                  </span>
                  <span style={{ color: "#7ec8f4", fontFamily: "'IBM Plex Mono', monospace", fontSize: 12 }}>
                    {count} <span style={{ color: "#3a6a9a" }}>({pct}%)</span>
                  </span>
                </div>
                <div style={{ height: 4, background: "#0d1f3c", borderRadius: 2 }}>
                  <div style={{ height: 4, width: `${pct}%`, background: c.dot, borderRadius: 2, transition: "width 0.5s" }} />
                </div>
              </div>
            );
          })}
        </div>

        {/* Tribe Breakdown */}
        <div style={{ background: "#0a1628", border: "1px solid #1e3a5f", borderRadius: 8, padding: 20 }}>
          <h3 style={{ margin: "0 0 16px", color: "#7ec8f4", fontSize: 13, letterSpacing: "0.08em", textTransform: "uppercase" }}>By Tribe</h3>
          {tribeBreakdown.map(([tribe, count]) => {
            const pct = ((count / data.length) * 100).toFixed(1);
            return (
              <div key={tribe} style={{ marginBottom: 10 }}>
                <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 3 }}>
                  <span style={{ color: "#9ab8d8", fontSize: 12 }}>{tribe}</span>
                  <span style={{ color: "#7ec8f4", fontFamily: "'IBM Plex Mono', monospace", fontSize: 12 }}>
                    {count} <span style={{ color: "#3a6a9a" }}>({pct}%)</span>
                  </span>
                </div>
                <div style={{ height: 3, background: "#0d1f3c", borderRadius: 2 }}>
                  <div style={{ height: 3, width: `${pct}%`, background: "#2a6ab5", borderRadius: 2, transition: "width 0.5s" }} />
                </div>
              </div>
            );
          })}
        </div>

        {/* Env split */}
        <div style={{ background: "#0a1628", border: "1px solid #1e3a5f", borderRadius: 8, padding: 20 }}>
          <h3 style={{ margin: "0 0 16px", color: "#7ec8f4", fontSize: 13, letterSpacing: "0.08em", textTransform: "uppercase" }}>Prod vs NonProd</h3>
          {["Prod", "NonProd"].map(env => {
            const count = data.filter(r => r.environment === env).length;
            const pct = ((count / data.length) * 100).toFixed(1);
            const c = ENV_COLORS[env];
            return (
              <div key={env} style={{ marginBottom: 14 }}>
                <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 4 }}>
                  <span style={{ color: c.text, fontSize: 13 }}>{env}</span>
                  <span style={{ color: "#7ec8f4", fontFamily: "'IBM Plex Mono', monospace", fontSize: 12 }}>
                    {count} <span style={{ color: "#3a6a9a" }}>({pct}%)</span>
                  </span>
                </div>
                <div style={{ height: 6, background: "#0d1f3c", borderRadius: 3 }}>
                  <div style={{ height: 6, width: `${pct}%`, background: c.border, borderRadius: 3 }} />
                </div>
              </div>
            );
          })}
        </div>

        {/* Quick stats */}
        <div style={{ background: "#0a1628", border: "1px solid #1e3a5f", borderRadius: 8, padding: 20 }}>
          <h3 style={{ margin: "0 0 16px", color: "#7ec8f4", fontSize: 13, letterSpacing: "0.08em", textTransform: "uppercase" }}>Quick Stats</h3>
          {[
            ["Total Instances", data.length, "#7ec8f4"],
            ["Completed Upgrade", data.filter(r => r.status === "Completed Upgrade").length, "#4da6d8"],
            ["Decommed", data.filter(r => r.status === "Decommed").length, "#4caf50"],
            ["For Decomm", data.filter(r => r.status?.startsWith("For Decomm")).length, "#e6a817"],
            ["No Status Yet", data.filter(r => !r.status).length, "#888"],
          ].map(([label, val, color]) => (
            <div key={label} style={{ display: "flex", justifyContent: "space-between", padding: "8px 0", borderBottom: "1px solid #111c2e" }}>
              <span style={{ color: "#9ab8d8", fontSize: 12 }}>{label}</span>
              <span style={{ color, fontFamily: "'IBM Plex Mono', monospace", fontSize: 14, fontWeight: 700 }}>{val}</span>
            </div>
          ))}
        </div>
      </div>
    )}
  </div>
</div>

);
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions