A comprehensive OEM (Original Equipment Manufacturer) dashboard for monitoring vehicle fleet performance, analyzing predictive maintenance data, and managing service center operations.
- Real-time Fleet Monitoring: Track total vehicles, active issues, and high-severity cases
- Forecasted Service Demand: 7-day service demand prediction
- Model Performance Analytics: Failure rates and trends for all vehicle models
- Regional Analytics: Geographic distribution of vehicles and service needs
- Model Performance Tracking: Detailed metrics for each vehicle model
- Component Breakdown: Analysis of most common failure points
- Severity Distribution: LOW/MEDIUM/HIGH severity categorization
- Regional Distribution: Geographic analysis of model-specific issues
- Service Center Overview: Complete list of all service centers
- Utilization Tracking: Real-time and forecasted capacity utilization
- Common Issues Tracking: Most frequently serviced issues per location
- Model Service Distribution: Which models are serviced at each center
- OEM AI Assistant: Context-aware chatbot for analytics queries
- Natural Language Queries: Ask about trends, regions, components, and forecasts
- Intelligent Recommendations: Proactive suggestions for service center staffing
- Framework: React 18 with TypeScript
- Build Tool: Vite 5
- Routing: React Router v6
- State Management: TanStack Query (React Query) v5
- Styling: Tailwind CSS
- Animations: Framer Motion
- Icons: Lucide React
- HTTP Client: Axios
src/
├── components/
│ ├── chat/
│ │ └── ChatWidget.tsx # AI assistant chat interface
│ ├── layout/
│ │ └── OEMLayout.tsx # Main layout with nav and filters
│ └── oem/
│ ├── OEMKPISection.tsx # KPI cards component
│ ├── OEMModelTable.tsx # Models overview table
│ └── OEMRegionalTable.tsx # Regional summary table
├── hooks/
│ └── oem/
│ ├── useOEMOverview.ts # Dashboard data hook
│ ├── useOEMModels.ts # Models list hook
│ ├── useOEMModelPerformance.ts
│ ├── useOEMServiceCenters.ts
│ └── useOEMServiceCenterDetail.ts
├── lib/
│ ├── apiClient.ts # Axios instance
│ ├── oemApi.ts # Mock API functions
│ ├── queryClient.ts # React Query client
│ └── types/
│ └── index.ts # TypeScript types
├── routes/
│ └── oem/
│ ├── OEMRoutes.tsx # Route configuration
│ ├── OEMDashboardPage.tsx
│ ├── OEMModelsPage.tsx
│ ├── OEMModelDetailPage.tsx
│ ├── OEMServiceCentersPage.tsx
│ └── OEMServiceCenterDetailPage.tsx
├── App.tsx
├── main.tsx
└── index.css
- Node.js 18+
- npm or yarn
# Navigate to the OEM folder
cd FrontEnds/OEM
# Install dependencies
npm install
# Start development server
npm run devThe application will be available at http://localhost:3001
npm run buildCurrently, the application uses mock data for development. To integrate with real backend APIs:
- Update
lib/oemApi.tsto use actual HTTP calls:
export const getOEMOverview = async (params?: OEMOverviewParams): Promise<OEMOverview> => {
const response = await apiClient.get('/oem/overview', { params });
return response.data;
};- Set the
VITE_API_BASE_URLenvironment variable:
VITE_API_BASE_URL=https://your-backend-api.com/api/oem→ Redirects to dashboard/oem/dashboard→ Main OEM dashboard/oem/models→ Vehicle models list/oem/model/:modelId→ Detailed model performance/oem/service-centers→ Service centers list/oem/service-center/:id→ Service center details
The application uses a Tesla-inspired dark theme with:
- Primary Color: Tesla Blue (#3B82F6)
- Background: Tesla Black (#000000)
- Glass Morphism: Frosted glass effects throughout
- Gradient Accents: Blue gradient text and glow effects
glass- Light glass effectglass-strong- Strong glass effectgradient-text- Blue gradient textshadow-glow-blue/red/green- Colored glow shadows
Filters are managed in OEMLayout and passed as context to the chat widget. They can be used to filter data across all pages:
const [timeRange, setTimeRange] = useState<TimeRange>('30days');
const [region, setRegion] = useState<Region>('All');All data is cached with React Query for optimal performance:
queryKey: ['oemOverview', params],
staleTime: 1000 * 60 * 5, // 5 minutesThe application is fully responsive with Tailwind's responsive utilities:
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">The chat widget provides intelligent insights:
- Context-Aware: Includes current time range and region filters
- Natural Language: Understands queries about trends, regions, components
- Proactive Recommendations: Suggests actions based on metrics
Example queries:
- "What's the highest failure rate?"
- "Which region has the most issues?"
- "Forecast service demand for next week"
Mock data generators in lib/oemApi.ts provide realistic data:
- Randomized: Different data on each load
- Realistic Ranges: Failure rates, vehicle counts, etc.
- Configurable: Easy to adjust ranges for testing
# Run linter
npm run lint
# Type checking
npm run buildThe project uses strict TypeScript for type safety. All props, state, and API responses are fully typed.
npm run build
# Deploy the 'dist' folderFROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3001
CMD ["npm", "run", "preview"]- Add data export functionality (CSV/PDF)
- Implement user authentication
- Add real-time WebSocket updates
- Create advanced filtering and search
- Add data visualization charts (using Chart.js or Recharts)
- Implement notification system
- Add dark/light theme toggle
- Create PDF report generation
This is part of the EY Techathon 6 project. Follow the existing code patterns and TypeScript conventions.
Proprietary - Team Hacksters
Built with ❤️ by Team Hacksters for EY Techathon 6