diff --git a/src/App.jsx b/src/App.jsx index 4872856..29ca72f 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -2,6 +2,7 @@ import React from 'react'; import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'; import SignIn from './pages/auth/SignIn'; import { ProtectedRoute } from './ProtectedRoute'; +import { UnprotectedRoute } from './UnprotectedRoute'; import NotFound from './pages/blank/NotFound'; import { getSessionData } from './components/Global/Formatter'; @@ -11,6 +12,10 @@ import Blank from './pages/blank/Blank'; // master import IndexDevice from './pages/master/device/IndexDevice'; +import Room from './pages/master/room/RoomManagement'; +import RoomBook from './pages/RoomBook'; + +// import MainLayout from './layout/MainLayout'; // Setting @@ -38,6 +43,11 @@ const App = () => { } /> )} + }> + } /> + } /> + + } /> }> } /> diff --git a/src/UnprotectedRoute.jsx b/src/UnprotectedRoute.jsx new file mode 100644 index 0000000..57e31c1 --- /dev/null +++ b/src/UnprotectedRoute.jsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { Navigate, Outlet } from 'react-router-dom'; +import MainLayout from './layout/MainLayout'; + +// import { getSessionData } from './components/Global/Formatter'; + +export const UnprotectedRoute = () => { + // const session = getSessionData(); + // console.log(session); + + // const isAuthenticated = session?.auth ?? false; + // if (!isAuthenticated) { + // return ; + // } + return ( + + + + ); +}; diff --git a/src/layout/LayoutLogo.jsx b/src/layout/LayoutLogo.jsx index 086db57..644c5ee 100644 --- a/src/layout/LayoutLogo.jsx +++ b/src/layout/LayoutLogo.jsx @@ -1,5 +1,5 @@ import { Image } from 'antd'; -import logoPiu from '../assets/freepik/LOGOPIU.png'; +// import logoPiu from '../assets/freepik/LOGOPIU.png'; import React from 'react'; const LayoutLogo = () => { @@ -50,7 +50,7 @@ const LayoutLogo = () => { zIndex: 2, }} > - logo { style={{ filter: 'drop-shadow(0 0 3px rgba(0, 0, 0, 0.2))', }} - /> + /> */} diff --git a/src/layout/LayoutSidebar.jsx b/src/layout/LayoutSidebar.jsx index 4589344..3ac00a9 100644 --- a/src/layout/LayoutSidebar.jsx +++ b/src/layout/LayoutSidebar.jsx @@ -5,16 +5,23 @@ import LayoutMenu from './LayoutMenu'; const { Sider } = Layout; const LayoutSidebar = () => { + const [collapsed, setCollapsed] = React.useState(false); return ( - { // console.log(broken); }} - onCollapse={(collapsed, type) => { - // console.log(collapsed, type); - }} + // trigger={null} + collapsible + collapsed={collapsed} + onCollapse={value => setCollapsed(value)} + // onCollapse={(collapsed, type) => { + // console.log(collapsed, type); + // }} > diff --git a/src/layout/MainLayout.jsx b/src/layout/MainLayout.jsx index 6d035f9..b2e758e 100644 --- a/src/layout/MainLayout.jsx +++ b/src/layout/MainLayout.jsx @@ -12,14 +12,17 @@ const MainLayout = ({ children }) => { token: { colorBgContainer, borderRadiusLG }, } = theme.useToken(); + console.log("children", children) + return ( + }} + > { + if (filterStatus === 'all') { + setFilteredRooms(rooms); + } else { + setFilteredRooms(rooms.filter(room => room.status === filterStatus)); + } + }, [filterStatus, rooms]); + + const handleFilterChange = (status) => { + setFilterStatus(status); + }; + + // Booking handler + const handleBookingRoom = (room) => { + setBookingRoom(room); + bookingForm.setFieldsValue({ + no_kamar: room.no_kamar, + room_price: room.tarif, + }); + setIsBookingModalVisible(true); + }; + + const handleBookingSubmit = (values) => { + console.log("Booking Data:", values); + message.success(`Booking for room ${values.no_kamar} saved!`); + setIsBookingModalVisible(false); + bookingForm.resetFields(); + setBookingRoom(null); + }; + + const handleBookingCancel = () => { + setIsBookingModalVisible(false); + bookingForm.resetFields(); + setBookingRoom(null); + }; + + // Get status color + const getStatusColor = (status) => { + switch (status) { + case 'ready': return 'green'; + case 'occupied': return 'red'; + case 'maintenance': return 'orange'; + case 'cleaning': return 'purple'; + default: return 'blue'; + } + }; + + const getStatusText = (status) => { + switch (status) { + case 'ready': return 'Ready'; + case 'occupied': return 'Occupied'; + case 'maintenance': return 'Maintenance'; + case 'cleaning': return 'Cleaning'; + default: return 'Unknown'; + } + }; + + return ( + + Hotel Room Management + + {/* Filter */} + + + Filter by Status: + {['all', 'ready', 'occupied', 'maintenance', 'cleaning'].map(status => ( + + ))} + + + + + {/* Room grid */} + + {filteredRooms.map(room => ( + + , + , + handleBookingRoom(room)} />, // 👈 Booking button + message.info('Card tapped!')} /> // 👈 Card button + ]} + > +
+ {room.no_kamar} + + {getStatusText(room.status)} + +
+ {room.tp_kamar} +
+
+ Rp {room.tarif.toLocaleString('id-ID')} +
+
+ + + ))} + + + {/* Booking Modal */} + +
+ + + + + + setFormData({ ...formData, name: e.target.value })} + /> + + + + + + + + + + + setFormData({ ...formData, noId: e.target.value })} + /> + + + + + + + + + + + + + + + + + + + + + + + setFormData({ ...formData, dateStart: value ? value.toISOString() : "" }) + } + className="w-1/2" + placeholder="Date Start" + /> + + + + + + setFormData({ ...formData, dateEnd: value ? value.toISOString() : "" }) + } + className="w-1/2" + placeholder="Date End" + disabledDate={(current) => + formData.dateStart ? current && current < dayjs(formData.dateStart) : false + } + /> + + + + + + + + + + + + + + `Rp ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')} + parser={value => value.replace(/Rp\s?|(,*)/g, '')} + /> + + + + + +
+ + + ); +}); + +export default RoomBook; diff --git a/src/pages/auth/SignIn.jsx b/src/pages/auth/SignIn.jsx index d2f0d33..98386ae 100644 --- a/src/pages/auth/SignIn.jsx +++ b/src/pages/auth/SignIn.jsx @@ -1,8 +1,8 @@ import { Flex, Input, Form, Button, Card, Space, Image } from 'antd'; import React from 'react'; import handleSignIn from '../../Utils/Auth/SignIn'; -import sypiu_ggcp from 'assets/sypiu_ggcp.jpg'; -import logo from 'assets/freepik/LOGOPIU.png'; +// import sypiu_ggcp from 'assets/sypiu_ggcp.jpg'; +// import logo from 'assets/freepik/LOGOPIU.png'; import { useNavigate } from 'react-router-dom'; import { NotifAlert } from '../../components/Global/ToastNotif'; import { decryptData } from '../../components/Global/Formatter'; @@ -101,7 +101,7 @@ const SignIn = () => { height: '100vh', // marginTop: '10vh', // backgroundImage: `url('https://via.placeholder.com/300')`, - backgroundImage: `url(${sypiu_ggcp})`, + // backgroundImage: `url(${sypiu_ggcp})`, backgroundSize: 'cover', backgroundPosition: 'center', }} @@ -112,14 +112,14 @@ const SignIn = () => { }} > - signin + /> */}
diff --git a/src/pages/blank/NotFound.jsx b/src/pages/blank/NotFound.jsx index 3cda2b0..e175242 100644 --- a/src/pages/blank/NotFound.jsx +++ b/src/pages/blank/NotFound.jsx @@ -1,6 +1,6 @@ import { Button, Typography } from 'antd'; import { Link } from 'react-router-dom'; -import ImgRobot from '../../assets/freepik/404.png'; +// import ImgRobot from '../../assets/freepik/404.png'; const { Title, Paragraph, Text } = Typography; @@ -42,7 +42,7 @@ const NotFound = () => { page. - 404 Not Found { width: '480px', marginBottom: '4vh', }} - /> + /> */} */} + */} + handleDeleteRoom(record.no_kamar)} + okText="Yes" + cancelText="No" + > + */} + + + ), + }, + ]; + + return ( +
+
+ Room Management + +
+ + + + {/* Add/Edit Room Modal */} + + + + + + + + + + + + + + + + + + + `Rp ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')} + parser={value => value.replace(/Rp\s?|(,*)/g, '')} + /> + + + + + `Rp ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')} + parser={value => value.replace(/Rp\s?|(,*)/g, '')} + /> + + + + + + + + `Rp ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')} + parser={value => value.replace(/Rp\s?|(,*)/g, '')} + /> + + + + + `Rp ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')} + parser={value => value.replace(/Rp\s?|(,*)/g, '')} + /> + + + + + +