feat: Implement theme toggling and enhance dashboard component theming
This commit introduces a theme toggle functionality in the application header and improves the visual consistency of dashboard components across different color schemes. - Added light/dark mode toggle to using Mantine's . - Ensured all components in have visible borders in both light and dark modes by adding the prop. - Made colors in theme-aware, dynamically adjusting their background color based on the active color scheme. Additionally, this commit includes a large refactoring operation, moving various component files from to and updating their references.
This commit is contained in:
@@ -1,274 +0,0 @@
|
||||
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;
|
||||
Reference in New Issue
Block a user