From 55cfff1cea7c4a7d19a9957cd34557881b97cc2f Mon Sep 17 00:00:00 2001
From: DewanaGustavus <76590469+DewanaGustavus@users.noreply.github.com>
Date: Wed, 15 Nov 2023 22:17:05 +0700
Subject: [PATCH] feat: available order detail page
---
src/App.tsx | 2 +
src/components/AvailableOrderCard.tsx | 56 ++++----
.../AvailableOrderDetailInterface.ts | 8 ++
src/interfaces/AvailableOrderInterface.ts | 4 +-
src/interfaces/OrderDetailInterface.ts | 5 +
src/pages/AvailableOrderDetail.tsx | 122 +++++++++++++++++-
6 files changed, 169 insertions(+), 28 deletions(-)
create mode 100644 src/interfaces/AvailableOrderDetailInterface.ts
create mode 100644 src/interfaces/OrderDetailInterface.ts
diff --git a/src/App.tsx b/src/App.tsx
index 8669e22..6245fc1 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,6 +7,7 @@ import Logout from './utils/Logout'
import { isLoggedIn } from './utils/LocalStorage'
import Balance from './pages/Balance'
import AvailableOrder from './pages/AvailableOrder'
+import AvailableOrderDetail from './pages/AvailableOrderDetail'
function App() {
@@ -18,6 +19,7 @@ function App() {
<Routes>
<Route path='/Balance' element={<Balance/>}/>
<Route path='/AvailableOrder' element={<AvailableOrder/>}/>
+ <Route path='/AvailableOrderDetail' element={<AvailableOrderDetail/>}/>
<Route path='/Logout' element={<Logout/>}/>
<Route path='*' element={<NotFound/>}/>
</Routes>
diff --git a/src/components/AvailableOrderCard.tsx b/src/components/AvailableOrderCard.tsx
index 458c430..52c6f10 100644
--- a/src/components/AvailableOrderCard.tsx
+++ b/src/components/AvailableOrderCard.tsx
@@ -4,6 +4,8 @@ import {
CardBody,
CardHeader,
Heading,
+ LinkBox,
+ LinkOverlay,
Stack,
StackDivider,
Text
@@ -21,31 +23,35 @@ export default function AvailableOrderCard({order} : paramInterface) {
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>
+ <LinkBox>
+ <CardHeader>
+ <Heading>
+ <LinkOverlay href="/AvailableOrderDetail">
+ {order.address}
+ </LinkOverlay>
+ </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>
+ </LinkBox>
</Card>
);
}
diff --git a/src/interfaces/AvailableOrderDetailInterface.ts b/src/interfaces/AvailableOrderDetailInterface.ts
new file mode 100644
index 0000000..0bb0ca2
--- /dev/null
+++ b/src/interfaces/AvailableOrderDetailInterface.ts
@@ -0,0 +1,8 @@
+import OrderDetailInterface from "./OrderDetailInterface"
+
+export default interface AvailableOrderDetailInterface {
+ address : string
+ customerName : string
+ salary : number
+ orderDetails : OrderDetailInterface[]
+}
diff --git a/src/interfaces/AvailableOrderInterface.ts b/src/interfaces/AvailableOrderInterface.ts
index d566fbf..450b455 100644
--- a/src/interfaces/AvailableOrderInterface.ts
+++ b/src/interfaces/AvailableOrderInterface.ts
@@ -1,6 +1,6 @@
export default interface AvailableOrderInterface {
- address : string,
- customerName : string,
+ address : string
+ customerName : string
salary : number
}
diff --git a/src/interfaces/OrderDetailInterface.ts b/src/interfaces/OrderDetailInterface.ts
new file mode 100644
index 0000000..71920e5
--- /dev/null
+++ b/src/interfaces/OrderDetailInterface.ts
@@ -0,0 +1,5 @@
+
+export default interface OrderDetailInterface {
+ productName : string
+ quantity : number
+}
\ No newline at end of file
diff --git a/src/pages/AvailableOrderDetail.tsx b/src/pages/AvailableOrderDetail.tsx
index 6e698ac..ce1d5f2 100644
--- a/src/pages/AvailableOrderDetail.tsx
+++ b/src/pages/AvailableOrderDetail.tsx
@@ -1 +1,121 @@
-// TODO :
+import {
+ Box,
+ Button,
+ Heading,
+ Stack,
+ StackDivider,
+ Table,
+ TableContainer,
+ Tbody,
+ Td,
+ Text,
+ Th,
+ Thead,
+ Tr,
+} from '@chakra-ui/react'
+import { useState } from 'react'
+import AvailableOrderDetailInterface from '../interfaces/AvailableOrderDetailInterface';
+
+ // TODO : fetch data from SOAP
+const dummyData : AvailableOrderDetailInterface = {
+ address : "jl.ngawi",
+ customerName : "rusdi",
+ salary : 69,
+ orderDetails : [
+ {
+ productName : "pisau cukur",
+ quantity : 69
+ },
+ {
+ productName : "ivan gunawan",
+ quantity : 420
+ },
+ {
+ productName : "pisau cukur 2",
+ quantity : 692
+ },
+ {
+ productName : "ivan gunawan 2",
+ quantity : 4202
+ },
+ ]
+}
+
+ export default function AvailableOrderDetail() {
+ const [order, setOrder] = useState<AvailableOrderDetailInterface>(dummyData);
+ // TODO : implement pick order functionality
+
+ return (
+ <Box
+ minH={"95vh"}
+ py={10}
+ px={50}
+ bg={"red.800"}>
+ <Stack
+ align={'center'}
+ bg={"white"}
+ py={10}
+ >
+ <Heading p={5}>
+ {order.address}
+ </Heading>
+
+ <Stack divider={<StackDivider/>} spacing={2}>
+ <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>
+ <Box>
+ <Text fontSize={"lg"} fontWeight={"bold"} align={"center"}>
+ Detail Pesanan
+ </Text>
+ </Box>
+ <TableContainer>
+ <Table variant='simple'>
+ <Thead>
+ <Tr>
+ <Th>Nama Produk</Th>
+ <Th>Jumlah</Th>
+ </Tr>
+ </Thead>
+ <Tbody>
+ {order.orderDetails.map((detail) => (
+ <Tr>
+ <Td>{detail.productName}</Td>
+ <Td>{detail.quantity}</Td>
+ </Tr>
+ ))}
+ </Tbody>
+ </Table>
+ </TableContainer>
+ <Button
+ display={{ base: 'none', md: 'inline-flex' }}
+ fontSize={'sm'}
+ fontWeight={600}
+ bg={"pink.300"}
+ color={'black'}
+ _hover={{
+ bg: 'blue.300',
+ }}
+ >
+ Ambil Order
+ </Button>
+ {/* TODO : table */}
+ </Stack>
+ </Stack>
+ </Box>
+ );
+ }
+
\ No newline at end of file
--
GitLab