chore: fix linting and type safety across the project

src/components/kinerja-divisi/discussion-panel.tsx

@@ -1,11 +1,4 @@
-import {
-	Box,
-	Card,
-	Group,
-	Stack,
-	Text,
-	useMantineColorScheme,
-} from "@mantine/core";
+import { Card, Group, Stack, Text, useMantineColorScheme } from "@mantine/core";
 import { MessageCircle } from "lucide-react";
 
 interface DiscussionItem {
@@ -57,9 +50,9 @@ export function DiscussionPanel() {
 				</Text>
 			</Group>
 			<Stack gap="sm">
-				{discussions.map((discussion, index) => (
+				{discussions.map((discussion) => (
 					<Card
-						key={index}
+						key={`${discussion.sender}-${discussion.date}`}
 						p="sm"
 						radius="md"
 						withBorder

src/components/kinerja-divisi/division-list.tsx

@@ -27,12 +27,12 @@ export function DivisionList() {
 			try {
 				const { data } = await apiClient.GET("/api/division/");
 				if (data?.data) {
-					const mapped = data.data.map(
-						(div: { name: string; _count?: { activities: number } }) => ({
-							name: div.name,
-							count: div._count?.activities || 0,
-						}),
-					);
+					const mapped = (
+						data.data as { name: string; _count?: { activities: number } }[]
+					).map((div) => ({
+						name: div.name,
+						count: div._count?.activities || 0,
+					}));
 					setDivisions(mapped);
 				}
 			} catch (error) {
@@ -68,9 +68,9 @@ export function DivisionList() {
 						<Loader size="sm" />
 					</Group>
 				) : divisions.length > 0 ? (
-					divisions.map((division, index) => (
+					divisions.map((division) => (
 						<Group
-							key={index}
+							key={division.name}
 							justify="space-between"
 							align="center"
 							style={{

src/components/kinerja-divisi/document-chart.tsx

@@ -63,8 +63,8 @@ export function DocumentChart() {
 						labelStyle={{ color: dark ? "#E2E8F0" : "#374151" }}
 					/>
 					<Bar dataKey="jumlah" radius={[4, 4, 0, 0]}>
-						{documentData.map((entry, index) => (
-							<Cell key={`cell-${index}`} fill={entry.color} />
+						{documentData.map((entry) => (
+							<Cell key={`cell-${entry.name}`} fill={entry.color} />
 						))}
 					</Bar>
 				</BarChart>

src/components/kinerja-divisi/event-card.tsx

@@ -43,8 +43,12 @@ export function EventCard({ agendas = [] }: EventCardProps) {
 			</Group>
 			{agendas.length > 0 ? (
 				<Stack gap="sm">
-					{agendas.map((agenda, index) => (
-						<Group key={index} align="flex-start" gap="md">
+					{agendas.map((agenda) => (
+						<Group
+							key={`${agenda.time}-${agenda.event}`}
+							align="flex-start"
+							gap="md"
+						>
 							<Box w={60}>
 								<Text size="sm" fw={600} c={dark ? "white" : "#1E3A5F"}>
 									{agenda.time}

src/components/kinerja-divisi/progress-chart.tsx

@@ -47,8 +47,8 @@ export function ProgressChart() {
 						paddingAngle={2}
 						dataKey="value"
 					>
-						{progressData.map((entry, index) => (
-							<Cell key={`cell-${index}`} fill={entry.color} />
+						{progressData.map((entry) => (
+							<Cell key={`cell-${entry.name}`} fill={entry.color} />
 						))}
 					</Pie>
 					<Tooltip
@@ -61,8 +61,8 @@ export function ProgressChart() {
 				</PieChart>
 			</ResponsiveContainer>
 			<Stack gap="xs" mt="md">
-				{progressData.map((item, index) => (
-					<Group key={index} justify="space-between">
+				{progressData.map((item) => (
+					<Group key={item.name} justify="space-between">
 						<Group gap="xs">
 							<Box
 								w={12}