@omnizap-system/omnizap 2.5.12

package/public/css/systemadm/layout.css

@@ -0,0 +1,229 @@
+html,
+body {
+  block-size: 100%;
+}
+
+body {
+  overflow: hidden;
+  overflow-x: hidden;
+}
+
+.admin-shell {
+  --sidebar-width: 264px;
+  --sidebar-collapsed-width: 72px;
+  --sidebar-max-height: 100dvh;
+  --topbar-height: 72px;
+  --layout-gutter: 24px;
+  --content-max-width: 1360px;
+  --section-gap: 16px;
+  --nav-columns: 1;
+  --footer-columns: 1;
+  --metric-grid-columns: 4;
+  --admin-grid-columns: 4;
+  --health-grid-columns: 3;
+  --risk-grid-columns: 4;
+
+  inline-size: 100%;
+  block-size: 100vh;
+  block-size: 100dvh;
+  display: grid;
+  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
+  grid-template-rows: minmax(0, 1fr);
+  overflow: hidden;
+  isolation: isolate;
+  transition: grid-template-columns 180ms ease;
+}
+
+.admin-shell[data-sidebar='collapsed'],
+.admin-shell.is-sidebar-collapsed {
+  grid-template-columns: var(--sidebar-collapsed-width) minmax(0, 1fr);
+}
+
+.sidebar {
+  min-block-size: 0;
+  block-size: 100%;
+  overflow: hidden;
+  border-right: 1px solid var(--line-soft);
+  background: linear-gradient(180deg, #0c1423 0%, #09111e 100%);
+  padding: var(--space-6) var(--space-4) var(--space-4);
+  display: grid;
+  grid-template-rows: auto auto minmax(0, 1fr) auto;
+  gap: var(--space-4);
+}
+
+.workspace {
+  min-inline-size: 0;
+  min-block-size: 0;
+  block-size: 100%;
+  overflow: hidden;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+}
+
+.topbar {
+  min-block-size: var(--topbar-height);
+  border-bottom: 1px solid var(--line-soft);
+  background: rgba(10, 17, 30, 0.92);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding: var(--space-4) var(--space-6);
+  position: sticky;
+  top: 0;
+  z-index: 20;
+}
+
+.viewport {
+  block-size: 100%;
+  inline-size: min(var(--content-max-width), 100%);
+  min-inline-size: 0;
+  margin-inline: auto;
+  padding: var(--layout-gutter);
+  display: grid;
+  gap: var(--section-gap);
+  align-content: start;
+  overflow-y: auto;
+  overflow-x: hidden;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+}
+
+.viewport > [id],
+.admin-layout > .section[id] {
+  scroll-margin-block-start: calc(var(--topbar-height) + var(--space-5));
+}
+
+.admin-layout {
+  min-inline-size: 0;
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  gap: var(--section-gap);
+}
+
+.admin-layout > .section {
+  min-inline-size: 0;
+}
+
+.admin-layout.is-subpage > .section[data-admin-page] {
+  grid-column: span 12;
+}
+
+.span-12 {
+  grid-column: span 12;
+}
+
+.span-8 {
+  grid-column: span 8;
+}
+
+.span-6 {
+  grid-column: span 6;
+}
+
+.span-4 {
+  grid-column: span 4;
+}
+
+.nav-list {
+  grid-template-columns: repeat(var(--nav-columns), minmax(0, 1fr));
+}
+
+.sidebar-footer {
+  grid-template-columns: repeat(var(--footer-columns), minmax(0, 1fr));
+}
+
+.grid {
+  grid-template-columns: repeat(var(--metric-grid-columns), minmax(0, 1fr));
+}
+
+.admin-grid {
+  grid-template-columns: repeat(var(--admin-grid-columns), minmax(0, 1fr));
+}
+
+.health-grid {
+  grid-template-columns: repeat(var(--health-grid-columns), minmax(0, 1fr));
+}
+
+.risk-strip,
+.security-strip {
+  grid-template-columns: repeat(var(--risk-grid-columns), minmax(0, 1fr));
+}
+
+@media (max-width: 1440px) {
+  .admin-shell {
+    --content-max-width: 1240px;
+  }
+}
+
+@media (max-width: 1160px) {
+  .admin-shell {
+    --sidebar-max-height: min(22rem, 42dvh);
+    --nav-columns: 3;
+    --footer-columns: 3;
+    --layout-gutter: 16px;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: minmax(0, var(--sidebar-max-height)) minmax(0, 1fr);
+  }
+
+  .sidebar {
+    max-block-size: var(--sidebar-max-height);
+  }
+}
+
+@media (max-width: 920px) {
+  .admin-shell {
+    --topbar-height: 64px;
+    --metric-grid-columns: 2;
+    --admin-grid-columns: 2;
+    --health-grid-columns: 2;
+    --risk-grid-columns: 2;
+  }
+
+  .span-8,
+  .span-6,
+  .span-4 {
+    grid-column: span 12;
+  }
+}
+
+@media (max-width: 680px) {
+  .admin-shell {
+    --sidebar-max-height: min(20rem, 48dvh);
+    --nav-columns: 2;
+    --footer-columns: 1;
+    --metric-grid-columns: 1;
+    --admin-grid-columns: 1;
+    --health-grid-columns: 1;
+    --risk-grid-columns: 1;
+    --topbar-height: 56px;
+    --layout-gutter: 12px;
+  }
+
+  .topbar {
+    padding: var(--space-3);
+  }
+
+  .sidebar {
+    padding: var(--space-3);
+  }
+
+  .admin-form-row,
+  .admin-inline-form {
+    grid-template-columns: 1fr;
+  }
+
+  .profile {
+    grid-template-columns: 1fr;
+    text-align: center;
+  }
+
+  .avatar {
+    margin-inline: auto;
+  }
+
+  .topbar-right {
+    inline-size: 100%;
+    justify-content: space-between;
+  }
+}

package/public/css/systemadm/tokens.css

@@ -0,0 +1,56 @@
+:root {
+  --font-body: 'Manrope', system-ui, sans-serif;
+  --font-display: 'Sora', system-ui, sans-serif;
+
+  --fs-12: 0.75rem;
+  --fs-14: 0.875rem;
+  --fs-16: 1rem;
+  --fs-20: 1.25rem;
+  --fs-24: 1.5rem;
+  --fs-32: 2rem;
+
+  --lh-tight: 1.2;
+  --lh-body: 1.5;
+
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-7: 28px;
+  --space-8: 32px;
+
+  --bg-canvas: #070d18;
+  --bg-surface: #0d1626;
+  --bg-surface-2: #111d32;
+  --bg-surface-3: #16253f;
+  --bg-surface-4: #1a2d4a;
+
+  --line-soft: rgba(149, 167, 195, 0.2);
+  --line-strong: rgba(149, 167, 195, 0.38);
+  --line-focus: rgba(94, 169, 255, 0.5);
+
+  --text-main: #f2f7ff;
+  --text-soft: #a8b6cc;
+  --text-mute: #7f8ba1;
+
+  --accent: #5aaeff;
+  --accent-2: #34d399;
+  --accent-warn: #fbbf24;
+  --accent-danger: #ef4444;
+
+  --status-ok: #22c55e;
+  --status-warning: #f59e0b;
+  --status-error: #ef4444;
+  --status-info: #60a5fa;
+
+  --radius-lg: 20px;
+  --radius-md: 14px;
+  --radius-sm: 10px;
+  --radius-xs: 8px;
+
+  --shadow-card: 0 12px 28px rgba(2, 8, 24, 0.38);
+  --shadow-soft: 0 6px 14px rgba(2, 8, 20, 0.28);
+  --shadow-none: 0 0 0 rgba(0, 0, 0, 0);
+}

package/public/js/apps/apiDocsApp.js

@@ -0,0 +1,235 @@
+import React, { useEffect, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+
+const h = React.createElement;
+
+function Icon({ cls }) {
+  return h('i', { className: `icon ${cls}`, 'aria-hidden': 'true' });
+}
+
+function Card({ title, code, iconClass }) {
+  return h('section', { className: 'card' }, h('h2', null, h(Icon, { cls: iconClass || 'fa-solid fa-file-code' }), title), h('pre', null, h('code', null, code)));
+}
+
+function SectionTitle({ iconClass, children }) {
+  return h('h2', { className: 'section-title' }, h(Icon, { cls: iconClass }), children);
+}
+
+function StatusPanel() {
+  const [state, setState] = useState({
+    loading: true,
+    ok: false,
+    latencyMs: null,
+    cpu: null,
+    ram: null,
+    uptime: null,
+    error: '',
+  });
+
+  useEffect(() => {
+    let active = true;
+
+    const load = async () => {
+      const start = Date.now();
+      try {
+        const response = await fetch('/api/home-bootstrap');
+        if (!response.ok) throw new Error(`HTTP ${response.status}`);
+        const payload = await response.json();
+        const summary = payload?.data?.system_summary || {};
+        const host = summary.host || {};
+        const process = summary.process || {};
+
+        if (!active) return;
+        setState({
+          loading: false,
+          ok: true,
+          latencyMs: Date.now() - start,
+          cpu: Number.isFinite(Number(host.cpu_percent)) ? `${Number(host.cpu_percent).toFixed(2)}%` : 'n/d',
+          ram: host.memory_used && host.memory_total ? `${host.memory_used} / ${host.memory_total} (${Number(host.memory_percent || 0).toFixed(2)}%)` : 'n/d',
+          uptime: process.uptime || 'n/d',
+          error: '',
+        });
+      } catch (error) {
+        if (!active) return;
+        setState({
+          loading: false,
+          ok: false,
+          latencyMs: null,
+          cpu: null,
+          ram: null,
+          uptime: null,
+          error: error?.message || 'Falha ao consultar status da API',
+        });
+      }
+    };
+
+    load();
+    const timer = setInterval(load, 60 * 1000);
+    return () => {
+      active = false;
+      clearInterval(timer);
+    };
+  }, []);
+
+  const statusLabel = state.loading ? 'Consultando...' : state.ok ? 'Online' : 'Instável';
+  const statusClass = state.loading ? 'badge badge-warn' : state.ok ? 'badge badge-ok' : 'badge badge-bad';
+
+  return h('section', { className: 'card' }, h('h3', { className: 'sub-title' }, h(Icon, { cls: 'fa-solid fa-heart-pulse' }), 'Status em tempo real'), h('div', { className: 'status-row' }, h('span', { className: statusClass }, statusLabel), state.latencyMs ? h('span', { className: 'status-meta' }, `Latência: ${state.latencyMs}ms`) : null), h('div', { className: 'status-grid' }, h('div', { className: 'status-item' }, h('strong', null, 'CPU host'), h('span', null, state.cpu || 'n/d')), h('div', { className: 'status-item' }, h('strong', null, 'RAM host'), h('span', null, state.ram || 'n/d')), h('div', { className: 'status-item' }, h('strong', null, 'Uptime processo'), h('span', null, state.uptime || 'n/d'))), state.error ? h('p', { className: 'status-error' }, `Falha: ${state.error}`) : null);
+}
+
+function ApiDocsApp() {
+  return h(
+    'main',
+    { className: 'wrap' },
+    h(
+      'div',
+      { className: 'top' },
+      h('a', { href: '/' }, h(Icon, { cls: 'fa-solid fa-house' }), 'Home'),
+      h('a', { href: '/stickers/' }, h(Icon, { cls: 'fa-solid fa-icons' }), 'Stickers'),
+      h('a', { href: '/termos-de-uso/' }, h(Icon, { cls: 'fa-solid fa-file-contract' }), 'Termos'),
+      h('a', { href: '/licenca/' }, h(Icon, { cls: 'fa-solid fa-scale-balanced' }), 'Licença'),
+      h(
+        'a',
+        {
+          href: 'https://github.com/Omnizap-System/omnizap',
+          target: '_blank',
+          rel: 'noreferrer noopener',
+        },
+        h(Icon, { cls: 'fa-brands fa-github' }),
+        'GitHub',
+      ),
+    ),
+    h('h1', null, h(Icon, { cls: 'fa-solid fa-code' }), 'OmniZap API | Área de Desenvolvedor'),
+    h('p', null, 'Documentação técnica da API OmniZap para bots e automação WhatsApp, com o catálogo de stickers como módulo integrável.'),
+    h(SectionTitle, { iconClass: 'fa-solid fa-route' }, 'Casos de uso'),
+    h('section', { className: 'card' }, h('ul', { className: 'list' }, h('li', null, 'Operar bot WhatsApp com endpoints públicos para conteúdo e interação.'), h('li', null, 'Integrar server-to-server para sincronizar packs, stickers e métricas.'), h('li', null, 'Conectar automações internas (CRM, suporte, marketing e comunidades).'))),
+    h('section', { className: 'card' }, h('h2', null, h(Icon, { cls: 'fa-solid fa-diagram-project' }), 'Mapa da plataforma'), h('p', null, 'O domínio principal é a plataforma de bot + API. O catálogo de stickers funciona como feature integrada para distribuição e engajamento.'), h('ul', { className: 'list' }, h('li', null, 'Página principal: / (plataforma OmniZap)'), h('li', null, 'Catálogo: /stickers/ (módulo de stickers)'), h('li', null, 'Packs públicos: /stickers/{packKey} (landing de conteúdo)'))),
+    h(StatusPanel),
+    h(SectionTitle, { iconClass: 'fa-solid fa-plug-circle-check' }, 'Endpoints'),
+    h(Card, {
+      title: 'Base URL',
+      code: 'https://omnizap.shop/api/sticker-packs',
+      iconClass: 'fa-solid fa-link',
+    }),
+    h(Card, {
+      title: 'Listar packs',
+      code: 'GET /api/sticker-packs?q=&visibility=public|unlisted|all&limit=&offset=',
+      iconClass: 'fa-solid fa-layer-group',
+    }),
+    h(Card, {
+      title: 'Listar stickers sem pack',
+      code: 'GET /api/sticker-packs/orphan-stickers?q=&categories=&limit=&offset=',
+      iconClass: 'fa-solid fa-box-open',
+    }),
+    h(Card, {
+      title: 'Detalhes de pack',
+      code: 'GET /api/sticker-packs/:packKey',
+      iconClass: 'fa-solid fa-circle-info',
+    }),
+    h(Card, {
+      title: 'Interações do pack (dados reais)',
+      code: 'POST /api/sticker-packs/:packKey/open\n' + 'POST /api/sticker-packs/:packKey/like\n' + 'POST /api/sticker-packs/:packKey/dislike',
+      iconClass: 'fa-solid fa-thumbs-up',
+    }),
+    h(Card, {
+      title: 'Contato de suporte',
+      code: 'GET /api/support',
+      iconClass: 'fa-brands fa-whatsapp',
+    }),
+    h(Card, {
+      title: 'Imagem de sticker',
+      code: 'GET /api/sticker-packs/:packKey/stickers/:stickerId.webp\nGET /data/stickers/:owner/:file.webp',
+      iconClass: 'fa-solid fa-image',
+    }),
+    h(Card, {
+      title: 'Resumo de métricas do sistema',
+      code: 'GET /api/system-summary',
+      iconClass: 'fa-solid fa-gauge-high',
+    }),
+    h(Card, {
+      title: 'Resumo do projeto no GitHub',
+      code: 'GET /api/project-summary',
+      iconClass: 'fa-brands fa-github',
+    }),
+    h(Card, {
+      title: 'Ranking global (cacheado)',
+      code: 'GET /api/global-ranking-summary',
+      iconClass: 'fa-solid fa-ranking-star',
+    }),
+    h(SectionTitle, { iconClass: 'fa-solid fa-brackets-curly' }, 'Como a API responde'),
+    h(Card, {
+      title: 'Padrão de resposta (sucesso)',
+      code: '{\n' + '  "data": [ ... ],\n' + '  "pagination": { "limit": 24, "offset": 0, "has_more": true, "next_offset": 24 },\n' + '  "filters": { "q": "", "visibility": "public", "categories": [] }\n' + '}',
+      iconClass: 'fa-solid fa-circle-check',
+    }),
+    h(Card, {
+      title: 'Padrão de resposta (erro)',
+      code: '{\n' + '  "ok": false,\n' + '  "error": "mensagem descritiva do erro"\n' + '}',
+      iconClass: 'fa-solid fa-triangle-exclamation',
+    }),
+    h(Card, {
+      title: 'Exemplo real de retorno (pack + engagement)',
+      code: '{\n' + '  "data": {\n' + '    "pack_key": "auto-manga-panel-2-iu4n2",\n' + '    "name": "[AUTO] Manga Panel #2",\n' + '    "sticker_count": 30,\n' + '    "tags": ["manga-panel", "anime"],\n' + '    "engagement": {\n' + '      "open_count": 120,\n' + '      "like_count": 34,\n' + '      "dislike_count": 2,\n' + '      "score": 32\n' + '    }\n' + '  }\n' + '}',
+      iconClass: 'fa-solid fa-database',
+    }),
+    h(SectionTitle, { iconClass: 'fa-solid fa-filter' }, 'Filtros e paginação'),
+    h(Card, {
+      title: 'Parâmetros principais',
+      code: 'q: texto de busca (nome, publisher, descrição, pack_key)\n' + 'visibility: public | unlisted | all\n' + 'categories: lista separada por vírgula (ex: anime,meme)\n' + 'limit: tamanho da página\n' + 'offset: deslocamento para próxima página',
+      iconClass: 'fa-solid fa-sliders',
+    }),
+    h(Card, {
+      title: 'Exemplo de paginação incremental',
+      code: 'GET /api/sticker-packs?visibility=public&limit=24&offset=0\n' + 'GET /api/sticker-packs?visibility=public&limit=24&offset=24\n' + 'GET /api/sticker-packs?visibility=public&limit=24&offset=48',
+      iconClass: 'fa-solid fa-forward-step',
+    }),
+    h(SectionTitle, { iconClass: 'fa-solid fa-diagram-project' }, 'Como integrar no seu sistema'),
+    h(Card, {
+      title: 'Passo a passo de integração',
+      code: '1) Defina a base URL: https://omnizap.shop/api/sticker-packs\n' + '2) Faça um health-check inicial em /system-summary\n' + '3) Liste packs com /?visibility=public&limit=24\n' + '4) Abra detalhes com /:packKey\n' + '5) Baixe stickers com /:packKey/stickers/:stickerId.webp\n' + '6) Trate paginação usando limit/offset e has_more',
+      iconClass: 'fa-solid fa-list-check',
+    }),
+    h(Card, {
+      title: 'Exemplo cURL',
+      code: 'curl -sS "https://omnizap.shop/api/sticker-packs?visibility=public&limit=5"\n' + 'curl -sS "https://omnizap.shop/api/sticker-packs?categories=anime,meme&limit=12"\n' + 'curl -sS "https://omnizap.shop/api/sticker-packs/orphan-stickers?limit=20&offset=0"\n' + 'curl -sS -X POST "https://omnizap.shop/api/sticker-packs/<packKey>/open"\n' + 'curl -sS -X POST "https://omnizap.shop/api/sticker-packs/<packKey>/like"\n' + 'curl -sS "https://omnizap.shop/api/support"\n' + 'curl -sS "https://omnizap.shop/api/system-summary"\n' + 'curl -sS "https://omnizap.shop/api/project-summary"',
+      iconClass: 'fa-solid fa-terminal',
+    }),
+    h(Card, {
+      title: 'Exemplo JavaScript (fetch)',
+      code: "const API_BASE = 'https://omnizap.shop/api/sticker-packs';\n\n" + 'async function getPublicPacks() {\n' + '  const url = `${API_BASE}?visibility=public&limit=24&offset=0`;\n' + '  const response = await fetch(url);\n' + '  if (!response.ok) throw new Error(`HTTP ${response.status}`);\n' + '  const payload = await response.json();\n' + '  return payload?.data || [];\n' + '}\n\n' + 'async function getPackDetails(packKey) {\n' + '  const response = await fetch(`${API_BASE}/${encodeURIComponent(packKey)}`);\n' + '  if (!response.ok) throw new Error(`HTTP ${response.status}`);\n' + '  const payload = await response.json();\n' + '  return payload?.data || null;\n' + '}\n\n' + '(async () => {\n' + '  try {\n' + '    const packs = await getPublicPacks();\n' + "    console.log('Packs encontrados:', packs.length);\n" + '    if (packs[0]?.pack_key) {\n' + '      const details = await getPackDetails(packs[0].pack_key);\n' + "      console.log('Primeiro pack:', details?.name, details?.pack_key);\n" + "      await fetch(`${API_BASE}/${encodeURIComponent(packs[0].pack_key)}/open`, { method: 'POST' });\n" + '    }\n' + '  } catch (error) {\n' + "    console.error('Falha ao consumir API:', error.message);\n" + '  }\n' + '})();',
+      iconClass: 'fa-brands fa-js',
+    }),
+    h(Card, {
+      title: 'Exemplo Node.js (backend / integração server-to-server)',
+      code: "const API_BASE = 'https://omnizap.shop/api/sticker-packs';\n" + '\n' + 'export async function syncCatalogPage(offset = 0) {\n' + '  const url = `${API_BASE}?visibility=public&limit=50&offset=${offset}`;\n' + '  const response = await fetch(url, { headers: { Accept: "application/json" } });\n' + '  if (!response.ok) throw new Error(`Catalog HTTP ${response.status}`);\n' + '  const payload = await response.json();\n' + '  const packs = payload?.data || [];\n' + '  const nextOffset = payload?.pagination?.next_offset;\n' + '  return { packs, nextOffset, hasMore: Boolean(payload?.pagination?.has_more) };\n' + '}\n' + '\n' + 'export async function markPackLike(packKey) {\n' + '  const response = await fetch(`${API_BASE}/${encodeURIComponent(packKey)}/like`, { method: "POST" });\n' + '  if (!response.ok) throw new Error(`Like HTTP ${response.status}`);\n' + '  return response.json();\n' + '}',
+      iconClass: 'fa-solid fa-server',
+    }),
+    h(SectionTitle, { iconClass: 'fa-solid fa-circle-question' }, 'FAQ rápido'),
+    h(Card, {
+      title: 'Para que serve a API OmniZap?',
+      code: 'Ela permite integrar bots e automações WhatsApp com catálogo de stickers, métricas e fluxos técnicos.',
+      iconClass: 'fa-solid fa-circle-question',
+    }),
+    h(Card, {
+      title: 'Posso usar packs no meu bot?',
+      code: 'Sim. Consulte packs públicos, detalhe itens e registre interações para montar experiências no seu bot.',
+      iconClass: 'fa-solid fa-puzzle-piece',
+    }),
+    h(Card, {
+      title: 'Onde ver o catálogo web?',
+      code: 'https://omnizap.shop/stickers/',
+      iconClass: 'fa-solid fa-icons',
+    }),
+    h(Card, {
+      title: 'Checklist de produção',
+      code: '- Implementar retry com backoff (429/5xx)\n' + '- Cachear listagens por 30-120s no seu sistema\n' + '- Validar next_offset para paginação contínua\n' + '- Tratar 404 de pack removido/inválido\n' + '- Registrar métricas de latência e taxa de erro do consumo',
+      iconClass: 'fa-solid fa-shield-heart',
+    }),
+  );
+}
+
+const rootEl = document.getElementById('api-docs-react-root');
+if (rootEl) {
+  const root = createRoot(rootEl);
+  root.render(h(ApiDocsApp));
+}