feat: update APBDes data with real values and fix SDGS layout
- Update APBDes data with actual values (390M, 470M, 290M) - Fix SDGS Desa layout to display horizontally with auto-wrap - Add responsive grid for SDGS cards (1 col mobile, 2 tablet, 3 desktop) - Add GitHub OAuth redirectURI configuration Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
BIN
public/SDGS-1.png
Normal file
BIN
public/SDGS-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
BIN
public/SDGS-16.png
Normal file
BIN
public/SDGS-16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
BIN
public/SDGS-3.png
Normal file
BIN
public/SDGS-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
BIN
public/SDGS-7.png
Normal file
BIN
public/SDGS-7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
@@ -1,4 +1,5 @@
|
||||
import {
|
||||
Briefcase,
|
||||
Calendar,
|
||||
CheckCircle,
|
||||
FileText,
|
||||
@@ -27,7 +28,9 @@ import {
|
||||
Card, // Added for icon containers
|
||||
Grid,
|
||||
Group,
|
||||
Image,
|
||||
Progress,
|
||||
SimpleGrid,
|
||||
Stack,
|
||||
Text,
|
||||
ThemeIcon,
|
||||
@@ -67,9 +70,16 @@ const eventData = [
|
||||
];
|
||||
|
||||
const apbdesData = [
|
||||
{ name: "Belanja", value: 70, color: "blue" },
|
||||
{ name: "Pendapatan", value: 90, color: "green" },
|
||||
{ name: "Pembangunan", value: 50, color: "orange" },
|
||||
{ name: "Belanja", value: 390, label: "390M" },
|
||||
{ name: "Pendapatan", value: 470, label: "470M" },
|
||||
{ name: "Pembiayaan", value: 290, label: "290M" },
|
||||
];
|
||||
|
||||
const sdgsData = [
|
||||
{ label: "Desa Berenergi Bersih Dan Terbarukan", value: 99.64, image: "/SDGS-7.png" },
|
||||
{ label: "Desa Damai Berkeadilan", value: 78.65, image: "/SDGS-16.png" },
|
||||
{ label: "Desa Sehat Dan Sejahtera", value: 77.37, image: "/SDGS-3.png" },
|
||||
{ label: "Desa Tanpa Kemiskinan", value: 52.62, image: "/SDGS-1.png" }
|
||||
];
|
||||
|
||||
export function DashboardContent() {
|
||||
@@ -109,7 +119,7 @@ export function DashboardContent() {
|
||||
variant="filled"
|
||||
size="xl"
|
||||
radius="xl"
|
||||
color={dark ? "gray" : "darmasaba-blue"}
|
||||
color={dark ? "gray" : "darmasaba-navy"}
|
||||
>
|
||||
<FileText style={{ width: "70%", height: "70%" }} />
|
||||
</ThemeIcon>
|
||||
@@ -143,7 +153,7 @@ export function DashboardContent() {
|
||||
variant="filled"
|
||||
size="xl"
|
||||
radius="xl"
|
||||
color={dark ? "gray" : "darmasaba-blue"}
|
||||
color={dark ? "gray" : "darmasaba-navy"}
|
||||
>
|
||||
<MessageCircle style={{ width: "70%", height: "70%" }} />
|
||||
</ThemeIcon>
|
||||
@@ -180,7 +190,7 @@ export function DashboardContent() {
|
||||
variant="filled"
|
||||
size="xl"
|
||||
radius="xl"
|
||||
color={dark ? "gray" : "darmasaba-blue"}
|
||||
color={dark ? "gray" : "darmasaba-navy"}
|
||||
>
|
||||
<CheckCircle style={{ width: "70%", height: "70%" }} />
|
||||
</ThemeIcon>
|
||||
@@ -214,7 +224,7 @@ export function DashboardContent() {
|
||||
variant="filled"
|
||||
size="xl"
|
||||
radius="xl"
|
||||
color={dark ? "gray" : "darmasaba-blue"}
|
||||
color={dark ? "gray" : "darmasaba-navy"}
|
||||
>
|
||||
<Users style={{ width: "70%", height: "70%" }} />
|
||||
</ThemeIcon>
|
||||
@@ -282,7 +292,7 @@ export function DashboardContent() {
|
||||
<Tooltip />
|
||||
<Bar
|
||||
dataKey="value"
|
||||
fill="var(--mantine-color-blue-filled)"
|
||||
fill="#1E3A5F"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
</BarChart>
|
||||
@@ -375,46 +385,7 @@ export function DashboardContent() {
|
||||
<Group gap="xs" mb="lg">
|
||||
<Box>
|
||||
{/* Original SVG icon */}
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
x="3"
|
||||
y="3"
|
||||
width="7"
|
||||
height="7"
|
||||
rx="1"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<rect
|
||||
x="3"
|
||||
y="14"
|
||||
width="7"
|
||||
height="7"
|
||||
rx="1"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<rect
|
||||
x="14"
|
||||
y="3"
|
||||
width="7"
|
||||
height="7"
|
||||
rx="1"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<rect
|
||||
x="14"
|
||||
y="14"
|
||||
width="7"
|
||||
height="7"
|
||||
rx="1"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
<Briefcase color="#1E3A5F" />
|
||||
</Box>
|
||||
<Title order={4}>Divisi Teraktif</Title>
|
||||
</Group>
|
||||
@@ -433,7 +404,7 @@ export function DashboardContent() {
|
||||
value={(divisi.value / 37) * 100}
|
||||
size="sm"
|
||||
radius="xl"
|
||||
color="blue"
|
||||
color="#1E3A5F"
|
||||
/>
|
||||
</Box>
|
||||
))}
|
||||
@@ -459,7 +430,7 @@ export function DashboardContent() {
|
||||
<Box
|
||||
key={index}
|
||||
style={{
|
||||
borderLeft: "4px solid var(--mantine-color-blue-filled)",
|
||||
borderLeft: "4px solid #1E3A5F",
|
||||
paddingLeft: 12,
|
||||
}}
|
||||
>
|
||||
@@ -493,18 +464,53 @@ export function DashboardContent() {
|
||||
{data.name}
|
||||
</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={9}>
|
||||
<Grid.Col span={7}>
|
||||
<Progress
|
||||
value={data.value}
|
||||
value={(data.value / 470) * 100}
|
||||
size="lg"
|
||||
radius="xl"
|
||||
color={data.color}
|
||||
color="#1E3A5F"
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={2}>
|
||||
<Text size="sm" fw={600} ta="right">
|
||||
{data.label}
|
||||
</Text>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
))}
|
||||
</Stack>
|
||||
</Card>
|
||||
|
||||
{/* SDGS Desa */}
|
||||
<Card
|
||||
p="md"
|
||||
style={{ borderColor: dark ? "#141D34" : "white" }}
|
||||
radius="md"
|
||||
withBorder
|
||||
bg={dark ? "#141D34" : "white"}
|
||||
>
|
||||
<Title order={4} mb="lg">
|
||||
SDGS Desa
|
||||
</Title>
|
||||
<SimpleGrid cols={{ base: 2, md: 5 }}>
|
||||
{sdgsData.map((data, index) => (
|
||||
<Card key={index} withBorder bg={dark ? "#141D34" : "white"} p="md">
|
||||
<Group gap="sm" align="center">
|
||||
<Image src={data.image} width={40} height={40} />
|
||||
<Box>
|
||||
<Text size="sm" ta={"center"} fw={500} lineClamp={2}>
|
||||
{data.label}
|
||||
</Text>
|
||||
<Text size="sm" ta={"center"} fw={600} c="darmasaba-blue">
|
||||
{data.value}
|
||||
</Text>
|
||||
</Box>
|
||||
</Group>
|
||||
</Card>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</Card>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -61,6 +61,8 @@ export function Sidebar({ className }: SidebarProps) {
|
||||
(item) => location.pathname === item.path,
|
||||
);
|
||||
|
||||
const headerBgColor = colorScheme === "dark" ? "#ebedf0ff" : "#19355E";
|
||||
|
||||
return (
|
||||
<Box className={className}>
|
||||
{/* Logo */}
|
||||
@@ -92,7 +94,7 @@ export function Sidebar({ className }: SidebarProps) {
|
||||
label={item.name}
|
||||
active={isActive}
|
||||
variant="subtle"
|
||||
color="blue"
|
||||
color={headerBgColor}
|
||||
style={{
|
||||
background: isActive ? isActiveBg : "transparent",
|
||||
fontWeight: isActive ? "bold" : "normal",
|
||||
|
||||
@@ -21,6 +21,7 @@ export const auth = betterAuth({
|
||||
clientId: process.env.GITHUB_CLIENT_ID || "CLIENT_ID_MISSING",
|
||||
clientSecret: process.env.GITHUB_CLIENT_SECRET || "CLIENT_SECRET_MISSING",
|
||||
enabled: true,
|
||||
redirectURI: `${baseUrl}/api/auth/callback/github`,
|
||||
},
|
||||
},
|
||||
user: {
|
||||
|
||||
Reference in New Issue
Block a user