diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 989b48c..a112e92 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -34,5 +34,5 @@ jobs: run: npm install # Step 4: Lint code - # - name: Lint code - # run: npm run lint \ No newline at end of file + - name: Lint code + run: npm run lint \ No newline at end of file diff --git a/README.md b/README.md index d5464d6..c857e67 100644 --- a/README.md +++ b/README.md @@ -1 +1,82 @@ -# admin-Panel + +# 🎛️ AirHopper Admin Panel + +AirHopper Admin Panel adalah aplikasi web yang dirancang untuk membantu administrator dalam mengelola data dan fitur sistem pemesanan tiket pesawat AirHopper. Panel ini memberikan antarmuka yang intuitif untuk mengelola maskapai penerbangan, rute, pengguna, dan laporan transaksi. + +## 🌟 Fitur Utama + +- **Manajemen Maskapai Penerbangan**: Tambah, ubah, dan hapus data maskapai penerbangan dengan mudah. +- **Manajemen Penerbangan**: Kelola rute dan jadwal penerbangan. +- **Manajemen Pengguna**: Atur pengguna, termasuk otorisasi dan peran. +- **Laporan dan Statistik**: Pantau performa dan statistik melalui laporan interaktif. +- **Media Upload**: Dukungan untuk mengunggah gambar maskapai dengan integrasi ImageKit. +- **Autentikasi Aman**: Menggunakan JWT untuk akses dan manajemen keamanan. + +## 🛠️ Teknologi yang Digunakan + +- **Frontend Framework**: TailwindCSS untuk styling. +- **View Engine**: Edge.js untuk rendering halaman dinamis. +- **JavaScript**: Menggunakan Alpine.js untuk interaktivitas ringan. +- **Express.js**: Framework backend untuk mendukung API dan server-side rendering. +- **DataTable.js**: Membuat tabel data yang responsif dan interaktif. +- **Axios dan jQuery**: Untuk konsumsi API dan interaksi DOM. +- **Multer & ImageKit**: Mendukung upload file dan manajemen media. + +## 🚀 Cara Menggunakan + +### Prasyarat + +1. Node.js (minimal versi 18.x). +2. Server backend API sudah berjalan (lihat [AirHopper Backend](https://github.com/AirHopper/BackEnd)). +3. Alat manajemen API (Postman atau browser). + +### Langkah Instalasi + +1. Clone repositori ini: + ```bash + git clone https://github.com/AirHopper/AdminPanel.git + ``` +2. Masuk ke direktori proyek: + ```bash + cd AdminPanel + ``` +3. Instal dependensi: + ```bash + npm install + ``` +4. Konfigurasikan file lingkungan `.env`: + ```env + API_URL="your-backend-api-url" + PORT=333 + HOST="0.0.0.0" + NODE_ENV=development + ``` +5. Jalankan server: + ```bash + npm start + ``` +6. Akses Admin Panel di: + ```bash + http://localhost:3333 + ``` +## 📄 Dokumentasi API + +Admin Panel ini bergantung pada API backend untuk pengelolaan data. Pastikan API backend Anda sudah tersedia dan berjalan. Dokumentasi API tersedia di: + +1. **Postman**: [Link Postman Collection](https://documenter.getpostman.com/view/33280373/2sAYBbf9a7) +2. **Swagger**: [Swagger API Docs](https://air-hopper-api.padek.tech/api-docs) + +## 👥 Tim Pengembang + +Admin Panel ini dikembangkan oleh tim AirHopper dari program Studi Independen Kampus Merdeka - Binar Academy. + +- **Backend**: + - **Juan Verrel Tanuwijaya** + - **Muhamad Royhan Fadhli** + - **Ahmad Subhan Daryhadi** + - **Bima Rizqy Ramadhan** +- **Frontend dan Admin Panel**: + - **Ridhwan Tsalasah Putra** + - **Ryan Nicholas Purba** + - **M. Zaky Pria Maulana** + - **Joe Ferdinan** diff --git a/public/css/app.css b/public/css/app.css index 898d688..9f98dc7 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -1077,6 +1077,10 @@ video { border-inline-start-width: 1px; } +.border-t-2 { + border-top-width: 2px; +} + .border-none { border-style: none; } @@ -1561,6 +1565,21 @@ video { color: rgb(133 77 14 / var(--tw-text-opacity, 1)); } +.text-green-500 { + --tw-text-opacity: 1; + color: rgb(34 197 94 / var(--tw-text-opacity, 1)); +} + +.text-green-700 { + --tw-text-opacity: 1; + color: rgb(21 128 61 / var(--tw-text-opacity, 1)); +} + +.text-red-700 { + --tw-text-opacity: 1; + color: rgb(185 28 28 / var(--tw-text-opacity, 1)); +} + .underline { text-decoration-line: underline; } @@ -1744,6 +1763,11 @@ video { background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1)); } +.hover\:bg-red-400:hover { + --tw-bg-opacity: 1; + background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1)); +} + .hover\:bg-opacity-80:hover { --tw-bg-opacity: 0.8; } @@ -1822,6 +1846,11 @@ video { background-color: rgb(254 240 138 / var(--tw-bg-opacity, 1)); } +.focus\:bg-red-200:focus { + --tw-bg-opacity: 1; + background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1)); +} + .focus\:bg-opacity-80:focus { --tw-bg-opacity: 0.8; } diff --git a/src/modules/airline/airline.controller.js b/src/modules/airline/airline.controller.js index f48d430..c713d83 100644 --- a/src/modules/airline/airline.controller.js +++ b/src/modules/airline/airline.controller.js @@ -28,7 +28,7 @@ export const listAirplanes = async (req, res, next) => { const { token } = req; const airlinesResponse = await axios.get(`${api}/api/v1/airlines/${code}`); - + const data = { api: api, token: token, diff --git a/src/modules/auth/auth.controller.js b/src/modules/auth/auth.controller.js index c4f2385..bcdf95c 100644 --- a/src/modules/auth/auth.controller.js +++ b/src/modules/auth/auth.controller.js @@ -1,6 +1,6 @@ import axios from 'axios'; -export const loginPage = async (req, res, next) => { +export const loginPage = async ( res, next) => { try { const api = process.env.API_URL; @@ -17,7 +17,7 @@ export const loginPage = async (req, res, next) => { } }; -export const login = async (req, res, next) => { +export const login = async (req, res) => { try { const api = process.env.API_URL; diff --git a/src/modules/tikcet/ticket.controller.js b/src/modules/tikcet/ticket.controller.js index e3d15b2..2834958 100644 --- a/src/modules/tikcet/ticket.controller.js +++ b/src/modules/tikcet/ticket.controller.js @@ -10,7 +10,7 @@ const formatRupiah = (value) => { export const index = async (req, res, next) => { try { const api = process.env.API_URL; - const token = req.cookies.token; + const {token} = req; const tiketResponse = await axios.get(`${api}/api/v1/tickets?limit=999999`); const airPortResponse = await axios.get(`${api}/api/v1/airports`); diff --git a/src/modules/user/user.controller.js b/src/modules/user/user.controller.js index 88e795c..54718aa 100644 --- a/src/modules/user/user.controller.js +++ b/src/modules/user/user.controller.js @@ -11,6 +11,9 @@ export const index = async (req, res, next) => { }, }); + const userData = usersResponse.data.data || []; + console.log({userData}); + const data = { token : token, api : api, diff --git a/src/resources/views/components/ui/sidebar.edge b/src/resources/views/components/ui/sidebar.edge index 2fe7976..735352f 100644 --- a/src/resources/views/components/ui/sidebar.edge +++ b/src/resources/views/components/ui/sidebar.edge @@ -95,13 +95,13 @@ Logout @end @slot('content') -
-

