layout list page

package-lock.json

@@ -1,12 +1,11 @@
 {
-  "name": "react-chakra",
+  "name": "react-kasiraja-web",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "react-chakra",
+      "version": "1.0.0",
-      "version": "0.1.0",
       "dependencies": {
         "@chakra-ui/icons": "^1.0.15",
         "@chakra-ui/react": "^1.6.6",
@@ -28,9 +27,11 @@
         "framer-motion": "^4.1.17",
         "is_js": "^0.9.0",
         "react": "^17.0.2",
+        "react-datepicker": "^4.2.0",
         "react-dom": "^17.0.2",
         "react-router-dom": "^5.2.0",
         "react-scripts": "4.0.3",
+        "swr": "^0.5.6",
         "web-vitals": "^1.1.2"
       }
     },
@@ -7114,6 +7115,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    },
     "node_modules/clean-css": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
@@ -8025,6 +8031,18 @@
         "node": ">=10"
       }
     },
+    "node_modules/date-fns": {
+      "version": "2.23.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.23.0.tgz",
+      "integrity": "sha512-5ycpauovVyAk0kXNZz6ZoB9AYMZB4DObse7P3BPWmyEjXNORTI8EJ6X0uaSAq4sCHzM1uajzrkr6HnsLQpxGXA==",
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
@@ -8325,6 +8343,14 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/dequal": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.2.tgz",
+      "integrity": "sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/des.js": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.1.tgz",
@@ -17739,6 +17765,32 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/react-datepicker": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.2.0.tgz",
+      "integrity": "sha512-TR6vqqnGP2DDqrAtSrLseoN4fjkcQEOChwmMITpU45TiPey8eUhvI1TiGf4PFPQ1hvZshljH48De6nJMmiTf9g==",
+      "dependencies": {
+        "@popperjs/core": "^2.9.2",
+        "classnames": "^2.2.6",
+        "date-fns": "^2.0.1",
+        "prop-types": "^15.7.2",
+        "react-onclickoutside": "^6.10.0",
+        "react-popper": "^2.2.5"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17",
+        "react-dom": "^16.9.0 || ^17"
+      }
+    },
+    "node_modules/react-datepicker/node_modules/@popperjs/core": {
+      "version": "2.9.3",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.3.tgz",
+      "integrity": "sha512-xDu17cEfh7Kid/d95kB6tZsLOmSWKCZKtprnhVepjsSaCij+lM3mItSJDuuHDMbCWTh8Ejmebwb+KONcCJ0eXQ==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "11.0.4",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
@@ -17934,6 +17986,32 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-onclickoutside": {
+      "version": "6.11.2",
+      "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.11.2.tgz",
+      "integrity": "sha512-640486eSwU/t5iD6yeTlefma8dI3bxPXD93hM9JGKyYITAd0P1JFkkcDeyHZRqNpY/fv1YW0Fad9BXr44OY8wQ==",
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/Pomax/react-onclickoutside/blob/master/FUNDING.md"
+      },
+      "peerDependencies": {
+        "react": "^15.5.x || ^16.x || ^17.x",
+        "react-dom": "^15.5.x || ^16.x || ^17.x"
+      }
+    },
+    "node_modules/react-popper": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
+      "integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==",
+      "dependencies": {
+        "react-fast-compare": "^3.0.1",
+        "warning": "^4.0.2"
+      },
+      "peerDependencies": {
+        "@popperjs/core": "^2.0.0",
+        "react": "^16.8.0 || ^17"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
@@ -20508,6 +20586,17 @@
         "boolbase": "~1.0.0"
       }
     },
+    "node_modules/swr": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-0.5.6.tgz",
+      "integrity": "sha512-Bmx3L4geMZjYT5S2Z6EE6/5Cx6v1Ka0LhqZKq8d6WL2eu9y6gHWz3dUzfIK/ymZVHVfwT/EweFXiYGgfifei3w==",
+      "dependencies": {
+        "dequal": "2.0.2"
+      },
+      "peerDependencies": {
+        "react": "^16.11.0 || ^17.0.0"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -28662,6 +28751,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    },
     "clean-css": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
