From 62580edbe84b2ad802db63c5003592147a4fe312 Mon Sep 17 00:00:00 2001
From: DewanaGustavus <76590469+DewanaGustavus@users.noreply.github.com>
Date: Wed, 15 Nov 2023 21:42:23 +0700
Subject: [PATCH] feat: available order page (dummy data, no functionality)

---
 src/App.tsx                               |  2 +
 src/components/AvailableOrderCard.tsx     | 52 +++++++++++++++++-
 src/components/Navbar.tsx                 |  4 +-
 src/interfaces/AvailableOrderInterface.ts |  6 +++
 src/pages/AvailableOrder.tsx              | 66 ++++++++++++++++++++++-
 src/pages/Balance.tsx                     |  2 +-
 6 files changed, 127 insertions(+), 5 deletions(-)
 create mode 100644 src/interfaces/AvailableOrderInterface.ts

diff --git a/src/App.tsx b/src/App.tsx
index c523cd3..8669e22 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,6 +6,7 @@ import NotFound from './pages/NotFound'
 import Logout from './utils/Logout'
 import { isLoggedIn } from './utils/LocalStorage'
 import Balance from './pages/Balance'
+import AvailableOrder from './pages/AvailableOrder'
 
 function App() {
 
@@ -16,6 +17,7 @@ function App() {
         <Navbar/>
         <Routes>
           <Route path='/Balance' element={<Balance/>}/>
+          <Route path='/AvailableOrder' element={<AvailableOrder/>}/>
           <Route path='/Logout' element={<Logout/>}/>
           <Route path='*' element={<NotFound/>}/>
         </Routes>
diff --git a/src/components/AvailableOrderCard.tsx b/src/components/AvailableOrderCard.tsx
index 6e698ac..458c430 100644
--- a/src/components/AvailableOrderCard.tsx
+++ b/src/components/AvailableOrderCard.tsx
@@ -1 +1,51 @@
-// TODO : 
+import { 
+  Box, 
+  Card, 
+  CardBody, 
+  CardHeader, 
+  Heading,
+  Stack,
+  StackDivider,
+  Text
+} from '@chakra-ui/react'
+import AvailableOrderInterface from '../interfaces/AvailableOrderInterface';
+
+type paramInterface = {order : AvailableOrderInterface};
+
+export default function AvailableOrderCard({order} : paramInterface) {
+  return (
+  <Card
+    width={"80%"}
+    marginY={3}
+    marginX={10}
+    borderColor={"black"}
+    borderRadius={20}
+    >
+    <CardHeader>
+      <Heading>
+        {order.address}
+      </Heading>
+    </CardHeader>
+    <CardBody>
+      <Stack divider={<StackDivider/>} spacing={1}>
+        <Box>
+          <Text fontSize={"lg"} fontWeight={"bold"}>
+            Nama Pemesan
+          </Text>
+          <Text>
+            {order.customerName}
+          </Text>
+        </Box>
+        <Box>
+          <Text fontSize={"lg"} fontWeight={"bold"}>
+            Ongkos Kirim
+          </Text>
+          <Text>
+            {order.salary}
+          </Text>
+        </Box>
+      </Stack>
+    </CardBody>
+  </Card>
+  );
+}
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 86abc11..4981eaf 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -30,8 +30,8 @@ const NAV_ITEMS: Array<NavItem> = [
     href: 'Balance',
   },
   {
-    label: 'History',
-    href: 'History',
+    label: 'Available Order',
+    href: 'AvailableOrder',
   },
   {
     label: 'Promo',
diff --git a/src/interfaces/AvailableOrderInterface.ts b/src/interfaces/AvailableOrderInterface.ts
new file mode 100644
index 0000000..d566fbf
--- /dev/null
+++ b/src/interfaces/AvailableOrderInterface.ts
@@ -0,0 +1,6 @@
+
+export default interface AvailableOrderInterface {
+    address : string,
+    customerName : string,
+    salary : number
+}
diff --git a/src/pages/AvailableOrder.tsx b/src/pages/AvailableOrder.tsx
index dbc863a..baa890d 100644
--- a/src/pages/AvailableOrder.tsx
+++ b/src/pages/AvailableOrder.tsx
@@ -1 +1,65 @@
-// TODO : 
\ No newline at end of file
+import { 
+  Box, 
+  Heading,
+  Stack,
+} from '@chakra-ui/react'
+import AvailableOrderInterface from '../interfaces/AvailableOrderInterface';
+import { useState } from 'react'
+import AvailableOrderCard from '../components/AvailableOrderCard';
+
+// TODO : fetch data from SOAP
+const dummyData : AvailableOrderInterface[] = [
+  {
+    address : "jl. imam bonjol no.69",
+    customerName : "ukin",
+    salary : 100
+  },
+  {
+    address : "bullet",
+    customerName : "ishraul",
+    salary : 1111
+  },
+  {
+    address : "jl.ngawi",
+    customerName : "rusdi",
+    salary : 69
+  },
+  {
+    address : "jl.ngawi",
+    customerName : "rusdi",
+    salary : 69
+  },
+  {
+    address : "jl.ngawi",
+    customerName : "rusdi",
+    salary : 69
+  },
+  {
+    address : "jl.ngawi",
+    customerName : "rusdi",
+    salary : 69
+  }
+];
+
+export default function AvailableOrder() {
+  const [orders, setOrders] = useState<AvailableOrderInterface[]>(dummyData);
+
+  return (
+    <Box
+      bg={"red.800"}>
+      <Stack
+        minH={'90vh'}
+        py={{ base: 2 }}
+        px={{ base: 4 }}
+        align={'center'}
+        >
+        <Heading>
+          Pesanan yang tersedia
+        </Heading>
+        {orders.map(order => (
+          <AvailableOrderCard order={order}/>
+        ))}
+      </Stack>
+    </Box>
+  );
+}
diff --git a/src/pages/Balance.tsx b/src/pages/Balance.tsx
index 1657201..0908398 100644
--- a/src/pages/Balance.tsx
+++ b/src/pages/Balance.tsx
@@ -44,7 +44,7 @@ export default function Balance() {
       console.log(res);
       setBalance(res.data);
     });
-  }, []);
+  }, [username]);
 
   return (
     <Flex
-- 
GitLab