📚 Complete Documentation: See the main repository documentation for comprehensive guides.
🏠 Main Repository: RSF Utility - Complete system overview and quick start
This is the frontend service for RSF Utility - a React-based dashboard for ONDC network participants to manage settlement and reconciliation operations.
Technology Stack: React 17 • TypeScript • Material-UI • React Query • React Hook Form
# Install dependencies
npm install
# Configure environment
# Create .env file with REACT_APP_BACKEND_URL
# Start development server
npm start
# Run tests
npm testDevelopment Server: http://localhost:3000
Backend API: Configure via REACT_APP_BACKEND_URL
| Topic | Link |
|---|---|
| System Architecture | ../docs/01-architecture.md |
| Component Architecture | ../docs/02-components.md |
| User Workflows | ../docs/03-workflows.md |
| API Integration | ../docs/04-apis.md |
| Deployment Guide | ../docs/06-deployment.md |
| Security Implementation | ../docs/08-security.md |
| Troubleshooting | ../docs/09-troubleshooting.md |
| Contributing Guidelines | ../docs/10-contributing.md |
npm start # Start development server with hot reload
npm run build # Build for production
npm test # Run unit tests
npm run lint # Check code quality with ESLint
npm run lint:fix # Auto-fix ESLint issues# Frontend Configuration
REACT_APP_BACKEND_URL=http://localhost:3000 # Backend API base URL
REACT_APP_ENV=development # Application environment
REACT_APP_API_TIMEOUT=30000 # API request timeoutsrc/
├── components/ # Reusable UI components
├── pages/ # Page components with routing
├── services/ # API integration and HTTP client
├── context/ # React Context providers
├── hooks/ # Custom React hooks
├── interfaces/ # TypeScript type definitions
├── utils/ # Utility functions
├── styles/ # Styled components and themes
├── constants/ # Application constants
├── enums/ # TypeScript enums
└── App.tsx # Application entry point
Component Hierarchy: Layout → Pages → Components → UI Elements
State Management: React Query (server state) + Context API (client state)
Authentication: JWT tokens with automatic refresh
HTTP Client: Axios with request/response interceptors
For detailed architecture information, see Component Architecture.
- Network participant configuration
- Provider details management
- User role-based access control
- Order listing with filtering and pagination
- Bulk order operations
- Order status tracking
- Due date management
- Settlement generation and validation
- Counterparty selection workflows
- Settlement status monitoring
- Financial breakdown display
- Reconciliation request generation
- Cross-participant communication
- Status tracking and updates
- Discrepancy resolution
- Real-time order statistics
- Settlement performance metrics
- System health monitoring
- Audit trail visualization
Design System: Material-UI with custom ONDC theming
Responsive Design: Mobile-first approach with breakpoints
Accessibility: WCAG 2.1 AA compliance
Internationalization: i18n support for multiple languages
┌─────────────────────────────────────┐
│ Navigation Bar │
├──────────┬──────────────────────────┤
│ │ │
│ Sidebar │ Content Area │
│ │ │
│ │ │
└──────────┴──────────────────────────┘
// Axios instance with interceptors
const apiClient = axios.create({
baseURL: process.env.REACT_APP_BACKEND_URL,
timeout: 30000,
headers: {
'Content-Type': 'application/json'
}
});
// Automatic JWT token injection
apiClient.interceptors.request.use((config) => {
const token = localStorage.getItem('auth_token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
});
// Automatic token refresh on 401
apiClient.interceptors.response.use(
(response) => response,
async (error) => {
if (error.response?.status === 401) {
await refreshAuthToken();
return apiClient.request(error.config);
}
throw error;
}
);// Server state management with caching
const { data: orders, isLoading, error } = useQuery(
['orders', userId, filters],
() => orderService.getOrders(userId, filters),
{
staleTime: 5 * 60 * 1000, // 5 minutes
cacheTime: 10 * 60 * 1000, // 10 minutes
refetchOnWindowFocus: false
}
);- JWT Authentication: Secure token-based authentication
- Automatic Token Refresh: Seamless session management
- Request Validation: Client-side input validation
- HTTPS Enforcement: Secure communication protocol
- CORS Protection: Cross-origin request security
- Unit Tests: React Testing Library + Jest
- Component Tests: Render testing with user interactions
- API Tests: Mock service worker for API mocking
- E2E Tests: Cypress for end-to-end testing
// Component test example
test('renders order table with data', () => {
render(<OrderTable orders={mockOrders} />);
expect(screen.getByText('Order ID')).toBeInTheDocument();
expect(screen.getByText('ORDER-123')).toBeInTheDocument();
});
// User interaction test
test('handles order selection', async () => {
const onSelect = jest.fn();
render(<OrderTable orders={mockOrders} onSelect={onSelect} />);
fireEvent.click(screen.getByText('ORDER-123'));
expect(onSelect).toHaveBeenCalledWith(mockOrders[0]);
});- Backend Repository: rsf-utility-backend
- Parent Repository: rsf-utility
{
"extends": [
"eslint:recommended",
"@typescript-eslint/recommended",
"plugin:react/recommended",
"plugin:prettier/recommended"
],
"rules": {
"@typescript-eslint/no-explicit-any": "warn",
"react/react-in-jsx-scope": "off",
"prettier/prettier": "error"
}
}{
"husky": {
"hooks": {
"pre-commit": "lint-staged",
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
},
"lint-staged": {
"./**/*.{ts,tsx,json}": [
"prettier --write",
"npm run lint"
]
}
}- Troubleshooting: ../docs/09-troubleshooting.md
- Contributing: ../docs/10-contributing.md
- Issues: Create issues in the main repository
This repository is part of the RSF Utility microservice architecture. For complete project documentation, system overview, and setup instructions, please refer to the main repository README.
This repository is part of the RSF Utility microservice architecture. For complete project documentation and setup instructions, please refer to the main repository.