@@ -29399,6 +29493,11 @@
         "whatwg-url": "^8.0.0"
       }
     },
+    "date-fns": {
+      "version": "2.23.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.23.0.tgz",
+      "integrity": "sha512-5ycpauovVyAk0kXNZz6ZoB9AYMZB4DObse7P3BPWmyEjXNORTI8EJ6X0uaSAq4sCHzM1uajzrkr6HnsLQpxGXA=="
+    },
     "debug": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
@@ -29622,6 +29721,11 @@
       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
       "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
     },
+    "dequal": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.2.tgz",
+      "integrity": "sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug=="
+    },
     "des.js": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.1.tgz",
@@ -36840,6 +36944,26 @@
         }
       }
     },
+    "react-datepicker": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.2.0.tgz",
+      "integrity": "sha512-TR6vqqnGP2DDqrAtSrLseoN4fjkcQEOChwmMITpU45TiPey8eUhvI1TiGf4PFPQ1hvZshljH48De6nJMmiTf9g==",
+      "requires": {
+        "@popperjs/core": "^2.9.2",
+        "classnames": "^2.2.6",
+        "date-fns": "^2.0.1",
+        "prop-types": "^15.7.2",
+        "react-onclickoutside": "^6.10.0",
+        "react-popper": "^2.2.5"
+      },
+      "dependencies": {
+        "@popperjs/core": {
+          "version": "2.9.3",
+          "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.3.tgz",
+          "integrity": "sha512-xDu17cEfh7Kid/d95kB6tZsLOmSWKCZKtprnhVepjsSaCij+lM3mItSJDuuHDMbCWTh8Ejmebwb+KONcCJ0eXQ=="
+        }
+      }
+    },
     "react-dev-utils": {
       "version": "11.0.4",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
@@ -36993,6 +37117,21 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "react-onclickoutside": {
+      "version": "6.11.2",
+      "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.11.2.tgz",
+      "integrity": "sha512-640486eSwU/t5iD6yeTlefma8dI3bxPXD93hM9JGKyYITAd0P1JFkkcDeyHZRqNpY/fv1YW0Fad9BXr44OY8wQ==",
+      "requires": {}
+    },
+    "react-popper": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
+      "integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==",
+      "requires": {
+        "react-fast-compare": "^3.0.1",
+        "warning": "^4.0.2"
+      }
+    },
     "react-refresh": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
@@ -39053,6 +39192,14 @@
         }
       }
     },
+    "swr": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-0.5.6.tgz",
+      "integrity": "sha512-Bmx3L4geMZjYT5S2Z6EE6/5Cx6v1Ka0LhqZKq8d6WL2eu9y6gHWz3dUzfIK/ymZVHVfwT/EweFXiYGgfifei3w==",
+      "requires": {
+        "dequal": "2.0.2"
+      }
+    },
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",

package.json

@@ -23,9 +23,11 @@
     "framer-motion": "^4.1.17",
     "is_js": "^0.9.0",
     "react": "^17.0.2",
