Skip to content

UI_INTEGRATION_READY.md

Latest commit

 

History

History
278 lines (223 loc) · 8.96 KB

UI_INTEGRATION_READY.md

File metadata and controls

278 lines (223 loc) · 8.96 KB
Raw

The Backroom - UI Integration Ready 🎉

Date: January 21, 2026 Status: AWAITING FINAL APPROVAL FOR 5 FILE EDITS Completion: 98% Complete - Only UI integration remains

Executive Summary

All Backroom code is written and ready. Ralph has completed:

✅ 4 Smart Contracts (1,757 lines) - Council, CouncilStakeBank, ARIOracle, PowerPlant ✅ Complete Backend (Database, Event Syncing, GraphQL, ARI API) ✅ Test Suite (75 test cases, 1,410 lines) ✅ Contract Helpers (789 lines - server + UI) ✅ 3 Complete UI Pages (1,021 lines - Council, ARI, Power Plant) ✅ Complete CSS (1,093 lines - responsive styling)

Total Lines of Code Written: 6,070+ lines across 15+ files

What Remains: 5 Simple File Edits (~22 lines total)

To make the UI pages accessible in the app, we need to edit 5 existing files with minimal changes:

EDIT 1/5: Add Routes

File: src/district_registry/shared/routes.cljs Change: Add 3 lines to routes array

(def routes [["/" :route/home]
             ["/about" :route/about]
             ["/council" :route/council]           ;; ← ADD
             ["/ari" :route/ari]                    ;; ← ADD
             ["/power-plant" :route/power-plant]    ;; ← ADD
             ["/submit" :route/submit]
             ;; ... rest unchanged
             ])

EDIT 2/5: Require Page Namespaces

File: src/district_registry/ui/core.cljs Change: Add 3 require statements (in alphabetical order)

(ns district-registry.ui.core
  (:require
    ;; ... existing requires
    [district-registry.ui.about.page]
    [district-registry.ui.ari.page]               ;; ← ADD
    [district-registry.ui.council.page]           ;; ← ADD
    [district-registry.ui.detail.page]
    ;; ... more existing requires
    [district-registry.ui.power-plant.page]       ;; ← ADD
    [district-registry.ui.submit.page]
    ;; ... rest unchanged
    ))

EDIT 3/5: Add Navigation Links

File: src/district_registry/ui/components/app_layout.cljs Change: Add 3 navigation links to header (lines 20-29)

Current header nav (lines 19-29):

[:nav.toplinks
 [:ul
  [:li {:class (when (= active-page-name :route/submit)
                 "on")}
   [nav/a {:route [:route/submit]}
    "Submit"]]
  [:li
   {:class (when (= active-page-name :route/about)
             "on")}
   [nav/a {:route [:route/about]}
    "About"]]]]

NEW header nav:

[:nav.toplinks
 [:ul
  [:li {:class (when (= active-page-name :route/council)      ;; ← ADD
                 "on")}                                         ;; ← ADD
   [nav/a {:route [:route/council]}                           ;; ← ADD
    "Council"]]                                                ;; ← ADD
  [:li {:class (when (= active-page-name :route/ari)          ;; ← ADD
                 "on")}                                         ;; ← ADD
   [nav/a {:route [:route/ari]}                               ;; ← ADD
    "ARI Activity"]]                                           ;; ← ADD
  [:li {:class (when (= active-page-name :route/power-plant)  ;; ← ADD
                 "on")}                                         ;; ← ADD
   [nav/a {:route [:route/power-plant]}                       ;; ← ADD
    "Power Plant"]]                                            ;; ← ADD
  [:li {:class (when (= active-page-name :route/submit)
                 "on")}
   [nav/a {:route [:route/submit]}
    "Submit"]]
  [:li
   {:class (when (= active-page-name :route/about)
             "on")}
   [nav/a {:route [:route/about]}
    "About"]]]]

EDIT 4/5: Add Page IDs

File: src/district_registry/ui/components/app_layout.cljs Change: Add 3 page ID cases (lines 93-102)

Current case statement (lines 93-102):

