From 145ab0cf7ce81b460b419e92ef1e310c5352e612 Mon Sep 17 00:00:00 2001 From: Rajan Maurya Date: Wed, 7 Jan 2026 15:34:34 +0530 Subject: [PATCH] chore: remove claude-product-cycle directory (#3061) --- .claude/commands/project-add.md | 207 ++ .claude/commands/project-list.md | 48 + .claude/commands/project-set.md | 67 + CLAUDE.md | 10 +- claude-product-cycle/CLAUDE_PRODUCT_CYCLE.md | 611 ----- claude-product-cycle/COMMANDS.md | 135 -- claude-product-cycle/CURRENT_WORK.md | 211 -- claude-product-cycle/MIGRATION_PLAN.md | 560 ----- claude-product-cycle/PRODUCT_MAP.md | 354 --- claude-product-cycle/TEST_STUBS_GUIDE.md | 535 ----- .../client-layer/FEATURE_MAP.md | 169 -- .../client-layer/LAYER_GUIDE.md | 174 -- .../client-layer/LAYER_STATUS.md | 171 -- .../client-layer/TESTING_STATUS.md | 192 -- claude-product-cycle/commands-layer/README.md | 56 - claude-product-cycle/commands-layer/client.md | 156 -- claude-product-cycle/commands-layer/design.md | 293 --- .../commands-layer/feature.md | 254 -- .../commands-layer/implement.md | 237 -- claude-product-cycle/commands-layer/mockup.md | 409 ---- .../commands-layer/projectstatus.md | 115 - claude-product-cycle/commands-layer/verify.md | 169 -- claude-product-cycle/core-layer/COMPONENTS.md | 352 --- .../design-spec-layer/DESIGN_TOKENS_INDEX.md | 283 --- .../design-spec-layer/FEATURES_INDEX.md | 116 - .../design-spec-layer/MOCKUPS_INDEX.md | 152 -- .../design-spec-layer/STATUS.md | 232 -- .../design-spec-layer/TESTING_STATUS.md | 125 - .../design-spec-layer/TOOL_CONFIG.md | 190 -- .../_shared/API_REFERENCE.md | 212 -- .../design-spec-layer/_shared/COMPONENTS.md | 825 ------- .../design-spec-layer/_shared/PATTERNS.md | 427 ---- .../features/MOCKUPS_README.md | 139 -- .../features/accounts/API.md | 799 ------ .../features/accounts/MOCKUP.md | 1582 ------------ .../features/accounts/SPEC.md | 543 ----- .../features/accounts/STATUS.md | 122 - .../accounts/mockups/PROMPTS_FIGMA.md | 254 -- .../accounts/mockups/PROMPTS_STITCH.md | 354 --- .../mockups/dummy/01-accounts-overview.png | Bin 68 -> 0 bytes .../mockups/dummy/02-account-card.png | Bin 68 -> 0 bytes .../mockups/dummy/03-accounts-empty-state.png | Bin 68 -> 0 bytes .../mockups/dummy/04-account-type-filter.png | Bin 68 -> 0 bytes .../design-spec-layer/features/auth/API.md | 169 -- .../design-spec-layer/features/auth/MOCKUP.md | 1063 -------- .../design-spec-layer/features/auth/SPEC.md | 255 -- .../design-spec-layer/features/auth/STATUS.md | 114 - .../features/auth/mockups/FIGMA_LINKS.md | 76 - .../features/auth/mockups/PROMPTS.md | 404 ---- .../features/auth/mockups/PROMPTS_FIGMA.md | 206 -- .../features/auth/mockups/PROMPTS_STITCH.md | 266 -- .../features/auth/mockups/design-tokens.json | 286 --- .../auth/mockups/dummy/01-login-screen.png | Bin 68 -> 0 bytes .../mockups/dummy/02-registration-screen.png | Bin 68 -> 0 bytes .../auth/mockups/dummy/03-forgot-password.png | Bin 68 -> 0 bytes .../mockups/dummy/04-verification-code.png | Bin 68 -> 0 bytes .../auth/mockups/dummy/05-reset-password.png | Bin 68 -> 0 bytes .../mockups/dummy/06-biometric-prompt.png | Bin 68 -> 0 bytes .../features/beneficiary/API.md | 585 ----- .../features/beneficiary/MOCKUP.md | 1569 ------------ .../features/beneficiary/SPEC.md | 647 ----- .../features/beneficiary/STATUS.md | 68 - .../beneficiary/mockups/PROMPTS_FIGMA.md | 349 --- .../beneficiary/mockups/PROMPTS_STITCH.md | 495 ---- .../mockups/dummy/01-beneficiary-list.png | Bin 68 -> 0 bytes .../mockups/dummy/02-beneficiary-detail.png | Bin 68 -> 0 bytes .../mockups/dummy/03-add-beneficiary.png | Bin 68 -> 0 bytes .../mockups/dummy/04-edit-beneficiary.png | Bin 68 -> 0 bytes .../mockups/dummy/05-beneficiary-empty.png | Bin 68 -> 0 bytes .../mockups/dummy/06-beneficiary-success.png | Bin 68 -> 0 bytes .../features/client-charge/API.md | 579 ----- .../features/client-charge/MOCKUP.md | 1525 ------------ .../features/client-charge/SPEC.md | 395 --- .../features/client-charge/STATUS.md | 85 - .../client-charge/mockups/FIGMA_LINKS.md | 69 - .../features/client-charge/mockups/PROMPTS.md | 549 ----- .../client-charge/mockups/design-tokens.json | 283 --- .../mockups/dummy/01-smart-dashboard.png | Bin 68 -> 0 bytes .../mockups/dummy/02-calendar-view.png | Bin 68 -> 0 bytes .../mockups/dummy/03-charge-detail.png | Bin 68 -> 0 bytes .../mockups/dummy/04-autopay-setup-step1.png | Bin 68 -> 0 bytes .../mockups/dummy/05-autopay-setup-step2.png | Bin 68 -> 0 bytes .../mockups/dummy/06-autopay-setup-step3.png | Bin 68 -> 0 bytes .../mockups/dummy/07-split-payment.png | Bin 68 -> 0 bytes .../mockups/dummy/08-payment-success.png | Bin 68 -> 0 bytes .../mockups/dummy/09-charge-insights.png | Bin 68 -> 0 bytes .../features/dashboard/API.md | 936 -------- .../features/dashboard/MOCKUP.md | 1738 -------------- .../features/dashboard/SPEC.md | 485 ---- .../features/dashboard/STATUS.md | 140 -- .../features/dashboard/mockups/PROMPTS.md | 461 ---- .../dashboard/mockups/PROMPTS_FIGMA.md | 309 --- .../dashboard/mockups/PROMPTS_STITCH.md | 376 --- .../dashboard/mockups/design-tokens.json | 294 --- .../mockups/dummy/01-main-dashboard.png | Bin 68 -> 0 bytes .../mockups/dummy/02-financial-overview.png | Bin 68 -> 0 bytes .../mockups/dummy/03-quick-actions-grid.png | Bin 68 -> 0 bytes .../mockups/dummy/04-insights-card.png | Bin 68 -> 0 bytes .../mockups/dummy/05-goals-tracker.png | Bin 68 -> 0 bytes .../mockups/dummy/06-spending-chart.png | Bin 68 -> 0 bytes .../mockups/dummy/07-dashboard-empty.png | Bin 68 -> 0 bytes .../features/guarantor/API.md | 388 --- .../features/guarantor/MOCKUP.md | 1736 ------------- .../features/guarantor/SPEC.md | 337 --- .../features/guarantor/STATUS.md | 74 - .../features/guarantor/mockups/FIGMA_LINKS.md | 62 - .../features/guarantor/mockups/PROMPTS.md | 430 ---- .../guarantor/mockups/design-tokens.json | 201 -- .../mockups/dummy/01-trust-network-hub.png | Bin 68 -> 0 bytes .../mockups/dummy/02-network-graph-view.png | Bin 68 -> 0 bytes .../mockups/dummy/03-ai-suggestions.png | Bin 68 -> 0 bytes .../mockups/dummy/04-guarantor-detail.png | Bin 68 -> 0 bytes .../mockups/dummy/05-add-guarantor-type.png | Bin 68 -> 0 bytes .../dummy/06-add-guarantor-details.png | Bin 68 -> 0 bytes .../mockups/dummy/07-add-guarantor-amount.png | Bin 68 -> 0 bytes .../mockups/dummy/08-invite-success.png | Bin 68 -> 0 bytes .../design-spec-layer/features/home/API.md | 165 -- .../design-spec-layer/features/home/MOCKUP.md | 1024 -------- .../design-spec-layer/features/home/SPEC.md | 173 -- .../design-spec-layer/features/home/STATUS.md | 63 - .../features/home/mockups/PROMPTS_FIGMA.md | 204 -- .../features/home/mockups/PROMPTS_STITCH.md | 253 -- .../home/mockups/dummy/01-home-dashboard.png | Bin 68 -> 0 bytes .../dummy/02-account-overview-card.png | Bin 68 -> 0 bytes .../home/mockups/dummy/03-quick-actions.png | Bin 68 -> 0 bytes .../mockups/dummy/04-recent-transactions.png | Bin 68 -> 0 bytes .../mockups/dummy/05-home-empty-state.png | Bin 68 -> 0 bytes .../features/loan-account/API.md | 767 ------ .../features/loan-account/MOCKUP.md | 2138 ----------------- .../features/loan-account/SPEC.md | 484 ---- .../features/loan-account/STATUS.md | 74 - .../loan-account/mockups/PROMPTS_FIGMA.md | 377 --- .../loan-account/mockups/PROMPTS_STITCH.md | 688 ------ .../mockups/dummy/01-loan-detail.png | Bin 68 -> 0 bytes .../dummy/02-loan-repayment-schedule.png | Bin 68 -> 0 bytes .../mockups/dummy/03-loan-transactions.png | Bin 68 -> 0 bytes .../mockups/dummy/04-loan-statement.png | Bin 68 -> 0 bytes .../mockups/dummy/05-make-repayment.png | Bin 68 -> 0 bytes .../mockups/dummy/06-loan-calculator.png | Bin 68 -> 0 bytes .../mockups/dummy/07-loan-empty.png | Bin 68 -> 0 bytes .../features/location/API.md | 150 -- .../features/location/MOCKUP.md | 2007 ---------------- .../features/location/SPEC.md | 154 -- .../features/location/STATUS.md | 57 - .../features/location/mockups/FIGMA_LINKS.md | 65 - .../features/location/mockups/PROMPTS.md | 476 ---- .../location/mockups/design-tokens.json | 270 --- .../mockups/dummy/01-branch-finder-map.png | Bin 68 -> 0 bytes .../mockups/dummy/02-branch-list-view.png | Bin 68 -> 0 bytes .../mockups/dummy/03-branch-detail.png | Bin 68 -> 0 bytes .../dummy/04-book-appointment-service.png | Bin 68 -> 0 bytes .../dummy/05-book-appointment-datetime.png | Bin 68 -> 0 bytes .../dummy/06-book-appointment-confirm.png | Bin 68 -> 0 bytes .../mockups/dummy/07-appointment-success.png | Bin 68 -> 0 bytes .../mockups/dummy/08-ar-branch-finder.png | Bin 68 -> 0 bytes .../features/notification/API.md | 308 --- .../features/notification/MOCKUP.md | 1824 -------------- .../features/notification/SPEC.md | 288 --- .../features/notification/STATUS.md | 61 - .../notification/mockups/PROMPTS_FIGMA.md | 338 --- .../notification/mockups/PROMPTS_STITCH.md | 563 ----- .../mockups/dummy/01-notification-center.png | Bin 68 -> 0 bytes .../mockups/dummy/02-notification-detail.png | Bin 68 -> 0 bytes .../dummy/03-notification-settings.png | Bin 68 -> 0 bytes .../mockups/dummy/04-notification-empty.png | Bin 68 -> 0 bytes .../mockups/dummy/05-push-permission.png | Bin 68 -> 0 bytes .../features/passcode/API.md | 216 -- .../features/passcode/MOCKUP.md | 2002 --------------- .../features/passcode/SPEC.md | 448 ---- .../features/passcode/STATUS.md | 62 - .../features/passcode/mockups/FIGMA_LINKS.md | 61 - .../features/passcode/mockups/PROMPTS.md | 431 ---- .../passcode/mockups/design-tokens.json | 241 -- .../mockups/dummy/01-biometric-entry.png | Bin 68 -> 0 bytes .../mockups/dummy/02-passcode-entry.png | Bin 68 -> 0 bytes .../mockups/dummy/03-create-passcode.png | Bin 68 -> 0 bytes .../mockups/dummy/04-confirm-passcode.png | Bin 68 -> 0 bytes .../mockups/dummy/05-change-passcode.png | Bin 68 -> 0 bytes .../mockups/dummy/06-passcode-success.png | Bin 68 -> 0 bytes .../mockups/dummy/07-passcode-locked.png | Bin 68 -> 0 bytes .../design-spec-layer/features/qr/API.md | 400 --- .../design-spec-layer/features/qr/MOCKUP.md | 1617 ------------- .../design-spec-layer/features/qr/SPEC.md | 474 ---- .../design-spec-layer/features/qr/STATUS.md | 113 - .../features/qr/mockups/FIGMA_LINKS.md | 61 - .../features/qr/mockups/PROMPTS.md | 465 ---- .../features/qr/mockups/design-tokens.json | 226 -- .../mockups/dummy/01-smart-pay-hub-scan.png | Bin 68 -> 0 bytes .../qr/mockups/dummy/02-my-qr-code.png | Bin 68 -> 0 bytes .../qr/mockups/dummy/03-request-money.png | Bin 68 -> 0 bytes .../qr/mockups/dummy/04-scan-success.png | Bin 68 -> 0 bytes .../qr/mockups/dummy/05-dynamic-qr-timer.png | Bin 68 -> 0 bytes .../qr/mockups/dummy/06-payment-success.png | Bin 68 -> 0 bytes .../qr/mockups/dummy/07-qr-history.png | Bin 68 -> 0 bytes .../features/recent-transaction/API.md | 428 ---- .../features/recent-transaction/MOCKUP.md | 1499 ------------ .../features/recent-transaction/SPEC.md | 247 -- .../features/recent-transaction/STATUS.md | 60 - .../mockups/PROMPTS_FIGMA.md | 314 --- .../mockups/PROMPTS_STITCH.md | 470 ---- .../mockups/dummy/01-transaction-list.png | Bin 68 -> 0 bytes .../mockups/dummy/02-transaction-detail.png | Bin 68 -> 0 bytes .../mockups/dummy/03-transaction-filter.png | Bin 68 -> 0 bytes .../mockups/dummy/04-transaction-search.png | Bin 68 -> 0 bytes .../mockups/dummy/05-transaction-export.png | Bin 68 -> 0 bytes .../mockups/dummy/06-transaction-empty.png | Bin 68 -> 0 bytes .../features/savings-account/API.md | 676 ------ .../features/savings-account/MOCKUP.md | 1509 ------------ .../features/savings-account/SPEC.md | 494 ---- .../features/savings-account/STATUS.md | 72 - .../savings-account/mockups/PROMPTS_FIGMA.md | 330 --- .../savings-account/mockups/PROMPTS_STITCH.md | 537 ----- .../mockups/dummy/01-savings-detail.png | Bin 68 -> 0 bytes .../mockups/dummy/02-savings-transactions.png | Bin 68 -> 0 bytes .../mockups/dummy/03-savings-statement.png | Bin 68 -> 0 bytes .../mockups/dummy/04-savings-qr-code.png | Bin 68 -> 0 bytes .../mockups/dummy/05-make-transfer.png | Bin 68 -> 0 bytes .../mockups/dummy/06-savings-empty.png | Bin 68 -> 0 bytes .../features/settings/API.md | 263 -- .../features/settings/MOCKUP.md | 1444 ----------- .../features/settings/SPEC.md | 717 ------ .../features/settings/STATUS.md | 103 - .../features/settings/mockups/FIGMA_LINKS.md | 62 - .../features/settings/mockups/PROMPTS.md | 367 --- .../settings/mockups/design-tokens.json | 184 -- .../mockups/dummy/01-command-center-hub.png | Bin 68 -> 0 bytes .../mockups/dummy/02-profile-dashboard.png | Bin 68 -> 0 bytes .../mockups/dummy/03-security-center.png | Bin 68 -> 0 bytes .../mockups/dummy/04-appearance-settings.png | Bin 68 -> 0 bytes .../mockups/dummy/05-privacy-data.png | Bin 68 -> 0 bytes .../mockups/dummy/06-notifications-hub.png | Bin 68 -> 0 bytes .../mockups/dummy/07-connected-services.png | Bin 68 -> 0 bytes .../mockups/dummy/08-help-support.png | Bin 68 -> 0 bytes .../settings/mockups/dummy/09-about.png | Bin 68 -> 0 bytes .../features/share-account/API.md | 745 ------ .../features/share-account/MOCKUP.md | 1772 -------------- .../features/share-account/SPEC.md | 445 ---- .../features/share-account/STATUS.md | 66 - .../share-account/mockups/PROMPTS_FIGMA.md | 401 ---- .../share-account/mockups/PROMPTS_STITCH.md | 608 ----- .../mockups/dummy/01-share-detail.png | Bin 68 -> 0 bytes .../mockups/dummy/02-share-dividends.png | Bin 68 -> 0 bytes .../mockups/dummy/03-share-transactions.png | Bin 68 -> 0 bytes .../mockups/dummy/04-share-statement.png | Bin 68 -> 0 bytes .../mockups/dummy/05-purchase-shares.png | Bin 68 -> 0 bytes .../mockups/dummy/06-redeem-shares.png | Bin 68 -> 0 bytes .../features/transfer/API.md | 535 ----- .../features/transfer/MOCKUP.md | 1327 ---------- .../features/transfer/SPEC.md | 534 ---- .../features/transfer/STATUS.md | 72 - .../transfer/mockups/PROMPTS_FIGMA.md | 331 --- .../transfer/mockups/PROMPTS_STITCH.md | 482 ---- .../mockups/dummy/01-transfer-hub.png | Bin 68 -> 0 bytes .../mockups/dummy/02-select-account.png | Bin 68 -> 0 bytes .../mockups/dummy/03-enter-amount.png | Bin 68 -> 0 bytes .../mockups/dummy/04-transfer-review.png | Bin 68 -> 0 bytes .../mockups/dummy/05-transfer-success.png | Bin 68 -> 0 bytes .../mockups/dummy/06-transfer-history.png | Bin 68 -> 0 bytes .../mockup-tools/LAYER_STATUS.md | 170 -- .../design-spec-layer/mockup-tools/README.md | 176 -- .../mockup-tools/figma-plugin/manifest.json | 50 - .../mockup-tools/figma-plugin/package.json | 25 - .../figma-plugin/src/design-system/index.ts | 5 - .../figma-plugin/src/design-system/tokens.ts | 310 --- .../src/generators/components/bottom-nav.ts | 260 -- .../src/generators/components/button.ts | 273 --- .../src/generators/components/card.ts | 295 --- .../src/generators/components/input-field.ts | 303 --- .../src/generators/components/list-item.ts | 305 --- .../generators/components/quick-actions.ts | 251 -- .../src/generators/components/screen.ts | 121 - .../src/generators/components/top-bar.ts | 187 -- .../figma-plugin/src/generators/index.ts | 17 - .../mockup-tools/figma-plugin/src/plugin.ts | 726 ------ .../figma-plugin/src/utils/helpers.ts | 322 --- .../mockup-tools/figma-plugin/tsconfig.json | 23 - .../mockup-tools/templates/ai-prompt.md | 205 -- .../feature-layer/LAYER_GUIDE.md | 422 ---- .../feature-layer/LAYER_STATUS.md | 300 --- .../feature-layer/MODULES_INDEX.md | 113 - .../feature-layer/SCREENS_INDEX.md | 266 -- .../feature-layer/TESTING_STATUS.md | 323 --- .../feature-layer/instructions/COMPOSE.md | 746 ------ .../feature-layer/instructions/DI.md | 282 --- .../feature-layer/instructions/NAVIGATION.md | 438 ---- .../instructions/UPDATING_FEATURE.md | 309 --- .../feature-layer/instructions/VIEWMODEL.md | 495 ---- claude-product-cycle/plans/PLANS_INDEX.md | 116 - .../platform-layer/LAYER_GUIDE.md | 195 -- .../platform-layer/LAYER_STATUS.md | 102 - .../platform-layer/TESTING_STATUS.md | 279 --- .../platform-layer/platforms/ANDROID.md | 109 - .../platform-layer/platforms/DESKTOP.md | 109 - .../platform-layer/platforms/IOS.md | 134 -- .../platform-layer/platforms/WEB.md | 135 -- .../server-layer/API_INDEX.md | 551 ----- .../server-layer/API_REFERENCE.md | 865 ------- .../server-layer/CLIENT_PATTERNS.md | 517 ---- .../server-layer/ERROR_HANDLING.md | 415 ---- .../server-layer/TESTING_STATUS.md | 156 -- .../server-layer/endpoints/AUTH.md | 109 - .../server-layer/endpoints/BENEFICIARY.md | 164 -- .../server-layer/endpoints/CHARGES.md | 140 -- .../server-layer/endpoints/CLIENT.md | 108 - .../server-layer/endpoints/GUARANTOR.md | 131 - .../server-layer/endpoints/LOAN.md | 160 -- .../server-layer/endpoints/NOTIFICATION.md | 90 - .../server-layer/endpoints/SAVINGS.md | 198 -- .../server-layer/endpoints/SHARE.md | 115 - .../server-layer/endpoints/TRANSFER.md | 122 - .../server-layer/endpoints/USER.md | 52 - .../templates/gap-analysis/dashboard.md | 235 -- .../templates/gap-analysis/feature-detail.md | 89 - .../templates/gap-analysis/layer-client.md | 50 - .../templates/gap-analysis/layer-design.md | 76 - .../templates/gap-analysis/layer-feature.md | 55 - .../templates/gap-analysis/layer-platform.md | 60 - .../templates/gap-analysis/layer-server.md | 55 - .../gap-analysis/subsection/client-data.md | 45 - .../gap-analysis/subsection/client-network.md | 45 - .../gap-analysis/subsection/design-mockup.md | 176 -- .../gap-analysis/subsection/design-spec.md | 58 - .../gap-analysis/subsection/feature-single.md | 58 - .../subsection/platform-android.md | 53 - .../subsection/platform-desktop.md | 52 - .../gap-analysis/subsection/platform-ios.md | 59 - .../gap-analysis/subsection/platform-web.md | 62 - .../templates/gap-planning/dashboard.md | 85 - .../templates/gap-planning/feature-new.md | 168 -- .../templates/gap-planning/feature-v2.md | 73 - .../templates/gap-planning/layer-client.md | 131 - .../templates/gap-planning/layer-design.md | 165 -- .../templates/gap-planning/layer-feature.md | 123 - .../templates/gap-planning/layer-platform.md | 148 -- .../templates/gap-planning/layer-server.md | 107 - .../gap-planning/subsection/client-data.md | 127 - .../gap-planning/subsection/client-network.md | 102 - .../gap-planning/subsection/design-mockup.md | 218 -- .../gap-planning/subsection/design-spec.md | 106 - .../gap-planning/subsection/feature-single.md | 102 - .../subsection/platform-android.md | 64 - .../subsection/platform-desktop.md | 61 - .../gap-planning/subsection/platform-ios.md | 61 - .../gap-planning/subsection/platform-web.md | 61 - .../templates/gap-planning/task-template.md | 43 - .../testing-layer/FAKE_REPOS_INDEX.md | 511 ---- .../testing-layer/LAYER_STATUS.md | 194 -- .../testing-layer/TEST_FIXTURES_INDEX.md | 401 ---- .../testing-layer/TEST_PATTERNS.md | 390 --- .../testing-layer/TEST_TAGS_INDEX.md | 435 ---- .../testing-layer/patterns/fake-repository.md | 467 ---- .../patterns/integration-test.md | 526 ---- .../testing-layer/patterns/screen-test.md | 529 ---- .../testing-layer/patterns/screenshot-test.md | 503 ---- .../testing-layer/patterns/viewmodel-test.md | 366 --- .../templates/FakeRepository.kt.template | 270 --- .../templates/ScreenTest.kt.template | 286 --- .../templates/TestTags.kt.template | 166 -- .../templates/ViewModelTest.kt.template | 199 -- 359 files changed, 326 insertions(+), 87606 deletions(-) create mode 100644 .claude/commands/project-add.md create mode 100644 .claude/commands/project-list.md create mode 100644 .claude/commands/project-set.md delete mode 100644 claude-product-cycle/CLAUDE_PRODUCT_CYCLE.md delete mode 100644 claude-product-cycle/COMMANDS.md delete mode 100644 claude-product-cycle/CURRENT_WORK.md delete mode 100644 claude-product-cycle/MIGRATION_PLAN.md delete mode 100644 claude-product-cycle/PRODUCT_MAP.md delete mode 100644 claude-product-cycle/TEST_STUBS_GUIDE.md delete mode 100644 claude-product-cycle/client-layer/FEATURE_MAP.md delete mode 100644 claude-product-cycle/client-layer/LAYER_GUIDE.md delete mode 100644 claude-product-cycle/client-layer/LAYER_STATUS.md delete mode 100644 claude-product-cycle/client-layer/TESTING_STATUS.md delete mode 100644 claude-product-cycle/commands-layer/README.md delete mode 100644 claude-product-cycle/commands-layer/client.md delete mode 100644 claude-product-cycle/commands-layer/design.md delete mode 100644 claude-product-cycle/commands-layer/feature.md delete mode 100644 claude-product-cycle/commands-layer/implement.md delete mode 100644 claude-product-cycle/commands-layer/mockup.md delete mode 100644 claude-product-cycle/commands-layer/projectstatus.md delete mode 100644 claude-product-cycle/commands-layer/verify.md delete mode 100644 claude-product-cycle/core-layer/COMPONENTS.md delete mode 100644 claude-product-cycle/design-spec-layer/DESIGN_TOKENS_INDEX.md delete mode 100644 claude-product-cycle/design-spec-layer/FEATURES_INDEX.md delete mode 100644 claude-product-cycle/design-spec-layer/MOCKUPS_INDEX.md delete mode 100644 claude-product-cycle/design-spec-layer/STATUS.md delete mode 100644 claude-product-cycle/design-spec-layer/TESTING_STATUS.md delete mode 100644 claude-product-cycle/design-spec-layer/TOOL_CONFIG.md delete mode 100644 claude-product-cycle/design-spec-layer/_shared/API_REFERENCE.md delete mode 100644 claude-product-cycle/design-spec-layer/_shared/COMPONENTS.md delete mode 100644 claude-product-cycle/design-spec-layer/_shared/PATTERNS.md delete mode 100644 claude-product-cycle/design-spec-layer/features/MOCKUPS_README.md delete mode 100644 claude-product-cycle/design-spec-layer/features/accounts/API.md delete mode 100644 claude-product-cycle/design-spec-layer/features/accounts/MOCKUP.md delete mode 100644 claude-product-cycle/design-spec-layer/features/accounts/SPEC.md delete mode 100644 claude-product-cycle/design-spec-layer/features/accounts/STATUS.md delete mode 100644 claude-product-cycle/design-spec-layer/features/accounts/mockups/PROMPTS_FIGMA.md delete mode 100644 claude-product-cycle/design-spec-layer/features/accounts/mockups/PROMPTS_STITCH.md delete mode 100644 claude-product-cycle/design-spec-layer/features/accounts/mockups/dummy/01-accounts-overview.png delete mode 100644 claude-product-cycle/design-spec-layer/features/accounts/mockups/dummy/02-account-card.png delete mode 100644 claude-product-cycle/design-spec-layer/features/accounts/mockups/dummy/03-accounts-empty-state.png delete mode 100644 claude-product-cycle/design-spec-layer/features/accounts/mockups/dummy/04-account-type-filter.png delete mode 100644 claude-product-cycle/design-spec-layer/features/auth/API.md delete mode 100644 claude-product-cycle/design-spec-layer/features/auth/MOCKUP.md delete mode 100644 claude-product-cycle/design-spec-layer/features/auth/SPEC.md delete mode 100644 claude-product-cycle/design-spec-layer/features/auth/STATUS.md delete mode 100644 claude-product-cycle/design-spec-layer/features/auth/mockups/FIGMA_LINKS.md delete mode 100644 claude-product-cycle/design-spec-layer/features/auth/mockups/PROMPTS.md delete mode 100644 claude-product-cycle/design-spec-layer/features/auth/mockups/PROMPTS_FIGMA.md delete mode 100644 claude-product-cycle/design-spec-layer/features/auth/mockups/PROMPTS_STITCH.md delete mode 100644 claude-product-cycle/design-spec-layer/features/auth/mockups/design-tokens.json delete mode 100644 claude-product-cycle/design-spec-layer/features/auth/mockups/dummy/01-login-screen.png delete mode 100644 claude-product-cycle/design-spec-layer/features/auth/mockups/dummy/02-registration-screen.png delete mode 100644 claude-product-cycle/design-spec-layer/features/auth/mockups/dummy/03-forgot-password.png delete mode 100644 claude-product-cycle/design-spec-layer/features/auth/mockups/dummy/04-verification-code.png delete mode 100644 claude-product-cycle/design-spec-layer/features/auth/mockups/dummy/05-reset-password.png delete mode 100644 claude-product-cycle/design-spec-layer/features/auth/mockups/dummy/06-biometric-prompt.png delete mode 100644 claude-product-cycle/design-spec-layer/features/beneficiary/API.md delete mode 100644 claude-product-cycle/design-spec-layer/features/beneficiary/MOCKUP.md delete mode 100644 claude-product-cycle/design-spec-layer/features/beneficiary/SPEC.md delete mode 100644 claude-product-cycle/design-spec-layer/features/beneficiary/STATUS.md delete mode 100644 claude-product-cycle/design-spec-layer/features/beneficiary/mockups/PROMPTS_FIGMA.md delete mode 100644 claude-product-cycle/design-spec-layer/features/beneficiary/mockups/PROMPTS_STITCH.md delete mode 100644 claude-product-cycle/design-spec-layer/features/beneficiary/mockups/dummy/01-beneficiary-list.png delete mode 100644 claude-product-cycle/design-spec-layer/features/beneficiary/mockups/dummy/02-beneficiary-detail.png delete mode 100644 claude-product-cycle/design-spec-layer/features/beneficiary/mockups/dummy/03-add-beneficiary.png delete mode 100644 claude-product-cycle/design-spec-layer/features/beneficiary/mockups/dummy/04-edit-beneficiary.png delete mode 100644 claude-product-cycle/design-spec-layer/features/beneficiary/mockups/dummy/05-beneficiary-empty.png delete mode 100644 claude-product-cycle/design-spec-layer/features/beneficiary/mockups/dummy/06-beneficiary-success.png delete mode 100644 claude-product-cycle/design-spec-layer/features/client-charge/API.md delete mode 100644 claude-product-cycle/design-spec-layer/features/client-charge/MOCKUP.md delete mode 100644 claude-product-cycle/design-spec-layer/features/client-charge/SPEC.md delete mode 100644 claude-product-cycle/design-spec-layer/features/client-charge/STATUS.md delete mode 100644 claude-product-cycle/design-spec-layer/features/client-charge/mockups/FIGMA_LINKS.md delete mode 100644 claude-product-cycle/design-spec-layer/features/client-charge/mockups/PROMPTS.md delete mode 100644 claude-product-cycle/design-spec-layer/features/client-charge/mockups/design-tokens.json delete mode 100644 claude-product-cycle/design-spec-layer/features/client-charge/mockups/dummy/01-smart-dashboard.png delete mode 100644 claude-product-cycle/design-spec-layer/features/client-charge/mockups/dummy/02-calendar-view.png delete mode 100644 claude-product-cycle/design-spec-layer/features/client-charge/mockups/dummy/03-charge-detail.png delete mode 100644 claude-product-cycle/design-spec-layer/features/client-charge/mockups/dummy/04-autopay-setup-step1.png delete mode 100644 claude-product-cycle/design-spec-layer/features/client-charge/mockups/dummy/05-autopay-setup-step2.png delete mode 100644 claude-product-cycle/design-spec-layer/features/client-charge/mockups/dummy/06-autopay-setup-step3.png delete mode 100644 claude-product-cycle/design-spec-layer/features/client-charge/mockups/dummy/07-split-payment.png delete mode 100644 claude-product-cycle/design-spec-layer/features/client-charge/mockups/dummy/08-payment-success.png delete mode 100644 claude-product-cycle/design-spec-layer/features/client-charge/mockups/dummy/09-charge-insights.png delete mode 100644 claude-product-cycle/design-spec-layer/features/dashboard/API.md delete mode 100644 claude-product-cycle/design-spec-layer/features/dashboard/MOCKUP.md delete mode 100644 claude-product-cycle/design-spec-layer/features/dashboard/SPEC.md delete mode 100644 claude-product-cycle/design-spec-layer/features/dashboard/STATUS.md delete mode 100644 claude-product-cycle/design-spec-layer/features/dashboard/mockups/PROMPTS.md delete mode 100644 claude-product-cycle/design-spec-layer/features/dashboard/mockups/PROMPTS_FIGMA.md delete mode 100644 claude-product-cycle/design-spec-layer/features/dashboard/mockups/PROMPTS_STITCH.md delete mode 100644 claude-product-cycle/design-spec-layer/features/dashboard/mockups/design-tokens.json delete mode 100644 claude-product-cycle/design-spec-layer/features/dashboard/mockups/dummy/01-main-dashboard.png delete mode 100644 claude-product-cycle/design-spec-layer/features/dashboard/mockups/dummy/02-financial-overview.png delete mode 100644 claude-product-cycle/design-spec-layer/features/dashboard/mockups/dummy/03-quick-actions-grid.png delete mode 100644 claude-product-cycle/design-spec-layer/features/dashboard/mockups/dummy/04-insights-card.png delete mode 100644 claude-product-cycle/design-spec-layer/features/dashboard/mockups/dummy/05-goals-tracker.png delete mode 100644 claude-product-cycle/design-spec-layer/features/dashboard/mockups/dummy/06-spending-chart.png delete mode 100644 claude-product-cycle/design-spec-layer/features/dashboard/mockups/dummy/07-dashboard-empty.png delete mode 100644 claude-product-cycle/design-spec-layer/features/guarantor/API.md delete mode 100644 claude-product-cycle/design-spec-layer/features/guarantor/MOCKUP.md delete mode 100644 claude-product-cycle/design-spec-layer/features/guarantor/SPEC.md delete mode 100644 claude-product-cycle/design-spec-layer/features/guarantor/STATUS.md delete mode 100644 claude-product-cycle/design-spec-layer/features/guarantor/mockups/FIGMA_LINKS.md delete mode 100644 claude-product-cycle/design-spec-layer/features/guarantor/mockups/PROMPTS.md delete mode 100644 claude-product-cycle/design-spec-layer/features/guarantor/mockups/design-tokens.json delete mode 100644 claude-product-cycle/design-spec-layer/features/guarantor/mockups/dummy/01-trust-network-hub.png delete mode 100644 claude-product-cycle/design-spec-layer/features/guarantor/mockups/dummy/02-network-graph-view.png delete mode 100644 claude-product-cycle/design-spec-layer/features/guarantor/mockups/dummy/03-ai-suggestions.png delete mode 100644 claude-product-cycle/design-spec-layer/features/guarantor/mockups/dummy/04-guarantor-detail.png delete mode 100644 claude-product-cycle/design-spec-layer/features/guarantor/mockups/dummy/05-add-guarantor-type.png delete mode 100644 claude-product-cycle/design-spec-layer/features/guarantor/mockups/dummy/06-add-guarantor-details.png delete mode 100644 claude-product-cycle/design-spec-layer/features/guarantor/mockups/dummy/07-add-guarantor-amount.png delete mode 100644 claude-product-cycle/design-spec-layer/features/guarantor/mockups/dummy/08-invite-success.png delete mode 100644 claude-product-cycle/design-spec-layer/features/home/API.md delete mode 100644 claude-product-cycle/design-spec-layer/features/home/MOCKUP.md delete mode 100644 claude-product-cycle/design-spec-layer/features/home/SPEC.md delete mode 100644 claude-product-cycle/design-spec-layer/features/home/STATUS.md delete mode 100644 claude-product-cycle/design-spec-layer/features/home/mockups/PROMPTS_FIGMA.md delete mode 100644 claude-product-cycle/design-spec-layer/features/home/mockups/PROMPTS_STITCH.md delete mode 100644 claude-product-cycle/design-spec-layer/features/home/mockups/dummy/01-home-dashboard.png delete mode 100644 claude-product-cycle/design-spec-layer/features/home/mockups/dummy/02-account-overview-card.png delete mode 100644 claude-product-cycle/design-spec-layer/features/home/mockups/dummy/03-quick-actions.png delete mode 100644 claude-product-cycle/design-spec-layer/features/home/mockups/dummy/04-recent-transactions.png delete mode 100644 claude-product-cycle/design-spec-layer/features/home/mockups/dummy/05-home-empty-state.png delete mode 100644 claude-product-cycle/design-spec-layer/features/loan-account/API.md delete mode 100644 claude-product-cycle/design-spec-layer/features/loan-account/MOCKUP.md delete mode 100644 claude-product-cycle/design-spec-layer/features/loan-account/SPEC.md delete mode 100644 claude-product-cycle/design-spec-layer/features/loan-account/STATUS.md delete mode 100644 claude-product-cycle/design-spec-layer/features/loan-account/mockups/PROMPTS_FIGMA.md delete mode 100644 claude-product-cycle/design-spec-layer/features/loan-account/mockups/PROMPTS_STITCH.md delete mode 100644 claude-product-cycle/design-spec-layer/features/loan-account/mockups/dummy/01-loan-detail.png delete mode 100644 claude-product-cycle/design-spec-layer/features/loan-account/mockups/dummy/02-loan-repayment-schedule.png delete mode 100644 claude-product-cycle/design-spec-layer/features/loan-account/mockups/dummy/03-loan-transactions.png delete mode 100644 claude-product-cycle/design-spec-layer/features/loan-account/mockups/dummy/04-loan-statement.png delete mode 100644 claude-product-cycle/design-spec-layer/features/loan-account/mockups/dummy/05-make-repayment.png delete mode 100644 claude-product-cycle/design-spec-layer/features/loan-account/mockups/dummy/06-loan-calculator.png delete mode 100644 claude-product-cycle/design-spec-layer/features/loan-account/mockups/dummy/07-loan-empty.png delete mode 100644 claude-product-cycle/design-spec-layer/features/location/API.md delete mode 100644 claude-product-cycle/design-spec-layer/features/location/MOCKUP.md delete mode 100644 claude-product-cycle/design-spec-layer/features/location/SPEC.md delete mode 100644 claude-product-cycle/design-spec-layer/features/location/STATUS.md delete mode 100644 claude-product-cycle/design-spec-layer/features/location/mockups/FIGMA_LINKS.md delete mode 100644 claude-product-cycle/design-spec-layer/features/location/mockups/PROMPTS.md delete mode 100644 claude-product-cycle/design-spec-layer/features/location/mockups/design-tokens.json delete mode 100644 claude-product-cycle/design-spec-layer/features/location/mockups/dummy/01-branch-finder-map.png delete mode 100644 claude-product-cycle/design-spec-layer/features/location/mockups/dummy/02-branch-list-view.png delete mode 100644 claude-product-cycle/design-spec-layer/features/location/mockups/dummy/03-branch-detail.png delete mode 100644 claude-product-cycle/design-spec-layer/features/location/mockups/dummy/04-book-appointment-service.png delete mode 100644 claude-product-cycle/design-spec-layer/features/location/mockups/dummy/05-book-appointment-datetime.png delete mode 100644 claude-product-cycle/design-spec-layer/features/location/mockups/dummy/06-book-appointment-confirm.png delete mode 100644 claude-product-cycle/design-spec-layer/features/location/mockups/dummy/07-appointment-success.png delete mode 100644 claude-product-cycle/design-spec-layer/features/location/mockups/dummy/08-ar-branch-finder.png delete mode 100644 claude-product-cycle/design-spec-layer/features/notification/API.md delete mode 100644 claude-product-cycle/design-spec-layer/features/notification/MOCKUP.md delete mode 100644 claude-product-cycle/design-spec-layer/features/notification/SPEC.md delete mode 100644 claude-product-cycle/design-spec-layer/features/notification/STATUS.md delete mode 100644 claude-product-cycle/design-spec-layer/features/notification/mockups/PROMPTS_FIGMA.md delete mode 100644 claude-product-cycle/design-spec-layer/features/notification/mockups/PROMPTS_STITCH.md delete mode 100644 claude-product-cycle/design-spec-layer/features/notification/mockups/dummy/01-notification-center.png delete mode 100644 claude-product-cycle/design-spec-layer/features/notification/mockups/dummy/02-notification-detail.png delete mode 100644 claude-product-cycle/design-spec-layer/features/notification/mockups/dummy/03-notification-settings.png delete mode 100644 claude-product-cycle/design-spec-layer/features/notification/mockups/dummy/04-notification-empty.png delete mode 100644 claude-product-cycle/design-spec-layer/features/notification/mockups/dummy/05-push-permission.png delete mode 100644 claude-product-cycle/design-spec-layer/features/passcode/API.md delete mode 100644 claude-product-cycle/design-spec-layer/features/passcode/MOCKUP.md delete mode 100644 claude-product-cycle/design-spec-layer/features/passcode/SPEC.md delete mode 100644 claude-product-cycle/design-spec-layer/features/passcode/STATUS.md delete mode 100644 claude-product-cycle/design-spec-layer/features/passcode/mockups/FIGMA_LINKS.md delete mode 100644 claude-product-cycle/design-spec-layer/features/passcode/mockups/PROMPTS.md delete mode 100644 claude-product-cycle/design-spec-layer/features/passcode/mockups/design-tokens.json delete mode 100644 claude-product-cycle/design-spec-layer/features/passcode/mockups/dummy/01-biometric-entry.png delete mode 100644 claude-product-cycle/design-spec-layer/features/passcode/mockups/dummy/02-passcode-entry.png delete mode 100644 claude-product-cycle/design-spec-layer/features/passcode/mockups/dummy/03-create-passcode.png delete mode 100644 claude-product-cycle/design-spec-layer/features/passcode/mockups/dummy/04-confirm-passcode.png delete mode 100644 claude-product-cycle/design-spec-layer/features/passcode/mockups/dummy/05-change-passcode.png delete mode 100644 claude-product-cycle/design-spec-layer/features/passcode/mockups/dummy/06-passcode-success.png delete mode 100644 claude-product-cycle/design-spec-layer/features/passcode/mockups/dummy/07-passcode-locked.png delete mode 100644 claude-product-cycle/design-spec-layer/features/qr/API.md delete mode 100644 claude-product-cycle/design-spec-layer/features/qr/MOCKUP.md delete mode 100644 claude-product-cycle/design-spec-layer/features/qr/SPEC.md delete mode 100644 claude-product-cycle/design-spec-layer/features/qr/STATUS.md delete mode 100644 claude-product-cycle/design-spec-layer/features/qr/mockups/FIGMA_LINKS.md delete mode 100644 claude-product-cycle/design-spec-layer/features/qr/mockups/PROMPTS.md delete mode 100644 claude-product-cycle/design-spec-layer/features/qr/mockups/design-tokens.json delete mode 100644 claude-product-cycle/design-spec-layer/features/qr/mockups/dummy/01-smart-pay-hub-scan.png delete mode 100644 claude-product-cycle/design-spec-layer/features/qr/mockups/dummy/02-my-qr-code.png delete mode 100644 claude-product-cycle/design-spec-layer/features/qr/mockups/dummy/03-request-money.png delete mode 100644 claude-product-cycle/design-spec-layer/features/qr/mockups/dummy/04-scan-success.png delete mode 100644 claude-product-cycle/design-spec-layer/features/qr/mockups/dummy/05-dynamic-qr-timer.png delete mode 100644 claude-product-cycle/design-spec-layer/features/qr/mockups/dummy/06-payment-success.png delete mode 100644 claude-product-cycle/design-spec-layer/features/qr/mockups/dummy/07-qr-history.png delete mode 100644 claude-product-cycle/design-spec-layer/features/recent-transaction/API.md delete mode 100644 claude-product-cycle/design-spec-layer/features/recent-transaction/MOCKUP.md delete mode 100644 claude-product-cycle/design-spec-layer/features/recent-transaction/SPEC.md delete mode 100644 claude-product-cycle/design-spec-layer/features/recent-transaction/STATUS.md delete mode 100644 claude-product-cycle/design-spec-layer/features/recent-transaction/mockups/PROMPTS_FIGMA.md delete mode 100644 claude-product-cycle/design-spec-layer/features/recent-transaction/mockups/PROMPTS_STITCH.md delete mode 100644 claude-product-cycle/design-spec-layer/features/recent-transaction/mockups/dummy/01-transaction-list.png delete mode 100644 claude-product-cycle/design-spec-layer/features/recent-transaction/mockups/dummy/02-transaction-detail.png delete mode 100644 claude-product-cycle/design-spec-layer/features/recent-transaction/mockups/dummy/03-transaction-filter.png delete mode 100644 claude-product-cycle/design-spec-layer/features/recent-transaction/mockups/dummy/04-transaction-search.png delete mode 100644 claude-product-cycle/design-spec-layer/features/recent-transaction/mockups/dummy/05-transaction-export.png delete mode 100644 claude-product-cycle/design-spec-layer/features/recent-transaction/mockups/dummy/06-transaction-empty.png delete mode 100644 claude-product-cycle/design-spec-layer/features/savings-account/API.md delete mode 100644 claude-product-cycle/design-spec-layer/features/savings-account/MOCKUP.md delete mode 100644 claude-product-cycle/design-spec-layer/features/savings-account/SPEC.md delete mode 100644 claude-product-cycle/design-spec-layer/features/savings-account/STATUS.md delete mode 100644 claude-product-cycle/design-spec-layer/features/savings-account/mockups/PROMPTS_FIGMA.md delete mode 100644 claude-product-cycle/design-spec-layer/features/savings-account/mockups/PROMPTS_STITCH.md delete mode 100644 claude-product-cycle/design-spec-layer/features/savings-account/mockups/dummy/01-savings-detail.png delete mode 100644 claude-product-cycle/design-spec-layer/features/savings-account/mockups/dummy/02-savings-transactions.png delete mode 100644 claude-product-cycle/design-spec-layer/features/savings-account/mockups/dummy/03-savings-statement.png delete mode 100644 claude-product-cycle/design-spec-layer/features/savings-account/mockups/dummy/04-savings-qr-code.png delete mode 100644 claude-product-cycle/design-spec-layer/features/savings-account/mockups/dummy/05-make-transfer.png delete mode 100644 claude-product-cycle/design-spec-layer/features/savings-account/mockups/dummy/06-savings-empty.png delete mode 100644 claude-product-cycle/design-spec-layer/features/settings/API.md delete mode 100644 claude-product-cycle/design-spec-layer/features/settings/MOCKUP.md delete mode 100644 claude-product-cycle/design-spec-layer/features/settings/SPEC.md delete mode 100644 claude-product-cycle/design-spec-layer/features/settings/STATUS.md delete mode 100644 claude-product-cycle/design-spec-layer/features/settings/mockups/FIGMA_LINKS.md delete mode 100644 claude-product-cycle/design-spec-layer/features/settings/mockups/PROMPTS.md delete mode 100644 claude-product-cycle/design-spec-layer/features/settings/mockups/design-tokens.json delete mode 100644 claude-product-cycle/design-spec-layer/features/settings/mockups/dummy/01-command-center-hub.png delete mode 100644 claude-product-cycle/design-spec-layer/features/settings/mockups/dummy/02-profile-dashboard.png delete mode 100644 claude-product-cycle/design-spec-layer/features/settings/mockups/dummy/03-security-center.png delete mode 100644 claude-product-cycle/design-spec-layer/features/settings/mockups/dummy/04-appearance-settings.png delete mode 100644 claude-product-cycle/design-spec-layer/features/settings/mockups/dummy/05-privacy-data.png delete mode 100644 claude-product-cycle/design-spec-layer/features/settings/mockups/dummy/06-notifications-hub.png delete mode 100644 claude-product-cycle/design-spec-layer/features/settings/mockups/dummy/07-connected-services.png delete mode 100644 claude-product-cycle/design-spec-layer/features/settings/mockups/dummy/08-help-support.png delete mode 100644 claude-product-cycle/design-spec-layer/features/settings/mockups/dummy/09-about.png delete mode 100644 claude-product-cycle/design-spec-layer/features/share-account/API.md delete mode 100644 claude-product-cycle/design-spec-layer/features/share-account/MOCKUP.md delete mode 100644 claude-product-cycle/design-spec-layer/features/share-account/SPEC.md delete mode 100644 claude-product-cycle/design-spec-layer/features/share-account/STATUS.md delete mode 100644 claude-product-cycle/design-spec-layer/features/share-account/mockups/PROMPTS_FIGMA.md delete mode 100644 claude-product-cycle/design-spec-layer/features/share-account/mockups/PROMPTS_STITCH.md delete mode 100644 claude-product-cycle/design-spec-layer/features/share-account/mockups/dummy/01-share-detail.png delete mode 100644 claude-product-cycle/design-spec-layer/features/share-account/mockups/dummy/02-share-dividends.png delete mode 100644 claude-product-cycle/design-spec-layer/features/share-account/mockups/dummy/03-share-transactions.png delete mode 100644 claude-product-cycle/design-spec-layer/features/share-account/mockups/dummy/04-share-statement.png delete mode 100644 claude-product-cycle/design-spec-layer/features/share-account/mockups/dummy/05-purchase-shares.png delete mode 100644 claude-product-cycle/design-spec-layer/features/share-account/mockups/dummy/06-redeem-shares.png delete mode 100644 claude-product-cycle/design-spec-layer/features/transfer/API.md delete mode 100644 claude-product-cycle/design-spec-layer/features/transfer/MOCKUP.md delete mode 100644 claude-product-cycle/design-spec-layer/features/transfer/SPEC.md delete mode 100644 claude-product-cycle/design-spec-layer/features/transfer/STATUS.md delete mode 100644 claude-product-cycle/design-spec-layer/features/transfer/mockups/PROMPTS_FIGMA.md delete mode 100644 claude-product-cycle/design-spec-layer/features/transfer/mockups/PROMPTS_STITCH.md delete mode 100644 claude-product-cycle/design-spec-layer/features/transfer/mockups/dummy/01-transfer-hub.png delete mode 100644 claude-product-cycle/design-spec-layer/features/transfer/mockups/dummy/02-select-account.png delete mode 100644 claude-product-cycle/design-spec-layer/features/transfer/mockups/dummy/03-enter-amount.png delete mode 100644 claude-product-cycle/design-spec-layer/features/transfer/mockups/dummy/04-transfer-review.png delete mode 100644 claude-product-cycle/design-spec-layer/features/transfer/mockups/dummy/05-transfer-success.png delete mode 100644 claude-product-cycle/design-spec-layer/features/transfer/mockups/dummy/06-transfer-history.png delete mode 100644 claude-product-cycle/design-spec-layer/mockup-tools/LAYER_STATUS.md delete mode 100644 claude-product-cycle/design-spec-layer/mockup-tools/README.md delete mode 100644 claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/manifest.json delete mode 100644 claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/package.json delete mode 100644 claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/design-system/index.ts delete mode 100644 claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/design-system/tokens.ts delete mode 100644 claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/generators/components/bottom-nav.ts delete mode 100644 claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/generators/components/button.ts delete mode 100644 claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/generators/components/card.ts delete mode 100644 claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/generators/components/input-field.ts delete mode 100644 claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/generators/components/list-item.ts delete mode 100644 claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/generators/components/quick-actions.ts delete mode 100644 claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/generators/components/screen.ts delete mode 100644 claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/generators/components/top-bar.ts delete mode 100644 claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/generators/index.ts delete mode 100644 claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/plugin.ts delete mode 100644 claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/utils/helpers.ts delete mode 100644 claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/tsconfig.json delete mode 100644 claude-product-cycle/design-spec-layer/mockup-tools/templates/ai-prompt.md delete mode 100644 claude-product-cycle/feature-layer/LAYER_GUIDE.md delete mode 100644 claude-product-cycle/feature-layer/LAYER_STATUS.md delete mode 100644 claude-product-cycle/feature-layer/MODULES_INDEX.md delete mode 100644 claude-product-cycle/feature-layer/SCREENS_INDEX.md delete mode 100644 claude-product-cycle/feature-layer/TESTING_STATUS.md delete mode 100644 claude-product-cycle/feature-layer/instructions/COMPOSE.md delete mode 100644 claude-product-cycle/feature-layer/instructions/DI.md delete mode 100644 claude-product-cycle/feature-layer/instructions/NAVIGATION.md delete mode 100644 claude-product-cycle/feature-layer/instructions/UPDATING_FEATURE.md delete mode 100644 claude-product-cycle/feature-layer/instructions/VIEWMODEL.md delete mode 100644 claude-product-cycle/plans/PLANS_INDEX.md delete mode 100644 claude-product-cycle/platform-layer/LAYER_GUIDE.md delete mode 100644 claude-product-cycle/platform-layer/LAYER_STATUS.md delete mode 100644 claude-product-cycle/platform-layer/TESTING_STATUS.md delete mode 100644 claude-product-cycle/platform-layer/platforms/ANDROID.md delete mode 100644 claude-product-cycle/platform-layer/platforms/DESKTOP.md delete mode 100644 claude-product-cycle/platform-layer/platforms/IOS.md delete mode 100644 claude-product-cycle/platform-layer/platforms/WEB.md delete mode 100644 claude-product-cycle/server-layer/API_INDEX.md delete mode 100644 claude-product-cycle/server-layer/API_REFERENCE.md delete mode 100644 claude-product-cycle/server-layer/CLIENT_PATTERNS.md delete mode 100644 claude-product-cycle/server-layer/ERROR_HANDLING.md delete mode 100644 claude-product-cycle/server-layer/TESTING_STATUS.md delete mode 100644 claude-product-cycle/server-layer/endpoints/AUTH.md delete mode 100644 claude-product-cycle/server-layer/endpoints/BENEFICIARY.md delete mode 100644 claude-product-cycle/server-layer/endpoints/CHARGES.md delete mode 100644 claude-product-cycle/server-layer/endpoints/CLIENT.md delete mode 100644 claude-product-cycle/server-layer/endpoints/GUARANTOR.md delete mode 100644 claude-product-cycle/server-layer/endpoints/LOAN.md delete mode 100644 claude-product-cycle/server-layer/endpoints/NOTIFICATION.md delete mode 100644 claude-product-cycle/server-layer/endpoints/SAVINGS.md delete mode 100644 claude-product-cycle/server-layer/endpoints/SHARE.md delete mode 100644 claude-product-cycle/server-layer/endpoints/TRANSFER.md delete mode 100644 claude-product-cycle/server-layer/endpoints/USER.md delete mode 100644 claude-product-cycle/templates/gap-analysis/dashboard.md delete mode 100644 claude-product-cycle/templates/gap-analysis/feature-detail.md delete mode 100644 claude-product-cycle/templates/gap-analysis/layer-client.md delete mode 100644 claude-product-cycle/templates/gap-analysis/layer-design.md delete mode 100644 claude-product-cycle/templates/gap-analysis/layer-feature.md delete mode 100644 claude-product-cycle/templates/gap-analysis/layer-platform.md delete mode 100644 claude-product-cycle/templates/gap-analysis/layer-server.md delete mode 100644 claude-product-cycle/templates/gap-analysis/subsection/client-data.md delete mode 100644 claude-product-cycle/templates/gap-analysis/subsection/client-network.md delete mode 100644 claude-product-cycle/templates/gap-analysis/subsection/design-mockup.md delete mode 100644 claude-product-cycle/templates/gap-analysis/subsection/design-spec.md delete mode 100644 claude-product-cycle/templates/gap-analysis/subsection/feature-single.md delete mode 100644 claude-product-cycle/templates/gap-analysis/subsection/platform-android.md delete mode 100644 claude-product-cycle/templates/gap-analysis/subsection/platform-desktop.md delete mode 100644 claude-product-cycle/templates/gap-analysis/subsection/platform-ios.md delete mode 100644 claude-product-cycle/templates/gap-analysis/subsection/platform-web.md delete mode 100644 claude-product-cycle/templates/gap-planning/dashboard.md delete mode 100644 claude-product-cycle/templates/gap-planning/feature-new.md delete mode 100644 claude-product-cycle/templates/gap-planning/feature-v2.md delete mode 100644 claude-product-cycle/templates/gap-planning/layer-client.md delete mode 100644 claude-product-cycle/templates/gap-planning/layer-design.md delete mode 100644 claude-product-cycle/templates/gap-planning/layer-feature.md delete mode 100644 claude-product-cycle/templates/gap-planning/layer-platform.md delete mode 100644 claude-product-cycle/templates/gap-planning/layer-server.md delete mode 100644 claude-product-cycle/templates/gap-planning/subsection/client-data.md delete mode 100644 claude-product-cycle/templates/gap-planning/subsection/client-network.md delete mode 100644 claude-product-cycle/templates/gap-planning/subsection/design-mockup.md delete mode 100644 claude-product-cycle/templates/gap-planning/subsection/design-spec.md delete mode 100644 claude-product-cycle/templates/gap-planning/subsection/feature-single.md delete mode 100644 claude-product-cycle/templates/gap-planning/subsection/platform-android.md delete mode 100644 claude-product-cycle/templates/gap-planning/subsection/platform-desktop.md delete mode 100644 claude-product-cycle/templates/gap-planning/subsection/platform-ios.md delete mode 100644 claude-product-cycle/templates/gap-planning/subsection/platform-web.md delete mode 100644 claude-product-cycle/templates/gap-planning/task-template.md delete mode 100644 claude-product-cycle/testing-layer/FAKE_REPOS_INDEX.md delete mode 100644 claude-product-cycle/testing-layer/LAYER_STATUS.md delete mode 100644 claude-product-cycle/testing-layer/TEST_FIXTURES_INDEX.md delete mode 100644 claude-product-cycle/testing-layer/TEST_PATTERNS.md delete mode 100644 claude-product-cycle/testing-layer/TEST_TAGS_INDEX.md delete mode 100644 claude-product-cycle/testing-layer/patterns/fake-repository.md delete mode 100644 claude-product-cycle/testing-layer/patterns/integration-test.md delete mode 100644 claude-product-cycle/testing-layer/patterns/screen-test.md delete mode 100644 claude-product-cycle/testing-layer/patterns/screenshot-test.md delete mode 100644 claude-product-cycle/testing-layer/patterns/viewmodel-test.md delete mode 100644 claude-product-cycle/testing-layer/templates/FakeRepository.kt.template delete mode 100644 claude-product-cycle/testing-layer/templates/ScreenTest.kt.template delete mode 100644 claude-product-cycle/testing-layer/templates/TestTags.kt.template delete mode 100644 claude-product-cycle/testing-layer/templates/ViewModelTest.kt.template diff --git a/.claude/commands/project-add.md b/.claude/commands/project-add.md new file mode 100644 index 000000000..fd77ab0f4 --- /dev/null +++ b/.claude/commands/project-add.md @@ -0,0 +1,207 @@ +# /project-add - Add New Project (Interactive) + +Create a new project workspace with the 5-layer structure. + +## Usage + +``` +/project-add # Interactive project creation +/project-add "project-name" # Create with specified name +``` + +## Instructions + +### Step 1: Gather Project Info + +If no name provided, ask: +```markdown +## New Project Setup + +Please provide: +1. **Project Name** (lowercase, hyphenated): e.g., `my-app`, `fineract-client` +2. **Project Type**: Android | iOS | KMP | Web +3. **Description**: Brief project description +``` + +### Step 2: Create Workspace Structure + +```bash +# Create workspace directory +mkdir -p claude-product-cycle/workspaces/{{PROJECT_NAME}} + +# Create 6 layer directories +mkdir -p claude-product-cycle/workspaces/{{PROJECT_NAME}}/design-spec-layer/features +mkdir -p claude-product-cycle/workspaces/{{PROJECT_NAME}}/server-layer/endpoints +mkdir -p claude-product-cycle/workspaces/{{PROJECT_NAME}}/client-layer +mkdir -p claude-product-cycle/workspaces/{{PROJECT_NAME}}/feature-layer +mkdir -p claude-product-cycle/workspaces/{{PROJECT_NAME}}/platform-layer +mkdir -p claude-product-cycle/workspaces/{{PROJECT_NAME}}/testing-layer +``` + +### Step 3: Create PROJECT.md + +Create `workspaces/{{PROJECT_NAME}}/PROJECT.md`: + +```markdown +# {{PROJECT_NAME}} + +**Type**: {{PROJECT_TYPE}} +**Created**: {{DATE}} +**Description**: {{DESCRIPTION}} + +--- + +## Quick Start + +```bash +/project-set {{PROJECT_NAME}} # Activate this project +/gap-analysis # Check status +/design [feature] # Start designing +``` + +--- + +## Structure + +``` +workspaces/{{PROJECT_NAME}}/ +├── PROJECT.md # This file +├── design-spec-layer/ # Feature specifications +│ └── features/ # Per-feature specs +├── server-layer/ # API documentation +│ └── endpoints/ # Per-endpoint docs +├── client-layer/ # Network/data layer tracking +├── feature-layer/ # UI layer tracking +├── platform-layer/ # Platform-specific tracking +└── testing-layer/ # Test tracking +``` + +--- + +## Status + +| Layer | Progress | Next Action | +|-------|:--------:|-------------| +| Design | 0% | `/design [feature]` | +| Server | 0% | Document APIs | +| Client | 0% | `/client [feature]` | +| Feature | 0% | `/feature [feature]` | +| Platform | 0% | Platform setup | +``` + +### Step 4: Create Layer Index Files + +**design-spec-layer/STATUS.md**: +```markdown +# Design Layer Status + +**Project**: {{PROJECT_NAME}} +**Last Updated**: {{DATE}} + +## Features + +| Feature | SPEC | MOCKUP | API | STATUS | Complete | +|---------|:----:|:------:|:---:|:------:|:--------:| +| (none yet) | - | - | - | - | - | + +--- + +**Next**: Run `/design [feature]` to add first feature +``` + +**client-layer/LAYER_STATUS.md**: +```markdown +# Client Layer Status + +**Project**: {{PROJECT_NAME}} +**Last Updated**: {{DATE}} + +## Services + +| Service | Repository | Models | DI | Complete | +|---------|:----------:|:------:|:--:|:--------:| +| (none yet) | - | - | - | - | +``` + +**feature-layer/LAYER_STATUS.md**: +```markdown +# Feature Layer Status + +**Project**: {{PROJECT_NAME}} +**Last Updated**: {{DATE}} + +## Features + +| Feature | ViewModel | Screen | Navigation | DI | Complete | +|---------|:---------:|:------:|:----------:|:--:|:--------:| +| (none yet) | - | - | - | - | - | +``` + +### Step 5: Optionally Set Active + +Ask user: +```markdown +## Project Created + +**Name**: {{PROJECT_NAME}} +**Location**: `workspaces/{{PROJECT_NAME}}/` + +Would you like to set this as the active project? + +1. **Yes** - Set active and start working +2. **No** - Keep current project active +``` + +If yes: +```bash +echo "{{PROJECT_NAME}}" > claude-product-cycle/ACTIVE_PROJECT +``` + +### Step 6: Show Completion + +```markdown +## Project Created Successfully + +**Project**: {{PROJECT_NAME}} +**Workspace**: `workspaces/{{PROJECT_NAME}}/` +**Active**: {{IS_ACTIVE}} + +--- + +### Structure Created + +``` +workspaces/{{PROJECT_NAME}}/ +├── PROJECT.md ✅ +├── design-spec-layer/ ✅ +│ ├── STATUS.md ✅ +│ └── features/ ✅ +├── server-layer/ ✅ +│ └── endpoints/ ✅ +├── client-layer/ ✅ +│ └── LAYER_STATUS.md ✅ +├── feature-layer/ ✅ +│ └── LAYER_STATUS.md ✅ +├── platform-layer/ ✅ +└── testing-layer/ ✅ +``` + +--- + +### Next Steps + +1. `/project-set {{PROJECT_NAME}}` - Activate (if not active) +2. `/design [feature]` - Create first feature spec +3. `/gap-analysis` - View project status + +--- + +**Ready to build!** +``` + +## Output Rules + +1. Create complete workspace structure +2. Initialize all index/status files +3. Ask before setting as active +4. Show clear next steps diff --git a/.claude/commands/project-list.md b/.claude/commands/project-list.md new file mode 100644 index 000000000..b29935b86 --- /dev/null +++ b/.claude/commands/project-list.md @@ -0,0 +1,48 @@ +# /project-list - List All Projects + +List all available projects in the multi-project workspace. + +## Usage + +``` +/project-list # List all projects +``` + +## Instructions + +### Step 1: Read Workspaces + +```bash +ls claude-product-cycle/workspaces/ +``` + +### Step 2: Get Active Project + +```bash +cat claude-product-cycle/ACTIVE_PROJECT +``` + +### Step 3: Display Project List + +```markdown +## Available Projects + +| # | Project | Status | Path | +|:-:|---------|:------:|------| +{{PROJECT_ROWS}} + +**Active**: {{ACTIVE_PROJECT}} + +--- + +### Commands + +- `/project-set [name]` - Switch to a project +- `/project-add` - Add new project +``` + +## Output Rules + +1. List all directories in workspaces/ +2. Mark active project with arrow (→) +3. Show path to each workspace diff --git a/.claude/commands/project-set.md b/.claude/commands/project-set.md new file mode 100644 index 000000000..bf0d8119e --- /dev/null +++ b/.claude/commands/project-set.md @@ -0,0 +1,67 @@ +# /project-set - Set Active Project + +Switch the active project for all commands. + +## Usage + +``` +/project-set mifos-mobile # Switch to mifos-mobile project +/project-set test-project # Switch to test-project +``` + +## Instructions + +### Step 1: Validate Project Exists + +```bash +ls claude-product-cycle/workspaces/{{PROJECT_NAME}}/ +``` + +If directory doesn't exist, show error: +```markdown +## Error: Project Not Found + +Project `{{PROJECT_NAME}}` does not exist. + +**Available projects**: +{{PROJECT_LIST}} + +Run `/project-add` to create a new project. +``` + +### Step 2: Update ACTIVE_PROJECT + +```bash +echo "{{PROJECT_NAME}}" > claude-product-cycle/ACTIVE_PROJECT +``` + +### Step 3: Confirm Switch + +```markdown +## Project Switched + +**Active Project**: {{PROJECT_NAME}} +**Workspace**: `workspaces/{{PROJECT_NAME}}/` + +--- + +### Project Summary + +| Layer | Status | +|-------|:------:| +| Design | {{DESIGN_STATUS}} | +| Server | {{SERVER_STATUS}} | +| Client | {{CLIENT_STATUS}} | +| Feature | {{FEATURE_STATUS}} | +| Platform | {{PLATFORM_STATUS}} | + +--- + +**Next**: Run `/gap-analysis` to see current status +``` + +## Output Rules + +1. Validate project exists before switching +2. Update ACTIVE_PROJECT file +3. Show project summary after switch diff --git a/CLAUDE.md b/CLAUDE.md index 0b322faa4..592b3de2d 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -23,13 +23,11 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co /session-end # Save context for next session ``` -### Key Context Files +### Claude Product Cycle Framework -| File | Purpose | -|------|---------| -| `claude-product-cycle/CURRENT_WORK.md` | Active work, next actions | -| `claude-product-cycle/PRODUCT_MAP.md` | Master status tracker | -| `design-spec-layer/features/*/STATUS.md` | Per-feature status | +This project uses the [claude-product-cycle](https://github.com/mobilebytesensei/claude-product-cycle) framework for AI-assisted development. + +**Workspace**: [mifos-x-claude-cycle-workspaces](https://github.com/therajanmaurya/mifos-x-claude-cycle-workspaces) ### 5-Layer Lifecycle diff --git a/claude-product-cycle/CLAUDE_PRODUCT_CYCLE.md b/claude-product-cycle/CLAUDE_PRODUCT_CYCLE.md deleted file mode 100644 index afee42def..000000000 --- a/claude-product-cycle/CLAUDE_PRODUCT_CYCLE.md +++ /dev/null @@ -1,611 +0,0 @@ -# Claude Product Cycle - Mifos Mobile - -> **Vision**: AI-powered development framework for structured feature implementation -> **Project**: Mifos Mobile - Self-Service Banking Application (KMP) -> **Backend**: Apache Fineract Self-Service APIs -> **Created**: 2025-12-26 - ---- - -## Project Overview - -Mifos Mobile is a Kotlin Multiplatform (KMP) application for financial institutions. It provides end-users with the ability to manage their accounts (Loan, Savings, Shares), beneficiaries, transfers, and view transactions. The application consumes the Apache Fineract Self-Service API. - -### Tech Stack -- **Frontend**: Kotlin Multiplatform (Android, iOS, Desktop, Web) -- **UI**: Jetpack Compose Multiplatform -- **Architecture**: MVI (Model-View-Intent) with Clean Architecture -- **DI**: Koin -- **Networking**: Ktor + Ktorfit -- **Backend**: Apache Fineract (External API - not managed by this project) - ---- - -## The Big Picture - -``` -┌─────────────────────────────────────────────────────────────────────────────┐ -│ CLAUDE PRODUCT CYCLE FRAMEWORK │ -├─────────────────────────────────────────────────────────────────────────────┤ -│ │ -│ ┌──────────────────────────────────────────────────────────────────────┐ │ -│ │ DEVELOPMENT CYCLE │ │ -│ │ │ │ -│ │ /projectstatus → See where you are │ │ -│ │ │ │ │ -│ │ ▼ │ │ -│ │ /design [Feature] → Architect the feature (Opus) │ │ -│ │ │ │ │ -│ │ ▼ │ │ -│ │ /implement [Feature] → Full E2E implementation │ │ -│ │ │ │ │ -│ │ │ OR use layer commands: │ │ -│ │ │ /client [Feature] → Network + Data layers │ │ -│ │ │ /feature [Feature] → UI layer (ViewModel + Screen) │ │ -│ │ │ │ │ -│ │ ▼ │ │ -│ │ /verify [Feature] → Validate implementation vs spec │ │ -│ │ │ │ -│ └──────────────────────────────────────────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Framework Components - -### Directory Structure - -``` -claude-product-cycle/ -├── CLAUDE_PRODUCT_CYCLE.md # This file - master documentation -├── COMMANDS.md # Quick command reference -│ -├── commands-layer/ # Slash commands for Claude Code -│ ├── design.md # /design - Architecture phase -│ ├── implement.md # /implement - E2E implementation -│ ├── client.md # /client - Network + Data layers -│ ├── feature.md # /feature - UI layer -│ ├── verify.md # /verify - Validation -│ └── projectstatus.md # /projectstatus - Overview -│ -├── design-spec-layer/ # Feature specifications -│ ├── STATUS.md # Single source of truth for all features -│ ├── _shared/ # Shared patterns and guides -│ │ ├── PATTERNS.md # Implementation patterns -│ │ └── API_REFERENCE.md # Fineract API quick reference -│ └── features/ # Individual feature bundles -│ └── [feature]/ -│ ├── SPEC.md # What to build (UI, flows) -│ ├── API.md # APIs needed -│ └── STATUS.md # Feature implementation status -│ -└── server-layer/ # Backend documentation - └── FINERACT_API.md # Fineract Self-Service API docs -``` - ---- - -## Command Reference - -| Command | Phase | Purpose | Model | -|---------|-------|---------|-------| -| `/projectstatus` | Any | See project status, all commands | Any | -| `/design [Feature]` | Design | Create SPEC.md + API.md (architecture) | **Opus** | -| `/implement [Feature]` | Build | Full feature implementation (all layers) | Sonnet | -| `/client [Feature]` | Build | Network + Data + Domain layers | Sonnet | -| `/feature [Feature]` | Build | UI layer (ViewModel + Screen) | Sonnet | -| `/verify [Feature]` | QA | Validate implementation vs spec | Sonnet | - ---- - -## Architecture Layers - -### 1. Network Layer (`core/network/`) - -**Purpose**: API communication with Fineract Self-Service endpoints - -```kotlin -// Service interface using Ktorfit -interface ClientService { - @GET(ApiEndPoints.CLIENTS) - fun clients(): Flow> - - @GET(ApiEndPoints.CLIENTS + "/{clientId}/accounts") - fun getClientAccounts(@Path("clientId") clientId: Long): Flow -} -``` - -**Key Components**: -- `services/` - Ktorfit service interfaces -- `utils/ApiEndPoints.kt` - API endpoint constants -- `di/NetworkModule.kt` - DI registration - -### 2. Data Layer (`core/data/`) - -**Purpose**: Repository implementations, data transformations - -```kotlin -interface HomeRepository { - fun clientAccounts(clientId: Long): Flow> - fun currentClient(clientId: Long): Flow> -} -``` - -**Key Components**: -- `repository/` - Repository interfaces and implementations -- `di/DataModule.kt` - DI registration - -### 3. Feature Layer (`feature/[name]/`) - -**Purpose**: UI presentation with MVI architecture - -```kotlin -// ViewModel with State, Event, Action pattern -class HomeViewModel( - private val homeRepository: HomeRepository, -) : BaseViewModel(initialState) { - override fun handleAction(action: HomeAction) { ... } -} - -// Immutable UI State -@Immutable -data class HomeState( - val clientAccounts: ClientAccounts? = null, - val uiState: HomeScreenState = HomeScreenState.Loading, -) - -// One-time Events (navigation, toasts) -sealed interface HomeEvent { - data class Navigate(val route: String) : HomeEvent -} - -// User Actions -sealed interface HomeAction { - data object Retry : HomeAction - data class OnNavigate(val route: String) : HomeAction -} -``` - -**Key Components**: -- `[Feature]ViewModel.kt` - MVI ViewModel -- `[Feature]Screen.kt` - Compose UI -- `components/` - Reusable composables -- `navigation/` - Navigation definition -- `di/[Feature]Module.kt` - DI registration - ---- - -## Feature Catalog - -| Feature | Module | Status | APIs | -|---------|--------|--------|------| -| Auth (Login/Register) | `feature:auth` | Done | authentication, registration | -| Home Dashboard | `feature:home` | Done | clients, accounts | -| Accounts Overview | `feature:accounts` | Done | clients/accounts | -| Savings Account | `feature:savings-account` | Done | savingsaccounts | -| Loan Account | `feature:loan-account` | Done | loans | -| Share Account | `feature:share-account` | Done | shareaccounts | -| Beneficiary | `feature:beneficiary` | Done | beneficiaries/tpt | -| Transfer | `feature:transfer-process` | Done | accounttransfers | -| Third Party Transfer | `feature:third-party-transfer` | Done | beneficiaries, accounttransfers | -| Recent Transactions | `feature:recent-transaction` | Done | savingsaccounts/transactions | -| Notifications | `feature:notification` | Done | notifications | -| Client Charges | `feature:client-charge` | Done | clients/charges | -| Guarantor | `feature:guarantor` | Done | loans/guarantors | -| QR Code | `feature:qr` | Done | - (local) | -| Settings | `feature:settings` | Done | user | -| Passcode | `feature:passcode` | Done | - (local) | -| Location | `feature:location` | Done | - (external maps) | - ---- - -## Fineract Self-Service API Overview - -Base URL: `https://{server}/fineract-provider/api/v1/self/` - -### Core Endpoints - -| Category | Endpoint | Methods | -|----------|----------|---------| -| Authentication | `authentication` | POST | -| Registration | `registration` | POST, GET | -| Clients | `clients` | GET | -| Savings | `savingsaccounts` | GET, POST, PUT | -| Loans | `loans` | GET, POST, PUT | -| Shares | `shareaccounts` | GET, POST | -| Beneficiaries | `beneficiaries/tpt` | GET, POST, PUT, DELETE | -| Transfers | `accounttransfers` | GET, POST | -| User | `user` | GET, PUT | - ---- - -## Development Workflow - -### 1. Design Phase (`/design [Feature]`) - -``` -1. Read existing code and understand current implementation -2. Create/update SPEC.md with: - - ASCII mockups - - User interactions - - State model - - API requirements -3. Create/update API.md with endpoint details -4. Update STATUS.md -``` - -### 2. Implementation Phase (`/implement [Feature]`) - -``` -1. Git: Create feature branch -2. Validate: Check dependencies -3. Client Layer: - - Create/update DTOs in core/network/model/ - - Create/update Service in core/network/services/ - - Create/update Repository in core/data/repository/ - - Register in DI modules -4. Feature Layer: - - Create/update ViewModel - - Create/update Screen - - Create/update Components - - Register navigation - - Register in DI module -5. Build & Test: ./gradlew build -6. Lint: ./gradlew spotlessApply detekt -7. Commit with conventional commits -``` - -### 3. Verification Phase (`/verify [Feature]`) - -``` -1. Compare SPEC.md vs actual code -2. Check all user actions implemented -3. Check all API calls present -4. Verify DI registration -5. Check navigation -6. Report gaps -``` - ---- - -## Patterns - -### MVI ViewModel Pattern - -```kotlin -class FeatureViewModel( - private val repository: FeatureRepository, -) : BaseViewModel( - initialState = FeatureState() -) { - override fun handleAction(action: FeatureAction) { - when (action) { - is FeatureAction.Load -> loadData() - is FeatureAction.Retry -> retry() - } - } - - private fun loadData() { - viewModelScope.launch { - repository.getData() - .collect { dataState -> - when (dataState) { - is DataState.Loading -> updateState { it.copy(isLoading = true) } - is DataState.Success -> updateState { - it.copy(isLoading = false, data = dataState.data) - } - is DataState.Error -> updateState { - it.copy(isLoading = false, error = dataState.message) - } - } - } - } - } -} -``` - -### Repository Pattern - -```kotlin -class FeatureRepositoryImpl( - private val service: FeatureService, -) : FeatureRepository { - override fun getData(): Flow> = flow { - emit(DataState.Loading) - try { - val result = service.fetchData().first() - emit(DataState.Success(result)) - } catch (e: Exception) { - emit(DataState.Error(e.message ?: "Unknown error")) - } - } -} -``` - -### Screen Pattern - -```kotlin -@Composable -fun FeatureScreen( - viewModel: FeatureViewModel = koinViewModel(), - onNavigateBack: () -> Unit, -) { - val state by viewModel.stateFlow.collectAsStateWithLifecycle() - - // Handle one-time events - LaunchedEffect(Unit) { - viewModel.eventFlow.collect { event -> - when (event) { - is FeatureEvent.NavigateBack -> onNavigateBack() - } - } - } - - FeatureContent( - state = state, - onAction = viewModel::sendAction, - ) -} -``` - ---- - -## Cross-Update Rules - -After ANY implementation: -1. Update feature's `STATUS.md` -2. Update main `claude-product-cycle/design-spec-layer/STATUS.md` -3. Add changelog entries -4. Run `./gradlew build` to verify - ---- - -## Getting Started - -This section provides everything you need to effectively use the Claude Product Cycle framework. - -### Prerequisites - -Before starting, ensure you have: - -| Requirement | Details | -|-------------|---------| -| Claude Code CLI | Anthropic's CLI tool with slash command support | -| Project Access | Clone of `mifos-mobile` repository | -| Branch | Work from `development` or feature branches | -| Fineract Server | Access to demo: `gsoc.mifos.community` (demo credentials in CLAUDE.md) | - -### Session Workflow - -Always use session commands to maintain context across conversations: - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ SESSION WORKFLOW │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ /session-start # Load context from previous │ -│ │ # session (CURRENT_WORK.md) │ -│ ▼ │ -│ ┌─────────────────────┐ │ -│ │ DO YOUR WORK │ # Use gap-analysis, design, │ -│ │ • /gap-analysis │ # implement, verify commands │ -│ │ • /design │ │ -│ │ • /implement │ │ -│ │ • /verify │ │ -│ └─────────────────────┘ │ -│ │ │ -│ ▼ │ -│ /session-end # Save context for next session │ -│ # (updates CURRENT_WORK.md) │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - -### 5-Layer Lifecycle - -Every feature flows through 5 layers: - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ 5-LAYER LIFECYCLE │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ Layer 1: DESIGN │ -│ ├── SPEC.md → What to build (screens, flows) │ -│ ├── MOCKUP.md → How it looks (ASCII/visual mockups) │ -│ ├── API.md → What APIs needed (endpoints, payloads) │ -│ └── STATUS.md → Implementation progress │ -│ │ -│ Layer 2: SERVER │ -│ └── Fineract API → External API availability check │ -│ │ -│ Layer 3: CLIENT │ -│ ├── Network → core/network/services/*Service.kt │ -│ ├── Data → core/data/repository/*Repository.kt │ -│ └── Model → core/network/model/*.kt │ -│ │ -│ Layer 4: FEATURE │ -│ ├── ViewModel → feature/*/viewmodel/*ViewModel.kt │ -│ ├── Screen → feature/*/screens/*Screen.kt │ -│ ├── Navigation → feature/*/navigation/*Navigation.kt │ -│ └── DI → feature/*/di/*Module.kt │ -│ │ -│ Layer 5: PLATFORM │ -│ ├── Android → cmp-android/ │ -│ ├── iOS → cmp-ios/ │ -│ ├── Desktop → cmp-desktop/ │ -│ └── Web → cmp-web/ │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - -### Gap Analysis & Planning - -Use these commands to understand what's done vs what's needed: - -```bash -# Quick overview - all layers summary -/gap-analysis - -# Layer-specific analysis -/gap-analysis design # Design specs, mockups, API docs status -/gap-analysis server # Fineract API availability -/gap-analysis client # Network services, repositories status -/gap-analysis feature # ViewModels, Screens status -/gap-analysis platform # Platform-specific builds status - -# Sub-section analysis -/gap-analysis design mockup # Mockup generation status only -/gap-analysis design spec # Specification status only -/gap-analysis client network # Network services only -/gap-analysis feature auth # Single feature status - -# Feature-specific (all 5 layers for one feature) -/gap-analysis auth # Auth feature across all layers -/gap-analysis transfer # Transfer feature across all layers - -# Plan improvements -/gap-planning auth # Generate plan to fill gaps for auth -/gap-planning design mockup # Plan for mockup generation -``` - -### Design Layer Workflow - -The design layer has 4 sub-sections per feature: - -``` -features/[name]/ -├── SPEC.md # WHAT to build -│ ├── Feature Overview -│ ├── User Stories -│ ├── Screen Descriptions -│ ├── User Flows -│ └── State Management -│ -├── MOCKUP.md # HOW it looks -│ ├── ASCII Mockups (all screens) -│ ├── Component Breakdown -│ ├── Interaction Patterns -│ └── Data Binding Reference → References API.md -│ -├── API.md # WHAT APIs (Single Source of Truth) -│ ├── Endpoints Required -│ ├── Request/Response Schemas -│ ├── Error Responses -│ └── Dependencies -│ -└── STATUS.md # Progress tracking - ├── Design Phase (%) - ├── Client Phase (%) - ├── Feature Phase (%) - └── Platform Phase (%) -``` - -**Generating Mockups**: -```bash -# Generate mockups for a feature -/design auth # Opens design workflow -# Then select "mockup" sub-section when prompted -``` - -### Implementation Workflow - -```bash -# Full E2E implementation (all layers) -/implement auth - -# OR layer-by-layer implementation -/client auth # Network + Data layers only -/feature auth # UI layer only (requires client layer) - -# After implementation -/verify auth # Validate against spec -``` - -**Implementation Order**: -``` -1. /design [feature] → Create specifications -2. /implement [feature] → Full implementation - - OR - -2a. /client [feature] → Network + Repository -2b. /feature [feature] → ViewModel + Screen -3. /verify [feature] → Validate completeness -``` - -### Common Scenarios - -#### Scenario 1: Start New Feature - -```bash -/session-start # Load previous context -/gap-analysis # See what's missing -/design new-feature # Create specs (uses Opus model) -/implement new-feature # Implement E2E -/verify new-feature # Validate -/session-end # Save context -``` - -#### Scenario 2: Fix Gaps in Existing Feature - -```bash -/session-start -/gap-analysis auth # Find gaps in auth feature -/gap-planning auth # Get action plan -/implement auth # Fill the gaps -/verify auth -/session-end -``` - -#### Scenario 3: Update Mockups Only - -```bash -/session-start -/gap-analysis design mockup # See which mockups are missing -/design auth # Then choose mockup sub-section -/session-end -``` - -#### Scenario 4: Check Before PR - -```bash -/session-start -/gap-analysis # Full project overview -/verify [feature] # Verify your changes -./ci-prepush.sh # Run pre-push checks -/session-end -``` - -### Key Context Files - -| File | Purpose | When to Check | -|------|---------|---------------| -| `CURRENT_WORK.md` | Active work, next actions | Start of session | -| `PRODUCT_MAP.md` | Master status tracker | Project overview | -| `design-spec-layer/STATUS.md` | Design layer progress | Before design work | -| `features/*/STATUS.md` | Per-feature progress | Before feature work | - -### Quick Reference - -| Task | Command | -|------|---------| -| See project status | `/projectstatus` | -| Find gaps | `/gap-analysis` or `/gap-analysis [layer]` | -| Plan improvements | `/gap-planning [feature]` | -| Design a feature | `/design [feature]` | -| Implement E2E | `/implement [feature]` | -| Client layer only | `/client [feature]` | -| UI layer only | `/feature [feature]` | -| Validate work | `/verify [feature]` | -| Start session | `/session-start` | -| End session | `/session-end` | - ---- - -## Changelog - -| Date | Change | -|------|--------| -| 2025-12-26 | Initial framework setup for Mifos Mobile | diff --git a/claude-product-cycle/COMMANDS.md b/claude-product-cycle/COMMANDS.md deleted file mode 100644 index f04180286..000000000 --- a/claude-product-cycle/COMMANDS.md +++ /dev/null @@ -1,135 +0,0 @@ -# Claude Product Cycle - Commands Reference - -## Quick Reference - -``` -┌─────────────────────────────────────────────────────────────────────┐ -│ DESIGN PHASE │ -├─────────────────────────────────────────────────────────────────────┤ -│ /design [Feature] → Create SPEC.md + API.md (Opus) │ -├─────────────────────────────────────────────────────────────────────┤ -│ IMPLEMENT PHASE │ -├─────────────────────────────────────────────────────────────────────┤ -│ /implement [Feature] → Full E2E implementation (Sonnet) │ -│ │ -│ OR use layer commands independently: │ -│ /client [Feature] → Network + Data layers │ -│ /feature [Feature] → UI layer (ViewModel + Screen) │ -├─────────────────────────────────────────────────────────────────────┤ -│ VERIFY PHASE │ -├─────────────────────────────────────────────────────────────────────┤ -│ /verify [Feature] → Validate implementation vs spec │ -├─────────────────────────────────────────────────────────────────────┤ -│ UTILITIES │ -├─────────────────────────────────────────────────────────────────────┤ -│ /projectstatus → Project overview │ -└─────────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Command Details - -### `/projectstatus` -Shows the current state of all features, implementation progress, and suggested next steps. - -**Usage**: `/projectstatus` - ---- - -### `/design [Feature]` -Creates or updates the feature specification (SPEC.md + API.md). Best used with Opus for complex architectural decisions. - -**Usage**: -``` -/design → Show feature list -/design Home → Full spec review/create for Home -/design Accounts add filter → Add specific section -``` - -**Output**: Creates/updates in `claude-product-cycle/design-spec-layer/features/[feature]/` - ---- - -### `/implement [Feature]` -Full end-to-end implementation including client layer (Network + Data) and feature layer (UI). - -**Usage**: -``` -/implement → Show feature status list -/implement Home → Full implementation -/implement Home --quick → Skip validations -``` - -**Pipeline**: -1. Git: Create feature branch -2. Validate: Check dependencies -3. Client: Network + Data layers -4. Feature: ViewModel + Screen -5. Build & Test -6. Lint & Format -7. Commit - ---- - -### `/client [Feature]` -Implements only the client layer (Network + Data + Domain). - -**Usage**: `/client Home` - -**Creates**: -- DTOs in `core/network/model/` -- Services in `core/network/services/` -- Repository in `core/data/repository/` -- DI module registrations - ---- - -### `/feature [Feature]` -Implements only the feature/UI layer. - -**Usage**: `/feature Home` - -**Creates**: -- ViewModel in `feature/[name]/` -- Screen composable -- Components -- Navigation -- DI module - ---- - -### `/verify [Feature]` -Validates that the implementation matches the specification. - -**Usage**: `/verify Home` - -**Checks**: -- SPEC.md vs actual code -- All user actions implemented -- All API calls present -- DI registration complete -- Navigation configured - ---- - -## Feature List - -| Feature | Command | -|---------|---------| -| Authentication | `/design auth` | -| Home Dashboard | `/design home` | -| Accounts | `/design accounts` | -| Loan Account | `/design loan-account` | -| Savings Account | `/design savings-account` | -| Share Account | `/design share-account` | -| Beneficiary | `/design beneficiary` | -| Transfer | `/design transfer` | -| Recent Transactions | `/design recent-transaction` | -| Notifications | `/design notification` | -| Settings | `/design settings` | -| Passcode | `/design passcode` | -| Guarantor | `/design guarantor` | -| QR Code | `/design qr` | -| Location | `/design location` | -| Client Charges | `/design client-charge` | diff --git a/claude-product-cycle/CURRENT_WORK.md b/claude-product-cycle/CURRENT_WORK.md deleted file mode 100644 index e566d3550..000000000 --- a/claude-product-cycle/CURRENT_WORK.md +++ /dev/null @@ -1,211 +0,0 @@ -# Current Work - -**Last Updated**: 2026-01-05 -**Branch**: feature/design-specifications -**Session Note**: Phase 4 Complete - core:testing module created with fakes, fixtures, TestTags - ---- - -## Active Tasks - -| # | Task | Feature | Status | Files | Notes | -|---|------|---------|:------:|-------|-------| -| 1 | Command Rewrite | implement | ✅ Done | .claude/commands/implement.md | O(1) + Pattern Detection | -| 2 | Command Rewrite | client | ✅ Done | .claude/commands/client.md | O(1) + Pattern Detection | -| 3 | Command Rewrite | feature | ✅ Done | .claude/commands/feature.md | O(1) + TestTags | -| 4 | Command Rewrite | verify | ✅ Done | .claude/commands/verify.md | O(1) + Gap Detection | -| 5 | Command Rewrite | design | ✅ Done | .claude/commands/design.md | O(1) + Mockup Status | -| 6 | Command Rewrite | verify-tests | ✅ Done | .claude/commands/verify-tests.md | O(1) + Test Status | -| 7 | Design Token Integration | feature | ✅ Done | .claude/commands/feature.md | Phase 3.5 Token Integration | -| 8 | Design Tokens Index | design-spec | ✅ Done | DESIGN_TOKENS_INDEX.md | O(1) token lookup | -| 9 | Test Stub Generation | implement | ✅ Done | .claude/commands/implement.md | Phase 5: Auto-generate tests | -| 10 | TestTag Validation | verify | ✅ Done | .claude/commands/verify.md | Enhanced TestTag checks | -| 11 | Test Stubs Guide | docs | ✅ Done | TEST_STUBS_GUIDE.md | TDD reference | -| 12 | core:testing Module | testing | ✅ Done | core/testing/ | Fakes, fixtures, TestTags | -| 13 | Mockup Generation | home | ⏳ Next | features/home/mockups/ | Run `/design home mockup` | -| 14 | v2.0 UI Implementation | dashboard | Planned | feature/dashboard/ | After mockups done | - ---- - -## In Progress - -### Phase 1, 2 & 3 Complete: Commands + Design Integration + Testing Automation - -**All 6 core commands now use O(1 lookup pattern**: - -| Command | Index Files Used | Key Features | -|---------|------------------|--------------| -| `/implement` | FEATURE_MAP, MODULES_INDEX, SCREENS_INDEX | Pattern detection, TestTags | -| `/client` | FEATURE_MAP, API_INDEX | Service/Repository patterns | -| `/feature` | MODULES_INDEX, SCREENS_INDEX, DESIGN_TOKENS_INDEX | MVI pattern, TestTags, **Token Integration** | -| `/verify` | FEATURES_INDEX, FEATURE_MAP, MODULES_INDEX, SCREENS_INDEX, API_INDEX | Gap detection, verification scoring | -| `/design` | FEATURES_INDEX, MOCKUPS_INDEX, API_INDEX | Mockup status, tool selection | -| `/verify-tests` | TESTING_STATUS.md (all layers), MODULES_INDEX | Test dashboard, coverage tracking | - -**Phase 2: Design Token Integration**: -- Created `DESIGN_TOKENS_INDEX.md` for O(1) token lookup -- Added Phase 3.5 to `/feature` command -- Supports both Google Stitch and MD3 token formats -- Auto-generates `${Feature}Theme.kt` with gradients/colors -- Auto-generates `${Feature}Animations.kt` if animations defined -- Maps tokens to existing `DesignToken` system - -**Features with Design Tokens**: 8/17 -- ✅ auth (google-stitch) - gradients, animations -- ✅ dashboard (md3) - components -- ✅ settings, guarantor, qr, passcode, location, client-charge (md3) - -**Phase 3: Testing Automation**: -- Added Phase 5 to `/implement` command for test stub generation -- Enhanced `/verify` command with TestTag validation -- Created `TEST_STUBS_GUIDE.md` documentation -- Auto-generates: ViewModel tests, Screen tests, Fake repositories -- Validates: TestTag naming convention (`feature:component:id`) -- Supports TDD workflow: Red → Green → Refactor - -**Testing Layer (6th Layer)**: -- Created `testing-layer/` with O(1) index files -- `LAYER_STATUS.md` - Test coverage dashboard (17 features) -- `TEST_PATTERNS.md` - ViewModel, Screen, Fake, Integration, Screenshot patterns -- `TEST_TAGS_INDEX.md` - TestTag specifications for all features -- `TEST_FIXTURES_INDEX.md` - Test fixture inventory -- `FAKE_REPOS_INDEX.md` - Fake repository inventory -- `patterns/` - Detailed pattern files (viewmodel-test.md, screen-test.md, etc.) -- `templates/` - Code templates (.kt.template files) - -**Phase 4: core:testing Module** (NEW): -- Enabled `core:testing` in settings.gradle.kts -- Created KMP module with commonMain/androidMain source sets -- **TestTags**: Complete tags for all 17 features (auth, home, accounts, etc.) -- **Fake Repositories**: FakeUserAuthRepository, FakeHomeRepository, FakeAccountsRepository, FakeBeneficiaryRepository, FakeTransferRepository, FakeNotificationRepository -- **Test Fixtures**: UserFixture, ClientAccountsFixture, BeneficiaryFixture -- **Test Utils**: MainDispatcherRule, FlowTestExtensions, TestCoroutineExtensions -- **DI Module**: TestModule for Koin test setup -- Module compiles successfully ✅ - ---- - -## Design Layer - Phase 2: Mockup Generation - -**Progress**: 2/17 features (12%) -- ✅ dashboard - mockups generated -- ✅ auth - mockups generated -- ⏳ home - next -- ⏳ 14 more features pending - -**Commands**: -``` -/gap-analysis design mockup # See mockup progress (2/17) -/gap-planning design mockup # Step-by-step plan -/design [feature] mockup # Generate mockups for feature -``` - ---- - -## Recently Completed - -| Date | Task | Feature | Outcome | -|------|------|---------|---------| -| 2026-01-05 | core:testing Module | core/testing/ | Fakes, fixtures, TestTags - compiles ✅ | -| 2026-01-05 | /gap-status command | commands | Plan progress tracking | -| 2026-01-05 | Testing Layer (6th Layer) | testing-layer/ | Full O(1) test infrastructure | -| 2026-01-05 | Phase 3: Testing Automation | implement/verify | Test stubs + TestTag validation | -| 2026-01-05 | TEST_STUBS_GUIDE.md | docs | TDD reference documentation | -| 2026-01-05 | Phase 2: Design Token Integration | feature | Phase 3.5 + DESIGN_TOKENS_INDEX.md | -| 2026-01-05 | Command Rewrite | verify | O(1) + Gap Detection + Verification Score | -| 2026-01-05 | Command Rewrite | design | O(1) + Mockup Status + Tool Selection | -| 2026-01-05 | Command Rewrite | verify-tests | O(1) + Test Dashboard + Coverage Tracking | -| 2026-01-05 | Command Rewrite | implement | O(1) + Pattern Detection + TestTags | -| 2026-01-05 | Command Rewrite | client | O(1) + Pattern Detection | -| 2026-01-05 | Command Rewrite | feature | O(1) + Pattern Detection + TestTags | -| 2026-01-03 | Auth mockups | auth | Generated PROMPTS.md + design-tokens.json | -| 2026-01-03 | MCP integration | design | Added tool selection, installed stitch-ai | -| 2026-01-03 | Commands README | commands | Full reference with all sub-commands | -| 2026-01-03 | Sub-section support | gap-analysis | Added {layer} {sub-section} syntax | - ---- - -## Quick Context for Next Session - -### Key Files to Read -1. This file (`CURRENT_WORK.md`) -2. `.claude/commands/implement.md` - E2E implementation with **Phase 5 Test Stubs** -3. `.claude/commands/feature.md` - Feature layer with **Phase 3.5 Token Integration** -4. `.claude/commands/verify.md` - Verification with O(1) + **TestTag Validation** -5. `.claude/commands/design.md` - Design with O(1) + Mockup Status -6. `.claude/commands/verify-tests.md` - Test verification with O(1) -7. `TEST_STUBS_GUIDE.md` - TDD test stub reference -8. `core/testing/` - **NEW** Testing module with fakes, fixtures, TestTags -9. `design-spec-layer/DESIGN_TOKENS_INDEX.md` - O(1) token lookup -10. `client-layer/FEATURE_MAP.md` - Service/Repository mapping -11. `feature-layer/MODULES_INDEX.md` - Module inventory -12. `feature-layer/SCREENS_INDEX.md` - Screen inventory - -### Key Commands -- `/session-start` - Load this context -- `/gap-analysis` - Quick overview of all layers -- `/implement [feature]` - Full E2E implementation (updated) -- `/client [feature]` - Client layer only (updated) -- `/feature [feature]` - Feature layer only (updated) -- `/verify [feature]` - Verify implementation vs spec - -### O(1) Index Files (Core Context) -| File | Purpose | Lines | -|------|---------|:-----:| -| FEATURE_MAP.md | Service → Feature mapping | ~170 | -| MODULES_INDEX.md | All feature modules | ~115 | -| SCREENS_INDEX.md | All 63 screens | ~270 | -| API_INDEX.md | All API endpoints | ~400 | -| FEATURES_INDEX.md | All 17 features | ~100 | -| DESIGN_TOKENS_INDEX.md | **NEW** Design tokens per feature | ~150 | - -### Architecture Notes -- KMP: Android, iOS, Desktop, Web -- DI: Koin modules per feature -- Navigation: Jetbrains Compose Navigation -- Network: Ktorfit services -- State: MVI pattern (State, Event, Action) -- Testing: TestTags pattern (feature:component:id) - ---- - -## Resume Instructions - -1. Run `/session-start` to load context -2. Run `/gap-analysis` to see current status -3. Test new commands: - - `/implement` - Should show feature list with O(1 lookup - - `/client [feature]` - Should show service/repo status - - `/feature [feature]` - Should show module/screen status -4. Continue mockup generation with `/design home mockup` -5. Eventually test full E2E with `/implement [new-feature]` - ---- - -## Session History - -| Date | Focus | Outcome | -|------|-------|---------| -| 2026-01-05 | Phase 4: core:testing Module | Created core/testing/ with fakes, fixtures, TestTags ✅ | -| 2026-01-05 | Testing Layer (6th Layer) | Created testing-layer/ with O(1 indexes, patterns, templates | -| 2026-01-05 | Phase 3: Testing Automation | Test stubs in /implement, TestTag validation in /verify | -| 2026-01-05 | Phase 2: Design-Code Integration | Token integration in /feature, DESIGN_TOKENS_INDEX.md | -| 2026-01-05 | Phase 1: Command Rewrite | All 6 core commands now O(1): verify, design, verify-tests | -| 2026-01-05 | Command rewrite | /implement, /client, /feature with O(1) + patterns | -| 2026-01-03 | Mockup generation | Auth mockups done, MCP integrated, 2/17 complete | -| 2026-01-03 | Command refactoring | Created template system, 5-layer structure | - ---- - -## What's Next - -1. **Write First Tests**: Use `core:testing` module to write ViewModel tests for auth feature -2. **Continue Mockups**: Generate mockups for remaining 15 features (`/design home mockup`) -3. **Dashboard Feature**: After mockups, implement new dashboard -4. **Phase 5: Session Persistence** (gap-planning roadmap) - - Intelligent session checkpoints - - Context continuity across restarts -5. **Phase 6: Documentation Integration** (gap-planning roadmap) - - Auto-generate README updates - - Architecture diagram generation -6. **Migration**: Move claude-product-cycle to separate repo (after validation) diff --git a/claude-product-cycle/MIGRATION_PLAN.md b/claude-product-cycle/MIGRATION_PLAN.md deleted file mode 100644 index 712b63b54..000000000 --- a/claude-product-cycle/MIGRATION_PLAN.md +++ /dev/null @@ -1,560 +0,0 @@ -# Claude Product Cycle - Template Migration Plan - -## Overview - -Move claude-product-cycle architecture to `kmp-project-template` so all derived projects inherit the framework while maintaining project-specific implementations. - ---- - -## Current State - -``` -kmp-project-template/ # Base template (no claude-product-cycle) - ├── mifos-mobile/ # Has full claude-product-cycle - ├── mobile-wallet/ # No claude-product-cycle - ├── android-client/ # No claude-product-cycle - └── mifos-x-group-banking/ # No claude-product-cycle -``` - -## Target State - -``` -kmp-project-template/ -├── .claude/ -│ └── commands/ # Framework commands (parameterized) -├── claude-product-cycle/ -│ ├── _templates/ # Reusable templates -│ ├── _framework/ # Architecture documentation -│ └── PROJECT_SETUP.md # How to configure for a project -│ -├── mifos-mobile/ # Extends template -│ └── claude-product-cycle/ -│ ├── design-spec-layer/ # Project-specific specs -│ ├── server-layer/ # Project-specific APIs -│ ├── client-layer/ # Project-specific mappings -│ ├── feature-layer/ # Project-specific features -│ └── platform-layer/ # Project-specific platforms -``` - ---- - -## Architecture Decision - -### What Goes in Template (Reusable) - -| Component | Purpose | Sync Strategy | -|-----------|---------|---------------| -| Commands Framework | `/gap-analysis`, `/gap-planning`, etc. | Override in projects | -| Layer Templates | SPEC.md, API.md structure | Copy on init | -| Index Templates | FEATURES_INDEX.md structure | Generate per project | -| Testing Framework | Test patterns, TestTag system | Inherit | -| Architecture Docs | 5-layer lifecycle, patterns | Reference | - -### What Stays in Projects (Specific) - -| Component | Purpose | Example | -|-----------|---------|---------| -| Feature Specs | SPEC.md content | "Login with biometrics" | -| API Documentation | Actual endpoints | `/self/authentication` | -| Mockups | UI designs | Figma links, tokens | -| Implementation Status | Progress tracking | ✅/⚠️/❌ per feature | -| Feature List | Project features | auth, home, transfer... | - ---- - -## Proposed Directory Structure - -### Template Repository (`kmp-project-template`) - -``` -kmp-project-template/ -├── .claude/ -│ ├── commands/ -│ │ ├── gap-analysis.md # Parameterized framework -│ │ ├── gap-planning.md # Parameterized framework -│ │ ├── design.md # Parameterized framework -│ │ ├── implement.md # Parameterized framework -│ │ ├── verify.md # Parameterized framework -│ │ ├── verify-tests.md # Parameterized framework -│ │ ├── session-start.md # Session management -│ │ ├── session-end.md # Session management -│ │ └── projectstatus.md # Project overview -│ └── settings.json # Default Claude settings -│ -├── claude-product-cycle/ -│ ├── _framework/ -│ │ ├── 5-LAYER-LIFECYCLE.md # Architecture overview -│ │ ├── O1-LOOKUP-PATTERN.md # Index file strategy -│ │ ├── COMMAND-REFERENCE.md # All commands explained -│ │ └── TESTING-STRATEGY.md # TDD approach -│ │ -│ ├── _templates/ -│ │ ├── design-spec-layer/ -│ │ │ ├── FEATURES_INDEX.template.md -│ │ │ ├── MOCKUPS_INDEX.template.md -│ │ │ ├── TESTING_STATUS.template.md -│ │ │ └── feature/ -│ │ │ ├── SPEC.template.md -│ │ │ ├── API.template.md -│ │ │ └── STATUS.template.md -│ │ │ -│ │ ├── server-layer/ -│ │ │ ├── API_INDEX.template.md -│ │ │ ├── API_REFERENCE.template.md -│ │ │ ├── TESTING_STATUS.template.md -│ │ │ └── endpoints/ -│ │ │ └── CATEGORY.template.md -│ │ │ -│ │ ├── client-layer/ -│ │ │ ├── FEATURE_MAP.template.md -│ │ │ ├── LAYER_STATUS.template.md -│ │ │ └── TESTING_STATUS.template.md -│ │ │ -│ │ ├── feature-layer/ -│ │ │ ├── MODULES_INDEX.template.md -│ │ │ ├── SCREENS_INDEX.template.md -│ │ │ ├── LAYER_STATUS.template.md -│ │ │ └── TESTING_STATUS.template.md -│ │ │ -│ │ ├── platform-layer/ -│ │ │ ├── LAYER_STATUS.template.md -│ │ │ ├── TESTING_STATUS.template.md -│ │ │ └── platforms/ -│ │ │ ├── ANDROID.template.md -│ │ │ ├── IOS.template.md -│ │ │ ├── DESKTOP.template.md -│ │ │ └── WEB.template.md -│ │ │ -│ │ └── gap-analysis/ -│ │ ├── dashboard.template.md -│ │ └── layer-*.template.md -│ │ -│ ├── PROJECT_CONFIG.md # How to configure -│ ├── SYNC_GUIDE.md # How to sync updates -│ └── CHANGELOG.md # Version history -│ -└── CLAUDE.md # References claude-product-cycle -``` - -### Derived Project (`mifos-mobile`, `mobile-wallet`, etc.) - -``` -mifos-mobile/ -├── .claude/ -│ ├── commands/ # Can override template commands -│ │ └── custom-command.md # Project-specific commands -│ └── settings.json # Project-specific settings -│ -├── claude-product-cycle/ -│ ├── PROJECT.md # Project identity & config -│ │ - name: "Mifos Mobile" -│ │ - type: "Self-Service Banking" -│ │ - features: [auth, home, accounts, ...] -│ │ - api_base: "https://server/fineract-provider/api/v1/self/" -│ │ -│ ├── design-spec-layer/ -│ │ ├── FEATURES_INDEX.md # Generated from template -│ │ ├── MOCKUPS_INDEX.md # Project-specific content -│ │ ├── STATUS.md -│ │ ├── TESTING_STATUS.md -│ │ └── features/ -│ │ ├── auth/ -│ │ │ ├── SPEC.md # Project-specific -│ │ │ ├── API.md # Project-specific -│ │ │ ├── STATUS.md -│ │ │ └── mockups/ -│ │ ├── home/ -│ │ └── ... (all project features) -│ │ -│ ├── server-layer/ -│ │ ├── API_INDEX.md # Project-specific endpoints -│ │ ├── API_REFERENCE.md -│ │ ├── TESTING_STATUS.md -│ │ └── endpoints/ # Project-specific -│ │ -│ ├── client-layer/ -│ │ ├── FEATURE_MAP.md # Project-specific mappings -│ │ ├── LAYER_STATUS.md -│ │ └── TESTING_STATUS.md -│ │ -│ ├── feature-layer/ -│ │ ├── MODULES_INDEX.md # Project-specific modules -│ │ ├── SCREENS_INDEX.md # Project-specific screens -│ │ ├── LAYER_STATUS.md -│ │ └── TESTING_STATUS.md -│ │ -│ └── platform-layer/ -│ ├── LAYER_STATUS.md # Project-specific -│ ├── TESTING_STATUS.md -│ └── platforms/ -│ -└── CLAUDE.md # Project-specific instructions -``` - ---- - -## Project Configuration (`PROJECT.md`) - -Each derived project has a `PROJECT.md` that configures the framework: - -```markdown -# Project Configuration - -## Identity - -| Key | Value | -|-----|-------| -| name | Mifos Mobile | -| type | Self-Service Banking | -| repo | openMF/mifos-mobile | -| template_version | 1.0.0 | - -## API Configuration - -| Key | Value | -|-----|-------| -| base_url | https://{server}/fineract-provider/api/v1/self/ | -| auth_type | Basic + Tenant Header | -| demo_server | tt.mifos.community | -| demo_user | maria / password | - -## Features - -| # | Feature | Design Dir | Feature Dir | -|:-:|---------|------------|-------------| -| 1 | auth | features/auth/ | feature/auth/ | -| 2 | home | features/home/ | feature/home/ | -| ... | ... | ... | ... | - -## Platforms - -| Platform | Module | Status | -|----------|--------|--------| -| Android | cmp-android | Primary | -| iOS | cmp-ios | CocoaPods | -| Desktop | cmp-desktop | JVM | -| Web | cmp-web | Experimental | -``` - ---- - -## Command Parameterization - -Commands in template read from `PROJECT.md` to adapt behavior: - -### Template Command (gap-analysis.md) - -```markdown -# Gap Analysis Command - -## Instructions - -### Step 0: Read Project Config - -Read `claude-product-cycle/PROJECT.md` to get: -- Feature list -- API base URL -- Platform configuration - -### Step 1: Read O(1) Index Files -[... rest of command using project config ...] -``` - -### Override Mechanism - -Projects can override commands by creating same file in `.claude/commands/`: - -``` -Template: kmp-project-template/.claude/commands/gap-analysis.md -Override: mifos-mobile/.claude/commands/gap-analysis.md (takes precedence) -``` - ---- - -## Sync Strategy - -### Option A: Git Subtree (Recommended) - -```bash -# In derived project, add template as subtree -git subtree add --prefix=claude-product-cycle/_framework \ - https://github.com/openMF/kmp-project-template.git \ - main --squash - -# Pull updates from template -git subtree pull --prefix=claude-product-cycle/_framework \ - https://github.com/openMF/kmp-project-template.git \ - main --squash -``` - -**Pros**: -- Single repo, no submodule complexity -- Can modify locally if needed -- Easy to pull updates - -**Cons**: -- Subtree history can get messy -- Manual pull required - -### Option B: Git Submodule - -```bash -# Add template as submodule -git submodule add https://github.com/openMF/kmp-project-template.git \ - claude-product-cycle/_framework - -# Update submodule -git submodule update --remote -``` - -**Pros**: -- Clear separation -- Explicit versioning - -**Cons**: -- Submodule complexity -- Extra clone steps - -### Option C: Copy + Version Tag (Simplest) - -```bash -# Copy template files on setup -cp -r kmp-project-template/claude-product-cycle/_framework/ \ - mifos-mobile/claude-product-cycle/_framework/ - -# Track version in PROJECT.md -template_version: 1.0.0 -``` - -**Pros**: -- Simplest to understand -- No git complexity - -**Cons**: -- Manual sync -- Can diverge - -### Recommendation: Option A (Git Subtree) - -Best balance of simplicity and maintainability. - ---- - -## Migration Steps - -### Phase 1: Prepare Template (Week 1) - -1. **Create framework docs in template** - ```bash - mkdir -p kmp-project-template/claude-product-cycle/_framework - mkdir -p kmp-project-template/claude-product-cycle/_templates - ``` - -2. **Extract reusable content from mifos-mobile** - - Copy command files to template - - Parameterize hardcoded values - - Create template files with `{{PLACEHOLDER}}` - -3. **Create PROJECT_CONFIG.md template** - -4. **Test in template repo** - -### Phase 2: Migrate mifos-mobile (Week 2) - -1. **Restructure claude-product-cycle** - ```bash - # Move framework to _framework/ - # Keep project-specific in layer folders - ``` - -2. **Create PROJECT.md with mifos-mobile config** - -3. **Update commands to read from PROJECT.md** - -4. **Verify all commands work** - -### Phase 3: Rollout to Other Projects (Week 3-4) - -1. **mobile-wallet (mifos-pay)** - - Clone template structure - - Create PROJECT.md - - Generate initial index files - - Add feature specs - -2. **android-client (field officer)** - - Same process - -3. **mifos-x-group-banking** - - Same process - -### Phase 4: Establish Sync Process (Week 5) - -1. **Document sync procedure** -2. **Create GitHub Action for version check** -3. **Add CHANGELOG.md to template** - ---- - -## Project-Specific Customizations - -### mifos-mobile (Self-Service) - -| Aspect | Value | -|--------|-------| -| User Type | End User (Client) | -| API Prefix | `/self/` | -| Features | 17 (auth, accounts, transfer, etc.) | -| Auth | Username/Password + Passcode | - -### mobile-wallet (Mifos Pay) - -| Aspect | Value | -|--------|-------| -| User Type | Wallet User | -| API Prefix | `/wallet/` (different API) | -| Features | wallet, send, receive, history, etc. | -| Auth | Phone + OTP | - -### android-client (Field Officer) - -| Aspect | Value | -|--------|-------| -| User Type | Staff (Field Officer) | -| API Prefix | `/` (full API access) | -| Features | clients, loans, groups, collections, etc. | -| Auth | Username/Password + Staff permissions | - -### mifos-x-group-banking - -| Aspect | Value | -|--------|-------| -| User Type | Group Leader | -| API Prefix | `/groups/` | -| Features | groups, meetings, attendance, collections | -| Auth | Username/Password + Group permissions | - ---- - -## Template Versioning - -```markdown -# CHANGELOG.md (in template) - -## [1.1.0] - 2025-02-01 -### Added -- Testing documentation templates -- /verify-tests command - -### Changed -- Improved gap-analysis comprehensive view - -## [1.0.0] - 2025-01-05 -### Added -- Initial 5-layer lifecycle framework -- O(1) lookup pattern -- All command templates -``` - -### Version Compatibility - -| Template Version | mifos-mobile | mobile-wallet | android-client | -|------------------|--------------|---------------|----------------| -| 1.0.0 | ✅ | - | - | -| 1.1.0 | ✅ | ✅ | - | - ---- - -## Files to Create in Template - -### Priority 1: Framework Documentation - -| File | Purpose | Lines | -|------|---------|:-----:| -| `_framework/5-LAYER-LIFECYCLE.md` | Core architecture | ~150 | -| `_framework/O1-LOOKUP-PATTERN.md` | Index strategy | ~100 | -| `_framework/COMMAND-REFERENCE.md` | All commands | ~200 | -| `_framework/TESTING-STRATEGY.md` | TDD approach | ~150 | - -### Priority 2: Templates - -| File | Purpose | -|------|---------| -| `_templates/design-spec-layer/*.template.md` | Design layer templates | -| `_templates/server-layer/*.template.md` | Server layer templates | -| `_templates/client-layer/*.template.md` | Client layer templates | -| `_templates/feature-layer/*.template.md` | Feature layer templates | -| `_templates/platform-layer/*.template.md` | Platform layer templates | - -### Priority 3: Commands - -| File | Purpose | -|------|---------| -| `.claude/commands/gap-analysis.md` | Parameterized | -| `.claude/commands/gap-planning.md` | Parameterized | -| `.claude/commands/design.md` | Parameterized | -| `.claude/commands/implement.md` | Parameterized | -| `.claude/commands/verify.md` | Parameterized | - ---- - -## Success Criteria - -### Template - -- [ ] All framework docs in `_framework/` -- [ ] All templates in `_templates/` -- [ ] Parameterized commands in `.claude/commands/` -- [ ] PROJECT_CONFIG.md template -- [ ] SYNC_GUIDE.md documentation - -### Each Derived Project - -- [ ] PROJECT.md configured -- [ ] Feature specs in design-spec-layer -- [ ] API docs in server-layer -- [ ] Index files generated -- [ ] Commands working with project config - ---- - -## Open Questions - -1. **Command Override Strategy** - - Should projects fully override commands or extend them? - - How to handle project-specific commands? - -2. **Sync Frequency** - - How often should projects sync from template? - - Breaking change policy? - -3. **Feature Naming** - - Standardize feature names across projects? - - Or allow project-specific naming? - -4. **Testing** - - Should test framework be in template? - - Or project-specific? - ---- - -## Next Steps - -1. Review this plan -2. Decide on sync strategy (subtree vs submodule vs copy) -3. Start Phase 1: Prepare template -4. Create PR to kmp-project-template - ---- - -## Commands After Migration - -```bash -# In any derived project -/gap-analysis # Reads PROJECT.md, shows project-specific status -/gap-planning design # Plans based on project features -/implement auth # Implements based on project specs - -# Sync from template -git subtree pull --prefix=claude-product-cycle/_framework \ - https://github.com/openMF/kmp-project-template.git main --squash -``` diff --git a/claude-product-cycle/PRODUCT_MAP.md b/claude-product-cycle/PRODUCT_MAP.md deleted file mode 100644 index 2bf47d5d1..000000000 --- a/claude-product-cycle/PRODUCT_MAP.md +++ /dev/null @@ -1,354 +0,0 @@ -# PRODUCT MAP - Mifos Mobile - -> **Purpose**: Central navigation hub for feature development across sessions -> **Last Updated**: 2025-12-30 -> **Current Focus**: Design Layer Refinement (2025 Fintech Patterns) - ---- - -## Quick Resume Commands - -```bash -# Full 5-layer gap analysis dashboard -/gap-analysis - -# Layer-specific analysis -/gap-analysis design # Design layer (SPEC, MOCKUP, API docs) -/gap-analysis server # Server layer (Fineract endpoints) -/gap-analysis client # Client layer (Network, Data) -/gap-analysis feature # Feature layer (ViewModel, Screen) -/gap-analysis platform # Platform layer (Android, iOS, Desktop, Web) - -# Feature-specific analysis (all 5 layers) -/gap-analysis [feature-name] - -# Plan improvements -/gap-planning [feature-name] - -# Continue design work on specific feature -/design [feature-name] - -# Implement after design is approved -/implement [feature-name] - -# Verify implementation matches spec -/verify [feature-name] - -# Check current status -/projectstatus -``` - ---- - -## Feature Registry - -### Core Features (16 Total) - -| # | Feature | Design | Mockup | Client | UI | Status | -|---|---------|--------|--------|--------|-----|--------| -| 1 | **auth** | ✅ | ✅ v2.0 | ✅ | ✅ | Mockup Redesigned | -| 2 | **home** | ✅ | ✅ v2.0 | ✅ | ✅ | Mockup Redesigned | -| 3 | **accounts** | ✅ | ✅ v2.0 | ✅ | ✅ | Mockup Redesigned | -| 4 | **savings-account** | ✅ | ✅ v2.0 | ✅ | ✅ | Mockup Redesigned | -| 5 | **loan-account** | ✅ | ✅ v2.0 | ✅ | ✅ | Mockup Redesigned | -| 6 | **share-account** | ✅ | ✅ v2.0 | ✅ | ✅ | Mockup Redesigned | -| 7 | **beneficiary** | ✅ | ✅ v2.0 | ✅ | ✅ | Mockup Redesigned | -| 8 | **transfer** | ✅ | ✅ v2.0 | ✅ | ✅ | Mockup Redesigned | -| 9 | **recent-transaction** | ✅ | ✅ v2.0 | ✅ | ✅ | Mockup Redesigned | -| 10 | **notification** | ✅ | ✅ v2.0 | ✅ | ✅ | Mockup Redesigned | -| 11 | **settings** | ✅ | ✅ v2.0 | - | ✅ | Mockup Redesigned | -| 12 | **passcode** | ✅ | ✅ v2.0 | - | ✅ | Mockup Redesigned | -| 13 | **guarantor** | ✅ | ✅ v2.0 | ✅ | ✅ | Mockup Redesigned | -| 14 | **qr** | ✅ | ✅ v2.0 | - | ✅ | Mockup Redesigned | -| 15 | **location** | ✅ | ✅ v2.0 | - | ✅ | Mockup Redesigned | -| 16 | **client-charge** | ✅ | ✅ v2.0 | ✅ | ✅ | Mockup Redesigned | - -### New Features (Planned) - -| # | Feature | Design | Mockup | Client | UI | Status | -|---|---------|--------|--------|--------|-----|--------| -| 17 | **dashboard** | ✅ | ✅ v2.0 | ✅ | ❌ | Mockup Redesigned | - ---- - -## 5-Layer Product Lifecycle - -``` -┌─────────────────────────────────────────────────────────────┐ -│ PRODUCT LIFECYCLE │ -├─────────────────────────────────────────────────────────────┤ -│ │ -│ 1. DESIGN LAYER → SPEC + MOCKUP + API documentation │ -│ ↓ │ -│ 2. SERVER LAYER → Fineract API endpoints (actual) │ -│ ↓ │ -│ 3. CLIENT LAYER → Network services, Repositories │ -│ ↓ │ -│ 4. FEATURE LAYER → ViewModels, Screens, Navigation │ -│ ↓ │ -│ 5. PLATFORM LAYER → Android, iOS, Desktop, Web │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - -## Layer Definitions - -### 1. Design Layer (`/design`, `/gap-analysis design`) -**Location**: `claude-product-cycle/design-spec-layer/` - -| Component | Location | Purpose | -|-----------|----------|---------| -| SPEC.md | `features/[feature]/SPEC.md` | Requirements, user stories | -| MOCKUP.md | `features/[feature]/MOCKUP.md` | UI/UX designs, v2.0 patterns | -| API.md | `features/[feature]/API.md` | Endpoint definitions | -| STATUS.md | `features/[feature]/STATUS.md` | Implementation status | -| mockup-tools/ | `mockup-tools/` | Figma plugin, templates | - -### 2. Server Layer (`/gap-analysis server`) -**Location**: `claude-product-cycle/server-layer/` - -| Component | Location | Purpose | -|-----------|----------|---------| -| FINERACT_API.md | `server-layer/FINERACT_API.md` | All available endpoints | -| Base URL | `https://tt.mifos.community/fineract-provider/api/v1/self/` | Demo server | - -### 3. Client Layer (`/client`, `/gap-analysis client`) -**Location**: `core/network/` + `core/data/` - -| Component | Location | -|-----------|----------| -| API Service | `core/network/services/[Feature]Service.kt` | -| Repository | `core/data/repository/[Feature]Repository.kt` | -| Models | `core/model/[feature]/` | - -### 4. Feature Layer (`/feature`, `/gap-analysis feature`) -**Location**: `feature/[feature]/` - -| Component | Location | -|-----------|----------| -| ViewModel | `feature/[feature]/src/.../viewmodel/` | -| Screen | `feature/[feature]/src/.../ui/` | -| Navigation | `cmp-navigation/src/.../navigation/` | -| DI Module | `feature/[feature]/src/.../di/` | - -### 5. Platform Layer (`/gap-analysis platform`) -**Location**: `cmp-android/`, `cmp-ios/`, `cmp-desktop/`, `cmp-web/` - -| Platform | Module | Status | -|----------|--------|--------| -| 🤖 Android | `cmp-android/` | Production Ready | -| 🍎 iOS | `cmp-ios/` | Production Ready | -| 🖥️ Desktop | `cmp-desktop/` | Beta | -| 🌐 Web | `cmp-web/` | Alpha | - ---- - -## Current Work Session - -### In Progress: Design Layer Enhancement - -**Goal**: Upgrade all mockups to 2025 professional fintech standards - -**Reference Sources**: -- [Finix Banking UI Kit](https://dribbble.com/shots/25774459-Finix-Mobile-Banking-UI-Kit) -- [Purrweb Best Practices](https://www.purrweb.com/blog/banking-app-design/) -- [Mobbin Revolut](https://mobbin.com/explore/screens/d66df812-03a0-447f-879b-165318d669c8) - -**2025 Patterns to Add**: -| Pattern | Priority | Features Affected | -|---------|----------|-------------------| -| Spending Analytics Chart | High | home, accounts | -| Recent Recipients (P2P) | High | home, transfer | -| Upcoming Bills Section | High | home | -| AI Assistant Entry Point | Medium | home | -| Gamification Elements | Medium | home, savings-account | -| Quick Amount Shortcuts | Medium | transfer | -| Card Freeze Quick Action | Low | home, settings | - -### Todo Queue - -1. ⏳ **home** - Add 2025 enhancements section (IN PROGRESS) -2. ⬚ **accounts** - Add spending analytics integration -3. ⬚ **transfer** - Add quick amounts, recent recipients -4. ⬚ **dashboard** - Create full MOCKUP.md (NEW FEATURE) -5. ⬚ Remaining 12 features - Review and polish - ---- - -## Feature Dependencies - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ NAVIGATION GRAPH │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ROOT_GRAPH │ -│ │ │ -│ ├── AUTH_GRAPH │ -│ │ └── auth ──────────────────────────┐ │ -│ │ │ │ -│ ├── PASSCODE_GRAPH │ │ -│ │ └── passcode ◄─────────────────────┘ │ -│ │ │ │ -│ │ ▼ │ -│ └── MAIN_GRAPH ◄─────────────────────────────────────── │ -│ │ │ -│ ├── home (Tab 1) ─────────────────────────────┐ │ -│ │ ├── → accounts │ │ -│ │ ├── → transfer │ │ -│ │ ├── → notification │ │ -│ │ └── → qr │ │ -│ │ │ │ -│ ├── accounts (Tab 2) ──────────────────────────┤ │ -│ │ ├── → savings-account │ │ -│ │ ├── → loan-account │ │ -│ │ └── → share-account │ │ -│ │ │ │ -│ ├── transfer (FAB) ────────────────────────────┤ │ -│ │ └── → beneficiary │ │ -│ │ │ │ -│ └── profile (Tab 4) ───────────────────────────┘ │ -│ ├── → settings │ -│ ├── → client-charge │ -│ ├── → recent-transaction │ -│ ├── → guarantor │ -│ └── → location │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - ---- - -## File Paths Quick Reference - -### Design Specs -``` -claude-product-cycle/design-spec-layer/ -├── _shared/ -│ └── COMPONENTS.md # Shared design system -├── features/ -│ ├── auth/ -│ │ ├── SPEC.md -│ │ ├── API.md -│ │ ├── MOCKUP.md -│ │ └── STATUS.md -│ ├── home/ -│ │ ├── SPEC.md -│ │ ├── API.md -│ │ ├── MOCKUP.md # 🔄 Enhancing with 2025 patterns -│ │ └── STATUS.md -│ ├── accounts/ -│ ├── savings-account/ -│ ├── loan-account/ -│ ├── share-account/ -│ ├── beneficiary/ -│ ├── transfer/ -│ ├── recent-transaction/ -│ ├── notification/ -│ ├── settings/ -│ ├── passcode/ -│ ├── guarantor/ -│ ├── qr/ -│ ├── location/ -│ ├── client-charge/ -│ └── dashboard/ # 📋 Needs MOCKUP.md -└── STATUS.md # Master status tracker -``` - -### Implementation -``` -feature/ -├── auth/ -├── home/ -├── account/ # accounts feature -├── savings-account/ -├── loan-account/ -├── share-account/ -├── beneficiary/ -├── transfer-process/ # transfer feature -├── recent-transaction/ -├── notification/ -├── settings/ -├── guarantor/ -├── qr-code/ # qr feature -├── location/ -└── user-profile/ # includes client-charge - -core/ -├── network/services/ # API services -├── data/repository/ # Repositories -└── model/ # Domain models -``` - ---- - -## Resume Instructions - -When resuming work after context compaction: - -### 1. Read This File First -``` -Read: claude-product-cycle/PRODUCT_MAP.md -``` - -### 2. Check Current Session Status -``` -Look at "Current Work Session" section above -``` - -### 3. Continue From Todo Queue -``` -Pick the first ⏳ or ⬚ item and continue -``` - -### 4. For Design Work -``` -Read: claude-product-cycle/design-spec-layer/_shared/COMPONENTS.md -Read: claude-product-cycle/design-spec-layer/features/[feature]/MOCKUP.md -``` - -### 5. For Implementation Work -``` -Read: claude-product-cycle/design-spec-layer/features/[feature]/SPEC.md -Read: claude-product-cycle/design-spec-layer/features/[feature]/API.md -``` - ---- - -## Design System Quick Reference - -### Color Palette -| Name | Light | Dark | Usage | -|------|-------|------|-------| -| Primary Gradient | #667EEA → #764BA2 | Same (85%) | Hero cards, CTAs | -| Secondary Gradient | #11998E → #38EF7D | Same | Success, savings | -| Accent Gradient | #FC466B → #3F5EFB | Same | Alerts, special | -| Success | #00D09C | #00D09C | Positive amounts | -| Error | #FF4757 | #FF4757 | Negative, urgent | -| Warning | #FFB800 | #FFB800 | Pending states | - -### Typography -| Style | Size | Weight | Usage | -|-------|------|--------|-------| -| Display | 36sp | ExtraBold | Balance amounts | -| Headline | 20sp | Bold | Section titles | -| Body | 14sp | Regular | Content text | -| Label | 12sp | Medium | Captions, badges | - -### Spacing -| Token | Value | -|-------|-------| -| xs | 4dp | -| sm | 8dp | -| md | 12dp | -| lg | 16dp | -| xl | 20dp | -| xxl | 24dp | - ---- - -## Changelog - -| Date | Change | -|------|--------| -| 2025-12-30 | Created PRODUCT_MAP.md for session continuity | diff --git a/claude-product-cycle/TEST_STUBS_GUIDE.md b/claude-product-cycle/TEST_STUBS_GUIDE.md deleted file mode 100644 index 0bb502afe..000000000 --- a/claude-product-cycle/TEST_STUBS_GUIDE.md +++ /dev/null @@ -1,535 +0,0 @@ -# Test Stubs Guide - -> Auto-generated test scaffolding for TDD support in `/implement` command - ---- - -## Overview - -The `/implement` command automatically generates test stubs (Phase 5) to support Test-Driven Development. This guide explains the generated files, how to use them, and best practices. - ---- - -## Generated Test Files - -When running `/implement [feature]`, the following test files are created: - -``` -feature/[feature]/ -├── src/ -│ ├── commonTest/kotlin/org/mifos/mobile/feature/[feature]/ -│ │ ├── [Feature]ViewModelTest.kt # ViewModel unit tests -│ │ └── fake/ -│ │ └── Fake[Feature]Repository.kt # Test double -│ │ -│ └── androidInstrumentedTest/kotlin/org/mifos/mobile/feature/[feature]/ -│ └── [Feature]ScreenTest.kt # Compose UI tests -``` - ---- - -## Test Patterns - -### 1. ViewModel Test Pattern - -```kotlin -class ${Feature}ViewModelTest { - // Rule for coroutine testing - private val mainDispatcherRule = MainDispatcherRule() - - private lateinit var viewModel: ${Feature}ViewModel - private lateinit var fakeRepository: Fake${Feature}Repository - - @BeforeTest - fun setup() { - fakeRepository = Fake${Feature}Repository() - viewModel = ${Feature}ViewModel(repository = fakeRepository) - } - - // Test Categories: - // 1. Initial State Tests - @Test - fun `initial state is loading`() = runTest { - viewModel.stateFlow.test { - val state = awaitItem() - assertTrue(state.uiState is ${Feature}ScreenState.Loading) - } - } - - // 2. Success State Tests - @Test - fun `data loaded successfully shows success state`() = runTest { - fakeRepository.setSuccessResponse(testData) - viewModel.loadData() - - viewModel.stateFlow.test { - val state = expectMostRecentItem() - assertTrue(state.uiState is ${Feature}ScreenState.Success) - } - } - - // 3. Error State Tests - @Test - fun `data load failure shows error state`() = runTest { - fakeRepository.setErrorResponse("Network error") - viewModel.loadData() - - viewModel.stateFlow.test { - val state = expectMostRecentItem() - assertTrue(state.uiState is ${Feature}ScreenState.Error) - } - } - - // 4. Action Tests - @Test - fun `action updates state correctly`() = runTest { - viewModel.trySendAction(${Feature}Action.SomeAction) - - viewModel.stateFlow.test { - // Verify state change - } - } - - // 5. Event Tests - @Test - fun `action triggers navigation event`() = runTest { - viewModel.trySendAction(${Feature}Action.ItemClicked(id)) - - viewModel.eventFlow.test { - assertEquals(${Feature}Event.NavigateToDetail(id), awaitItem()) - } - } -} -``` - -### 2. Screen Test Pattern - -```kotlin -class ${Feature}ScreenTest { - @get:Rule - val composeTestRule = createComposeRule() - - // Test Categories: - // 1. Loading State - @Test - fun loadingState_displaysLoadingIndicator() { - val state = ${Feature}State(uiState = ${Feature}ScreenState.Loading) - - composeTestRule.setContent { - ${Feature}Content(state = state, onAction = {}) - } - - composeTestRule - .onNodeWithTag(${Feature}TestTags.LOADING) - .assertIsDisplayed() - } - - // 2. Success State - @Test - fun successState_displaysContent() { - val state = ${Feature}State( - uiState = ${Feature}ScreenState.Success(testData) - ) - - composeTestRule.setContent { - ${Feature}Content(state = state, onAction = {}) - } - - composeTestRule - .onNodeWithTag(${Feature}TestTags.SCREEN) - .assertIsDisplayed() - composeTestRule - .onNodeWithTag(${Feature}TestTags.LIST) - .assertIsDisplayed() - } - - // 3. Error State - @Test - fun errorState_displaysErrorMessage() { - val state = ${Feature}State( - uiState = ${Feature}ScreenState.Error("Network error") - ) - - composeTestRule.setContent { - ${Feature}Content(state = state, onAction = {}) - } - - composeTestRule - .onNodeWithTag(${Feature}TestTags.ERROR) - .assertIsDisplayed() - composeTestRule - .onNodeWithText("Network error") - .assertIsDisplayed() - } - - // 4. Empty State - @Test - fun emptyState_displaysEmptyMessage() { - val state = ${Feature}State( - uiState = ${Feature}ScreenState.Success(emptyList()) - ) - - composeTestRule.setContent { - ${Feature}Content(state = state, onAction = {}) - } - - composeTestRule - .onNodeWithTag(${Feature}TestTags.EMPTY) - .assertIsDisplayed() - } - - // 5. User Interaction - @Test - fun itemClick_triggersAction() { - var actionReceived: ${Feature}Action? = null - val state = ${Feature}State( - uiState = ${Feature}ScreenState.Success(testData) - ) - - composeTestRule.setContent { - ${Feature}Content( - state = state, - onAction = { actionReceived = it } - ) - } - - composeTestRule - .onNodeWithTag("${feature}:item:1") - .performClick() - - assertEquals(${Feature}Action.ItemClicked(1), actionReceived) - } -} -``` - -### 3. Fake Repository Pattern - -```kotlin -class Fake${Feature}Repository : ${Feature}Repository { - // Call tracking - var loadCallCount = 0 - private set - - // Configurable response - private var response: DataState> = DataState.Loading - - // Setup methods - fun setSuccessResponse(data: List<${Model}>) { - response = DataState.Success(data) - } - - fun setErrorResponse(message: String) { - response = DataState.Error(message) - } - - fun setEmptyResponse() { - response = DataState.Success(emptyList()) - } - - fun setLoadingState() { - response = DataState.Loading - } - - // Repository implementation - override fun get${Feature}(): Flow>> = flow { - loadCallCount++ - emit(response) - } - - // Reset for test isolation - fun reset() { - loadCallCount = 0 - response = DataState.Loading - } -} -``` - ---- - -## TestTag Convention - -### Naming Pattern - -``` -{feature}:{component}:{identifier} -``` - -### Standard Tags - -| Component | Pattern | Example | -|-----------|---------|---------| -| Screen container | `{feature}:screen` | `beneficiary:screen` | -| Loading indicator | `{feature}:loading` | `beneficiary:loading` | -| Error container | `{feature}:error` | `beneficiary:error` | -| Empty state | `{feature}:empty` | `beneficiary:empty` | -| List container | `{feature}:list` | `beneficiary:list` | -| List item | `{feature}:item:{id}` | `beneficiary:item:123` | -| Action button | `{feature}:{action}` | `beneficiary:add` | -| Retry button | `{feature}:retry` | `beneficiary:retry` | -| Input field | `{feature}:input:{name}` | `auth:input:username` | -| Form submit | `{feature}:submit` | `auth:submit` | - -### TestTags Object - -Each feature should have a TestTags object: - -```kotlin -object ${Feature}TestTags { - const val SCREEN = "${feature}:screen" - const val LOADING = "${feature}:loading" - const val ERROR = "${feature}:error" - const val EMPTY = "${feature}:empty" - const val LIST = "${feature}:list" - const val RETRY = "${feature}:retry" - - fun item(id: Long) = "${feature}:item:$id" -} -``` - -### Applying TestTags - -```kotlin -@Composable -fun ${Feature}Screen(...) { - Scaffold( - modifier = Modifier.testTag(${Feature}TestTags.SCREEN) - ) { - when (state.uiState) { - is Loading -> LoadingIndicator( - modifier = Modifier.testTag(${Feature}TestTags.LOADING) - ) - is Error -> ErrorView( - modifier = Modifier.testTag(${Feature}TestTags.ERROR) - ) - is Success -> ContentList( - modifier = Modifier.testTag(${Feature}TestTags.LIST) - ) - } - } -} -``` - ---- - -## Test Dependencies - -### build.gradle.kts - -```kotlin -kotlin { - sourceSets { - commonTest.dependencies { - implementation(kotlin("test")) - implementation(libs.kotlinx.coroutines.test) - implementation(libs.turbine) - } - - androidInstrumentedTest.dependencies { - implementation(libs.compose.ui.test.junit4) - implementation(libs.compose.ui.test.manifest) - } - } -} -``` - -### Key Libraries - -| Library | Purpose | Usage | -|---------|---------|-------| -| `kotlin-test` | Assertions | `assertEquals`, `assertTrue` | -| `kotlinx-coroutines-test` | Coroutine testing | `runTest`, `TestDispatcher` | -| `turbine` | Flow testing | `stateFlow.test { }` | -| `compose-ui-test` | Compose UI testing | `onNodeWithTag`, `performClick` | - ---- - -## Test Execution - -### Run Commands - -```bash -# Run all tests for a feature -./gradlew :feature:${feature}:test - -# Run ViewModel tests only (commonTest) -./gradlew :feature:${feature}:jvmTest - -# Run Screen tests (Android instrumented) -./gradlew :feature:${feature}:connectedAndroidTest - -# Run with coverage -./gradlew :feature:${feature}:test jacocoTestReport -``` - -### CI Integration - -```yaml -# .github/workflows/test.yml -- name: Run Unit Tests - run: ./gradlew testDebug - -- name: Run UI Tests - run: ./gradlew connectedAndroidTest -``` - ---- - -## TDD Workflow - -### Red-Green-Refactor - -``` -1. WRITE FAILING TEST (Red) - └─ Generated stub has TODO assertions - └─ Test fails because implementation is incomplete - -2. IMPLEMENT (Green) - └─ Write minimum code to pass - └─ Fill in ViewModel/Screen logic - -3. REFACTOR (Clean) - └─ Improve code quality - └─ Keep tests passing - -4. VERIFY - └─ Run /verify [feature] - └─ Check TestTag validation -``` - -### Stub Completion Checklist - -After `/implement` generates stubs: - -- [ ] Fill in test data fixtures -- [ ] Complete assertion logic (replace TODOs) -- [ ] Add edge case tests -- [ ] Verify all TestTags are applied -- [ ] Run tests to confirm passing -- [ ] Update TESTING_STATUS.md - ---- - -## Common Test Scenarios - -### 1. Pagination Test - -```kotlin -@Test -fun `load more appends to list`() = runTest { - fakeRepository.setSuccessResponse(page1Data) - viewModel.loadData() - - fakeRepository.setSuccessResponse(page2Data) - viewModel.trySendAction(${Feature}Action.LoadMore) - - viewModel.stateFlow.test { - val state = expectMostRecentItem() - val data = (state.uiState as Success).data - assertEquals(page1Data + page2Data, data) - } -} -``` - -### 2. Pull-to-Refresh Test - -```kotlin -@Test -fun `refresh replaces data`() = runTest { - fakeRepository.setSuccessResponse(oldData) - viewModel.loadData() - - fakeRepository.setSuccessResponse(newData) - viewModel.trySendAction(${Feature}Action.Refresh) - - viewModel.stateFlow.test { - val state = expectMostRecentItem() - val data = (state.uiState as Success).data - assertEquals(newData, data) - } -} -``` - -### 3. Form Validation Test - -```kotlin -@Test -fun `invalid input shows validation error`() = runTest { - viewModel.trySendAction(${Feature}Action.Submit(invalidInput)) - - viewModel.stateFlow.test { - val state = expectMostRecentItem() - assertNotNull(state.validationError) - } -} -``` - -### 4. Dialog Confirmation Test - -```kotlin -@Test -fun `delete shows confirmation dialog`() = runTest { - viewModel.trySendAction(${Feature}Action.DeleteClicked(id)) - - viewModel.stateFlow.test { - val state = expectMostRecentItem() - assertTrue(state.dialogState is DialogState.Confirmation) - } -} - -@Test -fun `confirm delete triggers delete action`() = runTest { - viewModel.trySendAction(${Feature}Action.ConfirmDelete(id)) - - assertEquals(1, fakeRepository.deleteCallCount) -} -``` - ---- - -## Troubleshooting - -### Common Issues - -| Issue | Cause | Solution | -|-------|-------|----------| -| Test timeout | Missing `runTest` | Wrap in `runTest { }` | -| Flow not emitting | Wrong dispatcher | Use `MainDispatcherRule` | -| Node not found | Missing testTag | Add `Modifier.testTag()` | -| Assertion failure | Stale state | Use `expectMostRecentItem()` | - -### Debug Tips - -```kotlin -// Print state for debugging -viewModel.stateFlow.test { - val state = expectMostRecentItem() - println("Current state: $state") - // assertions... -} - -// Print compose tree -composeTestRule.onRoot().printToLog("COMPOSE_TREE") -``` - ---- - -## Related Files - -- [TESTING_STATUS.md](./feature-layer/TESTING_STATUS.md) - Feature test coverage -- [/verify command](../.claude/commands/verify.md) - TestTag validation -- [/implement command](../.claude/commands/implement.md) - Test stub generation - ---- - -## Commands - -```bash -# Generate test stubs for feature -/implement [feature] # Phase 5 generates tests - -# Verify TestTag compliance -/verify [feature] # Includes TestTag validation - -# Check testing gaps -/gap-analysis testing # Shows test coverage gaps -``` diff --git a/claude-product-cycle/client-layer/FEATURE_MAP.md b/claude-product-cycle/client-layer/FEATURE_MAP.md deleted file mode 100644 index ab0499c49..000000000 --- a/claude-product-cycle/client-layer/FEATURE_MAP.md +++ /dev/null @@ -1,169 +0,0 @@ -# Feature → Client Components Map - -> **13 services** | **17 repositories** | **2 DI modules** - ---- - -## Feature to Components (O(1) Lookup) - -| Feature | Services | Repositories | Notes | -|---------|----------|--------------|-------| -| auth | AuthenticationService, RegistrationService, UserDetailsService | UserAuthRepository, UserDataRepository | Login, Register, Password | -| home | ClientService, NotificationService | HomeRepository, NotificationRepository | Dashboard, Profile | -| accounts | ClientService | AccountsRepository | Account listing | -| loan-account | LoanAccountsListService, GuarantorService | LoanRepository, GuarantorRepository, ReviewLoanApplicationRepository | Loan details | -| savings-account | SavingAccountsListService | SavingsAccountRepository | Savings details | -| share-account | ShareAccountService | ShareAccountRepository | Share details | -| beneficiary | BeneficiaryService | BeneficiaryRepository | TPT beneficiaries | -| transfer | ThirdPartyTransferService, SavingAccountsListService | TransferRepository, ThirdPartyTransferRepository | Fund transfer | -| notification | NotificationService | NotificationRepository | Push notifications | -| recent-transaction | RecentTransactionsService | RecentTransactionRepository | Transaction history | -| client-charge | ClientChargeService | ClientChargeRepository | Client charges | -| settings | UserDetailsService | UserDetailRepository | Password change | -| guarantor | GuarantorService | GuarantorRepository | Loan guarantors | -| user-profile | ClientService | ClientRepository, UserDetailRepository | Profile display | - ---- - -## Services Inventory (13) - -| Service | File | Key Methods | -|---------|------|-------------| -| AuthenticationService | AuthenticationService.kt | `authenticate()` | -| RegistrationService | RegistrationService.kt | `registerUser()`, `verifyUser()` | -| ClientService | ClientService.kt | `clients()`, `getClientForId()`, `getClientAccounts()`, `getClientImage()` | -| LoanAccountsListService | LoanAccountsListService.kt | `getLoanWithAssociations()`, `createLoansAccount()`, `withdrawLoanAccount()` | -| SavingAccountsListService | SavingAccountsListService.kt | `getSavingsWithAssociations()`, `makeTransfer()`, `submitSavingAccountApplication()` | -| BeneficiaryService | BeneficiaryService.kt | `beneficiaryList()`, `createBeneficiary()`, `updateBeneficiary()`, `deleteBeneficiary()` | -| ThirdPartyTransferService | ThirdPartyTransferService.kt | `accountTransferTemplate()`, `makeTransfer()` | -| NotificationService | NotificationService.kt | `getUserNotificationId()`, `registerNotification()`, `updateRegisterNotification()` | -| RecentTransactionsService | RecentTransactionsService.kt | `getRecentTransactionsList()` | -| UserDetailsService | UserDetailsService.kt | `updateAccountPassword()` | -| ShareAccountService | ShareAccountService.kt | `getShareProducts()`, `submitShareApplication()`, `getShareAccountDetails()` | -| GuarantorService | GuarantorService.kt | `getGuarantorList()`, `getGuarantorTemplate()`, `createGuarantor()` | -| ClientChargeService | ClientChargeService.kt | `getClientChargeList()`, `getChargeList()` | - ---- - -## Repositories Inventory (17) - -| Repository | Implementation | Depends On | -|------------|----------------|------------| -| AccountsRepository | AccountsRepositoryImp | ClientService | -| BeneficiaryRepository | BeneficiaryRepositoryImp | BeneficiaryService | -| ClientChargeRepository | ClientChargeRepositoryImp | ClientChargeService | -| ClientRepository | ClientRepositoryImp | ClientService | -| GuarantorRepository | GuarantorRepositoryImp | GuarantorService | -| HomeRepository | HomeRepositoryImp | ClientService | -| LoanRepository | LoanRepositoryImp | LoanAccountsListService | -| NotificationRepository | NotificationRepositoryImp | NotificationService | -| RecentTransactionRepository | RecentTransactionRepositoryImp | RecentTransactionsService | -| ReviewLoanApplicationRepository | ReviewLoanApplicationRepositoryImpl | LoanAccountsListService | -| SavingsAccountRepository | SavingsAccountRepositoryImp | SavingAccountsListService | -| ShareAccountRepository | ShareAccountRepositoryImp | ShareAccountService | -| ThirdPartyTransferRepository | ThirdPartyTransferRepositoryImp | ThirdPartyTransferService | -| TransferRepository | TransferRepositoryImp | SavingAccountsListService | -| UserAuthRepository | UserAuthRepositoryImp | AuthenticationService | -| UserDataRepository | AuthenticationUserRepository | DataStore | -| UserDetailRepository | UserDetailRepositoryImp | UserDetailsService | - ---- - -## DI Modules - -| Module | Location | Provides | -|--------|----------|----------| -| NetworkModule | `core/network/di/NetworkModule.kt` | HttpClient, KtorfitClient, DataManager | -| RepositoryModule | `core/data/di/RepositoryModule.kt` | All 17 repositories as singletons | - ---- - -## Reverse Lookup: Service → Features - -| Service | Used By Features | -|---------|------------------| -| AuthenticationService | auth | -| RegistrationService | auth | -| ClientService | home, accounts, user-profile | -| LoanAccountsListService | loan-account | -| SavingAccountsListService | savings-account, transfer | -| BeneficiaryService | beneficiary | -| ThirdPartyTransferService | transfer | -| NotificationService | home, notification | -| RecentTransactionsService | recent-transaction | -| UserDetailsService | auth, settings | -| ShareAccountService | share-account | -| GuarantorService | loan-account, guarantor | -| ClientChargeService | client-charge | - ---- - -## Reverse Lookup: Repository → Features - -| Repository | Used By Features | -|------------|------------------| -| AccountsRepository | accounts | -| BeneficiaryRepository | beneficiary | -| ClientChargeRepository | client-charge | -| ClientRepository | user-profile | -| GuarantorRepository | loan-account, guarantor | -| HomeRepository | home | -| LoanRepository | loan-account | -| NotificationRepository | home, notification | -| RecentTransactionRepository | recent-transaction | -| ReviewLoanApplicationRepository | loan-account | -| SavingsAccountRepository | savings-account | -| ShareAccountRepository | share-account | -| ThirdPartyTransferRepository | transfer | -| TransferRepository | transfer | -| UserAuthRepository | auth | -| UserDataRepository | auth | -| UserDetailRepository | settings, user-profile | - ---- - -## O(1) File Access - -| Need | Path | -|------|------| -| Service | `core/network/src/commonMain/kotlin/org/mifos/mobile/core/network/services/[Name]Service.kt` | -| Repository Interface | `core/data/src/commonMain/kotlin/org/mifos/mobile/core/data/repository/[Name]Repository.kt` | -| Repository Impl | `core/data/src/commonMain/kotlin/org/mifos/mobile/core/data/repository/[Name]RepositoryImp.kt` | -| Network DI | `core/network/src/commonMain/kotlin/org/mifos/mobile/core/network/di/NetworkModule.kt` | -| Data DI | `core/data/src/commonMain/kotlin/org/mifos/mobile/core/data/di/RepositoryModule.kt` | - ---- - -## Architecture Flow - -``` -Feature (ViewModel) - ↓ -Repository (Interface) - ↓ -RepositoryImpl (Implementation) - ↓ -DataManager (Service Accessor) - ↓ -Service (Ktorfit API) - ↓ -HttpClient (Ktor) -``` - ---- - -## Related Files - -- [LAYER_STATUS.md](LAYER_STATUS.md) - Implementation status -- [LAYER_GUIDE.md](LAYER_GUIDE.md) - Architecture patterns -- [server-layer/API_INDEX.md](../server-layer/API_INDEX.md) - API endpoints - ---- - -## Auto-Update Rules - -| Scenario | Action | -|----------|--------| -| New service added | Add to Services Inventory | -| New repository added | Add to Repositories Inventory + Reverse Lookup | -| Feature uses new service | Update Feature to Components table | diff --git a/claude-product-cycle/client-layer/LAYER_GUIDE.md b/claude-product-cycle/client-layer/LAYER_GUIDE.md deleted file mode 100644 index dc89caeee..000000000 --- a/claude-product-cycle/client-layer/LAYER_GUIDE.md +++ /dev/null @@ -1,174 +0,0 @@ -# Client Layer Guide - -> **Location**: `core/` (Network + Data) -> **Command**: `/client [Feature]` - ---- - -## Overview - -The client layer contains two sub-layers that handle all client-side logic: - -``` -┌─────────────────────────────────────────────────────────────────────┐ -│ CLIENT LAYER (core/) │ -├─────────────────────────────────────────────────────────────────────┤ -│ │ -│ core/network/ → API Services (Ktorfit), DTOs, DataManager │ -│ │ │ -│ ▼ │ -│ core/data/ → Repositories, Data transformations │ -│ │ -└─────────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Directory Structure - -``` -core/ -├── network/ # API Layer -│ └── src/commonMain/kotlin/.../network/ -│ ├── services/ -│ │ ├── AuthenticationService.kt -│ │ ├── BeneficiaryService.kt -│ │ ├── ClientService.kt -│ │ ├── LoanAccountsListService.kt -│ │ ├── SavingAccountsListService.kt -│ │ └── ... -│ ├── model/ -│ │ └── [Domain]Entity.kt # DTOs -│ ├── DataManager.kt # Service accessor -│ ├── KtorfitClient.kt # Ktorfit setup -│ └── di/ -│ └── NetworkModule.kt # Koin registration -│ -├── data/ # Data Layer -│ └── src/commonMain/kotlin/.../data/ -│ ├── repository/ -│ │ └── [Feature]Repository.kt # Interface -│ ├── repositoryImpl/ -│ │ └── [Feature]RepositoryImp.kt # Implementation -│ └── di/ -│ └── RepositoryModule.kt # Koin registration -│ -├── model/ # Domain Models (shared) -├── database/ # Local database (Room) -├── datastore/ # Preferences (UserPreferencesRepository) -├── designsystem/ # Design tokens, theme -├── ui/ # Shared UI components -└── common/ # Utilities, dispatchers -``` - ---- - -## Implementation Flow - -``` -/client [Feature] - │ - ├── 1. Network Layer - │ ├── Create [Feature]Service.kt (Ktorfit interface) - │ ├── Add to KtorfitClient.kt - │ ├── Add to DataManager.kt - │ └── DTOs in model/ package - │ - └── 2. Data Layer - ├── Create [Feature]Repository interface - ├── Create [Feature]RepositoryImp implementation - └── Register in RepositoryModule.kt -``` - ---- - -## Code Patterns - -### Service (Ktorfit Interface) - -```kotlin -// core/network/services/[Feature]Service.kt -interface [Feature]Service { - - @GET("self/[endpoint]") - suspend fun getData(): [Feature]Entity - - @POST("self/[endpoint]") - suspend fun createData(@Body payload: [Request]Entity): ResponseBody -} -``` - -### DataManager - -```kotlin -// core/network/DataManager.kt -class DataManager( - private val ktorfitClient: KtorfitClient, -) { - val [feature]Api by lazy { ktorfitClient.[feature]Api } -} -``` - -### Repository Interface - -```kotlin -// core/data/repository/[Feature]Repository.kt -interface [Feature]Repository { - suspend fun getData(): [DomainModel] - suspend fun createData(param: Param): Result -} -``` - -### Repository Implementation - -```kotlin -// core/data/repositoryImpl/[Feature]RepositoryImp.kt -class [Feature]RepositoryImp( - private val dataManager: DataManager, - @Named(MifosDispatchers.IO.name) private val ioDispatcher: CoroutineDispatcher, -) : [Feature]Repository { - - override suspend fun getData(): [DomainModel] = withContext(ioDispatcher) { - dataManager.[feature]Api.getData().toDomainModel() - } -} -``` - -### Koin Registration - -```kotlin -// core/data/di/RepositoryModule.kt -val RepositoryModule = module { - single<[Feature]Repository> { - [Feature]RepositoryImp(get(), get(ioDispatcher)) - } -} -``` - ---- - -## Critical Rules - -``` -⚠️ Repository ALWAYS uses DataManager, never raw Ktorfit services! - -✅ CORRECT: Repository → DataManager → Service -❌ WRONG: Repository → Service directly -``` - ---- - -## Build Commands - -```bash -./gradlew :core:network:build -./gradlew :core:data:build -./gradlew :core:model:build -``` - ---- - -## Related Files - -- Patterns: `claude-product-cycle/design-spec-layer/_shared/PATTERNS.md` -- API Specs: `claude-product-cycle/design-spec-layer/features/[feature]/API.md` diff --git a/claude-product-cycle/client-layer/LAYER_STATUS.md b/claude-product-cycle/client-layer/LAYER_STATUS.md deleted file mode 100644 index 031b36044..000000000 --- a/claude-product-cycle/client-layer/LAYER_STATUS.md +++ /dev/null @@ -1,171 +0,0 @@ -# Client Layer - Status & Memory - -> **Layer**: Network + Data -> **Command**: `/client [Feature]` -> **Location**: `core/` (network, data) - ---- - -## Current Status - -| Sub-Layer | Components | Status | -|-----------|------------|--------| -| Network (Services) | 13 | Complete | -| Network (DTOs) | 40+ | Complete | -| Data (Repositories) | 17 | Complete | - ---- - -## Layer Structure - -``` -core/ -├── network/ # API Layer -│ └── src/commonMain/kotlin/.../network/ -│ ├── DataManager.kt # Service accessor -│ ├── KtorfitClient.kt # Ktorfit setup -│ ├── services/ # API interfaces -│ │ ├── AuthenticationService.kt -│ │ ├── BeneficiaryService.kt -│ │ ├── ClientChargeService.kt -│ │ ├── ClientService.kt -│ │ ├── GuarantorService.kt -│ │ ├── LoanAccountsListService.kt -│ │ ├── NotificationService.kt -│ │ ├── RecentTransactionsService.kt -│ │ ├── RegistrationService.kt -│ │ ├── SavingAccountsListService.kt -│ │ ├── ShareAccountService.kt -│ │ ├── ThirdPartyTransferService.kt -│ │ └── UserDetailsService.kt -│ ├── model/ # DTOs -│ └── di/NetworkModule.kt -│ -├── data/ # Data Layer -│ └── src/commonMain/kotlin/.../data/ -│ ├── repository/ # Interfaces -│ ├── repositoryImpl/ # Implementations -│ └── di/RepositoryModule.kt -│ -├── model/ # Domain Models (shared) -├── database/ # Local DB (Room) -├── datastore/ # Preferences -├── designsystem/ # UI components -├── ui/ # Shared UI -└── common/ # Utilities -``` - ---- - -## Services (Network Layer) - -| Service | Purpose | Base Endpoint | -|---------|---------|---------------| -| AuthenticationService | Login, logout | /self/authentication | -| RegistrationService | User registration | /self/registration | -| ClientService | Client profile | /self/clients | -| UserDetailsService | User details | /self/userdetails | -| SavingAccountsListService | Savings accounts | /self/savingsaccounts | -| LoanAccountsListService | Loan accounts | /self/loanaccounts | -| ShareAccountService | Share accounts | /self/shareaccounts | -| BeneficiaryService | Beneficiaries CRUD | /self/beneficiaries | -| ThirdPartyTransferService | Transfers | /self/accounttransfers | -| RecentTransactionsService | Transaction history | /self/transactions | -| NotificationService | Notifications | /self/notifications | -| GuarantorService | Guarantor management | /self/loans/{id}/guarantors | -| ClientChargeService | Client charges | /self/clients/{id}/charges | - ---- - -## Repositories (Data Layer) - -| Repository | Service Used | Status | -|------------|--------------|--------| -| UserAuthRepository | AuthenticationService | Complete | -| UserDataRepository | - (DataStore) | Complete | -| UserDetailRepository | UserDetailsService | Complete | -| ClientRepository | ClientService | Complete | -| AccountsRepository | Multiple services | Complete | -| SavingsAccountRepository | SavingAccountsListService | Complete | -| LoanRepository | LoanAccountsListService | Complete | -| ShareAccountRepository | ShareAccountService | Complete | -| BeneficiaryRepository | BeneficiaryService | Complete | -| TransferRepository | Multiple services | Complete | -| ThirdPartyTransferRepository | ThirdPartyTransferService | Complete | -| RecentTransactionRepository | RecentTransactionsService | Complete | -| NotificationRepository | NotificationService | Complete | -| GuarantorRepository | GuarantorService | Complete | -| ClientChargeRepository | ClientChargeService | Complete | -| HomeRepository | Multiple services | Complete | -| ReviewLoanApplicationRepository | LoanAccountsListService | Complete | - ---- - -## DataManager APIs - -| API | Service | Lazy Loaded | -|-----|---------|-------------| -| authenticationApi | AuthenticationService | Yes | -| registrationApi | RegistrationService | Yes | -| clientsApi | ClientService | Yes | -| userDetailsApi | UserDetailsService | Yes | -| savingAccountsListApi | SavingAccountsListService | Yes | -| loanAccountsListApi | LoanAccountsListService | Yes | -| shareAccountApi | ShareAccountService | Yes | -| beneficiaryApi | BeneficiaryService | Yes | -| thirdPartyTransferApi | ThirdPartyTransferService | Yes | -| recentTransactionsApi | RecentTransactionsService | Yes | -| notificationApi | NotificationService | Yes | -| guarantorApi | GuarantorService | Yes | -| clientChargeApi | ClientChargeService | Yes | - ---- - -## Critical Rules - -``` -REPOSITORY ALWAYS USES DataManager! - -CORRECT: Repository → DataManager → Service -WRONG: Repository → Service directly -``` - ---- - -## Build Commands - -```bash -./gradlew :core:network:build -./gradlew :core:data:build -./gradlew :core:model:build -``` - ---- - -## DI Modules - -| Module | Location | Registration | -|--------|----------|--------------| -| NetworkModule | core/network/di/ | DataManager, KtorfitClient | -| RepositoryModule | core/data/di/ | All Repositories | -| PreferenceModule | core/datastore/di/ | UserPreferencesRepository | -| DatabaseModule | core/database/di/ | Room Database | - -All registered in: `cmp-navigation/di/KoinModules.kt` - ---- - -## Related Docs - -- Patterns: `claude-product-cycle/design-spec-layer/_shared/PATTERNS.md` -- API Specs: `claude-product-cycle/design-spec-layer/features/[feature]/API.md` -- Layer Guide: `claude-product-cycle/client-layer/LAYER_GUIDE.md` - ---- - -## Changelog - -| Date | Change | -|------|--------| -| 2025-12-26 | Created LAYER_STATUS.md | -| 2025-12-26 | All 17 repositories verified complete | diff --git a/claude-product-cycle/client-layer/TESTING_STATUS.md b/claude-product-cycle/client-layer/TESTING_STATUS.md deleted file mode 100644 index ea23a8bde..000000000 --- a/claude-product-cycle/client-layer/TESTING_STATUS.md +++ /dev/null @@ -1,192 +0,0 @@ -# Client Layer - Testing Status - -> Repository and service testing documentation - ---- - -## Overview - -The client layer handles data operations. Testing ensures repositories correctly transform API responses and handle errors. - ---- - -## Current State - -| Component | Total | Tested | Coverage | -|-----------|:-----:|:------:|:--------:| -| Services | 13 | 0 | 0% | -| Repositories | 17 | 14 | 82% | -| DataStore | 3 | 3 | 100% | - ---- - -## Testing Scope - -| Component | Test Type | Purpose | -|-----------|-----------|---------| -| Services | Unit Tests | Verify API call construction | -| Repositories | Unit Tests | Verify data transformation | -| DataStore | Unit Tests | Verify local persistence | - ---- - -## Repository Testing Status - -### Existing Tests (14) - -| # | Repository | Tests | File | -|:-:|------------|:-----:|------| -| 1 | AccountsRepository | 2 | `AccountsRepositoryTest.kt` | -| 2 | BeneficiaryRepository | 1 | `BeneficiaryRepositoryTest.kt` | -| 3 | ClientChargeRepository | 1 | `ClientChargeRepositoryTest.kt` | -| 4 | ClientRepository | 1 | `ClientRepositoryTest.kt` | -| 5 | GuarantorRepository | 1 | `GuarantorRepositoryTest.kt` | -| 6 | HomeRepository | 1 | `HomeRepositoryTest.kt` | -| 7 | LoanRepository | 1 | `LoanRepositoryTest.kt` | -| 8 | NotificationRepository | 1 | `NotificationRepositoryTest.kt` | -| 9 | RecentTransactionRepository | 1 | `RecentTransactionRepositoryTest.kt` | -| 10 | SavingsAccountRepository | 1 | `SavingsAccountRepositoryTest.kt` | -| 11 | ShareAccountRepository | 1 | `ShareAccountRepositoryTest.kt` | -| 12 | ThirdPartyTransferRepository | 1 | `ThirdPartyTransferRepositoryTest.kt` | -| 13 | TransferRepository | 1 | `TransferRepositoryTest.kt` | -| 14 | UserAuthRepository | - | (needs tests) | - -**Location**: `core/data/src/commonTest/kotlin/org/mifos/mobile/core/data/repository/` - ---- - -## Repository Test Coverage Matrix - -| # | Repository | Success | Error | Empty | Offline | Status | -|:-:|------------|:-------:|:-----:|:-----:|:-------:|:------:| -| 1 | AccountsRepository | ✅ | ⬜ | ⬜ | ⬜ | Partial | -| 2 | BeneficiaryRepository | ✅ | ⬜ | ⬜ | ⬜ | Partial | -| 3 | ClientChargeRepository | ✅ | ⬜ | ⬜ | ⬜ | Partial | -| 4 | ClientRepository | ✅ | ⬜ | ⬜ | ⬜ | Partial | -| 5 | GuarantorRepository | ✅ | ⬜ | ⬜ | ⬜ | Partial | -| 6 | HomeRepository | ✅ | ⬜ | ⬜ | ⬜ | Partial | -| 7 | LoanRepository | ✅ | ⬜ | ⬜ | ⬜ | Partial | -| 8 | NotificationRepository | ✅ | ⬜ | ⬜ | ⬜ | Partial | -| 9 | RecentTransactionRepository | ✅ | ⬜ | ⬜ | ⬜ | Partial | -| 10 | SavingsAccountRepository | ✅ | ⬜ | ⬜ | ⬜ | Partial | -| 11 | ShareAccountRepository | ✅ | ⬜ | ⬜ | ⬜ | Partial | -| 12 | ThirdPartyTransferRepository | ✅ | ⬜ | ⬜ | ⬜ | Partial | -| 13 | TransferRepository | ✅ | ⬜ | ⬜ | ⬜ | Partial | -| 14 | UserAuthRepository | ⬜ | ⬜ | ⬜ | ⬜ | Not Started | -| 15 | UserDataRepository | ⬜ | ⬜ | ⬜ | ⬜ | Not Started | -| 16 | UserPreferencesRepository | ⬜ | ⬜ | ⬜ | ⬜ | Not Started | -| 17 | RegistrationRepository | ⬜ | ⬜ | ⬜ | ⬜ | Not Started | - -**Legend**: ✅ Tested | ⬜ Not Tested - ---- - -## Missing Tests - -### Priority 1 - Auth Flow -- [ ] UserAuthRepository (login, logout, token refresh) -- [ ] UserPreferencesRepository (user settings) -- [ ] RegistrationRepository (sign up flow) - -### Priority 2 - Error Handling -- [ ] All repositories: error scenarios -- [ ] All repositories: empty response handling -- [ ] All repositories: offline caching - -### Priority 3 - Edge Cases -- [ ] Pagination handling -- [ ] Concurrent request handling -- [ ] Cache invalidation - ---- - -## Fake Repository Implementations - -For ViewModel testing, create fake repositories: - -**Location**: `core/testing/src/commonMain/kotlin/org/mifos/mobile/core/testing/fake/` - -```kotlin -class FakeHomeRepository : HomeRepository { - private var result: DataState = DataState.Loading - - fun setResult(result: DataState) { - this.result = result - } - - override suspend fun getHomeData(): Flow> = flow { - emit(result) - } -} -``` - -### Fake Repositories Needed - -| # | Fake Repository | For Testing | -|:-:|-----------------|-------------| -| 1 | FakeHomeRepository | HomeViewModel | -| 2 | FakeUserAuthRepository | LoginViewModel | -| 3 | FakeAccountsRepository | AccountsViewModel | -| 4 | FakeBeneficiaryRepository | BeneficiaryViewModel | -| 5 | FakeLoanRepository | LoanViewModel | -| 6 | FakeSavingsAccountRepository | SavingsViewModel | -| 7 | FakeTransferRepository | TransferViewModel | -| 8 | FakeNotificationRepository | NotificationViewModel | -| 9 | FakeSettingsRepository | SettingsViewModel | - ---- - -## Test Fixtures - -**Location**: `core/testing/src/commonMain/kotlin/org/mifos/mobile/core/testing/fixture/` - -```kotlin -object ClientAccountsFixture { - fun create( - savingsAccounts: List = emptyList(), - loanAccounts: List = emptyList(), - shareAccounts: List = emptyList() - ) = ClientAccounts( - savingsAccounts = savingsAccounts, - loanAccounts = loanAccounts, - shareAccounts = shareAccounts - ) - - fun withSavings() = create( - savingsAccounts = listOf(SavingAccountFixture.create()) - ) -} -``` - ---- - -## Implementation Priority - -| Phase | Scope | Tests | -|:-----:|-------|:-----:| -| 1 | Auth repositories | 15 | -| 2 | Error handling (all repos) | 34 | -| 3 | Fake implementations | 9 | -| 4 | Test fixtures | 12 | - ---- - -## Commands - -```bash -# Run client layer tests -./gradlew :core:data:test - -# Check test coverage -/gap-analysis client testing - -# Plan missing tests -/gap-planning client testing -``` - ---- - -## Related Files - -- [FEATURE_MAP.md](./FEATURE_MAP.md) - Feature to service mapping -- [LAYER_STATUS.md](./LAYER_STATUS.md) - Implementation status diff --git a/claude-product-cycle/commands-layer/README.md b/claude-product-cycle/commands-layer/README.md deleted file mode 100644 index eccaf0758..000000000 --- a/claude-product-cycle/commands-layer/README.md +++ /dev/null @@ -1,56 +0,0 @@ -# Commands Layer - -This directory contains slash command definitions for Claude Code integration with the Mifos Mobile project. - -## Available Commands - -| Command | File | Description | -|---------|------|-------------| -| `/projectstatus` | projectstatus.md | Display project overview and feature status | -| `/design [Feature]` | design.md | Create or update feature specification | -| `/mockup [Feature]` | mockup.md | Generate design mockups (Figma plugin / AI prompts) | -| `/implement [Feature]` | implement.md | Full E2E feature implementation | -| `/client [Feature]` | client.md | Implement Network + Data layers | -| `/feature [Feature]` | feature.md | Implement UI layer (ViewModel + Screen) | -| `/verify [Feature]` | verify.md | Validate implementation vs specification | - -## Usage - -Copy these files to your `.claude/commands/` directory or reference them directly when working with Claude Code. - -## Workflow - -``` -/projectstatus → See current state - │ - ▼ -/design [Feature] → Create specification (Opus) - │ - ▼ -/mockup [Feature] → Generate design mockups - │ (Figma plugin or AI prompts) - ▼ -/implement [Feature] → Full implementation (Sonnet) - │ - ▼ -/verify [Feature] → Validate implementation -``` - -## Mockup Pipeline - -``` -/design [Feature] - │ - ├─→ /mockup [Feature] → Figma plugin code - │ OR - ├─→ /mockup [Feature] prompts → AI tool prompts - │ - ▼ - [Generate in Figma / AI Tool] - │ - ▼ - [Connect Figma MCP] - │ - ▼ -/implement [Feature] → Code from design -``` diff --git a/claude-product-cycle/commands-layer/client.md b/claude-product-cycle/commands-layer/client.md deleted file mode 100644 index b1122164e..000000000 --- a/claude-product-cycle/commands-layer/client.md +++ /dev/null @@ -1,156 +0,0 @@ -# /client - Client Layer Implementation - -## Purpose -Implement the client layer (Network + Data) for a feature. This includes DTOs, Services, and Repositories. - ---- - -## Workflow - -``` -┌───────────────────────────────────────────────────────────────────┐ -│ /client [Feature] WORKFLOW │ -├───────────────────────────────────────────────────────────────────┤ -│ │ -│ STEP 1: READ SPEC │ -│ ├─→ Read features/[feature]/SPEC.md │ -│ ├─→ Read features/[feature]/API.md │ -│ └─→ Read server-layer/FINERACT_API.md │ -│ │ -│ STEP 2: CHECK EXISTING CODE │ -│ ├─→ Check core/network/services/ for existing service │ -│ ├─→ Check core/data/repository/ for existing repository │ -│ └─→ Identify what needs to be created/updated │ -│ │ -│ STEP 3: NETWORK LAYER │ -│ ├─→ Create/update DTOs in core/network/model/ (if needed) │ -│ ├─→ Create/update Service interface in core/network/services/ │ -│ └─→ Register in NetworkModule │ -│ │ -│ STEP 4: DATA LAYER │ -│ ├─→ Create/update Repository interface │ -│ ├─→ Create/update RepositoryImpl │ -│ └─→ Register in DataModule │ -│ │ -│ STEP 5: BUILD & VERIFY │ -│ ├─→ ./gradlew :core:network:build │ -│ ├─→ ./gradlew :core:data:build │ -│ └─→ ./gradlew spotlessApply │ -│ │ -└───────────────────────────────────────────────────────────────────┘ -``` - ---- - -## File Locations - -| Component | Location | -|-----------|----------| -| DTOs | `core/network/model/` | -| Service Interface | `core/network/services/` | -| Repository Interface | `core/data/repository/` | -| Repository Impl | `core/data/repositoryImpl/` | -| Network DI | `core/network/di/NetworkModule.kt` | -| Data DI | `core/data/di/DataModule.kt` | - ---- - -## Service Pattern - -```kotlin -// core/network/services/[Feature]Service.kt -interface [Feature]Service { - - @GET(ApiEndPoints.[ENDPOINT]) - fun getData(): Flow - - @GET(ApiEndPoints.[ENDPOINT] + "/{id}") - fun getById(@Path("id") id: Long): Flow - - @POST(ApiEndPoints.[ENDPOINT]) - suspend fun create(@Body payload: PayloadType): HttpResponse - - @PUT(ApiEndPoints.[ENDPOINT] + "/{id}") - suspend fun update( - @Path("id") id: Long, - @Body payload: PayloadType, - ): HttpResponse - - @DELETE(ApiEndPoints.[ENDPOINT] + "/{id}") - suspend fun delete(@Path("id") id: Long): HttpResponse -} -``` - ---- - -## Repository Pattern - -```kotlin -// core/data/repository/[Feature]Repository.kt -interface [Feature]Repository { - fun getData(): Flow>> - fun getById(id: Long): Flow> - suspend fun create(data: Data): DataState - suspend fun update(id: Long, data: Data): DataState - suspend fun delete(id: Long): DataState -} - -// core/data/repositoryImpl/[Feature]RepositoryImpl.kt -class [Feature]RepositoryImpl( - private val service: [Feature]Service, -) : [Feature]Repository { - - override fun getData(): Flow>> = flow { - emit(DataState.Loading) - try { - val result = service.getData().first() - emit(DataState.Success(result)) - } catch (e: Exception) { - emit(DataState.Error(e.message ?: "Unknown error")) - } - } -} -``` - ---- - -## DI Registration - -```kotlin -// core/network/di/NetworkModule.kt -val networkModule = module { - single<[Feature]Service> { get().create<[Feature]Service>() } -} - -// core/data/di/DataModule.kt -val dataModule = module { - single<[Feature]Repository> { [Feature]RepositoryImpl(get()) } -} -``` - ---- - -## Output Template - -``` -┌──────────────────────────────────────────────────────────────────────┐ -│ ✅ CLIENT LAYER COMPLETE │ -├──────────────────────────────────────────────────────────────────────┤ -│ │ -│ Created/Updated: │ -│ ├─ core/network/services/[Feature]Service.kt │ -│ ├─ core/data/repository/[Feature]Repository.kt │ -│ └─ core/data/repositoryImpl/[Feature]RepositoryImpl.kt │ -│ │ -│ Registered in DI: │ -│ ├─ NetworkModule: [Feature]Service ✅ │ -│ └─ DataModule: [Feature]Repository ✅ │ -│ │ -│ 🔨 BUILD: :core:network ✅ :core:data ✅ │ -│ 🧹 LINT: spotlessApply ✅ │ -│ │ -├──────────────────────────────────────────────────────────────────────┤ -│ NEXT STEP: │ -│ Run: /feature [Feature] │ -└──────────────────────────────────────────────────────────────────────┘ -``` diff --git a/claude-product-cycle/commands-layer/design.md b/claude-product-cycle/commands-layer/design.md deleted file mode 100644 index 5026b7db1..000000000 --- a/claude-product-cycle/commands-layer/design.md +++ /dev/null @@ -1,293 +0,0 @@ -# /design - Feature Specification - -## Purpose -Create or update feature specifications (SPEC.md + API.md) that define what to build and how to build it. - ---- - -## Command Variants - -``` -/design → Show feature list -/design [Feature] → Full spec review/create -/design [Feature] add [section] → Add specific section -/design [Feature] improve → Suggest improvements -``` - ---- - -## Model Recommendation - -**This command is optimized for Opus** for complex architectural decisions and comprehensive specification writing. - ---- - -## Key Files - -``` -claude-product-cycle/design-spec-layer/ -├── STATUS.md # All features status -├── _shared/ -│ ├── PATTERNS.md # Implementation patterns -│ └── API_REFERENCE.md # Fineract API reference -└── features/[feature]/ - ├── SPEC.md # What to build (UI, flows) - ├── API.md # APIs needed - └── STATUS.md # Feature implementation status -``` - ---- - -## Workflow - -``` -┌───────────────────────────────────────────────────────────────────┐ -│ /design [Feature] WORKFLOW │ -├───────────────────────────────────────────────────────────────────┤ -│ │ -│ STEP 1: GATHER CONTEXT │ -│ ├─→ Read claude-product-cycle/design-spec-layer/STATUS.md │ -│ ├─→ Read features/[feature]/SPEC.md (if exists) │ -│ ├─→ Read features/[feature]/API.md (if exists) │ -│ ├─→ Read actual code in feature/[feature]/ │ -│ └─→ Read server-layer/FINERACT_API.md │ -│ │ -│ STEP 2: ANALYZE │ -│ ├─→ Compare current spec vs implementation │ -│ ├─→ Identify gaps, outdated sections, missing features │ -│ ├─→ Research best practices for similar apps │ -│ └─→ Report findings to user │ -│ │ -│ STEP 3: UPDATE SPEC.md │ -│ ├─→ Update/add sections with ASCII mockups │ -│ ├─→ Define state model │ -│ ├─→ Define user actions │ -│ └─→ Add changelog entry │ -│ │ -│ STEP 4: UPDATE API.md │ -│ ├─→ List all required endpoints │ -│ ├─→ Define request/response structures │ -│ └─→ Note any missing endpoints │ -│ │ -│ STEP 5: CROSS-UPDATE (MANDATORY) │ -│ ├─→ features/[feature]/STATUS.md │ -│ └─→ claude-product-cycle/design-spec-layer/STATUS.md │ -│ │ -│ STEP 6: GENERATE IMPLEMENTATION SUMMARY │ -│ └─→ Output clear requirements for /implement │ -│ │ -└───────────────────────────────────────────────────────────────────┘ -``` - ---- - -## SPEC.md Template - -```markdown -# [Feature Name] - Feature Specification - -> **Purpose**: [One-line description] -> **User Value**: [Why users need this] -> **Last Updated**: [Date] - ---- - -## 1. Overview - -### 1.1 Feature Summary -[2-3 sentences describing the feature] - -### 1.2 User Stories -- As a user, I want to [action] so that [benefit] - ---- - -## 2. Screen Layout - -### 2.1 ASCII Mockup - -``` -┌─────────────────────────────────────────┐ -│ ← Back [Title] ⋮ │ ← TopBar -├─────────────────────────────────────────┤ -│ │ -│ ┌─────────────────────────────────┐ │ -│ │ Section 1 │ │ -│ └─────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────┘ -``` - -### 2.2 Sections Table - -| # | Section | Description | API | Priority | -|---|---------|-------------|-----|----------| -| 1 | [Name] | [What it shows] | [Endpoint] | P0 | - ---- - -## 3. User Interactions - -| Action | Trigger | Result | API Call | -|--------|---------|--------|----------| -| Tap item | Click | Navigate | - | -| Pull refresh | Swipe down | Reload data | [Endpoint] | - ---- - -## 4. State Model - -```kotlin -@Immutable -data class [Feature]State( - val isLoading: Boolean = false, - val data: List = emptyList(), - val error: String? = null, -) - -sealed interface [Feature]ScreenState { - data object Loading : [Feature]ScreenState - data object Success : [Feature]ScreenState - data class Error(val message: StringResource) : [Feature]ScreenState -} -``` - ---- - -## 5. API Requirements - -| Endpoint | Method | Purpose | Status | -|----------|--------|---------|--------| -| /self/[path] | GET | [Description] | ✅ Exists | - ---- - -## 6. Edge Cases & Error Handling - -| Scenario | Behavior | UI Feedback | -|----------|----------|-------------| -| No internet | Show cached | Toast | -| Empty results | Show empty state | Illustration | -| API error | Retry logic | Snackbar | - ---- - -## Changelog - -| Date | Change | -|------|--------| -| [date] | Initial spec | -``` - ---- - -## API.md Template - -```markdown -# [Feature Name] - API Reference - -## Endpoints Required - -### [Endpoint Name] - -**Endpoint**: `GET /self/[path]` - -**Description**: [What this endpoint does] - -**Request**: -``` -Headers: - Authorization: Basic {token} - Fineract-Platform-TenantId: {tenant} -``` - -**Response**: -```json -{ - "field": "value" -} -``` - -**Kotlin DTO**: -```kotlin -@Serializable -data class [Name]Dto( - @SerialName("field") val field: String, -) -``` - -**Status**: ✅ Implemented / ❌ Missing - ---- - -## API Summary - -| Endpoint | Service | Repository | Status | -|----------|---------|------------|--------| -| /self/[path] | [Name]Service | [Name]Repository | ✅ | -``` - ---- - -## Output Template - -After completing design, output: - -``` -┌───────────────────────────────────────────────────────────────────┐ -│ IMPLEMENTATION REQUIREMENTS │ -│ Ready for /implement in Sonnet session │ -├───────────────────────────────────────────────────────────────────┤ -│ │ -│ FEATURE: [Feature Name] │ -│ SPEC UPDATED: features/[feature]/SPEC.md │ -│ │ -│ ════════════════════════════════════════════════════════════════ │ -│ │ -│ CLIENT WORK NEEDED: │ -│ [ ] Network: [DTO/Service changes] │ -│ [ ] Data: [Repository changes] │ -│ │ -│ FEATURE WORK NEEDED: │ -│ [ ] ViewModel: [changes] │ -│ [ ] Screen: [changes] │ -│ [ ] Components: [new components] │ -│ │ -│ ════════════════════════════════════════════════════════════════ │ -│ │ -│ NEXT STEP: │ -│ Run: /implement [Feature] │ -│ │ -└───────────────────────────────────────────────────────────────────┘ -``` - ---- - -## If No Feature Name Provided - -Show feature list: - -``` -📋 FEATURES AVAILABLE FOR DESIGN: - -| Feature | Status | Last Updated | Command | -|---------|--------|--------------|---------| -| auth | ✅ Done | - | /design auth | -| home | ✅ Done | - | /design home | -| accounts | ✅ Done | - | /design accounts | -| loan-account | ✅ Done | - | /design loan-account | -| savings-account | ✅ Done | - | /design savings-account | -| share-account | ✅ Done | - | /design share-account | -| beneficiary | ✅ Done | - | /design beneficiary | -| transfer | ✅ Done | - | /design transfer | -| recent-transaction | ✅ Done | - | /design recent-transaction | -| notification | ✅ Done | - | /design notification | -| settings | ✅ Done | - | /design settings | -| passcode | ✅ Done | - | /design passcode | -| guarantor | ✅ Done | - | /design guarantor | -| qr | ✅ Done | - | /design qr | -| location | ✅ Done | - | /design location | -| client-charge | ✅ Done | - | /design client-charge | - -Which feature do you want to design? -``` diff --git a/claude-product-cycle/commands-layer/feature.md b/claude-product-cycle/commands-layer/feature.md deleted file mode 100644 index 62a81ac25..000000000 --- a/claude-product-cycle/commands-layer/feature.md +++ /dev/null @@ -1,254 +0,0 @@ -# /feature - Feature/UI Layer Implementation - -## Purpose -Implement the feature/UI layer including ViewModel, Screen, Components, and Navigation. - ---- - -## Workflow - -``` -┌───────────────────────────────────────────────────────────────────┐ -│ /feature [Feature] WORKFLOW │ -├───────────────────────────────────────────────────────────────────┤ -│ │ -│ STEP 1: READ SPEC │ -│ ├─→ Read features/[feature]/SPEC.md │ -│ ├─→ Extract UI sections, state model, user actions │ -│ └─→ Read _shared/PATTERNS.md for MVI pattern │ -│ │ -│ STEP 2: CHECK PREREQUISITES │ -│ ├─→ Verify client layer exists (Repository) │ -│ └─→ If missing, suggest: /client [Feature] first │ -│ │ -│ STEP 3: CREATE VIEWMODEL │ -│ ├─→ Define State data class │ -│ ├─→ Define Event sealed interface │ -│ ├─→ Define Action sealed interface │ -│ ├─→ Implement handleAction() │ -│ └─→ Implement data loading logic │ -│ │ -│ STEP 4: CREATE SCREEN │ -│ ├─→ Create main Screen composable │ -│ ├─→ Handle state rendering │ -│ ├─→ Handle event collection │ -│ └─→ Connect to ViewModel actions │ -│ │ -│ STEP 5: CREATE COMPONENTS │ -│ ├─→ Extract reusable components │ -│ └─→ Add @Preview annotations │ -│ │ -│ STEP 6: CREATE NAVIGATION │ -│ ├─→ Define navigation route │ -│ └─→ Register in navigation graph │ -│ │ -│ STEP 7: REGISTER DI │ -│ ├─→ Create [Feature]Module.kt │ -│ └─→ Register ViewModel │ -│ │ -│ STEP 8: BUILD & VERIFY │ -│ ├─→ ./gradlew :feature:[name]:build │ -│ └─→ ./gradlew spotlessApply detekt │ -│ │ -└───────────────────────────────────────────────────────────────────┘ -``` - ---- - -## File Locations - -``` -feature/[name]/src/commonMain/kotlin/org/mifos/mobile/feature/[name]/ -├── [Feature]ViewModel.kt # MVI ViewModel -├── [Feature]Screen.kt # Main screen composable -├── components/ # UI components -│ └── [Component].kt -├── navigation/ -│ └── [Feature]Navigation.kt # Navigation definition -└── di/ - └── [Feature]Module.kt # Koin module -``` - ---- - -## ViewModel Pattern (MVI) - -```kotlin -internal class [Feature]ViewModel( - private val repository: [Feature]Repository, -) : BaseViewModel<[Feature]State, [Feature]Event, [Feature]Action>( - initialState = [Feature]State() -) { - - init { - loadData() - } - - override fun handleAction(action: [Feature]Action) { - when (action) { - is [Feature]Action.Retry -> loadData() - is [Feature]Action.OnItemClick -> handleItemClick(action.id) - } - } - - private fun loadData() { - viewModelScope.launch { - repository.getData() - .collect { dataState -> - when (dataState) { - is DataState.Loading -> updateState { - it.copy(uiState = [Feature]ScreenState.Loading) - } - is DataState.Success -> updateState { - it.copy( - uiState = [Feature]ScreenState.Success, - data = dataState.data - ) - } - is DataState.Error -> updateState { - it.copy(uiState = [Feature]ScreenState.Error(dataState.message)) - } - } - } - } - } - - private fun handleItemClick(id: Long) { - sendEvent([Feature]Event.NavigateToDetail(id)) - } -} - -// State -@Immutable -data class [Feature]State( - val data: List = emptyList(), - val uiState: [Feature]ScreenState = [Feature]ScreenState.Loading, -) - -sealed interface [Feature]ScreenState { - data object Loading : [Feature]ScreenState - data object Success : [Feature]ScreenState - data class Error(val message: String) : [Feature]ScreenState -} - -// Events (one-time navigation/toasts) -sealed interface [Feature]Event { - data class NavigateToDetail(val id: Long) : [Feature]Event - data object NavigateBack : [Feature]Event -} - -// Actions (user interactions) -sealed interface [Feature]Action { - data object Retry : [Feature]Action - data class OnItemClick(val id: Long) : [Feature]Action -} -``` - ---- - -## Screen Pattern - -```kotlin -@Composable -fun [Feature]Screen( - viewModel: [Feature]ViewModel = koinViewModel(), - onNavigateBack: () -> Unit, - onNavigateToDetail: (Long) -> Unit, -) { - val state by viewModel.stateFlow.collectAsStateWithLifecycle() - - // Handle one-time events - LaunchedEffect(Unit) { - viewModel.eventFlow.collect { event -> - when (event) { - is [Feature]Event.NavigateBack -> onNavigateBack() - is [Feature]Event.NavigateToDetail -> onNavigateToDetail(event.id) - } - } - } - - [Feature]Content( - state = state, - onAction = viewModel::sendAction, - ) -} - -@Composable -private fun [Feature]Content( - state: [Feature]State, - onAction: ([Feature]Action) -> Unit, -) { - when (state.uiState) { - is [Feature]ScreenState.Loading -> LoadingContent() - is [Feature]ScreenState.Success -> SuccessContent( - data = state.data, - onItemClick = { onAction([Feature]Action.OnItemClick(it)) } - ) - is [Feature]ScreenState.Error -> ErrorContent( - message = state.uiState.message, - onRetry = { onAction([Feature]Action.Retry) } - ) - } -} -``` - ---- - -## Navigation Pattern - -```kotlin -// Navigation definition -fun NavGraphBuilder.[feature]Screen( - onNavigateBack: () -> Unit, - onNavigateToDetail: (Long) -> Unit, -) { - composable<[Feature]Route> { - [Feature]Screen( - onNavigateBack = onNavigateBack, - onNavigateToDetail = onNavigateToDetail, - ) - } -} - -// Route -@Serializable -data object [Feature]Route -``` - ---- - -## DI Module Pattern - -```kotlin -val [feature]Module = module { - viewModelOf(::[Feature]ViewModel) -} -``` - ---- - -## Output Template - -``` -┌──────────────────────────────────────────────────────────────────────┐ -│ ✅ FEATURE LAYER COMPLETE │ -├──────────────────────────────────────────────────────────────────────┤ -│ │ -│ Created/Updated: │ -│ ├─ feature/[name]/[Feature]ViewModel.kt │ -│ ├─ feature/[name]/[Feature]Screen.kt │ -│ ├─ feature/[name]/components/*.kt │ -│ ├─ feature/[name]/navigation/[Feature]Navigation.kt │ -│ └─ feature/[name]/di/[Feature]Module.kt │ -│ │ -│ Navigation: │ -│ └─ Route registered ✅ │ -│ │ -│ 🔨 BUILD: :feature:[name] ✅ │ -│ 🧹 LINT: spotlessApply ✅ detekt ✅ │ -│ │ -├──────────────────────────────────────────────────────────────────────┤ -│ NEXT STEP: │ -│ Run: /verify [Feature] │ -└──────────────────────────────────────────────────────────────────────┘ -``` diff --git a/claude-product-cycle/commands-layer/implement.md b/claude-product-cycle/commands-layer/implement.md deleted file mode 100644 index 640d1024b..000000000 --- a/claude-product-cycle/commands-layer/implement.md +++ /dev/null @@ -1,237 +0,0 @@ -# /implement - E2E Feature Implementation - -## Purpose -Full end-to-end implementation of a feature including client layer (Network + Data) and feature layer (UI). - ---- - -## Command Variants - -``` -/implement → Show feature status list -/implement [Feature] → Full E2E implementation -/implement [Feature] --quick → Skip validations -/implement [Feature] --no-git → Skip git integration -/implement improve [Feature] → Improve existing feature -``` - ---- - -## E2E Pipeline - -``` -┌─────────────────────────────────────────────────────────────────────┐ -│ /implement [Feature] - E2E AUTOMATED PIPELINE │ -├─────────────────────────────────────────────────────────────────────┤ -│ │ -│ ✅ Git Integration - Auto branch, commits after each phase │ -│ ✅ Dependency Check - Validate all dependencies before start │ -│ ✅ Auto-Build - Gradle build after each layer │ -│ ✅ Lint & Format - Run detekt, spotless │ -│ ✅ Checkpoints - Review/improve after each layer │ -│ ✅ Progress Dashboard - Real-time progress tracking │ -│ │ -│ FULL PIPELINE: │ -│ ┌───────┐ ┌────────┐ ┌────────┐ ┌─────────┐ ┌───────┐ │ -│ │ GIT │─▶│VALIDATE│─▶│ CLIENT │─▶│ FEATURE │─▶│ BUILD │ │ -│ └───────┘ └────────┘ └───┬────┘ └────┬────┘ └───┬───┘ │ -│ branch deps │ │ │ │ -│ [checkpoint] [checkpoint] [commit] │ -│ │ -└─────────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Key Files - -1. `claude-product-cycle/design-spec-layer/features/[feature]/SPEC.md` - What to build -2. `claude-product-cycle/design-spec-layer/features/[feature]/API.md` - APIs needed -3. `claude-product-cycle/design-spec-layer/_shared/PATTERNS.md` - Implementation patterns - ---- - -## Implementation Flow - -``` -┌─────────────────────────────────────────────────────────────────────┐ -│ E2E IMPLEMENTATION PIPELINE │ -├─────────────────────────────────────────────────────────────────────┤ -│ │ -│ PHASE 0: GIT SETUP │ -│ ├─→ Check working directory is clean │ -│ ├─→ Create branch: git checkout -b feature/{name} │ -│ └─→ [AUTO-CONTINUE] │ -│ │ -│ PHASE 1: DEPENDENCY VALIDATION │ -│ ├─→ Read SPEC.md + API.md │ -│ ├─→ Check required services exist │ -│ ├─→ Check Kotlin dependencies available │ -│ ├─→ Identify gaps │ -│ └─→ [AUTO-CONTINUE if all deps satisfied] │ -│ │ -│ PHASE 2: CLIENT LAYER │ -│ ├─→ Create/update DTOs in core/network/model/ (if needed) │ -│ ├─→ Create/update Service in core/network/services/ │ -│ ├─→ Create/update Repository in core/data/repository/ │ -│ ├─→ Register in DI modules │ -│ ├─→ 🔨 BUILD: ./gradlew :core:network:build :core:data:build │ -│ ├─→ 🧹 LINT: spotlessApply │ -│ ├─→ 📝 COMMIT: git commit -m "feat({name}): Add client layer" │ -│ └─→ ⏸️ CHECKPOINT: Client Summary + Options │ -│ │ -│ PHASE 3: FEATURE LAYER │ -│ ├─→ Create ViewModel (State, Event, Action) │ -│ ├─→ Create Screen (Compose UI) │ -│ ├─→ Create Components │ -│ ├─→ Create Navigation │ -│ ├─→ Register in DI module │ -│ ├─→ 🔨 BUILD: ./gradlew :feature:{name}:build │ -│ ├─→ 🧹 LINT: spotlessApply detekt │ -│ ├─→ 📝 COMMIT: git commit -m "feat({name}): Add feature layer" │ -│ └─→ ⏸️ CHECKPOINT: Feature Summary + Options │ -│ │ -│ PHASE 4: FINALIZE │ -│ ├─→ Update feature's STATUS.md │ -│ ├─→ Update main STATUS.md │ -│ ├─→ 🔨 FINAL BUILD: ./gradlew build │ -│ └─→ 📝 COMMIT: git commit -m "docs({name}): Update status" │ -│ │ -└─────────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Checkpoint Templates - -### After CLIENT Layer: - -``` -┌──────────────────────────────────────────────────────────────────────┐ -│ ✅ CLIENT LAYER COMPLETE │ -├──────────────────────────────────────────────────────────────────────┤ -│ │ -│ Created/Updated Files: │ -│ ├─ core/network/model/[Feature]Dto.kt │ -│ ├─ core/network/services/[Feature]Service.kt │ -│ ├─ core/data/repository/[Feature]Repository.kt │ -│ └─ core/data/repositoryImpl/[Feature]RepositoryImpl.kt │ -│ │ -│ Registered in DI: │ -│ ├─ NetworkModule: [Feature]Service ✅ │ -│ └─ DataModule: [Feature]Repository ✅ │ -│ │ -│ 🔨 BUILD: :core:network ✅ :core:data ✅ │ -│ 🧹 LINT: spotlessApply ✅ │ -│ 📝 COMMIT: feat([feature]): Add client layer │ -│ │ -├──────────────────────────────────────────────────────────────────────┤ -│ Options: │ -│ • c / continue → Proceed to FEATURE layer │ -│ • i / improve → Describe what to improve │ -│ • v / view → Show file content │ -└──────────────────────────────────────────────────────────────────────┘ -``` - -### After FEATURE Layer: - -``` -┌──────────────────────────────────────────────────────────────────────┐ -│ ✅ FEATURE LAYER COMPLETE │ -├──────────────────────────────────────────────────────────────────────┤ -│ │ -│ Created/Updated Files: │ -│ ├─ feature/[name]/[Feature]ViewModel.kt │ -│ ├─ feature/[name]/[Feature]Screen.kt │ -│ ├─ feature/[name]/components/*.kt │ -│ ├─ feature/[name]/navigation/[Feature]Navigation.kt │ -│ └─ feature/[name]/di/[Feature]Module.kt │ -│ │ -│ Navigation: │ -│ └─ Route registered ✅ │ -│ │ -│ 🔨 BUILD: :feature:[name] ✅ │ -│ 🧹 LINT: spotlessApply ✅ detekt ✅ │ -│ 📝 COMMIT: feat([feature]): Add feature layer │ -│ │ -├──────────────────────────────────────────────────────────────────────┤ -│ Options: │ -│ • c / continue → Complete implementation, update status │ -│ • i / improve → Describe improvement │ -│ • v / view [file] → Show specific file content │ -└──────────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Final Report Template - -``` -╔══════════════════════════════════════════════════════════════════════╗ -║ /implement [Feature] - COMPLETE ║ -╠══════════════════════════════════════════════════════════════════════╣ -║ ║ -║ ✅ PHASE 0: GIT SETUP ║ -║ └─ Branch: feature/[name] ║ -║ ║ -║ ✅ PHASE 1: DEPENDENCY VALIDATION ║ -║ └─ All dependencies satisfied ║ -║ ║ -║ ✅ PHASE 2: CLIENT LAYER ║ -║ ├─ Files: [count] created/updated ║ -║ ├─ Build: :core:network ✅ :core:data ✅ ║ -║ └─ Commit: feat([feature]): Add client layer ║ -║ ║ -║ ✅ PHASE 3: FEATURE LAYER ║ -║ ├─ Files: [count] created/updated ║ -║ ├─ Build: :feature:[name] ✅ ║ -║ └─ Commit: feat([feature]): Add feature layer ║ -║ ║ -║ ✅ PHASE 4: FINALIZE ║ -║ ├─ Updated: STATUS.md ║ -║ ├─ Final Build: ./gradlew build ✅ ║ -║ └─ Commit: docs([feature]): Update status ║ -║ ║ -╠══════════════════════════════════════════════════════════════════════╣ -║ 📊 SUMMARY ║ -║ ├─ Files: +[count] created, ~[count] modified ║ -║ ├─ Commits: [count] ║ -║ └─ Errors: 0 ║ -║ ║ -╠══════════════════════════════════════════════════════════════════════╣ -║ 🎉 IMPLEMENTATION COMPLETE ║ -║ ║ -║ Next steps: ║ -║ • Push branch: git push -u origin feature/[name] ║ -║ • Create PR: gh pr create ║ -║ • Verify: /verify [Feature] ║ -║ ║ -╚══════════════════════════════════════════════════════════════════════╝ -``` - ---- - -## Cross-Update Rules - -After ANY implementation: -1. Update feature's `STATUS.md` -2. Update main `claude-product-cycle/design-spec-layer/STATUS.md` -3. Add changelog entries - ---- - -## If No Feature Name Provided - -Show feature list: - -``` -📋 FEATURES AVAILABLE FOR IMPLEMENTATION: - -| Feature | Status | Client | Feature | Command | -|---------|--------|--------|---------|---------| -| auth | ✅ Done | ✅ | ✅ | /implement auth | -| home | ✅ Done | ✅ | ✅ | /implement home | -... - -Which feature do you want to implement? -``` diff --git a/claude-product-cycle/commands-layer/mockup.md b/claude-product-cycle/commands-layer/mockup.md deleted file mode 100644 index f0d5436dd..000000000 --- a/claude-product-cycle/commands-layer/mockup.md +++ /dev/null @@ -1,409 +0,0 @@ -# /mockup - Design Mockup Generation - -## Purpose -Generate visual design mockups from feature specifications using Figma plugin or AI tool prompts. - ---- - -## Command Variants - -``` -/mockup → Show available features -/mockup [Feature] → Generate Figma plugin code -/mockup [Feature] prompts → Generate AI tool prompts -/mockup [Feature] tokens → Generate design tokens JSON -/mockup sync → Update mockup status across features -``` - ---- - -## Model Recommendation - -**This command works well with both Sonnet and Opus**. Sonnet for quick prompt generation, Opus for complex multi-screen mockups. - ---- - -## MCP Connection Check (IMPORTANT) - -Before generating mockups, CHECK if Figma MCP is connected. If not, prompt user: - -``` -┌───────────────────────────────────────────────────────────────────┐ -│ ⚠️ FIGMA MCP NOT CONNECTED │ -├───────────────────────────────────────────────────────────────────┤ -│ │ -│ Figma MCP enables: │ -│ • Direct design-to-code workflow │ -│ • Reading Figma frames for implementation │ -│ • Better design accuracy │ -│ │ -│ OPTIONS: │ -│ │ -│ [1] Connect Figma MCP now (Recommended) │ -│ → Run: claude mcp add figma https://mcp.figma.com/mcp │ -│ → Requires Figma account authentication │ -│ │ -│ [2] Skip - Continue with manual workflow │ -│ → Generate prompts/plugin code │ -│ → Manually export to Figma later │ -│ → Connect MCP before /implement │ -│ │ -│ [3] Cancel │ -│ │ -└───────────────────────────────────────────────────────────────────┘ - -Which option do you prefer? -``` - -### Connection Commands Reference - -```bash -# Figma MCP (for design-to-code) -claude mcp add figma https://mcp.figma.com/mcp - -# Check connected MCPs -claude mcp list - -# Remove MCP -claude mcp remove figma -``` - -### When to Check MCP - -| Command Variant | MCP Required | Check Timing | -|-----------------|--------------|--------------| -| `/mockup [feature]` | Optional | After generation | -| `/mockup [feature] prompts` | Optional | After generation | -| `/mockup [feature] tokens` | No | Skip check | -| Before `/implement` | Yes | Must connect | - ---- - -## Key Files - -``` -claude-product-cycle/mockup-layer/ -├── LAYER_STATUS.md # Mockup layer status -├── README.md # Usage documentation -├── figma-plugin/ # Figma plugin source -│ ├── package.json -│ ├── manifest.json -│ └── src/ -│ ├── plugin.ts # Main plugin entry -│ ├── design-system/ # Material Design 3 tokens -│ │ └── tokens.ts -│ ├── generators/ # Component generators -│ │ └── components/ -│ └── utils/ -│ └── helpers.ts -├── scripts/ # Build scripts -└── templates/ # Prompt templates - -claude-product-cycle/design-spec-layer/features/[feature]/ -├── SPEC.md # Source specification -├── API.md # API documentation -└── mockups/ # Generated mockups (NEW) - ├── PROMPTS.md # AI tool prompts - ├── figma-generator.ts # Feature-specific Figma code - └── design-tokens.json # Feature design tokens -``` - ---- - -## Workflow - -``` -┌───────────────────────────────────────────────────────────────────┐ -│ /mockup [Feature] WORKFLOW │ -├───────────────────────────────────────────────────────────────────┤ -│ │ -│ STEP 1: READ SPECIFICATION │ -│ ├─→ Read features/[feature]/SPEC.md │ -│ ├─→ Parse ASCII mockups section │ -│ ├─→ Extract component definitions │ -│ └─→ Identify screen layout structure │ -│ │ -│ STEP 2: ANALYZE COMPONENTS │ -│ ├─→ Map ASCII elements to Material Design 3 components │ -│ ├─→ Identify custom components needed │ -│ ├─→ Determine color/typography tokens │ -│ └─→ List required generators │ -│ │ -│ STEP 3: GENERATE OUTPUT (based on variant) │ -│ │ │ -│ │ [Default: Figma Plugin] │ -│ │ ├─→ Generate TypeScript code using generators │ -│ │ ├─→ Output to features/[feature]/mockups/figma-generator.ts │ -│ │ └─→ Instructions to run in Figma │ -│ │ │ -│ │ [prompts variant] │ -│ │ ├─→ Generate detailed prompts for AI tools │ -│ │ ├─→ Output to features/[feature]/mockups/PROMPTS.md │ -│ │ └─→ Include Google Stitch, Uizard, Visily formats │ -│ │ │ -│ │ [tokens variant] │ -│ │ ├─→ Extract design tokens from SPEC │ -│ │ ├─→ Output to features/[feature]/mockups/design-tokens.json │ -│ │ └─→ Include colors, typography, spacing │ -│ │ │ -│ STEP 4: UPDATE STATUS │ -│ ├─→ Update mockup-layer/LAYER_STATUS.md │ -│ └─→ Add mockup status to feature table │ -│ │ -│ STEP 5: OUTPUT NEXT STEPS │ -│ └─→ Instructions to use generated output │ -│ │ -└───────────────────────────────────────────────────────────────────┘ -``` - ---- - -## PROMPTS.md Template - -```markdown -# [Feature Name] - AI Mockup Prompts - -> Generated from: features/[feature]/SPEC.md -> Generated on: [Date] - ---- - -## Screen 1: [Screen Name] - -### Google Stitch / Visily Prompt - -``` -Create a [screen type] mobile screen with Material Design 3: - -**Header:** -- [Component description] - -**Main Content:** -- [Section 1]: [Description] -- [Section 2]: [Description] - -**Footer:** -- [Component description] - -**Style Guidelines:** -- Color scheme: Purple primary (#6750A4), white surface -- Typography: Inter font family -- Spacing: 16px standard padding -- Platform: Android mobile app (393x852) -``` - -### Uizard Prompt - -``` -Design a mobile banking app screen showing: -1. [Key element 1] -2. [Key element 2] -3. [Key element 3] - -Style: Modern, clean, Material Design 3 -Colors: Purple accent on white background -``` - ---- - -## Component Prompts - -### [Component Name] -``` -[Detailed prompt for individual component] -``` - ---- - -## Export Instructions - -1. Generate design in [AI Tool] -2. Export to Figma (if available) -3. Connect Figma MCP to Claude Code -4. Run /implement [feature] for code generation -``` - ---- - -## figma-generator.ts Template - -```typescript -/** - * [Feature Name] - Figma Mockup Generator - * Generated from: features/[feature]/SPEC.md - */ - -import { - createScreen, - createTopBar, - createBottomNav, - createCard, - // ... other imports -} from '../../mockup-layer/figma-plugin/src/generators' - -export async function generate[Feature]Screen(): Promise { - const screen = createScreen({ - name: '[Feature] Screen', - hasTopBar: true, - hasBottomNav: true, - }) - - // Add components based on SPEC.md - // ... - - return screen -} -``` - ---- - -## design-tokens.json Template - -```json -{ - "feature": "[Feature Name]", - "generated": "[Date]", - "tokens": { - "colors": { - "primary": "#6750A4", - "surface": "#FFFBFE", - "custom": {} - }, - "typography": { - "headline": { "size": 28, "weight": 400 }, - "body": { "size": 16, "weight": 400 } - }, - "spacing": { - "screen": 16, - "section": 24, - "component": 8 - }, - "components": [ - { - "name": "[Component]", - "type": "card|list|button|input", - "properties": {} - } - ] - } -} -``` - ---- - -## Output Template - -After generating mockup assets, output: - -``` -┌───────────────────────────────────────────────────────────────────┐ -│ MOCKUP GENERATION COMPLETE │ -├───────────────────────────────────────────────────────────────────┤ -│ │ -│ FEATURE: [Feature Name] │ -│ SOURCE: features/[feature]/SPEC.md │ -│ │ -│ ════════════════════════════════════════════════════════════════ │ -│ │ -│ GENERATED FILES: │ -│ ✅ features/[feature]/mockups/PROMPTS.md │ -│ ✅ features/[feature]/mockups/figma-generator.ts │ -│ ✅ features/[feature]/mockups/design-tokens.json │ -│ │ -│ ════════════════════════════════════════════════════════════════ │ -│ │ -│ OPTION A: FIGMA PLUGIN │ -│ 1. cd claude-product-cycle/mockup-layer/figma-plugin │ -│ 2. npm install && npm run build │ -│ 3. In Figma: Plugins → Development → Import manifest │ -│ 4. Run: Plugins → Mifos Mockup Generator → Generate [Feature] │ -│ │ -│ OPTION B: AI TOOL │ -│ 1. Open features/[feature]/mockups/PROMPTS.md │ -│ 2. Copy prompt for Google Stitch / Uizard / Visily │ -│ 3. Generate and export to Figma │ -│ │ -│ ════════════════════════════════════════════════════════════════ │ -│ │ -│ AFTER MOCKUP IS IN FIGMA: │ -│ 1. Connect Figma MCP: claude mcp add figma https://mcp.figma.com │ -│ 2. Run: /implement [feature] │ -│ │ -└───────────────────────────────────────────────────────────────────┘ -``` - ---- - -## If No Feature Name Provided - -Show available features: - -``` -🎨 FEATURES AVAILABLE FOR MOCKUP GENERATION: - -| Feature | SPEC | Mockup Status | Command | -|---------|------|---------------|---------| -| dashboard | ✅ | 📋 Planned | /mockup dashboard | -| auth | ✅ | - | /mockup auth | -| home | ✅ | - | /mockup home | -| accounts | ✅ | - | /mockup accounts | -| ... - -━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - -COMMAND VARIANTS: - /mockup [feature] Generate Figma plugin code - /mockup [feature] prompts Generate AI tool prompts - /mockup [feature] tokens Generate design tokens JSON - -Which feature do you want to generate mockups for? -``` - ---- - -## Component Mapping Reference - -| ASCII Element | Material Design 3 | Generator Function | -|---------------|-------------------|-------------------| -| `[Title]` | Top App Bar | `createTopBar()` | -| `┌───┐` box | Card | `createCard()` | -| `[Button]` | Filled Button | `createButton()` | -| `[___]` | Text Field | `createInputField()` | -| `• Item` | List Item | `createListItem()` | -| `[🏠][📊]` | Bottom Nav | `createBottomNav()` | -| `[Icon] Label` | Quick Action | `createQuickActions()` | - ---- - -## Design System Reference - -### Colors (Material Design 3) -``` -Primary: #6750A4 -OnPrimary: #FFFFFF -Surface: #FFFBFE -OnSurface: #1C1B1F -Error: #B3261E -Success: #2E7D32 -``` - -### Typography -``` -Display Large: 57px / 400 -Headline Medium: 28px / 400 -Title Large: 22px / 400 -Body Large: 16px / 400 -Label Medium: 12px / 500 -``` - -### Spacing -``` -xs: 4px | sm: 8px | md: 16px | lg: 24px | xl: 32px -``` - -### Screen Dimensions -``` -Mobile: 393 x 852 -Mobile Large: 430 x 932 -Tablet: 768 x 1024 -``` diff --git a/claude-product-cycle/commands-layer/projectstatus.md b/claude-product-cycle/commands-layer/projectstatus.md deleted file mode 100644 index 5832ce140..000000000 --- a/claude-product-cycle/commands-layer/projectstatus.md +++ /dev/null @@ -1,115 +0,0 @@ -# /projectstatus - Project Overview - -## Purpose -Display the current state of the Mifos Mobile project, including feature implementation status, available commands, and suggested next steps. - ---- - -## Workflow - -``` -┌───────────────────────────────────────────────────────────────────┐ -│ /projectstatus WORKFLOW │ -├───────────────────────────────────────────────────────────────────┤ -│ │ -│ STEP 1: READ STATUS FILES │ -│ ├─→ claude-product-cycle/design-spec-layer/STATUS.md │ -│ └─→ Individual feature STATUS.md files │ -│ │ -│ STEP 2: ANALYZE CODEBASE │ -│ ├─→ Check feature/ directory for implemented features │ -│ ├─→ Check core/network/services/ for API services │ -│ ├─→ Check core/data/repository/ for repositories │ -│ └─→ Compare spec vs implementation │ -│ │ -│ STEP 3: GENERATE DASHBOARD │ -│ ├─→ Feature status table │ -│ ├─→ Layer completion summary │ -│ ├─→ Available commands │ -│ └─→ Suggested next steps │ -│ │ -└───────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Output Template - -``` -╔══════════════════════════════════════════════════════════════════════╗ -║ MIFOS MOBILE - PROJECT STATUS ║ -╠══════════════════════════════════════════════════════════════════════╣ -║ ║ -║ PROJECT: Mifos Mobile (Self-Service Banking App) ║ -║ TECH STACK: Kotlin Multiplatform + Compose + Fineract API ║ -║ LAST UPDATED: [Date] ║ -║ ║ -╠══════════════════════════════════════════════════════════════════════╣ -║ FEATURE STATUS ║ -╠══════════════════════════════════════════════════════════════════════╣ -║ ║ -║ | Feature | Status | Client | Feature | Gaps | ║ -║ |-------------------|------------|--------|---------|------| ║ -║ | Auth | ✅ Done | ✅ | ✅ | 0 | ║ -║ | Home | ✅ Done | ✅ | ✅ | 0 | ║ -║ | Accounts | ✅ Done | ✅ | ✅ | 0 | ║ -║ | Loan Account | ✅ Done | ✅ | ✅ | 0 | ║ -║ | Savings Account | ✅ Done | ✅ | ✅ | 0 | ║ -║ | Share Account | ✅ Done | ✅ | ✅ | 0 | ║ -║ | Beneficiary | ✅ Done | ✅ | ✅ | 0 | ║ -║ | Transfer | ✅ Done | ✅ | ✅ | 0 | ║ -║ | Recent Transaction| ✅ Done | ✅ | ✅ | 0 | ║ -║ | Notification | ✅ Done | ✅ | ✅ | 0 | ║ -║ | Settings | ✅ Done | ✅ | ✅ | 0 | ║ -║ | Passcode | ✅ Done | - | ✅ | 0 | ║ -║ | Guarantor | ✅ Done | ✅ | ✅ | 0 | ║ -║ | QR Code | ✅ Done | - | ✅ | 0 | ║ -║ | Location | ✅ Done | - | ✅ | 0 | ║ -║ | Client Charges | ✅ Done | ✅ | ✅ | 0 | ║ -║ ║ -╠══════════════════════════════════════════════════════════════════════╣ -║ AVAILABLE COMMANDS ║ -╠══════════════════════════════════════════════════════════════════════╣ -║ ║ -║ Design: ║ -║ /design [Feature] → Create/update feature specification ║ -║ ║ -║ Implement: ║ -║ /implement [Feature] → Full E2E implementation ║ -║ /client [Feature] → Network + Data layers ║ -║ /feature [Feature] → UI layer (ViewModel + Screen) ║ -║ ║ -║ Verify: ║ -║ /verify [Feature] → Validate implementation vs spec ║ -║ ║ -╠══════════════════════════════════════════════════════════════════════╣ -║ SUGGESTED NEXT STEPS ║ -╠══════════════════════════════════════════════════════════════════════╣ -║ ║ -║ 1. Review existing features: /verify [Feature] ║ -║ 2. Improve feature: /design [Feature] for enhancements ║ -║ 3. Add new feature: /design [NewFeature] ║ -║ ║ -╚══════════════════════════════════════════════════════════════════════╝ -``` - ---- - -## Key Files to Read - -1. `claude-product-cycle/design-spec-layer/STATUS.md` - Master status tracker -2. `feature/*/` - Feature module directories -3. `core/network/services/` - API services -4. `core/data/repository/` - Repositories - ---- - -## Status Legend - -| Status | Meaning | -|--------|---------| -| ✅ Done | Feature complete, all working | -| ⚠️ Needs Update | Has gaps, spec changed, or incomplete | -| 🔄 In Progress | Currently being implemented | -| 📋 Planned | Spec exists, not started | -| 🆕 Not Started | No work done | diff --git a/claude-product-cycle/commands-layer/verify.md b/claude-product-cycle/commands-layer/verify.md deleted file mode 100644 index 7f4081195..000000000 --- a/claude-product-cycle/commands-layer/verify.md +++ /dev/null @@ -1,169 +0,0 @@ -# /verify - Implementation Verification - -## Purpose -Validate that the implementation matches the specification. Identify gaps between SPEC.md and actual code. - ---- - -## Workflow - -``` -┌───────────────────────────────────────────────────────────────────┐ -│ /verify [Feature] WORKFLOW │ -├───────────────────────────────────────────────────────────────────┤ -│ │ -│ PHASE 1: READ SPEC │ -│ ├─→ Read features/[feature]/SPEC.md │ -│ ├─→ Extract all UI sections │ -│ ├─→ Extract all user actions │ -│ ├─→ Extract state model │ -│ └─→ Extract API requirements │ -│ │ -│ PHASE 2: CHECK ACTUAL CODE │ -│ ├─→ Read feature/[name]/*ViewModel.kt │ -│ ├─→ Read feature/[name]/*Screen.kt │ -│ ├─→ Read feature/[name]/components/*.kt │ -│ ├─→ Read core/network/services/*Service.kt │ -│ └─→ Read core/data/repository/*Repository.kt │ -│ │ -│ PHASE 3: COMPARE SPEC VS CODE │ -│ ├─→ All sections from spec implemented? │ -│ ├─→ All user actions handled? │ -│ ├─→ State model matches? │ -│ ├─→ All API calls present? │ -│ └─→ DI registration complete? │ -│ │ -│ PHASE 4: CHECK LAYER INTEGRITY │ -│ ├─→ Network → Data → Feature flow correct? │ -│ ├─→ No layer violations? │ -│ └─→ Navigation configured? │ -│ │ -│ PHASE 5: GENERATE REPORT │ -│ ├─→ List all gaps found │ -│ ├─→ List suggestions for improvement │ -│ └─→ Output: Gap report or "✅ Feature verified" │ -│ │ -└───────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Verification Checklist - -### UI Sections -- [ ] All sections from SPEC.md ASCII mockup present in Screen -- [ ] Loading state handled -- [ ] Error state handled -- [ ] Empty state handled (if applicable) - -### User Actions -- [ ] All actions from SPEC.md handled in ViewModel -- [ ] Actions trigger correct events/state changes -- [ ] Navigation works correctly - -### State Model -- [ ] State class matches SPEC.md definition -- [ ] All required fields present -- [ ] Correct default values - -### API Integration -- [ ] All required endpoints called -- [ ] Error handling for API failures -- [ ] Loading states during API calls - -### DI Registration -- [ ] ViewModel registered in module -- [ ] Repository registered in module -- [ ] Service registered in module - -### Navigation -- [ ] Route defined -- [ ] Screen registered in nav graph -- [ ] Navigation parameters correct - ---- - -## Output Templates - -### All Good: - -``` -╔══════════════════════════════════════════════════════════════════════╗ -║ ✅ VERIFICATION COMPLETE - [Feature] ║ -╠══════════════════════════════════════════════════════════════════════╣ -║ ║ -║ UI SECTIONS: ✅ All 5 sections implemented ║ -║ USER ACTIONS: ✅ All 8 actions handled ║ -║ STATE MODEL: ✅ Matches specification ║ -║ API INTEGRATION: ✅ All 3 endpoints called ║ -║ DI REGISTRATION: ✅ Complete ║ -║ NAVIGATION: ✅ Configured ║ -║ ║ -║ RESULT: Feature fully implements specification ║ -║ ║ -╚══════════════════════════════════════════════════════════════════════╝ -``` - -### Gaps Found: - -``` -╔══════════════════════════════════════════════════════════════════════╗ -║ ⚠️ VERIFICATION COMPLETE - GAPS FOUND ║ -╠══════════════════════════════════════════════════════════════════════╣ -║ ║ -║ FEATURE: [Feature] ║ -║ SPEC: claude-product-cycle/design-spec-layer/features/[feature]/SPEC.md║ -║ ║ -╠══════════════════════════════════════════════════════════════════════╣ -║ GAPS IDENTIFIED ║ -╠══════════════════════════════════════════════════════════════════════╣ -║ ║ -║ UI SECTIONS (2 gaps): ║ -║ ├─ ❌ Empty state not implemented ║ -║ └─ ❌ Pull-to-refresh missing ║ -║ ║ -║ USER ACTIONS (1 gap): ║ -║ └─ ❌ Filter action not handled ║ -║ ║ -║ API INTEGRATION (1 gap): ║ -║ └─ ❌ /self/endpoint not called ║ -║ ║ -║ TOTAL GAPS: 4 ║ -║ ║ -╠══════════════════════════════════════════════════════════════════════╣ -║ SUGGESTED FIXES ║ -╠══════════════════════════════════════════════════════════════════════╣ -║ ║ -║ 1. Add EmptyContent composable in Screen ║ -║ 2. Add SwipeRefresh wrapper in Screen ║ -║ 3. Add FilterAction and handleFilter() in ViewModel ║ -║ 4. Add endpoint call in Repository ║ -║ ║ -╠══════════════════════════════════════════════════════════════════════╣ -║ NEXT STEP ║ -║ ║ -║ Run: /implement [Feature] ║ -║ Or fix gaps manually and run: /verify [Feature] ║ -║ ║ -╚══════════════════════════════════════════════════════════════════════╝ -``` - ---- - -## Key Files to Compare - -| Spec File | Code Files | -|-----------|------------| -| features/[feature]/SPEC.md | feature/[name]/*ViewModel.kt | -| | feature/[name]/*Screen.kt | -| | feature/[name]/components/*.kt | -| features/[feature]/API.md | core/network/services/*Service.kt | -| | core/data/repository/*Repository.kt | - ---- - -## Status Update - -After verification, update: -1. `features/[feature]/STATUS.md` - Feature status -2. `claude-product-cycle/design-spec-layer/STATUS.md` - Main tracker diff --git a/claude-product-cycle/core-layer/COMPONENTS.md b/claude-product-cycle/core-layer/COMPONENTS.md deleted file mode 100644 index 63a0ff4f0..000000000 --- a/claude-product-cycle/core-layer/COMPONENTS.md +++ /dev/null @@ -1,352 +0,0 @@ -# Component Discovery Guide - -> **Purpose**: Fast component lookup with automatic updates -> **Pattern**: Static first → Dynamic fallback → Auto-update - ---- - -## Table of Contents -1. [Lookup Strategy](#lookup-strategy) -2. [Static Component Registry](#static-component-registry) -3. [Dynamic Discovery](#dynamic-discovery) -4. [Naming Conventions](#naming-conventions) -5. [Auto-Update Rules](#auto-update-rules) -6. [Component Placement](#component-placement) - ---- - -## Lookup Strategy - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ STEP 1: Check Static Registry (Fast) │ -│ → Look in tables below for existing component │ -├─────────────────────────────────────────────────────────────────┤ -│ STEP 2: If Not Found → Dynamic Search (Fallback) │ -│ → Run discovery commands to find in source │ -├─────────────────────────────────────────────────────────────────┤ -│ STEP 3: If Found Dynamically → Update Static Registry │ -│ → Add new component to appropriate table below │ -└─────────────────────────────────────────────────────────────────┘ -``` - -**Why This Pattern:** -- Static lookup is instant (read from file) -- Dynamic search catches new components -- Auto-update keeps registry current - ---- - -## Static Component Registry - -### Foundation Components (core-base/designsystem) - -**Prefix: `Kpt*`** - -#### Components (`component/`) -| Component | Purpose | Usage | -|-----------|---------|-------| -| `KptTopAppBar` | Configurable app bar | Standard/Large/Medium variants | -| `KptShimmerLoadingBox` | Skeleton loading | Loading placeholders | -| `KptSnackbarHost` | Snackbar container | Toast messages | -| `KptAnimationSpecs` | Animation specifications | Standard animations | -| `BounceAnimation` | Bounce effect | Button press feedback | -| `SlideTransition` | Slide animation | Screen transitions | - -#### Layouts (`layout/`) -| Layout | Purpose | Usage | -|--------|---------|-------| -| `KptGrid` | Responsive grid | Card grids | -| `KptFlowRow` | Horizontal flow | Tag/chip layouts | -| `KptFlowColumn` | Vertical flow | Wrapping columns | -| `KptStack` | Z-axis stacking | Overlays | -| `KptMasonryGrid` | Masonry layout | Pinterest-style | -| `KptResponsiveLayout` | Adaptive layout | Screen size adaptation | -| `KptSidebarLayout` | Sidebar with content | Navigation drawer | -| `KptSplitPane` | Resizable split | Two-panel layout | -| `AdaptiveListDetailPaneScaffold` | List-detail adaptive | Master-detail | -| `AdaptiveNavigableListDetailScaffold` | Navigable list-detail | Navigable master-detail | -| `AdaptiveNavigableSupportingPaneScaffold` | Supporting pane | Three-pane layout | -| `AdaptiveNavigationSuiteScaffold` | Navigation suite | Adaptive navigation | - -#### Theme Tokens -| Token | Access | Values | -|-------|--------|--------| -| Spacing | `KptTheme.spacing.*` | `xs`(4dp), `sm`(8dp), `md`(16dp), `lg`(24dp), `xl`(32dp) | -| Shapes | `KptTheme.shapes.*` | `small`, `medium`, `large` | -| Colors | `KptTheme.colorScheme.*` | Material3 color scheme | - ---- - -### Design System Components (core/designsystem) - -**Prefix: `Mifos*`** - -| Component | Purpose | Usage | -|-----------|---------|-------| -| `MifosScaffold` | Screen scaffold | Top bar, bottom bar, content | -| `MifosTopAppBar` | App bar | Navigation icon, title, actions | -| `MifosTopBar` | Simple title bar | Title only | -| `MifosButton` | Primary button | Main actions | -| `MifosTextField` | Text input | Form fields | -| `MifosPasswordField` | Password input | Visibility toggle | -| `MifosOtpTextField` | OTP input | Verification codes | -| `MifosSearchTextField` | Search input | Search bars | -| `MifosCard` | Card container | Content cards | -| `MifosBottomSheet` | Bottom sheet | Modal content | -| `MifosAlertDialog` | Alert dialog | Confirmations | -| `MifosBasicDialog` | Basic dialog | Simple messages | -| `MifosLoadingDialog` | Loading dialog | Blocking loader | -| `MifosTab` | Tab item | Tab navigation | -| `MifosTabPager` | Tab pager | Swipeable tabs | -| `MifosDropDownMenu` | Dropdown menu | Selection menu | -| `MifosRadioButton` | Radio button | Single selection | -| `MifosNavigation` | Navigation | Nav components | - ---- - -### Business Components (core/ui) - -**Prefix: `Mifos*` or descriptive name** - -#### Cards -| Component | Purpose | Usage | -|-----------|---------|-------| -| `MifosAccountCard` | Account display | Account list items | -| `MifosDetailsCard` | Detail display | Information cards | -| `MifosDashboardCard` | Dashboard item | Home dashboard | -| `MifosActionCard` | Action card | Clickable actions | -| `MifosItemCard` | Generic item | List items | -| `MifosLabelValueCard` | Key-value | Detail rows | -| `MifosPoweredCard` | Footer card | "Powered by" | -| `MifosTitleSearchCard` | Title + search | Searchable headers | - -#### Lists & Items -| Component | Purpose | Usage | -|-----------|---------|-------| -| `BeneficiaryCard` | Beneficiary item | Beneficiary list | -| `BeneficiariesListing` | Beneficiary list | Full list view | -| `TransactionScreenItem` | Transaction item | Transaction list | -| `FaqItemHolder` | FAQ item | Expandable FAQ | -| `AboutUsItemCard` | About item | About section | -| `MonitorListItemWithIcon` | Icon list item | Settings list | - -#### States -| Component | Purpose | Usage | -|-----------|---------|-------| -| `MifosErrorComponent` | Error state | Error display | -| `EmptyDataView` | Empty state | No data | -| `NoInternet` | Network error | Offline state | -| `MifosProgressIndicator` | Loading spinner | Inline loading | -| `MifosStatusComponent` | Status badge | Status display | -| `MifosSuccessDialog` | Success dialog | Confirmation | - -#### Forms -| Component | Purpose | Usage | -|-----------|---------|-------| -| `MifosDropDownTextField` | Dropdown field | Form dropdowns | -| `MifosOutlineDropDown` | Outlined dropdown | Outlined variant | -| `MifosDropDownPayFromComponent` | Pay from selector | Transfer forms | -| `MifosCheckBox` | Checkbox | Multi-select | -| `MFStepProcess` | Step indicator | Multi-step forms | -| `FilterTopSection` | Filter header | List filters | - -#### User/Profile -| Component | Purpose | Usage | -|-----------|---------|-------| -| `MifosUserImage` | User avatar | Profile images | -| `MifosTextUserImage` | Text avatar | Initials avatar | -| `UserProfileField` | Profile field | Profile display | -| `MifosHiddenTextRow` | Hidden text | Sensitive data | - -#### Other -| Component | Purpose | Usage | -|-----------|---------|-------| -| `MifosRoundIcon` | Round icon button | FAB-like | -| `MifosLinkText` | Link text | Clickable links | -| `MifosTextButtonWithTopDrawable` | Text button + icon | Icon buttons | -| `MifosMobileIcon` | App icon | Branding | -| `MifosRadioButtonAlertDialog` | Radio dialog | Selection dialog | -| `MifosAlertDialog` | Alert dialog | Confirmations | -| `MifosTexts` | Text styles | Styled text | - ---- - -## Dynamic Discovery - -### When to Use - -Use dynamic discovery when: -1. Component not found in static registry above -2. Searching for recently added components -3. Unsure if component exists - -### Discovery Commands - -```bash -# Foundation components (Kpt*) -ls core-base/designsystem/src/commonMain/kotlin/**/component/ -ls core-base/designsystem/src/commonMain/kotlin/**/layout/ - -# Design system components (Mifos* in designsystem) -ls core/designsystem/src/commonMain/kotlin/**/component/ - -# Business components (core/ui) -ls core/ui/src/commonMain/kotlin/**/component/ -``` - -### Search by Type - -```bash -# Find all Button components -grep -r "@Composable" core/ core-base/ | grep -i "button" - -# Find all Card components -grep -r "@Composable" core/ core-base/ | grep -i "card" - -# Find all Dialog components -grep -r "@Composable" core/ core-base/ | grep -i "dialog" - -# Find all TextField/Input components -grep -r "@Composable" core/ core-base/ | grep -iE "(textfield|input|field)" - -# Find loading/progress components -grep -r "@Composable" core/ core-base/ | grep -iE "(loading|progress|shimmer)" - -# Find error/empty state components -grep -r "@Composable" core/ core-base/ | grep -iE "(error|empty|nodata)" -``` - -### Claude Glob Patterns - -``` -core-base/designsystem/**/component/*.kt -core-base/designsystem/**/layout/*.kt -core/designsystem/**/component/*.kt -core/ui/**/component/*.kt -``` - ---- - -## Naming Conventions - -### Prefix Rules - -| Prefix | Location | Purpose | -|--------|----------|---------| -| `Kpt*` | core-base/designsystem | Foundation/Theme | -| `Mifos*` | core/designsystem | UI primitives | -| `Mifos*` | core/ui | Business components | -| `[Feature]*` | feature/[name]/components | Feature-shared | -| `[Screen]*` | feature/[name]/[screen]/components | Screen-specific | - -### Component Type by Name Pattern - -| Pattern | Type | Look In | -|---------|------|---------| -| `*Button` | Action | core/designsystem | -| `*TextField`, `*Field` | Input | core/designsystem | -| `*Dialog`, `*Sheet` | Modal | core/designsystem | -| `*Card` | Container | core/ui | -| `*Item` | List item | core/ui | -| `*Component`, `*View` | Composite | core/ui | -| `*Indicator` | Feedback | core/ui | -| `*Grid`, `*Row`, `*Column` | Layout | core-base | -| `*Scaffold`, `*Layout` | Structure | core-base | - ---- - -## Auto-Update Rules - -### When to Update This File - -| Scenario | Action | -|----------|--------| -| Found in static registry | No update needed | -| Found via dynamic search | ADD to static registry | -| Created new component in core/ | ADD to static registry | -| Created feature component | No update (not in registry) | - -### How to Update - -When you find a component dynamically that's not in the static registry: - -1. Identify the correct table (Foundation/Design System/Business) -2. Add a new row with: Component | Purpose | Usage -3. Keep tables alphabetically sorted within categories - -**Example:** -```markdown -| `NewMifosComponent` | Brief purpose | When to use | -``` - -### What NOT to Update - -- Feature-specific components (`feature/*/components/`) -- Screen-specific components (`feature/*/[screen]/components/`) -- Temporary or experimental components - ---- - -## Component Placement - -### Decision Tree - -``` -Creating a new component? -│ -├── Is it a theme/layout primitive? -│ └── YES → core-base/designsystem (Kpt*) -│ -├── Is it a UI primitive (Button, TextField)? -│ └── YES → core/designsystem (Mifos*) -│ -├── Used in 2+ features? -│ └── YES → core/ui (Mifos*) -│ -├── Used across screens in same feature? -│ └── YES → feature/[name]/components/ -│ -└── Used only in one screen? - └── YES → feature/[name]/[screen]/components/ -``` - -### After Creating in core/ - -If you create a new component in `core/` or `core-base/`: -1. **ADD it to the static registry above** -2. Follow the naming convention -3. Include Purpose and Usage columns - ---- - -## Quick Reference - -### I need a... - -| Need | Check Static Table | If Not Found | -|------|-------------------|--------------| -| Button | Design System Components | `grep -i button core/` | -| Card | Business Components → Cards | `grep -i card core/` | -| List item | Business Components → Lists | `grep -i item core/` | -| Loading | Foundation Components | Already exists: `KptShimmerLoadingBox` | -| Error | Business Components → States | Already exists: `MifosErrorComponent` | -| Empty | Business Components → States | Already exists: `EmptyDataView` | -| Dialog | Design System Components | `grep -i dialog core/` | -| Layout | Foundation Layouts | `grep -i layout core-base/` | - ---- - -## Related Files - -- Feature Layer Guide: `feature-layer/LAYER_GUIDE.md` -- Compose Patterns: `feature-layer/instructions/COMPOSE.md` -- Design Spec Patterns: `design-spec-layer/_shared/PATTERNS.md` - ---- - -## Changelog - -| Date | Change | -|------|--------| -| 2025-01-05 | Created with hybrid static + dynamic approach | diff --git a/claude-product-cycle/design-spec-layer/DESIGN_TOKENS_INDEX.md b/claude-product-cycle/design-spec-layer/DESIGN_TOKENS_INDEX.md deleted file mode 100644 index 64b597394..000000000 --- a/claude-product-cycle/design-spec-layer/DESIGN_TOKENS_INDEX.md +++ /dev/null @@ -1,283 +0,0 @@ -# Design Tokens Index - O(1) Lookup - -> **8 features** with tokens | **2 formats** (Google Stitch, MD3) | **Last Updated**: 2026-01-05 - ---- - -## Quick Lookup - -| # | Feature | Has Tokens | Format | Colors | Typography | Components | Animations | -|:-:|---------|:----------:|--------|:------:|:----------:|:----------:|:----------:| -| 1 | auth | ✅ | google-stitch | ✅ | ✅ | ✅ | ✅ | -| 2 | dashboard | ✅ | md3 | ✅ | ✅ | ✅ | ❌ | -| 3 | settings | ✅ | md3 | ✅ | ✅ | ❌ | ❌ | -| 4 | guarantor | ✅ | md3 | ✅ | ✅ | ❌ | ❌ | -| 5 | qr | ✅ | md3 | ✅ | ✅ | ❌ | ❌ | -| 6 | passcode | ✅ | md3 | ✅ | ✅ | ❌ | ❌ | -| 7 | location | ✅ | md3 | ✅ | ✅ | ❌ | ❌ | -| 8 | client-charge | ✅ | md3 | ✅ | ✅ | ❌ | ❌ | -| 9 | accounts | ❌ | - | - | - | - | - | -| 10 | beneficiary | ❌ | - | - | - | - | - | -| 11 | home | ❌ | - | - | - | - | - | -| 12 | loan-account | ❌ | - | - | - | - | - | -| 13 | notification | ❌ | - | - | - | - | - | -| 14 | recent-transaction | ❌ | - | - | - | - | - | -| 15 | savings-account | ❌ | - | - | - | - | - | -| 16 | share-account | ❌ | - | - | - | - | - | -| 17 | transfer | ❌ | - | - | - | - | - | - ---- - -## Token Formats - -### Google Stitch Format (v2.0) - -```json -{ - "feature": "auth", - "generated": "2026-01-03", - "tool": "google-stitch", - "version": "2.0", - "tokens": { - "colors": { - "primary": { "gradient": {...}, "solid": "#667EEA" }, - "surface": { "light": "#FFFFFF", "dark": "#0D1117" }, - "text": { "primary": {...}, "secondary": {...} }, - "semantic": { "success": "#00D09C", "error": "#FF4757" } - }, - "typography": { "fontFamily": "Inter", "display": {...}, "headline": {...} }, - "spacing": { "xs": "4dp", "sm": "8dp", "md": "12dp", "lg": "16dp" }, - "radius": { "sm": "8dp", "md": "12dp", "lg": "16dp" }, - "shadow": { "button": {...}, "card": {...} } - }, - "screens": [...], - "components": [...], - "animations": {...} -} -``` - -### MD3 Format (Standard) - -```json -{ - "feature": "Dashboard", - "generated": "2025-12-28", - "tokens": { - "colors": { "primary": "#6750A4", "surface": "#FFFBFE", ... }, - "typography": { "displayLarge": {...}, "bodyMedium": {...} }, - "spacing": { "xs": 4, "sm": 8, "md": 16 }, - "radius": { "sm": 8, "md": 12, "lg": 16 } - }, - "components": [...], - "screens": [...] -} -``` - ---- - -## O(1) Path Pattern - -``` -design-spec-layer/features/[feature]/mockups/design-tokens.json -``` - ---- - -## Token → DesignToken Mapping - -| Token JSON | Compose DesignToken | Type | -|------------|---------------------|------| -| `tokens.spacing.xs` | `DesignToken.spacing.extraSmall` | `Dp` | -| `tokens.spacing.sm` | `DesignToken.spacing.small` | `Dp` | -| `tokens.spacing.md` | `DesignToken.spacing.medium` | `Dp` | -| `tokens.spacing.lg` | `DesignToken.spacing.large` | `Dp` | -| `tokens.radius.sm` | `DesignToken.shapes.small` | `Shape` | -| `tokens.radius.md` | `DesignToken.shapes.medium` | `Shape` | -| `tokens.radius.lg` | `DesignToken.shapes.large` | `Shape` | -| `tokens.colors.primary` | `MaterialTheme.colorScheme.primary` | `Color` | -| `tokens.colors.surface` | `MaterialTheme.colorScheme.surface` | `Color` | - ---- - -## Gradient Support - -Features with gradients (Google Stitch format): - -| Feature | Gradient Type | Colors | Usage | -|---------|---------------|--------|-------| -| auth | primary | `#667EEA → #764BA2` | Buttons, headers | -| auth | secondary | `#11998E → #38EF7D` | Success states | - -### Compose Gradient Code - -```kotlin -// From design-tokens.json: -// "gradient": { "start": "#667EEA", "end": "#764BA2", "angle": 45 } - -val AuthGradient = Brush.linearGradient( - colors = listOf( - Color(0xFF667EEA), - Color(0xFF764BA2) - ), - start = Offset(0f, 0f), - end = Offset(Float.POSITIVE_INFINITY, Float.POSITIVE_INFINITY) -) - -// Usage in Button: -Button( - onClick = { }, - colors = ButtonDefaults.buttonColors(containerColor = Color.Transparent), - modifier = Modifier.background(AuthGradient, shape = DesignToken.shapes.large) -) { - Text("Login") -} -``` - ---- - -## Component Specs - -Features with component specifications: - -| Feature | Components | Details | -|---------|:----------:|---------| -| auth | 5 | primary-button, text-input, otp-input, auth-card, trust-badge | -| dashboard | 7 | NetWorthCard, QuickActions, AccountCard, TransactionItem, BottomNav, TopBar, SectionHeader | - -### Component Spec Example - -```json -{ - "id": "primary-button", - "name": "Primary Button", - "specs": { - "height": "56dp", - "radius": "16dp", - "background": "gradient", - "textSize": "16sp", - "textWeight": "600", - "textColor": "#FFFFFF", - "shadow": "button" - } -} -``` - -### Generated Compose Code - -```kotlin -@Composable -fun AuthPrimaryButton( - text: String, - onClick: () -> Unit, - modifier: Modifier = Modifier, -) { - Button( - onClick = onClick, - modifier = modifier - .height(56.dp) - .background( - brush = AuthGradient, - shape = RoundedCornerShape(16.dp) - ), - colors = ButtonDefaults.buttonColors( - containerColor = Color.Transparent - ), - shape = RoundedCornerShape(16.dp), - ) { - Text( - text = text, - fontSize = 16.sp, - fontWeight = FontWeight.SemiBold, - color = Color.White, - ) - } -} -``` - ---- - -## Animation Specs - -Features with animation specifications: - -| Feature | Animations | Details | -|---------|:----------:|---------| -| auth | 5 | pageTransition, buttonPress, inputFocus, successCelebration, errorShake | - -### Animation Spec Example - -```json -"animations": { - "buttonPress": { - "scale": "0.98", - "duration": "100ms" - }, - "errorShake": { - "translateX": "[-10, 10, -5, 5, 0]", - "duration": "300ms" - } -} -``` - ---- - -## Usage in /feature Command - -### Phase 0: O(1) Context Loading - -```kotlin -// Check if design tokens exist -val tokensPath = "design-spec-layer/features/$feature/mockups/design-tokens.json" -val hasTokens = checkInIndex("DESIGN_TOKENS_INDEX.md", feature) -val tokenFormat = getTokenFormat(feature) // "google-stitch" | "md3" | null -``` - -### Phase 3: Apply Design Tokens - -``` -IF hasTokens THEN - 1. Read design-tokens.json - 2. Extract colors → Generate feature-specific colors if custom - 3. Extract gradients → Generate Brush definitions - 4. Extract component specs → Apply to generated components - 5. Extract animations → Add animation modifiers - 6. Map spacing/radius → Use DesignToken equivalents -ELSE - Use default DesignToken values -END -``` - ---- - -## Auto-Update Rules - -| Scenario | Action | -|----------|--------| -| New tokens generated | Add row to Quick Lookup table | -| `/design mockup` completes | Update Has Tokens column | -| Token format changes | Update Format column | -| Components added | Update Components column | - ---- - -## Related Files - -- [FEATURES_INDEX.md](./FEATURES_INDEX.md) - All features -- [MOCKUPS_INDEX.md](./MOCKUPS_INDEX.md) - Mockup status -- `core/designsystem/theme/DesignToken.kt` - Compose design tokens -- `core/designsystem/theme/Color.kt` - Color definitions - ---- - -## Commands - -```bash -# Check token status -/gap-analysis design tokens - -# Generate tokens for feature -/design [feature] mockup - -# Feature with token integration -/feature [feature] # Auto-applies tokens if available -``` diff --git a/claude-product-cycle/design-spec-layer/FEATURES_INDEX.md b/claude-product-cycle/design-spec-layer/FEATURES_INDEX.md deleted file mode 100644 index 32c98d472..000000000 --- a/claude-product-cycle/design-spec-layer/FEATURES_INDEX.md +++ /dev/null @@ -1,116 +0,0 @@ -# Features Index - O(1) Lookup - -> **18 features** | All have SPEC + API + STATUS - ---- - -## Quick Lookup - -| # | Feature | Dir | SPEC | API | STATUS | Mockups | -|:-:|---------|-----|:----:|:---:|:------:|:-------:| -| 1 | accounts | features/accounts/ | ✅ | ✅ | ✅ | ⚠️ | -| 2 | auth | features/auth/ | ✅ | ✅ | ✅ | ✅ | -| 3 | beneficiary | features/beneficiary/ | ✅ | ✅ | ✅ | ⚠️ | -| 4 | client-charge | features/client-charge/ | ✅ | ✅ | ✅ | ⚠️ | -| 5 | dashboard | features/dashboard/ | ✅ | ✅ | ✅ | ⚠️ | -| 6 | guarantor | features/guarantor/ | ✅ | ✅ | ✅ | ⚠️ | -| 7 | home | features/home/ | ✅ | ✅ | ✅ | ⚠️ | -| 8 | loan-account | features/loan-account/ | ✅ | ✅ | ✅ | ⚠️ | -| 9 | location | features/location/ | ✅ | ✅ | ✅ | ⚠️ | -| 10 | notification | features/notification/ | ✅ | ✅ | ✅ | ⚠️ | -| 11 | passcode | features/passcode/ | ✅ | ✅ | ✅ | ⚠️ | -| 12 | qr | features/qr/ | ✅ | ✅ | ✅ | ⚠️ | -| 13 | recent-transaction | features/recent-transaction/ | ✅ | ✅ | ✅ | ⚠️ | -| 14 | savings-account | features/savings-account/ | ✅ | ✅ | ✅ | ⚠️ | -| 15 | settings | features/settings/ | ✅ | ✅ | ✅ | ⚠️ | -| 16 | share-account | features/share-account/ | ✅ | ✅ | ✅ | ⚠️ | -| 17 | transfer | features/transfer/ | ✅ | ✅ | ✅ | ⚠️ | - -**Legend**: ✅ Complete | ⚠️ Partial | ❌ Missing - ---- - -## O(1) File Access - -| Need | Path | -|------|------| -| Specification | `features/[name]/SPEC.md` | -| API Endpoints | `features/[name]/API.md` | -| Feature Status | `features/[name]/STATUS.md` | -| Mockups | `features/[name]/mockups/` | -| Design Tokens | `features/[name]/mockups/design-tokens.json` | - ---- - -## Feature Categories - -### Authentication & Security (3) - -| Feature | Purpose | -|---------|---------| -| auth | Login, Registration, Password recovery | -| passcode | Biometric/PIN security | -| settings | Password change, security settings | - -### Account Management (4) - -| Feature | Purpose | -|---------|---------| -| accounts | Account overview, all account types | -| savings-account | Savings account details, operations | -| loan-account | Loan details, repayment schedule | -| share-account | Share account details | - -### Transactions (3) - -| Feature | Purpose | -|---------|---------| -| beneficiary | Third-party transfer beneficiaries | -| transfer | Fund transfers (self & TPT) | -| recent-transaction | Transaction history | - -### Information & Utilities (5) - -| Feature | Purpose | -|---------|---------| -| home | Dashboard, quick actions | -| notification | Push notifications | -| qr | QR code generation/scanning | -| location | Branch locator | -| client-charge | Client charges/fees | - -### Supporting Features (2) - -| Feature | Purpose | -|---------|---------| -| guarantor | Loan guarantor management | -| dashboard | Main navigation hub | - ---- - -## Design Progress Summary - -| Status | Count | Features | -|--------|:-----:|----------| -| Complete (all mockups) | 1 | auth | -| Partial (some mockups) | 16 | All others | -| Not Started | 0 | - | - ---- - -## Related Files - -- [MOCKUPS_INDEX.md](MOCKUPS_INDEX.md) - Mockup completion status -- [STATUS.md](STATUS.md) - Layer-wide status tracker -- [TOOL_CONFIG.md](TOOL_CONFIG.md) - Design tool configuration - ---- - -## Auto-Update Rules - -| Scenario | Action | -|----------|--------| -| New feature added | Add row to Quick Lookup | -| SPEC.md created | Update SPEC column to ✅ | -| API.md created | Update API column to ✅ | -| Mockups complete | Update Mockups column to ✅ | diff --git a/claude-product-cycle/design-spec-layer/MOCKUPS_INDEX.md b/claude-product-cycle/design-spec-layer/MOCKUPS_INDEX.md deleted file mode 100644 index 0255c8f63..000000000 --- a/claude-product-cycle/design-spec-layer/MOCKUPS_INDEX.md +++ /dev/null @@ -1,152 +0,0 @@ -# Mockups Index - O(1) Lookup - -> **Figma**: 7/18 | **Stitch**: 11/18 | **Tokens**: 8/18 - ---- - -## Status Matrix - -| Feature | FIGMA_LINKS | PROMPTS_FIGMA | PROMPTS_STITCH | design-tokens | -|---------|:-----------:|:-------------:|:--------------:|:-------------:| -| accounts | ❌ | ✅ | ✅ | ❌ | -| auth | ✅ | ✅ | ✅ | ✅ | -| beneficiary | ❌ | ✅ | ✅ | ❌ | -| client-charge | ✅ | ❌ | ❌ | ✅ | -| dashboard | ❌ | ✅ | ✅ | ✅ | -| guarantor | ✅ | ❌ | ❌ | ✅ | -| home | ❌ | ✅ | ✅ | ❌ | -| loan-account | ❌ | ✅ | ✅ | ❌ | -| location | ✅ | ❌ | ❌ | ✅ | -| notification | ❌ | ✅ | ✅ | ❌ | -| passcode | ✅ | ❌ | ❌ | ✅ | -| qr | ✅ | ❌ | ❌ | ✅ | -| recent-transaction | ❌ | ✅ | ✅ | ❌ | -| savings-account | ❌ | ✅ | ✅ | ❌ | -| settings | ✅ | ❌ | ❌ | ✅ | -| share-account | ❌ | ✅ | ✅ | ❌ | -| transfer | ❌ | ✅ | ✅ | ❌ | - -**Legend**: ✅ Exists | ❌ Missing - ---- - -## O(1) File Access - -| Need | Path | -|------|------| -| Figma Links | `features/[name]/mockups/FIGMA_LINKS.md` | -| Figma Prompts | `features/[name]/mockups/PROMPTS_FIGMA.md` | -| Stitch Prompts | `features/[name]/mockups/PROMPTS_STITCH.md` | -| Design Tokens | `features/[name]/mockups/design-tokens.json` | - ---- - -## Completion Summary - -### Complete (All 4 Files) - -| Feature | Status | -|---------|--------| -| auth | ✅ All mockup files present | - -### Has Figma Links + Tokens (Need Prompts) - -| Feature | Has | Needs | -|---------|-----|-------| -| client-charge | FIGMA_LINKS, design-tokens | PROMPTS_FIGMA, PROMPTS_STITCH | -| guarantor | FIGMA_LINKS, design-tokens | PROMPTS_FIGMA, PROMPTS_STITCH | -| location | FIGMA_LINKS, design-tokens | PROMPTS_FIGMA, PROMPTS_STITCH | -| passcode | FIGMA_LINKS, design-tokens | PROMPTS_FIGMA, PROMPTS_STITCH | -| qr | FIGMA_LINKS, design-tokens | PROMPTS_FIGMA, PROMPTS_STITCH | -| settings | FIGMA_LINKS, design-tokens | PROMPTS_FIGMA, PROMPTS_STITCH | - -### Has Prompts (Need Figma Links + Tokens) - -| Feature | Has | Needs | -|---------|-----|-------| -| accounts | PROMPTS_FIGMA, PROMPTS_STITCH | FIGMA_LINKS, design-tokens | -| beneficiary | PROMPTS_FIGMA, PROMPTS_STITCH | FIGMA_LINKS, design-tokens | -| home | PROMPTS_FIGMA, PROMPTS_STITCH | FIGMA_LINKS, design-tokens | -| loan-account | PROMPTS_FIGMA, PROMPTS_STITCH | FIGMA_LINKS, design-tokens | -| notification | PROMPTS_FIGMA, PROMPTS_STITCH | FIGMA_LINKS, design-tokens | -| recent-transaction | PROMPTS_FIGMA, PROMPTS_STITCH | FIGMA_LINKS, design-tokens | -| savings-account | PROMPTS_FIGMA, PROMPTS_STITCH | FIGMA_LINKS, design-tokens | -| share-account | PROMPTS_FIGMA, PROMPTS_STITCH | FIGMA_LINKS, design-tokens | -| transfer | PROMPTS_FIGMA, PROMPTS_STITCH | FIGMA_LINKS, design-tokens | - -### Has Prompts + Tokens (Need Figma Links) - -| Feature | Has | Needs | -|---------|-----|-------| -| dashboard | PROMPTS_FIGMA, PROMPTS_STITCH, design-tokens | FIGMA_LINKS | - ---- - -## Gaps by File Type - -### Need FIGMA_LINKS.md (11 features) - -``` -accounts, beneficiary, dashboard, home, loan-account, -notification, recent-transaction, savings-account, -share-account, transfer -``` - -### Need design-tokens.json (9 features) - -``` -accounts, beneficiary, home, loan-account, notification, -recent-transaction, savings-account, share-account, transfer -``` - -### Need PROMPTS_FIGMA.md (6 features) - -``` -client-charge, guarantor, location, passcode, qr, settings -``` - -### Need PROMPTS_STITCH.md (6 features) - -``` -client-charge, guarantor, location, passcode, qr, settings -``` - ---- - -## Design Tool Workflows - -### Figma-First Workflow - -``` -1. Create in Figma -2. Add link to FIGMA_LINKS.md -3. Export design-tokens.json -``` - -### AI-Generation Workflow (Google Stitch) - -``` -1. Write PROMPTS_STITCH.md -2. Generate mockups -3. Export to Figma -4. Update FIGMA_LINKS.md -``` - ---- - -## Related Files - -- [FEATURES_INDEX.md](FEATURES_INDEX.md) - Feature overview -- [TOOL_CONFIG.md](TOOL_CONFIG.md) - Tool configuration -- [STATUS.md](STATUS.md) - Layer status - ---- - -## Auto-Update Rules - -| Scenario | Action | -|----------|--------| -| Figma link added | Update FIGMA_LINKS column to ✅ | -| Prompts created | Update respective column to ✅ | -| Tokens exported | Update design-tokens column to ✅ | -| All 4 files done | Move to "Complete" section | diff --git a/claude-product-cycle/design-spec-layer/STATUS.md b/claude-product-cycle/design-spec-layer/STATUS.md deleted file mode 100644 index 15d463256..000000000 --- a/claude-product-cycle/design-spec-layer/STATUS.md +++ /dev/null @@ -1,232 +0,0 @@ -# STATUS.md - Single Source of Truth for Implementation Status - -> **Purpose**: ONE file to check and update all implementation status -> **Rule**: Update THIS file after any implementation work -> **Last Verified**: 2025-12-28 - ---- - -## Quick Overview - -| Phase | Features | Done | In Progress | Planned | -|-------|----------|------|-------------|---------| -| Core MVP | 6 | 6 | 0 | 0 | -| Account Management | 5 | 5 | 0 | 0 | -| Utilities | 5 | 5 | 0 | 0 | -| New Features | 1 | 0 | 0 | 1 | - -**Next Priority**: Dashboard - Unified Account Management - ---- - -## Phase 1: Core MVP - -| Feature | Status | Client | Feature | Gaps | -|---------|--------|--------|---------|------| -| Auth (Login/Register) | ✅ Done | ✅ | ✅ | 0 | -| Home Dashboard | ✅ Done | ✅ | ✅ | 0 | -| Accounts Overview | ✅ Done | ✅ | ✅ | 0 | -| Recent Transactions | ✅ Done | ✅ | ✅ | 0 | -| Notifications | ✅ Done | ✅ | ✅ | 0 | -| Settings | ✅ Done | ✅ | ✅ | 0 | - ---- - -## Phase 2: Account Management - -| Feature | Status | Client | Feature | Gaps | -|---------|--------|--------|---------|------| -| Savings Account | ✅ Done | ✅ | ✅ | 0 | -| Loan Account | ✅ Done | ✅ | ✅ | 0 | -| Share Account | ✅ Done | ✅ | ✅ | 0 | -| Beneficiary | ✅ Done | ✅ | ✅ | 0 | -| Transfer | ✅ Done | ✅ | ✅ | 0 | - ---- - -## Phase 3: Utilities - -| Feature | Status | Client | Feature | Gaps | -|---------|--------|--------|---------|------| -| Passcode | ✅ Done | - | ✅ | 0 | -| QR Code | ✅ Done | - | ✅ | 0 | -| Location | ✅ Done | - | ✅ | 0 | -| Guarantor | ✅ Done | ✅ | ✅ | 0 | -| Client Charges | ✅ Done | ✅ | ✅ | 0 | - ---- - -## Phase 4: New Features - -| Feature | Status | Client | Feature | Gaps | -|---------|--------|--------|---------|------| -| Dashboard (Unified) | 📋 Planned | ✅ | 📋 | SPEC/API complete | - ---- - -## Status Legend - -| Status | Meaning | -|--------|---------| -| ✅ Done | Feature complete, all working | -| ⚠️ Needs Update | Has gaps, spec changed, or incomplete | -| 🔄 In Progress | Currently being implemented | -| 📋 Planned | Spec exists, not started | -| 🆕 Not Started | No work done | - ---- - -## Layer Checklist Template - -When implementing a feature, track layers here: - -``` -Feature: [Name] -- [ ] SPEC.md created -- [ ] API.md created -- [ ] Network: Service created -- [ ] Data: Repository created -- [ ] Feature: ViewModel + Screen -- [ ] Navigation: Route registered -- [ ] DI: Modules registered -- [ ] STATUS.md updated -``` - ---- - -## Feature-to-Module Mapping - -| Feature | Module Path | Main Files | -|---------|-------------|------------| -| Auth | `feature:auth` | AuthViewModel, LoginScreen, RegistrationScreen | -| Home | `feature:home` | HomeViewModel, HomeScreen | -| Accounts | `feature:accounts` | AccountsViewModel, AccountsScreen | -| Savings | `feature:savings-account` | SavingsAccountViewModel, SavingsAccountScreen | -| Loan | `feature:loan-account` | LoanAccountViewModel, LoanAccountScreen | -| Share | `feature:share-account` | ShareAccountViewModel, ShareAccountScreen | -| Beneficiary | `feature:beneficiary` | BeneficiaryViewModel, BeneficiaryScreen | -| Transfer | `feature:transfer-process` | TransferViewModel, TransferScreen | -| Transactions | `feature:recent-transaction` | RecentTransactionViewModel | -| Notifications | `feature:notification` | NotificationViewModel | -| Settings | `feature:settings` | SettingsViewModel, SettingsScreen | -| Passcode | `feature:passcode` | PasscodeViewModel | -| QR Code | `feature:qr` | QRCodeViewModel | -| Location | `feature:location` | LocationScreen | -| Guarantor | `feature:guarantor` | GuarantorViewModel | -| Charges | `feature:client-charge` | ClientChargeViewModel | -| Dashboard | `feature:dashboard` | DashboardViewModel, DashboardScreen | - ---- - -## Detailed Feature Breakdown - -### Auth Feature -- **Screens**: LoginScreen, RegistrationScreen, OtpAuthenticationScreen, RecoverPasswordScreen, SetPasswordScreen, UploadIdScreen -- **ViewModels**: LoginViewModel, RegistrationViewModel, OtpAuthenticationViewModel, RecoverPasswordViewModel, SetPasswordViewModel, UploadIdViewmodel -- **APIs**: /authentication, /registration, /registration/user - -### Home Feature -- **Screens**: HomeScreen -- **ViewModels**: HomeViewModel -- **APIs**: /clients/{id}, /clients/{id}/accounts, /clients/{id}/images -- **Components**: 10 ServiceItems, BottomSheetContent, MifosDashboardCard - -### Accounts Feature -- **Screens**: AccountsScreen, TransactionScreen -- **ViewModels**: AccountsViewModel, TransactionViewModel -- **APIs**: /clients/{id}/accounts, /savingsaccounts/{id}, /loans/{id} -- **Filters**: Status filters, Type filters - -### Savings Account Feature -- **Screens**: SavingsAccountScreen, SavingsAccountDetailsScreen, AccountWithdrawScreen, AccountUpdateScreen -- **ViewModels**: SavingsAccountViewmodel, SavingsAccountDetailsViewModel, AccountWithdrawViewModel, AccountUpdateViewModel -- **APIs**: /savingsaccounts/{id}, /savingsaccounts/template, /accounttransfers - -### Loan Account Feature -- **Screens**: LoanAccountScreen, LoanAccountDetailsScreen, RepaymentScheduleScreen, AccountSummaryScreen -- **ViewModels**: LoanAccountsViewmodel, LoanAccountDetailsViewModel, RepaymentScheduleViewModel, LoanAccountSummaryViewModel -- **APIs**: /loans/{id}, /loans/{id}?associations=repaymentSchedule - -### Beneficiary Feature -- **Screens**: BeneficiaryListScreen, BeneficiaryApplicationScreen, BeneficiaryDetailScreen, BeneficiaryApplicationConfirmationScreen -- **ViewModels**: BeneficiaryListViewModel, BeneficiaryApplicationViewModel, BeneficiaryDetailViewModel, BeneficiaryApplicationConfirmationViewModel -- **APIs**: /beneficiaries/tpt, /beneficiaries/tpt/template - -### Transfer Feature -- **Screens**: MakeTransferScreen, TransferProcessScreen -- **ViewModels**: MakeTransferViewModel, TransferProcessViewModel -- **APIs**: /accounttransfers, /accounttransfers/template, /accounttransfers?type=tpt - -### Recent Transaction Feature -- **Screens**: RecentTransactionScreen -- **ViewModels**: RecentTransactionViewModel -- **APIs**: /clients/{id}/transactions - -### Notification Feature -- **Screens**: NotificationScreen -- **ViewModels**: NotificationViewModel -- **APIs**: /device/registration/client/{id} - -### Settings Feature -- **Screens**: SettingsScreen, ThemeScreen, LanguageScreen, ChangePasswordScreen, UpdatePasscodeScreen, FaqScreen, HelpScreen, AboutScreen, AppInfoScreen -- **ViewModels**: SettingsViewModel, ChangeThemeViewModel, LanguageViewModel, ChangePasswordViewModel, UpdatePasscodeViewModel, FaqViewModel -- **APIs**: None (local preferences) - -### Share Account Feature -- **Screens**: ShareAccountScreen -- **ViewModels**: ShareAccountsViewmodel -- **APIs**: /products/share, /shareaccounts - -### Passcode Feature -- **Screens**: PasscodeScreen, VerifyPasscodeScreen -- **ViewModels**: PasscodeViewModel -- **APIs**: None (local storage) - -### QR Feature -- **Screens**: QrCodeReaderScreen, QrCodeDisplayScreen, QrCodeImportScreen -- **ViewModels**: QrCodeReaderViewModel, QrCodeDisplayViewModel, QrCodeImportViewModel -- **APIs**: None (local processing) - -### Location Feature -- **Screens**: LocationScreen -- **ViewModels**: None -- **APIs**: None (static content) - -### Guarantor Feature -- **Screens**: GuarantorListScreen, GuarantorDetailScreen, AddGuarantorScreen -- **ViewModels**: GuarantorListViewModel, GuarantorDetailViewModel, AddGuarantorViewModel -- **APIs**: /loans/{id}/guarantors, /loans/{id}/guarantors/template - -### Client Charge Feature -- **Screens**: ClientChargeScreen, ChargeDetailScreen -- **ViewModels**: ClientChargeViewModel, ChargeDetailsViewModel -- **APIs**: /clients/{id}/charges, /loans/{id}/charges, /savingsaccounts/{id}/charges - -### Dashboard Feature (NEW) -- **Screens**: DashboardScreen -- **ViewModels**: DashboardViewModel -- **Components**: NetWorthCard, AccountCard, TransactionItem, QuickActionBar -- **APIs**: /clients/{id}, /clients/{id}/accounts, /clients/{id}/images, /clients/{id}/transactions, /savingsaccounts/{id}, /loans/{id}, /beneficiaries/tpt, /accounttransfers/template, /accounttransfers -- **Design Docs**: [SPEC.md](features/dashboard/SPEC.md), [API.md](features/dashboard/API.md), [STATUS.md](features/dashboard/STATUS.md) - ---- - -## Recent Updates - -| Date | Feature | Change | -|------|---------|--------| -| 2025-12-29 | All Features | Created comprehensive SPEC.md and API.md for all 16 features | -| 2025-12-28 | Mockup Layer | Created mockup-layer with Figma plugin and /mockup skill | -| 2025-12-28 | Dashboard | Production-level SPEC.md and API.md created | -| 2025-12-27 | All | Comprehensive design analysis and SPEC/API documentation | -| 2025-12-26 | All | Initial claude-product-cycle setup | - ---- - -## How to Update This File - -1. **After implementing code**: Check off layers in feature section -2. **After completing feature**: Change status from 🔄 to ✅ -3. **After spec change**: Change status to ⚠️ and list gaps -4. **Add recent update**: Add row to Recent Updates table -5. **IMPORTANT**: Run `/projectstatus` periodically to verify accuracy diff --git a/claude-product-cycle/design-spec-layer/TESTING_STATUS.md b/claude-product-cycle/design-spec-layer/TESTING_STATUS.md deleted file mode 100644 index 8941ef2ca..000000000 --- a/claude-product-cycle/design-spec-layer/TESTING_STATUS.md +++ /dev/null @@ -1,125 +0,0 @@ -# Design Layer - Testing Status - -> Testing specifications for design layer validation - ---- - -## Overview - -The design layer defines **what** should be tested. Each feature specification includes acceptance criteria that translate directly to test cases. - ---- - -## Testing Scope - -| Component | Test Type | Purpose | -|-----------|-----------|---------| -| SPEC.md | Contract Tests | Verify implementation matches specification | -| API.md | API Contract Tests | Verify API usage matches documentation | -| Mockups | Screenshot Tests | Visual regression testing | -| design-tokens.json | Theme Tests | Verify design tokens applied correctly | - ---- - -## Per-Feature Testing Requirements - -### Test Coverage Matrix - -| # | Feature | Contract | API | Screenshot | Status | -|:-:|---------|:--------:|:---:|:----------:|:------:| -| 1 | auth | ⬜ | ⬜ | ⬜ | Not Started | -| 2 | home | ⬜ | ⬜ | ⬜ | Not Started | -| 3 | accounts | ⬜ | ⬜ | ⬜ | Not Started | -| 4 | savings-account | ⬜ | ⬜ | ⬜ | Not Started | -| 5 | loan-account | ⬜ | ⬜ | ⬜ | Not Started | -| 6 | share-account | ⬜ | ⬜ | ⬜ | Not Started | -| 7 | beneficiary | ⬜ | ⬜ | ⬜ | Not Started | -| 8 | transfer | ⬜ | ⬜ | ⬜ | Not Started | -| 9 | recent-transaction | ⬜ | ⬜ | ⬜ | Not Started | -| 10 | notification | ⬜ | ⬜ | ⬜ | Not Started | -| 11 | settings | ⬜ | ⬜ | ⬜ | Not Started | -| 12 | passcode | ⬜ | - | ⬜ | Not Started | -| 13 | guarantor | ⬜ | ⬜ | ⬜ | Not Started | -| 14 | qr | ⬜ | - | ⬜ | Not Started | -| 15 | location | ⬜ | - | ⬜ | Not Started | -| 16 | client-charge | ⬜ | ⬜ | ⬜ | Not Started | -| 17 | dashboard | ⬜ | ⬜ | ⬜ | Not Started | - -**Legend**: ✅ Complete | ⬜ Not Started | - N/A - ---- - -## Testing Specification Template - -Each feature's SPEC.md should include a `## Test Scenarios` section: - -```markdown -## Test Scenarios - -### Loading State -- [ ] Shows loading indicator when data is being fetched -- [ ] Disables user interaction during loading - -### Success State -- [ ] Displays all required data fields -- [ ] Data matches API response -- [ ] Navigation works correctly - -### Error State -- [ ] Shows error message for network failures -- [ ] Retry button is visible and functional -- [ ] Error message is user-friendly - -### Empty State -- [ ] Shows appropriate message when no data -- [ ] Optional: Call-to-action for creating data - -### Validation -- [ ] Required fields show error when empty -- [ ] Format validation (email, phone, etc.) -- [ ] Business rules validation -``` - ---- - -## Screenshot Test Baseline - -For mockups to become screenshot test baselines: - -| Step | Action | Output | -|:----:|--------|--------| -| 1 | Generate mockups (Google Stitch/Figma) | PNG/SVG files | -| 2 | Export to `mockups/` folder | Light + Dark variants | -| 3 | Configure Roborazzi | Golden images | -| 4 | Run screenshot tests | Compare against baseline | - ---- - -## Implementation Priority - -| Priority | Features | Reason | -|:--------:|----------|--------| -| P0 | auth, home | Core user flow | -| P1 | accounts, transfer, beneficiary | Primary functionality | -| P2 | loan-account, savings-account | Account management | -| P3 | Others | Supporting features | - ---- - -## Commands - -```bash -# Validate feature spec has test scenarios -/verify [feature] testing - -# Generate test cases from spec -/gap-planning [feature] testing -``` - ---- - -## Related Files - -- [FEATURES_INDEX.md](./FEATURES_INDEX.md) - Feature status -- [MOCKUPS_INDEX.md](./MOCKUPS_INDEX.md) - Mockup status -- Each feature's `SPEC.md` - Detailed specifications diff --git a/claude-product-cycle/design-spec-layer/TOOL_CONFIG.md b/claude-product-cycle/design-spec-layer/TOOL_CONFIG.md deleted file mode 100644 index 4ab98ea64..000000000 --- a/claude-product-cycle/design-spec-layer/TOOL_CONFIG.md +++ /dev/null @@ -1,190 +0,0 @@ -# Design Tools Configuration - -Configuration for AI design tools and MCP connections used in mockup generation. - ---- - -## Selected AI Design Tool - -**Current Tool**: Google Stitch - -| Setting | Value | -|---------|-------| -| Primary Tool | `google-stitch` | -| Fallback Tool | `figma` | -| Prompt Format | `md3-detailed` | - -### Available Tools - -| ID | Tool | Website | MCP | Status | -|----|------|---------|:---:|:------:| -| `google-stitch` | Google Stitch | [stitch.withgoogle.com](https://stitch.withgoogle.com/) | ✅ | **Selected** | -| `figma` | Figma | [figma.com](https://www.figma.com/) | ✅ | Available | -| `uizard` | Uizard | [uizard.io](https://uizard.io/) | ❌ | Available | -| `visily` | Visily | [visily.ai](https://www.visily.ai/) | ❌ | Available | - ---- - -## MCP Servers - -### Google Stitch MCP - -**Repository**: [github.com/StitchAI/stitch-ai-mcp](https://github.com/StitchAI/stitch-ai-mcp) - -**Install**: -```bash -claude mcp add stitch-ai -- npx -y stitch-ai-mcp -``` - -**Features**: -- Generate UI designs from text prompts -- Material Design 3 native support -- Export to various formats -- Direct Figma integration - -**Status**: Not Connected - ---- - -### Figma MCP - -**Documentation**: [Claude Code MCP Docs](https://github.com/anthropics/claude-code/tree/main/docs/mcp) - -**Install**: -```bash -# Get your Figma token from: https://www.figma.com/developers/api#access-tokens -claude mcp add figma -- npx -y figma-mcp --token YOUR_FIGMA_TOKEN -``` - -**Features**: -- Read Figma files and components -- Extract design tokens -- Get component specifications -- Access design system - -**Status**: Not Connected - ---- - -## Prompt Formats - -### MD3 Detailed (Google Stitch) - -Best for Material Design 3 apps. Includes: -- Detailed component specifications -- Color tokens with gradients -- Typography scale -- Spacing and radius values -- Animation hints - -### Figma Native - -Best for Figma AI. Includes: -- Component structure -- Auto-layout hints -- Variant specifications -- Design system references - -### Concise (Uizard/Visily) - -Best for quick prototypes. Includes: -- Screen description -- Key components list -- Basic styling - ---- - -## How to Change Tool - -### Option 1: Edit this file - -Change the "Current Tool" section above. - -### Option 2: Select at runtime - -When running `/design [feature] mockup`, you'll be prompted to select a tool. - -### Option 3: Use command argument - -``` -/design auth mockup --tool=google-stitch -/design auth mockup --tool=figma -/design auth mockup --tool=uizard -``` - ---- - -## Workflow by Tool - -### Google Stitch (Recommended) - -``` -1. /design [feature] mockup -2. Claude generates PROMPTS.md with Stitch format -3. If MCP connected: Claude sends to Stitch directly - If no MCP: Copy prompt to stitch.withgoogle.com -4. Generate design -5. Export to Figma -6. Update FIGMA_LINKS.md -``` - -### Figma + AI - -``` -1. /design [feature] mockup -2. Claude generates PROMPTS.md with Figma format -3. Open Figma, use AI feature -4. Paste prompt -5. Generate design -6. Update FIGMA_LINKS.md -``` - -### Uizard / Visily - -``` -1. /design [feature] mockup -2. Claude generates PROMPTS.md with concise format -3. Open tool website -4. Paste prompt -5. Generate design -6. Export to Figma -7. Update FIGMA_LINKS.md -``` - ---- - -## Check MCP Status - -Run in terminal: -```bash -claude mcp list -``` - -Expected output (if configured): -``` -MCP Servers: - stitch-ai ✓ connected - figma ✓ connected -``` - ---- - -## Troubleshooting - -### MCP Not Connecting - -1. Check Node.js is installed: `node --version` -2. Check npx works: `npx --version` -3. Try reinstalling: `claude mcp remove stitch-ai && claude mcp add stitch-ai -- npx -y stitch-ai-mcp` - -### Figma Token Issues - -1. Generate new token at: https://www.figma.com/developers/api#access-tokens -2. Ensure token has read access -3. Reinstall with new token - -### Stitch Not Generating - -1. Check you're signed into Google account -2. Verify prompt format is correct -3. Try simpler prompt first diff --git a/claude-product-cycle/design-spec-layer/_shared/API_REFERENCE.md b/claude-product-cycle/design-spec-layer/_shared/API_REFERENCE.md deleted file mode 100644 index 0ef08819c..000000000 --- a/claude-product-cycle/design-spec-layer/_shared/API_REFERENCE.md +++ /dev/null @@ -1,212 +0,0 @@ -# Fineract Self-Service API Quick Reference - -> **Base URL**: `https://{server}/fineract-provider/api/v1/self/` -> **Authentication**: Basic Auth + Tenant Header -> **Last Updated**: 2025-12-26 - ---- - -## Authentication Headers - -``` -Authorization: Basic {base64(username:password)} -Fineract-Platform-TenantId: {tenant} -Content-Type: application/json -``` - ---- - -## API Endpoints - -### Authentication - -| Endpoint | Method | Description | -|----------|--------|-------------| -| `authentication` | POST | User login | -| `registration` | POST | User registration | -| `registration/user` | POST | Verify registration | -| `user` | GET | Get current user details | -| `user` | PUT | Update user details | - -### Clients - -| Endpoint | Method | Description | -|----------|--------|-------------| -| `clients` | GET | Get client list | -| `clients/{clientId}` | GET | Get client by ID | -| `clients/{clientId}/images` | GET | Get client image | -| `clients/{clientId}/accounts` | GET | Get client accounts | -| `clients/{clientId}/charges` | GET | Get client charges | - -### Savings Accounts - -| Endpoint | Method | Description | -|----------|--------|-------------| -| `savingsaccounts` | GET | Get savings accounts list | -| `savingsaccounts` | POST | Apply for savings account | -| `savingsaccounts/{accountId}` | GET | Get savings account details | -| `savingsaccounts/{accountId}` | PUT | Update savings account | -| `savingsaccounts/{accountId}?command=withdrawnByApplicant` | POST | Withdraw application | -| `savingsaccounts/template` | GET | Get savings account template | -| `savingsaccounts/{accountId}/transactions` | GET | Get transactions | - -### Loan Accounts - -| Endpoint | Method | Description | -|----------|--------|-------------| -| `loans` | GET | Get loan accounts list | -| `loans` | POST | Apply for loan | -| `loans/{loanId}` | GET | Get loan details | -| `loans/{loanId}` | PUT | Update loan | -| `loans/{loanId}?command=withdrawnByApplicant` | POST | Withdraw loan application | -| `loans/template` | GET | Get loan template | -| `loans/{loanId}/transactions` | GET | Get loan transactions | -| `loans/{loanId}/guarantors` | GET | Get guarantors | -| `loans/{loanId}/guarantors` | POST | Add guarantor | -| `loans/{loanId}/guarantors/{guarantorId}` | DELETE | Remove guarantor | - -### Share Accounts - -| Endpoint | Method | Description | -|----------|--------|-------------| -| `shareaccounts` | GET | Get share accounts list | -| `shareaccounts` | POST | Apply for shares | -| `shareaccounts/{accountId}` | GET | Get share account details | - -### Beneficiaries - -| Endpoint | Method | Description | -|----------|--------|-------------| -| `beneficiaries/tpt` | GET | Get beneficiary list | -| `beneficiaries/tpt` | POST | Create beneficiary | -| `beneficiaries/tpt/template` | GET | Get beneficiary template | -| `beneficiaries/tpt/{beneficiaryId}` | PUT | Update beneficiary | -| `beneficiaries/tpt/{beneficiaryId}` | DELETE | Delete beneficiary | - -### Transfers - -| Endpoint | Method | Description | -|----------|--------|-------------| -| `accounttransfers` | POST | Make transfer | -| `accounttransfers/template` | GET | Get transfer template | - -### Notifications - -| Endpoint | Method | Description | -|----------|--------|-------------| -| `notifications` | GET | Get notifications | -| `notifications` | PUT | Mark as read | - -### Products - -| Endpoint | Method | Description | -|----------|--------|-------------| -| `products/savings` | GET | Get savings products | -| `products/loans` | GET | Get loan products | -| `products/share` | GET | Get share products | - ---- - -## Common Query Parameters - -| Parameter | Description | Example | -|-----------|-------------|---------| -| `associations` | Include related data | `all`, `transactions`, `charges` | -| `fields` | Limit response fields | `id,name,status` | -| `offset` | Pagination offset | `0` | -| `limit` | Pagination limit | `20` | - ---- - -## Response Patterns - -### Single Entity -```json -{ - "id": 1, - "accountNo": "000000001", - "status": { - "id": 300, - "code": "savingsAccountStatusType.active", - "value": "Active" - } -} -``` - -### List (Paginated) -```json -{ - "totalFilteredRecords": 100, - "pageItems": [ - { "id": 1, "name": "Item 1" }, - { "id": 2, "name": "Item 2" } - ] -} -``` - -### Error -```json -{ - "developerMessage": "Error details", - "httpStatusCode": "400", - "defaultUserMessage": "User friendly message", - "userMessageGlobalisationCode": "error.msg.code", - "errors": [] -} -``` - ---- - -## Kotlin Service Constants - -```kotlin -// core/network/utils/ApiEndPoints.kt -object ApiEndPoints { - const val AUTHENTICATION = "authentication" - const val CLIENTS = "clients" - const val SAVINGS_ACCOUNTS = "savingsaccounts" - const val SHARE_ACCOUNTS = "shareaccounts" - const val LOANS = "loans" - const val BENEFICIARIES = "beneficiaries" - const val ACCOUNT_TRANSFER = "accounttransfers" - const val REGISTRATION = "registration" - const val USER = "user" - const val PRODUCTS = "products" - const val DEVICE = "device" -} -``` - ---- - -## Status Codes Reference - -### Savings Account Status -| Code | Value | -|------|-------| -| 100 | Submitted and pending approval | -| 200 | Approved | -| 300 | Active | -| 400 | Withdrawn by applicant | -| 500 | Rejected | -| 600 | Closed | - -### Loan Account Status -| Code | Value | -|------|-------| -| 100 | Submitted and pending approval | -| 200 | Approved | -| 300 | Active | -| 400 | Withdrawn by applicant | -| 500 | Rejected | -| 600 | Closed (obligations met) | -| 700 | Overpaid | - ---- - -## Demo Credentials - -For testing: -- **Instance**: `gsoc.mifos.community` -- **Username**: `maria` -- **Password**: `password` -- **Tenant**: `default` diff --git a/claude-product-cycle/design-spec-layer/_shared/COMPONENTS.md b/claude-product-cycle/design-spec-layer/_shared/COMPONENTS.md deleted file mode 100644 index ae749551d..000000000 --- a/claude-product-cycle/design-spec-layer/_shared/COMPONENTS.md +++ /dev/null @@ -1,825 +0,0 @@ -# Mifos Mobile - Design System & Component Library - -> **Version**: 2.0 (Revolut-Style Vibrant Design) -> **Last Updated**: 2025-12-29 -> **Design Philosophy**: Modern Fintech with Trust, Clarity, Speed - ---- - -## 1. Color System - -### 1.1 Primary Palette - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ COLOR TOKENS │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ PRIMARY GRADIENTS │ -│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ -│ │ #667EEA │ │ #11998E │ │ #FC466B │ │ -│ │ ↓ │ │ ↓ │ │ ↓ │ │ -│ │ #764BA2 │ │ #38EF7D │ │ #3F5EFB │ │ -│ │ Purple-Blue │ │ Teal-Green │ │ Pink-Blue │ │ -│ │ (Primary) │ │ (Secondary) │ │ (Accent) │ │ -│ └──────────────┘ └──────────────┘ └──────────────┘ │ -│ │ -│ SEMANTIC COLORS │ -│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ -│ │ #00D09C │ │ #FFB800 │ │ #FF4757 │ │ -│ │ Success │ │ Warning │ │ Error │ │ -│ │ (Teal/Mint) │ │ (Amber) │ │ (Coral Red) │ │ -│ └──────────────┘ └──────────────┘ └──────────────┘ │ -│ │ -│ BACKGROUNDS │ -│ ┌──────────────────────────────────────────────────────┐ │ -│ │ Light Mode │ Dark Mode │ │ -│ │ ───────────── │ ───────────── │ │ -│ │ Background: #F8F9FA │ Background: #0D1117 │ │ -│ │ Surface: #FFFFFF │ Surface: #1A1F2E │ │ -│ │ Card: #FFFFFF │ Card: #21262D │ │ -│ │ Divider: #E1E4E8 │ Divider: #30363D │ │ -│ └──────────────────────────────────────────────────────┘ │ -│ │ -│ TEXT COLORS │ -│ ┌──────────────────────────────────────────────────────┐ │ -│ │ Light Mode │ Dark Mode │ │ -│ │ ───────────── │ ───────────── │ │ -│ │ Primary: #1F2937 │ Primary: #F0F6FC │ │ -│ │ Secondary: #6B7280 │ Secondary: #8B949E │ │ -│ │ Tertiary: #9CA3AF │ Tertiary: #6E7681 │ │ -│ │ Disabled: #D1D5DB │ Disabled: #484F58 │ │ -│ └──────────────────────────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - -### 1.2 Usage Guidelines - -| Context | Light Mode | Dark Mode | Gradient | -|---------|------------|-----------|----------| -| Balance Cards | #FFFFFF | #1A1F2E | Primary Gradient background | -| Income Indicator | #00D09C | #00D09C | - | -| Expense Indicator | #FF4757 | #FF4757 | - | -| CTA Buttons | - | - | Primary Gradient | -| Quick Actions | #667EEA | #667EEA | - | -| Links | #667EEA | #764BA2 | - | - ---- - -## 2. Typography - -### 2.1 Type Scale - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ TYPOGRAPHY SCALE │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ DISPLAY │ -│ ════════════════════════════════════════════════════════════ │ -│ Display Large 48sp / Bold / -0.5 letter spacing │ -│ Display Medium 40sp / Bold / -0.5 letter spacing │ -│ Display Small 32sp / Bold / 0 letter spacing │ -│ │ -│ AMOUNT (Financial Values) │ -│ ════════════════════════════════════════════════════════════ │ -│ Amount Large 36sp / ExtraBold / -0.5 letter spacing │ -│ Amount Medium 28sp / Bold / 0 letter spacing │ -│ Amount Small 20sp / SemiBold / 0 letter spacing │ -│ │ -│ HEADLINES │ -│ ════════════════════════════════════════════════════════════ │ -│ Headline Large 24sp / Bold / 0 letter spacing │ -│ Headline Medium 20sp / SemiBold / 0.15 letter spacing │ -│ Headline Small 18sp / Medium / 0.15 letter spacing │ -│ │ -│ BODY │ -│ ════════════════════════════════════════════════════════════ │ -│ Body Large 16sp / Regular / 0.5 letter spacing │ -│ Body Medium 14sp / Regular / 0.25 letter spacing │ -│ Body Small 12sp / Regular / 0.4 letter spacing │ -│ │ -│ LABELS │ -│ ════════════════════════════════════════════════════════════ │ -│ Label Large 14sp / Medium / 0.1 letter spacing │ -│ Label Medium 12sp / Medium / 0.5 letter spacing │ -│ Label Small 10sp / Medium / 0.5 letter spacing │ -│ │ -│ FONT FAMILY: Inter (Primary) / System Default (Fallback) │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - ---- - -## 3. Spacing & Layout - -### 3.1 Spacing Scale - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ SPACING TOKENS │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ Base Unit: 4dp │ -│ │ -│ ┌────────────────────────────────────────────────────────────┐ │ -│ │ Token │ Value │ Usage │ │ -│ ├────────────────────────────────────────────────────────────┤ │ -│ │ space-0 │ 0dp │ No spacing │ │ -│ │ space-1 │ 4dp │ Tight spacing (icons) │ │ -│ │ space-2 │ 8dp │ Small gaps │ │ -│ │ space-3 │ 12dp │ Default element spacing │ │ -│ │ space-4 │ 16dp │ Card padding │ │ -│ │ space-5 │ 20dp │ Section spacing │ │ -│ │ space-6 │ 24dp │ Large section gaps │ │ -│ │ space-8 │ 32dp │ Screen padding horizontal │ │ -│ │ space-10 │ 40dp │ Major section breaks │ │ -│ │ space-12 │ 48dp │ Hero card padding │ │ -│ │ space-16 │ 64dp │ Bottom nav height │ │ -│ └────────────────────────────────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - -### 3.2 Layout Grid - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ LAYOUT GRID │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ Screen Margins: 16dp (compact) / 24dp (expanded) │ -│ Content Width: 100% - 32dp (16dp each side) │ -│ Card Margins: 16dp horizontal │ -│ Card Padding: 16dp internal │ -│ Card Gap: 12dp between cards │ -│ │ -│ ┌────────────────────────────────────────────────────────────┐ │ -│ │ 16dp │◀───────── Content Area ─────────▶│ 16dp │ │ -│ │ ├────┼──────────────────────────────────┼────┤ │ │ -│ │ │ │ ┌────────────────────────────┐ │ │ │ │ -│ │ │ │ │ CARD 1 │ │ │ │ │ -│ │ │ │ │ (16dp padding) │ │ │ │ │ -│ │ │ │ └────────────────────────────┘ │ │ │ │ -│ │ │ │ 12dp gap │ │ │ │ -│ │ │ │ ┌────────────────────────────┐ │ │ │ │ -│ │ │ │ │ CARD 2 │ │ │ │ │ -│ │ │ │ └────────────────────────────┘ │ │ │ │ -│ │ │ │ │ │ │ │ -│ └────────────────────────────────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - ---- - -## 4. Components - -### 4.1 HeroBalanceCard - -The main balance display at the top of dashboard screens. - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ HERO BALANCE CARD │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ┌───────────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ 💰 Total Balance 👁 ░░░░░░│ │ -│ │░░ ░░░░░│ │ -│ │░░ $12,450.00 ░░░░░│ │ -│ │░░ ░░░░░│ │ -│ │░░ ┌───────────┐ ┌───────────┐ ░░░░░│ │ -│ │░░ │ ▲ +$450 │ │ ▼ -$120 │ ░░░░░│ │ -│ │░░ │ Income │ │ Expense │ ░░░░░│ │ -│ │░░ └───────────┘ └───────────┘ ░░░░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └───────────────────────────────────────────────────────────┘ │ -│ │ -│ Props: │ -│ ───────────────────────────────────────────────────────────── │ -│ • balance: String - Main balance amount │ -│ • currency: String - Currency symbol ($, €, etc.) │ -│ • income: String - Monthly income │ -│ • expense: String - Monthly expense │ -│ • isAmountVisible: Boolean - Toggle balance visibility │ -│ • onVisibilityToggle: () - Eye icon callback │ -│ • gradientColors: List - Background gradient │ -│ │ -│ Dimensions: │ -│ ───────────────────────────────────────────────────────────── │ -│ • Height: 180dp │ -│ • Corner Radius: 24dp │ -│ • Padding: 24dp │ -│ • Gradient: Primary (Purple-Blue diagonal) │ -│ • Shadow: 8dp blur, 4dp offset, 15% opacity │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - -### 4.2 QuickActionBar - -Horizontal scrollable quick action buttons. - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ QUICK ACTION BAR │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ┌──────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │ │ -│ │ │ 💸 │ │ 📥 │ │ 📱 │ │ 📊 │ │ 🎯 │ │ │ -│ │ │ │ │ │ │ │ │ │ │ │ │ │ -│ │ └─────┘ └─────┘ └─────┘ └─────┘ └─────┘ │ │ -│ │ Send Request QR Code Analytics Goals │ │ -│ │ │ │ -│ └──────────────────────────────────────────────────────────┘ │ -│ │ -│ Props: │ -│ ───────────────────────────────────────────────────────────── │ -│ • actions: List │ -│ - icon: ImageVector │ -│ - label: String │ -│ - onClick: () -> Unit │ -│ - badge: String? (optional notification count) │ -│ │ -│ Dimensions: │ -│ ───────────────────────────────────────────────────────────── │ -│ • Icon Container: 56dp x 56dp │ -│ • Icon Size: 24dp │ -│ • Corner Radius: 16dp │ -│ • Gap Between Items: 16dp │ -│ • Label: 12sp, Medium weight │ -│ • Background: Surface color with 8% primary tint │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - -### 4.3 AccountCard - -Compact account summary card with progress indicator. - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ ACCOUNT CARD │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ┌───────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌───┐ │ │ -│ │ │ 💵│ Primary Savings ● Active ▶ │ │ -│ │ └───┘ ****4521 │ │ -│ │ │ │ -│ │ $8,200.00 ↗ +$200/mo │ │ -│ │ │ │ -│ │ ████████████████░░░░░░░░░░░░░░░ 65% to goal │ │ -│ │ │ │ -│ └───────────────────────────────────────────────────────────┘ │ -│ │ -│ Variants: │ -│ ───────────────────────────────────────────────────────────── │ -│ • SAVINGS - Green icon background, positive balance │ -│ • LOAN - Blue icon background, negative balance, due date │ -│ • SHARE - Purple icon background, share count │ -│ │ -│ Props: │ -│ ───────────────────────────────────────────────────────────── │ -│ • accountType: AccountType │ -│ • accountName: String │ -│ • accountNumber: String (masked ****XXXX) │ -│ • balance: String │ -│ • status: AccountStatus (Active, Dormant, Closed) │ -│ • monthlyChange: String? (optional +/- indicator) │ -│ • progress: Float? (0.0-1.0 for goal progress) │ -│ • progressLabel: String? ("65% to goal") │ -│ • onClick: () -> Unit │ -│ │ -│ Dimensions: │ -│ ───────────────────────────────────────────────────────────── │ -│ • Height: ~100dp (auto) │ -│ • Icon Container: 44dp x 44dp │ -│ • Corner Radius: 16dp │ -│ • Padding: 16dp │ -│ • Progress Bar Height: 6dp │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - -### 4.4 TransactionItem - -Modern transaction list item with category icon. - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ TRANSACTION ITEM │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ┌───────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌───┐ │ │ -│ │ │ 🛒│ Amazon Prime -$14.99 │ │ -│ │ └───┘ Shopping • Dec 15, 2:34 PM │ │ -│ │ │ │ -│ └───────────────────────────────────────────────────────────┘ │ -│ │ -│ Amount Styling: │ -│ ───────────────────────────────────────────────────────────── │ -│ • Positive (Income): #00D09C, prefix "+" │ -│ • Negative (Expense): #FF4757, prefix "-" │ -│ • Pending: #6B7280, italic │ -│ │ -│ Props: │ -│ ───────────────────────────────────────────────────────────── │ -│ • icon: ImageVector or Emoji │ -│ • title: String │ -│ • subtitle: String (category • timestamp) │ -│ • amount: String │ -│ • isPositive: Boolean │ -│ • isPending: Boolean │ -│ • onClick: () -> Unit │ -│ │ -│ Dimensions: │ -│ ───────────────────────────────────────────────────────────── │ -│ • Height: 64dp │ -│ • Icon Container: 40dp x 40dp │ -│ • Icon Background: Category color at 12% opacity │ -│ • Corner Radius: 12dp │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - -### 4.5 InsightCard - -AI-powered financial insight display. - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ INSIGHT CARD │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ┌───────────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ░░│ │ -│ │░░ 💡 Weekly Insight ░░│ │ -│ │░░ ░░│ │ -│ │░░ 📊 You spent 23% less on dining this week! ░░│ │ -│ │░░ compared to last week. Keep it up! 🎉 ░░│ │ -│ │░░ ░░│ │ -│ │░░ 🍔 Dining: $45 → $35 ░░│ │ -│ │░░ ░░│ │ -│ │░░ ┌────────────┐ ┌────────────┐ ░░│ │ -│ │░░ │View Details│ │ Dismiss │ ░░│ │ -│ │░░ └────────────┘ └────────────┘ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └───────────────────────────────────────────────────────────┘ │ -│ │ -│ Variants: │ -│ ───────────────────────────────────────────────────────────── │ -│ • POSITIVE - Green gradient, celebration emoji │ -│ • WARNING - Amber gradient, caution emoji │ -│ • INFO - Blue gradient, info emoji │ -│ │ -│ Props: │ -│ ───────────────────────────────────────────────────────────── │ -│ • type: InsightType (POSITIVE, WARNING, INFO) │ -│ • title: String │ -│ • message: String │ -│ • detail: String? (optional comparison data) │ -│ • onViewDetails: () -> Unit │ -│ • onDismiss: () -> Unit │ -│ • isDismissible: Boolean │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - -### 4.6 SavingsGoalCard - -Gamified savings goal with progress ring. - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ SAVINGS GOAL CARD │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ┌───────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌─────────┐ │ │ -│ │ │ ╭───╮ │ 🏖 Vacation Fund │ │ -│ │ │ │60%│ │ $1,200 / $2,000 │ │ -│ │ │ ╰───╯ │ │ │ -│ │ └─────────┘ 🔥 15 day streak │ │ -│ │ │ │ -│ │ ████████████████░░░░░░░░░░░░░░░ │ │ -│ │ │ │ -│ │ ┌──────────────┐ ┌──────────────┐ │ │ -│ │ │ Add $50 │ │ View Details │ │ │ -│ │ └──────────────┘ └──────────────┘ │ │ -│ │ │ │ -│ └───────────────────────────────────────────────────────────┘ │ -│ │ -│ Props: │ -│ ───────────────────────────────────────────────────────────── │ -│ • emoji: String │ -│ • goalName: String │ -│ • currentAmount: String │ -│ • targetAmount: String │ -│ • progress: Float (0.0-1.0) │ -│ • streak: Int? (days) │ -│ • quickAddAmounts: List (e.g., [10, 25, 50, 100]) │ -│ • onQuickAdd: (amount: Int) -> Unit │ -│ • onViewDetails: () -> Unit │ -│ │ -│ Progress Ring: │ -│ ───────────────────────────────────────────────────────────── │ -│ • Size: 64dp x 64dp │ -│ • Stroke Width: 6dp │ -│ • Track Color: Surface variant │ -│ • Progress Color: Secondary Gradient │ -│ • Center: Percentage text (Bold, 16sp) │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - -### 4.7 BillReminderCard - -Upcoming bill payment reminder. - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ BILL REMINDER CARD │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ┌───────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌───┐ │ │ -│ │ │ ⚡│ Electricity Bill Due Dec 15 │ │ -│ │ └───┘ Pacific Gas & Electric │ │ -│ │ │ │ -│ │ $85.00 ⚠️ 3 days │ │ -│ │ │ │ -│ │ ┌─────────────┐ ┌─────────────────┐ │ │ -│ │ │ Pay Now │ │ Remind Later │ │ │ -│ │ └─────────────┘ └─────────────────┘ │ │ -│ │ │ │ -│ └───────────────────────────────────────────────────────────┘ │ -│ │ -│ Urgency Indicators: │ -│ ───────────────────────────────────────────────────────────── │ -│ • Overdue: Red background tint, "⛔ Overdue" │ -│ • 1-3 days: Amber background tint, "⚠️ X days" │ -│ • 4-7 days: Default surface, "📅 X days" │ -│ • 7+ days: Default surface, date only │ -│ │ -│ Props: │ -│ ───────────────────────────────────────────────────────────── │ -│ • icon: ImageVector or Emoji │ -│ • billName: String │ -│ • payee: String │ -│ • amount: String │ -│ • dueDate: LocalDate │ -│ • isOverdue: Boolean │ -│ • onPayNow: () -> Unit │ -│ • onRemindLater: () -> Unit │ -│ • onDismiss: () -> Unit │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - -### 4.8 RecentRecipientChip - -Avatar-based recent transfer recipient. - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ RECENT RECIPIENT CHIP │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │ │ -│ │ │ JD │ │ MS │ │ AK │ │ RK │ │ + │ │ │ -│ │ └────┘ └────┘ └────┘ └────┘ └────┘ │ │ -│ │ John Maria Alex Raj Add │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ Props: │ -│ ───────────────────────────────────────────────────────────── │ -│ • initials: String (2 characters) │ -│ • name: String (display name, max 6 chars) │ -│ • avatarUrl: String? (optional profile image) │ -│ • backgroundColor: Color (random from preset palette) │ -│ • onClick: () -> Unit │ -│ │ -│ Dimensions: │ -│ ───────────────────────────────────────────────────────────── │ -│ • Avatar Size: 48dp x 48dp │ -│ • Corner Radius: 50% (circle) │ -│ • Label: 12sp, max 6 characters with ellipsis │ -│ • Horizontal Spacing: 16dp │ -│ │ -│ Add Button Variant: │ -│ ───────────────────────────────────────────────────────────── │ -│ • Dashed border instead of solid │ -│ • "+" icon in center │ -│ • "Add" label below │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - -### 4.9 AmountInputField - -Large amount input with quick-add chips. - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ AMOUNT INPUT FIELD │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ┌───────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ $ 150.00 │ │ -│ │ ═════════ │ │ -│ │ │ │ -│ │ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │ │ -│ │ │ +10 │ │ +50 │ │ +100 │ │ +500 │ │ │ -│ │ └──────┘ └──────┘ └──────┘ └──────┘ │ │ -│ │ │ │ -│ │ Available: $8,200.00 │ │ -│ │ │ │ -│ └───────────────────────────────────────────────────────────┘ │ -│ │ -│ Props: │ -│ ───────────────────────────────────────────────────────────── │ -│ • value: String │ -│ • onValueChange: (String) -> Unit │ -│ • currency: String ("$", "€", etc.) │ -│ • availableBalance: String │ -│ • quickAmounts: List (e.g., [10, 50, 100, 500]) │ -│ • onQuickAmountClick: (Int) -> Unit │ -│ • error: String? (e.g., "Exceeds available balance") │ -│ │ -│ Styling: │ -│ ───────────────────────────────────────────────────────────── │ -│ • Amount Font: 36sp, ExtraBold │ -│ • Currency: 24sp, Medium │ -│ • Quick Amount Chips: Outlined, 12sp │ -│ • Available Label: 14sp, Secondary color │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - -### 4.10 TrustBadge - -Security and encryption indicator. - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ TRUST BADGE │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ Inline Variant: │ -│ ┌───────────────────────────────────────────────────────────┐ │ -│ │ 🔒 256-bit encryption • Instant transfer │ │ -│ └───────────────────────────────────────────────────────────┘ │ -│ │ -│ Compact Variant: │ -│ ┌───────────────────────────────────────────────────────────┐ │ -│ │ 🔒 Secured │ │ -│ └───────────────────────────────────────────────────────────┘ │ -│ │ -│ Last Login Variant: │ -│ ┌───────────────────────────────────────────────────────────┐ │ -│ │ Last login: Today 9:41 AM • iPhone 15 Pro │ │ -│ └───────────────────────────────────────────────────────────┘ │ -│ │ -│ Props: │ -│ ───────────────────────────────────────────────────────────── │ -│ • variant: TrustBadgeVariant (INLINE, COMPACT, LAST_LOGIN) │ -│ • message: String │ -│ • icon: ImageVector (default: Lock) │ -│ • timestamp: String? (for LAST_LOGIN) │ -│ • device: String? (for LAST_LOGIN) │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - -### 4.11 FilterChipRow - -Horizontal filter selection chips. - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ FILTER CHIP ROW │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ┌───────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌───────┐ ┌─────────┐ ┌───────┐ ┌───────┐ │ │ -│ │ │ All ✓ │ │ Savings │ │ Loans │ │ Share │ │ │ -│ │ └───────┘ └─────────┘ └───────┘ └───────┘ │ │ -│ │ SELECTED DEFAULT DEFAULT DEFAULT │ │ -│ │ │ │ -│ └───────────────────────────────────────────────────────────┘ │ -│ │ -│ States: │ -│ ───────────────────────────────────────────────────────────── │ -│ • Default: Outlined border, transparent background │ -│ • Selected: Filled with Primary color, white text, checkmark │ -│ • Disabled: 40% opacity │ -│ │ -│ Props: │ -│ ───────────────────────────────────────────────────────────── │ -│ • filters: List │ -│ - label: String │ -│ - isSelected: Boolean │ -│ - count: Int? (optional badge) │ -│ • onFilterSelected: (index: Int) -> Unit │ -│ • singleSelect: Boolean (true) or multiSelect: Boolean │ -│ │ -│ Dimensions: │ -│ ───────────────────────────────────────────────────────────── │ -│ • Height: 36dp │ -│ • Corner Radius: 18dp (pill shape) │ -│ • Horizontal Padding: 16dp │ -│ • Gap: 8dp │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - ---- - -## 5. Navigation - -### 5.1 Bottom Navigation Bar - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ BOTTOM NAVIGATION BAR (4-Tab) │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ┌───────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌─────┐ ┌─────┐ ┌─────────┐ ┌─────┐ │ │ -│ │ │ ⌂ │ │ ☰ │ │ 💸 │ │ 👤 │ │ │ -│ │ │ │ │ │ │ ═════ │ │ │ │ │ -│ │ └─────┘ └─────┘ │ FAB │ └─────┘ │ │ -│ │ Home Accounts └─────────┘ Profile │ │ -│ │ ACTIVE INACTIVE CENTER INACTIVE │ │ -│ │ │ │ -│ └───────────────────────────────────────────────────────────┘ │ -│ │ -│ Specifications: │ -│ ───────────────────────────────────────────────────────────── │ -│ • Height: 64dp │ -│ • Background: Surface with elevation (4dp) │ -│ • Active Icon: Primary color, filled variant │ -│ • Inactive Icon: Secondary text color, outlined variant │ -│ • Label: 12sp, shown on active tab only │ -│ • FAB: 56dp, elevated, gradient background, glow effect │ -│ • Safe Area: Bottom padding for gesture navigation │ -│ │ -│ FAB Design: │ -│ ───────────────────────────────────────────────────────────── │ -│ • Size: 56dp x 56dp │ -│ • Elevation: 8dp │ -│ • Y-Offset: -16dp (floats above bar) │ -│ • Background: Primary Gradient │ -│ • Shadow: 16dp blur, primary color at 30% │ -│ • Icon: Send Money (💸), 28dp, white │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - ---- - -## 6. Animations & Micro-interactions - -### 6.1 Animation Tokens - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ ANIMATION SPECIFICATIONS │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ Durations: │ -│ ───────────────────────────────────────────────────────────── │ -│ • Instant: 100ms (micro-interactions) │ -│ • Fast: 200ms (button presses, toggles) │ -│ • Normal: 300ms (screen transitions) │ -│ • Slow: 500ms (complex animations) │ -│ • Very Slow: 800ms (celebrations, onboarding) │ -│ │ -│ Easings: │ -│ ───────────────────────────────────────────────────────────── │ -│ • Standard: cubic-bezier(0.4, 0.0, 0.2, 1) │ -│ • Decelerate: cubic-bezier(0.0, 0.0, 0.2, 1) │ -│ • Accelerate: cubic-bezier(0.4, 0.0, 1.0, 1) │ -│ • Spring: spring(dampingRatio=0.7, stiffness=400) │ -│ │ -│ Key Animations: │ -│ ───────────────────────────────────────────────────────────── │ -│ • Balance reveal: Fade + Scale (0.9 → 1.0), 300ms │ -│ • Card press: Scale (1.0 → 0.98), 100ms │ -│ • Pull-to-refresh: Rotate loading icon, continuous │ -│ • Transaction success: Checkmark draw + confetti, 500ms │ -│ • Amount input: Haptic feedback on each digit │ -│ • Goal progress: Circular fill animation, 800ms │ -│ • Streak badge: Bounce + glow pulse, 300ms │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - ---- - -## 7. Accessibility - -### 7.1 Guidelines - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ ACCESSIBILITY REQUIREMENTS │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ Touch Targets: │ -│ ───────────────────────────────────────────────────────────── │ -│ • Minimum size: 48dp x 48dp │ -│ • Recommended: 56dp x 56dp for primary actions │ -│ • Spacing between targets: 8dp minimum │ -│ │ -│ Color Contrast: │ -│ ───────────────────────────────────────────────────────────── │ -│ • Text on background: 4.5:1 minimum (AA) │ -│ • Large text: 3:1 minimum │ -│ • Non-text elements: 3:1 minimum │ -│ • Focus indicators: 3:1 against adjacent colors │ -│ │ -│ Screen Reader Support: │ -│ ───────────────────────────────────────────────────────────── │ -│ • All interactive elements: contentDescription │ -│ • Balance amounts: Read as "Balance: 12,450 dollars" │ -│ • Status indicators: Read status (Active, Pending) │ -│ • Progress: Read as "60 percent complete" │ -│ │ -│ Motion Preferences: │ -│ ───────────────────────────────────────────────────────────── │ -│ • Honor "Reduce Motion" system setting │ -│ • Provide instant transitions when motion reduced │ -│ • Keep essential feedback animations │ -│ │ -│ Font Scaling: │ -│ ───────────────────────────────────────────────────────────── │ -│ • Support up to 200% text scaling │ -│ • Use flexible layouts that don't break │ -│ • Scroll when content overflows │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - ---- - -## 8. Dark Mode - -### 8.1 Theme Switching - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ DARK MODE SPECIFICATIONS │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ Automatic Elements: │ -│ ───────────────────────────────────────────────────────────── │ -│ • Background: #F8F9FA → #0D1117 │ -│ • Surface/Cards: #FFFFFF → #1A1F2E │ -│ • Primary Text: #1F2937 → #F0F6FC │ -│ • Secondary Text: #6B7280 → #8B949E │ -│ • Dividers: #E1E4E8 → #30363D │ -│ │ -│ Preserved Colors (Same in both modes): │ -│ ───────────────────────────────────────────────────────────── │ -│ • Success: #00D09C │ -│ • Error: #FF4757 │ -│ • Warning: #FFB800 │ -│ • Primary Gradient: #667EEA → #764BA2 │ -│ │ -│ Adjusted Elements: │ -│ ───────────────────────────────────────────────────────────── │ -│ • Card shadows: Removed in dark mode │ -│ • Gradient intensity: Slightly reduced (85% opacity) │ -│ • Icon backgrounds: Increased contrast │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Changelog - -| Date | Version | Change | -|------|---------|--------| -| 2025-12-29 | 2.0 | Complete redesign with Revolut-style vibrant design system | diff --git a/claude-product-cycle/design-spec-layer/_shared/PATTERNS.md b/claude-product-cycle/design-spec-layer/_shared/PATTERNS.md deleted file mode 100644 index ef6772823..000000000 --- a/claude-product-cycle/design-spec-layer/_shared/PATTERNS.md +++ /dev/null @@ -1,427 +0,0 @@ -# Implementation Patterns - Mifos Mobile - -> **Purpose**: Reference patterns for consistent implementation across features -> **Last Updated**: 2025-12-26 - ---- - -## Architecture Overview - -``` -┌─────────────────────────────────────────────────────────────────────┐ -│ MIFOS MOBILE ARCHITECTURE │ -├─────────────────────────────────────────────────────────────────────┤ -│ │ -│ ┌───────────────┐ ┌───────────────┐ ┌───────────────┐ │ -│ │ FEATURE │ │ DATA │ │ NETWORK │ │ -│ │ (UI) │───▶│ (Repository) │───▶│ (Service) │ │ -│ └───────────────┘ └───────────────┘ └───────────────┘ │ -│ │ │ │ │ -│ ▼ ▼ ▼ │ -│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ -│ │ViewModel │ │Repository│ │ Ktorfit │ │ -│ │ (MVI) │ │ Impl │ │ Service │ │ -│ └──────────┘ └──────────┘ └──────────┘ │ -│ │ │ │ │ -│ ▼ ▼ ▼ │ -│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ -│ │ Screen │ │DataState │ │ Fineract │ │ -│ │(Compose) │ │ Flow │ │ API │ │ -│ └──────────┘ └──────────┘ └──────────┘ │ -│ │ -└─────────────────────────────────────────────────────────────────────┘ -``` - ---- - -## 1. MVI ViewModel Pattern - -### Base Structure - -```kotlin -internal class FeatureViewModel( - private val repository: FeatureRepository, - private val userPreferences: UserPreferencesRepository, -) : BaseViewModel( - initialState = FeatureState() -) { - - init { - loadInitialData() - } - - override fun handleAction(action: FeatureAction) { - when (action) { - is FeatureAction.Retry -> loadInitialData() - is FeatureAction.OnItemClick -> handleItemClick(action.id) - is FeatureAction.OnRefresh -> refreshData() - } - } - - private fun loadInitialData() { - viewModelScope.launch { - repository.getData() - .collect { dataState -> - handleDataState(dataState) - } - } - } - - private fun handleDataState(dataState: DataState) { - when (dataState) { - is DataState.Loading -> updateState { - it.copy(uiState = FeatureScreenState.Loading) - } - is DataState.Success -> updateState { - it.copy( - uiState = FeatureScreenState.Success, - data = dataState.data - ) - } - is DataState.Error -> updateState { - it.copy(uiState = FeatureScreenState.Error(Res.string.error_message)) - } - } - } - - private fun handleItemClick(id: Long) { - sendEvent(FeatureEvent.NavigateToDetail(id)) - } - - private fun updateState(update: (FeatureState) -> FeatureState) { - mutableStateFlow.update(update) - } -} -``` - -### State Definition - -```kotlin -@Immutable -data class FeatureState( - val clientId: Long? = null, - val data: List = emptyList(), - val isRefreshing: Boolean = false, - val uiState: FeatureScreenState = FeatureScreenState.Loading, -) - -sealed interface FeatureScreenState { - data object Loading : FeatureScreenState - data object Success : FeatureScreenState - data class Error(val message: StringResource) : FeatureScreenState - data object Empty : FeatureScreenState -} -``` - -### Event Definition (One-time actions) - -```kotlin -sealed interface FeatureEvent { - data class NavigateToDetail(val id: Long) : FeatureEvent - data object NavigateBack : FeatureEvent - data class ShowSnackbar(val message: StringResource) : FeatureEvent -} -``` - -### Action Definition (User interactions) - -```kotlin -sealed interface FeatureAction { - data object Retry : FeatureAction - data object OnRefresh : FeatureAction - data class OnItemClick(val id: Long) : FeatureAction - - // Internal actions (from system, not user) - sealed interface Internal : FeatureAction { - data class ReceiveData(val dataState: DataState) : Internal - } -} -``` - ---- - -## 2. Repository Pattern - -### Interface - -```kotlin -interface FeatureRepository { - fun getData(): Flow>> - fun getById(id: Long): Flow> - suspend fun create(payload: CreatePayload): DataState - suspend fun update(id: Long, payload: UpdatePayload): DataState - suspend fun delete(id: Long): DataState -} -``` - -### Implementation - -```kotlin -class FeatureRepositoryImpl( - private val service: FeatureService, - private val dispatcher: CoroutineDispatcher = Dispatchers.IO, -) : FeatureRepository { - - override fun getData(): Flow>> = flow { - emit(DataState.Loading) - try { - val result = service.fetchData().first() - emit(DataState.Success(result)) - } catch (e: Exception) { - emit(DataState.Error(e.message ?: "Unknown error")) - } - }.flowOn(dispatcher) - - override suspend fun create(payload: CreatePayload): DataState { - return withContext(dispatcher) { - try { - service.create(payload) - DataState.Success(Unit) - } catch (e: Exception) { - DataState.Error(e.message ?: "Failed to create") - } - } - } -} -``` - ---- - -## 3. Service Pattern (Ktorfit) - -```kotlin -interface FeatureService { - - @GET(ApiEndPoints.FEATURE) - fun getData(): Flow> - - @GET(ApiEndPoints.FEATURE + "/{id}") - fun getById(@Path("id") id: Long): Flow - - @GET(ApiEndPoints.FEATURE + "/{id}") - fun getWithAssociations( - @Path("id") id: Long, - @Query("associations") associations: String?, - ): Flow - - @POST(ApiEndPoints.FEATURE) - suspend fun create(@Body payload: CreatePayload): HttpResponse - - @PUT(ApiEndPoints.FEATURE + "/{id}") - suspend fun update( - @Path("id") id: Long, - @Body payload: UpdatePayload, - ): HttpResponse - - @DELETE(ApiEndPoints.FEATURE + "/{id}") - suspend fun delete(@Path("id") id: Long): HttpResponse - - companion object { - const val ID = "id" - } -} -``` - ---- - -## 4. Screen Pattern - -```kotlin -@Composable -fun FeatureScreen( - viewModel: FeatureViewModel = koinViewModel(), - onNavigateBack: () -> Unit, - onNavigateToDetail: (Long) -> Unit, -) { - val state by viewModel.stateFlow.collectAsStateWithLifecycle() - - // Handle one-time events - LaunchedEffect(Unit) { - viewModel.eventFlow.collect { event -> - when (event) { - is FeatureEvent.NavigateBack -> onNavigateBack() - is FeatureEvent.NavigateToDetail -> onNavigateToDetail(event.id) - } - } - } - - FeatureScreenContent( - state = state, - onAction = viewModel::sendAction, - ) -} - -@Composable -private fun FeatureScreenContent( - state: FeatureState, - onAction: (FeatureAction) -> Unit, -) { - Scaffold( - topBar = { - MifosTopAppBar( - title = stringResource(Res.string.feature_title), - onNavigationClick = { onAction(FeatureAction.OnNavigateBack) }, - ) - } - ) { paddingValues -> - Box(modifier = Modifier.padding(paddingValues)) { - when (state.uiState) { - is FeatureScreenState.Loading -> LoadingContent() - is FeatureScreenState.Success -> SuccessContent( - data = state.data, - onItemClick = { onAction(FeatureAction.OnItemClick(it)) } - ) - is FeatureScreenState.Error -> ErrorContent( - message = state.uiState.message, - onRetry = { onAction(FeatureAction.Retry) } - ) - is FeatureScreenState.Empty -> EmptyContent() - } - } - } -} -``` - ---- - -## 5. Navigation Pattern - -```kotlin -// Route definition -@Serializable -data object FeatureRoute - -// Or with parameters -@Serializable -data class FeatureDetailRoute(val id: Long) - -// Navigation extension -fun NavGraphBuilder.featureScreen( - onNavigateBack: () -> Unit, - onNavigateToDetail: (Long) -> Unit, -) { - composable { - FeatureScreen( - onNavigateBack = onNavigateBack, - onNavigateToDetail = onNavigateToDetail, - ) - } -} - -// NavController extension -fun NavController.navigateToFeature() { - navigate(FeatureRoute) -} - -fun NavController.navigateToFeatureDetail(id: Long) { - navigate(FeatureDetailRoute(id)) -} -``` - ---- - -## 6. DI Module Pattern - -```kotlin -val featureModule = module { - viewModelOf(::FeatureViewModel) -} -``` - ---- - -## 7. DataState Pattern - -```kotlin -sealed interface DataState { - data object Loading : DataState - data class Success(val data: T) : DataState - data class Error(val message: String) : DataState -} -``` - ---- - -## 8. Error Handling Pattern - -```kotlin -// In ViewModel -private fun handleError(exception: Exception) { - val errorMessage = when (exception) { - is HttpException -> when (exception.response.status.value) { - 401 -> Res.string.error_unauthorized - 404 -> Res.string.error_not_found - 500 -> Res.string.error_server - else -> Res.string.error_unknown - } - is IOException -> Res.string.error_network - else -> Res.string.error_unknown - } - updateState { it.copy(uiState = FeatureScreenState.Error(errorMessage)) } -} -``` - ---- - -## 9. Pull-to-Refresh Pattern - -```kotlin -@Composable -private fun FeatureContent( - state: FeatureState, - onRefresh: () -> Unit, -) { - PullToRefreshBox( - isRefreshing = state.isRefreshing, - onRefresh = onRefresh, - ) { - LazyColumn { - items(state.data) { item -> - ItemCard(item = item) - } - } - } -} -``` - ---- - -## 10. Form Validation Pattern - -```kotlin -// In ViewModel -private fun validateForm(): Boolean { - val errors = mutableListOf() - - if (state.amount <= 0) { - errors.add(ValidationError.InvalidAmount) - } - if (state.accountId == null) { - errors.add(ValidationError.AccountRequired) - } - - if (errors.isNotEmpty()) { - updateState { it.copy(validationErrors = errors) } - return false - } - return true -} - -sealed interface ValidationError { - data object InvalidAmount : ValidationError - data object AccountRequired : ValidationError -} -``` - ---- - -## Best Practices - -1. **State Immutability**: Always use `@Immutable` on state classes -2. **Single Source of Truth**: State lives in ViewModel only -3. **Unidirectional Data Flow**: UI → Action → ViewModel → State → UI -4. **Separation of Concerns**: Keep layers independent -5. **Error Handling**: Always handle Loading, Success, Error states -6. **Resource Strings**: Use `StringResource` for all user-facing text -7. **Flow Collection**: Use `collectAsStateWithLifecycle()` in Compose -8. **Internal Visibility**: Use `internal` for feature-internal classes diff --git a/claude-product-cycle/design-spec-layer/features/MOCKUPS_README.md b/claude-product-cycle/design-spec-layer/features/MOCKUPS_README.md deleted file mode 100644 index 76814db50..000000000 --- a/claude-product-cycle/design-spec-layer/features/MOCKUPS_README.md +++ /dev/null @@ -1,139 +0,0 @@ -# Mockups Directory Structure - -> **Purpose**: Store and organize UI mockup images for each feature -> **Last Updated**: 2025-01-04 - ---- - -## Directory Structure - -``` -features/ -└── [feature-name]/ - └── mockups/ - ├── PROMPTS.md # AI design tool prompts - ├── design-tokens.json # Structured design tokens - ├── FIGMA_LINKS.md # Figma export URLs - ├── dummy/ # Placeholder images (reference) - │ ├── 01-screen-name.png - │ ├── 02-screen-name.png - │ └── ... - └── prod/ # Production mockups (actual designs) - ├── 01-screen-name.png - ├── 02-screen-name.png - └── ... -``` - ---- - -## Usage - -### For Designers - -1. **Generate designs** using prompts from `PROMPTS.md`: - - Google Stitch: [stitch.withgoogle.com](https://stitch.withgoogle.com) - - Figma: Use Figma AI or manual design - -2. **Export designs** as PNG/JPG at: - - 1x (375px width for mobile) - - 2x (750px) - optional for high-res - - 3x (1125px) - optional for high-res - -3. **Save to `prod/`** with matching filenames: - - Replace `dummy/01-login-screen.png` - - With `prod/01-login-screen.png` - -4. **Update `FIGMA_LINKS.md`** with Figma URLs - -### For Developers (Claude) - -When implementing screens, I will: -1. Check `prod/` first for actual designs -2. Fall back to `dummy/` for placeholder reference -3. Use `design-tokens.json` for colors, spacing, typography -4. Reference screen naming for navigation flow - ---- - -## Naming Convention - -``` -[order]-[screen-name].png - -Examples: -01-login-screen.png -02-registration-screen.png -03-forgot-password.png -``` - -### Order Prefix -- `01-09`: Main screens -- `10-19`: Secondary screens -- `20-29`: Modals/dialogs -- `30-39`: Empty/error states -- `40-49`: Dark mode variants - ---- - -## Feature Screen Inventory - -| Feature | Screens | dummy/ | prod/ | -|---------|:-------:|:------:|:-----:| -| auth | 6 | ✅ | ⏳ | -| home | 5 | ✅ | ⏳ | -| accounts | 4 | ✅ | ⏳ | -| savings-account | 6 | ✅ | ⏳ | -| loan-account | 7 | ✅ | ⏳ | -| share-account | 6 | ✅ | ⏳ | -| beneficiary | 6 | ✅ | ⏳ | -| transfer | 6 | ✅ | ⏳ | -| recent-transaction | 6 | ✅ | ⏳ | -| notification | 5 | ✅ | ⏳ | -| settings | 9 | ✅ | ⏳ | -| passcode | 7 | ✅ | ⏳ | -| guarantor | 8 | ✅ | ⏳ | -| qr | 7 | ✅ | ⏳ | -| location | 8 | ✅ | ⏳ | -| client-charge | 9 | ✅ | ⏳ | -| dashboard | 7 | ✅ | ⏳ | - -**Legend**: ✅ Complete | ⏳ Pending | ❌ Missing - ---- - -## Dark Mode Variants - -For dark mode, add `-dark` suffix: -``` -01-login-screen.png # Light mode -01-login-screen-dark.png # Dark mode -``` - ---- - -## Image Specifications - -| Property | Value | -|----------|-------| -| Format | PNG (preferred) or JPG | -| Width | 375px (1x) / 750px (2x) | -| Color Profile | sRGB | -| Compression | Optimized for web | - ---- - -## Workflow - -``` -1. Read PROMPTS.md for feature - ↓ -2. Generate in Stitch/Figma - ↓ -3. Export as PNG - ↓ -4. Save to prod/ folder - ↓ -5. Update FIGMA_LINKS.md - ↓ -6. Commit & push -``` diff --git a/claude-product-cycle/design-spec-layer/features/accounts/API.md b/claude-product-cycle/design-spec-layer/features/accounts/API.md deleted file mode 100644 index 1f192377a..000000000 --- a/claude-product-cycle/design-spec-layer/features/accounts/API.md +++ /dev/null @@ -1,799 +0,0 @@ -# Accounts - API Reference - -> **Base URL**: `https://tt.mifos.community/fineract-provider/api/v1/self/` -> **Authentication**: Basic Auth with `Fineract-Platform-TenantId` header -> **Last Updated**: 2025-12-29 - ---- - -## Authentication Headers - -All endpoints require: -``` -Headers: - Authorization: Basic {base64EncodedAuthenticationKey} - Fineract-Platform-TenantId: {tenantId} - Content-Type: application/json -``` - ---- - -## 1. Client Accounts Overview - -### GET /self/clients/{clientId}/accounts - -**Purpose**: Fetch all account summaries for account listing - -**Request**: -``` -GET /self/clients/123/accounts -``` - -**Optional Query Parameters**: -| Parameter | Type | Description | -|-----------|------|-------------| -| fields | String | Filter by account type: "savingsAccounts", "loanAccounts", "shareAccounts" | - -**Response**: -```json -{ - "savingsAccounts": [ - { - "id": 1001, - "accountNo": "SA-0001234567", - "productId": 1, - "productName": "Wallet Savings", - "status": { - "id": 300, - "code": "savingsAccountStatusType.active", - "value": "Active", - "submittedAndPendingApproval": false, - "approved": true, - "rejected": false, - "withdrawnByApplicant": false, - "active": true, - "closed": false - }, - "currency": { - "code": "USD", - "name": "US Dollar", - "decimalPlaces": 2, - "displaySymbol": "$", - "nameCode": "currency.USD", - "displayLabel": "US Dollar ($)" - }, - "accountBalance": 12500.00, - "depositType": { - "id": 100, - "code": "depositAccountType.savingsDeposit", - "value": "Savings" - }, - "lastActiveTransactionDate": [2025, 12, 29] - } - ], - "loanAccounts": [ - { - "id": 2001, - "accountNo": "LA-0009876543", - "productId": 2, - "productName": "Personal Loan", - "status": { - "id": 300, - "code": "loanStatusType.active", - "value": "Active", - "active": true - }, - "loanType": { - "id": 1, - "code": "accountType.individual", - "value": "Individual" - }, - "principal": 10000.00, - "loanBalance": 6750.00, - "amountPaid": 3250.00, - "inArrears": false, - "currency": { - "code": "USD", - "displaySymbol": "$" - } - } - ], - "shareAccounts": [ - { - "id": 3001, - "accountNo": "SH-0005678901", - "productId": 3, - "productName": "Equity Shares", - "status": { - "id": 300, - "code": "shareAccountStatusType.active", - "value": "Active", - "active": true - }, - "totalApprovedShares": 100, - "totalPendingForApprovalShares": 0, - "currency": { - "code": "USD", - "displaySymbol": "$" - } - } - ] -} -``` - -**Kotlin DTO**: -```kotlin -@Serializable -data class ClientAccounts( - val loanAccounts: List = emptyList(), - val savingsAccounts: List? = emptyList(), - val shareAccounts: List = emptyList(), -) { - fun recurringSavingsAccounts(): List - fun nonRecurringSavingsAccounts(): List -} -``` - -**Status**: Implemented in ClientService - ---- - -## 2. Savings Account Details with Transactions - -### GET /self/savingsaccounts/{accountId} - -**Purpose**: Fetch savings account details with transaction history - -**Request**: -``` -GET /self/savingsaccounts/1001?associations=transactions -``` - -**Query Parameters**: -| Parameter | Type | Description | -|-----------|------|-------------| -| associations | String | Include related data: "transactions", "charges", "all" | - -**Response**: -```json -{ - "id": 1001, - "accountNo": "SA-0001234567", - "clientId": 123, - "clientName": "John Doe", - "savingsProductId": 1, - "savingsProductName": "Wallet Savings", - "status": { - "id": 300, - "code": "savingsAccountStatusType.active", - "value": "Active", - "active": true - }, - "currency": { - "code": "USD", - "name": "US Dollar", - "decimalPlaces": 2, - "displaySymbol": "$" - }, - "nominalAnnualInterestRate": 4.5, - "summary": { - "totalDeposits": 15000.00, - "totalWithdrawals": 2500.00, - "totalInterestEarned": 125.00, - "accountBalance": 12625.00 - }, - "transactions": [ - { - "id": 10001, - "transactionType": { - "id": 1, - "code": "savingsAccountTransactionType.deposit", - "value": "Deposit", - "deposit": true, - "withdrawal": false, - "interestPosting": false, - "feeDeduction": false - }, - "accountId": 1001, - "accountNo": "SA-0001234567", - "date": [2025, 12, 29], - "currency": { - "code": "USD", - "displaySymbol": "$" - }, - "amount": 4500.00, - "runningBalance": 12625.00, - "reversed": false, - "submittedOnDate": [2025, 12, 29] - }, - { - "id": 10002, - "transactionType": { - "id": 2, - "code": "savingsAccountTransactionType.withdrawal", - "value": "Withdrawal", - "deposit": false, - "withdrawal": true, - "interestPosting": false, - "feeDeduction": false - }, - "accountId": 1001, - "accountNo": "SA-0001234567", - "date": [2025, 12, 28], - "currency": { - "code": "USD", - "displaySymbol": "$" - }, - "amount": 150.00, - "runningBalance": 8125.00, - "reversed": false - } - ] -} -``` - -**Kotlin DTO**: -```kotlin -@Serializable -data class SavingsWithAssociations( - val id: Long? = null, - val accountNo: String? = null, - val depositType: DepositType? = null, - val externalId: String? = null, - val clientId: Int? = null, - val clientName: String? = null, - val savingsProductId: Int? = null, - val savingsProductName: String? = null, - val status: Status? = null, - val timeline: TimeLine? = null, - val currency: Currency? = null, - val nominalAnnualInterestRate: Double? = null, - val summary: Summary? = null, - val transactions: List = emptyList(), -) - -@Serializable -data class Transactions( - val id: Int? = null, - val transactionType: TransactionType? = null, - val accountId: Int? = null, - val accountNo: String? = null, - val date: List = emptyList(), - val currency: Currency? = null, - val paymentDetailData: PaymentDetailData? = null, - val amount: Double? = null, - val runningBalance: Double? = null, - val reversed: Boolean? = null, - val submittedOnDate: List? = null, -) -``` - -**Status**: Implemented in SavingAccountsListService - ---- - -## 3. Loan Account Details with Transactions - -### GET /self/loans/{loanId} - -**Purpose**: Fetch loan account details with transaction history - -**Request**: -``` -GET /self/loans/2001?associations=transactions -``` - -**Query Parameters**: -| Parameter | Type | Description | -|-----------|------|-------------| -| associations | String | Include: "repaymentSchedule", "transactions", "all" | - -**Response**: -```json -{ - "id": 2001, - "accountNo": "LA-0009876543", - "clientId": 123, - "clientName": "John Doe", - "loanProductId": 2, - "loanProductName": "Personal Loan", - "status": { - "id": 300, - "code": "loanStatusType.active", - "value": "Active", - "active": true - }, - "loanType": { - "id": 1, - "code": "accountType.individual", - "value": "Individual" - }, - "currency": { - "code": "USD", - "displaySymbol": "$", - "decimalPlaces": 2 - }, - "principal": 10000.00, - "approvedPrincipal": 10000.00, - "numberOfRepayments": 12, - "interestRatePerPeriod": 1.0, - "summary": { - "principalDisbursed": 10000.00, - "principalPaid": 3250.00, - "principalOutstanding": 6750.00, - "interestCharged": 600.00, - "interestPaid": 400.00, - "interestOutstanding": 200.00, - "totalExpectedRepayment": 10600.00, - "totalRepayment": 3650.00, - "totalOutstanding": 6950.00 - }, - "transactions": [ - { - "id": 20001, - "officeId": 1, - "officeName": "Head Office", - "type": { - "id": 2, - "code": "loanTransactionType.repayment", - "value": "Repayment", - "disbursement": false, - "repaymentAtDisbursement": false, - "repayment": true - }, - "date": [2025, 12, 15], - "currency": { - "code": "USD", - "displaySymbol": "$" - }, - "amount": 900.00, - "principalPortion": 800.00, - "interestPortion": 100.00, - "feeChargesPortion": 0.00, - "penaltyChargesPortion": 0.00, - "outstandingLoanBalance": 6750.00, - "reversed": false - } - ], - "inArrears": false -} -``` - -**Kotlin DTO**: -```kotlin -@Serializable -data class LoanWithAssociations( - val id: Int? = null, - val accountNo: String? = null, - val externalId: String? = null, - val status: Status? = null, - val clientId: Int? = null, - val clientName: String? = null, - val loanProductId: Int? = null, - val loanProductName: String? = null, - val loanType: LoanType? = null, - val currency: Currency? = null, - val principal: Double? = null, - val approvedPrincipal: Double? = null, - val numberOfRepayments: Int? = null, - val interestRatePerPeriod: Double? = null, - val timeline: Timeline? = null, - val summary: Summary? = null, - val repaymentSchedule: RepaymentSchedule? = null, - val transactions: List? = arrayListOf(), - val inArrears: Boolean? = null, -) -``` - -**Status**: Implemented in LoanAccountsListService - ---- - -## 4. Share Account Details - -### GET /self/shareaccounts/{accountId} - -**Purpose**: Fetch share account details with purchased shares history - -**Request**: -``` -GET /self/shareaccounts/3001?associations=all -``` - -**Query Parameters**: -| Parameter | Type | Default | Description | -|-----------|------|---------|-------------| -| associations | String | "all" | Include related data | - -**Response**: -```json -{ - "id": 3001, - "accountNo": "SH-0005678901", - "clientId": 123, - "clientName": "John Doe", - "productId": 3, - "productName": "Equity Shares", - "status": { - "id": 300, - "code": "shareAccountStatusType.active", - "value": "Active", - "active": true - }, - "currency": { - "code": "USD", - "name": "US Dollar", - "decimalPlaces": 2, - "displaySymbol": "$" - }, - "timeline": { - "submittedOnDate": [2024, 1, 15], - "approvedDate": [2024, 1, 20], - "activatedDate": [2024, 1, 25] - }, - "totalApprovedShares": 100, - "totalPendingForApprovalShares": 0, - "purchasedShares": [ - { - "id": 30001, - "purchasedDate": [2024, 1, 25], - "numberOfShares": 50, - "purchasedPrice": 10.00, - "status": { - "id": 300, - "code": "purchaseStatusType.approved", - "value": "Approved" - }, - "type": { - "id": 500, - "code": "purchaseType.purchased", - "value": "Purchase" - }, - "amount": 500.00, - "chargeAmount": 5.00, - "amountPaid": 505.00 - } - ], - "summary": { - "totalApprovedShares": 100, - "totalPendingShares": 0 - } -} -``` - -**Kotlin DTO**: -```kotlin -@Serializable -data class ShareAccountWithAssociations( - val id: Long = 0, - val accountNo: String? = null, - val clientId: Long? = null, - val clientName: String? = null, - val productId: Long? = null, - val productName: String? = null, - val status: Status? = null, - val currency: Currency? = null, - val timeline: Timeline? = null, - val totalApprovedShares: Int? = null, - val totalPendingForApprovalShares: Int? = null, - val purchasedShares: List = emptyList(), - val summary: Summary? = null, -) - -// Share Transactions -@Serializable -data class Transactions( - val id: Long? = null, - val purchasedDate: List = emptyList(), - val numberOfShares: Int? = null, - val purchasedPrice: Double? = null, - val status: Status? = null, - val type: EnumOptionData? = null, - val amount: Double? = null, - val chargeAmount: Double? = null, - val amountPaid: Double? = null, -) -``` - -**Status**: Implemented in ShareAccountService - ---- - -## 5. Recent Transactions - -### GET /self/clients/{clientId}/transactions - -**Purpose**: Fetch recent transactions across all accounts - -**Request**: -``` -GET /self/clients/123/transactions?offset=0&limit=50 -``` - -**Query Parameters**: -| Parameter | Type | Default | Description | -|-----------|------|---------|-------------| -| offset | Int | 0 | Pagination offset | -| limit | Int | 50 | Number of records per page | - -**Response**: -```json -{ - "totalFilteredRecords": 150, - "pageItems": [ - { - "id": 10001, - "officeId": 1, - "officeName": "Head Office", - "type": { - "id": 1, - "code": "savingsAccountTransactionType.deposit", - "value": "Deposit", - "deposit": true, - "withdrawal": false, - "interestPosting": false, - "feeDeduction": false - }, - "date": [2025, 12, 29], - "currency": { - "code": "USD", - "name": "US Dollar", - "decimalPlaces": 2, - "displaySymbol": "$" - }, - "amount": 4500.00, - "submittedOnDate": [2025, 12, 29], - "reversed": false - } - ] -} -``` - -**Kotlin DTO**: -```kotlin -@Serializable -data class Page( - val totalFilteredRecords: Int = 0, - val pageItems: List = emptyList(), -) - -@Serializable -data class Transaction( - val id: Long? = null, - val officeId: Long? = null, - val officeName: String? = null, - val type: Type, - val date: List = emptyList(), - val currency: Currency? = null, - val amount: Double? = null, - val submittedOnDate: List = emptyList(), - val reversed: Boolean? = null, -) -``` - -**Status**: Implemented in RecentTransactionsService - ---- - -## 6. Savings Transaction Details - -### GET /self/savingsaccounts/{accountId}/transactions/{transactionId} - -**Purpose**: Fetch detailed information about a specific savings transaction - -**Request**: -``` -GET /self/savingsaccounts/1001/transactions/10001 -``` - -**Response**: -```json -{ - "id": 10001, - "officeId": 1, - "officeName": "Head Office", - "transactionType": { - "id": 1, - "code": "savingsAccountTransactionType.deposit", - "value": "Deposit", - "deposit": true, - "withdrawal": false, - "interestPosting": false, - "feeDeduction": false - }, - "date": [2025, 12, 29], - "currency": { - "code": "USD", - "name": "US Dollar", - "decimalPlaces": 2, - "displaySymbol": "$" - }, - "amount": 4500.00, - "accountNo": "SA-0001234567", - "runningBalance": 12625.00, - "reversed": false, - "manuallyReversed": false, - "externalId": "EXT-12345", - "submittedOnDate": [2025, 12, 29] -} -``` - -**Kotlin DTO**: -```kotlin -@Serializable -data class TransactionDetails( - val id: Long? = null, - val officeId: Long? = null, - val officeName: String? = null, - val type: Type? = null, - val date: List = emptyList(), - val currency: Currency? = null, - val amount: Double? = null, - val submittedOnDate: List = emptyList(), - val reversed: Boolean? = null, - val accountNo: String? = null, - val manuallyReversed: Boolean? = null, - val externalId: String? = null, - val outstandingLoanBalance: Double? = null, - val runningBalance: Double? = null, - val principalPortion: Double? = null, - val interestPortion: Double? = null, - val feeChargesPortion: Double? = null, - val penaltyChargesPortion: Double? = null, -) { - val isCredit: Boolean - get() { /* logic based on type value */ } -} -``` - -**Status**: Implemented in SavingAccountsListService - ---- - -## 7. Loan Transaction Details - -### GET /self/loans/{loanId}/transactions/{transactionId} - -**Purpose**: Fetch detailed information about a specific loan transaction - -**Request**: -``` -GET /self/loans/2001/transactions/20001 -``` - -**Response**: -```json -{ - "id": 20001, - "officeId": 1, - "officeName": "Head Office", - "transactionType": { - "id": 2, - "code": "loanTransactionType.repayment", - "value": "Repayment", - "disbursement": false, - "repayment": true - }, - "date": [2025, 12, 15], - "currency": { - "code": "USD", - "displaySymbol": "$", - "decimalPlaces": 2 - }, - "amount": 900.00, - "accountNo": "LA-0009876543", - "reversed": false, - "manuallyReversed": false, - "externalId": "LN-EXT-20001", - "outstandingLoanBalance": 6750.00, - "principalPortion": 800.00, - "interestPortion": 100.00, - "feeChargesPortion": 0.00, - "penaltyChargesPortion": 0.00 -} -``` - -**Status**: Implemented in LoanAccountsListService - ---- - -## API Summary Table - -| Endpoint | Method | Service | Repository | Priority | -|----------|--------|---------|------------|----------| -| /self/clients/{id}/accounts | GET | ClientService | AccountsRepository | P0 | -| /self/savingsaccounts/{id} | GET | SavingAccountsListService | SavingsAccountRepository | P0 | -| /self/loans/{id} | GET | LoanAccountsListService | LoanRepository | P0 | -| /self/shareaccounts/{id} | GET | ShareAccountService | ShareAccountRepository | P0 | -| /self/clients/{id}/transactions | GET | RecentTransactionsService | RecentTransactionRepository | P0 | -| /self/savingsaccounts/{id}/transactions/{txId} | GET | SavingAccountsListService | SavingsAccountRepository | P1 | -| /self/loans/{id}/transactions/{txId} | GET | LoanAccountsListService | LoanRepository | P1 | - ---- - -## Common Data Models - -### Currency - -```kotlin -@Serializable -data class Currency( - val code: String? = null, - val name: String? = null, - val decimalPlaces: Int? = null, - val displaySymbol: String? = null, - val nameCode: String? = null, - val displayLabel: String? = null, -) -``` - -### Status (Common pattern across account types) - -```kotlin -@Serializable -data class Status( - val id: Int? = null, - val code: String? = null, - val value: String? = null, - val submittedAndPendingApproval: Boolean? = null, - val approved: Boolean? = null, - val rejected: Boolean? = null, - val withdrawnByApplicant: Boolean? = null, - val active: Boolean? = null, - val closed: Boolean? = null, - val matured: Boolean? = null, - val overpaid: Boolean? = null, -) -``` - -### TransactionType - -```kotlin -@Serializable -data class TransactionType( - val id: Int? = null, - val code: String? = null, - val value: String? = null, - val deposit: Boolean? = null, - val dividendPayout: Boolean? = null, - val withdrawal: Boolean? = null, - val interestPosting: Boolean? = null, - val feeDeduction: Boolean? = null, - val initiateTransfer: Boolean? = null, - val approveTransfer: Boolean? = null, - val withdrawTransfer: Boolean? = null, - val rejectTransfer: Boolean? = null, - val overdraftFee: Boolean? = null, -) -``` - ---- - -## Error Responses - -| Status Code | Error | Description | User Message | -|-------------|-------|-------------|--------------| -| 400 | Bad Request | Invalid request payload | "Please check your input" | -| 401 | Unauthorized | Invalid/expired token | "Please login again" | -| 403 | Forbidden | Insufficient permissions | "Access denied" | -| 404 | Not Found | Resource doesn't exist | "Account not found" | -| 500 | Server Error | Internal server error | "Service unavailable" | - -**Error Response Format**: -```json -{ - "developerMessage": "Detailed error for debugging", - "httpStatusCode": "404", - "defaultUserMessage": "Account not found", - "userMessageGlobalisationCode": "error.msg.account.not.found", - "errors": [] -} -``` - ---- - -## Changelog - -| Date | Change | -|------|--------| -| 2025-12-29 | Initial API documentation based on existing implementation | diff --git a/claude-product-cycle/design-spec-layer/features/accounts/MOCKUP.md b/claude-product-cycle/design-spec-layer/features/accounts/MOCKUP.md deleted file mode 100644 index ed29c56d5..000000000 --- a/claude-product-cycle/design-spec-layer/features/accounts/MOCKUP.md +++ /dev/null @@ -1,1582 +0,0 @@ -# Accounts - UI Mockups - -> **Design Style**: 2025 Professional Fintech (Revolut/N26 Inspired) -> **Version**: 2.0 - Enhanced with Analytics & Gamification -> **Primary Gradient**: #667EEA to #764BA2 (Purple-Blue) -> **Last Updated**: 2025-12-30 - ---- - -## Design Philosophy - -The Accounts screen serves as the **financial command center** where users gain complete visibility into their wealth. Following 2025 fintech trends: - -1. **Data Visualization First** - Charts and graphs over raw numbers -2. **Predictive Insights** - AI-powered recommendations -3. **Gamification** - Progress tracking, streaks, achievements -4. **Gesture-Based Actions** - Swipe for quick operations -5. **Personalized Dashboard** - Adaptive content based on behavior - ---- - -## Navigation Context - -``` -+-------------------------------------------------------------------+ -| BOTTOM NAVIGATION | -+-------------------------------------------------------------------+ -| | -| [Home] [Accounts] [FAB] [Profile] | -| o [ACTIVE] $ o | -| | | -| v | -| Financial Command Center | -| | -| Features: | -| • Unified account view across all types | -| • Spending analytics with category drill-down | -| • AI-powered financial insights | -| • Gamified savings goals with streaks | -| • Bill management with auto-pay setup | -| | -+-------------------------------------------------------------------+ -``` - ---- - -## Screen 1: Main Accounts View (Success State) - -``` -+-------------------------------------------------------------------+ -| 9:41 [🔍] [⚡] [🔔] | -+-------------------------------------------------------------------+ -| | -| My Accounts [Filter ≡] | -| | -| +---------------------------------------------------------------+ | -| | [All] [Savings] [Loans] [Shares] [Goals] | | -| | ● ○ ○ ○ ○ | | -| | SELECTED NEW TAB | | -| +---------------------------------------------------------------+ | -| | -+===================================================================+ -| | -| ╔═══════════════════════════════════════════════════════════════╗ | -| ║▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓║ | -| ║▓▓ ▓▓║ | -| ║▓▓ NET WORTH [👁 Hide] ▓▓║ | -| ║▓▓ ▓▓║ | -| ║▓▓ $18,450.00 ▓▓║ | -| ║▓▓ ▓▓║ | -| ║▓▓ ┌─────────────────┐ ┌─────────────────┐ ▓▓║ | -| ║▓▓ │ ↑ +$1,250 │ │ ↓ -$380 │ ▓▓║ | -| ║▓▓ │ This Month │ │ Expenses │ ▓▓║ | -| ║▓▓ │ ▓▓ Teal BG │ │ ▓▓ Coral BG │ ▓▓║ | -| ║▓▓ └─────────────────┘ └─────────────────┘ ▓▓║ | -| ║▓▓ ▓▓║ | -| ║▓▓ ┌───────────────────────────────────────────────────────┐▓▓║ | -| ║▓▓ │ 💎 FINANCIAL HEALTH SCORE │▓▓║ | -| ║▓▓ │ │▓▓║ | -| ║▓▓ │ EXCELLENT ┌────┐ │▓▓║ | -| ║▓▓ │ ████████████████████░░░░░ │ 85 │ │▓▓║ | -| ║▓▓ │ └────┘ │▓▓║ | -| ║▓▓ │ +5 from last month │▓▓║ | -| ║▓▓ │ │▓▓║ | -| ║▓▓ └───────────────────────────────────────────────────────┘▓▓║ | -| ║▓▓ ▓▓║ | -| ╚═══════════════════════════════════════════════════════════════╝ | -| PRIMARY GRADIENT CARD | -| | -+-------------------------------------------------------------------+ -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ 📊 SPENDING ANALYTICS This Week ▼ │ | -| │ │ | -| │ $1,240 spent -12% vs last week │ | -| │ │ | -| │ ┌──┐ │ | -| │ │▓▓│ │ | -| │ ┌──┐ │▓▓│ ┌──┐ ┌──┐ │ | -| │ │▓▓│ │▓▓│ │▓▓│ ┌──┐ │▓▓│ │ | -| │ │▓▓│ │▓▓│ │▓▓│ │▓▓│ │▓▓│ ┌──┐ ┌──┐ │ | -| │ │▓▓│ │▓▓│ │▓▓│ │▓▓│ │▓▓│ │▓▓│ │░░│ │ | -| │ ──────────────────────────────── │ | -| │ Mon Tue Wed Thu Fri Sat Sun │ | -| │ ∘ Today │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ | -| │ 🍔 Food │ │ 🚗 Trans │ │ 🛒 Shopping │ │ 💡 Bills │ | -| │ $320 │ │ $180 │ │ $450 │ │ $290 │ | -| │ 26% │ │ 15% │ │ 36% │ │ 23% │ | -| │ ▓▓▓▓░░░░░░ │ │ ▓▓░░░░░░░░ │ │ ▓▓▓▓▓░░░░░ │ │ ▓▓▓░░░░░░░ │ | -| └─────────────┘ └─────────────┘ └─────────────┘ └─────────────┘ | -| CATEGORY CHIPS - Tap to drill down | -| | -+-------------------------------------------------------------------+ -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ 🤖 AI INSIGHTS See All > │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ ┌────┐ │ | -| │ │ 💡 │ You could save $85/month │ | -| │ │ AI │ by switching to a cheaper internet plan │ | -| │ └────┘ │ | -| │ │ | -| │ [Explore Options] [Dismiss] │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ ┌────┐ │ | -| │ │ 🎯 │ Great job! You're on track to save │ | -| │ │ AI │ $500 extra this quarter │ | -| │ └────┘ │ | -| │ ████████████████████████░░░░░░░░ 75% │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -| | -| ┌─────── SAVINGS ACCOUNTS ─────────────────────────────────────┐ | -| │ 3 accounts Total: $12,500.00 │ | -| │ │ | -| │ 🔥 7-day streak! +$850 this month │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| ← SWIPE FOR ACTIONS → | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌──────┐ Primary Savings [Active] [>] │ | -| │ │ 🏦 │ ****4521 │ | -| │ │ Piggy│ │ | -| │ └──────┘ │ | -| │ │ | -| │ $8,200.00 ↑ +$200 this month │ | -| │ │ | -| │ ┌─────────────────────────────────────────────────────────┐ │ | -| │ │ 🎯 Goal: Emergency Fund │ │ | -| │ │ █████████████████████████████████░░░░░░░░░░ 65% │ │ | -| │ │ $8,200 / $12,600 │ │ | -| │ └─────────────────────────────────────────────────────────┘ │ | -| │ │ | -| │ 🔥 7 days 🏆 3 goals ⚡ Auto-save ON │ | -| │ streak reached $50/week │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌──────┐ Vacation Fund [Active] [>] │ | -| │ │ ✈️ │ ****7832 │ | -| │ │ Trip │ │ | -| │ └──────┘ │ | -| │ │ | -| │ $3,500.00 ↑ +$500 this month │ | -| │ │ | -| │ ┌─────────────────────────────────────────────────────────┐ │ | -| │ │ 🏝️ Goal: Bali Trip 2025 │ │ | -| │ │ ██████████████████░░░░░░░░░░░░░░░░░░░░░░░░ 45% │ │ | -| │ │ $3,500 / $8,000 Est: Aug 2025 │ │ | -| │ └─────────────────────────────────────────────────────────┘ │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌──────┐ Emergency Reserve [Active] [>] │ | -| │ │ 🛡️ │ ****2156 │ | -| │ │Shield│ │ | -| │ └──────┘ │ | -| │ │ | -| │ $800.00 ↑ +$150 this month │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -| | -| ┌─────── LOAN ACCOUNTS ────────────────────────────────────────┐ | -| │ 2 accounts Outstanding: $6,200 │ | -| │ │ | -| │ 📊 Debt-free in 18 months │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ [⚠️ 15 days] │ | -| │ ┌──────┐ Personal Loan [Active] [>] │ | -| │ │ 💳 │ LN-0045821 │ | -| │ │Wallet│ │ | -| │ └──────┘ │ | -| │ │ | -| │ Outstanding: -$4,500.00 │ | -| │ Original: $7,500.00 │ | -| │ │ | -| │ ┌─────────────────────────────────────────────────────────┐ │ | -| │ │ NEXT PAYMENT │ │ | -| │ │ $350.00 Due: Jan 15, 2025 │ │ | -| │ │ ████████████████████████░░░░░░░░░░ 15 days remaining │ │ | -| │ │ │ │ | -| │ │ [Schedule Payment] [Pay Now] │ │ | -| │ └─────────────────────────────────────────────────────────┘ │ | -| │ │ | -| │ REPAYMENT PROGRESS │ | -| │ ████████████████████████████████░░░░░░░░░░░░░░░ 60% │ | -| │ $3,000 of $7,500 paid │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌──────┐ Education Loan [Active] [>] │ | -| │ │ 📚 │ LN-0012445 │ | -| │ │ Book │ │ | -| │ └──────┘ │ | -| │ │ | -| │ Outstanding: -$1,700.00 │ | -| │ Original: $12,000.00 │ | -| │ │ | -| │ ┌─────────────────────────────────────────────────────────┐ │ | -| │ │ NEXT PAYMENT │ │ | -| │ │ $150.00 Due: Jan 20, 2025 │ │ | -| │ │ ██████████████████████████████░░░░░ 20 days remaining │ │ | -| │ └─────────────────────────────────────────────────────────┘ │ | -| │ │ | -| │ REPAYMENT PROGRESS │ | -| │ ██████████████████████████████████████████░░░░░░░ 85% │ | -| │ $10,300 of $12,000 paid • 🎉 Almost there! │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -| | -| ┌─────── SHARE ACCOUNTS ───────────────────────────────────────┐ | -| │ 1 account Value: $750.00 │ | -| │ │ | -| │ 📈 +$22.50 dividends this year │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌──────┐ Community Shares [Active] [>] │ | -| │ │ 📊 │ SH-0008321 │ | -| │ │Chart │ │ | -| │ └──────┘ │ | -| │ │ | -| │ Current Value: $750.00 │ | -| │ 15 shares @ $50.00 each │ | -| │ │ | -| │ ┌─────────────────────────────────────────────────────────┐ │ | -| │ │ DIVIDEND INFO │ │ | -| │ │ ┌──────────────────────────────────────────────────┐ │ │ | -| │ │ │ Last Dividend │ Next Payout │ Rate │ │ │ | -| │ │ │ $7.50 │ Mar 15, 2025 │ 3% APY │ │ │ | -| │ │ └──────────────────────────────────────────────────┘ │ │ | -| │ └─────────────────────────────────────────────────────────┘ │ | -| │ │ | -| │ [🛒 Buy More] [💰 Sell Shares] │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -| | -| ┌─────── UPCOMING BILLS ───────────────────────────────────────┐ | -| │ 4 bills Total: $1,392.00 │ | -| │ │ | -| │ ⚡ 1 overdue • 💡 Auto-pay: 2 enabled │ | -| │ [See All >] │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ 🔴 OVERDUE │ | -| │ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │ | -| │ │ | -| │ ⚡ Electricity Bill OVERDUE │ | -| │ Pacific Gas & Electric Was due Dec 28 │ | -| │ │ | -| │ $85.00 │ | -| │ │ | -| │ ┌──────────────────────────────────┐ ┌──────────────────┐ │ | -| │ │▓▓▓▓▓▓▓▓▓▓▓ PAY NOW ▓▓▓▓▓▓▓▓▓▓▓▓│ │ Snooze 🔕 │ │ | -| │ └──────────────────────────────────┘ └──────────────────┘ │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ 🟡 DUE SOON │ | -| │ │ | -| │ 📶 Internet Service 3 days left │ | -| │ Comcast Xfinity ⚡ Auto-pay │ | -| │ │ | -| │ $65.00 Due: Jan 3 │ | -| │ │ | -| │ [Edit Auto-pay] [Pay Early] │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ 💧 Water Utility 7 days left │ | -| │ City Water Services │ | -| │ │ | -| │ $42.00 Due: Jan 7 │ | -| │ │ | -| │ [Set Reminder] [Pay Now] │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ 🏠 Rent Payment 15 days │ | -| │ Apartment Complex ⚡ Auto-pay │ | -| │ │ | -| │ $1,200.00 Due: Jan 15 │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ Powered by Mifos • Last synced 2 min ago │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -| [🏠 Home] [📊 *Accounts*] [💸 FAB] [👤 Profile] | -+-------------------------------------------------------------------+ -``` - ---- - -## Screen 2: Goals Tab View - -``` -+-------------------------------------------------------------------+ -| 9:41 [🔍] [⚡] [🔔] | -+-------------------------------------------------------------------+ -| | -| My Accounts [Filter ≡] | -| | -| +---------------------------------------------------------------+ | -| | [All] [Savings] [Loans] [Shares] [Goals] | | -| | ○ ○ ○ ○ ● | | -| | SELECTED | | -| +---------------------------------------------------------------+ | -| | -+===================================================================+ -| | -| ╔═══════════════════════════════════════════════════════════════╗ | -| ║▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓║ | -| ║▓▓ ▓▓║ | -| ║▓▓ 🎯 GOALS OVERVIEW ▓▓║ | -| ║▓▓ ▓▓║ | -| ║▓▓ ┌────────────────────────────────────────────────────┐ ▓▓║ | -| ║▓▓ │ │ ▓▓║ | -| ║▓▓ │ 4 2 1 $20,600 │ ▓▓║ | -| ║▓▓ │ Active Achieved Paused Total Goal │ ▓▓║ | -| ║▓▓ │ │ ▓▓║ | -| ║▓▓ └────────────────────────────────────────────────────┘ ▓▓║ | -| ║▓▓ ▓▓║ | -| ║▓▓ Overall Progress ▓▓║ | -| ║▓▓ ████████████████████████████████░░░░░░░░░░░░ 62% ▓▓║ | -| ║▓▓ $12,500 saved of $20,600 target ▓▓║ | -| ║▓▓ ▓▓║ | -| ╚═══════════════════════════════════════════════════════════════╝ | -| | -+-------------------------------------------------------------------+ -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ 🏆 ACHIEVEMENTS │ | -| │ │ | -| │ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │ | -| │ │ 🔥 │ │ 💎 │ │ 🎯 │ │ ⭐ │ │ 🔒 │ │ | -| │ │ 7day │ │ $5k │ │ Goal │ │ Super│ │ Lock │ │ | -| │ │streak│ │saved │ │Master│ │Saver │ │ ? │ │ | -| │ │ ✓ │ │ ✓ │ │ ✓ │ │ ◐ │ │ ○ │ │ | -| │ └──────┘ └──────┘ └──────┘ └──────┘ └──────┘ │ | -| │ EARNED EARNED EARNED 55% LOCKED │ | -| │ │ | -| │ [View All Badges] │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -| | -| ACTIVE GOALS [+ Create Goal] | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ 🛡️ Emergency Fund [>] │ | -| │ │ | -| │ ████████████████████████████████░░░░░░░░░░░░ 65% │ | -| │ $8,200 / $12,600 │ | -| │ │ | -| │ 🔥 7-day streak Est. complete: Mar 2025 │ | -| │ │ | -| │ ┌─────────────────────────────────────────────────────────┐ │ | -| │ │ Auto-save: $50/week on Fridays │ │ | -| │ │ [Edit] [Pause ⏸️] │ │ | -| │ └─────────────────────────────────────────────────────────┘ │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ 🏝️ Bali Trip 2025 [>] │ | -| │ │ | -| │ ██████████████████░░░░░░░░░░░░░░░░░░░░░░░░ 45% │ | -| │ $3,500 / $8,000 │ | -| │ │ | -| │ ⚡ Boost available! Est. complete: Aug 2025 │ | -| │ │ | -| │ ┌─────────────────────────────────────────────────────────┐ │ | -| │ │ Add $200 now to reach goal 2 weeks earlier! │ │ | -| │ │ [Boost Now 🚀] [Maybe Later] │ │ | -| │ └─────────────────────────────────────────────────────────┘ │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -| | -| ACHIEVED GOALS 🎉 | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ ✅ New Laptop Completed Dec 2024 │ | -| │ $1,500 saved │ | -| │ │ | -| │ ✅ Holiday Shopping Completed Nov 2024 │ | -| │ $800 saved │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -| [🏠 Home] [📊 *Accounts*] [💸 FAB] [👤 Profile] | -+-------------------------------------------------------------------+ -``` - ---- - -## Screen 3: Spending Category Drill-Down - -``` -+-------------------------------------------------------------------+ -| ← Back Share 📤 | -+-------------------------------------------------------------------+ -| | -| 🍔 Food & Dining | -| This Week ▼ | -| | -| ╔═══════════════════════════════════════════════════════════════╗ | -| ║ ║ | -| ║ $320.45 ║ | -| ║ spent this week ║ | -| ║ ║ | -| ║ ┌─────────────────────────────────────────────────┐ ║ | -| ║ │ ▲ │ ║ | -| ║ │ ┌──────┴──────┐ │ ║ | -| ║ │ ┌─────┘ └──────┐ │ ║ | -| ║ │ ────┘ └──── │ ║ | -| ║ │ │ ║ | -| ║ │ Mon Tue Wed Thu Fri Sat Sun │ ║ | -| ║ └─────────────────────────────────────────────────┘ ║ | -| ║ ║ | -| ║ ↑ 15% vs last week Budget: $400/week ║ | -| ║ ████████████████████████████████░░░░░░░░ 80% of budget ║ | -| ║ ║ | -| ╚═══════════════════════════════════════════════════════════════╝ | -| | -+-------------------------------------------------------------------+ -| | -| SUB-CATEGORIES | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ 🍕 Restaurants $185.00 │ | -| │ ███████████████████████████░░░░░░░░░░░░░ 58% │ | -| │ │ | -| │ ☕ Coffee & Cafes $68.50 │ | -| │ ██████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ 21% │ | -| │ │ | -| │ 🛒 Groceries $45.95 │ | -| │ ██████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ 14% │ | -| │ │ | -| │ 🍔 Fast Food $21.00 │ | -| │ ███░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ 7% │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -| | -| RECENT TRANSACTIONS See All > | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ Today │ | -| │ │ | -| │ 🍕 Pizza Palace -$24.50 │ | -| │ Restaurants • 2:30 PM Visa ****4521 │ | -| │ │ | -| │ ☕ Starbucks -$6.75 │ | -| │ Coffee & Cafes • 9:15 AM Visa ****4521 │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ Yesterday │ | -| │ │ | -| │ 🛒 Whole Foods -$45.95 │ | -| │ Groceries • 6:45 PM Visa ****4521 │ | -| │ │ | -| │ 🍔 McDonald's -$12.50 │ | -| │ Fast Food • 12:30 PM Visa ****4521 │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ 💡 AI Insight │ | -| │ │ | -| │ "You spent 58% on restaurants this week. │ | -| │ Cooking at home 2 more days could save ~$50" │ | -| │ │ | -| │ [Set Cooking Goal] [Dismiss] │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -``` - ---- - -## Screen 4: Loading State - -``` -+-------------------------------------------------------------------+ -| 9:41 [🔍] [⚡] [🔔] | -+-------------------------------------------------------------------+ -| | -| My Accounts [Filter ≡] | -| | -| +---------------------------------------------------------------+ | -| | [═══] [════════] [═════] [══════] | | -| | SHIMMER FILTER CHIPS | | -| +---------------------------------------------------------------+ | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ | -| │░░ ░░│ | -| │░░ ═══════════════════════════════ ░░│ | -| │░░ ░░│ | -| │░░ ═══════════════ ░░│ | -| │░░ ░░│ | -| │░░ ┌─────────────────┐ ┌─────────────────┐ ░░│ | -| │░░ │ ═══════════════ │ │ ═══════════════ │ ░░│ | -| │░░ │ ═════════ │ │ ═════════ │ ░░│ | -| │░░ └─────────────────┘ └─────────────────┘ ░░│ | -| │░░ ░░│ | -| │░░ ═══════════════════════════════════════════════════════ ░░│ | -| │░░ ░░│ | -| │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ | -| └───────────────────────────────────────────────────────────────┘ | -| NET WORTH CARD SHIMMER (Gradient Animation) | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ═══════════════════════════════ │ | -| │ │ | -| │ ┌──┐ ┌──┐ ┌──┐ ┌──┐ ┌──┐ ┌──┐ ┌──┐ │ | -| │ │░░│ │░░│ │░░│ │░░│ │░░│ │░░│ │░░│ │ | -| │ └──┘ └──┘ └──┘ └──┘ └──┘ └──┘ └──┘ │ | -| │ │ | -| │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ | -| │ │ ═══════════ │ │ ═══════════ │ │ ═══════════ │ │ | -| │ │ ═══════ │ │ ═══════ │ │ ═══════ │ │ | -| │ └─────────────┘ └─────────────┘ └─────────────┘ │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| ANALYTICS SHIMMER | -| | -| ┌─────────────────────────────────┐ ┌─────────────────────────────┐ -| │ ┌──────┐ ═══════════════════ │ │ ┌──────┐ ═══════════════ │ -| │ │ ░░░░ │ ══════════════ │ │ │ ░░░░ │ ══════════════ │ -| │ └──────┘ │ │ └──────┘ │ -| │ ═══════════════════ │ │ ════════════════ │ -| │ │ │ │ -| │ ═══════════════════════════ │ │ ═══════════════════════ │ -| │ │ │ │ -| └─────────────────────────────────┘ └─────────────────────────────┘ -| ACCOUNT CARD SHIMMERS | -| | -+-------------------------------------------------------------------+ -| [🏠 Home] [📊 *Accounts*] [💸 FAB] [👤 Profile] | -+-------------------------------------------------------------------+ -``` - -**Shimmer Animation Details:** -- Wave animation moving left-to-right -- Duration: 1200ms per cycle -- Gradient: #E1E4E8 → #F8F9FA → #E1E4E8 -- Cards have rounded corners (16dp) -- Staggered animation start for visual interest - ---- - -## Screen 5: Empty State - -``` -+-------------------------------------------------------------------+ -| 9:41 [🔍] [⚡] [🔔] | -+-------------------------------------------------------------------+ -| | -| My Accounts [Filter ≡] | -| | -| +---------------------------------------------------------------+ | -| | [All] [Savings] [Loans] [Shares] [Goals] | | -| | ● ○ ○ ○ ○ | | -| +---------------------------------------------------------------+ | -| | -| | -| | -| | -| ┌───────────────┐ | -| │ │ | -| │ ┌───────┐ │ | -| │ │ 💼 │ │ | -| │ │ │ │ | -| │ └───────┘ │ | -| │ │ | -| │ ~~~~~~~~ │ | -| │ ~~~~~~~~ │ | -| └───────────────┘ | -| Floating Animation | -| | -| | -| Start Your Financial Journey | -| | -| Open your first account and take control | -| of your finances with Mifos Mobile | -| | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ SUGGESTED FOR YOU │ | -| │ │ | -| │ ┌─────────────────────────────────────────────────────────┐ │ | -| │ │ 🏦 Open Savings Account │ │ | -| │ │ Start saving with 4.5% APY │ │ | -| │ │ Min. deposit: $0 • No monthly fees │ │ | -| │ │ [Open Now →] │ │ | -| │ └─────────────────────────────────────────────────────────┘ │ | -| │ │ | -| │ ┌─────────────────────────────────────────────────────────┐ │ | -| │ │ 📊 Join Investment Club │ │ | -| │ │ Community shares with 3% dividends │ │ | -| │ │ Min. shares: 1 @ $50 │ │ | -| │ │ [Learn More →] │ │ | -| │ └─────────────────────────────────────────────────────────┘ │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| | -| ┌─────────────────────────────────────────┐ | -| │ Explore All Account Types → │ | -| └─────────────────────────────────────────┘ | -| TEXT LINK | -| | -+-------------------------------------------------------------------+ -| [🏠 Home] [📊 *Accounts*] [💸 FAB] [👤 Profile] | -+-------------------------------------------------------------------+ -``` - ---- - -## Screen 6: Error State - -``` -+-------------------------------------------------------------------+ -| 9:41 [🔍] [⚡] [🔔] | -+-------------------------------------------------------------------+ -| | -| My Accounts [Filter ≡] | -| | -| +---------------------------------------------------------------+ | -| | [All] [Savings] [Loans] [Shares] [Goals] | | -| | ● ○ ○ ○ ○ | | -| +---------------------------------------------------------------+ | -| | -| | -| | -| | -| | -| ┌───────────────┐ | -| │ │ | -| │ ┌───────┐ │ | -| │ │ ☁️ │ │ | -| │ │ ✕ │ │ | -| │ └───────┘ │ | -| │ │ | -| └───────────────┘ | -| #FF4757 Tint | -| | -| | -| Something Went Wrong | -| | -| We couldn't load your accounts right now. | -| Please check your connection and try again. | -| | -| | -| ┌─────────────────────────────────────────┐ | -| │▓▓▓▓▓▓▓▓▓▓▓▓▓ Try Again ▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ | -| └─────────────────────────────────────────┘ | -| PRIMARY GRADIENT BUTTON | -| | -| ┌─────────────────────────────────────────┐ | -| │ 📶 Check Network Settings │ | -| └─────────────────────────────────────────┘ | -| TEXT LINK | -| | -| | -| | -+-------------------------------------------------------------------+ -| [🏠 Home] [📊 *Accounts*] [💸 FAB] [👤 Profile] | -+-------------------------------------------------------------------+ -``` - ---- - -## Screen 7: Offline State - -``` -+-------------------------------------------------------------------+ -| ⚠️ You're offline [Reconnect 🔄] | -+-------------------------------------------------------------------+ -| | -| My Accounts [Filter ≡] | -| Last updated 2 hours ago | -| | -| +---------------------------------------------------------------+ | -| | [All] [Savings] [Loans] [Shares] [Goals] | | -| | ● ○ ○ ○ ○ | | -| +---------------------------------------------------------------+ | -| | -| ╔═══════════════════════════════════════════════════════════════╗ | -| ║▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒║ | -| ║▒▒ ▒▒║ | -| ║▒▒ NET WORTH (Cached) [👁 Hide] ▒▒║ | -| ║▒▒ ▒▒║ | -| ║▒▒ $18,450.00 ▒▒║ | -| ║▒▒ ▒▒║ | -| ║▒▒ ⚠️ Data may be outdated ▒▒║ | -| ║▒▒ ▒▒║ | -| ╚═══════════════════════════════════════════════════════════════╝ | -| GRADIENT WITH DESATURATED OVERLAY (Offline indicator) | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ 📊 SPENDING ANALYTICS Unavailable │ | -| │ │ | -| │ ┌─────────────────────────────────────────────────────────┐ │ | -| │ │ │ │ | -| │ │ Data requires internet connection │ │ | -| │ │ │ │ | -| │ └─────────────────────────────────────────────────────────┘ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| ┌─────── SAVINGS ACCOUNTS (Cached) ────────────────────────────┐ | -| │ 3 accounts Total: $12,500.00 │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ ⚠️ Read-only mode • Cannot make transactions │ | -| │ │ | -| │ ┌──────┐ Primary Savings [Active] [>] │ | -| │ │ 🏦 │ ****4521 │ | -| │ └──────┘ │ | -| │ │ | -| │ $8,200.00 ↑ +$200 this month │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| [Other accounts shown in read-only mode...] | -| | -+-------------------------------------------------------------------+ -| [🏠 Home] [📊 *Accounts*] [💸 FAB] [👤 Profile] | -+-------------------------------------------------------------------+ -``` - ---- - -## Swipe Actions Component - -``` -+-------------------------------------------------------------------+ -| SWIPE ACTIONS | -+-------------------------------------------------------------------+ - -LEFT SWIPE (Quick Actions): -+-------------------------------------------------------------------+ -| ←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←←← | -| | -| ┌───────────────────────────────────────┐ ┌────────┐ ┌────────┐ | -| │ │ │ 💰 │ │ 📊 │ | -| │ Primary Savings │ │ Deposit│ │ Details│ | -| │ $8,200.00 │ │ Green │ │ Blue │ | -| │ │ │ │ │ │ | -| └───────────────────────────────────────┘ └────────┘ └────────┘ | -| REVEALED ON SWIPE | -+-------------------------------------------------------------------+ - -RIGHT SWIPE (Loan Quick Pay): -+-------------------------------------------------------------------+ -| →→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→ | -| | -| ┌────────┐ ┌────────┐ ┌───────────────────────────────────────┐ | -| │ 💳 │ │ 📅 │ │ │ | -| │Pay Now │ │Schedule│ │ Personal Loan │ | -| │ Purple │ │ Orange │ │ -$4,500.00 │ | -| │ │ │ │ │ │ | -| └────────┘ └────────┘ └───────────────────────────────────────┘ | -| REVEALED ON SWIPE | -+-------------------------------------------------------------------+ - -SWIPE THRESHOLDS: -- Partial reveal: 60dp swipe -- Full action trigger: 120dp+ swipe -- Auto-snap: Springs back or completes at 80dp threshold -- Haptic feedback at threshold crossing - -+-------------------------------------------------------------------+ -``` - ---- - -## Floating Action Menu - -``` -+-------------------------------------------------------------------+ -| FAB EXPANDED MENU | -+-------------------------------------------------------------------+ -| | -| ┌──────────────────────┐ | -| │ 🎯 Create Goal │ | -| └──────────────────────┘ | -| ┌──────────────────────┐ | -| │ 💳 Pay Bill │ | -| └──────────────────────┘ | -| ┌──────────────────────┐ | -| │ 💰 Add Money │ | -| └──────────────────────┘ | -| ┌──────────────────────┐ | -| │ 📤 Transfer │ | -| └──────────────────────┘ | -| | -| ┌────────────┐ | -| │ ✕ │ | -| │ CLOSE │ | -| └────────────┘ | -| | -+-------------------------------------------------------------------+ - -ANIMATION SEQUENCE: -1. FAB rotates 45° (+ becomes ✕) -2. Menu items stagger-animate from bottom (50ms delay each) -3. Each item: scale 0→1.05→1.0, opacity 0→1 -4. Background dims to 40% black -5. Tap outside or ✕ to close (reverse animation) - -+-------------------------------------------------------------------+ -``` - ---- - -## Component Specifications - -### 1. Financial Health Score Card - -``` -+-------------------------------------------------------------------+ -| FINANCIAL HEALTH SCORE | -+-------------------------------------------------------------------+ -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ 💎 FINANCIAL HEALTH SCORE │ | -| │ │ | -| │ Rating Labels: │ | -| │ • 0-20: "Needs Attention" - Red │ | -| │ • 21-40: "Fair" - Orange │ | -| │ • 41-60: "Good" - Yellow │ | -| │ • 61-80: "Very Good" - Teal │ | -| │ • 81-100: "Excellent" - Green │ | -| │ │ | -| │ Score Factors: │ | -| │ • Savings rate (30%) │ | -| │ • Bill payment timeliness (25%) │ | -| │ • Debt-to-income ratio (25%) │ | -| │ • Goal progress (20%) │ | -| │ │ | -| │ Score Display: │ | -| │ ┌────────────────────────────────────────────────────┐ │ | -| │ │ Circular progress ring │ │ | -| │ │ Stroke width: 8dp │ │ | -| │ │ Colors: Gradient based on score level │ │ | -| │ │ Center: Score number (36sp, Bold) │ │ | -| │ │ Animation: Count up + ring fill on appear │ │ | -| │ └────────────────────────────────────────────────────┘ │ | -| │ │ | -| │ Change Indicator: │ | -| │ • "+5 from last month" with up arrow (green) │ | -| │ • "-3 from last month" with down arrow (red) │ | -| │ • "No change" with dash (gray) │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -``` - -### 2. Spending Analytics Chart - -``` -+-------------------------------------------------------------------+ -| SPENDING ANALYTICS CHART | -+-------------------------------------------------------------------+ -| | -| Period Selector (Dropdown): | -| • This Week (default) | -| • Last Week | -| • This Month | -| • Last 3 Months | -| • Custom Range | -| | -| Bar Chart Specifications: | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ Bar width: 24dp │ | -| │ Bar corner radius: 4dp (top only) │ | -| │ Bar color: Primary gradient │ | -| │ Bar spacing: 12dp │ | -| │ Today indicator: Dotted outline │ | -| │ Max height: 120dp │ | -| │ Animation: Bars grow from bottom (staggered 50ms) │ | -| │ │ | -| │ Touch interaction: │ | -| │ • Tap bar to show tooltip with exact amount │ | -| │ • Tooltip appears above bar with pointer │ | -| │ • Auto-dismiss after 3 seconds │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| Category Chips: | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ Layout: Horizontal scroll │ | -| │ Chip size: Auto-width, 44dp height │ | -| │ Icon: 20dp emoji │ | -| │ Amount: 14sp, SemiBold │ | -| │ Percentage: 12sp, Regular, Secondary color │ | -| │ Progress bar: 4dp height below text │ | -| │ Tap: Navigate to category drill-down │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -``` - -### 3. AI Insight Card - -``` -+-------------------------------------------------------------------+ -| AI INSIGHT CARD | -+-------------------------------------------------------------------+ -| | -| Card Types: | -| | -| 1. SAVINGS OPPORTUNITY | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ Icon: 💡 (Lightbulb) │ | -| │ Background: Gradient at 5% opacity │ | -| │ Border: 1dp, Primary at 20% │ | -| │ Actions: [Explore Options] [Dismiss] │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| 2. GOAL PROGRESS | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ Icon: 🎯 (Target) │ | -| │ Background: Success at 5% opacity │ | -| │ Border: 1dp, Success at 20% │ | -| │ Shows: Inline progress bar │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| 3. SPENDING ALERT | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ Icon: ⚠️ (Warning) │ | -| │ Background: Warning at 5% opacity │ | -| │ Border: 1dp, Warning at 20% │ | -| │ Actions: [Set Budget] [Ignore] │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| Animation: | -| • Cards slide in from right on appear | -| • Dismiss: Swipe right or fade out | -| • New insight: Gentle pulse animation on icon | -| | -+-------------------------------------------------------------------+ -``` - -### 4. Achievement Badge - -``` -+-------------------------------------------------------------------+ -| ACHIEVEMENT BADGE | -+-------------------------------------------------------------------+ -| | -| States: | -| | -| EARNED PROGRESS | -| ┌──────────────────┐ ┌──────────────────┐ | -| │ ┌────┐ │ │ ┌────┐ │ | -| │ │ 🔥 │ │ │ │ ⭐ │ │ | -| │ └────┘ │ │ └────┘ │ | -| │ 7-day streak │ │ Super Saver │ | -| │ ✓ │ │ 55% │ | -| └──────────────────┘ └──────────────────┘ | -| Full color Grayscale + progress | -| Golden glow effect Circular progress ring | -| | -| LOCKED | -| ┌──────────────────┐ | -| │ ┌────┐ │ | -| │ │ 🔒 │ │ | -| │ └────┘ │ | -| │ ??? │ | -| │ ○ │ | -| └──────────────────┘ | -| Fully grayscale | -| Tap reveals unlock requirements | -| | -| Dimensions: | -| • Badge size: 64dp × 80dp | -| • Icon container: 48dp × 48dp | -| • Icon size: 28dp | -| • Label: 10sp, Medium | -| | -+-------------------------------------------------------------------+ -``` - -### 5. Account Card (Enhanced) - -``` -+-------------------------------------------------------------------+ -| ENHANCED ACCOUNT CARD | -+-------------------------------------------------------------------+ -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌──────┐ │ | -| │ │ Icon │ Account Name [Status] [>] │ | -| │ │ 44dp │ Account Number │ | -| │ └──────┘ │ | -| │ Circular gradient │ | -| │ background │ | -| │ │ | -| │ $X,XXX.XX ↑ +$XXX this month │ | -| │ [Amount: 24sp, Bold] [Change: 14sp, Green] │ | -| │ │ | -| │ ┌─────────────────────────────────────────────────────────┐ │ | -| │ │ Goal Section (Optional) │ │ | -| │ │ [Emoji] Goal Name │ │ | -| │ │ [Progress Bar] XX% │ │ | -| │ │ $Current / $Target Est: Month Year │ │ | -| │ └─────────────────────────────────────────────────────────┘ │ | -| │ │ | -| │ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ | -| │ │ 🔥 7day │ │ 🏆 3 │ │ ⚡Auto │ │ | -| │ │ streak │ │ goals │ │ $50/wk │ │ | -| │ └─────────┘ └─────────┘ └─────────┘ │ | -| │ Gamification stats (Optional) │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| Card Dimensions: | -| • Corner radius: 20dp | -| • Padding: 20dp | -| • Elevation: 2dp (light), 0dp (dark) | -| • Border: None (light), 1dp #30363D (dark) | -| • Gap between cards: 16dp | -| | -| Icon Specifications: | -| • Container: 48dp × 48dp, circular | -| • Background: Category gradient at 15% | -| • Icon/Emoji: 24dp | -| | -+-------------------------------------------------------------------+ -``` - ---- - -## Animations & Micro-interactions - -### Page Load Sequence - -``` -+-------------------------------------------------------------------+ -| PAGE LOAD ANIMATION SEQUENCE | -+-------------------------------------------------------------------+ -| | -| T+0ms: Shimmer placeholders visible | -| T+200ms: Data received, shimmer starts fading | -| T+300ms: Net Worth card fades in + slides up 20dp | -| T+350ms: Financial Health Score counter animates (0→85) | -| T+400ms: Analytics chart bars grow from bottom (staggered) | -| T+500ms: Category chips slide in from right | -| T+600ms: AI insights cards slide in | -| T+700ms: Account cards appear (staggered 50ms each) | -| T+800ms: Goals progress bars fill | -| T+900ms: Bill cards fade in | -| T+1000ms: All animations complete | -| | -| Easing: DecelerateInterpolator for all | -| | -+-------------------------------------------------------------------+ -``` - -### Pull-to-Refresh - -``` -+-------------------------------------------------------------------+ -| PULL-TO-REFRESH | -+-------------------------------------------------------------------+ -| | -| Stage 1 - Pulling (0-64dp): | -| • Circular progress indicator appears | -| • Rotates as user pulls (progress-based) | -| • Opacity: 0% → 100% | -| • Content slides down with damped physics | -| | -| Stage 2 - Threshold (64dp+): | -| • Light haptic feedback | -| • Indicator snaps to full visibility | -| • Pull-to-release text appears | -| | -| Stage 3 - Refreshing: | -| • Continuous rotation animation | -| • Gradient shimmer effect on indicator | -| • "Updating your accounts..." text | -| | -| Stage 4 - Complete (300ms): | -| • Success haptic | -| • Checkmark replaces spinner (morph animation) | -| • Content slides up with bounce | -| • "Last updated just now" timestamp updates | -| | -+-------------------------------------------------------------------+ -``` - -### Filter Tab Transition - -``` -+-------------------------------------------------------------------+ -| FILTER TAB TRANSITION | -+-------------------------------------------------------------------+ -| | -| Selection Animation (200ms): | -| 1. Previous tab: Indicator slides out | -| 2. New tab: Indicator slides in with spring bounce | -| 3. Text color: Cross-fade primary ↔ secondary | -| | -| Content Transition: | -| 1. Current content: Fade out + slide left (150ms) | -| 2. New content: Fade in + slide from right (200ms) | -| 3. Summary card updates with counter animation | -| | -| Tab Indicator: | -| • Width: Matches text width + 16dp padding | -| • Height: 3dp | -| • Corner radius: 1.5dp | -| • Color: Primary gradient | -| | -+-------------------------------------------------------------------+ -``` - -### Card Interactions - -``` -+-------------------------------------------------------------------+ -| CARD INTERACTION STATES | -+-------------------------------------------------------------------+ -| | -| Idle: | -| • Normal appearance | -| • Shadow: 2dp blur, 1dp y-offset | -| | -| Pressed (100ms): | -| • Scale: 0.98 | -| • Shadow: 1dp blur, 0.5dp y-offset | -| • Background: 2% darker | -| • Ripple effect from touch point | -| | -| Released (150ms, spring): | -| • Scale springs back to 1.0 | -| • Overshoot to 1.01 then settle | -| • Shadow returns to normal | -| | -| Swipe (gesture): | -| • Card follows finger with resistance | -| • Action buttons reveal with scale animation | -| • Snap threshold: 80dp | -| • Haptic at threshold | -| | -+-------------------------------------------------------------------+ -``` - ---- - -## Accessibility - -### Screen Reader Annotations - -``` -+-------------------------------------------------------------------+ -| ACCESSIBILITY LABELS | -+-------------------------------------------------------------------+ -| | -| Net Worth Card: | -| contentDescription: "Net Worth: $18,450.00. Gained $1,250 this | -| month. Expenses $380. Financial health score 85 out of 100, | -| rated Excellent, up 5 points from last month. Double tap to | -| toggle balance visibility." | -| | -| Spending Analytics: | -| contentDescription: "Spending analytics for this week. | -| Total spent: $1,240. 12% less than last week. | -| Top category: Shopping at $450." | -| | -| Category Chip: | -| contentDescription: "Food category. Spent $320. 26% of total. | -| Double tap to see food transactions." | -| | -| AI Insight: | -| contentDescription: "AI suggestion: You could save $85 per | -| month by switching to a cheaper internet plan. Actions | -| available: Explore options, or dismiss this suggestion." | -| | -| Achievement Badge: | -| contentDescription: "Achievement earned: 7-day savings streak. | -| You've saved money for 7 consecutive days." | -| | -| Locked Badge: | -| contentDescription: "Locked achievement. Double tap to see | -| requirements to unlock." | -| | -| Account Card: | -| contentDescription: "Primary Savings account ending in 4521. | -| Status: Active. Balance: $8,200.00. Gained $200 this month. | -| Goal: Emergency Fund, 65% complete, $8,200 of $12,600. | -| Swipe left for quick actions. Double tap for account details." | -| | -+-------------------------------------------------------------------+ -``` - -### Focus Order - -``` -+-------------------------------------------------------------------+ -| FOCUS NAVIGATION ORDER | -+-------------------------------------------------------------------+ -| | -| 1. Search icon | -| 2. Quick actions icon | -| 3. Notifications icon | -| 4. Filter toggle | -| 5. Tab chips (All, Savings, Loans, Shares, Goals) | -| 6. Net Worth Card | -| 6a. Eye toggle (balance visibility) | -| 7. Financial Health Score (if present) | -| 8. Spending Analytics section | -| 8a. Period selector dropdown | -| 8b. Category chips (scrollable) | -| 9. AI Insights section header | -| 10. AI Insight cards (each with actions) | -| 11. Section headers (with counts and totals) | -| 12. Account cards (in display order) | -| 12a. Card content | -| 12b. Goal section (if present) | -| 12c. Gamification stats (if present) | -| 13. Bill reminder section | -| 14. Bill cards with actions | -| 15. Footer | -| 16. Bottom navigation tabs | -| | -| Focus indicator: 2dp solid #667EEA, 4dp offset, matching shape | -| | -+-------------------------------------------------------------------+ -``` - -### Touch Targets - -``` -+-------------------------------------------------------------------+ -| MINIMUM TOUCH TARGETS | -+-------------------------------------------------------------------+ -| | -| All interactive elements: Minimum 48dp × 48dp | -| | -| Filter Chips: | -| • Visual height: 36dp | -| • Touch area: 48dp height (extended hitbox) | -| | -| Category Chips: | -| • Visual size: 44dp height | -| • Touch area: Full chip is tappable | -| | -| Action Buttons: | -| • Minimum size: 44dp × 44dp | -| • Touch area: 48dp × 48dp minimum | -| | -| Swipe Actions: | -| • Action button size: 64dp × full card height | -| • Clear visual separation between actions | -| | -| Achievement Badges: | -| • Badge size: 64dp × 80dp | -| • Entire badge is tappable | -| | -+-------------------------------------------------------------------+ -``` - ---- - -## Dark Mode - -### Color Transformations - -``` -+-------------------------------------------------------------------+ -| DARK MODE COLOR MAPPING | -+-------------------------------------------------------------------+ -| | -| Backgrounds: | -| • Screen: #F8F9FA → #0D1117 | -| • Card Surface: #FFFFFF → #161B22 | -| • Elevated: #FFFFFF → #21262D | -| | -| Text: | -| • Primary: #1F2937 → #F0F6FC | -| • Secondary: #6B7280 → #8B949E | -| • Tertiary: #9CA3AF → #6E7681 | -| | -| Borders: | -| • Standard: #E1E4E8 → #30363D | -| • Subtle: #F3F4F6 → #21262D | -| | -| Preserved Colors (same in both modes): | -| • Primary Gradient: #667EEA → #764BA2 | -| • Success: #00D09C | -| • Error: #FF4757 | -| • Warning: #FFB800 | -| | -| Adjusted for Dark: | -| • Gradient cards: 85% opacity over dark surface | -| • Icon backgrounds: 20% opacity (from 15%) | -| • Chart bars: Slightly increased luminance | -| • Card shadows: Removed (invisible on dark) | -| • Card borders: Added 1dp #30363D | -| | -+-------------------------------------------------------------------+ -``` - -### Dark Mode Mockup - -``` -+-------------------------------------------------------------------+ -| 9:41 [🔍] [⚡] [🔔] | -+-------------------------------------------------------------------+ -| [BACKGROUND: #0D1117] | -| | -| My Accounts [Filter ≡] | -| [TEXT: #F0F6FC] | -| | -| +---------------------------------------------------------------+ | -| | [SURFACE: #161B22, BORDER: #30363D] | | -| | [All] [Savings] [Loans] [Shares] [Goals] | | -| | ● ○ ○ ○ ○ | | -| +---------------------------------------------------------------+ | -| | -| ╔═══════════════════════════════════════════════════════════════╗ | -| ║ [GRADIENT 85% opacity over #161B22] ║ | -| ║ ║ | -| ║ NET WORTH [👁 Hide] ║ | -| ║ [TEXT: #FFFFFF] ║ | -| ║ ║ | -| ║ $18,450.00 ║ | -| ║ [TEXT: #FFFFFF, 36sp, ExtraBold] ║ | -| ║ ║ | -| ╚═══════════════════════════════════════════════════════════════╝ | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ [CARD: #161B22, BORDER: 1dp #30363D, NO SHADOW] │ | -| │ │ | -| │ 📊 SPENDING ANALYTICS This Week ▼ │ | -| │ [TEXT: #F0F6FC] │ | -| │ │ | -| │ [BARS: Gradient with increased luminance] │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ [CARD: #161B22] │ | -| │ │ | -| │ ┌──────┐ Primary Savings [Active] [>] │ | -| │ │ 🏦 │ ****4521 │ | -| │ │ 20% │ [ICON BG: 20% opacity gradient] │ | -| │ └──────┘ │ | -| │ │ | -| │ $8,200.00 ↑ +$200 this month │ | -| │ [#F0F6FC] [#00D09C] │ | -| │ │ | -| │ [PROGRESS: Track #30363D, Fill Gradient] │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -| [SURFACE: #161B22] | -| [🏠 Home] [📊 *Accounts*] [💸 FAB] [👤 Profile] | -+-------------------------------------------------------------------+ -``` - ---- - -## Responsive Layout (Tablet) - -``` -+-------------------------------------------------------------------------+ -| 9:41 [🔍] [⚡] [🔔] | -+-------------------------------------------------------------------------+ -| | -| My Accounts [Filter ≡] | -| | -| +---------------------------------------------------------------------+ | -| | [All] [Savings] [Loans] [Shares] [Goals] | | -| +---------------------------------------------------------------------+ | -| | -| +--------------------------------+ +----------------------------------+ | -| | NET WORTH | | FINANCIAL HEALTH | | -| | $18,450.00 | | 85 | | -| | +$1,250 | -$380 | | EXCELLENT | | -| +--------------------------------+ +----------------------------------+ | -| | -| +---------------------------------------------------------------------+ | -| | 📊 SPENDING ANALYTICS | | -| | | | -| | ┌──┐ ┌──┐ ┌──┐ ┌──┐ ┌──┐ ┌──┐ ┌──┐ │ 🍔 $320 │ 🚗 $180 | | -| | │▓▓│ │▓▓│ │▓▓│ │▓▓│ │▓▓│ │▓▓│ │░░│ │ 🛒 $450 │ 💡 $290 | | -| | Mon Tue Wed Thu Fri Sat Sun │ | | -| +---------------------------------------------------------------------+ | -| | -| +--------------------------------+ +----------------------------------+ | -| | 🤖 AI INSIGHTS | | 🏆 ACHIEVEMENTS | | -| | | | | | -| | 💡 Save $85/month... | | 🔥 💎 🎯 ⭐ 🔒 | | -| | 🎯 On track to save... | | | | -| +--------------------------------+ +----------------------------------+ | -| | -| +--------------------------------+ +----------------------------------+ | -| | SAVINGS (3) $12,500.00 | | LOANS (2) -$6,200.00 | | -| +--------------------------------+ +----------------------------------+ | -| | Primary Savings $8,200 | | Personal Loan -$4,500 | | -| | 🔥 7 days 65% to goal | | Due: Jan 15 $350 | | -| +--------------------------------+ +----------------------------------+ | -| | Vacation Fund $3,500 | | Education Loan -$1,700 | | -| | 45% to goal | | Due: Jan 20 $150 | | -| +--------------------------------+ +----------------------------------+ | -| | Emergency Reserve $800 | | SHARES (1) $750.00 | | -| +--------------------------------+ +----------------------------------+ | -| | Community Shares $750 | | -| +--------------------------------+ | 15 shares @ $50 | | -| | UPCOMING BILLS | +----------------------------------+ | -| +--------------------------------+ | -| | ⚡ Electricity $85 OVERDUE| | -| | 📶 Internet $65 3 days | | -| +--------------------------------+ | -| | -+-------------------------------------------------------------------------+ -``` - ---- - -## Implementation Notes - -### Key Composables Required - -1. **AccountsScreen** - Main container with tab state -2. **FinancialHealthScoreCard** - Circular score with rating -3. **SpendingAnalyticsCard** - Bar chart + category chips -4. **CategoryDrillDownScreen** - Detailed category view -5. **AIInsightCard** - Dismissible insight with actions -6. **AchievementBadge** - Earned/progress/locked states -7. **GoalsOverviewCard** - Goals tab summary -8. **GoalCard** - Individual goal with progress -9. **EnhancedAccountCard** - With gamification stats -10. **SwipeableAccountCard** - Swipe actions wrapper -11. **BillReminderCard** - Urgency-based styling -12. **FloatingActionMenu** - Expandable FAB -13. **FilterChipRow** - Tab selection with indicator -14. **AccountsShimmer** - Loading skeleton -15. **AccountsEmptyState** - First-time user view -16. **AccountsErrorState** - Error with retry -17. **AccountsOfflineState** - Cached data view - -### Animation Specifications - -| Animation | Duration | Easing | Trigger | -|-----------|----------|--------|---------| -| Page load stagger | 50ms per item | Decelerate | On appear | -| Score counter | 800ms | Decelerate | On appear | -| Chart bar grow | 400ms | Decelerate | On appear | -| Tab switch | 200ms | Standard | Tab tap | -| Card press | 100ms | Linear | Touch down | -| Card release | 150ms | Spring | Touch up | -| Swipe reveal | Gesture | Physics | Drag | -| FAB expand | 300ms | Spring | FAB tap | -| Pull refresh | Variable | Physics | Drag | -| Insight dismiss | 200ms | Accelerate | Swipe/tap | -| Badge unlock | 500ms | Bounce | Achievement earned | - ---- - -## Changelog - -| Date | Version | Change | -|------|---------|--------| -| 2025-12-30 | 1.0 | Initial mockup creation | -| 2025-12-30 | 2.0 | Enhanced with 2025 fintech patterns: Financial Health Score, Spending Analytics, AI Insights, Gamification, Goals Tab, Swipe Actions, Category Drill-down | - ---- - -## Data Binding Reference - -> **For `/implement` command**: Maps UI components to API.md sections. -> **Source of Truth**: See `API.md` for complete endpoint details. - -### Screen → API.md Mapping - -| Screen Component | API.md Section | Key Fields | -|------------------|----------------|------------| -| Account Type Tabs | `1. Client Accounts Overview` | `savingsAccounts[]`, `loanAccounts[]`, `shareAccounts[]` | -| Savings Account Card | `1. Client Accounts Overview` | `accountNo`, `productName`, `accountBalance`, `status` | -| Loan Account Card | `1. Client Accounts Overview` | `accountNo`, `loanBalance`, `principal`, `amountPaid`, `inArrears` | -| Share Account Card | `1. Client Accounts Overview` | `accountNo`, `totalApprovedShares`, `totalPendingForApprovalShares` | -| Savings Detail | `2. Savings Account Details with Transactions` | Full account with transactions | -| Loan Detail | `3. Loan Account Details with Transactions` | Full loan with repayment schedule | -| Share Detail | `4. Share Account Details` | Full share account | -| Transaction Detail | `6. Savings Transaction Details` / `7. Loan Transaction Details` | Transaction specifics | - -### Client-Only Features - -| Feature | Storage | Notes | -|---------|---------|-------| -| Financial Health Score | Client-side | Calculated from account data | -| Spending Analytics | DataStore | Not in Fineract API | -| Account Nicknames | DataStore | Local customization | -| Progress Bar (Loan) | Client-side | `amountPaid / principal * 100` | - -### Actions → API.md Mapping - -| User Action | API.md Reference | Navigation | -|-------------|------------------|------------| -| Pull to Refresh | `1. Client Accounts Overview` | Reload list | -| Tap Savings Card | `2. Savings Account Details` | → Savings Detail | -| Tap Loan Card | `3. Loan Account Details` | → Loan Detail | -| Tap Share Card | `4. Share Account Details` | → Share Detail | - -### Error Handling - -See `API.md → Error Responses` for complete error codes. diff --git a/claude-product-cycle/design-spec-layer/features/accounts/SPEC.md b/claude-product-cycle/design-spec-layer/features/accounts/SPEC.md deleted file mode 100644 index 3749236b9..000000000 --- a/claude-product-cycle/design-spec-layer/features/accounts/SPEC.md +++ /dev/null @@ -1,543 +0,0 @@ -# Accounts - Feature Specification - -> **Purpose**: Unified account listing with type-specific filtering for savings, loans, and shares -> **User Value**: Browse and manage all financial accounts with powerful filtering capabilities -> **Last Updated**: 2025-12-29 -> **Status**: Production Design - ---- - -## 1. Overview - -### 1.1 Feature Summary -The Accounts feature provides a comprehensive view of user accounts organized by type (Savings, Loan, Share). Users can browse account lists, apply multi-criteria filters (by account type and status), view transactions history, and access detailed transaction information. The feature supports pull-to-refresh for real-time data updates and maintains filter state across sessions. - -### 1.2 User Stories -- As a user, I want to view all my savings accounts in one place -- As a user, I want to filter accounts by type (wallet, bank, group, NB) -- As a user, I want to filter accounts by status (active, pending, closed, matured, approved) -- As a user, I want to see transaction history for each account -- As a user, I want to filter transactions by type (credit/debit) and duration -- As a user, I want to view detailed information about a specific transaction -- As a user, I want to refresh account data with pull-to-refresh gesture - -### 1.3 Design Principles -- **Consistency**: Same filter pattern across all account types -- **Efficiency**: Quick access to filtered views with minimal taps -- **Clarity**: Clear distinction between account types and statuses -- **Responsiveness**: Real-time updates via pull-to-refresh - ---- - -## 2. Screen Layout - -### 2.1 Accounts List Screen - -``` -+-------------------------------------------------------------+ -| <- Savings Accounts ... | -+-------------------------------------------------------------+ -| | -| +-------------------------------------------------------+ | -| | [FILTER ICON] Filter | | -| +-------------------------------------------------------+ | -| | -| +-------------------------------------------------------+ | -| | Wallet Savings Account | | -| | SA-0001234567 | Active | | -| | Balance: $12,500.00 | | -| | Interest: 4.5% p.a. | | -| +-------------------------------------------------------+ | -| | -| +-------------------------------------------------------+ | -| | Bank Savings Account | | -| | SA-0001234568 | Active | | -| | Balance: $8,750.00 | | -| | Interest: 3.2% p.a. | | -| +-------------------------------------------------------+ | -| | -| +-------------------------------------------------------+ | -| | Group Savings Account | | -| | SA-0001234569 | Pending | | -| | Balance: $0.00 | | -| | Interest: 2.5% p.a. | | -| +-------------------------------------------------------+ | -| | -| +-------------------------------------------------------+ | -| | [Powered by Mifos] | | -| +-------------------------------------------------------+ | -+-------------------------------------------------------------+ -``` - -### 2.2 Filter Bottom Sheet - -``` -+-------------------------------------------------------------+ -| Filters | -+-------------------------------------------------------------+ -| | -| [Reset Filters] [Apply] | -| | -| --------------------------------------------------------- | -| | -| Account Type (2 selected) v | -| --------------------------------------------------------- | -| [ ] Wallet Account | -| [x] Bank Account | -| [x] Group Account | -| [ ] NB Account | -| | -| --------------------------------------------------------- | -| | -| Account Status (1 selected) v | -| --------------------------------------------------------- | -| [x] Active | -| [ ] Pending | -| [ ] Closed | -| [ ] Matured | -| [ ] Approved | -| | -+-------------------------------------------------------------+ -``` - -### 2.3 Transaction History Screen - -``` -+-------------------------------------------------------------+ -| <- Transaction History | -+-------------------------------------------------------------+ -| | -| [Filter] | -| | -| Today | -| +-------------------------------------------------------+ | -| | v Deposit + $4,500.00 | | -| | Dec 29, 2025 | | -| +-------------------------------------------------------+ | -| | ^ Withdrawal - $150.00 | | -| | Dec 29, 2025 | | -| +-------------------------------------------------------+ | -| | -| Yesterday | -| +-------------------------------------------------------+ | -| | v Interest Posting + $125.50 | | -| | Dec 28, 2025 | | -| +-------------------------------------------------------+ | -| | ^ Transfer Out - $500.00 | | -| | Dec 28, 2025 | | -| +-------------------------------------------------------+ | -| | -| +-------------------------------------------------------+ | -| | [Powered by Mifos] | | -| +-------------------------------------------------------+ | -+-------------------------------------------------------------+ -``` - -### 2.4 Transaction Details Screen - -``` -+-------------------------------------------------------------+ -| <- Transaction Details | -+-------------------------------------------------------------+ -| | -| +------------------+ | -| | v | | -| | (Credit Icon) | | -| +------------------+ | -| | -| $4,500.00 | -| Deposit | -| | -| +-------------------------------------------------------+ | -| | Transaction ID 12345 | | -| | ------------------------------------------------- | | -| | Date Dec 29, 2025 | | -| | ------------------------------------------------- | | -| | Status Success | | -| | ------------------------------------------------- | | -| | Account Ref SA-0001234567 | | -| | ------------------------------------------------- | | -| | Type Deposit | | -| | ------------------------------------------------- | | -| | External ID EXT-12345 | | -| | ------------------------------------------------- | | -| | | | -| | BREAKDOWN | | -| | ------------------------------------------------- | | -| | Principal $4,400.00 | | -| | ------------------------------------------------- | | -| | Interest $100.00 | | -| | ------------------------------------------------- | | -| | Fees $0.00 | | -| | ------------------------------------------------- | | -| | Penalties $0.00 | | -| | ------------------------------------------------- | | -| | | | -| | Balance $12,500.00 | | -| +-------------------------------------------------------+ | -| | -+-------------------------------------------------------------+ -``` - ---- - -## 3. Sections Table - -| Section | Description | Components | -|---------|-------------|------------| -| Top Bar | Navigation and screen title | Back button, title (Savings/Loan/Share Accounts) | -| Filter Action | Opens filter bottom sheet | Filter button with icon | -| Account List | Scrollable list of accounts | Account cards with balance, status, interest rate | -| Filter Bottom Sheet | Multi-criteria filter dialog | Type filters, status filters, reset/apply buttons | -| Transaction List | Grouped by date | Transaction items with type, amount, date | -| Transaction Filter | Transaction-specific filters | Type (Credit/Debit), Duration (1mo/3mo/6mo/1yr/2yr) | -| Transaction Details | Full transaction information | Header, details table, breakdown section | -| Powered Footer | Branding footer | Mifos branding card | - ---- - -## 4. User Interactions Table - -| Interaction | Action | Result | -|-------------|--------|--------| -| Tap Back Button | OnNavigateBack | Navigate to previous screen | -| Tap Filter Button | ToggleFilter | Open filter bottom sheet | -| Tap Account Card | OnAccountClicked | Navigate to account details | -| Toggle Checkbox | ToggleCheckbox | Update filter selection | -| Tap Reset Filters | ResetFilters | Clear all filter selections | -| Tap Apply Filters | GetFilterResults | Apply filters and close sheet | -| Pull to Refresh | Refresh | Reload account data from API | -| Tap Transaction Item | OnTransactionClick | Navigate to transaction details | -| Expand/Collapse Filter Section | ToggleTypeExpanded/ToggleStatusExpanded | Show/hide filter options | - ---- - -## 5. State Model - -### 5.1 AccountsState (from AccountsViewModel.kt) - -```kotlin -internal data class AccountsState( - val isRefreshing: Boolean = false, - val checkboxOptions: List = emptyList(), - val selectedFilters: List = emptyList(), - val accountType: AccountType = AccountType.SAVINGS, - val toggleFilterDialog: Boolean = false, - val accountTypeFiltersCount: Int? = 0, - val accountStatusFiltersCount: Int? = 0, - val refreshSignal: Long = Clock.System.now().epochSeconds, - val dialogState: DialogState? = null, - val uiState: ScreenUiState = ScreenUiState.Loading, - val isTypeExpanded: Boolean = true, - val isStatusExpanded: Boolean = true, -) { - sealed interface DialogState { - data class Error(val message: String) : DialogState - data object Filters : DialogState - } - - val isAnyFilterSelected = checkboxOptions.any { it.isChecked } -} -``` - -### 5.2 AccountTransactionState (from TransactionViewModel.kt) - -```kotlin -internal data class AccountTransactionState( - val clientId: Long, - val accountType: String, - val accountId: Long, - val isRefreshing: Boolean = false, - val data: List = emptyList(), - val filteredData: Map> = emptyMap(), - val dialogState: DialogState? = null, - val checkboxOptions: List = emptyList(), - val selectedFilters: List = emptyList(), - val toggleFilterDialog: Boolean = false, - val accountTypeFiltersCount: Int? = 0, - val accountDurationFiltersCount: Int? = 0, - val selectedRadioButton: StringResource? = null, - val isFilteredRecordsEmpty: Boolean = false, - val networkStatus: Boolean = false, - val uiState: ScreenUiState? = ScreenUiState.Loading, -) { - sealed interface DialogState { - data class Error(val message: String) : DialogState - data object Filters : DialogState - } - - val isAnyFilterSelected = checkboxOptions.any { it.isChecked } || selectedRadioButton != null -} -``` - -### 5.3 TransactionDetailsState (from TransactionDetailsViewModel.kt) - -```kotlin -data class TransactionDetailsState( - val transactionId: Long, - val accountId: Long, - val accountType: String, - val uiState: ScreenUiState = ScreenUiState.Loading, - val transaction: UiTransactionDetails? = null, -) -``` - -### 5.4 Actions - -```kotlin -// Accounts Actions -sealed interface AccountsAction { - data object ToggleFilter : AccountsAction - data object ToggleTypeExpanded : AccountsAction - data object ToggleStatusExpanded : AccountsAction - data object ResetFilters : AccountsAction - data object DismissDialog : AccountsAction - data object GetFilterResults : AccountsAction - data object OnNavigateBack : AccountsAction - data object Refresh : AccountsAction - data object RefreshCompleted : AccountsAction - data class OnAccountClicked(val accountId: Long, val accountType: String) : AccountsAction - data class SetCheckboxFilterList(val checkBoxList: List, val accountType: String) : AccountsAction - data class ToggleCheckbox(val label: StringResource, val type: FilterType) : AccountsAction -} - -// Transaction Actions -sealed interface AccountTransactionAction { - data object Refresh : AccountTransactionAction - data object DismissDialog : AccountTransactionAction - data object OnNavigateBackClick : AccountTransactionAction - data object ToggleFilter : AccountTransactionAction - data object ResetFilters : AccountTransactionAction - data object GetFilterResults : AccountTransactionAction - data class ReceiveNetworkResult(val isOnline: Boolean) : AccountTransactionAction - data class OnTransactionClick(val id: Long?) : AccountTransactionAction - data class ToggleCheckbox(val label: StringResource, val type: TransactionFilterType) : AccountTransactionAction - data class ToggleRadioButton(val label: StringResource) : AccountTransactionAction -} - -// Transaction Details Actions -sealed interface TransactionDetailsAction { - data object OnNavigateBack : TransactionDetailsAction - data object Retry : TransactionDetailsAction -} -``` - -### 5.5 Events - -```kotlin -// Accounts Events -sealed interface AccountsEvent { - data object NavigateBack : AccountsEvent - data class AccountClicked(val accountId: Long, val accountType: String) : AccountsEvent -} - -// Transaction Events -sealed interface AccountTransactionEvent { - data object OnNavigateBack : AccountTransactionEvent - data class NavigateToDetails(val id: String) : AccountTransactionEvent -} - -// Transaction Details Events -sealed interface TransactionDetailsEvent { - data object NavigateBack : TransactionDetailsEvent -} -``` - ---- - -## 6. Filter Options - -### 6.1 Savings Account Filters - -| Filter Type | Options | -|-------------|---------| -| Account Type | Wallet Account, Bank Account, Group Account, NB Account | -| Account Status | Active, Pending, Closed, Matured, Approved | - -### 6.2 Loan Account Filters - -| Filter Type | Options | -|-------------|---------| -| Account Type | Personal, Bronze | -| Account Status | Active, Approval Pending, Closed, Disburse, Overpaid, In Arrears, Withdrawn, Matured, Rejected | - -### 6.3 Share Account Filters - -| Filter Type | Options | -|-------------|---------| -| Account Type | Wallet Account, Bank Account | -| Account Status | Active, Approval Pending, Closed, Disburse, Overpaid, In Arrears, Withdrawn, Matured, Rejected | - -### 6.4 Transaction Filters - -| Filter Type | Options | -|-------------|---------| -| Transaction Type | Credit, Debit | -| Duration | Past Month, Past 3 Months, Past 6 Months, Past 1 Year, Past 2 Years | - ---- - -## 7. API Requirements Table - -| Endpoint | Method | Purpose | Priority | -|----------|--------|---------|----------| -| /self/clients/{clientId}/accounts | GET | Fetch all accounts | P0 | -| /self/savingsaccounts/{accountId} | GET | Fetch savings details with transactions | P0 | -| /self/loans/{loanId} | GET | Fetch loan details with transactions | P0 | -| /self/shareaccounts/{accountId} | GET | Fetch share account details | P0 | -| /self/clients/{clientId}/transactions | GET | Fetch recent transactions | P0 | -| /self/savingsaccounts/{accountId}/transactions/{transactionId} | GET | Fetch savings transaction details | P1 | -| /self/loans/{loanId}/transactions/{transactionId} | GET | Fetch loan transaction details | P1 | - ---- - -## 8. Edge Cases & Error Handling - -| Scenario | UI Behavior | Recovery | -|----------|-------------|----------| -| No internet | Show network error state | Retry button, auto-retry on reconnect | -| API timeout | Show error state with message | Pull-to-refresh or Retry button | -| No accounts | Show empty state | Display "No accounts found" message | -| No transactions | Show empty state | Display "No transactions found" | -| No filtered results | Show empty filtered state | Display "No matching transactions" | -| Invalid transaction ID | Show error state | Navigate back or retry | -| Auth expired | Navigate to login | Re-authenticate | -| Partial data load | Show available data | Silent background retry | - ---- - -## 9. Performance Requirements - -| Metric | Target | Implementation | -|--------|--------|----------------| -| First paint | < 500ms | Skeleton loading | -| Data load | < 2s | Parallel API calls | -| Filter apply | < 100ms | Client-side filtering | -| Scroll | 60fps | LazyColumn with keys | -| Pull-to-refresh | Responsive | Optimistic UI update | - ---- - -## 10. Navigation Routes - -```kotlin -// Account Navigation -@Serializable -data class AccountNavRoute(val accountType: String) - -// Transaction Navigation -@Serializable -data class AccountTransactionsNavRoute( - val accountId: Long, - val accountType: String, -) - -// Transaction Details Navigation -@Serializable -data class TransactionDetailsNavRoute( - val transactionId: String, - val accountType: String, - val accountId: Long, -) -``` - ---- - -## 11. Data Models - -### 11.1 CheckboxStatus - -```kotlin -data class CheckboxStatus( - val statusLabel: StringResource, - val isChecked: Boolean = false, - val type: FilterType = FilterType.ACCOUNT_STATUS, -) - -enum class FilterType { - ACCOUNT_TYPE, - ACCOUNT_STATUS, -} -``` - -### 11.2 TransactionCheckboxStatus - -```kotlin -data class TransactionCheckboxStatus( - val statusLabel: StringResource, - val isChecked: Boolean = false, - val type: TransactionFilterType = TransactionFilterType.TRANSACTION_TYPE, -) - -enum class TransactionFilterType { - TRANSACTION_TYPE, - DURATION, -} -``` - -### 11.3 UiTransaction - -```kotlin -data class UiTransaction( - val id: Long?, - val date: List, - val amount: Double?, - val type: TransactionType? = null, - val typeValue: String? = null, - val isCredit: Boolean?, - val currency: String, -) -``` - -### 11.4 UiTransactionDetails - -```kotlin -data class UiTransactionDetails( - val id: Long?, - val date: List, - val amount: Double?, - val status: String, - val typeValue: String? = null, - val isCredit: Boolean?, - val currency: String, - val accountNo: String? = null, - val principal: Double? = null, - val interest: Double? = null, - val fees: Double? = null, - val penalties: Double? = null, - val externalId: String? = null, - val outstandingBalance: Double? = null, -) -``` - ---- - -## 12. Credit/Debit Logic - -```kotlin -fun getTransactionCreditStatus(transactionType: TransactionType?): Boolean { - return transactionType?.run { - when { - deposit == true -> true - dividendPayout == true -> false - withdrawal == true -> false - interestPosting == true -> true - feeDeduction == true -> false - initiateTransfer == true -> false - approveTransfer == true -> false - withdrawTransfer == true -> false - rejectTransfer == true -> true - overdraftFee == true -> false - else -> true - } - } ?: false -} -``` - ---- - -## Changelog - -| Date | Change | -|------|--------| -| 2025-12-29 | Initial specification based on existing implementation | diff --git a/claude-product-cycle/design-spec-layer/features/accounts/STATUS.md b/claude-product-cycle/design-spec-layer/features/accounts/STATUS.md deleted file mode 100644 index 3ea6e69e4..000000000 --- a/claude-product-cycle/design-spec-layer/features/accounts/STATUS.md +++ /dev/null @@ -1,122 +0,0 @@ -# Accounts - Implementation Status - -> **Last Updated**: 2025-12-29 -> **Overall Status**: ✅ Done - ---- - -## Implementation Checklist - -- [x] SPEC.md created -- [x] API.md created -- [x] Network: Services exist (SavingAccountsListService, LoanAccountsListService, ShareAccountService) -- [x] Data: Repositories exist (SavingsAccountRepository, LoanRepository, ShareAccountRepository) -- [x] Feature: ViewModels + Screens -- [x] Navigation: Routes registered -- [x] DI: Modules registered -- [x] STATUS.md updated - ---- - -## Layer Status - -| Layer | Status | Files | -|-------|--------|-------| -| Network | ✅ | SavingAccountsListService.kt, LoanAccountsListService.kt, ShareAccountService.kt | -| Data | ✅ | SavingsAccountRepository.kt, LoanRepository.kt, ShareAccountRepository.kt | -| Feature | ✅ | AccountsViewModel.kt, AccountsScreen.kt, TransactionViewModel.kt, TransactionScreen.kt, TransactionDetailsViewModel.kt, TransactionDetailsScreen.kt | -| DI | ✅ | AccountsModule.kt | -| Navigation | ✅ | AccountNavigation.kt, AccountsTransactionNavigation.kt, TransactionDetailsNavigation.kt | - ---- - -## Files - -### Network Layer -- `core/network/services/SavingAccountsListService.kt` -- `core/network/services/LoanAccountsListService.kt` -- `core/network/services/ShareAccountService.kt` - -### Data Layer -- `core/data/repository/SavingsAccountRepository.kt` -- `core/data/repositoryImpl/SavingsAccountRepositoryImp.kt` -- `core/data/repository/LoanRepository.kt` -- `core/data/repositoryImpl/LoanRepositoryImp.kt` -- `core/data/repository/ShareAccountRepository.kt` -- `core/data/repositoryImpl/ShareAccountRepositoryImp.kt` - -### Feature Layer -- `feature/accounts/accounts/AccountsViewModel.kt` -- `feature/accounts/accounts/AccountsScreen.kt` -- `feature/accounts/accounts/AccountNavigation.kt` -- `feature/accounts/accountTransactions/TransactionViewModel.kt` (AccountsTransactionViewModel) -- `feature/accounts/accountTransactions/TransactionScreen.kt` -- `feature/accounts/accountTransactions/AccountsTransactionNavigation.kt` -- `feature/accounts/transactionDetail/TransactionDetailsViewModel.kt` -- `feature/accounts/transactionDetail/TransactionDetailsScreen.kt` -- `feature/accounts/transactionDetail/TransactionDetailsNavigation.kt` -- `feature/accounts/component/FilterSection.kt` -- `feature/accounts/model/CheckboxStatus.kt` -- `feature/accounts/model/TransactionCheckboxStatus.kt` -- `feature/accounts/model/FilterType.kt` -- `feature/accounts/model/TransactionFilterType.kt` -- `feature/accounts/utils/StatusUtils.kt` -- `feature/accounts/di/AccountsModule.kt` - ---- - -## Implementation Details - -### ViewModels - -#### AccountsViewModel -- **Purpose**: Manages the account screen state, handling filter operations, navigation, and refreshing logic -- **State**: AccountsState (filter options, dialog visibility, account type, refresh signals) -- **Actions**: ToggleFilter, ResetFilters, GetFilterResults, Refresh, ToggleCheckbox, DismissDialog, OnAccountClicked, OnNavigateBack -- **Events**: AccountClicked, NavigateBack - -#### AccountsTransactionViewModel (TransactionViewModel) -- **Purpose**: Manages account transactions screen state and transaction filtering -- **Repositories Used**: SavingsAccountRepository, LoanRepository, ShareAccountRepository, RecentTransactionRepository -- **State**: AccountTransactionState (transactions, filters, dialog state, network status) -- **Actions**: ToggleFilter, ResetFilters, GetFilterResults, Refresh, ToggleCheckbox, ToggleRadioButton, OnTransactionClick -- **Events**: OnNavigateBack, NavigateToDetails -- **Features**: Transaction type filtering (Credit/Debit), date range filtering, network monitoring - -#### TransactionDetailsViewModel -- **Purpose**: Manages transaction detail screen state and fetches transaction details -- **Repositories Used**: SavingsAccountRepository, LoanRepository -- **State**: TransactionDetailsState (transaction details, account info, UI state) -- **Actions**: OnNavigateBack, Retry -- **Events**: NavigateBack - -### Screens - -#### AccountsScreen -- **Purpose**: Displays list of accounts (Savings, Loan, Share) with filtering and pull-to-refresh -- **Features**: Account filtering by type and status, refresh signal handling -- **Dialog Support**: Filter dialog with checkbox and apply/reset buttons - -#### TransactionScreen -- **Purpose**: Displays transactions for a selected account with advanced filtering -- **Features**: Filter by transaction type (Credit/Debit) and date range (1 month to 2 years) -- **Dialog Support**: Filter dialog with checkboxes and radio buttons -- **Error Handling**: Network error and server error states - -#### TransactionDetailsScreen -- **Purpose**: Displays detailed information about a specific transaction -- **Features**: Shows transaction amount, date, type, balance, and breakdown (principal, interest, fees, penalties) - ---- - -## Gaps - -None identified. - ---- - -## Changelog - -| Date | Change | -|------|--------| -| 2025-12-29 | Initial status documentation | diff --git a/claude-product-cycle/design-spec-layer/features/accounts/mockups/PROMPTS_FIGMA.md b/claude-product-cycle/design-spec-layer/features/accounts/mockups/PROMPTS_FIGMA.md deleted file mode 100644 index 5a38c9dbd..000000000 --- a/claude-product-cycle/design-spec-layer/features/accounts/mockups/PROMPTS_FIGMA.md +++ /dev/null @@ -1,254 +0,0 @@ -# Accounts - Figma First Draft Prompts - -> **Tool**: Figma First Draft (Shift+I in Figma) -> **Style**: Premium Fintech, Financial Command Center -> **Format**: Natural language prompts optimized for Figma AI - ---- - -## How to Use - -1. Open Figma → Create new design file -2. Press `Shift + I` or click "Actions" → "First Draft" -3. Copy each prompt below -4. Generate → Iterate → Refine - ---- - -## Screen 1: Main Accounts View - -``` -Design a modern mobile accounts dashboard for "Mifos Mobile" fintech app that serves as a financial command center. - -At the top, show "My Accounts" as the title with search, quick actions, and notification icons on the right. Add a filter button. - -Create a horizontal tab bar with 5 tabs: All, Savings, Loans, Shares, and Goals. The "All" tab should be selected with a pill-shaped indicator below it. - -Design a stunning hero card with a purple gradient background displaying the user's net worth of $18,450.00 in large white text. Add an eye icon to toggle visibility. Show two stat chips below: "+$1,250 This Month" in green and "-$380 Expenses" in a softer color. Include a Financial Health Score section with a circular progress ring showing 85 out of 100 with "EXCELLENT" rating and "+5 from last month" indicator. - -Add a Spending Analytics section with a "This Week" dropdown. Show "$1,240 spent" prominently with "-12% vs last week" in green. Include a bar chart showing daily spending for Mon through Sun, with today's bar having a special dotted outline. Below the chart, add horizontal scrolling category chips: Food $320 (26%), Transport $180 (15%), Shopping $450 (36%), Bills $290 (23%) - each with a mini progress bar. - -Create an AI Insights section with cards that have a subtle gradient border. Show a lightbulb icon with suggestions like "You could save $85/month by switching to a cheaper internet plan" with "Explore Options" and "Dismiss" buttons. - -Design a Savings Accounts section showing 3 accounts with a total of $12,500. Add a "7-day streak!" badge with a fire emoji and "+$850 this month". Each account card should be white with rounded corners and swipeable. Show Primary Savings with a wallet icon, ****4521, $8,200.00 balance, and a goal progress bar at 65% showing "$8,200 / $12,600". Include gamification stats: fire emoji "7 days streak", trophy "3 goals", lightning "Auto-save ON $50/week". - -Add a Loan Accounts section showing outstanding total of $6,200 and "Debt-free in 18 months" projection. Show Personal Loan with -$4,500 in red, 60% progress bar, next payment $350 due Jan 15 with "Schedule Payment" and "Pay Now" buttons. - -Create an Upcoming Bills section with an overdue electricity bill showing a red urgency border, "$85.00", "OVERDUE - Was due Dec 28" with pulsing indicator, and "PAY NOW" and "Snooze" buttons. Show other upcoming bills with amber indicators. - -At the bottom, add navigation with Home, Accounts (selected), a floating action button for Transfer in the center that pops up above the nav bar, and Profile. - -Style it like Revolut or N26 - premium, data-rich, with purple as the primary accent color. -``` - ---- - -## Screen 2: Goals Tab View - -``` -Design a savings goals dashboard for a banking app when the Goals tab is selected. - -Keep the same header and tab bar, but now show Goals as the selected tab. - -Create a gradient hero card showing Goals Overview with key stats: 4 Active goals, 2 Achieved, 1 Paused, and $20,600 Total Goal amount. Show an overall progress bar at 62% with "$12,500 saved of $20,600 target". - -Add an Achievements section with a horizontal row of badges. Show earned badges (7-day streak with fire, $5K saved with diamond, Goal Master with target) in full color with a golden glow. Show a Super Saver badge at 55% progress in grayscale with a progress ring. Show locked badges with a lock icon and question marks. - -Create an Active Goals section with a "+ Create Goal" button. Show the Emergency Fund goal with a shield emoji, 65% progress ring, "$8,200 / $12,600", a "7-day streak" indicator with fire, and "Est. complete: Mar 2025". Include an auto-save info card showing "$50/week on Fridays" with Edit and Pause buttons. - -Show the Bali Trip 2025 goal with a palm tree emoji, 45% progress ring, "$3,500 / $8,000", and an "Boost available!" callout. Add a suggestion card: "Add $200 now to reach goal 2 weeks earlier!" with "Boost Now" and "Maybe Later" buttons. - -Add an Achieved Goals section with celebration emoji. Show completed goals like "New Laptop - $1,500 saved - Completed Dec 2024" with checkmarks. -``` - ---- - -## Screen 3: Spending Category Drill-Down - -``` -Design a category detail screen when the user taps on a spending category like Food & Dining. - -Show a back arrow, "Food & Dining" as the title with a food emoji, and a Share button. Add a "This Week" dropdown to change the time period. - -Create a hero section showing "$320.45 spent this week" prominently. Include a line chart showing the spending trend across the week. Add a comparison indicator showing "+15% vs last week" and a budget tracker showing "Budget: $400/week" with a progress bar at 80%. - -Design a Sub-Categories section breaking down the spending: Restaurants $185 (58%), Coffee & Cafes $68.50 (21%), Groceries $45.95 (14%), Fast Food $21.00 (7%). Each should have a progress bar showing its percentage. - -Add a Recent Transactions section grouped by date. For Today, show transactions like "Pizza Palace -$24.50, Restaurants, 2:30 PM, Visa ****4521" with appropriate category icons. For Yesterday, show "Whole Foods -$45.95" and "McDonald's -$12.50". - -Include an AI Insight card at the bottom with a lightbulb: "You spent 58% on restaurants this week. Cooking at home 2 more days could save ~$50" with "Set Cooking Goal" and "Dismiss" buttons. -``` - ---- - -## Screen 4: Loading State - -``` -Design a loading skeleton screen for the accounts dashboard. - -Keep the header visible with "My Accounts" but show shimmer placeholders for the filter tabs. - -Create a hero card skeleton with the gradient background shape but shimmer placeholders where the net worth balance and stat chips would be. Show a shimmer circle where the health score ring would appear. - -Show shimmer rectangles for the analytics section - bars for the chart and pill shapes for the category chips. - -Display account card skeletons with shimmer for the icon circle on the left, text lines in the middle, and balance on the right. - -The shimmer should have a subtle wave animation moving left to right. Use light gray gradients for the placeholder areas. Stagger the animation start times for visual interest. Make it feel premium and polished, not jarring. -``` - ---- - -## Screen 5: Empty State - -``` -Design an empty state for the accounts screen when a user has no accounts yet. - -Show the same header and tab bar with all tabs visible. - -In the center, display a friendly illustration of a briefcase or portfolio floating gently with a subtle up-down animation. - -Show "Start Your Financial Journey" as a bold headline centered below the illustration. Add descriptive text: "Open your first account and take control of your finances with Mifos Mobile." - -Create a "Suggested For You" section with two cards: -1. "Open Savings Account" with a bank icon, "Start saving with 4.5% APY", "Min. deposit: $0 • No monthly fees", and an "Open Now" button -2. "Join Investment Club" with a chart icon, "Community shares with 3% dividends", "Min. shares: 1 @ $50", and a "Learn More" button - -Add a text link at the bottom: "Explore All Account Types →" - -Make it feel encouraging and welcoming, like an opportunity rather than emptiness. -``` - ---- - -## Screen 6: Error State - -``` -Design an error state screen for when the accounts fail to load. - -Keep the header and tabs visible normally. - -In the center, show a cloud with an X icon illustration in a soft coral/red tint to indicate something went wrong without being alarming. - -Display "Something Went Wrong" as the main heading in bold text. - -Add explanatory text: "We couldn't load your accounts right now. Please check your connection and try again." - -Create a "Try Again" button with a purple gradient background. - -Below, add a "Check Network Settings" text link for users who need additional help. - -Keep it calm and reassuring - not panic-inducing. The user should feel confident the app will work once the issue is resolved. -``` - ---- - -## Screen 7: Offline Mode - -``` -Design an offline state for the accounts screen showing cached data. - -At the very top, add a slim warning banner in soft amber/yellow showing a no-wifi antenna icon and "You're offline" with a "Reconnect" button on the right. - -Show the main header with "My Accounts" and add "Last updated 2 hours ago" as a subtitle in gray text. - -Display the rest of the accounts content but at reduced opacity (about 70%) to indicate it's cached data. Add "(Cached)" labels to section headers. - -Show the Net Worth card with a desaturated overlay and a "Data may be outdated" warning message. - -For the Spending Analytics section, show an "Unavailable" badge and a placeholder message: "Data requires internet connection." - -Display the account cards normally but with a banner at the top: "Read-only mode • Cannot make transactions". Disable the swipe actions visually. - -The user should understand they can still see their data but it might not be current and they can't perform actions. -``` - ---- - -## Component Prompts - -### Net Worth Hero Card -``` -Design a financial net worth card for a premium banking app. - -Use a beautiful diagonal gradient from purple #667EEA to deeper purple #764BA2. Make it full width with generous rounded corners (24px). - -Show "NET WORTH" as a small white label with an eye icon to toggle balance visibility. - -Display the main balance "$18,450.00" in large white bold text, centered, about 36sp font size. - -Below, add two pill-shaped stat chips with semi-transparent white backgrounds: one showing an up arrow with "+$1,250 This Month" and another showing a down arrow with "-$380 Expenses". - -Include a Financial Health Score section with a circular progress ring showing 85 out of 100 with "EXCELLENT" rating below it and "+5 from last month" change indicator. - -Add a subtle shadow that uses the gradient colors at low opacity to create a glowing effect. -``` - -### Spending Analytics Chart -``` -Design a weekly spending analytics section for a banking dashboard. - -Create a bar chart with 7 bars representing Monday through Sunday. Each bar should be about 24px wide with the primary purple gradient color. Today's bar should have a special dotted outline to indicate the current day. - -The chart height should be about 120px. Show the day labels below each bar. - -Add a touch interaction where tapping a bar shows a tooltip with the exact spending amount for that day. - -Below the chart, add horizontally scrolling category chips. Each chip shows a category emoji (like a burger for Food), the amount ($320), and the percentage (26%). Include a mini progress bar within each chip. - -Animate the bars growing from the bottom when the section appears, with a staggered animation. -``` - -### AI Insight Card -``` -Design an AI-powered insight card for a fintech app. - -Create a card with a subtle gradient border (about 1px) that hints at the app's primary colors. Give the card a very light gradient background (5% opacity). - -On the left, show a lightbulb icon indicating it's an AI suggestion. - -In the middle, display the insight text: "You could save $85/month by switching to a cheaper internet plan." - -At the bottom or right, add two action buttons: "Explore Options" as a primary action and "Dismiss" as a secondary/outlined action. - -Make the card dismissible with a swipe-right gesture. Add a subtle animation when it appears, sliding in from the right. -``` - -### Account Card with Gamification -``` -Design an enhanced bank account card with gamification elements. - -Create a white card with soft shadows and 20px rounded corners. - -On the left, show a circular icon container with a light gradient background (15% opacity) containing a wallet or bank icon. - -In the middle section, display the account name "Primary Savings" in medium weight and the masked account number "****4521" in smaller gray text below. - -On the right, align the balance "$8,200.00" in a larger, bold style with a change indicator "+$200 this month" in green below it. - -Add a goal progress section showing an emoji (like a target), the goal name "Emergency Fund", a progress bar at 65%, and the amounts "$8,200 / $12,600". - -At the bottom, include a row of gamification stats: fire emoji with "7 days streak", trophy emoji with "3 goals reached", and lightning bolt with "Auto-save ON $50/week". - -Make the entire card swipeable to reveal quick action buttons. -``` - ---- - -## Tips for Figma First Draft - -1. **Iterate**: Generate once, then refine with follow-up prompts -2. **Colors**: Mention "purple accent #667EEA" for consistency -3. **Reference**: Say "like Revolut" or "N26-style" for context -4. **States**: Ask for "show loading, empty, and error states" -5. **Responsive**: Mention "393px width for mobile" for correct sizing - ---- - -## After Generation - -1. Review generated designs for consistency -2. Create a color style library -3. Build component variants -4. Link screens with prototype connections -5. Export and update `FIGMA_LINKS.md` diff --git a/claude-product-cycle/design-spec-layer/features/accounts/mockups/PROMPTS_STITCH.md b/claude-product-cycle/design-spec-layer/features/accounts/mockups/PROMPTS_STITCH.md deleted file mode 100644 index fabf9edee..000000000 --- a/claude-product-cycle/design-spec-layer/features/accounts/mockups/PROMPTS_STITCH.md +++ /dev/null @@ -1,354 +0,0 @@ -# Accounts - Google Stitch Prompts - -> **Tool**: [Google Stitch](https://stitch.withgoogle.com) -> **Style**: Material Design 3, Financial Command Center -> **Format**: Copy each prompt block directly into Stitch - ---- - -## Design System Reference - -``` -Primary Gradient: #667EEA → #764BA2 -Secondary Gradient: #11998E → #38EF7D -Success/Credit: #00D09C -Error/Debit: #FF4757 -Warning: #FFB800 -Text Primary: #1F2937 -Text Secondary: #6B7280 -Surface: #FFFFFF -Screen Size: 393 x 852 pixels (Android) -``` - ---- - -## Screen 1: Main Accounts View - -``` -Mobile accounts dashboard screen, Material Design 3, fintech app, 393x852px - -Top Bar: -- "My Accounts" title 24sp bold, #1F2937 -- Right side: search, quick actions, notification icons -- Filter button right aligned - -Tab Bar: -- 5 tabs: All (selected), Savings, Loans, Shares, Goals -- Selected indicator pill below active tab -- Horizontal scroll if needed - -Net Worth Hero Card: -- Full width, gradient #667EEA to #764BA2, 24dp radius -- "NET WORTH" label white 12sp + eye toggle -- "$18,450.00" balance 36sp white ExtraBold centered -- Two stat chips: "+$1,250 This Month" green, "-$380 Expenses" red -- Financial Health Score section: circular ring 85/100, "EXCELLENT" label -- "+5 from last month" change indicator - -Spending Analytics Section: -- "SPENDING ANALYTICS" header + "This Week" dropdown -- "$1,240 spent" amount, "-12% vs last week" indicator green -- Bar chart 120dp height, 7 bars for Mon-Sun -- Today bar has dotted outline indicator -- Category chips horizontal scroll: Food $320 26%, Transport $180 15%, Shopping $450 36%, Bills $290 23% - -AI Insights Section: -- "AI INSIGHTS" header + "See All" link -- Insight cards with gradient border 5% opacity -- Lightbulb icon, suggestion text, action buttons -- [Explore Options] [Dismiss] - -Savings Accounts Section: -- "SAVINGS ACCOUNTS" header with count, total -- "7-day streak" flame badge, "+$850 this month" -- Account cards white 20dp radius, swipeable -- Primary Savings: wallet icon gradient bg, ****4521, $8,200.00 -- Goal progress bar 65%, "$8,200 / $12,600" -- Gamification stats: fire streak, trophy goals, lightning auto-save - -Loan Accounts Section: -- "LOAN ACCOUNTS" header with count, outstanding total -- "Debt-free in 18 months" projection -- Personal Loan card: -$4,500.00 red, 60% progress -- Next payment $350 due Jan 15, [Schedule] [Pay Now] buttons - -Share Accounts Section: -- "SHARE ACCOUNTS" header with value -- "+$22.50 dividends this year" -- Community Shares: 15 shares @ $50, 3% APY -- [Buy More] [Sell Shares] buttons - -Upcoming Bills Section: -- "DUE THIS WEEK" header + "Manage" link -- Overdue card: red left border 4dp, "OVERDUE" badge pulsing -- Electricity $85, "Was due Dec 28", [PAY NOW] [Snooze] buttons -- Due soon cards: amber indicator, Internet $65, Water $42, Rent $1,200 - -Bottom Navigation: -- 64dp height, 4 tabs: Home, Accounts (selected), FAB Transfer, Profile -- FAB 56dp gradient, elevated -16dp above nav bar -``` - ---- - -## Screen 2: Goals Tab View - -``` -Mobile goals dashboard screen, Material Design 3, fintech app, 393x852px - -Tab Bar: -- Goals tab selected with indicator - -Goals Overview Hero: -- Gradient card #667EEA to #764BA2 -- "GOALS OVERVIEW" header -- Stats row: 4 Active, 2 Achieved, 1 Paused, $20,600 Total Goal -- Overall progress bar 62%, "$12,500 saved of $20,600 target" - -Achievements Section: -- "ACHIEVEMENTS" header + "View All Badges" link -- Badge row horizontal: fire 7day, diamond $5k, target Goal Master, star Super Saver, lock ??? -- States: EARNED (full color glow), 55% (grayscale + ring), LOCKED (grayscale) - -Active Goals List: -- "ACTIVE GOALS" header + "+ Create Goal" button -- Emergency Fund card: shield emoji, 65% progress ring -- "$8,200 / $12,600", fire "7-day streak", "Est: Mar 2025" -- Auto-save info: "$50/week on Fridays", [Edit] [Pause] buttons - -- Bali Trip card: palm emoji, 45% progress -- "$3,500 / $8,000", "Boost available!" callout -- [Boost Now] [Maybe Later] buttons - -Achieved Goals Section: -- "ACHIEVED GOALS" header with celebration emoji -- New Laptop: checkmark, "$1,500 saved", "Completed Dec 2024" -- Holiday Shopping: checkmark, "$800 saved", "Completed Nov 2024" -``` - ---- - -## Screen 3: Spending Category Drill-Down - -``` -Mobile category detail screen, Material Design 3, fintech app, 393x852px - -Top Bar: -- Back arrow, "Food & Dining" title, Share button -- "This Week" dropdown selector - -Hero Stats: -- "$320.45 spent this week" large centered -- Line chart showing daily spending trend -- "15% vs last week" comparison -- "Budget: $400/week" with progress bar 80% - -Sub-Categories Section: -- "SUB-CATEGORIES" header -- Restaurants $185 (58%) with progress bar -- Coffee & Cafes $68.50 (21%) -- Groceries $45.95 (14%) -- Fast Food $21.00 (7%) - -Recent Transactions: -- "RECENT TRANSACTIONS" header + "See All" link -- Today section: - - Pizza Palace -$24.50, Restaurants, 2:30 PM, Visa ****4521 - - Starbucks -$6.75, Coffee & Cafes, 9:15 AM -- Yesterday section: - - Whole Foods -$45.95, Groceries, 6:45 PM - - McDonald's -$12.50, Fast Food, 12:30 PM - -AI Insight Card: -- Lightbulb icon, gradient border -- "You spent 58% on restaurants this week. Cooking at home 2 more days could save ~$50" -- [Set Cooking Goal] [Dismiss] buttons -``` - ---- - -## Screen 4: Loading State - -``` -Mobile accounts loading skeleton, Material Design 3, 393x852px - -Tab Bar: -- Shimmer chips for filter tabs - -Net Worth Hero Skeleton: -- Gradient background shape -- Shimmer placeholders: 200dp balance, two 80dp stat chips -- Shimmer health score circle - -Analytics Skeleton: -- Header shimmer bar -- 7 shimmer bar chart shapes -- 4 category chip shimmers - -Account Cards Skeleton: -- White card shapes with: - - 48dp icon circle shimmer - - Two text line shimmers (180dp, 120dp) - - Balance shimmer 80dp right aligned - -Shimmer animation: left-to-right sweep, 1200ms infinite -Gradient: #E1E4E8 → #F8F9FA → #E1E4E8 -``` - ---- - -## Screen 5: Empty State - -``` -Mobile accounts empty state, Material Design 3, 393x852px - -Header: Same as success with tabs visible - -Center Content: -- Floating illustration 160dp: briefcase/portfolio icon -- Subtle up-down animation 2s loop -- "Start Your Financial Journey" title 20sp bold -- "Open your first account and take control of your finances" subtitle centered - -Suggested Section: -- "SUGGESTED FOR YOU" header -- Savings Account card: bank icon, "4.5% APY", "Min: $0, No fees", [Open Now] button -- Investment Club card: chart icon, "3% dividends", "Min: 1 @ $50", [Learn More] button - -CTA: -- "Explore All Account Types →" text link centered -``` - ---- - -## Screen 6: Error State - -``` -Mobile accounts error state, Material Design 3, 393x852px - -Header: Same as success - -Center Content: -- Cloud with X icon illustration, #FF4757 tint -- "Something Went Wrong" title 20sp bold -- "We couldn't load your accounts. Please check your connection." - -Actions: -- "Try Again" gradient button full width -- "Check Network Settings" text link below -``` - ---- - -## Screen 7: Offline State - -``` -Mobile accounts offline banner, Material Design 3, 393x852px - -Offline Banner: -- 48dp height, #FFB800 15% background -- Antenna icon, "You're offline" message, [Reconnect] button - -Header: -- "My Accounts" title -- "Last updated 2 hours ago" subtitle gray - -Content: -- All data at 70% opacity -- "(Cached)" labels on section headers -- Net Worth card with desaturated overlay -- "Data may be outdated" warning - -Analytics Section: -- "Unavailable" badge -- Placeholder: "Data requires internet connection" - -Account Cards: -- "Read-only mode • Cannot make transactions" banner -- Normal cards but swipe actions disabled -``` - ---- - -## Components - -### Net Worth Hero Card -``` -Financial summary hero card, Material Design 3: -- Width: 361dp, height ~220dp -- Gradient #667EEA to #764BA2, 24dp radius -- "NET WORTH" white 12sp + eye toggle -- Balance 36sp white ExtraBold centered -- Stat chips: semi-transparent white bg -- Financial Health Score: circular ring 80dp, score 36sp center -- Level 3 shadow, gradient glow at 20% -``` - -### Financial Health Score Ring -``` -Circular score indicator, Material Design 3: -- Outer ring: 80dp diameter, 8dp stroke -- Track: white 20% opacity -- Fill: gradient based on score level -- Center: score number 36sp, rating label 12sp -- Animation: ring fills + counter animates on load -- Change indicator below: "+5 from last month" -``` - -### Spending Analytics Bar Chart -``` -Weekly spending bar chart, Material Design 3: -- Height: 120dp -- 7 bars for Mon-Sun -- Bar width: 24dp, spacing: 12dp -- Bar color: primary gradient -- Today: dotted outline indicator -- Touch: tooltip with exact amount -- Animation: bars grow from bottom 400ms staggered -``` - -### AI Insight Card -``` -AI suggestion card, Material Design 3: -- Width: 361dp, auto height -- Gradient border 1dp at 20% opacity -- Background: gradient at 5% opacity -- Lightbulb icon 24dp left -- Message text 14sp -- Action buttons: outlined style -- Swipe to dismiss -``` - -### Account Card (Enhanced) -``` -Enhanced account card, Material Design 3: -- Width: 361dp, height ~140dp auto -- White surface, 20dp radius, 2dp elevation -- Left: 48dp icon container, gradient 15% bg -- Account name 16sp, number 12sp gray -- Balance 24sp bold, change indicator 14sp -- Goal section: emoji, name, progress bar, percentage -- Gamification row: streak, goals, auto-save chips -- Swipe actions: Deposit green, Details blue (left), Pay Now purple, Schedule orange (right for loans) -``` - -### Achievement Badge -``` -Achievement badge component, Material Design 3: -- Size: 64dp × 80dp -- Icon container: 48dp circle -- Icon: 28dp emoji -- Label: 10sp below -- States: EARNED (full color + glow), PROGRESS (grayscale + ring %), LOCKED (grayscale + lock icon) -- Tap: reveals requirements for locked -``` - ---- - -## Quick Start - -1. Open [stitch.withgoogle.com](https://stitch.withgoogle.com) -2. Create project "Mifos Mobile - Accounts" -3. Copy each screen prompt → Generate -4. Generate components separately for reuse -5. Export all to Figma when done diff --git a/claude-product-cycle/design-spec-layer/features/accounts/mockups/dummy/01-accounts-overview.png b/claude-product-cycle/design-spec-layer/features/accounts/mockups/dummy/01-accounts-overview.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/accounts/mockups/dummy/02-account-card.png b/claude-product-cycle/design-spec-layer/features/accounts/mockups/dummy/02-account-card.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/accounts/mockups/dummy/03-accounts-empty-state.png b/claude-product-cycle/design-spec-layer/features/accounts/mockups/dummy/03-accounts-empty-state.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/accounts/mockups/dummy/04-account-type-filter.png b/claude-product-cycle/design-spec-layer/features/accounts/mockups/dummy/04-account-type-filter.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/auth/API.md b/claude-product-cycle/design-spec-layer/features/auth/API.md deleted file mode 100644 index 60a89733f..000000000 --- a/claude-product-cycle/design-spec-layer/features/auth/API.md +++ /dev/null @@ -1,169 +0,0 @@ -# Auth - API Reference - -## Base URL -`https://tt.mifos.community/fineract-provider/api/v1/self/` - ---- - -## Endpoints Required - -### 1. User Login - -**Endpoint**: `POST /authentication` - -**Description**: Authenticate user with username and password - -**Request**: -```json -{ - "username": "string", - "password": "string" -} -``` - -**Response**: -```json -{ - "userId": 123, - "username": "john_doe", - "clients": [456], - "isAuthenticated": true, - "base64EncodedAuthenticationKey": "encoded_key", - "officeName": "Head Office" -} -``` - -**Kotlin DTO**: -```kotlin -@Serializable -data class User( - val userId: Long, - val username: String?, - val clients: List, - val isAuthenticated: Boolean, - val base64EncodedAuthenticationKey: String?, - val officeName: String?, -) -``` - -**Status**: ✅ Implemented in AuthenticationService - ---- - -### 2. User Registration - -**Endpoint**: `POST /registration` - -**Description**: Register a new user account - -**Request**: -```json -{ - "accountNumber": "string", - "authenticationMode": "email", - "email": "user@example.com", - "firstName": "John", - "middleName": "M", - "lastName": "Doe", - "mobileNumber": "1234567890", - "password": "securePassword123", - "username": "john_doe" -} -``` - -**Response**: -```json -{ - "requestId": "12345" -} -``` - -**Kotlin DTO**: -```kotlin -@Serializable -data class RegisterPayload( - val accountNumber: String, - val authenticationMode: String = "email", - val email: String, - val firstName: String, - val middleName: String, - val lastName: String, - val mobileNumber: String, - val password: String, - val username: String, -) -``` - -**Status**: ✅ Implemented in RegistrationService - ---- - -### 3. Verify OTP - -**Endpoint**: `POST /registration/user` - -**Description**: Verify user registration with OTP - -**Request**: -```json -{ - "authenticationToken": "123456", - "requestId": "12345" -} -``` - -**Response**: -```json -{ - "message": "User verified successfully" -} -``` - -**Status**: ✅ Implemented in RegistrationService - ---- - -### 4. Update Password - -**Endpoint**: `PUT /user/password` - -**Description**: Update user password - -**Request**: -```json -{ - "newPassword": "newSecurePassword123", - "confirmPassword": "newSecurePassword123" -} -``` - -**Response**: -```json -{ - "message": "Password updated successfully" -} -``` - -**Status**: ✅ Implemented in UserAuthRepository - ---- - -## API Summary - -| Endpoint | Service | Repository | Status | -|----------|---------|------------|--------| -| /authentication | AuthenticationService | UserAuthRepository | ✅ | -| /registration | RegistrationService | UserAuthRepository | ✅ | -| /registration/user | RegistrationService | UserAuthRepository | ✅ | -| /user/password | - | UserAuthRepository | ✅ | - ---- - -## Error Responses - -| Status Code | Error | Description | -|-------------|-------|-------------| -| 400 | Bad Request | Invalid credentials or payload | -| 401 | Unauthorized | Authentication failed | -| 403 | Forbidden | Account locked or disabled | -| 500 | Server Error | Internal server error | diff --git a/claude-product-cycle/design-spec-layer/features/auth/MOCKUP.md b/claude-product-cycle/design-spec-layer/features/auth/MOCKUP.md deleted file mode 100644 index 2466c684f..000000000 --- a/claude-product-cycle/design-spec-layer/features/auth/MOCKUP.md +++ /dev/null @@ -1,1063 +0,0 @@ -# Auth - Professional Fintech UI Mockups - -> **Design Style**: Premium Fintech (Revolut + Monzo inspired) -> **Design References**: [Revolut/Nubank/Monzo Onboarding](https://craftinnovations.global/banking-onboarding-best-practices-revolut-nubank-monzo/) -> **Primary Gradient**: #667EEA → #764BA2 (Purple-Blue) -> **Last Updated**: 2025-12-30 | Version 2.0 - ---- - -## Design Principles Applied - -| Principle | Implementation | -|-----------|----------------| -| Progressive Disclosure | One input per screen, clear progress | -| Contextual Reassurance | Security info at decision points | -| Biometric-First | Face ID/Fingerprint as primary auth | -| Emotional Engagement | Animated visuals, friendly microcopy | -| Trust Building | Visible security badges, encryption info | - ---- - -## Complete User Flow - -``` -┌─────────────────────────────────────────────────────────────────────────┐ -│ AUTH NAVIGATION FLOW │ -├─────────────────────────────────────────────────────────────────────────┤ -│ │ -│ ┌─────────────┐ │ -│ │ SPLASH │ ─── 2s auto ──────────────────────────────────┐ │ -│ │ SCREEN │ │ │ -│ └─────────────┘ │ │ -│ ▼ │ -│ ┌─────────────────────────┐│ -│ │ WELCOME SCREEN ││ -│ │ (First-time users) ││ -│ └───────────┬─────────────┘│ -│ │ │ -│ ┌──────────────────────────────────────────┼──────────┐ │ -│ │ │ │ │ -│ ▼ ▼ ▼ │ -│ ┌─────────────────────┐ ┌─────────────────────┐ │ -│ │ PHONE LOGIN │ │ EMAIL LOGIN │ │ -│ │ (Recommended) │ │ (Alternative) │ │ -│ └─────────┬───────────┘ └─────────┬───────────┘ │ -│ │ │ │ -│ ▼ ▼ │ -│ ┌─────────────────────┐ ┌─────────────────────┐ │ -│ │ OTP VERIFY │ │ PASSWORD ENTRY │ │ -│ │ (6-digit code) │ │ + BIOMETRIC │ │ -│ └─────────┬───────────┘ └─────────┬───────────┘ │ -│ │ │ │ -│ └──────────────┬─────────────────────┘ │ -│ │ │ -│ ▼ │ -│ ┌─────────────────────────────────────────────────────────────────┐ │ -│ │ BIOMETRIC SETUP │ │ -│ │ (Face ID / Fingerprint enrollment) │ │ -│ └─────────────────────────────┬───────────────────────────────────┘ │ -│ │ │ -│ ▼ │ -│ ┌─────────────────────────────────────────────────────────────────┐ │ -│ │ PASSCODE SETUP │ │ -│ │ (4/6 digit backup PIN) │ │ -│ └─────────────────────────────┬───────────────────────────────────┘ │ -│ │ │ -│ ▼ │ -│ ┌─────────────────────────────────────────────────────────────────┐ │ -│ │ SUCCESS / HOME │ │ -│ └─────────────────────────────────────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Screen 1: Splash Screen - -**Purpose**: Brand introduction with premium animation (2s duration) - -``` -┌────────────────────────────────────────────────────────────────┐ -│░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ -│░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ -│░░░░░░░░░░░░░ FULL SCREEN GRADIENT ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ -│░░░░░░░░░░░░░ #667EEA → #764BA2 ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ -│░░░░░░░░░░░░░ (45° angle) ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ -│░░ ░░│ -│░░ ░░│ -│░░ ░░│ -│░░ ┌──────────────────┐ ░░│ -│░░ │ │ ░░│ -│░░ │ ┌────────┐ │ ░░│ -│░░ │ │ │ │ ░░│ -│░░ │ │ MIFOS │ │ ← Logo ░░│ -│░░ │ │ ◈ │ │ 72dp ░░│ -│░░ │ │ │ │ White ░░│ -│░░ │ └────────┘ │ ░░│ -│░░ │ │ ░░│ -│░░ └──────────────────┘ ░░│ -│░░ ░░│ -│░░ M I F O S ░░│ -│░░ ═══════════════ ░░│ -│░░ 24sp, White ░░│ -│░░ Letter-spacing: 8dp ░░│ -│░░ ░░│ -│░░ Your Financial Freedom ░░│ -│░░ 14sp, White 70% ░░│ -│░░ ░░│ -│░░ ░░│ -│░░ ░░│ -│░░ ◉ ◉ ◉ ░░│ -│░░ Loading dots ░░│ -│░░ Sequential pulse ░░│ -│░░ ░░│ -│░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ -│░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ -└────────────────────────────────────────────────────────────────┘ - -Animation Sequence: -├── 0-300ms: Gradient fades in from center -├── 300-600ms: Logo scales 0.8 → 1.0 with spring bounce -├── 600-900ms: "MIFOS" letters animate in sequentially -├── 900-1200ms: Tagline fades up -├── 1200-2000ms: Loading dots pulse -└── 2000ms: Auto-navigate to Welcome/Login - -Logo Animation: -├── Continuous subtle glow pulse (scale 1.0 → 1.02 → 1.0) -├── Duration: 2s loop -└── Glow: 20dp blur, white 15% opacity -``` - ---- - -## Screen 2: Welcome Screen (First-Time Users) - -**Purpose**: Onboarding carousel with value propositions - -``` -┌────────────────────────────────────────────────────────────────┐ -│ Status Bar 9:41 ▐▐▐▌ │ -├────────────────────────────────────────────────────────────────┤ -│ │ -│ Skip → │ -│ 14sp │ -│ #667EEA │ -│ │ -│ │ -│ ┌──────────────────────────┐ │ -│ │ │ │ -│ │ │ │ -│ │ ┌──────────┐ │ │ -│ │ │ 💳 │ │ │ -│ │ │ ↗ │ │ │ -│ │ │ 💰 │ │ │ -│ │ └──────────┘ │ │ -│ │ │ │ -│ │ ┌────┐ ┌────┐ │ │ -│ │ │ $ │ │ € │ │ │ -│ │ └────┘ └────┘ │ │ -│ │ │ │ -│ └──────────────────────────┘ │ -│ ↑ Animated illustration │ -│ Lottie or SVG animation │ -│ 240dp x 240dp │ -│ │ -│ │ -│ Manage Your Money │ -│ ══════════════════ │ -│ 28sp, Bold, #1F2937 │ -│ Center aligned │ -│ │ -│ Track spending, save smarter, and │ -│ transfer money instantly—all in │ -│ one secure app. │ -│ 16sp, #6B7280, Center │ -│ Line-height: 24dp │ -│ │ -│ │ -│ ● ○ ○ │ -│ Page indicators │ -│ Active: #667EEA │ -│ Inactive: #E5E7EB │ -│ │ -│ │ -│ ┌────────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░░░░░░░░░░░░░░░ Get Started ░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └────────────────────────────────────────────────────────┘ │ -│ ↑ Primary Button │ -│ Height: 56dp | Corner Radius: 16dp │ -│ Background: Gradient #667EEA → #764BA2 │ -│ Text: 16sp, SemiBold, White │ -│ Shadow: 0 4dp 12dp rgba(102,126,234,0.3) │ -│ │ -│ │ -│ Already have an account? Sign In │ -│ ↑ 14sp, #6B7280 + #667EEA link │ -│ │ -│ ┌────────────────────────────────────────────────────────┐ │ -│ │ 🔒 Bank-grade security • 256-bit encryption │ │ -│ └────────────────────────────────────────────────────────┘ │ -│ ↑ Trust Badge: 12sp, #9CA3AF, Center │ -│ │ -└────────────────────────────────────────────────────────────────┘ - -Carousel Slides: -├── Slide 1: "Manage Your Money" (spending/tracking) -├── Slide 2: "Save Effortlessly" (goals/vaults) -├── Slide 3: "Transfer Instantly" (P2P/international) -└── Swipe: Horizontal with spring physics -``` - ---- - -## Screen 3: Login Hub (Returning Users) - -**Purpose**: Multiple auth options with phone as primary - -``` -┌────────────────────────────────────────────────────────────────┐ -│ Status Bar 9:41 ▐▐▐▌ │ -├────────────────────────────────────────────────────────────────┤ -│ │ -│ │ -│ ┌──────────────────┐ │ -│ │ │ │ -│ │ ┌────────┐ │ │ -│ │ │ MIFOS │ │ │ -│ │ │ ◈ │ │ │ -│ │ └────────┘ │ │ -│ │ │ │ -│ └──────────────────┘ │ -│ ↑ Logo: 56dp, Primary gradient │ -│ │ -│ │ -│ Welcome Back │ -│ ═══════════════════ │ -│ 24sp, Bold, #1F2937 │ -│ │ -│ Sign in to continue │ -│ 14sp, #6B7280 │ -│ │ -│ │ -│ ┌────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌──────────┐ ┌───────────────────────────────────┐ │ │ -│ │ │ │ │ │ │ │ -│ │ │ 🇺🇸 +1 │ │ Enter phone number │ │ │ -│ │ │ ▼ │ │ │ │ │ -│ │ │ │ │ │ │ │ -│ │ └──────────┘ └───────────────────────────────────┘ │ │ -│ │ ↑ Country ↑ Phone input │ │ -│ │ picker Placeholder: "Enter phone number" │ │ -│ │ 56dp Format: Auto-format as typing │ │ -│ │ │ │ -│ └────────────────────────────────────────────────────────┘ │ -│ ↑ Input Container │ -│ Height: 56dp | Border: 1dp #E5E7EB | Radius: 12dp │ -│ Focus: Border 2dp #667EEA + shadow │ -│ │ -│ │ -│ ┌────────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░░░░░░░░░░░░ Continue with Phone ░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └────────────────────────────────────────────────────────┘ │ -│ ↑ Primary Button (disabled until valid phone) │ -│ │ -│ │ -│ ─────── or ─────── │ -│ Divider with text │ -│ │ -│ │ -│ ┌───────────────────────┐ ┌───────────────────────┐ │ -│ │ │ │ │ │ -│ │ ┌───────┐ │ │ ┌───────┐ │ │ -│ │ │ 👤 │ │ │ │ ✉️ │ │ │ -│ │ │ Face │ │ │ │ Email │ │ │ -│ │ └───────┘ │ │ └───────┘ │ │ -│ │ │ │ │ │ -│ │ Use Biometric │ │ Use Email │ │ -│ │ │ │ │ │ -│ └───────────────────────┘ └───────────────────────┘ │ -│ ↑ Secondary cards: 56dp height, outlined │ -│ Border: 1dp #E5E7EB | Radius: 12dp │ -│ Icon: 24dp | Tap: Scale 0.98 + ripple │ -│ │ -│ │ -│ │ -│ ┌────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ Server: gsoc.mifos.community [ Change ] │ │ -│ │ ↑ 12sp, #9CA3AF 14sp link │ │ -│ │ │ │ -│ └────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌────────────────────────────────────────────────────────┐ │ -│ │ 🔒 256-bit encryption • Your data is secure │ │ -│ └────────────────────────────────────────────────────────┘ │ -│ │ -└────────────────────────────────────────────────────────────────┘ - -Country Picker Bottom Sheet: -┌────────────────────────────────────────────────────────────────┐ -│ ───── │ -│ Drag handle │ -│ │ -│ ┌────────────────────────────────────────────────────────┐ │ -│ │ 🔍 Search country... │ │ -│ └────────────────────────────────────────────────────────┘ │ -│ │ -│ Popular │ -│ ───────── │ -│ ┌────────────────────────────────────────────────────────┐ │ -│ │ 🇺🇸 United States +1 │ │ -│ ├────────────────────────────────────────────────────────┤ │ -│ │ 🇬🇧 United Kingdom +44 │ │ -│ ├────────────────────────────────────────────────────────┤ │ -│ │ 🇮🇳 India +91 │ │ -│ ├────────────────────────────────────────────────────────┤ │ -│ │ 🇩🇪 Germany +49 │ │ -│ └────────────────────────────────────────────────────────┘ │ -│ │ -│ All Countries │ -│ ───────────── │ -│ [Alphabetical scrollable list...] │ -│ │ -└────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Screen 4: OTP Verification - -**Purpose**: 6-digit code with auto-read and resend - -``` -┌────────────────────────────────────────────────────────────────┐ -│ Status Bar 9:41 ▐▐▐▌ │ -├────────────────────────────────────────────────────────────────┤ -│ │ -│ ← Back │ -│ ↑ 24dp icon, #1F2937 │ -│ │ -│ │ -│ │ -│ ┌──────────────────┐ │ -│ │ │ │ -│ │ ┌────┐ │ │ -│ │ │ 📱 │ │ │ -│ │ │ ✓ │ │ │ -│ │ └────┘ │ │ -│ │ │ │ -│ └──────────────────┘ │ -│ ↑ Animated icon: Phone with checkmark │ -│ 80dp, Primary gradient background │ -│ │ -│ │ -│ Verify Your Phone │ -│ ════════════════════ │ -│ 24sp, Bold, #1F2937 │ -│ │ -│ We sent a 6-digit code to │ -│ +1 (555) 123-4567 │ -│ ↑ 14sp, #6B7280 + Bold phone │ -│ │ -│ │ -│ ┌────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │ │ -│ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ -│ │ │ 4 │ │ 7 │ │ 2 │ │ 9 │ │ │ │ │ │ │ -│ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ -│ │ └────┘ └────┘ └────┘ └────┘ └────┘ └────┘ │ │ -│ │ FILLED FILLED FILLED FILLED EMPTY EMPTY │ │ -│ │ │ │ -│ └────────────────────────────────────────────────────────┘ │ -│ ↑ OTP Input Fields │ -│ Size: 48dp x 56dp each | Gap: 12dp │ -│ Border: 2dp #E5E7EB | Focus: #667EEA │ -│ Filled: Background #667EEA 10%, Border #667EEA │ -│ Font: 24sp, Bold, Center │ -│ Auto-focus next on input │ -│ │ -│ │ -│ Auto-reading SMS... │ -│ ↑ 12sp, #667EEA, animated dots │ -│ Shows when SMS permission granted │ -│ │ -│ │ -│ │ -│ │ -│ │ -│ │ -│ │ -│ │ -│ Didn't receive the code? │ -│ ↑ 14sp, #6B7280 │ -│ │ -│ Resend in 0:45 │ -│ ─────────────── │ -│ ↑ 14sp, #667EEA, disabled │ -│ │ -│ OR when timer ends: │ -│ │ -│ Resend Code │ -│ ↑ 14sp, #667EEA, underlined, tappable │ -│ │ -│ │ -│ ┌────────────────────────────────────────────────────────┐ │ -│ │ 🔒 Code expires in 10 minutes │ │ -│ └────────────────────────────────────────────────────────┘ │ -│ │ -└────────────────────────────────────────────────────────────────┘ - -OTP States: -├── Empty: Border #E5E7EB, Background transparent -├── Focused: Border #667EEA 2dp, Shadow glow -├── Filled: Border #667EEA, Background #667EEA 10% -├── Error: Border #FF4757, Background #FF4757 10% -└── Success: All fields green, auto-navigate - -Error State: -┌────────────────────────────────────────────────────────────────┐ -│ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │ -│ │ 4 │ │ 7 │ │ 2 │ │ 9 │ │ 0 │ │ 1 │ │ -│ └────┘ └────┘ └────┘ └────┘ └────┘ └────┘ │ -│ ↑ All borders #FF4757 + shake animation │ -│ │ -│ ⚠️ Invalid code. Please try again. │ -│ ↑ 14sp, #FF4757, with icon │ -└────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Screen 5: Email/Password Login - -**Purpose**: Alternative login for existing username/password users - -``` -┌────────────────────────────────────────────────────────────────┐ -│ Status Bar 9:41 ▐▐▐▌ │ -├────────────────────────────────────────────────────────────────┤ -│ │ -│ ← Back │ -│ │ -│ │ -│ ┌──────────────────┐ │ -│ │ ┌────────┐ │ │ -│ │ │ MIFOS │ │ │ -│ │ └────────┘ │ │ -│ └──────────────────┘ │ -│ │ -│ Sign in with Email │ -│ ═══════════════════ │ -│ 24sp, Bold, #1F2937 │ -│ │ -│ │ -│ Username or Email │ -│ ↑ Label: 12sp, #6B7280 │ -│ ┌────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 👤 maria@example.com │ │ -│ │ │ │ -│ └────────────────────────────────────────────────────────┘ │ -│ ↑ Input: 56dp height, 16dp icon, 16sp text │ -│ │ -│ 16dp gap │ -│ │ -│ Password │ -│ ┌────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 🔒 •••••••••••• 👁 │ │ -│ │ │ │ -│ └────────────────────────────────────────────────────────┘ │ -│ ↑ Password input with visibility toggle │ -│ │ -│ Forgot Password? │ -│ ↑ 14sp, #667EEA │ -│ │ -│ │ -│ ┌────────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░░░░░░░░░░░░░░░░░░ Sign In ░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └────────────────────────────────────────────────────────┘ │ -│ │ -│ │ -│ ─────── or ─────── │ -│ │ -│ ┌────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌───────┐ ┌───────┐ │ │ -│ │ │ 👤 │ │ 📱 │ │ │ -│ │ │ Face │ │ Phone │ │ │ -│ │ └───────┘ └───────┘ │ │ -│ │ Use Biometric Use Phone │ │ -│ │ │ │ -│ └────────────────────────────────────────────────────────┘ │ -│ │ -│ │ -│ ┌────────────────────────────────────────────────────────┐ │ -│ │ Server: gsoc.mifos.community [ Change ] │ │ -│ └────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌────────────────────────────────────────────────────────┐ │ -│ │ 🔒 Secured with TLS 1.3 • Data encrypted │ │ -│ └────────────────────────────────────────────────────────┘ │ -│ │ -└────────────────────────────────────────────────────────────────┘ - -Input Validation States: -├── Default: Border #E5E7EB -├── Focus: Border #667EEA 2dp, Label floats up, Shadow -├── Valid: Border #00D09C, Green checkmark right -├── Error: Border #FF4757, Error message below -└── Disabled: Background #F3F4F6, Border #E5E7EB -``` - ---- - -## Screen 6: Biometric Setup - -**Purpose**: Enroll Face ID/Fingerprint for quick access - -``` -┌────────────────────────────────────────────────────────────────┐ -│ Status Bar 9:41 ▐▐▐▌ │ -├────────────────────────────────────────────────────────────────┤ -│ │ -│ Skip → │ -│ │ -│ │ -│ │ -│ │ -│ │ -│ ┌──────────────────────┐ │ -│ │ │ │ -│ │ ┌──────────┐ │ │ -│ │ │ │ │ │ -│ │ │ 👤 │ │ │ -│ │ │ ╭────╮ │ │ │ -│ │ │ │ ◉◉ │ │ │ ← Face ID │ -│ │ │ ╰────╯ │ │ Illustration │ -│ │ │ │ │ │ -│ │ └──────────┘ │ │ -│ │ │ │ -│ │ ┌──────────┐ │ │ -│ │ │ ░░░░░░░░ │ │ ← Scanning │ -│ │ └──────────┘ │ animation │ -│ │ │ │ -│ └──────────────────────┘ │ -│ ↑ 200dp x 200dp │ -│ Lottie animation: Face scanning │ -│ Primary gradient accent │ -│ │ -│ │ -│ Enable Face ID │ -│ ═══════════════ │ -│ 24sp, Bold, #1F2937 │ -│ │ -│ Use Face ID for quick and secure │ -│ access to your Mifos account. │ -│ ↑ 16sp, #6B7280, Center, 280dp max │ -│ │ -│ │ -│ ┌────────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░░░░░░░░░░░░░░ Enable Face ID ░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └────────────────────────────────────────────────────────┘ │ -│ ↑ Primary button, triggers system biometric prompt │ -│ │ -│ │ -│ ┌────────────────────────────────────────────────────────┐ │ -│ │ Maybe Later │ │ -│ └────────────────────────────────────────────────────────┘ │ -│ ↑ Text button, 14sp, #6B7280 │ -│ │ -│ │ -│ ┌────────────────────────────────────────────────────────┐ │ -│ │ ℹ️ You can enable this anytime in Settings │ │ -│ └────────────────────────────────────────────────────────┘ │ -│ │ -└────────────────────────────────────────────────────────────────┘ - -Fingerprint Variant: -┌────────────────────────────────────────────────────────────────┐ -│ ┌──────────────────────┐ │ -│ │ ┌──────────┐ │ │ -│ │ │ 👆 │ │ │ -│ │ │ ╭───╮ │ │ │ -│ │ │ │░░░│ │ │ ← Fingerprint │ -│ │ │ ╰───╯ │ │ │ -│ │ └──────────┘ │ │ -│ └──────────────────────┘ │ -│ │ -│ Enable Fingerprint │ -│ │ -│ Touch the sensor to enable quick │ -│ and secure access to your account. │ -└────────────────────────────────────────────────────────────────┘ - -Success State: -┌────────────────────────────────────────────────────────────────┐ -│ ┌──────────────────────┐ │ -│ │ ┌──────────┐ │ │ -│ │ │ ✓ │ │ │ -│ │ │ ╭────╮ │ │ ← Green check │ -│ │ │ │ ✓✓ │ │ │ with pulse │ -│ │ │ ╰────╯ │ │ │ -│ │ └──────────┘ │ │ -│ └──────────────────────┘ │ -│ Background: #00D09C 15% │ -│ Icon: #00D09C │ -│ │ -│ Face ID Enabled! │ -│ ════════════════ │ -│ │ -│ You can now use Face ID to access │ -│ your account quickly. │ -│ │ -│ ┌────────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░ Continue ░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └────────────────────────────────────────────────────────┘ │ -└────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Screen 7: Server Selection - -**Purpose**: Allow instance switching for different deployments - -``` -┌────────────────────────────────────────────────────────────────┐ -│ Status Bar 9:41 ▐▐▐▌ │ -├────────────────────────────────────────────────────────────────┤ -│ │ -│ ← Back │ -│ │ -│ │ -│ Select Server │ -│ ═════════════ │ -│ 24sp, Bold, #1F2937 │ -│ │ -│ Choose your Mifos instance │ -│ ↑ 14sp, #6B7280 │ -│ │ -│ │ -│ RECOMMENDED │ -│ ─────────── │ -│ │ -│ ┌────────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ░░│ │ -│ │░░ ┌───────┐ ░░│ │ -│ │░░ │ 🌐 │ Demo Server ✓ ░░│ │ -│ │░░ │ │ gsoc.mifos.community ░░│ │ -│ │░░ └───────┘ ↑ Selected indicator ░░│ │ -│ │░░ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └────────────────────────────────────────────────────────┘ │ -│ ↑ Selected: Primary gradient border, checkmark │ -│ │ -│ │ -│ OTHER SERVERS │ -│ ───────────── │ -│ │ -│ ┌────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌───────┐ │ │ -│ │ │ 🏢 │ Production Server │ │ -│ │ │ │ demo.mifos.io │ │ -│ │ └───────┘ │ │ -│ │ │ │ -│ └────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌───────┐ │ │ -│ │ │ 🔧 │ Sandbox Server │ │ -│ │ │ │ sandbox.mifos.community │ │ -│ │ └───────┘ │ │ -│ │ │ │ -│ └────────────────────────────────────────────────────────┘ │ -│ │ -│ │ -│ CUSTOM SERVER │ -│ ───────────── │ -│ │ -│ ┌────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 🌐 https:// │ │ -│ │ │ │ -│ └────────────────────────────────────────────────────────┘ │ -│ ↑ Custom URL input field │ -│ │ -│ │ -│ ┌────────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░ Connect ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └────────────────────────────────────────────────────────┘ │ -│ │ -└────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Screen 8: Success / Loading to Home - -**Purpose**: Celebration moment before entering app - -``` -┌────────────────────────────────────────────────────────────────┐ -│ Status Bar 9:41 ▐▐▐▌ │ -├────────────────────────────────────────────────────────────────┤ -│ │ -│ │ -│ │ -│ │ -│ │ -│ │ -│ │ -│ │ -│ ┌──────────────────────┐ │ -│ │ │ │ -│ │ ┌──────────┐ │ │ -│ │ │ │ │ │ -│ │ │ ✓ │ │ │ -│ │ │ │ │ │ -│ │ └──────────┘ │ │ -│ │ │ │ -│ │ ✨ ✨ │ │ -│ │ ✨ │ │ -│ │ ✨ ✨ │ │ -│ │ │ │ -│ └──────────────────────┘ │ -│ ↑ Success animation │ -│ Checkmark with confetti burst │ -│ 160dp container │ -│ Checkmark: #00D09C │ -│ Confetti: Multi-color particles │ -│ │ -│ │ -│ You're All Set! │ -│ ═══════════════ │ -│ 28sp, Bold, #1F2937 │ -│ │ -│ Welcome back, Maria! 👋 │ -│ ↑ 16sp, #6B7280 │ -│ │ -│ │ -│ │ -│ │ -│ │ -│ │ -│ │ -│ ┌────────────────────┐ │ -│ │ ◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉ │ │ -│ └────────────────────┘ │ -│ ↑ Linear progress bar │ -│ "Setting up your dashboard..." │ -│ 12sp, #6B7280 │ -│ │ -│ │ -│ │ -│ │ -└────────────────────────────────────────────────────────────────┘ - -Animation Sequence: -├── 0-300ms: Checkmark draws in (stroke animation) -├── 300-600ms: Confetti burst from center -├── 600-900ms: Title fades in -├── 900-1200ms: Welcome message fades in -├── 1200-2500ms: Progress bar fills -└── 2500ms: Navigate to Home screen -``` - ---- - -## Component Specifications - -### Input Fields - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ INPUT FIELD SPECIFICATIONS │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ Default State: │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ 👤 Placeholder text... │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ Height: 56dp | Radius: 12dp | Border: 1dp #E5E7EB │ -│ Icon: 20dp, #9CA3AF | Text: 16sp, #1F2937 │ -│ Padding: 16dp horizontal │ -│ │ -│ Focus State: │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ 👤 Typing here... | │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ Border: 2dp #667EEA | Shadow: 0 0 8dp rgba(102,126,234,0.2) │ -│ Icon: #667EEA | Cursor: #667EEA │ -│ │ -│ Error State: │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ 👤 Invalid input ⚠ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ ⚠️ Error message here │ -│ Border: 2dp #FF4757 | Icon right: 20dp #FF4757 │ -│ Error text: 12sp #FF4757, 4dp below input │ -│ │ -│ Success State: │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ 👤 Valid input ✓ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ Border: 2dp #00D09C | Icon right: 20dp #00D09C │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - -### Buttons - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ BUTTON SPECIFICATIONS │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ Primary Button: │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░ Button Text ░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ Height: 56dp | Radius: 16dp | Full width │ -│ Background: Gradient #667EEA → #764BA2 │ -│ Text: 16sp, SemiBold, White │ -│ Shadow: 0 4dp 12dp rgba(102,126,234,0.3) │ -│ Press: Scale 0.98, Shadow reduces │ -│ Disabled: Opacity 50%, no shadow │ -│ │ -│ Secondary Button: │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ Button Text │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ Height: 56dp | Radius: 16dp | Border: 1dp #E5E7EB │ -│ Background: Transparent | Text: 16sp, #1F2937 │ -│ Press: Background #F3F4F6 │ -│ │ -│ Text Button: │ -│ Button Text │ -│ ─────────── │ -│ Text: 14sp, #667EEA | Press: Underline visible │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Animations & Micro-interactions - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ ANIMATION SPECIFICATIONS │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ 1. PAGE TRANSITIONS │ -│ ──────────────── │ -│ Forward: Slide in from right (300ms, FastOutSlowIn) │ -│ Back: Slide out to right (250ms, FastOutSlowIn) │ -│ Shared elements: Cross-fade with position morph │ -│ │ -│ 2. INPUT FOCUS │ -│ ──────────────── │ -│ Border color: 200ms ease │ -│ Label float: 150ms, translateY -24dp │ -│ Shadow appear: 200ms ease-out │ -│ │ -│ 3. BUTTON PRESS │ -│ ──────────────── │ -│ Scale: 1.0 → 0.98 → 1.0 (100ms each) │ -│ Haptic: Light impact on press │ -│ Ripple: From touch point, 300ms │ -│ │ -│ 4. OTP AUTO-FILL │ -│ ──────────────── │ -│ Each digit: Scale 0 → 1.1 → 1.0 (staggered 50ms) │ -│ Success: All shake slightly, turn green │ -│ │ -│ 5. SUCCESS CELEBRATION │ -│ ──────────────── │ -│ Checkmark: Stroke draw 300ms │ -│ Confetti: 20 particles, physics-based fall │ -│ Haptic: Success pattern (short-short-long) │ -│ │ -│ 6. ERROR SHAKE │ -│ ──────────────── │ -│ TranslateX: 0 → -10 → 10 → -5 → 5 → 0 (300ms) │ -│ Haptic: Error pattern (long-short-long) │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Accessibility - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ ACCESSIBILITY SPECIFICATIONS │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ TOUCH TARGETS │ -│ Minimum: 48dp x 48dp for all interactive elements │ -│ Recommended: 56dp for primary actions │ -│ Spacing: 8dp minimum between adjacent targets │ -│ │ -│ COLOR CONTRAST │ -│ Text on background: 4.5:1 minimum (WCAG AA) │ -│ Text on gradient: 4.5:1 (white on #667EEA = 4.7:1 ✓) │ -│ Error text: #FF4757 on white = 4.5:1 ✓ │ -│ │ -│ SCREEN READER LABELS │ -│ Phone input: "Phone number, required" │ -│ OTP fields: "Verification code, digit 1 of 6" │ -│ Biometric button: "Enable Face ID for quick login" │ -│ Error states: Announce error + instruction │ -│ │ -│ FOCUS ORDER │ -│ 1. Back button (if present) │ -│ 2. Skip button (if present) │ -│ 3. Primary input field │ -│ 4. Secondary options │ -│ 5. Primary action button │ -│ 6. Alternative options │ -│ │ -│ REDUCED MOTION │ -│ When enabled: Instant transitions, no animations │ -│ Keep: Color changes, state indicators │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Dark Mode - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ DARK MODE COLOR MAPPING │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ Element │ Light │ Dark │ -│ ─────────────────────┼────────────────┼───────────────────── │ -│ Background │ #FFFFFF │ #0D1117 │ -│ Surface │ #FFFFFF │ #161B22 │ -│ Card │ #FFFFFF │ #21262D │ -│ Primary Text │ #1F2937 │ #F0F6FC │ -│ Secondary Text │ #6B7280 │ #8B949E │ -│ Placeholder │ #9CA3AF │ #6E7681 │ -│ Border │ #E5E7EB │ #30363D │ -│ Input Background │ #FFFFFF │ #0D1117 │ -│ ─────────────────────┼────────────────┼───────────────────── │ -│ PRESERVED (same): │ │ │ -│ Primary Gradient │ #667EEA-764BA2 │ Same (85% opacity) │ -│ Success │ #00D09C │ Same │ -│ Error │ #FF4757 │ Same │ -│ Warning │ #FFB800 │ Same │ -│ │ -└─────────────────────────────────────────────────────────────────┘ - -Dark Mode Example - Login Screen: -┌────────────────────────────────────────────────────────────────┐ -│▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ -│▓▓ Status Bar 9:41 ▐▐▐▌ ▓▓│ -│▓▓──────────────────────────────────────────────────────────────▓▓│ -│▓▓ ▓▓│ -│▓▓ ┌──────────────────┐ ▓▓│ -│▓▓ │ ┌────────┐ │ ▓▓│ -│▓▓ │ │ MIFOS │ │ ← Gradient preserved ▓▓│ -│▓▓ │ └────────┘ │ ▓▓│ -│▓▓ └──────────────────┘ ▓▓│ -│▓▓ ▓▓│ -│▓▓ Welcome Back ▓▓│ -│▓▓ #F0F6FC ▓▓│ -│▓▓ Sign in to continue ▓▓│ -│▓▓ #8B949E ▓▓│ -│▓▓ ▓▓│ -│▓▓ ┌────────────────────────────────────────────────────────┐▓▓│ -│▓▓ │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│▓▓│ -│▓▓ │▓▓ 🇺🇸 +1 │ Enter phone number ▓▓│▓▓│ -│▓▓ │▓▓ │ #6E7681 ▓▓│▓▓│ -│▓▓ │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│▓▓│ -│▓▓ └────────────────────────────────────────────────────────┘▓▓│ -│▓▓ Border: #30363D ▓▓│ -│▓▓ ▓▓│ -│▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ -└────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Changelog - -| Date | Version | Changes | -|------|---------|---------| -| 2025-12-30 | 1.0 | Initial mockup creation | -| 2025-12-30 | 2.0 | Complete redesign with professional fintech patterns | - ---- - -## Implementation Reference - -| Screen | Composable | ViewModel | -|--------|------------|-----------| -| Splash | `SplashScreen` | - | -| Welcome | `WelcomeScreen` | - | -| Login Hub | `LoginScreen` | `LoginViewModel` | -| OTP Verify | `OtpVerificationScreen` | `LoginViewModel` | -| Email Login | `EmailLoginScreen` | `LoginViewModel` | -| Biometric Setup | `BiometricSetupScreen` | - | -| Server Selection | `ServerSelectionScreen` | `LoginViewModel` | -| Success | `LoginSuccessScreen` | - | - ---- - -## Data Binding Reference - -> **For `/implement` command**: Maps UI components to API.md sections. -> **Source of Truth**: See `API.md` for complete endpoint details. - -### Screen → API.md Mapping - -| Screen | API.md Section | Key Fields | -|--------|----------------|------------| -| Login | `Endpoints Required → 1. Login Authentication` | `username`, `password` → `User` response | -| Registration | `Endpoints Required → 2. User Registration` | `accountNumber`, `firstName`, `lastName`, `email`, `mobileNumber`, `username`, `password` | -| OTP Verification | `Endpoints Required → 3. Verify OTP` | `requestId`, `authenticationToken` | -| Forgot Password | N/A | Not available in Fineract Self-Service API | - -### Client-Only Features - -| Feature | Storage | Notes | -|---------|---------|-------| -| Biometric Authentication | Platform Keystore | No API required | -| Remember Me | DataStore | Local username storage | -| Server Selection | DataStore | Base URL configuration | -| Passcode | DataStore (encrypted) | Local app lock | - -### Actions → API.md Mapping - -| User Action | API.md Reference | Navigation | -|-------------|------------------|------------| -| Tap Login | `1. Login Authentication` | → Passcode/Home | -| Tap Register | `2. User Registration` | → OTP Screen | -| Tap Verify OTP | `3. Verify OTP` | → Login Screen | -| Tap Resend OTP | `2. User Registration` | Resend flow | - -### Error Handling - -See `API.md → Error Responses` for complete error codes and messages. diff --git a/claude-product-cycle/design-spec-layer/features/auth/SPEC.md b/claude-product-cycle/design-spec-layer/features/auth/SPEC.md deleted file mode 100644 index 027b6beae..000000000 --- a/claude-product-cycle/design-spec-layer/features/auth/SPEC.md +++ /dev/null @@ -1,255 +0,0 @@ -# Auth - Feature Specification - -> **Purpose**: User authentication, registration, password recovery -> **User Value**: Secure access to banking services -> **Last Updated**: 2025-12-27 - ---- - -## 1. Overview - -### 1.1 Feature Summary -The Auth feature provides comprehensive authentication flows including login, registration, OTP verification, password recovery, and ID document upload for new users. - -### 1.2 User Stories -- As a user, I want to log in with my credentials so that I can access my accounts -- As a new user, I want to register an account so that I can use the banking app -- As a user, I want to recover my password if I forget it - ---- - -## 2. Screen Layouts - -### 2.1 Login Screen - -``` -┌─────────────────────────────────────────┐ -│ │ -│ [Mifos Logo] │ -│ │ -│ ┌─────────────────────────────────┐ │ -│ │ Username │ │ -│ └─────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────┐ │ -│ │ Password 👁 │ │ -│ └─────────────────────────────────┘ │ -│ │ -│ Forgot Password? │ -│ │ -│ ┌─────────────────────────────────┐ │ -│ │ SIGN IN │ │ -│ └─────────────────────────────────┘ │ -│ │ -│ Don't have an account? Sign Up │ -│ │ -└─────────────────────────────────────────┘ -``` - -### 2.2 Registration Screen - -``` -┌─────────────────────────────────────────┐ -│ ← Back Register │ -├─────────────────────────────────────────┤ -│ │ -│ First Name [________________] │ -│ Middle Name [________________] │ -│ Last Name [________________] │ -│ Email [________________] │ -│ Mobile Number [________________] │ -│ Account Number [________________] │ -│ Password [________________] │ -│ [Password Strength Indicator] │ -│ Confirm Password [________________] │ -│ │ -│ ┌─────────────────────────────────┐ │ -│ │ REGISTER │ │ -│ └─────────────────────────────────┘ │ -│ │ -│ Already have an account? Login │ -│ │ -└─────────────────────────────────────────┘ -``` - -### 2.3 Sections Table - -| # | Screen | Description | Priority | -|---|--------|-------------|----------| -| 1 | LoginScreen | Username/password login | P0 | -| 2 | RegistrationScreen | New user registration form | P0 | -| 3 | OtpAuthenticationScreen | OTP verification | P0 | -| 4 | RecoverPasswordScreen | Password recovery | P1 | -| 5 | SetPasswordScreen | Set new password | P1 | -| 6 | UploadIdScreen | ID document upload | P1 | - ---- - -## 3. User Interactions - -| Action | Trigger | Result | API Call | -|--------|---------|--------|----------| -| Login | Click Sign In | Validate & authenticate | POST /authentication | -| Register | Click Register | Submit registration | POST /registration | -| Verify OTP | Click Next | Verify user | POST /registration/user | -| Recover Password | Click Recover | Send recovery code | POST /user/password | -| Set Password | Click Submit | Update password | PUT /user/password | - ---- - -## 4. State Model - -```kotlin -// Login State -data class LoginState( - val username: String = "", - val password: String = "", - val isPasswordVisible: Boolean = false, - val clientName: String = "", - val isError: Boolean = false, - val userNameError: StringResource? = null, - val passwordError: StringResource? = null, - val dialogState: DialogState? = null, - val uiState: ScreenUiState?, - val showOverlay: Boolean = false, -) { - sealed interface DialogState { - data class Error(val message: String) : DialogState - } - - val isLoginButtonEnabled: Boolean - get() = username.isNotEmpty() && password.length >= 8 -} - -// Login Events -sealed interface LoginEvent { - data object NavigateToSignup : LoginEvent - data object NavigateToPasscode : LoginEvent - data object NavigateToForgotPassword : LoginEvent - data class ShowToast(val message: String) : LoginEvent -} - -// Login Actions -sealed interface LoginAction { - data class UsernameChanged(val username: String) : LoginAction - data class PasswordChanged(val password: String) : LoginAction - data object TogglePasswordVisibility : LoginAction - data object ErrorDialogDismiss : LoginAction - data object LoginClicked : LoginAction - data object SignupClicked : LoginAction - data object NavigateToForgotPassword : LoginAction -} - -// Registration State -data class SignUpState( - val customerAccount: String = "", - val firstName: String = "", - val middleName: String = "", - val lastName: String = "", - val email: String = "", - val password: String = "", - val confirmPassword: String = "", - val mobileNumber: String = "", - val dialogState: SignUpDialog? = null, - val uiState: ScreenUiState = ScreenUiState.Success, - val showOverlay: Boolean = false, - val isPasswordChanged: Boolean = false, - val isPasswordVisible: Boolean = false, - val isConfirmPasswordVisible: Boolean = false, - val passwordFeedback: List = emptyList(), - val passwordStrengthState: PasswordStrengthState = PasswordStrengthState.NONE, - // Validation errors - val firstNameError: StringResource? = null, - val middleNameError: StringResource? = null, - val lastNameError: StringResource? = null, - val emailError: StringResource? = null, - val mobileNumberError: StringResource? = null, - val customerAccountError: StringResource? = null, - val passwordError: StringResource? = null, - val confirmPasswordError: StringResource? = null, -) { - sealed interface SignUpDialog { - data class Error(val message: String) : SignUpDialog - } - - val isSubmitButtonEnabled: Boolean - get() = customerAccount.isNotBlank() && - firstName.isNotBlank() && - lastName.isNotBlank() && - email.isNotBlank() && - password.isNotBlank() && - confirmPassword.isNotBlank() -} - -// Registration Events -sealed interface SignUpEvent { - data class ShowToast(val message: String) : SignUpEvent - data object NavigateToUploadDocuments : SignUpEvent - data object NavigateToLogin : SignUpEvent -} -``` - ---- - -## 5. API Requirements - -| Endpoint | Method | Purpose | Status | -|----------|--------|---------|--------| -| /self/authentication | POST | User login | ✅ Exists | -| /self/registration | POST | Register user | ✅ Exists | -| /self/registration/user | POST | Verify OTP | ✅ Exists | -| /self/user/password | PUT | Update password | ✅ Exists | - ---- - -## 6. Validation Rules - -| Field | Validation | Error Message | -|-------|------------|---------------| -| Username | Required, non-empty | "Enter username" | -| Password | Required, min 8 chars | "Password must be 8+ chars" | -| Email | Valid email format | "Invalid email format" | -| Phone | 10+ digits, numeric | "Invalid phone number" | -| Names | Letters only | "No special characters allowed" | - ---- - -## 7. Password Strength - -| Level | Score | Requirements | -|-------|-------|--------------| -| WEAK_1 | 0 | < 8 chars | -| WEAK_2 | 1 | 8 chars, no variety | -| WEAK_3 | 2 | 8 chars, some variety | -| GOOD | 3 | 8 chars, uppercase/lowercase | -| STRONG | 4 | 8 chars, includes numbers | -| VERY_STRONG | 5 | 8 chars, includes symbols | - ---- - -## 8. Navigation Flow - -``` -AUTH_GRAPH (Start: LoginRoute) -├── LoginRoute -│ ├── → RegistrationRoute (Sign Up) -│ ├── → RecoverPasswordRoute (Forgot Password) -│ └── → PasscodeScreen (Login success) -├── RegistrationRoute -│ └── → UploadIdRoute → OtpAuthenticationRoute -├── OtpAuthenticationRoute -│ └── → StatusScreen (Success/Failure) -├── RecoverPasswordRoute -│ └── → OtpAuthenticationRoute → SetPasswordRoute -└── SetPasswordRoute - └── → StatusScreen → LoginRoute -``` - ---- - -## Changelog - -| Date | Change | -|------|--------| -| 2025-12-29 | Updated state models to match actual implementation, added Events/Actions | -| 2025-12-27 | Initial spec from codebase analysis | diff --git a/claude-product-cycle/design-spec-layer/features/auth/STATUS.md b/claude-product-cycle/design-spec-layer/features/auth/STATUS.md deleted file mode 100644 index f979d0958..000000000 --- a/claude-product-cycle/design-spec-layer/features/auth/STATUS.md +++ /dev/null @@ -1,114 +0,0 @@ -# Auth - Implementation Status - -> **Last Updated**: 2025-12-29 -> **Overall Status**: ✅ Done - ---- - -## Implementation Checklist - -- [x] SPEC.md created -- [x] API.md created -- [x] Network: Services exist -- [x] Data: Repository exists -- [x] Feature: ViewModel + Screen -- [x] Navigation: Route registered -- [x] DI: Modules registered -- [x] STATUS.md updated - ---- - -## Layer Status - -| Layer | Status | Files | -|-------|--------|-------| -| Network | ✅ | AuthenticationService.kt, RegistrationService.kt | -| Data | ✅ | UserAuthRepository.kt, UserAuthRepositoryImp.kt | -| Feature | ✅ | LoginViewModel, LoginScreen, RegistrationViewModel, RegistrationScreen, OtpAuthenticationViewModel, OtpAuthenticationScreen, RecoverPasswordViewModel, RecoverPasswordScreen, SetPasswordViewModel, SetPasswordScreen, UploadIdViewmodel, UploadIdScreen | -| DI | ✅ | AuthModule.kt | -| Navigation | ✅ | AuthenticationNavGraph.kt | - ---- - -## Files - -### Network Layer - -The authentication feature uses two main services for API communication: - -- **AuthenticationService.kt** - Handles user authentication requests (login, OTP verification) - - Location: `/core/network/src/commonMain/kotlin/org/mifos/mobile/core/network/services/` - -- **RegistrationService.kt** - Manages user registration and account creation flows - - Location: `/core/network/src/commonMain/kotlin/org/mifos/mobile/core/network/services/` - -### Data Layer - -The data layer provides repository implementations that bridge network and UI layers: - -- **UserAuthRepository.kt** - Interface defining authentication operations - - Location: `/core/data/src/commonMain/kotlin/org/mifos/mobile/core/data/repository/` - -- **UserAuthRepositoryImp.kt** - Implementation of UserAuthRepository - - Location: `/core/data/src/commonMain/kotlin/org/mifos/mobile/core/data/repositoryImpl/` - -### Feature Layer - -The feature module contains multiple authentication screens and their associated ViewModels: - -**Login Flow:** -- **LoginViewModel.kt** - Manages login state and authentication logic -- **LoginScreen.kt** - Composable UI for user login - -**Registration Flow:** -- **RegistrationViewModel.kt** - Handles user registration logic -- **RegistrationScreen.kt** - Composable UI for user registration - -**OTP Authentication:** -- **OtpAuthenticationViewModel.kt** - Manages OTP verification state -- **OtpAuthenticationScreen.kt** - Composable UI for OTP input - -**Password Recovery:** -- **RecoverPasswordViewModel.kt** - Handles password recovery flow -- **RecoverPasswordScreen.kt** - Composable UI for password recovery initiation - -**Set New Password:** -- **SetPasswordViewModel.kt** - Manages new password setup -- **SetPasswordScreen.kt** - Composable UI for setting new password - -**Document Upload:** -- **UploadIdViewmodel.kt** - Manages document upload state -- **UploadIdScreen.kt** - Composable UI for document upload -- **UploadDocumentsSection.kt** - Reusable component for document section - -All files are located at: `/feature/auth/src/commonMain/kotlin/org/mifos/mobile/feature/auth/` - -### Dependency Injection - -- **AuthModule.kt** - Koin module defining all auth-related dependencies - - Location: `/feature/auth/src/commonMain/kotlin/org/mifos/mobile/feature/auth/di/` - -### Navigation - -- **AuthenticationNavGraph.kt** - Defines navigation graph and routes for auth feature - - Location: `/feature/auth/src/commonMain/kotlin/org/mifos/mobile/feature/auth/navigation/` - - Individual screen navigation files: LoginNavigation.kt, RegistrationNavigation.kt, UploadIdNavigation.kt, etc. - ---- - -## Gaps - -None identified. The authentication feature is fully implemented across all layers: -- Complete network service layer with API integration -- Full data persistence and repository pattern -- Comprehensive feature UI with multiple authentication screens -- Proper dependency injection configuration -- Navigation graph with all auth routes registered - ---- - -## Changelog - -| Date | Change | -|------|--------| -| 2025-12-29 | Initial status documentation | diff --git a/claude-product-cycle/design-spec-layer/features/auth/mockups/FIGMA_LINKS.md b/claude-product-cycle/design-spec-layer/features/auth/mockups/FIGMA_LINKS.md deleted file mode 100644 index 3a8b67c0f..000000000 --- a/claude-product-cycle/design-spec-layer/features/auth/mockups/FIGMA_LINKS.md +++ /dev/null @@ -1,76 +0,0 @@ -# Auth - Figma Links - -> **Feature**: Authentication Flow -> **Last Updated**: 2026-01-03 -> **Status**: ⚠️ Flow diagram created, UI mockups pending - ---- - -## User Flow Diagram (FigJam) - -| Property | Value | -|----------|-------| -| **Diagram URL** | [Auth User Flow](https://www.figma.com/online-whiteboard/create-diagram/28749b96-55e0-4f0d-98b3-dabe150a3f5f?utm_source=chatgpt&utm_content=edit_in_figjam&oai_id=&request_id=e5358ddf-7de3-4e4a-9beb-e035f510673c) | -| **Type** | FigJam Flowchart | -| **Generated** | 2026-01-03 via Figma MCP | - ---- - -## Main Figma File (UI Mockups) - -| Property | Value | -|----------|-------| -| **File URL** | `(add after creating mockups)` | -| **Project** | Mifos Mobile v2.0 | -| **Page** | Auth Flow | - ---- - -## Screen Links - -| # | Screen | Frame Name | Figma URL | Status | -|:-:|--------|------------|-----------|:------:| -| 1 | Splash | auth/splash | `(pending)` | ⏳ | -| 2 | Welcome | auth/welcome | `(pending)` | ⏳ | -| 3 | Login Hub | auth/login-hub | `(pending)` | ⏳ | -| 4 | OTP Verify | auth/otp-verify | `(pending)` | ⏳ | -| 5 | Email Login | auth/email-login | `(pending)` | ⏳ | -| 6 | Biometric Setup | auth/biometric-setup | `(pending)` | ⏳ | -| 7 | Server Selection | auth/server-selection | `(pending)` | ⏳ | -| 8 | Success | auth/success | `(pending)` | ⏳ | - ---- - -## Component Links - -| Component | Frame Name | Figma URL | Status | -|-----------|------------|-----------|:------:| -| Primary Button | components/primary-button | `(pending)` | ⏳ | -| Text Input | components/text-input | `(pending)` | ⏳ | -| OTP Input | components/otp-input | `(pending)` | ⏳ | -| Auth Card | components/auth-card | `(pending)` | ⏳ | - ---- - -## Export Checklist - -- [ ] Generated all 8 screens in Google Stitch -- [ ] Exported to Figma -- [ ] Organized in pages/frames -- [ ] Updated URLs above -- [ ] Shared with team - ---- - -## How to Update - -1. Export designs from Google Stitch to Figma -2. Copy Figma frame URLs (right-click → Copy link) -3. Update the table above with URLs -4. Change status from ⏳ to ✅ - ---- - -## Notes - -(Add any design notes or decisions here) diff --git a/claude-product-cycle/design-spec-layer/features/auth/mockups/PROMPTS.md b/claude-product-cycle/design-spec-layer/features/auth/mockups/PROMPTS.md deleted file mode 100644 index 5fb32e00e..000000000 --- a/claude-product-cycle/design-spec-layer/features/auth/mockups/PROMPTS.md +++ /dev/null @@ -1,404 +0,0 @@ -# Auth - AI Mockup Prompts - -> **Generated from**: features/auth/MOCKUP.md -> **Generated on**: 2026-01-03 -> **AI Tool**: Google Stitch (Material Design 3) -> **Design Style**: Premium Fintech (Revolut + Monzo inspired) - ---- - -## Screen 1: Splash Screen - -### Google Stitch Prompt - -Create a mobile splash screen for a premium fintech banking app with Material Design 3: - -**App Context:** -Mifos Mobile - Self-service banking app for managing accounts, loans, and transfers. - -**Screen Size:** 393 x 852 pixels (Android standard) - -**Background:** -- Full screen gradient at 45° angle -- Start color: #667EEA (Purple-Blue) -- End color: #764BA2 (Deep Purple) - -**Center Content:** -- App logo: 72dp white icon, centered -- Logo has subtle glow effect (20dp blur, white 15% opacity) -- Below logo: "MIFOS" text, 24sp, white, letter-spacing 8dp -- Tagline: "Your Financial Freedom", 14sp, white 70% opacity - -**Bottom:** -- Three loading dots, sequential pulse animation -- White color, 8dp diameter each - -**Style Guidelines:** -- Premium, modern fintech aesthetic -- Smooth gradient transition -- Minimalist, trust-building design -- No visible UI chrome - ---- - -## Screen 2: Welcome/Onboarding Screen - -### Google Stitch Prompt - -Create a mobile onboarding welcome screen for a fintech app with Material Design 3: - -**App Context:** -Mifos Mobile - First-time user onboarding with value propositions. - -**Screen Size:** 393 x 852 pixels - -**Top Right:** -- "Skip" text link, 14sp, color #667EEA - -**Center:** -- Large illustration area: 240dp x 240dp -- Animated illustration showing money/cards/transfers -- Use fintech iconography (credit cards, dollar signs, arrows) - -**Below Illustration:** -- Title: "Manage Your Money", 28sp, Bold, #1F2937 -- Subtitle: "Track spending, save smarter, and transfer money instantly—all in one secure app.", 16sp, #6B7280, center-aligned, line-height 24dp - -**Page Indicators:** -- Three dots horizontally centered -- Active dot: #667EEA (filled) -- Inactive dots: #E5E7EB (outlined) - -**Primary Button:** -- "Get Started" button, full width with 16dp horizontal margin -- Height: 56dp, Corner radius: 16dp -- Background: Gradient #667EEA → #764BA2 -- Text: 16sp, SemiBold, White -- Shadow: 0 4dp 12dp rgba(102,126,234,0.3) - -**Below Button:** -- "Already have an account? Sign In", 14sp -- "Sign In" is a link in #667EEA - -**Bottom:** -- Trust badge: "🔒 Bank-grade security • 256-bit encryption" -- 12sp, #9CA3AF, centered - ---- - -## Screen 3: Login Hub Screen - -### Google Stitch Prompt - -Create a mobile login screen for a fintech banking app with Material Design 3: - -**App Context:** -Mifos Mobile - Login screen with multiple authentication options. - -**Screen Size:** 393 x 852 pixels - -**Header:** -- Mifos logo centered, 56dp, primary gradient colors -- Title: "Welcome Back", 24sp, Bold, #1F2937 -- Subtitle: "Sign in to continue", 14sp, #6B7280 - -**Phone Input Section:** -- Container with country picker and phone input -- Country picker: Flag + dial code (e.g., 🇺🇸 +1), dropdown arrow -- Phone input: "Enter phone number" placeholder -- Container height: 56dp, border: 1dp #E5E7EB, radius: 12dp -- Focus state: border 2dp #667EEA with shadow - -**Primary Button:** -- "Continue with Phone", full width -- Same styling as onboarding button -- Disabled state until valid phone entered - -**Divider:** -- "─────── or ───────" with "or" text - -**Alternative Auth Cards:** -- Two side-by-side cards -- Left: "Use Biometric" with face icon -- Right: "Use Email" with email icon -- Each: 56dp height, outlined, 12dp radius - -**Bottom Section:** -- Server info: "Server: gsoc.mifos.community [Change]" -- Trust badge: "🔒 256-bit encryption • Your data is secure" - ---- - -## Screen 4: OTP Verification Screen - -### Google Stitch Prompt - -Create a mobile OTP verification screen for a fintech app with Material Design 3: - -**App Context:** -Mifos Mobile - 6-digit SMS code verification after phone login. - -**Screen Size:** 393 x 852 pixels - -**Top:** -- Back arrow button, 24dp, #1F2937 - -**Center Icon:** -- Phone with checkmark illustration -- 80dp container with primary gradient background -- Animated scanning effect - -**Title Section:** -- "Verify Your Phone", 24sp, Bold, #1F2937 -- "We sent a 6-digit code to", 14sp, #6B7280 -- "+1 (555) 123-4567", 14sp, Bold, #1F2937 - -**OTP Input:** -- 6 individual input boxes in a row -- Each box: 48dp x 56dp, gap: 12dp between -- Border: 2dp #E5E7EB, radius: 8dp -- Filled state: background #667EEA 10%, border #667EEA -- Numbers: 24sp, Bold, center-aligned - -**Auto-read indicator:** -- "Auto-reading SMS..." with animated dots -- 12sp, #667EEA - -**Resend Section:** -- "Didn't receive the code?", 14sp, #6B7280 -- "Resend in 0:45" countdown, 14sp, #667EEA (disabled) -- After timer: "Resend Code" link, underlined - -**Bottom:** -- "🔒 Code expires in 10 minutes", 12sp, #9CA3AF - ---- - -## Screen 5: Email/Password Login Screen - -### Google Stitch Prompt - -Create a mobile email login screen for a fintech app with Material Design 3: - -**App Context:** -Mifos Mobile - Alternative login for username/password users. - -**Screen Size:** 393 x 852 pixels - -**Top:** -- Back arrow button -- Mifos logo centered, smaller (48dp) - -**Title:** -- "Sign in with Email", 24sp, Bold, #1F2937 - -**Form Fields:** - -**Username/Email Input:** -- Label: "Username or Email", 12sp, #6B7280, floating -- Input: 56dp height, user icon (👤) left, 16sp text -- Border: 1dp #E5E7EB, radius: 12dp -- Focus: 2dp #667EEA border, shadow - -**Password Input:** -- Label: "Password", 12sp, #6B7280 -- Input: 56dp height, lock icon (🔒) left, visibility toggle (👁) right -- Password dots: •••••••••••• - -**Forgot Password:** -- "Forgot Password?" link, right-aligned, 14sp, #667EEA - -**Primary Button:** -- "Sign In", full width, gradient background - -**Divider:** -- "─────── or ───────" - -**Alternative Auth:** -- Two option cards: "Use Biometric" and "Use Phone" - -**Bottom:** -- Server info row -- Security badge - ---- - -## Screen 6: Biometric Setup Screen - -### Google Stitch Prompt - -Create a mobile biometric enrollment screen for a fintech app with Material Design 3: - -**App Context:** -Mifos Mobile - Face ID/Fingerprint setup for quick login. - -**Screen Size:** 393 x 852 pixels - -**Top Right:** -- "Skip" text link - -**Center Illustration:** -- Large face/fingerprint illustration, 200dp x 200dp -- Face ID variant: Face outline with scanning animation -- Primary gradient accent colors -- Animated scanning line effect - -**Title:** -- "Enable Face ID" (or "Enable Fingerprint"), 24sp, Bold, #1F2937 - -**Description:** -- "Use Face ID for quick and secure access to your Mifos account." -- 16sp, #6B7280, center-aligned, max-width 280dp - -**Primary Button:** -- "Enable Face ID", full width, gradient - -**Secondary Button:** -- "Maybe Later", text button, 14sp, #6B7280 - -**Bottom Info:** -- "ℹ️ You can enable this anytime in Settings" -- 12sp, #9CA3AF - ---- - -## Screen 7: Server Selection Screen - -### Google Stitch Prompt - -Create a mobile server selection screen for a fintech app with Material Design 3: - -**App Context:** -Mifos Mobile - Allow users to switch between different Mifos instances. - -**Screen Size:** 393 x 852 pixels - -**Top:** -- Back button -- Title: "Select Server", 24sp, Bold, #1F2937 -- Subtitle: "Choose your Mifos instance", 14sp, #6B7280 - -**Recommended Section:** -- Section label: "RECOMMENDED", 12sp, #6B7280 -- Card with gradient border (selected state): - - Globe icon, "Demo Server", "gsoc.mifos.community" - - Checkmark indicator for selected - -**Other Servers Section:** -- Section label: "OTHER SERVERS" -- Two outlined cards: - - Building icon, "Production Server", "demo.mifos.io" - - Wrench icon, "Sandbox Server", "sandbox.mifos.community" - -**Custom Server Section:** -- Section label: "CUSTOM SERVER" -- Input field: "https://" with placeholder -- 56dp height, 12dp radius - -**Primary Button:** -- "Connect", full width, gradient - ---- - -## Screen 8: Login Success Screen - -### Google Stitch Prompt - -Create a mobile success/celebration screen for a fintech app with Material Design 3: - -**App Context:** -Mifos Mobile - Celebration moment after successful login. - -**Screen Size:** 393 x 852 pixels - -**Center:** -- Large success animation, 160dp container -- Green checkmark (#00D09C) with confetti particles -- Confetti: multi-color small shapes bursting outward - -**Title:** -- "You're All Set!", 28sp, Bold, #1F2937 - -**Welcome Message:** -- "Welcome back, Maria! 👋", 16sp, #6B7280 - -**Progress Indicator:** -- Linear progress bar at bottom -- "Setting up your dashboard...", 12sp, #6B7280 -- Progress bar fills over 2.5 seconds - -**Animation Notes:** -- Checkmark draws in with stroke animation -- Confetti bursts from center -- Auto-navigates to home after progress completes - ---- - -## Component Prompts - -### Primary Button Component - -Create a Material Design 3 primary button for fintech app: -- Height: 56dp, Corner radius: 16dp -- Background: Linear gradient #667EEA → #764BA2 -- Text: 16sp, SemiBold, White, centered -- Shadow: 0 4dp 12dp rgba(102,126,234,0.3) -- Press state: scale to 0.98, reduce shadow -- Disabled: 50% opacity, no shadow - -### Input Field Component - -Create a Material Design 3 input field for fintech app: -- Height: 56dp, Corner radius: 12dp -- Border: 1dp #E5E7EB (default), 2dp #667EEA (focus) -- Left icon: 20dp, #9CA3AF (default), #667EEA (focus) -- Text: 16sp, #1F2937 -- Placeholder: 16sp, #9CA3AF -- Focus shadow: 0 0 8dp rgba(102,126,234,0.2) -- Error: border #FF4757, icon #FF4757 - -### OTP Input Component - -Create a Material Design 3 OTP input for fintech app: -- 6 boxes in a row, each 48dp x 56dp -- Gap: 12dp between boxes -- Border: 2dp #E5E7EB, radius: 8dp -- Filled: background #667EEA 10%, border #667EEA -- Focus: border #667EEA with glow -- Number: 24sp, Bold, centered - ---- - -## Export Instructions - -### Using Google Stitch - -1. Go to [stitch.withgoogle.com](https://stitch.withgoogle.com/) -2. Sign in with Google account -3. Create new project "Mifos Mobile - Auth" -4. For each screen: - - Copy the prompt above - - Paste into Stitch - - Generate design - - Adjust as needed -5. Export all screens to Figma - -### Export to Figma - -1. In Stitch, click "Export to Figma" -2. Select your Figma team/project -3. Organize in pages: - - Page 1: Splash - - Page 2: Welcome - - Page 3: Login Hub - - Page 4: OTP - - Page 5: Email Login - - Page 6: Biometric Setup - - Page 7: Server Selection - - Page 8: Success - -### After Export - -Update `features/auth/mockups/FIGMA_LINKS.md` with: -- Figma file URL -- Individual frame URLs for each screen diff --git a/claude-product-cycle/design-spec-layer/features/auth/mockups/PROMPTS_FIGMA.md b/claude-product-cycle/design-spec-layer/features/auth/mockups/PROMPTS_FIGMA.md deleted file mode 100644 index 66a1b5ff3..000000000 --- a/claude-product-cycle/design-spec-layer/features/auth/mockups/PROMPTS_FIGMA.md +++ /dev/null @@ -1,206 +0,0 @@ -# Auth - Figma First Draft Prompts - -> **Tool**: Figma First Draft (Shift+I in Figma) -> **Style**: Premium Fintech, Modern Banking App -> **Format**: Natural language prompts optimized for Figma AI - ---- - -## How to Use - -1. Open Figma → Create new design file -2. Press `Shift + I` or click "Actions" → "First Draft" -3. Copy each prompt below -4. Generate → Iterate → Refine - ---- - -## Screen 1: Splash Screen - -``` -Design a premium fintech app splash screen for "Mifos Mobile" banking app. - -Use a beautiful purple-blue gradient background going diagonally. Place a white minimalist logo in the center with a subtle glow effect. Below the logo, show "MIFOS" in white uppercase letters with wide letter spacing. Add a tagline "Your Financial Freedom" in lighter white below. - -At the bottom, show three small loading dots that would animate. Keep it clean, premium, and trustworthy like Revolut or Monzo splash screens. No navigation bars or buttons - just the brand moment. -``` - ---- - -## Screen 2: Welcome/Onboarding - -``` -Design a mobile onboarding welcome screen for a banking app. - -At the top right, add a "Skip" text link in purple. In the center, create space for a friendly illustration showing money management - cards, coins, or transfer arrows. - -Below the illustration, add a bold headline "Manage Your Money" and a subtitle explaining "Track spending, save smarter, and transfer money instantly—all in one secure app." - -Show three page indicator dots (first one active in purple). Add a large "Get Started" button with a purple gradient background. Below it, show "Already have an account? Sign In" with Sign In as a clickable link. - -At the very bottom, add a small trust badge showing "Bank-grade security • 256-bit encryption" with a lock icon. -``` - ---- - -## Screen 3: Login Hub - -``` -Design a modern login screen for a fintech app with multiple sign-in options. - -Show the Mifos logo at the top, followed by "Welcome Back" as the main heading and "Sign in to continue" as a subtitle. - -Create a phone number input field with a country code picker (showing a flag and +1). The input should have a clean outlined style. - -Add a prominent "Continue with Phone" button with purple gradient. - -Below, show a divider with "or" text. - -Then display two side-by-side option cards: one for "Use Biometric" with a face icon, and one for "Use Email" with an email icon. Both should be outlined cards. - -At the bottom, show server info "Server: gsoc.mifos.community" with a Change link, and a security badge about encryption. -``` - ---- - -## Screen 4: OTP Verification - -``` -Design an OTP code verification screen for a banking app. - -Add a back arrow at the top left. Show a phone icon with a checkmark in a circular purple gradient container. - -Display "Verify Your Phone" as the heading. Below it show "We sent a 6-digit code to" and the phone number "+1 (555) 123-4567" in bold. - -Create 6 individual square input boxes for the OTP code, arranged in a row with small gaps between them. Some boxes should show numbers to indicate the filled state. - -Show "Auto-reading SMS..." text in purple below the inputs. - -Add a resend section: "Didn't receive the code?" with a "Resend in 0:45" countdown timer. - -At the bottom, show "Code expires in 10 minutes" with a lock icon. -``` - ---- - -## Screen 5: Email/Password Login - -``` -Design an email and password login screen for a banking app. - -Add a back arrow and the Mifos logo at the top. Show "Sign in with Email" as the heading. - -Create two input fields: -1. Username or Email field with a user icon on the left -2. Password field with a lock icon on the left and an eye icon on the right to toggle visibility - -Add a "Forgot Password?" link aligned to the right below the password field. - -Include a "Sign In" button with purple gradient. - -Show a divider with "or" text. - -Add two alternative login options as outlined cards: "Use Biometric" and "Use Phone". - -At the bottom, show server information and a security badge. -``` - ---- - -## Screen 6: Biometric Setup - -``` -Design a biometric authentication setup screen for a banking app. - -Add a "Skip" link at the top right. - -In the center, show a large illustration of Face ID or fingerprint scanning - make it look modern with scanning lines and purple accent colors. - -Display "Enable Face ID" as the heading and explain "Use Face ID for quick and secure access to your Mifos account" as a centered paragraph below. - -Add a primary "Enable Face ID" button with purple gradient. - -Below it, add a "Maybe Later" text button in gray. - -At the bottom, show a helpful note: "You can enable this anytime in Settings" with an info icon. -``` - ---- - -## Screen 7: Server Selection - -``` -Design a server selection screen for a banking app that connects to different backend servers. - -Add a back arrow and "Select Server" as the title with "Choose your Mifos instance" as subtitle. - -Create three sections: - -RECOMMENDED section: -- A selected card with gradient border showing "Demo Server" and "gsoc.mifos.community" with a globe icon and checkmark - -OTHER SERVERS section: -- Card for "Production Server" at "demo.mifos.io" with a building icon -- Card for "Sandbox Server" at "sandbox.mifos.community" with a wrench icon - -CUSTOM SERVER section: -- An input field with "https://" placeholder for entering a custom URL - -Add a "Connect" button with purple gradient at the bottom. -``` - ---- - -## Screen 8: Login Success - -``` -Design a celebration/success screen shown after successful login to a banking app. - -In the center, show a large green checkmark icon with confetti particles bursting around it - make it feel celebratory and delightful. - -Display "You're All Set!" as a bold heading. - -Below, show a personalized welcome message "Welcome back, Maria!" with a wave emoji. - -At the bottom, add a progress bar that's filling up with text "Setting up your dashboard..." below it. This indicates the app is loading the home screen. - -Keep it joyful but professional - like a premium banking app celebrating a successful login. -``` - ---- - -## Component Prompts - -### Primary Button -``` -Design a primary action button for a fintech app. Make it 56 pixels tall with rounded corners (16px radius). Use a purple gradient background from #667EEA to #764BA2. White text, medium weight, centered. Add a subtle shadow for depth. Show default, pressed, and disabled states. -``` - -### Text Input Field -``` -Design a text input field for a banking app. 56 pixels tall with 12px rounded corners. Light gray border that turns purple when focused. Include a left icon area and right icon area (for things like visibility toggle). Show default, focused, filled, and error states. -``` - -### OTP Input -``` -Design a 6-digit OTP code input for a banking app. Create 6 individual square boxes arranged horizontally with small gaps. Each box should have rounded corners and a light border. When filled, the box should have a light purple background. Numbers should be large and bold. Show empty, focused, and filled states. -``` - ---- - -## Tips for Figma First Draft - -1. **Iterate**: First generation is a starting point - refine with follow-up prompts -2. **Be specific**: Add details about colors, spacing, and interactions -3. **Reference styles**: Mention "like Revolut" or "Monzo-style" for context -4. **Component mode**: Generate components separately, then assemble screens -5. **Variants**: Ask for multiple states (default, hover, pressed, disabled) - ---- - -## After Generation - -1. Review and adjust generated designs -2. Ensure consistency across all 8 screens -3. Create a component library from repeated elements -4. Export frames and update `FIGMA_LINKS.md` diff --git a/claude-product-cycle/design-spec-layer/features/auth/mockups/PROMPTS_STITCH.md b/claude-product-cycle/design-spec-layer/features/auth/mockups/PROMPTS_STITCH.md deleted file mode 100644 index 1e710a6ba..000000000 --- a/claude-product-cycle/design-spec-layer/features/auth/mockups/PROMPTS_STITCH.md +++ /dev/null @@ -1,266 +0,0 @@ -# Auth - Google Stitch Prompts - -> **Tool**: [Google Stitch](https://stitch.withgoogle.com) -> **Style**: Material Design 3, Premium Fintech -> **Format**: Copy each prompt block directly into Stitch - ---- - -## Design System Reference - -``` -Primary Gradient: #667EEA → #764BA2 -Success: #00D09C -Error: #FF4757 -Text Primary: #1F2937 -Text Secondary: #6B7280 -Text Muted: #9CA3AF -Border: #E5E7EB -Screen Size: 393 x 852 pixels (Android) -``` - ---- - -## Screen 1: Splash - -``` -Mobile splash screen, Material Design 3, fintech banking app, 393x852px - -Background: Full gradient 45deg from #667EEA to #764BA2 - -Center: -- White app logo icon, 72dp, subtle glow effect -- "MIFOS" text below, 24sp white, letter-spacing 8dp -- Tagline "Your Financial Freedom", 14sp, white 70% opacity - -Bottom: Three white loading dots, 8dp each, pulse animation - -Style: Premium, minimalist, no UI chrome -``` - ---- - -## Screen 2: Welcome/Onboarding - -``` -Mobile onboarding screen, Material Design 3, fintech app, 393x852px - -Top right: "Skip" link, 14sp, #667EEA - -Center: -- Illustration 240x240dp showing money, cards, transfers -- Title "Manage Your Money", 28sp bold, #1F2937 -- Subtitle "Track spending, save smarter, and transfer money instantly—all in one secure app", 16sp, #6B7280, centered - -Page indicators: 3 dots, active #667EEA filled, inactive #E5E7EB outlined - -Primary button: "Get Started", full width, 56dp height, 16dp radius, gradient #667EEA to #764BA2, white text, shadow - -Below button: "Already have an account? Sign In" with "Sign In" as #667EEA link - -Bottom: Lock icon + "Bank-grade security | 256-bit encryption", 12sp, #9CA3AF -``` - ---- - -## Screen 3: Login Hub - -``` -Mobile login screen, Material Design 3, fintech banking app, 393x852px - -Header: -- Mifos logo centered, 56dp, gradient colors -- "Welcome Back", 24sp bold, #1F2937 -- "Sign in to continue", 14sp, #6B7280 - -Phone input section: -- Country picker with flag + dial code dropdown -- Phone number input field -- Container 56dp height, 1dp #E5E7EB border, 12dp radius - -Primary button: "Continue with Phone", full width, gradient, disabled until valid input - -Divider: "or" with lines - -Two side-by-side cards below: -- Left: Face icon + "Use Biometric", outlined, 56dp, 12dp radius -- Right: Email icon + "Use Email", outlined, 56dp, 12dp radius - -Bottom: -- "Server: gsoc.mifos.community [Change]", small text -- Lock icon + "256-bit encryption | Your data is secure" -``` - ---- - -## Screen 4: OTP Verification - -``` -Mobile OTP verification screen, Material Design 3, fintech app, 393x852px - -Top: Back arrow button, 24dp, #1F2937 - -Center icon: Phone with checkmark, 80dp container, gradient background - -Title section: -- "Verify Your Phone", 24sp bold, #1F2937 -- "We sent a 6-digit code to", 14sp, #6B7280 -- "+1 (555) 123-4567", 14sp bold, #1F2937 - -OTP input: 6 individual boxes in row, each 48x56dp, 12dp gap, 2dp #E5E7EB border, 8dp radius -- Filled state: #667EEA 10% background, #667EEA border -- Numbers: 24sp bold centered - -Below OTP: "Auto-reading SMS..." with dots, 12sp, #667EEA - -Resend section: -- "Didn't receive the code?", 14sp, #6B7280 -- "Resend in 0:45" countdown or "Resend Code" link - -Bottom: Lock icon + "Code expires in 10 minutes", 12sp, #9CA3AF -``` - ---- - -## Screen 5: Email Login - -``` -Mobile email login screen, Material Design 3, fintech app, 393x852px - -Top: Back arrow + Mifos logo centered 48dp - -Title: "Sign in with Email", 24sp bold, #1F2937 - -Form fields: -1. Username/Email input - - Floating label "Username or Email", 12sp, #6B7280 - - User icon left, 56dp height, 1dp #E5E7EB border, 12dp radius - -2. Password input - - Floating label "Password" - - Lock icon left, eye toggle right - - Password dots shown - -"Forgot Password?" link, right-aligned, 14sp, #667EEA - -Primary button: "Sign In", full width, gradient - -Divider: "or" with lines - -Two option cards: "Use Biometric" and "Use Phone" - -Bottom: Server info + security badge -``` - ---- - -## Screen 6: Biometric Setup - -``` -Mobile biometric setup screen, Material Design 3, fintech app, 393x852px - -Top right: "Skip" link - -Center: -- Large face/fingerprint illustration, 200x200dp -- Scanning animation effect -- Primary gradient accent colors - -Title: "Enable Face ID", 24sp bold, #1F2937 - -Description: "Use Face ID for quick and secure access to your Mifos account", 16sp, #6B7280, centered, max 280dp width - -Primary button: "Enable Face ID", full width, gradient - -Secondary: "Maybe Later", text button, 14sp, #6B7280 - -Bottom: Info icon + "You can enable this anytime in Settings", 12sp, #9CA3AF -``` - ---- - -## Screen 7: Server Selection - -``` -Mobile server selection screen, Material Design 3, fintech app, 393x852px - -Top: Back button + "Select Server" title 24sp bold + "Choose your Mifos instance" subtitle 14sp #6B7280 - -Section "RECOMMENDED" (12sp label): -- Card with gradient border (selected): - - Globe icon, "Demo Server", "gsoc.mifos.community" - - Checkmark for selected state - -Section "OTHER SERVERS": -- Card: Building icon, "Production Server", "demo.mifos.io" -- Card: Wrench icon, "Sandbox Server", "sandbox.mifos.community" - -Section "CUSTOM SERVER": -- Input field with "https://" prefix, 56dp, 12dp radius - -Primary button: "Connect", full width, gradient -``` - ---- - -## Screen 8: Login Success - -``` -Mobile success celebration screen, Material Design 3, fintech app, 393x852px - -Center: -- Large success animation container, 160dp -- Green checkmark (#00D09C) with confetti particles -- Multi-color confetti bursting outward - -Title: "You're All Set!", 28sp bold, #1F2937 - -Welcome: "Welcome back, Maria!", 16sp, #6B7280 - -Bottom: -- Linear progress bar filling -- "Setting up your dashboard...", 12sp, #6B7280 -``` - ---- - -## Components (Generate Separately) - -### Primary Button -``` -Material Design 3 button component: -- 56dp height, 16dp corner radius -- Gradient background #667EEA to #764BA2 -- White text, 16sp semibold, centered -- Shadow: 0 4dp 12dp rgba(102,126,234,0.3) -- States: default, pressed (0.98 scale), disabled (50% opacity) -``` - -### Input Field -``` -Material Design 3 input field: -- 56dp height, 12dp corner radius -- Border: 1dp #E5E7EB default, 2dp #667EEA focus -- Left icon 20dp, #9CA3AF default, #667EEA focus -- Text 16sp #1F2937, placeholder #9CA3AF -- Error state: #FF4757 border and icon -``` - -### OTP Input -``` -Material Design 3 OTP input, 6 boxes: -- Each box 48x56dp, 12dp gap between -- Border 2dp #E5E7EB, 8dp radius -- Filled: #667EEA 10% background, #667EEA border -- Number: 24sp bold centered -``` - ---- - -## Quick Start - -1. Open [stitch.withgoogle.com](https://stitch.withgoogle.com) -2. Create project "Mifos Mobile - Auth" -3. Copy each prompt block above -4. Generate screen → Adjust → Next screen -5. Export all to Figma when done diff --git a/claude-product-cycle/design-spec-layer/features/auth/mockups/design-tokens.json b/claude-product-cycle/design-spec-layer/features/auth/mockups/design-tokens.json deleted file mode 100644 index 87a7a9ddf..000000000 --- a/claude-product-cycle/design-spec-layer/features/auth/mockups/design-tokens.json +++ /dev/null @@ -1,286 +0,0 @@ -{ - "feature": "auth", - "generated": "2026-01-03", - "tool": "google-stitch", - "version": "2.0", - "tokens": { - "colors": { - "primary": { - "gradient": { - "start": "#667EEA", - "end": "#764BA2", - "angle": 45 - }, - "solid": "#667EEA" - }, - "secondary": { - "gradient": { - "start": "#11998E", - "end": "#38EF7D" - } - }, - "surface": { - "light": "#FFFFFF", - "dark": "#0D1117" - }, - "background": { - "light": "#FFFFFF", - "dark": "#0D1117" - }, - "card": { - "light": "#FFFFFF", - "dark": "#21262D" - }, - "text": { - "primary": { - "light": "#1F2937", - "dark": "#F0F6FC" - }, - "secondary": { - "light": "#6B7280", - "dark": "#8B949E" - }, - "placeholder": { - "light": "#9CA3AF", - "dark": "#6E7681" - } - }, - "border": { - "default": { - "light": "#E5E7EB", - "dark": "#30363D" - }, - "focus": "#667EEA" - }, - "semantic": { - "success": "#00D09C", - "error": "#FF4757", - "warning": "#FFB800", - "info": "#667EEA" - } - }, - "typography": { - "fontFamily": "Inter, system-ui, sans-serif", - "display": { - "size": "36sp", - "weight": "800", - "lineHeight": "44dp" - }, - "headline": { - "large": { - "size": "28sp", - "weight": "700", - "lineHeight": "36dp" - }, - "medium": { - "size": "24sp", - "weight": "700", - "lineHeight": "32dp" - } - }, - "title": { - "large": { - "size": "20sp", - "weight": "600", - "lineHeight": "28dp" - }, - "medium": { - "size": "16sp", - "weight": "600", - "lineHeight": "24dp" - } - }, - "body": { - "large": { - "size": "16sp", - "weight": "400", - "lineHeight": "24dp" - }, - "medium": { - "size": "14sp", - "weight": "400", - "lineHeight": "20dp" - } - }, - "label": { - "large": { - "size": "14sp", - "weight": "500", - "lineHeight": "20dp" - }, - "medium": { - "size": "12sp", - "weight": "500", - "lineHeight": "16dp" - } - } - }, - "spacing": { - "xs": "4dp", - "sm": "8dp", - "md": "12dp", - "lg": "16dp", - "xl": "20dp", - "xxl": "24dp", - "xxxl": "32dp" - }, - "radius": { - "sm": "8dp", - "md": "12dp", - "lg": "16dp", - "xl": "24dp", - "full": "9999dp" - }, - "shadow": { - "button": { - "offsetY": "4dp", - "blur": "12dp", - "color": "rgba(102, 126, 234, 0.3)" - }, - "card": { - "offsetY": "2dp", - "blur": "8dp", - "color": "rgba(0, 0, 0, 0.08)" - }, - "focus": { - "blur": "8dp", - "color": "rgba(102, 126, 234, 0.2)" - } - } - }, - "screens": [ - { - "id": "splash", - "name": "Splash Screen", - "description": "Brand introduction with premium animation", - "components": ["logo", "loading-dots"] - }, - { - "id": "welcome", - "name": "Welcome/Onboarding Screen", - "description": "First-time user value propositions carousel", - "components": ["illustration", "page-indicators", "primary-button", "text-link", "trust-badge"] - }, - { - "id": "login-hub", - "name": "Login Hub Screen", - "description": "Multiple authentication options", - "components": ["logo", "phone-input", "country-picker", "primary-button", "divider", "auth-card", "server-info", "trust-badge"] - }, - { - "id": "otp-verify", - "name": "OTP Verification Screen", - "description": "6-digit code verification", - "components": ["back-button", "icon-header", "otp-input", "countdown-timer", "text-link"] - }, - { - "id": "email-login", - "name": "Email/Password Login Screen", - "description": "Alternative username/password login", - "components": ["back-button", "logo", "text-input", "password-input", "primary-button", "auth-card"] - }, - { - "id": "biometric-setup", - "name": "Biometric Setup Screen", - "description": "Face ID/Fingerprint enrollment", - "components": ["skip-link", "illustration", "primary-button", "text-button", "info-badge"] - }, - { - "id": "server-selection", - "name": "Server Selection Screen", - "description": "Instance switching for deployments", - "components": ["back-button", "server-card", "text-input", "primary-button"] - }, - { - "id": "success", - "name": "Login Success Screen", - "description": "Celebration moment before home", - "components": ["success-animation", "progress-bar"] - } - ], - "components": [ - { - "id": "primary-button", - "name": "Primary Button", - "specs": { - "height": "56dp", - "radius": "16dp", - "background": "gradient", - "textSize": "16sp", - "textWeight": "600", - "textColor": "#FFFFFF", - "shadow": "button" - } - }, - { - "id": "text-input", - "name": "Text Input Field", - "specs": { - "height": "56dp", - "radius": "12dp", - "border": "1dp", - "borderColor": "#E5E7EB", - "focusBorder": "2dp #667EEA", - "iconSize": "20dp", - "textSize": "16sp" - } - }, - { - "id": "otp-input", - "name": "OTP Input Box", - "specs": { - "width": "48dp", - "height": "56dp", - "gap": "12dp", - "radius": "8dp", - "border": "2dp", - "textSize": "24sp", - "textWeight": "700" - } - }, - { - "id": "auth-card", - "name": "Authentication Option Card", - "specs": { - "height": "56dp", - "radius": "12dp", - "border": "1dp #E5E7EB", - "iconSize": "24dp", - "textSize": "14sp" - } - }, - { - "id": "trust-badge", - "name": "Trust/Security Badge", - "specs": { - "textSize": "12sp", - "textColor": "#9CA3AF", - "iconSize": "14dp" - } - } - ], - "animations": { - "pageTransition": { - "type": "slide", - "duration": "300ms", - "easing": "FastOutSlowIn" - }, - "buttonPress": { - "scale": "0.98", - "duration": "100ms" - }, - "inputFocus": { - "duration": "200ms", - "easing": "ease" - }, - "successCelebration": { - "checkmarkDraw": "300ms", - "confettiBurst": "600ms", - "haptic": "success" - }, - "errorShake": { - "translateX": "[-10, 10, -5, 5, 0]", - "duration": "300ms" - } - } -} diff --git a/claude-product-cycle/design-spec-layer/features/auth/mockups/dummy/01-login-screen.png b/claude-product-cycle/design-spec-layer/features/auth/mockups/dummy/01-login-screen.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/auth/mockups/dummy/02-registration-screen.png b/claude-product-cycle/design-spec-layer/features/auth/mockups/dummy/02-registration-screen.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/auth/mockups/dummy/03-forgot-password.png b/claude-product-cycle/design-spec-layer/features/auth/mockups/dummy/03-forgot-password.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/auth/mockups/dummy/04-verification-code.png b/claude-product-cycle/design-spec-layer/features/auth/mockups/dummy/04-verification-code.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/auth/mockups/dummy/05-reset-password.png b/claude-product-cycle/design-spec-layer/features/auth/mockups/dummy/05-reset-password.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/auth/mockups/dummy/06-biometric-prompt.png b/claude-product-cycle/design-spec-layer/features/auth/mockups/dummy/06-biometric-prompt.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/beneficiary/API.md b/claude-product-cycle/design-spec-layer/features/beneficiary/API.md deleted file mode 100644 index 738b4b3ff..000000000 --- a/claude-product-cycle/design-spec-layer/features/beneficiary/API.md +++ /dev/null @@ -1,585 +0,0 @@ -# Beneficiary - API Reference - -> **Base URL**: `https://tt.mifos.community/fineract-provider/api/v1/self/` -> **Authentication**: Basic Auth with `Fineract-Platform-TenantId` header -> **Last Updated**: 2025-12-29 - ---- - -## Authentication Headers - -All endpoints require: -``` -Headers: - Authorization: Basic {base64EncodedAuthenticationKey} - Fineract-Platform-TenantId: {tenantId} - Content-Type: application/json -``` - ---- - -## 1. Get Beneficiary List - -### GET /self/beneficiaries/tpt - -**Purpose**: Fetch all third-party transfer beneficiaries for the authenticated user - -**Request**: -``` -GET /self/beneficiaries/tpt -``` - -**Response**: -```json -[ - { - "id": 5001, - "name": "John Doe", - "officeName": "Head Office", - "clientName": "John Doe", - "accountType": { - "id": 2, - "code": "accountType.savings", - "value": "Savings Account" - }, - "accountNumber": "SA-0001234567", - "transferLimit": 10000.00 - }, - { - "id": 5002, - "name": "Jane Smith", - "officeName": "Branch Office", - "clientName": "Jane Smith", - "accountType": { - "id": 1, - "code": "accountType.loan", - "value": "Loan Account" - }, - "accountNumber": "LA-0009876543", - "transferLimit": 5000.00 - } -] -``` - -**Kotlin DTO**: -```kotlin -@Serializable -@Parcelize -data class Beneficiary( - val id: Long? = null, - val name: String? = null, - val officeName: String? = null, - val clientName: String? = null, - val accountType: AccountType? = null, - val accountNumber: String? = null, - val transferLimit: Double? = null, -) : Parcelable -``` - -**Status**: Implemented in `BeneficiaryService.beneficiaryList()` - ---- - -## 2. Get Beneficiary Template - -### GET /self/beneficiaries/tpt/template - -**Purpose**: Fetch account type options for beneficiary creation form - -**Request**: -``` -GET /self/beneficiaries/tpt/template -``` - -**Response**: -```json -{ - "accountTypeOptions": [ - { - "id": 0, - "code": "accountType.share", - "value": "Share Account" - }, - { - "id": 1, - "code": "accountType.loan", - "value": "Loan Account" - }, - { - "id": 2, - "code": "accountType.savings", - "value": "Savings Account" - } - ] -} -``` - -**Kotlin DTO**: -```kotlin -@Serializable -@Parcelize -data class BeneficiaryTemplate( - val accountTypeOptions: List? = null, -) : Parcelable - -@Serializable -@Parcelize -data class AccountTypeOption( - val id: Int? = null, - val code: String? = null, - val value: String? = null, -) : Parcelable -``` - -**Status**: Implemented in `BeneficiaryService.beneficiaryTemplate()` - ---- - -## 3. Create Beneficiary - -### POST /self/beneficiaries/tpt - -**Purpose**: Create a new third-party transfer beneficiary - -**Request**: -```json -POST /self/beneficiaries/tpt - -{ - "locale": "en", - "name": "John Doe", - "accountNumber": "SA-0001234567", - "accountType": 2, - "transferLimit": 10000, - "officeName": "Head Office" -} -``` - -**Request Payload DTO**: -```kotlin -@Serializable -@Parcelize -data class BeneficiaryPayload( - val locale: String? = null, - val name: String? = null, - val accountNumber: String? = null, - val accountType: Int? = 0, - val transferLimit: Int? = 0, - val officeName: String? = null, -) : Parcelable -``` - -**Request Fields**: -| Field | Type | Required | Description | -|-------|------|----------|-------------| -| locale | String | Yes | Locale for the request (e.g., "en") | -| name | String | Yes | Beneficiary's display name | -| accountNumber | String | Yes | Target account number | -| accountType | Int | Yes | Account type ID (0=Share, 1=Loan, 2=Savings) | -| transferLimit | Int | Yes | Maximum transfer amount allowed | -| officeName | String | Yes | Office name where the account is held | - -**Response (Success)**: -```json -{ - "resourceId": 5003 -} -``` - -**Response (Error)**: -```json -{ - "developerMessage": "The account number does not exist", - "httpStatusCode": "400", - "defaultUserMessage": "Account not found", - "userMessageGlobalisationCode": "error.msg.beneficiary.account.not.found", - "errors": [] -} -``` - -**Status**: Implemented in `BeneficiaryService.createBeneficiary()` - ---- - -## 4. Update Beneficiary - -### PUT /self/beneficiaries/tpt/{beneficiaryId} - -**Purpose**: Update an existing beneficiary's name and transfer limit - -**Request**: -```json -PUT /self/beneficiaries/tpt/5001 - -{ - "name": "John Doe Updated", - "transferLimit": 15000 -} -``` - -**Request Payload DTO**: -```kotlin -@Serializable -data class BeneficiaryUpdatePayload( - val name: String? = null, - val transferLimit: Int = 0, -) -``` - -**Request Fields**: -| Field | Type | Required | Description | -|-------|------|----------|-------------| -| name | String | Yes | Updated beneficiary name | -| transferLimit | Int | Yes | Updated transfer limit | - -**Note**: Account number, account type, and office name cannot be updated. Only name and transfer limit can be modified. - -**Response (Success)**: -```json -{ - "resourceId": 5001, - "changes": { - "name": "John Doe Updated", - "transferLimit": 15000 - } -} -``` - -**Response (Error)**: -```json -{ - "developerMessage": "Beneficiary not found with id: 9999", - "httpStatusCode": "404", - "defaultUserMessage": "Beneficiary not found", - "userMessageGlobalisationCode": "error.msg.beneficiary.id.invalid", - "errors": [] -} -``` - -**Status**: Implemented in `BeneficiaryService.updateBeneficiary()` - ---- - -## 5. Delete Beneficiary - -### DELETE /self/beneficiaries/tpt/{beneficiaryId} - -**Purpose**: Delete an existing beneficiary - -**Request**: -``` -DELETE /self/beneficiaries/tpt/5001 -``` - -**Response (Success)**: -```json -{ - "resourceId": 5001 -} -``` - -**Response (Error)**: -```json -{ - "developerMessage": "Beneficiary not found with id: 9999", - "httpStatusCode": "404", - "defaultUserMessage": "Beneficiary not found", - "userMessageGlobalisationCode": "error.msg.beneficiary.id.invalid", - "errors": [] -} -``` - -**Status**: Implemented in `BeneficiaryService.deleteBeneficiary()` - ---- - -## Kotlin Service Interface - -```kotlin -interface BeneficiaryService { - @GET(ApiEndPoints.BENEFICIARIES + "/tpt") - fun beneficiaryList(): Flow> - - @GET(ApiEndPoints.BENEFICIARIES + "/tpt/template") - fun beneficiaryTemplate(): Flow - - @POST(ApiEndPoints.BENEFICIARIES + "/tpt") - suspend fun createBeneficiary(@Body beneficiaryPayload: BeneficiaryPayload?): HttpResponse - - @PUT(ApiEndPoints.BENEFICIARIES + "/tpt/{beneficiaryId}") - suspend fun updateBeneficiary( - @Path("beneficiaryId") beneficiaryId: Long, - @Body payload: BeneficiaryUpdatePayload?, - ): HttpResponse - - @DELETE(ApiEndPoints.BENEFICIARIES + "/tpt/{beneficiaryId}") - suspend fun deleteBeneficiary(@Path("beneficiaryId") beneficiaryId: Long): HttpResponse -} -``` - ---- - -## Kotlin Repository Interface - -```kotlin -interface BeneficiaryRepository { - - fun beneficiaryTemplate(): Flow> - - suspend fun createBeneficiary(beneficiaryPayload: BeneficiaryPayload?): DataState - - suspend fun updateBeneficiary( - beneficiaryId: Long?, - payload: BeneficiaryUpdatePayload?, - ): DataState - - suspend fun deleteBeneficiary(beneficiaryId: Long?): DataState - - fun beneficiaryList(): Flow>> -} -``` - ---- - -## Kotlin Repository Implementation - -```kotlin -class BeneficiaryRepositoryImp( - private val dataManager: DataManager, - private val ioDispatcher: CoroutineDispatcher, -) : BeneficiaryRepository { - - override fun beneficiaryTemplate(): Flow> = flow { - try { - dataManager.beneficiaryApi.beneficiaryTemplate() - .collect { response -> - emit(DataState.Success(response)) - } - } catch (exception: Exception) { - emit(DataState.Error(exception)) - } - }.flowOn(ioDispatcher) - - override suspend fun createBeneficiary(beneficiaryPayload: BeneficiaryPayload?): DataState { - return withContext(ioDispatcher) { - try { - val response = dataManager.beneficiaryApi.createBeneficiary(beneficiaryPayload) - DataState.Success(response.bodyAsText()) - } catch (e: ClientRequestException) { - val errorMessage = extractErrorMessage(e.response) - DataState.Error(Exception(errorMessage), null) - } catch (e: IOException) { - DataState.Error(Exception("Network error: ${e.message ?: "Please check your connection"}"), null) - } catch (e: ServerResponseException) { - DataState.Error(Exception("Server error: ${e.message}"), null) - } - } - } - - override suspend fun updateBeneficiary( - beneficiaryId: Long?, - payload: BeneficiaryUpdatePayload?, - ): DataState { - return withContext(ioDispatcher) { - try { - val response = dataManager.beneficiaryApi.updateBeneficiary(beneficiaryId!!, payload) - DataState.Success(response.bodyAsText()) - } catch (e: ClientRequestException) { - val errorMessage = extractErrorMessage(e.response) - DataState.Error(Exception(errorMessage), null) - } catch (e: IOException) { - DataState.Error(Exception("Network error: ${e.message ?: "Please check your connection"}"), null) - } catch (e: ServerResponseException) { - DataState.Error(Exception("Server error: ${e.message}"), null) - } - } - } - - override suspend fun deleteBeneficiary(beneficiaryId: Long?): DataState { - return withContext(ioDispatcher) { - try { - val response = dataManager.beneficiaryApi.deleteBeneficiary(beneficiaryId!!) - DataState.Success(response.bodyAsText()) - } catch (e: ClientRequestException) { - val errorMessage = extractErrorMessage(e.response) - DataState.Error(Exception(errorMessage), null) - } catch (e: IOException) { - DataState.Error(Exception("Network error: ${e.message ?: "Please check your connection"}"), null) - } catch (e: ServerResponseException) { - DataState.Error(Exception("Server error: ${e.message}"), null) - } - } - } - - override fun beneficiaryList(): Flow>> = flow { - try { - dataManager.beneficiaryApi.beneficiaryList() - .collect { response -> - emit(DataState.Success(response)) - } - } catch (e: Exception) { - emit(DataState.Error(e, null)) - } - }.flowOn(ioDispatcher) -} -``` - ---- - -## API Summary Table - -| Endpoint | Method | Service Method | Repository Method | Priority | -|----------|--------|----------------|-------------------|----------| -| /self/beneficiaries/tpt | GET | beneficiaryList() | beneficiaryList() | P0 | -| /self/beneficiaries/tpt/template | GET | beneficiaryTemplate() | beneficiaryTemplate() | P0 | -| /self/beneficiaries/tpt | POST | createBeneficiary() | createBeneficiary() | P0 | -| /self/beneficiaries/tpt/{id} | PUT | updateBeneficiary() | updateBeneficiary() | P0 | -| /self/beneficiaries/tpt/{id} | DELETE | deleteBeneficiary() | deleteBeneficiary() | P0 | - ---- - -## Account Type Mapping - -| ID | Code | Value | Description | -|----|------|-------|-------------| -| 0 | accountType.share | Share Account | Share/Equity account | -| 1 | accountType.loan | Loan Account | Loan disbursement account | -| 2 | accountType.savings | Savings Account | Regular savings account | - ---- - -## Error Responses - -| Status Code | Error | Description | User Message | -|-------------|-------|-------------|--------------| -| 400 | Bad Request | Invalid request payload | "Please check your input" | -| 401 | Unauthorized | Invalid/expired token | "Please login again" | -| 403 | Forbidden | Insufficient permissions | "Access denied" | -| 404 | Not Found | Beneficiary doesn't exist | "Beneficiary not found" | -| 409 | Conflict | Duplicate beneficiary | "Beneficiary already exists" | -| 500 | Server Error | Internal server error | "Service unavailable" | - -**Error Response Format**: -```json -{ - "developerMessage": "Detailed error for debugging", - "httpStatusCode": "400", - "defaultUserMessage": "User-friendly error message", - "userMessageGlobalisationCode": "error.msg.code", - "errors": [ - { - "developerMessage": "Field-specific error", - "defaultUserMessage": "Invalid account number format", - "userMessageGlobalisationCode": "validation.msg.accountNumber.invalid", - "parameterName": "accountNumber" - } - ] -} -``` - ---- - -## Data Models Summary - -### Beneficiary - -```kotlin -@Serializable -@Parcelize -data class Beneficiary( - val id: Long? = null, - val name: String? = null, - val officeName: String? = null, - val clientName: String? = null, - val accountType: AccountType? = null, - val accountNumber: String? = null, - val transferLimit: Double? = null, -) : Parcelable -``` - -### BeneficiaryPayload (Create) - -```kotlin -@Serializable -@Parcelize -data class BeneficiaryPayload( - val locale: String? = null, - val name: String? = null, - val accountNumber: String? = null, - val accountType: Int? = 0, - val transferLimit: Int? = 0, - val officeName: String? = null, -) : Parcelable -``` - -### BeneficiaryUpdatePayload (Update) - -```kotlin -@Serializable -data class BeneficiaryUpdatePayload( - val name: String? = null, - val transferLimit: Int = 0, -) -``` - -### BeneficiaryTemplate - -```kotlin -@Serializable -@Parcelize -data class BeneficiaryTemplate( - val accountTypeOptions: List? = null, -) : Parcelable -``` - -### AccountTypeOption - -```kotlin -@Serializable -@Parcelize -data class AccountTypeOption( - val id: Int? = null, - val code: String? = null, - val value: String? = null, -) : Parcelable -``` - -### AccountType - -```kotlin -@Serializable -@Parcelize -data class AccountType( - val id: Int? = null, - val code: String? = null, - val value: String? = null, -) : Parcelable -``` - -### BeneficiaryDetail (Helper) - -```kotlin -class BeneficiaryDetail( - val accountNumber: String?, - val beneficiaryName: String?, -) -``` - ---- - -## Related Endpoints - -These endpoints may be used in conjunction with beneficiary management: - -| Endpoint | Method | Purpose | -|----------|--------|---------| -| /self/accounttransfers/template?type=tpt | GET | Get transfer template with beneficiary options | -| /self/accounttransfers?type=tpt | POST | Execute transfer to beneficiary | - ---- - -## Changelog - -| Date | Change | -|------|--------| -| 2025-12-29 | Initial production-level API documentation based on implementation | diff --git a/claude-product-cycle/design-spec-layer/features/beneficiary/MOCKUP.md b/claude-product-cycle/design-spec-layer/features/beneficiary/MOCKUP.md deleted file mode 100644 index 0eb40e8cc..000000000 --- a/claude-product-cycle/design-spec-layer/features/beneficiary/MOCKUP.md +++ /dev/null @@ -1,1569 +0,0 @@ -# Beneficiary - UI Mockups v2.0 - -> **Design Style**: Trusted Contacts Hub (Venmo/Zelle/Revolut-inspired) -> **Primary Gradient**: #667EEA → #764BA2 (Purple-Blue) -> **Last Updated**: 2025-12-30 -> **Status**: Production Design v2.0 - ---- - -## Design Philosophy - -The Beneficiary feature transforms from a simple contact list into a **Trusted Contacts Hub** - an intelligent relationship-based payment network. Inspired by Venmo's social payments, Zelle's trusted contacts, and Revolut's smart suggestions, this redesign emphasizes: - -1. **Trust & Security** - Visual trust indicators and fraud protection -2. **Smart Suggestions** - AI-powered recipient recommendations -3. **Relationship Context** - Categorization and transfer history per contact -4. **Quick Actions** - One-tap transfers from any contact view -5. **Social Elements** - Relationship tags, favorites, and groups - ---- - -## Navigation Context - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ BENEFICIARY NAVIGATION FLOW v2.0 │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ -│ │ Contacts │ ──▶ │ Contact │ ──▶ │ Quick │ │ -│ │ Hub │ │ Detail │ │ Transfer │ │ -│ └──────────────┘ └──────────────┘ └──────────────┘ │ -│ │ │ │ │ -│ │ ▼ ▼ │ -│ │ ┌──────────────┐ ┌──────────────┐ │ -│ │ │ Transfer │ │ Success │ │ -│ │ │ History │ │ Screen │ │ -│ │ └──────────────┘ └──────────────┘ │ -│ ▼ │ -│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ -│ │ Add New │ ──▶ │ Verify │ ──▶ │ Success/ │ │ -│ │ Contact │ │ Contact │ │ Added │ │ -│ └──────────────┘ └──────────────┘ └──────────────┘ │ -│ │ │ -│ ├──▶ QR Scan │ -│ ├──▶ Phone Contacts Import │ -│ └──▶ Manual Entry │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Screen 1: Trusted Contacts Hub (Main) - -``` -┌─────────────────────────────────────────────────────────────────┐ -│░░░░░░░░░░░░░░░░░░░ STATUS BAR ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ← Trusted Contacts ⋮ + 📷 │ -│ │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ 🔍 Search contacts... 🎤 │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ⭐ FAVORITES ░░│ │ -│ │░░ ░░│ │ -│ │░░ ┌───────┐ ┌───────┐ ┌───────┐ ┌───────┐ ┌──┐ ░░│ │ -│ │░░ │░░░░░░░│ │░░░░░░░│ │░░░░░░░│ │░░░░░░░│ │+ │ ░░│ │ -│ │░░ │ 👤 │ │ 👤 │ │ 👤 │ │ 👤 │ │ │ ░░│ │ -│ │░░ │ ⭐JD │ │ ⭐MS │ │ ⭐AK │ │ ⭐PL │ │Add│ ░░│ │ -│ │░░ └───────┘ └───────┘ └───────┘ └───────┘ └──┘ ░░│ │ -│ │░░ John Maria Alex Paul ░░│ │ -│ │░░ $2.4k $1.8k $980 $450 ░░│ │ -│ │░░ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ 💡 Suggested See All ▶│ │ -│ │ │ │ -│ │ ┌─────────────────────────────────────────────────────┐│ │ -│ │ │ ┌────┐ ││ │ -│ │ │ │ RK │ Raj Kumar ┌────────────────┐ ││ │ -│ │ │ └────┘ Sent 3x this month │░░░ Send $50 ░░░│ ││ │ -│ │ │ Monthly rent └────────────────┘ ││ │ -│ │ └─────────────────────────────────────────────────────┘│ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ Filter: ┌───────┐┌────────┐┌────────┐┌─────────────┐ │ │ -│ │ │ All ✓ ││ Family ││Business││ 🏦 Account │ │ │ -│ │ └───────┘└────────┘└────────┘└─────────────┘ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ All Contacts (12) │ -│ │ -│ ── A ──────────────────────────────────────────────────── │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ ┌──────┐ │ │ -│ │ │░░░░░░│ Alex Kumar ┌─────────┐ │ │ -│ │ │ 🛡️AK │ ****5678 • Savings │ Send 💸 │ │ │ -│ │ │░░░░░░│ 🏷️ Family ✓ Trusted └─────────┘ │ │ -│ │ └──────┘ Last: $250 • 3 days ago │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ── J ──────────────────────────────────────────────────── │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ ┌──────┐ │ │ -│ │ │░░░░░░│ John Doe ┌─────────┐ │ │ -│ │ │ 🛡️JD │ ****4567 • Savings │ Send 💸 │ │ │ -│ │ │░░░░░░│ 🏷️ Business ✓ Trusted └─────────┘ │ │ -│ │ └──────┘ Last: $1,500 • 1 week ago │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ ┌──────┐ │ │ -│ │ │░░░░░░│ Jane Smith ┌─────────┐ │ │ -│ │ │ ⏳JS │ ****6543 • Loan │ Send 💸 │ │ │ -│ │ │░░░░░░│ 🏷️ Friend ⏳ Pending └─────────┘ │ │ -│ │ └──────┘ New contact │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌───────────┐ │ -│ │░░░░░░░░░░░│ │ -│ │░░ + Add ░│ │ -│ │░░░░░░░░░░░│ │ -│ └───────────┘ │ -│ │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ⌂ ☰ 💸 👤 │ -│ Home Accounts Transfer Profile │ -│ │ -└─────────────────────────────────────────────────────────────────┘ - -Legend: -░░░ = Gradient elements (#667EEA → #764BA2) -🛡️ = Trusted/Verified badge (green ring) -⏳ = Pending verification (amber ring) -⭐ = Favorite indicator -$ amount = Total transferred to this contact -Quick Send = One-tap send button on each card -``` - ---- - -## Screen 2: Contact Detail (Enhanced) - -``` -┌─────────────────────────────────────────────────────────────────┐ -│░░░░░░░░░░░░░░░░░░░ STATUS BAR ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ← Contact ⭐ ✏️ ⋮ │ -│ │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ░░│ │ -│ │░░ ┌─────────────┐ ░░│ │ -│ │░░ │ │ ░░│ │ -│ │░░ │ 🛡️ │ ░░│ │ -│ │░░ │ JD │ ░░│ │ -│ │░░ │ │ ░░│ │ -│ │░░ └─────────────┘ ░░│ │ -│ │░░ ░░│ │ -│ │░░ John Doe ░░│ │ -│ │░░ ****4567 • Savings ░░│ │ -│ │░░ ░░│ │ -│ │░░ ┌────────────────────────────────────┐ ░░│ │ -│ │░░ │ ✓ Trusted Contact │ ░░│ │ -│ │░░ │ 24 transfers • Since Mar 2024 │ ░░│ │ -│ │░░ └────────────────────────────────────┘ ░░│ │ -│ │░░ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 💸 Quick Actions │ │ -│ │ │ │ -│ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │ -│ │ │░░░░░░░░░░░░░│ │ │ │ │ │ │ -│ │ │░░ Send ░░│ │ Schedule │ │ Request │ │ │ -│ │ │░░ Money ░░│ │ Payment │ │ Money │ │ │ -│ │ │░░░░░░░░░░░░░│ │ │ │ │ │ │ -│ │ └─────────────┘ └─────────────┘ └─────────────┘ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 📊 Transfer Summary │ │ -│ │ │ │ -│ │ ┌────────────────────────────────────────────────┐ │ │ -│ │ │ │ │ │ -│ │ │ Total Sent Total Received │ │ │ -│ │ │ $12,450 $3,200 │ │ │ -│ │ │ ───▓▓▓▓▓▓▓▓▓▓▓▓───────░░░░░░─── │ │ │ -│ │ │ 80% 20% │ │ │ -│ │ │ │ │ │ -│ │ │ Average Transfer: $518 │ │ │ -│ │ │ Most Common: Monthly payment │ │ │ -│ │ │ │ │ │ -│ │ └────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 🕐 Recent Activity See All ▶ │ │ -│ │ │ │ -│ │ ┌────────────────────────────────────────────────┐ │ │ -│ │ │ ↗️ Sent $500 3 days ago │ │ │ -│ │ │ Monthly rent payment │ │ │ -│ │ ├────────────────────────────────────────────────┤ │ │ -│ │ │ ↗️ Sent $250 1 week ago │ │ │ -│ │ │ Utilities split │ │ │ -│ │ ├────────────────────────────────────────────────┤ │ │ -│ │ │ ↙️ Received $100 2 weeks ago │ │ │ -│ │ │ Dinner reimbursement │ │ │ -│ │ └────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 📋 Account Information │ │ -│ │ │ │ -│ │ Account Number SA-0001234567 📋 Copy │ │ -│ │ Account Type Savings Account │ │ -│ │ Office Head Office │ │ -│ │ Transfer Limit $10,000 per transaction │ │ -│ │ Relationship 🏷️ Business Partner │ │ -│ │ Added On March 15, 2024 │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ 🔒 256-bit encryption • Verified contact │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────────────────────────────┘ - -Legend: -🛡️ = Verified badge with green glow ring -⭐ = Toggle favorite (tap to add/remove) -↗️ = Sent (red/expense color) -↙️ = Received (green/income color) -▓▓ = Sent percentage visualization -░░ = Received percentage visualization -``` - ---- - -## Screen 3: Quick Transfer from Contact - -``` -┌─────────────────────────────────────────────────────────────────┐ -│░░░░░░░░░░░░░░░░░░░ STATUS BAR ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ← Send to John │ -│ │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌──────┐ │ │ -│ │ │ 🛡️JD │ John Doe │ │ -│ │ └──────┘ ****4567 • Savings │ │ -│ │ ✓ Trusted Contact │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ $ 0.00 │ │ -│ │ ═══════ │ │ -│ │ │ │ -│ │ Available: $5,420.00 in Savings │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 💡 Quick Amounts (based on history) │ │ -│ │ │ │ -│ │ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ │ -│ │ │ $250 │ │ $500 │ │ $750 │ │ $1,000 │ │ │ -│ │ │ Common │ │ Usual💫 │ │ │ │ │ │ │ -│ │ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 📝 Add a note (optional) │ │ -│ │ ┌─────────────────────────────────────────────────┐ │ │ -│ │ │ What's this for? │ │ │ -│ │ └─────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ Recent notes with John: │ │ -│ │ ┌───────────────────┐ ┌───────────────────┐ │ │ -│ │ │ Monthly rent │ │ Utilities split │ │ │ -│ │ └───────────────────┘ └───────────────────┘ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌─────┬─────┬─────┐ │ │ -│ │ │ 1 │ 2 │ 3 │ │ │ -│ │ ├─────┼─────┼─────┤ │ │ -│ │ │ 4 │ 5 │ 6 │ │ │ -│ │ ├─────┼─────┼─────┤ │ │ -│ │ │ 7 │ 8 │ 9 │ │ │ -│ │ ├─────┼─────┼─────┤ │ │ -│ │ │ . │ 0 │ ⌫ │ │ │ -│ │ └─────┴─────┴─────┘ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ░░│ │ -│ │░░ Review Transfer → ░░│ │ -│ │░░ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────────────────────────────┘ - -Legend: -💫 = Most frequently sent amount (AI suggestion) -Quick Amounts = Based on transfer history with this contact -Recent notes = Re-use previous payment notes -``` - ---- - -## Screen 4: Add New Contact - Smart Flow - -``` -┌─────────────────────────────────────────────────────────────────┐ -│░░░░░░░░░░░░░░░░░░░ STATUS BAR ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ← Add Trusted Contact │ -│ │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ░░│ │ -│ │░░ 👥 Add a Trusted Contact ░░│ │ -│ │░░ ░░│ │ -│ │░░ Choose how you'd like to add a new contact ░░│ │ -│ │░░ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌─────────────────────────────────────────────────┐ │ │ -│ │ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ │ -│ │ │░░ ░░│ │ │ -│ │ │░░ 📷 Scan QR Code ★ Fast ░░│ │ │ -│ │ │░░ Instantly add by scanning their QR ░░│ │ │ -│ │ │░░ ░░│ │ │ -│ │ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ │ -│ │ └─────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ ┌─────────────────────────────────────────────────┐ │ │ -│ │ │ │ │ │ -│ │ │ 📱 From Phone Contacts │ │ │ -│ │ │ Import from your existing contacts │ │ │ -│ │ │ │ │ │ -│ │ └─────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ ┌─────────────────────────────────────────────────┐ │ │ -│ │ │ │ │ │ -│ │ │ ✏️ Enter Manually │ │ │ -│ │ │ Type account details directly │ │ │ -│ │ │ │ │ │ -│ │ └─────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ ┌─────────────────────────────────────────────────┐ │ │ -│ │ │ │ │ │ -│ │ │ 🔗 Share Link │ │ │ -│ │ │ Get your link to share with contacts │ │ │ -│ │ │ │ │ │ -│ │ └─────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 💡 Tip: QR scanning is the fastest and most secure │ │ -│ │ way to add contacts with zero typing errors │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ 🔒 All contacts are verified before first transfer │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────────────────────────────┘ - -Legend: -★ Fast = Recommended option badge -░░░ = Primary gradient (recommended action) -``` - ---- - -## Screen 5: Manual Entry Flow - Step 1 - -``` -┌─────────────────────────────────────────────────────────────────┐ -│░░░░░░░░░░░░░░░░░░░ STATUS BAR ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ← Add Contact │ -│ │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ●━━━━━━━━━━━━━○━━━━━━━━━━━━━○━━━━━━━━━━━━━○ │ │ -│ │ Account Office Details Review │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ░░│ │ -│ │░░ 🏦 Account Information ░░│ │ -│ │░░ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ Account Number * │ │ -│ │ ┌─────────────────────────────────────────────────┐ │ │ -│ │ │ SA- 📋 │ │ │ -│ │ └─────────────────────────────────────────────────┘ │ │ -│ │ Enter the complete account number │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ Account Type * │ │ -│ │ │ │ -│ │ ┌─────────────────────────────────────────────────┐ │ │ -│ │ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ │ -│ │ │░░ 💵 ░░│ │ │ -│ │ │░░ Savings Account ░░│ │ │ -│ │ │░░ Most common for transfers ░░│ │ │ -│ │ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ │ -│ │ └─────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ ┌─────────────────────────────────────────────────┐ │ │ -│ │ │ │ │ │ -│ │ │ 💳 Loan Account │ │ │ -│ │ │ For loan repayments │ │ │ -│ │ │ │ │ │ -│ │ └─────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ ┌─────────────────────────────────────────────────┐ │ │ -│ │ │ │ │ │ -│ │ │ 📊 Share Account │ │ │ -│ │ │ For share purchases │ │ │ -│ │ │ │ │ │ -│ │ └─────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ░░│ │ -│ │░░ Continue → ░░│ │ -│ │░░ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────────────────────────────┘ - -Legend: -● = Current step (primary gradient) -○ = Pending step (gray) -Selected option has gradient border -``` - ---- - -## Screen 6: Manual Entry Flow - Step 2 (Office) - -``` -┌─────────────────────────────────────────────────────────────────┐ -│░░░░░░░░░░░░░░░░░░░ STATUS BAR ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ← Add Contact │ -│ │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ✓━━━━━━━━━━━━━●━━━━━━━━━━━━━○━━━━━━━━━━━━━○ │ │ -│ │ Account Office Details Review │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ░░│ │ -│ │░░ 🏢 Office / Branch ░░│ │ -│ │░░ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 🔍 Search offices... │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 📍 Popular Offices │ │ -│ │ │ │ -│ │ ┌─────────────────────────────────────────────────┐ │ │ -│ │ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ │ -│ │ │░░ 🏛️ Head Office ✓ Popular ░░│ │ │ -│ │ │░░ Main branch, downtown ░░│ │ │ -│ │ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ │ -│ │ └─────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ ┌─────────────────────────────────────────────────┐ │ │ -│ │ │ │ │ │ -│ │ │ 🏢 Branch Office │ │ │ -│ │ │ Secondary branch, midtown │ │ │ -│ │ │ │ │ │ -│ │ └─────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ ┌─────────────────────────────────────────────────┐ │ │ -│ │ │ │ │ │ -│ │ │ 🏬 Regional Center │ │ │ -│ │ │ Regional hub, north district │ │ │ -│ │ │ │ │ │ -│ │ └─────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 💰 Transfer Limit * │ │ -│ │ ┌─────────────────────────────────────────────────┐ │ │ -│ │ │ $ 10,000 │ │ │ -│ │ └─────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ Quick Set: │ │ -│ │ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌──────────┐ │ │ -│ │ │ $5,000 │ │$10,000💫│ │ $25,000 │ │ $50,000 │ │ │ -│ │ └─────────┘ └─────────┘ └─────────┘ └──────────┘ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌────────────────────┐ ┌─────────────────────────────────┐ │ -│ │ │ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │ ← Back │ │░░ Continue → ░░│ │ -│ │ │ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └────────────────────┘ └─────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────────────────────────────┘ - -Legend: -✓ = Completed step (green) -● = Current step (primary gradient) -💫 = Most common selection -``` - ---- - -## Screen 7: Manual Entry Flow - Step 3 (Details) - -``` -┌─────────────────────────────────────────────────────────────────┐ -│░░░░░░░░░░░░░░░░░░░ STATUS BAR ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ← Add Contact │ -│ │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ✓━━━━━━━━━━━━━✓━━━━━━━━━━━━━●━━━━━━━━━━━━━○ │ │ -│ │ Account Office Details Review │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ░░│ │ -│ │░░ 👤 Contact Details ░░│ │ -│ │░░ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ Contact Name * │ │ -│ │ ┌─────────────────────────────────────────────────┐ │ │ -│ │ │ John Doe │ │ │ -│ │ └─────────────────────────────────────────────────┘ │ │ -│ │ How you'll recognize this contact │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ Relationship Tag (optional) │ │ -│ │ │ │ -│ │ ┌─────────┐ ┌─────────┐ ┌──────────┐ ┌──────────┐ │ │ -│ │ │ 👨‍👩‍👧 Family│ │ 👋 Friend│ │ 💼Business│ │ 🏠 Landlord│ │ │ -│ │ └─────────┘ └─────────┘ └──────────┘ └──────────┘ │ │ -│ │ ┌─────────┐ ┌─────────┐ ┌──────────┐ ┌──────────┐ │ │ -│ │ │ 🛒 Vendor│ │ 🎓 School│ │ ⚕️ Medical│ │ ➕ Custom │ │ │ -│ │ └─────────┘ └─────────┘ └──────────┘ └──────────┘ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ☐ Add to Favorites │ │ -│ │ Quick access from home screen │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ Preview: │ │ -│ │ │ │ -│ │ ┌─────────────────────────────────────────────────┐ │ │ -│ │ │ ┌──────┐ │ │ │ -│ │ │ │ │ John Doe 🏷️ Business │ │ │ -│ │ │ │ JD │ ****4567 • Head Office │ │ │ -│ │ │ │ │ Savings Account │ │ │ -│ │ │ └──────┘ │ │ │ -│ │ └─────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌────────────────────┐ ┌─────────────────────────────────┐ │ -│ │ │ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │ ← Back │ │░░ Review & Save → ░░│ │ -│ │ │ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └────────────────────┘ └─────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────────────────────────────┘ - -Legend: -Relationship tags = Filter & organize contacts -Live preview = Shows how contact card will appear -``` - ---- - -## Screen 8: Manual Entry Flow - Step 4 (Review) - -``` -┌─────────────────────────────────────────────────────────────────┐ -│░░░░░░░░░░░░░░░░░░░ STATUS BAR ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ← Add Contact │ -│ │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ✓━━━━━━━━━━━━━✓━━━━━━━━━━━━━✓━━━━━━━━━━━━━● │ │ -│ │ Account Office Details Review │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ░░│ │ -│ │░░ ✓ Review & Confirm ░░│ │ -│ │░░ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌─────────────┐ │ │ -│ │ │ │ │ │ -│ │ │ JD │ │ │ -│ │ │ │ │ │ -│ │ └─────────────┘ │ │ -│ │ │ │ -│ │ John Doe │ │ -│ │ 🏷️ Business Partner │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ Account Number ✏️ │ │ -│ │ SA-0001234567 │ │ -│ │ ─────────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ Account Type ✏️ │ │ -│ │ 💵 Savings Account │ │ -│ │ ─────────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ Office / Branch ✏️ │ │ -│ │ 🏛️ Head Office │ │ -│ │ ─────────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ Transfer Limit ✏️ │ │ -│ │ $10,000.00 per transaction │ │ -│ │ ─────────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ Relationship ✏️ │ │ -│ │ 💼 Business Partner │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ 🔒 Contact will be verified before first transfer │ │ -│ │ 🛡️ Protected by 256-bit encryption │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌────────────────────┐ ┌─────────────────────────────────┐ │ -│ │ │ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │ ← Back │ │░░ Add Trusted Contact ░░│ │ -│ │ │ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └────────────────────┘ └─────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────────────────────────────┘ - -Legend: -✏️ = Tap to edit this field inline -All fields editable before final submit -``` - ---- - -## Screen 9: Contact Added Success - -``` -┌─────────────────────────────────────────────────────────────────┐ -│░░░░░░░░░░░░░░░░░░░ STATUS BAR ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ │ -│ │ -│ │ -│ │ -│ │ -│ ┌─────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌──────────┐ │ │ -│ │ │ │ │ │ -│ │ │ ✓ │ │ │ -│ │ │ │ │ │ -│ │ └──────────┘ │ │ -│ │ │ │ -│ │ Contact Added! │ │ -│ │ │ │ -│ │ ┌─────────────────────────┐ │ │ -│ │ │ ┌──────┐ │ │ │ -│ │ │ │ │ John Doe │ │ │ -│ │ │ │ JD │ ****4567 │ │ │ -│ │ │ │ │ 💼 Business │ │ │ -│ │ │ └──────┘ │ │ │ -│ │ └─────────────────────────┘ │ │ -│ │ │ │ -│ │ ⏳ Verification pending │ │ -│ │ First transfer will verify │ │ -│ │ │ │ -│ └─────────────────────────────────┘ │ -│ │ -│ │ -│ │ -│ ┌─────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ░░│ │ -│ │░░ Send Money Now → ░░│ │ -│ │░░ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └─────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ Back to Contacts │ │ -│ │ │ │ -│ └─────────────────────────────────────────────┘ │ -│ │ -│ │ -│ │ -└─────────────────────────────────────────────────────────────────┘ - -Legend: -✓ = Success checkmark with bounce animation -Confetti particles animation on success -Primary CTA = Send Money Now (most likely action) -``` - ---- - -## Screen 10: Edit Contact - -``` -┌─────────────────────────────────────────────────────────────────┐ -│░░░░░░░░░░░░░░░░░░░ STATUS BAR ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ← Edit Contact Save │ -│ │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ░░│ │ -│ │░░ ┌─────────────┐ ░░│ │ -│ │░░ │ │ ░░│ │ -│ │░░ │ JD │ ░░│ │ -│ │░░ │ │ ░░│ │ -│ │░░ └─────────────┘ ░░│ │ -│ │░░ ░░│ │ -│ │░░ SA-0001234567 ░░│ │ -│ │░░ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ℹ️ Only name, relationship, and limit can be changed │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ Contact Name * │ │ -│ │ ┌─────────────────────────────────────────────────┐ │ │ -│ │ │ John Doe ✏️ │ │ │ -│ │ └─────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ Account Number │ │ -│ │ ┌─────────────────────────────────────────────────┐ │ │ -│ │ │ SA-0001234567 🔒 │ │ │ -│ │ └─────────────────────────────────────────────────┘ │ │ -│ │ Cannot be changed for security │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ Relationship Tag │ │ -│ │ ┌─────────┐ ┌─────────┐ ┌──────────┐ ┌──────────┐ │ │ -│ │ │ 👨‍👩‍👧 Family│ │ 👋 Friend│ │░░Business░░│ │ 🏠 Other │ │ │ -│ │ └─────────┘ └─────────┘ └──────────┘ └──────────┘ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ Transfer Limit │ │ -│ │ ┌─────────────────────────────────────────────────┐ │ │ -│ │ │ $ 15,000 ✏️ │ │ │ -│ │ └─────────────────────────────────────────────────┘ │ │ -│ │ Increased from $10,000 │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ░░│ │ -│ │░░ Save Changes ░░│ │ -│ │░░ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ │ -│ │▓▓ ▓▓│ │ -│ │▓▓ Remove Contact ▓▓│ │ -│ │▓▓ ▓▓│ │ -│ │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────────────────────────────┘ - -Legend: -🔒 = Locked field (cannot be edited) -✏️ = Editable field -░░Business░░ = Currently selected tag -▓▓ = Danger/remove button (#FF4757) -``` - ---- - -## Screen 11: Delete Confirmation - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ │ -│ [Dimmed Background] │ -│ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ │ │ -│ │ ┌───────────┐ │ │ -│ │ │ │ │ │ -│ │ │ ⚠️ │ │ │ -│ │ │ │ │ │ -│ │ └───────────┘ │ │ -│ │ │ │ -│ │ Remove Trusted Contact? │ │ -│ │ │ │ -│ │ ┌─────────────────────────────────────────────────┐ │ │ -│ │ │ ┌──────┐ │ │ │ -│ │ │ │ │ John Doe │ │ │ -│ │ │ │ JD │ ****4567 • Head Office │ │ │ -│ │ │ │ │ 24 transfers • $15,650 total │ │ │ -│ │ │ └──────┘ │ │ │ -│ │ └─────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ This will remove John from your trusted contacts. │ │ -│ │ You'll need to add them again to send money. │ │ -│ │ │ │ -│ │ ⚠️ This cannot be undone │ │ -│ │ │ │ -│ │ ┌────────────────────┐ ┌─────────────────────────┐ │ │ -│ │ │ │ │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ │ │ -│ │ │ Cancel │ │▓▓ Remove ▓▓│ │ │ -│ │ │ │ │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ │ │ -│ │ └────────────────────┘ └─────────────────────────┘ │ │ -│ │ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ │ -└─────────────────────────────────────────────────────────────────┘ - -Legend: -⚠️ = Warning icon (amber) -▓▓ = Danger button (#FF4757) -Modal = 24dp corner radius, elevation shadow -Shows transfer history to emphasize the relationship -``` - ---- - -## Screen 12: Empty State - -``` -┌─────────────────────────────────────────────────────────────────┐ -│░░░░░░░░░░░░░░░░░░░ STATUS BAR ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ← Trusted Contacts + 📷 │ -│ │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ 🔍 Search contacts... │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ │ -│ │ -│ │ -│ │ -│ ┌───────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌─────────────────┐ │ │ -│ │ │ │ │ │ -│ │ │ 👥 → 💸 │ │ │ -│ │ │ │ │ │ -│ │ └─────────────────┘ │ │ -│ │ │ │ -│ │ Build Your Payment Network │ │ -│ │ │ │ -│ │ Add trusted contacts to send │ │ -│ │ money quickly and securely │ │ -│ │ │ │ -│ └───────────────────────────────────┘ │ -│ │ -│ │ -│ ┌─────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ░░│ │ -│ │░░ + Add Your First Contact ░░│ │ -│ │░░ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └─────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 📷 Scan QR Code to Add Instantly │ │ -│ │ │ │ -│ └─────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 📱 Import from Phone Contacts │ │ -│ │ │ │ -│ └─────────────────────────────────────────────┘ │ -│ │ -│ │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ⌂ ☰ 💸 👤 │ -│ Home Accounts Transfer Profile │ -│ │ -└─────────────────────────────────────────────────────────────────┘ - -Legend: -Illustration has subtle floating animation -Multiple entry points to add contacts -Empty state encourages action -``` - ---- - -## Component Specifications - -### TrustedContactCard - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ TRUSTED CONTACT CARD │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ ┌──────┐ │ │ -│ │ │░░░░░░│ Name Here ┌─────────┐ │ │ -│ │ │ 🛡️AB │ ****1234 • Account Type │ Send 💸 │ │ │ -│ │ │░░░░░░│ 🏷️ Tag ✓/⏳ Status └─────────┘ │ │ -│ │ └──────┘ Last: $amount • time ago │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ Props: │ -│ ───────────────────────────────────────────────────────────── │ -│ • name: String - Contact display name │ -│ • initials: String - 2-letter initials │ -│ • accountNumber: String - Masked account (****XXXX) │ -│ • accountType: AccountType - SAVINGS, LOAN, SHARE │ -│ • relationshipTag: Tag? - Family, Business, Friend, etc. │ -│ • trustStatus: TrustStatus - VERIFIED, PENDING │ -│ • lastTransfer: Transfer? - Most recent transfer info │ -│ • avatarColor: Color - From gradient palette │ -│ • isFavorite: Boolean - Star badge display │ -│ • onSendClick: () -> Unit - Quick send action │ -│ • onClick: () -> Unit - Navigate to detail │ -│ │ -│ Dimensions: │ -│ ───────────────────────────────────────────────────────────── │ -│ • Card Height: 88dp │ -│ • Avatar Size: 48dp │ -│ • Corner Radius: 16dp │ -│ • Horizontal Padding: 16dp │ -│ • Send Button: 72dp x 36dp │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - -### FavoriteContactChip - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ FAVORITE CONTACT CHIP │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ┌───────┐ │ -│ │░░░░░░░│ │ -│ │ 👤 │ Compact view for favorites section │ -│ │ ⭐AB │ Tap to quick transfer │ -│ └───────┘ Long press for options │ -│ Name │ -│ $Total │ -│ │ -│ Props: │ -│ ───────────────────────────────────────────────────────────── │ -│ • name: String - First name only │ -│ • initials: String - 2-letter initials │ -│ • totalTransferred: Money - Lifetime total │ -│ • avatarColor: Color - From gradient palette │ -│ • onClick: () -> Unit - Open quick transfer │ -│ • onLongClick: () -> Unit - Show options menu │ -│ │ -│ Dimensions: │ -│ ───────────────────────────────────────────────────────────── │ -│ • Chip Width: 72dp │ -│ • Avatar Size: 48dp │ -│ • Corner Radius: 12dp │ -│ • Star Badge Size: 16dp │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - -### SuggestedContactCard - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ SUGGESTED CONTACT CARD │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ ┌────┐ │ │ -│ │ │ RK │ Name ┌────────────────┐ │ │ -│ │ └────┘ Suggestion reason │░░░ Send $XX ░░░│ │ │ -│ │ Pattern type └────────────────┘ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ Props: │ -│ ───────────────────────────────────────────────────────────── │ -│ • contact: TrustedContact - Contact details │ -│ • suggestionReason: String - "Sent 3x this month" │ -│ • patternType: String - "Monthly rent" │ -│ • suggestedAmount: Money - AI-suggested amount │ -│ • onSendClick: () -> Unit - Quick send with amount │ -│ │ -│ Dimensions: │ -│ ───────────────────────────────────────────────────────────── │ -│ • Card Height: 72dp │ -│ • Avatar Size: 40dp │ -│ • Send Button: 96dp x 36dp │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - -### TransferHistoryItem - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ TRANSFER HISTORY ITEM │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ┌────────────────────────────────────────────────┐ │ -│ │ ↗️/↙️ Sent/Received $XXX X days ago │ │ -│ │ Note text if available │ │ -│ └────────────────────────────────────────────────┘ │ -│ │ -│ Props: │ -│ ───────────────────────────────────────────────────────────── │ -│ • direction: TransferDirection - SENT, RECEIVED │ -│ • amount: Money - Transfer amount │ -│ • note: String? - Transfer note │ -│ • timestamp: DateTime - When transfer occurred │ -│ │ -│ Colors: │ -│ ───────────────────────────────────────────────────────────── │ -│ • Sent: #FF4757 (red) │ -│ • Received: #00D09C (green) │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - -### RelationshipTagChip - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ RELATIONSHIP TAG CHIP │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ┌───────────┐ │ -│ │ 👨‍👩‍👧 Family │ Selected state: gradient border │ -│ └───────────┘ Unselected: outline only │ -│ │ -│ Available Tags: │ -│ ───────────────────────────────────────────────────────────── │ -│ • 👨‍👩‍👧 Family • 👋 Friend • 💼 Business │ -│ • 🏠 Landlord • 🛒 Vendor • 🎓 School │ -│ • ⚕️ Medical • ➕ Custom │ -│ │ -│ Props: │ -│ ───────────────────────────────────────────────────────────── │ -│ • tag: RelationshipTag - Tag type │ -│ • isSelected: Boolean - Selection state │ -│ • onClick: () -> Unit - Toggle selection │ -│ │ -│ Dimensions: │ -│ ───────────────────────────────────────────────────────────── │ -│ • Height: 36dp │ -│ • Corner Radius: 18dp (pill shape) │ -│ • Padding: 12dp horizontal │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Animation Specifications - -### Trust Badge Animation - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ TRUST BADGE ANIMATION │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ Verified Contact (🛡️): │ -│ ───────────────────────────────────────────────────────────── │ -│ • Green glow ring: Subtle pulse every 3s │ -│ • Shield icon: Slight scale (1.0 → 1.05) on hover │ -│ │ -│ Pending Contact (⏳): │ -│ ───────────────────────────────────────────────────────────── │ -│ • Amber ring: Rotating gradient animation │ -│ • Hourglass icon: Gentle rotation oscillation │ -│ │ -│ Kotlin: │ -│ ```kotlin │ -│ val trustGlow by animateFloatAsState( │ -│ targetValue = if (isVerified) 1f else 0f, │ -│ animationSpec = infiniteRepeatable( │ -│ animation = tween(3000), │ -│ repeatMode = RepeatMode.Reverse │ -│ ) │ -│ ) │ -│ ``` │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - -### Favorite Star Animation - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ FAVORITE STAR ANIMATION │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ Add to Favorites: │ -│ ───────────────────────────────────────────────────────────── │ -│ Frame 1 (0ms): ☆ (outline, scale 1.0) │ -│ Frame 2 (100ms): ⭐ (filled, scale 1.3, rotate 15°) │ -│ Frame 3 (200ms): ⭐ (filled, scale 1.0, particles burst) │ -│ │ -│ Remove from Favorites: │ -│ ───────────────────────────────────────────────────────────── │ -│ Frame 1 (0ms): ⭐ (filled, scale 1.0) │ -│ Frame 2 (150ms): ☆ (outline, scale 0.8) │ -│ Frame 3 (200ms): ☆ (outline, scale 1.0) │ -│ │ -│ Kotlin: │ -│ ```kotlin │ -│ val starScale by animateFloatAsState( │ -│ targetValue = if (isFavorite) 1.3f else 1f, │ -│ animationSpec = spring( │ -│ dampingRatio = Spring.DampingRatioMediumBouncy, │ -│ stiffness = Spring.StiffnessLow │ -│ ) │ -│ ) │ -│ ``` │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - -### Quick Send Button Animation - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ QUICK SEND BUTTON ANIMATION │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ Tap Animation: │ -│ ───────────────────────────────────────────────────────────── │ -│ 1. Scale: 1.0 → 0.95 → 1.0 (bounce) │ -│ 2. Ripple: Primary gradient ripple from center │ -│ 3. Haptic: Light feedback │ -│ │ -│ Success Animation: │ -│ ───────────────────────────────────────────────────────────── │ -│ 1. Button morphs: "Send 💸" → "✓ Sent" │ -│ 2. Color transition: Primary → Success green │ -│ 3. Icon slides: Money icon exits right │ -│ │ -│ Duration: 300ms total │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - -### Contact Added Celebration - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ CONTACT ADDED CELEBRATION │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ Success Sequence: │ -│ ───────────────────────────────────────────────────────────── │ -│ 1. Checkmark draw animation (0-300ms) │ -│ 2. Circle scale in (100-400ms) │ -│ 3. Confetti particles burst (300-1000ms) │ -│ 4. Card slide up from bottom (400-600ms) │ -│ │ -│ Confetti particles: │ -│ • Colors: Primary, Success, Accent gradients │ -│ • Count: 24 particles │ -│ • Physics: Gravity fall with random rotation │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - ---- - -## State Management - -```kotlin -// BeneficiaryState.kt -data class BeneficiaryState( - val isLoading: Boolean = false, - val contacts: List = emptyList(), - val favorites: List = emptyList(), - val suggestions: List = emptyList(), - val searchQuery: String = "", - val selectedFilter: ContactFilter = ContactFilter.ALL, - val error: String? = null -) - -data class TrustedContact( - val id: Long, - val name: String, - val accountNumber: String, - val accountType: AccountType, - val officeName: String, - val transferLimit: Money, - val relationshipTag: RelationshipTag?, - val trustStatus: TrustStatus, - val isFavorite: Boolean, - val totalTransferred: Money, - val lastTransfer: TransferSummary?, - val addedDate: LocalDate, - val transferCount: Int -) - -data class SuggestedContact( - val contact: TrustedContact, - val suggestionReason: String, - val patternType: String?, - val suggestedAmount: Money? -) - -enum class TrustStatus { - VERIFIED, // First transfer completed successfully - PENDING // Not yet verified -} - -enum class RelationshipTag(val icon: String, val label: String) { - FAMILY("👨‍👩‍👧", "Family"), - FRIEND("👋", "Friend"), - BUSINESS("💼", "Business"), - LANDLORD("🏠", "Landlord"), - VENDOR("🛒", "Vendor"), - SCHOOL("🎓", "School"), - MEDICAL("⚕️", "Medical"), - CUSTOM("➕", "Custom") -} - -enum class ContactFilter { - ALL, - FAMILY, - BUSINESS, - BY_ACCOUNT_TYPE -} - -sealed class ContactDetailState { - object Loading : ContactDetailState() - data class Success( - val contact: TrustedContact, - val transferHistory: List, - val transferSummary: TransferSummary - ) : ContactDetailState() - data class Error(val message: String) : ContactDetailState() -} -``` - ---- - -## Accessibility Labels - -```kotlin -// Accessibility content descriptions -object BeneficiaryAccessibility { - // Contact card - fun contactCard(contact: TrustedContact) = buildString { - append("${contact.name}, ") - append("${contact.accountType.displayName} account ending in ${contact.accountNumber.takeLast(4)}, ") - if (contact.trustStatus == TrustStatus.VERIFIED) { - append("Verified contact, ") - } else { - append("Pending verification, ") - } - contact.relationshipTag?.let { append("${it.label}, ") } - if (contact.isFavorite) append("Favorite, ") - contact.lastTransfer?.let { - append("Last transfer ${it.amount.formatted} ${it.timeAgo}") - } - } - - // Quick send button - fun quickSendButton(name: String) = "Send money to $name" - - // Favorite toggle - fun favoriteToggle(isFavorite: Boolean, name: String) = - if (isFavorite) "Remove $name from favorites" - else "Add $name to favorites" - - // Trust badge - fun trustBadge(status: TrustStatus) = when (status) { - TrustStatus.VERIFIED -> "Verified trusted contact" - TrustStatus.PENDING -> "Pending verification" - } - - // Transfer history item - fun transferItem(record: TransferRecord) = buildString { - val direction = if (record.direction == SENT) "Sent" else "Received" - append("$direction ${record.amount.formatted}, ") - append("${record.timeAgo}, ") - record.note?.let { append("Note: $it") } - } -} -``` - ---- - -## Dark Mode Color Transformations - -| Element | Light Mode | Dark Mode | -|---------|------------|-----------| -| Card Background | #FFFFFF | #1E1E2E | -| Surface | #F8F9FA | #2D2D3A | -| Primary Text | #1A1A2E | #F8F9FA | -| Secondary Text | #6B7280 | #9CA3AF | -| Verified Badge | #00D09C | #00D09C | -| Pending Badge | #FFB800 | #FFB800 | -| Divider | #E5E7EB | #3D3D4A | -| Gradient Overlay | 85% opacity | 90% opacity | -| Quick Send Button | Primary gradient | Primary gradient (same) | -| Favorite Star | #FFB800 | #FFB800 | - ---- - -## Implementation Notes - -### Required Composables - -```kotlin -// Main screens -@Composable fun TrustedContactsHubScreen() -@Composable fun ContactDetailScreen() -@Composable fun QuickTransferScreen() -@Composable fun AddContactScreen() -@Composable fun EditContactScreen() -@Composable fun ContactSuccessScreen() - -// Components -@Composable fun TrustedContactCard() -@Composable fun FavoriteContactChip() -@Composable fun SuggestedContactCard() -@Composable fun TransferHistoryItem() -@Composable fun RelationshipTagChip() -@Composable fun TrustBadge() -@Composable fun TransferSummaryCard() -@Composable fun QuickAmountSelector() -@Composable fun ContactAddMethodSelector() -@Composable fun StepProgressIndicator() - -// Dialogs -@Composable fun DeleteContactDialog() -@Composable fun ContactOptionsSheet() -``` - -### ViewModel Integration - -```kotlin -class BeneficiaryViewModel : ViewModel() { - val state: StateFlow - - fun loadContacts() - fun searchContacts(query: String) - fun filterContacts(filter: ContactFilter) - fun toggleFavorite(contactId: Long) - fun addContact(contact: CreateContactRequest) - fun updateContact(contact: UpdateContactRequest) - fun deleteContact(contactId: Long) - fun loadSuggestions() -} - -class ContactDetailViewModel : ViewModel() { - val state: StateFlow - - fun loadContactDetail(contactId: Long) - fun loadTransferHistory(contactId: Long) - fun quickTransfer(contactId: Long, amount: Money, note: String?) -} -``` - ---- - -## Version History - -| Version | Date | Changes | -|---------|------|---------| -| 1.0 | 2025-12-29 | Initial design with basic list/detail | -| 2.0 | 2025-12-30 | Complete redesign with Trusted Contacts Hub, smart suggestions, transfer history per contact, relationship tags, favorites, quick send actions, AI-powered suggestions | - ---- - -## Data Binding Reference - -> **For `/implement` command**: Maps UI components to API.md sections. -> **Source of Truth**: See `API.md` for complete endpoint details. - -### Screen → API.md Mapping - -| Screen | API.md Section | Key Fields | -|--------|----------------|------------| -| Beneficiary List | `1. Get Beneficiary List` | `name`, `accountNumber`, `accountType`, `transferLimit` | -| Add Beneficiary | `2. Get Beneficiary Template` + `3. Create Beneficiary` | Template options → POST payload | -| Edit Beneficiary | `4. Update Beneficiary` | `name`, `transferLimit` only | -| Delete Beneficiary | `5. Delete Beneficiary` | DELETE by ID | - -### Client-Only Features - -| Feature | Storage | Notes | -|---------|---------|-------| -| Favorites | DataStore | Local preference | -| Relationship Tags | DataStore | Client-side categorization | -| Recent Recipients | DataStore | Local transfer history | -| Smart Suggestions | Client-side | Based on usage patterns | - -### Actions → API.md Mapping - -| User Action | API.md Reference | Navigation | -|-------------|------------------|------------| -| Load List | `1. Get Beneficiary List` | Display contacts | -| Add New | `2. Get Template` → `3. Create` | → Add Flow | -| Edit | `4. Update Beneficiary` | Name/limit only | -| Delete | `5. Delete Beneficiary` | Confirmation dialog | -| Quick Transfer | See `transfer/API.md` | → Transfer Flow | - -### Error Handling - -See `API.md → Error Responses` for complete error codes. diff --git a/claude-product-cycle/design-spec-layer/features/beneficiary/SPEC.md b/claude-product-cycle/design-spec-layer/features/beneficiary/SPEC.md deleted file mode 100644 index faf73599c..000000000 --- a/claude-product-cycle/design-spec-layer/features/beneficiary/SPEC.md +++ /dev/null @@ -1,647 +0,0 @@ -# Beneficiary - Feature Specification - -> **Purpose**: Manage third-party transfer beneficiaries for quick fund transfers -> **User Value**: Save and manage trusted recipients for faster, secure money transfers -> **Last Updated**: 2025-12-29 -> **Status**: Production Design - ---- - -## 1. Overview - -### 1.1 Feature Summary -The Beneficiary feature enables users to manage a list of trusted recipients for third-party transfers (TPT). Users can view all saved beneficiaries, add new ones manually or via QR code, view beneficiary details, update beneficiary information, and delete beneficiaries. This feature streamlines the fund transfer process by eliminating the need to repeatedly enter recipient details. - -### 1.2 User Stories -- As a user, I want to view all my saved beneficiaries in a list -- As a user, I want to filter beneficiaries by office or account type -- As a user, I want to add a new beneficiary manually with their account details -- As a user, I want to add a beneficiary by scanning a QR code -- As a user, I want to view detailed information about a beneficiary -- As a user, I want to update a beneficiary's name and transfer limit -- As a user, I want to delete a beneficiary I no longer need -- As a user, I want to confirm my actions before creating/updating beneficiaries - -### 1.3 Design Principles -- **Security**: Authentication required before creating/updating beneficiaries -- **Simplicity**: Minimal steps to add or manage beneficiaries -- **Clarity**: Clear display of beneficiary information -- **Confirmation**: Multi-step process with review before submission - ---- - -## 2. Screen Layout - -### 2.1 Beneficiary List Screen - -``` -+-------------------------------------------------------------+ -| <- Manage Beneficiaries | -+-------------------------------------------------------------+ -| | -| [ Add + ] [ Filter ] | -| | -| +-------------------------------------------------------+ | -| | +---+ | | -| | | | John Doe | | -| | | JD| SA-0001234567 | | -| | | | Head Office | Savings Account | | -| | +---+ | | -| +-------------------------------------------------------+ | -| | -| +-------------------------------------------------------+ | -| | +---+ | | -| | | | Jane Smith | | -| | | JS| LA-0009876543 | | -| | | | Branch Office | Loan Account | | -| | +---+ | | -| +-------------------------------------------------------+ | -| | -| +-------------------------------------------------------+ | -| | +---+ | | -| | | | Mike Johnson | | -| | | MJ| SA-0005678901 | | -| | | | Head Office | Savings Account | | -| | +---+ | | -| +-------------------------------------------------------+ | -| | -| [Powered by Mifos] | -+-------------------------------------------------------------+ -``` - -### 2.2 Beneficiary List - Filter Dialog - -``` -+-------------------------------------------------------------+ -| <- Manage Beneficiaries | -+-------------------------------------------------------------+ -| | -| [ Reset ] [ Apply ] [ X ] | -| | -| --------------------------------------------------------- | -| | -| Linked With 2 selected v | -| +-------------------------------------------------------+ | -| | [ ] Head Office | | -| | [x] Branch Office | | -| | [x] Regional Office | | -| +-------------------------------------------------------+ | -| | -| Type of Account 1 selected v | -| +-------------------------------------------------------+ | -| | [x] Savings Account | | -| | [ ] Loan Account | | -| | [ ] Share Account | | -| +-------------------------------------------------------+ | -| | -| [Powered by Mifos] | -+-------------------------------------------------------------+ -``` - -### 2.3 Beneficiary List - Empty State - -``` -+-------------------------------------------------------------+ -| <- Manage Beneficiaries | -+-------------------------------------------------------------+ -| | -| | -| +--------+ | -| | ! | | -| +--------+ | -| | -| No beneficiaries found, please add | -| | -| +----------------------------------+ | -| | Add Beneficiary | | -| +----------------------------------+ | -| | -| [Powered by Mifos] | -+-------------------------------------------------------------+ -``` - -### 2.4 Add/Update Beneficiary Screen - -``` -+-------------------------------------------------------------+ -| <- Add Beneficiary | -+-------------------------------------------------------------+ -| | -| +-------------------------------------------------------+ | -| | Beneficiary Name * | | -| | [ ] | | -| +-------------------------------------------------------+ | -| | -| +-------------------------------------------------------+ | -| | Account Number * | | -| | [ ] | | -| +-------------------------------------------------------+ | -| | -| +-------------------------------------------------------+ | -| | Select Account Type * v | | -| | [ ] | | -| +-------------------------------------------------------+ | -| | -| +-------------------------------------------------------+ | -| | Office Name * | | -| | [ ] | | -| +-------------------------------------------------------+ | -| | -| +-------------------------------------------------------+ | -| | Transfer Limit * | | -| | [ ] | | -| +-------------------------------------------------------+ | -| | -| +-------------------------------------------------------+ | -| | Submit Beneficiary | | -| +-------------------------------------------------------+ | -| | -| Skip the form? Upload or scan QR code | -| | -+-------------------------------------------------------------+ -``` - -### 2.5 Beneficiary Confirmation Screen - -``` -+-------------------------------------------------------------+ -| <- Add Beneficiary | -+-------------------------------------------------------------+ -| | -| Validate Details | -| | -| +-------------------------------------------------------+ | -| | | | -| | Beneficiary Name John Doe | | -| | ----------------------------------------------------- | | -| | Office Head Office | | -| | ----------------------------------------------------- | | -| | Account Type Savings Account | | -| | ----------------------------------------------------- | | -| | Account Number SA-0001234567 | | -| | ----------------------------------------------------- | | -| | Transfer Limit 10000 | | -| | | | -| +-------------------------------------------------------+ | -| | -| +-------------------------------------------------------+ | -| | Confirm Details | | -| +-------------------------------------------------------+ | -| | -| [Powered by Mifos] | -+-------------------------------------------------------------+ -``` - -### 2.6 Beneficiary Detail Screen - -``` -+-------------------------------------------------------------+ -| <- Beneficiary Detail | -+-------------------------------------------------------------+ -| | -| [ Delete ] [ Update ] | -| | -| +-------------------------------------------------------+ | -| | +-------+ | | -| | | | | | -| | | JD | | | -| | | | | | -| | +-------+ | | -| | John Doe | | -| | SA-0001234567 | | -| +-------------------------------------------------------+ | -| | -| +-------------------------------------------------------+ | -| | Beneficiary Name | | -| | [ John Doe ] | | -| +-------------------------------------------------------+ | -| | -| +-------------------------------------------------------+ | -| | Account Number | | -| | [ SA-0001234567 ] | | -| +-------------------------------------------------------+ | -| | -| +-------------------------------------------------------+ | -| | Select Account Type | | -| | [ Savings Account ] | | -| +-------------------------------------------------------+ | -| | -| +-------------------------------------------------------+ | -| | Office Name | | -| | [ Head Office ] | | -| +-------------------------------------------------------+ | -| | -| +-------------------------------------------------------+ | -| | Transfer Limit | | -| | [ 10000 ] | | -| +-------------------------------------------------------+ | -| | -+-------------------------------------------------------------+ -``` - -### 2.7 Delete Confirmation Dialog - -``` -+-------------------------------------------------------------+ -| | -| +-------------------------------------------------------+ | -| | | | -| | [Delete Icon] | | -| | | | -| | Delete Beneficiary | | -| | | | -| | Are you sure you want to delete this beneficiary? | | -| | | | -| | [ Cancel ] [ Delete ] | | -| | | | -| +-------------------------------------------------------+ | -| | -+-------------------------------------------------------------+ -``` - ---- - -## 3. Sections Table - -| Section | Component | Description | Priority | -|---------|-----------|-------------|----------| -| List Header | TopAppBar | Title "Manage Beneficiaries" with back navigation | P0 | -| Action Bar | Row | Add and Filter action buttons | P0 | -| Beneficiary Card | MifosBeneficiariesCard | Card with name, account, office, type | P0 | -| Filter Dialog | FilterSection | Office and Account Type filters with checkboxes | P1 | -| Empty State | EmptyDataView | Icon with message and Add button | P0 | -| Form Fields | MifosOutlinedTextField | Name, Account Number, Office, Transfer Limit | P0 | -| Account Type Dropdown | MifosDropDownTextField | Select account type (Savings/Loan/Share) | P0 | -| Submit Button | MifosButton | Submit Beneficiary action | P0 | -| QR Link | Text with ClickModifier | "Skip the form? Upload or scan QR code" | P1 | -| Details Card | MifosDetailsCard | Read-only beneficiary information | P0 | -| Confirm Button | MifosButton | Confirm Details action | P0 | -| Detail Top Card | MifosBeneficiaryTopCard | Avatar, name, account number | P0 | -| Delete Dialog | MifosAlertDialog | Delete confirmation with Cancel/Delete buttons | P0 | -| Powered Footer | MifosPoweredCard | "Powered by Mifos" branding | P2 | - ---- - -## 4. User Interactions Table - -| Interaction | Action | Effect | Navigation | -|-------------|--------|--------|------------| -| Tap Back Arrow | OnNavigate | Navigate to previous screen | popBackStack() | -| Tap Beneficiary Card | OnBeneficiaryItemClick | View beneficiary details | BeneficiaryDetailScreen | -| Tap Add Button | OnAddBeneficiaryClicked | Navigate to add form | BeneficiaryApplicationScreen | -| Tap Filter Button | ToggleFilter | Show filter dialog | FilterDialog | -| Apply Filter | GetFilterResults | Filter list by selected criteria | Dismiss dialog, update list | -| Reset Filter | ResetFilters | Clear all filters | Reset to full list | -| Submit Form | SubmitBeneficiary | Validate and navigate to confirmation | ConfirmationScreen | -| Confirm Details | SubmitBeneficiary | Navigate to authentication | AuthenticateScreen | -| Tap Update | OnUpdateBeneficiary | Navigate to edit form | BeneficiaryApplicationScreen (UPDATE) | -| Tap Delete | ShowDeleteConfirmation | Show delete dialog | Delete confirmation dialog | -| Confirm Delete | DeleteBeneficiary | Delete and navigate back | BeneficiaryListScreen | -| Tap QR Link | NavigateToQR | Navigate to QR scanner | QR Screen | -| Pull to Refresh | RefreshBeneficiaries | Reload beneficiary list | Refresh current screen | - ---- - -## 5. State Model - -### 5.1 BeneficiaryListState - -```kotlin -data class BeneficiaryListState( - val networkStatus: Boolean = false, - val isRefreshing: Boolean = false, - val beneficiaries: List = emptyList(), - val template: BeneficiaryTemplate? = null, - val selectedAccounts: Set = emptySet(), - val selectedOffices: Set = emptySet(), - val offices: List = emptyList(), - val isEmpty: Boolean = false, - val isFilteredEmpty: Boolean = false, - val filteredBeneficiaries: List = emptyList(), - val dialogState: DialogState? = null, - val uiState: ScreenUiState = ScreenUiState.Loading, -) { - sealed interface DialogState { - data object Filters : DialogState - } - val isAnyFilterSelected = selectedAccounts.isNotEmpty() || selectedOffices.isNotEmpty() -} - -sealed interface BeneficiaryListAction { - data object RefreshBeneficiaries : BeneficiaryListAction - data object OnAddBeneficiaryClicked : BeneficiaryListAction - data class OnBeneficiaryItemClick(val position: Long) : BeneficiaryListAction - data object OnNavigate : BeneficiaryListAction - data object ToggleFilter : BeneficiaryListAction - data object ResetFilters : BeneficiaryListAction - data object GetFilterResults : BeneficiaryListAction - data object DismissDialog : BeneficiaryListAction - data class OnAccountChange(val account: String) : BeneficiaryListAction - data class OnOfficeChange(val office: String) : BeneficiaryListAction - data object LoadBeneficiaries : BeneficiaryListAction - data class ReceiveNetworkStatus(val isOnline: Boolean) : BeneficiaryListAction - - sealed interface Internal : BeneficiaryListAction { - data class ReceiveBeneficiaryResult( - val beneficiaryList: DataState>, - ) : Internal - } -} - -sealed interface BeneficiaryListEvent { - data object AddBeneficiaryClicked : BeneficiaryListEvent - data class BeneficiaryItemClick(val position: Long) : BeneficiaryListEvent - data object Navigate : BeneficiaryListEvent -} -``` - -### 5.2 BeneficiaryApplicationState - -```kotlin -data class BeneficiaryApplicationState( - val topBarTitle: StringResource = Res.string.add_beneficiary, - val beneficiaryId: Long = -1L, - val networkUnavailable: Boolean = false, - val template: BeneficiaryTemplate? = null, - val beneficiary: Beneficiary? = null, - val beneficiaryState: BeneficiaryState = BeneficiaryState.CREATE_MANUAL, - val dialogState: DialogState? = null, - - val accountTypeError: StringResource? = null, - val accountNumberError: StringResource? = null, - val officeNameError: StringResource? = null, - val transferLimitError: StringResource? = null, - val beneficiaryNameError: StringResource? = null, - - val accountType: Int = -1, - val accountNumber: String = "", - val officeName: String = "", - val transferLimit: String = "", - val beneficiaryName: String = "", - - val networkStatus: Boolean = false, - val uiState: ScreenUiState = ScreenUiState.Loading, - val shoeOverlay: Boolean = false, -) { - sealed interface DialogState { - data class Error(val message: String) : DialogState - } - val isEnabled = accountType != -1 && - accountNumber.isNotEmpty() && - officeName.isNotEmpty() && - transferLimit.isNotEmpty() && - beneficiaryName.isNotEmpty() -} - -sealed interface BeneficiaryApplicationAction { - data object LoadBeneficiaryTemplate : BeneficiaryApplicationAction - data object SubmitBeneficiary : BeneficiaryApplicationAction - data object OnNavigate : BeneficiaryApplicationAction - data object OnRetry : BeneficiaryApplicationAction - data object NavigateToQR : BeneficiaryApplicationAction - data class OnAccountTypeChanged(val accountType: Int) : BeneficiaryApplicationAction - data class OnAccountNumberChanged(val accountNumber: String) : BeneficiaryApplicationAction - data class OnOfficeNameChanged(val officeName: String) : BeneficiaryApplicationAction - data class OnTransferLimitChanged(val transferLimit: String) : BeneficiaryApplicationAction - data class OnBeneficiaryNameChanged(val beneficiaryName: String) : BeneficiaryApplicationAction - data class ReceiveNetworkStatus(val isOnline: Boolean) : BeneficiaryApplicationAction - - sealed interface Internal : BeneficiaryApplicationAction { - data class ReceiveBeneficiaryResult( - val beneficiaryList: DataState>, - val beneficiaryTemplate: DataState, - ) : Internal - } -} - -sealed interface BeneficiaryApplicationEvent { - data object Navigate : BeneficiaryApplicationEvent - data class SubmitBeneficiary( - val beneficiaryId: Long, - val beneficiaryState: String, - val name: String, - val officeName: String, - val accountType: Int, - val accountNumber: String, - val transferLimit: Int, - ) : BeneficiaryApplicationEvent - data object NavigateToQR : BeneficiaryApplicationEvent -} -``` - -### 5.3 BeneficiaryApplicationConfirmationState - -```kotlin -data class BeneficiaryApplicationConfirmationState( - val details: Map = emptyMap(), - val topBarTitle: StringResource = Res.string.add_beneficiary, - val beneficiaryId: Long, - val name: String, - val officeName: String, - val accountType: Int, - val accountNumber: String, - val transferLimit: Int, - val networkUnavailable: Boolean = false, - val beneficiaryState: BeneficiaryState = BeneficiaryState.CREATE_MANUAL, - - val dialogState: DialogState? = null, - val uiState: ScreenUiState? = ScreenUiState.Success, - val showOverlay: Boolean = false, - val networkStatus: Boolean = false, -) { - sealed interface DialogState { - data object Network : DialogState - } -} - -sealed interface BeneficiaryApplicationConfirmationAction { - data object SubmitBeneficiary : BeneficiaryApplicationConfirmationAction - data class ReceiveNetworkStatus(val isOnline: Boolean) : BeneficiaryApplicationConfirmationAction - data object OnNavigate : BeneficiaryApplicationConfirmationAction - - sealed interface Internal : BeneficiaryApplicationConfirmationAction { - data class ReceiveAuthenticationResult(val result: Boolean) : Internal - data class ReceiveSubmitBeneficiary(val result: DataState) : Internal - data class ReceiveUpdateBeneficiary(val result: DataState) : Internal - } -} - -sealed interface BeneficiaryApplicationConfirmationEvent { - data object Navigate : BeneficiaryApplicationConfirmationEvent - data class NavigateToStatus( - val eventType: String, - val eventDestination: String, - val title: String, - val subtitle: String, - val buttonText: String, - ) : BeneficiaryApplicationConfirmationEvent - data class NavigateToAuthenticate( - val status: String = EventType.SUCCESS.name, - ) : BeneficiaryApplicationConfirmationEvent -} -``` - -### 5.4 BeneficiaryDetailState - -```kotlin -data class BeneficiaryDetailState( - val beneficiaryId: Long = -1L, - val beneficiary: Beneficiary? = null, - val beneficiaryDialog: DialogState? = null, - - val networkStatus: Boolean = false, - val uiState: ScreenUiState = ScreenUiState.Loading, - val showOverlay: Boolean = false, -) { - sealed interface DialogState { - data class Error(val message: String) : DialogState - data class Confirmation(val message: String) : DialogState - } -} - -sealed interface BeneficiaryDetailAction { - data object OnRefresh : BeneficiaryDetailAction - data object OnUpdateBeneficiary : BeneficiaryDetailAction - data object DeleteBeneficiary : BeneficiaryDetailAction - data object OnNavigate : BeneficiaryDetailAction - data object ErrorDialogDismiss : BeneficiaryDetailAction - data object ShowDeleteConfirmation : BeneficiaryDetailAction - data class ReceiveNetworkStatus(val isOnline: Boolean) : BeneficiaryDetailAction - - sealed interface Internal : BeneficiaryDetailAction { - data class ReceiveBeneficiaryResult(val result: DataState>) : Internal - data class ReceiveDeleteBeneficiary(val result: DataState) : Internal - } -} - -sealed interface BeneficiaryDetailEvent { - data object NavigateBack : BeneficiaryDetailEvent - data class UpdateBeneficiary(val beneficiaryId: Long) : BeneficiaryDetailEvent -} -``` - -### 5.5 BeneficiaryState Enum - -```kotlin -enum class BeneficiaryState { - CREATE_MANUAL, - CREATE_QR, - UPDATE, -} -``` - ---- - -## 6. API Requirements - -| Endpoint | Method | Purpose | Priority | -|----------|--------|---------|----------| -| /self/beneficiaries/tpt | GET | Fetch list of all beneficiaries | P0 | -| /self/beneficiaries/tpt/template | GET | Fetch account type options | P0 | -| /self/beneficiaries/tpt | POST | Create new beneficiary | P0 | -| /self/beneficiaries/tpt/{id} | PUT | Update beneficiary name/limit | P0 | -| /self/beneficiaries/tpt/{id} | DELETE | Delete a beneficiary | P0 | - ---- - -## 7. Edge Cases & Error Handling - -| Scenario | UI Behavior | Recovery | -|----------|-------------|----------| -| No internet | Show network error with retry | Auto-retry on reconnect | -| API timeout | Show error state | Pull-to-refresh or Retry button | -| Empty list | Show empty state with Add CTA | Tap "Add Beneficiary" | -| No filter results | Show "No filtered beneficiary found" | Reset filters | -| Invalid form input | Show field-level error messages | Fix errors and resubmit | -| Create failed | Navigate to status screen with failure | "Try Again" button | -| Update failed | Navigate to status screen with failure | "Try Again" button | -| Delete failed | Show error dialog | Dismiss and retry | -| Authentication failed | Stay on confirmation screen | Re-authenticate | -| Duplicate beneficiary | API error shown | Edit details | - ---- - -## 8. Form Validation Rules - -| Field | Validation | Error Message | -|-------|------------|---------------| -| Beneficiary Name | Required, non-empty | "Enter beneficiary name" | -| Account Number | Required (except UPDATE), non-empty | "Enter account number" | -| Account Type | Required (except UPDATE), must be selected | "Select account type" | -| Office Name | Required (except UPDATE), non-empty | "Enter office name" | -| Transfer Limit | Required, must be valid number | "Enter transfer limit" / "Invalid amount" | - ---- - -## 9. Navigation Flow - -``` -BeneficiaryNavRoute (Root) - | - +-- BeneficiaryListScreen (Start Destination) - | | - | +-- [Add] --> BeneficiaryApplicationScreen (CREATE_MANUAL) - | | | - | | +-- [Submit] --> BeneficiaryConfirmationScreen - | | | | - | | | +-- [Confirm] --> AuthenticateScreen - | | | | | - | | | | +-- [Success] --> StatusScreen - | | | | | - | | | | +-- [Failure] --> StatusScreen - | | | - | | +-- [QR Link] --> QRScreen - | | - | +-- [Card Tap] --> BeneficiaryDetailScreen - | | - | +-- [Update] --> BeneficiaryApplicationScreen (UPDATE) - | | | - | | +-- (same as above) - | | - | +-- [Delete] --> Confirmation Dialog - | | - | +-- [Confirm] --> Delete API --> NavigateBack -``` - ---- - -## 10. Performance Requirements - -| Metric | Target | Implementation | -|--------|--------|----------------| -| List load | < 1s | Lazy loading with LazyColumn | -| Filter apply | < 100ms | In-memory filtering | -| Form validation | Instant | Local validation | -| API calls | < 2s | Network timeout handling | -| Screen transition | < 300ms | Compose navigation | - ---- - -## 11. Accessibility - -| Feature | Implementation | -|---------|----------------| -| Screen Reader | contentDescription on all interactive elements | -| Font Scaling | Supports up to 200% scaling | -| Touch Targets | 48dp minimum tap target | -| Color Contrast | WCAG AA compliant (4.5:1) | -| Focus Navigation | Logical tab order through form fields | - ---- - -## 12. Security Considerations - -| Feature | Implementation | -|---------|----------------| -| Authentication | Required before create/update submission | -| Transfer Limit | Enforced per beneficiary | -| Account Validation | Server-side account number validation | -| Session Management | Uses existing auth session | - ---- - -## Changelog - -| Date | Change | -|------|--------| -| 2025-12-29 | Initial production-level specification based on implementation | diff --git a/claude-product-cycle/design-spec-layer/features/beneficiary/STATUS.md b/claude-product-cycle/design-spec-layer/features/beneficiary/STATUS.md deleted file mode 100644 index b69866a61..000000000 --- a/claude-product-cycle/design-spec-layer/features/beneficiary/STATUS.md +++ /dev/null @@ -1,68 +0,0 @@ -# Beneficiary Feature - Implementation Status - -> **Last Updated**: 2025-12-29 -> **Overall Status**: ✅ Done - ---- - -## Implementation Checklist - -- [x] SPEC.md created -- [x] API.md created -- [x] Network: Services exist (BeneficiaryService) -- [x] Data: Repository exists (BeneficiaryRepository) -- [x] Feature: ViewModels + Screens -- [x] Navigation: Routes registered -- [x] DI: Modules registered -- [x] STATUS.md updated - ---- - -## Layer Status - -| Layer | Status | Files | -|-------|--------|-------| -| Network | ✅ | BeneficiaryService.kt | -| Data | ✅ | BeneficiaryRepository.kt, BeneficiaryRepositoryImp.kt | -| Feature | ✅ | BeneficiaryListViewModel.kt, BeneficiaryListScreen.kt, BeneficiaryApplicationViewModel.kt, BeneficiaryApplicationScreen.kt, BeneficiaryDetailViewModel.kt, BeneficiaryDetailScreen.kt, BeneficiaryApplicationConfirmationViewModel.kt, BeneficiaryApplicationConfirmationScreen.kt | -| DI | ✅ | BeneficiaryModule.kt | -| Navigation | ✅ | BeneficiaryListNavigation.kt, BeneficiaryApplicationNavRoute.kt, BeneficiaryApplicationConfirmationNavigation.kt, BeneficiaryNavRoute.kt | - ---- - -## Files - -### Network Layer -- `core/network/services/BeneficiaryService.kt` - -### Data Layer -- `core/data/repository/BeneficiaryRepository.kt` -- `core/data/repositoryImpl/BeneficiaryRepositoryImp.kt` - -### Feature Layer -- `feature/beneficiary/beneficiaryList/BeneficiaryListViewModel.kt` -- `feature/beneficiary/beneficiaryList/BeneficiaryListScreen.kt` -- `feature/beneficiary/beneficiaryApplication/BeneficiaryApplicationViewModel.kt` -- `feature/beneficiary/beneficiaryApplication/BeneficiaryApplicationScreen.kt` -- `feature/beneficiary/beneficiaryApplication/BeneficiaryApplicationContent.kt` -- `feature/beneficiary/beneficiaryDetail/BeneficiaryDetailViewModel.kt` -- `feature/beneficiary/beneficiaryDetail/BeneficiaryDetailScreen.kt` -- `feature/beneficiary/beneficiaryDetail/BeneficiaryDetailContent.kt` -- `feature/beneficiary/beneficiaryApplicationConfirmation/BeneficiaryApplicationConfirmationViewModel.kt` -- `feature/beneficiary/beneficiaryApplicationConfirmation/BeneficiaryApplicationConfirmationScreen.kt` -- `feature/beneficiary/navigation/BeneficiaryNavRoute.kt` -- `feature/beneficiary/di/BeneficiaryModule.kt` - ---- - -## Gaps - -None identified. - ---- - -## Changelog - -| Date | Change | -|------|--------| -| 2025-12-29 | Initial status documentation | diff --git a/claude-product-cycle/design-spec-layer/features/beneficiary/mockups/PROMPTS_FIGMA.md b/claude-product-cycle/design-spec-layer/features/beneficiary/mockups/PROMPTS_FIGMA.md deleted file mode 100644 index 58b86e4b4..000000000 --- a/claude-product-cycle/design-spec-layer/features/beneficiary/mockups/PROMPTS_FIGMA.md +++ /dev/null @@ -1,349 +0,0 @@ -# Beneficiary - Figma First Draft Prompts - -> **Tool**: Figma First Draft (Shift+I in Figma) -> **Style**: Trusted Contacts Fintech, Material Design 3 -> **Format**: Natural language prompts optimized for Figma AI - ---- - -## How to Use - -1. Open Figma -> Create new design file -2. Press `Shift + I` or click "Actions" -> "First Draft" -3. Copy each prompt below -4. Generate -> Iterate -> Refine - ---- - -## Screen 1: Trusted Contacts Hub - -``` -Design a modern mobile trusted contacts hub for a fintech banking app inspired by Venmo and Zelle. - -At the top, show a back arrow with "Trusted Contacts" title and add contact/scan QR icons on the right. - -Add a search bar with a microphone icon for voice search. - -Create a stunning Favorites section with a purple gradient background. Show a star icon with "FAVORITES" header. Display horizontally scrolling circular avatars (64px) with user initials inside, names below, and total amount transferred to each. Include an "Add" button at the end. - -Add a Suggested section with "Suggested" header and "See All >" link. Show a suggestion card with avatar, name, context text like "Sent 3x this month - Monthly rent", and a gradient "Send $50" quick action button. - -Create filter chips in a row: All (selected with gradient), Family, Business, Account type dropdown. - -Show an alphabetically organized contacts list. Each contact card should have an avatar with a verification ring (green for verified, amber for pending), name in medium weight, masked account number, account type, a relationship tag chip (like "Family" or "Business"), a trust indicator badge, last transfer info, and a "Send" button on the right. - -Add a floating action button with gradient background and "+ Add" text in the bottom right corner. - -Style it like Venmo's contact list with trust indicators - clean and relationship-focused with purple accent colors. -``` - ---- - -## Screen 2: Contact Detail - -``` -Design a contact detail screen showing comprehensive information about a trusted payment contact. - -Show a back arrow with "Contact" title and star (favorite), edit, and menu icons on the right. - -Create a hero card with purple gradient background. Display a large circular avatar (80px) with a glowing green verification ring around it and initials inside. Show the contact name "John Doe" in large white text, masked account number with account type, and a trust badge showing "Trusted Contact" with checkmark. Add stats showing "24 transfers • Since Mar 2024". - -Add a Quick Actions row with three buttons: "Send Money" as a gradient filled button, "Schedule Payment" as outlined, and "Request Money" as outlined. - -Create a Transfer Summary card showing relationship analytics. Display two stat boxes side by side: "Total Sent $12,450" and "Total Received $3,200". Add a horizontal progress bar showing 80% sent in gradient color and 20% received in gray. Show additional stats: "Average Transfer: $518" and "Most Common: Monthly payment". - -Add a Recent Activity section with "See All >" link. Show transaction items with directional arrows (up-right for sent in red, down-left for received in green), amount, time ago, and description. Use dividers between items. - -Create an Account Information section with key-value pairs in a clean grid: Account Number with copy icon, Account Type, Office, Transfer Limit, Relationship tag, and Added On date. - -Add a security footer with lock icon showing "256-bit encryption • Verified contact". - -Make it feel like a trusted relationship hub with clear visual hierarchy. -``` - ---- - -## Screen 3: Quick Transfer from Contact - -``` -Design a quick transfer screen for sending money to a specific trusted contact. - -Show a back arrow with "Send to John" as the title. - -Create a recipient card at the top showing the contact's avatar with verified badge, name, masked account number, and "Trusted Contact" indicator. - -Add a large centered amount input showing "$0.00" that updates as the user types. Use a gradient underline below the amount. Show "Available: $5,420.00 in Savings" as helper text below. - -Create a Quick Amounts section with the label "Quick Amounts (based on history)". Show four amount chips: $250 labeled "Common", $500 labeled "Usual" with a star indicator (AI suggestion), $750, and $1,000. - -Add a Note section with "Add a note (optional)" label, an input field with placeholder "What's this for?", and chips for recent notes used with this contact like "Monthly rent" and "Utilities split". - -Display a custom number keypad in a 3x4 grid: numbers 1-9, decimal point, 0, and backspace. - -Add a full-width gradient button at the bottom: "Review Transfer ->". - -Style it for fast, frictionless payments with smart suggestions based on transfer history. -``` - ---- - -## Screen 4: Add New Contact - Smart Flow - -``` -Design an add new contact screen offering multiple methods to add trusted contacts. - -Show a back arrow with "Add Trusted Contact" title. - -Create a hero section with purple gradient background showing a group/people icon and "Add a Trusted Contact" header with "Choose how you'd like to add a new contact" subtitle. - -Display four method cards stacked vertically: - -1. First card (recommended) - Use gradient background with camera icon, "Scan QR Code" title, "Instantly add by scanning their QR" description, and a "Fast" badge with star. - -2. Second card - Phone icon with "From Phone Contacts" title and "Import from your existing contacts" description. - -3. Third card - Pencil icon with "Enter Manually" title and "Type account details directly" description. - -4. Fourth card - Link icon with "Share Link" title and "Get your link to share with contacts" description. - -Add a tip card with a lightbulb icon explaining "QR scanning is the fastest and most secure way to add contacts with zero typing errors". - -Include a security footer with lock icon: "All contacts are verified before first transfer". - -Make the QR option stand out as the recommended path while keeping other options accessible. -``` - ---- - -## Screen 5: Manual Entry Flow - Step 1 Account - -``` -Design step 1 of a 4-step contact addition flow for entering account information. - -Show a back arrow with "Add Contact" title. - -Create a progress indicator with four connected steps: Account (active/filled), Office, Details, Review. Use a line connecting the steps with the current step highlighted in gradient color. - -Add a section header with gradient background showing a bank icon and "Account Information" title. - -Create an Account Number input field with label "Account Number *", a text field prefixed with "SA-", a paste/copy icon, and helper text "Enter the complete account number". - -Add an Account Type selector with label "Account Type *" and three radio card options stacked vertically: "Savings Account" (selected with gradient border, marked "Most common for transfers"), "Loan Account" ("For loan repayments"), and "Share Account" ("For share purchases"). - -Include a full-width gradient "Continue ->" button at the bottom. - -Style it as a clean form wizard with clear progress indication. -``` - ---- - -## Screen 6: Manual Entry Flow - Step 2 Office - -``` -Design step 2 of the contact addition flow for selecting office/branch. - -Show a back arrow with "Add Contact" title. - -Create a progress indicator showing Account (checkmarked complete), Office (active/filled), Details, Review. - -Add a section header with gradient background showing a building icon and "Office / Branch" title. - -Include a search input with placeholder "Search offices...". - -Create a Popular Offices section with radio cards for: "Head Office" (selected with gradient, has "Popular" badge, "Main branch, downtown"), "Branch Office" ("Secondary branch, midtown"), and "Regional Center" ("Regional hub, north district"). - -Add a Transfer Limit input section with label "Transfer Limit *", a large editable amount "$10,000", and quick set chips: $5,000, $10,000 (starred as most common), $25,000, $50,000. - -Include two navigation buttons at the bottom: "← Back" as outlined and "Continue →" as gradient filled. -``` - ---- - -## Screen 7: Manual Entry Flow - Step 3 Details - -``` -Design step 3 of the contact addition flow for entering contact details. - -Show a back arrow with "Add Contact" title. - -Create a progress indicator showing Account and Office (checkmarked), Details (active/filled), Review. - -Add a section header with gradient background showing a person icon and "Contact Details" title. - -Create a Contact Name input with label "Contact Name *", text field showing "John Doe", and helper text "How you'll recognize this contact". - -Add a Relationship Tags section with label "Relationship Tag (optional)" and a 2x4 chip grid: Family (with emoji), Friend, Business, Landlord, Vendor, School, Medical, and Custom (+). - -Include a checkbox option "Add to Favorites" with helper text "Quick access from home screen". - -Create a live Preview section showing how the contact card will appear with the entered information. - -Include navigation buttons: "← Back" and "Review & Save →" gradient button. -``` - ---- - -## Screen 8: Manual Entry Flow - Step 4 Review - -``` -Design the final review step of the contact addition flow. - -Show a back arrow with "Add Contact" title. - -Create a progress indicator showing all previous steps checkmarked and Review as active. - -Add a section header with gradient background showing a checkmark icon and "Review & Confirm" title. - -Display a centered avatar section with large initials "JD", name "John Doe" below, and relationship tag "Business Partner". - -Create a details card with key-value rows, each with an edit pencil icon on the right: Account Number (SA-0001234567), Account Type (Savings Account with icon), Office (Head Office with icon), Transfer Limit ($10,000.00), and Relationship (Business Partner with icon). - -Add two security badges: lock icon with "Contact will be verified before first transfer" and shield icon with "Protected by 256-bit encryption". - -Include navigation buttons: "← Back" and "Add Trusted Contact" as the primary gradient action. - -Make it feel like a final confirmation with easy inline editing. -``` - ---- - -## Screen 9: Contact Added Success - -``` -Design a success screen celebrating a newly added contact. - -Center a large success animation with a green circular checkmark that has a drawing animation. Add confetti particles floating around. - -Show "Contact Added!" as the main headline in large bold text. - -Display the newly added contact in a preview card: avatar with initials, name, masked account number, and relationship tag. - -Add a verification notice with hourglass icon: "Verification pending" with "First transfer will verify" explanation. - -Include two action buttons: "Send Money Now ->" as the primary gradient button (most likely next action) and "Back to Contacts" as a secondary outlined button. - -Make it feel celebratory and guide the user toward their next action. -``` - ---- - -## Screen 10: Edit Contact - -``` -Design an edit contact screen allowing modification of editable fields. - -Show a back arrow with "Edit Contact" title and "Save" text button on the right. - -Create a hero section with gradient background showing the contact's avatar and masked account number (non-editable). - -Add an info banner with info icon explaining "Only name, relationship, and limit can be changed". - -Create editable fields: Contact Name with edit pencil icon, Account Number locked with lock icon and explanation "Cannot be changed for security", Relationship Tags as a chip selector with current selection highlighted, and Transfer Limit as an editable amount with note "Increased from $10,000". - -Include two buttons: "Save Changes" as gradient primary and "Remove Contact" as a red/danger outlined button. - -Clearly distinguish between editable and locked fields for security. -``` - ---- - -## Screen 11: Delete Confirmation Modal - -``` -Design a confirmation modal for removing a trusted contact. - -Create a dimmed background overlay. - -Show a centered modal card with 24dp rounded corners. - -Display a large amber warning triangle icon at the top. - -Add the title "Remove Trusted Contact?" in bold. - -Show a preview of the contact being deleted: avatar, name, masked account number, with stats "24 transfers • $15,650 total" to emphasize the relationship history. - -Include warning text: "This will remove John from your trusted contacts. You'll need to add them again to send money." Add a warning icon with "This cannot be undone". - -Display two action buttons: "Cancel" as outlined (safe option) and "Remove" as red filled (destructive action). - -Make the consequences clear while keeping the safe option prominent. -``` - ---- - -## Screen 12: Empty State - -``` -Design an empty state for when the user has no trusted contacts. - -Keep the header with "Trusted Contacts" title and add/scan icons. - -Show the search bar as visible but inactive. - -Center a friendly illustration of people/contacts with a subtle floating animation. - -Display "No Trusted Contacts Yet" as the headline with "Add your first contact to start sending money securely" as the description. - -Create a benefits list with checkmarks: Quick one-tap transfers, Secure verified contacts, Track payment history, Organized with tags. - -Add a prominent gradient button: "Add Your First Contact". - -Make it feel welcoming and motivating, not empty or broken. -``` - ---- - -## Component Prompts - -### Trust Badge Component -``` -Design a trust verification badge component. - -Create two variants: -1. Verified: Green background pill with white checkmark icon and "Trusted Contact" text -2. Pending: Amber background pill with hourglass icon and "Pending Verification" text - -Height should be 24dp with rounded pill shape. -``` - -### Contact Card Component -``` -Design a contact card for the contacts list. - -Create a full-width card about 88dp tall with 16dp padding. - -On the left, show a 48dp circular avatar with a colored ring around it (green for verified, amber for pending) and initials inside. - -Show the contact name in medium weight, masked account number and type in smaller gray text below. - -Add a relationship tag chip (like "Family" with emoji). - -Show a trust indicator badge. - -Display last transfer info in small text. - -Include a "Send" button on the right side. - -Add swipe actions for Edit and Delete. -``` - ---- - -## Tips for Figma First Draft - -1. **Iterate**: Generate once, then refine with follow-up prompts -2. **Colors**: Use "#667EEA to #764BA2" for primary gradient -3. **Reference**: Say "like Venmo" or "Zelle trusted contacts" for context -4. **Trust Indicators**: Emphasize verified vs pending states -5. **Relationships**: Include tags and transfer history -6. **Responsive**: Mention "393px width for mobile" for correct sizing - ---- - -## After Generation - -1. Review generated designs for consistency -2. Create a color style library -3. Build component variants for trust states -4. Link screens with prototype connections -5. Export and update `FIGMA_LINKS.md` diff --git a/claude-product-cycle/design-spec-layer/features/beneficiary/mockups/PROMPTS_STITCH.md b/claude-product-cycle/design-spec-layer/features/beneficiary/mockups/PROMPTS_STITCH.md deleted file mode 100644 index 6acc2a480..000000000 --- a/claude-product-cycle/design-spec-layer/features/beneficiary/mockups/PROMPTS_STITCH.md +++ /dev/null @@ -1,495 +0,0 @@ -# Beneficiary - Google Stitch Prompts - -> **Tool**: [Google Stitch](https://stitch.withgoogle.com) -> **Style**: Material Design 3, Trusted Contacts Fintech -> **Format**: Copy each prompt block directly into Stitch - ---- - -## Design System Reference - -``` -Primary Gradient: #667EEA -> #764BA2 -Secondary Gradient: #11998E -> #38EF7D -Success/Verified: #00D09C -Warning/Pending: #FFB800 -Error/Danger: #FF4757 -Text Primary: #1F2937 -Text Secondary: #6B7280 -Surface: #FFFFFF -Screen Size: 393 x 852 pixels (Android) -``` - ---- - -## Screen 1: Trusted Contacts Hub - -``` -Mobile trusted contacts hub, Material Design 3, fintech, 393x852px - -Top Bar: -- Back arrow, "Trusted Contacts" title -- Add contact, scan QR icons right - -Search Bar: -- Search input with mic icon - -Favorites Section: -- Primary gradient background card -- Star icon "FAVORITES" header -- Horizontal scroll avatars 64dp -- Each: initials, name, total transferred -- Add button at end - -Suggested Section: -- "Suggested" header with "See All >" -- Card: avatar, name, context, gradient "Send $50" button -- Based on AI/history - -Filter Chips: -- All (selected), Family, Business, Account type - -Contacts List: -- Alphabetical sections: "A", "J" etc. -- Contact cards: - - Avatar with verified badge (green ring) or pending (amber) - - Name, account masked, account type - - Relationship tag chip - - Trust indicator: checkmark "Trusted" or hourglass "Pending" - - Last transfer info - - Send button on right - -FAB: -- Gradient "+ Add" floating button bottom right - -Bottom Navigation: -- Home, Accounts, FAB Transfer, Profile -``` - ---- - -## Screen 2: Contact Detail - -``` -Mobile contact detail, Material Design 3, fintech, 393x852px - -Top Bar: -- Back arrow, "Contact" title -- Star (favorite), edit, menu icons - -Hero Card: -- Primary gradient full width -- Large avatar with verified badge (green glow ring) -- Initials "JD" inside avatar -- Name "John Doe" 24sp white -- Account masked "****4567 • Savings" -- Trust badge: checkmark "Trusted Contact" -- Stats: "24 transfers • Since Mar 2024" - -Quick Actions Row: -- Three buttons: "Send Money" (gradient filled), "Schedule Payment", "Request Money" - -Transfer Summary Card: -- "Transfer Summary" header -- Two stat boxes: "Total Sent $12,450" | "Total Received $3,200" -- Horizontal bar: 80% sent (gradient), 20% received (gray) -- Stats: "Average Transfer: $518", "Most Common: Monthly payment" - -Recent Activity Section: -- "Recent Activity" header with "See All >" -- Transaction items: - - Arrow up-right (sent) or down-left (received) - - "Sent $500", "3 days ago", "Monthly rent payment" -- Dividers between items - -Account Information Card: -- "Account Information" header -- Key-value pairs: Account Number (with copy icon), Account Type, Office, Transfer Limit, Relationship tag, Added On - -Security Footer: -- Lock icon "256-bit encryption • Verified contact" -``` - ---- - -## Screen 3: Quick Transfer from Contact - -``` -Mobile quick transfer, Material Design 3, fintech, 393x852px - -Top Bar: -- Back arrow, "Send to John" title - -Recipient Card: -- Avatar with verified badge -- Name, account masked, "Trusted Contact" badge - -Amount Input: -- Large centered "$0.00" editable -- Underline primary gradient -- "Available: $5,420.00 in Savings" helper - -Quick Amounts Section: -- "Quick Amounts (based on history)" label -- Four chips: $250 "Common", $500 "Usual" (starred), $750, $1,000 - -Note Section: -- "Add a note (optional)" label -- Input field "What's this for?" -- Recent notes chips: "Monthly rent", "Utilities split" - -Number Keypad: -- 3x4 grid: 1-9, ., 0, backspace - -Continue Button: -- Full width gradient "Review Transfer ->" -``` - ---- - -## Screen 4: Add New Contact - Smart Flow - -``` -Mobile add contact methods, Material Design 3, fintech, 393x852px - -Top Bar: -- Back arrow, "Add Trusted Contact" title - -Hero Section: -- Primary gradient -- Group icon "Add a Trusted Contact" -- "Choose how you'd like to add a new contact" - -Method Cards: -- Card 1 (gradient, recommended): - - Camera icon "Scan QR Code" - - "Instantly add by scanning their QR" - - Star badge "Fast" -- Card 2: - - Phone icon "From Phone Contacts" - - "Import from your existing contacts" -- Card 3: - - Pencil icon "Enter Manually" - - "Type account details directly" -- Card 4: - - Link icon "Share Link" - - "Get your link to share with contacts" - -Tip Card: -- Lightbulb icon -- "QR scanning is the fastest and most secure way to add contacts with zero typing errors" - -Security Footer: -- Lock icon "All contacts are verified before first transfer" -``` - ---- - -## Screen 5: Manual Entry Step 1 - Account - -``` -Mobile add contact step 1, Material Design 3, fintech, 393x852px - -Top Bar: -- Back arrow, "Add Contact" title - -Progress Indicator: -- Four steps: Account (filled), Office, Details, Review -- Connected line between steps - -Section Header: -- Primary gradient "Account Information" with bank icon - -Account Number Input: -- Label "Account Number *" -- Text field with "SA-" prefix, paste icon -- Helper text "Enter the complete account number" - -Account Type Selector: -- Label "Account Type *" -- Three radio cards: - - Savings Account (gradient selected, "Most common") - - Loan Account - - Share Account - -Continue Button: -- Full width gradient "Continue ->" -``` - ---- - -## Screen 6: Manual Entry Step 2 - Office - -``` -Mobile add contact step 2, Material Design 3, fintech, 393x852px - -Top Bar: -- Back arrow, "Add Contact" title - -Progress Indicator: -- Account (checkmark), Office (filled), Details, Review - -Section Header: -- Primary gradient "Office / Branch" with building icon - -Search Input: -- Search icon "Search offices..." - -Popular Offices: -- "Popular Offices" label -- Radio cards: - - Head Office (gradient selected, "Popular" badge) - - Branch Office - - Regional Center -- Each with icon, name, description - -Transfer Limit Input: -- Label "Transfer Limit *" -- Large "$10,000" editable -- Quick set chips: $5,000, $10,000 (starred), $25,000, $50,000 - -Navigation Buttons: -- "Back" outline, "Continue ->" gradient -``` - ---- - -## Screen 7: Manual Entry Step 3 - Details - -``` -Mobile add contact step 3, Material Design 3, fintech, 393x852px - -Top Bar: -- Back arrow, "Add Contact" title - -Progress Indicator: -- Account (check), Office (check), Details (filled), Review - -Section Header: -- Primary gradient "Contact Details" with person icon - -Contact Name Input: -- Label "Contact Name *" -- Text field "John Doe" -- Helper "How you'll recognize this contact" - -Relationship Tags: -- Label "Relationship Tag (optional)" -- Chip grid 2x4: - - Family, Friend, Business, Landlord - - Vendor, School, Medical, Custom + - -Favorite Checkbox: -- Unchecked "Add to Favorites" -- Helper "Quick access from home screen" - -Preview Card: -- "Preview:" label -- Contact card mockup with entered data - -Navigation Buttons: -- "Back" outline, "Review & Save ->" gradient -``` - ---- - -## Screen 8: Manual Entry Step 4 - Review - -``` -Mobile add contact step 4, Material Design 3, fintech, 393x852px - -Top Bar: -- Back arrow, "Add Contact" title - -Progress Indicator: -- All steps checkmarked, Review filled - -Section Header: -- Primary gradient "Review & Confirm" with checkmark icon - -Avatar Section: -- Large centered avatar "JD" -- Name "John Doe" -- Relationship tag "Business Partner" - -Details Card: -- Key-value rows with edit pencil icons: - - Account Number: SA-0001234567 - - Account Type: Savings Account - - Office: Head Office - - Transfer Limit: $10,000.00 - - Relationship: Business Partner - -Security Badges: -- Lock "Contact will be verified before first transfer" -- Shield "Protected by 256-bit encryption" - -Navigation Buttons: -- "Back" outline, "Add Trusted Contact" gradient -``` - ---- - -## Screen 9: Contact Added Success - -``` -Mobile contact added success, Material Design 3, 393x852px - -Success Animation: -- Animated checkmark in green circle -- Confetti particles - -Success Message: -- "Contact Added!" 28sp bold - -Contact Preview Card: -- Avatar "JD" -- Name "John Doe" -- Account masked, relationship tag - -Verification Notice: -- Hourglass icon "Verification pending" -- "First transfer will verify" - -Action Buttons: -- "Send Money Now ->" gradient primary -- "Back to Contacts" outline secondary -``` - ---- - -## Screen 10: Edit Contact - -``` -Mobile edit contact, Material Design 3, fintech, 393x852px - -Top Bar: -- Back arrow, "Edit Contact" title, "Save" text button - -Hero Section: -- Primary gradient -- Avatar "JD" -- Account number masked - -Info Banner: -- Info icon "Only name, relationship, and limit can be changed" - -Editable Fields: -- Contact Name: "John Doe" with edit pencil -- Account Number: locked with lock icon -- Relationship Tags: chip selector with Business selected -- Transfer Limit: "$15,000" editable - -Buttons: -- "Save Changes" gradient primary -- "Remove Contact" red/danger outline -``` - ---- - -## Screen 11: Delete Confirmation Modal - -``` -Mobile delete confirmation modal, Material Design 3 - -Dimmed Background - -Modal Card: -- 24dp corners, centered - -Warning Icon: -- Amber warning triangle - -Title: -- "Remove Trusted Contact?" - -Contact Preview: -- Avatar, name, account masked -- Stats: "24 transfers • $15,650 total" - -Warning Text: -- "This will remove John from your trusted contacts." -- "You'll need to add them again to send money." -- Warning icon "This cannot be undone" - -Buttons: -- "Cancel" outline -- "Remove" red filled -``` - ---- - -## Screen 12: Empty State - -``` -Mobile beneficiaries empty state, Material Design 3, 393x852px - -Top Bar: -- Back arrow, "Trusted Contacts" title -- Add, scan icons - -Search Bar visible - -Center Content: -- Floating people illustration -- "No Trusted Contacts Yet" 20sp bold -- "Add your first contact to start sending money securely" - -Benefits List: -- Checkmarks: Quick one-tap transfers, Secure verified contacts, Track payment history, Organized with tags - -CTA Button: -- Gradient "Add Your First Contact" -``` - ---- - -## Components - -### ContactCard -``` -Contact card component, Material Design 3: -- Height: 88dp, padding: 16dp -- Avatar: 48dp with status ring (green verified, amber pending) -- Name: 16sp Medium, account: 14sp Regular -- Relationship chip, trust badge -- Send button on right -- Swipe actions: Edit, Delete -``` - -### TrustBadge -``` -Trust badge component, Material Design 3: -- Verified: green checkmark, "Trusted Contact" -- Pending: amber hourglass, "Pending Verification" -- Height: 24dp pill shape -``` - -### QuickAmountChip -``` -Quick amount chip, Material Design 3: -- Height: 48dp -- Amount: 16sp Medium -- Helper label: 12sp Secondary -- Selected: gradient fill, white text -- Starred: sparkle indicator -``` - -### RelationshipTag -``` -Relationship tag chip, Material Design 3: -- Height: 32dp -- Emoji prefix: Family, Friend, Business, etc. -- Selected: primary border, tinted background -- Unselected: gray outline -``` - ---- - -## Quick Start - -1. Open [stitch.withgoogle.com](https://stitch.withgoogle.com) -2. Create project "Mifos Mobile - Beneficiary" -3. Copy each screen prompt -> Generate -4. Generate components separately for reuse -5. Export all to Figma when done diff --git a/claude-product-cycle/design-spec-layer/features/beneficiary/mockups/dummy/01-beneficiary-list.png b/claude-product-cycle/design-spec-layer/features/beneficiary/mockups/dummy/01-beneficiary-list.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/beneficiary/mockups/dummy/02-beneficiary-detail.png b/claude-product-cycle/design-spec-layer/features/beneficiary/mockups/dummy/02-beneficiary-detail.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/beneficiary/mockups/dummy/03-add-beneficiary.png b/claude-product-cycle/design-spec-layer/features/beneficiary/mockups/dummy/03-add-beneficiary.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/beneficiary/mockups/dummy/04-edit-beneficiary.png b/claude-product-cycle/design-spec-layer/features/beneficiary/mockups/dummy/04-edit-beneficiary.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/beneficiary/mockups/dummy/05-beneficiary-empty.png b/claude-product-cycle/design-spec-layer/features/beneficiary/mockups/dummy/05-beneficiary-empty.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/beneficiary/mockups/dummy/06-beneficiary-success.png b/claude-product-cycle/design-spec-layer/features/beneficiary/mockups/dummy/06-beneficiary-success.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/client-charge/API.md b/claude-product-cycle/design-spec-layer/features/client-charge/API.md deleted file mode 100644 index e45019b00..000000000 --- a/claude-product-cycle/design-spec-layer/features/client-charge/API.md +++ /dev/null @@ -1,579 +0,0 @@ -# Client Charges - API Reference - -> **Last Updated**: 2025-12-29 - ---- - -## Base URL - -``` -https://tt.mifos.community/fineract-provider/api/v1/self/ -``` - ---- - -## Endpoints Required - -### 1. Get Client Charges - -**Endpoint**: `GET /clients/{clientId}/charges` - -**Purpose**: Fetches all charges associated with the client (paginated response) - -**Request**: -``` -Headers: - Authorization: Basic {token} - Fineract-Platform-TenantId: {tenant} -``` - -**Response**: -```json -{ - "totalFilteredRecords": 3, - "pageItems": [ - { - "clientId": 1, - "chargeId": 101, - "name": "Processing Fee", - "dueDate": [2025, 1, 15], - "chargeTimeType": { - "id": 2, - "code": "chargeTimeType.specifiedDueDate", - "value": "Specified due date" - }, - "chargeCalculationType": { - "id": 1, - "code": "chargeCalculationType.flat", - "value": "Flat" - }, - "currency": { - "code": "USD", - "name": "US Dollar", - "decimalPlaces": 2, - "displaySymbol": "$", - "nameCode": "currency.USD", - "displayLabel": "US Dollar ($)" - }, - "amount": 50.00, - "amountPaid": 0.00, - "amountWaived": 0.00, - "amountWrittenOff": 0.00, - "amountOutstanding": 50.00, - "penalty": false, - "isActive": true, - "isChargePaid": false, - "isChargeWaived": false, - "paid": false, - "waived": false - }, - { - "clientId": 1, - "chargeId": 102, - "name": "Annual Maintenance Fee", - "dueDate": [2024, 12, 1], - "chargeTimeType": { - "id": 1, - "code": "chargeTimeType.annual", - "value": "Annual" - }, - "chargeCalculationType": { - "id": 1, - "code": "chargeCalculationType.flat", - "value": "Flat" - }, - "currency": { - "code": "USD", - "name": "US Dollar", - "decimalPlaces": 2, - "displaySymbol": "$", - "nameCode": "currency.USD", - "displayLabel": "US Dollar ($)" - }, - "amount": 25.00, - "amountPaid": 25.00, - "amountWaived": 0.00, - "amountWrittenOff": 0.00, - "amountOutstanding": 0.00, - "penalty": false, - "isActive": false, - "isChargePaid": true, - "isChargeWaived": false, - "paid": true, - "waived": false - } - ] -} -``` - -**Kotlin DTO**: Uses `Page` from `core/model/entity/` - -**Status**: Implemented in `ClientChargeService` - ---- - -### 2. Get Loan Charges - -**Endpoint**: `GET /loans/{loanId}/charges` - -**Purpose**: Fetches charges for a specific loan account - -**Request**: -``` -Headers: - Authorization: Basic {token} - Fineract-Platform-TenantId: {tenant} -``` - -**Response**: -```json -[ - { - "chargeId": 201, - "name": "Disbursement Fee", - "dueDate": [2024, 11, 1], - "chargeTimeType": { - "id": 1, - "code": "chargeTimeType.disbursement", - "value": "Disbursement" - }, - "chargeCalculationType": { - "id": 2, - "code": "chargeCalculationType.percentageOfAmount", - "value": "% Amount" - }, - "currency": { - "code": "USD", - "name": "US Dollar", - "decimalPlaces": 2, - "displaySymbol": "$" - }, - "amount": 100.00, - "amountPaid": 100.00, - "amountWaived": 0.00, - "amountWrittenOff": 0.00, - "amountOutstanding": 0.00, - "penalty": false, - "isActive": false, - "isChargePaid": true, - "paid": true, - "waived": false - }, - { - "chargeId": 202, - "name": "Late Payment Penalty", - "dueDate": [2025, 1, 1], - "chargeTimeType": { - "id": 9, - "code": "chargeTimeType.overdueInstallment", - "value": "Overdue Installment" - }, - "chargeCalculationType": { - "id": 1, - "code": "chargeCalculationType.flat", - "value": "Flat" - }, - "currency": { - "code": "USD", - "name": "US Dollar", - "decimalPlaces": 2, - "displaySymbol": "$" - }, - "amount": 15.00, - "amountPaid": 0.00, - "amountWaived": 0.00, - "amountWrittenOff": 0.00, - "amountOutstanding": 15.00, - "penalty": true, - "isActive": true, - "isChargePaid": false, - "paid": false, - "waived": false - } -] -``` - -**Kotlin DTO**: Uses `List` from `core/model/entity/` - -**Status**: Implemented in `ClientChargeService` - ---- - -### 3. Get Savings Account Charges - -**Endpoint**: `GET /savingsaccounts/{accountId}/charges` - -**Purpose**: Fetches charges for a specific savings account - -**Request**: -``` -Headers: - Authorization: Basic {token} - Fineract-Platform-TenantId: {tenant} -``` - -**Response**: -```json -[ - { - "chargeId": 301, - "name": "Account Opening Fee", - "dueDate": [2024, 6, 1], - "chargeTimeType": { - "id": 1, - "code": "chargeTimeType.savingsActivation", - "value": "Savings Activation" - }, - "chargeCalculationType": { - "id": 1, - "code": "chargeCalculationType.flat", - "value": "Flat" - }, - "currency": { - "code": "USD", - "name": "US Dollar", - "decimalPlaces": 2, - "displaySymbol": "$" - }, - "amount": 10.00, - "amountPaid": 10.00, - "amountWaived": 0.00, - "amountWrittenOff": 0.00, - "amountOutstanding": 0.00, - "penalty": false, - "isActive": false, - "isChargePaid": true, - "paid": true, - "waived": false - }, - { - "chargeId": 302, - "name": "Monthly Service Fee", - "dueDate": [2025, 1, 31], - "chargeTimeType": { - "id": 3, - "code": "chargeTimeType.monthly", - "value": "Monthly Fee" - }, - "chargeCalculationType": { - "id": 1, - "code": "chargeCalculationType.flat", - "value": "Flat" - }, - "currency": { - "code": "USD", - "name": "US Dollar", - "decimalPlaces": 2, - "displaySymbol": "$" - }, - "amount": 5.00, - "amountPaid": 0.00, - "amountWaived": 0.00, - "amountWrittenOff": 0.00, - "amountOutstanding": 5.00, - "penalty": false, - "isActive": true, - "isChargePaid": false, - "paid": false, - "waived": false - } -] -``` - -**Kotlin DTO**: Uses `List` from `core/model/entity/` - -**Status**: Implemented in `ClientChargeService` - ---- - -### 4. Get Share Account Details (includes Charges) - -**Endpoint**: `GET /shareaccounts/{accountId}` - -**Purpose**: Fetches share account details which includes associated charges - -**Request**: -``` -Headers: - Authorization: Basic {token} - Fineract-Platform-TenantId: {tenant} -``` - -**Response**: -```json -{ - "id": 1, - "accountNo": "000000001", - "clientId": 1, - "productId": 1, - "productName": "Share Product", - "status": { - "id": 300, - "code": "shareAccountStatusType.active", - "value": "Active" - }, - "charges": [ - { - "chargeId": 401, - "name": "Share Purchase Fee", - "dueDate": [2024, 8, 1], - "chargeTimeType": { - "id": 13, - "code": "chargeTimeType.sharesPurchase", - "value": "Share Purchase" - }, - "chargeCalculationType": { - "id": 1, - "code": "chargeCalculationType.flat", - "value": "Flat" - }, - "currency": { - "code": "USD", - "name": "US Dollar", - "decimalPlaces": 2, - "displaySymbol": "$" - }, - "amount": 20.00, - "amountPaid": 20.00, - "amountWaived": 0.00, - "amountWrittenOff": 0.00, - "amountOutstanding": 0.00, - "penalty": false, - "isActive": false, - "isChargePaid": true, - "paid": true, - "waived": false - } - ] -} -``` - -**Kotlin DTO**: Uses `ShareAccountDetails` which contains `List` - -**Status**: Implemented in `ShareAccountService` - ---- - -## Kotlin DTOs - -### Charge - -```kotlin -// Location: core/model/src/commonMain/kotlin/org/mifos/mobile/core/model/entity/Charge.kt - -@Serializable -@Parcelize -data class Charge( - val clientId: Int? = null, - val chargeId: Int? = null, - val name: String? = null, - val dueDate: ArrayList = arrayListOf(), - val chargeTimeType: ChargeTimeType? = null, - val chargeCalculationType: ChargeCalculationType? = null, - val currency: Currency? = null, - val amount: Double = 0.0, - val amountPaid: Double = 0.0, - val amountWaived: Double = 0.0, - val amountWrittenOff: Double = 0.0, - val amountOutstanding: Double = 0.0, - val penalty: Boolean = false, - val isActive: Boolean = false, - val isChargePaid: Boolean = false, - val isChargeWaived: Boolean = false, - val paid: Boolean = false, - val waived: Boolean = false, -) : Parcelable -``` - -### ChargeTimeType - -```kotlin -// Location: core/model/src/commonMain/kotlin/org/mifos/mobile/core/model/entity/ChargeTimeType.kt - -@Serializable -@Parcelize -data class ChargeTimeType( - val id: Int = 0, - val code: String? = null, - val value: String? = null, -) : Parcelable -``` - -### ChargeCalculationType - -```kotlin -// Location: core/model/src/commonMain/kotlin/org/mifos/mobile/core/model/entity/ChargeCalculationType.kt - -@Parcelize -@Serializable -data class ChargeCalculationType( - val id: Int = 0, - val code: String? = null, - val value: String? = null, -) : Parcelable -``` - -### Currency - -```kotlin -// Location: core/model/src/commonMain/kotlin/org/mifos/mobile/core/model/entity/Currency.kt - -@Serializable -@Parcelize -data class Currency( - val code: String? = null, - val name: String? = null, - val decimalPlaces: Int = 0, - val inMultiplesOf: Double = 0.0, - val displaySymbol: String? = null, - val nameCode: String? = null, - val displayLabel: String? = null, -) : Parcelable -``` - -### Page - -```kotlin -// Location: core/model/src/commonMain/kotlin/org/mifos/mobile/core/model/entity/Page.kt - -@Serializable -data class Page( - val totalFilteredRecords: Int = 0, - val pageItems: List = emptyList(), -) -``` - -### ChargeType (Enum) - -```kotlin -// Location: core/model/src/commonMain/kotlin/org/mifos/mobile/core/model/enums/ChargeType.kt - -enum class ChargeType(val type: String) { - CLIENT("clients"), - SAVINGS("savingsaccounts"), - LOAN("loans"), - SHARE("shareaccounts"), -} -``` - ---- - -## Kotlin Implementation - -### Service (ClientChargeService.kt) - -```kotlin -// Location: core/network/src/commonMain/kotlin/org/mifos/mobile/core/network/services/ClientChargeService.kt - -interface ClientChargeService { - - @GET(ApiEndPoints.CLIENTS + "/{clientId}/charges") - fun getClientChargeList(@Path("clientId") clientId: Long): Flow> - - @GET("{chargeType}/{chargeTypeId}/charges") - fun getChargeList( - @Path("chargeType") chargeType: String, - @Path("chargeTypeId") chargeTypeId: Long, - ): Flow> -} -``` - -### Repository Interface (ClientChargeRepository.kt) - -```kotlin -// Location: core/data/src/commonMain/kotlin/org/mifos/mobile/core/data/repository/ClientChargeRepository.kt - -interface ClientChargeRepository { - - fun getCharges(clientId: Long): Flow>> - - fun getLoanOrSavingsCharges(chargeType: ChargeType, chargeTypeId: Long): Flow>> - - fun clientLocalCharges(): Flow>> - - suspend fun syncCharges(charges: Page?): DataState?> - - fun getShareAccountCharges(shareAccountId: Long): Flow>> -} -``` - -### Repository Implementation (ClientChargeRepositoryImp.kt) - -```kotlin -// Location: core/data/src/commonMain/kotlin/org/mifos/mobile/core/data/repositoryImpl/ClientChargeRepositoryImp.kt - -class ClientChargeRepositoryImp( - private val dataManager: DataManager, - private val ioDispatcher: CoroutineDispatcher, -) : ClientChargeRepository { - - override fun getCharges(clientId: Long): Flow>> { - return dataManager.clientChargeApi.getClientChargeList(clientId) - .map { response -> DataState.Success(response) } - .catch { exception -> DataState.Error(exception, exception.message) } - .flowOn(ioDispatcher) - } - - override fun getLoanOrSavingsCharges( - chargeType: ChargeType, - chargeTypeId: Long - ): Flow>> { - return dataManager.clientChargeApi.getChargeList(chargeType.type, chargeTypeId) - .map { response -> DataState.Success(response) } - .catch { exception -> DataState.Error(exception, exception.message) } - .flowOn(ioDispatcher) - } - - override fun getShareAccountCharges(shareAccountId: Long): Flow>> { - return dataManager.shareAccountApi.getShareAccountDetails(shareAccountId) - .map { response -> DataState.Success(response.charges) } - .catch { exception -> DataState.Error(exception, exception.message) } - .flowOn(ioDispatcher) - } - - // ... other methods -} -``` - ---- - -## API Summary - -| Endpoint | Method | Service | Repository | Response Type | Status | -|----------|--------|---------|------------|---------------|--------| -| `/clients/{id}/charges` | GET | ClientChargeService | ClientChargeRepository | `Page` | Implemented | -| `/loans/{id}/charges` | GET | ClientChargeService | ClientChargeRepository | `List` | Implemented | -| `/savingsaccounts/{id}/charges` | GET | ClientChargeService | ClientChargeRepository | `List` | Implemented | -| `/shareaccounts/{id}` | GET | ShareAccountService | ClientChargeRepository | `ShareAccountDetails` (contains charges) | Implemented | - ---- - -## Notes - -- **Client Charges**: Return paginated response with `Page` wrapper containing `totalFilteredRecords` and `pageItems` -- **Loan/Savings Charges**: Return direct `List` without pagination wrapper -- **Share Charges**: Retrieved via Share Account Details endpoint, extracted from `response.charges` -- **Currency Formatting**: Use `CurrencyFormatter.format()` with currency code from charge -- **Date Handling**: Due dates are arrays `[year, month, day]`, use `DateHelper.getDateAsString()` to format -- **Charge Status**: Check `isChargePaid` or `paid` boolean to determine payment status -- **Empty Due Date**: Handle empty `dueDate` array by showing "-" as fallback - ---- - -## Error Responses - -| Status Code | Description | Handling | -|-------------|-------------|----------| -| 401 | Unauthorized | Redirect to login | -| 403 | Forbidden | Show permission error | -| 404 | Account not found | Show "Account not found" error | -| 500 | Server error | Show generic server error with retry | - ---- - -## Changelog - -| Date | Change | -|------|--------| -| 2025-12-29 | Updated with complete DTOs, repository implementation, and detailed response examples from codebase analysis | -| 2025-12-29 | Initial API documentation | diff --git a/claude-product-cycle/design-spec-layer/features/client-charge/MOCKUP.md b/claude-product-cycle/design-spec-layer/features/client-charge/MOCKUP.md deleted file mode 100644 index 10c5ab52c..000000000 --- a/claude-product-cycle/design-spec-layer/features/client-charge/MOCKUP.md +++ /dev/null @@ -1,1525 +0,0 @@ -# Client Charges - UI Mockups - -> **Design Style**: 2025 Fintech - Smart Charges Hub -> **Pattern**: Intelligent Fee Management Experience -> **Primary Gradient**: #667EEA (Purple) -> #764BA2 (Deep Purple) -> **Version**: 2.0 (Redesigned) -> **Last Updated**: 2025-12-30 - ---- - -## Design Philosophy - -``` -+------------------------------------------------------------------+ -| SMART CHARGES HUB | -+------------------------------------------------------------------+ -| | -| 2025 Vision: | -| "Transform charges from a burden into manageable, | -| predictable financial obligations with smart tools" | -| | -| Key Innovations: | -| 1. AI Payment Scheduling (optimal payment dates) | -| 2. Payment Streak Gamification & Rewards | -| 3. Autopay Setup for Recurring Charges | -| 4. Split Payment Plans (installments) | -| 5. Due Date Calendar View | -| 6. Charge Insights & Analytics | -| 7. Smart Notifications (proactive reminders) | -| 8. Quick One-Tap Payments | -| 9. Financial Health Score Impact | -| 10. Charge Waiver Requests | -| | -| Competitive Inspiration: | -| - Klarna payment plans | -| - Credit Karma insights | -| - YNAB budgeting approach | -| - Mint financial tracking | -| | -+------------------------------------------------------------------+ -``` - ---- - -## Table of Contents -1. [Screen States](#screen-states) -2. [Component Specifications](#component-specifications) -3. [2025 Enhancement Features](#2025-enhancement-features) -4. [Interactions & Animations](#interactions--animations) -5. [Accessibility](#accessibility) -6. [Dark Mode](#dark-mode) -7. [Implementation Notes](#implementation-notes) - ---- - -## Screen States - -### 1. Smart Charges Dashboard (Primary State) - -The main charges screen with financial health integration, smart insights, and action-oriented design. - -``` -+------------------------------------------------------------------+ -| 9:41 5G 📶 🔋 85% | -+------------------------------------------------------------------+ -| | -| <- Back My Charges 📅 ⚙️ | -| | -+------------------------------------------------------------------+ -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ ██████████████████████████████████████████████████████████ │ | -| │ ██ ██ │ | -| │ ██ 💰 OUTSTANDING BALANCE ██ │ | -| │ ██ ██ │ | -| │ ██ $225.00 ██ │ | -| │ ██ ═══════ ██ │ | -| │ ██ ██ │ | -| │ ██ ┌──────────┐ ┌──────────┐ ┌──────────┐ ██ │ | -| │ ██ │ Total │ │ Paid │ │ Waived │ ██ │ | -| │ ██ │ $500.00 │ │ $250.00 │ │ $25.00 │ ██ │ | -| │ ██ │ ░░░░░░ │ │ 🟢 │ │ 🟡 │ ██ │ | -| │ ██ └──────────┘ └──────────┘ └──────────┘ ██ │ | -| │ ██ ██ │ | -| │ ██ 🔥 On-Time Streak: 5 payments ██ │ | -| │ ██ ████████████████████░░░░░ Next reward at 10! ██ │ | -| │ ██ ██ │ | -| │ ██████████████████████████████████████████████████████████ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ ⚡ QUICK ACTIONS │ | -| │ │ | -| │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ | -| │ │ 💳 │ │ 🔄 │ │ 📅 │ │ 📊 │ │ | -| │ │ Pay │ │ Autopay │ │ Calendar │ │ Insights │ │ | -| │ │ All │ │ Setup │ │ View │ │ │ │ | -| │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ 🏦 All 📄 Loan 💰 Savings 📈 Share │ | -| │ ──── ○ ○ ○ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ ⚠️ DUE SOON (2) View > │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ │ │ | -| │ │ ┌────┐ │ │ | -| │ │ │ 📄 │ Loan Processing Fee > │ │ | -| │ │ │🔴 │ LOAN-001234 │ │ | -| │ │ └────┘ │ │ | -| │ │ │ │ | -| │ │ Due: Tomorrow • $150.00 outstanding │ │ | -| │ │ │ │ | -| │ │ ┌────────────────────────────────────────────────┐ │ │ | -| │ │ │ ⚠️ PENALTY │ 75% paid │ ⏱️ Due in 1 day │ │ │ | -| │ │ └────────────────────────────────────────────────┘ │ │ | -| │ │ │ │ | -| │ │ ┌───────────────────┐ ┌───────────────────┐ │ │ | -| │ │ │ 💳 Pay $150.00 │ │ 📆 Split Payment │ │ │ | -| │ │ └───────────────────┘ └───────────────────┘ │ │ | -| │ │ │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ │ │ | -| │ │ ┌────┐ │ │ | -| │ │ │ 💰 │ Account Maintenance Fee > │ │ | -| │ │ │🟡 │ SAV-005678 │ │ | -| │ │ └────┘ │ │ | -| │ │ │ │ | -| │ │ Due: Jan 20, 2025 • $50.00 │ │ | -| │ │ │ │ | -| │ │ ┌────────────────────────────────────────────────┐ │ │ | -| │ │ │ ⏱️ Due in 5 days │ 🔄 Autopay enabled │ │ │ | -| │ │ └────────────────────────────────────────────────┘ │ │ | -| │ │ │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ ✅ RECENTLY PAID (2) View > │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ ┌────┐ │ │ | -| │ │ │ ✓ │ Annual Service Fee $50.00 PAID │ │ | -| │ │ │ 🟢 │ Dec 01, 2024 +5 pts earned │ │ | -| │ │ └────┘ │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -+------------------------------------------------------------------+ -``` - -**Payment Streak Component:** -``` -+------------------------------------------------------------------+ -| PAYMENT STREAK GAMIFICATION | -+------------------------------------------------------------------+ -| | -| Purpose: Reward on-time payments to build positive habits | -| | -| Visual Design: | -| - Fire icon (🔥) for active streaks | -| - Progress bar showing streak progress to next reward | -| - Milestone badges at 5, 10, 25, 50, 100 payments | -| | -| Rewards: | -| - 5 payments: Bronze badge + 50 bonus points | -| - 10 payments: Silver badge + fee waiver chance | -| - 25 payments: Gold badge + priority support | -| - 50 payments: Platinum badge + reduced rates | -| | -| Breaking Streak: | -| - Late payment resets streak to 0 | -| - Grace period: 3 days past due before reset | -| - "Streak Shield" power-up (earned) can protect once | -| | -+------------------------------------------------------------------+ -``` - ---- - -### 2. Due Date Calendar View - -Visual calendar showing all upcoming charge due dates. - -``` -+------------------------------------------------------------------+ -| 9:41 5G 📶 🔋 85% | -+------------------------------------------------------------------+ -| | -| <- Back Payment Calendar | -| | -+------------------------------------------------------------------+ -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ < January 2025 > │ | -| │ │ | -| │ Mo Tu We Th Fr Sa Su │ | -| │ │ | -| │ 1 2 3 4 5 6 │ | -| │ ● │ | -| │ │ | -| │ 7 8 9 10 11 12 13 │ | -| │ │ | -| │ │ | -| │ 14 15 16 17 18 19 20 │ | -| │ 🔴 🟡 │ | -| │ $150 $50 │ | -| │ │ | -| │ 21 22 23 24 25 26 27 │ | -| │ │ | -| │ │ | -| │ 28 29 30 31 │ | -| │ │ | -| │ Legend: │ | -| │ 🔴 Overdue/Penalty 🟡 Due Soon 🟢 Upcoming ✓ Paid │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ 📅 JANUARY 15 - DUE │ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ │ │ | -| │ │ 📄 Loan Processing Fee $150.00 │ │ | -| │ │ LOAN-001234 • Penalty charge │ │ | -| │ │ │ │ | -| │ │ ┌─────────────────────────────────────────────────┐ │ │ | -| │ │ │ Pay Now │ │ │ | -| │ │ └─────────────────────────────────────────────────┘ │ │ | -| │ │ │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ 📅 JANUARY 20 - DUE │ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ │ │ | -| │ │ 💰 Account Maintenance Fee $50.00 │ │ | -| │ │ SAV-005678 • Autopay scheduled │ │ | -| │ │ │ │ | -| │ │ ┌─────────────────────────────────────────────────┐ │ │ | -| │ │ │ 🔄 Will be auto-paid from Savings ****4521 │ │ │ | -| │ │ └─────────────────────────────────────────────────┘ │ │ | -| │ │ │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ 💡 AI TIP │ | -| │ │ | -| │ Based on your cash flow, the best day to pay the │ | -| │ $150 charge is January 10th when your balance is highest. │ | -| │ │ | -| │ ┌───────────────────────────────────────────────────────┐ │ | -| │ │ Schedule Payment for Jan 10 │ │ | -| │ └───────────────────────────────────────────────────────┘ │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -+------------------------------------------------------------------+ -``` - ---- - -### 3. Charge Detail Screen (Enhanced) - -Comprehensive charge details with payment options, history, and smart actions. - -``` -+------------------------------------------------------------------+ -| 9:41 5G 📶 🔋 85% | -+------------------------------------------------------------------+ -| | -| <- Back Charge Details ⋮ More | -| | -+------------------------------------------------------------------+ -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ ██████████████████████████████████████████████████████████ │ | -| │ ██ ██ │ | -| │ ██ ┌────────┐ ██ │ | -| │ ██ │ 📄 │ LOAN PROCESSING FEE ██ │ | -| │ ██ │ │ Loan Account: LOAN-001234 ██ │ | -| │ ██ └────────┘ ██ │ | -| │ ██ ██ │ | -| │ ██ $150.00 ██ │ | -| │ ██ ═══════ ██ │ | -| │ ██ Outstanding ██ │ | -| │ ██ ██ │ | -| │ ██ ┌──────────────────┐ ┌──────────────────┐ ██ │ | -| │ ██ │ ⚠️ PENALTY │ │ ⏱️ Due Tomorrow │ ██ │ | -| │ ██ └──────────────────┘ └──────────────────┘ ██ │ | -| │ ██ ██ │ | -| │ ██████████████████████████████████████████████████████████ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ 💵 AMOUNT BREAKDOWN │ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ │ │ | -| │ │ Due Amount $150.00 │ │ | -| │ │ ──────────────────────────────────────────────────── │ │ | -| │ │ Amount Paid $75.00 🟢 │ │ | -| │ │ ──────────────────────────────────────────────────── │ │ | -| │ │ Amount Waived $0.00 🟡 │ │ | -| │ │ ──────────────────────────────────────────────────── │ │ | -| │ │ Outstanding $75.00 🔴 │ │ | -| │ │ │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| │ Payment Progress │ | -| │ ████████████████████████░░░░░░░░░░░░░░░░░░░░░░░░ 50% │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ 📋 CHARGE DETAILS │ | -| │ │ | -| │ Charge ID #123 │ | -| │ Due Date Jan 15, 2025 │ | -| │ Calculation Type Flat Rate │ | -| │ Charge Time Type On Disbursement │ | -| │ Currency USD │ | -| │ Is Penalty Yes 🔴 │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ 📜 PAYMENT HISTORY │ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ Jan 10, 2025 │ │ | -| │ │ Partial Payment • TXN-789456 │ │ | -| │ │ $75.00 paid from Savings ****4521 🟢 │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ Dec 28, 2024 │ │ | -| │ │ Charge Created │ │ | -| │ │ $150.00 applied to loan account │ │ | -| │ └────────────────────────────────────────────────────────┘ │ │ -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ 💡 PAYMENT OPTIONS │ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ ██████████████████████████████████████████████████ │ │ | -| │ │ ██ ██ │ │ | -| │ │ ██ 💳 Pay Full Amount ($75.00) ██ │ │ | -| │ │ ██ ██ │ │ | -| │ │ ██████████████████████████████████████████████████ │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ │ │ | -| │ │ 📆 Split into 2 Payments of $37.50 │ │ | -| │ │ │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ │ │ | -| │ │ 🔄 Set Up Autopay for Future │ │ | -| │ │ │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ │ │ | -| │ │ 📝 Request Waiver │ │ | -| │ │ │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -+------------------------------------------------------------------+ -``` - ---- - -### 4. Autopay Setup Flow - -Configure automatic payments for recurring charges. - -``` -+------------------------------------------------------------------+ -| 9:41 5G 📶 🔋 85% | -+------------------------------------------------------------------+ -| | -| <- Back Set Up Autopay | -| | -+------------------------------------------------------------------+ -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ Step 1 of 3 │ | -| │ ████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ 33% │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ 🔄 │ | -| │ │ | -| │ Set Up Automatic Payments │ | -| │ │ | -| │ Never miss a payment. Autopay will │ | -| │ automatically pay charges when due. │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| SELECT CHARGES TO AUTOPAY | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ ☑️ All Future Loan Charges │ │ | -| │ │ │ │ | -| │ │ Includes: Processing fees, late fees, penalties │ │ | -| │ │ Estimated: ~$50-200/month │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ ☑️ All Future Savings Charges │ │ | -| │ │ │ │ | -| │ │ Includes: Maintenance fees, service charges │ │ | -| │ │ Estimated: ~$25/month │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ ☐ All Future Client Charges │ │ | -| │ │ │ │ | -| │ │ Includes: Annual fees, document fees │ │ | -| │ │ Estimated: ~$100/year │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ Continue to Select Account → │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -+------------------------------------------------------------------+ - - -STEP 2: Select Payment Account -+------------------------------------------------------------------+ -| 9:41 5G 📶 🔋 85% | -+------------------------------------------------------------------+ -| | -| <- Back Set Up Autopay | -| | -+------------------------------------------------------------------+ -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ Step 2 of 3 │ | -| │ ████████████████████████░░░░░░░░░░░░░░░░░░░░░░ 66% │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| PAY FROM ACCOUNT | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ ██████████████████████████████████████████████████ │ │ | -| │ │ │ │ | -| │ │ 💰 Primary Savings ◉ │ │ | -| │ │ ****4521 │ │ | -| │ │ Available: $8,200.00 │ │ | -| │ │ ✓ Recommended - Highest balance │ │ | -| │ │ │ │ | -| │ │ ██████████████████████████████████████████████████ │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ │ │ | -| │ │ 💰 Emergency Fund Savings ○ │ │ | -| │ │ ****7832 │ │ | -| │ │ Available: $2,500.00 │ │ | -| │ │ │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ PAYMENT TIMING │ | -| │ │ | -| │ ● On Due Date (Recommended) │ | -| │ ○ 3 Days Before Due Date │ | -| │ ○ 7 Days Before Due Date │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ⚙️ LOW BALANCE PROTECTION │ | -| │ │ | -| │ ☑️ Skip autopay if account balance is below $500 │ | -| │ You'll be notified to pay manually │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ Continue to Confirm → │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -+------------------------------------------------------------------+ - - -STEP 3: Confirmation -+------------------------------------------------------------------+ -| 9:41 5G 📶 🔋 85% | -+------------------------------------------------------------------+ -| | -| <- Back Set Up Autopay | -| | -+------------------------------------------------------------------+ -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ Step 3 of 3 │ | -| │ ████████████████████████████████████████████████ 100% │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| AUTOPAY SUMMARY | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ ██████████████████████████████████████████████████ │ │ | -| │ │ ██ ██ │ │ | -| │ │ ██ 🔄 Autopay Setup ██ │ │ | -| │ │ ██ ██ │ │ | -| │ │ ██ ┌──────────────────────────────────────────┐ ██ │ │ | -| │ │ ██ │ │ ██ │ │ | -| │ │ ██ │ Charges: Loan + Savings │ ██ │ │ | -| │ │ ██ │ Account: Savings ****4521 │ ██ │ │ | -| │ │ ██ │ Timing: On Due Date │ ██ │ │ | -| │ │ ██ │ Protection: Skip if < $500 │ ██ │ │ | -| │ │ ██ │ │ ██ │ │ | -| │ │ ██ └──────────────────────────────────────────┘ ██ │ │ | -| │ │ ██ ██ │ │ | -| │ │ ██████████████████████████████████████████████████ │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ BENEFITS │ | -| │ │ | -| │ ✓ Never miss a payment │ | -| │ ✓ Protect your payment streak │ | -| │ ✓ Avoid late fees and penalties │ | -| │ ✓ Earn autopay bonus points │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ 📧 You'll receive email confirmation and reminders │ | -| │ 24 hours before each autopay │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ ✓ Enable Autopay │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -+------------------------------------------------------------------+ -``` - ---- - -### 5. Split Payment Flow - -Break large charges into manageable installments. - -``` -+------------------------------------------------------------------+ -| 9:41 5G 📶 🔋 85% | -+------------------------------------------------------------------+ -| | -| <- Back Split Payment | -| | -+------------------------------------------------------------------+ -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ 📄 Loan Processing Fee │ | -| │ Original Amount: $150.00 │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| CHOOSE PAYMENT PLAN | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ ██████████████████████████████████████████████████ │ │ | -| │ │ │ │ | -| │ │ 2 PAYMENTS ◉ │ │ | -| │ │ $75.00 × 2 │ │ | -| │ │ │ │ | -| │ │ 📅 Jan 15 ──────────── 📅 Feb 15 │ │ | -| │ │ $75.00 $75.00 │ │ | -| │ │ │ │ | -| │ │ ✓ No extra fees • Recommended │ │ | -| │ │ │ │ | -| │ │ ██████████████████████████████████████████████████ │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ │ │ | -| │ │ 3 PAYMENTS ○ │ │ | -| │ │ $50.00 × 3 │ │ | -| │ │ │ │ | -| │ │ 📅 Jan 15 ──── 📅 Feb 15 ──── 📅 Mar 15 │ │ | -| │ │ $50.00 $50.00 $50.00 │ │ | -| │ │ │ │ | -| │ │ +$5.00 split fee │ │ | -| │ │ │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ │ │ | -| │ │ 4 PAYMENTS ○ │ │ | -| │ │ $37.50 × 4 │ │ | -| │ │ │ │ | -| │ │ 📅 Jan 15 - Apr 15 (monthly) │ │ | -| │ │ │ │ | -| │ │ +$10.00 split fee │ │ | -| │ │ │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ PAYMENT SUMMARY │ | -| │ │ | -| │ Charge Amount $150.00 │ | -| │ Split Fee $0.00 │ | -| │ ───────────────────────────────────────────────────────── │ | -| │ Total $150.00 │ | -| │ │ | -| │ First Payment Due Jan 15, 2025 │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ 💳 Pay From: Savings ****4521 Change > │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ Confirm Split Payment │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -+------------------------------------------------------------------+ -``` - ---- - -### 6. Charge Insights Dashboard - -Analytics and trends for charges over time. - -``` -+------------------------------------------------------------------+ -| 9:41 5G 📶 🔋 85% | -+------------------------------------------------------------------+ -| | -| <- Back Charge Insights | -| | -+------------------------------------------------------------------+ -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ 📊 YOUR CHARGE SUMMARY │ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ │ │ | -| │ │ This Year (2025) │ │ | -| │ │ │ │ | -| │ │ Total Charges $1,250.00 │ │ | -| │ │ Amount Paid $1,000.00 (80%) │ │ | -| │ │ Amount Waived $100.00 (8%) │ │ | -| │ │ Outstanding $150.00 (12%) │ │ | -| │ │ │ │ | -| │ │ ████████████████████████████████░░░░░░ 80% │ │ | -| │ │ │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ 📈 CHARGES BY TYPE │ | -| │ │ | -| │ Loan Savings Client │ | -| │ │ | -| │ █ │ | -| │ █ █ │ | -| │ █ █ │ | -| │ █ █ █ │ | -| │ █ █ █ │ | -| │ ───────────────────────────── │ | -| │ $750 $350 $150 │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ 🏆 PAYMENT PERFORMANCE │ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ │ │ | -| │ │ On-Time Payments 15/18 (83%) │ │ | -| │ │ ████████████████░░░░ │ │ | -| │ │ │ │ | -| │ │ Average Days to Pay 3 days before due │ │ | -| │ │ │ │ | -| │ │ Current Streak 5 payments 🔥 │ │ | -| │ │ Best Streak 12 payments (Apr-Oct 2024) │ │ | -| │ │ │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ 💡 INSIGHTS │ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ │ │ | -| │ │ 🎉 Great job! You've reduced late payments by │ │ | -| │ │ 40% compared to last year. │ │ | -| │ │ │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ │ │ | -| │ │ 💰 Tip: Setting up autopay could save you ~$50/year │ │ | -| │ │ in potential late fees. │ │ | -| │ │ │ │ | -| │ │ ┌─────────────────────────────────────────────────┐ │ │ | -| │ │ │ Set Up Autopay Now │ │ │ | -| │ │ └─────────────────────────────────────────────────┘ │ │ | -| │ │ │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -+------------------------------------------------------------------+ -``` - ---- - -### 7. Payment Success Screen - -Enhanced success screen with streak update and rewards. - -``` -+------------------------------------------------------------------+ -| 9:41 5G 📶 🔋 85% | -+------------------------------------------------------------------+ -| | -| ✕ Close | -| | -+------------------------------------------------------------------+ -| | -| | -| | -| ┌──────────────────────┐ | -| │ │ | -| │ ✓ │ | -| │ │ | -| │ Payment Success! │ | -| │ │ | -| └──────────────────────┘ | -| (Confetti animation) | -| | -| $75.00 | -| Loan Processing Fee | -| | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ │ │ | -| │ │ Reference TXN-2025-001234 │ │ | -| │ │ Date Jan 15, 2025 │ │ | -| │ │ From Account Savings ****4521 │ │ | -| │ │ Status Completed 🟢 │ │ | -| │ │ │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ ██████████████████████████████████████████████████████████ │ | -| │ ██ ██ │ | -| │ ██ 🔥 STREAK UPDATED! ██ │ | -| │ ██ ██ │ | -| │ ██ Your on-time payment streak is now 6! ██ │ | -| │ ██ ██ │ | -| │ ██ ████████████████████████░░░░░░░ 6/10 to reward ██ │ | -| │ ██ ██ │ | -| │ ██ +10 points earned for on-time payment ██ │ | -| │ ██ ██ │ | -| │ ██████████████████████████████████████████████████████████ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌─────────────────────┐ ┌─────────────────────┐ │ | -| │ │ 📄 Download Receipt│ │ ↗️ Share Receipt │ │ | -| │ └─────────────────────┘ └─────────────────────┘ │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ Back to Charges │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -+------------------------------------------------------------------+ -``` - ---- - -### 8. Waiver Request Flow - -Request charge waiver with supporting documentation. - -``` -+------------------------------------------------------------------+ -| 9:41 5G 📶 🔋 85% | -+------------------------------------------------------------------+ -| | -| <- Back Request Waiver | -| | -+------------------------------------------------------------------+ -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ 📄 Loan Processing Fee │ | -| │ Amount: $75.00 outstanding │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| SELECT WAIVER REASON | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ ○ Financial Hardship │ │ | -| │ │ Temporary difficulty paying due to circumstances │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ ◉ Bank Error or Dispute │ │ | -| │ │ Charge was applied incorrectly │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ ○ Long-standing Customer │ │ | -| │ │ Goodwill waiver for loyalty │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ ○ Other │ │ | -| │ │ Please explain in details below │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ EXPLANATION │ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ │ │ | -| │ │ The charge was applied before the loan was fully │ │ | -| │ │ processed. I believe this was a system error as │ │ | -| │ │ the disbursement date doesn't match... │ │ | -| │ │ │ │ | -| │ │ 140/500 │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ATTACH SUPPORTING DOCUMENTS (Optional) │ | -| │ │ | -| │ ┌───────────────────────────────────────────────────────┐ │ | -| │ │ │ │ | -| │ │ 📎 Upload Document │ │ | -| │ │ │ │ | -| │ │ PDF, JPG, PNG • Max 5MB │ │ | -| │ │ │ │ | -| │ └───────────────────────────────────────────────────────┘ │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ℹ️ Waiver requests are typically reviewed within │ | -| │ 2-3 business days. You'll be notified of the decision. │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ Submit Waiver Request │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -+------------------------------------------------------------------+ -``` - ---- - -### 9. Empty State - -No charges - celebration state. - -``` -+------------------------------------------------------------------+ -| 9:41 5G 📶 🔋 85% | -+------------------------------------------------------------------+ -| | -| <- Back My Charges | -| | -+------------------------------------------------------------------+ -| | -| | -| | -| | -| | -| ┌──────────────────────┐ | -| │ │ | -| │ 🎉 │ | -| │ │ | -| └──────────────────────┘ | -| | -| | -| All Clear! | -| | -| You have no outstanding charges. | -| Keep up the great work! | -| | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ ██████████████████████████████████████████████████████████ │ | -| │ ██ ██ │ | -| │ ██ 🏆 ACHIEVEMENT UNLOCKED ██ │ | -| │ ██ ██ │ | -| │ ██ "Zero Balance Champion" ██ │ | -| │ ██ ██ │ | -| │ ██ You've cleared all your charges! +25 bonus pts ██ │ | -| │ ██ ██ │ | -| │ ██████████████████████████████████████████████████████████ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ 📊 YOUR STATS │ | -| │ │ | -| │ Total Paid This Year $1,000.00 │ | -| │ Payment Streak 12 🔥 │ | -| │ On-Time Rate 95% │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| | -| | -+------------------------------------------------------------------+ -``` - ---- - -### 10. Loading State - -``` -+------------------------------------------------------------------+ -| 9:41 5G 📶 🔋 85% | -+------------------------------------------------------------------+ -| | -| <- Back My Charges | -| | -+------------------------------------------------------------------+ -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ | -| │ ░░ ░░ │ | -| │ ░░ ░░░░░░░░░░░░░░░░░░░░ ░░ │ | -| │ ░░ ░░ │ | -| │ ░░ ░░░░░░░░░░ ░░ │ | -| │ ░░ ░░ │ | -| │ ░░ ░░░░░░░░░░ ░░░░░░░░░░ ░░░░░░░░░░ ░░ │ | -| │ ░░ ░░ │ | -| │ ░░ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░ │ | -| │ ░░ ░░ │ | -| │ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ ░░░░░░░░░░ ░░░░░░░░░░ ░░░░░░░░░░ ░░░░░░░░░░ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ ░░░░░░ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ │ | -| │ │ ░░░░░░ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ │ | -| │ │ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ ░░░░░░ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ │ | -| │ │ ░░░░░░ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ │ | -| │ │ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -+------------------------------------------------------------------+ -``` - ---- - -## Component Specifications - -### Smart Charge Card - -``` -+------------------------------------------------------------------+ -| SMART CHARGE CARD v2.0 | -+------------------------------------------------------------------+ -| | -| Layout Structure: | -| | -| ┌────────────────────────────────────────────────────────────┐ | -| │ [Icon 48dp] [Name] ─────────────────────── [Chevron] │ | -| │ [Status Dot] [Account Ref] │ | -| │ │ | -| │ Due: [Date] • [Amount] outstanding │ | -| │ │ | -| │ [Status Chips Row] │ | -| │ │ | -| │ [Action Button 1] [Action Button 2] │ | -| └────────────────────────────────────────────────────────────┘ | -| | -| New 2025 Elements: | -| - Status dot color indicator (🔴🟡🟢) | -| - Autopay badge | -| - Quick pay button inline | -| - Split payment option | -| - Progress indicator for partial payments | -| | -| Dimensions: | -| - Card Padding: 16dp | -| - Corner Radius: 16dp | -| - Icon Container: 48dp with status dot overlay | -| - Action Button Height: 40dp | -| - Gap between cards: 12dp | -| | -+------------------------------------------------------------------+ -``` - -### Payment Streak Banner - -``` -+------------------------------------------------------------------+ -| PAYMENT STREAK BANNER | -+------------------------------------------------------------------+ -| | -| ┌────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ 🔥 On-Time Streak: X payments │ | -| │ ████████████████████░░░░░░░░░░ X/Y to next reward │ | -| │ │ | -| └────────────────────────────────────────────────────────────┘ | -| | -| Visual Design: | -| - Fire icon animated (subtle flame flicker) | -| - Progress bar: Primary gradient | -| - Milestone markers on progress bar | -| - Text: "Next reward at X!" | -| | -| States: | -| - Active streak (1+): Fire icon, progress bar | -| - Broken streak (0): Gray, "Start your streak!" | -| - Milestone reached: Confetti animation, badge reveal | -| | -+------------------------------------------------------------------+ -``` - ---- - -## Interactions & Animations - -``` -+------------------------------------------------------------------+ -| CHARGE FEATURE ANIMATIONS v2.0 | -+------------------------------------------------------------------+ -| | -| 1. Payment Success Celebration | -| ─────────────────────────────────────────────────────────────── | -| Trigger: Payment completed successfully | -| Animation: | -| - Checkmark draws in (Lottie) | -| - Circle expands with spring bounce | -| - Confetti burst (20 particles) | -| - Streak counter increments with scale pulse | -| - Points "+10" floats up and fades | -| Duration: 1500ms total | -| Haptic: Success notification | -| | -| 2. Streak Flame Animation | -| ─────────────────────────────────────────────────────────────── | -| Trigger: Streak banner visible | -| Animation: Subtle flame flicker (Lottie) | -| Duration: 2000ms loop | -| Intensity increases with streak count | -| | -| 3. Progress Bar Fill | -| ─────────────────────────────────────────────────────────────── | -| Trigger: Payment updates progress | -| Animation: Smooth fill from current to new percentage | -| Duration: 600ms | -| Easing: Decelerate | -| | -| 4. Quick Action Button Press | -| ─────────────────────────────────────────────────────────────── | -| Trigger: Button tap | -| Animation: Scale 1.0 -> 0.95 -> 1.0 | -| Duration: 150ms | -| Haptic: Light impact | -| | -| 5. Calendar Date Selection | -| ─────────────────────────────────────────────────────────────── | -| Trigger: Date tap | -| Animation: | -| - Date circle scales up | -| - Background fills with primary color | -| - Related charges slide up from bottom | -| Duration: 300ms | -| | -| 6. Autopay Toggle | -| ─────────────────────────────────────────────────────────────── | -| Trigger: Toggle switch | -| Animation: | -| - Thumb slides with spring | -| - Track color transitions | -| - Icon morphs (off/on) | -| Duration: 200ms | -| | -| 7. Split Payment Selection | -| ─────────────────────────────────────────────────────────────── | -| Trigger: Plan option tap | -| Animation: | -| - Selected option border appears | -| - Timeline visualization draws | -| - Summary updates with number morph | -| Duration: 300ms | -| | -| 8. Waiver Submit | -| ─────────────────────────────────────────────────────────────── | -| Trigger: Submit button tap | -| Animation: | -| - Button loading spinner | -| - Success: Check morphs from spinner | -| - Confirmation slides up | -| Duration: Loading until complete, then 500ms | -| | -+------------------------------------------------------------------+ -``` - ---- - -## Accessibility - -``` -+------------------------------------------------------------------+ -| ACCESSIBILITY SPECIFICATIONS | -+------------------------------------------------------------------+ -| | -| Screen Reader Announcements: | -| ─────────────────────────────────────────────────────────────── | -| | -| Summary Card: | -| "Outstanding charges: 225 dollars. On-time payment streak: | -| 5 payments. 5 more payments until next reward." | -| | -| Charge Card: | -| "Loan Processing Fee, Loan account ending 1234. | -| 75 dollars outstanding, due tomorrow. Penalty charge. | -| Actions: Pay now, Split payment, View details." | -| | -| Calendar View: | -| "January 2025 calendar. January 15 has due charge: | -| Loan Processing Fee, 150 dollars." | -| | -| Autopay: | -| "Autopay enabled for savings charges. Will pay from | -| Savings account ending 4521 on due date." | -| | -| Touch Targets: | -| ─────────────────────────────────────────────────────────────── | -| - All buttons: 48dp minimum | -| - Charge cards: Full width, 80dp+ height | -| - Calendar dates: 48dp x 48dp | -| - Quick action buttons: 48dp height | -| | -| Color Contrast: | -| ─────────────────────────────────────────────────────────────── | -| - All status indicators include icons + text | -| - Progress bars have percentage text | -| - Due dates have color + text labels | -| | -+------------------------------------------------------------------+ -``` - ---- - -## Dark Mode - -``` -+------------------------------------------------------------------+ -| DARK MODE COLOR MAPPING | -+------------------------------------------------------------------+ -| | -| Backgrounds: | -| - Screen: #F8F9FA -> #0D1117 | -| - Surface: #FFFFFF -> #1A1F2E | -| - Card: #FFFFFF -> #21262D | -| | -| Text: | -| - Primary: #1F2937 -> #F0F6FC | -| - Secondary: #6B7280 -> #8B949E | -| | -| Semantic Colors (Preserved): | -| - Success/Paid: #00D09C | -| - Error/Overdue: #FF4757 | -| - Warning/Due: #FFB800 | -| | -| Gradients (Preserved at 85% opacity): | -| - Primary: #667EEA -> #764BA2 | -| - Streak: #FF6B6B -> #FFE66D (fire gradient) | -| | -| Streak Banner (Dark): | -| - Background: #21262D with gradient border | -| - Fire icon: Enhanced glow effect | -| - Progress bar: Same gradient, enhanced visibility | -| | -+------------------------------------------------------------------+ -``` - ---- - -## Implementation Notes - -### State Management - -```kotlin -// Charges Screen State -data class ChargesScreenState( - val outstandingBalance: Double = 0.0, - val totalCharges: Double = 0.0, - val paidAmount: Double = 0.0, - val waivedAmount: Double = 0.0, - val selectedFilter: ChargeType? = null, - val charges: List = emptyList(), - val dueSoonCharges: List = emptyList(), - val recentlyPaidCharges: List = emptyList(), - val paymentStreak: PaymentStreak = PaymentStreak(), - val isAmountVisible: Boolean = true, - val isLoading: Boolean = false, - val error: String? = null -) - -data class PaymentStreak( - val currentStreak: Int = 0, - val nextMilestone: Int = 5, - val pointsEarned: Int = 0, - val badges: List = emptyList() -) - -enum class ChargeType { ALL, CLIENT, LOAN, SAVINGS, SHARE } - -data class ChargeItem( - val id: Long, - val name: String, - val type: ChargeType, - val accountReference: String, - val dueDate: LocalDate?, - val paidDate: LocalDate?, - val amount: Double, - val amountPaid: Double, - val amountWaived: Double, - val amountOutstanding: Double, - val isPenalty: Boolean, - val status: ChargeStatus, - val isAutopayEnabled: Boolean = false, - val paymentProgress: Float = 0f -) - -enum class ChargeStatus { PENDING, OVERDUE, DUE_SOON, PAID, WAIVED, PARTIAL } - -// Autopay State -data class AutopaySetupState( - val step: AutopayStep = AutopayStep.SELECT_CHARGES, - val selectedChargeTypes: Set = emptySet(), - val selectedAccount: Account? = null, - val paymentTiming: PaymentTiming = PaymentTiming.ON_DUE_DATE, - val lowBalanceThreshold: Double = 500.0, - val isLowBalanceProtectionEnabled: Boolean = true -) - -enum class AutopayStep { SELECT_CHARGES, SELECT_ACCOUNT, CONFIRM } -enum class PaymentTiming { ON_DUE_DATE, THREE_DAYS_BEFORE, SEVEN_DAYS_BEFORE } - -// Split Payment State -data class SplitPaymentState( - val charge: ChargeItem? = null, - val selectedPlan: SplitPlan? = null, - val availablePlans: List = emptyList(), - val selectedAccount: Account? = null -) - -data class SplitPlan( - val numberOfPayments: Int, - val amountPerPayment: Double, - val splitFee: Double, - val totalAmount: Double, - val paymentDates: List -) -``` - -### Key Composables - -```kotlin -@Composable -fun ChargesScreen( - state: ChargesScreenState, - onFilterSelect: (ChargeType) -> Unit, - onChargeClick: (ChargeItem) -> Unit, - onPayCharge: (ChargeItem) -> Unit, - onSplitPayment: (ChargeItem) -> Unit, - onSetupAutopay: () -> Unit, - onViewCalendar: () -> Unit, - onViewInsights: () -> Unit, - modifier: Modifier = Modifier -) - -@Composable -fun PaymentStreakBanner( - streak: PaymentStreak, - modifier: Modifier = Modifier -) - -@Composable -fun SmartChargeCard( - charge: ChargeItem, - onPay: () -> Unit, - onSplit: () -> Unit, - onClick: () -> Unit, - modifier: Modifier = Modifier -) - -@Composable -fun ChargeCalendarView( - charges: List, - selectedDate: LocalDate?, - onDateSelect: (LocalDate) -> Unit, - onChargeClick: (ChargeItem) -> Unit, - modifier: Modifier = Modifier -) - -@Composable -fun AutopaySetupFlow( - state: AutopaySetupState, - onChargeTypeToggle: (ChargeType) -> Unit, - onAccountSelect: (Account) -> Unit, - onTimingSelect: (PaymentTiming) -> Unit, - onConfirm: () -> Unit, - onBack: () -> Unit, - modifier: Modifier = Modifier -) - -@Composable -fun SplitPaymentSheet( - state: SplitPaymentState, - onPlanSelect: (SplitPlan) -> Unit, - onAccountChange: () -> Unit, - onConfirm: () -> Unit, - onDismiss: () -> Unit -) - -@Composable -fun ChargeInsightsScreen( - state: ChargeInsightsState, - onSetupAutopay: () -> Unit, - modifier: Modifier = Modifier -) - -@Composable -fun WaiverRequestSheet( - charge: ChargeItem, - onReasonSelect: (WaiverReason) -> Unit, - onExplanationChange: (String) -> Unit, - onDocumentUpload: () -> Unit, - onSubmit: () -> Unit, - onDismiss: () -> Unit -) - -@Composable -fun PaymentSuccessScreen( - amount: Double, - chargeName: String, - reference: String, - streakUpdate: PaymentStreak, - onDownloadReceipt: () -> Unit, - onShare: () -> Unit, - onBackToCharges: () -> Unit, - modifier: Modifier = Modifier -) -``` - ---- - -## Changelog - -| Date | Version | Changes | -|------|---------|---------| -| 2025-12-30 | 1.0 | Initial mockup with basic charge list and details | -| 2025-12-30 | 2.0 | Complete redesign with 2025 fintech patterns: Payment streak gamification, autopay setup, split payments, calendar view, charge insights, waiver requests, enhanced success screens | - ---- - -## Data Binding Reference - -> **For `/implement` command**: Maps UI components to API.md sections. -> **Source of Truth**: See `API.md` for complete endpoint details. - -### Screen → API.md Mapping - -| Screen | API.md Section | Key Fields | -|--------|----------------|------------| -| Client Charges | `Endpoints Required → 1. Client Charges` | `chargeData[]` | -| Loan Charges | `Endpoints Required → 2. Loan Charges` | Per-loan charges | -| Savings Charges | `Endpoints Required → 3. Savings Charges` | Per-savings charges | -| Charge Detail | From loaded list | `name`, `amount`, `amountOutstanding`, `dueDate` | -| Pay Client Charge | `Endpoints Required → 4. Pay Client Charge` | POST with amount | -| Pay Loan Charge | `Endpoints Required → 5. Pay Loan Charge` | POST with amount | -| Pay Savings Charge | `Endpoints Required → 6. Pay Savings Charge` | POST with amount | - -### Client-Only Features - -| Feature | Storage | Notes | -|---------|---------|-------| -| Payment Streak | DataStore | Track on-time payments | -| Streak Badges | DataStore | Gamification | -| Calendar View | Client-side | UI for due dates | -| Autopay Setup | DataStore | Not in Fineract API | - -### Actions → API.md Mapping - -| User Action | API.md Reference | Navigation | -|-------------|------------------|------------| -| Load Charges | `1`, `2`, `3` (all charge endpoints) | Aggregate list | -| Pay Charge | `4`, `5`, or `6` (by charge type) | → Payment Flow | -| View Detail | From loaded list | → Charge Detail | - -### API Limitations - -See `API.md → Notes` for limitations: -- Autopay not supported -- Waiver requests need custom backend - -### Error Handling - -See `API.md → Error Responses` for complete error codes. diff --git a/claude-product-cycle/design-spec-layer/features/client-charge/SPEC.md b/claude-product-cycle/design-spec-layer/features/client-charge/SPEC.md deleted file mode 100644 index 1e3436989..000000000 --- a/claude-product-cycle/design-spec-layer/features/client-charge/SPEC.md +++ /dev/null @@ -1,395 +0,0 @@ -# Client Charges - Feature Specification - -> **Purpose**: Display and manage charges for clients, loans, savings, and share accounts -> **User Value**: View all pending and paid charges, track due dates, and access payment details -> **Last Updated**: 2025-12-29 - ---- - -## 1. Overview - -### 1.1 Feature Summary -The Client Charges feature allows users to view charges associated with their client account, loan accounts, savings accounts, and share accounts. It displays a list of charges with status indicators (paid/unpaid), amounts, due dates, and provides navigation to detailed charge information. Users can see charge breakdowns including due amount, paid amount, waived amount, and outstanding balance. - -### 1.2 User Stories -- As a user, I want to view all charges on my client account so I can track fees and payments -- As a user, I want to view charges on my loan account so I can see loan-related fees -- As a user, I want to view charges on my savings account so I can track savings-related fees -- As a user, I want to view charges on my share account so I can see share-related fees -- As a user, I want to see which charges are paid vs outstanding so I can prioritize payments -- As a user, I want to view charge details so I can understand the breakdown of amounts -- As a user, I want to see due dates so I can plan my payments accordingly - ---- - -## 2. Screen Layout - -### 2.1 Charges List Screen - ASCII Mockup - -``` -+------------------------------------------+ -| [<] Client Charges | <- TopBar (title varies by type) -+------------------------------------------+ -| | -| +------------------------------------+ | -| | [DB] Loan Processing Fee > | | -| | ChargeId: 123 | | -| | 2025-01-15 | | -| | Due | | -| | $150.00 | | -| +------------------------------------+ | -| | -| +------------------------------------+ | -| | [OK] Annual Service Fee > | | -| | ChargeId: 456 | | -| | 2024-12-01 | | -| | Paid | | -| | $50.00 | | -| +------------------------------------+ | -| | -| +------------------------------------+ | -| | [DB] Late Payment Penalty > | | -| | ChargeId: 789 | | -| | 2025-02-01 | | -| | Due | | -| | $25.00 | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| Powered by Mifos | -+------------------------------------------+ - -Legend: -[<] = Back navigation -[DB] = Database warning icon (unpaid) -[OK] = Database checkmark icon (paid) -> = Chevron right (navigate to details) -``` - -### 2.2 Charge Details Screen - ASCII Mockup - -``` -+------------------------------------------+ -| [<] Charge Details | <- TopBar -+------------------------------------------+ -| | -| +------------------------------------+ | -| | Fee Title | Loan Processing Fee | | -| +------------------------------------+ | -| | Date | 2025-01-15 | | -| +------------------------------------+ | -| | Due | $150.00 | | -| +------------------------------------+ | -| | Paid | $75.00 | | -| +------------------------------------+ | -| | Waived | $0.00 | | -| +------------------------------------+ | -| | Outstanding | $75.00 | | -| +------------------------------------+ | -| | -| +------------------------------------+ | -| | [PAY OUTSTANDING] | | <- For unpaid charges -| +------------------------------------+ | -| | -| Partial amount paid on: 2025-01-10 | -| | -+------------------------------------------+ -| Powered by Mifos | -+------------------------------------------+ - ---- OR (for fully paid charges) --- - -+------------------------------------------+ -| [<] Charge Details | -+------------------------------------------+ -| | -| +------------------------------------+ | -| | Fee Title | Annual Service Fee | | -| +------------------------------------+ | -| | Date | 2024-12-01 | | -| +------------------------------------+ | -| | Due | $50.00 | | -| +------------------------------------+ | -| | Paid | $50.00 | | -| +------------------------------------+ | -| | Waived | $0.00 | | -| +------------------------------------+ | -| | Outstanding | $0.00 | | -| +------------------------------------+ | -| | -| This charge has been successfully paid | -| | -| [SUCCESS ICON] | -| | -| Ref No: CHG-456 | -| Paid on: 2024-12-01 | -| | -+------------------------------------------+ -| Powered by Mifos | -+------------------------------------------+ -``` - -### 2.3 Sections Table - -| # | Section | Description | API | Priority | -|---|---------|-------------|-----|----------| -| 1 | TopBar | Title varies: Client/Loan/Savings/Share Charges | - | P0 | -| 2 | Charge List | Scrollable list of charge items | clients/{id}/charges, loans/{id}/charges, savingsaccounts/{id}/charges | P0 | -| 3 | Charge Item | Icon, name, charge ID, date, status, amount | - | P0 | -| 4 | Empty State | "No charges" message when list is empty | - | P0 | -| 5 | Error State | Error message with retry button | - | P0 | -| 6 | Network State | No connection message | - | P0 | -| 7 | Details Card | Key-value pairs for charge details | - | P0 | -| 8 | Payment Section | Pay button or success confirmation | - | P1 | -| 9 | Footer | Powered by Mifos | - | P2 | - ---- - -## 3. User Interactions - -| Action | Trigger | Result | API Call | -|--------|---------|--------|----------| -| Navigate back | Tap back arrow | Return to previous screen | - | -| View charge details | Tap charge item | Navigate to ChargeDetailScreen | - | -| Retry loading | Tap retry button | Reload charges | clients/{id}/charges | -| Pay outstanding | Tap pay button | (Future) Payment flow | - | -| Pull to refresh | Swipe down | Reload charge list | clients/{id}/charges | - ---- - -## 4. State Model - -### 4.1 Charges List Screen - -```kotlin -/** - * Represents the UI state of the Client Charges screen. - */ -data class ClientChargeState( - val networkStatus: Boolean = false, - val clientId: Long, - val chargeType: ChargeType, // CLIENT, LOAN, SAVINGS, SHARE - val chargeTypeId: Long?, // Account ID for LOAN/SAVINGS/SHARE - val isOnline: Boolean, - val isEmpty: Boolean = false, - val topBarTitleResId: StringResource, // Dynamic based on chargeType - val charges: List = emptyList(), - val dialogState: DialogState? = null, - val uiState: ScreenUiState? = ScreenUiState.Loading, -) { - sealed interface DialogState { - data class Error(val message: String) : DialogState - } -} - -/** - * UI events emitted from the ViewModel to be handled by the UI layer. - */ -sealed interface ClientChargeEvent { - data class ShowToast(val message: String) : ClientChargeEvent - data object Navigate : ClientChargeEvent - data class OnChargeClick(val charge: Charge) : ClientChargeEvent -} - -/** - * Actions dispatched from the UI or internal processes. - */ -sealed interface ClientChargeAction { - data object RefreshCharges : ClientChargeAction - data object OnNavigate : ClientChargeAction - data object OnDismissDialog : ClientChargeAction - data class OnChargeClick(val charge: Charge) : ClientChargeAction - data class ReceiveNetworkResult(val isOnline: Boolean) : ClientChargeAction - data object Retry : ClientChargeAction - - sealed class Internal : ClientChargeAction { - data class ReceiveLoanOrSavingsChargesResult( - val result: DataState> - ) : Internal() - data class ReceiveClientChargesResult( - val result: DataState> - ) : Internal() - data class ReceiveShareChargesResult( - val result: DataState> - ) : Internal() - } -} - -/** - * ChargeType determines which endpoint to call and what title to show. - */ -enum class ChargeType(val type: String) { - CLIENT("clients"), - SAVINGS("savingsaccounts"), - LOAN("loans"), - SHARE("shareaccounts"), -} -``` - -### 4.2 Charge Details Screen - -```kotlin -/** - * Represents the state of the Charge Details Screen. - */ -data class ChargeDetailsState( - val details: Map = emptyMap(), // fee_title, date, due, paid, waived, outstanding - val isPaid: Boolean = false, - val refNo: String = "", - val paidOn: String = "", -) - -/** - * Events for the Charge Details Screen. - */ -sealed interface ChargeDetailsEvent { - data object NavigateBack : ChargeDetailsEvent -} - -/** - * Actions for the Charge Details Screen. - */ -sealed interface ChargeDetailsAction { - data object NavigateBack : ChargeDetailsAction - data object PayOutStanding : ChargeDetailsAction -} -``` - ---- - -## 5. API Requirements - -| Endpoint | Method | Purpose | Status | -|----------|--------|---------|--------| -| `/clients/{clientId}/charges` | GET | Get client-level charges (paginated) | Implemented | -| `/loans/{loanId}/charges` | GET | Get loan account charges | Implemented | -| `/savingsaccounts/{savingsId}/charges` | GET | Get savings account charges | Implemented | -| `/shareaccounts/{shareId}` | GET | Get share account details (includes charges) | Implemented | - ---- - -## 6. Edge Cases & Error Handling - -| Scenario | Behavior | UI Feedback | -|----------|----------|-------------| -| No internet | Set uiState to Network | "No internet connection" with retry | -| Empty charge list | Set uiState to Empty | "No charges found" with warning icon | -| API error | Set uiState to Error | Server error message with retry | -| Invalid charge type | Default to CLIENT | - | -| Missing due date | Show "-" for date | Safe date string handling | -| Zero amounts | Display as "0.00" | Formatted currency display | -| Network restored | Automatically reload | Triggered by network monitor | -| IOException | Show network state | "No internet connection" | -| Other exceptions | Show error state | "Server error" message | - ---- - -## 7. Components - -| Component | Props | Reusable? | -|-----------|-------|-----------| -| ClientChargeItem | charge: Charge, onChargeClick: () -> Unit | Yes | -| MifosDetailsCard | keyValuePairs: Map | Yes (core:ui) | -| ChargeDetailsPaidComponent | refNo: String, paidOn: String | No | -| ChargeDetailsUnPaidComponent | amountPaidOn: String, onPayOutStanding: () -> Unit | No | -| MifosElevatedScaffold | topBarTitle, onNavigateBack, bottomBar, content | Yes (core:designsystem) | -| MifosErrorComponent | isNetworkConnected, isRetryEnabled, message, onRetry | Yes (core:ui) | -| EmptyDataView | image, error | Yes (core:ui) | -| MifosProgressIndicator | - | Yes (core:designsystem) | - ---- - -## 8. Navigation - -### 8.1 Routes - -```kotlin -// Charges List Route -@Serializable -data class ClientChargesRoute( - val chargeType: String, // "CLIENT", "LOAN", "SAVINGS", "SHARE" - val chargeTypeId: Long? = null, // Required for LOAN/SAVINGS/SHARE -) - -// Charge Details Route -@Serializable -data class ChargesDetailsRoute( - val title: String = "", - val date: String = "", - val due: String = "", - val paid: String = "", - val waived: String = "", - val outstanding: String = "", - val refNo: String = "", - val paidOn: String = "", - val isPaid: Boolean = false, -) -``` - -### 8.2 Navigation Flow - -``` -Home Dashboard - | - v -[Services Grid] -> "Charges" card - | - v -Client Charges Screen (chargeType = CLIENT) - | - v (tap charge item) -Charge Details Screen - ---- OR --- - -Loan Account Details - | - v -[View Charges] action - | - v -Loan Charges Screen (chargeType = LOAN, chargeTypeId = loanId) - | - v (tap charge item) -Charge Details Screen -``` - ---- - -## 9. Dependencies - -### 9.1 Module Dependencies - -```kotlin -// feature/client-charge/build.gradle.kts -plugins { - alias(libs.plugins.convention.cmp.feature) -} - -dependencies { - implementation(projects.core.data) - implementation(projects.core.model) - implementation(projects.core.ui) - implementation(projects.core.designsystem) - implementation(projects.core.common) -} -``` - -### 9.2 Repository Dependency - -```kotlin -// Koin Module - ChargeModule.kt -val chargeModule = module { - viewModelOf(::ClientChargeViewModel) - viewModelOf(::ChargeDetailsViewModel) -} -``` - ---- - -## Changelog - -| Date | Change | -|------|--------| -| 2025-12-29 | Updated specification with detailed ASCII mockups, complete state models from implementation, navigation routes, and component details | -| 2025-12-29 | Initial spec from codebase analysis | diff --git a/claude-product-cycle/design-spec-layer/features/client-charge/STATUS.md b/claude-product-cycle/design-spec-layer/features/client-charge/STATUS.md deleted file mode 100644 index 43dd17e07..000000000 --- a/claude-product-cycle/design-spec-layer/features/client-charge/STATUS.md +++ /dev/null @@ -1,85 +0,0 @@ -# Client Charge - Implementation Status - -> **Last Updated**: 2025-12-29 -> **Overall Status**: ✅ Done - ---- - -## Implementation Checklist - -- [x] SPEC.md created -- [x] API.md created -- [x] Network: Services exist (ClientChargeService) -- [x] Data: Repository exists (ClientChargeRepository) -- [x] Feature: ViewModels + Screens -- [x] Navigation: Routes registered -- [x] DI: Modules registered -- [x] STATUS.md updated - ---- - -## Layer Status - -| Layer | Status | Files | -|-------|--------|-------| -| Network | ✅ | ClientChargeService.kt | -| Data | ✅ | ClientChargeRepository.kt, ClientChargeRepositoryImp.kt | -| Feature | ✅ | ClientChargeViewModel.kt, ClientChargeScreen.kt, ChargeDetailsViewModel.kt, ChargeDetailScreen.kt | -| DI | ✅ | ChargeModule.kt | -| Navigation | ✅ | ClientChargesNavGraph.kt | -| Components | ✅ | ClientChargeItem.kt | - ---- - -## Files - -### Network Layer -- `core/network/services/ClientChargeService.kt` - -### Data Layer -- `core/data/repository/ClientChargeRepository.kt` -- `core/data/repositoryImpl/ClientChargeRepositoryImp.kt` - -### Feature Layer - Charges List -- `feature/client-charge/src/commonMain/kotlin/org/mifos/mobile/feature/charge/charges/ClientChargeViewModel.kt` -- `feature/client-charge/src/commonMain/kotlin/org/mifos/mobile/feature/charge/charges/ClientChargeScreen.kt` -- `feature/client-charge/src/commonMain/kotlin/org/mifos/mobile/feature/charge/charges/ClientChargeRoute.kt` - -### Feature Layer - Charge Details -- `feature/client-charge/src/commonMain/kotlin/org/mifos/mobile/feature/charge/chargeDetails/ChargeDetailsViewModel.kt` -- `feature/client-charge/src/commonMain/kotlin/org/mifos/mobile/feature/charge/chargeDetails/ChargeDetailScreen.kt` -- `feature/client-charge/src/commonMain/kotlin/org/mifos/mobile/feature/charge/chargeDetails/ChargeDetailsRoute.kt` - -### Components -- `feature/client-charge/src/commonMain/kotlin/org/mifos/mobile/feature/charge/components/ClientChargeItem.kt` - -### DI Layer -- `feature/client-charge/src/commonMain/kotlin/org/mifos/mobile/feature/charge/di/ChargeModule.kt` - -### Navigation Layer -- `feature/client-charge/src/commonMain/kotlin/org/mifos/mobile/feature/charge/navigation/ClientChargesNavGraph.kt` - ---- - -## Charge Types Supported - -| Type | Endpoint | Description | -|------|----------|-------------| -| CLIENT | `/clients/{id}/charges` | Client-level charges | -| LOAN | `/loans/{id}/charges` | Loan account charges | -| SAVINGS | `/savingsaccounts/{id}/charges` | Savings account charges | -| SHARE | `/shareaccounts/{id}` | Share account charges (via account details) | - ---- - -## Gaps - -None identified. - ---- - -## Changelog - -| Date | Change | -|------|--------| -| 2025-12-29 | Initial status documentation | diff --git a/claude-product-cycle/design-spec-layer/features/client-charge/mockups/FIGMA_LINKS.md b/claude-product-cycle/design-spec-layer/features/client-charge/mockups/FIGMA_LINKS.md deleted file mode 100644 index d19cefdcb..000000000 --- a/claude-product-cycle/design-spec-layer/features/client-charge/mockups/FIGMA_LINKS.md +++ /dev/null @@ -1,69 +0,0 @@ -# Client Charges Feature - Figma Links - -> **Feature**: Client Charges (Smart Charges Hub) -> **Status**: Pending Design Export -> **Last Updated**: 2025-01-04 - ---- - -## Figma Design Links - -After generating designs using AI tools (Stitch/Figma), paste the links below: - -### Main Screens - -| Screen | Figma Link | Status | -|--------|------------|--------| -| Smart Dashboard | `[Paste link here]` | Pending | -| Calendar View | `[Paste link here]` | Pending | -| Charge Detail | `[Paste link here]` | Pending | -| Autopay Setup - Step 1 | `[Paste link here]` | Pending | -| Autopay Setup - Step 2 | `[Paste link here]` | Pending | -| Autopay Setup - Step 3 | `[Paste link here]` | Pending | -| Split Payment | `[Paste link here]` | Pending | -| Payment Success | `[Paste link here]` | Pending | -| Charge Insights | `[Paste link here]` | Pending | -| Waiver Request | `[Paste link here]` | Pending | -| Empty State | `[Paste link here]` | Pending | - -### Component Library - -| Component | Figma Link | Status | -|-----------|------------|--------| -| Balance Card | `[Paste link here]` | Pending | -| Streak Banner | `[Paste link here]` | Pending | -| Quick Action Grid | `[Paste link here]` | Pending | -| Charge Card | `[Paste link here]` | Pending | -| Status Chip | `[Paste link here]` | Pending | -| Calendar Day | `[Paste link here]` | Pending | -| Plan Card | `[Paste link here]` | Pending | -| Progress Bar | `[Paste link here]` | Pending | -| Timeline | `[Paste link here]` | Pending | -| AI Tip Card | `[Paste link here]` | Pending | - -### Dark Mode Variants - -| Screen | Figma Link | Status | -|--------|------------|--------| -| Smart Dashboard (Dark) | `[Paste link here]` | Pending | -| Charge Detail (Dark) | `[Paste link here]` | Pending | -| Calendar View (Dark) | `[Paste link here]` | Pending | - ---- - -## Export Checklist - -- [ ] Export all screens at 1x, 2x, 3x -- [ ] Export component assets as SVG -- [ ] Export Lottie animations (streak flame, confetti) -- [ ] Document color variables -- [ ] Create prototype connections -- [ ] Add interaction annotations -- [ ] Review accessibility contrast -- [ ] Verify dark mode mappings - ---- - -## Notes - -_Add any design notes, feedback, or revision history here._ diff --git a/claude-product-cycle/design-spec-layer/features/client-charge/mockups/PROMPTS.md b/claude-product-cycle/design-spec-layer/features/client-charge/mockups/PROMPTS.md deleted file mode 100644 index c3db90d82..000000000 --- a/claude-product-cycle/design-spec-layer/features/client-charge/mockups/PROMPTS.md +++ /dev/null @@ -1,549 +0,0 @@ -# Client Charges Feature - AI Design Tool Prompts - -> **Generated from**: MOCKUP.md v2.0 -> **Design Pattern**: Smart Charges Hub -> **Primary Gradient**: #667EEA (Purple) -> #764BA2 (Deep Purple) -> **Generated**: 2025-01-04 - ---- - -## Google Stitch Prompts - -### Prompt 1: Smart Charges Dashboard - -``` -Create a Smart Charges Dashboard screen for a fintech banking app. - -Design specifications: -- Material Design 3 with 2025 fintech patterns -- Primary gradient: #667EEA to #764BA2 -- Gamified payment streak integration - -Header: -- Back button, "My Charges" title -- Calendar icon, Settings icon - -Outstanding Balance Card (Gradient): -- Background: Gradient #667EEA to #764BA2 -- Large amount: "$225.00" (36sp bold white) -- Label: "OUTSTANDING BALANCE" -- Three stat boxes below: - - Total: $500.00 - - Paid: $250.00 (green indicator) - - Waived: $25.00 (yellow indicator) - -Payment Streak Banner: -- Fire icon with "On-Time Streak: 5 payments" -- Progress bar: Showing 5/10 to next reward -- Text: "Next reward at 10!" -- Flame animation on icon - -Quick Actions Row: -- 4 icon buttons in grid: - - Pay All (credit card icon) - - Autopay Setup (refresh icon) - - Calendar View (calendar icon) - - Insights (chart icon) -- Each: 56dp square, icon + label - -Filter Tabs: -- Horizontal scroll: All, Loan, Savings, Share -- Selected tab underlined with gradient - -Due Soon Section: -- Section header: "DUE SOON (2)" with "View" link -- Charge cards with urgency indicators - -Charge Card (Due Soon): -- Left icon: Document with red status dot -- Title: "Loan Processing Fee" -- Account: "LOAN-001234" -- Due: "Tomorrow" with "$150.00 outstanding" -- Status chips: "PENALTY", "75% paid", "Due in 1 day" -- Action buttons: "Pay $150.00", "Split Payment" -- Background: White, shadow, 20dp radius - -Recently Paid Section: -- Section header: "RECENTLY PAID (2)" -- Compact paid charge cards with green checkmark -- "+5 pts earned" badge - -Style: Gamified payments, urgency indicators, quick actions -``` - -### Prompt 2: Due Date Calendar View - -``` -Create a Payment Calendar screen for viewing charge due dates in a fintech app. - -Design specifications: -- Material Design 3 with calendar patterns -- Color-coded due dates - -Header: -- Back button, "Payment Calendar" title - -Calendar Component: -- Month navigation: "< January 2025 >" -- Week day headers: Mo Tu We Th Fr Sa Su -- Date grid with indicators: - - Red dot: Overdue/Penalty - - Yellow dot: Due Soon - - Green dot: Upcoming - - Checkmark: Paid -- Amount shown on relevant dates: "$150", "$50" -- Selected date highlighted with gradient circle - -Legend: -- Color key: Overdue (red), Due Soon (yellow), Upcoming (green), Paid (check) - -Selected Date Section: -- Date header: "JANUARY 15 - DUE" -- Charge cards for that date: - - Loan Processing Fee, $150.00 - - "Pay Now" button - -AI Tip Card: -- Light bulb icon -- "Based on your cash flow, the best day to pay the $150 charge is January 10th when your balance is highest." -- Action button: "Schedule Payment for Jan 10" - -Monthly Summary (collapsible): -- Total due this month: $200 -- Paid so far: $0 -- Upcoming: $200 - -Style: Visual calendar, smart scheduling, AI recommendations -``` - -### Prompt 3: Charge Detail Screen - -``` -Create a Charge Detail screen with comprehensive payment options for a fintech app. - -Design specifications: -- Material Design 3 with detailed charge information -- Multiple payment action options - -Header (Gradient): -- Background: Gradient #667EEA to #764BA2 -- Back button, "Charge Details" title, More menu -- Large icon with document -- Charge name: "LOAN PROCESSING FEE" -- Account: "Loan Account: LOAN-001234" -- Outstanding: "$150.00" (36sp bold white) -- Status chips: "PENALTY", "Due Tomorrow" - -Amount Breakdown Card: -- Title: "AMOUNT BREAKDOWN" -- Rows with values: - - Due Amount: $150.00 - - Amount Paid: $75.00 (green) - - Amount Waived: $0.00 (yellow) - - Outstanding: $75.00 (red) -- Payment Progress bar: 50% filled - -Charge Details Card: -- Title: "CHARGE DETAILS" -- Info rows: - - Charge ID: #123 - - Due Date: Jan 15, 2025 - - Calculation Type: Flat Rate - - Charge Time Type: On Disbursement - - Currency: USD - - Is Penalty: Yes (red badge) - -Payment History Timeline: -- Title: "PAYMENT HISTORY" -- Timeline entries: - - Jan 10: Partial Payment, $75.00 paid (green) - - Dec 28: Charge Created, $150.00 applied - -Payment Options Section: -- Title: "PAYMENT OPTIONS" -- Primary button: "Pay Full Amount ($75.00)" (gradient) -- Secondary options: - - "Split into 2 Payments of $37.50" - - "Set Up Autopay for Future" - - "Request Waiver" - -Style: Comprehensive info, multiple payment paths, clear history -``` - -### Prompt 4: Autopay Setup Flow - -``` -Create an Autopay Setup wizard for charges in a fintech app. - -Design specifications: -- Material Design 3 with step wizard -- 3-step setup process - -Step 1: Select Charges -Header: -- Back button, "Set Up Autopay" title -- Step indicator: "Step 1 of 3" with 33% progress bar - -Intro: -- Refresh icon -- Title: "Set Up Automatic Payments" -- Subtitle: "Never miss a payment. Autopay will automatically pay charges when due." - -Charge Type Selection: -- Title: "SELECT CHARGES TO AUTOPAY" -- Checkbox cards: - - All Future Loan Charges (checked) - - "Includes: Processing fees, late fees, penalties" - - "Estimated: ~$50-200/month" - - All Future Savings Charges (checked) - - "Includes: Maintenance fees, service charges" - - "Estimated: ~$25/month" - - All Future Client Charges (unchecked) - - "Includes: Annual fees, document fees" - - "Estimated: ~$100/year" - -Continue Button: "Continue to Select Account" - -Step 2: Select Account -- Progress: 66% -- Title: "PAY FROM ACCOUNT" -- Account cards (radio selection): - - Primary Savings ****4521 (selected, recommended) - - Available: $8,200.00 - - "Recommended - Highest balance" - - Emergency Fund ****7832 - - Available: $2,500.00 - -Payment Timing: -- Radio options: - - On Due Date (Recommended, selected) - - 3 Days Before Due Date - - 7 Days Before Due Date - -Low Balance Protection: -- Checkbox: "Skip autopay if account balance is below $500" -- Subtitle: "You'll be notified to pay manually" - -Continue Button: "Continue to Confirm" - -Step 3: Confirmation -- Progress: 100% -- Summary Card: - - Charges: Loan + Savings - - Account: Savings ****4521 - - Timing: On Due Date - - Protection: Skip if < $500 - -Benefits List: -- Never miss a payment -- Protect your payment streak -- Avoid late fees and penalties -- Earn autopay bonus points - -Email Notice: -- "You'll receive email confirmation and reminders 24 hours before each autopay" - -Enable Button: "Enable Autopay" (gradient) - -Style: Guided setup, clear benefits, protection options -``` - -### Prompt 5: Split Payment Flow - -``` -Create a Split Payment screen for breaking charges into installments in a fintech app. - -Design specifications: -- Material Design 3 with installment patterns -- Clear payment plan visualization - -Header: -- Back button, "Split Payment" title - -Charge Context: -- Document icon -- "Loan Processing Fee" -- "Original Amount: $150.00" - -Payment Plan Selection: -- Title: "CHOOSE PAYMENT PLAN" - -Plan Cards (radio selection): -Plan 1 - 2 Payments (selected): -- "$75.00 x 2" -- Timeline visualization: Jan 15 -> Feb 15 -- Amounts shown: $75.00 each -- Badge: "No extra fees, Recommended" -- Gradient border when selected - -Plan 2 - 3 Payments: -- "$50.00 x 3" -- Timeline: Jan 15 -> Feb 15 -> Mar 15 -- "+$5.00 split fee" warning - -Plan 3 - 4 Payments: -- "$37.50 x 4" -- Timeline: Jan 15 - Apr 15 (monthly) -- "+$10.00 split fee" - -Payment Summary: -- Charge Amount: $150.00 -- Split Fee: $0.00 -- Total: $150.00 -- First Payment Due: Jan 15, 2025 - -Account Selector: -- Credit card icon -- "Pay From: Savings ****4521" -- "Change >" link - -Confirm Button: -- "Confirm Split Payment" (gradient) - -Terms: -- Small text about split payment agreement - -Style: Clear plan comparison, timeline visualization, fee transparency -``` - -### Prompt 6: Payment Success Screen - -``` -Create a Payment Success screen with streak update for a fintech app. - -Design specifications: -- Material Design 3 with celebration patterns -- Gamification integration - -Success Header: -- Large checkmark with animated circle -- Confetti animation background -- "Payment Success!" text - -Amount Display: -- "$75.00" -- "Loan Processing Fee" - -Transaction Details Card: -- Reference: TXN-2025-001234 -- Date: Jan 15, 2025 -- From Account: Savings ****4521 -- Status: Completed (green) - -Streak Update Banner (Gradient): -- Fire icon -- "STREAK UPDATED!" -- "Your on-time payment streak is now 6!" -- Progress bar: 6/10 to reward -- "+10 points earned for on-time payment" - -Action Buttons: -- Download Receipt -- Share Receipt - -Back Button: -- "Back to Charges" - -Style: Celebratory, gamified rewards, clear confirmation -``` - ---- - -## Figma MCP Prompts - -### Prompt 1: Charges Dashboard Frame - -``` -Create a Figma frame for "Charges - Smart Dashboard" mobile screen (375x812px). - -Components needed: -1. Header: Back button, title, calendar and settings icons - -2. Outstanding Balance Card: - - Gradient background - - Large amount display - - Three stat boxes row - -3. Payment Streak Banner: - - Fire icon with animation indicator - - Progress bar - - Reward text - -4. Quick Actions Grid: - - 4 icon buttons: Pay All, Autopay, Calendar, Insights - - Auto-layout 2x2 or 1x4 - -5. Filter Tabs: - - Horizontal scroll - - Selected/unselected states - -6. Charge Card Component (create variants): - - Due Soon (urgent styling) - - Paid (success styling) - - Overdue (error styling) - - Status chips - - Action buttons - -7. Section Headers: - - Title with count badge - - View link - -Design tokens: -- Primary: #667EEA -- Secondary: #764BA2 -- Success: #00D09C -- Warning: #FFB800 -- Error: #FF4757 -``` - -### Prompt 2: Complete Charges Flow - -``` -Create a Figma prototype flow for Charges feature with these frames: - -Frame 1: Smart Dashboard (main) -- Outstanding balance card -- Streak banner -- Quick actions -- Charge list - -Frame 2: Calendar View -- Month calendar with indicators -- Selected date charges -- AI scheduling tip - -Frame 3: Charge Detail -- Amount breakdown -- Charge info -- Payment history timeline -- Payment options - -Frame 4-6: Autopay Setup Flow -- Step 1: Select charge types -- Step 2: Select account and timing -- Step 3: Confirmation - -Frame 7: Split Payment -- Plan selection cards -- Timeline visualization -- Summary - -Frame 8: Payment Success -- Celebration animation -- Streak update -- Receipt actions - -Frame 9: Charge Insights -- Summary stats -- Charts -- Performance metrics - -Prototype connections: -- Dashboard -> Detail via card tap -- Dashboard -> Calendar via quick action -- Pay button -> Success -- Autopay button -> Setup flow - -Component variants: -- Charge card: due-soon/paid/overdue -- Status chip: penalty/autopay/due-date -- Plan card: selected/unselected -``` - ---- - -## Design Tokens - -```json -{ - "feature": "client-charge", - "version": "2.0", - "designPattern": "Smart Charges Hub", - "colors": { - "primary": "#667EEA", - "secondary": "#764BA2", - "success": "#00D09C", - "warning": "#FFB800", - "error": "#FF4757", - "surface": "#FFFFFF", - "background": "#F8F9FA" - }, - "status": { - "paid": { "bg": "#00D09C15", "text": "#00D09C" }, - "pending": { "bg": "#FFB80015", "text": "#FFB800" }, - "overdue": { "bg": "#FF475715", "text": "#FF4757" }, - "penalty": { "bg": "#FF475715", "text": "#FF4757" }, - "autopay": { "bg": "#667EEA15", "text": "#667EEA" } - }, - "components": { - "balanceCard": { - "height": "auto", - "padding": 20, - "radius": 24, - "statBoxWidth": 100 - }, - "streakBanner": { - "height": 80, - "progressHeight": 6, - "fireIconSize": 24 - }, - "chargeCard": { - "minHeight": 120, - "padding": 16, - "radius": 20, - "iconSize": 48, - "gap": 12 - }, - "statusChip": { - "height": 24, - "padding": 8, - "radius": 12, - "fontSize": 11 - }, - "calendarDay": { - "size": 40, - "indicatorSize": 8, - "selectedRadius": 20 - }, - "planCard": { - "padding": 16, - "radius": 16, - "timelineHeight": 4 - }, - "progressBar": { - "height": 6, - "radius": 3 - } - }, - "animation": { - "streakFlame": { - "duration": 2000, - "type": "flicker" - }, - "confetti": { - "duration": 2000, - "particles": 20 - }, - "progressFill": { - "duration": 600, - "easing": "decelerate" - } - } -} -``` - ---- - -## Screen Checklist - -| Screen | Stitch Prompt | Figma Prompt | Status | -|--------|---------------|--------------|--------| -| Smart Dashboard | 1 | 1, 2 | Ready | -| Calendar View | 2 | 2 | Ready | -| Charge Detail | 3 | 2 | Ready | -| Autopay Setup | 4 | 2 | Ready | -| Split Payment | 5 | 2 | Ready | -| Payment Success | 6 | 2 | Ready | -| Charge Insights | - | 2 | Pending | -| Waiver Request | - | - | Pending | -| Empty State | - | - | Pending | diff --git a/claude-product-cycle/design-spec-layer/features/client-charge/mockups/design-tokens.json b/claude-product-cycle/design-spec-layer/features/client-charge/mockups/design-tokens.json deleted file mode 100644 index 650e83fac..000000000 --- a/claude-product-cycle/design-spec-layer/features/client-charge/mockups/design-tokens.json +++ /dev/null @@ -1,283 +0,0 @@ -{ - "feature": "client-charge", - "version": "2.0", - "designPattern": "Smart Charges Hub", - "lastUpdated": "2025-01-04", - "colors": { - "primary": { - "default": "#667EEA", - "dark": "#5A6FD6" - }, - "secondary": { - "default": "#764BA2", - "dark": "#6A4292" - }, - "success": { - "default": "#00D09C", - "light": "#00D09C15" - }, - "warning": { - "default": "#FFB800", - "light": "#FFB80015" - }, - "error": { - "default": "#FF4757", - "light": "#FF475715" - }, - "surface": { - "light": "#FFFFFF", - "dark": "#1A1F2E" - }, - "background": { - "light": "#F8F9FA", - "dark": "#0D1117" - }, - "text": { - "primary": { - "light": "#1F2937", - "dark": "#F0F6FC" - }, - "secondary": { - "light": "#6B7280", - "dark": "#8B949E" - }, - "onGradient": "#FFFFFF" - }, - "divider": { - "light": "#E1E4E8", - "dark": "#30363D" - } - }, - "gradients": { - "primary": { - "type": "linear", - "angle": 135, - "stops": [ - { "color": "#667EEA", "position": 0 }, - { "color": "#764BA2", "position": 100 } - ] - }, - "success": { - "type": "linear", - "angle": 135, - "stops": [ - { "color": "#00D09C", "position": 0 }, - { "color": "#38EF7D", "position": 100 } - ] - }, - "streak": { - "type": "linear", - "angle": 135, - "stops": [ - { "color": "#FF6B6B", "position": 0 }, - { "color": "#FFE66D", "position": 100 } - ] - } - }, - "typography": { - "fontFamily": { - "primary": "Inter", - "mono": "JetBrains Mono" - }, - "styles": { - "h1": { "size": 28, "weight": 700, "lineHeight": 1.2 }, - "h2": { "size": 24, "weight": 700, "lineHeight": 1.3 }, - "amount": { "size": 36, "weight": 700, "lineHeight": 1.2 }, - "amountMd": { "size": 28, "weight": 700, "lineHeight": 1.3 }, - "subtitle": { "size": 16, "weight": 600, "lineHeight": 1.5 }, - "body": { "size": 14, "weight": 400, "lineHeight": 1.5 }, - "caption": { "size": 12, "weight": 400, "lineHeight": 1.4 }, - "chip": { "size": 11, "weight": 600, "lineHeight": 1.4 } - } - }, - "spacing": { - "xs": 4, - "sm": 8, - "md": 16, - "lg": 24, - "xl": 32, - "xxl": 48 - }, - "radius": { - "sm": 8, - "md": 12, - "lg": 16, - "xl": 20, - "xxl": 24, - "pill": 100 - }, - "elevation": { - "card": "0 2px 8px rgba(0,0,0,0.08)", - "cardHover": "0 4px 12px rgba(0,0,0,0.12)", - "modal": "0 8px 24px rgba(0,0,0,0.16)" - }, - "status": { - "paid": { - "background": "#00D09C15", - "text": "#00D09C", - "icon": "checkmark" - }, - "pending": { - "background": "#FFB80015", - "text": "#FFB800", - "icon": "clock" - }, - "overdue": { - "background": "#FF475715", - "text": "#FF4757", - "icon": "alert" - }, - "penalty": { - "background": "#FF475715", - "text": "#FF4757", - "icon": "warning" - }, - "autopay": { - "background": "#667EEA15", - "text": "#667EEA", - "icon": "refresh" - }, - "partial": { - "background": "#FFB80015", - "text": "#FFB800", - "icon": "partial-circle" - } - }, - "components": { - "balanceCard": { - "padding": 20, - "radius": 24, - "statBoxWidth": 100, - "statBoxHeight": 60, - "gap": 12 - }, - "streakBanner": { - "height": 80, - "padding": 16, - "progressHeight": 6, - "progressRadius": 3, - "fireIconSize": 24 - }, - "quickAction": { - "size": 72, - "iconSize": 28, - "radius": 16, - "gap": 12 - }, - "filterTab": { - "height": 36, - "padding": 16, - "gap": 8, - "indicatorHeight": 2 - }, - "chargeCard": { - "minHeight": 120, - "padding": 16, - "radius": 20, - "iconSize": 48, - "gap": 12, - "actionButtonHeight": 36 - }, - "statusChip": { - "height": 24, - "paddingHorizontal": 8, - "radius": 12, - "fontSize": 11, - "gap": 8 - }, - "calendarDay": { - "size": 40, - "indicatorSize": 8, - "selectedRadius": 20, - "amountFontSize": 10 - }, - "planCard": { - "padding": 16, - "radius": 16, - "timelineHeight": 4, - "timelineDotSize": 12, - "variants": { - "default": { "bg": "#FFFFFF", "border": "#E1E4E8" }, - "selected": { "bg": "gradient@8%", "border": "gradient" } - } - }, - "progressBar": { - "height": 6, - "radius": 3, - "trackColor": "#E1E4E8" - }, - "amountBreakdown": { - "rowHeight": 48, - "padding": 16, - "radius": 16 - }, - "timeline": { - "lineWidth": 2, - "dotSize": 12, - "gap": 24, - "colors": { - "active": "#00D09C", - "confirmed": "#FFB800", - "pending": "#667EEA" - } - }, - "aiTipCard": { - "padding": 16, - "radius": 12, - "iconSize": 20, - "background": "#667EEA08" - }, - "checkboxCard": { - "padding": 16, - "radius": 12, - "checkboxSize": 24, - "gap": 12 - } - }, - "animation": { - "streakFlame": { - "duration": 2000, - "type": "flicker", - "intensity": "subtle" - }, - "confetti": { - "duration": 2000, - "particles": 20, - "colors": ["#667EEA", "#764BA2", "#00D09C", "#FFB800"] - }, - "progressFill": { - "duration": 600, - "easing": "cubic-bezier(0.0, 0.0, 0.2, 1)" - }, - "cardPress": { - "scale": 0.98, - "duration": 150 - }, - "successCheck": { - "duration": 600, - "type": "draw-stroke" - }, - "counterIncrement": { - "duration": 300, - "type": "scale-pulse" - }, - "timelineConnect": { - "duration": 400, - "stagger": 200 - } - }, - "screens": [ - "smartDashboard", - "calendarView", - "chargeDetail", - "autopaySetupStep1", - "autopaySetupStep2", - "autopaySetupStep3", - "splitPayment", - "paymentSuccess", - "chargeInsights", - "waiverRequest", - "emptyState", - "loadingState" - ] -} diff --git a/claude-product-cycle/design-spec-layer/features/client-charge/mockups/dummy/01-smart-dashboard.png b/claude-product-cycle/design-spec-layer/features/client-charge/mockups/dummy/01-smart-dashboard.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/client-charge/mockups/dummy/02-calendar-view.png b/claude-product-cycle/design-spec-layer/features/client-charge/mockups/dummy/02-calendar-view.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/client-charge/mockups/dummy/03-charge-detail.png b/claude-product-cycle/design-spec-layer/features/client-charge/mockups/dummy/03-charge-detail.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/client-charge/mockups/dummy/04-autopay-setup-step1.png b/claude-product-cycle/design-spec-layer/features/client-charge/mockups/dummy/04-autopay-setup-step1.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/client-charge/mockups/dummy/05-autopay-setup-step2.png b/claude-product-cycle/design-spec-layer/features/client-charge/mockups/dummy/05-autopay-setup-step2.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/client-charge/mockups/dummy/06-autopay-setup-step3.png b/claude-product-cycle/design-spec-layer/features/client-charge/mockups/dummy/06-autopay-setup-step3.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/client-charge/mockups/dummy/07-split-payment.png b/claude-product-cycle/design-spec-layer/features/client-charge/mockups/dummy/07-split-payment.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/client-charge/mockups/dummy/08-payment-success.png b/claude-product-cycle/design-spec-layer/features/client-charge/mockups/dummy/08-payment-success.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/client-charge/mockups/dummy/09-charge-insights.png b/claude-product-cycle/design-spec-layer/features/client-charge/mockups/dummy/09-charge-insights.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/dashboard/API.md b/claude-product-cycle/design-spec-layer/features/dashboard/API.md deleted file mode 100644 index 56de3d136..000000000 --- a/claude-product-cycle/design-spec-layer/features/dashboard/API.md +++ /dev/null @@ -1,936 +0,0 @@ -# Dashboard - API Reference - -> **Base URL**: `https://tt.mifos.community/fineract-provider/api/v1/self/` -> **Authentication**: Basic Auth with `Fineract-Platform-TenantId` header -> **Last Updated**: 2025-12-28 - ---- - -## Authentication Headers - -All endpoints require: -``` -Headers: - Authorization: Basic {base64EncodedAuthenticationKey} - Fineract-Platform-TenantId: {tenantId} - Content-Type: application/json -``` - ---- - -## 1. Client Details - -### GET /self/clients/{clientId} - -**Purpose**: Fetch client information for dashboard greeting and profile - -**Request**: -``` -GET /self/clients/123 -``` - -**Response**: -```json -{ - "id": 123, - "accountNo": "CL-0000123", - "status": { - "id": 300, - "code": "clientStatusType.active", - "value": "Active" - }, - "active": true, - "activationDate": [2023, 1, 15], - "firstname": "John", - "middlename": "M", - "lastname": "Doe", - "displayName": "John M. Doe", - "mobileNo": "1234567890", - "emailAddress": "john.doe@example.com", - "dateOfBirth": [1990, 5, 20], - "gender": { - "id": 22, - "name": "Male" - }, - "officeId": 1, - "officeName": "Head Office", - "timeline": { - "submittedOnDate": [2023, 1, 10], - "activatedOnDate": [2023, 1, 15] - } -} -``` - -**Kotlin DTO**: -```kotlin -@Serializable -data class Client( - @SerialName("id") val id: Long, - @SerialName("accountNo") val accountNo: String? = null, - @SerialName("status") val status: ClientStatus? = null, - @SerialName("active") val active: Boolean = false, - @SerialName("activationDate") val activationDate: List? = null, - @SerialName("firstname") val firstname: String? = null, - @SerialName("middlename") val middlename: String? = null, - @SerialName("lastname") val lastname: String? = null, - @SerialName("displayName") val displayName: String? = null, - @SerialName("mobileNo") val mobileNo: String? = null, - @SerialName("emailAddress") val emailAddress: String? = null, - @SerialName("dateOfBirth") val dateOfBirth: List? = null, - @SerialName("gender") val gender: Gender? = null, - @SerialName("officeId") val officeId: Long? = null, - @SerialName("officeName") val officeName: String? = null, -) - -@Serializable -data class ClientStatus( - @SerialName("id") val id: Int, - @SerialName("code") val code: String? = null, - @SerialName("value") val value: String? = null, -) -``` - -**Status**: Implemented in ClientService - ---- - -## 2. Client Accounts Overview - -### GET /self/clients/{clientId}/accounts - -**Purpose**: Fetch all account summaries for dashboard net worth calculation - -**Request**: -``` -GET /self/clients/123/accounts -``` - -**Response**: -```json -{ - "savingsAccounts": [ - { - "id": 1001, - "accountNo": "SA-0001234567", - "productId": 1, - "productName": "Savings Plus", - "shortProductName": "SP", - "status": { - "id": 300, - "code": "savingsAccountStatusType.active", - "value": "Active", - "submittedAndPendingApproval": false, - "approved": true, - "rejected": false, - "withdrawnByApplicant": false, - "active": true, - "closed": false - }, - "currency": { - "code": "USD", - "name": "US Dollar", - "decimalPlaces": 2, - "displaySymbol": "$", - "nameCode": "currency.USD", - "displayLabel": "US Dollar ($)" - }, - "accountBalance": 35000.00, - "accountType": { - "id": 100, - "code": "accountType.individual", - "value": "Individual" - }, - "depositType": { - "id": 100, - "code": "depositAccountType.savingsDeposit", - "value": "Savings" - } - } - ], - "loanAccounts": [ - { - "id": 2001, - "accountNo": "LA-0009876543", - "productId": 2, - "productName": "Personal Loan", - "shortProductName": "PL", - "status": { - "id": 300, - "code": "loanStatusType.active", - "value": "Active", - "active": true - }, - "loanType": { - "id": 1, - "code": "accountType.individual", - "value": "Individual" - }, - "loanCycle": 1, - "principal": 10000.00, - "loanBalance": 6750.00, - "amountPaid": 3250.00, - "inArrears": false - } - ], - "shareAccounts": [ - { - "id": 3001, - "accountNo": "SH-0005678901", - "productId": 3, - "productName": "Equity Shares", - "status": { - "id": 300, - "code": "shareAccountStatusType.active", - "value": "Active", - "active": true - }, - "totalApprovedShares": 100, - "totalPendingForApprovalShares": 0 - } - ] -} -``` - -**Kotlin DTO**: -```kotlin -@Serializable -data class ClientAccounts( - @SerialName("savingsAccounts") val savingsAccounts: List? = null, - @SerialName("loanAccounts") val loanAccounts: List = emptyList(), - @SerialName("shareAccounts") val shareAccounts: List = emptyList(), -) - -@Serializable -data class SavingAccount( - @SerialName("id") val id: Long, - @SerialName("accountNo") val accountNo: String? = null, - @SerialName("productId") val productId: Long? = null, - @SerialName("productName") val productName: String? = null, - @SerialName("status") val status: SavingsStatus? = null, - @SerialName("currency") val currency: Currency? = null, - @SerialName("accountBalance") val accountBalance: Double? = null, - @SerialName("depositType") val depositType: DepositType? = null, -) - -@Serializable -data class LoanAccount( - @SerialName("id") val id: Long, - @SerialName("accountNo") val accountNo: String? = null, - @SerialName("productId") val productId: Long? = null, - @SerialName("productName") val productName: String? = null, - @SerialName("status") val status: LoanStatus? = null, - @SerialName("loanType") val loanType: LoanType? = null, - @SerialName("principal") val principal: Double? = null, - @SerialName("loanBalance") val loanBalance: Double? = null, - @SerialName("amountPaid") val amountPaid: Double? = null, - @SerialName("inArrears") val inArrears: Boolean = false, -) - -@Serializable -data class ShareAccount( - @SerialName("id") val id: Long, - @SerialName("accountNo") val accountNo: String? = null, - @SerialName("productId") val productId: Long? = null, - @SerialName("productName") val productName: String? = null, - @SerialName("status") val status: ShareStatus? = null, - @SerialName("totalApprovedShares") val totalApprovedShares: Int? = null, - @SerialName("totalPendingForApprovalShares") val totalPendingForApprovalShares: Int? = null, -) -``` - -**Status**: Implemented in ClientService - ---- - -## 3. Client Profile Image - -### GET /self/clients/{clientId}/images - -**Purpose**: Fetch client profile image for dashboard avatar - -**Request**: -``` -GET /self/clients/123/images -Accept: application/octet-stream -``` - -**Response**: -``` -Binary image data (JPEG/PNG) -``` - -**Alternative Response** (Base64): -``` -GET /self/clients/123/images?maxWidth=200&maxHeight=200 -Accept: text/plain - -Response: Base64 encoded image string -``` - -**Kotlin Implementation**: -```kotlin -suspend fun getClientImage(clientId: Long): ByteArray? { - return try { - clientService.getClientImage(clientId) - } catch (e: Exception) { - null // Return null if no image exists - } -} -``` - -**Status**: Implemented in ClientService - ---- - -## 4. Client Transactions - -### GET /self/clients/{clientId}/transactions - -**Purpose**: Fetch recent transactions across all accounts - -**Request**: -``` -GET /self/clients/123/transactions?offset=0&limit=20 -``` - -**Query Parameters**: -| Parameter | Type | Default | Description | -|-----------|------|---------|-------------| -| offset | Int | 0 | Pagination offset | -| limit | Int | 50 | Number of records | - -**Response**: -```json -{ - "totalFilteredRecords": 150, - "pageItems": [ - { - "id": 10001, - "officeId": 1, - "officeName": "Head Office", - "type": { - "id": 1, - "code": "savingsAccountTransactionType.deposit", - "value": "Deposit", - "deposit": true, - "withdrawal": false, - "interestPosting": false, - "feeDeduction": false - }, - "date": [2025, 12, 28], - "currency": { - "code": "USD", - "name": "US Dollar", - "decimalPlaces": 2, - "displaySymbol": "$" - }, - "amount": 4500.00, - "submittedOnDate": [2025, 12, 28], - "reversed": false, - "submittedByUsername": "system", - "accountId": 1001, - "accountNo": "SA-0001234567", - "accountType": { - "id": 2, - "code": "accountType.savings", - "value": "Savings Account" - }, - "runningBalance": 35000.00, - "transfer": null - } - ] -} -``` - -**Kotlin DTO**: -```kotlin -@Serializable -data class TransactionPage( - @SerialName("totalFilteredRecords") val totalFilteredRecords: Int, - @SerialName("pageItems") val pageItems: List, -) - -@Serializable -data class Transaction( - @SerialName("id") val id: Long, - @SerialName("officeId") val officeId: Long? = null, - @SerialName("officeName") val officeName: String? = null, - @SerialName("type") val type: TransactionType? = null, - @SerialName("date") val date: List? = null, - @SerialName("currency") val currency: Currency? = null, - @SerialName("amount") val amount: Double? = null, - @SerialName("reversed") val reversed: Boolean = false, - @SerialName("accountId") val accountId: Long? = null, - @SerialName("accountNo") val accountNo: String? = null, - @SerialName("runningBalance") val runningBalance: Double? = null, - @SerialName("transfer") val transfer: TransferDetail? = null, -) - -@Serializable -data class TransactionType( - @SerialName("id") val id: Int, - @SerialName("code") val code: String? = null, - @SerialName("value") val value: String? = null, - @SerialName("deposit") val deposit: Boolean = false, - @SerialName("withdrawal") val withdrawal: Boolean = false, - @SerialName("interestPosting") val interestPosting: Boolean = false, - @SerialName("feeDeduction") val feeDeduction: Boolean = false, -) -``` - -**Status**: Implemented in RecentTransactionService - ---- - -## 5. Savings Account Details - -### GET /self/savingsaccounts/{accountId} - -**Purpose**: Fetch detailed savings account information - -**Request**: -``` -GET /self/savingsaccounts/1001 -``` - -**Query Parameters**: -| Parameter | Type | Description | -|-----------|------|-------------| -| associations | String | Include related data (transactions, charges) | - -**Response**: -```json -{ - "id": 1001, - "accountNo": "SA-0001234567", - "clientId": 123, - "clientName": "John Doe", - "savingsProductId": 1, - "savingsProductName": "Savings Plus", - "fieldOfficerId": 1, - "fieldOfficerName": "Officer Name", - "status": { - "id": 300, - "code": "savingsAccountStatusType.active", - "value": "Active", - "active": true - }, - "timeline": { - "submittedOnDate": [2023, 1, 10], - "approvedOnDate": [2023, 1, 12], - "activatedOnDate": [2023, 1, 15] - }, - "currency": { - "code": "USD", - "name": "US Dollar", - "decimalPlaces": 2, - "displaySymbol": "$" - }, - "nominalAnnualInterestRate": 4.5, - "interestCompoundingPeriodType": { - "id": 1, - "code": "savings.interest.period.savingsCompoundingInterestPeriodType.daily", - "value": "Daily" - }, - "interestPostingPeriodType": { - "id": 4, - "code": "savings.interest.period.savingsPostingInterestPeriodType.monthly", - "value": "Monthly" - }, - "interestCalculationType": { - "id": 1, - "code": "savingsInterestCalculationType.dailybalance", - "value": "Daily Balance" - }, - "interestCalculationDaysInYearType": { - "id": 365, - "code": "savingsInterestCalculationDaysInYearType.days365", - "value": "365 Days" - }, - "minRequiredOpeningBalance": 500.00, - "withdrawalFeeForTransfers": false, - "allowOverdraft": false, - "summary": { - "currency": { - "code": "USD", - "displaySymbol": "$" - }, - "totalDeposits": 42500.00, - "totalWithdrawals": 7500.00, - "totalInterestEarned": 1250.00, - "totalInterestPosted": 1250.00, - "accountBalance": 35000.00, - "availableBalance": 34500.00 - }, - "transactions": [], - "charges": [] -} -``` - -**Kotlin DTO**: -```kotlin -@Serializable -data class SavingsAccountDetail( - @SerialName("id") val id: Long, - @SerialName("accountNo") val accountNo: String? = null, - @SerialName("clientId") val clientId: Long? = null, - @SerialName("clientName") val clientName: String? = null, - @SerialName("savingsProductName") val savingsProductName: String? = null, - @SerialName("status") val status: SavingsStatus? = null, - @SerialName("currency") val currency: Currency? = null, - @SerialName("nominalAnnualInterestRate") val nominalAnnualInterestRate: Double? = null, - @SerialName("minRequiredOpeningBalance") val minRequiredOpeningBalance: Double? = null, - @SerialName("summary") val summary: SavingsSummary? = null, - @SerialName("transactions") val transactions: List? = null, - @SerialName("charges") val charges: List? = null, -) - -@Serializable -data class SavingsSummary( - @SerialName("totalDeposits") val totalDeposits: Double? = null, - @SerialName("totalWithdrawals") val totalWithdrawals: Double? = null, - @SerialName("totalInterestEarned") val totalInterestEarned: Double? = null, - @SerialName("totalInterestPosted") val totalInterestPosted: Double? = null, - @SerialName("accountBalance") val accountBalance: Double? = null, - @SerialName("availableBalance") val availableBalance: Double? = null, -) -``` - -**Status**: Implemented in SavingsAccountService - ---- - -## 6. Loan Account Details - -### GET /self/loans/{loanId} - -**Purpose**: Fetch detailed loan account information - -**Request**: -``` -GET /self/loans/2001?associations=repaymentSchedule,transactions -``` - -**Query Parameters**: -| Parameter | Type | Description | -|-----------|------|-------------| -| associations | String | Include: repaymentSchedule, transactions, all | - -**Response**: -```json -{ - "id": 2001, - "accountNo": "LA-0009876543", - "clientId": 123, - "clientName": "John Doe", - "clientOfficeId": 1, - "loanProductId": 2, - "loanProductName": "Personal Loan", - "loanProductDescription": "Personal unsecured loan", - "loanPurposeName": "Personal Use", - "status": { - "id": 300, - "code": "loanStatusType.active", - "value": "Active", - "active": true - }, - "loanType": { - "id": 1, - "code": "accountType.individual", - "value": "Individual" - }, - "currency": { - "code": "USD", - "displaySymbol": "$", - "decimalPlaces": 2 - }, - "principal": 10000.00, - "approvedPrincipal": 10000.00, - "termFrequency": 12, - "termPeriodFrequencyType": { - "id": 2, - "code": "termFrequency.periodFrequencyType.months", - "value": "Months" - }, - "numberOfRepayments": 12, - "repaymentEvery": 1, - "repaymentFrequencyType": { - "id": 2, - "value": "Months" - }, - "interestRatePerPeriod": 12.0, - "annualInterestRate": 12.0, - "timeline": { - "submittedOnDate": [2024, 1, 1], - "approvedOnDate": [2024, 1, 5], - "disbursedOnDate": [2024, 1, 10], - "expectedMaturityDate": [2025, 1, 10] - }, - "summary": { - "currency": { - "code": "USD", - "displaySymbol": "$" - }, - "principalDisbursed": 10000.00, - "principalPaid": 3250.00, - "principalOutstanding": 6750.00, - "interestCharged": 600.00, - "interestPaid": 400.00, - "interestOutstanding": 200.00, - "feeChargesCharged": 50.00, - "feeChargesPaid": 50.00, - "feeChargesOutstanding": 0.00, - "totalExpectedRepayment": 10650.00, - "totalRepayment": 3700.00, - "totalOutstanding": 6950.00 - }, - "repaymentSchedule": { - "currency": { - "code": "USD" - }, - "loanTermInDays": 365, - "totalPrincipalDisbursed": 10000.00, - "totalPrincipalExpected": 10000.00, - "totalPrincipalPaid": 3250.00, - "totalInterestCharged": 600.00, - "totalFeeChargesCharged": 50.00, - "totalRepaymentExpected": 10650.00, - "totalRepayment": 3700.00, - "totalOutstanding": 6950.00, - "periods": [] - }, - "transactions": [], - "inArrears": false -} -``` - -**Kotlin DTO**: -```kotlin -@Serializable -data class LoanAccountDetail( - @SerialName("id") val id: Long, - @SerialName("accountNo") val accountNo: String? = null, - @SerialName("clientId") val clientId: Long? = null, - @SerialName("clientName") val clientName: String? = null, - @SerialName("loanProductName") val loanProductName: String? = null, - @SerialName("status") val status: LoanStatus? = null, - @SerialName("currency") val currency: Currency? = null, - @SerialName("principal") val principal: Double? = null, - @SerialName("approvedPrincipal") val approvedPrincipal: Double? = null, - @SerialName("numberOfRepayments") val numberOfRepayments: Int? = null, - @SerialName("annualInterestRate") val annualInterestRate: Double? = null, - @SerialName("timeline") val timeline: LoanTimeline? = null, - @SerialName("summary") val summary: LoanSummary? = null, - @SerialName("repaymentSchedule") val repaymentSchedule: RepaymentSchedule? = null, - @SerialName("inArrears") val inArrears: Boolean = false, -) - -@Serializable -data class LoanSummary( - @SerialName("principalDisbursed") val principalDisbursed: Double? = null, - @SerialName("principalPaid") val principalPaid: Double? = null, - @SerialName("principalOutstanding") val principalOutstanding: Double? = null, - @SerialName("interestCharged") val interestCharged: Double? = null, - @SerialName("interestPaid") val interestPaid: Double? = null, - @SerialName("interestOutstanding") val interestOutstanding: Double? = null, - @SerialName("totalExpectedRepayment") val totalExpectedRepayment: Double? = null, - @SerialName("totalRepayment") val totalRepayment: Double? = null, - @SerialName("totalOutstanding") val totalOutstanding: Double? = null, -) -``` - -**Status**: Implemented in LoanAccountService - ---- - -## 7. Beneficiary List - -### GET /self/beneficiaries/tpt - -**Purpose**: Fetch beneficiaries for third-party transfers - -**Request**: -``` -GET /self/beneficiaries/tpt -``` - -**Response**: -```json -[ - { - "id": 5001, - "name": "Jane Doe", - "officeName": "Head Office", - "clientName": "Jane Doe", - "accountType": { - "id": 2, - "code": "accountType.savings", - "value": "Savings Account" - }, - "accountNumber": "SA-0007654321", - "transferLimit": 10000.00 - } -] -``` - -**Kotlin DTO**: -```kotlin -@Serializable -data class Beneficiary( - @SerialName("id") val id: Long, - @SerialName("name") val name: String? = null, - @SerialName("officeName") val officeName: String? = null, - @SerialName("clientName") val clientName: String? = null, - @SerialName("accountType") val accountType: AccountType? = null, - @SerialName("accountNumber") val accountNumber: String? = null, - @SerialName("transferLimit") val transferLimit: Double? = null, -) -``` - -**Status**: Implemented in BeneficiaryService - ---- - -## 8. Transfer Template - -### GET /self/accounttransfers/template - -**Purpose**: Get transfer options and account templates - -**Request**: -``` -GET /self/accounttransfers/template?type=tpt -``` - -**Query Parameters**: -| Parameter | Type | Description | -|-----------|------|-------------| -| type | String | Transfer type: "tpt" (third-party) | -| fromAccountId | Long | Source account ID | -| fromAccountType | Int | 1=Loan, 2=Savings | - -**Response**: -```json -{ - "fromAccountOptions": [ - { - "accountId": 1001, - "accountNo": "SA-0001234567", - "accountType": { - "id": 2, - "value": "Savings Account" - }, - "clientId": 123, - "clientName": "John Doe", - "officeId": 1, - "officeName": "Head Office" - } - ], - "toAccountOptions": [ - { - "accountId": 1002, - "accountNo": "SA-0009876543", - "accountType": { - "id": 2, - "value": "Savings Account" - }, - "clientId": 456, - "clientName": "Jane Doe" - } - ], - "transferTypes": [ - { - "id": 1, - "code": "accountTransferType.account.transfer", - "value": "Account Transfer" - } - ] -} -``` - -**Kotlin DTO**: -```kotlin -@Serializable -data class AccountTransferTemplate( - @SerialName("fromAccountOptions") val fromAccountOptions: List? = null, - @SerialName("toAccountOptions") val toAccountOptions: List? = null, - @SerialName("transferTypes") val transferTypes: List? = null, -) - -@Serializable -data class AccountOption( - @SerialName("accountId") val accountId: Long, - @SerialName("accountNo") val accountNo: String? = null, - @SerialName("accountType") val accountType: AccountType? = null, - @SerialName("clientId") val clientId: Long? = null, - @SerialName("clientName") val clientName: String? = null, - @SerialName("officeId") val officeId: Long? = null, - @SerialName("officeName") val officeName: String? = null, -) -``` - -**Status**: Implemented in ThirdPartyTransferService - ---- - -## 9. Execute Transfer - -### POST /self/accounttransfers - -**Purpose**: Execute a fund transfer between accounts - -**Request**: -```json -POST /self/accounttransfers - -{ - "fromOfficeId": 1, - "fromClientId": 123, - "fromAccountType": 2, - "fromAccountId": 1001, - "toOfficeId": 1, - "toClientId": 456, - "toAccountType": 2, - "toAccountId": 1002, - "dateFormat": "dd MMMM yyyy", - "locale": "en", - "transferDate": "28 December 2025", - "transferAmount": 500.00, - "transferDescription": "Payment for dinner" -} -``` - -**Response**: -```json -{ - "savingsId": 1001, - "resourceId": 50001, - "changes": { - "transferDate": "28 December 2025", - "transferAmount": 500.00, - "transferDescription": "Payment for dinner" - } -} -``` - -**Kotlin DTO**: -```kotlin -@Serializable -data class TransferPayload( - @SerialName("fromOfficeId") val fromOfficeId: Long, - @SerialName("fromClientId") val fromClientId: Long, - @SerialName("fromAccountType") val fromAccountType: Int, - @SerialName("fromAccountId") val fromAccountId: Long, - @SerialName("toOfficeId") val toOfficeId: Long, - @SerialName("toClientId") val toClientId: Long, - @SerialName("toAccountType") val toAccountType: Int, - @SerialName("toAccountId") val toAccountId: Long, - @SerialName("dateFormat") val dateFormat: String = "dd MMMM yyyy", - @SerialName("locale") val locale: String = "en", - @SerialName("transferDate") val transferDate: String, - @SerialName("transferAmount") val transferAmount: Double, - @SerialName("transferDescription") val transferDescription: String? = null, -) - -@Serializable -data class TransferResponse( - @SerialName("savingsId") val savingsId: Long? = null, - @SerialName("resourceId") val resourceId: Long? = null, - @SerialName("changes") val changes: Map? = null, -) -``` - -**Status**: Implemented in ThirdPartyTransferService - ---- - -## 10. Third-Party Transfer - -### POST /self/accounttransfers?type=tpt - -**Purpose**: Execute transfer to a saved beneficiary - -**Request**: -```json -POST /self/accounttransfers?type=tpt - -{ - "fromAccountId": 1001, - "fromAccountType": 2, - "toAccountId": 5001, - "dateFormat": "dd MMMM yyyy", - "locale": "en", - "transferDate": "28 December 2025", - "transferAmount": 500.00, - "transferDescription": "Monthly support" -} -``` - -**Response**: Same as standard transfer - -**Status**: Implemented in ThirdPartyTransferService - ---- - -## API Summary Table - -| Endpoint | Method | Service | Repository | Priority | -|----------|--------|---------|------------|----------| -| /self/clients/{id} | GET | ClientService | ClientRepository | P0 | -| /self/clients/{id}/accounts | GET | ClientService | ClientRepository | P0 | -| /self/clients/{id}/images | GET | ClientService | ClientRepository | P1 | -| /self/clients/{id}/transactions | GET | RecentTransactionService | RecentTransactionRepository | P0 | -| /self/savingsaccounts/{id} | GET | SavingsAccountService | SavingsAccountRepository | P0 | -| /self/loans/{id} | GET | LoanAccountService | LoanAccountRepository | P0 | -| /self/beneficiaries/tpt | GET | BeneficiaryService | BeneficiaryRepository | P1 | -| /self/accounttransfers/template | GET | ThirdPartyTransferService | TransferRepository | P1 | -| /self/accounttransfers | POST | ThirdPartyTransferService | TransferRepository | P0 | - ---- - -## Error Responses - -| Status Code | Error | Description | User Message | -|-------------|-------|-------------|--------------| -| 400 | Bad Request | Invalid request payload | "Please check your input" | -| 401 | Unauthorized | Invalid/expired token | "Please login again" | -| 403 | Forbidden | Insufficient permissions | "Access denied" | -| 404 | Not Found | Resource doesn't exist | "Account not found" | -| 409 | Conflict | Business rule violation | "Insufficient balance" | -| 500 | Server Error | Internal server error | "Service unavailable" | - -**Error Response Format**: -```json -{ - "developerMessage": "Detailed error for debugging", - "httpStatusCode": "400", - "defaultUserMessage": "User-friendly error message", - "userMessageGlobalisationCode": "error.msg.code", - "errors": [ - { - "developerMessage": "Field-specific error", - "defaultUserMessage": "Amount must be greater than 0", - "userMessageGlobalisationCode": "validation.msg.amount.invalid", - "parameterName": "transferAmount" - } - ] -} -``` - ---- - -## Rate Limiting - -| Operation | Limit | Window | -|-----------|-------|--------| -| Read operations | 100 | Per minute | -| Write operations | 20 | Per minute | -| Transfers | 10 | Per hour | - ---- - -## Changelog - -| Date | Change | -|------|--------| -| 2025-12-28 | Initial production-level API documentation | diff --git a/claude-product-cycle/design-spec-layer/features/dashboard/MOCKUP.md b/claude-product-cycle/design-spec-layer/features/dashboard/MOCKUP.md deleted file mode 100644 index 6c667c057..000000000 --- a/claude-product-cycle/design-spec-layer/features/dashboard/MOCKUP.md +++ /dev/null @@ -1,1738 +0,0 @@ -# Dashboard - Professional Fintech UI Mockups - -> **Design Style**: Premium Fintech Portfolio Hub (Robinhood + Personal Capital + Wealthfront inspired) -> **Design References**: [Banking UI Best Practices](https://procreator.design/blog/banking-app-ui-top-best-practices/), [Purrweb Guide](https://www.purrweb.com/blog/banking-app-design/) -> **Primary Gradient**: #667EEA → #764BA2 (Purple-Blue) -> **Last Updated**: 2025-12-30 | Version 2.0 - ---- - -## Design Principles Applied - -| Principle | Implementation | -|-----------|----------------| -| Wealth Intelligence Hub | Unified portfolio view with AI insights | -| Visual Hierarchy | Net worth prominence with drill-down | -| Data Visualization | Charts, gauges, allocation rings | -| Progressive Disclosure | Summary → Detail → Action flow | -| Gamification | Financial health score, achievements | -| Micro-interactions | Haptic feedback, smooth animations | - ---- - -## Navigation Context - -``` -┌─────────────────────────────────────────────────────────────────────────┐ -│ NAVIGATION FLOW │ -├─────────────────────────────────────────────────────────────────────────┤ -│ │ -│ [Home] ─────► [Accounts Tab] ─────► [DASHBOARD SCREEN] │ -│ │ │ -│ ▼ │ -│ ┌──────────────────────────────────┐ │ -│ │ DASHBOARD (Portfolio) │◄── Here │ -│ │ Unified Account Management │ │ -│ └──────────────────────────────────┘ │ -│ │ │ -│ ┌───────────────────┬───────────┴───────────┐ │ -│ ▼ ▼ ▼ │ -│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ -│ │ Savings │ │ Loans │ │ Shares │ │ -│ │ Accounts │ │ Accounts │ │ Accounts │ │ -│ └──────────────┘ └──────────────┘ └──────────────┘ │ -│ │ -└─────────────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Screen Structure Overview - -``` -┌─────────────────────────────────────────────────────────────────────────┐ -│ 2025 DASHBOARD SECTIONS │ -├─────────────────────────────────────────────────────────────────────────┤ -│ │ -│ 1. TOP APP BAR │ -│ └── Greeting + Profile + Notifications + Settings │ -│ │ -│ 2. NET WORTH HERO CARD [2025] │ -│ └── Total value + Monthly change + Eye toggle + Animation │ -│ │ -│ 3. PORTFOLIO ALLOCATION RING [NEW 2025] │ -│ └── Donut chart with savings/loans/shares breakdown │ -│ │ -│ 4. FINANCIAL HEALTH SCORE [NEW 2025] │ -│ └── AI-powered score with insights │ -│ │ -│ 5. ACCOUNT TYPE TABS │ -│ └── All | Savings | Loans | Shares - Animated underline │ -│ │ -│ 6. ACCOUNT CARDS │ -│ └── Expandable cards with progress and actions │ -│ │ -│ 7. AI INSIGHTS SECTION [NEW 2025] │ -│ └── Smart recommendations with actions │ -│ │ -│ 8. QUICK ACTIONS FLOATING SHEET [NEW 2025] │ -│ └── Contextual actions based on selection │ -│ │ -│ 9. RECENT ACTIVITY PREVIEW │ -│ └── Cross-account transactions │ -│ │ -│ 10. ACHIEVEMENTS SECTION [NEW 2025] │ -│ └── Financial milestones with badges │ -│ │ -│ FLOATING ACTION BUTTON │ -│ └── Add Account / New Transfer │ -│ │ -└─────────────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Screen 1: Main Dashboard (Wealth Hub) - -``` -┌────────────────────────────────────────────────────────────────┐ -│ 9:41 100% ▐▐▐▌ │ -├────────────────────────────────────────────────────────────────┤ -│ │ -│ ┌──────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌──────┐ Your Portfolio ┌────┐ ┌────┐ │ │ -│ │ │ 👤 │ Good morning, John │ 🔔 │ │ ⚙️ │ │ │ -│ │ │ Img │ December 30, 2025 │ (3)│ │ │ │ │ -│ │ └──────┘ └────┘ └────┘ │ │ -│ │ 48dp avatar Badges │ │ -│ └──────────────────────────────────────────────────────────┘ │ -│ │ -│ ═══════════════════════════════════════════════════════════ │ -│ SCROLLABLE CONTENT │ -│ ═══════════════════════════════════════════════════════════ │ -│ │ -│ ┌─ NET WORTH HERO ─────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ░░│ │ -│ │░░ Net Worth 👁 ░░│ │ -│ │░░ 12sp, White 60% Eye ░░│ │ -│ │░░ ░░│ │ -│ │░░ $ 45,750.00 ░░│ │ -│ │░░ 40sp, White, ExtraBold ░░│ │ -│ │░░ ↑ Number animates on load ░░│ │ -│ │░░ ░░│ │ -│ │░░ ┌──────────────────────────────────────────────┐ ░░│ │ -│ │░░ │ ↑ +$1,250.00 │ ░░│ │ -│ │░░ │ (+2.8%) this month │ ░░│ │ -│ │░░ │ #00D09C (positive) │ ░░│ │ -│ │░░ └──────────────────────────────────────────────┘ ░░│ │ -│ │░░ ░░│ │ -│ │░░ ┌────────────────────────────────────────────────┐░░│ │ -│ │░░ │ Sparkline Chart (6 months) │░░│ │ -│ │░░ │ ╭──╮ ╭──╮ │░░│ │ -│ │░░ │ ╭╯ ╰╮ ╭───╯ ╰╮ ╭───────────╮ │░░│ │ -│ │░░ │ ────╯ ╰───╯ ╰──╯ ╰── │░░│ │ -│ │░░ │ J F M A M J │░░│ │ -│ │░░ │ Height: 48dp | Line: 2dp, White 60% │░░│ │ -│ │░░ └────────────────────────────────────────────────┘░░│ │ -│ │░░ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └──────────────────────────────────────────────────────────┘ │ -│ Gradient: #667EEA → #764BA2 | Height: 280dp | Radius: 28dp │ -│ │ -│ 16dp │ -│ │ -│ ┌─ PORTFOLIO ALLOCATION ───────────────────────────────────┐ │ -│ │ │ │ -│ │ Asset Allocation │ │ -│ │ 16sp, SemiBold │ │ -│ │ │ │ -│ │ ┌──────────────────────────────────────────────────┐ │ │ -│ │ │ │ │ │ -│ │ │ ┌──────────────────┐ │ │ │ -│ │ │ │ ╭───╮ │ │ │ │ -│ │ │ │ ╭──╯ ╰──╮ │ ● Savings 65% │ │ │ -│ │ │ │ ╭╯ $52.5K ╰╮ │ #11998E │ │ │ -│ │ │ │ │ ASSETS │ │ │ │ │ -│ │ │ │ │ -$6.7K │ │ ● Loans 15% │ │ │ -│ │ │ │ ╰╮ DEBT ╭╯ │ #FF4757 │ │ │ -│ │ │ │ ╰──╮ ╭──╯ │ │ │ │ -│ │ │ │ ╰───╯ │ ● Shares 20% │ │ │ -│ │ │ │ │ #667EEA │ │ │ -│ │ │ └──────────────────┘ │ │ │ -│ │ │ Donut: 120dp, 3 segments │ │ │ -│ │ │ │ │ │ -│ │ │ Touch segment to see breakdown │ │ │ -│ │ │ │ │ │ -│ │ └──────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ ┌────────────┐ ┌────────────┐ ┌────────────┐ │ │ -│ │ │ 💰 │ │ 🏦 │ │ 📊 │ │ │ -│ │ │ $52,500 │ │ -$6,750 │ │ $0 │ │ │ -│ │ │ Savings │ │ Loans │ │ Shares │ │ │ -│ │ │ 3 accounts│ │ 1 account │ │ 0 accounts│ │ │ -│ │ │ ↗ +4.2% │ │ ↘ -12% │ │ │ │ │ -│ │ └────────────┘ └────────────┘ └────────────┘ │ │ -│ │ ↑ Tappable chips, 100dp x 90dp │ │ -│ │ │ │ -│ └──────────────────────────────────────────────────────────┘ │ -│ Background: Surface | Radius: 20dp | Elevation: 2dp │ -│ │ -│ 16dp │ -│ │ -│ ┌─ FINANCIAL HEALTH SCORE ─────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ░░│ │ -│ │░░ ┌─────────────────┐ ░░│ │ -│ │░░ │ ╭───╮ │ Financial Health ░░│ │ -│ │░░ │ ╭─╯ ╰─╮ │ Powered by AI ░░│ │ -│ │░░ │ ╭╯ 78 ╰╮ │ ░░│ │ -│ │░░ │ │ Good │ │ "You're doing great! Your ░░│ │ -│ │░░ │ ╰────▲────╯ │ debt-to-income ratio is ░░│ │ -│ │░░ │ │ │ healthy at 12%" ░░│ │ -│ │░░ └────────│────────┘ ░░│ │ -│ │░░ Gauge: 100dp, #00D09C fill ░░│ │ -│ │░░ ░░│ │ -│ │░░ ┌────────────────────┐ ┌────────────────────┐ ░░│ │ -│ │░░ │ 📈 Improve Score │ │ 📊 Full Report │ ░░│ │ -│ │░░ │ Outlined │ │ Gradient fill │ ░░│ │ -│ │░░ └────────────────────┘ └────────────────────┘ ░░│ │ -│ │░░ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └──────────────────────────────────────────────────────────┘ │ -│ Background: Secondary gradient 15% | Radius: 20dp │ -│ │ -│ 20dp │ -│ │ -│ ┌─ ACCOUNT TYPE TABS ──────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │ │ -│ │ │ All │ │ 💰 3 │ │ 🏦 1 │ │ 📊 0 │ │ │ -│ │ │████████│ │Savings │ │ Loans │ │ Shares │ │ │ -│ │ └────────┘ └────────┘ └────────┘ └────────┘ │ │ -│ │ ↑ Active ↑ Badge count on each │ │ -│ │ ══════════ │ │ -│ │ Animated underline (300ms spring) │ │ -│ │ │ │ -│ └──────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─ ACCOUNT CARDS (LazyColumn) ─────────────────────────────┐ │ -│ │ │ │ -│ │ ┌─ Savings Card (Expanded) ─────────────────────────┐ │ │ -│ │ │▌ │ │ │ -│ │ │▌ ┌────┐ ● Active │ │ │ -│ │ │▌ │ 💰 │ Primary Savings #00D09C │ │ │ -│ │ │▌ │ │ ****4567 │ │ │ -│ │ │▌ │#11 │ │ │ │ -│ │ │▌ │998E│ $ 35,000.00 ⭐ Main │ │ │ -│ │ │▌ └────┘ 28sp, Bold │ │ │ -│ │ │▌ │ │ │ -│ │ │▌ Interest Rate: 4.5% p.a. │ │ │ -│ │ │▌ Last Activity: Dec 28 - Salary Credit +$4,500 │ │ │ -│ │ │▌ │ │ │ -│ │ │▌ ┌──────────────────────────────────────────┐ │ │ │ -│ │ │▌ │ Goal: $50,000 70% │ │ │ │ -│ │ │▌ │ ████████████████████████████░░░░░░░░░░░░ │ │ │ │ -│ │ │▌ │ $15,000 to go │ │ │ │ -│ │ │▌ └──────────────────────────────────────────┘ │ │ │ -│ │ │▌ │ │ │ -│ │ │▌ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌─────┐ │ │ │ -│ │ │▌ │ Transfer │ │ Withdraw │ │Statement │ │ ··· │ │ │ │ -│ │ │▌ │ 💸 │ │ 📤 │ │ 📄 │ │ │ │ │ │ -│ │ │▌ └──────────┘ └──────────┘ └──────────┘ └─────┘ │ │ │ -│ │ │▌ │ │ │ -│ │ └▌──────────────────────────────────────────────────┘ │ │ -│ │ Left accent: 4dp, #11998E (savings color) │ │ -│ │ │ │ -│ │ 12dp │ │ -│ │ │ │ -│ │ ┌─ Savings Card (Collapsed) ────────────────────────┐ │ │ -│ │ │▌ │ │ │ -│ │ │▌ ┌────┐ │ │ │ -│ │ │▌ │ 💰 │ Emergency Fund $ 17,500.00 ▸│ │ │ -│ │ │▌ │#11 │ ****4568 ● Active │ │ │ -│ │ │▌ │998E│ │ │ │ -│ │ │▌ └────┘ │ │ │ -│ │ │▌ │ │ │ -│ │ └▌──────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ 12dp │ │ -│ │ │ │ -│ │ ┌─ Loan Card ───────────────────────────────────────┐ │ │ -│ │ │▌ │ │ │ -│ │ │▌ ┌────┐ │ │ │ -│ │ │▌ │ 🏦 │ Personal Loan -$ 6,750.00 ▸│ │ │ -│ │ │▌ │#667│ ****9876 ● Active │ │ │ -│ │ │▌ │EEA │ │ │ │ -│ │ │▌ └────┘ │ │ │ -│ │ │▌ │ │ │ -│ │ │▌ ████████████████████████████░░░░░░░ 80% paid │ │ │ -│ │ │▌ Original: $33,750 | Paid: $27,000 │ │ │ -│ │ │▌ │ │ │ -│ │ │▌ ⚠️ Next Payment: Jan 15 $750.00 │ │ │ -│ │ │▌ 14 days away Pay Early → │ │ │ -│ │ │▌ │ │ │ -│ │ └▌──────────────────────────────────────────────────┘ │ │ -│ │ Left accent: 4dp, #667EEA (loan color) │ │ -│ │ │ │ -│ └──────────────────────────────────────────────────────────┘ │ -│ │ -│ 20dp │ -│ │ -│ ┌─ AI INSIGHTS ────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ Smart Insights View All → │ │ -│ │ 16sp, SemiBold │ │ -│ │ │ │ -│ │ ← Horizontally scrollable → │ │ -│ │ │ │ -│ │ ┌─ Insight Card 1 ─────────┐ ┌─ Insight Card 2 ─────┐ │ │ -│ │ │░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ │ │ │ -│ │ │░░ 🤖 ░░│ │ 💡 │ │ │ -│ │ │░░ ░░│ │ │ │ │ -│ │ │░░ "Pay $200 extra on ░░│ │ "Your savings rate │ │ │ -│ │ │░░ your loan to save ░░│ │ increased by 15% │ │ │ -│ │ │░░ $340 in interest" ░░│ │ this quarter!" │ │ │ -│ │ │░░ ░░│ │ │ │ │ -│ │ │░░ ┌──────────────────┐ ░░│ │ ┌────────────────┐ │ │ │ -│ │ │░░ │ Do It Now → │ ░░│ │ │ See Details │ │ │ │ -│ │ │░░ └──────────────────┘ ░░│ │ └────────────────┘ │ │ │ -│ │ │░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ │ │ │ -│ │ └──────────────────────────┘ └──────────────────────┘ │ │ -│ │ Width: 240dp | Gap: 12dp │ │ -│ │ Gradient bg on first (AI), Surface on others │ │ -│ │ │ │ -│ └──────────────────────────────────────────────────────────┘ │ -│ │ -│ 20dp │ -│ │ -│ ┌─ RECENT ACTIVITY ────────────────────────────────────────┐ │ -│ │ │ │ -│ │ Recent Activity View All → │ │ -│ │ │ │ -│ │ ┌─ Transaction ─────────────────────────────────────┐ │ │ -│ │ │ │ │ │ -│ │ │ ┌────┐ │ │ │ -│ │ │ │ 💼 │ Salary Credit + $4,500.00 │ │ │ -│ │ │ │ │ Primary Savings • Today #00D09C │ │ │ -│ │ │ │Teal│ │ │ │ -│ │ │ └────┘ │ │ │ -│ │ │ │ │ │ -│ │ └────────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ ┌─ Transaction ─────────────────────────────────────┐ │ │ -│ │ │ │ │ │ -│ │ │ ┌────┐ │ │ │ -│ │ │ │ 🏦 │ Loan Payment - $750.00 │ │ │ -│ │ │ │ │ Personal Loan • Dec 28 #FF4757 │ │ │ -│ │ │ │Purp│ │ │ │ -│ │ │ └────┘ │ │ │ -│ │ │ │ │ │ -│ │ └────────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ ┌─ Transaction ─────────────────────────────────────┐ │ │ -│ │ │ │ │ │ -│ │ │ ┌────┐ │ │ │ -│ │ │ │ ↓ │ Interest Credit + $125.50 │ │ │ -│ │ │ │ │ Emergency Fund • Dec 27 #00D09C │ │ │ -│ │ │ │Grn │ │ │ │ -│ │ │ └────┘ │ │ │ -│ │ │ │ │ │ -│ │ └────────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ └──────────────────────────────────────────────────────────┘ │ -│ │ -│ 20dp │ -│ │ -│ ┌─ ACHIEVEMENTS ───────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ░░│ │ -│ │░░ Milestones & Badges See All → ░░│ │ -│ │░░ ░░│ │ -│ │░░ ← Horizontally scrollable → ░░│ │ -│ │░░ ░░│ │ -│ │░░ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ ░░│ │ -│ │░░ │ │ │ │ │ │ │ │ ░░│ │ -│ │░░ │ 🏆 │ │ 🔥 │ │ 💎 │ │ 🔒 │ ░░│ │ -│ │░░ │ │ │ │ │ │ │ │ ░░│ │ -│ │░░ │ First │ │ 30-Day │ │ $10K │ │ Debt │ ░░│ │ -│ │░░ │ $1K │ │ Streak │ │ Saver │ │ Free │ ░░│ │ -│ │░░ │ Earned! │ │ Current │ │ 62% │ │ Locked │ ░░│ │ -│ │░░ └─────────┘ └─────────┘ └─────────┘ └─────────┘ ░░│ │ -│ │░░ ↑ Unlocked ↑ Active ↑ Progress ↑ Locked ░░│ │ -│ │░░ Golden glow Fire anim Ring fill Grayscale ░░│ │ -│ │░░ ░░│ │ -│ │░░ 🎉 Congrats! You earned "First $1K Saved" badge! ░░│ │ -│ │░░ ↑ Achievement toast (auto-dismiss 3s) ░░│ │ -│ │░░ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └──────────────────────────────────────────────────────────┘ │ -│ Background: Accent gradient 10% | Radius: 20dp │ -│ │ -│ 100dp (FAB + safe area) │ -│ │ -│ ═══════════════════════════════════════════════════════════ │ -│ END SCROLLABLE │ -│ ═══════════════════════════════════════════════════════════ │ -│ │ -│ ┌───────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░│ │ -│ │░░░░ + Add ░░░░░░│ │ -│ │░░░░░░░░░░░░░░░░░░░│ │ -│ └───────────────────┘ │ -│ FAB: 72dp, Gradient bg │ -│ Extended FAB with icon │ -│ Y-offset: -16dp from bottom │ -│ │ -└────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Screen 2: Account Detail View - -``` -┌────────────────────────────────────────────────────────────────┐ -│ 9:41 100% ▐▐▐▌ │ -├────────────────────────────────────────────────────────────────┤ -│ │ -│ ← Primary Savings ⋮ Share │ -│ │ -│ ┌─ ACCOUNT HERO ───────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ░░│ │ -│ │░░ ┌────────────────────────────────────────────────┐░░│ │ -│ │░░ │ │░░│ │ -│ │░░ │ $ 35,000.00 │░░│ │ -│ │░░ │ Available Balance │░░│ │ -│ │░░ │ │░░│ │ -│ │░░ │ Account: SA-0001234567 ⭐ Primary │░░│ │ -│ │░░ │ Status: Active • Since: Jan 2023 │░░│ │ -│ │░░ │ │░░│ │ -│ │░░ └────────────────────────────────────────────────┘░░│ │ -│ │░░ ░░│ │ -│ │░░ ┌──────────────────────────────────────────────┐ ░░│ │ -│ │░░ │ 6-Month Performance │ ░░│ │ -│ │░░ │ ╭──────╮ │ ░░│ │ -│ │░░ │ ╭───────────╮ ╭╯ ╰╮ │ ░░│ │ -│ │░░ │ ╭───────╯ ╰───╯ ╰─── │ ░░│ │ -│ │░░ │ J A S O N D │ ░░│ │ -│ │░░ │ Touch to see balance at any point │ ░░│ │ -│ │░░ └──────────────────────────────────────────────┘ ░░│ │ -│ │░░ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └──────────────────────────────────────────────────────────┘ │ -│ Gradient: #11998E → #38EF7D (Savings) | Height: 300dp │ -│ │ -│ ┌─ QUICK ACTIONS ──────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ -│ │ │ 💸 │ │ 📤 │ │ 📄 │ │ 📱 │ │ │ -│ │ │ Transfer │ │ Withdraw │ │Statement │ │ QR Pay │ │ │ -│ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ -│ │ │ │ -│ └──────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─ ACCOUNT DETAILS ────────────────────────────────────────┐ │ -│ │ │ │ -│ │ Account Details Expand ▼ │ │ -│ │ │ │ -│ │ ┌──────────────────────────────────────────────────┐ │ │ -│ │ │ Product Name │ Savings Plus │ │ │ -│ │ ├──────────────────────┼───────────────────────────┤ │ │ -│ │ │ Interest Rate │ 4.5% per annum │ │ │ -│ │ ├──────────────────────┼───────────────────────────┤ │ │ -│ │ │ Total Deposits │ $ 42,500.00 │ │ │ -│ │ ├──────────────────────┼───────────────────────────┤ │ │ -│ │ │ Total Withdrawals │ $ 7,500.00 │ │ │ -│ │ ├──────────────────────┼───────────────────────────┤ │ │ -│ │ │ Total Interest │ $ 1,250.00 │ │ │ -│ │ ├──────────────────────┼───────────────────────────┤ │ │ -│ │ │ Minimum Balance │ $ 500.00 │ │ │ -│ │ └──────────────────────┴───────────────────────────┘ │ │ -│ │ │ │ -│ └──────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─ SAVINGS GOAL TRACKER ───────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ░░│ │ -│ │░░ 🎯 Goal: Emergency Fund ░░│ │ -│ │░░ ░░│ │ -│ │░░ $35,000 / $50,000 70% ░░│ │ -│ │░░ ████████████████████████████████████░░░░░░░░░░░░░ ░░│ │ -│ │░░ ░░│ │ -│ │░░ 🔥 45-day saving streak! ░░│ │ -│ │░░ ░░│ │ -│ │░░ Est. completion: March 2026 ░░│ │ -│ │░░ At current rate of $500/month ░░│ │ -│ │░░ ░░│ │ -│ │░░ ┌──────────────────────┐ ┌──────────────────┐ ░░│ │ -│ │░░ │ Boost Goal +$100 │ │ Adjust Goal │ ░░│ │ -│ │░░ └──────────────────────┘ └──────────────────┘ ░░│ │ -│ │░░ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └──────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─ TRANSACTIONS ───────────────────────────────────────────┐ │ -│ │ │ │ -│ │ Transactions Filter ▼ Search │ │ -│ │ │ │ -│ │ TODAY │ │ -│ │ ───── │ │ -│ │ │ │ -│ │ ┌─ Transaction ─────────────────────────────────────┐ │ │ -│ │ │ 💼 Salary Credit + $4,500.00 🏷️ │ │ │ -│ │ │ 09:30 AM Balance: $35,000 │ │ │ -│ │ └────────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ YESTERDAY │ │ -│ │ ───────── │ │ -│ │ │ │ -│ │ ┌─ Transaction ─────────────────────────────────────┐ │ │ -│ │ │ ↗️ Transfer to John - $500.00 │ │ │ -│ │ │ 03:45 PM Balance: $30,500 │ │ │ -│ │ └────────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ ┌─ Transaction ─────────────────────────────────────┐ │ │ -│ │ │ ↓ Interest Posting + $45.50 │ │ │ -│ │ │ 11:59 PM Balance: $31,000 │ │ │ -│ │ └────────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ Load More... │ │ -│ │ │ │ -│ └──────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─ CHARGES ────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ Charges │ │ -│ │ │ │ -│ │ ┌────────────────────────────────────────────────────┐ │ │ -│ │ │ Monthly Maintenance Due: Jan 1 $ 5.00 │ │ │ -│ │ │ ● Pending Autopay enabled │ │ │ -│ │ └────────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ ┌────────────────────────────────────────────────────┐ │ │ -│ │ │ Annual Fee Paid: Dec 1 $ 25.00 ✓│ │ │ -│ │ │ ● Completed │ │ │ -│ │ └────────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ └──────────────────────────────────────────────────────────┘ │ -│ │ -└────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Screen 3: Loan Account Detail View - -``` -┌────────────────────────────────────────────────────────────────┐ -│ 9:41 100% ▐▐▐▌ │ -├────────────────────────────────────────────────────────────────┤ -│ │ -│ ← Personal Loan ⋮ Schedule │ -│ │ -│ ┌─ LOAN HERO ──────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ░░│ │ -│ │░░ Outstanding Balance ░░│ │ -│ │░░ ░░│ │ -│ │░░ $ 6,750.00 ░░│ │ -│ │░░ of $33,750 original ░░│ │ -│ │░░ ░░│ │ -│ │░░ ┌────────────────────────────────────────────────┐░░│ │ -│ │░░ │ │░░│ │ -│ │░░ │ ████████████████████████████████░░░░░░░░░░░░ │░░│ │ -│ │░░ │ │░░│ │ -│ │░░ │ 80% paid 20% to go │░░│ │ -│ │░░ │ $27,000 $6,750 │░░│ │ -│ │░░ │ │░░│ │ -│ │░░ └────────────────────────────────────────────────┘░░│ │ -│ │░░ ░░│ │ -│ │░░ Account: LA-0009876543 Status: Active ░░│ │ -│ │░░ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └──────────────────────────────────────────────────────────┘ │ -│ Gradient: #667EEA → #764BA2 | Height: 260dp │ -│ │ -│ ┌─ PAYMENT STATUS ─────────────────────────────────────────┐ │ -│ │▌ │ │ -│ │▌ ⚠️ NEXT PAYMENT DUE │ │ -│ │▌ │ │ -│ │▌ January 15, 2026 $ 750.00 │ │ -│ │▌ 14 days away │ │ -│ │▌ │ │ -│ │▌ ┌─────────────────────────────────────────────────┐│ │ -│ │▌ │ ░░░░░░░░░░ PAY NOW ░░░░░░░░░░░░░░░░░░░░░░░░░ ││ │ -│ │▌ │ Gradient button ││ │ -│ │▌ └─────────────────────────────────────────────────┘│ │ -│ │▌ │ │ -│ │▌ ┌────────────────────┐ ┌────────────────────┐ │ │ -│ │▌ │ Schedule Payment │ │ Pay Extra Amount │ │ │ -│ │▌ └────────────────────┘ └────────────────────┘ │ │ -│ │▌ │ │ -│ └▌────────────────────────────────────────────────────────┘ │ -│ Left accent: 4dp, #FFB800 (warning - upcoming payment) │ -│ │ -│ ┌─ PAYOFF CALCULATOR ──────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ░░│ │ -│ │░░ 💡 Pay Off Faster ░░│ │ -│ │░░ ░░│ │ -│ │░░ Current payoff: August 2026 (8 months) ░░│ │ -│ │░░ ░░│ │ -│ │░░ ┌────────────────────────────────────────────────┐░░│ │ -│ │░░ │ Pay $200 extra/month │░░│ │ -│ │░░ │ ────────────────────────────●─────────────────│░░│ │ -│ │░░ │ $0 $200 $500 │░░│ │ -│ │░░ └────────────────────────────────────────────────┘░░│ │ -│ │░░ ░░│ │ -│ │░░ New payoff: May 2026 (5 months) ░░│ │ -│ │░░ Save $340 in interest! 🎉 ░░│ │ -│ │░░ ░░│ │ -│ │░░ ┌─────────────────────────────────────────────────┐░░│ │ -│ │░░ │ Apply Extra Payment │░░│ │ -│ │░░ └─────────────────────────────────────────────────┘░░│ │ -│ │░░ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └──────────────────────────────────────────────────────────┘ │ -│ Background: Secondary gradient 15% │ -│ │ -│ ┌─ LOAN DETAILS ───────────────────────────────────────────┐ │ -│ │ │ │ -│ │ Loan Details │ │ -│ │ │ │ -│ │ ┌──────────────────────────────────────────────────┐ │ │ -│ │ │ Principal Amount │ $ 33,750.00 │ │ │ -│ │ ├───────────────────────┼──────────────────────────┤ │ │ -│ │ │ Interest Rate │ 8.5% per annum │ │ │ -│ │ ├───────────────────────┼──────────────────────────┤ │ │ -│ │ │ Loan Term │ 36 months │ │ │ -│ │ ├───────────────────────┼──────────────────────────┤ │ │ -│ │ │ EMI Amount │ $ 750.00 │ │ │ -│ │ ├───────────────────────┼──────────────────────────┤ │ │ -│ │ │ Total Interest │ $ 3,250.00 │ │ │ -│ │ ├───────────────────────┼──────────────────────────┤ │ │ -│ │ │ Disbursement Date │ January 15, 2024 │ │ │ -│ │ └───────────────────────┴──────────────────────────┘ │ │ -│ │ │ │ -│ └──────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─ REPAYMENT SCHEDULE ─────────────────────────────────────┐ │ -│ │ │ │ -│ │ Repayment Schedule Download ↓ │ │ -│ │ │ │ -│ │ ┌────────────────────────────────────────────────────┐ │ │ -│ │ │ Jan 15 │ $750 │ P:$680 + I:$70 │ ● Due │ │ │ -│ │ ├────────────┼─────────┼───────────────────┼─────────┤ │ │ -│ │ │ Feb 15 │ $750 │ P:$685 + I:$65 │ ○ Future│ │ │ -│ │ ├────────────┼─────────┼───────────────────┼─────────┤ │ │ -│ │ │ Mar 15 │ $750 │ P:$690 + I:$60 │ ○ Future│ │ │ -│ │ └────────────┴─────────┴───────────────────┴─────────┘ │ │ -│ │ │ │ -│ │ View Full Schedule → │ │ -│ │ │ │ -│ └──────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─ GUARANTORS ─────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ Guarantors Manage → │ │ -│ │ │ │ -│ │ ┌────────────────────────────────────────────────────┐ │ │ -│ │ │ 👤 John Smith │ │ │ -│ │ │ Relationship: Brother │ │ │ -│ │ │ Status: Active ● Verified │ │ │ -│ │ └────────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ └──────────────────────────────────────────────────────────┘ │ -│ │ -└────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Screen 4: Add Account Flow (Step 1 - Select Type) - -``` -┌────────────────────────────────────────────────────────────────┐ -│ 9:41 100% ▐▐▐▌ │ -├────────────────────────────────────────────────────────────────┤ -│ │ -│ ← Add Account Step 1 of 3 │ -│ │ -│ ┌──────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ Choose Account Type │ │ -│ │ │ │ -│ │ Select the type of account you want to open. │ │ -│ │ │ │ -│ └──────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─ ACCOUNT TYPE CARD (Selected) ───────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ░░│ │ -│ │░░ ┌────┐ ░░│ │ -│ │░░ │ 💰 │ Savings Account ✓ ░░│ │ -│ │░░ │ │ ░░│ │ -│ │░░ │#11 │ Earn interest on your deposits. ░░│ │ -│ │░░ │998E│ Features: Auto-save, Goals, No lock-in ░░│ │ -│ │░░ └────┘ ░░│ │ -│ │░░ ░░│ │ -│ │░░ Up to 4.5% interest • $0 minimum ░░│ │ -│ │░░ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └──────────────────────────────────────────────────────────┘ │ -│ Border: 2dp, Primary gradient (selected) │ -│ │ -│ 12dp │ -│ │ -│ ┌─ ACCOUNT TYPE CARD ──────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌────┐ │ │ -│ │ │ 🏦 │ Apply for Loan │ │ -│ │ │ │ │ │ -│ │ │#667│ Get funds for your personal needs. │ │ -│ │ │EEA │ Features: Flexible terms, Quick approval │ │ -│ │ └────┘ │ │ -│ │ │ │ -│ │ From 8.5% interest • Up to $100,000 │ │ -│ │ │ │ -│ └──────────────────────────────────────────────────────────┘ │ -│ Border: 1dp, #E1E4E8 (unselected) │ -│ │ -│ 12dp │ -│ │ -│ ┌─ ACCOUNT TYPE CARD ──────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌────┐ │ │ -│ │ │ 📊 │ Share Account │ │ -│ │ │ │ │ │ -│ │ │#FC4│ Invest in organization shares. │ │ -│ │ │66B │ Features: Dividends, Voting rights │ │ -│ │ └────┘ │ │ -│ │ │ │ -│ │ Own a piece • Earn dividends │ │ -│ │ │ │ -│ └──────────────────────────────────────────────────────────┘ │ -│ │ -│ │ -│ │ -│ ┌──────────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░░░░░░░░░░░░░ CONTINUE ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └──────────────────────────────────────────────────────────┘ │ -│ Enabled when type selected │ -│ │ -└────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Screen 5: Financial Health Report (Expanded) - -``` -┌────────────────────────────────────────────────────────────────┐ -│ 9:41 100% ▐▐▐▌ │ -├────────────────────────────────────────────────────────────────┤ -│ │ -│ ← Financial Health Report Share 📤 │ -│ │ -│ ┌─ HEALTH SCORE HERO ──────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ░░│ │ -│ │░░ ┌────────────────────────────────┐ ░░│ │ -│ │░░ │ ╭────────╮ │ ░░│ │ -│ │░░ │ ╭──╯ ╰──╮ │ ░░│ │ -│ │░░ │ ╭─╯ ╰─╮ │ ░░│ │ -│ │░░ │ ╭╯ 78 ╰╮ │ ░░│ │ -│ │░░ │ ╭╯ GOOD ╰╮ │ ░░│ │ -│ │░░ │ │ │ │ ░░│ │ -│ │░░ │ ╰─────────▲───────────╯ │ ░░│ │ -│ │░░ │ │ │ ░░│ │ -│ │░░ └──────────────│─────────────────┘ ░░│ │ -│ │░░ │ ░░│ │ -│ │░░ Gauge: 180dp, animated on load ░░│ │ -│ │░░ ░░│ │ -│ │░░ ┌─────────────────────────────────────────────────┐░░│ │ -│ │░░ │ Poor Fair Good Great Excellent │░░│ │ -│ │░░ │ 0-40 40-55 55-70 70-85 85-100 │░░│ │ -│ │░░ │ ░░░░░ ░░░░░ ████░ ░░░░░ ░░░░░░ │░░│ │ -│ │░░ └─────────────────────────────────────────────────┘░░│ │ -│ │░░ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └──────────────────────────────────────────────────────────┘ │ -│ Gradient: #11998E → #38EF7D (Good range) │ -│ │ -│ ┌─ SCORE BREAKDOWN ────────────────────────────────────────┐ │ -│ │ │ │ -│ │ Score Breakdown │ │ -│ │ │ │ -│ │ ┌────────────────────────────────────────────────────┐ │ │ -│ │ │ Savings Rate 85/100 │ │ │ -│ │ │ ████████████████████████████████████░░░░░░░░░░░░░ │ │ │ -│ │ │ "Excellent! You save 18% of income" │ │ │ -│ │ └────────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ ┌────────────────────────────────────────────────────┐ │ │ -│ │ │ Debt-to-Income 90/100 │ │ │ -│ │ │ █████████████████████████████████████████░░░░░░░░ │ │ │ -│ │ │ "Great! Your DTI is only 12%" │ │ │ -│ │ └────────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ ┌────────────────────────────────────────────────────┐ │ │ -│ │ │ Emergency Fund 60/100 │ │ │ -│ │ │ ████████████████████████░░░░░░░░░░░░░░░░░░░░░░░░░ │ │ │ -│ │ │ "Good, but aim for 6 months of expenses" │ │ │ -│ │ └────────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ ┌────────────────────────────────────────────────────┐ │ │ -│ │ │ Payment History 95/100 │ │ │ -│ │ │ ██████████████████████████████████████████████░░░ │ │ │ -│ │ │ "Excellent! No late payments this year" │ │ │ -│ │ └────────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ └──────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─ AI RECOMMENDATIONS ─────────────────────────────────────┐ │ -│ │ │ │ -│ │ 🤖 Personalized Tips │ │ -│ │ │ │ -│ │ ┌────────────────────────────────────────────────────┐ │ │ -│ │ │ 1. Boost Emergency Fund +5 pts│ │ │ -│ │ │ Add $500/month to reach 6-month target │ │ │ -│ │ │ ┌────────────────────────┐ │ │ │ -│ │ │ │ Set Up Auto-Transfer │ │ │ │ -│ │ │ └────────────────────────┘ │ │ │ -│ │ └────────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ ┌────────────────────────────────────────────────────┐ │ │ -│ │ │ 2. Pay Loan Early +3 pts│ │ │ -│ │ │ Extra $200/month saves $340 in interest │ │ │ -│ │ │ ┌────────────────────────┐ │ │ │ -│ │ │ │ See Payoff Calculator │ │ │ │ -│ │ │ └────────────────────────┘ │ │ │ -│ │ └────────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ ┌────────────────────────────────────────────────────┐ │ │ -│ │ │ 3. Diversify with Shares +2 pts│ │ │ -│ │ │ Consider allocating 10% to share investments │ │ │ -│ │ │ ┌────────────────────────┐ │ │ │ -│ │ │ │ Explore Share Options │ │ │ │ -│ │ │ └────────────────────────┘ │ │ │ -│ │ └────────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ └──────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌──────────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░░░░░░░░░░ 📈 Get My Improvement Plan ░░░░░░░░░░░░░░░░░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └──────────────────────────────────────────────────────────┘ │ -│ │ -└────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Screen 6: Loading State - -``` -┌────────────────────────────────────────────────────────────────┐ -│ 9:41 100% ▐▐▐▌ │ -├────────────────────────────────────────────────────────────────┤ -│ │ -│ Your Portfolio 🔔 ⚙️ │ -│ ████████████ │ -│ ↑ Shimmer │ -│ │ -│ ┌────────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ░░│ │ -│ │░░ ████████████████████████ ░░│ │ -│ │░░ ░░│ │ -│ │░░ ████████████████████████████████████████████ ░░│ │ -│ │░░ ░░│ │ -│ │░░ ┌────────────────────────────────────────────┐ ░░│ │ -│ │░░ │ │ ░░│ │ -│ │░░ │ 📊 │ ░░│ │ -│ │░░ │ │ ░░│ │ -│ │░░ └────────────────────────────────────────────┘ ░░│ │ -│ │░░ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └────────────────────────────────────────────────────────┘ │ -│ ↑ Hero card skeleton with shimmer │ -│ │ -│ ┌────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ████████████████████████ │ │ -│ │ │ │ -│ │ ┌────────────────────────────────────────────────┐ │ │ -│ │ │ ┌──────────────────┐ │ │ │ -│ │ │ │ │ │ │ │ -│ │ │ │ ████████████ │ ████ █████ │ │ │ -│ │ │ │ │ ████ █████ │ │ │ -│ │ │ │ ████████████ │ ████ █████ │ │ │ -│ │ │ │ │ │ │ │ -│ │ │ └──────────────────┘ │ │ │ -│ │ └────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ │ -│ │ │ ████████ │ │ ████████ │ │ ████████ │ │ │ -│ │ │ ████ │ │ ████ │ │ ████ │ │ │ -│ │ └──────────────┘ └──────────────┘ └──────────────┘ │ │ -│ │ │ │ -│ └────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌────────────────────────────────────────────────────────┐ │ -│ │ ████████ │ │ -│ │ ┌─────────────────────────────────────────────────┐ │ │ -│ │ │ ┌───┐ │ │ │ -│ │ │ │███│ ████████████████ ██████████████ │ │ │ -│ │ │ └───┘ ████████████████████████████████ │ │ │ -│ │ │ █████████████ │ │ │ -│ │ └─────────────────────────────────────────────────┘ │ │ -│ │ ┌─────────────────────────────────────────────────┐ │ │ -│ │ │ ┌───┐ │ │ │ -│ │ │ │███│ ████████████████ ██████████████ │ │ │ -│ │ │ └───┘ ████████████████████████████████ │ │ │ -│ │ └─────────────────────────────────────────────────┘ │ │ -│ └────────────────────────────────────────────────────────┘ │ -│ │ -│ Shimmer: Left-to-right sweep, 1000ms, infinite loop │ -│ Colors: #E1E4E8 → #F8F9FA → #E1E4E8 │ -│ │ -└────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Screen 7: Empty State (No Accounts) - -``` -┌────────────────────────────────────────────────────────────────┐ -│ 9:41 100% ▐▐▐▌ │ -├────────────────────────────────────────────────────────────────┤ -│ │ -│ Your Portfolio 🔔 ⚙️ │ -│ Good morning, John │ -│ │ -│ ┌────────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ░░│ │ -│ │░░ Net Worth ░░│ │ -│ │░░ ░░│ │ -│ │░░ $ 0.00 ░░│ │ -│ │░░ ░░│ │ -│ │░░ Your journey starts here ░░│ │ -│ │░░ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └────────────────────────────────────────────────────────┘ │ -│ │ -│ │ -│ │ -│ ┌──────────────────────┐ │ -│ │ │ │ -│ │ ┌──────────┐ │ │ -│ │ │ │ │ │ -│ │ │ 💰 │ │ │ -│ │ │ │ │ │ -│ │ │ 📈 │ │ │ -│ │ │ │ │ │ -│ │ └──────────┘ │ │ -│ │ ╲│╱ │ │ -│ │ │ │ │ -│ │ ╱│╲ │ │ -│ │ │ │ -│ └──────────────────────┘ │ -│ ↑ Illustration 160dp │ -│ Animated: coins floating in │ -│ │ -│ Start Your Financial Journey │ -│ ═════════════════════════════ │ -│ 24sp, Bold, Center │ -│ │ -│ Open your first account and start building │ -│ wealth with smart savings and investments. │ -│ 14sp, #6B7280, Center │ -│ │ -│ ┌──────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░░░░░░░ + Open First Account ░░░░░░░░░░░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └──────────────────────────────────────────┘ │ -│ Primary gradient button, 56dp height │ -│ │ -│ Explore Benefits → │ -│ Text button │ -│ │ -│ │ -│ ┌────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ Why open an account with us? │ │ -│ │ │ │ -│ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ -│ │ │ 4.5% │ │ $0 │ │ 24/7 │ │ │ -│ │ │ Interest │ │ Fees │ │ Access │ │ │ -│ │ └──────────┘ └──────────┘ └──────────┘ │ │ -│ │ │ │ -│ └────────────────────────────────────────────────────────┘ │ -│ │ -└────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Screen 8: Error State - -``` -┌────────────────────────────────────────────────────────────────┐ -│ 9:41 100% ▐▐▐▌ │ -├────────────────────────────────────────────────────────────────┤ -│ │ -│ Your Portfolio 🔔 ⚙️ │ -│ John │ -│ │ -│ │ -│ │ -│ │ -│ │ -│ ┌──────────────────────┐ │ -│ │ │ │ -│ │ ⚠️ │ │ -│ │ ╱ ╲ │ │ -│ │ ╱ ╲ │ │ -│ │ ╱ ! ╲ │ │ -│ │ ╱──────────╲ │ │ -│ │ │ │ -│ └──────────────────────┘ │ -│ ↑ #FF4757 accent, 120dp │ -│ │ -│ Couldn't Load Portfolio │ -│ ═══════════════════════ │ -│ 20sp, Bold │ -│ │ -│ We're having trouble connecting to our │ -│ servers. Please check your connection │ -│ and try again. │ -│ 14sp, #6B7280, Center │ -│ │ -│ ┌──────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░░░░░░░░░░ Try Again ░░░░░░░░░░░░░░░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └──────────────────────────────────────┘ │ -│ │ -│ View Cached Data │ -│ ↑ Text button │ -│ │ -│ Contact Support │ -│ ↑ Text button │ -│ │ -│ │ -│ │ -└────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Component Specifications - -### Net Worth Hero Card - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ NET WORTH HERO CARD │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ Dimensions: │ -│ - Width: Full width - 32dp (16dp margin each side) │ -│ - Height: 280dp │ -│ - Corner Radius: 28dp │ -│ - Padding: 24dp │ -│ │ -│ Background: │ -│ - Gradient: #667EEA (top-left) → #764BA2 (bottom-right) │ -│ - Angle: 135° │ -│ │ -│ Shadow: │ -│ - Blur: 20dp │ -│ - Offset: 0, 12dp │ -│ - Color: Primary at 30% opacity │ -│ │ -│ Typography: │ -│ - Label: 12sp, White 60%, Medium │ -│ - Net Worth: 40sp, White 100%, ExtraBold │ -│ - Change: 16sp, Green/Red, SemiBold │ -│ - Percentage: 12sp, matching color, Medium │ -│ │ -│ Sparkline: │ -│ - Height: 48dp │ -│ - Line: 2dp, White 60% │ -│ - Touch: Show tooltip with value │ -│ │ -│ Animation: │ -│ - Number: Count up on load (1200ms) │ -│ - Sparkline: Draw from left (800ms delay, 600ms duration) │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - -### Portfolio Allocation Ring - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ PORTFOLIO ALLOCATION RING │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ Dimensions: │ -│ - Ring Diameter: 120dp │ -│ - Ring Thickness: 16dp │ -│ - Gap between segments: 4dp │ -│ │ -│ Segments: │ -│ - Savings: #11998E (position 0°) │ -│ - Loans: #FF4757 (red, negative space) │ -│ - Shares: #667EEA (remaining) │ -│ │ -│ Center Text: │ -│ - Line 1: Total assets (16sp, Bold) │ -│ - Line 2: "ASSETS" label (10sp, Gray) │ -│ - Line 3: Total debt (14sp, Red) │ -│ - Line 4: "DEBT" label (10sp, Gray) │ -│ │ -│ Interaction: │ -│ - Touch segment: Highlight and show tooltip │ -│ - Haptic: Light tap on segment touch │ -│ │ -│ Animation: │ -│ - Segments animate in clockwise (400ms each, staggered) │ -│ - Ring rotates slightly on touch │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - -### Financial Health Gauge - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ FINANCIAL HEALTH GAUGE │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ Dimensions: │ -│ - Gauge Diameter: 100dp │ -│ - Arc Thickness: 12dp │ -│ - Arc Span: 180° (half circle) │ -│ │ -│ Score Ranges & Colors: │ -│ - 0-40 Poor: #FF4757 (Red) │ -│ - 40-55 Fair: #FFB800 (Amber) │ -│ - 55-70 Good: #11998E (Teal) │ -│ - 70-85 Great: #00D09C (Green) │ -│ - 85-100 Excellent: #00D09C + Golden glow │ -│ │ -│ Needle: │ -│ - Length: 40dp │ -│ - Width: 4dp at base, 1dp at tip │ -│ - Color: #1F2937 │ -│ │ -│ Animation: │ -│ - Needle sweeps from 0 to score (1000ms, spring) │ -│ - Score number counts up simultaneously │ -│ - Background fills as needle moves │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - -### Account Card - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ ACCOUNT CARD (Expandable) │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ Collapsed State: │ -│ - Height: 88dp │ -│ - Shows: Icon, Name, Number, Balance, Status │ -│ │ -│ Expanded State: │ -│ - Height: Auto (~200dp depending on content) │ -│ - Additional: Interest rate, last activity, goal progress │ -│ - Quick actions row │ -│ │ -│ Left Accent Border: │ -│ - Width: 4dp │ -│ - Color: Account type color │ -│ - Savings: #11998E │ -│ - Loan: #667EEA │ -│ - Share: #FC466B │ -│ │ -│ Icon Container: │ -│ - Size: 44dp x 44dp │ -│ - Corner Radius: 12dp │ -│ - Background: Type color at 12% opacity │ -│ │ -│ Interaction: │ -│ - Tap header: Toggle expansion (300ms spring) │ -│ - Swipe right: Reveal quick actions │ -│ - Long press: Show context menu │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - -### Achievement Badge - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ ACHIEVEMENT BADGE │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ Dimensions: │ -│ - Container: 80dp x 100dp │ -│ - Badge Icon: 48dp │ -│ - Corner Radius: 12dp │ -│ │ -│ States: │ -│ │ -│ 1. Unlocked: │ -│ - Full color │ -│ - Golden glow behind badge │ -│ - Confetti on first view │ -│ │ -│ 2. Active (In Progress): │ -│ - Full color │ -│ - Subtle pulse animation │ -│ - Progress ring around icon │ -│ │ -│ 3. Locked: │ -│ - Grayscale │ -│ - Lock icon overlay │ -│ - "?" instead of icon for mystery badges │ -│ │ -│ Animation: │ -│ - Unlock: Scale 0 → 1.1 → 1.0, golden particles │ -│ - Tap: Scale 0.95, show details bottom sheet │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Animations & Micro-interactions - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ ANIMATION SPECIFICATIONS │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ 1. NET WORTH COUNT UP │ -│ Duration: 1200ms │ -│ Easing: EaseOutExpo │ -│ Start: 0 → Current value │ -│ Haptic: Light tap every $1000 │ -│ │ -│ 2. PORTFOLIO RING FILL │ -│ Duration: 400ms per segment │ -│ Stagger: 100ms between segments │ -│ Easing: Spring (damping: 0.8, stiffness: 300) │ -│ │ -│ 3. HEALTH GAUGE SWEEP │ -│ Duration: 1000ms │ -│ Easing: Spring (damping: 0.7, stiffness: 400) │ -│ Needle: Overshoot 5° then settle │ -│ │ -│ 4. ACCOUNT CARD EXPAND/COLLAPSE │ -│ Duration: 300ms │ -│ Easing: Spring │ -│ Content: Fade in 200ms after height settles │ -│ │ -│ 5. TAB INDICATOR SLIDE │ -│ Duration: 250ms │ -│ Easing: EaseInOutCubic │ -│ Width: Morphs to match tab width │ -│ │ -│ 6. INSIGHT CARD SWIPE │ -│ Velocity tracking: Yes │ -│ Snap points: Center of each card │ -│ Overscroll: Damped spring │ -│ │ -│ 7. ACHIEVEMENT UNLOCK │ -│ Scale: 0 → 1.1 → 1.0 (400ms) │ -│ Particles: 12 golden sparks, radial │ -│ Sound: Celebratory chime (if enabled) │ -│ Haptic: Success pattern │ -│ │ -│ 8. PULL TO REFRESH │ -│ Threshold: 100dp │ -│ Spinner: Rotating gradient ring │ -│ Haptic: Light impact at threshold │ -│ │ -│ 9. FAB PRESS │ -│ Scale: 1.0 → 0.95 (100ms) → 1.0 │ -│ Ripple: From center, primary color │ -│ Expand: Morphs to full menu (400ms spring) │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Accessibility - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ ACCESSIBILITY SPECIFICATIONS │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ TOUCH TARGETS │ -│ Minimum: 48dp x 48dp │ -│ Recommended: 56dp for primary actions │ -│ Spacing: 8dp between adjacent targets │ -│ │ -│ COLOR CONTRAST │ -│ Text on background: 4.5:1 minimum (WCAG AA) │ -│ Text on gradient: 4.5:1 (white on #667EEA = 4.7:1 ✓) │ -│ Charts: Patterns in addition to colors │ -│ │ -│ SCREEN READER LABELS │ -│ Net Worth Card: "Net worth, 45,750 dollars, up 1,250 or 2.8 │ -│ percent this month" │ -│ Portfolio Ring: "Portfolio allocation: 65% savings, 15% loans, │ -│ 20% shares. Touch segment for details" │ -│ Health Score: "Financial health score 78 out of 100, rated │ -│ Good" │ -│ Account Card: "Primary Savings account ending in 4567, │ -│ balance 35,000 dollars, Active" │ -│ Achievement: "First 1K Saved badge, unlocked" │ -│ │ -│ FOCUS ORDER │ -│ 1. Profile avatar │ -│ 2. Notification bell │ -│ 3. Settings gear │ -│ 4. Net Worth card (with eye toggle) │ -│ 5. Portfolio allocation (donut + chips) │ -│ 6. Health score │ -│ 7. Account type tabs │ -│ 8. Account cards (in order) │ -│ 9. Insights carousel │ -│ 10. Recent activity │ -│ 11. Achievements │ -│ 12. FAB │ -│ │ -│ REDUCED MOTION │ -│ When enabled: │ -│ - Instant number display (no count-up) │ -│ - Immediate gauge position (no sweep) │ -│ - Fade transitions only │ -│ Keep: Color changes, state indicators │ -│ │ -│ HIGH CONTRAST MODE │ -│ - Thicker chart lines (3dp) │ -│ - Solid borders on cards │ -│ - Increased text weight │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Dark Mode - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ DARK MODE COLOR MAPPING │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ Element │ Light │ Dark │ -│ ─────────────────────┼────────────────┼───────────────────── │ -│ Screen Background │ #F8F9FA │ #0D1117 │ -│ Card Background │ #FFFFFF │ #21262D │ -│ Surface │ #FFFFFF │ #161B22 │ -│ Primary Text │ #1F2937 │ #F0F6FC │ -│ Secondary Text │ #6B7280 │ #8B949E │ -│ Divider │ #E1E4E8 │ #30363D │ -│ Progress Track │ #E1E4E8 │ #30363D │ -│ Card Border │ #E1E4E8 │ #30363D │ -│ ─────────────────────┼────────────────┼───────────────────── │ -│ PRESERVED (same): │ │ │ -│ Primary Gradient │ #667EEA-764BA2 │ Same (85% opacity) │ -│ Secondary Gradient │ #11998E-38EF7D │ Same │ -│ Accent Gradient │ #FC466B-3F5EFB │ Same │ -│ Success │ #00D09C │ Same │ -│ Error │ #FF4757 │ Same │ -│ Warning │ #FFB800 │ Same │ -│ │ -│ Special Cases: │ -│ - Hero card gradient: Add 10% darker overlay │ -│ - Chart lines: Increase to 100% opacity │ -│ - Achievement glow: Reduce to 60% │ -│ - Shadows: Disabled, use surface differentiation │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - ---- - -## State Management - -```kotlin -// Dashboard State -data class DashboardState( - // User Info - val clientId: Long = 0, - val firstName: String = "", - val greeting: String = "", - val profileImage: ByteArray? = null, - - // Net Worth - val totalNetWorth: Double = 0.0, - val monthlyChange: Double = 0.0, - val monthlyChangePercent: Double = 0.0, - val netWorthHistory: List = emptyList(), - val isAmountVisible: Boolean = true, - - // Portfolio Allocation - val savingsTotal: Double = 0.0, - val loansTotal: Double = 0.0, - val sharesTotal: Double = 0.0, - val savingsCount: Int = 0, - val loansCount: Int = 0, - val sharesCount: Int = 0, - - // Financial Health - val healthScore: Int = 0, - val healthScoreLabel: String = "", - val healthInsight: String = "", - val healthBreakdown: List = emptyList(), - - // Accounts - val selectedTab: AccountTab = AccountTab.ALL, - val savingsAccounts: List = emptyList(), - val loanAccounts: List = emptyList(), - val shareAccounts: List = emptyList(), - val expandedAccountId: Long? = null, - - // AI Insights - val insights: List = emptyList(), - - // Recent Activity - val recentTransactions: List = emptyList(), - - // Achievements - val achievements: List = emptyList(), - val newAchievementUnlocked: AchievementItem? = null, - - // UI State - val isLoading: Boolean = false, - val isRefreshing: Boolean = false, - val error: String? = null, - val notificationCount: Int = 0 -) - -enum class AccountTab { ALL, SAVINGS, LOANS, SHARES } - -data class HealthMetric( - val name: String, - val score: Int, - val maxScore: Int = 100, - val insight: String -) - -data class InsightItem( - val id: Long, - val icon: String, - val title: String, - val description: String, - val actionLabel: String, - val actionRoute: String, - val isAIPowered: Boolean = false -) - -data class AchievementItem( - val id: String, - val icon: String, - val title: String, - val description: String, - val status: AchievementStatus, - val progress: Float? = null, - val unlockedAt: Long? = null -) - -enum class AchievementStatus { LOCKED, IN_PROGRESS, UNLOCKED } - -// Actions -sealed interface DashboardAction { - // Navigation - data class OnAccountClick(val accountId: Long, val accountType: AccountTab) : DashboardAction - data class OnTabSelected(val tab: AccountTab) : DashboardAction - data object OnViewAllAccounts : DashboardAction - data object OnViewAllTransactions : DashboardAction - data object OnViewHealthReport : DashboardAction - data object OnViewAllAchievements : DashboardAction - data object OnNotificationClick : DashboardAction - data object OnSettingsClick : DashboardAction - data object OnAddAccountClick : DashboardAction - - // Interactions - data class OnAccountExpand(val accountId: Long) : DashboardAction - data class OnInsightAction(val insightId: Long) : DashboardAction - data class OnAchievementTap(val achievementId: String) : DashboardAction - data object OnToggleAmountVisibility : DashboardAction - data object OnRefresh : DashboardAction - data object OnRetry : DashboardAction - data object DismissNewAchievement : DashboardAction -} -``` - ---- - -## Implementation Structure - -```kotlin -@Composable -fun DashboardScreen( - state: DashboardState, - onAction: (DashboardAction) -> Unit, - modifier: Modifier = Modifier -) { - Scaffold( - topBar = { - DashboardTopAppBar( - greeting = state.greeting, - firstName = state.firstName, - profileImage = state.profileImage, - notificationCount = state.notificationCount, - onNotificationClick = { onAction(DashboardAction.OnNotificationClick) }, - onSettingsClick = { onAction(DashboardAction.OnSettingsClick) } - ) - }, - floatingActionButton = { - ExtendedFAB( - text = "Add", - icon = Icons.Add, - onClick = { onAction(DashboardAction.OnAddAccountClick) } - ) - } - ) { paddingValues -> - SwipeRefresh( - refreshing = state.isRefreshing, - onRefresh = { onAction(DashboardAction.OnRefresh) } - ) { - LazyColumn( - modifier = Modifier.padding(paddingValues), - contentPadding = PaddingValues(16.dp), - verticalArrangement = Arrangement.spacedBy(16.dp) - ) { - // Net Worth Hero - item { - NetWorthHeroCard( - netWorth = state.totalNetWorth, - monthlyChange = state.monthlyChange, - monthlyChangePercent = state.monthlyChangePercent, - history = state.netWorthHistory, - isVisible = state.isAmountVisible, - onToggleVisibility = { - onAction(DashboardAction.OnToggleAmountVisibility) - } - ) - } - - // Portfolio Allocation - item { - PortfolioAllocationCard( - savingsTotal = state.savingsTotal, - loansTotal = state.loansTotal, - sharesTotal = state.sharesTotal, - savingsCount = state.savingsCount, - loansCount = state.loansCount, - sharesCount = state.sharesCount, - onSegmentClick = { tab -> - onAction(DashboardAction.OnTabSelected(tab)) - } - ) - } - - // Financial Health Score - item { - FinancialHealthCard( - score = state.healthScore, - label = state.healthScoreLabel, - insight = state.healthInsight, - onViewReport = { - onAction(DashboardAction.OnViewHealthReport) - } - ) - } - - // Account Type Tabs - stickyHeader { - AccountTypeTabs( - selectedTab = state.selectedTab, - savingsCount = state.savingsCount, - loansCount = state.loansCount, - sharesCount = state.sharesCount, - onTabSelected = { tab -> - onAction(DashboardAction.OnTabSelected(tab)) - } - ) - } - - // Account Cards - items( - items = state.filteredAccounts, - key = { it.id } - ) { account -> - AccountCard( - account = account, - isExpanded = account.id == state.expandedAccountId, - onExpand = { - onAction(DashboardAction.OnAccountExpand(account.id)) - }, - onClick = { - onAction(DashboardAction.OnAccountClick( - account.id, - account.type - )) - } - ) - } - - // AI Insights - item { - InsightsSection( - insights = state.insights, - onInsightAction = { id -> - onAction(DashboardAction.OnInsightAction(id)) - } - ) - } - - // Recent Activity - item { - RecentActivitySection( - transactions = state.recentTransactions, - onViewAll = { - onAction(DashboardAction.OnViewAllTransactions) - } - ) - } - - // Achievements - item { - AchievementsSection( - achievements = state.achievements, - onAchievementTap = { id -> - onAction(DashboardAction.OnAchievementTap(id)) - }, - onViewAll = { - onAction(DashboardAction.OnViewAllAchievements) - } - ) - } - - // Bottom spacing for FAB - item { Spacer(Modifier.height(80.dp)) } - } - } - } - - // Achievement unlock overlay - state.newAchievementUnlocked?.let { achievement -> - AchievementUnlockOverlay( - achievement = achievement, - onDismiss = { onAction(DashboardAction.DismissNewAchievement) } - ) - } -} - -// Key Composables -@Composable -fun NetWorthHeroCard(...) - -@Composable -fun PortfolioAllocationCard(...) - -@Composable -fun FinancialHealthCard(...) - -@Composable -fun AccountTypeTabs(...) - -@Composable -fun AccountCard(...) - -@Composable -fun InsightsSection(...) - -@Composable -fun AchievementsSection(...) - -@Composable -fun AchievementUnlockOverlay(...) -``` - ---- - -## Changelog - -| Date | Version | Changes | -|------|---------|---------| -| 2025-12-30 | 2.0 | Initial v2.0 mockup with 2025 fintech patterns | - -### Features in Version 2.0 -- Net Worth Hero with sparkline chart -- Portfolio Allocation donut ring -- AI-powered Financial Health Score -- Expandable account cards with quick actions -- Smart AI Insights with actionable recommendations -- Gamification with achievement badges and milestones -- Comprehensive dark mode support -- Full accessibility specifications -- Detailed animation and micro-interaction specs - ---- - -## Data Binding Reference - -> **For `/implement` command**: Maps UI components to API.md sections. -> **Source of Truth**: See `API.md` for complete endpoint details. - -### Screen → API.md Mapping - -| Screen | API.md Section | Key Fields | -|--------|----------------|------------| -| Client Info | `1. Client Details` | `displayName`, profile data | -| All Accounts | `2. Client Accounts Overview` | `savingsAccounts[]`, `loanAccounts[]`, `shareAccounts[]` | -| Profile Image | `3. Client Profile Image` | Binary image | -| Recent Transactions | `4. Client Transactions` | For sparkline chart | -| Savings Detail | `5. Savings Account Details` | Full savings data | -| Loan Detail | `6. Loan Account Details` | Full loan data | -| Beneficiaries | `7. Beneficiary List` | For quick transfer | -| Transfer Template | `8. Transfer Template` | Account options | -| Execute Transfer | `9. Execute Transfer` | POST transfer | -| Third-Party Transfer | `10. Third-Party Transfer` | TPT support | - -### Client-Only Features - -| Feature | Storage | Notes | -|---------|---------|-------| -| Net Worth Calculation | Client-side | Sum accounts | -| Portfolio Allocation | Client-side | Calculate percentages | -| Financial Health Score | Client-side | Based on account patterns | -| AI Insights | Client-side | Generated recommendations | -| Achievement Badges | DataStore | Gamification | -| Sparkline Chart | Client-side | From transaction data | - -### Actions → API.md Mapping - -| User Action | API.md Reference | Navigation | -|-------------|------------------|------------| -| Load Dashboard | `1. Client Details` + `2. Client Accounts` | Initial load | -| View Savings | `5. Savings Account Details` | → Savings Detail | -| View Loan | `6. Loan Account Details` | → Loan Detail | -| Quick Transfer | `8. Transfer Template` → `9. Execute Transfer` | → Transfer Flow | - -### Error Handling - -See `API.md → Error Responses` for complete error codes. diff --git a/claude-product-cycle/design-spec-layer/features/dashboard/SPEC.md b/claude-product-cycle/design-spec-layer/features/dashboard/SPEC.md deleted file mode 100644 index 985b18fcb..000000000 --- a/claude-product-cycle/design-spec-layer/features/dashboard/SPEC.md +++ /dev/null @@ -1,485 +0,0 @@ -# Dashboard - Feature Specification - -> **Purpose**: Unified account management dashboard for end users -> **User Value**: Single view of all financial accounts with quick actions -> **Last Updated**: 2025-12-28 -> **Status**: Production Design - ---- - -## 1. Overview - -### 1.1 Feature Summary -The Dashboard provides a comprehensive, unified view of the user's complete financial portfolio. It aggregates savings, loans, and share accounts into an intuitive interface with real-time balances, quick actions, and seamless navigation to detailed account management. - -### 1.2 User Stories -- As a user, I want to see my total net worth at a glance -- As a user, I want to quickly identify which accounts need attention -- As a user, I want to transfer money with minimal steps -- As a user, I want to track my loan repayment progress -- As a user, I want to see recent transactions across all accounts -- As a user, I want to manage beneficiaries for quick transfers - -### 1.3 Design Principles -- **Clarity**: Information hierarchy prioritizes most important data -- **Speed**: One-tap access to frequent actions -- **Trust**: Clear display of financial figures with currency formatting -- **Accessibility**: WCAG 2.1 AA compliant design - ---- - -## 2. Screen Layout - -### 2.1 Main Dashboard - -``` -┌─────────────────────────────────────────────────────────────┐ -│ ← Dashboard 🔔 ⚙️ │ -├─────────────────────────────────────────────────────────────┤ -│ │ -│ Good morning, John │ -│ December 28, 2025 │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ TOTAL NET WORTH 👁 │ │ -│ │ ┌───────────────────────────────────────────────┐ │ │ -│ │ │ │ │ │ -│ │ │ $ 45,750.00 │ │ │ -│ │ │ │ │ │ -│ │ │ ↑ +$1,250.00 this month │ │ │ -│ │ └───────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ Savings Loans Shares │ │ -│ │ $52,500 -$6,750 $0 │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ QUICK ACTIONS │ │ -│ │ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │ │ -│ │ │ 💸 │ │ 📥 │ │ 📊 │ │ 👥 │ │ │ -│ │ │Transfer│ │Deposit │ │ Invest │ │ Benef. │ │ │ -│ │ └────────┘ └────────┘ └────────┘ └────────┘ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ MY ACCOUNTS View All → │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ 💰 Primary Savings $ 35,000.00 │ │ -│ │ SA-0001234567 • Active │ │ -│ │ Interest Rate: 4.5% p.a. │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ 💰 Emergency Fund $ 17,500.00 │ │ -│ │ SA-0001234568 • Active │ │ -│ │ Interest Rate: 3.2% p.a. │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ 🏦 Personal Loan -$ 6,750.00 │ │ -│ │ LA-0009876543 • Active │ │ -│ │ ████████░░ 80% paid • Due: Jan 15 │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ RECENT ACTIVITY View All → │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ Today │ │ -│ │ ┌─────────────────────────────────────────────┐ │ │ -│ │ │ ↓ Salary Credit + $4,500.00 │ │ │ -│ │ │ Primary Savings • 09:30 AM │ │ │ -│ │ └─────────────────────────────────────────────┘ │ │ -│ │ ┌─────────────────────────────────────────────┐ │ │ -│ │ │ ↑ Bill Payment - $150.00 │ │ │ -│ │ │ Primary Savings • 08:15 AM │ │ │ -│ │ └─────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ Yesterday │ │ -│ │ ┌─────────────────────────────────────────────┐ │ │ -│ │ │ ↓ Interest Credit + $125.50 │ │ │ -│ │ │ Emergency Fund • 11:59 PM │ │ │ -│ │ └─────────────────────────────────────────────┘ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ [Powered by Mifos] │ -└─────────────────────────────────────────────────────────────┘ -``` - -### 2.2 Account Detail View - -``` -┌─────────────────────────────────────────────────────────────┐ -│ ← Primary Savings ⋮ │ -├─────────────────────────────────────────────────────────────┤ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ $ 35,000.00 │ │ -│ │ Available Balance │ │ -│ │ │ │ -│ │ Account: SA-0001234567 │ │ -│ │ Status: Active • Since: Jan 2023 │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ -│ │ Transfer│ │ Withdraw│ │Statement│ │ QR Pay │ │ -│ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │ -│ │ -│ ACCOUNT DETAILS │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ Product Name Savings Plus │ │ -│ │ Interest Rate 4.5% per annum │ │ -│ │ Total Deposits $ 42,500.00 │ │ -│ │ Total Withdrawals $ 7,500.00 │ │ -│ │ Total Interest $ 1,250.00 │ │ -│ │ Minimum Balance $ 500.00 │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ TRANSACTIONS Filter ▼ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ Dec 28 Salary Credit + $4,500.00 │ │ -│ │ Dec 27 Transfer to John - $500.00 │ │ -│ │ Dec 26 Interest Posting + $45.50 │ │ -│ │ Dec 25 ATM Withdrawal - $200.00 │ │ -│ │ Dec 24 Online Purchase - $89.99 │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ CHARGES │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ Monthly Maintenance Due: Jan 1 $ 5.00 │ │ -│ │ Annual Fee Paid: Dec 1 $ 25.00 ✓ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - -### 2.3 Transfer Flow - -``` -┌─────────────────────────────────────────────────────────────┐ -│ ← Transfer Money │ -├─────────────────────────────────────────────────────────────┤ -│ │ -│ FROM ACCOUNT │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ 💰 Primary Savings ▼ │ │ -│ │ Available: $35,000.00 │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ TO │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ ○ My Account ○ Beneficiary ○ New Recipient │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ SELECT BENEFICIARY │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ 👤 Jane Doe │ │ -│ │ ****4567 • Mifos Bank │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ 👤 Mike Smith │ │ -│ │ ****8901 • Mifos Bank │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ AMOUNT │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ $ │ │ -│ │ 500.00 │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ REMARKS (Optional) │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ Payment for dinner │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ CONTINUE TO REVIEW │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - ---- - -## 3. Components Breakdown - -### 3.1 Net Worth Card - -| Property | Type | Description | -|----------|------|-------------| -| totalNetWorth | Double | Sum of all accounts (savings - loans + shares) | -| monthlyChange | Double | Change from previous month | -| savingsTotal | Double | Sum of all savings account balances | -| loansTotal | Double | Sum of all loan outstanding balances | -| sharesTotal | Double | Sum of all share account values | -| isAmountVisible | Boolean | Toggle for privacy mode | -| currency | Currency | User's primary currency | - -### 3.2 Account Card - -| Property | Type | Description | -|----------|------|-------------| -| accountId | Long | Unique account identifier | -| accountNo | String | Display account number | -| productName | String | Account product type | -| balance | Double | Current balance | -| status | AccountStatus | ACTIVE, PENDING, CLOSED | -| accountType | AccountType | SAVINGS, LOAN, SHARE | -| interestRate | Double | Annual interest rate | -| progressPercent | Int? | Loan repayment progress (loans only) | -| nextDueDate | Date? | Next payment due (loans only) | - -### 3.3 Transaction Item - -| Property | Type | Description | -|----------|------|-------------| -| transactionId | Long | Unique transaction ID | -| transactionType | TransactionType | CREDIT, DEBIT | -| amount | Double | Transaction amount | -| description | String | Transaction description | -| accountName | String | Associated account | -| timestamp | DateTime | Transaction date/time | -| runningBalance | Double | Balance after transaction | - -### 3.4 Quick Action - -| Action | Icon | Route | Permission | -|--------|------|-------|------------| -| Transfer | 💸 | /transfer | Always | -| Deposit | 📥 | /deposit | If savings exists | -| Invest | 📊 | /share-apply | Always | -| Beneficiary | 👥 | /beneficiary | Always | -| Pay Loan | 🏦 | /loan-payment | If loan exists | -| Statement | 📄 | /statement | Always | - ---- - -## 4. State Model - -```kotlin -@Immutable -data class DashboardState( - // User Info - val clientId: Long = 0, - val firstName: String = "", - val greeting: String = "", - val profileImage: ByteArray? = null, - - // Aggregated Balances - val totalNetWorth: Double = 0.0, - val monthlyChange: Double = 0.0, - val savingsTotal: Double = 0.0, - val loansTotal: Double = 0.0, - val sharesTotal: Double = 0.0, - val currency: String = "USD", - val currencySymbol: String = "$", - val decimalPlaces: Int = 2, - - // Account Lists - val savingsAccounts: List = emptyList(), - val loanAccounts: List = emptyList(), - val shareAccounts: List = emptyList(), - - // Recent Activity - val recentTransactions: List = emptyList(), - - // UI State - val isAmountVisible: Boolean = true, - val isRefreshing: Boolean = false, - val notificationCount: Int = 0, - val networkStatus: Boolean = true, - val uiState: DashboardUiState = DashboardUiState.Loading, - val dialogState: DialogState? = null, -) - -sealed interface DashboardUiState { - data object Loading : DashboardUiState - data object Success : DashboardUiState - data class Error(val message: StringResource) : DashboardUiState - data object NetworkError : DashboardUiState - data object Empty : DashboardUiState -} - -sealed interface DashboardAction { - // Navigation - data class OnAccountClick(val accountId: Long, val type: AccountType) : DashboardAction - data class OnTransactionClick(val transactionId: Long) : DashboardAction - data object OnViewAllAccounts : DashboardAction - data object OnViewAllTransactions : DashboardAction - data object OnNotificationClick : DashboardAction - data object OnSettingsClick : DashboardAction - - // Quick Actions - data object OnTransferClick : DashboardAction - data object OnDepositClick : DashboardAction - data object OnInvestClick : DashboardAction - data object OnBeneficiaryClick : DashboardAction - - // Data Actions - data object OnRefresh : DashboardAction - data object OnRetry : DashboardAction - data object ToggleAmountVisibility : DashboardAction - data object DismissDialog : DashboardAction - - // Internal - sealed interface Internal : DashboardAction { - data class ReceiveClientData(val data: DataState) : Internal - data class ReceiveAccountsData(val data: DataState) : Internal - data class ReceiveTransactionsData(val data: DataState>) : Internal - data class ReceiveNetworkStatus(val isOnline: Boolean) : Internal - } -} - -sealed interface DashboardEvent { - data class NavigateToAccount(val accountId: Long, val type: AccountType) : DashboardEvent - data class NavigateToTransaction(val transactionId: Long) : DashboardEvent - data object NavigateToAccounts : DashboardEvent - data object NavigateToTransactions : DashboardEvent - data object NavigateToNotifications : DashboardEvent - data object NavigateToSettings : DashboardEvent - data object NavigateToTransfer : DashboardEvent - data object NavigateToDeposit : DashboardEvent - data object NavigateToInvest : DashboardEvent - data object NavigateToBeneficiary : DashboardEvent - data class ShowToast(val message: StringResource) : DashboardEvent -} -``` - ---- - -## 5. API Requirements - -| Endpoint | Method | Purpose | Priority | -|----------|--------|---------|----------| -| /self/clients/{id} | GET | Client details & greeting | P0 | -| /self/clients/{id}/accounts | GET | All account summaries | P0 | -| /self/clients/{id}/images | GET | Profile image | P1 | -| /self/clients/{id}/transactions | GET | Recent transactions | P0 | -| /self/savingsaccounts/{id} | GET | Savings details | P0 | -| /self/loans/{id} | GET | Loan details | P0 | -| /self/beneficiaries/tpt | GET | Beneficiary list | P1 | -| /self/accounttransfers/template | GET | Transfer options | P1 | -| /self/accounttransfers | POST | Execute transfer | P0 | - ---- - -## 6. Data Aggregation Logic - -### 6.1 Net Worth Calculation -```kotlin -fun calculateNetWorth(accounts: ClientAccounts): Double { - val savingsTotal = accounts.savingsAccounts - ?.filter { it.status?.active == true } - ?.sumOf { it.accountBalance ?: 0.0 } ?: 0.0 - - val loansTotal = accounts.loanAccounts - .filter { it.status?.active == true } - .sumOf { it.loanBalance ?: 0.0 } - - val sharesTotal = accounts.shareAccounts - .filter { it.status?.active == true } - .sumOf { (it.totalApprovedShares ?: 0) * (it.unitPrice ?: 0.0) } - - return savingsTotal - loansTotal + sharesTotal -} -``` - -### 6.2 Monthly Change Calculation -```kotlin -fun calculateMonthlyChange( - currentTransactions: List, - startOfMonth: Date -): Double { - return currentTransactions - .filter { it.date >= startOfMonth } - .sumOf { - if (it.transactionType?.deposit == true) it.amount ?: 0.0 - else -(it.amount ?: 0.0) - } -} -``` - -### 6.3 Loan Progress Calculation -```kotlin -fun calculateLoanProgress(loan: LoanAccount): Int { - val principal = loan.principal ?: return 0 - val outstanding = loan.loanBalance ?: return 100 - val paid = principal - outstanding - return ((paid / principal) * 100).toInt().coerceIn(0, 100) -} -``` - ---- - -## 7. Greeting Logic - -```kotlin -fun getGreeting(hour: Int, firstName: String): String { - val timeGreeting = when (hour) { - in 0..11 -> "Good morning" - in 12..16 -> "Good afternoon" - in 17..20 -> "Good evening" - else -> "Good night" - } - return "$timeGreeting, $firstName" -} -``` - ---- - -## 8. Error Handling - -| Scenario | UI Behavior | Recovery | -|----------|-------------|----------| -| No internet | Show cached data + banner | Auto-retry on reconnect | -| API timeout | Show error state | Pull-to-refresh | -| Auth expired | Navigate to login | Re-authenticate | -| No accounts | Show empty state + CTA | "Apply for Account" button | -| Partial load | Show available data | Silent background retry | - ---- - -## 9. Performance Requirements - -| Metric | Target | Implementation | -|--------|--------|----------------| -| First paint | < 500ms | Skeleton loading | -| Data load | < 2s | Parallel API calls | -| Interaction | < 100ms | Optimistic UI | -| Scroll | 60fps | LazyColumn with keys | -| Memory | < 50MB | Image compression | - ---- - -## 10. Accessibility - -| Feature | Implementation | -|---------|----------------| -| Screen Reader | contentDescription on all elements | -| Font Scaling | Supports 200% scaling | -| Color Contrast | WCAG AA (4.5:1 minimum) | -| Touch Targets | 48dp minimum | -| Focus Navigation | Logical tab order | -| Motion | Respects reduced motion setting | - ---- - -## 11. Security Considerations - -| Feature | Implementation | -|---------|----------------| -| Amount Masking | Toggle to hide sensitive data | -| Session Timeout | Auto-logout after 5 min inactive | -| Biometric | Required for transfers > $1000 | -| Screenshot | Blocked on sensitive screens | -| Clipboard | Auto-clear after 60 seconds | - ---- - -## Changelog - -| Date | Change | -|------|--------| -| 2025-12-28 | Initial production-level specification | diff --git a/claude-product-cycle/design-spec-layer/features/dashboard/STATUS.md b/claude-product-cycle/design-spec-layer/features/dashboard/STATUS.md deleted file mode 100644 index bf758cf19..000000000 --- a/claude-product-cycle/design-spec-layer/features/dashboard/STATUS.md +++ /dev/null @@ -1,140 +0,0 @@ -# Dashboard Feature - Implementation Status - -> **Feature**: Unified Account Management Dashboard -> **Phase**: Design Complete -> **Last Updated**: 2025-12-28 - ---- - -## Implementation Checklist - -``` -Feature: Dashboard -- [x] SPEC.md created -- [x] API.md created -- [ ] Network: Services verified -- [ ] Data: Repository patterns -- [ ] Feature: DashboardViewModel -- [ ] Feature: DashboardScreen -- [ ] Navigation: Route registered -- [ ] DI: Module registered -- [ ] STATUS.md updated (ongoing) -``` - ---- - -## Current Status - -| Component | Status | Notes | -|-----------|--------|-------| -| SPEC.md | Done | Production-level specification | -| API.md | Done | All /self endpoints documented | -| Client Layer | Exists | Reuse existing services | -| Feature Layer | Planned | New unified dashboard module | - ---- - -## API Implementation Status - -| Endpoint | Service | Status | -|----------|---------|--------| -| /self/clients/{id} | ClientService | Implemented | -| /self/clients/{id}/accounts | ClientService | Implemented | -| /self/clients/{id}/images | ClientService | Implemented | -| /self/clients/{id}/transactions | RecentTransactionService | Implemented | -| /self/savingsaccounts/{id} | SavingsAccountService | Implemented | -| /self/loans/{id} | LoanAccountService | Implemented | -| /self/beneficiaries/tpt | BeneficiaryService | Implemented | -| /self/accounttransfers/template | ThirdPartyTransferService | Implemented | -| /self/accounttransfers | ThirdPartyTransferService | Implemented | - ---- - -## Feature Layer Requirements - -### New Components Needed - -| Component | Type | Description | -|-----------|------|-------------| -| DashboardViewModel | ViewModel | Aggregates data from multiple sources | -| DashboardScreen | Screen | Main unified dashboard UI | -| NetWorthCard | Component | Balance aggregation display | -| AccountCard | Component | Individual account display | -| TransactionItem | Component | Recent activity item | -| QuickActionBar | Component | Quick action buttons | -| DashboardModule | DI | Koin module for dashboard | - -### Existing Components to Reuse - -| Component | Location | Purpose | -|-----------|----------|---------| -| MifosMobileTheme | core:designsystem | App theme | -| MifosScaffold | core:designsystem | Screen scaffold | -| MifosLoadingWheel | core:ui | Loading state | -| MifosErrorComponent | core:ui | Error display | -| EmptyContentScreen | core:ui | Empty state | - ---- - -## Implementation Priority - -| Priority | Task | Estimated Complexity | -|----------|------|---------------------| -| P0 | DashboardViewModel with data aggregation | Medium | -| P0 | DashboardScreen main layout | Medium | -| P0 | NetWorthCard component | Low | -| P0 | AccountCard component | Low | -| P1 | TransactionItem component | Low | -| P1 | QuickActionBar component | Low | -| P2 | Pull-to-refresh functionality | Low | -| P2 | Privacy mode toggle | Low | - ---- - -## Dependencies - -### Required Modules -- `core:data` - Repository layer -- `core:network` - API services -- `core:model` - Domain models -- `core:ui` - Shared UI components -- `core:designsystem` - Theme and design tokens - -### Related Features -- `feature:home` - Current home implementation (reference) -- `feature:accounts` - Account listing -- `feature:recent-transaction` - Transaction display -- `feature:transfer-process` - Transfer flow - ---- - -## Notes - -### Design Decisions -1. **Single Source of Truth**: Dashboard aggregates from existing repositories, no new APIs needed -2. **Reactive Updates**: Uses StateFlow for real-time balance updates -3. **Performance**: Parallel API calls for faster loading -4. **Accessibility**: WCAG 2.1 AA compliant design - -### Open Questions -1. Should dashboard replace or complement existing home screen? -2. Offline caching strategy for account balances -3. Real-time notification count integration - ---- - -## Next Steps - -1. Run `/implement dashboard` to begin implementation -2. Create DashboardViewModel with data aggregation logic -3. Build DashboardScreen with all components -4. Register navigation route and DI module -5. Update STATUS.md with implementation progress - ---- - -## Changelog - -| Date | Change | -|------|--------| -| 2025-12-28 | Created STATUS.md with implementation plan | diff --git a/claude-product-cycle/design-spec-layer/features/dashboard/mockups/PROMPTS.md b/claude-product-cycle/design-spec-layer/features/dashboard/mockups/PROMPTS.md deleted file mode 100644 index 05e8ae574..000000000 --- a/claude-product-cycle/design-spec-layer/features/dashboard/mockups/PROMPTS.md +++ /dev/null @@ -1,461 +0,0 @@ -# Dashboard - AI Mockup Prompts - -> **Generated from**: features/dashboard/SPEC.md -> **Generated on**: 2025-12-28 -> **Feature**: Unified Account Management Dashboard - ---- - -## Quick Reference - -| AI Tool | Best For | Export to Figma | -|---------|----------|-----------------| -| Google Stitch | Material Design, detailed prompts | Yes (native) | -| Uizard | Quick iterations, sketches | No | -| Visily | Component-focused, lo-fi to hi-fi | Yes | - ---- - -## Screen 1: Main Dashboard - -### Google Stitch Prompt (Recommended) - -``` -Create a mobile banking dashboard screen with Material Design 3: - -**App Context:** -Mifos Mobile - Self-service banking app for viewing accounts, transactions, and making transfers. - -**Screen Size:** 393 x 852 pixels (iPhone 14 Pro equivalent) - -**Header Section:** -- Status bar at top (time, battery, signal icons) -- Greeting text "Good morning, John" in Headline Small (24px) -- Date "December 28, 2025" in Body Medium (14px), gray color -- Two icon buttons on right: notification bell and settings gear - -**Hero Card - Net Worth:** -- Full-width card with purple gradient background (#6750A4) -- "TOTAL NET WORTH" label in white, Label Medium (12px) -- Eye icon for privacy toggle on right of label -- Large amount "$ 45,750.00" in Display Medium (45px), white -- Monthly change "+$1,250.00 this month" with up arrow, white 80% opacity -- Three-column breakdown below: - - Savings: $52,500 - - Loans: -$6,750 - - Shares: $0 -- Card has 28px corner radius - -**Quick Actions Row:** -- "QUICK ACTIONS" section label -- 4 circular buttons in a row, evenly spaced: - 1. Transfer (money send icon) - 2. Deposit (download icon) - 3. Invest (chart icon) - 4. Beneficiary (people icon) -- Each has 48px icon container with primary container color (#EADDFF) -- Label below each icon in Label Medium - -**My Accounts Section:** -- "MY ACCOUNTS" header with "View All →" link on right -- Three account cards stacked vertically: - -Card 1 - Savings: -- 40px circular icon (wallet) with purple background -- "Primary Savings" title, "SA-0001234567 • Active" subtitle -- "$ 35,000.00" balance on right -- "Interest Rate: 4.5% p.a." in small text -- White background, 12px corner radius, subtle shadow - -Card 2 - Emergency Fund: -- Same layout as Card 1 -- Balance: "$ 17,500.00" -- "Interest Rate: 3.2% p.a." - -Card 3 - Loan: -- Bank icon instead of wallet -- "Personal Loan" title -- Balance: "-$ 6,750.00" (red text) -- Progress bar showing 80% paid (purple fill on gray track) -- "Due: Jan 15" text - -**Recent Activity Section:** -- "RECENT ACTIVITY" header with "View All →" link -- "Today" date label in gray -- Two transaction items: - -Transaction 1: -- Green circle with down arrow (credit) -- "Salary Credit" description -- "Primary Savings • 09:30 AM" in gray -- "+ $4,500.00" in green on right - -Transaction 2: -- Red circle with up arrow (debit) -- "Bill Payment" description -- "Primary Savings • 08:15 AM" in gray -- "- $150.00" in red on right - -**Bottom Navigation:** -- 80px height, surface container background -- 5 tabs with icons and labels: - 1. Home (house icon) - SELECTED with indicator pill - 2. Accounts (card icon) - 3. Transfer (send icon) - 4. Activity (chart icon) - 5. Profile (person icon) -- Selected tab has secondary container color pill behind icon - -**Style Guidelines:** -- Font: Inter (all weights) -- Primary color: #6750A4 -- Surface: #FFFBFE -- On Surface: #1C1B1F -- On Surface Variant: #49454F -- Error/Debit: #B3261E -- Success/Credit: #2E7D32 -- Standard padding: 16px horizontal -- Component gap: 8-16px -- Card shadow: subtle (level 1) -``` - -### Uizard Prompt - -``` -Mobile banking dashboard app: - -Header: -- "Good morning, John" greeting -- Notification and settings icons - -Main card (purple): -- "$45,750.00" large balance -- Eye icon to hide amount -- Savings/Loans/Shares breakdown - -4 quick action buttons: -- Transfer, Deposit, Invest, Beneficiary - -Account list: -- Primary Savings: $35,000 -- Emergency Fund: $17,500 -- Personal Loan: -$6,750 with progress bar - -Recent transactions: -- Salary +$4,500 (green) -- Bill Payment -$150 (red) - -Bottom navigation: -- Home, Accounts, Transfer, Activity, Profile - -Style: Material Design 3, purple accent (#6750A4), clean white background -``` - -### Visily Prompt - -``` -Design a financial dashboard mobile screen: - -Components needed: -□ Status bar: Time, battery, signal -□ Header: Greeting "Good morning, John", date, notification bell, settings gear -□ Hero card (purple #6750A4): - - "TOTAL NET WORTH" label with eye toggle - - Large balance "$45,750.00" - - Monthly change indicator - - 3-column breakdown: Savings | Loans | Shares -□ Quick actions row: 4 circular icon buttons with labels -□ Section header: "MY ACCOUNTS" with "View All" link -□ Account card x3: Icon, name, number, status, balance -□ Section header: "RECENT ACTIVITY" with "View All" link -□ Transaction items: Icon, description, account, time, amount (colored) -□ Bottom navigation: 5 tabs with icons and labels, selected state - -Material Design 3 styling -393x852 pixels -Inter font family -``` - ---- - -## Screen 2: Account Detail - -### Google Stitch Prompt - -``` -Create a savings account detail screen with Material Design 3: - -**Screen Size:** 393 x 852 pixels - -**Top Bar:** -- Back arrow on left -- "Primary Savings" as title in Title Large (22px) -- Overflow menu (3 dots) on right -- 64px height, surface color background - -**Balance Hero:** -- Large centered amount "$ 35,000.00" in Display Small (36px) -- "Available Balance" label below in Body Medium -- Account number "SA-0001234567" in gray -- "Status: Active • Since: Jan 2023" -- White background, subtle bottom border - -**Action Buttons Row:** -- 4 equal-width buttons: - 1. Transfer (outlined) - 2. Withdraw (outlined) - 3. Statement (outlined) - 4. QR Pay (outlined) -- Each has icon above label -- 8px gap between buttons -- 16px horizontal padding - -**Account Details Card:** -- "ACCOUNT DETAILS" header -- Key-value pairs in two columns: - - Product Name: Savings Plus - - Interest Rate: 4.5% per annum - - Total Deposits: $42,500.00 - - Total Withdrawals: $7,500.00 - - Total Interest: $1,250.00 - - Minimum Balance: $500.00 -- Elevated card with 12px radius - -**Transactions Section:** -- "TRANSACTIONS" header with Filter dropdown on right -- List of transactions: - - Dec 28: Salary Credit +$4,500.00 - - Dec 27: Transfer to John -$500.00 - - Dec 26: Interest Posting +$45.50 - - Dec 25: ATM Withdrawal -$200.00 - - Dec 24: Online Purchase -$89.99 -- Each row: Date, Description, Amount (colored) -- Dividers between items - -**Charges Section:** -- "CHARGES" header -- Two charge items: - - Monthly Maintenance | Due: Jan 1 | $5.00 - - Annual Fee | Paid: Dec 1 | $25.00 ✓ -- Gray background for paid items - -**Style:** Material Design 3, same colors as dashboard -``` - ---- - -## Screen 3: Transfer Flow - -### Google Stitch Prompt - -``` -Create a money transfer screen with Material Design 3: - -**Screen Size:** 393 x 852 pixels - -**Top Bar:** -- Back arrow on left -- "Transfer Money" title -- No right actions -- Surface color background - -**From Account Selector:** -- "FROM ACCOUNT" label in Label Medium, gray -- Dropdown/selector showing: - - Wallet icon - - "Primary Savings" account name - - "Available: $35,000.00" in green -- Chevron down icon on right -- Outlined container with 4px radius - -**Transfer Type Toggle:** -- "TO" label -- Three radio options in a row: - - ○ My Account - - ● Beneficiary (selected) - - ○ New Recipient -- Selected option has primary color - -**Beneficiary List:** -- "SELECT BENEFICIARY" label -- Two beneficiary cards: - -Card 1: -- Avatar with "JD" initials -- "Jane Doe" name -- "****4567 • Mifos Bank" masked account -- Radio selected indicator - -Card 2: -- Avatar with "MS" initials -- "Mike Smith" name -- "****8901 • Mifos Bank" masked account -- Radio unselected - -**Amount Input:** -- "AMOUNT" label -- Large text field with currency prefix "$" -- "500.00" entered value in Display Small -- Outlined style with primary color border (focused) - -**Remarks Input:** -- "REMARKS (Optional)" label -- Text field with "Payment for dinner" entered -- Outlined style, unfocused - -**Continue Button:** -- Full-width filled button -- "CONTINUE TO REVIEW" label -- Primary color (#6750A4) -- 48px height, full corner radius -- 16px from bottom - -**Style:** Material Design 3, form-focused layout -``` - ---- - -## Component Prompts - -### Net Worth Card (Standalone) - -``` -Create a financial summary card component: - -- Width: 361px (full width minus 32px padding) -- Height: Auto (approximately 180px) -- Background: Linear gradient from #6750A4 to #7E67B0 -- Corner radius: 28px -- Padding: 20px horizontal, 20px vertical - -Content: -- Top row: "TOTAL NET WORTH" (Label Medium, white) + eye icon -- Main amount: "$45,750.00" (Display Medium, white, centered) -- Change indicator: "↑ +$1,250.00 this month" (Body Medium, white 80%) -- Divider line (white 20%) -- Bottom row with 3 equal columns: - - Savings: $52,500 (white) - - Loans: -$6,750 (white) - - Shares: $0 (white) - -Shadow: Level 2 elevation -``` - -### Account Card (Standalone) - -``` -Create a bank account card component: - -- Width: 361px -- Height: Auto (approximately 88px) -- Background: White (#FFFBFE) -- Corner radius: 12px -- Shadow: Level 1 elevation -- Padding: 16px - -Layout (horizontal): -- Left: 40px circular icon container (#EADDFF background) -- Center (flex): - - Account name in Title Medium (#1C1B1F) - - Account number + status in Body Small (#49454F) - - Optional: Interest rate or due date -- Right: Balance in Title Medium - -For loan variant: -- Add 8px tall progress bar below content -- Track: #E7E0EC, Fill: #6750A4 -- "XX% paid" label below -``` - -### Transaction Item (Standalone) - -``` -Create a transaction list item component: - -- Width: 361px -- Height: 72px -- Background: Transparent -- Padding: 8px vertical, 0 horizontal - -Layout (horizontal): -- Left: 40px circular indicator - - Credit: Green (#C8E6C9) background, down arrow (#2E7D32) - - Debit: Red (#F9DEDC) background, up arrow (#B3261E) -- Center (flex): - - Description in Body Large (#1C1B1F) - - Account + time in Body Small (#49454F) -- Right: Amount in Title Medium - - Credit: Green (#2E7D32) with + prefix - - Debit: Red (#B3261E) with - prefix -``` - ---- - -## Export Instructions - -### Google Stitch → Figma - -1. Go to [stitch.withgoogle.com](https://stitch.withgoogle.com/) -2. Sign in with Google account -3. Paste the prompt above -4. Click "Generate" -5. Review and iterate if needed -6. Click "Export to Figma" -7. Open in Figma and refine - -### After Figma Export - -1. **Authenticate Figma MCP** (already connected): - ``` - # MCP will prompt for authentication on first use - ``` - -2. **Get Figma file URL** after export - -3. **Run implementation**: - ``` - /implement dashboard - ``` - Claude will read the Figma design via MCP and generate matching Compose code. - ---- - -## Design Token Reference - -```json -{ - "colors": { - "primary": "#6750A4", - "onPrimary": "#FFFFFF", - "primaryContainer": "#EADDFF", - "surface": "#FFFBFE", - "onSurface": "#1C1B1F", - "onSurfaceVariant": "#49454F", - "error": "#B3261E", - "success": "#2E7D32" - }, - "typography": { - "displayMedium": "45px / 400", - "displaySmall": "36px / 400", - "headlineSmall": "24px / 400", - "titleLarge": "22px / 400", - "titleMedium": "16px / 500", - "bodyLarge": "16px / 400", - "bodyMedium": "14px / 400", - "bodySmall": "12px / 400", - "labelMedium": "12px / 500" - }, - "spacing": { - "screenPadding": "16px", - "sectionGap": "24px", - "componentGap": "8px", - "cardPadding": "16px" - }, - "radius": { - "card": "12px", - "heroCard": "28px", - "button": "24px", - "input": "4px" - } -} -``` diff --git a/claude-product-cycle/design-spec-layer/features/dashboard/mockups/PROMPTS_FIGMA.md b/claude-product-cycle/design-spec-layer/features/dashboard/mockups/PROMPTS_FIGMA.md deleted file mode 100644 index 6e0315d88..000000000 --- a/claude-product-cycle/design-spec-layer/features/dashboard/mockups/PROMPTS_FIGMA.md +++ /dev/null @@ -1,309 +0,0 @@ -# Dashboard - Figma First Draft Prompts - -> **Tool**: Figma First Draft (Shift+I in Figma) -> **Style**: Modern Banking, Material Design 3 -> **Format**: Natural language prompts optimized for Figma AI - ---- - -## How to Use - -1. Open Figma → Create new design file -2. Press `Shift + I` or click "Actions" → "First Draft" -3. Copy each prompt below -4. Generate → Iterate → Refine - ---- - -## Screen 1: Main Dashboard - -``` -Design a modern mobile banking dashboard for "Mifos Mobile" app. - -At the top, show a personalized greeting "Good morning, John" with today's date below it. Add notification and settings icons on the right side. - -Create a large purple gradient hero card showing the user's total net worth of $45,750.00 in big white text. Include an eye icon to hide/show the balance. Below the amount, show "+$1,250.00 this month" as a positive indicator. At the bottom of the card, display a breakdown: Savings $52,500, Loans -$6,750, Shares $0. - -Add a Quick Actions section with 4 circular buttons in a row: Transfer (send money icon), Deposit (download icon), Invest (chart icon), and Beneficiary (people icon). Each should have a light purple background circle with the icon inside. - -Create a "My Accounts" section with a "View All" link. Show 3 account cards stacked: -1. Primary Savings - $35,000.00, active, 4.5% interest rate -2. Emergency Fund - $17,500.00, 3.2% interest rate -3. Personal Loan - negative $6,750.00 in red, with a progress bar showing 80% paid, due Jan 15 - -Add a "Recent Activity" section showing today's transactions: -- Salary Credit: +$4,500.00 in green with a down arrow icon -- Bill Payment: -$150.00 in red with an up arrow icon - -At the bottom, add a navigation bar with 5 tabs: Home (selected with indicator), Accounts, Transfer, Activity, Profile. - -Style it like Revolut or Monzo - clean, modern, with purple as the primary accent color. -``` - ---- - -## Screen 2: Account Detail - -``` -Design a savings account detail screen for a banking app. - -Show a back arrow and "Primary Savings" as the title in the top bar, with a three-dot menu on the right. - -Display the available balance prominently: $35,000.00 in large centered text. Below it show "Available Balance", the account number "SA-0001234567", and status "Active since Jan 2023". - -Create 4 action buttons in a row: Transfer, Withdraw, Statement, and QR Pay. Each should be an outlined button with an icon above the label. - -Add an Account Details card showing key information in a two-column layout: -- Product Name: Savings Plus -- Interest Rate: 4.5% per annum -- Total Deposits: $42,500.00 -- Total Withdrawals: $7,500.00 -- Total Interest Earned: $1,250.00 -- Minimum Balance: $500.00 - -Show a Transactions section with a filter dropdown. List recent transactions: -- Dec 28: Salary Credit +$4,500.00 (green) -- Dec 27: Transfer to John -$500.00 (red) -- Dec 26: Interest Posting +$45.50 (green) -- Dec 25: ATM Withdrawal -$200.00 (red) - -Add a Charges section showing: -- Monthly Maintenance, Due Jan 1, $5.00 -- Annual Fee, Paid Dec 1, $25.00 with a checkmark -``` - ---- - -## Screen 3: Transfer Money - -``` -Design a money transfer screen for a banking app. - -Show a back arrow and "Transfer Money" as the title. - -Create a "From Account" selector that looks like a dropdown. Display a wallet icon, "Primary Savings" as the account name, and "Available: $35,000.00" in green. Add a chevron icon indicating it can be tapped to change. - -Add transfer type options as a row of 3 radio buttons: "My Account", "Beneficiary" (selected), and "New Recipient". - -Show a beneficiary selection section with 2 cards: -1. Jane Doe - with avatar showing "JD" initials, masked account "****4567 • Mifos Bank", selected state -2. Mike Smith - with avatar showing "MS" initials, masked account "****8901 • Mifos Bank", unselected - -Create a large amount input field with a dollar sign prefix, showing "500.00" entered. Make it prominent and easy to read. - -Add a remarks field labeled "Remarks (Optional)" with "Payment for dinner" as example text. - -At the bottom, add a prominent "Continue to Review" button in purple that spans the full width. -``` - ---- - -## Screen 4: Transfer Confirmation - -``` -Design a transfer confirmation screen for a banking app. - -Show a back arrow and "Confirm Transfer" title. - -Create a summary card in the center showing the transfer amount "$500.00" prominently with a downward arrow icon below it. - -Display the From section: -- Wallet icon with "Primary Savings" -- Account number below - -Display the To section: -- Avatar with initials "JD" -- "Jane Doe" name -- Masked account number - -Show transfer details: -- Transfer Type: Beneficiary Transfer -- Remarks: Payment for dinner -- Fee: $0.00 -- Total: $500.00 - -Add a large "Confirm Transfer" button in purple at the bottom. - -Below the button, add a "Cancel" text link in gray. -``` - ---- - -## Screen 5: Transfer Success - -``` -Design a success celebration screen shown after completing a money transfer. - -In the center, show a large green checkmark icon with a circular background. Add subtle confetti or celebration particles around it to make it feel rewarding. - -Display "Transfer Successful!" as a bold heading. - -Show the amount "$500.00" prominently below. - -Add details: -- "Sent to Jane Doe" -- Date and time "Dec 28, 2025 at 10:30 AM" -- Reference number "TXN-2025122800001" - -Create two buttons: -1. "Share Receipt" as an outlined button -2. "Done" as a filled purple button - -At the bottom, add a "Transfer another" text link for quick repeat actions. - -Make it feel celebratory but professional, like a premium banking app confirmation. -``` - ---- - -## Screen 6: All Accounts - -``` -Design an accounts list screen for a banking app. - -Show "My Accounts" as the title with a filter icon on the right. - -Create a summary card at the top showing: -- "Total Balance" label -- "$45,750.00" in large text -- Breakdown: Savings $52,500, Loans -$6,750, Shares $0 - -Add tabs below: All (selected), Savings, Loans, Shares. The selected tab should have an underline indicator. - -Group accounts by type: - -Savings Accounts section (2): -1. Primary Savings - - Wallet icon in purple circle - - Account number and Active status - - $35,000.00 balance - - Chevron indicating tappable - -2. Emergency Fund - - $17,500.00 balance - -Loan Accounts section (1): -1. Personal Loan - - Bank icon - - Account number and Active status - - -$6,750.00 in red - - Progress bar showing 80% paid - -Add a floating action button (FAB) in the bottom right corner with a plus icon for "Open Account". -``` - ---- - -## Screen 7: Activity/Transactions - -``` -Design a transaction history screen for a banking app. - -Show "Activity" as the title with filter and search icons on the right. - -Add a date range selector showing "This Month" with dropdown arrows. - -Create a summary row showing: -- Income: +$8,500.00 in green -- Expenses: -$2,340.00 in red -- Net: +$6,160.00 - -Group transactions by date: - -Today section: -- Salary Credit from "Employer Inc" at 09:30 AM, +$4,500.00 green -- Bill Payment to "Electric Co" at 08:15 AM, -$150.00 red - -Yesterday section: -- Transfer to "Jane Doe" at 03:45 PM, -$500.00 red -- Interest Credit at 12:00 AM, +$45.50 green - -Each transaction should show: -- Category icon in a colored circle (green for credit, red for debit) -- Description and merchant/account name -- Time -- Amount with color coding - -Add "Load More" at the bottom for pagination. -``` - ---- - -## Component Prompts - -### Net Worth Hero Card -``` -Design a financial summary card for a banking app dashboard. - -Use a purple gradient background from dark purple to lighter purple. Make it full width with generous rounded corners (about 28px). - -Show "TOTAL NET WORTH" as a small label with an eye icon next to it for privacy toggle. - -Display "$45,750.00" as the main balance in large white text, centered. - -Below, show "+$1,250.00 this month" with an up arrow to indicate positive change. - -Add a subtle divider line. - -At the bottom, create 3 equal columns showing: Savings $52,500, Loans -$6,750, Shares $0 - all in white text. -``` - -### Account Card -``` -Design a bank account card component. - -White background with subtle shadow, rounded corners (12px). - -Layout horizontally: -- Left: A 40px circular icon container with light purple background and wallet icon -- Middle: Account name in medium weight, account number and status in smaller gray text below -- Right: Balance amount aligned right - -For loan variant: Add a thin progress bar below the content showing percentage paid. -``` - -### Transaction Item -``` -Design a transaction list item for a banking app. - -Create two variants: -1. Credit (money received): Green circular background with down arrow, amount in green with + prefix -2. Debit (money spent): Red circular background with up arrow, amount in red with - prefix - -Each shows: -- Category indicator circle on left -- Description and account/merchant name in the middle -- Time in small gray text -- Amount on the right with appropriate color -``` - -### Quick Action Button -``` -Design a quick action button for a banking dashboard. - -Create a circular button with light purple background (48px diameter). -Place an icon in the center in darker purple. -Add a label below the circle in small text. - -Show 4 variants: Transfer, Deposit, Invest, Beneficiary - each with appropriate icons. -``` - ---- - -## Tips for Figma First Draft - -1. **Iterate**: Generate once, then refine with follow-up prompts -2. **Colors**: Mention "purple accent #6750A4" for consistency -3. **Reference**: Say "like Revolut" or "Monzo-style" for context -4. **States**: Ask for "show selected and unselected states" -5. **Responsive**: Mention "393px width for mobile" for correct sizing - ---- - -## After Generation - -1. Review generated designs for consistency -2. Create a color style library -3. Build component variants -4. Link screens with prototype connections -5. Export and update `FIGMA_LINKS.md` diff --git a/claude-product-cycle/design-spec-layer/features/dashboard/mockups/PROMPTS_STITCH.md b/claude-product-cycle/design-spec-layer/features/dashboard/mockups/PROMPTS_STITCH.md deleted file mode 100644 index 8c7699d19..000000000 --- a/claude-product-cycle/design-spec-layer/features/dashboard/mockups/PROMPTS_STITCH.md +++ /dev/null @@ -1,376 +0,0 @@ -# Dashboard - Google Stitch Prompts - -> **Tool**: [Google Stitch](https://stitch.withgoogle.com) -> **Style**: Material Design 3, Modern Banking -> **Format**: Copy each prompt block directly into Stitch - ---- - -## Design System Reference - -``` -Primary: #6750A4 -Primary Container: #EADDFF -Surface: #FFFBFE -On Surface: #1C1B1F -On Surface Variant: #49454F -Error/Debit: #B3261E -Success/Credit: #2E7D32 -Screen Size: 393 x 852 pixels (Android) -Font: Inter -``` - ---- - -## Screen 1: Main Dashboard - -``` -Mobile banking dashboard screen, Material Design 3, fintech app, 393x852px - -Header: -- "Good morning, John" greeting, 24px bold, #1C1B1F -- "December 28, 2025" date below, 14px, #49454F -- Right side: notification bell + settings gear icons - -Hero Card (Net Worth): -- Full width, purple gradient #6750A4, 28px corner radius -- "TOTAL NET WORTH" label white 12px + eye toggle icon -- Large balance "$45,750.00" white 45px centered -- "+$1,250.00 this month" with up arrow, white 80% -- Divider line white 20% -- Three columns below: Savings $52,500 | Loans -$6,750 | Shares $0 - -Quick Actions: -- "QUICK ACTIONS" section label -- 4 circular buttons row: Transfer, Deposit, Invest, Beneficiary -- Each: 48px icon in #EADDFF circle, label below - -My Accounts Section: -- "MY ACCOUNTS" header + "View All" link right - -Account Card 1: -- 40px purple circle with wallet icon -- "Primary Savings" title, "SA-0001234567 • Active" subtitle -- "$35,000.00" balance right, "Interest Rate: 4.5% p.a." -- White card, 12px radius, subtle shadow - -Account Card 2: -- Same layout, "Emergency Fund", "$17,500.00" - -Account Card 3 (Loan): -- Bank icon, "Personal Loan" -- "-$6,750.00" red text -- Progress bar 80% filled purple on gray -- "Due: Jan 15" - -Recent Activity: -- "RECENT ACTIVITY" header + "View All" link -- "Today" date label - -Transaction 1: -- Green circle down arrow, "Salary Credit" -- "Primary Savings • 09:30 AM" gray -- "+$4,500.00" green right - -Transaction 2: -- Red circle up arrow, "Bill Payment" -- "Primary Savings • 08:15 AM" gray -- "-$150.00" red right - -Bottom Navigation: -- 80px height, 5 tabs: Home (selected), Accounts, Transfer, Activity, Profile -- Selected: pill indicator behind icon, primary color -``` - ---- - -## Screen 2: Account Detail - -``` -Savings account detail screen, Material Design 3, banking app, 393x852px - -Top Bar: -- Back arrow left -- "Primary Savings" title 22px -- 3-dot menu right -- Surface color background - -Balance Hero: -- Large centered "$35,000.00" 36px -- "Available Balance" label below -- "SA-0001234567" account number gray -- "Status: Active • Since: Jan 2023" - -Action Buttons Row: -- 4 equal outlined buttons with icons above labels: -- Transfer | Withdraw | Statement | QR Pay -- 8px gap between - -Account Details Card: -- "ACCOUNT DETAILS" header -- Two-column key-value pairs: - - Product Name: Savings Plus - - Interest Rate: 4.5% per annum - - Total Deposits: $42,500.00 - - Total Withdrawals: $7,500.00 - - Total Interest: $1,250.00 - - Minimum Balance: $500.00 -- Elevated card 12px radius - -Transactions Section: -- "TRANSACTIONS" header + Filter dropdown right -- List items with dividers: - - Dec 28: Salary Credit +$4,500.00 green - - Dec 27: Transfer to John -$500.00 red - - Dec 26: Interest Posting +$45.50 green - - Dec 25: ATM Withdrawal -$200.00 red - - Dec 24: Online Purchase -$89.99 red - -Charges Section: -- "CHARGES" header -- Monthly Maintenance | Due: Jan 1 | $5.00 -- Annual Fee | Paid: Dec 1 | $25.00 checkmark (gray bg) -``` - ---- - -## Screen 3: Transfer Flow - -``` -Money transfer screen, Material Design 3, banking app, 393x852px - -Top Bar: -- Back arrow left -- "Transfer Money" title -- Surface background - -From Account Selector: -- "FROM ACCOUNT" label 12px gray -- Dropdown showing: - - Wallet icon, "Primary Savings" - - "Available: $35,000.00" green -- Chevron down right -- Outlined container 4px radius - -Transfer Type Toggle: -- "TO" label -- Three radio options row: - - My Account | Beneficiary (selected primary) | New Recipient - -Beneficiary List: -- "SELECT BENEFICIARY" label - -Beneficiary Card 1 (selected): -- Avatar "JD" initials circle -- "Jane Doe" name -- "****4567 • Mifos Bank" masked -- Radio selected indicator - -Beneficiary Card 2: -- Avatar "MS" initials -- "Mike Smith" -- "****8901 • Mifos Bank" -- Radio unselected - -Amount Input: -- "AMOUNT" label -- Large text field, "$" prefix -- "500.00" value 36px -- Primary color border focused - -Remarks Input: -- "REMARKS (Optional)" label -- "Payment for dinner" entered -- Outlined unfocused - -Continue Button: -- Full width filled button -- "CONTINUE TO REVIEW" -- Primary #6750A4 -- 48px height, full radius -- 16px from bottom -``` - ---- - -## Screen 4: Transfer Confirmation - -``` -Transfer confirmation screen, Material Design 3, banking app, 393x852px - -Top Bar: -- Back arrow, "Confirm Transfer" title - -Summary Card: -- White elevated card, 16px radius -- Amount large centered "$500.00" 36px -- Arrow down icon - -From Section: -- "FROM" label gray -- Wallet icon, "Primary Savings" -- "SA-0001234567" - -To Section: -- "TO" label gray -- Avatar "JD", "Jane Doe" -- "****4567 • Mifos Bank" - -Details: -- Transfer Type: Beneficiary Transfer -- Remarks: Payment for dinner -- Fee: $0.00 -- Total: $500.00 - -Confirm Button: -- Full width, "CONFIRM TRANSFER" -- Primary filled - -Cancel link below, centered gray -``` - ---- - -## Screen 5: Transfer Success - -``` -Transfer success screen, Material Design 3, banking app, 393x852px - -Center content: - -Success Animation: -- Large green checkmark 120px -- Circular green (#2E7D32) background with pulse -- Confetti particles around - -Title: -- "Transfer Successful!" 28px bold - -Amount: -- "$500.00" 36px - -Details: -- "Sent to Jane Doe" -- "Dec 28, 2025 at 10:30 AM" -- Reference: TXN-2025122800001 - -Action Buttons: -- "Share Receipt" outlined button -- "Done" filled primary button - -Bottom: -- "Transfer another" text link -``` - ---- - -## Screen 6: All Accounts - -``` -Accounts list screen, Material Design 3, banking app, 393x852px - -Top Bar: -- "My Accounts" title 22px -- Filter icon right - -Summary Card: -- "TOTAL BALANCE" label -- "$45,750.00" large -- Savings: $52,500 | Loans: -$6,750 | Shares: $0 - -Tabs: -- All | Savings | Loans | Shares -- "All" selected with underline indicator - -Account List: - -Savings Section: -- "SAVINGS ACCOUNTS (2)" header - -Card 1: -- Wallet icon purple circle -- "Primary Savings" -- "SA-0001234567 • Active" -- "$35,000.00" -- Chevron right - -Card 2: -- "Emergency Fund" -- "$17,500.00" - -Loans Section: -- "LOAN ACCOUNTS (1)" header - -Card: -- Bank icon -- "Personal Loan" -- "LA-0009876543 • Active" -- "-$6,750.00" red -- Progress 80% - -FAB: -- Bottom right floating action button -- Plus icon, primary color -- "Open Account" label on long press -``` - ---- - -## Components - -### Net Worth Card -``` -Financial summary card component, Material Design 3: -- 361px width, auto height ~180px -- Gradient #6750A4 to #7E67B0 -- 28px corner radius, 20px padding -- "TOTAL NET WORTH" white 12px + eye icon -- "$45,750.00" white 45px centered -- "+$1,250.00 this month" white 80% -- Divider white 20% -- 3 columns: Savings $52,500 | Loans -$6,750 | Shares $0 -- Level 2 shadow -``` - -### Account Card -``` -Bank account card component, Material Design 3: -- 361px width, ~88px height -- White #FFFBFE, 12px radius, level 1 shadow -- 16px padding -- Left: 40px icon circle #EADDFF -- Center: Title 16px, subtitle 12px gray -- Right: Balance 16px -- Loan variant: Add progress bar below -``` - -### Transaction Item -``` -Transaction list item, Material Design 3: -- 361px width, 72px height -- Left: 40px indicator circle - - Credit: green #C8E6C9 bg, down arrow #2E7D32 - - Debit: red #F9DEDC bg, up arrow #B3261E -- Center: Description 16px, Account+time 12px gray -- Right: Amount colored (green credit, red debit) -``` - -### Quick Action Button -``` -Quick action circular button, Material Design 3: -- 64px total height -- 48px icon circle, #EADDFF background -- Icon 24px, #6750A4 -- Label below 12px, #49454F -- Tap state: ripple effect -``` - ---- - -## Quick Start - -1. Open [stitch.withgoogle.com](https://stitch.withgoogle.com) -2. Create project "Mifos Mobile - Dashboard" -3. Copy each screen prompt → Generate -4. Generate components separately for reuse -5. Export all to Figma when done diff --git a/claude-product-cycle/design-spec-layer/features/dashboard/mockups/design-tokens.json b/claude-product-cycle/design-spec-layer/features/dashboard/mockups/design-tokens.json deleted file mode 100644 index c03448c63..000000000 --- a/claude-product-cycle/design-spec-layer/features/dashboard/mockups/design-tokens.json +++ /dev/null @@ -1,294 +0,0 @@ -{ - "feature": "Dashboard", - "generated": "2025-12-28", - "source": "features/dashboard/SPEC.md", - "tokens": { - "colors": { - "primary": "#6750A4", - "onPrimary": "#FFFFFF", - "primaryContainer": "#EADDFF", - "onPrimaryContainer": "#21005D", - "secondary": "#625B71", - "onSecondary": "#FFFFFF", - "secondaryContainer": "#E8DEF8", - "surface": "#FFFBFE", - "surfaceContainer": "#F3EDF7", - "surfaceContainerHigh": "#ECE6F0", - "onSurface": "#1C1B1F", - "onSurfaceVariant": "#49454F", - "outline": "#79747E", - "outlineVariant": "#CAC4D0", - "error": "#B3261E", - "onError": "#FFFFFF", - "errorContainer": "#F9DEDC", - "success": "#2E7D32", - "onSuccess": "#FFFFFF", - "successContainer": "#C8E6C9" - }, - "typography": { - "displayLarge": { - "size": 57, - "weight": 400, - "lineHeight": 64, - "letterSpacing": -0.25 - }, - "displayMedium": { - "size": 45, - "weight": 400, - "lineHeight": 52, - "letterSpacing": 0 - }, - "displaySmall": { - "size": 36, - "weight": 400, - "lineHeight": 44, - "letterSpacing": 0 - }, - "headlineMedium": { - "size": 28, - "weight": 400, - "lineHeight": 36, - "letterSpacing": 0 - }, - "headlineSmall": { - "size": 24, - "weight": 400, - "lineHeight": 32, - "letterSpacing": 0 - }, - "titleLarge": { - "size": 22, - "weight": 400, - "lineHeight": 28, - "letterSpacing": 0 - }, - "titleMedium": { - "size": 16, - "weight": 500, - "lineHeight": 24, - "letterSpacing": 0.15 - }, - "bodyLarge": { - "size": 16, - "weight": 400, - "lineHeight": 24, - "letterSpacing": 0.5 - }, - "bodyMedium": { - "size": 14, - "weight": 400, - "lineHeight": 20, - "letterSpacing": 0.25 - }, - "bodySmall": { - "size": 12, - "weight": 400, - "lineHeight": 16, - "letterSpacing": 0.4 - }, - "labelLarge": { - "size": 14, - "weight": 500, - "lineHeight": 20, - "letterSpacing": 0.1 - }, - "labelMedium": { - "size": 12, - "weight": 500, - "lineHeight": 16, - "letterSpacing": 0.5 - } - }, - "spacing": { - "none": 0, - "xs": 4, - "sm": 8, - "md": 16, - "lg": 24, - "xl": 32, - "xxl": 48 - }, - "radius": { - "none": 0, - "xs": 4, - "sm": 8, - "md": 12, - "lg": 16, - "xl": 28, - "full": 9999 - }, - "elevation": { - "level0": "none", - "level1": "0 1px 3px 1px rgba(0,0,0,0.15)", - "level2": "0 2px 6px 2px rgba(0,0,0,0.15)", - "level3": "0 4px 8px 3px rgba(0,0,0,0.15)" - }, - "screen": { - "width": 393, - "height": 852 - } - }, - "components": [ - { - "name": "NetWorthCard", - "type": "card", - "properties": { - "background": "primary", - "radius": "xl", - "padding": { - "horizontal": 24, - "vertical": 20 - }, - "elements": [ - {"type": "label", "text": "TOTAL NET WORTH", "style": "labelMedium", "color": "onPrimary"}, - {"type": "icon", "name": "visibility", "size": 24, "color": "onPrimary"}, - {"type": "text", "style": "displayMedium", "color": "onPrimary"}, - {"type": "text", "style": "bodyMedium", "color": "onPrimary", "opacity": 0.8}, - {"type": "row", "columns": ["Savings", "Loans", "Shares"]} - ] - } - }, - { - "name": "QuickActions", - "type": "row", - "properties": { - "itemCount": 4, - "gap": "sm", - "items": [ - {"icon": "send", "label": "Transfer"}, - {"icon": "download", "label": "Deposit"}, - {"icon": "trending_up", "label": "Invest"}, - {"icon": "people", "label": "Beneficiary"} - ] - } - }, - { - "name": "AccountCard", - "type": "card", - "properties": { - "background": "surface", - "radius": "md", - "elevation": "level1", - "padding": "md", - "elements": [ - {"type": "avatar", "size": 40, "background": "primaryContainer"}, - {"type": "column", "flex": 1, "children": [ - {"type": "text", "style": "titleMedium", "color": "onSurface"}, - {"type": "text", "style": "bodySmall", "color": "onSurfaceVariant"} - ]}, - {"type": "text", "style": "titleMedium", "color": "onSurface"} - ] - } - }, - { - "name": "TransactionItem", - "type": "listItem", - "properties": { - "height": 72, - "padding": {"vertical": 8, "horizontal": 0}, - "elements": [ - {"type": "indicator", "size": 40, "variants": { - "credit": {"background": "successContainer", "icon": "arrow_downward", "iconColor": "success"}, - "debit": {"background": "errorContainer", "icon": "arrow_upward", "iconColor": "error"} - }}, - {"type": "column", "flex": 1, "children": [ - {"type": "text", "style": "bodyLarge", "color": "onSurface"}, - {"type": "text", "style": "bodySmall", "color": "onSurfaceVariant"} - ]}, - {"type": "amount", "style": "titleMedium", "colorByType": true} - ] - } - }, - { - "name": "BottomNavigation", - "type": "navigation", - "properties": { - "height": 80, - "background": "surfaceContainer", - "items": [ - {"icon": "home", "label": "Home"}, - {"icon": "credit_card", "label": "Accounts"}, - {"icon": "send", "label": "Transfer"}, - {"icon": "bar_chart", "label": "Activity"}, - {"icon": "person", "label": "Profile"} - ], - "selectedIndicator": { - "background": "secondaryContainer", - "radius": "lg", - "width": 64, - "height": 32 - } - } - }, - { - "name": "TopBar", - "type": "appBar", - "properties": { - "height": 64, - "background": "surface", - "elements": [ - {"type": "navigation", "icon": "arrow_back", "optional": true}, - {"type": "title", "style": "titleLarge", "color": "onSurface"}, - {"type": "actions", "icons": ["notifications", "settings"]} - ] - } - }, - { - "name": "SectionHeader", - "type": "header", - "properties": { - "padding": {"top": "md", "bottom": "sm"}, - "elements": [ - {"type": "text", "style": "titleMedium", "color": "onSurface"}, - {"type": "link", "text": "View All →", "style": "labelMedium", "color": "primary"} - ] - } - } - ], - "screens": [ - { - "name": "DashboardScreen", - "route": "/dashboard", - "layout": "vertical", - "components": [ - "TopBar", - "Greeting", - "NetWorthCard", - "QuickActions", - "SectionHeader:MY ACCOUNTS", - "AccountCard:savings", - "AccountCard:loan", - "SectionHeader:RECENT ACTIVITY", - "TransactionItem:list", - "BottomNavigation" - ] - }, - { - "name": "AccountDetailScreen", - "route": "/account/:id", - "layout": "vertical", - "components": [ - "TopBar:back", - "BalanceHero", - "ActionButtons", - "AccountDetailsCard", - "TransactionsList", - "ChargesSection" - ] - }, - { - "name": "TransferScreen", - "route": "/transfer", - "layout": "vertical", - "components": [ - "TopBar:back", - "AccountSelector:from", - "TransferTypeToggle", - "BeneficiaryList", - "AmountInput", - "RemarksInput", - "ContinueButton" - ] - } - ] -} diff --git a/claude-product-cycle/design-spec-layer/features/dashboard/mockups/dummy/01-main-dashboard.png b/claude-product-cycle/design-spec-layer/features/dashboard/mockups/dummy/01-main-dashboard.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/dashboard/mockups/dummy/02-financial-overview.png b/claude-product-cycle/design-spec-layer/features/dashboard/mockups/dummy/02-financial-overview.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/dashboard/mockups/dummy/03-quick-actions-grid.png b/claude-product-cycle/design-spec-layer/features/dashboard/mockups/dummy/03-quick-actions-grid.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/dashboard/mockups/dummy/04-insights-card.png b/claude-product-cycle/design-spec-layer/features/dashboard/mockups/dummy/04-insights-card.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/dashboard/mockups/dummy/05-goals-tracker.png b/claude-product-cycle/design-spec-layer/features/dashboard/mockups/dummy/05-goals-tracker.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/dashboard/mockups/dummy/06-spending-chart.png b/claude-product-cycle/design-spec-layer/features/dashboard/mockups/dummy/06-spending-chart.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/dashboard/mockups/dummy/07-dashboard-empty.png b/claude-product-cycle/design-spec-layer/features/dashboard/mockups/dummy/07-dashboard-empty.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/guarantor/API.md b/claude-product-cycle/design-spec-layer/features/guarantor/API.md deleted file mode 100644 index 90978e62e..000000000 --- a/claude-product-cycle/design-spec-layer/features/guarantor/API.md +++ /dev/null @@ -1,388 +0,0 @@ -# Guarantor - API Reference - -## Base URL -`https://tt.mifos.community/fineract-provider/api/v1/self/` - ---- - -## Endpoints Required - -### 1. Get Guarantor Template - -**Endpoint**: `GET /loans/{loanId}/guarantors/template` - -**Description**: Fetch the template containing guarantor type options for creating a new guarantor - -**Path Parameters**: -| Parameter | Type | Description | -|-----------|------|-------------| -| loanId | Long | The loan account ID | - -**Response**: -```json -{ - "guarantorType": { - "id": 3, - "code": "guarantor.external", - "value": "External" - }, - "guarantorTypeOptions": [ - { - "id": 1, - "code": "guarantor.existing.customer", - "value": "Existing Customer" - }, - { - "id": 2, - "code": "guarantor.staff", - "value": "Staff Member" - }, - { - "id": 3, - "code": "guarantor.external", - "value": "External" - } - ] -} -``` - -**Kotlin DTO**: -```kotlin -@Serializable -data class GuarantorTemplatePayload( - val guarantorType: GuarantorType? = null, - val guarantorTypeOptions: ArrayList? = null, -) -``` - -**Status**: Implemented in GuarantorService - ---- - -### 2. Get Guarantor List - -**Endpoint**: `GET /loans/{loanId}/guarantors` - -**Description**: Fetch all guarantors associated with a loan account - -**Path Parameters**: -| Parameter | Type | Description | -|-----------|------|-------------| -| loanId | Long | The loan account ID | - -**Response**: -```json -[ - { - "id": 1, - "loanId": 101, - "firstname": "John", - "lastname": "Doe", - "city": "New York", - "guarantorType": { - "id": 3, - "code": "guarantor.external", - "value": "External" - }, - "joinedDate": [2023, 6, 15], - "status": true - }, - { - "id": 2, - "loanId": 101, - "firstname": "Emma", - "lastname": "Smith", - "city": "Los Angeles", - "guarantorType": { - "id": 3, - "code": "guarantor.external", - "value": "External" - }, - "joinedDate": [2023, 8, 20], - "status": true - } -] -``` - -**Kotlin DTO**: -```kotlin -@Serializable -@Parcelize -data class GuarantorPayload( - val id: Long? = 0, - val city: String? = null, - val lastname: String? = null, - val guarantorType: @RawValue GuarantorType? = null, - val firstname: String? = null, - val joinedDate: List? = null, - val loanId: Long? = null, - val status: Boolean? = true, -) : Parcelable -``` - -**Status**: Implemented in GuarantorService (currently using fake data) - ---- - -### 3. Create Guarantor - -**Endpoint**: `POST /loans/{loanId}/guarantors` - -**Description**: Add a new guarantor to a loan account - -**Path Parameters**: -| Parameter | Type | Description | -|-----------|------|-------------| -| loanId | Long | The loan account ID | - -**Request**: -```json -{ - "guarantorTypeId": 3, - "firstname": "Michael", - "lastname": "Brown", - "city": "Chicago" -} -``` - -**Kotlin DTO**: -```kotlin -data class GuarantorApplicationPayload( - @SerialName("guarantorTypeId") - val guarantorTypeId: Long? = null, - - @SerialName("firstname") - val firstName: String? = null, - - @SerialName("lastname") - val lastName: String? = null, - - @SerialName("city") - val city: String? = "", -) -``` - -**Response**: -```json -{ - "resourceId": 123, - "loanId": 101 -} -``` - -**Status**: Implemented in GuarantorService - ---- - -### 4. Update Guarantor - -**Endpoint**: `PUT /loans/{loanId}/guarantors/{guarantorId}` - -**Description**: Update an existing guarantor's information - -**Path Parameters**: -| Parameter | Type | Description | -|-----------|------|-------------| -| loanId | Long | The loan account ID | -| guarantorId | Long | The guarantor ID to update | - -**Request**: -```json -{ - "guarantorTypeId": 3, - "firstname": "Michael", - "lastname": "Brown Jr.", - "city": "San Francisco" -} -``` - -**Response**: -```json -{ - "resourceId": 123, - "changes": { - "lastname": "Brown Jr.", - "city": "San Francisco" - } -} -``` - -**Status**: Implemented in GuarantorService - ---- - -### 5. Delete Guarantor - -**Endpoint**: `DELETE /loans/{loanId}/guarantors/{guarantorId}` - -**Description**: Remove a guarantor from a loan account - -**Path Parameters**: -| Parameter | Type | Description | -|-----------|------|-------------| -| loanId | Long | The loan account ID | -| guarantorId | Long | The guarantor ID to delete | - -**Response**: -```json -{ - "resourceId": 123, - "loanId": 101 -} -``` - -**Status**: Implemented in GuarantorService - ---- - -## Kotlin DTOs - -### GuarantorType -```kotlin -@Serializable -@Parcelize -class GuarantorType( - val id: Long? = null, - val value: String? = null, - val code: String? = null, -) : Parcelable -``` - -### GuarantorPayload -```kotlin -@Serializable -@Parcelize -data class GuarantorPayload( - val id: Long? = 0, - val city: String? = null, - val lastname: String? = null, - val guarantorType: @RawValue GuarantorType? = null, - val firstname: String? = null, - val joinedDate: List? = null, - val loanId: Long? = null, - val status: Boolean? = true, -) : Parcelable -``` - -### GuarantorTemplatePayload -```kotlin -@Serializable -data class GuarantorTemplatePayload( - val guarantorType: GuarantorType? = null, - val guarantorTypeOptions: ArrayList? = null, -) -``` - -### GuarantorApplicationPayload -```kotlin -data class GuarantorApplicationPayload( - @SerialName("guarantorTypeId") - val guarantorTypeId: Long? = null, - - @SerialName("firstname") - val firstName: String? = null, - - @SerialName("lastname") - val lastName: String? = null, - - @SerialName("city") - val city: String? = "", -) -``` - ---- - -## API Summary - -| Endpoint | Method | Service | Repository | Status | -|----------|--------|---------|------------|--------| -| /loans/{loanId}/guarantors/template | GET | GuarantorService | GuarantorRepository | Implemented | -| /loans/{loanId}/guarantors | GET | GuarantorService | GuarantorRepository | Implemented (using fake data) | -| /loans/{loanId}/guarantors | POST | GuarantorService | GuarantorRepository | Implemented | -| /loans/{loanId}/guarantors/{guarantorId} | PUT | GuarantorService | GuarantorRepository | Implemented | -| /loans/{loanId}/guarantors/{guarantorId} | DELETE | GuarantorService | GuarantorRepository | Implemented | - ---- - -## Error Responses - -| Status Code | Error | Description | -|-------------|-------|-------------| -| 400 | Bad Request | Invalid payload or missing required fields | -| 401 | Unauthorized | User not authenticated | -| 403 | Forbidden | User does not have permission for this loan | -| 404 | Not Found | Loan or guarantor not found | -| 500 | Server Error | Internal server error | - ---- - -## Service Interface - -```kotlin -interface GuarantorService { - @GET("loans/{loanId}/guarantors/template") - fun getGuarantorTemplate(@Path("loanId") loanId: Long): Flow - - @GET("loans/{loanId}/guarantors") - fun getGuarantorList(@Path("loanId") loanId: Long): Flow> - - @POST("loans/{loanId}/guarantors") - suspend fun createGuarantor( - @Path("loanId") loanId: Long, - @Body payload: GuarantorApplicationPayload?, - ): HttpResponse - - @PUT("loans/{loanId}/guarantors/{guarantorId}") - suspend fun updateGuarantor( - @Body payload: GuarantorApplicationPayload?, - @Path("loanId") loanId: Long, - @Path("guarantorId") guarantorId: Long, - ): HttpResponse - - @DELETE("loans/{loanId}/guarantors/{guarantorId}") - suspend fun deleteGuarantor( - @Path("loanId") loanId: Long, - @Path("guarantorId") guarantorId: Long, - ): HttpResponse -} -``` - ---- - -## Repository Interface - -```kotlin -interface GuarantorRepository { - fun getGuarantorTemplate(loanId: Long?): Flow> - - suspend fun createGuarantor( - loanId: Long?, - payload: GuarantorApplicationPayload?, - ): DataState - - suspend fun updateGuarantor( - payload: GuarantorApplicationPayload?, - loanId: Long?, - guarantorId: Long?, - ): DataState - - suspend fun deleteGuarantor(loanId: Long?, guarantorId: Long?): DataState - - fun getGuarantorList(loanId: Long): Flow?>> -} -``` - ---- - -## Notes - -1. **Fake Data Source**: The `getGuarantorList` endpoint currently returns fake demo data in `GuarantorRepositoryImp` as the real API is commented out. - -2. **Ktorfit Integration**: The service uses Ktorfit annotations for HTTP client integration with Ktor. - -3. **DataState Pattern**: All repository methods wrap responses in `DataState` for consistent error handling: - - `DataState.Success` - Successful response with data - - `DataState.Error` - Error with exception and message - - `DataState.Loading` - Loading state - -4. **Flow-based API**: GET endpoints return `Flow` for reactive data handling. diff --git a/claude-product-cycle/design-spec-layer/features/guarantor/MOCKUP.md b/claude-product-cycle/design-spec-layer/features/guarantor/MOCKUP.md deleted file mode 100644 index a1c8b0a71..000000000 --- a/claude-product-cycle/design-spec-layer/features/guarantor/MOCKUP.md +++ /dev/null @@ -1,1736 +0,0 @@ -# Guarantor - UI Mockups v2.0 - -> **Design Pattern**: Trust Network Hub -> **Design Style**: 2025 Fintech (Trust Visualization + Social Proof) -> **Gradient Theme**: Primary Purple-Blue (#667EEA → #764BA2) -> **Version**: 2.0 - Major redesign with trust network patterns -> **Last Updated**: 2025-12-30 - ---- - -## Design Philosophy - -The Guarantor feature transforms from a simple list into a **Trust Network Hub** - a visualization of the user's financial support network that gamifies trust-building and provides social proof. Key innovations: - -1. **Trust Network Graph** - Visual representation of guarantor connections -2. **Trust Score System** - Gamified scoring for guarantee coverage -3. **Verification Badges** - Multi-level trust indicators -4. **Smart Suggestions** - AI-recommended guarantors from contacts -5. **Real-time Tracking** - Live guarantee approval status - ---- - -## Table of Contents - -1. [Screen States](#screen-states) -2. [Component Breakdown](#component-breakdown) -3. [Interactions & Animations](#interactions--animations) -4. [Accessibility](#accessibility) -5. [Dark Mode Variant](#dark-mode-variant) - ---- - -## Screen States - -### 1. Trust Network Hub (Main Screen) - -The central hub showing the trust network with visual guarantee coverage. - -``` -+----------------------------------------------------------+ -| | -| [Status Bar - System] 9:41 AM | -| | -+----------------------------------------------------------+ -| | -| [← Back] Trust Network [History] | -| Loan #12345 | -| | -+----------------------------------------------------------+ -| | -| ╔════════════════════════════════════════════════════╗| -| ║ GUARANTEE COVERAGE ║| -| ║ ║| -| ║ ┌─────────────────┐ ║| -| ║ │ │ ║| -| ║ │ 85% │ Trust Score: ║| -| ║ │ ─────────── │ ★★★★☆ ║| -| ║ │ COVERED │ "Strong" ║| -| ║ │ │ ║| -| ║ │ [Circular │ ║| -| ║ │ Progress │ ║| -| ║ │ Ring] │ ║| -| ║ │ │ ║| -| ║ └─────────────────┘ ║| -| ║ ║| -| ║ $8,500 of $10,000 guaranteed ║| -| ║ ──────────────────────────── ║| -| ║ [████████████████░░░░] Need $1,500 more ║| -| ║ ║| -| ╚════════════════════════════════════════════════════╝| -| | -| Coverage Card: | -| Background: Gradient #667EEA → #764BA2 | -| Ring: White stroke, animated fill | -| Text: White | -| Shadow: 0 8 24 #667EEA@40% | -| | -| | -| ┌──────────────────┐ ┌──────────────────┐ | -| │ │ │ │ | -| │ + Add Guarantor │ │ ✨ AI Suggest │ | -| │ │ │ │ | -| └──────────────────┘ └──────────────────┘ | -| | -| Quick Action Buttons: | -| Height: 48dp | -| Left: Primary outline Right: Secondary gradient | -| Corner: 24dp (pill) | -| Icon + Text | -| | -| | -| YOUR TRUST NETWORK | -| ───────────────────── | -| 3 guarantors • 2 verified | -| | -| | -| ┌────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌──────┐ │ | -| │ │ JD ✓ │ John Doe [$5,000] │ | -| │ │ │ ──────────── │ | -| │ └──────┘ External • Verified │ | -| │ ★★★★★ Trust Level │ | -| │ │ | -| │ [███████████████████████████████] 100% │ | -| │ > │ | -| │ │ | -| │ ┌──────────────────────────────────────┐ │ | -| │ │ ✓ ACTIVE Since Dec 15, 2025 │ │ | -| │ └──────────────────────────────────────┘ │ | -| │ │ | -| └────────────────────────────────────────────────┘ | -| | -| Guarantor Card: | -| Background: #FFFFFF | -| Shadow: 0 2 8 rgba(0,0,0,0.08) | -| Corner: 20dp | -| Verified Badge: Blue checkmark | -| Status Chip: Green #00D09C | -| 12dp spacing | -| | -| ┌────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌──────┐ │ | -| │ │ SW │ Sarah Wilson [$2,500] │ | -| │ │ │ ──────────── │ | -| │ └──────┘ Self • Verified │ | -| │ ★★★★☆ Trust Level │ | -| │ │ | -| │ [████████████████░░░░░░░░░░░░░░░] 50% │ | -| │ > │ | -| │ │ | -| │ ┌──────────────────────────────────────┐ │ | -| │ │ ✓ ACTIVE Since Dec 20, 2025 │ │ | -| │ └──────────────────────────────────────┘ │ | -| │ │ | -| └────────────────────────────────────────────────┘ | -| 12dp spacing | -| | -| ┌────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌──────┐ │ | -| │ │ MB │ Michael Brown [$1,000] │ | -| │ │ ◷ │ ────────────── │ | -| │ └──────┘ External • Pending │ | -| │ ★★★☆☆ Trust Level │ | -| │ │ | -| │ [████████░░░░░░░░░░░░░░░░░░░░░░░] 20% │ | -| │ > │ | -| │ │ | -| │ ┌──────────────────────────────────────┐ │ | -| │ │ ◷ PENDING Awaiting confirmation │ │ | -| │ └──────────────────────────────────────┘ │ | -| │ │ | -| └────────────────────────────────────────────────┘ | -| | -| Pending Card: | -| Border: 1dp dashed #FFB800 | -| Status Chip: Orange #FFB800 | -| Avatar: Pulse animation | -| | -+----------------------------------------------------------+ -``` - -**Coverage Ring Animation:** -``` -┌─────────────────────────────────────────────────────────┐ -│ COVERAGE RING COMPONENT │ -├─────────────────────────────────────────────────────────┤ -│ │ -│ ╭────────────────────╮ │ -│ ╱ ╲ │ -│ │ │ │ -│ │ ┌──────┐ │ Outer Ring: │ -│ │ │ 85% │ │ Stroke: 12dp │ -│ │ │ │ │ Track: White@20% │ -│ │ │ ✓ │ │ Fill: White │ -│ │ └──────┘ │ │ -│ │ │ Center: │ -│ ╲ ╱ Percentage: 48sp │ -│ ╰────────────────────╯ Label: 14sp │ -│ │ -│ Animation: Fill animates from 0 → 85% in 1.2s │ -│ Easing: Spring (damping=0.8, stiffness=400) │ -│ │ -└─────────────────────────────────────────────────────────┘ -``` - ---- - -### 2. Trust Network Visualization (Premium) - -Optional network graph view showing guarantor relationships. - -``` -+----------------------------------------------------------+ -| | -| [Status Bar] | -| | -+----------------------------------------------------------+ -| | -| [← Back] Trust Network [List ≡] | -| | -+----------------------------------------------------------+ -| | -| ╔════════════════════════════════════════════════════╗| -| ║ ║| -| ║ [JD] ║| -| ║ ╱ ╲ ║| -| ║ ╱ ╲ ║| -| ║ ╱ ╲ ║| -| ║ [YOU]───────[SW] ║| -| ║ ╲ ╱ ║| -| ║ ╲ ╱ ║| -| ║ ╲ ╱ ║| -| ║ [MB] ║| -| ║ ◷ ║| -| ║ ║| -| ╚════════════════════════════════════════════════════╝| -| | -| Network Graph: | -| Your Node: Gradient ring | -| Active: Green ring #00D09C | -| Pending: Orange pulsing ring #FFB800 | -| Lines: Gradient strokes | -| Tap node for details | -| | -| | -| NETWORK STRENGTH | -| ───────────────── | -| | -| ┌────────────────────────────────────────────────┐ | -| │ │ | -| │ 🛡️ Network Trust Score │ | -| │ │ | -| │ [ 78 ] │ | -| │ ─────────── │ | -| │ STRONG │ | -| │ │ | -| │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ | -| │ │ Coverage │ │ Verified │ │ Diversity│ │ | -| │ │ 85% │ │ 67% │ │ 3 │ │ | -| │ │ ★★★★★ │ │ ★★★★☆ │ │ ★★★☆☆ │ │ | -| │ └──────────┘ └──────────┘ └──────────┘ │ | -| │ │ | -| │ +10 points for adding verified guarantor │ | -| │ │ | -| └────────────────────────────────────────────────┘ | -| | -+----------------------------------------------------------+ -``` - ---- - -### 3. AI Suggested Guarantors - -Smart recommendations based on contacts and history. - -``` -+----------------------------------------------------------+ -| | -| [Status Bar] | -| | -+----------------------------------------------------------+ -| | -| [× Close] AI Suggestions | -| | -+----------------------------------------------------------+ -| | -| ┌────────────────────────────────────────────────┐ | -| │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ | -| │░░ ░░│ | -| │░░ ✨ Smart Suggestions ░░│ | -| │░░ ░░│ | -| │░░ Based on your contacts and loan needs ░░│ | -| │░░ ░░│ | -| │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ | -| └────────────────────────────────────────────────┘ | -| | -| Header Card: Gradient #667EEA → #764BA2 | -| | -| | -| RECOMMENDED FOR YOU | -| ─────────────────── | -| Based on contact analysis | -| | -| | -| ┌────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌──────┐ [INVITE] │ | -| │ │ RC ✓ │ Robert Chen │ | -| │ │ │ ──────────── │ | -| │ └──────┘ From Contacts • High Trust │ | -| │ │ | -| │ ┌────────────────────────────────────────┐ │ | -| │ │ 🔥 95% match • Previously guaranteed │ │ | -| │ └────────────────────────────────────────┘ │ | -| │ │ | -| │ "Guaranteed 3 loans successfully" │ | -| │ │ | -| └────────────────────────────────────────────────┘ | -| | -| Match Badge: | -| Background: #00D09C@10% | -| Icon: Fire emoji | -| Text: #00D09C | -| 12dp spacing | -| | -| ┌────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌──────┐ [INVITE] │ | -| │ │ EW │ Emma Watson │ | -| │ │ │ ──────────── │ | -| │ └──────┘ From Contacts • Medium Trust │ | -| │ │ | -| │ ┌────────────────────────────────────────┐ │ | -| │ │ ⭐ 78% match • Family connection │ │ | -| │ └────────────────────────────────────────┘ │ | -| │ │ | -| │ "New to guaranteeing" │ | -| │ │ | -| └────────────────────────────────────────────────┘ | -| 12dp spacing | -| | -| ┌────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌──────┐ [INVITE] │ | -| │ │ DL │ David Lee │ | -| │ │ │ ──────────── │ | -| │ └──────┘ From Contacts │ | -| │ │ | -| │ ┌────────────────────────────────────────┐ │ | -| │ │ 📊 65% match • Work colleague │ │ | -| │ └────────────────────────────────────────┘ │ | -| │ │ | -| └────────────────────────────────────────────────┘ | -| | -| | -| ┌────────────────────────────────────────────────┐ | -| │ Can't find the right person? │ | -| │ │ | -| │ ┌────────────────────────────────────────┐ │ | -| │ │ + Add External Guarantor Manually │ │ | -| │ └────────────────────────────────────────┘ │ | -| └────────────────────────────────────────────────┘ | -| | -+----------------------------------------------------------+ -``` - ---- - -### 4. Guarantor Detail Screen (Enhanced) - -``` -+----------------------------------------------------------+ -| | -| [Status Bar] | -| | -+----------------------------------------------------------+ -| | -| [← Back] [⋮ More] | -| | -+----------------------------------------------------------+ -| | -| ╔════════════════════════════════════════════════════╗| -| ║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║| -| ║░░ ░░░░║| -| ║░░ ┌──────────────────┐ ░░░░║| -| ║░░ │ │ ░░░░║| -| ║░░ │ JD │ Avatar ░░░░║| -| ║░░ │ │ 96dp ░░░░║| -| ║░░ │ ✓ ✓ │ Verified ░░░░║| -| ║░░ │ (Double check) │ Rings ░░░░║| -| ║░░ │ │ ░░░░║| -| ║░░ └──────────────────┘ ░░░░║| -| ║░░ ░░░░║| -| ║░░ John Doe ░░░░║| -| ║░░ ─────────────── ░░░░║| -| ║░░ External Guarantor ░░░░║| -| ║░░ ░░░░║| -| ║░░ ┌──────────────────────────────┐ ░░░░║| -| ║░░ │ ✓ ACTIVE ★★★★★ Trust │ ░░░░║| -| ║░░ └──────────────────────────────┘ ░░░░║| -| ║░░ ░░░░║| -| ║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║| -| ╚════════════════════════════════════════════════════╝| -| | -| Header: Gradient #667EEA → #764BA2 | -| Avatar: White border 4dp | -| Verified: Double green checkmarks | -| | -| | -| GUARANTEE CONTRIBUTION | -| ────────────────────── | -| | -| ┌────────────────────────────────────────────────┐ | -| │ │ | -| │ $ 5,000.00 │ | -| │ ═══════════ │ | -| │ 36sp / Bold │ | -| │ │ | -| │ ┌─────────────────────────────────────────┐ │ | -| │ │████████████████████████████████████████│ │ | -| │ └─────────────────────────────────────────┘ │ | -| │ 50% of total loan amount │ | -| │ │ | -| │ ┌───────────────┐ ┌───────────────┐ │ | -| │ │ 📊 Rank #1 │ │ 🏆 Top Backer │ │ | -| │ │ of 3 │ │ │ │ | -| │ └───────────────┘ └───────────────┘ │ | -| │ │ | -| └────────────────────────────────────────────────┘ | -| | -| Rank Badge: | -| Background: #667EEA@10% | -| Text: #667EEA | -| | -| | -| TRUST VERIFICATION | -| ────────────────── | -| | -| ┌────────────────────────────────────────────────┐ | -| │ │ | -| │ ✓ Identity Verified Dec 10, 2025 │ | -| │ Via government ID │ | -| │ ───────────────────────────────────────── │ | -| │ ✓ Phone Verified Dec 10, 2025 │ | -| │ +1 *** *** 4567 │ | -| │ ───────────────────────────────────────── │ | -| │ ✓ Email Verified Dec 10, 2025 │ | -| │ j***@email.com │ | -| │ ───────────────────────────────────────── │ | -| │ ✓ Address Verified Dec 12, 2025 │ | -| │ New York, NY │ | -| │ │ | -| └────────────────────────────────────────────────┘ | -| | -| Verification Row: | -| Check: #00D09C | -| Date: #9CA3AF | -| Divider: #E1E4E8 | -| | -| | -| GUARANTEE HISTORY | -| ───────────────── | -| | -| ┌────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌────────────────────────────────────────┐ │ | -| │ │ 🟢 Activated │ │ | -| │ │ Dec 15, 2025 at 3:45 PM │ │ | -| │ │ Guarantee became active │ │ | -| │ └────────────────────────────────────────┘ │ | -| │ │ │ | -| │ │ Timeline │ | -| │ │ Line │ | -| │ │ │ | -| │ ┌────────────────────────────────────────┐ │ | -| │ │ 🟡 Confirmed │ │ | -| │ │ Dec 12, 2025 at 10:30 AM │ │ | -| │ │ Guarantor confirmed participation │ │ | -| │ └────────────────────────────────────────┘ │ | -| │ │ │ | -| │ ┌────────────────────────────────────────┐ │ | -| │ │ 🔵 Invited │ │ | -| │ │ Dec 10, 2025 at 2:15 PM │ │ | -| │ │ Invitation sent via SMS │ │ | -| │ └────────────────────────────────────────┘ │ | -| │ │ | -| └────────────────────────────────────────────────┘ | -| | -| Timeline: | -| Line: 2dp #E1E4E8 | -| Dots: Color-coded by status | -| Green: Active | Yellow: Confirmed | Blue: Invited | -| | -| | -| ┌────────────────────────────────────────────────┐ | -| │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ | -| │░░ ░░│ | -| │░░ Contact Guarantor ░░│ | -| │░░ ░░│ | -| │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ | -| └────────────────────────────────────────────────┘ | -| | -| Edit Details | -| ──────────── | -| | -+----------------------------------------------------------+ -``` - ---- - -### 5. Add Guarantor Flow - Step 1: Choose Type - -``` -+----------------------------------------------------------+ -| | -| [Status Bar] | -| | -+----------------------------------------------------------+ -| | -| [× Cancel] Add Guarantor Step 1 of 3 | -| | -+----------------------------------------------------------+ -| | -| ╔════════════════════════════════════════════════════╗| -| ║ PROGRESS ║| -| ║ [●━━━━━━━━━━━○━━━━━━━━━━━○] ║| -| ║ Type Details Amount ║| -| ╚════════════════════════════════════════════════════╝| -| | -| | -| Who will back your loan? | -| ──────────────────────── | -| 24sp / Bold | -| | -| Choose how to add your guarantor | -| ──────────────────────────────── | -| 14sp / Secondary | -| | -| | -| ┌────────────────────────────────────────────────┐ | -| │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ | -| │░░ ░░│ | -| │░░ ┌──────┐ ░░│ | -| │░░ │ 👤 + │ From Your Contacts ░░│ | -| │░░ │ │ ────────────────── ░░│ | -| │░░ └──────┘ Quick invite via phone or email░░│ | -| │░░ ░░│ | -| │░░ ┌───────────────────────────────────────┐░░│ | -| │░░ │ ✨ 95% success rate for contacts │░░│ | -| │░░ └───────────────────────────────────────┘░░│ | -| │░░ (*) ░░│ | -| │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ | -| └────────────────────────────────────────────────┘ | -| | -| Selected Card: | -| Background: Gradient @8% opacity | -| Border: 2dp Gradient #667EEA → #764BA2 | -| Radio: Gradient filled | -| 16dp spacing | -| | -| ┌────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌──────┐ │ | -| │ │ 🔍 │ Existing Mifos Client │ | -| │ │ │ ───────────────────── │ | -| │ └──────┘ Search registered users │ | -| │ │ | -| │ ┌───────────────────────────────────────┐ │ | -| │ │ 🔒 Already verified in our system │ │ | -| │ └───────────────────────────────────────┘ │ | -| │ ( ) │ | -| │ │ | -| └────────────────────────────────────────────────┘ | -| 16dp spacing | -| | -| ┌────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌──────┐ │ | -| │ │ ✏️ │ External Person │ | -| │ │ │ ─────────────── │ | -| │ └──────┘ Enter details manually │ | -| │ │ | -| │ ┌───────────────────────────────────────┐ │ | -| │ │ 📝 Requires manual verification │ │ | -| │ └───────────────────────────────────────┘ │ | -| │ ( ) │ | -| │ │ | -| └────────────────────────────────────────────────┘ | -| | -| | -| ┌────────────────────────────────────────────────┐ | -| │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ | -| │░░ ░░│ | -| │░░ Continue ░░│ | -| │░░ ░░│ | -| │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ | -| └────────────────────────────────────────────────┘ | -| | -+----------------------------------------------------------+ -``` - ---- - -### 6. Add Guarantor - Step 2: Contact Selection - -``` -+----------------------------------------------------------+ -| | -| [Status Bar] | -| | -+----------------------------------------------------------+ -| | -| [← Back] Add Guarantor Step 2 of 3 | -| | -+----------------------------------------------------------+ -| | -| ╔════════════════════════════════════════════════════╗| -| ║ [●━━━━━━━━━━━●━━━━━━━━━━━○] ║| -| ║ Type Details Amount ║| -| ╚════════════════════════════════════════════════════╝| -| | -| | -| ┌────────────────────────────────────────────────┐ | -| │ 🔍 Search contacts... │ | -| │ │ | -| └────────────────────────────────────────────────┘ | -| | -| Search Field: | -| Background: #F8F9FA | -| Border: 1dp #E1E4E8 | -| Icon: #9CA3AF | -| Corner: 12dp | -| | -| | -| ✨ SUGGESTED | -| ───────────── | -| | -| ┌────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌──────┐ │ | -| │ │ RC ✓ │ Robert Chen │ | -| │ │ │ +1 (555) 234-5678 │ | -| │ └──────┘ │ | -| │ │ | -| │ ┌──────────────────────────────────────┐ │ | -| │ │ 🔥 95% match • Previous guarantor │ │ | -| │ └──────────────────────────────────────┘ │ | -| │ │ | -| └────────────────────────────────────────────────┘ | -| | -| | -| ALL CONTACTS | -| ──────────── | -| | -| A | -| ┌────────────────────────────────────────────────┐ | -| │ ┌──────┐ Alice Anderson │ | -| │ │ AA │ +1 (555) 111-2222 │ | -| │ └──────┘ │ | -| └────────────────────────────────────────────────┘ | -| | -| ┌────────────────────────────────────────────────┐ | -| │ ┌──────┐ Andrew Brown │ | -| │ │ AB │ +1 (555) 333-4444 │ | -| │ └──────┘ │ | -| └────────────────────────────────────────────────┘ | -| | -| B | -| ┌────────────────────────────────────────────────┐ | -| │ ┌──────┐ Bob Carter │ | -| │ │ BC │ +1 (555) 555-6666 │ | -| │ └──────┘ │ | -| └────────────────────────────────────────────────┘ | -| | -| ... | -| | -+----------------------------------------------------------+ -``` - ---- - -### 7. Add Guarantor - Step 3: Amount & Confirm - -``` -+----------------------------------------------------------+ -| | -| [Status Bar] | -| | -+----------------------------------------------------------+ -| | -| [← Back] Add Guarantor Step 3 of 3 | -| | -+----------------------------------------------------------+ -| | -| ╔════════════════════════════════════════════════════╗| -| ║ [●━━━━━━━━━━━●━━━━━━━━━━━●] ✓ Complete! ║| -| ║ Type Details Amount ║| -| ╚════════════════════════════════════════════════════╝| -| | -| | -| ┌────────────────────────────────────────────────┐ | -| │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ | -| │░░ ░░│ | -| │░░ ┌──────┐ ░░│ | -| │░░ │ RC ✓ │ Robert Chen ░░│ | -| │░░ │ │ +1 (555) 234-5678 ░░│ | -| │░░ └──────┘ ░░│ | -| │░░ ░░│ | -| │░░ Will be invited via SMS ░░│ | -| │░░ ░░│ | -| │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ | -| └────────────────────────────────────────────────┘ | -| | -| Summary Card: Gradient @10% opacity | -| | -| | -| GUARANTEE AMOUNT | -| ──────────────── | -| | -| ┌────────────────────────────────────────────────┐ | -| │ │ | -| │ $ 2,500 │ | -| │ ═══════════ │ | -| │ 48sp / Bold │ | -| │ │ | -| │ ┌──────┐ ┌──────┐ ┌───────┐ ┌───────┐ │ | -| │ │ +500 │ │+1000 │ │ +2500 │ │ MAX │ │ | -| │ └──────┘ └──────┘ └───────┘ └───────┘ │ | -| │ │ | -| │ Quick Chips: Outlined, selected = filled │ | -| │ │ | -| └────────────────────────────────────────────────┘ | -| | -| | -| COVERAGE IMPACT | -| ─────────────── | -| | -| ┌────────────────────────────────────────────────┐ | -| │ │ | -| │ BEFORE AFTER │ | -| │ │ | -| │ ┌─────┐ ┌─────┐ │ | -| │ │ 60% │ → │ 85% │ │ | -| │ │ │ │ │ │ | -| │ └─────┘ └─────┘ │ | -| │ │ | -| │ $6,000 $8,500 │ | -| │ covered covered │ | -| │ │ | -| │ ┌──────────────────────────────────────┐ │ | -| │ │ 🎯 +25% coverage with this guarantor│ │ | -| │ └──────────────────────────────────────┘ │ | -| │ │ | -| └────────────────────────────────────────────────┘ | -| | -| Impact Card: | -| Before ring: Gray stroke | -| After ring: Green stroke #00D09C | -| Arrow: Animated pulse | -| | -| | -| ┌────────────────────────────────────────────────┐ | -| │ │ | -| │ 📄 Linked to: Personal Loan #00012345 │ | -| │ Principal: $10,000.00 │ | -| │ │ | -| └────────────────────────────────────────────────┘ | -| | -| | -| ┌────────────────────────────────────────────────┐ | -| │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ | -| │░░ ░░│ | -| │░░ Send Invitation ✨ ░░│ | -| │░░ ░░│ | -| │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ | -| └────────────────────────────────────────────────┘ | -| | -| 🔒 Invitation secured with end-to-end encryption | -| | -+----------------------------------------------------------+ -``` - ---- - -### 8. Invitation Sent Success - -``` -+----------------------------------------------------------+ -| | -| [Status Bar] | -| | -+----------------------------------------------------------+ -| | -| | -| | -| | -| ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ | -| ░ ░ | -| ░ ┌──────────────────────┐ ░ | -| ░ │░░░░░░░░░░░░░░░░░░░░░░│ ░ Success | -| ░ │░░ ░░│ ░ Circle | -| ░ │░░ [ ✓ CHECK ] ░░│ ░ + Check | -| ░ │░░ ICON ░░│ ░ Draw | -| ░ │░░ 80x80 ░░│ ░ | -| ░ │░░ ░░│ ░ #00D09C| -| ░ │░░ Draw Animation ░░│ ░ → | -| ░ │░░ ░░│ ░ #38EF7D| -| ░ │░░░░░░░░░░░░░░░░░░░░░░│ ░ | -| ░ └──────────────────────┘ ░ | -| ░ ░ | -| ░ [ CONFETTI BURST ] ░ | -| ░ ░ | -| ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ | -| | -| | -| Invitation Sent! 🎉 | -| ──────────────────── | -| 28sp / Bold / #00D09C | -| | -| | -| Robert Chen will receive an SMS with | -| instructions to accept your invitation | -| ────────────────────────────────────── | -| 14sp / Regular / #6B7280 | -| | -| | -| ┌────────────────────────────────────────────────┐ | -| │ │ | -| │ ⏱️ What happens next: │ | -| │ │ | -| │ 1. Robert receives SMS invitation │ | -| │ 2. They verify their identity │ | -| │ 3. You get notified when confirmed │ | -| │ │ | -| │ Average confirmation time: 24 hours │ | -| │ │ | -| └────────────────────────────────────────────────┘ | -| | -| | -| ┌────────────────────────────────────────────────┐ | -| │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ | -| │░░ ░░│ | -| │░░ View Trust Network ░░│ | -| │░░ ░░│ | -| │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ | -| └────────────────────────────────────────────────┘ | -| | -| + Add Another Guarantor | -| ─────────────────────── | -| | -+----------------------------------------------------------+ -``` - ---- - -### 9. Empty State - Build Your Trust Network - -``` -+----------------------------------------------------------+ -| | -| [Status Bar] | -| | -+----------------------------------------------------------+ -| | -| [← Back] Trust Network [Help ?] | -| Loan #12345 | -| | -+----------------------------------------------------------+ -| | -| ╔════════════════════════════════════════════════════╗| -| ║ GUARANTEE COVERAGE ║| -| ║ ║| -| ║ ┌─────────────────┐ ║| -| ║ │ │ ║| -| ║ │ 0% │ ║| -| ║ │ ─────────── │ ║| -| ║ │ NOT STARTED │ ║| -| ║ │ │ ║| -| ║ └─────────────────┘ ║| -| ║ ║| -| ║ $0 of $10,000 guaranteed ║| -| ║ ║| -| ╚════════════════════════════════════════════════════╝| -| | -| | -| | -| ┌──────────────────────────────────┐ | -| │ │ | -| │ ┌──────────┐ │ | -| │ │ 🛡️ + 👥 │ │ | -| │ │ │ │ | -| │ │ Trust │ │ | -| │ │ Shield │ │ | -| │ │ │ │ | -| │ └──────────┘ │ | -| │ │ | -| └──────────────────────────────────┘ | -| | -| | -| Build Your Trust Network | -| ──────────────────────── | -| 24sp / Bold | -| | -| Add guarantors to secure your loan and | -| unlock better terms. The stronger your | -| network, the better your rates. | -| ───────────────────────────────────── | -| 14sp / Regular / Center / #6B7280 | -| | -| | -| ┌────────────────────────────────────────────────┐ | -| │ │ | -| │ 🎁 UNLOCK BENEFIT │ | -| │ │ | -| │ Reach 100% coverage to unlock: │ | -| │ • Lower interest rate (-0.5%) │ | -| │ • Faster approval │ | -| │ • Trust Network badge │ | -| │ │ | -| └────────────────────────────────────────────────┘ | -| | -| | -| ┌────────────────────────────────────────────────┐ | -| │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ | -| │░░ ░░│ | -| │░░ + Add First Guarantor ░░│ | -| │░░ ░░│ | -| │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ | -| └────────────────────────────────────────────────┘ | -| | -| ✨ Get AI Suggestions | -| | -+----------------------------------------------------------+ -``` - ---- - -### 10. Delete Confirmation (Enhanced) - -``` -+----------------------------------------------------------+ -| | -| [Dimmed Background - 60% Black] | -| | -| | -| | -| ╔════════════════════════════════════════════════════╗| -| ║ ║| -| ║ ┌────────────────────┐ ║| -| ║ │ │ ║| -| ║ │ [⚠️ Warning] │ Red tinted ║| -| ║ │ Icon │ circle ║| -| ║ │ 64dp │ #FF4757@15% ║| -| ║ │ │ ║| -| ║ └────────────────────┘ ║| -| ║ ║| -| ║ Remove Guarantor? ║| -| ║ ───────────────── ║| -| ║ 20sp / Bold ║| -| ║ ║| -| ║ ║| -| ║ Are you sure you want to remove John Doe ║| -| ║ from your trust network? This will: ║| -| ║ ║| -| ║ • Reduce coverage by 50% ║| -| ║ • Lower trust score by 25 points ║| -| ║ • May affect loan terms ║| -| ║ ║| -| ║ ║| -| ║ ┌────────────────────────────────────────────┐ ║| -| ║ │ │ ║| -| ║ │ Cancel │ ║| -| ║ │ │ ║| -| ║ └────────────────────────────────────────────┘ ║| -| ║ ║| -| ║ Cancel: Outlined #667EEA ║| -| ║ ║| -| ║ ┌────────────────────────────────────────────┐ ║| -| ║ │XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX│ ║| -| ║ │XX XX│ ║| -| ║ │XX Remove Guarantor XX│ ║| -| ║ │XX XX│ ║| -| ║ │XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX│ ║| -| ║ └────────────────────────────────────────────┘ ║| -| ║ ║| -| ║ Remove: Filled #FF4757 ║| -| ║ ║| -| ╚════════════════════════════════════════════════════╝| -| | -| Dialog: | -| Background: #FFFFFF | -| Corner: 24dp | -| Shadow: 0 16 48 rgba(0,0,0,0.25) | -| Padding: 24dp | -| | -+----------------------------------------------------------+ -``` - ---- - -## Component Breakdown - -### Coverage Ring Component - -``` -┌─────────────────────────────────────────────────────────────┐ -│ COVERAGE RING COMPONENT │ -├─────────────────────────────────────────────────────────────┤ -│ │ -│ VISUAL STRUCTURE │ -│ ═══════════════════════════════════════════════════════ │ -│ │ -│ ╭─────────────────────────────╮ │ -│ ╱ ╲ │ -│ │ ╭───────────────╮ │ │ -│ │ ╱ ╲ │ Outer: Track │ -│ │ │ │ │ Inner: Progress │ -│ │ │ [ PERCENT ] │ │ │ -│ │ │ [ LABEL ] │ │ Ring: 120dp │ -│ │ │ [ STARS ] │ │ Stroke: 12dp │ -│ │ ╲ ╱ │ │ -│ │ ╰───────────────╯ │ │ -│ ╲ ╱ │ -│ ╰─────────────────────────────╯ │ -│ │ -│ Props: │ -│ ───────────────────────────────────────────────────────── │ -│ • progress: Float (0.0 - 1.0) │ -│ • label: String ("COVERED", "NOT STARTED") │ -│ • trustLevel: TrustLevel (None, Low, Medium, Strong, Full) │ -│ • animated: Boolean = true │ -│ │ -│ Trust Level Stars: │ -│ ───────────────────────────────────────────────────────── │ -│ • None (0%): ☆☆☆☆☆ │ -│ • Low (1-25%): ★☆☆☆☆ │ -│ • Medium (26-50%): ★★☆☆☆ │ -│ • Good (51-75%): ★★★☆☆ │ -│ • Strong (76-99%): ★★★★☆ │ -│ • Full (100%): ★★★★★ │ -│ │ -│ Colors by Progress: │ -│ ───────────────────────────────────────────────────────── │ -│ • 0%: #6B7280 (Gray) │ -│ • 1-50%: #FFB800 (Yellow) │ -│ • 51-75%: #667EEA (Blue) │ -│ • 76-99%: #00D09C (Green) │ -│ • 100%: Gradient #00D09C → #38EF7D + Glow │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - -### Trust Card Component - -``` -┌─────────────────────────────────────────────────────────────┐ -│ TRUST CARD COMPONENT (Guarantor Card) │ -├─────────────────────────────────────────────────────────────┤ -│ │ -│ ┌───────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌──────┐ [$5,000] │ │ -│ │ │ JD ✓ │ Name ───────── │ │ -│ │ │ │ ───────────────── │ │ -│ │ └──────┘ Type • Verification Status │ │ -│ │ ★★★★★ Trust Level │ │ -│ │ │ │ -│ │ [████████████████████████████████████] 100% │ │ -│ │ > │ │ -│ │ │ │ -│ │ ┌────────────────────────────────────────────────┐ │ │ -│ │ │ ✓ STATUS Additional Info │ │ │ -│ │ └────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ └───────────────────────────────────────────────────────┘ │ -│ │ -│ Props: │ -│ ───────────────────────────────────────────────────────── │ -│ • guarantor: Guarantor │ -│ • onClick: () -> Unit │ -│ • onLongClick: () -> Unit │ -│ │ -│ Dimensions: │ -│ ───────────────────────────────────────────────────────── │ -│ • Corner: 20dp │ -│ • Padding: 16dp │ -│ • Avatar: 48dp with 2dp verified ring │ -│ • Progress Height: 6dp │ -│ • Status Chip Height: 28dp │ -│ │ -│ Status Chip Colors: │ -│ ───────────────────────────────────────────────────────── │ -│ • ACTIVE: BG #00D09C@15%, Text #00D09C, Icon ✓ │ -│ • PENDING: BG #FFB800@15%, Text #FFB800, Icon ◷ │ -│ • REJECTED: BG #FF4757@15%, Text #FF4757, Icon ✗ │ -│ │ -│ Verified Badge: │ -│ ───────────────────────────────────────────────────────── │ -│ • Single ✓: Identity verified only │ -│ • Double ✓✓: Full verification (ID + Phone + Address) │ -│ • Color: #00D09C for verified, #9CA3AF for unverified │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - -### Quick Amount Chip - -``` -┌─────────────────────────────────────────────────────────────┐ -│ QUICK AMOUNT CHIP │ -├─────────────────────────────────────────────────────────────┤ -│ │ -│ UNSELECTED STATE │ -│ ┌────────────────────────────────────────────────────┐ │ -│ │ ┌──────────┐ │ │ -│ │ │ +$500 │ Border: 1.5dp #E1E4E8 │ │ -│ │ └──────────┘ Background: Transparent │ │ -│ │ Text: #6B7280 │ │ -│ │ Height: 36dp │ │ -│ │ Corner: 18dp (pill) │ │ -│ └────────────────────────────────────────────────────┘ │ -│ │ -│ SELECTED STATE │ -│ ┌────────────────────────────────────────────────────┐ │ -│ │ ┌──────────┐ │ │ -│ │ │░░+$500 ░░│ Border: None │ │ -│ │ └──────────┘ Background: Gradient @15% │ │ -│ │ Text: #667EEA │ │ -│ │ Scale: 1.05 │ │ -│ └────────────────────────────────────────────────────┘ │ -│ │ -│ MAX CHIP (Special) │ -│ ┌────────────────────────────────────────────────────┐ │ -│ │ ┌──────────┐ │ │ -│ │ │░░ MAX ░░│ Border: 2dp Gradient │ │ -│ │ └──────────┘ Background: Gradient @10% │ │ -│ │ Text: Gradient │ │ -│ │ Shimmer animation │ │ -│ └────────────────────────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - ---- - -## Interactions & Animations - -### Animation Specifications - -``` -┌─────────────────────────────────────────────────────────────┐ -│ GUARANTOR ANIMATIONS (Premium 2025) │ -├─────────────────────────────────────────────────────────────┤ -│ │ -│ 1. COVERAGE RING FILL │ -│ ═══════════════════════════════════════════════════════ │ -│ Trigger: Screen appears / value changes │ -│ Duration: 1200ms │ -│ Easing: Spring (damping=0.8, stiffness=400) │ -│ │ -│ Sequence: │ -│ ┌────────────────────────────────────────────────────┐ │ -│ │ 0ms: Ring at 0% │ │ -│ │ 600ms: Ring overshoots to 90% │ │ -│ │ 900ms: Ring settles to 85% │ │ -│ │ 1200ms: Ring final position │ │ -│ │ │ │ -│ │ + Number counter animates 0 → 85 │ │ -│ │ + Stars reveal one by one (200ms intervals) │ │ -│ └────────────────────────────────────────────────────┘ │ -│ │ -│ │ -│ 2. TRUST CARD ENTRANCE │ -│ ═══════════════════════════════════════════════════════ │ -│ Trigger: List loads │ -│ Duration: 400ms per card │ -│ Stagger: 80ms between cards │ -│ │ -│ Animation: │ -│ ┌────────────────────────────────────────────────────┐ │ -│ │ From: opacity 0, translateY 24dp │ │ -│ │ To: opacity 1, translateY 0 │ │ -│ │ Easing: Decelerate │ │ -│ │ │ │ -│ │ Progress bar fills after card enters (600ms) │ │ -│ └────────────────────────────────────────────────────┘ │ -│ │ -│ │ -│ 3. PENDING CARD PULSE │ -│ ═══════════════════════════════════════════════════════ │ -│ Trigger: Pending status │ -│ Duration: 2000ms per cycle (infinite) │ -│ │ -│ ┌────────────────────────────────────────────────────┐ │ -│ │ Border dash offset: animate continuously │ │ -│ │ Avatar: Scale 1.0 → 1.05 → 1.0 │ │ -│ │ Status chip: Opacity 1.0 → 0.7 → 1.0 │ │ -│ └────────────────────────────────────────────────────┘ │ -│ │ -│ │ -│ 4. VERIFICATION BADGE REVEAL │ -│ ═══════════════════════════════════════════════════════ │ -│ Trigger: Verified guarantor appears │ -│ Duration: 300ms │ -│ │ -│ ┌────────────────────────────────────────────────────┐ │ -│ │ Badge scales from 0 → 1.2 → 1.0 (bounce) │ │ -│ │ Green ring draws around avatar │ │ -│ │ Checkmark draws with path animation │ │ -│ │ Sparkle particles burst (optional) │ │ -│ └────────────────────────────────────────────────────┘ │ -│ │ -│ │ -│ 5. INVITATION SENT CELEBRATION │ -│ ═══════════════════════════════════════════════════════ │ -│ Trigger: Invitation successfully sent │ -│ Duration: 1500ms total │ -│ │ -│ ┌────────────────────────────────────────────────────┐ │ -│ │ 0ms: Circle scales 0 → 1.0 (300ms) │ │ -│ │ 200ms: Check draws with path animation (400ms) │ │ -│ │ 400ms: Confetti bursts from center (800ms) │ │ -│ │ 600ms: Text fades in (300ms) │ │ -│ │ 1200ms: Buttons slide up (300ms) │ │ -│ │ │ │ -│ │ Haptic: Success pattern at 400ms │ │ -│ └────────────────────────────────────────────────────┘ │ -│ │ -│ │ -│ 6. COVERAGE IMPACT TRANSITION │ -│ ═══════════════════════════════════════════════════════ │ -│ Trigger: Amount selected in step 3 │ -│ Duration: 800ms │ -│ │ -│ ┌────────────────────────────────────────────────────┐ │ -│ │ Before ring stays static │ │ -│ │ Arrow pulses (opacity animation) │ │ -│ │ After ring animates from before% to after% │ │ -│ │ Percentage counter increments │ │ -│ │ Impact badge slides in with bounce │ │ -│ └────────────────────────────────────────────────────┘ │ -│ │ -│ │ -│ 7. TRUST NETWORK GRAPH │ -│ ═══════════════════════════════════════════════════════ │ -│ Trigger: Network view toggle │ -│ Duration: 600ms │ -│ │ -│ ┌────────────────────────────────────────────────────┐ │ -│ │ Center node appears first (scale 0 → 1) │ │ -│ │ Lines draw outward from center (path animation) │ │ -│ │ Outer nodes appear at line endpoints │ │ -│ │ Each node bounces slightly on appear │ │ -│ │ Lines pulse with gradient flow │ │ -│ └────────────────────────────────────────────────────┘ │ -│ │ -│ │ -│ 8. QUICK AMOUNT CHIP SELECTION │ -│ ═══════════════════════════════════════════════════════ │ -│ Trigger: Chip tap │ -│ Duration: 200ms │ -│ │ -│ ┌────────────────────────────────────────────────────┐ │ -│ │ Selected: Scale 1.0 → 1.1 → 1.05 │ │ -│ │ Background fades in (0 → 15% gradient) │ │ -│ │ Border color transitions │ │ -│ │ Previous selection animates out simultaneously │ │ -│ │ Amount display updates with counter animation │ │ -│ │ Haptic: Light impact │ │ -│ └────────────────────────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - ---- - -## Accessibility - -### Screen Reader Support - -``` -┌─────────────────────────────────────────────────────────────┐ -│ ACCESSIBILITY SPECIFICATIONS │ -├─────────────────────────────────────────────────────────────┤ -│ │ -│ CONTENT DESCRIPTIONS │ -│ ═══════════════════════════════════════════════════════ │ -│ │ -│ Coverage Ring: │ -│ ───────────────────────────────────────────────────────── │ -│ "Guarantee coverage: 85 percent. Trust level: Strong. │ -│ 8,500 of 10,000 dollars guaranteed. Need 1,500 more." │ -│ │ -│ Trust Card: │ -│ ───────────────────────────────────────────────────────── │ -│ "John Doe, External Guarantor, Verified. Guarantee amount │ -│ 5,000 dollars. 50 percent of loan. Status: Active. │ -│ Trust level: 5 stars. Double tap to view details." │ -│ │ -│ Pending Card: │ -│ ───────────────────────────────────────────────────────── │ -│ "Michael Brown, External Guarantor, Unverified. Pending │ -│ guarantee of 1,000 dollars. Awaiting confirmation. │ -│ Double tap to view details." │ -│ │ -│ AI Suggestion Card: │ -│ ───────────────────────────────────────────────────────── │ -│ "Suggested: Robert Chen. 95 percent match. Previously │ -│ guaranteed 3 loans successfully. Double tap to invite." │ -│ │ -│ Quick Amount Chip: │ -│ ───────────────────────────────────────────────────────── │ -│ "Add 500 dollars. Double tap to select." │ -│ Selected: "500 dollars, selected" │ -│ │ -│ Coverage Impact: │ -│ ───────────────────────────────────────────────────────── │ -│ "Adding this guarantor increases coverage from 60 to │ -│ 85 percent. Plus 25 percent improvement." │ -│ │ -│ │ -│ FOCUS ORDER │ -│ ═══════════════════════════════════════════════════════ │ -│ │ -│ Trust Network Hub: │ -│ ┌────────────────────────────────────────────────────┐ │ -│ │ 1. Back button │ │ -│ │ 2. History button │ │ -│ │ 3. Coverage ring (announces stats) │ │ -│ │ 4. "Add Guarantor" button │ │ -│ │ 5. "AI Suggest" button │ │ -│ │ 6. Section header "Your Trust Network" │ │ -│ │ 7-N. Trust cards (in order) │ │ -│ └────────────────────────────────────────────────────┘ │ -│ │ -│ Add Guarantor Flow: │ -│ ┌────────────────────────────────────────────────────┐ │ -│ │ 1. Back/Cancel button │ │ -│ │ 2. Step indicator (announces step X of Y) │ │ -│ │ 3. Section title │ │ -│ │ 4-N. Selectable options │ │ -│ │ N+1. Continue button │ │ -│ └────────────────────────────────────────────────────┘ │ -│ │ -│ │ -│ TOUCH TARGETS │ -│ ═══════════════════════════════════════════════════════ │ -│ │ -│ Minimum sizes (WCAG 2.1 Level AAA): │ -│ ───────────────────────────────────────────────────────── │ -│ • Trust cards: Full width × 120dp minimum │ -│ • Quick action buttons: 48dp × 48dp │ -│ • Quick amount chips: 72dp × 44dp │ -│ • Avatar tap area: 56dp × 56dp │ -│ • Primary buttons: Full width × 56dp │ -│ • Back/Close buttons: 48dp × 48dp │ -│ │ -│ │ -│ HAPTIC FEEDBACK │ -│ ═══════════════════════════════════════════════════════ │ -│ │ -│ ┌────────────────────────────────────────────────────┐ │ -│ │ Action │ iOS │ Android │ │ -│ ├────────────────────────┼──────────────┼────────────┤ │ -│ │ Card tap │ Light │ TICK │ │ -│ │ Option select │ Medium │ CLICK │ │ -│ │ Amount chip select │ Light │ TICK │ │ -│ │ Invitation sent │ Success │ CONFIRM │ │ -│ │ Guarantor removed │ Warning │ HEAVY │ │ -│ │ Error validation │ Error │ REJECT │ │ -│ │ Coverage 100% │ Success │ CONFIRM │ │ -│ └────────────────────────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - ---- - -## Dark Mode Variant - -### Trust Network Hub - Dark Mode - -``` -+----------------------------------------------------------+ -| | -| [Status Bar - Light Text] Background: #0D1117| -| | -+----------------------------------------------------------+ -| | -| [← Back] Trust Network [History] | -| #F0F6FC | -| | -+----------------------------------------------------------+ -| | -| ╔════════════════════════════════════════════════════╗| -| ║ GUARANTEE COVERAGE ║| -| ║ Gradient preserved ║| -| ║ Enhanced glow: #764BA2@40% ║| -| ║ ║| -| ║ ┌─────────────────┐ ║| -| ║ │ 85% │ ║| -| ║ │ COVERED │ ║| -| ║ │ ★★★★☆ │ ║| -| ║ └─────────────────┘ ║| -| ║ ║| -| ║ $8,500 of $10,000 guaranteed ║| -| ║ #FFFFFF text ║| -| ║ ║| -| ╚════════════════════════════════════════════════════╝| -| | -| | -| ┌──────────────────┐ ┌──────────────────┐ | -| │ + Add Guarantor │ │ ✨ AI Suggest │ | -| │ Border: #A78BFA │ │ BG: Gradient │ | -| │ Text: #A78BFA │ │ @15% opacity │ | -| └──────────────────┘ └──────────────────┘ | -| | -| | -| YOUR TRUST NETWORK | -| #F0F6FC | -| | -| | -| ┌────────────────────────────────────────────────┐ | -| │ Card BG: #161B22 │ | -| │ Border: 1dp #30363D │ | -| │ │ | -| │ ┌──────┐ │ | -| │ │ JD ✓ │ John Doe [$5,000] │ | -| │ │ │ #F0F6FC #A78BFA │ | -| │ └──────┘ External • Verified #8B949E │ | -| │ ★★★★★ #FFD700 (Gold stars) │ | -| │ │ | -| │ [███████████████████████████████] 100% │ | -| │ Gradient preserved │ | -| │ │ | -| │ ┌──────────────────────────────────────┐ │ | -| │ │ ✓ ACTIVE #00D09C on #1A2E26 │ │ | -| │ └──────────────────────────────────────┘ │ | -| │ │ | -| └────────────────────────────────────────────────┘ | -| | -| | -| ┌────────────────────────────────────────────────┐ | -| │ Pending Card │ | -| │ Border: 1dp dashed #B8860B (darker orange) │ | -| │ │ | -| │ ┌──────┐ │ | -| │ │ MB │ Michael Brown [$1,000] │ | -| │ │ ◷ │ #F0F6FC │ | -| │ └──────┘ External • Pending │ | -| │ ★★★☆☆ │ | -| │ │ | -| │ ┌──────────────────────────────────────┐ │ | -| │ │ ◷ PENDING #FFB800 on #2E2A1A │ │ | -| │ └──────────────────────────────────────┘ │ | -| │ │ | -| └────────────────────────────────────────────────┘ | -| | -+----------------------------------------------------------+ -``` - -### Color Token Mapping - -``` -┌─────────────────────────────────────────────────────────────┐ -│ DARK MODE COLOR MAPPING │ -├─────────────────────────────────────────────────────────────┤ -│ │ -│ ┌──────────────────────────────────────────────────────┐ │ -│ │ Element │ Light Mode │ Dark Mode │ │ -│ ├──────────────────────────────────────────────────────┤ │ -│ │ Screen Background │ #F8F9FA │ #0D1117 │ │ -│ │ Card Background │ #FFFFFF │ #161B22 │ │ -│ │ Card Border │ None │ #30363D │ │ -│ │ Primary Text │ #1F2937 │ #F0F6FC │ │ -│ │ Secondary Text │ #6B7280 │ #8B949E │ │ -│ │ Tertiary Text │ #9CA3AF │ #6E7681 │ │ -│ │ Link Color │ #667EEA │ #A78BFA │ │ -│ │ Divider │ #E1E4E8 │ #30363D │ │ -│ │ Input Background │ #F8F9FA │ #21262D │ │ -│ │ Stars (filled) │ #FFB800 │ #FFD700 │ │ -│ │ Stars (empty) │ #E1E4E8 │ #30363D │ │ -│ │ Primary Gradient │ #667EEA→ │ Same │ │ -│ │ │ #764BA2 │ │ │ -│ │ Success Color │ #00D09C │ #00D09C │ │ -│ │ Warning Color │ #FFB800 │ #FFB800 │ │ -│ │ Error Color │ #FF4757 │ #FF6B7A │ │ -│ │ │ │ │ │ -│ │ Status Badge BG: │ │ │ │ -│ │ - Active │ #00D09C@15% │ #1A2E26 │ │ -│ │ - Pending │ #FFB800@15% │ #2E2A1A │ │ -│ │ - Rejected │ #FF4757@15% │ #2E1A1C │ │ -│ └──────────────────────────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - ---- - -## Implementation Notes - -### State Management - -```kotlin -data class GuarantorScreenState( - // Coverage - val totalRequired: Double = 0.0, - val currentCoverage: Double = 0.0, - val coveragePercent: Float = 0f, - val trustLevel: TrustLevel = TrustLevel.NONE, - - // Guarantors - val guarantors: List = emptyList(), - val selectedGuarantor: Guarantor? = null, - - // Loading - val isLoading: Boolean = false, - val isRefreshing: Boolean = false, - - // Add flow - val addFlowStep: AddGuarantorStep = AddGuarantorStep.TYPE, - val selectedGuarantorType: GuarantorType? = null, - val selectedContact: Contact? = null, - val guaranteeAmount: Double = 0.0, - - // AI Suggestions - val suggestions: List = emptyList(), - val isSuggestionsLoading: Boolean = false, - - // Error - val error: String? = null -) - -enum class TrustLevel { - NONE, // 0% - LOW, // 1-25% - MEDIUM, // 26-50% - GOOD, // 51-75% - STRONG, // 76-99% - FULL // 100% -} - -enum class AddGuarantorStep { - TYPE, // Step 1: Choose type - DETAILS, // Step 2: Contact/search/manual - AMOUNT // Step 3: Set amount & confirm -} - -enum class GuarantorType { - CONTACT, // From phone contacts - EXISTING, // Existing Mifos client - EXTERNAL // Manual entry -} - -data class Guarantor( - val id: String, - val firstName: String, - val lastName: String, - val initials: String, - val avatarUrl: String?, - val type: String, // "External", "Self", etc. - val amount: Double, - val amountPercent: Float, - val status: GuarantorStatus, - val verificationLevel: VerificationLevel, - val trustRating: Int, // 1-5 stars - val activeSince: Instant?, - val history: List -) - -enum class GuarantorStatus { - ACTIVE, - PENDING, - REJECTED -} - -enum class VerificationLevel { - NONE, // No verification - PARTIAL, // Identity only - FULL // Identity + Phone + Address -} - -sealed interface GuarantorEvent { - data object OnRefresh : GuarantorEvent - data class OnGuarantorClick(val id: String) : GuarantorEvent - data class OnGuarantorLongClick(val id: String) : GuarantorEvent - data object OnAddGuarantorClick : GuarantorEvent - data object OnAISuggestClick : GuarantorEvent - data class OnTypeSelected(val type: GuarantorType) : GuarantorEvent - data class OnContactSelected(val contact: Contact) : GuarantorEvent - data class OnAmountSelected(val amount: Double) : GuarantorEvent - data object OnSendInvitation : GuarantorEvent - data class OnDeleteGuarantor(val id: String) : GuarantorEvent - data object OnBackPressed : GuarantorEvent - data object OnNetworkViewToggle : GuarantorEvent -} -``` - -### Required Composables - -```kotlin -// Screens -@Composable -fun TrustNetworkHubScreen( - state: GuarantorScreenState, - onEvent: (GuarantorEvent) -> Unit -) - -@Composable -fun GuarantorDetailScreen( - guarantor: Guarantor, - onBack: () -> Unit, - onContact: () -> Unit, - onEdit: () -> Unit, - onDelete: () -> Unit -) - -@Composable -fun AddGuarantorFlow( - state: GuarantorScreenState, - onEvent: (GuarantorEvent) -> Unit -) - -@Composable -fun AISuggestionsSheet( - suggestions: List, - isLoading: Boolean, - onInvite: (GuarantorSuggestion) -> Unit, - onDismiss: () -> Unit -) - -// Components -@Composable -fun CoverageRingCard( - coveragePercent: Float, - coveredAmount: Double, - totalAmount: Double, - trustLevel: TrustLevel -) - -@Composable -fun TrustCard( - guarantor: Guarantor, - onClick: () -> Unit, - onLongClick: () -> Unit -) - -@Composable -fun GuarantorTypeSelector( - selectedType: GuarantorType?, - onTypeSelected: (GuarantorType) -> Unit -) - -@Composable -fun ContactSearchList( - contacts: List, - suggestions: List, - onContactSelected: (Contact) -> Unit -) - -@Composable -fun GuaranteeAmountInput( - amount: Double, - quickAmounts: List, - maxAmount: Double, - onAmountChanged: (Double) -> Unit -) - -@Composable -fun CoverageImpactPreview( - beforePercent: Float, - afterPercent: Float, - addedAmount: Double -) - -@Composable -fun GuarantorTimeline( - history: List -) - -@Composable -fun VerificationBadge( - level: VerificationLevel -) - -@Composable -fun TrustStars( - rating: Int, - maxRating: Int = 5 -) - -@Composable -fun InvitationSuccessScreen( - contactName: String, - onViewNetwork: () -> Unit, - onAddAnother: () -> Unit -) - -@Composable -fun DeleteConfirmationDialog( - guarantorName: String, - impactMessage: String, - onConfirm: () -> Unit, - onDismiss: () -> Unit -) -``` - ---- - -## Changelog - -| Date | Version | Changes | -|------|---------|---------| -| 2025-12-30 | 2.0 | Major redesign: Trust Network Hub pattern, coverage ring visualization, AI suggestions, verification badges, trust rating system, timeline history, coverage impact preview | -| 2025-12-30 | 1.0 | Initial mockup with Revolut-style design | - ---- - -## Data Binding Reference - -> **For `/implement` command**: Maps UI components to API.md sections. -> **Source of Truth**: See `API.md` for complete endpoint details. - -### Screen → API.md Mapping - -| Screen | API.md Section | Key Fields | -|--------|----------------|------------| -| Trust Network Hub | `Endpoints Required → 1. Get Guarantors` | `guarantors[]`, coverage calculation | -| Add Guarantor | `Endpoints Required → 2. Create Guarantor` | POST with guarantor details | -| Update Guarantor | `Endpoints Required → 3. Update Guarantor` | PUT with updated fields | -| Remove Guarantor | `Endpoints Required → 4. Delete Guarantor` | DELETE by ID | -| Guarantor Template | `Endpoints Required → 5. Guarantor Template` | Options for types | - -### Client-Only Features - -| Feature | Storage | Notes | -|---------|---------|-------| -| Trust Score | Client calculation | Based on coverage %, verified count | -| Coverage Ring Animation | Client-side | UI animation only | -| AI Suggestions | Client-side | Contact analysis | - -### Actions → API.md Mapping - -| User Action | API.md Reference | Navigation | -|-------------|------------------|------------| -| View Trust Network | `1. Get Guarantors` | Display list | -| Add Guarantor | `2. Create Guarantor` | → Add Flow | -| Update Guarantor | `3. Update Guarantor` | Edit details | -| Remove Guarantor | `4. Delete Guarantor` | Confirmation | - -### Error Handling - -See `API.md → Error Responses` for complete error codes. diff --git a/claude-product-cycle/design-spec-layer/features/guarantor/SPEC.md b/claude-product-cycle/design-spec-layer/features/guarantor/SPEC.md deleted file mode 100644 index e410bc30f..000000000 --- a/claude-product-cycle/design-spec-layer/features/guarantor/SPEC.md +++ /dev/null @@ -1,337 +0,0 @@ -# Guarantor - Feature Specification - -> **Purpose**: Manage loan guarantors for self-service users -> **User Value**: Allow users to view, add, update, and delete guarantors for their loans -> **Last Updated**: 2025-12-29 - ---- - -## 1. Overview - -### 1.1 Feature Summary -The Guarantor feature enables loan account holders to manage guarantors associated with their loans. Users can view a list of existing guarantors, see detailed information about each guarantor, add new guarantors, update guarantor details, and delete guarantors when needed. - -### 1.2 User Stories -- As a loan account holder, I want to view all guarantors linked to my loan so that I can track who has guaranteed my loan -- As a user, I want to add a new guarantor to my loan so that I can meet loan requirements -- As a user, I want to view detailed information about a guarantor so that I can verify their details -- As a user, I want to update guarantor information so that I can keep records accurate -- As a user, I want to delete a guarantor so that I can remove outdated or incorrect entries - ---- - -## 2. Screen Layouts - -### 2.1 Guarantor List Screen - -``` -+------------------------------------------+ -| <- View Guarantor | -+------------------------------------------+ -| | -| +------------------------------------+ | -| | John Doe | | -| | External | | -| +------------------------------------+ | -| | -| +------------------------------------+ | -| | Michael Brown | | -| | External | | -| +------------------------------------+ | -| | -| +------------------------------------+ | -| | [Empty State if no guarantors] | | -| +------------------------------------+ | -| | -| | -| [+] | -+------------------------------------------+ -``` - -### 2.2 Guarantor Detail Screen - -``` -+------------------------------------------+ -| <- Guarantor Details ... | -+------------------------------------------+ -| | -| First Name | -| John | -| ----------------------------------------| -| | -| Last Name | -| Doe | -| ----------------------------------------| -| | -| City | -| New York | -| ----------------------------------------| -| | -| Guarantor Type | -| External | -| ----------------------------------------| -| | -+------------------------------------------+ - -Menu Options (on ... click): -+------------------------+ -| Update Guarantor | -| Delete Guarantor | -+------------------------+ -``` - -### 2.3 Add/Update Guarantor Screen - -``` -+------------------------------------------+ -| <- Add Guarantor | -+------------------------------------------+ -| | -| Guarantor Type | -| +------------------------------------+ | -| | Select Guarantor Type v | | -| +------------------------------------+ | -| | -| First Name | -| +------------------------------------+ | -| | | | -| +------------------------------------+ | -| | -| Last Name | -| +------------------------------------+ | -| | | | -| +------------------------------------+ | -| | -| City | -| +------------------------------------+ | -| | | | -| +------------------------------------+ | -| | -| +------------------------------------+ | -| | SUBMIT | | -| +------------------------------------+ | -| | -+------------------------------------------+ -``` - -### 2.4 Sections Table - -| # | Screen | Description | Priority | -|---|--------|-------------|----------| -| 1 | GuarantorListScreen | Display list of guarantors for a loan | P0 | -| 2 | GuarantorDetailScreen | Show detailed guarantor information | P0 | -| 3 | AddGuarantorScreen | Form to add or update guarantor | P0 | - ---- - -## 3. User Interactions - -| Action | Trigger | Result | API Call | -|--------|---------|--------|----------| -| View Guarantor List | Navigate from loan account | Display all active guarantors | GET /loans/{loanId}/guarantors | -| View Guarantor Detail | Click on guarantor item | Show guarantor details | (uses cached list data) | -| Add New Guarantor | Click FAB (+) button | Open add guarantor form | POST /loans/{loanId}/guarantors | -| Update Guarantor | Click Update in menu | Open edit form with prefilled data | PUT /loans/{loanId}/guarantors/{id} | -| Delete Guarantor | Click Delete in menu | Show confirmation, then delete | DELETE /loans/{loanId}/guarantors/{id} | -| Submit Guarantor | Click Submit button | Validate and save guarantor | POST or PUT based on mode | -| Navigate Back | Click back arrow | Return to previous screen | - | - ---- - -## 4. State Model - -```kotlin -// Guarantor List State -@Parcelize -data class GuarantorListState( - val loanId: Long? = -1L, - val dialogState: DialogState? = null, - val isOnline: Boolean = false, - @IgnoredOnParcel - val guarantorList: List? = null, -) : Parcelable { - - sealed interface DialogState : Parcelable { - @Parcelize - data object Loading : DialogState - - @Parcelize - data class ShowToast(val message: String) : DialogState - } -} - -// Guarantor List Events -sealed interface GuarantorListEvent { - data object NavigateBack : GuarantorListEvent - data class ShowToast(val message: String) : GuarantorListEvent - data class AddGuarantor(val value: Long) : GuarantorListEvent - data class GuarantorClicked(val index: Int, val loanId: Long) : GuarantorListEvent -} - -// Guarantor List Actions -sealed interface GuarantorListAction { - data object OnNavigateBackClick : GuarantorListAction - data class OnGuarantorClicked(val index: Int) : GuarantorListAction - data object OnAddGuarantor : GuarantorListAction - data object DismissDialog : GuarantorListAction -} - -// Guarantor Detail State -@Parcelize -data class GuarantorDetailState( - val loanId: Long? = null, - val index: Int? = null, - val dialogState: DialogState?, - @IgnoredOnParcel - val guarantor: GuarantorPayload? = null, - val isOnline: Boolean = false, - val showDialog: Boolean = false, -) : Parcelable { - sealed interface DialogState : Parcelable { - @Parcelize - data object Loading : DialogState - - @Parcelize - data class ShowToast(val message: String) : DialogState - } -} - -// Guarantor Detail Events -sealed interface GuarantorDetailEvent { - data object NavigateBack : GuarantorDetailEvent - data class ShowToast(val message: String) : GuarantorDetailEvent - data class UpdateGuarantor(val index: Int, val loanId: Long) : GuarantorDetailEvent -} - -// Guarantor Detail Actions -sealed interface GuarantorDetailAction { - data object NavigateBack : GuarantorDetailAction - data object DeleteGuarantor : GuarantorDetailAction - data object UpdateGuarantor : GuarantorDetailAction - data object UpdateMenuDialogValue : GuarantorDetailAction - data object DismissDialog : GuarantorDetailAction -} - -// Add Guarantor State -@Parcelize -data class AddGuarantorState( - val index: Int = -1, - val loanId: Long? = -1L, - val dialogState: DialogState?, - val isOnline: Boolean = false, - var firstName: String = "", - var lastName: String = "", - var city: String = "", - @IgnoredOnParcel - val guarantorItem: GuarantorPayload? = null, - @IgnoredOnParcel - val templatePayload: GuarantorTemplatePayload? = null, - @IgnoredOnParcel - var guarantorType: GuarantorType = GuarantorType(), -) : Parcelable { - - sealed interface DialogState : Parcelable { - @Parcelize - data object Loading : DialogState - - @Parcelize - data class Error(val message: String) : DialogState - } -} - -// Add Guarantor Events -sealed interface AddGuarantorEvent { - data object NavigateBack : AddGuarantorEvent - data class ShowToast(val message: String) : AddGuarantorEvent - data class Success(val message: String) : AddGuarantorEvent -} - -// Add Guarantor Actions -sealed interface AddGuarantorAction { - data class OnFirstNameChange(val firstName: String) : AddGuarantorAction - data class OnLastnameChange(val lastname: String) : AddGuarantorAction - data class OnCityChange(val city: String) : AddGuarantorAction - data class SetGuarantortype(val type: GuarantorType) : AddGuarantorAction - data object NavigateBack : AddGuarantorAction - data class ValidateFields(val payload: GuarantorApplicationPayload?) : AddGuarantorAction - data object DismissDialog : AddGuarantorAction -} -``` - ---- - -## 5. API Requirements - -| Endpoint | Method | Purpose | Status | -|----------|--------|---------|--------| -| /loans/{loanId}/guarantors/template | GET | Fetch guarantor type options | Implemented | -| /loans/{loanId}/guarantors | GET | Fetch list of guarantors | Implemented | -| /loans/{loanId}/guarantors | POST | Create new guarantor | Implemented | -| /loans/{loanId}/guarantors/{guarantorId} | PUT | Update existing guarantor | Implemented | -| /loans/{loanId}/guarantors/{guarantorId} | DELETE | Delete guarantor | Implemented | - ---- - -## 6. Edge Cases & Error Handling - -| Scenario | Handling | -|----------|----------| -| No internet connection | Show snackbar with "Internet not connected" message | -| Empty guarantor list | Display empty state component | -| Failed to load guarantors | Show error toast message | -| First name empty | Show error: "First name can not be empty" | -| Last name empty | Show error: "Last name can't be empty" | -| Guarantor type not selected | Show error: "Guarantor type can not be empty or null" | -| Create guarantor success | Show success toast, navigate back | -| Update guarantor success | Show success toast, navigate back | -| Delete guarantor success | Show "Guarantor deleted successfully" toast | -| API error on create/update/delete | Show error message from server | - ---- - -## 7. Navigation Flow - -``` -GUARANTOR_GRAPH (Start: GuarantorListScreen) -|-- GuarantorListScreen (route: guarantor_list_screen_route/{loanId}) -| |-- --> AddGuarantorScreen (FAB click, index=-1) -| |-- --> GuarantorDetailScreen (item click) -| -|-- GuarantorDetailScreen (route: guarantor_detail_screen_route/{loanId}/{index}) -| |-- --> AddGuarantorScreen (Update menu, with index) -| |-- <-- Back to GuarantorListScreen -| -|-- AddGuarantorScreen (route: guarantor_add_screen_route/{loanId}/{index}) - |-- <-- Back to previous screen (on success or back) -``` - ---- - -## 8. Validation Rules - -| Field | Validation | Error Message | -|-------|------------|---------------| -| First Name | Required, non-empty | "First name can not be empty" | -| Last Name | Required, non-empty | "Last name can't be empty" | -| Guarantor Type | Required, must be selected | "Guarantor type can not be empty or null" | -| City | Optional | - | - ---- - -## 9. Implementation Notes - -1. **Fake Data Source**: The current implementation uses fake demo data for the guarantor list (`getDemoGuarantorPayloads()`) as the API does not return data consistently. The real API call is commented out in `GuarantorRepositoryImp`. - -2. **Status Filtering**: Guarantor list displays only active guarantors (filtered by `status == true`). - -3. **Guarantor Type Filtering**: The add screen filters guarantor type options to only show type with `id == 3L` (External guarantor). - -4. **Index-based Detail Access**: The detail screen retrieves guarantor data by index from the list rather than making a separate API call. - ---- - -## Changelog - -| Date | Change | -|------|--------| -| 2025-12-29 | Initial specification from codebase analysis | diff --git a/claude-product-cycle/design-spec-layer/features/guarantor/STATUS.md b/claude-product-cycle/design-spec-layer/features/guarantor/STATUS.md deleted file mode 100644 index 2426cfd91..000000000 --- a/claude-product-cycle/design-spec-layer/features/guarantor/STATUS.md +++ /dev/null @@ -1,74 +0,0 @@ -# Guarantor - Implementation Status - -> **Last Updated**: 2025-12-29 -> **Overall Status**: ✅ Done - ---- - -## Implementation Checklist - -- [x] SPEC.md created -- [x] API.md created -- [x] Network: Services exist (GuarantorService) -- [x] Data: Repository exists (GuarantorRepository) -- [x] Feature: ViewModels + Screens -- [x] Navigation: Routes registered -- [x] DI: Modules registered -- [x] STATUS.md updated - ---- - -## Layer Status - -| Layer | Status | Files | -|-------|--------|-------| -| Network | ✅ | GuarantorService.kt | -| Data | ✅ | GuarantorRepository.kt, GuarantorRepositoryImp.kt | -| Feature | ✅ | GuarantorListViewModel, GuarantorListScreen, GuarantorDetailViewModel, GuarantorDetailScreen, AddGuarantorViewModel, AddGuarantorScreen | -| DI | ✅ | GuarantorModule.kt | -| Navigation | ✅ | GuarantorNavGraph.kt, GuarantorNavigation.kt | - ---- - -## Files - -### Network Layer -- `core/network/services/GuarantorService.kt` - -### Data Layer -- `core/data/repository/GuarantorRepository.kt` -- `core/data/repositoryImpl/GuarantorRepositoryImp.kt` - -### Feature Layer - Guarantor List -- `feature/guarantor/src/commonMain/kotlin/org/mifos/mobile/feature/guarantor/screens/guarantorList/GuarantorListViewModel.kt` -- `feature/guarantor/src/commonMain/kotlin/org/mifos/mobile/feature/guarantor/screens/guarantorList/GuarantorListScreen.kt` - -### Feature Layer - Guarantor Details -- `feature/guarantor/src/commonMain/kotlin/org/mifos/mobile/feature/guarantor/screens/guarantorDetails/GuarantorDetailViewModel.kt` -- `feature/guarantor/src/commonMain/kotlin/org/mifos/mobile/feature/guarantor/screens/guarantorDetails/GuarantorDetailScreen.kt` -- `feature/guarantor/src/commonMain/kotlin/org/mifos/mobile/feature/guarantor/screens/guarantorDetails/GuarantorDetailContent.kt` - -### Feature Layer - Add Guarantor -- `feature/guarantor/src/commonMain/kotlin/org/mifos/mobile/feature/guarantor/screens/guarantorAdd/AddGuarantorViewModel.kt` -- `feature/guarantor/src/commonMain/kotlin/org/mifos/mobile/feature/guarantor/screens/guarantorAdd/AddGuarantorScreen.kt` - -### DI Layer -- `feature/guarantor/src/commonMain/kotlin/org/mifos/mobile/feature/guarantor/di/GuarantorModule.kt` - -### Navigation Layer -- `feature/guarantor/src/commonMain/kotlin/org/mifos/mobile/feature/guarantor/navigation/GuarantorNavGraph.kt` -- `feature/guarantor/src/commonMain/kotlin/org/mifos/mobile/feature/guarantor/navigation/GuarantorNavigation.kt` - ---- - -## Gaps - -None identified. - ---- - -## Changelog - -| Date | Change | -|------|--------| -| 2025-12-29 | Initial status documentation | diff --git a/claude-product-cycle/design-spec-layer/features/guarantor/mockups/FIGMA_LINKS.md b/claude-product-cycle/design-spec-layer/features/guarantor/mockups/FIGMA_LINKS.md deleted file mode 100644 index dabb16ff7..000000000 --- a/claude-product-cycle/design-spec-layer/features/guarantor/mockups/FIGMA_LINKS.md +++ /dev/null @@ -1,62 +0,0 @@ -# Guarantor Feature - Figma Links - -> **Feature**: Guarantor (Trust Network Hub) -> **Status**: Pending Design Export -> **Last Updated**: 2025-01-04 - ---- - -## Figma Design Links - -After generating designs using AI tools (Stitch/Figma), paste the links below: - -### Main Screens - -| Screen | Figma Link | Status | -|--------|------------|--------| -| Trust Network Hub | `[Paste link here]` | Pending | -| Network Graph View | `[Paste link here]` | Pending | -| AI Suggestions | `[Paste link here]` | Pending | -| Guarantor Detail | `[Paste link here]` | Pending | -| Add Guarantor - Type | `[Paste link here]` | Pending | -| Add Guarantor - Details | `[Paste link here]` | Pending | -| Add Guarantor - Amount | `[Paste link here]` | Pending | -| Invite Success | `[Paste link here]` | Pending | -| Guarantor History | `[Paste link here]` | Pending | - -### Component Library - -| Component | Figma Link | Status | -|-----------|------------|--------| -| Coverage Ring | `[Paste link here]` | Pending | -| Guarantor Card | `[Paste link here]` | Pending | -| Trust Stars | `[Paste link here]` | Pending | -| Status Chip | `[Paste link here]` | Pending | -| Match Badge | `[Paste link here]` | Pending | -| Network Node | `[Paste link here]` | Pending | -| Timeline Item | `[Paste link here]` | Pending | - -### Dark Mode Variants - -| Screen | Figma Link | Status | -|--------|------------|--------| -| Trust Network Hub (Dark) | `[Paste link here]` | Pending | -| Guarantor Detail (Dark) | `[Paste link here]` | Pending | - ---- - -## Export Checklist - -- [ ] Export all screens at 1x, 2x, 3x -- [ ] Export component assets as SVG -- [ ] Document color variables -- [ ] Create prototype connections -- [ ] Add interaction annotations -- [ ] Review accessibility contrast -- [ ] Verify dark mode mappings - ---- - -## Notes - -_Add any design notes, feedback, or revision history here._ diff --git a/claude-product-cycle/design-spec-layer/features/guarantor/mockups/PROMPTS.md b/claude-product-cycle/design-spec-layer/features/guarantor/mockups/PROMPTS.md deleted file mode 100644 index 731d6f628..000000000 --- a/claude-product-cycle/design-spec-layer/features/guarantor/mockups/PROMPTS.md +++ /dev/null @@ -1,430 +0,0 @@ -# Guarantor Feature - AI Design Tool Prompts - -> **Generated from**: MOCKUP.md v2.0 -> **Design Pattern**: Trust Network Hub -> **Primary Gradient**: #667EEA (Purple) -> #764BA2 (Deep Purple) -> **Generated**: 2025-01-04 - ---- - -## Google Stitch Prompts - -### Prompt 1: Trust Network Hub (Main Screen) - -``` -Create a mobile Trust Network Hub screen for a fintech banking app's guarantor feature. - -Design specifications: -- Material Design 3 with 2025 fintech patterns -- Primary gradient: #667EEA to #764BA2 (purple-blue) -- Background: #F8F9FA - -Header: -- Back button, "Trust Network" title, "History" action -- Subtitle: "Loan #12345" - -Guarantee Coverage Card (Gradient): -- Large circular progress ring showing 85% coverage -- Center text: "85% COVERED" -- Trust Score: 4/5 stars with "Strong" label -- Progress bar: "$8,500 of $10,000 guaranteed" -- Text: "Need $1,500 more" -- Background: Gradient #667EEA to #764BA2 -- White text, shadow: 0 8 24 #667EEA@40% - -Quick Action Buttons: -- Two pills: "+ Add Guarantor" (outlined), "AI Suggest" (gradient secondary) -- Height: 48dp, corner radius: 24dp (pill shape) - -Trust Network Section: -- Section header: "YOUR TRUST NETWORK" with "3 guarantors, 2 verified" - -Guarantor Cards (3 cards): -Card 1 - Active/Verified: -- Avatar with initials "JD" and checkmark badge -- Name: "John Doe", Amount: "$5,000" -- Type: "External, Verified" -- Trust level: 5 stars -- Progress bar: 100% -- Status chip: "ACTIVE" (green #00D09C) -- "Since Dec 15, 2025" - -Card 2 - Active/Verified: -- Avatar "SW" -- Name: "Sarah Wilson", Amount: "$2,500" -- Type: "Self, Verified" -- Trust level: 4 stars -- Progress bar: 50% -- Status: "ACTIVE" (green) - -Card 3 - Pending: -- Avatar "MB" with clock icon overlay (pulsing animation) -- Name: "Michael Brown", Amount: "$1,000" -- Type: "External, Pending" -- Trust level: 3 stars -- Progress bar: 20% -- Status: "PENDING" (orange #FFB800) -- Dashed border - -Card styling: -- Background: #FFFFFF -- Shadow: 0 2px 8px rgba(0,0,0,0.08) -- Corner radius: 20dp -- Gap between cards: 12dp - -Style: Trust-focused, social proof visualization, gamified trust scores -``` - -### Prompt 2: Trust Network Visualization (Graph View) - -``` -Create a Trust Network Graph visualization screen for a fintech app. - -Design specifications: -- Material Design 3 with network graph patterns -- Interactive node-based visualization - -Header: -- Back button, "Trust Network" title, "List" toggle icon - -Network Graph Area: -- Central node: "YOU" with gradient ring (user's profile) -- Connected nodes: "JD", "SW", "MB" (guarantors) -- Lines connecting nodes with gradient strokes -- Active nodes: Green ring (#00D09C) -- Pending nodes: Orange pulsing ring (#FFB800) -- Tap node for details popup - -Network Strength Card: -- Shield icon with "Network Trust Score" -- Large score: "78" with "STRONG" label -- Three metric boxes: - - Coverage: 85%, 5 stars - - Verified: 67%, 4 stars - - Diversity: 3, 3 stars -- Hint: "+10 points for adding verified guarantor" - -Interaction: -- Nodes are draggable/tappable -- Lines animate on connection -- Zoom/pan gestures supported - -Style: Social network visualization, trust metrics, gamification -``` - -### Prompt 3: AI Suggested Guarantors - -``` -Create an AI Suggestions screen for finding guarantors in a fintech app. - -Design specifications: -- Material Design 3 with AI recommendation patterns -- Smart suggestions based on contacts and history - -Header: -- Close button (X), "AI Suggestions" title - -Hero Card (Gradient): -- Sparkle icon -- "Smart Suggestions" headline -- "Based on your contacts and loan needs" subtitle -- Background: Gradient #667EEA to #764BA2 - -Section: "RECOMMENDED FOR YOU" -- Subtitle: "Based on contact analysis" - -Suggestion Cards (3): -Card 1 - High Match: -- Avatar "RC" with verified badge -- Name: "Robert Chen" -- Type: "From Contacts, High Trust" -- Match badge: Fire icon, "95% match, Previously guaranteed" (green background #00D09C@10%) -- Quote: "Guaranteed 3 loans successfully" -- INVITE button - -Card 2 - Medium Match: -- Avatar "EW" -- Name: "Emma Watson" -- Type: "From Contacts, Medium Trust" -- Match badge: Star icon, "78% match, Family connection" -- Quote: "New to guaranteeing" -- INVITE button - -Card 3 - Standard Match: -- Avatar "DL" -- Name: "David Lee" -- Type: "From Contacts" -- Match badge: Chart icon, "65% match, Work colleague" -- INVITE button - -Footer: -- "Can't find the right person?" text -- "+ Add External Guarantor Manually" button (outlined) - -Style: AI-powered recommendations, trust indicators, social proof -``` - -### Prompt 4: Guarantor Detail Screen - -``` -Create a Guarantor Detail screen for a fintech app. - -Design specifications: -- Material Design 3 with detailed profile view -- Trust verification and history timeline - -Header (Gradient): -- Back button, More options menu -- Large avatar (96dp) with double checkmark verification rings -- Name: "John Doe" -- Type: "External Guarantor" -- Status chip: "ACTIVE" with 5-star trust rating -- Background: Gradient #667EEA to #764BA2 - -Guarantee Contribution Card: -- Large amount: "$5,000.00" (36sp bold) -- Progress bar showing 50% of total loan -- Badge row: "Rank #1 of 3", "Top Backer" trophy icon -- Badge background: #667EEA@10% - -Trust Verification Section: -- Checklist with dates: - - Identity Verified (Dec 10, 2025) - "Via government ID" - - Phone Verified (Dec 10, 2025) - "+1 *** *** 4567" - - Email Verified (Dec 10, 2025) - "j***@email.com" - - Address Verified (Dec 12, 2025) - "New York, NY" -- All items green checkmarks (#00D09C) - -Guarantee History Timeline: -- Vertical timeline with colored dots: - - Green: "Activated" - Dec 15, 2025 at 3:45 PM - - Yellow: "Confirmed" - Dec 12, 2025 at 10:30 AM - - Blue: "Invited" - Dec 10, 2025 at 2:15 PM -- Timeline line: 2dp #E1E4E8 - -Actions: -- Primary button: "Contact Guarantor" (gradient) -- Secondary link: "Edit Details" - -Style: Trust-building verification display, timeline history, professional -``` - -### Prompt 5: Add Guarantor Flow - Step 1 - -``` -Create an Add Guarantor flow - Type Selection screen for a fintech app. - -Design specifications: -- Material Design 3 with step wizard pattern -- Clear option selection - -Header: -- Cancel button (X), "Add Guarantor" title, "Step 1 of 3" - -Progress Indicator: -- Three-step progress: Type > Details > Amount -- First step active with filled dot -- Line connections between steps - -Headline: -- "Who will back your loan?" (24sp bold) -- "Choose how to add your guarantor" (14sp secondary) - -Option Cards (3): -Card 1 - Selected (From Contacts): -- Icon: Person + Plus -- Title: "From Your Contacts" -- Subtitle: "Quick invite via phone or email" -- Badge: "95% success rate for contacts" (sparkle icon) -- Selected state: Gradient border 2dp, gradient background @8%, radio filled -- Radio button selected - -Card 2 - Unselected (Existing Client): -- Icon: Search -- Title: "Existing Mifos Client" -- Subtitle: "Search registered users" -- Badge: "Already verified in our system" (lock icon) -- Radio button unselected - -Card 3 - Unselected (External): -- Icon: Pencil -- Title: "External Person" -- Subtitle: "Enter details manually" -- Badge: "Requires manual verification" (document icon) -- Radio button unselected - -Card spacing: 16dp -Card styling: White background, 20dp radius, subtle shadow - -Primary Button: -- "Continue" (gradient filled) -- Full width at bottom - -Style: Clear wizard flow, helpful badges, easy selection -``` - ---- - -## Figma MCP Prompts - -### Prompt 1: Trust Network Hub Frame - -``` -Create a Figma frame for "Guarantor - Trust Network Hub" mobile screen (375x812px). - -Components needed: -1. Status bar (system) -2. Header: Back button, "Trust Network" title, History icon - -3. Coverage Card Component: - - Auto-layout vertical - - Gradient fill: #667EEA to #764BA2 - - Circular progress ring (120dp diameter, 12dp stroke) - - Percentage text centered - - Trust score stars - - Progress bar with amount labels - -4. Quick Action Buttons: - - Two pill buttons, auto-layout horizontal - - Add Guarantor: outlined - - AI Suggest: gradient with sparkle icon - -5. Guarantor Card Component (create 3 variants): - - Active/Verified variant - - Active/Self variant - - Pending variant - - Auto-layout: avatar, info column, amount, chevron - - Status chip with color coding - - Progress bar - - 72dp min height, 20dp radius - -6. Section Header: - - Title with count badge - -Design tokens: -- Primary: #667EEA -- Secondary: #764BA2 -- Success: #00D09C -- Warning: #FFB800 -- Surface: #FFFFFF -- Background: #F8F9FA -``` - -### Prompt 2: Complete Guarantor Flow - -``` -Create a Figma prototype flow for Guarantor feature with these frames: - -Frame 1: Trust Network Hub (main) -- Coverage card with progress -- Quick actions -- Guarantor list - -Frame 2: Network Graph View -- Interactive node visualization -- Network strength metrics - -Frame 3: AI Suggestions -- Smart recommendation cards -- Match percentages - -Frame 4: Guarantor Detail -- Profile header -- Verification checklist -- History timeline - -Frame 5-7: Add Guarantor Flow -- Step 1: Type selection -- Step 2: Contact/details entry -- Step 3: Amount confirmation - -Frame 8: Invite Sent Success -- Success animation placeholder -- Share options - -Prototype connections: -- Main -> Detail via card tap -- Main -> AI Suggestions via button -- Add flow with next/back navigation - -Component variants: -- Guarantor card: active, pending, declined -- Status chip: active (green), pending (orange), declined (red) -- Trust stars: 1-5 variants -``` - ---- - -## Design Tokens - -```json -{ - "feature": "guarantor", - "version": "2.0", - "designPattern": "Trust Network Hub", - "colors": { - "primary": "#667EEA", - "secondary": "#764BA2", - "surface": "#FFFFFF", - "background": "#F8F9FA", - "success": "#00D09C", - "warning": "#FFB800", - "error": "#FF4757", - "trustHigh": "#00D09C", - "trustMedium": "#FFB800", - "trustLow": "#FF4757" - }, - "components": { - "coverageRing": { - "size": 120, - "strokeWidth": 12, - "trackColor": "rgba(255,255,255,0.2)", - "fillColor": "#FFFFFF" - }, - "guarantorCard": { - "minHeight": 72, - "padding": 16, - "radius": 20, - "avatarSize": 48, - "gap": 12 - }, - "trustStars": { - "size": 16, - "gap": 2, - "activeColor": "#FFB800", - "inactiveColor": "#E1E4E8" - }, - "statusChip": { - "height": 24, - "padding": 12, - "radius": 12, - "fontSize": 12 - } - }, - "animation": { - "ringFill": { - "duration": 1200, - "easing": "spring(0.8, 400)" - }, - "pendingPulse": { - "duration": 2000, - "type": "loop" - } - } -} -``` - ---- - -## Screen Checklist - -| Screen | Stitch Prompt | Figma Prompt | Status | -|--------|---------------|--------------|--------| -| Trust Network Hub | 1 | 1, 2 | Ready | -| Network Graph View | 2 | 2 | Ready | -| AI Suggestions | 3 | 2 | Ready | -| Guarantor Detail | 4 | 2 | Ready | -| Add Guarantor Step 1 | 5 | 2 | Ready | -| Add Guarantor Step 2 | - | 2 | Pending | -| Add Guarantor Step 3 | - | 2 | Pending | -| Invite Success | - | 2 | Pending | diff --git a/claude-product-cycle/design-spec-layer/features/guarantor/mockups/design-tokens.json b/claude-product-cycle/design-spec-layer/features/guarantor/mockups/design-tokens.json deleted file mode 100644 index ca7ab53e6..000000000 --- a/claude-product-cycle/design-spec-layer/features/guarantor/mockups/design-tokens.json +++ /dev/null @@ -1,201 +0,0 @@ -{ - "feature": "guarantor", - "version": "2.0", - "designPattern": "Trust Network Hub", - "lastUpdated": "2025-01-04", - "colors": { - "primary": { - "default": "#667EEA", - "dark": "#5A6FD6" - }, - "secondary": { - "default": "#764BA2", - "dark": "#6A4292" - }, - "surface": { - "light": "#FFFFFF", - "dark": "#1A1F2E" - }, - "background": { - "light": "#F8F9FA", - "dark": "#0D1117" - }, - "card": { - "light": "#FFFFFF", - "dark": "#21262D" - }, - "semantic": { - "success": "#00D09C", - "warning": "#FFB800", - "error": "#FF4757", - "info": "#667EEA" - }, - "trust": { - "high": "#00D09C", - "medium": "#FFB800", - "low": "#FF4757", - "pending": "#FFB800", - "verified": "#00D09C" - }, - "text": { - "primary": { - "light": "#1F2937", - "dark": "#F0F6FC" - }, - "secondary": { - "light": "#6B7280", - "dark": "#8B949E" - } - }, - "divider": { - "light": "#E1E4E8", - "dark": "#30363D" - } - }, - "gradients": { - "primary": { - "type": "linear", - "angle": 135, - "stops": [ - { "color": "#667EEA", "position": 0 }, - { "color": "#764BA2", "position": 100 } - ] - }, - "success": { - "type": "linear", - "angle": 135, - "stops": [ - { "color": "#00D09C", "position": 0 }, - { "color": "#38EF7D", "position": 100 } - ] - } - }, - "typography": { - "fontFamily": { - "primary": "Inter", - "mono": "JetBrains Mono" - }, - "styles": { - "h1": { "size": 28, "weight": 700, "lineHeight": 1.2 }, - "h2": { "size": 24, "weight": 700, "lineHeight": 1.3 }, - "h3": { "size": 20, "weight": 600, "lineHeight": 1.4 }, - "amount": { "size": 36, "weight": 700, "lineHeight": 1.2 }, - "subtitle": { "size": 16, "weight": 600, "lineHeight": 1.5 }, - "body": { "size": 14, "weight": 400, "lineHeight": 1.5 }, - "caption": { "size": 12, "weight": 400, "lineHeight": 1.4 } - } - }, - "spacing": { - "xs": 4, - "sm": 8, - "md": 16, - "lg": 24, - "xl": 32, - "xxl": 48 - }, - "radius": { - "sm": 8, - "md": 12, - "lg": 16, - "xl": 20, - "xxl": 24, - "pill": 100 - }, - "elevation": { - "card": "0 2px 8px rgba(0,0,0,0.08)", - "cardHover": "0 4px 12px rgba(0,0,0,0.12)", - "modal": "0 8px 24px rgba(0,0,0,0.16)" - }, - "components": { - "coverageRing": { - "size": 120, - "strokeWidth": 12, - "trackColor": "rgba(255,255,255,0.2)", - "fillColor": "#FFFFFF" - }, - "guarantorCard": { - "minHeight": 120, - "padding": 16, - "radius": 20, - "avatarSize": 48, - "gap": 12, - "progressHeight": 6 - }, - "trustStars": { - "size": 16, - "gap": 2, - "activeColor": "#FFB800", - "inactiveColor": "#E1E4E8" - }, - "statusChip": { - "height": 24, - "paddingHorizontal": 12, - "radius": 12, - "fontSize": 12, - "variants": { - "active": { "bg": "#00D09C15", "text": "#00D09C" }, - "pending": { "bg": "#FFB80015", "text": "#FFB800" }, - "declined": { "bg": "#FF475715", "text": "#FF4757" } - } - }, - "matchBadge": { - "height": 28, - "padding": 12, - "radius": 8, - "variants": { - "high": { "bg": "#00D09C15", "text": "#00D09C" }, - "medium": { "bg": "#FFB80015", "text": "#FFB800" }, - "low": { "bg": "#6B728015", "text": "#6B7280" } - } - }, - "avatar": { - "sizes": { - "sm": 32, - "md": 48, - "lg": 64, - "xl": 96 - }, - "borderWidth": 2, - "verifiedBadgeSize": 16 - }, - "quickAction": { - "height": 48, - "radius": 24, - "gap": 12 - }, - "progressBar": { - "height": 6, - "radius": 3, - "trackColor": "#E1E4E8" - } - }, - "animation": { - "ringFill": { - "duration": 1200, - "easing": "cubic-bezier(0.175, 0.885, 0.32, 1.275)" - }, - "pendingPulse": { - "duration": 2000, - "type": "infinite" - }, - "cardPress": { - "scale": 0.98, - "duration": 150 - }, - "nodeConnect": { - "duration": 600, - "easing": "cubic-bezier(0.4, 0.0, 0.2, 1)" - } - }, - "screens": [ - "trustNetworkHub", - "networkGraphView", - "aiSuggestions", - "guarantorDetail", - "addGuarantorType", - "addGuarantorDetails", - "addGuarantorAmount", - "inviteSuccess", - "guarantorHistory" - ] -} diff --git a/claude-product-cycle/design-spec-layer/features/guarantor/mockups/dummy/01-trust-network-hub.png b/claude-product-cycle/design-spec-layer/features/guarantor/mockups/dummy/01-trust-network-hub.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/guarantor/mockups/dummy/02-network-graph-view.png b/claude-product-cycle/design-spec-layer/features/guarantor/mockups/dummy/02-network-graph-view.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/guarantor/mockups/dummy/03-ai-suggestions.png b/claude-product-cycle/design-spec-layer/features/guarantor/mockups/dummy/03-ai-suggestions.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/guarantor/mockups/dummy/04-guarantor-detail.png b/claude-product-cycle/design-spec-layer/features/guarantor/mockups/dummy/04-guarantor-detail.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/guarantor/mockups/dummy/05-add-guarantor-type.png b/claude-product-cycle/design-spec-layer/features/guarantor/mockups/dummy/05-add-guarantor-type.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/guarantor/mockups/dummy/06-add-guarantor-details.png b/claude-product-cycle/design-spec-layer/features/guarantor/mockups/dummy/06-add-guarantor-details.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/guarantor/mockups/dummy/07-add-guarantor-amount.png b/claude-product-cycle/design-spec-layer/features/guarantor/mockups/dummy/07-add-guarantor-amount.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/guarantor/mockups/dummy/08-invite-success.png b/claude-product-cycle/design-spec-layer/features/guarantor/mockups/dummy/08-invite-success.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/home/API.md b/claude-product-cycle/design-spec-layer/features/home/API.md deleted file mode 100644 index f5c038491..000000000 --- a/claude-product-cycle/design-spec-layer/features/home/API.md +++ /dev/null @@ -1,165 +0,0 @@ -# Home Dashboard - API Reference - ---- - -## Endpoints Required - -### 1. Get Client Details - -**Endpoint**: `GET /self/clients/{clientId}` - -**Purpose**: Fetch client profile information for greeting - -**Request**: -``` -Headers: - Authorization: Basic {token} - Fineract-Platform-TenantId: {tenant} -``` - -**Response**: -```json -{ - "id": 1, - "accountNo": "000000001", - "status": { "id": 300, "value": "Active" }, - "fullname": "John Doe", - "firstname": "John", - "lastname": "Doe", - "displayName": "John Doe", - "officeId": 1, - "officeName": "Head Office" -} -``` - -**Kotlin DTO**: Uses `Client` from `core/model/entity/client/` - -**Status**: ✅ Implemented in `ClientService` - ---- - -### 2. Get Client Accounts - -**Endpoint**: `GET /self/clients/{clientId}/accounts` - -**Purpose**: Fetch all accounts (savings, loans, shares) for balance calculation - -**Request**: -``` -Headers: - Authorization: Basic {token} - Fineract-Platform-TenantId: {tenant} -``` - -**Response**: -```json -{ - "savingsAccounts": [ - { - "id": 1, - "accountNo": "000000001", - "productName": "Savings", - "status": { "id": 300, "value": "Active" }, - "currency": { "code": "USD", "displaySymbol": "$", "decimalPlaces": 2 }, - "accountBalance": 1000.00 - } - ], - "loanAccounts": [ - { - "id": 1, - "accountNo": "000000002", - "productName": "Loan", - "status": { "id": 300, "value": "Active" }, - "currency": { "code": "USD", "displaySymbol": "$", "decimalPlaces": 2 }, - "loanBalance": 5000.00 - } - ], - "shareAccounts": [] -} -``` - -**Kotlin DTO**: Uses `ClientAccounts` from `core/model/entity/client/` - -**Status**: ✅ Implemented in `ClientService` - ---- - -### 3. Get Client Image - -**Endpoint**: `GET /self/clients/{clientId}/images` - -**Purpose**: Fetch client profile image - -**Response**: Binary image data or 404 - -**Status**: ✅ Implemented in `ClientService` - ---- - -### 4. Get Notifications Count - -**Endpoint**: `GET /self/notifications` - -**Purpose**: Fetch unread notification count - -**Response**: -```json -{ - "totalFilteredRecords": 5, - "pageItems": [...] -} -``` - -**Status**: ✅ Implemented in `NotificationService` - ---- - -## API Summary - -| Endpoint | Service | Repository | Status | -|----------|---------|------------|--------| -| `/clients/{id}` | ClientService | HomeRepository | ✅ | -| `/clients/{id}/accounts` | ClientService | HomeRepository | ✅ | -| `/clients/{id}/images` | ClientService | HomeRepository | ✅ | -| `/notifications` | NotificationService | HomeRepository | ✅ | - ---- - -## Kotlin Implementation - -### Service (ClientService.kt) - -```kotlin -interface ClientService { - @GET(ApiEndPoints.CLIENTS) - fun clients(): Flow> - - @GET(ApiEndPoints.CLIENTS + "/{clientId}") - fun getClientForId(@Path("clientId") clientId: Long): Flow - - @GET(ApiEndPoints.CLIENTS + "/{clientId}/images") - fun getClientImage(@Path("clientId") clientId: Long): Flow - - @GET(ApiEndPoints.CLIENTS + "/{clientId}/accounts") - fun getClientAccounts(@Path("clientId") clientId: Long): Flow -} -``` - -### Repository (HomeRepository.kt) - -```kotlin -interface HomeRepository { - fun clientAccounts(clientId: Long): Flow> - fun currentClient(clientId: Long): Flow> - fun clientImage(clientId: Long): Flow> - fun unreadNotificationsCount(): Flow> -} -``` - ---- - -## Notes - -- Balance calculation happens client-side by summing all account balances -- Currency symbol taken from first account with balance -- Image endpoint returns 404 if no image set - handle gracefully diff --git a/claude-product-cycle/design-spec-layer/features/home/MOCKUP.md b/claude-product-cycle/design-spec-layer/features/home/MOCKUP.md deleted file mode 100644 index e943c5f85..000000000 --- a/claude-product-cycle/design-spec-layer/features/home/MOCKUP.md +++ /dev/null @@ -1,1024 +0,0 @@ -# Home Dashboard - Professional Fintech UI Mockups - -> **Design Style**: Premium Fintech (Revolut + N26 + Cash App inspired) -> **Design References**: [Banking UI Best Practices](https://procreator.design/blog/banking-app-ui-top-best-practices/), [Purrweb Guide](https://www.purrweb.com/blog/banking-app-design/) -> **Primary Gradient**: #667EEA → #764BA2 (Purple-Blue) -> **Last Updated**: 2025-12-30 | Version 2.0 - ---- - -## Design Principles Applied - -| Principle | Implementation | -|-----------|----------------| -| Smart Dashboard | Personalized, actionable insights at glance | -| Cards Over Lists | Visual hierarchy with card-based layout | -| Flat Navigation | Core features in 1-2 taps | -| Data Visualization | Charts and graphs for spending | -| Micro-interactions | Haptic feedback, smooth animations | -| Gamification | Streaks, achievements, progress rings | - ---- - -## Navigation Context - -``` -┌─────────────────────────────────────────────────────────────────────────┐ -│ NAVIGATION FLOW │ -├─────────────────────────────────────────────────────────────────────────┤ -│ │ -│ [Auth] ──► [Passcode] ──► [MAIN_GRAPH] │ -│ │ │ -│ ▼ │ -│ ┌──────────────────┐ │ -│ │ HOME SCREEN │ ◄── You are here │ -│ │ (Dashboard) │ │ -│ └────────┬─────────┘ │ -│ │ │ -│ ┌───────────────────┼───────────────────┐ │ -│ ▼ ▼ ▼ │ -│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ -│ │ Accounts │ │ Transfer │ │ Profile │ │ -│ │ (Tab 2) │ │ (FAB) │ │ (Tab 3) │ │ -│ └──────────────┘ └──────────────┘ └──────────────┘ │ -│ │ -└─────────────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Screen Structure Overview - -``` -┌─────────────────────────────────────────────────────────────────────────┐ -│ 2025 HOME SCREEN SECTIONS │ -├─────────────────────────────────────────────────────────────────────────┤ -│ │ -│ 1. TOP APP BAR │ -│ └── Greeting + Avatar + Notifications │ -│ │ -│ 2. HERO BALANCE CARD │ -│ └── Total balance + Income/Expense + Eye toggle │ -│ │ -│ 3. SPENDING ANALYTICS CARD [NEW 2025] │ -│ └── Weekly chart + Category breakdown │ -│ │ -│ 4. QUICK ACTIONS BAR │ -│ └── Transfer, Request, QR, Cards, More │ -│ │ -│ 5. RECENT RECIPIENTS [NEW 2025] │ -│ └── P2P quick send avatars │ -│ │ -│ 6. MY ACCOUNTS SECTION │ -│ └── Account cards with progress │ -│ │ -│ 7. UPCOMING BILLS [NEW 2025] │ -│ └── Due payments with actions │ -│ │ -│ 8. SAVINGS GOALS │ -│ └── Goal cards with streaks │ -│ │ -│ 9. RECENT ACTIVITY │ -│ └── Transaction list │ -│ │ -│ 10. AI ASSISTANT [NEW 2025] │ -│ └── Conversational entry point │ -│ │ -│ 11. TRUST BADGE │ -│ └── Security indicator │ -│ │ -│ BOTTOM NAVIGATION BAR │ -│ └── Home | Accounts | FAB | Profile │ -│ │ -└─────────────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Main Success State - -``` -┌────────────────────────────────────────────────────────────────┐ -│ 9:41 100% ▐▐▐▌ │ -├────────────────────────────────────────────────────────────────┤ -│ │ -│ ┌──────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ Good Morning ☀️ ┌────┐ │ │ -│ │ Maria │ 🔔 │ │ │ -│ │ ↑ 18sp, Bold │ (3)│ │ │ -│ │ └────┘ │ │ -│ │ Badge │ │ -│ └──────────────────────────────────────────────────────────┘ │ -│ │ -│ ═══════════════════════════════════════════════════════════ │ -│ SCROLLABLE CONTENT │ -│ ═══════════════════════════════════════════════════════════ │ -│ │ -│ ┌─ HERO BALANCE CARD ────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ░░│ │ -│ │░░ Total Balance 👁 ░░│ │ -│ │░░ 12sp, White 70% Eye ░░│ │ -│ │░░ ░░│ │ -│ │░░ $ 12,450.00 ░░│ │ -│ │░░ 36sp, White, ExtraBold ░░│ │ -│ │░░ ░░│ │ -│ │░░ ┌─────────────────┐ ┌─────────────────┐ ░░│ │ -│ │░░ │ ▲ +$2,450 │ │ ▼ -$890 │ ░░│ │ -│ │░░ │ This Month │ │ This Month │ ░░│ │ -│ │░░ │ INCOME │ │ EXPENSES │ ░░│ │ -│ │░░ │ #00D09C │ │ #FF4757 │ ░░│ │ -│ │░░ └─────────────────┘ └─────────────────┘ ░░│ │ -│ │░░ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └────────────────────────────────────────────────────────┘ │ -│ Gradient: #667EEA → #764BA2 | Height: 200dp | Radius: 24dp │ -│ │ -│ 16dp │ -│ │ -│ ┌─ SPENDING ANALYTICS ───────────────────────────────────┐ │ -│ │ │ │ -│ │ This Week Dec 23-30 → │ │ -│ │ │ │ -│ │ $847.50 ↓ 12% │ │ -│ │ 24sp, Bold #00D09C │ │ -│ │ │ │ -│ │ ┌──────────────────────────────────────────────────┐ │ │ -│ │ │ │ │ │ -│ │ │ ╭╮ │ │ │ -│ │ │ ╭╯╰╮ ╭─╮ │ │ │ -│ │ │ ╭╯ ╰╮ ╭╯ ╰╮ ╭╮ │ │ │ -│ │ │ ╭╯ ╰─────╯ ╰╮ ╭───────╯╰╮ │ │ │ -│ │ │ ──╯ ╰──╯ ╰───── │ │ │ -│ │ │ │ │ │ -│ │ │ M T W T F S S │ │ │ -│ │ │ │ │ │ -│ │ └──────────────────────────────────────────────────┘ │ │ -│ │ Line: Primary gradient | Fill: Primary 20% │ │ -│ │ │ │ -│ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────┐ │ │ -│ │ │ 🛒 Shop │ │ 🍕 Food │ │ 🚗 Trans │ │ ··· │ │ │ -│ │ │ $342 │ │ $215 │ │ $145 │ │ More │ │ │ -│ │ │ ████████ │ │ ██████░░ │ │ ████░░░░ │ │ │ │ │ -│ │ │ 40% │ │ 25% │ │ 17% │ │ │ │ │ -│ │ └──────────┘ └──────────┘ └──────────┘ └──────┘ │ │ -│ │ ↑ Category chips, horizontally scrollable │ │ -│ │ │ │ -│ └────────────────────────────────────────────────────────┘ │ -│ Background: Surface | Radius: 20dp | Elevation: 2dp │ -│ │ -│ 16dp │ -│ │ -│ ┌─ QUICK ACTIONS ────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌──────┐ │ │ -│ │ │ ┌──┐ │ │ ┌──┐ │ │ ┌──┐ │ │ ┌──┐ │ │┌────┐│ │ │ -│ │ │ │➡️│ │ │ │⬇️│ │ │ │📱│ │ │ │💳│ │ ││ 🔒││ │ │ -│ │ │ └──┘ │ │ └──┘ │ │ └──┘ │ │ └──┘ │ │└────┘│ │ │ -│ │ │ Send │ │ Request│ │ QR │ │ Cards │ │Freeze│ │ │ -│ │ └────────┘ └────────┘ └────────┘ └────────┘ └──────┘ │ │ -│ │ │ │ -│ │ Icon: 24dp | Container: 56dp | Gap: 16dp │ │ -│ │ Background: Surface + 8% Primary │ │ -│ │ Corner Radius: 16dp │ │ -│ │ │ │ -│ └────────────────────────────────────────────────────────┘ │ -│ │ -│ 16dp │ -│ │ -│ ┌─ SEND AGAIN (Recent Recipients) ───────────────────────┐ │ -│ │ │ │ -│ │ Send Again See All → │ │ -│ │ 16sp, SemiBold │ │ -│ │ │ │ -│ │ ← Horizontally scrollable → │ │ -│ │ │ │ -│ │ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │ │ -│ │ │ ┌──┐ │ │ ┌──┐ │ │ ┌──┐ │ │ ┌──┐ │ │ ┌──┐ │ │ │ -│ │ │ │JD│ │ │ │SK│ │ │ │MR│ │ │ │AS│ │ │ │+ │ │ │ │ -│ │ │ └──┘ │ │ └──┘ │ │ └──┘ │ │ └──┘ │ │ └──┘ │ │ │ -│ │ │ John │ │Sarah │ │ Mike │ │ Anna │ │ New │ │ │ -│ │ └──────┘ └──────┘ └──────┘ └──────┘ └──────┘ │ │ -│ │ │ │ -│ │ Avatar: 48dp | Width: 72dp | Gap: 12dp │ │ -│ │ Colors: Hash-based unique per user │ │ -│ │ │ │ -│ └────────────────────────────────────────────────────────┘ │ -│ │ -│ 20dp │ -│ │ -│ ┌─ MY ACCOUNTS ──────────────────────────────────────────┐ │ -│ │ │ │ -│ │ My Accounts View All → │ │ -│ │ 20sp, Bold │ │ -│ │ │ │ -│ │ ┌─ Account Card (Savings) ────────────────────────┐ │ │ -│ │ │ │ │ │ -│ │ │ ┌────┐ │ │ │ -│ │ │ │ 💰 │ Primary Savings ● Active ▸ │ │ │ -│ │ │ │ │ ****4521 #00D09C │ │ │ -│ │ │ │#11 │ │ │ │ -│ │ │ │998E│ $ 8,200.00 ↗ +$450/mo │ │ │ -│ │ │ └────┘ 28sp, Bold │ │ │ -│ │ │ │ │ │ -│ │ │ ████████████████████████░░░░░░░░ 82% to goal │ │ │ -│ │ │ Secondary gradient fill │ │ │ -│ │ │ │ │ │ -│ │ └──────────────────────────────────────────────────┘ │ │ -│ │ 12dp │ │ -│ │ ┌─ Account Card (Loan) ───────────────────────────┐ │ │ -│ │ │ │ │ │ -│ │ │ ┌────┐ │ │ │ -│ │ │ │ 🏦 │ Home Loan ● Active ▸ │ │ │ -│ │ │ │ │ ****7823 │ │ │ -│ │ │ │#667│ │ │ │ -│ │ │ │EEA │ -$ 45,200.00 Due: Jan 15 │ │ │ -│ │ │ └────┘ │ │ │ -│ │ │ │ │ │ -│ │ │ ████████████░░░░░░░░░░░░░░░░░░░░ 28% paid │ │ │ -│ │ │ │ │ │ -│ │ └──────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ └────────────────────────────────────────────────────────┘ │ -│ │ -│ 20dp │ -│ │ -│ ┌─ UPCOMING BILLS ───────────────────────────────────────┐ │ -│ │ │ │ -│ │ Due This Week Manage → │ │ -│ │ 16sp, SemiBold │ │ -│ │ │ │ -│ │ ┌─ Bill Card ─────────────────────────────────────┐ │ │ -│ │ │▌ │ │ │ -│ │ │▌ ┌────┐ │ │ │ -│ │ │▌ │ ⚡ │ Electricity Bill Due Tomorrow │ │ │ -│ │ │▌ │ │ Power Company Co. ● Urgent │ │ │ -│ │ │▌ │#FFB│ #FF4757 │ │ │ -│ │ │▌ │800 │ $142.50 │ │ │ -│ │ │▌ └────┘ │ │ │ -│ │ │▌ │ │ │ -│ │ │▌ ┌──────────────┐ ┌──────────────┐ │ │ │ -│ │ │▌ │ Pay Now │ │ Schedule │ │ │ │ -│ │ │▌ │ Gradient │ │ Outlined │ │ │ │ -│ │ │▌ └──────────────┘ └──────────────┘ │ │ │ -│ │ │▌ │ │ │ -│ │ └─────────────────────────────────────────────────┘ │ │ -│ │ ↑ Left border: 4dp, #FF4757 (urgent) │ │ -│ │ │ │ -│ │ 8dp │ │ -│ │ │ │ -│ │ ┌─ Bill Card ─────────────────────────────────────┐ │ │ -│ │ │▌ │ │ │ -│ │ │▌ ┌────┐ │ │ │ -│ │ │▌ │ 🏠 │ Rent Payment Due Dec 31 │ │ │ -│ │ │▌ │ │ Landlord Inc. │ │ │ -│ │ │▌ │#667│ │ │ │ -│ │ │▌ │EEA │ $1,500.00 │ │ │ -│ │ │▌ └────┘ │ │ │ -│ │ │▌ │ │ │ -│ │ │▌ ┌──────────────┐ ┌──────────────┐ │ │ │ -│ │ │▌ │ Pay Now │ │ Schedule │ │ │ │ -│ │ │▌ └──────────────┘ └──────────────┘ │ │ │ -│ │ │▌ │ │ │ -│ │ └─────────────────────────────────────────────────┘ │ │ -│ │ ↑ Left border: 4dp, #667EEA (normal) │ │ -│ │ │ │ -│ │ ┌─ Summary ───────────────────────────────────────┐ │ │ -│ │ │ Total due this week: $1,642.50 │ │ │ -│ │ └─────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ └────────────────────────────────────────────────────────┘ │ -│ │ -│ 20dp │ -│ │ -│ ┌─ SAVINGS GOALS ────────────────────────────────────────┐ │ -│ │ │ │ -│ │ Savings Goals View All → │ │ -│ │ │ │ -│ │ ← Horizontally scrollable → │ │ -│ │ │ │ -│ │ ┌─ Goal Card 1 ──────────────┐ ┌─ Goal Card 2 ────┐ │ │ -│ │ │ │ │ │ │ │ -│ │ │ ┌──────────┐ │ │ ┌──────────┐ │ │ │ -│ │ │ │ ╭──╮ │ 🏖️ │ │ │ ╭──╮ │ 🚗 │ │ │ -│ │ │ │ │ │ │ Vacation │ │ │ │ │ │ Car│ │ │ -│ │ │ │ │60│ │ Fund │ │ │ │35│ │ Fun│ │ │ -│ │ │ │ │% │ │ │ │ │ │% │ │ │ │ │ -│ │ │ │ ╰──╯ │ $1,200 │ │ │ ╰──╯ │$7000│ │ │ -│ │ │ │ Progress │ ────── │ │ │ │─────│ │ │ -│ │ │ │ Ring │ $2,000 │ │ │ │$20K │ │ │ -│ │ │ └──────────┘ │ │ └──────────┘ │ │ │ -│ │ │ │ │ │ │ │ -│ │ │ 🔥 15 day streak │ │ 🔥 3 day streak │ │ │ -│ │ │ ↑ Gamification │ │ │ │ │ -│ │ │ │ │ │ │ │ -│ │ │ ┌────────┐ ┌────────┐ │ │ ┌────────┐ │ │ │ -│ │ │ │Add $50 │ │Details │ │ │ │Add $100│ │ │ │ -│ │ │ └────────┘ └────────┘ │ │ └────────┘ │ │ │ -│ │ │ │ │ │ │ │ -│ │ └────────────────────────────┘ └───────────────────┘ │ │ -│ │ Width: 280dp | Gap: 12dp │ │ -│ │ │ │ -│ └────────────────────────────────────────────────────────┘ │ -│ │ -│ 20dp │ -│ │ -│ ┌─ RECENT ACTIVITY ──────────────────────────────────────┐ │ -│ │ │ │ -│ │ Recent Activity View All → │ │ -│ │ │ │ -│ │ TODAY │ │ -│ │ ──── │ │ -│ │ │ │ -│ │ ┌─ Transaction ───────────────────────────────────┐ │ │ -│ │ │ │ │ │ -│ │ │ ┌────┐ │ │ │ -│ │ │ │ 🛒 │ Amazon Prime -$14.99 │ │ │ -│ │ │ │ │ Shopping • 2:34 PM #FF4757 │ │ │ -│ │ │ │Pink│ │ │ │ -│ │ │ └────┘ │ │ │ -│ │ │ │ │ │ -│ │ └──────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ ┌─ Transaction ───────────────────────────────────┐ │ │ -│ │ │ │ │ │ -│ │ │ ┌────┐ │ │ │ -│ │ │ │ ☕ │ Starbucks -$5.45 │ │ │ -│ │ │ │ │ Food & Drink • 9:15 AM │ │ │ -│ │ │ │Orng│ │ │ │ -│ │ │ └────┘ │ │ │ -│ │ │ │ │ │ -│ │ └──────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ YESTERDAY │ │ -│ │ ───────── │ │ -│ │ │ │ -│ │ ┌─ Transaction ───────────────────────────────────┐ │ │ -│ │ │ │ │ │ -│ │ │ ┌────┐ │ │ │ -│ │ │ │ 💼 │ Salary Deposit +$3,500.00 │ │ │ -│ │ │ │ │ Income #00D09C │ │ │ -│ │ │ │Teal│ │ │ │ -│ │ │ └────┘ │ │ │ -│ │ │ │ │ │ -│ │ └──────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ └────────────────────────────────────────────────────────┘ │ -│ │ -│ 20dp │ -│ │ -│ ┌─ AI ASSISTANT ─────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ░░│ │ -│ │░░ ┌────┐ ░░│ │ -│ │░░ │ 🤖 │ Need help with anything? ░░│ │ -│ │░░ │ AI │ ░░│ │ -│ │░░ └────┘ Ask me about spending, savings, ░░│ │ -│ │░░ or transfers. ░░│ │ -│ │░░ ░░│ │ -│ │░░ ┌──────────────────────────────────────────┐ ░░│ │ -│ │░░ │ 💬 Type your question... 🎤 │ ░░│ │ -│ │░░ └──────────────────────────────────────────┘ ░░│ │ -│ │░░ ░░│ │ -│ │░░ Suggestions: ░░│ │ -│ │░░ ┌─────────────┐ ┌──────────────┐ ┌────────────┐ ░░│ │ -│ │░░ │ How much │ │ Transfer to │ │ Set budget │ ░░│ │ -│ │░░ │ did I spend?│ │ John │ │ for food │ ░░│ │ -│ │░░ └─────────────┘ └──────────────┘ └────────────┘ ░░│ │ -│ │░░ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └────────────────────────────────────────────────────────┘ │ -│ Background: Tertiary gradient 15% + border │ -│ │ -│ 20dp │ -│ │ -│ ┌─ TRUST BADGE ──────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 🔒 256-bit encryption • Instant transfers │ │ -│ │ 12sp, #9CA3AF, Center │ │ -│ │ │ │ -│ └────────────────────────────────────────────────────────┘ │ -│ │ -│ 80dp (bottom nav + safe area) │ -│ │ -│ ═══════════════════════════════════════════════════════════ │ -│ END SCROLLABLE │ -│ ═══════════════════════════════════════════════════════════ │ -│ │ -│ ┌─ BOTTOM NAVIGATION ────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ░░│ │ -│ │░░ ┌────┐ ┌────┐ ┌────┐ ░░│ │ -│ │░░ │ ⌂ │ │ ≡ │ ┌───────────┐ │ 👤 │ ░░│ │ -│ │░░ │#667│ │#6B7│ │░░░░░░░░░░░│ │#6B7│ ░░│ │ -│ │░░ │EEA │ │280 │ │░░ 💸 ░░│ │280 │ ░░│ │ -│ │░░ └────┘ └────┘ │░░░░░░░░░░░│ └────┘ ░░│ │ -│ │░░ Home Accounts└───────────┘ Profile ░░│ │ -│ │░░ ACTIVE INACTIVE ↑ FAB 56dp INACTIVE ░░│ │ -│ │░░ Gradient bg ░░│ │ -│ │░░ Y-offset: -16dp ░░│ │ -│ │░░ Shadow glow ░░│ │ -│ │░░ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └────────────────────────────────────────────────────────┘ │ -│ Height: 64dp | Background: Surface │ -│ │ -└────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Loading State - -``` -┌────────────────────────────────────────────────────────────────┐ -│ 9:41 100% ▐▐▐▌ │ -├────────────────────────────────────────────────────────────────┤ -│ │ -│ Good Morning ☀️ 🔔 │ -│ ████████████ │ -│ ↑ Shimmer │ -│ │ -│ ┌────────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ████████████████████ ░░│ │ -│ │░░ ░░│ │ -│ │░░ ████████████████████████████████ ░░│ │ -│ │░░ ░░│ │ -│ │░░ ┌──────────────────┐ ┌──────────────────┐ ░░│ │ -│ │░░ │ ████████████ │ │ ████████████ │ ░░│ │ -│ │░░ │ ████████ │ │ ████████ │ ░░│ │ -│ │░░ └──────────────────┘ └──────────────────┘ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └────────────────────────────────────────────────────────┘ │ -│ ↑ Hero card skeleton with shimmer │ -│ │ -│ ┌────────────────────────────────────────────────────────┐ │ -│ │ ████████████████████████████████████████████████████ │ │ -│ │ ████████████████████████████████ │ │ -│ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ -│ │ │ ██████ │ │ ██████ │ │ ██████ │ │ │ -│ │ │ ██████ │ │ ██████ │ │ ██████ │ │ │ -│ │ └──────────┘ └──────────┘ └──────────┘ │ │ -│ └────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │ -│ │████│ │████│ │████│ │████│ │████│ │ -│ └────┘ └────┘ └────┘ └────┘ └────┘ │ -│ ↑ Quick actions skeleton │ -│ │ -│ ┌────────────────────────────────────────────────────────┐ │ -│ │ ████████████████████ │ │ -│ │ ┌───────────────────────────────────────────────────┐ │ │ -│ │ │ ┌───┐ │ │ │ -│ │ │ │███│ ████████████████ ████████████ │ │ │ -│ │ │ └───┘ ██████████████████████████████████ │ │ │ -│ │ │ ████████████████████████████ │ │ │ -│ │ └───────────────────────────────────────────────────┘ │ │ -│ └────────────────────────────────────────────────────────┘ │ -│ │ -│ Shimmer: Left-to-right sweep, 1000ms, infinite loop │ -│ │ -└────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Empty State - -``` -┌────────────────────────────────────────────────────────────────┐ -│ 9:41 100% ▐▐▐▌ │ -├────────────────────────────────────────────────────────────────┤ -│ │ -│ Good Morning ☀️ 🔔 │ -│ Maria │ -│ │ -│ ┌────────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ Total Balance ░░│ │ -│ │░░ $0.00 ░░│ │ -│ │░░ ░░│ │ -│ │░░ ┌──────────────────┐ ┌──────────────────┐ ░░│ │ -│ │░░ │ ▲ $0.00 │ │ ▼ $0.00 │ ░░│ │ -│ │░░ │ INCOME │ │ EXPENSES │ ░░│ │ -│ │░░ └──────────────────┘ └──────────────────┘ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └────────────────────────────────────────────────────────┘ │ -│ │ -│ [Quick Actions - Same as success] │ -│ │ -│ │ -│ │ -│ ┌──────────────────┐ │ -│ │ │ │ -│ │ 📊 │ │ -│ │ ╱ ╲ │ │ -│ │ ╱──────╲ │ │ -│ │ ╱ ╲ │ │ -│ │ │ │ -│ └──────────────────┘ │ -│ ↑ Illustration 160dp │ -│ │ -│ No Accounts Yet │ -│ ══════════════════ │ -│ 20sp, Bold │ -│ │ -│ Start your financial journey by │ -│ opening your first account. │ -│ ↑ 14sp, #6B7280, Center │ -│ │ -│ ┌────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░░░ + Open New Account ░░░░░░░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └────────────────────────────────┘ │ -│ │ -│ Learn More → │ -│ │ -│ │ -└────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Error State - -``` -┌────────────────────────────────────────────────────────────────┐ -│ 9:41 100% ▐▐▐▌ │ -├────────────────────────────────────────────────────────────────┤ -│ │ -│ Good Morning ☀️ 🔔 │ -│ User │ -│ │ -│ │ -│ │ -│ │ -│ ┌──────────────────┐ │ -│ │ │ │ -│ │ ⚠️ │ │ -│ │ ╱ ╲ │ │ -│ │ ╱ ╲ │ │ -│ │ ╱ ! ╲ │ │ -│ │ ╱───────╲ │ │ -│ │ │ │ -│ └──────────────────┘ │ -│ ↑ #FF4757 accent │ -│ │ -│ Something Went Wrong │ -│ ════════════════════ │ -│ 20sp, Bold │ -│ │ -│ We couldn't load your account information. │ -│ Please check your connection and try again. │ -│ │ -│ │ -│ ┌────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░░░░░░░░ Try Again ░░░░░░░░░░░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └────────────────────────────────┘ │ -│ │ -│ Contact Support │ -│ ↑ Text button │ -│ │ -│ │ -└────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Offline Banner State - -``` -┌────────────────────────────────────────────────────────────────┐ -│ 9:41 100% ▐▐▐▌ │ -├────────────────────────────────────────────────────────────────┤ -│ │ -│ ┌────────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ 📡 You're offline. Some features unavailable. ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └────────────────────────────────────────────────────────┘ │ -│ Background: #FFB800 15% | Height: 48dp │ -│ │ -│ Good Morning ☀️ 🔔 │ -│ Maria │ -│ │ -│ ┌────────────────────────────────────────────────────────┐ │ -│ │ [Cached data at 70% opacity] │ │ -│ │ │ │ -│ │ 🔄 Last sync: 2 min ago │ │ -│ │ ↑ Sync indicator │ │ -│ └────────────────────────────────────────────────────────┘ │ -│ │ -│ Pull-to-refresh: "Trying to reconnect..." │ -│ │ -└────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Component Specifications - -### Hero Balance Card - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ HERO BALANCE CARD │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ Dimensions: │ -│ - Width: Full width - 32dp (16dp margin each side) │ -│ - Height: 200dp │ -│ - Corner Radius: 24dp │ -│ - Padding: 24dp │ -│ │ -│ Background: │ -│ - Gradient: #667EEA (top-left) → #764BA2 (bottom-right) │ -│ - Angle: 135° │ -│ │ -│ Shadow: │ -│ - Blur: 16dp │ -│ - Offset: 0, 8dp │ -│ - Color: Primary at 25% opacity │ -│ │ -│ Typography: │ -│ - Label: 12sp, White 70%, SemiBold │ -│ - Balance: 36sp, White 100%, ExtraBold │ -│ - Income/Expense: 14sp, Green/Red, SemiBold │ -│ │ -│ Eye Toggle: │ -│ - Size: 24dp │ -│ - Color: White 70% │ -│ - Tap area: 48dp x 48dp │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - -### Spending Analytics Card - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ SPENDING ANALYTICS CARD │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ Dimensions: │ -│ - Height: Auto (approx 220dp) │ -│ - Corner Radius: 20dp │ -│ - Padding: 16dp │ -│ │ -│ Chart: │ -│ - Type: Line chart with gradient fill │ -│ - Height: 80dp │ -│ - Line: 2dp stroke, Primary gradient │ -│ - Fill: Primary gradient at 20% opacity │ -│ - Dots: 6dp, show on touch │ -│ │ -│ Category Chips: │ -│ - Height: 64dp │ -│ - Width: 100dp │ -│ - Gap: 8dp │ -│ - Corner Radius: 12dp │ -│ - Background: Category color at 10% opacity │ -│ - Progress: 4dp bar at bottom │ -│ │ -│ Interaction: │ -│ - Tap chart: Navigate to full analytics │ -│ - Tap category: Filter transactions │ -│ - Touch hold: Show tooltip with amount │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - -### Quick Action Button - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ QUICK ACTION BUTTON │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ Container: │ -│ - Size: 56dp x 56dp │ -│ - Corner Radius: 16dp │ -│ - Background: Surface + 8% Primary tint │ -│ │ -│ Icon: │ -│ - Size: 24dp │ -│ - Color: Primary (#667EEA) │ -│ │ -│ Label: │ -│ - Size: 12sp │ -│ - Weight: Medium │ -│ - Color: #1F2937 │ -│ - Margin Top: 8dp │ -│ │ -│ States: │ -│ - Default: As above │ -│ - Pressed: Scale 0.95, ripple │ -│ - Disabled: Opacity 50% │ -│ │ -│ Haptic: Light impact on press │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - -### Account Card - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ ACCOUNT CARD │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ Dimensions: │ -│ - Height: ~110dp (auto) │ -│ - Corner Radius: 16dp │ -│ - Padding: 16dp │ -│ - Elevation: 2dp │ -│ - Margin Bottom: 12dp │ -│ │ -│ Icon Container: │ -│ - Size: 44dp x 44dp │ -│ - Corner Radius: 12dp │ -│ - Background: Account type color at 12% opacity │ -│ │ -│ Status Indicator: │ -│ - Size: 8dp circle │ -│ - Active: #00D09C │ -│ - Pending: #FFB800 │ -│ - Inactive: #FF4757 │ -│ │ -│ Progress Bar: │ -│ - Height: 6dp │ -│ - Corner Radius: 3dp │ -│ - Fill: Secondary gradient │ -│ - Track: #E1E4E8 │ -│ │ -│ Interaction: │ -│ - Tap: Navigate to account details │ -│ - Press: Scale 0.98, elevation increase │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - -### Bill Card - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ BILL CARD │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ Dimensions: │ -│ - Height: ~140dp (auto) │ -│ - Corner Radius: 16dp │ -│ - Padding: 16dp │ -│ - Left Border: 4dp (urgency color) │ -│ │ -│ Urgency Colors: │ -│ - Tomorrow/Overdue: #FF4757 (Red) │ -│ - 2-3 days: #FFB800 (Amber) │ -│ - 4-7 days: #667EEA (Primary) │ -│ │ -│ Action Buttons: │ -│ - Pay Now: Gradient fill, 40dp height │ -│ - Schedule: Outlined, 40dp height │ -│ - Gap: 12dp │ -│ │ -│ Haptic: │ -│ - Pay Now: Medium impact │ -│ - Success: Success pattern │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Animations & Micro-interactions - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ ANIMATION SPECIFICATIONS │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ 1. PULL-TO-REFRESH │ -│ Duration: 300ms spring │ -│ Damping: 0.7 │ -│ Stiffness: 400 │ -│ Haptic: Light impact when threshold crossed │ -│ │ -│ 2. BALANCE VISIBILITY TOGGLE │ -│ Show: 300ms, scale 0.95 → 1.0, fade in │ -│ Hide: 100ms instant (privacy = immediate) │ -│ Haptic: Light tap │ -│ │ -│ 3. CARD PRESS │ -│ Press: Scale 0.98, 100ms │ -│ Release: Scale 1.0, 100ms │ -│ Ripple: 300ms from touch point │ -│ │ -│ 4. CHART INTERACTION │ -│ Touch: Show tooltip with amount │ -│ Scrub: Update tooltip as finger moves │ -│ Release: Fade tooltip 200ms │ -│ Haptic: Light tap on each data point │ -│ │ -│ 5. CATEGORY CHIP TAP │ -│ Tap: Scale 1.05, 100ms │ -│ Selected: Fill transition 200ms │ -│ │ -│ 6. RECIPIENT AVATAR TAP │ -│ Tap: Ring highlight appears │ -│ Navigate: Shared element to transfer │ -│ │ -│ 7. BILL PAY BUTTON │ -│ Loading: Spinner replaces text │ -│ Success: Checkmark animation │ -│ Haptic: Success pattern │ -│ │ -│ 8. STREAK INCREMENT │ -│ Number: Typewriter count up │ -│ Fire emoji: Pulse and grow │ -│ Background: Golden glow pulse │ -│ │ -│ 9. SKELETON SHIMMER │ -│ Direction: Left to right │ -│ Duration: 1000ms │ -│ Repeat: Infinite │ -│ Colors: Surface → Highlight → Surface │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Accessibility - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ ACCESSIBILITY SPECIFICATIONS │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ TOUCH TARGETS │ -│ Minimum: 48dp x 48dp │ -│ Recommended: 56dp for primary actions │ -│ Spacing: 8dp between adjacent targets │ -│ │ -│ COLOR CONTRAST │ -│ Text on background: 4.5:1 minimum (WCAG AA) │ -│ Text on gradient: 4.5:1 (white on #667EEA = 4.7:1 ✓) │ -│ │ -│ SCREEN READER LABELS │ -│ Balance Card: "Total balance, 12,450 dollars" │ -│ Eye toggle: "Toggle balance visibility, currently visible" │ -│ Account Card: "Primary Savings, balance 8,200 dollars, Active" │ -│ Quick Action: "Send money, button" │ -│ Bill Card: "Electricity bill, 142 dollars, due tomorrow" │ -│ │ -│ FOCUS ORDER │ -│ 1. Notification bell │ -│ 2. Balance card (with eye toggle) │ -│ 3. Quick actions (left to right) │ -│ 4. Account cards (top to bottom) │ -│ 5. Bottom navigation │ -│ │ -│ REDUCED MOTION │ -│ When enabled: Instant transitions │ -│ Keep: Color changes, state indicators │ -│ Skip: Shimmer, chart animations, confetti │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Dark Mode - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ DARK MODE COLOR MAPPING │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ Element │ Light │ Dark │ -│ ─────────────────────┼────────────────┼───────────────────── │ -│ Screen Background │ #F8F9FA │ #0D1117 │ -│ Card Background │ #FFFFFF │ #21262D │ -│ Surface │ #FFFFFF │ #161B22 │ -│ Primary Text │ #1F2937 │ #F0F6FC │ -│ Secondary Text │ #6B7280 │ #8B949E │ -│ Divider │ #E1E4E8 │ #30363D │ -│ Progress Track │ #E1E4E8 │ #30363D │ -│ ─────────────────────┼────────────────┼───────────────────── │ -│ PRESERVED (same): │ │ │ -│ Primary Gradient │ #667EEA-764BA2 │ Same (85% opacity) │ -│ Secondary Gradient │ #11998E-38EF7D │ Same │ -│ Success │ #00D09C │ Same │ -│ Error │ #FF4757 │ Same │ -│ Warning │ #FFB800 │ Same │ -│ │ -│ Note: Shadows disabled in dark mode │ -│ Use surface color differentiation instead │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Implementation Structure - -```kotlin -@Composable -fun HomeScreen( - state: HomeState, - onAction: (HomeAction) -> Unit, - modifier: Modifier = Modifier -) { - Scaffold( - topBar = { HomeTopAppBar(state.userName, state.notificationCount) }, - bottomBar = { MifosBottomNavigation(selectedTab = HOME) } - ) { paddingValues -> - SwipeRefresh( - refreshing = state.isLoading, - onRefresh = { onAction(HomeAction.Refresh) } - ) { - LazyColumn(modifier = Modifier.padding(paddingValues)) { - item { HeroBalanceCard(state.balance, state.income, state.expenses) } - item { SpendingAnalyticsCard(state.weeklySpending) } - item { QuickActionsRow(onAction) } - item { RecentRecipientsRow(state.recipients, onAction) } - item { MyAccountsSection(state.accounts, onAction) } - item { UpcomingBillsSection(state.bills, onAction) } - item { SavingsGoalsSection(state.goals, onAction) } - item { RecentActivitySection(state.transactions, onAction) } - item { AIAssistantCard(onAction) } - item { TrustBadge() } - item { Spacer(Modifier.height(80.dp)) } - } - } - } -} -``` - ---- - -## Changelog - -| Date | Version | Changes | -|------|---------|---------| -| 2025-12-30 | 1.0 | Initial mockup | -| 2025-12-30 | 2.0 | Complete redesign with 2025 fintech patterns | - -### New in Version 2.0 -- Added Spending Analytics Chart -- Added Recent Recipients (P2P) section -- Added Upcoming Bills section -- Added AI Assistant entry point -- Enhanced gamification with streaks -- Improved micro-interactions -- Added comprehensive accessibility specs - ---- - -## Data Binding Reference - -> **For `/implement` command**: Maps UI components to API.md sections. -> **Source of Truth**: See `API.md` for complete endpoint details. - -### Screen → API.md Mapping - -| Screen Component | API.md Section | Key Fields | -|------------------|----------------|------------| -| Hero Balance Card | `Endpoints Required → 1. Client Info` | Calculated from accounts | -| Greeting Section | `Endpoints Required → 1. Client Info` | `displayName`, `firstname` | -| Avatar Image | `Endpoints Required → 2. Client Image` | Binary image | -| Accounts Summary | `Endpoints Required → 3. Client Accounts` | `savingsAccounts[]`, `loanAccounts[]` | -| Recent Transactions | `Endpoints Required → 4. Recent Transactions` | `pageItems[]` | -| Notification Badge | `Endpoints Required → 5. Notifications` | `totalFilteredRecords` | - -### Client-Only Features - -| Feature | Storage | Notes | -|---------|---------|-------| -| Total Balance Calculation | Client-side | Sum savings + shares - loans | -| Spending Analytics | DataStore | Not in Fineract API | -| Recent Recipients | DataStore | Local history | -| Financial Health Score | Client-side | Calculated from account data | -| Savings Streak | DataStore | Gamification layer | - -### Actions → API.md Mapping - -| User Action | API.md Reference | Navigation | -|-------------|------------------|------------| -| Pull to Refresh | `1. Client Info` + `3. Client Accounts` | Reload data | -| Tap Account Card | See `accounts/API.md` | → Account Detail | -| Tap Transaction | `4. Recent Transactions` | → Transaction Detail | -| Tap Notification | `5. Notifications` | → Notifications | - -### Data Refresh Strategy - -| Event | API.md Sections to Refresh | -|-------|----------------------------| -| Screen Load | `1`, `3`, `4` | -| Pull to Refresh | All sections | -| Return from Transfer | `3. Client Accounts` | diff --git a/claude-product-cycle/design-spec-layer/features/home/SPEC.md b/claude-product-cycle/design-spec-layer/features/home/SPEC.md deleted file mode 100644 index 4b15b1237..000000000 --- a/claude-product-cycle/design-spec-layer/features/home/SPEC.md +++ /dev/null @@ -1,173 +0,0 @@ -# Home Dashboard - Feature Specification - -> **Purpose**: Display client overview, account balances, and quick access to services -> **User Value**: Central hub for viewing financial status at a glance -> **Last Updated**: 2025-12-26 - ---- - -## 1. Overview - -### 1.1 Feature Summary -The Home Dashboard is the main screen after login, displaying the client's financial overview including total savings and loan balances, quick access to services, and notification count. It serves as the navigation hub for all app features. - -### 1.2 User Stories -- As a user, I want to see my total savings balance so I can track my savings -- As a user, I want to see my total loan balance so I can track my debt -- As a user, I want quick access to common services so I can navigate efficiently -- As a user, I want to see notification count so I know if there are updates - ---- - -## 2. Screen Layout - -### 2.1 ASCII Mockup - -``` -┌─────────────────────────────────────────┐ -│ Hello, [FirstName] 🔔[n] │ ← TopBar with notification -├─────────────────────────────────────────┤ -│ │ -│ ┌─────────────────────────────────┐ │ -│ │ Total Savings 👁 │ │ ← Amount visibility toggle -│ │ [$X,XXX.XX] or [****] │ │ -│ └─────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────┐ │ -│ │ Total Loans 👁 │ │ -│ │ [$X,XXX.XX] or [****] │ │ -│ └─────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────┐ │ -│ │ Services │ │ -│ │ ┌─────┐ ┌─────┐ ┌─────┐ │ │ -│ │ │Accts│ │Trans│ │Benef│ │ │ -│ │ └─────┘ └─────┘ └─────┘ │ │ -│ │ ┌─────┐ ┌─────┐ ┌─────┐ │ │ -│ │ │Chrgs│ │Apply│ │More │ │ │ -│ │ └─────┘ └─────┘ └─────┘ │ │ -│ └─────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────┐ │ -│ │ [+] Apply for New Account │ │ ← Bottom sheet trigger -│ └─────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────┘ -``` - -### 2.2 Sections Table - -| # | Section | Description | API | Priority | -|---|---------|-------------|-----|----------| -| 1 | Header | Greeting + notification | clients/{id}, notifications | P0 | -| 2 | Savings Balance | Total savings amount | clients/{id}/accounts | P0 | -| 3 | Loans Balance | Total loans amount | clients/{id}/accounts | P0 | -| 4 | Services Grid | Quick access cards | - | P0 | -| 5 | Apply Button | New account application | - | P1 | - ---- - -## 3. User Interactions - -| Action | Trigger | Result | API Call | -|--------|---------|--------|----------| -| View notification | Tap bell icon | Navigate to notifications | - | -| Toggle amount | Tap eye icon | Show/hide amounts | - | -| Tap service card | Click card | Navigate to service | - | -| Pull refresh | Swipe down | Reload all data | clients/{id}/accounts | -| Apply account | Tap + button | Show bottom sheet | - | - ---- - -## 4. State Model - -```kotlin -@Immutable -internal data class HomeState( - val clientId: Long? = 0, - val firstName: String? = "", - val currency: String? = "", - val decimals: Int = 2, - val isAccountsPresent: Boolean = true, - val username: String = "", - val clientAccounts: ClientAccounts? = null, - val notificationCount: Int = 0, - val loanAmount: String = "", - val savingsAmount: String = "", - val isAmountVisible: Boolean = false, - val dialogState: DialogState? = null, - val items: ImmutableList, - val networkStatus: Boolean = true, - val uiState: HomeScreenState?, -) { - sealed interface DialogState { - data class Error(val message: StringResource) : DialogState - data class ShowAccountApplyBottomBar(val isVisible: Boolean) : DialogState - } -} - -sealed interface HomeScreenState { - data object Loading : HomeScreenState - data object Success : HomeScreenState - data class Error(val message: StringResource) : HomeScreenState - data object Network : HomeScreenState -} - -// Home Events -sealed interface HomeEvent { - data class Navigate(val route: String) : HomeEvent - data object NavigateToNotification : HomeEvent -} - -// Home Actions -sealed interface HomeAction { - data class OnNavigate(val route: String) : HomeAction - data object OnNotificationClick : HomeAction - data object OnDismissDialog : HomeAction - data object ToggleAmountVisible : HomeAction - data class ObserveNetworkStatus(val isOnline: Boolean) : HomeAction - data object Retry : HomeAction - data object BottomBarPicker : HomeAction -} -``` - ---- - -## 5. API Requirements - -| Endpoint | Method | Purpose | Status | -|----------|--------|---------|--------| -| `/clients/{clientId}` | GET | Get client details | ✅ Exists | -| `/clients/{clientId}/accounts` | GET | Get all accounts | ✅ Exists | -| `/clients/{clientId}/images` | GET | Get profile image | ✅ Exists | -| `/notifications` | GET | Get notifications | ✅ Exists | - ---- - -## 6. Edge Cases & Error Handling - -| Scenario | Behavior | UI Feedback | -|----------|----------|-------------| -| No internet | Show network state | "No internet connection" | -| No accounts | Hide balance cards | "No accounts found" | -| API error | Show error state | Error message + retry | -| Image not found | Show placeholder | Default avatar | - ---- - -## 7. Components - -| Component | Props | Reusable? | -|-----------|-------|-----------| -| BalanceCard | title, amount, isVisible, onToggle | Yes | -| ServiceCard | icon, title, onClick | Yes | -| NotificationBadge | count | Yes | - ---- - -## Changelog - -| Date | Change | -|------|--------| -| 2025-12-29 | Updated state models to match actual implementation, added Events/Actions | -| 2025-12-26 | Initial spec | diff --git a/claude-product-cycle/design-spec-layer/features/home/STATUS.md b/claude-product-cycle/design-spec-layer/features/home/STATUS.md deleted file mode 100644 index b2c12e210..000000000 --- a/claude-product-cycle/design-spec-layer/features/home/STATUS.md +++ /dev/null @@ -1,63 +0,0 @@ -# Home Dashboard - Implementation Status - -> **Last Updated**: 2025-12-26 -> **Overall Status**: ✅ Done - ---- - -## Implementation Checklist - -- [x] SPEC.md created -- [x] API.md created -- [x] Network: Services exist (ClientService) -- [x] Data: Repository exists (HomeRepository) -- [x] Feature: ViewModel + Screen -- [x] Navigation: Route registered -- [x] DI: Modules registered -- [x] STATUS.md updated - ---- - -## Layer Status - -| Layer | Status | Files | -|-------|--------|-------| -| Network | ✅ | ClientService.kt, NotificationService.kt | -| Data | ✅ | HomeRepository.kt, HomeRepositoryImpl.kt | -| Feature | ✅ | HomeViewModel.kt, HomeScreen.kt | -| DI | ✅ | HomeModule.kt | -| Navigation | ✅ | HomeNavigation.kt | - ---- - -## Files - -### Network Layer -- `core/network/services/ClientService.kt` -- `core/network/services/NotificationService.kt` - -### Data Layer -- `core/data/repository/HomeRepository.kt` -- `core/data/repositoryImpl/HomeRepositoryImpl.kt` - -### Feature Layer -- `feature/home/HomeViewModel.kt` -- `feature/home/HomeScreen.kt` -- `feature/home/ServiceItem.kt` -- `feature/home/components/BottomSheetContent.kt` -- `feature/home/navigation/HomeNavigation.kt` -- `feature/home/di/HomeModule.kt` - ---- - -## Gaps - -None identified. - ---- - -## Changelog - -| Date | Change | -|------|--------| -| 2025-12-26 | Initial status documentation | diff --git a/claude-product-cycle/design-spec-layer/features/home/mockups/PROMPTS_FIGMA.md b/claude-product-cycle/design-spec-layer/features/home/mockups/PROMPTS_FIGMA.md deleted file mode 100644 index 25a4d16df..000000000 --- a/claude-product-cycle/design-spec-layer/features/home/mockups/PROMPTS_FIGMA.md +++ /dev/null @@ -1,204 +0,0 @@ -# Home Dashboard - Figma First Draft Prompts - -> **Tool**: Figma First Draft (Shift+I in Figma) -> **Style**: Premium Fintech, Modern Banking App -> **Format**: Natural language prompts optimized for Figma AI - ---- - -## How to Use - -1. Open Figma → Create new design file -2. Press `Shift + I` or click "Actions" → "First Draft" -3. Copy each prompt below -4. Generate → Iterate → Refine - ---- - -## Screen 1: Home Dashboard - -``` -Design a modern mobile banking home dashboard for "Mifos Mobile" app. - -At the top, show a personalized greeting "Good Morning" with the user's name "Maria" below it in large bold text. Add a notification bell icon on the right with a badge showing 3 notifications. - -Create a large hero card with a beautiful purple gradient background. Show "Total Balance" as a small label with an eye icon to toggle visibility. Display "$12,450.00" in big white bold text centered on the card. Below the balance, show two small stat chips - one green showing "+$2,450 This Month" for income, and one showing "-$890 Expenses" in a softer color. - -Add a "This Week" spending analytics section with a mini line chart showing daily spending. Show "$847.50 spent" prominently with a "-12% vs last week" indicator in green. Below the chart, add horizontal scrolling category chips showing Shopping $342, Food $215, Transport $145 with small progress bars. - -Create a Quick Actions row with 5 circular buttons: Send (arrow icon), Request (download icon), QR (qr code icon), Cards (card icon), and Freeze (lock icon). Each should have a light purple circular background with the icon inside and label below. - -Add a "Send Again" section showing recent contacts as circular avatars in a horizontal scroll. Show initials like JD, SK, MR with different colors, plus a "+" button for new recipient. - -Create a "My Accounts" section with expandable cards. Show a Primary Savings account with wallet icon, "$8,200.00" balance, "82% to goal" progress bar, and an Active status badge. Show a Home Loan with bank icon, "-$45,200.00" in red, "28% paid" progress bar, and "Due: Jan 15" indicator. - -Add an "Upcoming Bills" section with bill cards. Show an Electricity Bill due tomorrow with a red urgency indicator on the left border, "$142.50", with "Pay Now" and "Schedule" buttons. Show Rent Payment with normal priority. - -Include a "Savings Goals" horizontal scroll with cards showing circular progress rings. Show "Vacation Fund" at 60% with a fire emoji and "15 day streak" gamification element. - -Add a "Recent Activity" section showing today's transactions with category icons, descriptions, times, and amounts. Amazon Prime -$14.99 in red, Salary Deposit +$3,500.00 in green. - -Include an AI Assistant card with gradient border, robot icon, and suggestion chips like "How much did I spend?" and "Transfer to John". - -At the bottom, add navigation with Home (selected), Accounts, a floating action button for Transfer that pops up above the nav bar, and Profile. Style it like Revolut or Cash App - clean and modern with purple as the primary color. -``` - ---- - -## Screen 2: Loading State - -``` -Design a loading skeleton screen for a banking app home dashboard. - -Keep the greeting "Good Morning" visible at the top. Show the user's name as a shimmer placeholder bar. - -Create a hero balance card with gradient background but show the balance and stat areas as animated shimmer rectangles. - -Show the quick action buttons as shimmer circles in a row. - -Display account cards as white card shapes with shimmer placeholders for the icon, text lines, and balance. - -The shimmer should look like a subtle wave animation moving left to right. Use light gray gradients for the placeholder areas. Make it feel premium and polished. -``` - ---- - -## Screen 3: Empty State - -``` -Design an empty state for a banking app when the user has no accounts yet. - -Show the same greeting header with name and notifications. - -Display a hero card with "$0.00" balance and $0 for both income and expenses. - -Keep the quick actions row visible but perhaps slightly dimmed. - -In the center, show a friendly illustration of a document or chart floating gently. Below it, display "No Accounts Yet" as a bold headline. - -Add descriptive text: "Start your financial journey by opening your first account." - -Create a prominent gradient button saying "+ Open New Account" and a smaller "Learn More" text link below. - -Make it feel encouraging and welcoming, not empty or broken. -``` - ---- - -## Screen 4: Error State - -``` -Design an error state screen for when the banking app fails to load data. - -Show the greeting header normally. - -In the center, display a warning triangle illustration with a subtle red/coral tint to indicate something went wrong. - -Show "Something Went Wrong" as the main heading in bold text. - -Add explanatory text: "We couldn't load your account information. Please check your connection and try again." - -Create a "Try Again" button with purple gradient background. - -Below, add a "Contact Support" text link for users who need help. - -Keep it calm and reassuring - not alarming. Use soft red accents, not harsh ones. -``` - ---- - -## Screen 5: Offline Mode - -``` -Design an offline banner state for a banking app. - -At the very top, add a slim warning banner in soft amber/yellow showing an antenna icon and "You're offline. Some features unavailable." - -Show the rest of the home dashboard content but at reduced opacity (about 70%) to indicate it's cached data. - -Add a "Last sync: 2 min ago" indicator somewhere visible. - -The user should understand they can still see their data but it might not be current. If they pull to refresh, show "Trying to reconnect..." message. -``` - ---- - -## Component Prompts - -### Hero Balance Card -``` -Design a financial balance card for a banking app dashboard. - -Use a beautiful diagonal gradient from purple-blue #667EEA to purple #764BA2. Make it full width with generous rounded corners about 24px. - -Show "Total Balance" as a small white label with an eye icon next to it for hiding the balance. - -Display the main balance "$12,450.00" in large white bold text, centered. - -Below, add two small pill-shaped indicators: one showing an up arrow with "+$2,450 This Month" and another showing a down arrow with "-$890 Expenses". Give them semi-transparent white backgrounds. - -Add a subtle shadow that uses the gradient colors at low opacity to create a glow effect. -``` - -### Quick Action Button -``` -Design a quick action button for a banking dashboard. - -Create a square container with rounded corners (16px) that's about 56x56 pixels. - -Give it a very light purple tinted background. Place an icon in the center in a deeper purple color. - -Add a label below the square in small dark text. - -Show the default state, pressed state with slight scale down and ripple effect, and disabled state at 50% opacity. -``` - -### Account Card -``` -Design a bank account card component. - -Create a white card with soft shadow and 16px rounded corners. - -On the left, show a circular icon container with a light tinted background and account type icon inside. - -In the middle, show the account name in medium weight and the account number in smaller gray text below. - -On the right, align the balance amount with a small trend indicator arrow. - -For loan accounts, add a thin progress bar at the bottom showing percentage paid. - -Include an Active status badge in green. -``` - -### Transaction Item -``` -Design a transaction list item for a banking app. - -Create two variants - one for money received (credit) and one for money spent (debit). - -For credit: Show a green-tinted circular background with a download arrow, and the amount in green with a + prefix. - -For debit: Show a red-tinted circular background with an upload arrow, and the amount in red with a - prefix. - -Each shows a merchant logo or category icon in the circle, the description and account name in the middle, time in small gray text, and the amount on the right. -``` - ---- - -## Tips for Figma First Draft - -1. **Iterate**: Generate once, then refine with follow-up prompts -2. **Colors**: Mention "purple accent #667EEA" for consistency -3. **Reference**: Say "like Revolut" or "Cash App style" for context -4. **States**: Ask for "show loading, empty, and error states" -5. **Responsive**: Mention "393px width for mobile" for correct sizing - ---- - -## After Generation - -1. Review generated designs for consistency -2. Create a color style library -3. Build component variants -4. Link screens with prototype connections -5. Export and update `FIGMA_LINKS.md` diff --git a/claude-product-cycle/design-spec-layer/features/home/mockups/PROMPTS_STITCH.md b/claude-product-cycle/design-spec-layer/features/home/mockups/PROMPTS_STITCH.md deleted file mode 100644 index f8813c36f..000000000 --- a/claude-product-cycle/design-spec-layer/features/home/mockups/PROMPTS_STITCH.md +++ /dev/null @@ -1,253 +0,0 @@ -# Home Dashboard - Google Stitch Prompts - -> **Tool**: [Google Stitch](https://stitch.withgoogle.com) -> **Style**: Material Design 3, Premium Fintech -> **Format**: Copy each prompt block directly into Stitch - ---- - -## Design System Reference - -``` -Primary Gradient: #667EEA → #764BA2 -Secondary Gradient: #11998E → #38EF7D -Success/Credit: #00D09C -Error/Debit: #FF4757 -Warning: #FFB800 -Text Primary: #1F2937 -Text Secondary: #6B7280 -Surface: #FFFFFF -Screen Size: 393 x 852 pixels (Android) -``` - ---- - -## Screen 1: Home Dashboard Success - -``` -Mobile home dashboard screen, Material Design 3, fintech banking app, 393x852px - -Top Bar: -- "Good Morning" greeting, 18sp bold, #1F2937 -- "Maria" name below, 24sp bold -- Right side: notification bell with badge (3), avatar circle - -Hero Balance Card: -- Full width, gradient #667EEA to #764BA2, 24dp radius -- "Total Balance" label white 70%, eye toggle icon -- "$12,450.00" balance 36sp white ExtraBold centered -- Two stat chips below: "+$2,450 This Month" green, "-$890 Expenses" red -- Semi-transparent white backgrounds on chips - -Spending Analytics Section: -- "This Week" header with date range -- "$847.50" amount 24sp, "↓ 12%" change indicator green -- Line chart 80dp height, gradient fill 20% opacity -- X-axis: M T W T F S S labels -- Category chips horizontal scroll: Shopping $342, Food $215, Transport $145 - -Quick Actions Row: -- 5 circular buttons: Send, Request, QR, Cards, Freeze -- 56dp icon circles, #EADDFF background -- Icons 24dp, #667EEA color -- Labels 12sp below each - -Send Again Section: -- "Send Again" header + "See All" link -- Horizontal scroll avatars: JD, SK, MR, AS, + New -- Avatar 48dp circles, name labels below -- Hash-based colors per user - -My Accounts Section: -- "My Accounts" header + "View All" link -- Account cards with icon, name, balance, progress -- Primary Savings: wallet icon, $8,200, 82% progress bar -- Home Loan: bank icon, -$45,200 red, 28% progress, "Due: Jan 15" - -Upcoming Bills Section: -- "Due This Week" header + "Manage" link -- Bill cards with urgency indicator left border 4dp -- Electricity: red border, "$142.50", "Due Tomorrow", Pay Now + Schedule buttons -- Rent: purple border, "$1,500", "Due Dec 31" - -Savings Goals: -- Horizontal scroll goal cards 280dp width -- Progress ring 60% with emoji, "Vacation Fund", "$1,200 / $2,000" -- Fire emoji + "15 day streak" gamification - -Recent Activity: -- "Recent Activity" header + "View All" -- Transaction items: icon circle, description, time, amount -- Amazon Prime: shopping icon pink, -$14.99 red -- Salary Deposit: briefcase teal, +$3,500.00 green - -AI Assistant Card: -- Gradient border, robot icon -- "Need help with anything?" prompt -- Suggestion chips: "How much did I spend?", "Transfer to John" - -Bottom Navigation: -- 64dp height, 4 tabs: Home (selected), Accounts, Transfer FAB, Profile -- FAB 56dp centered, gradient background, elevated -16dp -``` - ---- - -## Screen 2: Loading State - -``` -Mobile home screen loading skeleton, Material Design 3, 393x852px - -Header: -- "Good Morning" text visible -- Name placeholder shimmer bar 120dp width - -Hero Card Skeleton: -- Gradient card shape with shimmer -- Balance placeholder 200dp width centered -- Two stat chip placeholders below - -Quick Actions: -- 5 circular shimmer placeholders 56dp each - -Account Cards: -- Shimmer card shapes with icon circle placeholder -- Text lines shimmer 180dp, 120dp widths -- Balance shimmer 80dp right aligned - -Shimmer animation: left-to-right sweep, 1000ms infinite -Gradient: #E1E4E8 → #F8F9FA → #E1E4E8 -``` - ---- - -## Screen 3: Empty State - -``` -Mobile home empty state screen, Material Design 3, 393x852px - -Header: -- Same greeting as success state -- Notification icon without badge - -Hero Card: -- Same gradient -- "$0.00" balance centered -- Income $0.00, Expenses $0.00 chips - -Quick Actions: Same as success - -Center Content: -- Illustration 160dp, chart/document icon -- "No Accounts Yet" title 20sp bold -- "Start your financial journey by opening your first account" subtitle centered - -CTA Button: -- "+ Open New Account" gradient button full width -- "Learn More" text link below -``` - ---- - -## Screen 4: Error State - -``` -Mobile home error state screen, Material Design 3, 393x852px - -Header: Same greeting - -Center Content: -- Warning triangle illustration 120dp, #FF4757 tint -- "Something Went Wrong" title 20sp bold -- "We couldn't load your account information. Please check your connection and try again." - -Actions: -- "Try Again" gradient button full width -- "Contact Support" text link below -``` - ---- - -## Screen 5: Offline Banner - -``` -Mobile home with offline banner, Material Design 3, 393x852px - -Offline Banner: -- 48dp height, #FFB800 15% background -- Antenna icon, "You're offline. Some features unavailable." - -Content: -- All data at 70% opacity -- "Last sync: 2 min ago" indicator -- Pull-to-refresh: "Trying to reconnect..." -``` - ---- - -## Components - -### Hero Balance Card -``` -Financial summary card component, Material Design 3: -- Width: 361dp, height 200dp -- Gradient #667EEA to #764BA2, 24dp radius -- "Total Balance" white 12sp + eye toggle icon -- Balance 36sp white ExtraBold centered -- Income/Expense chips: semi-transparent white bg -- Income arrow up green, Expense arrow down red -- Shadow: 16dp blur, primary at 25% -``` - -### Quick Action Button -``` -Quick action circular button, Material Design 3: -- Container 56dp square, 16dp radius -- Background: Surface + 8% Primary -- Icon 24dp centered, #667EEA -- Label below 12sp #1F2937 -- Pressed: scale 0.95, ripple -- Haptic: light impact -``` - -### Account Card -``` -Bank account card component, Material Design 3: -- Width 361dp, height 110dp auto -- White bg, 16dp radius, 2dp elevation -- Left: 44dp icon container, gradient 12% opacity -- Center: account name 16sp, number 12sp gray -- Right: balance 18sp, trend indicator -- Loan variant: progress bar 6dp below content -``` - -### Spending Chart -``` -Weekly spending chart component, Material Design 3: -- Height 80dp, full width -- Line 2dp primary gradient -- Fill gradient 20% opacity below -- Day labels 10sp gray -- Touch: tooltip with amount -``` - -### Transaction Item -``` -Transaction list item, Material Design 3: -- Height 72dp -- Left: 40dp category circle - - Credit: #C8E6C9 bg, down arrow #2E7D32 - - Debit: #F9DEDC bg, up arrow #B3261E -- Center: description 16sp, merchant+time 12sp gray -- Right: amount colored (green/red) -``` - ---- - -## Quick Start - -1. Open [stitch.withgoogle.com](https://stitch.withgoogle.com) -2. Create project "Mifos Mobile - Home Dashboard" -3. Copy each prompt block → Generate -4. Generate components separately for reuse -5. Export all to Figma when done diff --git a/claude-product-cycle/design-spec-layer/features/home/mockups/dummy/01-home-dashboard.png b/claude-product-cycle/design-spec-layer/features/home/mockups/dummy/01-home-dashboard.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/home/mockups/dummy/02-account-overview-card.png b/claude-product-cycle/design-spec-layer/features/home/mockups/dummy/02-account-overview-card.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/home/mockups/dummy/03-quick-actions.png b/claude-product-cycle/design-spec-layer/features/home/mockups/dummy/03-quick-actions.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/home/mockups/dummy/04-recent-transactions.png b/claude-product-cycle/design-spec-layer/features/home/mockups/dummy/04-recent-transactions.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/home/mockups/dummy/05-home-empty-state.png b/claude-product-cycle/design-spec-layer/features/home/mockups/dummy/05-home-empty-state.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/loan-account/API.md b/claude-product-cycle/design-spec-layer/features/loan-account/API.md deleted file mode 100644 index 683fccb9b..000000000 --- a/claude-product-cycle/design-spec-layer/features/loan-account/API.md +++ /dev/null @@ -1,767 +0,0 @@ -# Loan Account - API Reference - ---- - -## Endpoints Required - -### 1. Get Loan Account Detail - -**Endpoint**: `GET /self/loans/{loanId}/` - -**Purpose**: Fetch basic loan account details - -**Request**: -``` -Headers: - Authorization: Basic {token} - Fineract-Platform-TenantId: {tenant} -``` - -**Response**: -```json -{ - "id": 123, - "loanProductId": 1, - "accountNo": "000000123", - "productName": "Personal Loan", - "clientName": "John Doe", - "principal": 5000.00, - "annualInterestRate": 12.0, - "numberOfRepayments": 12, - "loanBalance": 3500.00, - "amountPaid": 1500.00, - "status": { - "id": 300, - "code": "loanStatusType.active", - "value": "Active", - "active": true, - "closed": false, - "pendingApproval": false, - "waitingForDisbursal": false, - "overpaid": false - }, - "loanType": { - "id": 1, - "code": "loanType.individual", - "value": "Individual" - }, - "currency": { - "code": "USD", - "name": "US Dollar", - "decimalPlaces": 2, - "displaySymbol": "$", - "displayLabel": "US Dollar ($)" - }, - "inArrears": false, - "summary": { - "principalDisbursed": 5000.00, - "principalPaid": 1500.00, - "interestCharged": 600.00, - "interestPaid": 300.00, - "totalExpectedRepayment": 5600.00, - "totalRepayment": 1800.00, - "totalOutstanding": 3800.00 - }, - "timeline": { - "submittedOnDate": [2024, 1, 15], - "approvedOnDate": [2024, 1, 20], - "expectedDisbursementDate": [2024, 1, 25], - "actualDisbursementDate": [2024, 1, 25] - } -} -``` - -**Kotlin DTO**: `LoanAccount` from `core/model/entity/accounts/loan/` - -**Status**: Implemented in `LoanAccountsListService` - ---- - -### 2. Get Loan With Associations (Transactions) - -**Endpoint**: `GET /self/loans/{loanId}?associations=transactions` - -**Purpose**: Fetch loan details with transaction history - -**Request**: -``` -Headers: - Authorization: Basic {token} - Fineract-Platform-TenantId: {tenant} -Path Parameters: - loanId: Long - The loan account ID -Query Parameters: - associations: "transactions" -``` - -**Response**: -```json -{ - "id": 123, - "accountNo": "000000123", - "clientId": 1, - "clientName": "John Doe", - "loanProductId": 1, - "loanProductName": "Personal Loan", - "principal": 5000.00, - "approvedPrincipal": 5000.00, - "termFrequency": 12, - "numberOfRepayments": 12, - "interestRatePerPeriod": 1.0, - "status": { - "id": 300, - "code": "loanStatusType.active", - "value": "Active", - "active": true - }, - "loanType": { - "id": 1, - "code": "loanType.individual", - "value": "Individual" - }, - "currency": { - "code": "USD", - "name": "US Dollar", - "decimalPlaces": 2, - "displaySymbol": "$", - "displayLabel": "US Dollar ($)" - }, - "timeline": { - "submittedOnDate": [2024, 1, 15], - "approvedOnDate": [2024, 1, 20], - "actualDisbursementDate": [2024, 1, 25] - }, - "summary": { - "principalDisbursed": 5000.00, - "principalPaid": 1500.00, - "interestCharged": 600.00, - "interestPaid": 300.00, - "feeChargesCharged": 50.00, - "penaltyChargesCharged": 0.00, - "totalExpectedRepayment": 5650.00, - "totalRepayment": 1850.00, - "totalOutstanding": 3800.00 - }, - "transactions": [ - { - "id": 1, - "type": { - "id": 2, - "code": "loanTransactionType.repayment", - "value": "Repayment" - }, - "date": [2024, 2, 15], - "amount": 500.00, - "principalPortion": 400.00, - "interestPortion": 100.00, - "submittedOnDate": [2024, 2, 15] - } - ] -} -``` - -**Kotlin DTO**: `LoanWithAssociations` from `core/model/entity/accounts/loan/` - -**Status**: Implemented in `LoanAccountsListService` - ---- - -### 3. Get Loan With Associations (Repayment Schedule) - -**Endpoint**: `GET /self/loans/{loanId}?associations=repaymentSchedule` - -**Purpose**: Fetch loan details with full repayment schedule - -**Request**: -``` -Headers: - Authorization: Basic {token} - Fineract-Platform-TenantId: {tenant} -Path Parameters: - loanId: Long - The loan account ID -Query Parameters: - associations: "repaymentSchedule" -``` - -**Response**: -```json -{ - "id": 123, - "accountNo": "000000123", - "loanProductName": "Personal Loan", - "termFrequency": 12, - "interestRatePerPeriod": 1.0, - "currency": { - "code": "USD", - "decimalPlaces": 2, - "displaySymbol": "$" - }, - "status": { - "id": 300, - "value": "Active", - "active": true - }, - "loanType": { - "id": 1, - "value": "Individual" - }, - "timeline": { - "submittedOnDate": [2024, 1, 15], - "actualDisbursementDate": [2024, 1, 25] - }, - "summary": { - "principalDisbursed": 5000.00, - "principalPaid": 2000.00, - "interestCharged": 600.00, - "interestPaid": 400.00, - "interestWaived": 0.00, - "feeChargesCharged": 50.00, - "feeChargesWaived": 0.00, - "penaltyChargesCharged": 0.00, - "penaltyChargesWaived": 0.00, - "totalExpectedRepayment": 5650.00, - "totalRepayment": 2450.00, - "totalOutstanding": 3200.00 - }, - "repaymentSchedule": { - "currency": { - "code": "USD", - "decimalPlaces": 2, - "displaySymbol": "$" - }, - "loanTermInDays": 365, - "totalPrincipalDisbursed": 5000.00, - "totalPrincipalExpected": 5000.00, - "totalPrincipalPaid": 2000.00, - "totalInterestCharged": 600.00, - "totalFeeChargesCharged": 50.00, - "totalPenaltyChargesCharged": 0.00, - "totalWaived": 0.00, - "totalWrittenOff": 0.00, - "totalRepaymentExpected": 5650.00, - "totalRepayment": 2450.00, - "totalOutstanding": 3200.00, - "periods": [ - { - "period": 0, - "fromDate": [2024, 1, 25], - "dueDate": [2024, 1, 25], - "principalDisbursed": 5000.00, - "complete": true - }, - { - "period": 1, - "fromDate": [2024, 1, 25], - "dueDate": [2024, 2, 25], - "obligationsMetOnDate": [2024, 2, 25], - "complete": true, - "daysInPeriod": 31, - "principalOriginalDue": 416.67, - "principalDue": 416.67, - "principalPaid": 416.67, - "principalOutstanding": 0.00, - "principalLoanBalanceOutstanding": 4583.33, - "interestOriginalDue": 50.00, - "interestDue": 50.00, - "interestPaid": 50.00, - "interestOutstanding": 0.00, - "feeChargesDue": 0.00, - "feeChargesPaid": 0.00, - "penaltyChargesDue": 0.00, - "penaltyChargesPaid": 0.00, - "totalOriginalDueForPeriod": 466.67, - "totalDueForPeriod": 466.67, - "totalPaidForPeriod": 466.67, - "totalOutstandingForPeriod": 0.00 - }, - { - "period": 2, - "fromDate": [2024, 2, 25], - "dueDate": [2024, 3, 25], - "complete": false, - "daysInPeriod": 29, - "principalOriginalDue": 416.67, - "principalDue": 416.67, - "principalPaid": 0.00, - "principalOutstanding": 416.67, - "interestDue": 45.83, - "interestPaid": 0.00, - "interestOutstanding": 45.83, - "totalDueForPeriod": 462.50, - "totalPaidForPeriod": 0.00, - "totalOutstandingForPeriod": 462.50 - } - ] - }, - "npa": false -} -``` - -**Kotlin DTO**: `LoanWithAssociations` with `RepaymentSchedule` and `Periods` - -**Status**: Implemented in `LoanAccountsListService` - ---- - -### 4. Get Loan Transaction Details - -**Endpoint**: `GET /self/loans/{loanId}/transactions/{transactionId}` - -**Purpose**: Fetch details of a specific loan transaction - -**Request**: -``` -Headers: - Authorization: Basic {token} - Fineract-Platform-TenantId: {tenant} -Path Parameters: - loanId: Long - The loan account ID - transactionId: Long - The transaction ID -``` - -**Response**: -```json -{ - "id": 1, - "type": { - "id": 2, - "code": "loanTransactionType.repayment", - "value": "Repayment" - }, - "date": [2024, 2, 15], - "currency": { - "code": "USD", - "decimalPlaces": 2, - "displaySymbol": "$" - }, - "amount": 500.00, - "principalPortion": 400.00, - "interestPortion": 100.00, - "feeChargesPortion": 0.00, - "penaltyChargesPortion": 0.00, - "overpaymentPortion": 0.00, - "outstandingLoanBalance": 3100.00, - "submittedOnDate": [2024, 2, 15] -} -``` - -**Kotlin DTO**: `TransactionDetails` from `core/model/entity/` - -**Status**: Implemented in `LoanAccountsListService` - ---- - -### 5. Get Loan Template - -**Endpoint**: `GET /self/loans/template?templateType=individual` - -**Purpose**: Get loan application template for creating new loans - -**Request**: -``` -Headers: - Authorization: Basic {token} - Fineract-Platform-TenantId: {tenant} -Query Parameters: - templateType: "individual" - clientId: Long - The client ID -``` - -**Response**: -```json -{ - "clientId": 1, - "clientAccountNo": "000000001", - "clientName": "John Doe", - "clientOfficeId": 1, - "productOptions": [ - { - "id": 1, - "name": "Personal Loan", - "shortName": "PL" - } - ], - "loanOfficerOptions": [ - { - "id": 1, - "firstname": "Jane", - "lastname": "Smith", - "displayName": "Jane Smith" - } - ], - "loanPurposeOptions": [ - { - "id": 1, - "name": "Personal", - "position": 1, - "isActive": true - } - ], - "termFrequencyTypeOptions": [ - {"id": 0, "code": "termFrequency.periodFrequencyType.days", "value": "Days"}, - {"id": 1, "code": "termFrequency.periodFrequencyType.weeks", "value": "Weeks"}, - {"id": 2, "code": "termFrequency.periodFrequencyType.months", "value": "Months"} - ], - "repaymentFrequencyTypeOptions": [ - {"id": 0, "code": "repaymentFrequency.periodFrequencyType.days", "value": "Days"}, - {"id": 1, "code": "repaymentFrequency.periodFrequencyType.weeks", "value": "Weeks"}, - {"id": 2, "code": "repaymentFrequency.periodFrequencyType.months", "value": "Months"} - ], - "amortizationTypeOptions": [ - {"id": 0, "code": "amortizationType.equal.installments", "value": "Equal installments"}, - {"id": 1, "code": "amortizationType.equal.principal", "value": "Equal principal payments"} - ], - "interestTypeOptions": [ - {"id": 0, "code": "interestType.declining.balance", "value": "Declining Balance"}, - {"id": 1, "code": "interestType.flat", "value": "Flat"} - ] -} -``` - -**Kotlin DTO**: `LoanTemplate` from `core/model/entity/templates/loans/` - -**Status**: Implemented in `LoanAccountsListService` - ---- - -### 6. Get Loan Template By Product - -**Endpoint**: `GET /self/loans/template?templateType=individual&productId={productId}` - -**Purpose**: Get loan template with specific product defaults - -**Request**: -``` -Headers: - Authorization: Basic {token} - Fineract-Platform-TenantId: {tenant} -Query Parameters: - templateType: "individual" - clientId: Long - productId: Int -``` - -**Response**: Same structure as loan template with product-specific defaults populated - -**Status**: Implemented in `LoanAccountsListService` - ---- - -### 7. Create Loan Account - -**Endpoint**: `POST /self/loans` - -**Purpose**: Submit a new loan application - -**Request**: -``` -Headers: - Authorization: Basic {token} - Fineract-Platform-TenantId: {tenant} - Content-Type: application/json -Body: -{ - "clientId": 1, - "productId": 1, - "principal": 5000.00, - "loanTermFrequency": 12, - "loanTermFrequencyType": 2, - "numberOfRepayments": 12, - "repaymentEvery": 1, - "repaymentFrequencyType": 2, - "interestRatePerPeriod": 1.0, - "amortizationType": 0, - "interestType": 0, - "interestCalculationPeriodType": 1, - "transactionProcessingStrategyId": 1, - "expectedDisbursementDate": "2024-01-25", - "submittedOnDate": "2024-01-15", - "locale": "en", - "dateFormat": "yyyy-MM-dd", - "loanPurposeId": 1 -} -``` - -**Response**: HTTP 200 with loan ID - -**Kotlin DTO**: `LoansPayload` from `core/model/entity/payload/` - -**Status**: Implemented in `LoanAccountsListService` - ---- - -### 8. Update Loan Account - -**Endpoint**: `PUT /self/loans/{loanId}/` - -**Purpose**: Update an existing loan application (before approval) - -**Request**: -``` -Headers: - Authorization: Basic {token} - Fineract-Platform-TenantId: {tenant} - Content-Type: application/json -Body: Same as create loan -``` - -**Response**: HTTP 200 - -**Status**: Implemented in `LoanAccountsListService` - ---- - -### 9. Withdraw Loan Account - -**Endpoint**: `POST /self/loans/{loanId}?command=withdrawnByApplicant` - -**Purpose**: Withdraw a submitted loan application - -**Request**: -``` -Headers: - Authorization: Basic {token} - Fineract-Platform-TenantId: {tenant} - Content-Type: application/json -Body: -{ - "withdrawnOnDate": "2024-01-20", - "locale": "en", - "dateFormat": "yyyy-MM-dd", - "note": "Changed my mind" -} -``` - -**Response**: HTTP 200 - -**Kotlin DTO**: `LoanWithdraw` from `core/model/entity/accounts/loan/` - -**Status**: Implemented in `LoanAccountsListService` - ---- - -## Kotlin DTOs - -### LoanAccount - -```kotlin -@Serializable -@Parcelize -data class LoanAccount( - val id: Long = 0, - val loanProductId: Long = 0, - val externalId: String? = null, - val numberOfRepayments: Long = 0, - val accountNo: String? = null, - val productName: String? = null, - val productId: Int? = null, - val loanProductName: String? = null, - val clientName: String? = null, - val loanProductDescription: String? = null, - val principal: Double = 0.0, - val annualInterestRate: Double = 0.0, - val status: Status? = null, - val loanType: LoanType? = null, - val loanCycle: Int? = null, - val loanBalance: Double = 0.0, - val amountPaid: Double = 0.0, - val currency: Currency?, - val inArrears: Boolean? = null, - val summary: Summary? = null, - val loanPurposeName: String? = null, - val timeline: Timeline?, -) : Parcelable -``` - -### LoanWithAssociations - -```kotlin -@Serializable -@Parcelize -data class LoanWithAssociations( - val id: Int? = null, - val accountNo: String? = null, - val status: Status? = null, - val clientId: Int? = null, - val clientName: String? = null, - val loanProductId: Int? = null, - val loanProductName: String? = null, - val loanType: LoanType? = null, - val currency: Currency? = null, - val principal: Double? = null, - val approvedPrincipal: Double? = null, - val termFrequency: Int? = null, - val numberOfRepayments: Int? = null, - val interestRatePerPeriod: Double? = null, - val timeline: Timeline? = null, - val summary: Summary? = null, - val repaymentSchedule: RepaymentSchedule? = null, - val transactions: List? = arrayListOf(), - val npa: Boolean? = null, - val loanPurposeName: String? = null, -) : Parcelable -``` - -### Summary - -```kotlin -@Serializable -@Parcelize -data class Summary( - val principalDisbursed: Double = 0.0, - val principalPaid: Double = 0.0, - val interestCharged: Double = 0.0, - val interestPaid: Double = 0.0, - val feeChargesCharged: Double = 0.0, - val penaltyChargesCharged: Double = 0.0, - val penaltyChargesWaived: Double = 0.0, - val totalExpectedRepayment: Double = 0.0, - val interestWaived: Double = 0.0, - val totalRepayment: Double = 0.0, - val feeChargesWaived: Double = 0.0, - val totalOutstanding: Double = 0.0, - val currency: Currency? = null, -) : Parcelable -``` - -### Periods - -```kotlin -@Serializable -@Parcelize -data class Periods( - val period: Int? = null, - val fromDate: List = emptyList(), - val dueDate: List = emptyList(), - val obligationsMetOnDate: List = emptyList(), - val principalDisbursed: Double? = null, - val complete: Boolean? = null, - val daysInPeriod: Int? = null, - val principalOriginalDue: Double? = null, - val principalDue: Double? = null, - val principalPaid: Double? = null, - val principalOutstanding: Double? = null, - val principalLoanBalanceOutstanding: Double? = null, - val interestOriginalDue: Double? = null, - val interestDue: Double? = null, - val interestPaid: Double? = null, - val interestWaived: Double? = null, - val interestOutstanding: Double? = null, - val feeChargesDue: Double? = null, - val feeChargesPaid: Double? = null, - val feeChargesWaived: Double? = null, - val feeChargesOutstanding: Double? = null, - val penaltyChargesDue: Double? = null, - val penaltyChargesPaid: Double? = null, - val penaltyChargesWaived: Double? = null, - val penaltyChargesOutstanding: Double? = null, - val totalOriginalDueForPeriod: Double? = null, - val totalDueForPeriod: Double? = null, - val totalPaidForPeriod: Double? = null, - val totalOutstandingForPeriod: Double? = null, - val totalOverdue: Double? = null, -) : Parcelable -``` - ---- - -## API Summary - -| Endpoint | Service | Repository | Status | -|----------|---------|------------|--------| -| `/loans/{id}/` | LoanAccountsListService | LoanRepository | Implemented | -| `/loans/{id}?associations=transactions` | LoanAccountsListService | LoanRepository | Implemented | -| `/loans/{id}?associations=repaymentSchedule` | LoanAccountsListService | LoanRepository | Implemented | -| `/loans/{id}/transactions/{txnId}` | LoanAccountsListService | LoanRepository | Implemented | -| `/loans/template` | LoanAccountsListService | LoanRepository | Implemented | -| `/loans` (POST) | LoanAccountsListService | - | Implemented | -| `/loans/{id}/` (PUT) | LoanAccountsListService | - | Implemented | -| `/loans/{id}?command=withdrawnByApplicant` | LoanAccountsListService | LoanRepository | Implemented | - ---- - -## Kotlin Implementation - -### Service (LoanAccountsListService.kt) - -```kotlin -interface LoanAccountsListService { - @GET(ApiEndPoints.LOANS + "/{loanId}/") - fun getLoanAccountsDetail(@Path("loanId") loanId: Long): Flow? - - @GET(ApiEndPoints.LOANS + "/{loanId}") - fun getLoanWithAssociations( - @Path("loanId") loanId: Long, - @Query("associations") associationType: String?, - ): Flow - - @GET(ApiEndPoints.LOANS + "/template?templateType=individual") - fun getLoanTemplate(@Query("clientId") clientId: Long?): Flow - - @GET(ApiEndPoints.LOANS + "/template?templateType=individual") - fun getLoanTemplateByProduct( - @Query("clientId") clientId: Long?, - @Query("productId") productId: Int?, - ): Flow - - @POST(ApiEndPoints.LOANS) - suspend fun createLoansAccount(@Body loansPayload: LoansPayload?): HttpResponse - - @PUT(ApiEndPoints.LOANS + "/{loanId}/") - suspend fun updateLoanAccount( - @Path("loanId") loanId: Long, - @Body loansPayload: LoansPayload?, - ): HttpResponse - - @POST(ApiEndPoints.LOANS + "/{loanId}?command=withdrawnByApplicant") - suspend fun withdrawLoanAccount( - @Path("loanId") loanId: Long, - @Body loanWithdraw: LoanWithdraw?, - ): HttpResponse - - @GET(ApiEndPoints.LOANS + "/{loanId}/transactions/{transactionId}") - fun getLoanTransactionDetails( - @Path("loanId") loanId: Long, - @Path("transactionId") transactionId: Long, - ): Flow -} -``` - -### Repository (LoanRepository.kt) - -```kotlin -interface LoanRepository { - fun getLoanWithAssociations( - associationType: String?, - loanId: Long?, - ): Flow> - - fun getLoanTransactionDetails( - loanId: Long, - transactionId: Long, - ): Flow> - - suspend fun withdrawLoanAccount( - loanId: Long?, - loanWithdraw: LoanWithdraw?, - ): DataState - - fun template(clientId: Long?): Flow> - - fun getLoanTemplateByProduct( - clientId: Long?, - productId: Int?, - ): Flow> -} -``` - ---- - -## Notes - -- Association types: `transactions` for payment history, `repaymentSchedule` for installment breakdown -- Currency formatting uses `CurrencyFormatter.format(amount, currencyCode, decimalPlaces)` -- Dates are returned as `List` arrays `[year, month, day]` - use `DateHelper.getDateAsString()` -- The `status` object contains boolean flags (`active`, `closed`, `pendingApproval`, etc.) for quick status checks -- The `npa` field indicates Non-Performing Asset status - used for auto-debit display -- Loan accounts are fetched through `clients/{id}/accounts` for the list view, using the `loanAccounts` property of `ClientAccounts` diff --git a/claude-product-cycle/design-spec-layer/features/loan-account/MOCKUP.md b/claude-product-cycle/design-spec-layer/features/loan-account/MOCKUP.md deleted file mode 100644 index 98504c283..000000000 --- a/claude-product-cycle/design-spec-layer/features/loan-account/MOCKUP.md +++ /dev/null @@ -1,2138 +0,0 @@ -# Loan Account - UI Mockups v2.0 - -> **Design Style**: Debt Freedom Fintech (Tally/Bright Money inspired) -> **Primary Gradient**: #667EEA to #764BA2 (Purple-Blue) -> **Version**: 2.0 - 2025 Fintech Patterns -> **Last Updated**: 2025-12-30 - ---- - -## Design Philosophy - -### 2025 Fintech Loan Management Patterns - -| Pattern | Implementation | User Benefit | -|---------|----------------|--------------| -| **Debt Freedom Countdown** | Visual days-to-payoff counter | Motivation & clarity | -| **Payment Streaks** | Gamified on-time payment tracking | Behavioral reinforcement | -| **Milestone Celebrations** | 25/50/75/100% progress rewards | Sense of achievement | -| **Smart Payment Suggestions** | AI-powered optimal payment amounts | Interest savings | -| **Early Payoff Calculator** | Real-time interest savings viz | Financial education | -| **Debt-Free Visualization** | Animated countdown & projections | Goal visualization | -| **Payment Reminders** | Smart scheduling based on income | Reduced late fees | -| **Progress Gamification** | Badges, streaks, achievements | Engagement | - ---- - -## Screen 1: Loan Dashboard (Main View) - -``` -+------------------------------------------+ -| 9:41 [***] | -+------------------------------------------+ -| | -| [<] My Loans [+] [?] | -| | -+------------------------------------------+ -| | -| DEBT FREEDOM HERO | -| +------------------------------------+ | -| |########################################| -| |## ##| -| |## [FIRE] Your Debt Freedom Journey ##|<-- Animated flame -| |## ##| icon -| |## Total Outstanding ##| -| |## ##| -| |## $12,450.00 ##|<-- Display Large -| |## ##| 36sp, ExtraBold -| |## ┌─────────────────────────────┐ ##| -| |## │[███████████████░░░░░░░░░░░░]│ ##|<-- Combined progress -| |## │ 62% Paid │ ##| all loans -| |## └─────────────────────────────┘ ##| -| |## ##| -| |## +-------------+ +-------------+ ##| -| |## | [CALENDAR] | | [FIRE] | ##| -| |## | 8 months | | 24 streak | ##|<-- Stats chips -| |## | to freedom | | on-time | ##| -| |## +-------------+ +-------------+ ##| -| |## ##| -| |########################################| -| +------------------------------------+ | -| ^ | -| | | -| Gradient: #667EEA -> #764BA2 (45deg) | -| Animated particles on streak | -| Pulsing glow on progress | -| | -+------------------------------------------+ -| | -| NEXT PAYMENT ALERT | -| +------------------------------------+ | -| |@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@|<-- Warning variant -| |@@ @@| if due soon -| |@@ +------+ Next Payment Due @@| -| |@@ | [!] | @@| -| |@@ | JAN | $450.00 @@|<-- Amount Large -| |@@ | 15 | Personal Loan @@| 28sp Bold -| |@@ +------+ @@| -| |@@ @@| -| |@@ +------------------+ @@| -| |@@ | [CLOCK] 3 days | @@|<-- Urgency badge -| |@@ +------------------+ @@| Amber if <7 days -| |@@ @@| -| |@@ +------------------------------+@@| -| |@@ |###### Pay Now - $450 ########|@@|<-- Primary CTA -| |@@ +------------------------------+@@| -| |@@ @@| -| |@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@| -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| PAYMENT STREAK | -| +------------------------------------+ | -| | | | -| | [FIRE] 24 Month Streak! | |<-- Animated fire -| | -------------------------------- | | -| | | | -| | +--+--+--+--+--+--+--+--+--+--+ | | -| | |J |F |M |A |M |J |J |A |S |O | | |<-- Monthly grid -| | |[v]|[v]|[v]|[v]|[v]|[v]|[v]|[v]|[v]|[v]| | -| | +--+--+--+--+--+--+--+--+--+--+ | | Green checks -| | |N |D |J |F |M |A |M |J |J |A | | | -| | |[v]|[v]|[v]|[v]|[v]|[v]|[v]|[v]|[v]|[v]| | -| | +--+--+--+--+--+--+--+--+--+--+ | | -| | |S |O |N |D |J | | | | | | | | -| | |[v]|[v]|[v]|[v]|[*]| | | | | | | |<-- [*] Current -| | +--+--+--+--+--+--+--+--+--+--+ | | -| | | | -| | Perfect payer badge unlocked! | |<-- Achievement -| | [BADGE: Perfect Payer 2024] | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| MY LOANS | -| +------------------------------------+ | -| | | | -| | Active Loans (2) [View All >]| | -| | -------------------------------- | | -| | | | -| | LOAN CARD 1 - PERSONAL LOAN | | -| | +--------------------------------+| | -| | | || | -| | | [ICON] Personal Loan [>] || | -| | | #000123456 || | -| | | || | -| | | Outstanding || | -| | | $3,000.00 of $5,000 || | -| | | || | -| | | [████████████░░░░░░░░] 60% || |<-- Progress bar -| | | || | -| | | +--------+ +--------+ || | -| | | | EMI | | Next | || | -| | | | $450 | | Jan 15 | || | -| | | +--------+ +--------+ || | -| | | || | -| | | [Pay Now] [Schedule] || |<-- Quick actions -| | | || | -| | +--------------------------------+| | -| | | | -| | LOAN CARD 2 - HOME IMPROVEMENT | | -| | +--------------------------------+| | -| | | || | -| | | [ICON] Home Improvement [>] || | -| | | #000789012 || | -| | | || | -| | | Outstanding || | -| | | $9,450.00 of $15,000 || | -| | | || | -| | | [██████████░░░░░░░░░░] 37% || | -| | | || | -| | | +--------+ +--------+ || | -| | | | EMI | | Next | || | -| | | | $625 | | Jan 20 | || | -| | | +--------+ +--------+ || | -| | | || | -| | | [Pay Now] [Schedule] || | -| | | || | -| | +--------------------------------+| | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| SMART SUGGESTIONS (AI) | -| +------------------------------------+ | -| |########################################| -| |## ##| -| |## [SPARKLE] Smart Tip ##|<-- AI indicator -| |## -------------------------------- ##| -| |## ##| -| |## Pay $50 extra this month to ##| -| |## save $127 in interest and ##| -| |## finish 2 months early! ##| -| |## ##| -| |## +------------+ +------------+ ##| -| |## | [Dismiss] | | [Apply] > | ##| -| |## +------------+ +------------+ ##| -| |## ##| -| |########################################| -| +------------------------------------+ | -| ^ | -| | | -| Gradient: #11998E -> #38EF7D (Success)| -| | -+------------------------------------------+ -| | -| QUICK ACTIONS | -| +------------------------------------+ | -| | | | -| | +------+ +------+ +------+ +------+| | -| | |[CALC]| |[HIST]| |[BELL]| |[QR] || | -| | +------+ +------+ +------+ +------+| | -| | Payoff Payment Remind Pay via | | -| | Calc History Me QR | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| [HOME] [ACCOUNTS] [+] [CARDS] [ME] | -| ^ | -+------------------------------------------+ -``` - ---- - -## Screen 2: Loan Detail View - -``` -+------------------------------------------+ -| 9:41 [***] | -+------------------------------------------+ -| | -| [<] Personal Loan [...] | -| #000123456 | -| | -+------------------------------------------+ -| | -| LOAN HERO CARD | -| +------------------------------------+ | -| |########################################| -| |## ##| -| |## Outstanding Balance ##| -| |## ##| -| |## -$3,000.00 ##|<-- Display Large -| |## ##| 36sp ExtraBold -| |## ┌─────────────────────────────┐ ##| -| |## │[████████████████░░░░░░░░░░]│ ##| -| |## └─────────────────────────────┘ ##| -| |## ##| -| |## +-------------+ +-------------+ ##| -| |## | Principal | | Interest | ##| -| |## | $5,000 | | 12% p.a. | ##| -| |## +-------------+ +-------------+ ##| -| |## ##| -| |## +---------------------------+ ##| -| |## | [CHECK] Status: Active | ##|<-- Green pill -| |## +---------------------------+ ##| -| |## ##| -| |########################################| -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| DEBT FREEDOM COUNTDOWN | -| +------------------------------------+ | -| | | | -| | +------------------+ | | -| | | | | | -| | | [CALENDAR] | | |<-- Animated -| | | 241 | | | countdown -| | | days | | | number -| | | | | | -| | +------------------+ | | -| | | | -| | Until you're debt-free! | | -| | Target: September 15, 2025 | | -| | | | -| | +--------------------------------+| | -| | |[###########░░░░░░░░░░░] 60% || | -| | +--------------------------------+| | -| | | | -| | $2,000 paid • $3,000 to go | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| MILESTONE PROGRESS | -| +------------------------------------+ | -| | | | -| | [TROPHY] Milestones | | -| | -------------------------------- | | -| | | | -| | [v]-----[v]-----[*]-----[ ]-----[STAR]| -| | 25% 50% 60% 75% 100%| | -| | ^ ^ ^ | -| | | | | | -| | Done! Done! You are | -| | here! | -| | | | -| | +--------------------------------+| | -| | | [BADGE] Halfway Hero! || |<-- Unlocked badge -| | | Unlocked at 50% repayment || | -| | +--------------------------------+| | -| | | | -| | Next milestone: 75% - $1,250 to go| | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| NEXT PAYMENT | -| +------------------------------------+ | -| | | | -| | +------+ Next Payment Due | | -| | | [!] | | | -| | | JAN | $450.00 | | -| | | 15 | ───────────────── | | -| | +------+ Principal: $375.00 | | -| | Interest: $50.00 | | -| | Fees: $25.00 | | -| | | | -| | +------------------+ | | -| | | [!] 3 days left | | |<-- Warning badge -| | +------------------+ | | -| | | | -| | +--------------------------------+| | -| | |###### Pay Now - $450.00 ######|| | -| | +--------------------------------+| | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| EARLY PAYOFF CALCULATOR | -| +------------------------------------+ | -| |########################################| -| |## ##| -| |## [SPARKLE] Pay Off Early? ##| -| |## -------------------------------- ##| -| |## ##| -| |## If you pay $550/month instead: ##| -| |## ##| -| |## +-------------+ +-------------+ ##| -| |## | Save | | Finish | ##| -| |## | $127.50 | | 2 months | ##|<-- Highlighted -| |## | interest | | earlier | ##| savings -| |## +-------------+ +-------------+ ##| -| |## ##| -| |## [ Calculate Custom Amount > ] ##| -| |## ##| -| |########################################| -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| LOAN ACTIONS | -| +------------------------------------+ | -| | | | -| | +---+ Make Payment [>] | | -| | |[$]| Pay now or schedule | | -| | +---+ | | -| | -------------------------------- | | -| | +---+ Repayment Schedule [>] | | -| | |CAL| View all 12 installments | | -| | +---+ | | -| | -------------------------------- | | -| | +---+ Payment History [>] | | -| | |TXN| 8 payments completed | | -| | +---+ | | -| | -------------------------------- | | -| | +---+ Loan Summary [>] | | -| | |[i]| Full loan details | | -| | +---+ | | -| | -------------------------------- | | -| | +---+ Charges & Fees [>] | | -| | |FEE| View all charges | | -| | +---+ | | -| | -------------------------------- | | -| | +---+ Guarantor Details [>] | | -| | |USR| View guarantor info | | -| | +---+ | | -| | -------------------------------- | | -| | +---+ Generate QR [>] | | -| | |QR | Share payment QR code | | -| | +---+ | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| LOAN DETAILS GRID | -| +------------------------------------+ | -| | | | -| | +------------+ +------------+ | | -| | | Principal | | Interest | | | -| | | $5,000.00 | | 12% p.a. | | | -| | +------------+ +------------+ | | -| | | | -| | +------------+ +------------+ | | -| | | Term | | EMI | | | -| | | 12 months | | $450.00 | | | -| | +------------+ +------------+ | | -| | | | -| | +------------+ +------------+ | | -| | | Disbursed | | Maturity | | | -| | | Jan 2024 | | Dec 2024 | | | -| | +------------+ +------------+ | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -``` - ---- - -## Screen 3: Early Payoff Calculator - -``` -+------------------------------------------+ -| 9:41 [***] | -+------------------------------------------+ -| | -| [<] Payoff Calculator | -| | -+------------------------------------------+ -| | -| CURRENT LOAN STATUS | -| +------------------------------------+ | -| | | | -| | Personal Loan #000123456 | | -| | -------------------------------- | | -| | Remaining Balance: $3,000.00 | | -| | Current EMI: $450/month | | -| | Months Remaining: 8 | | -| | Interest Left to Pay: $240.00 | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| PAYMENT AMOUNT SLIDER | -| +------------------------------------+ | -| | | | -| | How much can you pay monthly? | | -| | | | -| | $600 | |<-- Large display -| | ──── | | updates live -| | | | -| | +-----|-----|-----|-----|-----+ | | -| | $450 $500 $550 $600 $650 | |<-- Slider -| | MIN MAX | | -| | | | -| | QUICK AMOUNTS | | -| | +------+ +------+ +------+ | | -| | | +$50 | |+$100 | |+$150 | | |<-- Quick add chips -| | +------+ +------+ +------+ | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| SAVINGS VISUALIZATION | -| +------------------------------------+ | -| |########################################| -| |## ##| -| |## YOUR SAVINGS ##| -| |## ##| -| |## +-----------------------------+ ##| -| |## | | ##| -| |## | $127.50 | ##|<-- Animated -| |## | Interest Saved | ##| counter -| |## | | ##| -| |## +-----------------------------+ ##| -| |## ##| -| |## +-------------+ +-------------+ ##| -| |## | [CAL] | | [ROCKET] | ##| -| |## | 3 months | | Aug 2025 | ##| -| |## | earlier | | payoff date | ##| -| |## +-------------+ +-------------+ ##| -| |## ##| -| |########################################| -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| COMPARISON CHART | -| +------------------------------------+ | -| | | | -| | Current vs New Plan | | -| | | | -| | Current | | -| | $│ ┌──┐ | | -| | │ New Plan │ │ | | -| | 3k│ ┌──┐ │ │ | | -| | │ │ │ │ │ | | -| | │ │ │ │ │ | | -| | │ │ │ ┌──────────┤ │ | |<-- Interest -| | │ │ │ │ $127.50 │ │ | | savings -| | │ │ │ │ SAVED! │ │ | | highlighted -| | 0│──────┴──┴───┴──────────┴──┴── | | -| | 5 mo 8 mo | | -| | | | -| | Legend: | | -| | [█] Principal [░] Interest | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| PAYMENT SCHEDULE PREVIEW | -| +------------------------------------+ | -| | | | -| | New Payment Schedule | | -| | -------------------------------- | | -| | | | -| | Jan 2025 $600.00 [*] | |<-- Current month -| | Feb 2025 $600.00 [ ] | | -| | Mar 2025 $600.00 [ ] | | -| | Apr 2025 $600.00 [ ] | | -| | May 2025 $387.50 [END] | |<-- Final payment -| | | | -| | Total Payments: 5 | | -| | Total Amount: $2,987.50 | | -| | Total Interest: $112.50 | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| +------------------------------------+ | -| |########################################| -| |## [ Apply New Payment Plan ] ##| -| |########################################| -| +------------------------------------+ | -| | -| [ Keep Current Plan ] | -| | -+------------------------------------------+ -``` - ---- - -## Screen 4: Repayment Schedule - -``` -+------------------------------------------+ -| 9:41 [***] | -+------------------------------------------+ -| | -| [<] Repayment Schedule [...] | -| | -+------------------------------------------+ -| | -| SCHEDULE OVERVIEW | -| +------------------------------------+ | -| | | | -| | Personal Loan #000123456 | | -| | -------------------------------- | | -| | | | -| | +----------+ +----------+ +------+| | -| | | Paid | |Remaining | |Total || | -| | | 8 of 12 | | 4 left | | 12 || | -| | +----------+ +----------+ +------+| | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| VISUAL TIMELINE | -| +------------------------------------+ | -| | | | -| | 2024 | | -| | Jan Feb Mar Apr May Jun | | -| | o───o───o───o───o───o | | -| | [v] [v] [v] [v] [v] [v] | |<-- Green checks -| | | | -| | Jul Aug Sep Oct Nov Dec | | -| | o───o───o───o───o───o | | -| | [v] [v] [*] [ ] [ ] [ ] | |<-- [*] Current -| | ^ | | -| | Current | | -| | | | -| | Legend: | | -| | [v]=Paid [*]=Due [ ]=Upcoming | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| UPCOMING INSTALLMENTS | -| +------------------------------------+ | -| | | | -| | INSTALLMENT #9 - CURRENT | | -| | +--------------------------------+| | -| | |@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@||<-- Highlighted -| | |@@ @@| current due -| | |@@ Due: January 15, 2025 [!] @@| -| | |@@ __________________________ @@| -| | |@@ @@| -| | |@@ Principal: $375.00 @@| -| | |@@ Interest: $50.00 @@| -| | |@@ Fees: $25.00 @@| -| | |@@ __________________________ @@| -| | |@@ @@| -| | |@@ Total Due: $450.00 @@| -| | |@@ @@| -| | |@@ +----------------------------+| -| | |@@ |#### Pay This - $450 #####|| -| | |@@ +----------------------------+| -| | |@@ @@| -| | |@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@|| -| | +--------------------------------+| | -| | | | -| | INSTALLMENT #10 | | -| | +--------------------------------+| | -| | | Due: February 15, 2025 || | -| | | || | -| | | Total Due: $450.00 || | -| | | || | -| | | [ Pay Early - Save $12.50 ] || |<-- Shows savings -| | | || | -| | +--------------------------------+| | -| | | | -| | INSTALLMENT #11 | | -| | +--------------------------------+| | -| | | Due: March 15, 2025 || | -| | | Total Due: $450.00 || | -| | | [ Pay Early ] || | -| | +--------------------------------+| | -| | | | -| | INSTALLMENT #12 - FINAL | | -| | +--------------------------------+| | -| | | Due: April 15, 2025 [END] || | -| | | Total Due: $450.00 || | -| | | [ Pay Early ] || | -| | +--------------------------------+| | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| COMPLETED PAYMENTS | -| +------------------------------------+ | -| | | | -| | Completed (8) [View All >]| | -| | -------------------------------- | | -| | | | -| | +---+ Dec 15, 2024 $450.00 [v] | | -| | |DEC| On Time | | -| | +---+ | | -| | -------------------------------- | | -| | +---+ Nov 15, 2024 $450.00 [v] | | -| | |NOV| On Time | | -| | +---+ | | -| | -------------------------------- | | -| | +---+ Oct 15, 2024 $450.00 [v] | | -| | |OCT| On Time | | -| | +---+ | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -``` - ---- - -## Screen 5: Make Payment Flow - -### Step 5a: Payment Amount Selection - -``` -+------------------------------------------+ -| 9:41 [***] | -+------------------------------------------+ -| | -| [X] Make Payment 1/3 | -| | -+------------------------------------------+ -| | -| PROGRESS INDICATOR | -| +------------------------------------+ | -| | [1]────[2]────[3] | | -| | ^ | | -| | Amount Review Confirm | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| LOAN SUMMARY | -| +------------------------------------+ | -| | | | -| | Personal Loan #000123456 | | -| | Outstanding: $3,000.00 | | -| | Next Due: Jan 15 - $450.00 | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| PAYMENT AMOUNT | -| +------------------------------------+ | -| | | | -| | | | -| | $ 450.00 | |<-- Editable -| | ════════ | | amount -| | [EDIT] | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| PAYMENT OPTIONS | -| +------------------------------------+ | -| | | | -| | [*] Pay this installment | |<-- Selected -| | $450.00 - Due Jan 15 | | -| | | | -| | [ ] Pay multiple installments | | -| | Select 2-4 installments | | -| | | | -| | [ ] Pay custom amount | | -| | Any amount you want | | -| | | | -| | [ ] Pay off entire loan | | -| | $3,000.00 - Save $240! | |<-- Savings highlight -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| SMART SUGGESTION | -| +------------------------------------+ | -| |########################################| -| |## ##| -| |## [SPARKLE] Tip: Pay $500 instead ##| -| |## ##| -| |## Save $15.50 in interest and ##| -| |## finish 1 month earlier! ##| -| |## ##| -| |## [ Apply $500 Payment ] ##| -| |## ##| -| |########################################| -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| +------------------------------------+ | -| |###### Continue to Review ########| | -| +------------------------------------+ | -| | -+------------------------------------------+ -``` - -### Step 5b: Payment Review - -``` -+------------------------------------------+ -| 9:41 [***] | -+------------------------------------------+ -| | -| [<] Make Payment 2/3 | -| | -+------------------------------------------+ -| | -| PROGRESS INDICATOR | -| +------------------------------------+ | -| | [v]────[2]────[3] | | -| | ^ | | -| | Amount Review Confirm | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| PAYMENT SOURCE | -| +------------------------------------+ | -| | | | -| | Pay From | | -| | +--------------------------------+| | -| | | || | -| | | [ICON] Primary Savings [v]|| |<-- Selected -| | | ****4521 || | -| | | Available: $8,200.00 || | -| | | || | -| | +--------------------------------+| | -| | | | -| | [ Change Account v ] | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| PAYMENT BREAKDOWN | -| +------------------------------------+ | -| | | | -| | Payment Details | | -| | -------------------------------- | | -| | | | -| | Principal: $375.00 | | -| | Interest: $50.00 | | -| | Fees: $25.00 | | -| | -------------------------------- | | -| | Total Payment: $450.00 | |<-- Bold total -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| AFTER PAYMENT | -| +------------------------------------+ | -| | | | -| | After This Payment | | -| | -------------------------------- | | -| | | | -| | Remaining Balance: $2,550.00 | | -| | Payments Left: 3 | | -| | New Payoff Date: Apr 15, 2025 | | -| | | | -| | [███████████████░░░░░░] 66% | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| STREAK WARNING | -| +------------------------------------+ | -| |########################################| -| |## ##| -| |## [FIRE] Keep your 24-month ##| -| |## streak alive! ##| -| |## ##| -| |## Pay on time to maintain your ##| -| |## Perfect Payer status. ##| -| |## ##| -| |########################################| -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| +------------------------------------+ | -| |###### Confirm - $450.00 #########| | -| +------------------------------------+ | -| | -| [LOCK] Secured with 256-bit encryption | -| | -+------------------------------------------+ -``` - -### Step 5c: Payment Processing & Success - -``` -+------------------------------------------+ -| 9:41 [***] | -+------------------------------------------+ -| | -| [X] Make Payment 3/3 | -| | -+------------------------------------------+ -| | -| PROGRESS INDICATOR | -| +------------------------------------+ | -| | [v]────[v]────[3] | | -| | ^ | | -| | Amount Review Confirm | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| PROCESSING STATE | -| +------------------------------------+ | -| | | | -| | | | -| | | | -| | +----------+ | | -| | | | | | -| | | [===] | | |<-- Spinner -| | | ||| | | | -| | | | | | -| | +----------+ | | -| | | | -| | Processing Payment... | | -| | | | -| | Please wait while we | | -| | process your payment | | -| | | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ - - | - v - -+------------------------------------------+ -| 9:41 [***] | -+------------------------------------------+ -| | -| [X] Payment Complete | -| | -+------------------------------------------+ -| | -| SUCCESS STATE | -| +------------------------------------+ | -| |########################################| -| |## ##| -| |## ##| -| |## +----------+ ##| -| |## | [v] | ##|<-- Animated -| |## | ~~~~ | ##| checkmark -| |## +----------+ ##| -| |## ##| -| |## Payment Successful! ##| -| |## ##| -| |## -$450.00 ##| -| |## From: Primary Savings ##| -| |## ##| -| |########################################| -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| STREAK UPDATE | -| +------------------------------------+ | -| | | | -| | [FIRE] STREAK CONTINUES! | |<-- Celebration -| | ================================ | | -| | | | -| | 25 MONTHS | |<-- Large animated -| | On-Time Payments | | number -| | | | -| | +--------------------------------+| | -| | |[v][v][v][v][v][v][v][v][v][*] || |<-- Updated grid -| | +--------------------------------+| | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| MILESTONE CHECK | -| +------------------------------------+ | -| | | | -| | Progress: 66% Complete! | | -| | [████████████████░░░░░░░░] | | -| | | | -| | +--------------------------------+| | -| | | [TROPHY] 9% to next milestone! || | -| | | (75% - Finish Line) || | -| | +--------------------------------+| | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| +------+ +------+ +------------------+ | -| |[TXN] | |[HOME]| | [ Done ======= ] | | -| |View | | | | | | -| |Rcpt | | | | | | -| +------+ +------+ +------------------+ | -| | -+------------------------------------------+ -``` - ---- - -## Screen 6: Overdue Payment State - -``` -+------------------------------------------+ -| 9:41 [***] | -+------------------------------------------+ -| | -| [<] Personal Loan [...] | -| #000123456 | -| | -+------------------------------------------+ -| | -| OVERDUE HERO CARD | -| +------------------------------------+ | -| |@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@|<-- Error gradient -| |@@ @@| #FF4757 -> #FF6B7A -| |@@ [!] Outstanding Balance @@| -| |@@ @@| -| |@@ -$3,275.00 @@|<-- Includes penalty -| |@@ @@| -| |@@ ┌─────────────────────────────┐ @@| -| |@@ │[████████████████░░░░░░░░░░]│ @@| -| |@@ └─────────────────────────────┘ @@| -| |@@ @@| -| |@@ +-------------+ +-------------+ @@| -| |@@ | Overdue | | Penalty | @@| -| |@@ | $450.00 | | +$25.00 | @@|<-- Red highlight -| |@@ +-------------+ +-------------+ @@| -| |@@ @@| -| |@@ +---------------------------+ @@| -| |@@ | [X] Status: OVERDUE | @@|<-- Red badge -| |@@ +---------------------------+ @@| pulsing -| |@@ @@| -| |@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@| -| +------------------------------------+ | -| ^ | -| | | -| Shake animation on load | -| Pulsing red glow | -| | -+------------------------------------------+ -| | -| OVERDUE ALERT | -| +------------------------------------+ | -| |@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@| -| |@@ @@| -| |@@ [!] Payment Overdue by 5 Days @@|<-- Urgent header -| |@@ ================================@@| -| |@@ @@| -| |@@ Your payment of $450.00 was due @@| -| |@@ on January 15, 2025 @@| -| |@@ @@| -| |@@ Late fee applied: $25.00 @@|<-- Penalty shown -| |@@ @@| -| |@@ +------------------------------+@@| -| |@@ |#### Pay $475.00 Now ########|@@|<-- Total due -| |@@ +------------------------------+@@| -| |@@ @@| -| |@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@| -| +------------------------------------+ | -| ^ | -| | | -| Background: #FF4757 at 10% | -| Border: 2dp solid #FF4757 | -| | -+------------------------------------------+ -| | -| STREAK BROKEN NOTICE | -| +------------------------------------+ | -| | | | -| | [BROKEN FIRE] Streak Paused | |<-- Sad fire icon -| | ================================ | | -| | | | -| | Your 24-month streak has been | | -| | paused. Pay now to restart it! | | -| | | | -| | +-----+-----+-----+-----+-----+ | | -| | |[v] |[v] |[v] |[v] |[X] | | |<-- Shows break -| | |Sep |Oct |Nov |Dec |Jan | | | -| | +-----+-----+-----+-----+-----+ | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| PENALTY BREAKDOWN | -| +------------------------------------+ | -| | | | -| | Penalty Details | | -| | -------------------------------- | | -| | | | -| | Original EMI: $450.00 | | -| | Late Fee (5%): + $22.50 | |<-- Red text -| | Additional Charge: + $2.50 | | -| | -------------------------------- | | -| | Total Due Now: $475.00 | |<-- Bold, Red -| | | | -| | [!] Additional penalties may | | -| | accrue daily until paid | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| PAYMENT OPTIONS | -| +------------------------------------+ | -| | | | -| | +--------------------------------+| | -| | |@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@|| -| | |@@ Pay Full Amount - $475 @@||<-- Primary CTA -| | |@@ Clears overdue + penalty @@|| gradient button -| | |@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@|| -| | +--------------------------------+| | -| | | | -| | +--------------------------------+| | -| | | Set Up Payment Plan [>] || |<-- Secondary option -| | | Split into 2-3 payments || | -| | +--------------------------------+| | -| | | | -| | +--------------------------------+| | -| | | Contact Support [>] || | -| | | Request fee waiver || | -| | +--------------------------------+| | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -``` - ---- - -## Screen 7: Loan Application Flow - -### Step 7a: Select Product - -``` -+------------------------------------------+ -| 9:41 [***] | -+------------------------------------------+ -| | -| [X] Apply for Loan 1/4 | -| | -+------------------------------------------+ -| | -| PROGRESS INDICATOR | -| +------------------------------------+ | -| | [1]────[2]────[3]────[4] | | -| | ^ | | -| | Product Amount Review Submit | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| LOAN PRODUCTS | -| +------------------------------------+ | -| | | | -| | Choose a loan product | | -| | | | -| | PERSONAL LOAN | | -| | +--------------------------------+| | -| | |########################################|<-- Selected -| | |## ##|| gradient border -| | |## [ICON] Personal Loan [*] ##|| -| | |## ##|| -| | |## Up to $10,000 ##|| -| | |## 12% p.a. | 6-24 months ##|| -| | |## ##|| -| | |## Best for: Emergency funds, ##|| -| | |## debt consolidation ##|| -| | |## ##|| -| | |########################################| -| | +--------------------------------+| | -| | | | -| | BRONZE LOAN | | -| | +--------------------------------+| | -| | | || | -| | | [ICON] Bronze Loan [ ] || | -| | | || | -| | | Up to $5,000 || | -| | | 10% p.a. | 3-12 months || | -| | | || | -| | +--------------------------------+| | -| | | | -| | HOME IMPROVEMENT | | -| | +--------------------------------+| | -| | | || | -| | | [ICON] Home Improvement [ ] || | -| | | || | -| | | Up to $50,000 || | -| | | 8% p.a. | 12-60 months || | -| | | || | -| | +--------------------------------+| | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| +------------------------------------+ | -| |###### Continue - Amount #########| | -| +------------------------------------+ | -| | -+------------------------------------------+ -``` - -### Step 7b: Enter Amount & Term - -``` -+------------------------------------------+ -| 9:41 [***] | -+------------------------------------------+ -| | -| [<] Apply for Loan 2/4 | -| | -+------------------------------------------+ -| | -| PROGRESS INDICATOR | -| +------------------------------------+ | -| | [v]────[2]────[3]────[4] | | -| | ^ | | -| | Product Amount Review Submit | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| LOAN AMOUNT | -| +------------------------------------+ | -| | | | -| | Personal Loan | | -| | How much do you need? | | -| | | | -| | $ 5,000 | |<-- Large editable -| | ═══════ | | -| | | | -| | Min: $500 Max: $10,000 | | -| | | | -| | +-----|-----|-----|-----|-----+ | | -| | 500 2.5k 5k 7.5k 10k | |<-- Slider -| | ^ | | -| | | | -| | QUICK AMOUNTS | | -| | +------+ +------+ +------+ | | -| | |$2,000| |$5,000| |$7,500| | |<-- Quick select -| | +------+ +------+ +------+ | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| LOAN TERM | -| +------------------------------------+ | -| | | | -| | Select loan term | | -| | | | -| | +------+ +------+ +------+ | | -| | | 6 | | [12] | | 18 | | |<-- [12] selected -| | |months| |months| |months| | | -| | +------+ +------+ +------+ | | -| | | | -| | +------+ +------+ | | -| | | 24 | |Custom| | | -| | |months| | | | | -| | +------+ +------+ | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| EMI PREVIEW | -| +------------------------------------+ | -| |########################################| -| |## ##| -| |## Estimated Monthly Payment ##| -| |## ##| -| |## $450.00 ##|<-- Large amount -| |## per month ##| -| |## ##| -| |## +-------------+ +-------------+ ##| -| |## | Total | | Interest | ##| -| |## | Interest | | Rate | ##| -| |## | $400.00 | | 12% p.a. | ##| -| |## +-------------+ +-------------+ ##| -| |## ##| -| |## Total Repayable: $5,400.00 ##| -| |## ##| -| |########################################| -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| +------------------------------------+ | -| |###### Continue - Review #########| | -| +------------------------------------+ | -| | -+------------------------------------------+ -``` - -### Step 7c: Review & Submit - -``` -+------------------------------------------+ -| 9:41 [***] | -+------------------------------------------+ -| | -| [<] Apply for Loan 3/4 | -| | -+------------------------------------------+ -| | -| PROGRESS INDICATOR | -| +------------------------------------+ | -| | [v]────[v]────[3]────[4] | | -| | ^ | | -| | Product Amount Review Submit | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| APPLICATION SUMMARY | -| +------------------------------------+ | -| | | | -| | Review Your Application | | -| | | | -| | Loan Details | | -| | -------------------------------- | | -| | Product: Personal Loan | | -| | Amount: $5,000.00 | | -| | Term: 12 months | | -| | Interest Rate: 12% p.a. | | -| | | | -| | Payment Details | | -| | -------------------------------- | | -| | Monthly EMI: $450.00 | | -| | First Payment: Feb 15, 2025 | | -| | Last Payment: Jan 15, 2026 | | -| | | | -| | Cost Summary | | -| | -------------------------------- | | -| | Principal: $5,000.00 | | -| | Total Interest: $400.00 | | -| | Processing Fee: $50.00 | | -| | -------------------------------- | | -| | Total Repayable: $5,450.00 | |<-- Bold total -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| PAYMENT PROJECTION | -| +------------------------------------+ | -| | | | -| | Your Debt Freedom Date | | -| | +--------------------------------+| | -| | | || | -| | | [CALENDAR] || | -| | | January 15, 2026 || |<-- Visual date -| | | || | -| | | 12 monthly payments of || | -| | | $450.00 each || | -| | | || | -| | +--------------------------------+| | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| TERMS ACCEPTANCE | -| +------------------------------------+ | -| | | | -| | [v] I agree to the Terms & | |<-- Required -| | Conditions and Privacy Policy | | -| | | | -| | [v] I consent to credit check | |<-- Required -| | | | -| | [v] I understand the repayment | | -| | obligations | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| +------------------------------------+ | -| |###### Submit Application ########| | -| +------------------------------------+ | -| | -+------------------------------------------+ -``` - -### Step 7d: Application Submitted - -``` -+------------------------------------------+ -| 9:41 [***] | -+------------------------------------------+ -| | -| [X] Application Submitted 4/4 | -| | -+------------------------------------------+ -| | -| PROGRESS INDICATOR | -| +------------------------------------+ | -| | [v]────[v]────[v]────[v] | | -| | ^ | | -| | Product Amount Review Submit | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| SUCCESS STATE | -| +------------------------------------+ | -| | | | -| | | | -| | +----------+ | | -| | | [v] | | |<-- Animated -| | | ~~~~ | | | checkmark -| | +----------+ | | + confetti -| | | | -| | Application Submitted! | | -| | | | -| | Your loan application has been | | -| | submitted successfully. | | -| | | | -| | Application ID: #LA-2025-0123 | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| NEXT STEPS | -| +------------------------------------+ | -| | | | -| | What happens next? | | -| | | | -| | [1] +----+ Review | | -| | |[?]| Our team will review | | -| | +----+ (1-2 business days) | | -| | | | | -| | v | | -| | [2] +----+ Approval | | -| | |[v]| You'll get a | | -| | +----+ notification | | -| | | | | -| | v | | -| | [3] +----+ Disbursement | | -| | |[$]| Funds credited to | | -| | +----+ your account | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| +------+ +------+ +------------------+ | -| |[LOAN]| |[HOME]| | [ Done ======= ] | | -| |My | | | | | | -| |Loans | | | | | | -| +------+ +------+ +------------------+ | -| | -+------------------------------------------+ -``` - ---- - -## Screen 8: Achievements & Badges - -``` -+------------------------------------------+ -| 9:41 [***] | -+------------------------------------------+ -| | -| [<] My Achievements | -| | -+------------------------------------------+ -| | -| ACHIEVEMENT STATS | -| +------------------------------------+ | -| | | | -| | +--------+ +--------+ +--------+ | | -| | | [12] | | [24] | | [$500] | | | -| | | Badges | | Streak | | Saved | | | -| | +--------+ +--------+ +--------+ | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| UNLOCKED BADGES | -| +------------------------------------+ | -| | | | -| | Unlocked (8) | | -| | -------------------------------- | | -| | | | -| | +------+ +------+ +------+ +------+| | -| | |[FIRE]| |[STAR]| |[HALF]| |[25%] || | -| | |Streak| |Early | |Half- | |First || | -| | | Pro | |Bird | | Way | |Step || | -| | +------+ +------+ +------+ +------+| | -| | | | -| | +------+ +------+ +------+ +------+| | -| | |[SAVE]| |[TIME]| |[CALC]| |[LOCK]|| | -| | |Smart | |On- | |Pay- | |Secure|| | -| | |Saver | |Time | | off | |User || | -| | +------+ +------+ +------+ +------+| | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| LOCKED BADGES | -| +------------------------------------+ | -| | | | -| | Locked (4) | | -| | -------------------------------- | | -| | | | -| | +------+ +------+ +------+ +------+| | -| | |[75%] | |[100%]| |[YEAR]| |[GOLD]|| |<-- Grayed out -| | |Finish| |Debt- | |Year | |Elite || | -| | | Line | |Free | |Streak| |Payer || | -| | +------+ +------+ +------+ +------+| | -| | | | -| | +--------------------------------+| | -| | | Finish Line: Pay off 75% || |<-- Progress hint -| | | [████████████░░░] 60% → 75% || | -| | +--------------------------------+| | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| RECENT ACTIVITY | -| +------------------------------------+ | -| | | | -| | +---+ Halfway Hero unlocked! | | -| | |[v]| January 10, 2025 | | -| | +---+ | | -| | -------------------------------- | | -| | +---+ 24-month streak reached! | | -| | |[v]| January 5, 2025 | | -| | +---+ | | -| | -------------------------------- | | -| | +---+ Smart Saver badge earned | | -| | |[v]| December 15, 2024 | | -| | +---+ | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -``` - ---- - -## Screen 9: Loading State - -``` -+------------------------------------------+ -| 9:41 [***] | -+------------------------------------------+ -| | -| [<] Loan Details [...] | -| | -+------------------------------------------+ -| | -| SHIMMER HERO CARD | -| +------------------------------------+ | -| | | | -| | ╔════════════════════════════╗ | | -| | ║ ░░░░░░░░░░░░░░░░░░░░░░░ ║ | |<-- Shimmer -| | ║ ║ | | animation -| | ║ ░░░░░░░░░░░░░░░░░░ ║ | | -| | ║ ║ | | -| | ║ ░░░░░░░░░░░░ ║ | | -| | ║ ║ | | -| | ╚════════════════════════════╝ | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| SHIMMER COUNTDOWN | -| +------------------------------------+ | -| | | | -| | ░░░░░░░░░░░░░░░░░░░░░░░░░░░░ | | -| | | | -| | ░░░░░░░░░░░░░░░░░░ | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| SHIMMER ACTIONS | -| +------------------------------------+ | -| | | | -| | ░░░░░░░░░░░░░░░░░░░░░░░░░░░░ | | -| | ░░░░░░░░░░░░░░░░░░░░░░░░░░░░ | | -| | ░░░░░░░░░░░░░░░░░░░░░░░░░░░░ | | -| | ░░░░░░░░░░░░░░░░░░░░░░░░░░░░ | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ - -Shimmer Animation Spec: -- Duration: 1000ms loop -- Gradient: #E1E4E8 (10%) → #F8F9FA (40%) → #E1E4E8 (10%) -- Direction: Left to right -- Easing: Linear -``` - ---- - -## Screen 10: Empty State - -``` -+------------------------------------------+ -| 9:41 [***] | -+------------------------------------------+ -| | -| [<] My Loans | -| | -+------------------------------------------+ -| | -| EMPTY STATE | -| +------------------------------------+ | -| | | | -| | | | -| | | | -| | +------------+ | | -| | | | | | -| | | [LOAN] | | |<-- Illustrated -| | | ~~~~ | | | empty icon -| | | | | | -| | +------------+ | | -| | | | -| | No Loan Accounts | | -| | | | -| | You don't have any active loans. | | -| | Apply for a loan to get started! | | -| | | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| WHY GET A LOAN? | -| +------------------------------------+ | -| | | | -| | +---+ Flexible Terms | | -| | |[v]| 6-60 month options | | -| | +---+ | | -| | -------------------------------- | | -| | +---+ Competitive Rates | | -| | |[v]| Starting from 8% p.a. | | -| | +---+ | | -| | -------------------------------- | | -| | +---+ Quick Approval | | -| | |[v]| Decision in 24 hours | | -| | +---+ | | -| | -------------------------------- | | -| | +---+ No Hidden Fees | | -| | |[v]| Transparent pricing | | -| | +---+ | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| +------------------------------------+ | -| |###### Apply for a Loan ##########| | -| +------------------------------------+ | -| | -+------------------------------------------+ -``` - ---- - -## Component Specifications - -### LoanDashboardHero Component - -``` -Props: -├── totalOutstanding: String -├── totalProgress: Float (0.0 - 1.0) -├── monthsToFreedom: Int -├── streakCount: Int -├── onViewAll: () -> Unit - -Dimensions: -├── Min Height: 220dp -├── Padding: 24dp -├── Corner Radius: 24dp -├── Shadow: 12dp blur, gradient at 25% - -Visual: -├── Gradient: Primary (#667EEA → #764BA2) -├── Progress Bar: Success gradient -├── Stats Chips: Semi-transparent white (15%) -├── Animated particles on high streak -``` - -### DebtCountdown Component - -``` -Props: -├── daysRemaining: Int -├── targetDate: LocalDate -├── amountPaid: String -├── amountRemaining: String -├── progress: Float - -Dimensions: -├── Height: 160dp -├── Countdown Circle: 80dp diameter -├── Progress Track: 8dp thickness - -Animation: -├── Number count-up on load (1s) -├── Progress fill animation (800ms) -├── Pulse effect on near completion -``` - -### PaymentStreakGrid Component - -``` -Props: -├── streakCount: Int -├── monthlyStatus: List -├── currentMonth: Int -├── onMonthClick: (Int) -> Unit - -Cell Specs: -├── Size: 32dp x 32dp -├── Spacing: 4dp -├── Completed: #00D09C (Success) -├── Current: #FFB800 (Warning) + pulse -├── Missed: #FF4757 (Error) -├── Future: #E1E4E8 (Muted) -``` - -### MilestoneProgress Component - -``` -Props: -├── currentProgress: Float -├── milestones: List -├── unlockedBadges: List -├── nextMilestone: Milestone - -Milestones: -├── 25% - "First Quarter" -├── 50% - "Halfway Hero" -├── 75% - "Finish Line" -├── 100% - "Debt Free" - -Visual: -├── Track: Gradient line with nodes -├── Completed nodes: Filled gradient -├── Current: Pulsing indicator -├── Upcoming: Gray outline -``` - -### LoanCard Component - -``` -Props: -├── loanName: String -├── loanNumber: String -├── outstanding: String -├── totalAmount: String -├── progress: Float -├── emiAmount: String -├── nextDueDate: String -├── onCardClick: () -> Unit -├── onPayClick: () -> Unit -├── onScheduleClick: () -> Unit - -Dimensions: -├── Min Height: 140dp -├── Padding: 16dp -├── Corner Radius: 16dp -├── Progress Bar Height: 8dp - -States: -├── Normal: Default elevation -├── Overdue: Red border + shake -├── Paid Off: Success gradient bg -``` - -### EarlyPayoffCalculator Component - -``` -Props: -├── remainingBalance: Double -├── currentEmi: Double -├── interestRate: Double -├── monthsRemaining: Int -├── onCalculate: (Double) -> PayoffResult - -Slider Specs: -├── Min: Current EMI -├── Max: Current EMI + 50% -├── Step: $50 increments -├── Track: Gradient fill to thumb - -Results Display: -├── Interest Saved: Success color -├── Months Saved: Bold -├── New Payoff Date: Calendar icon -``` - -### AchievementBadge Component - -``` -Props: -├── badge: Badge -├── isUnlocked: Boolean -├── progress: Float? (for locked) -├── onBadgeClick: () -> Unit - -Badge Types: -├── STREAK_PRO: 12+ months on-time -├── EARLY_BIRD: Paid early -├── HALFWAY_HERO: 50% repaid -├── DEBT_FREE: 100% repaid -├── SMART_SAVER: Used early payoff -├── FIRST_STEP: 25% repaid -├── FINISH_LINE: 75% repaid - -Dimensions: -├── Size: 72dp x 72dp -├── Icon: 36dp -├── Corner Radius: 16dp -├── Locked Opacity: 40% -``` - ---- - -## Animations & Micro-interactions - -### Streak Fire Animation - -``` -Keyframes: -0%: scale: 1.0, rotation: -5deg -25%: scale: 1.1, rotation: 5deg -50%: scale: 1.0, rotation: -3deg -75%: scale: 1.05, rotation: 3deg -100%: scale: 1.0, rotation: 0deg - -Duration: 600ms, loop infinite -Trigger: When streak > 3 months - -Particles (high streak 12+): -- 5-10 particles per second -- Colors: #FFB800, #FF6B35, #FF4757 -- Lifetime: 1000ms -- Drift: Upward with fade -``` - -### Milestone Unlock Celebration - -``` -Sequence: -0ms: Badge scale: 0, confetti prepare -100ms: Badge scale: 1.2 (spring) -200ms: Badge scale: 1.0 -300ms: Confetti burst (50 particles) -500ms: Glow pulse around badge -1000ms: Settle to final state - -Confetti: -- Colors: Primary gradient + Success -- Count: 50 particles -- Spread: 360 degrees -- Duration: 1200ms -``` - -### Payment Processing Animation - -``` -States: -1. IDLE → Button normal -2. PRESSED → Scale 0.96 (100ms) -3. LOADING → Spinner replaces text -4. SUCCESS → Checkmark draw (300ms) -5. CELEBRATION → Confetti + streak update - -Spinner: -- Size: 24dp -- Color: White -- Speed: 1 rotation/second - -Checkmark Draw: -- Duration: 300ms -- Easing: ease-out -- Stroke width: 3dp -``` - -### Countdown Number Animation - -``` -Props: -├── targetNumber: Int -├── duration: 1000ms -├── easing: DecelerateInterpolator - -Behavior: -├── Count up from 0 to target -├── Scale pulse at completion -├── Color change if near deadline -├── Haptic tick at milestones -``` - -### Progress Bar Fill - -``` -Animation: -├── Duration: 800ms -├── Easing: FastOutSlowIn -├── Start: 0% or previous value -├── End: Current percentage - -Visual Effects: -├── Gradient sweep during fill -├── Glow pulse at completion -├── Percentage counter synced -``` - ---- - -## Accessibility - -### Screen Reader Labels - -``` -Loan Dashboard Hero: -"Your total loan balance is $12,450. - You have paid off 62 percent. - 8 months until debt free. - 24 month payment streak." - -Payment Streak Grid: -"Payment streak: 24 months consecutive. - January 2023 through December 2024 - all paid on time. Current month pending." - -Milestone Progress: -"Loan repayment progress: 60 percent. - Milestones achieved: First Quarter at 25%, - Halfway Hero at 50%. Next milestone: - Finish Line at 75%, 15 percent remaining." - -Early Payoff Calculator: -"Early payoff calculator. Current payment - $450 per month. Slider to adjust payment - amount from $450 to $675. Currently set - to $600. This saves $127.50 in interest - and pays off 3 months early." -``` - -### Touch Targets - -``` -Minimum Sizes: -├── All buttons: 48dp x 48dp -├── Loan cards: Full width x 140dp -├── Badge icons: 72dp x 72dp -├── Quick action icons: 56dp x 56dp -├── Slider thumb: 28dp diameter - -Spacing: -├── Between touch targets: 8dp min -├── Card margins: 16dp -├── List item padding: 16dp -``` - -### Focus Navigation - -``` -Order (Loan Detail): -1. Back button -2. More options -3. Hero card (balance info) -4. Countdown section -5. Milestone progress -6. Next payment section -7. Pay Now button -8. Early payoff calculator -9. Action list items (sequential) -10. Loan details grid -``` - ---- - -## Dark Mode - -### Color Transformations - -``` -Element | Light | Dark ----------------------|------------|------------ -Background | #F8F9FA | #0D1117 -Surface/Cards | #FFFFFF | #1A1F2E -Card Border | none | #30363D -Primary Text | #1F2937 | #F0F6FC -Secondary Text | #6B7280 | #8B949E -Dividers | #E1E4E8 | #30363D -Progress Track | #E1E4E8 | #30363D -Icon Backgrounds | 8% tint | 15% tint -Success | #00D09C | #00D09C -Error | #FF4757 | #FF4757 -Warning | #FFB800 | #FFB800 -Primary Gradient | 100% | 85% -Shadows | visible | removed -``` - -### Dark Mode Hero Card - -``` -+------------------------------------+ -|####################################| -|## ##| -|## Outstanding Balance ##| -|## ##| -|## -$3,000.00 ##| -|## ##| -|## ┌─────────────────────────┐ ##| -|## │[████████████░░░░░░░░░]│ ##|<-- Track: #30363D -|## └─────────────────────────┘ ##| -|## ##| -|## +----------+ +----------+ ##| -|## | Principal| | Interest | ##| -|## | $5,000 | | 12% p.a. | ##| -|## +----------+ +----------+ ##| -|## ##| -|####################################| -+------------------------------------+ - ^ - | -Gradient at 85% opacity -No shadow, 1dp border #30363D -``` - ---- - -## Implementation Notes - -### Required Composables - -```kotlin -// Dashboard -LoanDashboardScreen.kt -LoanDashboardHeroCard.kt -DebtFreedomCountdown.kt -PaymentStreakGrid.kt -MilestoneProgressBar.kt -LoanCardList.kt -SmartSuggestionCard.kt - -// Detail View -LoanDetailScreen.kt -LoanHeroCard.kt -EarlyPayoffBanner.kt -LoanActionsList.kt -LoanDetailsGrid.kt - -// Payment Flow -MakePaymentScreen.kt -PaymentAmountSelector.kt -PaymentSourcePicker.kt -PaymentBreakdown.kt -PaymentProcessingDialog.kt -PaymentSuccessScreen.kt - -// Calculator -EarlyPayoffCalculatorScreen.kt -PaymentSlider.kt -SavingsVisualization.kt -ComparisonChart.kt - -// Schedule -RepaymentScheduleScreen.kt -VisualTimeline.kt -InstallmentCard.kt -CompletedPaymentsList.kt - -// Application -LoanApplicationFlow.kt -ProductSelector.kt -AmountTermSelector.kt -EMIPreviewCard.kt -ApplicationReview.kt -ApplicationSuccess.kt - -// Achievements -AchievementsScreen.kt -BadgeGrid.kt -AchievementBadge.kt -ActivityList.kt - -// States -LoanLoadingState.kt -LoanEmptyState.kt -LoanErrorState.kt -OverdueAlertBanner.kt -``` - -### State Management - -```kotlin -data class LoanDashboardState( - val totalOutstanding: Money, - val totalProgress: Float, - val monthsToFreedom: Int, - val streakCount: Int, - val loans: List, - val smartSuggestion: SmartSuggestion?, - val achievements: List, - val isLoading: Boolean, - val error: String? -) - -data class LoanDetailState( - val loan: LoanDetail, - val countdown: DebtCountdown, - val milestones: List, - val nextPayment: NextPayment, - val payoffProjection: PayoffProjection, - val streak: PaymentStreak, - val isOverdue: Boolean -) - -sealed class PaymentFlow { - object SelectAmount : PaymentFlow() - object Review : PaymentFlow() - object Processing : PaymentFlow() - data class Success(val receipt: PaymentReceipt) : PaymentFlow() - data class Error(val message: String) : PaymentFlow() -} -``` - ---- - -## Changelog - -| Date | Version | Change | -|------|---------|--------| -| 2025-12-29 | 1.0 | Initial loan account mockups | -| 2025-12-30 | 2.0 | Complete redesign with 2025 fintech patterns: debt freedom countdown, payment streaks, milestone gamification, early payoff calculator, smart AI suggestions, achievements system | - ---- - -## Data Binding Reference - -> **For `/implement` command**: Maps UI components to API.md sections. -> **Source of Truth**: See `API.md` for complete endpoint details. - -### Screen → API.md Mapping - -| Screen | API.md Section | Key Fields | -|--------|----------------|------------| -| Account List | `Endpoints Required → 1. Loan Account Summary` | `loanAccounts[]` from client accounts | -| Account Detail | `Endpoints Required → 2. Loan Account Details` | `summary`, `principal`, `interestRatePerPeriod`, `status` | -| Repayment Schedule | `Endpoints Required → 3. Loan Repayment Schedule` | `repaymentSchedule.periods[]` | -| Transactions | `Endpoints Required → 4. Loan Transactions` | `transactions[]` with associations | -| Transaction Detail | `Endpoints Required → 5. Loan Transaction Detail` | Full transaction with portions | -| Guarantors | `Endpoints Required → 6. Loan Guarantors` | `guarantors[]` | -| Add Guarantor | `Endpoints Required → 7. Create Guarantor` | POST request payload | -| Loan Charges | `Endpoints Required → 8. Loan Charges` | `charges[]` | - -### Client-Only Features - -| Feature | Storage | Notes | -|---------|---------|-------| -| Debt Freedom Countdown | Client-side | Calculated from repaymentSchedule | -| Payment Streak | DataStore | Gamification layer | -| Milestones (25%, 50%, 75%) | DataStore | Progress tracking | -| Early Payoff Calculator | Client-side | Projection calculation | -| Progress Bar | Client-side | `amountPaid / principal * 100` | - -### Actions → API.md Mapping - -| User Action | API.md Reference | Navigation | -|-------------|------------------|------------| -| Pull to Refresh | `2. Loan Account Details` | Reload with all associations | -| View Schedule | `3. Loan Repayment Schedule` | → Schedule Screen | -| Tap Transaction | `5. Loan Transaction Detail` | → Transaction Detail | -| View Guarantors | `6. Loan Guarantors` | → Guarantors List | -| Add Guarantor | `7. Create Guarantor` | → Add Guarantor Flow | -| View Charges | `8. Loan Charges` | → Charges List | - -### Error Handling - -See `API.md → Error Responses` for complete error codes. diff --git a/claude-product-cycle/design-spec-layer/features/loan-account/SPEC.md b/claude-product-cycle/design-spec-layer/features/loan-account/SPEC.md deleted file mode 100644 index 814703935..000000000 --- a/claude-product-cycle/design-spec-layer/features/loan-account/SPEC.md +++ /dev/null @@ -1,484 +0,0 @@ -# Loan Account - Feature Specification - -> **Purpose**: View and manage loan accounts including details, repayment schedule, summary, and transactions -> **User Value**: Complete visibility into loan status, payment schedules, and ability to make payments -> **Last Updated**: 2025-12-29 - ---- - -## 1. Overview - -### 1.1 Feature Summary -The Loan Account feature provides comprehensive loan management for MifosX Self-Service users. It consists of four main screens: -1. **Loan Accounts List** - View all loan accounts with filtering capabilities -2. **Loan Account Details** - View specific loan details and access actions -3. **Repayment Schedule** - View installment breakdown and pay installments -4. **Loan Summary** - Comprehensive loan summary with all financial details - -### 1.2 User Stories -- As a user, I want to see all my loan accounts so I can track my debt obligations -- As a user, I want to filter loan accounts by status (Active, Pending, Closed, etc.) -- As a user, I want to view loan details including outstanding balance and next payment -- As a user, I want to see my repayment schedule so I can plan my payments -- As a user, I want to pay an installment directly from the schedule -- As a user, I want to see a comprehensive summary of my loan including charges and waivers -- As a user, I want to view my loan transaction history -- As a user, I want to generate a QR code for my loan account - ---- - -## 2. Screen Layouts - -### 2.1 Loan Accounts List Screen - -``` -+------------------------------------------+ -| [<] Loan Accounts | -+------------------------------------------+ -| | -| +------------------------------------+ | -| | Total Loan Balance [eye] | | -| | $XX,XXX.XX or **** | | -| +------------------------------------+ | -| | -| Loan Accounts [n items] | -| ---------------------------------- [F] | <- Filter icon -| | -| +------------------------------------+ | -| | [icon] Account #123456 | | -| | Personal Loan | | -| | $5,000.00 | Active [>] | | -| +------------------------------------+ | -| | -| +------------------------------------+ | -| | [icon] Account #123457 | | -| | Bronze Loan | | -| | Pending Approval [>] | | -| +------------------------------------+ | -| | -| +------------------------------------+ | -| | [icon] Account #123458 | | -| | Home Loan | | -| | $150,000.00 | Active [>] | | -| +------------------------------------+ | -| | -+------------------------------------------+ -``` - -### 2.2 Loan Account Details Screen - -``` -+------------------------------------------+ -| [<] Account Details | -+------------------------------------------+ -| | -| +------------------+ +---------------+ | -| | Account Number | | Outstanding | | -| | 000000123 | | $5,000.00 | | -| +------------------+ +---------------+ | -| | -| +------------------+ +---------------+ | -| | Product Type | | Currency | | -| | Personal Loan | | USD ($) | | -| +------------------+ +---------------+ | -| | -| Next Installment | -| +------------------+ +---------------+ | -| | Installment Amt | | Due Date | | -| | $250.00 | | 2025-01-15 | | -| +------------------+ +---------------+ | -| | -| Actions | -| +------------------------------------+ | -| | [$$] Make Payment | | -| | Pay your loan installment | | -| +------------------------------------+ | -| | [i] Loan Summary | | -| | View detailed loan summary | | -| +------------------------------------+ | -| | [cal] Repayment Schedule | | -| | View payment schedule | | -| +------------------------------------+ | -| | [hist] Transactions | | -| | View transaction history | | -| +------------------------------------+ | -| | [bill] Charges | | -| | View loan charges | | -| +------------------------------------+ | -| | [QR] QR Code | | -| | Generate QR for account | | -| +------------------------------------+ | -| | -| Powered by Mifos | -+------------------------------------------+ -``` - -### 2.3 Repayment Schedule Screen - -``` -+------------------------------------------+ -| [<] Repayment Schedule | -+------------------------------------------+ -| | -| +------------------+ +---------------+ | -| | Account Number | | Disbursement | | -| | 000000123 | | 2024-01-15 | | -| +------------------+ +---------------+ | -| | -| +------------------+ +---------------+ | -| | Principal Paid | | Installments | | -| | $2,000.00 | | Paid: 8 | | -| +------------------+ +---------------+ | -| | -| +------------------+ +---------------+ | -| | Installments Left| | Total | | -| | 4 | | 12 | | -| +------------------+ +---------------+ | -| | -| +------------------------------------+ | -| | Installment #9 | | -| | Due: 2025-01-15 | | -| | Principal: $150.00 | | -| | Interest: $25.00 | | -| | Fees: $5.00 | | -| | Total Due: $180.00 [PAY] | | -| | Status: [ ] Pending | | -| +------------------------------------+ | -| | -| +------------------------------------+ | -| | Installment #10 | | -| | Due: 2025-02-15 | | -| | Total Due: $180.00 [PAY] | | -| | Status: [ ] Pending | | -| +------------------------------------+ | -| | -| Powered by Mifos | -+------------------------------------------+ -``` - -### 2.4 Loan Summary Screen - -``` -+------------------------------------------+ -| [<] Loan Summary | -+------------------------------------------+ -| | -| Account Details | -| +------------------------------------+ | -| | Account Number | 000000123 | | -| | Loan Type | Individual | | -| | Scheme | Personal | | -| | Status | Active | | -| +------------------------------------+ | -| | -| Payoff Details | -| +------------------------------------+ | -| | Expected Payoff | $6,000.00 | | -| | Interest Payoff | $600.00 | | -| | Principal | $5,000.00 | | -| | Currency | USD ($) | | -| | Interest Rate | 12% | | -| +------------------------------------+ | -| | -| Charges | -| +------------------------------------+ | -| | Fees | $50.00 | | -| | Penalties | $0.00 | | -| +------------------------------------+ | -| | -| Waivers | -| +------------------------------------+ | -| | Interest Waived | $0.00 | | -| | Penalty Waived | $0.00 | | -| | Fees Waived | $0.00 | | -| +------------------------------------+ | -| | -| Paid Off Details | -| +------------------------------------+ | -| | Interest Paid | $300.00 | | -| | Principal Paid | $2,000.00 | | -| +------------------------------------+ | -| | -| Outstanding Details | -| +------------------------------------+ | -| | Total Outstanding | $3,350.00 | | -| +------------------------------------+ | -| | -| Installment Details | -| +------------------------------------+ | -| | Regular Payment | $180.00 | | -| | Next Payment | 2025-01-15 | | -| | Months Left | 4/12 | | -| | Auto Debit | On | | -| | Linked Account | N/A | | -| +------------------------------------+ | -| | -| Powered by Mifos | -+------------------------------------------+ -``` - ---- - -## 3. Sections Table - -### 3.1 Loan Accounts List - -| # | Section | Description | API | Priority | -|---|---------|-------------|-----|----------| -| 1 | Dashboard Card | Total loan balance with visibility toggle | clients/{id}/accounts | P0 | -| 2 | Header Row | Account count and filter icon | - | P0 | -| 3 | Account List | Scrollable list of loan accounts | clients/{id}/accounts | P0 | -| 4 | Account Card | Individual account with status color | - | P0 | - -### 3.2 Loan Account Details - -| # | Section | Description | API | Priority | -|---|---------|-------------|-----|----------| -| 1 | Details Grid | Account number, balance, product, currency | loans/{id}?associations=transactions | P0 | -| 2 | Next Installment | Installment amount and due date | loans/{id}?associations=transactions | P0 | -| 3 | Actions Grid | Action cards based on loan status | - | P0 | - -### 3.3 Repayment Schedule - -| # | Section | Description | API | Priority | -|---|---------|-------------|-----|----------| -| 1 | Basic Details | Account number, disbursement date, installment stats | loans/{id}?associations=repaymentSchedule | P0 | -| 2 | Period List | List of all repayment periods with pay buttons | loans/{id}?associations=repaymentSchedule | P0 | - -### 3.4 Loan Summary - -| # | Section | Description | API | Priority | -|---|---------|-------------|-----|----------| -| 1 | Account Details | Account number, type, scheme, status | loans/{id}?associations=repaymentSchedule | P0 | -| 2 | Payoff Details | Expected payoff, interest, principal, rate | loans/{id}?associations=repaymentSchedule | P0 | -| 3 | Charges | Fees and penalties charged | loans/{id}?associations=repaymentSchedule | P0 | -| 4 | Waivers | Waived amounts | loans/{id}?associations=repaymentSchedule | P1 | -| 5 | Paid Off Details | Interest and principal paid | loans/{id}?associations=repaymentSchedule | P0 | -| 6 | Outstanding Details | Total outstanding balance | loans/{id}?associations=repaymentSchedule | P0 | -| 7 | Installment Details | Payment schedule info | loans/{id}?associations=repaymentSchedule | P0 | - ---- - -## 4. User Interactions - -### 4.1 Loan Accounts List - -| Action | Trigger | Result | API Call | -|--------|---------|--------|----------| -| Toggle amount visibility | Tap eye icon | Show/hide total balance | - | -| Open filters | Tap filter icon | Show filter bottom sheet | - | -| Apply filter | Select filter option | Reload filtered list | - | -| Tap account | Tap account card | Navigate to account details | loans/{id}?associations=transactions | -| Pull refresh | Swipe down | Reload accounts | clients/{id}/accounts | -| Retry | Tap retry button | Reload accounts | clients/{id}/accounts | - -### 4.2 Loan Account Details - -| Action | Trigger | Result | API Call | -|--------|---------|--------|----------| -| Navigate back | Tap back button | Pop to previous screen | - | -| Make Payment | Tap Make Payment card | Navigate to transfer screen | - | -| View Summary | Tap Loan Summary card | Navigate to summary screen | loans/{id}?associations=repaymentSchedule | -| View Schedule | Tap Repayment Schedule card | Navigate to schedule screen | loans/{id}?associations=repaymentSchedule | -| View Transactions | Tap Transactions card | Navigate to transactions screen | loans/{id}/transactions | -| View Charges | Tap Charges card | Navigate to charges screen | - | -| Generate QR | Tap QR Code card | Navigate to QR screen | - | - -### 4.3 Repayment Schedule - -| Action | Trigger | Result | API Call | -|--------|---------|--------|----------| -| Navigate back | Tap back button | Pop to previous screen | - | -| Pay installment | Tap PAY button on period | Navigate to make payment | - | -| Retry | Tap retry button | Reload schedule | loans/{id}?associations=repaymentSchedule | - -### 4.4 Loan Summary - -| Action | Trigger | Result | API Call | -|--------|---------|--------|----------| -| Navigate back | Tap back button | Pop to previous screen | - | -| Retry | Tap retry button | Reload summary | loans/{id}?associations=repaymentSchedule | - ---- - -## 5. State Model - -### 5.1 LoanAccountsState (List Screen) - -```kotlin -data class LoanAccountsState( - val loanAccounts: List?, - val originalAccounts: List? = null, - val isFilteredEmpty: Boolean = false, - val firstLaunch: Boolean = true, - val items: Int? = 0, - val totalLoanAmount: String? = "", - val currency: String? = "", - val decimals: Int? = 2, - val clientId: Long?, - val dialogState: DialogState? = null, - val selectedFilters: List = emptyList(), - val isAmountVisible: Boolean = false, - val networkStatus: Boolean = false, - val uiState: ScreenUiState? = ScreenUiState.Loading, -) { - sealed interface DialogState { - data class Error(val message: String) : DialogState - } -} -``` - -### 5.2 LoanAccountDetailsState - -```kotlin -@Immutable -data class LoanAccountDetailsState( - val accountId: Long = -1L, - val totalOutStandingBalance: Double? = null, - val isEmpty: Boolean = true, - val clientName: String? = "", - val submissionDate: String? = "", - val accountNumber: String? = "", - val product: String? = "", - val displayItems: List = emptyList(), - val transactionList: List? = emptyList(), - val accountStatus: LoanStatus? = LoanStatus.ACTIVE, - val items: ImmutableList, - val isUpdatable: Boolean = false, - val dialogState: DialogState? = null, - val networkStatus: Boolean = false, - val uiState: ScreenUiState? = ScreenUiState.Loading, -) { - sealed interface DialogState { - data class Error(val message: String) : DialogState - } -} -``` - -### 5.3 RepaymentScheduleState - -```kotlin -data class RepaymentScheduleState( - val accountId: Long? = null, - val loanWithAssociations: LoanWithAssociations? = null, - val periods: List = emptyList(), - val basicDetails: Map = emptyMap(), - val dialogState: DialogState? = null, - val networkStatus: Boolean = false, - val uiState: ScreenUiState? = ScreenUiState.Loading, -) { - sealed interface DialogState { - data class Error(val message: String) : DialogState - } - - val getPeriods = loanWithAssociations - ?.repaymentSchedule - ?.periods - .orEmpty() - .filter { it.period != null } -} -``` - -### 5.4 LoanAccountSummaryState - -```kotlin -@Immutable -data class LoanAccountSummaryState( - val accountId: Long, - val accountDetails: List? = emptyList(), - val payOffDetails: List? = emptyList(), - val chargeDetails: List? = emptyList(), - val waiversDetails: List? = emptyList(), - val paidOffDetails: List? = emptyList(), - val outStandingDetails: List? = emptyList(), - val installmentDetails: List? = emptyList(), - val dialogState: DialogState? = null, - val networkStatus: Boolean = false, - val uiState: ScreenUiState? = ScreenUiState.Loading, -) { - sealed interface DialogState { - data class Error(val message: String) : DialogState - } -} -``` - ---- - -## 6. API Requirements - -| Endpoint | Method | Purpose | Status | -|----------|--------|---------|--------| -| `/self/clients/{clientId}/accounts` | GET | Get all loan accounts | Exists | -| `/self/loans/{loanId}?associations=transactions` | GET | Get loan with transactions | Exists | -| `/self/loans/{loanId}?associations=repaymentSchedule` | GET | Get loan with schedule | Exists | -| `/self/loans/{loanId}/transactions/{transactionId}` | GET | Get transaction details | Exists | -| `/self/loans/{loanId}` | PUT | Update loan account | Exists | -| `/self/loans/{loanId}?command=withdrawnByApplicant` | POST | Withdraw loan | Exists | -| `/self/loans/template?templateType=individual` | GET | Get loan template | Exists | - ---- - -## 7. Edge Cases & Error Handling - -| Scenario | Behavior | UI Feedback | -|----------|----------|-------------| -| No internet | Show network state | "No internet connection" + Retry | -| No loan accounts | Show empty state | "No loan accounts found" icon | -| Empty filtered results | Show filtered empty state | "No accounts match filter" | -| API error | Show error state | Error message + Retry button | -| Empty repayment periods | Filter out null periods | Skip non-period entries | -| Invalid loan status | Default to ACTIVE | Handle gracefully | - ---- - -## 8. Components - -| Component | Props | Reusable? | -|-----------|-------|-----------| -| MifosDashboardCard | isVisible, amount, currency, onToggle | Yes | -| MifosAccountCard | accountId, accountNo, type, status, color, onClick | Yes | -| MifosLabelValueCard | label, value, color | Yes | -| MifosActionCard | title, subtitle, icon, onClick | Yes | -| RepaymentScheduleItem | period, currencyCode, maxDigits, onPayClick | Yes | -| AccountSummaryCard | title, keyValuePairs | Yes | -| MifosDetailsCard | keyValuePairs | Yes | - ---- - -## 9. Loan Status Actions Matrix - -| Status | Make Payment | Summary | Schedule | Transactions | Charges | QR | -|--------|-------------|---------|----------|--------------|---------|-----| -| Submit & Pending | - | Yes | - | - | - | - | -| Approved | - | Yes | - | - | Yes | - | -| Active/Disbursed | Yes | Yes | Yes | Yes | Yes | Yes | -| Matured | - | Yes | Yes | Yes | - | - | -| Closed | - | Yes | - | Yes | - | - | -| Closed (obligations met) | - | Yes | - | Yes | - | - | -| Rejected | - | Yes | - | - | - | - | -| Withdrawn | - | Yes | - | - | - | - | -| Overpaid | - | Yes | - | Yes | - | - | - ---- - -## 10. Filter Options - -| Filter | Match Condition | -|--------|----------------| -| Active | `status.active == true` | -| Approval Pending | `status.pendingApproval == true` | -| Closed | `status.closed == true` | -| Waiting for Disburse | `status.waitingForDisbursal == true` | -| Overpaid | `status.overpaid == true` | -| In Arrears | `inArrears == true` | -| Withdrawn | `status.overpaid == true` | -| Personal | `productName contains "personal"` | -| Bronze | `productName contains "bronze"` | - ---- - -## Changelog - -| Date | Change | -|------|--------| -| 2025-12-29 | Initial spec based on implementation code | diff --git a/claude-product-cycle/design-spec-layer/features/loan-account/STATUS.md b/claude-product-cycle/design-spec-layer/features/loan-account/STATUS.md deleted file mode 100644 index caeab8a8f..000000000 --- a/claude-product-cycle/design-spec-layer/features/loan-account/STATUS.md +++ /dev/null @@ -1,74 +0,0 @@ -# Loan Account - Implementation Status - -> **Last Updated**: 2025-12-29 -> **Overall Status**: ✅ Done - ---- - -## Implementation Checklist - -- [x] SPEC.md created -- [x] API.md created -- [x] Network: Services exist (LoanAccountsListService) -- [x] Data: Repository exists (LoanRepository) -- [x] Feature: ViewModels + Screens -- [x] Navigation: Route registered -- [x] DI: Modules registered -- [x] STATUS.md updated - ---- - -## Layer Status - -| Layer | Status | Files | -|-------|--------|-------| -| Network | ✅ | LoanAccountsListService.kt | -| Data | ✅ | LoanRepository.kt, LoanRepositoryImp.kt | -| Feature | ✅ | LoanAccountViewModel.kt, LoanAccountScreen.kt, RepaymentScheduleViewModel.kt, RepaymentScheduleScreen.kt, AccountSummaryViewModel.kt, AccountSummaryScreen.kt, LoanAccountDetailsViewModel.kt, LoanAccountDetailsScreen.kt | -| DI | ✅ | LoanModule.kt | -| Navigation | ✅ | LoanNavigation.kt, LoanAccountNavigation.kt, LoanAccountDetailsNavigation.kt, RepaymentScheduleRoute.kt, AccountSummaryRoute.kt | - ---- - -## Files - -### Network Layer -- `core/network/services/LoanAccountsListService.kt` - -### Data Layer -- `core/data/repository/LoanRepository.kt` -- `core/data/repositoryImpl/LoanRepositoryImp.kt` - -### Feature Layer -- `feature/loan-account/loanAccount/LoanAccountViewModel.kt` -- `feature/loan-account/loanAccount/LoanAccountScreen.kt` -- `feature/loan-account/loanAccount/LoanAccountNavigation.kt` -- `feature/loan-account/loanAccountRepaymentSchedule/RepaymentScheduleViewModel.kt` -- `feature/loan-account/loanAccountRepaymentSchedule/RepaymentScheduleScreen.kt` -- `feature/loan-account/loanAccountRepaymentSchedule/RepaymentScheduleRoute.kt` -- `feature/loan-account/loanAccountSummary/AccountSummaryViewModel.kt` -- `feature/loan-account/loanAccountSummary/AccountSummaryScreen.kt` -- `feature/loan-account/loanAccountSummary/AccountSummaryRoute.kt` -- `feature/loan-account/loanAccountDetails/LoanAccountDetailsViewModel.kt` -- `feature/loan-account/loanAccountDetails/LoanAccountDetailsScreen.kt` -- `feature/loan-account/loanAccountDetails/LoanAccountDetailsNavigation.kt` -- `feature/loan-account/component/AccountSummaryCard.kt` -- `feature/loan-account/component/RepaymentPeriodCard.kt` -- `feature/loan-account/component/LoanActionItems.kt` -- `feature/loan-account/utils/FilterUtil.kt` -- `feature/loan-account/navigation/LoanNavigation.kt` -- `feature/loan-account/di/LoanModule.kt` - ---- - -## Gaps - -None identified. - ---- - -## Changelog - -| Date | Change | -|------|--------| -| 2025-12-29 | Initial status documentation | diff --git a/claude-product-cycle/design-spec-layer/features/loan-account/mockups/PROMPTS_FIGMA.md b/claude-product-cycle/design-spec-layer/features/loan-account/mockups/PROMPTS_FIGMA.md deleted file mode 100644 index 79a56502f..000000000 --- a/claude-product-cycle/design-spec-layer/features/loan-account/mockups/PROMPTS_FIGMA.md +++ /dev/null @@ -1,377 +0,0 @@ -# Loan Account - Figma First Draft Prompts - -> **Tool**: Figma First Draft (Shift+I in Figma) -> **Style**: Debt Freedom Fintech, Material Design 3 -> **Format**: Natural language prompts optimized for Figma AI - ---- - -## How to Use - -1. Open Figma -> Create new design file -2. Press `Shift + I` or click "Actions" -> "First Draft" -3. Copy each prompt below -4. Generate -> Iterate -> Refine - ---- - -## Screen 1: Loan Dashboard - -``` -Design a modern mobile loan management dashboard for a fintech app focused on debt freedom. - -At the top, show a back arrow with "My Loans" title and add/help icons on the right. - -Create a compelling hero card with a purple gradient background. Show an animated flame icon with "Your Debt Freedom Journey" header. Display "Total Outstanding" label with "$12,450.00" in large white bold text. Add a combined progress bar showing "62% Paid". Include two stat chips: a calendar with "8 months to freedom" and a fire with "24 streak on-time". - -Add a Next Payment Alert card with a warning style if payment is due soon. Show a calendar icon with the date (JAN 15), "$450.00" amount with "Personal Loan" subtitle, an urgency badge showing "3 days" remaining, and a prominent "Pay Now - $450" button. - -Create a Payment Streak section with a fire emoji and "24 Month Streak!" celebration text. Show a grid of monthly payment indicators - green checkmarks for completed months, an asterisk for the current month, and empty circles for future months. Display an unlocked "Perfect Payer 2024" badge. - -Show a My Loans section with cards for each active loan. Each card should have a bank icon, loan number, outstanding amount with "of $X,XXX" total, a progress bar showing percentage paid, EMI amount, next due date, and "Pay Now" and "Schedule" action buttons. - -Add a Smart Suggestion card with a green gradient and sparkle icon saying "Pay $50 extra this month to save $127 in interest and finish 2 months early!" with Dismiss and Apply buttons. - -Include a Quick Actions row with circular buttons for Payoff Calculator, Payment History, Remind Me, and Pay via QR. - -Style it like Tally or Bright Money - focused on debt freedom and gamification with purple as the primary color. -``` - ---- - -## Screen 2: Loan Detail View - -``` -Design a loan account detail screen showing comprehensive loan information and early payoff options. - -Show a back arrow with "Personal Loan" title and loan number "#000123456" as subtitle. - -Create a hero card with purple gradient showing "Outstanding Balance" label and "-$3,000.00" in large white text (negative to show it's owed). Add a progress bar showing percentage paid. Include stat chips for "Principal $5,000" and "Interest 12% p.a." with a green "Active" status pill. - -Add a Debt Freedom Countdown section with a large circular countdown showing "241 days" animating. Below it show "Until you're debt-free!" text and "Target: September 15, 2025". Include a progress bar and "$2,000 paid • $3,000 to go" summary. - -Create a Milestone Progress section with a horizontal track showing nodes at 25%, 50%, 60% (current), 75%, and 100%. Show checkmarks for completed milestones and highlight the current position. Add a badge card showing "Halfway Hero! Unlocked at 50%" and "Next milestone: 75% - $1,250 to go". - -Show the Next Payment card with a calendar icon, date, $450.00 total with breakdown (Principal, Interest, Fees), a warning badge for days remaining, and a prominent "Pay Now" button. - -Add an Early Payoff Calculator card with green gradient showing "Pay Off Early?" with calculations: "If you pay $550/month instead: Save $127.50 interest, Finish 2 months earlier". Include a "Calculate Custom Amount" link. - -Create a Loan Actions menu list with icons and chevrons: Make Payment, Repayment Schedule, Payment History, Loan Summary, Charges & Fees, Guarantor Details, Generate QR. - -Add a Loan Details grid showing Principal, Interest Rate, Term, EMI, Disbursed Date, and Maturity Date. -``` - ---- - -## Screen 3: Early Payoff Calculator - -``` -Design an early payoff calculator screen that helps users visualize interest savings. - -Show a back arrow with "Payoff Calculator" title. - -Add a Current Loan Status card showing loan details: Remaining Balance $3,000, Current EMI $450/month, Months Remaining 8, Interest Left to Pay $240. - -Create a Payment Amount Slider section with "How much can you pay monthly?" label. Show a large "$600" amount that updates live as the slider moves. Add a slider from $450 (MIN) to $650 (MAX) and quick add chips: +$50, +$100, +$150. - -Design a Savings Visualization card with gradient background showing large animated "$127.50 Interest Saved" counter. Add two stat boxes: calendar icon "3 months earlier" and rocket icon "Aug 2025 payoff date". - -Add a Comparison Chart showing Current vs New Plan as bar charts. The new plan should show fewer months and less interest. Highlight the interest savings amount in green. Include a legend for Principal and Interest. - -Create a Payment Schedule Preview showing the new payment plan: monthly payments of $600 with dates, ending with a final smaller payment marked with "END". Show total payments count, total amount, and total interest. - -Add two action buttons: "Apply New Payment Plan" as a gradient button and "Keep Current Plan" as a text link. -``` - ---- - -## Screen 4: Repayment Schedule - -``` -Design a repayment schedule screen showing all installments with visual timeline. - -Show a back arrow with "Repayment Schedule" title and menu icon. - -Add a Schedule Overview card for "Personal Loan #000123456" with three stat boxes: "Paid 8 of 12", "Remaining 4 left", "Total 12". - -Create a Visual Timeline showing the year with monthly nodes connected by lines. Show completed months with green checkmarks, the current due month highlighted, and upcoming months as empty circles. Add a legend explaining the symbols. - -Show an Upcoming Installments section. The current installment should be highlighted with a warning gradient background, showing "Due: January 15, 2025", payment breakdown (Principal, Interest, Fees), total due, and a "Pay This" button. - -Add cards for upcoming installments with due dates, amounts, and "Pay Early - Save $X" buttons showing the interest savings for paying early. - -Create a Completed Payments section with "Completed (8)" header and a "View All" link. Show recent completed payments with month icons, dates, amounts, and "On Time" green badges. -``` - ---- - -## Screen 5: Make Payment Flow - -``` -Design a 3-step payment flow for making loan payments. - -Step 1 - Amount Selection: -Show a close X with "Make Payment" title and "1/3" step indicator. Add a progress bar with three steps: Amount (active), Review, Confirm. - -Display the loan summary with loan number, outstanding balance, and next due amount. - -Show a large editable payment amount "$450.00" with an Edit button. - -Create payment options as radio buttons: -- Pay this installment: $450.00 - Due Jan 15 (selected) -- Pay multiple installments -- Pay custom amount -- Pay off entire loan: $3,000.00 - Save $240! (highlight savings) - -Add a Smart Suggestion card: "Tip: Pay $500 instead - Save $15.50 in interest and finish 1 month earlier!" with "Apply $500 Payment" button. - -Include a "Continue to Review" gradient button. - ---- - -Step 2 - Review: -Show step 2 active with step 1 checked. - -Add a Payment Source selector showing account with available balance and "Change Account" link. - -Show Payment Breakdown: Principal, Interest, Fees with a bold Total. - -Create an "After Payment" card showing Remaining Balance, Payments Left, New Payoff Date, and updated progress bar. - -Add a Streak Warning card with fire icon: "Keep your 24-month streak alive! Pay on time to maintain your Perfect Payer status." - -Include "Confirm - $450.00" button with security lock badge. - ---- - -Step 3 - Success: -Show animated checkmark with confetti effect. - -Display "Payment Successful!" headline, amount, and source account. - -Add Streak Update section with fire icon, "25 MONTHS On-Time Payments" in large animated text, and updated streak grid. - -Show Milestone Check with progress bar and "9% to next milestone!" indicator. - -Include three buttons: View Receipt, Home, Done (gradient). -``` - ---- - -## Screen 6: Overdue Payment State - -``` -Design an overdue loan payment screen with urgency indicators and payment options. - -Show a back arrow with "Personal Loan" title and loan number. - -Create an Overdue Hero Card with red gradient (#FF4757 to #FF6B7A). Show a warning icon with "Outstanding Balance" label and "-$3,275.00" (including penalty) in large text. Add stat chips showing "Overdue $450.00" and "Penalty +$25.00" in red. Include a pulsing "OVERDUE" status badge. - -Add an Overdue Alert card with red left border. Show "Payment Overdue by 5 Days" header, original due date, and late fee amount. Include a prominent "Pay $475.00 Now" button. - -Create a Streak Broken Notice with a sad/broken fire icon. Show "Streak Paused" header and "Your 24-month streak has been paused. Pay now to restart it!" text. Display the monthly grid showing the break point. - -Add a Penalty Breakdown card showing Original EMI, Late Fee percentage, Additional Charges with divider and bold red Total Due. Include a warning: "Additional penalties may accrue daily until paid". - -Show Payment Options: -- Primary gradient button: "Pay Full Amount - $475" -- Secondary card: "Set Up Payment Plan" (split into 2-3 payments) -- Tertiary card: "Contact Support" (request fee waiver) - -Make it urgent but not panic-inducing - show clear path to resolution. -``` - ---- - -## Screen 7: Loan Application Flow - -``` -Design a 4-step loan application flow. - -Step 1 - Product Selection: -Show close X with "Apply for Loan" and "1/4" indicator. Add a 4-step progress bar. - -Display "Choose a loan product" header with three loan product cards: -- Personal Loan (selected with gradient border): Up to $10,000, 12% p.a., 6-24 months, "Best for: Emergency funds, debt consolidation" -- Bronze Loan: Up to $5,000, 10% p.a., 3-12 months -- Home Improvement: Up to $50,000, 8% p.a., 12-60 months - -Include "Continue - Amount" button. - ---- - -Step 2 - Amount & Term: -Show "How much do you need?" with large editable amount, min/max labels, slider, and quick amount chips. - -Add Term selection with chips: 6, 12 (selected), 18, 24 months, Custom. - -Create EMI Preview card with gradient showing estimated monthly payment, total interest, rate, and total repayable. - ---- - -Step 3 - Review: -Show Application Summary with Loan Details (Product, Amount, Term, Rate), Payment Details (EMI, First/Last Payment dates), and Cost Summary (Principal, Interest, Processing Fee, Total). - -Add Payment Projection card with calendar icon showing "Debt Freedom Date" and payment count. - -Include Terms Acceptance checkboxes and "Submit Application" button. - ---- - -Step 4 - Success: -Show animated checkmark with confetti and "Application Submitted!" headline. - -Display Application ID and "What happens next?" section with three steps: Review (1-2 days), Approval (notification), Disbursement (funds credited). - -Include navigation buttons. -``` - ---- - -## Screen 8: Achievements - -``` -Design an achievements screen showing earned and locked badges for loan payments. - -Show a back arrow with "My Achievements" title. - -Add Achievement Stats with three boxes: "12 Badges", "24 Streak", "$500 Saved". - -Create an Unlocked Badges section with a grid of earned badges. Each badge should have an icon, name, and golden glow effect. Show badges like: Streak Pro, Early Bird, Halfway, First Step, Smart Saver, On-Time, Payoff, Secure. - -Add a Locked Badges section with grayed-out badges: Finish Line (75%), Debt-Free (100%), Year Streak, Elite. Show a progress hint card for the next achievable badge with progress bar. - -Include a Recent Activity timeline showing recent achievement unlocks with dates. - -Make it feel rewarding and motivating with clear progress indicators. -``` - ---- - -## Screen 9: Loading State - -``` -Design a loading skeleton for the loan detail screen. - -Keep the header visible with "Personal Loan" title. - -Show a hero card skeleton with gradient background shape and shimmer placeholders for balance and stat chips. - -Add shimmer for the countdown circle and text below. - -Display shimmer rows for the action menu items. - -Use a wave animation moving left to right with light gray gradients. Make it feel premium, not jarring. -``` - ---- - -## Screen 10: Empty State - -``` -Design an empty state for when a user has no loan accounts. - -Keep the header with "My Loans" title. - -Show a friendly loan document illustration in the center, floating gently. - -Display "No Loan Accounts" as the headline with "You don't have any active loans. Apply for a loan to get started!" description. - -Create a "Why Get a Loan?" section with checkmarks: Flexible Terms, Competitive Rates, Quick Approval, No Hidden Fees. - -Add a prominent "Apply for a Loan" gradient button. - -Make it feel like an opportunity, not emptiness. -``` - ---- - -## Component Prompts - -### Debt Freedom Hero Card -``` -Design a loan dashboard hero card focused on debt freedom. - -Use a purple gradient background (#667EEA to #764BA2) with 24px rounded corners. - -Add an animated flame icon at the top for users with payment streaks. - -Show "Total Outstanding" label and large balance in white bold text. - -Create a progress bar with gradient fill showing percentage paid. - -Add two stat chips with semi-transparent white backgrounds: one for time to freedom, one for payment streak. - -Include subtle particle effects for high streak users. -``` - -### Debt Countdown Circle -``` -Design a circular countdown component for loan payoff. - -Create a large circle (about 80px) with a progress ring track. - -Display the days remaining as a large animated counter in the center. - -Add "Until you're debt-free!" text below with the target date. - -Include a pulse effect when nearing completion. - -Show the current progress percentage. -``` - -### Payment Streak Grid -``` -Design a payment streak grid showing monthly payment history. - -Create a grid with 32x32px cells and 4px spacing. - -Completed months show green checkmarks. -Current month shows amber with a pulse animation. -Missed months show red X marks. -Future months show gray empty circles. - -Connect consecutive completed months visually. - -Add a badge below for milestone achievements. -``` - -### Loan Card -``` -Design a loan account card component. - -Create a white card with subtle shadow and 16px rounded corners. - -On the left, show a circular icon container with gradient background. - -Display loan name, account number, and status badge. - -Show outstanding amount with "of $X,XXX" total and a progress bar. - -Add quick stats: EMI amount and next due date. - -Include action buttons: Pay Now and Schedule. - -For overdue state, add a red border with subtle shake animation. -``` - ---- - -## Tips for Figma First Draft - -1. **Iterate**: Generate once, then refine with follow-up prompts -2. **Colors**: Mention "purple accent #667EEA" for loan primary -3. **Reference**: Say "like Tally" or "Bright Money style" for debt freedom context -4. **Gamification**: Emphasize streaks, milestones, and celebrations -5. **Urgency**: Use red/amber for overdue states -6. **Responsive**: Mention "393px width for mobile" for correct sizing - ---- - -## After Generation - -1. Review generated designs for consistency -2. Create a color style library -3. Build component variants -4. Link screens with prototype connections -5. Export and update `FIGMA_LINKS.md` diff --git a/claude-product-cycle/design-spec-layer/features/loan-account/mockups/PROMPTS_STITCH.md b/claude-product-cycle/design-spec-layer/features/loan-account/mockups/PROMPTS_STITCH.md deleted file mode 100644 index 8bc334f64..000000000 --- a/claude-product-cycle/design-spec-layer/features/loan-account/mockups/PROMPTS_STITCH.md +++ /dev/null @@ -1,688 +0,0 @@ -# Loan Account - Google Stitch Prompts - -> **Tool**: [Google Stitch](https://stitch.withgoogle.com) -> **Style**: Material Design 3, Debt Freedom Fintech -> **Format**: Copy each prompt block directly into Stitch - ---- - -## Design System Reference - -``` -Primary Gradient: #667EEA -> #764BA2 -Secondary Gradient: #11998E -> #38EF7D -Success/Credit: #00D09C -Error/Debit: #FF4757 -Warning: #FFB800 -Text Primary: #1F2937 -Text Secondary: #6B7280 -Surface: #FFFFFF -Screen Size: 393 x 852 pixels (Android) -``` - ---- - -## Screen 1: Loan Dashboard - -``` -Mobile loan dashboard screen, Material Design 3, debt freedom fintech, 393x852px - -Top Bar: -- Back arrow, "My Loans" title -- Add and help icons right - -Debt Freedom Hero Card: -- Full width, gradient #667EEA to #764BA2, 24dp radius -- Animated flame icon + "Your Debt Freedom Journey" header -- "Total Outstanding" label -- "$12,450.00" balance 36sp white ExtraBold -- Combined progress bar 62% with "62% Paid" label -- Two stat chips: calendar "8 months to freedom", fire "24 streak on-time" -- Animated particles on high streak - -Next Payment Alert Card: -- Warning gradient background if due soon -- Calendar icon with date (JAN 15) -- "$450.00" amount 28sp bold, "Personal Loan" subtitle -- Urgency badge: clock icon "3 days" amber -- Primary CTA button: "Pay Now - $450" - -Payment Streak Section: -- "PAYMENT STREAK" header with fire icon -- "24 Month Streak!" prominent -- Monthly grid 3 rows x 10 columns -- Green checkmarks for paid months -- Current month highlighted with asterisk -- Badge: "Perfect Payer 2024" unlocked - -My Loans Section: -- "MY LOANS" header, "Active Loans (2)", "View All >" link -- Loan Card 1: Personal Loan - - Bank icon, #000123456 - - "Outstanding: $3,000.00 of $5,000" - - Progress bar 60% - - Stats: EMI $450, Next Jan 15 - - Actions: [Pay Now] [Schedule] -- Loan Card 2: Home Improvement - - $9,450.00 of $15,000, 37% progress - - EMI $625, Next Jan 20 - -Smart Suggestion Card: -- Success gradient #11998E to #38EF7D -- Sparkle icon "Smart Tip" -- "Pay $50 extra this month to save $127 in interest and finish 2 months early!" -- Actions: [Dismiss] [Apply >] - -Quick Actions Row: -- 4 circular buttons: Payoff Calc, Payment History, Remind Me, Pay via QR - -Bottom Navigation: -- Home, Accounts, FAB +, Cards, Profile -``` - ---- - -## Screen 2: Loan Detail View - -``` -Mobile loan detail screen, Material Design 3, debt freedom fintech, 393x852px - -Top Bar: -- Back arrow, "Personal Loan" title -- "#000123456" subtitle, menu icon - -Loan Hero Card: -- Primary gradient, 24dp radius -- "Outstanding Balance" label -- "-$3,000.00" balance 36sp white ExtraBold (negative) -- Progress bar showing percentage paid -- Two stat chips: "Principal $5,000", "Interest 12% p.a." -- Green "Active" status pill - -Debt Freedom Countdown: -- Large circular countdown display 80dp -- "241 days" number animated -- "Until you're debt-free!" text -- "Target: September 15, 2025" -- Progress bar 60% -- "$2,000 paid • $3,000 to go" - -Milestone Progress: -- "MILESTONES" header with trophy icon -- Horizontal progress track with nodes at 25%, 50%, 60% (current), 75%, 100% -- Checkmarks for completed, current highlighted -- Badge card: "Halfway Hero! Unlocked at 50%" -- "Next milestone: 75% - $1,250 to go" - -Next Payment Card: -- Calendar icon with date JAN 15 -- "$450.00" total, breakdown: - - Principal: $375.00 - - Interest: $50.00 - - Fees: $25.00 -- Warning badge "3 days left" -- Primary button: "Pay Now - $450.00" - -Early Payoff Calculator Card: -- Success gradient -- Sparkle icon "Pay Off Early?" -- "If you pay $550/month instead:" -- Two stat boxes: "Save $127.50 interest", "Finish 2 months earlier" -- "Calculate Custom Amount >" link - -Loan Actions List: -- Menu items with icons and chevrons: - - Make Payment - - Repayment Schedule (View all 12 installments) - - Payment History (8 payments completed) - - Loan Summary - - Charges & Fees - - Guarantor Details - - Generate QR - -Loan Details Grid: -- 2x3 grid layout: - - Principal: $5,000.00, Interest: 12% p.a. - - Term: 12 months, EMI: $450.00 - - Disbursed: Jan 2024, Maturity: Dec 2024 -``` - ---- - -## Screen 3: Early Payoff Calculator - -``` -Mobile payoff calculator screen, Material Design 3, fintech, 393x852px - -Top Bar: -- Back arrow, "Payoff Calculator" title - -Current Loan Status Card: -- "Personal Loan #000123456" -- Remaining Balance: $3,000.00 -- Current EMI: $450/month -- Months Remaining: 8 -- Interest Left to Pay: $240.00 - -Payment Amount Slider: -- "How much can you pay monthly?" label -- Large display "$600" updating live -- Slider track from $450 (MIN) to $650 (MAX) -- Quick add chips: +$50, +$100, +$150 - -Savings Visualization Card: -- Primary gradient background -- "YOUR SAVINGS" header -- Large animated counter "$127.50 Interest Saved" -- Two stat boxes: - - Calendar icon "3 months earlier" - - Rocket icon "Aug 2025 payoff date" - -Comparison Chart: -- "Current vs New Plan" header -- Bar chart comparing: - - New Plan: 5 months, less total interest - - Current Plan: 8 months, more interest - - Interest savings highlighted in green -- Legend: Principal (solid), Interest (filled) - -Payment Schedule Preview: -- "New Payment Schedule" header -- List items: - - Jan 2025: $600.00 (current marker) - - Feb 2025: $600.00 - - Mar 2025: $600.00 - - Apr 2025: $600.00 - - May 2025: $387.50 (END marker) -- Summary: 5 payments, $2,987.50 total, $112.50 interest - -Action Buttons: -- Primary gradient: "Apply New Payment Plan" -- Secondary text link: "Keep Current Plan" -``` - ---- - -## Screen 4: Repayment Schedule - -``` -Mobile repayment schedule screen, Material Design 3, fintech, 393x852px - -Top Bar: -- Back arrow, "Repayment Schedule" title, menu icon - -Schedule Overview Card: -- "Personal Loan #000123456" -- Three stat boxes: "Paid 8 of 12", "Remaining 4 left", "Total 12" - -Visual Timeline: -- "2024" year header -- Monthly timeline Jan-Jun, Jul-Dec -- Circle nodes connected by lines -- Green checkmarks [v] for paid months -- Asterisk [*] for current month -- Empty circles for upcoming -- Legend: Paid, Due, Upcoming - -Upcoming Installments Section: -- "UPCOMING INSTALLMENTS" header - -Installment Card #9 (Current, Highlighted): -- Warning gradient background -- "Due: January 15, 2025" with [!] icon -- Breakdown: - - Principal: $375.00 - - Interest: $50.00 - - Fees: $25.00 -- Total Due: $450.00 -- Primary button: "Pay This - $450" - -Installment Cards #10-12: -- Standard cards for Feb, Mar, Apr -- "Pay Early - Save $12.50" for next month -- "Pay Early" buttons for others -- Final installment marked with [END] - -Completed Payments Section: -- "Completed (8)" header + "View All >" link -- List items with month icons: - - Dec 15, 2024: $450.00 [v] On Time - - Nov 15, 2024: $450.00 [v] On Time - - Oct 15, 2024: $450.00 [v] On Time -``` - ---- - -## Screen 5: Make Payment Flow - -``` -Mobile make payment screen - Step 1, Material Design 3, fintech, 393x852px - -Top Bar: -- Close X, "Make Payment" title, "1/3" step indicator - -Progress Indicator: -- Three step circles connected: [1] Amount, [2] Review, [3] Confirm -- Step 1 active - -Loan Summary: -- "Personal Loan #000123456" -- "Outstanding: $3,000.00" -- "Next Due: Jan 15 - $450.00" - -Payment Amount: -- Large centered editable "$450.00" -- [EDIT] button below - -Payment Options: -- Radio button list: - - [*] Pay this installment: $450.00 - Due Jan 15 - - [ ] Pay multiple installments - - [ ] Pay custom amount - - [ ] Pay off entire loan: $3,000.00 - Save $240! - -Smart Suggestion Card: -- Primary gradient -- Sparkle icon "Tip: Pay $500 instead" -- "Save $15.50 in interest and finish 1 month earlier!" -- Button: "Apply $500 Payment" - -Continue Button: -- Full width gradient: "Continue to Review" - ---- - -Step 2: Review Screen - -Top Bar: -- Back arrow, "Make Payment" title, "2/3" - -Progress Indicator: -- Step 2 active, Step 1 checked - -Payment Source: -- "Pay From" label -- Account card: wallet icon, Primary Savings ****4521 -- "Available: $8,200.00" green -- "Change Account v" link - -Payment Breakdown: -- Principal: $375.00 -- Interest: $50.00 -- Fees: $25.00 -- Divider -- Total Payment: $450.00 (bold) - -After Payment Card: -- "After This Payment" header -- Remaining Balance: $2,550.00 -- Payments Left: 3 -- New Payoff Date: Apr 15, 2025 -- Progress bar 66% - -Streak Warning Card: -- Primary gradient -- Fire icon "Keep your 24-month streak alive!" -- "Pay on time to maintain your Perfect Payer status." - -Confirm Button: -- Full width gradient: "Confirm - $450.00" -- Lock icon "Secured with 256-bit encryption" - ---- - -Step 3: Success Screen - -Top Bar: -- Close X, "Payment Complete" - -Success Card: -- Primary gradient -- Animated checkmark with confetti -- "Payment Successful!" -- "-$450.00" amount -- "From: Primary Savings" - -Streak Update: -- Fire icon "STREAK CONTINUES!" -- "25 MONTHS" large animated number -- "On-Time Payments" -- Updated streak grid with checkmarks - -Milestone Check: -- "Progress: 66% Complete!" -- Progress bar -- Trophy icon "9% to next milestone! (75% - Finish Line)" - -Action Buttons: -- Three buttons: View Receipt, Home, Done (gradient) -``` - ---- - -## Screen 6: Overdue Payment State - -``` -Mobile loan overdue screen, Material Design 3, fintech, 393x852px - -Top Bar: -- Back arrow, "Personal Loan" title, "#000123456" - -Overdue Hero Card: -- Error gradient #FF4757 to #FF6B7A -- [!] icon, "Outstanding Balance" -- "-$3,275.00" (includes penalty) 36sp -- Progress bar -- Two stat chips: "Overdue $450.00" red, "Penalty +$25.00" -- Pulsing red "OVERDUE" status badge -- Shake animation on load - -Overdue Alert Card: -- Error background 10% opacity -- Red left border 4dp -- [!] "Payment Overdue by 5 Days" header -- "Your payment of $450.00 was due on January 15, 2025" -- "Late fee applied: $25.00" red text -- Primary button: "Pay $475.00 Now" - -Streak Broken Notice: -- Broken/sad fire icon -- "Streak Paused" header -- "Your 24-month streak has been paused. Pay now to restart it!" -- Monthly grid showing break in January - -Penalty Breakdown Card: -- Original EMI: $450.00 -- Late Fee (5%): +$22.50 red -- Additional Charge: +$2.50 -- Divider -- Total Due Now: $475.00 bold red -- Warning: "Additional penalties may accrue daily until paid" - -Payment Options: -- Primary gradient button: "Pay Full Amount - $475" -- Secondary card: "Set Up Payment Plan >" (split into 2-3 payments) -- Tertiary card: "Contact Support >" (request fee waiver) -``` - ---- - -## Screen 7: Loan Application Flow - -``` -Mobile loan application - Step 1, Material Design 3, fintech, 393x852px - -Top Bar: -- Close X, "Apply for Loan" title, "1/4" - -Progress Indicator: -- Four steps: [1] Product, [2] Amount, [3] Review, [4] Submit - -Loan Products: -- "Choose a loan product" header - -Product Card 1 (Selected): -- Primary gradient border -- Bank icon, "Personal Loan" [*] radio selected -- "Up to $10,000" -- "12% p.a. | 6-24 months" -- "Best for: Emergency funds, debt consolidation" - -Product Card 2: -- Standard border -- "Bronze Loan" [ ] radio -- "Up to $5,000", "10% p.a. | 3-12 months" - -Product Card 3: -- "Home Improvement" [ ] radio -- "Up to $50,000", "8% p.a. | 12-60 months" - -Continue Button: -- Full width gradient: "Continue - Amount" - ---- - -Step 2: Amount & Term - -Top Bar: -- Back arrow, "Apply for Loan", "2/4" - -Loan Amount: -- "Personal Loan" subtitle -- "How much do you need?" label -- Large centered "$5,000" editable -- "Min: $500 Max: $10,000" -- Slider $500 to $10,000 -- Quick amount chips: $2,000, $5,000, $7,500 - -Loan Term: -- "Select loan term" label -- Term chips: 6 months, [12 months] selected, 18 months, 24 months, Custom - -EMI Preview Card: -- Primary gradient -- "Estimated Monthly Payment" -- "$450.00 per month" large -- Two stat boxes: "Total Interest $400.00", "Interest Rate 12% p.a." -- "Total Repayable: $5,400.00" - -Continue Button: -- Full width gradient: "Continue - Review" - ---- - -Step 3: Review & Submit - -Application Summary: -- "Review Your Application" header -- Loan Details section: - - Product: Personal Loan - - Amount: $5,000.00 - - Term: 12 months - - Interest Rate: 12% p.a. -- Payment Details: - - Monthly EMI: $450.00 - - First Payment: Feb 15, 2025 - - Last Payment: Jan 15, 2026 -- Cost Summary: - - Principal: $5,000.00 - - Total Interest: $400.00 - - Processing Fee: $50.00 - - Total Repayable: $5,450.00 bold - -Payment Projection Card: -- Calendar icon -- "Your Debt Freedom Date" -- "January 15, 2026" -- "12 monthly payments of $450.00 each" - -Terms Acceptance: -- Three checkboxes: - - [v] I agree to Terms & Conditions and Privacy Policy - - [v] I consent to credit check - - [v] I understand the repayment obligations - -Submit Button: -- Full width gradient: "Submit Application" - ---- - -Step 4: Application Submitted - -Success Card: -- Animated checkmark + confetti -- "Application Submitted!" -- "Your loan application has been submitted successfully." -- "Application ID: #LA-2025-0123" - -Next Steps: -- "What happens next?" header -- Three step cards with icons: - - [1] Review: Our team will review (1-2 business days) - - [2] Approval: You'll get a notification - - [3] Disbursement: Funds credited to your account - -Action Buttons: -- My Loans, Home, Done (gradient) -``` - ---- - -## Screen 8: Achievements - -``` -Mobile loan achievements screen, Material Design 3, gamification, 393x852px - -Top Bar: -- Back arrow, "My Achievements" title - -Achievement Stats: -- Three stat boxes: "12 Badges", "24 Streak", "$500 Saved" - -Unlocked Badges Section: -- "Unlocked (8)" header -- 4x2 badge grid: - - Fire Streak Pro, Star Early Bird, Half Halfway, 25% First Step - - Save Smart Saver, Clock On-Time, Calc Payoff, Lock Secure User -- Each badge: icon, name, full color with glow - -Locked Badges Section: -- "Locked (4)" header -- Grayed out badges: 75% Finish Line, 100% Debt-Free, Year Streak, Gold Elite -- Progress hint card: "Finish Line: Pay off 75%" -- Progress bar 60% -> 75% - -Recent Activity: -- Timeline list: - - Halfway Hero unlocked! Jan 10, 2025 - - 24-month streak reached! Jan 5, 2025 - - Smart Saver badge earned Dec 15, 2024 -``` - ---- - -## Screen 9: Loading State - -``` -Mobile loan loading skeleton, Material Design 3, 393x852px - -Top Bar: Same as success - -Hero Card Shimmer: -- Gradient card shape with shimmer -- Balance placeholder 200dp -- Progress bar shimmer -- Stat chip shimmers - -Countdown Shimmer: -- Circular shimmer 80dp -- Text line shimmers below - -Actions List Shimmer: -- Multiple row shimmers with icon circles - -Shimmer animation: left-to-right sweep, 1000ms infinite -Gradient: #E1E4E8 -> #F8F9FA -> #E1E4E8 -``` - ---- - -## Screen 10: Empty State - -``` -Mobile loan empty state, Material Design 3, 393x852px - -Top Bar: Same as success - -Center Content: -- Loan document illustration 160dp -- "No Loan Accounts" title 20sp bold -- "You don't have any active loans. Apply for a loan to get started!" - -Benefits Card: -- "WHY GET A LOAN?" header -- Checklist: - - Flexible Terms (6-60 month options) - - Competitive Rates (Starting from 8% p.a.) - - Quick Approval (Decision in 24 hours) - - No Hidden Fees (Transparent pricing) - -CTA: -- Full width gradient button: "Apply for a Loan" -``` - ---- - -## Components - -### LoanDashboardHero -``` -Loan dashboard hero card, Material Design 3: -- Min height: 220dp, padding: 24dp -- Gradient #667EEA to #764BA2, 24dp radius -- Animated flame icon on high streak -- Progress bar with gradient fill -- Stats chips semi-transparent white -- Shadow: 12dp blur, gradient at 25% -``` - -### DebtCountdown -``` -Debt countdown component, Material Design 3: -- Height: 160dp -- Large circular display 80dp diameter -- Days number animated counter -- Progress track 8dp thickness -- Pulse effect when near completion -``` - -### PaymentStreakGrid -``` -Payment streak grid, Material Design 3: -- Cell size: 32dp x 32dp, spacing: 4dp -- Completed: #00D09C green check -- Current: #FFB800 amber with pulse -- Missed: #FF4757 red X -- Future: #E1E4E8 gray -``` - -### MilestoneProgress -``` -Milestone progress bar, Material Design 3: -- Horizontal track with gradient -- Node circles at 25%, 50%, 75%, 100% -- Completed nodes filled -- Current node pulsing -- Badge card below current -``` - -### LoanCard -``` -Loan account card, Material Design 3: -- Min height: 140dp, 16dp padding -- White surface, 16dp radius, 2dp elevation -- Left: icon container with gradient -- Progress bar 8dp below content -- Quick action buttons row -- Overdue state: red border + shake -``` - -### AchievementBadge -``` -Achievement badge, Material Design 3: -- Size: 72dp x 72dp -- Icon container 48dp with 36dp icon -- Unlocked: full color + golden glow -- Locked: 40% opacity + lock overlay -- Progress variant: grayscale + progress ring -``` - ---- - -## Quick Start - -1. Open [stitch.withgoogle.com](https://stitch.withgoogle.com) -2. Create project "Mifos Mobile - Loan Account" -3. Copy each screen prompt -> Generate -4. Generate components separately for reuse -5. Export all to Figma when done diff --git a/claude-product-cycle/design-spec-layer/features/loan-account/mockups/dummy/01-loan-detail.png b/claude-product-cycle/design-spec-layer/features/loan-account/mockups/dummy/01-loan-detail.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/loan-account/mockups/dummy/02-loan-repayment-schedule.png b/claude-product-cycle/design-spec-layer/features/loan-account/mockups/dummy/02-loan-repayment-schedule.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/loan-account/mockups/dummy/03-loan-transactions.png b/claude-product-cycle/design-spec-layer/features/loan-account/mockups/dummy/03-loan-transactions.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/loan-account/mockups/dummy/04-loan-statement.png b/claude-product-cycle/design-spec-layer/features/loan-account/mockups/dummy/04-loan-statement.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/loan-account/mockups/dummy/05-make-repayment.png b/claude-product-cycle/design-spec-layer/features/loan-account/mockups/dummy/05-make-repayment.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/loan-account/mockups/dummy/06-loan-calculator.png b/claude-product-cycle/design-spec-layer/features/loan-account/mockups/dummy/06-loan-calculator.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/loan-account/mockups/dummy/07-loan-empty.png b/claude-product-cycle/design-spec-layer/features/loan-account/mockups/dummy/07-loan-empty.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/location/API.md b/claude-product-cycle/design-spec-layer/features/location/API.md deleted file mode 100644 index d1ec59a4c..000000000 --- a/claude-product-cycle/design-spec-layer/features/location/API.md +++ /dev/null @@ -1,150 +0,0 @@ -# Location - API Reference - ---- - -## Overview - -The Location feature is a **static/local feature** that does not require any backend API calls. All content is hardcoded in the application. - ---- - -## Static Data - -### Organization Information - -The following data is stored in string resources (`feature/location/src/commonMain/composeResources/values/strings.xml`): - -```xml - - Mifos Initiative - Mifos Initiative , Seattle , Washington 98121 - Seattle - Home to large tech industry - -``` - -### Hardcoded Coordinates - -Location coordinates are hardcoded in the Android implementation: - -```kotlin -// Mifos Initiative Headquarters -val headquarterLatLng = LatLng(47.61115, -122.34481) - -// Map Configuration -val defaultZoomLevel = 16f -``` - -**Physical Location**: Seattle, Washington 98121, USA - ---- - -## Map Display Logic - -### Android Implementation - -Uses Google Maps Compose library (`com.google.maps.android:maps-compose`): - -```kotlin -@Composable -actual fun RenderMap(modifier: Modifier) { - val headquarterLatLng = LatLng(47.61115, -122.34481) - val cameraPositionState = rememberCameraPositionState { - position = CameraPosition.fromLatLngZoom(headquarterLatLng, 16f) - } - - GoogleMap( - modifier = modifier, - cameraPositionState = cameraPositionState, - ) { - Marker( - state = MarkerState(position = headquarterLatLng), - title = "Mifos Initiative", - snippet = "Mifos Location", - ) - } -} -``` - -**Dependencies Required**: -- Google Maps SDK for Android -- Google Maps Compose (`com.google.maps.android:maps-compose`) -- Valid Google Maps API key in `AndroidManifest.xml` - -### Other Platforms (iOS, Desktop, Web) - -Currently implemented as no-op placeholders: - -```kotlin -@Composable -actual fun RenderMap(modifier: Modifier) { - // No-op - platform-specific implementation pending -} -``` - -**Future Implementation Options**: -- **iOS**: Apple MapKit or Google Maps iOS SDK -- **Desktop**: OpenStreetMap with JXMapViewer or similar -- **Web**: Google Maps JavaScript API or Leaflet.js - ---- - -## API Summary - -| Endpoint | Service | Repository | Status | -|----------|---------|------------|--------| -| None | N/A | N/A | Static feature | - ---- - -## External Service Dependencies - -### Google Maps (Android Only) - -| Service | Purpose | Required | -|---------|---------|----------| -| Google Maps SDK | Render interactive map | Yes (Android) | -| Google Maps Tiles | Map imagery | Yes (requires internet) | - -**Configuration**: Requires `MAPS_API_KEY` in `local.properties` or build configuration. - ---- - -## Data Flow - -``` -+---------------------+ -| String Resources | -| (static strings) | -+----------+----------+ - | - v -+---------------------+ -| LocationsScreen | -| (Composable) | -+----------+----------+ - | - v -+---------------------+ -| RenderMap | -| (expect/actual) | -+----------+----------+ - | - +------+------+ - | | - v v -+-------+ +---------+ -|Android| | Others | -|Google | | (no-op) | -|Maps | | | -+-------+ +---------+ -``` - ---- - -## Notes - -- No network calls to Mifos backend are made by this feature -- Map tile loading requires internet connectivity -- Google Maps API key must be configured for Android builds -- Consider implementing map alternatives for non-Android platforms in future releases diff --git a/claude-product-cycle/design-spec-layer/features/location/MOCKUP.md b/claude-product-cycle/design-spec-layer/features/location/MOCKUP.md deleted file mode 100644 index 7ed53094c..000000000 --- a/claude-product-cycle/design-spec-layer/features/location/MOCKUP.md +++ /dev/null @@ -1,2007 +0,0 @@ -# Location / Branch Finder - UI Mockups - -> **Design Style**: 2025 Fintech - Location Intelligence Hub -> **Pattern**: Smart Discovery Experience -> **Primary Gradient**: #667EEA (Purple) -> #764BA2 (Deep Purple) -> **Version**: 2.0 (Redesigned) -> **Last Updated**: 2025-12-30 - ---- - -## Design Philosophy - -``` -+------------------------------------------------------------------+ -| LOCATION INTELLIGENCE HUB | -+------------------------------------------------------------------+ -| | -| 2025 Vision: | -| "Transform branch finding from a utility into | -| an intelligent, predictive experience" | -| | -| Key Innovations: | -| 1. AI-Powered Wait Time Predictions | -| 2. AR Branch Finder Mode | -| 3. Smart Commute Integration (transit times) | -| 4. Appointment Booking at Branches | -| 5. Branch Visit Gamification & Rewards | -| 6. Voice Search for Hands-Free Discovery | -| 7. Crowd Level Indicators | -| 8. Favorite & Recent Locations | -| 9. Proactive Recommendations | -| 10. Branch Check-In Rewards | -| | -| Competitive Inspiration: | -| - Revolut's location services | -| - Chase branch finder | -| - Apple Maps Look Around | -| - Google Maps real-time info | -| | -+------------------------------------------------------------------+ -``` - ---- - -## Table of Contents -1. [Screen States](#screen-states) -2. [Component Specifications](#component-specifications) -3. [2025 Enhancement Features](#2025-enhancement-features) -4. [Interactions & Animations](#interactions--animations) -5. [Accessibility](#accessibility) -6. [Dark Mode](#dark-mode) -7. [Implementation Notes](#implementation-notes) - ---- - -## Screen States - -### 1. Smart Location Hub (Primary State) - -The main screen with intelligent search, quick filters, AI recommendations, and interactive map. - -``` -+------------------------------------------------------------------+ -| 9:41 5G 📶 🔋 85% | -+------------------------------------------------------------------+ -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ <- Back Find Nearby 🎤 ⚙️ │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ 🔍 Search locations, branches, ATMs... │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ 🏦 All 🏧 ATM 🏢 Branch 👤 Agent │ | -| │ ──── ○ ○ ○ │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ ✨ AI RECOMMENDATION │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ ████████████████████████████████████████████████████ │ │ | -| │ │ ██ ██ │ │ | -| │ │ ██ 🏦 Mifos Main Branch ██ │ │ | -| │ │ ██ ├─ 📍 0.3 mi • 5 min walk ██ │ │ | -| │ │ ██ ├─ 🟢 Open • Closes 5 PM ██ │ │ | -| │ │ ██ └─ ⏱️ ~8 min wait • Low crowd ██ │ │ | -| │ │ ██ ██ │ │ | -| │ │ ██ "Best option - shortest wait right now" ██ │ │ | -| │ │ ██ ██ │ │ | -| │ │ ████████████████████████████████████████████████████ │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ MAP VIEW │ | -| │ │ | -| │ ╭─────╮ │ | -| │ │ B │ ←── Selected marker (gradient, elevated) │ | -| │ ╰──┬──╯ │ | -| │ │ ╭───────────────────╮ │ | -| │ └────>│ Mifos Main Branch │ │ | -| │ │ 0.3 mi • 🟢 Open │ │ | -| │ ╰───────────────────╯ │ | -| │ │ | -| │ ╭───╮ ╭───╮ │ | -| │ │ A │ │ B │ │ | -| │ ╰───╯ ╰───╯ │ | -| │ │ | -| │ ╭───╮ ╭───╮ │ | -| │ │ P │ ◉ You │ A │ │ | -| │ ╰───╯ ○ ╰───╯ │ | -| │ ○ (pulse) │ | -| │ │ | -| │ ┌─────────────────────────────────────┐ │ | -| │ │ 📍 Near Me 🔲 AR View │ │ | -| │ └─────────────────────────────────────┘ │ | -| │ │ | -| │ [ + ] │ | -| │ [ - ] │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ 📋 View List │ 12 locations found │ ⚡ Quick Book │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -+------------------------------------------------------------------+ -| 🏠 📊 ➕ 📍 👤 | -| Home Accounts Transfer Location* Profile | -+------------------------------------------------------------------+ -``` - -**AI Recommendation Card Specification:** -``` -+------------------------------------------------------------------+ -| AI RECOMMENDATION CARD | -+------------------------------------------------------------------+ -| | -| Purpose: Show the smartest option based on: | -| - Current location & travel time | -| - Real-time wait times | -| - Branch capacity/crowd level | -| - User's preferred services | -| - Time of day optimization | -| | -| Visual Design: | -| - Background: Primary gradient at 8% opacity | -| - Border: 1dp gradient stroke | -| - Corner Radius: 16dp | -| - Icon: Sparkle (24dp) with shimmer animation | -| - Shadow: Subtle gradient glow (8dp blur) | -| | -| Content: | -| - Branch name: HeadlineMedium (18sp Bold) | -| - Distance + Time: BodyMedium (14sp) | -| - Status: Chip with icon | -| - Wait time: AI prediction with confidence | -| - Reason: Italic text explaining why recommended | -| | -+------------------------------------------------------------------+ -``` - ---- - -### 2. List View with Smart Cards - -Scrollable list with enhanced information cards showing wait times, crowd levels, and quick actions. - -``` -+------------------------------------------------------------------+ -| 9:41 5G 📶 🔋 85% | -+------------------------------------------------------------------+ -| | -| <- Back Nearby Locations 🔍 🎤 | -| | -+------------------------------------------------------------------+ -| | -| 🏦 All 🏧 ATM 🏢 Branch 👤 Agent | -| ──── ○ ○ ○ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ 🗺️ View Map │ Sort: Smart ▼ │ 12 results │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ⭐ FAVORITES │ | -| │ │ | -| │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ | -| │ │ 🏦 │ │ 🏧 │ │ + │ │ | -| │ │ Main │ │ 24/7 │ │ Add │ │ | -| │ │ Branch │ │ ATM │ │ New │ │ | -| │ │ ─────── │ │ ─────── │ └──────────┘ │ | -| │ │ 🟢 Open │ │ 🟢 24/7 │ │ | -| │ └──────────┘ └──────────┘ │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| NEARBY (sorted by wait time) | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ │ │ | -| │ │ ┌────┐ │ │ | -| │ │ │ 🏦 │ Mifos Initiative - Main Branch > │ │ | -| │ │ │ │ 2401 4th Avenue, Seattle, WA 98121 │ │ | -| │ │ └────┘ │ │ | -| │ │ │ │ | -| │ │ 📍 0.3 mi 🟢 Open ⭐ 4.8 ⏱️ ~8 min wait │ │ | -| │ │ │ │ | -| │ │ ┌─────────────┐ ┌───────────┐ ┌──────────────┐ │ │ | -| │ │ │ 🧭 Directions│ │ 📅 Book │ │ 📞 Call │ │ │ | -| │ │ └─────────────┘ └───────────┘ └──────────────┘ │ │ | -| │ │ │ │ | -| │ │ ┌────────────────────────────────────────────────┐ │ │ | -| │ │ │ 👥👥░░░░░░░░ Low crowd • Best time to visit │ │ │ | -| │ │ └────────────────────────────────────────────────┘ │ │ | -| │ │ │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ │ │ | -| │ │ ┌────┐ │ │ | -| │ │ │ 🏧 │ Downtown Seattle ATM > │ │ | -| │ │ │ │ 1500 Westlake Ave, Seattle, WA 98101 │ │ | -| │ │ └────┘ │ │ | -| │ │ │ │ | -| │ │ 📍 0.5 mi 🟢 24/7 💳 Free ⚡ No wait │ │ | -| │ │ │ │ | -| │ │ ┌─────────────┐ ┌──────────────┐ │ │ | -| │ │ │ 🧭 Directions│ │ 💵 Withdraw │ │ │ | -| │ │ └─────────────┘ └──────────────┘ │ │ | -| │ │ │ │ | -| │ │ ┌────────────────────────────────────────────────┐ │ │ | -| │ │ │ 💰 $500 daily limit • Fee-free withdrawals │ │ │ | -| │ │ └────────────────────────────────────────────────┘ │ │ | -| │ │ │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -+------------------------------------------------------------------+ -``` - -**Smart Card Component Specification:** -``` -+------------------------------------------------------------------+ -| SMART LOCATION CARD v2.0 | -+------------------------------------------------------------------+ -| | -| Layout Structure: | -| | -| ┌────────────────────────────────────────────────────────────┐ | -| │ [Icon 48dp] [Name] ─────────────────────── [Chevron] │ | -| │ [Address] │ | -| │ │ | -| │ [Distance] [Status] [Rating] [Wait Time] │ | -| │ │ | -| │ [Action 1] [Action 2] [Action 3] │ | -| │ │ | -| │ [Smart Insight Bar] │ | -| └────────────────────────────────────────────────────────────┘ | -| | -| New Elements: | -| - Wait Time: AI-predicted with icon | -| - Crowd Level: Visual bar indicator | -| - Smart Insight: Contextual tip (best time, fees, etc.) | -| - Quick Book: Direct appointment booking | -| | -| Dimensions: | -| - Card Padding: 16dp | -| - Corner Radius: 16dp | -| - Icon Container: 48dp with gradient/teal background | -| - Action Button Height: 36dp | -| - Gap between cards: 12dp | -| | -| Smart Insight Bar: | -| - Height: 32dp | -| - Background: Surface variant (slightly darker) | -| - Corner Radius: 8dp | -| - Left icon: 16dp contextual icon | -| - Text: BodySmall (12sp) | -| | -+------------------------------------------------------------------+ -``` - ---- - -### 3. Branch Details Screen (Enhanced) - -Comprehensive branch information with appointment booking, wait times, and services grid. - -``` -+------------------------------------------------------------------+ -| 9:41 5G 📶 🔋 85% | -+------------------------------------------------------------------+ -| | -| <- Back Branch Details ♡ ↗️ Share | -| | -+------------------------------------------------------------------+ -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ MAP PREVIEW │ | -| │ │ | -| │ ╭─────╮ │ | -| │ │ B │ │ | -| │ ╰──┬──╯ │ | -| │ │ │ | -| │ │ | -| │ ┌───────────────────────────────────────────────────────┐ │ | -| │ │ 🔲 AR View │ 🛣️ Street View │ 🛰️ Satellite │ │ | -| │ └───────────────────────────────────────────────────────┘ │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌────┐ │ | -| │ │ 🏦 │ Mifos Initiative │ | -| │ │ │ Main Branch │ | -| │ └────┘ │ | -| │ │ | -| │ ⭐ 4.8 (127 reviews) 📍 0.3 mi away │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ ⏱️ WAIT TIME (Live) │ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ │ │ | -| │ │ Current Wait: ~8 minutes │ │ | -| │ │ │ │ | -| │ │ ████████████░░░░░░░░░░░░░░░░░░░░░░ Low │ │ | -| │ │ │ │ | -| │ │ 👥 3 people in queue │ │ | -| │ │ │ │ | -| │ │ ┌──────────────────────────────────────────────┐ │ │ | -| │ │ │ 📅 Book Appointment to Skip the Queue │ │ │ | -| │ │ └──────────────────────────────────────────────┘ │ │ | -| │ │ │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| │ BEST TIMES TO VISIT │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ Mo Tu We Th Fr Sa Su │ │ | -| │ │ █ █ █ █ █ ▄ ░ │ │ | -| │ │ █ █ █ █ █ ▄ ░ │ │ | -| │ │ ▄ ▄ ▄ ▄ █ ▄ ░ │ │ | -| │ │ ▄ ▄ ▄ ▄ ▄ ░ ░ │ │ | -| │ │ ░ ░ ░ ░ ░ ░ ░ │ │ | -| │ │ 9 10 11 12 1 2 3 │ │ | -| │ │ │ │ | -| │ │ 💡 Tip: Tuesday 10-11 AM has shortest wait │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ 📍 LOCATION │ | -| │ │ | -| │ 2401 4th Avenue, Suite 300 │ | -| │ Seattle, WA 98121, United States │ | -| │ │ | -| │ ┌─────────────────────┐ ┌─────────────────────┐ │ | -| │ │ 🧭 Get Directions │ │ 📋 Copy Address │ │ | -| │ └─────────────────────┘ └─────────────────────┘ │ | -| │ │ | -| │ 🚗 5 min drive │ 🚶 12 min walk │ 🚌 Bus 36, 40 │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ 🕐 OPENING HOURS │ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ 🟢 Open now • Closes at 5:00 PM │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| │ Monday 9:00 AM - 5:00 PM │ | -| │ Tuesday 9:00 AM - 5:00 PM ← Today │ | -| │ Wednesday 9:00 AM - 5:00 PM │ | -| │ Thursday 9:00 AM - 5:00 PM │ | -| │ Friday 9:00 AM - 4:00 PM │ | -| │ Saturday 10:00 AM - 2:00 PM │ | -| │ Sunday CLOSED │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ 📞 CONTACT │ | -| │ │ | -| │ 📱 +1 (206) 555-0123 │ | -| │ 📧 seattle@mifos.org │ | -| │ 🌐 www.mifos.org/seattle │ | -| │ │ | -| │ ┌─────────────────────┐ ┌─────────────────────┐ │ | -| │ │ 📞 Call Now │ │ 💬 Send Message │ │ | -| │ └─────────────────────┘ └─────────────────────┘ │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ 🏷️ AVAILABLE SERVICES │ | -| │ │ | -| │ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │ | -| │ │ 💰 │ │ 💳 │ │ 📄 │ │ 🔄 │ │ | -| │ │Deposits│ │Withdraw│ │ Loans │ │Transfer│ │ | -| │ └────────┘ └────────┘ └────────┘ └────────┘ │ | -| │ │ | -| │ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │ | -| │ │ 🌍 │ │ 💼 │ │ + │ │ 🛡️ │ │ | -| │ │Currency│ │Business│ │New Acc │ │Insuranc│ │ | -| │ └────────┘ └────────┘ └────────┘ └────────┘ │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ ♿ ACCESSIBILITY │ | -| │ │ | -| │ ✓ Wheelchair accessible entrance │ | -| │ ✓ Accessible parking available │ | -| │ ✓ Hearing loop system │ | -| │ ✓ Braille signage │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ 📸 PHOTOS & REVIEWS │ | -| │ │ | -| │ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │ | -| │ │ 📷 │ │ 📷 │ │ 📷 │ │ +4 │ │ | -| │ └──────┘ └──────┘ └──────┘ └──────┘ │ | -| │ │ | -| │ "Great service! Fast and friendly staff." │ | -| │ ★★★★★ John D. - 2 days ago │ | -| │ │ | -| │ See all 127 reviews → │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ 📅 Book Appointment │ │ | -| │ │ │ │ | -| │ │ Skip the queue │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -+------------------------------------------------------------------+ -``` - ---- - -### 4. AR Branch Finder Mode - -Augmented reality view for locating branches in the real world with directional overlay. - -``` -+------------------------------------------------------------------+ -| 9:41 5G 📶 🔋 85% | -+------------------------------------------------------------------+ -| | -| ✕ Close AR View | -| | -+------------------------------------------------------------------+ -| | -| ╔════════════════════════════════════════════════════════════╗ | -| ║ ║ | -| ║ CAMERA VIEWFINDER ║ | -| ║ ║ | -| ║ ║ | -| ║ ║ | -| ║ ┌─────────────────────────────────┐ ║ | -| ║ │ 🏦 Mifos Main Branch │ ║ | -| ║ │ ───────────────────────────── │ ║ | -| ║ │ 📍 0.3 mi ahead │ ║ | -| ║ │ 🟢 Open • ~8 min wait │ ║ | -| ║ │ │ ║ | -| ║ │ ┌─────────────────────────┐ │ ║ | -| ║ │ │ Navigate to Branch │ │ ║ | -| ║ │ └─────────────────────────┘ │ ║ | -| ║ └─────────────────────────────────┘ ║ | -| ║ │ ║ | -| ║ │ <- AR Pointer line ║ | -| ║ │ to real location ║ | -| ║ ▼ ║ | -| ║ ║ | -| ║ ║ | -| ║ ┌─────────────────┐ ║ | -| ║ │ 🏧 │ ║ | -| ║ │ ATM │ ║ | -| ║ │ 0.5 mi ← │ ║ | -| ║ └─────────────────┘ ║ | -| ║ ║ | -| ║ ║ | -| ╚════════════════════════════════════════════════════════════╝ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌──────────────────────────────┐ │ | -| │ │ ↑ │ │ | -| │ │ Walk 0.3 mi to reach │ │ | -| │ │ Mifos Main Branch │ │ | -| │ └──────────────────────────────┘ │ | -| │ │ | -| │ ┌─────────────────────────────────────────────────────────┐│ | -| │ │ ││ | -| │ │ 🗺️ Map View 🔲 AR View (Active) ││ | -| │ │ ────────── ││ | -| │ │ ││ | -| │ └─────────────────────────────────────────────────────────┘│ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -+------------------------------------------------------------------+ -``` - -**AR View Component Specification:** -``` -+------------------------------------------------------------------+ -| AR VIEW SPECIFICATIONS | -+------------------------------------------------------------------+ -| | -| AR Marker Bubble: | -| - Background: White/Dark with 85% opacity | -| - Corner Radius: 16dp | -| - Shadow: 8dp blur with black at 20% | -| - Pointer Line: 2dp dashed, primary color | -| - Size: Auto-adjusts based on distance (closer = larger) | -| | -| Information Displayed: | -| - Location type icon (24dp) | -| - Name: HeadlineSmall (16sp Bold) | -| - Distance: BodyMedium (14sp) | -| - Status: Open/Closed with color indicator | -| - Wait time (for branches) | -| - Navigate CTA button | -| | -| Distance Scaling: | -| - < 100m: 100% size, full details | -| - 100-500m: 75% size, name + distance | -| - > 500m: 50% size, icon + direction arrow | -| | -| Platform Requirements: | -| - ARCore (Android) / ARKit (iOS) | -| - Camera permission required | -| - Location permission required | -| - Gyroscope/accelerometer for orientation | -| | -+------------------------------------------------------------------+ -``` - ---- - -### 5. Appointment Booking Flow - -Three-step booking wizard for scheduling branch visits. - -``` -STEP 1: Select Service -+------------------------------------------------------------------+ -| 9:41 5G 📶 🔋 85% | -+------------------------------------------------------------------+ -| | -| <- Back Book Appointment | -| | -+------------------------------------------------------------------+ -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ Step 1 of 3 │ | -| │ ████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ 33% │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ 🏦 Mifos Initiative - Main Branch │ | -| │ 2401 4th Avenue, Seattle │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| SELECT SERVICE | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ │ │ | -| │ │ 💰 Account Opening ○ │ │ | -| │ │ Open new savings or checking account │ │ | -| │ │ ~30 minutes │ │ | -| │ │ │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ ██████████████████████████████████████████████████ │ │ | -| │ │ │ │ | -| │ │ 📄 Loan Consultation ◉ │ │ | -| │ │ Discuss loan options with advisor │ │ | -| │ │ ~45 minutes │ │ | -| │ │ │ │ | -| │ │ ██████████████████████████████████████████████████ │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ │ │ | -| │ │ 💳 Card Services ○ │ │ | -| │ │ Replace card, update PIN, card issues │ │ | -| │ │ ~15 minutes │ │ | -| │ │ │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ │ │ | -| │ │ 📋 General Inquiry ○ │ │ | -| │ │ Other banking questions or assistance │ │ | -| │ │ ~20 minutes │ │ | -| │ │ │ │ | -| │ └────────────────────────────────────────────────────────┘ │ │ -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ Continue to Select Time → │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -+------------------------------------------------------------------+ - - -STEP 2: Select Date & Time -+------------------------------------------------------------------+ -| 9:41 5G 📶 🔋 85% | -+------------------------------------------------------------------+ -| | -| <- Back Book Appointment | -| | -+------------------------------------------------------------------+ -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ Step 2 of 3 │ | -| │ ████████████████████████░░░░░░░░░░░░░░░░░░░░░░ 66% │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| 📄 Loan Consultation • ~45 minutes | -| | -| SELECT DATE | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ < December 2025 > │ | -| │ │ | -| │ Mo Tu We Th Fr Sa Su │ | -| │ │ | -| │ 1 2 3 4 5 6 7 │ | -| │ 8 9 10 11 12 13 14 │ | -| │ 15 16 17 18 19 20 21 │ | -| │ 22 23 24 25 26 27 28 │ | -| │ 29 [30] 31 │ | -| │ ^^ │ | -| │ Selected │ | -| │ │ | -| │ Greyed dates = unavailable (closed/fully booked) │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| SELECT TIME | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ Morning │ | -| │ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ | -| │ │ 9:00 AM │ │ 9:30 AM │ │10:00 AM │ │10:30 AM │ │ | -| │ │ ████ │ │ │ │ ████ │ │ │ │ | -| │ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │ | -| │ ✓ │ | -| │ │ | -| │ Afternoon │ | -| │ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ | -| │ │ 1:00 PM │ │ 1:30 PM │ │ 2:00 PM │ │ 2:30 PM │ │ | -| │ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │ | -| │ │ | -| │ ████ = High demand (few slots left) │ | -| │ Empty = Good availability │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ Continue to Confirm → │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -+------------------------------------------------------------------+ - - -STEP 3: Confirmation -+------------------------------------------------------------------+ -| 9:41 5G 📶 🔋 85% | -+------------------------------------------------------------------+ -| | -| <- Back Book Appointment | -| | -+------------------------------------------------------------------+ -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ Step 3 of 3 │ | -| │ ████████████████████████████████████████████████ 100% │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| CONFIRM APPOINTMENT | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ ██████████████████████████████████████████████████ │ │ | -| │ │ ██ ██ │ │ | -| │ │ ██ 📅 Your Appointment ██ │ │ | -| │ │ ██ ██ │ │ | -| │ │ ██ ┌──────────────────────────────────────────┐ ██ │ │ | -| │ │ ██ │ │ ██ │ │ | -| │ │ ██ │ 📄 Loan Consultation │ ██ │ │ | -| │ │ ██ │ │ ██ │ │ | -| │ │ ██ │ 📆 Tuesday, December 30, 2025 │ ██ │ │ | -| │ │ ██ │ 🕘 9:00 AM - 9:45 AM │ ██ │ │ | -| │ │ ██ │ │ ██ │ │ | -| │ │ ██ │ 🏦 Mifos Initiative - Main Branch │ ██ │ │ | -| │ │ ██ │ 📍 2401 4th Avenue, Seattle │ ██ │ │ | -| │ │ ██ │ │ ██ │ │ | -| │ │ ██ └──────────────────────────────────────────┘ ██ │ │ | -| │ │ ██ ██ │ │ | -| │ │ ██████████████████████████████████████████████████ │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ REMINDERS │ | -| │ │ | -| │ ☑️ Email confirmation │ | -| │ ☑️ SMS reminder (1 day before) │ | -| │ ☑️ Push notification (1 hour before) │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ WHAT TO BRING │ | -| │ │ | -| │ • Government-issued ID │ | -| │ • Recent pay stubs or income proof │ | -| │ • Bank statements (last 3 months) │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ✓ Confirm Appointment │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -+------------------------------------------------------------------+ -``` - ---- - -### 6. Appointment Confirmed Success - -Celebration screen with calendar integration and next steps. - -``` -+------------------------------------------------------------------+ -| 9:41 5G 📶 🔋 85% | -+------------------------------------------------------------------+ -| | -| ✕ Close | -| | -+------------------------------------------------------------------+ -| | -| | -| | -| | -| ┌──────────────────────┐ | -| │ │ | -| │ ✓ │ | -| │ │ | -| │ Appointment │ | -| │ Confirmed! │ | -| │ │ | -| └──────────────────────┘ | -| (Confetti animation) | -| | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ │ │ | -| │ │ 📄 Loan Consultation │ │ | -| │ │ 📆 Tue, Dec 30, 2025 at 9:00 AM │ │ | -| │ │ 🏦 Mifos Initiative - Main Branch │ │ | -| │ │ │ │ | -| │ │ Confirmation #: APT-2025-1230-001 │ │ | -| │ │ │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌─────────────────────┐ ┌─────────────────────┐ │ | -| │ │ 📅 Add to Calendar │ │ ↗️ Share Details │ │ | -| │ └─────────────────────┘ └─────────────────────┘ │ | -| │ │ | -| │ ┌─────────────────────┐ ┌─────────────────────┐ │ | -| │ │ 🧭 Get Directions │ │ ❌ Cancel Booking │ │ | -| │ └─────────────────────┘ └─────────────────────┘ │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ 🎁 BONUS │ | -| │ │ | -| │ You've unlocked +10 reward points for booking ahead! │ | -| │ ██████████████████████████████ 50/100 pts │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ Done │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -+------------------------------------------------------------------+ -``` - ---- - -### 7. Voice Search Mode - -Hands-free location search with voice input. - -``` -+------------------------------------------------------------------+ -| 9:41 5G 📶 🔋 85% | -+------------------------------------------------------------------+ -| | -| ✕ Close | -| | -+------------------------------------------------------------------+ -| | -| | -| | -| | -| | -| | -| | -| ┌──────────────────────┐ | -| │ │ | -| │ 🎤 │ | -| │ │ | -| │ ○ ○ ○ ○ ○ ○ ○ ○ │ <- Sound waves | -| │ │ | -| │ Listening... │ | -| │ │ | -| └──────────────────────┘ | -| | -| | -| "Find me the nearest ATM" | -| (Real-time transcript) | -| | -| | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ TRY SAYING │ | -| │ │ | -| │ "Nearest branch open now" │ | -| │ "ATM with no fees" │ | -| │ "Branch with shortest wait" │ | -| │ "Open on Sunday" │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ⌨️ Type instead │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -+------------------------------------------------------------------+ -``` - ---- - -### 8. Branch Check-In & Gamification - -Check-in at branches to earn rewards and badges. - -``` -+------------------------------------------------------------------+ -| 9:41 5G 📶 🔋 85% | -+------------------------------------------------------------------+ -| | -| <- Back My Branch Activity | -| | -+------------------------------------------------------------------+ -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ ██████████████████████████████████████████████████ │ │ | -| │ │ ██ ██ │ │ | -| │ │ ██ 🏆 Your Branch Journey ██ │ │ | -| │ │ ██ ██ │ │ | -| │ │ ██ 📍 12 Branches Visited ██ │ │ | -| │ │ ██ ⭐ 150 Reward Points ██ │ │ | -| │ │ ██ 🔥 3-Visit Streak ██ │ │ | -| │ │ ██ ██ │ │ | -| │ │ ██████████████████████████████████████████████████ │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ 🎖️ BADGES EARNED │ | -| │ │ | -| │ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │ | -| │ │ 🥇 │ │ 🌍 │ │ 📅 │ │ 🔒 │ │ | -| │ │ First │ │Explorer│ │ Early │ │ ??? │ │ | -| │ │ Visit │ │ 10+ │ │ Bird │ │ │ │ | -| │ └────────┘ └────────┘ └────────┘ └────────┘ │ | -| │ Unlocked Unlocked Unlocked Locked │ | -| │ │ | -| │ See all badges → │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ 📍 CHECK IN NOW │ | -| │ │ | -| │ You're near Mifos Main Branch! │ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ │ │ | -| │ │ 📍 Check In to Earn +15 Points │ │ | -| │ │ │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| VISIT HISTORY | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ Today │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ 🏦 Mifos Main Branch +15 pts │ │ | -| │ │ Checked in at 10:30 AM │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| │ Yesterday │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ 🏧 Downtown ATM +5 pts │ │ | -| │ │ Withdrawal at 3:45 PM │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| │ December 28 │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ 🏦 Capitol Hill Branch +15 pts │ │ | -| │ │ Loan consultation │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -+------------------------------------------------------------------+ -``` - ---- - -### 9. Filter & Sort Bottom Sheet - -Advanced filtering with smart presets. - -``` -+------------------------------------------------------------------+ -| | -| (Dimmed Map Background) | -| | -+------------------------------------------------------------------+ -| ──── | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ Filter Locations ✕ Close │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ ⚡ SMART PRESETS │ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ 🟢 Open Now │ │ | -| │ │ ⏱️ Shortest Wait │ │ | -| │ │ 📍 Nearest to Me │ │ | -| │ │ 💳 Fee-Free ATMs │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ 📍 LOCATION TYPE │ | -| │ │ | -| │ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │ | -| │ │ ☑️ │ │ ☑️ │ │ ☐ │ │ ☐ │ │ | -| │ │ Branch │ │ ATM │ │ Agent │ │ HQ │ │ | -| │ └────────┘ └────────┘ └────────┘ └────────┘ │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ 📏 DISTANCE │ | -| │ │ | -| │ ○ 0.5 mi ● 1 mi ○ 5 mi ○ 10 mi ○ Any │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ 🕐 OPENING HOURS │ | -| │ │ | -| │ ● Open Now ○ Open Today ○ 24/7 Only ○ Any │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ 🏷️ SERVICES │ | -| │ │ | -| │ ☐ Cash Deposits ☑️ Loan Services │ | -| │ ☐ Currency Exchange ☐ Business Banking │ | -| │ ☐ Account Opening ☐ Card Services │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ ♿ ACCESSIBILITY │ | -| │ │ | -| │ ☐ Wheelchair Accessible ☐ Hearing Loop │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌─────────────────────┐ ┌─────────────────────────────────────┐| -| │ Reset Filters │ │ Apply (8 results) ││ -| └─────────────────────┘ └─────────────────────────────────────┘| -| | -+------------------------------------------------------------------+ -``` - ---- - -### 10. Location Permission Request - -Enhanced permission request with clear value proposition. - -``` -+------------------------------------------------------------------+ -| | -| (Dimmed Background) | -| | -+------------------------------------------------------------------+ -| ──── | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ │ | -| │ ┌──────────────────┐ │ | -| │ │ │ │ | -| │ │ 📍 │ │ | -| │ │ │ │ | -| │ └──────────────────┘ │ | -| │ (Gradient circle bg) │ | -| │ │ | -| │ Enable Location Services │ | -| │ │ | -| │ Find branches, ATMs, and agents near you. │ | -| │ We only use your location to show nearby │ | -| │ locations and calculate distances. │ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ │ │ | -| │ │ ✓ Find nearest branches instantly │ │ | -| │ │ ✓ Get walking/driving directions │ │ | -| │ │ ✓ See real-time wait times │ │ | -| │ │ ✓ Use AR mode to navigate │ │ | -| │ │ │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ │ │ | -| │ │ 📍 Enable Location │ │ | -| │ │ │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ │ │ | -| │ │ Enter Location Manually │ │ | -| │ │ │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| │ Maybe Later │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -+------------------------------------------------------------------+ -``` - ---- - -### 11. No Results / Empty State - -Empty state with helpful suggestions. - -``` -+------------------------------------------------------------------+ -| 9:41 5G 📶 🔋 85% | -+------------------------------------------------------------------+ -| | -| <- Back Branch Finder | -| | -+------------------------------------------------------------------+ -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ 🔍 "Rural Montana" │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| | -| | -| | -| | -| ┌──────────────────────┐ | -| │ │ | -| │ 🗺️ │ | -| │ │ | -| │ No Locations │ | -| │ Found │ | -| │ │ | -| └──────────────────────┘ | -| | -| | -| We couldn't find any branches or ATMs | -| in this area. Try these options: | -| | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ 📍 Expand Search to 50 miles │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ 🔍 Search Different Location │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ ⚙️ Clear All Filters │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ 💡 Tip: You can still use our app features anywhere! │ | -| │ Mobile deposit, transfers, and support are always │ | -| │ available. │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -+------------------------------------------------------------------+ -``` - ---- - -### 12. Loading State - -Skeleton loading with animated placeholders. - -``` -+------------------------------------------------------------------+ -| 9:41 5G 📶 🔋 85% | -+------------------------------------------------------------------+ -| | -| <- Back Finding Nearby... | -| | -+------------------------------------------------------------------+ -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ 🔍 ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ MAP LOADING │ | -| │ │ | -| │ ◉ ← Pulsing location dot │ | -| │ ○ │ | -| │ ○ │ | -| │ │ | -| │ ┌───┐ ┌───┐ ┌───┐ │ | -| │ │░░░│ │░░░│ │░░░│ │ | -| │ └───┘ └───┘ └───┘ │ | -| │ ↑ Shimmer placeholders for markers │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌────┐ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ | -| │ │░░░░│ ░░░░░░░░░░░░░░░░░░░░░░░░ │ | -| │ └────┘ │ | -| │ ░░░░░░ ░░░░░░░░░ ░░░░░░░ │ | -| │ │ | -| │ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌────┐ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ | -| │ │░░░░│ ░░░░░░░░░░░░░░░░░░░░░░░░ │ | -| │ └────┘ │ | -| │ ░░░░░░ ░░░░░░░░░ ░░░░░░░ │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -+------------------------------------------------------------------+ -``` - ---- - -## Component Specifications - -### Map Marker System - -``` -+------------------------------------------------------------------+ -| MAP MARKER DESIGN SYSTEM v2.0 | -+------------------------------------------------------------------+ -| | -| Base Marker Structure: | -| | -| ╭────────╮ | -| │ │ Width: 40dp | -| │ Icon │ Height: 48dp (including pointer) | -| │ │ Corner Radius: 12dp (top) | -| ╰───┬────╯ Pointer: 8dp triangle | -| │ Shadow: 8dp blur with color glow | -| ▼ | -| | -| Type Variants: | -| | -| BRANCH ATM AGENT FAVORITE | -| ╭───────╮ ╭───────╮ ╭───────╮ ╭───────╮ | -| │ 🏦 │ │ 🏧 │ │ 👤 │ │ ⭐ │ | -| ╰───┬───╯ ╰───┬───╯ ╰───┬───╯ ╰───┬───╯ | -| │ │ │ │ | -| ▼ ▼ ▼ ▼ | -| Gradient Teal Coral Gold | -| #667EEA-> #11998E #FC466B #FFB800 | -| #764BA2 | -| | -| States: | -| - Default: As shown | -| - Selected: Scale 1.15x, elevation 8dp, info bubble | -| - Loading: Pulse animation | -| - Favorited: Gold star overlay | -| | -| Info Bubble (on selection): | -| ╭────────────────────────────────────╮ | -| │ Name Open │ Height: 64dp | -| │ 0.3 mi • ~8 min wait │ Corner: 12dp | -| ╰────────────────────────────────────╯ Shadow: 4dp | -| | -| Cluster Marker: | -| ╭───────╮ | -| │ 12 │ Scale: 36-56dp based on count | -| ╰───────╯ Background: Primary gradient | -| │ Text: White, ExtraBold | -| ▼ Tap: Zoom to reveal individual markers | -| | -+------------------------------------------------------------------+ -``` - -### Search Bar Component - -``` -+------------------------------------------------------------------+ -| SMART SEARCH BAR v2.0 | -+------------------------------------------------------------------+ -| | -| Default State: | -| ┌────────────────────────────────────────────────────────────┐ | -| │ 🔍 Search locations, branches, ATMs... 🎤 │ | -| └────────────────────────────────────────────────────────────┘ | -| Height: 52dp | -| Corner Radius: 16dp | -| Background: Surface elevated | -| Shadow: 4dp | -| | -| Focused State: | -| ┌────────────────────────────────────────────────────────────┐ | -| │ ← downtown seattle_ ✕ 🎤 │ | -| └────────────────────────────────────────────────────────────┘ | -| Border: 2dp primary color | -| Back arrow replaces search icon | -| Clear button appears | -| | -| Voice Active State: | -| ┌────────────────────────────────────────────────────────────┐ | -| │ 🎤 ○○○○○○○○ Listening... ✕ │ | -| └────────────────────────────────────────────────────────────┘ | -| Animated sound wave visualization | -| Primary gradient border pulse | -| | -+------------------------------------------------------------------+ -``` - -### Wait Time Indicator - -``` -+------------------------------------------------------------------+ -| WAIT TIME COMPONENT | -+------------------------------------------------------------------+ -| | -| Visual Representation: | -| | -| Low (0-10 min): | -| ████████████░░░░░░░░░░░░░░░░░░ 🟢 ~8 min • Best time | -| Color: #00D09C (Success) | -| | -| Medium (10-20 min): | -| ████████████████████░░░░░░░░░░ 🟡 ~15 min • Moderate | -| Color: #FFB800 (Warning) | -| | -| High (20+ min): | -| ██████████████████████████████ 🔴 ~25 min • Busy | -| Color: #FF4757 (Error) | -| | -| Closed: | -| ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ ⚫ Closed | -| Color: #9CA3AF (Disabled) | -| | -| Data Source: | -| - AI prediction based on historical patterns | -| - Real-time queue data (if available) | -| - Day of week / time of day analysis | -| - Special event adjustments | -| | -+------------------------------------------------------------------+ -``` - ---- - -## 2025 Enhancement Features - -### Smart Recommendations Engine - -``` -+------------------------------------------------------------------+ -| AI RECOMMENDATION LOGIC | -+------------------------------------------------------------------+ -| | -| Input Factors: | -| 1. Current user location (GPS) | -| 2. Time of day / day of week | -| 3. Historical wait time data | -| 4. User's preferred services (from history) | -| 5. Traffic / transit conditions | -| 6. Branch capacity and current queue | -| 7. User's time constraints (if known) | -| | -| Output: | -| - Top 1 recommended location with reason | -| - Smart-sorted list (not just distance) | -| - Personalized service suggestions | -| | -| Recommendation Reasons: | -| - "Shortest wait right now" | -| - "Closest location open late" | -| - "Best for loan services" | -| - "Your usual branch" | -| - "Highest rated nearby" | -| | -+------------------------------------------------------------------+ -``` - -### Gamification System - -``` -+------------------------------------------------------------------+ -| BRANCH VISIT GAMIFICATION | -+------------------------------------------------------------------+ -| | -| Point System: | -| - Branch check-in: +15 pts | -| - ATM transaction: +5 pts | -| - Appointment kept: +20 pts | -| - Review left: +10 pts | -| - First visit to new branch: +25 pts | -| | -| Badges: | -| 🥇 First Visit - Complete first branch visit | -| 🌍 Explorer - Visit 10 different branches | -| 📅 Early Bird - Visit before 10 AM | -| 🦉 Night Owl - Use ATM after 8 PM | -| 🔥 On Fire - 5-visit streak in one month | -| ⭐ VIP - Earn 500 total points | -| 📝 Reviewer - Leave 5 branch reviews | -| | -| Rewards: | -| - 100 pts: Unlock exclusive app themes | -| - 250 pts: Priority appointment booking | -| - 500 pts: Fee waiver coupon | -| - 1000 pts: Premium support access | -| | -+------------------------------------------------------------------+ -``` - ---- - -## Interactions & Animations - -### Animation Specifications - -``` -+------------------------------------------------------------------+ -| LOCATION FEATURE ANIMATIONS v2.0 | -+------------------------------------------------------------------+ -| | -| 1. Map Marker Drop | -| ─────────────────────────────────────────────────────────────── | -| Trigger: Markers load on map | -| Animation: Drop from 30dp above with bounce | -| Duration: 400ms per marker, 60ms stagger | -| Easing: Spring (dampingRatio=0.6, stiffness=400) | -| Shadow: Grows as marker lands | -| | -| 2. AI Recommendation Reveal | -| ─────────────────────────────────────────────────────────────── | -| Trigger: Location determined / search complete | -| Animation: | -| - Card slides up from bottom (translateY -100% -> 0) | -| - Sparkle icon shimmers | -| - Gradient border pulses once | -| Duration: 500ms | -| Easing: Spring (dampingRatio=0.7, stiffness=300) | -| | -| 3. Near Me Location Pulse | -| ─────────────────────────────────────────────────────────────── | -| Trigger: Tap "Near Me" button | -| Animation: | -| - Button scale 0.95 -> 1.0 | -| - Location icon rotates 360deg | -| - Ripple expands from user location on map | -| - Camera zooms to current location | -| Duration: 800ms | -| | -| 4. AR Marker Float | -| ─────────────────────────────────────────────────────────────── | -| Trigger: AR mode active | -| Animation: Gentle float up/down (4dp amplitude) | -| Duration: 2000ms, infinite loop | -| Easing: Sine (smooth oscillation) | -| | -| 5. Wait Time Progress | -| ─────────────────────────────────────────────────────────────── | -| Trigger: Wait time data loads | -| Animation: Progress bar fills from left | -| Duration: 600ms | -| Easing: Decelerate | -| | -| 6. Check-In Success | -| ─────────────────────────────────────────────────────────────── | -| Trigger: Successful branch check-in | -| Animation: | -| - Location pin bounces | -| - +Points text floats up and fades | -| - Badge unlock animation (if earned) | -| - Haptic success feedback | -| Duration: 1000ms | -| | -| 7. Appointment Booking Progress | -| ─────────────────────────────────────────────────────────────── | -| Trigger: Step transitions | -| Animation: | -| - Progress bar animates to next position | -| - Current step content slides out left | -| - Next step content slides in from right | -| Duration: 300ms | -| Easing: Standard | -| | -| 8. Skeleton Shimmer | -| ─────────────────────────────────────────────────────────────── | -| Trigger: Loading state | -| Animation: Gradient sweep left to right | -| Duration: 1200ms, infinite loop | -| Gradient: Surface -> Highlight -> Surface | -| | -| 9. View Toggle (Map <-> List) | -| ─────────────────────────────────────────────────────────────── | -| Trigger: Toggle button tap | -| Animation: Crossfade with shared element transition | -| Duration: 350ms | -| Easing: Fast out, slow in | -| | -| 10. Voice Search Waves | -| ─────────────────────────────────────────────────────────────── | -| Trigger: Voice input active | -| Animation: Sound wave visualization responds to audio | -| Duration: Real-time | -| Mic button pulses with primary gradient | -| | -+------------------------------------------------------------------+ -``` - ---- - -## Accessibility - -``` -+------------------------------------------------------------------+ -| ACCESSIBILITY SPECIFICATIONS | -+------------------------------------------------------------------+ -| | -| Screen Reader Announcements: | -| ─────────────────────────────────────────────────────────────── | -| | -| Map View: | -| - "Branch finder map showing 12 locations" | -| - "AI recommends Mifos Main Branch, 0.3 miles, | -| approximately 8 minute wait, double tap for details" | -| - "Zoom in button" / "Zoom out button" | -| - "Near me button, centers map on your location" | -| - "AR view button, opens augmented reality camera" | -| | -| Branch Card: | -| - "Mifos Initiative Main Branch, 2401 4th Avenue Seattle, | -| 0.3 miles away, currently open until 5 PM, | -| rated 4.8 stars, approximately 8 minute wait, | -| low crowd level. Actions available: get directions, | -| book appointment, call" | -| | -| Appointment Booking: | -| - "Book appointment, step 1 of 3, select service" | -| - "Loan consultation selected, 45 minute appointment" | -| - "Available time slot, 9 AM, Tuesday December 30" | -| | -| Touch Targets: | -| ─────────────────────────────────────────────────────────────── | -| - Map markers: 48dp minimum hit area | -| - Filter chips: 48dp height | -| - Action buttons: 48dp x 48dp minimum | -| - List items: 72dp minimum height | -| - Time slots: 48dp x 48dp | -| | -| Color Contrast: | -| ─────────────────────────────────────────────────────────────── | -| - All text: WCAG AA minimum (4.5:1 normal, 3:1 large) | -| - Status indicators: Color + icon + text redundancy | -| - "Open" = Green + checkmark + "Open" text | -| - "Closed" = Gray + X icon + "Closed" text | -| - Wait levels: Color + bar length + time text | -| | -| Alternative Interactions: | -| ─────────────────────────────────────────────────────────────── | -| - Voice search for hands-free | -| - Keyboard navigation for desktop | -| - Switch access compatibility | -| - TalkBack/VoiceOver full support | -| | -| Motion Preferences: | -| ─────────────────────────────────────────────────────────────── | -| - Respect "Reduce Motion" setting | -| - Disable: Map marker animations, AR float, shimmer | -| - Keep: Button press feedback, essential transitions | -| | -+------------------------------------------------------------------+ -``` - ---- - -## Dark Mode - -### Map View Dark Mode - -``` -+------------------------------------------------------------------+ -| 9:41 5G 📶 🔋 85% | -+------------------------------------------------------------------+ -| Background: #0D1117 | -+------------------------------------------------------------------+ -| | -| <- Back Find Nearby 🎤 ⚙️ | -| #F0F6FC #8B949E | -| | -+------------------------------------------------------------------+ -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ 🔍 Search locations... 🎤 │ | -| │ Background: #1A1F2E | Border: #30363D │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ | -| │ All │ │ ATM │ │ Branch │ │ Agent │ | -| │Gradient│ │#21262D │ │#21262D │ │#21262D │ | -| └────────┘ └────────┘ └────────┘ └────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ ✨ AI RECOMMENDATION Background: #1A1F2E │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ 🏦 Mifos Main Branch │ │ | -| │ │ #F0F6FC (text) │ │ | -| │ │ 📍 0.3 mi • 🟢 Open • ⏱️ ~8 min wait │ │ | -| │ │ #8B949E (secondary) #00D09C │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -| ┌──────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ DARK MODE MAP │ | -| │ (Mapbox Dark / Google Night) │ | -| │ │ | -| │ Roads: #30363D │ | -| │ Land: #0D1117 │ | -| │ Water: #161B22 │ | -| │ Buildings: #1A1F2E │ | -| │ │ | -| │ ╭───╮ │ | -| │ │ B │ <- Markers remain vibrant │ | -| │ ╰───╯ Gradient preserved │ | -| │ │ | -| │ ◉ You │ | -| │ ○ (pulse glow: #667EEA at 30%) │ | -| │ │ | -| └──────────────────────────────────────────────────────────────┘ | -| | -+------------------------------------------------------------------+ -``` - -### Color Mapping - -``` -+------------------------------------------------------------------+ -| DARK MODE COLOR MAPPING | -+------------------------------------------------------------------+ -| | -| Backgrounds: | -| - Screen: #F8F9FA -> #0D1117 | -| - Surface: #FFFFFF -> #1A1F2E | -| - Card: #FFFFFF -> #21262D | -| - Elevated: #F3F4F6 -> #2D333B | -| | -| Text: | -| - Primary: #1F2937 -> #F0F6FC | -| - Secondary: #6B7280 -> #8B949E | -| - Tertiary: #9CA3AF -> #6E7681 | -| | -| Borders: | -| - Default: #E5E7EB -> #30363D | -| - Focus: #667EEA -> #667EEA (preserved) | -| | -| Semantic Colors (Preserved): | -| - Success: #00D09C -> #00D09C | -| - Warning: #FFB800 -> #FFB800 | -| - Error: #FF4757 -> #FF4757 | -| | -| Gradients (Preserved with slight glow): | -| - Primary: #667EEA -> #764BA2 | -| - Teal: #11998E -> #38EF7D | -| - Coral: #FC466B -> #3F5EFB | -| - Gold: #F5AF19 -> #F12711 | -| | -+------------------------------------------------------------------+ -``` - ---- - -## Implementation Notes - -### State Management - -```kotlin -// Location Screen State -data class LocationScreenState( - val currentMode: LocationMode = LocationMode.MAP, - val searchQuery: String = "", - val isSearching: Boolean = false, - val isVoiceSearchActive: Boolean = false, - val selectedFilter: LocationType? = null, - val selectedLocation: LocationItem? = null, - val userLocation: LatLng? = null, - val locations: List = emptyList(), - val aiRecommendation: LocationItem? = null, - val recommendationReason: String = "", - val favorites: List = emptyList(), - val isLocationPermissionGranted: Boolean = false, - val isArModeActive: Boolean = false, - val filterState: LocationFilterState = LocationFilterState(), - val gamificationState: GamificationState = GamificationState(), - val isLoading: Boolean = false, - val error: String? = null -) - -enum class LocationMode { MAP, LIST, AR } - -enum class LocationType { ALL, BRANCH, ATM, AGENT } - -data class LocationItem( - val id: String, - val name: String, - val type: LocationType, - val address: String, - val coordinates: LatLng, - val distance: Double, - val distanceText: String, - val walkingTime: String?, - val drivingTime: String?, - val isOpen: Boolean, - val openingHours: List, - val closesAt: String?, - val waitTime: WaitTime?, - val crowdLevel: CrowdLevel, - val rating: Double?, - val reviewCount: Int, - val phone: String?, - val email: String?, - val services: List, - val accessibility: List, - val isFavorite: Boolean = false -) - -data class WaitTime( - val minutes: Int, - val level: WaitLevel, - val queueSize: Int?, - val confidence: Float // 0.0-1.0 -) - -enum class WaitLevel { LOW, MEDIUM, HIGH, CLOSED } - -enum class CrowdLevel { LOW, MODERATE, BUSY, VERY_BUSY } - -// Appointment Booking State -data class AppointmentBookingState( - val step: BookingStep = BookingStep.SELECT_SERVICE, - val selectedLocation: LocationItem? = null, - val selectedService: BranchService? = null, - val selectedDate: LocalDate? = null, - val selectedTime: LocalTime? = null, - val availableSlots: List = emptyList(), - val reminderPreferences: ReminderPreferences = ReminderPreferences(), - val confirmationNumber: String? = null, - val isLoading: Boolean = false -) - -enum class BookingStep { SELECT_SERVICE, SELECT_TIME, CONFIRM } - -// Gamification State -data class GamificationState( - val totalPoints: Int = 0, - val currentStreak: Int = 0, - val branchesVisited: Int = 0, - val badges: List = emptyList(), - val visitHistory: List = emptyList(), - val canCheckIn: Boolean = false, - val nearbyCheckInLocation: LocationItem? = null -) - -data class Badge( - val id: String, - val name: String, - val description: String, - val icon: String, - val isUnlocked: Boolean, - val unlockedAt: Instant? -) -``` - -### Key Composables - -```kotlin -@Composable -fun LocationScreen( - state: LocationScreenState, - onSearchQueryChange: (String) -> Unit, - onFilterSelect: (LocationType) -> Unit, - onLocationSelect: (LocationItem) -> Unit, - onNearMeTap: () -> Unit, - onArModeTap: () -> Unit, - onVoiceSearchTap: () -> Unit, - onBookAppointment: (LocationItem) -> Unit, - onGetDirections: (LocationItem) -> Unit, - onToggleFavorite: (LocationItem) -> Unit, - onCheckIn: (LocationItem) -> Unit, - modifier: Modifier = Modifier -) - -@Composable -fun SmartLocationMap( - locations: List, - selectedLocation: LocationItem?, - userLocation: LatLng?, - aiRecommendation: LocationItem?, - onLocationSelect: (LocationItem) -> Unit, - onNearMeTap: () -> Unit, - onArModeTap: () -> Unit, - modifier: Modifier = Modifier -) - -@Composable -fun AiRecommendationCard( - location: LocationItem, - reason: String, - onClick: () -> Unit, - modifier: Modifier = Modifier -) - -@Composable -fun SmartLocationCard( - location: LocationItem, - onSelect: () -> Unit, - onDirections: () -> Unit, - onBook: () -> Unit, - onCall: () -> Unit, - modifier: Modifier = Modifier -) - -@Composable -fun WaitTimeIndicator( - waitTime: WaitTime, - modifier: Modifier = Modifier -) - -@Composable -fun CrowdLevelBar( - level: CrowdLevel, - modifier: Modifier = Modifier -) - -@Composable -fun ArBranchFinder( - locations: List, - onLocationSelect: (LocationItem) -> Unit, - onClose: () -> Unit, - modifier: Modifier = Modifier -) - -@Composable -fun AppointmentBookingFlow( - state: AppointmentBookingState, - onServiceSelect: (BranchService) -> Unit, - onDateSelect: (LocalDate) -> Unit, - onTimeSelect: (LocalTime) -> Unit, - onConfirm: () -> Unit, - onBack: () -> Unit, - modifier: Modifier = Modifier -) - -@Composable -fun VoiceSearchOverlay( - isActive: Boolean, - transcript: String, - suggestions: List, - onClose: () -> Unit, - onTypeInstead: () -> Unit, - modifier: Modifier = Modifier -) - -@Composable -fun BranchGamificationScreen( - state: GamificationState, - onCheckIn: () -> Unit, - onViewBadges: () -> Unit, - modifier: Modifier = Modifier -) - -@Composable -fun LocationFilterSheet( - state: LocationFilterState, - onFilterChange: (LocationFilterState) -> Unit, - onApply: () -> Unit, - onReset: () -> Unit, - onDismiss: () -> Unit -) -``` - -### Platform-Specific Implementations - -``` -+------------------------------------------------------------------+ -| PLATFORM-SPECIFIC MAP IMPLEMENTATIONS | -+------------------------------------------------------------------+ -| | -| Android: | -| - Maps: Google Maps SDK + Compose wrapper | -| - AR: ARCore with custom marker rendering | -| - Location: Fused Location Provider | -| - Directions: Google Maps Intent | -| | -| iOS: | -| - Maps: MapKit with SwiftUI/UIKit bridge | -| - AR: ARKit with custom overlays | -| - Location: Core Location | -| - Directions: Apple Maps URL scheme | -| | -| Desktop: | -| - Maps: Leaflet.js in embedded WebView | -| - AR: Not supported (graceful fallback) | -| - Location: IP-based or manual entry | -| - Directions: Open browser to maps.google.com | -| | -| Web: | -| - Maps: Mapbox GL JS or Leaflet.js | -| - AR: WebXR API (limited support) | -| - Location: Geolocation API | -| - Directions: Google Maps embed or link | -| | -| Shared (expect/actual): | -| - LocationPermissionHandler | -| - DirectionsLauncher | -| - PhoneDialer | -| - CalendarIntegration | -| - SpeechRecognizer | -| | -+------------------------------------------------------------------+ -``` - ---- - -## Changelog - -| Date | Version | Changes | -|------|---------|---------| -| 2025-12-30 | 1.0 | Initial mockup with basic map and list views | -| 2025-12-30 | 2.0 | Complete redesign with 2025 fintech patterns: AI recommendations, AR mode, wait times, appointment booking, voice search, gamification, enhanced UI | - ---- - -## Data Binding Reference - -> **For `/implement` command**: Maps UI components to API.md sections. -> **Source of Truth**: See `API.md` for complete endpoint details. - -### Screen → API.md Mapping - -| Screen | API.md Section | Key Fields | -|--------|----------------|------------| -| Branch List | `Static Data` (offices embedded) | Office name, address, coordinates | -| Branch Detail | `Static Data` | Full office info | -| Map Display | `Map Display Logic` | Platform-specific implementation | - -### Client-Only Features - -| Feature | Storage | Notes | -|---------|---------|-------| -| User Location | Platform Location API | See `API.md → External Service Dependencies` | -| Distance Calculation | Client-side | Haversine formula | -| Map Display | Platform SDK | See `API.md → Map Display Logic` | -| Favorites | DataStore | Local storage | -| AR Mode | Platform SDK | Client-only | - -### Actions → API.md Mapping - -| User Action | API.md Reference | Navigation | -|-------------|------------------|------------| -| Load Branches | `Static Data` | Display list/map | -| Get Directions | Platform Maps Intent | External navigation | -| Call Branch | Platform Phone Intent | External dialer | -| Save Favorite | DataStore | Local storage | - -### API Limitations - -See `API.md → Notes` - Location feature has limited Fineract API support: -- Basic office data only -- Most features are client-side (map, distance, directions) -- Wait times, appointments not available diff --git a/claude-product-cycle/design-spec-layer/features/location/SPEC.md b/claude-product-cycle/design-spec-layer/features/location/SPEC.md deleted file mode 100644 index 6d9b0b447..000000000 --- a/claude-product-cycle/design-spec-layer/features/location/SPEC.md +++ /dev/null @@ -1,154 +0,0 @@ -# Location - Feature Specification - -> **Purpose**: Display Mifos Initiative headquarters location with interactive map -> **User Value**: Helps users find and visit Mifos Initiative office -> **Last Updated**: 2025-12-29 - ---- - -## 1. Overview - -### 1.1 Feature Summary -The Location screen displays the Mifos Initiative headquarters information including the organization name, address, and an interactive map view. On Android, it renders a Google Maps component with a marker at the headquarters location. On other platforms (iOS, Desktop, Web), the map component is a no-op placeholder pending platform-specific implementation. - -### 1.2 User Stories -- As a user, I want to see where Mifos Initiative is located so I can visit the office -- As a user, I want to view the headquarters on a map so I can get directions -- As a user, I want to see the full address so I can navigate to the location - ---- - -## 2. Screen Layout - -### 2.1 ASCII Mockup - -``` -+-------------------------------------------+ -| | -| Mifos Initiative | <- Organization name (bodyLarge) -| | -| Mifos Initiative, Seattle, | <- Full address (bodyMedium) -| Washington 98121 | -| | -| +-------------------------------------+ | -| | | | -| | | | -| | GOOGLE MAP VIEW | | -| | | | -| | [ * ] | | <- Marker at headquarters -| | "Mifos Initiative" | | -| | "Mifos Location" | | -| | | | -| | | | -| | | | -| | | | -| +-------------------------------------+ | -| | -+-------------------------------------------+ -``` - -### 2.2 Sections Table - -| # | Section | Description | API | Priority | -|---|---------|-------------|-----|----------| -| 1 | Organization Name | "Mifos Initiative" heading | None (static) | P0 | -| 2 | Address | Full address text | None (static) | P0 | -| 3 | Map View | Interactive map with marker | None (local) | P0 | - ---- - -## 3. User Interactions - -| Action | Trigger | Result | API Call | -|--------|---------|--------|----------| -| View map | Screen load | Display map centered on HQ | None | -| Tap marker | Click marker on map | Show info window with title/snippet | None | -| Pan map | Drag gesture | Move map view | None | -| Zoom map | Pinch gesture | Zoom in/out | None | - ---- - -## 4. State Model - -This feature is stateless. It displays static content with no dynamic data loading. - -```kotlin -// No ViewModel required - pure composable with static data -// Location coordinates are hardcoded constants - -// Hardcoded location data: -val headquarterLatLng = LatLng(47.61115, -122.34481) // Seattle, WA -val zoomLevel = 16f -val markerTitle = "Mifos Initiative" -val markerSnippet = "Mifos Location" -``` - ---- - -## 5. API Requirements - -| Endpoint | Method | Purpose | Status | -|----------|--------|---------|--------| -| None | - | Static feature, no API calls | N/A | - -This is a fully static/local feature. All data is hardcoded: -- Organization name from string resources -- Address from string resources -- Map coordinates hardcoded in Android implementation - ---- - -## 6. Edge Cases & Error Handling - -| Scenario | Behavior | UI Feedback | -|----------|----------|-------------| -| No Google Play Services (Android) | Map may not render | System error dialog | -| No internet (map tiles) | Cached tiles or blank map | Map shows cached data | -| Non-Android platform | Map component is no-op | Empty space where map would be | -| Map API key missing | Map shows error overlay | Google Maps error message | - ---- - -## 7. Components - -| Component | Props | Reusable? | -|-----------|-------|-----------| -| LocationsScreen | modifier | No (feature-specific) | -| RenderMap | modifier | Yes (expect/actual pattern) | -| GoogleMap | cameraPositionState, content | Yes (from maps-compose) | -| Marker | state, title, snippet | Yes (from maps-compose) | - ---- - -## 8. Platform Support - -| Platform | Map Implementation | Status | -|----------|-------------------|--------| -| Android | Google Maps Compose | Implemented | -| iOS | No-op (placeholder) | Not implemented | -| Desktop | No-op (placeholder) | Not implemented | -| Web (JS) | No-op (placeholder) | Not implemented | -| Web (WASM) | No-op (placeholder) | Not implemented | - ---- - -## 9. Navigation - -### Routes -- Base Route: `locations_base_route` -- Screen Route: `locations_screen_route` - -### Navigation Functions -```kotlin -fun NavController.navigateToLocationsScreen() -fun NavGraphBuilder.locationsNavGraph() -fun NavGraphBuilder.locationsScreenRoute() -``` - ---- - -## Changelog - -| Date | Change | -|------|--------| -| 2025-12-29 | Initial specification created based on implementation analysis | diff --git a/claude-product-cycle/design-spec-layer/features/location/STATUS.md b/claude-product-cycle/design-spec-layer/features/location/STATUS.md deleted file mode 100644 index 19d3afe56..000000000 --- a/claude-product-cycle/design-spec-layer/features/location/STATUS.md +++ /dev/null @@ -1,57 +0,0 @@ -# Location - Implementation Status - -> **Last Updated**: 2025-12-29 -> **Overall Status**: ✅ Done - ---- - -## Implementation Checklist - -- [x] SPEC.md created -- [x] API.md created (N/A - static content) -- [x] Feature: LocationScreen (platform-specific) -- [x] Navigation: Routes registered -- [x] STATUS.md updated - ---- - -## Layer Status - -| Layer | Status | Files | -|-------|--------|-------| -| Network | ✅ | N/A - Static content feature | -| Data | ✅ | N/A - No data persistence | -| Feature | ✅ | LocationScreen.kt (platform-specific implementations) | -| Navigation | ✅ | LocationNavGraph.kt, LocationNavigation.kt | - ---- - -## Files - -### Feature Layer -- `feature/location/src/commonMain/kotlin/org/mifos/mobile/feature/location/LocationScreen.kt` - -### Platform-Specific Implementations -- `feature/location/src/androidMain/kotlin/org/mifos/mobile/feature/location/LocationScreen.android.kt` -- `feature/location/src/desktopMain/kotlin/org/mifos/mobile/feature/location/LocationScreen.desktop.kt` -- `feature/location/src/nativeMain/kotlin/org/mifos/mobile/feature/location/LocationScreen.native.kt` -- `feature/location/src/jsMain/kotlin/org/mifos/mobile/feature/location/LocationScreen.js.kt` -- `feature/location/src/wasmJsMain/kotlin/org/mifos/mobile/feature/location/LocationScreen.wasmJs.kt` - -### Navigation Layer -- `feature/location/src/commonMain/kotlin/org/mifos/mobile/feature/location/navigation/LocationNavGraph.kt` -- `feature/location/src/commonMain/kotlin/org/mifos/mobile/feature/location/navigation/LocationNavigation.kt` - ---- - -## Gaps - -None identified. - ---- - -## Changelog - -| Date | Change | -|------|--------| -| 2025-12-29 | Initial status documentation | diff --git a/claude-product-cycle/design-spec-layer/features/location/mockups/FIGMA_LINKS.md b/claude-product-cycle/design-spec-layer/features/location/mockups/FIGMA_LINKS.md deleted file mode 100644 index e189aab9c..000000000 --- a/claude-product-cycle/design-spec-layer/features/location/mockups/FIGMA_LINKS.md +++ /dev/null @@ -1,65 +0,0 @@ -# Location Feature - Figma Links - -> **Feature**: Location (Location Intelligence Hub) -> **Status**: Pending Design Export -> **Last Updated**: 2025-01-04 - ---- - -## Figma Design Links - -After generating designs using AI tools (Stitch/Figma), paste the links below: - -### Main Screens - -| Screen | Figma Link | Status | -|--------|------------|--------| -| Branch Finder Map | `[Paste link here]` | Pending | -| Branch List View | `[Paste link here]` | Pending | -| Branch Detail | `[Paste link here]` | Pending | -| Book Appointment - Service | `[Paste link here]` | Pending | -| Book Appointment - DateTime | `[Paste link here]` | Pending | -| Book Appointment - Confirm | `[Paste link here]` | Pending | -| Appointment Success | `[Paste link here]` | Pending | -| AR Branch Finder | `[Paste link here]` | Pending | -| Branch Reviews | `[Paste link here]` | Pending | - -### Component Library - -| Component | Figma Link | Status | -|-----------|------------|--------| -| Map Marker (Branch) | `[Paste link here]` | Pending | -| Map Marker (ATM) | `[Paste link here]` | Pending | -| Location Card | `[Paste link here]` | Pending | -| Bottom Sheet | `[Paste link here]` | Pending | -| Filter Chip | `[Paste link here]` | Pending | -| Wait Time Badge | `[Paste link here]` | Pending | -| Time Slot | `[Paste link here]` | Pending | -| Service Card | `[Paste link here]` | Pending | -| Busy Hours Chart | `[Paste link here]` | Pending | - -### Dark Mode Variants - -| Screen | Figma Link | Status | -|--------|------------|--------| -| Branch Finder Map (Dark) | `[Paste link here]` | Pending | -| Branch Detail (Dark) | `[Paste link here]` | Pending | - ---- - -## Export Checklist - -- [ ] Export all screens at 1x, 2x, 3x -- [ ] Export component assets as SVG -- [ ] Export map marker icons -- [ ] Document color variables -- [ ] Create prototype connections -- [ ] Add interaction annotations -- [ ] Review accessibility contrast -- [ ] Verify dark mode mappings - ---- - -## Notes - -_Add any design notes, feedback, or revision history here._ diff --git a/claude-product-cycle/design-spec-layer/features/location/mockups/PROMPTS.md b/claude-product-cycle/design-spec-layer/features/location/mockups/PROMPTS.md deleted file mode 100644 index 16cd71018..000000000 --- a/claude-product-cycle/design-spec-layer/features/location/mockups/PROMPTS.md +++ /dev/null @@ -1,476 +0,0 @@ -# Location Feature - AI Design Tool Prompts - -> **Generated from**: MOCKUP.md v2.0 -> **Design Pattern**: Location Intelligence Hub -> **Primary Gradient**: #667EEA (Purple) -> #764BA2 (Deep Purple) -> **Generated**: 2025-01-04 - ---- - -## Google Stitch Prompts - -### Prompt 1: Branch Finder Map View - -``` -Create a Branch Finder Map screen for a fintech banking app. - -Design specifications: -- Material Design 3 with map-first design -- Primary gradient: #667EEA to #764BA2 -- Full-screen map with overlays - -Header (Floating): -- Back button (white, shadowed) -- Search bar: "Search branches, ATMs..." -- Filter icon button -- Floating on top of map - -Map View: -- Full-screen interactive map -- Custom map markers: - - Branch: Gradient pin with building icon - - ATM: Blue pin with ATM icon - - Partner: Gray pin with partner icon -- Marker clusters for zoom out -- User location: Blue pulsing dot - -Bottom Sheet (Collapsed): -- Peek height showing: - - "15 locations nearby" header - - Horizontal quick filters: All, Branches, ATMs, 24/7 - - Pull handle indicator - -Quick Stats Row (on sheet): -- "Nearest: 0.3 mi" | "Open Now: 8" | "24/7: 3" - -Selected Location Preview: -- When marker tapped, show preview card above sheet: - - Branch name - - Distance and walk time - - Open/Closed status - - Quick actions: Directions, Call, Details - -Style: Map-centric, quick discovery, location-aware -``` - -### Prompt 2: Branch List View - -``` -Create a Branch List View screen for a fintech banking app. - -Design specifications: -- Material Design 3 with list patterns -- Location cards with rich information - -Header: -- Back button, "Nearby Locations" title -- Map/List toggle icon -- Filter action - -Search & Filters: -- Search bar with location icon -- Filter chips: All, Branches (selected), ATMs, Open Now, 24/7 - -Sort Options: -- Dropdown: "Sort by: Distance" / "Wait Time" / "Rating" - -Location Cards (scrollable list): -Card structure: -- Left: Type icon with status indicator (open=green, closed=red) -- Main content: - - Branch name (16sp bold) - - Address (14sp secondary) - - Distance: "0.3 mi · 5 min walk" - - Hours: "Open until 6:00 PM" or "Closed · Opens 9 AM" -- Right: - - Wait time badge: "~10 min wait" - - Rating: "4.8 (125)" - - Chevron - -Card actions (expandable): -- Directions, Call, Book Appointment, Share - -Empty State: -- No locations found illustration -- "No locations match your filters" -- "Try expanding your search area" - -Style: Rich information cards, quick scanning, actionable -``` - -### Prompt 3: Branch Detail Screen - -``` -Create a Branch Detail screen for a fintech banking app. - -Design specifications: -- Material Design 3 with comprehensive location info -- Hero image with floating actions - -Hero Section: -- Branch photo (full width, 200dp height) -- Gradient overlay at bottom -- Floating back button (white, top-left) -- Floating favorite heart icon (top-right) - -Branch Info Card (overlapping hero): -- Branch name: "Mifos Downtown Branch" -- Rating: 4.8 stars (125 reviews) -- Status chip: "Open Now" (green) or "Closed" (red) -- Type badge: "Full Service Branch" - -Quick Actions Row: -- 4 action buttons: Directions, Call, Book, Share -- Each: Icon + label, outlined style - -Live Wait Time Card: -- Current wait: "~10 minutes" -- Visual: People icon with count -- Bar chart: Busy times by hour -- "Usually busier at 12 PM" -- Real-time update indicator - -Hours Section: -- Weekly schedule with today highlighted -- Special hours noted (holidays) -- "Last updated 2 hours ago" - -Services Available: -- Checklist with icons: - - Account Opening - - Loan Services - - Foreign Exchange - - Safe Deposit Boxes - - Notary Services - - Wheelchair Accessible - -Reviews Section: -- Overall rating with star breakdown -- Recent reviews (2-3 cards): - - User avatar, name, date - - Star rating - - Comment text - - Helpful button -- "See all 125 reviews" link - -Contact & Address: -- Full address with copy button -- Phone number with call button -- Email with compose button -- Website link - -Book Appointment CTA: -- Sticky bottom button: "Book Appointment" -- Gradient filled, full width - -Style: Comprehensive info, real-time data, booking-focused -``` - -### Prompt 4: Book Appointment Flow - -``` -Create a Book Appointment screen for branch visits in a fintech app. - -Design specifications: -- Material Design 3 with booking wizard -- Step-by-step appointment creation - -Header: -- Back/Close button -- "Book Appointment" title -- Step indicator: 1 of 3 - -Branch Context: -- Small card showing selected branch -- Name, address, distance -- Change link - -Service Selection: -- Title: "What do you need help with?" -- Service option cards (selectable): - - Account Opening (30 min) - - Loan Consultation (45 min) - - Investment Advisory (60 min) - - General Inquiry (15 min) - - Document Verification (20 min) -- Each shows estimated duration -- Icon + title + duration - -Date Selection: -- Calendar view for current/next month -- Available dates highlighted -- Selected date with gradient circle -- Unavailable dates grayed out - -Time Slot Selection: -- Horizontal scroll of available times -- Time chips: 9:00 AM, 9:30 AM, 10:00 AM... -- Selected: Gradient filled -- Unavailable: Crossed out - -Specialist Selection (optional): -- "Prefer a specific specialist?" toggle -- If on, show available specialists: - - Avatar, name, specialty, rating - - "Next available: Today 2:00 PM" - -Summary Card: -- Service, Date, Time, Branch -- Estimated duration -- Specialist (if selected) - -Notes Field: -- "Any additional notes?" text area -- Character limit indicator - -Confirm Button: -- "Confirm Appointment" gradient button -- Terms text below - -Style: Guided booking, clear availability, professional -``` - -### Prompt 5: AR Branch Finder (Premium) - -``` -Create an AR Branch Finder screen using augmented reality for a fintech app. - -Design specifications: -- Material Design 3 with AR overlay patterns -- Camera view with AR annotations - -Camera View: -- Full screen camera feed -- AR permission prompt if needed - -AR Overlays: -- Floating branch markers in 3D space -- Distance labels on each marker -- Directional arrows on ground (optional) -- Line connecting user to nearest branch - -Branch Marker (AR): -- 3D pin with gradient -- Name label floating above -- Distance: "150m ahead" -- Walk time: "2 min" -- Pulsing animation - -Mini Map: -- Small radar-style map in corner -- Shows user orientation -- Branch dots with direction - -Info Panel (bottom): -- Selected branch details -- Quick actions: Navigate, Details -- Swipe between nearby branches - -Controls: -- Switch to Map view button -- Flashlight toggle (for low light) -- Refresh AR button - -Accuracy Indicator: -- GPS accuracy status -- "High precision" or "Move for better signal" - -Style: Immersive AR, clear annotations, easy navigation -``` - ---- - -## Figma MCP Prompts - -### Prompt 1: Branch Finder Frame - -``` -Create a Figma frame for "Location - Branch Finder" mobile screen (375x812px). - -Components needed: -1. Floating Header: - - Back button (white, shadow) - - Search bar component - - Filter icon button - -2. Map View (placeholder): - - Full screen - - Custom marker components: - - Branch marker (gradient) - - ATM marker (blue) - - User location (pulsing dot) - -3. Bottom Sheet Component: - - Collapsed state (peek) - - Expanded state (list) - - Drag handle - - Filter chips row - -4. Location Card Component: - - Type icon with status dot - - Name, address, distance - - Wait time badge - - Rating display - - Action buttons (collapsed) - -5. Quick Filter Chips: - - All, Branches, ATMs, Open Now, 24/7 - - Selected/unselected states - -Design tokens: -- Primary: #667EEA -- Map markers: gradient, blue, gray -- Open status: #00D09C -- Closed status: #FF4757 -``` - -### Prompt 2: Complete Location Flow - -``` -Create a Figma prototype flow for Location feature with these frames: - -Frame 1: Map View -- Full map with markers -- Floating search -- Bottom sheet collapsed - -Frame 2: List View -- Location cards list -- Filters applied -- Sort options - -Frame 3: Branch Detail -- Hero image -- Info cards -- Services list -- Reviews section -- Book button - -Frame 4-6: Book Appointment Flow -- Service selection -- Date/time picker -- Confirmation - -Frame 7: Appointment Success -- Confirmation animation -- Details summary -- Add to calendar option - -Frame 8: AR View (optional) -- Camera placeholder -- AR overlay mockups -- Mini map - -Prototype connections: -- Map marker tap -> Detail preview -- Detail preview -> Full detail -- Book button -> Appointment flow -- List/Map toggle switches views - -Component variants: -- Location card: default/selected/expanded -- Map marker: branch/atm/partner -- Time slot: available/selected/unavailable -``` - ---- - -## Design Tokens - -```json -{ - "feature": "location", - "version": "2.0", - "designPattern": "Location Intelligence Hub", - "colors": { - "primary": "#667EEA", - "secondary": "#764BA2", - "success": "#00D09C", - "error": "#FF4757", - "warning": "#FFB800", - "surface": "#FFFFFF", - "background": "#F8F9FA", - "mapOverlay": "rgba(0,0,0,0.5)" - }, - "markers": { - "branch": { - "fill": "gradient", - "size": 48 - }, - "atm": { - "fill": "#2196F3", - "size": 40 - }, - "partner": { - "fill": "#9CA3AF", - "size": 36 - }, - "userLocation": { - "fill": "#2196F3", - "pulse": true, - "size": 24 - } - }, - "components": { - "locationCard": { - "height": "auto", - "minHeight": 96, - "padding": 16, - "radius": 16, - "iconSize": 40, - "gap": 12 - }, - "bottomSheet": { - "peekHeight": 160, - "expandedHeight": "70%", - "handleHeight": 4, - "handleWidth": 40, - "radius": 24 - }, - "waitTimeBadge": { - "height": 28, - "padding": 12, - "radius": 14, - "background": "#FFB80015" - }, - "timeSlot": { - "height": 44, - "padding": 16, - "radius": 22, - "gap": 8 - }, - "serviceCard": { - "padding": 16, - "radius": 12, - "iconSize": 32 - } - }, - "animation": { - "markerBounce": { - "duration": 300, - "type": "spring" - }, - "sheetDrag": { - "duration": 200, - "easing": "ease-out" - }, - "userPulse": { - "duration": 2000, - "type": "infinite" - } - } -} -``` - ---- - -## Screen Checklist - -| Screen | Stitch Prompt | Figma Prompt | Status | -|--------|---------------|--------------|--------| -| Branch Finder Map | 1 | 1, 2 | Ready | -| Branch List View | 2 | 2 | Ready | -| Branch Detail | 3 | 2 | Ready | -| Book Appointment | 4 | 2 | Ready | -| AR Branch Finder | 5 | 2 | Ready | -| Appointment Success | - | 2 | Pending | diff --git a/claude-product-cycle/design-spec-layer/features/location/mockups/design-tokens.json b/claude-product-cycle/design-spec-layer/features/location/mockups/design-tokens.json deleted file mode 100644 index 8490f6558..000000000 --- a/claude-product-cycle/design-spec-layer/features/location/mockups/design-tokens.json +++ /dev/null @@ -1,270 +0,0 @@ -{ - "feature": "location", - "version": "2.0", - "designPattern": "Location Intelligence Hub", - "lastUpdated": "2025-01-04", - "colors": { - "primary": { - "default": "#667EEA", - "dark": "#5A6FD6" - }, - "secondary": { - "default": "#764BA2", - "dark": "#6A4292" - }, - "success": { - "default": "#00D09C", - "light": "#00D09C15" - }, - "error": { - "default": "#FF4757", - "light": "#FF475715" - }, - "warning": { - "default": "#FFB800", - "light": "#FFB80015" - }, - "surface": { - "light": "#FFFFFF", - "dark": "#1A1F2E" - }, - "background": { - "light": "#F8F9FA", - "dark": "#0D1117" - }, - "map": { - "overlay": "rgba(0,0,0,0.5)", - "searchBar": "#FFFFFF", - "userLocation": "#2196F3" - }, - "text": { - "primary": { - "light": "#1F2937", - "dark": "#F0F6FC" - }, - "secondary": { - "light": "#6B7280", - "dark": "#8B949E" - }, - "onGradient": "#FFFFFF" - } - }, - "gradients": { - "primary": { - "type": "linear", - "angle": 135, - "stops": [ - { "color": "#667EEA", "position": 0 }, - { "color": "#764BA2", "position": 100 } - ] - }, - "heroOverlay": { - "type": "linear", - "angle": 180, - "stops": [ - { "color": "transparent", "position": 0 }, - { "color": "rgba(0,0,0,0.6)", "position": 100 } - ] - } - }, - "typography": { - "fontFamily": { - "primary": "Inter", - "mono": "JetBrains Mono" - }, - "styles": { - "h1": { "size": 28, "weight": 700, "lineHeight": 1.2 }, - "h2": { "size": 24, "weight": 700, "lineHeight": 1.3 }, - "h3": { "size": 20, "weight": 600, "lineHeight": 1.4 }, - "branchName": { "size": 18, "weight": 600, "lineHeight": 1.4 }, - "subtitle": { "size": 16, "weight": 500, "lineHeight": 1.5 }, - "body": { "size": 14, "weight": 400, "lineHeight": 1.5 }, - "caption": { "size": 12, "weight": 400, "lineHeight": 1.4 }, - "distance": { "size": 12, "weight": 600, "lineHeight": 1.4 } - } - }, - "spacing": { - "xs": 4, - "sm": 8, - "md": 16, - "lg": 24, - "xl": 32, - "xxl": 48 - }, - "radius": { - "sm": 8, - "md": 12, - "lg": 16, - "xl": 20, - "xxl": 24, - "sheet": 24, - "pill": 100 - }, - "elevation": { - "card": "0 2px 8px rgba(0,0,0,0.08)", - "floating": "0 4px 12px rgba(0,0,0,0.15)", - "sheet": "0 -4px 16px rgba(0,0,0,0.12)" - }, - "markers": { - "branch": { - "type": "gradient", - "size": 48, - "iconSize": 24, - "shadow": "0 4px 8px rgba(102, 126, 234, 0.4)" - }, - "atm": { - "fill": "#2196F3", - "size": 40, - "iconSize": 20 - }, - "partner": { - "fill": "#9CA3AF", - "size": 36, - "iconSize": 18 - }, - "userLocation": { - "fill": "#2196F3", - "size": 24, - "pulseSize": 48, - "pulseOpacity": 0.3 - }, - "cluster": { - "minSize": 40, - "maxSize": 56, - "fontSize": 14 - } - }, - "components": { - "searchBar": { - "height": 48, - "radius": 24, - "iconSize": 20, - "padding": 16 - }, - "filterChip": { - "height": 36, - "padding": 16, - "radius": 18, - "gap": 8 - }, - "locationCard": { - "minHeight": 96, - "padding": 16, - "radius": 16, - "iconSize": 40, - "gap": 12, - "variants": { - "default": { "bg": "#FFFFFF" }, - "selected": { "bg": "#667EEA10", "border": "#667EEA" } - } - }, - "bottomSheet": { - "peekHeight": 160, - "expandedHeight": "70%", - "handleHeight": 4, - "handleWidth": 40, - "handleColor": "#E1E4E8", - "radius": 24 - }, - "waitTimeBadge": { - "height": 28, - "paddingHorizontal": 12, - "radius": 14, - "fontSize": 12, - "background": "#FFB80015", - "textColor": "#FFB800" - }, - "statusBadge": { - "height": 24, - "padding": 8, - "radius": 12, - "variants": { - "open": { "bg": "#00D09C15", "text": "#00D09C" }, - "closed": { "bg": "#FF475715", "text": "#FF4757" } - } - }, - "serviceCard": { - "padding": 16, - "radius": 12, - "iconSize": 32, - "gap": 12 - }, - "timeSlot": { - "height": 44, - "paddingHorizontal": 16, - "radius": 22, - "gap": 8, - "variants": { - "available": { "bg": "#F8F9FA", "border": "#E1E4E8" }, - "selected": { "bg": "gradient", "border": "none" }, - "unavailable": { "bg": "#F8F9FA", "opacity": 0.5 } - } - }, - "quickAction": { - "size": 64, - "iconSize": 24, - "radius": 16, - "gap": 12 - }, - "heroImage": { - "height": 200, - "overlayHeight": 80 - }, - "ratingStars": { - "size": 16, - "gap": 2, - "filledColor": "#FFB800", - "emptyColor": "#E1E4E8" - }, - "reviewCard": { - "padding": 16, - "radius": 12, - "avatarSize": 40, - "gap": 12 - }, - "busyChart": { - "barWidth": 20, - "barRadius": 4, - "maxHeight": 60, - "gap": 4 - } - }, - "animation": { - "markerBounce": { - "duration": 300, - "easing": "cubic-bezier(0.175, 0.885, 0.32, 1.275)" - }, - "markerSelect": { - "scale": 1.2, - "duration": 200 - }, - "sheetDrag": { - "duration": 200, - "easing": "cubic-bezier(0.4, 0.0, 0.2, 1)" - }, - "userPulse": { - "duration": 2000, - "type": "infinite", - "scale": 2 - }, - "cardPress": { - "scale": 0.98, - "duration": 150 - }, - "listStagger": { - "duration": 300, - "staggerDelay": 50 - } - }, - "screens": [ - "branchFinderMap", - "branchListView", - "branchDetail", - "bookAppointmentService", - "bookAppointmentDateTime", - "bookAppointmentConfirm", - "appointmentSuccess", - "arBranchFinder", - "branchReviews" - ] -} diff --git a/claude-product-cycle/design-spec-layer/features/location/mockups/dummy/01-branch-finder-map.png b/claude-product-cycle/design-spec-layer/features/location/mockups/dummy/01-branch-finder-map.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/location/mockups/dummy/02-branch-list-view.png b/claude-product-cycle/design-spec-layer/features/location/mockups/dummy/02-branch-list-view.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/location/mockups/dummy/03-branch-detail.png b/claude-product-cycle/design-spec-layer/features/location/mockups/dummy/03-branch-detail.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/location/mockups/dummy/04-book-appointment-service.png b/claude-product-cycle/design-spec-layer/features/location/mockups/dummy/04-book-appointment-service.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/location/mockups/dummy/05-book-appointment-datetime.png b/claude-product-cycle/design-spec-layer/features/location/mockups/dummy/05-book-appointment-datetime.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/location/mockups/dummy/06-book-appointment-confirm.png b/claude-product-cycle/design-spec-layer/features/location/mockups/dummy/06-book-appointment-confirm.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/location/mockups/dummy/07-appointment-success.png b/claude-product-cycle/design-spec-layer/features/location/mockups/dummy/07-appointment-success.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/location/mockups/dummy/08-ar-branch-finder.png b/claude-product-cycle/design-spec-layer/features/location/mockups/dummy/08-ar-branch-finder.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/notification/API.md b/claude-product-cycle/design-spec-layer/features/notification/API.md deleted file mode 100644 index e19a5e664..000000000 --- a/claude-product-cycle/design-spec-layer/features/notification/API.md +++ /dev/null @@ -1,308 +0,0 @@ -# Notification - API Reference - ---- - -## Endpoints Required - -### 1. Get User Notification Registration ID - -**Endpoint**: `GET /self/device/registration/client/{clientId}` - -**Purpose**: Fetch the notification registration ID for a client to manage push notification settings - -**Request**: -``` -Headers: - Authorization: Basic {token} - Fineract-Platform-TenantId: {tenant} - -Path Parameters: - clientId: Long - The client's unique identifier -``` - -**Response**: -```json -{ - "id": 123 -} -``` - -**Kotlin DTO**: Uses `NotificationUserDetail` from `core/model/entity/notification/` - -**Status**: Implemented in `NotificationService` - ---- - -### 2. Register Device for Notifications - -**Endpoint**: `POST /self/device/registration` - -**Purpose**: Register a device to receive push notifications for a client - -**Request**: -``` -Headers: - Authorization: Basic {token} - Fineract-Platform-TenantId: {tenant} - Content-Type: application/json - -Body: -{ - "clientId": 1, - "registrationId": "fcm_token_string_here" -} -``` - -**Response**: `HttpResponse` (success/failure status) - -**Kotlin DTO**: Uses `NotificationRegisterPayload` from `core/model/entity/notification/` - -**Status**: Implemented in `NotificationService` - ---- - -### 3. Update Notification Registration - -**Endpoint**: `PUT /self/device/registration/{id}` - -**Purpose**: Update an existing device registration (e.g., when FCM token refreshes) - -**Request**: -``` -Headers: - Authorization: Basic {token} - Fineract-Platform-TenantId: {tenant} - Content-Type: application/json - -Path Parameters: - id: Long - The registration ID to update - -Body: -{ - "clientId": 1, - "registrationId": "new_fcm_token_string" -} -``` - -**Response**: `HttpResponse` (success/failure status) - -**Status**: Implemented in `NotificationService` - ---- - -## Local Database Operations - -The notification feature primarily uses local database storage for notifications. Notifications are received via push notifications (FCM) and stored locally. - -### Database Entity - -```kotlin -@Entity(tableName = "mifos_notification") -data class MifosNotificationEntity( - @PrimaryKey(autoGenerate = false) - val timeStamp: Long, - val msg: String?, - val read: Boolean?, -) -``` - -### Repository Operations - -| Operation | Method | Description | -|-----------|--------|-------------| -| Load all | `loadNotifications()` | Get all stored notifications | -| Get unread count | `getUnReadNotificationCount()` | Count unread notifications | -| Save notification | `saveNotification(notification)` | Persist a notification | -| Delete old | `deleteOldNotifications()` | Remove notifications > 30 days old | -| Update read status | `updateReadStatus(notification, isRead)` | Mark as read/unread | - ---- - -## API Summary - -| Endpoint | Service | Repository | Status | -|----------|---------|------------|--------| -| `/device/registration/client/{id}` | NotificationService | UserDetailRepository | Implemented | -| `/device/registration` | NotificationService | UserDetailRepository | Implemented | -| `/device/registration/{id}` | NotificationService | UserDetailRepository | Implemented | -| Local DB (notifications) | - | NotificationRepository | Partial* | - -> *Note: Room DAO integration is currently commented out in the repository implementation - ---- - -## Kotlin Implementation - -### Service (NotificationService.kt) - -```kotlin -interface NotificationService { - @GET(ApiEndPoints.DEVICE + "/registration/client/{clientId}") - fun getUserNotificationId( - @Path("clientId") clientId: Long - ): Flow - - @POST(ApiEndPoints.DEVICE + "/registration") - suspend fun registerNotification( - @Body payload: NotificationRegisterPayload? - ): HttpResponse - - @PUT(ApiEndPoints.DEVICE + "/registration/{id}") - suspend fun updateRegisterNotification( - @Path("id") id: Long, - @Body payload: NotificationRegisterPayload?, - ): HttpResponse -} -``` - -### Repository Interface (NotificationRepository.kt) - -```kotlin -interface NotificationRepository { - fun loadNotifications(): Flow>> - - fun getUnReadNotificationCount(): Flow> - - suspend fun saveNotification(notification: MifosNotification) - - suspend fun deleteOldNotifications() - - suspend fun updateReadStatus(notification: MifosNotification, isRead: Boolean) -} -``` - -### Repository Implementation (NotificationRepositoryImp.kt) - -```kotlin -class NotificationRepositoryImp( - // private val notificationDao: MifosNotificationDao, - private val ioDispatcher: CoroutineDispatcher, -) : NotificationRepository { - - override fun loadNotifications(): Flow>> { - // TODO: Uncomment when Room DAO is enabled - // return notificationDao.getNotifications() - // .map { it.map { it.toModel() } } - // .flowOn(ioDispatcher) - return flowOf(DataState.Success(emptyList())) - .flowOn(ioDispatcher) - } - - override fun getUnReadNotificationCount(): Flow> { - // return notificationDao.getUnreadNotificationsCount().flowOn(ioDispatcher) - return flowOf(DataState.Success(0)) - .flowOn(ioDispatcher) - } - - override suspend fun saveNotification(notification: MifosNotification) { - // withContext(ioDispatcher) { - // notificationDao.saveNotification(notification.toEntity()) - // } - } - - override suspend fun deleteOldNotifications() { - // return withContext(ioDispatcher) { - // val thirtyDaysInMillis = 2592000000L - // val cutoffTime = System.currentTimeMillis() - thirtyDaysInMillis - // notificationDao.deleteOldNotifications(cutoffTime) - // } - } - - override suspend fun updateReadStatus(notification: MifosNotification, isRead: Boolean) { - // withContext(ioDispatcher) { - // notificationDao.updateReadStatus(notification.timeStamp, isRead) - // } - } -} -``` - ---- - -## Kotlin DTOs - -### NotificationUserDetail - -```kotlin -package org.mifos.mobile.core.model.entity.notification - -import kotlinx.serialization.Serializable - -@Serializable -data class NotificationUserDetail( - val id: Int = 0, -) -``` - -### NotificationRegisterPayload - -```kotlin -package org.mifos.mobile.core.model.entity.notification - -data class NotificationRegisterPayload( - val clientId: Long, - val registrationId: String, -) -``` - -### MifosNotification (Domain Model) - -```kotlin -package org.mifos.mobile.core.model.entity - -import kotlinx.serialization.Serializable -import org.mifos.mobile.core.model.Parcelable -import org.mifos.mobile.core.model.Parcelize - -@Parcelize -@Serializable -data class MifosNotification( - val timeStamp: Long, - val msg: String? = null, - val read: Boolean? = null, -) : Parcelable { - fun isRead(): Boolean { - return read == true - } -} -``` - -### MifosNotificationEntity (Database Entity) - -```kotlin -package org.mifos.mobile.core.database.entity - -import org.mifos.mobile.core.database.Entity -import org.mifos.mobile.core.database.PrimaryKey - -@Entity(tableName = "mifos_notification") -data class MifosNotificationEntity( - @PrimaryKey(autoGenerate = false) - val timeStamp: Long, - val msg: String?, - val read: Boolean?, -) -``` - ---- - -## API Endpoints Reference - -| Constant | Value | -|----------|-------| -| `ApiEndPoints.DEVICE` | `"device"` | - -Full endpoints: -- `device/registration/client/{clientId}` - GET user notification ID -- `device/registration` - POST register notification -- `device/registration/{id}` - PUT update registration - ---- - -## Notes - -- Notifications are received via Firebase Cloud Messaging (FCM) and stored locally -- The notification list is read from local database, not fetched from server -- Device registration endpoints are used for managing push notification tokens -- The current implementation has Room DAO integration commented out, returning empty data -- Timestamps are stored as Unix milliseconds for sorting and cleanup operations -- Notifications older than 30 days are automatically deleted on screen load diff --git a/claude-product-cycle/design-spec-layer/features/notification/MOCKUP.md b/claude-product-cycle/design-spec-layer/features/notification/MOCKUP.md deleted file mode 100644 index 77031decb..000000000 --- a/claude-product-cycle/design-spec-layer/features/notification/MOCKUP.md +++ /dev/null @@ -1,1824 +0,0 @@ -# Notifications - UI Mockups v2.0 - -> **Design Pattern**: Smart Notification Intelligence Center -> **Inspiration**: Superhuman, Slack, Discord, Monzo, N26 -> **Gradient Theme**: #667EEA to #764BA2 (Purple-Blue Primary) -> **Version**: 2.0.0 -> **Last Updated**: 2025-12-30 - ---- - -## Design Philosophy - -### 2025 Notification Patterns Applied - -| Pattern | Implementation | User Benefit | -|---------|----------------|--------------| -| **AI Priority Inbox** | Smart sorting by importance | Focus on what matters most | -| **Smart Grouping** | Related notifications bundled | Reduced clutter, better context | -| **Focus Modes** | Quiet hours & priority only | Distraction-free banking | -| **Quick Intelligence** | Predictive action buttons | One-tap resolution | -| **Notification Analytics** | Engagement patterns | Self-awareness & control | -| **Rich Media** | Images, progress, animations | Engaging experience | -| **Digest Summaries** | Daily/weekly rollups | Information hierarchy | -| **Gamification** | Engagement streaks | Positive habit formation | - ---- - -## Table of Contents - -1. [Screen Inventory](#screen-inventory) -2. [Screen Mockups](#screen-mockups) -3. [Component Specifications](#component-specifications) -4. [Animation Specifications](#animation-specifications) -5. [Accessibility](#accessibility) -6. [Dark Mode](#dark-mode) -7. [Implementation Notes](#implementation-notes) - ---- - -## Screen Inventory - -| # | Screen | Purpose | Key Features | -|---|--------|---------|--------------| -| 1 | Smart Inbox | AI-prioritized notification feed | Priority tabs, smart groups, focus mode toggle | -| 2 | Priority View | High-importance notifications only | Urgent items, action required | -| 3 | Notification Detail | Expanded notification with actions | Rich content, contextual actions | -| 4 | Focus Mode Active | Quiet hours / DND screen | Timer, exceptions, scheduled end | -| 5 | Daily Digest | Summarized notification rollup | Key insights, action summary | -| 6 | Notification Analytics | Engagement patterns | Charts, habits, optimization tips | -| 7 | Smart Settings | AI-powered preferences | Priority learning, channel control | -| 8 | Grouped Notifications | Bundled related items | Thread view, batch actions | -| 9 | Empty State | Zero notifications | Achievement unlocked messaging | -| 10 | Loading State | Skeleton with shimmer | Progressive loading | - ---- - -## Screen Mockups - -### Screen 1: Smart Inbox (Main View) - -The primary notification hub with AI-prioritized content and focus mode toggle. - -``` -┌─────────────────────────────────────────────────────────────┐ -│ ← Notifications 🔔 ⚙️ │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ 🌙 Focus Mode [OFF] │ │ -│ │ Pause non-urgent notifications │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌────────┐ │ │ -│ │ │ Priority │ │ All │ │ Actions │ │ Offers │ │ │ -│ │ │ (3) │ │ (12) │ │ (2) │ │ (4) │ │ │ -│ │ │░░░░░░░░░░│ │ │ │ │ │ │ │ │ -│ │ │ SELECTED │ │ │ │ │ │ │ │ │ -│ │ └──────────┘ └──────────┘ └──────────┘ └────────┘ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ░░│ │ -│ │░░ 🎯 3 items need your attention ░░│ │ -│ │░░ Tap to view priority notifications ░░│ │ -│ │░░ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ ───────────────────────────────────────────────────────── │ -│ TODAY Mark all read │ -│ ───────────────────────────────────────────────────────── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ ● │ │ -│ │ ┌────┐ │ │ -│ │ │ ⚠️ │ Loan Payment Due Soon 2h ago │ │ -│ │ │ │ ───────────────────── │ │ -│ │ │ 🔴 │ URGENT │ │ -│ │ └────┘ │ │ -│ │ Your payment of $250.00 is due in 3 days │ │ -│ │ │ │ -│ │ ┌─────────────────────────────────────────────┐ │ │ -│ │ │░░░░░░░░░░░░░ Pay Now - $250 ░░░░░░░░░░░░░░░│ │ │ -│ │ └─────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ ┌─────────────┐ ┌─────────────┐ │ │ -│ │ │ Set Reminder │ │ View Loan │ │ │ -│ │ └─────────────┘ └─────────────┘ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ ● │ │ -│ │ ┌────┐ │ │ -│ │ │ 💰 │ Payment Received! 4h ago │ │ -│ │ │ │ ───────────────── │ │ -│ │ │ 🟢 │ DEPOSIT │ │ -│ │ └────┘ │ │ -│ │ You received $1,500.00 from ABC Corp │ │ -│ │ → Savings Account ****4521 │ │ -│ │ │ │ -│ │ ┌─────────────┐ ┌─────────────┐ │ │ -│ │ │ View Account │ │ Say Thanks │ │ │ -│ │ └─────────────┘ └─────────────┘ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌────┐ │ │ -│ │ │ 🔒 │ Security Alert 6h ago │ │ -│ │ │ │ ─────────────── │ │ -│ │ │ 🟡 │ REVIEW │ │ -│ │ └────┘ │ │ -│ │ New login from iPhone 15 Pro in NYC │ │ -│ │ │ │ -│ │ ┌─────────────┐ ┌─────────────┐ │ │ -│ │ │ That's Me │ │ Not Me 🚨 │ │ │ -│ │ └─────────────┘ └─────────────┘ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ ───────────────────────────────────────────────────────── │ -│ YESTERDAY · 5 notifications │ -│ ───────────────────────────────────────────────────────── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ 📦 Transaction Updates (3) › │ │ -│ │ Amazon, Netflix, Uber │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ 🎁 Special Offers (2) › │ │ -│ │ 2% cashback, Referral bonus │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ 📊 View your notification insights → │ │ -│ │ You check notifications 8x/day on average │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - -### Screen 2: Priority View (Urgent Items) - -Shows only high-priority notifications requiring immediate action. - -``` -┌─────────────────────────────────────────────────────────────┐ -│ ← Priority Inbox 🔔 ⚙️ │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌────────┐ │ │ -│ │ │ Priority │ │ All │ │ Actions │ │ Offers │ │ │ -│ │ │ (3) │ │ (12) │ │ (2) │ │ (4) │ │ │ -│ │ │░░░░░░░░░░│ │ │ │ │ │ │ │ │ -│ │ └──────────┘ └──────────┘ └──────────┘ └────────┘ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ░░│ │ -│ │░░ ⚡ Priority items need your attention ░░│ │ -│ │░░ These won't auto-dismiss ░░│ │ -│ │░░ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ REQUIRES ACTION │ -│ ─────────────── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ 🔴 URGENT │ │ -│ │ ┌────────────────────────────────────────────────┐ │ │ -│ │ │ │ │ │ -│ │ │ ⚠️ Loan Payment Due Soon │ │ │ -│ │ │ │ │ │ -│ │ │ ┌──────────────────────────────────────────┐ │ │ │ -│ │ │ │ Due in 3 days │ │ │ │ -│ │ │ │ ████████████████████░░░░░░░░░░░ 75% │ │ │ │ -│ │ │ │ Amount: $250.00 │ │ │ │ -│ │ │ └──────────────────────────────────────────┘ │ │ │ -│ │ │ │ │ │ -│ │ │ Late fee if unpaid: $25.00 │ │ │ -│ │ │ │ │ │ -│ │ │ ┌─────────────────────────────────────────┐ │ │ │ -│ │ │ │░░░░░░░░░░ Pay Now - $250.00 ░░░░░░░░░░░░│ │ │ │ -│ │ │ └─────────────────────────────────────────┘ │ │ │ -│ │ │ │ │ │ -│ │ │ ┌─────────────────┐ ┌─────────────────────┐ │ │ │ -│ │ │ │ Remind Tomorrow │ │ Schedule Payment │ │ │ │ -│ │ │ └─────────────────┘ └─────────────────────┘ │ │ │ -│ │ │ │ │ │ -│ │ └────────────────────────────────────────────────┘ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ 🟡 REVIEW NEEDED │ │ -│ │ ┌────────────────────────────────────────────────┐ │ │ -│ │ │ │ │ │ -│ │ │ 🔒 New Device Login │ │ │ -│ │ │ │ │ │ -│ │ │ iPhone 15 Pro · New York, NY │ │ │ -│ │ │ Today at 2:34 PM │ │ │ -│ │ │ │ │ │ -│ │ │ ┌───────────────┐ ┌───────────────────────┐ │ │ │ -│ │ │ │ ✓ That's Me │ │ 🚨 Report Suspicious │ │ │ │ -│ │ │ └───────────────┘ └───────────────────────┘ │ │ │ -│ │ │ │ │ │ -│ │ └────────────────────────────────────────────────┘ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ 🟠 ACTION SUGGESTED │ │ -│ │ ┌────────────────────────────────────────────────┐ │ │ -│ │ │ │ │ │ -│ │ │ 📋 Complete Your Profile │ │ │ -│ │ │ │ │ │ -│ │ │ Add phone number for 2FA security │ │ │ -│ │ │ Progress: 80% complete │ │ │ -│ │ │ │ │ │ -│ │ │ ┌─────────────────────────────────────────┐ │ │ │ -│ │ │ │ Complete Now │ │ │ │ -│ │ │ └─────────────────────────────────────────┘ │ │ │ -│ │ │ │ │ │ -│ │ └────────────────────────────────────────────────┘ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ ✨ Clear all priority items to unlock │ │ -│ │ "Inbox Zero" achievement badge! │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - -### Screen 3: Notification Detail (Expanded View) - -Full notification detail with rich context and smart actions. - -``` -┌─────────────────────────────────────────────────────────────┐ -│ ← ⋮ │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ░░│ │ -│ │░░ ┌──────────────┐ ░░│ │ -│ │░░ │ │ ░░│ │ -│ │░░ │ 💰 │ ░░│ │ -│ │░░ │ SUCCESS │ ░░│ │ -│ │░░ │ │ ░░│ │ -│ │░░ └──────────────┘ ░░│ │ -│ │░░ ░░│ │ -│ │░░ Payment Received! ░░│ │ -│ │░░ ═══════════════════ ░░│ │ -│ │░░ ░░│ │ -│ │░░ +$1,500.00 ░░│ │ -│ │░░ ░░│ │ -│ │░░ Today at 10:34 AM ░░│ │ -│ │░░ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ You received a payment from ABC Corporation. │ │ -│ │ The funds have been deposited into your account. │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ TRANSACTION DETAILS │ -│ ─────────────────── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ From ABC Corporation │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ To Savings Account ****4521 │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ Amount $1,500.00 │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ Reference SALARY-DEC-2025 │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ Transaction ID TXN-789456123 │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ AI INSIGHTS │ -│ ─────────── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 💡 This is your regular monthly salary deposit │ │ -│ │ from ABC Corporation │ │ -│ │ │ │ -│ │ 📈 Your income this month: $1,500 (same as last) │ │ -│ │ │ │ -│ │ 🎯 Suggested: Move $300 to Emergency Fund │ │ -│ │ (You typically save 20% of salary) │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ QUICK ACTIONS │ -│ ───────────── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌─────────────────────────────────────────────┐ │ │ -│ │ │░░░░░░░░░░░░░░ View Account ░░░░░░░░░░░░░░░░│ │ │ -│ │ └─────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ ┌───────────────────┐ ┌───────────────────┐ │ │ -│ │ │ 💸 Quick Transfer │ │ 📄 Download PDF │ │ │ -│ │ └───────────────────┘ └───────────────────┘ │ │ -│ │ │ │ -│ │ ┌───────────────────┐ ┌───────────────────┐ │ │ -│ │ │ 📤 Share Receipt │ │ 🏷️ Add Category │ │ │ -│ │ └───────────────────┘ └───────────────────┘ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ 🔔 Get notified for future payments from ABC Corp? │ │ -│ │ [Always] [Ask me] [Never] │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - -### Screen 4: Focus Mode Active - -When the user enables focus mode to pause non-essential notifications. - -``` -┌─────────────────────────────────────────────────────────────┐ -│ ← Focus Mode ⚙️ │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ░░│ │ -│ │░░ ┌──────────────┐ ░░│ │ -│ │░░ │ │ ░░│ │ -│ │░░ │ 🌙 │ ░░│ │ -│ │░░ │ FOCUS │ ░░│ │ -│ │░░ │ │ ░░│ │ -│ │░░ └──────────────┘ ░░│ │ -│ │░░ ░░│ │ -│ │░░ Focus Mode Active ░░│ │ -│ │░░ ═════════════════ ░░│ │ -│ │░░ ░░│ │ -│ │░░ Only urgent notifications ░░│ │ -│ │░░ will come through ░░│ │ -│ │░░ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌───────────────────┐ │ │ -│ │ │ │ │ │ -│ │ │ 2:45:30 │ │ │ -│ │ │ remaining │ │ │ -│ │ │ │ │ │ -│ │ └───────────────────┘ │ │ -│ │ │ │ -│ │ Ends at 6:00 PM │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ DURING FOCUS MODE │ -│ ───────────────── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ✅ Security alerts Will notify │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ ✅ Urgent payment reminders Will notify │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ ✅ Large transactions (>$500) Will notify │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ ❌ Marketing & promotions Silenced │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ ❌ Account updates Silenced │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ ❌ Weekly digests Silenced │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ PAUSED NOTIFICATIONS │ -│ ──────────────────── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 3 notifications are waiting │ │ -│ │ │ │ -│ │ ┌─────────────────────────────────────────────┐ │ │ -│ │ │ 🎁 Special Offers (2) │ │ │ -│ │ │ 📊 Weekly Summary (1) │ │ │ -│ │ └─────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ These will appear when Focus Mode ends │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌─────────────────────────────────────────────┐ │ │ -│ │ │ End Focus Mode Early │ │ │ -│ │ └─────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ ┌─────────────────────────────────────────────┐ │ │ -│ │ │ Extend by 1 Hour │ │ │ -│ │ └─────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - -### Screen 5: Daily Digest - -Smart summary of daily notification activity. - -``` -┌─────────────────────────────────────────────────────────────┐ -│ ← Daily Digest Dec 30, 2025 │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ░░│ │ -│ │░░ 📅 Your Day at a Glance ░░│ │ -│ │░░ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ MONEY IN & OUT │ -│ ───────────── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌─────────────────────┐ ┌─────────────────────┐ │ │ -│ │ │ │ │ │ │ │ -│ │ │ 💰 Money In │ │ 💸 Money Out │ │ │ -│ │ │ │ │ │ │ │ -│ │ │ +$1,650.00 │ │ -$342.50 │ │ │ -│ │ │ ─────────── │ │ ───────── │ │ │ -│ │ │ 2 transactions │ │ 5 transactions │ │ │ -│ │ │ │ │ │ │ │ -│ │ │ 🟢 Green │ │ 🔴 Red │ │ │ -│ │ │ │ │ │ │ │ -│ │ └─────────────────────┘ └─────────────────────┘ │ │ -│ │ │ │ -│ │ Net: +$1,307.50 ✨ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ KEY HIGHLIGHTS │ -│ ────────────── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 💵 Salary Received │ │ -│ │ $1,500.00 from ABC Corporation │ │ -│ │ → Savings Account │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ ⚠️ Payment Due Soon │ │ -│ │ Loan payment $250.00 due in 3 days │ │ -│ │ [Pay Now] [Set Reminder] │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ 🔒 Security Check Passed │ │ -│ │ New device login confirmed as you │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ SPENDING BY CATEGORY │ -│ ──────────────────── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 🛒 Shopping ████████████ $189.99 │ │ -│ │ 🍔 Food & Dining ██████ $ 87.50 │ │ -│ │ 🚗 Transportation ███ $ 45.00 │ │ -│ │ 💳 Subscriptions ██ $ 20.01 │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ SMART INSIGHTS │ -│ ────────────── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 💡 You spent 15% less on food today than │ │ -│ │ your daily average. Keep it up! │ │ -│ │ │ │ -│ │ 🎯 Suggested: Set aside $150 for emergency fund │ │ -│ │ to maintain your 20% savings rate │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ View All 12 Notifications │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ ⏰ Digest delivered daily at 8:00 PM [Change] │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - -### Screen 6: Notification Analytics - -Insights into notification patterns and engagement. - -``` -┌─────────────────────────────────────────────────────────────┐ -│ ← Notification Insights ⚙️ │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ Your Notification Health │ │ -│ │ ════════════════════════ │ │ -│ │ │ │ -│ │ ┌──────────────┐ │ │ -│ │ │ │ │ │ -│ │ │ 92% │ │ │ -│ │ │ HEALTHY │ │ │ -│ │ │ │ │ │ -│ │ └──────────────┘ │ │ -│ │ │ │ -│ │ You're in control of your alerts! │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ THIS WEEK │ -│ ───────── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │ │ -│ │ │ │ │ │ │ │ │ │ │░░░░░│ │░░░░░│ │ │ -│ │ │ │ │ │ │ │ │░░░░░│ │░░░░░│ │░░░░░│ │ │ -│ │ │░░░░░│ │░░░░░│ │░░░░░│ │░░░░░│ │░░░░░│ │░░░░░│ │ │ -│ │ │░░░░░│ │░░░░░│ │░░░░░│ │░░░░░│ │░░░░░│ │░░░░░│ │ │ -│ │ │░░░░░│ │░░░░░│ │░░░░░│ │░░░░░│ │░░░░░│ │░░░░░│ │ │ -│ │ └─────┘ └─────┘ └─────┘ └─────┘ └─────┘ └─────┘ │ │ -│ │ Mon Tue Wed Thu Fri Sat │ │ -│ │ │ │ -│ │ Total: 84 notifications · Avg: 12/day │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ ENGAGEMENT STATS │ -│ ──────────────── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 📬 Received 84 │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ 👁️ Opened 72 (86%) │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ ⚡ Acted On 28 (33%) │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ 🗑️ Dismissed 12 (14%) │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ ⏱️ Avg Response 4.2 min │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ NOTIFICATION BREAKDOWN │ -│ ────────────────────── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌───────────────────────────────────┐ │ │ -│ │ │ ╱╲ │ │ │ -│ │ │ ╱ ╲ │ │ │ -│ │ │ ╱ 45% ╲ Transactions │ │ │ -│ │ │ ╱──────╲ │ │ │ -│ │ │ ╱ 25% ╲ Alerts │ │ │ -│ │ │ ╱───────────╲ │ │ │ -│ │ │ ╱ 18% ╲ Security │ │ │ -│ │ │ ╱───────────────╲ │ │ │ -│ │ │ ╱ 12% ╲ Promos │ │ │ -│ │ └───────────────────────────────────┘ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ ACHIEVEMENTS │ -│ ──────────── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 🏆 Inbox Zero Champion ✅ Earned 3x this week │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ 🔥 Quick Responder 🔓 98% → 100% to unlock │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ 🎯 Action Taker ✅ 28 actions this week │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ 💡 Tip: Enable daily digest to reduce │ │ -│ │ interruptions by 40% │ │ -│ │ [Enable Daily Digest] │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - -### Screen 7: Smart Settings - -AI-powered notification preferences with learning capabilities. - -``` -┌─────────────────────────────────────────────────────────────┐ -│ ← Notification Settings │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ░░│ │ -│ │░░ 🧠 Smart Learning [ENABLED] ░░│ │ -│ │░░ AI learns your preferences over time ░░│ │ -│ │░░ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ PRIORITY SETTINGS │ -│ ───────────────── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 🔴 High Priority (Always notify) │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ ✓ Security alerts │ │ -│ │ ✓ Payment due reminders │ │ -│ │ ✓ Large transactions (>$500) │ │ -│ │ ✓ Failed transactions │ │ -│ │ │ │ -│ │ 🟡 Medium Priority (Silent during focus) │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ ✓ Incoming payments │ │ -│ │ ✓ Transfer confirmations │ │ -│ │ ✓ Loan updates │ │ -│ │ │ │ -│ │ 🟢 Low Priority (Digest only) │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ ○ Marketing promotions │ │ -│ │ ○ Feature announcements │ │ -│ │ ○ Weekly summaries │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ DELIVERY PREFERENCES │ -│ ──────────────────── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 📱 Push Notifications [ON] │ │ -│ │ Sound, vibration, and banner │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ 📧 Email Notifications [ON] │ │ -│ │ Important alerts and weekly digest │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ 💬 SMS Alerts [OFF] │ │ -│ │ Security and urgent only │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ SMART FEATURES │ -│ ────────────── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 📦 Smart Grouping [ON] │ │ -│ │ Bundle similar notifications together │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ 📅 Daily Digest [ON] │ │ -│ │ Delivered at 8:00 PM [Change] │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ 🌙 Quiet Hours [ON] │ │ -│ │ 10:00 PM - 7:00 AM [Change] │ │ -│ │ (High priority still comes through) │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ 💡 AI Suggestions [ON] │ │ -│ │ Smart action recommendations │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ NOTIFICATION CHANNELS │ -│ ───────────────────── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 💳 Transactions [ON] › │ │ -│ │ 🔒 Security [ON] › │ │ -│ │ ⚠️ Loan & Payment Reminders [ON] › │ │ -│ │ 🎁 Offers & Promotions [OFF] › │ │ -│ │ 📊 Account Updates [ON] › │ │ -│ │ 💰 Savings Goals [ON] › │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ 🔄 Reset to Default Settings │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - -### Screen 8: Grouped Notifications - -Bundled notifications for related items. - -``` -┌─────────────────────────────────────────────────────────────┐ -│ ← Transaction Updates 12/30 │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 📦 5 transactions today │ │ -│ │ Net: -$342.50 │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ [Select All] [Mark All Read] │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ ○ │ │ -│ │ ┌────┐ │ │ -│ │ │ 🛒 │ Amazon 11:23 AM │ │ -│ │ │ │ ───────── │ │ -│ │ └────┘ Electronics purchase │ │ -│ │ │ │ -│ │ -$189.99 │ │ -│ │ Shopping · Credit Card ****8765 │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ ○ │ │ -│ │ ┌────┐ │ │ -│ │ │ 🎬 │ Netflix 8:00 AM │ │ -│ │ │ │ ─────── │ │ -│ │ └────┘ Monthly subscription │ │ -│ │ │ │ -│ │ -$15.99 │ │ -│ │ Subscriptions · Auto-payment │ │ -│ │ 🔄 Recurring │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ ○ │ │ -│ │ ┌────┐ │ │ -│ │ │ 🚗 │ Uber 7:45 AM │ │ -│ │ │ │ ──── │ │ -│ │ └────┘ Morning commute │ │ -│ │ │ │ -│ │ -$24.50 │ │ -│ │ Transportation · Debit Card ****4521 │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ ○ │ │ -│ │ ┌────┐ │ │ -│ │ │ 🍔 │ Starbucks 7:15 AM │ │ -│ │ │ │ ───────── │ │ -│ │ └────┘ Coffee & breakfast │ │ -│ │ │ │ -│ │ -$12.50 │ │ -│ │ Food & Dining · Apple Pay │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ ○ │ │ -│ │ ┌────┐ │ │ -│ │ │ 🎵 │ Spotify 12:00 AM │ │ -│ │ │ │ ─────── │ │ -│ │ └────┘ Premium subscription │ │ -│ │ │ │ -│ │ -$9.99 │ │ -│ │ Subscriptions · Auto-payment │ │ -│ │ 🔄 Recurring │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ ───────────────────────────────────────────────────────── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 💡 You have 2 subscriptions in this group │ │ -│ │ Total: $25.98/month │ │ -│ │ [Review Subscriptions] │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ ┌──────────────────┐ ┌──────────────────┐ │ │ -│ │ │ Delete Selected │ │ Archive Group │ │ │ -│ │ └──────────────────┘ └──────────────────┘ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - -### Screen 9: Empty State (Achievement Unlocked) - -Gamified empty state celebrating inbox zero. - -``` -┌─────────────────────────────────────────────────────────────┐ -│ ← Notifications 🔔 ⚙️ │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌────────┐ │ │ -│ │ │ Priority │ │ All │ │ Actions │ │ Offers │ │ │ -│ │ │ (0) │ │ (0) │ │ (0) │ │ (0) │ │ │ -│ │ │░░░░░░░░░░│ │ │ │ │ │ │ │ │ -│ │ └──────────┘ └──────────┘ └──────────┘ └────────┘ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ │ -│ │ -│ │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌─────────────────┐ │ │ -│ │ │ │ │ │ -│ │ │ ✨ 🏆 ✨ │ │ │ -│ │ │ │ │ │ -│ │ │ INBOX ZERO │ │ │ -│ │ │ ACHIEVED! │ │ │ -│ │ │ │ │ │ -│ │ └─────────────────┘ │ │ -│ │ │ │ -│ │ │ │ -│ │ All Caught Up! │ │ -│ │ ══════════════ │ │ -│ │ │ │ -│ │ You've cleared all notifications. │ │ -│ │ Take a moment to celebrate! 🎉 │ │ -│ │ │ │ -│ │ │ │ -│ │ ┌─────────────────────────────────────────────┐ │ │ -│ │ │ │ │ │ -│ │ │ 🔥 Current Streak: 5 days │ │ │ -│ │ │ You've reached inbox zero 5 days │ │ │ -│ │ │ in a row! Keep it going! │ │ │ -│ │ │ │ │ │ -│ │ │ ┌─────┬─────┬─────┬─────┬─────┬─────┐ │ │ │ -│ │ │ │ Mon │ Tue │ Wed │ Thu │ Fri │ Sat │ │ │ │ -│ │ │ │ ✓ │ ✓ │ ✓ │ ✓ │ ✓ │ ○ │ │ │ │ -│ │ │ └─────┴─────┴─────┴─────┴─────┴─────┘ │ │ │ -│ │ │ │ │ │ -│ │ └─────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ We'll notify you when something important │ │ -│ │ happens with your accounts. │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ 📊 View Notification Insights │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ ⚙️ Manage Settings │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - -### Screen 10: Loading State - -Skeleton loading with progressive shimmer. - -``` -┌─────────────────────────────────────────────────────────────┐ -│ ← Notifications 🔔 ⚙️ │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ Focus Mode toggle skeleton ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌────────┐ │ │ -│ │ │░░░░░░░░░░│ │░░░░░░░░░░│ │░░░░░░░░░░│ │░░░░░░░░│ │ │ -│ │ │░░░░░░░░░░│ │░░░░░░░░░░│ │░░░░░░░░░░│ │░░░░░░░░│ │ │ -│ │ └──────────┘ └──────────┘ └──────────┘ └────────┘ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ ░░░░░░░░░░░ ░░░░░░░░░ │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌────┐ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░░░░░░░░ │ │ -│ │ │░░░░│ │ │ -│ │ │░░░░│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ │ -│ │ └────┘ │ │ -│ │ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ │ -│ │ │ │ -│ │ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌────┐ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░░░░░░░░ │ │ -│ │ │░░░░│ │ │ -│ │ │░░░░│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ │ -│ │ └────┘ │ │ -│ │ ░░░░░░░░░░░░░░░░░░░░░░░░ │ │ -│ │ │ │ -│ │ ┌──────────────────┐ ┌──────────────────┐ │ │ -│ │ │░░░░░░░░░░░░░░░░░░│ │░░░░░░░░░░░░░░░░░░│ │ │ -│ │ └──────────────────┘ └──────────────────┘ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌────┐ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ │ -│ │ │░░░░│ │ │ -│ │ │░░░░│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ │ -│ │ └────┘ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ │ -│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ -│ │ -│ SHIMMER ANIMATION →→→ │ -│ Gradient sweep: #F3F4F6 → #FFFFFF → #F3F4F6 │ -│ Duration: 1500ms, infinite loop │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - ---- - -## Component Specifications - -### Priority Badge Component - -``` -┌─────────────────────────────────────────────────────────────┐ -│ PRIORITY BADGE │ -├─────────────────────────────────────────────────────────────┤ -│ │ -│ Variants: │ -│ │ -│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ -│ │ 🔴 │ │ 🟡 │ │ 🟠 │ │ 🟢 │ │ -│ │ URGENT │ │ REVIEW │ │ ACTION │ │ INFO │ │ -│ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │ -│ #FF4757 #FFB800 #FF8C42 #00D09C │ -│ │ -│ Specifications: │ -│ ───────────────────────────────────────────────────────── │ -│ Height: 20dp │ -│ Padding: 6dp horizontal │ -│ Corner Radius: 4dp │ -│ Font: 10sp, Bold, All Caps │ -│ Background: Color at 15% opacity │ -│ Text: Full color │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - -### Smart Notification Card - -``` -┌─────────────────────────────────────────────────────────────┐ -│ SMART NOTIFICATION CARD │ -├─────────────────────────────────────────────────────────────┤ -│ │ -│ Structure: │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ [Priority Badge] [Timestamp] │ │ -│ │ │ │ -│ │ [Icon] [Title] │ │ -│ │ [Subtitle] │ │ -│ │ │ │ -│ │ [Message Content - Max 2 lines] │ │ -│ │ [Additional Context] │ │ -│ │ │ │ -│ │ [Primary CTA Button] │ │ -│ │ [Secondary Action] [Tertiary Action] │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ Dimensions: │ -│ ───────────────────────────────────────────────────────── │ -│ Card Padding: 16dp │ -│ Corner Radius: 16dp │ -│ Elevation: 2dp (unread), 0dp (read) │ -│ Icon Container: 48dp x 48dp │ -│ Icon Size: 24dp │ -│ Icon Corner Radius: 12dp │ -│ Gap between icon and content: 12dp │ -│ Margin Bottom: 12dp │ -│ │ -│ Typography: │ -│ ───────────────────────────────────────────────────────── │ -│ Title: 16sp, SemiBold, Primary text color │ -│ Subtitle: 12sp, Regular, Secondary text color │ -│ Message: 14sp, Regular, Primary text color │ -│ Context: 12sp, Regular, Tertiary text color │ -│ Timestamp: 12sp, Regular, Tertiary text color │ -│ │ -│ Icon Background Colors: │ -│ ───────────────────────────────────────────────────────── │ -│ 💰 Money In: #00D09C at 15% │ -│ 💸 Money Out: #FF4757 at 15% │ -│ ⚠️ Alert: #FFB800 at 15% │ -│ 🔒 Security: #FF4757 at 15% │ -│ 🎁 Promo: #764BA2 at 15% │ -│ 📋 Action: #667EEA at 15% │ -│ ✅ Success: #00D09C at 15% │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - -### Focus Mode Toggle - -``` -┌─────────────────────────────────────────────────────────────┐ -│ FOCUS MODE TOGGLE │ -├─────────────────────────────────────────────────────────────┤ -│ │ -│ Default State: │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ 🌙 Focus Mode [OFF] │ │ -│ │ Pause non-urgent notifications │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ Active State: │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ 🌙 Focus Mode Active 2:45 left ░░░░│ │ -│ │░░ Only urgent notifications ░░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └─────────────────────────────────────────────────────┘ │ -│ Background: Primary gradient at 10% │ -│ Border: Primary gradient │ -│ │ -│ Specifications: │ -│ ───────────────────────────────────────────────────────── │ -│ Height: 64dp │ -│ Padding: 16dp │ -│ Corner Radius: 12dp │ -│ Icon: 24dp, Animated moon when active │ -│ Toggle: 52dp x 28dp │ -│ Border: 1dp, Border color (#E5E7EB) │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - -### Grouped Notification Row - -``` -┌─────────────────────────────────────────────────────────────┐ -│ GROUPED NOTIFICATION ROW │ -├─────────────────────────────────────────────────────────────┤ -│ │ -│ Layout: │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ 📦 Transaction Updates (3) › │ │ -│ │ Amazon, Netflix, Uber │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ Specifications: │ -│ ───────────────────────────────────────────────────────── │ -│ Height: 72dp │ -│ Padding: 16dp │ -│ Corner Radius: 12dp │ -│ Background: Surface color │ -│ Title: 14sp, Medium │ -│ Count Badge: 12sp, Bold, Primary color │ -│ Preview: 12sp, Regular, Secondary color │ -│ Chevron: 20dp, Tertiary color │ -│ │ -│ Stack Effect (optional): │ -│ ───────────────────────────────────────────────────────── │ -│ Show 2-3 stacked card shadows behind main card │ -│ Offset: 4dp per card │ -│ Opacity: Decrease by 20% per layer │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - -### Streak Widget - -``` -┌─────────────────────────────────────────────────────────────┐ -│ STREAK WIDGET │ -├─────────────────────────────────────────────────────────────┤ -│ │ -│ Layout: │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 🔥 Current Streak: 5 days │ │ -│ │ │ │ -│ │ ┌─────┬─────┬─────┬─────┬─────┬─────┬─────┐ │ │ -│ │ │ Mon │ Tue │ Wed │ Thu │ Fri │ Sat │ Sun │ │ │ -│ │ │ ✓ │ ✓ │ ✓ │ ✓ │ ✓ │ ○ │ ○ │ │ │ -│ │ └─────┴─────┴─────┴─────┴─────┴─────┴─────┘ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ Day States: │ -│ ───────────────────────────────────────────────────────── │ -│ ✓ Completed: Green background (#00D09C), white check │ -│ ○ Pending: Gray border (#E5E7EB), empty │ -│ ✗ Missed: Red background (#FF4757), white X │ -│ ★ Today: Primary border, pulsing animation │ -│ │ -│ Dimensions: │ -│ ───────────────────────────────────────────────────────── │ -│ Day Cell: 36dp x 36dp │ -│ Gap: 4dp │ -│ Corner Radius: 8dp │ -│ Icon Size: 16dp │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - -### Insight Banner - -``` -┌─────────────────────────────────────────────────────────────┐ -│ INSIGHT BANNER │ -├─────────────────────────────────────────────────────────────┤ -│ │ -│ Layout: │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ 📊 View your notification insights → │ │ -│ │ You check notifications 8x/day on average │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ Specifications: │ -│ ───────────────────────────────────────────────────────── │ -│ Padding: 16dp │ -│ Background: Surface color with subtle gradient tint │ -│ Corner Radius: 12dp │ -│ Border: 1dp, Primary at 20% │ -│ Title: 14sp, Medium, Primary color │ -│ Subtitle: 12sp, Regular, Secondary color │ -│ Arrow: 16dp, Primary color │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - ---- - -## Animation Specifications - -### New Notification Arrival - -``` -┌─────────────────────────────────────────────────────────────┐ -│ NEW NOTIFICATION ANIMATION │ -├─────────────────────────────────────────────────────────────┤ -│ │ -│ Sequence: │ -│ ───────────────────────────────────────────────────────── │ -│ │ -│ Frame 1 (0ms): │ -│ - Bell icon starts wiggle animation │ -│ - 3 oscillations, ±15° rotation │ -│ - Duration: 400ms │ -│ │ -│ Frame 2 (100ms): │ -│ - Badge count increments with scale bounce │ -│ - Scale: 1.0 → 1.3 → 1.0 │ -│ - Duration: 200ms │ -│ │ -│ Frame 3 (200ms): │ -│ - New card slides in from top │ -│ - TranslateY: -100% → 0% │ -│ - Opacity: 0 → 1 │ -│ - Duration: 300ms │ -│ - Easing: EaseOutBack │ -│ │ -│ Frame 4 (300ms): │ -│ - Existing cards shift down │ -│ - TranslateY: 0 → cardHeight │ -│ - Duration: 200ms │ -│ - Easing: EaseOutQuad │ -│ │ -│ Haptic: Light impact at 200ms │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - -### Swipe Actions - -``` -┌─────────────────────────────────────────────────────────────┐ -│ SWIPE TO ACTION │ -├─────────────────────────────────────────────────────────────┤ -│ │ -│ Left Swipe Thresholds: │ -│ ───────────────────────────────────────────────────────── │ -│ │ -│ 0% ──── 30% ──── 60% ──── 100% │ -│ │ │ │ │ │ -│ Start Read Archive Delete │ -│ ✓ 📁 🗑️ │ -│ Blue Amber Red │ -│ │ -│ Reveal Animation: │ -│ - Action icon scales in from 0.5 → 1.0 │ -│ - Background color fades in │ -│ - Duration: 150ms per threshold │ -│ │ -│ Delete Completion: │ -│ - Card slides out: 200ms │ -│ - Height collapses: 150ms │ -│ - Cards below shift up: 200ms │ -│ - Total: 350ms │ -│ │ -│ Spring Back: │ -│ - Damping: 0.7 │ -│ - Stiffness: 400 │ -│ - Duration: ~300ms │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - -### Focus Mode Activation - -``` -┌─────────────────────────────────────────────────────────────┐ -│ FOCUS MODE ANIMATION │ -├─────────────────────────────────────────────────────────────┤ -│ │ -│ Activation: │ -│ ───────────────────────────────────────────────────────── │ -│ │ -│ 1. Toggle switch slides (200ms) │ -│ 2. Moon icon appears with scale (150ms) │ -│ 3. Row expands to show timer (200ms) │ -│ 4. Background gradient fades in (300ms) │ -│ 5. Non-priority cards fade to 50% opacity (200ms) │ -│ │ -│ Moon Icon Animation: │ -│ - Gentle float: translateY -2dp to +2dp │ -│ - Duration: 2000ms │ -│ - Easing: EaseInOutSine │ -│ - Loop: Infinite │ -│ │ -│ Timer Countdown: │ -│ - Update every second │ -│ - Scale pulse on minute change │ -│ - Glow effect when < 5 minutes │ -│ │ -│ Deactivation: │ -│ - Reverse animations │ -│ - Paused notifications slide in │ -│ - Celebration animation if streak maintained │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - -### Inbox Zero Achievement - -``` -┌─────────────────────────────────────────────────────────────┐ -│ INBOX ZERO CELEBRATION │ -├─────────────────────────────────────────────────────────────┤ -│ │ -│ Sequence: │ -│ ───────────────────────────────────────────────────────── │ -│ │ -│ 1. Last card exit animation (300ms) │ -│ │ -│ 2. Trophy icon entrance (400ms) │ -│ - Scale: 0 → 1.2 → 1.0 │ -│ - Rotation: -15° → 0° │ -│ - Easing: Spring (damping: 0.6) │ -│ │ -│ 3. Confetti burst (800ms) │ -│ - 50 particles │ -│ - Colors: Primary palette │ -│ - Physics: Gravity + wind │ -│ │ -│ 4. Text fade in (200ms delay, 300ms duration) │ -│ │ -│ 5. Streak widget slide up (400ms delay, 300ms duration) │ -│ │ -│ 6. Subtle glow pulse on trophy │ -│ - Opacity: 0.3 → 0.6 → 0.3 │ -│ - Duration: 2000ms │ -│ - Loop: 3 times │ -│ │ -│ Haptic: Success pattern (3 pulses) │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - -### Pull to Refresh - -``` -┌─────────────────────────────────────────────────────────────┐ -│ PULL TO REFRESH │ -├─────────────────────────────────────────────────────────────┤ -│ │ -│ Pull Phase: │ -│ ───────────────────────────────────────────────────────── │ -│ - Content follows finger with resistance (0.5x) │ -│ - Refresh indicator appears at 60dp pull │ -│ - Indicator scales from 0.5 → 1.0 │ -│ - Rotation starts at threshold │ -│ │ -│ Refresh Phase: │ -│ ───────────────────────────────────────────────────────── │ -│ - Content snaps to 60dp offset │ -│ - Indicator spins continuously │ -│ - Rotation: 360° per 1000ms │ -│ │ -│ Completion Phase: │ -│ ───────────────────────────────────────────────────────── │ -│ - Indicator morphs to checkmark (200ms) │ -│ - Scale bounce: 1.0 → 1.2 → 1.0 │ -│ - Content springs back (300ms) │ -│ - New items slide in from top │ -│ - Haptic: Light impact │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - ---- - -## Accessibility - -### Screen Reader Support - -``` -┌─────────────────────────────────────────────────────────────┐ -│ ACCESSIBILITY LABELS │ -├─────────────────────────────────────────────────────────────┤ -│ │ -│ Focus Mode Toggle: │ -│ ───────────────────────────────────────────────────────── │ -│ Label: "Focus mode, currently [on/off]" │ -│ Hint: "Double tap to toggle. When on, only urgent │ -│ notifications will come through" │ -│ State: "Active, 2 hours 45 minutes remaining" │ -│ Role: Switch │ -│ │ -│ Priority Tab: │ -│ ───────────────────────────────────────────────────────── │ -│ Label: "Priority, 3 items" │ -│ State: "Selected" │ -│ Hint: "Shows notifications requiring action" │ -│ Role: Tab │ -│ │ -│ Notification Card: │ -│ ───────────────────────────────────────────────────────── │ -│ Label: "Urgent. Loan payment due soon. Your payment │ -│ of 250 dollars is due in 3 days. 2 hours ago" │ -│ Hint: "Double tap to view details. Swipe left to │ -│ mark read or delete. Swipe right for quick │ -│ actions" │ -│ Actions: ["Pay now", "Set reminder", "View loan", │ -│ "Mark as read", "Delete"] │ -│ Role: Button │ -│ │ -│ Grouped Notifications: │ -│ ───────────────────────────────────────────────────────── │ -│ Label: "Transaction updates group, 3 notifications. │ -│ Amazon, Netflix, Uber" │ -│ Hint: "Double tap to expand group" │ -│ Role: Button (expandable) │ -│ │ -│ Streak Widget: │ -│ ───────────────────────────────────────────────────────── │ -│ Label: "Inbox zero streak: 5 days. Monday through │ -│ Friday completed. Saturday and Sunday pending" │ -│ Role: Status │ -│ │ -│ Daily Digest Card: │ -│ ───────────────────────────────────────────────────────── │ -│ Label: "Daily digest for December 30. Money in: │ -│ 1650 dollars from 2 transactions. Money out: │ -│ 342 dollars from 5 transactions. Net positive: │ -│ 1307 dollars" │ -│ Role: Article │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - -### Focus Order & Navigation - -``` -┌─────────────────────────────────────────────────────────────┐ -│ KEYBOARD / FOCUS NAVIGATION │ -├─────────────────────────────────────────────────────────────┤ -│ │ -│ Tab Order: │ -│ ───────────────────────────────────────────────────────── │ -│ 1. Back button │ -│ 2. Screen title │ -│ 3. Bell icon │ -│ 4. Settings button │ -│ 5. Focus mode toggle │ -│ 6. Priority tab │ -│ 7. All tab │ -│ 8. Actions tab │ -│ 9. Offers tab │ -│ 10. Priority banner (if visible) │ -│ 11. Mark all as read │ -│ 12. Date header │ -│ 13-N. Notification cards (in order) │ -│ - Each card's action buttons │ -│ N+1. Insight banner │ -│ │ -│ Keyboard Shortcuts: │ -│ ───────────────────────────────────────────────────────── │ -│ Tab / Shift+Tab: Move focus │ -│ Arrow Up/Down: Navigate notification list │ -│ Arrow Left/Right: Switch tabs │ -│ Enter/Space: Activate focused element │ -│ Delete: Delete focused notification │ -│ R: Mark focused as read │ -│ Shift+R: Mark all as read │ -│ F: Toggle focus mode │ -│ Escape: Go back / Close detail │ -│ │ -│ Focus Indicators: │ -│ ───────────────────────────────────────────────────────── │ -│ Ring: 2dp, Primary color (#667EEA) │ -│ Offset: 4dp from element edge │ -│ Corner radius: Match element │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - -### Touch Targets & Contrast - -``` -┌─────────────────────────────────────────────────────────────┐ -│ TOUCH & CONTRAST SPECIFICATIONS │ -├─────────────────────────────────────────────────────────────┤ -│ │ -│ Minimum Touch Targets: │ -│ ───────────────────────────────────────────────────────── │ -│ All interactive elements: 48dp × 48dp │ -│ Primary actions: 56dp height │ -│ Tab items: 48dp height, flexible width │ -│ Toggle switch: 52dp × 48dp │ -│ Notification cards: Full width × variable height │ -│ Action buttons: 48dp height minimum │ -│ │ -│ Spacing Between Targets: │ -│ ───────────────────────────────────────────────────────── │ -│ Minimum gap: 8dp │ -│ Recommended gap: 12dp │ -│ │ -│ Color Contrast (WCAG AA): │ -│ ───────────────────────────────────────────────────────── │ -│ Primary text on background: 7.2:1 ✓ │ -│ Secondary text on background: 4.8:1 ✓ │ -│ Priority badges: 4.5:1 minimum ✓ │ -│ Action buttons: 4.5:1 minimum ✓ │ -│ Icons on colored background: 3:1 minimum ✓ │ -│ │ -│ Reduced Motion: │ -│ ───────────────────────────────────────────────────────── │ -│ When "Reduce Motion" is enabled: │ -│ - Swipe actions: Instant transition │ -│ - New notification: Simple fade (no slide) │ -│ - Focus mode: No floating moon │ -│ - Inbox zero: No confetti, simple fade │ -│ - Skeleton: Static loading (no shimmer) │ -│ - Pull to refresh: Simple spinner │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - ---- - -## Dark Mode - -### Color Transformations - -``` -┌─────────────────────────────────────────────────────────────┐ -│ DARK MODE COLOR MAPPING │ -├─────────────────────────────────────────────────────────────┤ -│ │ -│ Backgrounds: │ -│ ───────────────────────────────────────────────────────── │ -│ Element Light Dark │ -│ Screen Background #F8F9FA #0D1117 │ -│ Surface #FFFFFF #1A1F2E │ -│ Card Background #FFFFFF #21262D │ -│ Elevated Surface #FFFFFF #282E38 │ -│ Divider #E5E7EB #30363D │ -│ │ -│ Text Colors: │ -│ ───────────────────────────────────────────────────────── │ -│ Primary Text #1F2937 #F0F6FC │ -│ Secondary Text #6B7280 #8B949E │ -│ Tertiary Text #9CA3AF #6E7681 │ -│ Disabled #D1D5DB #484F58 │ -│ Link/Action #667EEA #818CF8 │ -│ │ -│ Semantic Colors (Preserved): │ -│ ───────────────────────────────────────────────────────── │ -│ Success #00D09C #00D09C │ -│ Warning #FFB800 #FFB800 │ -│ Error #FF4757 #FF4757 │ -│ Info #667EEA #818CF8 │ -│ │ -│ Gradients: │ -│ ───────────────────────────────────────────────────────── │ -│ Primary #667EEA → #764BA2 (100%) │ -│ Primary (Dark) #667EEA → #764BA2 (85% opacity) │ -│ │ -│ Priority Badges (Dark): │ -│ ───────────────────────────────────────────────────────── │ -│ Urgent #FF4757 at 25% (increased) │ -│ Review #FFB800 at 25% │ -│ Action #FF8C42 at 25% │ -│ Info #00D09C at 25% │ -│ │ -│ Icon Backgrounds (Dark): │ -│ ───────────────────────────────────────────────────────── │ -│ All icon backgrounds: Increase opacity to 25% │ -│ (vs 15% in light mode) for better contrast │ -│ │ -│ Shadows & Elevation: │ -│ ───────────────────────────────────────────────────────── │ -│ Light Mode: Shadows enabled │ -│ Dark Mode: Shadows disabled, use surface color │ -│ differentiation instead │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - -### Dark Mode Example - -``` -┌─────────────────────────────────────────────────────────────┐ -│ DARK MODE - SMART INBOX │ -│ Background: #0D1117 │ -├─────────────────────────────────────────────────────────────┤ -│ │ -│ ← Notifications 🔔 ⚙️ │ -│ #F0F6FC #8B949E │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ │ -│ │▓▓ 🌙 Focus Mode [OFF] ▓▓│ │ -│ │▓▓ #F0F6FC Border: #30363D ▓▓│ │ -│ │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ │ -│ └─────────────────────────────────────────────────────┘ │ -│ Background: #21262D │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ -│ │ │ Priority │ │ All │ │ Actions │ │ │ -│ │ │░░░░░░░░░░│ │ #8B949E │ │ #8B949E │ │ │ -│ │ │ #818CF8 │ │ │ │ │ │ │ -│ │ └──────────┘ └──────────┘ └──────────┘ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ Tab background: #1A1F2E │ -│ │ -│ TODAY Mark all read │ -│ #6E7681 #818CF8 │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ │ -│ │▓▓ ● ▓▓│ │ -│ │▓▓ ┌────┐ ▓▓│ │ -│ │▓▓ │ ⚠️ │ Loan Payment Due Soon 2h ago ▓▓│ │ -│ │▓▓ │ │ #F0F6FC #6E7681 ▓▓│ │ -│ │▓▓ │ 🔴 │ URGENT (#FF4757 at 25%) ▓▓│ │ -│ │▓▓ └────┘ Icon BG: #FFB800 at 25% ▓▓│ │ -│ │▓▓ ▓▓│ │ -│ │▓▓ Your payment is due in 3 days ▓▓│ │ -│ │▓▓ #8B949E ▓▓│ │ -│ │▓▓ ▓▓│ │ -│ │▓▓ ┌─────────────────────────────────────────┐ ▓▓│ │ -│ │▓▓ │░░░░░░░░░ Pay Now - $250 ░░░░░░░░░░░░░░░│ ▓▓│ │ -│ │▓▓ │ Gradient at 85% │ ▓▓│ │ -│ │▓▓ └─────────────────────────────────────────┘ ▓▓│ │ -│ │▓▓ ▓▓│ │ -│ │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ │ -│ └─────────────────────────────────────────────────────┘ │ -│ Card Background: #21262D │ -│ No shadow in dark mode │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - ---- - -## Implementation Notes - -### Required Composables - -```kotlin -// Core Components -@Composable fun SmartInboxScreen() -@Composable fun PriorityNotificationCard() -@Composable fun GroupedNotificationRow() -@Composable fun FocusModeToggle() -@Composable fun NotificationTabRow() -@Composable fun DailyDigestCard() -@Composable fun StreakWidget() -@Composable fun InsightBanner() -@Composable fun PriorityBadge() -@Composable fun EmptyStateAchievement() - -// Detail Screens -@Composable fun NotificationDetailScreen() -@Composable fun FocusModeActiveScreen() -@Composable fun NotificationAnalyticsScreen() -@Composable fun SmartSettingsScreen() -@Composable fun GroupedNotificationsScreen() -@Composable fun DailyDigestScreen() - -// Animations -@Composable fun SwipeToActionContainer() -@Composable fun InboxZeroCelebration() -@Composable fun PullToRefreshIndicator() -@Composable fun NewNotificationAnimation() -``` - -### State Management - -```kotlin -data class NotificationInboxState( - val isLoading: Boolean = false, - val notifications: List = emptyList(), - val priorityCount: Int = 0, - val unreadCount: Int = 0, - val selectedTab: NotificationTab = NotificationTab.PRIORITY, - val isFocusModeActive: Boolean = false, - val focusModeEndTime: Instant? = null, - val pausedNotifications: List = emptyList(), - val inboxZeroStreak: Int = 0, - val dailyDigest: DailyDigest? = null, - val analytics: NotificationAnalytics? = null, - val error: String? = null -) - -data class SmartNotification( - val id: String, - val type: NotificationType, - val priority: Priority, - val title: String, - val message: String, - val timestamp: Instant, - val isRead: Boolean, - val isActionRequired: Boolean, - val actions: List, - val groupId: String?, - val metadata: Map -) - -enum class NotificationTab { PRIORITY, ALL, ACTIONS, OFFERS } -enum class Priority { URGENT, REVIEW, ACTION, INFO } -enum class NotificationType { - PAYMENT_RECEIVED, - PAYMENT_SENT, - SECURITY_ALERT, - LOAN_REMINDER, - PROMO, - ACCOUNT_UPDATE -} - -data class NotificationAction( - val id: String, - val label: String, - val type: ActionType, - val deepLink: String? -) - -enum class ActionType { PRIMARY, SECONDARY, DANGER } -``` - -### API Integration Points - -```kotlin -// Notification Service -interface NotificationService { - suspend fun getNotifications(filter: NotificationFilter): List - suspend fun markAsRead(id: String) - suspend fun markAllAsRead() - suspend fun deleteNotification(id: String) - suspend fun getAnalytics(): NotificationAnalytics - suspend fun getDailyDigest(date: LocalDate): DailyDigest - suspend fun updateSettings(settings: NotificationSettings) - suspend fun setFocusMode(enabled: Boolean, duration: Duration?) -} - -// Real-time updates -interface NotificationWebSocket { - val newNotifications: Flow - fun connect() - fun disconnect() -} -``` - ---- - -## Changelog - -| Date | Version | Changes | -|------|---------|---------| -| 2025-12-30 | 2.0.0 | Complete redesign with 2025 fintech patterns | -| | | - Added AI priority inbox with smart sorting | -| | | - Added focus mode with quiet hours | -| | | - Added daily digest summarization | -| | | - Added notification analytics dashboard | -| | | - Added gamification (inbox zero streaks) | -| | | - Added smart notification grouping | -| | | - Added rich contextual actions | -| | | - Enhanced accessibility support | -| 2025-12-29 | 1.0.0 | Initial mockup creation | - ---- - -## Data Binding Reference - -> **For `/implement` command**: Maps UI components to API.md sections. -> **Source of Truth**: See `API.md` for complete endpoint details. - -### Screen → API.md Mapping - -| Screen | API.md Section | Key Fields | -|--------|----------------|------------| -| Notification List | `Endpoints Required → 1. Get Notifications` | `pageItems[]`, `totalFilteredRecords` | -| Device Registration | `Endpoints Required → 2. Register Device` | FCM token, device info | -| Update Registration | `Endpoints Required → 3. Update Registration` | Updated FCM token | - -### Client-Only Features - -| Feature | Storage | Notes | -|---------|---------|-------| -| AI Priority Sorting | Client-side | Sorting logic | -| Focus Mode / Quiet Hours | DataStore | Local preference | -| Daily Digest | Client-side | Aggregation | -| Inbox Zero Streaks | DataStore | Gamification | - -### Actions → API.md Mapping - -| User Action | API.md Reference | Navigation | -|-------------|------------------|------------| -| Load Notifications | `1. Get Notifications` | Display list | -| Register Push | `2. Register Device` | On first launch | -| Update Token | `3. Update Registration` | On token refresh | - -### Error Handling - -See `API.md → Error Responses` for complete error codes. diff --git a/claude-product-cycle/design-spec-layer/features/notification/SPEC.md b/claude-product-cycle/design-spec-layer/features/notification/SPEC.md deleted file mode 100644 index 9d0c5562d..000000000 --- a/claude-product-cycle/design-spec-layer/features/notification/SPEC.md +++ /dev/null @@ -1,288 +0,0 @@ -# Notification - Feature Specification - -> **Purpose**: Display and manage user notifications with read/unread status -> **User Value**: Stay informed about account activities and system updates -> **Last Updated**: 2025-12-29 - ---- - -## 1. Overview - -### 1.1 Feature Summary -The Notification screen displays a chronological list of notifications for the user, sorted with unread notifications first and then by timestamp. Users can view notification messages, see when they were received, and mark notifications as read. The feature supports pull-to-refresh functionality and automatically deletes notifications older than 30 days. - -### 1.2 User Stories -- As a user, I want to see all my notifications so I can stay updated on account activities -- As a user, I want to see unread notifications first so I can prioritize important updates -- As a user, I want to mark notifications as read so I can track what I have reviewed -- As a user, I want to refresh my notifications so I can see the latest updates -- As a user, I want notifications older than 30 days automatically removed so the list stays relevant - ---- - -## 2. Screen Layout - -### 2.1 ASCII Mockup - -``` -+------------------------------------------+ -| [<] Notification | <- TopBar with back nav -+------------------------------------------+ -| | -| +--------------------------------------+ | -| | [Bell Icon] Notification message | | <- Unread (primary color) -| | text content here... | | -| | Dec 29, 2025 | | <- Timestamp -| | [OK] | | <- Dismiss button -| +--------------------------------------+ | -| ---------------------------------------- | <- Divider -| +--------------------------------------+ | -| | [Bell Icon] Previous notification | | <- Read (muted color) -| | message content... | | -| | Dec 28, 2025 | | -| +--------------------------------------+ | <- No OK button for read -| ---------------------------------------- | -| +--------------------------------------+ | -| | [Bell Icon] Another notification | | -| | message here... | | -| | Dec 27, 2025 | | -| +--------------------------------------+ | -| | -| [Pull down to refresh] | -| | -+------------------------------------------+ - -Empty State: -+------------------------------------------+ -| [<] Notification | -+------------------------------------------+ -| | -| | -| [Notification Icon] | -| | -| No notifications | -| | -| | -+------------------------------------------+ - -Loading State: -+------------------------------------------+ -| [<] Notification | -+------------------------------------------+ -| | -| | -| [Progress Indicator] | -| | -| | -+------------------------------------------+ - -Error State: -+------------------------------------------+ -| [<] Notification | -+------------------------------------------+ -| | -| [Error Icon] | -| | -| Something went wrong | -| | -| [Retry Button] | -| | -+------------------------------------------+ -``` - -### 2.2 Sections Table - -| # | Section | Description | API | Priority | -|---|---------|-------------|-----|----------| -| 1 | Top Bar | Title with back navigation | - | P0 | -| 2 | Notification List | Scrollable list with pull-to-refresh | Local DB | P0 | -| 3 | Notification Item | Message, timestamp, read status | Local DB | P0 | -| 4 | Empty State | Shown when no notifications exist | - | P0 | -| 5 | Error State | Error message with retry option | - | P0 | -| 6 | Loading State | Progress indicator during load | - | P0 | - ---- - -## 3. User Interactions - -| Action | Trigger | Result | API Call | -|--------|---------|--------|----------| -| Navigate back | Tap back button | Return to previous screen | - | -| Dismiss notification | Tap OK button | Mark notification as read | Local DB update | -| Pull refresh | Swipe down gesture | Reload notifications | Local DB query | -| Retry load | Tap retry button | Attempt to reload | Local DB query | -| View notification | Scroll list | Display notification content | - | - ---- - -## 4. State Model - -```kotlin -/** - * UI State for the Notification screen - */ -internal sealed interface NotificationUiState { - /** - * Loading state - shown while fetching notifications - */ - data object Loading : NotificationUiState - - /** - * Success state - notifications loaded successfully - * @param notifications Sorted list of notifications (unread first, then by timestamp) - */ - data class Success( - val notifications: List - ) : NotificationUiState - - /** - * Error state - failed to load notifications - * @param errorMessage Descriptive error message for the user - */ - data class Error( - val errorMessage: String? - ) : NotificationUiState - - /** - * Empty state - no notifications available - */ - data object Empty : NotificationUiState -} - -/** - * Domain model for a notification - */ -@Parcelize -@Serializable -data class MifosNotification( - val timeStamp: Long, // Unix timestamp for sorting - val msg: String? = null, // Notification message content - val read: Boolean? = null, // Read status -) : Parcelable { - fun isRead(): Boolean = read == true -} -``` - -### 4.1 ViewModel State - -```kotlin -class NotificationViewModel( - private val notificationRepositoryImp: NotificationRepository, - networkMonitor: NetworkMonitor, -) : ViewModel() { - - // UI state flow - val notificationUiState: StateFlow - - // Network availability state - val isNetworkAvailable: StateFlow - - // Pull-to-refresh state - val isRefreshing: StateFlow -} -``` - ---- - -## 5. API Requirements - -| Endpoint | Method | Purpose | Status | -|----------|--------|---------|--------| -| `/device/registration/client/{clientId}` | GET | Get notification registration ID | Implemented | -| `/device/registration` | POST | Register device for notifications | Implemented | -| `/device/registration/{id}` | PUT | Update notification registration | Implemented | -| Local Database | - | Store and retrieve notifications | Partial* | - -> *Note: The notification repository currently returns empty data as the Room DAO integration is commented out. Notifications are stored locally and managed through Firebase Cloud Messaging (FCM) on Android. - ---- - -## 6. Edge Cases & Error Handling - -| Scenario | Behavior | UI Feedback | -|----------|----------|-------------| -| No internet | Show network error state | "No internet connection" with retry | -| No notifications | Show empty state | "No notifications" with icon | -| API/DB error | Show error state | Error message with retry button | -| Old notifications | Auto-delete after 30 days | Removed from list silently | -| Load failure | Catch exception | Display error message | -| Refresh failure | Reset refresh state | Show error, keep current list | - ---- - -## 7. Components - -| Component | Props | Reusable? | -|-----------|-------|-----------| -| MifosElevatedScaffold | topBarTitle, onNavigateBack, content | Yes (core/designsystem) | -| NotificationItem | notification, dismissNotification | No (feature-specific) | -| NotificationContent | isRefreshing, notifications, dismissNotification, onRefresh | No (feature-specific) | -| MifosProgressIndicatorOverlay | - | Yes (core/ui) | -| MifosErrorComponent | message, isNetworkConnected, isRetryEnabled, onRetry | Yes (core/ui) | -| EmptyDataView | icon, error | Yes (core/ui) | -| MifosTextButton | content, onClick | Yes (core/designsystem) | -| PullToRefreshBox | state, onRefresh, isRefreshing | Yes (Material3) | - ---- - -## 8. Navigation - -```kotlin -// Route definition -@Serializable -data object NotificationRoute - -// Navigation extension -fun NavController.navigateToNotificationScreen(navOptions: NavOptions? = null) { - navigate(NotificationRoute, navOptions) -} - -// NavGraph destination -fun NavGraphBuilder.notificationDestination( - navigateBack: () -> Unit, -) { - composableWithPushTransitions { - NotificationScreen(navigateBack = navigateBack) - } -} -``` - ---- - -## 9. Sorting Logic - -Notifications are sorted using the following criteria: -1. **Unread first**: Unread notifications appear before read ones -2. **By timestamp**: Within each group, newer notifications appear first - -```kotlin -private fun sortNotifications( - notifications: List -): List { - return notifications.sortedWith( - compareByDescending { !it.isRead() } - .thenByDescending { it.timeStamp } - ) -} -``` - ---- - -## 10. Auto-Cleanup - -Notifications older than 30 days are automatically deleted when the screen loads: - -```kotlin -// 30 days in milliseconds -val thirtyDaysInMillis = 2592000000L -val cutoffTime = System.currentTimeMillis() - thirtyDaysInMillis -// Delete notifications with timeStamp < cutoffTime -``` - ---- - -## Changelog - -| Date | Change | -|------|--------| -| 2025-12-29 | Initial spec created from implementation | diff --git a/claude-product-cycle/design-spec-layer/features/notification/STATUS.md b/claude-product-cycle/design-spec-layer/features/notification/STATUS.md deleted file mode 100644 index 42949842f..000000000 --- a/claude-product-cycle/design-spec-layer/features/notification/STATUS.md +++ /dev/null @@ -1,61 +0,0 @@ -# Notification - Implementation Status - -> **Last Updated**: 2025-12-29 -> **Overall Status**: ✅ Done - ---- - -## Implementation Checklist - -- [x] SPEC.md created -- [x] API.md created -- [x] Network: Services exist (NotificationService) -- [x] Data: Repository exists (NotificationRepository) -- [x] Feature: ViewModel + Screen -- [x] Navigation: Route registered -- [x] DI: Modules registered -- [x] STATUS.md updated - ---- - -## Layer Status - -| Layer | Status | Files | -|-------|--------|-------| -| Network | ✅ | NotificationService.kt | -| Data | ✅ | NotificationRepository.kt, NotificationRepositoryImp.kt | -| Feature | ✅ | NotificationViewModel.kt, NotificationScreen.kt | -| DI | ✅ | NotificationModule.kt | -| Navigation | ✅ | NotificationNavigation.kt | - ---- - -## Files - -### Network Layer -- `core/network/services/NotificationService.kt` - -### Data Layer -- `core/data/repository/NotificationRepository.kt` -- `core/data/repositoryImpl/NotificationRepositoryImp.kt` -- `core/data/mapper/MifosNotification.kt` - -### Feature Layer -- `feature/notification/NotificationViewModel.kt` -- `feature/notification/NotificationScreen.kt` -- `feature/notification/navigation/NotificationNavigation.kt` -- `feature/notification/di/NotificationModule.kt` - ---- - -## Gaps - -None identified. - ---- - -## Changelog - -| Date | Change | -|------|--------| -| 2025-12-29 | Initial status documentation | diff --git a/claude-product-cycle/design-spec-layer/features/notification/mockups/PROMPTS_FIGMA.md b/claude-product-cycle/design-spec-layer/features/notification/mockups/PROMPTS_FIGMA.md deleted file mode 100644 index 815c7b0c5..000000000 --- a/claude-product-cycle/design-spec-layer/features/notification/mockups/PROMPTS_FIGMA.md +++ /dev/null @@ -1,338 +0,0 @@ -# Notifications - Figma First Draft Prompts - -> **Tool**: Figma First Draft (Shift+I in Figma) -> **Style**: Smart Notification Intelligence Center, Material Design 3 -> **Format**: Natural language prompts optimized for Figma AI - ---- - -## How to Use - -1. Open Figma -> Create new design file -2. Press `Shift + I` or click "Actions" -> "First Draft" -3. Copy each prompt below -4. Generate -> Iterate -> Refine - ---- - -## Screen 1: Smart Inbox (Main View) - -``` -Design a smart AI-prioritized notification inbox for a fintech banking app inspired by Superhuman, Slack, and Monzo. - -At the top, show a back arrow with "Notifications" title and a bell icon with notification badge and settings gear on the right. - -Add a Focus Mode toggle card with moon icon, "Focus Mode" text with OFF switch, and "Pause non-urgent notifications" subtitle. - -Create a category tab bar with four tabs: Priority (3) selected with gradient, All (12), Actions (2), and Offers (4). Each tab shows its count. - -Add a priority banner card with purple gradient background showing a target icon with "3 items need your attention" and "Tap to view priority notifications" subtitle. - -Create a TODAY section header with "Mark all read" link on the right. - -Display notification cards with different priority levels: - -First card (Urgent): Warning icon with red "URGENT" badge, "Loan Payment Due Soon" title, "Your payment of $250.00 is due in 3 days" body, a gradient "Pay Now - $250" primary button, and "Set Reminder" and "View Loan" secondary buttons. - -Second card (Deposit): Money icon with green "DEPOSIT" badge, "Payment Received!" title, "You received $1,500.00 from ABC Corp" with account destination, and "View Account" and "Say Thanks" buttons. - -Third card (Security): Lock icon with amber "REVIEW" badge, "Security Alert" title, "New login from iPhone 15 Pro in NYC", with "That's Me" checkmark button and red "Not Me" danger button. - -Add a YESTERDAY section with grouped notification cards: "Transaction Updates (3)" and "Special Offers (2)" each with chevron to expand. - -At the bottom, add an insights card: "View your notification insights →" with "You check notifications 8x/day on average". - -Style it like Superhuman's email prioritization with smart AI grouping. -``` - ---- - -## Screen 2: Priority View (Urgent Items) - -``` -Design a priority inbox showing only high-importance notifications requiring action. - -Show a back arrow with "Priority Inbox" title. - -Create the same category tabs with Priority selected. - -Add a priority banner with gradient background, lightning bolt icon, "Priority items need your attention", and "These won't auto-dismiss" subtitle. - -Create a "REQUIRES ACTION" section header. - -Design an urgent payment card with: red "URGENT" badge at the top, warning icon, "Loan Payment Due Soon" title, a progress bar showing 75% of time remaining, "Due in 3 days" and "Amount: $250.00" details, warning text "Late fee if unpaid: $25.00", a gradient "Pay Now - $250.00" primary button, and "Remind Tomorrow" and "Schedule Payment" secondary buttons. - -Add a security review card with: amber "REVIEW NEEDED" badge, lock icon, "New Device Login" title, "iPhone 15 Pro · New York, NY" and "Today at 2:34 PM" details, and two buttons: checkmark "That's Me" and red "Report Suspicious". - -Add an action suggested card with: orange "ACTION SUGGESTED" badge, clipboard icon, "Complete Your Profile" title, "Add phone number for 2FA security" and "Progress: 80% complete" text, and a "Complete Now" button. - -At the bottom, add an achievement teaser with sparkle icon: "Clear all priority items to unlock 'Inbox Zero' achievement badge!" - -Make it feel urgent yet manageable with clear action hierarchy. -``` - ---- - -## Screen 3: Notification Detail (Expanded View) - -``` -Design an expanded notification detail screen with rich context and AI insights. - -Show a back arrow with just a menu icon on the right. - -Create a hero card with purple gradient background showing a large money/success icon, "Payment Received!" as the title, "+$1,500.00" prominently, and "Today at 10:34 AM" timestamp. - -Add a description section: "You received a payment from ABC Corporation. The funds have been deposited into your account." - -Create a Transaction Details card with key-value pairs separated by dividers: From "ABC Corporation", To "Savings Account ****4521", Amount "$1,500.00", Reference "SALARY-DEC-2025", Transaction ID "TXN-789456123". - -Add an AI Insights section with header and three insight items: lightbulb icon "This is your regular monthly salary deposit from ABC Corporation", chart icon "Your income this month: $1,500 (same as last)", and target icon "Suggested: Move $300 to Emergency Fund" with "(You typically save 20% of salary)" subtitle. - -Create a Quick Actions section with: a gradient "View Account" primary button, and a 2x2 grid of outline buttons: "Quick Transfer", "Download PDF", "Share Receipt", "Add Category". - -Add a notification preference card at the bottom: bell icon with "Get notified for future payments from ABC Corp?" and three options: [Always] [Ask me] [Never]. - -Make it comprehensive with actionable AI-powered insights. -``` - ---- - -## Screen 4: Focus Mode Active - -``` -Design a focus mode active screen showing the user is in do-not-disturb mode. - -Show a back arrow with "Focus Mode" title and settings icon. - -Create a hero card with purple gradient background, large moon icon with "FOCUS" badge, "Focus Mode Active" title, and "Only urgent notifications will come through" subtitle. - -Add a large countdown timer section: "2:45:30" in big text, "remaining" label below, and "Ends at 6:00 PM". - -Create a "DURING FOCUS MODE" section showing what gets through and what's silenced. Use checkmarks (green) for: "Security alerts - Will notify", "Urgent payment reminders - Will notify", "Large transactions (>$500) - Will notify". Use X marks (red) for: "Marketing & promotions - Silenced", "Account updates - Silenced", "Weekly digests - Silenced". - -Add a "PAUSED NOTIFICATIONS" section: "3 notifications are waiting" with a list showing "Special Offers (2)" and "Weekly Summary (1)". Add text "These will appear when Focus Mode ends". - -Include two action buttons at the bottom: "End Focus Mode Early" as outline button, and "Extend by 1 Hour" as outline button. - -Make it feel calm and focused like a digital wellness feature. -``` - ---- - -## Screen 5: Daily Digest - -``` -Design a daily digest screen summarizing the day's notification activity. - -Show a back arrow with "Daily Digest" title and "Dec 30, 2025" date on the right. - -Create a hero card with gradient background, calendar icon, and "Your Day at a Glance" header. - -Add a "MONEY IN & OUT" section with two stat cards side by side: "Money In" showing "+$1,650.00" in green with "2 transactions", and "Money Out" showing "-$342.50" in red with "5 transactions". Below both, show "Net: +$1,307.50" with sparkle emoji. - -Create a "KEY HIGHLIGHTS" section with three highlight cards: money icon with "$1,500.00 from ABC Corporation" for salary, warning icon with "$250.00 due in 3 days" with Pay Now and Set Reminder buttons, and lock icon with "New device login confirmed as you". - -Add a "SPENDING BY CATEGORY" section with horizontal bar chart showing: Shopping (longest bar) $189.99, Food & Dining (medium) $87.50, Transportation (short) $45.00, Subscriptions (shortest) $20.01. - -Create a "SMART INSIGHTS" section with two insights: lightbulb icon "You spent 15% less on food today than your daily average. Keep it up!", and target icon "Suggested: Set aside $150 for emergency fund to maintain your 20% savings rate". - -Add a "View All 12 Notifications" outline button. - -At the bottom, show "Digest delivered daily at 8:00 PM" with a [Change] link. - -Make it feel like a helpful daily financial briefing. -``` - ---- - -## Screen 6: Notification Analytics - -``` -Design a notification analytics screen showing engagement patterns and habits. - -Show a back arrow with "Notification Insights" title and settings icon. - -Create a notification health score card showing "Your Notification Health" header, a large circular progress indicator at 92% with "HEALTHY" badge, and "You're in control of your alerts!" message. - -Add a "THIS WEEK" section with a bar chart showing daily notification volumes from Monday to Saturday with varying heights. Below, show "Total: 84 notifications · Avg: 12/day". - -Create an "ENGAGEMENT STATS" section with key metrics: Received "84", Opened "72 (86%)", Acted On "28 (33%)", Dismissed "12 (14%)", Avg Response "4.2 min". - -Add a "NOTIFICATION BREAKDOWN" section with a pie or pyramid chart showing: Transactions 45%, Alerts 25%, Security 18%, Promos 12%. - -Create an "ACHIEVEMENTS" section with badge cards: trophy "Inbox Zero Champion" with checkmark "Earned 3x this week", fire "Quick Responder" with progress bar at 98%, and target "Action Taker" with "28 actions this week". - -Add a tip card at the bottom with lightbulb icon: "Enable daily digest to reduce interruptions by 40%" with an "Enable Daily Digest" button. - -Make it feel like a personal productivity dashboard. -``` - ---- - -## Screen 7: Smart Settings - -``` -Design an AI-powered notification settings screen with learning capabilities. - -Show a back arrow with "Notification Settings" title. - -Create a Smart Learning banner with gradient background, brain icon, "Smart Learning [ENABLED]" toggle, and "AI learns your preferences over time" description. - -Add a "PRIORITY SETTINGS" section with three priority levels. High Priority (red dot, "Always notify"): checkboxes for Security alerts, Payment due reminders, Large transactions (>$500), Failed transactions. Medium Priority (amber dot, "Silent during focus"): checkboxes for Incoming payments, Transfer confirmations, Loan updates. Low Priority (gray dot, "Digest only"): circles for Marketing promotions, Feature announcements, Weekly summaries. - -Create a "DELIVERY PREFERENCES" section with toggle rows: Push Notifications [ON] with "Sound, vibration, and banner" description, Email Notifications [ON] with "Important alerts and weekly digest", SMS Alerts [OFF] with "Security and urgent only". - -Add a "SMART FEATURES" section with toggles: Smart Grouping [ON] "Bundle similar notifications together", Daily Digest [ON] "Delivered at 8:00 PM [Change]", Quiet Hours [ON] "10:00 PM - 7:00 AM [Change]" with note about high priority, AI Suggestions [ON] "Smart action recommendations". - -Create a "NOTIFICATION CHANNELS" section with toggle rows and chevrons: Transactions [ON], Security [ON], Loan & Payment Reminders [ON], Offers & Promotions [OFF], Account Updates [ON], Savings Goals [ON]. - -Add a "Reset to Default Settings" text button at the bottom. - -Make it comprehensive yet organized with clear priority hierarchy. -``` - ---- - -## Screen 8: Grouped Notifications - -``` -Design a grouped notifications screen showing bundled transaction updates. - -Show a back arrow with "Transaction Updates" title and "12/30" date. - -Add a summary card with package icon: "5 transactions today" and "Net: -$342.50". - -Create batch action buttons: [Select All] and [Mark All Read]. - -Display individual transaction notification cards, each with: checkbox circle, merchant icon, merchant name, time, description, amount in red, category and payment method details. Include: - -Amazon: cart icon, 11:23 AM, "Electronics purchase", -$189.99, Shopping · Credit Card ****8765 - -Netflix: movie icon, 8:00 AM, "Monthly subscription", -$15.99, Subscriptions · Auto-payment, with blue "Recurring" badge - -Uber: car icon, 7:45 AM, "Morning commute", -$24.50, Transportation · Debit Card ****4521 - -Starbucks: coffee icon, 7:15 AM, "Coffee & breakfast", -$12.50, Food & Dining · Apple Pay - -Spotify: music icon, 12:00 AM, "Premium subscription", -$9.99, Subscriptions · Auto-payment, with "Recurring" badge - -Add an insight card with lightbulb: "You have 2 subscriptions in this group", "Total: $25.98/month", with "Review Subscriptions" button. - -Include batch action buttons at the bottom: "Delete Selected" and "Archive Group". - -Make it easy to manage multiple related notifications at once. -``` - ---- - -## Screen 9: Empty State (Achievement Unlocked) - -``` -Design a gamified empty state celebrating inbox zero achievement. - -Keep the header with "Notifications" title, bell and settings icons. - -Show the category tabs with all counts at (0). - -Create a centered celebration card with: trophy icon surrounded by sparkles, "INBOX ZERO ACHIEVED!" badge, "All Caught Up!" headline, "You've cleared all notifications." description, and "Take a moment to celebrate!" with party emoji. - -Add a streak widget with fire icon: "Current Streak: 5 days", "You've reached inbox zero 5 days in a row! Keep it going!", and a week grid showing Monday through Friday with checkmarks and Saturday-Sunday as empty circles. - -Include supportive text: "We'll notify you when something important happens with your accounts." - -Add two action buttons: "View Notification Insights" as gradient primary button, and "Manage Settings" as outline secondary button. - -Make it feel celebratory and rewarding, not empty. -``` - ---- - -## Screen 10: Loading State - -``` -Design a loading skeleton state for the notification inbox. - -Keep the header with "Notifications" title and icons visible. - -Show shimmer placeholders for: the Focus Mode toggle card as a rectangle, the four category tabs as pill shapes. - -Create notification card skeletons with: a 48dp circular icon placeholder, two-line title shimmer, three-line content shimmer, and two button placeholders. - -Repeat for three notification cards. - -Use a gradient shimmer animation sweeping from light gray to white and back, with 1500ms duration on infinite loop. - -Make it feel like content is actively loading. -``` - ---- - -## Component Prompts - -### Priority Notification Card -``` -Design a priority notification card with action buttons. - -Create a card with subtle shadow and rounded corners. - -At the top, show a colored priority badge: red "URGENT", green "DEPOSIT", or amber "REVIEW". - -Add a 48dp icon on the left with a colored ring matching priority. - -Show the notification title in medium weight, body text in regular gray, and optional details like amount or time. - -Include a gradient primary action button and one or two outline secondary buttons. - -Add swipe gestures: left to archive, right to snooze. -``` - -### Focus Mode Toggle -``` -Design a focus mode toggle card. - -Create a card about 64dp tall with subtle border. - -Show a moon icon on the left. - -Add "Focus Mode" as the title with "Pause non-urgent notifications" as subtitle. - -Place a toggle switch on the right. - -When active, add a subtle gradient border glow and change the moon icon to filled. -``` - -### Notification Channel Row -``` -Design a notification channel settings row. - -Show a category icon on the left. - -Display the channel name with current state. - -Add a toggle switch on the right. - -Include a chevron for expanded settings. - -Disabled channels should appear grayed out. -``` - ---- - -## Tips for Figma First Draft - -1. **Iterate**: Generate once, then refine with follow-up prompts -2. **Colors**: Use "#667EEA to #764BA2" for primary gradient -3. **Reference**: Say "like Superhuman" or "Slack notifications" for context -4. **Priority**: Emphasize visual hierarchy with color-coded badges -5. **Gamification**: Include achievements and streaks -6. **Responsive**: Mention "393px width for mobile" for correct sizing - ---- - -## After Generation - -1. Review generated designs for consistency -2. Create a color style library -3. Build component variants for priority states -4. Add prototype connections for swipe actions -5. Export and update `FIGMA_LINKS.md` diff --git a/claude-product-cycle/design-spec-layer/features/notification/mockups/PROMPTS_STITCH.md b/claude-product-cycle/design-spec-layer/features/notification/mockups/PROMPTS_STITCH.md deleted file mode 100644 index 693422ed1..000000000 --- a/claude-product-cycle/design-spec-layer/features/notification/mockups/PROMPTS_STITCH.md +++ /dev/null @@ -1,563 +0,0 @@ -# Notifications - Google Stitch Prompts - -> **Tool**: [Google Stitch](https://stitch.withgoogle.com) -> **Style**: Material Design 3, Smart Notification Intelligence Center -> **Format**: Copy each prompt block directly into Stitch - ---- - -## Design System Reference - -``` -Primary Gradient: #667EEA -> #764BA2 -Secondary Gradient: #11998E -> #38EF7D -Success/Credit: #00D09C -Error/Debit: #FF4757 -Warning/Urgent: #FFB800 -Text Primary: #1F2937 -Text Secondary: #6B7280 -Surface: #FFFFFF -Screen Size: 393 x 852 pixels (Android) -``` - ---- - -## Screen 1: Smart Inbox (Main View) - -``` -Mobile smart notification inbox, Material Design 3, fintech, 393x852px - -Top Bar: -- Back arrow, "Notifications" title -- Bell icon with badge, settings icon - -Focus Mode Toggle: -- Moon icon "Focus Mode" with [OFF] switch -- "Pause non-urgent notifications" subtitle - -Category Tabs: -- Priority (3) selected gradient, All (12), Actions (2), Offers (4) - -Priority Banner: -- Primary gradient card -- Target icon "3 items need your attention" -- "Tap to view priority notifications" - -Section Header: -- "TODAY" with "Mark all read" link - -Notification Cards: - -Card 1 - Urgent: -- Warning icon with red URGENT badge -- "Loan Payment Due Soon" title -- "Your payment of $250.00 is due in 3 days" -- Gradient "Pay Now - $250" button -- Secondary buttons: "Set Reminder", "View Loan" - -Card 2 - Deposit: -- Money icon with green DEPOSIT badge -- "Payment Received!" title -- "You received $1,500.00 from ABC Corp" -- "→ Savings Account ****4521" -- Buttons: "View Account", "Say Thanks" - -Card 3 - Security: -- Lock icon with amber REVIEW badge -- "Security Alert" title -- "New login from iPhone 15 Pro in NYC" -- Buttons: "That's Me", "Not Me" (red) - -Section Header: -- "YESTERDAY · 5 notifications" - -Grouped Notification Cards: -- "Transaction Updates (3)" with chevron -- "Special Offers (2)" with chevron - -Insights Card: -- Chart icon "View your notification insights →" -- "You check notifications 8x/day on average" -``` - ---- - -## Screen 2: Priority View (Urgent Items) - -``` -Mobile priority inbox, Material Design 3, fintech, 393x852px - -Top Bar: -- Back arrow, "Priority Inbox" title -- Bell, settings icons - -Category Tabs: -- Priority (3) selected - -Priority Banner: -- Gradient background -- Lightning icon "Priority items need your attention" -- "These won't auto-dismiss" - -Section Header: -- "REQUIRES ACTION" - -Urgent Card: -- Red URGENT badge -- Warning icon "Loan Payment Due Soon" -- Progress bar: 75% countdown -- "Due in 3 days", "Amount: $250.00" -- "Late fee if unpaid: $25.00" warning -- Gradient "Pay Now - $250.00" button -- Secondary: "Remind Tomorrow", "Schedule Payment" - -Review Card: -- Amber REVIEW NEEDED badge -- Lock icon "New Device Login" -- "iPhone 15 Pro · New York, NY" -- "Today at 2:34 PM" -- Buttons: "That's Me" checkmark, "Report Suspicious" red - -Action Card: -- Orange ACTION SUGGESTED badge -- Clipboard icon "Complete Your Profile" -- "Add phone number for 2FA security" -- "Progress: 80% complete" -- "Complete Now" button - -Achievement Teaser: -- Sparkle icon -- "Clear all priority items to unlock" -- "Inbox Zero achievement badge!" -``` - ---- - -## Screen 3: Notification Detail (Expanded View) - -``` -Mobile notification detail, Material Design 3, fintech, 393x852px - -Top Bar: -- Back arrow, menu icon right - -Hero Card: -- Primary gradient background -- Large money icon with "SUCCESS" badge -- "Payment Received!" title -- "+$1,500.00" large amount -- "Today at 10:34 AM" - -Description: -- "You received a payment from ABC Corporation." -- "The funds have been deposited into your account." - -Transaction Details Card: -- Key-value pairs: - - From: ABC Corporation - - To: Savings Account ****4521 - - Amount: $1,500.00 - - Reference: SALARY-DEC-2025 - - Transaction ID: TXN-789456123 - -AI Insights Card: -- "AI INSIGHTS" header -- Lightbulb: "This is your regular monthly salary deposit" -- Chart: "Your income this month: $1,500 (same as last)" -- Target: "Suggested: Move $300 to Emergency Fund" -- "(You typically save 20% of salary)" - -Quick Actions: -- Gradient "View Account" button -- Row: "Quick Transfer", "Download PDF" -- Row: "Share Receipt", "Add Category" - -Notification Preference: -- Bell icon "Get notified for future payments from ABC Corp?" -- Options: [Always] [Ask me] [Never] -``` - ---- - -## Screen 4: Focus Mode Active - -``` -Mobile focus mode active, Material Design 3, 393x852px - -Top Bar: -- Back arrow, "Focus Mode" title, settings icon - -Hero Card: -- Primary gradient background -- Large moon icon with "FOCUS" badge -- "Focus Mode Active" title -- "Only urgent notifications will come through" - -Countdown Timer: -- Large centered "2:45:30" countdown -- "remaining" label -- "Ends at 6:00 PM" - -During Focus Mode Section: -- "DURING FOCUS MODE" header -- Checklist with states: - - Green check: Security alerts - Will notify - - Green check: Urgent payment reminders - Will notify - - Green check: Large transactions (>$500) - Will notify - - Red X: Marketing & promotions - Silenced - - Red X: Account updates - Silenced - - Red X: Weekly digests - Silenced - -Paused Notifications: -- "PAUSED NOTIFICATIONS" header -- "3 notifications are waiting" -- List: "Special Offers (2)", "Weekly Summary (1)" -- "These will appear when Focus Mode ends" - -Action Buttons: -- "End Focus Mode Early" outline button -- "Extend by 1 Hour" outline button -``` - ---- - -## Screen 5: Daily Digest - -``` -Mobile daily digest, Material Design 3, fintech, 393x852px - -Top Bar: -- Back arrow, "Daily Digest" title -- Date "Dec 30, 2025" - -Hero Card: -- Gradient background -- Calendar icon "Your Day at a Glance" - -Money In & Out Section: -- "MONEY IN & OUT" header -- Two stat cards side by side: - - Money In: "+$1,650.00", "2 transactions", green - - Money Out: "-$342.50", "5 transactions", red -- "Net: +$1,307.50" with sparkle - -Key Highlights: -- "KEY HIGHLIGHTS" header -- Salary: money icon, "$1,500.00 from ABC Corporation" -- Payment Due: warning icon, "$250.00 due in 3 days" with buttons -- Security: lock icon, "New device login confirmed as you" - -Spending by Category: -- "SPENDING BY CATEGORY" header -- Horizontal bar chart: - - Shopping: longest bar, $189.99 - - Food & Dining: medium bar, $87.50 - - Transportation: short bar, $45.00 - - Subscriptions: shortest bar, $20.01 - -Smart Insights: -- "SMART INSIGHTS" header -- Lightbulb: "You spent 15% less on food today" -- Target: "Suggested: Set aside $150 for emergency fund" - -View All Button: -- "View All 12 Notifications" outline - -Digest Settings: -- Clock icon "Digest delivered daily at 8:00 PM [Change]" -``` - ---- - -## Screen 6: Notification Analytics - -``` -Mobile notification analytics, Material Design 3, fintech, 393x852px - -Top Bar: -- Back arrow, "Notification Insights" title, settings - -Health Score Card: -- "Your Notification Health" -- Large circular progress: 92% HEALTHY -- "You're in control of your alerts!" - -Weekly Activity Chart: -- "THIS WEEK" header -- Bar chart Mon-Sat with varying heights -- "Total: 84 notifications · Avg: 12/day" - -Engagement Stats: -- "ENGAGEMENT STATS" header -- Key-value list: - - Received: 84 - - Opened: 72 (86%) - - Acted On: 28 (33%) - - Dismissed: 12 (14%) - - Avg Response: 4.2 min - -Notification Breakdown: -- "NOTIFICATION BREAKDOWN" header -- Pie/pyramid chart: - - Transactions: 45% - - Alerts: 25% - - Security: 18% - - Promos: 12% - -Achievements: -- "ACHIEVEMENTS" header -- Trophy: "Inbox Zero Champion" - Earned 3x -- Fire: "Quick Responder" - 98% progress -- Target: "Action Taker" - 28 actions - -Optimization Tip: -- Lightbulb "Enable daily digest to reduce interruptions by 40%" -- "Enable Daily Digest" button -``` - ---- - -## Screen 7: Smart Settings - -``` -Mobile notification settings, Material Design 3, fintech, 393x852px - -Top Bar: -- Back arrow, "Notification Settings" title - -Smart Learning Banner: -- Gradient background -- Brain icon "Smart Learning [ENABLED]" -- "AI learns your preferences over time" - -Priority Settings: -- "PRIORITY SETTINGS" header -- High Priority (Always notify): - - Check: Security alerts - - Check: Payment due reminders - - Check: Large transactions (>$500) - - Check: Failed transactions -- Medium Priority (Silent during focus): - - Check: Incoming payments - - Check: Transfer confirmations -- Low Priority (Digest only): - - Circle: Marketing promotions - - Circle: Feature announcements - -Delivery Preferences: -- "DELIVERY PREFERENCES" header -- Push Notifications: [ON] with description -- Email Notifications: [ON] with description -- SMS Alerts: [OFF] with description - -Smart Features: -- "SMART FEATURES" header -- Smart Grouping: [ON] -- Daily Digest: [ON] at 8:00 PM [Change] -- Quiet Hours: [ON] 10:00 PM - 7:00 AM -- AI Suggestions: [ON] - -Notification Channels: -- "NOTIFICATION CHANNELS" header -- List with toggles and chevrons: - - Transactions [ON] - - Security [ON] - - Loan & Payment Reminders [ON] - - Offers & Promotions [OFF] - - Account Updates [ON] - - Savings Goals [ON] - -Reset Button: -- "Reset to Default Settings" text button -``` - ---- - -## Screen 8: Grouped Notifications - -``` -Mobile grouped notifications, Material Design 3, fintech, 393x852px - -Top Bar: -- Back arrow, "Transaction Updates" title -- Date "12/30" - -Summary Card: -- Package icon "5 transactions today" -- "Net: -$342.50" - -Batch Actions: -- [Select All] [Mark All Read] - -Transaction Cards: - -Amazon: -- Cart icon, "Amazon", "11:23 AM" -- "Electronics purchase" -- "-$189.99" -- "Shopping · Credit Card ****8765" - -Netflix: -- Movie icon, "Netflix", "8:00 AM" -- "Monthly subscription" -- "-$15.99" -- "Subscriptions · Auto-payment" -- Recurring badge - -Uber: -- Car icon, "Uber", "7:45 AM" -- "Morning commute" -- "-$24.50" -- "Transportation · Debit Card ****4521" - -Starbucks: -- Coffee icon, "Starbucks", "7:15 AM" -- "Coffee & breakfast" -- "-$12.50" -- "Food & Dining · Apple Pay" - -Spotify: -- Music icon, "Spotify", "12:00 AM" -- "Premium subscription" -- "-$9.99" -- "Subscriptions · Auto-payment" -- Recurring badge - -Subscription Insight: -- Lightbulb "You have 2 subscriptions in this group" -- "Total: $25.98/month" -- "Review Subscriptions" button - -Batch Action Buttons: -- "Delete Selected", "Archive Group" -``` - ---- - -## Screen 9: Empty State (Achievement Unlocked) - -``` -Mobile notifications empty state, Material Design 3, 393x852px - -Top Bar: -- Back arrow, "Notifications" title -- Bell, settings icons - -Category Tabs: -- All showing (0) for each category - -Achievement Card: -- Centered trophy icon with sparkles -- "INBOX ZERO ACHIEVED!" -- "All Caught Up!" -- "You've cleared all notifications." -- "Take a moment to celebrate!" with party emoji - -Streak Widget: -- Fire icon "Current Streak: 5 days" -- "You've reached inbox zero 5 days in a row!" -- Week grid: Mon-Fri checked, Sat-Sun empty - -Info Text: -- "We'll notify you when something important happens with your accounts." - -Action Buttons: -- "View Notification Insights" gradient -- "Manage Settings" outline -``` - ---- - -## Screen 10: Loading State - -``` -Mobile notifications loading, Material Design 3, 393x852px - -Top Bar: -- Back arrow, "Notifications" title -- Bell, settings icons - -Focus Mode Skeleton: -- Shimmer rectangle for toggle card - -Tab Skeleton: -- Four shimmer pill shapes - -Notification Skeletons: -- Three notification card skeletons: - - 48dp icon placeholder - - Two-line title shimmer - - Three-line content shimmer - - Two button placeholders - -Shimmer Animation: -- Gradient sweep: #F3F4F6 → #FFFFFF → #F3F4F6 -- Duration: 1500ms, infinite loop -``` - ---- - -## Components - -### NotificationCard -``` -Notification card component, Material Design 3: -- Height: variable, min 100dp -- Icon: 48dp with priority color ring -- Badge: URGENT (red), DEPOSIT (green), REVIEW (amber) -- Title: 16sp Medium -- Body: 14sp Regular -- Actions: gradient primary, outline secondary -- Swipe actions: archive, delete -``` - -### PriorityBadge -``` -Priority badge component, Material Design 3: -- Height: 24dp pill shape -- URGENT: red background, white text -- REVIEW: amber background, dark text -- DEPOSIT: green background, white text -- ACTION: orange background, white text -``` - -### FocusModeToggle -``` -Focus mode toggle, Material Design 3: -- Height: 64dp card -- Moon icon left -- "Focus Mode" title -- "Pause non-urgent" subtitle -- Toggle switch right -- Active: gradient border glow -``` - -### DigestSummaryCard -``` -Daily digest summary, Material Design 3: -- Two-column layout -- Money In: green icon, amount, count -- Money Out: red icon, amount, count -- Net: centered, sparkle if positive -- Gradient divider between sections -``` - -### NotificationInsightCard -``` -Notification insight card, Material Design 3: -- Height: 56dp -- Icon: chart, lightbulb, or target -- Insight text: 14sp -- Optional action link -- Subtle gradient background -``` - ---- - -## Quick Start - -1. Open [stitch.withgoogle.com](https://stitch.withgoogle.com) -2. Create project "Mifos Mobile - Notifications" -3. Copy each screen prompt -> Generate -4. Generate components separately for reuse -5. Export all to Figma when done diff --git a/claude-product-cycle/design-spec-layer/features/notification/mockups/dummy/01-notification-center.png b/claude-product-cycle/design-spec-layer/features/notification/mockups/dummy/01-notification-center.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/notification/mockups/dummy/02-notification-detail.png b/claude-product-cycle/design-spec-layer/features/notification/mockups/dummy/02-notification-detail.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/notification/mockups/dummy/03-notification-settings.png b/claude-product-cycle/design-spec-layer/features/notification/mockups/dummy/03-notification-settings.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/notification/mockups/dummy/04-notification-empty.png b/claude-product-cycle/design-spec-layer/features/notification/mockups/dummy/04-notification-empty.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/notification/mockups/dummy/05-push-permission.png b/claude-product-cycle/design-spec-layer/features/notification/mockups/dummy/05-push-permission.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/passcode/API.md b/claude-product-cycle/design-spec-layer/features/passcode/API.md deleted file mode 100644 index 9df908e86..000000000 --- a/claude-product-cycle/design-spec-layer/features/passcode/API.md +++ /dev/null @@ -1,216 +0,0 @@ -# Passcode - API Reference - -## Overview - -> **Important**: The Passcode feature is a **local-only feature** with **no API calls** to the backend server. All passcode data is stored and validated locally on the device. - ---- - -## No Backend API Required - -The Passcode feature operates entirely offline and does not communicate with any remote server. This design choice provides: - -1. **Faster Authentication**: No network latency for passcode verification -2. **Offline Capability**: Works without internet connectivity -3. **Privacy**: Passcode never transmitted over the network -4. **Security**: Reduces attack surface by keeping sensitive data local - ---- - -## Local Storage Mechanism - -### Storage Library -The feature uses the `multiplatform-settings` library (com.russhwolf.settings) for cross-platform local storage. - -### Data Model - -```kotlin -@Serializable -data class PasscodePreferencesProto( - val passcode: String, - val hasPasscode: Boolean, -) { - companion object { - val DEFAULT = PasscodePreferencesProto( - passcode = "", - hasPasscode = false - ) - } -} -``` - -### Storage Key -```kotlin -private const val PASSCODE_INFO_KEY = "passcodeInfo" -``` - ---- - -## Data Access Layer - -### PasscodePreferencesDataSource - -Low-level data access for passcode preferences. - -```kotlin -class PasscodePreferencesDataSource( - private val settings: Settings, - private val dispatcher: CoroutineDispatcher, -) { - // Reactive streams for passcode data - val passcode: Flow - val hasPasscode: Flow - - // Update passcode settings - suspend fun updatePasscodeSettings(passcodePreferences: PasscodePreferencesProto) - - // Clear all passcode data - suspend fun clearInfo() -} -``` - -### PasscodeManager - -Higher-level manager with StateFlow caching. - -```kotlin -class PasscodeManager( - private val source: PasscodePreferencesDataSource, - dispatcher: CoroutineDispatcher, -) { - // Cached passcode value (eagerly shared) - val getPasscode: StateFlow - - // Whether a passcode is currently set - val hasPasscode: StateFlow - - // Save a new passcode - suspend fun savePasscode(passcode: String) - - // Clear the stored passcode - suspend fun clearPasscode() -} -``` - -### UserPreferencesRepository Integration - -The feature module uses `UserPreferencesRepository` from `core:datastore`: - -```kotlin -interface UserPreferencesRepository { - val passcode: Flow - suspend fun setPasscode(passcode: String) -} -``` - ---- - -## Storage Operations - -### Save Passcode - -**When**: After successful passcode confirmation (Set + Confirm match) - -```kotlin -// In PasscodeViewModel -userPreferencesRepository.setPasscode(confirm) - -// Internally calls -passcodeManager.savePasscode(passcode) - -// Which updates settings -settings.encodeValue( - key = PASSCODE_INFO_KEY, - serializer = PasscodePreferencesProto.serializer(), - value = PasscodePreferencesProto( - passcode = passcode, - hasPasscode = passcode.isNotEmpty() - ) -) -``` - -### Read Passcode - -**When**: On VerifyPasscodeScreen initialization - -```kotlin -// In VerifyPasscodeViewModel -userPreferencesRepository.passcode.collect { passcode -> - mutableStateFlow.update { - it.copy(storedPasscode = passcode) - } -} -``` - -### Clear Passcode - -**When**: User logs out or resets app - -```kotlin -passcodeManager.clearPasscode() - -// Which calls -settings.remove(PASSCODE_INFO_KEY) -``` - ---- - -## Platform-Specific Storage - -The `multiplatform-settings` library provides platform-specific implementations: - -| Platform | Storage Backend | -|----------|-----------------| -| Android | SharedPreferences | -| iOS | NSUserDefaults | -| Desktop (JVM) | Java Preferences API | -| Web (JS/WASM) | localStorage | - ---- - -## Security Considerations - -### Current Implementation -- Passcode is stored as plain text in preferences -- Validation is done by string comparison - -### Recommended Enhancements -1. **Hash the passcode** before storage (e.g., using bcrypt or PBKDF2) -2. **Encrypt preferences** using platform-specific secure storage -3. **Add rate limiting** for failed attempts -4. **Implement lockout** after multiple failed attempts -5. **Consider biometric** integration as alternative - ---- - -## Error Responses - -Since this is a local-only feature, there are no HTTP error responses. Local errors include: - -| Error Type | Cause | Handling | -|------------|-------|----------| -| Storage Read Error | Corrupted preferences | Return default values | -| Storage Write Error | Disk full or permissions | Show error dialog, retry | -| Serialization Error | Schema mismatch | Clear and reset preferences | - ---- - -## API Summary - -| Operation | Layer | Method | Storage | -|-----------|-------|--------|---------| -| Set Passcode | PasscodeViewModel | setPasscode() | Local | -| Verify Passcode | VerifyPasscodeViewModel | compare with stored | Local | -| Get Passcode | UserPreferencesRepository | passcode flow | Local | -| Clear Passcode | PasscodeManager | clearPasscode() | Local | - ---- - -## Related Files - -| File | Purpose | -|------|---------| -| `libs/mifos-passcode/src/commonMain/kotlin/org/mifos/library/passcode/data/PasscodePreferencesDataSource.kt` | Low-level storage access | -| `libs/mifos-passcode/src/commonMain/kotlin/org/mifos/library/passcode/data/PasscodeManager.kt` | High-level passcode operations | -| `libs/mifos-passcode/src/commonMain/kotlin/org/mifos/library/passcode/model/PasscodePreferencesProto.kt` | Data model | -| `core/datastore/src/commonMain/kotlin/org/mifos/mobile/core/datastore/UserPreferencesRepository.kt` | Repository interface | diff --git a/claude-product-cycle/design-spec-layer/features/passcode/MOCKUP.md b/claude-product-cycle/design-spec-layer/features/passcode/MOCKUP.md deleted file mode 100644 index 9ab68df74..000000000 --- a/claude-product-cycle/design-spec-layer/features/passcode/MOCKUP.md +++ /dev/null @@ -1,2002 +0,0 @@ -# Passcode - UI Mockups v2.0 - -> **Design Pattern**: Secure Gateway Experience -> **Design Style**: 2025 Fintech (Biometric-First + Security Gamification) -> **Gradient Theme**: Primary Purple-Blue (#667EEA → #764BA2) -> **Version**: 2.0 - Major redesign with 2025 security patterns -> **Last Updated**: 2025-12-30 - ---- - -## Design Philosophy - -The Passcode feature transforms from a simple PIN entry to a **Secure Gateway Experience** - a trust-building security layer that makes users feel protected while maintaining seamless access. Key innovations: - -1. **Biometric-First** - Biometrics are primary, PIN is fallback -2. **Security Health Visualization** - Gamified security score -3. **Trust Indicators** - Visual feedback on authentication strength -4. **Adaptive Security** - Context-aware authentication levels -5. **Panic Mode** - Emergency protection feature - ---- - -## Table of Contents - -1. [Screen States](#screen-states) -2. [Component Breakdown](#component-breakdown) -3. [Interactions & Animations](#interactions--animations) -4. [Accessibility](#accessibility) -5. [Dark Mode Variant](#dark-mode-variant) - ---- - -## Screen States - -### 1. Secure Gateway - Biometric First (Default) - -Modern apps prioritize biometric authentication. PIN is the fallback. - -``` -+----------------------------------------------------------+ -| | -| [Status Bar - System Time, Battery, Signal] | -| | -+----------------------------------------------------------+ -| | -| | -| ┌──────────────┐ | -| │ │ | -| │ [Avatar] │ User Photo | -| │ 84dp │ or Initials | -| │ │ Gradient ring | -| │ Trust │ pulsing slowly | -| │ Ring │ #00D09C | -| │ │ | -| └──────────────┘ | -| | -| Welcome back, | -| Maria | -| ─────────── | -| 24sp / Bold / #1F2937 | -| | -| | -| ┌────────────────────────────────────────────────┐ | -| │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ | -| │░░ ░░│ | -| │░░ ┌────────────────────────────────┐ ░░│ | -| │░░ │ │ ░░│ | -| │░░ │ [ Fingerprint Icon ] │ ░░│ | -| │░░ │ 64dp │ ░░│ | -| │░░ │ │ ░░│ | -| │░░ │ Touch to Unlock │ ░░│ | -| │░░ │ │ ░░│ | -| │░░ └────────────────────────────────┘ ░░│ | -| │░░ ░░│ | -| │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ | -| └────────────────────────────────────────────────┘ | -| | -| Biometric Button: | -| Background: Gradient #667EEA → #764BA2 | -| Size: Full width - 32dp margin | -| Height: 120dp | -| Corner: 24dp | -| Shadow: 0 8 32 #667EEA@30% | -| Glow pulse animation | -| | -| | -| Use Passcode Instead | -| ──────────────────── | -| 14sp / Medium / #667EEA | -| | -| | -| ┌────────────────────────────────────────────────┐ | -| │ │ | -| │ 🛡 Security Score: 92/100 [Excellent] │ | -| │ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░░ Last login: 2h │ | -| │ │ | -| └────────────────────────────────────────────────┘ | -| | -| Security Chip: | -| Background: #00D09C@10% | -| Border: 1dp #00D09C@30% | -| Text: #00D09C | -| Corner: 12dp | -| | -+----------------------------------------------------------+ -``` - -**Visual Specifications:** - -| Element | Light Mode | Dark Mode | -|---------|------------|-----------| -| Background | #F8F9FA | #0D1117 | -| Avatar Ring | Gradient #667EEA → #764BA2 | Same | -| Trust Ring | #00D09C (pulsing) | #00D09C | -| Name Text | #1F2937 | #F0F6FC | -| Biometric Card | Gradient #667EEA → #764BA2 | Same | -| Biometric Icon | #FFFFFF | #FFFFFF | -| Link Text | #667EEA | #A78BFA | -| Security Score BG | #00D09C@10% | #00D09C@15% | -| Security Score Text | #00D09C | #00D09C | - ---- - -### 2. Face ID Variant (iOS) - -``` -+----------------------------------------------------------+ -| | -| [Status Bar] | -| | -+----------------------------------------------------------+ -| | -| | -| ┌──────────────┐ | -| │ │ | -| │ [Avatar] │ | -| │ + Trust │ | -| │ Ring │ | -| │ │ | -| └──────────────┘ | -| | -| Welcome back, | -| Maria | -| | -| | -| ┌────────────────────────────────────────────────┐ | -| │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ | -| │░░ ░░│ | -| │░░ ┌────────────────────────────────┐ ░░│ | -| │░░ │ │ ░░│ | -| │░░ │ ┌──────────┐ │ ░░│ | -| │░░ │ │ Face │ │ ░░│ | -| │░░ │ │ ID │ │ ░░│ | -| │░░ │ │ Icon │ │ ░░│ | -| │░░ │ │ 64dp │ │ ░░│ | -| │░░ │ └──────────┘ │ ░░│ | -| │░░ │ │ ░░│ | -| │░░ │ Look to Unlock │ ░░│ | -| │░░ │ │ ░░│ | -| │░░ └────────────────────────────────┘ ░░│ | -| │░░ ░░│ | -| │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ | -| └────────────────────────────────────────────────┘ | -| | -| | -| Use Passcode Instead | -| | -| | -| ┌────────────────────────────────────────────────┐ | -| │ 🛡 Security: Excellent Streak: 47 days ✨ │ | -| └────────────────────────────────────────────────┘ | -| | -+----------------------------------------------------------+ -``` - ---- - -### 3. Enter Passcode (Fallback Mode) - -PIN entry when biometric fails or user chooses passcode. - -``` -+----------------------------------------------------------+ -| | -| [Status Bar] | -| | -+----------------------------------------------------------+ -| | -| | -| ┌──────────────┐ | -| │ │ | -| │ [Security │ Gradient BG | -| │ Shield] │ #667EEA→#764BA2 | -| │ │ | -| │ + Key │ Subtle glow | -| │ Icon │ animation | -| │ │ | -| │ 80dp │ | -| │ │ | -| └──────────────┘ | -| | -| | -| Enter Passcode | -| ────────────── | -| 24sp / Bold | -| | -| Your 4-digit PIN to access your | -| account | -| ──────────────────────────────── | -| 14sp / Regular / Secondary | -| | -| | -| ┌───┐ ┌───┐ ┌───┐ ┌───┐ | -| │ │ │ │ │ │ │ │ | -| │ ○ │ │ ○ │ │ ○ │ │ ○ │ | -| │ │ │ │ │ │ │ │ | -| └───┘ └───┘ └───┘ └───┘ | -| | -| PIN Dots: 16dp diameter | -| Gap: 20dp | -| Border: 2dp #667EEA | -| | -| | -| ┌────────────────────────────────────┐ | -| │ [Fingerprint] Try Biometric │ | -| │ Instead │ | -| └────────────────────────────────────┘ | -| | -| Quick Biometric Chip: | -| Background: #667EEA@10% | -| Border: 1dp #667EEA@30% | -| Height: 40dp | -| Corner: 20dp | -| | -+----------------------------------------------------------+ -| | -| NUMERIC KEYPAD | -| | -| ┌────────────┐ ┌────────────┐ ┌────────────┐ | -| │ │ │ │ │ │ | -| │ 1 │ │ 2 │ │ 3 │ | -| │ │ │ ABC │ │ DEF │ | -| └────────────┘ └────────────┘ └────────────┘ | -| | -| ┌────────────┐ ┌────────────┐ ┌────────────┐ | -| │ │ │ │ │ │ | -| │ 4 │ │ 5 │ │ 6 │ | -| │ GHI │ │ JKL │ │ MNO │ | -| └────────────┘ └────────────┘ └────────────┘ | -| | -| ┌────────────┐ ┌────────────┐ ┌────────────┐ | -| │ │ │ │ │ │ | -| │ 7 │ │ 8 │ │ 9 │ | -| │ PQRS │ │ TUV │ │ WXYZ │ | -| └────────────┘ └────────────┘ └────────────┘ | -| | -| ┌────────────┐ ┌────────────┐ ┌────────────┐ | -| │ │ │ │ │ │ | -| │ [Bio] │ │ 0 │ │ [⌫] │ | -| │ Icon │ │ │ │ Backspace │ | -| └────────────┘ └────────────┘ └────────────┘ | -| | -| Key Size: 72dp x 72dp | -| Key BG: #F8F9FA | -| Key Pressed: #667EEA@15% | -| Number: 28sp Bold | -| Letters: 10sp Medium #9CA3AF | -| | -+----------------------------------------------------------+ -| | -| Forgot Passcode? | -| ──────────────── | -| 14sp / #667EEA / Underline | -| | -+----------------------------------------------------------+ -``` - ---- - -### 4. Passcode Entry - Partial Input - -Shows progressive PIN entry with satisfying fill animations. - -``` -+----------------------------------------------------------+ -| | -| [Status Bar] | -| | -+----------------------------------------------------------+ -| | -| ┌──────────────┐ | -| │ [Security │ | -| │ Shield] │ | -| └──────────────┘ | -| | -| Enter Passcode | -| | -| | -| ┌───┐ ┌───┐ ┌───┐ ┌───┐ | -| │ │ │ │ │ │ │ │ | -| │ ● │ │ ● │ │ ● │ │ ○ │ | -| │///│ │///│ │///│ │ │ | -| └───┘ └───┘ └───┘ └───┘ | -| | -| FILLED FILLED FILLED EMPTY | -| Scale Scale Scale Waiting | -| Anim Anim Anim | -| | -| [Each fill: Scale 0→1.2→1.0] | -| [Haptic: Light impact per digit] | -| [Gradient fill: #667EEA → #764BA2] | -| | -| | -| ┌────────────────────────────────────┐ | -| │ [Fingerprint] Try Biometric │ | -| └────────────────────────────────────┘ | -| | -+----------------------------------------------------------+ -| [Numeric Keypad] | -+----------------------------------------------------------+ -``` - -**Dot Animation Sequence:** -``` -Frame 1 (0ms): ○ ○ ○ ○ ← All empty -Frame 2 (100ms): ● ○ ○ ○ ← 1st fills with bounce -Frame 3 (200ms): ● ● ○ ○ ← 2nd fills with bounce -Frame 4 (300ms): ● ● ● ○ ← 3rd fills with bounce -Frame 5 (400ms): ● ● ● ● ← 4th fills, triggers validation -Frame 6 (600ms): [Success/Error animation] -``` - ---- - -### 5. Biometric Scanning State - -System biometric prompt with custom branded overlay. - -``` -+----------------------------------------------------------+ -| | -| [Dimmed Background - 60% Black Overlay] | -| | -| | -| | -| ╔════════════════════════════════════════════════════╗| -| ║ ║| -| ║ ┌─────────────────────┐ ║| -| ║ │ │ ║| -| ║ │ [Mifos Logo] │ ║| -| ║ │ │ ║| -| ║ └─────────────────────┘ ║| -| ║ ║| -| ║ ┌───────────────────────────┐ ║| -| ║ │ │ ║| -| ║ │ ╭─────────────────╮ │ ║| -| ║ │ │ │ │ ║| -| ║ │ │ [Fingerprint] │ │ Scan ║| -| ║ │ │ Icon │ │ Ring ║| -| ║ │ │ 64dp │ │ Pulse ║| -| ║ │ │ │ │ Anim ║| -| ║ │ │ SCANNING... │ │ ║| -| ║ │ │ │ │ ║| -| ║ │ ╰─────────────────╯ │ ║| -| ║ │ │ ║| -| ║ └───────────────────────────┘ ║| -| ║ ║| -| ║ Sign in to ║| -| ║ Mifos Mobile ║| -| ║ ║| -| ║ Confirm fingerprint to continue ║| -| ║ ║| -| ║ ║| -| ║ ┌────────────────────────────────────────────┐ ║| -| ║ │ │ ║| -| ║ │ Use Passcode │ ║| -| ║ │ │ ║| -| ║ └────────────────────────────────────────────┘ ║| -| ║ ║| -| ║ ┌────────────────────────────────────────────┐ ║| -| ║ │ │ ║| -| ║ │ Cancel │ ║| -| ║ │ │ ║| -| ║ └────────────────────────────────────────────┘ ║| -| ║ ║| -| ╚════════════════════════════════════════════════════╝| -| | -+----------------------------------------------------------+ -``` - ---- - -### 6. Create Passcode - Onboarding (Step 1/2) - -First-time passcode setup with security tips. - -``` -+----------------------------------------------------------+ -| | -| [← Back] Step 1 of 2 | -| | -+----------------------------------------------------------+ -| | -| ╔════════════════════════════════════════════════════╗| -| ║ PROGRESS BAR ║| -| ║ ║| -| ║ [████████████████████░░░░░░░░░░░░░░░░░░░░░░░░] ║| -| ║ 50% - Creating PIN ║| -| ║ ║| -| ╚════════════════════════════════════════════════════╝| -| | -| | -| ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ | -| ░ ░ | -| ░ ┌──────────────────────┐ ░ | -| ░ │░░░░░░░░░░░░░░░░░░░░░░│ ░ | -| ░ │░░ ░░│ ░ | -| ░ │░░ [+ Key] ░░│ ░ Create | -| ░ │░░ Icon ░░│ ░ Mode | -| ░ │░░ ░░│ ░ Icon | -| ░ │░░░░░░░░░░░░░░░░░░░░░░│ ░ | -| ░ └──────────────────────┘ ░ | -| ░ ░ | -| ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ | -| | -| | -| Create Your PIN | -| ─────────────── | -| 24sp / Bold | -| | -| Choose a memorable 4-digit code to | -| protect your account | -| ──────────────────────────────────── | -| 14sp / Regular / Secondary | -| | -| | -| ┌───┐ ┌───┐ ┌───┐ ┌───┐ | -| │ │ │ │ │ │ │ │ | -| │ ○ │ │ ○ │ │ ○ │ │ ○ │ | -| │ │ │ │ │ │ │ │ | -| └───┘ └───┘ └───┘ └───┘ | -| | -| | -| ┌────────────────────────────────────────────────┐ | -| │ │ | -| │ 💡 Tip: Avoid obvious patterns like 1234 │ | -| │ │ | -| └────────────────────────────────────────────────┘ | -| | -| Security Tip Card: | -| Background: #FFB800@10% | -| Border: 1dp #FFB800@30% | -| Text: #B8860B | -| Corner: 12dp | -| | -+----------------------------------------------------------+ -| [Numeric Keypad] | -+----------------------------------------------------------+ -``` - ---- - -### 7. Confirm Passcode (Step 2/2) - -``` -+----------------------------------------------------------+ -| | -| [← Back] Step 2 of 2 | -| | -+----------------------------------------------------------+ -| | -| ╔════════════════════════════════════════════════════╗| -| ║ PROGRESS BAR ║| -| ║ ║| -| ║ [████████████████████████████████████████░░░░░] ║| -| ║ 90% - Confirming PIN ║| -| ║ ║| -| ╚════════════════════════════════════════════════════╝| -| | -| | -| ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ | -| ░ ░ | -| ░ ┌──────────────────────┐ ░ | -| ░ │░░░░░░░░░░░░░░░░░░░░░░│ ░ | -| ░ │░░ ░░│ ░ | -| ░ │░░ [✓ Check] ░░│ ░ Confirm | -| ░ │░░ Icon ░░│ ░ Mode | -| ░ │░░ ░░│ ░ Icon | -| ░ │░░░░░░░░░░░░░░░░░░░░░░│ ░ | -| ░ └──────────────────────┘ ░ | -| ░ ░ | -| ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ | -| | -| | -| Confirm Your PIN | -| ──────────────── | -| 24sp / Bold | -| | -| Re-enter your 4-digit code to confirm | -| ───────────────────────────────────── | -| 14sp / Regular / Secondary | -| | -| | -| ┌───┐ ┌───┐ ┌───┐ ┌───┐ | -| │ │ │ │ │ │ │ │ | -| │ ● │ │ ● │ │ ○ │ │ ○ │ | -| │///│ │///│ │ │ │ │ | -| └───┘ └───┘ └───┘ └───┘ | -| | -| | -| ┌────────────────────────────────────────────────┐ | -| │ │ | -| │ 🔒 Your PIN will be stored securely │ | -| │ │ | -| └────────────────────────────────────────────────┘ | -| | -+----------------------------------------------------------+ -| [Numeric Keypad] | -+----------------------------------------------------------+ -``` - ---- - -### 8. PIN Mismatch Error (Confirm Step) - -``` -+----------------------------------------------------------+ -| | -| [← Back] Step 2 of 2 | -| | -+----------------------------------------------------------+ -| | -| ╔════════════════════════════════════════════════════╗| -| ║ [████████████████████████████████████░░░░░░░░░] ║| -| ║ 75% - PINs don't match ║| -| ╚════════════════════════════════════════════════════╝| -| | -| | -| ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ | -| ░ ░ | -| ░ ┌──────────────────────┐ ░ | -| ░ │XXXXXXXXXXXXXXXXXXXXXX│ ░ | -| ░ │XX XX│ ░ Error | -| ░ │XX [✗ X] XX│ ░ State | -| ░ │XX Icon XX│ ░ | -| ░ │XX XX│ ░ Red | -| ░ │XXXXXXXXXXXXXXXXXXXXXX│ ░ Tint | -| ░ └──────────────────────┘ ░ | -| ░ ░ | -| ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ | -| | -| | -| PINs Don't Match | -| ──────────────── | -| 24sp / Bold / #FF4757 | -| | -| Please re-enter your PIN to confirm | -| ──────────────────────────────────── | -| 14sp / Regular / Secondary | -| | -| | -| << SHAKE ANIMATION - Dots shake left/right >> | -| | -| ┌───┐ ┌───┐ ┌───┐ ┌───┐ | -| │XXX│ │XXX│ │XXX│ │XXX│ | -| │ ✗ │ │ ✗ │ │ ✗ │ │ ✗ │ | -| │XXX│ │XXX│ │XXX│ │XXX│ | -| └───┘ └───┘ └───┘ └───┘ | -| | -| Error State: | -| Border: 2dp #FF4757 | -| Fill: #FF4757@30% | -| Shake: translateX(-8, 8, -8, 8, 0) | -| Duration: 400ms | -| Haptic: Error | -| | -| | -| ┌────────────────────────────────────────────────┐ | -| │ │ | -| │ ⚠️ Cleared - Please try again │ | -| │ │ | -| └────────────────────────────────────────────────┘ | -| | -+----------------------------------------------------------+ -| [Numeric Keypad] | -+----------------------------------------------------------+ -``` - ---- - -### 9. Wrong Passcode Entry (Unlock Screen) - -``` -+----------------------------------------------------------+ -| | -| [Status Bar] | -| | -+----------------------------------------------------------+ -| | -| ┌──────────────┐ | -| │ [Security │ Red pulse | -| │ Shield] │ overlay | -| │ WARNING │ #FF4757@20% | -| └──────────────┘ | -| | -| | -| Wrong Passcode | -| ────────────── | -| 24sp / Bold / #FF4757 | -| | -| | -| << SHAKE ANIMATION - 3 cycles, 100ms each >> | -| | -| ┌───┐ ┌───┐ ┌───┐ ┌───┐ | -| │XXX│ │XXX│ │XXX│ │XXX│ | -| │ ✗ │ │ ✗ │ │ ✗ │ │ ✗ │ Error | -| │XXX│ │XXX│ │XXX│ │XXX│ dots | -| └───┘ └───┘ └───┘ └───┘ | -| | -| | -| ╔════════════════════════════════════════════════════╗| -| ║ ║| -| ║ ⚠️ Incorrect passcode ║| -| ║ ║| -| ║ 3 attempts remaining ║| -| ║ ─────────────────────────── ║| -| ║ [●●●○○] Attempts indicator ║| -| ║ ║| -| ╚════════════════════════════════════════════════════╝| -| | -| Error Banner: | -| Background: #FF4757@10% | -| Border: 1dp #FF4757@30% | -| Icon: Warning #FF4757 | -| Text: #FF4757 | -| Corner: 12dp | -| | -| | -| ┌────────────────────────────────────┐ | -| │ [Fingerprint] Try Biometric │ | -| └────────────────────────────────────┘ | -| | -| | -| Forgot Passcode? | -| | -+----------------------------------------------------------+ -| [Numeric Keypad] | -+----------------------------------------------------------+ -``` - -**Attempts Warning Levels:** -``` -5 attempts: No warning -4 attempts: Yellow warning chip appears -3 attempts: Orange warning, "Be careful" -2 attempts: Red warning, "Last 2 attempts" -1 attempt: Red alert, "Final attempt before lockout" -0 attempts: Account locked screen -``` - ---- - -### 10. Account Locked - -Lockout screen with countdown and recovery options. - -``` -+----------------------------------------------------------+ -| | -| [Status Bar] | -| | -+----------------------------------------------------------+ -| | -| | -| | -| ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ | -| ░ ░ | -| ░ ┌──────────────────────┐ ░ | -| ░ │XXXXXXXXXXXXXXXXXXXXXX│ ░ | -| ░ │XX XX│ ░ | -| ░ │XX [LOCKED] XX│ ░ Red | -| ░ │XX ICON XX│ ░ Pulse | -| ░ │XX 80x80dp XX│ ░ Anim | -| ░ │XX XX│ ░ | -| ░ │XXXXXXXXXXXXXXXXXXXXXX│ ░ | -| ░ └──────────────────────┘ ░ | -| ░ ░ | -| ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ | -| | -| | -| Account Locked | -| ────────────── | -| 28sp / Bold / #FF4757 | -| | -| | -| Too many incorrect attempts. Your account | -| has been temporarily locked for safety. | -| ─────────────────────────────────────── | -| 14sp / Regular / #6B7280 | -| | -| | -| ╔════════════════════════════════════╗ | -| ║ ║ | -| ║ ┌────────────────────────┐ ║ | -| ║ │ │ ║ Circular | -| ║ │ 4:59 │ ║ Progress | -| ║ │ │ ║ Ring | -| ║ │ [Progress Ring] │ ║ | -| ║ │ │ ║ Gradient | -| ║ │ Try again in │ ║ Stroke | -| ║ │ │ ║ | -| ║ └────────────────────────┘ ║ | -| ║ ║ | -| ╚════════════════════════════════════╝ | -| | -| Countdown Card: | -| Background: #1F2937 | -| Timer: 36sp / Bold / Gradient text | -| Circular progress: #667EEA → #764BA2 | -| Corner: 20dp | -| | -| | -| ┌────────────────────────────────────────────────┐ | -| │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ | -| │░░ ░░│ | -| │░░ Reset via Email ░░│ | -| │░░ ░░│ | -| │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ | -| └────────────────────────────────────────────────┘ | -| | -| Outline Button: | -| Border: 2dp #667EEA | -| Text: #667EEA | -| Height: 52dp | -| Corner: 26dp (pill) | -| | -| | -| Contact Support | -| ─────────────── | -| 14sp / #6B7280 | -| | -+----------------------------------------------------------+ -``` - -**Lockout Escalation:** -| Failed Attempts | Lockout Duration | -|-----------------|------------------| -| 5 | 30 seconds | -| 7 | 5 minutes | -| 10 | 30 minutes | -| 15 | 24 hours + email reset required | - ---- - -### 11. Passcode Setup Success - -Celebration screen with security score reveal. - -``` -+----------------------------------------------------------+ -| | -| [Status Bar] | -| | -+----------------------------------------------------------+ -| | -| | -| | -| ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ | -| ░ ░ | -| ░ ┌──────────────────────┐ ░ | -| ░ │░░░░░░░░░░░░░░░░░░░░░░│ ░ Success | -| ░ │░░ ░░│ ░ Green | -| ░ │░░ [ ✓ CHECK ] ░░│ ░ Gradient| -| ░ │░░ ICON ░░│ ░ | -| ░ │░░ 80x80 ░░│ ░ #00D09C | -| ░ │░░ ░░│ ░ → | -| ░ │░░ Draw Animation ░░│ ░ #38EF7D | -| ░ │░░ ░░│ ░ | -| ░ │░░░░░░░░░░░░░░░░░░░░░░│ ░ | -| ░ └──────────────────────┘ ░ | -| ░ ░ | -| ░ [CONFETTI PARTICLES BURST] ░ | -| ░ ░ | -| ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ | -| | -| | -| Passcode Created! 🎉 | -| ───────────────────── | -| 28sp / Bold / #00D09C | -| | -| | -| Your account is now protected with | -| secure passcode authentication | -| ───────────────────────────────── | -| 14sp / Regular / #6B7280 | -| | -| | -| ╔════════════════════════════════════════════════════╗| -| ║ ║| -| ║ 🛡️ Security Score Unlocked! ║| -| ║ ║| -| ║ ┌────────────────┐ ║| -| ║ │ │ ║ Score -| ║ │ 75 │ ║ Reveal -| ║ │ /100 │ ║ Anim -| ║ │ │ ║| -| ║ │ [GOOD] │ ║| -| ║ │ │ ║| -| ║ └────────────────┘ ║| -| ║ ║| -| ║ +25 pts for PIN • Enable biometrics for +25 ║| -| ║ ║| -| ╚════════════════════════════════════════════════════╝| -| | -| | -| ┌────────────────────────────────────────────────┐ | -| │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ | -| │░░ ░░│ | -| │░░ Continue ░░│ | -| │░░ ░░│ | -| │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ | -| └────────────────────────────────────────────────┘ | -| | -| Primary Button: | -| Background: Gradient #667EEA → #764BA2 | -| Text: White 16sp Bold | -| Height: 56dp | -| Corner: 28dp (pill) | -| Shadow: 0 8 24 #667EEA@30% | -| | -| | -| Enable Face ID / Touch ID | -| ───────────────────────── | -| 14sp / #667EEA | -| | -+----------------------------------------------------------+ -``` - ---- - -### 12. Change Passcode Flow - -3-step flow for changing existing passcode. - -``` -+----------------------------------------------------------+ -| | -| [← Back] Change Passcode | -| | -+----------------------------------------------------------+ -| | -| ╔════════════════════════════════════════════════════╗| -| ║ STEP INDICATOR ║| -| ║ ║| -| ║ [ ● ]━━━━━━[ ○ ]━━━━━━[ ○ ] ║| -| ║ Current New Confirm ║| -| ║ (Active) ║| -| ║ ║| -| ╚════════════════════════════════════════════════════╝| -| | -| | -| ┌──────────────┐ | -| │ [Security │ | -| │ Shield] │ | -| │ + Key │ | -| └──────────────┘ | -| | -| | -| Enter Current Passcode | -| ────────────────────── | -| 24sp / Bold | -| | -| Verify your identity before changing | -| ───────────────────────────────────── | -| 14sp / Regular / Secondary | -| | -| | -| ┌───┐ ┌───┐ ┌───┐ ┌───┐ | -| │ │ │ │ │ │ │ │ | -| │ ○ │ │ ○ │ │ ○ │ │ ○ │ | -| │ │ │ │ │ │ │ │ | -| └───┘ └───┘ └───┘ └───┘ | -| | -| | -| ┌────────────────────────────────────────────────┐ | -| │ │ | -| │ 🔒 Last changed: 47 days ago │ | -| │ │ | -| └────────────────────────────────────────────────┘ | -| | -+----------------------------------------------------------+ -| [Numeric Keypad] | -+----------------------------------------------------------+ -``` - -**Step 2 - Enter New:** -``` - ║ [ ✓ ]━━━━━━[ ● ]━━━━━━[ ○ ] ║ - ║ Current New Confirm ║ - ║ (Done) (Active) ║ - - Enter New Passcode - Choose a new 4-digit code -``` - -**Step 3 - Confirm New:** -``` - ║ [ ✓ ]━━━━━━[ ✓ ]━━━━━━[ ● ] ║ - ║ Current New Confirm ║ - ║ (Done) (Done) (Active) ║ - - Confirm New Passcode - Re-enter to confirm your new PIN -``` - ---- - -### 13. Panic Mode (2025 Security Feature) - -Quick access emergency feature - 5 rapid taps on shield. - -``` -+----------------------------------------------------------+ -| | -| [Status Bar - RED TINT] 🆘 PANIC | -| | -+----------------------------------------------------------+ -| | -| | -| ╔════════════════════════════════════╗ | -| ║ ║ | -| ║ ⚠️ PANIC MODE ACTIVATED ║ | -| ║ ║ | -| ╚════════════════════════════════════╝ | -| | -| | -| ┌──────────────┐ | -| │XXXXXXXXXXXXXX│ Emergency | -| │XX XX│ Shield | -| │XX [ SOS ] XX│ Red gradient | -| │XX XX│ #FF4757→#C0392B | -| │XXXXXXXXXXXXXX│ | -| └──────────────┘ | -| | -| | -| ┌────────────────────────────────────────────────┐ | -| │ │ | -| │ 🚨 Emergency Actions │ | -| │ ──────────────────────────────────────── │ | -| │ │ | -| │ ┌──────────────────────────────────────┐ │ | -| │ │ 🔒 Lock All Accounts │ │ | -| │ │ Freeze transactions instantly │ │ | -| │ └──────────────────────────────────────┘ │ | -| │ │ | -| │ ┌──────────────────────────────────────┐ │ | -| │ │ 📧 Alert Emergency Contact │ │ | -| │ │ Notify trusted person │ │ | -| │ └──────────────────────────────────────┘ │ | -| │ │ | -| │ ┌──────────────────────────────────────┐ │ | -| │ │ 📞 Call Support Hotline │ │ | -| │ │ Connect to 24/7 support │ │ | -| │ └──────────────────────────────────────┘ │ | -| │ │ | -| │ ┌──────────────────────────────────────┐ │ | -| │ │ 📍 Share Location │ │ | -| │ │ Send to emergency contact │ │ | -| │ └──────────────────────────────────────┘ │ | -| │ │ | -| └────────────────────────────────────────────────┘ | -| | -| | -| Cancel Panic Mode | -| ──────────────── | -| 14sp / #FFFFFF | -| | -+----------------------------------------------------------+ -``` - ---- - -## Component Breakdown - -### Biometric Gateway Card - -``` -┌─────────────────────────────────────────────────────────────┐ -│ BIOMETRIC GATEWAY CARD │ -├─────────────────────────────────────────────────────────────┤ -│ │ -│ DEFAULT STATE │ -│ ═══════════════════════════════════════════════════════ │ -│ ┌───────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌───────────────────────────────────────────────┐ │ │ -│ │ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ │ -│ │ │░░ ░░│ │ │ -│ │ │░░ [ Fingerprint Icon ] ░░│ │ │ -│ │ │░░ 64 x 64dp ░░│ │ │ -│ │ │░░ ░░│ │ │ -│ │ │░░ Touch to Unlock ░░│ │ │ -│ │ │░░ 16sp / White ░░│ │ │ -│ │ │░░ ░░│ │ │ -│ │ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ │ -│ │ └───────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ Dimensions: Full width - 32dp margin │ │ -│ │ Height: 120dp │ │ -│ │ Background: Gradient #667EEA → #764BA2 │ │ -│ │ Corner Radius: 24dp │ │ -│ │ Shadow: 0 8 32 #667EEA@30% │ │ -│ │ Glow Animation: Subtle pulse 3s infinite │ │ -│ │ │ │ -│ └───────────────────────────────────────────────────────┘ │ -│ │ -│ PRESSED STATE │ -│ ┌───────────────────────────────────────────────────────┐ │ -│ │ Scale: 0.98 │ │ -│ │ Brightness: +5% │ │ -│ │ Haptic: Light impact │ │ -│ └───────────────────────────────────────────────────────┘ │ -│ │ -│ SCANNING STATE │ -│ ┌───────────────────────────────────────────────────────┐ │ -│ │ Fingerprint ring: Rotating gradient stroke │ │ -│ │ Label: "Scanning..." with fade animation │ │ -│ │ Haptic: Continuous light vibration │ │ -│ └───────────────────────────────────────────────────────┘ │ -│ │ -│ Props: │ -│ ───────────────────────────────────────────────────────── │ -│ • biometricType: BiometricType (Fingerprint | FaceID) │ -│ • isScanning: Boolean │ -│ • onClick: () -> Unit │ -│ • onScanComplete: (success: Boolean) -> Unit │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - -### PIN Dot Indicator (Enhanced) - -``` -┌─────────────────────────────────────────────────────────────┐ -│ PIN DOT INDICATOR COMPONENT │ -├─────────────────────────────────────────────────────────────┤ -│ │ -│ EMPTY STATE │ -│ ┌───────────────────────────────────────────────┐ │ -│ │ ┌─────┐ │ │ -│ │ │ │ Border: 2dp #667EEA │ │ -│ │ │ ○ │ Fill: Transparent │ │ -│ │ │ │ Size: 18dp x 18dp │ │ -│ │ └─────┘ Corner: 50% (Circle) │ │ -│ │ Glow: None │ │ -│ └───────────────────────────────────────────────┘ │ -│ │ -│ FILLED STATE │ -│ ┌───────────────────────────────────────────────┐ │ -│ │ ┌─────┐ │ │ -│ │ │░░░░░│ Border: None │ │ -│ │ │░ ● ░│ Fill: Gradient #667EEA → │ │ -│ │ │░░░░░│ #764BA2 │ │ -│ │ └─────┘ Size: 18dp (scales to 22dp) │ │ -│ │ Animation: Spring bounce │ │ -│ │ Glow: #667EEA@40% │ │ -│ └───────────────────────────────────────────────┘ │ -│ │ -│ ERROR STATE │ -│ ┌───────────────────────────────────────────────┐ │ -│ │ ┌─────┐ │ │ -│ │ │XXXXX│ Border: 2dp #FF4757 │ │ -│ │ │X ✗ X│ Fill: #FF4757@30% │ │ -│ │ │XXXXX│ Animation: Shake X ±8dp │ │ -│ │ └─────┘ Haptic: Error │ │ -│ └───────────────────────────────────────────────┘ │ -│ │ -│ VISIBLE STATE (Show PIN toggle) │ -│ ┌───────────────────────────────────────────────┐ │ -│ │ ┌─────┐ │ │ -│ │ │ │ Shows actual digit │ │ -│ │ │ 5 │ Font: 16sp Bold #667EEA │ │ -│ │ │ │ Background: #667EEA@10% │ │ -│ │ └─────┘ │ │ -│ └───────────────────────────────────────────────┘ │ -│ │ -│ Composable: │ -│ ───────────────────────────────────────────────────────── │ -│ @Composable │ -│ fun PinDotIndicator( │ -│ modifier: Modifier = Modifier, │ -│ length: Int = 4, │ -│ filledCount: Int = 0, │ -│ isError: Boolean = false, │ -│ isVisible: Boolean = false, │ -│ visibleDigits: List = emptyList() │ -│ ) │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - -### Numeric Keypad (Premium) - -``` -┌─────────────────────────────────────────────────────────────┐ -│ NUMERIC KEYPAD COMPONENT │ -├─────────────────────────────────────────────────────────────┤ -│ │ -│ Layout: 4x3 Grid │ -│ Gap: 16dp horizontal, 12dp vertical │ -│ Padding: 24dp horizontal, 16dp vertical │ -│ │ -│ DIGIT KEY │ -│ ┌───────────────────────────────────────────────┐ │ -│ │ ┌─────────────────────────┐ │ │ -│ │ │ │ │ │ -│ │ │ 2 │ Number: │ │ -│ │ │ │ 28sp Bold │ │ -│ │ │ ABC │ #1F2937 │ │ -│ │ │ │ │ │ -│ │ │ Size: 76dp x 76dp │ Letters: │ │ -│ │ │ Corner: 50% (Circle) │ 10sp Med │ │ -│ │ │ BG: #F0F4F8 │ #9CA3AF │ │ -│ │ │ │ │ │ -│ │ └─────────────────────────┘ │ │ -│ └───────────────────────────────────────────────┘ │ -│ │ -│ PRESSED STATE │ -│ ┌───────────────────────────────────────────────┐ │ -│ │ ┌─────────────────────────┐ │ │ -│ │ │░░░░░░░░░░░░░░░░░░░░░░░░░│ BG: │ │ -│ │ │░░░░░░░░░░░░░░░░░░░░░░░░░│ #667EEA │ │ -│ │ │░░░░░░░░ 2 ░░░░░░░░░░░░░│ @20% │ │ -│ │ │░░░░░░░░░░░░░░░░░░░░░░░░░│ │ │ -│ │ │░░░░░░░ ABC ░░░░░░░░░░░░│ Scale: │ │ -│ │ │░░░░░░░░░░░░░░░░░░░░░░░░░│ 0.92 │ │ -│ │ └─────────────────────────┘ │ │ -│ │ │ │ -│ │ Duration: 80ms │ │ -│ │ Haptic: Light impact │ │ -│ └───────────────────────────────────────────────┘ │ -│ │ -│ BIOMETRIC KEY (Bottom-Left) │ -│ ┌───────────────────────────────────────────────┐ │ -│ │ ┌─────────────────────────┐ │ │ -│ │ │ │ Icon: │ │ -│ │ │ [Fingerprint] or │ 28dp │ │ -│ │ │ [Face ID Icon] │ #667EEA │ │ -│ │ │ │ │ │ -│ │ │ 76dp x 76dp │ BG: │ │ -│ │ │ BG: #667EEA@10% │ Gradient │ │ -│ │ │ Border: 1dp #667EEA@30%│ @10% │ │ -│ │ └─────────────────────────┘ │ │ -│ └───────────────────────────────────────────────┘ │ -│ │ -│ BACKSPACE KEY (Bottom-Right) │ -│ ┌───────────────────────────────────────────────┐ │ -│ │ ┌─────────────────────────┐ │ │ -│ │ │ │ Icon: │ │ -│ │ │ [⌫ Delete] │ 24dp │ │ -│ │ │ │ #6B7280 │ │ -│ │ │ 76dp x 76dp │ │ │ -│ │ │ BG: Transparent │ Long │ │ -│ │ │ │ Press: │ │ -│ │ │ │ Clear all │ │ -│ │ └─────────────────────────┘ │ │ -│ └───────────────────────────────────────────────┘ │ -│ │ -│ Composable: │ -│ ───────────────────────────────────────────────────────── │ -│ @Composable │ -│ fun NumericKeypad( │ -│ modifier: Modifier = Modifier, │ -│ onDigitClick: (Char) -> Unit, │ -│ onBackspaceClick: () -> Unit, │ -│ onBackspaceLongClick: () -> Unit, │ -│ onBiometricClick: () -> Unit, │ -│ biometricType: BiometricType?, │ -│ isBiometricEnabled: Boolean = true │ -│ ) │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - -### Security Score Chip - -``` -┌─────────────────────────────────────────────────────────────┐ -│ SECURITY SCORE CHIP │ -├─────────────────────────────────────────────────────────────┤ -│ │ -│ EXCELLENT (90-100) │ -│ ┌───────────────────────────────────────────────────────┐ │ -│ │ 🛡 Security: 92/100 [Excellent] Streak: 47d ✨ │ │ -│ │ │ │ -│ │ BG: #00D09C@10% Border: 1dp #00D09C@30% │ │ -│ │ Icon: Shield #00D09C Text: #00D09C │ │ -│ │ Height: 44dp Corner: 22dp (pill) │ │ -│ │ Padding: 12dp horizontal │ │ -│ └───────────────────────────────────────────────────────┘ │ -│ │ -│ GOOD (70-89) │ -│ ┌───────────────────────────────────────────────────────┐ │ -│ │ 🛡 Security: 75/100 [Good] │ │ -│ │ │ │ -│ │ BG: #667EEA@10% Border: 1dp #667EEA@30% │ │ -│ │ Icon: Shield #667EEA Text: #667EEA │ │ -│ └───────────────────────────────────────────────────────┘ │ -│ │ -│ NEEDS WORK (50-69) │ -│ ┌───────────────────────────────────────────────────────┐ │ -│ │ ⚠️ Security: 55/100 [Needs Work] Improve → │ │ -│ │ │ │ -│ │ BG: #FFB800@10% Border: 1dp #FFB800@30% │ │ -│ │ Icon: Warning #FFB800 Text: #B8860B │ │ -│ └───────────────────────────────────────────────────────┘ │ -│ │ -│ AT RISK (0-49) │ -│ ┌───────────────────────────────────────────────────────┐ │ -│ │ 🔓 Security: 35/100 [At Risk] Fix Now → │ │ -│ │ │ │ -│ │ BG: #FF4757@10% Border: 1dp #FF4757@30% │ │ -│ │ Icon: Unlock #FF4757 Text: #FF4757 │ │ -│ └───────────────────────────────────────────────────────┘ │ -│ │ -│ Score Calculation: │ -│ ───────────────────────────────────────────────────────── │ -│ • PIN set: +25 points │ -│ • Biometric enabled: +25 points │ -│ • Email verified: +15 points │ -│ • Phone verified: +15 points │ -│ • No failed attempts (7 days): +10 points │ -│ • Account age bonus: +10 points │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - ---- - -## Interactions & Animations - -### Animation Specifications - -``` -┌─────────────────────────────────────────────────────────────┐ -│ PASSCODE ANIMATIONS (Premium 2025) │ -├─────────────────────────────────────────────────────────────┤ -│ │ -│ 1. BIOMETRIC CARD GLOW │ -│ ═══════════════════════════════════════════════════════ │ -│ Type: Continuous ambient animation │ -│ Duration: 3000ms per cycle │ -│ Easing: ease-in-out │ -│ │ -│ Keyframes: │ -│ ┌────────────────────────────────────────────────────┐ │ -│ │ 0% { box-shadow: 0 8 32 #667EEA@30% } │ │ -│ │ 50% { box-shadow: 0 12 48 #764BA2@40% } │ │ -│ │ 100% { box-shadow: 0 8 32 #667EEA@30% } │ │ -│ └────────────────────────────────────────────────────┘ │ -│ │ -│ │ -│ 2. DOT FILL ANIMATION (Spring Bounce) │ -│ ═══════════════════════════════════════════════════════ │ -│ Trigger: User taps digit │ -│ Duration: 200ms │ -│ Easing: Spring (damping=0.6, stiffness=500) │ -│ │ -│ Sequence: │ -│ ┌────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ T=0ms T=80ms T=150ms T=200ms │ │ -│ │ │ │ -│ │ ┌───┐ ┌───┐ ┌────┐ ┌───┐ │ │ -│ │ │ │ │ ● │ │ ●● │ │ ● │ │ │ -│ │ │ ○ │ → │///│ → │////│ → │///│ │ │ -│ │ │ │ │ ● │ │ ●● │ │ ● │ │ │ -│ │ └───┘ └───┘ └────┘ └───┘ │ │ -│ │ Empty Fill Overshoot Settle │ │ -│ │ 18dp 18dp 22dp 18dp │ │ -│ │ │ │ -│ └────────────────────────────────────────────────────┘ │ -│ │ -│ Additional Effects: │ -│ • Gradient fill animates from bottom to top │ -│ • Glow appears with 100ms fade-in │ -│ • Haptic: Light impact (10ms) │ -│ │ -│ │ -│ 3. SHAKE ERROR ANIMATION │ -│ ═══════════════════════════════════════════════════════ │ -│ Trigger: Wrong passcode / PIN mismatch │ -│ Duration: 400ms │ -│ Easing: cubic-bezier(0.36, 0.07, 0.19, 0.97) │ -│ │ -│ Keyframes: │ -│ ┌────────────────────────────────────────────────────┐ │ -│ │ 0% { transform: translateX(0) } │ │ -│ │ 10% { transform: translateX(-8dp) } │ │ -│ │ 20% { transform: translateX(8dp) } │ │ -│ │ 30% { transform: translateX(-8dp) } │ │ -│ │ 40% { transform: translateX(8dp) } │ │ -│ │ 50% { transform: translateX(-4dp) } │ │ -│ │ 60% { transform: translateX(4dp) } │ │ -│ │ 70% { transform: translateX(-2dp) } │ │ -│ │ 80% { transform: translateX(2dp) } │ │ -│ │ 100% { transform: translateX(0) } │ │ -│ └────────────────────────────────────────────────────┘ │ -│ │ -│ Concurrent animations: │ -│ • Dots turn red: 0ms │ -│ • Error glow: 0ms-400ms │ -│ • Haptic: Heavy error (150ms duration) │ -│ │ -│ │ -│ 4. SUCCESS UNLOCK ANIMATION │ -│ ═══════════════════════════════════════════════════════ │ -│ Trigger: Correct passcode entered │ -│ Duration: 600ms │ -│ │ -│ Sequence: │ -│ ┌────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ T=0ms: All 4 dots filled │ │ -│ │ T=50ms: Dots merge to center │ │ -│ │ T=200ms: Green pulse radiates outward │ │ -│ │ T=400ms: Shield icon transforms to checkmark │ │ -│ │ T=600ms: Screen fades to home │ │ -│ │ │ │ -│ │ [●] [●] [●] [●] │ │ -│ │ \ | / │ │ -│ │ [●●●●] → [ ✓ ] → [Navigate] │ │ -│ │ │ │ -│ └────────────────────────────────────────────────────┘ │ -│ │ -│ Haptic: Success pattern (100ms-50ms-100ms) │ -│ │ -│ │ -│ 5. KEY PRESS RIPPLE │ -│ ═══════════════════════════════════════════════════════ │ -│ Trigger: Touch down on key │ -│ Duration: 150ms │ -│ │ -│ ┌────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ IDLE PRESSED RELEASED │ │ -│ │ │ │ -│ │ ┌─────┐ ┌─────┐ ┌─────┐ │ │ -│ │ │ │ │░░░░░│ │ │ │ │ -│ │ │ 2 │ → │░ 2 ░│ → │ 2 │ │ │ -│ │ │ ABC │ │░ABC░│ │ ABC │ │ │ -│ │ └─────┘ └─────┘ └─────┘ │ │ -│ │ │ │ -│ │ Scale: 1.0 Scale: 0.92 Scale: 1.0 │ │ -│ │ BG: #F0F4F8 BG: #667EEA@20% BG: #F0F4F8 │ │ -│ │ │ │ -│ │ Ripple origin: Touch point │ │ -│ │ Ripple color: #667EEA@30% │ │ -│ │ │ │ -│ └────────────────────────────────────────────────────┘ │ -│ │ -│ │ -│ 6. BIOMETRIC SCANNING PULSE │ -│ ═══════════════════════════════════════════════════════ │ -│ Trigger: Biometric prompt active │ -│ Duration: Continuous │ -│ │ -│ ┌────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌───────────────────┐ │ │ -│ │ │ ╭─────────────╮ │ Ring 1: Scale │ │ -│ │ │ / \│ 1.0 → 1.3 → 1.0 │ │ -│ │ │ │ [Fingerprint] │ Opacity: 1→0→1 │ │ -│ │ │ \ /│ Duration: 1500ms │ │ -│ │ │ ╰─────────────╯ │ │ │ -│ │ │ ╭─────────────────╮│ Ring 2: Offset │ │ -│ │ │ ╰─────────────────╯│ by 750ms │ │ -│ │ └───────────────────┘ │ │ -│ │ │ │ -│ └────────────────────────────────────────────────────┘ │ -│ │ -│ │ -│ 7. LOCKOUT COUNTDOWN │ -│ ═══════════════════════════════════════════════════════ │ -│ Trigger: Account locked │ -│ Duration: Per second tick │ -│ │ -│ ┌────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ Circular progress ring decreases each second │ │ -│ │ Stroke: Gradient #667EEA → #764BA2 │ │ -│ │ Width: 6dp │ │ -│ │ Size: 120dp diameter │ │ -│ │ │ │ -│ │ Number transition: │ │ -│ │ • Old number: translateY -20dp, opacity 0 │ │ -│ │ • New number: translateY 0, opacity 1 │ │ -│ │ Duration: 200ms per tick │ │ -│ │ │ │ -│ └────────────────────────────────────────────────────┘ │ -│ │ -│ │ -│ 8. AVATAR TRUST RING │ -│ ═══════════════════════════════════════════════════════ │ -│ Trigger: Biometric-first screen appears │ -│ Duration: Continuous │ -│ │ -│ ┌────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ Outer ring: Gradient #667EEA → #764BA2 │ │ -│ │ Inner ring: #00D09C (trust indicator) │ │ -│ │ │ │ -│ │ Animation: │ │ -│ │ • Gradient rotation: 360deg per 8s │ │ -│ │ • Trust ring pulse: opacity 0.8→1.0→0.8 per 2s │ │ -│ │ │ │ -│ └────────────────────────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - ---- - -## Accessibility - -### Screen Reader Support - -``` -┌─────────────────────────────────────────────────────────────┐ -│ ACCESSIBILITY SPECIFICATIONS │ -├─────────────────────────────────────────────────────────────┤ -│ │ -│ CONTENT DESCRIPTIONS │ -│ ═══════════════════════════════════════════════════════ │ -│ │ -│ Biometric Gateway Card: │ -│ ───────────────────────────────────────────────────────── │ -│ "Touch to unlock with fingerprint. Double tap to activate" │ -│ "Look at device to unlock with Face ID" │ -│ │ -│ Security Score Chip: │ -│ ───────────────────────────────────────────────────────── │ -│ "Security score: 92 out of 100. Excellent. │ -│ 47 day streak of secure logins" │ -│ │ -│ Avatar with Trust Ring: │ -│ ───────────────────────────────────────────────────────── │ -│ "Profile picture for Maria. Account verified and secure" │ -│ │ -│ PIN Dots (Empty): │ -│ ───────────────────────────────────────────────────────── │ -│ "Passcode entry. 0 of 4 digits entered" │ -│ │ -│ PIN Dots (Partial): │ -│ ───────────────────────────────────────────────────────── │ -│ "Passcode entry. 3 of 4 digits entered" │ -│ │ -│ PIN Dots (Error): │ -│ ───────────────────────────────────────────────────────── │ -│ "Error. Wrong passcode. 3 attempts remaining" │ -│ │ -│ Digit Key (2): │ -│ ───────────────────────────────────────────────────────── │ -│ "2, A B C" │ -│ │ -│ Backspace Key: │ -│ ───────────────────────────────────────────────────────── │ -│ "Delete. Double tap to delete last digit. │ -│ Long press to clear all" │ -│ │ -│ Lockout Screen: │ -│ ───────────────────────────────────────────────────────── │ -│ "Account temporarily locked. Too many incorrect attempts. │ -│ Try again in 4 minutes 59 seconds" │ -│ │ -│ │ -│ FOCUS ORDER │ -│ ═══════════════════════════════════════════════════════ │ -│ │ -│ Biometric-First Screen: │ -│ ┌────────────────────────────────────────────────────┐ │ -│ │ 1. Avatar + Username ("Welcome back, Maria") │ │ -│ │ 2. Biometric Gateway Card (primary action) │ │ -│ │ 3. "Use Passcode Instead" link │ │ -│ │ 4. Security Score Chip │ │ -│ └────────────────────────────────────────────────────┘ │ -│ │ -│ Passcode Entry Screen: │ -│ ┌────────────────────────────────────────────────────┐ │ -│ │ 1. Shield Icon (decorative, skipped) │ │ -│ │ 2. Title ("Enter Passcode") │ │ -│ │ 3. Subtitle │ │ -│ │ 4. PIN Dots (announces filled count) │ │ -│ │ 5. "Try Biometric" chip │ │ -│ │ 6. Keypad - Row 1: 1, 2, 3 │ │ -│ │ 7. Keypad - Row 2: 4, 5, 6 │ │ -│ │ 8. Keypad - Row 3: 7, 8, 9 │ │ -│ │ 9. Keypad - Row 4: Bio, 0, Backspace │ │ -│ │ 10. Forgot Passcode link │ │ -│ └────────────────────────────────────────────────────┘ │ -│ │ -│ │ -│ MINIMUM TOUCH TARGETS │ -│ ═══════════════════════════════════════════════════════ │ -│ │ -│ All interactive elements: Minimum 48dp x 48dp │ -│ Keypad keys: 76dp x 76dp (exceeds minimum) │ -│ Biometric card: Full width x 120dp │ -│ Chip buttons: Height 44dp │ -│ │ -│ │ -│ HAPTIC FEEDBACK MAP │ -│ ═══════════════════════════════════════════════════════ │ -│ │ -│ ┌────────────────────────────────────────────────────┐ │ -│ │ Action │ iOS │ Android │ │ -│ ├──────────────────────┼──────────────────┼──────────┤ │ -│ │ Digit entered │ Light impact │ TICK │ │ -│ │ Backspace pressed │ Light impact │ TICK │ │ -│ │ Wrong passcode │ Error (heavy) │ REJECT │ │ -│ │ Passcode accepted │ Success │ CONFIRM │ │ -│ │ Account locked │ Error (3x heavy) │ HEAVY │ │ -│ │ Biometric started │ Light impact │ TICK │ │ -│ │ Biometric success │ Success │ CONFIRM │ │ -│ │ Biometric failed │ Error │ REJECT │ │ -│ └────────────────────────────────────────────────────┘ │ -│ │ -│ │ -│ REDUCED MOTION SUPPORT │ -│ ═══════════════════════════════════════════════════════ │ -│ │ -│ When "Reduce Motion" is enabled: │ -│ ───────────────────────────────────────────────────────── │ -│ • Shake animation → Red color flash only │ -│ • Spring bounce → Instant fill │ -│ • Glow pulse → Static glow │ -│ • Success merge → Instant transition │ -│ • Avatar ring rotation → Static gradient │ -│ • Countdown ring → Step changes │ -│ │ -│ │ -│ HIGH CONTRAST MODE │ -│ ═══════════════════════════════════════════════════════ │ -│ │ -│ • Dot borders: 3dp instead of 2dp │ -│ • Key borders: Add 1dp #1F2937 border │ -│ • Gradients: Replaced with solid primary color │ -│ • Text: Enforced WCAG AAA contrast (7:1 minimum) │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - ---- - -## Dark Mode Variant - -### Biometric-First - Dark Mode - -``` -+----------------------------------------------------------+ -| | -| [Status Bar - Light Text] Background: #0D1117| -| | -+----------------------------------------------------------+ -| | -| | -| ┌──────────────┐ | -| │ │ Avatar with | -| │ [Avatar] │ gradient ring | -| │ │ preserved | -| │ Trust Ring │ | -| │ #00D09C │ Glow: more | -| │ │ prominent | -| └──────────────┘ | -| | -| Welcome back, | -| Maria | -| ─────────── | -| #F0F6FC (Light text) | -| | -| | -| ┌────────────────────────────────────────────────┐ | -| │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ | -| │░░ ░░│ | -| │░░ Gradient preserved: #667EEA → #764BA2 ░░│ | -| │░░ ░░│ | -| │░░ [ Fingerprint Icon ] ░░│ | -| │░░ #FFFFFF ░░│ | -| │░░ ░░│ | -| │░░ Touch to Unlock ░░│ | -| │░░ ░░│ | -| │░░ Enhanced glow: #764BA2@40% ░░│ | -| │░░ ░░│ | -| │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ | -| └────────────────────────────────────────────────┘ | -| | -| | -| Use Passcode Instead | -| ──────────────────── | -| #A78BFA (Lighter purple) | -| | -| | -| ┌────────────────────────────────────────────────┐ | -| │ 🛡 Security: 92/100 [Excellent] 47d ✨ │ | -| │ │ | -| │ BG: #00D09C@15% Text: #00D09C │ | -| └────────────────────────────────────────────────┘ | -| | -+----------------------------------------------------------+ -``` - -### Passcode Entry - Dark Mode - -``` -+----------------------------------------------------------+ -| | -| [Status Bar - Light Text] Background: #0D1117| -| | -+----------------------------------------------------------+ -| | -| ┌──────────────┐ | -| │░░░░░░░░░░░░░│ Same gradient | -| │░░ [Shield] ░│ #667EEA→#764BA2 | -| │░░ + Key ░░│ | -| │░░░░░░░░░░░░░│ Enhanced glow: | -| └──────────────┘ #764BA2@35% | -| | -| | -| Enter Passcode | -| ────────────── | -| #F0F6FC | -| | -| Your 4-digit PIN to access | -| ─────────────────────────── | -| #8B949E | -| | -| | -| ┌───┐ ┌───┐ ┌───┐ ┌───┐ | -| │ │ │ │ │ │ │ │ | -| │ ○ │ │ ○ │ │ ○ │ │ ○ │ | -| │ │ │ │ │ │ │ │ | -| └───┘ └───┘ └───┘ └───┘ | -| | -| Border: #A78BFA | -| Fill (entered): Gradient | -| | -| | -| ┌────────────────────────────────────┐ | -| │ [Fingerprint] Try Biometric │ | -| │ BG: #A78BFA@15% │ | -| └────────────────────────────────────┘ | -| | -+----------------------------------------------------------+ -| | -| NUMERIC KEYPAD (Dark Mode) | -| Background: #161B22 | -| | -| ┌────────────┐ ┌────────────┐ ┌────────────┐ | -| │ │ │ │ │ │ | -| │ 1 │ │ 2 │ │ 3 │ | -| │ │ │ ABC │ │ DEF │ | -| └────────────┘ └────────────┘ └────────────┘ | -| | -| Key BG: #21262D | -| Key Pressed: #A78BFA@25% | -| Number: #F0F6FC | -| Letters: #6E7681 | -| | -| ┌────────────┐ ┌────────────┐ ┌────────────┐ | -| │ 4 │ │ 5 │ │ 6 │ | -| └────────────┘ └────────────┘ └────────────┘ | -| | -| ┌────────────┐ ┌────────────┐ ┌────────────┐ | -| │ 7 │ │ 8 │ │ 9 │ | -| └────────────┘ └────────────┘ └────────────┘ | -| | -| ┌────────────┐ ┌────────────┐ ┌────────────┐ | -| │ [Bio] │ │ 0 │ │ [⌫] │ | -| │ #A78BFA │ │ │ │ #8B949E │ | -| └────────────┘ └────────────┘ └────────────┘ | -| | -+----------------------------------------------------------+ -| | -| Forgot Passcode? | -| #A78BFA | -| | -+----------------------------------------------------------+ -``` - -### Color Token Mapping - -``` -┌─────────────────────────────────────────────────────────────┐ -│ DARK MODE COLOR MAPPING │ -├─────────────────────────────────────────────────────────────┤ -│ │ -│ ┌──────────────────────────────────────────────────────┐ │ -│ │ Element │ Light Mode │ Dark Mode │ │ -│ ├──────────────────────────────────────────────────────┤ │ -│ │ Screen Background │ #F8F9FA │ #0D1117 │ │ -│ │ Keypad Background │ #FFFFFF │ #161B22 │ │ -│ │ Key Background │ #F0F4F8 │ #21262D │ │ -│ │ Key Pressed BG │ #667EEA@20% │ #A78BFA@25% │ │ -│ │ Title Text │ #1F2937 │ #F0F6FC │ │ -│ │ Subtitle Text │ #6B7280 │ #8B949E │ │ -│ │ Tertiary Text │ #9CA3AF │ #6E7681 │ │ -│ │ Key Numbers │ #1F2937 │ #F0F6FC │ │ -│ │ Key Letters │ #9CA3AF │ #6E7681 │ │ -│ │ Dot Border (empty) │ #667EEA │ #A78BFA │ │ -│ │ Dot Fill (filled) │ Gradient │ Gradient │ │ -│ │ Link Color │ #667EEA │ #A78BFA │ │ -│ │ Error Color │ #FF4757 │ #FF6B7A │ │ -│ │ Success Color │ #00D09C │ #00D09C │ │ -│ │ Biometric Icon │ #667EEA │ #A78BFA │ │ -│ │ Card Glow │ #667EEA@30% │ #764BA2@40% │ │ -│ │ Primary Gradient │ #667EEA→ │ Same │ │ -│ │ │ #764BA2 │ (preserved) │ │ -│ └──────────────────────────────────────────────────────┘ │ -│ │ -│ │ -│ SPECIAL DARK MODE CONSIDERATIONS │ -│ ═══════════════════════════════════════════════════════ │ -│ │ -│ Gradient Preservation: │ -│ ───────────────────────────────────────────────────────── │ -│ Primary gradient (#667EEA → #764BA2) remains identical │ -│ in dark mode to maintain brand identity. │ -│ │ -│ Enhanced Glow Effects: │ -│ ───────────────────────────────────────────────────────── │ -│ • Biometric card glow: 40% opacity (vs 30% light) │ -│ • Shield glow: 35% opacity (vs 25% light) │ -│ • Dot fill glow: 50% opacity (vs 40% light) │ -│ │ -│ Softer Accent Colors: │ -│ ───────────────────────────────────────────────────────── │ -│ • Primary accent shifts to #A78BFA (lighter purple) │ -│ • Error shifts to #FF6B7A (softer red) │ -│ • Improves contrast and reduces eye strain │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - ---- - -## Implementation Notes - -### State Management - -```kotlin -data class PasscodeScreenState( - // Mode - val mode: PasscodeMode = PasscodeMode.BIOMETRIC_FIRST, - val step: PasscodeStep = PasscodeStep.CURRENT, - - // User - val userName: String = "", - val userAvatar: String? = null, - - // Entry - val enteredDigits: String = "", - val firstPasscode: String? = null, // For create/confirm flow - - // Biometric - val biometricType: BiometricType? = null, - val isBiometricEnabled: Boolean = true, - val isBiometricScanning: Boolean = false, - - // Error - val isError: Boolean = false, - val errorMessage: String? = null, - val attemptsRemaining: Int = 5, - - // Lockout - val isLocked: Boolean = false, - val lockoutEndTime: Instant? = null, - val lockoutDuration: Duration = Duration.ZERO, - - // Security - val securityScore: Int = 0, - val securityStreak: Int = 0, - val lastLoginTime: Instant? = null, - - // UI - val isPasscodeVisible: Boolean = false, - val isLoading: Boolean = false -) - -enum class PasscodeMode { - BIOMETRIC_FIRST, // Default unlock with biometric as primary - ENTER_PIN, // PIN entry (fallback from biometric) - CREATE_NEW, // First-time setup - CONFIRM_NEW, // Confirm during setup - CHANGE_CURRENT, // Enter current (change flow) - CHANGE_NEW, // Enter new (change flow) - CHANGE_CONFIRM // Confirm new (change flow) -} - -enum class PasscodeStep { - CURRENT, // Enter current passcode - NEW, // Enter new passcode - CONFIRM // Confirm passcode -} - -enum class BiometricType { - FINGERPRINT, - FACE_ID, - IRIS -} - -sealed interface PasscodeEvent { - data class OnDigitEntered(val digit: Char) : PasscodeEvent - data object OnBackspacePressed : PasscodeEvent - data object OnBackspaceLongPressed : PasscodeEvent - data object OnBiometricPressed : PasscodeEvent - data class OnBiometricResult(val success: Boolean) : PasscodeEvent - data object OnForgotPasscodePressed : PasscodeEvent - data object OnToggleVisibility : PasscodeEvent - data object OnUsePinInstead : PasscodeEvent - data object OnSkipPressed : PasscodeEvent - data object OnPanicModeTriggered : PasscodeEvent -} - -sealed interface PasscodeSideEffect { - data object NavigateToHome : PasscodeSideEffect - data object NavigateToForgotPasscode : PasscodeSideEffect - data object ShowBiometricPrompt : PasscodeSideEffect - data class TriggerHaptic(val type: HapticType) : PasscodeSideEffect - data object PlaySuccessAnimation : PasscodeSideEffect - data object PlayErrorAnimation : PasscodeSideEffect - data object ShowPanicMode : PasscodeSideEffect -} - -enum class HapticType { - LIGHT_IMPACT, - ERROR, - SUCCESS, - HEAVY -} -``` - -### Required Composables - -```kotlin -// Main Screen -@Composable -fun PasscodeScreen( - state: PasscodeScreenState, - onEvent: (PasscodeEvent) -> Unit -) - -// Biometric-First Mode -@Composable -fun BiometricGatewayScreen( - userName: String, - userAvatar: String?, - biometricType: BiometricType, - securityScore: Int, - securityStreak: Int, - onBiometricClick: () -> Unit, - onUsePinClick: () -> Unit -) - -// PIN Entry Mode -@Composable -fun PinEntryScreen( - shieldState: ShieldState, - title: String, - subtitle: String, - filledCount: Int, - isError: Boolean, - errorMessage: String?, - attemptsRemaining: Int?, - onBiometricClick: () -> Unit, - onForgotClick: () -> Unit -) - -// Components -@Composable -fun BiometricGatewayCard( - biometricType: BiometricType, - isScanning: Boolean, - onClick: () -> Unit -) - -@Composable -fun UserAvatarWithTrustRing( - userName: String, - avatarUrl: String?, - isVerified: Boolean -) - -@Composable -fun SecurityScoreChip( - score: Int, - streak: Int?, - onClick: (() -> Unit)? -) - -@Composable -fun PinDotIndicator( - length: Int = 4, - filledCount: Int, - isError: Boolean, - isVisible: Boolean, - visibleDigits: List -) - -@Composable -fun NumericKeypad( - onDigitClick: (Char) -> Unit, - onBackspaceClick: () -> Unit, - onBackspaceLongClick: () -> Unit, - biometricType: BiometricType?, - onBiometricClick: () -> Unit, - isBiometricEnabled: Boolean -) - -@Composable -fun SecurityShield( - state: ShieldState, - size: Dp = 80.dp -) - -@Composable -fun LockoutCountdown( - remainingTime: Duration, - onResetViaEmail: () -> Unit, - onContactSupport: () -> Unit -) - -@Composable -fun StepIndicator( - currentStep: Int, - totalSteps: Int, - stepLabels: List -) - -@Composable -fun PanicModeScreen( - onLockAccounts: () -> Unit, - onAlertContact: () -> Unit, - onCallSupport: () -> Unit, - onShareLocation: () -> Unit, - onCancel: () -> Unit -) - -enum class ShieldState { - DEFAULT, // Purple gradient with key - CREATE, // Purple with plus - CONFIRM, // Purple with check - ERROR, // Red tint with X - LOCKED, // Red gradient with lock - SUCCESS // Green gradient with check -} -``` - ---- - -## Changelog - -| Date | Version | Changes | -|------|---------|---------| -| 2025-12-30 | 2.0 | Major redesign: Biometric-first pattern, security score gamification, panic mode, trust ring visualization, enhanced animations | -| 2025-12-30 | 1.0 | Initial mockup with basic vibrant design | - ---- - -## Data Binding Reference - -> **For `/implement` command**: Maps UI components to API.md sections. -> **Source of Truth**: See `API.md` for complete endpoint details. - -### Passcode Feature - Fully Client-Side - -See `API.md → No Backend API Required` - Passcode has NO Fineract APIs. - -### Client-Only Features - -| Feature | Storage | Notes | -|---------|---------|-------| -| Passcode Hash | DataStore (encrypted) | See `API.md → Local Storage Mechanism` | -| Biometric Setup | Platform Keystore | See `API.md → Platform-Specific Storage` | -| Failed Attempts | DataStore | Lockout tracking | -| Security Score | DataStore | Gamification layer | - -### Storage Operations - -See `API.md → Storage Operations` for: -- Save passcode hash -- Verify passcode -- Enable/disable biometric -- Reset passcode - -### Integration Points - -| Action | Result | -|--------|--------| -| Successful auth | Navigate to main app | -| Failed auth | Increment counter, show error | -| Max failures | Lock app, require recovery | -| Biometric success | Decrypt stored credentials | diff --git a/claude-product-cycle/design-spec-layer/features/passcode/SPEC.md b/claude-product-cycle/design-spec-layer/features/passcode/SPEC.md deleted file mode 100644 index d872373e5..000000000 --- a/claude-product-cycle/design-spec-layer/features/passcode/SPEC.md +++ /dev/null @@ -1,448 +0,0 @@ -# Passcode - Feature Specification - -> **Purpose**: Secure local authentication for app access -> **User Value**: Quick and secure app unlock without entering full credentials -> **Last Updated**: 2025-12-29 - ---- - -## 1. Overview - -### 1.1 Feature Summary -The Passcode feature provides a local 4-digit PIN-based authentication system that enables users to quickly unlock the app after initial login. It includes two main flows: setting up a new passcode (with confirmation) and verifying an existing passcode for subsequent app access. - -### 1.2 User Stories -- As a user, I want to set up a 4-digit passcode so that I can quickly access the app without entering my full credentials -- As a user, I want to verify my passcode on app launch so that my account remains secure -- As a user, I want visual feedback when entering my passcode so I know how many digits I have entered -- As a user, I want to be notified if my passcodes do not match during setup so I can try again -- As a user, I want to see an error state if I enter the wrong passcode during verification - ---- - -## 2. Screen Layouts - -### 2.1 Set Passcode Screen (Initial Setup) - -``` -+-------------------------------------------+ -| | -| [Lock Icon] | -| (primary color bg) | -| | -| Set Up Passcode | -| | -| Choose a 4-digit PIN to secure | -| your account | -| | -| O O O O | -| (empty dots for input) | -| | -| | -| [Powered by Mifos] | -| | -+---------+---------+---------+-------------+ -| | | | | -| 1 | 2 | 3 | | -| | ABC | DEF | | -+---------+---------+---------+-------------+ -| | | | | -| 4 | 5 | 6 | | -| GHI | JKL | MNO | | -+---------+---------+---------+-------------+ -| | | | | -| 7 | 8 | 9 | | -| PQRS | TUV | WXYZ | | -+---------+---------+---------+-------------+ -| | | | | -| | | -|Backspace| | Send | | -+---------+---------+---------+-------------+ -``` - -### 2.2 Confirm Passcode Screen (After Initial Entry) - -``` -+-------------------------------------------+ -| | -| [Lock Icon] | -| (primary color bg) | -| | -| Confirm Passcode | -| | -| Re-enter your 4-digit PIN to | -| confirm | -| | -| * * O O | -| (filled dots show progress) | -| | -| | -| [Powered by Mifos] | -| | -+---------+---------+---------+-------------+ -| | | | | -| 1 | 2 | 3 | | -| | ABC | DEF | | -+---------+---------+---------+-------------+ -| | | | | -| 4 | 5 | 6 | | -| GHI | JKL | MNO | | -+---------+---------+---------+-------------+ -| | | | | -| 7 | 8 | 9 | | -| PQRS | TUV | WXYZ | | -+---------+---------+---------+-------------+ -| | | | | -| | | -|Backspace| | Send | | -+---------+---------+---------+-------------+ -``` - -### 2.3 Verify Passcode Screen (App Unlock) - -``` -+-------------------------------------------+ -| | -| [Lock Icon] | -| (primary color bg) | -| | -| Authenticate | -| | -| Enter your passcode to unlock | -| the app | -| | -| * * * O | -| (3 digits entered) | -| | -| | -| [Powered by Mifos] | -| | -+---------+---------+---------+-------------+ -| | | | | -| 1 | 2 | 3 | | -| | ABC | DEF | | -+---------+---------+---------+-------------+ -| | | | | -| 4 | 5 | 6 | | -| GHI | JKL | MNO | | -+---------+---------+---------+-------------+ -| | | | | -| 7 | 8 | 9 | | -| PQRS | TUV | WXYZ | | -+---------+---------+---------+-------------+ -| | | | | -| | | -|Backspace| | Send | | -+---------+---------+---------+-------------+ -``` - -### 2.4 Error State (Mismatched/Wrong Passcode) - -``` -+-------------------------------------------+ -| | -| [Lock Icon] | -| | -| Set Up Passcode | -| | -| Choose a 4-digit PIN to secure | -| your account | -| | -| O O O O | -| (red border - error state) | -| | -+-------------------------------------------+ -``` - -### 2.5 Sections Table - -| # | Screen | Description | Priority | -|---|--------|-------------|----------| -| 1 | PasscodeScreen | Initial passcode setup (Set mode) | P0 | -| 2 | PasscodeScreen | Confirm passcode (Confirm mode) | P0 | -| 3 | VerifyPasscodeScreen | Verify passcode on app unlock | P0 | -| 4 | NumericKeyboard | Shared keyboard component | P0 | - ---- - -## 3. User Interactions - -| Action | Trigger | Result | API Call | -|--------|---------|--------|----------| -| Enter Digit | Tap digit key (0-9) | Appends digit to passcode, fills dot indicator | None (Local) | -| Delete Digit | Tap backspace key | Removes last digit, unfills dot indicator | None (Local) | -| Submit Passcode (Set) | Auto on 4th digit | Transitions to Confirm mode | None (Local) | -| Submit Passcode (Confirm) | Auto on 4th digit | Validates match, saves to storage | None (Local) | -| Submit Passcode (Verify) | Auto on 4th digit | Validates against stored, navigates forward | None (Local) | -| Mismatch Error | Passcodes don't match | Shows error state, resets to Set mode | None (Local) | -| Wrong Passcode | Verify fails | Shows error state, clears input | None (Local) | - ---- - -## 4. State Model - -### 4.1 Set/Confirm Passcode State (PasscodeViewModel) - -```kotlin -// PasscodeState - Used for setting up new passcode -internal data class PasscodeState( - internal val storedPasscode: String = "", - val maxDigits: Int = 4, - val filledDots: Int = 0, - val passcode: String = "", - val mode: PasscodeMode = PasscodeMode.Set, - val firstPasscode: String = "", - val passcodeError: Boolean = false, -) - -// PasscodeMode - Current phase of passcode setup -enum class PasscodeMode { - Set, // Initial entry - Confirm, // Re-entry for confirmation -} - -// PasscodeEvent - One-time effects -internal sealed interface PasscodeEvent { - data class OnPasscodeConfirm( - val eventType: String, // "SUCCESS" - val eventDestination: String, // "UNLOCKED" - val title: String, // "Setup Successful" - val subtitle: String, // "Your passcode has been set" - val buttonText: String, // "Continue" - ) : PasscodeEvent -} - -// PasscodeAction - User interactions -internal sealed interface PasscodeAction { - data object OnContinueClick : PasscodeAction - data object OnBackspaceClick : PasscodeAction - data class OnDigitClick(val digit: String) : PasscodeAction -} -``` - -### 4.2 Verify Passcode State (VerifyPasscodeViewModel) - -```kotlin -// VerifyPasscodeState - Used for verifying existing passcode -internal data class VerifyPasscodeState( - internal val storedPasscode: String = "", - val maxDigits: Int = 4, - val filledDots: Int = 0, - val passcode: String = "", - val passcodeError: Boolean = false, -) - -// VerifyPasscodeEvent - One-time effects -internal sealed interface VerifyPasscodeEvent { - data object PasscodeAccepted : VerifyPasscodeEvent -} - -// VerifyPasscodeAction - User interactions -internal sealed interface VerifyPasscodeAction { - data object OnContinueClick : VerifyPasscodeAction - data object OnBackspaceClick : VerifyPasscodeAction - data class OnDigitClick(val digit: String) : VerifyPasscodeAction -} -``` - -### 4.3 Library Passcode State (mifos-passcode library) - -```kotlin -// PasscodeState - Full-featured passcode with visibility toggle -@Parcelize -data class PasscodeState( - val hasPasscode: Boolean = false, - val activeStep: Step = Step.Create, - val filledDots: Int = 0, - val passcodeVisible: Boolean = false, - val currentPasscodeInput: String = "", - val isPasscodeAlreadySet: Boolean = false, -) : Parcelable - -// Step enum -enum class Step(var index: Int) { - Create(0), - Confirm(1), -} - -// Constants -object Constants { - const val STEPS_COUNT = 2 - const val PASSCODE_LENGTH = 4 - const val VIBRATE_FEEDBACK_DURATION = 300L -} -``` - ---- - -## 5. API Requirements - -| Endpoint | Method | Purpose | Status | -|----------|--------|---------|--------| -| N/A | N/A | This is a local-only feature | N/A | - -> **Note**: The Passcode feature does not require any API calls. All passcode data is stored locally on the device using DataStore preferences. - ---- - -## 6. Local Storage - -### 6.1 Storage Mechanism -The passcode is stored using `multiplatform-settings` library with serialization: - -```kotlin -@Serializable -data class PasscodePreferencesProto( - val passcode: String, - val hasPasscode: Boolean, -) { - companion object { - val DEFAULT = PasscodePreferencesProto(passcode = "", hasPasscode = false) - } -} - -// Storage key -private const val PASSCODE_INFO_KEY = "passcodeInfo" -``` - -### 6.2 PasscodeManager API - -```kotlin -class PasscodeManager { - val getPasscode: StateFlow // Current stored passcode - val hasPasscode: StateFlow // Whether passcode is set - - suspend fun savePasscode(passcode: String) // Save new passcode - suspend fun clearPasscode() // Clear stored passcode -} -``` - -### 6.3 UserPreferencesRepository Integration - -```kotlin -interface UserPreferencesRepository { - val passcode: Flow - suspend fun setPasscode(passcode: String) -} -``` - ---- - -## 7. Validation Rules - -| Rule | Validation | Error Behavior | -|------|------------|----------------| -| Passcode Length | Exactly 4 digits | Cannot submit until 4 digits entered | -| Digits Only | All characters must be 0-9 | Non-digit input ignored | -| Passcode Match | Confirm must match initial | Shows error, resets to Set mode | -| Verify Match | Input must match stored | Shows error, clears input | - ---- - -## 8. Edge Cases & Error Handling - -| Scenario | Handling | -|----------|----------| -| Passcode mismatch during setup | Display error state (red dots), reset to Set mode, clear input | -| Wrong passcode during verification | Display error state (red border), clear input, allow retry | -| Rapid digit entry | Input capped at maxDigits (4), extra taps ignored | -| Backspace on empty | No-op, safely ignored | -| App killed during setup | Passcode not saved until confirmed, restart setup flow | -| No stored passcode on verify | Should not happen - navigation logic prevents this | -| Multiple 4th digit attempts | Auto-validates on 4th digit, no manual submit needed | - ---- - -## 9. Navigation Flow - -``` -PASSCODE_GRAPH -├── PasscodeRoute.Standard (Set/Confirm) -│ └── On Success → StatusScreen → MAIN_GRAPH -│ -└── VerifyPasscodeRoute.Standard (Verify) - └── On Success → MAIN_GRAPH (HomeScreen) - -Navigation Integration: -- After login: AUTH_GRAPH → PASSCODE_GRAPH (PasscodeRoute) -- On app resume: ROOT_GRAPH → PASSCODE_GRAPH (VerifyPasscodeRoute) -``` - ---- - -## 10. UI Components - -### 10.1 NumericKeyboard - -```kotlin -@Composable -fun NumericKeyboard( - onDigitClick: (String) -> Unit, - onBackspaceClick: () -> Unit, - onSendClick: () -> Unit, - isSendEnabled: Boolean, - modifier: Modifier = Modifier, -) - -// Key types -sealed class PasscodeKey { - data class Digit(val number: String) : PasscodeKey() - object Backspace : PasscodeKey() - object Send : PasscodeKey() -} -``` - -### 10.2 Digit Button with Letters - -```kotlin -@Composable -fun DigitKeyButton( - digit: String, - letters: String, // e.g., "ABC" for digit "2" - onClick: () -> Unit, -) - -// Letter mapping -fun getLettersForDigit(digit: String): String { - return when (digit) { - "2" -> "ABC" - "3" -> "DEF" - "4" -> "GHI" - "5" -> "JKL" - "6" -> "MNO" - "7" -> "PQRS" - "8" -> "TUV" - "9" -> "WXYZ" - else -> "" - } -} -``` - -### 10.3 Dot Indicators - -- Empty state: Transparent fill with primary border -- Filled state: Primary color fill with primary border -- Error state: Error color border (and fill for already-filled dots) - ---- - -## 11. Dependency Injection - -```kotlin -val PasscodeModule = module { - viewModelOf(::PasscodeViewModel) - viewModelOf(::VerifyPasscodeViewModel) -} -``` - -Dependencies: -- `PasscodeViewModel`: UserPreferencesRepository -- `VerifyPasscodeViewModel`: UserPreferencesRepository, ResultNavigator - ---- - -## Changelog - -| Date | Change | -|------|--------| -| 2025-12-29 | Initial specification created from implementation analysis | diff --git a/claude-product-cycle/design-spec-layer/features/passcode/STATUS.md b/claude-product-cycle/design-spec-layer/features/passcode/STATUS.md deleted file mode 100644 index ca61a301e..000000000 --- a/claude-product-cycle/design-spec-layer/features/passcode/STATUS.md +++ /dev/null @@ -1,62 +0,0 @@ -# Passcode - Implementation Status - -> **Last Updated**: 2025-12-29 -> **Overall Status**: ✅ Done - ---- - -## Implementation Checklist - -- [x] SPEC.md created -- [x] API.md created -- [x] Data: PasscodeManager exists (local-only, no network) -- [x] Feature: ViewModel + Screen (Passcode) -- [x] Feature: ViewModel + Screen (VerifyPasscode) -- [x] Navigation: Routes registered -- [x] DI: Modules registered -- [x] STATUS.md updated - ---- - -## Layer Status - -| Layer | Status | Files | -|-------|--------|-------| -| Data (Local) | ✅ | PasscodeManager.kt, PasscodePreferencesDataSource.kt | -| Feature (Setup) | ✅ | PasscodeViewModel.kt, PasscodeScreen.kt | -| Feature (Verify) | ✅ | VerifyPasscodeViewModel.kt, VerifyPasscodeScreen.kt | -| DI | ✅ | PasscodeModule.kt | -| Navigation | ✅ | PasscodeNavigation.kt, VerifyPasscodeNavigation.kt | - ---- - -## Files - -### Data Layer (Local-Only) -- `libs/mifos-passcode/src/commonMain/kotlin/org/mifos/library/passcode/data/PasscodeManager.kt` -- `libs/mifos-passcode/src/commonMain/kotlin/org/mifos/library/passcode/data/PasscodePreferencesDataSource.kt` - -### Feature Layer (Setup) -- `feature/passcode/src/commonMain/kotlin/org/mifos/mobile/feature/passcode/PasscodeViewModel.kt` -- `feature/passcode/src/commonMain/kotlin/org/mifos/mobile/feature/passcode/PasscodeScreen.kt` -- `feature/passcode/src/commonMain/kotlin/org/mifos/mobile/feature/passcode/di/PasscodeModule.kt` -- `feature/passcode/src/commonMain/kotlin/org/mifos/mobile/feature/passcode/navigation/PasscodeNavigation.kt` - -### Feature Layer (Verify) -- `feature/passcode/src/commonMain/kotlin/org/mifos/mobile/feature/passcode/verifyPasscode/VerifyPasscodeViewModel.kt` -- `feature/passcode/src/commonMain/kotlin/org/mifos/mobile/feature/passcode/verifyPasscode/VerifyPasscodeScreen.kt` -- `feature/passcode/src/commonMain/kotlin/org/mifos/mobile/feature/passcode/verifyPasscode/VerifyPasscodeNavigation.kt` - ---- - -## Gaps - -None identified. - ---- - -## Changelog - -| Date | Change | -|------|--------| -| 2025-12-29 | Initial status documentation | diff --git a/claude-product-cycle/design-spec-layer/features/passcode/mockups/FIGMA_LINKS.md b/claude-product-cycle/design-spec-layer/features/passcode/mockups/FIGMA_LINKS.md deleted file mode 100644 index faa434304..000000000 --- a/claude-product-cycle/design-spec-layer/features/passcode/mockups/FIGMA_LINKS.md +++ /dev/null @@ -1,61 +0,0 @@ -# Passcode Feature - Figma Links - -> **Feature**: Passcode (Secure Gateway Experience) -> **Status**: Pending Design Export -> **Last Updated**: 2025-01-04 - ---- - -## Figma Design Links - -After generating designs using AI tools (Stitch/Figma), paste the links below: - -### Main Screens - -| Screen | Figma Link | Status | -|--------|------------|--------| -| Biometric Entry | `[Paste link here]` | Pending | -| Passcode Entry | `[Paste link here]` | Pending | -| Create Passcode | `[Paste link here]` | Pending | -| Confirm Passcode | `[Paste link here]` | Pending | -| Change Passcode | `[Paste link here]` | Pending | -| Success Screen | `[Paste link here]` | Pending | -| Error/Locked State | `[Paste link here]` | Pending | -| Forgot Passcode | `[Paste link here]` | Pending | - -### Component Library - -| Component | Figma Link | Status | -|-----------|------------|--------| -| Passcode Dots | `[Paste link here]` | Pending | -| Numpad Grid | `[Paste link here]` | Pending | -| Numpad Button | `[Paste link here]` | Pending | -| Biometric Icon | `[Paste link here]` | Pending | -| Strength Meter | `[Paste link here]` | Pending | -| Attempt Counter | `[Paste link here]` | Pending | -| Security Tip Card | `[Paste link here]` | Pending | - -### Dark Mode Variants - -| Screen | Figma Link | Status | -|--------|------------|--------| -| Biometric Entry (Dark) | `[Paste link here]` | Pending | -| Passcode Entry (Dark) | `[Paste link here]` | Pending | - ---- - -## Export Checklist - -- [ ] Export all screens at 1x, 2x, 3x -- [ ] Export component assets as SVG -- [ ] Document color variables -- [ ] Create prototype connections -- [ ] Add interaction annotations -- [ ] Review accessibility contrast -- [ ] Verify dark mode mappings - ---- - -## Notes - -_Add any design notes, feedback, or revision history here._ diff --git a/claude-product-cycle/design-spec-layer/features/passcode/mockups/PROMPTS.md b/claude-product-cycle/design-spec-layer/features/passcode/mockups/PROMPTS.md deleted file mode 100644 index 71f890df2..000000000 --- a/claude-product-cycle/design-spec-layer/features/passcode/mockups/PROMPTS.md +++ /dev/null @@ -1,431 +0,0 @@ -# Passcode Feature - AI Design Tool Prompts - -> **Generated from**: MOCKUP.md v2.0 -> **Design Pattern**: Secure Gateway Experience -> **Primary Gradient**: #667EEA (Purple) -> #764BA2 (Deep Purple) -> **Generated**: 2025-01-04 - ---- - -## Google Stitch Prompts - -### Prompt 1: Biometric Authentication (Primary Entry) - -``` -Create a Biometric Authentication screen as the primary login for a fintech banking app. - -Design specifications: -- Material Design 3 with 2025 security patterns -- Primary gradient: #667EEA to #764BA2 -- Biometric-first, passcode-second design - -Header Section: -- Gradient background covering top third -- User avatar (96dp) with verified badge -- Welcome message: "Welcome back, Maria" -- Last login: "Last seen: Today, 2:45 PM" - -Biometric Prompt Area (Center): -- Large fingerprint/Face ID icon (120dp) with gradient outline -- Pulsing animation ring around icon -- Text: "Touch sensor to unlock" or "Look at camera" -- Subtle glow effect in brand color - -Security Status: -- Shield icon with "Secured with biometrics" -- Device name: "iPhone 15 Pro" - -Alternative Options: -- "Use Passcode Instead" link -- "Not Maria? Switch Account" link - -Footer: -- App logo small -- Version number -- "Forgot passcode?" help link - -Animations: -- Fingerprint icon pulses subtly -- Success: Icon transforms to checkmark with confetti -- Failure: Shake animation with red flash - -Style: Premium security feel, biometric-first, trust-building -``` - -### Prompt 2: Passcode Entry Screen - -``` -Create a Passcode Entry screen for a fintech banking app. - -Design specifications: -- Material Design 3 with secure input patterns -- Gradient header with user context - -Header Section: -- Gradient background: #667EEA to #764BA2 -- User avatar (64dp) -- "Enter your passcode" title -- Subtitle: "4-digit PIN" - -Passcode Dots: -- 4 large dots (16dp each) in horizontal row -- Empty: Outlined circle -- Filled: Gradient filled circle -- Dot animation: Scale up on fill -- Spacing: 24dp between dots - -Numpad: -- 3x4 grid layout -- Numbers 1-9 in top 3 rows -- Bottom row: Biometric icon, 0, Delete icon -- Each button: 72dp circle -- Number text: 28sp bold -- Subtle press animation: Scale 0.95 -- Haptic feedback indicator - -Attempt Counter: -- If wrong: "2 attempts remaining" in warning color -- Progress dots showing attempts - -Security Gamification: -- Streak counter: "12 successful logins" -- Badge: "Trusted User" achievement icon - -Footer Options: -- "Forgot Passcode?" link -- "Use Biometrics" link (if available) - -Error State: -- Dots shake horizontally -- Red outline briefly -- Haptic vibration -- Counter updates - -Style: Secure, clear feedback, gamified trust elements -``` - -### Prompt 3: Create Passcode Flow - -``` -Create a Create Passcode screen for setting up a new PIN in a fintech app. - -Design specifications: -- Material Design 3 with onboarding patterns -- Step progress indicator - -Progress Header: -- Step indicator: "Step 2 of 3" -- Progress bar: 66% filled with gradient -- Back arrow - -Title Section: -- "Create Your Passcode" (24sp bold) -- "Choose a 4-digit PIN you'll remember" (14sp secondary) - -Security Tips Card: -- Light card with security tips: - - "Avoid sequential numbers (1234)" - - "Don't use birthdates" - - "Keep it memorable but unique" -- Collapsible/expandable - -Passcode Dots: -- 4 empty dots, filling as user types -- Gradient fill animation - -Numpad: -- Same 3x4 layout as entry screen -- Numbers 1-9, 0, delete -- No biometric option during creation - -Strength Indicator: -- Below dots: "Passcode Strength" -- Bar showing: Weak (red) -> Medium (yellow) -> Strong (green) -- Updates in real-time based on pattern - -Continue Button: -- "Continue" - disabled until 4 digits entered -- Gradient filled when active -- Leads to confirmation step - -Style: Guided creation, security education, clear progress -``` - -### Prompt 4: Confirm Passcode Screen - -``` -Create a Confirm Passcode screen for verifying new PIN in a fintech app. - -Design specifications: -- Material Design 3 continuation of create flow -- Confirmation step with matching validation - -Progress Header: -- Step indicator: "Step 3 of 3" -- Progress bar: Nearly complete (85%) - -Title Section: -- "Confirm Your Passcode" (24sp bold) -- "Re-enter your 4-digit PIN to confirm" (14sp secondary) - -Visual Reference: -- Small masked display of what was entered: "●●●●" -- "Previously entered" label - -Passcode Dots: -- 4 empty dots for re-entry -- Match indicator when complete: - - Match: Green checkmark animation - - Mismatch: Red X with shake - -Numpad: -- Standard 3x4 layout -- Numbers only, delete - -Match Feedback: -- Success: "Passcodes match!" with checkmark -- Error: "Passcodes don't match. Try again." with reset - -Next Steps Card: -- After success, show: - - "Set up biometrics next?" toggle - - "Enable Face ID / Touch ID for faster login" - -Complete Button: -- "Complete Setup" - appears on match -- Gradient filled -- Leads to success screen - -Style: Clear confirmation flow, immediate feedback, next step promotion -``` - -### Prompt 5: Change Passcode Flow - -``` -Create a Change Passcode screen for updating existing PIN in a fintech app. - -Design specifications: -- Material Design 3 with security update patterns -- Three-step verification flow - -Header: -- Back button -- "Change Passcode" title -- Step indicator - -Current Passcode Step: -- "Enter Current Passcode" title -- 4 passcode dots -- Numpad with biometric option -- "Forgot current passcode?" link - -New Passcode Step (after verification): -- "Create New Passcode" title -- Security tips reminder -- 4 empty dots -- Strength indicator - -Confirm Step: -- "Confirm New Passcode" -- Match validation - -Security Confirmation: -- After success: - - "Passcode Updated Successfully" - - Checkmark animation - - "All your sessions remain active" - - "Last changed: Just now" - -Session Options: -- "Sign out other devices?" optional action -- List of active sessions if multiple - -Style: Secure update flow, session awareness, confirmation -``` - ---- - -## Figma MCP Prompts - -### Prompt 1: Passcode Entry Frame - -``` -Create a Figma frame for "Passcode - Entry Screen" mobile screen (375x812px). - -Components needed: -1. Status bar (system) - -2. Header Component: - - Gradient background: #667EEA to #764BA2 - - Avatar with verified badge (64dp) - - Title and subtitle text - -3. Passcode Dots Component: - - 4 circle variants: empty, filled, error - - Gradient fill for filled state - - Horizontal layout with 24dp gap - - Animation state indicators - -4. Numpad Component: - - 3x4 grid - - Number button (72dp circle): - - Default, pressed, disabled states - - Special buttons: biometric, delete icons - - Consistent typography: 28sp bold - -5. Attempt Counter: - - Warning text variant - - Attempt dots - -6. Footer Links: - - Text links with tap targets - -Design tokens: -- Primary: #667EEA -- Secondary: #764BA2 -- Success: #00D09C -- Error: #FF4757 -- Surface: #FFFFFF -- Numpad button: #F8F9FA -``` - -### Prompt 2: Complete Passcode Flow - -``` -Create a Figma prototype flow for Passcode feature with these frames: - -Frame 1: Biometric Entry (default) -- Face ID / Touch ID prompt -- User welcome -- Fallback to passcode link - -Frame 2: Passcode Entry -- Gradient header with avatar -- 4 passcode dots -- Numpad grid -- Biometric shortcut - -Frame 3: Create Passcode -- Progress indicator -- Security tips -- Empty dots -- Strength meter - -Frame 4: Confirm Passcode -- Progress near complete -- Re-entry dots -- Match/mismatch states - -Frame 5: Change Passcode -- Current passcode verification -- New passcode creation -- Confirmation step - -Frame 6: Success Screen -- Checkmark animation -- Confirmation message -- Continue button - -Frame 7: Error States -- Max attempts warning -- Locked account state -- Recovery options - -Prototype connections: -- Biometric -> Success or Passcode fallback -- Passcode entry dots fill on numpad tap -- Wrong passcode shows error state -- Create flow progresses through steps - -Component variants: -- Passcode dot: empty/filled/error/success -- Numpad button: default/pressed/disabled -- Strength meter: weak/medium/strong -``` - ---- - -## Design Tokens - -```json -{ - "feature": "passcode", - "version": "2.0", - "designPattern": "Secure Gateway Experience", - "colors": { - "primary": "#667EEA", - "secondary": "#764BA2", - "success": "#00D09C", - "error": "#FF4757", - "warning": "#FFB800", - "surface": "#FFFFFF", - "background": "#F8F9FA" - }, - "components": { - "passcodeDot": { - "size": 16, - "gap": 24, - "emptyBorder": 2, - "variants": { - "empty": { "border": "#E1E4E8", "fill": "transparent" }, - "filled": { "border": "gradient", "fill": "gradient" }, - "error": { "border": "#FF4757", "fill": "#FF4757" }, - "success": { "border": "#00D09C", "fill": "#00D09C" } - } - }, - "numpadButton": { - "size": 72, - "fontSize": 28, - "background": "#F8F9FA", - "pressedScale": 0.95 - }, - "biometricIcon": { - "size": 120, - "strokeWidth": 3, - "pulseScale": 1.1 - }, - "strengthMeter": { - "height": 4, - "radius": 2, - "segments": 3, - "colors": { - "weak": "#FF4757", - "medium": "#FFB800", - "strong": "#00D09C" - } - } - }, - "animation": { - "dotFill": { - "duration": 150, - "scale": 1.2 - }, - "errorShake": { - "duration": 400, - "distance": 10 - }, - "biometricPulse": { - "duration": 2000, - "type": "infinite" - }, - "successCheck": { - "duration": 500, - "type": "draw-stroke" - } - } -} -``` - ---- - -## Screen Checklist - -| Screen | Stitch Prompt | Figma Prompt | Status | -|--------|---------------|--------------|--------| -| Biometric Entry | 1 | 2 | Ready | -| Passcode Entry | 2 | 1, 2 | Ready | -| Create Passcode | 3 | 2 | Ready | -| Confirm Passcode | 4 | 2 | Ready | -| Change Passcode | 5 | 2 | Ready | -| Success Screen | - | 2 | Pending | -| Error/Locked States | - | 2 | Pending | diff --git a/claude-product-cycle/design-spec-layer/features/passcode/mockups/design-tokens.json b/claude-product-cycle/design-spec-layer/features/passcode/mockups/design-tokens.json deleted file mode 100644 index f680db516..000000000 --- a/claude-product-cycle/design-spec-layer/features/passcode/mockups/design-tokens.json +++ /dev/null @@ -1,241 +0,0 @@ -{ - "feature": "passcode", - "version": "2.0", - "designPattern": "Secure Gateway Experience", - "lastUpdated": "2025-01-04", - "colors": { - "primary": { - "default": "#667EEA", - "dark": "#5A6FD6" - }, - "secondary": { - "default": "#764BA2", - "dark": "#6A4292" - }, - "success": { - "default": "#00D09C", - "light": "#00D09C15" - }, - "error": { - "default": "#FF4757", - "light": "#FF475715" - }, - "warning": { - "default": "#FFB800", - "light": "#FFB80015" - }, - "surface": { - "light": "#FFFFFF", - "dark": "#1A1F2E" - }, - "background": { - "light": "#F8F9FA", - "dark": "#0D1117" - }, - "numpad": { - "button": { - "light": "#F8F9FA", - "dark": "#21262D" - }, - "pressed": { - "light": "#E1E4E8", - "dark": "#30363D" - } - }, - "text": { - "primary": { - "light": "#1F2937", - "dark": "#F0F6FC" - }, - "secondary": { - "light": "#6B7280", - "dark": "#8B949E" - }, - "onGradient": "#FFFFFF" - } - }, - "gradients": { - "primary": { - "type": "linear", - "angle": 135, - "stops": [ - { "color": "#667EEA", "position": 0 }, - { "color": "#764BA2", "position": 100 } - ] - }, - "success": { - "type": "linear", - "angle": 135, - "stops": [ - { "color": "#00D09C", "position": 0 }, - { "color": "#38EF7D", "position": 100 } - ] - }, - "biometricGlow": { - "type": "radial", - "stops": [ - { "color": "#667EEA40", "position": 0 }, - { "color": "transparent", "position": 100 } - ] - } - }, - "typography": { - "fontFamily": { - "primary": "Inter", - "mono": "JetBrains Mono" - }, - "styles": { - "h1": { "size": 28, "weight": 700, "lineHeight": 1.2 }, - "h2": { "size": 24, "weight": 700, "lineHeight": 1.3 }, - "numpadNumber": { "size": 28, "weight": 700, "lineHeight": 1 }, - "subtitle": { "size": 16, "weight": 500, "lineHeight": 1.5 }, - "body": { "size": 14, "weight": 400, "lineHeight": 1.5 }, - "caption": { "size": 12, "weight": 400, "lineHeight": 1.4 } - } - }, - "spacing": { - "xs": 4, - "sm": 8, - "md": 16, - "lg": 24, - "xl": 32, - "xxl": 48 - }, - "radius": { - "sm": 8, - "md": 12, - "lg": 16, - "xl": 20, - "full": 9999 - }, - "components": { - "passcodeDot": { - "size": 16, - "gap": 24, - "borderWidth": 2, - "variants": { - "empty": { - "borderColor": "#E1E4E8", - "fillColor": "transparent" - }, - "filled": { - "borderColor": "gradient", - "fillColor": "gradient" - }, - "error": { - "borderColor": "#FF4757", - "fillColor": "#FF4757" - }, - "success": { - "borderColor": "#00D09C", - "fillColor": "#00D09C" - } - } - }, - "numpadButton": { - "size": 72, - "fontSize": 28, - "fontWeight": 700, - "gap": 16, - "variants": { - "default": { - "background": "#F8F9FA", - "textColor": "#1F2937" - }, - "pressed": { - "background": "#E1E4E8", - "scale": 0.95 - }, - "disabled": { - "background": "#F8F9FA", - "textColor": "#9CA3AF" - } - } - }, - "biometricIcon": { - "containerSize": 160, - "iconSize": 120, - "strokeWidth": 3, - "glowRadius": 80 - }, - "strengthMeter": { - "height": 4, - "radius": 2, - "gap": 4, - "segments": 3, - "colors": { - "weak": "#FF4757", - "medium": "#FFB800", - "strong": "#00D09C" - } - }, - "attemptDot": { - "size": 8, - "gap": 8, - "colors": { - "remaining": "#E1E4E8", - "used": "#FF4757" - } - }, - "securityTip": { - "padding": 16, - "radius": 12, - "iconSize": 20, - "gap": 12 - }, - "header": { - "height": 200, - "avatarSize": 64, - "gap": 12 - } - }, - "animation": { - "dotFill": { - "duration": 150, - "scale": 1.2, - "easing": "cubic-bezier(0.4, 0.0, 0.2, 1)" - }, - "errorShake": { - "duration": 400, - "distance": 10, - "iterations": 3, - "easing": "cubic-bezier(0.36, 0.07, 0.19, 0.97)" - }, - "biometricPulse": { - "duration": 2000, - "scale": 1.1, - "type": "infinite", - "easing": "ease-in-out" - }, - "successCheck": { - "duration": 500, - "type": "draw-stroke", - "easing": "cubic-bezier(0.4, 0.0, 0.2, 1)" - }, - "numpadPress": { - "duration": 100, - "scale": 0.95, - "easing": "cubic-bezier(0.4, 0.0, 0.2, 1)" - }, - "strengthMeterFill": { - "duration": 300, - "easing": "cubic-bezier(0.4, 0.0, 0.2, 1)" - } - }, - "haptics": { - "keyPress": "light", - "success": "success", - "error": "error", - "biometricPrompt": "medium" - }, - "screens": [ - "biometricEntry", - "passcodeEntry", - "createPasscode", - "confirmPasscode", - "changePasscode", - "successScreen", - "errorLocked", - "forgotPasscode" - ] -} diff --git a/claude-product-cycle/design-spec-layer/features/passcode/mockups/dummy/01-biometric-entry.png b/claude-product-cycle/design-spec-layer/features/passcode/mockups/dummy/01-biometric-entry.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/passcode/mockups/dummy/02-passcode-entry.png b/claude-product-cycle/design-spec-layer/features/passcode/mockups/dummy/02-passcode-entry.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/passcode/mockups/dummy/03-create-passcode.png b/claude-product-cycle/design-spec-layer/features/passcode/mockups/dummy/03-create-passcode.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/passcode/mockups/dummy/04-confirm-passcode.png b/claude-product-cycle/design-spec-layer/features/passcode/mockups/dummy/04-confirm-passcode.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/passcode/mockups/dummy/05-change-passcode.png b/claude-product-cycle/design-spec-layer/features/passcode/mockups/dummy/05-change-passcode.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/passcode/mockups/dummy/06-passcode-success.png b/claude-product-cycle/design-spec-layer/features/passcode/mockups/dummy/06-passcode-success.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/passcode/mockups/dummy/07-passcode-locked.png b/claude-product-cycle/design-spec-layer/features/passcode/mockups/dummy/07-passcode-locked.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/qr/API.md b/claude-product-cycle/design-spec-layer/features/qr/API.md deleted file mode 100644 index 76bae8fd9..000000000 --- a/claude-product-cycle/design-spec-layer/features/qr/API.md +++ /dev/null @@ -1,400 +0,0 @@ -# QR Code - API Reference - -> **Feature Type**: Local-Only Processing -> **Network Calls**: None -> **Last Updated**: 2025-12-29 - ---- - -## Overview - -The QR Code feature is a **local-only feature** that does not make any API calls to the Mifos backend. All QR code generation, scanning, and decoding operations happen entirely on the client device. - ---- - -## Local-Only Architecture - -### Why No API Calls? - -1. **Privacy**: Beneficiary data is encoded/decoded locally without server round-trips -2. **Speed**: Instant QR generation and scanning without network latency -3. **Offline Support**: Feature works without internet connectivity -4. **Simplicity**: No server-side infrastructure needed for QR operations - ---- - -## QR Code Data Format - -### Beneficiary JSON Schema - -The QR code encodes a `Beneficiary` object as a JSON string: - -```json -{ - "id": null, - "name": "string | null", - "officeName": "Office Name", - "clientName": "John Doe", - "accountType": { - "id": 2, - "code": "accountType.savings", - "value": "Savings Account" - }, - "accountNumber": "SA-0001234567", - "transferLimit": null -} -``` - -### Field Definitions - -| Field | Type | Required | Description | -|-------|------|----------|-------------| -| id | Long? | No | Beneficiary ID (null for new) | -| name | String? | No | Display name | -| officeName | String? | Yes | Office/branch name | -| clientName | String? | Yes | Account holder name | -| accountType | AccountType? | Yes | Account type object | -| accountNumber | String? | Yes | Account number | -| transferLimit | Double? | No | Maximum transfer amount | - -### AccountType Object - -| Field | Type | Description | -|-------|------|-------------| -| id | Int? | Type identifier (e.g., 2 for savings) | -| code | String? | Type code (e.g., "accountType.savings") | -| value | String? | Display value (e.g., "Savings Account") | - ---- - -## Kotlin Data Classes - -### Beneficiary - -```kotlin -@Serializable -@Parcelize -data class Beneficiary( - val id: Long? = null, - val name: String? = null, - val officeName: String? = null, - val clientName: String? = null, - val accountType: AccountType? = null, - val accountNumber: String? = null, - val transferLimit: Double? = null, -) : Parcelable -``` - -### AccountType - -```kotlin -@Serializable -@Parcelize -data class AccountType( - val id: Int? = null, - val code: String? = null, - val value: String? = null, -) : Parcelable -``` - ---- - -## QR Code Generation - -### Function Signature - -```kotlin -fun getAccountDetailsInString( - clientName: String, - accountNumber: String, - accountType: AccountType, - officeName: String, -): String -``` - -### Implementation - -```kotlin -fun getAccountDetailsInString( - clientName: String, - accountNumber: String, - accountType: AccountType, - officeName: String, -): String { - val payload = Beneficiary( - clientName = clientName, - accountNumber = accountNumber, - accountType = accountType, - officeName = officeName, - ) - return Json.encodeToString(payload) -} -``` - -### Example Output - -Input: -- clientName: "Maria Garcia" -- accountNumber: "SA-0005678901" -- accountType: AccountType(id=2, code="accountType.savings", value="Savings Account") -- officeName: "Head Office" - -Output (JSON String): -```json -{"id":null,"name":null,"officeName":"Head Office","clientName":"Maria Garcia","accountType":{"id":2,"code":"accountType.savings","value":"Savings Account"},"accountNumber":"SA-0005678901","transferLimit":null} -``` - ---- - -## QR Code Decoding - -### Function Signature - -```kotlin -expect fun decodeQrCode(bitmap: ImageBitmap): String? -``` - -### Platform Implementations - -| Platform | Implementation | -|----------|----------------| -| Android | ML Kit Barcode Scanning | -| iOS | CoreImage CIDetector | -| Desktop | ZXing library | -| Web (JS) | ZXing-JS library | -| Web (WASM) | ZXing-JS library | - -### Decoding Flow - -```kotlin -// 1. Decode QR from image -val result = decodeQrCode(bitmap)?.trim() - -// 2. Validate JSON format -val isJsonWrapped = result?.startsWith("{") == true && result.endsWith("}") -if (!isJsonWrapped) { - showError(Res.string.feature_qr_invalid) - return -} - -// 3. Parse to Beneficiary -try { - val beneficiary = Json.decodeFromString(result) - // Navigate to beneficiary application -} catch (e: Exception) { - showError(Res.string.feature_qr_invalid) -} -``` - ---- - -## QR Code Styling Options - -### QR Display Configuration - -```kotlin -val options = QrOptions( - shapes = QrShapes( - code = QrCodeShape.Default, - lightPixel = QrPixelShape.circle(), - darkPixel = QrPixelShape.circle(), - ball = QrBallShape.roundCorners(0.2f), - frame = QrFrameShape.roundCorners(0.2f), - ), - colors = QrColors( - light = QrBrush.solid(Color(0xFFFFFFFF)), // White - dark = QrBrush.solid(Color(0xFF0673BA)), // Mifos Blue - ball = QrBrush.solid(Color(0xFF6e6e6e)), // Gray - frame = QrBrush.solid(Color(0xFF6e6e6e)), // Gray - ), - errorCorrectionLevel = QrErrorCorrectionLevel.Medium, -) -``` - -### Color Palette - -| Element | Color Code | Usage | -|---------|------------|-------| -| Light pixels | #FFFFFF | Background modules | -| Dark pixels | #0673BA | Data modules (Mifos brand blue) | -| Ball | #6E6E6E | Corner ball elements | -| Frame | #6E6E6E | Corner frame elements | - ---- - -## Supported Code Types - -```kotlin -enum class CodeType { - Codabar, - Code39, - Code93, - Code128, - EAN8, - EAN13, - ITF, - UPCE, - Aztec, - DataMatrix, - PDF417, - QR, // Used for beneficiary data -} -``` - -**Note**: Only `CodeType.QR` is used for beneficiary data exchange. - ---- - -## Camera Permission Handling - -### Permission States - -```kotlin -enum class CameraPermissionStatus { - Denied, - Granted, -} -``` - -### Permission Interface - -```kotlin -interface CameraPermissionState { - val status: CameraPermissionStatus - fun requestCameraPermission() - fun goToSettings() -} -``` - -### Permission Flow - -```kotlin -@Composable -fun QrScannerWithPermissions( - types: List, - onScanned: (String) -> Boolean, - permissionDeniedContent: @Composable (CameraPermissionState) -> Unit, -) { - val permissionState = rememberCameraPermissionState() - - LaunchedEffect(Unit) { - if (permissionState.status == CameraPermissionStatus.Denied) { - permissionState.requestCameraPermission() - } - } - - if (permissionState.status == CameraPermissionStatus.Granted) { - QrCodeScanner(types = types, onScanned = onScanned) - } else { - permissionDeniedContent(permissionState) - } -} -``` - ---- - -## Error Handling - -### Error Types - -| Error | Cause | Message Resource | -|-------|-------|------------------| -| Invalid QR | Non-JSON content or invalid format | `feature_qr_invalid` | -| Parse Error | JSON parsing exception | `feature_qr_error` | -| Decode Failure | Unable to read QR from image | `feature_qr_invalid` | - -### Validation Rules - -1. **JSON Wrapper Check**: Content must start with `{` and end with `}` -2. **Deserialization**: Must successfully parse to `Beneficiary` class -3. **Null Handling**: All fields are nullable, but core fields should be present - ---- - -## Integration with Beneficiary Feature - -### Navigation After Successful Scan - -```kotlin -// From QrCodeReaderViewModel -QrCodeReaderEvent.NavigateToBeneficiary( - beneficiary = beneficiary, - beneficiaryState = BeneficiaryState.CREATE_QR, -) - -// From QrCodeImportViewModel -QrCodeImportEvent.OpenBeneficiaryApplication( - beneficiary = beneficiary, - beneficiaryState = BeneficiaryState.CREATE_QR, -) -``` - -### BeneficiaryState Enum - -```kotlin -enum class BeneficiaryState { - CREATE, // Manual creation - CREATE_QR, // Created from QR scan - UPDATE, // Editing existing - VIEW, // View only -} -``` - ---- - -## Dependencies - -### External Libraries - -| Library | Purpose | Platform | -|---------|---------|----------| -| qrose | QR code generation | All (Compose Multiplatform) | -| ML Kit Barcode | QR decoding | Android | -| CoreImage | QR decoding | iOS | -| ZXing | QR decoding | Desktop | -| ZXing-JS | QR decoding | Web | - -### Core Modules - -| Module | Purpose | -|--------|---------| -| core:qrcode | Platform-specific QR utilities | -| core:model | Beneficiary, AccountType DTOs | -| core:ui | Base ViewModel, EventsEffect | -| core:designsystem | UI components, theming | - ---- - -## Sample QR Code Content - -### Minimal Valid QR - -```json -{"clientName":"Test User","accountNumber":"123456","accountType":{"id":2},"officeName":"Main"} -``` - -### Full QR with All Fields - -```json -{ - "id": 1001, - "name": "Maria's Savings", - "officeName": "Head Office", - "clientName": "Maria Garcia", - "accountType": { - "id": 2, - "code": "accountType.savings", - "value": "Savings Account" - }, - "accountNumber": "SA-0005678901", - "transferLimit": 10000.00 -} -``` - ---- - -## Changelog - -| Date | Change | -|------|--------| -| 2025-12-29 | Initial documentation for local-only QR feature | diff --git a/claude-product-cycle/design-spec-layer/features/qr/MOCKUP.md b/claude-product-cycle/design-spec-layer/features/qr/MOCKUP.md deleted file mode 100644 index 1f474c598..000000000 --- a/claude-product-cycle/design-spec-layer/features/qr/MOCKUP.md +++ /dev/null @@ -1,1617 +0,0 @@ -# QR Code - UI Mockups v2.0 - -> **Design Pattern**: Smart Pay Hub -> **Design Style**: 2025 Fintech (Instant Payments + Social Split) -> **Gradient Theme**: Primary Purple-Blue (#667EEA → #764BA2) -> **Version**: 2.0 - Major redesign with smart payment patterns -> **Last Updated**: 2025-12-30 - ---- - -## Design Philosophy - -The QR Code feature transforms from a simple scanner into a **Smart Pay Hub** - a social payments center that makes sending and receiving money feel modern and connected. Key innovations: - -1. **Unified Pay Experience** - Scan, generate, and request in one flow -2. **Social Split** - Request from multiple friends at once -3. **QR Wallet** - History of scans and payments -4. **Dynamic QR** - Time-limited codes with expiry timer -5. **Smart Detection** - Auto-detect QR type and context - ---- - -## Table of Contents - -1. [Screen States](#screen-states) -2. [Component Breakdown](#component-breakdown) -3. [Interactions & Animations](#interactions--animations) -4. [Accessibility](#accessibility) -5. [Dark Mode Variant](#dark-mode-variant) - ---- - -## Screen States - -### 1. Smart Pay Hub (Main Screen) - -The central hub with mode switching and quick actions. - -``` -+----------------------------------------------------------+ -| | -| [Status Bar - System] 9:41 AM | -| | -+----------------------------------------------------------+ -| | -| [← Back] Pay [History]| -| | -+----------------------------------------------------------+ -| | -| ╔════════════════════════════════════════════════════╗| -| ║ MODE SELECTOR ║| -| ║ ║| -| ║ ┌────────────┐ ┌────────────┐ ┌────────────┐ ║| -| ║ │░░░░░░░░░░░░│ │ │ │ │ ║| -| ║ │░░ SCAN ░░░░│ │ MY QR │ │ REQUEST │ ║| -| ║ │░░░░░░░░░░░░│ │ │ │ │ ║| -| ║ └────────────┘ └────────────┘ └────────────┘ ║| -| ║ ║| -| ╚════════════════════════════════════════════════════╝| -| | -| Mode Selector: | -| Height: 48dp | -| Background: #F0F4F8 (pill container) | -| Selected: Gradient pill #667EEA → #764BA2 | -| Unselected: Transparent | -| Animation: Sliding indicator | -| | -| | -| ┌────────────────────────────────────────────────┐ | -| │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ | -| │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ | -| │▓▓ ▓▓│ | -| │▓▓ ╔═══╗ ╔═══╗ ▓▓│ | -| │▓▓ ║ ╚══════════════════════╝ ║ ▓▓│ | -| │▓▓ ▓▓│ | -| │▓▓ ┌─────┐ ▓▓│ | -| │▓▓ │ ═ │ ← Scan line ▓▓│ | -| │▓▓ └─────┘ animation ▓▓│ | -| │▓▓ ▓▓│ | -| │▓▓ ║ ╔══════════════════════╗ ║ ▓▓│ | -| │▓▓ ╚═══╝ ╚═══╝ ▓▓│ | -| │▓▓ ▓▓│ | -| │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ | -| │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ | -| └────────────────────────────────────────────────┘ | -| | -| Camera Preview: | -| Size: Full width - 32dp margin | -| Height: 320dp | -| Overlay: Semi-transparent black 60% | -| Cutout: 240dp x 240dp clear area | -| Corner markers: 4dp stroke, gradient | -| Scan line: Animated gradient line | -| | -| | -| Point camera at QR code to scan | -| ────────────────────────────── | -| 14sp / #6B7280 / Center | -| | -| | -| ┌──────────────────┐ ┌──────────────────┐ | -| │ │ │ │ | -| │ 🔦 Flashlight │ │ 🖼️ From Gallery │ | -| │ │ │ │ | -| └──────────────────┘ └──────────────────┘ | -| | -| Quick Actions: | -| Size: 56dp x 56dp icon + label | -| Background: #F8F9FA | -| Corner: 16dp | -| Gap: 24dp | -| | -| | -| RECENT SCANS | -| ──────────── | -| | -| ┌────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │ | -| │ │ JD │ │ SW │ │ MB │ │ + │ │ | -| │ │ $50 │ │ $25 │ │ $100 │ │ New │ │ | -| │ └──────┘ └──────┘ └──────┘ └──────┘ │ | -| │ John Sarah Mike Scan │ | -| │ │ | -| └────────────────────────────────────────────────┘ | -| | -| Recent Scans: | -| Avatar: 48dp circle | -| Amount badge: Below avatar | -| Name: 12sp / truncated | -| Horizontal scroll | -| | -+----------------------------------------------------------+ -``` - ---- - -### 2. My QR Code Screen (Receive Money) - -Premium QR card with account selection and optional amount. - -``` -+----------------------------------------------------------+ -| | -| [Status Bar] | -| | -+----------------------------------------------------------+ -| | -| [← Back] Pay [History]| -| | -+----------------------------------------------------------+ -| | -| ╔════════════════════════════════════════════════════╗| -| ║ MODE SELECTOR ║| -| ║ ║| -| ║ ┌────────────┐ ┌────────────┐ ┌────────────┐ ║| -| ║ │ │ │░░░░░░░░░░░░│ │ │ ║| -| ║ │ SCAN │ │░░ MY QR ░░░│ │ REQUEST │ ║| -| ║ │ │ │░░░░░░░░░░░░│ │ │ ║| -| ║ └────────────┘ └────────────┘ └────────────┘ ║| -| ║ ║| -| ╚════════════════════════════════════════════════════╝| -| | -| | -| Share to Receive Money | -| ────────────────────── | -| 16sp / Bold / Center | -| | -| | -| ╔════════════════════════════════════════════════════╗| -| ║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║| -| ║░░ ░░░░║| -| ║░░ ░░░░║| -| ║░░ ┌──────────────────────┐ ░░░░║| -| ║░░ │ │ ░░░░║| -| ║░░ │ ▓▓▓▓▓ ▓ ▓▓▓▓▓ │ ░░░░║| -| ║░░ │ ▓ ▓ ▓ ▓ ▓ │ ░░░░║| -| ║░░ │ ▓▓▓▓▓ ▓ ▓▓▓▓▓ │ ░░░░║| -| ║░░ │ ▓ ▓▓▓ ▓ │ ░░░░║| -| ║░░ │ ▓▓▓▓▓ ▓ ▓▓▓▓▓ │ ░░░░║| -| ║░░ │ │ QR ░░░░║| -| ║░░ │ ▓ ▓ ▓ ▓ │ 220dp ░░░░║| -| ║░░ │ ▓ ▓ ▓ ▓ ▓ ▓ │ ░░░░║| -| ║░░ │ ▓▓▓▓▓ ▓▓▓▓▓ │ ░░░░║| -| ║░░ │ │ ░░░░║| -| ║░░ └──────────────────────┘ ░░░░║| -| ║░░ ░░░░║| -| ║░░ ┌──────────────────────┐ ░░░░║| -| ║░░ │ ┌────┐ │ ░░░░║| -| ║░░ │ │ MA │ Maria │ User ░░░░║| -| ║░░ │ └────┘ @maria │ Card ░░░░║| -| ║░░ └──────────────────────┘ ░░░░║| -| ║░░ ░░░░║| -| ║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║| -| ╚════════════════════════════════════════════════════╝| -| | -| QR Card: | -| Background: Gradient #667EEA → #764BA2 | -| Corner: 28dp | -| Shadow: 0 12 40 #667EEA@35% | -| QR Container: White, 16dp corner, 16dp padding | -| User card: White @15%, 12dp corner | -| | -| | -| ┌────────────────────────────────────────────────┐ | -| │ │ | -| │ 💼 Receive Into ▼ │ | -| │ Savings Account ****4521 │ | -| │ Balance: $8,542.00 │ | -| │ │ | -| └────────────────────────────────────────────────┘ | -| | -| Account Selector: | -| Background: #F8F9FA | -| Border: 1dp #E1E4E8 | -| Corner: 16dp | -| Height: 72dp | -| | -| | -| ┌────────────────────────────────────────────────┐ | -| │ │ | -| │ 💰 Request Specific Amount (Optional) │ | -| │ │ | -| │ $ 0.00 │ | -| │ ════════ │ | -| │ 32sp / Bold │ | -| │ │ | -| │ ┌─────┐ ┌─────┐ ┌─────┐ ┌──────┐ │ | -| │ │ +10 │ │ +50 │ │ +100│ │ +500 │ │ | -| │ └─────┘ └─────┘ └─────┘ └──────┘ │ | -| │ │ | -| └────────────────────────────────────────────────┘ | -| | -| | -| ┌────────────────┐ ┌────────────────┐ | -| │ │ │ │ | -| │ 📤 Share │ │ 💾 Save │ | -| │ │ │ │ | -| └────────────────┘ └────────────────┘ | -| | -| Action Buttons: | -| Width: 48% each | -| Height: 52dp | -| Share: Gradient filled | -| Save: Outlined #667EEA | -| | -+----------------------------------------------------------+ -``` - ---- - -### 3. Request Money (Split Bill Mode) - -Social payment request with multi-person selection. - -``` -+----------------------------------------------------------+ -| | -| [Status Bar] | -| | -+----------------------------------------------------------+ -| | -| [← Back] Pay [History]| -| | -+----------------------------------------------------------+ -| | -| ╔════════════════════════════════════════════════════╗| -| ║ MODE SELECTOR ║| -| ║ ║| -| ║ ┌────────────┐ ┌────────────┐ ┌────────────┐ ║| -| ║ │ │ │ │ │░░░░░░░░░░░░│ ║| -| ║ │ SCAN │ │ MY QR │ │░ REQUEST ░░│ ║| -| ║ │ │ │ │ │░░░░░░░░░░░░│ ║| -| ║ └────────────┘ └────────────┘ └────────────┘ ║| -| ║ ║| -| ╚════════════════════════════════════════════════════╝| -| | -| | -| Request Money from Friends | -| ────────────────────────── | -| 16sp / Bold / Center | -| | -| | -| ┌────────────────────────────────────────────────┐ | -| │ │ | -| │ $ 75.00 │ | -| │ ════════ │ | -| │ 48sp / Bold / Gradient text │ | -| │ │ | -| │ ┌─────┐ ┌─────┐ ┌─────┐ ┌──────┐ │ | -| │ │ +10 │ │ +25 │ │ +50 │ │ +100 │ │ | -| │ └─────┘ └─────┘ └─────┘ └──────┘ │ | -| │ │ | -| └────────────────────────────────────────────────┘ | -| | -| | -| ┌────────────────────────────────────────────────┐ | -| │ │ | -| │ 📝 What's this for? (Optional) │ | -| │ │ | -| │ ┌────────────────────────────────────────┐ │ | -| │ │ Dinner at The Grill 🍔 │ │ | -| │ └────────────────────────────────────────┘ │ | -| │ │ | -| │ Quick Tags: │ | -| │ ┌─────────┐ ┌───────┐ ┌──────┐ ┌─────────┐ │ | -| │ │ 🍕 Food │ │ 🎬 Fun│ │ 🏠 Rent│ │ ✨ Other│ │ | -| │ └─────────┘ └───────┘ └──────┘ └─────────┘ │ | -| │ │ | -| └────────────────────────────────────────────────┘ | -| | -| | -| SELECT FRIENDS TO REQUEST FROM | -| ────────────────────────────── | -| 3 selected • $25.00 each | -| | -| ┌────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌───────────────────────────────────────┐ │ | -| │ │ ✓ ┌────┐ │ │ | -| │ │ ░░│ JD │ John Doe │ │ | -| │ │ └────┘ @johndoe • Recent │ │ | -| │ │ $25.00 │ │ | -| │ └───────────────────────────────────────┘ │ | -| │ │ | -| │ ┌───────────────────────────────────────┐ │ | -| │ │ ✓ ┌────┐ │ │ | -| │ │ ░░│ SW │ Sarah Wilson │ │ | -| │ │ └────┘ @sarahw • Frequent │ │ | -| │ │ $25.00 │ │ | -| │ └───────────────────────────────────────┘ │ | -| │ │ | -| │ ┌───────────────────────────────────────┐ │ | -| │ │ ✓ ┌────┐ │ │ | -| │ │ ░░│ MB │ Mike Brown │ │ | -| │ │ └────┘ @mikeb • Recent │ │ | -| │ │ $25.00 │ │ | -| │ └───────────────────────────────────────┘ │ | -| │ │ | -| │ ┌───────────────────────────────────────┐ │ | -| │ │ ┌────┐ │ │ | -| │ │ │ EC │ Emma Chen │ │ | -| │ │ └────┘ @emmac │ │ | -| │ │ │ │ | -| │ └───────────────────────────────────────┘ │ | -| │ │ | -| └────────────────────────────────────────────────┘ | -| | -| Selected Contact: | -| Background: Gradient @10% | -| Border: 2dp gradient | -| Checkbox: Filled gradient | -| Amount: Shown on right | -| | -| | -| ┌────────────────────────────────────────────────┐ | -| │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ | -| │░░ ░░│ | -| │░░ Send Request to 3 Friends ░░│ | -| │░░ ░░│ | -| │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ | -| └────────────────────────────────────────────────┘ | -| | -+----------------------------------------------------------+ -``` - ---- - -### 4. Scan Success - Payment Preview - -When QR is scanned, show payment preview with trust indicators. - -``` -+----------------------------------------------------------+ -| | -| [Status Bar] | -| | -+----------------------------------------------------------+ -| | -| [× Cancel] Payment Preview | -| | -+----------------------------------------------------------+ -| | -| ╔════════════════════════════════════════════════════╗| -| ║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║| -| ║░░ ░░░░║| -| ║░░ ┌────────────┐ ░░░░║| -| ║░░ │ │ ░░░░║| -| ║░░ │ [ ✓ ] │ Success ░░░░║| -| ║░░ │ 64dp │ Icon ░░░░║| -| ║░░ │ │ ░░░░║| -| ║░░ └────────────┘ ░░░░║| -| ║░░ ░░░░║| -| ║░░ QR Code Verified ░░░░║| -| ║░░ ──────────────── ░░░░║| -| ║░░ ░░░░║| -| ║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║| -| ╚════════════════════════════════════════════════════╝| -| | -| Success Header: | -| Background: Success gradient #00D09C → #38EF7D | -| Height: 180dp | -| Check animation: Draw stroke then fill | -| | -| | -| SENDING TO | -| ────────── | -| | -| ┌────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌──────┐ │ | -| │ │ JD ✓ │ Jane Doe │ | -| │ │ │ Mifos Head Office │ | -| │ └──────┘ │ | -| │ │ | -| │ ┌──────────────────────────────────────┐ │ | -| │ │ ✓ Verified Account • Safe to pay │ │ | -| │ └──────────────────────────────────────┘ │ | -| │ │ | -| └────────────────────────────────────────────────┘ | -| | -| Trust Badge: | -| Background: #00D09C@10% | -| Icon: Checkmark #00D09C | -| Text: #00D09C | -| | -| | -| PAYMENT DETAILS | -| ─────────────── | -| | -| ┌────────────────────────────────────────────────┐ | -| │ │ | -| │ Account Type Savings Account │ | -| │ ─────────────────────────────────────────── │ | -| │ Account Number SA-0001234567 │ | -| │ ─────────────────────────────────────────── │ | -| │ Office/Branch Mifos Head Office │ | -| │ │ | -| └────────────────────────────────────────────────┘ | -| | -| Details Card: | -| Background: #F8F9FA | -| Corner: 16dp | -| Rows: 48dp height each | -| Divider: #E1E4E8 | -| | -| | -| AMOUNT TO SEND | -| ────────────── | -| | -| ┌────────────────────────────────────────────────┐ | -| │ │ | -| │ Requested: $150.00 │ | -| │ ════════ │ | -| │ 28sp Bold │ | -| │ │ | -| │ ┌─────┐ ┌─────┐ ┌─────┐ ┌────────┐ │ | -| │ │ $50 │ │ $100│ │ $150│ │ Custom │ │ | -| │ └─────┘ └─────┘ └─────┘ └────────┘ │ | -| │ selected │ | -| │ │ | -| └────────────────────────────────────────────────┘ | -| | -| Requested chip: | -| Background: Gradient @15% | -| Border: 2dp gradient | -| Selected scale: 1.05 | -| | -| | -| ┌────────────────────────────────────────────────┐ | -| │ 🔒 256-bit encrypted • Instant transfer │ | -| └────────────────────────────────────────────────┘ | -| | -| | -| ┌────────────────────────────────────────────────┐ | -| │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ | -| │░░ ░░│ | -| │░░ Pay $150.00 Now → ░░│ | -| │░░ ░░│ | -| │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ | -| └────────────────────────────────────────────────┘ | -| | -| + Add as Beneficiary | -| | -+----------------------------------------------------------+ -``` - ---- - -### 5. Dynamic QR with Timer (Premium Feature) - -Time-limited QR code for enhanced security. - -``` -+----------------------------------------------------------+ -| | -| [Status Bar] | -| | -+----------------------------------------------------------+ -| | -| [← Back] Payment Request | -| | -+----------------------------------------------------------+ -| | -| | -| ╔════════════════════════════════════════════════════╗| -| ║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║| -| ║░░ ░░░░║| -| ║░░ ┌──────────────────────┐ ░░░░║| -| ║░░ │ │ ░░░░║| -| ║░░ │ ▓▓▓▓▓ ▓ ▓▓▓▓▓ │ ░░░░║| -| ║░░ │ ▓ ▓ ▓ ▓ ▓ │ ░░░░║| -| ║░░ │ ▓▓▓▓▓ ▓ ▓▓▓▓▓ │ ░░░░║| -| ║░░ │ ▓ ▓▓▓ ▓ │ ░░░░║| -| ║░░ │ ▓▓▓▓▓ ▓ ▓▓▓▓▓ │ ░░░░║| -| ║░░ │ │ ░░░░║| -| ║░░ └──────────────────────┘ ░░░░║| -| ║░░ ░░░░║| -| ║░░ ░░░░║| -| ║░░ $ 150.00 ░░░░║| -| ║░░ ════════ ░░░░║| -| ║░░ 24sp Bold ░░░░║| -| ║░░ ░░░░║| -| ║░░ ░░░░║| -| ║░░ ┌────────────────────────┐ ░░░░║| -| ║░░ │ ⏱️ Expires in 4:32 │ ░░░░║| -| ║░░ │ │ ░░░░║| -| ║░░ │ [▓▓▓▓▓▓▓▓▓▓▓▓░░░░░░] │ ░░░░║| -| ║░░ │ │ ░░░░║| -| ║░░ └────────────────────────┘ ░░░░║| -| ║░░ ░░░░║| -| ║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║| -| ╚════════════════════════════════════════════════════╝| -| | -| Timer Card: | -| Gradient card with expiry countdown | -| Progress bar: Decreasing left to right | -| Warning state: Orange when <1 minute | -| Expired state: Gray with "Regenerate" button | -| | -| | -| ┌────────────────────────────────────────────────┐ | -| │ │ | -| │ Request Details │ | -| │ ───────────────────────────────────────── │ | -| │ │ | -| │ From: John Doe │ | -| │ For: Dinner at The Grill │ | -| │ Created: 2 minutes ago │ | -| │ │ | -| └────────────────────────────────────────────────┘ | -| | -| | -| ┌──────────────────┐ ┌──────────────────┐ | -| │ │ │ │ | -| │ 🔄 Regenerate │ │ 📤 Share │ | -| │ │ │ │ | -| └──────────────────┘ └──────────────────┘ | -| | -| | -| ┌────────────────────────────────────────────────┐ | -| │ 🛡️ Dynamic QR expires for your protection │ | -| └────────────────────────────────────────────────┘ | -| | -+----------------------------------------------------------+ -``` - ---- - -### 6. QR Wallet History - -Track all scans and payments in one place. - -``` -+----------------------------------------------------------+ -| | -| [Status Bar] | -| | -+----------------------------------------------------------+ -| | -| [← Back] QR History [Filter] | -| | -+----------------------------------------------------------+ -| | -| ╔════════════════════════════════════════════════════╗| -| ║ HISTORY STATS ║| -| ║ ║| -| ║ ┌──────────────┐ ┌──────────────┐ ║| -| ║ │ │ │ │ ║| -| ║ │ 42 │ │ $3,250 │ ║| -| ║ │ ──────── │ │ ──────── │ ║| -| ║ │ Total Scans │ │ Total Moved │ ║| -| ║ │ │ │ │ ║| -| ║ └──────────────┘ └──────────────┘ ║| -| ║ ║| -| ╚════════════════════════════════════════════════════╝| -| | -| Stats Card: | -| Background: Gradient #667EEA → #764BA2 @10% | -| Two columns layout | -| Numbers: 28sp Bold | -| Labels: 12sp #6B7280 | -| | -| | -| TODAY | -| ───── | -| | -| ┌────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌──────┐ ↗ │ | -| │ │ → │ Sent to John Doe $50.00 │ | -| │ │ ░░░░ │ ────────────────────── │ | -| │ └──────┘ Via QR scan • 10:32 AM │ | -| │ │ | -| └────────────────────────────────────────────────┘ | -| | -| ┌────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌──────┐ ↙ │ | -| │ │ ← │ Received from Sarah $25.00 │ | -| │ │ ░░░░ │ ──────────────────── │ | -| │ └──────┘ They scanned your QR • 9:15 AM │ | -| │ │ | -| └────────────────────────────────────────────────┘ | -| | -| Sent: | -| Icon: Arrow up-right, orange background | -| Amount: Orange text | -| | -| Received: | -| Icon: Arrow down-left, green background | -| Amount: Green text | -| | -| | -| YESTERDAY | -| ───────── | -| | -| ┌────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌──────┐ REQUEST │ | -| │ │ ? │ Request to Mike Brown │ | -| │ │ ░░░░ │ ───────────────────── $100.00 │ | -| │ └──────┘ Dinner split • Pending │ | -| │ │ | -| │ ┌────────────────────────────────────────┐ │ | -| │ │ [Remind] [Cancel Request] │ │ | -| │ └────────────────────────────────────────┘ │ | -| │ │ | -| └────────────────────────────────────────────────┘ | -| | -| Pending Request: | -| Icon: Question mark, purple background | -| Badge: "REQUEST" pill | -| Actions: Remind / Cancel | -| | -| | -| ┌────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌──────┐ ↗ │ | -| │ │ → │ Sent to Emma Chen $75.00 │ | -| │ │ ░░░░ │ ────────────────── │ | -| │ └──────┘ Split payment • Dec 28, 2025 │ | -| │ │ | -| └────────────────────────────────────────────────┘ | -| | -| ... | -| | -+----------------------------------------------------------+ -``` - ---- - -### 7. Camera Permission State - -Permission request with privacy assurance. - -``` -+----------------------------------------------------------+ -| | -| [Status Bar] | -| | -+----------------------------------------------------------+ -| | -| [← Back] Pay | -| | -+----------------------------------------------------------+ -| | -| | -| | -| | -| ┌────────────────────────────────────┐ | -| │ │ | -| │ │ | -| │ ┌────────────┐ │ | -| │ │ │ │ | -| │ │ [ 📷 ] │ │ | -| │ │ │ │ Gradient | -| │ │ 80dp │ │ Circle | -| │ │ │ │ | -| │ └────────────┘ │ | -| │ │ | -| │ │ | -| └────────────────────────────────────┘ | -| | -| | -| Camera Access Needed | -| ──────────────────── | -| 24sp / Bold | -| | -| | -| To scan QR codes, we need access to your | -| camera. Don't worry - your camera feed is | -| never stored or recorded. | -| ───────────────────────────────────── | -| 14sp / #6B7280 / Center | -| | -| | -| ┌────────────────────────────────────────────────┐ | -| │ │ | -| │ 🔒 Privacy Promise │ | -| │ │ | -| │ • Camera only used for QR scanning │ | -| │ • No photos or videos are saved │ | -| │ • Processing happens on your device │ | -| │ │ | -| └────────────────────────────────────────────────┘ | -| | -| Privacy Card: | -| Background: #667EEA@8% | -| Border: 1dp #667EEA@20% | -| Corner: 16dp | -| | -| | -| ┌────────────────────────────────────────────────┐ | -| │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ | -| │░░ ░░│ | -| │░░ Allow Camera Access ░░│ | -| │░░ ░░│ | -| │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ | -| └────────────────────────────────────────────────┘ | -| | -| Import from Gallery | -| ─────────────────── | -| | -+----------------------------------------------------------+ -``` - ---- - -### 8. Error State - Invalid QR - -``` -+----------------------------------------------------------+ -| | -| [Dimmed Background - 60% Black] | -| | -| | -| | -| ╔════════════════════════════════════════════════════╗| -| ║ ║| -| ║ ┌────────────────────┐ ║| -| ║ │ │ ║| -| ║ │ [ ⚠️ ] │ Error icon ║| -| ║ │ 64dp │ Red circle ║| -| ║ │ │ with shake ║| -| ║ │ │ animation ║| -| ║ └────────────────────┘ ║| -| ║ ║| -| ║ Invalid QR Code ║| -| ║ ─────────────── ║| -| ║ 20sp / Bold ║| -| ║ ║| -| ║ The scanned code doesn't contain valid ║| -| ║ payment information. This might happen if: ║| -| ║ ║| -| ║ • The QR code is damaged or unclear ║| -| ║ • It's not a Mifos payment code ║| -| ║ • The code has expired ║| -| ║ ║| -| ║ ║| -| ║ ┌────────────────────────────────────────────┐ ║| -| ║ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ ║| -| ║ │░░ Scan Again ░░│ ║| -| ║ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ ║| -| ║ └────────────────────────────────────────────┘ ║| -| ║ ║| -| ║ ┌────────────────────────────────────────────┐ ║| -| ║ │ Dismiss │ ║| -| ║ └────────────────────────────────────────────┘ ║| -| ║ ║| -| ╚════════════════════════════════════════════════════╝| -| | -| Dialog: | -| Background: White | -| Corner: 24dp | -| Shadow: 0 16 48 rgba(0,0,0,0.25) | -| Error icon: #FF4757 with shake animation | -| | -+----------------------------------------------------------+ -``` - ---- - -## Component Breakdown - -### Mode Selector Component - -``` -┌─────────────────────────────────────────────────────────────┐ -│ MODE SELECTOR COMPONENT │ -├─────────────────────────────────────────────────────────────┤ -│ │ -│ STRUCTURE │ -│ ┌───────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ -│ │ │ SELECTED │ │ │ │ │ │ │ -│ │ │░░░░░░░░░░│ │ Tab 2 │ │ Tab 3 │ │ │ -│ │ │░░░░░░░░░░│ │ │ │ │ │ │ -│ │ └──────────┘ └──────────┘ └──────────┘ │ │ -│ │ │ │ -│ └───────────────────────────────────────────────────────┘ │ -│ │ -│ Dimensions: │ -│ ───────────────────────────────────────────────────────── │ -│ • Container Height: 48dp │ -│ • Container Background: #F0F4F8 │ -│ • Container Corner: 24dp (pill) │ -│ • Tab Padding: 16dp horizontal │ -│ • Tab Corner: 20dp │ -│ • Selected BG: Gradient #667EEA → #764BA2 │ -│ • Selected Text: White 14sp SemiBold │ -│ • Unselected Text: #6B7280 14sp Medium │ -│ │ -│ Animation: │ -│ ───────────────────────────────────────────────────────── │ -│ • Selection indicator slides (not fade) │ -│ • Duration: 250ms │ -│ • Easing: Spring (damping=0.8, stiffness=400) │ -│ │ -│ Props: │ -│ ───────────────────────────────────────────────────────── │ -│ • selectedIndex: Int (0, 1, 2) │ -│ • tabs: List (["SCAN", "MY QR", "REQUEST"]) │ -│ • onTabSelected: (Int) -> Unit │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - -### QR Card Component - -``` -┌─────────────────────────────────────────────────────────────┐ -│ QR CARD COMPONENT │ -├─────────────────────────────────────────────────────────────┤ -│ │ -│ ┌───────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ░░│ │ -│ │░░ ┌────────────────────────┐ ░░│ │ -│ │░░ │ │ ░░│ │ -│ │░░ │ QR CODE IMAGE │ 220dp ░░│ │ -│ │░░ │ │ (white ░░│ │ -│ │░░ │ │ container)░░│ │ -│ │░░ └────────────────────────┘ ░░│ │ -│ │░░ ░░│ │ -│ │░░ ┌────────────────────────┐ ░░│ │ -│ │░░ │ [Avatar] Name │ User ░░│ │ -│ │░░ │ @username │ Info ░░│ │ -│ │░░ └────────────────────────┘ ░░│ │ -│ │░░ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └───────────────────────────────────────────────────────┘ │ -│ │ -│ Specifications: │ -│ ───────────────────────────────────────────────────────── │ -│ • Background: Gradient #667EEA → #764BA2 │ -│ • Corner Radius: 28dp │ -│ • Shadow: 0 12 40 #667EEA@35% │ -│ • Padding: 24dp │ -│ • QR Container: White, 16dp corner, 16dp padding │ -│ • QR Size: 200dp x 200dp (actual QR image) │ -│ • User Card: White@15%, 12dp corner, 12dp padding │ -│ • Avatar: 40dp circle │ -│ • Name: 16sp Bold White │ -│ • Username: 14sp Regular White@70% │ -│ │ -│ QR Code Colors: │ -│ ───────────────────────────────────────────────────────── │ -│ • Modules (dark): #667EEA (primary) │ -│ • Background: #FFFFFF │ -│ • Finder pattern: #6E6E6E (neutral) │ -│ │ -│ Props: │ -│ ───────────────────────────────────────────────────────── │ -│ • qrData: String (encoded data) │ -│ • userName: String │ -│ • userHandle: String │ -│ • avatarUrl: String? │ -│ • amount: Double? (if requesting specific amount) │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - -### Scanner Viewfinder Component - -``` -┌─────────────────────────────────────────────────────────────┐ -│ SCANNER VIEWFINDER COMPONENT │ -├─────────────────────────────────────────────────────────────┤ -│ │ -│ LAYERS (bottom to top): │ -│ ───────────────────────────────────────────────────────── │ -│ 1. Camera Preview (full area) │ -│ 2. Semi-transparent overlay (rgba(0,0,0,0.6)) │ -│ 3. Clear cutout (240dp x 240dp) │ -│ 4. Corner markers (animated) │ -│ 5. Scan line (animated) │ -│ │ -│ Corner Markers: │ -│ ───────────────────────────────────────────────────────── │ -│ ┌═══╗ ╔═══┐ │ -│ ║ ║ ║ ║ │ -│ ║ ║ │ -│ │ -│ │ -│ │ -│ ║ ║ │ -│ ║ ║ ║ ║ │ -│ ╚═══╝ ╚═══╝ │ -│ │ -│ • Size: 32dp (L-shape, each arm) │ -│ • Stroke: 4dp │ -│ • Corner Radius: 8dp │ -│ • Color: Gradient #667EEA → #764BA2 │ -│ • Animation: Pulse scale 1.0 → 1.05, 1500ms loop │ -│ │ -│ Scan Line: │ -│ ───────────────────────────────────────────────────────── │ -│ • Height: 2dp │ -│ • Width: 90% of cutout │ -│ • Color: Gradient with glow effect │ -│ • Glow: 8dp blur, 50% opacity │ -│ • Animation: Top → Bottom → Top, 2000ms, ease-in-out │ -│ │ -│ Detection Success: │ -│ ───────────────────────────────────────────────────────── │ -│ • Corners flash green (#00D09C) │ -│ • Haptic: Medium impact │ -│ • Duration: 300ms before navigation │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - -### Contact Selection Card - -``` -┌─────────────────────────────────────────────────────────────┐ -│ CONTACT SELECTION CARD (For Request Mode) │ -├─────────────────────────────────────────────────────────────┤ -│ │ -│ UNSELECTED STATE │ -│ ┌───────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ [ ] ┌────┐ Name Here │ │ -│ │ │ AB │ @handle • Tag │ │ -│ │ └────┘ │ │ -│ │ │ │ -│ └───────────────────────────────────────────────────────┘ │ -│ │ -│ Background: White │ -│ Border: 1dp #E1E4E8 │ -│ Checkbox: Empty circle 24dp │ -│ │ -│ SELECTED STATE │ -│ ┌───────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░ ░│ │ -│ │░ [✓]┌────┐ Name Here $25.00 ░│ │ -│ │░ ░░░│ AB │ @handle • Tag ░│ │ -│ │░ └────┘ ░│ │ -│ │░ ░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └───────────────────────────────────────────────────────┘ │ -│ │ -│ Background: Gradient @10% │ -│ Border: 2dp Gradient │ -│ Checkbox: Filled gradient with white checkmark │ -│ Amount: Shown on right side │ -│ Scale: 1.02 (slight lift effect) │ -│ │ -│ Props: │ -│ ───────────────────────────────────────────────────────── │ -│ • contact: Contact │ -│ • isSelected: Boolean │ -│ • splitAmount: Double? (when selected) │ -│ • onSelectionChange: (Boolean) -> Unit │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - ---- - -## Interactions & Animations - -### Animation Specifications - -``` -┌─────────────────────────────────────────────────────────────┐ -│ QR CODE ANIMATIONS (Premium 2025) │ -├─────────────────────────────────────────────────────────────┤ -│ │ -│ 1. MODE TAB SWITCH │ -│ ═══════════════════════════════════════════════════════ │ -│ Type: Sliding indicator │ -│ Duration: 250ms │ -│ Easing: Spring (damping=0.8, stiffness=400) │ -│ │ -│ ┌───────────────────────────────────────────────┐ │ -│ │ [█████][ ][ ] → [ ][█████][ ] │ │ -│ │ 0ms 250ms │ │ -│ └───────────────────────────────────────────────┘ │ -│ │ -│ Content crossfades simultaneously (opacity 0 → 1) │ -│ │ -│ │ -│ 2. SCAN LINE ANIMATION │ -│ ═══════════════════════════════════════════════════════ │ -│ Type: Vertical translate + glow pulse │ -│ Duration: 2000ms per cycle │ -│ Easing: ease-in-out │ -│ Loop: Infinite │ -│ │ -│ ┌───────────────────────────────────────────────┐ │ -│ │ ════════════════════ ← Start (0ms) │ │ -│ │ ↓ │ │ -│ │ │ │ -│ │ ↓ │ │ -│ │ ════════════════════ ← Middle (1000ms) │ │ -│ │ ↓ │ │ -│ │ │ │ -│ │ ↓ │ │ -│ │ ════════════════════ ← End, reverse (2000ms)│ │ -│ └───────────────────────────────────────────────┘ │ -│ │ -│ │ -│ 3. CORNER MARKER PULSE │ -│ ═══════════════════════════════════════════════════════ │ -│ Type: Scale + Opacity │ -│ Duration: 1500ms │ -│ Loop: Infinite │ -│ │ -│ Keyframes: │ -│ ┌───────────────────────────────────────────────┐ │ -│ │ 0%: scale(1.0), opacity(1.0) │ │ -│ │ 50%: scale(1.05), opacity(0.8) │ │ -│ │ 100%: scale(1.0), opacity(1.0) │ │ -│ └───────────────────────────────────────────────┘ │ -│ │ -│ │ -│ 4. QR DETECTION SUCCESS │ -│ ═══════════════════════════════════════════════════════ │ -│ Duration: 300ms │ -│ │ -│ Sequence: │ -│ ┌───────────────────────────────────────────────┐ │ -│ │ 0ms: QR detected │ │ -│ │ 0ms: Haptic feedback (medium impact) │ │ -│ │ 50ms: Corners flash green │ │ -│ │ 100ms: Scan line disappears │ │ -│ │ 200ms: Viewfinder shrinks slightly │ │ -│ │ 300ms: Navigate to preview screen │ │ -│ └───────────────────────────────────────────────┘ │ -│ │ -│ │ -│ 5. QR CARD ENTRANCE │ -│ ═══════════════════════════════════════════════════════ │ -│ Type: Scale + Fade + TranslateY │ -│ Duration: 400ms │ -│ Easing: Spring (damping=0.7, stiffness=300) │ -│ │ -│ From: scale(0.9), opacity(0), translateY(20dp) │ -│ To: scale(1.0), opacity(1), translateY(0) │ -│ │ -│ │ -│ 6. CONTACT SELECTION │ -│ ═══════════════════════════════════════════════════════ │ -│ Duration: 200ms │ -│ │ -│ On Select: │ -│ ┌───────────────────────────────────────────────┐ │ -│ │ • Background fades to gradient tint │ │ -│ │ • Border animates to gradient │ │ -│ │ • Checkbox fills with checkmark draw │ │ -│ │ • Card scales up slightly (1.02) │ │ -│ │ • Amount appears (slide + fade from right) │ │ -│ │ • Haptic: Light impact │ │ -│ └───────────────────────────────────────────────┘ │ -│ │ -│ │ -│ 7. TIMER COUNTDOWN (Dynamic QR) │ -│ ═══════════════════════════════════════════════════════ │ -│ Progress bar decreases smoothly │ -│ Number changes with flip animation │ -│ │ -│ Warning State (<1 minute): │ -│ • Color transitions to orange (#FFB800) │ -│ • Timer text pulses │ -│ │ -│ Expired State: │ -│ • Color transitions to gray │ -│ • QR code fades out │ -│ • "Regenerate" button appears │ -│ │ -│ │ -│ 8. REQUEST SENT CELEBRATION │ -│ ═══════════════════════════════════════════════════════ │ -│ Duration: 1500ms │ -│ │ -│ Sequence: │ -│ ┌───────────────────────────────────────────────┐ │ -│ │ 0ms: Request confirmed │ │ -│ │ 100ms: Success checkmark draws │ │ -│ │ 300ms: Confetti burst │ │ -│ │ 500ms: "Request Sent!" text fades in │ │ -│ │ 1000ms: Contact avatars slide out │ │ -│ │ 1500ms: Navigation to history │ │ -│ │ │ │ -│ │ Haptic: Success pattern │ │ -│ └───────────────────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - ---- - -## Accessibility - -### Screen Reader Support - -``` -┌─────────────────────────────────────────────────────────────┐ -│ ACCESSIBILITY SPECIFICATIONS │ -├─────────────────────────────────────────────────────────────┤ -│ │ -│ CONTENT DESCRIPTIONS │ -│ ═══════════════════════════════════════════════════════ │ -│ │ -│ Mode Selector: │ -│ ───────────────────────────────────────────────────────── │ -│ "Payment mode selector. Scan QR selected. Double tap to │ -│ switch modes. Swipe left or right to change." │ -│ │ -│ Scanner Viewfinder: │ -│ ───────────────────────────────────────────────────────── │ -│ "QR code scanner active. Point your camera at a QR code │ -│ to scan. Flashlight button available below." │ -│ │ -│ QR Card: │ -│ ───────────────────────────────────────────────────────── │ -│ "Your QR code for Maria. Savings account ending in 4521. │ -│ Share this code to receive money." │ -│ │ -│ Recent Scan Item: │ -│ ───────────────────────────────────────────────────────── │ -│ "John Doe, 50 dollars. Double tap to pay again." │ -│ │ -│ Contact Card (Request Mode): │ -│ ───────────────────────────────────────────────────────── │ -│ "John Doe, not selected. Double tap to include in request. │ -│ Will request 25 dollars from this person." │ -│ │ -│ Timer (Dynamic QR): │ -│ ───────────────────────────────────────────────────────── │ -│ "QR code expires in 4 minutes 32 seconds. Tap regenerate │ -│ to create a new code." │ -│ │ -│ │ -│ FOCUS ORDER │ -│ ═══════════════════════════════════════════════════════ │ -│ │ -│ Scan Mode: │ -│ ┌───────────────────────────────────────────────────────┐ │ -│ │ 1. Back button │ │ -│ │ 2. History button │ │ -│ │ 3. Mode selector (Scan/My QR/Request) │ │ -│ │ 4. Scanner viewfinder (announces instructions) │ │ -│ │ 5. Flashlight button │ │ -│ │ 6. Gallery button │ │ -│ │ 7. Recent scans section (if present) │ │ -│ │ 8-N. Recent scan items │ │ -│ └───────────────────────────────────────────────────────┘ │ -│ │ -│ My QR Mode: │ -│ ┌───────────────────────────────────────────────────────┐ │ -│ │ 1. Back button │ │ -│ │ 2. History button │ │ -│ │ 3. Mode selector │ │ -│ │ 4. QR card (announces user and account) │ │ -│ │ 5. Account selector │ │ -│ │ 6. Amount input field │ │ -│ │ 7-10. Quick amount chips │ │ -│ │ 11. Share button │ │ -│ │ 12. Save button │ │ -│ └───────────────────────────────────────────────────────┘ │ -│ │ -│ │ -│ TOUCH TARGETS │ -│ ═══════════════════════════════════════════════════════ │ -│ │ -│ • Mode tabs: 48dp height minimum │ -│ • Quick action buttons: 56dp × 56dp │ -│ • Recent scan avatars: 48dp × 48dp │ -│ • Contact cards: Full width × 72dp │ -│ • Quick amount chips: 64dp × 40dp minimum │ -│ • Primary buttons: Full width × 56dp │ -│ │ -│ │ -│ HAPTIC FEEDBACK │ -│ ═══════════════════════════════════════════════════════ │ -│ │ -│ ┌───────────────────────────────────────────────────────┐ │ -│ │ Action │ iOS │ Android │ │ -│ ├───────────────────────────────────────────────────────┤ │ -│ │ Tab switch │ Light │ TICK │ │ -│ │ QR detected │ Medium │ CONFIRM │ │ -│ │ Contact selected │ Light │ TICK │ │ -│ │ Request sent │ Success │ CONFIRM │ │ -│ │ Invalid QR │ Error │ REJECT │ │ -│ │ Timer warning │ Warning │ HEAVY_CLICK │ │ -│ │ Button press │ Light │ TICK │ │ -│ │ QR saved │ Success │ CONFIRM │ │ -│ └───────────────────────────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - ---- - -## Dark Mode Variant - -### Smart Pay Hub - Dark Mode - -``` -+----------------------------------------------------------+ -| | -| [Status Bar - Light Icons] Background: #0D1117| -| | -+----------------------------------------------------------+ -| | -| [← Back] Pay [History]| -| #F0F6FC | -| | -+----------------------------------------------------------+ -| | -| ╔════════════════════════════════════════════════════╗| -| ║ MODE SELECTOR ║| -| ║ Background: #21262D ║| -| ║ Selected: Gradient preserved ║| -| ║ Unselected: #8B949E ║| -| ║ ║| -| ╚════════════════════════════════════════════════════╝| -| | -| | -| ┌────────────────────────────────────────────────┐ | -| │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ | -| │▓▓ ▓▓│ | -| │▓▓ Camera preview with overlay ▓▓│ | -| │▓▓ Overlay: rgba(0,0,0,0.7) (darker) ▓▓│ | -| │▓▓ Corners: Gradient preserved ▓▓│ | -| │▓▓ Scan line: Enhanced glow ▓▓│ | -| │▓▓ ▓▓│ | -| │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ | -| └────────────────────────────────────────────────┘ | -| | -| | -| Point camera at QR code to scan | -| #8B949E | -| | -| | -| ┌──────────────────┐ ┌──────────────────┐ | -| │ 🔦 Flashlight │ │ 🖼️ From Gallery │ | -| │ BG: #21262D │ │ BG: #21262D │ | -| │ Text: #F0F6FC │ │ Text: #F0F6FC │ | -| └──────────────────┘ └──────────────────┘ | -| | -| | -| RECENT SCANS | -| #F0F6FC | -| | -| ┌────────────────────────────────────────────────┐ | -| │ Background: #161B22 │ | -| │ Border: 1dp #30363D │ | -| │ │ | -| │ Avatars with amounts │ | -| │ Amount: #A78BFA (lighter purple) │ | -| │ │ | -| └────────────────────────────────────────────────┘ | -| | -+----------------------------------------------------------+ -``` - -### Color Token Mapping - -``` -┌─────────────────────────────────────────────────────────────┐ -│ DARK MODE COLOR MAPPING │ -├─────────────────────────────────────────────────────────────┤ -│ │ -│ ┌──────────────────────────────────────────────────────┐ │ -│ │ Element │ Light Mode │ Dark Mode │ │ -│ ├──────────────────────────────────────────────────────┤ │ -│ │ Screen Background │ #F8F9FA │ #0D1117 │ │ -│ │ Card Background │ #FFFFFF │ #161B22 │ │ -│ │ Card Border │ #E1E4E8 │ #30363D │ │ -│ │ Mode Selector BG │ #F0F4F8 │ #21262D │ │ -│ │ Primary Text │ #1F2937 │ #F0F6FC │ │ -│ │ Secondary Text │ #6B7280 │ #8B949E │ │ -│ │ Tertiary Text │ #9CA3AF │ #6E7681 │ │ -│ │ Link/Accent │ #667EEA │ #A78BFA │ │ -│ │ Scanner Overlay │ rgba(0,0,0, │ rgba(0,0,0, │ │ -│ │ │ 0.6) │ 0.7) │ │ -│ │ Quick Action BG │ #F8F9FA │ #21262D │ │ -│ │ Quick Action Text │ #1F2937 │ #F0F6FC │ │ -│ │ Primary Gradient │ #667EEA → │ Same │ │ -│ │ │ #764BA2 │ (preserved) │ │ -│ │ Success │ #00D09C │ #00D09C │ │ -│ │ Error │ #FF4757 │ #FF6B7A │ │ -│ │ Warning │ #FFB800 │ #FFB800 │ │ -│ │ Input Background │ #F8F9FA │ #21262D │ │ -│ │ Input Border │ #E1E4E8 │ #30363D │ │ -│ │ QR Container BG │ #FFFFFF │ #FFFFFF │ │ -│ │ (stays white for QR visibility) │ │ -│ └──────────────────────────────────────────────────────┘ │ -│ │ -│ Enhanced Glows (Dark Mode): │ -│ ───────────────────────────────────────────────────────── │ -│ • QR Card shadow: #764BA2@40% (vs 35% light) │ -│ • Scan line glow: 60% opacity (vs 50% light) │ -│ • Corner marker pulse: More visible │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - ---- - -## Implementation Notes - -### State Management - -```kotlin -data class QrScreenState( - // Mode - val selectedMode: QrMode = QrMode.SCAN, - - // Scanner - val isScanning: Boolean = false, - val isFlashlightOn: Boolean = false, - val hasCameraPermission: Boolean = false, - val scannedData: String? = null, - - // My QR - val qrCode: QrCodeData? = null, - val selectedAccount: Account? = null, - val requestAmount: Double? = null, - - // Request Mode - val requestNote: String = "", - val selectedTag: RequestTag? = null, - val selectedContacts: List = emptyList(), - val splitAmount: Double = 0.0, - - // Dynamic QR - val expiryTime: Instant? = null, - val isExpired: Boolean = false, - - // History - val recentScans: List = emptyList(), - - // Loading & Error - val isLoading: Boolean = false, - val error: String? = null -) - -enum class QrMode { - SCAN, - MY_QR, - REQUEST -} - -enum class RequestTag { - FOOD, - FUN, - RENT, - OTHER -} - -data class QrCodeData( - val encodedData: String, - val accountNumber: String, - val accountType: String, - val userName: String, - val userHandle: String, - val officeName: String, - val requestedAmount: Double?, - val note: String?, - val expiresAt: Instant? -) - -data class ScanHistoryItem( - val id: String, - val type: ScanType, - val recipientName: String, - val recipientAvatar: String?, - val amount: Double, - val note: String?, - val timestamp: Instant, - val status: ScanStatus -) - -enum class ScanType { - SENT, - RECEIVED, - REQUEST_SENT, - REQUEST_PENDING -} - -enum class ScanStatus { - COMPLETED, - PENDING, - FAILED -} - -sealed interface QrEvent { - data class OnModeChanged(val mode: QrMode) : QrEvent - data object OnFlashlightToggle : QrEvent - data object OnGalleryClick : QrEvent - data class OnQrScanned(val data: String) : QrEvent - data class OnAccountSelected(val account: Account) : QrEvent - data class OnAmountChanged(val amount: Double?) : QrEvent - data object OnShareQr : QrEvent - data object OnSaveQr : QrEvent - data class OnNoteChanged(val note: String) : QrEvent - data class OnTagSelected(val tag: RequestTag) : QrEvent - data class OnContactToggled(val contact: Contact) : QrEvent - data object OnSendRequest : QrEvent - data object OnRegenerateQr : QrEvent - data class OnRecentScanClick(val id: String) : QrEvent -} -``` - -### Required Composables - -```kotlin -// Screens -@Composable -fun SmartPayHubScreen( - state: QrScreenState, - onEvent: (QrEvent) -> Unit -) - -@Composable -fun PaymentPreviewScreen( - scannedData: QrCodeData, - onPay: (Double) -> Unit, - onAddBeneficiary: () -> Unit, - onCancel: () -> Unit -) - -@Composable -fun QrHistoryScreen( - items: List, - onItemClick: (String) -> Unit, - onRemind: (String) -> Unit, - onCancel: (String) -> Unit -) - -// Components -@Composable -fun QrModeSelector( - selectedMode: QrMode, - onModeSelected: (QrMode) -> Unit -) - -@Composable -fun ScannerViewfinder( - isScanning: Boolean, - onQrDetected: (String) -> Unit -) - -@Composable -fun QrCard( - qrData: QrCodeData, - userName: String, - userHandle: String, - avatarUrl: String? -) - -@Composable -fun DynamicQrCard( - qrData: QrCodeData, - expiryTime: Instant, - onRegenerate: () -> Unit -) - -@Composable -fun AccountSelector( - selectedAccount: Account?, - accounts: List, - onAccountSelected: (Account) -> Unit -) - -@Composable -fun AmountInputWithChips( - amount: Double?, - quickAmounts: List, - onAmountChanged: (Double?) -> Unit -) - -@Composable -fun ContactSelectionList( - contacts: List, - selectedContacts: List, - splitAmount: Double, - onContactToggled: (Contact) -> Unit -) - -@Composable -fun RequestTagChips( - selectedTag: RequestTag?, - onTagSelected: (RequestTag) -> Unit -) - -@Composable -fun RecentScansRow( - scans: List, - onScanClick: (String) -> Unit -) - -@Composable -fun ScanHistoryCard( - item: ScanHistoryItem, - onClick: () -> Unit, - onRemind: (() -> Unit)?, - onCancel: (() -> Unit)? -) - -@Composable -fun TrustBadge( - isVerified: Boolean -) - -@Composable -fun CameraPermissionRequest( - onAllow: () -> Unit, - onGallery: () -> Unit -) - -@Composable -fun InvalidQrDialog( - onRetry: () -> Unit, - onDismiss: () -> Unit -) -``` - ---- - -## Changelog - -| Date | Version | Changes | -|------|---------|---------| -| 2025-12-30 | 2.0 | Major redesign: Smart Pay Hub pattern, 3-mode selector, Request/Split mode, Dynamic QR with timer, QR wallet history, trust indicators, social features | -| 2025-12-29 | 1.0 | Initial mockup with basic scanner and QR display | - ---- - -## Data Binding Reference - -> **For `/implement` command**: Maps UI components to API.md sections. -> **Source of Truth**: See `API.md` for complete endpoint details. - -### QR Feature - Mostly Client-Side - -See `API.md → Local-Only Architecture` - QR code generation/scanning has NO dedicated Fineract APIs. - -### Screen → API.md Mapping - -| Screen | API.md Section | Key Fields | -|--------|----------------|------------| -| My QR (Generate) | See `home/API.md` or `accounts/API.md` | Client info + accounts for QR data | -| Scan & Pay | See `transfer/API.md` | Execute transfer after scan | -| Add Beneficiary | See `beneficiary/API.md` | Create from scanned QR | - -### QR Data Format - -See `API.md → QR Code Data Format` for JSON structure specification. - -### Client-Only Features - -| Feature | Storage | Notes | -|---------|---------|-------| -| QR Code Generation | Client-side | See `API.md → QR Code Generation` | -| QR Code Scanning | Camera/Gallery | See `API.md → QR Code Decoding` | -| Recent Scans | DataStore | Local history | -| Request Mode | Client-side | Split bill feature | - -### Actions → API.md Mapping - -| User Action | API.md Reference | Navigation | -|-------------|------------------|------------| -| Load My QR | `home/API.md` + `accounts/API.md` | Get client/account data | -| Scan & Pay | `transfer/API.md → Execute Transfer` | → Transfer Flow | -| Add Beneficiary | `beneficiary/API.md → Create` | Save scanned contact | - -### Error Handling - -See `API.md → Error Handling` for QR-specific errors. diff --git a/claude-product-cycle/design-spec-layer/features/qr/SPEC.md b/claude-product-cycle/design-spec-layer/features/qr/SPEC.md deleted file mode 100644 index b3a2eb2bf..000000000 --- a/claude-product-cycle/design-spec-layer/features/qr/SPEC.md +++ /dev/null @@ -1,474 +0,0 @@ -# QR Code - Feature Specification - -> **Purpose**: QR code generation, scanning, and import for beneficiary data exchange -> **User Value**: Quick and error-free beneficiary data transfer via QR codes -> **Last Updated**: 2025-12-29 -> **Status**: Production Design - ---- - -## 1. Overview - -### 1.1 Feature Summary -The QR Code feature enables users to share and receive beneficiary account information through QR codes. Users can generate QR codes containing their account details for others to scan, scan QR codes to add new beneficiaries, or import QR codes from saved images. This provides a quick, error-free method for exchanging financial account information without manual data entry. - -### 1.2 User Stories -- As a user, I want to generate a QR code with my account details to share with others -- As a user, I want to scan a QR code to quickly add a new beneficiary -- As a user, I want to import a QR code from my photo gallery -- As a user, I want clear instructions on how to use QR code scanning -- As a user, I want to be warned about security considerations when scanning QR codes -- As a user, I want to see clear error messages when QR code parsing fails - -### 1.3 Design Principles -- **Simplicity**: One-tap access to QR scanning and generation -- **Security**: Clear warnings about scanning unknown QR codes -- **Reliability**: Robust error handling for invalid QR formats -- **Cross-Platform**: Works on Android, iOS, Desktop, and Web - ---- - -## 2. Screen Layout - -### 2.1 QR Code Display Screen - -``` -+-------------------------------------------------------------+ -| <- QR Code | -+-------------------------------------------------------------+ -| | -| Scan Your QR | -| | -| +-----------------------------+ | -| | -| Show this QR code to anyone who wants to send | -| you money. They can scan it to add you as a | -| beneficiary. | -| | -| +-----------------------------+ | -| | | | -| | +-----+ +-----+ | | -| | | | | | | | -| | +-----+ +-----+ | | -| | | | -| | QR CODE | | -| | IMAGE | | -| | | | -| | +-----+ | | -| | | | | | -| | +-----+ | | -| | | | -| +-----------------------------+ | -| | -| Align the code within the frame for automatic | -| scanning. Ensure good lighting. | -| | -| | -| | -| | -| Generated on Dec 29, 2025 | -| | -| [Powered by Mifos] | -+-------------------------------------------------------------+ -``` - -### 2.2 QR Code Reader Screen - -``` -+-------------------------------------------------------------+ -| <- QR Code | -+-------------------------------------------------------------+ -| | -| Align the QR code within the frame to scan it | -| | -| +-------------------------------------------------------+ | -| | | | -| | +--+ +--+ | | -| | | | | | | | -| | + + | | -| | | | -| | | | -| | CAMERA VIEWFINDER | | -| | | | -| | | | -| | + + | | -| | | | | | | | -| | +--+ +--+ | | -| | | | -| | +-----------------------------------------------+ | | -| | | (!) Warning | | | -| | | | | | -| | | Only scan QR codes from sources you trust. | | | -| | | Verify the sender's identity before | | | -| | | making any transfer. | | | -| | +-----------------------------------------------+ | | -| | | | -| +-------------------------------------------------------+ | -| | -| +-------------------------------------------------------+ | -| | UPLOAD QR FROM GALLERY | | -| +-------------------------------------------------------+ | -| | -| [Powered by Mifos] | -+-------------------------------------------------------------+ -``` - -### 2.3 QR Code Import Screen - -``` -+-------------------------------------------------------------+ -| <- QR Code | -+-------------------------------------------------------------+ -| | -| +-------------------------------------------------------+ | -| | | | -| | | | -| | | | -| | | | -| | IMAGE PICKER | | -| | / CROPPER | | -| | | | -| | (Platform-specific implementation) | | -| | | | -| | | | -| | | | -| | | | -| +-------------------------------------------------------+ | -| | -| [Powered by Mifos] | -+-------------------------------------------------------------+ -``` - -### 2.4 Error Dialog - -``` -+-----------------------------------------------+ -| | -| Invalid QR Code | -| | -| The scanned QR code does not contain | -| valid beneficiary information. | -| | -| [ OK ] | -| | -+-----------------------------------------------+ -``` - ---- - -## 3. Sections Table - -| Section | Description | Components | -|---------|-------------|------------| -| QR Display | Shows generated QR code | QR image, instructions, date stamp | -| QR Reader | Camera-based QR scanning | Camera viewfinder, corner markers, warning card | -| QR Import | Gallery-based QR import | Image picker, cropper, proceed button | -| Warning Card | Security notice overlay | Warning icon, title, description | -| Error Dialog | Invalid QR notification | Error message, dismiss button | -| Navigation Bar | Screen header | Back button, title | -| Footer | Branding | Mifos powered card | - ---- - -## 4. User Interactions Table - -| Interaction | Component | Action | Result | -|-------------|-----------|--------|--------| -| Tap back button | Top bar | Navigate back | Returns to previous screen | -| Camera scan | QR Reader | Auto-detect QR | Parses and navigates to beneficiary form | -| Tap "Upload QR from Gallery" | Button | Open import screen | Navigates to QrCodeImportScreen | -| Select image | Image picker | Choose gallery image | Loads image for QR decoding | -| Tap proceed/confirm | Import screen | Decode QR from image | Parses and navigates to beneficiary form | -| Dismiss error dialog | Dialog button | Close dialog | Returns to scanning state | -| Request camera permission | System dialog | Grant/deny | Enables scanner or shows permission denied UI | -| Tap "Open Settings" | Permission denied | Open system settings | Navigates to app permission settings | - ---- - -## 5. State Model - -### 5.1 QrCodeReaderState - -```kotlin -internal data class QrCodeReaderState( - val dialogState: DialogState?, -) { - sealed interface DialogState { - data class Error(val message: StringResource) : DialogState - } -} -``` - -### 5.2 QrCodeReaderAction - -```kotlin -sealed interface QrCodeReaderAction { - data class ScanQrCode(val data: String) : QrCodeReaderAction - data object OnNavigateToUpload : QrCodeReaderAction - data object OnNavigate : QrCodeReaderAction - data object OnDismiss : QrCodeReaderAction -} -``` - -### 5.3 QrCodeReaderEvent - -```kotlin -sealed interface QrCodeReaderEvent { - data object Navigate : QrCodeReaderEvent - data object NavigateToUploadQr : QrCodeReaderEvent - data class NavigateToBeneficiary( - val beneficiary: Beneficiary, - val beneficiaryState: BeneficiaryState = BeneficiaryState.CREATE_QR, - ) : QrCodeReaderEvent -} -``` - -### 5.4 QrCodeDisplayState - -```kotlin -data class QrCodeDisplayState( - val option: String = "", - val qrArgs: String? = null, - val viewState: QrViewState = QrViewState.Loading, -) { - sealed interface QrViewState { - data object Loading : QrViewState - data class Content(val data: String) : QrViewState { - val options: QrOptions // QR styling options - } - } -} -``` - -### 5.5 QrCodeDisplayAction - -```kotlin -sealed interface QrCodeDisplayAction { - data object OnNavigate : QrCodeDisplayAction -} -``` - -### 5.6 QrCodeDisplayEvent - -```kotlin -sealed interface QrCodeDisplayEvent { - data object Navigate : QrCodeDisplayEvent -} -``` - -### 5.7 QrCodeImportState - -```kotlin -internal data class QrCodeImportState( - val qrCodeResult: String? = null, - val dialogState: DialogState?, -) { - sealed interface DialogState { - data class Error(val message: StringResource) : DialogState - data object Loading : DialogState - } -} -``` - -### 5.8 QrCodeImportAction - -```kotlin -sealed interface QrCodeImportAction { - data object OnNavigate : QrCodeImportAction - data class Proceed(val bitmap: ImageBitmap) : QrCodeImportAction - data object DismissDialog : QrCodeImportAction -} -``` - -### 5.9 QrCodeImportEvent - -```kotlin -sealed interface QrCodeImportEvent { - data object Navigate : QrCodeImportEvent - data class OpenBeneficiaryApplication( - val beneficiary: Beneficiary, - val beneficiaryState: BeneficiaryState, - ) : QrCodeImportEvent -} -``` - ---- - -## 6. Navigation Routes - -| Route | Class | Parameters | Purpose | -|-------|-------|------------|---------| -| QrGraphRoute | data object | None | QR feature navigation graph | -| QrCodeDisplayRoute | data class | qrString: String | Display generated QR code | -| QrCodeReaderRoute | data object | None | Camera-based QR scanning | -| QrCodeImportRoute | data object | None | Gallery-based QR import | - -### 6.1 Navigation Graph Structure - -``` -QrGraphRoute - | - +-- QrCodeDisplayRoute (startDestination) - | - +-- QrCodeReaderRoute - | | - | +-- navigateToQrImportScreen - | +-- openBeneficiaryApplication - | - +-- QrCodeImportRoute - | - +-- openBeneficiaryApplication -``` - ---- - -## 7. API Requirements - -| Endpoint | Method | Purpose | Priority | -|----------|--------|---------|----------| -| None | - | This is a local-only feature | - | - -**Note**: The QR Code feature operates entirely locally without any API calls. QR codes are: -- Generated locally using JSON serialization of Beneficiary data -- Decoded locally using platform-specific QR code decoders -- Camera permission is the only system-level requirement - ---- - -## 8. QR Code Data Format - -### 8.1 Beneficiary JSON Schema - -```json -{ - "id": null, - "name": "string | null", - "officeName": "string | null", - "clientName": "string", - "accountType": { - "id": 2, - "code": "accountType.savings", - "value": "Savings Account" - }, - "accountNumber": "SA-0001234567", - "transferLimit": null -} -``` - -### 8.2 Required Fields for QR Generation - -| Field | Type | Required | Description | -|-------|------|----------|-------------| -| clientName | String | Yes | Name of the account holder | -| accountNumber | String | Yes | Account number | -| accountType | AccountType | Yes | Type of account (savings, loan, etc.) | -| officeName | String | Yes | Name of the office/branch | - -### 8.3 QR Generation Function - -```kotlin -fun getAccountDetailsInString( - clientName: String, - accountNumber: String, - accountType: AccountType, - officeName: String, -): String { - val payload = Beneficiary( - clientName = clientName, - accountNumber = accountNumber, - accountType = accountType, - officeName = officeName, - ) - return Json.encodeToString(payload) -} -``` - -### 8.4 QR Code Styling (Display) - -```kotlin -val shapes = QrShapes( - code = QrCodeShape.Default, - lightPixel = QrPixelShape.circle(), - darkPixel = QrPixelShape.circle(), - ball = QrBallShape.roundCorners(0.2f), - frame = QrFrameShape.roundCorners(0.2f), -) - -val colors = QrColors( - light = Color(0xFFFFFFFF), // White - dark = Color(0xFF0673BA), // Mifos Blue - ball = Color(0xFF6e6e6e), // Gray - frame = Color(0xFF6e6e6e), // Gray -) - -val errorCorrectionLevel = QrErrorCorrectionLevel.Medium -``` - ---- - -## 9. Edge Cases and Error Handling - -| Scenario | Detection | UI Behavior | Recovery | -|----------|-----------|-------------|----------| -| Non-JSON QR code | String doesn't start/end with { } | Show "Invalid QR Code" error dialog | Dismiss and continue scanning | -| Invalid JSON structure | JSON parsing exception | Show "Invalid QR Code" error dialog | Dismiss and continue scanning | -| Missing required fields | Beneficiary deserialization fails | Show "Error" dialog | Dismiss and continue scanning | -| Camera permission denied | CameraPermissionStatus.Denied | Show permission denied UI with "Open Settings" button | User grants permission manually | -| Empty QR code | Null or empty string result | Show "Invalid QR Code" error dialog | Dismiss and continue scanning | -| Image decode failure | decodeQrCode returns null | Show "Invalid QR Code" error dialog | User can retry with different image | -| No camera available | Platform limitation | Fall back to import option | Use "Upload QR from Gallery" | - ---- - -## 10. Platform-Specific Implementations - -| Component | Android | iOS | Desktop | Web | -|-----------|---------|-----|---------|-----| -| QrCodeScanner | CameraX + ML Kit | AVFoundation | Not supported | MediaDevices API | -| decodeQrCode | ML Kit BarcodeScanning | CoreImage | ZXing | ZXing-JS | -| CameraPermissionState | Accompanist Permissions | NSCameraUsageDescription | N/A | Permissions API | -| QrCodeImagePicker | Photo Picker | PHPicker | File Chooser | File Input | - ---- - -## 11. Dependency Injection - -```kotlin -val QrModule = module { - viewModelOf(::QrCodeImportViewModel) - viewModelOf(::QrCodeReaderViewModel) - viewModelOf(::QrCodeDisplayViewModel) -} -``` - ---- - -## 12. Accessibility - -| Feature | Implementation | -|---------|----------------| -| Screen Reader | contentDescription on QR image, buttons, and warning text | -| Focus Navigation | Logical tab order through scanner, warning, and button | -| Color Contrast | WCAG AA compliant (4.5:1 minimum) | -| Touch Targets | 48dp minimum for all interactive elements | -| Camera Alternative | "Upload from Gallery" option for accessibility | - ---- - -## 13. Security Considerations - -| Feature | Implementation | -|---------|----------------| -| QR Validation | Only parse JSON-formatted Beneficiary data | -| Warning Display | Prominent security warning on scanner screen | -| No External URLs | QR codes only contain account data, not executable content | -| Local Processing | All QR generation/decoding happens on-device | -| Permission Handling | Camera access only requested when needed | - ---- - -## Changelog - -| Date | Change | -|------|--------| -| 2025-12-29 | Initial production-level specification | diff --git a/claude-product-cycle/design-spec-layer/features/qr/STATUS.md b/claude-product-cycle/design-spec-layer/features/qr/STATUS.md deleted file mode 100644 index 92da0dcf0..000000000 --- a/claude-product-cycle/design-spec-layer/features/qr/STATUS.md +++ /dev/null @@ -1,113 +0,0 @@ -# QR Code Feature - Implementation Status - -> **Last Updated**: 2025-12-29 -> **Overall Status**: ✅ Done - ---- - -## Implementation Checklist - -- [x] SPEC.md created -- [x] API.md created (N/A - local processing only) -- [x] Feature: ViewModels + Screens -- [x] Navigation: Routes registered -- [x] DI: Modules registered -- [x] STATUS.md updated - ---- - -## Layer Status - -| Layer | Status | Details | -|-------|--------|---------| -| Network | ✅ | Local processing only - no network calls | -| Data | ✅ | Local QR code parsing and decoding | -| Feature | ✅ | QrCodeReaderViewModel, QrCodeDisplayViewModel, QrCodeImportViewModel + Screens | -| DI | ✅ | QrModule.kt | -| Navigation | ✅ | QrNavGraph.kt | - ---- - -## Files - -### Feature Layer - -#### QR Code Reader (Scan) -- `feature/qr/src/commonMain/kotlin/org/mifos/mobile/feature/qr/qr/QrCodeReaderViewModel.kt` -- `feature/qr/src/commonMain/kotlin/org/mifos/mobile/feature/qr/qr/QrCodeReaderScreen.kt` -- `feature/qr/src/commonMain/kotlin/org/mifos/mobile/feature/qr/qr/QrCodeReaderRoute.kt` - -#### QR Code Display -- `feature/qr/src/commonMain/kotlin/org/mifos/mobile/feature/qr/qrCodeDisplay/QrCodeDisplayViewModel.kt` -- `feature/qr/src/commonMain/kotlin/org/mifos/mobile/feature/qr/qrCodeDisplay/QrCodeDisplayScreen.kt` -- `feature/qr/src/commonMain/kotlin/org/mifos/mobile/feature/qr/qrCodeDisplay/QrCodeDisplayRoute.kt` - -#### QR Code Import (Upload Image) -- `feature/qr/src/commonMain/kotlin/org/mifos/mobile/feature/qr/qrCodeImport/QrCodeImportViewModel.kt` -- `feature/qr/src/commonMain/kotlin/org/mifos/mobile/feature/qr/qrCodeImport/QrCodeImportScreen.kt` -- `feature/qr/src/commonMain/kotlin/org/mifos/mobile/feature/qr/qrCodeImport/QrCodeImportRoute.kt` - -#### Platform-Specific Implementations -- `feature/qr/src/androidMain/kotlin/org/mifos/mobile/feature/qr/qrCodeImport/QrCodeImportScreen.android.kt` -- `feature/qr/src/desktopMain/kotlin/org/mifos/mobile/feature/qr/qrCodeImport/QrCodeImportScreen.desktop.kt` -- `feature/qr/src/nativeMain/kotlin/org/mifos/mobile/feature/qr/qrCodeImport/QrCodeImportScreen.native.kt` -- `feature/qr/src/jsMain/kotlin/org/mifos/mobile/feature/qr/qrCodeImport/QrCodeImportScreen.js.kt` -- `feature/qr/src/wasmJsMain/kotlin/org/mifos/mobile/feature/qr/qrCodeImport/QrCodeImportScreen.wasmJs.kt` - -#### Dependency Injection -- `feature/qr/src/commonMain/kotlin/org/mifos/mobile/feature/qr/di/QrModule.kt` - -#### Navigation -- `feature/qr/src/commonMain/kotlin/org/mifos/mobile/feature/qr/navigation/QrNavGraph.kt` - -#### Utilities -- `feature/qr/src/androidMain/kotlin/org/mifos/mobile/feature/qr/ImagePicker.kt` -- `feature/qr/src/androidMain/kotlin/org/mifos/mobile/feature/qr/CropContent.kt` -- `feature/qr/src/androidMain/kotlin/org/mifos/mobile/feature/qr/Dialogs.kt` - ---- - -## Feature Details - -### QR Code Reader -- **Purpose**: Scans and parses QR codes from device camera -- **Input**: Camera feed with QR code -- **Output**: Parsed Beneficiary object in JSON format -- **Processing**: Local JSON deserialization to Beneficiary model -- **Navigation**: Routes to beneficiary details screen with CREATE_QR state - -### QR Code Display -- **Purpose**: Generates and displays QR codes from beneficiary data -- **Input**: Beneficiary data string from navigation arguments -- **Output**: Visual QR code with custom styling (rounded corners, circular pixels) -- **Processing**: QR code generation using Qrose library with custom shapes and colors -- **Styling**: - - Light pixels and dark pixels: circular shape - - Ball and frame: rounded corners (0.2f radius) - - Colors: Light (white), Dark (blue #0673BA), Frame (grey #6e6e6e) - - Error correction level: Medium - -### QR Code Import -- **Purpose**: Imports QR code from image file selection -- **Input**: Selected image bitmap -- **Output**: Decoded QR data and parsed Beneficiary object -- **Processing**: - - Image bitmap decoding to extract QR data - - JSON validation (must start with '{' and end with '}') - - Local JSON deserialization to Beneficiary model -- **States**: Loading and Error dialogs -- **Navigation**: Routes to beneficiary application screen with CREATE_QR state - ---- - -## Gaps - -None identified. - ---- - -## Changelog - -| Date | Change | -|------|--------| -| 2025-12-29 | Initial status documentation for QR Code feature | diff --git a/claude-product-cycle/design-spec-layer/features/qr/mockups/FIGMA_LINKS.md b/claude-product-cycle/design-spec-layer/features/qr/mockups/FIGMA_LINKS.md deleted file mode 100644 index eaab1e1de..000000000 --- a/claude-product-cycle/design-spec-layer/features/qr/mockups/FIGMA_LINKS.md +++ /dev/null @@ -1,61 +0,0 @@ -# QR Code Feature - Figma Links - -> **Feature**: QR Code (Smart Pay Hub) -> **Status**: Pending Design Export -> **Last Updated**: 2025-01-04 - ---- - -## Figma Design Links - -After generating designs using AI tools (Stitch/Figma), paste the links below: - -### Main Screens - -| Screen | Figma Link | Status | -|--------|------------|--------| -| Smart Pay Hub (Scanner) | `[Paste link here]` | Pending | -| My QR Code | `[Paste link here]` | Pending | -| Request Money | `[Paste link here]` | Pending | -| Scan Success | `[Paste link here]` | Pending | -| Dynamic QR Timer | `[Paste link here]` | Pending | -| Payment Success | `[Paste link here]` | Pending | -| QR History | `[Paste link here]` | Pending | - -### Component Library - -| Component | Figma Link | Status | -|-----------|------------|--------| -| Mode Selector | `[Paste link here]` | Pending | -| Camera Preview | `[Paste link here]` | Pending | -| QR Card | `[Paste link here]` | Pending | -| Amount Chip | `[Paste link here]` | Pending | -| Friend Card | `[Paste link here]` | Pending | -| Quick Action Button | `[Paste link here]` | Pending | -| Timer Component | `[Paste link here]` | Pending | -| Trust Badge | `[Paste link here]` | Pending | - -### Dark Mode Variants - -| Screen | Figma Link | Status | -|--------|------------|--------| -| Smart Pay Hub (Dark) | `[Paste link here]` | Pending | -| My QR Code (Dark) | `[Paste link here]` | Pending | - ---- - -## Export Checklist - -- [ ] Export all screens at 1x, 2x, 3x -- [ ] Export component assets as SVG -- [ ] Document color variables -- [ ] Create prototype connections -- [ ] Add interaction annotations -- [ ] Review accessibility contrast -- [ ] Verify dark mode mappings - ---- - -## Notes - -_Add any design notes, feedback, or revision history here._ diff --git a/claude-product-cycle/design-spec-layer/features/qr/mockups/PROMPTS.md b/claude-product-cycle/design-spec-layer/features/qr/mockups/PROMPTS.md deleted file mode 100644 index d2b8a3277..000000000 --- a/claude-product-cycle/design-spec-layer/features/qr/mockups/PROMPTS.md +++ /dev/null @@ -1,465 +0,0 @@ -# QR Code Feature - AI Design Tool Prompts - -> **Generated from**: MOCKUP.md v2.0 -> **Design Pattern**: Smart Pay Hub -> **Primary Gradient**: #667EEA (Purple) -> #764BA2 (Deep Purple) -> **Generated**: 2025-01-04 - ---- - -## Google Stitch Prompts - -### Prompt 1: Smart Pay Hub (Scanner Mode) - -``` -Create a mobile Smart Pay Hub screen for a fintech banking app's QR feature. - -Design specifications: -- Material Design 3 with 2025 fintech patterns -- Primary gradient: #667EEA to #764BA2 (purple-blue) -- Camera-first design with overlay - -Header: -- Back button, "Pay" title, "History" action icon - -Mode Selector: -- Horizontal tab bar with 3 modes: SCAN (selected), MY QR, REQUEST -- Selected tab: Gradient pill (#667EEA to #764BA2) -- Unselected: Transparent with gray text -- Container: #F0F4F8 pill background -- Height: 48dp, sliding indicator animation - -Camera Preview Area: -- Full width minus 32dp margin -- Height: 320dp -- Overlay: Semi-transparent black 60% -- Cutout: 240x240dp clear scanning area -- Corner markers: 4dp gradient strokes at each corner -- Scan line: Animated gradient line moving vertically -- Rounded corners: 24dp - -Instruction Text: -- "Point camera at QR code to scan" -- 14sp, #6B7280, centered - -Quick Actions: -- Two buttons side by side: - - Flashlight icon with "Flashlight" label - - Gallery icon with "From Gallery" label -- Each: 56x56dp icon area + label below -- Background: #F8F9FA, corner radius: 16dp -- Gap: 24dp between buttons - -Recent Scans Section: -- Section header: "RECENT SCANS" -- Horizontal scroll of recent contacts: - - Avatar (48dp circle) with initials - - Amount badge below: "$50", "$25", "$100" - - Name truncated below - - Last item: "+" icon for "New Scan" - -Style: Camera-focused, quick actions prominent, social payment history -``` - -### Prompt 2: My QR Code Screen (Receive Money) - -``` -Create a My QR Code screen for receiving money in a fintech app. - -Design specifications: -- Material Design 3 with premium QR card design -- Gradient QR card as hero element - -Header: -- Back button, "Pay" title, "History" action - -Mode Selector: -- Same tabs: SCAN, MY QR (selected), REQUEST -- MY QR tab highlighted with gradient - -Title: -- "Share to Receive Money" (16sp bold, centered) - -QR Card (Premium Design): -- Full-width card with gradient background: #667EEA to #764BA2 -- Corner radius: 28dp -- Shadow: 0 12 40 #667EEA@35% -- Padding: 24dp - -QR Container inside card: -- White background -- Corner radius: 16dp -- Padding: 16dp -- QR code: 220dp -- QR modules: Black on white - -User Info (inside gradient card, below QR): -- Small info card: White @15% opacity, 12dp radius -- Avatar (32dp) + Name + @username - -Account Selector: -- Dropdown card below QR card -- Icon: Briefcase -- Label: "Receive Into" -- Account: "Savings Account ****4521" -- Balance: "$8,542.00" -- Chevron dropdown indicator -- Background: #F8F9FA, border: 1dp #E1E4E8 - -Optional Amount Section: -- Label: "Request Specific Amount (Optional)" -- Large input: "$ 0.00" (32sp bold) -- Quick amount chips: +10, +50, +100, +500 -- Chips: Outlined style, 40dp height - -Action Buttons: -- Two buttons side by side (48% width each): - - Share: Gradient filled, share icon - - Save: Outlined #667EEA, save icon -- Height: 52dp - -Style: Premium feel, shareable design, flexible amount request -``` - -### Prompt 3: Request Money (Split Bill Mode) - -``` -Create a Request Money screen with split bill functionality for a fintech app. - -Design specifications: -- Material Design 3 with social payment patterns -- Multi-person selection for split payments - -Header: -- Back button, "Pay" title, "History" action - -Mode Selector: -- REQUEST tab selected with gradient - -Title: -- "Request Money from Friends" (16sp bold, centered) - -Amount Entry: -- Large gradient text amount: "$75.00" (48sp bold) -- Quick add chips: +10, +25, +50, +100 - -Description Field: -- Label: "What's this for? (Optional)" -- Input with emoji support: "Dinner at The Grill" -- Quick tags row: Food, Fun, Rent, Other (with emojis) - -Friends Selection Section: -- Header: "SELECT FRIENDS TO REQUEST FROM" -- Subheader: "3 selected, $25.00 each" (auto-calculated split) - -Friend Cards (checkable list): -- Selected friends (3): - - Checkbox filled with gradient - - Avatar with initials - - Name and @username - - "Recent" or "Frequent" badge - - Amount per person: "$25.00" - - Card background: Gradient @10%, gradient border 2dp - -- Unselected friend: - - Empty checkbox - - Avatar, name, username - - No amount shown - -Card styling: -- Height: 72dp -- Padding: 16dp -- Radius: 16dp - -Primary Button: -- "Send Request to 3 Friends" (gradient filled) -- Full width -- Height: 52dp - -Style: Social, fun split bill experience, clear per-person amounts -``` - -### Prompt 4: Scan Success - Payment Preview - -``` -Create a Payment Preview screen after successful QR scan for a fintech app. - -Design specifications: -- Material Design 3 with success confirmation patterns -- Trust indicators and payment details - -Success Header (Gradient): -- Background: Success gradient #00D09C to #38EF7D -- Height: 180dp -- Centered check icon (64dp) with draw animation -- Text: "QR Code Verified" - -Recipient Card: -- Avatar with verified badge -- Name: "Jane Doe" -- Organization: "Mifos Head Office" -- Trust badge: Green "Verified Account, Safe to pay" - -Payment Details Card: -- Background: #F8F9FA -- Corner radius: 16dp -- Rows with dividers: - - Account Type: Savings Account - - Account Number: SA-0001234567 - - Office/Branch: Mifos Head Office -- Row height: 48dp each - -Amount Section: -- "Requested: $150.00" (28sp bold) -- Amount chips: $50, $100, $150 (selected with gradient border), Custom -- Selected chip: Scale 1.05, gradient border - -Security Footer: -- Lock icon + "256-bit encrypted, Instant transfer" -- Subtle gray text - -Primary Button: -- "Pay $150.00 Now" with arrow -- Gradient filled -- Full width - -Secondary Action: -- "+ Add as Beneficiary" link below button - -Style: Trust-focused, clear confirmation, secure payment feel -``` - -### Prompt 5: Dynamic QR with Timer - -``` -Create a Dynamic QR screen with expiration timer for a fintech app. - -Design specifications: -- Material Design 3 with time-sensitive design -- Security-focused dynamic QR - -Header: -- Back button, "Payment Request" title - -Main QR Card (Gradient): -- Background: Gradient #667EEA to #764BA2 -- QR code in white container -- Amount displayed: "$150.00" (24sp bold, white) - -Timer Component: -- Inside gradient card -- Clock icon + "Expires in 4:32" -- Progress bar: Decreasing from left to right -- Bar color: White, track: White @20% -- Warning state (<1 min): Orange color -- Expired state: Gray with "Regenerate" button - -Request Details Card: -- White card below -- Rows: - - From: "John Doe" - - For: "Dinner at The Grill" - - Created: "2 minutes ago" - -Action Buttons: -- Two buttons side by side: - - Regenerate: Outlined with refresh icon - - Share: Gradient filled with share icon - -Security Note: -- Shield icon + "Dynamic QR expires for your protection" -- Subtle gray text - -Style: Security-focused, time-sensitive urgency, professional -``` - ---- - -## Figma MCP Prompts - -### Prompt 1: Smart Pay Hub Frame - -``` -Create a Figma frame for "QR - Smart Pay Hub" mobile screen (375x812px). - -Components needed: -1. Status bar (system) -2. Header: Back button, "Pay" title, History icon - -3. Mode Selector Component: - - Auto-layout horizontal - - Container: Pill shape, #F0F4F8 background - - 3 tabs: SCAN, MY QR, REQUEST - - Selected variant: Gradient pill indicator - - Height: 48dp - -4. Camera Preview Component: - - Dark overlay with clear cutout - - Corner markers (4 corners) with gradient stroke - - Scan line animation (horizontal gradient line) - - Rounded corners: 24dp - -5. Quick Action Buttons: - - Icon + label vertical stack - - 56dp icon area - - Background: #F8F9FA - -6. Recent Scans Component: - - Horizontal scroll - - Avatar circles with amount badges - - Last item: Add new - -Design tokens: -- Primary: #667EEA -- Secondary: #764BA2 -- Surface: #FFFFFF -- Overlay: #000000 60% -``` - -### Prompt 2: Complete QR Flow - -``` -Create a Figma prototype flow for QR feature with these frames: - -Frame 1: Scanner Mode (main) -- Camera preview with overlay -- Mode selector on SCAN -- Quick actions -- Recent scans - -Frame 2: My QR Code -- Mode selector on MY QR -- Premium QR card with gradient -- Account selector -- Optional amount input -- Share/Save buttons - -Frame 3: Request Money -- Mode selector on REQUEST -- Amount entry -- Description field -- Friend multi-select list -- Send request button - -Frame 4: Scan Success -- Success header animation -- Recipient card with trust badge -- Payment details -- Amount selection -- Pay button - -Frame 5: Dynamic QR -- Timer countdown -- Gradient QR card -- Request details -- Regenerate/Share buttons - -Frame 6: Payment Success -- Confetti animation placeholder -- Receipt details -- Share/Done buttons - -Frame 7: QR History -- Stats card -- Transaction list -- Filter options - -Prototype connections: -- Mode selector switches between frames 1-3 -- Scan success leads to frame 4 -- Payment completes to frame 6 - -Component variants: -- Mode selector: scan/myqr/request active states -- Amount chip: selected/unselected -- Friend card: selected/unselected -``` - ---- - -## Design Tokens - -```json -{ - "feature": "qr", - "version": "2.0", - "designPattern": "Smart Pay Hub", - "colors": { - "primary": "#667EEA", - "secondary": "#764BA2", - "success": "#00D09C", - "successSecondary": "#38EF7D", - "surface": "#FFFFFF", - "background": "#F8F9FA", - "overlay": "rgba(0,0,0,0.6)", - "cameraBackground": "#000000" - }, - "components": { - "modeSelector": { - "height": 48, - "containerRadius": 24, - "tabPadding": 16, - "indicatorRadius": 20 - }, - "cameraPreview": { - "height": 320, - "cutoutSize": 240, - "cornerMarkerLength": 32, - "cornerMarkerStroke": 4, - "radius": 24 - }, - "qrCard": { - "padding": 24, - "radius": 28, - "qrSize": 220, - "qrPadding": 16, - "qrContainerRadius": 16 - }, - "amountChip": { - "height": 40, - "padding": 16, - "radius": 20, - "gap": 8 - }, - "friendCard": { - "height": 72, - "padding": 16, - "radius": 16, - "avatarSize": 40, - "checkboxSize": 24 - }, - "timer": { - "progressHeight": 4, - "warningThreshold": 60 - } - }, - "animation": { - "scanLine": { - "duration": 2000, - "type": "loop" - }, - "modeSwitch": { - "duration": 300, - "easing": "ease-out" - }, - "successCheck": { - "duration": 600, - "type": "draw-stroke" - } - } -} -``` - ---- - -## Screen Checklist - -| Screen | Stitch Prompt | Figma Prompt | Status | -|--------|---------------|--------------|--------| -| Smart Pay Hub (Scanner) | 1 | 1, 2 | Ready | -| My QR Code | 2 | 2 | Ready | -| Request Money | 3 | 2 | Ready | -| Scan Success | 4 | 2 | Ready | -| Dynamic QR Timer | 5 | 2 | Ready | -| Payment Success | - | 2 | Pending | -| QR History | - | 2 | Pending | diff --git a/claude-product-cycle/design-spec-layer/features/qr/mockups/design-tokens.json b/claude-product-cycle/design-spec-layer/features/qr/mockups/design-tokens.json deleted file mode 100644 index e170227eb..000000000 --- a/claude-product-cycle/design-spec-layer/features/qr/mockups/design-tokens.json +++ /dev/null @@ -1,226 +0,0 @@ -{ - "feature": "qr", - "version": "2.0", - "designPattern": "Smart Pay Hub", - "lastUpdated": "2025-01-04", - "colors": { - "primary": { - "default": "#667EEA", - "dark": "#5A6FD6" - }, - "secondary": { - "default": "#764BA2", - "dark": "#6A4292" - }, - "success": { - "default": "#00D09C", - "secondary": "#38EF7D" - }, - "surface": { - "light": "#FFFFFF", - "dark": "#1A1F2E" - }, - "background": { - "light": "#F8F9FA", - "dark": "#0D1117" - }, - "camera": { - "overlay": "rgba(0,0,0,0.6)", - "cutout": "transparent", - "background": "#000000" - }, - "text": { - "primary": { - "light": "#1F2937", - "dark": "#F0F6FC" - }, - "secondary": { - "light": "#6B7280", - "dark": "#8B949E" - }, - "onGradient": "#FFFFFF" - }, - "divider": { - "light": "#E1E4E8", - "dark": "#30363D" - } - }, - "gradients": { - "primary": { - "type": "linear", - "angle": 135, - "stops": [ - { "color": "#667EEA", "position": 0 }, - { "color": "#764BA2", "position": 100 } - ] - }, - "success": { - "type": "linear", - "angle": 135, - "stops": [ - { "color": "#00D09C", "position": 0 }, - { "color": "#38EF7D", "position": 100 } - ] - }, - "scanLine": { - "type": "linear", - "angle": 90, - "stops": [ - { "color": "transparent", "position": 0 }, - { "color": "#667EEA", "position": 50 }, - { "color": "transparent", "position": 100 } - ] - } - }, - "typography": { - "fontFamily": { - "primary": "Inter", - "mono": "JetBrains Mono" - }, - "styles": { - "amount": { "size": 48, "weight": 700, "lineHeight": 1.1 }, - "amountMd": { "size": 32, "weight": 700, "lineHeight": 1.2 }, - "amountSm": { "size": 24, "weight": 700, "lineHeight": 1.3 }, - "h3": { "size": 20, "weight": 600, "lineHeight": 1.4 }, - "subtitle": { "size": 16, "weight": 600, "lineHeight": 1.5 }, - "body": { "size": 14, "weight": 400, "lineHeight": 1.5 }, - "caption": { "size": 12, "weight": 400, "lineHeight": 1.4 } - } - }, - "spacing": { - "xs": 4, - "sm": 8, - "md": 16, - "lg": 24, - "xl": 32, - "xxl": 48 - }, - "radius": { - "sm": 8, - "md": 12, - "lg": 16, - "xl": 20, - "xxl": 24, - "xxxl": 28, - "pill": 100 - }, - "elevation": { - "card": "0 2px 8px rgba(0,0,0,0.08)", - "qrCard": "0 12px 40px rgba(102, 126, 234, 0.35)", - "modal": "0 8px 24px rgba(0,0,0,0.16)" - }, - "components": { - "modeSelector": { - "height": 48, - "containerRadius": 24, - "containerBackground": "#F0F4F8", - "tabPadding": 16, - "indicatorRadius": 20, - "gap": 4 - }, - "cameraPreview": { - "height": 320, - "cutoutSize": 240, - "cornerMarkerLength": 32, - "cornerMarkerStroke": 4, - "radius": 24, - "margin": 16 - }, - "qrCard": { - "padding": 24, - "radius": 28, - "qrSize": 220, - "qrPadding": 16, - "qrContainerRadius": 16, - "qrModuleColor": "#000000", - "qrBackground": "#FFFFFF" - }, - "amountChip": { - "height": 40, - "paddingHorizontal": 16, - "radius": 20, - "gap": 8, - "variants": { - "default": { "bg": "transparent", "border": "#E1E4E8" }, - "selected": { "bg": "gradient@15%", "border": "gradient" } - } - }, - "friendCard": { - "height": 72, - "padding": 16, - "radius": 16, - "avatarSize": 40, - "checkboxSize": 24, - "variants": { - "unselected": { "bg": "#FFFFFF", "border": "none" }, - "selected": { "bg": "gradient@10%", "border": "gradient" } - } - }, - "quickAction": { - "iconSize": 56, - "iconRadius": 16, - "background": "#F8F9FA", - "gap": 24 - }, - "recentScan": { - "avatarSize": 48, - "amountBadge": { - "height": 20, - "radius": 10, - "fontSize": 10 - } - }, - "timer": { - "progressHeight": 4, - "progressRadius": 2, - "warningThreshold": 60, - "warningColor": "#FFB800", - "expiredColor": "#9CA3AF" - }, - "trustBadge": { - "height": 28, - "padding": 12, - "radius": 8, - "background": "#00D09C15", - "textColor": "#00D09C" - } - }, - "animation": { - "scanLine": { - "duration": 2000, - "type": "infinite", - "direction": "alternate" - }, - "modeSwitch": { - "duration": 300, - "easing": "cubic-bezier(0.4, 0.0, 0.2, 1)" - }, - "successCheck": { - "duration": 600, - "type": "draw-stroke", - "easing": "cubic-bezier(0.4, 0.0, 0.2, 1)" - }, - "timerPulse": { - "duration": 1000, - "type": "infinite", - "trigger": "warningThreshold" - }, - "cardPress": { - "scale": 0.98, - "duration": 150 - }, - "confetti": { - "duration": 2000, - "particles": 30 - } - }, - "screens": [ - "smartPayHubScan", - "myQrCode", - "requestMoney", - "scanSuccess", - "dynamicQrTimer", - "paymentSuccess", - "qrHistory" - ] -} diff --git a/claude-product-cycle/design-spec-layer/features/qr/mockups/dummy/01-smart-pay-hub-scan.png b/claude-product-cycle/design-spec-layer/features/qr/mockups/dummy/01-smart-pay-hub-scan.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/qr/mockups/dummy/02-my-qr-code.png b/claude-product-cycle/design-spec-layer/features/qr/mockups/dummy/02-my-qr-code.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/qr/mockups/dummy/03-request-money.png b/claude-product-cycle/design-spec-layer/features/qr/mockups/dummy/03-request-money.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/qr/mockups/dummy/04-scan-success.png b/claude-product-cycle/design-spec-layer/features/qr/mockups/dummy/04-scan-success.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/qr/mockups/dummy/05-dynamic-qr-timer.png b/claude-product-cycle/design-spec-layer/features/qr/mockups/dummy/05-dynamic-qr-timer.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/qr/mockups/dummy/06-payment-success.png b/claude-product-cycle/design-spec-layer/features/qr/mockups/dummy/06-payment-success.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/qr/mockups/dummy/07-qr-history.png b/claude-product-cycle/design-spec-layer/features/qr/mockups/dummy/07-qr-history.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/recent-transaction/API.md b/claude-product-cycle/design-spec-layer/features/recent-transaction/API.md deleted file mode 100644 index a10873525..000000000 --- a/claude-product-cycle/design-spec-layer/features/recent-transaction/API.md +++ /dev/null @@ -1,428 +0,0 @@ -# Recent Transactions - API Reference - ---- - -## Endpoints Required - -### 1. Get Client Accounts (for Filter) - -**Endpoint**: `GET /self/clients/{clientId}/accounts` - -**Purpose**: Fetch list of savings accounts for the account filter dropdown - -**Request**: -``` -Headers: - Authorization: Basic {token} - Fineract-Platform-TenantId: {tenant} - -Path Parameters: - clientId: Long - The client ID - -Query Parameters: - accountType: String - "savingsAccounts" (constant) -``` - -**Response**: -```json -{ - "savingsAccounts": [ - { - "id": 1, - "accountNo": "000000001", - "productName": "Savings Account", - "productId": 1, - "accountBalance": 5000.00, - "totalDeposits": 10000.00, - "currency": { - "code": "USD", - "name": "US Dollar", - "decimalPlaces": 2, - "displaySymbol": "$", - "displayLabel": "US Dollar ($)" - }, - "status": { - "id": 300, - "code": "savingsAccountStatusType.active", - "value": "Active", - "active": true - }, - "lastActiveTransactionDate": [2025, 9, 15] - }, - { - "id": 2, - "accountNo": "000000002", - "productName": "Premium Savings", - "productId": 2, - "accountBalance": 15000.00, - "totalDeposits": 20000.00, - "currency": { - "code": "USD", - "name": "US Dollar", - "decimalPlaces": 2, - "displaySymbol": "$", - "displayLabel": "US Dollar ($)" - }, - "status": { - "id": 300, - "code": "savingsAccountStatusType.active", - "value": "Active", - "active": true - }, - "lastActiveTransactionDate": [2025, 9, 10] - } - ], - "loanAccounts": [], - "shareAccounts": [] -} -``` - -**Kotlin DTO**: Uses `ClientAccounts` from `core/model/entity/client/` - -**Status**: Implemented in `AccountsService` - ---- - -### 2. Get Savings Account with Transactions - -**Endpoint**: `GET /self/savingsaccounts/{accountId}` - -**Purpose**: Fetch savings account details with transaction history - -**Request**: -``` -Headers: - Authorization: Basic {token} - Fineract-Platform-TenantId: {tenant} - -Path Parameters: - accountId: Long - The savings account ID - -Query Parameters: - associations: String - "transactions" (to include transaction list) -``` - -**Response**: -```json -{ - "id": 1, - "accountNo": "000000001", - "clientId": 123, - "clientName": "John Doe", - "savingsProductId": 1, - "savingsProductName": "Savings Account", - "status": { - "id": 300, - "code": "savingsAccountStatusType.active", - "value": "Active", - "active": true - }, - "currency": { - "code": "USD", - "name": "US Dollar", - "decimalPlaces": 2, - "displaySymbol": "$", - "displayLabel": "US Dollar ($)" - }, - "summary": { - "totalDeposits": 10000.00, - "totalWithdrawals": 5000.00, - "accountBalance": 5000.00 - }, - "transactions": [ - { - "id": 101, - "transactionType": { - "id": 1, - "code": "savingsAccountTransactionType.deposit", - "value": "Deposit", - "deposit": true, - "withdrawal": false, - "interestPosting": false, - "feeDeduction": false - }, - "accountId": 1, - "accountNo": "000000001", - "date": [2025, 9, 15], - "currency": { - "code": "USD", - "name": "US Dollar", - "decimalPlaces": 2, - "displaySymbol": "$" - }, - "amount": 500.00, - "runningBalance": 5000.00, - "reversed": false, - "submittedOnDate": [2025, 9, 15] - }, - { - "id": 100, - "transactionType": { - "id": 2, - "code": "savingsAccountTransactionType.withdrawal", - "value": "Withdrawal", - "deposit": false, - "withdrawal": true, - "interestPosting": false, - "feeDeduction": false - }, - "accountId": 1, - "accountNo": "000000001", - "date": [2025, 9, 14], - "currency": { - "code": "USD", - "name": "US Dollar", - "decimalPlaces": 2, - "displaySymbol": "$" - }, - "amount": 150.00, - "runningBalance": 4500.00, - "reversed": false, - "submittedOnDate": [2025, 9, 14] - } - ] -} -``` - -**Kotlin DTO**: Uses `SavingsWithAssociations` from `core/model/entity/accounts/savings/` - -**Status**: Implemented in `SavingAccountsListService` - ---- - -### 3. Get Recent Transactions (Legacy/Alternative) - -**Endpoint**: `GET /self/clients/{clientId}/transactions` - -**Purpose**: Fetch paginated transaction list across all accounts (alternative endpoint) - -**Request**: -``` -Headers: - Authorization: Basic {token} - Fineract-Platform-TenantId: {tenant} - -Path Parameters: - clientId: Long - The client ID - -Query Parameters: - offset: Int? - Pagination offset - limit: Int? - Number of records to fetch -``` - -**Response**: -```json -{ - "totalFilteredRecords": 50, - "pageItems": [ - { - "id": 101, - "officeId": 1, - "officeName": "Head Office", - "type": { - "id": 1, - "value": "Deposit" - }, - "date": [2025, 9, 15], - "currency": { - "code": "USD", - "displaySymbol": "$", - "decimalPlaces": 2 - }, - "amount": 500.00, - "submittedOnDate": [2025, 9, 15], - "reversed": false - } - ] -} -``` - -**Kotlin DTO**: Uses `Page` from `core/model/entity/` - -**Status**: Implemented in `RecentTransactionsService` (not currently used by feature) - ---- - -## Kotlin DTOs - -### SavingAccount - -```kotlin -@Serializable -@Parcelize -data class SavingAccount( - val id: Long = 0, - val accountNo: String? = null, - val productName: String? = null, - val productId: Int? = null, - val overdraftLimit: Long = 0, - val minRequiredBalance: Long = 0, - val accountBalance: Double = 0.0, - val totalDeposits: Double = 0.0, - val savingsProductName: String? = null, - val clientName: String? = null, - val savingsProductId: String? = null, - val nominalAnnualInterestRate: Double = 0.0, - val status: Status? = null, - val currency: Currency? = null, - val depositType: DepositType? = null, - val lastActiveTransactionDate: List? = null, - val timeLine: TimeLine? = null, -) : Parcelable -``` - -### Transactions - -```kotlin -@Serializable -@Parcelize -data class Transactions( - val id: Int? = null, - val transactionType: TransactionType? = null, - val accountId: Int? = null, - val accountNo: String? = null, - val date: List = emptyList(), - val currency: Currency? = null, - val paymentDetailData: PaymentDetailData? = null, - val amount: Double? = null, - val runningBalance: Double? = null, - val reversed: Boolean? = null, - val submittedOnDate: List? = null, - val interestedPostedAsOn: Boolean? = null, -) : Parcelable -``` - -### TransactionType - -```kotlin -@Serializable -@Parcelize -data class TransactionType( - val id: Int? = null, - val code: String? = null, - val value: String? = null, - val deposit: Boolean? = null, - val dividendPayout: Boolean? = null, - val withdrawal: Boolean? = null, - val interestPosting: Boolean? = null, - val feeDeduction: Boolean? = null, - val initiateTransfer: Boolean? = null, - val approveTransfer: Boolean? = null, - val withdrawTransfer: Boolean? = null, - val rejectTransfer: Boolean? = null, - val overdraftInterest: Boolean? = null, - val writtenoff: Boolean? = null, - val overdraftFee: Boolean? = null, - val withholdTax: Boolean? = null, - val escheat: Boolean? = null, -) : Parcelable -``` - -### Currency - -```kotlin -@Serializable -@Parcelize -data class Currency( - val code: String? = null, - val name: String? = null, - val decimalPlaces: Int? = null, - val inMultiplesOf: Int? = null, - val displaySymbol: String? = null, - val nameCode: String? = null, - val displayLabel: String? = null, -) : Parcelable -``` - -### SavingsWithAssociations - -```kotlin -@Serializable -@Parcelize -data class SavingsWithAssociations( - val id: Long? = null, - val accountNo: String? = null, - val depositType: DepositType? = null, - val externalId: String? = null, - val clientId: Int? = null, - val clientName: String? = null, - val savingsProductId: Int? = null, - val savingsProductName: String? = null, - val fieldOfficerId: Int? = null, - val status: Status? = null, - val timeline: TimeLine? = null, - val currency: Currency? = null, - val nominalAnnualInterestRate: Double? = null, - val minRequiredOpeningBalance: Double? = null, - val lockinPeriodFrequency: Double? = null, - val withdrawalFeeForTransfers: Boolean? = null, - val allowOverdraft: Boolean? = null, - val enforceMinRequiredBalance: Boolean? = null, - val withHoldTax: Boolean? = null, - val lastActiveTransactionDate: List? = null, - val dormancyTrackingActive: Boolean? = null, - val summary: Summary? = null, - val transactions: List = emptyList(), -) : Parcelable -``` - ---- - -## API Summary - -| Endpoint | Service | Repository | Status | -|----------|---------|------------|--------| -| `/self/clients/{clientId}/accounts` | AccountsService | AccountsRepository | Implemented | -| `/self/savingsaccounts/{accountId}?associations=transactions` | SavingAccountsListService | SavingsAccountRepository | Implemented | -| `/self/clients/{clientId}/transactions` | RecentTransactionsService | RecentTransactionRepository | Implemented (legacy) | - ---- - -## Kotlin Implementation - -### Service (SavingAccountsListService.kt) - -```kotlin -interface SavingAccountsListService { - @GET(ApiEndPoints.SAVINGS_ACCOUNTS + "/{accountId}") - fun getSavingsWithAssociations( - @Path("accountId") accountId: Long, - @Query("associations") associationType: String?, - ): Flow -} -``` - -### Repository (SavingsAccountRepository.kt) - -```kotlin -interface SavingsAccountRepository { - fun getSavingsWithAssociations( - accountId: Long?, - associationType: String?, - ): Flow> -} -``` - -### Legacy Service (RecentTransactionsService.kt) - -```kotlin -interface RecentTransactionsService { - @GET(ApiEndPoints.CLIENTS + "/{clientId}/transactions") - fun getRecentTransactionsList( - @Path("clientId") clientId: Long, - @Query("offset") offset: Int?, - @Query("limit") limit: Int?, - ): Flow> -} -``` - ---- - -## Notes - -- The feature currently uses `SavingsAccountRepository.getSavingsWithAssociations()` to fetch transactions per account -- Transaction filtering (All/Debit/Credit) is done client-side after fetching all transactions -- Only active savings accounts (`status.active == true`) are shown in the filter -- Date format in API response is `List` as `[year, month, day]` (e.g., `[2025, 9, 15]`) -- Currency formatting uses `CurrencyFormatter.format()` utility -- The legacy `RecentTransactionsService` provides cross-account transaction list but is not actively used in the current implementation diff --git a/claude-product-cycle/design-spec-layer/features/recent-transaction/MOCKUP.md b/claude-product-cycle/design-spec-layer/features/recent-transaction/MOCKUP.md deleted file mode 100644 index 494a914ab..000000000 --- a/claude-product-cycle/design-spec-layer/features/recent-transaction/MOCKUP.md +++ /dev/null @@ -1,1499 +0,0 @@ -# Recent Transactions - UI Mockups v2.0 - -> **Design Style**: Smart Money Intelligence Hub (Mint/Cleo/Copilot-inspired) -> **Primary Gradient**: #667EEA → #764BA2 (Purple-Blue) -> **Last Updated**: 2025-12-30 -> **Status**: Production Design v2.0 - ---- - -## Design Philosophy - -The Recent Transactions feature transforms from a simple transaction list into a **Smart Money Intelligence Hub** - an AI-powered financial awareness center. Inspired by Mint's spending analytics, Cleo's conversational insights, and Copilot's beautiful visualizations, this redesign emphasizes: - -1. **Visual Analytics** - Spending breakdown charts and trend visualization -2. **Smart Insights** - AI-powered spending patterns and alerts -3. **Budget Integration** - Category-level budget tracking -4. **Gamification** - Spending streaks and money-saving achievements -5. **Smart Search** - Natural language transaction queries -6. **Recurring Detection** - Automatic subscription tracking - ---- - -## Navigation Context - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ RECENT TRANSACTION NAVIGATION FLOW v2.0 │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ -│ │ Transaction │ ──▶ │ Transaction │ ──▶ │ Add Receipt │ │ -│ │ Dashboard │ │ Detail │ │ / Add Tag │ │ -│ └──────────────┘ └──────────────┘ └──────────────┘ │ -│ │ │ │ -│ │ ▼ │ -│ │ ┌──────────────┐ │ -│ │ │ Contact │ │ -│ │ │ Support │ │ -│ │ └──────────────┘ │ -│ ▼ │ -│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ -│ │ Spending │ ──▶ │ Category │ ──▶ │ Budget │ │ -│ │ Analytics │ │ Breakdown │ │ Settings │ │ -│ └──────────────┘ └──────────────┘ └──────────────┘ │ -│ │ │ -│ ▼ │ -│ ┌──────────────┐ ┌──────────────┐ │ -│ │ Recurring │ ──▶ │ Manage │ │ -│ │ Transactions │ │ Subscriptions│ │ -│ └──────────────┘ └──────────────┘ │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Screen 1: Transaction Intelligence Dashboard - -``` -┌─────────────────────────────────────────────────────────────────┐ -│░░░░░░░░░░░░░░░░░░░ STATUS BAR ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ← Transactions 📊 📥 ⋮ │ -│ A/c: ****4521 │ -│ │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ░░│ │ -│ │░░ December 2025 ░░│ │ -│ │░░ ░░│ │ -│ │░░ ┌───────────────────────────────────────────┐ ░░│ │ -│ │░░ │ │ ░░│ │ -│ │░░ │ 💰 Income 💸 Expenses │ ░░│ │ -│ │░░ │ +$3,450.00 -$1,280.50 │ ░░│ │ -│ │░░ │ ═══════════ ───────── │ ░░│ │ -│ │░░ │ │ ░░│ │ -│ │░░ │ Net: +$2,169.50 │ ░░│ │ -│ │░░ │ ✨ Great month! │ ░░│ │ -│ │░░ │ │ ░░│ │ -│ │░░ └───────────────────────────────────────────┘ ░░│ │ -│ │░░ ░░│ │ -│ │░░ 🔥 8-Day Saving Streak! ░░│ │ -│ │░░ You're spending less than your daily average ░░│ │ -│ │░░ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ 💡 Smart Insights See All ▶ │ │ -│ │ │ │ -│ │ ┌──────────────────────────────────────────────────┐ │ │ -│ │ │ ⚠️ Unusual spending detected │ │ │ -│ │ │ Shopping is 40% higher than usual this week │ │ │ -│ │ └──────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ ┌──────────────────────────────────────────────────┐ │ │ -│ │ │ 🔄 3 subscriptions renewing next week │ │ │ -│ │ │ Netflix, Spotify, iCloud = $34.97 │ │ │ -│ │ └──────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ 🔍 Search "coffee last week"... 🎤 │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ Filter: ┌───────┐┌────────┐┌──────────┐┌───────────┐ │ │ -│ │ │ All ✓ ││ Income ││ Expenses ││ Recurring │ │ │ -│ │ └───────┘└────────┘└──────────┘└───────────┘ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ TODAY │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ ┌────────┐ │ │ -│ │ │ 🎬 │ Netflix -$14.99 │ │ -│ │ │ ░░░░░░ │ Entertainment • 2:34 PM │ │ -│ │ └────────┘ 🔄 Monthly ▶ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ ┌────────┐ │ │ -│ │ │ 💵 │ Salary Deposit +$3,200.00 │ │ -│ │ │ ░░░░░░ │ Income • 9:00 AM │ │ -│ │ └────────┘ 🏷️ Employer ▶ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ YESTERDAY │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ ┌────────┐ │ │ -│ │ │ 🛒 │ Amazon -$149.00 │ │ -│ │ │ ░░░░░░ │ Shopping • 6:15 PM │ │ -│ │ └────────┘ 🧾 Receipt attached ▶ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ ┌────────┐ │ │ -│ │ │ ☕ │ Starbucks -$5.75 │ │ -│ │ │ ░░░░░░ │ Food & Dining • 8:30 AM │ │ -│ │ └────────┘ ⚠️ Over budget ▶ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌───────────┐ │ -│ │░░░░░░░░░░░│ │ -│ │░░ 📥 ░│ │ -│ │░░░░░░░░░░░│ │ -│ └───────────┘ │ -│ Export │ -│ │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ⌂ ☰ 💸 👤 │ -│ Home Accounts Transfer Profile │ -│ │ -└─────────────────────────────────────────────────────────────────┘ - -Legend: -░░░ = Primary gradient (#667EEA → #764BA2) -🔥 = Streak indicator (animated fire) -🔄 = Recurring transaction badge -🧾 = Receipt attached indicator -⚠️ = Over budget warning -🏷️ = Custom tag -``` - ---- - -## Screen 2: Spending Analytics View - -``` -┌─────────────────────────────────────────────────────────────────┐ -│░░░░░░░░░░░░░░░░░░░ STATUS BAR ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ← Spending Analytics ⋮ │ -│ │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ 📅 ┌─────────────────────────────────────────────┐ │ │ -│ │ │ ◀ December 2025 ▶ │ │ │ -│ │ └─────────────────────────────────────────────┘ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ░░│ │ -│ │░░ SPENDING BREAKDOWN ░░│ │ -│ │░░ ░░│ │ -│ │░░ ┌─────────────────────────┐ ░░│ │ -│ │░░ │ │ ░░│ │ -│ │░░ │ ██████████ │ Shopping ░░│ │ -│ │░░ │ ████████████████ │ 38% ░░│ │ -│ │░░ │ ████ ████████████ │ ░░│ │ -│ │░░ │ ██ ████████████ │ Food ░░│ │ -│ │░░ │ ██ ██████████ │ 25% ░░│ │ -│ │░░ │ ████ ████████████ │ ░░│ │ -│ │░░ │ ████████████████ │ Transport ░░│ │ -│ │░░ │ ██████████ │ 18% ░░│ │ -│ │░░ │ │ ░░│ │ -│ │░░ └─────────────────────────┘ ░░│ │ -│ │░░ ░░│ │ -│ │░░ Total Spent: $1,280.50 ░░│ │ -│ │░░ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 📊 Category Breakdown │ │ -│ │ │ │ -│ │ ┌─────────────────────────────────────────────────┐ │ │ -│ │ │ 🛒 Shopping $487.00 │ │ │ -│ │ │ ═══════════════════════════════ │ │ │ -│ │ │ 38% of spending • ⬆️ 12% vs last month │ │ │ -│ │ │ │ │ │ -│ │ │ Budget: $400 ████████████░░░░ 122% │ │ │ -│ │ │ ⚠️ $87 over budget │ │ │ -│ │ └─────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ ┌─────────────────────────────────────────────────┐ │ │ -│ │ │ 🍔 Food & Dining $320.00 │ │ │ -│ │ │ ═══════════════════ │ │ │ -│ │ │ 25% of spending • ⬇️ 5% vs last month │ │ │ -│ │ │ │ │ │ -│ │ │ Budget: $350 ██████████████░░░░ 91% │ │ │ -│ │ │ ✓ $30 remaining │ │ │ -│ │ └─────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ ┌─────────────────────────────────────────────────┐ │ │ -│ │ │ 🚗 Transport $230.50 │ │ │ -│ │ │ ═════════════ │ │ │ -│ │ │ 18% of spending • Same as last month │ │ │ -│ │ │ │ │ │ -│ │ │ Budget: $300 ████████████░░░░░░ 77% │ │ │ -│ │ │ ✓ $69.50 remaining │ │ │ -│ │ └─────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ ┌─────────────────────────────────────────────────┐ │ │ -│ │ │ 🎬 Entertainment $158.00 │ │ │ -│ │ │ ═══════════ │ │ │ -│ │ │ 12% of spending • ⬆️ 8% vs last month │ │ │ -│ │ └─────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ ┌─────────────────────────────────────────────────┐ │ │ -│ │ │ ⚡ Utilities $85.00 │ │ │ -│ │ │ ═══════ │ │ │ -│ │ │ 7% of spending │ │ │ -│ │ └─────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 📈 Spending Trend (6 Months) │ │ -│ │ │ │ -│ │ $2k ┤ │ │ -│ │ │ ╭──╮ │ │ -│ │ $1.5k│ ╭──╮ │ │ ╭──╮ │ │ -│ │ │ │ │ ╭──╮│ │ │ │ │ │ -│ │ $1k ├────┤ ├──┤ ├┤ ├──┤ ├──── │ │ -│ │ │ │ │ │ ││ │ │ │ │ │ -│ │ $500├────┴──┴──┴──┴┴──┴──┴──┴──── │ │ -│ │ └──────────────────────────────────── │ │ -│ │ Jul Aug Sep Oct Nov Dec │ │ -│ │ │ │ -│ │ Average: $1,450/month │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────────────────────────────┘ - -Legend: -Donut chart = Interactive, tap segment to see category detail -█ Budget filled = Gradient based on category color -░ Budget remaining = Gray (#E5E7EB) -⬆️ = Increase indicator (amber) -⬇️ = Decrease indicator (green) -``` - ---- - -## Screen 3: Transaction Detail (Enhanced) - -``` -┌─────────────────────────────────────────────────────────────────┐ -│░░░░░░░░░░░░░░░░░░░ STATUS BAR ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ← Transaction 📤 🏷️ ⋮ │ -│ │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ░░│ │ -│ │░░ ┌─────────────────┐ ░░│ │ -│ │░░ │ │ ░░│ │ -│ │░░ │ 🛒 │ ░░│ │ -│ │░░ │ │ ░░│ │ -│ │░░ └─────────────────┘ ░░│ │ -│ │░░ ░░│ │ -│ │░░ Amazon Prime ░░│ │ -│ │░░ Shopping ░░│ │ -│ │░░ ░░│ │ -│ │░░ ┌───────────────────────┐ ░░│ │ -│ │░░ │ │ ░░│ │ -│ │░░ │ -$149.00 │ ░░│ │ -│ │░░ │ │ ░░│ │ -│ │░░ └───────────────────────┘ ░░│ │ -│ │░░ ░░│ │ -│ │░░ ┌───────────────┐ ░░│ │ -│ │░░ │ ✓ Completed │ ░░│ │ -│ │░░ └───────────────┘ ░░│ │ -│ │░░ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 🏷️ Tags + Add Tag │ │ -│ │ │ │ -│ │ ┌────────────┐ ┌──────────────┐ ┌─────────────┐ │ │ -│ │ │ 🎁 Gift │ │ 💼 Business │ │ 📦 Returns │ │ │ -│ │ └────────────┘ └──────────────┘ └─────────────┘ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 📋 Transaction Details │ │ -│ │ │ │ -│ │ Transaction ID │ │ -│ │ TXN-2025122815342 📋 Copy │ │ -│ │ ─────────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ Date & Time │ │ -│ │ December 28, 2025 at 6:15 PM │ │ -│ │ ─────────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ Transaction Type │ │ -│ │ 💳 Card Payment (Visa ****4521) │ │ -│ │ ─────────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ Account │ │ -│ │ Savings Account ****4521 │ │ -│ │ ─────────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ Balance After │ │ -│ │ $4,851.00 │ │ -│ │ ─────────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ Category │ │ -│ │ 🛒 Shopping Change ▶ │ │ -│ │ ─────────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ Reference │ │ -│ │ Amazon Prime Annual Subscription Renewal │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 🧾 Receipt + Attach │ │ -│ │ │ │ -│ │ ┌─────────────────────────────────────────────────┐ │ │ -│ │ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ │ -│ │ │░░ ░░│ │ │ -│ │ │░░ 📷 Tap to attach a receipt ░░│ │ │ -│ │ │░░ or upload from gallery ░░│ │ │ -│ │ │░░ ░░│ │ │ -│ │ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ │ -│ │ └─────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 📝 Notes + Add Note│ │ -│ │ │ │ -│ │ No notes added yet │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ Need help? │ │ -│ │ │ │ -│ │ ┌────────────────────┐ ┌────────────────────────┐ │ │ -│ │ │ 🚫 Report Issue │ │ 💬 Contact Support │ │ │ -│ │ └────────────────────┘ └────────────────────────┘ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────────────────────────────┘ - -Legend: -Tags = Custom user-created labels for organization -Receipt attachment = Camera or gallery picker -Category change = Opens category selector bottom sheet -``` - ---- - -## Screen 4: Recurring Transactions View - -``` -┌─────────────────────────────────────────────────────────────────┐ -│░░░░░░░░░░░░░░░░░░░ STATUS BAR ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ← Recurring Payments ⋮ │ -│ │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ░░│ │ -│ │░░ MONTHLY SUBSCRIPTIONS ░░│ │ -│ │░░ ░░│ │ -│ │░░ $127.47 / month ░░│ │ -│ │░░ ═══════════════ ░░│ │ -│ │░░ ░░│ │ -│ │░░ 8 active subscriptions ░░│ │ -│ │░░ $1,529.64 / year ░░│ │ -│ │░░ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ⏰ Coming Up │ │ -│ │ │ │ -│ │ ┌──────────────────────────────────────────────────┐ │ │ -│ │ │ 🎬 Netflix $14.99 ⚡ Tomorrow │ │ │ -│ │ │ Monthly • Next: Dec 31 │ │ │ -│ │ └──────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ ┌──────────────────────────────────────────────────┐ │ │ -│ │ │ 🎵 Spotify $9.99 📅 In 3 days │ │ │ -│ │ │ Monthly • Next: Jan 2 │ │ │ -│ │ └──────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ ┌──────────────────────────────────────────────────┐ │ │ -│ │ │ ☁️ iCloud $9.99 📅 In 5 days │ │ │ -│ │ │ Monthly • Next: Jan 4 │ │ │ -│ │ └──────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 🔄 All Subscriptions │ │ -│ │ │ │ -│ │ ┌──────────────────────────────────────────────────┐ │ │ -│ │ │ 🎬 Netflix │ │ │ -│ │ │ $14.99/mo • Entertainment │ │ │ -│ │ │ ─────────────────────────────────────── │ │ │ -│ │ │ Active since Jan 2023 • Total paid: $359.76 │ │ │ -│ │ └──────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ ┌──────────────────────────────────────────────────┐ │ │ -│ │ │ 🎵 Spotify Premium │ │ │ -│ │ │ $9.99/mo • Entertainment │ │ │ -│ │ │ ─────────────────────────────────────── │ │ │ -│ │ │ Active since Mar 2022 • Total paid: $339.66 │ │ │ -│ │ └──────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ ┌──────────────────────────────────────────────────┐ │ │ -│ │ │ 🛡️ Amazon Prime │ │ │ -│ │ │ $149.00/yr • Shopping │ │ │ -│ │ │ ─────────────────────────────────────── │ │ │ -│ │ │ Active since 2021 • Total paid: $596.00 │ │ │ -│ │ └──────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ ┌──────────────────────────────────────────────────┐ │ │ -│ │ │ 💪 Gym Membership │ │ │ -│ │ │ $49.99/mo • Health │ │ │ -│ │ │ ─────────────────────────────────────── │ │ │ -│ │ │ Active since Jun 2024 • Total paid: $349.93 │ │ │ -│ │ └──────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ ┌──────────────────────────────────────────────────┐ │ │ -│ │ │ ☁️ iCloud Storage │ │ │ -│ │ │ $9.99/mo • Technology │ │ │ -│ │ │ ─────────────────────────────────────── │ │ │ -│ │ │ Active since 2020 • Total paid: $599.40 │ │ │ -│ │ └──────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ 💡 Tip: We detected 2 unused subscriptions that │ │ -│ │ could save you $19.98/month │ │ -│ │ Review ▶ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────────────────────────────┘ - -Legend: -⚡ Tomorrow = Urgent badge (amber) -📅 In X days = Upcoming badge (gray) -Total paid = Lifetime spend on this subscription -Unused subscriptions = AI-detected inactive subscriptions -``` - ---- - -## Screen 5: Smart Search Results - -``` -┌─────────────────────────────────────────────────────────────────┐ -│░░░░░░░░░░░░░░░░░░░ STATUS BAR ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ← Search ✕ │ -│ │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ 🔍 coffee last week ✕ 🎤 │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ░░│ │ -│ │░░ 🤖 I found 4 coffee transactions from last week ░░│ │ -│ │░░ ░░│ │ -│ │░░ Total: $23.50 ░░│ │ -│ │░░ Average: $5.88 per visit ░░│ │ -│ │░░ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ DECEMBER 22-28, 2025 │ │ -│ │ │ │ -│ │ ┌──────────────────────────────────────────────────┐ │ │ -│ │ │ ☕ Starbucks -$5.75 │ │ │ -│ │ │ Food & Dining • Dec 28, 8:30 AM │ │ │ -│ │ └──────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ ┌──────────────────────────────────────────────────┐ │ │ -│ │ │ ☕ Blue Bottle Coffee -$6.50 │ │ │ -│ │ │ Food & Dining • Dec 26, 9:15 AM │ │ │ -│ │ └──────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ ┌──────────────────────────────────────────────────┐ │ │ -│ │ │ ☕ Starbucks -$5.75 │ │ │ -│ │ │ Food & Dining • Dec 24, 7:45 AM │ │ │ -│ │ └──────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ ┌──────────────────────────────────────────────────┐ │ │ -│ │ │ ☕ Dunkin' -$5.50 │ │ │ -│ │ │ Food & Dining • Dec 22, 8:00 AM │ │ │ -│ │ └──────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 💡 Smart Suggestion │ │ -│ │ │ │ -│ │ You've spent $87.25 on coffee this month. │ │ -│ │ Making coffee at home could save you ~$60/month! │ │ -│ │ │ │ -│ │ [Dismiss] [Set Budget Alert] │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 🕐 Recent Searches │ │ -│ │ │ │ -│ │ ┌─────────────────────┐ ┌────────────────────────┐ │ │ -│ │ │ amazon │ │ groceries november │ │ │ -│ │ └─────────────────────┘ └────────────────────────┘ │ │ -│ │ ┌─────────────────────┐ ┌────────────────────────┐ │ │ -│ │ │ uber rides │ │ subscriptions │ │ │ -│ │ └─────────────────────┘ └────────────────────────┘ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 💬 Try asking: │ │ -│ │ │ │ -│ │ "How much did I spend on food this month?" │ │ -│ │ "Show me all Amazon purchases" │ │ -│ │ "Largest expense last week" │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────────────────────────────┘ - -Legend: -🤖 = AI-powered search summary -Natural language = Understands queries like "coffee last week" -Smart Suggestion = AI insight based on search results -``` - ---- - -## Screen 6: Filter Bottom Sheet (Enhanced) - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ │ -│ [Dimmed Background] │ -│ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ ───── │ │ -│ │ │ │ -│ │ Filter Transactions [Clear All] │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ ACCOUNT │ │ -│ │ │ │ -│ │ ┌──────────────────────────────────────────────────┐ │ │ -│ │ │░░░ Primary Savings ****4521 ✓ ░░░░░│ │ │ -│ │ └──────────────────────────────────────────────────┘ │ │ -│ │ ┌──────────────────────────────────────────────────┐ │ │ -│ │ │ Emergency Fund ****7832 │ │ │ -│ │ └──────────────────────────────────────────────────┘ │ │ -│ │ ┌──────────────────────────────────────────────────┐ │ │ -│ │ │ Vacation Savings ****9156 │ │ │ -│ │ └──────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ TRANSACTION TYPE │ │ -│ │ │ │ -│ │ ┌────────┐ ┌────────┐ ┌──────────┐ ┌───────────┐ │ │ -│ │ │░ All ✓░│ │ Income │ │ Expenses │ │ Recurring │ │ │ -│ │ └────────┘ └────────┘ └──────────┘ └───────────┘ │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ CATEGORY │ │ -│ │ │ │ -│ │ ┌─────────┐ ┌───────────┐ ┌───────────┐ ┌─────────┐ │ │ -│ │ │ 🛒 Shop │ │ 🍔 Food │ │ 🚗 Travel │ │ 🎬 Fun │ │ │ -│ │ └─────────┘ └───────────┘ └───────────┘ └─────────┘ │ │ -│ │ ┌─────────┐ ┌───────────┐ ┌───────────┐ │ │ -│ │ │ ⚡ Bills│ │ 💪 Health │ │ 📚 More...│ │ │ -│ │ └─────────┘ └───────────┘ └───────────┘ │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ DATE RANGE │ │ -│ │ │ │ -│ │ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────────────┐ │ │ -│ │ │ Today │ │░7 Days░│ │ 30 Days│ │ Custom 📅 │ │ │ -│ │ └────────┘ └────────┘ └────────┘ └────────────────┘ │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ AMOUNT RANGE │ │ -│ │ │ │ -│ │ ┌──────────────┐ ┌──────────────┐ │ │ -│ │ │ Min: $0 │ │ Max: $10,000 │ │ │ -│ │ └──────────────┘ └──────────────┘ │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ ┌──────────────────────────────────────────────────┐ │ │ -│ │ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ │ -│ │ │░░ Apply Filters (24 results) ░░│ │ │ -│ │ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ │ -│ │ └──────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────────────────────────────┘ - -Legend: -░░░ = Selected state (gradient background) -Results preview = Shows count before applying -Category chips = Multi-select enabled -``` - ---- - -## Screen 7: Export Statement Sheet - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ │ -│ [Dimmed Background] │ -│ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ ───── │ │ -│ │ │ │ -│ │ Export Statement ✕ │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ FORMAT │ │ -│ │ │ │ -│ │ ┌──────────────────────────────────────────────────┐ │ │ -│ │ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ │ -│ │ │░░ 📄 PDF ✓ ░░│ │ │ -│ │ │░░ Best for printing & sharing ░░│ │ │ -│ │ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ │ -│ │ └──────────────────────────────────────────────────┘ │ │ -│ │ ┌──────────────────────────────────────────────────┐ │ │ -│ │ │ 📊 Excel │ │ │ -│ │ │ Best for analysis & records │ │ │ -│ │ └──────────────────────────────────────────────────┘ │ │ -│ │ ┌──────────────────────────────────────────────────┐ │ │ -│ │ │ 📝 CSV │ │ │ -│ │ │ Best for importing to other apps │ │ │ -│ │ └──────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ DATE RANGE │ │ -│ │ │ │ -│ │ ┌──────────────────────────────────────────────────┐ │ │ -│ │ │ 📅 Dec 1 - Dec 29, 2025 Change ▶ │ │ │ -│ │ └──────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ INCLUDE │ │ -│ │ │ │ -│ │ ☑️ All transactions │ │ -│ │ ☐ Income only │ │ -│ │ ☐ Expenses only │ │ -│ │ ☑️ Include category breakdown │ │ -│ │ ☑️ Include running balance │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ DELIVERY │ │ -│ │ │ │ -│ │ ┌────────────────────┐ ┌──────────────────────────┐ │ │ -│ │ │░░░ Download ░░░░░░░│ │ Email to me │ │ │ -│ │ └────────────────────┘ └──────────────────────────┘ │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ ┌──────────────────────────────────────────────────┐ │ │ -│ │ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ │ -│ │ │░░ Generate Statement ░░│ │ │ -│ │ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ │ -│ │ └──────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Screen 8: Empty State - -``` -┌─────────────────────────────────────────────────────────────────┐ -│░░░░░░░░░░░░░░░░░░░ STATUS BAR ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ← Transactions 📊 📥 ⋮ │ -│ A/c: ****4521 │ -│ │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ 🔍 Search transactions... 🎤 │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ │ -│ │ -│ │ -│ │ -│ ┌───────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌─────────────────┐ │ │ -│ │ │ │ │ │ -│ │ │ 📊 💰 │ │ │ -│ │ │ ╭────╮ │ │ │ -│ │ │ │ │ │ │ │ -│ │ │ ╰────╯ │ │ │ -│ │ │ │ │ │ -│ │ └─────────────────┘ │ │ -│ │ │ │ -│ │ No Transactions Yet │ │ -│ │ │ │ -│ │ Your transaction history will │ │ -│ │ appear here once you make your │ │ -│ │ first transaction │ │ -│ │ │ │ -│ └───────────────────────────────────┘ │ -│ │ -│ │ -│ ┌─────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ░░│ │ -│ │░░ Make a Transfer → ░░│ │ -│ │░░ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └─────────────────────────────────────────────┘ │ -│ │ -│ │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ⌂ ☰ 💸 👤 │ -│ Home Accounts Transfer Profile │ -│ │ -└─────────────────────────────────────────────────────────────────┘ - -Legend: -Illustration = Subtle floating animation -Primary CTA = Make a Transfer (most likely next action) -``` - ---- - -## Screen 9: Spending Insights Modal - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ │ -│ [Dimmed Background] │ -│ │ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ ───── │ │ -│ │ │ │ -│ │ 💡 Weekly Spending Insights ✕ │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ ┌──────────────────────────────────────────────────┐ │ │ -│ │ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ │ -│ │ │░░ ░░│ │ │ -│ │ │░░ 🎉 Great week for your wallet! ░░│ │ │ -│ │ │░░ ░░│ │ │ -│ │ │░░ You spent 15% less than last week ░░│ │ │ -│ │ │░░ That's $89.50 saved! ░░│ │ │ -│ │ │░░ ░░│ │ │ -│ │ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ │ -│ │ └──────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ 📊 This Week vs Last Week │ │ -│ │ │ │ -│ │ ┌──────────────────────────────────────────────────┐ │ │ -│ │ │ │ │ │ -│ │ │ 🛒 Shopping $120 ← $180 ⬇️ 33% │ │ │ -│ │ │ ═══════════ ────────────── │ │ │ -│ │ │ │ │ │ -│ │ │ 🍔 Food $85 ← $92 ⬇️ 8% │ │ │ -│ │ │ ═════════ ───────────── │ │ │ -│ │ │ │ │ │ -│ │ │ 🚗 Transport $45 ← $35 ⬆️ 29% │ │ │ -│ │ │ ═══════ ──────── │ │ │ -│ │ │ │ │ │ -│ │ │ 🎬 Entertainment $25 ← $50 ⬇️ 50% │ │ │ -│ │ │ ═════ ────────── │ │ │ -│ │ │ │ │ │ -│ │ └──────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ 🏆 Achievements This Week │ │ -│ │ │ │ -│ │ ┌────────┐ ┌────────┐ ┌────────┐ │ │ -│ │ │ 🔥 │ │ 💰 │ │ 🎯 │ │ │ -│ │ │ 8-Day │ │ $89.50 │ │ Under │ │ │ -│ │ │ Streak │ │ Saved │ │ Budget │ │ │ -│ │ └────────┘ └────────┘ └────────┘ │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ ┌──────────────────────────────────────────────────┐ │ │ -│ │ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ │ -│ │ │░░ View Full Analytics ░░│ │ │ -│ │ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ │ -│ │ └──────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ [Share My Progress] [Set New Goal] │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────────────────────────────┘ - -Legend: -Weekly insights = Shown after certain triggers or on request -Comparison bars = Visual week-over-week comparison -Achievements = Gamification badges for money habits -``` - ---- - -## Screen 10: Saving Streak Card (Home Widget) - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ SAVING STREAK WIDGET (Embedded in Dashboard) │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ░░│ │ -│ │░░ 🔥 8-Day Saving Streak! ░░│ │ -│ │░░ ░░│ │ -│ │░░ ┌────┬────┬────┬────┬────┬────┬────┐ ░░│ │ -│ │░░ │ 🔥 │ 🔥 │ 🔥 │ 🔥 │ 🔥 │ 🔥 │ 🔥 │ 🔥 ░░│ │ -│ │░░ │ M │ T │ W │ T │ F │ S │ S │ ░░│ │ -│ │░░ └────┴────┴────┴────┴────┴────┴────┘ ░░│ │ -│ │░░ ░░│ │ -│ │░░ You've spent less than your $50 daily average ░░│ │ -│ │░░ for 8 days straight! Keep it going! 🎯 ░░│ │ -│ │░░ ░░│ │ -│ │░░ Best streak ever: 12 days ░░│ │ -│ │░░ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ Streak Rules: │ -│ ───────────────────────────────────────────────────────── │ -│ • Streak continues when daily spending < daily average │ -│ • Fire emoji for each streak day │ -│ • Best streak tracked for personal record │ -│ • Break streak = fire turns gray, count resets │ -│ │ -│ Animation: │ -│ ───────────────────────────────────────────────────────── │ -│ • Fire emojis have subtle flickering animation │ -│ • Current day fire has glow effect │ -│ • Streak break = extinguishing animation │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Component Specifications - -### TransactionItem (Enhanced) - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ TRANSACTION ITEM v2.0 │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ ┌────────┐ │ │ -│ │ │ Icon │ Title Amount │ │ -│ │ │ 48dp │ Category • Time │ │ -│ │ └────────┘ 🔄/🧾/⚠️ Badge ▶ │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ Props: │ -│ ───────────────────────────────────────────────────────────── │ -│ • merchantName: String - Transaction title │ -│ • category: Category - Category with icon & color │ -│ • amount: Money - Transaction amount │ -│ • timestamp: DateTime - When transaction occurred │ -│ • isRecurring: Boolean - Show 🔄 badge │ -│ • hasReceipt: Boolean - Show 🧾 badge │ -│ • isOverBudget: Boolean - Show ⚠️ badge │ -│ • customTags: List - User-created tags │ -│ • onClick: () -> Unit - Navigate to detail │ -│ │ -│ Dimensions: │ -│ ───────────────────────────────────────────────────────────── │ -│ • Card Height: 80dp │ -│ • Icon Container: 48dp x 48dp │ -│ • Corner Radius: 16dp │ -│ • Horizontal Padding: 16dp │ -│ • Badge Size: 20dp │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - -### SpendingInsightCard - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ SPENDING INSIGHT CARD │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ ⚠️/💡/🎉 Insight text here ▶│ │ -│ │ Supporting detail text │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ Props: │ -│ ───────────────────────────────────────────────────────────── │ -│ • type: InsightType - WARNING, TIP, CELEBRATION │ -│ • title: String - Main insight message │ -│ • detail: String - Supporting information │ -│ • action: InsightAction? - Optional CTA │ -│ • onClick: () -> Unit - Handle insight tap │ -│ │ -│ Styling by Type: │ -│ ───────────────────────────────────────────────────────────── │ -│ • WARNING: Amber background (#FFB800 at 12%), ⚠️ icon │ -│ • TIP: Blue background (#667EEA at 12%), 💡 icon │ -│ • CELEBRATION: Green background (#00D09C at 12%), 🎉 icon │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - -### CategoryBreakdownRow - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ CATEGORY BREAKDOWN ROW │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ 🛒 Shopping $487.00 │ │ -│ │ ═══════════════════════════════ │ │ -│ │ 38% of spending • ⬆️ 12% vs last month │ │ -│ │ │ │ -│ │ Budget: $400 ████████████░░░░ 122% │ │ -│ │ ⚠️ $87 over budget │ │ -│ └─────────────────────────────────────────────────────────┘ │ -│ │ -│ Props: │ -│ ───────────────────────────────────────────────────────────── │ -│ • category: Category - Category with icon │ -│ • amount: Money - Total spent │ -│ • percentage: Float - % of total spending │ -│ • trend: Trend - UP, DOWN, SAME vs last period │ -│ • trendPercent: Float - Change percentage │ -│ • budget: Money? - Optional budget for category │ -│ • budgetUsedPercent: Float - % of budget used │ -│ • onClick: () -> Unit - View category detail │ -│ │ -│ Budget Bar Colors: │ -│ ───────────────────────────────────────────────────────────── │ -│ • 0-80%: Category gradient color │ -│ • 80-100%: Warning amber (#FFB800) │ -│ • >100%: Error red (#FF4757) │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - -### StreakWidget - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ STREAK WIDGET │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ ┌────┬────┬────┬────┬────┬────┬────┐ │ -│ │ 🔥 │ 🔥 │ 🔥 │ 🔥 │ 🔥 │ ⚪ │ ⚪ │ │ -│ │ M │ T │ W │ T │ F │ S │ S │ │ -│ └────┴────┴────┴────┴────┴────┴────┘ │ -│ │ -│ Props: │ -│ ───────────────────────────────────────────────────────────── │ -│ • currentStreak: Int - Current streak count │ -│ • bestStreak: Int - Personal best record │ -│ • dailyTarget: Money - Target to beat │ -│ • weekDays: List - Day-by-day streak status │ -│ │ -│ StreakDay: │ -│ ───────────────────────────────────────────────────────────── │ -│ • dayLabel: String - "M", "T", "W", etc. │ -│ • status: StreakStatus - ACTIVE, BROKEN, FUTURE │ -│ • spending: Money - Actual spending for day │ -│ │ -│ Animations: │ -│ ───────────────────────────────────────────────────────────── │ -│ • ACTIVE: Fire flicker animation (0.5s cycle) │ -│ • Today: Glow pulse animation │ -│ • BROKEN: Gray circle, no animation │ -│ • FUTURE: Empty circle │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Animation Specifications - -### Category Breakdown Chart Animation - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ DONUT CHART ANIMATION │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ Entry Animation (on screen load): │ -│ ───────────────────────────────────────────────────────────── │ -│ 1. Segments draw sequentially (0-400ms per segment) │ -│ 2. Each segment animates from 0° to final arc │ -│ 3. Total animation: ~1200ms │ -│ 4. Easing: EaseOutQuart │ -│ │ -│ Interaction Animation (on tap segment): │ -│ ───────────────────────────────────────────────────────────── │ -│ 1. Tapped segment scales out 5% │ -│ 2. Other segments dim to 60% opacity │ -│ 3. Category detail appears below │ -│ 4. Duration: 200ms │ -│ │ -│ Kotlin: │ -│ ```kotlin │ -│ val segmentAngle by animateFloatAsState( │ -│ targetValue = targetAngle, │ -│ animationSpec = tween( │ -│ durationMillis = 400, │ -│ easing = FastOutSlowInEasing │ -│ ) │ -│ ) │ -│ ``` │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - -### Budget Progress Animation - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ BUDGET BAR ANIMATION │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ Fill Animation: │ -│ ───────────────────────────────────────────────────────────── │ -│ 1. Bar fills from 0% to target width │ -│ 2. Duration: 600ms │ -│ 3. Easing: EaseOutExpo │ -│ │ -│ Over Budget State: │ -│ ───────────────────────────────────────────────────────────── │ -│ 1. Bar fills to 100% │ -│ 2. Pulse animation on overflow indicator │ -│ 3. Color transitions to red (#FF4757) │ -│ │ -│ Kotlin: │ -│ ```kotlin │ -│ val budgetFill by animateFloatAsState( │ -│ targetValue = min(1f, usedPercent), │ -│ animationSpec = tween(600, easing = FastOutSlowInEasing) │ -│ ) │ -│ │ -│ val budgetColor by animateColorAsState( │ -│ targetValue = when { │ -│ usedPercent > 1f -> Error │ -│ usedPercent > 0.8f -> Warning │ -│ else -> categoryColor │ -│ } │ -│ ) │ -│ ``` │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - -### Streak Fire Animation - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ FIRE EMOJI ANIMATION │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ Idle Flicker: │ -│ ───────────────────────────────────────────────────────────── │ -│ • Scale oscillation: 1.0 → 1.05 → 1.0 │ -│ • Rotation: -2° → +2° │ -│ • Duration: 500ms cycle │ -│ • Repeat: Infinite │ -│ │ -│ Today's Fire (current day): │ -│ ───────────────────────────────────────────────────────────── │ -│ • Additional glow effect │ -│ • Scale: 1.1x larger than other days │ -│ • Glow pulse: 800ms cycle │ -│ │ -│ Streak Break Animation: │ -│ ───────────────────────────────────────────────────────────── │ -│ 1. Fire shrinks (scale 1.0 → 0.5) │ -│ 2. Color desaturates to gray │ -│ 3. Smoke particles rise │ -│ 4. Duration: 600ms │ -│ │ -│ Kotlin: │ -│ ```kotlin │ -│ val fireScale by animateFloatAsState( │ -│ targetValue = if (isActive) 1f + sin(time) * 0.05f else 0.5f│ -│ ) │ -│ ``` │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - ---- - -## State Management - -```kotlin -// TransactionState.kt -data class TransactionDashboardState( - val isLoading: Boolean = false, - val transactions: List = emptyList(), - val monthlySummary: MonthlySummary? = null, - val smartInsights: List = emptyList(), - val savingStreak: SavingStreak? = null, - val searchQuery: String = "", - val selectedFilters: TransactionFilters = TransactionFilters(), - val error: String? = null -) - -data class MonthlySummary( - val month: YearMonth, - val totalIncome: Money, - val totalExpenses: Money, - val netAmount: Money, - val isPositive: Boolean, - val celebrationMessage: String? -) - -data class SpendingInsight( - val id: String, - val type: InsightType, - val title: String, - val detail: String, - val actionLabel: String?, - val priority: Int -) - -enum class InsightType { - WARNING, // Unusual spending, over budget - TIP, // Money-saving suggestion - CELEBRATION, // Positive achievement - RECURRING // Subscription alert -} - -data class SavingStreak( - val currentStreak: Int, - val bestStreak: Int, - val dailyTarget: Money, - val weekStatus: List -) - -data class StreakDay( - val day: DayOfWeek, - val date: LocalDate, - val status: StreakStatus, - val spending: Money -) - -enum class StreakStatus { - ACTIVE, // Under daily target - BROKEN, // Over daily target - FUTURE // Day hasn't occurred yet -} - -data class SpendingAnalytics( - val categoryBreakdown: List, - val monthlyTrend: List, - val totalSpent: Money, - val averageMonthly: Money -) - -data class CategorySpending( - val category: TransactionCategory, - val amount: Money, - val percentage: Float, - val trend: SpendingTrend, - val trendPercent: Float, - val budget: Money?, - val budgetUsedPercent: Float -) - -enum class SpendingTrend { - UP, - DOWN, - SAME -} - -data class RecurringTransaction( - val id: Long, - val merchantName: String, - val amount: Money, - val frequency: RecurringFrequency, - val category: TransactionCategory, - val nextDate: LocalDate, - val activeSince: LocalDate, - val totalPaid: Money -) - -enum class RecurringFrequency { - WEEKLY, - BIWEEKLY, - MONTHLY, - QUARTERLY, - ANNUALLY -} -``` - ---- - -## Accessibility Labels - -```kotlin -// TransactionAccessibility.kt -object TransactionAccessibility { - // Transaction item - fun transactionItem(item: TransactionItem) = buildString { - append("${item.merchantName}, ") - append("${item.category.displayName}, ") - append("${item.timestamp.formatForAccessibility()}, ") - val direction = if (item.amount.isNegative) "expense" else "income" - append("$direction of ${item.amount.formatted}") - if (item.isRecurring) append(", recurring transaction") - if (item.hasReceipt) append(", receipt attached") - if (item.isOverBudget) append(", over budget warning") - } - - // Monthly summary - fun monthlySummary(summary: MonthlySummary) = buildString { - append("${summary.month.formatForAccessibility()} summary. ") - append("Total income ${summary.totalIncome.formatted}. ") - append("Total expenses ${summary.totalExpenses.formatted}. ") - append("Net ${if (summary.isPositive) "positive" else "negative"} ") - append("${summary.netAmount.formatted}") - } - - // Saving streak - fun savingStreak(streak: SavingStreak) = buildString { - append("${streak.currentStreak} day saving streak. ") - append("Daily target: ${streak.dailyTarget.formatted}. ") - append("Personal best: ${streak.bestStreak} days") - } - - // Category breakdown - fun categorySpending(category: CategorySpending) = buildString { - append("${category.category.displayName}, ") - append("${category.amount.formatted}, ") - append("${category.percentage.toInt()} percent of spending. ") - val trend = when (category.trend) { - SpendingTrend.UP -> "up ${category.trendPercent.toInt()} percent" - SpendingTrend.DOWN -> "down ${category.trendPercent.toInt()} percent" - SpendingTrend.SAME -> "same as" - } - append("$trend versus last month") - category.budget?.let { - append(". Budget ${category.budgetUsedPercent.toInt()} percent used") - } - } - - // Spending insight - fun spendingInsight(insight: SpendingInsight) = buildString { - val type = when (insight.type) { - InsightType.WARNING -> "Warning" - InsightType.TIP -> "Tip" - InsightType.CELEBRATION -> "Achievement" - InsightType.RECURRING -> "Recurring payment alert" - } - append("$type: ${insight.title}. ${insight.detail}") - } -} -``` - ---- - -## Dark Mode Color Transformations - -| Element | Light Mode | Dark Mode | -|---------|------------|-----------| -| Background | #F8F9FA | #0D1117 | -| Surface/Card | #FFFFFF | #1A1F2E | -| Primary Text | #1F2937 | #F0F6FC | -| Secondary Text | #6B7280 | #8B949E | -| Dividers | #E5E7EB | #30363D | -| Chart Background | #FFFFFF | #21262D | -| Category Bar Fill | Category color | Category color (same) | -| Category Bar Empty | #E5E7EB | #30363D | -| Income Amount | #00D09C | #00D09C | -| Expense Amount | #FF4757 | #FF4757 | -| Streak Fire Active | 🔥 (normal) | 🔥 (same) | -| Streak Day Inactive | #E5E7EB | #30363D | -| Insight Warning BG | #FFB800 at 12% | #FFB800 at 15% | -| Insight Tip BG | #667EEA at 12% | #667EEA at 15% | - ---- - -## Implementation Notes - -### Required Composables - -```kotlin -// Main screens -@Composable fun TransactionDashboardScreen() -@Composable fun SpendingAnalyticsScreen() -@Composable fun TransactionDetailScreen() -@Composable fun RecurringTransactionsScreen() -@Composable fun SmartSearchScreen() - -// Components -@Composable fun TransactionItemCard() -@Composable fun MonthlySummaryHero() -@Composable fun SpendingInsightCard() -@Composable fun SavingStreakWidget() -@Composable fun CategoryBreakdownRow() -@Composable fun DonutChart() -@Composable fun BudgetProgressBar() -@Composable fun SpendingTrendChart() -@Composable fun RecurringTransactionCard() -@Composable fun TransactionTagChip() -@Composable fun ReceiptAttachment() - -// Bottom Sheets -@Composable fun FilterBottomSheet() -@Composable fun ExportBottomSheet() -@Composable fun CategorySelectorSheet() -@Composable fun TagEditorSheet() -@Composable fun DateRangePicker() - -// Dialogs -@Composable fun WeeklyInsightsDialog() -@Composable fun StreakBreakDialog() -``` - -### ViewModel Integration - -```kotlin -class TransactionViewModel : ViewModel() { - val dashboardState: StateFlow - val analyticsState: StateFlow - val recurringState: StateFlow> - - fun loadTransactions(accountId: Long) - fun searchTransactions(query: String) - fun applyFilters(filters: TransactionFilters) - fun loadAnalytics(period: AnalyticsPeriod) - fun loadRecurringTransactions() - fun updateTransactionCategory(id: Long, category: TransactionCategory) - fun addTag(transactionId: Long, tag: String) - fun attachReceipt(transactionId: Long, imageUri: Uri) - fun exportStatement(format: ExportFormat, dateRange: DateRange) - fun markInsightDismissed(insightId: String) -} -``` - ---- - -## Version History - -| Version | Date | Changes | -|---------|------|---------| -| 1.0 | 2025-12-29 | Initial design with Revolut-style transaction list | -| 2.0 | 2025-12-30 | Complete redesign with Smart Money Intelligence Hub: spending analytics, category budgets, saving streaks, smart search, recurring transaction detection, AI insights, gamification | - ---- - -## Data Binding Reference - -> **For `/implement` command**: Maps UI components to API.md sections. -> **Source of Truth**: See `API.md` for complete endpoint details. - -### Screen → API.md Mapping - -| Screen | API.md Section | Key Fields | -|--------|----------------|------------| -| Transaction List | `Endpoints Required → 1. Recent Transactions` | `pageItems[]`, `totalFilteredRecords` | -| Savings Transaction Detail | `Endpoints Required → 2. Savings Transaction Detail` | Full transaction object | -| Loan Transaction Detail | `Endpoints Required → 3. Loan Transaction Detail` | Full transaction with portions | - -### Pagination - -See `API.md → 1. Recent Transactions` for pagination parameters: -- `offset`: Starting position -- `limit`: Records per page (default 50) - -### Client-Only Features - -| Feature | Storage | Notes | -|---------|---------|-------| -| Spending Analytics | Client-side | Calculated from transactions | -| Category Budgets | DataStore | Local feature | -| Transaction Tags | DataStore | Local categorization | -| Smart Search | Client-side | Filter by amount/date/type | -| Recurring Detection | Client-side | Pattern analysis | - -### Actions → API.md Mapping - -| User Action | API.md Reference | Navigation | -|-------------|------------------|------------| -| Load Initial | `1. Recent Transactions` (offset=0) | First page | -| Load More | `1. Recent Transactions` (offset+=limit) | Pagination | -| Tap Savings Tx | `2. Savings Transaction Detail` | → Transaction Detail | -| Tap Loan Tx | `3. Loan Transaction Detail` | → Transaction Detail | -| Pull to Refresh | `1. Recent Transactions` (offset=0) | Reload | - -### Error Handling - -See `API.md → Error Responses` for complete error codes. diff --git a/claude-product-cycle/design-spec-layer/features/recent-transaction/SPEC.md b/claude-product-cycle/design-spec-layer/features/recent-transaction/SPEC.md deleted file mode 100644 index 139123ba7..000000000 --- a/claude-product-cycle/design-spec-layer/features/recent-transaction/SPEC.md +++ /dev/null @@ -1,247 +0,0 @@ -# Recent Transactions - Feature Specification - -> **Purpose**: Display transaction history for savings accounts with filtering capabilities -> **User Value**: View and filter transaction history to track financial activity -> **Last Updated**: 2025-12-29 - ---- - -## 1. Overview - -### 1.1 Feature Summary -The Recent Transactions screen displays a list of transactions for the user's savings accounts. Users can filter transactions by account and by transaction type (All, Debit, Credit). The screen supports viewing transaction details by tapping on individual transactions. - -### 1.2 User Stories -- As a user, I want to see my transaction history so I can track my spending and deposits -- As a user, I want to filter transactions by account so I can view activity for a specific account -- As a user, I want to filter by transaction type (credit/debit) so I can focus on specific transaction categories -- As a user, I want to see transaction details so I can understand the full context of each transaction -- As a user, I want to see the date and amount of each transaction so I can reconcile my records - ---- - -## 2. Screen Layout - -### 2.1 ASCII Mockup - -``` -+-------------------------------------------+ -| [<] Transaction History [Filter]| <- TopBar with back & filter icons -| A/c No: 000000001 | <- Selected account subtitle -+-------------------------------------------+ -| | -| +---------------------------------------+| -| | CREDIT + $500.00 || <- Transaction item -| | 15 Sep 2025 || -| +---------------------------------------+| -| |---------------------------------------| -| +---------------------------------------+| -| | DEBIT - $150.00 || -| | 14 Sep 2025 || -| +---------------------------------------+| -| |---------------------------------------| -| +---------------------------------------+| -| | CREDIT + $1,200.00 || -| | 10 Sep 2025 || -| +---------------------------------------+| -| |---------------------------------------| -| +---------------------------------------+| -| | DEBIT - $75.50 || -| | 8 Sep 2025 || -| +---------------------------------------+| -| | -+-------------------------------------------+ - -+-------------------------------------------+ -| FILTER BOTTOM SHEET | -+-------------------------------------------+ -| Filter Transactions [Clear All] | -| -----------------------------------------| -| Filter By Account: | -| +---------------------------------------+| -| | A/c No: 000000001 [v] || -| | Balance: 5,000.00 USD || -| +---------------------------------------+| -| | -| Transaction Type: | -| +-------+ +-------+ +-------+ | -| | [All] | |Debits | |Credits| | -| +-------+ +-------+ +-------+ | -| | -| [ Apply Filters ] | -| | -+-------------------------------------------+ -``` - -### 2.2 Sections Table - -| # | Section | Description | API | Priority | -|---|---------|-------------|-----|----------| -| 1 | TopBar | Title, back button, filter icon | - | P0 | -| 2 | Account Subtitle | Selected account number display | - | P0 | -| 3 | Transaction List | Scrollable list of transactions | savingsaccounts/{id}?associations=transactions | P0 | -| 4 | Filter Bottom Sheet | Account selector + type filter | clients/{id}/accounts | P1 | -| 5 | Empty State | Shown when no transactions | - | P0 | -| 6 | Loading State | Shown during data fetch | - | P0 | -| 7 | Error State | Shown on API failure with retry | - | P0 | - ---- - -## 3. User Interactions - -| Action | Trigger | Result | API Call | -|--------|---------|--------|----------| -| Navigate back | Tap back arrow | Return to previous screen | - | -| Toggle filter | Tap filter icon | Show/hide filter bottom sheet | - | -| Select account | Tap account dropdown | Show available accounts | - | -| Change account | Select from dropdown | Load transactions for selected account | savingsaccounts/{id}?associations=transactions | -| Select transaction type | Tap All/Debits/Credits chip | Apply client-side filter | - | -| Apply filter | Tap "Apply Filters" button | Close sheet, apply filters | savingsaccounts/{id}?associations=transactions (if account changed) | -| Clear filter | Tap "Clear All" | Reset to first account, ALL type | savingsaccounts/{id}?associations=transactions | -| Tap transaction | Click transaction row | Navigate to transaction details | - | -| Retry on error | Tap "Retry" button | Reload accounts and transactions | clients/{id}/accounts | - ---- - -## 4. State Model - -```kotlin -enum class TransactionFilterType { - ALL, - DEBIT, - CREDIT, -} - -data class RecentTransactionUiState( - val clientId: Long? = null, - val viewState: ViewState, - val transactions: List = emptyList(), - val accounts: List = emptyList(), - val selectedAccount: SavingAccount? = null, - val filterType: TransactionFilterType = TransactionFilterType.ALL, - val showFilter: Boolean = false, - val isRefreshing: Boolean = false, - val isPaginating: Boolean = false, - val canPaginate: Boolean = false, - val isNetworkAvailable: Boolean = false, -) { - sealed interface ViewState { - data object Loading : ViewState - data object Empty : ViewState - data class Error(val message: String?) : ViewState - data class Content(val list: List) : ViewState - } -} - -sealed interface RecentTransactionAction { - data object LoadInitial : RecentTransactionAction - data object Refresh : RecentTransactionAction - data class LoadMore(val offset: Int) : RecentTransactionAction - data object ToggleFilter : RecentTransactionAction - data class ApplyFilter(val account: SavingAccount, val type: TransactionFilterType) : RecentTransactionAction - data object ClearFilter : RecentTransactionAction - data class OnTransactionClick(val transaction: Transactions) : RecentTransactionAction - - sealed interface Internal : RecentTransactionAction { - data class AccountsLoaded(val accounts: List) : Internal - data class TransactionsLoaded(val items: List) : Internal - data class LoadFailed(val error: Throwable?) : Internal - } -} - -sealed interface RecentTransactionEvent { - data class NavigateToDetails( - val transactionId: String, - val accountType: String, - val accountId: Long, - ) : RecentTransactionEvent -} -``` - ---- - -## 5. API Requirements - -| Endpoint | Method | Purpose | Status | -|----------|--------|---------|--------| -| `/self/clients/{clientId}/accounts` | GET | Fetch savings accounts for filter | Implemented | -| `/self/savingsaccounts/{accountId}?associations=transactions` | GET | Fetch transactions for account | Implemented | - ---- - -## 6. Edge Cases & Error Handling - -| Scenario | Behavior | UI Feedback | -|----------|----------|-------------| -| No internet | Show network unavailable | isNetworkAvailable = false | -| No accounts | Set viewState to Empty | "No recent transactions found." | -| No transactions | Set viewState to Empty | "No recent transactions found." | -| API error | Set viewState to Error | Error message + Retry button | -| Filter returns empty | Set viewState to Empty | "No recent transactions found." | -| Account not selected | Skip loading transactions | Empty state | -| Only inactive accounts | Filter accounts by active status | Show only active accounts | - ---- - -## 7. Components - -| Component | Props | Reusable? | -|-----------|-------|-----------| -| TransactionItem | transaction: Transactions, onClick: () -> Unit | Yes | -| TransactionList | transactions: List, onTransactionClick: (Transactions) -> Unit | Yes | -| ErrorScreen | message: String, onRetry: () -> Unit | Yes | -| TransactionFilterSheetContent | accounts, currentAccount, currentFilterType, onApply, onClear | No | -| FilterOptionChip | label: String, isSelected: Boolean, onClick: () -> Unit | Yes | - ---- - -## 8. Transaction Type Logic - -The system determines if a transaction is a credit or debit based on: - -```kotlin -private fun isTransactionCreditLogic(transaction: Transactions): Boolean { - val type = transaction.transactionType?.value?.lowercase().orEmpty() - - return when { - transaction.transactionType?.deposit == true -> true - transaction.transactionType?.withdrawal == true -> false - type.contains("deposit") -> true - type.contains("interest") -> true - type.contains("withdrawal") -> false - type.contains("fee") -> false - else -> false - } -} -``` - -**Credit types**: deposit, interest posting, dividend payout -**Debit types**: withdrawal, fee deduction, overdraft fee, withhold tax - ---- - -## 9. Navigation - -| Route | Constant | Description | -|-------|----------|-------------| -| `recent_transaction_base_route` | RECENT_TRANSACTION_NAVIGATION_ROUTE_BASE | Base navigation route | -| `recent_transaction_screen_route` | RECENT_TRANSACTION_SCREEN_ROUTE | Main screen route | - ---- - -## 10. Dependencies - -| Dependency | Purpose | -|------------|---------| -| AccountsRepository | Fetch savings accounts list | -| SavingsAccountRepository | Fetch transactions with associations | -| NetworkMonitor | Monitor network connectivity | -| UserPreferencesRepository | Get client ID | - ---- - -## Changelog - -| Date | Change | -|------|--------| -| 2025-12-29 | Initial specification based on implementation | diff --git a/claude-product-cycle/design-spec-layer/features/recent-transaction/STATUS.md b/claude-product-cycle/design-spec-layer/features/recent-transaction/STATUS.md deleted file mode 100644 index d8eb249d7..000000000 --- a/claude-product-cycle/design-spec-layer/features/recent-transaction/STATUS.md +++ /dev/null @@ -1,60 +0,0 @@ -# Recent Transaction - Implementation Status - -> **Last Updated**: 2025-12-29 -> **Overall Status**: ✅ Done - ---- - -## Implementation Checklist - -- [x] SPEC.md created -- [x] API.md created -- [x] Network: Services exist (RecentTransactionsService) -- [x] Data: Repository exists (RecentTransactionRepository) -- [x] Feature: ViewModel + Screen -- [x] Navigation: Route registered -- [x] DI: Modules registered -- [x] STATUS.md updated - ---- - -## Layer Status - -| Layer | Status | Files | -|-------|--------|-------| -| Network | ✅ | RecentTransactionsService.kt | -| Data | ✅ | RecentTransactionRepository.kt, RecentTransactionRepositoryImp.kt | -| Feature | ✅ | RecentTransactionViewModel.kt, RecentTransactionScreen.kt | -| DI | ✅ | RecentTransactionModule.kt | -| Navigation | ✅ | RecentTransactionNavigation.kt | - ---- - -## Files - -### Network Layer -- `core/network/src/commonMain/kotlin/org/mifos/mobile/core/network/services/RecentTransactionsService.kt` - -### Data Layer -- `core/data/src/commonMain/kotlin/org/mifos/mobile/core/data/repository/RecentTransactionRepository.kt` -- `core/data/src/commonMain/kotlin/org/mifos/mobile/core/data/repositoryImpl/RecentTransactionRepositoryImp.kt` - -### Feature Layer -- `feature/recent-transaction/src/commonMain/kotlin/org/mifos/mobile/feature/recent/transaction/viewmodel/RecentTransactionViewModel.kt` -- `feature/recent-transaction/src/commonMain/kotlin/org/mifos/mobile/feature/recent/transaction/screen/RecentTransactionScreen.kt` -- `feature/recent-transaction/src/commonMain/kotlin/org/mifos/mobile/feature/recent/transaction/navigation/RecentTransactionNavigation.kt` -- `feature/recent-transaction/src/commonMain/kotlin/org/mifos/mobile/feature/recent/transaction/di/RecentTransactionModule.kt` - ---- - -## Gaps - -None identified. - ---- - -## Changelog - -| Date | Change | -|------|--------| -| 2025-12-29 | Initial status documentation | diff --git a/claude-product-cycle/design-spec-layer/features/recent-transaction/mockups/PROMPTS_FIGMA.md b/claude-product-cycle/design-spec-layer/features/recent-transaction/mockups/PROMPTS_FIGMA.md deleted file mode 100644 index 99ee0762f..000000000 --- a/claude-product-cycle/design-spec-layer/features/recent-transaction/mockups/PROMPTS_FIGMA.md +++ /dev/null @@ -1,314 +0,0 @@ -# Recent Transactions - Figma First Draft Prompts - -> **Tool**: Figma First Draft (Shift+I in Figma) -> **Style**: Smart Money Intelligence Hub, Material Design 3 -> **Format**: Natural language prompts optimized for Figma AI - ---- - -## How to Use - -1. Open Figma -> Create new design file -2. Press `Shift + I` or click "Actions" -> "First Draft" -3. Copy each prompt below -4. Generate -> Iterate -> Refine - ---- - -## Screen 1: Transaction Intelligence Dashboard - -``` -Design a smart money intelligence dashboard for a fintech banking app inspired by Mint, Cleo, and Copilot. - -At the top, show a back arrow with "Transactions" title, account number "A/c: ****4521", and analytics/export/menu icons on the right. - -Create a stunning monthly summary hero card with purple gradient background. Display the month "December 2025" with navigation arrows. Show income "+$3,450.00" and expenses "-$1,280.50" side by side with up/down arrows. Display the net amount "+$2,169.50" prominently with "Great month!" celebration text. Add a saving streak indicator with fire emoji showing "8-Day Saving Streak!" and "You're spending less than your daily average". - -Add a Smart Insights section with lightbulb icon header and "See All >" link. Show two insight cards: one with warning icon about unusual spending being 40% higher, another with recurring icon about 3 subscriptions renewing next week totaling $34.97. - -Create a search bar with placeholder "Search 'coffee last week'..." and a microphone icon for voice search. - -Add filter chips in a row: All (selected with gradient), Income, Expenses, Recurring. - -Show a transaction list with date section headers. For TODAY section, display transaction cards with merchant icon, name, amount (red for expenses, green for income), category, time, and badges for recurring or receipt attached. Include Netflix (-$14.99, Entertainment, recurring), Salary (+$3,200.00, Income). For YESTERDAY, show Amazon (-$149.00, Shopping, receipt attached), Starbucks (-$5.75, Food, over budget warning). - -Add a floating action button for export in the bottom right corner. - -Style it like Mint's spending analytics with smart AI insights and clean visual hierarchy. -``` - ---- - -## Screen 2: Spending Analytics View - -``` -Design a comprehensive spending analytics screen for a personal finance app. - -Show a back arrow with "Spending Analytics" title. - -Create a month selector with previous/next arrows around "December 2025". - -Add an interactive donut chart card with purple gradient background. Show "SPENDING BREAKDOWN" header. The donut should have colored segments for each category with percentages: Shopping (purple) 38%, Food (teal) 25%, Transport (blue) 18%, Entertainment 12%, Utilities 7%. Display "Total Spent: $1,280.50" in the center. - -Create a Category Breakdown section with expandable category rows. Each row shows: category emoji icon, name, amount, percentage of total, and trend indicator (up arrow in amber, down arrow in green, or dash for same). Below each category, show a budget progress bar with percentage. For Shopping ($487.00, 38%, up 12%), show the bar at 122% with red warning and "$87 over budget" text. For Food & Dining ($320.00, 25%, down 5%), show 91% with green checkmark and "$30 remaining". Continue for Transport, Entertainment, and Utilities. - -Add a Spending Trend chart showing a bar graph of the last 6 months (Jul-Dec) with a horizontal average line at $1,450/month. Label "Average: $1,450/month" below. - -Make it feel like a powerful financial analytics tool with clear data visualization. -``` - ---- - -## Screen 3: Transaction Detail (Enhanced) - -``` -Design an enhanced transaction detail screen with rich information and actions. - -Show a back arrow with share and tag icons on the right. - -Create a hero card with purple gradient background. Display a large shopping cart icon in a circle, the merchant name "Amazon Prime", category "Shopping", a large amount "-$149.00", and a green "Completed" status pill. - -Add a Tags section with header "Tags" and "+ Add Tag" button. Show existing tags as removable chips: Gift (with emoji), Business, Returns. - -Create a Transaction Details card with key-value pairs separated by dividers: Transaction ID "TXN-2025122815342" with a copy icon, Date & Time "December 28, 2025 at 6:15 PM", Transaction Type "Card Payment (Visa ****4521)" with card icon, Account "Savings Account ****4521", Balance After "$4,851.00", Category "Shopping" with "Change >" link, and Reference "Amazon Prime Annual Subscription Renewal". - -Add a Receipt section with header "Receipt" and "+ Attach" button. Show a dashed border placeholder card with camera icon prompting "Tap to attach a receipt or upload from gallery". - -Create a Notes section with header "Notes" and "+ Add Note" button showing "No notes added yet". - -Add a Help section at the bottom with two buttons side by side: "Report Issue" with warning icon and "Contact Support" with chat icon. - -Make it comprehensive yet clean, like a modern banking transaction receipt. -``` - ---- - -## Screen 4: Recurring Transactions View - -``` -Design a recurring payments management screen for subscription tracking. - -Show a back arrow with "Recurring Payments" title. - -Create a hero summary card with purple gradient showing "MONTHLY SUBSCRIPTIONS" header, "$127.47 / month" in large text, "8 active subscriptions", and "$1,529.64 / year" as annual total. - -Add a Coming Up section with clock icon. Show upcoming subscription charges: Netflix "$14.99" with amber "Tomorrow" badge, Spotify "$9.99" with "In 3 days" gray badge, iCloud "$9.99" with "In 5 days" badge. - -Create an All Subscriptions section with recurring icon header. Display subscription cards with: service icon, name, price per period, category label, "Active since" date, and "Total paid" lifetime amount. Include Netflix ($14.99/mo, Entertainment, since Jan 2023, $359.76 total), Spotify Premium ($9.99/mo, since Mar 2022, $339.66 total), Amazon Prime ($149.00/yr, Shopping), Gym Membership ($49.99/mo, Health), and iCloud Storage ($9.99/mo, Technology). - -Add a tip card at the bottom with lightbulb icon: "We detected 2 unused subscriptions that could save you $19.98/month" with a "Review >" action button. - -Style it for easy subscription management with clear cost visibility. -``` - ---- - -## Screen 5: Smart Search Results - -``` -Design an AI-powered transaction search results screen. - -Show a back arrow with "Search" title and close X button. - -Create a search input showing the query "coffee last week" with clear X and microphone icon. - -Add an AI summary card with purple gradient background. Show a robot/AI icon with "I found 4 coffee transactions from last week", "Total: $23.50", and "Average: $5.88 per visit". - -Display search results with date header "DECEMBER 22-28, 2025". Show matching transactions: Starbucks ($5.75, Dec 28, 8:30 AM), Blue Bottle Coffee ($6.50, Dec 26, 9:15 AM), Starbucks ($5.75, Dec 24, 7:45 AM), Dunkin' ($5.50, Dec 22, 8:00 AM). Each with coffee emoji icon. - -Create a Smart Suggestion card with lightbulb icon: "You've spent $87.25 on coffee this month. Making coffee at home could save you ~$60/month!" with "Dismiss" and "Set Budget Alert" buttons. - -Add a Recent Searches section with chips: amazon, groceries november, uber rides, subscriptions. - -Include a "Try asking:" section with speech bubble icon and example queries: "How much did I spend on food this month?", "Show me all Amazon purchases", "Largest expense last week". - -Make search feel intelligent and conversational like a financial assistant. -``` - ---- - -## Screen 6: Filter Bottom Sheet - -``` -Design a comprehensive filter bottom sheet for transaction filtering. - -Create a dimmed background overlay. - -Show a bottom sheet with drag handle at the top. Add "Filter Transactions" header with "Clear All" link on the right. - -Create an ACCOUNT section with radio button cards for: Primary Savings ****4521 (selected with gradient), Emergency Fund ****7832, and Vacation Savings ****9156. - -Add a TRANSACTION TYPE section with horizontal chips: All (selected), Income, Expenses, Recurring. - -Create a CATEGORY section with a 2-row chip grid showing emoji-prefixed categories: Shopping, Food, Travel, Fun, Bills, Health, and "More..." button. - -Add a DATE RANGE section with chips: Today, 7 Days (selected), 30 Days, Custom (with calendar icon). - -Create an AMOUNT RANGE section with two input fields side by side: "Min: $0" and "Max: $10,000". - -Include a full-width gradient button at the bottom: "Apply Filters (24 results)" with the result count updating live. - -Make filtering powerful yet intuitive with clear visual feedback. -``` - ---- - -## Screen 7: Export Statement Sheet - -``` -Design an export statement bottom sheet for generating transaction reports. - -Create a dimmed background overlay. - -Show a bottom sheet with drag handle, "Export Statement" title, and close X button. - -Add a FORMAT section with three radio cards stacked: PDF (selected with gradient, document icon, "Best for printing & sharing"), Excel (spreadsheet icon, "Best for analysis & records"), and CSV (text file icon, "Best for importing to other apps"). - -Create a DATE RANGE section showing a selected range card: "Dec 1 - Dec 29, 2025" with calendar icon and "Change >" link. - -Add an INCLUDE section with checkboxes: "All transactions" (checked), "Income only" (unchecked), "Expenses only" (unchecked), "Include category breakdown" (checked), "Include running balance" (checked). - -Create a DELIVERY section with two chips: "Download" (selected with gradient) and "Email to me". - -Include a full-width gradient button: "Generate Statement". - -Make it feel professional and comprehensive for financial record-keeping. -``` - ---- - -## Screen 8: Empty State - -``` -Design an empty state for when a user has no transaction history. - -Keep the header with "Transactions" title, account number, and icons. - -Show the search bar as visible but inactive. - -Center a friendly floating illustration of charts and money symbols with subtle animation. - -Display "No Transactions Yet" as the headline with "Your transaction history will appear here once you make your first transaction" as description text. - -Add a prominent gradient button: "Make a Transfer ->" as the primary call to action. - -Include the bottom navigation bar. - -Make it feel inviting and guide the user toward their first action. -``` - ---- - -## Screen 9: Spending Insights Modal - -``` -Design a weekly spending insights modal with gamification elements. - -Create a dimmed background overlay. - -Show a centered modal card with "Weekly Spending Insights" header and close X button. - -Add a celebration hero section with gradient background showing party emoji, "Great week for your wallet!", "You spent 15% less than last week", and "That's $89.50 saved!" prominently. - -Create a "This Week vs Last Week" comparison section. Show category rows with visual bars: Shopping ($120 <- $180, green down 33%), Food ($85 <- $92, green down 8%), Transport ($45 <- $35, amber up 29%), Entertainment ($25 <- $50, green down 50%). - -Add an "Achievements This Week" section with three badge cards: fire emoji "8-Day Streak", money bag "Saved $89.50", and target "Under Budget". - -Include action buttons: "View Full Analytics" as gradient primary button, and "Share My Progress" and "Set New Goal" as outline secondary buttons. - -Make it feel celebratory and motivating about financial progress. -``` - ---- - -## Screen 10: Saving Streak Widget - -``` -Design a saving streak widget card for the transaction dashboard. - -Create a card with purple gradient background. - -Show a header with fire emoji and "8-Day Saving Streak!" in bold white text. - -Create a 7-day grid showing each day of the week (M T W T F S S). For streak days (the first 8 days including today), show fire emojis. For the current day, add a glow effect. For future days, show empty gray circles. - -Add description text: "You've spent less than your $50 daily average for 8 days straight! Keep it going!" with a target emoji. - -Show "Best streak ever: 12 days" as secondary text. - -Make the fires have a subtle flickering animation to feel alive and engaging. -``` - ---- - -## Component Prompts - -### Transaction Item Card -``` -Design a transaction item card for the transaction list. - -Create a full-width card about 80dp tall with 16dp padding. - -On the left, show a 48dp circular icon with the category color background and emoji/icon inside. - -Display the merchant name in medium weight with the amount right-aligned (red for expenses with minus, green for income with plus). - -Below, show the category and time in smaller gray text. - -Add optional badges: recurring icon for subscriptions, receipt icon if attached, amber warning for over budget. - -Include a right chevron for navigation. - -On swipe left, reveal quick actions like "Tag" and "Hide". -``` - -### Spending Insight Card -``` -Design a spending insight notification card. - -Create a card about 64dp tall with 12dp corner radius. - -Show an icon on the left based on type: warning triangle (amber background) for alerts, lightbulb (blue background) for tips, party popper (green background) for celebrations. - -Display the insight title in medium weight and supporting detail text below in gray. - -Use a type-specific background color at 12% opacity. - -Add a chevron or action button on the right. -``` - -### Category Budget Row -``` -Design a category spending row with budget progress. - -Show the category emoji icon, name, and spent amount on the first line. - -Add a percentage of total spending and trend indicator (up/down arrow with percentage). - -Below, create a progress bar showing budget usage. Use the category gradient color for filled portion and gray for remaining. Show percentage label. - -If over budget (>100%), turn the bar red/amber and show warning text like "$87 over budget". - -If under budget, show green checkmark with remaining amount. -``` - ---- - -## Tips for Figma First Draft - -1. **Iterate**: Generate once, then refine with follow-up prompts -2. **Colors**: Use "#667EEA to #764BA2" for primary gradient -3. **Reference**: Say "like Mint" or "Cleo app style" for fintech context -4. **Charts**: Emphasize clean donut and bar charts -5. **Gamification**: Include streaks, badges, and celebration moments -6. **Responsive**: Mention "393px width for mobile" for correct sizing - ---- - -## After Generation - -1. Review generated designs for consistency -2. Create a color style library -3. Build component variants for transaction states -4. Add prototype connections for filters and search -5. Export and update `FIGMA_LINKS.md` diff --git a/claude-product-cycle/design-spec-layer/features/recent-transaction/mockups/PROMPTS_STITCH.md b/claude-product-cycle/design-spec-layer/features/recent-transaction/mockups/PROMPTS_STITCH.md deleted file mode 100644 index a232ebcef..000000000 --- a/claude-product-cycle/design-spec-layer/features/recent-transaction/mockups/PROMPTS_STITCH.md +++ /dev/null @@ -1,470 +0,0 @@ -# Recent Transactions - Google Stitch Prompts - -> **Tool**: [Google Stitch](https://stitch.withgoogle.com) -> **Style**: Material Design 3, Smart Money Intelligence Hub -> **Format**: Copy each prompt block directly into Stitch - ---- - -## Design System Reference - -``` -Primary Gradient: #667EEA -> #764BA2 -Secondary Gradient: #11998E -> #38EF7D -Success/Credit: #00D09C -Error/Debit: #FF4757 -Warning: #FFB800 -Text Primary: #1F2937 -Text Secondary: #6B7280 -Surface: #FFFFFF -Screen Size: 393 x 852 pixels (Android) -``` - ---- - -## Screen 1: Transaction Intelligence Dashboard - -``` -Mobile transaction intelligence dashboard, Material Design 3, fintech, 393x852px - -Top Bar: -- Back arrow, "Transactions" title -- Account number "A/c: ****4521" -- Analytics, export, menu icons right - -Monthly Summary Hero: -- Primary gradient full width -- Month selector "December 2025" -- Income: "+$3,450.00" with up arrow -- Expenses: "-$1,280.50" with down arrow -- Net: "+$2,169.50" highlighted -- "Great month!" celebration text -- Saving streak: fire emoji "8-Day Saving Streak!" - -Smart Insights Section: -- "Smart Insights" header with "See All >" -- Insight card 1: warning icon "Unusual spending detected" -- Insight card 2: recurring icon "3 subscriptions renewing next week" - -Search Bar: -- "Search 'coffee last week'..." placeholder -- Voice search mic icon - -Filter Chips: -- All (selected), Income, Expenses, Recurring - -Transaction List: -- TODAY section header with "Mark all read" -- Transaction cards: - - Netflix: movie icon, "-$14.99", Entertainment, recurring badge - - Salary: money icon, "+$3,200.00", Income, green -- YESTERDAY section: - - Amazon: cart icon, "-$149.00", Shopping, receipt badge - - Starbucks: coffee icon, "-$5.75", Food, over budget warning - -Export FAB: -- Floating download button bottom right - -Bottom Navigation: -- Home, Accounts, Transfer FAB, Profile -``` - ---- - -## Screen 2: Spending Analytics View - -``` -Mobile spending analytics, Material Design 3, fintech, 393x852px - -Top Bar: -- Back arrow, "Spending Analytics" title, menu icon - -Month Selector: -- "December 2025" with prev/next arrows - -Donut Chart Card: -- Primary gradient background -- "SPENDING BREAKDOWN" header -- Interactive donut chart segments -- Legend: Shopping 38%, Food 25%, Transport 18% -- "Total Spent: $1,280.50" centered - -Category Breakdown: -- "Category Breakdown" header -- Category rows with: - - Shopping: cart icon, $487.00, 38%, up 12% - - Budget bar: 122% filled (over budget warning) - - "$87 over budget" warning text - - - Food & Dining: burger icon, $320.00, 25%, down 5% - - Budget bar: 91% filled, "$30 remaining" - - - Transport: car icon, $230.50, 18%, same - - Budget bar: 77% filled - - - Entertainment: movie icon, $158.00, 12% - - Utilities: bolt icon, $85.00, 7% - -Spending Trend Chart: -- "Spending Trend (6 Months)" header -- Bar chart Jul-Dec -- Average line at $1,450/month -``` - ---- - -## Screen 3: Transaction Detail (Enhanced) - -``` -Mobile transaction detail, Material Design 3, fintech, 393x852px - -Top Bar: -- Back arrow, share and tag icons right - -Hero Card: -- Primary gradient background -- Large cart icon centered -- "Amazon Prime" merchant name -- "Shopping" category -- "-$149.00" large amount -- "Completed" green status badge - -Tags Section: -- "Tags" header with "+ Add Tag" -- Tag chips: Gift, Business, Returns - -Transaction Details Card: -- Key-value pairs: - - Transaction ID: TXN-2025122815342 with copy icon - - Date & Time: December 28, 2025 at 6:15 PM - - Transaction Type: Card Payment (Visa ****4521) - - Account: Savings Account ****4521 - - Balance After: $4,851.00 - - Category: Shopping with "Change >" link - - Reference: Amazon Prime Annual Subscription - -Receipt Section: -- "Receipt" header with "+ Attach" -- Camera/gallery placeholder card -- "Tap to attach a receipt" text - -Notes Section: -- "Notes" header with "+ Add Note" -- Empty state or notes list - -Help Section: -- "Need help?" header -- Two buttons: "Report Issue", "Contact Support" -``` - ---- - -## Screen 4: Recurring Transactions View - -``` -Mobile recurring payments, Material Design 3, fintech, 393x852px - -Top Bar: -- Back arrow, "Recurring Payments" title, menu icon - -Summary Hero: -- Primary gradient background -- "MONTHLY SUBSCRIPTIONS" header -- "$127.47 / month" large text -- "8 active subscriptions" -- "$1,529.64 / year" annual total - -Coming Up Section: -- "Coming Up" header with clock icon -- Netflix: $14.99, "Tomorrow" amber badge -- Spotify: $9.99, "In 3 days" gray badge -- iCloud: $9.99, "In 5 days" gray badge - -All Subscriptions Section: -- "All Subscriptions" header with recurring icon -- Subscription cards: - - Netflix: movie icon, $14.99/mo, Entertainment - - Active since Jan 2023, Total paid: $359.76 - - - Spotify Premium: music icon, $9.99/mo - - Active since Mar 2022, Total paid: $339.66 - - - Amazon Prime: shield icon, $149.00/yr, Shopping - - Active since 2021, Total paid: $596.00 - - - Gym Membership: fitness icon, $49.99/mo, Health - - - iCloud Storage: cloud icon, $9.99/mo, Technology - -Tip Card: -- Lightbulb icon -- "We detected 2 unused subscriptions" -- "Could save you $19.98/month" -- "Review >" action button -``` - ---- - -## Screen 5: Smart Search Results - -``` -Mobile transaction search, Material Design 3, fintech, 393x852px - -Top Bar: -- Back arrow, "Search" title, close X icon - -Search Input: -- "coffee last week" query text -- Clear X, mic icon - -AI Summary Card: -- Primary gradient background -- Robot icon "I found 4 coffee transactions" -- "Total: $23.50" -- "Average: $5.88 per visit" - -Search Results: -- "DECEMBER 22-28, 2025" section header -- Result cards: - - Starbucks: coffee icon, -$5.75, Dec 28 - - Blue Bottle Coffee: -$6.50, Dec 26 - - Starbucks: -$5.75, Dec 24 - - Dunkin': -$5.50, Dec 22 - -Smart Suggestion Card: -- Lightbulb icon -- "$87.25 on coffee this month" -- "Making coffee at home could save ~$60/month!" -- Dismiss and "Set Budget Alert" buttons - -Recent Searches: -- "Recent Searches" header -- Chips: amazon, groceries november, uber rides, subscriptions - -Try Asking Section: -- Speech bubble icon -- Example queries: - - "How much did I spend on food this month?" - - "Show me all Amazon purchases" - - "Largest expense last week" -``` - ---- - -## Screen 6: Filter Bottom Sheet - -``` -Mobile filter bottom sheet, Material Design 3 - -Dimmed background overlay - -Bottom Sheet: -- Drag handle -- "Filter Transactions" header, "Clear All" link - -Account Section: -- "ACCOUNT" header -- Radio list: Primary Savings (selected), Emergency Fund, Vacation Savings - -Transaction Type: -- "TRANSACTION TYPE" header -- Chips: All (selected), Income, Expenses, Recurring - -Category: -- "CATEGORY" header -- Emoji chips grid: Shop, Food, Travel, Fun, Bills, Health, More... - -Date Range: -- "DATE RANGE" header -- Chips: Today, 7 Days (selected), 30 Days, Custom calendar - -Amount Range: -- "AMOUNT RANGE" header -- Min/Max input fields: $0 to $10,000 - -Apply Button: -- Gradient "Apply Filters (24 results)" -``` - ---- - -## Screen 7: Export Statement Sheet - -``` -Mobile export statement, Material Design 3 - -Dimmed background overlay - -Bottom Sheet: -- Drag handle, "Export Statement" title, close X - -Format Section: -- "FORMAT" header -- Radio cards: - - PDF (selected): document icon, "Best for printing & sharing" - - Excel: spreadsheet icon, "Best for analysis" - - CSV: text icon, "Best for importing" - -Date Range: -- "DATE RANGE" header -- Calendar card: "Dec 1 - Dec 29, 2025" with "Change >" link - -Include Options: -- "INCLUDE" header -- Checkboxes: All transactions (checked), Include category breakdown (checked), Include running balance (checked) - -Delivery: -- "DELIVERY" header -- Chips: Download (selected), Email to me - -Generate Button: -- Gradient "Generate Statement" -``` - ---- - -## Screen 8: Empty State - -``` -Mobile transactions empty state, Material Design 3, 393x852px - -Top Bar: -- Back arrow, "Transactions" title -- Account number, icons - -Search Bar: -- Empty search input - -Center Content: -- Floating chart/money illustration -- "No Transactions Yet" 20sp bold -- "Your transaction history will appear here once you make your first transaction" - -Primary CTA: -- Gradient "Make a Transfer ->" - -Bottom Navigation -``` - ---- - -## Screen 9: Spending Insights Modal - -``` -Mobile spending insights modal, Material Design 3 - -Dimmed background overlay - -Modal Card: -- "Weekly Spending Insights" header, close X - -Celebration Hero: -- Gradient background -- "Great week for your wallet!" with party emoji -- "You spent 15% less than last week" -- "That's $89.50 saved!" - -Week Comparison: -- "This Week vs Last Week" header -- Category comparison rows: - - Shopping: $120 <- $180, down 33% green - - Food: $85 <- $92, down 8% green - - Transport: $45 <- $35, up 29% amber - - Entertainment: $25 <- $50, down 50% green - -Achievements: -- "Achievements This Week" header -- Badge cards: 8-Day Streak (fire), $89.50 Saved (money), Under Budget (target) - -Action Buttons: -- Gradient "View Full Analytics" -- Outline buttons: "Share My Progress", "Set New Goal" -``` - ---- - -## Screen 10: Saving Streak Widget - -``` -Saving streak widget component, Material Design 3 - -Primary gradient card background - -Header: -- Fire emoji "8-Day Saving Streak!" - -Day Grid: -- 7 day cells: M T W T F S S -- Fire emoji for streak days (M-today) -- Empty circle for future days - -Description: -- "You've spent less than your $50 daily average" -- "for 8 days straight! Keep it going!" with target emoji - -Best Streak: -- "Best streak ever: 12 days" -``` - ---- - -## Components - -### TransactionItemCard -``` -Transaction item card, Material Design 3: -- Height: 80dp, padding: 16dp -- Icon container: 48dp with category color -- Title: 16sp Medium, amount right-aligned -- Subtitle: category, time, 14sp secondary -- Badges: recurring, receipt, over budget -- Chevron for navigation -``` - -### SpendingInsightCard -``` -Spending insight card, Material Design 3: -- Height: 64dp, radius: 12dp -- Icon left: warning (amber), tip (blue), celebration (green) -- Title: 14sp Medium -- Detail: 12sp secondary -- Background: type-colored at 12% opacity -``` - -### CategoryBreakdownRow -``` -Category breakdown row, Material Design 3: -- Category icon with color -- Name and amount on same line -- Percentage bar below -- Trend indicator: up (amber), down (green), same (gray) -- Budget progress: filled/empty bar with percentage -``` - -### StreakDayCell -``` -Streak day cell, Material Design 3: -- Size: 40dp x 48dp -- Day label: 12sp Medium -- Status icon: fire (active), gray circle (broken), empty (future) -- Active days have subtle glow animation -``` - -### DonutChartSegment -``` -Donut chart segment, Material Design 3: -- Segment colors by category -- Interactive tap: scales out 5%, others dim -- Animation: sequential draw on load -- Center: total amount or selected category -``` - ---- - -## Quick Start - -1. Open [stitch.withgoogle.com](https://stitch.withgoogle.com) -2. Create project "Mifos Mobile - Recent Transactions" -3. Copy each screen prompt -> Generate -4. Generate components separately for reuse -5. Export all to Figma when done diff --git a/claude-product-cycle/design-spec-layer/features/recent-transaction/mockups/dummy/01-transaction-list.png b/claude-product-cycle/design-spec-layer/features/recent-transaction/mockups/dummy/01-transaction-list.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/recent-transaction/mockups/dummy/02-transaction-detail.png b/claude-product-cycle/design-spec-layer/features/recent-transaction/mockups/dummy/02-transaction-detail.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/recent-transaction/mockups/dummy/03-transaction-filter.png b/claude-product-cycle/design-spec-layer/features/recent-transaction/mockups/dummy/03-transaction-filter.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/recent-transaction/mockups/dummy/04-transaction-search.png b/claude-product-cycle/design-spec-layer/features/recent-transaction/mockups/dummy/04-transaction-search.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/recent-transaction/mockups/dummy/05-transaction-export.png b/claude-product-cycle/design-spec-layer/features/recent-transaction/mockups/dummy/05-transaction-export.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/recent-transaction/mockups/dummy/06-transaction-empty.png b/claude-product-cycle/design-spec-layer/features/recent-transaction/mockups/dummy/06-transaction-empty.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/savings-account/API.md b/claude-product-cycle/design-spec-layer/features/savings-account/API.md deleted file mode 100644 index 4a63923fb..000000000 --- a/claude-product-cycle/design-spec-layer/features/savings-account/API.md +++ /dev/null @@ -1,676 +0,0 @@ -# Savings Account - API Reference - ---- - -## Endpoints Required - -### 1. Get Savings Account with Associations - -**Endpoint**: `GET /self/savingsaccounts/{accountId}` - -**Purpose**: Fetch savings account details with optional associations (transactions, charges) - -**Request**: -``` -Headers: - Authorization: Basic {token} - Fineract-Platform-TenantId: {tenant} - -Query Parameters: - associations: string (optional) - "transactions" or "charges" -``` - -**Response**: -```json -{ - "id": 12345, - "accountNo": "000000012345", - "depositType": { - "id": 100, - "code": "depositAccountType.savingsDeposit", - "value": "Savings" - }, - "clientId": 1, - "clientName": "John Doe", - "savingsProductId": 1, - "savingsProductName": "Basic Savings", - "status": { - "id": 300, - "code": "savingsAccountStatusType.active", - "value": "Active", - "submittedAndPendingApproval": false, - "approved": true, - "rejected": false, - "withdrawnByApplicant": false, - "active": true, - "closed": false - }, - "timeline": { - "submittedOnDate": [2025, 12, 15], - "approvedOnDate": [2025, 12, 16], - "activatedOnDate": [2025, 12, 16] - }, - "currency": { - "code": "USD", - "name": "US Dollar", - "decimalPlaces": 2, - "displaySymbol": "$", - "nameCode": "currency.USD", - "displayLabel": "US Dollar ($)" - }, - "nominalAnnualInterestRate": 5.5, - "summary": { - "currency": { "code": "USD", "displaySymbol": "$", "decimalPlaces": 2 }, - "totalDeposits": 5000.00, - "totalWithdrawals": 3765.44, - "accountBalance": 1234.56 - }, - "transactions": [ - { - "id": 1, - "transactionType": { "id": 1, "code": "savingsAccountTransactionType.deposit", "value": "Deposit" }, - "accountId": 12345, - "accountNo": "000000012345", - "date": [2025, 12, 28], - "currency": { "code": "USD", "displaySymbol": "$", "decimalPlaces": 2 }, - "amount": 100.00, - "runningBalance": 1234.56, - "submittedOnDate": [2025, 12, 28] - } - ] -} -``` - -**Kotlin DTO**: `SavingsWithAssociations` - -**Status**: Implemented in `SavingAccountsListService` - ---- - -### 2. Get Savings Account Template - -**Endpoint**: `GET /self/savingsaccounts/template` - -**Purpose**: Fetch available savings products for new account or update - -**Request**: -``` -Headers: - Authorization: Basic {token} - Fineract-Platform-TenantId: {tenant} - -Query Parameters: - clientId: Long (required) - Client ID - productId: Long (optional) - Specific product ID for details -``` - -**Response**: -```json -{ - "clientId": 1, - "clientName": "John Doe", - "productOptions": [ - { - "id": 1, - "name": "Basic Savings", - "withdrawalFeeForTransfers": false, - "allowOverdraft": false, - "enforceMinRequiredBalance": false, - "withHoldTax": false - }, - { - "id": 2, - "name": "Premium Savings", - "withdrawalFeeForTransfers": true, - "allowOverdraft": true, - "enforceMinRequiredBalance": true, - "withHoldTax": false - } - ], - "chargeOptions": [], - "interestCompoundingPeriodTypeOptions": [], - "interestPostingPeriodTypeOptions": [], - "interestCalculationTypeOptions": [], - "interestCalculationDaysInYearTypeOptions": [], - "lockinPeriodFrequencyTypeOptions": [], - "withdrawalFeeTypeOptions": [] -} -``` - -**Kotlin DTO**: `SavingsAccountTemplate` - -**Status**: Implemented in `SavingAccountsListService` - ---- - -### 3. Update Savings Account - -**Endpoint**: `PUT /self/savingsaccounts/{accountsId}` - -**Purpose**: Update savings account product (for pending accounts) - -**Request**: -``` -Headers: - Authorization: Basic {token} - Fineract-Platform-TenantId: {tenant} - Content-Type: application/json - -Body: -{ - "clientId": 1, - "productId": 2 -} -``` - -**Response**: -```json -{ - "officeId": 1, - "clientId": 1, - "savingsId": 12345, - "resourceId": 12345, - "changes": { - "productId": 2 - } -} -``` - -**Kotlin DTO (Request)**: `SavingsAccountUpdatePayload` - -**Status**: Implemented in `SavingAccountsListService` - ---- - -### 4. Withdraw Savings Account Application - -**Endpoint**: `POST /self/savingsaccounts/{savingsId}?command=withdrawnByApplicant` - -**Purpose**: Withdraw a pending savings account application - -**Request**: -``` -Headers: - Authorization: Basic {token} - Fineract-Platform-TenantId: {tenant} - Content-Type: application/json - -Body: -{ - "locale": "en", - "dateFormat": "dd MMMM yyyy", - "withdrawnOnDate": "29 December 2025", - "note": "User requested withdrawal" -} -``` - -**Response**: -```json -{ - "officeId": 1, - "clientId": 1, - "savingsId": 12345, - "resourceId": 12345, - "changes": { - "status": { - "id": 400, - "code": "savingsAccountStatusType.withdrawn.by.applicant", - "value": "Withdrawn by applicant" - } - } -} -``` - -**Kotlin DTO (Request)**: `SavingsAccountWithdrawPayload` - -**Status**: Implemented in `SavingAccountsListService` - ---- - -### 5. Get Transaction Details - -**Endpoint**: `GET /self/savingsaccounts/{accountId}/transactions/{transactionId}` - -**Purpose**: Fetch detailed information about a specific transaction - -**Request**: -``` -Headers: - Authorization: Basic {token} - Fineract-Platform-TenantId: {tenant} -``` - -**Response**: -```json -{ - "id": 1, - "transactionType": { - "id": 1, - "code": "savingsAccountTransactionType.deposit", - "value": "Deposit", - "deposit": true, - "withdrawal": false, - "interestPosting": false, - "feeDeduction": false - }, - "accountId": 12345, - "accountNo": "000000012345", - "date": [2025, 12, 28], - "currency": { - "code": "USD", - "name": "US Dollar", - "decimalPlaces": 2, - "displaySymbol": "$" - }, - "amount": 100.00, - "runningBalance": 1234.56, - "reversed": false, - "submittedOnDate": [2025, 12, 28], - "interestedPostedAsOn": false -} -``` - -**Kotlin DTO**: `TransactionDetails` - -**Status**: Implemented in `SavingAccountsListService` - ---- - -### 6. Get Account Transfer Template - -**Endpoint**: `GET /self/accounttransfers/template` - -**Purpose**: Fetch available accounts for transfer (source and destination) - -**Request**: -``` -Headers: - Authorization: Basic {token} - Fineract-Platform-TenantId: {tenant} - -Query Parameters: - fromAccountId: Long (optional) - Source account ID - fromAccountType: Long (optional) - Account type ID (2 = Savings) -``` - -**Response**: -```json -{ - "fromAccountTypeOptions": [ - { "id": 1, "code": "accountType.loan", "value": "Loan Account" }, - { "id": 2, "code": "accountType.savings", "value": "Savings Account" } - ], - "toAccountTypeOptions": [ - { "id": 1, "code": "accountType.loan", "value": "Loan Account" }, - { "id": 2, "code": "accountType.savings", "value": "Savings Account" } - ], - "fromAccountOptions": [ - { - "accountId": 12345, - "accountNo": "000000012345", - "accountType": { "id": 2, "value": "Savings Account" }, - "clientId": 1, - "clientName": "John Doe", - "officeId": 1, - "officeName": "Head Office" - } - ], - "toAccountOptions": [] -} -``` - -**Kotlin DTO**: `AccountOptionsTemplate` - -**Status**: Implemented in `SavingAccountsListService` - ---- - -### 7. Make Account Transfer - -**Endpoint**: `POST /self/accounttransfers` - -**Purpose**: Transfer funds between accounts - -**Request**: -``` -Headers: - Authorization: Basic {token} - Fineract-Platform-TenantId: {tenant} - Content-Type: application/json - -Body: -{ - "fromOfficeId": 1, - "fromClientId": 1, - "fromAccountType": 2, - "fromAccountId": 12345, - "toOfficeId": 1, - "toClientId": 2, - "toAccountType": 2, - "toAccountId": 12346, - "transferDate": "29 December 2025", - "transferAmount": 100.00, - "transferDescription": "Transfer to beneficiary", - "dateFormat": "dd MMMM yyyy", - "locale": "en" -} -``` - -**Response**: -```json -{ - "savingsId": 12345, - "resourceId": 1, - "changes": { - "transferAmount": 100.00 - } -} -``` - -**Kotlin DTO (Request)**: `TransferPayload` - -**Status**: Implemented in `SavingAccountsListService` - ---- - -## API Summary - -| Endpoint | Method | Service | Repository | Status | -|----------|--------|---------|------------|--------| -| `/savingsaccounts/{id}` | GET | SavingAccountsListService | SavingsAccountRepository | Implemented | -| `/savingsaccounts/template` | GET | SavingAccountsListService | SavingsAccountRepository | Implemented | -| `/savingsaccounts/{id}` | PUT | SavingAccountsListService | SavingsAccountRepository | Implemented | -| `/savingsaccounts/{id}?command=withdrawnByApplicant` | POST | SavingAccountsListService | SavingsAccountRepository | Implemented | -| `/savingsaccounts/{id}/transactions/{txnId}` | GET | SavingAccountsListService | SavingsAccountRepository | Implemented | -| `/accounttransfers/template` | GET | SavingAccountsListService | SavingsAccountRepository | Implemented | -| `/accounttransfers` | POST | SavingAccountsListService | SavingsAccountRepository | Implemented | - ---- - -## Kotlin Implementation - -### Service Interface (SavingAccountsListService.kt) - -```kotlin -interface SavingAccountsListService { - @GET(ApiEndPoints.SAVINGS_ACCOUNTS + "/{accountId}") - fun getSavingsWithAssociations( - @Path("accountId") accountId: Long, - @Query("associations") associationType: String?, - ): Flow - - @GET(ApiEndPoints.ACCOUNT_TRANSFER + "/template") - fun accountTransferTemplate( - @Query("fromAccountId") accountId: Long?, - @Query("fromAccountType") accountType: Long?, - ): Flow - - @POST(ApiEndPoints.ACCOUNT_TRANSFER) - suspend fun makeTransfer(@Body transferPayload: TransferPayload?): HttpResponse - - @GET(ApiEndPoints.SAVINGS_ACCOUNTS + "/template") - fun getSavingsAccountApplicationTemplate( - @Query("clientId") clientId: Long?, - ): Flow - - @GET(ApiEndPoints.SAVINGS_ACCOUNTS + "/template") - fun getSavingsAccountApplicationTemplateByProduct( - @Query("clientId") clientId: Long?, - @Query("productId") productId: Long?, - ): Flow - - @POST(ApiEndPoints.SAVINGS_ACCOUNTS) - suspend fun submitSavingAccountApplication( - @Body payload: SavingsAccountApplicationPayload?, - ): HttpResponse - - @PUT(ApiEndPoints.SAVINGS_ACCOUNTS + "/{accountsId}") - suspend fun updateSavingsAccountUpdate( - @Path("accountsId") accountsId: Long, - @Body payload: SavingsAccountUpdatePayload?, - ): HttpResponse - - @POST(ApiEndPoints.SAVINGS_ACCOUNTS + "/{savingsId}?command=withdrawnByApplicant") - suspend fun submitWithdrawSavingsAccount( - @Path("savingsId") savingsId: Long, - @Body payload: SavingsAccountWithdrawPayload?, - ): HttpResponse - - @GET(ApiEndPoints.SAVINGS_ACCOUNTS + "/{accountId}/transactions/{transactionId}") - fun getSavingsAccountTransactionDetails( - @Path("accountId") savingsId: Long, - @Path("transactionId") transactionId: Long, - ): Flow -} -``` - -### Repository Interface (SavingsAccountRepository.kt) - -```kotlin -interface SavingsAccountRepository { - - fun getSavingsWithAssociations( - accountId: Long?, - associationType: String?, - ): Flow> - - fun getSavingsAccountTransactionDetails( - accountId: Long, - transactionId: Long, - ): Flow> - - fun getSavingAccountApplicationTemplate( - clientId: Long? - ): Flow> - - fun getSavingAccountApplicationTemplateByProduct( - clientId: Long?, - productId: Long?, - ): Flow> - - suspend fun submitSavingAccountApplication( - payload: SavingsAccountApplicationPayload? - ): DataState - - suspend fun updateSavingsAccount( - accountId: Long?, - payload: SavingsAccountUpdatePayload?, - ): DataState - - suspend fun submitWithdrawSavingsAccount( - accountId: Long?, - payload: SavingsAccountWithdrawPayload?, - ): DataState - - fun accountTransferTemplate( - accountId: Long?, - accountType: Long? - ): Flow> -} -``` - ---- - -## Kotlin DTOs - -### SavingAccount.kt - -```kotlin -@Serializable -@Parcelize -data class SavingAccount( - val id: Long = 0, - val accountNo: String? = null, - val productName: String? = null, - val productId: Int? = null, - val overdraftLimit: Long = 0, - val minRequiredBalance: Long = 0, - val accountBalance: Double = 0.0, - val totalDeposits: Double = 0.0, - val savingsProductName: String? = null, - val clientName: String? = null, - val savingsProductId: String? = null, - val nominalAnnualInterestRate: Double = 0.0, - val status: Status? = null, - val currency: Currency? = null, - val depositType: DepositType? = null, - val lastActiveTransactionDate: List? = null, - val timeLine: TimeLine? = null, -) : Parcelable -``` - -### SavingsWithAssociations.kt - -```kotlin -@Serializable -@Parcelize -data class SavingsWithAssociations( - val id: Long? = null, - val accountNo: String? = null, - val depositType: DepositType? = null, - val externalId: String? = null, - val clientId: Int? = null, - val clientName: String? = null, - val savingsProductId: Int? = null, - val savingsProductName: String? = null, - val fieldOfficerId: Int? = null, - val status: Status? = null, - val timeline: TimeLine? = null, - val currency: Currency? = null, - internal val nominalAnnualInterestRate: Double? = null, - val minRequiredOpeningBalance: Double? = null, - val lockinPeriodFrequency: Double? = null, - val withdrawalFeeForTransfers: Boolean? = null, - val allowOverdraft: Boolean? = null, - val enforceMinRequiredBalance: Boolean? = null, - val withHoldTax: Boolean? = null, - val lastActiveTransactionDate: List? = null, - val dormancyTrackingActive: Boolean? = null, - val summary: Summary? = null, - val transactions: List = emptyList(), -) : Parcelable -``` - -### SavingsAccountUpdatePayload.kt - -```kotlin -@Serializable -data class SavingsAccountUpdatePayload( - val clientId: Long? = 0, - val productId: Long? = 0, -) -``` - -### SavingsAccountWithdrawPayload.kt - -```kotlin -@Serializable -@Parcelize -data class SavingsAccountWithdrawPayload( - val locale: String? = null, - val dateFormat: String? = null, - val withdrawnOnDate: String? = null, - val note: String? = null, -) : Parcelable -``` - -### SavingsAccountTemplate.kt - -```kotlin -@Serializable -@Parcelize -data class SavingsAccountTemplate( - val clientId: Int = 0, - val clientName: String? = null, - val savingsProductId: Int? = null, - val savingsProductName: String? = null, - val timeline: Timeline? = null, - val currency: Currency? = null, - val nominalAnnualInterestRate: Double? = null, - val interestCompoundingPeriodType: ProductOptions? = null, - val interestPostingPeriodType: ProductOptions? = null, - val interestCalculationType: ProductOptions? = null, - val interestCalculationDaysInYearType: ProductOptions? = null, - val minRequiredOpeningBalance: Double? = null, - val withdrawalFeeForTransfers: Boolean? = null, - val allowOverdraft: Boolean? = null, - val enforceMinRequiredBalance: Boolean? = null, - val withHoldTax: Boolean? = null, - val isDormancyTrackingActive: Boolean? = null, - val charges: List? = null, - val productOptions: ArrayList = arrayListOf(), - val fieldOfficerOptions: List = emptyList(), - val interestCompoundingPeriodTypeOptions: List = emptyList(), - val interestPostingPeriodTypeOptions: List = emptyList(), - val interestCalculationTypeOptions: List = emptyList(), - val interestCalculationDaysInYearTypeOptions: List = emptyList(), - val lockinPeriodFrequencyTypeOptions: List = emptyList(), - val withdrawalFeeTypeOptions: List = emptyList(), - val chargeOptions: ArrayList = arrayListOf(), -) : Parcelable -``` - -### SavingStatus.kt - -```kotlin -@Serializable -enum class SavingStatus(val status: String) { - ACTIVE("Active"), - INACTIVE("Inactive"), - CLOSED("Closed"), - SUBMIT_AND_PENDING_APPROVAL("Submitted and pending approval"), - ; - - companion object { - fun fromStatus(status: String): SavingStatus { - return entries.find { it.status.equals(status, ignoreCase = true) } - ?: throw IllegalArgumentException("Invalid status: $status") - } - } -} -``` - ---- - -## Error Handling - -The repository implementation handles the following error scenarios: - -```kotlin -class SavingsAccountRepositoryImp(...) : SavingsAccountRepository { - - override suspend fun updateSavingsAccount( - accountId: Long?, - payload: SavingsAccountUpdatePayload?, - ): DataState { - return withContext(ioDispatcher) { - try { - val response = dataManager.savingAccountsListApi - .updateSavingsAccountUpdate(accountId!!, payload) - DataState.Success(response.bodyAsText()) - } catch (e: ClientRequestException) { - val errorMessage = extractErrorMessage(e.response) - DataState.Error(Exception(errorMessage), null) - } catch (e: IOException) { - DataState.Error( - Exception("Network error: ${e.message ?: "Please check your connection"}"), - null - ) - } catch (e: ServerResponseException) { - DataState.Error(Exception("Server error: ${e.message}"), null) - } - } - } -} -``` - ---- - -## Notes - -- All endpoints are prefixed with `/self/` indicating self-service (client-facing) APIs -- The `associations` query parameter can be `transactions` or `charges` to include related data -- Update operations require authentication (passcode verification) before submission -- Withdraw operation marks the account as "Withdrawn by applicant" status -- Currency formatting is done client-side using `CurrencyFormatter` utility -- Date formatting uses `DateHelper` with format "dd MMMM yyyy" diff --git a/claude-product-cycle/design-spec-layer/features/savings-account/MOCKUP.md b/claude-product-cycle/design-spec-layer/features/savings-account/MOCKUP.md deleted file mode 100644 index 5cc6a4af3..000000000 --- a/claude-product-cycle/design-spec-layer/features/savings-account/MOCKUP.md +++ /dev/null @@ -1,1509 +0,0 @@ -# Savings Account - UI Mockups - -> **Design Style**: 2025 Professional Fintech (Revolut/Acorns Inspired) -> **Version**: 2.0 - Enhanced with Gamification & Smart Savings -> **Primary Gradient**: #667EEA → #764BA2 (Purple-Blue) -> **Secondary Gradient**: #11998E → #38EF7D (Savings Green) -> **Last Updated**: 2025-12-30 - ---- - -## Design Philosophy - -Savings accounts are reimagined as **engaging savings experiences** following 2025 fintech trends: - -1. **Gamification-First** - Streaks, badges, milestones, challenges -2. **Visual Progress** - Charts, progress rings, goal visualization -3. **Smart Automation** - Auto-save rules, round-ups, scheduled deposits -4. **Savings Pockets** - Visual sub-accounts for different goals -5. **AI-Powered Insights** - Personalized savings recommendations - ---- - -## Screen 1: Savings Dashboard (Main View) - -``` -+-------------------------------------------------------------------+ -| 9:41 ●●●○○ 🔋 87% | -+-------------------------------------------------------------------+ -| | -| ← Savings [⚙️] [🔔] | -| | -+===================================================================+ -| | -| ╔═══════════════════════════════════════════════════════════════╗ | -| ║▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓║ | -| ║▓▓ ▓▓║ | -| ║▓▓ TOTAL SAVINGS [👁] ▓▓║ | -| ║▓▓ ▓▓║ | -| ║▓▓ $ 52,500.00 ▓▓║ | -| ║▓▓ ▓▓║ | -| ║▓▓ ┌────────────────────┐ ┌────────────────────┐ ▓▓║ | -| ║▓▓ │ ↑ +$1,250.00 │ │ 💰 $127.50 │ ▓▓║ | -| ║▓▓ │ This Month │ │ Interest Earned │ ▓▓║ | -| ║▓▓ │ ▓▓ Green chip │ │ ▓▓ Gold chip │ ▓▓║ | -| ║▓▓ └────────────────────┘ └────────────────────┘ ▓▓║ | -| ║▓▓ ▓▓║ | -| ║▓▓ 🔥 12-day streak! Save today to keep it going ▓▓║ | -| ║▓▓ ▓▓║ | -| ╚═══════════════════════════════════════════════════════════════╝ | -| SECONDARY GRADIENT CARD | -| | -+-------------------------------------------------------------------+ -| | -| QUICK DEPOSIT | -| | -| ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ | -| │ $10 │ │ $25 │ │ $50 │ │ $100 │ │ Custom │ | -| │ + │ │ + │ │ + │ │ + │ │ ... │ | -| └─────────┘ └─────────┘ └─────────┘ └─────────┘ └─────────┘ | -| | -+-------------------------------------------------------------------+ -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ 🎯 YOUR GOALS See All > │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| ← Swipe for more → | -| | -| ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ | -| │ │ │ │ │ │ | -| │ ┌────────┐ │ │ ┌────────┐ │ │ ┌────────┐ │ | -| │ │ 🏖️ │ │ │ │ 🚗 │ │ │ │ 🛡️ │ │ | -| │ │ 72% │ │ │ │ 45% │ │ │ │ 88% │ │ | -| │ └────────┘ │ │ └────────┘ │ │ └────────┘ │ | -| │ Progress ring │ │ Progress ring │ │ Progress ring │ | -| │ │ │ │ │ │ | -| │ Vacation Fund │ │ New Car │ │ Emergency │ | -| │ $7,200 / $10K │ │ $9,000 / $20K │ │ $8,800 / $10K │ | -| │ │ │ │ │ │ | -| │ [+ Add $50] │ │ [+ Add $100] │ │ [+ Add $25] │ | -| │ │ │ │ │ │ | -| └──────────────────┘ └──────────────────┘ └──────────────────┘ | -| GOAL CARD GOAL CARD GOAL CARD | -| | -+-------------------------------------------------------------------+ -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ 📊 INTEREST EARNINGS This Year ▼ │ | -| │ │ | -| │ $892.50 total earned │ | -| │ │ | -| │ $150 ─┐ │ | -| │ │ ╭────╮ │ | -| │ $100 ─┤ ╭────────╯ │ │ | -| │ │ ╭────╯ │ │ | -| │ $50 ─┤ ╭────────╯ │ │ | -| │ │ ╭────╯ │ │ | -| │ $0 ─┴────┴──────────────────────────────────── │ | -| │ Jan Feb Mar Apr May Jun Jul Aug │ | -| │ │ | -| │ ┌───────────────────────────────────────────────────────┐ │ | -| │ │ 💡 At your current rate, you'll earn ~$1,100 by EOY │ │ | -| │ └───────────────────────────────────────────────────────┘ │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ ⚡ AUTO-SAVE RULES │ | -| │ │ | -| │ ┌─────────────────────────────────────────────────────────┐ │ | -| │ │ 🔄 Round-up Savings [ON] │ │ | -| │ │ Round purchases to nearest $1 │ │ | -| │ │ Saved $45.30 this month │ │ | -| │ └─────────────────────────────────────────────────────────┘ │ | -| │ │ | -| │ ┌─────────────────────────────────────────────────────────┐ │ | -| │ │ 📅 Weekly Transfer [ON] │ │ | -| │ │ $50 every Friday → Vacation Fund │ │ | -| │ │ Next: Jan 3, 2025 │ │ | -| │ └─────────────────────────────────────────────────────────┘ │ | -| │ │ | -| │ ┌─────────────────────────────────────────────────────────┐ │ | -| │ │ 💡 Smart Save [OFF] │ │ | -| │ │ AI analyzes spending to save safely │ │ | -| │ │ [Enable →] │ │ | -| │ └─────────────────────────────────────────────────────────┘ │ | -| │ │ | -| │ [+ Add New Rule] │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ 🏆 ACHIEVEMENTS View All > │ | -| │ │ | -| │ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │ | -| │ │ 🔥 │ │ 💯 │ │ 🎯 │ │ ⭐ │ │ 🏅 │ │ 🔒 │ │ | -| │ │ 12day│ │ $50K │ │ Goal │ │ First│ │ Year │ │ ??? │ │ | -| │ │streak│ │saved │ │Master│ │ $1K │ │ Saver│ │ │ │ | -| │ │ ✓ │ │ ✓ │ │ ◐ │ │ ✓ │ │ ○ │ │ ○ │ │ | -| │ └──────┘ └──────┘ └──────┘ └──────┘ └──────┘ └──────┘ │ | -| │ EARNED EARNED 75% EARNED LOCKED LOCKED │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ 🏦 MY ACCOUNTS 3 accounts │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌──────┐ Primary Savings [Active] [>] │ | -| │ │ 💵 │ ****4521 │ | -| │ │ 4.5% │ │ | -| │ └──────┘ │ | -| │ │ | -| │ $35,000.00 ↑ +$450 this month │ | -| │ │ | -| │ Interest earned: $127.50 YTD │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌──────┐ Emergency Fund [Active] [>] │ | -| │ │ 🛡️ │ ****4522 │ | -| │ │ 3.2% │ │ | -| │ └──────┘ │ | -| │ │ | -| │ $17,500.00 ↑ +$800 this month │ | -| │ │ | -| │ ████████████████████████████████████░░░░ 88% to goal │ | -| │ $17,500 / $20,000 │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ [Pending] │ | -| │ ┌──────┐ Holiday Savings [>] │ | -| │ │ 📋 │ ****4523 │ | -| │ │Amber │ │ | -| │ └──────┘ │ | -| │ │ | -| │ Awaiting Approval │ | -| │ Submitted: Dec 15, 2025 │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ Powered by Mifos • Updated just now │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -| [🏠 Home] [📊 Accounts] [💸 FAB] [👤 Profile] | -+-------------------------------------------------------------------+ -``` - ---- - -## Screen 2: Savings Account Detail - -``` -+-------------------------------------------------------------------+ -| 9:41 ●●●○○ 🔋 87% | -+-------------------------------------------------------------------+ -| | -| ← Primary Savings [⋮] Menu | -| | -+===================================================================+ -| | -| ╔═══════════════════════════════════════════════════════════════╗ | -| ║▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓║ | -| ║▓▓ ▓▓║ | -| ║▓▓ Account ****4521 ● Active ▓▓║ | -| ║▓▓ ▓▓║ | -| ║▓▓ $ 35,000.00 ▓▓║ | -| ║▓▓ ════════════ ▓▓║ | -| ║▓▓ Available Balance ▓▓║ | -| ║▓▓ ▓▓║ | -| ║▓▓ ┌────────────┐ ┌────────────┐ ┌────────────┐ ▓▓║ | -| ║▓▓ │ 4.5% │ │ $127.50 │ │ +$450 │ ▓▓║ | -| ║▓▓ │ APY │ │ Interest │ │ This Mo │ ▓▓║ | -| ║▓▓ └────────────┘ └────────────┘ └────────────┘ ▓▓║ | -| ║▓▓ ▓▓║ | -| ╚═══════════════════════════════════════════════════════════════╝ | -| SECONDARY GRADIENT CARD | -| | -+-------------------------------------------------------------------+ -| | -| QUICK ACTIONS | -| | -| ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌───────────┐ | -| │ 💸 │ │ 📥 │ │ 📊 │ │ 📱 │ | -| │ Transfer │ │ Deposit │ │ History │ │ QR Code │ | -| └─────────────┘ └─────────────┘ └─────────────┘ └───────────┘ | -| | -| ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌───────────┐ | -| │ 🎯 │ │ 💳 │ │ 🔒 │ │ 📈 │ | -| │ Set Goal │ │ Charges │ │ Lock │ │ Calculator│ | -| └─────────────┘ └─────────────┘ └─────────────┘ └───────────┘ | -| | -+-------------------------------------------------------------------+ -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ 💰 INTEREST PROJECTION │ | -| │ │ | -| │ Current Balance $35,000.00 │ | -| │ Monthly Deposit +$500.00 │ | -| │ Interest Rate 4.5% APY │ | -| │ ─────────────────────────────────────── │ | -| │ In 1 Year $42,575.00 (+$7,575) │ | -| │ In 5 Years $66,890.00 (+$31,890) │ | -| │ │ | -| │ ┌─────────────────────────────────────────────────────────┐ │ | -| │ │▓▓▓▓▓▓▓▓▓▓▓▓ Calculate Custom Projection ▓▓▓▓▓▓▓▓▓▓▓▓▓│ │ | -| │ └─────────────────────────────────────────────────────────┘ │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ 📊 BALANCE HISTORY Last 6 Mo ▼ │ | -| │ │ | -| │ $35K ─┐ ╭────╮ │ | -| │ │ ╭────╯ │ │ | -| │ $30K ─┤ ╭────────╯ │ │ | -| │ │ ╭────╯ │ │ | -| │ $25K ─┤ ╭────────╯ │ │ | -| │ │ ╭────╯ │ │ | -| │ $20K ─┴────┴───────────────────────────────────────── │ | -| │ Jul Aug Sep Oct Nov Dec │ | -| │ │ | -| │ ● Deposits ● Withdrawals ● Interest │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -| | -| ACCOUNT DETAILS | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ Account Number 000000004521 │ | -| │ ─────────────────────────────────────────────────────────── │ | -| │ Product Savings Plus │ | -| │ ─────────────────────────────────────────────────────────── │ | -| │ Interest Rate 4.5% per annum │ | -| │ ─────────────────────────────────────────────────────────── │ | -| │ Interest Posting Monthly │ | -| │ ─────────────────────────────────────────────────────────── │ | -| │ Total Deposits $42,500.00 │ | -| │ ─────────────────────────────────────────────────────────── │ | -| │ Total Withdrawals $7,500.00 │ | -| │ ─────────────────────────────────────────────────────────── │ | -| │ Interest Earned (YTD) $127.50 │ | -| │ ─────────────────────────────────────────────────────────── │ | -| │ Minimum Balance $500.00 │ | -| │ ─────────────────────────────────────────────────────────── │ | -| │ Opened On Jan 15, 2024 │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -| | -| RECENT TRANSACTIONS See All > | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ Today │ | -| │ │ | -| │ ┌───┐ Interest Credit +$12.50 │ | -| │ │ 💰 │ Monthly interest payment → $35,000 │ | -| │ └───┘ 9:00 AM │ | -| │ │ | -| │ ─────────────────────────────────────────────────────────── │ | -| │ Yesterday │ | -| │ │ | -| │ ┌───┐ Deposit +$500.00 │ | -| │ │ ↓ │ Auto-save weekly transfer → $34,988 │ | -| │ └───┘ 5:00 PM │ | -| │ │ | -| │ ┌───┐ Round-up Savings +$3.45 │ | -| │ │ 🔄 │ 5 transactions rounded up → $34,488 │ | -| │ └───┘ Various times │ | -| │ │ | -| │ ─────────────────────────────────────────────────────────── │ | -| │ Dec 28 │ | -| │ │ | -| │ ┌───┐ Salary Credit +$4,500.00 │ | -| │ │ 💼 │ Monthly salary deposit → $34,485 │ | -| │ └───┘ 9:30 AM │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -``` - ---- - -## Screen 3: Create Savings Goal - -``` -+-------------------------------------------------------------------+ -| 9:41 ●●●○○ 🔋 87% | -+-------------------------------------------------------------------+ -| | -| ← Create Goal | -| | -+-------------------------------------------------------------------+ -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ What are you saving for? │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| POPULAR GOALS | -| | -| ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ | -| │ 🏖️ │ │ 🚗 │ │ 🏠 │ │ 💍 │ | -| │ Vacation│ │ Car │ │ House │ │ Wedding │ | -| └─────────┘ └─────────┘ └─────────┘ └─────────┘ | -| | -| ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ | -| │ 🛡️ │ │ 🎓 │ │ 📱 │ │ ✨ │ | -| │Emergency│ │Education│ │ Gadget │ │ Other │ | -| └─────────┘ └─────────┘ └─────────┘ └─────────┘ | -| | -+-------------------------------------------------------------------+ -| | -| GOAL NAME | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ Dream Vacation to Bali │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| TARGET AMOUNT | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ $ 10,000 │ | -| │ ═════════ │ | -| │ │ | -| │ ┌───────┐ ┌───────┐ ┌───────┐ ┌───────┐ ┌───────┐ │ | -| │ │ $1K │ │ $5K │ │ $10K │ │ $25K │ │ Custom│ │ | -| │ │ │ │ │ │ ● │ │ │ │ │ │ | -| │ └───────┘ └───────┘ └───────┘ └───────┘ └───────┘ │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| TARGET DATE | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ 📅 August 2025 ▼ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| TO REACH YOUR GOAL | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ You need to save approximately: │ | -| │ │ | -| │ $1,250 / month │ | -| │ or │ | -| │ $289 / week │ | -| │ │ | -| │ ┌─────────────────────────────────────────────────────────┐ │ | -| │ │ 🤖 AI suggests: Based on your income, $800/mo is │ │ | -| │ │ more sustainable. Consider extending to Nov 2025. │ │ | -| │ └─────────────────────────────────────────────────────────┘ │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| AUTO-SAVE | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ [✓] Enable automatic savings │ | -| │ │ | -| │ Amount │ | -| │ ┌───────────────────────────────────────────┐ │ | -| │ │ $ 250.00 │ │ | -| │ └───────────────────────────────────────────┘ │ | -| │ │ | -| │ Frequency │ | -| │ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ | -| │ │ Weekly │ │Bi-weekly│ │ Monthly │ │ Custom │ │ | -| │ │ ● │ │ ○ │ │ ○ │ │ ○ │ │ | -| │ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │ | -| │ │ | -| │ From Account │ | -| │ ┌───────────────────────────────────────────┐ │ | -| │ │ 🏦 Primary Savings ****4521 ▼ │ │ | -| │ └───────────────────────────────────────────┘ │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ | -| │▓▓ ▓▓│ | -| │▓▓ 🎯 Create Goal ▓▓│ | -| │▓▓ ▓▓│ | -| │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -``` - ---- - -## Screen 4: Goal Detail View - -``` -+-------------------------------------------------------------------+ -| 9:41 ●●●○○ 🔋 87% | -+-------------------------------------------------------------------+ -| | -| ← Vacation Fund [Edit] [⋮] | -| | -+===================================================================+ -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌────────────────┐ │ | -| │ │ │ │ | -| │ │ 🏖️ │ │ | -| │ │ │ │ | -| │ │ ┌────────┐ │ │ | -| │ │ │ 72% │ │ │ | -| │ │ └────────┘ │ │ | -| │ │ Progress Ring │ │ | -| │ │ │ │ | -| │ └────────────────┘ │ | -| │ │ | -| │ $7,200 of $10,000 │ | -| │ │ | -| │ 🔥 On track! Keep it up! │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ $2,800 left to go │ | -| │ │ | -| │ ┌─────────────────┐ ┌─────────────────┐ │ | -| │ │ Est. Complete │ │ Auto-saving │ │ | -| │ │ Aug 2025 │ │ $250/week │ │ | -| │ └─────────────────┘ └─────────────────┘ │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| ┌─────────────────────┐ ┌─────────────────────┐ | -| │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ │ │ | -| │▓▓ + Add Money ▓▓│ │ Withdraw │ | -| │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ │ │ | -| └─────────────────────┘ └─────────────────────┘ | -| | -+-------------------------------------------------------------------+ -| | -| SAVINGS PROGRESS | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ $10K ─┐ ╭───── │ | -| │ │ ╭────╯ │ | -| │ $7.5K─┤ ╭────────╯ ← Today │ | -| │ │ ╭────╯ │ | -| │ $5K ─┤ ╭────────╯ │ | -| │ │ ╭────╯ │ | -| │ $2.5K─┴────┴ │ | -| │ Mar Apr May Jun Jul Aug │ | -| │ │ | -| │ ● Actual ─ ─ Projected │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -| | -| MILESTONES | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ✓ Started Goal Mar 1, 2025 │ | -| │ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ │ | -| │ │ | -| │ ✓ 25% Complete ($2,500) Apr 15, 2025 │ | -| │ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ │ | -| │ │ | -| │ ✓ 50% Complete ($5,000) Jun 1, 2025 │ | -| │ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ │ | -| │ │ | -| │ ◐ 75% Complete ($7,500) Est. Jan 2025 │ | -| │ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ │ | -| │ │ | -| │ ○ 🎯 Goal Complete ($10,000) Est. Aug 2025 │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -| | -| SAVINGS ACTIVITY See All > | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌───┐ Weekly auto-save +$250.00 │ | -| │ │ 🔄 │ Today, 5:00 PM │ | -| │ └───┘ │ | -| │ │ | -| │ ┌───┐ Quick deposit +$100.00 │ | -| │ │ 💵 │ Dec 28, 2025 │ | -| │ └───┘ │ | -| │ │ | -| │ ┌───┐ Weekly auto-save +$250.00 │ | -| │ │ 🔄 │ Dec 27, 2025 │ | -| │ └───┘ │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -``` - ---- - -## Screen 5: Savings Challenges - -``` -+-------------------------------------------------------------------+ -| 9:41 ●●●○○ 🔋 87% | -+-------------------------------------------------------------------+ -| | -| ← Savings Challenges | -| | -+-------------------------------------------------------------------+ -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ [Active] [Completed] [Available] │ | -| │ ● ○ ○ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -| | -| YOUR ACTIVE CHALLENGES | -| | -| ╔═══════════════════════════════════════════════════════════════╗ | -| ║ ║ | -| ║ 🔥 NO-SPEND WEEKEND ║ | -| ║ ║ | -| ║ Don't spend anything this weekend! ║ | -| ║ ║ | -| ║ ████████████████████████████████░░░░░░░░░░ 70% ║ | -| ║ ║ | -| ║ 1 day 8 hours remaining ║ | -| ║ ║ | -| ║ Reward: +$25 bonus to savings ║ | -| ║ ║ | -| ╚═══════════════════════════════════════════════════════════════╝ | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ 💰 52-WEEK SAVINGS CHALLENGE │ | -| │ │ | -| │ Save incrementally each week: $1, $2, $3... │ | -| │ │ | -| │ Week 45 of 52 │ | -| │ ████████████████████████████████████████░░░░░░ 87% │ | -| │ │ | -| │ This week: Save $45 │ | -| │ Total saved: $990 / $1,378 │ | -| │ │ | -| │ [Save $45 Now] │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ☕ COFFEE JAR CHALLENGE │ | -| │ │ | -| │ Save $5 every time you skip buying coffee │ | -| │ │ | -| │ ██████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░ 35% │ | -| │ │ | -| │ $175 / $500 goal │ | -| │ 35 coffees skipped! │ | -| │ │ | -| │ [+ Log Skipped Coffee] │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -| | -| AVAILABLE CHALLENGES | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ 🏃 30-DAY SAVINGS STREAK │ | -| │ Save any amount for 30 consecutive days │ | -| │ Reward: "Streak Master" badge │ | -| │ [Start →] │ | -| │ │ | -| │ ─────────────────────────────────────────────────────────── │ | -| │ │ | -| │ 🎯 ROUND-UP MASTER │ | -| │ Save $100 through round-ups this month │ | -| │ Reward: +$10 bonus │ | -| │ [Start →] │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -``` - ---- - -## Screen 6: Quick Deposit Flow - -``` -+-------------------------------------------------------------------+ -| 9:41 ●●●○○ 🔋 87% | -+-------------------------------------------------------------------+ -| | -| ← Deposit | -| | -+-------------------------------------------------------------------+ -| | -| TO | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌──────┐ Primary Savings ▼ │ | -| │ │ 💵 │ ****4521 │ | -| │ │ 4.5% │ Balance: $35,000.00 │ | -| │ └──────┘ │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| AMOUNT | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ $ 500.00 │ | -| │ ═════════ │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| QUICK AMOUNTS | -| | -| ┌───────┐ ┌───────┐ ┌───────┐ ┌───────┐ ┌───────┐ | -| │ $25 │ │ $50 │ │ $100 │ │ $250 │ │ $500 │ | -| │ │ │ │ │ │ │ │ │ ● │ | -| └───────┘ └───────┘ └───────┘ └───────┘ └───────┘ | -| | -| FROM | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌──────┐ Checking Account ▼ │ | -| │ │ 🏦 │ ****7890 │ | -| │ └──────┘ Available: $8,500.00 │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| ADD TO GOAL (Optional) | -| | -| ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ | -| │ 🏖️ │ │ 🚗 │ │ 🛡️ │ | -| │ Vacation │ │ Car │ │ Emergency │ | -| │ ● │ │ ○ │ │ ○ │ | -| └─────────────┘ └─────────────┘ └─────────────┘ | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ This deposit counts toward your Vacation Fund goal │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -| | -| SUMMARY | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ Amount $500.00 │ | -| │ To Primary Savings ****21 │ | -| │ From Checking ****7890 │ | -| │ Goal Vacation Fund │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ | -| │▓▓ ▓▓│ | -| │▓▓ 💰 Deposit $500.00 ▓▓│ | -| │▓▓ ▓▓│ | -| │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -``` - ---- - -## Screen 7: Auto-Save Rules - -``` -+-------------------------------------------------------------------+ -| 9:41 ●●●○○ 🔋 87% | -+-------------------------------------------------------------------+ -| | -| ← Auto-Save Rules [+ Add Rule] | -| | -+-------------------------------------------------------------------+ -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ 💡 Auto-save helps you save without thinking about it. │ | -| │ Set rules and watch your savings grow automatically! │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| YOUR RULES | -| | -| ╔═══════════════════════════════════════════════════════════════╗ | -| ║ ║ | -| ║ 🔄 ROUND-UP SAVINGS [ON] ║ | -| ║ ║ | -| ║ Round every purchase to the nearest $1 ║ | -| ║ and save the difference ║ | -| ║ ║ | -| ║ ┌─────────────────────────────────────────────────────────┐ ║ | -| ║ │ This Month │ ║ | -| ║ │ $45.30 saved from 87 transactions │ ║ | -| ║ │ │ ║ | -| ║ │ All Time │ ║ | -| ║ │ $523.45 saved from 1,247 transactions │ ║ | -| ║ └─────────────────────────────────────────────────────────┘ ║ | -| ║ ║ | -| ║ Multiplier: ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ║ | -| ║ │ 1x │ │ 2x │ │ 3x │ │ 5x │ ║ | -| ║ │ ● │ │ │ │ │ │ │ ║ | -| ║ └──────┘ └──────┘ └──────┘ └──────┘ ║ | -| ║ ║ | -| ║ [Edit] [Pause] ║ | -| ║ ║ | -| ╚═══════════════════════════════════════════════════════════════╝ | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ 📅 WEEKLY TRANSFER [ON] │ | -| │ │ | -| │ $50.00 every Friday at 5:00 PM │ | -| │ To: Vacation Fund │ | -| │ │ | -| │ Next transfer: Jan 3, 2025 │ | -| │ Total transferred: $2,350.00 │ | -| │ │ | -| │ [Edit] [Pause] │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ 💵 PAYDAY SAVINGS [ON] │ | -| │ │ | -| │ Save 10% of every deposit over $1,000 │ | -| │ To: Emergency Fund │ | -| │ │ | -| │ Last triggered: Dec 28 ($450 saved) │ | -| │ Total saved: $2,700.00 │ | -| │ │ | -| │ [Edit] [Pause] │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ 🤖 SMART SAVE (AI-Powered) [OFF] │ | -| │ │ | -| │ Let AI analyze your spending patterns and │ | -| │ automatically save when you can afford it │ | -| │ │ | -| │ Typical savings: $100-300/month │ | -| │ │ | -| │ [Enable →] │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -| | -| TOTAL AUTO-SAVED | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ This Month $545.30 │ | -| │ This Year $5,573.45 │ | -| │ All Time $12,847.90 │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -``` - ---- - -## Screen 8: Interest Calculator - -``` -+-------------------------------------------------------------------+ -| 9:41 ●●●○○ 🔋 87% | -+-------------------------------------------------------------------+ -| | -| ← Savings Calculator | -| | -+-------------------------------------------------------------------+ -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ See how your savings can grow over time │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| STARTING AMOUNT | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ $ 35,000 │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| MONTHLY CONTRIBUTION | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ $ 500 │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ ─────────────────────────────●──────────────────────────── │ | -| │ $0 $500 $2,000 │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| INTEREST RATE | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ 4.5% APY │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| TIME PERIOD | -| | -| ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ | -| │ 1 Year │ │ 3 Years │ │ 5 Years │ │ 10 Years│ │ Custom │ | -| │ ○ │ │ ○ │ │ ● │ │ ○ │ │ ○ │ | -| └─────────┘ └─────────┘ └─────────┘ └─────────┘ └─────────┘ | -| | -+-------------------------------------------------------------------+ -| | -| YOUR PROJECTION | -| | -| ╔═══════════════════════════════════════════════════════════════╗ | -| ║ ║ | -| ║ $ 71,890.50 ║ | -| ║ ═══════════ ║ | -| ║ in 5 years ║ | -| ║ ║ | -| ║ ┌─────────────────────────────────────────────────────────┐ ║ | -| ║ │ │ ║ | -| ║ │ Starting Amount $35,000.00 │ ║ | -| ║ │ Total Contributions $30,000.00 (60 deposits) │ ║ | -| ║ │ Interest Earned $6,890.50 │ ║ | -| ║ │ ───────────────────────────────────────────────────── │ ║ | -| ║ │ Final Balance $71,890.50 │ ║ | -| ║ │ │ ║ | -| ║ └─────────────────────────────────────────────────────────┘ ║ | -| ║ ║ | -| ╚═══════════════════════════════════════════════════════════════╝ | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ $80K ─┐ ╭───────── │ | -| │ │ ╭────╯ │ | -| │ $60K ─┤ ╭────────╯ │ | -| │ │ ╭────╯ │ | -| │ $40K ─┤ ╭────────╯ │ | -| │ │ ╭────╯ │ | -| │ $35K ─┴────┴ │ | -| │ Now Y1 Y2 Y3 Y4 Y5 │ | -| │ │ | -| │ ■ Principal + Contributions ■ Interest │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ | -| │▓▓ ▓▓│ | -| │▓▓ 📅 Start Saving $500/month Now ▓▓│ | -| │▓▓ ▓▓│ | -| │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -``` - ---- - -## Screen 9: Loading State - -``` -+-------------------------------------------------------------------+ -| 9:41 ●●●○○ 🔋 87% | -+-------------------------------------------------------------------+ -| | -| ← Savings [⚙️] [🔔] | -| | -+-------------------------------------------------------------------+ -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ | -| │░░ ░░│ | -| │░░ ═══════════════════════════ ░░│ | -| │░░ ░░│ | -| │░░ ══════════════════════════════ ░░│ | -| │░░ ░░│ | -| │░░ ┌─────────────────┐ ┌─────────────────┐ ░░│ | -| │░░ │ ══════════════ │ │ ══════════════ │ ░░│ | -| │░░ │ ════════ │ │ ════════ │ ░░│ | -| │░░ └─────────────────┘ └─────────────────┘ ░░│ | -| │░░ ░░│ | -| │░░ ══════════════════════════════════ ░░│ | -| │░░ ░░│ | -| │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ | -| └───────────────────────────────────────────────────────────────┘ | -| HERO CARD SHIMMER | -| | -| ═══════════════════════ | -| | -| ┌───────────┐ ┌───────────┐ ┌───────────┐ ┌───────────┐ | -| │ ═══════ │ │ ═══════ │ │ ═══════ │ │ ═══════ │ | -| └───────────┘ └───────────┘ └───────────┘ └───────────┘ | -| QUICK DEPOSIT SHIMMER | -| | -| ┌────────────────────┐ ┌────────────────────┐ ┌───────────────┐| -| │ ░░░░░░░░░░░░░░░░░░ │ │ ░░░░░░░░░░░░░░░░░░ │ │ ░░░░░░░░░░░░ │| -| │ ░░ ┌────────┐ ░░░░ │ │ ░░ ┌────────┐ ░░░░ │ │ ░░ ┌──────┐░░│| -| │ ░░ │ ░░░░░░ │ ░░░░ │ │ ░░ │ ░░░░░░ │ ░░░░ │ │ ░░ │ ░░░░ │░░│| -| │ ░░ └────────┘ ░░░░ │ │ ░░ └────────┘ ░░░░ │ │ ░░ └──────┘░░│| -| │ ░░░░░░░░░░░░░░░░░░ │ │ ░░░░░░░░░░░░░░░░░░ │ │ ░░░░░░░░░░░░ │| -| │ ═══════════════════│ │ ═══════════════════│ │ ═════════════│| -| │ ════════ │ │ ════════ │ │ ═══════ │| -| └────────────────────┘ └────────────────────┘ └───────────────┘| -| GOAL CARDS SHIMMER | -| | -| ┌───────────────────────────────────────────────────────────────┐| -| │ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│| -| │ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│| -| │ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│| -| └───────────────────────────────────────────────────────────────┘| -| CHART SHIMMER | -| | -+-------------------------------------------------------------------+ -| [🏠 Home] [📊 Accounts] [💸 FAB] [👤 Profile] | -+-------------------------------------------------------------------+ -``` - -**Shimmer Animation:** -- Wave moves left-to-right at 1200ms per cycle -- Gradient: #E1E4E8 → #F8F9FA → #E1E4E8 -- Cards have staggered animation start (50ms delay each) - ---- - -## Screen 10: Empty State - -``` -+-------------------------------------------------------------------+ -| 9:41 ●●●○○ 🔋 87% | -+-------------------------------------------------------------------+ -| | -| ← Savings [⚙️] [🔔] | -| | -+-------------------------------------------------------------------+ -| | -| | -| | -| ┌───────────────┐ | -| │ │ | -| │ ┌───────┐ │ | -| │ │ 🐷 │ │ | -| │ │ │ │ | -| │ └───────┘ │ | -| │ │ | -| │ ~~~~~~~~ │ | -| │ ~~~~~~~~ │ | -| └───────────────┘ | -| Floating Animation | -| | -| | -| Start Your Savings Journey | -| | -| Every great fortune starts with a single | -| deposit. Open your first savings account | -| and watch your money grow! | -| | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ WHY SAVE WITH US? │ | -| │ │ | -| │ ✓ Up to 4.5% APY on savings │ | -| │ ✓ No minimum balance required │ | -| │ ✓ Smart auto-save rules │ | -| │ ✓ Goal tracking with rewards │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ | -| │▓▓ ▓▓│ | -| │▓▓ 🏦 Open Savings Account ▓▓│ | -| │▓▓ ▓▓│ | -| │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| Learn About Savings → | -| | -+-------------------------------------------------------------------+ -| [🏠 Home] [📊 Accounts] [💸 FAB] [👤 Profile] | -+-------------------------------------------------------------------+ -``` - ---- - -## Component Specifications - -### 1. Savings Goal Card - -``` -+-------------------------------------------------------------------+ -| GOAL CARD COMPONENT | -+-------------------------------------------------------------------+ -| | -| ┌──────────────────┐ | -| │ │ | -| │ ┌────────┐ │ Progress Ring: | -| │ │ 🏖️ │ │ • Outer: 80dp diameter | -| │ │ 72% │ │ • Stroke: 8dp | -| │ └────────┘ │ • Track: #E1E4E8 (15%) | -| │ Progress ring │ • Fill: Secondary Gradient | -| │ │ • Animation: 800ms, EaseOutCubic | -| │ Vacation Fund │ | -| │ $7,200 / $10K │ Icon: | -| │ │ • Size: 32dp | -| │ [+ Add $50] │ • Centered in ring | -| │ │ | -| └──────────────────┘ Percentage: | -| • Font: 18sp, Bold | -| Dimensions: • Below icon | -| • Width: 140dp | -| • Height: 180dp Goal Name: | -| • Corner radius: 16dp • Font: 14sp, SemiBold | -| • Padding: 12dp • Max 2 lines | -| | -| Quick Add Button: | -| • Height: 32dp | -| • Border: 1dp Primary | -| • Text: 12sp, Primary color | -| | -+-------------------------------------------------------------------+ -``` - -### 2. Auto-Save Rule Card - -``` -+-------------------------------------------------------------------+ -| AUTO-SAVE RULE CARD | -+-------------------------------------------------------------------+ -| | -| ┌─────────────────────────────────────────────────────────────┐ | -| │ 🔄 Round-up Savings [Toggle] │ | -| │ Round purchases to nearest $1 │ | -| │ Saved $45.30 this month │ | -| └─────────────────────────────────────────────────────────────┘ | -| | -| Layout: | -| • Icon: 24dp, left-aligned | -| • Title: 16sp, SemiBold | -| • Description: 14sp, Secondary color | -| • Stats: 12sp, Success color | -| • Toggle: Standard Material switch | -| | -| Toggle States: | -| • ON: Track = Secondary Gradient, Thumb = White | -| • OFF: Track = #E1E4E8, Thumb = White | -| | -| Card: | -| • Padding: 16dp | -| • Corner radius: 12dp | -| • Border: 1dp #E1E4E8 (OFF) or Secondary at 20% (ON) | -| • Gap between cards: 12dp | -| | -+-------------------------------------------------------------------+ -``` - -### 3. Achievement Badge - -``` -+-------------------------------------------------------------------+ -| ACHIEVEMENT BADGE | -+-------------------------------------------------------------------+ -| | -| States: | -| | -| EARNED PROGRESS | -| ┌──────────────────┐ ┌──────────────────┐ | -| │ ┌────┐ │ │ ┌────┐ │ | -| │ │ 🔥 │ │ │ │ 🎯 │ │ | -| │ └────┘ │ │ └────┘ │ | -| │ 12-day streak │ │ Goal Master │ | -| │ ✓ │ │ 75% │ | -| └──────────────────┘ └──────────────────┘ | -| Full color Grayscale + progress | -| Golden glow effect Circular progress ring | -| | -| LOCKED | -| ┌──────────────────┐ | -| │ ┌────┐ │ | -| │ │ 🔒 │ │ | -| │ └────┘ │ | -| │ ??? │ | -| │ ○ │ | -| └──────────────────┘ | -| Fully grayscale | -| Tap reveals unlock requirements | -| | -| Dimensions: | -| • Badge size: 64dp × 80dp | -| • Icon container: 48dp × 48dp | -| • Icon size: 28dp | -| • Label: 10sp, Medium | -| | -+-------------------------------------------------------------------+ -``` - -### 4. Interest Chart - -``` -+-------------------------------------------------------------------+ -| INTEREST CHART COMPONENT | -+-------------------------------------------------------------------+ -| | -| Chart Type: Area chart with gradient fill | -| | -| Dimensions: | -| • Height: 160dp | -| • Padding: 16dp | -| | -| Line: | -| • Stroke: 2dp | -| • Color: Secondary gradient | -| • Animation: Path draws in over 800ms | -| | -| Fill: | -| • Gradient: Secondary at 30% → 0% (top to bottom) | -| | -| Data Points: | -| • Size: 6dp circles | -| • Visible on touch | -| • Tooltip shows exact value | -| | -| Axis Labels: | -| • Font: 10sp, Secondary color | -| • Y-axis: Left, abbreviated ($35K) | -| • X-axis: Bottom, month abbreviations | -| | -| Legend: | -| • Dots: 8dp | -| • Font: 11sp | -| • Horizontal layout below chart | -| | -+-------------------------------------------------------------------+ -``` - ---- - -## Animations & Micro-interactions - -### Page Load Sequence - -``` -+-------------------------------------------------------------------+ -| SAVINGS DASHBOARD LOAD ANIMATION | -+-------------------------------------------------------------------+ -| | -| T+0ms: Shimmer placeholders visible | -| T+200ms: Data received, shimmer starts fading | -| T+300ms: Hero balance card fades in + slides up 20dp | -| T+350ms: Balance counter animates (0→$52,500) | -| T+400ms: Quick deposit buttons scale in (staggered 30ms) | -| T+500ms: Goal cards slide in from right | -| T+550ms: Progress rings fill with animation | -| T+600ms: Interest chart line draws | -| T+700ms: Auto-save rules fade in | -| T+800ms: Achievement badges appear (staggered 50ms) | -| T+900ms: Account cards slide up | -| T+1000ms: All animations complete | -| | -| Easing: DecelerateInterpolator for all | -| | -+-------------------------------------------------------------------+ -``` - -### Goal Progress Animation - -``` -+-------------------------------------------------------------------+ -| GOAL PROGRESS RING ANIMATION | -+-------------------------------------------------------------------+ -| | -| Initial Load: | -| 1. Ring track appears (100ms) | -| 2. Progress arc fills from 0° to target angle (800ms) | -| 3. Percentage counter animates (0%→72%) | -| 4. Light pulse animation on complete | -| | -| On Deposit: | -| 1. Current progress stored | -| 2. New deposit amount shows (+$50) | -| 3. Progress arc animates to new percentage (400ms) | -| 4. Percentage counter updates | -| 5. Confetti burst if milestone reached | -| 6. Haptic feedback (success) | -| | -| Milestone Reached: | -| 1. Progress ring pulses (scale 1.0→1.1→1.0) | -| 2. Celebration animation (confetti) | -| 3. Badge unlock animation if applicable | -| 4. Achievement toast appears | -| | -+-------------------------------------------------------------------+ -``` - -### Streak Animation - -``` -+-------------------------------------------------------------------+ -| STREAK COUNTER ANIMATION | -+-------------------------------------------------------------------+ -| | -| Daily Save: | -| 1. Fire emoji bounces (scale 1.0→1.2→1.0) | -| 2. Counter increments with flip animation | -| 3. Streak message updates | -| 4. Flame particles emit upward | -| | -| Streak Lost: | -| 1. Fire emoji fades (color desaturates) | -| 2. Counter resets with sad wobble | -| 3. "Start new streak" prompt appears | -| | -| Streak Milestone (7, 30, 100 days): | -| 1. Full-screen celebration overlay | -| 2. Badge unlock animation | -| 3. Achievement toast with share option | -| | -+-------------------------------------------------------------------+ -``` - ---- - -## Accessibility - -### Screen Reader Annotations - -``` -+-------------------------------------------------------------------+ -| ACCESSIBILITY LABELS | -+-------------------------------------------------------------------+ -| | -| Balance Card: | -| contentDescription: "Total Savings: $52,500.00. Up $1,250 this | -| month. Interest earned: $127.50. Current streak: 12 days. | -| Double tap eye icon to hide balance." | -| | -| Goal Card: | -| contentDescription: "Vacation Fund goal. $7,200 saved of | -| $10,000 target. 72% complete. Tap to view details or add money." | -| | -| Progress Ring: | -| contentDescription: "Progress: 72%. $7,200 of $10,000 saved." | -| Role: ProgressBar | -| | -| Auto-Save Toggle: | -| contentDescription: "Round-up savings. Currently enabled. | -| Saved $45.30 this month. Double tap to disable." | -| | -| Achievement Badge (Earned): | -| contentDescription: "Achievement earned: 12-day savings streak. | -| You saved money for 12 consecutive days." | -| | -| Achievement Badge (Locked): | -| contentDescription: "Achievement locked. Double tap to see | -| requirements to unlock." | -| | -| Quick Deposit Button: | -| contentDescription: "Quick deposit $50 to savings. Double tap | -| to deposit." | -| | -+-------------------------------------------------------------------+ -``` - -### Focus Order - -``` -+-------------------------------------------------------------------+ -| FOCUS NAVIGATION ORDER | -+-------------------------------------------------------------------+ -| | -| 1. Back button | -| 2. Settings icon | -| 3. Notifications icon | -| 4. Balance card | -| 4a. Eye toggle (balance visibility) | -| 5. Quick deposit buttons (left to right) | -| 6. Goals section header | -| 7. Goal cards (swipeable, announce current) | -| 7a. Each goal card with quick add button | -| 8. Interest chart section | -| 8a. Period selector dropdown | -| 9. Auto-save rules section header | -| 10. Auto-save rule toggles (each with edit/pause) | -| 11. Add new rule button | -| 12. Achievements section header | -| 13. Achievement badges (left to right) | -| 14. My accounts section header | -| 15. Account cards (top to bottom) | -| 16. Footer | -| 17. Bottom navigation tabs | -| | -+-------------------------------------------------------------------+ -``` - ---- - -## Dark Mode - -### Color Transformations - -``` -+-------------------------------------------------------------------+ -| DARK MODE COLOR MAPPING | -+-------------------------------------------------------------------+ -| | -| Backgrounds: | -| • Screen: #F8F9FA → #0D1117 | -| • Card Surface: #FFFFFF → #161B22 | -| • Elevated: #FFFFFF → #21262D | -| | -| Text: | -| • Primary: #1F2937 → #F0F6FC | -| • Secondary: #6B7280 → #8B949E | -| • Tertiary: #9CA3AF → #6E7681 | -| | -| Preserved Colors (same in both modes): | -| • Secondary Gradient: #11998E → #38EF7D | -| • Primary Gradient: #667EEA → #764BA2 | -| • Success: #00D09C | -| • Warning: #FFB800 | -| • Error: #FF4757 | -| | -| Adjusted for Dark: | -| • Gradient cards: 85% opacity over dark surface | -| • Progress ring track: #30363D | -| • Chart grid: #30363D | -| • Card shadows: Removed (invisible on dark) | -| • Card borders: Added 1dp #30363D | -| | -+-------------------------------------------------------------------+ -``` - ---- - -## Implementation Notes - -### Key Composables Required - -1. **SavingsDashboardScreen** - Main container with all sections -2. **SavingsHeroCard** - Balance with streak and interest stats -3. **QuickDepositRow** - Horizontal preset amount buttons -4. **GoalCarousel** - Horizontal scrolling goal cards -5. **SavingsGoalCard** - Individual goal with progress ring -6. **GoalDetailScreen** - Full goal view with milestones -7. **CreateGoalScreen** - Goal creation flow -8. **InterestChartCard** - Area chart with earnings -9. **AutoSaveRulesCard** - List of auto-save toggles -10. **AutoSaveRuleItem** - Individual rule with toggle -11. **CreateAutoSaveSheet** - Rule creation bottom sheet -12. **AchievementBadgeRow** - Horizontal badge display -13. **AchievementBadge** - Individual badge states -14. **SavingsChallengesScreen** - Challenge list and details -15. **ChallengeCard** - Individual challenge progress -16. **QuickDepositSheet** - Deposit flow bottom sheet -17. **InterestCalculatorScreen** - Projection calculator -18. **SavingsAccountCard** - Enhanced account card - -### Animation Specifications - -| Animation | Duration | Easing | Trigger | -|-----------|----------|--------|---------| -| Balance counter | 800ms | Decelerate | Page load | -| Progress ring fill | 800ms | EaseOutCubic | Load/update | -| Goal card slide | 300ms | Decelerate | Carousel | -| Badge unlock | 500ms | Spring | Achievement | -| Streak increment | 200ms | Bounce | Daily save | -| Chart draw | 800ms | Decelerate | Page load | -| Toggle switch | 200ms | Standard | Tap | -| Deposit success | 300ms | Spring | Confirmation | -| Confetti burst | 1000ms | Physics | Milestone | - ---- - -## Changelog - -| Date | Version | Change | -|------|---------|--------| -| 2025-12-30 | 1.0 | Initial mockup creation | -| 2025-12-30 | 2.0 | Enhanced with 2025 patterns: Savings goals with progress rings, Gamification (streaks, badges, challenges), Auto-save rules (round-ups, scheduled, smart), Interest visualization, Savings calculator, Quick deposits, Challenge system | - ---- - -## Data Binding Reference - -> **For `/implement` command**: Maps UI components to API.md sections. -> **Source of Truth**: See `API.md` for complete endpoint details. - -### Screen → API.md Mapping - -| Screen | API.md Section | Key Fields | -|--------|----------------|------------| -| Account List | `Endpoints Required → 1. Savings Account Summary` | `savingsAccounts[]` from client accounts | -| Account Detail | `Endpoints Required → 2. Savings Account Details` | `summary`, `accountNo`, `status`, `timeline` | -| Transactions | `Endpoints Required → 3. Savings Transactions` | `transactions[]` with associations | -| Transaction Detail | `Endpoints Required → 4. Savings Transaction Detail` | Full transaction object | -| Account Charges | `Endpoints Required → 9. Savings Account Charges` | `charges[]` | -| Update Account | `Endpoints Required → 6. Update Savings Account` | PUT request payload | -| Withdraw Application | `Endpoints Required → 7. Withdraw Application` | POST with command | - -### Client-Only Features - -| Feature | Storage | Notes | -|---------|---------|-------| -| Savings Goals / Pockets | DataStore | Not in Fineract API | -| Auto-save Rules | DataStore | Client-side automation | -| Savings Streak | DataStore | Gamification layer | -| Interest Calculator | Client-side | Projection calculation | - -### Actions → API.md Mapping - -| User Action | API.md Reference | Navigation | -|-------------|------------------|------------| -| Pull to Refresh | `2. Savings Account Details` | Reload with transactions | -| Tap Transaction | `4. Savings Transaction Detail` | → Transaction Detail | -| Update Account | `6. Update Savings Account` | Submit form | -| Withdraw Application | `7. Withdraw Application` | Confirmation flow | -| View Charges | `9. Savings Account Charges` | → Charges List | - -### Error Handling - -See `API.md → Error Responses` for complete error codes. diff --git a/claude-product-cycle/design-spec-layer/features/savings-account/SPEC.md b/claude-product-cycle/design-spec-layer/features/savings-account/SPEC.md deleted file mode 100644 index da4dd7280..000000000 --- a/claude-product-cycle/design-spec-layer/features/savings-account/SPEC.md +++ /dev/null @@ -1,494 +0,0 @@ -# Savings Account - Feature Specification - -> **Purpose**: Display, manage, update, and withdraw savings accounts -> **User Value**: Complete savings account management with balance visibility and transactions -> **Last Updated**: 2025-12-29 - ---- - -## 1. Overview - -### 1.1 Feature Summary -The Savings Account feature provides comprehensive management of user savings accounts. It includes a list view with filtering capabilities, detailed account information, product updates for pending accounts, and withdrawal functionality. Users can view balances, transaction history, charges, transfer funds, and generate QR codes for receiving payments. - -### 1.2 User Stories -- As a user, I want to see all my savings accounts so I can track my savings -- As a user, I want to filter accounts by status (Active, Pending, Closed, Inactive) to find specific accounts -- As a user, I want to see my total savings balance at a glance -- As a user, I want to view detailed information about each savings account -- As a user, I want to update the product for pending accounts -- As a user, I want to withdraw pending savings account applications -- As a user, I want to transfer funds from my savings account -- As a user, I want to view transaction history for my accounts -- As a user, I want to generate a QR code to receive payments - ---- - -## 2. Screen Layouts - -### 2.1 Savings Account List Screen - -``` -+------------------------------------------+ -| | -| +---------------------------------+ | -| | Savings Dashboard | | -| | [Total Amount] / [****] (o) | | <- Amount visibility toggle -| +---------------------------------+ | -| | -| Savings Account [n items] [=] | <- Filter icon -| ----------------------------------------| -| | -| +------------------------------------+ | -| | [icon] Account #12345 | | -| | Product Name | | -| | $1,234.56 / Active [>] | | <- Status color-coded -| +------------------------------------+ | -| | -| +------------------------------------+ | -| | [icon] Account #12346 | | -| | Savings Product | | -| | Pending Approval [>] | | <- Yellow for pending -| +------------------------------------+ | -| | -| +------------------------------------+ | -| | [icon] Account #12347 | | -| | Basic Savings | | -| | Closed [>] | | <- Default color for closed -| +------------------------------------+ | -| | -+------------------------------------------+ -``` - -### 2.2 Savings Account Details Screen - -``` -+------------------------------------------+ -| [<] Account Details | -+------------------------------------------+ -| Update | <- Enabled only for pending -+------------------------------------------+ -| | -| +----------------+ +----------------+ | -| | Account Number | | Avail. Balance | | -| | 000000012345 | | $1,234.56 | | -| +----------------+ +----------------+ | -| | -| +----------------+ +----------------+ | -| | Status | | Interest Rate | | -| | Active | | 5.5% | | -| +----------------+ +----------------+ | -| | -| +----------------+ +----------------+ | -| | Tot. Deposits | | Tot. Withdraws | | -| | $5,000.00 | | $3,765.44 | | -| +----------------+ +----------------+ | -| | -| Last Transactions | -| +----------------+ +----------------+ | -| | Amount | | Date | | -| | $100.00 | | Dec 28, 2025 | | -| +----------------+ +----------------+ | -| | -| Actions | -| +------------------+ | -| | Transfer | | -| | Send money | | -| +------------------+ | -| +------------------+ | -| | Transactions | | -| | View history | | -| +------------------+ | -| +------------------+ | -| | Charges | | -| | View fees | | -| +------------------+ | -| +------------------+ | -| | QR Code | | -| | Receive payment | | -| +------------------+ | -| | -| ---------------[ Powered by Mifos ]-----| -+------------------------------------------+ -``` - -### 2.3 Account Update Screen - -``` -+------------------------------------------+ -| [<] Update Account | -+------------------------------------------+ -| | -| +------------------------------------+ | -| | Client Name | | -| | John Doe | | -| +------------------------------------+ | -| | Submission Date | | -| | Dec 15, 2025 | | -| +------------------------------------+ | -| | Account Number | | -| | 000000012345 | | -| +------------------------------------+ | -| | Product | | -| | Basic Savings | | -| +------------------------------------+ | -| | -| Product | -| +------------------------------------+ | -| | Select new product [v] | | <- Dropdown -| +------------------------------------+ | -| | -| +------------------------------------+ | -| | Submit New Product | | <- Disabled until product selected -| +------------------------------------+ | -| | -| ---------------[ Powered by Mifos ]-----| -+------------------------------------------+ -``` - -### 2.4 Account Withdraw Screen - -``` -+------------------------------------------+ -| [<] Withdraw Account | -+------------------------------------------+ -| | -| +------------------------------------+ | -| | Client Name | | -| | John Doe | | -| +------------------------------------+ | -| | Submission Date | | -| | Dec 15, 2025 | | -| +------------------------------------+ | -| | Account Number | | -| | 000000012345 | | -| +------------------------------------+ | -| | Product | | -| | Basic Savings | | -| +------------------------------------+ | -| | -| Remarks | -| +------------------------------------+ | -| | | | -| | [Enter withdrawal reason...] | | -| | | | -| +------------------------------------+ | -| | -| +------------------------------------+ | -| | Request Withdrawal | | <- Disabled until remarks entered -| +------------------------------------+ | -| | -| ---------------[ Powered by Mifos ]-----| -+------------------------------------------+ -``` - -### 2.5 Sections Table - -| # | Screen | Section | Description | API | Priority | -|---|--------|---------|-------------|-----|----------| -| 1 | List | Dashboard Card | Total savings balance | clients/{id}/accounts | P0 | -| 2 | List | Filter Bar | Account count + filter icon | - | P1 | -| 3 | List | Account Cards | List of savings accounts | clients/{id}/accounts | P0 | -| 4 | Details | Action Bar | Update button (conditional) | - | P1 | -| 5 | Details | Info Grid | Account metadata | savingsaccounts/{id} | P0 | -| 6 | Details | Transaction Summary | Last transaction | savingsaccounts/{id}?associations=transactions | P1 | -| 7 | Details | Actions | Transfer, Transactions, Charges, QR | - | P0 | -| 8 | Update | Details Card | Account info display | - | P0 | -| 9 | Update | Product Dropdown | Product selection | savingsaccounts/template | P0 | -| 10 | Withdraw | Details Card | Account info display | - | P0 | -| 11 | Withdraw | Remarks Input | Withdrawal reason | - | P0 | - ---- - -## 3. User Interactions - -| Action | Screen | Trigger | Result | API Call | -|--------|--------|---------|--------|----------| -| Toggle balance visibility | List | Tap eye icon | Show/hide amounts | - | -| Filter accounts | List | Tap filter icon | Show filter options | - | -| Tap account card | List | Click card | Navigate to details | - | -| Pull refresh | List | Swipe down | Reload accounts | clients/{id}/accounts | -| Retry on error | List | Tap retry button | Reload data | clients/{id}/accounts | -| Navigate back | All | Tap back arrow | Go to previous screen | - | -| Tap Update | Details | Click Update text | Navigate to update screen | - | -| Tap Transfer | Details | Click action card | Navigate to transfer | - | -| Tap Transactions | Details | Click action card | Navigate to transactions | - | -| Tap Charges | Details | Click action card | Navigate to charges | - | -| Tap QR Code | Details | Click action card | Navigate to QR screen | - | -| Select product | Update | Choose from dropdown | Update selection | - | -| Submit update | Update | Tap submit button | Authenticate then update | PUT savingsaccounts/{id} | -| Enter remarks | Withdraw | Type in text field | Enable submit button | - | -| Submit withdraw | Withdraw | Tap submit button | Authenticate then withdraw | POST savingsaccounts/{id}?command=withdrawnByApplicant | - ---- - -## 4. State Models - -### 4.1 Savings Account List State - -```kotlin -data class SavingsAccountState( - val savingsAccount: List?, - val originalAccounts: List? = null, - val firstLaunch: Boolean = true, - val items: Int? = 0, - val totalSavingAmount: String? = "", - val currency: String? = "", - val decimals: Int? = 2, - val networkConnection: Boolean? = true, - val clientId: Long?, - val dialogState: DialogState?, - val selectedFilters: List = emptyList(), - val isAmountVisible: Boolean = false, - val isFilteredEmpty: Boolean = false, - val uiState: ScreenUiState? = ScreenUiState.Loading, - val networkStatus: Boolean = false, - val statusOrder: List = listOf( - SavingStatus.ACTIVE.status, - SavingStatus.SUBMIT_AND_PENDING_APPROVAL.status, - SavingStatus.CLOSED.status, - SavingStatus.INACTIVE.status, - ), -) { - sealed interface DialogState { - data class Error(val message: String) : DialogState - } -} - -sealed interface SavingsAccountAction { - data object OnFirstLaunched : SavingsAccountAction - data object OnRetry : SavingsAccountAction - data object OnDismissDialog : SavingsAccountAction - data object OnNavigateBack : SavingsAccountAction - data object ToggleAmountVisible : SavingsAccountAction - data class ReceiveNetworkStatus(val isOnline: Boolean) : SavingsAccountAction - data class LoadAccounts(val filters: List) : SavingsAccountAction - data class OnAccountClicked(val accountId: Long, val accountType: String) : SavingsAccountAction - - sealed interface Internal : SavingsAccountAction { - data class ReceiveSavingsAccounts( - val filters: List, - val dataState: DataState, - ) : SavingsAccountAction - } -} - -sealed interface SavingsAccountsEvent { - data class AccountClicked(val accountId: Long, val accountType: String) : SavingsAccountsEvent - data object LoadingCompleted : SavingsAccountsEvent - data object NavigateBack : SavingsAccountsEvent -} -``` - -### 4.2 Savings Account Details State - -```kotlin -@Immutable -data class SavingsAccountDetailsState( - val accountId: Long = -1L, - val clientName: String? = "", - val submissionDate: String? = "", - val accountNumber: String? = "", - val product: String? = "", - val displayItems: List = emptyList(), - val transactionList: List = emptyList(), - val savingStatus: SavingStatus? = null, - val isActive: Boolean = false, - val items: ImmutableList, - val isUpdatable: Boolean = false, - val dialogState: DialogState? = null, - val networkStatus: Boolean = false, - val uiState: ScreenUiState? = ScreenUiState.Loading, -) { - sealed interface DialogState { - data class Error(val message: String) : DialogState - } -} - -val SavingStatus.allowedActions: Set - get() = when (this) { - SavingStatus.ACTIVE -> setOf(Transactions, Charges, QrCode, Transfer) - SavingStatus.INACTIVE -> setOf(Transfer, QrCode) - SavingStatus.CLOSED -> setOf(QrCode, Transfer, Transactions) - SavingStatus.SUBMIT_AND_PENDING_APPROVAL -> setOf(QrCode) - } -``` - -### 4.3 Account Update State - -```kotlin -data class AccountUpdateState( - val clientId: Long?, - val accountId: Long?, - val details: Map = emptyMap(), - val productOptions: Map = emptyMap(), - val selectedProductId: Long? = null, - val selectedProduct: String = "", - val dialogState: DialogState? = null, - val networkStatus: Boolean = false, - val uiState: ScreenUiState? = ScreenUiState.Success, - val showOverlay: Boolean = false, -) { - sealed interface DialogState { - data class Error(val message: String) : DialogState - } -} - -sealed interface AccountUpdateAction { - data object OnNavigateBack : AccountUpdateAction - data object RequestUpdate : AccountUpdateAction - data object DismissDialog : AccountUpdateAction - data class ReceiveNetworkStatus(val isOnline: Boolean) : AccountUpdateAction - data object Retry : AccountUpdateAction - data class OnProductSelected(val id: Long, val product: String) : AccountUpdateAction - - sealed interface Internal : AccountUpdateAction { - data class ReceiveProducts(val dataState: DataState) : Internal - data class ReceiveUpdateRequestResult(val dataState: DataState) : Internal - data class ReceiveAuthenticationResult(val result: Boolean) : Internal - data object PerformUpdate : Internal - } -} -``` - -### 4.4 Account Withdraw State - -```kotlin -data class AccountWithdrawState( - val accountId: Long?, - val details: Map = emptyMap(), - val remark: String = "", - val dialogState: DialogState?, -) { - sealed interface DialogState { - data class Error(val message: String) : DialogState - data object Loading : DialogState - } -} - -sealed interface AccountWithdrawAction { - data object OnNavigateBack : AccountWithdrawAction - data object RequestWithdraw : AccountWithdrawAction - data class RemarkChange(val remark: String) : AccountWithdrawAction - data object DismissDialog : AccountWithdrawAction - - sealed interface Internal : AccountWithdrawAction { - data class ReceiveWithdrawRequestResult(val dataState: DataState) : Internal - data class ReceiveAuthenticationResult(val result: Boolean) : Internal - data object PerformWithdraw : Internal - } -} -``` - ---- - -## 5. API Requirements - -| Endpoint | Method | Purpose | Status | -|----------|--------|---------|--------| -| `/self/clients/{clientId}/accounts` | GET | Get all client accounts | Implemented | -| `/self/savingsaccounts/{accountId}` | GET | Get savings account details | Implemented | -| `/self/savingsaccounts/{accountId}?associations=transactions` | GET | Get account with transactions | Implemented | -| `/self/savingsaccounts/{accountId}/transactions/{transactionId}` | GET | Get transaction details | Implemented | -| `/self/savingsaccounts/template?clientId={id}` | GET | Get savings product options | Implemented | -| `/self/savingsaccounts/template?clientId={id}&productId={id}` | GET | Get template by product | Implemented | -| `/self/savingsaccounts/{accountId}` | PUT | Update savings account | Implemented | -| `/self/savingsaccounts/{savingsId}?command=withdrawnByApplicant` | POST | Withdraw account application | Implemented | -| `/self/accounttransfers/template` | GET | Get transfer template | Implemented | -| `/self/accounttransfers` | POST | Make transfer | Implemented | - ---- - -## 6. Edge Cases & Error Handling - -| Scenario | Screen | Behavior | UI Feedback | -|----------|--------|----------|-------------| -| No internet | All | Show network state | "No internet connection" + retry | -| No accounts | List | Show empty state | "No savings accounts" message | -| Filter returns empty | List | Show filtered empty | "No accounts found" | -| API error | All | Show error state | Error message + retry button | -| Inactive account | Details | Limited actions | Only QR/Transfer available | -| Closed account | Details | Limited actions | Only QR/Transfer/Transactions | -| Pending account | Details | Enable update | Update button active | -| Empty product options | Update | Show empty state | "No products available" | -| Authentication failed | Update/Withdraw | Cancel operation | Return to form | -| Update failed | Update | Navigate to status | Failure screen with retry | -| Withdraw failed | Withdraw | Navigate to status | Failure screen with retry | -| Empty remarks | Withdraw | Disable submit | Button disabled | - ---- - -## 7. Components - -| Component | Props | Reusable? | Location | -|-----------|-------|-----------|----------| -| MifosDashboardCard | savingsAmount, isVisible, currency, onToggle | Yes | core/ui | -| MifosAccountCard | accountId, accountNo, accountType, status, statusColor, onClick | Yes | core/ui | -| MifosLabelValueCard | label, value, color | Yes | core/ui | -| MifosActionCard | title, subTitle, icon, onClick | Yes | core/ui | -| MifosDetailsCard | keyValuePairs | Yes | core/ui | -| MifosOutlineDropdown | selectedText, items, onItemSelected, label | Yes | core/ui | -| MifosProgressIndicator | - | Yes | core/designsystem | -| MifosProgressIndicatorOverlay | - | Yes | core/ui | -| MifosErrorComponent | message, isRetryEnabled, onRetry, isNetworkConnected | Yes | core/ui | -| EmptyDataView | icon, error | Yes | core/ui | -| SavingsActionItems | title, subTitle, icon, route | No | feature/savings-account | - ---- - -## 8. Navigation - -### 8.1 Navigation Graph - -``` -SavingsGraphRoute - | - +-- SavingsAccountRoute (List) - | | - | +-- SavingsAccountDetailsRoute (Details) - | | - | +-- SavingsAccountUpdateRoute (Update) - | +-- SavingsAccountWithdrawRoute (Withdraw) - | +-- [External] TransferScreen - | +-- [External] TransactionsScreen - | +-- [External] ChargesScreen - | +-- [External] QrCodeScreen -``` - -### 8.2 Route Definitions - -```kotlin -@Serializable -data object SavingsAccountRoute - -@Serializable -data class SavingsAccountDetailsRoute(val accountId: Long) - -@Serializable -data class SavingsAccountUpdateRoute( - val accountId: Long, - val accountNumber: String?, - val clientName: String?, - val submissionData: String?, - val product: String?, -) -``` - ---- - -## 9. Account Status Logic - -| Status | Display Color | Allowed Actions | Update Enabled | -|--------|---------------|-----------------|----------------| -| Active | Green | Transfer, Transactions, Charges, QR Code | No | -| Submitted and pending approval | Yellow | QR Code | Yes | -| Inactive | Red | Transfer, QR Code | No | -| Closed | Default | Transfer, Transactions, QR Code | No | - ---- - -## Changelog - -| Date | Change | -|------|--------| -| 2025-12-29 | Initial specification based on implementation | diff --git a/claude-product-cycle/design-spec-layer/features/savings-account/STATUS.md b/claude-product-cycle/design-spec-layer/features/savings-account/STATUS.md deleted file mode 100644 index 79de4fe88..000000000 --- a/claude-product-cycle/design-spec-layer/features/savings-account/STATUS.md +++ /dev/null @@ -1,72 +0,0 @@ -# Savings Account - Implementation Status - -> **Last Updated**: 2025-12-29 -> **Overall Status**: ✅ Done - ---- - -## Implementation Checklist - -- [x] SPEC.md created -- [x] API.md created -- [x] Network: Services exist (SavingAccountsListService) -- [x] Data: Repository exists (SavingsAccountRepository) -- [x] Feature: ViewModels + Screens -- [x] Navigation: Routes registered -- [x] DI: Modules registered -- [x] STATUS.md updated - ---- - -## Layer Status - -| Layer | Status | Files | -|-------|--------|-------| -| Network | ✅ | SavingAccountsListService.kt | -| Data | ✅ | SavingsAccountRepository.kt, SavingsAccountRepositoryImp.kt | -| Feature | ✅ | SavingsAccountViewmodel.kt, SavingsAccountScreen.kt, SavingsAccountDetailsViewModel.kt, SavingsAccountDetailsScreen.kt, AccountWithdrawViewModel.kt, AccountWithdrawScreen.kt, AccountUpdateViewModel.kt, AccountUpdateScreen.kt | -| DI | ✅ | SavingsAccountModule.kt | -| Navigation | ✅ | SavingsNavigation.kt, SavingsAccountNavigation.kt, SavingsAccountDetailsNavigation.kt, AccountWithdrawNavigation.kt, AccountUpdateNavigation.kt | - ---- - -## Files - -### Network Layer -- `core/network/services/SavingAccountsListService.kt` - -### Data Layer -- `core/data/repository/SavingsAccountRepository.kt` -- `core/data/repositoryImpl/SavingsAccountRepositoryImp.kt` - -### Feature Layer -- `feature/savings-account/savingsAccount/SavingsAccountViewmodel.kt` -- `feature/savings-account/savingsAccount/SavingsAccountScreen.kt` -- `feature/savings-account/savingsAccount/SavingsAccountNavigation.kt` -- `feature/savings-account/savingsAccountDetails/SavingsAccountDetailsViewModel.kt` -- `feature/savings-account/savingsAccountDetails/SavingsAccountDetailsScreen.kt` -- `feature/savings-account/savingsAccountDetails/SavingsAccountDetailsNavigation.kt` -- `feature/savings-account/savingsAccountWithdraw/AccountWithdrawViewModel.kt` -- `feature/savings-account/savingsAccountWithdraw/AccountWithdrawScreen.kt` -- `feature/savings-account/savingsAccountWithdraw/AccountWithdrawNavigation.kt` -- `feature/savings-account/savingsAccountUpdate/AccountUpdateViewModel.kt` -- `feature/savings-account/savingsAccountUpdate/AccountUpdateScreen.kt` -- `feature/savings-account/savingsAccountUpdate/AccountUpdateNavigation.kt` -- `feature/savings-account/components/SavingsActionItems.kt` -- `feature/savings-account/navigation/SavingsNavigation.kt` -- `feature/savings-account/di/SavingsAccountModule.kt` -- `feature/savings-account/utils/FilterUtil.kt` - ---- - -## Gaps - -None identified. - ---- - -## Changelog - -| Date | Change | -|------|--------| -| 2025-12-29 | Initial status documentation | diff --git a/claude-product-cycle/design-spec-layer/features/savings-account/mockups/PROMPTS_FIGMA.md b/claude-product-cycle/design-spec-layer/features/savings-account/mockups/PROMPTS_FIGMA.md deleted file mode 100644 index da2b134f2..000000000 --- a/claude-product-cycle/design-spec-layer/features/savings-account/mockups/PROMPTS_FIGMA.md +++ /dev/null @@ -1,330 +0,0 @@ -# Savings Account - Figma First Draft Prompts - -> **Tool**: Figma First Draft (Shift+I in Figma) -> **Style**: Gamified Savings Fintech, Material Design 3 -> **Format**: Natural language prompts optimized for Figma AI - ---- - -## How to Use - -1. Open Figma -> Create new design file -2. Press `Shift + I` or click "Actions" -> "First Draft" -3. Copy each prompt below -4. Generate -> Iterate -> Refine - ---- - -## Screen 1: Savings Dashboard - -``` -Design a modern mobile savings dashboard for a fintech banking app that gamifies the savings experience. - -At the top, show a back arrow with "Savings" as the title and settings/notification icons on the right. - -Create a stunning hero card with a teal-to-green gradient background (#11998E to #38EF7D). Display "TOTAL SAVINGS" as a small label with an eye icon to toggle visibility. Show "$52,500.00" in large white bold text centered. Add two stat chips: "+$1,250.00 This Month" and "$127.50 Interest Earned". Include a motivational streak banner with a fire emoji: "12-day streak! Save today to keep it going". - -Add a Quick Deposit section with 5 pill-shaped buttons in a row: $10, $25, $50, $100, and Custom. Each should have a plus icon. - -Create a "Your Goals" section with horizontally scrolling goal cards. Each card should be about 140px wide with a circular progress ring showing an emoji in the center (beach umbrella, car, shield). Display the goal name, progress percentage, amount "$7,200 / $10K", and a quick "+ Add $50" button. - -Add an Interest Earnings section with a "This Year" dropdown. Show "$892.50 total earned" prominently. Include a smooth area chart showing interest growth over months. Add an AI insight card: "At your current rate, you'll earn ~$1,100 by EOY". - -Create an Auto-Save Rules section showing cards with toggle switches. Show Round-up Savings (ON) with "$45.30 saved this month", Weekly Transfer (ON) with "$50 every Friday", and Smart Save (OFF) with an "Enable" button. - -Add an Achievements row with horizontal scrolling badges. Show earned badges with golden glow (fire streak, $50K saved), progress badges at 75% in grayscale with progress ring, and locked badges with question marks. - -Show My Accounts section with 3 account cards: Primary Savings ($35,000, Active, 4.5% APY), Emergency Fund ($17,500, 88% to goal progress bar), and Holiday Savings (Pending approval, amber status). - -Style it like Acorns or Revolut - clean, gamified, with green accent colors for savings. -``` - ---- - -## Screen 2: Savings Account Detail - -``` -Design a savings account detail screen for a banking app with comprehensive account information. - -Show a back arrow with "Primary Savings" title and a menu icon. - -Create a hero card with green gradient showing "Account ****4521" with an Active status pill. Display "$35,000.00" as the large centered balance with "Available Balance" label below. Add three stat chips: "4.5% APY", "$127.50 Interest", "+$450 This Mo". - -Add a Quick Actions grid with 8 circular icon buttons arranged in 2 rows of 4. First row: Transfer, Deposit, History, QR Code. Second row: Set Goal, Charges, Lock, Calculator. Each should have a light teal background with the icon and label below. - -Create an Interest Projection card showing current balance, monthly deposit amount, interest rate, and projections for 1 year ($42,575) and 5 years ($66,890). Add a "Calculate Custom Projection" button. - -Add a Balance History section with a line chart showing the last 6 months. Include a dropdown for time period selection. Show a smooth curve with gradient fill below and legend for Deposits, Withdrawals, and Interest. - -Display Account Details in a clean grid format with dividers between each row. Show account number, product name, interest rate, posting frequency, total deposits, withdrawals, interest earned YTD, minimum balance, and opened date. - -Create a Recent Transactions section grouped by date (Today, Yesterday, Dec 28) showing transaction items with icons, descriptions, times, and amounts in green for credits. -``` - ---- - -## Screen 3: Create Savings Goal - -``` -Design a goal creation screen for a savings app with smart suggestions. - -Show a back arrow with "Create Goal" title. - -Add a centered prompt "What are you saving for?" followed by a "Popular Goals" section with 8 emoji buttons in a 2x4 grid: Vacation (beach), Car, House, Wedding, Emergency (shield), Education (graduation cap), Gadget (phone), and Other (sparkle). - -Create a Goal Name input field with placeholder text "Dream Vacation to Bali". - -Add a Target Amount section with a large centered editable amount "$10,000" and quick selection chips below: $1K, $5K, $10K (selected with highlight), $25K, Custom. - -Show a Target Date picker dropdown showing "August 2025". - -Create a calculation section "To Reach Your Goal" showing "You need to save approximately: $1,250 / month or $289 / week". Add an AI suggestion card with gradient border: "Based on your income, $800/mo is more sustainable. Consider extending to Nov 2025." - -Add an Auto-Save configuration section with a checkbox for "Enable automatic savings", amount input ($250), frequency chips (Weekly, Bi-weekly, Monthly, Custom), and account selector dropdown. - -Include a full-width gradient button at the bottom: "Create Goal". -``` - ---- - -## Screen 4: Goal Detail View - -``` -Design a goal progress detail screen with visual milestones and savings activity. - -Show a back arrow with "Vacation Fund" title and Edit/menu buttons. - -Create a large centered progress visualization with a 120px progress ring showing a beach emoji inside, "72%" as the percentage, and "$7,200 of $10,000" below. Add motivational text with fire emoji: "On track! Keep it up!" - -Show a stats row with "$2,800 left to go" header and two info boxes: "Est. Complete: Aug 2025" and "Auto-saving: $250/week". - -Add two action buttons side by side: "+ Add Money" as a gradient filled button and "Withdraw" as an outlined button. - -Create a Savings Progress chart showing actual progress as a solid line and projected progress as a dashed line. Mark the current day with "Today" label. Show months on the x-axis. - -Add a Milestones timeline as a vertical list with icons. Show completed milestones (Started Goal, 25% Complete, 50% Complete) with green checkmarks and dates. Show current milestone (75% Complete) half-filled with estimated date. Show target milestone (Goal Complete) empty with target emoji. - -Display Savings Activity section with recent transactions: auto-saves, quick deposits, with dates and amounts. -``` - ---- - -## Screen 5: Savings Challenges - -``` -Design a gamified savings challenges screen with active, completed, and available challenges. - -Show a back arrow with "Savings Challenges" title. - -Add a tab bar with three options: Active (selected), Completed, Available. - -Create a highlighted challenge card with gradient border showing "No-Spend Weekend" with a fire emoji. Display challenge description, 70% progress bar, time remaining "1 day 8 hours", and reward "+$25 bonus to savings". - -Add a 52-Week Savings Challenge card showing the classic challenge pattern. Display "Week 45 of 52", 87% progress bar, "This week: Save $45", total saved "$990 / $1,378", and a "Save $45 Now" button. - -Show a Coffee Jar Challenge card with a coffee emoji. Display "$175 / $500 goal", 35% progress, "35 coffees skipped!", and a "+ Log Skipped Coffee" button. - -Add an Available Challenges section with cards for "30-Day Savings Streak" and "Round-up Master" challenges, each with a "Start" button. - -Make it feel fun and motivating with playful colors and clear progress indicators. -``` - ---- - -## Screen 6: Quick Deposit Flow - -``` -Design a quick deposit screen for transferring money to savings. - -Show a back arrow with "Deposit" title. - -Create a "To" account selector showing a wallet icon with 4.5% APY badge, "Primary Savings ****4521", and current balance with a dropdown chevron. - -Add a large centered amount input showing "$500.00" with quick amount chips below: $25, $50, $100, $250, $500 (selected). - -Show a "From" account selector with bank icon, "Checking Account ****7890", and available balance with dropdown. - -Add an optional "Add to Goal" section with selectable goal chips showing emojis (Vacation selected, Car, Emergency). Display helper text: "This deposit counts toward your Vacation Fund goal". - -Create a summary card showing Amount, To account, From account, and Goal assignment. - -Add a full-width gradient button: "Deposit $500.00". -``` - ---- - -## Screen 7: Auto-Save Rules - -``` -Design an auto-save rules management screen with toggles and statistics. - -Show a back arrow with "Auto-Save Rules" title and "+ Add Rule" button. - -Add an info banner with lightbulb icon explaining how auto-save works. - -Create a highlighted Round-up Savings card with gradient border and ON toggle. Show description "Round every purchase to the nearest $1 and save the difference". Display statistics: "$45.30 saved this month from 87 transactions" and "$523.45 all time from 1,247 transactions". Add a multiplier selector (1x, 2x, 3x, 5x) and Edit/Pause buttons. - -Show Weekly Transfer card with ON toggle, "$50 every Friday to Vacation Fund", next transfer date, and total transferred. - -Add Payday Savings card with ON toggle showing "Save 10% of every deposit over $1,000" to Emergency Fund with last triggered date and total saved. - -Create Smart Save (AI-Powered) card with OFF toggle, description of AI analysis, typical savings range, and "Enable" button. - -Add a Total Auto-Saved summary section showing This Month, This Year, and All Time totals. -``` - ---- - -## Screen 8: Interest Calculator - -``` -Design a savings interest calculator with projections and growth visualization. - -Show a back arrow with "Savings Calculator" title. - -Add intro text: "See how your savings can grow over time". - -Create input fields for Starting Amount ($35,000), Monthly Contribution ($500) with a slider from $0 to $2,000, and Interest Rate (4.5% APY). - -Add Time Period selector chips: 1 Year, 3 Years, 5 Years (selected), 10 Years, Custom. - -Create a prominent projection results card with gradient background showing "$71,890.50" as the large projected amount with "in 5 years" label. Include breakdown: Starting Amount, Total Contributions (60 deposits), Interest Earned, and Final Balance. - -Add a growth chart showing compound interest over time. Use stacked areas for Principal+Contributions and Interest. Label the x-axis with years. - -Include a call-to-action button: "Start Saving $500/month Now". - -Make it feel educational and motivating with clear visualizations. -``` - ---- - -## Screen 9: Loading State - -``` -Design a loading skeleton screen for the savings dashboard. - -Keep the header visible with "Savings" title. - -Create a hero card skeleton with gradient background shape but shimmer placeholders where the balance and stat chips would be. - -Show shimmer circles for the quick deposit buttons. - -Display goal card skeletons with circular progress ring placeholders. - -Add shimmer rectangles for the chart section. - -Show account card skeletons with shimmer for icon, text lines, and balance. - -The shimmer should have a subtle wave animation moving left to right. Use light gray gradients (#E1E4E8 to #F8F9FA). Stagger the animation start times for visual interest. -``` - ---- - -## Screen 10: Empty State - -``` -Design an empty state for when a user has no savings accounts. - -Keep the header and navigation visible. - -In the center, display a friendly piggy bank illustration floating gently with a subtle up-down animation. - -Show "Start Your Savings Journey" as a bold headline. - -Add descriptive text: "Every great fortune starts with a single deposit. Open your first savings account and watch your money grow!" - -Create a "Why Save With Us?" section with checkmarks listing benefits: Up to 4.5% APY, No minimum balance required, Smart auto-save rules, Goal tracking with rewards. - -Add a prominent gradient button: "Open Savings Account" and a "Learn About Savings" text link below. - -Make it feel encouraging and welcoming, not empty or broken. -``` - ---- - -## Component Prompts - -### Savings Goal Card -``` -Design a savings goal card component for a fintech app. - -Create a card about 140px wide and 180px tall with rounded corners. - -Add a circular progress ring (80px) at the top with a stroke showing progress percentage. Place an emoji in the center of the ring (like a beach umbrella for vacation). - -Show the percentage below the ring in bold text. - -Add the goal name in medium weight, with the saved amount / target below in smaller gray text. - -Include a small outlined button at the bottom: "+ Add $50". - -Show the default state, and a "completed" variant with a checkmark and celebration effects. -``` - -### Auto-Save Rule Card -``` -Design an auto-save rule card with toggle switch. - -Create a full-width card with rounded corners and subtle border. - -On the left, show an icon representing the rule type (refresh for round-up, calendar for scheduled). - -Add the rule title in medium weight and description in smaller gray text below. - -Include statistics in green text showing savings amount. - -Place a toggle switch on the right side. When ON, add a subtle gradient border. When OFF, show standard gray border. - -Add Edit and Pause text buttons at the bottom. -``` - -### Achievement Badge -``` -Design an achievement badge for a gamified savings app. - -Create three variants: - -1. Earned: Full color badge with emoji (fire, trophy, target) inside a 48px circle. Add a golden glow effect. Show the achievement name below. - -2. In Progress: Grayscale badge with a circular progress ring overlay showing percentage. Semi-transparent appearance. - -3. Locked: Fully grayscale badge with a lock icon overlay and "???" as the name. - -Add a tap interaction that reveals unlock requirements for locked badges. -``` - -### Interest Earnings Chart -``` -Design an interest earnings area chart for a savings dashboard. - -Create a chart about 160px tall with full width. - -Draw a smooth curved line with the savings green gradient color. Fill below the line with a semi-transparent gradient (30% opacity). - -Show data points as small circles that appear on touch/hover. - -Add month labels on the x-axis and dollar amounts on the y-axis. - -Animate the line drawing from left to right when the section appears. -``` - ---- - -## Tips for Figma First Draft - -1. **Iterate**: Generate once, then refine with follow-up prompts -2. **Colors**: Use "#11998E to #38EF7D" for savings green gradient -3. **Reference**: Say "like Acorns" or "Revolut savings style" for context -4. **Gamification**: Emphasize streaks, badges, and progress rings -5. **Responsive**: Mention "393px width for mobile" for correct sizing - ---- - -## After Generation - -1. Review generated designs for consistency -2. Create a color style library -3. Build component variants -4. Link screens with prototype connections -5. Export and update `FIGMA_LINKS.md` diff --git a/claude-product-cycle/design-spec-layer/features/savings-account/mockups/PROMPTS_STITCH.md b/claude-product-cycle/design-spec-layer/features/savings-account/mockups/PROMPTS_STITCH.md deleted file mode 100644 index 75908392e..000000000 --- a/claude-product-cycle/design-spec-layer/features/savings-account/mockups/PROMPTS_STITCH.md +++ /dev/null @@ -1,537 +0,0 @@ -# Savings Account - Google Stitch Prompts - -> **Tool**: [Google Stitch](https://stitch.withgoogle.com) -> **Style**: Material Design 3, Gamified Savings Fintech -> **Format**: Copy each prompt block directly into Stitch - ---- - -## Design System Reference - -``` -Primary Gradient: #667EEA -> #764BA2 -Secondary Gradient: #11998E -> #38EF7D (Savings Green) -Success/Credit: #00D09C -Error/Debit: #FF4757 -Warning: #FFB800 -Text Primary: #1F2937 -Text Secondary: #6B7280 -Surface: #FFFFFF -Screen Size: 393 x 852 pixels (Android) -``` - ---- - -## Screen 1: Savings Dashboard - -``` -Mobile savings dashboard screen, Material Design 3, gamified fintech app, 393x852px - -Top Bar: -- Back arrow, "Savings" title -- Settings and notification icons right - -Hero Card (Secondary Gradient): -- Full width, gradient #11998E to #38EF7D, 24dp radius -- "TOTAL SAVINGS" label white 12sp + eye toggle -- "$52,500.00" balance 36sp white ExtraBold centered -- Two stat chips: "+$1,250.00 This Month" green, "$127.50 Interest Earned" gold -- Fire emoji "12-day streak! Save today to keep it going" banner - -Quick Deposit Section: -- "QUICK DEPOSIT" header -- 5 pill buttons row: $10, $25, $50, $100, Custom -- Each with + icon - -Goals Carousel: -- "YOUR GOALS" header + "See All >" link -- Horizontal scroll cards 140dp width -- Each card: progress ring 80dp with emoji center, percentage inside -- Goal name, amount "$7,200 / $10K", quick add button -- Cards: Vacation Fund 72%, New Car 45%, Emergency 88% - -Interest Earnings Section: -- "INTEREST EARNINGS" header + "This Year" dropdown -- "$892.50 total earned" prominent -- Area chart 160dp height, gradient fill -- AI insight card: "At your current rate, you'll earn ~$1,100 by EOY" - -Auto-Save Rules Section: -- "AUTO-SAVE RULES" header -- Rule cards with toggle switches -- Round-up Savings [ON]: "Saved $45.30 this month" -- Weekly Transfer [ON]: "$50 every Friday -> Vacation Fund" -- Smart Save [OFF]: AI-powered, "Enable ->" -- "+ Add New Rule" button - -Achievements Row: -- "ACHIEVEMENTS" header + "View All >" -- Horizontal badge row: fire 12day, $50K saved, Goal Master, First $1K, Year Saver, Locked ??? -- States: EARNED (full color glow), 75% (grayscale + ring), LOCKED (grayscale) - -My Accounts Section: -- "MY ACCOUNTS" header with count "3 accounts" -- Account cards white 20dp radius -- Primary Savings: wallet icon 4.5% badge, ****4521, $35,000.00, "+$450 this month" -- Emergency Fund: shield icon 3.2%, $17,500.00, progress bar 88% to goal -- Holiday Savings: pending status, amber badge, "Awaiting Approval" - -Bottom Navigation: -- 64dp height: Home, Accounts, FAB Transfer, Profile -``` - ---- - -## Screen 2: Savings Account Detail - -``` -Mobile savings account detail screen, Material Design 3, fintech app, 393x852px - -Top Bar: -- Back arrow, "Primary Savings" title, menu icon - -Hero Card (Secondary Gradient): -- "Account ****4521" with green Active pill -- "$35,000.00" balance 36sp centered, "Available Balance" label -- Three stat chips: "4.5% APY", "$127.50 Interest", "+$450 This Mo" - -Quick Actions Grid: -- 8 action buttons, 2 rows of 4 -- Row 1: Transfer, Deposit, History, QR Code -- Row 2: Set Goal, Charges, Lock, Calculator -- Each 56dp icon containers with labels below - -Interest Projection Card: -- "INTEREST PROJECTION" header -- Current Balance $35,000.00 -- Monthly Deposit +$500.00 -- Interest Rate 4.5% APY -- Divider -- In 1 Year: $42,575.00 (+$7,575) -- In 5 Years: $66,890.00 (+$31,890) -- "Calculate Custom Projection" gradient button - -Balance History Chart: -- "BALANCE HISTORY" header + "Last 6 Mo" dropdown -- Line chart 160dp, gradient fill below -- X-axis: Jul Aug Sep Oct Nov Dec -- Legend dots: Deposits, Withdrawals, Interest - -Account Details Grid: -- Key-value pairs with dividers -- Account Number: 000000004521 -- Product: Savings Plus -- Interest Rate: 4.5% per annum -- Interest Posting: Monthly -- Total Deposits: $42,500.00 -- Total Withdrawals: $7,500.00 -- Interest Earned (YTD): $127.50 -- Minimum Balance: $500.00 -- Opened On: Jan 15, 2024 - -Recent Transactions: -- "RECENT TRANSACTIONS" header + "See All >" -- Grouped by date -- Today: Interest Credit +$12.50 green -- Yesterday: Deposit +$500.00, Round-up +$3.45 -- Dec 28: Salary Credit +$4,500.00 -``` - ---- - -## Screen 3: Create Savings Goal - -``` -Mobile create goal screen, Material Design 3, fintech app, 393x852px - -Top Bar: -- Back arrow, "Create Goal" title - -Goal Type Selection: -- "What are you saving for?" centered prompt -- "POPULAR GOALS" section -- 8 emoji buttons grid 2x4: - - Vacation, Car, House, Wedding - - Emergency, Education, Gadget, Other - -Goal Name Input: -- "GOAL NAME" label -- Text input: "Dream Vacation to Bali" - -Target Amount Section: -- "TARGET AMOUNT" label -- Large centered "$10,000" editable -- Quick amount chips: $1K, $5K, $10K (selected), $25K, Custom - -Target Date: -- "TARGET DATE" label -- Date picker dropdown: "August 2025" - -Savings Calculation: -- "TO REACH YOUR GOAL" header -- "You need to save approximately:" -- "$1,250 / month" or "$289 / week" -- AI suggestion card gradient border: "Based on your income, $800/mo is more sustainable. Consider extending to Nov 2025." - -Auto-Save Configuration: -- "AUTO-SAVE" section -- Checkbox: "Enable automatic savings" -- Amount input: $250.00 -- Frequency chips: Weekly (selected), Bi-weekly, Monthly, Custom -- From Account dropdown: Primary Savings ****4521 - -Create Button: -- Full width gradient button "Create Goal" -``` - ---- - -## Screen 4: Goal Detail View - -``` -Mobile goal detail screen, Material Design 3, fintech app, 393x852px - -Top Bar: -- Back arrow, "Vacation Fund" title, Edit and menu buttons - -Hero Progress: -- Large centered progress ring 120dp -- Beach emoji inside, "72%" percentage -- "$7,200 of $10,000" below -- Fire emoji "On track! Keep it up!" - -Stats Row: -- "$2,800 left to go" header -- Two info boxes: "Est. Complete: Aug 2025", "Auto-saving: $250/week" - -Action Buttons: -- Two buttons: "+ Add Money" gradient, "Withdraw" outlined - -Savings Progress Chart: -- "SAVINGS PROGRESS" header -- Area chart showing actual vs projected -- Markers for milestones -- Legend: Actual (solid), Projected (dashed) - -Milestones Timeline: -- "MILESTONES" header -- Vertical timeline with checkmarks -- Started Goal - Mar 1, 2025 (checked) -- 25% Complete - Apr 15, 2025 (checked) -- 50% Complete - Jun 1, 2025 (checked) -- 75% Complete - Est. Jan 2025 (half filled, current) -- Goal Complete - Est. Aug 2025 (empty, target emoji) - -Savings Activity: -- "SAVINGS ACTIVITY" header + "See All >" -- Transaction list: -- Weekly auto-save +$250.00 Today -- Quick deposit +$100.00 Dec 28 -- Weekly auto-save +$250.00 Dec 27 -``` - ---- - -## Screen 5: Savings Challenges - -``` -Mobile savings challenges screen, Material Design 3, gamification, 393x852px - -Top Bar: -- Back arrow, "Savings Challenges" title - -Tab Bar: -- Three tabs: Active (selected), Completed, Available - -Active Challenges Section: -- "YOUR ACTIVE CHALLENGES" header - -Challenge Card 1 (Highlighted): -- Gradient border, fire emoji -- "NO-SPEND WEEKEND" -- "Don't spend anything this weekend!" -- Progress bar 70%, "1 day 8 hours remaining" -- "Reward: +$25 bonus to savings" - -Challenge Card 2: -- "52-WEEK SAVINGS CHALLENGE" -- "Save incrementally each week: $1, $2, $3..." -- "Week 45 of 52", progress bar 87% -- "This week: Save $45" -- "Total saved: $990 / $1,378" -- "Save $45 Now" button - -Challenge Card 3: -- Coffee emoji "COFFEE JAR CHALLENGE" -- "Save $5 every time you skip buying coffee" -- Progress bar 35%, "$175 / $500 goal" -- "35 coffees skipped!" -- "+ Log Skipped Coffee" button - -Available Challenges Section: -- "AVAILABLE CHALLENGES" header -- 30-Day Savings Streak card with "Start ->" button -- Round-up Master card with "Start ->" button -``` - ---- - -## Screen 6: Quick Deposit Flow - -``` -Mobile deposit screen, Material Design 3, fintech app, 393x852px - -Top Bar: -- Back arrow, "Deposit" title - -To Account Selector: -- "TO" label -- Account card: wallet icon 4.5% badge, Primary Savings ****4521 -- Balance: $35,000.00, dropdown indicator - -Amount Input: -- "AMOUNT" label -- Large centered "$500.00" editable -- Quick amount chips: $25, $50, $100, $250, $500 (selected) - -From Account Selector: -- "FROM" label -- Account card: bank icon, Checking Account ****7890 -- Available: $8,500.00, dropdown indicator - -Goal Assignment: -- "ADD TO GOAL (Optional)" label -- Three goal chips: Vacation (selected), Car, Emergency -- Info text: "This deposit counts toward your Vacation Fund goal" - -Summary Card: -- Amount: $500.00 -- To: Primary Savings ****21 -- From: Checking ****7890 -- Goal: Vacation Fund - -Deposit Button: -- Full width gradient button "Deposit $500.00" -``` - ---- - -## Screen 7: Auto-Save Rules - -``` -Mobile auto-save rules screen, Material Design 3, fintech app, 393x852px - -Top Bar: -- Back arrow, "Auto-Save Rules" title, "+ Add Rule" button - -Info Banner: -- Lightbulb icon -- "Auto-save helps you save without thinking about it. Set rules and watch your savings grow automatically!" - -Your Rules Section: -- "YOUR RULES" header - -Rule Card 1 (Highlighted, Gradient border): -- "ROUND-UP SAVINGS" with [ON] toggle -- "Round every purchase to the nearest $1 and save the difference" -- Stats box: "This Month: $45.30 saved from 87 transactions" -- Stats box: "All Time: $523.45 saved from 1,247 transactions" -- Multiplier selector: 1x (selected), 2x, 3x, 5x -- Edit and Pause buttons - -Rule Card 2: -- "WEEKLY TRANSFER" with [ON] toggle -- "$50.00 every Friday at 5:00 PM" -- "To: Vacation Fund" -- "Next transfer: Jan 3, 2025" -- "Total transferred: $2,350.00" -- Edit and Pause buttons - -Rule Card 3: -- "PAYDAY SAVINGS" with [ON] toggle -- "Save 10% of every deposit over $1,000" -- "To: Emergency Fund" -- "Last triggered: Dec 28 ($450 saved)" -- "Total saved: $2,700.00" - -Rule Card 4: -- "SMART SAVE (AI-Powered)" with [OFF] toggle -- "Let AI analyze your spending patterns and automatically save when you can afford it" -- "Typical savings: $100-300/month" -- "Enable ->" button - -Total Stats: -- "TOTAL AUTO-SAVED" header -- This Month: $545.30 -- This Year: $5,573.45 -- All Time: $12,847.90 -``` - ---- - -## Screen 8: Interest Calculator - -``` -Mobile savings calculator screen, Material Design 3, fintech app, 393x852px - -Top Bar: -- Back arrow, "Savings Calculator" title - -Info Text: -- "See how your savings can grow over time" - -Starting Amount Input: -- "STARTING AMOUNT" label -- Text input: $35,000 - -Monthly Contribution: -- "MONTHLY CONTRIBUTION" label -- Text input: $500 -- Slider: $0 to $2,000, thumb at $500 - -Interest Rate: -- "INTEREST RATE" label -- Text input: 4.5% APY - -Time Period Selector: -- "TIME PERIOD" label -- Chips: 1 Year, 3 Years, 5 Years (selected), 10 Years, Custom - -Projection Results (Gradient Card): -- "YOUR PROJECTION" header -- Large centered "$71,890.50" with "in 5 years" -- Breakdown box: - - Starting Amount: $35,000.00 - - Total Contributions: $30,000.00 (60 deposits) - - Interest Earned: $6,890.50 - - Divider - - Final Balance: $71,890.50 - -Growth Chart: -- Area chart showing compound growth -- Y-axis: $35K to $80K -- X-axis: Now, Y1, Y2, Y3, Y4, Y5 -- Legend: Principal + Contributions (solid), Interest (stacked) - -Start Saving Button: -- Full width gradient button "Start Saving $500/month Now" -``` - ---- - -## Screen 9: Loading State - -``` -Mobile savings loading skeleton, Material Design 3, 393x852px - -Top Bar: Same as success - -Hero Card Shimmer: -- Gradient card shape with shimmer overlay -- Balance placeholder 200dp centered -- Two stat chip placeholders - -Quick Deposit Shimmer: -- 5 circular button shimmers - -Goals Carousel Shimmer: -- 3 card shapes with progress ring shimmers - -Chart Shimmer: -- Rectangle shimmer for chart area - -Account Cards Shimmer: -- Shimmer card shapes with icon, text lines, balance - -Shimmer animation: left-to-right sweep, 1200ms infinite -Gradient: #E1E4E8 -> #F8F9FA -> #E1E4E8 -``` - ---- - -## Screen 10: Empty State - -``` -Mobile savings empty state, Material Design 3, 393x852px - -Top Bar: Same as success - -Center Content: -- Piggy bank illustration 160dp floating with up-down animation -- "Start Your Savings Journey" title 20sp bold -- "Every great fortune starts with a single deposit. Open your first savings account and watch your money grow!" subtitle centered - -Benefits Card: -- "WHY SAVE WITH US?" header -- Checklist items: - - Up to 4.5% APY on savings - - No minimum balance required - - Smart auto-save rules - - Goal tracking with rewards - -CTA: -- Full width gradient button "Open Savings Account" -- "Learn About Savings ->" text link below -``` - ---- - -## Components - -### Savings Goal Card -``` -Goal card component, Material Design 3: -- Width: 140dp, height: 180dp -- Corner radius: 16dp, padding: 12dp -- Progress ring 80dp diameter, 8dp stroke -- Emoji 32dp centered in ring -- Percentage 18sp bold below emoji -- Goal name 14sp SemiBold, max 2 lines -- Amount 12sp secondary color -- Quick add button 32dp height, outlined -``` - -### Auto-Save Rule Card -``` -Auto-save rule card, Material Design 3: -- Full width, auto height -- Padding: 16dp, corner radius: 12dp -- Icon 24dp left, title 16sp SemiBold -- Description 14sp secondary -- Stats 12sp success color -- Toggle switch right aligned -- ON state: secondary gradient border 1dp -- OFF state: standard border #E1E4E8 -``` - -### Achievement Badge -``` -Achievement badge component, Material Design 3: -- Size: 64dp x 80dp -- Icon container: 48dp circle -- Emoji: 28dp centered -- Label: 10sp below -- States: EARNED (full color + glow), PROGRESS (grayscale + ring), LOCKED (grayscale + lock) -- Tap reveals requirements -``` - -### Interest Chart -``` -Interest earnings chart, Material Design 3: -- Height: 160dp -- Line: 2dp stroke, secondary gradient -- Fill: gradient at 30% opacity -- Data points: 6dp circles on touch -- Axis labels: 10sp secondary -- Animation: path draws 800ms -``` - ---- - -## Quick Start - -1. Open [stitch.withgoogle.com](https://stitch.withgoogle.com) -2. Create project "Mifos Mobile - Savings Account" -3. Copy each screen prompt -> Generate -4. Generate components separately for reuse -5. Export all to Figma when done diff --git a/claude-product-cycle/design-spec-layer/features/savings-account/mockups/dummy/01-savings-detail.png b/claude-product-cycle/design-spec-layer/features/savings-account/mockups/dummy/01-savings-detail.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/savings-account/mockups/dummy/02-savings-transactions.png b/claude-product-cycle/design-spec-layer/features/savings-account/mockups/dummy/02-savings-transactions.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/savings-account/mockups/dummy/03-savings-statement.png b/claude-product-cycle/design-spec-layer/features/savings-account/mockups/dummy/03-savings-statement.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/savings-account/mockups/dummy/04-savings-qr-code.png b/claude-product-cycle/design-spec-layer/features/savings-account/mockups/dummy/04-savings-qr-code.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/savings-account/mockups/dummy/05-make-transfer.png b/claude-product-cycle/design-spec-layer/features/savings-account/mockups/dummy/05-make-transfer.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/savings-account/mockups/dummy/06-savings-empty.png b/claude-product-cycle/design-spec-layer/features/savings-account/mockups/dummy/06-savings-empty.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/settings/API.md b/claude-product-cycle/design-spec-layer/features/settings/API.md deleted file mode 100644 index 194c7dffb..000000000 --- a/claude-product-cycle/design-spec-layer/features/settings/API.md +++ /dev/null @@ -1,263 +0,0 @@ -# Settings - API Reference - -## Overview - -The Settings feature is **primarily local/offline**. Most operations (passcode, theme, language) are stored locally using DataStore and do not require API calls. Only password change and profile fetching require server communication. - -## Base URL -`https://tt.mifos.community/fineract-provider/api/v1/self/` - ---- - -## Endpoints Required - -### 1. Get Client Information - -**Endpoint**: `GET /clients/{clientId}` - -**Description**: Fetches client profile information for displaying on the settings screen - -**Headers**: -``` -Authorization: Basic {base64EncodedAuthenticationKey} -Fineract-Platform-TenantId: default -Content-Type: application/json -``` - -**Response**: -```json -{ - "id": 123, - "accountNo": "000000123", - "displayName": "John Doe", - "firstname": "John", - "lastname": "Doe", - "mobileNo": "1234567890", - "emailAddress": "john.doe@example.com", - "status": { - "id": 300, - "code": "clientStatusType.active", - "value": "Active" - } -} -``` - -**Kotlin DTO**: -```kotlin -@Serializable -data class Client( - val id: Long, - val accountNo: String?, - val displayName: String?, - val firstname: String?, - val lastname: String?, - val mobileNo: String?, - val emailAddress: String?, - val status: ClientStatus?, -) - -@Serializable -data class ClientStatus( - val id: Long, - val code: String?, - val value: String?, -) -``` - -**Status**: Implemented in HomeRepository - ---- - -### 2. Get Client Image - -**Endpoint**: `GET /clients/{clientId}/images` - -**Description**: Fetches the client's profile image as Base64 encoded string - -**Headers**: -``` -Authorization: Basic {base64EncodedAuthenticationKey} -Fineract-Platform-TenantId: default -Accept: text/plain -``` - -**Response**: -``` -data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA... -``` - -**Status**: Implemented in HomeRepository - ---- - -### 3. Update Account Password - -**Endpoint**: `PUT /user/password` - -**Description**: Updates the user's account password. After successful update, user is automatically logged out. - -**Headers**: -``` -Authorization: Basic {base64EncodedAuthenticationKey} -Fineract-Platform-TenantId: default -Content-Type: application/json -``` - -**Request**: -```json -{ - "newPassword": "newSecurePassword123!", - "confirmPassword": "newSecurePassword123!" -} -``` - -**Response (Success)**: -```json -{ - "message": "Password updated successfully" -} -``` - -**Response (Error)**: -```json -{ - "developerMessage": "The password does not match", - "httpStatusCode": "400", - "defaultUserMessage": "Password validation failed" -} -``` - -**Kotlin DTO**: -```kotlin -@Serializable -data class UpdatePasswordPayload( - val newPassword: String, - val confirmPassword: String, -) -``` - -**Status**: Implemented in UserAuthRepository - ---- - -## API Summary - -| Endpoint | Method | Service | Repository | Status | -|----------|--------|---------|------------|--------| -| /clients/{id} | GET | ClientService | HomeRepository | Implemented | -| /clients/{id}/images | GET | ClientService | HomeRepository | Implemented | -| /user/password | PUT | UserService | UserAuthRepository | Implemented | - ---- - -## Local Storage (No API Required) - -The following settings are stored locally and do not require API communication: - -### DataStore Keys (UserPreferences) - -| Setting | Storage Key | Type | Description | -|---------|-------------|------|-------------| -| Passcode | passcode | String | 4-digit app passcode (encrypted) | -| Theme | darkThemeConfig | Enum | FOLLOW_SYSTEM, DARK, LIGHT, BASED_ON_TIME | -| Time-Based Theme | timeBasedThemeConfig | Object | Start/end hours for dark mode | -| Language | language | Enum | LanguageConfig enum value | -| Client ID | clientId | Long | Cached client identifier | -| Auth Token | authToken | String | Authentication key | - -### Time-Based Theme Config - -```kotlin -@Serializable -data class TimeBasedTheme( - val hourStart: Int, // Dark mode start hour (0-23) - val timeStart: Int, // Dark mode start minute (0-59) - val hourEnd: Int, // Dark mode end hour (0-23) - val timeEnd: Int, // Dark mode end minute (0-59) -) -``` - -### Language Options - -```kotlin -enum class LanguageConfig(val languageCode: String, val languageName: String) { - ENGLISH("en", "English"), - HINDI("hi", "Hindi"), - SPANISH("es", "Spanish"), - FRENCH("fr", "French"), - ARABIC("ar", "Arabic"), - PORTUGUESE("pt", "Portuguese"), - BENGALI("bn", "Bengali"), - CHINESE("zh", "Chinese"), - INDONESIAN("id", "Indonesian"), - JAPANESE("ja", "Japanese"), - // ... more languages -} -``` - -### Theme Options - -```kotlin -enum class MifosThemeConfig { - FOLLOW_SYSTEM, // Follow OS dark mode setting - DARK, // Always dark mode - LIGHT, // Always light mode - BASED_ON_TIME // Dark mode during configured hours -} -``` - ---- - -## Error Responses - -| Status Code | Error | Description | -|-------------|-------|-------------| -| 400 | Bad Request | Invalid password format or mismatch | -| 401 | Unauthorized | Session expired, token invalid | -| 403 | Forbidden | Account locked or disabled | -| 404 | Not Found | Client ID not found | -| 500 | Server Error | Internal server error | - ---- - -## Security Considerations - -### Password Update -- Old password is validated client-side against stored value -- New password is sent to server for update -- Maximum 5 failed attempts before blocking -- Automatic logout after successful password change -- All sensitive data cleared from ViewModel on disposal - -### Passcode (Local Only) -- 4-digit numeric passcode stored locally -- Used for quick app authentication (not account auth) -- Validated against locally stored value -- Never sent to server - -### Logout -- Clears all local data from DataStore -- Clears authentication token -- Navigates to login screen -- Does not require API call - ---- - -## Platform Actions (No API Required) - -| Action | Platform | Implementation | -|--------|----------|----------------| -| Call Helpline | All | ShareUtils.callHelpline() | -| Email Support | All | ShareUtils.mailHelpline() | -| Rate App | Android | AppReviewManager.promptForReview() | -| Rate App | iOS | SKStoreReviewController | - ---- - -## FAQ Data (Local Resource) - -FAQ questions and answers are loaded from local string resources: -- `faq_qs` - String array of questions -- `faq_ans` - String array of corresponding answers - -No API call required for FAQ content. diff --git a/claude-product-cycle/design-spec-layer/features/settings/MOCKUP.md b/claude-product-cycle/design-spec-layer/features/settings/MOCKUP.md deleted file mode 100644 index 35e4392a3..000000000 --- a/claude-product-cycle/design-spec-layer/features/settings/MOCKUP.md +++ /dev/null @@ -1,1444 +0,0 @@ -# Settings - UI Mockups v2.0 - -> **Design Pattern**: Personal Command Center -> **Inspiration**: Revolut, N26, Monzo, Apple Settings -> **Gradient Theme**: #667EEA to #764BA2 (Purple-Blue Primary) -> **Version**: 2.0.0 -> **Last Updated**: 2025-12-30 - ---- - -## Design Philosophy - -### 2025 Personal Command Center Patterns - -| Pattern | Implementation | User Benefit | -|---------|----------------|--------------| -| **Financial Health Score** | Gamified security & profile metrics | Clear status at a glance | -| **Quick Actions Hub** | One-tap access to common actions | Faster task completion | -| **Security Assessment** | Visual security score with tips | Enhanced protection | -| **Smart Preferences** | AI-learned defaults | Personalized experience | -| **Connected Services** | Linked accounts dashboard | Unified management | -| **Data & Privacy Center** | Transparency dashboard | Trust & control | -| **Achievement System** | Profile milestones | Engagement & completion | -| **Account Health** | Proactive recommendations | Better financial habits | - ---- - -## Screen Inventory - -| # | Screen | Purpose | Key Features | -|---|--------|---------|--------------| -| 1 | Command Center Hub | Main settings with health score | Profile card, quick actions, security score | -| 2 | Profile Dashboard | Enhanced profile management | Completion progress, achievements, edit | -| 3 | Security Center | All security settings | Security score, biometrics, sessions | -| 4 | Privacy & Data | Data control center | Downloads, sharing, permissions | -| 5 | Appearance | Theme & display settings | Theme picker, accessibility | -| 6 | Notifications Hub | Smart notification preferences | Channels, schedules, priorities | -| 7 | Connected Services | Linked accounts | Bank connections, integrations | -| 8 | Account Health | Financial wellness tips | Recommendations, insights | -| 9 | Help & Support | Support center | FAQ, chat, contact | -| 10 | About & Legal | App information | Version, licenses, terms | - ---- - -## Screen Mockups - -### Screen 1: Command Center Hub (Main Settings) - -The central hub for all user preferences with quick actions and health scores. - -``` -┌─────────────────────────────────────────────────────────────┐ -│ ← Settings ⚙️ │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ░░│ │ -│ │░░ ┌────────┐ ░░│ │ -│ │░░ │ │ John Doe ░░│ │ -│ │░░ │ J D │ john.doe@email.com ░░│ │ -│ │░░ │ ✓ 96% │ ───────────────── ░░│ │ -│ │░░ └────────┘ ✅ Verified Account ░░│ │ -│ │░░ ░░│ │ -│ │░░ ┌─────────────────────────────────────────┐ ░░│ │ -│ │░░ │ Profile completion: 96% │ ░░│ │ -│ │░░ │ ████████████████████████████████░░░░ │ ░░│ │ -│ │░░ │ Add phone number to reach 100% → │ ░░│ │ -│ │░░ └─────────────────────────────────────────┘ ░░│ │ -│ │░░ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ QUICK ACTIONS │ -│ ───────────── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ │ -│ │ │ 🔒 │ │ 🌙 │ │ 🔔 │ │ 📊 │ │ │ -│ │ │ │ │ │ │ │ │ │ │ │ -│ │ │ Lock │ │ Dark │ │ Mute │ │ Export │ │ │ -│ │ │ App │ │ Mode │ │ Alerts │ │ Data │ │ │ -│ │ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ SECURITY HEALTH │ -│ ─────────────── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌───────────────────────────────────────────────┐ │ │ -│ │ │ │ │ │ -│ │ │ 🛡️ Security Score 88/100 │ │ │ -│ │ │ ████████████████████████████░░░░░ GOOD │ │ │ -│ │ │ │ │ │ -│ │ │ ✅ Passcode enabled │ │ │ -│ │ │ ✅ Biometrics active │ │ │ -│ │ │ ⚠️ Password last changed 90 days ago │ │ │ -│ │ │ ❌ 2FA not enabled │ │ │ -│ │ │ │ │ │ -│ │ │ ┌───────────────────────────────────────┐ │ │ │ -│ │ │ │ Improve Security → │ │ │ │ -│ │ │ └───────────────────────────────────────┘ │ │ │ -│ │ │ │ │ │ -│ │ └───────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ SETTINGS │ -│ ──────── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌────┐ │ │ -│ │ │ 👤 │ Profile & Account › │ │ -│ │ └────┘ Manage your personal information │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ ┌────┐ │ │ -│ │ │ 🔐 │ Security Center › │ │ -│ │ └────┘ Passcode, biometrics, sessions │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ ┌────┐ │ │ -│ │ │ 🎨 │ Appearance › │ │ -│ │ └────┘ Theme, display, accessibility │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ ┌────┐ │ │ -│ │ │ 🔔 │ Notifications › │ │ -│ │ └────┘ Alerts, sounds, preferences │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ ┌────┐ │ │ -│ │ │ 🔗 │ Connected Services › │ │ -│ │ └────┘ Linked accounts & integrations │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ ┌────┐ │ │ -│ │ │ 📊 │ Privacy & Data › │ │ -│ │ └────┘ Data controls & exports │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ ┌────┐ │ │ -│ │ │ ❓ │ Help & Support › │ │ -│ │ └────┘ FAQs, contact, feedback │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ ┌────┐ │ │ -│ │ │ ℹ️ │ About › │ │ -│ │ └────┘ Version, licenses, legal │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌─────────────────────────────────────────────┐ │ │ -│ │ │ 🚪 Sign Out │ │ │ -│ │ └─────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ v2.0.0 (Build 2025.12.30) · Last login: Today 9:41 AM │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - -### Screen 2: Profile Dashboard - -Enhanced profile management with achievements and completion tracking. - -``` -┌─────────────────────────────────────────────────────────────┐ -│ ← Profile & Account │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ░░│ │ -│ │░░ ┌──────────────────┐ ░░│ │ -│ │░░ │ │ ░░│ │ -│ │░░ │ J D │ ░░│ │ -│ │░░ │ [Avatar] │ ░░│ │ -│ │░░ │ │ ░░│ │ -│ │░░ │ 📷 Change │ ░░│ │ -│ │░░ └──────────────────┘ ░░│ │ -│ │░░ ░░│ │ -│ │░░ John Doe ░░│ │ -│ │░░ ✅ Verified ░░│ │ -│ │░░ ░░│ │ -│ │░░ Member since Dec 2023 ░░│ │ -│ │░░ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ PROFILE COMPLETION │ -│ ────────────────── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 96% Complete │ │ -│ │ ┌───────────────────────────────────────────────┐ │ │ -│ │ │ ████████████████████████████████████████░░░░ │ │ │ -│ │ └───────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ ✅ Email verified │ │ -│ │ ✅ Identity verified │ │ -│ │ ✅ Address added │ │ -│ │ ⭕ Add phone number (+4%) → │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ ACHIEVEMENTS │ -│ ──────────── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ │ -│ │ │ 🏆 │ │ 🌟 │ │ 💎 │ │ 🔒 │ │ │ -│ │ │ Early │ │ Power │ │ 1 Year │ │ Secure │ │ │ -│ │ │ Adopter │ │ User │ │ Member │ │ Account │ │ │ -│ │ │ ✓ │ │ ✓ │ │ 🔓 11mo │ │ ✓ │ │ │ -│ │ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │ │ -│ │ │ │ -│ │ View All 8 Achievements → │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ PERSONAL INFORMATION │ -│ ──────────────────── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ Full Name │ │ -│ │ John Doe ✏️ │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ Email Address 🔒 │ │ -│ │ john.doe@email.com │ │ -│ │ Cannot be changed │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ Phone Number │ │ -│ │ Not added yet ➕ │ │ -│ │ Add for enhanced security │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ Address │ │ -│ │ 123 Main Street, New York, NY 10001 ✏️ │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ Account Number 🔒 │ │ -│ │ MIFOS-0001234567 │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ⚠️ Delete Account › │ │ -│ │ This action cannot be undone │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - -### Screen 3: Security Center - -Comprehensive security management with visual score. - -``` -┌─────────────────────────────────────────────────────────────┐ -│ ← Security Center │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ░░│ │ -│ │░░ ┌──────────────┐ ░░│ │ -│ │░░ │ │ ░░│ │ -│ │░░ │ 88 │ ░░│ │ -│ │░░ │ ──── │ ░░│ │ -│ │░░ │ GOOD │ ░░│ │ -│ │░░ │ │ ░░│ │ -│ │░░ └──────────────┘ ░░│ │ -│ │░░ ░░│ │ -│ │░░ Your Security Score ░░│ │ -│ │░░ ░░│ │ -│ │░░ Add 2FA to reach 100 ░░│ │ -│ │░░ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ QUICK SECURITY │ -│ ────────────── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌───────────────┐ ┌───────────────┐ │ │ -│ │ │ │ │ │ │ │ -│ │ │ 🔒 Lock │ │ 🚫 Freeze │ │ │ -│ │ │ App Now │ │ Accounts │ │ │ -│ │ │ │ │ │ │ │ -│ │ └───────────────┘ └───────────────┘ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ AUTHENTICATION │ -│ ────────────── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌────┐ │ │ -│ │ │ 🔢 │ Passcode › │ │ -│ │ └────┘ 4-digit PIN enabled │ │ -│ │ Last changed: 30 days ago │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ ┌────┐ │ │ -│ │ │ 👆 │ Biometrics [ON] │ │ -│ │ └────┘ Face ID / Touch ID enabled │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ ┌────┐ │ │ -│ │ │ 🔑 │ Password › │ │ -│ │ └────┘ ⚠️ Consider updating │ │ -│ │ Last changed: 90 days ago │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ ┌────┐ +12 pts │ │ -│ │ │ 📱 │ Two-Factor Authentication (2FA) › │ │ -│ │ └────┘ ❌ Not enabled │ │ -│ │ Recommended for maximum security │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ SESSION & DEVICES │ -│ ───────────────── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌────┐ │ │ -│ │ │ ⏱️ │ Auto-Lock Timeout › │ │ -│ │ └────┘ After 5 minutes │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ ┌────┐ │ │ -│ │ │ 📱 │ Active Sessions › │ │ -│ │ └────┘ 2 devices connected │ │ -│ │ iPhone 15 Pro · MacBook Pro │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ ┌────┐ │ │ -│ │ │ 👁️ │ Privacy Screen [OFF] │ │ -│ │ └────┘ Hide balances in app switcher │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ EMERGENCY │ -│ ───────── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 🚨 Sign Out All Devices › │ │ -│ │ Immediately log out everywhere │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ 🔴 Report Compromised Account › │ │ -│ │ Get immediate security assistance │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - -### Screen 4: Privacy & Data Center - -Full control over data and privacy settings. - -``` -┌─────────────────────────────────────────────────────────────┐ -│ ← Privacy & Data │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ░░│ │ -│ │░░ 🔒 Your Privacy Matters ░░│ │ -│ │░░ ░░│ │ -│ │░░ Control how your data is used and shared ░░│ │ -│ │░░ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ YOUR DATA │ -│ ───────── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌────┐ │ │ -│ │ │ 📥 │ Download Your Data › │ │ -│ │ └────┘ Get a copy of all your information │ │ -│ │ Export as PDF, CSV, or JSON │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ ┌────┐ │ │ -│ │ │ 📤 │ Request Data Transfer › │ │ -│ │ └────┘ Move your data to another provider │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ ┌────┐ │ │ -│ │ │ 🗄️ │ Data Storage › │ │ -│ │ └────┘ Where your data is stored │ │ -│ │ EU Region · Encrypted │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ SHARING PREFERENCES │ -│ ─────────────────── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌────┐ │ │ -│ │ │ 📊 │ Analytics & Improvements [ON] │ │ -│ │ └────┘ Help us improve the app │ │ -│ │ No personal data shared │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ ┌────┐ │ │ -│ │ │ 🎯 │ Personalized Offers [OFF] │ │ -│ │ └────┘ Receive tailored recommendations │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ ┌────┐ │ │ -│ │ │ 📧 │ Marketing Communications [OFF] │ │ -│ │ └────┘ Promotional emails and offers │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ ┌────┐ │ │ -│ │ │ 🤝 │ Third-Party Sharing [OFF] │ │ -│ │ └────┘ Share with partner services │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ APP PERMISSIONS │ -│ ─────────────── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 📷 Camera Granted › │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ 📍 Location Denied › │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ 🔔 Notifications Granted › │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ 👆 Biometrics Granted › │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ LEGAL │ -│ ───── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ Privacy Policy › │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ Cookie Policy › │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ Terms of Service › │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - -### Screen 5: Appearance Settings - -Theme selection with live preview. - -``` -┌─────────────────────────────────────────────────────────────┐ -│ ← Appearance │ -│ │ -│ THEME │ -│ ───── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ Choose your preferred theme │ │ -│ │ │ │ -│ │ ┌────────────┐ ┌────────────┐ ┌────────────┐ │ │ -│ │ │ │ │▓▓▓▓▓▓▓▓▓▓▓▓│ │ ☀️ / 🌙 │ │ │ -│ │ │ ☀️ │ │▓▓ 🌙 ▓▓│ │ │ │ │ -│ │ │ Light │ │▓▓ Dark ▓▓│ │ System │ │ │ -│ │ │ │ │▓▓▓▓▓▓▓▓▓▓▓▓│ │ │ │ │ -│ │ │ ○ Select │ │ ● Active │ │ ○ Select │ │ │ -│ │ └────────────┘ └────────────┘ └────────────┘ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ PREVIEW │ -│ ─────── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ │ -│ │▓▓ ▓▓│ │ -│ │▓▓ ┌─────────────────────────────────────────┐ ▓▓│ │ -│ │▓▓ │ │ ▓▓│ │ -│ │▓▓ │ $12,450.00 │ ▓▓│ │ -│ │▓▓ │ Available Balance │ ▓▓│ │ -│ │▓▓ │ │ ▓▓│ │ -│ │▓▓ └─────────────────────────────────────────┘ ▓▓│ │ -│ │▓▓ ▓▓│ │ -│ │▓▓ ┌─────────────┐ ┌─────────────┐ ▓▓│ │ -│ │▓▓ │ Transaction │ │ Transaction │ ▓▓│ │ -│ │▓▓ └─────────────┘ └─────────────┘ ▓▓│ │ -│ │▓▓ ▓▓│ │ -│ │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ SCHEDULED THEME │ -│ ─────────────── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ Auto Dark Mode [OFF] │ │ -│ │ Switch to dark mode at sunset │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ Custom Schedule › │ │ -│ │ Dark: 6:00 PM - 7:00 AM │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ DISPLAY │ -│ ─────── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ Text Size › │ │ -│ │ ─ A ───────●─────────────────────────────── A + │ │ -│ │ Medium │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ Bold Text [OFF] │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ Reduce Motion [OFF] │ │ -│ │ Minimize animations │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ Increase Contrast [OFF] │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ LANGUAGE & REGION │ -│ ───────────────── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ App Language › │ │ -│ │ English (US) │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ Currency Format › │ │ -│ │ USD ($) │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ Date Format › │ │ -│ │ MM/DD/YYYY │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - -### Screen 6: Notifications Hub - -Smart notification preferences with channel controls. - -``` -┌─────────────────────────────────────────────────────────────┐ -│ ← Notifications │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 🔔 All Notifications [ON] │ │ -│ │ Master toggle for all alerts │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ DELIVERY METHODS │ -│ ──────────────── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 📱 Push Notifications [ON] │ │ -│ │ Instant alerts on your device │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ 📧 Email Notifications [ON] │ │ -│ │ Weekly summaries and important alerts │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ 💬 SMS Alerts [OFF] │ │ -│ │ Text messages for critical alerts │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ NOTIFICATION TYPES │ -│ ────────────────── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 💰 Transactions [ON] › │ │ -│ │ Deposits, withdrawals, payments │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ 🔒 Security Alerts [ON] › │ │ -│ │ Login attempts, password changes │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ ⚠️ Payment Reminders [ON] › │ │ -│ │ Loan due dates, upcoming bills │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ 💳 Account Updates [ON] › │ │ -│ │ Balance alerts, statement ready │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ 🎁 Offers & Promotions [OFF] › │ │ -│ │ Special deals and rewards │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ SMART FEATURES │ -│ ────────────── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 🌙 Quiet Hours [ON] › │ │ -│ │ 10:00 PM - 7:00 AM │ │ -│ │ Only urgent notifications │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ 📊 Daily Digest [ON] › │ │ -│ │ Summary at 8:00 PM │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ 🎯 Smart Grouping [ON] │ │ -│ │ Bundle similar notifications │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ SOUND & VIBRATION │ -│ ───────────────── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ Notification Sound › │ │ -│ │ Mifos Chime │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ Vibration [ON] │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - -### Screen 7: Connected Services - -Manage linked accounts and integrations. - -``` -┌─────────────────────────────────────────────────────────────┐ -│ ← Connected Services │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ░░│ │ -│ │░░ 🔗 Connected Services ░░│ │ -│ │░░ ░░│ │ -│ │░░ Manage your linked accounts and ░░│ │ -│ │░░ third-party integrations ░░│ │ -│ │░░ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ LINKED ACCOUNTS │ -│ ─────────────── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌─────────────────────────────────────────────┐ │ │ -│ │ │ │ │ │ -│ │ │ 🏦 Chase Bank │ │ │ -│ │ │ Checking ****4521 │ │ │ -│ │ │ Connected Dec 15, 2024 │ │ │ -│ │ │ ✅ Active │ │ │ -│ │ │ │ │ │ -│ │ │ [Refresh] [Disconnect] │ │ │ -│ │ │ │ │ │ -│ │ └─────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ ┌─────────────────────────────────────────────┐ │ │ -│ │ │ │ │ │ -│ │ │ 🏦 Bank of America │ │ │ -│ │ │ Savings ****7892 │ │ │ -│ │ │ Connected Nov 20, 2024 │ │ │ -│ │ │ ⚠️ Needs reauthorization │ │ │ -│ │ │ │ │ │ -│ │ │ [Reconnect] [Disconnect] │ │ │ -│ │ │ │ │ │ -│ │ └─────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ ┌─────────────────────────────────────────────┐ │ │ -│ │ │ │ │ │ -│ │ │ ➕ Link New Account │ │ │ -│ │ │ Connect another bank account │ │ │ -│ │ │ │ │ │ -│ │ └─────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ INTEGRATIONS │ -│ ──────────── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌────┐ │ │ -│ │ │ 📊 │ Mint ✅ │ │ -│ │ └────┘ Budget tracking synced │ │ -│ │ Last sync: 2 hours ago │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ ┌────┐ │ │ -│ │ │ 📱 │ Apple Pay ✅ │ │ -│ │ └────┘ Card added to wallet │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ ┌────┐ │ │ -│ │ │ 📱 │ Google Pay Connect │ │ -│ │ └────┘ Add to Google Wallet │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ ┌────┐ │ │ -│ │ │ 📈 │ QuickBooks Connect │ │ -│ │ └────┘ Business accounting sync │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ API ACCESS │ -│ ────────── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 🔑 Personal Access Tokens › │ │ -│ │ 1 active token │ │ -│ │ │ │ -│ │ ───────────────────────────────────────────────── │ │ -│ │ │ │ -│ │ 📋 Authorized Apps › │ │ -│ │ 2 apps have access │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - -### Screen 8: Help & Support - -Modern support center with multiple contact options. - -``` -┌─────────────────────────────────────────────────────────────┐ -│ ← Help & Support │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ░░│ │ -│ │░░ ❓ How can we help you? ░░│ │ -│ │░░ ░░│ │ -│ │░░ ┌─────────────────────────────────────────┐ ░░│ │ -│ │░░ │ 🔍 Search for help... │ ░░│ │ -│ │░░ └─────────────────────────────────────────┘ ░░│ │ -│ │░░ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ POPULAR TOPICS │ -│ ────────────── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 💳 Payments & Transfers › │ │ -│ │ 🔐 Account & Security › │ │ -│ │ 📱 App & Features › │ │ -│ │ 💰 Loans & Credit › │ │ -│ │ 📊 Statements & Reports › │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ CONTACT US │ -│ ────────── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌─────────────────────────────────────────────┐ │ │ -│ │ │ │ │ │ -│ │ │ 💬 Live Chat │ │ │ -│ │ │ │ │ │ -│ │ │ Chat with our support team │ │ │ -│ │ │ 🟢 Available now · Avg wait: 2 min │ │ │ -│ │ │ │ │ │ -│ │ │ ┌───────────────────────────────────────┐ │ │ │ -│ │ │ │░░░░░░░░░░░ Start Chat ░░░░░░░░░░░░░░░│ │ │ │ -│ │ │ └───────────────────────────────────────┘ │ │ │ -│ │ │ │ │ │ -│ │ └─────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ ┌─────────────────────────────────────────────┐ │ │ -│ │ │ │ │ │ -│ │ │ 📞 Phone Support │ │ │ -│ │ │ │ │ │ -│ │ │ +1 (800) 123-4567 │ │ │ -│ │ │ Mon-Fri 9AM - 6PM EST │ │ │ -│ │ │ │ │ │ -│ │ │ ┌───────────────────────────────────────┐ │ │ │ -│ │ │ │ Call Now │ │ │ │ -│ │ │ └───────────────────────────────────────┘ │ │ │ -│ │ │ │ │ │ -│ │ └─────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ │ ┌─────────────────────────────────────────────┐ │ │ -│ │ │ │ │ │ -│ │ │ 📧 Email Support │ │ │ -│ │ │ │ │ │ -│ │ │ support@mifos.org │ │ │ -│ │ │ Response within 24 hours │ │ │ -│ │ │ │ │ │ -│ │ │ ┌───────────────────────────────────────┐ │ │ │ -│ │ │ │ Send Email │ │ │ │ -│ │ │ └───────────────────────────────────────┘ │ │ │ -│ │ │ │ │ │ -│ │ └─────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ RESOURCES │ -│ ───────── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 📚 User Guide › │ │ -│ │ 🎥 Video Tutorials › │ │ -│ │ 📰 Blog & Updates › │ │ -│ │ 👥 Community Forum › │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ FEEDBACK │ -│ ──────── │ -│ │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ⭐ Rate the App › │ │ -│ │ 💡 Suggest a Feature › │ │ -│ │ 🐛 Report a Bug › │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - -### Screen 9: Sign Out Confirmation - -Modern confirmation dialog with clear actions. - -``` -┌─────────────────────────────────────────────────────────────┐ -│ │ -│ (Scrim: 50% black) │ -│ │ -│ ┌───────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ ┌─────────────────┐ │ │ -│ │ │ │ │ │ -│ │ │ 🚪 │ │ │ -│ │ │ │ │ │ -│ │ └─────────────────┘ │ │ -│ │ │ │ -│ │ Sign Out? │ │ -│ │ ══════════ │ │ -│ │ │ │ -│ │ Are you sure you want to │ │ -│ │ sign out of your account? │ │ -│ │ │ │ -│ │ You'll need to sign in again │ │ -│ │ to access your accounts. │ │ -│ │ │ │ -│ │ │ │ -│ │ ┌───────────────────────────────────────┐ │ │ -│ │ │ │ │ │ -│ │ │ Sign Out │ │ │ -│ │ │ │ │ │ -│ │ └───────────────────────────────────────┘ │ │ -│ │ Background: #FF4757 (Error) │ │ -│ │ │ │ -│ │ Cancel │ │ -│ │ Color: Primary (#667EEA) │ │ -│ │ │ │ -│ └───────────────────────────────────────────────┘ │ -│ │ -│ Dialog Specs: │ -│ - Corner Radius: 24dp │ -│ - Padding: 32dp │ -│ - Max Width: 320dp │ -│ - Animation: Scale + Fade (300ms) │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - ---- - -## Component Specifications - -### Profile Card with Health Score - -``` -┌─────────────────────────────────────────────────────────────┐ -│ PROFILE CARD COMPONENT │ -├─────────────────────────────────────────────────────────────┤ -│ │ -│ Structure: │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ │░░ ░░│ │ -│ │░░ ┌────────┐ Name ░░│ │ -│ │░░ │ Avatar │ Email ░░│ │ -│ │░░ │ 96% │ Verification Badge ░░│ │ -│ │░░ └────────┘ ░░│ │ -│ │░░ ░░│ │ -│ │░░ [Progress Bar: Profile Completion] ░░│ │ -│ │░░ [Completion CTA] ░░│ │ -│ │░░ ░░│ │ -│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ Specifications: │ -│ ───────────────────────────────────────────────────────── │ -│ Background: Primary gradient at 100% │ -│ Corner Radius: 20dp │ -│ Padding: 20dp │ -│ Avatar Size: 64dp with 4dp gradient ring │ -│ Completion Percentage: Overlaid on avatar │ -│ Progress Bar Height: 8dp │ -│ Progress Bar Radius: 4dp │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - -### Quick Action Button - -``` -┌─────────────────────────────────────────────────────────────┐ -│ QUICK ACTION BUTTON │ -├─────────────────────────────────────────────────────────────┤ -│ │ -│ Layout: │ -│ ┌───────────┐ │ -│ │ │ │ -│ │ 🔒 │ Icon: 28dp │ -│ │ │ │ -│ │ Label │ Label: 12sp, Medium │ -│ │ │ │ -│ └───────────┘ │ -│ │ -│ Specifications: │ -│ ───────────────────────────────────────────────────────── │ -│ Size: 72dp x 72dp │ -│ Background: Surface │ -│ Corner Radius: 16dp │ -│ Icon Size: 28dp │ -│ Label: 12sp, Medium weight │ -│ Gap: 8dp between icon and label │ -│ │ -│ States: │ -│ ───────────────────────────────────────────────────────── │ -│ Default: Surface background │ -│ Pressed: Scale 0.95, darker background │ -│ Active (toggle): Primary gradient border │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - -### Security Score Card - -``` -┌─────────────────────────────────────────────────────────────┐ -│ SECURITY SCORE CARD │ -├─────────────────────────────────────────────────────────────┤ -│ │ -│ Structure: │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ │ │ -│ │ 🛡️ Security Score 88/100 GOOD │ │ -│ │ [═══════════════════════════════░░░░░] │ │ -│ │ │ │ -│ │ ✅ Check 1 │ │ -│ │ ✅ Check 2 │ │ -│ │ ⚠️ Warning item │ │ -│ │ ❌ Missing item +12 pts │ │ -│ │ │ │ -│ │ [Improve Security →] │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ Score Levels: │ -│ ───────────────────────────────────────────────────────── │ -│ 0-40: Poor (Red #FF4757) │ -│ 41-60: Fair (Orange #FF8C42) │ -│ 61-80: Good (Yellow #FFB800) │ -│ 81-100: Great (Green #00D09C) │ -│ │ -│ Item States: │ -│ ───────────────────────────────────────────────────────── │ -│ ✅ Complete: Green check, secondary text │ -│ ⚠️ Warning: Amber icon, primary text │ -│ ❌ Missing: Red X, primary text, point value shown │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - -### Settings Row - -``` -┌─────────────────────────────────────────────────────────────┐ -│ SETTINGS ROW VARIANTS │ -├─────────────────────────────────────────────────────────────┤ -│ │ -│ Navigation Row: │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ ┌────┐ │ │ -│ │ │ 🔐 │ Security Center › │ │ -│ │ └────┘ Passcode, biometrics, sessions │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ Toggle Row: │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ ┌────┐ │ │ -│ │ │ 👆 │ Biometrics [ON] │ │ -│ │ └────┘ Face ID / Touch ID enabled │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ Badge Row: │ -│ ┌─────────────────────────────────────────────────────┐ │ -│ │ ┌────┐ +12 pts │ │ -│ │ │ 📱 │ Two-Factor Authentication › │ │ -│ │ └────┘ ❌ Not enabled │ │ -│ └─────────────────────────────────────────────────────┘ │ -│ │ -│ Dimensions: │ -│ ───────────────────────────────────────────────────────── │ -│ Row Height: 72dp │ -│ Horizontal Padding: 16dp │ -│ Icon Container: 44dp x 44dp │ -│ Icon Size: 24dp │ -│ Icon Corner Radius: 12dp │ -│ Icon Background: Primary at 10% │ -│ Title: 16sp, Medium │ -│ Subtitle: 14sp, Regular, Secondary │ -│ Chevron: 20dp, Tertiary │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - ---- - -## Animation Specifications - -### Profile Completion Animation - -``` -┌─────────────────────────────────────────────────────────────┐ -│ PROFILE COMPLETION PROGRESS │ -├─────────────────────────────────────────────────────────────┤ -│ │ -│ On screen load: │ -│ ───────────────────────────────────────────────────────── │ -│ 1. Progress bar animates from 0% to current value │ -│ Duration: 800ms │ -│ Easing: EaseOutQuart │ -│ │ -│ 2. Percentage counter animates 0 → current │ -│ Duration: 800ms │ -│ Update every 16ms (60fps) │ -│ │ -│ On task completion: │ -│ ───────────────────────────────────────────────────────── │ -│ 1. Check icon scales in (0 → 1.2 → 1.0) │ -│ Duration: 300ms │ -│ Easing: Spring (damping: 0.6) │ -│ │ -│ 2. Progress bar extends to new value │ -│ Duration: 400ms │ -│ │ -│ 3. Confetti burst if 100% reached │ -│ 50 particles, 800ms │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - -### Security Score Animation - -``` -┌─────────────────────────────────────────────────────────────┐ -│ SECURITY SCORE ANIMATION │ -├─────────────────────────────────────────────────────────────┤ -│ │ -│ Score reveal: │ -│ ───────────────────────────────────────────────────────── │ -│ 1. Score circle scales in (0.8 → 1.0) │ -│ Duration: 300ms │ -│ │ -│ 2. Score number counts up (0 → current) │ -│ Duration: 600ms │ -│ Easing: EaseOutQuart │ -│ │ -│ 3. Progress arc draws clockwise │ -│ Duration: 600ms │ -│ Easing: EaseOutQuart │ -│ │ -│ 4. Status badge fades in │ -│ Delay: 400ms │ -│ Duration: 200ms │ -│ │ -│ 5. Checklist items stagger in │ -│ Delay per item: 100ms │ -│ Animation per item: 200ms fade + slide │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - -### Quick Action Press - -``` -┌─────────────────────────────────────────────────────────────┐ -│ QUICK ACTION PRESS ANIMATION │ -├─────────────────────────────────────────────────────────────┤ -│ │ -│ Press: │ -│ ───────────────────────────────────────────────────────── │ -│ - Scale: 1.0 → 0.95 │ -│ - Background: Surface → Surface at 90% │ -│ - Duration: 100ms │ -│ - Haptic: Light impact │ -│ │ -│ Release: │ -│ ───────────────────────────────────────────────────────── │ -│ - Scale: 0.95 → 1.0 │ -│ - Background returns │ -│ - Duration: 150ms │ -│ - Easing: Spring │ -│ │ -│ Toggle state (for toggle actions): │ -│ ───────────────────────────────────────────────────────── │ -│ ON: Primary gradient border appears (200ms) │ -│ OFF: Border fades out (200ms) │ -│ Icon color: Changes to match state │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - ---- - -## Dark Mode - -### Color Transformations - -``` -┌─────────────────────────────────────────────────────────────┐ -│ DARK MODE COLOR MAPPING │ -├─────────────────────────────────────────────────────────────┤ -│ │ -│ Backgrounds: │ -│ ───────────────────────────────────────────────────────── │ -│ Screen Background #F8F9FA → #0D1117 │ -│ Surface #FFFFFF → #1A1F2E │ -│ Surface Variant #F3F4F6 → #21262D │ -│ Card #FFFFFF → #21262D │ -│ │ -│ Text: │ -│ ───────────────────────────────────────────────────────── │ -│ Primary #1F2937 → #F0F6FC │ -│ Secondary #6B7280 → #8B949E │ -│ Tertiary #9CA3AF → #6E7681 │ -│ │ -│ Dividers: │ -│ ───────────────────────────────────────────────────────── │ -│ Divider #E5E7EB → #30363D │ -│ │ -│ Preserved (Same in both modes): │ -│ ───────────────────────────────────────────────────────── │ -│ Primary Gradient #667EEA → #764BA2 │ -│ Success #00D09C │ -│ Warning #FFB800 │ -│ Error #FF4757 │ -│ │ -│ Adjustments for Dark Mode: │ -│ ───────────────────────────────────────────────────────── │ -│ - Gradients: Use 85% opacity │ -│ - Icon backgrounds: Increase to 20% opacity │ -│ - Shadows: Disabled (use surface differentiation) │ -│ - Toggle ON: Gradient preserved │ -│ - Toggle OFF: #30363D track │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - ---- - -## Accessibility - -### Screen Reader Labels - -``` -┌─────────────────────────────────────────────────────────────┐ -│ ACCESSIBILITY SPECIFICATIONS │ -├─────────────────────────────────────────────────────────────┤ -│ │ -│ Profile Card: │ -│ ───────────────────────────────────────────────────────── │ -│ Label: "Profile for John Doe. Email john.doe@email.com. │ -│ Account verified. Profile 96% complete. Double │ -│ tap to view profile." │ -│ Role: Button │ -│ │ -│ Security Score: │ -│ ───────────────────────────────────────────────────────── │ -│ Label: "Security score 88 out of 100. Rating: Good. │ -│ Passcode enabled. Biometrics active. Password │ -│ last changed 90 days ago, consider updating. │ -│ Two-factor authentication not enabled, add for │ -│ 12 additional points." │ -│ Role: Status │ -│ │ -│ Quick Action: │ -│ ───────────────────────────────────────────────────────── │ -│ Label: "[Action name]. Double tap to activate." │ -│ Role: Button │ -│ For toggles: Include current state │ -│ │ -│ Settings Row: │ -│ ───────────────────────────────────────────────────────── │ -│ Label: "[Title]. [Subtitle]. Double tap to open." │ -│ For toggles: "[Title]. Currently [on/off]. Double tap │ -│ to toggle." │ -│ Role: Button or Switch │ -│ │ -│ Focus Order: │ -│ ───────────────────────────────────────────────────────── │ -│ 1. Back button │ -│ 2. Settings title │ -│ 3. Options button │ -│ 4. Profile card │ -│ 5. Quick actions (left to right) │ -│ 6. Security score card │ -│ 7. Settings rows (top to bottom) │ -│ 8. Sign out button │ -│ 9. Version info │ -│ │ -│ Touch Targets: │ -│ ───────────────────────────────────────────────────────── │ -│ All interactive elements: Minimum 48dp x 48dp │ -│ Settings rows: Full width x 72dp │ -│ Quick actions: 72dp x 72dp │ -│ Buttons: Minimum 48dp height │ -│ │ -└─────────────────────────────────────────────────────────────┘ -``` - ---- - -## Implementation Notes - -### Required Composables - -```kotlin -// Main Screens -@Composable fun CommandCenterScreen() -@Composable fun ProfileDashboardScreen() -@Composable fun SecurityCenterScreen() -@Composable fun PrivacyDataScreen() -@Composable fun AppearanceScreen() -@Composable fun NotificationsHubScreen() -@Composable fun ConnectedServicesScreen() -@Composable fun HelpSupportScreen() - -// Components -@Composable fun ProfileCard() -@Composable fun QuickActionButton() -@Composable fun SecurityScoreCard() -@Composable fun SettingsRow() -@Composable fun SettingsSection() -@Composable fun AchievementBadge() -@Composable fun ProfileCompletionBar() -@Composable fun ThemePreviewCard() -@Composable fun LinkedAccountCard() - -// Dialogs -@Composable fun SignOutConfirmationDialog() -@Composable fun DeleteAccountDialog() -@Composable fun ThemeScheduleDialog() -``` - -### State Management - -```kotlin -data class SettingsState( - val user: UserProfile, - val profileCompletion: Float, - val securityScore: Int, - val securityChecks: List, - val theme: AppTheme, - val notificationsEnabled: Boolean, - val biometricsEnabled: Boolean, - val connectedAccounts: List, - val achievements: List, - val isLoading: Boolean = false, - val error: String? = null -) - -data class SecurityCheck( - val id: String, - val title: String, - val status: CheckStatus, - val pointsIfCompleted: Int? -) - -enum class CheckStatus { COMPLETE, WARNING, INCOMPLETE } - -enum class AppTheme { LIGHT, DARK, SYSTEM, SCHEDULED } -``` - ---- - -## Changelog - -| Date | Version | Changes | -|------|---------|---------| -| 2025-12-30 | 2.0.0 | Complete redesign as Personal Command Center | -| | | - Added profile completion tracking with gamification | -| | | - Added security score with visual assessment | -| | | - Added quick actions hub | -| | | - Added achievement system | -| | | - Added connected services management | -| | | - Added privacy & data center | -| | | - Enhanced accessibility support | -| | | - Added dark mode specifications | -| 2025-12-29 | 1.0.0 | Initial mockup creation | - ---- - -## Data Binding Reference - -> **For `/implement` command**: Maps UI components to API.md sections. -> **Source of Truth**: See `API.md` for complete endpoint details. - -### Screen → API.md Mapping - -| Screen | API.md Section | Key Fields | -|--------|----------------|------------| -| User Profile | `Endpoints Required → 1. Client Info` | `displayName`, `firstname`, `lastname` | -| Profile Image | `Endpoints Required → 2. Client Image` | Binary image | -| Change Password | `Endpoints Required → 3. Change Password` | `newPassword`, `confirmPassword` | - -### Client-Only Features - -| Feature | Storage | Notes | -|---------|---------|-------| -| Theme Selection | DataStore | Light/Dark/System | -| Biometric Settings | Platform Keystore | Device security | -| Passcode Settings | DataStore | App lock | -| Notification Preferences | DataStore | Local settings | -| Language | DataStore | Locale preference | -| Privacy Settings | DataStore | Local preferences | - -### Actions → API.md Mapping - -| User Action | API.md Reference | Navigation | -|-------------|------------------|------------| -| Load Profile | `1. Client Info` | Display settings | -| Change Password | `3. Change Password` | Password flow | -| Logout | N/A | Clear local auth tokens | - -### API Limitations - -See `API.md → Local Storage (No API Required)` - Settings is mostly client-side: -- Profile data (read-only) -- Password change is the only write operation -- Most preferences stored in DataStore - -### Error Handling - -See `API.md → Error Responses` for complete error codes. diff --git a/claude-product-cycle/design-spec-layer/features/settings/SPEC.md b/claude-product-cycle/design-spec-layer/features/settings/SPEC.md deleted file mode 100644 index 5d3362a29..000000000 --- a/claude-product-cycle/design-spec-layer/features/settings/SPEC.md +++ /dev/null @@ -1,717 +0,0 @@ -# Settings - Feature Specification - -> **Purpose**: User preferences, account security, app configuration, and support access -> **User Value**: Personalize app experience, manage security, access help resources -> **Last Updated**: 2025-12-29 - ---- - -## 1. Overview - -### 1.1 Feature Summary -The Settings feature provides comprehensive user configuration options including profile display, password/passcode management, theme selection, language preferences, and access to support resources (FAQ, Help, About Us, App Info). Users can also logout from the application. - -### 1.2 User Stories -- As a user, I want to view my profile information so I know I am logged into the correct account -- As a user, I want to change my password to maintain account security -- As a user, I want to update my passcode for quicker app authentication -- As a user, I want to change the app language to use the app in my preferred language -- As a user, I want to switch between light/dark themes for comfortable viewing -- As a user, I want to access FAQ and help resources when I have questions -- As a user, I want to logout securely from the application - ---- - -## 2. Screen Layouts - -### 2.1 Main Settings Screen - -``` -+-------------------------------------------+ -| <- Back Settings | -+-------------------------------------------+ -| | -| +-----+ John Doe | -| | | Customer Account No: 12345678 | -| +-----+ | -| | -+-------------------------------------------+ -| [Key] Change Password | -| Update your account password | -+-------------------------------------------+ -| [Pin] Authorization Passcode | -| Set your app passcode | -+-------------------------------------------+ -| [Lng] Language | -| Change app language | -+-------------------------------------------+ -| [Thm] Display Theme | -| Light, Dark, or System | -+-------------------------------------------+ -| [Ppl] About Us | -| Learn about Mifos Initiative | -+-------------------------------------------+ -| [Str] Rate Us | -| Share your feedback | -+-------------------------------------------+ -| [?] FAQ | -| Frequently asked questions | -+-------------------------------------------+ -| [Msg] Help | -| Contact support | -+-------------------------------------------+ -| [App] App Info | -| Version and legal info | -+-------------------------------------------+ -| [Out] Logout | -| Sign out of your account | -+-------------------------------------------+ -``` - -### 2.2 Change Password Screen - -``` -+-------------------------------------------+ -| <- Back Password | -+-------------------------------------------+ -| | -| Old Password | -| +-------------------------------------+ | -| | ******** [eye] | -| +-------------------------------------+ | -| | -| New Password | -| +-------------------------------------+ | -| | ******** [eye] | -| +-------------------------------------+ | -| | -| +=====================================+ | -| | Password Strength: [====----] GOOD | | -| | - Minimum 12 characters | | -| | - Include uppercase & lowercase | | -| | - Include numbers | | -| +=====================================+ | -| | -| Confirm New Password | -| +-------------------------------------+ | -| | ******** [eye] | -| +-------------------------------------+ | -| | -| +-------------------------------------+ | -| | NEXT | | -| +-------------------------------------+ | -| | -+-------------------------------------------+ -``` - -### 2.3 Update Passcode Screen - -``` -+-------------------------------------------+ -| <- Back Authorization Passcode | -+-------------------------------------------+ -| | -| Old Passcode | -| +-------------------------------------+ | -| | **** [eye] | -| +-------------------------------------+ | -| | -| New Passcode | -| +-------------------------------------+ | -| | **** [eye] | -| +-------------------------------------+ | -| | -| Confirm New Passcode | -| +-------------------------------------+ | -| | **** [eye] | -| +-------------------------------------+ | -| | -| +-------------------------------------+ | -| | NEXT | | -| +-------------------------------------+ | -| | -+-------------------------------------------+ -``` - -### 2.4 Language Selection Screen - -``` -+-------------------------------------------+ -| <- Back Language | -+-------------------------------------------+ -| | -| ( ) English | -| ( ) Hindi | -| ( ) Spanish | -| ( ) French | -| ( ) Arabic | -| ( ) Portuguese | -| ( ) Bengali | -| ( ) Chinese | -| ( ) Indonesian | -| ( ) Japanese | -| ... | -| | -+-------------------------------------------+ -| +-------------------------------------+ | -| | CHANGE LANGUAGE | | -| +-------------------------------------+ | -+-------------------------------------------+ -``` - -### 2.5 Theme Selection Screen - -``` -+-------------------------------------------+ -| <- Back Display Theme | -+-------------------------------------------+ -| | -| ( ) Follow System | -| | -| ( ) Dark Mode | -| | -| ( ) Light Mode | -| | -| ( ) Based on Time | -| Dark [18:00 - 06:00] | -| Light [06:00 - 18:00] | -| | -| +-------------------------------------+ | -| | APPLY THEME | | -| +-------------------------------------+ | -| | -+-------------------------------------------+ -``` - -### 2.6 Time-Based Theme Dialog - -``` -+-------------------------------------+ -| Choose Dark Mode Time | -| | -| Dark mode starts at | -| +---------------------------------+| -| | 18:00 || -| +---------------------------------+| -| | -| Dark mode ends at | -| +---------------------------------+| -| | 06:00 || -| +---------------------------------+| -| | -| [Cancel] [Apply] | -+-------------------------------------+ -``` - -### 2.7 FAQ Screen - -``` -+-------------------------------------------+ -| <- Back FAQ | -+-------------------------------------------+ -| | -| v How do I apply for a loan? | -| +-------------------------------------+ | -| | Click on "Apply for Loan" on the | | -| | Home Screen... | | -| +-------------------------------------+ | -| | -| > What is Mifos? | -| | -| > How do I view account transactions? | -| | -| > How to transfer money? | -| | -| > How do I contact support? | -| | -| ... | -| | -+-------------------------------------------+ -| Still have doubts? Contact Us | -+-------------------------------------------+ -``` - -### 2.8 Help Screen - -``` -+-------------------------------------------+ -| <- Back Help | -+-------------------------------------------+ -| | -| +=====================================+ | -| | Have any Doubts? | | -| | Check our FAQ section | | -| +=====================================+ | -| | -| +=====================================+ | -| | Still Have Doubts? | | -| | Reach out to us via phone | | -| | | | -| | +-------------------------------+ | | -| | | CALL US | | | -| | +-------------------------------+ | | -| +=====================================+ | -| | -| +=====================================+ | -| | Still Have Issues? | | -| | Reach out to us via email | | -| | | | -| | +-------------------------------+ | | -| | | MAIL US | | | -| | +-------------------------------+ | | -| +=====================================+ | -| | -+-------------------------------------------+ -``` - -### 2.9 About Us Screen - -``` -+-------------------------------------------+ -| <- Back About Us | -+-------------------------------------------+ -| | -| +=====================================+ | -| | [Logo] Mifos | | -| | | | -| | Who Are We? | | -| | Mifos is a community-built open | | -| | source platform for financial | | -| | inclusion... | | -| | | | -| | What Does Mifos Do? | | -| | - Provides banking solutions | | -| | - Enables microfinance services | | -| | - Supports financial inclusion | | -| | | | -| | [Illustration Image] | | -| +=====================================+ | -| | -+-------------------------------------------+ -``` - -### 2.10 App Info Screen - -``` -+-------------------------------------------+ -| <- Back App Info | -+-------------------------------------------+ -| | -| +=====================================+ | -| | [Logo] Mifos | | -| | | | -| | Mifos Electronic Banking | | -| | All Rights Reserved | | -| | | | -| | Mifos Mobile App | | -| | All Rights Reserved | | -| | Version 1.0.0 | | -| | | | -| | [App Info Illustration] | | -| +=====================================+ | -| | -+-------------------------------------------+ -``` - -### 2.11 Logout Confirmation Dialog - -``` -+-------------------------------------+ -| Logout? | -| | -| Are you sure you want to logout | -| from the application? | -| | -| +-------------------------------+ | -| | LOGOUT | | -| +-------------------------------+ | -| | -| Changed your mind? Go Back | -+-------------------------------------+ -``` - ---- - -## 3. Sections Table - -| # | Screen | Description | Priority | -|---|--------|-------------|----------| -| 1 | SettingsScreen | Main settings hub with profile card | P0 | -| 2 | ChangePasswordScreen | Update account password | P0 | -| 3 | UpdatePasscodeScreen | Update app passcode | P0 | -| 4 | LanguageScreen | App language selection | P1 | -| 5 | ChangeThemeScreen | Theme preference selection | P1 | -| 6 | FAQScreen | Frequently asked questions | P2 | -| 7 | HelpScreen | Contact support options | P2 | -| 8 | AboutScreen | About Mifos Initiative | P2 | -| 9 | AppInfoScreen | App version and legal info | P2 | -| 10 | LogoutDialog | Logout confirmation | P0 | - ---- - -## 4. User Interactions - -| Action | Trigger | Result | API Call | -|--------|---------|--------|----------| -| View Profile | Load Settings | Display user name & account | GET /clients | -| Change Password | Click Submit | Update password & logout | PUT /user/password | -| Update Passcode | Click Next | Save new passcode locally | None (Local) | -| Change Language | Click Apply | Update app locale | None (Local) | -| Change Theme | Click Apply | Update app theme | None (Local) | -| View FAQ | Click FAQ Item | Expand answer accordion | None (Local) | -| Call Support | Click Call Us | Open phone dialer | None (Platform) | -| Email Support | Click Mail Us | Open email client | None (Platform) | -| Rate App | Click Rate Us | Open app review | None (Platform) | -| Logout | Click Logout | Clear data & navigate to login | None (Local) | - ---- - -## 5. State Model - -```kotlin -// Settings Main State -@Immutable -data class SettingsState( - val settingsItems: ImmutableList, - val clientId: Long? = null, - val client: Client? = null, - val profileImage: ByteArray? = null, - val dialogState: DialogState? = null, - val isUserLoading: Boolean = true, - val isUserLoaded: Boolean = false, - val uiState: ScreenUiState? = ScreenUiState.Success, - val networkStatus: Boolean = false, -) { - sealed interface DialogState { - data class Logout( - val title: StringResource, - val message: StringResource, - ) : DialogState - } -} - -// Settings Actions -sealed interface SettingsAction { - data object OnNavigateBack : SettingsAction - data object DismissDialog : SettingsAction - data object Retry : SettingsAction - data class NavigateTo(val item: SettingsItems) : SettingsAction - data object LogoutDialog : SettingsAction - data object Logout : SettingsAction - data class ReceiveNetworkStatus(val isOnline: Boolean) : SettingsAction - data object RateApp : SettingsAction - - sealed interface Internal : SettingsAction { - data class ReceiveClientInfo(val dataState: DataState) : Internal - data class ReceiveClientImage(val dataState: DataState) : Internal - } -} - -// Settings Events -sealed interface SettingsEvents { - data object NavigateBack : SettingsEvents - data class NavigateTo(val item: SettingsItems) : SettingsEvents - data object RateApp : SettingsEvents -} - -// Password State -data class PasswordState( - internal val currentPassword: String = "", - val oldPassword: String = "", - val newPassword: String = "", - val confirmPassword: String = "", - val oldPasswordError: StringResource? = null, - val newPasswordError: StringResource? = null, - val confirmPasswordError: StringResource? = null, - val oldPasswordVisible: Boolean = false, - val newPasswordVisible: Boolean = false, - val confirmPasswordVisible: Boolean = false, - val passwordStrengthState: PasswordStrengthState = PasswordStrengthState.NONE, - val passwordFeedback: List = emptyList(), - val dialogState: DialogState? = null, -) { - sealed interface DialogState { - data object Loading : DialogState - data class Success(val message: StringResource) : DialogState - data class Error(val message: StringResource) : DialogState - } - - val isEnabled = oldPasswordError == null && - newPasswordError == null && - confirmPasswordError == null && - oldPassword.isNotEmpty() && - newPassword.isNotEmpty() && - confirmPassword.isNotEmpty() -} - -// Password Actions -sealed interface PasswordAction { - data class OnOldPasswordChange(val currentPassword: String) : PasswordAction - data class OnNewPasswordChange(val newPassword: String) : PasswordAction - data class OnConfirmPasswordChange(val confirmPassword: String) : PasswordAction - data object OldPasswordVisibleClick : PasswordAction - data object NewPasswordVisibleClick : PasswordAction - data object ConfirmPasswordVisibleClick : PasswordAction - data object SubmitClick : PasswordAction - data object RetrySubmit : PasswordAction - data object NavigateBack : PasswordAction - data object DismissDialog : PasswordAction - - sealed interface Internal : PasswordAction { - data class UpdatePasswordResult(val result: DataState) : Internal - data class ReceivePasswordStrengthResult(val result: PasswordStrengthResult) : Internal - data class OldPasswordReceived(val password: String?) : Internal - } -} - -// Passcode State -data class PasscodeState( - internal val currentPasscode: String = "", - val oldPasscode: String = "", - val newPasscode: String = "", - val confirmPasscode: String = "", - val oldPasscodeError: StringResource? = null, - val newPasscodeError: StringResource? = null, - val confirmPasscodeError: StringResource? = null, - val isOldPasscodeVisible: Boolean = false, - val isNewPasscodeVisible: Boolean = false, - val isConfirmPasscodeVisible: Boolean = false, - val dialogState: DialogState? = null, -) { - sealed interface DialogState { - data object Loading : DialogState - data class Shown(val message: StringResource) : DialogState - } -} - -// Passcode Actions -sealed interface PasscodeAction { - data class OnOldPasscodeChange(val oldPasscode: String) : PasscodeAction - data class OnNewPasscodeChange(val newPasscode: String) : PasscodeAction - data class OnConfirmPasscodeChange(val confirmPasscode: String) : PasscodeAction - data object NewPasscodeVisibleClick : PasscodeAction - data object OldPasscodeVisibleClick : PasscodeAction - data object ConfirmPasscodeVisibleClick : PasscodeAction - data object SubmitClick : PasscodeAction - data object NavigateBackClick : PasscodeAction - data object DismissDialog : PasscodeAction - data object NavigateToPasscodeScreen : PasscodeAction - - sealed interface Internal : PasscodeAction { - data class UpdatePasscodeResult(val result: StringResource) : Internal - data class CurrentPasscodeReceived(val passcode: String) : Internal - } -} - -// Theme State -data class ThemeState( - val currentTheme: MifosThemeConfig, - val showTimeBasedDialog: Boolean = false, - val timeBasedTheme: TimeBasedTheme = TimeBasedTheme( - hourStart = 6, - hourEnd = 18, - timeStart = 0, - timeEnd = 0, - ), -) { - val themeOptions = listOf( - MifosThemeConfig.FOLLOW_SYSTEM to Res.string.feature_settings_theme_system, - MifosThemeConfig.DARK to Res.string.feature_settings_theme_dark, - MifosThemeConfig.LIGHT to Res.string.feature_settings_theme_light, - MifosThemeConfig.BASED_ON_TIME to Res.string.feature_settings_theme_based_on_time, - ) -} - -// Theme Actions -sealed interface ThemeAction { - data object SetTheme : ThemeAction - data class ThemeSelection(val theme: MifosThemeConfig) : ThemeAction - data object NavigateBack : ThemeAction - data object ShowTimeBasedDialog : ThemeAction - data object HideTimeBasedDialog : ThemeAction - data class UpdateTimeBasedTheme(val theme: TimeBasedTheme) : ThemeAction - - sealed interface Internal : ThemeAction { - data class LoadTheme(val theme: MifosThemeConfig) : Internal - data class LoadTimeBasedTheme(val theme: TimeBasedTheme) : Internal - } -} - -// Language State -data class LanguageState( - val selectedLanguage: LanguageConfig, - val currentLanguage: LanguageConfig, -) - -// Language Actions -sealed interface LanguageAction { - data object OnNavigateBack : LanguageAction - data class LanguageSelected(val language: LanguageConfig) : LanguageAction - data class SetLanguage(val languageConfig: LanguageConfig) : LanguageAction - - sealed interface Internal : LanguageAction { - data class LoadLanguage(val language: LanguageConfig) : Internal - } -} - -// FAQ State -data class FaqState( - val faqList: List = emptyList(), - val selectedFaqPosition: Int = 0, -) - -// FAQ Actions -sealed interface FaqAction { - data object NavigateBack : FaqAction - data object NavigateToHelp : FaqAction - data class UpdateFaqPosition(val position: Int) : FaqAction - - sealed interface Internal : FaqAction { - data object LoadFaqList : Internal - } -} -``` - ---- - -## 6. API Requirements - -| Endpoint | Method | Purpose | Status | -|----------|--------|---------|--------| -| /self/clients/{clientId} | GET | Get client info | Exists | -| /self/clients/{clientId}/images | GET | Get profile image | Exists | -| /self/user/password | PUT | Update password | Exists | - -Note: Most settings operations are local (passcode, theme, language) and do not require API calls. - ---- - -## 7. Validation Rules - -### Password Validation - -| Field | Validation | Error Message | -|-------|------------|---------------| -| Old Password | Required, min 8 chars | "Password is required" | -| Old Password | Must match stored | "Current password is incorrect" | -| New Password | Required, min 8 chars | "Password must be at least 8 characters" | -| New Password | No consecutive repeating chars | "Password has repeating characters" | -| New Password | Different from old | "New password must differ from current" | -| Confirm Password | Must match new | "Passwords do not match" | - -### Passcode Validation - -| Field | Validation | Error Message | -|-------|------------|---------------| -| Old Passcode | Required, exactly 4 digits | "Passcode must be 4 digits" | -| Old Passcode | Numeric only | "Passcode must be numeric" | -| Old Passcode | Must match stored | "Current passcode is incorrect" | -| New Passcode | Required, exactly 4 digits | "Passcode must be 4 digits" | -| Confirm Passcode | Must match new | "Passcodes do not match" | - ---- - -## 8. Password Strength - -| Level | Score | Visual | Requirements | -|-------|-------|--------|--------------| -| NONE | - | Empty | No password entered | -| WEAK_1 | 0 | [=-----] | Very weak | -| WEAK_2 | 1 | [==----] | < 8 chars | -| WEAK_3 | 2 | [===---] | 8 chars, no variety | -| GOOD | 3 | [====--] | Uppercase + lowercase | -| STRONG | 4 | [=====- ] | Includes numbers | -| VERY_STRONG | 5 | [======] | Includes symbols | - ---- - -## 9. Settings Items - -| Item | Icon | Route | Description | -|------|------|-------|-------------| -| Password | PersonPasskey | PASSWORD | Change account password | -| AuthPasscode | TableCellEdit | AUTH_PASSCODE | Set app passcode | -| Language | BookLetter | LANGUAGE | Change app language | -| Theme | DarkTheme | THEME | Display theme settings | -| AboutUs | PeopleCommunity | ABOUT_US | About Mifos Initiative | -| RateUs | RateUs | RATE_US | App review prompt | -| FAQ | QuestionCircle | FAQ | Frequently asked questions | -| Help | ChatMultiple | HELP | Contact support | -| AppInfo | AppRecent | APP_INFO | Version and legal | -| Logout | SignOut | LOGOUT | Sign out of app | - ---- - -## 10. Navigation Flow - -``` -SETTINGS_GRAPH (Start: SettingsRoute) -| -+-- SettingsRoute (Main Hub) -| +-- --> ChangePasswordRoute -| | +-- Success --> Auto Logout (3s delay) -| | -| +-- --> UpdatePasscodeRoute -| | +-- Success --> Navigate Back -| | -| +-- --> LanguageRoute -| | +-- Apply --> Navigate Back (App reloads) -| | -| +-- --> ThemeRoute -| | +-- Apply --> Navigate Back (Theme applied) -| | -| +-- --> AboutRoute -| | -| +-- --> FAQRoute -| | +-- Contact Us --> HelpRoute -| | -| +-- --> HelpRoute -| | +-- FAQ Card --> FAQRoute -| | +-- Call Us --> Phone Dialer -| | +-- Mail Us --> Email Client -| | -| +-- --> AppInfoRoute -| | -| +-- --> Rate Us (In-App Review) -| | -| +-- --> Logout Dialog -| +-- Confirm --> Clear Data --> Login Screen -``` - ---- - -## 11. Edge Cases & Error Handling - -### Network Errors -- Settings screen monitors network status -- Profile card shows loading/error state when offline -- Retry button available for failed profile fetch - -### Password Change -- Maximum 5 failed attempts before blocking -- Too many attempts shows error dialog -- Auto logout after successful password change (3 second delay) -- Sensitive data cleared on ViewModel disposal - -### Passcode Change -- 4-digit numeric input enforced -- Debounced validation (300ms delay) -- Success dialog with navigation to passcode screen - -### Theme Selection -- Time-based theme shows picker dialog -- Persisted to DataStore immediately -- App theme updates in real-time - -### Language Change -- App locale updates immediately -- Persisted to UserPreferences -- UI refreshes with new strings - ---- - -## Changelog - -| Date | Change | -|------|--------| -| 2025-12-29 | Initial spec from codebase analysis | diff --git a/claude-product-cycle/design-spec-layer/features/settings/STATUS.md b/claude-product-cycle/design-spec-layer/features/settings/STATUS.md deleted file mode 100644 index 9926398f4..000000000 --- a/claude-product-cycle/design-spec-layer/features/settings/STATUS.md +++ /dev/null @@ -1,103 +0,0 @@ -# Settings - Implementation Status - -> **Last Updated**: 2025-12-29 -> **Overall Status**: ✅ Done - ---- - -## Implementation Checklist - -- [x] SPEC.md created -- [x] API.md created -- [x] Feature: ViewModels + Screens (6 screens) -- [x] Navigation: Routes registered -- [x] DI: Modules registered -- [x] Components: Settings items and dialogs -- [x] STATUS.md updated - ---- - -## Layer Status - -| Layer | Status | Files | -|-------|--------|-------| -| Feature (Settings) | ✅ | SettingsViewModel.kt, SettingsScreen.kt | -| Feature (ChangePassword) | ✅ | ChangePasswordViewModel.kt, ChangePasswordScreen.kt | -| Feature (ChangeTheme) | ✅ | ChangeThemeViewModel.kt, ChangeThemeScreen.kt | -| Feature (Language) | ✅ | LanguageViewModel.kt, LanguageScreen.kt | -| Feature (FAQ) | ✅ | FaqViewmodel.kt, FaqScreen.kt | -| Feature (Help) | ✅ | HelpScreen.kt | -| Feature (About) | ✅ | AboutScreen.kt | -| Feature (AppInfo) | ✅ | AppInfoScreen.kt | -| Navigation | ✅ | SettingsNavGraphRoute.kt, Navigation files | -| DI | ✅ | SettingsModule.kt | -| Components | ✅ | SettingsItems.kt, MifosLogoutDilaog.kt | - ---- - -## Files - -### Feature Layer - Main Settings Screen -- `feature/settings/src/commonMain/kotlin/org/mifos/mobile/feature/settings/settings/SettingsViewModel.kt` -- `feature/settings/src/commonMain/kotlin/org/mifos/mobile/feature/settings/settings/SettingsScreen.kt` -- `feature/settings/src/commonMain/kotlin/org/mifos/mobile/feature/settings/settings/SettingsRoute.kt` - -### Feature Layer - Change Password Screen -- `feature/settings/src/commonMain/kotlin/org/mifos/mobile/feature/settings/password/ChangePasswordViewModel.kt` -- `feature/settings/src/commonMain/kotlin/org/mifos/mobile/feature/settings/password/ChangePasswordScreen.kt` -- `feature/settings/src/commonMain/kotlin/org/mifos/mobile/feature/settings/password/ChangePasswordNavigation.kt` - -### Feature Layer - Change Theme Screen -- `feature/settings/src/commonMain/kotlin/org/mifos/mobile/feature/settings/theme/ChangeThemeViewModel.kt` -- `feature/settings/src/commonMain/kotlin/org/mifos/mobile/feature/settings/theme/ChangeThemeScreen.kt` -- `feature/settings/src/commonMain/kotlin/org/mifos/mobile/feature/settings/theme/ChangeThemeRoute.kt` - -### Feature Layer - Language Screen -- `feature/settings/src/commonMain/kotlin/org/mifos/mobile/feature/settings/language/LanguageViewModel.kt` -- `feature/settings/src/commonMain/kotlin/org/mifos/mobile/feature/settings/language/LanguageScreen.kt` -- `feature/settings/src/commonMain/kotlin/org/mifos/mobile/feature/settings/language/LanguageRoute.kt` - -### Feature Layer - FAQ Screen -- `feature/settings/src/commonMain/kotlin/org/mifos/mobile/feature/settings/faq/FaqViewmodel.kt` -- `feature/settings/src/commonMain/kotlin/org/mifos/mobile/feature/settings/faq/FaqScreen.kt` -- `feature/settings/src/commonMain/kotlin/org/mifos/mobile/feature/settings/faq/FaqNavigation.kt` - -### Feature Layer - Info Screens -- `feature/settings/src/commonMain/kotlin/org/mifos/mobile/feature/settings/help/HelpScreen.kt` -- `feature/settings/src/commonMain/kotlin/org/mifos/mobile/feature/settings/help/HelpNavigation.kt` -- `feature/settings/src/commonMain/kotlin/org/mifos/mobile/feature/settings/about/AboutScreen.kt` -- `feature/settings/src/commonMain/kotlin/org/mifos/mobile/feature/settings/about/AboutNavigation.kt` -- `feature/settings/src/commonMain/kotlin/org/mifos/mobile/feature/settings/appInfo/AppInfoScreen.kt` -- `feature/settings/src/commonMain/kotlin/org/mifos/mobile/feature/settings/appInfo/AppInfoNavigation.kt` - -### Navigation Layer -- `feature/settings/src/commonMain/kotlin/org/mifos/mobile/feature/settings/navigation/SettingsNavGraphRoute.kt` - -### DI Layer -- `feature/settings/src/commonMain/kotlin/org/mifos/mobile/feature/settings/di/SettingsModule.kt` - -### Components -- `feature/settings/src/commonMain/kotlin/org/mifos/mobile/feature/settings/componenets/SettingsItems.kt` -- `feature/settings/src/commonMain/kotlin/org/mifos/mobile/feature/settings/componenets/MifosLogoutDilaog.kt` - -### Utilities -- `feature/settings/src/commonMain/kotlin/org/mifos/mobile/feature/settings/util/AppVersion.kt` -- `feature/settings/src/androidMain/kotlin/org/mifos/mobile/feature/settings/util/AppVersion.android.kt` -- `feature/settings/src/desktopMain/kotlin/org/mifos/mobile/feature/settings/util/AppVersion.desktop.kt` -- `feature/settings/src/jsMain/kotlin/org/mifos/mobile/feature/settings/util/AppVersion.js.kt` -- `feature/settings/src/nativeMain/kotlin/org/mifos/mobile/feature/settings/util/AppVersion.native.kt` -- `feature/settings/src/wasmJsMain/kotlin/org/mifos/mobile/feature/settings/util/AppVersion.wasmJs.kt` - ---- - -## Gaps - -None identified. - ---- - -## Changelog - -| Date | Change | -|------|--------| -| 2025-12-29 | Initial status documentation - All screens implemented and available | diff --git a/claude-product-cycle/design-spec-layer/features/settings/mockups/FIGMA_LINKS.md b/claude-product-cycle/design-spec-layer/features/settings/mockups/FIGMA_LINKS.md deleted file mode 100644 index 7e5c37996..000000000 --- a/claude-product-cycle/design-spec-layer/features/settings/mockups/FIGMA_LINKS.md +++ /dev/null @@ -1,62 +0,0 @@ -# Settings Feature - Figma Links - -> **Feature**: Settings (Personal Command Center) -> **Status**: Pending Design Export -> **Last Updated**: 2025-01-04 - ---- - -## Figma Design Links - -After generating designs using AI tools (Stitch/Figma), paste the links below: - -### Main Screens - -| Screen | Figma Link | Status | -|--------|------------|--------| -| Command Center Hub | `[Paste link here]` | Pending | -| Profile Dashboard | `[Paste link here]` | Pending | -| Security Center | `[Paste link here]` | Pending | -| Appearance Settings | `[Paste link here]` | Pending | -| Privacy & Data Center | `[Paste link here]` | Pending | -| Notifications Hub | `[Paste link here]` | Pending | -| Connected Services | `[Paste link here]` | Pending | -| Help & Support | `[Paste link here]` | Pending | -| About | `[Paste link here]` | Pending | - -### Component Library - -| Component | Figma Link | Status | -|-----------|------------|--------| -| Profile Card | `[Paste link here]` | Pending | -| Security Score Ring | `[Paste link here]` | Pending | -| Settings List Item | `[Paste link here]` | Pending | -| Quick Action Button | `[Paste link here]` | Pending | -| Toggle Switch | `[Paste link here]` | Pending | -| Achievement Badge | `[Paste link here]` | Pending | - -### Dark Mode Variants - -| Screen | Figma Link | Status | -|--------|------------|--------| -| Command Center Hub (Dark) | `[Paste link here]` | Pending | -| Security Center (Dark) | `[Paste link here]` | Pending | -| Appearance Settings (Dark) | `[Paste link here]` | Pending | - ---- - -## Export Checklist - -- [ ] Export all screens at 1x, 2x, 3x -- [ ] Export component assets as SVG -- [ ] Document color variables -- [ ] Create prototype connections -- [ ] Add interaction annotations -- [ ] Review accessibility contrast -- [ ] Verify dark mode mappings - ---- - -## Notes - -_Add any design notes, feedback, or revision history here._ diff --git a/claude-product-cycle/design-spec-layer/features/settings/mockups/PROMPTS.md b/claude-product-cycle/design-spec-layer/features/settings/mockups/PROMPTS.md deleted file mode 100644 index e9703bb10..000000000 --- a/claude-product-cycle/design-spec-layer/features/settings/mockups/PROMPTS.md +++ /dev/null @@ -1,367 +0,0 @@ -# Settings Feature - AI Design Tool Prompts - -> **Generated from**: MOCKUP.md v2.0 -> **Design Pattern**: Personal Command Center -> **Primary Gradient**: #667EEA (Purple) -> #764BA2 (Deep Purple) -> **Generated**: 2025-01-04 - ---- - -## Google Stitch Prompts - -### Prompt 1: Command Center Hub (Main Settings) - -``` -Create a mobile settings screen called "Command Center Hub" for a fintech banking app. - -Design specifications: -- Material Design 3 with 2025 fintech patterns -- Primary gradient: #667EEA to #764BA2 (purple-blue) -- Background: #F8F9FA - -Header Section: -- Gradient card with user profile: avatar with initials, name, email, verified badge -- Profile completion progress bar showing 96% with "Add phone number to reach 100%" CTA -- Avatar shows 96% completion ring - -Quick Actions Row: -- 4 icon buttons in horizontal row: Lock App, Dark Mode, Mute Alerts, Export Data -- Each button: 56dp square, #F8F9FA background, 16dp corners - -Security Health Card: -- Security score visualization: "88/100 GOOD" with progress bar -- Checklist items with status icons: Passcode enabled (green check), Biometrics active (green check), Password warning (orange), 2FA not enabled (red X) -- "Improve Security" CTA button - -Settings List: -- List items with leading icons and chevrons: - - Profile & Account (person icon) - - Security Center (lock icon) - - Appearance (palette icon) - - Notifications (bell icon) - - Connected Services (link icon) - - Privacy & Data (chart icon) - - Help & Support (help icon) - - About (info icon) -- Each row: 72dp height, 16dp padding, subtle dividers - -Footer: -- Sign Out button (outlined, red text) -- Version text: "v2.0.0 (Build 2025.12.30)" - -Style: Clean, professional, trust-focused fintech aesthetic -``` - -### Prompt 2: Profile Dashboard - -``` -Create a Profile Dashboard screen for a fintech banking app. - -Design specifications: -- Material Design 3 with 2025 patterns -- Primary gradient header: #667EEA to #764BA2 - -Header Section: -- Large gradient header with centered avatar (96dp) -- Avatar with "Change Photo" camera icon overlay -- User name "John Doe" with verified badge -- "Member since Dec 2023" subtitle - -Profile Completion Card: -- 96% completion with animated progress bar -- Checklist: Email verified, Identity verified, Address added (all green checks) -- One incomplete: "Add phone number (+4%)" with arrow - -Achievements Section: -- Horizontal scrollable badges: Early Adopter, Power User, 1 Year Member (locked at 11mo), Secure Account -- Each badge: 80dp square, icon, title, checkmark or lock -- "View All 8 Achievements" link - -Personal Information Form: -- Editable fields with icons: - - Full Name (editable) - - Email (locked, cannot change) - - Phone Number (not added, plus icon to add) - - Address (editable) - - Account Number (locked, read-only) -- Each field: 72dp height, label above value - -Danger Zone: -- Delete Account option with warning text -- Red text, caution styling - -Style: Trust-building, progress-focused, gamified elements -``` - -### Prompt 3: Security Center - -``` -Create a Security Center screen for a fintech banking app. - -Design specifications: -- Material Design 3 with security-focused design -- Primary gradient: #667EEA to #764BA2 for header - -Security Score Header: -- Large circular score display: "88" with "GOOD" label -- Gradient background card -- Text: "Your Security Score" and "Add 2FA to reach 100" - -Quick Security Actions: -- Two large buttons side by side: "Lock App Now", "Freeze Accounts" -- Icon + text, outlined style - -Authentication Section: -- List items with toggles and chevrons: - - Passcode: "4-digit PIN enabled, Last changed: 30 days ago" - - Biometrics: Toggle ON, "Face ID / Touch ID enabled" - - Password: Warning icon, "Consider updating, Last changed: 90 days ago" - - Two-Factor Authentication: "+12 pts" badge, "Not enabled, Recommended" - -Session & Devices Section: -- Auto-Lock Timeout: "After 5 minutes" -- Active Sessions: "2 devices connected" with device names -- Privacy Screen: Toggle OFF, "Hide balances in app switcher" - -Emergency Section: -- Red-tinted options: - - Sign Out All Devices - - Report Compromised Account -- Warning styling with immediate action indicators - -Colors: Green for enabled (#00D09C), Orange for warnings (#FFB800), Red for critical (#FF4757) -``` - -### Prompt 4: Appearance Settings - -``` -Create an Appearance Settings screen for a fintech banking app. - -Design specifications: -- Material Design 3 with theme customization -- Support for light/dark/system themes - -Theme Selection: -- Three theme cards in horizontal layout: - - Light: Sun icon, light background preview - - Dark: Moon icon, dark background preview (selected with gradient border) - - System: Sun/Moon combo icon -- Radio selection indicator below each - -Live Preview Card: -- Mini app preview showing how theme looks -- Balance card mockup, transaction list preview -- Animated transition between themes - -Scheduled Theme: -- Auto Dark Mode toggle with "Switch to dark mode at sunset" -- Custom Schedule option: "Dark: 6:00 PM - 7:00 AM" - -Display Settings: -- Text Size: Slider from A- to A+ with "Medium" label -- Bold Text: Toggle switch -- Reduce Motion: Toggle with "Minimize animations" subtitle -- Increase Contrast: Toggle - -Language & Region: -- App Language: "English (US)" with chevron -- Currency Format: "USD ($)" with chevron -- Date Format: "MM/DD/YYYY" with chevron - -Style: Clean preferences layout, immediate visual feedback, accessibility-conscious -``` - -### Prompt 5: Privacy & Data Center - -``` -Create a Privacy & Data Center screen for a fintech banking app. - -Design specifications: -- Material Design 3 with privacy-focused design -- Trust-building visual elements - -Header Card: -- Gradient card with lock icon -- "Your Privacy Matters" headline -- "Control how your data is used and shared" subtitle - -Your Data Section: -- Download Your Data: "Get a copy of all your information, Export as PDF, CSV, or JSON" -- Request Data Transfer: "Move your data to another provider" -- Data Storage: "Where your data is stored, EU Region, Encrypted" - -Sharing Preferences: -- Toggle list items: - - Analytics & Improvements: ON, "Help us improve the app, No personal data shared" - - Personalized Offers: OFF - - Marketing Communications: OFF - - Third-Party Sharing: OFF - -App Permissions: -- Permission status list: - - Camera: "Granted" (green) - - Location: "Denied" (red) - - Notifications: "Granted" (green) - - Biometrics: "Granted" (green) -- Chevrons to open system settings - -Legal Section: -- Links: Privacy Policy, Cookie Policy, Terms of Service -- Simple list with chevrons - -Style: Transparency-focused, user control emphasis, GDPR-compliant design -``` - ---- - -## Figma MCP Prompts - -### Prompt 1: Command Center Hub Frame - -``` -Create a Figma frame for "Settings - Command Center Hub" mobile screen (375x812px). - -Components needed: -1. Status bar (system) -2. Header: "Settings" title with gear icon - -3. Profile Card Component: - - Auto-layout vertical, 16dp padding - - Gradient fill: #667EEA to #764BA2 - - Avatar (48dp) with completion ring overlay - - Name, email, verified badge - - Progress bar component with percentage - -4. Quick Actions Component: - - Auto-layout horizontal, gap 12dp - - 4 icon button variants: Lock, Dark Mode, Mute, Export - - Each: 56x56dp, surface color, 16dp radius - -5. Security Health Card: - - Score display with circular progress - - Status checklist with colored icons - - CTA button - -6. Settings List Component: - - Repeating list item: icon, label, subtitle, chevron - - 72dp height per item - - Divider between items - -7. Sign Out Button: - - Outlined style, error color - - Full width - -Design tokens to use: -- Colors: Primary (#667EEA), Secondary (#764BA2), Surface (#FFFFFF), Background (#F8F9FA) -- Typography: Title (20sp bold), Body (16sp), Caption (12sp) -- Spacing: 16dp standard, 24dp section gaps -- Radius: 16dp cards, 24dp buttons -``` - -### Prompt 2: Complete Settings Flow - -``` -Create a Figma prototype flow for Settings feature with these frames: - -Frame 1: Command Center Hub (main) -- Profile card with completion progress -- Quick actions grid -- Security health card -- Settings list - -Frame 2: Profile Dashboard -- Large avatar header -- Completion tracking -- Achievement badges -- Personal info form - -Frame 3: Security Center -- Security score circle -- Authentication options -- Device sessions -- Emergency actions - -Frame 4: Appearance Settings -- Theme picker with preview -- Display options -- Language settings - -Frame 5: Privacy & Data -- Data export options -- Sharing toggles -- Permissions list - -Prototype connections: -- Main -> each sub-screen via list item tap -- Back button returns to main -- Toggles show state changes - -Component library: -- Create reusable toggle, list item, card, button components -- Define color styles and text styles -- Use auto-layout for responsive behavior -``` - ---- - -## Design Tokens - -```json -{ - "feature": "settings", - "version": "2.0", - "colors": { - "primary": "#667EEA", - "secondary": "#764BA2", - "surface": "#FFFFFF", - "background": "#F8F9FA", - "success": "#00D09C", - "warning": "#FFB800", - "error": "#FF4757", - "textPrimary": "#1F2937", - "textSecondary": "#6B7280" - }, - "gradients": { - "primary": "linear-gradient(135deg, #667EEA 0%, #764BA2 100%)", - "security": "linear-gradient(135deg, #00D09C 0%, #38EF7D 100%)" - }, - "typography": { - "title": { "size": 20, "weight": "bold" }, - "subtitle": { "size": 16, "weight": "medium" }, - "body": { "size": 14, "weight": "regular" }, - "caption": { "size": 12, "weight": "regular" } - }, - "spacing": { - "xs": 4, - "sm": 8, - "md": 16, - "lg": 24, - "xl": 32 - }, - "radius": { - "sm": 8, - "md": 16, - "lg": 24, - "pill": 100 - }, - "elevation": { - "card": "0 2px 8px rgba(0,0,0,0.08)", - "modal": "0 8px 24px rgba(0,0,0,0.16)" - } -} -``` - ---- - -## Screen Checklist - -| Screen | Stitch Prompt | Figma Prompt | Status | -|--------|---------------|--------------|--------| -| Command Center Hub | 1 | 1, 2 | Ready | -| Profile Dashboard | 2 | 2 | Ready | -| Security Center | 3 | 2 | Ready | -| Appearance Settings | 4 | 2 | Ready | -| Privacy & Data Center | 5 | 2 | Ready | -| Notifications Hub | - | - | Pending | -| Help & Support | - | - | Pending | -| About | - | - | Pending | diff --git a/claude-product-cycle/design-spec-layer/features/settings/mockups/design-tokens.json b/claude-product-cycle/design-spec-layer/features/settings/mockups/design-tokens.json deleted file mode 100644 index 536f7a949..000000000 --- a/claude-product-cycle/design-spec-layer/features/settings/mockups/design-tokens.json +++ /dev/null @@ -1,184 +0,0 @@ -{ - "feature": "settings", - "version": "2.0", - "designPattern": "Personal Command Center", - "lastUpdated": "2025-01-04", - "colors": { - "primary": { - "default": "#667EEA", - "dark": "#5A6FD6" - }, - "secondary": { - "default": "#764BA2", - "dark": "#6A4292" - }, - "surface": { - "light": "#FFFFFF", - "dark": "#1A1F2E" - }, - "background": { - "light": "#F8F9FA", - "dark": "#0D1117" - }, - "card": { - "light": "#FFFFFF", - "dark": "#21262D" - }, - "semantic": { - "success": "#00D09C", - "warning": "#FFB800", - "error": "#FF4757", - "info": "#667EEA" - }, - "text": { - "primary": { - "light": "#1F2937", - "dark": "#F0F6FC" - }, - "secondary": { - "light": "#6B7280", - "dark": "#8B949E" - }, - "disabled": { - "light": "#9CA3AF", - "dark": "#6B7280" - } - }, - "divider": { - "light": "#E1E4E8", - "dark": "#30363D" - } - }, - "gradients": { - "primary": { - "type": "linear", - "angle": 135, - "stops": [ - { "color": "#667EEA", "position": 0 }, - { "color": "#764BA2", "position": 100 } - ] - }, - "security": { - "type": "linear", - "angle": 135, - "stops": [ - { "color": "#00D09C", "position": 0 }, - { "color": "#38EF7D", "position": 100 } - ] - }, - "warning": { - "type": "linear", - "angle": 135, - "stops": [ - { "color": "#FFB800", "position": 0 }, - { "color": "#FF8C00", "position": 100 } - ] - } - }, - "typography": { - "fontFamily": { - "primary": "Inter", - "mono": "JetBrains Mono" - }, - "styles": { - "h1": { "size": 28, "weight": 700, "lineHeight": 1.2 }, - "h2": { "size": 24, "weight": 700, "lineHeight": 1.3 }, - "h3": { "size": 20, "weight": 600, "lineHeight": 1.4 }, - "subtitle": { "size": 16, "weight": 600, "lineHeight": 1.5 }, - "body": { "size": 14, "weight": 400, "lineHeight": 1.5 }, - "caption": { "size": 12, "weight": 400, "lineHeight": 1.4 }, - "overline": { "size": 10, "weight": 600, "lineHeight": 1.6, "letterSpacing": 1.5 } - } - }, - "spacing": { - "xxs": 2, - "xs": 4, - "sm": 8, - "md": 16, - "lg": 24, - "xl": 32, - "xxl": 48 - }, - "radius": { - "xs": 4, - "sm": 8, - "md": 12, - "lg": 16, - "xl": 20, - "xxl": 24, - "pill": 100 - }, - "elevation": { - "none": "none", - "xs": "0 1px 2px rgba(0,0,0,0.05)", - "sm": "0 2px 4px rgba(0,0,0,0.08)", - "md": "0 4px 8px rgba(0,0,0,0.12)", - "lg": "0 8px 16px rgba(0,0,0,0.16)", - "xl": "0 12px 24px rgba(0,0,0,0.20)" - }, - "components": { - "profileCard": { - "height": "auto", - "padding": 16, - "radius": 20, - "avatarSize": 64, - "progressHeight": 6 - }, - "quickAction": { - "size": 56, - "iconSize": 24, - "radius": 16, - "gap": 12 - }, - "securityCard": { - "scoreSize": 120, - "strokeWidth": 12, - "padding": 20 - }, - "listItem": { - "height": 72, - "iconSize": 24, - "padding": 16, - "gap": 12 - }, - "toggle": { - "width": 52, - "height": 32, - "thumbSize": 28 - }, - "button": { - "height": { - "sm": 36, - "md": 44, - "lg": 52 - }, - "radius": 12, - "padding": { "horizontal": 24, "vertical": 12 } - } - }, - "animation": { - "duration": { - "instant": 100, - "fast": 200, - "normal": 300, - "slow": 500 - }, - "easing": { - "default": "cubic-bezier(0.4, 0.0, 0.2, 1)", - "decelerate": "cubic-bezier(0.0, 0.0, 0.2, 1)", - "accelerate": "cubic-bezier(0.4, 0.0, 1, 1)", - "spring": "cubic-bezier(0.175, 0.885, 0.32, 1.275)" - } - }, - "screens": [ - "commandCenterHub", - "profileDashboard", - "securityCenter", - "appearanceSettings", - "privacyAndData", - "notificationsHub", - "connectedServices", - "helpAndSupport", - "about" - ] -} diff --git a/claude-product-cycle/design-spec-layer/features/settings/mockups/dummy/01-command-center-hub.png b/claude-product-cycle/design-spec-layer/features/settings/mockups/dummy/01-command-center-hub.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/settings/mockups/dummy/02-profile-dashboard.png b/claude-product-cycle/design-spec-layer/features/settings/mockups/dummy/02-profile-dashboard.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/settings/mockups/dummy/03-security-center.png b/claude-product-cycle/design-spec-layer/features/settings/mockups/dummy/03-security-center.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/settings/mockups/dummy/04-appearance-settings.png b/claude-product-cycle/design-spec-layer/features/settings/mockups/dummy/04-appearance-settings.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/settings/mockups/dummy/05-privacy-data.png b/claude-product-cycle/design-spec-layer/features/settings/mockups/dummy/05-privacy-data.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/settings/mockups/dummy/06-notifications-hub.png b/claude-product-cycle/design-spec-layer/features/settings/mockups/dummy/06-notifications-hub.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/settings/mockups/dummy/07-connected-services.png b/claude-product-cycle/design-spec-layer/features/settings/mockups/dummy/07-connected-services.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/settings/mockups/dummy/08-help-support.png b/claude-product-cycle/design-spec-layer/features/settings/mockups/dummy/08-help-support.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/settings/mockups/dummy/09-about.png b/claude-product-cycle/design-spec-layer/features/settings/mockups/dummy/09-about.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/share-account/API.md b/claude-product-cycle/design-spec-layer/features/share-account/API.md deleted file mode 100644 index 588a4eedb..000000000 --- a/claude-product-cycle/design-spec-layer/features/share-account/API.md +++ /dev/null @@ -1,745 +0,0 @@ -# Share Account - API Reference - -> **Base URL**: `https://tt.mifos.community/fineract-provider/api/v1/self/` -> **Authentication**: Basic Auth with `Fineract-Platform-TenantId` header -> **Last Updated**: 2025-12-29 - ---- - -## Authentication Headers - -All endpoints require: -``` -Headers: - Authorization: Basic {base64EncodedAuthenticationKey} - Fineract-Platform-TenantId: {tenantId} - Content-Type: application/json -``` - ---- - -## 1. Get Share Products - -### GET /self/products/share - -**Purpose**: Fetch available share products for a client - -**Request**: -``` -GET /self/products/share?clientId=123 -``` - -**Query Parameters**: -| Parameter | Type | Required | Description | -|-----------|------|----------|-------------| -| clientId | Long | Optional | Client ID to filter available products | - -**Response**: -```json -{ - "totalFilteredRecords": 2, - "pageItems": [ - { - "id": 1, - "name": "Equity Shares", - "shortName": "ES", - "description": "Standard equity shares for cooperative members", - "currency": { - "code": "USD", - "name": "US Dollar", - "decimalPlaces": 2, - "displaySymbol": "$", - "nameCode": "currency.USD", - "displayLabel": "US Dollar ($)" - }, - "totalShares": 10000, - "totalSharesIssued": 5000, - "unitPrice": 25.0, - "shareCapital": 250000.0, - "nominalShares": 100, - "minimumShares": 10, - "maximumShares": 500, - "allowDividendCalculationForInactiveClients": false, - "lockinPeriod": 12, - "lockPeriodTypeEnum": { - "id": 2, - "code": "savings.lockin.period.months", - "value": "Months" - }, - "minimumActivePeriod": 6, - "minimumActivePeriodForDividendsTypeEnum": { - "id": 2, - "code": "savings.lockin.period.months", - "value": "Months" - }, - "accountingRule": { - "id": 2, - "code": "accountingRuleType.cash", - "value": "CASH BASED" - } - } - ] -} -``` - -**Kotlin DTO**: -```kotlin -@Serializable -@Parcelize -data class ShareProduct( - val accountingRule: AccountingRule? = null, - val allowDividendCalculationForInactiveClients: Boolean? = null, - val currency: Currency? = null, - val description: String? = null, - val id: Int? = null, - val lockPeriodTypeEnum: LockPeriodTypeEnum? = null, - val lockinPeriod: Int? = null, - val maximumShares: Int? = null, - val minimumActivePeriod: Int? = null, - val minimumActivePeriodForDividendsTypeEnum: MinimumActivePeriodForDividendsTypeEnum? = null, - val minimumShares: Int? = null, - val name: String? = null, - val nominalShares: Int? = null, - val shareCapital: Double? = null, - val shortName: String? = null, - val totalShares: Int? = null, - val totalSharesIssued: Int? = null, - val unitPrice: Double? = null, -) : Parcelable -``` - -**Service Method**: -```kotlin -@GET("${ApiEndPoints.PRODUCTS}/" + ApiEndPoints.SHARE) -fun getShareProducts( - @Query("clientId") clientId: Long?, -): Flow> -``` - -**Status**: Implemented in ShareAccountService - ---- - -## 2. Get Share Product Details - -### GET /self/products/share/{productId} - -**Purpose**: Fetch detailed information about a specific share product - -**Request**: -``` -GET /self/products/share/1?clientId=123 -``` - -**Path Parameters**: -| Parameter | Type | Required | Description | -|-----------|------|----------|-------------| -| productId | Long | Yes | Share product ID | - -**Query Parameters**: -| Parameter | Type | Required | Description | -|-----------|------|----------|-------------| -| clientId | Long | Optional | Client ID for eligibility check | - -**Response**: -```json -{ - "id": 1, - "name": "Equity Shares", - "shortName": "ES", - "description": "Standard equity shares for cooperative members", - "currency": { - "code": "USD", - "name": "US Dollar", - "decimalPlaces": 2, - "displaySymbol": "$", - "nameCode": "currency.USD", - "displayLabel": "US Dollar ($)" - }, - "totalShares": 10000, - "totalSharesIssued": 5000, - "unitPrice": 25.0, - "shareCapital": 250000.0, - "nominalShares": 100, - "marketPrice": [ - { - "id": 1, - "fromDate": [2024, 1, 1], - "shareValue": 25.0 - } - ], - "charges": [ - { - "id": 1, - "name": "Share Application Fee", - "amount": 10.0, - "chargeTimeType": { - "id": 1, - "code": "chargeTimeType.shareAccountActivation", - "value": "Share Account Activation" - } - } - ], - "allowDividendCalculationForInactiveClients": false, - "lockinPeriod": 12, - "lockPeriodTypeEnum": { - "id": 2, - "code": "savings.lockin.period.months", - "value": "Months" - }, - "minimumActivePeriod": 6, - "minimumActivePeriodForDividendsTypeEnum": { - "id": 2, - "code": "savings.lockin.period.months", - "value": "Months" - }, - "accountingRule": { - "id": 2, - "code": "accountingRuleType.cash", - "value": "CASH BASED" - }, - "accountingMappings": { - "shareReferenceId": 1, - "shareSuspenseId": 2, - "shareEquityId": 3 - }, - "clientSavingsAccounts": [ - { - "id": 1001, - "savingsProductName": "Primary Savings" - } - ] -} -``` - -**Kotlin DTO**: -```kotlin -@Serializable -@Parcelize -data class ShareProductDetails( - val id: Int? = null, - val name: String? = null, - val shortName: String? = null, - val description: String? = null, - val currency: Currency? = null, - val totalShares: Int? = null, - val totalSharesIssued: Int? = null, - val unitPrice: Double? = null, - val shareCapital: Double? = null, - val nominalShares: Int? = null, - val marketPrice: List? = emptyList(), - val charges: List? = emptyList(), - val allowDividendCalculationForInactiveClients: Boolean? = null, - val lockinPeriod: Int? = null, - val lockPeriodTypeEnum: EnumOption? = null, - val minimumActivePeriod: Int? = null, - val minimumActivePeriodForDividendsTypeEnum: EnumOption? = null, - val accountingRule: EnumOption? = null, - val accountingMappings: AccountingMappings? = null, - val clientSavingsAccounts: List? = emptyList(), -) : Parcelable - -@Serializable -@Parcelize -data class SavingsAccountSummary( - val id: Int? = null, - val savingsProductName: String? = null, -) : Parcelable -``` - -**Service Method**: -```kotlin -@GET("${ApiEndPoints.PRODUCTS}/" + ApiEndPoints.SHARE + "/{productId}") -fun getShareProductById( - @Path("productId") productId: Long, - @Query("clientId") clientId: Long?, -): Flow -``` - -**Status**: Implemented in ShareAccountService - ---- - -## 3. Submit Share Application - -### POST /self/shareaccounts - -**Purpose**: Submit a new share account application - -**Request**: -```json -POST /self/shareaccounts - -{ - "clientId": 123, - "productId": 1, - "requestedShares": 50, - "unitPrice": 25.0, - "savingsAccountId": 1001, - "applicationDate": "15 January 2024", - "submittedDate": "15 January 2024", - "locale": "en", - "dateFormat": "dd MMMM yyyy" -} -``` - -**Request Body Fields**: -| Field | Type | Required | Description | -|-------|------|----------|-------------| -| clientId | Long | Yes | Client ID | -| productId | Int | Yes | Share product ID | -| requestedShares | Int | Yes | Number of shares to purchase | -| unitPrice | Double | Yes | Price per share | -| savingsAccountId | Int | Yes | Linked savings account for payment | -| applicationDate | String | Yes | Date of application | -| submittedDate | String | Yes | Submission date | -| locale | String | Yes | Locale for date formatting | -| dateFormat | String | Yes | Date format pattern | - -**Response**: -```json -{ - "officeId": 1, - "clientId": 123, - "savingsId": 3001, - "resourceId": 3001 -} -``` - -**Kotlin DTO**: -```kotlin -@Serializable -data class ShareApplicationPayload( - val productId: Int, - val unitPrice: Double, - val requestedShares: Int, - val submittedDate: String, - val savingsAccountId: Int, - val applicationDate: String, - val locale: String, - val dateFormat: String, - val clientId: Long, -) -``` - -**Service Method**: -```kotlin -@POST(ApiEndPoints.SHARE_ACCOUNTS) -suspend fun submitShareApplication( - @Body payload: ShareApplicationPayload?, -): HttpResponse -``` - -**Status**: Implemented in ShareAccountService - ---- - -## 4. Get Share Account Details - -### GET /self/shareaccounts/{accountId} - -**Purpose**: Fetch detailed information about a specific share account - -**Request**: -``` -GET /self/shareaccounts/3001?associations=all -``` - -**Path Parameters**: -| Parameter | Type | Required | Description | -|-----------|------|----------|-------------| -| accountId | Long | Yes | Share account ID | - -**Query Parameters**: -| Parameter | Type | Default | Description | -|-----------|------|---------|-------------| -| associations | String | "all" | Include related data (all, transactions, charges) | - -**Response**: -```json -{ - "id": 3001, - "accountNo": "SH-0001234567", - "clientId": 123, - "clientName": "John Doe", - "productId": 1, - "productName": "Equity Shares", - "status": { - "id": 300, - "code": "shareAccountStatusType.active", - "value": "Active", - "submittedAndPendingApproval": false, - "approved": true, - "rejected": false, - "active": true, - "closed": false - }, - "currency": { - "code": "USD", - "name": "US Dollar", - "decimalPlaces": 2, - "displaySymbol": "$", - "nameCode": "currency.USD", - "displayLabel": "US Dollar ($)" - }, - "timeline": { - "submittedOnDate": [2024, 1, 15], - "submittedByUsername": "john.doe", - "submittedByFirstname": "John", - "submittedByLastname": "Doe", - "approvedDate": [2024, 1, 18], - "approvedByUsername": "admin", - "approvedByFirstname": "System", - "approvedByLastname": "Admin", - "activatedDate": [2024, 1, 20], - "activatedByUsername": "admin", - "activatedByFirstname": "System", - "activatedByLastname": "Admin" - }, - "summary": { - "id": 3001, - "accountNo": "SH-0001234567", - "productId": 1, - "productName": "Equity Shares", - "status": { - "id": 300, - "code": "shareAccountStatusType.active", - "value": "Active" - }, - "currency": { - "code": "USD", - "displaySymbol": "$" - }, - "totalApprovedShares": 50, - "totalPendingForApprovalShares": 0 - }, - "currentMarketPrice": 25.0, - "savingsAccountId": 1001, - "savingsAccountNumber": "SA-0001234567", - "allowDividendCalculationForInactiveClients": false, - "lockinPeriod": 12, - "lockPeriodTypeEnum": { - "id": 2, - "code": "savings.lockin.period.months", - "value": "Months" - }, - "minimumActivePeriod": 6, - "minimumActivePeriodTypeEnum": { - "id": 2, - "code": "savings.lockin.period.months", - "value": "Months" - }, - "charges": [ - { - "id": 1, - "chargeId": 1, - "accountId": 3001, - "name": "Share Application Fee", - "chargeTimeType": { - "id": 1, - "code": "chargeTimeType.shareAccountActivation", - "value": "Share Account Activation" - }, - "amount": 10.0, - "amountPaid": 10.0, - "amountOutstanding": 0.0, - "amountWaived": 0.0, - "isPaid": true, - "isActive": true - } - ], - "purchasedShares": [ - { - "id": 1, - "accountId": 3001, - "purchasedDate": [2024, 1, 20], - "numberOfShares": 50, - "purchasedPrice": 25.0, - "amount": 1250.0, - "amountPaid": 1250.0, - "chargeAmount": 10.0, - "status": { - "id": 300, - "code": "purchasedSharesStatusType.approved", - "value": "Approved" - }, - "type": { - "id": 500, - "code": "purchaseType.purchase", - "value": "Purchase" - } - } - ], - "dividends": [] -} -``` - -**Kotlin DTO**: -```kotlin -@Serializable -data class ShareAccountWithAssociations( - val id: Long? = null, - val accountNo: String? = null, - val clientId: Long? = null, - val clientName: String? = null, - val productId: Long? = null, - val productName: String? = null, - val status: Status? = null, - val currency: Currency? = null, - val timeline: Timeline? = null, - val summary: Summary? = null, - val currentMarketPrice: Double? = null, - val savingsAccountId: Long? = null, - val savingsAccountNumber: String? = null, - val allowDividendCalculationForInactiveClients: Boolean? = null, - val lockinPeriod: Int? = null, - val lockPeriodTypeEnum: EnumOptionData? = null, - val minimumActivePeriod: Int? = null, - val minimumActivePeriodTypeEnum: EnumOptionData? = null, - val charges: List = emptyList(), - val purchasedShares: List = emptyList(), - val dividends: List = emptyList(), -) -``` - -**Service Method**: -```kotlin -@GET(ApiEndPoints.SHARE_ACCOUNTS + "/{accountId}") -fun getShareAccountDetails( - @Path("accountId") accountId: Long, - @Query("associations") associations: String = "all", -): Flow -``` - -**Status**: Implemented in ShareAccountService - ---- - -## 5. Supporting Data Models - -### Status - -```kotlin -@Serializable -data class Status( - val id: Int? = null, - val code: String? = null, - val value: String? = null, - val submittedAndPendingApproval: Boolean? = null, - val approved: Boolean? = null, - val rejected: Boolean? = null, - val active: Boolean? = null, - val closed: Boolean? = null, -) -``` - -### Currency - -```kotlin -@Serializable -data class Currency( - val code: String? = null, - val name: String? = null, - val decimalPlaces: Int = 0, - val inMultiplesOf: Double = 0.0, - val displaySymbol: String? = null, - val nameCode: String? = null, - val displayLabel: String? = null, -) -``` - -### Timeline - -```kotlin -@Serializable -data class Timeline( - val submittedOnDate: List? = null, - val submittedByUsername: String? = null, - val submittedByFirstname: String? = null, - val submittedByLastname: String? = null, - val approvedDate: List? = null, - val approvedByUsername: String? = null, - val approvedByFirstname: String? = null, - val approvedByLastname: String? = null, - val activatedDate: List? = null, - val activatedByUsername: String? = null, - val activatedByFirstname: String? = null, - val activatedByLastname: String? = null, -) -``` - -### Summary - -```kotlin -@Serializable -data class Summary( - val id: Long? = null, - val accountNo: String? = null, - val productId: Long? = null, - val productName: String? = null, - val status: Status? = null, - val currency: Currency? = null, - val timeline: Timeline? = null, - val totalApprovedShares: Int? = null, - val totalPendingForApprovalShares: Int? = null, -) -``` - -### Transactions (Share Transactions) - -```kotlin -@Serializable -data class Transactions( - val accountId: Long? = null, - val amount: Double? = null, - val amountPaid: Double? = null, - val chargeAmount: Double? = null, - val id: Long? = null, - val numberOfShares: Int? = null, - val purchasedDate: List = emptyList(), - val purchasedPrice: Double? = null, - val status: EnumOptionData? = null, - val type: EnumOptionData? = null, -) -``` - -### EnumOptionData - -```kotlin -@Serializable -data class EnumOptionData( - val id: Long? = null, - val code: String? = null, - val value: String? = null, -) -``` - -### ShareAccount (List Item) - -```kotlin -@Serializable -data class ShareAccount( - val id: Long = 0, - val accountNo: String? = null, - val totalApprovedShares: Int? = null, - val totalPendingForApprovalShares: Int? = null, - val productId: Int? = null, - val productName: String? = null, - val shortProductName: String? = null, - val status: Status? = null, - val currency: Currency? = null, - val timeline: Timeline? = null, -) -``` - ---- - -## API Summary Table - -| Endpoint | Method | Service | Repository | Priority | -|----------|--------|---------|------------|----------| -| /self/products/share | GET | ShareAccountService | ShareAccountRepository | P1 | -| /self/products/share/{id} | GET | ShareAccountService | ShareAccountRepository | P1 | -| /self/shareaccounts | POST | ShareAccountService | ShareAccountRepository | P1 | -| /self/shareaccounts/{id} | GET | ShareAccountService | ShareAccountRepository | P0 | -| /self/clients/{id}/accounts | GET | ClientService | AccountsRepository | P0 | - ---- - -## API Endpoint Constants - -```kotlin -object ApiEndPoints { - const val SHARE_ACCOUNTS = "shareaccounts" - const val SHARE = "share" - const val PRODUCTS = "products" -} -``` - ---- - -## Error Responses - -| Status Code | Error | Description | User Message | -|-------------|-------|-------------|--------------| -| 400 | Bad Request | Invalid request payload | "Please check your input" | -| 401 | Unauthorized | Invalid/expired token | "Please login again" | -| 403 | Forbidden | Insufficient permissions | "Access denied" | -| 404 | Not Found | Account doesn't exist | "Share account not found" | -| 409 | Conflict | Business rule violation | "Unable to process request" | -| 500 | Server Error | Internal server error | "Service unavailable" | - -**Error Response Format**: -```json -{ - "developerMessage": "Detailed error for debugging", - "httpStatusCode": "400", - "defaultUserMessage": "User-friendly error message", - "userMessageGlobalisationCode": "error.msg.code", - "errors": [ - { - "developerMessage": "Field-specific error", - "defaultUserMessage": "Number of shares must be greater than 0", - "userMessageGlobalisationCode": "validation.msg.shares.invalid", - "parameterName": "requestedShares" - } - ] -} -``` - ---- - -## Repository Implementation - -```kotlin -class ShareAccountRepositoryImp( - private val dataManager: DataManager, - private val ioDispatcher: CoroutineDispatcher, -) : ShareAccountRepository { - - override fun getShareProducts(clientId: Long?): Flow>> { - return dataManager.shareAccountApi.getShareProducts(clientId) - .map { response -> DataState.Success(response) } - .catch { exception -> DataState.Error(exception, exception.message) } - .flowOn(ioDispatcher) - } - - override fun getShareProductById( - productId: Long, - clientId: Long?, - ): Flow> { - return dataManager.shareAccountApi.getShareProductById(productId, clientId) - .asDataStateFlow().flowOn(ioDispatcher) - } - - override suspend fun submitShareApplication(payload: ShareApplicationPayload?): DataState { - return withContext(ioDispatcher) { - try { - val response = dataManager.shareAccountApi.submitShareApplication(payload) - DataState.Success(response.bodyAsText()) - } catch (e: ClientRequestException) { - val errorMessage = extractErrorMessage(e.response) - DataState.Error(Exception(errorMessage), null) - } catch (e: IOException) { - DataState.Error(Exception("Network error: ${e.message}"), null) - } catch (e: ServerResponseException) { - DataState.Error(Exception("Server error: ${e.message}"), null) - } - } - } - - override fun getShareAccountDetails(accountId: Long): Flow> { - return dataManager.shareAccountApi.getShareAccountDetails(accountId) - .asDataStateFlow() - .flowOn(ioDispatcher) - } -} -``` - ---- - -## Changelog - -| Date | Change | -|------|--------| -| 2025-12-29 | Initial API documentation based on implementation | diff --git a/claude-product-cycle/design-spec-layer/features/share-account/MOCKUP.md b/claude-product-cycle/design-spec-layer/features/share-account/MOCKUP.md deleted file mode 100644 index 815612fdf..000000000 --- a/claude-product-cycle/design-spec-layer/features/share-account/MOCKUP.md +++ /dev/null @@ -1,1772 +0,0 @@ -# Share Account - UI Mockups v2.0 - -> **Design Style**: Investment Portfolio Fintech (Robinhood/Public inspired) -> **Primary Gradient**: #667EEA to #764BA2 (Purple-Blue) -> **Version**: 2.0 - 2025 Fintech Patterns -> **Last Updated**: 2025-12-30 - ---- - -## Design Philosophy - -### 2025 Investment/Share Management Patterns - -| Pattern | Implementation | User Benefit | -|---------|----------------|--------------| -| **Portfolio Dashboard** | Visual investment overview | Holistic wealth view | -| **Dividend Growth Viz** | Compound growth projections | Long-term motivation | -| **Share Performance Chart** | Price history with trends | Investment tracking | -| **Investment Streaks** | Consecutive investment rewards | Habit building | -| **DRIP (Dividend Reinvest)** | Auto-reinvestment toggle | Compound growth | -| **Price Alerts** | Smart notifications | Opportunity awareness | -| **Member Governance** | Voting rights display | Engagement | -| **AI Investment Tips** | Smart suggestions | Education | -| **Achievement Badges** | Long-term holder rewards | Gamification | - ---- - -## Screen 1: Share Portfolio Dashboard - -``` -+------------------------------------------+ -| 9:41 [***] | -+------------------------------------------+ -| | -| [<] My Investments [+] [?] | -| | -+------------------------------------------+ -| | -| PORTFOLIO HERO | -| +------------------------------------+ | -| |########################################| -| |## ##| -| |## [PORTFOLIO] Your Portfolio ##| -| |## ##| -| |## Total Value ##| -| |## ##| -| |## $5,750.00 ##|<-- Display Large -| |## ##| 36sp ExtraBold -| |## +---------------------------+ ##| -| |## | [UP] +$425.00 (+7.9%) | ##|<-- Profit indicator -| |## | All Time Gain | ##| Green if positive -| |## +---------------------------+ ##| -| |## ##| -| |## +-------------+ +-------------+ ##| -| |## | [COIN] | | [$] | ##| -| |## | 150 | | $1,250 | ##| -| |## | Shares | | Dividends | ##| -| |## +-------------+ +-------------+ ##| -| |## ##| -| |########################################| -| +------------------------------------+ | -| ^ | -| | | -| Gradient: #667EEA -> #764BA2 | -| Sparkline chart in background | -| | -+------------------------------------------+ -| | -| PORTFOLIO PERFORMANCE | -| +------------------------------------+ | -| | | | -| | 1D 1W 1M 3M 1Y ALL | |<-- Time selector -| | ^^^^ | | -| | | | -| | $5,750 ─────────────────◉ | | -| | ╱ | | -| | ╱ | | -| | $5,500──╱───────────────── | | -| | ╱ | | -| | $5,325────────────────────── | | -| | | | -| | Jan Feb Mar Today | | -| | | | -| | +----+ +----+ +----+ +----+ | | -| | |+2.5%| |+1.8%| |+3.2%| |+0.4%| | |<-- Monthly returns -| | | Jan | | Feb | | Mar | | Apr | | | -| | +----+ +----+ +----+ +----+ | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| NEXT DIVIDEND | -| +------------------------------------+ | -| |########################################|<-- Success gradient -| |## ##| #11998E -> #38EF7D -| |## +------+ ##| -| |## | [$$] | Next Dividend ##| -| |## | MAR | ##| -| |## | 15 | Estimated: $156.25 ##|<-- Projected dividend -| |## +------+ ##| -| |## ##| -| |## +-------------+ +-------------+ ##| -| |## | [v] DRIP On | | 42 days | ##|<-- DRIP status -| |## | Auto-invest | | until payout| ##| -| |## +-------------+ +-------------+ ##| -| |## ##| -| |########################################| -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| INVESTMENT STREAK | -| +------------------------------------+ | -| | | | -| | [FIRE] 18 Month Investor! | |<-- Streak badge -| | -------------------------------- | | -| | | | -| | +---+---+---+---+---+---+ | | -| | |Jan|Feb|Mar|Apr|May|Jun| | | -| | |[v]|[v]|[v]|[v]|[v]|[v]| | |<-- Monthly investments -| | +---+---+---+---+---+---+ | | -| | |Jul|Aug|Sep|Oct|Nov|Dec| | | -| | |[v]|[v]|[v]|[v]|[v]|[v]| | | -| | +---+---+---+---+---+---+ | | -| | |Jan|Feb|Mar|Apr|May|Jun| | | -| | |[v]|[v]|[v]|[v]|[v]|[*]| | |<-- [*] Current -| | +---+---+---+---+---+---+ | | -| | | | -| | [BADGE] Diamond Hands 2024 | |<-- Achievement -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| MY SHARE ACCOUNTS | -| +------------------------------------+ | -| | | | -| | Active (2) [View All >]| | -| | -------------------------------- | | -| | | | -| | EQUITY SHARES | | -| | +--------------------------------+| | -| | | || | -| | | [ICON] Equity Shares [>] || | -| | | SH-0001234567 || | -| | | || | -| | | Value Gain || | -| | | $2,500.00 +$175.00 || | -| | | (+7.5%) || |<-- Green gain -| | | || | -| | | +--------+ +--------+ || | -| | | | 100 | | $25.00 | || | -| | | | Shares | | /share | || | -| | | +--------+ +--------+ || | -| | | || | -| | | [Buy] [Sell] [Details] || | -| | | || | -| | +--------------------------------+| | -| | | | -| | PREMIUM SHARES | | -| | +--------------------------------+| | -| | | || | -| | | [ICON] Premium Shares [>] || | -| | | SH-0007891234 || | -| | | || | -| | | Value Gain || | -| | | $3,250.00 +$250.00 || | -| | | (+8.3%) || | -| | | || | -| | | +--------+ +--------+ || | -| | | | 50 | | $65.00 | || | -| | | | Shares | | /share | || | -| | | +--------+ +--------+ || | -| | | || | -| | | [Buy] [Sell] [Details] || | -| | | || | -| | +--------------------------------+| | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| SMART INVESTMENT TIP | -| +------------------------------------+ | -| |########################################| -| |## ##| -| |## [SPARKLE] AI Insight ##| -| |## -------------------------------- ##| -| |## ##| -| |## Your dividend yield is 5.2%. ##| -| |## Buy 10 more shares to reach ##| -| |## the Gold Member tier (+0.5% ##| -| |## bonus dividend rate). ##| -| |## ##| -| |## +------------+ +------------+ ##| -| |## | [Dismiss] | | [Buy Now] | ##| -| |## +------------+ +------------+ ##| -| |## ##| -| |########################################| -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| QUICK ACTIONS | -| +------------------------------------+ | -| | | | -| | +------+ +------+ +------+ +------+| | -| | |[+] | |[CALC]| |[BELL]| |[VOTE]|| | -| | +------+ +------+ +------+ +------+| | -| | Buy Dividend Price Vote | | -| | Shares Calc Alerts | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| [HOME] [ACCOUNTS] [+] [CARDS] [ME] | -| | -+------------------------------------------+ -``` - ---- - -## Screen 2: Share Account Detail - -``` -+------------------------------------------+ -| 9:41 [***] | -+------------------------------------------+ -| | -| [<] Equity Shares [...] | -| SH-0001234567 | -| | -+------------------------------------------+ -| | -| SHARE HERO CARD | -| +------------------------------------+ | -| |########################################| -| |## ##| -| |## [COIN] EQUITY SHARES ##| -| |## SH-0001234567 ##| -| |## ##| -| |## Portfolio Value ##| -| |## ##| -| |## $2,500.00 ##|<-- Display Large -| |## ##| -| |## +---------------------------+ ##| -| |## | [UP] +$175.00 (+7.5%) | ##|<-- All-time gain -| |## +---------------------------+ ##| -| |## ##| -| |## +---------------------------+ ##| -| |## | [CHECK] Status: ACTIVE | ##|<-- Green pill -| |## +---------------------------+ ##| -| |## ##| -| |########################################| -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| SHARE STATS | -| +------------------------------------+ | -| | | | -| | +----------+ +----------+ +------+| | -| | | [COIN] | | [PRICE] | |[UP] || | -| | | 100 | | $25.00 | |+7.5% || | -| | | Shares | | /share | |Gain || | -| | +----------+ +----------+ +------+| | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| SHARE PRICE HISTORY | -| +------------------------------------+ | -| | | | -| | 1D 1W 1M 3M 1Y ALL | | -| | ^^^^ | | -| | | | -| | $25.00 ─────────────────◉ | | -| | ╱ | | -| | ╱ | | -| | $24.00──╱───────────────── | | -| | ╱ | | -| | $23.25────────────────────── | |<-- Purchase price -| | ^ | | -| | You bought here | | -| | | | -| | Jan Jul Jan Now | | -| | 2024 2024 2025 | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| DIVIDEND TRACKER | -| +------------------------------------+ | -| |########################################| -| |## ##| -| |## [$$] Your Dividend Earnings ##| -| |## ##| -| |## +-----------------------------+ ##| -| |## | | ##| -| |## | $500.00 | ##|<-- Total dividends -| |## | Total Received | ##| -| |## | | ##| -| |## +-----------------------------+ ##| -| |## ##| -| |## +-------------+ +-------------+ ##| -| |## | This Year | | Last Div | ##| -| |## | $400.00 | | $100.00 | ##| -| |## +-------------+ +-------------+ ##| -| |## ##| -| |## +-------------+ +-------------+ ##| -| |## | Yield | | Frequency | ##| -| |## | 4.0% p.a. | | Quarterly | ##| -| |## +-------------+ +-------------+ ##| -| |## ##| -| |########################################| -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| DRIP SETTINGS | -| +------------------------------------+ | -| | | | -| | Dividend Reinvestment | | -| | +--------------------------------+| | -| | | || | -| | | [v] DRIP Enabled [ON] || |<-- Toggle switch -| | | || | -| | | Automatically reinvest || | -| | | dividends to buy more shares || | -| | | || | -| | | Est. extra shares/year: 4 || | -| | | || | -| | +--------------------------------+| | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| QUICK ACTIONS | -| +------------------------------------+ | -| | | | -| | +--------+ +--------+ +--------+| | -| | | [+] | | [-] | | [$$] || | -| | +--------+ +--------+ +--------+| | -| | Buy Sell Dividends | | -| | Shares Shares History | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| SHARE DETAILS | -| +------------------------------------+ | -| | | | -| | Product Name Equity Shares| | -| | -------------------------------- | | -| | Approved Shares 100| | -| | -------------------------------- | | -| | Pending Shares 0| | -| | -------------------------------- | | -| | Purchase Price (Avg) $23.25| | -| | -------------------------------- | | -| | Current Price $25.00| | -| | -------------------------------- | | -| | Currency USD ($)| | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| MEMBER BENEFITS | -| +------------------------------------+ | -| | | | -| | [STAR] Gold Member (100+ shares) | | -| | -------------------------------- | | -| | | | -| | +---+ +0.5% Bonus Dividend | | -| | |[v]| Applied to all payouts | | -| | +---+ | | -| | -------------------------------- | | -| | +---+ Voting Rights (1 vote) | | -| | |[v]| Next AGM: March 2025 | | -| | +---+ | | -| | -------------------------------- | | -| | +---+ Priority New Offerings | | -| | |[v]| Early access enabled | | -| | +---+ | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| ACTIONS | -| +------------------------------------+ | -| | | | -| | +---+ Dividend History [>] | | -| | |[$]| View all payouts | | -| | +---+ | | -| | -------------------------------- | | -| | +---+ Transaction History [>] | | -| | |TXN| Buy/sell records | | -| | +---+ | | -| | -------------------------------- | | -| | +---+ Charges [>] | | -| | |FEE| View all fees | | -| | +---+ | | -| | -------------------------------- | | -| | +---+ Price Alerts [>] | | -| | |BEL| Set price notifications | | -| | +---+ | | -| | -------------------------------- | | -| | +---+ Generate QR [>] | | -| | |QR | Share account QR code | | -| | +---+ | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -``` - ---- - -## Screen 3: Buy Shares Flow - -``` -+------------------------------------------+ -| 9:41 [***] | -+------------------------------------------+ -| | -| [X] Buy Shares 1/3 | -| | -+------------------------------------------+ -| | -| PROGRESS INDICATOR | -| +------------------------------------+ | -| | [1]────[2]────[3] | | -| | ^ | | -| | Amount Review Confirm | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| SHARE SELECTOR | -| +------------------------------------+ | -| |########################################| -| |## ##| -| |## How many shares? ##| -| |## ##| -| |## 25 ##|<-- Large editable -| |## ═════ ##| number -| |## shares ##| -| |## ##| -| |## +-----|-----|-----|-----|-----+ ##| -| |## 10 25 50 75 100 ##|<-- Slider -| |## ^ ##| -| |## ##| -| |########################################| -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| QUICK AMOUNTS | -| +------------------------------------+ | -| | | | -| | +------+ +------+ +------+ +------+| | -| | | 10 | | *25* | | 50 | | 100 || |<-- [25] selected -| | +------+ +------+ +------+ +------+| | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| INVESTMENT PREVIEW | -| +------------------------------------+ | -| | | | -| | Investment Breakdown | | -| | -------------------------------- | | -| | | | -| | Shares to Buy 25| | -| | Price per Share $25.00| | -| | Subtotal $625.00| | -| | Transaction Fee $1.25| | -| | -------------------------------- | | -| | Total Cost $626.25| |<-- Bold -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| PROJECTED RETURNS | -| +------------------------------------+ | -| |########################################| -| |## ##| -| |## [CHART] Your Projected Returns ##| -| |## ##| -| |## After Purchase: ##| -| |## +-------------+ +-------------+ ##| -| |## | Total | | Est. Annual | ##| -| |## | Shares | | Dividend | ##| -| |## | 125 | | $125.00 | ##|<-- Projected -| |## +-------------+ +-------------+ ##| -| |## ##| -| |## [SPARKLE] You'll earn $3.12/mo ##| -| |## in dividends! ##| -| |## ##| -| |########################################| -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| PAYMENT SOURCE | -| +------------------------------------+ | -| | | | -| | Pay From | | -| | +--------------------------------+| | -| | | +---+ Primary Savings [v]|| | -| | | |SAV| ****4521 || | -| | | +---+ Available: $8,200.00 || | -| | +--------------------------------+| | -| | | | -| | [ Change Account v ] | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| +------------------------------------+ | -| |###### Continue - Review #########| | -| +------------------------------------+ | -| | -+------------------------------------------+ -``` - -### Buy Shares - Review & Confirm - -``` -+------------------------------------------+ -| 9:41 [***] | -+------------------------------------------+ -| | -| [<] Buy Shares 2/3 | -| | -+------------------------------------------+ -| | -| PROGRESS INDICATOR | -| +------------------------------------+ | -| | [v]────[2]────[3] | | -| | ^ | | -| | Amount Review Confirm | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| ORDER REVIEW | -| +------------------------------------+ | -| | | | -| | Equity Shares | | -| | SH-0001234567 | | -| | | | -| | -------------------------------- | | -| | | | -| | Order Type Buy| | -| | Shares 25| | -| | Price per Share $25.00| | -| | Subtotal $625.00| | -| | Transaction Fee $1.25| | -| | -------------------------------- | | -| | | | -| | +--------------------------------+| | -| | |########################################| -| | |## TOTAL $626.25 ##|| -| | |########################################| -| | +--------------------------------+| | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| AFTER PURCHASE | -| +------------------------------------+ | -| | | | -| | Your Holdings After | | -| | -------------------------------- | | -| | | | -| | Total Shares 100 → 125 | |<-- Before → After -| | Portfolio Value $2,500 → $3,125| | -| | Annual Dividend $100 → $125 | | -| | | | -| | +--------------------------------+| | -| | | [STAR] Gold Member Maintained || | -| | +--------------------------------+| | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| STREAK BONUS | -| +------------------------------------+ | -| |########################################| -| |## ##| -| |## [FIRE] Streak Continues! ##| -| |## ##| -| |## This purchase extends your ##| -| |## 19-month investment streak! ##| -| |## ##| -| |########################################| -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| +------------------------------------+ | -| |###### Confirm - $626.25 #########| | -| +------------------------------------+ | -| | -| [LOCK] Secured with 256-bit encryption | -| | -+------------------------------------------+ -``` - -### Buy Shares - Success - -``` -+------------------------------------------+ -| 9:41 [***] | -+------------------------------------------+ -| | -| [X] Purchase Complete 3/3 | -| | -+------------------------------------------+ -| | -| SUCCESS STATE | -| +------------------------------------+ | -| |########################################| -| |## ##| -| |## ##| -| |## +----------+ ##| -| |## | [v] | ##|<-- Animated -| |## | ~~~~ | ##| checkmark -| |## +----------+ ##| + confetti -| |## ##| -| |## Purchase Successful! ##| -| |## ##| -| |## +25 Shares ##| -| |## $626.25 ##| -| |## ##| -| |########################################| -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| UPDATED HOLDINGS | -| +------------------------------------+ | -| | | | -| | Your New Holdings | | -| | -------------------------------- | | -| | | | -| | +-------------+ +-------------+ | | -| | | [COIN] | | [$$] | | | -| | | 125 | | $125.00 | | | -| | | Total | | Est. Annual | | | -| | | Shares | | Dividend | | | -| | +-------------+ +-------------+ | | -| | | | -| | Portfolio Value: $3,125.00 | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| STREAK UPDATE | -| +------------------------------------+ | -| | | | -| | [FIRE] 19 MONTHS | |<-- Animated fire -| | Consecutive Investing | | -| | | | -| | [BADGE] Diamond Hands Unlocked! | |<-- New achievement -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| +------+ +------+ +------------------+ | -| |[TXN] | |[HOME]| | [ Done ======= ] | | -| |View | | | | | | -| |Order | | | | | | -| +------+ +------+ +------------------+ | -| | -+------------------------------------------+ -``` - ---- - -## Screen 4: Sell Shares Flow - -``` -+------------------------------------------+ -| 9:41 [***] | -+------------------------------------------+ -| | -| [X] Sell Shares 1/3 | -| | -+------------------------------------------+ -| | -| PROGRESS INDICATOR | -| +------------------------------------+ | -| | [1]────[2]────[3] | | -| | ^ | | -| | Amount Review Confirm | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| SELL SELECTOR | -| +------------------------------------+ | -| |@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@|<-- Accent gradient -| |@@ @@| #FC466B -> #3F5EFB -| |@@ How many to sell? @@| -| |@@ @@| -| |@@ 25 @@|<-- Large editable -| |@@ ═════ @@| -| |@@ shares @@| -| |@@ @@| -| |@@ Available: 100 Max: 100 @@| -| |@@ @@| -| |@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@| -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| QUICK AMOUNTS | -| +------------------------------------+ | -| | | | -| | +------+ +------+ +------+ +------+| | -| | | 10 | | *25* | | 50 | | ALL || | -| | +------+ +------+ +------+ +------+| | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| SALE PREVIEW | -| +------------------------------------+ | -| | | | -| | Sale Breakdown | | -| | -------------------------------- | | -| | | | -| | Shares to Sell 25| | -| | Current Price $25.00| | -| | Your Avg Purchase Price $23.25| | -| | Gross Proceeds $625.00| | -| | Transaction Fee $1.25| | -| | -------------------------------- | | -| | Net Proceeds $623.75| | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| PROFIT/LOSS | -| +------------------------------------+ | -| |########################################|<-- Success if profit -| |## ##| -| |## [UP] Your Profit ##| -| |## ##| -| |## +$42.50 ##|<-- Profit amount -| |## (+7.3%) ##| -| |## ##| -| |## Based on avg purchase price ##| -| |## ##| -| |########################################| -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| IMPACT ON HOLDINGS | -| +------------------------------------+ | -| | | | -| | After This Sale | | -| | -------------------------------- | | -| | | | -| | Remaining Shares 100 → 75 | | -| | Portfolio Value $2,500 → $1,875| | -| | Annual Dividend $100 → $75 | | -| | | | -| | +--------------------------------+| | -| | | [!] Below Gold Member (100) || |<-- Warning -| | | -0.5% bonus dividend || | -| | +--------------------------------+| | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| RECEIVE FUNDS TO | -| +------------------------------------+ | -| | | | -| | +---+ Primary Savings [v]| | -| | |SAV| ****4521 | | -| | +---+ Transfer: 1-2 days | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| +------------------------------------+ | -| | [!] Sale is final and irreversible | | -| +------------------------------------+ | -| | -| +------------------------------------+ | -| |@@@@@ Confirm Sale - $623.75 @@@@@| | -| +------------------------------------+ | -| | -+------------------------------------------+ -``` - ---- - -## Screen 5: Dividend History - -``` -+------------------------------------------+ -| 9:41 [***] | -+------------------------------------------+ -| | -| [<] Dividend History [FLT] | -| | -+------------------------------------------+ -| | -| DIVIDEND SUMMARY | -| +------------------------------------+ | -| |########################################| -| |## ##| -| |## [$$] Lifetime Dividends ##| -| |## ##| -| |## $1,250.00 ##|<-- Total earned -| |## All Time ##| -| |## ##| -| |## +-------------+ +-------------+ ##| -| |## | This Year | | Last Year | ##| -| |## | $400.00 | | $350.00 | ##| -| |## +-------------+ +-------------+ ##| -| |## ##| -| |########################################| -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| DIVIDEND GROWTH CHART | -| +------------------------------------+ | -| | | | -| | $│ ┌──┐ | | -| | $400│ │ │ | | -| | │ ┌──┐ │ │ | | -| | $300│ ┌──┐ │ │ │ │ | |<-- Bar chart -| | │ │ │ │ │ │ │ | | showing growth -| | $200│ │ │ │ │ │ │ | | -| | │ ┌──┐ │ │ │ │ │ │ | | -| | $100│ │ │ │ │ │ │ │ │ | | -| | │ │ │ │ │ │ │ │ │ | | -| | 0└──┴──┴─┴──┴────┴──┴────┴──┴ | | -| | 2021 2022 2023 2024 | | -| | | | -| | Compound Growth: 18.5% annually | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| FILTER BY YEAR | -| +------------------------------------+ | -| | | | -| | [*All*] [2024] [2023] [2022] | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| 2024 DIVIDENDS | -| +------------------------------------+ | -| | | | -| | +---+ Q4 Dividend +$100.00| | -| | |[$$]| Dec 01, 2024 [PAID] | |<-- Green badge -| | +---+ Rate: 4.0% | 100 shares | | -| | -------------------------------- | | -| | +---+ Q3 Dividend +$100.00| | -| | |[$$]| Sep 01, 2024 [PAID] | | -| | +---+ Rate: 4.0% | 100 shares | | -| | -------------------------------- | | -| | +---+ Q2 Dividend +$100.00| | -| | |[$$]| Jun 01, 2024 [PAID] | | -| | +---+ Rate: 4.0% | 100 shares | | -| | -------------------------------- | | -| | +---+ Q1 Dividend +$100.00| | -| | |[$$]| Mar 01, 2024 [PAID] | | -| | +---+ Rate: 4.0% | 100 shares | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| 2023 DIVIDENDS | -| +------------------------------------+ | -| | | | -| | +---+ Q4 Dividend +$87.50| | -| | |[$$]| Dec 01, 2023 [PAID] | | -| | +---+ Rate: 3.75% | 80 shares | | -| | -------------------------------- | | -| | +---+ Q3 Dividend +$87.50| | -| | |[$$]| Sep 01, 2023 [PAID] | | -| | +---+ Rate: 3.75% | 80 shares | | -| | | | -| | [ Load More ] | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -``` - ---- - -## Screen 6: Price Alerts - -``` -+------------------------------------------+ -| 9:41 [***] | -+------------------------------------------+ -| | -| [<] Price Alerts [+] | -| | -+------------------------------------------+ -| | -| CURRENT PRICE | -| +------------------------------------+ | -| | | | -| | Equity Shares | | -| | | | -| | Current Price | | -| | $25.00 | |<-- Large display -| | | | -| | +---------------------------+ | | -| | | [UP] +$1.75 (+7.5%) YTD | | | -| | +---------------------------+ | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| ACTIVE ALERTS | -| +------------------------------------+ | -| | | | -| | ALERT 1 | | -| | +--------------------------------+| | -| | | || | -| | | [UP] Price Above $27.00 || | -| | | || | -| | | Current: $25.00 Gap: $2.00 || | -| | | || | -| | | [████████████░░░░] 92.6% || |<-- Progress to trigger -| | | || | -| | | [Edit] [Delete] || | -| | | || | -| | +--------------------------------+| | -| | | | -| | ALERT 2 | | -| | +--------------------------------+| | -| | | || | -| | | [DOWN] Price Below $22.00 || |<-- Buy opportunity -| | | || | -| | | Current: $25.00 Gap: $3.00 || | -| | | || | -| | | Not triggered || | -| | | || | -| | | [Edit] [Delete] || | -| | | || | -| | +--------------------------------+| | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| CREATE NEW ALERT | -| +------------------------------------+ | -| |########################################| -| |## ##| -| |## [+] Add Price Alert ##| -| |## ##| -| |## Get notified when share price ##| -| |## reaches your target ##| -| |## ##| -| |########################################| -| +------------------------------------+ | -| | -+------------------------------------------+ -``` - ---- - -## Screen 7: Dividend Calculator - -``` -+------------------------------------------+ -| 9:41 [***] | -+------------------------------------------+ -| | -| [<] Dividend Calculator | -| | -+------------------------------------------+ -| | -| CURRENT HOLDINGS | -| +------------------------------------+ | -| | | | -| | Equity Shares | | -| | Current Holdings: 100 shares | | -| | Annual Dividend: $100.00 | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| PROJECTION SETTINGS | -| +------------------------------------+ | -| | | | -| | Monthly Investment | | -| | | | -| | $250 | |<-- Editable -| | ═════ | | -| | | | -| | +-----|-----|-----|-----|-----+ | | -| | $0 $100 $250 $500 $1000 | |<-- Slider -| | ^ | | -| | | | -| | -------------------------------- | | -| | | | -| | Investment Period | | -| | | | -| | [1Y] [3Y] [*5Y*] [10Y] [20Y] | |<-- 5Y selected -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| PROJECTION RESULTS | -| +------------------------------------+ | -| |########################################| -| |## ##| -| |## [CHART] After 5 Years ##| -| |## ##| -| |## +-----------------------------+ ##| -| |## | | ##| -| |## | Total Value | ##| -| |## | $18,750.00 | ##|<-- Projected value -| |## | | ##| -| |## +-----------------------------+ ##| -| |## ##| -| |## +-------------+ +-------------+ ##| -| |## | Total | | Annual | ##| -| |## | Shares | | Dividend | ##| -| |## | 700 | | $700.00 | ##| -| |## +-------------+ +-------------+ ##| -| |## ##| -| |## +-------------+ +-------------+ ##| -| |## | Invested | | Dividends | ##| -| |## | $15,000 | | $1,250 | ##| -| |## +-------------+ +-------------+ ##| -| |## ##| -| |########################################| -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| GROWTH CHART | -| +------------------------------------+ | -| | | | -| | $│ ╱ | | -| | $18k │ ╱╱ | | -| | │ ╱╱╱ | | -| | $12k │ ╱╱╱╱ | | -| | │ ╱╱╱╱ | | -| | $6k │ ╱╱╱╱ | | -| | │╱╱╱ | | -| | 0 └──────────────────────── | | -| | Now Y1 Y2 Y3 Y4 Y5 | | -| | | | -| | [█] Principal [░] Dividends | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| +------------------------------------+ | -| |###### Start Investing ###########| | -| +------------------------------------+ | -| | -+------------------------------------------+ -``` - ---- - -## Screen 8: Member Voting - -``` -+------------------------------------------+ -| 9:41 [***] | -+------------------------------------------+ -| | -| [<] Governance & Voting | -| | -+------------------------------------------+ -| | -| VOTING POWER | -| +------------------------------------+ | -| |########################################| -| |## ##| -| |## [VOTE] Your Voting Power ##| -| |## ##| -| |## 1 Vote ##|<-- Based on shares -| |## ##| -| |## Gold Member (100+ shares) ##| -| |## 1 vote per resolution ##| -| |## ##| -| |########################################| -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| UPCOMING VOTES | -| +------------------------------------+ | -| | | | -| | Annual General Meeting | | -| | March 15, 2025 | | -| | -------------------------------- | | -| | | | -| | RESOLUTION 1 | | -| | +--------------------------------+| | -| | | || | -| | | Increase Dividend Rate || | -| | | || | -| | | Proposal: 4.0% → 4.5% || | -| | | || | -| | | +------+ +------+ +------+ || | -| | | | FOR | |AGAINST| |ABSTAIN| || |<-- Vote buttons -| | | +------+ +------+ +------+ || | -| | | || | -| | | Voting ends: Mar 10, 2025 || | -| | | || | -| | +--------------------------------+| | -| | | | -| | RESOLUTION 2 | | -| | +--------------------------------+| | -| | | || | -| | | Elect Board Member || | -| | | || | -| | | Candidates: 3 || | -| | | [View Candidates >] || | -| | | || | -| | | [Vote Now >] || | -| | | || | -| | +--------------------------------+| | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| PAST VOTES | -| +------------------------------------+ | -| | | | -| | +---+ 2024 AGM Votes [v] | |<-- Completed -| | |[v]| 3 resolutions voted | | -| | +---+ [View Results >] | | -| | -------------------------------- | | -| | +---+ 2023 AGM Votes [v] | | -| | |[v]| 2 resolutions voted | | -| | +---+ [View Results >] | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -``` - ---- - -## Screen 9: Achievements - -``` -+------------------------------------------+ -| 9:41 [***] | -+------------------------------------------+ -| | -| [<] My Achievements | -| | -+------------------------------------------+ -| | -| ACHIEVEMENT STATS | -| +------------------------------------+ | -| | | | -| | +--------+ +--------+ +--------+ | | -| | | [8] | | [19] | | $1250 | | | -| | | Badges | | Streak | | Divs | | | -| | +--------+ +--------+ +--------+ | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| UNLOCKED BADGES | -| +------------------------------------+ | -| | | | -| | Unlocked (8) | | -| | -------------------------------- | | -| | | | -| | +------+ +------+ +------+ +------+| | -| | |[FIRE]| |[STAR]| |[$$] | |[100] || | -| | |Streak| |Gold | |Div | |First || | -| | | Pro | |Member| |King | | 100 || | -| | +------+ +------+ +------+ +------+| | -| | | | -| | +------+ +------+ +------+ +------+| | -| | |[DRIP]| |[VOTE]| |[UP] | |[LOCK]|| | -| | |DRIP | |Active| |Profit| |Hold || | -| | |Master| |Voter | | Pro | |Firm || | -| | +------+ +------+ +------+ +------+| | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| LOCKED BADGES | -| +------------------------------------+ | -| | | | -| | Locked (4) | | -| | -------------------------------- | | -| | | | -| | +------+ +------+ +------+ +------+| | -| | |[PLAT]| |[500] | |[YEAR]| |[VIP] || |<-- Grayed out -| | |Plat | |500 | |5 Year| |VIP || | -| | |Member| |Shares| |Holder| |Club || | -| | +------+ +------+ +------+ +------+| | -| | | | -| | +--------------------------------+| | -| | | Platinum Member: Own 200+ || | -| | | [████████████░░░░] 50% → 200 || | -| | +--------------------------------+| | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| RECENT ACTIVITY | -| +------------------------------------+ | -| | | | -| | +---+ Gold Member achieved! | | -| | |[v]| January 15, 2025 | | -| | +---+ | | -| | -------------------------------- | | -| | +---+ 18-month streak reached! | | -| | |[v]| January 10, 2025 | | -| | +---+ | | -| | -------------------------------- | | -| | +---+ Dividend King badge | | -| | |[v]| December 01, 2024 | | -| | +---+ | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -``` - ---- - -## Screen 10: Loading & Empty States - -### Loading State - -``` -+------------------------------------------+ -| 9:41 [***] | -+------------------------------------------+ -| | -| [<] Share Account | -| | -+------------------------------------------+ -| | -| SHIMMER HERO | -| +------------------------------------+ | -| | | | -| | ╔════════════════════════════╗ | | -| | ║ ░░░░░░░░░░░░░░░░░░░░░░░ ║ | | -| | ║ ║ | | -| | ║ ░░░░░░░░░░░░░░░░░░ ║ | | -| | ║ ║ | | -| | ║ ░░░░░░░░░░░░ ║ | | -| | ║ ║ | | -| | ╚════════════════════════════╝ | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| SHIMMER CHART | -| +------------------------------------+ | -| | | | -| | ░░░░░░░░░░░░░░░░░░░░░░░░░░░░ | | -| | ░░░░░░░░░░░░░░░░░░░░░░░░░░░░ | | -| | ░░░░░░░░░░░░░░░░░░░░░░░░░░░░ | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -``` - -### Empty State - -``` -+------------------------------------------+ -| 9:41 [***] | -+------------------------------------------+ -| | -| [<] My Investments | -| | -+------------------------------------------+ -| | -| EMPTY STATE | -| +------------------------------------+ | -| | | | -| | | | -| | +------------+ | | -| | | | | | -| | | [COIN] | | | -| | | ~~~~ | | | -| | | | | | -| | +------------+ | | -| | | | -| | Start Your Investment | | -| | Journey | | -| | | | -| | Invest in your cooperative and | | -| | start earning dividends today! | | -| | | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| WHY INVEST? | -| +------------------------------------+ | -| | | | -| | +---+ Earn Quarterly Dividends | | -| | |[v]| 4-7% annual yield | | -| | +---+ | | -| | -------------------------------- | | -| | +---+ Own Part of Your Coop | | -| | |[v]| Build long-term wealth | | -| | +---+ | | -| | -------------------------------- | | -| | +---+ Get Voting Rights | | -| | |[v]| Have your say | | -| | +---+ | | -| | -------------------------------- | | -| | +---+ Member Benefits | | -| | |[v]| Priority access & bonuses | | -| | +---+ | | -| | | | -| +------------------------------------+ | -| | -+------------------------------------------+ -| | -| +------------------------------------+ | -| |###### Apply for Shares ##########| | -| +------------------------------------+ | -| | -+------------------------------------------+ -``` - ---- - -## Component Specifications - -### PortfolioHeroCard - -``` -Props: -├── totalValue: String -├── totalGain: String -├── gainPercentage: Float -├── isPositive: Boolean -├── totalShares: Int -├── totalDividends: String - -Dimensions: -├── Min Height: 220dp -├── Padding: 24dp -├── Corner Radius: 24dp -├── Shadow: 12dp blur, gradient 25% - -Visual: -├── Gradient: Primary (#667EEA → #764BA2) -├── Sparkline: 30-day performance in bg -├── Gain Badge: Green/Red based on isPositive -``` - -### SharePerformanceChart - -``` -Props: -├── priceData: List -├── timeRange: TimeRange (1D, 1W, 1M, 3M, 1Y, ALL) -├── purchasePrice: Float? -├── onRangeChange: (TimeRange) -> Unit - -Chart Specs: -├── Height: 180dp -├── Line: 3dp stroke, gradient -├── Grid: Horizontal only -├── Touch: Tooltip on drag -├── Purchase marker: Dashed line + label -``` - -### DividendTrackerCard - -``` -Props: -├── totalReceived: String -├── thisYear: String -├── lastDividend: String -├── yield: Float -├── frequency: String - -Dimensions: -├── Height: Auto -├── Padding: 20dp -├── Corner Radius: 16dp - -Visual: -├── Gradient: Success (#11998E → #38EF7D) -├── Stats Grid: 2x2 layout -``` - -### InvestmentStreakGrid - -``` -Props: -├── streakCount: Int -├── monthlyInvestments: List -├── currentMonth: Int -├── badges: List - -Cell Specs: -├── Size: 32dp x 32dp -├── Spacing: 4dp -├── Invested: #00D09C -├── Current: #FFB800 + pulse -├── Missed: #FF4757 -├── Future: #E1E4E8 -``` - -### ShareCard - -``` -Props: -├── shareName: String -├── shareNumber: String -├── currentValue: String -├── gain: String -├── gainPercentage: Float -├── shares: Int -├── pricePerShare: String -├── onBuy: () -> Unit -├── onSell: () -> Unit -├── onDetails: () -> Unit - -Dimensions: -├── Min Height: 160dp -├── Padding: 16dp -├── Corner Radius: 16dp -``` - -### DRIPToggle - -``` -Props: -├── isEnabled: Boolean -├── estimatedExtraShares: Int -├── onToggle: (Boolean) -> Unit - -Visual: -├── Toggle: Material Switch -├── Info: Secondary text below -├── Card: Outlined style -``` - ---- - -## Animations - -### Portfolio Value Counter - -``` -Keyframes: -0%: value: previous, scale: 1.0 -50%: scale: 1.05 -100%: value: current, scale: 1.0 - -Duration: 800ms -Easing: DecelerateInterpolator -Haptic: Light tick at completion -``` - -### Chart Line Draw - -``` -Animation: -├── Type: Path animation -├── Duration: 1200ms -├── Easing: FastOutSlowIn -├── Direction: Left to right -├── Gradient reveal with line -``` - -### Streak Fire Animation - -``` -Keyframes: -0%: scale: 1.0, rotation: -3deg -25%: scale: 1.1, rotation: 3deg -50%: scale: 1.0, rotation: -2deg -75%: scale: 1.05, rotation: 2deg -100%: scale: 1.0, rotation: 0deg - -Duration: 500ms, loop infinite -Trigger: Streak >= 6 months -``` - -### Badge Unlock Celebration - -``` -Sequence: -0ms: Badge scale: 0, confetti prepare -100ms: Badge scale: 1.3 (spring) -200ms: Badge scale: 1.0 -300ms: Confetti burst -500ms: Glow pulse -1000ms: Settle - -Confetti: -- Count: 40 particles -- Colors: Primary + Success -- Duration: 1000ms -``` - ---- - -## Accessibility - -### Screen Reader Labels - -``` -Portfolio Hero: -"Your investment portfolio. Total value - 5 thousand 750 dollars. Gain of 425 - dollars, up 7.9 percent all time. - 150 total shares. 1250 dollars in - dividends earned." - -Share Card: -"Equity Shares account. Current value - 2500 dollars. Gain of 175 dollars, - up 7.5 percent. 100 shares at 25 - dollars per share. Actions available: - Buy, Sell, View Details." - -Performance Chart: -"Share price performance chart showing - 1 year history. Current price 25 dollars. - Up 7.5 percent from purchase price." -``` - -### Touch Targets - -``` -Minimum Sizes: -├── All buttons: 48dp x 48dp -├── Share cards: Full width x 160dp -├── Quick actions: 56dp x 56dp -├── Chart time selector: 48dp per tab -├── Toggle switches: 52dp x 32dp - -Spacing: -├── Between cards: 16dp -├── Button groups: 8dp -``` - ---- - -## Dark Mode - -### Color Transformations - -``` -Element | Light | Dark ----------------------|------------|------------ -Background | #F8F9FA | #0D1117 -Surface/Cards | #FFFFFF | #1A1F2E -Card Border | none | #30363D -Primary Text | #1F2937 | #F0F6FC -Secondary Text | #6B7280 | #8B949E -Chart Line | #667EEA | #667EEA -Positive/Gain | #00D09C | #00D09C -Negative/Loss | #FF4757 | #FF4757 -Dividers | #E1E4E8 | #30363D -Primary Gradient | 100% | 85% -Success Gradient | 100% | 85% -Shadows | visible | removed -``` - ---- - -## Implementation Notes - -### Required Composables - -```kotlin -// Dashboard -SharePortfolioScreen.kt -PortfolioHeroCard.kt -SharePerformanceChart.kt -InvestmentStreakGrid.kt -ShareCardList.kt -SmartTipCard.kt - -// Detail -ShareDetailScreen.kt -ShareHeroCard.kt -DividendTrackerCard.kt -DRIPSettingsCard.kt -MemberBenefitsCard.kt -ShareActionsList.kt - -// Buy/Sell Flow -BuySharesScreen.kt -SellSharesScreen.kt -ShareAmountSelector.kt -ProjectedReturnsCard.kt -OrderReviewCard.kt -TransactionSuccessScreen.kt - -// Dividend -DividendHistoryScreen.kt -DividendGrowthChart.kt -DividendListItem.kt - -// Calculator -DividendCalculatorScreen.kt -InvestmentProjectionChart.kt -ProjectionResultsCard.kt - -// Voting -GovernanceScreen.kt -VotingPowerCard.kt -ResolutionCard.kt -VoteResultsScreen.kt - -// Alerts -PriceAlertsScreen.kt -AlertCard.kt -CreateAlertSheet.kt - -// Achievements -AchievementsScreen.kt -BadgeGrid.kt -AchievementBadge.kt -ActivityList.kt - -// States -ShareLoadingState.kt -ShareEmptyState.kt -ShareErrorState.kt -``` - -### State Management - -```kotlin -data class SharePortfolioState( - val totalValue: Money, - val totalGain: Money, - val gainPercentage: Float, - val shares: List, - val investmentStreak: Int, - val totalDividends: Money, - val nextDividend: DividendProjection?, - val smartTip: SmartTip?, - val isLoading: Boolean, - val error: String? -) - -data class ShareDetailState( - val share: ShareAccount, - val priceHistory: List, - val dividendHistory: List, - val dripEnabled: Boolean, - val memberTier: MemberTier, - val benefits: List, - val achievements: List -) - -sealed class ShareTransactionFlow { - object SelectAmount : ShareTransactionFlow() - object Review : ShareTransactionFlow() - object Processing : ShareTransactionFlow() - data class Success(val transaction: ShareTransaction) : ShareTransactionFlow() - data class Error(val message: String) : ShareTransactionFlow() -} -``` - ---- - -## Changelog - -| Date | Version | Change | -|------|---------|--------| -| 2025-12-29 | 1.0 | Initial share account mockups | -| 2025-12-30 | 2.0 | Complete redesign with 2025 investment patterns: portfolio dashboard, performance charts, dividend tracking, DRIP settings, investment streaks, price alerts, member governance, dividend calculator, achievements system | - ---- - -## Data Binding Reference - -> **For `/implement` command**: Maps UI components to API.md sections. -> **Source of Truth**: See `API.md` for complete endpoint details. - -### Screen → API.md Mapping - -| Screen | API.md Section | Key Fields | -|--------|----------------|------------| -| Account List | See `accounts/API.md` | `shareAccounts[]` from client accounts | -| Account Detail | `4. Get Share Account Details` | `totalApprovedShares`, `purchasedShares[]`, `status` | -| Purchase History | `4. Get Share Account Details` | `purchasedShares[]` embedded in response | -| Share Products | `1. Get Share Products` | Products list | -| Product Detail | `2. Get Share Product Details` | Product specifications | -| Apply for Shares | `3. Submit Share Application` | POST with `requestedShares` | - -### Client-Only Features - -| Feature | Storage | Notes | -|---------|---------|-------| -| Portfolio Performance | Client-side | Calculated from purchase history | -| Dividend History | Not available | Not in Fineract API | -| Investment Streak | DataStore | Gamification layer | -| Price Alerts | DataStore | Client-side notifications | -| Dividend Calculator | Client-side | Projection calculation | - -### Actions → API.md Mapping - -| User Action | API.md Reference | Navigation | -|-------------|------------------|------------| -| Pull to Refresh | `4. Get Share Account Details` | Reload account | -| View Products | `1. Get Share Products` | → Products List | -| Apply for Shares | `3. Submit Share Application` | → Application Flow | - -### API Limitations - -See `API.md → Note on Limited API` - Share API has fewer features than Savings/Loans: -- No transaction detail endpoint -- No charges endpoint -- Dividend tracking not available - -### Error Handling - -See `API.md → Error Responses` for complete error codes. diff --git a/claude-product-cycle/design-spec-layer/features/share-account/SPEC.md b/claude-product-cycle/design-spec-layer/features/share-account/SPEC.md deleted file mode 100644 index b7718eaff..000000000 --- a/claude-product-cycle/design-spec-layer/features/share-account/SPEC.md +++ /dev/null @@ -1,445 +0,0 @@ -# Share Account - Feature Specification - -> **Purpose**: Share account management for cooperative members -> **User Value**: View, manage, and track share holdings and transactions -> **Last Updated**: 2025-12-29 -> **Status**: Production Design - ---- - -## 1. Overview - -### 1.1 Feature Summary -The Share Account feature enables cooperative members to view and manage their share holdings within the MifosX platform. Users can browse their share accounts, view detailed account information including approved and pending shares, market prices, and access related actions like viewing charges, transactions, and generating QR codes for account sharing. - -### 1.2 User Stories -- As a cooperative member, I want to see all my share accounts in one place -- As a user, I want to filter share accounts by status (Active, Pending, Approved, Rejected, Closed) -- As a user, I want to view detailed information about each share account -- As a user, I want to see my approved and pending shares count -- As a user, I want to view the current market price of my shares -- As a user, I want to access share account charges and transactions -- As a user, I want to generate a QR code for my share account details - -### 1.3 Design Principles -- **Clarity**: Clear display of share holdings with status indicators -- **Discoverability**: Easy access to account details and related actions -- **Consistency**: Follows the same patterns as savings and loan account screens -- **Accessibility**: WCAG 2.1 AA compliant with proper contrast and touch targets - ---- - -## 2. Screen Layout - -### 2.1 Share Accounts List Screen - -``` -+-------------------------------------------------------------+ -| <- Share Accounts | -+-------------------------------------------------------------+ -| | -| +-------------------------------------------------------+ | -| | SHARE DASHBOARD [eye] | | -| | +---------------------------------------------------+| | -| | | || | -| | | $ 0.00 || | -| | | Total Value || | -| | | || | -| | +---------------------------------------------------+| | -| +-------------------------------------------------------+ | -| | -| Share Account [search] [filter]| -| 3 items | -| ----------------------------------------------------------- | -| | -| +-------------------------------------------------------+ | -| | [coin] Equity Shares | | -| | SH-0001234567 | | -| | [Active] | | -| +-------------------------------------------------------+ | -| | -| +-------------------------------------------------------+ | -| | [coin] Premium Shares | | -| | SH-0001234568 | | -| | [Pending Approval] | | -| +-------------------------------------------------------+ | -| | -| +-------------------------------------------------------+ | -| | [coin] Growth Shares | | -| | SH-0001234569 | | -| | [Approved] | | -| +-------------------------------------------------------+ | -| | -+-------------------------------------------------------------+ -``` - -### 2.2 Share Account Details Screen - -``` -+-------------------------------------------------------------+ -| <- Share Account Details [...] | -+-------------------------------------------------------------+ -| | -| +----------------------+ +----------------------+ | -| | Account Number | | Product Name | | -| | SH-0001234567 | | Equity Shares | | -| +----------------------+ +----------------------+ | -| | -| +----------------------+ +----------------------+ | -| | Status | | Currency | | -| | [Active] | | USD ($) | | -| +----------------------+ +----------------------+ | -| | -| +----------------------+ +----------------------+ | -| | Approved Shares | | Pending Shares | | -| | 100 | | 0 | | -| +----------------------+ +----------------------+ | -| | -| +----------------------+ | -| | Market Price | | -| | $ 25.00 | | -| +----------------------+ | -| | -| +----------------------+ +----------------------+ | -| | Application Date | | Activation Date | | -| | Jan 15, 2024 | | Jan 20, 2024 | | -| +----------------------+ +----------------------+ | -| | -| ACTIONS | -| +-------------------------------------------------------+ | -| | | | -| | +----------+ +-------------+ +---------+ | | -| | | Charges | | Transactions| | QR Code | | | -| | +----------+ +-------------+ +---------+ | | -| | | | -| +-------------------------------------------------------+ | -| | -| [Powered by Mifos] | -+-------------------------------------------------------------+ -``` - -### 2.3 Empty State - -``` -+-------------------------------------------------------------+ -| <- Share Accounts | -+-------------------------------------------------------------+ -| | -| | -| | -| [info icon] | -| | -| No Share Accounts | -| | -| You don't have any share accounts | -| | -| | -| | -+-------------------------------------------------------------+ -``` - -### 2.4 Error State - -``` -+-------------------------------------------------------------+ -| <- Share Accounts | -+-------------------------------------------------------------+ -| | -| | -| | -| [error icon] | -| | -| Unable to Load | -| | -| There was an error loading your | -| share accounts | -| | -| [Retry] | -| | -| | -+-------------------------------------------------------------+ -``` - ---- - -## 3. Sections Table - -| Section | Description | Data Source | -|---------|-------------|-------------| -| Dashboard Card | Total share value with visibility toggle | Calculated from accounts | -| Account Count | Number of filtered share accounts | State.items | -| Filter Controls | Search and filter icons | User action triggers | -| Account List | LazyColumn of share account cards | State.shareAccounts | -| Account Card | Individual account with number, name, status | ShareAccount entity | -| Actions Row | Quick actions (Charges, Transactions, QR) | ShareActionItems | - ---- - -## 4. User Interactions Table - -| Element | Action | Result | -|---------|--------|--------| -| Back Arrow | Tap | Navigate to previous screen | -| Eye Icon (Dashboard) | Tap | Toggle amount visibility | -| Search Icon | Tap | Open search (not yet implemented) | -| Filter Icon | Tap | Open filter bottom sheet | -| Account Card | Tap | Navigate to account details | -| Charges Action | Tap | Navigate to charges screen | -| Transactions Action | Tap | Navigate to transactions screen | -| QR Code Action | Tap | Navigate to QR code screen | -| Retry Button | Tap | Reload account data | - ---- - -## 5. State Model - -Based on actual ViewModel implementation: - -```kotlin -/** - * State holder for the Share Accounts screen. - */ -data class ShareAccountsState( - val shareAccounts: List?, - val originalAccounts: List? = null, - val isFilteredEmpty: Boolean = false, - val firstLaunch: Boolean = true, - val items: Int? = 0, - val totalLoanAmount: String? = "", - val currency: String? = "", - val decimals: Int? = 2, - val networkConnection: Boolean? = true, - val clientId: Long?, - val dialogState: DialogState? = null, - val selectedFilters: List = emptyList(), - val isAmountVisible: Boolean = false, - val uiState: ScreenUiState? = ScreenUiState.Loading, - val networkStatus: Boolean = false, -) { - sealed interface DialogState { - data class Error(val message: String) : DialogState - } -} - -/** - * Actions for the Share Accounts screen. - */ -sealed interface ShareAccountsAction { - data object OnFirstLaunched : ShareAccountsAction - data object OnDismissDialog : ShareAccountsAction - data object OnNavigateBack : ShareAccountsAction - data object ToggleAmountVisible : ShareAccountsAction - data class LoadAccounts(val filters: List) : ShareAccountsAction - data object OnRetry : ShareAccountsAction - data class OnAccountClicked(val accountId: Long, val accountType: String) : ShareAccountsAction - data class ReceiveNetworkStatus(val isOnline: Boolean) : ShareAccountsAction - - sealed interface Internal : ShareAccountsAction { - data class ReceiveShareAccounts( - val filters: List, - val dataState: DataState, - ) : Internal - } -} - -/** - * One-time UI events for the Share Accounts screen. - */ -sealed interface ShareAccountsEvent { - data class AccountClicked(val accountId: Long, val accountType: String) : ShareAccountsEvent - data object LoadingCompleted : ShareAccountsEvent - data object NavigateBack : ShareAccountsEvent -} -``` - -### 5.1 Share Account Details State - -```kotlin -@Immutable -data class ShareAccountDetailsState( - val accountId: Long = -1L, - val accountNumber: String? = "", - val clientName: String? = "", - val isActive: Boolean = false, - val displayItems: List = emptyList(), - val items: ImmutableList = shareAccountActions, - val allowedActions: Set = emptySet(), - val dialogState: DialogState? = null, - val networkStatus: Boolean = false, - val uiState: ScreenUiState? = ScreenUiState.Loading, -) { - sealed interface DialogState { - data class Error(val message: String) : DialogState - } -} - -sealed interface ShareAccountDetailsAction { - data object OnNavigateBack : ShareAccountDetailsAction - data object OnRetry : ShareAccountDetailsAction - data class OnNavigateToAction(val route: String) : ShareAccountDetailsAction - data object DismissDialog : ShareAccountDetailsAction - data class ReceiveNetworkStatus(val isOnline: Boolean) : ShareAccountDetailsAction - - sealed interface Internal : ShareAccountDetailsAction { - data class ShareResultReceived(val dataState: DataState) : Internal - } -} - -sealed interface ShareAccountDetailsEvent { - data object NavigateBack : ShareAccountDetailsEvent - data class NavigateToAction(val route: String) : ShareAccountDetailsEvent -} -``` - ---- - -## 6. API Requirements - -| Endpoint | Method | Purpose | Priority | -|----------|--------|---------|----------| -| /self/clients/{id}/accounts | GET | Fetch share accounts list | P0 | -| /self/shareaccounts/{id} | GET | Fetch share account details | P0 | -| /self/products/share | GET | Fetch available share products | P1 | -| /self/products/share/{id} | GET | Fetch share product details | P1 | -| /self/shareaccounts | POST | Submit share application | P1 | - ---- - -## 7. Filter Logic - -The FilterUtil enum provides filtering capabilities: - -```kotlin -enum class FilterUtil( - val label: StringResource, - val matchCondition: (ShareAccount) -> Boolean, -) { - ACTIVE( - Res.string.feature_share_account_active, - { it.status?.active == true }, - ), - APPROVED( - Res.string.feature_share_account_approved, - { it.status?.approved == true }, - ), - APPROVAL_PENDING( - Res.string.feature_share_account_approval_pending, - { it.status?.submittedAndPendingApproval == true }, - ), - REJECTED( - Res.string.feature_share_account_rejected, - { it.status?.rejected == true }, - ), - CLOSED( - Res.string.feature_share_account_closed, - { it.status?.closed == true }, - ); -} -``` - ---- - -## 8. Share Account Actions - -Available actions on share account details: - -| Action | Icon | Route | Description | -|--------|------|-------|-------------| -| Charges | MifosIcons.Charges | Constants.CHARGES | View account charges | -| Transactions | MifosIcons.TransactionHistory | Constants.TRANSACTIONS | View share transactions | -| QR Code | MifosIcons.QrCode | Constants.QR_CODE | Generate account QR | - ---- - -## 9. Edge Cases & Error Handling - -| Scenario | UI Behavior | Recovery | -|----------|-------------|----------| -| No internet | Show network error state | Auto-retry on reconnect | -| API error | Show error with message | Retry button | -| Empty accounts | Show empty state with info icon | N/A - informational | -| Filtered empty | Show "No accounts match filter" | Clear filters | -| Loading | Show MifosProgressIndicator | N/A | -| Auth expired | Navigate to login | Re-authenticate | - ---- - -## 10. Status Color Mapping - -| Status | Color | Constant | -|--------|-------|----------| -| Active | Green | AppColors.customEnable | -| Pending Approval | Yellow | AppColors.customYellow | -| Withdrawn / Matured | Red | KptTheme.colorScheme.error | -| Other | Default | KptTheme.colorScheme.onSurface | - ---- - -## 11. Display Items for Details - -The following fields are displayed on the details screen: - -| Label | Field | Source | -|-------|-------|--------| -| Account Number | accountNo | ShareAccountWithAssociations | -| Product Name | productName | ShareAccountWithAssociations | -| Status | status.value | ShareAccountWithAssociations | -| Currency | currency.displayLabel | ShareAccountWithAssociations | -| Approved Shares | summary.totalApprovedShares | ShareAccountWithAssociations | -| Pending Shares | summary.totalPendingForApprovalShares | ShareAccountWithAssociations | -| Market Price | currentMarketPrice | ShareAccountWithAssociations | -| Application Date | timeline.submittedOnDate | ShareAccountWithAssociations | -| Activation Date | timeline.activatedDate | ShareAccountWithAssociations | - ---- - -## 12. Navigation Routes - -```kotlin -@Serializable -data object ShareAccountRoute - -@Serializable -data class ShareAccountDetailsRoute( - val accountId: Long, -) - -@Serializable -data object ShareGraphRoute -``` - -Navigation graph structure: -- ShareGraphRoute (parent) - - ShareAccountRoute (start destination) - - ShareAccountDetailsRoute (detail screen) - ---- - -## 13. Performance Requirements - -| Metric | Target | Implementation | -|--------|--------|----------------| -| First paint | < 500ms | Skeleton loading | -| Data load | < 2s | Network caching | -| Scroll | 60fps | LazyColumn with stable keys | -| List render | < 100ms | Efficient composables | - ---- - -## 14. Accessibility - -| Feature | Implementation | -|---------|----------------| -| Screen Reader | contentDescription on all interactive elements | -| Font Scaling | Supports 200% scaling | -| Color Contrast | WCAG AA (4.5:1 minimum) | -| Touch Targets | 48dp minimum | -| Focus Navigation | Logical tab order | - ---- - -## Changelog - -| Date | Change | -|------|--------| -| 2025-12-29 | Initial specification based on implementation | diff --git a/claude-product-cycle/design-spec-layer/features/share-account/STATUS.md b/claude-product-cycle/design-spec-layer/features/share-account/STATUS.md deleted file mode 100644 index 4fb2c85b2..000000000 --- a/claude-product-cycle/design-spec-layer/features/share-account/STATUS.md +++ /dev/null @@ -1,66 +0,0 @@ -# Share Account - Implementation Status - -> **Last Updated**: 2025-12-29 -> **Overall Status**: ✅ Done - ---- - -## Implementation Checklist - -- [x] SPEC.md created -- [x] API.md created -- [x] Network: Services exist (ShareAccountService) -- [x] Data: Repository exists (ShareAccountRepository) -- [x] Feature: ViewModels + Screens -- [x] Navigation: Routes registered -- [x] DI: Modules registered -- [x] STATUS.md updated - ---- - -## Layer Status - -| Layer | Status | Files | -|-------|--------|-------| -| Network | ✅ | ShareAccountService.kt | -| Data | ✅ | ShareAccountRepository.kt, ShareAccountRepositoryImp.kt | -| Feature | ✅ | ShareAccountViewModel.kt, ShareAccountScreen.kt, ShareAccountDetailsViewModel.kt, ShareAccountDetailsScreen.kt | -| DI | ✅ | ShareAccountModule.kt | -| Navigation | ✅ | ShareNavGraph.kt, ShareAccountDetailsNavigation.kt | - ---- - -## Files - -### Network Layer -- `core/network/services/ShareAccountService.kt` - -### Data Layer -- `core/data/repository/ShareAccountRepository.kt` -- `core/data/repositoryImpl/ShareAccountRepositoryImp.kt` - -### Feature Layer -- `feature/share-account/src/commonMain/kotlin/org/mifos/mobile/feature/shareaccount/shareAccount/ShareAccountViewModel.kt` -- `feature/share-account/src/commonMain/kotlin/org/mifos/mobile/feature/shareaccount/shareAccount/ShareAccountScreen.kt` -- `feature/share-account/src/commonMain/kotlin/org/mifos/mobile/feature/shareaccount/shareAccountDetails/ShareAccountDetailsViewModel.kt` -- `feature/share-account/src/commonMain/kotlin/org/mifos/mobile/feature/shareaccount/shareAccountDetails/ShareAccountDetailsScreen.kt` -- `feature/share-account/src/commonMain/kotlin/org/mifos/mobile/feature/shareaccount/shareAccount/ShareAccountRoute.kt` -- `feature/share-account/src/commonMain/kotlin/org/mifos/mobile/feature/shareaccount/component/ShareActionItems.kt` -- `feature/share-account/src/commonMain/kotlin/org/mifos/mobile/feature/shareaccount/utils/FilterUtil.kt` -- `feature/share-account/src/commonMain/kotlin/org/mifos/mobile/feature/shareaccount/navigation/ShareNavGraph.kt` -- `feature/share-account/src/commonMain/kotlin/org/mifos/mobile/feature/shareaccount/shareAccountDetails/ShareAccountDetailsNavigation.kt` -- `feature/share-account/src/commonMain/kotlin/org/mifos/mobile/feature/shareaccount/di/ShareAccountModule.kt` - ---- - -## Gaps - -None identified. - ---- - -## Changelog - -| Date | Change | -|------|--------| -| 2025-12-29 | Initial status documentation | diff --git a/claude-product-cycle/design-spec-layer/features/share-account/mockups/PROMPTS_FIGMA.md b/claude-product-cycle/design-spec-layer/features/share-account/mockups/PROMPTS_FIGMA.md deleted file mode 100644 index 9e5dd4fd9..000000000 --- a/claude-product-cycle/design-spec-layer/features/share-account/mockups/PROMPTS_FIGMA.md +++ /dev/null @@ -1,401 +0,0 @@ -# Share Account - Figma First Draft Prompts - -> **Tool**: Figma First Draft (Shift+I in Figma) -> **Style**: Investment Portfolio Fintech, Material Design 3 -> **Format**: Natural language prompts optimized for Figma AI - ---- - -## How to Use - -1. Open Figma -> Create new design file -2. Press `Shift + I` or click "Actions" -> "First Draft" -3. Copy each prompt below -4. Generate -> Iterate -> Refine - ---- - -## Screen 1: Share Portfolio Dashboard - -``` -Design a modern mobile investment portfolio dashboard for a credit union share account app. - -At the top, show a back arrow with "My Investments" title and add/help icons on the right. - -Create a stunning hero card with a purple gradient background. Show a portfolio icon with "Your Portfolio" header. Display "Total Value" label and "$5,750.00" in large white bold text. Add a gain indicator showing an up arrow with "+$425.00 (+7.9%)" in green and "All Time Gain" subtitle. Include two stat chips: one showing "150 Shares" with a coin icon, and another showing "$1,250 Dividends" with a dollar icon. Add a subtle sparkline chart in the background showing portfolio growth. - -Add a Portfolio Performance section with time period tabs (1D, 1W, 1M, 3M, 1Y, ALL). Show a smooth line chart with gradient fill below. Display monthly return chips below the chart showing percentage gains like +2.5% Jan, +1.8% Feb. - -Create a Next Dividend card with a green gradient. Show a calendar icon with the date "MAR 15", "Next Dividend" header, and "Estimated: $156.25" prominently. Add info chips showing "DRIP On Auto-invest" and "42 days until payout". - -Add an Investment Streak section with a fire emoji and "18 Month Investor!" celebration text. Show a grid of monthly investment indicators with green checkmarks for invested months and an unlocked "Diamond Hands 2024" badge. - -Show a Share Accounts section with cards for each share type. Each card displays the share type name, account number, current value, gain/loss percentage in green or red, number of shares, price per share, and Buy/Sell/Details action buttons. - -Add a Smart Investment Tip card with gradient border and sparkle icon suggesting buying more shares to reach the next member tier. - -Include a Quick Actions row with circular buttons for Buy Shares, Dividend Calculator, Price Alerts, and Vote. - -Style it like Robinhood or Public - clean investment tracking with purple accent colors. -``` - ---- - -## Screen 2: Share Account Detail - -``` -Design a share account detail screen showing comprehensive investment information. - -Show a back arrow with "Equity Shares" title and account number "SH-0001234567" as subtitle. - -Create a hero card with purple gradient showing "EQUITY SHARES" header with a coin icon. Display "Portfolio Value" label and "$2,500.00" in large white text. Add a gain badge showing "+$175.00 (+7.5%)" in green. Include a green "ACTIVE" status pill. - -Add a Share Stats row with three stat boxes: "100 Shares" with coin icon, "$25.00/share" with price icon, and "+7.5%" gain with up arrow. - -Create a Share Price Chart section with time period selector tabs. Show a line chart with gradient fill displaying price history. Mark the user's purchase price point with a dashed line and "You bought here" label. Show current price highlighted at the end of the chart. - -Add a Dividend Tracker card with green gradient showing "Your Dividend Earnings" header. Display "$500.00 Total Received" prominently. Show a 2x2 grid with: This Year $400, Last Dividend $100, Yield 4.0% p.a., and Frequency Quarterly. - -Create a DRIP Settings card with a toggle switch for "Dividend Reinvestment". When enabled, show "Automatically reinvest dividends to buy more shares" description and "Est. extra shares/year: 4". - -Add a Quick Actions row with three buttons: Buy Shares, Sell Shares, Dividends History. - -Show a Share Details section with key-value pairs: Product Name, Approved Shares, Pending Shares, Average Purchase Price, Current Price, and Currency. - -Create a Member Benefits card with a star icon showing "Gold Member (100+ shares)". List benefits with checkmarks: "+0.5% Bonus Dividend", "Voting Rights (1 vote)", and "Priority New Offerings". - -Add an Actions menu list with chevrons: Dividend History, Transaction History, Charges, Price Alerts, Generate QR. -``` - ---- - -## Screen 3: Buy Shares Flow - -``` -Design a 3-step share purchase flow. - -Step 1 - Select Amount: -Show a close X with "Buy Shares" title and "1/3" step indicator. Add a progress bar with three steps. - -Create a Share Selector card with gradient background. Show "How many shares?" label and a large editable "25" number with "shares" label below. Add a slider from 10 to 100 shares. - -Add Quick Amount chips: 10, 25 (selected), 50, 100. - -Create an Investment Preview card showing: -- Shares to Buy: 25 -- Price per Share: $25.00 -- Subtotal: $625.00 -- Transaction Fee: $1.25 -- Total Cost: $626.25 (bold) - -Add a Projected Returns card with gradient showing projected ownership after purchase. Display "Total Shares: 125" and "Est. Annual Dividend: $125.00". Add sparkle text: "You'll earn $3.12/mo in dividends!" - -Show a Payment Source selector with account card displaying available balance. - -Include "Continue - Review" gradient button. - ---- - -Step 2 - Review Order: -Show step 2 active with order summary including share type, quantity, pricing, and total. - -Add an "After Purchase" card showing how holdings will change: Total Shares, Portfolio Value, Annual Dividend with before/after comparisons. - -Create a Streak Bonus card with fire icon celebrating the investment streak extension. - -Include "Confirm - $626.25" button with security badge. - ---- - -Step 3 - Success: -Show animated checkmark with confetti and "Purchase Successful!" headline. - -Display "+25 Shares" and cost. - -Add Updated Holdings showing new total shares and estimated annual dividend. - -Show Streak Update with large animated month count and new badge unlocked. - -Include navigation buttons: View Order, Home, Done. -``` - ---- - -## Screen 4: Sell Shares Flow - -``` -Design a share selling screen with profit/loss calculations and impact warnings. - -Show a close X with "Sell Shares" title and step indicator. - -Create a Sell Selector card with a red-purple gradient. Show "How many to sell?" label and large editable quantity. Display "Available: 100 Max: 100". - -Add Quick Amount chips: 10, 25 (selected), 50, ALL. - -Create a Sale Preview showing: -- Shares to Sell: 25 -- Current Price: $25.00 -- Your Avg Purchase Price: $23.25 -- Gross Proceeds: $625.00 -- Transaction Fee: $1.25 -- Net Proceeds: $623.75 - -Add a Profit/Loss card with green gradient (for profit) showing your profit amount "+$42.50 (+7.3%)" and "Based on avg purchase price". - -Create an Impact on Holdings card showing remaining shares, portfolio value, and annual dividend after sale. Include a warning if selling will drop below a member tier: "Below Gold Member (100) -0.5% bonus dividend". - -Show the receiving account selector with transfer timeline. - -Add a warning: "Sale is final and irreversible". - -Include a "Confirm Sale" button with the accent color gradient. -``` - ---- - -## Screen 5: Dividend History - -``` -Design a dividend history screen showing earnings over time. - -Show a back arrow with "Dividend History" title and filter icon. - -Create a Dividend Summary card with green gradient showing "Lifetime Dividends" header and "$1,250.00 All Time" in large text. Add stat boxes for "This Year" and "Last Year" amounts. - -Add a Dividend Growth Chart showing bar chart of yearly dividend growth (2021-2024) with increasing bars. Display "Compound Growth: 18.5% annually" below. - -Create a Year Filter with chips: All (selected), 2024, 2023, 2022. - -Show 2024 Dividends section with quarterly dividend cards. Each card shows: -- Quarter and date -- Amount in green with + prefix -- [PAID] badge -- Rate percentage and share count - -Add 2023 Dividends section with similar cards and a "Load More" button at the bottom. - -Make it feel like a rewarding history of earnings. -``` - ---- - -## Screen 6: Price Alerts - -``` -Design a price alerts management screen for share investments. - -Show a back arrow with "Price Alerts" title and add button. - -Create a Current Price card showing the share type name, current price in large text, and year-to-date change badge. - -Add an Active Alerts section with alert cards. Each alert shows: -- Direction icon (up for above, down for below) -- Target price -- Current price and gap -- Progress bar showing how close to trigger -- Edit and Delete buttons - -For a "Price Above" alert, show progress toward triggering. -For a "Price Below" alert (buy opportunity), show it as a potential buying signal. - -Create a New Alert card with gradient prompting users to add price alerts with description: "Get notified when share price reaches your target". -``` - ---- - -## Screen 7: Dividend Calculator - -``` -Design a dividend projection calculator for planning investments. - -Show a back arrow with "Dividend Calculator" title. - -Add a Current Holdings card showing share type, current share count, and current annual dividend. - -Create Projection Settings with: -- Monthly Investment input: large editable "$250" with slider from $0 to $1000 -- Investment Period selector chips: 1Y, 3Y, 5Y (selected), 10Y, 20Y - -Add a Projection Results card with gradient showing "After 5 Years" header and large projected total value. Display a 2x2 grid: Total Shares, Annual Dividend, Total Invested, Total Dividends Earned. - -Create a Growth Chart showing area chart of compound growth over the selected period. Use stacked areas for Principal and Dividends. Label the x-axis with years. - -Include a "Start Investing" call-to-action button. - -Make it feel educational and motivating about compound growth. -``` - ---- - -## Screen 8: Member Voting - -``` -Design a governance and voting screen for cooperative member participation. - -Show a back arrow with "Governance & Voting" title. - -Create a Voting Power card with gradient showing a vote icon, "Your Voting Power" header, and "1 Vote" in large text. Explain the voting power: "Gold Member (100+ shares) - 1 vote per resolution". - -Add an Upcoming Votes section with "Annual General Meeting March 15, 2025" header. - -Create Resolution Cards for each voting item: -- Resolution 1: "Increase Dividend Rate" with proposal "4.0% -> 4.5%", three vote buttons (FOR, AGAINST, ABSTAIN), and voting deadline. -- Resolution 2: "Elect Board Member" with candidate count and "View Candidates" and "Vote Now" buttons. - -Show a Past Votes section with completed voting records showing the number of resolutions voted and "View Results" links. - -Make it feel like meaningful participation in the cooperative. -``` - ---- - -## Screen 9: Achievements - -``` -Design an achievements screen showing investment milestones and badges. - -Show a back arrow with "My Achievements" title. - -Add Achievement Stats with three boxes: total badges, investment streak months, and total dividends earned. - -Create an Unlocked Badges section with a grid of earned badges. Each badge should have a distinct icon, name, and golden glow effect. Include badges like: Streak Pro, Gold Member, Dividend King, First 100, DRIP Master, Active Voter, Profit Pro, Hold Firm. - -Add a Locked Badges section with grayed-out badges showing what's still to achieve: Platinum Member, 500 Shares, 5 Year Holder, VIP Club. Include a progress hint card for the next achievable badge with progress bar. - -Show a Recent Activity timeline with recent achievement unlocks and dates. - -Make it feel rewarding and motivating for long-term investors. -``` - ---- - -## Screen 10: Loading & Empty States - -``` -Loading State: -Design a loading skeleton for the share portfolio dashboard. - -Keep the header visible. - -Show a hero card skeleton with gradient background shape and shimmer placeholders for balance and gain indicator. - -Add shimmer rectangles for the chart section. - -Display share card skeletons with shimmer for icons, text, and values. - -Use wave animation with light gray gradients. - ---- - -Empty State: -Design an empty state for when a user has no share investments. - -Show a friendly coin/investment illustration floating in the center. - -Display "Start Your Investment Journey" as the headline with "Invest in your cooperative and start earning dividends today!" description. - -Create a "Why Invest?" section with checkmarks: Earn Quarterly Dividends (4-7% yield), Own Part of Your Coop, Get Voting Rights, Member Benefits. - -Add a prominent "Apply for Shares" gradient button. - -Make it feel like an exciting opportunity, not emptiness. -``` - ---- - -## Component Prompts - -### Portfolio Hero Card -``` -Design an investment portfolio hero card. - -Use a purple gradient background (#667EEA to #764BA2) with 24px rounded corners. - -Add a sparkline chart in the background at low opacity showing portfolio growth. - -Show "Total Value" label and large balance in white bold text. - -Create a gain/loss badge: green with up arrow for gains, red with down arrow for losses, showing amount and percentage. - -Add stat chips showing total shares and total dividends earned. -``` - -### Share Performance Chart -``` -Design a share price performance chart. - -Create time period selector tabs at the top (1D, 1W, 1M, 3M, 1Y, ALL). - -Draw a smooth line chart about 180px tall with gradient fill below the line. - -Mark the user's purchase price with a horizontal dashed line and "You bought here" label. - -Highlight the current price at the end with a dot and tooltip. - -Animate the line drawing from left to right on load. -``` - -### Dividend Tracker Card -``` -Design a dividend earnings tracker card. - -Use a green gradient background (#11998E to #38EF7D). - -Show "Your Dividend Earnings" header with a dollar icon. - -Display total dividends received prominently. - -Create a 2x2 grid showing: This Year amount, Last Dividend amount, Yield percentage, and Payment Frequency. - -Use white text on the gradient for good contrast. -``` - -### Investment Streak Grid -``` -Design an investment streak tracking grid. - -Create a grid with 32x32px cells and small spacing. - -Invested months show green checkmarks. -Current month shows amber with a pulse animation. -Missed months show red X marks. -Future months show gray empty circles. - -Add a badge below for streak achievements like "Diamond Hands". -``` - -### Share Card -``` -Design a share account card for the portfolio list. - -Create a white card with subtle shadow and rounded corners. - -Show share type icon, name, and account number. - -Display current value prominently with gain/loss badge (green for gains, red for losses). - -Add stats: number of shares and price per share. - -Include action buttons: Buy, Sell, Details. -``` - ---- - -## Tips for Figma First Draft - -1. **Iterate**: Generate once, then refine with follow-up prompts -2. **Colors**: Use "purple #667EEA" for primary, "green #11998E" for success -3. **Reference**: Say "like Robinhood" or "Public app style" for investment context -4. **Charts**: Emphasize clean line charts with gradient fills -5. **Gamification**: Include streaks, badges, and progress indicators -6. **Responsive**: Mention "393px width for mobile" for correct sizing - ---- - -## After Generation - -1. Review generated designs for consistency -2. Create a color style library -3. Build component variants -4. Link screens with prototype connections -5. Export and update `FIGMA_LINKS.md` diff --git a/claude-product-cycle/design-spec-layer/features/share-account/mockups/PROMPTS_STITCH.md b/claude-product-cycle/design-spec-layer/features/share-account/mockups/PROMPTS_STITCH.md deleted file mode 100644 index 6254f8fbb..000000000 --- a/claude-product-cycle/design-spec-layer/features/share-account/mockups/PROMPTS_STITCH.md +++ /dev/null @@ -1,608 +0,0 @@ -# Share Account - Google Stitch Prompts - -> **Tool**: [Google Stitch](https://stitch.withgoogle.com) -> **Style**: Material Design 3, Investment Portfolio Fintech -> **Format**: Copy each prompt block directly into Stitch - ---- - -## Design System Reference - -``` -Primary Gradient: #667EEA -> #764BA2 -Secondary Gradient: #11998E -> #38EF7D -Success/Gain: #00D09C -Error/Loss: #FF4757 -Warning: #FFB800 -Text Primary: #1F2937 -Text Secondary: #6B7280 -Surface: #FFFFFF -Screen Size: 393 x 852 pixels (Android) -``` - ---- - -## Screen 1: Share Portfolio Dashboard - -``` -Mobile investment portfolio dashboard, Material Design 3, fintech, 393x852px - -Top Bar: -- Back arrow, "My Investments" title -- Add and help icons right - -Portfolio Hero Card: -- Full width, gradient #667EEA to #764BA2, 24dp radius -- Portfolio icon + "Your Portfolio" header -- "Total Value" label -- "$5,750.00" balance 36sp white ExtraBold -- Gain indicator: up arrow "+$425.00 (+7.9%)" green -- "All Time Gain" subtitle -- Two stat chips: coin "150 Shares", dollar "1,250 Dividends" -- Sparkline chart in background - -Portfolio Performance Chart: -- Time selector tabs: 1D, 1W, 1M, 3M, 1Y, ALL -- Line chart 180dp height, gradient fill -- Current price point highlighted -- X-axis: month labels -- Monthly return chips below: +2.5% Jan, +1.8% Feb, +3.2% Mar, +0.4% Apr - -Next Dividend Card: -- Success gradient #11998E to #38EF7D -- Calendar icon with MAR 15 date -- "Next Dividend" header -- "Estimated: $156.25" prominent -- Two info chips: "DRIP On Auto-invest", "42 days until payout" - -Investment Streak Section: -- Fire icon "18 Month Investor!" -- Monthly investment grid 3 rows -- Green checkmarks for invested months -- Current month highlighted -- Badge: "Diamond Hands 2024" - -Share Accounts Section: -- "MY SHARE ACCOUNTS" header, "Active (2)", "View All >" -- Equity Shares Card: - - Coin icon, SH-0001234567 - - Value $2,500.00, Gain +$175.00 (+7.5%) green - - Stats: 100 Shares, $25.00/share - - Actions: [Buy] [Sell] [Details] -- Premium Shares Card: - - Value $3,250.00, Gain +$250.00 (+8.3%) - - 50 Shares, $65.00/share - -Smart Investment Tip Card: -- Primary gradient -- Sparkle icon "AI Insight" -- "Your dividend yield is 5.2%. Buy 10 more shares to reach Gold Member tier (+0.5% bonus dividend rate)." -- Actions: [Dismiss] [Buy Now] - -Quick Actions Row: -- 4 buttons: Buy Shares, Dividend Calc, Price Alerts, Vote - -Bottom Navigation: -- Home, Accounts, FAB +, Cards, Profile -``` - ---- - -## Screen 2: Share Account Detail - -``` -Mobile share account detail, Material Design 3, investment fintech, 393x852px - -Top Bar: -- Back arrow, "Equity Shares" title -- "SH-0001234567" subtitle, menu icon - -Share Hero Card: -- Primary gradient -- Coin icon "EQUITY SHARES", account number -- "Portfolio Value" label -- "$2,500.00" balance 36sp -- Gain badge: up arrow "+$175.00 (+7.5%)" -- Green "ACTIVE" status pill - -Share Stats Row: -- Three stat boxes: Coin "100 Shares", Price "$25.00/share", Gain "+7.5%" - -Share Price Chart: -- Time selector: 1D, 1W, 1M, 3M, 1Y, ALL -- Line chart with gradient fill -- Current price highlighted -- Purchase price marker with dashed line: "You bought here" -- X-axis: date labels - -Dividend Tracker Card: -- Success gradient -- Dollar icon "Your Dividend Earnings" -- "$500.00 Total Received" large -- Grid 2x2: This Year $400, Last Div $100, Yield 4.0% p.a., Frequency Quarterly - -DRIP Settings Card: -- "Dividend Reinvestment" header -- Toggle: "DRIP Enabled" [ON] -- Description: "Automatically reinvest dividends to buy more shares" -- "Est. extra shares/year: 4" - -Quick Actions Row: -- Three buttons: Buy Shares, Sell Shares, Dividends History - -Share Details Grid: -- Product Name: Equity Shares -- Approved Shares: 100 -- Pending Shares: 0 -- Purchase Price (Avg): $23.25 -- Current Price: $25.00 -- Currency: USD ($) - -Member Benefits Card: -- Star icon "Gold Member (100+ shares)" -- Checklist with checkmarks: - - +0.5% Bonus Dividend: Applied to all payouts - - Voting Rights (1 vote): Next AGM March 2025 - - Priority New Offerings: Early access enabled - -Actions Menu: -- List with chevrons: Dividend History, Transaction History, Charges, Price Alerts, Generate QR -``` - ---- - -## Screen 3: Buy Shares Flow - -``` -Mobile buy shares - Step 1, Material Design 3, fintech, 393x852px - -Top Bar: -- Close X, "Buy Shares" title, "1/3" indicator - -Progress Indicator: -- Three steps: [1] Amount, [2] Review, [3] Confirm - -Share Selector Card: -- Primary gradient -- "How many shares?" label -- Large "25" number centered with "shares" label -- Slider: 10 to 100 - -Quick Amounts: -- Four chips: 10, [25] selected, 50, 100 - -Investment Preview: -- "Investment Breakdown" header -- Shares to Buy: 25 -- Price per Share: $25.00 -- Subtotal: $625.00 -- Transaction Fee: $1.25 -- Total Cost: $626.25 bold - -Projected Returns Card: -- Primary gradient -- Chart icon "Your Projected Returns" -- "After Purchase:" header -- Two stat boxes: "Total Shares 125", "Est. Annual Dividend $125.00" -- Sparkle text: "You'll earn $3.12/mo in dividends!" - -Payment Source: -- "Pay From" label -- Account card: SAV icon, Primary Savings ****4521 -- Available: $8,200.00 -- "Change Account v" link - -Continue Button: -- Full width gradient: "Continue - Review" - ---- - -Step 2: Review - -Top Bar: -- Back arrow, "Buy Shares" title, "2/3" - -Order Review Card: -- Equity Shares, SH-0001234567 -- Order Type: Buy -- Shares: 25 -- Price per Share: $25.00 -- Subtotal: $625.00 -- Transaction Fee: $1.25 -- TOTAL: $626.25 highlighted box - -After Purchase Card: -- "Your Holdings After" header -- Total Shares: 100 -> 125 -- Portfolio Value: $2,500 -> $3,125 -- Annual Dividend: $100 -> $125 -- Star badge: "Gold Member Maintained" - -Streak Bonus Card: -- Fire icon "Streak Continues!" -- "This purchase extends your 19-month investment streak!" - -Confirm Button: -- Full width gradient: "Confirm - $626.25" -- Lock icon: "Secured with 256-bit encryption" - ---- - -Step 3: Success - -Success Card: -- Animated checkmark + confetti -- "Purchase Successful!" -- "+25 Shares", "$626.25" - -Updated Holdings: -- Two stat boxes: Coin "125 Total Shares", Dollar "$125.00 Est. Annual Dividend" -- "Portfolio Value: $3,125.00" - -Streak Update: -- Fire icon "19 MONTHS Consecutive Investing" -- Badge: "Diamond Hands Unlocked!" - -Action Buttons: -- View Order, Home, Done (gradient) -``` - ---- - -## Screen 4: Sell Shares Flow - -``` -Mobile sell shares, Material Design 3, fintech, 393x852px - -Top Bar: -- Close X, "Sell Shares" title, "1/3" - -Progress Indicator: -- Three steps: Amount, Review, Confirm - -Sell Selector Card: -- Accent gradient #FC466B to #3F5EFB -- "How many to sell?" label -- Large "25" number with "shares" label -- "Available: 100 Max: 100" - -Quick Amounts: -- Four chips: 10, [25] selected, 50, ALL - -Sale Preview: -- "Sale Breakdown" header -- Shares to Sell: 25 -- Current Price: $25.00 -- Your Avg Purchase Price: $23.25 -- Gross Proceeds: $625.00 -- Transaction Fee: $1.25 -- Net Proceeds: $623.75 - -Profit/Loss Card: -- Success gradient (if profit) -- Up arrow "Your Profit" -- "+$42.50" large, "(+7.3%)" -- "Based on avg purchase price" - -Impact on Holdings: -- "After This Sale" header -- Remaining Shares: 100 -> 75 -- Portfolio Value: $2,500 -> $1,875 -- Annual Dividend: $100 -> $75 -- Warning: "Below Gold Member (100) -0.5% bonus dividend" - -Receive Funds To: -- SAV icon, Primary Savings ****4521 -- "Transfer: 1-2 days" - -Warning: -- "Sale is final and irreversible" - -Confirm Button: -- Accent gradient: "Confirm Sale - $623.75" -``` - ---- - -## Screen 5: Dividend History - -``` -Mobile dividend history, Material Design 3, fintech, 393x852px - -Top Bar: -- Back arrow, "Dividend History" title, filter icon - -Dividend Summary Card: -- Success gradient -- Dollar icon "Lifetime Dividends" -- "$1,250.00 All Time" large -- Two stat boxes: "This Year $400.00", "Last Year $350.00" - -Dividend Growth Chart: -- Bar chart showing yearly growth -- Bars: 2021 ~$100, 2022 ~$200, 2023 ~$350, 2024 ~$400 -- "Compound Growth: 18.5% annually" - -Year Filter: -- Chips: [All], 2024, 2023, 2022 - -2024 Dividends Section: -- Q4 Dividend: +$100.00, Dec 01, 2024 [PAID] green badge -- Rate: 4.0% | 100 shares -- Q3 Dividend: +$100.00, Sep 01, 2024 [PAID] -- Q2 Dividend: +$100.00, Jun 01, 2024 [PAID] -- Q1 Dividend: +$100.00, Mar 01, 2024 [PAID] - -2023 Dividends Section: -- Q4 Dividend: +$87.50, Dec 01, 2023 [PAID] -- Rate: 3.75% | 80 shares -- Q3 Dividend: +$87.50, Sep 01, 2023 [PAID] -- Load More button -``` - ---- - -## Screen 6: Price Alerts - -``` -Mobile price alerts, Material Design 3, fintech, 393x852px - -Top Bar: -- Back arrow, "Price Alerts" title, add icon - -Current Price Card: -- "Equity Shares" header -- "Current Price" label -- "$25.00" large -- Gain badge: "+$1.75 (+7.5%) YTD" - -Active Alerts Section: -- "ACTIVE ALERTS" header - -Alert Card 1: -- Up arrow icon "Price Above $27.00" -- "Current: $25.00 Gap: $2.00" -- Progress bar 92.6% to trigger -- Actions: [Edit] [Delete] - -Alert Card 2: -- Down arrow icon "Price Below $22.00" (buy opportunity) -- "Current: $25.00 Gap: $3.00" -- "Not triggered" status -- Actions: [Edit] [Delete] - -Create New Alert Card: -- Primary gradient -- Plus icon "Add Price Alert" -- "Get notified when share price reaches your target" -``` - ---- - -## Screen 7: Dividend Calculator - -``` -Mobile dividend calculator, Material Design 3, fintech, 393x852px - -Top Bar: -- Back arrow, "Dividend Calculator" title - -Current Holdings Card: -- "Equity Shares" header -- Current Holdings: 100 shares -- Annual Dividend: $100.00 - -Projection Settings: -- Monthly Investment label -- Large "$250" editable -- Slider: $0 to $1000 - -- Investment Period label -- Chips: 1Y, 3Y, [5Y] selected, 10Y, 20Y - -Projection Results Card: -- Primary gradient -- Chart icon "After 5 Years" -- "$18,750.00 Total Value" large -- Grid 2x2: - - Total Shares: 700 - - Annual Dividend: $700.00 - - Invested: $15,000 - - Dividends: $1,250 - -Growth Chart: -- Area chart showing compound growth -- Y-axis: $6k to $18k -- X-axis: Now, Y1, Y2, Y3, Y4, Y5 -- Legend: Principal (solid), Dividends (stacked) - -Start Button: -- Full width gradient: "Start Investing" -``` - ---- - -## Screen 8: Member Voting - -``` -Mobile governance voting, Material Design 3, fintech, 393x852px - -Top Bar: -- Back arrow, "Governance & Voting" title - -Voting Power Card: -- Primary gradient -- Vote icon "Your Voting Power" -- "1 Vote" large -- "Gold Member (100+ shares)" -- "1 vote per resolution" - -Upcoming Votes Section: -- "UPCOMING VOTES" header -- "Annual General Meeting March 15, 2025" - -Resolution 1 Card: -- "Increase Dividend Rate" title -- "Proposal: 4.0% -> 4.5%" -- Three vote buttons: FOR, AGAINST, ABSTAIN -- "Voting ends: Mar 10, 2025" - -Resolution 2 Card: -- "Elect Board Member" title -- "Candidates: 3" -- [View Candidates >] link -- [Vote Now >] button - -Past Votes Section: -- "PAST VOTES" header -- 2024 AGM Votes: 3 resolutions voted [v] [View Results >] -- 2023 AGM Votes: 2 resolutions voted [v] [View Results >] -``` - ---- - -## Screen 9: Achievements - -``` -Mobile share achievements, Material Design 3, gamification, 393x852px - -Top Bar: -- Back arrow, "My Achievements" title - -Achievement Stats: -- Three stat boxes: "8 Badges", "19 Streak", "$1250 Divs" - -Unlocked Badges Section: -- "Unlocked (8)" header -- 4x2 badge grid: - - Fire Streak Pro, Star Gold Member, Dollar Div King, 100 First 100 - - DRIP DRIP Master, Vote Active Voter, Up Profit Pro, Lock Hold Firm -- Full color with glow effects - -Locked Badges Section: -- "Locked (4)" header -- Grayed out: Plat Platinum Member, 500 500 Shares, Year 5 Year Holder, VIP VIP Club -- Progress hint: "Platinum Member: Own 200+" -- Progress bar 50% -> 200 - -Recent Activity: -- Timeline: - - Gold Member achieved! Jan 15, 2025 - - 18-month streak reached! Jan 10, 2025 - - Dividend King badge Dec 01, 2024 -``` - ---- - -## Screen 10: Loading & Empty States - -``` -Loading State: -Mobile share loading skeleton, Material Design 3, 393x852px - -Hero Shimmer: -- Gradient card shape with shimmer -- Balance and gain placeholders - -Chart Shimmer: -- Rectangle shimmer for chart area - -Account Cards Shimmer: -- Card shapes with icon, text, balance shimmers - -Animation: left-to-right sweep, 1000ms -Gradient: #E1E4E8 -> #F8F9FA -> #E1E4E8 - ---- - -Empty State: -Mobile share empty state, Material Design 3, 393x852px - -Center Content: -- Coin illustration 160dp floating -- "Start Your Investment Journey" title 20sp bold -- "Invest in your cooperative and start earning dividends today!" - -Benefits: -- "WHY INVEST?" header -- Checklist: - - Earn Quarterly Dividends (4-7% annual yield) - - Own Part of Your Coop (Build long-term wealth) - - Get Voting Rights (Have your say) - - Member Benefits (Priority access & bonuses) - -CTA: -- Full width gradient: "Apply for Shares" -``` - ---- - -## Components - -### PortfolioHeroCard -``` -Portfolio hero card, Material Design 3: -- Min height: 220dp, padding: 24dp -- Gradient #667EEA to #764BA2, 24dp radius -- Sparkline chart in background 20% opacity -- Gain/loss badge: green for positive, red for negative -- Shadow: 12dp blur, gradient 25% -``` - -### SharePerformanceChart -``` -Share price chart, Material Design 3: -- Height: 180dp -- Line: 3dp stroke, gradient -- Fill: gradient at 20% opacity -- Purchase price: dashed line with label -- Touch: tooltip on drag -- Animation: path draws 1200ms -``` - -### DividendTrackerCard -``` -Dividend tracker card, Material Design 3: -- Success gradient #11998E to #38EF7D -- Stats grid 2x2 -- Height: auto, padding: 20dp -- Corner radius: 16dp -``` - -### InvestmentStreakGrid -``` -Investment streak grid, Material Design 3: -- Cell: 32dp x 32dp, spacing: 4dp -- Invested: #00D09C green check -- Current: #FFB800 amber pulse -- Missed: #FF4757 red X -- Future: #E1E4E8 gray -``` - -### ShareCard -``` -Share account card, Material Design 3: -- Min height: 160dp, padding: 16dp -- White surface, 16dp radius -- Gain badge: green/red based on performance -- Quick action buttons row -``` - -### DRIPToggle -``` -DRIP toggle card, Material Design 3: -- Toggle: Material Switch -- Info text: secondary below -- Outlined card style -- ON state: success tint -``` - ---- - -## Quick Start - -1. Open [stitch.withgoogle.com](https://stitch.withgoogle.com) -2. Create project "Mifos Mobile - Share Account" -3. Copy each screen prompt -> Generate -4. Generate components separately for reuse -5. Export all to Figma when done diff --git a/claude-product-cycle/design-spec-layer/features/share-account/mockups/dummy/01-share-detail.png b/claude-product-cycle/design-spec-layer/features/share-account/mockups/dummy/01-share-detail.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/share-account/mockups/dummy/02-share-dividends.png b/claude-product-cycle/design-spec-layer/features/share-account/mockups/dummy/02-share-dividends.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/share-account/mockups/dummy/03-share-transactions.png b/claude-product-cycle/design-spec-layer/features/share-account/mockups/dummy/03-share-transactions.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/share-account/mockups/dummy/04-share-statement.png b/claude-product-cycle/design-spec-layer/features/share-account/mockups/dummy/04-share-statement.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/share-account/mockups/dummy/05-purchase-shares.png b/claude-product-cycle/design-spec-layer/features/share-account/mockups/dummy/05-purchase-shares.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/share-account/mockups/dummy/06-redeem-shares.png b/claude-product-cycle/design-spec-layer/features/share-account/mockups/dummy/06-redeem-shares.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/transfer/API.md b/claude-product-cycle/design-spec-layer/features/transfer/API.md deleted file mode 100644 index 9bc64dc89..000000000 --- a/claude-product-cycle/design-spec-layer/features/transfer/API.md +++ /dev/null @@ -1,535 +0,0 @@ -# Transfer - API Reference - -> **Base URL**: `https://tt.mifos.community/fineract-provider/api/v1/self/` -> **Authentication**: Basic Auth with `Fineract-Platform-TenantId` header -> **Last Updated**: 2025-12-29 - ---- - -## Authentication Headers - -All endpoints require: -``` -Headers: - Authorization: Basic {base64EncodedAuthenticationKey} - Fineract-Platform-TenantId: {tenantId} - Content-Type: application/json -``` - ---- - -## 1. Self-Transfer Template - -### GET /self/accounttransfers/template - -**Purpose**: Fetch account options for self-transfers between user's own accounts - -**Service**: `SavingAccountsListService` - -**Request**: -``` -GET /self/accounttransfers/template?fromAccountId=1001&fromAccountType=2 -``` - -**Query Parameters**: -| Parameter | Type | Required | Description | -|-----------|------|----------|-------------| -| fromAccountId | Long | No | Pre-select source account ID | -| fromAccountType | Long | No | Account type: 1=Loan, 2=Savings | - -**Response**: -```json -{ - "fromAccountOptions": [ - { - "accountId": 1001, - "accountNo": "SA-0001234567", - "accountType": { - "id": 2, - "code": "accountType.savings", - "value": "Savings Account" - }, - "clientId": 123, - "clientName": "John Doe", - "officeId": 1, - "officeName": "Head Office" - }, - { - "accountId": 1002, - "accountNo": "SA-0009876543", - "accountType": { - "id": 2, - "code": "accountType.savings", - "value": "Savings Account" - }, - "clientId": 123, - "clientName": "John Doe", - "officeId": 1, - "officeName": "Head Office" - } - ], - "toAccountOptions": [ - { - "accountId": 2001, - "accountNo": "LA-0005678901", - "accountType": { - "id": 1, - "code": "accountType.loan", - "value": "Loan Account" - }, - "clientId": 123, - "clientName": "John Doe", - "officeId": 1, - "officeName": "Head Office" - }, - { - "accountId": 1001, - "accountNo": "SA-0001234567", - "accountType": { - "id": 2, - "code": "accountType.savings", - "value": "Savings Account" - }, - "clientId": 123, - "clientName": "John Doe", - "officeId": 1, - "officeName": "Head Office" - } - ] -} -``` - -**Kotlin Service**: -```kotlin -interface SavingAccountsListService { - @GET(ApiEndPoints.ACCOUNT_TRANSFER + "/template") - fun accountTransferTemplate( - @Query("fromAccountId") accountId: Long?, - @Query("fromAccountType") accountType: Long?, - ): Flow -} -``` - -**Status**: Implemented in `SavingAccountsListService.kt` - ---- - -## 2. Third-Party Transfer Template - -### GET /self/accounttransfers/template?type=tpt - -**Purpose**: Fetch account options for third-party transfers to beneficiaries - -**Service**: `ThirdPartyTransferService` - -**Request**: -``` -GET /self/accounttransfers/template?type=tpt -``` - -**Response**: -```json -{ - "fromAccountOptions": [ - { - "accountId": 1001, - "accountNo": "SA-0001234567", - "accountType": { - "id": 2, - "code": "accountType.savings", - "value": "Savings Account" - }, - "clientId": 123, - "clientName": "John Doe", - "officeId": 1, - "officeName": "Head Office" - } - ], - "toAccountOptions": [ - { - "accountId": 5001, - "accountNo": "SA-0007654321", - "accountType": { - "id": 2, - "code": "accountType.savings", - "value": "Savings Account" - }, - "clientId": 456, - "clientName": "Jane Doe", - "officeId": 1, - "officeName": "Head Office" - } - ] -} -``` - -**Kotlin Service**: -```kotlin -interface ThirdPartyTransferService { - @GET(ApiEndPoints.ACCOUNT_TRANSFER + "/template?type=tpt") - fun accountTransferTemplate(): Flow -} -``` - -**Status**: Implemented in `ThirdPartyTransferService.kt` - ---- - -## 3. Execute Self-Transfer - -### POST /self/accounttransfers - -**Purpose**: Execute a fund transfer between user's own accounts - -**Service**: `SavingAccountsListService` - -**Request**: -```json -POST /self/accounttransfers - -{ - "fromOfficeId": 1, - "fromClientId": 123, - "fromAccountType": 2, - "fromAccountId": "SA-0001234567", - "toOfficeId": 1, - "toClientId": 123, - "toAccountType": 1, - "toAccountId": "LA-0005678901", - "dateFormat": "dd MMMM yyyy", - "locale": "en", - "transferDate": "29 December 2025", - "transferAmount": 500.00, - "transferDescription": "Loan repayment" -} -``` - -**Request Fields**: -| Field | Type | Required | Description | -|-------|------|----------|-------------| -| fromOfficeId | Int | Yes | Source account office ID | -| fromClientId | Long | Yes | Source account client ID | -| fromAccountType | Int | Yes | 1=Loan, 2=Savings | -| fromAccountId | String | Yes | Source account number | -| toOfficeId | Int | Yes | Destination account office ID | -| toClientId | Long | Yes | Destination account client ID | -| toAccountType | Int | Yes | 1=Loan, 2=Savings | -| toAccountId | String | Yes | Destination account number | -| dateFormat | String | Yes | Date format pattern | -| locale | String | Yes | Locale code (e.g., "en") | -| transferDate | String | Yes | Transfer date in specified format | -| transferAmount | Double | Yes | Amount to transfer | -| transferDescription | String | No | Optional remarks/description | - -**Response (Success)**: -```json -{ - "savingsId": 1001, - "resourceId": 50001 -} -``` - -**Response Fields**: -| Field | Type | Description | -|-------|------|-------------| -| savingsId | Int | Source savings account ID | -| resourceId | Int | Created transfer resource ID | - -**Kotlin Service**: -```kotlin -interface SavingAccountsListService { - @POST(ApiEndPoints.ACCOUNT_TRANSFER) - suspend fun makeTransfer(@Body transferPayload: TransferPayload?): HttpResponse -} -``` - -**Status**: Implemented in `SavingAccountsListService.kt` - ---- - -## 4. Execute Third-Party Transfer - -### POST /self/accounttransfers?type=tpt - -**Purpose**: Execute a fund transfer to a third-party beneficiary account - -**Service**: `ThirdPartyTransferService` - -**Request**: -```json -POST /self/accounttransfers?type=tpt - -{ - "fromOfficeId": 1, - "fromClientId": 123, - "fromAccountType": 2, - "fromAccountId": "SA-0001234567", - "toOfficeId": 1, - "toClientId": 456, - "toAccountType": 2, - "toAccountId": "SA-0007654321", - "dateFormat": "dd MMMM yyyy", - "locale": "en", - "transferDate": "29 December 2025", - "transferAmount": 1000.00, - "transferDescription": "Monthly support" -} -``` - -**Response**: Same as self-transfer response - -**Kotlin Service**: -```kotlin -interface ThirdPartyTransferService { - @POST(ApiEndPoints.ACCOUNT_TRANSFER + "?type=tpt") - suspend fun makeTransfer(@Body transferPayload: TransferPayload?): HttpResponse -} -``` - -**Status**: Implemented in `ThirdPartyTransferService.kt` - ---- - -## 5. Kotlin DTOs - -### 5.1 AccountOptionsTemplate -```kotlin -@Serializable -@Parcelize -data class AccountOptionsTemplate( - val fromAccountOptions: List = emptyList(), - val toAccountOptions: List = emptyList(), -) : Parcelable -``` - -### 5.2 AccountOption -```kotlin -@Serializable -@Parcelize -data class AccountOption( - val accountId: Int? = null, - val accountNo: String? = null, - val accountType: AccountType? = null, - val clientId: Long? = null, - val clientName: String? = null, - val officeId: Int? = null, - val officeName: String? = null, -) : Parcelable -``` - -### 5.3 AccountType -```kotlin -@Serializable -@Parcelize -data class AccountType( - val id: Int? = null, - val code: String? = null, - val value: String? = null, -) : Parcelable -``` - -### 5.4 TransferPayload -```kotlin -@Serializable -@Parcelize -data class TransferPayload( - val fromOfficeId: Int? = null, - val fromClientId: Long? = null, - val fromAccountType: Int? = null, - val fromAccountId: String? = null, - val toOfficeId: Int? = null, - val toClientId: Long? = null, - val toAccountType: Int? = null, - val toAccountId: String? = null, - val transferDate: String? = null, - val transferAmount: Double? = null, - val transferDescription: String? = null, - val dateFormat: String? = null, - val locale: String? = null, -) : Parcelable -``` - -### 5.5 TransferResponse -```kotlin -@Serializable -data class TransferResponse( - val savingsId: Int? = null, - val resourceId: Int? = null, -) -``` - -### 5.6 ReviewTransferPayload -```kotlin -@Serializable -data class ReviewTransferPayload( - val payToAccount: AccountOption? = null, - val payFromAccount: AccountOption? = null, - val amount: String = "", - val review: String = "", -) -``` - -### 5.7 TransferType -```kotlin -enum class TransferType { - TPT, - SELF, -} -``` - ---- - -## 6. Repository Implementations - -### 6.1 TransferRepository -```kotlin -interface TransferRepository { - suspend fun makeTransfer( - payload: TransferPayload, - transferType: TransferType?, - ): DataState -} -``` - -### 6.2 TransferRepositoryImp -```kotlin -class TransferRepositoryImp( - private val dataManager: DataManager, - private val ioDispatcher: CoroutineDispatcher, -) : TransferRepository { - override suspend fun makeTransfer( - payload: TransferPayload, - transferType: TransferType?, - ): DataState { - return withContext(ioDispatcher) { - try { - val response = when (transferType) { - TransferType.SELF -> dataManager.savingAccountsListApi.makeTransfer(payload) - else -> dataManager.thirdPartyTransferApi.makeTransfer(payload) - } - val transferResponse = Json.decodeFromString(response.bodyAsText()) - DataState.Success(transferResponse.resourceId.toString()) - } catch (e: ClientRequestException) { - val errorMessage = extractErrorMessage(e.response) - DataState.Error(Exception(errorMessage), null) - } catch (e: IOException) { - DataState.Error(Exception("Network error: ${e.message ?: "Please check your connection"}"), null) - } catch (e: ServerResponseException) { - DataState.Error(Exception("Server error: ${e.message}"), null) - } - } - } -} -``` - -### 6.3 ThirdPartyTransferRepository -```kotlin -interface ThirdPartyTransferRepository { - fun thirdPartyTransferTemplate(): Flow> -} -``` - -### 6.4 ThirdPartyTransferRepositoryImp -```kotlin -class ThirdPartyTransferRepositoryImp( - private val dataManager: DataManager, - private val ioDispatcher: CoroutineDispatcher, -) : ThirdPartyTransferRepository { - override fun thirdPartyTransferTemplate(): Flow> { - return dataManager.thirdPartyTransferApi.accountTransferTemplate() - .asDataStateFlow().flowOn(ioDispatcher) - } -} -``` - ---- - -## 7. API Endpoint Constants - -```kotlin -object ApiEndPoints { - const val ACCOUNT_TRANSFER = "accounttransfers" - // Full paths: - // Self-transfer template: accounttransfers/template - // TPT template: accounttransfers/template?type=tpt - // Self-transfer: accounttransfers - // TPT transfer: accounttransfers?type=tpt -} -``` - ---- - -## 8. Error Responses - -| Status Code | Error | Description | User Message | -|-------------|-------|-------------|--------------| -| 400 | Bad Request | Invalid payload | "Please check your input" | -| 401 | Unauthorized | Invalid token | "Please login again" | -| 403 | Forbidden | Insufficient permissions | "Access denied" | -| 404 | Not Found | Account not found | "Account not found" | -| 409 | Conflict | Insufficient balance | "Insufficient balance for transfer" | -| 500 | Server Error | Internal error | "Service unavailable" | - -**Error Response Format**: -```json -{ - "developerMessage": "Detailed error for debugging", - "httpStatusCode": "400", - "defaultUserMessage": "User-friendly error message", - "userMessageGlobalisationCode": "error.msg.code", - "errors": [ - { - "developerMessage": "Field-specific error", - "defaultUserMessage": "Amount must be greater than 0", - "userMessageGlobalisationCode": "validation.msg.amount.invalid", - "parameterName": "transferAmount" - } - ] -} -``` - ---- - -## 9. API Summary Table - -| Endpoint | Method | Service | Repository | Purpose | -|----------|--------|---------|------------|---------| -| /accounttransfers/template | GET | SavingAccountsListService | SavingsAccountRepository | Self-transfer options | -| /accounttransfers/template?type=tpt | GET | ThirdPartyTransferService | ThirdPartyTransferRepository | TPT options | -| /accounttransfers | POST | SavingAccountsListService | TransferRepository | Execute self-transfer | -| /accounttransfers?type=tpt | POST | ThirdPartyTransferService | TransferRepository | Execute TPT | - ---- - -## 10. Account Type Values - -| ID | Code | Value | Description | -|----|------|-------|-------------| -| 1 | accountType.loan | Loan Account | Loan account type | -| 2 | accountType.savings | Savings Account | Savings account type | - ---- - -## 11. Date Formatting - -**Required Format**: `dd MMMM yyyy` -**Example**: `29 December 2025` -**Locale**: `en` - -```kotlin -val transferDate = listOf( - currentDate.day, - currentDate.month.number, - currentDate.year, -) -val formattedDate = DateHelper.getDateMonthYearString(transferDate) -// Output: "29 December 2025" -``` - ---- - -## Changelog - -| Date | Change | -|------|--------| -| 2025-12-29 | Initial API documentation based on implementation code | diff --git a/claude-product-cycle/design-spec-layer/features/transfer/MOCKUP.md b/claude-product-cycle/design-spec-layer/features/transfer/MOCKUP.md deleted file mode 100644 index 42a79718d..000000000 --- a/claude-product-cycle/design-spec-layer/features/transfer/MOCKUP.md +++ /dev/null @@ -1,1327 +0,0 @@ -# Transfer/Pay - UI Mockups - -> **Design Style**: 2025 Professional Fintech (Venmo/Cash App Inspired) -> **Version**: 2.0 - Enhanced with Smart Payments & Social Features -> **Primary Gradient**: #667EEA → #764BA2 (Purple-Blue) -> **Last Updated**: 2025-12-30 - ---- - -## Design Philosophy - -The Transfer experience is reimagined as a **modern P2P payment platform** following 2025 fintech trends: - -1. **Conversation-First** - Chat-like interface for payments -2. **Smart Suggestions** - AI-powered amount and recipient recommendations -3. **Multi-Modal** - Send, Request, Split, Schedule from one screen -4. **Social Layer** - Notes, emojis, and payment reactions -5. **Instant Everything** - Real-time updates and confirmations - ---- - -## Navigation Context - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ ACCESS POINTS │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ 1. Bottom Navigation FAB (Primary) │ -│ └── Central floating action button with gradient │ -│ └── Long-press reveals Quick Actions │ -│ │ -│ 2. Quick Actions Bar (Home Screen) │ -│ └── "Send", "Request", "Split" actions │ -│ │ -│ 3. Recent Recipients (Home Screen) │ -│ └── Tap avatar → Direct send to person │ -│ │ -│ 4. Account Detail Screen │ -│ └── "Transfer" button in action bar │ -│ │ -│ 5. AI Assistant │ -│ └── "Send $50 to John" voice/text command │ -│ │ -│ 6. Notification Action │ -│ └── "Pay now" from payment request notification │ -│ │ -│ 7. Deep Link / QR Code │ -│ └── mifos://pay?to=xxx&amount=xxx │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Screen 1: Payment Hub (Main Entry) - -``` -+-------------------------------------------------------------------+ -| 9:41 ●●●○○ 🔋 87% | -+-------------------------------------------------------------------+ -| | -| ← [History] | -| | -+-------------------------------------------------------------------+ -| | -| +---------------------------------------------------------------+ | -| | [ 💸 Send ] [ 📥 Request ] [ 👥 Split ] | | -| | SELECTED DEFAULT DEFAULT | | -| +---------------------------------------------------------------+ | -| | -+===================================================================+ -| | -| ╔═══════════════════════════════════════════════════════════════╗ | -| ║▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓║ | -| ║▓▓ ▓▓║ | -| ║▓▓ From Change ▼ ▓▓║ | -| ║▓▓ ▓▓║ | -| ║▓▓ 🏦 Primary Savings ▓▓║ | -| ║▓▓ ****4521 ▓▓║ | -| ║▓▓ ▓▓║ | -| ║▓▓ Available: $8,200.00 [👁] ▓▓║ | -| ║▓▓ ▓▓║ | -| ╚═══════════════════════════════════════════════════════════════╝ | -| FROM ACCOUNT CARD | -| | -+-------------------------------------------------------------------+ -| | -| RECENT [See All >] | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ ← → │ | -| │ │ | -| │ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │ | -| │ │ 👨 │ │ 👩 │ │ 👨 │ │ 👩 │ │ ➕ │ │ | -| │ │ John │ │ Maria │ │ Alex │ │ Sarah │ │ New │ │ | -| │ │ $50 │ │ $120 │ │ $35 │ │ $200 │ │ │ │ | -| │ │ 2d ago │ │ 1w ago │ │ 2w ago │ │ 3w ago │ │ │ │ | -| │ └────────┘ └────────┘ └────────┘ └────────┘ └────────┘ │ | -| │ With last amount │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -| | -| TO | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ 🔍 Name, phone, email, or account... │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| OR | -| | -| ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ | -| │ 📱 │ │ 📷 │ │ 🔗 │ | -| │ Contacts │ │ Scan QR │ │ Payment Link│ | -| └─────────────┘ └─────────────┘ └─────────────┘ | -| | -+-------------------------------------------------------------------+ -| | -| 💡 SUGGESTED | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ 🔄 You usually send John $50 on Fridays │ | -| │ ┌─────────────────────────────────────┐ │ | -| │ │▓▓▓▓ Quick Send: $50 to John ▓▓▓▓▓▓│ │ | -| │ └─────────────────────────────────────┘ │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ 📅 Maria requested $120 for dinner │ | -| │ 3 hours ago │ | -| │ ┌───────────────────┐ ┌───────────────────┐ │ | -| │ │ Decline │ │▓▓▓▓ Pay $120 ▓▓▓▓│ │ | -| │ └───────────────────┘ └───────────────────┘ │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -| [🏠 Home] [📊 Accounts] [💸 *FAB*] [👤 Profile] | -+-------------------------------------------------------------------+ -``` - ---- - -## Screen 2: Send Money - Recipient Selected - -``` -+-------------------------------------------------------------------+ -| 9:41 ●●●○○ 🔋 87% | -+-------------------------------------------------------------------+ -| | -| ← Pay John | -| | -+-------------------------------------------------------------------+ -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌──────────┐ │ | -| │ │ 👨 │ │ | -| │ │ John │ │ | -| │ │ Doe │ │ | -| │ └──────────┘ │ | -| │ @johndoe │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ $ 0 │ | -| │ ════ │ | -| │ Tap to enter │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| QUICK AMOUNTS | -| | -| ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ | -| │ $10 │ │ $25 │ │ $50 │ │ $100 │ | -| └──────────┘ └──────────┘ └──────────┘ └──────────┘ | -| | -| BASED ON HISTORY | -| | -| ┌──────────────────────┐ ┌──────────────────────┐ | -| │ $50 │ │ $35 │ | -| │ Your usual amount │ │ Last payment │ | -| └──────────────────────┘ └──────────────────────┘ | -| | -+-------------------------------------------------------------------+ -| | -| WHAT'S IT FOR? | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ Add a note... [😊 Emoji] │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| RECENT NOTES WITH JOHN | -| | -| ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ | -| │ 🍕 │ │ ☕ │ │ 🎬 │ │ 🚗 │ | -| │ Pizza │ │ Coffee │ │ Movie │ │ Uber │ | -| └─────────┘ └─────────┘ └─────────┘ └─────────┘ | -| | -+-------------------------------------------------------------------+ -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ Enter an amount │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| DISABLED STATE | -| | -+-------------------------------------------------------------------+ -``` - ---- - -## Screen 3: Send Money - Amount Entered - -``` -+-------------------------------------------------------------------+ -| 9:41 ●●●○○ 🔋 87% | -+-------------------------------------------------------------------+ -| | -| ← Pay John | -| | -+-------------------------------------------------------------------+ -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌──────────┐ │ | -| │ │ 👨 │ │ | -| │ │ John │ │ | -| │ │ Doe │ │ | -| │ └──────────┘ │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ $ 50.00 │ | -| │ ════════ │ | -| │ │ | -| │ Remaining: $8,150.00 │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ 🍕 Pizza night! [😊] [✕] │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌───┐ ┌───┐ ┌───┐ │ | -| │ │ 1 │ │ 2 │ │ 3 │ │ | -| │ │ │ │ABC│ │DEF│ │ | -| │ └───┘ └───┘ └───┘ │ | -| │ │ | -| │ ┌───┐ ┌───┐ ┌───┐ │ | -| │ │ 4 │ │ 5 │ │ 6 │ │ | -| │ │GHI│ │JKL│ │MNO│ │ | -| │ └───┘ └───┘ └───┘ │ | -| │ │ | -| │ ┌───┐ ┌───┐ ┌───┐ │ | -| │ │ 7 │ │ 8 │ │ 9 │ │ | -| │ │PRS│ │TUV│ │WXY│ │ | -| │ └───┘ └───┘ └───┘ │ | -| │ │ | -| │ ┌───┐ ┌───┐ ┌───┐ │ | -| │ │ . │ │ 0 │ │ ⌫ │ │ | -| │ └───┘ └───┘ └───┘ │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ | -| │▓▓ ▓▓│ | -| │▓▓ 💸 Pay $50.00 ▓▓│ | -| │▓▓ ▓▓│ | -| │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ | -| └───────────────────────────────────────────────────────────────┘ | -| SWIPE UP TO PAY | -| | -+-------------------------------------------------------------------+ -``` - ---- - -## Screen 4: Request Money Mode - -``` -+-------------------------------------------------------------------+ -| 9:41 ●●●○○ 🔋 87% | -+-------------------------------------------------------------------+ -| | -| ← [History] | -| | -+-------------------------------------------------------------------+ -| | -| +---------------------------------------------------------------+ | -| | [ 💸 Send ] [ 📥 Request ] [ 👥 Split ] | | -| | DEFAULT SELECTED DEFAULT | | -| +---------------------------------------------------------------+ | -| | -+===================================================================+ -| | -| REQUEST FROM | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ 🔍 Search people... │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| SELECTED (2) | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ 👨 John Doe ✕ │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ 👩 Maria Santos ✕ │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -| | -| AMOUNT TO REQUEST (Total) | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ $ 100.00 │ | -| │ ════════ │ | -| │ │ | -| │ Split: $50.00 each (2 people) │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| SPLIT OPTIONS | -| | -| ┌───────────────────┐ ┌───────────────────┐ | -| │ ○ Split Equally │ │ ● Custom Split │ | -| └───────────────────┘ └───────────────────┘ | -| | -| CUSTOM AMOUNTS | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ 👨 John Doe $ 60.00 │ | -| │ 👩 Maria Santos $ 40.00 │ | -| │ ──────────────── │ | -| │ Total: $ 100.00 │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ Dinner at Italian Place 🍝 [😊] [✕] │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ | -| │▓▓ ▓▓│ | -| │▓▓ 📥 Request $100.00 (2 people) ▓▓│ | -| │▓▓ ▓▓│ | -| │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -| [🏠 Home] [📊 Accounts] [💸 *FAB*] [👤 Profile] | -+-------------------------------------------------------------------+ -``` - ---- - -## Screen 5: Split Bill Mode - -``` -+-------------------------------------------------------------------+ -| 9:41 ●●●○○ 🔋 87% | -+-------------------------------------------------------------------+ -| | -| ← Split Bill | -| | -+-------------------------------------------------------------------+ -| | -| TOTAL BILL | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ $ 156.50 │ | -| │ ════════ │ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ 📷 Scan receipt to auto-fill │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -| | -| SPLITTING WITH (4 people) [+ Add Person] | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ 👤 You (Paying now) $39.13 │ │ | -| │ │ ██████████████████████░░░░░░░░ 25% │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ 👨 John Doe $39.13 │ │ | -| │ │ ██████████████████████░░░░░░░░ 25% │ │ | -| │ │ Request will be sent │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ 👩 Maria Santos $39.12 │ │ | -| │ │ ██████████████████████░░░░░░░░ 25% │ │ | -| │ │ Request will be sent │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| │ ┌────────────────────────────────────────────────────────┐ │ | -| │ │ 👨 Alex Kumar $39.12 │ │ | -| │ │ ██████████████████████░░░░░░░░ 25% │ │ | -| │ │ Request will be sent │ │ | -| │ └────────────────────────────────────────────────────────┘ │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ⚖️ Split Method │ | -| │ │ | -| │ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ | -| │ │ Equal │ │ Custom │ │ By Item │ │ % Based │ │ | -| │ │ ● │ │ ○ │ │ ○ │ │ ○ │ │ | -| │ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ 🍕 Dinner at Pizza Palace [😊] [✕] │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ | -| │▓▓ ▓▓│ | -| │▓▓ Pay $39.13 & Request from 3 people ▓▓│ | -| │▓▓ ▓▓│ | -| │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -``` - ---- - -## Screen 6: Schedule Recurring Payment - -``` -+-------------------------------------------------------------------+ -| 9:41 ●●●○○ 🔋 87% | -+-------------------------------------------------------------------+ -| | -| ← Schedule Payment | -| | -+-------------------------------------------------------------------+ -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ TO │ | -| │ ┌──────────┐ │ | -| │ │ 👨 │ John Doe │ | -| │ └──────────┘ @johndoe │ | -| │ │ | -| │ AMOUNT │ | -| │ $ 50.00 │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -| | -| SCHEDULE | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ Frequency │ | -| │ │ | -| │ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ | -| │ │ Once │ │ Weekly │ │ Monthly │ │ Custom │ │ | -| │ │ ○ │ │ ● │ │ ○ │ │ ○ │ │ | -| │ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ Day of Week │ | -| │ │ | -| │ ┌───┐ ┌───┐ ┌───┐ ┌───┐ ┌───┐ ┌───┐ ┌───┐ │ | -| │ │ S │ │ M │ │ T │ │ W │ │ T │ │ F │ │ S │ │ | -| │ │ │ │ │ │ │ │ │ │ │ │ ● │ │ │ │ | -| │ └───┘ └───┘ └───┘ └───┘ └───┘ └───┘ └───┘ │ | -| │ Friday selected │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ Start Date End Date │ | -| │ ┌─────────────────────┐ ┌─────────────────────┐ │ | -| │ │ 📅 Jan 3, 2025 │ │ 📅 No end date │ │ | -| │ └─────────────────────┘ └─────────────────────┘ │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ 📢 Notification Preferences │ | -| │ │ | -| │ ┌─────────────────────────────────────────────────────────┐ │ | -| │ │ [✓] Notify me before each payment │ │ | -| │ │ [✓] Notify me if payment fails │ │ | -| │ │ [ ] Send receipt to email │ │ | -| │ └─────────────────────────────────────────────────────────┘ │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ 🍕 Weekly pizza fund [😊] [✕] │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -| | -| SUMMARY | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ $50.00 every Friday starting Jan 3, 2025 │ | -| │ Next payment: Jan 3, 2025 │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ | -| │▓▓ ▓▓│ | -| │▓▓ 📅 Schedule Recurring Payment ▓▓│ | -| │▓▓ ▓▓│ | -| │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -``` - ---- - -## Screen 7: Payment Confirmation (Swipe to Pay) - -``` -+-------------------------------------------------------------------+ -| 9:41 ●●●○○ 🔋 87% | -+-------------------------------------------------------------------+ -| | -| ✕ | -| | -+-------------------------------------------------------------------+ -| | -| | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌──────────────┐ │ | -| │ │ │ │ | -| │ │ 👨 │ │ | -| │ │ John Doe │ │ | -| │ │ │ │ | -| │ └──────────────┘ │ | -| │ │ | -| │ $ 50.00 │ | -| │ │ | -| │ 🍕 Pizza night! │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ From Primary Savings │ | -| │ ****4521 │ | -| │ │ | -| │ To John Doe │ | -| │ @johndoe │ | -| │ │ | -| │ Date Dec 30, 2025 │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| | -| | -+-------------------------------------------------------------------+ -| | -| ╔═══════════════════════════════════════════════════════════════╗ | -| ║ ║ | -| ║ ┌─────────────────────────────────────┐ ║ | -| ║ │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ ║ | -| ║ │▓▓ →→→→ SWIPE TO PAY →→→→ ▓▓│ ║ | -| ║ │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ ║ | -| ║ └─────────────────────────────────────┘ ║ | -| ║ ║ | -| ║ Swipe right to confirm payment ║ | -| ║ ║ | -| ╚═══════════════════════════════════════════════════════════════╝ | -| SWIPE-TO-PAY INTERACTION ZONE | -| | -| 🔒 Secured with Face ID / Touch ID | -| | -+-------------------------------------------------------------------+ -``` - -**Swipe Animation:** -``` -START SWIPING COMPLETE -┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ -│ →→ SWIPE TO PAY │ --> │▓▓▓▓▓▓▓ 70% ▓▓▓▓│ --> │ ✓ PAID │ -└─────────────────┘ └─────────────────┘ └─────────────────┘ - Thumb icon Progress fill Checkmark morph - bounces right follows finger + haptic success -``` - ---- - -## Screen 8: Success State (Animated) - -``` -+-------------------------------------------------------------------+ -| 9:41 ●●●○○ 🔋 87% | -+-------------------------------------------------------------------+ -| | -| [Done] | -| | -+-------------------------------------------------------------------+ -| | -| 🎉 ✨ 🎊 ✨ 🎉 | -| [Confetti Animation] | -| | -| | -| ┌──────────────────┐ | -| │ │ | -| │ ✓ │ | -| │ │ | -| └──────────────────┘ | -| [Success Green Circle] | -| [Checkmark draws in] | -| | -| Payment Sent! | -| | -| | -| ╔═══════════════════════════════════════════════════════════════╗ | -| ║ ║ | -| ║ ┌──────────────┐ ║ | -| ║ │ 👨 │ ║ | -| ║ └──────────────┘ ║ | -| ║ ║ | -| ║ $ 50.00 → John Doe ║ | -| ║ ║ | -| ║ 🍕 Pizza night! ║ | -| ║ ║ | -| ╚═══════════════════════════════════════════════════════════════╝ | -| | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ Transaction ID TXN-2025123001234567 │ | -| │ Date & Time Dec 30, 2025 • 10:45 AM │ | -| │ From Primary Savings ****4521 │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| | -| ┌─────────────────────┐ ┌─────────────────────┐ | -| │ 📤 Share │ │ 📥 Receipt │ | -| └─────────────────────┘ └─────────────────────┘ | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ | -| │▓▓ ▓▓│ | -| │▓▓ Pay Again ▓▓│ | -| │▓▓ ▓▓│ | -| │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -``` - ---- - -## Screen 9: Payment History / Activity - -``` -+-------------------------------------------------------------------+ -| 9:41 ●●●○○ 🔋 87% | -+-------------------------------------------------------------------+ -| | -| ← Payment History [Filter 🔽] | -| | -+-------------------------------------------------------------------+ -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ 🔍 Search payments... │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ [All] [Sent] [Received] [Pending] [Scheduled] │ | -| │ ● ○ ○ ○ ○ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -| | -| TODAY | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌────┐ You paid John Doe -$50.00 │ | -| │ │ 👨 │ 🍕 Pizza night! │ | -| │ └────┘ 10:45 AM ✓ Complete │ | -| │ │ | -| │ ─────────────────────────────────────────────────────────── │ | -| │ │ | -| │ ┌────┐ Maria paid you +$120.00 │ | -| │ │ 👩 │ 🍝 Dinner split │ | -| │ └────┘ 9:30 AM ✓ Complete │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| YESTERDAY | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌────┐ You requested from Alex $35.00 │ | -| │ │ 👨 │ ☕ Coffee │ | -| │ └────┘ 3:15 PM ⏳ Pending │ | -| │ [Remind] [Cancel] │ | -| │ │ | -| │ ─────────────────────────────────────────────────────────── │ | -| │ │ | -| │ ┌────┐ You paid Sarah Lee -$200.00 │ | -| │ │ 👩 │ 🏠 Rent share │ | -| │ └────┘ 11:00 AM ✓ Complete │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| SCHEDULED | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌────┐ Weekly to John Doe $50.00 │ | -| │ │ 🔄 │ 🍕 Weekly pizza fund │ | -| │ └────┘ Every Friday 📅 Scheduled │ | -| │ Next: Jan 3, 2025 [Edit] [Cancel] │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -+-------------------------------------------------------------------+ -| [🏠 Home] [📊 Accounts] [💸 *FAB*] [👤 Profile] | -+-------------------------------------------------------------------+ -``` - ---- - -## Screen 10: QR Scan Screen - -``` -+-------------------------------------------------------------------+ -| 9:41 ●●●○○ 🔋 87% | -+-------------------------------------------------------------------+ -| | -| ← Scan to Pay [🔦] | -| | -+-------------------------------------------------------------------+ -| | -| Point your camera at a payment QR code | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ │ | -| │ │ | -| │ ┌─────────────────────────────────────────┐ │ | -| │ │ │ │ | -| │ │ │ │ | -| │ │ │ │ | -| │ │ [Camera Viewfinder] │ │ | -| │ │ │ │ | -| │ │ │ │ | -| │ │ │ │ | -| │ │ ┌───────────────────────────┐ │ │ | -| │ │ │ ╔═══╗ ╔═══╗ │ │ │ | -| │ │ │ ║ ║ ║ ║ │ │ │ | -| │ │ │ ╚═══╝ ╚═══╝ │ │ │ | -| │ │ │ │ │ │ | -| │ │ │ [Scanning Frame] │ │ │ | -| │ │ │ [Animated corners] │ │ │ | -| │ │ │ │ │ │ | -| │ │ │ ╔═══╗ ╔═══╗ │ │ │ | -| │ │ │ ║ ║ ║ ║ │ │ │ | -| │ │ │ ╚═══╝ ╚═══╝ │ │ │ | -| │ │ └───────────────────────────┘ │ │ | -| │ │ │ │ | -| │ │ │ │ | -| │ │ │ │ | -| │ └─────────────────────────────────────────┘ │ | -| │ │ | -| │ │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| ─────────────────────────────────────────────────────────────────| -| | -| ┌───────────────────┐ ┌───────────────────┐ ┌───────────────┐ | -| │ 📷 My QR │ │ 🖼 Gallery │ │ 💳 NFC │ | -| └───────────────────┘ └───────────────────┘ └───────────────┘ | -| | -+-------------------------------------------------------------------+ -``` - ---- - -## Screen 11: My QR Code (Receive) - -``` -+-------------------------------------------------------------------+ -| 9:41 ●●●○○ 🔋 87% | -+-------------------------------------------------------------------+ -| | -| ← My QR Code [Share 📤] | -| | -+-------------------------------------------------------------------+ -| | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ ┌──────────────┐ │ | -| │ │ 👤 │ │ | -| │ │ Your Name │ │ | -| │ └──────────────┘ │ | -| │ @username │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| ╔═══════════════════════════════════════════════════════════════╗ | -| ║ ║ | -| ║ ┌───────────────────────────────────────────────────┐ ║ | -| ║ │ │ ║ | -| ║ │ ▓▓▓▓▓▓▓▓░░░▓▓▓░░░▓▓▓░░░▓▓▓▓▓▓▓▓ │ ║ | -| ║ │ ▓░░░░░▓░░░▓░░░▓░░░▓░░░▓░░░░░░▓ │ ║ | -| ║ │ ▓░▓▓▓░▓░░░░░░░░░░░░░░░▓░▓▓▓░░▓ │ ║ | -| ║ │ ▓░▓▓▓░▓░▓▓▓▓▓▓▓▓▓▓▓░░░▓░▓▓▓░░▓ │ ║ | -| ║ │ ▓░▓▓▓░▓░░░░░░░░░░░░░░░▓░▓▓▓░░▓ │ ║ | -| ║ │ ▓░░░░░▓░▓▓░▓▓▓░▓▓░░░░░▓░░░░░░▓ │ ║ | -| ║ │ ▓▓▓▓▓▓▓▓░▓░▓░▓░▓░▓░▓░▓▓▓▓▓▓▓▓ │ ║ | -| ║ │ ░░░░░░░░▓▓▓░░░▓▓▓░▓▓░░░░░░░░░ │ ║ | -| ║ │ ▓▓▓░▓▓▓▓░░░▓▓▓░░░▓░░░▓▓▓░▓▓▓▓ │ ║ | -| ║ │ [QR CODE] │ ║ | -| ║ │ │ ║ | -| ║ │ ▓▓▓▓▓▓▓▓░░░▓░░░▓▓▓░░░▓▓▓▓▓▓▓▓ │ ║ | -| ║ │ ▓░░░░░▓░▓▓░░▓░░░░░░░░▓░░░░░░▓ │ ║ | -| ║ │ ▓░▓▓▓░▓░░░▓▓▓▓▓▓▓▓▓░░▓░▓▓▓░░▓ │ ║ | -| ║ │ ▓░▓▓▓░▓░▓░░░░░░░░░░░░▓░▓▓▓░░▓ │ ║ | -| ║ │ ▓░▓▓▓░▓░░▓▓░▓▓▓░▓▓░░░▓░▓▓▓░░▓ │ ║ | -| ║ │ ▓░░░░░▓░░░▓░░░▓░░░▓░░▓░░░░░░▓ │ ║ | -| ║ │ ▓▓▓▓▓▓▓▓░▓▓▓░▓▓▓░▓▓▓░▓▓▓▓▓▓▓▓ │ ║ | -| ║ │ │ ║ | -| ║ └───────────────────────────────────────────────────┘ ║ | -| ║ ║ | -| ╚═══════════════════════════════════════════════════════════════╝ | -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ Set amount to receive │ | -| │ │ | -| │ ┌─────────────────────────────────────────────────────────┐ │ | -| │ │ $ 0.00 │ │ | -| │ └─────────────────────────────────────────────────────────┘ │ | -| │ │ | -| │ Anyone who scans can pay you this amount │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| ┌───────────────────┐ ┌───────────────────┐ | -| │ 📋 Copy Link │ │ 💾 Save Image │ | -| └───────────────────┘ └───────────────────┘ | -| | -+-------------------------------------------------------------------+ -``` - ---- - -## Component Specifications - -### 1. Mode Selector Tabs - -``` -+-------------------------------------------------------------------+ -| MODE SELECTOR | -+-------------------------------------------------------------------+ -| | -| Layout: | -| ┌─────────────────────────────────────────────────────────────┐ | -| │ [ 💸 Send ] [ 📥 Request ] [ 👥 Split ] │ | -| └─────────────────────────────────────────────────────────────┘ | -| | -| Selected State: | -| • Background: Primary Gradient at 15% | -| • Border: 2dp Primary color | -| • Icon + Text: Primary color | -| | -| Default State: | -| • Background: Surface color | -| • Border: 1dp #E1E4E8 | -| • Icon + Text: Secondary text color | -| | -| Dimensions: | -| • Height: 48dp | -| • Min width: 100dp | -| • Border radius: 24dp (pill) | -| • Icon size: 20dp | -| • Gap between icon and text: 8dp | -| | -+-------------------------------------------------------------------+ -``` - -### 2. Recent Recipient Card - -``` -+-------------------------------------------------------------------+ -| RECENT RECIPIENT CARD | -+-------------------------------------------------------------------+ -| | -| ┌────────────┐ | -| │ │ | -| │ 👨 │ Avatar: 48dp | -| │ │ Background: Unique gradient per user | -| │ Name │ Initials: 20sp if no avatar | -| │ $50 │ | -| │ 2d ago │ Name: 12sp, Medium, max 8 chars | -| │ │ Amount: 11sp, Regular, Secondary | -| └────────────┘ Time: 10sp, Regular, Tertiary | -| | -| Container: | -| • Width: 72dp | -| • Height: 96dp | -| • Padding: 8dp | -| • Gap between cards: 12dp | -| • Touch target: Full card | -| | -| Tap behavior: | -| • Opens pay screen pre-filled with recipient | -| • Suggests last sent amount | -| | -+-------------------------------------------------------------------+ -``` - -### 3. Amount Input Display - -``` -+-------------------------------------------------------------------+ -| AMOUNT INPUT | -+-------------------------------------------------------------------+ -| | -| Layout: | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ │ | -| │ $ 50.00 │ | -| │ ════════ │ | -| │ │ | -| │ Remaining: $8,150.00 │ | -| │ │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| Amount: | -| • Font: 44sp, ExtraBold | -| • Color: Primary text (valid) / Error (exceeds balance) | -| • Underline: 2dp, Primary gradient | -| | -| Currency symbol: | -| • Font: 28sp, Regular | -| • Opacity: 60% | -| • Vertically aligned with baseline | -| | -| Remaining balance: | -| • Font: 14sp, Regular | -| • Color: Secondary text | -| • Updates in real-time with animation | -| | -+-------------------------------------------------------------------+ -``` - -### 4. Quick Amount Chip - -``` -+-------------------------------------------------------------------+ -| QUICK AMOUNT CHIP | -+-------------------------------------------------------------------+ -| | -| Regular Amount: | -| ┌──────────┐ | -| │ $50 │ Height: 40dp | -| └──────────┘ Padding: 16dp horizontal | -| Border: 1dp Primary color | -| Border radius: 20dp | -| Text: 16sp, Medium, Primary | -| | -| History-based Amount: | -| ┌──────────────────────┐ | -| │ $50 │ Height: 48dp | -| │ Your usual amount │ Two lines of text | -| └──────────────────────┘ Label: 12sp, Secondary | -| Background: Primary at 5% | -| | -| Selected State: | -| • Background: Primary gradient | -| • Text: White | -| • Scale: 1.02 | -| | -+-------------------------------------------------------------------+ -``` - -### 5. Note Input with Emoji - -``` -+-------------------------------------------------------------------+ -| NOTE INPUT | -+-------------------------------------------------------------------+ -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │ 🍕 Pizza night! [😊] [✕] │ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| Dimensions: | -| • Height: 48dp | -| • Padding: 16dp | -| • Border radius: 12dp | -| • Background: Surface variant | -| | -| Emoji Button: | -| • Opens emoji picker bottom sheet | -| • Selected emoji prepends to note | -| • Max 1 emoji at start of note | -| | -| Clear Button: | -| • Visible when note has content | -| • Clears note with fade animation | -| | -| Recent Notes Chips: | -| • Show last 4 notes with this recipient | -| • Tap to auto-fill | -| • Include emoji if previously used | -| | -+-------------------------------------------------------------------+ -``` - -### 6. Swipe to Pay Button - -``` -+-------------------------------------------------------------------+ -| SWIPE TO PAY | -+-------------------------------------------------------------------+ -| | -| ┌───────────────────────────────────────────────────────────────┐ | -| │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ | -| │▓▓ →→→→ SWIPE TO PAY →→→→ ▓▓│ | -| │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ | -| └───────────────────────────────────────────────────────────────┘ | -| | -| Dimensions: | -| • Height: 64dp | -| • Border radius: 32dp | -| • Padding: 8dp | -| | -| Thumb (draggable): | -| • Size: 48dp circle | -| • Background: White | -| • Icon: Arrow right, Primary color | -| • Bounces right continuously (hint animation) | -| | -| Track: | -| • Background: Primary gradient | -| • Progress fill follows thumb | -| • Shimmer effect on idle | -| | -| Behavior: | -| • Swipe threshold: 80% of width | -| • Haptic at threshold | -| • Snaps back if released before threshold | -| • Morphs to checkmark on complete | -| • Triggers biometric/passcode auth | -| | -+-------------------------------------------------------------------+ -``` - ---- - -## Animations & Micro-interactions - -### Payment Flow Animation Sequence - -``` -+-------------------------------------------------------------------+ -| PAYMENT ANIMATION TIMELINE | -+-------------------------------------------------------------------+ -| | -| T+0ms: User completes swipe | -| • Swipe button morphs to spinner | -| • Haptic: Medium impact | -| | -| T+100ms: Biometric prompt appears (if enabled) | -| • Face ID / Touch ID overlay | -| • Transfer details visible below | -| | -| T+500ms: Auth success | -| • Prompt dismisses | -| • Processing indicator appears | -| | -| T+800ms: API call in progress | -| • Spinner with gradient stroke | -| • "Processing payment..." text | -| | -| T+1500ms: Success response | -| • Screen transitions to success | -| • Checkmark draws in (300ms) | -| • Confetti burst (500ms) | -| • Haptic: Success notification | -| | -| T+2000ms: Details appear | -| • Transaction info fades in | -| • Action buttons slide up | -| | -+-------------------------------------------------------------------+ -``` - -### Recipient Selection Animation - -``` -+-------------------------------------------------------------------+ -| RECIPIENT SELECTION | -+-------------------------------------------------------------------+ -| | -| On Tap: | -| 1. Card scales to 0.95 (100ms) | -| 2. Ripple effect from touch point | -| 3. Card scales back to 1.0 with spring (150ms) | -| 4. Transition to payment screen: | -| - Shared element: Avatar moves to top center | -| - Name expands below avatar | -| - Amount field slides up from bottom | -| - Duration: 350ms, Decelerate easing | -| | -+-------------------------------------------------------------------+ -``` - ---- - -## Accessibility - -### Screen Reader Annotations - -``` -+-------------------------------------------------------------------+ -| ACCESSIBILITY LABELS | -+-------------------------------------------------------------------+ -| | -| Mode Selector: | -| contentDescription: "Send money mode selected. Double tap to | -| switch to Request or Split modes." | -| Role: Tab | -| | -| Recent Recipient: | -| contentDescription: "John Doe. Last payment $50, 2 days ago. | -| Double tap to send money to John." | -| | -| Amount Input: | -| contentDescription: "Amount to send. Current value $50. | -| Remaining balance $8,150." | -| liveRegion: polite (updates read aloud) | -| | -| Quick Amount: | -| contentDescription: "Add $50 to amount. Your usual payment | -| to John." | -| | -| Swipe to Pay: | -| contentDescription: "Swipe right to pay $50 to John Doe. | -| Or double tap for alternative confirmation." | -| | -| Success Screen: | -| announcement: "Payment successful. $50 sent to John Doe. | -| Transaction ID TXN-123456." | -| | -+-------------------------------------------------------------------+ -``` - ---- - -## Dark Mode - -``` -+-------------------------------------------------------------------+ -| DARK MODE COLORS | -+-------------------------------------------------------------------+ -| | -| Backgrounds: | -| • Screen: #0D1117 | -| • Card Surface: #161B22 | -| • Input fields: #21262D | -| | -| Text: | -| • Primary: #F0F6FC | -| • Secondary: #8B949E | -| • Placeholder: #6E7681 | -| | -| Preserved: | -| • Primary Gradient: #667EEA → #764BA2 | -| • Success: #00D09C | -| • Error: #FF4757 | -| | -| Adjusted: | -| • Card borders: 1dp #30363D (added) | -| • Card shadows: Removed | -| • Gradient opacity: 85% | -| | -+-------------------------------------------------------------------+ -``` - ---- - -## Implementation Notes - -### Key Composables Required - -1. **PaymentHubScreen** - Main container with mode tabs -2. **SendMoneyScreen** - Send flow with recipient + amount -3. **RequestMoneyScreen** - Request flow with multi-select -4. **SplitBillScreen** - Bill splitting with percentages -5. **SchedulePaymentScreen** - Recurring payment setup -6. **PaymentConfirmationSheet** - Swipe to pay bottom sheet -7. **PaymentSuccessScreen** - Animated success with confetti -8. **PaymentHistoryScreen** - Transaction list with filters -9. **QRScannerScreen** - Camera viewfinder -10. **MyQRCodeScreen** - Personal payment QR -11. **RecipientSearchSheet** - Search + recent recipients -12. **AmountInputKeypad** - Custom number pad -13. **ModeTabSelector** - Send/Request/Split tabs -14. **RecentRecipientCard** - Avatar with last amount -15. **QuickAmountChip** - Preset and history amounts -16. **NoteInputWithEmoji** - Note field with emoji picker -17. **SwipeToPayButton** - Draggable confirmation - -### Animation Specifications - -| Animation | Duration | Easing | Trigger | -|-----------|----------|--------|---------| -| Tab switch | 200ms | Standard | Tab tap | -| Recipient select | 350ms | Decelerate | Card tap | -| Amount digit | 100ms | Linear | Digit tap | -| Quick amount | 150ms | Spring | Chip tap | -| Swipe progress | Gesture | Physics | Drag | -| Swipe complete | 200ms | Spring | Threshold | -| Biometric appear | 200ms | Fade | Auth needed | -| Processing spin | Continuous | Linear | API call | -| Success check | 300ms | Spring | Payment done | -| Confetti burst | 500ms | Physics | Success | - ---- - -## Changelog - -| Date | Version | Change | -|------|---------|--------| -| 2025-12-30 | 1.0 | Initial mockup creation | -| 2025-12-30 | 2.0 | Enhanced with 2025 patterns: Mode tabs (Send/Request/Split), Smart suggestions, Recent recipients with history, Swipe to pay, Recurring payments, QR codes, Social notes with emoji | - ---- - -## Data Binding Reference - -> **For `/implement` command**: Maps UI components to API.md sections. -> **Source of Truth**: See `API.md` for complete endpoint details. - -### Screen → API.md Mapping - -| Screen | API.md Section | Key Fields | -|--------|----------------|------------| -| Self-Transfer Template | `1. Self-Transfer Template` | `fromAccountOptions[]`, `toAccountOptions[]` | -| Third-Party Template | `2. Third-Party Transfer Template` | Template with beneficiary support | -| Execute Self-Transfer | `3. Execute Self-Transfer` | POST with account IDs and amount | -| Execute TPT | `4. Execute Third-Party Transfer` | POST with `?type=tpt` | -| Beneficiary Selection | See `beneficiary/API.md` | `GET /beneficiaries/tpt` | - -### Client-Only Features - -| Feature | Storage | Notes | -|---------|---------|-------| -| Request Money | Not available | Not in Fineract API | -| Split Bill | Not available | Not in Fineract API | -| Recurring Transfers | DataStore | Client-side scheduling | -| Recent Recipients | DataStore | Local transfer history | - -### Actions → API.md Mapping - -| User Action | API.md Reference | Navigation | -|-------------|------------------|------------| -| Load Self Template | `1. Self-Transfer Template` | Show own accounts | -| Load TPT Template | `2. Third-Party Transfer Template` | Show with beneficiaries | -| Execute Self Transfer | `3. Execute Self-Transfer` | Confirmation → Success | -| Execute TPT | `4. Execute Third-Party Transfer` | Confirmation → Success | - -### Error Handling - -See `API.md → 8. Error Responses` for complete error codes. diff --git a/claude-product-cycle/design-spec-layer/features/transfer/SPEC.md b/claude-product-cycle/design-spec-layer/features/transfer/SPEC.md deleted file mode 100644 index d6e2e0a33..000000000 --- a/claude-product-cycle/design-spec-layer/features/transfer/SPEC.md +++ /dev/null @@ -1,534 +0,0 @@ -# Transfer - Feature Specification - -> **Purpose**: Fund transfer functionality between accounts (self and third-party) -> **User Value**: Seamless money transfers between own accounts and to beneficiaries -> **Last Updated**: 2025-12-29 -> **Status**: Production Design - ---- - -## 1. Overview - -### 1.1 Feature Summary -The Transfer feature enables users to move funds between their own accounts (self-transfer) or to third-party beneficiaries (TPT). It consists of three main flows: -1. **Make Transfer Screen**: Initial form to select accounts, enter amount, and remarks -2. **Transfer Process Screen**: Review and confirm transfer details before execution -3. **Third-Party Transfer Screen**: Dedicated flow for transfers to external beneficiaries - -### 1.2 User Stories -- As a user, I want to transfer money between my savings accounts -- As a user, I want to repay my loan from my savings account -- As a user, I want to send money to a saved beneficiary -- As a user, I want to review transfer details before confirming -- As a user, I want to add remarks to track my transfers -- As a user, I want to see a confirmation after successful transfer -- As a user, I want to authenticate before executing high-value transfers - -### 1.3 Design Principles -- **Security**: Authentication required before transfer execution -- **Clarity**: Clear display of from/to accounts with amounts -- **Validation**: Real-time validation of amount and remarks -- **Confirmation**: Mandatory review step before execution -- **Feedback**: Clear success/failure status with transfer ID - ---- - -## 2. Screen Layout - -### 2.1 Make Transfer Screen - -``` -+---------------------------------------------------------------+ -| <- Make Transfer | -+---------------------------------------------------------------+ -| | -| PAY TO | -| +-----------------------------------------------------------+| -| | SA-0001234567 John Doe v || -| +-----------------------------------------------------------+| -| | -| PAY FROM | -| +-----------------------------------------------------------+| -| | [Icon] Primary Savings || -| | SA-0009876543 v || -| | Available: $35,000.00 || -| +-----------------------------------------------------------+| -| | -| AMOUNT | -| +-----------------------------------------------------------+| -| | $ || -| | 500.00 || -| +-----------------------------------------------------------+| -| | [Error: Amount is required] || -| | -| REMARKS | -| +-----------------------------------------------------------+| -| | Payment for services || -| +-----------------------------------------------------------+| -| | [Error: Remarks cannot be empty] || -| | -| +-----------------------------------------------------------+| -| | MAKE TRANSFER || -| +-----------------------------------------------------------+| -| | -| [Powered by Mifos] | -+---------------------------------------------------------------+ -``` - -### 2.2 Transfer Process Screen (Review & Confirm) - -``` -+---------------------------------------------------------------+ -| <- Transfer | -+---------------------------------------------------------------+ -| | -| PAY FROM | -| +-----------------------------------------------------------+| -| | Account Number SA-0009876543 || -| | Customer Name John Doe || -| +-----------------------------------------------------------+| -| | -| PAY TO | -| +-----------------------------------------------------------+| -| | Account Number SA-0001234567 || -| | Beneficiary Name Jane Doe || -| +-----------------------------------------------------------+| -| | -| TRANSFER DETAILS | -| +-----------------------------------------------------------+| -| | Amount $500.00 || -| | Date 29 December 2025 || -| | Remark Payment for services || -| +-----------------------------------------------------------+| -| | -| +-----------------------------------------------------------+| -| | CANCEL || -| +-----------------------------------------------------------+| -| | -| +-----------------------------------------------------------+| -| | TRANSFER || -| +-----------------------------------------------------------+| -| | -| [Powered by Mifos] | -+---------------------------------------------------------------+ -``` - -### 2.3 Third-Party Transfer Screen - -``` -+---------------------------------------------------------------+ -| [Logo] Home [Bell] | -+---------------------------------------------------------------+ -| | -| ORIGIN ACCOUNT | -| +-----------------------------------------------------------+| -| | [Icon] Primary Savings || -| | SA-0009876543 v || -| | Available: $35,000.00 || -| +-----------------------------------------------------------+| -| | -| DESTINATION | -| +-----------------------------------------------------------+| -| | SA-0007654321 Jane Doe v || -| +-----------------------------------------------------------+| -| | -| Don't have a beneficiary? Add one here | -| | -| AMOUNT | -| +-----------------------------------------------------------+| -| | $ || -| | 1000.00 || -| +-----------------------------------------------------------+| -| | -| REMARKS | -| +-----------------------------------------------------------+| -| | Monthly support || -| +-----------------------------------------------------------+| -| | -| +-----------------------------------------------------------+| -| | TRANSFER || -| +-----------------------------------------------------------+| -| | -+---------------------------------------------------------------+ -``` - ---- - -## 3. Sections Table - -| Section | Description | Components | -|---------|-------------|------------| -| Top Bar | Navigation and title | Back button, Screen title | -| Pay To Dropdown | Destination account selection | Account number, Client name, Dropdown | -| Pay From Dropdown | Source account selection | Account icon, Account name, Number, Balance | -| Amount Field | Transfer amount input | Currency symbol, Numeric input, Error text | -| Remarks Field | Transfer description | Text input, Error text | -| Action Button | Submit transfer | Primary button | -| Powered Card | Branding footer | Mifos logo | - ---- - -## 4. User Interactions Table - -| Interaction | Action | Outcome | -|-------------|--------|---------| -| Select Pay To Account | OnToAccountSelected | Updates toAccount, filters fromAccountOptions | -| Select Pay From Account | OnFromAccountSelected | Updates fromAccount, filters toAccountOptions | -| Enter Amount | OnAmountChanged | Validates amount with 300ms debounce | -| Enter Remarks | OnRemarksChanged | Validates remarks with 300ms debounce | -| Tap Make Transfer | OnMakeTransferClicked | Validates all fields, navigates to review | -| Tap Cancel (Review) | OnNavigate | Returns to previous screen | -| Tap Transfer (Review) | RequestTransfer | Triggers authentication flow | -| Authentication Success | Internal.MakeTransfer | Executes transfer API call | -| Tap Retry | OnRetry | Refetches account options template | -| Tap Add Beneficiary | OnAddBeneficiaryClicked | Navigates to beneficiary creation | -| Tap Notification | OnNotificationClicked | Navigates to notifications | - ---- - -## 5. State Model - -### 5.1 MakeTransferState (from MakeTransferViewModel.kt) - -```kotlin -internal data class MakeTransferState( - val accountId: Long = -1L, - val clientId: Long = -1L, - val outstandingBalance: Double? = null, - val transferType: String? = null, - val transferTarget: TransferType? = null, - val transferSuccessDestination: String = "", - val amount: String = "", - val amountError: StringResource? = null, - val remark: String = "", - val remarkError: StringResource? = null, - var accountOptionsTemplate: AccountOptionsTemplate = AccountOptionsTemplate(), - var fromAccountOptions: List = emptyList(), - var toAccountOptions: List = emptyList(), - val fromAccount: AccountOption? = null, - val toAccount: AccountOption? = null, - val dialogState: DialogState? = null, - val networkStatus: Boolean = false, - val uiState: MakeTransferScreenState? = null, -) { - sealed interface DialogState { - data class Error(val message: String) : DialogState - } - - sealed interface MakeTransferScreenState { - data object Loading : MakeTransferScreenState - data class Error(val message: StringResource) : MakeTransferScreenState - data object Success : MakeTransferScreenState - data object Network : MakeTransferScreenState - data object OverlayLoading : MakeTransferScreenState - } - - val isEnabled = networkStatus && - fromAccount != null && - toAccount != null && - amount.isNotBlank() && - remark.isNotBlank() && - amountError == null && - remarkError == null -} -``` - -### 5.2 MakeTransferAction - -```kotlin -internal sealed interface MakeTransferAction { - data class OnToAccountSelected(val accountNo: String) : MakeTransferAction - data class OnFromAccountSelected(val accountNo: String) : MakeTransferAction - data class OnAmountChanged(val amount: String) : MakeTransferAction - data class OnRemarksChanged(val remark: String) : MakeTransferAction - data object OnMakeTransferClicked : MakeTransferAction - data object DismissDialog : MakeTransferAction - data object NavigateBack : MakeTransferAction - data object OnRetry : MakeTransferAction - - sealed interface Internal : MakeTransferAction { - data object PerformTransfer : Internal - data class ReceiveAccountOptionsTemplateResult(val dataState: DataState) : Internal - data class ReceiveActiveAccountsResult(val dataState: DataState) : Internal - data class ReceiveNetworkStatus(val isOnline: Boolean) : Internal - } -} -``` - -### 5.3 MakeTransferEvent - -```kotlin -internal sealed interface MakeTransferEvent { - data object NavigateBack : MakeTransferEvent - data class NavigateToTransferScreen( - val reviewTransferPayload: ReviewTransferPayload, - val transferType: TransferType, - val destination: String, - ) : MakeTransferEvent -} -``` - -### 5.4 TransferProcessState (from TransferProcessViewModel.kt) - -```kotlin -data class TransferProcessState( - val transferDestination: String? = null, - val transferType: TransferType? = null, - val transferPayload: TransferPayload? = null, - val networkStatus: Boolean = false, - val uiState: ScreenUiState? = ScreenUiState.Success, - val showOverlay: Boolean = false, - val fromClientName: String? = null, - val toClientName: String? = null, -) -``` - -### 5.5 TransferProcessAction - -```kotlin -sealed interface TransferProcessAction { - data object RequestTransfer : TransferProcessAction - data object OnNavigate : TransferProcessAction - data class ReceiveNetworkStatus(val isOnline: Boolean) : TransferProcessAction - - sealed interface Internal : TransferProcessAction { - data class ReceiveAuthenticationResult(val result: Boolean) : Internal - data object MakeTransfer : Internal - } -} -``` - -### 5.6 TransferProcessEvent - -```kotlin -sealed interface TransferProcessEvent { - data object Navigate : TransferProcessEvent - data class NavigateToAuthenticate(val status: String = EventType.SUCCESS.name) : TransferProcessEvent - data class NavigateToStatus( - val eventType: String, - val eventDestination: String, - val title: String, - val subtitle: String, - val buttonText: String, - ) : TransferProcessEvent -} -``` - -### 5.7 TptState (Third-Party Transfer from TptViewModel.kt) - -```kotlin -internal data class TptState( - val accountId: Long = -1L, - val clientId: Long = -1L, - val outstandingBalance: Double? = null, - val amount: String = "", - val amountError: StringResource? = null, - val remark: String = "", - val remarkError: StringResource? = null, - var accountOptionsTemplate: AccountOptionsTemplate = AccountOptionsTemplate(), - var fromAccountOptions: List = emptyList(), - var toAccountOptions: List = emptyList(), - val fromAccount: AccountOption? = null, - val toAccount: AccountOption? = null, - val dialogState: DialogState? = null, - val networkStatus: Boolean = false, - val uiState: ScreenUiState? = ScreenUiState.Loading, -) { - sealed interface DialogState { - data class Error(val message: StringResource) : DialogState - } - - val isEnabled: Boolean = fromAccount != null && - toAccount != null && - amount.isNotBlank() && - remark.isNotBlank() && - amountError == null && - remarkError == null -} -``` - ---- - -## 6. API Requirements - -| Endpoint | Method | Purpose | Priority | -|----------|--------|---------|----------| -| /self/accounttransfers/template | GET | Self-transfer account options | P0 | -| /self/accounttransfers/template?type=tpt | GET | Third-party transfer template | P0 | -| /self/accounttransfers | POST | Execute self-transfer | P0 | -| /self/accounttransfers?type=tpt | POST | Execute third-party transfer | P0 | -| /self/clients/{id}/accounts | GET | Fetch active accounts (fallback) | P1 | - ---- - -## 7. Validation Rules - -### 7.1 Amount Validation -```kotlin -private fun validateAmount(amount: String) = when { - amount.isBlank() -> ValidationResult.Error(Res.string.feature_make_transfer_error_amount_required) - !Regex("^\\d+(\\.\\d+)?$").matches(amount) -> - ValidationResult.Error(Res.string.feature_make_transfer_error_amount_invalid) - else -> ValidationResult.Success -} -``` - -### 7.2 Remarks Validation -```kotlin -private fun validateRemark(remark: String): ValidationResult = when { - remark.isEmpty() -> ValidationResult.Error(Res.string.feature_make_transfer_error_remarks_empty) - !ValidationHelper.isValidName(remark) -> - ValidationResult.Error(Res.string.feature_make_transfer_error_remarks_invalid) - else -> ValidationResult.Success -} -``` - -### 7.3 Validation Debouncing -- 300ms delay between keystrokes before validation triggers -- Prevents excessive UI updates during rapid typing - ---- - -## 8. Edge Cases & Error Handling - -| Scenario | UI Behavior | Recovery | -|----------|-------------|----------| -| No network | Show network error state | Auto-retry on reconnect | -| API timeout | Show error state | Pull-to-refresh / Retry button | -| Invalid amount format | Show inline error | Clear error on valid input | -| Empty remarks | Show inline error | Clear error on valid input | -| Same from/to account | Filter out from options | Auto-filtering prevents selection | -| Insufficient balance | API returns error | Show error dialog | -| Transfer failed | Navigate to status screen | Show failure with retry option | -| Authentication failed | Stay on review screen | User can retry authentication | -| Account ID not found | Fetch active accounts | Auto-fallback to active loan | - ---- - -## 9. Transfer Types - -| Type | Enum Value | Description | Endpoint | -|------|------------|-------------|----------| -| Self Transfer | SELF | Between own accounts | /accounttransfers | -| Third Party | TPT | To beneficiary accounts | /accounttransfers?type=tpt | - ---- - -## 10. Navigation Flow - -``` - +------------------+ - | Entry Point | - | (Dashboard/Home) | - +--------+---------+ - | - +----------------+----------------+ - | | - v v -+-------------------+ +--------------------+ -| Make Transfer | | Third-Party | -| Screen | | Transfer Screen | -+--------+----------+ +---------+----------+ - | | - v v -+-------------------+ +--------------------+ -| Transfer Process |<-------------| Transfer Process | -| (Review) Screen | | (Review) Screen | -+--------+----------+ +--------------------+ - | - v -+-------------------+ -| Authentication | -| Screen | -+--------+----------+ - | - +----+----+ - | | - v v -+-------+ +-------+ -|Success| |Failure| -|Status | |Status | -+-------+ +-------+ -``` - ---- - -## 11. Route Parameters - -### 11.1 MakeTransferRoute -```kotlin -@Serializable -data class MakeTransferRoute( - val accountId: Long = -1L, - val accountNo: String? = null, - val amount: String? = null, - val outstandingBalance: String? = null, - val transferType: String? = null, - val transferTarget: String? = null, - val transferSuccessDestination: String? = null, -) -``` - -### 11.2 TransferProcessRoute -```kotlin -@Serializable -data class TransferProcessRoute( - val fromOfficeId: Int? = null, - val fromClientId: Long? = null, - val fromAccountType: Int? = null, - val fromAccountId: String? = null, - val fromClientName: String? = null, - val toOfficeId: Int? = null, - val toClientId: Long? = null, - val toAccountType: Int? = null, - val toAccountId: String? = null, - val toClientName: String? = null, - val transferAmount: String? = null, - val transferDescription: String? = null, - val transferType: String = TransferType.SELF.name, - val transferSuccessDestination: String = "", -) -``` - ---- - -## 12. Success/Failure Destinations - -| Destination | Description | Navigation After | -|-------------|-------------|------------------| -| HOME | Dashboard home | Pop to home | -| SAVINGS_ACCOUNT | Savings detail | Pop to savings screen | -| LOAN_ACCOUNT | Loan detail | Pop to loan screen | -| PREVIOUS_SCREEN | Back navigation | Pop back stack | - ---- - -## 13. Accessibility - -| Feature | Implementation | -|---------|----------------| -| Screen Reader | contentDescription on all form elements | -| Focus Order | Logical tab order: To -> From -> Amount -> Remarks -> Button | -| Error Announcements | Live regions for validation errors | -| Touch Targets | 48dp minimum for all interactive elements | -| Font Scaling | Supports 200% scaling | - ---- - -## 14. Security Considerations - -| Feature | Implementation | -|---------|----------------| -| Authentication | Passcode required before transfer execution | -| Amount Masking | Optional masking in review screen | -| Session Timeout | Auto-logout after inactivity | -| Network Security | HTTPS only, certificate pinning | -| Input Validation | Server-side validation for all fields | - ---- - -## Changelog - -| Date | Change | -|------|--------| -| 2025-12-29 | Initial specification based on implementation code | diff --git a/claude-product-cycle/design-spec-layer/features/transfer/STATUS.md b/claude-product-cycle/design-spec-layer/features/transfer/STATUS.md deleted file mode 100644 index 9e19ce4a9..000000000 --- a/claude-product-cycle/design-spec-layer/features/transfer/STATUS.md +++ /dev/null @@ -1,72 +0,0 @@ -# Transfer Feature - Implementation Status - -> **Last Updated**: 2025-12-29 -> **Overall Status**: ✅ Done - ---- - -## Implementation Checklist - -- [x] SPEC.md created -- [x] API.md created -- [x] Network: Services exist (ThirdPartyTransferService) -- [x] Data: Repositories exist (TransferRepository, ThirdPartyTransferRepository) -- [x] Feature: ViewModels + Screens (MakeTransferViewModel, MakeTransferScreen, TransferProcessViewModel, TransferProcessScreen) -- [x] Navigation: Routes registered -- [x] DI: Modules registered -- [x] STATUS.md updated - ---- - -## Layer Status - -| Layer | Status | Files | -|-------|--------|-------| -| Network | ✅ | ThirdPartyTransferService.kt | -| Data | ✅ | TransferRepository.kt, TransferRepositoryImp.kt, ThirdPartyTransferRepository.kt, ThirdPartyTransferRepositoryImp.kt | -| Feature | ✅ | MakeTransferViewModel.kt, MakeTransferScreen.kt, TransferProcessViewModel.kt, TransferProcessScreen.kt | -| DI | ✅ | TransferProcessModule.kt, ThirdPartyTransferModule.kt | -| Navigation | ✅ | MakeTransferNavigation.kt, TransferProcessNavGraph.kt, ThirdPartyTransferRoute.kt | - ---- - -## Files - -### Network Layer -- `core/network/services/ThirdPartyTransferService.kt` - -### Data Layer -- `core/data/repository/TransferRepository.kt` -- `core/data/repositoryImpl/TransferRepositoryImp.kt` -- `core/data/repository/ThirdPartyTransferRepository.kt` -- `core/data/repositoryImpl/ThirdPartyTransferRepositoryImp.kt` - -### Feature Layer - Transfer Process -- `feature/transfer-process/src/commonMain/kotlin/org/mifos/mobile/feature/transfer/process/makeTransfer/MakeTransferViewModel.kt` -- `feature/transfer-process/src/commonMain/kotlin/org/mifos/mobile/feature/transfer/process/makeTransfer/MakeTransferScreen.kt` -- `feature/transfer-process/src/commonMain/kotlin/org/mifos/mobile/feature/transfer/process/transferProcess/TransferProcessViewModel.kt` -- `feature/transfer-process/src/commonMain/kotlin/org/mifos/mobile/feature/transfer/process/transferProcess/TransferProcessScreen.kt` -- `feature/transfer-process/src/commonMain/kotlin/org/mifos/mobile/feature/transfer/process/di/TransferProcessModule.kt` -- `feature/transfer-process/src/commonMain/kotlin/org/mifos/mobile/feature/transfer/process/makeTransfer/MakeTransferNavigation.kt` -- `feature/transfer-process/src/commonMain/kotlin/org/mifos/mobile/feature/transfer/process/transferProcess/TransferProcessNavGraph.kt` - -### Feature Layer - Third Party Transfer -- `feature/third-party-transfer/src/commonMain/kotlin/org/mifos/mobile/feature/third/party/transfer/thirdPartyTransfer/TptViewModel.kt` -- `feature/third-party-transfer/src/commonMain/kotlin/org/mifos/mobile/feature/third/party/transfer/thirdPartyTransfer/TptScreen.kt` -- `feature/third-party-transfer/src/commonMain/kotlin/org/mifos/mobile/feature/third/party/transfer/di/ThirdPartyTransferModule.kt` -- `feature/third-party-transfer/src/commonMain/kotlin/org/mifos/mobile/feature/third/party/transfer/navigation/ThirdPartyTransferRoute.kt` -- `feature/third-party-transfer/src/commonMain/kotlin/org/mifos/mobile/feature/third/party/transfer/thirdPartyTransfer/TptScreenRoute.kt` - ---- - -## Gaps - -None identified. - ---- - -## Changelog - -| Date | Change | -|------|--------| -| 2025-12-29 | Initial status documentation | diff --git a/claude-product-cycle/design-spec-layer/features/transfer/mockups/PROMPTS_FIGMA.md b/claude-product-cycle/design-spec-layer/features/transfer/mockups/PROMPTS_FIGMA.md deleted file mode 100644 index 794a7dcb7..000000000 --- a/claude-product-cycle/design-spec-layer/features/transfer/mockups/PROMPTS_FIGMA.md +++ /dev/null @@ -1,331 +0,0 @@ -# Transfer/Pay - Figma First Draft Prompts - -> **Tool**: Figma First Draft (Shift+I in Figma) -> **Style**: Modern P2P Payments, Material Design 3 -> **Format**: Natural language prompts optimized for Figma AI - ---- - -## How to Use - -1. Open Figma -> Create new design file -2. Press `Shift + I` or click "Actions" -> "First Draft" -3. Copy each prompt below -4. Generate -> Iterate -> Refine - ---- - -## Screen 1: Payment Hub (Main Entry) - -``` -Design a modern mobile payment hub for a fintech app inspired by Venmo and Cash App. - -At the top, show a back arrow on the left and "History" text button on the right. - -Create a mode selector with three pill-shaped tabs in a row: "Send" with money icon (selected with gradient), "Request" with request icon, and "Split" with group icon. The selected tab should have a purple gradient background. - -Add a From Account card with full-width purple gradient background. Show "From" label with "Change" dropdown arrow, bank icon with "Primary Savings" account name, masked account number "****4521", and "Available: $8,200.00" with an eye toggle to show/hide balance. - -Create a Recent recipients section with "RECENT" header and "See All >" link. Show horizontally scrolling circular avatars (72px) with user initials, names below, last amount sent, and time ago. Include an "Add new" button with plus icon at the end. - -Add a "TO" section with a search input placeholder "Name, phone, email, or account..." and three method cards below labeled "OR": Contacts with phone icon, Scan QR with camera icon, and Payment Link with link icon. - -Create a Suggested section with lightbulb icon showing AI suggestions: "You usually send John $50 on Fridays" with a gradient "Quick Send: $50 to John" button. - -Add a pending request card showing "Maria requested $120 for dinner" with time "3 hours ago" and two buttons: "Decline" outline and "Pay $120" gradient. - -Style it like Venmo's payment screen with conversation-first design and smart suggestions. -``` - ---- - -## Screen 2: Send Money - Recipient Selected - -``` -Design a send money screen after selecting a recipient. - -Show a back arrow with "Pay John" as the title. - -Create a centered recipient card with a large circular avatar (80px), name "John Doe" in medium weight, and username "@johndoe" below. - -Add a large amount input display with "$0" placeholder in extra bold text (44sp) with an underline. Show "Tap to enter" as helper text below. - -Create a Quick Amounts section with label and four amount chips: $10, $25, $50, $100. - -Add a History-Based Amounts section with two chips showing amounts based on previous transfers: "$50 - Your usual amount" and "$35 - Last payment". - -Create a "WHAT'S IT FOR?" section with a note input field showing placeholder "Add a note..." with an emoji button on the right. Below it, show Recent Notes with this contact as emoji chips: Pizza, Coffee, Movie, Uber. - -Display a full-width button at the bottom in disabled/gray state: "Enter an amount". - -Style it for quick, intuitive money sending with smart suggestions. -``` - ---- - -## Screen 3: Send Money - Amount Entered - -``` -Design the send money screen with an amount entered ready for payment. - -Show a back arrow with "Pay John" as the title. - -Create a centered recipient card with avatar and name "John Doe". - -Display a large amount "$50.00" in extra bold text with a gradient underline. Show "Remaining: $8,150.00" as helper text below. - -Add a filled note input showing a pizza emoji with "Pizza night!" text and a clear X button. - -Create a custom number keypad in a 3x4 grid layout: 1-9 in the first three rows, then decimal point, 0, and backspace. Each key should be 64dp height with subtle background on press. - -Add a full-width gradient button at the bottom: "Pay $50.00" with a money/send icon. Below it, add a hint: "SWIPE UP TO PAY" with arrows indicating the gesture. - -Make it feel ready for a quick payment with clear visual hierarchy. -``` - ---- - -## Screen 4: Request Money Mode - -``` -Design a request money screen for requesting payment from others. - -Show a back arrow on the left and "History" button on the right. - -Create a mode selector with Send, Request (selected with gradient), and Split tabs. - -Add a "REQUEST FROM" section with a search input "Search people..." and below it show "SELECTED (2)" with selected contacts as removable chips: "John Doe" with X and "Maria Santos" with X. - -Create an amount section with label "AMOUNT TO REQUEST (Total)" and large editable "$100.00" centered. Show helper text "Split: $50.00 each (2 people)". - -Add Split Options with two radio buttons: "Split Equally" and "Custom Split" (selected). - -Show Custom Amounts section with each person's name and their custom amount: John Doe $60.00 and Maria Santos $40.00 (both editable). Include a divider and total summary "Total: $100.00". - -Add a note input with pasta emoji "Dinner at Italian Place". - -Include a full-width gradient button: "Request $100.00 (2 people)". - -Style it for easy group requests with flexible splitting options. -``` - ---- - -## Screen 5: Split Bill Mode - -``` -Design a bill splitting screen for dividing costs among multiple people. - -Show a back arrow with "Split Bill" as the title. - -Create a Total Bill section with label and large editable amount "$156.50" centered. Add a button for "Scan receipt to auto-fill" with camera icon. - -Add a "SPLITTING WITH (4 people)" section with "+ Add Person" button. Show person cards with progress bars: -- "You (Paying now)": $39.13, 25% progress bar filled -- "John Doe": $39.13, 25%, note "Request will be sent" -- "Maria Santos": $39.12, 25% -- "Alex Kumar": $39.12, 25% - -Create a Split Method selector with balance scale icon and four radio options: Equal (selected), Custom, By Item, % Based. - -Add a note input with pizza emoji "Dinner at Pizza Palace". - -Include a full-width gradient button: "Pay $39.13 & Request from 3 people". - -Make it easy to split bills fairly with multiple calculation methods. -``` - ---- - -## Screen 6: Schedule Recurring Payment - -``` -Design a recurring payment scheduling screen. - -Show a back arrow with "Schedule Payment" as the title. - -Create a recipient and amount summary card showing "TO" section with avatar "John Doe" and "@johndoe", and "AMOUNT" section with "$50.00" in large text. - -Add a Schedule section with "Frequency" label and four radio chips: Once, Weekly (selected), Monthly, Custom. - -Create a Day of Week selector with seven circular chips for each day (S M T W T F S). Friday should be selected with gradient fill. - -Add date pickers in a row: Start Date showing "Jan 3, 2025" and End Date showing "No end date" with calendar icons. - -Create a Notification Preferences section with checkboxes: "Notify me before each payment" (checked), "Notify me if payment fails" (checked), and "Send receipt to email" (unchecked). - -Add a note input with pizza emoji "Weekly pizza fund". - -Show a summary card: "$50.00 every Friday starting Jan 3, 2025" with "Next payment: Jan 3, 2025". - -Include a full-width gradient button: "Schedule Recurring Payment" with calendar icon. -``` - ---- - -## Screen 7: Payment Confirmation (Swipe to Pay) - -``` -Design a payment confirmation screen with swipe-to-pay interaction. - -Show a close X button in the top left only. - -Create a centered payment summary showing a large avatar of "John Doe", the amount "$50.00" prominently, and the note "Pizza night!" with pizza emoji below. - -Add a transaction details section showing: From "Primary Savings ****4521", To "John Doe @johndoe", and Date "Dec 30, 2025". - -Create a Swipe to Pay zone at the bottom with a gradient track, a draggable white thumb circle with arrow icon, and text "SWIPE TO PAY" with animated arrows. Add instruction text "Swipe right to confirm payment". - -Show a security indicator with lock icon: "Secured with Face ID / Touch ID". - -Style it as the final confirmation step with a satisfying swipe interaction. -``` - ---- - -## Screen 8: Success State (Animated) - -``` -Design a payment success screen with celebratory animations. - -Show a "Done" text button in the top right only. - -Add confetti particle animation across the top of the screen in multiple colors. - -Create a large success indicator in the center: a green circular background with a checkmark icon that animates drawing in. - -Display "Payment Sent!" as a large bold headline. - -Add a transaction summary card showing the avatar thumbnail, "$50.00 -> John Doe", and the pizza emoji note "Pizza night!". - -Show transaction details: Transaction ID, Date & Time, and From account. - -Create two action buttons in a row: "Share" with share icon and "Receipt" with download icon. - -Add a full-width gradient button: "Pay Again". - -Make it feel celebratory and rewarding with clear next steps. -``` - ---- - -## Screen 9: Payment History / Activity - -``` -Design a payment history screen showing all transaction activity. - -Show a back arrow with "Payment History" title and a filter dropdown on the right. - -Add a search input with placeholder "Search payments...". - -Create filter tabs in a row: All (selected), Sent, Received, Pending, Scheduled. - -Add a TODAY section with transaction cards showing: -- Avatar, "You paid John Doe", "-$50.00" in red, pizza emoji, time "10:45 AM", green "Complete" badge -- Avatar, "Maria paid you", "+$120.00" in green, pasta emoji, time "9:30 AM", green "Complete" badge - -Add a YESTERDAY section with: -- Avatar, "You requested from Alex", "$35.00", coffee emoji, time, amber "Pending" badge with "Remind" and "Cancel" buttons -- Avatar, "You paid Sarah Lee", "-$200.00", house emoji, "Complete" badge - -Add a SCHEDULED section with: -- Recurring icon, "Weekly to John Doe", "$50.00", pizza emoji, "Every Friday", blue "Scheduled" badge -- "Next: Jan 3, 2025" with Edit and Cancel buttons - -Style it like a chat-style activity feed with clear status indicators. -``` - ---- - -## Screen 10: QR Scan Screen - -``` -Design a QR code scanning screen for payments. - -Show a back arrow with "Scan to Pay" as the title and a flashlight toggle icon on the right. - -Add instruction text at the top: "Point your camera at a payment QR code". - -Create a full-screen camera viewfinder area with a scanning frame overlay. Add animated corner brackets in gradient color that pulse to indicate scanning is active. - -At the bottom, add three action buttons in a row: "My QR" with camera icon to show your own code, "Gallery" with image icon to select from photos, and "NFC" with contactless icon for tap-to-pay. - -Make it feel focused on the scanning task with clear visual feedback. -``` - ---- - -## Screen 11: My QR Code (Receive) - -``` -Design a personal QR code screen for receiving payments. - -Show a back arrow with "My QR Code" as the title and a share icon on the right. - -Create a profile section at the top with centered avatar, name "Your Name", and username "@username". - -Display a large QR code in a white card with rounded corners. The QR code should encode the user's payment information. - -Add an optional amount input section: "Set amount to receive" label with an editable "$0.00" input. Show helper text: "Anyone who scans can pay you this amount". - -Include two action buttons at the bottom: "Copy Link" with clipboard icon and "Save Image" with download icon. - -Make it easy to share and customize for receiving payments. -``` - ---- - -## Component Prompts - -### Swipe to Pay Button -``` -Design an interactive swipe-to-pay confirmation button. - -Create a track about 64dp tall with a gradient purple background and 32dp border radius. - -Add a draggable thumb circle (48dp) in white with an arrow-right icon inside. It should start on the left side. - -Show "SWIPE TO PAY" text in the center with animated arrow indicators. - -When the user swipes right past 80% of the width, the button should morph the thumb into a checkmark and trigger success. - -Add a subtle shimmer animation across the track when idle. Include haptic feedback at the threshold and on complete. -``` - -### Recent Recipient Avatar Card -``` -Design a recent recipient card for horizontal scrolling. - -Create a 72dp wide by 96dp tall card with 8dp padding. - -At the top, show a 48dp circular avatar with a gradient background based on user identity and initials inside if no photo. - -Below the avatar, show the contact name (max 8 characters) in 12sp medium weight. - -Show the last sent amount in 11sp regular secondary color. - -Show the time ago in 10sp regular tertiary color. - -On tap, it should open the payment screen pre-filled with this recipient and suggest the last sent amount. -``` - ---- - -## Tips for Figma First Draft - -1. **Iterate**: Generate once, then refine with follow-up prompts -2. **Colors**: Use "#667EEA to #764BA2" for primary gradient -3. **Reference**: Say "like Venmo" or "Cash App style" for P2P context -4. **Interactions**: Emphasize swipe gestures and smart suggestions -5. **Social**: Include notes, emojis, and payment reactions -6. **Responsive**: Mention "393px width for mobile" for correct sizing - ---- - -## After Generation - -1. Review generated designs for consistency -2. Create a color style library -3. Build component variants for states -4. Add prototype connections for swipe interactions -5. Export and update `FIGMA_LINKS.md` diff --git a/claude-product-cycle/design-spec-layer/features/transfer/mockups/PROMPTS_STITCH.md b/claude-product-cycle/design-spec-layer/features/transfer/mockups/PROMPTS_STITCH.md deleted file mode 100644 index 1d1e913aa..000000000 --- a/claude-product-cycle/design-spec-layer/features/transfer/mockups/PROMPTS_STITCH.md +++ /dev/null @@ -1,482 +0,0 @@ -# Transfer/Pay - Google Stitch Prompts - -> **Tool**: [Google Stitch](https://stitch.withgoogle.com) -> **Style**: Material Design 3, Modern P2P Payments Fintech -> **Format**: Copy each prompt block directly into Stitch - ---- - -## Design System Reference - -``` -Primary Gradient: #667EEA -> #764BA2 -Secondary Gradient: #11998E -> #38EF7D -Success/Credit: #00D09C -Error/Debit: #FF4757 -Warning: #FFB800 -Text Primary: #1F2937 -Text Secondary: #6B7280 -Surface: #FFFFFF -Screen Size: 393 x 852 pixels (Android) -``` - ---- - -## Screen 1: Payment Hub (Main Entry) - -``` -Mobile payment hub, Material Design 3, P2P fintech, 393x852px - -Top Bar: -- Back arrow, no title -- "History" text button right - -Mode Selector: -- Three pill tabs: Send (selected gradient), Request, Split -- Icons: money send, money request, people split - -From Account Card: -- Primary gradient full width -- "From" label, "Change" dropdown -- Bank icon, account name "Primary Savings" -- Account masked "****4521" -- "Available: $8,200.00" with eye toggle - -Recent Recipients Section: -- "RECENT" header, "See All >" link -- Horizontal scroll avatars 72dp -- Each: avatar, name, last amount, time ago -- Add new "+" at end - -To Section: -- "TO" label -- Search input: "Name, phone, email, or account..." -- "OR" divider -- Three action cards: Contacts (phone), Scan QR (camera), Payment Link (link) - -Suggested Section: -- Lightbulb icon "SUGGESTED" -- Smart suggestion card: "You usually send John $50 on Fridays" -- Gradient "Quick Send: $50 to John" button - -Pending Request Card: -- "Maria requested $120 for dinner" -- "3 hours ago" -- Two buttons: "Decline" outline, "Pay $120" gradient - -Bottom Navigation: -- Home, Accounts, FAB (gradient), Profile -``` - ---- - -## Screen 2: Send Money - Recipient Selected - -``` -Mobile send money recipient selected, Material Design 3, 393x852px - -Top Bar: -- Back arrow, "Pay John" title - -Recipient Card: -- Centered avatar 80dp -- Name "John Doe" -- Username "@johndoe" - -Amount Display: -- Large centered "$ 0" placeholder -- Underline -- "Tap to enter" helper - -Quick Amounts: -- "QUICK AMOUNTS" label -- Four chips: $10, $25, $50, $100 - -History-Based Amounts: -- "BASED ON HISTORY" label -- Two chips: "$50 Your usual amount", "$35 Last payment" - -Note Section: -- "WHAT'S IT FOR?" label -- Input: "Add a note..." with emoji button -- Recent notes with John: emoji chips (Pizza, Coffee, Movie, Uber) - -Continue Button (disabled): -- Full width gray "Enter an amount" -``` - ---- - -## Screen 3: Send Money - Amount Entered - -``` -Mobile send money with amount, Material Design 3, 393x852px - -Top Bar: -- Back arrow, "Pay John" title - -Recipient Card: -- Centered avatar 80dp -- Name "John Doe" - -Amount Display: -- Large "$ 50.00" gradient underlined -- "Remaining: $8,150.00" helper - -Note Input (filled): -- Pizza emoji "Pizza night!" with clear button - -Number Keypad: -- 3x4 grid: 1-9, decimal, 0, backspace -- 64dp height buttons - -Pay Button: -- Full width gradient -- "Pay $50.00" with money icon -- "SWIPE UP TO PAY" hint below -``` - ---- - -## Screen 4: Request Money Mode - -``` -Mobile request money, Material Design 3, P2P fintech, 393x852px - -Top Bar: -- Back arrow, "History" right - -Mode Selector: -- Send, Request (selected gradient), Split tabs - -Request From Section: -- Search input "Search people..." -- "SELECTED (2)" label -- Chips: "John Doe" with X, "Maria Santos" with X - -Amount Section: -- "AMOUNT TO REQUEST (Total)" label -- Large "$100.00" centered -- "Split: $50.00 each (2 people)" helper - -Split Options: -- Two radio buttons: "Split Equally", "Custom Split" (selected) - -Custom Amounts: -- John Doe: $60.00 editable -- Maria Santos: $40.00 editable -- Divider, "Total: $100.00" - -Note Input: -- "Dinner at Italian Place" with pasta emoji - -Request Button: -- Gradient "Request $100.00 (2 people)" - -Bottom Navigation -``` - ---- - -## Screen 5: Split Bill Mode - -``` -Mobile split bill, Material Design 3, P2P fintech, 393x852px - -Top Bar: -- Back arrow, "Split Bill" title - -Total Bill Section: -- "TOTAL BILL" label -- Large "$156.50" centered editable -- "Scan receipt to auto-fill" camera button - -Splitting With Section: -- "SPLITTING WITH (4 people)" header, "+ Add Person" -- Person cards with sliders: - - "You (Paying now)": $39.13, 25% bar - - "John Doe": $39.13, 25%, "Request will be sent" - - "Maria Santos": $39.12, 25% - - "Alex Kumar": $39.12, 25% - -Split Method: -- "Split Method" label with balance icon -- Four radio chips: Equal (selected), Custom, By Item, % Based - -Note Input: -- Pizza emoji "Dinner at Pizza Palace" - -Split Button: -- Gradient "Pay $39.13 & Request from 3 people" -``` - ---- - -## Screen 6: Schedule Recurring Payment - -``` -Mobile schedule recurring payment, Material Design 3, 393x852px - -Top Bar: -- Back arrow, "Schedule Payment" title - -Recipient & Amount Card: -- "TO" section with avatar "John Doe", "@johndoe" -- "AMOUNT" section: "$50.00" large - -Frequency Section: -- "SCHEDULE" header -- "Frequency" label -- Four radio chips: Once, Weekly (selected), Monthly, Custom - -Day of Week Section: -- "Day of Week" label -- Seven day chips: S M T W T F S -- Friday selected with gradient - -Date Range: -- Start Date picker: "Jan 3, 2025" -- End Date picker: "No end date" - -Notifications: -- "Notification Preferences" header -- Checkboxes: Notify before payment (checked), Notify if fails (checked), Email receipt (unchecked) - -Note Input: -- Pizza emoji "Weekly pizza fund" - -Summary Card: -- "$50.00 every Friday starting Jan 3, 2025" -- "Next payment: Jan 3, 2025" - -Schedule Button: -- Gradient "Schedule Recurring Payment" with calendar icon -``` - ---- - -## Screen 7: Payment Confirmation (Swipe to Pay) - -``` -Mobile payment confirmation swipe, Material Design 3, 393x852px - -Top Bar: -- Close X only - -Payment Summary Card: -- Centered large avatar "John Doe" -- "$50.00" prominent -- Pizza emoji "Pizza night!" note - -Transaction Details: -- From: Primary Savings ****4521 -- To: John Doe @johndoe -- Date: Dec 30, 2025 - -Swipe to Pay Zone: -- Gradient track with thumb icon -- "SWIPE TO PAY" text with arrows -- Instruction: "Swipe right to confirm payment" -- Security: Lock icon "Secured with Face ID / Touch ID" -``` - ---- - -## Screen 8: Success State (Animated) - -``` -Mobile payment success, Material Design 3, 393x852px - -Top Bar: -- "Done" text button right only - -Confetti Animation: -- Colorful confetti particles - -Success Icon: -- Large green circle -- Animated checkmark drawing in - -Success Message: -- "Payment Sent!" 28sp bold - -Transaction Card: -- Avatar thumbnail -- "$50.00 -> John Doe" -- Pizza emoji "Pizza night!" - -Transaction Details: -- Transaction ID: TXN-2025123001234567 -- Date & Time: Dec 30, 2025 • 10:45 AM -- From: Primary Savings ****4521 - -Action Buttons Row: -- "Share" outline with share icon -- "Receipt" outline with download icon - -Primary CTA: -- Gradient "Pay Again" full width -``` - ---- - -## Screen 9: Payment History / Activity - -``` -Mobile payment history, Material Design 3, P2P fintech, 393x852px - -Top Bar: -- Back arrow, "Payment History" title -- Filter dropdown - -Search Input: -- "Search payments..." - -Filter Tabs: -- All (selected), Sent, Received, Pending, Scheduled - -TODAY Section: -- Transaction cards: - - Avatar, "You paid John Doe", "-$50.00", pizza emoji, time, "Complete" green badge - - Avatar, "Maria paid you", "+$120.00", pasta emoji, time, "Complete" - -YESTERDAY Section: -- Avatar, "You requested from Alex", "$35.00", coffee emoji, "Pending" amber -- "Remind" and "Cancel" buttons -- Avatar, "You paid Sarah Lee", "-$200.00", house emoji, "Complete" - -SCHEDULED Section: -- Recurring icon, "Weekly to John Doe", "$50.00" -- Pizza emoji, "Every Friday", "Scheduled" badge -- "Next: Jan 3, 2025", Edit and Cancel buttons - -Bottom Navigation -``` - ---- - -## Screen 10: QR Scan Screen - -``` -Mobile QR scanner, Material Design 3, 393x852px - -Top Bar: -- Back arrow, "Scan to Pay" title -- Flashlight toggle icon - -Instruction: -- "Point your camera at a payment QR code" - -Camera Viewfinder: -- Full width camera preview -- Scanning frame overlay with animated corners -- Gradient corner brackets - -Bottom Actions: -- Three buttons row: "My QR" (camera), "Gallery" (image), "NFC" (contactless) -``` - ---- - -## Screen 11: My QR Code (Receive) - -``` -Mobile my QR code, Material Design 3, 393x852px - -Top Bar: -- Back arrow, "My QR Code" title -- Share icon right - -Profile Section: -- Centered avatar -- Name "Your Name" -- Username "@username" - -QR Code Card: -- Large white card with QR code -- Pattern: standard QR with user data encoded - -Amount Input: -- "Set amount to receive" label -- "$0.00" editable input -- Helper: "Anyone who scans can pay you this amount" - -Action Buttons: -- "Copy Link" with clipboard icon -- "Save Image" with download icon -``` - ---- - -## Components - -### ModeTabSelector -``` -Mode tab selector, Material Design 3: -- Height: 48dp -- Three pill tabs: Send, Request, Split -- Selected: gradient background, white text -- Unselected: surface, secondary text -- Icons: 20dp before text -- Touch target: full pill -``` - -### RecentRecipientCard -``` -Recent recipient card, Material Design 3: -- Width: 72dp, Height: 96dp -- Avatar: 48dp circle with gradient background -- Name: 12sp Medium, max 8 chars -- Amount: 11sp Regular, secondary -- Time: 10sp Regular, tertiary -- Tap: opens pre-filled payment -``` - -### AmountInputDisplay -``` -Amount input display, Material Design 3: -- Amount: 44sp ExtraBold, primary/error -- Currency: 28sp Regular, 60% opacity -- Underline: 2dp gradient -- Remaining balance: 14sp secondary, live update -``` - -### QuickAmountChip -``` -Quick amount chip, Material Design 3: -- Regular: 40dp height, outlined -- History-based: 48dp, two lines, tinted background -- Selected: gradient fill, white text -- Amount: 16sp Medium -- Label: 12sp Secondary -``` - -### SwipeToPayButton -``` -Swipe to pay button, Material Design 3: -- Height: 64dp, radius: 32dp -- Track: gradient background, shimmer -- Thumb: 48dp white circle, arrow icon -- Threshold: 80% width -- Complete: checkmark morph, haptic -``` - -### NoteInputWithEmoji -``` -Note input with emoji, Material Design 3: -- Height: 48dp, radius: 12dp -- Background: surface variant -- Emoji button: opens picker -- Clear button: visible when filled -- Recent notes: chips below -``` - ---- - -## Quick Start - -1. Open [stitch.withgoogle.com](https://stitch.withgoogle.com) -2. Create project "Mifos Mobile - Transfer" -3. Copy each screen prompt -> Generate -4. Generate components separately for reuse -5. Export all to Figma when done diff --git a/claude-product-cycle/design-spec-layer/features/transfer/mockups/dummy/01-transfer-hub.png b/claude-product-cycle/design-spec-layer/features/transfer/mockups/dummy/01-transfer-hub.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/transfer/mockups/dummy/02-select-account.png b/claude-product-cycle/design-spec-layer/features/transfer/mockups/dummy/02-select-account.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/transfer/mockups/dummy/03-enter-amount.png b/claude-product-cycle/design-spec-layer/features/transfer/mockups/dummy/03-enter-amount.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/transfer/mockups/dummy/04-transfer-review.png b/claude-product-cycle/design-spec-layer/features/transfer/mockups/dummy/04-transfer-review.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/transfer/mockups/dummy/05-transfer-success.png b/claude-product-cycle/design-spec-layer/features/transfer/mockups/dummy/05-transfer-success.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/features/transfer/mockups/dummy/06-transfer-history.png b/claude-product-cycle/design-spec-layer/features/transfer/mockups/dummy/06-transfer-history.png deleted file mode 100644 index 909c66db1740b7c1b41eb4db6c414a7ab5bb6a23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 68 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>Zci7-kcwN$DG5Lh8v~O;;{|;n Oi^0>?&t;ucLK6U5DhwL{ diff --git a/claude-product-cycle/design-spec-layer/mockup-tools/LAYER_STATUS.md b/claude-product-cycle/design-spec-layer/mockup-tools/LAYER_STATUS.md deleted file mode 100644 index ab277cbe0..000000000 --- a/claude-product-cycle/design-spec-layer/mockup-tools/LAYER_STATUS.md +++ /dev/null @@ -1,170 +0,0 @@ -# Mockup Layer - Status & Memory - -> **Layer**: Design Mockup Generation -> **Command**: `/mockup [Feature]` -> **Location**: `claude-product-cycle/mockup-layer/` - ---- - -## Current Status - -| Component | Count | Status | -|-----------|-------|--------| -| Figma Plugin | 1 | Setup Complete | -| Design Tokens | 1 | Complete | -| Component Generators | 8 | Complete | -| Scripts | 3 | Complete | -| Skills | 1 | Complete | - ---- - -## Layer Structure - -``` -mockup-layer/ -├── LAYER_STATUS.md # This file -├── README.md # Usage guide -├── figma-plugin/ # Figma plugin project -│ ├── package.json -│ ├── manifest.json -│ ├── tsconfig.json -│ └── src/ -│ ├── plugin.ts # Main plugin entry -│ ├── design-system/ # Design tokens -│ │ ├── index.ts -│ │ ├── tokens.ts -│ │ ├── colors.ts -│ │ ├── typography.ts -│ │ └── spacing.ts -│ ├── generators/ # Component generators -│ │ ├── index.ts -│ │ └── components/ -│ │ ├── screen.ts -│ │ ├── top-bar.ts -│ │ ├── card.ts -│ │ ├── button.ts -│ │ ├── list-item.ts -│ │ ├── input-field.ts -│ │ ├── bottom-nav.ts -│ │ └── quick-actions.ts -│ └── utils/ -│ ├── helpers.ts -│ └── spec-parser.ts -├── scripts/ -│ ├── generate-prompts.ts # SPEC → AI prompts -│ ├── build-plugin.ts # Build Figma plugin -│ └── sync-designs.ts # Sync to Figma -└── templates/ - ├── ai-prompt.md # Template for AI tools - └── component.ts # Template for generators -``` - ---- - -## Workflow - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ /mockup WORKFLOW │ -├─────────────────────────────────────────────────────────────────┤ -│ │ -│ INPUT: /mockup [feature] │ -│ │ -│ STEP 1: READ SPEC │ -│ ├─→ Read features/[feature]/SPEC.md │ -│ ├─→ Parse ASCII mockups │ -│ └─→ Extract component definitions │ -│ │ -│ STEP 2: GENERATE OUTPUT (Choose one) │ -│ ├─→ Option A: Figma plugin code (.ts) │ -│ ├─→ Option B: AI tool prompts (PROMPTS.md) │ -│ └─→ Option C: Design tokens (tokens.json) │ -│ │ -│ STEP 3: OUTPUT TO │ -│ └─→ features/[feature]/mockups/ │ -│ │ -│ STEP 4: USER ACTION │ -│ ├─→ Run Figma plugin in Figma Desktop │ -│ └─→ OR paste prompts in Google Stitch/Uizard │ -│ │ -│ STEP 5: EXPORT & CONNECT │ -│ ├─→ Design ready in Figma │ -│ └─→ Figma MCP available for /implement │ -│ │ -└─────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Feature Mockup Status - -| Feature | Plugin | Prompts | Tokens | Figma File | -|---------|--------|---------|--------|------------| -| dashboard | Planned | Planned | Planned | - | -| auth | - | - | - | - | -| home | - | - | - | - | -| accounts | - | - | - | - | - ---- - -## Design System - -### Material Design 3 Tokens - -| Category | Tokens | Status | -|----------|--------|--------| -| Colors | Primary, Secondary, Surface, Error | Complete | -| Typography | Display, Headline, Title, Body, Label | Complete | -| Spacing | xs, sm, md, lg, xl | Complete | -| Radius | sm, md, lg, xl | Complete | -| Elevation | level0-5 | Complete | - ---- - -## Component Generators - -| Component | Generator | Usage | -|-----------|-----------|-------| -| Screen | `createScreen()` | Base mobile screen frame | -| TopBar | `createTopBar()` | App bar with title/icons | -| Card | `createCard()` | Content card with variants | -| Button | `createButton()` | Primary/secondary/text buttons | -| ListItem | `createListItem()` | List row with icon/text/action | -| InputField | `createInputField()` | Text input with label | -| BottomNav | `createBottomNav()` | Bottom navigation bar | -| QuickActions | `createQuickActions()` | Horizontal action buttons | - ---- - -## Build Commands - -```bash -# Install dependencies -cd claude-product-cycle/mockup-layer/figma-plugin -npm install - -# Build plugin -npm run build - -# Watch mode (development) -npm run watch - -# Generate prompts for a feature -npx ts-node ../scripts/generate-prompts.ts dashboard -``` - ---- - -## Related Docs - -- Design Specs: `claude-product-cycle/design-spec-layer/features/` -- Skill Definition: `claude-product-cycle/commands-layer/skills/mockup.md` -- Figma Plugin API: https://www.figma.com/plugin-docs/ - ---- - -## Changelog - -| Date | Change | -|------|--------| -| 2025-12-28 | Created mockup-layer with Figma plugin structure | diff --git a/claude-product-cycle/design-spec-layer/mockup-tools/README.md b/claude-product-cycle/design-spec-layer/mockup-tools/README.md deleted file mode 100644 index 78b684f0b..000000000 --- a/claude-product-cycle/design-spec-layer/mockup-tools/README.md +++ /dev/null @@ -1,176 +0,0 @@ -# Mockup Layer - -> Generate design mockups from feature specifications - -## Overview - -The Mockup Layer provides tools to generate visual design mockups from SPEC.md files. It supports two approaches: - -1. **Figma Plugin** - Programmatically generate designs in Figma -2. **AI Prompts** - Generate prompts for Google Stitch, Uizard, or Visily - -## Quick Start - -### Option A: Using Figma Plugin - -```bash -# 1. Install dependencies -cd figma-plugin -npm install - -# 2. Build the plugin -npm run build - -# 3. In Figma Desktop: -# - Plugins → Development → Import plugin from manifest -# - Select: mockup-layer/figma-plugin/manifest.json - -# 4. Run the plugin -# - Plugins → Development → Mifos Mockup Generator -``` - -### Option B: Using AI Prompts - -```bash -# Generate prompts for a feature -/mockup dashboard prompts - -# Copy the generated prompts from: -# features/dashboard/mockups/PROMPTS.md - -# Paste into Google Stitch or Uizard -``` - -## Commands - -| Command | Description | -|---------|-------------| -| `/mockup` | Show available features | -| `/mockup [feature]` | Generate Figma plugin code | -| `/mockup [feature] prompts` | Generate AI tool prompts | -| `/mockup [feature] tokens` | Generate design tokens JSON | -| `/mockup sync` | Sync all mockups status | - -## Design System - -The mockup layer uses Material Design 3 tokens: - -### Colors -```typescript -primary: '#6750A4' // Purple 500 -onPrimary: '#FFFFFF' -primaryContainer: '#EADDFF' -secondary: '#625B71' -surface: '#FFFBFE' -surfaceVariant: '#E7E0EC' -error: '#B3261E' -success: '#2E7D32' -``` - -### Typography -```typescript -displayLarge: { size: 57, weight: 400 } -headlineMedium: { size: 28, weight: 400 } -titleLarge: { size: 22, weight: 400 } -bodyLarge: { size: 16, weight: 400 } -labelMedium: { size: 12, weight: 500 } -``` - -### Spacing -```typescript -xs: 4, sm: 8, md: 16, lg: 24, xl: 32 -``` - -## Workflow Integration - -``` -┌─────────────────────────────────────────────────────────────┐ -│ /design dashboard │ -│ ↓ │ -│ SPEC.md with ASCII mockups │ -│ ↓ │ -│ /mockup dashboard │ -│ ↓ │ -│ Figma plugin OR AI prompts generated │ -│ ↓ │ -│ Run in Figma / Paste in AI tool │ -│ ↓ │ -│ Export to Figma (if using AI tool) │ -│ ↓ │ -│ Connect Figma MCP │ -│ ↓ │ -│ /implement dashboard │ -│ ↓ │ -│ Compose/SwiftUI code generated │ -└─────────────────────────────────────────────────────────────┘ -``` - -## File Structure - -``` -mockup-layer/ -├── figma-plugin/ # Figma plugin source -│ ├── src/ -│ │ ├── plugin.ts # Main entry point -│ │ ├── design-system/ # Material Design 3 tokens -│ │ └── generators/ # Component generators -│ └── manifest.json # Figma plugin manifest -├── scripts/ # Build & generation scripts -└── templates/ # Prompt templates -``` - -## Component Generators - -The Figma plugin includes generators for common components: - -| Generator | Description | -|-----------|-------------| -| `createScreen(title)` | Mobile screen frame (390x844) | -| `createTopBar(title, icons)` | App bar with navigation | -| `createCard(title, content)` | Material card component | -| `createButton(label, variant)` | Button (primary/secondary/text) | -| `createListItem(icon, title, subtitle)` | List row | -| `createInputField(label, placeholder)` | Text input | -| `createBottomNav(items)` | Bottom navigation bar | -| `createQuickActions(actions)` | Horizontal action row | - -## AI Tool Prompts - -Generated prompts are optimized for: - -- **Google Stitch** - Best for Material Design -- **Uizard** - Good for quick iterations -- **Visily** - Good Figma integration - -Example prompt structure: -``` -Create a [screen type] with Material Design 3: - -- [Component 1]: [Description] -- [Component 2]: [Description] -... - -Style: Clean, modern, Material Design 3 -Colors: Purple/blue gradient accents -Platform: Android mobile app -``` - -## Troubleshooting - -### Figma Plugin Issues - -1. **Plugin not loading**: Ensure you're using Figma Desktop (not web) -2. **TypeScript errors**: Run `npm run build` to check for errors -3. **Missing fonts**: The plugin uses Inter font by default - -### AI Tool Issues - -1. **Low quality output**: Try adding more specific details to prompts -2. **Wrong style**: Explicitly mention "Material Design 3" in prompts -3. **Missing components**: Break down complex screens into sections - -## Related Documentation - -- [Figma Plugin API](https://www.figma.com/plugin-docs/) -- [Material Design 3](https://m3.material.io/) -- [Google Stitch](https://stitch.withgoogle.com/) diff --git a/claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/manifest.json b/claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/manifest.json deleted file mode 100644 index 6f83e8cae..000000000 --- a/claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/manifest.json +++ /dev/null @@ -1,50 +0,0 @@ -{ - "name": "Mifos Mockup Generator", - "id": "mifos-mockup-generator", - "api": "1.0.0", - "main": "dist/plugin.js", - "capabilities": [], - "enableProposedApi": false, - "editorType": ["figma"], - "documentAccess": "dynamic-page", - "networkAccess": { - "allowedDomains": ["none"] - }, - "menu": [ - { - "name": "Generate Dashboard", - "command": "generate-dashboard" - }, - { - "name": "Generate Auth Screens", - "command": "generate-auth" - }, - { - "name": "Generate Account Screens", - "command": "generate-accounts" - }, - { "separator": true }, - { - "name": "Components", - "menu": [ - { "name": "Net Worth Card", "command": "component-net-worth-card" }, - { "name": "Account Card", "command": "component-account-card" }, - { "name": "Transaction Item", "command": "component-transaction-item" }, - { "name": "Quick Actions", "command": "component-quick-actions" }, - { "name": "Top Bar", "command": "component-top-bar" }, - { "name": "Bottom Navigation", "command": "component-bottom-nav" }, - { "name": "Input Field", "command": "component-input-field" }, - { "name": "Button", "command": "component-button" } - ] - }, - { "separator": true }, - { - "name": "Design System", - "menu": [ - { "name": "Color Palette", "command": "ds-colors" }, - { "name": "Typography Scale", "command": "ds-typography" }, - { "name": "Spacing Grid", "command": "ds-spacing" } - ] - } - ] -} diff --git a/claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/package.json b/claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/package.json deleted file mode 100644 index 19b76a31a..000000000 --- a/claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/package.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "name": "mifos-mockup-generator", - "version": "1.0.0", - "description": "Figma plugin to generate Mifos Mobile UI mockups from specifications", - "main": "dist/plugin.js", - "scripts": { - "build": "esbuild src/plugin.ts --bundle --outfile=dist/plugin.js --target=es2020", - "watch": "esbuild src/plugin.ts --bundle --outfile=dist/plugin.js --target=es2020 --watch", - "typecheck": "tsc --noEmit" - }, - "keywords": [ - "figma", - "plugin", - "mifos", - "mockup", - "material-design" - ], - "author": "Mifos Initiative", - "license": "MPL-2.0", - "devDependencies": { - "@figma/plugin-typings": "^1.98.0", - "esbuild": "^0.24.0", - "typescript": "^5.7.0" - } -} diff --git a/claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/design-system/index.ts b/claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/design-system/index.ts deleted file mode 100644 index 173736b1f..000000000 --- a/claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/design-system/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -/** - * Design System Exports - */ - -export * from './tokens' diff --git a/claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/design-system/tokens.ts b/claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/design-system/tokens.ts deleted file mode 100644 index 99130ec6d..000000000 --- a/claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/design-system/tokens.ts +++ /dev/null @@ -1,310 +0,0 @@ -/** - * Mifos Mobile Design System Tokens - * Based on Material Design 3 - */ - -// ============================================================================ -// COLOR TOKENS -// ============================================================================ - -export const Colors = { - // Primary - primary: '#6750A4', - onPrimary: '#FFFFFF', - primaryContainer: '#EADDFF', - onPrimaryContainer: '#21005D', - - // Secondary - secondary: '#625B71', - onSecondary: '#FFFFFF', - secondaryContainer: '#E8DEF8', - onSecondaryContainer: '#1D192B', - - // Tertiary - tertiary: '#7D5260', - onTertiary: '#FFFFFF', - tertiaryContainer: '#FFD8E4', - onTertiaryContainer: '#31111D', - - // Error - error: '#B3261E', - onError: '#FFFFFF', - errorContainer: '#F9DEDC', - onErrorContainer: '#410E0B', - - // Success - success: '#2E7D32', - onSuccess: '#FFFFFF', - successContainer: '#C8E6C9', - onSuccessContainer: '#1B5E20', - - // Warning - warning: '#F57C00', - onWarning: '#FFFFFF', - warningContainer: '#FFE0B2', - onWarningContainer: '#E65100', - - // Surface - surface: '#FFFBFE', - surfaceDim: '#DED8E1', - surfaceBright: '#FFFBFE', - surfaceContainerLowest: '#FFFFFF', - surfaceContainerLow: '#F7F2FA', - surfaceContainer: '#F3EDF7', - surfaceContainerHigh: '#ECE6F0', - surfaceContainerHighest: '#E6E0E9', - onSurface: '#1C1B1F', - onSurfaceVariant: '#49454F', - - // Outline - outline: '#79747E', - outlineVariant: '#CAC4D0', - - // Background - background: '#FFFBFE', - onBackground: '#1C1B1F', - - // Inverse - inverseSurface: '#313033', - inverseOnSurface: '#F4EFF4', - inversePrimary: '#D0BCFF', - - // Scrim - scrim: '#000000', - shadow: '#000000', -} as const - -// ============================================================================ -// TYPOGRAPHY TOKENS -// ============================================================================ - -export const Typography = { - displayLarge: { - fontFamily: 'Inter', - fontSize: 57, - fontWeight: 400, - lineHeight: 64, - letterSpacing: -0.25, - }, - displayMedium: { - fontFamily: 'Inter', - fontSize: 45, - fontWeight: 400, - lineHeight: 52, - letterSpacing: 0, - }, - displaySmall: { - fontFamily: 'Inter', - fontSize: 36, - fontWeight: 400, - lineHeight: 44, - letterSpacing: 0, - }, - headlineLarge: { - fontFamily: 'Inter', - fontSize: 32, - fontWeight: 400, - lineHeight: 40, - letterSpacing: 0, - }, - headlineMedium: { - fontFamily: 'Inter', - fontSize: 28, - fontWeight: 400, - lineHeight: 36, - letterSpacing: 0, - }, - headlineSmall: { - fontFamily: 'Inter', - fontSize: 24, - fontWeight: 400, - lineHeight: 32, - letterSpacing: 0, - }, - titleLarge: { - fontFamily: 'Inter', - fontSize: 22, - fontWeight: 400, - lineHeight: 28, - letterSpacing: 0, - }, - titleMedium: { - fontFamily: 'Inter', - fontSize: 16, - fontWeight: 500, - lineHeight: 24, - letterSpacing: 0.15, - }, - titleSmall: { - fontFamily: 'Inter', - fontSize: 14, - fontWeight: 500, - lineHeight: 20, - letterSpacing: 0.1, - }, - bodyLarge: { - fontFamily: 'Inter', - fontSize: 16, - fontWeight: 400, - lineHeight: 24, - letterSpacing: 0.5, - }, - bodyMedium: { - fontFamily: 'Inter', - fontSize: 14, - fontWeight: 400, - lineHeight: 20, - letterSpacing: 0.25, - }, - bodySmall: { - fontFamily: 'Inter', - fontSize: 12, - fontWeight: 400, - lineHeight: 16, - letterSpacing: 0.4, - }, - labelLarge: { - fontFamily: 'Inter', - fontSize: 14, - fontWeight: 500, - lineHeight: 20, - letterSpacing: 0.1, - }, - labelMedium: { - fontFamily: 'Inter', - fontSize: 12, - fontWeight: 500, - lineHeight: 16, - letterSpacing: 0.5, - }, - labelSmall: { - fontFamily: 'Inter', - fontSize: 11, - fontWeight: 500, - lineHeight: 16, - letterSpacing: 0.5, - }, -} as const - -// ============================================================================ -// SPACING TOKENS -// ============================================================================ - -export const Spacing = { - none: 0, - xs: 4, - sm: 8, - md: 16, - lg: 24, - xl: 32, - xxl: 48, - xxxl: 64, -} as const - -// ============================================================================ -// RADIUS TOKENS -// ============================================================================ - -export const Radius = { - none: 0, - xs: 4, - sm: 8, - md: 12, - lg: 16, - xl: 28, - full: 9999, -} as const - -// ============================================================================ -// ELEVATION TOKENS -// ============================================================================ - -export const Elevation = { - level0: { - shadowColor: Colors.shadow, - shadowOffsetX: 0, - shadowOffsetY: 0, - shadowBlur: 0, - shadowSpread: 0, - }, - level1: { - shadowColor: Colors.shadow, - shadowOffsetX: 0, - shadowOffsetY: 1, - shadowBlur: 3, - shadowSpread: 1, - }, - level2: { - shadowColor: Colors.shadow, - shadowOffsetX: 0, - shadowOffsetY: 2, - shadowBlur: 6, - shadowSpread: 2, - }, - level3: { - shadowColor: Colors.shadow, - shadowOffsetX: 0, - shadowOffsetY: 4, - shadowBlur: 8, - shadowSpread: 3, - }, - level4: { - shadowColor: Colors.shadow, - shadowOffsetX: 0, - shadowOffsetY: 6, - shadowBlur: 10, - shadowSpread: 4, - }, - level5: { - shadowColor: Colors.shadow, - shadowOffsetX: 0, - shadowOffsetY: 8, - shadowBlur: 12, - shadowSpread: 6, - }, -} as const - -// ============================================================================ -// SCREEN DIMENSIONS -// ============================================================================ - -export const Screens = { - // iPhone 14 Pro - mobile: { width: 393, height: 852 }, - // iPhone 14 Pro Max - mobileLarge: { width: 430, height: 932 }, - // Standard tablet - tablet: { width: 768, height: 1024 }, -} as const - -// ============================================================================ -// ICON SIZES -// ============================================================================ - -export const IconSizes = { - xs: 16, - sm: 20, - md: 24, - lg: 32, - xl: 48, -} as const - -// ============================================================================ -// COMPONENT SIZES -// ============================================================================ - -export const ComponentSizes = { - topBarHeight: 64, - bottomNavHeight: 80, - buttonHeight: 48, - buttonHeightSmall: 36, - inputHeight: 56, - listItemHeight: 72, - listItemHeightSmall: 56, - cardMinHeight: 100, - fabSize: 56, - fabSizeSmall: 40, - chipHeight: 32, - avatarSize: 40, - avatarSizeLarge: 56, -} as const diff --git a/claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/generators/components/bottom-nav.ts b/claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/generators/components/bottom-nav.ts deleted file mode 100644 index fead7ecbd..000000000 --- a/claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/generators/components/bottom-nav.ts +++ /dev/null @@ -1,260 +0,0 @@ -/** - * Bottom Navigation Component Generator - * Creates Material Design 3 bottom navigation bar - */ - -import { Colors, Typography, Spacing, ComponentSizes } from '../../design-system/tokens' -import { solidPaint, setAutoLayout, createText, createIconPlaceholder } from '../../utils/helpers' - -export interface NavItem { - icon: string - label: string - badge?: number | boolean -} - -export interface BottomNavOptions { - items: NavItem[] - selectedIndex?: number -} - -/** - * Create a bottom navigation bar - */ -export async function createBottomNav(options: BottomNavOptions): Promise { - const { items, selectedIndex = 0 } = options - - const nav = figma.createFrame() - nav.name = 'BottomNavigation' - nav.layoutSizingHorizontal = 'FILL' - nav.resize(393, ComponentSizes.bottomNavHeight) - nav.fills = [solidPaint(Colors.surfaceContainer)] - - setAutoLayout(nav, { - direction: 'HORIZONTAL', - padding: { top: 12, right: 0, bottom: 16, left: 0 }, - alignment: 'SPACE_BETWEEN', - crossAlignment: 'CENTER', - }) - - for (let i = 0; i < items.length; i++) { - const item = items[i] - const isSelected = i === selectedIndex - const navItem = await createNavItem(item, isSelected) - nav.appendChild(navItem) - } - - return nav -} - -/** - * Create a single navigation item - */ -async function createNavItem(item: NavItem, selected: boolean): Promise { - const navItem = figma.createFrame() - navItem.name = `NavItem-${item.label}` - navItem.layoutSizingHorizontal = 'FILL' - navItem.fills = [] - - setAutoLayout(navItem, { - direction: 'VERTICAL', - gap: 4, - alignment: 'CENTER', - crossAlignment: 'CENTER', - }) - - // Indicator + Icon container - const iconContainer = figma.createFrame() - iconContainer.name = 'IconContainer' - iconContainer.resize(64, 32) - iconContainer.fills = [] - - // Indicator (pill shape behind icon when selected) - if (selected) { - const indicator = figma.createFrame() - indicator.name = 'Indicator' - indicator.resize(64, 32) - indicator.cornerRadius = 16 - indicator.fills = [solidPaint(Colors.secondaryContainer)] - indicator.x = 0 - indicator.y = 0 - iconContainer.appendChild(indicator) - } - - // Icon - const icon = createIconPlaceholder( - item.icon.charAt(0).toUpperCase(), - 24, - 'transparent', - selected ? Colors.onSecondaryContainer : Colors.onSurfaceVariant - ) - icon.x = 20 - icon.y = 4 - iconContainer.appendChild(icon) - - // Badge - if (item.badge !== undefined && item.badge !== false) { - const badge = createBadge(typeof item.badge === 'number' ? item.badge : undefined) - badge.x = 36 - badge.y = 0 - iconContainer.appendChild(badge) - } - - navItem.appendChild(iconContainer) - - // Label - const label = await createText(item.label, { - ...Typography.labelMedium, - color: selected ? Colors.onSurface : Colors.onSurfaceVariant, - }) - navItem.appendChild(label) - - return navItem -} - -/** - * Create a badge - */ -function createBadge(count?: number): FrameNode { - const badge = figma.createFrame() - badge.name = 'Badge' - - if (count !== undefined && count > 0) { - // Large badge with number - badge.resize(count > 9 ? 24 : 16, 16) - badge.cornerRadius = 8 - badge.fills = [solidPaint(Colors.error)] - - setAutoLayout(badge, { - direction: 'HORIZONTAL', - padding: { top: 0, right: 4, bottom: 0, left: 4 }, - alignment: 'CENTER', - crossAlignment: 'CENTER', - }) - - // Badge count would be added after font loading - } else { - // Small dot badge - badge.resize(6, 6) - badge.cornerRadius = 3 - badge.fills = [solidPaint(Colors.error)] - } - - return badge -} - -/** - * Create a navigation rail (for tablets/desktop) - */ -export async function createNavigationRail(options: { - items: NavItem[] - selectedIndex?: number - showFab?: boolean - fabIcon?: string -}): Promise { - const { items, selectedIndex = 0, showFab = false, fabIcon = '+' } = options - - const rail = figma.createFrame() - rail.name = 'NavigationRail' - rail.resize(80, 600) - rail.fills = [solidPaint(Colors.surface)] - - setAutoLayout(rail, { - direction: 'VERTICAL', - padding: { top: 12, right: 0, bottom: 12, left: 0 }, - gap: 12, - crossAlignment: 'CENTER', - }) - - // Menu button placeholder - const menuButton = figma.createFrame() - menuButton.name = 'MenuButton' - menuButton.resize(48, 48) - menuButton.cornerRadius = 24 - menuButton.fills = [] - menuButton.layoutMode = 'HORIZONTAL' - menuButton.primaryAxisAlignItems = 'CENTER' - menuButton.counterAxisAlignItems = 'CENTER' - - const menuIcon = createIconPlaceholder('≡', 24, 'transparent', Colors.onSurfaceVariant) - menuButton.appendChild(menuIcon) - rail.appendChild(menuButton) - - // FAB - if (showFab) { - const fab = figma.createFrame() - fab.name = 'FAB' - fab.resize(56, 56) - fab.cornerRadius = 16 - fab.fills = [solidPaint(Colors.primaryContainer)] - fab.layoutMode = 'HORIZONTAL' - fab.primaryAxisAlignItems = 'CENTER' - fab.counterAxisAlignItems = 'CENTER' - - const fabIconNode = createIconPlaceholder(fabIcon, 24, 'transparent', Colors.onPrimaryContainer) - fab.appendChild(fabIconNode) - rail.appendChild(fab) - } - - // Spacer - const spacer = figma.createFrame() - spacer.name = 'Spacer' - spacer.resize(1, 12) - spacer.fills = [] - rail.appendChild(spacer) - - // Navigation items - for (let i = 0; i < items.length; i++) { - const item = items[i] - const isSelected = i === selectedIndex - - const railItem = figma.createFrame() - railItem.name = `RailItem-${item.label}` - railItem.resize(56, 56) - railItem.fills = [] - - setAutoLayout(railItem, { - direction: 'VERTICAL', - gap: 4, - alignment: 'CENTER', - crossAlignment: 'CENTER', - }) - - // Icon with indicator - const iconWrapper = figma.createFrame() - iconWrapper.name = 'IconWrapper' - iconWrapper.resize(56, 32) - iconWrapper.fills = [] - - if (isSelected) { - const indicator = figma.createFrame() - indicator.name = 'Indicator' - indicator.resize(56, 32) - indicator.cornerRadius = 16 - indicator.fills = [solidPaint(Colors.secondaryContainer)] - iconWrapper.appendChild(indicator) - } - - const icon = createIconPlaceholder( - item.icon.charAt(0).toUpperCase(), - 24, - 'transparent', - isSelected ? Colors.onSecondaryContainer : Colors.onSurfaceVariant - ) - icon.x = 16 - icon.y = 4 - iconWrapper.appendChild(icon) - - railItem.appendChild(iconWrapper) - - // Label - const label = await createText(item.label, { - ...Typography.labelMedium, - color: isSelected ? Colors.onSurface : Colors.onSurfaceVariant, - }) - railItem.appendChild(label) - - rail.appendChild(railItem) - } - - return rail -} diff --git a/claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/generators/components/button.ts b/claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/generators/components/button.ts deleted file mode 100644 index 7cd3b949a..000000000 --- a/claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/generators/components/button.ts +++ /dev/null @@ -1,273 +0,0 @@ -/** - * Button Component Generator - * Creates Material Design 3 buttons - */ - -import { Colors, Typography, Spacing, Radius, ComponentSizes } from '../../design-system/tokens' -import { solidPaint, setAutoLayout, createText, applyElevation, createIconPlaceholder } from '../../utils/helpers' - -export type ButtonVariant = 'filled' | 'outlined' | 'text' | 'elevated' | 'tonal' -export type ButtonSize = 'small' | 'medium' | 'large' - -export interface ButtonOptions { - label: string - variant?: ButtonVariant - size?: ButtonSize - icon?: string - iconPosition?: 'left' | 'right' - fullWidth?: boolean - disabled?: boolean -} - -/** - * Create a button - */ -export async function createButton(options: ButtonOptions): Promise { - const { - label, - variant = 'filled', - size = 'medium', - icon, - iconPosition = 'left', - fullWidth = false, - disabled = false, - } = options - - const button = figma.createFrame() - button.name = `Button-${variant}-${label}` - - // Size configuration - const sizeConfig = { - small: { height: 36, padding: 16, iconSize: 18, typography: Typography.labelMedium }, - medium: { height: 48, padding: 24, iconSize: 20, typography: Typography.labelLarge }, - large: { height: 56, padding: 32, iconSize: 24, typography: Typography.labelLarge }, - } - - const config = sizeConfig[size] - button.resize(100, config.height) - button.cornerRadius = config.height / 2 - - if (fullWidth) { - button.layoutSizingHorizontal = 'FILL' - } - - setAutoLayout(button, { - direction: 'HORIZONTAL', - padding: { top: 0, right: config.padding, bottom: 0, left: config.padding }, - gap: 8, - alignment: 'CENTER', - crossAlignment: 'CENTER', - }) - - // Variant styling - let textColor: string - let bgColor: string | null = null - let strokeColor: string | null = null - - switch (variant) { - case 'filled': - bgColor = disabled ? Colors.onSurface : Colors.primary - textColor = disabled ? Colors.surface : Colors.onPrimary - button.opacity = disabled ? 0.12 : 1 - break - case 'outlined': - strokeColor = disabled ? Colors.onSurface : Colors.outline - textColor = disabled ? Colors.onSurface : Colors.primary - button.opacity = disabled ? 0.12 : 1 - break - case 'text': - textColor = disabled ? Colors.onSurface : Colors.primary - button.opacity = disabled ? 0.38 : 1 - break - case 'elevated': - bgColor = Colors.surfaceContainerLow - textColor = disabled ? Colors.onSurface : Colors.primary - if (!disabled) applyElevation(button, 1) - button.opacity = disabled ? 0.12 : 1 - break - case 'tonal': - bgColor = disabled ? Colors.onSurface : Colors.secondaryContainer - textColor = disabled ? Colors.surface : Colors.onSecondaryContainer - button.opacity = disabled ? 0.12 : 1 - break - default: - textColor = Colors.onPrimary - } - - if (bgColor) { - button.fills = [solidPaint(bgColor)] - } else { - button.fills = [] - } - - if (strokeColor) { - button.strokes = [solidPaint(strokeColor)] - button.strokeWeight = 1 - } - - // Icon (left) - if (icon && iconPosition === 'left') { - const iconNode = createIconPlaceholder(icon.charAt(0), config.iconSize, 'transparent', textColor) - button.appendChild(iconNode) - } - - // Label - const labelText = await createText(label, { - ...config.typography, - color: textColor, - }) - button.appendChild(labelText) - - // Icon (right) - if (icon && iconPosition === 'right') { - const iconNode = createIconPlaceholder(icon.charAt(0), config.iconSize, 'transparent', textColor) - button.appendChild(iconNode) - } - - return button -} - -/** - * Create a FAB (Floating Action Button) - */ -export async function createFab(options: { - icon: string - label?: string - variant?: 'primary' | 'secondary' | 'tertiary' | 'surface' - size?: 'small' | 'medium' | 'large' -}): Promise { - const { - icon, - label, - variant = 'primary', - size = 'medium', - } = options - - const fab = figma.createFrame() - fab.name = label ? 'ExtendedFAB' : 'FAB' - - const sizeConfig = { - small: { size: 40, iconSize: 24, radius: 12 }, - medium: { size: 56, iconSize: 24, radius: 16 }, - large: { size: 96, iconSize: 36, radius: 28 }, - } - - const config = sizeConfig[size] - - // Colors based on variant - const variantColors = { - primary: { bg: Colors.primaryContainer, fg: Colors.onPrimaryContainer }, - secondary: { bg: Colors.secondaryContainer, fg: Colors.onSecondaryContainer }, - tertiary: { bg: Colors.tertiaryContainer, fg: Colors.onTertiaryContainer }, - surface: { bg: Colors.surfaceContainerHigh, fg: Colors.primary }, - } - - const colors = variantColors[variant] - - if (label) { - // Extended FAB - fab.resize(100, config.size) - fab.cornerRadius = config.radius - fab.fills = [solidPaint(colors.bg)] - applyElevation(fab, 3) - - setAutoLayout(fab, { - direction: 'HORIZONTAL', - padding: { top: 16, right: 20, bottom: 16, left: 16 }, - gap: 12, - crossAlignment: 'CENTER', - }) - - const iconNode = createIconPlaceholder(icon.charAt(0), config.iconSize, 'transparent', colors.fg) - fab.appendChild(iconNode) - - const labelText = await createText(label, { - ...Typography.labelLarge, - color: colors.fg, - }) - fab.appendChild(labelText) - } else { - // Regular FAB - fab.resize(config.size, config.size) - fab.cornerRadius = config.radius - fab.fills = [solidPaint(colors.bg)] - applyElevation(fab, 3) - - setAutoLayout(fab, { - direction: 'HORIZONTAL', - alignment: 'CENTER', - crossAlignment: 'CENTER', - }) - - const iconNode = createIconPlaceholder(icon.charAt(0), config.iconSize, 'transparent', colors.fg) - fab.appendChild(iconNode) - } - - return fab -} - -/** - * Create an icon button - */ -export function createIconButton(options: { - icon: string - variant?: 'standard' | 'filled' | 'tonal' | 'outlined' - selected?: boolean - disabled?: boolean -}): FrameNode { - const { - icon, - variant = 'standard', - selected = false, - disabled = false, - } = options - - const button = figma.createFrame() - button.name = `IconButton-${icon}` - button.resize(48, 48) - button.cornerRadius = 24 - - setAutoLayout(button, { - direction: 'HORIZONTAL', - alignment: 'CENTER', - crossAlignment: 'CENTER', - }) - - let bgColor: string | null = null - let iconColor: string - - switch (variant) { - case 'filled': - bgColor = selected ? Colors.primary : Colors.surfaceContainerHighest - iconColor = selected ? Colors.onPrimary : Colors.primary - break - case 'tonal': - bgColor = selected ? Colors.secondaryContainer : Colors.surfaceContainerHighest - iconColor = selected ? Colors.onSecondaryContainer : Colors.onSurfaceVariant - break - case 'outlined': - button.strokes = [solidPaint(Colors.outline)] - button.strokeWeight = 1 - iconColor = selected ? Colors.inverseSurface : Colors.onSurfaceVariant - if (selected) bgColor = Colors.inverseSurface - break - default: // standard - iconColor = selected ? Colors.primary : Colors.onSurfaceVariant - break - } - - if (bgColor) { - button.fills = [solidPaint(bgColor)] - } else { - button.fills = [] - } - - if (disabled) { - button.opacity = 0.38 - } - - const iconNode = createIconPlaceholder(icon.charAt(0), 24, 'transparent', iconColor) - button.appendChild(iconNode) - - return button -} diff --git a/claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/generators/components/card.ts b/claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/generators/components/card.ts deleted file mode 100644 index dcb854ded..000000000 --- a/claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/generators/components/card.ts +++ /dev/null @@ -1,295 +0,0 @@ -/** - * Card Component Generator - * Creates Material Design 3 cards - */ - -import { Colors, Typography, Spacing, Radius } from '../../design-system/tokens' -import { solidPaint, setAutoLayout, createText, applyElevation } from '../../utils/helpers' - -export type CardVariant = 'elevated' | 'filled' | 'outlined' - -export interface CardOptions { - name?: string - variant?: CardVariant - width?: number | 'fill' - padding?: number - radius?: number -} - -/** - * Create a base card - */ -export function createCard(options: CardOptions = {}): FrameNode { - const { - name = 'Card', - variant = 'elevated', - width = 'fill', - padding = Spacing.md, - radius = Radius.md, - } = options - - const card = figma.createFrame() - card.name = name - card.cornerRadius = radius - - if (width === 'fill') { - card.layoutSizingHorizontal = 'FILL' - } else { - card.resize(width, 100) - } - - setAutoLayout(card, { - direction: 'VERTICAL', - padding, - gap: Spacing.sm, - }) - - // Apply variant styling - switch (variant) { - case 'elevated': - card.fills = [solidPaint(Colors.surfaceContainerLow)] - applyElevation(card, 1) - break - case 'filled': - card.fills = [solidPaint(Colors.surfaceContainerHighest)] - break - case 'outlined': - card.fills = [solidPaint(Colors.surface)] - card.strokes = [solidPaint(Colors.outlineVariant)] - card.strokeWeight = 1 - break - } - - return card -} - -/** - * Create a Net Worth card (specific to Mifos Dashboard) - */ -export async function createNetWorthCard(data: { - totalNetWorth: string - monthlyChange: string - savings: string - loans: string - shares: string -}): Promise { - const card = figma.createFrame() - card.name = 'NetWorthCard' - card.layoutSizingHorizontal = 'FILL' - card.cornerRadius = Radius.xl - card.fills = [solidPaint(Colors.primary)] - - setAutoLayout(card, { - direction: 'VERTICAL', - padding: { top: 20, right: 24, bottom: 20, left: 24 }, - gap: Spacing.md, - }) - - // Header row with title and eye icon - const header = figma.createFrame() - header.name = 'Header' - header.layoutSizingHorizontal = 'FILL' - header.fills = [] - setAutoLayout(header, { - direction: 'HORIZONTAL', - alignment: 'SPACE_BETWEEN', - crossAlignment: 'CENTER', - }) - - const titleText = await createText('TOTAL NET WORTH', { - ...Typography.labelMedium, - color: Colors.onPrimary, - }) - header.appendChild(titleText) - - // Eye icon placeholder - const eyeIcon = figma.createFrame() - eyeIcon.name = 'VisibilityToggle' - eyeIcon.resize(24, 24) - eyeIcon.fills = [] - header.appendChild(eyeIcon) - - card.appendChild(header) - - // Amount - const amountText = await createText(data.totalNetWorth, { - ...Typography.displayMedium, - color: Colors.onPrimary, - }) - amountText.name = 'Amount' - card.appendChild(amountText) - - // Monthly change - const changeText = await createText(`↑ ${data.monthlyChange} this month`, { - ...Typography.bodyMedium, - color: Colors.onPrimary, - }) - changeText.name = 'MonthlyChange' - changeText.opacity = 0.8 - card.appendChild(changeText) - - // Breakdown row - const breakdown = figma.createFrame() - breakdown.name = 'Breakdown' - breakdown.layoutSizingHorizontal = 'FILL' - breakdown.fills = [] - setAutoLayout(breakdown, { - direction: 'HORIZONTAL', - gap: Spacing.xl, - padding: { top: Spacing.sm, right: 0, bottom: 0, left: 0 }, - }) - - const categories = [ - { label: 'Savings', value: data.savings }, - { label: 'Loans', value: data.loans }, - { label: 'Shares', value: data.shares }, - ] - - for (const cat of categories) { - const item = figma.createFrame() - item.name = cat.label - item.fills = [] - setAutoLayout(item, { - direction: 'VERTICAL', - gap: 2, - }) - - const label = await createText(cat.label, { - ...Typography.labelSmall, - color: Colors.onPrimary, - }) - label.opacity = 0.7 - item.appendChild(label) - - const value = await createText(cat.value, { - ...Typography.titleMedium, - color: Colors.onPrimary, - }) - item.appendChild(value) - - breakdown.appendChild(item) - } - - card.appendChild(breakdown) - - return card -} - -/** - * Create an Account card - */ -export async function createAccountCard(data: { - icon: string - accountName: string - accountNumber: string - balance: string - status: string - subtitle?: string - progress?: number -}): Promise { - const card = createCard({ name: 'AccountCard', variant: 'elevated' }) - - // Main content row - const content = figma.createFrame() - content.name = 'Content' - content.layoutSizingHorizontal = 'FILL' - content.fills = [] - setAutoLayout(content, { - direction: 'HORIZONTAL', - gap: Spacing.md, - crossAlignment: 'CENTER', - }) - - // Icon - const icon = figma.createFrame() - icon.name = 'Icon' - icon.resize(40, 40) - icon.cornerRadius = 20 - icon.fills = [solidPaint(Colors.primaryContainer)] - icon.layoutMode = 'HORIZONTAL' - icon.primaryAxisAlignItems = 'CENTER' - icon.counterAxisAlignItems = 'CENTER' - content.appendChild(icon) - - // Info section - const info = figma.createFrame() - info.name = 'Info' - info.fills = [] - info.layoutSizingHorizontal = 'FILL' - setAutoLayout(info, { - direction: 'VERTICAL', - gap: 2, - }) - - const nameText = await createText(data.accountName, { - ...Typography.titleMedium, - color: Colors.onSurface, - }) - info.appendChild(nameText) - - const detailText = await createText(`${data.accountNumber} • ${data.status}`, { - ...Typography.bodySmall, - color: Colors.onSurfaceVariant, - }) - info.appendChild(detailText) - - if (data.subtitle) { - const subtitleText = await createText(data.subtitle, { - ...Typography.bodySmall, - color: Colors.onSurfaceVariant, - }) - info.appendChild(subtitleText) - } - - content.appendChild(info) - - // Balance - const balanceText = await createText(data.balance, { - ...Typography.titleMedium, - color: Colors.onSurface, - }) - content.appendChild(balanceText) - - card.appendChild(content) - - // Progress bar (for loans) - if (data.progress !== undefined) { - const progressContainer = figma.createFrame() - progressContainer.name = 'ProgressContainer' - progressContainer.layoutSizingHorizontal = 'FILL' - progressContainer.fills = [] - setAutoLayout(progressContainer, { - direction: 'VERTICAL', - gap: 4, - padding: { top: Spacing.sm, right: 0, bottom: 0, left: 0 }, - }) - - // Progress bar background - const progressBg = figma.createFrame() - progressBg.name = 'ProgressBackground' - progressBg.layoutSizingHorizontal = 'FILL' - progressBg.resize(100, 8) - progressBg.cornerRadius = 4 - progressBg.fills = [solidPaint(Colors.surfaceContainerHighest)] - - // Progress bar fill - const progressFill = figma.createFrame() - progressFill.name = 'ProgressFill' - progressFill.resize(data.progress, 8) - progressFill.cornerRadius = 4 - progressFill.fills = [solidPaint(Colors.primary)] - progressBg.appendChild(progressFill) - - progressContainer.appendChild(progressBg) - - const progressText = await createText(`${data.progress}% paid`, { - ...Typography.labelSmall, - color: Colors.onSurfaceVariant, - }) - progressContainer.appendChild(progressText) - - card.appendChild(progressContainer) - } - - return card -} diff --git a/claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/generators/components/input-field.ts b/claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/generators/components/input-field.ts deleted file mode 100644 index 387a54550..000000000 --- a/claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/generators/components/input-field.ts +++ /dev/null @@ -1,303 +0,0 @@ -/** - * Input Field Component Generator - * Creates Material Design 3 text fields - */ - -import { Colors, Typography, Spacing, Radius, ComponentSizes } from '../../design-system/tokens' -import { solidPaint, setAutoLayout, createText, createIconPlaceholder } from '../../utils/helpers' - -export type InputVariant = 'filled' | 'outlined' -export type InputState = 'default' | 'focused' | 'error' | 'disabled' - -export interface InputFieldOptions { - label: string - placeholder?: string - value?: string - variant?: InputVariant - state?: InputState - leadingIcon?: string - trailingIcon?: string - supportingText?: string - errorText?: string - prefix?: string - suffix?: string - characterCount?: { current: number; max: number } -} - -/** - * Create a text input field - */ -export async function createInputField(options: InputFieldOptions): Promise { - const { - label, - placeholder = '', - value = '', - variant = 'outlined', - state = 'default', - leadingIcon, - trailingIcon, - supportingText, - errorText, - prefix, - suffix, - characterCount, - } = options - - const container = figma.createFrame() - container.name = `InputField-${label}` - container.layoutSizingHorizontal = 'FILL' - container.fills = [] - - setAutoLayout(container, { - direction: 'VERTICAL', - gap: 4, - }) - - // Input container - const inputContainer = figma.createFrame() - inputContainer.name = 'InputContainer' - inputContainer.layoutSizingHorizontal = 'FILL' - inputContainer.resize(100, ComponentSizes.inputHeight) - - const isError = state === 'error' - const isFocused = state === 'focused' - const isDisabled = state === 'disabled' - - // Styling based on variant and state - if (variant === 'filled') { - inputContainer.fills = [solidPaint( - isDisabled ? Colors.onSurface : Colors.surfaceContainerHighest - )] - inputContainer.opacity = isDisabled ? 0.04 : 1 - inputContainer.cornerRadius = 4 - // Bottom border - const bottomBorder = figma.createFrame() - bottomBorder.name = 'BottomBorder' - bottomBorder.layoutSizingHorizontal = 'FILL' - bottomBorder.resize(100, isFocused ? 2 : 1) - bottomBorder.fills = [solidPaint( - isError ? Colors.error : isFocused ? Colors.primary : Colors.onSurfaceVariant - )] - bottomBorder.y = ComponentSizes.inputHeight - (isFocused ? 2 : 1) - inputContainer.appendChild(bottomBorder) - } else { - // Outlined - inputContainer.fills = [] - inputContainer.strokes = [solidPaint( - isError ? Colors.error : isFocused ? Colors.primary : Colors.outline - )] - inputContainer.strokeWeight = isFocused ? 2 : 1 - inputContainer.cornerRadius = 4 - } - - setAutoLayout(inputContainer, { - direction: 'HORIZONTAL', - padding: { top: 8, right: 16, bottom: 8, left: leadingIcon ? 12 : 16 }, - gap: 16, - crossAlignment: 'CENTER', - }) - - // Leading icon - if (leadingIcon) { - const icon = createIconPlaceholder( - leadingIcon.charAt(0), - 24, - 'transparent', - isDisabled ? Colors.onSurface : Colors.onSurfaceVariant - ) - if (isDisabled) icon.opacity = 0.38 - inputContainer.appendChild(icon) - } - - // Text content area - const textArea = figma.createFrame() - textArea.name = 'TextArea' - textArea.layoutSizingHorizontal = 'FILL' - textArea.fills = [] - - setAutoLayout(textArea, { - direction: 'VERTICAL', - gap: 0, - }) - - // Label (floating when has value or focused) - const hasContent = value.length > 0 || isFocused - const labelText = await createText(label, { - ...(hasContent ? Typography.bodySmall : Typography.bodyLarge), - color: isError ? Colors.error : - isFocused ? Colors.primary : - isDisabled ? Colors.onSurface : - Colors.onSurfaceVariant, - }) - if (isDisabled) labelText.opacity = 0.38 - textArea.appendChild(labelText) - - // Value or placeholder - if (hasContent && value) { - const valueRow = figma.createFrame() - valueRow.name = 'ValueRow' - valueRow.layoutSizingHorizontal = 'FILL' - valueRow.fills = [] - setAutoLayout(valueRow, { - direction: 'HORIZONTAL', - gap: 0, - }) - - if (prefix) { - const prefixText = await createText(prefix, { - ...Typography.bodyLarge, - color: Colors.onSurfaceVariant, - }) - valueRow.appendChild(prefixText) - } - - const valueText = await createText(value, { - ...Typography.bodyLarge, - color: isDisabled ? Colors.onSurface : Colors.onSurface, - }) - valueText.layoutSizingHorizontal = 'FILL' - if (isDisabled) valueText.opacity = 0.38 - valueRow.appendChild(valueText) - - if (suffix) { - const suffixText = await createText(suffix, { - ...Typography.bodyLarge, - color: Colors.onSurfaceVariant, - }) - valueRow.appendChild(suffixText) - } - - textArea.appendChild(valueRow) - } else if (!hasContent && placeholder) { - const placeholderText = await createText(placeholder, { - ...Typography.bodyLarge, - color: Colors.onSurfaceVariant, - }) - placeholderText.opacity = 0.6 - textArea.appendChild(placeholderText) - } - - inputContainer.appendChild(textArea) - - // Trailing icon - if (trailingIcon) { - const icon = createIconPlaceholder( - trailingIcon.charAt(0), - 24, - 'transparent', - isError ? Colors.error : - isDisabled ? Colors.onSurface : - Colors.onSurfaceVariant - ) - if (isDisabled) icon.opacity = 0.38 - inputContainer.appendChild(icon) - } - - container.appendChild(inputContainer) - - // Supporting/error text and character count - if (supportingText || errorText || characterCount) { - const bottomRow = figma.createFrame() - bottomRow.name = 'BottomRow' - bottomRow.layoutSizingHorizontal = 'FILL' - bottomRow.fills = [] - - setAutoLayout(bottomRow, { - direction: 'HORIZONTAL', - padding: { top: 0, right: 16, bottom: 0, left: 16 }, - alignment: 'SPACE_BETWEEN', - }) - - const supportText = errorText || supportingText - if (supportText) { - const text = await createText(supportText, { - ...Typography.bodySmall, - color: isError ? Colors.error : Colors.onSurfaceVariant, - }) - bottomRow.appendChild(text) - } - - if (characterCount) { - const countText = await createText(`${characterCount.current}/${characterCount.max}`, { - ...Typography.bodySmall, - color: Colors.onSurfaceVariant, - }) - bottomRow.appendChild(countText) - } - - container.appendChild(bottomRow) - } - - return container -} - -/** - * Create a search bar - */ -export async function createSearchBar(options: { - placeholder?: string - value?: string - showLeadingIcon?: boolean - showTrailingIcon?: boolean -}): Promise { - const { - placeholder = 'Search', - value = '', - showLeadingIcon = true, - showTrailingIcon = false, - } = options - - const searchBar = figma.createFrame() - searchBar.name = 'SearchBar' - searchBar.layoutSizingHorizontal = 'FILL' - searchBar.resize(100, 56) - searchBar.cornerRadius = 28 - searchBar.fills = [solidPaint(Colors.surfaceContainerHigh)] - - setAutoLayout(searchBar, { - direction: 'HORIZONTAL', - padding: { top: 8, right: 16, bottom: 8, left: 16 }, - gap: 16, - crossAlignment: 'CENTER', - }) - - // Leading icon (search) - if (showLeadingIcon) { - const searchIcon = createIconPlaceholder('🔍', 24, 'transparent', Colors.onSurface) - searchBar.appendChild(searchIcon) - } - - // Text - const textContent = value || placeholder - const textColor = value ? Colors.onSurface : Colors.onSurfaceVariant - const text = await createText(textContent, { - ...Typography.bodyLarge, - color: textColor, - }) - text.layoutSizingHorizontal = 'FILL' - searchBar.appendChild(text) - - // Trailing icon (clear or avatar) - if (showTrailingIcon || value) { - const clearIcon = createIconPlaceholder('✕', 24, 'transparent', Colors.onSurfaceVariant) - searchBar.appendChild(clearIcon) - } - - return searchBar -} - -/** - * Create a dropdown/select field - */ -export async function createDropdown(options: { - label: string - value?: string - placeholder?: string - variant?: InputVariant - state?: InputState -}): Promise { - return createInputField({ - ...options, - trailingIcon: '▼', - }) -} diff --git a/claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/generators/components/list-item.ts b/claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/generators/components/list-item.ts deleted file mode 100644 index 220b80232..000000000 --- a/claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/generators/components/list-item.ts +++ /dev/null @@ -1,305 +0,0 @@ -/** - * List Item Component Generator - * Creates Material Design 3 list items - */ - -import { Colors, Typography, Spacing, ComponentSizes } from '../../design-system/tokens' -import { solidPaint, setAutoLayout, createText, createIconPlaceholder, createDivider } from '../../utils/helpers' - -export interface ListItemOptions { - headline: string - supportingText?: string - overline?: string - leadingIcon?: string - leadingAvatar?: { initials: string; color?: string } - leadingImage?: boolean - trailingText?: string - trailingIcon?: string - trailingSwitch?: boolean - trailingCheckbox?: boolean - selected?: boolean - size?: 'one-line' | 'two-line' | 'three-line' - showDivider?: boolean -} - -/** - * Create a list item - */ -export async function createListItem(options: ListItemOptions): Promise { - const { - headline, - supportingText, - overline, - leadingIcon, - leadingAvatar, - leadingImage, - trailingText, - trailingIcon, - trailingSwitch, - trailingCheckbox, - selected = false, - size = supportingText ? 'two-line' : 'one-line', - showDivider = false, - } = options - - const heights = { - 'one-line': 56, - 'two-line': 72, - 'three-line': 88, - } - - const container = figma.createFrame() - container.name = 'ListItemContainer' - container.layoutSizingHorizontal = 'FILL' - container.fills = [] - setAutoLayout(container, { - direction: 'VERTICAL', - gap: 0, - }) - - const item = figma.createFrame() - item.name = `ListItem-${headline}` - item.layoutSizingHorizontal = 'FILL' - item.resize(100, heights[size]) - item.fills = selected ? [solidPaint(Colors.secondaryContainer)] : [] - - setAutoLayout(item, { - direction: 'HORIZONTAL', - padding: { top: 8, right: 16, bottom: 8, left: 16 }, - gap: 16, - crossAlignment: 'CENTER', - }) - - // Leading element - if (leadingIcon) { - const icon = createIconPlaceholder(leadingIcon.charAt(0), 24, 'transparent', Colors.onSurfaceVariant) - icon.name = 'LeadingIcon' - item.appendChild(icon) - } else if (leadingAvatar) { - const avatar = figma.createFrame() - avatar.name = 'Avatar' - avatar.resize(40, 40) - avatar.cornerRadius = 20 - avatar.fills = [solidPaint(leadingAvatar.color || Colors.primaryContainer)] - avatar.layoutMode = 'HORIZONTAL' - avatar.primaryAxisAlignItems = 'CENTER' - avatar.counterAxisAlignItems = 'CENTER' - - const initials = await createText(leadingAvatar.initials, { - ...Typography.titleMedium, - color: Colors.onPrimaryContainer, - }) - avatar.appendChild(initials) - item.appendChild(avatar) - } else if (leadingImage) { - const image = figma.createFrame() - image.name = 'LeadingImage' - image.resize(56, 56) - image.cornerRadius = 4 - image.fills = [solidPaint(Colors.surfaceContainerHighest)] - item.appendChild(image) - } - - // Content - const content = figma.createFrame() - content.name = 'Content' - content.layoutSizingHorizontal = 'FILL' - content.fills = [] - setAutoLayout(content, { - direction: 'VERTICAL', - gap: 0, - crossAlignment: 'MIN', - }) - - if (overline) { - const overlineText = await createText(overline, { - ...Typography.labelSmall, - color: Colors.onSurfaceVariant, - }) - content.appendChild(overlineText) - } - - const headlineText = await createText(headline, { - ...Typography.bodyLarge, - color: Colors.onSurface, - }) - content.appendChild(headlineText) - - if (supportingText) { - const supportText = await createText(supportingText, { - ...Typography.bodyMedium, - color: Colors.onSurfaceVariant, - }) - if (size === 'three-line') { - supportText.textAutoResize = 'HEIGHT' - supportText.layoutSizingHorizontal = 'FILL' - } - content.appendChild(supportText) - } - - item.appendChild(content) - - // Trailing element - if (trailingText) { - const trailText = await createText(trailingText, { - ...Typography.labelSmall, - color: Colors.onSurfaceVariant, - }) - item.appendChild(trailText) - } else if (trailingIcon) { - const icon = createIconPlaceholder(trailingIcon.charAt(0), 24, 'transparent', Colors.onSurfaceVariant) - icon.name = 'TrailingIcon' - item.appendChild(icon) - } else if (trailingSwitch) { - const switchNode = createSwitch(false) - item.appendChild(switchNode) - } else if (trailingCheckbox) { - const checkbox = createCheckbox(selected) - item.appendChild(checkbox) - } - - container.appendChild(item) - - if (showDivider) { - const dividerWrapper = figma.createFrame() - dividerWrapper.name = 'DividerWrapper' - dividerWrapper.layoutSizingHorizontal = 'FILL' - dividerWrapper.resize(100, 1) - dividerWrapper.fills = [] - setAutoLayout(dividerWrapper, { - direction: 'HORIZONTAL', - padding: { left: leadingIcon || leadingAvatar || leadingImage ? 72 : 16, right: 0 }, - }) - - const divider = createDivider(100, Colors.outlineVariant) - divider.layoutSizingHorizontal = 'FILL' - dividerWrapper.appendChild(divider) - container.appendChild(dividerWrapper) - } - - return container -} - -/** - * Create a switch component - */ -function createSwitch(checked: boolean): FrameNode { - const switchFrame = figma.createFrame() - switchFrame.name = 'Switch' - switchFrame.resize(52, 32) - switchFrame.cornerRadius = 16 - switchFrame.fills = [solidPaint(checked ? Colors.primary : Colors.surfaceContainerHighest)] - switchFrame.strokes = checked ? [] : [solidPaint(Colors.outline)] - switchFrame.strokeWeight = 2 - - // Thumb - const thumb = figma.createFrame() - thumb.name = 'Thumb' - thumb.resize(checked ? 24 : 16, checked ? 24 : 16) - thumb.cornerRadius = 12 - thumb.fills = [solidPaint(checked ? Colors.onPrimary : Colors.outline)] - thumb.x = checked ? 24 : 8 - thumb.y = checked ? 4 : 8 - - switchFrame.appendChild(thumb) - return switchFrame -} - -/** - * Create a checkbox component - */ -function createCheckbox(checked: boolean): FrameNode { - const checkbox = figma.createFrame() - checkbox.name = 'Checkbox' - checkbox.resize(24, 24) - checkbox.cornerRadius = 4 - - if (checked) { - checkbox.fills = [solidPaint(Colors.primary)] - // Checkmark would be added here with vector - } else { - checkbox.fills = [] - checkbox.strokes = [solidPaint(Colors.onSurfaceVariant)] - checkbox.strokeWeight = 2 - } - - return checkbox -} - -/** - * Create a transaction list item (specific to Mifos) - */ -export async function createTransactionItem(data: { - type: 'credit' | 'debit' - description: string - amount: string - accountName: string - time: string -}): Promise { - const item = figma.createFrame() - item.name = `Transaction-${data.description}` - item.layoutSizingHorizontal = 'FILL' - item.resize(100, 72) - item.fills = [] - - setAutoLayout(item, { - direction: 'HORIZONTAL', - padding: { top: 8, right: 16, bottom: 8, left: 16 }, - gap: 16, - crossAlignment: 'CENTER', - }) - - // Transaction icon - const icon = figma.createFrame() - icon.name = 'TransactionIcon' - icon.resize(40, 40) - icon.cornerRadius = 20 - icon.fills = [solidPaint(data.type === 'credit' ? Colors.successContainer : Colors.errorContainer)] - icon.layoutMode = 'HORIZONTAL' - icon.primaryAxisAlignItems = 'CENTER' - icon.counterAxisAlignItems = 'CENTER' - - const arrow = await createText(data.type === 'credit' ? '↓' : '↑', { - fontSize: 20, - fontWeight: 500, - lineHeight: 24, - color: data.type === 'credit' ? Colors.success : Colors.error, - }) - icon.appendChild(arrow) - item.appendChild(icon) - - // Content - const content = figma.createFrame() - content.name = 'Content' - content.layoutSizingHorizontal = 'FILL' - content.fills = [] - setAutoLayout(content, { - direction: 'VERTICAL', - gap: 2, - }) - - const descText = await createText(data.description, { - ...Typography.bodyLarge, - color: Colors.onSurface, - }) - content.appendChild(descText) - - const detailText = await createText(`${data.accountName} • ${data.time}`, { - ...Typography.bodySmall, - color: Colors.onSurfaceVariant, - }) - content.appendChild(detailText) - - item.appendChild(content) - - // Amount - const amountColor = data.type === 'credit' ? Colors.success : Colors.error - const prefix = data.type === 'credit' ? '+ ' : '- ' - const amountText = await createText(prefix + data.amount, { - ...Typography.titleMedium, - color: amountColor, - }) - item.appendChild(amountText) - - return item -} diff --git a/claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/generators/components/quick-actions.ts b/claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/generators/components/quick-actions.ts deleted file mode 100644 index 299176cf3..000000000 --- a/claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/generators/components/quick-actions.ts +++ /dev/null @@ -1,251 +0,0 @@ -/** - * Quick Actions Component Generator - * Creates horizontal action button rows - */ - -import { Colors, Typography, Spacing, Radius } from '../../design-system/tokens' -import { solidPaint, setAutoLayout, createText, createIconPlaceholder } from '../../utils/helpers' - -export interface QuickAction { - icon: string - label: string - color?: string -} - -export interface QuickActionsOptions { - actions: QuickAction[] - variant?: 'filled' | 'outlined' | 'tonal' - size?: 'small' | 'medium' | 'large' -} - -/** - * Create a quick actions row - */ -export async function createQuickActions(options: QuickActionsOptions): Promise { - const { - actions, - variant = 'tonal', - size = 'medium', - } = options - - const container = figma.createFrame() - container.name = 'QuickActions' - container.layoutSizingHorizontal = 'FILL' - container.fills = [] - - setAutoLayout(container, { - direction: 'HORIZONTAL', - gap: Spacing.sm, - alignment: 'CENTER', - }) - - for (const action of actions) { - const button = await createQuickActionButton(action, variant, size) - container.appendChild(button) - } - - return container -} - -/** - * Create a single quick action button - */ -async function createQuickActionButton( - action: QuickAction, - variant: 'filled' | 'outlined' | 'tonal', - size: 'small' | 'medium' | 'large' -): Promise { - const sizeConfig = { - small: { iconSize: 20, padding: 8, gap: 4, iconBg: 36 }, - medium: { iconSize: 24, padding: 12, gap: 8, iconBg: 48 }, - large: { iconSize: 28, padding: 16, gap: 8, iconBg: 56 }, - } - - const config = sizeConfig[size] - - const button = figma.createFrame() - button.name = `QuickAction-${action.label}` - button.layoutSizingHorizontal = 'FILL' - button.cornerRadius = Radius.lg - - // Variant styling - switch (variant) { - case 'filled': - button.fills = [solidPaint(action.color || Colors.primaryContainer)] - break - case 'outlined': - button.fills = [solidPaint(Colors.surface)] - button.strokes = [solidPaint(Colors.outlineVariant)] - button.strokeWeight = 1 - break - case 'tonal': - button.fills = [solidPaint(Colors.surfaceContainerHigh)] - break - } - - setAutoLayout(button, { - direction: 'VERTICAL', - padding: config.padding, - gap: config.gap, - alignment: 'CENTER', - crossAlignment: 'CENTER', - }) - - // Icon background - const iconBg = figma.createFrame() - iconBg.name = 'IconBackground' - iconBg.resize(config.iconBg, config.iconBg) - iconBg.cornerRadius = config.iconBg / 2 - iconBg.fills = [solidPaint(action.color || Colors.primaryContainer)] - - setAutoLayout(iconBg, { - direction: 'HORIZONTAL', - alignment: 'CENTER', - crossAlignment: 'CENTER', - }) - - const icon = createIconPlaceholder( - action.icon, - config.iconSize, - 'transparent', - Colors.onPrimaryContainer - ) - iconBg.appendChild(icon) - button.appendChild(iconBg) - - // Label - const label = await createText(action.label, { - ...Typography.labelMedium, - color: Colors.onSurface, - }) - label.textAlignHorizontal = 'CENTER' - button.appendChild(label) - - return button -} - -/** - * Create a Mifos-style service item grid - */ -export async function createServiceItemGrid(services: QuickAction[]): Promise { - const grid = figma.createFrame() - grid.name = 'ServiceGrid' - grid.layoutSizingHorizontal = 'FILL' - grid.fills = [] - - setAutoLayout(grid, { - direction: 'HORIZONTAL', - gap: Spacing.md, - padding: Spacing.md, - }) - - // Create rows of 4 items each - const itemsPerRow = 4 - let currentRow: FrameNode | null = null - - for (let i = 0; i < services.length; i++) { - if (i % itemsPerRow === 0) { - currentRow = figma.createFrame() - currentRow.name = `Row-${Math.floor(i / itemsPerRow)}` - currentRow.layoutSizingHorizontal = 'FILL' - currentRow.fills = [] - setAutoLayout(currentRow, { - direction: 'HORIZONTAL', - gap: Spacing.md, - alignment: 'SPACE_BETWEEN', - }) - grid.appendChild(currentRow) - } - - const service = services[i] - const item = await createServiceItem(service) - currentRow?.appendChild(item) - } - - return grid -} - -/** - * Create a single service item (icon + label) - */ -async function createServiceItem(service: QuickAction): Promise { - const item = figma.createFrame() - item.name = `Service-${service.label}` - item.resize(72, 80) - item.fills = [] - - setAutoLayout(item, { - direction: 'VERTICAL', - gap: 8, - alignment: 'CENTER', - crossAlignment: 'CENTER', - }) - - // Icon container - const iconContainer = figma.createFrame() - iconContainer.name = 'IconContainer' - iconContainer.resize(48, 48) - iconContainer.cornerRadius = 12 - iconContainer.fills = [solidPaint(service.color || Colors.primaryContainer)] - - setAutoLayout(iconContainer, { - direction: 'HORIZONTAL', - alignment: 'CENTER', - crossAlignment: 'CENTER', - }) - - const icon = createIconPlaceholder( - service.icon, - 24, - 'transparent', - Colors.onPrimaryContainer - ) - iconContainer.appendChild(icon) - item.appendChild(iconContainer) - - // Label - const label = await createText(service.label, { - ...Typography.labelSmall, - color: Colors.onSurface, - }) - label.textAlignHorizontal = 'CENTER' - item.appendChild(label) - - return item -} - -/** - * Create a section header with "View All" action - */ -export async function createSectionHeader( - title: string, - showViewAll: boolean = true -): Promise { - const header = figma.createFrame() - header.name = `SectionHeader-${title}` - header.layoutSizingHorizontal = 'FILL' - header.fills = [] - - setAutoLayout(header, { - direction: 'HORIZONTAL', - padding: { top: Spacing.md, right: 0, bottom: Spacing.sm, left: 0 }, - alignment: 'SPACE_BETWEEN', - crossAlignment: 'CENTER', - }) - - const titleText = await createText(title, { - ...Typography.titleMedium, - color: Colors.onSurface, - }) - header.appendChild(titleText) - - if (showViewAll) { - const viewAll = await createText('View All →', { - ...Typography.labelMedium, - color: Colors.primary, - }) - header.appendChild(viewAll) - } - - return header -} diff --git a/claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/generators/components/screen.ts b/claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/generators/components/screen.ts deleted file mode 100644 index cfe5e53bc..000000000 --- a/claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/generators/components/screen.ts +++ /dev/null @@ -1,121 +0,0 @@ -/** - * Screen Frame Generator - * Creates base mobile screen frames - */ - -import { Colors, Screens, ComponentSizes } from '../../design-system/tokens' -import { solidPaint, setAutoLayout } from '../../utils/helpers' - -export interface ScreenOptions { - name: string - size?: 'mobile' | 'mobileLarge' | 'tablet' - backgroundColor?: string - hasTopBar?: boolean - hasBottomNav?: boolean - statusBarStyle?: 'light' | 'dark' -} - -/** - * Create a mobile screen frame - */ -export function createScreen(options: ScreenOptions): FrameNode { - const { - name, - size = 'mobile', - backgroundColor = Colors.surface, - hasTopBar = true, - hasBottomNav = true, - statusBarStyle = 'dark', - } = options - - const dimensions = Screens[size] - const screen = figma.createFrame() - - screen.name = name - screen.resize(dimensions.width, dimensions.height) - screen.fills = [solidPaint(backgroundColor)] - - // Set up auto-layout - setAutoLayout(screen, { - direction: 'VERTICAL', - padding: 0, - gap: 0, - }) - - // Create status bar - const statusBar = createStatusBar(dimensions.width, statusBarStyle) - screen.appendChild(statusBar) - - // Create content area - const contentArea = figma.createFrame() - contentArea.name = 'Content' - contentArea.layoutSizingHorizontal = 'FILL' - contentArea.layoutSizingVertical = 'FILL' - contentArea.fills = [] - - setAutoLayout(contentArea, { - direction: 'VERTICAL', - padding: 0, - gap: 0, - }) - - screen.appendChild(contentArea) - - return screen -} - -/** - * Create status bar - */ -function createStatusBar(width: number, style: 'light' | 'dark'): FrameNode { - const statusBar = figma.createFrame() - statusBar.name = 'StatusBar' - statusBar.resize(width, 54) - statusBar.fills = [] - statusBar.layoutSizingHorizontal = 'FILL' - - setAutoLayout(statusBar, { - direction: 'HORIZONTAL', - padding: { top: 14, right: 24, bottom: 10, left: 24 }, - alignment: 'SPACE_BETWEEN', - crossAlignment: 'CENTER', - }) - - const textColor = style === 'dark' ? Colors.onSurface : Colors.onPrimary - - // Time placeholder - const time = figma.createFrame() - time.name = 'Time' - time.resize(54, 21) - time.fills = [] - statusBar.appendChild(time) - - // Icons placeholder (right side) - const icons = figma.createFrame() - icons.name = 'StatusIcons' - icons.resize(77, 17) - icons.fills = [] - statusBar.appendChild(icons) - - return statusBar -} - -/** - * Create scrollable content wrapper - */ -export function createScrollableContent(name: string = 'ScrollContent'): FrameNode { - const scroll = figma.createFrame() - scroll.name = name - scroll.fills = [] - scroll.layoutSizingHorizontal = 'FILL' - scroll.layoutSizingVertical = 'FILL' - scroll.clipsContent = true - - setAutoLayout(scroll, { - direction: 'VERTICAL', - padding: { top: 0, right: 16, bottom: 16, left: 16 }, - gap: 16, - }) - - return scroll -} diff --git a/claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/generators/components/top-bar.ts b/claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/generators/components/top-bar.ts deleted file mode 100644 index ef0edbaf7..000000000 --- a/claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/generators/components/top-bar.ts +++ /dev/null @@ -1,187 +0,0 @@ -/** - * Top Bar / App Bar Generator - * Creates Material Design 3 top app bars - */ - -import { Colors, Typography, Spacing, ComponentSizes, IconSizes } from '../../design-system/tokens' -import { solidPaint, setAutoLayout, createText, createIconPlaceholder } from '../../utils/helpers' - -export interface TopBarOptions { - title: string - variant?: 'small' | 'medium' | 'large' - showBackButton?: boolean - backgroundColor?: string - actions?: Array<{ icon: string; label: string }> -} - -/** - * Create a top app bar - */ -export async function createTopBar(options: TopBarOptions): Promise { - const { - title, - variant = 'small', - showBackButton = false, - backgroundColor = Colors.surface, - actions = [], - } = options - - const topBar = figma.createFrame() - topBar.name = 'TopBar' - topBar.layoutSizingHorizontal = 'FILL' - topBar.fills = [solidPaint(backgroundColor)] - - if (variant === 'small') { - topBar.resize(393, ComponentSizes.topBarHeight) - - setAutoLayout(topBar, { - direction: 'HORIZONTAL', - padding: { top: 8, right: 4, bottom: 8, left: 4 }, - gap: 4, - crossAlignment: 'CENTER', - }) - - // Navigation icon (back button or menu) - if (showBackButton) { - const backIcon = createIconPlaceholder('←', IconSizes.md, 'transparent', Colors.onSurface) - backIcon.name = 'BackButton' - const wrapper = figma.createFrame() - wrapper.name = 'IconButton' - wrapper.resize(48, 48) - wrapper.fills = [] - wrapper.layoutMode = 'HORIZONTAL' - wrapper.primaryAxisAlignItems = 'CENTER' - wrapper.counterAxisAlignItems = 'CENTER' - wrapper.appendChild(backIcon) - topBar.appendChild(wrapper) - } - - // Title - const titleText = await createText(title, { - ...Typography.titleLarge, - color: Colors.onSurface, - }) - titleText.name = 'Title' - titleText.layoutSizingHorizontal = 'FILL' - if (showBackButton) { - titleText.textAlignHorizontal = 'LEFT' - } else { - // Add leading padding if no back button - const spacer = figma.createFrame() - spacer.name = 'Spacer' - spacer.resize(16, 1) - spacer.fills = [] - topBar.insertChild(0, spacer) - } - topBar.appendChild(titleText) - - // Action icons - for (const action of actions) { - const actionIcon = createIconPlaceholder( - action.icon.charAt(0).toUpperCase(), - IconSizes.md, - 'transparent', - Colors.onSurfaceVariant - ) - const wrapper = figma.createFrame() - wrapper.name = `Action-${action.label}` - wrapper.resize(48, 48) - wrapper.fills = [] - wrapper.layoutMode = 'HORIZONTAL' - wrapper.primaryAxisAlignItems = 'CENTER' - wrapper.counterAxisAlignItems = 'CENTER' - wrapper.appendChild(actionIcon) - topBar.appendChild(wrapper) - } - } else if (variant === 'medium' || variant === 'large') { - const height = variant === 'medium' ? 112 : 152 - topBar.resize(393, height) - - setAutoLayout(topBar, { - direction: 'VERTICAL', - padding: 0, - gap: 0, - }) - - // Top row with navigation and actions - const topRow = figma.createFrame() - topRow.name = 'TopRow' - topRow.layoutSizingHorizontal = 'FILL' - topRow.resize(393, 64) - topRow.fills = [] - - setAutoLayout(topRow, { - direction: 'HORIZONTAL', - padding: { top: 8, right: 4, bottom: 8, left: 4 }, - gap: 4, - crossAlignment: 'CENTER', - }) - - if (showBackButton) { - const backIcon = createIconPlaceholder('←', IconSizes.md, 'transparent', Colors.onSurface) - const wrapper = figma.createFrame() - wrapper.name = 'BackButton' - wrapper.resize(48, 48) - wrapper.fills = [] - wrapper.layoutMode = 'HORIZONTAL' - wrapper.primaryAxisAlignItems = 'CENTER' - wrapper.counterAxisAlignItems = 'CENTER' - wrapper.appendChild(backIcon) - topRow.appendChild(wrapper) - } - - // Spacer - const spacer = figma.createFrame() - spacer.name = 'Spacer' - spacer.fills = [] - spacer.layoutSizingHorizontal = 'FILL' - spacer.resize(100, 1) - topRow.appendChild(spacer) - - // Actions - for (const action of actions) { - const actionIcon = createIconPlaceholder( - action.icon.charAt(0).toUpperCase(), - IconSizes.md, - 'transparent', - Colors.onSurfaceVariant - ) - const wrapper = figma.createFrame() - wrapper.name = `Action-${action.label}` - wrapper.resize(48, 48) - wrapper.fills = [] - wrapper.layoutMode = 'HORIZONTAL' - wrapper.primaryAxisAlignItems = 'CENTER' - wrapper.counterAxisAlignItems = 'CENTER' - wrapper.appendChild(actionIcon) - topRow.appendChild(wrapper) - } - - topBar.appendChild(topRow) - - // Title row - const titleRow = figma.createFrame() - titleRow.name = 'TitleRow' - titleRow.layoutSizingHorizontal = 'FILL' - titleRow.layoutSizingVertical = 'FILL' - titleRow.fills = [] - - setAutoLayout(titleRow, { - direction: 'HORIZONTAL', - padding: { top: 0, right: 16, bottom: 28, left: 16 }, - crossAlignment: 'MAX', - }) - - const typography = variant === 'medium' ? Typography.headlineSmall : Typography.headlineMedium - const titleText = await createText(title, { - ...typography, - color: Colors.onSurface, - }) - titleText.name = 'Title' - titleRow.appendChild(titleText) - - topBar.appendChild(titleRow) - } - - return topBar -} diff --git a/claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/generators/index.ts b/claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/generators/index.ts deleted file mode 100644 index f214c92e6..000000000 --- a/claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/generators/index.ts +++ /dev/null @@ -1,17 +0,0 @@ -/** - * Component Generators Index - */ - -// Screen components -export * from './components/screen' -export * from './components/top-bar' -export * from './components/bottom-nav' - -// Content components -export * from './components/card' -export * from './components/list-item' -export * from './components/quick-actions' - -// Input components -export * from './components/input-field' -export * from './components/button' diff --git a/claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/plugin.ts b/claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/plugin.ts deleted file mode 100644 index 3f6ff0367..000000000 --- a/claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/plugin.ts +++ /dev/null @@ -1,726 +0,0 @@ -/** - * Mifos Mockup Generator - Figma Plugin - * - * Generates Material Design 3 mockups for Mifos Mobile app - * from feature specifications. - */ - -import { Colors, Typography, Spacing, Radius, Screens, ComponentSizes } from './design-system/tokens' -import { loadFonts, solidPaint, setAutoLayout, createText } from './utils/helpers' -import { - createScreen, - createScrollableContent, - createTopBar, - createBottomNav, - createCard, - createNetWorthCard, - createAccountCard, - createListItem, - createTransactionItem, - createQuickActions, - createSectionHeader, - createButton, - createInputField, -} from './generators' - -// ============================================================================ -// PLUGIN ENTRY POINT -// ============================================================================ - -figma.showUI(__html__, { visible: false }) - -// Handle menu commands -figma.on('run', async ({ command }) => { - try { - await loadFonts() - - switch (command) { - // Screen generators - case 'generate-dashboard': - await generateDashboardScreen() - break - case 'generate-auth': - await generateAuthScreens() - break - case 'generate-accounts': - await generateAccountsScreen() - break - - // Component generators - case 'component-net-worth-card': - await generateNetWorthCardComponent() - break - case 'component-account-card': - await generateAccountCardComponent() - break - case 'component-transaction-item': - await generateTransactionItemComponent() - break - case 'component-quick-actions': - await generateQuickActionsComponent() - break - case 'component-top-bar': - await generateTopBarComponent() - break - case 'component-bottom-nav': - await generateBottomNavComponent() - break - case 'component-input-field': - await generateInputFieldComponent() - break - case 'component-button': - await generateButtonComponent() - break - - // Design system generators - case 'ds-colors': - await generateColorPalette() - break - case 'ds-typography': - await generateTypographyScale() - break - case 'ds-spacing': - await generateSpacingGrid() - break - - default: - figma.notify('Unknown command: ' + command) - } - - figma.closePlugin() - } catch (error) { - figma.notify('Error: ' + (error as Error).message) - figma.closePlugin() - } -}) - -// ============================================================================ -// SCREEN GENERATORS -// ============================================================================ - -async function generateDashboardScreen(): Promise { - const screen = createScreen({ - name: 'Dashboard', - hasTopBar: true, - hasBottomNav: true, - }) - - const content = screen.findChild(n => n.name === 'Content') as FrameNode - if (!content) return - - // Top bar - const topBar = await createTopBar({ - title: 'Dashboard', - showBackButton: false, - actions: [ - { icon: '🔔', label: 'Notifications' }, - { icon: '⚙️', label: 'Settings' }, - ], - }) - content.appendChild(topBar) - - // Scrollable content - const scrollContent = createScrollableContent() - - // Greeting - const greeting = await createText('Good morning, John', { - ...Typography.headlineSmall, - color: Colors.onSurface, - }) - scrollContent.appendChild(greeting) - - const date = await createText('December 28, 2025', { - ...Typography.bodyMedium, - color: Colors.onSurfaceVariant, - }) - scrollContent.appendChild(date) - - // Net Worth Card - const netWorthCard = await createNetWorthCard({ - totalNetWorth: '$ 45,750.00', - monthlyChange: '+$1,250.00', - savings: '$52,500', - loans: '-$6,750', - shares: '$0', - }) - scrollContent.appendChild(netWorthCard) - - // Quick Actions - const quickActionsHeader = await createSectionHeader('QUICK ACTIONS', false) - scrollContent.appendChild(quickActionsHeader) - - const quickActions = await createQuickActions({ - actions: [ - { icon: '💸', label: 'Transfer' }, - { icon: '📥', label: 'Deposit' }, - { icon: '📊', label: 'Invest' }, - { icon: '👥', label: 'Beneficiary' }, - ], - variant: 'tonal', - }) - scrollContent.appendChild(quickActions) - - // My Accounts Section - const accountsHeader = await createSectionHeader('MY ACCOUNTS', true) - scrollContent.appendChild(accountsHeader) - - const savingsCard = await createAccountCard({ - icon: '💰', - accountName: 'Primary Savings', - accountNumber: 'SA-0001234567', - balance: '$ 35,000.00', - status: 'Active', - subtitle: 'Interest Rate: 4.5% p.a.', - }) - scrollContent.appendChild(savingsCard) - - const emergencyCard = await createAccountCard({ - icon: '💰', - accountName: 'Emergency Fund', - accountNumber: 'SA-0001234568', - balance: '$ 17,500.00', - status: 'Active', - subtitle: 'Interest Rate: 3.2% p.a.', - }) - scrollContent.appendChild(emergencyCard) - - const loanCard = await createAccountCard({ - icon: '🏦', - accountName: 'Personal Loan', - accountNumber: 'LA-0009876543', - balance: '-$ 6,750.00', - status: 'Active', - progress: 80, - }) - scrollContent.appendChild(loanCard) - - // Recent Activity Section - const activityHeader = await createSectionHeader('RECENT ACTIVITY', true) - scrollContent.appendChild(activityHeader) - - const todayLabel = await createText('Today', { - ...Typography.labelMedium, - color: Colors.onSurfaceVariant, - }) - scrollContent.appendChild(todayLabel) - - const tx1 = await createTransactionItem({ - type: 'credit', - description: 'Salary Credit', - amount: '$4,500.00', - accountName: 'Primary Savings', - time: '09:30 AM', - }) - scrollContent.appendChild(tx1) - - const tx2 = await createTransactionItem({ - type: 'debit', - description: 'Bill Payment', - amount: '$150.00', - accountName: 'Primary Savings', - time: '08:15 AM', - }) - scrollContent.appendChild(tx2) - - content.appendChild(scrollContent) - - // Bottom Navigation - const bottomNav = await createBottomNav({ - items: [ - { icon: '🏠', label: 'Home' }, - { icon: '💳', label: 'Accounts' }, - { icon: '💸', label: 'Transfer' }, - { icon: '📊', label: 'Activity' }, - { icon: '👤', label: 'Profile' }, - ], - selectedIndex: 0, - }) - content.appendChild(bottomNav) - - // Position on canvas - screen.x = figma.viewport.center.x - screen.width / 2 - screen.y = figma.viewport.center.y - screen.height / 2 - - figma.currentPage.appendChild(screen) - figma.currentPage.selection = [screen] - figma.viewport.scrollAndZoomIntoView([screen]) - - figma.notify('Dashboard screen generated!') -} - -async function generateAuthScreens(): Promise { - // Login Screen - const loginScreen = createScreen({ name: 'Login' }) - const loginContent = loginScreen.findChild(n => n.name === 'Content') as FrameNode - - if (loginContent) { - const scrollContent = createScrollableContent() - - // Logo placeholder - const logo = figma.createFrame() - logo.name = 'Logo' - logo.resize(120, 120) - logo.cornerRadius = 60 - logo.fills = [solidPaint(Colors.primaryContainer)] - scrollContent.appendChild(logo) - - // Title - const title = await createText('Welcome Back', { - ...Typography.headlineMedium, - color: Colors.onSurface, - }) - scrollContent.appendChild(title) - - const subtitle = await createText('Sign in to continue', { - ...Typography.bodyLarge, - color: Colors.onSurfaceVariant, - }) - scrollContent.appendChild(subtitle) - - // Input fields - const usernameInput = await createInputField({ - label: 'Username', - placeholder: 'Enter your username', - variant: 'outlined', - }) - scrollContent.appendChild(usernameInput) - - const passwordInput = await createInputField({ - label: 'Password', - placeholder: 'Enter your password', - variant: 'outlined', - trailingIcon: '👁', - }) - scrollContent.appendChild(passwordInput) - - // Forgot password - const forgotPassword = await createText('Forgot Password?', { - ...Typography.labelLarge, - color: Colors.primary, - }) - scrollContent.appendChild(forgotPassword) - - // Sign in button - const signInButton = await createButton({ - label: 'SIGN IN', - variant: 'filled', - fullWidth: true, - }) - scrollContent.appendChild(signInButton) - - // Sign up link - const signUpText = await createText("Don't have an account? Sign Up", { - ...Typography.bodyMedium, - color: Colors.onSurfaceVariant, - }) - scrollContent.appendChild(signUpText) - - loginContent.appendChild(scrollContent) - } - - loginScreen.x = figma.viewport.center.x - loginScreen.width / 2 - loginScreen.y = figma.viewport.center.y - loginScreen.height / 2 - - figma.currentPage.appendChild(loginScreen) - figma.currentPage.selection = [loginScreen] - figma.viewport.scrollAndZoomIntoView([loginScreen]) - - figma.notify('Auth screens generated!') -} - -async function generateAccountsScreen(): Promise { - const screen = createScreen({ name: 'Accounts' }) - const content = screen.findChild(n => n.name === 'Content') as FrameNode - - if (content) { - const topBar = await createTopBar({ - title: 'My Accounts', - showBackButton: true, - }) - content.appendChild(topBar) - - const scrollContent = createScrollableContent() - - // Filter tabs (placeholder) - const tabs = figma.createFrame() - tabs.name = 'FilterTabs' - tabs.layoutSizingHorizontal = 'FILL' - tabs.resize(100, 48) - tabs.fills = [] - scrollContent.appendChild(tabs) - - // Account cards - const accounts = [ - { icon: '💰', name: 'Primary Savings', number: 'SA-001', balance: '$35,000.00', status: 'Active' }, - { icon: '💰', name: 'Emergency Fund', number: 'SA-002', balance: '$17,500.00', status: 'Active' }, - { icon: '🏦', name: 'Personal Loan', number: 'LA-001', balance: '-$6,750.00', status: 'Active', progress: 80 }, - ] - - for (const account of accounts) { - const card = await createAccountCard({ - icon: account.icon, - accountName: account.name, - accountNumber: account.number, - balance: account.balance, - status: account.status, - progress: account.progress, - }) - scrollContent.appendChild(card) - } - - content.appendChild(scrollContent) - - const bottomNav = await createBottomNav({ - items: [ - { icon: '🏠', label: 'Home' }, - { icon: '💳', label: 'Accounts' }, - { icon: '💸', label: 'Transfer' }, - { icon: '📊', label: 'Activity' }, - { icon: '👤', label: 'Profile' }, - ], - selectedIndex: 1, - }) - content.appendChild(bottomNav) - } - - screen.x = figma.viewport.center.x - screen.width / 2 - screen.y = figma.viewport.center.y - screen.height / 2 - - figma.currentPage.appendChild(screen) - figma.currentPage.selection = [screen] - figma.viewport.scrollAndZoomIntoView([screen]) - - figma.notify('Accounts screen generated!') -} - -// ============================================================================ -// COMPONENT GENERATORS -// ============================================================================ - -async function generateNetWorthCardComponent(): Promise { - const card = await createNetWorthCard({ - totalNetWorth: '$ 45,750.00', - monthlyChange: '+$1,250.00', - savings: '$52,500', - loans: '-$6,750', - shares: '$0', - }) - - card.x = figma.viewport.center.x - 180 - card.y = figma.viewport.center.y - 100 - - figma.currentPage.appendChild(card) - figma.currentPage.selection = [card] - figma.viewport.scrollAndZoomIntoView([card]) - - figma.notify('Net Worth Card generated!') -} - -async function generateAccountCardComponent(): Promise { - const card = await createAccountCard({ - icon: '💰', - accountName: 'Primary Savings', - accountNumber: 'SA-0001234567', - balance: '$ 35,000.00', - status: 'Active', - subtitle: 'Interest Rate: 4.5% p.a.', - }) - - card.x = figma.viewport.center.x - 180 - card.y = figma.viewport.center.y - 50 - - figma.currentPage.appendChild(card) - figma.currentPage.selection = [card] - figma.viewport.scrollAndZoomIntoView([card]) - - figma.notify('Account Card generated!') -} - -async function generateTransactionItemComponent(): Promise { - const item = await createTransactionItem({ - type: 'credit', - description: 'Salary Credit', - amount: '$4,500.00', - accountName: 'Primary Savings', - time: '09:30 AM', - }) - - item.x = figma.viewport.center.x - 180 - item.y = figma.viewport.center.y - 36 - - figma.currentPage.appendChild(item) - figma.currentPage.selection = [item] - figma.viewport.scrollAndZoomIntoView([item]) - - figma.notify('Transaction Item generated!') -} - -async function generateQuickActionsComponent(): Promise { - const actions = await createQuickActions({ - actions: [ - { icon: '💸', label: 'Transfer' }, - { icon: '📥', label: 'Deposit' }, - { icon: '📊', label: 'Invest' }, - { icon: '👥', label: 'Beneficiary' }, - ], - }) - - actions.x = figma.viewport.center.x - 180 - actions.y = figma.viewport.center.y - 50 - - figma.currentPage.appendChild(actions) - figma.currentPage.selection = [actions] - figma.viewport.scrollAndZoomIntoView([actions]) - - figma.notify('Quick Actions generated!') -} - -async function generateTopBarComponent(): Promise { - const topBar = await createTopBar({ - title: 'Dashboard', - showBackButton: false, - actions: [ - { icon: '🔔', label: 'Notifications' }, - { icon: '⚙️', label: 'Settings' }, - ], - }) - - topBar.x = figma.viewport.center.x - 196 - topBar.y = figma.viewport.center.y - 32 - - figma.currentPage.appendChild(topBar) - figma.currentPage.selection = [topBar] - figma.viewport.scrollAndZoomIntoView([topBar]) - - figma.notify('Top Bar generated!') -} - -async function generateBottomNavComponent(): Promise { - const bottomNav = await createBottomNav({ - items: [ - { icon: '🏠', label: 'Home' }, - { icon: '💳', label: 'Accounts' }, - { icon: '💸', label: 'Transfer' }, - { icon: '📊', label: 'Activity' }, - { icon: '👤', label: 'Profile' }, - ], - selectedIndex: 0, - }) - - bottomNav.x = figma.viewport.center.x - 196 - bottomNav.y = figma.viewport.center.y - 40 - - figma.currentPage.appendChild(bottomNav) - figma.currentPage.selection = [bottomNav] - figma.viewport.scrollAndZoomIntoView([bottomNav]) - - figma.notify('Bottom Navigation generated!') -} - -async function generateInputFieldComponent(): Promise { - const input = await createInputField({ - label: 'Email', - placeholder: 'Enter your email', - variant: 'outlined', - }) - - input.x = figma.viewport.center.x - 180 - input.y = figma.viewport.center.y - 28 - - figma.currentPage.appendChild(input) - figma.currentPage.selection = [input] - figma.viewport.scrollAndZoomIntoView([input]) - - figma.notify('Input Field generated!') -} - -async function generateButtonComponent(): Promise { - const container = figma.createFrame() - container.name = 'ButtonVariants' - container.fills = [] - setAutoLayout(container, { - direction: 'VERTICAL', - gap: 16, - }) - - const variants: Array<'filled' | 'outlined' | 'text' | 'elevated' | 'tonal'> = [ - 'filled', 'outlined', 'text', 'elevated', 'tonal' - ] - - for (const variant of variants) { - const button = await createButton({ - label: variant.toUpperCase(), - variant, - }) - container.appendChild(button) - } - - container.x = figma.viewport.center.x - 80 - container.y = figma.viewport.center.y - 140 - - figma.currentPage.appendChild(container) - figma.currentPage.selection = [container] - figma.viewport.scrollAndZoomIntoView([container]) - - figma.notify('Button variants generated!') -} - -// ============================================================================ -// DESIGN SYSTEM GENERATORS -// ============================================================================ - -async function generateColorPalette(): Promise { - const palette = figma.createFrame() - palette.name = 'Color Palette' - palette.fills = [solidPaint(Colors.surface)] - - setAutoLayout(palette, { - direction: 'VERTICAL', - padding: 24, - gap: 16, - }) - - const title = await createText('Color Palette', { - ...Typography.headlineMedium, - color: Colors.onSurface, - }) - palette.appendChild(title) - - const colorGroups = [ - { name: 'Primary', colors: [Colors.primary, Colors.onPrimary, Colors.primaryContainer, Colors.onPrimaryContainer] }, - { name: 'Secondary', colors: [Colors.secondary, Colors.onSecondary, Colors.secondaryContainer, Colors.onSecondaryContainer] }, - { name: 'Surface', colors: [Colors.surface, Colors.onSurface, Colors.surfaceVariant, Colors.onSurfaceVariant] }, - { name: 'Error', colors: [Colors.error, Colors.onError, Colors.errorContainer, Colors.onErrorContainer] }, - ] - - for (const group of colorGroups) { - const row = figma.createFrame() - row.name = group.name - row.fills = [] - setAutoLayout(row, { - direction: 'HORIZONTAL', - gap: 8, - }) - - for (const color of group.colors) { - const swatch = figma.createFrame() - swatch.name = color - swatch.resize(60, 60) - swatch.cornerRadius = 8 - swatch.fills = [solidPaint(color)] - swatch.strokes = [solidPaint(Colors.outline)] - swatch.strokeWeight = 1 - row.appendChild(swatch) - } - - palette.appendChild(row) - } - - palette.x = figma.viewport.center.x - palette.width / 2 - palette.y = figma.viewport.center.y - palette.height / 2 - - figma.currentPage.appendChild(palette) - figma.currentPage.selection = [palette] - figma.viewport.scrollAndZoomIntoView([palette]) - - figma.notify('Color Palette generated!') -} - -async function generateTypographyScale(): Promise { - const scale = figma.createFrame() - scale.name = 'Typography Scale' - scale.fills = [solidPaint(Colors.surface)] - - setAutoLayout(scale, { - direction: 'VERTICAL', - padding: 24, - gap: 16, - }) - - const styles = [ - { name: 'Display Large', style: Typography.displayLarge }, - { name: 'Headline Medium', style: Typography.headlineMedium }, - { name: 'Title Large', style: Typography.titleLarge }, - { name: 'Body Large', style: Typography.bodyLarge }, - { name: 'Label Medium', style: Typography.labelMedium }, - ] - - for (const item of styles) { - const text = await createText(`${item.name} - ${item.style.fontSize}px`, { - ...item.style, - color: Colors.onSurface, - }) - scale.appendChild(text) - } - - scale.x = figma.viewport.center.x - scale.width / 2 - scale.y = figma.viewport.center.y - scale.height / 2 - - figma.currentPage.appendChild(scale) - figma.currentPage.selection = [scale] - figma.viewport.scrollAndZoomIntoView([scale]) - - figma.notify('Typography Scale generated!') -} - -async function generateSpacingGrid(): Promise { - const grid = figma.createFrame() - grid.name = 'Spacing Grid' - grid.fills = [solidPaint(Colors.surface)] - - setAutoLayout(grid, { - direction: 'VERTICAL', - padding: 24, - gap: 16, - }) - - const title = await createText('Spacing Scale', { - ...Typography.headlineMedium, - color: Colors.onSurface, - }) - grid.appendChild(title) - - const spacings = [ - { name: 'xs', value: Spacing.xs }, - { name: 'sm', value: Spacing.sm }, - { name: 'md', value: Spacing.md }, - { name: 'lg', value: Spacing.lg }, - { name: 'xl', value: Spacing.xl }, - ] - - for (const spacing of spacings) { - const row = figma.createFrame() - row.name = spacing.name - row.fills = [] - setAutoLayout(row, { - direction: 'HORIZONTAL', - gap: 16, - crossAlignment: 'CENTER', - }) - - const label = await createText(`${spacing.name} (${spacing.value}px)`, { - ...Typography.bodyMedium, - color: Colors.onSurface, - }) - label.resize(100, 20) - row.appendChild(label) - - const bar = figma.createFrame() - bar.name = 'Bar' - bar.resize(spacing.value * 4, 24) - bar.cornerRadius = 4 - bar.fills = [solidPaint(Colors.primary)] - row.appendChild(bar) - - grid.appendChild(row) - } - - grid.x = figma.viewport.center.x - grid.width / 2 - grid.y = figma.viewport.center.y - grid.height / 2 - - figma.currentPage.appendChild(grid) - figma.currentPage.selection = [grid] - figma.viewport.scrollAndZoomIntoView([grid]) - - figma.notify('Spacing Grid generated!') -} diff --git a/claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/utils/helpers.ts b/claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/utils/helpers.ts deleted file mode 100644 index 9a9545acf..000000000 --- a/claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/src/utils/helpers.ts +++ /dev/null @@ -1,322 +0,0 @@ -/** - * Utility functions for Figma plugin - */ - -// ============================================================================ -// COLOR UTILITIES -// ============================================================================ - -/** - * Convert hex color to Figma RGB (0-1 range) - */ -export function hexToRgb(hex: string): RGB { - const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex) - if (!result) { - return { r: 0, g: 0, b: 0 } - } - return { - r: parseInt(result[1], 16) / 255, - g: parseInt(result[2], 16) / 255, - b: parseInt(result[3], 16) / 255, - } -} - -/** - * Convert hex color with alpha to Figma RGBA - */ -export function hexToRgba(hex: string, alpha: number = 1): RGBA { - const rgb = hexToRgb(hex) - return { ...rgb, a: alpha } -} - -/** - * Create a solid paint from hex color - */ -export function solidPaint(hex: string, opacity: number = 1): SolidPaint { - return { - type: 'SOLID', - color: hexToRgb(hex), - opacity, - } -} - -/** - * Create a gradient paint - */ -export function gradientPaint( - colors: string[], - positions: number[], - angle: number = 180 -): GradientPaint { - const radians = (angle * Math.PI) / 180 - const gradientStops: ColorStop[] = colors.map((color, i) => ({ - color: hexToRgba(color), - position: positions[i] ?? i / (colors.length - 1), - })) - - return { - type: 'GRADIENT_LINEAR', - gradientStops, - gradientTransform: [ - [Math.cos(radians), Math.sin(radians), 0], - [-Math.sin(radians), Math.cos(radians), 0], - ], - } -} - -// ============================================================================ -// TEXT UTILITIES -// ============================================================================ - -/** - * Load fonts required for the design system - */ -export async function loadFonts(): Promise { - await Promise.all([ - figma.loadFontAsync({ family: 'Inter', style: 'Regular' }), - figma.loadFontAsync({ family: 'Inter', style: 'Medium' }), - figma.loadFontAsync({ family: 'Inter', style: 'Semi Bold' }), - figma.loadFontAsync({ family: 'Inter', style: 'Bold' }), - ]) -} - -/** - * Create a text node with styling - */ -export async function createText( - content: string, - style: { - fontSize: number - fontWeight: number - lineHeight: number - letterSpacing?: number - color?: string - } -): Promise { - const text = figma.createText() - - // Load appropriate font weight - let fontStyle = 'Regular' - if (style.fontWeight >= 700) fontStyle = 'Bold' - else if (style.fontWeight >= 600) fontStyle = 'Semi Bold' - else if (style.fontWeight >= 500) fontStyle = 'Medium' - - await figma.loadFontAsync({ family: 'Inter', style: fontStyle }) - - text.fontName = { family: 'Inter', style: fontStyle } - text.characters = content - text.fontSize = style.fontSize - text.lineHeight = { value: style.lineHeight, unit: 'PIXELS' } - - if (style.letterSpacing) { - text.letterSpacing = { value: style.letterSpacing, unit: 'PIXELS' } - } - - if (style.color) { - text.fills = [solidPaint(style.color)] - } - - return text -} - -// ============================================================================ -// LAYOUT UTILITIES -// ============================================================================ - -/** - * Configure auto-layout on a frame - */ -export function setAutoLayout( - frame: FrameNode, - options: { - direction: 'HORIZONTAL' | 'VERTICAL' - padding?: number | { top?: number; right?: number; bottom?: number; left?: number } - gap?: number - alignment?: 'MIN' | 'CENTER' | 'MAX' | 'SPACE_BETWEEN' - crossAlignment?: 'MIN' | 'CENTER' | 'MAX' - } -): void { - frame.layoutMode = options.direction - - if (typeof options.padding === 'number') { - frame.paddingTop = options.padding - frame.paddingRight = options.padding - frame.paddingBottom = options.padding - frame.paddingLeft = options.padding - } else if (options.padding) { - frame.paddingTop = options.padding.top ?? 0 - frame.paddingRight = options.padding.right ?? 0 - frame.paddingBottom = options.padding.bottom ?? 0 - frame.paddingLeft = options.padding.left ?? 0 - } - - if (options.gap !== undefined) { - frame.itemSpacing = options.gap - } - - if (options.alignment) { - frame.primaryAxisAlignItems = options.alignment - } - - if (options.crossAlignment) { - frame.counterAxisAlignItems = options.crossAlignment - } -} - -/** - * Set sizing mode for auto-layout children - */ -export function setSizing( - node: SceneNode & LayoutMixin, - options: { - horizontal?: 'FIXED' | 'HUG' | 'FILL' - vertical?: 'FIXED' | 'HUG' | 'FILL' - } -): void { - if (options.horizontal) { - node.layoutSizingHorizontal = options.horizontal - } - if (options.vertical) { - node.layoutSizingVertical = options.vertical - } -} - -// ============================================================================ -// SHADOW UTILITIES -// ============================================================================ - -/** - * Apply elevation shadow to a node - */ -export function applyElevation( - node: BlendMixin, - level: 0 | 1 | 2 | 3 | 4 | 5 -): void { - const elevations: Record = { - 0: [], - 1: [{ - type: 'DROP_SHADOW', - color: { r: 0, g: 0, b: 0, a: 0.15 }, - offset: { x: 0, y: 1 }, - radius: 3, - spread: 1, - visible: true, - blendMode: 'NORMAL', - }], - 2: [{ - type: 'DROP_SHADOW', - color: { r: 0, g: 0, b: 0, a: 0.15 }, - offset: { x: 0, y: 2 }, - radius: 6, - spread: 2, - visible: true, - blendMode: 'NORMAL', - }], - 3: [{ - type: 'DROP_SHADOW', - color: { r: 0, g: 0, b: 0, a: 0.2 }, - offset: { x: 0, y: 4 }, - radius: 8, - spread: 3, - visible: true, - blendMode: 'NORMAL', - }], - 4: [{ - type: 'DROP_SHADOW', - color: { r: 0, g: 0, b: 0, a: 0.2 }, - offset: { x: 0, y: 6 }, - radius: 10, - spread: 4, - visible: true, - blendMode: 'NORMAL', - }], - 5: [{ - type: 'DROP_SHADOW', - color: { r: 0, g: 0, b: 0, a: 0.25 }, - offset: { x: 0, y: 8 }, - radius: 12, - spread: 6, - visible: true, - blendMode: 'NORMAL', - }], - } - - node.effects = elevations[level] -} - -// ============================================================================ -// ICON UTILITIES -// ============================================================================ - -/** - * Create a placeholder icon (circle with letter) - */ -export function createIconPlaceholder( - letter: string, - size: number, - bgColor: string, - textColor: string -): FrameNode { - const frame = figma.createFrame() - frame.name = `Icon-${letter}` - frame.resize(size, size) - frame.cornerRadius = size / 2 - frame.fills = [solidPaint(bgColor)] - - // We'll add text in the main plugin after fonts are loaded - frame.layoutMode = 'HORIZONTAL' - frame.primaryAxisAlignItems = 'CENTER' - frame.counterAxisAlignItems = 'CENTER' - - return frame -} - -// ============================================================================ -// FRAME UTILITIES -// ============================================================================ - -/** - * Create a basic frame with common settings - */ -export function createFrame( - name: string, - options?: { - width?: number - height?: number - fill?: string - radius?: number - } -): FrameNode { - const frame = figma.createFrame() - frame.name = name - - if (options?.width && options?.height) { - frame.resize(options.width, options.height) - } - - if (options?.fill) { - frame.fills = [solidPaint(options.fill)] - } else { - frame.fills = [] - } - - if (options?.radius) { - frame.cornerRadius = options.radius - } - - return frame -} - -/** - * Create a divider line - */ -export function createDivider( - width: number, - color: string = '#CAC4D0' -): RectangleNode { - const divider = figma.createRectangle() - divider.name = 'Divider' - divider.resize(width, 1) - divider.fills = [solidPaint(color)] - return divider -} diff --git a/claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/tsconfig.json b/claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/tsconfig.json deleted file mode 100644 index 49b4d4594..000000000 --- a/claude-product-cycle/design-spec-layer/mockup-tools/figma-plugin/tsconfig.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "compilerOptions": { - "target": "ES2020", - "lib": ["ES2020"], - "module": "ESNext", - "moduleResolution": "bundler", - "strict": true, - "skipLibCheck": true, - "esModuleInterop": true, - "allowSyntheticDefaultImports": true, - "forceConsistentCasingInFileNames": true, - "resolveJsonModule": true, - "declaration": false, - "declarationMap": false, - "noEmit": true, - "typeRoots": [ - "./node_modules/@types", - "./node_modules/@figma" - ] - }, - "include": ["src/**/*.ts"], - "exclude": ["node_modules", "dist"] -} diff --git a/claude-product-cycle/design-spec-layer/mockup-tools/templates/ai-prompt.md b/claude-product-cycle/design-spec-layer/mockup-tools/templates/ai-prompt.md deleted file mode 100644 index 1c839dad8..000000000 --- a/claude-product-cycle/design-spec-layer/mockup-tools/templates/ai-prompt.md +++ /dev/null @@ -1,205 +0,0 @@ -# AI Mockup Prompt Template - -> Use this template to generate prompts for AI design tools - ---- - -## Base Prompt Structure - -``` -Create a [SCREEN_TYPE] mobile screen with Material Design 3: - -**App Context:** -[APP_NAME] - [APP_DESCRIPTION] - -**Screen Purpose:** -[SCREEN_PURPOSE] - -**Header Section:** -- Top App Bar with [TITLE] -- [NAVIGATION_ICON] on left (back arrow / menu) -- [ACTION_ICONS] on right (e.g., notifications, settings) - -**Main Content:** -[For each section from SPEC.md] -- [SECTION_NAME]: [SECTION_DESCRIPTION] - - [COMPONENT_1] - - [COMPONENT_2] - -**Footer Section:** -- [BOTTOM_NAV / FAB / BUTTONS] - -**Style Guidelines:** -- Color scheme: Purple primary (#6750A4), white surface (#FFFBFE) -- Typography: Inter font family, Material Design 3 type scale -- Spacing: 16px standard padding, 8px component gaps -- Corner radius: 12-28px for cards, full round for FABs -- Platform: Android mobile app -- Screen size: 393 x 852 pixels (iPhone 14 Pro equivalent) - -**Interaction States:** -- Default, Hover/Press, Disabled states for buttons -- Selected/Unselected for navigation items -- Loading skeleton for data areas -``` - ---- - -## Tool-Specific Formats - -### Google Stitch - -Google Stitch works best with detailed, structured prompts: - -``` -Create a mobile banking dashboard with Material Design 3: - -Screen shows user's financial overview with: -1. Greeting section with user name and date -2. Net worth card showing total balance ($45,750) with breakdown: - - Savings: $52,500 - - Loans: -$6,750 - - Shares: $0 -3. Quick action buttons: Transfer, Deposit, Invest, Beneficiary -4. Account cards list showing savings and loan accounts -5. Recent transactions with credit/debit indicators -6. Bottom navigation with 5 tabs - -Style: Clean, modern Material Design 3 -Colors: Purple (#6750A4) primary on white (#FFFBFE) surface -Typography: Inter font, clear hierarchy -Platform: Android mobile, 393x852px -``` - -### Uizard - -Uizard prefers concise, key-feature focused prompts: - -``` -Mobile banking app dashboard: -- Header with greeting and notification icon -- Large card showing net worth with savings/loans breakdown -- 4 quick action buttons in a row -- List of account cards with balances -- Recent transactions section -- Bottom tab navigation - -Style: Modern Material Design, purple accent -``` - -### Visily - -Visily works well with component-focused prompts: - -``` -Design a financial dashboard mobile screen: - -Components needed: -□ Top bar: "Dashboard" title, notification bell, settings gear -□ Hero card: Net worth display with eye toggle for privacy -□ Action row: 4 circular icon buttons with labels -□ Card list: Account cards with icon, name, balance, status -□ Transaction list: Grouped by date, credit/debit indicators -□ Bottom nav: 5 tabs with icons and labels - -Material Design 3 styling -Purple primary color (#6750A4) -``` - ---- - -## Component Prompt Templates - -### Net Worth Card -``` -Create a hero card component showing: -- "TOTAL NET WORTH" label at top -- Large currency amount in white text -- Eye icon for privacy toggle -- Monthly change indicator (e.g., "+$1,250 this month") -- Three-column breakdown: Savings | Loans | Shares -- Purple gradient background (#6750A4) -- Rounded corners (28px radius) -``` - -### Account Card -``` -Create an account card showing: -- Left: Circular icon with colored background -- Center: Account name (bold), account number, status badge -- Right: Balance amount -- Optional: Progress bar for loans -- White background with subtle shadow -- 12px corner radius -``` - -### Transaction Item -``` -Create a transaction list item showing: -- Left: Circular icon (green arrow down for credit, red arrow up for debit) -- Center: Transaction description, account name, time -- Right: Amount with + or - prefix, colored by type -- 72px height, no background -``` - -### Quick Action Button -``` -Create a quick action button showing: -- Circular icon container (48px) with primary container color -- Icon in center -- Label text below -- Vertical stack layout -- Tappable area extends to label -``` - ---- - -## Screen-Specific Prompts - -### Dashboard Screen -``` -Create a banking app dashboard: -- Top bar: "Dashboard" title, notification and settings icons -- Greeting: "Good morning, [Name]" with date -- Net worth card: Large balance display with breakdown -- Quick actions: 4 buttons (Transfer, Deposit, Invest, Beneficiary) -- "My Accounts" section: 2-3 account cards -- "Recent Activity": Grouped transaction list -- Bottom nav: Home, Accounts, Transfer, Activity, Profile -``` - -### Login Screen -``` -Create a login screen: -- Centered logo placeholder (120px circle) -- "Welcome Back" headline -- "Sign in to continue" subtitle -- Username text field (outlined) -- Password field with eye toggle -- "Forgot Password?" link -- "SIGN IN" primary button (full width) -- "Don't have an account? Sign Up" link at bottom -- No bottom navigation -``` - -### Account Detail Screen -``` -Create an account detail screen: -- Top bar with back arrow and account name -- Hero section: Large balance, account number, status -- Action buttons row: Transfer, Withdraw, Statement, QR Pay -- Account details card: Product name, interest rate, totals -- Transaction list with date headers -- Charges section at bottom -``` - ---- - -## Tips for Better Results - -1. **Be Specific**: Include exact colors, sizes, and spacing values -2. **Use Hierarchy**: List items in visual order (top to bottom) -3. **Reference Standards**: Mention "Material Design 3" for consistency -4. **Include Context**: Explain what the app does and who uses it -5. **Iterate**: Generate multiple times and combine best elements -6. **Export Early**: Get design into Figma for refinement diff --git a/claude-product-cycle/feature-layer/LAYER_GUIDE.md b/claude-product-cycle/feature-layer/LAYER_GUIDE.md deleted file mode 100644 index 7f00f6c02..000000000 --- a/claude-product-cycle/feature-layer/LAYER_GUIDE.md +++ /dev/null @@ -1,422 +0,0 @@ -# Feature Layer Guide - -> **Location**: `feature/` -> **Command**: `/feature [Feature]` - -## Table of Contents -1. [Overview](#overview) -2. [Creating New Feature](#creating-new-feature) -3. [Directory Structure](#directory-structure) -4. [Component Organization](#component-organization) -5. [Build Commands](#build-commands) -6. [Cross-Update Rules](#cross-update-rules) -7. [Instructions Reference](#instructions-reference) - ---- - -## Overview - -The feature layer contains UI modules following MVI (Model-View-Intent) architecture: - -``` -┌─────────────────────────────────────────────────────────────────────┐ -│ FEATURE LAYER (feature/) │ -├─────────────────────────────────────────────────────────────────────┤ -│ │ -│ feature/[name]/ │ -│ ├── [screen]/ → Screen package │ -│ │ ├── [Screen]Screen.kt → Compose UI │ -│ │ ├── [Screen]ViewModel.kt → MVI (State, Event, Action) │ -│ │ ├── [Screen].kt → State/Event/Action definitions │ -│ │ └── components/ → Screen-specific components │ -│ ├── components/ → Feature-shared components │ -│ ├── navigation/ → Navigation routes │ -│ └── di/[Name]Module.kt → Koin registration │ -│ │ -└─────────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Creating New Feature - -### Step 1: Create Module Directory - -```bash -mkdir -p feature/[name]/src/commonMain/kotlin/org/mifos/mobile/feature/[name] -mkdir -p feature/[name]/src/commonMain/composeResources/values -``` - -### Step 2: Create build.gradle.kts - -```kotlin -// feature/[name]/build.gradle.kts - -plugins { - alias(libs.plugins.mifos.cmp.feature) -} - -android { - namespace = "org.mifos.mobile.feature.[name]" -} - -dependencies { - implementation(projects.core.data) - implementation(projects.core.ui) - implementation(projects.core.designsystem) -} -``` - -### Step 3: Register in settings.gradle.kts - -```kotlin -// settings.gradle.kts -include(":feature:[name]") -``` - -### Step 4: Create Directory Structure - -``` -feature/[name]/src/commonMain/kotlin/org/mifos/mobile/feature/[name]/ -├── [screen]/ -│ ├── [Screen]Screen.kt -│ ├── [Screen]ViewModel.kt -│ ├── [Screen].kt -│ └── components/ -├── components/ -├── navigation/ -│ └── [Feature]Navigation.kt -└── di/ - └── [Feature]Module.kt -``` - -### Step 5: Create strings.xml - -```xml - - - - Feature Title - -``` - -### New Feature Checklist - -- [ ] Module directory created -- [ ] build.gradle.kts configured -- [ ] Registered in settings.gradle.kts -- [ ] Screen package created with Screen, ViewModel, State/Event/Action -- [ ] Navigation setup in navigation/ -- [ ] DI module created in di/ -- [ ] DI module registered in KoinModules.kt -- [ ] strings.xml created for string resources -- [ ] Build passes: `./gradlew :feature:[name]:build` - ---- - -## Directory Structure - -### Single-Screen Feature - -For features with one main screen: - -``` -feature/[name]/ -├── [Feature]Screen.kt -├── [Feature]ViewModel.kt -├── [Feature].kt # State/Event/Action -├── components/ -│ └── [Feature]Component.kt -├── navigation/ -│ └── [Feature]Navigation.kt -└── di/ - └── [Feature]Module.kt -``` - -**Example - Notification:** -``` -feature/notification/ -├── NotificationScreen.kt -├── NotificationViewModel.kt -├── Notification.kt -├── components/ -│ └── NotificationItem.kt -├── navigation/ -│ └── NotificationNavigation.kt -└── di/ - └── NotificationModule.kt -``` - -### Multi-Screen Feature - -For features with multiple screens: - -``` -feature/[name]/ -├── [screen1]/ -│ ├── [Screen1]Screen.kt -│ ├── [Screen1]ViewModel.kt -│ ├── [Screen1].kt -│ └── components/ -│ └── [Screen1]Header.kt -├── [screen2]/ -│ ├── [Screen2]Screen.kt -│ ├── [Screen2]ViewModel.kt -│ ├── [Screen2].kt -│ └── components/ -│ └── [Screen2]Form.kt -├── components/ # Shared across screens -│ └── [Feature]SharedComponent.kt -├── navigation/ -│ └── [Feature]Navigation.kt -└── di/ - └── [Feature]Module.kt -``` - -**Example - Auth:** -``` -feature/auth/ -├── login/ -│ ├── LoginScreen.kt -│ ├── LoginViewModel.kt -│ ├── Login.kt -│ └── components/ -│ ├── LoginHeader.kt -│ └── LoginForm.kt -├── registration/ -│ ├── RegistrationScreen.kt -│ ├── RegistrationViewModel.kt -│ ├── Registration.kt -│ └── components/ -│ └── RegistrationSteps.kt -├── otpAuthentication/ -│ ├── OtpAuthenticationScreen.kt -│ ├── OtpAuthenticationViewModel.kt -│ └── components/ -│ └── OtpInput.kt -├── components/ # Shared auth components -│ ├── AuthHeader.kt -│ └── AuthFooter.kt -├── navigation/ -│ └── AuthNavigation.kt -└── di/ - └── AuthModule.kt -``` - ---- - -## Component Organization - -### Component Hierarchy - -``` -┌─────────────────────────────────────────────────────────────┐ -│ Screen-Specific: feature/[name]/[screen]/components/ │ -│ → Used only in that screen │ -├─────────────────────────────────────────────────────────────┤ -│ Feature-Shared: feature/[name]/components/ │ -│ → Used across screens in same feature │ -├─────────────────────────────────────────────────────────────┤ -│ App-Wide: core/ui/component/ │ -│ → Used in 2+ features │ -├─────────────────────────────────────────────────────────────┤ -│ Design System: core/designsystem/component/ │ -│ → UI primitives (Button, TextField, Card) │ -├─────────────────────────────────────────────────────────────┤ -│ Foundation: core-base/designsystem/ │ -│ → Theme, layouts (KptTheme, KptGrid) │ -└─────────────────────────────────────────────────────────────┘ -``` - -### Component Placement Decision - -``` -Creating a new component? -│ -├── Used only in this screen? -│ └── feature/[name]/[screen]/components/ -│ -├── Used across screens in same feature? -│ └── feature/[name]/components/ -│ -├── Used in 2+ features? -│ └── core/ui/component/ -│ -├── UI primitive (Button, TextField variant)? -│ └── core/designsystem/component/ -│ -└── Theme/Layout component? - └── core-base/designsystem/ -``` - -### Examples - -| Component | Location | Reason | -|-----------|----------|--------| -| `LoginForm` | `feature/auth/login/components/` | Only in login screen | -| `AuthHeader` | `feature/auth/components/` | Shared across auth screens | -| `MifosAccountCard` | `core/ui/component/` | Used in accounts, home | -| `MifosButton` | `core/designsystem/component/` | UI primitive | -| `KptTheme` | `core-base/designsystem/` | Foundation | - ---- - -## Build Commands - -```bash -# Build specific feature -./gradlew :feature:[name]:build - -# Build all features -./gradlew build - -# Lint check -./gradlew :feature:[name]:detekt - -# Format code -./gradlew spotlessApply - -# Run tests -./gradlew :feature:[name]:test -``` - ---- - -## Cross-Update Rules - -### String Resources - -**NEVER use hardcoded strings.** All user-facing strings MUST be in `strings.xml`: - -```kotlin -// WRONG - Hardcoded string -Text(text = "Welcome to Mifos Mobile") - -// WRONG - String.format() -Text(text = String.format("Hello, %s!", userName)) - -// CORRECT - Use stringResource -Text(text = stringResource(Res.string.welcome_message)) - -// CORRECT - With arguments -Text(text = stringResource(Res.string.hello_user, userName)) -``` - -**strings.xml:** -```xml - - - Welcome to Mifos Mobile - Hello, %1$s! - -``` - -### Status Updates - -After implementing a feature, update: -1. `feature-layer/LAYER_STATUS.md` - Feature layer status -2. `design-spec-layer/features/[feature]/STATUS.md` - Feature design status - -### Component Creation - -**ALWAYS check existing components before creating new ones.** - -See [core-layer/COMPONENTS.md](../core-layer/COMPONENTS.md) for complete registry. - -**Lookup Strategy:** -``` -Step 1: Check Static Registry (Fast) - → Read core-layer/COMPONENTS.md tables - -Step 2: If Not Found → Dynamic Search - → grep -r "@Composable" core/ | grep -i "[type]" - -Step 3: If Found Dynamically → Update Registry - → Add to core-layer/COMPONENTS.md static tables -``` - -**Naming Convention:** -| Location | Prefix | Example | -|----------|--------|---------| -| core-base/designsystem | `Kpt*` | `KptGrid`, `KptShimmerLoadingBox` | -| core/designsystem | `Mifos*` | `MifosButton`, `MifosTextField` | -| core/ui | `Mifos*` | `MifosAccountCard`, `MifosErrorComponent` | -| feature/[name]/components | `[Feature]*` | `AuthHeader` | -| feature/[name]/[screen]/components | `[Screen]*` | `LoginForm` | - -**Update Rules:** -| Scenario | Action | -|----------|--------| -| Found in static registry | No update needed | -| Found via dynamic search | ADD to static registry | -| Created new component in core/ | ADD to static registry | -| Created feature component | No update needed | - ---- - -## Instructions Reference - -For detailed implementation patterns, see: - -| Pattern | File | When to Use | -|---------|------|-------------| -| **ViewModel** | [instructions/VIEWMODEL.md](instructions/VIEWMODEL.md) | Creating/updating ViewModel, State, Event, Action | -| **Compose Screen** | [instructions/COMPOSE.md](instructions/COMPOSE.md) | Creating screens, components, UI patterns | -| **Navigation** | [instructions/NAVIGATION.md](instructions/NAVIGATION.md) | Setting up routes, NavGraph | -| **Dependency Injection** | [instructions/DI.md](instructions/DI.md) | Koin module registration | -| **Updating Feature** | [instructions/UPDATING_FEATURE.md](instructions/UPDATING_FEATURE.md) | v2.0 UI redesign, improving existing features | - -### Quick Pattern Reference - -**ViewModel Pattern:** -```kotlin -internal class [Feature]ViewModel( - private val repository: [Feature]Repository, -) : BaseViewModel<[Feature]State, [Feature]Event, [Feature]Action>( - initialState = [Feature]State() -) { - override fun handleAction(action: [Feature]Action) { ... } -} -``` - -**Screen Pattern:** -```kotlin -@Composable -internal fun [Feature]Screen( - onNavigateBack: () -> Unit, - viewModel: [Feature]ViewModel = koinViewModel(), -) { - val state by viewModel.stateFlow.collectAsStateWithLifecycle() - EventsEffect(viewModel.eventFlow) { event -> ... } - [Feature]Content(state = state, onAction = viewModel::trySendAction) -} -``` - -**Navigation Pattern:** -```kotlin -@Serializable -data object [Feature]Route - -fun NavGraphBuilder.[feature]Screen(onNavigateBack: () -> Unit) { - composableWithStayTransitions<[Feature]Route> { - [Feature]Screen(onNavigateBack = onNavigateBack) - } -} -``` - -**DI Pattern:** -```kotlin -val [Feature]Module = module { - viewModelOf(::[Feature]ViewModel) -} -``` - ---- - -## Related Files - -- Design Specs: `claude-product-cycle/design-spec-layer/features/[feature]/SPEC.md` -- Mockups: `claude-product-cycle/design-spec-layer/features/[feature]/MOCKUP.md` -- Patterns: `claude-product-cycle/design-spec-layer/_shared/PATTERNS.md` -- Navigation: `cmp-navigation/src/commonMain/kotlin/cmp/navigation/` -- Feature Status: `claude-product-cycle/feature-layer/LAYER_STATUS.md` diff --git a/claude-product-cycle/feature-layer/LAYER_STATUS.md b/claude-product-cycle/feature-layer/LAYER_STATUS.md deleted file mode 100644 index 8485c3c0e..000000000 --- a/claude-product-cycle/feature-layer/LAYER_STATUS.md +++ /dev/null @@ -1,300 +0,0 @@ -# Feature Layer - Status & Memory - -> **Layer**: UI Modules (ViewModel + Screen + Components) -> **Command**: `/feature [Feature]` -> **Location**: `feature/` - ---- - -## Current Status - -| Component | Count | Status | -|-----------|-------|--------| -| Feature Modules | 22 | Complete | -| ViewModels | 30+ | Complete | -| Screens | 35+ | Complete | -| Components | 50+ | Complete | -| DI Modules | 16 | Complete | - ---- - -## Layer Structure - -``` -feature/ -├── accounts/ # Account listing and transactions -├── auth/ # Login, registration, password recovery -├── beneficiary/ # Beneficiary management -├── client-charge/ # Client charges -├── guarantor/ # Guarantor management -├── home/ # Home dashboard -├── loan-account/ # Loan account details -├── loan-application/ # Loan application flow -├── location/ # Location/branch finder -├── notification/ # Notifications -├── onboarding-language/ # Language selection onboarding -├── passcode/ # Passcode setup/verification -├── qr/ # QR code generation/scanning -├── recent-transaction/ # Recent transactions -├── savings-account/ # Savings account details -├── savings-application/ # Savings application flow -├── settings/ # App settings -├── share-account/ # Share account details -├── share-application/ # Share application flow -├── status/ # Status screens -├── third-party-transfer/ # Third-party transfers -└── transfer-process/ # Transfer flow -``` - ---- - -## Feature Modules Status - -### Phase 1: Core MVP (6 modules) - -| Module | Screen | ViewModel | Components | DI | Status | -|--------|--------|-----------|------------|-----|--------| -| auth | LoginScreen, RegistrationScreen, OtpScreen, RecoverPasswordScreen, SetPasswordScreen, UploadIdScreen | LoginViewModel, OtpAuthenticationViewModel, RecoverPasswordViewModel, SetPasswordViewModel, UploadIdViewmodel, RegistrationViewModel | 5+ | AuthModule | Complete | -| home | HomeScreen | HomeViewModel | 2+ | HomeModule | Complete | -| accounts | AccountsScreen, TransactionScreen | AccountsViewModel, TransactionViewModel | 3+ | AccountsModule | Complete | -| recent-transaction | RecentTransactionScreen | RecentTransactionViewModel | 2+ | RecentTransactionModule | Complete | -| notification | NotificationScreen | NotificationViewModel | 2+ | NotificationModule | Complete | -| settings | SettingsScreen, LanguageScreen, ThemeScreen | SettingsViewModel, LanguageViewModel, ChangeThemeViewModel | 3+ | SettingsModule | Complete | - -### Phase 2: Account Management (5 modules) - -| Module | Screen | ViewModel | Components | DI | Status | -|--------|--------|-----------|------------|-----|--------| -| savings-account | SavingsAccountScreen, SavingsWithdrawScreen | SavingsAccountViewModel, AccountWithdrawViewModel | 3+ | SavingsAccountModule | Complete | -| loan-account | LoanAccountScreen | LoanAccountViewModel | 3+ | LoanModule | Complete | -| share-account | ShareAccountScreen | ShareAccountViewModel | 2+ | ShareAccountModule | Complete | -| beneficiary | BeneficiaryListScreen, BeneficiaryApplicationScreen, BeneficiaryDetailScreen | BeneficiaryListViewModel, BeneficiaryApplicationViewModel, BeneficiaryDetailViewModel | 3+ | BeneficiaryModule | Complete | -| transfer-process | TransferProcessScreen, MakeTransferScreen | TransferProcessViewModel, MakeTransferViewModel | 3+ | TransferProcessModule | Complete | - -### Phase 3: Applications (3 modules) - -| Module | Screen | ViewModel | Components | DI | Status | -|--------|--------|-----------|------------|-----|--------| -| loan-application | LoanApplicationScreen, ConfirmDetailsScreen, LoanProductDetailsScreen, SelectLoanTypeScreen, UploadDocsScreen | LoanApplyViewModel, ConfirmDetailsViewModel, LoanProductDetailsViewModel, SelectLoanTypeViewModel, UploadDocsViewmodel | 5+ | LoanApplicationModule | Complete | -| savings-application | SavingsApplicationScreen, FillApplicationScreen | SavingsApplyViewModel, FillApplicationViewModel | 3+ | SavingsApplicationModule | Complete | -| share-application | ShareApplicationScreen | ShareApplicationViewModel | 2+ | ShareApplicationModule | Complete | - -### Phase 4: Utilities (5 modules) - -| Module | Screen | ViewModel | Components | DI | Status | -|--------|--------|-----------|------------|-----|--------| -| passcode | PasscodeScreen, VerifyPasscodeScreen | PasscodeViewModel, VerifyPasscodeViewModel | 2+ | PasscodeModule | Complete | -| qr | QrCodeReaderScreen, QrCodeDisplayScreen, QrCodeImportScreen | QrCodeReaderViewModel, QrCodeDisplayViewModel, QrCodeImportViewModel | 3+ | QrModule | Complete | -| location | LocationScreen | - | 2+ | - | Complete | -| guarantor | GuarantorListScreen, GuarantorDetailScreen, AddGuarantorScreen | GuarantorListViewModel, GuarantorDetailViewModel, AddGuarantorViewModel | 3+ | GuarantorModule | Complete | -| client-charge | ClientChargeScreen | ClientChargeViewModel | 2+ | ChargeModule | Complete | - -### Additional Modules - -| Module | Screen | ViewModel | Purpose | -|--------|--------|-----------|---------| -| onboarding-language | SetOnboardingLanguageScreen | SetOnboardingLanguageViewModel | Language selection | -| status | StatusScreen | StatusViewModel | Status display | -| third-party-transfer | ThirdPartyTransferScreen | ThirdPartyTransferViewModel | Third-party transfers | - ---- - -## Module Details - -### home/ -``` -home/ -├── HomeScreen.kt -├── HomeViewModel.kt -├── ServiceItem.kt -├── components/ -│ └── BottomSheetContent.kt -├── navigation/ -│ └── HomeNavigation.kt -└── di/ - └── HomeModule.kt -``` - -### auth/ -``` -auth/ -├── login/ -│ ├── LoginScreen.kt -│ ├── LoginViewModel.kt -│ └── LogInNavigation.kt -├── registration/ -│ ├── RegistrationScreen.kt -│ ├── RegistrationViewModel.kt -│ └── RegistrationNavigation.kt -├── otpAuthentication/ -│ ├── OtpAuthenticationScreen.kt -│ ├── OtpAuthenticationViewModel.kt -│ └── OtpAuthenticationNavigation.kt -├── recoverPassword/ -│ ├── RecoverPasswordScreen.kt -│ ├── RecoverPasswordViewModel.kt -│ └── RecoverPasswordNavigation.kt -├── setNewPassword/ -│ ├── SetPasswordScreen.kt -│ ├── SetPasswordViewModel.kt -│ └── SetPasswordNavigation.kt -├── uploadId/ -│ ├── UploadIdScreen.kt -│ ├── UploadIdViewmodel.kt -│ └── UploadIdNavigation.kt -├── navigation/ -│ └── AuthenticationNavGraph.kt -└── di/ - └── AuthModule.kt -``` - -### accounts/ -``` -accounts/ -├── accounts/ -│ ├── AccountsScreen.kt -│ ├── AccountsViewModel.kt -│ └── AccountNavigation.kt -├── accountTransactions/ -│ ├── TransactionScreen.kt -│ ├── TransactionViewModel.kt -│ └── AccountsTransactionNavigation.kt -├── component/ -│ └── FilterSection.kt -├── model/ -│ └── CheckboxStatus.kt -├── utils/ -│ └── StatusUtils.kt -└── di/ - └── AccountsModule.kt -``` - -### beneficiary/ -``` -beneficiary/ -├── beneficiaryList/ -│ ├── BeneficiaryListScreen.kt -│ └── BeneficiaryListViewModel.kt -├── beneficiaryApplication/ -│ ├── BeneficiaryApplicationScreen.kt -│ ├── BeneficiaryApplicationViewModel.kt -│ └── BeneficiaryApplicationContent.kt -├── beneficiaryDetail/ -│ ├── BeneficiaryDetailScreen.kt -│ └── BeneficiaryDetailViewModel.kt -├── navigation/ -│ └── BeneficiaryNavGraph.kt -└── di/ - └── BeneficiaryModule.kt -``` - ---- - -## MVI Pattern Reference - -```kotlin -// State - UI data (immutable) -@Immutable -data class [Feature]State( - val isLoading: Boolean = false, - val items: List = emptyList(), - val uiState: [Feature]ScreenState? = null, -) - -// ScreenState - Loading/Success/Error -sealed interface [Feature]ScreenState { - data object Loading : [Feature]ScreenState - data object Success : [Feature]ScreenState - data class Error(val message: StringResource) : [Feature]ScreenState -} - -// Event - Navigation/one-shot effects -sealed interface [Feature]Event { - data class NavigateToDetail(val id: Long) : [Feature]Event -} - -// Action - User interactions -sealed interface [Feature]Action { - data class OnItemClick(val id: Long) : [Feature]Action - - sealed interface Internal : [Feature]Action { - data class ReceiveData(val dataState: DataState) : Internal - } -} -``` - ---- - -## Build Commands - -```bash -# Build specific feature -./gradlew :feature:home:build -./gradlew :feature:auth:build -./gradlew :feature:accounts:build -./gradlew :feature:beneficiary:build -./gradlew :feature:loan-account:build -./gradlew :feature:savings-account:build -./gradlew :feature:share-account:build -./gradlew :feature:transfer-process:build -./gradlew :feature:recent-transaction:build -./gradlew :feature:notification:build -./gradlew :feature:settings:build -./gradlew :feature:passcode:build -./gradlew :feature:qr:build -./gradlew :feature:location:build -./gradlew :feature:guarantor:build -./gradlew :feature:client-charge:build - -# Build all features -./gradlew build -``` - ---- - -## Navigation Registration - -All features registered in: -- **Routes**: `cmp-navigation/src/commonMain/kotlin/.../navigation/` -- **DI Modules**: `cmp-navigation/di/KoinModules.kt` - -```kotlin -// KoinModules.kt -val featureModule = module { - includes( - AuthModule, - HomeModule, - AccountsModule, - BeneficiaryModule, - LoanModule, - SavingsAccountModule, - ShareAccountModule, - TransferProcessModule, - RecentTransactionModule, - NotificationModule, - SettingsModule, - PasscodeModule, - QrModule, - GuarantorModule, - ChargeModule, - StatusModule, - ) -} -``` - ---- - -## Related Docs - -- Patterns: `claude-product-cycle/design-spec-layer/_shared/PATTERNS.md` -- Feature Specs: `claude-product-cycle/design-spec-layer/features/[feature]/SPEC.md` -- Client Layer: `claude-product-cycle/client-layer/LAYER_STATUS.md` - ---- - -## Changelog - -| Date | Change | -|------|--------| -| 2025-12-26 | Created LAYER_STATUS.md | -| 2025-12-26 | All 22 feature modules verified complete | diff --git a/claude-product-cycle/feature-layer/MODULES_INDEX.md b/claude-product-cycle/feature-layer/MODULES_INDEX.md deleted file mode 100644 index 278d69457..000000000 --- a/claude-product-cycle/feature-layer/MODULES_INDEX.md +++ /dev/null @@ -1,113 +0,0 @@ -# Feature Modules Index - O(1) Lookup - -> **23 modules** | **63 screens** | **49 ViewModels** | **21 DI modules** - ---- - -## Quick Lookup - -| # | Module | Path | DI | VMs | Screens | -|:-:|--------|------|:--:|:---:|:-------:| -| 1 | accounts | feature/accounts | ✅ | 3 | 3 | -| 2 | auth | feature/auth | ✅ | 5 | 6 | -| 3 | beneficiary | feature/beneficiary | ✅ | 4 | 4 | -| 4 | client-charge | feature/client-charge | ✅ | 2 | 2 | -| 5 | guarantor | feature/guarantor | ✅ | 3 | 3 | -| 6 | home | feature/home | ✅ | 1 | 1 | -| 7 | loan-account | feature/loan-account | ✅ | 4 | 4 | -| 8 | loan-application | feature/loan-application | ✅ | 4 | 3 | -| 9 | location | feature/location | ❌ | 0 | 1 | -| 10 | notification | feature/notification | ✅ | 1 | 1 | -| 11 | onboarding-language | feature/onboarding-language | ✅ | 1 | 1 | -| 12 | passcode | feature/passcode | ✅ | 2 | 2 | -| 13 | qr | feature/qr | ✅ | 3 | 3 | -| 14 | recent-transaction | feature/recent-transaction | ✅ | 1 | 1 | -| 15 | savings-account | feature/savings-account | ✅ | 3 | 4 | -| 16 | savings-application | feature/savings-application | ✅ | 2 | 2 | -| 17 | settings | feature/settings | ✅ | 5 | 9 | -| 18 | share-account | feature/share-account | ✅ | 2 | 2 | -| 19 | share-application | feature/share-application | ✅ | 2 | 2 | -| 20 | status | feature/status | ✅ | 1 | 0 | -| 21 | third-party-transfer | feature/third-party-transfer | ✅ | 1 | 1 | -| 22 | transfer-process | feature/transfer-process | ✅ | 2 | 2 | -| 23 | user-profile | feature/user-profile | ✅ | 1 | 1 | - ---- - -## Base Path Pattern - -``` -feature/[module]/src/commonMain/kotlin/org/mifos/mobile/feature/[package]/ -``` - ---- - -## O(1) File Access - -| Need | Path Pattern | -|------|--------------| -| Screen | `feature/[module]/.../ui/[Name]Screen.kt` | -| ViewModel | `feature/[module]/.../viewmodel/[Name]ViewModel.kt` | -| DI Module | `feature/[module]/.../di/[Name]Module.kt` | -| Navigation | `feature/[module]/.../navigation/[Name]Navigation.kt` | - ---- - -## Module Details - -### High-Complexity Modules (5+ screens/VMs) - -| Module | Screens | ViewModels | Key Features | -|--------|:-------:|:----------:|--------------| -| auth | 6 | 5 | Login, Registration, OTP, Password | -| settings | 9 | 5 | Theme, Language, Password, About | -| loan-account | 4 | 4 | Details, Repayment, Summary | -| beneficiary | 4 | 4 | List, Add, Edit, Delete | - -### Standard Modules (2-4 screens/VMs) - -| Module | Screens | ViewModels | Key Features | -|--------|:-------:|:----------:|--------------| -| accounts | 3 | 3 | List, Transactions, Details | -| guarantor | 3 | 3 | List, Add, Details | -| loan-application | 3 | 4 | Apply, Confirm, Upload | -| passcode | 2 | 2 | Set, Verify | -| qr | 3 | 3 | Display, Read, Import | -| savings-account | 4 | 3 | Details, Update, Withdraw | -| savings-application | 2 | 2 | Apply, Fill | -| share-account | 2 | 2 | List, Details | -| share-application | 2 | 2 | Apply, Fill | -| transfer-process | 2 | 2 | Make, Process | - -### Simple Modules (1 screen/VM) - -| Module | Screens | ViewModels | Key Features | -|--------|:-------:|:----------:|--------------| -| home | 1 | 1 | Dashboard | -| notification | 1 | 1 | List | -| recent-transaction | 1 | 1 | History | -| location | 1 | 0 | Branch Map | -| onboarding-language | 1 | 1 | Language Selection | -| third-party-transfer | 1 | 1 | TPT | -| user-profile | 1 | 1 | Profile | -| client-charge | 2 | 2 | List, Details | -| status | 0 | 1 | Status tracking | - ---- - -## Related Files - -- [SCREENS_INDEX.md](SCREENS_INDEX.md) - All 63 screens with ViewModels -- [LAYER_STATUS.md](LAYER_STATUS.md) - Implementation status -- [LAYER_GUIDE.md](LAYER_GUIDE.md) - Architecture patterns - ---- - -## Auto-Update Rules - -| Scenario | Action | -|----------|--------| -| New module added | Add row to Quick Lookup table | -| Screen added to module | Update Screens count | -| ViewModel added | Update VMs count | -| DI module added | Update DI column | diff --git a/claude-product-cycle/feature-layer/SCREENS_INDEX.md b/claude-product-cycle/feature-layer/SCREENS_INDEX.md deleted file mode 100644 index 54848594a..000000000 --- a/claude-product-cycle/feature-layer/SCREENS_INDEX.md +++ /dev/null @@ -1,266 +0,0 @@ -# Screens Index - O(1) Lookup - -> **63 screens** across **23 modules** - ---- - -## By Module (Alphabetical) - -### accounts (3 screens) - -| Screen | ViewModel | File | -|--------|-----------|------| -| AccountsScreen | AccountsViewModel | ui/AccountsScreen.kt | -| TransactionScreen | TransactionViewModel | ui/TransactionScreen.kt | -| TransactionDetailsScreen | TransactionDetailsViewModel | ui/TransactionDetailsScreen.kt | - -### auth (6 screens) - -| Screen | ViewModel | File | -|--------|-----------|------| -| LoginScreen | LoginViewModel | ui/LoginScreen.kt | -| OtpAuthenticationScreen | OtpAuthenticationViewModel | ui/OtpAuthenticationScreen.kt | -| RecoverPasswordScreen | RecoverPasswordViewModel | ui/RecoverPasswordScreen.kt | -| RegistrationScreen | RegistrationViewModel | ui/RegistrationScreen.kt | -| SetPasswordScreen | SetPasswordViewModel | ui/SetPasswordScreen.kt | -| UploadIdScreen | - | ui/UploadIdScreen.kt | - -### beneficiary (4 screens) - -| Screen | ViewModel | File | -|--------|-----------|------| -| BeneficiaryApplicationScreen | BeneficiaryApplicationViewModel | ui/BeneficiaryApplicationScreen.kt | -| BeneficiaryApplicationConfirmationScreen | BeneficiaryApplicationConfirmationViewModel | ui/BeneficiaryApplicationConfirmationScreen.kt | -| BeneficiaryDetailScreen | BeneficiaryDetailViewModel | ui/BeneficiaryDetailScreen.kt | -| BeneficiaryListScreen | BeneficiaryListViewModel | ui/BeneficiaryListScreen.kt | - -### client-charge (2 screens) - -| Screen | ViewModel | File | -|--------|-----------|------| -| ChargeDetailScreen | ChargeDetailsViewModel | ui/ChargeDetailScreen.kt | -| ClientChargeScreen | ClientChargeViewModel | ui/ClientChargeScreen.kt | - -### guarantor (3 screens) - -| Screen | ViewModel | File | -|--------|-----------|------| -| AddGuarantorScreen | AddGuarantorViewModel | ui/AddGuarantorScreen.kt | -| GuarantorDetailScreen | GuarantorDetailViewModel | ui/GuarantorDetailScreen.kt | -| GuarantorListScreen | GuarantorListViewModel | ui/GuarantorListScreen.kt | - -### home (1 screen) - -| Screen | ViewModel | File | -|--------|-----------|------| -| HomeScreen | HomeViewModel | ui/HomeScreen.kt | - -### loan-account (4 screens) - -| Screen | ViewModel | File | -|--------|-----------|------| -| AccountSummaryScreen | AccountSummaryViewModel | ui/AccountSummaryScreen.kt | -| LoanAccountDetailsScreen | LoanAccountDetailsViewModel | ui/LoanAccountDetailsScreen.kt | -| LoanAccountScreen | LoanAccountViewModel | ui/LoanAccountScreen.kt | -| RepaymentScheduleScreen | RepaymentScheduleViewModel | ui/RepaymentScheduleScreen.kt | - -### loan-application (3 screens) - -| Screen | ViewModel | File | -|--------|-----------|------| -| ConfirmDetailsScreen | ConfirmDetailsViewModel | ui/ConfirmDetailsScreen.kt | -| LoanApplyScreen | LoanApplyViewModel | ui/LoanApplyScreen.kt | -| UploadDocsScreen | - | ui/UploadDocsScreen.kt | - -### location (1 screen) - -| Screen | ViewModel | File | -|--------|-----------|------| -| LocationScreen | - | ui/LocationScreen.kt | - -### notification (1 screen) - -| Screen | ViewModel | File | -|--------|-----------|------| -| NotificationScreen | NotificationViewModel | ui/NotificationScreen.kt | - -### onboarding-language (1 screen) - -| Screen | ViewModel | File | -|--------|-----------|------| -| SetOnboardingLanguageScreen | SetOnboardingLanguageViewModel | ui/SetOnboardingLanguageScreen.kt | - -### passcode (2 screens) - -| Screen | ViewModel | File | -|--------|-----------|------| -| PasscodeScreen | PasscodeViewModel | ui/PasscodeScreen.kt | -| VerifyPasscodeScreen | VerifyPasscodeViewModel | ui/VerifyPasscodeScreen.kt | - -### qr (3 screens) - -| Screen | ViewModel | File | -|--------|-----------|------| -| QrCodeDisplayScreen | QrCodeDisplayViewModel | ui/QrCodeDisplayScreen.kt | -| QrCodeImportScreen | QrCodeImportViewModel | ui/QrCodeImportScreen.kt | -| QrCodeReaderScreen | QrCodeReaderViewModel | ui/QrCodeReaderScreen.kt | - -### recent-transaction (1 screen) - -| Screen | ViewModel | File | -|--------|-----------|------| -| RecentTransactionScreen | RecentTransactionViewModel | ui/RecentTransactionScreen.kt | - -### savings-account (4 screens) - -| Screen | ViewModel | File | -|--------|-----------|------| -| AccountUpdateScreen | AccountUpdateViewModel | ui/AccountUpdateScreen.kt | -| AccountWithdrawScreen | AccountWithdrawViewModel | ui/AccountWithdrawScreen.kt | -| SavingsAccountDetailsScreen | SavingsAccountDetailsViewModel | ui/SavingsAccountDetailsScreen.kt | -| SavingsAccountScreen | - | ui/SavingsAccountScreen.kt | - -### savings-application (2 screens) - -| Screen | ViewModel | File | -|--------|-----------|------| -| FillApplicationScreen | FillApplicationViewModel | ui/FillApplicationScreen.kt | -| SavingsApplyScreen | SavingsApplyViewModel | ui/SavingsApplyScreen.kt | - -### settings (9 screens) - -| Screen | ViewModel | File | -|--------|-----------|------| -| AboutScreen | - | ui/AboutScreen.kt | -| AppInfoScreen | - | ui/AppInfoScreen.kt | -| ChangePasswordScreen | ChangePasswordViewModel | ui/ChangePasswordScreen.kt | -| ChangeThemeScreen | ChangeThemeViewModel | ui/ChangeThemeScreen.kt | -| FaqScreen | - | ui/FaqScreen.kt | -| HelpScreen | - | ui/HelpScreen.kt | -| LanguageScreen | LanguageViewModel | ui/LanguageScreen.kt | -| SettingsScreen | SettingsViewModel | ui/SettingsScreen.kt | -| UpdatePasscodeScreen | UpdatePasscodeViewModel | ui/UpdatePasscodeScreen.kt | - -### share-account (2 screens) - -| Screen | ViewModel | File | -|--------|-----------|------| -| ShareAccountDetailsScreen | ShareAccountDetailsViewModel | ui/ShareAccountDetailsScreen.kt | -| ShareAccountScreen | ShareAccountViewModel | ui/ShareAccountScreen.kt | - -### share-application (2 screens) - -| Screen | ViewModel | File | -|--------|-----------|------| -| FillApplicationScreen | FillApplicationViewModel | ui/FillApplicationScreen.kt | -| ShareApplyScreen | ShareApplyViewModel | ui/ShareApplyScreen.kt | - -### third-party-transfer (1 screen) - -| Screen | ViewModel | File | -|--------|-----------|------| -| TptScreen | TptViewModel | ui/TptScreen.kt | - -### transfer-process (2 screens) - -| Screen | ViewModel | File | -|--------|-----------|------| -| MakeTransferScreen | MakeTransferViewModel | ui/MakeTransferScreen.kt | -| TransferProcessScreen | TransferProcessViewModel | ui/TransferProcessScreen.kt | - -### user-profile (1 screen) - -| Screen | ViewModel | File | -|--------|-----------|------| -| UserProfileScreen | UserProfileViewModel | ui/UserProfileScreen.kt | - ---- - -## Search by Screen Name (Alphabetical) - -| Screen | Module | -|--------|--------| -| AboutScreen | settings | -| AccountsScreen | accounts | -| AccountSummaryScreen | loan-account | -| AccountUpdateScreen | savings-account | -| AccountWithdrawScreen | savings-account | -| AddGuarantorScreen | guarantor | -| AppInfoScreen | settings | -| BeneficiaryApplicationConfirmationScreen | beneficiary | -| BeneficiaryApplicationScreen | beneficiary | -| BeneficiaryDetailScreen | beneficiary | -| BeneficiaryListScreen | beneficiary | -| ChangePasswordScreen | settings | -| ChangeThemeScreen | settings | -| ChargeDetailScreen | client-charge | -| ClientChargeScreen | client-charge | -| ConfirmDetailsScreen | loan-application | -| FaqScreen | settings | -| FillApplicationScreen | savings-application, share-application | -| GuarantorDetailScreen | guarantor | -| GuarantorListScreen | guarantor | -| HelpScreen | settings | -| HomeScreen | home | -| LanguageScreen | settings | -| LoanAccountDetailsScreen | loan-account | -| LoanAccountScreen | loan-account | -| LoanApplyScreen | loan-application | -| LocationScreen | location | -| LoginScreen | auth | -| MakeTransferScreen | transfer-process | -| NotificationScreen | notification | -| OtpAuthenticationScreen | auth | -| PasscodeScreen | passcode | -| QrCodeDisplayScreen | qr | -| QrCodeImportScreen | qr | -| QrCodeReaderScreen | qr | -| RecentTransactionScreen | recent-transaction | -| RecoverPasswordScreen | auth | -| RegistrationScreen | auth | -| RepaymentScheduleScreen | loan-account | -| SavingsAccountDetailsScreen | savings-account | -| SavingsAccountScreen | savings-account | -| SavingsApplyScreen | savings-application | -| SetOnboardingLanguageScreen | onboarding-language | -| SetPasswordScreen | auth | -| SettingsScreen | settings | -| ShareAccountDetailsScreen | share-account | -| ShareAccountScreen | share-account | -| ShareApplyScreen | share-application | -| TptScreen | third-party-transfer | -| TransactionDetailsScreen | accounts | -| TransactionScreen | accounts | -| TransferProcessScreen | transfer-process | -| UpdatePasscodeScreen | settings | -| UploadDocsScreen | loan-application | -| UploadIdScreen | auth | -| UserProfileScreen | user-profile | -| VerifyPasscodeScreen | passcode | - ---- - -## O(1) File Access - -| Need | Path Pattern | -|------|--------------| -| Screen file | `feature/[module]/src/commonMain/kotlin/org/mifos/mobile/feature/../ui/[Screen].kt` | -| ViewModel | Same directory structure, `viewmodel/[ViewModel].kt` | - ---- - -## Related Files - -- [MODULES_INDEX.md](MODULES_INDEX.md) - Module overview -- [LAYER_STATUS.md](LAYER_STATUS.md) - Implementation status -- [LAYER_GUIDE.md](LAYER_GUIDE.md) - Architecture patterns - ---- - -## Auto-Update Rules - -| Scenario | Action | -|----------|--------| -| New screen added | Add to module section + alphabetical list | -| Screen renamed | Update both tables | -| ViewModel added | Update ViewModel column | diff --git a/claude-product-cycle/feature-layer/TESTING_STATUS.md b/claude-product-cycle/feature-layer/TESTING_STATUS.md deleted file mode 100644 index 03256fe0f..000000000 --- a/claude-product-cycle/feature-layer/TESTING_STATUS.md +++ /dev/null @@ -1,323 +0,0 @@ -# Feature Layer - Testing Status - -> ViewModel, Screen, and Integration testing documentation - ---- - -## Overview - -The feature layer is the primary testing target. Each feature needs: -- ViewModel unit tests (state, events, actions) -- Screen UI tests (rendering, interactions) -- Integration tests (full user flows) - ---- - -## Current State - -| Component | Total | Tested | Coverage | -|-----------|:-----:|:------:|:--------:| -| ViewModels | 49 | 0 | 0% | -| Screens | 63 | 0 | 0% | -| Integration Flows | 8 | 0 | 0% | - ---- - -## Testing Architecture - -``` -┌─────────────────────────────────────────────────────────────────────────────┐ -│ FEATURE LAYER TESTING STACK │ -├─────────────────────────────────────────────────────────────────────────────┤ -│ │ -│ ┌──────────────────────────────────────────────────────────────────────┐ │ -│ │ Integration Tests (E2E Flows) │ │ -│ │ - Login → Passcode → Home │ │ -│ │ - Home → Transfer → Confirm │ │ -│ │ - Location: cmp-android/src/androidTest/ │ │ -│ └──────────────────────────────────────────────────────────────────────┘ │ -│ │ │ -│ ┌──────────────────────────────────────────────────────────────────────┐ │ -│ │ UI Tests (Screen Tests) │ │ -│ │ - Compose test rules │ │ -│ │ - TestTag-based assertions │ │ -│ │ - Location: feature/*/src/androidInstrumentedTest/ │ │ -│ └──────────────────────────────────────────────────────────────────────┘ │ -│ │ │ -│ ┌──────────────────────────────────────────────────────────────────────┐ │ -│ │ Unit Tests (ViewModel Tests) │ │ -│ │ - StateFlow testing with Turbine │ │ -│ │ - Event emission testing │ │ -│ │ - Action handling testing │ │ -│ │ - Location: feature/*/src/commonTest/ │ │ -│ └──────────────────────────────────────────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────────────────────────────────────────┘ -``` - ---- - -## ViewModel Testing Status - -### By Feature - -| # | Feature | VMs | Tests | Coverage | Status | -|:-:|---------|:---:|:-----:|:--------:|:------:| -| 1 | auth | 5 | 0 | 0% | ⬜ Not Started | -| 2 | home | 1 | 0 | 0% | ⬜ Not Started | -| 3 | accounts | 3 | 0 | 0% | ⬜ Not Started | -| 4 | savings-account | 3 | 0 | 0% | ⬜ Not Started | -| 5 | loan-account | 4 | 0 | 0% | ⬜ Not Started | -| 6 | share-account | 2 | 0 | 0% | ⬜ Not Started | -| 7 | beneficiary | 4 | 0 | 0% | ⬜ Not Started | -| 8 | transfer-process | 2 | 0 | 0% | ⬜ Not Started | -| 9 | recent-transaction | 1 | 0 | 0% | ⬜ Not Started | -| 10 | notification | 1 | 0 | 0% | ⬜ Not Started | -| 11 | settings | 5 | 0 | 0% | ⬜ Not Started | -| 12 | mifos-passcode | 2 | 0 | 0% | ⬜ Not Started | -| 13 | guarantor | 3 | 0 | 0% | ⬜ Not Started | -| 14 | qr-code | 3 | 0 | 0% | ⬜ Not Started | -| 15 | location | 1 | 0 | 0% | ⬜ Not Started | -| 16 | user-profile | 2 | 0 | 0% | ⬜ Not Started | - -**Legend**: ✅ 80%+ | ⚠️ <80% | ⬜ 0% - ---- - -## UI Testing Status - -### TestTag Coverage - -| # | Feature | Screens | TestTags | Coverage | Status | -|:-:|---------|:-------:|:--------:|:--------:|:------:| -| 1 | auth | 6 | ~40% | Partial | ⚠️ | -| 2 | home | 1 | ~30% | Partial | ⚠️ | -| 3 | accounts | 3 | ~30% | Partial | ⚠️ | -| 4 | savings-account | 4 | ~30% | Partial | ⚠️ | -| 5 | loan-account | 4 | ~30% | Partial | ⚠️ | -| 6 | share-account | 2 | ~30% | Partial | ⚠️ | -| 7 | beneficiary | 4 | ~30% | Partial | ⚠️ | -| 8 | transfer-process | 2 | ~30% | Partial | ⚠️ | -| 9 | recent-transaction | 1 | ~30% | Partial | ⚠️ | -| 10 | notification | 1 | ~30% | Partial | ⚠️ | -| 11 | settings | 9 | ~30% | Partial | ⚠️ | -| 12 | mifos-passcode | 2 | ~30% | Partial | ⚠️ | -| 13 | guarantor | 3 | ~30% | Partial | ⚠️ | -| 14 | qr-code | 3 | ~30% | Partial | ⚠️ | -| 15 | location | 1 | ~30% | Partial | ⚠️ | -| 16 | user-profile | 2 | ~30% | Partial | ⚠️ | - -**Legend**: ✅ 80%+ TestTags | ⚠️ <80% TestTags | ⬜ No TestTags - ---- - -## Integration Test Status - -### Critical User Flows - -| # | Flow | Screens | Tests | Status | -|:-:|------|:-------:|:-----:|:------:| -| 1 | Login → Passcode → Home | 3 | 0 | ⬜ | -| 2 | Registration → OTP → Login | 4 | 0 | ⬜ | -| 3 | Home → Account Details | 2 | 0 | ⬜ | -| 4 | Home → Transfer → Confirm | 3 | 0 | ⬜ | -| 5 | Home → Beneficiary → Add | 2 | 0 | ⬜ | -| 6 | Settings → Change Password | 2 | 0 | ⬜ | -| 7 | Loan → Schedule → Summary | 3 | 0 | ⬜ | -| 8 | QR → Scan → Transfer | 3 | 0 | ⬜ | - ---- - -## TestTag System - -### Pattern: `feature:component:element` - -```kotlin -object TestTags { - object Auth { - const val SCREEN = "auth:screen" - const val USERNAME_FIELD = "auth:username" - const val PASSWORD_FIELD = "auth:password" - const val LOGIN_BUTTON = "auth:loginButton" - const val ERROR_MESSAGE = "auth:error" - const val LOADING_INDICATOR = "auth:loading" - } - - object Home { - const val SCREEN = "home:screen" - const val LOAN_BALANCE = "home:loanBalance" - const val SAVINGS_BALANCE = "home:savingsBalance" - const val TRANSFER_BUTTON = "home:transferButton" - const val ACCOUNTS_CARD = "home:accountsCard" - } - - // ... for all 17 features -} -``` - -### Usage in Screens - -```kotlin -@Composable -fun LoginScreenContent( - state: LoginState, - onAction: (LoginAction) -> Unit -) { - Column(modifier = Modifier.testTag(TestTags.Auth.SCREEN)) { - MifosOutlinedTextField( - value = state.username, - onValueChange = { onAction(LoginAction.UsernameChanged(it)) }, - modifier = Modifier.testTag(TestTags.Auth.USERNAME_FIELD) - ) - // ... - } -} -``` - ---- - -## ViewModel Test Template - -```kotlin -class LoginViewModelTest { - @get:Rule - val mainDispatcherRule = MainDispatcherRule() - - private lateinit var viewModel: LoginViewModel - private lateinit var fakeUserAuthRepository: FakeUserAuthRepository - - @BeforeTest - fun setup() { - fakeUserAuthRepository = FakeUserAuthRepository() - viewModel = LoginViewModel( - userAuthRepository = fakeUserAuthRepository, - savedStateHandle = SavedStateHandle() - ) - } - - // STATE TESTS - @Test - fun `initial state has empty credentials`() = runTest { - viewModel.stateFlow.test { - val state = awaitItem() - assertEquals("", state.username) - assertEquals("", state.password) - } - } - - // ACTION TESTS - @Test - fun `username changed updates state`() = runTest { - viewModel.trySendAction(LoginAction.UsernameChanged("testuser")) - - viewModel.stateFlow.test { - assertEquals("testuser", expectMostRecentItem().username) - } - } - - // EVENT TESTS - @Test - fun `login success navigates to passcode`() = runTest { - fakeUserAuthRepository.setResult(DataState.Success(UserFixture.create())) - - viewModel.trySendAction(LoginAction.LoginClicked) - - viewModel.eventFlow.test { - assertEquals(LoginEvent.NavigateToPasscode, awaitItem()) - } - } -} -``` - ---- - -## UI Test Template - -```kotlin -class LoginScreenTest { - @get:Rule - val composeTestRule = createComposeRule() - - @Test - fun `login screen displays all elements`() { - composeTestRule.setContent { - LoginScreenContent(state = LoginState(), onAction = {}) - } - - composeTestRule.onNodeWithTag(TestTags.Auth.USERNAME_FIELD).assertIsDisplayed() - composeTestRule.onNodeWithTag(TestTags.Auth.PASSWORD_FIELD).assertIsDisplayed() - composeTestRule.onNodeWithTag(TestTags.Auth.LOGIN_BUTTON).assertIsDisplayed() - } - - @Test - fun `login button disabled when credentials empty`() { - composeTestRule.setContent { - LoginScreenContent( - state = LoginState(username = "", password = ""), - onAction = {} - ) - } - - composeTestRule.onNodeWithTag(TestTags.Auth.LOGIN_BUTTON).assertIsNotEnabled() - } -} -``` - ---- - -## Implementation Priority - -### Phase 1: Core Features (P0) -| Feature | VMs | Tests Needed | Effort | -|---------|:---:|:------------:|:------:| -| auth | 5 | 50 | L | -| home | 1 | 12 | M | -| accounts | 3 | 24 | M | -| transfer-process | 2 | 20 | M | - -### Phase 2: Account Features (P1) -| Feature | VMs | Tests Needed | Effort | -|---------|:---:|:------------:|:------:| -| beneficiary | 4 | 32 | M | -| loan-account | 4 | 32 | M | -| savings-account | 3 | 24 | M | -| share-account | 2 | 16 | S | - -### Phase 3: Supporting Features (P2) -| Feature | VMs | Tests Needed | Effort | -|---------|:---:|:------------:|:------:| -| settings | 5 | 40 | L | -| notification | 1 | 8 | S | -| recent-transaction | 1 | 8 | S | -| qr-code | 3 | 24 | M | -| mifos-passcode | 2 | 16 | M | -| guarantor | 3 | 24 | M | -| user-profile | 2 | 16 | S | -| location | 1 | 8 | S | - ---- - -## Commands - -```bash -# Run feature tests -./gradlew :feature:auth:test -./gradlew :feature:home:test - -# Run UI tests -./gradlew :cmp-android:connectedDebugAndroidTest - -# Check test status -/gap-analysis feature testing - -# Plan feature tests -/gap-planning feature auth testing -``` - ---- - -## Related Files - -- [MODULES_INDEX.md](./MODULES_INDEX.md) - All feature modules -- [SCREENS_INDEX.md](./SCREENS_INDEX.md) - All screens -- [LAYER_GUIDE.md](./LAYER_GUIDE.md) - Architecture patterns diff --git a/claude-product-cycle/feature-layer/instructions/COMPOSE.md b/claude-product-cycle/feature-layer/instructions/COMPOSE.md deleted file mode 100644 index f4cbae48a..000000000 --- a/claude-product-cycle/feature-layer/instructions/COMPOSE.md +++ /dev/null @@ -1,746 +0,0 @@ -# Compose Screen Patterns - -## Table of Contents -1. [Component Hierarchy](#component-hierarchy) -2. [Available Components](#available-components) -3. [Screen Structure](#screen-structure) -4. [Container + Content Pattern](#container--content-pattern) -5. [Section-Based Design](#section-based-design) -6. [Component Placement Rules](#component-placement-rules) -7. [Reusability Rules](#reusability-rules) -8. [Loading States](#loading-states) -9. [Error States](#error-states) -10. [Empty States](#empty-states) -11. [Dialog Management](#dialog-management) -12. [Theming Guidelines](#theming-guidelines) -13. [Preview Patterns](#preview-patterns) - ---- - -## Component Hierarchy - -``` -┌─────────────────────────────────────────────────────────────┐ -│ LEVEL 5: Foundation (core-base/designsystem) │ -│ KptTheme, KptTopAppBar, KptShimmerLoadingBox, KptGrid │ -├─────────────────────────────────────────────────────────────┤ -│ LEVEL 4: Design System (core/designsystem) │ -│ MifosButton, MifosTextField, MifosCard, MifosScaffold │ -├─────────────────────────────────────────────────────────────┤ -│ LEVEL 3: App-Wide (core/ui) │ -│ MifosAccountCard, TransactionScreenItem, EmptyDataView │ -├─────────────────────────────────────────────────────────────┤ -│ LEVEL 2: Feature-Shared (feature/[name]/components/) │ -│ AuthHeader, TransferAmountInput │ -├─────────────────────────────────────────────────────────────┤ -│ LEVEL 1: Screen-Specific (feature/[name]/[screen]/comp/) │ -│ LoginForm, AccountDetailsHeader │ -└─────────────────────────────────────────────────────────────┘ -``` - -**Rule**: Always check higher levels before creating new components. - ---- - -## Available Components - -> **Lookup Strategy**: Static registry first → Dynamic search if not found → Auto-update registry -> See [core-layer/COMPONENTS.md](../../core-layer/COMPONENTS.md) for complete component registry. - -### Component Lookup (ALWAYS DO FIRST) - -**Step 1: Check Static Registry (Fast)** -``` -Read: core-layer/COMPONENTS.md → Static Component Registry section -``` - -**Step 2: If Not Found → Dynamic Search** -```bash -# Search by component type -grep -r "@Composable" core/ core-base/ | grep -i "[type]" - -# Or list directories -ls core-base/designsystem/**/component/ -ls core/designsystem/**/component/ -ls core/ui/**/component/ -``` - -**Step 3: If Found Dynamically → Update Registry** -``` -Add to: core-layer/COMPONENTS.md → appropriate static table -``` - -### Source Directories - -| Layer | Path | Prefix | Purpose | -|-------|------|--------|---------| -| Foundation | `core-base/designsystem/.../component/` | `Kpt*` | Theme, loading, animations | -| Foundation | `core-base/designsystem/.../layout/` | `Kpt*` | Grid, flow, responsive layouts | -| Design System | `core/designsystem/.../component/` | `Mifos*` | UI primitives (button, textfield) | -| Business | `core/ui/.../component/` | `Mifos*` | App-wide (cards, lists, states) | - -### Naming Convention Rules - -| Prefix | Location | When to Use | -|--------|----------|-------------| -| `Kpt*` | core-base/designsystem | Theme, layout, animation components | -| `Mifos*` | core/designsystem | UI primitives (Button, TextField, Dialog) | -| `Mifos*` | core/ui | Business components (Card, Item, State) | -| `[Feature]*` | feature/[name]/components | Feature-shared components | -| `[Screen]*` | feature/[name]/[screen]/components | Screen-specific components | - -### Component Type by Name Pattern - -| Pattern | Type | Look In | -|---------|------|---------| -| `*Button` | Action | `core/designsystem` | -| `*TextField`, `*Field` | Input | `core/designsystem` | -| `*Dialog`, `*Sheet` | Modal | `core/designsystem` | -| `*Card` | Container | `core/ui` | -| `*Item` | List item | `core/ui` | -| `*Component`, `*View` | Composite | `core/ui` | -| `*Grid`, `*Row`, `*Column` | Layout | `core-base/designsystem` | -| `*Scaffold`, `*Layout` | Structure | `core-base/designsystem` | - -### Theme Tokens (Always Available) - -```kotlin -// Spacing -KptTheme.spacing.xs // 4.dp -KptTheme.spacing.sm // 8.dp -KptTheme.spacing.md // 16.dp -KptTheme.spacing.lg // 24.dp -KptTheme.spacing.xl // 32.dp - -// Shapes -KptTheme.shapes.small // 4.dp rounded -KptTheme.shapes.medium // 8.dp rounded -KptTheme.shapes.large // 16.dp rounded - -// Colors -KptTheme.colorScheme.primary -KptTheme.colorScheme.onPrimary -KptTheme.colorScheme.surface -KptTheme.colorScheme.onSurface -KptTheme.colorScheme.error -``` - ---- - -## Screen Structure - -### Directory Layout - -``` -feature/[name]/ -├── [screen]/ -│ ├── [Screen]Screen.kt # Container composable -│ ├── [Screen]ViewModel.kt # ViewModel -│ ├── [Screen].kt # State/Event/Action -│ └── components/ # Screen-specific components -│ ├── [Screen]Header.kt -│ ├── [Screen]Content.kt -│ └── [Screen]Card.kt -├── components/ # Feature-shared components -│ └── Shared[Feature]Component.kt -├── navigation/ -└── di/ -``` - -### File Naming - -| File | Naming | -|------|--------| -| Screen | `[Screen]Screen.kt` | -| ViewModel | `[Screen]ViewModel.kt` | -| State/Event/Action | `[Screen].kt` | -| Components | `[Screen][Purpose].kt` | - ---- - -## Container + Content Pattern - -### Container Composable - -Handles ViewModel integration, events, and dialogs: - -```kotlin -@Composable -internal fun [Screen]Screen( - onNavigateBack: () -> Unit, - onNavigateToDetail: (Long) -> Unit, - modifier: Modifier = Modifier, - viewModel: [Screen]ViewModel = koinViewModel(), -) { - val scope = rememberCoroutineScope() - val snackbarHostState = remember { SnackbarHostState() } - val state by viewModel.stateFlow.collectAsStateWithLifecycle() - - // Handle one-time events - EventsEffect(viewModel.eventFlow) { event -> - when (event) { - is [Screen]Event.NavigateBack -> onNavigateBack() - is [Screen]Event.NavigateToDetail -> onNavigateToDetail(event.id) - is [Screen]Event.ShowToast -> { - scope.launch { snackbarHostState.showSnackbar(event.message) } - } - } - } - - // Render dialogs - [Screen]Dialogs( - dialogState = state.dialogState, - onDismiss = remember(viewModel) { - { viewModel.trySendAction([Screen]Action.OnDismissDialog) } - }, - ) - - // Render content - [Screen]Content( - state = state, - snackbarHostState = snackbarHostState, - onAction = remember(viewModel) { { viewModel.trySendAction(it) } }, - modifier = modifier, - ) -} -``` - -### Content Composable - -Pure UI, testable: - -```kotlin -@Composable -private fun [Screen]Content( - state: [Screen]State, - snackbarHostState: SnackbarHostState, - onAction: ([Screen]Action) -> Unit, - modifier: Modifier = Modifier, -) { - MifosScaffold( - topBar = { - MifosTopAppBar( - title = stringResource(Res.string.screen_title), - onNavigationClick = { onAction([Screen]Action.OnNavigateBack) }, - ) - }, - snackbarHost = { KptSnackbarHost(snackbarHostState) }, - modifier = modifier, - ) { paddingValues -> - when (state.uiState) { - is [Screen]ScreenState.Loading -> { - [Screen]LoadingContent( - modifier = Modifier.padding(paddingValues) - ) - } - is [Screen]ScreenState.Success -> { - [Screen]SuccessContent( - state = state, - onAction = onAction, - modifier = Modifier.padding(paddingValues), - ) - } - is [Screen]ScreenState.Error -> { - MifosErrorComponent( - message = stringResource(state.uiState.message), - onRetry = { onAction([Screen]Action.OnRetry) }, - modifier = Modifier.padding(paddingValues), - ) - } - is [Screen]ScreenState.Empty -> { - EmptyDataView( - modifier = Modifier.padding(paddingValues), - ) - } - is [Screen]ScreenState.Network -> { - NoInternet( - onRetry = { onAction([Screen]Action.OnRetry) }, - modifier = Modifier.padding(paddingValues), - ) - } - } - } -} -``` - -### Key Patterns - -| Pattern | Purpose | -|---------|---------| -| `remember(viewModel)` | Memoize callbacks to prevent recomposition | -| `EventsEffect` | Lifecycle-aware event handling | -| `collectAsStateWithLifecycle` | Lifecycle-aware state collection | -| Separate dialogs | Keep dialog logic isolated | - ---- - -## Section-Based Design - -### Rule: Break Screens into Sections - -**Bad** - Monolithic screen: -```kotlin -@Composable -private fun AccountContent(state: AccountState) { - Column { - // 200+ lines of mixed UI code - } -} -``` - -**Good** - Section-based: -```kotlin -@Composable -private fun [Screen]SuccessContent( - state: [Screen]State, - onAction: ([Screen]Action) -> Unit, - modifier: Modifier = Modifier, -) { - LazyColumn(modifier = modifier.fillMaxSize()) { - // Header Section - item { - [Screen]HeaderSection( - title = state.title, - subtitle = state.subtitle, - ) - } - - // Summary Section - item { - [Screen]SummarySection( - balance = state.balance, - currency = state.currency, - ) - } - - // Actions Section - item { - [Screen]ActionsSection( - onTransfer = { onAction([Screen]Action.OnTransfer) }, - onWithdraw = { onAction([Screen]Action.OnWithdraw) }, - ) - } - - // List Header - item { - SectionHeader(title = stringResource(Res.string.transactions)) - } - - // List Items - items( - items = state.transactions, - key = { it.id } - ) { transaction -> - TransactionScreenItem( - transaction = transaction, - onClick = { onAction([Screen]Action.OnTransactionClick(it.id)) }, - ) - } - } -} -``` - -### Section Component Template - -```kotlin -// feature/[name]/[screen]/components/[Screen]HeaderSection.kt - -@Composable -internal fun [Screen]HeaderSection( - title: String, - subtitle: String, - modifier: Modifier = Modifier, -) { - Column( - modifier = modifier - .fillMaxWidth() - .padding(KptTheme.spacing.md), - ) { - Text( - text = title, - style = MifosTypography.titleLarge, - color = KptTheme.colorScheme.onSurface, - ) - Spacer(modifier = Modifier.height(KptTheme.spacing.xs)) - Text( - text = subtitle, - style = MifosTypography.bodyMedium, - color = KptTheme.colorScheme.onSurfaceVariant, - ) - } -} -``` - ---- - -## Component Placement Rules - -### Decision Tree - -``` -Creating a new component? -│ -├── Is it a UI primitive (Button variant, TextField variant)? -│ └── YES → core/designsystem/component/ -│ -├── Used in 2+ features? -│ └── YES → core/ui/component/ -│ -├── Used across screens in same feature? -│ └── YES → feature/[name]/components/ -│ -└── Used only in this screen? - └── YES → feature/[name]/[screen]/components/ -``` - -### Examples - -| Component | Location | Reason | -|-----------|----------|--------| -| `MifosOutlinedButton` | `core/designsystem/` | UI primitive | -| `TransactionScreenItem` | `core/ui/` | Used in accounts, home, recent | -| `AuthHeader` | `feature/auth/components/` | Used in login, register, otp | -| `LoginForm` | `feature/auth/login/components/` | Only in login screen | - ---- - -## Reusability Rules - -### When to Move to core/ui - -Move a component when: -1. **Used in 2+ features** -2. **Represents a business concept** (Account, Transaction, Beneficiary) -3. **Has consistent behavior** across uses - -```kotlin -// Step 1: Identify repeated component -// feature/accounts/components/AccountCard.kt -// feature/home/components/AccountCard.kt <- Duplication! - -// Step 2: Move to core/ui -// core/ui/component/MifosAccountCard.kt - -// Step 3: Update imports everywhere -import org.mifos.mobile.core.ui.component.MifosAccountCard -``` - -### When to Move to Feature components/ - -Move from screen-specific when: -1. Used in 2+ screens within same feature -2. Shared styling/behavior within feature - ---- - -## Loading States - -### Shimmer Loading - -```kotlin -@Composable -private fun [Screen]LoadingContent(modifier: Modifier = Modifier) { - Column( - modifier = modifier - .fillMaxSize() - .padding(KptTheme.spacing.md), - verticalArrangement = Arrangement.spacedBy(KptTheme.spacing.sm), - ) { - // Header skeleton - KptShimmerLoadingBox( - modifier = Modifier - .fillMaxWidth() - .height(80.dp) - .clip(KptTheme.shapes.medium), - ) - - // Card skeletons - repeat(3) { - KptShimmerLoadingBox( - modifier = Modifier - .fillMaxWidth() - .height(120.dp) - .clip(KptTheme.shapes.medium), - ) - } - } -} -``` - -### Inline Loading - -```kotlin -if (state.isLoading) { - MifosProgressIndicator( - modifier = Modifier.align(Alignment.Center) - ) -} -``` - -### Overlay Loading - -```kotlin -Box(modifier = Modifier.fillMaxSize()) { - // Content - [Screen]SuccessContent(...) - - // Loading overlay - if (state.showOverlay) { - MifosLoadingDialog() - } -} -``` - ---- - -## Error States - -### Full Screen Error - -```kotlin -MifosErrorComponent( - message = stringResource(state.uiState.message), - onRetry = { onAction([Screen]Action.OnRetry) }, - modifier = Modifier.padding(paddingValues), -) -``` - -### Inline Error - -```kotlin -if (state.error != null) { - Text( - text = state.error, - color = KptTheme.colorScheme.error, - style = MifosTypography.bodySmall, - ) -} -``` - ---- - -## Empty States - -```kotlin -EmptyDataView( - icon = Icons.Default.Inbox, - title = stringResource(Res.string.no_data_title), - message = stringResource(Res.string.no_data_message), - modifier = Modifier.padding(paddingValues), -) -``` - ---- - -## Dialog Management - -### Dialog State in ViewModel State - -```kotlin -@Immutable -data class [Screen]State( - // ... - val dialogState: DialogState? = null, -) { - sealed interface DialogState { - data class Error(val message: String) : DialogState - data class ConfirmDelete(val item: Item) : DialogState - data object Success : DialogState - } -} -``` - -### Dialog Composable - -```kotlin -@Composable -private fun [Screen]Dialogs( - dialogState: [Screen]State.DialogState?, - onDismiss: () -> Unit, - onConfirmDelete: () -> Unit = {}, -) { - when (dialogState) { - is [Screen]State.DialogState.Error -> { - MifosBasicDialog( - visibilityState = BasicDialogState.Shown( - message = dialogState.message, - ), - onDismissRequest = onDismiss, - ) - } - is [Screen]State.DialogState.ConfirmDelete -> { - MifosAlertDialog( - title = stringResource(Res.string.confirm_delete), - message = stringResource(Res.string.delete_message), - confirmText = stringResource(Res.string.delete), - onConfirm = onConfirmDelete, - onDismiss = onDismiss, - ) - } - is [Screen]State.DialogState.Success -> { - MifosSuccessDialog( - message = stringResource(Res.string.success_message), - onDismiss = onDismiss, - ) - } - null -> Unit - } -} -``` - ---- - -## Theming Guidelines - -### NEVER Use Hardcoded Values - -```kotlin -// WRONG - Hardcoded values -Column( - modifier = Modifier.padding(16.dp) // Hardcoded -) { - Text( - text = "Title", - fontSize = 24.sp, // Hardcoded - color = Color(0xFF1A1A1A), // Hardcoded - ) -} - -// CORRECT - Theme tokens -Column( - modifier = Modifier.padding(KptTheme.spacing.md) -) { - Text( - text = stringResource(Res.string.title), // String resource - style = MifosTypography.titleLarge, // Typography token - color = KptTheme.colorScheme.onSurface, // Color token - ) -} -``` - -### Theme Token Quick Reference - -> Full theme tokens defined in [Available Components](#theme-tokens-always-available) section. - -| Token Type | Access | Examples | -|------------|--------|----------| -| Spacing | `KptTheme.spacing.*` | `xs`, `sm`, `md`, `lg`, `xl` | -| Shapes | `KptTheme.shapes.*` | `small`, `medium`, `large` | -| Colors | `KptTheme.colorScheme.*` | `primary`, `surface`, `error` | -| Typography | `MifosTypography.*` | `titleLarge`, `bodyMedium` | - -### Theming Rules - -1. **NEVER** use hardcoded `dp`, `sp`, or `Color()` values -2. **ALWAYS** use `KptTheme.spacing.*` for padding/margin -3. **ALWAYS** use `KptTheme.shapes.*` for corner radius -4. **ALWAYS** use `KptTheme.colorScheme.*` for colors -5. **ALWAYS** use `MifosTypography.*` for text styles -6. **ALWAYS** use `stringResource()` for user-facing text - ---- - -## Preview Patterns - -### Content Preview - -```kotlin -@Preview -@Composable -private fun [Screen]ContentPreview() { - MifosMobileTheme { - [Screen]Content( - state = [Screen]State( - uiState = [Screen]ScreenState.Success, - items = listOf( - Item(id = 1, name = "Item 1"), - Item(id = 2, name = "Item 2"), - ), - ), - snackbarHostState = remember { SnackbarHostState() }, - onAction = {}, - ) - } -} -``` - -### State Previews - -```kotlin -@Preview -@Composable -private fun [Screen]LoadingPreview() { - MifosMobileTheme { - [Screen]LoadingContent() - } -} - -@Preview -@Composable -private fun [Screen]ErrorPreview() { - MifosMobileTheme { - MifosErrorComponent( - message = "Failed to load data", - onRetry = {}, - ) - } -} - -@Preview -@Composable -private fun [Screen]EmptyPreview() { - MifosMobileTheme { - EmptyDataView() - } -} -``` - -### Component Preview - -```kotlin -@Preview -@Composable -private fun [Screen]HeaderSectionPreview() { - MifosMobileTheme { - [Screen]HeaderSection( - title = "Account Details", - subtitle = "Savings Account", - ) - } -} -``` - ---- - -## Checklist for New Screens - -Before creating a new screen: - -### Component Lookup (REQUIRED) -- [ ] **Step 1**: Check static registry in [core-layer/COMPONENTS.md](../../core-layer/COMPONENTS.md) -- [ ] **Step 2**: If not found, run dynamic search commands -- [ ] **Step 3**: If found dynamically, update the static registry -- [ ] Verify no duplicate exists before creating new component - -### Screen Design -- [ ] Plan sections (Header, Content, Actions, List) -- [ ] Identify reusable components (don't create duplicates!) -- [ ] Follow naming conventions (`Kpt*`, `Mifos*`, `[Feature]*`) - -### Implementation -- [ ] Follow Container + Content pattern -- [ ] Use theme tokens ONLY (no hardcoded values) -- [ ] Use `stringResource()` for all text -- [ ] Use `remember(viewModel)` for callbacks - -### States -- [ ] Add loading state with `KptShimmerLoadingBox` -- [ ] Add error state with `MifosErrorComponent` -- [ ] Add empty state with `EmptyDataView` -- [ ] Add network error state with `NoInternet` -- [ ] Handle dialogs separately - -### Verification -- [ ] Create previews for each state -- [ ] No hardcoded `dp`, `sp`, `Color()` values -- [ ] All strings in `strings.xml` diff --git a/claude-product-cycle/feature-layer/instructions/DI.md b/claude-product-cycle/feature-layer/instructions/DI.md deleted file mode 100644 index 7b8b84ff5..000000000 --- a/claude-product-cycle/feature-layer/instructions/DI.md +++ /dev/null @@ -1,282 +0,0 @@ -# Dependency Injection Patterns - -## Table of Contents -1. [Koin Module](#koin-module) -2. [ViewModel Registration](#viewmodel-registration) -3. [Multiple ViewModels](#multiple-viewmodels) -4. [Module Registration](#module-registration) -5. [Accessing Dependencies](#accessing-dependencies) -6. [Complete Example](#complete-example) - ---- - -## Koin Module - -Create a Koin module for each feature: - -```kotlin -// feature/[name]/di/[Feature]Module.kt - -package org.mifos.mobile.feature.[name].di - -import org.koin.core.module.dsl.viewModelOf -import org.koin.dsl.module -import org.mifos.mobile.feature.[name].[Feature]ViewModel - -val [Feature]Module = module { - viewModelOf(::[Feature]ViewModel) -} -``` - ---- - -## ViewModel Registration - -### Single ViewModel - -```kotlin -val [Feature]Module = module { - viewModelOf(::[Feature]ViewModel) -} -``` - -### ViewModel with SavedStateHandle - -SavedStateHandle is automatically injected: - -```kotlin -// ViewModel constructor -internal class [Feature]ViewModel( - private val repository: [Feature]Repository, - savedStateHandle: SavedStateHandle, // Auto-injected -) : BaseViewModel<...>(...) { - - init { - // Access navigation arguments - val id = savedStateHandle.get("id") - } -} - -// Module - no special registration needed -val [Feature]Module = module { - viewModelOf(::[Feature]ViewModel) -} -``` - ---- - -## Multiple ViewModels - -Register all ViewModels in a feature module: - -```kotlin -val AuthModule = module { - viewModelOf(::LoginViewModel) - viewModelOf(::RegistrationViewModel) - viewModelOf(::OtpAuthenticationViewModel) - viewModelOf(::RecoverPasswordViewModel) - viewModelOf(::SetPasswordViewModel) -} -``` - ---- - -## Module Registration - -### Step 1: Export Module - -```kotlin -// feature/[name]/di/[Feature]Module.kt -val [Feature]Module = module { - viewModelOf(::[Feature]ViewModel) -} -``` - -### Step 2: Register in KoinModules - -```kotlin -// cmp-navigation/src/.../di/KoinModules.kt - -val featureModules = module { - includes( - // Core modules - AuthModule, - HomeModule, - AccountsModule, - - // Account modules - SavingsAccountModule, - LoanModule, - ShareAccountModule, - - // Transaction modules - BeneficiaryModule, - TransferProcessModule, - ThirdPartyTransferModule, - - // Utility modules - NotificationModule, - SettingsModule, - QrModule, - - // Add your module here - [Feature]Module, - ) -} -``` - ---- - -## Accessing Dependencies - -### In ViewModel - -Dependencies are constructor-injected: - -```kotlin -internal class [Feature]ViewModel( - private val repository: [Feature]Repository, - private val userPreferences: UserPreferencesRepository, - private val networkMonitor: NetworkMonitor, -) : BaseViewModel<[Feature]State, [Feature]Event, [Feature]Action>( - initialState = [Feature]State() -) { - // Use injected dependencies - private fun loadData() { - viewModelScope.launch { - repository.getData().collect { ... } - } - } -} -``` - -### In Composable - -Use `koinViewModel()`: - -```kotlin -@Composable -internal fun [Feature]Screen( - onNavigateBack: () -> Unit, - modifier: Modifier = Modifier, - viewModel: [Feature]ViewModel = koinViewModel(), -) { - val state by viewModel.stateFlow.collectAsStateWithLifecycle() - // ... -} -``` - -### With ViewModel Key - -For multiple instances of same ViewModel: - -```kotlin -@Composable -fun [Feature]Screen( - accountId: Long, - viewModel: [Feature]ViewModel = koinViewModel( - key = "account_$accountId" - ), -) { - // Unique ViewModel instance per accountId -} -``` - ---- - -## Complete Example - -### Module Definition - -```kotlin -// feature/beneficiary/di/BeneficiaryModule.kt - -package org.mifos.mobile.feature.beneficiary.di - -import org.koin.core.module.dsl.viewModelOf -import org.koin.dsl.module -import org.mifos.mobile.feature.beneficiary.list.BeneficiaryListViewModel -import org.mifos.mobile.feature.beneficiary.detail.BeneficiaryDetailViewModel -import org.mifos.mobile.feature.beneficiary.add.AddBeneficiaryViewModel -import org.mifos.mobile.feature.beneficiary.edit.EditBeneficiaryViewModel - -val BeneficiaryModule = module { - viewModelOf(::BeneficiaryListViewModel) - viewModelOf(::BeneficiaryDetailViewModel) - viewModelOf(::AddBeneficiaryViewModel) - viewModelOf(::EditBeneficiaryViewModel) -} -``` - -### ViewModel with Dependencies - -```kotlin -// feature/beneficiary/list/BeneficiaryListViewModel.kt - -internal class BeneficiaryListViewModel( - private val beneficiaryRepository: BeneficiaryRepository, -) : BaseViewModel( - initialState = BeneficiaryListState() -) { - init { - loadBeneficiaries() - } - - override fun handleAction(action: BeneficiaryListAction) { - // ... - } - - private fun loadBeneficiaries() { - viewModelScope.launch { - beneficiaryRepository.getBeneficiaries().collect { result -> - // ... - } - } - } -} -``` - -### Screen with ViewModel - -```kotlin -// feature/beneficiary/list/BeneficiaryListScreen.kt - -@Composable -internal fun BeneficiaryListScreen( - onNavigateBack: () -> Unit, - onNavigateToDetail: (Long) -> Unit, - modifier: Modifier = Modifier, - viewModel: BeneficiaryListViewModel = koinViewModel(), -) { - val state by viewModel.stateFlow.collectAsStateWithLifecycle() - - EventsEffect(viewModel.eventFlow) { event -> - when (event) { - is BeneficiaryListEvent.NavigateBack -> onNavigateBack() - is BeneficiaryListEvent.NavigateToDetail -> onNavigateToDetail(event.id) - } - } - - BeneficiaryListContent( - state = state, - onAction = remember(viewModel) { { viewModel.trySendAction(it) } }, - modifier = modifier, - ) -} -``` - -### Registration in KoinModules - -```kotlin -// cmp-navigation/src/.../di/KoinModules.kt - -val featureModules = module { - includes( - AuthModule, - HomeModule, - AccountsModule, - BeneficiaryModule, // Registered here - // ... - ) -} -``` diff --git a/claude-product-cycle/feature-layer/instructions/NAVIGATION.md b/claude-product-cycle/feature-layer/instructions/NAVIGATION.md deleted file mode 100644 index f2a082a6a..000000000 --- a/claude-product-cycle/feature-layer/instructions/NAVIGATION.md +++ /dev/null @@ -1,438 +0,0 @@ -# Navigation Patterns - -## Table of Contents -1. [Route Definition](#route-definition) -2. [NavController Extensions](#navcontroller-extensions) -3. [NavGraphBuilder Extensions](#navgraphbuilder-extensions) -4. [Transitions](#transitions) -5. [Arguments](#arguments) -6. [Type-Safe Destinations](#type-safe-destinations) -7. [Navigation Graph](#navigation-graph) -8. [Complete Example](#complete-example) - ---- - -## Route Definition - -Use `@Serializable` data objects for type-safe navigation: - -### Simple Route - -```kotlin -@Serializable -data object [Feature]Route -``` - -### Route with Arguments - -```kotlin -@Serializable -data class [Feature]DetailRoute( - val id: Long, -) - -@Serializable -data class [Feature]EditRoute( - val id: Long, - val title: String? = null, // Optional argument -) -``` - ---- - -## NavController Extensions - -Create extension functions for navigation: - -### Simple Navigation - -```kotlin -fun NavController.navigateTo[Feature]Screen(navOptions: NavOptions? = null) { - navigate([Feature]Route, navOptions) -} -``` - -### Navigation with Arguments - -```kotlin -fun NavController.navigateTo[Feature]Detail(id: Long) { - navigate([Feature]DetailRoute(id)) -} - -fun NavController.navigateTo[Feature]Edit(id: Long, title: String? = null) { - navigate([Feature]EditRoute(id, title)) -} -``` - -### Navigation with Pop Behavior - -```kotlin -fun NavController.navigateTo[Feature]Screen() { - navigate([Feature]Route) { - popUpTo([Previous]Route) { - inclusive = true - } - } -} -``` - ---- - -## NavGraphBuilder Extensions - -### Simple Screen - -```kotlin -fun NavGraphBuilder.[feature]Screen( - onNavigateBack: () -> Unit, - onNavigateToDetail: (Long) -> Unit, -) { - composableWithStayTransitions<[Feature]Route> { - [Feature]Screen( - onNavigateBack = onNavigateBack, - onNavigateToDetail = onNavigateToDetail, - ) - } -} -``` - -### Screen with Arguments - -```kotlin -fun NavGraphBuilder.[feature]DetailScreen( - onNavigateBack: () -> Unit, -) { - composableWithStayTransitions<[Feature]DetailRoute> { backStackEntry -> - val route = backStackEntry.toRoute<[Feature]DetailRoute>() - [Feature]DetailScreen( - id = route.id, - onNavigateBack = onNavigateBack, - ) - } -} -``` - -### Screen with Optional Arguments - -```kotlin -fun NavGraphBuilder.[feature]EditScreen( - onNavigateBack: () -> Unit, - onSaveComplete: () -> Unit, -) { - composableWithStayTransitions<[Feature]EditRoute> { backStackEntry -> - val route = backStackEntry.toRoute<[Feature]EditRoute>() - [Feature]EditScreen( - id = route.id, - title = route.title, - onNavigateBack = onNavigateBack, - onSaveComplete = onSaveComplete, - ) - } -} -``` - ---- - -## Transitions - -### Standard Transitions - -```kotlin -// Default stay transitions (recommended) -composableWithStayTransitions<[Feature]Route> { - [Feature]Screen(...) -} -``` - -### Custom Transitions - -```kotlin -composable<[Feature]Route>( - enterTransition = { - slideInHorizontally( - initialOffsetX = { fullWidth -> fullWidth }, - animationSpec = tween(300) - ) - }, - exitTransition = { - slideOutHorizontally( - targetOffsetX = { fullWidth -> -fullWidth }, - animationSpec = tween(300) - ) - }, - popEnterTransition = { - slideInHorizontally( - initialOffsetX = { fullWidth -> -fullWidth }, - animationSpec = tween(300) - ) - }, - popExitTransition = { - slideOutHorizontally( - targetOffsetX = { fullWidth -> fullWidth }, - animationSpec = tween(300) - ) - }, -) { - [Feature]Screen(...) -} -``` - -### Fade Transitions - -```kotlin -composable<[Feature]Route>( - enterTransition = { fadeIn(animationSpec = tween(300)) }, - exitTransition = { fadeOut(animationSpec = tween(300)) }, -) { - [Feature]Screen(...) -} -``` - ---- - -## Arguments - -### Primitive Types - -```kotlin -@Serializable -data class [Feature]Route( - val id: Long, - val name: String, - val isEnabled: Boolean = true, - val count: Int = 0, -) -``` - -### Nullable Arguments - -```kotlin -@Serializable -data class [Feature]Route( - val id: Long, - val title: String? = null, // Optional -) -``` - -### Enum Arguments - -```kotlin -@Serializable -enum class AccountType { - SAVINGS, LOAN, SHARE -} - -@Serializable -data class AccountRoute( - val accountType: AccountType, -) -``` - -### Accessing Arguments - -```kotlin -composableWithStayTransitions<[Feature]DetailRoute> { backStackEntry -> - val route = backStackEntry.toRoute<[Feature]DetailRoute>() - - [Feature]DetailScreen( - id = route.id, - title = route.title ?: "Default Title", - ) -} -``` - ---- - -## Type-Safe Destinations - -### Sealed Class Pattern - -```kotlin -sealed class [Feature]Destination { - data object List : [Feature]Destination() - data class Detail(val id: Long) : [Feature]Destination() - data class Edit(val id: Long) : [Feature]Destination() - data object Create : [Feature]Destination() -} - -typealias [Feature]Navigator = ([Feature]Destination) -> Unit -``` - -### Usage in Screen - -```kotlin -@Composable -internal fun [Feature]Screen( - onNavigate: [Feature]Navigator, - onNavigateBack: () -> Unit, -) { - // Navigate to detail - onNavigate([Feature]Destination.Detail(itemId)) - - // Navigate to create - onNavigate([Feature]Destination.Create) -} -``` - -### Usage in NavGraph - -```kotlin -fun NavGraphBuilder.[feature]Screen( - navController: NavController, -) { - composableWithStayTransitions<[Feature]Route> { - [Feature]Screen( - onNavigate = { destination -> - when (destination) { - is [Feature]Destination.Detail -> { - navController.navigateTo[Feature]Detail(destination.id) - } - is [Feature]Destination.Create -> { - navController.navigateTo[Feature]Create() - } - // ... - } - }, - onNavigateBack = { navController.popBackStack() }, - ) - } -} -``` - ---- - -## Navigation Graph - -### Feature Navigation Graph - -```kotlin -// feature/[name]/navigation/[Feature]Navigation.kt - -@Serializable -data object [Feature]GraphRoute - -fun NavGraphBuilder.[feature]NavGraph( - navController: NavController, -) { - navigation<[Feature]GraphRoute>( - startDestination = [Feature]ListRoute, - ) { - [feature]ListScreen( - onNavigateToDetail = { id -> - navController.navigateTo[Feature]Detail(id) - }, - ) - - [feature]DetailScreen( - onNavigateBack = { navController.popBackStack() }, - onNavigateToEdit = { id -> - navController.navigateTo[Feature]Edit(id) - }, - ) - - [feature]EditScreen( - onNavigateBack = { navController.popBackStack() }, - ) - } -} -``` - -### Registering in Main Graph - -```kotlin -// cmp-navigation/.../MainNavGraph.kt - -NavHost( - navController = navController, - startDestination = HomeRoute, -) { - homeScreen(...) - - [feature]NavGraph(navController) - - // OR individual screens - [feature]Screen(...) - [feature]DetailScreen(...) -} -``` - ---- - -## Complete Example - -```kotlin -// feature/beneficiary/navigation/BeneficiaryNavigation.kt - -package org.mifos.mobile.feature.beneficiary.navigation - -import androidx.navigation.NavController -import androidx.navigation.NavGraphBuilder -import androidx.navigation.NavOptions -import androidx.navigation.toRoute -import kotlinx.serialization.Serializable -import org.mifos.mobile.feature.beneficiary.list.BeneficiaryListScreen -import org.mifos.mobile.feature.beneficiary.detail.BeneficiaryDetailScreen -import org.mifos.mobile.feature.beneficiary.add.AddBeneficiaryScreen - -// Routes -@Serializable -data object BeneficiaryListRoute - -@Serializable -data class BeneficiaryDetailRoute(val id: Long) - -@Serializable -data object AddBeneficiaryRoute - -// NavController Extensions -fun NavController.navigateToBeneficiaryList(navOptions: NavOptions? = null) { - navigate(BeneficiaryListRoute, navOptions) -} - -fun NavController.navigateToBeneficiaryDetail(id: Long) { - navigate(BeneficiaryDetailRoute(id)) -} - -fun NavController.navigateToAddBeneficiary() { - navigate(AddBeneficiaryRoute) -} - -// NavGraphBuilder Extensions -fun NavGraphBuilder.beneficiaryListScreen( - onNavigateBack: () -> Unit, - onNavigateToDetail: (Long) -> Unit, - onNavigateToAdd: () -> Unit, -) { - composableWithStayTransitions { - BeneficiaryListScreen( - onNavigateBack = onNavigateBack, - onNavigateToDetail = onNavigateToDetail, - onNavigateToAdd = onNavigateToAdd, - ) - } -} - -fun NavGraphBuilder.beneficiaryDetailScreen( - onNavigateBack: () -> Unit, -) { - composableWithStayTransitions { backStackEntry -> - val route = backStackEntry.toRoute() - BeneficiaryDetailScreen( - beneficiaryId = route.id, - onNavigateBack = onNavigateBack, - ) - } -} - -fun NavGraphBuilder.addBeneficiaryScreen( - onNavigateBack: () -> Unit, - onBeneficiaryAdded: () -> Unit, -) { - composableWithStayTransitions { - AddBeneficiaryScreen( - onNavigateBack = onNavigateBack, - onBeneficiaryAdded = onBeneficiaryAdded, - ) - } -} -``` diff --git a/claude-product-cycle/feature-layer/instructions/UPDATING_FEATURE.md b/claude-product-cycle/feature-layer/instructions/UPDATING_FEATURE.md deleted file mode 100644 index 80d9a6698..000000000 --- a/claude-product-cycle/feature-layer/instructions/UPDATING_FEATURE.md +++ /dev/null @@ -1,309 +0,0 @@ -# Updating Existing Feature - -## Table of Contents -1. [Overview](#overview) -2. [When to Use](#when-to-use) -3. [Pre-Update Checklist](#pre-update-checklist) -4. [Update Workflow](#update-workflow) -5. [Component Updates](#component-updates) -6. [State Migration](#state-migration) -7. [Testing Updates](#testing-updates) -8. [Post-Update Checklist](#post-update-checklist) - ---- - -## Overview - -This guide covers updating existing features for v2.0 UI redesign or improvements. Unlike creating new features, updates require careful consideration of: -- Existing state management -- Current navigation patterns -- Component reusability -- Backward compatibility - ---- - -## When to Use - -Use this guide when: - -| Scenario | Example | -|----------|---------| -| **v2.0 UI Redesign** | Modernizing login screen with new design | -| **Adding Screens** | Adding detail screen to existing feature | -| **Refactoring** | Splitting monolithic screen into sections | -| **Component Migration** | Moving from custom to design system components | -| **Pattern Alignment** | Updating to Container + Content pattern | - ---- - -## Pre-Update Checklist - -Before starting updates: - -- [ ] Read current design spec: `design-spec-layer/features/[feature]/SPEC.md` -- [ ] Review mockups: `design-spec-layer/features/[feature]/MOCKUP.md` -- [ ] Check API changes: `design-spec-layer/features/[feature]/API.md` -- [ ] Understand current implementation structure -- [ ] Identify reusable components -- [ ] Plan state changes (if any) -- [ ] Identify screens that can be updated independently - ---- - -## Update Workflow - -### Step 1: Analyze Current Implementation - -```bash -# List current structure -ls -la feature/[name]/src/commonMain/kotlin/org/mifos/mobile/feature/[name]/ - -# Find all screens -find feature/[name]/ -name "*Screen.kt" - -# Find all ViewModels -find feature/[name]/ -name "*ViewModel.kt" -``` - -### Step 2: Compare with Design Spec - -| Current | Design Spec | Action | -|---------|-------------|--------| -| LoginScreen.kt | Login Screen v2.0 | Update UI | -| - | Biometric Login | Add new screen | -| OldComponent.kt | Removed | Delete | - -### Step 3: Update Order - -**Recommended order:** -1. **State/Action** - Add new fields without breaking existing -2. **ViewModel** - Add new handlers -3. **Components** - Create/update section components -4. **Screen** - Update layout -5. **Navigation** - Add new routes if needed -6. **DI** - Update if new dependencies - ---- - -## Component Updates - -### Replacing Hardcoded Values - -```kotlin -// BEFORE - Hardcoded -Column( - modifier = Modifier.padding(16.dp) -) { - Text( - text = "Title", - fontSize = 24.sp, - color = Color.Black, - ) -} - -// AFTER - Theme tokens -Column( - modifier = Modifier.padding(KptTheme.spacing.md) -) { - Text( - text = stringResource(Res.string.title), - style = MifosTypography.titleLarge, - color = KptTheme.colorScheme.onSurface, - ) -} -``` - -### Replacing Custom Components - -```kotlin -// BEFORE - Custom implementation -Box( - modifier = Modifier - .fillMaxWidth() - .background(Color.Gray) - .padding(16.dp) -) { - // Custom loading -} - -// AFTER - Design system component -KptShimmerLoadingBox( - modifier = Modifier - .fillMaxWidth() - .height(120.dp) - .clip(KptTheme.shapes.medium), -) -``` - -### Section Extraction - -```kotlin -// BEFORE - Monolithic -@Composable -private fun AccountContent(state: State) { - Column { - // 200+ lines of mixed code - Text(state.title) - Text(state.balance) - // ... buttons, lists, etc. - } -} - -// AFTER - Section-based -@Composable -private fun AccountSuccessContent( - state: State, - onAction: (Action) -> Unit, -) { - LazyColumn { - item { AccountHeaderSection(state.title) } - item { AccountBalanceSection(state.balance) } - item { AccountActionsSection(onAction) } - items(state.transactions) { TransactionItem(it) } - } -} -``` - ---- - -## State Migration - -### Adding New Fields - -```kotlin -// BEFORE -data class [Feature]State( - val items: List = emptyList(), - val isLoading: Boolean = false, -) - -// AFTER - Add with defaults (non-breaking) -data class [Feature]State( - val items: List = emptyList(), - val isLoading: Boolean = false, - // New fields with defaults - val selectedFilter: FilterType = FilterType.ALL, - val searchQuery: String = "", - val dialogState: DialogState? = null, -) -``` - -### Adding New Actions - -```kotlin -// BEFORE -sealed interface [Feature]Action { - data class OnItemClick(val id: Long) : [Feature]Action -} - -// AFTER - Add new actions -sealed interface [Feature]Action { - data class OnItemClick(val id: Long) : [Feature]Action - // New actions - data class OnFilterChange(val filter: FilterType) : [Feature]Action - data class OnSearchQuery(val query: String) : [Feature]Action - data object OnClearSearch : [Feature]Action -} -``` - -### Adding New Events - -```kotlin -// BEFORE -sealed interface [Feature]Event { - data object NavigateBack : [Feature]Event -} - -// AFTER - Add new events -sealed interface [Feature]Event { - data object NavigateBack : [Feature]Event - // New events - data class ShowFilterSheet(val options: List) : [Feature]Event - data class ShowToast(val message: String) : [Feature]Event -} -``` - ---- - -## Testing Updates - -### Verify No Regression - -```bash -# Run feature tests -./gradlew :feature:[name]:test - -# Run lint -./gradlew :feature:[name]:detekt - -# Build feature -./gradlew :feature:[name]:build -``` - -### Manual Testing - -- [ ] All existing flows still work -- [ ] New UI matches mockups -- [ ] Loading states display correctly -- [ ] Error states handle gracefully -- [ ] Empty states show appropriate message -- [ ] Navigation works as expected -- [ ] Dialogs open/close properly - ---- - -## Post-Update Checklist - -After completing updates: - -- [ ] All screens follow Container + Content pattern -- [ ] All components use KptTheme tokens (no hardcoded values) -- [ ] All strings in strings.xml (no hardcoded text) -- [ ] Section components in `[screen]/components/` -- [ ] Shared components in `feature/[name]/components/` -- [ ] Previews added for all states -- [ ] Build passes: `./gradlew :feature:[name]:build` -- [ ] Update STATUS.md: `design-spec-layer/features/[feature]/STATUS.md` -- [ ] Update LAYER_STATUS.md if structure changed - ---- - -## Common Update Patterns - -### Pattern 1: Add Search to List Screen - -1. Add state fields: `searchQuery`, `filteredItems` -2. Add actions: `OnSearchQuery`, `OnClearSearch` -3. Add `MifosSearchTextField` above list -4. Filter in ViewModel based on query - -### Pattern 2: Add Detail Screen to Feature - -1. Create `[feature]Detail/` package -2. Add `[Feature]DetailRoute` with argument -3. Add navigation extension function -4. Register in NavGraph -5. Update list screen to navigate on click - -### Pattern 3: Convert to Tab Layout - -1. Add `selectedTab` to state -2. Add `OnTabSelect` action -3. Use `MifosTabPager` or `TabRow` -4. Create content composable per tab - -### Pattern 4: Add Pull-to-Refresh - -1. Add `isRefreshing` to state -2. Add `OnRefresh` action -3. Wrap content with `PullToRefreshBox` -4. Call refresh in ViewModel - ---- - -## Related Files - -- New Feature: [LAYER_GUIDE.md](../LAYER_GUIDE.md#creating-new-feature) -- Compose Patterns: [COMPOSE.md](COMPOSE.md) -- ViewModel Patterns: [VIEWMODEL.md](VIEWMODEL.md) -- Navigation: [NAVIGATION.md](NAVIGATION.md) diff --git a/claude-product-cycle/feature-layer/instructions/VIEWMODEL.md b/claude-product-cycle/feature-layer/instructions/VIEWMODEL.md deleted file mode 100644 index 9fa3f30e9..000000000 --- a/claude-product-cycle/feature-layer/instructions/VIEWMODEL.md +++ /dev/null @@ -1,495 +0,0 @@ -# ViewModel Patterns - -## Table of Contents -1. [BaseViewModel](#baseviewmodel) -2. [State Definition](#state-definition) -3. [ScreenState Definition](#screenstate-definition) -4. [Event Definition](#event-definition) -5. [Action Definition](#action-definition) -6. [Internal Actions](#internal-actions) -7. [handleAction Pattern](#handleaction-pattern) -8. [State Updates](#state-updates) -9. [Async Operations](#async-operations) -10. [Complete Example](#complete-example) - ---- - -## BaseViewModel - -All ViewModels extend `BaseViewModel`: - -```kotlin -internal class [Feature]ViewModel( - private val repository: [Feature]Repository, -) : BaseViewModel<[Feature]State, [Feature]Event, [Feature]Action>( - initialState = [Feature]State() -) { - override fun handleAction(action: [Feature]Action) { - // Handle user actions - } -} -``` - -**Generic Parameters:** -- `State` - UI state data class -- `Event` - One-shot effects (navigation, toasts) -- `Action` - User interactions - ---- - -## State Definition - -Immutable data class holding UI state: - -```kotlin -@Immutable -data class [Feature]State( - val isLoading: Boolean = false, - val items: List = emptyList(), - val selectedItem: Item? = null, - val dialogState: DialogState? = null, - val uiState: [Feature]ScreenState = [Feature]ScreenState.Loading, -) { - // Derived properties - val hasItems: Boolean get() = items.isNotEmpty() - val isButtonEnabled: Boolean get() = selectedItem != null - - // Nested sealed interface for dialogs - sealed interface DialogState { - data class Error(val message: String) : DialogState - data class Confirm(val item: Item) : DialogState - } -} -``` - -**Rules:** -- Always use `@Immutable` annotation -- Use default values for all properties -- Derived properties via `get()` for computed values -- Nested `DialogState` for dialog management - ---- - -## ScreenState Definition - -Loading/Success/Error states: - -```kotlin -sealed interface [Feature]ScreenState { - data object Loading : [Feature]ScreenState - data object Success : [Feature]ScreenState - data object Empty : [Feature]ScreenState - data class Error(val message: StringResource) : [Feature]ScreenState - data object Network : [Feature]ScreenState -} -``` - -**Standard States:** -| State | Purpose | -|-------|---------| -| `Loading` | Initial load or refresh | -| `Success` | Data loaded successfully | -| `Empty` | No data available | -| `Error` | Error with message | -| `Network` | No internet connection | - ---- - -## Event Definition - -One-shot effects (navigation, toasts): - -```kotlin -sealed interface [Feature]Event { - data object NavigateBack : [Feature]Event - data class NavigateToDetail(val id: Long) : [Feature]Event - data class ShowToast(val message: String) : [Feature]Event - data object ShowSuccess : [Feature]Event -} -``` - -**When to Use Events:** -- Navigation between screens -- Showing snackbars/toasts -- One-time UI effects -- NOT for state changes (use State instead) - ---- - -## Action Definition - -User interactions: - -```kotlin -sealed interface [Feature]Action { - // User-initiated actions - data object OnRefresh : [Feature]Action - data object OnRetry : [Feature]Action - data object OnNavigateBack : [Feature]Action - data class OnItemClick(val id: Long) : [Feature]Action - data class OnSearchQuery(val query: String) : [Feature]Action - data object OnDismissDialog : [Feature]Action - data class OnDeleteItem(val id: Long) : [Feature]Action - - // Internal actions for async results - sealed interface Internal : [Feature]Action { - data class ReceiveData(val result: DataState) : Internal - data class ReceiveDeleteResult(val result: DataState) : Internal - } -} -``` - -**Naming Convention:** -- Prefix with `On` for user actions -- Use present tense (`OnClick`, not `Clicked`) - ---- - -## Internal Actions - -Handle async operation results: - -```kotlin -sealed interface Internal : [Feature]Action { - data class ReceiveData(val result: DataState) : Internal - data class ReceiveDeleteResult(val result: DataState) : Internal - data class ReceiveUpdateResult(val result: DataState) : Internal -} -``` - -**Purpose:** -- Decouple async operations from state updates -- Testable state transitions -- Clear separation of concerns - -**Usage in ViewModel:** -```kotlin -private fun loadData() { - viewModelScope.launch { - repository.getData().collect { result -> - sendAction([Feature]Action.Internal.ReceiveData(result)) - } - } -} - -override fun handleAction(action: [Feature]Action) { - when (action) { - is [Feature]Action.Internal.ReceiveData -> handleDataResult(action.result) - // ... - } -} -``` - ---- - -## handleAction Pattern - -Central action handler: - -```kotlin -override fun handleAction(action: [Feature]Action) { - when (action) { - // Navigation actions - is [Feature]Action.OnNavigateBack -> { - sendEvent([Feature]Event.NavigateBack) - } - - // Data actions - is [Feature]Action.OnRefresh -> loadData() - is [Feature]Action.OnRetry -> loadData() - - // Item actions - is [Feature]Action.OnItemClick -> { - sendEvent([Feature]Event.NavigateToDetail(action.id)) - } - is [Feature]Action.OnDeleteItem -> deleteItem(action.id) - - // Dialog actions - is [Feature]Action.OnDismissDialog -> { - updateState { it.copy(dialogState = null) } - } - - // Internal actions - is [Feature]Action.Internal.ReceiveData -> { - handleDataResult(action.result) - } - is [Feature]Action.Internal.ReceiveDeleteResult -> { - handleDeleteResult(action.result) - } - } -} -``` - -**Best Practices:** -- Keep `when` branches concise -- Delegate complex logic to private functions -- Group related actions together - ---- - -## State Updates - -Use `updateState` for immutable updates: - -```kotlin -private fun updateState(update: ([Feature]State) -> [Feature]State) { - mutableStateFlow.update(update) -} - -// Simple update -updateState { it.copy(isLoading = true) } - -// Multiple properties -updateState { state -> - state.copy( - items = newItems, - uiState = [Feature]ScreenState.Success, - isLoading = false - ) -} - -// Conditional update -updateState { state -> - state.copy( - uiState = if (items.isEmpty()) { - [Feature]ScreenState.Empty - } else { - [Feature]ScreenState.Success - } - ) -} -``` - ---- - -## Async Operations - -### Basic Pattern - -```kotlin -private var loadJob: Job? = null - -private fun loadData() { - loadJob?.cancel() - loadJob = viewModelScope.launch { - updateState { it.copy(uiState = [Feature]ScreenState.Loading) } - - repository.getData() - .collect { result -> - sendAction([Feature]Action.Internal.ReceiveData(result)) - } - } -} -``` - -### Handling Results - -```kotlin -private fun handleDataResult(result: DataState>) { - when (result) { - is DataState.Loading -> { - updateState { it.copy(uiState = [Feature]ScreenState.Loading) } - } - is DataState.Success -> { - updateState { state -> - state.copy( - items = result.data, - uiState = if (result.data.isEmpty()) { - [Feature]ScreenState.Empty - } else { - [Feature]ScreenState.Success - } - ) - } - } - is DataState.Error -> { - updateState { state -> - state.copy( - uiState = [Feature]ScreenState.Error( - Res.string.error_loading_data - ) - ) - } - } - } -} -``` - -### Multiple Operations - -```kotlin -private var loadJob: Job? = null -private var deleteJob: Job? = null - -private fun deleteItem(id: Long) { - deleteJob?.cancel() - deleteJob = viewModelScope.launch { - updateState { it.copy(isDeleting = true) } - - repository.deleteItem(id) - .collect { result -> - sendAction([Feature]Action.Internal.ReceiveDeleteResult(result)) - } - } -} -``` - ---- - -## Complete Example - -```kotlin -// [Feature].kt - State/Event/Action definitions - -@Immutable -data class [Feature]State( - val items: List = emptyList(), - val selectedItem: Item? = null, - val dialogState: DialogState? = null, - val uiState: [Feature]ScreenState = [Feature]ScreenState.Loading, -) { - val hasItems: Boolean get() = items.isNotEmpty() - - sealed interface DialogState { - data class Error(val message: String) : DialogState - data class ConfirmDelete(val item: Item) : DialogState - } -} - -sealed interface [Feature]ScreenState { - data object Loading : [Feature]ScreenState - data object Success : [Feature]ScreenState - data object Empty : [Feature]ScreenState - data class Error(val message: StringResource) : [Feature]ScreenState -} - -sealed interface [Feature]Event { - data object NavigateBack : [Feature]Event - data class NavigateToDetail(val id: Long) : [Feature]Event - data class ShowToast(val message: String) : [Feature]Event -} - -sealed interface [Feature]Action { - data object OnRefresh : [Feature]Action - data object OnRetry : [Feature]Action - data class OnItemClick(val id: Long) : [Feature]Action - data class OnDeleteClick(val item: Item) : [Feature]Action - data object OnConfirmDelete : [Feature]Action - data object OnDismissDialog : [Feature]Action - - sealed interface Internal : [Feature]Action { - data class ReceiveData(val result: DataState>) : Internal - data class ReceiveDeleteResult(val result: DataState) : Internal - } -} -``` - -```kotlin -// [Feature]ViewModel.kt - -internal class [Feature]ViewModel( - private val repository: [Feature]Repository, -) : BaseViewModel<[Feature]State, [Feature]Event, [Feature]Action>( - initialState = [Feature]State() -) { - private var loadJob: Job? = null - private var deleteJob: Job? = null - - init { - loadData() - } - - override fun handleAction(action: [Feature]Action) { - when (action) { - is [Feature]Action.OnRefresh -> loadData() - is [Feature]Action.OnRetry -> loadData() - - is [Feature]Action.OnItemClick -> { - sendEvent([Feature]Event.NavigateToDetail(action.id)) - } - - is [Feature]Action.OnDeleteClick -> { - updateState { - it.copy(dialogState = [Feature]State.DialogState.ConfirmDelete(action.item)) - } - } - - is [Feature]Action.OnConfirmDelete -> { - val item = (state.dialogState as? [Feature]State.DialogState.ConfirmDelete)?.item - item?.let { deleteItem(it.id) } - updateState { it.copy(dialogState = null) } - } - - is [Feature]Action.OnDismissDialog -> { - updateState { it.copy(dialogState = null) } - } - - is [Feature]Action.Internal.ReceiveData -> { - handleDataResult(action.result) - } - - is [Feature]Action.Internal.ReceiveDeleteResult -> { - handleDeleteResult(action.result) - } - } - } - - private fun loadData() { - loadJob?.cancel() - loadJob = viewModelScope.launch { - repository.getData().collect { result -> - sendAction([Feature]Action.Internal.ReceiveData(result)) - } - } - } - - private fun deleteItem(id: Long) { - deleteJob?.cancel() - deleteJob = viewModelScope.launch { - repository.deleteItem(id).collect { result -> - sendAction([Feature]Action.Internal.ReceiveDeleteResult(result)) - } - } - } - - private fun handleDataResult(result: DataState>) { - when (result) { - is DataState.Loading -> { - updateState { it.copy(uiState = [Feature]ScreenState.Loading) } - } - is DataState.Success -> { - updateState { state -> - state.copy( - items = result.data, - uiState = if (result.data.isEmpty()) { - [Feature]ScreenState.Empty - } else { - [Feature]ScreenState.Success - } - ) - } - } - is DataState.Error -> { - updateState { - it.copy(uiState = [Feature]ScreenState.Error(Res.string.error_loading)) - } - } - } - } - - private fun handleDeleteResult(result: DataState) { - when (result) { - is DataState.Loading -> { /* Optional: show loading */ } - is DataState.Success -> { - sendEvent([Feature]Event.ShowToast("Item deleted")) - loadData() // Refresh list - } - is DataState.Error -> { - updateState { - it.copy(dialogState = [Feature]State.DialogState.Error(result.message)) - } - } - } - } -} -``` diff --git a/claude-product-cycle/plans/PLANS_INDEX.md b/claude-product-cycle/plans/PLANS_INDEX.md deleted file mode 100644 index 8f0827c4b..000000000 --- a/claude-product-cycle/plans/PLANS_INDEX.md +++ /dev/null @@ -1,116 +0,0 @@ -# Plans Index - O(1) Lookup - -> Track implementation plans created by `/gap-planning` - -**Last Updated**: 2026-01-05 - ---- - -## Quick Overview - -| Status | Count | Description | -|:------:|:-----:|-------------| -| 🔄 Active | 0 | Plans in progress | -| ✅ Completed | 0 | Finished plans | -| ⏸️ Paused | 0 | Plans on hold | - ---- - -## Active Plans - -| # | Plan | Target | Progress | Current Step | Created | -|:-:|------|--------|:--------:|--------------|---------| -| - | (none) | - | - | - | - | - ---- - -## Completed Plans - -| # | Plan | Target | Steps | Completed | -|:-:|------|--------|:-----:|-----------| -| - | (none) | - | - | - | - ---- - -## Plan File Format - -Each plan file in `active/` or `completed/` follows this format: - -```markdown -# Plan: [Target Name] - -**Created**: YYYY-MM-DD -**Status**: 🔄 Active | ✅ Completed | ⏸️ Paused -**Command**: /gap-planning [args] -**Progress**: X/Y steps (Z%) - ---- - -## Steps - -- [ ] **Step 1**: Description - - Sub-task 1 - - Sub-task 2 - - Files: `path/to/file.kt` - -- [ ] **Step 2**: Description - - Sub-task 1 - - Files: `path/to/file.kt` - -- [x] **Step 3**: Description (COMPLETED) - - ✅ Sub-task 1 - - ✅ Sub-task 2 - ---- - -## Progress Log - -| Date | Step | Action | Outcome | -|------|------|--------|---------| -| YYYY-MM-DD | 1 | Started | In progress | -| YYYY-MM-DD | 1 | Completed | Files created | -``` - ---- - -## O(1) Path Pattern - -``` -plans/active/[target]-[type].md # Active plan -plans/completed/[target]-[type].md # Completed plan -``` - -Examples: -- `plans/active/design-mockup.md` -- `plans/active/testing-auth.md` -- `plans/active/feature-beneficiary.md` -- `plans/completed/client-layer.md` - ---- - -## Commands - -```bash -# Check status of all plans -/gap-status # Shows this index + active plans - -# Check status of specific plan -/gap-status design mockup # Shows design-mockup.md progress - -# Create new plan -/gap-planning [target] # Creates plan in plans/active/ - -# Mark plan complete -/gap-status complete [plan] # Moves to plans/completed/ -``` - ---- - -## Auto-Update Rules - -| Trigger | Action | -|---------|--------| -| `/gap-planning [target]` | Create plan file, add to Active Plans | -| `/gap-status complete [plan]` | Move to Completed Plans | -| Step completed | Update progress in plan file | -| `/implement` checkpoint | Update related plan progress | diff --git a/claude-product-cycle/platform-layer/LAYER_GUIDE.md b/claude-product-cycle/platform-layer/LAYER_GUIDE.md deleted file mode 100644 index 4fd0b7f14..000000000 --- a/claude-product-cycle/platform-layer/LAYER_GUIDE.md +++ /dev/null @@ -1,195 +0,0 @@ -# Platform Layer Guide - -> Platform-specific patterns and configurations for Mifos Mobile KMP - ---- - -## Architecture Overview - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ Platform Layer (cmp-android, cmp-ios, cmp-desktop, cmp-web) │ -├─────────────────────────────────────────────────────────────────┤ -│ Shared Layer (cmp-shared, cmp-navigation) │ -├─────────────────────────────────────────────────────────────────┤ -│ Feature Layer (feature/*) │ -├─────────────────────────────────────────────────────────────────┤ -│ Core Layer (core/*) │ -└─────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Kotlin Multiplatform Targets - -| Target | Platform | Kotlin Target | -|--------|----------|---------------| -| Android | Android 7.0+ | `android()` | -| iOS | iOS 14+ | `iosArm64()`, `iosSimulatorArm64()` | -| Desktop | JVM 17+ | `jvm()` | -| Web | Modern browsers | `js(IR)` | - ---- - -## Platform-Specific Code - -### Source Sets Structure - -``` -src/ -├── commonMain/ # Shared code (all platforms) -├── commonTest/ # Shared tests -├── androidMain/ # Android-specific -├── iosMain/ # iOS-specific -├── jvmMain/ # Desktop-specific -└── jsMain/ # Web-specific -``` - -### Expect/Actual Pattern - -```kotlin -// commonMain - expect declaration -expect fun getPlatformName(): String - -// androidMain - actual implementation -actual fun getPlatformName(): String = "Android" - -// iosMain - actual implementation -actual fun getPlatformName(): String = "iOS" -``` - ---- - -## Dependency Injection - -### Koin Setup Per Platform - -**Android** (`cmp-android`): -```kotlin -class MifosApplication : Application() { - override fun onCreate() { - super.onCreate() - startKoin { - androidContext(this@MifosApplication) - modules(appModule) - } - } -} -``` - -**iOS** (`cmp-ios`): -```swift -KoinKt.doInitKoin() -``` - -**Desktop/Web**: -```kotlin -fun main() { - startKoin { - modules(appModule) - } -} -``` - ---- - -## Navigation - -### Compose Navigation (Cross-Platform) - -```kotlin -// cmp-navigation/ -NavHost( - navController = navController, - startDestination = ROOT_GRAPH, -) { - authGraph(navController) - passcodeGraph(navController) - mainGraph(navController) -} -``` - -### Navigation Graphs - -| Graph | Content | -|-------|---------| -| ROOT_GRAPH | Entry point, splash | -| AUTH_GRAPH | Login, Registration | -| PASSCODE_GRAPH | Passcode setup/verify | -| MAIN_GRAPH | Main app content | - ---- - -## Platform Capabilities - -| Capability | Android | iOS | Desktop | Web | -|------------|:-------:|:---:|:-------:|:---:| -| Biometrics | ✅ | ✅ | ❌ | ❌ | -| Push Notifications | ✅ | ✅ | ❌ | ⚠️ | -| Camera (QR) | ✅ | ✅ | ⚠️ | ⚠️ | -| Location | ✅ | ✅ | ❌ | ⚠️ | -| Local Storage | ✅ | ✅ | ✅ | ✅ | -| Deep Links | ✅ | ✅ | ❌ | ✅ | - ---- - -## Build Variants - -### Android Flavors - -| Flavor | Purpose | Base URL | -|--------|---------|----------| -| demo | Development | tt.mifos.community | -| prod | Production | Configurable | - -### Build Types - -| Type | Debug | Minify | Signing | -|------|:-----:|:------:|---------| -| debug | ✅ | ❌ | Debug key | -| release | ❌ | ✅ | Release key | - ---- - -## Testing - -### Platform Testing Strategy - -| Test Type | Location | Runner | -|-----------|----------|--------| -| Unit Tests | `commonTest/` | JUnit/Kotest | -| Android Tests | `androidTest/` | Android Instrumented | -| iOS Tests | `iosTest/` | XCTest | -| UI Tests | Platform-specific | Compose Test | - ---- - -## Resources - -### Platform Resources Location - -| Platform | Resources | -|----------|-----------| -| Android | `cmp-android/src/main/res/` | -| iOS | `cmp-ios/iosApp/Assets.xcassets/` | -| Desktop | `cmp-desktop/src/main/resources/` | -| Web | `cmp-web/src/jsMain/resources/` | - -### Shared Resources (Compose Resources) - -``` -core/designsystem/src/commonMain/composeResources/ -├── drawable/ -├── values/ -└── font/ -``` - ---- - -## Related Files - -- [LAYER_STATUS.md](LAYER_STATUS.md) - Platform status -- [platforms/ANDROID.md](platforms/ANDROID.md) - Android details -- [platforms/IOS.md](platforms/IOS.md) - iOS details -- [platforms/DESKTOP.md](platforms/DESKTOP.md) - Desktop details -- [platforms/WEB.md](platforms/WEB.md) - Web details diff --git a/claude-product-cycle/platform-layer/LAYER_STATUS.md b/claude-product-cycle/platform-layer/LAYER_STATUS.md deleted file mode 100644 index b448c8508..000000000 --- a/claude-product-cycle/platform-layer/LAYER_STATUS.md +++ /dev/null @@ -1,102 +0,0 @@ -# Platform Layer Status - -> **4 platforms** | Android primary | KMP shared code - ---- - -## Platform Matrix - -| Platform | Module | Build | Flavors | Status | -|----------|--------|:-----:|:-------:|:------:| -| Android | cmp-android | ✅ | demo, prod | Primary | -| iOS | cmp-ios | ✅ | - | CocoaPods | -| Desktop | cmp-desktop | ✅ | - | JVM | -| Web | cmp-web | ⚠️ | - | Kotlin/JS | - -**Legend**: ✅ Working | ⚠️ Experimental | ❌ Not Working - ---- - -## O(1) Platform Lookup - -| Need | Read File | -|------|-----------| -| Android build | [platforms/ANDROID.md](platforms/ANDROID.md) | -| iOS setup | [platforms/IOS.md](platforms/IOS.md) | -| Desktop config | [platforms/DESKTOP.md](platforms/DESKTOP.md) | -| Web config | [platforms/WEB.md](platforms/WEB.md) | - ---- - -## Shared Modules - -| Module | Purpose | Target | -|--------|---------|--------| -| cmp-shared | KMP shared code | All platforms | -| cmp-navigation | Cross-platform navigation | All platforms | -| core/* | Core business logic | All platforms | -| feature/* | Feature modules | All platforms | - ---- - -## Build Commands Quick Reference - -| Platform | Debug | Release | -|----------|-------|---------| -| Android | `./gradlew :cmp-android:assembleDemoDebug` | `./gradlew :cmp-android:assembleProdRelease` | -| Desktop | `./gradlew :cmp-desktop:run` | `./gradlew :cmp-desktop:packageDmg` | -| Web | `./gradlew :cmp-web:jsBrowserRun` | `./gradlew :cmp-web:jsBrowserProductionWebpack` | -| iOS | Xcode Build | Archive & Distribute | - ---- - -## Platform Entry Points - -| Platform | Entry Point | Location | -|----------|-------------|----------| -| Android | MainActivity | `cmp-android/src/main/kotlin/.../MainActivity.kt` | -| iOS | iosApp | `cmp-ios/iosApp/` | -| Desktop | Main.kt | `cmp-desktop/src/main/kotlin/.../Main.kt` | -| Web | Main.kt | `cmp-web/src/jsMain/kotlin/.../Main.kt` | - ---- - -## Gradle Module Configuration - -| Module | Build File | -|--------|------------| -| cmp-android | `cmp-android/build.gradle.kts` | -| cmp-ios | Uses CocoaPods via `cmp-shared` | -| cmp-desktop | `cmp-desktop/build.gradle.kts` | -| cmp-web | `cmp-web/build.gradle.kts` | -| cmp-shared | `cmp-shared/build.gradle.kts` | -| cmp-navigation | `cmp-navigation/build.gradle.kts` | - ---- - -## CI/CD Status - -| Platform | CI Pipeline | Status | -|----------|-------------|--------| -| Android | GitHub Actions | ✅ | -| iOS | - | ⚠️ Manual | -| Desktop | - | ⚠️ Manual | -| Web | - | ⚠️ Manual | - ---- - -## Related Files - -- [LAYER_GUIDE.md](LAYER_GUIDE.md) - Platform-specific patterns -- [platforms/](platforms/) - Platform-specific documentation -- [../CLAUDE.md](../../CLAUDE.md) - Project overview - ---- - -## Auto-Update Rules - -| Scenario | Action | -|----------|--------| -| Platform status changes | Update Platform Matrix | -| New build variant added | Update Build Commands | -| CI/CD configured | Update CI/CD Status | diff --git a/claude-product-cycle/platform-layer/TESTING_STATUS.md b/claude-product-cycle/platform-layer/TESTING_STATUS.md deleted file mode 100644 index 2e8914c12..000000000 --- a/claude-product-cycle/platform-layer/TESTING_STATUS.md +++ /dev/null @@ -1,279 +0,0 @@ -# Platform Layer - Testing Status - -> E2E, Screenshot, and Platform-specific testing documentation - ---- - -## Overview - -The platform layer handles platform-specific testing: -- E2E integration tests (full user journeys) -- Screenshot/visual regression tests (Roborazzi) -- Platform-specific functionality tests - ---- - -## Current State - -| Platform | E2E Tests | Screenshot Tests | Status | -|----------|:---------:|:----------------:|:------:| -| Android | 0 | 0 | ⬜ Not Started | -| iOS | - | - | ⚠️ Manual | -| Desktop | 0 | 0 | ⬜ Not Started | -| Web | 0 | 0 | ⬜ Not Started | - ---- - -## Testing by Platform - -### Android (Primary) - -| Test Type | Framework | Location | Status | -|-----------|-----------|----------|:------:| -| E2E Tests | Compose UI Test | `cmp-android/src/androidTest/` | ⬜ | -| Screenshot | Roborazzi | `core/designsystem/src/test/` | ⬜ | -| Unit Tests | JUnit | `cmp-android/src/test/` | ⬜ | - -### iOS (CocoaPods) - -| Test Type | Framework | Location | Status | -|-----------|-----------|----------|:------:| -| UI Tests | XCUITest | `cmp-ios/iosApp/` | ⬜ | -| Unit Tests | XCTest | `cmp-ios/iosApp/` | ⬜ | - -### Desktop (JVM) - -| Test Type | Framework | Location | Status | -|-----------|-----------|----------|:------:| -| UI Tests | Compose Desktop Test | `cmp-desktop/src/test/` | ⬜ | -| Unit Tests | JUnit | `cmp-desktop/src/test/` | ⬜ | - -### Web (Kotlin/JS) - -| Test Type | Framework | Location | Status | -|-----------|-----------|----------|:------:| -| E2E Tests | Playwright/Cypress | TBD | ⬜ | -| Unit Tests | kotlin.test | `cmp-web/src/jsTest/` | ⬜ | - ---- - -## E2E Test Scenarios - -### Critical User Journeys - -| # | Journey | Platforms | Tests | Status | -|:-:|---------|-----------|:-----:|:------:| -| 1 | Onboarding → Login → Home | Android | 0 | ⬜ | -| 2 | Registration → OTP → Login | Android | 0 | ⬜ | -| 3 | Home → Account Details | Android | 0 | ⬜ | -| 4 | Home → Transfer → Confirm | Android | 0 | ⬜ | -| 5 | Home → Loan Details → Schedule | Android | 0 | ⬜ | -| 6 | Settings → Change Password | Android | 0 | ⬜ | -| 7 | QR Scan → Transfer | Android | 0 | ⬜ | -| 8 | Offline → Online Sync | Android | 0 | ⬜ | - ---- - -## Screenshot Testing (Roborazzi) - -### Configuration - -**Location**: `core/designsystem/src/test/` - -```kotlin -@RunWith(RobolectricTestRunner::class) -@GraphicsMode(GraphicsMode.Mode.NATIVE) -class ComponentScreenshotTest { - @get:Rule - val roborazziRule = RoborazziRule( - options = RoborazziRule.Options( - captureType = RoborazziRule.CaptureType.LastImage - ) - ) - - @Test - fun mifosButton_light() { - composeTestRule.setContent { - MifosTheme(darkTheme = false) { - MifosButton(text = "Login", onClick = {}) - } - } - composeTestRule.onRoot().captureRoboImage() - } - - @Test - fun mifosButton_dark() { - composeTestRule.setContent { - MifosTheme(darkTheme = true) { - MifosButton(text = "Login", onClick = {}) - } - } - composeTestRule.onRoot().captureRoboImage() - } -} -``` - -### Screenshot Test Coverage - -| Component | Light | Dark | Status | -|-----------|:-----:|:----:|:------:| -| MifosButton | ⬜ | ⬜ | Not Started | -| MifosTextField | ⬜ | ⬜ | Not Started | -| MifosCard | ⬜ | ⬜ | Not Started | -| MifosTopBar | ⬜ | ⬜ | Not Started | -| MifosBottomNav | ⬜ | ⬜ | Not Started | -| MifosDialog | ⬜ | ⬜ | Not Started | -| MifosLoadingWheel | ⬜ | ⬜ | Not Started | -| AccountCard | ⬜ | ⬜ | Not Started | -| TransactionItem | ⬜ | ⬜ | Not Started | -| BeneficiaryItem | ⬜ | ⬜ | Not Started | - ---- - -## Screen Screenshot Tests - -| # | Feature | Screens | Golden Images | Status | -|:-:|---------|:-------:|:-------------:|:------:| -| 1 | auth | 6 | 0 | ⬜ | -| 2 | home | 1 | 0 | ⬜ | -| 3 | accounts | 3 | 0 | ⬜ | -| 4 | savings-account | 4 | 0 | ⬜ | -| 5 | loan-account | 4 | 0 | ⬜ | -| 6 | share-account | 2 | 0 | ⬜ | -| 7 | beneficiary | 4 | 0 | ⬜ | -| 8 | transfer | 2 | 0 | ⬜ | -| 9 | recent-transaction | 1 | 0 | ⬜ | -| 10 | notification | 1 | 0 | ⬜ | -| 11 | settings | 9 | 0 | ⬜ | -| 12 | passcode | 2 | 0 | ⬜ | -| 13 | guarantor | 3 | 0 | ⬜ | -| 14 | qr | 3 | 0 | ⬜ | -| 15 | location | 1 | 0 | ⬜ | -| 16 | user-profile | 2 | 0 | ⬜ | - ---- - -## Platform-Specific Tests - -### Android-Specific - -| Test | Description | Status | -|------|-------------|:------:| -| Deep Links | Verify deep link handling | ⬜ | -| Notifications | Push notification handling | ⬜ | -| Biometrics | Fingerprint/Face ID login | ⬜ | -| Camera | QR code scanning | ⬜ | -| Location | Branch finder | ⬜ | -| Back Navigation | System back button | ⬜ | - -### iOS-Specific - -| Test | Description | Status | -|------|-------------|:------:| -| Deep Links | Universal links | ⬜ | -| Notifications | APNs handling | ⬜ | -| Biometrics | Touch ID/Face ID | ⬜ | -| Camera | QR code scanning | ⬜ | -| Location | Core Location | ⬜ | - -### Desktop-Specific - -| Test | Description | Status | -|------|-------------|:------:| -| Window Management | Resize, minimize | ⬜ | -| Keyboard Shortcuts | Standard shortcuts | ⬜ | -| System Tray | Optional integration | ⬜ | - -### Web-Specific - -| Test | Description | Status | -|------|-------------|:------:| -| Browser Compat | Chrome, Firefox, Safari | ⬜ | -| CORS Handling | API requests | ⬜ | -| Responsive | Mobile/Tablet/Desktop | ⬜ | -| PWA | Service worker, offline | ⬜ | - ---- - -## CI/CD Integration - -### GitHub Actions Workflow - -```yaml -# .github/workflows/test.yml -name: Tests - -on: [push, pull_request] - -jobs: - unit-tests: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v4 - - name: Set up JDK 21 - uses: actions/setup-java@v4 - with: - java-version: '21' - distribution: 'temurin' - - name: Run unit tests - run: ./gradlew test - - android-tests: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v4 - - name: Run Android tests - run: ./gradlew :cmp-android:connectedDebugAndroidTest - - screenshot-tests: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v4 - - name: Run Roborazzi tests - run: ./gradlew :core:designsystem:testDebugUnitTest - - name: Compare screenshots - run: ./gradlew :core:designsystem:compareRoborazziDebug -``` - ---- - -## Implementation Priority - -| Phase | Platform | Tests | Effort | -|:-----:|----------|:-----:|:------:| -| 1 | Android E2E | 20 | L | -| 2 | Screenshot (Roborazzi) | 30 | M | -| 3 | iOS UI | 10 | M | -| 4 | Desktop | 5 | S | -| 5 | Web | 10 | M | - ---- - -## Commands - -```bash -# Run Android E2E tests -./gradlew :cmp-android:connectedDebugAndroidTest - -# Run screenshot tests -./gradlew :core:designsystem:testDebugUnitTest - -# Record new screenshots -./gradlew :core:designsystem:recordRoborazziDebug - -# Compare screenshots -./gradlew :core:designsystem:compareRoborazziDebug - -# Check platform test status -/gap-analysis platform testing -``` - ---- - -## Related Files - -- [LAYER_STATUS.md](./LAYER_STATUS.md) - Platform status -- [platforms/ANDROID.md](./platforms/ANDROID.md) - Android details -- [platforms/IOS.md](./platforms/IOS.md) - iOS details -- [platforms/DESKTOP.md](./platforms/DESKTOP.md) - Desktop details -- [platforms/WEB.md](./platforms/WEB.md) - Web details diff --git a/claude-product-cycle/platform-layer/platforms/ANDROID.md b/claude-product-cycle/platform-layer/platforms/ANDROID.md deleted file mode 100644 index 5eb563e46..000000000 --- a/claude-product-cycle/platform-layer/platforms/ANDROID.md +++ /dev/null @@ -1,109 +0,0 @@ -# Android Platform - -## Module: cmp-android - -> Primary platform target for Mifos Mobile - ---- - -## Build Flavors - -| Flavor | API Base | Use Case | -|--------|----------|----------| -| demo | tt.mifos.community | Development/Testing | -| prod | Configurable | Production | - ---- - -## Build Commands - -| Command | Output | -|---------|--------| -| `./gradlew :cmp-android:assembleDemoDebug` | Demo debug APK | -| `./gradlew :cmp-android:assembleDemoRelease` | Demo release APK | -| `./gradlew :cmp-android:assembleProdDebug` | Prod debug APK | -| `./gradlew :cmp-android:assembleProdRelease` | Production release APK | -| `./gradlew :cmp-android:lintRelease` | Lint checks | -| `./gradlew :cmp-android:testDebug` | Run unit tests | - ---- - -## Key Files - -| File | Purpose | -|------|---------| -| `cmp-android/build.gradle.kts` | Module configuration | -| `cmp-android/src/main/AndroidManifest.xml` | App manifest | -| `cmp-android/src/main/kotlin/.../MainActivity.kt` | Entry point | -| `cmp-android/src/main/kotlin/.../MifosApplication.kt` | Application class | - ---- - -## Gradle Configuration - -```kotlin -android { - namespace = "org.mifos.mobile" - compileSdk = 34 - - defaultConfig { - applicationId = "org.mifos.mobile" - minSdk = 24 - targetSdk = 34 - } - - productFlavors { - create("demo") { ... } - create("prod") { ... } - } -} -``` - ---- - -## Signing Configuration - -### Debug -- Auto-generated debug keystore -- Location: `~/.android/debug.keystore` - -### Release -- Requires `keystore.properties` file -- Keys: `storeFile`, `storePassword`, `keyAlias`, `keyPassword` - ---- - -## Dependencies - -| Category | Key Dependencies | -|----------|------------------| -| Compose | Compose BOM, Material3 | -| DI | Koin Android | -| Network | Ktor Android | -| Storage | DataStore, Room | - ---- - -## Android-Specific Features - -| Feature | Implementation | -|---------|----------------| -| Biometrics | AndroidX Biometric | -| Push Notifications | Firebase Cloud Messaging | -| Deep Links | Intent Filters | -| Splash Screen | SplashScreen API | - ---- - -## ProGuard/R8 - -- Rules in `proguard-rules.pro` -- Keep rules for serialization -- Ktor client rules - ---- - -## Related - -- [LAYER_STATUS.md](../LAYER_STATUS.md) - Platform overview -- [LAYER_GUIDE.md](../LAYER_GUIDE.md) - Architecture patterns diff --git a/claude-product-cycle/platform-layer/platforms/DESKTOP.md b/claude-product-cycle/platform-layer/platforms/DESKTOP.md deleted file mode 100644 index e76faa1e9..000000000 --- a/claude-product-cycle/platform-layer/platforms/DESKTOP.md +++ /dev/null @@ -1,109 +0,0 @@ -# Desktop Platform - -## Module: cmp-desktop - -> JVM-based desktop application using Compose for Desktop - ---- - -## Build Commands - -| Command | Action | -|---------|--------| -| `./gradlew :cmp-desktop:run` | Run desktop app | -| `./gradlew :cmp-desktop:packageDmg` | Package macOS DMG | -| `./gradlew :cmp-desktop:packageMsi` | Package Windows MSI | -| `./gradlew :cmp-desktop:packageDeb` | Package Linux DEB | -| `./gradlew :cmp-desktop:packageRpm` | Package Linux RPM | - ---- - -## Key Files - -| File | Purpose | -|------|---------| -| `cmp-desktop/build.gradle.kts` | Module configuration | -| `cmp-desktop/src/main/kotlin/.../Main.kt` | Entry point | -| `cmp-desktop/src/main/resources/` | Desktop resources | - ---- - -## Gradle Configuration - -```kotlin -compose.desktop { - application { - mainClass = "org.mifos.mobile.MainKt" - - nativeDistributions { - targetFormats( - TargetFormat.Dmg, - TargetFormat.Msi, - TargetFormat.Deb - ) - packageName = "Mifos Mobile" - packageVersion = "1.0.0" - } - } -} -``` - ---- - -## Entry Point - -```kotlin -fun main() = application { - Window( - onCloseRequest = ::exitApplication, - title = "Mifos Mobile" - ) { - App() - } -} -``` - ---- - -## Platform Support - -| OS | Target Format | Status | -|----|---------------|:------:| -| macOS | DMG | ✅ | -| Windows | MSI | ✅ | -| Linux | DEB/RPM | ✅ | - ---- - -## Desktop-Specific Features - -| Feature | Status | Notes | -|---------|:------:|-------| -| Window Management | ✅ | Resize, minimize, maximize | -| System Tray | ⚠️ | Optional | -| Keyboard Shortcuts | ✅ | Standard shortcuts | -| File System Access | ✅ | Full access | - ---- - -## Requirements - -| Requirement | Version | -|-------------|---------| -| JVM | 17+ | -| Compose Desktop | 1.5+ | - ---- - -## Development Notes - -- Uses Compose for Desktop (Multiplatform) -- Shares UI code with Android/iOS -- Platform-specific code in `jvmMain/` - ---- - -## Related - -- [LAYER_STATUS.md](../LAYER_STATUS.md) - Platform overview -- [LAYER_GUIDE.md](../LAYER_GUIDE.md) - Architecture patterns diff --git a/claude-product-cycle/platform-layer/platforms/IOS.md b/claude-product-cycle/platform-layer/platforms/IOS.md deleted file mode 100644 index 1955fe473..000000000 --- a/claude-product-cycle/platform-layer/platforms/IOS.md +++ /dev/null @@ -1,134 +0,0 @@ -# iOS Platform - -## Module: cmp-ios - -> iOS platform target using CocoaPods integration - ---- - -## Setup - -1. Install CocoaPods dependencies: - ```bash - cd cmp-ios - pod install - ``` - -2. Open Xcode workspace: - ```bash - open iosApp.xcworkspace - ``` - -3. Build and run in Xcode - ---- - -## Key Files - -| File | Purpose | -|------|---------| -| `cmp-ios/Podfile` | CocoaPods dependencies | -| `cmp-ios/iosApp/` | iOS app source | -| `cmp-ios/iosApp/Info.plist` | App configuration | -| `cmp-ios/iosApp/ContentView.swift` | Main UI entry | -| `cmp-shared/` | Shared KMP framework | - ---- - -## Build Commands - -| Command | Action | -|---------|--------| -| `pod install` | Install dependencies | -| `pod update` | Update dependencies | -| Xcode Build (Cmd+B) | Build app | -| Xcode Run (Cmd+R) | Run on simulator/device | - -### Terminal Build - -```bash -xcodebuild -workspace iosApp.xcworkspace \ - -scheme iosApp \ - -sdk iphonesimulator \ - -configuration Debug \ - build -``` - ---- - -## KMP Framework Integration - -### Shared Framework - -```ruby -# Podfile -target 'iosApp' do - use_frameworks! - pod 'cmp_shared', :path => '../cmp-shared' -end -``` - -### Using Shared Code - -```swift -import cmp_shared - -struct ContentView: View { - var body: some View { - ComposeView() - } -} -``` - ---- - -## Xcode Project Structure - -``` -iosApp/ -├── iosApp.xcodeproj/ -├── iosApp.xcworkspace/ -├── iosApp/ -│ ├── Assets.xcassets/ -│ ├── ContentView.swift -│ ├── Info.plist -│ └── iosApp.swift -└── Podfile -``` - ---- - -## iOS-Specific Features - -| Feature | Implementation | -|---------|----------------| -| Biometrics | LocalAuthentication | -| Push Notifications | APNs | -| Deep Links | URL Schemes | - ---- - -## Requirements - -| Requirement | Version | -|-------------|---------| -| iOS Deployment Target | 14.0+ | -| Xcode | 15.0+ | -| CocoaPods | 1.12+ | - ---- - -## Troubleshooting - -| Issue | Solution | -|-------|----------| -| Pod install fails | Run `pod repo update` first | -| Framework not found | Clean build folder (Cmd+Shift+K) | -| Simulator issues | Reset simulator content | - ---- - -## Related - -- [LAYER_STATUS.md](../LAYER_STATUS.md) - Platform overview -- [LAYER_GUIDE.md](../LAYER_GUIDE.md) - Architecture patterns diff --git a/claude-product-cycle/platform-layer/platforms/WEB.md b/claude-product-cycle/platform-layer/platforms/WEB.md deleted file mode 100644 index 6e9b2e809..000000000 --- a/claude-product-cycle/platform-layer/platforms/WEB.md +++ /dev/null @@ -1,135 +0,0 @@ -# Web Platform - -## Module: cmp-web - -> Kotlin/JS web application (Experimental) - ---- - -## Status: Experimental - -The web platform is currently in experimental status. Some features may not be fully functional. - ---- - -## Build Commands - -| Command | Action | -|---------|--------| -| `./gradlew :cmp-web:jsBrowserRun` | Run in browser (dev) | -| `./gradlew :cmp-web:jsBrowserProductionWebpack` | Production build | -| `./gradlew :cmp-web:jsBrowserDevelopmentWebpack` | Development build | - ---- - -## Key Files - -| File | Purpose | -|------|---------| -| `cmp-web/build.gradle.kts` | Module configuration | -| `cmp-web/src/jsMain/kotlin/.../Main.kt` | Entry point | -| `cmp-web/src/jsMain/resources/index.html` | HTML template | - ---- - -## Gradle Configuration - -```kotlin -kotlin { - js(IR) { - browser { - commonWebpackConfig { - cssSupport { - enabled.set(true) - } - } - } - binaries.executable() - } -} -``` - ---- - -## Entry Point - -```kotlin -fun main() { - onWasmReady { - BrowserViewportWindow("Mifos Mobile") { - App() - } - } -} -``` - ---- - -## Output Location - -| Build Type | Output | -|------------|--------| -| Development | `build/dist/js/developmentExecutable/` | -| Production | `build/dist/js/productionExecutable/` | - ---- - -## Browser Support - -| Browser | Status | -|---------|:------:| -| Chrome | ✅ | -| Firefox | ✅ | -| Safari | ⚠️ | -| Edge | ✅ | - ---- - -## Web-Specific Limitations - -| Feature | Status | Notes | -|---------|:------:|-------| -| Local Storage | ✅ | Using browser storage | -| Network | ✅ | CORS considerations | -| Biometrics | ❌ | Not available | -| Camera | ⚠️ | Browser permissions | -| Notifications | ⚠️ | Web Push API | - ---- - -## Development Server - -When running `jsBrowserRun`: -- Default URL: `http://localhost:8080` -- Hot reload enabled -- Source maps available - ---- - -## Production Deployment - -1. Build production bundle: - ```bash - ./gradlew :cmp-web:jsBrowserProductionWebpack - ``` - -2. Deploy `build/dist/js/productionExecutable/` to web server - -3. Configure server for SPA routing - ---- - -## Known Issues - -| Issue | Workaround | -|-------|------------| -| Large bundle size | Tree shaking, code splitting | -| CORS errors | Configure server headers | -| WebSocket issues | Use polling fallback | - ---- - -## Related - -- [LAYER_STATUS.md](../LAYER_STATUS.md) - Platform overview -- [LAYER_GUIDE.md](../LAYER_GUIDE.md) - Architecture patterns diff --git a/claude-product-cycle/server-layer/API_INDEX.md b/claude-product-cycle/server-layer/API_INDEX.md deleted file mode 100644 index 6120c47ae..000000000 --- a/claude-product-cycle/server-layer/API_INDEX.md +++ /dev/null @@ -1,551 +0,0 @@ -# Fineract Self-Service API Index - -> **Purpose**: Fast API lookup with service method references -> **Pattern**: Static table first → API_REFERENCE.md for details → Design layer for source - ---- - -## Source of Truth Hierarchy - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ Design Layer: features/*/API.md │ -│ └─→ ULTIMATE SOURCE OF TRUTH │ -│ └─→ Where APIs are first designed/documented │ -├─────────────────────────────────────────────────────────────────┤ -│ Server Layer: (This directory) │ -│ └─→ DERIVED but COMPLETE for client layer │ -│ ├─→ API_INDEX.md (this file) - Quick lookup │ -│ ├─→ API_REFERENCE.md - Complete endpoint details │ -│ ├─→ CLIENT_PATTERNS.md - Service/Repository patterns │ -│ └─→ ERROR_HANDLING.md - Exception handling │ -├─────────────────────────────────────────────────────────────────┤ -│ Client Layer: core/network/, core/data/ │ -│ └─→ IMPLEMENTATION based on server layer docs │ -└─────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Table of Contents -1. [Overview](#overview) -2. [Quick Lookup](#quick-lookup) -3. [By Category](#by-category) -4. [Common Patterns](#common-patterns) -5. [Lookup Strategy](#lookup-strategy) -6. [Update Flow](#update-flow) -7. [How to Add New API](#how-to-add-new-api) - ---- - -## Overview - -### Server Layer Documentation - -| Document | Purpose | -|----------|---------| -| [API_INDEX.md](API_INDEX.md) | Quick lookup table (this file) | -| [endpoints/*.md](endpoints/) | **O(1) Lookup** - Category-specific endpoint docs | -| [API_REFERENCE.md](API_REFERENCE.md) | Complete endpoint overview | -| [CLIENT_PATTERNS.md](CLIENT_PATTERNS.md) | Service/Repository implementation patterns | -| [ERROR_HANDLING.md](ERROR_HANDLING.md) | Exception types and error extraction | - -### Endpoint Files (O(1) Lookup) - -| File | Category | Endpoints | -|------|----------|:---------:| -| [AUTH.md](endpoints/AUTH.md) | Authentication | 3 | -| [CLIENT.md](endpoints/CLIENT.md) | Client | 4 | -| [SAVINGS.md](endpoints/SAVINGS.md) | Savings Account | 7 | -| [LOAN.md](endpoints/LOAN.md) | Loan Account | 6 | -| [BENEFICIARY.md](endpoints/BENEFICIARY.md) | Beneficiary | 5 | -| [TRANSFER.md](endpoints/TRANSFER.md) | Transfer | 2 | -| [GUARANTOR.md](endpoints/GUARANTOR.md) | Guarantor | 5 | -| [NOTIFICATION.md](endpoints/NOTIFICATION.md) | Notification | 3 | -| [CHARGES.md](endpoints/CHARGES.md) | Charges | 3 | -| [SHARE.md](endpoints/SHARE.md) | Share Account | 3 | -| [USER.md](endpoints/USER.md) | User Settings | 1 | - -### External References - -| Resource | URL | -|----------|-----| -| **Swagger UI** | [sandbox.mifos.community/fineract-provider/swagger-ui](https://sandbox.mifos.community/fineract-provider/swagger-ui/index.html#/) | -| **Self-Service APIs** | Filter by `/self/` endpoints in Swagger | -| **Full API Docs** | [fineract.apache.org](https://fineract.apache.org/) | - -### Base URL -``` -https://{server}/fineract-provider/api/v1/self/ -``` - -### Authentication -All requests require: -``` -Headers: - Authorization: Basic {base64(username:password)} - Fineract-Platform-TenantId: {tenant} - Content-Type: application/json -``` - -### Demo Server -- **Server**: `tt.mifos.community` or `gsoc.mifos.community` -- **Tenant**: `mobile` or `default` -- **Test User**: `maria` / `password` - ---- - -## Quick Lookup - -| Endpoint | Method | Purpose | Service Method | Docs | -|----------|--------|---------|----------------|------| -| `/authentication` | POST | Login user | `authenticate()` | [auth](../design-spec-layer/features/auth/API.md) | -| `/registration` | POST | Register client | `register()` | [auth](../design-spec-layer/features/auth/API.md) | -| `/registration/user` | POST | Verify OTP | `verifyOtp()` | [auth](../design-spec-layer/features/auth/API.md) | -| `/clients` | GET | Get client list | `clients()` | [home](../design-spec-layer/features/home/API.md) | -| `/clients/{clientId}` | GET | Get client details | `getClientDetails()` | [home](../design-spec-layer/features/home/API.md) | -| `/clients/{clientId}/images` | GET | Get client image | `getClientImage()` | [home](../design-spec-layer/features/home/API.md) | -| `/clients/{clientId}/accounts` | GET | Get all accounts | `getClientAccounts()` | [accounts](../design-spec-layer/features/accounts/API.md) | -| `/savingsaccounts/{accountId}` | GET | Savings details | `getSavingsWithAssociations()` | [savings](../design-spec-layer/features/savings-account/API.md) | -| `/savingsaccounts` | POST | Apply for savings | `submitSavingAccountApplication()` | [savings](../design-spec-layer/features/savings-account/API.md) | -| `/savingsaccounts/{id}?command=withdrawnByApplicant` | POST | Withdraw application | `submitWithdrawSavingsAccount()` | [savings](../design-spec-layer/features/savings-account/API.md) | -| `/savingsaccounts/{id}/transactions` | GET | Savings transactions | `getSavingsAccountTransactionTemplate()` | [savings](../design-spec-layer/features/savings-account/API.md) | -| `/savingsproducts` | GET | Savings products | `getSavingsProducts()` | [savings](../design-spec-layer/features/savings-account/API.md) | -| `/loans/{loanId}` | GET | Loan details | `getLoanWithAssociations()` | [loan](../design-spec-layer/features/loan-account/API.md) | -| `/loans` | POST | Apply for loan | `createLoansAccount()` | [loan](../design-spec-layer/features/loan-account/API.md) | -| `/loans/{loanId}?command=withdrawnByApplicant` | POST | Withdraw loan | `withdrawLoanAccount()` | [loan](../design-spec-layer/features/loan-account/API.md) | -| `/loans/{loanId}/transactions/{transId}` | GET | Loan transaction | `getLoanAccountTransaction()` | [loan](../design-spec-layer/features/loan-account/API.md) | -| `/loanproducts` | GET | Loan products | `getLoanProducts()` | [loan](../design-spec-layer/features/loan-account/API.md) | -| `/loans/{loanId}/template?templateType=repayment` | GET | Repayment template | `getLoanRepaymentTemplate()` | [loan](../design-spec-layer/features/loan-account/API.md) | -| `/products/share` | GET | Share products | `getShareProducts()` | [share](../design-spec-layer/features/share-account/API.md) | -| `/shareaccounts` | POST | Apply for shares | `submitShareApplication()` | [share](../design-spec-layer/features/share-account/API.md) | -| `/shareaccounts/{accountId}` | GET | Share details | `getShareAccountDetails()` | [share](../design-spec-layer/features/share-account/API.md) | -| `/beneficiaries/tpt` | GET | List beneficiaries | `beneficiaryList()` | [beneficiary](../design-spec-layer/features/beneficiary/API.md) | -| `/beneficiaries/tpt` | POST | Add beneficiary | `createBeneficiary()` | [beneficiary](../design-spec-layer/features/beneficiary/API.md) | -| `/beneficiaries/tpt/{id}` | PUT | Update beneficiary | `updateBeneficiary()` | [beneficiary](../design-spec-layer/features/beneficiary/API.md) | -| `/beneficiaries/tpt/{id}` | DELETE | Delete beneficiary | `deleteBeneficiary()` | [beneficiary](../design-spec-layer/features/beneficiary/API.md) | -| `/beneficiaries/tpt/template` | GET | Beneficiary template | `beneficiaryTemplate()` | [beneficiary](../design-spec-layer/features/beneficiary/API.md) | -| `/accounttransfers/template` | GET | Transfer template | `accountTransferTemplate()` | [transfer](../design-spec-layer/features/transfer/API.md) | -| `/accounttransfers` | POST | Execute transfer | `makeTransfer()` | [transfer](../design-spec-layer/features/transfer/API.md) | -| `/loans/{loanId}/guarantors` | GET | List guarantors | `getGuarantorList()` | [guarantor](../design-spec-layer/features/guarantor/API.md) | -| `/loans/{loanId}/guarantors/template` | GET | Guarantor template | `getGuarantorTemplate()` | [guarantor](../design-spec-layer/features/guarantor/API.md) | -| `/loans/{loanId}/guarantors` | POST | Add guarantor | `addGuarantor()` | [guarantor](../design-spec-layer/features/guarantor/API.md) | -| `/loans/{loanId}/guarantors/{id}` | PUT | Update guarantor | `updateGuarantor()` | [guarantor](../design-spec-layer/features/guarantor/API.md) | -| `/loans/{loanId}/guarantors/{id}` | DELETE | Delete guarantor | `deleteGuarantor()` | [guarantor](../design-spec-layer/features/guarantor/API.md) | -| `/device/registration/client/{clientId}` | GET | Get notification ID | `getUserNotificationId()` | [notification](../design-spec-layer/features/notification/API.md) | -| `/device/registration` | POST | Register device | `registerNotification()` | [notification](../design-spec-layer/features/notification/API.md) | -| `/device/registration/{id}` | PUT | Update registration | `updateRegisterNotification()` | [notification](../design-spec-layer/features/notification/API.md) | -| `/clients/{clientId}/charges` | GET | Client charges | `getClientChargeList()` | [client-charge](../design-spec-layer/features/client-charge/API.md) | -| `/loans/{loanId}/charges` | GET | Loan charges | `getChargeList()` | [client-charge](../design-spec-layer/features/client-charge/API.md) | -| `/savingsaccounts/{id}/charges` | GET | Savings charges | `getChargeList()` | [client-charge](../design-spec-layer/features/client-charge/API.md) | -| `/user/password` | PUT | Change password | `updatePassword()` | [settings](../design-spec-layer/features/settings/API.md) | - ---- - -## By Category - -### Authentication (3 endpoints) - -| Endpoint | Method | Service Method | Purpose | -|----------|--------|----------------|---------| -| `/authentication` | POST | `authenticate()` | Login with username/password | -| `/registration` | POST | `register()` | Register new client | -| `/registration/user` | POST | `verifyOtp()` | Verify OTP for registration | - -**Service**: `AuthenticationService` -**Docs**: [auth/API.md](../design-spec-layer/features/auth/API.md) - ---- - -### Client (3 endpoints) - -| Endpoint | Method | Service Method | Purpose | -|----------|--------|----------------|---------| -| `/clients` | GET | `clients()` | Get client list | -| `/clients/{clientId}` | GET | `getClientDetails()` | Get client details | -| `/clients/{clientId}/images` | GET | `getClientImage()` | Get client profile image | - -**Service**: `ClientService` -**Docs**: [home/API.md](../design-spec-layer/features/home/API.md) - ---- - -### Accounts (1 endpoint) - -| Endpoint | Method | Service Method | Purpose | -|----------|--------|----------------|---------| -| `/clients/{clientId}/accounts` | GET | `getClientAccounts()` | Get all client accounts | - -**Service**: `ClientService` -**Docs**: [accounts/API.md](../design-spec-layer/features/accounts/API.md) - ---- - -### Savings Account (5 endpoints) - -| Endpoint | Method | Service Method | Purpose | -|----------|--------|----------------|---------| -| `/savingsaccounts/{accountId}` | GET | `getSavingsWithAssociations()` | Get savings details | -| `/savingsaccounts` | POST | `submitSavingAccountApplication()` | Apply for savings account | -| `/savingsaccounts/{id}?command=withdrawnByApplicant` | POST | `submitWithdrawSavingsAccount()` | Withdraw application | -| `/savingsaccounts/{id}/transactions` | GET | `getSavingsAccountTransactionTemplate()` | Get transaction history | -| `/savingsproducts` | GET | `getSavingsProducts()` | Get available products | - -**Service**: `SavingAccountsService` -**Docs**: [savings-account/API.md](../design-spec-layer/features/savings-account/API.md) - ---- - -### Loan Account (6 endpoints) - -| Endpoint | Method | Service Method | Purpose | -|----------|--------|----------------|---------| -| `/loans/{loanId}` | GET | `getLoanWithAssociations()` | Get loan details | -| `/loans` | POST | `createLoansAccount()` | Apply for loan | -| `/loans/{loanId}?command=withdrawnByApplicant` | POST | `withdrawLoanAccount()` | Withdraw application | -| `/loans/{loanId}/transactions/{transId}` | GET | `getLoanAccountTransaction()` | Get transaction details | -| `/loanproducts` | GET | `getLoanProducts()` | Get available products | -| `/loans/{loanId}/template?templateType=repayment` | GET | `getLoanRepaymentTemplate()` | Get repayment schedule | - -**Service**: `LoanService` -**Docs**: [loan-account/API.md](../design-spec-layer/features/loan-account/API.md) - ---- - -### Share Account (3 endpoints) - -| Endpoint | Method | Service Method | Purpose | -|----------|--------|----------------|---------| -| `/products/share` | GET | `getShareProducts()` | Get share products | -| `/shareaccounts` | POST | `submitShareApplication()` | Apply for shares | -| `/shareaccounts/{accountId}` | GET | `getShareAccountDetails()` | Get share details | - -**Service**: `ShareAccountService` -**Docs**: [share-account/API.md](../design-spec-layer/features/share-account/API.md) - ---- - -### Beneficiary (5 endpoints) - -| Endpoint | Method | Service Method | Purpose | -|----------|--------|----------------|---------| -| `/beneficiaries/tpt` | GET | `beneficiaryList()` | List all beneficiaries | -| `/beneficiaries/tpt` | POST | `createBeneficiary()` | Add beneficiary | -| `/beneficiaries/tpt/{id}` | PUT | `updateBeneficiary()` | Update beneficiary | -| `/beneficiaries/tpt/{id}` | DELETE | `deleteBeneficiary()` | Delete beneficiary | -| `/beneficiaries/tpt/template` | GET | `beneficiaryTemplate()` | Get template for adding | - -**Service**: `BeneficiaryService` -**Docs**: [beneficiary/API.md](../design-spec-layer/features/beneficiary/API.md) - ---- - -### Transfer (2 endpoints) - -| Endpoint | Method | Service Method | Purpose | -|----------|--------|----------------|---------| -| `/accounttransfers/template` | GET | `accountTransferTemplate()` | Get transfer template | -| `/accounttransfers` | POST | `makeTransfer()` | Execute transfer | - -**Service**: `TransferService` -**Docs**: [transfer/API.md](../design-spec-layer/features/transfer/API.md) - ---- - -### Guarantor (5 endpoints) - -| Endpoint | Method | Service Method | Purpose | -|----------|--------|----------------|---------| -| `/loans/{loanId}/guarantors` | GET | `getGuarantorList()` | List guarantors | -| `/loans/{loanId}/guarantors/template` | GET | `getGuarantorTemplate()` | Get add template | -| `/loans/{loanId}/guarantors` | POST | `addGuarantor()` | Add guarantor | -| `/loans/{loanId}/guarantors/{id}` | PUT | `updateGuarantor()` | Update guarantor | -| `/loans/{loanId}/guarantors/{id}` | DELETE | `deleteGuarantor()` | Delete guarantor | - -**Service**: `GuarantorService` -**Docs**: [guarantor/API.md](../design-spec-layer/features/guarantor/API.md) - ---- - -### Notification (3 endpoints) - -| Endpoint | Method | Service Method | Purpose | -|----------|--------|----------------|---------| -| `/device/registration/client/{clientId}` | GET | `getUserNotificationId()` | Get notification ID | -| `/device/registration` | POST | `registerNotification()` | Register device | -| `/device/registration/{id}` | PUT | `updateRegisterNotification()` | Update registration | - -**Service**: `NotificationService` -**Docs**: [notification/API.md](../design-spec-layer/features/notification/API.md) - ---- - -### Charges (3 endpoints) - -| Endpoint | Method | Service Method | Purpose | -|----------|--------|----------------|---------| -| `/clients/{clientId}/charges` | GET | `getClientChargeList()` | Get client charges | -| `/loans/{loanId}/charges` | GET | `getChargeList()` | Get loan charges | -| `/savingsaccounts/{id}/charges` | GET | `getChargeList()` | Get savings charges | - -**Service**: `ClientChargeService` -**Docs**: [client-charge/API.md](../design-spec-layer/features/client-charge/API.md) - ---- - -### User Settings (1 endpoint) - -| Endpoint | Method | Service Method | Purpose | -|----------|--------|----------------|---------| -| `/user/password` | PUT | `updatePassword()` | Change user password | - -**Service**: `UserService` -**Docs**: [settings/API.md](../design-spec-layer/features/settings/API.md) - ---- - -## Local-Only Features - -These features do not require backend API calls: - -| Feature | Storage | Notes | -|---------|---------|-------| -| QR Code | - | Local generation/scanning | -| Location | Static | Hardcoded branch locations | -| Passcode | DataStore | Local biometric/PIN storage | - ---- - -## Common Patterns - -### Date Format -``` -Format: dd MMMM yyyy -Example: 15 January 2025 -``` - -### Locale -``` -locale=en -dateFormat=dd MMMM yyyy -``` - -### Error Responses - -| Status | Description | Handling | -|--------|-------------|----------| -| 401 | Unauthorized | Redirect to login | -| 403 | Forbidden | Show permission error | -| 404 | Not found | Show "not found" message | -| 500 | Server error | Show generic error with retry | - -### Error Response Format -```json -{ - "developerMessage": "...", - "httpStatusCode": "...", - "defaultUserMessage": "...", - "userMessageGlobalisationCode": "...", - "errors": [] -} -``` - -### Query Parameters - -Common query parameters used across endpoints: - -| Parameter | Usage | Example | -|-----------|-------|---------| -| `associations` | Include related data | `?associations=transactions` | -| `command` | Execute command | `?command=withdrawnByApplicant` | -| `templateType` | Specify template | `?templateType=repayment` | -| `locale` | Response locale | `?locale=en` | -| `dateFormat` | Date format | `?dateFormat=dd MMMM yyyy` | - ---- - -## Lookup Strategy - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ STEP 1: STATIC LOOKUP - O(1) (Fastest) │ -│ → Know category? Read endpoints/[CATEGORY].md directly │ -│ → Don't know? Scan Endpoint Files table above │ -│ → ~50-100 lines per file vs 600+ in single file │ -├─────────────────────────────────────────────────────────────────┤ -│ STEP 2: DYNAMIC SEARCH (If Not Found in Static) │ -│ → Search codebase: core/network/services/*.kt │ -│ → Search design layer: design-spec-layer/features/*/API.md │ -│ → Check Swagger UI for endpoint existence │ -├─────────────────────────────────────────────────────────────────┤ -│ STEP 3: AUTO-UPDATE (After Dynamic Find or Manual Implement) │ -│ → Add to endpoints/[CATEGORY].md (O(1) lookup) │ -│ → Add row to API_INDEX.md Quick Lookup table │ -│ → Update design-layer/*/API.md (source of truth) │ -└─────────────────────────────────────────────────────────────────┘ -``` - -### Step 1: Static Lookup (O(1)) - -**Direct file access by category:** - -| Need | Read This File | Lines | -|------|----------------|:-----:| -| Auth/Login/Register | `endpoints/AUTH.md` | ~90 | -| Client/Profile | `endpoints/CLIENT.md` | ~80 | -| Savings Account | `endpoints/SAVINGS.md` | ~150 | -| Loan Account | `endpoints/LOAN.md` | ~120 | -| Beneficiary | `endpoints/BENEFICIARY.md` | ~130 | -| Transfer | `endpoints/TRANSFER.md` | ~90 | -| Guarantor | `endpoints/GUARANTOR.md` | ~100 | -| Notification | `endpoints/NOTIFICATION.md` | ~70 | -| Charges | `endpoints/CHARGES.md` | ~100 | -| Share Account | `endpoints/SHARE.md` | ~90 | -| Password/Settings | `endpoints/USER.md` | ~50 | - -**Then for patterns:** - -| Step | File | What to Find | -|------|------|--------------| -| 1b | `CLIENT_PATTERNS.md` | Service/Repository patterns | -| 1c | `ERROR_HANDLING.md` | Exception handling | - -### Step 2: Dynamic Search (If Not Found) - -**Search commands:** - -```bash -# Search in service files -grep -r "@GET\|@POST\|@PUT\|@DELETE" core/network/src/commonMain/kotlin/**/services/ - -# Search for specific endpoint -grep -r "/beneficiaries" core/network/ - -# Search in design layer -grep -r "Endpoint" claude-product-cycle/design-spec-layer/features/*/API.md - -# List all service files -ls core/network/src/commonMain/kotlin/org/mifos/mobile/core/network/services/ -``` - -**Claude Glob Patterns:** -``` -core/network/**/services/*.kt -design-spec-layer/features/*/API.md -``` - -**External Reference:** -- [Swagger UI](https://sandbox.mifos.community/fineract-provider/swagger-ui/index.html#/) - Filter by `/self/` - -### Step 3: Auto-Update Rules - -| Scenario | Action | -|----------|--------| -| Found in static lookup | No update needed | -| Found via dynamic search | **ADD** to server layer docs | -| Manually implemented new API | **ADD** to server layer + design layer | -| API deprecated/removed | **REMOVE** from server layer | - -**Update Checklist:** -- [ ] Add row to `API_INDEX.md` Quick Lookup table -- [ ] Add row to `API_INDEX.md` By Category table -- [ ] Add full documentation to `API_REFERENCE.md` -- [ ] Update `design-spec-layer/features/[feature]/API.md` (source) - ---- - -## Update Flow - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ NEW API DESIGNED │ -│ └─→ Add to design-layer/features/*/API.md (SOURCE) │ -├─────────────────────────────────────────────────────────────────┤ -│ READY FOR CLIENT IMPLEMENTATION │ -│ └─→ Add to server-layer/API_REFERENCE.md (DETAILS) │ -│ └─→ Add row to server-layer/API_INDEX.md (INDEX) │ -├─────────────────────────────────────────────────────────────────┤ -│ CLIENT IMPLEMENTS │ -│ └─→ Uses server-layer docs for implementation │ -├─────────────────────────────────────────────────────────────────┤ -│ FOUND DYNAMICALLY (not in docs) │ -│ └─→ UPDATE server layer docs immediately │ -└─────────────────────────────────────────────────────────────────┘ -``` - ---- - -## How to Add New API - -### Format for API_INDEX.md - -```markdown -| /endpoint | METHOD | Purpose | `serviceMethod()` | [feature](link) | -``` - -### Format for API_REFERENCE.md - -```markdown -### METHOD /endpoint -**Purpose**: Description - -**Service**: `ServiceName.methodName()` - -**Request**: -```json -{ ... } -``` - -**Response**: -```json -{ ... } -``` - -**DTO**: `DtoName` -``` - ---- - -## Service File Locations - -``` -core/network/src/commonMain/kotlin/org/mifos/mobile/core/network/services/ -├── AuthenticationService.kt -├── BeneficiaryService.kt -├── ClientChargeService.kt -├── ClientService.kt -├── GuarantorService.kt -├── LoanService.kt -├── NotificationService.kt -├── RegistrationService.kt -├── SavingAccountsService.kt -├── ShareAccountService.kt -├── ThirdPartyTransferService.kt -└── UserService.kt -``` - ---- - -## Related Files - -### Server Layer (This Directory) -- [API_REFERENCE.md](API_REFERENCE.md) - Complete endpoint documentation -- [CLIENT_PATTERNS.md](CLIENT_PATTERNS.md) - Service/Repository patterns -- [ERROR_HANDLING.md](ERROR_HANDLING.md) - Exception handling reference - -### Design Layer (Source of Truth) -- Feature API Docs: `design-spec-layer/features/*/API.md` - -### Client Layer (Implementation) -- Service Implementations: `core/network/services/` -- Repository Layer: `core/data/repository/` -- Kotlin DTOs: `core/model/entity/` - ---- - -## Changelog - -| Date | Change | -|------|--------| -| 2025-01-05 | Restructured as part of modular server layer docs | -| 2025-01-05 | Created with merged content from FINERACT_API.md + feature API.md files | diff --git a/claude-product-cycle/server-layer/API_REFERENCE.md b/claude-product-cycle/server-layer/API_REFERENCE.md deleted file mode 100644 index b14134562..000000000 --- a/claude-product-cycle/server-layer/API_REFERENCE.md +++ /dev/null @@ -1,865 +0,0 @@ -# Fineract Self-Service API Reference - -> **Purpose**: Complete endpoint documentation for client layer implementation -> **Derived from**: Design layer `features/*/API.md` files -> **Swagger UI**: [sandbox.mifos.community/swagger-ui](https://sandbox.mifos.community/fineract-provider/swagger-ui/index.html#/) - ---- - -## Table of Contents -1. [Overview](#overview) -2. [Authentication](#authentication) -3. [Client](#client) -4. [Accounts](#accounts) -5. [Savings Account](#savings-account) -6. [Loan Account](#loan-account) -7. [Share Account](#share-account) -8. [Beneficiary](#beneficiary) -9. [Transfer](#transfer) -10. [Guarantor](#guarantor) -11. [Notification](#notification) -12. [Charges](#charges) -13. [User Settings](#user-settings) - ---- - -## Overview - -### Base URL -``` -https://{server}/fineract-provider/api/v1/self/ -``` - -### Servers -| Environment | Server | -|-------------|--------| -| Sandbox | `sandbox.mifos.community` | -| Demo | `tt.mifos.community` or `gsoc.mifos.community` | - -### Headers (All Requests) -``` -Authorization: Basic {base64(username:password)} -Fineract-Platform-TenantId: {tenant} -Content-Type: application/json -``` - -### Common Query Parameters -| Parameter | Type | Description | -|-----------|------|-------------| -| `locale` | String | Response locale (default: "en") | -| `dateFormat` | String | Date format (default: "dd MMMM yyyy") | -| `associations` | String | Include related data | - ---- - -## Authentication - -### POST /authentication -**Purpose**: Login with username and password - -**Service**: `AuthenticationService.authenticate()` - -**Request**: -```json -{ - "username": "string", - "password": "string" -} -``` - -**Response**: -```json -{ - "userId": 123, - "username": "john_doe", - "clients": [456], - "isAuthenticated": true, - "base64EncodedAuthenticationKey": "encoded_key", - "officeName": "Head Office" -} -``` - -**DTO**: `User` -```kotlin -@Serializable -data class User( - val userId: Long, - val username: String?, - val clients: List, - val isAuthenticated: Boolean, - val base64EncodedAuthenticationKey: String?, - val officeName: String?, -) -``` - ---- - -### POST /registration -**Purpose**: Register new client - -**Service**: `RegistrationService.register()` - -**Request**: -```json -{ - "accountNumber": "string", - "authenticationMode": "email", - "email": "user@example.com", - "firstName": "John", - "middleName": "M", - "lastName": "Doe", - "mobileNumber": "1234567890", - "password": "securePassword123", - "username": "john_doe" -} -``` - -**Response**: -```json -{ - "requestId": "12345" -} -``` - -**DTO**: `RegisterPayload` - ---- - -### POST /registration/user -**Purpose**: Verify OTP for registration - -**Service**: `RegistrationService.verifyOtp()` - -**Request**: -```json -{ - "authenticationToken": "123456", - "requestId": "12345" -} -``` - -**Response**: -```json -{ - "message": "User verified successfully" -} -``` - ---- - -## Client - -### GET /clients -**Purpose**: Get client list for authenticated user - -**Service**: `ClientService.clients()` - -**Response**: -```json -{ - "pageItems": [ - { - "id": 1, - "accountNo": "000000001", - "displayName": "John Doe", - "officeId": 1, - "officeName": "Head Office" - } - ] -} -``` - -**DTO**: `Page` - ---- - -### GET /clients/{clientId} -**Purpose**: Get client details - -**Service**: `ClientService.getClientDetails(clientId)` - -**Response**: -```json -{ - "id": 1, - "accountNo": "000000001", - "displayName": "John Doe", - "firstname": "John", - "lastname": "Doe", - "mobileNo": "1234567890", - "emailAddress": "john@example.com", - "dateOfBirth": [1990, 1, 15], - "officeId": 1, - "officeName": "Head Office" -} -``` - -**DTO**: `Client` - ---- - -### GET /clients/{clientId}/images -**Purpose**: Get client profile image - -**Service**: `ClientService.getClientImage(clientId)` - -**Response**: Base64 encoded image or image URL - ---- - -### GET /clients/{clientId}/accounts -**Purpose**: Get all accounts for a client - -**Service**: `ClientService.getClientAccounts(clientId)` - -**Response**: -```json -{ - "savingsAccounts": [ - { - "id": 12345, - "accountNo": "000000012345", - "productName": "Basic Savings", - "accountBalance": 1234.56, - "status": { "id": 300, "value": "Active" } - } - ], - "loanAccounts": [ - { - "id": 67890, - "accountNo": "000000067890", - "productName": "Personal Loan", - "loanBalance": 5000.00, - "status": { "id": 300, "value": "Active" } - } - ], - "shareAccounts": [] -} -``` - -**DTO**: `ClientAccounts` - ---- - -## Savings Account - -### GET /savingsaccounts/{accountId} -**Purpose**: Get savings account details with optional associations - -**Service**: `SavingAccountsListService.getSavingsWithAssociations(accountId, associations)` - -**Query Parameters**: -| Parameter | Type | Values | -|-----------|------|--------| -| `associations` | String | `transactions`, `charges` | - -**Response**: -```json -{ - "id": 12345, - "accountNo": "000000012345", - "depositType": { "id": 100, "value": "Savings" }, - "clientId": 1, - "clientName": "John Doe", - "savingsProductId": 1, - "savingsProductName": "Basic Savings", - "status": { - "id": 300, - "code": "savingsAccountStatusType.active", - "value": "Active" - }, - "currency": { - "code": "USD", - "displaySymbol": "$", - "decimalPlaces": 2 - }, - "summary": { - "totalDeposits": 5000.00, - "totalWithdrawals": 3765.44, - "accountBalance": 1234.56 - }, - "transactions": [...] -} -``` - -**DTO**: `SavingsWithAssociations` - ---- - -### GET /savingsaccounts/template -**Purpose**: Get template for savings application - -**Service**: `SavingAccountsListService.getSavingsAccountApplicationTemplate(clientId)` - -**Query Parameters**: -| Parameter | Type | Required | -|-----------|------|----------| -| `clientId` | Long | Yes | -| `productId` | Long | No | - -**Response**: -```json -{ - "clientId": 1, - "clientName": "John Doe", - "productOptions": [ - { - "id": 1, - "name": "Basic Savings", - "allowOverdraft": false - } - ] -} -``` - -**DTO**: `SavingsAccountTemplate` - ---- - -### POST /savingsaccounts -**Purpose**: Submit savings account application - -**Service**: `SavingAccountsListService.submitSavingAccountApplication(payload)` - -**Request**: -```json -{ - "clientId": 1, - "productId": 1, - "locale": "en", - "dateFormat": "dd MMMM yyyy", - "submittedOnDate": "29 December 2025" -} -``` - -**Response**: -```json -{ - "officeId": 1, - "clientId": 1, - "savingsId": 12345, - "resourceId": 12345 -} -``` - -**DTO**: `SavingsAccountApplicationPayload` - ---- - -### PUT /savingsaccounts/{accountId} -**Purpose**: Update pending savings account - -**Service**: `SavingAccountsListService.updateSavingsAccountUpdate(accountId, payload)` - -**Request**: -```json -{ - "clientId": 1, - "productId": 2 -} -``` - -**DTO**: `SavingsAccountUpdatePayload` - ---- - -### POST /savingsaccounts/{savingsId}?command=withdrawnByApplicant -**Purpose**: Withdraw savings application - -**Service**: `SavingAccountsListService.submitWithdrawSavingsAccount(savingsId, payload)` - -**Request**: -```json -{ - "locale": "en", - "dateFormat": "dd MMMM yyyy", - "withdrawnOnDate": "29 December 2025", - "note": "User requested withdrawal" -} -``` - -**DTO**: `SavingsAccountWithdrawPayload` - ---- - -## Loan Account - -### GET /loans/{loanId} -**Purpose**: Get loan account details with associations - -**Service**: `LoanService.getLoanWithAssociations(loanId, associations)` - -**Query Parameters**: -| Parameter | Values | -|-----------|--------| -| `associations` | `transactions`, `repaymentSchedule`, `charges` | - -**Response**: -```json -{ - "id": 67890, - "accountNo": "000000067890", - "clientId": 1, - "clientName": "John Doe", - "loanProductId": 1, - "loanProductName": "Personal Loan", - "principal": 10000.00, - "status": { "id": 300, "value": "Active" }, - "summary": { - "principalDisbursed": 10000.00, - "principalPaid": 5000.00, - "principalOutstanding": 5000.00, - "interestCharged": 500.00, - "totalExpectedRepayment": 10500.00 - }, - "repaymentSchedule": {...}, - "transactions": [...] -} -``` - -**DTO**: `LoanWithAssociations` - ---- - -### GET /loanproducts -**Purpose**: Get available loan products - -**Service**: `LoanService.getLoanProducts()` - -**Response**: -```json -[ - { - "id": 1, - "name": "Personal Loan", - "principal": 10000.00, - "interestRatePerPeriod": 12.0 - } -] -``` - -**DTO**: `List` - ---- - -### POST /loans -**Purpose**: Submit loan application - -**Service**: `LoanService.createLoansAccount(payload)` - -**Request**: -```json -{ - "clientId": 1, - "productId": 1, - "principal": 10000.00, - "loanTermFrequency": 12, - "loanTermFrequencyType": 2, - "numberOfRepayments": 12, - "repaymentEvery": 1, - "repaymentFrequencyType": 2, - "interestRatePerPeriod": 12.0, - "expectedDisbursementDate": "29 December 2025", - "submittedOnDate": "29 December 2025", - "locale": "en", - "dateFormat": "dd MMMM yyyy" -} -``` - -**DTO**: `LoansPayload` - ---- - -### POST /loans/{loanId}?command=withdrawnByApplicant -**Purpose**: Withdraw loan application - -**Service**: `LoanService.withdrawLoanAccount(loanId, payload)` - ---- - -### GET /loans/{loanId}/template?templateType=repayment -**Purpose**: Get loan repayment template - -**Service**: `LoanService.getLoanRepaymentTemplate(loanId)` - ---- - -### GET /loans/{loanId}/transactions/{transactionId} -**Purpose**: Get loan transaction details - -**Service**: `LoanService.getLoanAccountTransaction(loanId, transactionId)` - ---- - -## Share Account - -### GET /products/share -**Purpose**: Get available share products - -**Service**: `ShareAccountService.getShareProducts()` - -**Response**: -```json -[ - { - "id": 1, - "name": "Common Shares", - "shortName": "CS", - "unitPrice": 100.00, - "currency": { "code": "USD", "displaySymbol": "$" } - } -] -``` - ---- - -### POST /shareaccounts -**Purpose**: Submit share account application - -**Service**: `ShareAccountService.submitShareApplication(payload)` - ---- - -### GET /shareaccounts/{accountId} -**Purpose**: Get share account details - -**Service**: `ShareAccountService.getShareAccountDetails(accountId)` - ---- - -## Beneficiary - -### GET /beneficiaries/tpt -**Purpose**: Get list of beneficiaries - -**Service**: `BeneficiaryService.beneficiaryList()` - -**Response**: -```json -[ - { - "id": 5001, - "name": "John Doe", - "officeName": "Head Office", - "clientName": "John Doe", - "accountType": { "id": 2, "value": "Savings Account" }, - "accountNumber": "SA-0001234567", - "transferLimit": 10000.00 - } -] -``` - -**DTO**: `Beneficiary` - ---- - -### GET /beneficiaries/tpt/template -**Purpose**: Get beneficiary template (account type options) - -**Service**: `BeneficiaryService.beneficiaryTemplate()` - -**Response**: -```json -{ - "accountTypeOptions": [ - { "id": 0, "value": "Share Account" }, - { "id": 1, "value": "Loan Account" }, - { "id": 2, "value": "Savings Account" } - ] -} -``` - -**DTO**: `BeneficiaryTemplate` - ---- - -### POST /beneficiaries/tpt -**Purpose**: Create new beneficiary - -**Service**: `BeneficiaryService.createBeneficiary(payload)` - -**Request**: -```json -{ - "locale": "en", - "name": "John Doe", - "accountNumber": "SA-0001234567", - "accountType": 2, - "transferLimit": 10000, - "officeName": "Head Office" -} -``` - -**Response**: -```json -{ - "resourceId": 5003 -} -``` - -**DTO**: `BeneficiaryPayload` - ---- - -### PUT /beneficiaries/tpt/{beneficiaryId} -**Purpose**: Update beneficiary - -**Service**: `BeneficiaryService.updateBeneficiary(beneficiaryId, payload)` - -**Request**: -```json -{ - "name": "John Doe Updated", - "transferLimit": 15000 -} -``` - -**DTO**: `BeneficiaryUpdatePayload` - ---- - -### DELETE /beneficiaries/tpt/{beneficiaryId} -**Purpose**: Delete beneficiary - -**Service**: `BeneficiaryService.deleteBeneficiary(beneficiaryId)` - ---- - -## Transfer - -### GET /accounttransfers/template -**Purpose**: Get transfer template with account options - -**Service**: `SavingAccountsListService.accountTransferTemplate(fromAccountId, fromAccountType)` - -**Query Parameters**: -| Parameter | Type | -|-----------|------| -| `fromAccountId` | Long | -| `fromAccountType` | Long (2 = Savings) | - -**Response**: -```json -{ - "fromAccountTypeOptions": [...], - "toAccountTypeOptions": [...], - "fromAccountOptions": [ - { - "accountId": 12345, - "accountNo": "000000012345", - "accountType": { "id": 2, "value": "Savings Account" }, - "clientId": 1, - "clientName": "John Doe" - } - ], - "toAccountOptions": [...] -} -``` - -**DTO**: `AccountOptionsTemplate` - ---- - -### POST /accounttransfers -**Purpose**: Execute account transfer - -**Service**: `SavingAccountsListService.makeTransfer(payload)` - -**Request**: -```json -{ - "fromOfficeId": 1, - "fromClientId": 1, - "fromAccountType": 2, - "fromAccountId": 12345, - "toOfficeId": 1, - "toClientId": 2, - "toAccountType": 2, - "toAccountId": 12346, - "transferDate": "29 December 2025", - "transferAmount": 100.00, - "transferDescription": "Transfer to beneficiary", - "dateFormat": "dd MMMM yyyy", - "locale": "en" -} -``` - -**DTO**: `TransferPayload` - ---- - -## Guarantor - -### GET /loans/{loanId}/guarantors -**Purpose**: Get list of guarantors for a loan - -**Service**: `GuarantorService.getGuarantorList(loanId)` - ---- - -### GET /loans/{loanId}/guarantors/template -**Purpose**: Get guarantor template - -**Service**: `GuarantorService.getGuarantorTemplate(loanId)` - ---- - -### POST /loans/{loanId}/guarantors -**Purpose**: Add guarantor to loan - -**Service**: `GuarantorService.addGuarantor(loanId, payload)` - ---- - -### PUT /loans/{loanId}/guarantors/{guarantorId} -**Purpose**: Update guarantor - -**Service**: `GuarantorService.updateGuarantor(loanId, guarantorId, payload)` - ---- - -### DELETE /loans/{loanId}/guarantors/{guarantorId} -**Purpose**: Delete guarantor - -**Service**: `GuarantorService.deleteGuarantor(loanId, guarantorId)` - ---- - -## Notification - -### GET /device/registration/client/{clientId} -**Purpose**: Get notification registration ID - -**Service**: `NotificationService.getUserNotificationId(clientId)` - ---- - -### POST /device/registration -**Purpose**: Register device for notifications - -**Service**: `NotificationService.registerNotification(payload)` - -**Request**: -```json -{ - "clientId": 1, - "registrationId": "fcm_token_here" -} -``` - ---- - -### PUT /device/registration/{id} -**Purpose**: Update notification registration - -**Service**: `NotificationService.updateRegisterNotification(id, payload)` - ---- - -## Charges - -### GET /clients/{clientId}/charges -**Purpose**: Get client charges - -**Service**: `ClientChargeService.getClientChargeList(clientId)` - -**Response**: -```json -{ - "totalFilteredRecords": 3, - "pageItems": [ - { - "clientId": 1, - "chargeId": 101, - "name": "Processing Fee", - "dueDate": [2025, 1, 15], - "amount": 50.00, - "amountPaid": 0.00, - "amountOutstanding": 50.00, - "penalty": false, - "isActive": true, - "paid": false - } - ] -} -``` - -**DTO**: `Page` - ---- - -### GET /loans/{loanId}/charges -**Purpose**: Get loan charges - -**Service**: `ClientChargeService.getChargeList("loans", loanId)` - ---- - -### GET /savingsaccounts/{accountId}/charges -**Purpose**: Get savings account charges - -**Service**: `ClientChargeService.getChargeList("savingsaccounts", accountId)` - ---- - -## User Settings - -### PUT /user/password -**Purpose**: Update user password - -**Service**: `UserService.updatePassword(payload)` - -**Request**: -```json -{ - "newPassword": "newSecurePassword123", - "confirmPassword": "newSecurePassword123" -} -``` - ---- - -## Local-Only Features - -These features do not require API calls: - -| Feature | Storage | Notes | -|---------|---------|-------| -| QR Code | - | Local generation/scanning | -| Location | Static | Hardcoded branch locations | -| Passcode | DataStore | Local biometric/PIN | - ---- - -## Error Response Format - -All endpoints return errors in this format: - -```json -{ - "developerMessage": "Detailed error for debugging", - "httpStatusCode": "400", - "defaultUserMessage": "User-friendly message", - "userMessageGlobalisationCode": "error.msg.code", - "errors": [] -} -``` - -See [ERROR_HANDLING.md](ERROR_HANDLING.md) for complete error handling guide. - ---- - -## Related Files - -- Quick Lookup: [API_INDEX.md](API_INDEX.md) -- Client Patterns: [CLIENT_PATTERNS.md](CLIENT_PATTERNS.md) -- Error Handling: [ERROR_HANDLING.md](ERROR_HANDLING.md) -- Design Layer: `design-spec-layer/features/*/API.md` - ---- - -## Changelog - -| Date | Change | -|------|--------| -| 2025-01-05 | Created - aggregated from design layer API.md files | diff --git a/claude-product-cycle/server-layer/CLIENT_PATTERNS.md b/claude-product-cycle/server-layer/CLIENT_PATTERNS.md deleted file mode 100644 index 776d8363d..000000000 --- a/claude-product-cycle/server-layer/CLIENT_PATTERNS.md +++ /dev/null @@ -1,517 +0,0 @@ -# Client Layer Implementation Patterns - -> **Purpose**: Service and Repository implementation patterns for client layer -> **Derived from**: Design layer API.md files -> **Location**: `core/network/` (services), `core/data/` (repositories) - ---- - -## Table of Contents -1. [Overview](#overview) -2. [Service Interface Pattern](#service-interface-pattern) -3. [Repository Interface Pattern](#repository-interface-pattern) -4. [Repository Implementation Pattern](#repository-implementation-pattern) -5. [DTO Patterns](#dto-patterns) -6. [DataState Pattern](#datastate-pattern) -7. [Flow vs Suspend Guidelines](#flow-vs-suspend-guidelines) -8. [Complete Examples](#complete-examples) - ---- - -## Overview - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ SERVICE (core/network/services/) │ -│ └─→ Ktorfit interface with HTTP annotations │ -│ └─→ Returns Flow or HttpResponse │ -├─────────────────────────────────────────────────────────────────┤ -│ REPOSITORY INTERFACE (core/data/repository/) │ -│ └─→ Defines contract for data operations │ -│ └─→ Returns Flow> or DataState │ -├─────────────────────────────────────────────────────────────────┤ -│ REPOSITORY IMPLEMENTATION (core/data/repositoryImpl/) │ -│ └─→ Implements repository interface │ -│ └─→ Handles error mapping and dispatcher context │ -└─────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Service Interface Pattern - -### Location -`core/network/src/commonMain/kotlin/org/mifos/mobile/core/network/services/` - -### Template - -```kotlin -package org.mifos.mobile.core.network.services - -import de.jensklingenberg.ktorfit.http.* -import io.ktor.client.statement.HttpResponse -import kotlinx.coroutines.flow.Flow - -interface [Feature]Service { - - // GET - List (returns typed Flow) - @GET(ApiEndPoints.[FEATURE]) - fun get[Feature]List(): Flow> - - // GET - Single item (returns typed Flow) - @GET(ApiEndPoints.[FEATURE] + "/{id}") - fun get[Feature]Details( - @Path("id") id: Long, - ): Flow<[Entity]> - - // GET - With query params - @GET(ApiEndPoints.[FEATURE] + "/{id}") - fun get[Feature]WithAssociations( - @Path("id") id: Long, - @Query("associations") associations: String?, - ): Flow<[EntityWithAssociations]> - - // GET - Template - @GET(ApiEndPoints.[FEATURE] + "/template") - fun get[Feature]Template(): Flow<[Feature]Template> - - // POST - Create (returns HttpResponse for error handling) - @POST(ApiEndPoints.[FEATURE]) - suspend fun create[Feature]( - @Body payload: [Feature]Payload?, - ): HttpResponse - - // PUT - Update - @PUT(ApiEndPoints.[FEATURE] + "/{id}") - suspend fun update[Feature]( - @Path("id") id: Long, - @Body payload: [Feature]UpdatePayload?, - ): HttpResponse - - // DELETE - Remove - @DELETE(ApiEndPoints.[FEATURE] + "/{id}") - suspend fun delete[Feature]( - @Path("id") id: Long, - ): HttpResponse - - // POST - With command - @POST(ApiEndPoints.[FEATURE] + "/{id}?command=action") - suspend fun [feature]Action( - @Path("id") id: Long, - @Body payload: [Action]Payload?, - ): HttpResponse -} -``` - -### Key Rules - -| Annotation | Usage | Return Type | -|------------|-------|-------------| -| `@GET` | Read operations | `Flow` | -| `@POST` | Create operations | `suspend HttpResponse` | -| `@PUT` | Update operations | `suspend HttpResponse` | -| `@DELETE` | Delete operations | `suspend HttpResponse` | -| `@Path` | URL path variable | N/A | -| `@Query` | Query parameter | N/A | -| `@Body` | Request body | N/A | - -### When to Use Flow vs HttpResponse - -| Scenario | Return Type | Reason | -|----------|-------------|--------| -| GET typed response | `Flow` | Direct deserialization | -| POST/PUT/DELETE | `suspend HttpResponse` | Need to handle errors manually | -| GET with error handling | `suspend HttpResponse` | Custom error extraction | - ---- - -## Repository Interface Pattern - -### Location -`core/data/src/commonMain/kotlin/org/mifos/mobile/core/data/repository/` - -### Template - -```kotlin -package org.mifos.mobile.core.data.repository - -import kotlinx.coroutines.flow.Flow -import org.mifos.mobile.core.common.DataState - -interface [Feature]Repository { - - // GET - List - fun get[Feature]List(): Flow>> - - // GET - Single - fun get[Feature]Details(id: Long): Flow> - - // GET - Template - fun get[Feature]Template(): Flow> - - // POST - Create - suspend fun create[Feature](payload: [Feature]Payload?): DataState - - // PUT - Update - suspend fun update[Feature]( - id: Long?, - payload: [Feature]UpdatePayload?, - ): DataState - - // DELETE - Remove - suspend fun delete[Feature](id: Long?): DataState -} -``` - -### Key Rules - -| Operation | Return Type | Pattern | -|-----------|-------------|---------| -| Read (list/single) | `Flow>` | Streaming updates | -| Create/Update/Delete | `DataState` | One-shot operation | -| Template fetching | `Flow>` | May update | - ---- - -## Repository Implementation Pattern - -### Location -`core/data/src/commonMain/kotlin/org/mifos/mobile/core/data/repositoryImpl/` - -### Template - -```kotlin -package org.mifos.mobile.core.data.repositoryImpl - -import io.ktor.client.call.body -import io.ktor.client.plugins.ClientRequestException -import io.ktor.client.plugins.ServerResponseException -import io.ktor.client.statement.bodyAsText -import kotlinx.coroutines.CoroutineDispatcher -import kotlinx.coroutines.flow.Flow -import kotlinx.coroutines.flow.catch -import kotlinx.coroutines.flow.flow -import kotlinx.coroutines.flow.flowOn -import kotlinx.coroutines.flow.map -import kotlinx.coroutines.withContext -import org.mifos.mobile.core.common.DataState -import org.mifos.mobile.core.network.DataManager -import java.io.IOException - -class [Feature]RepositoryImpl( - private val dataManager: DataManager, - private val ioDispatcher: CoroutineDispatcher, -) : [Feature]Repository { - - // Pattern 1: Flow-based GET (for lists and details) - override fun get[Feature]List(): Flow>> = flow { - try { - dataManager.[feature]Api.get[Feature]List() - .collect { response -> - emit(DataState.Success(response)) - } - } catch (e: Exception) { - emit(DataState.Error(e, null)) - } - }.flowOn(ioDispatcher) - - // Pattern 2: Alternative Flow with map/catch - override fun get[Feature]Details(id: Long): Flow> { - return dataManager.[feature]Api.get[Feature]Details(id) - .map { DataState.Success(it) } - .catch { emit(DataState.Error(it, null)) } - .flowOn(ioDispatcher) - } - - // Pattern 3: Suspend-based POST/PUT/DELETE with error handling - override suspend fun create[Feature](payload: [Feature]Payload?): DataState { - return withContext(ioDispatcher) { - try { - val response = dataManager.[feature]Api.create[Feature](payload) - DataState.Success(response.bodyAsText()) - } catch (e: ClientRequestException) { - val errorMessage = extractErrorMessage(e.response) - DataState.Error(Exception(errorMessage), null) - } catch (e: IOException) { - DataState.Error( - Exception("Network error: ${e.message ?: "Please check your connection"}"), - null - ) - } catch (e: ServerResponseException) { - DataState.Error(Exception("Server error: ${e.message}"), null) - } - } - } - - // Pattern 4: Update with path parameter - override suspend fun update[Feature]( - id: Long?, - payload: [Feature]UpdatePayload?, - ): DataState { - return withContext(ioDispatcher) { - try { - val response = dataManager.[feature]Api.update[Feature](id!!, payload) - DataState.Success(response.bodyAsText()) - } catch (e: ClientRequestException) { - val errorMessage = extractErrorMessage(e.response) - DataState.Error(Exception(errorMessage), null) - } catch (e: IOException) { - DataState.Error( - Exception("Network error: ${e.message ?: "Please check your connection"}"), - null - ) - } catch (e: ServerResponseException) { - DataState.Error(Exception("Server error: ${e.message}"), null) - } - } - } - - // Pattern 5: Delete operation - override suspend fun delete[Feature](id: Long?): DataState { - return withContext(ioDispatcher) { - try { - val response = dataManager.[feature]Api.delete[Feature](id!!) - DataState.Success(response.bodyAsText()) - } catch (e: ClientRequestException) { - val errorMessage = extractErrorMessage(e.response) - DataState.Error(Exception(errorMessage), null) - } catch (e: IOException) { - DataState.Error( - Exception("Network error: ${e.message ?: "Please check your connection"}"), - null - ) - } catch (e: ServerResponseException) { - DataState.Error(Exception("Server error: ${e.message}"), null) - } - } - } -} -``` - ---- - -## DTO Patterns - -### Location -`core/model/src/commonMain/kotlin/org/mifos/mobile/core/model/entity/` - -### Response DTO (Entity) - -```kotlin -@Serializable -@Parcelize -data class [Entity]( - val id: Long? = null, - val name: String? = null, - val status: Status? = null, - val createdDate: List? = null, - // All fields nullable with defaults -) : Parcelable -``` - -### Request DTO (Payload) - -```kotlin -@Serializable -@Parcelize -data class [Feature]Payload( - val locale: String? = null, - val dateFormat: String? = null, - val name: String? = null, - val amount: Double? = null, - // Fields matching API request body -) : Parcelable -``` - -### Update DTO - -```kotlin -@Serializable -data class [Feature]UpdatePayload( - val name: String? = null, - val amount: Int = 0, - // Only updatable fields -) -``` - -### Template DTO - -```kotlin -@Serializable -@Parcelize -data class [Feature]Template( - val options: List