nico
d41e53c41f
This commit introduces a functional dark/light mode toggle by integrating `next-themes` with the application. It configures `ThemeProvider` in `src/frontend.tsx` and sets `darkMode: 'class'` in `tailwind.config.js`. Additionally, this commit resolves several linting and parsing issues found in `src/index.ts`. This commit also includes other pre-existing modifications and new components within the project's working directory that were not specifically part of the dark mode or linting tasks.
275 lines
7.5 KiB
TypeScript
275 lines
7.5 KiB
TypeScript
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button"; // Correct import for Button
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Progress } from "@/components/ui/progress";
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/components/ui/table";
|
|
|
|
const KinerjaDivisi = () => {
|
|
// Sample data for division performance
|
|
const divisions = [
|
|
{
|
|
id: 1,
|
|
name: "Divisi Teknologi",
|
|
target: 95,
|
|
achievement: 87,
|
|
status: "On Track",
|
|
projects: 12,
|
|
budget: "Rp 2.5M",
|
|
lastUpdate: "2 days ago",
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "Divisi Keuangan",
|
|
target: 90,
|
|
achievement: 92,
|
|
status: "Above Target",
|
|
projects: 8,
|
|
budget: "Rp 1.8M",
|
|
lastUpdate: "1 day ago",
|
|
},
|
|
{
|
|
id: 3,
|
|
name: "Divisi SDM",
|
|
target: 85,
|
|
achievement: 78,
|
|
status: "Needs Attention",
|
|
projects: 6,
|
|
budget: "Rp 1.2M",
|
|
lastUpdate: "3 days ago",
|
|
},
|
|
{
|
|
id: 4,
|
|
name: "Divisi Operasional",
|
|
target: 92,
|
|
achievement: 89,
|
|
status: "On Track",
|
|
projects: 15,
|
|
budget: "Rp 3.2M",
|
|
lastUpdate: "5 hours ago",
|
|
},
|
|
{
|
|
id: 5,
|
|
name: "Divisi Pemasaran",
|
|
target: 88,
|
|
achievement: 91,
|
|
status: "Above Target",
|
|
projects: 10,
|
|
budget: "Rp 2.1M",
|
|
lastUpdate: "1 day ago",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex justify-between items-center">
|
|
<h1 className="text-3xl font-bold text-gray-900 dark:text-white">
|
|
Kinerja Divisi
|
|
</h1>
|
|
<div className="flex space-x-4">
|
|
<Button variant="default">Export Data</Button>
|
|
<Button variant="outline">Filter</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">Total Divisi</CardTitle>
|
|
<div className="h-6 w-6 text-muted-foreground">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
className="h-6 w-6"
|
|
role="img"
|
|
aria-labelledby="totalDivisiTitle"
|
|
>
|
|
<title id="totalDivisiTitle">Total Divisi Icon</title>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">5</div>
|
|
<p className="text-xs text-muted-foreground">Jumlah divisi aktif</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">
|
|
Rata-rata Pencapaian
|
|
</CardTitle>
|
|
<div className="h-6 w-6 text-muted-foreground">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
className="h-6 w-6"
|
|
role="img"
|
|
aria-labelledby="rataRataPencapaianTitle"
|
|
>
|
|
<title id="rataRataPencapaianTitle">
|
|
Rata-rata Pencapaian Icon
|
|
</title>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">87.4%</div>
|
|
<p className="text-xs text-muted-foreground">Target tercapai</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">
|
|
Divisi Melebihi Target
|
|
</CardTitle>
|
|
<div className="h-6 w-6 text-muted-foreground">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
className="h-6 w-6"
|
|
role="img"
|
|
aria-labelledby="divisiMelebihiTargetTitle"
|
|
>
|
|
<title id="divisiMelebihiTargetTitle">
|
|
Divisi Melebihi Target Icon
|
|
</title>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">2</div>
|
|
<p className="text-xs text-muted-foreground">Dari total 5 divisi</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Detail Kinerja Divisi</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Nama Divisi</TableHead>
|
|
<TableHead>Target (%)</TableHead>
|
|
<TableHead>Pencapaian (%)</TableHead>
|
|
<TableHead>Status</TableHead>
|
|
<TableHead>Proyek Aktif</TableHead>
|
|
<TableHead>Anggaran</TableHead>
|
|
<TableHead>Terakhir Diperbarui</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{divisions.map((division) => (
|
|
<TableRow key={division.id}>
|
|
<TableCell className="font-medium dark:text-white">
|
|
{division.name}
|
|
</TableCell>
|
|
<TableCell className="dark:text-white">
|
|
{division.target}%
|
|
</TableCell>
|
|
<TableCell className="dark:text-white">
|
|
{division.achievement}%
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="flex items-center">
|
|
<Progress
|
|
value={division.achievement}
|
|
max={100}
|
|
className="w-24 mr-2"
|
|
/>
|
|
<Badge
|
|
variant={
|
|
division.status === "Above Target"
|
|
? "success"
|
|
: division.status === "On Track"
|
|
? "secondary"
|
|
: "destructive"
|
|
}
|
|
>
|
|
{division.status}
|
|
</Badge>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="dark:text-white">
|
|
{division.projects}
|
|
</TableCell>
|
|
<TableCell className="dark:text-white">
|
|
{division.budget}
|
|
</TableCell>
|
|
<TableCell className="dark:text-white">
|
|
{division.lastUpdate}
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Grafik Pencapaian Divisi</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="h-80 flex items-center justify-center bg-gray-50 dark:bg-gray-700 rounded-lg">
|
|
<p className="text-gray-500 dark:text-gray-300">
|
|
Grafik pencapaian akan ditampilkan di sini
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Distribusi Anggaran Divisi</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="h-80 flex items-center justify-center bg-gray-50 dark:bg-gray-700 rounded-lg">
|
|
<p className="text-gray-500 dark:text-gray-300">
|
|
Diagram distribusi anggaran akan ditampilkan di sini
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default KinerjaDivisi;
|