From 999c539ab43c8cb40e5796c3fd179e99a99bf712 Mon Sep 17 00:00:00 2001
From: DewanaGustavus <76590469+DewanaGustavus@users.noreply.github.com>
Date: Thu, 16 Nov 2023 00:05:22 +0700
Subject: [PATCH] feat: history page

---
 src/App.tsx                        |  2 +
 src/components/HistoryCard.tsx     | 68 +++++++++++++++++++++++++++-
 src/components/Navbar.tsx          |  4 ++
 src/interfaces/HistoryInterface.ts |  7 +++
 src/pages/History.tsx              | 73 +++++++++++++++++++++++++++++-
 5 files changed, 152 insertions(+), 2 deletions(-)
 create mode 100644 src/interfaces/HistoryInterface.ts

diff --git a/src/App.tsx b/src/App.tsx
index f784d87..2149260 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -10,6 +10,7 @@ import AvailableOrder from './pages/AvailableOrder'
 import AvailableOrderDetail from './pages/AvailableOrderDetail'
 import PickedOrder from './pages/PickedOrder'
 import PickedOrderDetail from './pages/PickedOrderDetail'
+import History from './pages/History'
 
 function App() {
 
@@ -24,6 +25,7 @@ function App() {
           <Route path='/AvailableOrderDetail' element={<AvailableOrderDetail/>}/>
           <Route path='/PickedOrder' element={<PickedOrder/>}/>
           <Route path='/PickedOrderDetail' element={<PickedOrderDetail/>}/>
+          <Route path='/History' element={<History/>}/>
           <Route path='/Logout' element={<Logout/>}/>
           <Route path='*' element={<NotFound/>}/>
         </Routes>
diff --git a/src/components/HistoryCard.tsx b/src/components/HistoryCard.tsx
index 6e698ac..36bc4b0 100644
--- a/src/components/HistoryCard.tsx
+++ b/src/components/HistoryCard.tsx
@@ -1 +1,67 @@
-// TODO : 
+import { 
+  Box, 
+  Card, 
+  CardBody, 
+  CardHeader, 
+  Heading,
+  LinkBox,
+  LinkOverlay,
+  Stack,
+  StackDivider,
+  Text
+} from '@chakra-ui/react'
+import HistoryInterface from '../interfaces/HistoryInterface';
+
+type paramInterface = {history : HistoryInterface};
+
+export default function HistoryCard({history} : paramInterface) {
+  return (
+  <Card
+    width={"80%"}
+    marginY={3}
+    marginX={10}
+    borderColor={"black"}
+    borderRadius={20}
+    >
+    <LinkBox>
+      <CardHeader>
+        <Heading>
+          <LinkOverlay href="/HistoryDetail">
+            {history.address}
+          </LinkOverlay>
+        </Heading>
+      </CardHeader>
+      <CardBody>
+        <Stack divider={<StackDivider/>} spacing={1}>
+          <Box>
+            <Text fontSize={"lg"} fontWeight={"bold"}>
+              Nama Pemesan
+            </Text>
+            <Text>
+              {history.customerName}
+            </Text>
+          </Box>
+          <Box>
+            <Text fontSize={"lg"} fontWeight={"bold"}>
+              Ongkos Kirim
+            </Text>
+            <Text>
+              {history.salary}
+            </Text>
+          </Box>
+          <Box>
+            <Text fontSize={"lg"} fontWeight={"bold"}>
+              Rating
+            </Text>
+            <Text>
+              {/* TODO : icon bintang */}
+              {history.rating === 0 ? "Belum di rating" : history.rating}
+            </Text>
+          </Box>
+        </Stack>
+      </CardBody>
+    </LinkBox>
+  </Card>
+  );
+}
+  
\ No newline at end of file
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 1b3c40b..d69a323 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -37,6 +37,10 @@ const NAV_ITEMS: Array<NavItem> = [
     label: 'Picked Order',
     href: 'PickedOrder',
   },
+  {
+    label: 'History',
+    href: 'History',
+  },
 ]
 
 export default function Navbar() {
diff --git a/src/interfaces/HistoryInterface.ts b/src/interfaces/HistoryInterface.ts
new file mode 100644
index 0000000..542827c
--- /dev/null
+++ b/src/interfaces/HistoryInterface.ts
@@ -0,0 +1,7 @@
+
+export default interface HistoryInterface {
+    address : string
+    customerName : string
+    salary : number
+    rating : number
+}
diff --git a/src/pages/History.tsx b/src/pages/History.tsx
index 6e698ac..f37e876 100644
--- a/src/pages/History.tsx
+++ b/src/pages/History.tsx
@@ -1 +1,72 @@
-// TODO : 
+import { 
+  Box, 
+  Heading,
+  Stack,
+} from '@chakra-ui/react'
+import HistoryInterface from '../interfaces/HistoryInterface';
+import { useState } from 'react'
+import HistoryCard from '../components/HistoryCard';
+
+// TODO : fetch data from SOAP
+const dummyData : HistoryInterface[] = [
+  {
+    address : "jl. imam bonjol no.69",
+    customerName : "ukin",
+    salary : 100,
+    rating : 0
+  },
+  {
+    address : "bullet",
+    customerName : "ishraul",
+    salary : 1111,
+    rating : 2
+  },
+  {
+    address : "jl.ngawi",
+    customerName : "rusdi",
+    salary : 69,
+    rating : 3
+  },
+  {
+    address : "jl.ngawi",
+    customerName : "rusdi",
+    salary : 69,
+    rating : 5
+  },
+  {
+    address : "jl.ngawi",
+    customerName : "rusdi",
+    salary : 69,
+    rating : 5
+  },
+  {
+    address : "jl.ngawi",
+    customerName : "rusdi",
+    salary : 69,
+    rating : 5
+  }
+];
+
+export default function History() {
+  const [histories, setHistories] = useState<HistoryInterface[]>(dummyData);
+
+  return (
+    <Box
+      bg={"red.800"}>
+      <Stack
+        minH={'90vh'}
+        py={{ base: 2 }}
+        px={{ base: 4 }}
+        align={'center'}
+        >
+        <Heading>
+          Pesanan yang tersedia
+        </Heading>
+        {histories.map(history => (
+          <HistoryCard history={history}/>
+        ))}
+      </Stack>
+    </Box>
+  );
+}
+  
\ No newline at end of file
-- 
GitLab