Update CBS Mobile App codebase

STITCH_PROMPT.md

@@ -0,0 +1,312 @@
+# Stitch design-system prompt — BankCBS
+
+Paste **Part A** into Stitch to establish the design system, then prompt individual
+screens against it. Part B is a short fallback if Stitch truncates your input.
+Part C is what to send back to me.
+
+---
+
+## Part A — the system prompt (paste this)
+
+```
+You are designing the design system for BankCBS, a production mobile banking app
+built in React Native for the Indian market. Do not design individual screens yet.
+Produce the system: colour, typography, spacing, elevation, and a component
+library that screens will be assembled from.
+
+── THE PRODUCT ──────────────────────────────────────────────────────────────
+One app serving two very different audiences from the same binary:
+
+1. RETAIL CUSTOMER. Checks balances, pays people, manages cards, opens fixed and
+   recurring deposits, applies for loans and insurance. Uses the app for two
+   minutes at a time, often on a mid-range Android phone, and needs to trust it
+   with money. Tone: calm, precise, unmistakably a bank — not a fintech toy.
+
+2. FIELD COLLECTION AGENT. A bank employee visiting customers door to door in
+   daylight, one-handed, at speed, entering cash collections and opening
+   accounts. Needs density, high contrast, large tap targets, and numbers
+   readable in direct sunlight. This is a working tool, not a lifestyle app.
+
+Design one coherent system that serves both. The agent surfaces should read as
+the same family — same primary colour, same components — but denser and higher
+contrast. Show me how the system flexes between the two.
+
+── KEEP THIS ────────────────────────────────────────────────────────────────
+PRIMARY BRAND NAVY: #124577. This is locked. It is the bank's identity and must
+remain the dominant brand colour, used for primary actions, active states, and
+brand moments. Build the rest of the palette around it.
+
+── REDESIGN EVERYTHING ELSE ─────────────────────────────────────────────────
+You have full latitude, and I want you to use it, on:
+ - the accent / secondary colour (the current #10B981 green is not working)
+ - semantic colours for success, warning, danger, info
+ - the full neutral ramp (backgrounds, surfaces, borders, three text tiers)
+ - the type scale, weights and line heights
+ - the spacing scale
+ - corner radii
+ - elevation and depth
+ - how cards, rows and sections separate from one another
+
+The current app looks like an unstyled admin form: flat white cards, a weak grey
+ramp, no hierarchy, no considered depth. Fix that. It should look like a bank a
+person would trust with their salary.
+
+── HARD TECHNICAL CONSTRAINTS (React Native — not a browser) ────────────────
+This ships as React Native. Anything below is UNBUILDABLE and must not appear in
+your design. This is the most important section of this brief.
+
+DO NOT USE:
+ - Frosted glass, backdrop blur, or any blur effect. No blur library is
+   installed. Every "glassmorphism" surface must instead be a solid or
+   low-opacity flat fill.
+ - CSS grid. Layout is flexbox only.
+ - Pseudo-elements (::before / ::after) for decoration, arrows, or dividers.
+   Anything visible must be a real element.
+ - Text gradients or gradient-filled type. Text takes one flat colour.
+ - Radial, conic, or mesh gradients. LINEAR gradients only (two or three stops).
+ - Inner shadows, multiple stacked shadows, or coloured glows around elements.
+   React Native supports ONE outer shadow per element: colour, x/y offset,
+   opacity, radius on iOS; a single flat elevation value on Android. Android
+   ignores shadow colour and offset entirely — so any design that depends on a
+   soft coloured shadow will look flat on most of the user base. Design depth
+   with borders, surface-tone steps, and generous spacing instead.
+ - Border gradients, dashed borders with custom dash patterns, or per-corner
+   different border widths.
+ - CSS filters, blend modes, or opacity masks.
+ - position: sticky, and any scroll-linked parallax or scroll-driven colour
+   change.
+ - SVG masks or clip paths beyond a simple rounded rectangle.
+ - Custom checkbox/radio/switch shapes that depend on pseudo-elements.
+
+DO USE, all available:
+ - Linear gradients (react-native-linear-gradient)
+ - Inline SVG shapes and charts (react-native-svg)
+ - Spring and timing animation, gesture-driven motion (Reanimated)
+ - Haptic feedback on confirmations
+ - Native bottom sheets with snap points
+ - Native date pickers
+
+── TYPOGRAPHY — READ THIS CAREFULLY ─────────────────────────────────────────
+The ONLY font family available is Nunito, and only these four weights exist as
+real font files:
+
+    400 Regular    600 SemiBold    700 Bold    800 ExtraBold
+
+There is NO 300, NO 500, and NO 900. React Native on Android does not synthesise
+missing weights — it silently falls back and the text renders wrong. So specify
+every single text style using only 400, 600, 700 or 800. If your type scale wants
+a light or medium weight, redesign it to work within these four.
+
+Nunito is a rounded humanist sans. It is friendly, which fights slightly with
+banking authority — show me how you handle that with weight, size, tracking and
+case rather than by swapping the family.
+
+Give me a complete scale with a name, size (px), weight, line height and letter
+spacing for each role. Include at minimum: a display/balance figure, three
+headings, body, body-small, caption, an uppercase label/eyebrow, a button label,
+and a tabular numeric style for money in tables.
+
+── MONEY AND NUMBERS ────────────────────────────────────────────────────────
+This is an Indian bank. Get these right, they are not cosmetic:
+ - Currency is the rupee: ₹
+ - Indian digit grouping, NOT thousands grouping. ₹1,25,000 and ₹12,50,000 —
+   two digits, two digits, then three. Never ₹125,000.
+ - Large sums are spoken in lakh and crore. Show how you'd abbreviate: ₹1.25 L,
+   ₹2.4 Cr.
+ - Money must align on the decimal in any list or table. Specify a numeric style
+   with fixed-width digits.
+ - Show a positive (credit) and negative (debit) treatment. Do not rely on colour
+   alone — a sign or direction icon must carry it too.
+
+Other formats that appear throughout, design real slots for them:
+ - Mobile number: +91 followed by exactly 10 digits, displayed 98765 43210
+ - Account number, always masked except the last four: A/c ••••4321
+ - IFSC code: 11 characters, letters and digits, e.g. HDFC0001234
+ - MPIN: exactly 4 digits, always obscured, entered in separate boxes
+ - OTP: exactly 6 digits, entered in separate boxes
+ - Transfer rails, shown as labels the customer chooses between: IMPS (instant,
+   24x7), NEFT (batched), RTGS (high value, ₹2,00,000 minimum), and intra-bank
+ - Dates as 12 Mar 2026, never 03/12/2026 — ambiguous between conventions
+
+── COMPONENTS TO SPECIFY ────────────────────────────────────────────────────
+These already exist in the codebase and your system must define how each one
+looks. Keep the names.
+
+  Button          variants: primary, secondary, ghost, danger.
+                  Full-width and inline. With and without a leading icon.
+  Input           single-line and multi-line. Has an uppercase label above, an
+                  optional leading accessory (icon, or a "+91" prefix with a
+                  divider rule), an optional trailing accessory (validation tick,
+                  clear, reveal), and error text below.
+  CodeInput       separate boxes for MPIN (4) and OTP (6).
+  Card            the base surface everything sits on.
+  BalanceCard     the hero object: account nickname, masked number, large
+                  balance figure, a show/hide balance control, account holder.
+                  Appears in a horizontal swipe carousel with multiple accounts.
+  TransactionItem a row: direction icon, counterparty, date, amount, status.
+  AppHeader       screen title, optional back button, optional right slot.
+  ScreenShell     the page frame: background, safe area, optional scroll,
+                  optional pinned footer.
+  BottomSheet     for pickers and confirmations.
+  Modal           for blocking confirmations.
+  DatePicker      date selection.
+  Loader          full-screen busy state.
+  EmptyState      icon, title, description, optional action button.
+  Toast           transient feedback, top of screen. success / error / info.
+
+Also design these, which the app needs and does not yet have:
+  StatusPill      account, transaction, loan and card status. At least: active,
+                  pending, blocked, frozen, failed, matured, overdue.
+  SectionHeader   a titled group divider with an optional trailing action.
+  ListRow         the generic settings/menu row: leading icon, title, optional
+                  subtitle, and a trailing chevron, value, badge or switch.
+  Stepper         progress through a multi-step flow (registration is 3 steps).
+  Skeleton        loading placeholder for cards, rows and the balance figure.
+  SegmentedControl for switching between two or three views.
+  AmountInput     large, keypad-driven money entry — the centre of any payment.
+  InfoBanner      inline informational, warning and error notices.
+  Chip            selectable filter chips, single and multi-select.
+  KeyValueRow     the label/value pair used all over detail and receipt screens.
+
+── EVERY COMPONENT NEEDS EVERY STATE ────────────────────────────────────────
+A banking app spends most of its life in non-default states. For each component,
+show: default, pressed, focused, disabled, loading, error, selected, and where
+relevant empty and skeleton. Designs that only show the happy path are the single
+most common reason a handoff fails, so treat the states as the deliverable rather
+than an appendix.
+
+── LAYOUT AND PLATFORM RULES ────────────────────────────────────────────────
+ - Design for a 360–412pt wide viewport. Mid-range Android is the common case.
+ - The bottom tab bar is 90pt tall and floats above content. Any scrolling page
+   must reserve about 106pt of bottom padding so its last row is not trapped
+   behind it.
+ - The status bar is translucent and content passes under it. Any dark full-width
+   header must therefore work with light status-bar icons, and any light one with
+   dark icons — tell me which each of your surfaces requires.
+ - Primary actions live in a footer pinned above the keyboard, not at the end of
+   a long scroll.
+ - Minimum touch target 44x44pt. For agent screens, 48pt.
+ - Every screen must survive the keyboard being open over a text field.
+ - Design light theme as the primary. Note where a dark theme would need
+   different values, but do not design it fully.
+
+── ACCESSIBILITY ────────────────────────────────────────────────────────────
+ - Body text and any figure showing money must reach WCAG AA (4.5:1). State the
+   contrast ratio for each text-on-surface pairing you define.
+ - Agent screens are used in direct sunlight; hold them above 7:1.
+ - Never encode meaning in colour alone — pair it with an icon, a sign, or text.
+ - The layout must not break when the system font scales up 130%.
+
+── DO NOT MAKE IT LOOK AI-GENERATED ─────────────────────────────────────────
+Avoid, specifically: purple-to-blue gradient heroes; frosted translucent cards
+floating on blurred blobs; a single acid-green or violet accent on near-black;
+one uniform corner radius and one uniform shadow stamped on every element, which
+flattens all hierarchy; emoji as iconography; giant centred hero text on every
+screen; and cards for things that are not objects. Spend visual weight where the
+information matters — the balance, the amount being sent, the thing needing
+attention — and keep everything around it quiet.
+
+Icons come from the Ionicons set. Name the specific Ionicons you intend
+(shield-checkmark, chevron-forward, wallet-outline, swap-horizontal, and so on)
+and note where you mean the filled versus outline variant.
+
+── WHAT TO DELIVER ──────────────────────────────────────────────────────────
+1. A token table. Every colour as a hex value with a semantic name and its
+   intended use. Every spacing step, radius, and shadow as a number.
+2. The type scale as a table: name, px size, weight (400/600/700/800 only),
+   line height, letter spacing.
+3. Text-on-surface contrast ratios for every pairing.
+4. A component sheet per component above, showing all its states, annotated with
+   the tokens used — padding, radius, height, border width, text style.
+5. Two side-by-side sample compositions proving the system flexes: one calm
+   customer screen and one dense agent screen.
+6. A short list flagging anything in your design that relies on an effect the
+   constraints above rule out, and what you substituted instead.
+```
+
+---
+
+## Part B — condensed version
+
+Use this only if Stitch truncates Part A. It keeps the constraints that cause
+real rework and drops the explanation.
+
+```
+Design system for an Indian mobile banking app in React Native. Two audiences:
+retail customers (calm, trustworthy, premium) and field collection agents (dense,
+high contrast, sunlight-readable, 48pt targets). One coherent system serving both.
+
+KEEP primary brand navy #124577 as the dominant colour. REDESIGN the accent,
+semantic colours, neutral ramp, type scale, spacing, radii and elevation — the
+current design is flat and has no hierarchy.
+
+FONT: Nunito only, and only weights 400, 600, 700, 800 exist. No 300, no 500,
+no 900 — Android will not synthesise them. Every text style must use one of those
+four.
+
+UNBUILDABLE, do not use: blur or frosted glass (no blur library installed), CSS
+grid, pseudo-elements, text gradients, radial/conic gradients, inner or multiple
+or coloured shadows (React Native allows one outer shadow; Android ignores its
+colour and offset entirely), blend modes, filters, position:sticky, clip paths.
+Available: linear gradients, SVG, spring animation, haptics, bottom sheets.
+
+INDIAN FORMATS: ₹ with lakh grouping (₹1,25,000 never ₹125,000), lakh/crore
+abbreviations, +91 and 10-digit mobile shown as 98765 43210, masked accounts
+(A/c ••••4321), 11-char IFSC, 4-digit MPIN and 6-digit OTP in separate boxes,
+IMPS/NEFT/RTGS transfer rails, dates as 12 Mar 2026.
+
+COMPONENTS: Button (primary/secondary/ghost/danger), Input (uppercase label,
+leading +91 prefix or icon, trailing tick, error text), CodeInput, Card,
+BalanceCard (masked number, large balance, hide toggle, in a carousel),
+TransactionItem, AppHeader, ScreenShell, BottomSheet, Modal, Loader, EmptyState,
+Toast, StatusPill (active/pending/blocked/frozen/failed/overdue), ListRow,
+SectionHeader, Stepper, Skeleton, SegmentedControl, AmountInput, InfoBanner,
+Chip, KeyValueRow.
+
+Show EVERY component in default, pressed, disabled, loading, error, selected,
+empty and skeleton states — the states are the deliverable, not an appendix.
+
+LAYOUT: 360–412pt wide. Bottom tab bar is 90pt and floats, so reserve ~106pt
+bottom padding. Translucent status bar. Primary action pinned above the keyboard.
+44pt minimum targets, 48pt for agents. Light theme primary.
+
+Body text and money figures at WCAG AA 4.5:1, agent screens above 7:1. Never
+colour alone — pair with icon or sign. Icons from Ionicons, name them exactly.
+
+Avoid the generic AI look: no purple-blue gradient heroes, no frosted cards on
+blurred blobs, no single radius and shadow stamped on everything, no emoji icons.
+
+DELIVER: token table with hex and px values; type scale table; contrast ratios;
+a component sheet with all states annotated with tokens; one calm customer screen
+and one dense agent screen side by side; and a list of anything you had to
+substitute because of the constraints above.
+```
+
+---
+
+## Part C — what to send me back
+
+Send whichever of these you get. In rough order of usefulness:
+
+1. **The token table and type scale** — as text if possible, not only as an
+   image. These become `src/theme/tokens.ts` directly, and exact hex and px
+   values matter more than any screenshot.
+2. **Component sheet screenshots** — one per component, with the states visible.
+3. **Stitch's exported code** — paste it or save it into the repo. I'll translate
+   it to React Native; I do not need it to be RN already.
+
+When I get the code, expect me to flag some of it. Stitch emits web CSS, and the
+things it reaches for most — `backdrop-filter`, `box-shadow` with multiple
+layers or a spread radius, `background-clip: text`, `display: grid`,
+`::before` decoration — have no React Native equivalent. I'll tell you what I
+substituted rather than silently approximating it.
+
+Two things worth deciding before I wire the tokens in:
+
+- **Nunito.** The prompt holds you to it because it is what ships in the repo. If
+  Stitch proposes a type treatment that genuinely needs a different family, say
+  so and I'll add the font files — it is a small change and better made once than
+  worked around.
+- **The 90pt floating tab bar** is currently hard-coded in both navigators. If
+  Stitch designs a different navigation shape, that is a real but contained
+  change to `MainTabNavigator`, `AgentNavigator` and `layoutConstants.ts`.