smom-dbis-138/frontend-dapp/src/pages/HubPage.tsx

import { Link } from 'react-router-dom';
import NasaIcon, { type NasaIconName } from '../components/icons/NasaIcon';
import { GUOSMM_NOTICES } from '../config/guosmmNotices';
import { Z_ECOSYSTEM_PORTAL_LINKS } from '../config/ecosystemLinks';

const BANKING: { path: string; label: string; icon: NasaIconName }[] = [
  { path: '/central-bank', label: 'Central Bank', icon: 'central-bank' },
  { path: '/office-24', label: 'Office 24', icon: 'office' },
  { path: '/trade', label: 'DBIS Trade', icon: 'trade' },
  { path: '/swap', label: 'Digital Swap', icon: 'swap' },
];

const CHAIN138: { path: string; label: string; icon: NasaIconName }[] = [
  { path: '/bridge', label: 'Bridge', icon: 'bridge' },
  { path: '/reserve', label: 'Reserve', icon: 'ledger' },
  { path: '/history', label: 'History', icon: 'chart' },
  { path: '/wallets', label: 'Wallets', icon: 'globe' },
  { path: '/docs', label: 'Developers / API docs', icon: 'link' },
  { path: '/admin', label: 'Admin', icon: 'satellite' },
];

const OMNL_OPS: { path: string; label: string; icon: NasaIconName }[] = [
  { path: '/omnl/compliance', label: 'OMNL Compliance console', icon: 'ledger' },
  { path: '/omnl/dashboard', label: 'OMNL API snapshot', icon: 'chart' },
  { path: '/omnl/terminal', label: 'Settlement terminal', icon: 'rail' },
];

const Z_ECOSYSTEM = Z_ECOSYSTEM_PORTAL_LINKS.map((l) => ({
  href: l.href,
  label: l.label,
  icon: l.icon,
}));

function ExternalGrid({
  title,
  items,
}: {
  title: string;
  items: { href: string; label: string; icon: NasaIconName }[];
}) {
  return (
    <section className="dash-card cb-card p-4">
      <h2 className="dash-section-title mb-3">{title}</h2>
      <ul className="grid grid-cols-1 sm:grid-cols-2 gap-2">
        {items.map(({ href, label, icon }) => (
          <li key={href}>
            <a
              href={href}
              target="_blank"
              rel="noopener noreferrer"
              className="dash-quick-links__chip inline-flex w-full !justify-start gap-2 py-2.5 px-3"
            >
              <NasaIcon name={icon} size={14} />
              {label}
            </a>
          </li>
        ))}
      </ul>
    </section>
  );
}

function LinkGrid({
  title,
  items,
}: {
  title: string;
  items: { path: string; label: string; icon: NasaIconName }[];
}) {
  return (
    <section className="dash-card cb-card p-4">
      <h2 className="dash-section-title mb-3">{title}</h2>
      <ul className="grid grid-cols-1 sm:grid-cols-2 gap-2">
        {items.map(({ path, label, icon }) => (
          <li key={path}>
            <Link
              to={path}
              className="dash-quick-links__chip inline-flex w-full !justify-start gap-2 py-2.5 px-3"
            >
              <NasaIcon name={icon} size={14} />
              {label}
            </Link>
          </li>
        ))}
      </ul>
    </section>
  );
}

export default function HubPage() {
  return (
    <div className="dash-page cb-page max-w-[1400px] mx-auto px-4 py-6">
      <header className="mb-8">
        <p className="text-xs font-mono text-[#7a9bb8] mb-1">DBIS · OMNL · Chain 138</p>
        <h1 className="text-2xl font-semibold text-[#e8f4ff] flex items-center gap-2">
          <NasaIcon name="satellite" size={22} className="nasa-icon--telemetry" />
          DBIS Hub
        </h1>
        <p className="text-sm text-[#7a9bb8] mt-2 max-w-2xl">
          Mission control entry — banking portals, settlement surfaces, and Chain 138 tools on this host.
        </p>
      </header>
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-4">
        <LinkGrid title="Banking & settlement" items={BANKING} />
        <LinkGrid title="Chain 138 & operators" items={CHAIN138} />
      </div>
      <ExternalGrid title="Z Blockchain System (external)" items={Z_ECOSYSTEM} />
      <LinkGrid title="OMNL operator consoles" items={OMNL_OPS} />
      <section className="dash-card cb-card p-4 mt-4">
        <h2 className="dash-section-title mb-3">GUOSMM official gazette</h2>
        <ul className="grid grid-cols-1 sm:grid-cols-2 gap-2">
          {GUOSMM_NOTICES.map((n) => (
            <li key={n.documentId}>
              <a
                href={n.url}
                target="_blank"
                rel="noopener noreferrer"
                className="dash-quick-links__chip inline-flex w-full !justify-start gap-2 py-2.5 px-3"
              >
                <NasaIcon name="shield" size={14} />
                {n.documentId} — {n.entity ?? 'OMNL EMCB'}
              </a>
            </li>
          ))}
        </ul>
      </section>
    </div>
  );
}