Webapp for the Eloka white-labelled SaaS platform to run your business like agent-banking, micro-finance, payments, etc.

• One-time Setup:
  • Run npm i
  • Run npm run prepare
  • Make sure the .husky/pre-commit file is executable by running: chmod +x pre-commit
• Run project on your local device:
  • Run: npm run dev
  • Open webpage: http://localhost:3002

• npm run dev - Run development server on port 3002
• npm run dev.https - Run development server with HTTPS on port 3004
• npm run scan - Run development server on port 3006 with react-scan to detects rerenders and other performance issues
• npm run inspect - Run development server with Node inspector
• npm start - Start production server
• npm run build - Build production bundle
• npm run analyze - Build with bundle-analyzer for size analysis

• npm run lint - Run Next.js linting
• npm run lint:error - Run linting with fewer warnings
• npm run lint:fix - Fix linting issues automatically
• npm run format - Format code with Prettier
• npm run format:check - Check code formatting without changes

• npm test - Run all tests
• npm run test:quick - Run tests quickly without coverage for a single or all files (skips if no tests found)
• npm run test:file - Run tests for a single file in verbose mode (usage: npm run test:file path/to/file)
• npm run test:file:pattern - Run tests matching a pattern (usage: npm run test:file:pattern pattern)
• npm run test:failed - Run only the tests that failed in the last run
• npm run test:watch - Run tests in watch mode
• npm run test:coverage - Run tests with coverage report
• npm run test:update:snapshots - Update test snapshots to match current output

• npm run g or npm run generate - Run plop generator for new components
• npm run sb or npm run storybook - Run Storybook on port 6006
• npm run build:storybook - Build static Storybook
• npm run check-updates - Check for outdated dependencies
• npm run check-deps - Run custom dependency checks

• npm run docker:dev - Run development container
• npm run docker:prod - Run production container
• npm run docker:dev:build - Build and run development container
• npm run docker:prod:build - Build and run production container
• npm run docker:stop - Stop all containers
• npm run docker:clean - Remove containers, images, and volumes

• components/: Contains reusable components used across the application.
• constants/: Contains constant values, configurations, and settings used throughout the application.
• contexts/: Contains context providers for managing global state and data.
• docs/: Contains extensive documentation files for the project.
• helpers/: Contains helper functions and utilities for various functionalities.
• hooks/: Contains custom React hooks for reusable logic.
• layout-components/: Contains components related to the layout and structure of the application.
• libs/: Contains wrapper functions for third-party libraries.
• memory-bank/: Contains the foundational project documentation for Memory Bank to be used by AI Agents.
• page-components/: Contains the main page components for the application.
• pages/: Contains Next.js page routes and components.
• plop-templates/: Contains templates for generating new components, hooks, etc. using Plop.
• public/: Contains static assets such as images and icons.
• styles/: Contains global styles and theme configurations.
• tf-components/: Contains low-code components related to the transaction framework.
• utils/: Contains shared utility functions and helpers for various functionalities.
• __tests__/: Contains unit and integration tests for the application. The tests are organized in a similar structure to the main codebase for easy navigation.

• commit-message-instructions.md: Guidelines for writing good commit messages.
• docker-usage.md: Instructions for using Docker with the project.]
• features/: Contains detailed documentation for various features of the application.
  • android.md: How does Eloka communicate with the Android wrapper app to provide a native experience?
  • dashboard.md: Admin dashboard feature documentation.
  • dynamic-popup-module.md: How to use the dynamic popup module to show custom popups throughout the app?
  • feature-flags.md: How to use feature flags to conditionally enable/disable features, or for a beta rollout?
  • inventory-management.md: Inventory management feature documentation.
  • pub-sub.md: How to enable cross-component communication using the Pub/Sub pattern?
  • transaction-history.md: Transaction history feature documentation.

• Global Styles:
  • Global CSS styles are defined in styles/globals.ts.
• Theme:
  • Default color theme configuration (CHakraUI): styles/themes.tsx
  • A list of predefined color-themes for the organizations to choose from: constants/colorThemes.js
  • Component to show theme colors to users to choose from: components/ColorPair/ColorPair.jsx -Organization's custom theme is loaded in pages/_app.tsx.
• Icon Library:
  • To view available icons, open the webpage: http://localhost:3002/icons_demo
  • To add new icons, see the file: constants/IconLibrary.ts
  • There are duplicate icon-names as well, same icons with different names (for backward compatibility). Such icons are shown in red background with the pointer to the actual icon name.
  • For optimizing individual SVG icons, use: SVGOMG - SVGO's Missing GUI
• Top Navbar - components/NavBar/NavBar.jsx
  • Profile-menu (drop-down menu in top-right corner):
    • Rendered in the MyAccountCard component in NavBar.jsx.
    • Items configuration (for internal links, such as, Settings page): constants/profileCardMenus.js
