# AI Prompt: Redesign the "Persona" Section (STAFF App) You...

Prompt

# AI Prompt: Redesign the "Persona" Section (STAFF App) You are redesigning the **Persona** section (profile/leveling/gamification dashboard) of a React + Electron app. Vite build, plain CSS in `index.css`, `lucide-react` icons, no component library. It's a single file, `PersonaView.jsx` (~3142 lines), lazy-loaded by `App.jsx` only when `activeTab === 'persona'`, inside `Suspense` + `ViewErrorBoundary`, container `padding:0`. This is the full functional spec — ground truth. Do not invent new data keys, change data shapes, or change how other sections (Todo, Econo, Biz, UnitProjects) read this data. ## 1. Props (unchanged) `profileData/setProfileData` (`profile_data`), `countdowns/setCountdowns`, `buffs/setBuffs`, `goals/setGoals`, `gainExp` (fn), `availableBuffs/setAvailableBuffs` (`custom_buffs`), `systemUptime` (seconds), `levelNames/setLevelNames` (`level_names`, 100 entries), `uptimeHistory/setUptimeHistory` (`staff_uptime_daily_history`). `updateGlobalBuff`/`removeGlobalBuff` are passed but unused — wire in if adding global-buff editing. Internal read-only snapshots: `todos`, `dailyRecords`(`econo_daily_records`), `loans`(`econo_loans`), `unitProjects`+setter(`unit_projects`, writable), `sectorData`(`biz_sector_data`). ## 2. Data shapes (byte-compatible) - `profile_data`: `{name, level, exp, fields:[{id,label,value}]}` - `goals`: `{id, title, reward:'No rewards', exp:500, completed, buffs:[...], deadline:'YYYY-MM-DDTHH:MM:00'|null}` — legacy singular `goal.buff` must still render alongside `goal.buffs` - `countdowns`: `{id, title, targetDate}` - `prophet_total_count` (number, target 10,000,000), `prophet_counting_logs` (`[{date:'YYYY-MM-DD' via Pakistan-time getTodayStrPK(), count}]`), `prophet_counting_start_date` (text only) - `staff_uptime_first_start_time` (human string, created on first mount if missing), `staff_uptime_daily_history` (`{'YYYY-MM-DD':seconds}` keyed by SYSTEM-clock `getSystemDateKey()`) Timezone rule: Pakistan-time helpers are ONLY for the prophet counter/display. Uptime always uses system-clock dates. Never mix. ## 3. Core engines — reproduce exactly **gainExp(amount)**: cost to level up = `level*1000`; loop leveling up while `exp >= cost`, firing a "LEVEL UP!" toast each level; loop leveling down while `exp<0 && level>1`; cap level 100 (exp max 100,000); floor level 1 (exp min 0). Triggers: goal complete toggle → `+goal.exp` / uncomplete → `-goal.exp`; project status `pending→success` → `+1000` / `success→other` → `-1000`. Editing a goal's exp value directly never re-awards — only the completion toggle does. **Personality group** (drives colors/tooltips): lvl 100 → `prophet_muhammad`; 77–99 → `prophet`; 41/70/71/72 → `woman`; a hardcoded 36-entry "intellectuals" list → `scholar`; a hardcoded 30-entry "leaders" list → `leader`; else `devotee`. Each group has a base HSL hue/sat/light; `prophet_muhammad` is fixed white/gold/teal-glow instead; `prophet` and other groups hue-shift by a level-dependent formula so no two levels look identical. Preserve the exact group membership lists and shift formulas from the source if available — otherwise keep the same intent (six distinct thematic color families keyed by level ranges, with per-level micro-variation). **GamifiedEssence avatar**: level-scaled SVG badge — tier (1–6) by level thresholds (>80,>60,>40,>20, 100=max), more orbiting particles/complexity at higher tiers, glow intensity scales with level, multiple independent animation loops (spin cw/ccw, pulse, sparkle, float) with per-level durations and phase offsets so avatars don't animate in sync. A `animate={false}` static variant is used in list contexts. **Whatever animation mechanism you use, keep it self-contained (inline styles/keyframes) so it can't silently break if global CSS changes.** **Other helpers**: `getTimeLeft(deadline)` → `'Expired'` or `Nd Nh Nm Ns`; `calculateDaysLeft` parses target date at **local noon** to avoid timezone boundary bugs; `formatMoney` → `Rs` + thousands-formatted; `getFiscalMonths` = current month (MTD) + prior 2, summing `econo_daily_records` by date prefix; `processImageFile` downscales images to max dim 800px, JPEG quality 0.7, data-URL, wired to both file input and paste. **Scroll guard**: whenever no modal is open, force-reset scroll position on window/body/`.app-container`/`.content-wrapper`/`.main-content` so closing a modal never leaves the nav scrolled away. ## 4. Layout (12-col bento grid) Row1: Hero Banner (span 12). Row2: Profile Fields, Telemetry, Fiscal Report (span 4 each). Row3: Countdowns (span 4), Goals/Quest Log (span 8). Responsive: ≤1100px → 4/3-span become 6, 8/5-span become 12; ≤768px → all become 12. ## 5. Section behavior **Hero**: SVG progress ring (fill = exp/(level*1000)) around the avatar; editable uppercase name; prophet counter chip (`total / 10,000,000` + pulsing heart icon, opens PIN-gated Add Count modal); `LVL N` badge opens Level Hierarchy modal; current level name colored, falls back `'WANDERER'`; EXP/NEXT labels + fill bar. **Profile Fields**: PIN-locked (blurred until unlocked). Lists `profileData.fields`, hides any label containing "focused hours"/"focus hour". A field labeled "business" is **live**: value is overridden by a computed active-channel count (from `biz_sector_data.youtube.investments`, status active/running case-insensitive) and disabled in the editor; count is written back via effect. **Telemetry**: session `Dd Hh Mm` from `systemUptime` prop, total hours, start time, Today/Week/Month hours from `uptimeHistory` (missing days=0), Lowest Usage Day this month excl. today, Top-5 all-time monthly ranking with medals, current month tagged active. Plus Tasks Conquered (`todos` completed count) and Projects Shipped (`unit_projects` success/completed/done count). Click → full Analytics modal: quick stats, 7-day bar chart, all-time peak/lowest day, daily average, full monthly leaderboard. Wrap in try/catch, never crash. **Fiscal Report**: PIN-locked. 3 month rows (In=earned green/Out=spent red). Total Liabilities = sum of `econo_loans[].amount`. **Countdowns**: rows with red/blue accent (past/future), title, date, big days-left/ago number; blank when no date. Editor modal: add/remove rows, title + date inputs. **Goals/Quest Log**: header `completed/total`; search filters title OR reward; running before completed. Rows: drag-reorder (HTML5 DnD), toggle (fires gainExp), strikethrough when done, chips for EXP/reward(hide if 'No rewards')/buffs(legacy singular + array both supported)/deadline(hidden once complete), edit/delete. Add/Edit modal: title required, reward, exp (default 500), buff selector, deadline date+time (both-or-neither). **Buffs modal**: multi-select buff picker + free-text duration + free-text effect value, appends one entry per selection. **Level Hierarchy modal**: "100 RANKS" header; current-level hero with inline rename (blur/Enter save, Esc cancel); scrollable 100-row list — unlocked levels (`lvl<=level`) show mini avatar, locked show lock icon; current row highlighted + auto-scrolled into view; level 100 shows prophet chip; hover shows bio/quote tooltip when data exists. **Edit Project modal**: name(required), status select(pending/success/failure/ignored — success transitions drive gainExp), keywords, location, image(URL/upload/paste, compressed), details/tech/briefing text areas, version-timeline CRUD sorted newest-first. Saves `updatedAt`, preserves `tools/tasks/links`. Note: not currently opened from anywhere inside Persona itself (only via external `editingProject` state) — keep that indirection explicit or add an entry point. **Lightbox**: full-screen project image viewer. **Add Count modal**: PIN gate (hardcoded `0000`, auto-unlocks on match), then number input adds to `prophet_total_count` + appends a dated log entry. **PIN lock overlay**: same hardcoded PIN gates Profile Fields + Fiscal cards, blur+lock icon, per-card lock/unlock toggle. ## 6. Cross-section links (preserve) Goal complete→gainExp affects hero/level list. Project success→+1000 exp, updates UnitProjects. Business field reads Biz sector data. Fiscal reads Econo records/loans. Tasks-conquered reads Todo. Buffs shared with Todo/Education via `buffs`/`custom_buffs`. Level names feed level-up toast labels elsewhere. Keep dispatching `show-toast`, `navigate-tab`, `open-project-showcase` events. ## 7. Edge cases to keep handling Scroll guard on modal close; exp caps at level 100/1; missing/NaN uptime → 0, never crash; corrupt uptimeHistory → treated as empty; missing level bio/name → graceful fallback; empty goals/countdowns/buffs → empty states; goal without deadline → no chip, expired → "Expired" chip; countdown without date → "-"; broken image → preview hides; wrong PIN → error toast only; tab switch fully remounts (local UI state resets, persisted data survives); crash inside Persona caught by its error boundary only. ## 8. Hard constraints 1. Keep every localStorage key/shape in §2 byte-compatible. 2. Keep `gainExp` semantics identical. 3. Keep the uptime-vs-Pakistan-time split exactly as described. 4. Keep PIN `0000` everywhere or replace it consistently everywhere. 5. Keep avatar animations self-contained and reliable. 6. Keep the three CustomEvents and BuffSelector prop contract. 7. Keep the scroll-guard behavior. 8. Keep the live business-field sync. 9. Keep PIN blur-lock on Profile Fields + Fiscal cards. 10. Keep lazy mount, tab-remount, empty-state copy, and defensive guards. ## 9. Design freedom Redo layout/typography/color/spacing/motion freely — stay consistent with the app's dark glassmorphism theme (CSS vars for surface/border/accent/muted-text/radius, bento-grid conventions), stay responsive at the breakpoints in §4, keep every interaction in §5 behaviorally identical. Inline styles may become real CSS classes; if so, check for existing global attribute-selector overrides that might clash. ## 10. Known gaps you may fix (flag if touched) Edit Project modal has no in-Persona entry point; entry-animation stagger classes reference missing CSS; `updateGlobalBuff`/`removeGlobalBuff` props unused; a `persona_birth_date` field exists in app state with no UI. ## 11. Deliverable A complete rewritten `PersonaView.jsx` (+ any new CSS) implementing every feature in §5 with the exact data contract from §2–3, plus a short changelog separating visual vs. functional changes and any §10 fixes made. Don't touch `App.jsx`'s data plumbing unless necessary — call it out if you do.

A system prompt was added to support web rendering