\n {/* Header */}\n

Dashboard Overview

\n \n 🔄 Refresh\n \n

\n\n {/* Key Metrics Cards */}\n

\n {/* Tasks Overview */}\n

\n ✅\n

Total Tasks

{data.tasks.total}

\n Pending: {data.tasks.pending}\n Overdue: {data.tasks.overdue}\n

\n\n {/* Staff Overview */}\n

\n 👥\n

Active Staff

{data.staff.active}

\n Total: {data.staff.total}\n

\n\n {/* Clients Overview */}\n

\n 🤝\n

Total Clients

{data.clients.total}

\n Active: {data.clients.active}\n Prospects: {data.clients.prospects}\n

\n\n {/* Follow-ups Due */}\n

\n 📅\n

Follow-ups Due

{data.clients.followups_due}

\n Requires attention\n

\n\n {/* KPI Performance */}\n

Key Performance Indicators

\n {data.kpis.map((kpi, index) => (\n

{kpi.name}

\n \n {getKPITrendIcon(kpi.trend)}\n \n

{kpi.value}

Target: {kpi.target}

= 100 ? 'text-green-600' : \n kpi.percentage >= 80 ? 'text-yellow-600' : 'text-red-600'\n }`}>\n {kpi.percentage}%\n

= 100 ? 'bg-green-500' : \n kpi.percentage >= 80 ? 'bg-yellow-500' : 'bg-red-500'\n }`}\n style={{ width: `${Math.min(kpi.percentage, 100)}%` }}\n >

\n ))}\n

\n\n {/* Staff Workload */}\n

Staff Workload

\n {data.staff.workload.map((staff) => (\n

\n \n {staff.name.split(' ').map(n => n[0]).join('')}\n \n

\n {staff.name}\n

\n {staff.task_count} tasks\n

\n ))}\n

\n\n {/* Task Status Breakdown */}\n

Task Status Breakdown

\n Pending\n

\n {data.tasks.pending}\n

\n In Progress\n

\n {data.tasks.in_progress}\n

\n Completed\n

\n {data.tasks.completed}\n

\n Overdue\n

\n {data.tasks.overdue}\n

\n\n {/* Quick Actions */}\n

Quick Actions

\n \n \n \n

\n );\n}","deleted","label",[168,169,150],"frontend","components","permalink","https://www.val.town/x/amak/Bizapp/code/frontend/components/Dashboard.tsx","extension","actionData","errors"]