A comprehensive React-based web application for fuel distribution allocation management, featuring advanced data grid capabilities, picklist management, and allocation configuration tools.
- Allocation Management: Complete fuel allocation workflow management
- Network Management: Manage distribution networks and configurations
- Monthly Close Process: Automated monthly closing procedures
- Asset Management: Comprehensive asset tracking and management
- Reading Views: Data visualization and reporting capabilities
- Scheduler: Automated task scheduling and management
- Picklist Management: Dynamic picklist creation and management
- Generic picklists with customizable options
- Transporter management
- Purchaser configurations
- Tank strapping data
- Dynamic lookup tables
- Data Grid Integration: Enterprise-grade AG-Grid implementation
- Search & Filter: Advanced search capabilities across all data sets
- Export Functionality: Data export and reporting features
- Modern Design: Clean, professional Material-UI based interface
- Responsive Layout: Mobile-friendly responsive design
- Custom Components: Specialized JOYN UI component library
- Accessibility: WCAG compliant interface components
- Theme Support: Customizable theming system
- React 16.13.1: Modern React with hooks and functional components
- React Router DOM 5.2.0: Client-side routing and navigation
- Material-UI 5.0.0: Component library and design system
- AG-Grid Enterprise 24.0.0: Advanced data grid with enterprise features
- AG-Grid React: React integration for AG-Grid
- AG-Grid Community: Core grid functionality
- Storybook 6.0.21: Component development and documentation
- ESLint: Code linting and quality assurance
- Prettier: Code formatting
- Husky: Git hooks for code quality
- Webpack Bundle Analyzer: Bundle optimization
- React Scripts 3.4.3: Build and development server
- Node Sass 4.14.1: SCSS compilation
- Vercel/Netlify: Deployment platforms
- Node.js (v14 or higher)
- Yarn package manager
- Modern web browser
-
Clone the repository
git clone <repository-url> cd joyn-ai
-
Install dependencies
yarn install
-
Start development server
yarn start
-
Open in browser Navigate to
http://localhost:3000
yarn start- Start development serveryarn test- Run test suiteyarn lint- Run ESLintyarn lint-fix- Fix ESLint issues automaticallyyarn format- Format code with Prettier
- Live Demo: View Component Library - Interactive component documentation
yarn storybook- Start Storybook development serveryarn build-storybook- Build Storybook for production
yarn build- Create production buildyarn vercel-deploy- Deploy to Vercelyarn netlify-deploy- Deploy to Netlify
yarn analyze-webpack-bundle- Analyze bundle size and dependencies
src/
├── components/ # Reusable UI components
│ ├── JoynAgGridReact/ # AG-Grid wrapper components
│ ├── JoynButton/ # Custom button components
│ ├── JoynInputField/ # Form input components
│ └── ... # Other UI components
├── containers/ # Business logic containers
│ ├── GenericPicklists/ # Picklist management
│ ├── Transporters/ # Transporter management
│ └── ... # Other containers
├── pages/ # Application pages
│ ├── AllocationConfig/ # Allocation configuration
│ ├── Assets/ # Asset management
│ ├── ManageNetworks/ # Network management
│ └── ... # Other pages
├── parts/ # Layout components
│ ├── Layout/ # Main layout wrapper
│ ├── JoynAppBar/ # Application header
│ └── JoynDrawer/ # Navigation drawer
├── utils/ # Utility functions and constants
├── styles/ # Theme and styling
└── config/ # Configuration files
- JoynButton: Custom button with multiple variants
- JoynInputField: Form input with validation
- JoynModal: Modal dialog component
- JoynTabs: Tab navigation component
- JoynSearchBar: Advanced search functionality
- JoynAgGridReact: AG-Grid wrapper with custom styling
- JoynAgGridToolbar: Grid toolbar with actions
- JoynAgGridHeader: Custom grid headers
- JoynAppBar: Application header
- JoynDrawer: Navigation sidebar
- Layout: Main application layout
The application uses AG-Grid Enterprise with custom configuration:
- Pagination settings
- Column definitions
- Custom renderers
- Export functionality
Custom Material-UI theme with:
- JOYN brand colors
- Custom typography
- Responsive breakpoints
- Component overrides
yarn vercel-deployyarn netlify-deployyarn netlify-deploy-storybook- Code Splitting: Lazy loading of route components
- Bundle Analysis: Webpack bundle analyzer integration
- Tree Shaking: Optimized imports and exports
- Font Optimization: Preloaded custom fonts
- Private Repository: Secure code management
- Dependency Security: Regular dependency updates
- Code Quality: ESLint and Prettier enforcement
- Git Hooks: Pre-commit quality checks
- ESLint configuration for code consistency
- Prettier for code formatting
- Husky hooks for pre-commit validation
- Component documentation with Storybook
- Create feature branch
- Implement changes with tests
- Run quality checks
- Submit pull request
This README is optimized for search engines with:
- Target Keywords: Fuel distribution, allocation management, React dashboard
- Structured Content: Clear headings and sections
- Technical Details: Comprehensive technology stack information
- Feature Descriptions: Detailed functionality overview
- Installation Guide: Step-by-step setup instructions
For technical support and questions:
- Component Documentation: View Storybook - Interactive component library and documentation
- Check existing issues in the repository
- Contact the development team
This project is proprietary software. All rights reserved.
JOYN AI - Advanced Fuel Distribution Management System Built with React, Material-UI, and AG-Grid Enterprise