https://github.com/khushal-ag/sealog
This Hotel Management Application provides a comprehensive set of features for hotel employees to efficiently manage cabins, bookings, and guest information.
https://github.com/khushal-ag/sealog
css full-stack hotel-management-system reactjs supabase
Last synced: 6 months ago
JSON representation
This Hotel Management Application provides a comprehensive set of features for hotel employees to efficiently manage cabins, bookings, and guest information.
- Host: GitHub
- URL: https://github.com/khushal-ag/sealog
- Owner: Khushal-ag
- License: gpl-3.0
- Created: 2023-08-14T06:17:25.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2025-04-11T18:41:12.000Z (6 months ago)
- Last Synced: 2025-04-11T22:09:41.955Z (6 months ago)
- Topics: css, full-stack, hotel-management-system, reactjs, supabase
- Language: JavaScript
- Homepage: https://sealog.khushalagarwal.me
- Size: 523 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
![][views] ![][stars] ![][forks] ![][issues] ![][license] ![][repo-size]
### 🏨 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
## ⚙️Dependencies Used
---
**[
**@supabase/supabase-js** ^2.32.0
][supabase]**
**[
**@tanstack/react-query** ^4.33.0
][query]**
**[
**react-hook-form:** ^7.45.4
][form]**
**[
**styled-components** ^6.0.7
][styled]**
**[
**recharts** ^2.8.0
][recharts]**
**[
**react-router-dom:** ^6.15.0
][router]**
**[
**vitejs:** ^4.4.5
][vite]**
**[
**eslint:** ^8.45.0
][eslint]**
**[
**prettier:** ^3.0.1
][prettier]**
## 📸 Screen Shots
| **Dashboard(Dark)** | **Dashboard(Light)** |
| ------------------------------------------------------------------- | -------------------------------------------------------------------- |
|  |  |
| **Booking List** | **Cabin List** |
| ----------------------------------------------------------------- | --------------------------------------------------------------- |
|  |  |
| **New User** | **Edit Settings** |
| ------------------------------------------------------------- | ------------------------------------------------------------------ |
|  |  |
| **Booking Detail** | **Check-in** |
| ------------------------------------------------------------------- | ------------------------------------------------------------- |
|  |  |
| **Edit Account** | **Log in** |
| ----------------------------------------------------------------- | ----------------------------------------------------------- |
|  |  |
## 👀 Overview
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.
## 🚀 Features
### 🔹 User Authentication and Signup
- 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.
### 🔹 User Profile Management
- Users can upload an avatar to personalize their profile.
- Users can change their name and password.
### 🔹 Cabin Management
- 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.
### 🔹 Booking Management
- 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.
### 🔹 Booking Operations
- 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 Management
- Guest data contains full name, email, national ID, nationality, and a country flag for easy identification.
### 🔹 Dashboard
- 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.
### 🔹 Application-wide Settings
- Users can define application-wide settings such as breakfast price, minimum and maximum nights per booking, and maximum guests per booking.
### 🌚 Dark Mode
- The app includes a dark mode option for a different visual appearance and enhanced user experience in low-light conditions.
## 📝 Usage
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.
## 🛠️ Getting Started
⬇️ **Fetch latest source code from master branch.**
```bash
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.**
```bash
VITE_SUPABASE_KEY =
VITE_SUPABASE_URL =
```
💻 **Run the Website with 🆚Code `or` Command Line: ( _pnpm_ must be installed )**
```bash
pnpm i
pnpm dev
```
🧪 **Testing Credentials**
```bash
Email: test@test.com
Password: testtest
```
## 📂 Directory Structure
```bash
.
├── .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
```
## 🍃 Supabase Table Schemas
Here are the schemas for the tables used in sealog, as stored in Supabase:
### 📊 Cabins Table
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.
### 📊 Bookings Table
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.
### 📊 Guests Table
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 |
| email | 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.
### 📊 Settings Table
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.
## 📜 License
This Hotel Management Application is available under the [GNU General Public License (GPL)](LICENSE).
## 👤 Author
This application was developed by [Khushal-ag](https://github.com/Khushal-ag).
## 📬 Feedback and Support
- For feedback or support, please contact [starkhush5@gmail.com](starkhush5@gmail.com).
- Remember to **⭐️ Star this project on GitHub** to show your support.
## ☢️ Contributors
[![][contributors]][contributors-graph]
_Note: It may take up to 24h for the [contrib.rocks][contrib-rocks] plugin to update because it's refreshed once a day._
[views]: https://komarev.com/ghpvc/?username=sealog&label=view%20counter&color=red&style=flat
[repo-size]: https://img.shields.io/github/repo-size/Khushal-ag/sealog
[issues]: https://img.shields.io/github/issues-raw/Khushal-ag/sealog
[license]: https://img.shields.io/github/license/Khushal-ag/sealog
[forks]: https://img.shields.io/github/forks/Khushal-ag/sealog?style=flat
[stars]: https://img.shields.io/github/stars/Khushal-ag/sealog
[contributors]: https://contrib.rocks/image?repo=Khushal-ag/sealog&max=500
[contributors-graph]: https://github.com/Khushal-ag/sealog/graphs/contributors
[contrib-rocks]: https://contrib.rocks/preview?repo=Khushal-ag%2Fsealog
[supabase]: https://supabase.com/docs
[query]: https://tanstack.com/query/latest/
[form]: https://react-hook-form.com/
[styled]: https://styled-components.com/
[recharts]: https://recharts.org/en-US/
[router]: https://reactrouter.com/en/main/start/overview
[eslint]: https://eslint.org/
[prettier]: https://prettier.io/
[vite]: https://vitejs.dev/