<prompt> <title>UI/UX Enhancement for Investigation Management System</title> <objective> Beautify and modernize an existing investigation management web app while maintaining a sleek, highly functional, and professional look. The UI should feel premium, accessible, and efficient for users handling multiple investigation cases. </objective> <features> <feature name="Typography & Spacing"> <detail>Upgrade to a premium, modern font like Inter, Poppins, or SF Pro.</detail> <detail>Increase spacing and line height for improved readability.</detail> <detail>Make section headers bold and distinct to create a visual hierarchy.</detail> </feature>

<feature name="Color Palette & Theme">  
  <detail>Introduce a softer, modern color scheme with pastel tints and minimal contrast.</detail>  
  <detail>Add a subtle gradient or glassmorphism effect for better depth.</detail>  
  <detail>Implement a toggleable light/dark mode.</detail>  
</feature>  

<feature name="Table & Cards Refinement">  
  <detail>Use a borderless table design with alternating row colors for better readability.</detail>  
  <detail>Add soft hover effects on rows and cards.</detail>  
  <detail>Revamp priority/status labels with modern pill-style badges.</detail>  
  <detail>Replace the plain document viewer card with a sleeker rounded design.</detail>  
</feature>  

<feature name="Icons & Microinteractions">  
  <detail>Upgrade all icons to Lucide or Heroicons for a cleaner, modern aesthetic.</detail>  
  <detail>Enhance buttons with hover animations and a soft glow effect.</detail>  
  <detail>Improve the list/grid toggle button with sleeker, more intuitive icons.</detail>  
</feature>  

<feature name="Dashboard & Sidebar Enhancements">  
  <detail>Introduce collapsible sections in the sidebar for better navigation.</detail>  
  <detail>Highlight the active menu item with a modern indicator or subtle shadow.</detail>  
  <detail>Make the search bar more prominent with rounded edges and a shadow effect.</detail>  
</feature>  

<feature name="Dark Mode Implementation">  
  <detail>Design a clean dark mode with deep blacks and smooth contrast.</detail>  
  <detail>Ensure tables and cards are optimized for dark theme readability.</detail>  
</feature>  

<feature name="Case Management & UX Improvements">  
  <detail>Replace the static "Start Investigation" button with a floating action button (FAB).</detail>  
  <detail>Introduce a case timeline visualization for tracking investigation progress.</detail>  
</feature>  

<feature name="Smooth Animations & Transitions">  
  <detail>Apply GSAP or Framer Motion for smooth page transitions.</detail>  
  <detail>Use microinteractions to make the UI feel dynamic and interactive.</detail>  
  <detail>Enhance modal openings with fade-in and slide effects.</detail>  
</feature>  

</features> <output> <framework>Next.js (frontend-only with mock data)</framework> <styles>TailwindCSS for modern UI components</styles> <animations>GSAP or Framer Motion for transitions</animations> <icons>Lucide Icons / Heroicons</icons> </output> <bonus> <detail>Improve accessibility by ensuring WCAG-compliant color contrasts.</detail> <detail>Enhance empty states with better UI feedback (illustrations or animations).</detail> <detail>Optimize mobile responsiveness for tablet and phone users.</detail> </bonus> </prompt>