$1
" + ); + + return formattedText; + }; + + return ( +
+ {/* Header */}
+
+ );
+}
+
+export default AiAssistant;
diff --git a/Client/src/App.css b/Client/src/App.css
new file mode 100644
index 00000000..b9d355df
--- /dev/null
+++ b/Client/src/App.css
@@ -0,0 +1,42 @@
+#root {
+ max-width: 1280px;
+ margin: 0 auto;
+ padding: 2rem;
+ text-align: center;
+}
+
+.logo {
+ height: 6em;
+ padding: 1.5em;
+ will-change: filter;
+ transition: filter 300ms;
+}
+.logo:hover {
+ filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+ filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ a:nth-of-type(2) .logo {
+ animation: logo-spin infinite 20s linear;
+ }
+}
+
+.card {
+ padding: 2em;
+}
+
+.read-the-docs {
+ color: #888;
+}
diff --git a/Client/src/App.jsx b/Client/src/App.jsx
new file mode 100644
index 00000000..3ba81863
--- /dev/null
+++ b/Client/src/App.jsx
@@ -0,0 +1,56 @@
+
+import { BrowserRouter, Routes, Route, Outlet } from "react-router"
+import Home from "./Home"
+import Article from "./Articel"
+import Register from "./Register"
+import Login from "./Login"
+import { NavbarUser } from "./assets/Components/Navbar"
+import HomeUser from "./HomeUser"
+import MechanicById from "./MechanicById"
+import Order from "./order"
+import Payment from "./Payment"
+import OrderById from "./orderById"
+import GeminiAssistant from "./AiAssistant"
+import AiAssistant from "./AiAssistant"
+import { Provider } from 'react-redux'
+import { store } from './store'
+
+// import GeminiAssistant from './GeminiAssistant';
+
+
+
+function AuthenticatedLayout() {
+ return (
+
+
+
+ {/* Main Content */}
+
+
+ Motor Maintenance Assistant
++ Tanya apa saja tentang perawatan motor atau masalah pada kendaraan + Anda +
+
+
+
+ {/* Common Questions Card */}
+
+
+
+
+
+
+
+
+
+
+
+
+ -
+ {commonPrompts.map((preset, index) => (
+
+ ))}
+
+ {/* Search Form */}
+
+
+
+
+ {/* AI Response */}
+ {response && (
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ {/* History */}
+ {history.length > 0 && (
+
+
+
+
+
+
+
+
+
+ {/* Gunakan try-catch dengan fallback rendering */}
+ {(() => {
+ try {
+ return {response} ;
+ } catch (err) {
+ console.error("Error rendering Markdown:", err);
+ return (
+
+
+
+ );
+ }
+ })()}
+ + Catatan: Ada masalah rendering + format markdown. +
+{response}
+
+
+
+
+ )}
+
+ {/* Empty State */}
+ {!loading && !response && history.length === 0 && (
+
+
+
+
+
+
+
+
+
+ {history
+ .slice()
+ .reverse()
+ .map((item, index) => (
+
+
+
+ ))}
+ + +
+
+
+
+
+
+ {item.response}
+
+
+
+ )}
+
+
+ Asisten Perawatan Motor
++ Tanyakan seputar perawatan atau masalah sepeda motor Anda +
+
+
+ )
+}
+
+function App() {
+
+ return (
+
+
+ );
+ }
+
+ return (
+
+ Loading articles...
+
+ Loading articles...
+
+
+ );
+}
+
+export default Article;
\ No newline at end of file
diff --git a/Client/src/GeminiAssistant.jsx b/Client/src/GeminiAssistant.jsx
new file mode 100644
index 00000000..156102ca
--- /dev/null
+++ b/Client/src/GeminiAssistant.jsx
@@ -0,0 +1,185 @@
+// import { useState } from 'react';
+// import axios from 'axios';
+// import {
+// Container,
+// Typography,
+// TextField,
+// Button,
+// Paper,
+// Box,
+// CircularProgress,
+// Divider,
+// Card,
+// CardContent
+// } from '@mui/material';
+// import {ReactMarkdown} from 'react-markdown';
+// import SendIcon from '@mui/icons-material/Send';
+// import AutoFixHighIcon from '@mui/icons-material/AutoFixHigh';
+
+// const GeminiAssistant = () => {
+// const [prompt, setPrompt] = useState('');
+// const [response, setResponse] = useState('');
+// const [loading, setLoading] = useState(false);
+// const [error, setError] = useState('');
+// const [history, setHistory] = useState([]);
+
+// const API_URL = 'http://localhost:80/api/gemini';
+
+// const commonPrompts = [
+// "Bagaimana memeriksa dan mengganti oli motor?",
+// "Kenapa motor saya bunyi aneh saat digas?",
+// "Langkah-langkah mengganti busi motor",
+// "Penyebab motor sulit dinyalakan di pagi hari",
+// "Tips merawat rantai motor supaya awet"
+// ];
+
+// const handleSubmit = async (e) => {
+// e.preventDefault();
+
+// if (!prompt.trim()) {
+// setError('Please enter a prompt');
+// return;
+// }
+
+// setLoading(true);
+// setError('');
+
+// try {
+// const result = await axios.get(API_URL, {
+// params: { prompt }
+// });
+
+// const newResponse = result.data.data;
+// setResponse(newResponse);
+
+// // Add to history
+// setHistory((prev) => [
+// ...prev,
+// { prompt, response: newResponse, timestamp: new Date() }
+// ]);
+
+// // Clear prompt after successful submission
+// setPrompt('');
+// } catch (err) {
+// console.error('Error fetching Gemini response:', err);
+// setError(
+// err.response?.data?.message ||
+// 'Failed to get response from Gemini. Please try again.'
+// );
+// } finally {
+// setLoading(false);
+// }
+// };
+
+// return (
+//
+
+
+
+
+ {error && (
+
+
+
+
+
+
+
+
+ {isMechanic() && (
+
+ )}
+
+ {error}
+
+ )}
+
+ {/* Create article form */}
+ {createFormVisible && (
+
+
+ )}
+
+ {/* Articles list */}
+ {displayArticles.length > 0 ? (
+
+
+ Create New Article
+
+
+
+
+ {displayArticles.map(article => (
+
+ ) : (
+
+
+ ))}
+
+
+
+
+ {article.title}
+{article.content?.substring(0, 150)}...
+
+
+ Published on {formatDate(article.createdAt)}
+
+
+ {isMechanic() && (
+
+ )}
+
+
+
+ )}
+ No articles found
+
+// {response}
+//
+//
+ {/* Hero Section */}
+
+
+
+ {/* Main Content */}
+
+
+
+ {/* Footer */}
+
+
+
+
+
+ );
+};
+
+export default Home;
\ No newline at end of file
diff --git a/Client/src/HomeUser.jsx b/Client/src/HomeUser.jsx
new file mode 100644
index 00000000..2cfbd357
--- /dev/null
+++ b/Client/src/HomeUser.jsx
@@ -0,0 +1,145 @@
+import { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { Cards, CardsPackage } from "./assets/Components/cards";
+import {
+ fetchMechanics,
+ fetchPackages,
+ setSearchTerm
+} from "./feature/home.slice";
+
+const HomeUser = () => {
+ const dispatch = useDispatch();
+ const {
+ filteredMechanics,
+ packages,
+ searchTerm,
+ isLoadingMechanics,
+ error
+ } = useSelector((state) => state.mechanic);
+
+ // Fetch data on component mount
+ useEffect(() => {
+ dispatch(fetchMechanics());
+ dispatch(fetchPackages());
+ }, [dispatch]);
+
+ // Handle search input change
+ const handleSearchChange = (e) => {
+ dispatch(setSearchTerm(e.target.value));
+ };
+
+ return (
+ <>
+
+
+ + Find Your Expert Mechanic +
++ Connect with top-rated mechanics for all your vehicle needs. +
+
+ setSearchTerm(e.target.value)}
+ />
+
+
+ {error && (
+
+
+ {error}
+
+ )}
+
+ {isLoading
+ ? // Skeleton Loading
+ Array(6)
+ .fill()
+ .map((_, index) => (
+
+
+
+ ))
+ : // Data Cards
+ filteredData.length > 0 ? (
+ filteredData.map((item, index) => (
+
+
+
+
+
+
+
+
+
+
+ ))
+ ) : (
+
+
+ )}
+ No mechanics found.
+
+ {/* Hero Section */}
+
+
+
+
+
+
+
+
+
+ {/* Footer */}
+
+
+
+ );
+};
+
+export default HomeUser;
\ No newline at end of file
diff --git a/Client/src/Login.jsx b/Client/src/Login.jsx
new file mode 100644
index 00000000..c03fad74
--- /dev/null
+++ b/Client/src/Login.jsx
@@ -0,0 +1,378 @@
+import { useEffect, useState } from 'react';
+// Fix the import path
+import { NavLink, Navigate, useNavigate } from 'react-router';
+import axios from 'axios';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faEnvelope, faLock, faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
+
+export default function Login() {
+ const navigate = useNavigate();
+ const [email, setEmail] = useState('');
+ const [password, setPassword] = useState('');
+ const [errors, setErrors] = useState({});
+ const [isLoading, setIsLoading] = useState(false);
+ const [serverError, setServerError] = useState('');
+ const [showPassword, setShowPassword] = useState(false);
+ const [googleScriptLoaded, setGoogleScriptLoaded] = useState(false);
+
+ // Client-side validation with better error visibility
+ const validateForm = () => {
+ const newErrors = {};
+ if (!email) newErrors.email = 'Email is required';
+ else if (!/\S+@\S+\.\S+/.test(email)) newErrors.email = 'Invalid email format';
+ if (!password) newErrors.password = 'Password is required';
+ else if (password.length < 6) newErrors.password = 'Password must be at least 6 characters';
+
+ console.log("Validation errors:", newErrors); // Debug validation
+ setErrors(newErrors);
+ return Object.keys(newErrors).length === 0;
+ };
+
+ const handleLogin = async (event) => {
+ event.preventDefault();
+ setServerError('');
+ console.log("Login attempt with:", { email }); // Debug login attempt
+
+ if (!validateForm()) {
+ console.log("Form validation failed");
+ return;
+ }
+
+ setIsLoading(true);
+ try {
+ console.log("Sending login request to server");
+ const { data } = await axios.post('https://api.muhammadfawzy.web.id/login', {
+ email,
+ password,
+ });
+ console.log("Login successful, response:", data); // Log successful response
+ localStorage.setItem('access_token', data.access_token);
+ navigate('/');
+ } catch (err) {
+ console.error("Login error:", err.response || err); // More detailed error logging
+ setServerError(err.response?.data?.message || 'Login failed. Please check your credentials.');
+ setIsLoading(false);
+ }
+ };
+
+ async function handleCredentialResponse(response) {
+ console.log("Google login response received:", response);
+ try {
+ const { data } = await axios.post("https://api.muhammadfawzy.web.id/googleLogin", {
+ googleToken: response.credential,
+ });
+ console.log("Google login successful:", data);
+ localStorage.setItem('access_token', data.access_token);
+ navigate('/');
+ } catch (error) {
+ console.error("Google login error:", error.response || error);
+ setServerError(error.response?.data?.message || 'Google login failed');
+ }
+ }
+
+ useEffect(() => {
+ // Load Google script dynamically to ensure it's available
+ const loadGoogleScript = () => {
+ // Check if script already exists
+ if (document.getElementById('google-login')) {
+ return;
+ }
+
+ console.log("Loading Google sign-in script");
+ const script = document.createElement('script');
+ script.src = "https://accounts.google.com/gsi/client";
+ script.id = "google-login";
+ script.async = true;
+ script.onload = () => {
+ console.log("Google script loaded successfully");
+ setGoogleScriptLoaded(true);
+ };
+ script.onerror = () => {
+ console.error("Failed to load Google script");
+ };
+ document.body.appendChild(script);
+ };
+
+ loadGoogleScript();
+ }, []);
+
+ // Initialize Google sign-in when script is loaded
+ useEffect(() => {
+ if (!googleScriptLoaded) return;
+
+ if (window.google && window.google.accounts) {
+ console.log("Initializing Google accounts API");
+
+ // Use a specific client ID for debugging
+ const clientId = import.meta.env.VITE_GOOGLE_CLIENT_ID
+
+ console.log("Using client ID:", clientId);
+
+ window.google.accounts.id.initialize({
+ client_id: clientId,
+ callback: handleCredentialResponse
+ });
+
+ const buttonDiv = document.getElementById("buttonDiv");
+ if (buttonDiv) {
+ console.log("Rendering Google button");
+ window.google.accounts.id.renderButton(
+ buttonDiv,
+ { theme: "outline", size: "large", width: 240 }
+ );
+ } else {
+ console.error("Google button div not found");
+ }
+ } else {
+ console.error("Google accounts API not available");
+ }
+ }, [googleScriptLoaded]);
+
+ // Navigation Guard
+ if (localStorage.getItem('access_token')) {
+ console.log("User already logged in, redirecting to home");
+ return
+
+ + Find Solution With My Mechanic +
++ Connect with top-rated mechanics for all your vehicle needs. +
+
+
+
+ +
+
+
+ {/* Packages Section */}
+ -------- Package List --------
+
+
+
+ {packages.map((dataPackage) => (
+
+
+
+ ))}
+
+
+
+ {/* Main Content - Mechanics */}
+ + -------- Featured Mechanics -------- +
+
+ {error && (
+
+
+ {error}
+
+ )}
+
+ {isLoadingMechanics ? (
+ // Skeleton Loading
+ Array(6)
+ .fill()
+ .map((_, index) => (
+
+
+
+ ))
+ ) : // Data Cards
+ filteredMechanics.length > 0 ? (
+ filteredMechanics.map((item, index) => (
+
+
+
+
+
+
+
+
+
+
+ ))
+ ) : (
+
+
+ )}
+ No mechanics found.
+
+ {/* Hero Section */}
+
+
+
+ {/* Form Section */}
+
+
+
+ {/* Footer */}
+
+
+ {/* Styles remain the same */}
+
+
+ );
+}
\ No newline at end of file
diff --git a/Client/src/MechanicById.jsx b/Client/src/MechanicById.jsx
new file mode 100644
index 00000000..081c17ab
--- /dev/null
+++ b/Client/src/MechanicById.jsx
@@ -0,0 +1,287 @@
+import axios from "axios";
+import { useEffect, useState } from 'react';
+import { NavLink, useParams } from "react-router";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArrowLeft, faWrench, faStar } from '@fortawesome/free-solid-svg-icons';
+
+const MechanicById = () => {
+ const [data, setData] = useState({});
+ const [isLoading, setIsLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const { id } = useParams();
+
+ useEffect(() => {
+ async function fetchData() {
+ try {
+ setIsLoading(true);
+ const response = await axios.get(`https://api.muhammadfawzy.web.id/mechanics/${id}`,
+ {
+ headers: {
+ Authorization: `Bearer ${localStorage.getItem("access_token")}`,
+ },
+ }
+ );
+ console.log("API Response:", response.data); // Debugging: Log respons API
+ // Jika data dibungkus dalam properti 'data', gunakan response.data.data
+ const mechanicData = response.data.data || response.data;
+ setData(mechanicData);
+ console.log("Set Data:", mechanicData); // Debugging: Log data yang disimpan
+ setIsLoading(false);
+ } catch (err) {
+ console.error("Error fetching data:", err.response || err.message); // Debugging: Log error
+ setError("Failed to fetch mechanic details. Please try again later.");
+ setIsLoading(false);
+ }
+ }
+ fetchData();
+ }, [id]);
+
+ return (
+
+
+ + Welcome Back +
++ Log in to connect with top mechanics. +
+
+
+
+
+
+
+
+
+
+
+ Login
+ + {/* Server error display */} + {serverError && ( +
+ {serverError}
+
+ )}
+
+
+
+
+ Don't have an account?{' '}
+
+ {/* Hero Section */}
+
+
+
+ {/* Main Content */}
+
+
+
+ {/* Footer */}
+
+
+ {/* Inline Styles */}
+
+
+ );
+};
+
+export default MechanicById;
\ No newline at end of file
diff --git a/Client/src/Payment.jsx b/Client/src/Payment.jsx
new file mode 100644
index 00000000..eba3f2df
--- /dev/null
+++ b/Client/src/Payment.jsx
@@ -0,0 +1,338 @@
+import { useEffect } from 'react';
+import { useLocation, useNavigate } from 'react-router';
+import { useDispatch, useSelector } from 'react-redux';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCreditCard, faSpinner } from '@fortawesome/free-solid-svg-icons';
+import Swal from 'sweetalert2';
+import {
+ initiatePayment,
+ checkPaymentStatus,
+ deleteOrder,
+ setSnapScriptLoaded,
+ clearPaymentState,
+} from './feature/payment.slice';
+
+function Payment() {
+ const location = useLocation();
+ const navigate = useNavigate();
+ const dispatch = useDispatch();
+ const orderData = location.state?.orderData;
+
+ // Get state from Redux
+ const {
+ loading,
+ error,
+ snapToken,
+ paymentSuccess,
+ snapScriptLoaded
+ } = useSelector(state => state.payment);
+
+ // Clean up when component unmounts
+ useEffect(() => {
+ return () => {
+ dispatch(clearPaymentState());
+ };
+ }, [dispatch]);
+
+ // Check if order data exists
+ useEffect(() => {
+ if (!orderData) {
+ Swal.fire({
+ title: 'Error',
+ text: 'Order data not found',
+ icon: 'error',
+ confirmButtonColor: '#dc3545'
+ }).then(() => {
+ navigate('/getOrder');
+ });
+ }
+ }, [orderData, navigate]);
+
+ // Initiate payment when component mounts
+ useEffect(() => {
+ if (orderData) {
+ dispatch(initiatePayment(orderData.id));
+ }
+ }, [dispatch, orderData]);
+
+ // Load Midtrans Snap script when snapToken is available
+ useEffect(() => {
+ if (snapToken && !snapScriptLoaded) {
+ const snapScript = document.createElement('script');
+ snapScript.src = 'https://app.sandbox.midtrans.com/snap/snap.js';
+ snapScript.setAttribute('data-client-key', 'SB-Mid-client-9tl_GbhBlG5vgaVL');
+
+ snapScript.onload = () => {
+ dispatch(setSnapScriptLoaded(true));
+ };
+
+ snapScript.onerror = () => {
+ Swal.fire({
+ title: 'Error',
+ text: 'Failed to load payment gateway',
+ icon: 'error',
+ confirmButtonColor: '#dc3545'
+ });
+ };
+
+ document.head.appendChild(snapScript);
+ }
+ }, [snapToken, snapScriptLoaded, dispatch]);
+
+ // Handle successful payment
+ const handlePaymentSuccess = async () => {
+ // Show loading state
+ Swal.fire({
+ title: 'Processing Payment',
+ text: 'Please wait while we confirm your payment',
+ allowOutsideClick: false,
+ didOpen: () => {
+ Swal.showLoading();
+ }
+ });
+
+ // Delete the order
+ const resultAction = await dispatch(deleteOrder(orderData.id));
+
+ if (deleteOrder.fulfilled.match(resultAction)) {
+ Swal.fire({
+ title: 'Payment Successful!',
+ text: 'Your order has been processed',
+ icon: 'success',
+ confirmButtonText: 'View Orders',
+ confirmButtonColor: '#198754'
+ }).then(() => {
+ navigate('/getOrder', { state: { paymentSuccess: true } });
+ });
+ } else {
+ // Show warning but still navigate
+ Swal.fire({
+ title: 'Payment Successful',
+ text: 'Your payment was successful, but there was an issue updating your order. Our team will fix this for you.',
+ icon: 'warning',
+ confirmButtonText: 'View Orders',
+ confirmButtonColor: '#ffc107'
+ }).then(() => {
+ navigate('/getOrder', { state: { paymentSuccess: true } });
+ });
+ }
+ };
+
+ // Check status of a payment
+ const handleCheckStatus = async () => {
+ const resultAction = await dispatch(checkPaymentStatus(orderData.id));
+
+ if (checkPaymentStatus.fulfilled.match(resultAction)) {
+ const paymentStatus = resultAction.payload.paymentStatus;
+
+ if (paymentStatus === 'paid') {
+ try {
+ // Delete the order
+ await dispatch(deleteOrder(orderData.id));
+
+ Swal.fire({
+ title: 'Payment Verified',
+ text: 'Your payment has been successfully verified',
+ icon: 'success',
+ confirmButtonText: 'View Orders',
+ confirmButtonColor: '#198754'
+ }).then(() => {
+ navigate('/getOrder', { state: { paymentSuccess: true } });
+ });
+ } catch (deleteErr) {
+ console.error("Error deleting order after payment verification:", deleteErr);
+
+ // Still navigate even if there was an error
+ Swal.fire({
+ title: 'Payment Verified',
+ text: 'Your payment was verified, but there was an issue updating your order. Our team will fix this for you.',
+ icon: 'warning',
+ confirmButtonText: 'View Orders',
+ confirmButtonColor: '#ffc107'
+ }).then(() => {
+ navigate('/getOrder', { state: { paymentSuccess: true } });
+ });
+ }
+ }
+ } else {
+ // Show error with SweetAlert
+ Swal.fire({
+ title: 'Error',
+ text: 'Failed to check payment status',
+ icon: 'error',
+ confirmButtonText: 'Try Again',
+ confirmButtonColor: '#dc3545'
+ });
+ }
+ };
+
+ // Open payment popup
+ const openPaymentPopup = () => {
+ if (window.snap && snapToken && snapScriptLoaded) {
+ window.snap.pay(snapToken, {
+ onSuccess: function(result) {
+ handlePaymentSuccess();
+ },
+ onPending: function(result) {
+ Swal.fire({
+ title: 'Payment Pending',
+ text: 'Please complete your payment',
+ icon: 'info',
+ confirmButtonText: 'OK',
+ confirmButtonColor: '#0d6efd'
+ });
+ handleCheckStatus();
+ },
+ onError: function(result) {
+ Swal.fire({
+ title: 'Payment Failed',
+ text: 'Please try again or choose another payment method',
+ icon: 'error',
+ confirmButtonText: 'OK',
+ confirmButtonColor: '#dc3545'
+ });
+ console.error("Payment error:", result);
+ },
+ onClose: function() {
+ // Show toast notification when payment window is closed
+ const Toast = Swal.mixin({
+ toast: true,
+ position: 'top-end',
+ showConfirmButton: false,
+ timer: 3000,
+ timerProgressBar: true,
+ });
+
+ Toast.fire({
+ icon: 'info',
+ title: 'Checking payment status...'
+ });
+
+ handleCheckStatus();
+ }
+ });
+ } else {
+ // Show error with SweetAlert if snap is not available
+ Swal.fire({
+ title: 'Payment Gateway Not Ready',
+ text: 'Please wait for the payment system to load or refresh the page',
+ icon: 'warning',
+ confirmButtonText: 'Refresh',
+ confirmButtonColor: '#0d6efd'
+ }).then((result) => {
+ if (result.isConfirmed) {
+ window.location.reload();
+ }
+ });
+ }
+ };
+
+ // If payment is successful, redirect
+ useEffect(() => {
+ if (paymentSuccess) {
+ navigate('/getOrder', { state: { paymentSuccess: true } });
+ }
+ }, [paymentSuccess, navigate]);
+
+ return (
+
+
+ + Mechanic Details +
++ Learn more about our expert mechanics. +
+
+ {error && (
+
+
+ {error}
+
+ )}
+ {isLoading ? (
+ // Skeleton Loading
+
+
+ ) : !data || Object.keys(data).length === 0 ? (
+ // Handle kasus data kosong
+
+
+
+
+
+
+
+
+
+
+
+
+ ) : (
+ // Mechanic Details
+
+
+
+
+ No mechanic data available.
+
+
+ )}
+
+
+
+
+
+ 
+
+
+
+
+
+ {data.fullName || "N/A"}
+
+
+ Experience: {data.experience} +
+ )} + {data.location && ( ++ Location: {data.location} +
+ )} + {data.rating && ( +
+ {[...Array(Math.round(data.rating))].map((_, i) => (
+
+
+ );
+}
+
+export default Payment;
\ No newline at end of file
diff --git a/Client/src/Register.jsx b/Client/src/Register.jsx
new file mode 100644
index 00000000..ef2d04e8
--- /dev/null
+++ b/Client/src/Register.jsx
@@ -0,0 +1,297 @@
+import { useState } from 'react';
+import { NavLink, useNavigate } from 'react-router';
+import axios from 'axios';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faEnvelope, faLock, faMapMarkerAlt, faPhone } from '@fortawesome/free-solid-svg-icons';
+
+export default function Register() {
+ const navigate = useNavigate();
+ const [email, setEmail] = useState('');
+ const [password, setPassword] = useState('');
+ const [address, setAddress] = useState('');
+ const [phoneNumber, setPhoneNumber] = useState('');
+ const [errors, setErrors] = useState({});
+ const [isLoading, setIsLoading] = useState(false);
+ const [serverError, setServerError] = useState('');
+
+ // Client-side validation
+ const validateForm = () => {
+ const newErrors = {};
+ if (!email) newErrors.email = 'Email is required';
+ else if (!/\S+@\S+\.\S+/.test(email)) newErrors.email = 'Invalid email format';
+ if (!password) newErrors.password = 'Password is required';
+ else if (password.length < 6) newErrors.password = 'Password must be at least 6 characters';
+ if (!address) newErrors.address = 'Address is required';
+ if (!phoneNumber) newErrors.phoneNumber = 'Phone number is required';
+ else if (!/^\d{10,15}$/.test(phoneNumber)) newErrors.phoneNumber = 'Invalid phone number';
+ setErrors(newErrors);
+ return Object.keys(newErrors).length === 0;
+ };
+
+ const handleRegister = async (event) => {
+ event.preventDefault();
+ setServerError('');
+ if (!validateForm()) return;
+
+ setIsLoading(true);
+ try {
+ await axios.post('https://api.muhammadfawzy.web.id/register', {
+ email,
+ password,
+ address,
+ phoneNumber,
+ });
+ navigate('/login');
+ } catch (err) {
+ setServerError(err.response?.data?.message || 'Registration failed. Please try again.');
+ setIsLoading(false);
+ }
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {error && (
+
+
+ {error}
+
+ )}
+
+
+ {loading ? (
+
+
+
+
+ ) : (
+ <>
+ Initializing payment...
+Order Summary
+ {orderData && ( +
+
+ )}
+
+
+
+
+ Package:
+ {orderData.packageName}
+
+
+ Amount:
+
+ Rp {orderData.price?.toLocaleString('id-ID')}
+
+
+
+ Date:
+ {new Date(orderData.serviceDate).toLocaleDateString('id-ID')}
+
+ + Click the button above to open the payment window. You'll be + redirected after successful payment. +
+ + )} +
+
+
+
+ {/* Hero Section */}
+
+
+
+ {/* Form Section */}
+
+
+
+ {/* Footer */}
+
+
+ {/* Inline Styles */}
+
+
+ );
+}
\ No newline at end of file
diff --git a/Client/src/assets/Components/Navbar.jsx b/Client/src/assets/Components/Navbar.jsx
new file mode 100644
index 00000000..151a5258
--- /dev/null
+++ b/Client/src/assets/Components/Navbar.jsx
@@ -0,0 +1,110 @@
+import { NavLink, Link, useNavigate } from "react-router";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faRobot } from "@fortawesome/free-solid-svg-icons";
+
+export default function Navbar() {
+ return (
+
+ );
+}
+
+export function NavbarUser() {
+ const navigate = useNavigate();
+
+ return (
+
+ );
+}
diff --git a/Client/src/assets/Components/cards.jsx b/Client/src/assets/Components/cards.jsx
new file mode 100644
index 00000000..517a01a0
--- /dev/null
+++ b/Client/src/assets/Components/cards.jsx
@@ -0,0 +1,171 @@
+import { NavLink } from 'react-router';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faWrench } from '@fortawesome/free-solid-svg-icons';
+
+export function Cards({data}){
+ return(
+
+
+ + Join Mechanic Finder +
++ Create an account to connect with top mechanics. +
+
+
+
+
+
+
+
+
+
+
+ Register
+ {serverError && ( +
+ {serverError}
+
+ )}
+
+
+ Already have an account?{' '}
+
+
+ )
+}
+
+
+export function CardsPosts({data}) {
+ return (
+
+
+
+
+
+
+ 
+
+
+
+ View Details
+
+
+ {data.fullName}
+ {data.experience} + {data.location} +{data.speciality}
+
+
+ );
+}
+
+export function CardsPackage({dataPackage}){
+ return(
+
+
+
+ 
+
+
+
+ View Details
+
+
+ {data.title}
+ + Post by Mechanic: {data.Mechanic.fullName} +{data.content}
+
+
+ )
+}
diff --git a/Client/src/assets/react.svg b/Client/src/assets/react.svg
new file mode 100644
index 00000000..6c87de9b
--- /dev/null
+++ b/Client/src/assets/react.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/Client/src/components/Navbar.jsx b/Client/src/components/Navbar.jsx
new file mode 100644
index 00000000..e69de29b
diff --git a/Client/src/feature/article.slice.js b/Client/src/feature/article.slice.js
new file mode 100644
index 00000000..f9bd504c
--- /dev/null
+++ b/Client/src/feature/article.slice.js
@@ -0,0 +1,198 @@
+import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
+import axios from 'axios';
+
+// Fetch public articles (no authentication required)
+export const fetchPublicArticles = createAsyncThunk(
+ 'article/fetchPublicArticles',
+ async (_, { rejectWithValue }) => {
+ try {
+ const response = await axios.get('https://api.muhammadfawzy.web.id/pubposts');
+ return response.data;
+ } catch (error) {
+ return rejectWithValue(error.response?.data?.message || 'Failed to fetch articles');
+ }
+ }
+);
+
+// Fetch articles for authenticated users
+export const fetchUserArticles = createAsyncThunk(
+ 'article/fetchUserArticles',
+ async (_, { rejectWithValue }) => {
+ try {
+ const token = localStorage.getItem('access_token');
+ if (!token) {
+ return rejectWithValue('Authentication required');
+ }
+
+ const response = await axios.get('https://api.muhammadfawzy.web.id/postsUser', {
+ headers: {
+ Authorization: `Bearer ${token}`
+ }
+ });
+ return response.data;
+ } catch (error) {
+ return rejectWithValue(error.response?.data?.message || 'Failed to fetch articles');
+ }
+ }
+);
+
+// Create a new article (for mechanics)
+export const createArticle = createAsyncThunk(
+ 'article/createArticle',
+ async (articleData, { rejectWithValue }) => {
+ try {
+ const token = localStorage.getItem('access_token');
+ if (!token) {
+ return rejectWithValue('Authentication required');
+ }
+
+ const response = await axios.post('https://api.muhammadfawzy.web.id/posts', articleData, {
+ headers: {
+ Authorization: `Bearer ${token}`
+ }
+ });
+ return response.data;
+ } catch (error) {
+ return rejectWithValue(error.response?.data?.message || 'Failed to create article');
+ }
+ }
+);
+
+// Delete an article (for mechanics)
+export const deleteArticle = createAsyncThunk(
+ 'article/deleteArticle',
+ async (articleId, { rejectWithValue }) => {
+ try {
+ const token = localStorage.getItem('access_token');
+ if (!token) {
+ return rejectWithValue('Authentication required');
+ }
+
+ await axios.delete(`https://api.muhammadfawzy.web.id/posts/${articleId}`, {
+ headers: {
+ Authorization: `Bearer ${token}`
+ }
+ });
+ return articleId;
+ } catch (error) {
+ return rejectWithValue(error.response?.data?.message || 'Failed to delete article');
+ }
+ }
+);
+
+// Article slice
+const articleSlice = createSlice({
+ name: 'article',
+ initialState: {
+ articles: [],
+ filteredArticles: [],
+ loading: false,
+ error: null,
+ searchTerm: '',
+ createFormVisible: false,
+ createSuccess: false,
+ deleteSuccess: false
+ },
+ reducers: {
+ // Search articles
+ setSearchTerm: (state, action) => {
+ state.searchTerm = action.payload;
+ if (state.searchTerm) {
+ state.filteredArticles = state.articles.filter(article =>
+ article.title?.toLowerCase().includes(state.searchTerm.toLowerCase()) ||
+ article.content?.toLowerCase().includes(state.searchTerm.toLowerCase())
+ );
+ } else {
+ state.filteredArticles = state.articles;
+ }
+ },
+
+ // Toggle create form visibility
+ toggleCreateForm: (state) => {
+ state.createFormVisible = !state.createFormVisible;
+ state.createSuccess = false;
+ state.error = null;
+ },
+
+ // Reset success flags
+ resetSuccessFlags: (state) => {
+ state.createSuccess = false;
+ state.deleteSuccess = false;
+ state.error = null;
+ }
+ },
+ extraReducers: (builder) => {
+ builder
+ // Fetch public articles
+ .addCase(fetchPublicArticles.pending, (state) => {
+ state.loading = true;
+ state.error = null;
+ })
+ .addCase(fetchPublicArticles.fulfilled, (state, action) => {
+ state.loading = false;
+ state.articles = action.payload;
+ state.filteredArticles = action.payload;
+ })
+ .addCase(fetchPublicArticles.rejected, (state, action) => {
+ state.loading = false;
+ state.error = action.payload;
+ })
+
+ // Fetch user articles
+ .addCase(fetchUserArticles.pending, (state) => {
+ state.loading = true;
+ state.error = null;
+ })
+ .addCase(fetchUserArticles.fulfilled, (state, action) => {
+ state.loading = false;
+ state.articles = action.payload;
+ state.filteredArticles = action.payload;
+ })
+ .addCase(fetchUserArticles.rejected, (state, action) => {
+ state.loading = false;
+ state.error = action.payload;
+ })
+
+ // Create article
+ .addCase(createArticle.pending, (state) => {
+ state.loading = true;
+ state.error = null;
+ state.createSuccess = false;
+ })
+ .addCase(createArticle.fulfilled, (state, action) => {
+ state.loading = false;
+ state.articles.unshift(action.payload);
+ state.filteredArticles = state.filteredArticles.length > 0
+ ? [action.payload, ...state.filteredArticles]
+ : [action.payload, ...state.articles];
+ state.createSuccess = true;
+ state.createFormVisible = false;
+ })
+ .addCase(createArticle.rejected, (state, action) => {
+ state.loading = false;
+ state.error = action.payload;
+ state.createSuccess = false;
+ })
+
+ // Delete article
+ .addCase(deleteArticle.pending, (state) => {
+ state.loading = true;
+ state.error = null;
+ state.deleteSuccess = false;
+ })
+ .addCase(deleteArticle.fulfilled, (state, action) => {
+ state.loading = false;
+ state.articles = state.articles.filter(article => article.id !== action.payload);
+ state.filteredArticles = state.filteredArticles.filter(article => article.id !== action.payload);
+ state.deleteSuccess = true;
+ })
+ .addCase(deleteArticle.rejected, (state, action) => {
+ state.loading = false;
+ state.error = action.payload;
+ state.deleteSuccess = false;
+ });
+ }
+});
+
+export const { setSearchTerm, toggleCreateForm, resetSuccessFlags } = articleSlice.actions;
+export default articleSlice.reducer;
\ No newline at end of file
diff --git a/Client/src/feature/home.slice.js b/Client/src/feature/home.slice.js
new file mode 100644
index 00000000..4cc4c964
--- /dev/null
+++ b/Client/src/feature/home.slice.js
@@ -0,0 +1,97 @@
+import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
+import axios from 'axios';
+
+// Async thunk for fetching mechanics
+export const fetchMechanics = createAsyncThunk(
+ 'mechanic/fetchMechanics',
+ async (_, { rejectWithValue }) => {
+ try {
+ const response = await axios.get("http://localhost:80/");
+ return response.data;
+ } catch (error) {
+ return rejectWithValue(error.response?.data || "Failed to fetch mechanics");
+ }
+ }
+);
+
+// Async thunk for fetching packages
+export const fetchPackages = createAsyncThunk(
+ 'mechanic/fetchPackages',
+ async (_, { rejectWithValue }) => {
+ try {
+ const token = localStorage.getItem("access_token");
+ const response = await axios.get("https://api.muhammadfawzy.web.id/packages", {
+ headers: {
+ Authorization: `Bearer ${token}`,
+ },
+ });
+ return response.data;
+ } catch (error) {
+ return rejectWithValue(error.response?.data || "Failed to fetch packages");
+ }
+ }
+);
+
+// Slice definition
+export const mechanicSlice = createSlice({
+ name: 'mechanic',
+ initialState: {
+ mechanics: [],
+ filteredMechanics: [],
+ packages: [],
+ searchTerm: '',
+ isLoadingMechanics: false,
+ isLoadingPackages: false,
+ error: null
+ },
+ reducers: {
+ setSearchTerm: (state, action) => {
+ state.searchTerm = action.payload;
+
+ // Filter mechanics based on search term
+ state.filteredMechanics = state.mechanics.filter(
+ (item) =>
+ item.fullName.toLowerCase().includes(state.searchTerm.toLowerCase()) ||
+ item.speciality.toLowerCase().includes(state.searchTerm.toLowerCase()) ||
+ item.location.toLowerCase().includes(state.searchTerm.toLowerCase())
+ );
+ },
+ clearError: (state) => {
+ state.error = null;
+ }
+ },
+ extraReducers: (builder) => {
+ // Handle mechanics fetch
+ builder
+ .addCase(fetchMechanics.pending, (state) => {
+ state.isLoadingMechanics = true;
+ state.error = null;
+ })
+ .addCase(fetchMechanics.fulfilled, (state, action) => {
+ state.isLoadingMechanics = false;
+ state.mechanics = action.payload;
+ state.filteredMechanics = action.payload;
+ })
+ .addCase(fetchMechanics.rejected, (state, action) => {
+ state.isLoadingMechanics = false;
+ state.error = action.payload || "Failed to fetch mechanics. Please try again.";
+ })
+
+ // Handle packages fetch
+ .addCase(fetchPackages.pending, (state) => {
+ state.isLoadingPackages = true;
+ })
+ .addCase(fetchPackages.fulfilled, (state, action) => {
+ state.isLoadingPackages = false;
+ state.packages = action.payload;
+ })
+ .addCase(fetchPackages.rejected, (state, action) => {
+ state.isLoadingPackages = false;
+ state.error = action.payload || "Failed to fetch packages. Please try again.";
+ });
+ }
+});
+
+// Export actions and reducer
+export const { setSearchTerm, clearError } = mechanicSlice.actions;
+export default mechanicSlice.reducer;
\ No newline at end of file
diff --git a/Client/src/feature/order.slice.js b/Client/src/feature/order.slice.js
new file mode 100644
index 00000000..7ab4d00f
--- /dev/null
+++ b/Client/src/feature/order.slice.js
@@ -0,0 +1,132 @@
+import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
+import axios from 'axios';
+import { faCheck, faWrench, faOilCan, faBolt } from "@fortawesome/free-solid-svg-icons";
+
+// Predefined service packages
+const initialServicePackages = [
+ {
+ id: 1,
+ namePackage: "Full Service",
+ description: "Complete vehicle checkup including engine, transmission, brakes, and electrical systems",
+ price: 500_000,
+ imgUrl: "https://images.unsplash.com/photo-1486684228390-9f819d87e6b6?q=80&w=2070&auto=format&fit=crop",
+ icon: faWrench,
+ PackageId: 1
+ },
+ {
+ id: 2,
+ namePackage: "Daily Service",
+ description: "Basic maintenance service for everyday vehicle performance",
+ price: 150_000,
+ imgUrl: "https://images.unsplash.com/photo-1487754180451-c456f719a1fc?q=80&w=2070&auto=format&fit=crop",
+ icon: faCheck,
+ PackageId: 2
+ },
+ {
+ id: 3,
+ namePackage: "Change Oil",
+ description: "Oil change service with premium quality oil and filter replacement",
+ price: 200_000,
+ imgUrl: "https://images.unsplash.com/photo-1601028918541-a808527eec98?q=80&w=2070&auto=format&fit=crop",
+ icon: faOilCan,
+ PackageId: 3
+ },
+ {
+ id: 4,
+ namePackage: "Electrical Service",
+ description: "Comprehensive electrical system diagnosis and repair",
+ price: 350_000,
+ imgUrl: "https://images.unsplash.com/photo-1565043589221-23593a91389e?q=80&w=2070&auto=format&fit=crop",
+ icon: faBolt,
+ PackageId: 4
+ }
+];
+
+// Async thunk for creating orders
+export const createOrder = createAsyncThunk(
+ 'order/createOrder',
+ async (orderData, { rejectWithValue }) => {
+ try {
+ const token = localStorage.getItem("access_token");
+ const response = await axios.post(
+ "https://api.muhammadfawzy.web.id/orders",
+ orderData,
+ {
+ headers: {
+ Authorization: `Bearer ${token}`,
+ },
+ }
+ );
+ return response.data;
+ } catch (error) {
+ return rejectWithValue(error.response?.data?.message || "Failed to create booking");
+ }
+ }
+);
+
+// Order slice
+export const orderSlice = createSlice({
+ name: 'order',
+ initialState: {
+ servicePackages: initialServicePackages,
+ selectedPackage: null,
+ orderDate: "",
+ orderNote: "",
+ loading: false,
+ error: null,
+ orderCreated: null
+ },
+ reducers: {
+ // Select package
+ selectPackage: (state, action) => {
+ state.selectedPackage = action.payload;
+ },
+ // Set order date
+ setOrderDate: (state, action) => {
+ state.orderDate = action.payload;
+ },
+ // Set order note
+ setOrderNote: (state, action) => {
+ state.orderNote = action.payload;
+ },
+ // Reset order form
+ resetOrderForm: (state) => {
+ state.selectedPackage = null;
+ state.orderDate = "";
+ state.orderNote = "";
+ state.error = null;
+ state.orderCreated = null;
+ },
+ // Clear error
+ clearError: (state) => {
+ state.error = null;
+ }
+ },
+ extraReducers: (builder) => {
+ builder
+ // Create order
+ .addCase(createOrder.pending, (state) => {
+ state.loading = true;
+ state.error = null;
+ })
+ .addCase(createOrder.fulfilled, (state, action) => {
+ state.loading = false;
+ state.orderCreated = action.payload;
+ })
+ .addCase(createOrder.rejected, (state, action) => {
+ state.loading = false;
+ state.error = action.payload || "Failed to create booking";
+ });
+ }
+});
+
+// Export actions and reducer
+export const {
+ selectPackage,
+ setOrderDate,
+ setOrderNote,
+ resetOrderForm,
+ clearError
+} = orderSlice.actions;
+
+export default orderSlice.reducer;
\ No newline at end of file
diff --git a/Client/src/feature/orderById.slice.js b/Client/src/feature/orderById.slice.js
new file mode 100644
index 00000000..8c29155b
--- /dev/null
+++ b/Client/src/feature/orderById.slice.js
@@ -0,0 +1,138 @@
+import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
+import axios from 'axios';
+
+// Fetch all orders
+export const fetchOrders = createAsyncThunk(
+ 'orderById/fetchOrders',
+ async (_, { rejectWithValue }) => {
+ try {
+ const token = localStorage.getItem("access_token");
+
+ if (!token) {
+ return rejectWithValue("Authentication required. Please log in.");
+ }
+
+ const response = await axios.get(
+ `https://api.muhammadfawzy.web.id/orders`,
+ {
+ headers: {
+ Authorization: `Bearer ${token}`
+ }
+ }
+ );
+
+ return response.data;
+ } catch (error) {
+ return rejectWithValue(error.response?.data?.message || "Failed to load orders.");
+ }
+ }
+);
+
+// Delete an order
+export const deleteOrder = createAsyncThunk(
+ 'orderById/deleteOrder',
+ async (orderId, { rejectWithValue }) => {
+ try {
+ const token = localStorage.getItem("access_token");
+ await axios.delete(
+ `https://api.muhammadfawzy.web.id/orders/${orderId}`,
+ {
+ headers: {
+ Authorization: `Bearer ${token}`
+ }
+ }
+ );
+ return orderId;
+ } catch (error) {
+ return rejectWithValue(error.response?.data?.message || "Failed to delete order");
+ }
+ }
+);
+
+// Complete an order
+export const completeOrder = createAsyncThunk(
+ 'orderById/completeOrder',
+ async (orderId, { rejectWithValue }) => {
+ try {
+ const token = localStorage.getItem("access_token");
+ await axios.post(
+ `https://api.muhammadfawzy.web.id/orders/complete/${orderId}`,
+ {},
+ {
+ headers: {
+ Authorization: `Bearer ${token}`
+ }
+ }
+ );
+ return orderId;
+ } catch (error) {
+ return rejectWithValue(error.response?.data?.message || "Failed to complete order");
+ }
+ }
+);
+
+// Create the slice
+const orderByIdSlice = createSlice({
+ name: 'orderById',
+ initialState: {
+ orders: [],
+ loading: false,
+ error: null
+ },
+ reducers: {
+ clearError: (state) => {
+ state.error = null;
+ }
+ },
+ extraReducers: (builder) => {
+ builder
+ // Fetch orders
+ .addCase(fetchOrders.pending, (state) => {
+ state.loading = true;
+ state.error = null;
+ })
+ .addCase(fetchOrders.fulfilled, (state, action) => {
+ state.loading = false;
+ state.orders = action.payload;
+ })
+ .addCase(fetchOrders.rejected, (state, action) => {
+ state.loading = false;
+ state.error = action.payload;
+ })
+
+ // Delete order
+ .addCase(deleteOrder.pending, (state) => {
+ state.loading = true;
+ state.error = null;
+ })
+ .addCase(deleteOrder.fulfilled, (state, action) => {
+ state.loading = false;
+ state.orders = state.orders.filter(order => order.id !== action.payload);
+ })
+ .addCase(deleteOrder.rejected, (state, action) => {
+ state.loading = false;
+ state.error = action.payload;
+ })
+
+ // Complete order
+ .addCase(completeOrder.pending, (state) => {
+ state.loading = true;
+ state.error = null;
+ })
+ .addCase(completeOrder.fulfilled, (state, action) => {
+ state.loading = false;
+ state.orders = state.orders.map(order =>
+ order.id === action.payload
+ ? { ...order, status: "completed" }
+ : order
+ );
+ })
+ .addCase(completeOrder.rejected, (state, action) => {
+ state.loading = false;
+ state.error = action.payload;
+ })
+ }
+});
+
+export const { clearError } = orderByIdSlice.actions;
+export default orderByIdSlice.reducer;
\ No newline at end of file
diff --git a/Client/src/feature/payment.slice.js b/Client/src/feature/payment.slice.js
new file mode 100644
index 00000000..c8136d2e
--- /dev/null
+++ b/Client/src/feature/payment.slice.js
@@ -0,0 +1,156 @@
+import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
+import axios from 'axios';
+
+// Define base URL for all API requests
+const BASE_URL = 'https://api.muhammadfawzy.web.id'; // Use local development server
+
+// Initiate payment with Midtrans
+export const initiatePayment = createAsyncThunk(
+ 'payment/initiatePayment',
+ async (orderId, { rejectWithValue }) => {
+ try {
+ console.log('Initiating payment for order:', orderId);
+ const token = localStorage.getItem('access_token');
+ const response = await axios.post(
+ `${BASE_URL}/payment/initiate`,
+ { orderId },
+ {
+ headers: {
+ Authorization: `Bearer ${token}`,
+ },
+ }
+ );
+ console.log('Payment initiation response:', response.data);
+ return response.data;
+ } catch (error) {
+ console.error('Payment initiation error:', error);
+ return rejectWithValue(
+ error.response?.data?.message ||
+ 'Failed to initiate payment. Please try again later.'
+ );
+ }
+ }
+);
+
+// Check payment status
+export const checkPaymentStatus = createAsyncThunk(
+ 'payment/checkPaymentStatus',
+ async (orderId, { rejectWithValue }) => {
+ try {
+ const token = localStorage.getItem('access_token');
+ const response = await axios.get(
+ `${BASE_URL}/orders/${orderId}/payment-status`,
+ {
+ headers: {
+ Authorization: `Bearer ${token}`,
+ },
+ }
+ );
+ return response.data;
+ } catch (error) {
+ return rejectWithValue(error.response?.data?.message || 'Failed to check payment status');
+ }
+ }
+);
+
+// Delete order after successful payment
+export const deleteOrder = createAsyncThunk(
+ 'payment/deleteOrder',
+ async (orderId, { rejectWithValue }) => {
+ try {
+ const token = localStorage.getItem('access_token');
+ await axios.delete(`${BASE_URL}/orders/${orderId}`, {
+ headers: {
+ Authorization: `Bearer ${token}`,
+ },
+ });
+ return orderId;
+ } catch (error) {
+ return rejectWithValue(error.response?.data?.message || 'Failed to process payment completion');
+ }
+ }
+);
+
+// Payment slice
+const paymentSlice = createSlice({
+ name: 'payment',
+ initialState: {
+ loading: false,
+ error: null,
+ snapToken: null,
+ transactionId: null,
+ paymentStatus: null,
+ paymentSuccess: false,
+ snapScriptLoaded: false
+ },
+ reducers: {
+ setSnapScriptLoaded: (state, action) => {
+ state.snapScriptLoaded = action.payload;
+ },
+ clearPaymentState: (state) => {
+ state.loading = false;
+ state.error = null;
+ state.snapToken = null;
+ state.transactionId = null;
+ state.paymentStatus = null;
+ state.paymentSuccess = false;
+ },
+ setPaymentSuccess: (state) => {
+ state.paymentSuccess = true;
+ }
+ },
+ extraReducers: (builder) => {
+ builder
+ // Initiate payment
+ .addCase(initiatePayment.pending, (state) => {
+ state.loading = true;
+ state.error = null;
+ })
+ .addCase(initiatePayment.fulfilled, (state, action) => {
+ state.loading = false;
+ state.snapToken = action.payload.transactionToken;
+ state.transactionId = action.payload.orderId;
+ })
+ .addCase(initiatePayment.rejected, (state, action) => {
+ state.loading = false;
+ state.error = action.payload;
+ })
+
+ // Check payment status
+ .addCase(checkPaymentStatus.pending, (state) => {
+ state.loading = true;
+ state.error = null;
+ })
+ .addCase(checkPaymentStatus.fulfilled, (state, action) => {
+ state.loading = false;
+ state.paymentStatus = action.payload.paymentStatus;
+ if (action.payload.paymentStatus === 'paid') {
+ state.paymentSuccess = true;
+ }
+ })
+ .addCase(checkPaymentStatus.rejected, (state, action) => {
+ state.loading = false;
+ state.error = action.payload;
+ })
+
+ // Delete order after payment
+ .addCase(deleteOrder.pending, (state) => {
+ state.loading = true;
+ state.error = null;
+ })
+ .addCase(deleteOrder.fulfilled, (state) => {
+ state.loading = false;
+ state.paymentSuccess = true;
+ })
+ .addCase(deleteOrder.rejected, (state, action) => {
+ state.loading = false;
+ state.error = action.payload;
+ // Even if deletion fails, we still mark payment as successful
+ // since this is just a database cleanup operation
+ state.paymentSuccess = true;
+ });
+ }
+});
+
+export const { setSnapScriptLoaded, clearPaymentState, setPaymentSuccess } = paymentSlice.actions;
+export default paymentSlice.reducer;
\ No newline at end of file
diff --git a/Client/src/index.css b/Client/src/index.css
new file mode 100644
index 00000000..08a3ac9e
--- /dev/null
+++ b/Client/src/index.css
@@ -0,0 +1,68 @@
+:root {
+ font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+ line-height: 1.5;
+ font-weight: 400;
+
+ color-scheme: light dark;
+ color: rgba(255, 255, 255, 0.87);
+ background-color: #242424;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+ font-weight: 500;
+ color: #646cff;
+ text-decoration: inherit;
+}
+a:hover {
+ color: #535bf2;
+}
+
+body {
+ margin: 0;
+ display: flex;
+ place-items: center;
+ min-width: 320px;
+ min-height: 100vh;
+}
+
+h1 {
+ font-size: 3.2em;
+ line-height: 1.1;
+}
+
+button {
+ border-radius: 8px;
+ border: 1px solid transparent;
+ padding: 0.6em 1.2em;
+ font-size: 1em;
+ font-weight: 500;
+ font-family: inherit;
+ background-color: #1a1a1a;
+ cursor: pointer;
+ transition: border-color 0.25s;
+}
+button:hover {
+ border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+ outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+ :root {
+ color: #213547;
+ background-color: #ffffff;
+ }
+ a:hover {
+ color: #747bff;
+ }
+ button {
+ background-color: #f9f9f9;
+ }
+}
diff --git a/Client/src/main.jsx b/Client/src/main.jsx
new file mode 100644
index 00000000..a0c35efb
--- /dev/null
+++ b/Client/src/main.jsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+// import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+
+
+
+ 
+ {dataPackage.discount && (
+
+ {dataPackage.discount}% OFF
+
+ )}
+
+
+ {dataPackage.discount && (
+
+ {dataPackage.discount}% OFF
+
+ )}
+
+
+
+
+ {dataPackage.namePackage || 'N/A'}
+ + Rp {dataPackage.price?.toLocaleString('id-ID') || 'N/A'} + ++ {dataPackage.description || 'No description available.'} +
+
+
+
+
+
+
+
+
+
+
+
+ {error && (
+
+ {error}
+
+ )}
+
+