Apakah yakin mau keluar?

-
- - +
+

Are you sure you want to logout?

+
+ +
-
+
@end @end
diff --git a/src/resources/views/pages/airline/index.edge b/src/resources/views/pages/airline/index.edge index d1b081e..6d66de2 100644 --- a/src/resources/views/pages/airline/index.edge +++ b/src/resources/views/pages/airline/index.edge @@ -56,10 +56,47 @@ {{ airline.name }} {{ airline._count.Airplanes }} - {{-- Edit --}} - +
+ @component('components/ui/modal', { + title: 'Edit Airline', + buttonClass: 'shadow-md py-2 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-yellow-300 text-yellow-800 hover:bg-yellow-400 focus:outline-none focus:bg-yellow-200 disabled:opacity-50 disabled:pointer-events-none', + }) + @slot('header') + Edit + @end + @slot('content') +
+

Edit Airline

+ {{ airline.iataCode }} + +
+ {{-- --}} + +
+
+ + @end + @end + @component('components/ui/modal', { + title: 'Delete Airline', + buttonClass: 'shadow-md py-2 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-red-300 text-red-800 hover:bg-red-400 focus:outline-none focus:bg-red-200 disabled:opacity-50 disabled:pointer-events-none', + }) + @slot('header') + Delete + @end + @slot('content') +
+

