From cc8232c2777a7eb15d99073289f1a40291f901fb Mon Sep 17 00:00:00 2001
From: DewanaGustavus <76590469+DewanaGustavus@users.noreply.github.com>
Date: Wed, 15 Nov 2023 23:57:10 +0700
Subject: [PATCH] feat: picked order detail page
---
src/App.tsx | 2 +
src/interfaces/PickedOrderDetailInterface.ts | 9 ++
src/pages/AvailableOrderDetail.tsx | 1 -
src/pages/PickedOrderDetail.tsx | 155 ++++++++++++++++++-
4 files changed, 165 insertions(+), 2 deletions(-)
create mode 100644 src/interfaces/PickedOrderDetailInterface.ts
diff --git a/src/App.tsx b/src/App.tsx
index a057fb9..f784d87 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -9,6 +9,7 @@ import Balance from './pages/Balance'
import AvailableOrder from './pages/AvailableOrder'
import AvailableOrderDetail from './pages/AvailableOrderDetail'
import PickedOrder from './pages/PickedOrder'
+import PickedOrderDetail from './pages/PickedOrderDetail'
function App() {
@@ -22,6 +23,7 @@ function App() {
<Route path='/AvailableOrder' element={<AvailableOrder/>}/>
<Route path='/AvailableOrderDetail' element={<AvailableOrderDetail/>}/>
<Route path='/PickedOrder' element={<PickedOrder/>}/>
+ <Route path='/PickedOrderDetail' element={<PickedOrderDetail/>}/>
<Route path='/Logout' element={<Logout/>}/>
<Route path='*' element={<NotFound/>}/>
</Routes>
diff --git a/src/interfaces/PickedOrderDetailInterface.ts b/src/interfaces/PickedOrderDetailInterface.ts
new file mode 100644
index 0000000..fd6fd98
--- /dev/null
+++ b/src/interfaces/PickedOrderDetailInterface.ts
@@ -0,0 +1,9 @@
+import OrderDetail from "./OrderDetail"
+
+export default interface PickedOrderDetailInterface {
+ address : string
+ customerName : string
+ salary : number
+ description : string
+ orderDetails : OrderDetail[];
+}
diff --git a/src/pages/AvailableOrderDetail.tsx b/src/pages/AvailableOrderDetail.tsx
index ce1d5f2..59d9f3e 100644
--- a/src/pages/AvailableOrderDetail.tsx
+++ b/src/pages/AvailableOrderDetail.tsx
@@ -112,7 +112,6 @@ const dummyData : AvailableOrderDetailInterface = {
>
Ambil Order
</Button>
- {/* TODO : table */}
</Stack>
</Stack>
</Box>
diff --git a/src/pages/PickedOrderDetail.tsx b/src/pages/PickedOrderDetail.tsx
index 6e698ac..b74b5c9 100644
--- a/src/pages/PickedOrderDetail.tsx
+++ b/src/pages/PickedOrderDetail.tsx
@@ -1 +1,154 @@
-// TODO :
+import {
+ Box,
+ Button,
+ FormControl,
+ FormLabel,
+ Heading,
+ Input,
+ Stack,
+ StackDivider,
+ Table,
+ TableContainer,
+ Tbody,
+ Td,
+ Text,
+ Th,
+ Thead,
+ Tr,
+} from '@chakra-ui/react'
+import { useState } from 'react'
+import PickedOrderDetailInterface from '../interfaces/PickedOrderDetailInterface';
+
+ // TODO : fetch data from SOAP
+const dummyData : PickedOrderDetailInterface = {
+ address : "jl.ngawi",
+ customerName : "rusdi",
+ salary : 69,
+ description : "aku akan datang",
+ 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 PickedOrderDetail() {
+ const [order, setOrder] = useState<PickedOrderDetailInterface>(dummyData);
+ const [newDescription, setNewDescription] = useState("");
+ // 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>
+
+ <Stack spacing={4}>
+ <FormControl id="new-description">
+ <FormLabel>Update Keterangan</FormLabel>
+ <Input name="new-description" type="text"
+ value={newDescription}
+ onChange={(e) => setNewDescription(e.target.value)}
+ borderColor={"black"}
+ />
+ </FormControl>
+ <Button
+ bg={'blue.400'}
+ color={'white'}
+ _hover={{
+ bg: 'blue.500',
+ }}
+ type="submit">
+ Ubah Keterangan
+ </Button>
+ <Button
+ bg={'blue.400'}
+ color={'white'}
+ _hover={{
+ bg: 'blue.500',
+ }}
+ >
+ Transit Pesanan
+ </Button>
+ <Button
+ display={{ base: 'none', md: 'inline-flex' }}
+ fontSize={'sm'}
+ fontWeight={600}
+ bg={"pink.300"}
+ color={'black'}
+ _hover={{
+ bg: 'blue.300',
+ }}
+ >
+ Selesaikan Pengantaran
+ </Button>
+ </Stack>
+ </Stack>
+ </Stack>
+ </Box>
+ );
+}
+
\ No newline at end of file
--
GitLab