nicoarya20/dashboard-noc-desa-darmasaba
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: production build CSS dan responsive layout untuk staging

Browse Source 
- 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>
This commit is contained in:
nico
2026-03-12 12:16:57 +08:00
parent 66d207c081
commit 947adc1537
12 changed files with 693 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Dockerfile
View File

@@ -29,7 +29,7 @@ RUN bun x prisma generate
# Generate API types
RUN bun run gen:api
# Build the application frontend
# Build the application frontend using our custom build script
RUN bun run build
# Stage 2: Runtime

2
package.json
View File

@@ -12,7 +12,7 @@
"test": "bun test __tests__/api",
"test:ui": "bun test --ui __tests__/api",
"test:e2e": "bun run build && playwright test",
"build": "bun build ./src/index.html --outdir=dist --sourcemap --target=browser --minify --define:process.env.NODE_ENV='\"production\"' --env='VITE_*' && cp -r public/* dist/ 2>/dev/null || true",
"build": "bun run scripts/build.ts",
"start": "NODE_ENV=production bun src/index.ts",
"seed": "bun prisma/seed.ts"
},

58
scripts/build.ts Normal file
View File

@@ -0,0 +1,58 @@
#!/usr/bin/env bun
/**
* Build script for production
* 1. Build CSS with PostCSS/Tailwind
* 2. Bundle JS with Bun (without CSS)
* 3. Replace CSS reference in HTML
*/
import { $ } from "bun";
import fs from "node:fs";
import postcss from "postcss";
import tailwindcss from "@tailwindcss/postcss";
import autoprefixer from "autoprefixer";
console.log("🔨 Starting production build...");
// Ensure dist directory exists
if (!fs.existsSync("./dist")) {
fs.mkdirSync("./dist", { recursive: true });
}
// Step 1: Build CSS with PostCSS
console.log("🎨 Building CSS...");
const cssInput = fs.readFileSync("./src/index.css", "utf-8");
const cssResult = await postcss([tailwindcss(), autoprefixer()]).process(
cssInput,
{
from: "./src/index.css",
to: "./dist/index.css",
},
);
fs.writeFileSync("./dist/index.css", cssResult.css);
console.log("✅ CSS built successfully!");
// Step 2: Build JS with Bun (build HTML too, we'll fix CSS link later)
console.log("📦 Bundling JavaScript...");
await $`bun build ./src/index.html --outdir=dist --sourcemap --target=browser --minify --define:process.env.NODE_ENV='"production"' --env='VITE_*'`;
// Step 3: Copy public assets
console.log("📁 Copying public assets...");
if (fs.existsSync("./public")) {
await $`cp -r public/* dist/ 2>/dev/null || true`;
}
// Step 4: Ensure HTML references the correct CSS
// Bun build might have renamed the CSS, we want to use our own index.css
console.log("🔧 Fixing HTML CSS reference...");
const htmlPath = "./dist/index.html";
if (fs.existsSync(htmlPath)) {
let html = fs.readFileSync(htmlPath, "utf-8");
// Replace any bundled CSS reference with our index.css
html = html.replace(/href="[^"]*\.css"/g, 'href="/index.css"');
fs.writeFileSync(htmlPath, html);
}
console.log("✅ Build completed successfully!");

80
src/components/bumdes-page.tsx
View File

@@ -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>

98
src/components/demografi-pekerjaan.tsx
View File

@@ -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">

65
src/components/jenna-analytic.tsx
View File

@@ -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"

82
src/components/keuangan-anggaran.tsx
View File

@@ -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

66
src/components/kinerja-divisi.tsx
View File

@@ -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

92
src/components/pengaduan-layanan-publik.tsx
View File

@@ -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"

263
src/components/sosial-page.tsx
View File

@@ -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>

99
src/index.css
View File