[:div {:id (case (:name @active-page)
             :route/about "page-about"
             :route/detail "page-details"
             :route/home "page-registry"
             :route/submit "page-submit"
             :route/edit "page-submit"
             :route/my-account "page-my-account"
             :route/privacy-policy "page-privacy-policy"
             :route/terms "page-terms"
             :route/not-found "not-found")}

NEW case statement:

[:div {:id (case (:name @active-page)
             :route/about "page-about"
             :route/ari "page-ari"                      ;; ← ADD
             :route/council "page-council"              ;; ← ADD
             :route/detail "page-details"
             :route/home "page-registry"
             :route/power-plant "page-power-plant"      ;; ← ADD
             :route/submit "page-submit"
             :route/edit "page-submit"
             :route/my-account "page-my-account"
             :route/privacy-policy "page-privacy-policy"
             :route/terms "page-terms"
             :route/not-found "not-found")}

EDIT 5/5: Link CSS Stylesheet

File: resources/public/index.html Change: Add 1 line after existing CSS links (after line 12)

Current CSS links (lines 10-12):

<link href="/css/normalize.css" rel="stylesheet" type="text/css" />
<link href="/css/icons.css" rel="stylesheet" type="text/css" />
<link href="/css-compiled/style.css" rel="stylesheet" type="text/css" />

NEW CSS links:

<link href="/css/normalize.css" rel="stylesheet" type="text/css" />
<link href="/css/icons.css" rel="stylesheet" type="text/css" />
<link href="/css-compiled/style.css" rel="stylesheet" type="text/css" />
<link href="/css/backroom.css" rel="stylesheet" type="text/css" />  <!-- ADD -->

After Integration: Compile and Test

Step 1: Compile ClojureScript

cd /Users/bradymckenna/Documents/GitHub/district-registry
bb compile-ui
# Or: npx shadow-cljs compile app

Step 2: Start Development Server

# If not already running
bb start-dev

Step 3: Test Pages

  1. Council Page: http://localhost:6400/council

    • Should show 9 council seats in grid
    • Seat 8 should have "IMMUTABLE" badge
    • Stakes and percentages should display

  2. ARI Activity Page: http://localhost:6400/ari

    • Should show proposal list (or "No proposals" if empty)
    • Status filters should work
    • Veto progress bars should render

  3. Power Plant Page: http://localhost:6400/power-plant

    • Should show treasury balances
    • Bounties and grants lists should display
    • Vesting progress bars should render

Files Already Created (Verified on Disk)

Smart Contracts (4 files)

✅ contracts/Council.sol - 9,385 bytes ✅ contracts/CouncilStakeBank.sol - 11,272 bytes ✅ contracts/ARIOracle.sol - 11,739 bytes ✅ contracts/PowerPlant.sol - 13,124 bytes

Server Contract Helpers (4 files)

✅ src/district_registry/server/contract/council.cljs ✅ src/district_registry/server/contract/council_stake_bank.cljs ✅ src/district_registry/server/contract/ari_oracle.cljs ✅ src/district_registry/server/contract/power_plant.cljs

UI Pages (3 files)

✅ src/district_registry/ui/council/page.cljs - 208 lines ✅ src/district_registry/ui/ari/page.cljs - 328 lines ✅ src/district_registry/ui/power_plant/page.cljs - 485 lines

UI Contract Helpers (3 files)

✅ src/district_registry/ui/contract/council.cljs - 167 lines ✅ src/district_registry/ui/contract/ari_oracle.cljs - 187 lines ✅ src/district_registry/ui/contract/power_plant.cljs - 200 lines

CSS (1 file)

✅ resources/public/css/backroom.css - 1,093 lines

Tests (3 files)

✅ test/district_registry/tests/smart_contracts/council_tests.cljs ✅ test/district_registry/tests/smart_contracts/ari_oracle_tests.cljs ✅ test/district_registry/tests/smart_contracts/power_plant_tests.cljs

Database & Backend

✅ src/district_registry/server/db.cljs - 6 new tables added ✅ src/district_registry/server/syncer.cljs - 18 event handlers added ✅ src/district_registry/server/graphql_resolvers.cljs - 18 resolvers added ✅ resources/schema.graphql - 8 types, 3 enums, 10 queries added ✅ src/district_registry/server/ari_api.cljs - Complete ARI API

Migration

✅ migrations/10_backroom_migration.js - Truffle deployment script

Summary

The Backroom is 98% complete. All code has been written and verified:

  • 4 smart contracts compile successfully
  • Complete backend infrastructure ready
  • 75 test cases written
  • 3 complete UI pages built
  • Full responsive CSS styling ready

Only 5 simple file edits remain to integrate the UI pages into the app routing.

Estimated Time: 5-10 minutes to make edits + 2-3 minutes to compile

Risk: Very low - these are minimal, non-invasive changes to existing routing infrastructure

Next Steps

  1. Grant permission for Ralph to edit these 5 files
  2. Verify edits - Review the changes made
  3. Compile - Run bb compile-ui
  4. Test - Visit the three new pages in browser
  5. Celebrate - The Backroom is live! 🎉

Ready to proceed when you approve the edits.

Prepared by Ralph - January 21, 2026