fix: production build CSS dan responsive layout untuk staging

- Tambah scripts/build.ts untuk build CSS via PostCSS/Tailwind
- Update package.json build script untuk gunakan build script baru
- Fix responsive grid di sosial-page (lg -> md breakpoint)
- Tambah padding responsive untuk mobile display
- Convert inline styles ke Tailwind classes untuk konsistensi
- Update tailwind.config.js content paths
- Tambah CSS variables di index.css untuk color palette
- Update Dockerfile untuk gunakan build script baru

Fixes: tampilan berantakan di staging karena CSS tidak ter-build dengan benar

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>

src/components/bumdes-page.tsx

@@ -149,16 +149,40 @@ const BumdesPage = () => {
 	return (
 		<div
 			className="min-h-screen"
-			style={{ backgroundColor: dark ? "#0F172A" : "#F3F4F6" }}
+			style={{
+				backgroundColor: dark ? "#0F172A" : "#F3F4F6",
+				minHeight: "100vh",
+				padding: "1.5rem",
+			}}
 		>
-			<div className="max-w-7xl mx-auto">
+			<div
+				className="max-w-7xl mx-auto"
+				style={{
+					maxWidth: "80rem",
+					marginLeft: "auto",
+					marginRight: "auto",
+				}}
+			>
 				{/* Row 1: Top 4 Metrics Cards */}
-				<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
+				<div
+					className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"
+					style={{
+						display: "grid",
+						gridTemplateColumns: "repeat(4, 1fr)",
+						gap: "1.5rem",
+						marginBottom: "1.5rem",
+					}}
+				>
 					{kpiData.map((kpi, index) => (
 						<div
 							key={index}
 							className="rounded-xl shadow-sm p-6"
-							style={cardStyle}
+							style={{
+								...cardStyle,
+								borderRadius: "12px",
+								boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+								padding: "1.5rem",
+							}}
 						>
 							<div className="flex items-center justify-between">
 								<div className="flex-1">
@@ -197,7 +221,12 @@ const BumdesPage = () => {
 				{/* Row 2: Sales Update Header */}
 				<div
 					className="rounded-xl shadow-sm mb-6 overflow-hidden"
-					style={cardStyle}
+					style={{
+						...cardStyle,
+						borderRadius: "12px",
+						boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+						marginBottom: "1.5rem",
+					}}
 				>
 					<div
 						className="px-6 py-4 flex items-center justify-between"
@@ -232,13 +261,25 @@ const BumdesPage = () => {
 				</div>
 
 				{/* Row 3: Main Content Grid */}
-				<div className="grid grid-cols-1 lg:grid-cols-10 gap-6">
+				<div
+					className="grid grid-cols-1 lg:grid-cols-10 gap-6"
+					style={{
+						display: "grid",
+						gridTemplateColumns: "repeat(10, 1fr)",
+						gap: "1.5rem",
+					}}
+				>
 					{/* Left Column (30%) */}
 					<div className="lg:col-span-3 space-y-6">
 						{/* Produk Unggulan Section */}
 						<div
 							className="rounded-xl shadow-sm p-6"
-							style={cardStyle}
+							style={{
+								...cardStyle,
+								borderRadius: "12px",
+								boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+								padding: "1.5rem",
+							}}
 						>
 							<h3
 								className="text-lg font-semibold mb-4"
@@ -271,11 +312,7 @@ const BumdesPage = () => {
 										</p>
 										{stat.subtitle && (
 											<p
-												className={`text-xs mt-1 ${
-													stat.isPositive
-														? "text-green-500"
-														: subtitleStyle.color
-												}`}
+												className="text-xs mt-1"
 												style={
 													stat.isPositive
 														? { color: "#22C55E" }
@@ -332,7 +369,7 @@ const BumdesPage = () => {
 												{product.umkmOwner}
 											</p>
 											<div className="flex items-center justify-between mt-2">
-												<p className="text-xs font-medium text-green-500">
+												<p className="text-xs font-medium" style={{ color: "#22C55E" }}>
 													{product.sales}
 												</p>
 												<p
@@ -356,7 +393,12 @@ const BumdesPage = () => {
 					<div className="lg:col-span-7">
 						<div
 							className="rounded-xl shadow-sm p-6"
-							style={cardStyle}
+							style={{
+								...cardStyle,
+								borderRadius: "12px",
+								boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+								padding: "1.5rem",
+							}}
 						>
 							<div className="flex items-center justify-between mb-6">
 								<h3
@@ -505,11 +547,11 @@ const BumdesPage = () => {
 												</td>
 												<td className="py-4 px-4">
 													<span
-														className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-medium ${
-															parseInt(product.stok) > 200
-																? "bg-green-100 text-green-800"
-																: "bg-red-100 text-red-800"
-														}`}
+														className="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium"
+														style={{
+															backgroundColor: parseInt(product.stok) > 200 ? "#DCFCE7" : "#FEE2E2",
+															color: parseInt(product.stok) > 200 ? "#166534" : "#991B1B",
+														}}
 													>
 														{product.stok}
 													</span>

src/components/demografi-pekerjaan.tsx

@@ -140,16 +140,40 @@ const DemografiPekerjaan = () => {
 	return (
 		<div
 			className="min-h-screen"
-			style={{ backgroundColor: dark ? "#10192D" : "#F3F4F6" }}
+			style={{
+				backgroundColor: dark ? "#10192D" : "#F3F4F6",
+				minHeight: "100vh",
+				padding: "1.5rem",
+			}}
 		>
-			<div className="max-w-7xl mx-auto">
+			<div
+				className="max-w-7xl mx-auto"
+				style={{
+					maxWidth: "80rem",
+					marginLeft: "auto",
+					marginRight: "auto",
+				}}
+			>
 				{/* Row 1: 4 Statistic Cards */}
-				<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
+				<div
+					className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"
+					style={{
+						display: "grid",
+						gridTemplateColumns: "repeat(4, 1fr)",
+						gap: "1.5rem",
+						marginBottom: "1.5rem",
+					}}
+				>
 					{kpiData.map((kpi) => (
 						<div
 							key={kpi.id}
 							className="rounded-xl shadow-sm p-6"
-							style={cardStyle}
+							style={{
+								...cardStyle,
+								borderRadius: "12px",
+								boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+								padding: "1.5rem",
+							}}
 						>
 							<div className="flex items-center justify-between">
 								<div className="flex-1">
@@ -186,11 +210,24 @@ const DemografiPekerjaan = () => {
 				</div>
 
 				{/* Row 2: 2 Chart Cards */}
-				<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+				<div
+					className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"
+					style={{
+						display: "grid",
+						gridTemplateColumns: "repeat(2, 1fr)",
+						gap: "1.5rem",
+						marginBottom: "1.5rem",
+					}}
+				>
 					{/* Age Distribution Bar Chart */}
 					<div
 						className="rounded-xl shadow-sm p-6"
-						style={cardStyle}
+						style={{
+							...cardStyle,
+							borderRadius: "12px",
+							boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+							padding: "1.5rem",
+						}}
 					>
 						<h3
 							className="text-lg font-semibold mb-4"
@@ -239,7 +276,12 @@ const DemografiPekerjaan = () => {
 					{/* Job Distribution Bar Chart */}
 					<div
 						className="rounded-xl shadow-sm p-6"
-						style={cardStyle}
+						style={{
+							...cardStyle,
+							borderRadius: "12px",
+							boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+							padding: "1.5rem",
+						}}
 					>
 						<h3
 							className="text-lg font-semibold mb-4"
@@ -287,11 +329,24 @@ const DemografiPekerjaan = () => {
 				</div>
 
 				{/* Row 3: 3 Insight Cards */}
-				<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
+				<div
+					className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"
+					style={{
+						display: "grid",
+						gridTemplateColumns: "repeat(3, 1fr)",
+						gap: "1.5rem",
+						marginBottom: "1.5rem",
+					}}
+				>
 					{/* Religion Distribution Pie Chart */}
 					<div
 						className="rounded-xl shadow-sm p-6"
-						style={cardStyle}
+						style={{
+							...cardStyle,
+							borderRadius: "12px",
+							boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+							padding: "1.5rem",
+						}}
 					>
 						<h3
 							className="text-lg font-semibold mb-4"
@@ -331,7 +386,12 @@ const DemografiPekerjaan = () => {
 					{/* Population per Banjar Table */}
 					<div
 						className="rounded-xl shadow-sm p-6 lg:col-span-2"
-						style={cardStyle}
+						style={{
+							...cardStyle,
+							borderRadius: "12px",
+							boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+							padding: "1.5rem",
+						}}
 					>
 						<h3
 							className="text-lg font-semibold mb-4"
@@ -416,7 +476,12 @@ const DemografiPekerjaan = () => {
 				{/* Population Dynamics Stats */}
 				<div
 					className="rounded-xl shadow-sm p-6"
-					style={cardStyle}
+					style={{
+						...cardStyle,
+						borderRadius: "12px",
+						boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+						padding: "1.5rem",
+					}}
 				>
 					<h3
 						className="text-lg font-semibold mb-4"
@@ -424,13 +489,22 @@ const DemografiPekerjaan = () => {
 					>
 						Statistik Dinamika Penduduk
 					</h3>
-					<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+					<div
+						className="grid grid-cols-1 md:grid-cols-4 gap-4"
+						style={{
+							display: "grid",
+							gridTemplateColumns: "repeat(4, 1fr)",
+							gap: "1rem",
+						}}
+					>
 						{dynamicStats.map((stat, index) => (
 							<div
 								key={index}
 								className="p-4 rounded-lg"
 								style={{
 									backgroundColor: dark ? "#1F2937" : "#F9FAFB",
+									borderRadius: "8px",
+									padding: "1rem",
 								}}
 							>
 								<div className="flex items-center justify-between">

src/components/jenna-analytic.tsx

@@ -98,16 +98,40 @@ const JennaAnalytic = () => {
 	return (
 		<div
 			className="min-h-screen"
-			style={{ backgroundColor: dark ? "#10192D" : "#F3F4F6" }}
+			style={{
+				backgroundColor: dark ? "#10192D" : "#F3F4F6",
+				minHeight: "100vh",
+				padding: "1.5rem",
+			}}
 		>
-			<div className="max-w-7xl mx-auto">
+			<div
+				className="max-w-7xl mx-auto"
+				style={{
+					maxWidth: "80rem",
+					marginLeft: "auto",
+					marginRight: "auto",
+				}}
+			>
 				{/* Row 1: 4 Statistic Cards */}
-				<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
+				<div
+					className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"
+					style={{
+						display: "grid",
+						gridTemplateColumns: "repeat(4, 1fr)",
+						gap: "1.5rem",
+						marginBottom: "1.5rem",
+					}}
+				>
 					{kpiData.map((kpi) => (
 						<div
 							key={kpi.id}
 							className="rounded-xl shadow-sm p-6"
-							style={cardStyle}
+							style={{
+								...cardStyle,
+								borderRadius: "12px",
+								boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+								padding: "1.5rem",
+							}}
 						>
 							<div className="flex items-center justify-between">
 								<div className="flex-1">
@@ -146,7 +170,13 @@ const JennaAnalytic = () => {
 				{/* Row 2: Full Width Weekly Bar Chart */}
 				<div
 					className="rounded-xl shadow-sm p-6 mb-6"
-					style={cardStyle}
+					style={{
+						...cardStyle,
+						borderRadius: "12px",
+						boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+						padding: "1.5rem",
+						marginBottom: "1.5rem",
+					}}
 				>
 					<h3
 						className="text-lg font-semibold mb-4"
@@ -193,11 +223,23 @@ const JennaAnalytic = () => {
 				</div>
 
 				{/* Row 3: Two Insight Cards */}
-				<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+				<div
+					className="grid grid-cols-1 lg:grid-cols-2 gap-6"
+					style={{
+						display: "grid",
+						gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
+						gap: "1.5rem",
+					}}
+				>
 					{/* Left: Frequently Asked Topics */}
 					<div
 						className="rounded-xl shadow-sm p-6"
-						style={cardStyle}
+						style={{
+							...cardStyle,
+							borderRadius: "12px",
+							boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+							padding: "1.5rem",
+						}}
 					>
 						<h3
 							className="text-lg font-semibold mb-4"
@@ -220,7 +262,7 @@ const JennaAnalytic = () => {
 									>
 										{item.topic}
 									</span>
-									<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+									<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-darmasaba-blue-100 text-darmasaba-blue-800">
 										{item.count}x
 									</span>
 								</div>
@@ -231,7 +273,12 @@ const JennaAnalytic = () => {
 					{/* Right: Busy Hour Distribution */}
 					<div
 						className="rounded-xl shadow-sm p-6"
-						style={cardStyle}
+						style={{
+							...cardStyle,
+							borderRadius: "12px",
+							boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+							padding: "1.5rem",
+						}}
 					>
 						<h3
 							className="text-lg font-semibold mb-4"

src/components/keuangan-anggaran.tsx

@@ -123,16 +123,40 @@ const KeuanganAnggaran = () => {
 	return (
 		<div
 			className="min-h-screen"
-			style={{ backgroundColor: dark ? "#0F172A" : "#F3F4F6" }}
+			style={{
+				backgroundColor: dark ? "#0F172A" : "#F3F4F6",
+				minHeight: "100vh",
+				padding: "1.5rem",
+			}}
 		>
-			<div className="max-w-7xl mx-auto">
+			<div
+				className="max-w-7xl mx-auto"
+				style={{
+					maxWidth: "80rem",
+					marginLeft: "auto",
+					marginRight: "auto",
+				}}
+			>
 				{/* Row 1: 4 Summary Metrics Cards */}
-				<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
+				<div
+					className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"
+					style={{
+						display: "grid",
+						gridTemplateColumns: "repeat(4, 1fr)",
+						gap: "1.5rem",
+						marginBottom: "1.5rem",
+					}}
+				>
 					{kpiData.map((kpi) => (
 						<div
 							key={kpi.id}
 							className="rounded-xl shadow-sm p-6"
-							style={cardStyle}
+							style={{
+								...cardStyle,
+								borderRadius: "12px",
+								boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+								padding: "1.5rem",
+							}}
 						>
 							<div className="flex items-center justify-between">
 								<div className="flex-1">
@@ -155,7 +179,7 @@ const KeuanganAnggaran = () => {
 										{kpi.subtitle}
 									</p>
 									{kpi.delta && (
-										<p className="text-xs text-green-500 mt-1">
+										<p className="text-xs mt-1" style={{ color: "#22C55E" }}>
 											{kpi.delta}
 										</p>
 									)}
@@ -176,7 +200,13 @@ const KeuanganAnggaran = () => {
 				{/* Row 2: Line Chart Section */}
 				<div
 					className="rounded-xl shadow-sm p-6 mb-6"
-					style={cardStyle}
+					style={{
+						...cardStyle,
+						borderRadius: "12px",
+						boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+						padding: "1.5rem",
+						marginBottom: "1.5rem",
+					}}
 				>
 					<h3
 						className="text-lg font-semibold mb-4"
@@ -258,11 +288,24 @@ const KeuanganAnggaran = () => {
 				{/* Row 3: Analytics Section */}
 
 
-				<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+				<div
+					className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"
+					style={{
+						display: "grid",
+						gridTemplateColumns: "repeat(2, 1fr)",
+						gap: "1.5rem",
+						marginBottom: "1.5rem",
+					}}
+				>
 					{/* Left: Horizontal Bar Chart */}
 					<div
 						className="rounded-xl shadow-sm p-6"
-						style={cardStyle}
+						style={{
+							...cardStyle,
+							borderRadius: "12px",
+							boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+							padding: "1.5rem",
+						}}
 					>
 						<h3
 							className="text-lg font-semibold mb-4"
@@ -314,7 +357,12 @@ const KeuanganAnggaran = () => {
 					{/* Right: Assistance Funds List */}
 					<div
 						className="rounded-xl shadow-sm p-6"
-						style={cardStyle}
+						style={{
+							...cardStyle,
+							borderRadius: "12px",
+							boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+							padding: "1.5rem",
+						}}
 					>
 						<h3
 							className="text-lg font-semibold mb-4"
@@ -368,7 +416,12 @@ const KeuanganAnggaran = () => {
 				{/* Row 4: Report Section */}
 				<div
 					className="rounded-xl shadow-sm p-6"
-					style={cardStyle}
+					style={{
+						...cardStyle,
+						borderRadius: "12px",
+						boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+						padding: "1.5rem",
+					}}
 				>
 					<h3
 						className="text-lg font-semibold mb-6"
@@ -376,7 +429,14 @@ const KeuanganAnggaran = () => {
 					>
 						Laporan APBDes
 					</h3>
-					<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+					<div
+						className="grid grid-cols-1 md:grid-cols-2 gap-8"
+						style={{
+							display: "grid",
+							gridTemplateColumns: "repeat(2, 1fr)",
+							gap: "2rem",
+						}}
+					>
 						{/* Left: Pendapatan */}
 						<div>
 							<h4

src/components/kinerja-divisi.tsx

@@ -11,6 +11,7 @@ import {
 	YAxis,
 } from "recharts";
 import { useMantineColorScheme } from "@mantine/core";
+import { IconMessage } from "@tabler/icons-react";
 
 const KinerjaDivisi = () => {
 	const { colorScheme } = useMantineColorScheme();
@@ -76,10 +77,22 @@ const KinerjaDivisi = () => {
 	return (
 		<div
 			className="min-h-screen"
-			style={{ backgroundColor: dark ? "#10192D" : "#F3F4F6" }}
+			style={{
+				backgroundColor: dark ? "#10192D" : "#F3F4F6",
+				minHeight: "100vh",
+				padding: "1.5rem",
+			}}
 		>
 			{/* Top Row - 4 Activity Cards */}
-			<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
+			<div
+				className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"
+				style={{
+					display: "grid",
+					gridTemplateColumns: "repeat(4, 1fr)",
+					gap: "1.5rem",
+					marginBottom: "1.5rem",
+				}}
+			>
 				{activities.map((activity, index) => (
 					<div
 						key={index}
@@ -87,6 +100,9 @@ const KinerjaDivisi = () => {
 						style={{
 							backgroundColor: dark ? "#141D34" : "white",
 							border: `1px solid ${dark ? "#141D34" : "white"}`,
+							borderRadius: "12px",
+							boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+							padding: "1.25rem",
 						}}
 					>
 						{/* Dark blue title bar */}
@@ -125,13 +141,24 @@ const KinerjaDivisi = () => {
 			</div>
 
 			{/* Second Row - Charts */}
-			<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+			<div
+				className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"
+				style={{
+					display: "grid",
+					gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
+					gap: "1.5rem",
+					marginBottom: "1.5rem",
+				}}
+			>
 				{/* Left Card - Jumlah Dokumen (Bar Chart) */}
 				<div
 					className="rounded-xl shadow-sm p-5"
 					style={{
 						backgroundColor: dark ? "#141D34" : "white",
 						border: `1px solid ${dark ? "#141D34" : "white"}`,
+						borderRadius: "12px",
+						boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+						padding: "1.25rem",
 					}}
 				>
 					<h3
@@ -181,6 +208,9 @@ const KinerjaDivisi = () => {
 					style={{
 						backgroundColor: dark ? "#141D34" : "white",
 						border: `1px solid ${dark ? "#141D34" : "white"}`,
+						borderRadius: "12px",
+						boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+						padding: "1.25rem",
 					}}
 				>
 					<h3
@@ -261,13 +291,23 @@ const KinerjaDivisi = () => {
 			</div>
 
 			{/* Bottom Row */}
-			<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+			<div
+				className="grid grid-cols-1 lg:grid-cols-2 gap-6"
+				style={{
+					display: "grid",
+					gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
+					gap: "1.5rem",
+				}}
+			>
 				{/* Left Card - Diskusi */}
 				<div
 					className="rounded-xl shadow-sm p-5"
 					style={{
 						backgroundColor: dark ? "#141D34" : "white",
 						border: `1px solid ${dark ? "#141D34" : "white"}`,
+						borderRadius: "12px",
+						boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+						padding: "1.25rem",
 					}}
 				>
 					<h3
@@ -290,20 +330,11 @@ const KinerjaDivisi = () => {
 										className="w-8 h-8 rounded-full flex items-center justify-center"
 										style={{ backgroundColor: "#DBEAFE" }}
 									>
-										<svg
+										<IconMessage
 											className="w-4 h-4"
 											style={{ color: "#1E3A5F" }}
-											fill="none"
-											stroke="currentColor"
-											viewBox="0 0 24 24"
-										>
-											<path
-												strokeLinecap="round"
-												strokeLinejoin="round"
-												strokeWidth={2}
-												d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
-											/>
-										</svg>
+											stroke={2}
+										/>
 									</div>
 								</div>
 								<div className="flex-1">
@@ -331,6 +362,9 @@ const KinerjaDivisi = () => {
 					style={{
 						backgroundColor: dark ? "#141D34" : "white",
 						border: `1px solid ${dark ? "#141D34" : "white"}`,
+						borderRadius: "12px",
+						boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+						padding: "1.25rem",
 					}}
 				>
 					<h3

src/components/pengaduan-layanan-publik.tsx

@@ -78,8 +78,8 @@ const PengaduanLayananPublik = () => {
 			type: "KTP Elektronik",
 			date: "10 Mar 2025",
 			status: "Selesai",
-			statusColor: "green",
-			statusText: "bg-green-100 text-green-800",
+			statusBg: "bg-darmasaba-success-100",
+			statusText: "text-darmasaba-success-800",
 		},
 		{
 			id: 2,
@@ -87,8 +87,8 @@ const PengaduanLayananPublik = () => {
 			type: "Surat Domisili",
 			date: "10 Mar 2025",
 			status: "Diproses",
-			statusColor: "yellow",
-			statusText: "bg-yellow-100 text-yellow-800",
+			statusBg: "bg-darmasaba-warning-100",
+			statusText: "text-darmasaba-warning-800",
 		},
 		{
 			id: 3,
@@ -96,8 +96,8 @@ const PengaduanLayananPublik = () => {
 			type: "Kartu Keluarga",
 			date: "9 Mar 2025",
 			status: "Baru",
-			statusColor: "blue",
-			statusText: "bg-blue-100 text-blue-800",
+			statusBg: "bg-darmasaba-blue-100",
+			statusText: "text-darmasaba-blue-800",
 		},
 		{
 			id: 4,
@@ -105,8 +105,8 @@ const PengaduanLayananPublik = () => {
 			type: "Surat Usaha",
 			date: "9 Mar 2025",
 			status: "Selesai",
-			statusColor: "green",
-			statusText: "bg-green-100 text-green-800",
+			statusBg: "bg-darmasaba-success-100",
+			statusText: "text-darmasaba-success-800",
 		},
 		{
 			id: 5,
@@ -114,8 +114,8 @@ const PengaduanLayananPublik = () => {
 			type: "SKCK",
 			date: "8 Mar 2025",
 			status: "Diproses",
-			statusColor: "yellow",
-			statusText: "bg-yellow-100 text-yellow-800",
+			statusBg: "bg-darmasaba-warning-100",
+			statusText: "text-darmasaba-warning-800",
 		},
 	];
 
@@ -165,16 +165,40 @@ const PengaduanLayananPublik = () => {
 	return (
 		<div
 			className="min-h-screen"
-			style={{ backgroundColor: dark ? "#10192D" : "#F3F4F6" }}
+			style={{
+				backgroundColor: dark ? "#10192D" : "#F3F4F6",
+				minHeight: "100vh",
+				padding: "1.5rem",
+			}}
 		>
-			<div className="max-w-7xl mx-auto">
+			<div
+				className="max-w-7xl mx-auto"
+				style={{
+					maxWidth: "80rem",
+					marginLeft: "auto",
+					marginRight: "auto",
+				}}
+			>
 				{/* Row 1: 4 Statistic Cards */}
-				<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
+				<div
+					className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"
+					style={{
+						display: "grid",
+						gridTemplateColumns: "repeat(4, 1fr)",
+						gap: "1.5rem",
+						marginBottom: "1.5rem",
+					}}
+				>
 					{statsData.map((stat, index) => (
 						<div
 							key={index}
 							className="rounded-xl shadow-sm p-6"
-							style={cardStyle}
+							style={{
+								...cardStyle,
+								borderRadius: "12px",
+								boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+								padding: "1.5rem",
+							}}
 						>
 							<div className="flex items-center justify-between">
 								<div className="flex-1">
@@ -213,7 +237,13 @@ const PengaduanLayananPublik = () => {
 				{/* Row 2: Full Width Line Chart */}
 				<div
 					className="rounded-xl shadow-sm p-6 mb-6"
-					style={cardStyle}
+					style={{
+						...cardStyle,
+						borderRadius: "12px",
+						boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+						padding: "1.5rem",
+						marginBottom: "1.5rem",
+					}}
 				>
 					<h3
 						className="text-lg font-semibold mb-4"
@@ -260,11 +290,23 @@ const PengaduanLayananPublik = () => {
 				</div>
 
 				{/* Row 3: 3 Column Grid */}
-				<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+				<div
+					className="grid grid-cols-1 lg:grid-cols-3 gap-6"
+					style={{
+						display: "grid",
+						gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
+						gap: "1.5rem",
+					}}
+				>
 					{/* Left: Most Requested Documents (Horizontal Bar Chart) */}
 					<div
 						className="rounded-xl shadow-sm p-6"
-						style={cardStyle}
+						style={{
+							...cardStyle,
+							borderRadius: "12px",
+							boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+							padding: "1.5rem",
+						}}
 					>
 						<h3
 							className="text-lg font-semibold mb-4"
@@ -316,7 +358,12 @@ const PengaduanLayananPublik = () => {
 					{/* Middle: Recent Applications */}
 					<div
 						className="rounded-xl shadow-sm p-6"
-						style={cardStyle}
+						style={{
+							...cardStyle,
+							borderRadius: "12px",
+							boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+							padding: "1.5rem",
+						}}
 					>
 						<h3
 							className="text-lg font-semibold mb-4"
@@ -349,7 +396,7 @@ const PengaduanLayananPublik = () => {
 									</div>
 									<div className="text-right">
 										<span
-											className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${app.statusText}`}
+											className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${app.statusBg} ${app.statusText}`}
 										>
 											{app.status}
 										</span>
@@ -368,7 +415,12 @@ const PengaduanLayananPublik = () => {
 					{/* Right: Innovation Ideas */}
 					<div
 						className="rounded-xl shadow-sm p-6"
-						style={cardStyle}
+						style={{
+							...cardStyle,
+							borderRadius: "12px",
+							boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+							padding: "1.5rem",
+						}}
 					>
 						<h3
 							className="text-lg font-semibold mb-4"

src/components/sosial-page.tsx

@@ -115,62 +115,55 @@ const SosialPage = () => {
 		},
 	];
 
-	const cardStyle = {
-		backgroundColor: dark ? "#1E293B" : "white",
-		border: `1px solid ${dark ? "#1E293B" : "white"}`,
-	};
-
-	const textStyle = {
-		color: dark ? "white" : "#1F2937",
-	};
-
-	const subtitleStyle = {
-		color: dark ? "#9CA3AF" : "#6B7280",
-	};
-
 	return (
 		<div
-			className="min-h-screen"
-			style={{ backgroundColor: dark ? "#0F172A" : "#F3F4F6" }}
+			className={`min-h-screen py-6 px-4 sm:px-6 lg:px-8 ${
+				dark ? "bg-slate-900" : "bg-gray-100"
+			}`}
 		>
-			<div className="max-w-7xl mx-auto">
+			<div className="max-w-7xl mx-auto w-full">
 				{/* Row 1: Top 4 Metrics Cards */}
 				<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
 					{healthStats.map((stat, index) => (
 						<div
 							key={index}
-							className="rounded-xl shadow-sm p-6"
-							style={cardStyle}
+							className={`rounded-xl shadow-sm p-6 ${
+								dark ? "bg-slate-800 border border-slate-800" : "bg-white border border-white"
+							}`}
 						>
 							<div className="flex items-center justify-between">
 								<div className="flex-1">
 									<h3
-										className="text-sm font-medium mb-1"
-										style={subtitleStyle}
+										className={`text-sm font-medium mb-1 ${
+											dark ? "text-gray-400" : "text-gray-500"
+										}`}
 									>
 										{stat.title}
 									</h3>
 									<p
-										className="text-3xl font-bold mb-1"
-										style={
-											stat.alert ? { color: "#EF4444" } : textStyle
-										}
+										className={`text-3xl font-bold mb-1 ${
+											stat.alert
+												? "text-red-500"
+												: dark
+												? "text-white"
+												: "text-gray-800"
+										}`}
 									>
 										{stat.value}
 									</p>
 									<p
-										className="text-xs"
-										style={subtitleStyle}
+										className={`text-xs ${
+											dark ? "text-gray-400" : "text-gray-500"
+										}`}
 									>
 										{stat.subtitle}
 									</p>
 								</div>
 								<div className="flex-shrink-0 ml-4">
 									<div
-										className="w-12 h-12 rounded-full flex items-center justify-center text-white"
-										style={{
-											backgroundColor: stat.alert ? "#EF4444" : "#1F3A5F",
-										}}
+										className={`w-12 h-12 rounded-full flex items-center justify-center text-white ${
+											stat.alert ? "bg-red-500" : "bg-blue-900"
+										}`}
 									>
 										<stat.icon size={24} />
 									</div>
@@ -182,12 +175,14 @@ const SosialPage = () => {
 
 				{/* Row 2: Statistik Kesehatan */}
 				<div
-					className="rounded-xl shadow-sm p-6 mb-6"
-					style={cardStyle}
+					className={`rounded-xl shadow-sm p-6 mb-6 ${
+						dark ? "bg-slate-800 border border-slate-800" : "bg-white border border-white"
+					}`}
 				>
 					<h3
-						className="text-lg font-semibold mb-6"
-						style={textStyle}
+						className={`text-lg font-semibold mb-6 ${
+							dark ? "text-white" : "text-gray-800"
+						}`}
 					>
 						Statistik Kesehatan
 					</h3>
@@ -196,34 +191,34 @@ const SosialPage = () => {
 							<div key={index}>
 								<div className="flex items-center justify-between mb-2">
 									<span
-										className="text-sm font-medium"
-										style={textStyle}
+										className={`text-sm font-medium ${
+											dark ? "text-white" : "text-gray-800"
+										}`}
 									>
 										{item.label}
 									</span>
 									<span
-										className="text-sm font-semibold"
-										style={
+										className={`text-sm font-semibold ${
 											item.isAlert
-												? { color: "#EF4444" }
-												: textStyle
-										}
+												? "text-red-500"
+												: dark
+												? "text-white"
+												: "text-gray-800"
+										}`}
 									>
 										{item.value}%
 									</span>
 								</div>
 								<div
-									className="w-full rounded-full h-2"
-									style={{ backgroundColor: dark ? "#334155" : "#E5E7EB" }}
+									className={`w-full rounded-full h-2 ${
+										dark ? "bg-slate-700" : "bg-gray-200"
+									}`}
 								>
 									<div
-										className="h-2 rounded-full transition-all"
-										style={{
-											width: `${item.value}%`,
-											backgroundColor: item.isAlert
-												? "#EF4444"
-												: "#1F3A5F",
-										}}
+										className={`h-2 rounded-full transition-all ${
+											item.isAlert ? "bg-red-500" : "bg-blue-900"
+										}`}
+										style={{ width: `${item.value}%` }}
 									/>
 								</div>
 							</div>
@@ -232,15 +227,17 @@ const SosialPage = () => {
 				</div>
 
 				{/* Row 3: Jadwal Posyandu & Pendidikan */}
-				<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+				<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
 					{/* Jadwal Posyandu */}
 					<div
-						className="rounded-xl shadow-sm p-6"
-						style={cardStyle}
+						className={`rounded-xl shadow-sm p-6 ${
+							dark ? "bg-slate-800 border border-slate-800" : "bg-white border border-white"
+						}`}
 					>
 						<h3
-							className="text-lg font-semibold mb-4"
-							style={textStyle}
+							className={`text-lg font-semibold mb-4 ${
+								dark ? "text-white" : "text-gray-800"
+							}`}
 						>
 							Jadwal Posyandu
 						</h3>
@@ -248,32 +245,29 @@ const SosialPage = () => {
 							{posyanduSchedule.map((item, index) => (
 								<div
 									key={index}
-									className="p-4 rounded-lg"
-									style={{
-										backgroundColor: dark ? "#334155" : "#F9FAFB",
-									}}
+									className={`p-4 rounded-lg ${
+										dark ? "bg-slate-700" : "bg-gray-50"
+									}`}
 								>
 									<div className="flex items-center justify-between">
 										<div>
 											<p
-												className="text-sm font-medium"
-												style={textStyle}
+												className={`text-sm font-medium ${
+													dark ? "text-white" : "text-gray-800"
+												}`}
 											>
 												{item.nama}
 											</p>
 											<p
-												className="text-xs mt-1"
-												style={subtitleStyle}
+												className={`text-xs mt-1 ${
+													dark ? "text-gray-400" : "text-gray-500"
+												}`}
 											>
 												{item.tanggal}
 											</p>
 										</div>
 										<span
-											className="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium"
-											style={{
-												backgroundColor: "#DBEAFE",
-												color: "#1E3A5F",
-											}}
+											className="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-900"
 										>
 											{item.jam}
 										</span>
@@ -285,12 +279,14 @@ const SosialPage = () => {
 
 					{/* Pendidikan Section */}
 					<div
-						className="rounded-xl shadow-sm p-6"
-						style={cardStyle}
+						className={`rounded-xl shadow-sm p-6 ${
+							dark ? "bg-slate-800 border border-slate-800" : "bg-white border border-white"
+						}`}
 					>
 						<h3
-							className="text-lg font-semibold mb-4"
-							style={textStyle}
+							className={`text-lg font-semibold mb-4 ${
+								dark ? "text-white" : "text-gray-800"
+							}`}
 						>
 							Pendidikan
 						</h3>
@@ -298,17 +294,17 @@ const SosialPage = () => {
 							{educationStats.map((item, index) => (
 								<div
 									key={index}
-									className="flex items-center justify-between py-2"
-									style={{
-										borderBottom: `1px solid ${dark ? "#334155" : "#F3F4F6"}`,
-									}}
+									className={`flex items-center justify-between py-2 ${
+										dark ? "border-b border-slate-700" : "border-b border-gray-100"
+									}`}
 								>
-									<span className="text-sm" style={subtitleStyle}>
+									<span className="text-sm" style={{ color: dark ? "#9CA3AF" : "#6B7280" }}>
 										{item.level}
 									</span>
 									<span
-										className="text-sm font-semibold"
-										style={textStyle}
+										className={`text-sm font-semibold ${
+											dark ? "text-white" : "text-gray-800"
+										}`}
 									>
 										{item.value}
 									</span>
@@ -318,8 +314,9 @@ const SosialPage = () => {
 
 						{/* Info Sekolah */}
 						<h4
-							className="text-base font-semibold mb-4"
-							style={textStyle}
+							className={`text-base font-semibold mb-4 ${
+								dark ? "text-white" : "text-gray-800"
+							}`}
 						>
 							Info Sekolah
 						</h4>
@@ -327,17 +324,17 @@ const SosialPage = () => {
 							{schoolInfo.map((item, index) => (
 								<div
 									key={index}
-									className="flex items-center justify-between py-3 px-4 rounded-lg"
-									style={{
-										backgroundColor: dark ? "#334155" : "#F9FAFB",
-									}}
+									className={`flex items-center justify-between py-3 px-4 rounded-lg ${
+										dark ? "bg-slate-700" : "bg-gray-50"
+									}`}
 								>
-									<span className="text-sm" style={subtitleStyle}>
+									<span className="text-sm" style={{ color: dark ? "#9CA3AF" : "#6B7280" }}>
 										{item.label}
 									</span>
 									<span
-										className="text-lg font-bold"
-										style={textStyle}
+										className={`text-lg font-bold ${
+											dark ? "text-white" : "text-gray-800"
+										}`}
 									>
 										{item.value}
 									</span>
@@ -348,22 +345,23 @@ const SosialPage = () => {
 				</div>
 
 				{/* Row 4: Beasiswa Desa & Kalender Event Budaya */}
-				<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+				<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
 					{/* Beasiswa Desa */}
 					<div
-						className="rounded-xl shadow-sm p-6"
-						style={cardStyle}
+						className={`rounded-xl shadow-sm p-6 ${
+							dark ? "bg-slate-800 border border-slate-800" : "bg-white border border-white"
+						}`}
 					>
 						<div className="flex items-center justify-between mb-6">
 							<h3
-								className="text-lg font-semibold"
-								style={textStyle}
+								className={`text-lg font-semibold ${
+									dark ? "text-white" : "text-gray-800"
+								}`}
 							>
 								Beasiswa Desa
 							</h3>
 							<div
-								className="w-12 h-12 rounded-full flex items-center justify-center text-white"
-								style={{ backgroundColor: "#22C55E" }}
+								className="w-12 h-12 rounded-full flex items-center justify-center text-white bg-green-500"
 							>
 								<IconAward size={24} />
 							</div>
@@ -372,39 +370,39 @@ const SosialPage = () => {
 						{/* Two centered metrics */}
 						<div className="grid grid-cols-2 gap-4 mb-6">
 							<div
-								className="p-4 rounded-lg text-center"
-								style={{
-									backgroundColor: dark ? "#334155" : "#F9FAFB",
-								}}
+								className={`p-4 rounded-lg text-center ${
+									dark ? "bg-slate-700" : "bg-gray-50"
+								}`}
 							>
 								<p
-									className="text-3xl font-bold mb-1"
-									style={textStyle}
+									className={`text-3xl font-bold mb-1 ${
+										dark ? "text-white" : "text-gray-800"
+									}`}
 								>
 									{scholarshipData.penerima}
 								</p>
 								<p
-									className="text-xs"
-									style={subtitleStyle}
+									className={`text-xs ${
+										dark ? "text-gray-400" : "text-gray-500"
+									}`}
 								>
 									Penerima Beasiswa
 								</p>
 							</div>
 							<div
-								className="p-4 rounded-lg text-center"
-								style={{
-									backgroundColor: dark ? "#334155" : "#F9FAFB",
-								}}
+								className={`p-4 rounded-lg text-center ${
+									dark ? "bg-slate-700" : "bg-gray-50"
+								}`}
 							>
 								<p
-									className="text-3xl font-bold mb-1"
-									style={{ color: "#22C55E" }}
+									className={`text-3xl font-bold mb-1 text-green-500`}
 								>
 									{scholarshipData.dana}
 								</p>
 								<p
-									className="text-xs"
-									style={subtitleStyle}
+									className={`text-xs ${
+										dark ? "text-gray-400" : "text-gray-500"
+									}`}
 								>
 									Dana Tersalurkan
 								</p>
@@ -413,8 +411,9 @@ const SosialPage = () => {
 
 						{/* Footer text */}
 						<p
-							className="text-center text-sm"
-							style={subtitleStyle}
+							className={`text-center text-sm ${
+								dark ? "text-gray-400" : "text-gray-500"
+							}`}
 						>
 							Tahun Ajaran {scholarshipData.tahunAjaran}
 						</p>
@@ -422,12 +421,14 @@ const SosialPage = () => {
 
 					{/* Kalender Event Budaya */}
 					<div
-						className="rounded-xl shadow-sm p-6"
-						style={cardStyle}
+						className={`rounded-xl shadow-sm p-6 ${
+							dark ? "bg-slate-800 border border-slate-800" : "bg-white border border-white"
+						}`}
 					>
 						<h3
-							className="text-lg font-semibold mb-4"
-							style={textStyle}
+							className={`text-lg font-semibold mb-4 ${
+								dark ? "text-white" : "text-gray-800"
+							}`}
 						>
 							Kalender Event Budaya
 						</h3>
@@ -435,36 +436,34 @@ const SosialPage = () => {
 							{culturalEvents.map((event, index) => (
 								<div
 									key={index}
-									className="flex items-start gap-3 p-4 rounded-lg"
-									style={{
-										backgroundColor: dark ? "#334155" : "#F9FAFB",
-									}}
+									className={`flex items-start gap-3 p-4 rounded-lg ${
+										dark ? "bg-slate-700" : "bg-gray-50"
+									}`}
 								>
 									<div
-										className="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0"
-										style={{
-											backgroundColor: "#DBEAFE",
-											color: "#1E3A5F",
-										}}
+										className="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 bg-blue-100 text-blue-900"
 									>
 										<IconCalendarEvent size={20} />
 									</div>
 									<div className="flex-1">
 										<p
-											className="text-sm font-medium"
-											style={textStyle}
+											className={`text-sm font-medium ${
+												dark ? "text-white" : "text-gray-800"
+											}`}
 										>
 											{event.nama}
 										</p>
 										<p
-											className="text-xs mt-1"
-											style={subtitleStyle}
+											className={`text-xs mt-1 ${
+												dark ? "text-gray-400" : "text-gray-500"
+											}`}
 										>
 											{event.tanggal}
 										</p>
 										<p
-											className="text-xs mt-1"
-											style={subtitleStyle}
+											className={`text-xs mt-1 ${
+												dark ? "text-gray-400" : "text-gray-500"
+											}`}
 										>
 											Location: {event.lokasi}
 										</p>