{"id":28557698,"url":"https://github.com/erxes/erxes-next","last_synced_at":"2025-07-07T00:30:34.605Z","repository":{"id":294840728,"uuid":"883491297","full_name":"erxes/erxes-next","owner":"erxes","description":null,"archived":false,"fork":false,"pushed_at":"2025-07-05T13:52:49.000Z","size":12315,"stargazers_count":4,"open_issues_count":34,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-05T14:38:56.619Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/erxes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-11-05T03:53:32.000Z","updated_at":"2025-07-05T13:52:04.000Z","dependencies_parsed_at":"2025-07-05T14:40:16.731Z","dependency_job_id":null,"html_url":"https://github.com/erxes/erxes-next","commit_stats":null,"previous_names":["erxes/erxes-next"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/erxes/erxes-next","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erxes%2Ferxes-next","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erxes%2Ferxes-next/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erxes%2Ferxes-next/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erxes%2Ferxes-next/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/erxes","download_url":"https://codeload.github.com/erxes/erxes-next/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erxes%2Ferxes-next/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263993507,"owners_count":23541026,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-06-10T07:39:00.424Z","updated_at":"2025-07-07T00:30:34.599Z","avatar_url":"https://github.com/erxes.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Front\n\n\u003ca alt=\"Nx logo\" href=\"https://nx.dev\" target=\"_blank\" rel=\"noreferrer\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png\" width=\"45\"\u003e\u003c/a\u003e\n\n## Overview\n\nFront is a React-based monorepo project built with Nx. This documentation provides comprehensive information about the project structure, development workflow, and best practices.\n\n## Table of Contents\n\n1. [Project Setup](#project-setup)\n2. [Development Workflow](#development-workflow)\n3. [Project Structure](#project-structure)\n4. [Best Practices](#best-practices)\n5. [Commands Reference](#commands-reference)\n6. [UI Design Inspiration](#ui-design-inspiration)\n\n## Project Setup\n\nThis project is built as an Nx workspace, which provides tools for monorepo management, code generation, and task execution. The workspace contains multiple applications and libraries that share code and configurations.\n\n### Prerequisites\n\n- Node.js v23 (use `nvm use 23` to switch)\n- npm or yarn\n\n### Getting Started\n\n1. Clone the repository\n2. Install dependencies: `pnpm install\n`\n3. Start the development server: `npx nx serve core`\n\n## Development Workflow\n\n### Running Applications\n\nTo run the development server for a specific application:\n\n```sh\nnpx nx serve core-ui        # Run the core application\nnpx nx serve core-ui --devRemotes=[plugin name]-ui,[another plugin name]-ui      # Run plugin in development mode\n```\n\n### Building for Production\n\n```sh\nnpx nx build core        # Build the core application\nnpx nx build plugin      # Build a plugin application\n```\n\n### Serving Production Build\n\n```sh\nnpx nx serve-static core    # Serve the built core application\n```\n\n### Exploring Project Structure\n\n```sh\nnpx nx graph              # Visualize project dependencies\nnpx nx show project core  # Show available targets for a project\n```\n\n## Project Structure\n\nThe recommended folder structure for modules:\n\n```\nmodule_name/\n├── components/       # React components\n├── hooks/            # Custom React hooks\n├── types/            # TypeScript interfaces and types\n├── utils/            # Utility functions\n├── contexts/         # React contexts\n├── graphql/          # GraphQL queries and mutations\n└── states/           # State management\n```\n\n## Best Practices\n\n### Code Style\n\n- Use TypeScript for all code; prefer interfaces over types\n- Use functional components with TypeScript interfaces\n- Avoid classes; use functional and declarative programming patterns\n- Use descriptive variable names with auxiliary verbs (e.g., `isLoading`, `hasError`)\n- Structure files with exported component, utils, contexts, hooks, types\n\n### Naming Conventions\n\n- Use lowercase with dashes for directories (e.g., `components/auth-wizard`)\n- Favor named exports for components\n\n### TypeScript Usage\n\n- Avoid enums; use maps instead\n- Think twice before using `any` type\n- Use absolute paths for imports\n\n### UI and Styling\n\n- Use Shadcn UI, Radix, and Tailwind for components and styling\n- Implement responsive design with Tailwind CSS; use a mobile-first approach\n- Avoid arbitrary Tailwind class names when possible\n\n### Performance Optimization\n\n- Minimize use of `useEffect`\n\n### State Management\n\n- Use `useQueryState` hook for URL search parameter state management\n\n### Before Committing\n\n- Clean up console.log statements\n- Ensure code follows project structure and naming conventions\n\n## Commands Reference\n\n### Node Version Management\n\n```sh\nnvm use 23              # Switch to Node.js v23\n```\n\n### Development Commands\n\n```sh\nnpx nx serve core-ui                         # Start core development server\nnpx nx serve core-ui --devRemotes=[plugin name]-ui  # Start with remote modules\n```\n\n### Build Commands\n\n```sh\nnpx nx build core       # Build core for production\nnpx nx build plugin     # Build plugin for production\n```\n\n### Utility Commands\n\n```sh\nnpx nx serve-static core  # Serve production build\nnpx nx list               # List installed plugins\nnpx nx list \u003cplugin-name\u003e # Show capabilities of a plugin\nnpx nx g @nx/react:app demo  # Generate a new application\nnpx nx g @nx/react:lib mylib # Generate a new library\n```\n\n## UI Design Inspiration\n\nThe project draws design inspiration from:\n\n- Shopify\n- Airtable\n- Attio\n- Twenty\n\n## Quick Actions Feature\n\nThe project includes a Quick Actions feature that provides suggestions based on:\n\n- Current page context\n- Recent user actions\n- User context (company, team, role)\n- User intent\n- Browser location\n- User activity history\n\n## Additional Resources\n\n- [Nx Documentation](https://nx.dev)\n- [Nx Discord Community](https://go.nx.dev/community)\n- [Nx Twitter](https://twitter.com/nxdevtools)\n- [Nx LinkedIn](https://www.linkedin.com/company/nrwl)\n- [Nx YouTube Channel](https://www.youtube.com/@nxdevtools)\n- [Nx Blog](https://nx.dev/blog)\n\n### Library Documentation\n\n- [React](https://reactjs.org/docs/getting-started.html) - UI library\n- [TypeScript](https://www.typescriptlang.org/docs/) - JavaScript with syntax for types\n- [Tailwind CSS](https://tailwindcss.com/docs) - Utility-first CSS framework\n- [Shadcn UI](https://ui.shadcn.com) - Re-usable components built with Radix UI and Tailwind\n- [Radix UI](https://www.radix-ui.com/docs/primitives/overview/introduction) - Unstyled, accessible UI components\n- [React Router](https://reactrouter.com/en/main) - Routing library for React\n\n## Tailwind CSS Variables\n\nTailwind CSS in this project uses CSS variables for theming and consistent styling. These variables are defined in the root CSS file and can be accessed throughout the application.\n\n### Theme Variables\n\nThe project uses CSS variables for colors, spacing, and other design tokens. These are defined in the theme configuration and can be accessed in Tailwind classes or directly in CSS.\n\n#### Color Variables\n\n```css\n:root {\n  --background: 0 0% 100%;\n  --foreground: 222.2 84% 4.9%;\n\n  --card: 0 0% 100%;\n  --card-foreground: 222.2 84% 4.9%;\n\n  --popover: 0 0% 100%;\n  --popover-foreground: 222.2 84% 4.9%;\n\n  --primary: 222.2 47.4% 11.2%;\n  --primary-foreground: 210 40% 98%;\n\n  --secondary: 210 40% 96.1%;\n  --secondary-foreground: 222.2 47.4% 11.2%;\n\n  --muted: 210 40% 96.1%;\n  --muted-foreground: 215.4 16.3% 46.9%;\n\n  --accent: 210 40% 96.1%;\n  --accent-foreground: 222.2 47.4% 11.2%;\n\n  --destructive: 0 84.2% 60.2%;\n  --destructive-foreground: 210 40% 98%;\n\n  --border: 214.3 31.8% 91.4%;\n  --input: 214.3 31.8% 91.4%;\n  --ring: 222.2 84% 4.9%;\n\n  --radius: 0.5rem;\n}\n\n.dark {\n  --background: 222.2 84% 4.9%;\n  --foreground: 210 40% 98%;\n\n  --card: 222.2 84% 4.9%;\n  --card-foreground: 210 40% 98%;\n\n  --popover: 222.2 84% 4.9%;\n  --popover-foreground: 210 40% 98%;\n\n  --primary: 210 40% 98%;\n  --primary-foreground: 222.2 47.4% 11.2%;\n\n  --secondary: 217.2 32.6% 17.5%;\n  --secondary-foreground: 210 40% 98%;\n\n  --muted: 217.2 32.6% 17.5%;\n  --muted-foreground: 215 20.2% 65.1%;\n\n  --accent: 217.2 32.6% 17.5%;\n  --accent-foreground: 210 40% 98%;\n\n  --destructive: 0 62.8% 30.6%;\n  --destructive-foreground: 210 40% 98%;\n\n  --border: 217.2 32.6% 17.5%;\n  --input: 217.2 32.6% 17.5%;\n  --ring: 212.7 26.8% 83.9%;\n}\n```\n\n### Shadow Variables\n\nThe project uses a set of shadow CSS variables for consistent elevation across the UI. These are the shadow variables currently implemented in the project:\n\n```css\n:root {\n  /* Default shadow set */\n  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n}\n\n.dark {\n  /* Adjusted shadows for dark mode */\n  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);\n  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3);\n  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);\n  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);\n  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.3), 0 8px 10px -6px rgb(0 0 0 / 0.3);\n}\n```\n\nThese shadow variables are used in Tailwind classes throughout the application:\n\n```html\n\u003cdiv className=\"shadow-sm\"\u003eSmall shadow for subtle elevation\u003c/div\u003e\n\u003cdiv className=\"shadow\"\u003eDefault shadow for cards and containers\u003c/div\u003e\n\u003cdiv className=\"shadow-md\"\u003eMedium shadow for dropdowns and popovers\u003c/div\u003e\n\u003cdiv className=\"shadow-lg\"\u003eLarge shadow for modals and dialogs\u003c/div\u003e\n\u003cdiv className=\"shadow-xl\"\u003eExtra large shadow for important UI elements\u003c/div\u003e\n```\n\nThe shadow system automatically adjusts between light and dark modes to maintain appropriate visual hierarchy while ensuring sufficient contrast in both themes.\n\n## Create new plugin\n\n1. copy\u0026paste sample_ui folder \u0026 replace name\n2. fix port in project.json\n3. replace all plugin names\n4. `core-ui/module-federation.config.ts` add to remotes\n5. run in dev mode `nx serve core-ui --devRemotes=[plugin name]_ui`\n6. change icon at module/constants/config.ts\n\n# Backend\n\nA Node.js backend service\n\n## Project Structure\n\n```\nbackend/\n├── core-api/           # Core API service\n├── gateway/           # API Gateway\n├── libs/              # Shared libraries\n```\n\n## Core API Service\n\nThe core API service handles all accounting-related operations.\n\n### Features\n\n- Main settings management\n- Currency configuration\n- Tax settings (VAT and CTax)\n- Account mapping\n- GraphQL API\n- TypeScript support\n- MongoDB integration\n\n### API Endpoints\n\n#### GraphQL API\n\n##### Queries\n\n```graphql\nquery GetMainConfigs {\n  getMainConfigs {\n    MainCurrency\n    HasVat\n    VatPayableAccount\n    VatReceivableAccount\n    VatAfterPayableAccount\n    VatAfterReceivableAccount\n    HasCtax\n    CtaxPayableAccount\n  }\n}\n\nquery GetAccounts($journal: String) {\n  getAccounts(journal: $journal) {\n    _id\n    name\n    code\n    type\n  }\n}\n```\n\n##### Mutations\n\n```graphql\nmutation UpdateMainConfigs($input: MainConfigsInput!) {\n  updateMainConfigs(input: $input) {\n    MainCurrency\n    HasVat\n    VatPayableAccount\n    VatReceivableAccount\n    VatAfterPayableAccount\n    VatAfterReceivableAccount\n    HasCtax\n    CtaxPayableAccount\n  }\n}\n```\n\n### Data Models\n\n#### MainConfigs\n\n```typescript\ninterface MainConfigs {\n  MainCurrency: string;\n  HasVat: boolean;\n  VatPayableAccount?: string;\n  VatReceivableAccount?: string;\n  VatAfterPayableAccount?: string;\n  VatAfterReceivableAccount?: string;\n  HasCtax: boolean;\n  CtaxPayableAccount?: string;\n}\n```\n\n### Services\n\n#### ConfigsService\n\nHandles configuration management:\n\n```typescript\nclass ConfigsService {\n  async getMainConfigs(): Promise\u003cMainConfigs\u003e;\n  async updateMainConfigs(input: MainConfigsInput): Promise\u003cMainConfigs\u003e;\n}\n```\n\n#### AccountsService\n\nManages account-related operations:\n\n```typescript\nclass AccountsService {\n  async getAccounts(journal?: string): Promise\u003cAccount[]\u003e;\n}\n```\n\n## API Gateway\n\nThe API Gateway provides:\n\n- Request routing\n- Authentication\n- Rate limiting\n- Request/Response transformation\n- Error handling\n\n## Shared Libraries\n\n### Common Utilities\n\n- Type definitions\n- Validation schemas\n- Helper functions\n- Constants\n\n### Database Models\n\n- MongoDB schemas\n- TypeScript interfaces\n- Validation rules\n\n## Message Queue Dashboard\n\nMonitors and manages message queues:\n\n- Queue status\n- Message processing\n- Error tracking\n- Performance metrics\n\n## Development Setup\n\n1. Install dependencies:\n\n```bash\npnpm install\n```\n\n2. Set up environment variables:\n\n```bash\ncp .env.sample .env\n```\n\n3. Start development servers:\n\n```bash\n# Start core API\npnpm dev:core-api\n\n# Start gateway\npnpm dev:gateway\n\n```\n\n## Testing\n\n```bash\n# Run all tests\npnpm test\n\n# Run specific service tests\npnpm test:core-api\npnpm test:gateway\n```\n\n## Database\n\n### MongoDB Collections\n\n- `configs`: Stores system configurations\n- `accounts`: Stores account information\n- `transactions`: Stores transaction records\n\n### Indexes\n\n```typescript\n// configs collection\ndb.configs.createIndex({ MainCurrency: 1 });\n\n// accounts collection\ndb.accounts.createIndex({ code: 1 }, { unique: true });\ndb.accounts.createIndex({ journal: 1 });\n```\n\n## Error Handling\n\nThe backend implements a standardized error handling system:\n\n```typescript\ninterface ApiError {\n  code: string;\n  message: string;\n  details?: Record\u003cstring, any\u003e;\n}\n```\n\nCommon error codes:\n\n- `INVALID_INPUT`: Invalid request data\n- `NOT_FOUND`: Resource not found\n- `UNAUTHORIZED`: Authentication required\n- `FORBIDDEN`: Insufficient permissions\n- `INTERNAL_ERROR`: Server error\n\n## Security\n\n- JWT authentication\n- Role-based access control\n- Input validation\n- Rate limiting\n- CORS configuration\n- Security headers\n\n## Performance Optimization\n\n- Database indexing\n- Query optimization\n- Caching strategies\n- Connection pooling\n- Request batching\n\n## Monitoring\n\n- Health checks\n- Performance metrics\n- Error tracking\n- Usage statistics\n- Logging system\n\n## Contributing\n\n1. Follow TypeScript best practices\n2. Write unit tests for new features\n3. Update documentation\n4. Follow the established code style\n5. Create feature branches\n6. Submit pull requests\n\n## License\n\n[Your License Here]\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferxes%2Ferxes-next","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ferxes%2Ferxes-next","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferxes%2Ferxes-next/lists"}