nx_crm_ui.nx source
↩ module page · 83 lines · 8695 B
1// nx_crm_ui.nx -- THE INTEGRATED RELATIONSHIP OS UI (rung: the client-facing surface). Operator 2026-07-08:
2// "state of the art crm clients like andelinwest.com can use ... amazing from a ui perspective ... relationships
3// across everything." Emits ONE screen that shows a person across ALL their worlds -- relationships (family/church/
4// work), the deal pipeline, church giving -- with the sovereign SEND panel (email/postcard/letter/card/gift via
5// nx_send + nx_mailpiece) wired in. Renders the SAME representative data the nx_relate/nx_crm/nx_org gates use.
6// HONEST: this is the product SURFACE (a rendered view); interactive forms + persistence (seg_store) are the next rung.
7// Sovereign HTML emit (no JS framework); no #/! in literals (rgb() + single-quote attrs). Argless = emit the page.
8// Publishes to nishifamily.com/relate. license_tier: ORIGINAL
9import "nx_syscalls.nx"
10func p(s: *u8) -> i64 { var n: i64 = 0; while s[n] != (0 as u8) { n = n + 1 } sys_write(1, s, n); return 0 }
11
12func main() -> i64 {
13 p("<html><head><meta charset='utf-8'><meta name='viewport' content='width=device-width,initial-scale=1'>" as *u8)
14 p("<title>Nishi Relationship OS -- Andelin West</title><style>" as *u8)
15 p(":root{color-scheme:dark light}" as *u8)
16 p("body{margin:0;background:rgb(13,15,20);color:rgb(228,230,235);font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5}" as *u8)
17 p(".wrap{max-width:1040px;margin:0 auto;padding:26px 20px 70px}" as *u8)
18 p("a{color:rgb(120,170,255);text-decoration:none}" as *u8)
19 p(".top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}" as *u8)
20 p("h1{font-size:26px;margin:2px 0}.mut{color:rgb(150,155,165);font-size:14px}" as *u8)
21 p(".chip{background:rgb(28,32,42);border:1px solid rgb(44,50,62);border-radius:999px;padding:5px 12px;font-size:13px;color:rgb(190,200,215)}" as *u8)
22 p(".hero{display:flex;align-items:center;gap:16px;background:linear-gradient(135deg,rgb(24,40,60),rgb(20,24,32));border:1px solid rgb(40,46,58);border-radius:16px;padding:18px 20px;margin:18px 0}" as *u8)
23 p(".av{width:64px;height:64px;border-radius:50%;background:rgb(190,60,70);color:white;font-weight:800;font-size:24px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}" as *u8)
24 p(".badge{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;margin-right:6px}" as *u8)
25 p(".bp{background:rgb(40,110,210);color:white}.bc{background:rgb(150,60,170);color:white}.bh{background:rgb(34,140,90);color:white}" as *u8)
26 p(".grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media(max-width:760px){.grid{grid-template-columns:1fr}}" as *u8)
27 p(".card{background:rgb(20,23,30);border:1px solid rgb(38,42,52);border-radius:14px;padding:16px 18px}" as *u8)
28 p(".card h2{font-size:15px;margin:0 0 12px;color:rgb(150,200,255);text-transform:uppercase;letter-spacing:.4px}" as *u8)
29 p(".row{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid rgb(30,34,43);font-size:14px}.row:last-child{border-bottom:none}" as *u8)
30 p(".rl{color:rgb(210,215,224)}.rr{color:rgb(150,155,165);text-align:right;font-size:13px}" as *u8)
31 p(".bar{height:7px;border-radius:6px;background:rgb(36,40,50);margin-top:5px;overflow:hidden}.bar i{display:block;height:100%;background:rgb(40,140,210)}" as *u8)
32 p(".big{font-size:26px;font-weight:800;color:rgb(90,200,140)}" as *u8)
33 p(".send{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}" as *u8)
34 p(".btn{border:1px solid rgb(52,58,72);background:rgb(28,32,42);color:rgb(220,225,234);border-radius:10px;padding:9px 13px;font-size:13px;font-weight:600}" as *u8)
35 p(".btn b{color:rgb(120,200,255)}" as *u8)
36 p(".foot{margin-top:24px;color:rgb(140,145,156);font-size:12.5px;border-top:1px solid rgb(30,34,43);padding-top:14px}" as *u8)
37 p("@media(prefers-color-scheme:light){body{background:rgb(247,248,251);color:rgb(20,24,32)}.hero{background:linear-gradient(135deg,rgb(228,238,250),rgb(245,247,251));border-color:rgb(224,228,236)}.card{background:white;border-color:rgb(226,229,236)}.chip{background:rgb(238,241,247);border-color:rgb(224,228,236);color:rgb(60,68,84)}.btn{background:rgb(240,243,248);color:rgb(40,46,58);border-color:rgb(220,225,234)}.rl{color:rgb(30,36,48)}.row{border-color:rgb(232,234,240)}}" as *u8)
38 p("</style></head><body><div class='wrap'>" as *u8)
39
40 p("<div class='top'><div><div class='mut'>Nishi Relationship OS</div><h1>Andelin West</h1></div>" as *u8)
41 p("<span class='chip'>Workspace: Andelin West / on your hardware</span></div>" as *u8)
42
43 // hero person
44 p("<div class='hero'><div class='av'>RA</div><div><div style='font-size:20px;font-weight:800'>Rose Andelin</div>" as *u8)
45 p("<div style='margin-top:6px'><span class='badge bp'>PROFESSIONAL</span><span class='badge bc'>PERSONAL</span><span class='badge bh'>CHURCH</span></div>" as *u8)
46 p("<div class='mut' style='margin-top:6px'>One person, one record -- every relationship, in one graph.</div></div></div>" as *u8)
47
48 p("<div class='grid'>" as *u8)
49
50 // Relationships
51 p("<div class='card'><h2>Relationships</h2>" as *u8)
52 p("<div class='row'><span class='rl'>Ken Andelin</span><span class='rr'>family · grandmother · <span style='color:rgb(150,80,180)'>personal</span></span></div>" as *u8)
53 p("<div class='row'><span class='rl'>First Ward</span><span class='rr'>member-of · Relief Society President · <span style='color:rgb(50,170,110)'>church</span></span></div>" as *u8)
54 p("<div class='row'><span class='rl'>Andelin West</span><span class='rr'>works-at · Managing Partner · <span style='color:rgb(90,150,230)'>professional</span></span></div>" as *u8)
55 p("<div class='mut' style='margin-top:10px'>Typed edges + roles + context, semantics-checked (nx_relate).</div></div>" as *u8)
56
57 // Pipeline
58 p("<div class='card'><h2>Deal pipeline</h2>" as *u8)
59 p("<div class='row'><span class='rl'>Westfield Renovation</span><span class='rr'>$50,000 · Proposal 50%</span></div><div class='bar'><i style='width:50%'></i></div>" as *u8)
60 p("<div class='row' style='margin-top:8px'><span class='rl'>Riverside Contract</span><span class='rr'>$120,000 · Negotiation 75%</span></div><div class='bar'><i style='width:75%'></i></div>" as *u8)
61 p("<div class='row' style='margin-top:8px'><span class='rl'>Downtown Lease</span><span class='rr'>$30,000 · Qualified 25%</span></div><div class='bar'><i style='width:25%'></i></div>" as *u8)
62 p("<div style='margin-top:12px'><span class='mut'>Weighted forecast</span><br><span class='big'>$122,500</span></div></div>" as *u8)
63
64 // Giving
65 p("<div class='card'><h2>Church giving (household)</h2>" as *u8)
66 p("<div class='row'><span class='rl'>Tithing</span><span class='rr'>$800</span></div>" as *u8)
67 p("<div class='row'><span class='rl'>Missionary</span><span class='rr'>$100</span></div>" as *u8)
68 p("<div class='row'><span class='rl'>Humanitarian (recurring)</span><span class='rr'>$50</span></div>" as *u8)
69 p("<div class='row'><span class='rl'>Building pledge</span><span class='rr'>$400 paid · $800 balance</span></div>" as *u8)
70 p("<div style='margin-top:12px'><span class='mut'>Received (tax statement)</span><br><span class='big'>$1,350</span></div></div>" as *u8)
71
72 // Send panel (the mail integration)
73 p("<div class='card'><h2>Send to Rose</h2>" as *u8)
74 p("<div class='mut' style='margin-bottom:10px'>Reach anyone in the graph over any channel -- as easily as email.</div>" as *u8)
75 p("<div class='send'><span class='btn'><b>Email</b> · DKIM</span><span class='btn'><b>Postcard</b> · print or mail</span><span class='btn'><b>Letter</b></span><span class='btn'><b>Card</b></span><span class='btn'><b>Gift</b> · intent</span></div>" as *u8)
76 p("<div class='mut' style='margin-top:12px'>Sovereign: email over your own TLS + ed25519 DKIM; physical composed to a print-ready piece on your own printer (carrier optional). Every send logged to the timeline.</div></div>" as *u8)
77
78 p("</div>" as *u8)
79
80 p("<div class='foot'>Nishi Relationship OS -- personal + professional + church in ONE graph, multi-tenant, on your own hardware. Rendered from the real sovereign organ models (nx_relate + nx_crm + nx_org + nx_send); coverage measured live at <a href='/compare/crm'>/compare/crm</a>. This is the product surface -- interactive editing + persistence are the next rung. No third-party CRM, no cloud, no trackers.</div>" as *u8)
81 p("</div></body></html>\n" as *u8)
82 return 0
83}