diff --git a/index.html b/index.html index 028a96f..e80e504 100644 --- a/index.html +++ b/index.html @@ -2,9 +2,9 @@ - + - Box Transit - Absensi Siswa + Box Transit - System Analyst + \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx index b9ab117..a073704 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,6 +1,7 @@ import { useState } from "react"; import Sidebar from "./components/Sidebar"; import Navbar from "./components/Navbar"; +import BillingPage from "./pages/BillingPage"; function App() { const [isSidebarOpen, setIsSidebarOpen] = useState(false); @@ -11,7 +12,7 @@ function App() { const renderContent = () => { switch (activeMenu) { case "Dashboard": - return

Welcome to Dashboard

; + return ; case "Master Data": return

Master Data Content

; case "Settings": diff --git a/src/components/BillingSection.jsx b/src/components/BillingSection.jsx new file mode 100644 index 0000000..2353fa9 --- /dev/null +++ b/src/components/BillingSection.jsx @@ -0,0 +1,26 @@ +import React from "react"; + + +const BillingSection = () => { + return ( +
+
+

Billing

+

+ Manage your balance and view transaction history +

+
+ +
+ + +
+
+ ); +}; + +export default BillingSection; diff --git a/src/components/Counter.jsx b/src/components/Counter.jsx deleted file mode 100644 index 0beadd3..0000000 --- a/src/components/Counter.jsx +++ /dev/null @@ -1,27 +0,0 @@ -import { useState } from 'react'; - -function Counter() { - const [count, setCount] = useState(0); - - const showPopup = () => { - alert("Nilai sudah 0, tidak boleh menampilkan minus"); - }; - - const checkIfMinus = (countis) => { - if (countis <= 0) { - showPopup(); - } else { - setCount(count - 1) - } - } - - return ( -
-

Anda telah klik {count} kali

- - -
- ); -} - -export default Counter; \ No newline at end of file diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx deleted file mode 100644 index a7e6207..0000000 --- a/src/components/Footer.jsx +++ /dev/null @@ -1,14 +0,0 @@ -// src/components/Footer.jsx -export default function Footer() { - return ( - - ); -} diff --git a/src/components/Header.jsx b/src/components/Header.jsx deleted file mode 100644 index 75275ae..0000000 --- a/src/components/Header.jsx +++ /dev/null @@ -1,13 +0,0 @@ -// src/components/Header.jsx -export default function Header() { - return ( -
-

Box Transit

-
- ); -} diff --git a/src/pages/BillingPage.jsx b/src/pages/BillingPage.jsx new file mode 100644 index 0000000..1c90ab8 --- /dev/null +++ b/src/pages/BillingPage.jsx @@ -0,0 +1,79 @@ +import BillingSection from "../components/BillingSection"; +import { GrCreditCard } from "react-icons/gr"; +import { FaHistory, FaWallet, FaMoneyBillWave } from "react-icons/fa"; + +const BillingPage = () => { + return ( +
+ {/* Billing Header */} +
+ {/* Kiri: Judul dan deskripsi */} +
+

Billing

+

+ Manage your balance and view transaction history +

+
+ + {/* Kanan: Tombol */} +
+ + +
+
+ + {/* Current Credits Section */} +
+ {/* Card 1 */} +
+
+ +
+
+

Current Credits

+

Rp 0

+
+
+ + {/* Card 2 */} +
+
+ +
+
+

Total Balance

+

Rp 500.000

+
+
+ + {/* Card 3 */} +
+
+ +
+
+

Pending Payments

+

Rp 120.000

+
+
+ + {/* Card 4 */} +
+
+ +
+
+

Transactions

+

12

+
+
+
+
+ ); +}; + +export default BillingPage;