π¨ Sealog is an internal hotel management website built with React18, Supabase, JavaScript, Styled-components and many other technologies. It allows employees to manage everything about hotel bookings, cabins, and guests
β
@supabase/supabase-js ^2.32.0
βΒ Β
β
@tanstack/react-query ^4.33.0
βΒ Β
β
react-hook-form: ^7.45.4
βΒ Β
β
styled-components ^6.0.7
βΒ Β
β
recharts ^2.8.0
βΒ Β
β
react-router-dom: ^6.15.0
βΒ Β
β
vitejs: ^4.4.5
βΒ Β
β
eslint: ^8.45.0
βΒ Β
β
prettier: ^3.0.1
βΒ
Dashboard(Dark) | Dashboard(Light) |
---|---|
Booking List | Cabin List |
---|---|
New User | Edit Settings |
---|---|
Booking Detail | Check-in |
---|---|
Edit Account | Log in |
---|---|
This Hotel Management Application provides a comprehensive set of features for hotel employees to efficiently manage cabins, bookings, and guest information. It ensures secure user authentication and profile management while offering an intuitive user interface. The app also includes a dashboard with key insights and customizable application-wide settings, including support for dark mode.
- Hotel employees can log in to the application to perform tasks.
- New users can only be signed up within the application to ensure that only actual hotel employees can create accounts.
- Users can upload an avatar to personalize their profile.
- Users can change their name and password.
- The app provides a table view with all cabins.
- Displays cabin information, including cabin photo, name, capacity, price, and current discount.
- Users can update or delete existing cabins.
- Users can create new cabins, including the ability to upload a photo.
- The app provides a table view with all bookings.
- Displays booking information, including arrival and departure dates, booking status, paid amount, cabin details, and guest data.
- Booking status can be "unconfirmed," "checked in," or "checked out."
- The table view is filterable by booking status.
- Additional booking data includes the number of guests, number of nights, guest observations, and whether breakfast was booked and its price.
- Users can delete, check in, or check out a booking as the guest arrives.
- On check-in, users can accept payment outside the app and then confirm the payment within the app.
- Guests can add breakfast for the entire stay during check-in if they haven't already.
- Guest data contains full name, email, national ID, nationality, and a country flag for easy identification.
- The initial app screen serves as a dashboard displaying important information for the last 7, 30, or 90 days.
- Shows a list of guests checking in and out on the current day, and users can perform tasks related to these activities from the dashboard.
- Provides statistics on recent bookings, sales, check-ins, and occupancy rates.
- Includes a chart showing all daily hotel sales, distinguishing between "total" sales and "extras" sales (only breakfast at present).
- Displays statistics on stay durations, an important metric for the hotel.
- Users can define application-wide settings such as breakfast price, minimum and maximum nights per booking, and maximum guests per booking.
- The app includes a dark mode option for a different visual appearance and enhanced user experience in low-light conditions.
To use this application, follow the installation instructions in the provided documentation. Make sure to set up user accounts and configure application-wide settings as needed.
β¬οΈ Fetch latest source code from master branch.
git clone https://github.com/Khushal-ag/sealog.git
cd sealog
π§ Create .env.local
file & add your own SUPABASE_CONFIGS
as mentioned in .env.example
file.
VITE_SUPABASE_KEY = <Your Supabase Key>
VITE_SUPABASE_URL = <Your Supabase URL>
π» Run the Website with πCode or
Command Line: ( pnpm must be installed )
pnpm i
pnpm dev
π§ͺ Testing Credentials
Email: test@test.com
Password: testtest
.
βββ .env.example
βββ .eslintrc.js
βββ .gitignore
βββ .prettierrc.cjs
βββ index.html
βββ CODE_OF_CONDUCT.md
βββ CONTRIBUTING.md
βββ LICENSE
βββ package.json
βββ pnpm-lock.yaml
βββ prettier.config.cjs
βββ public
β βββ default-user.jpg
β βββ sealog-favicon.png
β βββ sealog-logo-dark.png
β βββ sealog-logo-light.png
βββ README.md
βββ src
β βββ App.jsx
β βββ context
β β βββ DarkModeContext.jsx
β β βββ useDarkMode.js
β βββ features
β β βββ authentication
β β β βββ LoginForm.jsx
β β β βββ Logout.jsx
β β β βββ SignupForm.jsx
β β β βββ UpdatePasswordForm.jsx
β β β βββ UpdateUserDataForm.jsx
β β β βββ useLogin.js
β β β βββ useLogout.js
β β β βββ UserAvatar.jsx
β β β βββ useSignup.js
β β β βββ useUpdateUser.js
β β β βββ useUser.js
β β βββ bookings
β β β βββ BookingDataBox.jsx
β β β βββ BookingDetail.jsx
β β β βββ BookingRow.jsx
β β β βββ BookingTable.jsx
β β β βββ BookingTableOperations.jsx
β β β βββ useBooking.js
β β β βββ useBookings.js
β β β βββ useDeleteBooking.js
β β βββ cabins
β β β βββ AddCabin.jsx
β β β βββ CabinRow.jsx
β β β βββ CabinTable.jsx
β β β βββ CabinTableOperations.jsx
β β β βββ CreateCabinForm.jsx
β β β βββ useCabins.js
β β β βββ useCreateCabin.js
β β β βββ useDeleteCabin.js
β β β βββ useEditCabin.js
β β βββ check-in-out
β β β βββ CheckinBooking.jsx
β β β βββ CheckoutButton.jsx
β β β βββ TodayActivity.jsx
β β β βββ TodayItem.jsx
β β β βββ useCheckin.js
β β β βββ useCheckout.js
β β β βββ useTodayActivity.js
β β βββ dashboard
β β β βββ DashboardBox.jsx
β β β βββ DashboardFilter.jsx
β β β βββ DashboardLayout.jsx
β β β βββ DurationChart.jsx
β β β βββ SalesChart.jsx
β β β βββ Stat.jsx
β β β βββ Stats.jsx
β β β βββ useRecentBookings.js
β β β βββ useRecentStays.js
β β βββ settings
β β βββ UpdateSettingsForm.jsx
β β βββ useSetting.js
β β βββ useUpdateSetting.js
β βββ hooks
β β βββ useLocalStorageState.js
β β βββ useMoveBack.js
β β βββ useOutsideClick.js
β βββ main.jsx
β βββ pages
β β βββ Account.jsx
β β βββ Booking.jsx
β β βββ Bookings.jsx
β β βββ Cabins.jsx
β β βββ Checkin.jsx
β β βββ Dashboard.jsx
β β βββ Login.jsx
β β βββ PageNotFound.jsx
β β βββ Settings.jsx
β β βββ Users.jsx
β βββ services
β β βββ apiAuth.js
β β βββ apiBookings.js
β β βββ apiCabins.js
β β βββ apiSettings.js
β β βββ supabase.js
β βββ styles
β β βββ GlobalStyles.js
β βββ ui
β β βββ AppLayout.jsx
β β βββ ButtonGroup.jsx
β β βββ ButtonIcon.jsx
β β βββ Button.jsx
β β βββ ButtonText.jsx
β β βββ Checkbox.jsx
β β βββ ConfirmDelete.jsx
β β βββ DarkModeToggle.jsx
β β βββ DataItem.jsx
β β βββ Empty.jsx
β β βββ ErrorFallback.jsx
β β βββ FileInput.jsx
β β βββ Filter.jsx
β β βββ Flag.jsx
β β βββ Form.jsx
β β βββ FormRow.jsx
β β βββ FormRowVertical.jsx
β β βββ Header.jsx
β β βββ HeaderMenu.jsx
β β βββ Heading.jsx
β β βββ Input.jsx
β β βββ Logo.jsx
β β βββ MainNav.jsx
β β βββ Menus.jsx
β β βββ Modal.jsx
β β βββ Pagination.jsx
β β βββ ProtectedRoute.jsx
β β βββ Row.jsx
β β βββ Select.jsx
β β βββ Sidebar.jsx
β β βββ SortBy.jsx
β β βββ Spinner.jsx
β β βββ SpinnerMini.jsx
β β βββ Table.jsx
β β βββ TableOperations.jsx
β β βββ Tag.jsx
β β βββ Textarea.jsx
β βββ utils
β βββ constants.js
β βββ helpers.js
βββ vite.config.js
Here are the schemas for the tables used in sealog, as stored in Supabase:
The cabins
table stores information about the cabins available in the hotel.
Field Name | Data Type | Description |
---|---|---|
id | Bigint (Generated) | Unique identifier |
created_at | Timestamp with Timezone | Timestamp of creation |
name | Text (Nullable) | Cabin name |
maxCapacity | Smallint (Nullable) | Maximum guest capacity |
regularPrice | Smallint (Nullable) | Regular price per night |
discount | Smallint (Nullable) | Current discount (if any) |
description | Text (Nullable) | Description of the cabin |
image | Text (Nullable) | URL of cabin photo |
The cabins
table is used to store information about the cabins available within the Sealog.
The bookings
table records information about guest bookings.
Field Name | Data Type | Description |
---|---|---|
id | Bigint (Generated) | Unique identifier |
created_at | Timestamp with Timezone | Timestamp of creation |
startDate | Timestamp without Timezone | Start date of the booking |
endDate | Timestamp without Timezone | End date of the booking |
numNights | Smallint (Nullable) | Number of nights for the booking |
numGuests | Smallint (Nullable) | Number of guests in the booking |
cabinPrice | Real (Nullable) | Price of the cabin |
extrasPrice | Real (Nullable) | Price of additional extras (if any) |
totalPrice | Real (Nullable) | Total price of the booking |
status | Text (Nullable) | Booking status (e.g., unconfirmed, checked in, checked out) |
hasBreakfast | Boolean (Nullable) | Indicates if breakfast is included |
isPaid | Boolean (Nullable) | Indicates if the booking is paid |
observations | Text (Nullable) | Additional observations or notes |
cabinId | Bigint (Nullable) | ID of the booked cabin (foreign key reference to cabins table) |
guestId | Bigint (Nullable) | ID of the guest making the booking (foreign key reference to guests table) |
The bookings
table is used to manage guest bookings within the Sealog.
The guests
table stores information about hotel guests.
Field Name | Data Type | Description |
---|---|---|
id | Bigint (Generated) | Unique identifier |
created_at | Timestamp with Timezone | Timestamp of creation |
fullName | Text (Nullable) | Full name of the guest |
Text (Nullable) | Guest's email address | |
nationalID | Text (Nullable) | National ID of the guest |
nationality | Text (Nullable) | Nationality of the guest |
countryFlag | Text (Nullable) | URL of the country flag |
The guests
table is used to store guest information within the Sealog.
The settings
table stores application-wide settings for the Sealog.
Field Name | Data Type | Description |
---|---|---|
id | Bigint (Generated) | Unique identifier |
created_at | Timestamp with Timezone | Timestamp of creation |
minBookingLength | Smallint (Nullable) | Minimum length of a booking in nights |
maxBookingLength | Smallint (Nullable) | Maximum length of a booking in nights |
maxGuestPerBooking | Smallint (Nullable) | Maximum number of guests allowed per booking |
breakfastPrice | Real (Nullable) | Price of breakfast per guest (if applicable) |
The settings
table is used to configure application-wide settings within the Sealog.
These tables are used to manage cabins, bookings, user accounts and hotel settings within the Sealog.
This Hotel Management Application is available under the GNU General Public License (GPL).
This application was developed by Khushal-ag.
- For feedback or support, please contact starkhush5@gmail.com.
- Remember to βοΈ Star this project on GitHub to show your support.
Note: It may take up to 24h for the contrib.rocks plugin to update because it's refreshed once a day.