+    "react-datepicker": "^4.2.0",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
+    "swr": "^0.5.6",
     "web-vitals": "^1.1.2"
   },
   "scripts": {

src/App.js

@@ -9,6 +9,7 @@ import {
   Route,
   BrowserRouter,
 } from 'react-router-dom'
+import "react-datepicker/dist/react-datepicker.css";
 import "@fontsource/raleway/400.css"
 import "@fontsource/open-sans/700.css"
 import "./axiosSetup"

src/components/Common/Card.js

@@ -0,0 +1,9 @@
+import { Box } from "@chakra-ui/react"
+
+export default function Card(props) {
+  return (
+    <Box bg="white" shadow="lg" minW="15rem" minH="1" rounded="md" p="3.5" mx="0.5rem">
+      {props.children}
+    </Box>
+  )
+}

src/components/Common/DatePickerFilter.js

@@ -0,0 +1,89 @@
+import { 
+  Box, Flex, Input, InputGroup, InputRightElement, Popover, 
+  PopoverTrigger,
+  PopoverContent,
+  PopoverBody,
+} from "@chakra-ui/react"
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import DatePicker from "react-datepicker"
+import { useState } from "react"
+import { formatDate } from "../../utils"
+
+export default function DatePickerFilter() {
+  const date = new Date()
+
+  const [startDate, setStartDate] = useState(date)
+  const [endDate, setEndDate] = useState(new Date(date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000))))
+
+  const [startDateOpen, setStartDateOpen] = useState(false)
+  const [endDateOpen, setEndDateOpen] = useState(false)
+
+  return (
+    <Flex direction={{base: "column", md: "row"}} mt="5" mb="1" gridGap="2">
+        <Box flexDirection="column" flex="1">
+          <Popover
+            isOpen={startDateOpen}
+          >
+            <PopoverTrigger>
+              <InputGroup>
+                <Input 
+                  value={formatDate(startDate)}
+                  bg="gray.200" 
+                  readOnly={true} 
+                  focusBorderColor="red.500"
+                  onClick={() => setStartDateOpen(!startDateOpen)}
+                />
+                <InputRightElement children={<FontAwesomeIcon icon="calendar-alt" />} />
+              </InputGroup>
+            </PopoverTrigger>
+            <PopoverContent bg="transparent" border="none" maxW="min-content">
+              <PopoverBody maxW="fit-content" p="0" minW="0rem">
+                <DatePicker 
+                  style={{padding: "none"}}
+                  selected={startDate}
+                  onChange={(date) => {
+                    setStartDate(date)
+                    if(date > endDate) {
+                      setEndDate(date)
+                    }
+                    setStartDateOpen(!startDateOpen)
+                  }}
+                  inline />
+              </PopoverBody>
+            </PopoverContent>
+          </Popover>
+        </Box>
+        <Box flexDirection="column" flex="1">
+          <Popover
+            isOpen={endDateOpen}
+          >
+            <PopoverTrigger>
+              <InputGroup>
+                <Input 
+                  value={formatDate(endDate)}
+                  bg="gray.200" 
+                  readOnly={true} 
+                  focusBorderColor="red.500"
+                  onClick={() => setEndDateOpen(!endDateOpen)}
+                />
+                <InputRightElement children={<FontAwesomeIcon icon="calendar-alt" />} />
+              </InputGroup>
+            </PopoverTrigger>
+          <PopoverContent bg="transparent" border="none" maxW="min-content">
+            <PopoverBody maxW="fit-content" p="0" minW="0rem">
+              <DatePicker
+                minDate={startDate}
+                selected={endDate} 
+                onChange={(date) => {
+                  setEndDate(date)
+                  setEndDateOpen(!endDateOpen)}
+                } 
+                inline
+              />
+            </PopoverBody>
+            </PopoverContent>
+          </Popover>
+        </Box>
+      </Flex>
+  )
+}

src/components/Common/Pagination.js

@@ -0,0 +1,17 @@
+import { HStack, Box } from "@chakra-ui/layout"
+export function usePaginate() {}
+export function Pagination() {
+  return (
+    <HStack spacing="2" mt="3" justifyContent="flex-end">
+      <Box px="3" py="1" bg="red.200" outlineColor="red.700" rounded="3xl" color="white" _hover={{ bg: "red:700" }}>
+        {"<"}
+      </Box>
+      <Box px="3" py="1" bg="red.500" outlineColor="red.700" rounded="3xl" color="white" _hover={{ bg: "red:700" }}>
+        1
+      </Box>
+      <Box px="3" py="1" bg="red.500" outlineColor="red.700" rounded="3xl" color="white" _hover={{ bg: "red:700" }}>
+        &gt;
+      </Box>
+    </HStack>
+  )
+}

src/components/Layout/Header.js

