diff --git a/package-lock.json b/package-lock.json
index 56ac4016ead84dafb24c0aa34b93755d50fd66f8..ae5a7c1728995ceeb99c54bb5c79ca54ee7300ac 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
"name": "rpl-frontend",
"version": "0.1.0",
"dependencies": {
- "next": "14.0.3",
+ "next": "^14.0.3",
"react": "^18",
"react-dom": "^18",
"react-icons": "^4.12.0",
diff --git a/package.json b/package.json
index 3a4a65a13eb5ed97d10671b530aeeee9e03bc10d..178e9e272fc814111e15548f8f8dfef933427495 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
"prepare": "npx husky install"
},
"dependencies": {
- "next": "14.0.3",
+ "next": "^14.0.3",
"react": "^18",
"react-dom": "^18",
"react-icons": "^4.12.0",
diff --git a/pages/calonpelanggan/create.jsx b/pages/calonpelanggan/create.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..e3b5f4e96b9adb67514b3c013ed94d1299beb655
--- /dev/null
+++ b/pages/calonpelanggan/create.jsx
@@ -0,0 +1,124 @@
+import Template from "@/components/template"
+import { useEffect, useState } from "react"
+import { toast } from "react-toastify"
+import { useRouter } from "next/router"
+const Create = () => {
+ const router = useRouter()
+ const [isDisabled, setIsDisabled] = useState(false)
+ const [nama, setNama] = useState("")
+ const [kelasPelanggan, setKelasPelanggan] = useState("")
+ const [umur, setUmur] = useState("")
+ const [noWA, setNoWA] = useState("")
+ const [alamat, setAlamat] = useState("")
+ const statusPelanggan = "Calon"
+
+ useEffect(() => {
+ if (!router.isReady) return;
+ if (router.query.kelasID) {
+ setKelasPelanggan(router.query.kelasID);
+ setIsDisabled(true);
+ }
+ }, [router.isReady, router.query.kelasID])
+
+ const handleUpdate = async () => {
+ const body = JSON.stringify({
+ nama,
+ kelasPelanggan,
+ umur,
+ noWA,
+ alamat,
+ statusPelanggan
+ })
+ const updateQuery = await fetch("https://rpl-backend-production.up.railway.app/v1/calonpelanggan/create", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json"
+ },
+ body
+ }).then(response => response).catch(() => null)
+ if (updateQuery === null) {
+ toast.error("Something went wrong..")
+ return
+ }
+ if (updateQuery.status !== 200) {
+ toast.error("Failed to create...")
+ return
+ }
+ toast.success("Successfully created!")
+ const token = window.localStorage.getItem("token")
+ if (!token) {
+ router.push("/")
+ return
+ }
+ const tokenParsed = token.split(" ")[1]
+ fetch(`https://rpl-backend-production.up.railway.app/v1/auth/verify/${tokenParsed}`).then(async (response) => {
+ const responsejson = await response.json();
+ if (responsejson.data.tipe_user === "ADMIN") {
+ router.push("/calonpelanggan")
+ return
+ }
+ router.push("/")
+ }).catch(error => {
+ console.error(error)
+ return
+ })
+ return;
+ }
+ return <>
+ <Template>
+ <main className="min-h-screen px-14 py-5 bg-[#FFF6F6]">
+ <div className="w-full mb-2">
+ <span className="text-[#F875AA] font-bold text-2xl hover:cursor-pointer" onClick={(e) => {
+ e.preventDefault()
+ router.back()
+ }}>Back</span>
+ </div>
+ <h1 className="text-[#F875AA] font-extrabold text-5xl mb-20 text-center">Form Pendaftaran Kursus Mengemudi RPL</h1>
+ <div className="text-[#F875AA] font-extrabold text-3xl mb-20 text-center">{router.query.kelasID && (
+ <span> Kelas {router.query.namaKelas}</span>)}
+ </div>
+ <form className="w-2/3 mx-auto space-y-10 flex flex-col align-middle justify-evenly" onSubmit={(e) => {
+ e.preventDefault()
+ handleUpdate()
+ return;
+ }}>
+ <div className="flex flex-row align-middle justify-between">
+ <span className="h-min my-auto font-bold text-lg">Nama Siswa</span>
+ <input value={nama} onChange={(e) => {
+ setNama(e.target.value)
+ }} type="text" required className="drop-shadow-xl w-2/3 p-2 rounded-xl" />
+ </div>
+ <div className="flex flex-row align-middle justify-between">
+ <span className="h-min my-auto font-bold text-lg">Kelas Pilihan</span>
+ <input value={kelasPelanggan} onChange={(e) => {
+ setKelasPelanggan(e.target.value)
+ }} type="number" required disabled={isDisabled} className="drop-shadow-xl w-2/3 p-2 rounded-xl" />
+ </div>
+ <div className="flex flex-row align-middle justify-between">
+ <span className="h-min my-auto font-bold text-lg">Umur</span>
+ <input value={umur} onChange={(e) => {
+ setUmur(e.target.value)
+ }} type="number" required className="drop-shadow-xl w-2/3 p-2 rounded-xl" />
+ </div>
+ <div className="flex flex-row align-middle justify-between">
+ <span className="h-min my-auto font-bold text-lg">No WhatsApp</span>
+ <input value={noWA} onChange={(e) => {
+ setNoWA(e.target.value)
+ }} type="tel" required className="drop-shadow-xl w-2/3 p-2 rounded-xl" />
+ </div>
+ <div className="flex flex-row align-middle justify-between">
+ <span className="h-min my-auto font-bold text-lg">Alamat</span>
+ <input value={alamat} onChange={(e) => {
+ setAlamat(e.target.value)
+ }} type="text" required className="drop-shadow-xl w-2/3 p-2 rounded-xl" />
+ </div>
+ <input type="submit" className="bg-[#F875AA] px-8 py-3 text-xl font-bold text-white rounded-xl mx-auto hover:cursor-pointer" value={"Simpan"} />
+ </form>
+
+ </main>
+ </Template >
+ </>
+
+}
+
+export default Create
\ No newline at end of file
diff --git a/pages/calonpelanggan/edit/[id].jsx b/pages/calonpelanggan/edit/[id].jsx
new file mode 100644
index 0000000000000000000000000000000000000000..129f6df9ded401ecb1d376829fdf88b83d9c7928
--- /dev/null
+++ b/pages/calonpelanggan/edit/[id].jsx
@@ -0,0 +1,154 @@
+import Template from "@/components/template"
+import { useEffect, useState } from "react"
+import { toast } from "react-toastify"
+import { useRouter } from "next/router"
+const Edit = () => {
+ const router = useRouter()
+ const [ID, setID] = useState()
+ const [nama, setNama] = useState("")
+ const [kelasPelanggan, setKelasPelanggan] = useState("")
+ const [umur, setUmur] = useState("")
+ const [noWA, setNoWA] = useState("")
+ const [alamat, setAlamat] = useState("")
+ const [statusPelanggan, setStatusPelanggan] = useState("")
+ const [adminKursus, setAdminKursus] = useState("")
+
+ const handleUpdate = async () => {
+ const token = window.localStorage.getItem("token")
+ if (token === undefined || token === null) {
+ window.location.replace("/auth/login")
+ return
+ }
+ const body = JSON.stringify({
+ nama,
+ kelasPelanggan,
+ umur,
+ noWA,
+ alamat,
+ statusPelanggan,
+ adminKursus
+ })
+ const updateQuery = await fetch("https://rpl-backend-production.up.railway.app/v1/calonpelanggan/update/" + router.query.id, {
+ method: "PATCH",
+ headers: {
+ Authorization: token,
+ "Content-Type": "application/json"
+ },
+ body
+ }).then(response => response).catch(() => null)
+ if (updateQuery === null) {
+ toast.error("Something went wrong..")
+ return
+ }
+ if (updateQuery.status !== 200) {
+ toast.error("Failed to update...")
+ return
+ }
+ toast.success("Successfully updated!")
+ router.push("/calonpelanggan")
+ return;
+ }
+
+ useEffect(() => {
+ if (!router.isReady) return;
+ const token = window.localStorage.getItem("token")
+ if (token === undefined || token === null) {
+ window.location.replace("/auth/login")
+ return
+ }
+ fetch("https://rpl-backend-production.up.railway.app/v1/calonpelanggan/list/" + router.query.id, {
+ method: "GET",
+ headers: {
+ "Authorization": token
+ }
+ }).then(async response => {
+ if (response.status !== 200) {
+ toast.error("Failed to retrieve items")
+ return
+ }
+ const responsejson = await response.json()
+ setID(responsejson.data.calonPelangganID)
+ setNama(responsejson.data.nama)
+ setKelasPelanggan(responsejson.data.kelasPelanggan)
+ setUmur(responsejson.data.umur)
+ setNoWA(responsejson.data.noWA)
+ setAlamat(responsejson.data.alamat)
+ setStatusPelanggan(responsejson.data.statusPelanggan)
+ setAdminKursus(responsejson.data.adminKursus)
+ })
+ //eslint-disable-next-line
+ }, [router.isReady])
+ return <>
+ <Template>
+ <main className="min-h-screen px-14 py-5 bg-[#FFF6F6]">
+ <div className="w-full mb-2">
+ <span className="text-[#F875AA] font-bold text-2xl hover:cursor-pointer" onClick={(e) => {
+ e.preventDefault()
+ router.replace("/calonpelanggan")
+ }}>Back</span>
+ </div>
+ <h1 className="text-[#F875AA] font-extrabold text-5xl mb-20 text-center">Update Pelanggan</h1>
+ <form className="w-2/3 mx-auto space-y-10 flex flex-col align-middle justify-evenly" onSubmit={(e) => {
+ e.preventDefault()
+ handleUpdate()
+ return;
+ }}>
+ <div className="flex flex-row align-middle justify-between">
+ <span className="h-min my-auto font-bold text-lg">ID Pelanggan</span>
+ <input disabled value={ID} type="number" required className="drop-shadow-xl w-2/3 p-2 rounded-xl" />
+ </div>
+ <div className="flex flex-row align-middle justify-between">
+ <span className="h-min my-auto font-bold text-lg">Nama Siswa</span>
+ <input value={nama} onChange={(e) => {
+ setNama(e.target.value)
+ }} type="text" required className="drop-shadow-xl w-2/3 p-2 rounded-xl" />
+ </div>
+ <div className="flex flex-row align-middle justify-between">
+ <span className="h-min my-auto font-bold text-lg">ID Kelas Pilihan</span>
+ <input value={kelasPelanggan} onChange={(e) => {
+ setKelasPelanggan(e.target.value)
+ }} type="number" required className="drop-shadow-xl w-2/3 p-2 rounded-xl" />
+ </div>
+ <div className="flex flex-row align-middle justify-between">
+ <span className="h-min my-auto font-bold text-lg">Umur</span>
+ <input value={umur} onChange={(e) => {
+ setUmur(e.target.value)
+ }} type="number" required className="drop-shadow-xl w-2/3 p-2 rounded-xl" />
+ </div>
+ <div className="flex flex-row align-middle justify-between">
+ <span className="h-min my-auto font-bold text-lg">No WhatsApp</span>
+ <input value={noWA} onChange={(e) => {
+ setNoWA(e.target.value)
+ }} type="tel" required className="drop-shadow-xl w-2/3 p-2 rounded-xl" />
+ </div>
+ <div className="flex flex-row align-middle justify-between">
+ <span className="h-min my-auto font-bold text-lg">Alamat</span>
+ <input value={alamat} onChange={(e) => {
+ setAlamat(e.target.value)
+ }} type="text" required className="drop-shadow-xl w-2/3 p-2 rounded-xl" />
+ </div>
+ <div className="flex flex-row align-middle justify-between">
+ <span className="h-min my-auto font-bold text-lg">Status Pelanggan</span>
+ <select value={statusPelanggan} onChange={(e) => {
+ setStatusPelanggan(e.target.value)
+ }}>
+ <option value="Calon">Calon</option>
+ <option value="Siswa">Siswa</option>
+ <option value="Lulus">Lulus</option> </select>
+ </div>
+ <div className="flex flex-row align-middle justify-between">
+ <span className="h-min my-auto font-bold text-lg">ID Admin Kursus</span>
+ <input value={adminKursus} onChange={(e) => {
+ setAdminKursus(e.target.value)
+ }} type="number" required className="drop-shadow-xl w-2/3 p-2 rounded-xl" />
+ </div>
+ <input type="submit" className="bg-[#F875AA] px-8 py-3 text-xl font-bold text-white rounded-xl mx-auto hover:cursor-pointer" value={"Simpan"} />
+ </form>
+
+ </main>
+ </Template >
+ </>
+
+}
+
+export default Edit
\ No newline at end of file
diff --git a/pages/calonpelanggan/index.jsx b/pages/calonpelanggan/index.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..baa80bd56b981eedc7ecca5fffc7a98948ff3647
--- /dev/null
+++ b/pages/calonpelanggan/index.jsx
@@ -0,0 +1,170 @@
+import Template from "@/components/template"
+import { useEffect, useState } from "react"
+import { toast } from "react-toastify"
+import { useRouter } from "next/router"
+const Index = () => {
+ const [rows, setRows] = useState([])
+ const router = useRouter()
+ const [deleteToggle, setDeleteToggle] = useState(null)
+ const [currentPage, setCurrentPage] = useState(1);
+ const [isLastPage, setLastPage] = useState(false)
+
+ const getNextPage = async (page) => {
+ const token = window.localStorage.getItem("token")
+ if (token === undefined || token === null) {
+ window.location.replace("/auth/login")
+ return;
+ }
+ const getItems = await fetch("https://rpl-backend-production.up.railway.app/v1/calonpelanggan/list?page=" + (page), {
+ method: "GET",
+ headers: {
+ Authorization: token
+ }
+ }).then(response => response).catch(() => null)
+ if (getItems === null) {
+ toast.error("Something went wrong..")
+ return;
+ }
+ if (getItems.status !== 200) {
+ toast.error("Unable to get more items!")
+ return
+ }
+ const responsejson = await getItems.json();
+ setLastPage(responsejson.data.length < 10)
+ setRows(responsejson.data);
+ return
+ }
+ const handleDelete = async () => {
+ const token = window.localStorage.getItem("token")
+ if (token === undefined || token === null) {
+ window.location.replace("/auth/login")
+ return
+ }
+ const deleteRequest = await fetch("https://rpl-backend-production.up.railway.app/v1/calonpelanggan/delete/" + deleteToggle, {
+ method: "DELETE",
+ headers: {
+ Authorization: token
+ }
+ }).then(response => response).catch(() => null)
+ setDeleteToggle(null)
+ if (deleteRequest === null) {
+ toast.error("Something went wrong...");
+ return;
+ }
+ if (deleteRequest.status !== 200) {
+ toast.error("Failed to delete..");
+ return;
+ }
+ toast.success("Successfully deleted!");
+ router.reload();
+ return;
+ }
+ useEffect(() => {
+ const token = window.localStorage.getItem("token")
+ if (token === undefined || token === null) {
+ window.location.replace("/auth/login")
+ return
+ }
+ fetch("https://rpl-backend-production.up.railway.app/v1/calonpelanggan/list", {
+ method: "GET",
+ headers: {
+ "Authorization": token
+ }
+ }).then(async response => {
+ if (response.status !== 200) {
+ toast.error("Failed to retrieve items")
+ return
+ }
+ const responsejson = await response.json()
+ setRows(responsejson.data)
+ })
+ }, [])
+ return <>
+ <Template>
+ <main className="min-h-screen px-14 py-5 bg-[#FFF6F6]">
+ <div className="w-full mb-2">
+ <span className="text-[#F875AA] font-bold text-2xl hover:cursor-pointer" onClick={(e) => {
+ e.preventDefault()
+ router.replace("/dashboard/admin")
+ }}>Back</span>
+ </div>
+ <div className="flex flex-row align-middle justify-between">
+ <h1 className="text-[#F875AA] font-extrabold text-5xl mb-8">Data Pelanggan</h1>
+ <button onClick={(e) => {
+ e.preventDefault();
+ router.push("/calonpelanggan/create")
+ }} className="bg-[#F875AA] p-4 text-lg font-bold text-white rounded-3xl">Create</button>
+ </div>
+ <table className="w-full text-center border-spacing-3 border-separate">
+ <thead>
+ <tr>
+ <th className="bg-[#F875AA] p-2 border border-[#F875AA]">ID</th>
+ <th className="bg-[#F875AA] p-2 border border-[#F875AA]">Nama Pelanggan</th>
+ <th className="bg-[#F875AA] p-2 border border-[#F875AA]">Kelas Pelanggan</th>
+ <th className="bg-[#F875AA] p-2 border border-[#F875AA]">Umur</th>
+ <th className="bg-[#F875AA] p-2 border border-[#F875AA]">Nomor WhatsApp</th>
+ <th className="bg-[#F875AA] p-2 border border-[#F875AA]">Alamat</th>
+ <th className="bg-[#F875AA] p-2 border border-[#F875AA]">Status Pelanggan</th>
+ <th className="bg-[#F875AA] p-2 border border-[#F875AA]">Admin Kursus</th>
+ <th className=""></th>
+ </tr>
+ </thead>
+ <tbody>
+ {rows.map((row, index) => {
+ return <tr key={row.calonPelangganID}>
+ <td className="p-6 border border-[#F875AA] bg-white">{row.calonPelangganID}</td>
+ <td className="p-6 border border-[#F875AA] bg-white">{row.nama}</td>
+ <td className="p-6 border border-[#F875AA] bg-white">{row.kelasPelanggan}</td>
+ <td className="p-6 border border-[#F875AA] bg-white">{row.umur}</td>
+ <td className="p-6 border border-[#F875AA] bg-white">{row.noWA}</td>
+ <td className="p-6 border border-[#F875AA] bg-white">{row.alamat}</td>
+ <td className="p-6 border border-[#F875AA] bg-white">{row.statusPelanggan}</td>
+ <td className="p-6 border border-[#F875AA] bg-white">{row.adminKursus}</td>
+ <td className="px-2 flex flex-col align-middle justify-evenly space-y-2 ">
+ <button className="bg-[#AEDEFC] p-1 rounded-lg" onClick={(e) => {
+ e.preventDefault();
+ router.push("/calonpelanggan/edit/" + row.calonPelangganID)
+ return;
+ }}>Update</button>
+ <button data-modal-target="popup-modal" data-modal-toggle="popup-modal" className="bg-[#FFDFDF] p-1 rounded-lg" onClick={(e) => {
+ e.preventDefault()
+ setDeleteToggle(row.calonPelangganID)
+ }}>Delete</button>
+ </td>
+ </tr>
+ })}
+ </tbody>
+ </table>
+ <div className="flex flex-row align-middle justify-around">
+ <button className="bg-red-400 p-5 rounded-2xl text-white font-bold" disabled={currentPage === 1} onClick={() => {
+ getNextPage(currentPage - 1)
+ setCurrentPage(page => page - 1)
+ }}>Prev</button>
+ <span className="h-min my-auto font-bold">Page {currentPage}</span>
+ <button className="bg-blue-400 p-5 rounded-2xl text-white font-bold" disabled={isLastPage} onClick={() => {
+ getNextPage(currentPage + 1)
+ setCurrentPage(page => page + 1)
+ }}>Next</button>
+ </div>
+ </main>
+ {deleteToggle !== null && <div className="left-0 top-0 fixed w-screen h-screen bg-white bg-opacity-80 p-20 flex flex-col align-middle justify-center">
+ <div className="w-1/2 mx-auto space-y-5">
+ <h1 className="text-center p-10 bg-[#FFDFDF] border-2 border-[#F875AA] rounded-xl font-bold text-xl">Apakah anda yakin akan menghapus data pelanggan?</h1>
+ <div className="space-x-5 flex flex-row align-middle justify">
+ <button className="p-3 rounded-xl w-full bg-[#FFDFDF] border-2 border-[#F875AA]" onClick={(e) => {
+ e.preventDefault();
+ handleDelete()
+ }}>Delete</button>
+ <button className="p-3 rounded-xl w-full bg-[#FFDFDF] border-2 border-[#F875AA]" onClick={(e) => {
+ e.preventDefault()
+ setDeleteToggle(null)
+ }}>Cancel</button>
+ </div>
+ </div>
+ </div>}
+ </Template >
+ </>
+
+}
+
+export default Index
\ No newline at end of file
diff --git a/pages/dashboard/admin.jsx b/pages/dashboard/admin.jsx
index 9382f880a9bd4a924085cb9992463e3509730fe4..839c194509e6470459279ec2707b2a5131ebf6d1 100644
--- a/pages/dashboard/admin.jsx
+++ b/pages/dashboard/admin.jsx
@@ -1,58 +1,53 @@
import Template from "@/components/templatenofooter"
import { toast } from "react-toastify"
-import { useEffect, useState} from "react"
+import { useEffect, useState } from "react"
import { useRouter } from "next/router"
-
-const DashboardOwner = () => {
- const router = useRouter();
- const [username, setUsername] = useState(null)
-
- useEffect(() => {
- const token = window.localStorage.getItem("token")
- if (!token){
+import Image from "next/image"
+
+const DashboardAdmin = () => {
+ const router = useRouter();
+ const [username, setUsername] = useState(null)
+
+ useEffect(() => {
+ const token = window.localStorage.getItem("token")
+ if (!token) {
+ window.location.replace("/auth/login")
+ }
+ const tokenParsed = token.split(" ")[1]
+ fetch(`https://rpl-backend-production.up.railway.app/v1/auth/verify/${tokenParsed}`).then(async (response) => {
+ if (response.status !== 200) {
+ toast.error("Failed to retrieve items")
+ return;
+ }
+ const responsejson = await response.json();
+ if (responsejson.data.tipe_user !== "ADMIN") {
window.location.replace("/auth/login")
+ return
}
- const tokenParsed = token.split(" ")[1]
- fetch(`https://rpl-backend-production.up.railway.app/v1/auth/verify/${tokenParsed}`).then(async (response) => {
- if (response.status !== 200){
- toast.error("Failed to retrieve items")
- return;
- }
- const responsejson = await response.json();
- if (responsejson.data.tipe_user !== "ADMIN"){
- window.location.replace("/auth/login")
- return
- }
- setUsername(responsejson.data.username)
+ setUsername(responsejson.data.username)
- })
- }, [])
+ }).catch(error => {
+ console.error(error)
+ return
+ })
+ }, [])
return (
<Template>
-
- <main className="min-h-screen px-14 py-10 bg-[#FFF6F6]">
-
- <div className="text-[#F875AA] font-extrabold text-5xl mb-20 text-center">Selamat datang kembali, {username}!</div>
- <div className = "flex flex-row align-middle justify-between">
- {/* <div className="bg-white p-6 rounded-lg shadow-md" /> */}
-
- </div>
- <div className="w-[226px] h-[95px] left-[638px] top-[381px] absolute text-center text-pink-400 text-[32px] font-extrabold font-'Poppins'">Data<br/>Pelanggan</div>
- <div className="w-[126px] h-[53px] left-[694px] top-[715px] absolute">
- <div className="w-[126px] h-[53px] left-0 top-0 absolute bg-sky-200 rounded-[15px]" />
- <span className="w-[84.28px] h-[28.33px] left-[21px] top-[15px] absolute text-center text-black text-base font-bold font-'Poppins'" onClick={(e) => {
- e.preventDefault()
- router.push("/")
- }}>Ubah</span>
- </div>
- <img className="w-[171px] h-[171px] left-[670px] top-[497px] absolute" src="/client.png" />
- </main>
+ <main className="min-h-screen p-28 flex flex-col align-middle justify-center bg-[#FFF6F6] space-y-20">
+ <h1 className="text-5xl text-center font-extrabold text-[#F875AA]">Selamat datang kembali, {username}</h1>
+ <div className="bg-white rounded-xl p-10 space-y-14 flex flex-col align-middle justify-evenly shadow-xl shadow-[#FFDFE0] w-1/3 mx-auto">
+ <span className="text-center font-bold text-4xl text-[#F875AA]">Data <br></br>Pelanggan</span>
+ <Image className="mx-auto" src="/client.png" width={126} height={53} alt="Data Kelas" />
+ <button onClick={(e) => {
+ e.preventDefault();
+ router.push("/calonpelanggan")
+ return;
+ }} className="bg-sky-200 rounded-xl font-bold text-center w-min mx-auto px-10 py-3">Ubah</button>
+ </div>
+ </main>
</Template>
-
-
)
-
}
-export default DashboardOwner
\ No newline at end of file
+export default DashboardAdmin
\ No newline at end of file
diff --git a/pages/index.jsx b/pages/index.jsx
index 2c417a29137754ed3062a6067e32cc62870ac357..09fe3ba02464a61d64648f928d96928c1f3c24e6 100644
--- a/pages/index.jsx
+++ b/pages/index.jsx
@@ -1,12 +1,100 @@
import Template from "@/components/template"
+import { useEffect, useState } from "react"
+import { toast } from "react-toastify"
+import { useRouter } from "next/router"
-export default function Home() {
- return (
+export default function Home({ kelasMengemudi, propertyWebsite }) {
+ const router = useRouter();
+
+ return <>
<Template>
- <main className="min-h-screen align-middle justify-center flex flex-col">
- <h1 className="text-center font-bold text-4xl">Rungkad.. entek entek an.. <br /> kelangan koe sing paling tak sayang..</h1>
+ <main className="min-h-screen px-14 py-5 bg-[#FFF6F6]">
+ <h1 className="text-[#F875AA] font-extrabold text-4xl mt-5 mb-10 text-center">Sistem Manajemen Kursus Mengemudi RPL</h1>
+
+ <p className="mx-auto w-11/12 justify-center text-center">{propertyWebsite.description}</p>
+
+ <div className="flex flex-col justify-center items-center space-y-5">
+ <span className="text-[#F875AA] font-extrabold text-3xl text-center mt-20">Paket Kelas</span>
+ <span className="text-[#16A4FF]">*) Setiap 1 sesi kelas berlangsung selama 2 jam</span>
+ </div>
+
+ <div className={`max-h-fit px-28 mt-10 mx-auto max-w-[1270px] relative grid grid-cols-3 gap-x-8 gap-y-8`}>
+ {kelasMengemudi.map((row, index) => {
+ return (
+ <div key={row.kelasMengemudiID}
+ className={`relative col-span-1 row-span-1 col-start-${(index % 3) + 1} row-start-${Math.floor(index / 3) + 1}`}>
+ <div className="w-[320px] h-[360px] bg-white rounded-[15px] shadow-xl shadow-[#FFDFE0] relative flex flex-col justify-center items-center">
+ <span className="text-[#F875AA] text-xl font-extrabold">{row.namaKelas}</span>
+ <span className="text-center text-black text-base mt-8">Harga: Rp{row.hargaKelas}</span>
+ <span className="text-center text-black text-base mt-3">Total Jam Kursus: {2*row.jumlahSesi}</span>
+ <span className="text-center text-black text-base mt-3">Jumlah Sesi: {row.jumlahSesi}</span>
+ <span className="text-center text-black text-base mt-3">Nama Kendaraan: {row.namaKendaraan}</span>
+ <span className="text-center text-black text-base mt-3">Jenis Kendaraan: {row.jenisKendaraan}</span>
+
+ <button onClick={(e) => {
+ e.preventDefault();
+ router.push({
+ pathname: "/calonpelanggan/create",
+ query: {kelasID: row.kelasMengemudiID, namaKelas: row.namaKelas},
+ })
+ }} className="bg-[#AFDEFC] w-[126px] h-[53px] p-3 text-lg font-bold text-black rounded-2xl mt-8">Daftar</button>
+ </div>
+ </div>);
+ })}
+ </div>
+
+ <div className="flex justify-center items-center">
+ <span className="text-[#F875AA] font-extrabold text-3xl text-center mt-20">Frequently Asked Questions</span>
+ </div>
+
+ <div className="mt-10 mb-20 mx-auto relative space-y-10">
+ <div>
+ {propertyWebsite.faq.map((item, index) => (
+ <div key={index} className="faq-item">
+ <div className="mx-auto w-11/12 h-auto bg-white rounded-[15px] shadow-xl shadow-[#FFDFE0] relative flex flex-col justify-center mb-5">
+ <span className="question text-[#F875AA] text-xl font-bold text-left m-5">{item.question}</span>
+ <span className="answer ml-5 mb-5 mr-5">{item.answer}</span>
+ </div>
+ </div>
+ ))}
+ </div>
+ </div>
</main>
</Template>
- )
+ </>
+}
+
+export const getServerSideProps = async () => {
+ const kelasMengemudiQuery = await fetch("https://rpl-backend-production.up.railway.app/v1/kelasmengemudi/list", {
+ method: "GET",
+ }).catch(err => {
+ return null
+ })
+ const propertyQuery = await fetch("https://rpl-backend-production.up.railway.app/v1/property", {
+ method: "GET",
+ }).catch(error => {
+ return null
+ })
+ let kelasMengemudi;
+ if (kelasMengemudiQuery === null) kelasMengemudi = []
+ else {
+ const kelasMengemudiJson = await kelasMengemudiQuery.json()
+ kelasMengemudi = kelasMengemudiJson.data
+ }
+ let propertyWebsite;
+ if (propertyQuery === null) propertyWebsite = {
+ description: "",
+ faq: []
+ }
+ else {
+ const propertyJson = await propertyQuery.json();
+ propertyWebsite = propertyJson.data
+ }
+ return {
+ props: {
+ kelasMengemudi,
+ propertyWebsite
+ }
+ }
}