Are you sure you want to delete this Airline?

+ +
+ + +
+
+ + @end + @end +
@end @@ -116,8 +153,38 @@ } }); }); + + }); + function deleteAirline(iataCode) { + $.ajax({ + url: '{{ api }}/api/v1/airlines/' + iataCode, + method: 'DELETE', + headers: { + 'Authorization': `Bearer ${token}` + }, + success: function (response) { + showToast("success", "Success", "Airline deleted successfully!"); + setTimeout(() => { + window.location.reload(); + }, 1000); + }, + error: function (xhr) { + if (xhr.responseJSON && xhr.responseJSON.errors) { + const errors = xhr.responseJSON.errors; + let errorMessages = ''; + errors.forEach(error => { + errorMessages += `${error.field}: ${error.message}\n`; + }); + showToast("error", "Error", errorMessages); + } else { + showToast("error", "Error", "An error occurred. Please try again."); + } + }, + }); + } + @endslot diff --git a/src/resources/views/pages/airline/listAirplanes.edge b/src/resources/views/pages/airline/listAirplanes.edge index 5dccddd..6274124 100644 --- a/src/resources/views/pages/airline/listAirplanes.edge +++ b/src/resources/views/pages/airline/listAirplanes.edge @@ -55,7 +55,6 @@ Name Type Price Per KM - Total Flights Action @@ -66,11 +65,48 @@ {{ data.name }} {{ data.type }} {{ data.pricePerKm }} - --- - - + +
+ @component('components/ui/modal', { + title: 'Edit AirPlane', + buttonClass: 'shadow-md py-2 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-yellow-300 text-yellow-800 hover:bg-yellow-400 focus:outline-none focus:bg-yellow-200 disabled:opacity-50 disabled:pointer-events-none', + }) + @slot('header') + Edit + @end + @slot('content') +
+

Edit Airplane

+ {{ data.id }} + +
+ {{-- --}} + +
+
+ + @end + @end + @component('components/ui/modal', { + title: 'Delete AirPlane', + buttonClass: 'shadow-md py-2 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-red-300 text-red-800 hover:bg-red-400 focus:outline-none focus:bg-red-200 disabled:opacity-50 disabled:pointer-events-none', + }) + @slot('header') + Delete + @end + @slot('content') +
+

Are you sure you want to delete this Airplane?

+ +
+ + +
+
+ + @end + @end +
@end @@ -134,6 +170,34 @@ }); }); + function deleteAirplane(id) { + $.ajax({ + url: '{{ api }}/api/v1/airplanes/' + id, + method: 'DELETE', + headers: { + 'Authorization': `Bearer ${token}` + }, + success: function (response) { + showToast("success", "Success", "Airplane deleted successfully!"); + setTimeout(() => { + window.location.reload(); + }, 1000); + }, + error: function (xhr) { + if (xhr.responseJSON && xhr.responseJSON.errors) { + const errors = xhr.responseJSON.errors; + let errorMessages = ''; + errors.forEach(error => { + errorMessages += `${error.field}: ${error.message}\n`; + }); + showToast("error", "Error", errorMessages); + } else { + showToast("error", "Error", "An error occurred. Please try again."); + } + }, + }); + } + @endslot diff --git a/src/resources/views/pages/airport/index.edge b/src/resources/views/pages/airport/index.edge index 509d358..57a780c 100644 --- a/src/resources/views/pages/airport/index.edge +++ b/src/resources/views/pages/airport/index.edge @@ -81,9 +81,48 @@ {{ airport.City ? airport.City.name : '-' }} {{ airport.City ? airport.City.country : '-' }} - +
+ @component('components/ui/modal', { + title: 'Edit Airport', + buttonClass: 'shadow-md py-2 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-yellow-300 text-yellow-800 hover:bg-yellow-400 focus:outline-none focus:bg-yellow-200 disabled:opacity-50 disabled:pointer-events-none', + }) + @slot('header') + Edit + @end + @slot('content') +
+