@@ -1 +1,100 @@
@import "tailwindcss";
/* Custom CSS variables for Tailwind */
:root {
/* Darmasaba Navy Colors */
--darmasaba-navy-50: #E1E4F2;
--darmasaba-navy-100: #B9C2DD;
--darmasaba-navy-200: #91A0C9;
--darmasaba-navy-300: #697EBA;
--darmasaba-navy-400: #4C6CAE;
--darmasaba-navy-500: #3B5B97;
--darmasaba-navy-600: #2C497F;
--darmasaba-navy-700: #1E3766;
--darmasaba-navy-800: #12264D;
--darmasaba-navy-900: #071833;
--darmasaba-navy: #1E3A5F;
/* Darmasaba Blue Colors */
--darmasaba-blue-50: #E3F0FF;
--darmasaba-blue-100: #B6D9FF;
--darmasaba-blue-200: #89C2FF;
--darmasaba-blue-300: #5CA9FF;
--darmasaba-blue-400: #3B8FFF;
--darmasaba-blue-500: #237AE0;
--darmasaba-blue-600: #1C6BBF;
--darmasaba-blue-700: #155BA0;
--darmasaba-blue-800: #0E4980;
--darmasaba-blue-900: #073260;
--darmasaba-blue: #3B82F6;
/* Darmasaba Success Colors */
--darmasaba-success-50: #E3F9E7;
--darmasaba-success-100: #BFEEC7;
--darmasaba-success-200: #9BD8A7;
--darmasaba-success-300: #77C387;
--darmasaba-success-400: #5DB572;
--darmasaba-success-500: #499A5D;
--darmasaba-success-600: #3C7F4A;
--darmasaba-success-700: #2F6438;
--darmasaba-success-800: #234926;
--darmasaba-success-900: #17301B;
--darmasaba-success: #22C55E;
/* Darmasaba Warning Colors */
--darmasaba-warning-50: #FFF8E1;
--darmasaba-warning-100: #FEE7B3;
--darmasaba-warning-200: #FDD785;
--darmasaba-warning-300: #FDC757;
--darmasaba-warning-400: #FBBF3B;
--darmasaba-warning-500: #E1AC23;
--darmasaba-warning-600: #C2981D;
--darmasaba-warning-700: #A38418;
--darmasaba-warning-800: #856F12;
--darmasaba-warning-900: #675A0D;
--darmasaba-warning: #FACC15;
/* Darmasaba Danger Colors */
--darmasaba-danger-50: #FFE3E3;
--darmasaba-danger-100: #FFBABA;
--darmasaba-danger-200: #FF9191;
--darmasaba-danger-300: #FF6868;
--darmasaba-danger-400: #FA4B4B;
--darmasaba-danger-500: #E03333;
--darmasaba-danger-600: #C22A2A;
--darmasaba-danger-700: #A32020;
--darmasaba-danger-800: #851616;
--darmasaba-danger-900: #670C0C;
--darmasaba-danger: #EF4444;
/* Darmasaba Background */
--darmasaba-background: #F5F8FB;
/* Standard colors for dark mode */
--slate-900: #0F172A;
--slate-800: #1E293B;
--slate-700: #334155;
--slate-600: #475569;
--gray-50: #F9FAFB;
--gray-100: #F3F4F6;
--gray-200: #E5E7EB;
--gray-600: #4B5563;
--gray-700: #1F2937;
--gray-400: #9CA3AF;
--gray-500: #6B7280;
--gray-800: #1F2937;
--blue-50: #EFF6FF;
--blue-100: #DBEAFE;
--blue-900: #1E3A5F;
--red-500: #EF4444;
--green-500: #22C55E;
}
/* Dark mode support */
[data-mantine-color-scheme="dark"] {
color-scheme: dark;
}
[data-mantine-color-scheme="light"] {
color-scheme: light;
}

10
tailwind.config.js
View File

@@ -1,11 +1,15 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
content: [
"./src/index.html",
"./public/**/*.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
colors: {
"darmasaba-navy": {
DEFAULT: "#1E3A5F", // Primary navy color
DEFAULT: "#1E3A5F",
50: "#E1E4F2",
100: "#B9C2DD",
200: "#91A0C9",
@@ -18,7 +22,7 @@ module.exports = {
900: "#071833",
},
"darmasaba-blue": {
DEFAULT: "#3B82F6", // Primary blue color
DEFAULT: "#3B82F6",
50: "#E3F0FF",
100: "#B6D9FF",
200: "#89C2FF",