wibu/desa-darmasaba
1
0
Fork 0
Code Issues Pull Requests 5 Actions Packages Projects Releases Wiki Activity

Add Fitur Status Operasional & Jadwal Kerja

Browse Source
This commit is contained in:
nico
2025-06-10 14:22:51 +08:00
parent 9e725e2eea
commit 9f66b037f9
1 changed files with 101 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
src/app/darmasaba/_com/main-page/landing-page/index.tsx
View File

@@ -13,8 +13,63 @@ import {
} from "@mantine/core"; } from "@mantine/core";
import ModuleView from "./ModuleView"; import ModuleView from "./ModuleView";
import SosmedView from "./SosmedView"; import SosmedView from "./SosmedView";
import { useEffect, useState } from "react";
const getDayOfWeek = () => {
const days = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
const today = new Date();
return days[today.getDay()];
}
const getCurrentTime = () => {
const now = new Date();
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
return `${hours}:${minutes}`;
}
const isWorkingHours = (currentTime: string): boolean => {
const [openTime, closeTime] = ['08:00', '16:00'];
const compareTimes = (time1: string, time2: string) => {
const [hour1, minute1] = time1.split(':').map(Number);
const [hour2, minute2] = time2.split(':').map(Number);
if (hour1 < hour2) return true;
if (hour1 > hour2) return false;
return minute1 <= minute2;
};
return compareTimes(currentTime, closeTime) && !compareTimes(currentTime, openTime);
}
const getWorkStatus = (day: string, currentTime: string): { status: string; message: string } => {
const workingDays = ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat'];
if (!workingDays.includes(day)) {
return {
status: 'Tutup',
message: 'Sabtu - Minggu'
}
}
const isOpen = isWorkingHours(currentTime)
return isOpen ? { status: 'Buka', message: '08:00 - 16:00' } : { status: 'Tutup', message: '08:00 - 16:00' };
}
function LandingPage() { function LandingPage() {
const [workStatus, setWorkStatus] = useState<{ status: string; message: string }>
({ status: '', message: '' });
useEffect(() => {
const updateWorkStatus = () => {
const day = getDayOfWeek();
const time = getCurrentTime();
const status = getWorkStatus(day, time);
setWorkStatus(status);
}
updateWorkStatus();
const intervalId = setInterval(updateWorkStatus, 60 * 1000);
return () => clearInterval(intervalId);
}, []);
return ( return (
<Stack bg={colors["Bg"]}> <Stack bg={colors["Bg"]}>
<Flex <Flex
@@ -135,61 +190,55 @@ function LandingPage() {
md: 6, md: 6,
}}> }}>
<Box> <Box>
<Text c={colors["white-1"]} fz={"sm"}> <Text c={colors["white-1"]} fz={"sm"}>
Jadwal Kerja Jadwal Kerja
</Text> </Text>
<Paper <Paper
w={{ base: "100%", sm: "100%", md: "auto" }} w={{ base: "100%", sm: "100%", md: "auto" }}
p={5} p={5}
bg={colors["white-1"]} bg={colors["white-1"]}
> >
<Flex justify={"space-between"} align={"center"}> <Flex justify={"space-between"} align={"center"}>
<Box> <Paper
<Text fz={"sm"}> w={{ base: "100%", sm: "100%", md: "auto" }}
Buka p={5}
</Text> bg={workStatus.status === 'Buka' ? colors["white-1"] : "red"}
<Text fw={"bold"} fz={"lg"}> >
08:00
</Text> <Box>
</Box> <Text fz="sm">
<Text fz={"lg"} fw={"bold"}>-</Text> {workStatus.status}
<Box> </Text>
<Text fz={"sm"}> <Text fw="bold" fz="lg">
Tutup {workStatus.message}
</Text> </Text>
<Text fw={"bold"} fz={"lg"}> </Box>
16:00 </Paper>
</Text> </Flex>
</Box> </Paper>
</Flex> </Box>
</Paper>
</Box>
</GridCol> </GridCol>
{/* Edit yang ini */}
<GridCol span={{ <GridCol span={{ base: 12, lg: 6, md: 6 }}>
base: 12, <Box>
lg: 6, <Text c={colors["white-1"]} fz={"sm"}>
md: 6, {new Intl.DateTimeFormat('id-ID', {
}}> weekday: 'long',
<Box> year: 'numeric',
<Text c={colors["white-1"]} fz={"sm"}> month: 'long',
Rabu, 10 Maret 2025 day: 'numeric'
</Text> }).format(new Date())}
<Paper </Text>
w={{ base: "100%", sm: "100%", md: "auto" }} <Paper bg={colors["white-1"]} p={10}>
p={5} <Text fz="sm" >
bg={colors["white-1"]} Status
>
<Box>
<Text fz={"sm"}>
Buka
</Text> </Text>
<Text fw={"bold"} fz={"lg"}> <Text fw="bold" fz="lg" >
Sabtu - Minggu {workStatus.status === 'Buka' ? 'Operasional' : 'Libur'}
</Text> </Text>
</Box> </Paper>
</Paper>
</Box> </Box>
</GridCol> </GridCol>
</Grid> </Grid>
</Paper> </Paper>