' ========================================================= ' PROMPT – SMART AGRICULTURE ERP (SCALABLE UI) ' ========================================================= ROLE: You are a senior frontend engineer with strong ERP UI experience. GOAL: Generate ONLY UI interfaces (NO backend, NO APIs, NO database) for a Smart Agriculture ERP System with scalable frontend structure. ' ========================================================= ' TECH STACK (MANDATORY) ' ========================================================= - HTML (views only) - Tailwind CSS (styles only – modular files) - Alpine.js ONLY for interactivity - ❌ Do NOT use React, Vue, Angular - ❌ Do NOT use plain JavaScript outside Alpine.js - ❌ No backend code - ❌ No frameworks other than Tailwind & Alpine ' ========================================================= ' FOLDER STRUCTURE (STRICT – DO NOT CHANGE) ' ========================================================= /views ├── login.html ├── register.html ├── farmer-dashboard.html ├── admin-dashboard.html ├── crop-management.html ├── inventory-management.html ├── finance-labour.html ├── environment-management.html └── analytics.html /styles ├── base.css ' global styles, layout helpers ├── components.css ' cards, buttons, forms, tables ├── dashboard.css ' sidebar, header, dashboard layout ├── forms.css ' inputs, validation UI └── tailwind.css ' Tailwind directives + imports /js ├── alpine-core.js ' shared Alpine setup ├── alpine-auth.js ' login & register UI logic ├── alpine-dashboard.js ' sidebar, navigation ├── alpine-crop.js ' crop management UI interactions ├── alpine-inventory.js ' inventory UI interactions ├── alpine-finance.js ' finance & labour UI └── alpine-environment.js ' sensors & automation UI DO NOT add extra folders. DO NOT rename files. ' ========================================================= ' LOGIN & REGISTRATION UI ' ========================================================= LOGIN PAGE (views/login.html): - Single login form for all user roles - Fields: - Username - Password - Buttons: - Login - Create New Account - Static error message UI - Clean, modern ERP-style design - Uses alpine-auth.js REGISTRATION PAGE (views/register.html): - Username - Password - Confirm Password - Submit button - Visual-only validation messages - Uses alpine-auth.js ' ========================================================= ' POST-LOGIN USER DETAILS FORM ' ========================================================= - Shown after first login (UI only) - Fields change based on role: - Farmer - Instructor - Officer - Use Alpine.js to toggle sections - Mandatory completion notice UI ' ========================================================= ' DASHBOARDS ' ========================================================= ADMIN DASHBOARD (views/admin-dashboard.html): - Sidebar layout - Branding: VertexcoreAI - Summary cards: - Total users - Farms - System analytics (placeholders) - Uses dashboard.css + alpine-dashboard.js FARMER DASHBOARD (views/farmer-dashboard.html): Sections: - Crop Management - Inventory Management - Finance & Labour Management - Environment Management (Automation) - Data Analysis & Business Insights Use: - Sidebar navigation - Responsive cards - Alpine.js for navigation state ' ========================================================= ' CROP MANAGEMENT ' ========================================================= CROP MANAGEMENT PAGE (views/crop-management.html): Crop Categories: - Greenhouse - Poly Tunnel - Net / Shading House - Outdoor Farming - Paddy Fields - Other Crops - Dairy Farming Crop Instance Creation: - Instance name (Greenhouse A, B) - Area (sq ft / perches / acres) - Crop type - Start date - Number of plants Inside Crop Instance (Alpine.js tabs / accordions): - Fertilizer Management - Pesticide Management - Fungicide Management - Water Management - Harvest Management - Notes Analysis Cards: - Total harvest - Total cost - Water usage - Cost prediction (UI only) Uses alpine-crop.js ' ========================================================= ' INVENTORY MANAGEMENT ' ========================================================= INVENTORY MANAGEMENT PAGE (views/inventory-management.html): Scarce Resources (Kshayawana Sampath): - Poly tunnels - Greenhouses - Vehicles - Annual depreciation rate input (e.g., 10%) Non-Scarce Items: - Grow bags - Ropes - Spray machines - Buckets - Mulch sheets Fertilizer / Pesticide / Fungicide Inventory: - Item name - Quantity - Unit price - Purchase date - Static deduction preview UI Uses alpine-inventory.js ' ========================================================= ' FINANCE & LABOUR MANAGEMENT ' ========================================================= FINANCE & LABOUR PAGE (views/finance-labour.html): Finance: - Auto-linked expense summary UI (from other modules) - Manual expenses: - Transport - Electricity - Water - Taxes Labour Management: - Create labour profiles - Fields: - Name - Profile picture upload UI - Payment type (daily / monthly) - Working days & hours Uses alpine-finance.js ' ========================================================= ' ENVIRONMENT MANAGEMENT ' ========================================================= ENVIRONMENT MANAGEMENT PAGE (views/environment-management.html): Sensor Cards: - Temperature - Humidity - Soil Moisture - Light Intensity - CO2 Automation Controls (Alpine.js toggles): - Irrigation - Fans - Dehumidifier - Misters Weather Forecast: - Static weather cards (API placeholder) Uses alpine-environment.js ' ========================================================= ' DATA ANALYTICS & INSIGHTS ' ========================================================= ANALYTICS PAGE (views/analytics.html): - Chart placeholders - Business insight cards - AI prediction placeholders (text only) ' ========================================================= ' UI & DESIGN RULES ' ========================================================= - Tailwind utility classes ONLY - Modular CSS imports - Responsive (mobile + desktop) - ERP admin theme - Consistent sidebar & header - Alpine.js used for: - Tabs - Modals - Toggles - Accordions ' ========================================================= ' FINAL RULES ' ========================================================= - UI ONLY - No backend logic - No database - No real calculations - No APIs - Follow folder structure EXACTLY