Premium E R P Details - Copy this Html, Tailwind Component to your project

Create a premium and pro level view page design for a record details page, drawing inspiration from SAP Business One 9.2 and other ERP systems. Integrate Material Design principles and use Tailwind CSS to deliver a modern, visually stunning, and highly functional layout. The page should incorporate the following advanced design concepts: 1. Header Section (Global Navigation) Branding: Include the ERP system's logo and name on the left, with a clean and bold font. Quick Navigation Icons: Add clickable icons for features like Dashboard, Notifications, Reports, User Profile, and Settings. Search Bar: Place a prominent search bar in the center for quick access to records. User Avatar and Actions: Add a user profile avatar with a dropdown for account related actions. 2. Sidebar Menu (Collapsible) A collapsible sidebar on the left with navigation links for various ERP modules like Sales, Finance, HR, etc. Use Material Icons with labels for clarity. Highlight the current module (e.g., Company) with an active state and subtle hover effects. 3. Main Content Section (Record Details) Record Header Card: A large card at the top displaying the record's primary information, such as the company name, logo (or placeholder image), and quick stats (e.g., Active, Founded Date). Include a breadcrumb navigation at the top for better hierarchy. Details Grid/Table: Display fields like Name, Address, Phone, Email, Website, and Founded Date in a two column grid layout. Use accordion panels for collapsible sections to organize secondary details (e.g., Financial Info, Contacts, etc.). 4. Advanced UI Components Action Buttons: Prominently display buttons like Edit, Delete, Back to List, and Export as PDF. Use distinct colors for different actions (e.g., blue for primary, red for destructive). Tabs or Segments: Add tabs at the top for navigating between related sections (e.g., Overview, Transactions, Audit Logs). Charts and Visualizations: Include small, interactive graphs or charts to represent KPIs (e.g., Revenue Trends, Employee Count) using libraries like Chart.js. 5. Footer Section A sticky footer at the bottom with: Navigation shortcuts for quick access. Copyright notice and branding. Contact support or helpdesk link. 6. Visual and Interactive Enhancements Dark and Light Theme Toggle: Provide a button to switch between light and dark modes. Hover Effects: Add subtle animations on buttons, links, and cards for a polished interaction. Color Palette: Use a modern palette with shades of blue, white, gray, and accent colors like teal or amber for highlights. Material Shadows and Elevation: Employ shadows and elevation to create depth and hierarchy between sections. 7. Responsiveness and Accessibility Ensure the design adapts beautifully to desktop, tablet, and mobile views. Include ARIA labels and keyboard navigation support for accessibility. Example Data Fields for the Page Company Name: Acme Corporation Address: 123 Business St, Metropolis Phone: +1 123 456 7890 Email: info@acme.com Website: www.acme.com Founded: 2001 Additional Fields: Revenue, Employee Count, Active Status, Associated Contacts, and Notes. Styling Details Header: bg blue 600 text white shadow lg Cards and Panels: bg white shadow md rounded lg p 6 Buttons: transition all duration 300 ease in out hover:bg opacity 90 focus:ring Icons and Interactivity: text gray 600 hover:text blue 600 cursor pointer Typography: Use font semibold for labels and text gray 700 for values. Hover Effects: Subtle transformations like hover:scale 105 or hover:shadow xl. Grid System: Use Tailwind's grid classes like grid grid cols 2 gap 4 for layouts. The design should feel modern, professional, and intuitive, suitable for high level ERP users. Focus on user experience, responsiveness, and visual hierarchy to make the design engaging and easy to navigate.