@@ -13,7 +13,7 @@ import { ChevronRightIcon } from '@chakra-ui/icons'
 const Header = ({ showSidebarButton = true, onShowSidebar, onLogout, user }) => {
 
   return (
-    <Flex bg="red" p={2} color="white" justifyContent="end">
+    <Flex bg="red" p={2} color="white" justifyContent="end" minW="100%">
       <Box flex="1">
         {showSidebarButton && (
           <IconButton

src/layouts/Dashboard.js

@@ -55,7 +55,7 @@ export default function DashboardLayout(props) {
           onLogout={handleLogout}
           user={user}
         />
-        <Container maxW="105rem" pt="10">
+        <Container maxW={{base: "90rem", xl: "110rem"}} py="10" bg="gray.100" minH={{ base: "38rem", sm: "40rem", xl: "53.5rem"}}>
           {/* Content */}
           <Suspense fallback={<Loading/>}>
             <Switch>
@@ -75,6 +75,9 @@ export default function DashboardLayout(props) {
             </Switch>
           </Suspense>
         </Container>
+        <Box bg="red" minH="1" maxW={{base: "90rem", xl: "110rem"}} p="4" color="white">
+          &copy; {(new Date()).getFullYear()} kasirAja dev
+        </Box>
       </Box>
     </Flex>
   )

src/utils/index.js

@@ -0,0 +1,3 @@
+export const formatDate = (date) => {
+  return date.toLocaleDateString()
+}

src/views/dashboard/Dashboard.js

@@ -1,22 +1,33 @@
 import {
-  Flex,
+  Flex, Stat, StatLabel, StatNumber, StatHelpText, StatArrow
-  Box,
 } from "@chakra-ui/react"
+import Card from "../../components/Common/Card"
 
 export default function Dashboard() {
   return (
     <Flex direction="column">
-      <Flex direction="row" justifyContent="space-between">
+      <Flex flexShrink="revert" direction="row" justifyContent="flex-start">
-        <Box bg="green.400" shadow="lg" minW="sm" minH="sm">
+        <Card>
-          Something
+          <Stat>
-        </Box>
+            <StatLabel>Penjualan</StatLabel>
-        <Box bg="green.400">
+            <StatNumber>345.670</StatNumber>
-          Something
+            <StatHelpText>
-        </Box>
+              <StatArrow type="increase" />
+              23.36% from yesterday
+            </StatHelpText>
+          </Stat>
+        </Card>
+        <Card>
+          <Stat>
+            <StatLabel>Pembelian</StatLabel>
+            <StatNumber>145.670</StatNumber>
+            <StatHelpText>
+              <StatArrow type="decrease" />
+              3.36% from yesterday
+            </StatHelpText>
+          </Stat>
+        </Card>
       </Flex>
-      <div>
-        Dashboard
-      </div>
     </Flex>
   )
 }

src/views/products/List.js

@@ -1,12 +1,44 @@
-import { Box } from "@chakra-ui/react";
+import {
-import { Link } from "react-router-dom";
+  Button,
+  Table,
+  Thead,
+  Tr,
+  Td,
+  Th,
+  Tbody
+} from "@chakra-ui/react"
+import Card from "../../components/Common/Card"
+import DatePickerFilter from "../../components/Common/DatePickerFilter"
 
 export default function List() {
+  const arr = [1,2,3,4,5,6,7,8,9,10,11,12]
   return (
-    <Box bg="red.600" w="max" h="max">
+    <Card>
-      <Link to="/products/detail">
+      {/* Tombol Create */}
-        Halo
+      <Button size="md">Tambah</Button>
-      </Link>
+      {/* Filter Tanggal  */}
-    </Box>
+      <DatePickerFilter/>
+      {/* daftar products */}
+      <Table variant="simple" mt="2" colorScheme="whatsapp">
+        <Thead>
+          <Tr>
+            <Th>To convert</Th>
+            <Th>into</Th>
+            <Th isNumeric>multiply by</Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          {
+            arr.map(() => (
+              <Tr onClick={() => {alert('Hello')}}>
+                <Td>inches</Td>
+                <Td>millimetres (mm)</Td>
+                <Td isNumeric>25.4</Td>
+              </Tr>
+            ))
+          }
+        </Tbody>
+      </Table>
+    </Card>
   )
 }