RIVALS SECTION — COMPLETE REFERENCE (v3.x codebase) 1. File ...

Prompt

RIVALS SECTION — COMPLETE REFERENCE (v3.x codebase) 1. File Map File Role resources/app/src/components/RivalsView.jsx Main Rivals view (leaderboard + head-to-head + CRUD) resources/app/src/components/DilemmaView.jsx Sub-component: "Dilemma" tab (positive/negative forces per rival) resources/app/src/App.jsx Owns the state, props, tab registration, lazy-loading, error boundary resources/app/src/index.css All shared CSS classes the Rivals UI depends on (no rivals-specific CSS file exists — styles are shared classes + inline style={{}} objects) resources/app/src/components/ViewErrorBoundary.jsx Crash recovery wrapper (name="RivalsView", owns key 'rivals_data') resources/app/src/components/AiChatPanel.jsx Reads rivals to generate AI rival comparisons & daily briefing resources/app/src/dataSync.js / constants.js No rivals references found in these 2. State & Data Model (in App.jsx) jsx Copy // ~Line 2065 — persisted under localStorage key 'rivals' const [rivals, setRivals] = usePersistentState('rivals', [ { id: 1, name: 'Uncle Fred', age: 52, neighborhood: 'Downtown', income: 14000000, businessList: [], achievements: ['Opened 2nd store', 'Bought a sports car'] } ]); Rival object shape (built in saveRival): js Copy { id: Date.now(), // number — timestamp name, age, neighborhood, // strings income, netWorth, // numbers (parsed with parseFloat || 0) description, // string "Background Intel" businessList: [], // array of { id, name, type, address, income } achievements: [] // array of strings } Derived "YOU" pseudo-entry (not persisted, built in RivalsView): js Copy const me = { id: 'me', name: 'YOU', netWorth: myNetWorthValue, isMe: true }; Props passed to RivalsView (App.jsx ~line 3183): jsx Copy <RivalsView rivals={rivals} setRivals={setRivals} formatMoney={formatMoney} myEarningsValue={myEarningsValue} myNetWorthValue={myNetWorthValue} /> Where YOUR stats come from (App.jsx ~2466–2473) — parsed from the Persona profile fields: js Copy const myEarningsString = profileData.fields.find(f => f.label.toLowerCase().includes('monthly income'))?.value || 'Rs 0'; const myEarningsValue = parseFloat(myEarningsString.replace(/[^0-9.-]+/g,"")) || 0; const myNetWorthString = profileData.fields.find(f => f.label.toLowerCase().includes('savings') || f.label.toLowerCase().includes('net worth'))?.value || 'Rs 0'; const myNetWorthValue = parseFloat(myNetWorthString.replace(/[^0-9.-]+/g,"")) || 0; const formatMoney = (val) => `Rs ${new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(val)}`; Currency migration hack (App.jsx ~1622–1632): on load, old rivals_data items get netWorth/income/business income × 278 (PKR conversion). Persistence hook usePersistentState(key, initial) — reads/writes localStorage JSON, with corruption guards (resets to default if wrong type; removes key if value null). Tab registration (App.jsx ~1050): { id: 'rivals', label: 'Rivals', icon: 'Swords', emoji: '⚔️', color: '#06b6d4' }. Lazy-loaded at line 25: const RivalsView = React.lazy(() => import('./components/RivalsView'));. Rendered only when activeTab === 'rivals', wrapped in <ViewErrorBoundary name="RivalsView" label="Rivals section crashed">. 3. Layout / HTML Structure (RivalsView.jsx) Top-level container: inline-styled flex row, gap: 14px, overflow: hidden, full width/height. text Copy ┌─ Left Panel (fixed 220px) ──────────────┬─ Right Panel (flex:1, scrollable) ─────────────┐ │ "LEADERBOARD" header │ If selectedRival: │ │ [ + Add Target ] button │ ┌ Top Identity Block ┐ │ │ ─────────────────────────── │ │ ShieldAlert icon (60px, red gradient) │ │ #1 Person A NET WORTH: Rs X │ │ NAME (uppercase, 14px, 900 weight) │ │ #2 Person B ... │ │ Age · Neighborhood (with icons) │ │ #N YOU ... (blue, border-strong) │ │ [Edit2][Trash2] buttons │ │ (all sorted, you included) │ │ "Background Intel" glass-panel (red left │ │ │ │ border, uppercase label, description) │ │ │ ├─ Head-to-Head Stats (glass-panel) ──────────┤ │ │ │ YOU ⚔️ RivalFirstName │ │ │ │ Est. Net Worth: [ progress bar ] blue vs red│ │ │ │ Monthly Income: [ progress bar ] │ │ │ ├─ Sub-tabs ──────────────────────────────────┤ │ │ │ Known Businesses (n) │ Key Achievements │ │ │ │ │ ⚖ Dilemma │ │ │ └─ Tab content ────────────────────────────────┘ │ │ businesses → styled-table + "Add Known Business" │ │ intel → achievement list w/ Trophy icons │ │ dilemma → <DilemmaView rivalId rivalName/> │ │ If NO selectedRival: "No Target Selected" empty state └──────────────────────────────────────────┴──────────────────────────────────────────────────┘ + 2 modals (Add/Edit Rival, Add/Edit Business) — both .modal-overlay > .glass-panel-dark.modal-content Component-local state (RivalsView): selectedRivalId (defaults to first rival), isEditingRival, editingRivalData, isAddingBusiness, editingBusiness, activeTab (default 'businesses'). 4. Core Logic Leaderboard sorting: js Copy const sortedRivals = [...rivals].sort((a, b) => (b.netWorth || 0) - (a.netWorth || 0)); const allLeaderboard = [...sortedRivals, me].sort((a, b) => b.netWorth - a.netWorth); Rank #index + 1 rendered by position in array. Clicking a rival (unless isMe) sets selectedRivalId. Comparison ratio (head-to-head bars): js Copy const calculateRatio = (mine, theirs) => { const total = mine + theirs; if (total === 0) return 50; // default 50/50 if both 0 return (mine / total) * 100; }; Bar fill width = calculateRatio(myValue, rivalValue)%; container background is rgba(239,68,68,0.2) (red), fill is #3b82f6 (blue) — blue = YOU, red = RIVAL. saveRival (form handler): reads e.target.name/age/neighborhood/income/netWorth/description. If editingRivalData exists → map-replace by id; else create {id: Date.now(), ..., businessList: [], achievements: []}, push, auto-select the new rival. Only saves if name is truthy. deleteRival(id): filters out; if the deleted rival was selected, selects newRivals[0]?.id || null. saveBusiness: reads name/type/address/income; if editingBusiness → map-replace in selectedRival.businessList, else append {id: Date.now(), ...}. Uses functional spread: setRivals(rivals.map(r => r.id === selectedRival.id ? {...r, businessList: updatedBusinessList} : r)). deleteBusiness(bizId): filters businessList, writes back to the selected rival only. Sub-tabs: plain <h3> elements with onClick switching activeTab; active tab gets fontWeight: 800, color: var(--color-text-main), borderBottom: 2px solid var(--color-accent). Empty states: businesses → table row colSpan=4 "No business intelligence gathered."; achievements → "No significant achievements logged."; no rival → centered Swords icon (opacity 0.2) + "No Target Selected". Identity block header uses first word of rival name: {selectedRival.name.split(' ')[0]}. 5. DilemmaView (the "Dilemma" sub-tab) — its own logic Local persistence via its own usePersistentState keyed per rival: dilemma_positive_${rivalId} → array of {id: Date.now(), text} dilemma_negative_${rivalId} → same Default rivalId = 'global' if not passed (RivalsView passes selectedRival.id). Features: Two columns: Positive Force (Sun icon, #fbbf24 amber) and Negative Dilemmas (Moon icon, #6366f1 indigo), plus a purple gradient header w/ Quote icon: "{rivalName}'s Dilemmas" and tagline "For every positive thought, there's a negative force. Balance is key." Entry textarea: Enter (without Shift) adds item to top of its list, clears input. Shift+Enter = newline. Inline editing: pencil (Edit2) opens a small textarea in place; Save (CheckCircle) or Enter commits; Cancel discards. Trash deletes. Item count shown in column header ("n Entries"). Hover styles via onMouseOver/onMouseOut inline handlers; actions appear on hover via CSS div:hover > .dilemma-item-actions { opacity:1 !important }. Item border-left colored 2px solid ${color}88 (semi-transparent accent). renderColumn({title, icon, color, bg, items, listType, placeholder}) — reusable column renderer. 6. CSS Reference (all from resources/app/src/index.css — shared, not rivals-specific) The Rivals UI uses ~90% inline styles (hard-coded hex colors + CSS variables) plus these shared classes: Class Purpose (key rules) .glass-panel, .glass-panel-dark Frosted panel: background: var(--bg-panel), backdrop-filter: blur(40px) saturate(180%), border-radius: var(--radius-xl), border: 1px solid var(--border-subtle), box-shadow: var(--shadow-lg) + inset highlights, plus a :after top gradient overlay (linear-gradient white 3% → transparent, top 50%) .modal-overlay Fixed full-screen backdrop: backdrop-filter: blur(16px), z-index: 1100, background: rgba(8,8,10,0.7), centered, animation: overlay-fade-in .25s ease-out .modal-content width: 500px, max-width: 90vw, padding: 24px, frosted rgba(18,18,22,0.95) bg, multi-layer border, animation: modal-pop-in .35s var(--ease-spring) .modal-header / .modal-close Flex row + circular close button that rotates 90° on hover .modal-title font-family: var(--font-heading), 15px, 600 weight .form-group 14px bottom margin; label = 10px, uppercase, letter-spacing .8px, 700 weight .form-input Full-width, border-radius: var(--radius-md), dark inset bg #0003, border #ffffff14; :focus → border-focus + accent glow ring + lift -1px .btn-primary Accent bg, uppercase feel, animated shine sweep :before, hover lift translateY(-2px) scale(1.02) + glow .progress-bar-container height: 6px (overridden inline to 12px), dark track #00000040, inset shadow, overflow hidden .progress-bar-fill Animated width .6s var(--ease-out-expo), gradient accent + glow, :after shimmer sweep animation (2s infinite) .styled-table-container Rounded border, backdrop-filter: blur(12px), bg #00000026, horizontal scroll .styled-table Collapsed borders, uppercase 10.5px header row with #00000040 bg, row hover var(--bg-panel-hover), last row no border .animate-slide-up / .delay-100 / .delay-200 Left panel slides up 500ms (60ms delay), right panel 500ms (120ms delay) — staggered entrance .animate-fade-in Dilemma view fade-in 400ms .dilemma-item-actions Hidden (opacity 0) until parent hover → opacity: 1 !important .sidebar-item.icon-rivals.active svg etc. animation: icon-clash .8s ease-in-out infinite (rotate -15deg → scale 1.1 wiggle) on the Swords nav icon .app-container[data-active-tab=rivals] Sets --section-accent: #ffffff; --section-accent-soft: rgba(255,255,255,0.08) Key CSS variables (dark theme default) the inline styles reference: --bg-panel (#000), --bg-surface (#ffffff05), --bg-panel-hover (#ffffff0d), --border-subtle (#ffffff12), --border-strong (#ffffff26), --color-text-main (#f3f4f6), --color-text-muted (#9ca3af), --color-accent (#fff), --radius-sm/md/lg/xl (6/10/14/20px), --ease-out-expo, --ease-spring, --font-heading (Outfit), --font-main (Inter). Hard-coded color system inside RivalsView: YOU = #3b82f6 (blue), RIVAL = #ef4444 (red), money = #10b981 (green), achievements = #f59e0b (amber), Add button = blue-tinted rgba(59,130,246,0.1) bg. DilemmaView: positive #fbbf24, negative #6366f1, header gradient #8b5cf6 → #d946ef. Icons (lucide-react): Plus, X, Trash2, Edit2, MapPin, Building, Trophy, UserSquare2, ShieldAlert, Swords, Scale (RivalsView); Sun, Moon, CheckCircle, Quote (DilemmaView). 7. AI Integration (AiChatPanel.jsx) ~line 253–260 — "Rivals Comparison": filters rivals.filter(r => r.netWorth > myNetWorthValue); picks highest and tells the user how far ahead the top rival is. ~line 390–395 — Daily Briefing context: sorts rivals by (netWorth || income) and emits Top Rival: "{name}" (Net Worth: Rs ...) into the LLM prompt; system prompt asks the AI for "Rival Advice" and "advice to stay motivated against rivals." The AI can also run actions but none target rivals directly (no rival CRUD actions exposed to the agent). 8. Error Recovery ViewErrorBoundary maps RivalsView → ['rivals_data'] — but note: the live state key is 'rivals' (the boundary's reset key 'rivals_data' is the legacy key from the old dataSync conversion). If the section crashes, the boundary shows a red panel with the error message, a "Section: RivalsView" tag, and a Retry button. 9. Quick Facts / Gotchas (useful for your discussion) No dedicated rivals CSS file — every visual decision is inline styles + generic shared classes; the section is styled by CSS variables + a fixed blue/red/green palette. "YOU" is injected but not clickable and not persisted; it always renders with #3b82f6. Sorting is by netWorth only (leaderboard and AI top-rival both fall back to income in the AI but NOT in the UI sort — UI uses (b.netWorth || 0)). Dilemma data is stored per-rival under dilemma_positive_<id> / dilemma_negative_<id> keys in localStorage — deleting a rival leaves its dilemma keys orphaned. calculateRatio returns 50 when both are 0 (defensive default). Rival age/netWorth/income inputs are type="number" required; description is optional. The achievements array is display-only — there is no UI to add/remove achievements (only pre-seeded data). activeTab resets to 'businesses' whenever the view re-mounts above is the fucnitonality and design and logics etc etc about a section name as rivals in my app. and i want you to improve it overall fucnitoanlity logics and design and a to z everything.