• Left Sidebar - components/SideBar/SideBar.jsx
  • Menu items configuration: constants/SidebarMenu.ts
  • Menu Context (data fetch after login, and filtered into transaction & other lists for the sidebar & bottom app bar): contexts/MenuContext.tsx
  • Menu data filtering & transformation using: helpers/processTransactionData.js
• Bottom App Bar - The BottomAppBar is a flexible component that serves as the primary navigation bar at the bottom of the small screen. It adapts to various use cases, allowing for the inclusion of navigation links, actions, and custom components. components/BottomAppBar/BottomAppBar.tsx
  • Bottom App Bar Items - The items in the Bottom App Bar are configured using the useBottomAppBarItems hook. This hook returns an array of objects, each representing an item in the bottom app bar. components/BottomAppBar/useBottomAppBar.ts
    • Each item can include the following properties:
      • name: A unique identifier for the item.
      • label: The text label displayed beneath the icon.
      • icon: The name of the icon displayed in the item.
      • path: The navigation path for the item. For admin users, paths can be prefixed with /admin.
      • action: A function that is executed when the item is clicked, such as toggling a search bar.
      • component: A custom JSX component that can be rendered within the item.
      • visible: A boolean indicating whether the item should be visible in the Bottom App Bar.

To add pricing configuration page for a new product in the Admin portal under "Pricing & Commission" left-menu section, use the following steps:

1. Create a configuration for the product in constants/ProductBusinessConfigurations.ts file under the business_config_slug_map object.
   1. Set a unique slug (for the page URL) and the name of the page-component to display.
   2. Set template="fileupload"
   3. Add set URL & parameters for file-upload and sample-file-download in the meta object.
   4. Add the slug to product_pricing_categories object in the order that you want to display on the product listing page. If not added here, the product will not be displayed on the product listing page.

1. Create a page-component for the pricing configuration running the command npm run g
   1. Select "Component"
   2. Enter the name of the page-component (eg: TrainTravel)
   3. Select Path: page-components/Admin
   4. Enter sub-folder: PricingCommission
2. Copy sub-components from other existing pricing page-component such as: TrainTravelDistributor and TrainTravelRetailer
3. Create a configuration for the product in constants/ProductBusinessConfigurations.ts file under the business_config_slug_map object.
   1. Set a unique slug (for the page URL) and the name of the page-component to display (created in step #1).
   2. Add the slug to product_pricing_categories object in the order that you want to display on the product listing page. If not added here, the product will not be displayed on the product listing page.
4. Create a configuration for the product in constants/ProductDetails.js page. Set slabs, validations, etc for the pricing configuration.

• To add a public page/route (that can be accesseed by anyone, without logging in), add the route in constants/validRoutes.js within the array: publicLinks.

• useAppLink: For handling app links (deep-links) and redirecting to the appropriate page. Supports old connect.eko.in links as well as the ekoconnect:// links.
• useClipboard: Copy text to clipboard.
• useDailyCacheState: Cache the state in the browser's localStorage. The cache state has a valid flag which is set to false when the cache is stale (older than 1 day).
• useDebouncedState: Debounce the state update to avoid unnecessary re-renders.
• useDelayToggle: A simple hook to toggle a boolean value after a delay. For example, it can be used to load/show a component after an initial delay.
• useExternalResource: Load an external resource (JS/CSS) dynamically. It returns a state variable (idle, loading, ready, error) and a reload function. The resource is loaded only once.
• useFeatureFlag: Check if a feature is enabled or not. Set the feature-flags with conditions in the constants/featureFlags.ts file.
• useHotkey: Register a hotkey (keyboard shortcut) and execute a callback function when the hotkey is pressed. Uses the tinykeys library.
• useHslColor: Get a dynamic color in HSL format based on the input value. Useful for creating a color scale or colored tags.
• useLocalStorage: Read/Write data to the browser's localStorage.
• useSessionStorage: Read/Write data to the browser's sessionStorage.
• usePubSub: Publish/Subscribe to events. Add new topics in the contexts/PubSubContext.js file.

These are wrappers around 3rd-party libraries or associated utility functions.

• GoogleMap - Google Maps API wrapper
• Map View - View static maps using iFrame
• dateFormat - Date formatting utility (wrapper around date-fns)
• faceDetector - Dynamically loads MediaPipe Face Detector model (uses wasm)
• chakraKeyFrames - Common keyframes for ChakraUI animations

The following data is stored in the browser (localStorage & sessionStorage):

1. org_detail: Organization details
2. user_detail: User details
3. access_token: Access token
4. access_token_lite
5. access_token_crm
6. token_timeout: Token timeout
7. refresh_token: Refresh token

• Component: AiChatWidget.jsx
• TODO: use react-chatbot-kit library.

• Dashboard
  • Business Dashboard: Divided into 4 part i.e. TopPanel, EarningOverview, SuccessRate & TopMerchants with there config in there respective file - page-components/Admin/Dashboard/BusinessDashboard

• Home
  • Know Your Commissions:
    • Commission Data is fetched via CommissionContext when the user signs-in.