tblumer/obsidian
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
obsidian/TallyFlow/TallyFlow-Architecture-Diagram.html
T

261 lines
13 KiB
HTML
Raw Permalink Blame History

<!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 rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB9AAAAfQCAYAAACaOMR5AAAQAElEQVR4Aezd6Y9l6X0X8HNurd0zvUwv43EcnJAFCAIilBcgASEo" type="image/png">
<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: 1.5rem 2rem;
color: white;
}
.container { max-width: 1180px; margin: 0 auto; }
.header { margin-bottom: 1.25rem; text-align: center; }
.header-row { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 0.4rem; }
.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.55rem; font-weight: 700; letter-spacing: -0.025em; }
.subtitle { color: #94a3b8; font-size: 0.875rem; }
.diagram-container {
background: rgba(15, 23, 42, 0.5);
border-radius: 1rem; border: 1px solid #1e293b;
padding: 1.25rem; overflow-x: auto;
margin-bottom: 1.5rem;
}
svg { width: 100%; min-width: 1050px; display: block; }
.components-row {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 1rem;
flex-wrap: wrap;
max-width: 1180px;
margin: 0 auto;
}
.card {
background: rgba(15, 23, 42, 0.5);
border-radius: 0.75rem; border: 1px solid #1e293b;
padding: 1.1rem;
flex: 1 1 180px;
max-width: 220px;
}
.card-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; }
.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-dot.rose { background: #fb7185; }
.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.35rem; }
.footer { text-align: center; margin-top: 1.25rem; 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">Asset Tracking &amp; RFID Workflow Platform</p>
</div>
<div class="diagram-container">
<svg viewBox="0 0 1100 620" width="1100" height="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="200" y="45" width="700" height="305" rx="14" fill="rgba(6, 78, 59, 0.1)" stroke="#34d399" stroke-width="2.5"/>
<text x="220" y="70" fill="#34d399" font-size="13" font-weight="700">TallyFlow Core (Central Hub)</text>
<!-- Core Web UI (Vue.js) - LEFT -->
<rect x="220" y="90" width="170" height="65" rx="8" fill="rgba(8, 51, 68, 0.55)" stroke="#22d3ee" stroke-width="2"/>
<text x="305" y="113" fill="white" font-size="12" font-weight="700" text-anchor="middle">Core Web UI</text>
<text x="305" y="129" fill="#94a3b8" font-size="9" text-anchor="middle">Vue.js 2</text>
<text x="305" y="143" fill="#22d3ee" font-size="8" text-anchor="middle">Uses Core API</text>
<!-- Core Backend (Go) - CENTER -->
<rect x="410" y="90" width="190" height="65" rx="8" fill="rgba(6, 78, 59, 0.55)" stroke="#34d399" stroke-width="2"/>
<text x="505" y="113" fill="white" font-size="12" font-weight="700" text-anchor="middle">Core Backend</text>
<text x="505" y="129" fill="#94a3b8" font-size="9" text-anchor="middle">Go (REST API)</text>
<text x="505" y="143" fill="#34d399" font-size="8" text-anchor="middle">REST + WebSocket</text>
<!-- MongoDB (nested inside Core) - RIGHT -->
<rect x="620" y="90" width="260" height="65" rx="6" fill="rgba(76, 29, 149, 0.6)" stroke="#a78bfa" stroke-width="1.5"/>
<text x="750" y="113" fill="white" font-size="12" font-weight="700" text-anchor="middle">MongoDB</text>
<text x="750" y="129" fill="#c4b5fd" font-size="9" text-anchor="middle">Assets • Tags • Photos • Zones</text>
<text x="750" y="143" fill="#c4b5fd" font-size="8" text-anchor="middle">(owned by Core Backend)</text>
<!-- Auth Service (new) - no arrows -->
<rect x="220" y="170" width="200" height="55" rx="6" fill="rgba(136, 19, 55, 0.45)" stroke="#fb7185" stroke-width="1.5"/>
<text x="320" y="193" fill="white" font-size="12" font-weight="700" text-anchor="middle">Auth Service</text>
<text x="320" y="209" fill="#fb7185" font-size="9" text-anchor="middle">Login + SSO support</text>
<!-- Core API label -->
<text x="550" y="245" fill="#34d399" font-size="9" text-anchor="middle" font-weight="600">Core API Layer — single integration point for all components</text>
<!-- Centered row of 4 boxes -->
<!-- Assets -->
<rect x="150" y="390" width="170" height="100" rx="10" fill="rgba(8, 51, 68, 0.5)" stroke="#22d3ee" stroke-width="2"/>
<text x="235" y="415" fill="white" font-size="13" font-weight="700" text-anchor="middle">Assets</text>
<text x="235" y="433" fill="#94a3b8" font-size="10" text-anchor="middle">(Mobile)</text>
<text x="235" y="451" fill="#22d3ee" font-size="9" text-anchor="middle">Flutter</text>
<text x="235" y="469" fill="#94a3b8" font-size="8" text-anchor="middle">Seek &amp; Find • Inventory</text>
<text x="235" y="482" fill="#94a3b8" font-size="8" text-anchor="middle">Enrollment</text>
<!-- Print -->
<rect x="360" y="390" width="180" height="100" rx="10" fill="rgba(120, 53, 15, 0.45)" stroke="#fbbf24" stroke-width="2"/>
<text x="450" y="415" fill="white" font-size="13" font-weight="700" text-anchor="middle">Print</text>
<text x="450" y="433" fill="#94a3b8" font-size="10" text-anchor="middle">Flutter + Rust</text>
<text x="450" y="451" fill="#fbbf24" font-size="9" text-anchor="middle">Zebra ZPL • RFID</text>
<text x="450" y="469" fill="#94a3b8" font-size="8" text-anchor="middle">Print UI + API • Registers assets</text>
<!-- Capture -->
<rect x="590" y="390" width="170" height="100" rx="10" fill="rgba(136, 19, 55, 0.45)" stroke="#fb7185" stroke-width="2"/>
<text x="675" y="418" fill="white" font-size="13" font-weight="700" text-anchor="middle">Capture</text>
<text x="675" y="436" fill="#94a3b8" font-size="10" text-anchor="middle">(PhotoTag)</text>
<text x="675" y="454" fill="#fb7185" font-size="9" text-anchor="middle">Native App</text>
<text x="675" y="470" fill="#94a3b8" font-size="8" text-anchor="middle">Photo + Barcode QC</text>
<!-- IoT -->
<rect x="820" y="390" width="180" height="100" rx="10" fill="rgba(251, 146, 60, 0.4)" stroke="#fb923c" stroke-width="2"/>
<text x="910" y="418" fill="white" font-size="13" font-weight="700" text-anchor="middle">IoT</text>
<text x="910" y="436" fill="#94a3b8" font-size="10" text-anchor="middle">Rust</text>
<text x="910" y="454" fill="#fb923c" font-size="9" text-anchor="middle">Fixed Readers • Sensors</text>
<text x="910" y="470" fill="#94a3b8" font-size="8" text-anchor="middle">MQTT / HTTP • ERP integration</text>
<!-- CONNECTIONS -->
<line x1="322" y1="430" x2="380" y2="355" stroke="#22d3ee" stroke-width="2" marker-end="url(#arrowhead)"/>
<text x="335" y="385" fill="#22d3ee" font-size="9" font-weight="600">API Sync</text>
<line x1="450" y1="388" x2="530" y2="355" stroke="#fbbf24" stroke-width="2" marker-end="url(#arrowhead)"/>
<text x="465" y="372" fill="#fbbf24" font-size="9">Print Jobs + Asset Reg</text>
<line x1="675" y1="388" x2="675" y2="355" stroke="#fb7185" stroke-width="2" marker-end="url(#arrowhead)"/>
<text x="690" y="372" fill="#fb7185" font-size="9">Photos + Metadata</text>
<line x1="910" y1="388" x2="710" y2="355" stroke="#fb923c" stroke-width="2" stroke-dasharray="5,4" marker-end="url(#arrowhead-dashed)"/>
<text x="790" y="365" fill="#fb923c" font-size="9">Events (optional)</text>
<line x1="392" y1="122" x2="408" y2="122" stroke="#22d3ee" stroke-width="1.5" marker-end="url(#arrowhead)"/>
<line x1="602" y1="122" x2="618" y2="122" stroke="#a78bfa" stroke-width="2" marker-end="url(#arrowhead)"/>
<!-- Centered Legend -->
<text x="550" y="535" fill="white" font-size="10" font-weight="700" text-anchor="middle">Legend</text>
<rect x="300" y="547" width="18" height="11" rx="2" fill="rgba(6, 78, 59, 0.55)" stroke="#34d399" stroke-width="1"/>
<text x="325" y="556" fill="#94a3b8" font-size="8">Core (Go + Vue.js + MongoDB)</text>
<rect x="480" y="547" width="18" height="11" rx="2" fill="rgba(8, 51, 68, 0.5)" stroke="#22d3ee" stroke-width="1"/>
<text x="505" y="556" fill="#94a3b8" font-size="8">Assets (Flutter)</text>
<rect x="590" y="547" width="18" height="11" rx="2" fill="rgba(120, 53, 15, 0.45)" stroke="#fbbf24" stroke-width="1"/>
<text x="615" y="556" fill="#94a3b8" font-size="8">Print (Flutter/Rust + UI)</text>
<rect x="720" y="547" width="18" height="11" rx="2" fill="rgba(136, 19, 55, 0.45)" stroke="#fb7185" stroke-width="1"/>
<text x="745" y="556" fill="#94a3b8" font-size="8">Capture (Native)</text>
<rect x="850" y="547" width="18" height="11" rx="2" fill="rgba(251, 146, 60, 0.4)" stroke="#fb923c" stroke-width="1"/>
<text x="875" y="556" fill="#94a3b8" font-size="8">IoT (Rust)</text>
<line x1="300" y1="570" x2="318" y2="570" stroke="#fb923c" stroke-width="1.5" stroke-dasharray="4,3" marker-end="url(#arrowhead-dashed)"/>
<text x="325" y="574" fill="#94a3b8" font-size="8">Optional flow</text>
</svg>
</div>
<!-- Centered row of 5 component cards -->
<div class="components-row">
<div class="card">
<div class="card-header">
<div class="card-dot emerald"></div>
<h3>Core (Central)</h3>
</div>
<ul>
<li>• Go backend + Vue.js Web UI</li>
<li>• Auth Service: Login + SSO</li>
<li>• Owns MongoDB</li>
<li>• Single API integration point</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 app</li>
<li>• Seek &amp; find, inventory</li>
<li>• Enrollment &amp; zones</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</li>
<li>• Print UI + API</li>
<li>• Can register assets</li>
</ul>
</div>
<div class="card">
<div class="card-header">
<div class="card-dot rose"></div>
<h3>Capture</h3>
</div>
<ul>
<li>• Native app (PhotoTag)</li>
<li>• Photo + barcode QC</li>
<li>• 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 + sensors</li>
<li>• Optional to Core</li>
<li>• ERP integration</li>
</ul>
</div>
</div>
<p class="footer">
TallyFlow • Asset Tracking &amp; RFID Workflow Platform
</p>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink