Here's a modern, minimalistic dashboard design for your internal request management app: Request Management Dashboard

Dashboard

Open Requests

+3 from last week

In Progress

0 from last week

Completed

+2 from last week

Urgent

-1 from last week

⚙️

Feature Requests

Request new features or enhancements

🛠️

Full Applications

Request entirely new software applications

🎓

Training

Request training sessions or materials

🔄

Change Requests

Request changes to existing systems

❓

Questions

Ask questions about existing systems

:root { --primary: #4f46e5; --primary-light: #6366f1; --background: #f9fafb; --surface: #ffffff; --text-primary: #111827; --text-secondary: #6b7280; --border: #e5e7eb; --success: #10b981; --warning: #f59e0b; --danger: #ef4444; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background-color: var(--background); color: var(--text-primary); } .dashboard { display: flex; min-height: 100vh; } .sidebar { width: 280px; background-color: var(--surface); padding: 24px; display: flex; flex-direction: column; border-right: 1px solid var(--border); box-shadow: var(--shadow-sm); } .logo { font-size: 24px; font-weight: 600; color: var(--primary); margin-bottom: 40px; padding: 8px 0; } nav { display: flex; flex-direction: column; gap: 8px; flex: 1; } nav a { text-decoration: none; color: var(--text-secondary); padding: 12px 16px; border-radius: 8px; transition: all 0.2s ease; display: flex; align-items: center; gap: 12px; } nav a:hover { background-color: #f3f4f6; color: var(--text-primary); } nav a.active { background-color: #eef2ff; color: var(--primary); font-weight: 500; } .user-profile { display: flex; align-items: center; gap: 12px; margin-top: auto; padding: 16px 0; } .avatar { width: 40px; height: 40px; border-radius: 50%; background-color: var(--primary-light); color: white; display: flex; align-items: center; justify-content: center; font-weight: 500; } .user-info { display: flex; flex-direction: column; } .user-info .name { font-weight: 500; font-size: 14px; } .user-info .role { font-size: 13px; color: var(--text-secondary); } .content { flex: 1; padding: 32px 40px; } header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; } header h1 { font-size: 24px; font-weight: 600; } .search-bar input { padding: 10px 16px; border-radius: 8px; border: 1px solid var(--border); width: 240px; font-size: 14px; } .search-bar input:focus { outline: none; border-color: var(--primary); } .metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 40px; } .metric-card { background-color: var(--surface); padding: 24px; border-radius: 12px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); } .metric-card h3 { font-size: 14px; font-weight: 500; color: var(--text-secondary); margin-bottom: 16px; } .metric-card .value { font-size: 28px; font-weight: 600; margin-bottom: 8px; } .metric-card .change { font-size: 13px; } .metric-card .positive { color: var(--success); } .metric-card .negative { color: var(--danger); } .metric-card .neutral { color: var(--warning); } .request-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .request-type-card { background-color: var(--surface); padding: 28px; border-radius: 12px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); transition: transform 0.2s ease; cursor: pointer; } .request-type-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .request-type-card .icon { font-size: 28px; margin-bottom: 16px; } .request-type-card h3 { font-size: 18px; font-weight: 500; margin-bottom: 8px; } .request-type-card p { font-size: 14px; color: var(--text-secondary); line-height: 1.5; } @media (max-width: 1200px) { .request-types { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 1000px) { .metrics { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .dashboard { flex-direction: column; } .sidebar { width: 100%; flex-direction: row; padding: 16px; align-items: center; } .logo { margin-bottom: 0; margin-right: 24px; } nav { flex-direction: row; flex: 0; margin-right: auto; } nav a span { display: none; } .user-profile { margin-top: 0; } .content { padding: 24px; } header { flex-direction: column; align-items: flex-start; gap: 16px; } .search-bar input { width: 100%; } .metrics { grid-template-columns: 1fr; } .request-types { grid-template-columns: 1fr; } } // Initialize the dashboard functionality document.addEventListener('DOMContentLoaded', () => { // Handle request type card clicks const requestCards = document.querySelectorAll('.request-type-card'); requestCards.forEach(card => { card.addEventListener('click', () => { const type = card.querySelector('h3').textContent; console.log(`Navigating to new ${type} form`); // In a real app, you would navigate to the appropriate form }); }); // Mobile menu toggle would go here in a real application });