TNB
fceef6f42b
- Changed Core Backend to 'Go (REST API)' (removed gRPC, kept REST) - Removed BLE from IoT (not supported yet) - Fixed text overflow in boxes by adjusting layout and labels - Updated description to reflect REST-only API
251 lines
13 KiB
HTML
251 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>TallyFlow Architecture Diagram</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
background: #020617;
|
|
min-height: 100vh;
|
|
padding: 2rem;
|
|
color: white;
|
|
}
|
|
.container { max-width: 1200px; margin: 0 auto; }
|
|
.header { margin-bottom: 2rem; }
|
|
.header-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem; }
|
|
.pulse-dot {
|
|
width: 12px; height: 12px; background: #22d3ee;
|
|
border-radius: 50%; animation: pulse 2s infinite;
|
|
}
|
|
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
|
|
h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.025em; }
|
|
.subtitle { color: #94a3b8; font-size: 0.875rem; margin-left: 1.75rem; }
|
|
.diagram-container {
|
|
background: rgba(15, 23, 42, 0.5);
|
|
border-radius: 1rem; border: 1px solid #1e293b;
|
|
padding: 1.5rem; overflow-x: auto;
|
|
}
|
|
svg { width: 100%; min-width: 980px; display: block; }
|
|
.cards {
|
|
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 1rem; margin-top: 2rem;
|
|
}
|
|
.card {
|
|
background: rgba(15, 23, 42, 0.5);
|
|
border-radius: 0.75rem; border: 1px solid #1e293b;
|
|
padding: 1.25rem;
|
|
}
|
|
.card-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
|
|
.card-dot { width: 8px; height: 8px; border-radius: 50%; }
|
|
.card-dot.cyan { background: #22d3ee; }
|
|
.card-dot.emerald { background: #34d399; }
|
|
.card-dot.violet { background: #a78bfa; }
|
|
.card-dot.amber { background: #fbbf24; }
|
|
.card-dot.orange { background: #fb923c; }
|
|
.card h3 { font-size: 0.875rem; font-weight: 600; }
|
|
.card ul { list-style: none; color: #94a3b8; font-size: 0.75rem; }
|
|
.card li { margin-bottom: 0.375rem; }
|
|
.footer { text-align: center; margin-top: 1.5rem; color: #475569; font-size: 0.75rem; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<div class="header-row">
|
|
<div class="pulse-dot"></div>
|
|
<h1>TallyFlow Architecture</h1>
|
|
</div>
|
|
<p class="subtitle">5 Core Components • Source-verified from ~/src</p>
|
|
</div>
|
|
|
|
<div class="diagram-container">
|
|
<svg viewBox="0 0 1000 620">
|
|
<defs>
|
|
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
|
|
<polygon points="0 0, 10 3.5, 0 7" fill="#64748b" />
|
|
</marker>
|
|
<marker id="arrowhead-dashed" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
|
|
<polygon points="0 0, 10 3.5, 0 7" fill="#fb923c" />
|
|
</marker>
|
|
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
|
|
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1e293b" stroke-width="0.5"/>
|
|
</pattern>
|
|
</defs>
|
|
|
|
<!-- Background Grid -->
|
|
<rect width="100%" height="100%" fill="url(#grid)" />
|
|
|
|
<!-- ========== CORE (Central, owns DB) ========== -->
|
|
<rect x="180" y="55" width="640" height="285" rx="14" fill="rgba(6, 78, 59, 0.1)" stroke="#34d399" stroke-width="2.5"/>
|
|
<text x="200" y="80" fill="#34d399" font-size="13" font-weight="700">TallyFlow Core (Central Hub)</text>
|
|
|
|
<!-- Core Web UI (Vue.js) - LEFT -->
|
|
<rect x="210" y="100" width="180" height="70" rx="8" fill="rgba(8, 51, 68, 0.55)" stroke="#22d3ee" stroke-width="2"/>
|
|
<text x="300" y="127" fill="white" font-size="13" font-weight="700" text-anchor="middle">Core Web UI</text>
|
|
<text x="300" y="145" fill="#94a3b8" font-size="10" text-anchor="middle">Vue.js 2</text>
|
|
<text x="300" y="161" fill="#22d3ee" font-size="9" text-anchor="middle">Uses Core API</text>
|
|
|
|
<!-- Core Backend (Go) - CENTER -->
|
|
<rect x="410" y="100" width="200" height="70" rx="8" fill="rgba(6, 78, 59, 0.55)" stroke="#34d399" stroke-width="2"/>
|
|
<text x="510" y="127" fill="white" font-size="13" font-weight="700" text-anchor="middle">Core Backend</text>
|
|
<text x="510" y="145" fill="#94a3b8" font-size="10" text-anchor="middle">Go (REST API)</text>
|
|
<text x="510" y="161" fill="#34d399" font-size="9" text-anchor="middle">REST + WebSocket</text>
|
|
|
|
<!-- MongoDB (nested inside Core) - RIGHT -->
|
|
<rect x="630" y="100" width="170" height="70" rx="6" fill="rgba(76, 29, 149, 0.6)" stroke="#a78bfa" stroke-width="1.5"/>
|
|
<text x="715" y="127" fill="white" font-size="12" font-weight="700" text-anchor="middle">MongoDB</text>
|
|
<text x="715" y="145" fill="#c4b5fd" font-size="9" text-anchor="middle">Assets • Tags • Photos • Zones</text>
|
|
<text x="715" y="160" fill="#c4b5fd" font-size="8" text-anchor="middle">(owned by Core Backend)</text>
|
|
|
|
<!-- Core API label -->
|
|
<text x="500" y="195" fill="#34d399" font-size="9" text-anchor="middle" font-weight="600">Core API Layer — single integration point for all components</text>
|
|
|
|
<!-- ========== ASSETS (Mobile) ========== -->
|
|
<rect x="50" y="380" width="170" height="100" rx="10" fill="rgba(8, 51, 68, 0.5)" stroke="#22d3ee" stroke-width="2"/>
|
|
<text x="135" y="408" fill="white" font-size="13" font-weight="700" text-anchor="middle">Assets</text>
|
|
<text x="135" y="426" fill="#94a3b8" font-size="10" text-anchor="middle">(Mobile)</text>
|
|
<text x="135" y="444" fill="#22d3ee" font-size="9" text-anchor="middle">Flutter</text>
|
|
<text x="135" y="460" fill="#94a3b8" font-size="8" text-anchor="middle">Seek & Find • Inventory • Enrollment</text>
|
|
|
|
<!-- ========== PRINT ========== -->
|
|
<rect x="260" y="380" width="180" height="100" rx="10" fill="rgba(120, 53, 15, 0.45)" stroke="#fbbf24" stroke-width="2"/>
|
|
<text x="350" y="408" fill="white" font-size="13" font-weight="700" text-anchor="middle">Print</text>
|
|
<text x="350" y="426" fill="#94a3b8" font-size="10" text-anchor="middle">Flutter + Rust</text>
|
|
<text x="350" y="444" fill="#fbbf24" font-size="9" text-anchor="middle">Zebra ZPL • RFID</text>
|
|
<text x="350" y="460" fill="#94a3b8" font-size="8" text-anchor="middle">Print UI + Print API • Can register assets</text>
|
|
|
|
<!-- ========== CAPTURE (native) ========== -->
|
|
<rect x="490" y="380" width="170" height="100" rx="10" fill="rgba(136, 19, 55, 0.45)" stroke="#fb7185" stroke-width="2"/>
|
|
<text x="575" y="408" fill="white" font-size="13" font-weight="700" text-anchor="middle">Capture</text>
|
|
<text x="575" y="426" fill="#94a3b8" font-size="10" text-anchor="middle">(PhotoTag)</text>
|
|
<text x="575" y="444" fill="#fb7185" font-size="9" text-anchor="middle">Native App</text>
|
|
<text x="575" y="460" fill="#94a3b8" font-size="8" text-anchor="middle">Photo + Barcode QC</text>
|
|
|
|
<!-- ========== IoT ========== -->
|
|
<rect x="720" y="380" width="180" height="100" rx="10" fill="rgba(251, 146, 60, 0.4)" stroke="#fb923c" stroke-width="2"/>
|
|
<text x="810" y="408" fill="white" font-size="13" font-weight="700" text-anchor="middle">IoT</text>
|
|
<text x="810" y="426" fill="#94a3b8" font-size="10" text-anchor="middle">Rust</text>
|
|
<text x="810" y="444" fill="#fb923c" font-size="9" text-anchor="middle">Fixed Readers • Sensors</text>
|
|
<text x="810" y="460" fill="#94a3b8" font-size="8" text-anchor="middle">MQTT / HTTP • ERP integration</text>
|
|
|
|
<!-- ========== CONNECTIONS ========== -->
|
|
|
|
<!-- Assets → Core (solid) -->
|
|
<line x1="222" y1="420" x2="280" y2="340" stroke="#22d3ee" stroke-width="2" marker-end="url(#arrowhead)"/>
|
|
<text x="235" y="375" fill="#22d3ee" font-size="9" font-weight="600">API Sync</text>
|
|
|
|
<!-- Print → Core (solid) + asset registration note -->
|
|
<line x1="350" y1="378" x2="430" y2="340" stroke="#fbbf24" stroke-width="2" marker-end="url(#arrowhead)"/>
|
|
<text x="365" y="362" fill="#fbbf24" font-size="9">Print Jobs + Asset Reg</text>
|
|
|
|
<!-- Capture → Core (solid) -->
|
|
<line x1="575" y1="378" x2="575" y2="340" stroke="#fb7185" stroke-width="2" marker-end="url(#arrowhead)"/>
|
|
<text x="590" y="362" fill="#fb7185" font-size="9">Photos + Metadata</text>
|
|
|
|
<!-- IoT → Core (dashed, optional) -->
|
|
<line x1="810" y1="378" x2="610" y2="340" stroke="#fb923c" stroke-width="2" stroke-dasharray="5,4" marker-end="url(#arrowhead-dashed)"/>
|
|
<text x="690" y="355" fill="#fb923c" font-size="9">Events (optional)</text>
|
|
|
|
<!-- Core Web UI uses Core Backend API (short arrow) -->
|
|
<line x1="392" y1="135" x2="408" y2="135" stroke="#22d3ee" stroke-width="1.5" marker-end="url(#arrowhead)"/>
|
|
|
|
<!-- Core Backend owns MongoDB -->
|
|
<line x1="612" y1="135" x2="628" y2="135" stroke="#a78bfa" stroke-width="2" marker-end="url(#arrowhead)"/>
|
|
|
|
<!-- Legend -->
|
|
<text x="50" y="530" fill="white" font-size="10" font-weight="700">Legend</text>
|
|
|
|
<rect x="50" y="542" width="18" height="11" rx="2" fill="rgba(6, 78, 59, 0.55)" stroke="#34d399" stroke-width="1"/>
|
|
<text x="75" y="551" fill="#94a3b8" font-size="8">Core (Go + Vue.js + MongoDB)</text>
|
|
|
|
<rect x="250" y="542" width="18" height="11" rx="2" fill="rgba(8, 51, 68, 0.5)" stroke="#22d3ee" stroke-width="1"/>
|
|
<text x="275" y="551" fill="#94a3b8" font-size="8">Assets (Flutter)</text>
|
|
|
|
<rect x="375" y="542" width="18" height="11" rx="2" fill="rgba(120, 53, 15, 0.45)" stroke="#fbbf24" stroke-width="1"/>
|
|
<text x="400" y="551" fill="#94a3b8" font-size="8">Print (Flutter/Rust + UI)</text>
|
|
|
|
<rect x="520" y="542" width="18" height="11" rx="2" fill="rgba(136, 19, 55, 0.45)" stroke="#fb7185" stroke-width="1"/>
|
|
<text x="545" y="551" fill="#94a3b8" font-size="8">Capture (Native)</text>
|
|
|
|
<rect x="650" y="542" width="18" height="11" rx="2" fill="rgba(251, 146, 60, 0.4)" stroke="#fb923c" stroke-width="1"/>
|
|
<text x="675" y="551" fill="#94a3b8" font-size="8">IoT (Rust)</text>
|
|
|
|
<line x1="790" y1="547" x2="808" y2="547" stroke="#fb923c" stroke-width="1.5" stroke-dasharray="4,3" marker-end="url(#arrowhead-dashed)"/>
|
|
<text x="815" y="551" fill="#94a3b8" font-size="8">Optional flow</text>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="cards">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-dot emerald"></div>
|
|
<h3>Core (Central)</h3>
|
|
</div>
|
|
<ul>
|
|
<li>• Go backend (center) + Vue.js Web UI (left)</li>
|
|
<li>• Owns MongoDB (assets, tags, photos, zones)</li>
|
|
<li>• Single API integration point</li>
|
|
<li>• Web UI also consumes the Core API</li>
|
|
</ul>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-dot cyan"></div>
|
|
<h3>Assets (Mobile)</h3>
|
|
</div>
|
|
<ul>
|
|
<li>• Flutter native mobile app</li>
|
|
<li>• Seek & find, lightweight inventory</li>
|
|
<li>• Enrollment & zone management</li>
|
|
<li>• Syncs with Core API</li>
|
|
</ul>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-dot amber"></div>
|
|
<h3>Print</h3>
|
|
</div>
|
|
<ul>
|
|
<li>• Flutter + Rust</li>
|
|
<li>• Zebra ZPL + RFID encoding</li>
|
|
<li>• Print UI for configuration</li>
|
|
<li>• Print API + can register assets with Core</li>
|
|
</ul>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-dot rose"></div>
|
|
<h3>Capture</h3>
|
|
</div>
|
|
<ul>
|
|
<li>• Native mobile app (PhotoTag)</li>
|
|
<li>• Photo + barcode association</li>
|
|
<li>• QC & visual documentation</li>
|
|
<li>• Feeds Core via API</li>
|
|
</ul>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-dot orange"></div>
|
|
<h3>IoT</h3>
|
|
</div>
|
|
<ul>
|
|
<li>• Rust service</li>
|
|
<li>• Fixed readers (Impinj/Zebra)</li>
|
|
<li>• Sensors (location, temp, shock)</li>
|
|
<li>• Optional dashed flow to Core</li>
|
|
<li>• Can integrate with ERP systems</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="footer">
|
|
TallyFlow • 5 components only • MongoDB nested inside Core • Print can register assets • Verified from source • 2026
|
|
</p>
|
|
</div>
|
|
</body>
|
|
</html> |