fix(header): fix missing Divider, Badge, IconUserShield and navigate

src/components/dashboard/activity-list.tsx

@@ -48,9 +48,9 @@ export function ActivityList() {
 				</Title>
 			</Group>
 			<Stack gap="md">
-				{events.map((event, index) => (
+				{events.map((event) => (
 					<Box
-						key={index}
+						key={`${event.title}-${event.date}`}
 						style={{
 							borderLeft: "4px solid var(--mantine-color-blue-filled)",
 							paddingLeft: 12,

src/components/dashboard/chart-apbdes.tsx

@@ -45,8 +45,8 @@ export function ChartAPBDes() {
 				Grafik APBDes
 			</Title>
 			<Stack gap="xs">
-				{apbdesData.map((item, index) => (
-					<Group key={index} align="center" gap="md">
+				{apbdesData.map((item) => (
+					<Group key={item.name} align="center" gap="md">
 						<Text size="sm" fw={500} w={100} c={dark ? "white" : "gray.7"}>
 							{item.name}
 						</Text>

src/components/dashboard/division-progress.tsx

@@ -45,8 +45,8 @@ export function DivisionProgress() {
 				Divisi Teraktif
 			</Title>
 			<Stack gap="sm">
-				{divisionData.map((divisi, index) => (
-					<Box key={index}>
+				{divisionData.map((divisi) => (
+					<Box key={divisi.name}>
 						<Group justify="space-between" mb={5}>
 							<Text size="sm" fw={500} c={dark ? "white" : "gray.7"}>
 								{divisi.name}

src/components/dashboard/satisfaction-chart.tsx

@@ -2,7 +2,6 @@ import {
 	Box,
 	Card,
 	Group,
-	Stack,
 	Text,
 	Title,
 	useMantineColorScheme,
@@ -51,8 +50,8 @@ export function SatisfactionChart() {
 						paddingAngle={2}
 						dataKey="value"
 					>
-						{satisfactionData.map((entry, index) => (
-							<Cell key={`cell-${index}`} fill={entry.color} />
+						{satisfactionData.map((entry) => (
+							<Cell key={`cell-${entry.name}`} fill={entry.color} />
 						))}
 					</Pie>
 					<Tooltip
@@ -65,8 +64,8 @@ export function SatisfactionChart() {
 				</PieChart>
 			</ResponsiveContainer>
 			<Group justify="center" gap="md" mt="md">
-				{satisfactionData.map((item, index) => (
-					<Group key={index} gap="xs">
+				{satisfactionData.map((item) => (
+					<Group key={item.name} gap="xs">
 						<Box
 							w={12}
 							h={12}