Edit Airport

+ {{ airport.iataCode }} + +
+ {{-- --}} + +
+
+ + @end + @end + @component('components/ui/modal', { + title: 'Delete Airport', + buttonClass: 'shadow-md py-2 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-red-300 text-red-800 hover:bg-red-400 focus:outline-none focus:bg-red-200 disabled:opacity-50 disabled:pointer-events-none', + }) + @slot('header') + Delete + @end + @slot('content') +
+

Are you sure you want to delete this Airport?

+

{{ airport.name }}

+ +
+ + +
+
+ + @end + @end +
@else @@ -145,6 +184,35 @@ }); }); + + function deleteAirport(iataCode) { + $.ajax({ + url: '{{ api }}/api/v1/airports/' + iataCode, + method: 'DELETE', + headers: { + 'Authorization': `Bearer ${token}` + }, + success: function (response) { + showToast("success", "Success", "Airport deleted successfully!"); + setTimeout(() => { + window.location.reload(); + }, 1000); + }, + error: function (xhr) { + if (xhr.responseJSON && xhr.responseJSON.errors) { + const errors = xhr.responseJSON.errors; + let errorMessages = ''; + errors.forEach(error => { + errorMessages += `${error.field}: ${error.message}\n`; + }); + showToast("error", "Error", errorMessages); + } else { + showToast("error", "Error", "An error occurred. Please try again."); + } + }, + }); + } + @endslot diff --git a/src/resources/views/pages/auth/login.edge b/src/resources/views/pages/auth/login.edge index ad86f80..e26ca89 100644 --- a/src/resources/views/pages/auth/login.edge +++ b/src/resources/views/pages/auth/login.edge @@ -135,7 +135,7 @@ setTimeout(() => { window.location.href = '/admin/dashboard'; - }, 2000); + }, 1000); }, error: function (xhr) { showToast("error", "Error", "Login failed. Please try again."); diff --git a/src/resources/views/pages/flight/create.edge b/src/resources/views/pages/flight/create.edge index fd301fe..656cbe3 100644 --- a/src/resources/views/pages/flight/create.edge +++ b/src/resources/views/pages/flight/create.edge @@ -67,6 +67,7 @@ @end @end + Can Multiple Selection Class @@ -175,8 +176,8 @@ const formData = { routeId: parseInt($('#routeId').val()), airplaneId: parseInt($('#airplaneId').val()), - departureTime: formatToISOString($('#departureTime').val()), - arrivalTime: formatToISOString($('#arrivalTime').val()), + departureTime: formatToISOString($('#departureTime').val(), 7), + arrivalTime: formatToISOString($('#arrivalTime').val(), 7), class: $('#classId').val(), isActive: true, baggage: parseInt($('#baggage').val()) || 20, // Default ke 20 jika kosong @@ -184,7 +185,7 @@ entertainment: $('#entertainment').is(':checked'), departureTerminalId: parseInt($('#departureTerminalId').val()), arrivalTerminalId: parseInt($('#arrivalTerminalId').val()), - discountId: $('#discountId').val() || null, + discountId: parseInt($('#discountId').val()) || null, }; console.log("Form Data:", formData); @@ -222,10 +223,12 @@ }); // Format waktu ke ISO string - function formatToISOString(dateTime) { + function formatToISOString(dateTime, hoursToAdd) { const date = new Date(dateTime); + date.setHours(date.getHours() + hoursToAdd); return date.toISOString(); } + }); diff --git a/src/resources/views/pages/flight/index.edge b/src/resources/views/pages/flight/index.edge index 578d53b..4853a2b 100644 --- a/src/resources/views/pages/flight/index.edge +++ b/src/resources/views/pages/flight/index.edge @@ -70,9 +70,27 @@ Detail - - Edit - + + @component('components/ui/modal', { + title: 'Delete Flight', + buttonClass: 'shadow-md py-2 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-red-300 text-red-800 hover:bg-red-400 focus:outline-none focus:bg-red-200 disabled:opacity-50 disabled:pointer-events-none', + }) + @slot('header') + Delete + @end + @slot('content') +
+

Are you sure you want to delete this flight?

+ +
+ + +
+
+ + @end + @end + @@ -87,6 +105,39 @@ + + @endslot @end \ No newline at end of file diff --git a/src/resources/views/pages/route/index.edge b/src/resources/views/pages/route/index.edge index 82815e5..d056912 100644 --- a/src/resources/views/pages/route/index.edge +++ b/src/resources/views/pages/route/index.edge @@ -38,7 +38,7 @@ @end -
+
@@ -59,9 +59,47 @@ @else @@ -121,8 +159,35 @@ }, }); }); -}); + }); + function deleteRoute(id) { + $.ajax({ + url: '{{ api }}/api/v1/routes/' + id, + method: 'DELETE', + headers: { + 'Authorization': `Bearer ${token}` + }, + success: function (response) { + showToast("success", "Success", "Route deleted successfully!"); + setTimeout(() => { + window.location.reload(); + }, 1000); + }, + error: function (xhr) { + if (xhr.responseJSON && xhr.responseJSON.errors) { + const errors = xhr.responseJSON.errors; + let errorMessages = ''; + errors.forEach(error => { + errorMessages += `${error.field}: ${error.message}\n`; + }); + showToast("error", "Error", errorMessages); + } else { + showToast("error", "Error", "An error occurred. Please try again."); + } + }, + }); + } @endslot diff --git a/src/resources/views/pages/ticket/create.edge b/src/resources/views/pages/ticket/create.edge index 053157d..83dc820 100644 --- a/src/resources/views/pages/ticket/create.edge +++ b/src/resources/views/pages/ticket/create.edge @@ -51,103 +51,121 @@ + -{{-- Selected Flights Display --}} - + @@ -93,6 +94,29 @@ Inactive @endif + @else @@ -106,6 +130,9 @@
{{ data.ArrivalAirport.name }} {{ data.distance }} - +
+ @component('components/ui/modal', { + title: 'Edit Route', + buttonClass: 'shadow-md py-1 px-4 inline-flex items-center gap-x-2 font-medium rounded-lg border border-transparent bg-yellow-300 text-yellow-800 hover:bg-yellow-400 focus:outline-none focus:bg-yellow-200 disabled:opacity-50 disabled:pointer-events-none', + }) + @slot('header') + Edit + @end + @slot('content') +
+

Edit Route

+ {{ data.id }} + +
+ {{-- --}} + +
+
+ + @end + @end + @component('components/ui/modal', { + title: 'Delete Route', + buttonClass: 'shadow-md py-1 px-4 inline-flex items-center gap-x-2 font-medium rounded-lg border border-transparent bg-red-300 text-red-800 hover:bg-red-400 focus:outline-none focus:bg-red-200 disabled:opacity-50 disabled:pointer-events-none', + }) + @slot('header') + Delete + @end + @slot('content') +
+

Are you sure you want to delete this Route?

+ +
+ + +
+
+ + @end + @end +
Email Role StatusAction
+
+ @component('components/ui/modal', { + title: 'Delete Account', + buttonClass: 'shadow-md py-2 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-red-300 text-red-800 hover:bg-red-400 focus:outline-none focus:bg-red-200 disabled:opacity-50 disabled:pointer-events-none', + }) + @slot('header') + Delete + @end + @slot('content') +
+

Are you sure you want to delete this Account?

+

{{ user.email }}

+
+ + +
+
+ + @end + @end +
+