4. ADNOC WMS Formats
Create a modern enterprise SaaS web application UI for a "Work Permit Management System". Design Style: - Clean, modern enterprise UX - Similar quality to ServiceNow / Monday / Atlassian dashboards - Desktop-first (1440px) - Professional color palette (blue/indigo/neutral) - High readability for operational environments - Component-based design system - Consistent spacing, typography, and grid - Prioritize usability over decoration Application Goal: The system manages industrial work permits with templates, approvals, role-based workflows, logs, and safety observations. Generate the FULL workflow in correct order with consistent navigation and reusable components. ------------------------------------------------ GLOBAL LAYOUT: Create a scalable app shell with: - Left sidebar navigation - Top header with search, notifications, profile - Breadcrumbs - Data tables - Form layouts - Role-based visibility - Status badges - Approval indicators ------------------------------------------------ SCREENS TO GENERATE: 1️⃣ PERMIT TEMPLATE CREATION (Pre-Project) - Permit Template Library → Table view with template name, sections count, last updated → CTA: Create Template → Preview drawer - Permit Template Builder → Drag-and-drop section ordering → Add/remove sections → Checkpoint toggle → Comments toggle - Section Configuration → Input type selector → Required toggle → Auto-forward logic ------------------------------------------------ 2️⃣ AUTHENTICATION - Login screen → Minimal split layout → Email + Password → Strong enterprise look ------------------------------------------------ 3️⃣ PROJECT GROUP SETUP - Create Project Group → Group name → Project details → Admin auto-assignment - Group Dashboard → Summary cards → Members → Linked templates → Quick actions ------------------------------------------------ 4️⃣ ROLE MANAGEMENT - Role Management → Role table → Create / rename / delete - User-Role Assignment → Multi-select users → Role dropdown ------------------------------------------------ 5️⃣ TEMPLATE → GROUP MAPPING - Select Template → Clone vs Use-as-is cards - Section → Role Mapping → Matrix-style layout → Permissions toggles → Auto-forward activation ------------------------------------------------ 6️⃣ PERMIT EXECUTION - Apply Permit → Multi-step form → File upload → Submit ------------------------------------------------ ROLE-BASED DASHBOARDS: Create unique dashboards for each role while keeping layout consistency. 👤 Group Admin - Overview - Members - Roles - Permit logs - Templates ⚙️ Permit Controller - Template control - Workflow mapping - Active permits 🧾 Applicant - Apply CTA - My permits - Status tracker ✅ Approver - Pending approvals - Section review - Approve / Reject 👁 Observer - Read-only permit view - Logs visibility ------------------------------------------------ 7️⃣ PERMIT MANAGEMENT - Live permits with filters - Old permits archive ------------------------------------------------ 8️⃣ LOGS & REPORTING - Permit logs with date filters - Status filters - Log sharing modal ------------------------------------------------ 9️⃣ SAFETY & ALERTS - Notifications panel - SIMOPS conflict alert - HSE observation form with image upload ------------------------------------------------ 🔟 PRINTABLE VIEW - Landscape printable permit - Color-coded sections - Signature areas ------------------------------------------------ UX REQUIREMENTS: - Use reusable components - Avoid random layouts - Maintain enterprise density - Design realistic tables and forms - Add empty states - Include confirmation dialogs - Use professional microcopy - Show workflow progression visually Output: Generate complete high-fidelity web app screens with design consistency across the entire workflow.