feat: update components with Mantine UI and improve dark mode support
Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
@@ -1,26 +1,76 @@
|
||||
import type React from "react";
|
||||
import { useState } from "react";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Select } from "@/components/ui/select";
|
||||
import {
|
||||
Grid,
|
||||
GridCol,
|
||||
Group,
|
||||
Text,
|
||||
Title,
|
||||
TextInput,
|
||||
Textarea,
|
||||
Select,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
Badge,
|
||||
Stack,
|
||||
useMantineColorScheme,
|
||||
List,
|
||||
Divider,
|
||||
ActionIcon,
|
||||
Box
|
||||
} from "@mantine/core";
|
||||
import { IconMessage, IconAlertTriangle, IconClock, IconCheck, IconChevronRight } from "@tabler/icons-react";
|
||||
import { Line, LineChart, Bar, BarChart, CartesianGrid, XAxis, YAxis, Tooltip, ResponsiveContainer } from "recharts";
|
||||
|
||||
const PengaduanLayananPublik = () => {
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const dark = colorScheme === 'dark';
|
||||
|
||||
// Summary data
|
||||
const summaryData = {
|
||||
total: 42,
|
||||
baru: 14,
|
||||
diproses: 14,
|
||||
selesai: 14
|
||||
};
|
||||
|
||||
// Tren pengaduan data
|
||||
const trenData = [
|
||||
{ bulan: "Jan", jumlah: 30 },
|
||||
{ bulan: "Feb", jumlah: 50 },
|
||||
{ bulan: "Mar", jumlah: 42 },
|
||||
{ bulan: "Apr", jumlah: 38 },
|
||||
{ bulan: "Mei", jumlah: 45 },
|
||||
{ bulan: "Jun", jumlah: 42 }
|
||||
];
|
||||
|
||||
// Surat terbanyak data
|
||||
const suratData = [
|
||||
{ jenis: "KTP", jumlah: 24 },
|
||||
{ jenis: "KK", jumlah: 18 },
|
||||
{ jenis: "Domisili", jumlah: 15 },
|
||||
{ jenis: "Usaha", jumlah: 12 },
|
||||
{ jenis: "Lainnya", jumlah: 8 }
|
||||
];
|
||||
|
||||
// Pengajuan terbaru data
|
||||
const pengajuanTerbaru = [
|
||||
{ nama: "Budi Santoso", jenis: "Ketertiban Umum", waktu: "2 jam yang lalu", status: "baru" },
|
||||
{ nama: "Siti Rahayu", jenis: "Pelayanan Kesehatan", waktu: "5 jam yang lalu", status: "diproses" },
|
||||
{ nama: "Ahmad Fauzi", jenis: "Infrastruktur", waktu: "1 hari yang lalu", status: "selesai" },
|
||||
{ nama: "Dewi Lestari", jenis: "Administrasi", waktu: "1 hari yang lalu", status: "baru" },
|
||||
{ nama: "Joko Widodo", jenis: "Keamanan", waktu: "2 hari yang lalu", status: "diproses" }
|
||||
];
|
||||
|
||||
// Ide inovatif data
|
||||
const ideInovatif = [
|
||||
{ nama: "Andi Prasetyo", judul: "Penerapan Smart Village", kategori: "Teknologi" },
|
||||
{ nama: "Rina Kusuma", judul: "Program Ekowisata Desa", kategori: "Ekonomi" },
|
||||
{ nama: "Bambang Suryono", judul: "Peningkatan Sanitasi", kategori: "Kesehatan" },
|
||||
{ nama: "Lina Marlina", judul: "Pusat Kreatif Anak Muda", kategori: "Pendidikan" }
|
||||
];
|
||||
|
||||
const [activeTab, setActiveTab] = useState<"complaints" | "services">(
|
||||
"complaints",
|
||||
);
|
||||
@@ -133,280 +183,463 @@ const PengaduanLayananPublik = () => {
|
||||
setNewComplaint({ title: "", category: "", description: "" });
|
||||
};
|
||||
|
||||
// Render complaint table rows
|
||||
const complaintRows = complaints.map((complaint) => (
|
||||
<Table.Tr key={complaint.id}>
|
||||
<Table.Td className="font-medium">
|
||||
<Text c={dark ? "white" : "dark.3"}>{complaint.title}</Text>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Text c={dark ? "white" : "dark.3"}>{complaint.category}</Text>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Badge
|
||||
variant="filled"
|
||||
color={
|
||||
complaint.status === "Resolved"
|
||||
? "green"
|
||||
: complaint.status === "In Progress"
|
||||
? "yellow"
|
||||
: "red"
|
||||
}
|
||||
>
|
||||
{complaint.status}
|
||||
</Badge>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Badge
|
||||
variant="filled"
|
||||
color={
|
||||
complaint.priority === "High"
|
||||
? "red"
|
||||
: complaint.priority === "Medium"
|
||||
? "yellow"
|
||||
: "blue"
|
||||
}
|
||||
>
|
||||
{complaint.priority}
|
||||
</Badge>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Text c={dark ? "white" : "dark.3"}>{complaint.date}</Text>
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
));
|
||||
|
||||
// Status badge color mapping
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'baru': return 'red';
|
||||
case 'diproses': return 'yellow';
|
||||
case 'selesai': return 'green';
|
||||
default: return 'gray';
|
||||
}
|
||||
};
|
||||
|
||||
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">
|
||||
Pengaduan & Layanan Publik
|
||||
</h1>
|
||||
<div className="flex space-x-4">
|
||||
<Button
|
||||
variant={activeTab === "complaints" ? "default" : "outline"}
|
||||
onClick={() => setActiveTab("complaints")}
|
||||
className="dark:bg-slate-700 dark:hover:bg-slate-600 dark:text-white"
|
||||
>
|
||||
Pengaduan
|
||||
</Button>
|
||||
<Button
|
||||
variant={activeTab === "services" ? "default" : "outline"}
|
||||
onClick={() => setActiveTab("services")}
|
||||
className="dark:bg-slate-700 dark:hover:bg-slate-600 dark:text-white"
|
||||
>
|
||||
Layanan Publik
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Stack gap="lg">
|
||||
{activeTab === "complaints" ? (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* Complaint Submission Form */}
|
||||
<div className="lg:col-span-1">
|
||||
<Card className="dark:bg-gray-800 dark:border-gray-700">
|
||||
<CardHeader>
|
||||
<CardTitle className="dark:text-white">
|
||||
Ajukan Pengaduan
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmitComplaint} className="space-y-4">
|
||||
<div>
|
||||
<label
|
||||
htmlFor="title"
|
||||
className="block text-sm font-medium mb-1 dark:text-gray-300"
|
||||
>
|
||||
Judul Pengaduan
|
||||
</label>
|
||||
<Input
|
||||
id="title"
|
||||
name="title"
|
||||
value={newComplaint.title}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Masukkan judul pengaduan"
|
||||
className="dark:bg-gray-700 dark:border-gray-600 dark:text-white"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="category"
|
||||
className="block text-sm font-medium mb-1 dark:text-gray-300"
|
||||
>
|
||||
Kategori
|
||||
</label>
|
||||
<Select
|
||||
id="category"
|
||||
name="category"
|
||||
value={newComplaint.category}
|
||||
onChange={handleSelectChange}
|
||||
placeholder="Pilih kategori"
|
||||
data={[
|
||||
{ value: "infrastruktur", label: "Infrastruktur" },
|
||||
{ value: "administrasi", label: "Administrasi" },
|
||||
{ value: "utilitas", label: "Utilitas" },
|
||||
{ value: "sanitasi", label: "Sanitasi" },
|
||||
{ value: "kesehatan", label: "Kesehatan" },
|
||||
{ value: "pendidikan", label: "Pendidikan" },
|
||||
]}
|
||||
className="dark:bg-gray-700 dark:border-gray-600 dark:text-white"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="description"
|
||||
className="block text-sm font-medium mb-1 dark:text-gray-300"
|
||||
>
|
||||
Deskripsi
|
||||
</label>
|
||||
<Textarea
|
||||
id="description"
|
||||
name="description"
|
||||
value={newComplaint.description}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Jelaskan pengaduan Anda secara detail..."
|
||||
rows={4}
|
||||
className="dark:bg-gray-700 dark:border-gray-600 dark:text-white"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full dark:bg-blue-600 dark:hover:bg-blue-700"
|
||||
<>
|
||||
{/* Summary Cards */}
|
||||
<Grid gutter="md">
|
||||
<GridCol span={{ base: 12, md: 6, lg: 3 }}>
|
||||
<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }} h="100%">
|
||||
<Group justify="space-between" align="center">
|
||||
<Stack gap={0}>
|
||||
<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
|
||||
Total Pengaduan
|
||||
</Text>
|
||||
<Text size="xl" fw={700} c={dark ? "dark.0" : "black"}>
|
||||
{summaryData.total}
|
||||
</Text>
|
||||
</Stack>
|
||||
<Badge
|
||||
variant="light"
|
||||
color="darmasaba-blue"
|
||||
p={8}
|
||||
radius="md"
|
||||
>
|
||||
Kirim Pengaduan
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<IconMessage size={20} />
|
||||
</Badge>
|
||||
</Group>
|
||||
</Card>
|
||||
</GridCol>
|
||||
|
||||
{/* Complaints List */}
|
||||
<div className="lg:col-span-2">
|
||||
<Card className="dark:bg-gray-800 dark:border-gray-700">
|
||||
<CardHeader>
|
||||
<CardTitle className="dark:text-white">
|
||||
Daftar Pengaduan
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="dark:text-gray-300">
|
||||
Judul
|
||||
</TableHead>
|
||||
<TableHead className="dark:text-gray-300">
|
||||
Kategori
|
||||
</TableHead>
|
||||
<TableHead className="dark:text-gray-300">
|
||||
Status
|
||||
</TableHead>
|
||||
<TableHead className="dark:text-gray-300">
|
||||
Prioritas
|
||||
</TableHead>
|
||||
<TableHead className="dark:text-gray-300">
|
||||
Tanggal
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{complaints.map((complaint) => (
|
||||
<TableRow key={complaint.id}>
|
||||
<TableCell className="font-medium dark:text-white">
|
||||
{complaint.title}
|
||||
</TableCell>
|
||||
<TableCell className="dark:text-gray-300">
|
||||
{complaint.category}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge
|
||||
variant={
|
||||
complaint.status === "Resolved"
|
||||
? "success"
|
||||
: complaint.status === "In Progress"
|
||||
? "secondary"
|
||||
: "destructive"
|
||||
}
|
||||
>
|
||||
{complaint.status}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge
|
||||
variant={
|
||||
complaint.priority === "High"
|
||||
? "destructive"
|
||||
: complaint.priority === "Medium"
|
||||
? "secondary"
|
||||
: "default"
|
||||
}
|
||||
>
|
||||
{complaint.priority}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="dark:text-gray-300">
|
||||
{complaint.date}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
<GridCol span={{ base: 12, md: 6, lg: 3 }}>
|
||||
<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }} h="100%">
|
||||
<Group justify="space-between" align="center">
|
||||
<Stack gap={0}>
|
||||
<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
|
||||
Baru
|
||||
</Text>
|
||||
<Text size="xl" fw={700} c={dark ? "dark.0" : "black"}>
|
||||
{summaryData.baru}
|
||||
</Text>
|
||||
</Stack>
|
||||
<Badge
|
||||
variant="light"
|
||||
color="red"
|
||||
p={8}
|
||||
radius="md"
|
||||
>
|
||||
<IconAlertTriangle size={20} />
|
||||
</Badge>
|
||||
</Group>
|
||||
</Card>
|
||||
</GridCol>
|
||||
|
||||
<GridCol span={{ base: 12, md: 6, lg: 3 }}>
|
||||
<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }} h="100%">
|
||||
<Group justify="space-between" align="center">
|
||||
<Stack gap={0}>
|
||||
<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
|
||||
Diproses
|
||||
</Text>
|
||||
<Text size="xl" fw={700} c={dark ? "dark.0" : "black"}>
|
||||
{summaryData.diproses}
|
||||
</Text>
|
||||
</Stack>
|
||||
<Badge
|
||||
variant="light"
|
||||
color="yellow"
|
||||
p={8}
|
||||
radius="md"
|
||||
>
|
||||
<IconClock size={20} />
|
||||
</Badge>
|
||||
</Group>
|
||||
</Card>
|
||||
</GridCol>
|
||||
|
||||
<GridCol span={{ base: 12, md: 6, lg: 3 }}>
|
||||
<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }} h="100%">
|
||||
<Group justify="space-between" align="center">
|
||||
<Stack gap={0}>
|
||||
<Text size="sm" c={dark ? "dark.3" : "dimmed"}>
|
||||
Selesai
|
||||
</Text>
|
||||
<Text size="xl" fw={700} c={dark ? "dark.0" : "black"}>
|
||||
{summaryData.selesai}
|
||||
</Text>
|
||||
</Stack>
|
||||
<Badge
|
||||
variant="light"
|
||||
color="green"
|
||||
p={8}
|
||||
radius="md"
|
||||
>
|
||||
<IconCheck size={20} />
|
||||
</Badge>
|
||||
</Group>
|
||||
</Card>
|
||||
</GridCol>
|
||||
</Grid>
|
||||
|
||||
{/* Grafik Tren Pengaduan */}
|
||||
<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }} >
|
||||
<Title order={4} mb="md" c={dark ? "dark.0" : "black"}>
|
||||
Grafik Tren Pengaduan
|
||||
</Title>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<LineChart data={trenData}>
|
||||
<CartesianGrid
|
||||
strokeDasharray="3 3"
|
||||
vertical={false}
|
||||
stroke={dark ? "var(--mantine-color-gray-7)" : "var(--mantine-color-gray-3)"}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="bulan"
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{ fill: dark ? "var(--mantine-color-text)" : "var(--mantine-color-text)" }}
|
||||
/>
|
||||
<YAxis
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{ fill: dark ? "var(--mantine-color-text)" : "var(--mantine-color-text)" }}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={dark
|
||||
? { backgroundColor: 'var(--mantine-color-dark-7)', borderColor: 'var(--mantine-color-dark-6)' }
|
||||
: {}}
|
||||
/>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="jumlah"
|
||||
stroke={dark ? "var(--mantine-color-blue-6)" : "var(--mantine-color-blue-filled)"}
|
||||
strokeWidth={2}
|
||||
dot={{ stroke: dark ? "var(--mantine-color-blue-6)" : "var(--mantine-color-blue-filled)", strokeWidth: 2, r: 4 }}
|
||||
activeDot={{ r: 6, stroke: '#fff', strokeWidth: 2 }}
|
||||
/>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</Card>
|
||||
|
||||
{/* Surat Terbanyak & Pengajuan Terbaru & Ide Inovatif */}
|
||||
<Grid gutter="md">
|
||||
{/* Surat Terbanyak */}
|
||||
<GridCol span={{ base: 12, lg: 4 }}>
|
||||
<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }} h="100%">
|
||||
<Title order={4} mb="md" c={dark ? "dark.0" : "black"}>
|
||||
Surat Terbanyak
|
||||
</Title>
|
||||
<ResponsiveContainer width="100%" height={250}>
|
||||
<BarChart data={suratData} layout="horizontal">
|
||||
<CartesianGrid
|
||||
strokeDasharray="3 3"
|
||||
horizontal={false}
|
||||
stroke={dark ? "var(--mantine-color-gray-7)" : "var(--mantine-color-gray-3)"}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="jumlah"
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{ fill: dark ? "var(--mantine-color-text)" : "var(--mantine-color-text)" }}
|
||||
/>
|
||||
<YAxis
|
||||
dataKey="jenis"
|
||||
type="category"
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{ fill: dark ? "var(--mantine-color-text)" : "var(--mantine-color-text)" }}
|
||||
width={80}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={dark
|
||||
? { backgroundColor: 'var(--mantine-color-dark-7)', borderColor: 'var(--mantine-color-dark-6)' }
|
||||
: {}}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="jumlah"
|
||||
fill={dark ? "var(--mantine-color-blue-6)" : "var(--mantine-color-blue-filled)"}
|
||||
radius={[0, 4, 4, 0]}
|
||||
/>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</Card>
|
||||
</GridCol>
|
||||
|
||||
{/* Pengajuan Terbaru */}
|
||||
<GridCol span={{ base: 12, lg: 4 }}>
|
||||
<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }} h="100%">
|
||||
<Title order={4} mb="md" c={dark ? "dark.0" : "black"}>
|
||||
Pengajuan Terbaru
|
||||
</Title>
|
||||
{pengajuanTerbaru.map((item, index) => (
|
||||
<Box key={index}>
|
||||
<Group justify="space-between">
|
||||
<Stack gap={0}>
|
||||
<Text fw={500} c={dark ? "dark.0" : "black"}>{item.nama}</Text>
|
||||
<Text size="sm" c={dark ? "dark.3" : "dimmed"}>{item.jenis}</Text>
|
||||
</Stack>
|
||||
<Stack gap={0} align="flex-end">
|
||||
<Badge color={getStatusColor(item.status)} variant="light">
|
||||
{item.status}
|
||||
</Badge>
|
||||
<Text size="xs" c={dark ? "dark.4" : "dimmed"}>{item.waktu}</Text>
|
||||
</Stack>
|
||||
</Group>
|
||||
<Divider my="sm" />
|
||||
</Box>
|
||||
))}
|
||||
</Card>
|
||||
</GridCol>
|
||||
|
||||
{/* Ajuan Ide Inovatif */}
|
||||
<GridCol span={{ base: 12, lg: 4 }}>
|
||||
<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }} h="100%">
|
||||
<Title order={4} mb="md" c={dark ? "dark.0" : "black"}>
|
||||
Ajuan Ide Inovatif
|
||||
</Title>
|
||||
{ideInovatif.map((item, index) => (
|
||||
<Box key={index}>
|
||||
<Group justify="space-between">
|
||||
<Stack gap={0}>
|
||||
<Text fw={500} c={dark ? "dark.0" : "black"}>{item.judul}</Text>
|
||||
<Text size="sm" c={dark ? "dark.3" : "dimmed"}>{item.nama}</Text>
|
||||
</Stack>
|
||||
<Group>
|
||||
<Badge color="blue" variant="light">
|
||||
{item.kategori}
|
||||
</Badge>
|
||||
<ActionIcon variant="subtle" color="darmasaba-blue">
|
||||
<IconChevronRight size={16} />
|
||||
</ActionIcon>
|
||||
</Group>
|
||||
</Group>
|
||||
<Divider my="sm" />
|
||||
</Box>
|
||||
))}
|
||||
</Card>
|
||||
</GridCol>
|
||||
</Grid>
|
||||
|
||||
{/* Complaint Submission Form and List */}
|
||||
<Grid gutter="md">
|
||||
{/* Complaint Submission Form */}
|
||||
<GridCol span={{ base: 12, lg: 4 }}>
|
||||
<Card p="md" withBorder radius="md" h="100%" bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
|
||||
<Card.Section withBorder inheritPadding py="xs">
|
||||
<Title order={3} py="xs">Ajukan Pengaduan</Title>
|
||||
</Card.Section>
|
||||
<Card.Section>
|
||||
<form onSubmit={handleSubmitComplaint}>
|
||||
<Stack gap="md" p={"sm"}>
|
||||
<TextInput
|
||||
label="Judul Pengaduan"
|
||||
id="title"
|
||||
name="title"
|
||||
value={newComplaint.title}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Masukkan judul pengaduan"
|
||||
required
|
||||
withAsterisk
|
||||
/>
|
||||
|
||||
<Select
|
||||
label="Kategori"
|
||||
id="category"
|
||||
name="category"
|
||||
value={newComplaint.category}
|
||||
onChange={handleSelectChange}
|
||||
placeholder="Pilih kategori"
|
||||
data={[
|
||||
{ value: "infrastruktur", label: "Infrastruktur" },
|
||||
{ value: "administrasi", label: "Administrasi" },
|
||||
{ value: "utilitas", label: "Utilitas" },
|
||||
{ value: "sanitasi", label: "Sanitasi" },
|
||||
{ value: "kesehatan", label: "Kesehatan" },
|
||||
{ value: "pendidikan", label: "Pendidikan" },
|
||||
]}
|
||||
clearable
|
||||
/>
|
||||
|
||||
<Textarea
|
||||
label="Deskripsi"
|
||||
id="description"
|
||||
name="description"
|
||||
value={newComplaint.description}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Jelaskan pengaduan Anda secara detail..."
|
||||
minRows={4}
|
||||
required
|
||||
withAsterisk
|
||||
/>
|
||||
|
||||
<Button type="submit" mt="md" color="darmasaba-blue">
|
||||
Kirim Pengaduan
|
||||
</Button>
|
||||
</Stack>
|
||||
</form>
|
||||
</Card.Section>
|
||||
</Card>
|
||||
</GridCol>
|
||||
|
||||
{/* Complaints List */}
|
||||
<GridCol span={{ base: 12, lg: 8 }}>
|
||||
<Card withBorder radius="md" bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
|
||||
<Card.Section withBorder inheritPadding py="xs">
|
||||
<Title order={3} py="xs">Daftar Pengaduan</Title>
|
||||
</Card.Section>
|
||||
<Card.Section py="md" px="xs">
|
||||
<Table withColumnBorders>
|
||||
<Table.Thead>
|
||||
<Table.Tr>
|
||||
<Table.Th><Text c={dark ? "white" : "dark.3" }>Judul</Text></Table.Th>
|
||||
<Table.Th><Text c={dark ? "white" : "dark.3" }>Kategori</Text></Table.Th>
|
||||
<Table.Th><Text c={dark ? "white" : "dark.3" }>Status</Text></Table.Th>
|
||||
<Table.Th><Text c={dark ? "white" : "dark.3" }>Prioritas</Text></Table.Th>
|
||||
<Table.Th><Text c={dark ? "white" : "dark.3" }>Tanggal</Text></Table.Th>
|
||||
</Table.Tr>
|
||||
</Table.Thead>
|
||||
<Table.Tbody>
|
||||
{complaintRows}
|
||||
</Table.Tbody>
|
||||
</Table>
|
||||
</Card.Section>
|
||||
</Card>
|
||||
</GridCol>
|
||||
</Grid>
|
||||
</>
|
||||
) : (
|
||||
<div>
|
||||
<Card className="dark:bg-gray-800 dark:border-gray-700">
|
||||
<CardHeader>
|
||||
<CardTitle className="dark:text-white">
|
||||
Layanan Publik Tersedia
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<Stack gap="lg">
|
||||
<Card withBorder radius="md">
|
||||
<Card.Section withBorder inheritPadding py="xs">
|
||||
<Title order={3} py="xs">Layanan Publik Tersedia</Title>
|
||||
</Card.Section>
|
||||
<Card.Section pt="md">
|
||||
<Grid gutter="md">
|
||||
{services.map((service) => (
|
||||
<Card
|
||||
key={service.id}
|
||||
className="dark:bg-gray-700 dark:border-gray-600"
|
||||
>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg dark:text-white">
|
||||
{service.name}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300 mb-3">
|
||||
<GridCol key={service.id} span={{ base: 12, md: 6, lg: 4 }}>
|
||||
<Card withBorder radius="md" h="100%">
|
||||
<Title order={4} mb="sm">{service.name}</Title>
|
||||
<Text size="sm" c={dark ? "white" : "dark.3" } mb="md">
|
||||
{service.description}
|
||||
</p>
|
||||
<div className="flex justify-between items-center">
|
||||
</Text>
|
||||
<Group justify="space-between">
|
||||
<Badge
|
||||
variant={
|
||||
variant="filled"
|
||||
color={
|
||||
service.status === "Available"
|
||||
? "success"
|
||||
? "green"
|
||||
: service.status === "Limited"
|
||||
? "secondary"
|
||||
: "destructive"
|
||||
? "yellow"
|
||||
: "red"
|
||||
}
|
||||
>
|
||||
{service.status}
|
||||
</Badge>
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400">
|
||||
<Text size="sm" c={dark ? "white" : "dark.3" }>
|
||||
{service.category}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-2">
|
||||
</Text>
|
||||
</Group>
|
||||
<Text size="xs" c={dark ? "white" : "dark.3" } mt="sm">
|
||||
Terakhir diperbarui: {service.lastUpdated}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Text>
|
||||
</Card>
|
||||
</GridCol>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Grid>
|
||||
</Card.Section>
|
||||
</Card>
|
||||
|
||||
<Card className="mt-6 dark:bg-gray-800 dark:border-gray-700">
|
||||
<CardHeader>
|
||||
<CardTitle className="dark:text-white">
|
||||
Statistik Layanan
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
|
||||
<h3 className="text-lg font-semibold dark:text-white">
|
||||
Jumlah Layanan Tersedia
|
||||
</h3>
|
||||
<p className="text-3xl font-bold text-blue-600 dark:text-blue-400">
|
||||
12
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
|
||||
<h3 className="text-lg font-semibold dark:text-white">
|
||||
Layanan Terpopuler
|
||||
</h3>
|
||||
<p className="text-3xl font-bold text-green-600 dark:text-green-400">
|
||||
4
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
|
||||
<h3 className="text-lg font-semibold dark:text-white">
|
||||
Permintaan Baru
|
||||
</h3>
|
||||
<p className="text-3xl font-bold text-purple-600 dark:text-purple-400">
|
||||
23
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
<Card withBorder radius="md">
|
||||
<Card.Section withBorder inheritPadding py="xs">
|
||||
<Title order={3} py="xs">Statistik Layanan</Title>
|
||||
</Card.Section>
|
||||
<Card.Section pt="md">
|
||||
<Grid gutter="md">
|
||||
<GridCol span={{ base: 12, md: 4 }}>
|
||||
<Card p="md" bg={dark ? "dark.7" : "gray.0"} radius="md">
|
||||
<Title order={4} mb="xs">Jumlah Layanan Tersedia</Title>
|
||||
<Text size="xl" fw={700} c="darmasaba-blue">
|
||||
12
|
||||
</Text>
|
||||
</Card>
|
||||
</GridCol>
|
||||
<GridCol span={{ base: 12, md: 4 }}>
|
||||
<Card p="md" bg={dark ? "dark.7" : "gray.0"} radius="md">
|
||||
<Title order={4} mb="xs">Layanan Terpopuler</Title>
|
||||
<Text size="xl" fw={700} c="darmasaba-success">
|
||||
4
|
||||
</Text>
|
||||
</Card>
|
||||
</GridCol>
|
||||
<GridCol span={{ base: 12, md: 4 }}>
|
||||
<Card p="md" bg={dark ? "dark.7" : "gray.0"} radius="md">
|
||||
<Title order={4} mb="xs">Permintaan Baru</Title>
|
||||
<Text size="xl" fw={700} c="darmasaba-warning">
|
||||
23
|
||||
</Text>
|
||||
</Card>
|
||||
</GridCol>
|
||||
</Grid>
|
||||
</Card.Section>
|
||||
</Card>
|
||||
</div>
|
||||
</Stack>
|
||||
)}
|
||||
</div>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
export default PengaduanLayananPublik;
|
||||
export default PengaduanLayananPublik;
|
||||
Reference in New Issue
Block a user