@growthub/cli 0.3.59 → 0.4.1

package/assets/worker-kits/growthub-zernio-social-v1/studio/src/views/ApiKeys.jsx

@@ -0,0 +1,143 @@
+import { useState, useEffect, useCallback } from 'react';
+import { api } from '../api.js';
+import { useApp } from '../App.jsx';
+
+export default function ApiKeys() {
+  const { showToast } = useApp();
+  const [keys, setKeys]       = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [revoking, setRevoking] = useState(null);
+  const [creating, setCreating] = useState(false);
+  const [showForm, setShowForm] = useState(false);
+  const [scope, setScope]       = useState('read-write');
+  const [permission, setPerm]   = useState('full');
+  const [newKey, setNewKey]     = useState(null);
+
+  const load = useCallback(() => {
+    api.getApiKeys()
+      .then(d => setKeys(d.keys || d.apiKeys || []))
+      .catch(e => showToast(e.message, false))
+      .finally(() => setLoading(false));
+  }, []);
+
+  useEffect(load, [load]);
+
+  const create = async () => {
+    setCreating(true);
+    try {
+      const res = await api.createApiKey({ scope, permission });
+      setNewKey(res.key || res.apiKey || res);
+      showToast('API key created ✓');
+      setShowForm(false);
+      load();
+    } catch (e) {
+      showToast(e.message, false);
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  const revoke = async (id) => {
+    if (!confirm('Revoke this API key? This cannot be undone.')) return;
+    setRevoking(id);
+    try {
+      await api.deleteApiKey(id);
+      showToast('Key revoked');
+      load();
+    } catch (e) {
+      showToast(e.message, false);
+    } finally {
+      setRevoking(null);
+    }
+  };
+
+  if (loading) return <div className="loading-row"><span className="spinner" />Loading API keys…</div>;
+
+  return (
+    <div>
+      <div className="row mb16" style={{ justifyContent: 'space-between' }}>
+        <div className="section-title" style={{ marginBottom: 0 }}>{keys.length} API Key{keys.length !== 1 ? 's' : ''}</div>
+        <button className="btn btn-primary btn-sm" onClick={() => { setShowForm(f => !f); setNewKey(null); }}>
+          {showForm ? '✕ Cancel' : '+ New Key'}
+        </button>
+      </div>
+
+      {newKey && (
+        <div className="banner banner-ok mb16">
+          <div style={{ fontWeight: 600, marginBottom: 4 }}>New key created — copy it now, it will not be shown again</div>
+          <div style={{ fontFamily: 'monospace', fontSize: 12, wordBreak: 'break-all' }}>{typeof newKey === 'string' ? newKey : JSON.stringify(newKey)}</div>
+          <button className="btn btn-ghost btn-sm mt8" onClick={() => { navigator.clipboard.writeText(typeof newKey === 'string' ? newKey : JSON.stringify(newKey)); showToast('Copied'); }}>
+            Copy
+          </button>
+        </div>
+      )}
+
+      {showForm && (
+        <div className="card mb16">
+          <div className="section-title mb16">Create API Key</div>
+          <div className="field">
+            <label>Scope</label>
+            <select className="select" value={scope} onChange={e => setScope(e.target.value)}>
+              <option value="read">read — list profiles, accounts, analytics, inbox</option>
+              <option value="read-write">read-write — everything including create/schedule posts</option>
+            </select>
+          </div>
+          <div className="field">
+            <label>Permission</label>
+            <select className="select" value={permission} onChange={e => setPerm(e.target.value)}>
+              <option value="full">full — any profile on account</option>
+              <option value="profiles-specific">profiles-specific — restricted to specific profile IDs</option>
+            </select>
+          </div>
+          <div className="row-end">
+            <button className="btn btn-primary" onClick={create} disabled={creating}>
+              {creating ? <><span className="spinner" style={{ marginRight: 7 }} />Creating…</> : 'Create Key'}
+            </button>
+          </div>
+        </div>
+      )}
+
+      {!keys.length && !showForm && (
+        <div className="empty">
+          <div className="empty-icon">🔑</div>
+          <div className="empty-msg">No API keys found.</div>
+        </div>
+      )}
+
+      {keys.length > 0 && (
+        <div className="table-wrap">
+          <table>
+            <thead>
+              <tr>
+                <th>Key ID</th>
+                <th>Scope</th>
+                <th>Permission</th>
+                <th>Created</th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody>
+              {keys.map(k => (
+                <tr key={k._id || k.id}>
+                  <td style={{ fontFamily: 'monospace', fontSize: 12 }}>{k._id || k.id}</td>
+                  <td><span className={`badge ${k.scope === 'read-write' ? 'badge-purple' : 'badge-neutral'}`}>{k.scope}</span></td>
+                  <td><span className="badge badge-neutral">{k.permission || k.permissions || '—'}</span></td>
+                  <td style={{ fontSize: 12, color: 'var(--muted)' }}>{k.createdAt ? new Date(k.createdAt).toLocaleDateString() : '—'}</td>
+                  <td>
+                    <button
+                      className="btn btn-danger btn-xs"
+                      onClick={() => revoke(k._id || k.id)}
+                      disabled={revoking === (k._id || k.id)}
+                    >
+                      {revoking === (k._id || k.id) ? '…' : 'Revoke'}
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}

package/assets/worker-kits/growthub-zernio-social-v1/studio/src/views/Automations.jsx

@@ -0,0 +1,122 @@
+import { useState, useEffect, useCallback } from 'react';
+import { api } from '../api.js';
+import { useApp } from '../App.jsx';
+
+export default function Automations() {
+  const { showToast } = useApp();
+  const [automations, setAutomations] = useState([]);
+  const [loading, setLoading]         = useState(true);
+  const [running, setRunning]         = useState(null);
+  const [logs, setLogs]               = useState({});
+  const [logsOpen, setLogsOpen]       = useState(null);
+  const [logsLoading, setLogsLoading] = useState(false);
+
+  const load = useCallback(() => {
+    api.getAutomations()
+      .then(d => setAutomations(d.automations || d.data || []))
+      .catch(e => showToast(e.message, false))
+      .finally(() => setLoading(false));
+  }, []);
+
+  useEffect(load, [load]);
+
+  const run = async (id) => {
+    setRunning(id);
+    try {
+      await api.runAutomation(id);
+      showToast('Automation triggered ✓');
+      load();
+    } catch (e) {
+      showToast(e.message, false);
+    } finally {
+      setRunning(null);
+    }
+  };
+
+  const fetchLogs = async (id) => {
+    if (logsOpen === id) { setLogsOpen(null); return; }
+    setLogsOpen(id);
+    if (logs[id]) return;
+    setLogsLoading(true);
+    try {
+      const data = await api.getAutomationLogs(id);
+      setLogs(l => ({ ...l, [id]: data.logs || data.data || [] }));
+    } catch (e) {
+      showToast(e.message, false);
+    } finally {
+      setLogsLoading(false);
+    }
+  };
+
+  if (loading) return <div className="loading-row"><span className="spinner" />Loading automations…</div>;
+
+  if (!automations.length) return (
+    <div className="empty">
+      <div className="empty-icon">⚡</div>
+      <div className="empty-msg">No automations found on this account.<br />Create automations in the Zernio dashboard.</div>
+    </div>
+  );
+
+  return (
+    <div>
+      <div className="section-title mb16">{automations.length} Automation{automations.length !== 1 ? 's' : ''}</div>
+      {automations.map(a => {
+        const id = a._id || a.id;
+        return (
+          <div key={id} className="card mb16">
+            <div className="row mb8" style={{ justifyContent: 'space-between' }}>
+              <div>
+                <span style={{ fontWeight: 600 }}>{a.name || a.title || id}</span>
+                <span className={`badge ${a.status === 'active' ? 'badge-green' : 'badge-neutral'} ml8`} style={{ marginLeft: 10 }}>
+                  {a.status || 'unknown'}
+                </span>
+              </div>
+              <div className="row">
+                <button className="btn btn-ghost btn-sm" onClick={() => fetchLogs(id)}>
+                  {logsOpen === id ? 'Hide Logs' : 'Logs'}
+                </button>
+                <button className="btn btn-primary btn-sm" onClick={() => run(id)} disabled={running === id}>
+                  {running === id ? <><span className="spinner" style={{ marginRight: 6 }} />Running…</> : '▶ Run'}
+                </button>
+              </div>
+            </div>
+            {a.description && <div style={{ fontSize: 12, color: 'var(--muted)', marginBottom: 6 }}>{a.description}</div>}
+            {a.trigger && <div style={{ fontSize: 12, color: 'var(--dim)' }}>Trigger: <span style={{ color: 'var(--accentl)', fontFamily: 'monospace' }}>{a.trigger}</span></div>}
+
+            {logsOpen === id && (
+              <div style={{ marginTop: 12 }}>
+                <div className="section-title mb8">Execution Logs</div>
+                {logsLoading ? (
+                  <div className="loading-row"><span className="spinner" />Loading…</div>
+                ) : logs[id]?.length ? (
+                  <div style={{ maxHeight: 220, overflow: 'auto' }}>
+                    <table style={{ fontSize: 12 }}>
+                      <thead><tr><th>Time</th><th>Status</th><th>Message</th></tr></thead>
+                      <tbody>
+                        {logs[id].map((l, i) => (
+                          <tr key={i}>
+                            <td style={{ fontFamily: 'monospace', whiteSpace: 'nowrap' }}>
+                              {l.createdAt ? new Date(l.createdAt).toLocaleString() : '—'}
+                            </td>
+                            <td>
+                              <span className={`badge ${l.status === 'success' ? 'badge-green' : l.status === 'error' ? 'badge-red' : 'badge-neutral'}`}>
+                                {l.status}
+                              </span>
+                            </td>
+                            <td style={{ color: 'var(--muted)' }}>{l.message || l.msg || '—'}</td>
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  </div>
+                ) : (
+                  <div style={{ color: 'var(--muted)', fontSize: 12 }}>No logs yet.</div>
+                )}
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}