From cecfe95901fe9d365358f9cf7a4884bb0c8136ce Mon Sep 17 00:00:00 2001 From: Aji Kamaludin Date: Tue, 17 Aug 2021 14:02:40 +0700 Subject: [PATCH] layout list page --- package-lock.json | 155 +++++++++++++++++++++- package.json | 2 + src/App.js | 1 + src/components/Common/Card.js | 9 ++ src/components/Common/DatePickerFilter.js | 89 +++++++++++++ src/components/Common/Pagination.js | 17 +++ src/components/Layout/Header.js | 2 +- src/layouts/Dashboard.js | 5 +- src/utils/index.js | 3 + src/views/dashboard/Dashboard.js | 35 +++-- src/views/products/List.js | 46 ++++++- 11 files changed, 339 insertions(+), 25 deletions(-) create mode 100644 src/components/Common/Card.js create mode 100644 src/components/Common/DatePickerFilter.js create mode 100644 src/components/Common/Pagination.js create mode 100644 src/utils/index.js diff --git a/package-lock.json b/package-lock.json index 16e87d7..84d00d3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,11 @@ { - "name": "react-chakra", - "version": "0.1.0", + "name": "react-kasiraja-web", + "version": "1.0.0", "lockfileVersion": 2, "requires": true, "packages": { "": { - "name": "react-chakra", - "version": "0.1.0", + "version": "1.0.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", diff --git a/package.json b/package.json index 8a45ece..b878140 100644 --- a/package.json +++ b/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": { diff --git a/src/App.js b/src/App.js index b620dbf..7f16efa 100644 --- a/src/App.js +++ b/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" diff --git a/src/components/Common/Card.js b/src/components/Common/Card.js new file mode 100644 index 0000000..308c61d --- /dev/null +++ b/src/components/Common/Card.js @@ -0,0 +1,9 @@ +import { Box } from "@chakra-ui/react" + +export default function Card(props) { + return ( + + {props.children} + + ) +} \ No newline at end of file diff --git a/src/components/Common/DatePickerFilter.js b/src/components/Common/DatePickerFilter.js new file mode 100644 index 0000000..ae297b1 --- /dev/null +++ b/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 ( + + + + + + setStartDateOpen(!startDateOpen)} + /> + } /> + + + + + { + setStartDate(date) + if(date > endDate) { + setEndDate(date) + } + setStartDateOpen(!startDateOpen) + }} + inline /> + + + + + + + + + setEndDateOpen(!endDateOpen)} + /> + } /> + + + + + { + setEndDate(date) + setEndDateOpen(!endDateOpen)} + } + inline + /> + + + + + + ) +} \ No newline at end of file diff --git a/src/components/Common/Pagination.js b/src/components/Common/Pagination.js new file mode 100644 index 0000000..c471547 --- /dev/null +++ b/src/components/Common/Pagination.js @@ -0,0 +1,17 @@ +import { HStack, Box } from "@chakra-ui/layout" +export function usePaginate() {} +export function Pagination() { + return ( + + + {"<"} + + + 1 + + + > + + + ) +} \ No newline at end of file diff --git a/src/components/Layout/Header.js b/src/components/Layout/Header.js index 5d96545..ddeead9 100644 --- a/src/components/Layout/Header.js +++ b/src/components/Layout/Header.js @@ -13,7 +13,7 @@ import { ChevronRightIcon } from '@chakra-ui/icons' const Header = ({ showSidebarButton = true, onShowSidebar, onLogout, user }) => { return ( - + {showSidebarButton && ( - + {/* Content */} }> @@ -75,6 +75,9 @@ export default function DashboardLayout(props) { + + © {(new Date()).getFullYear()} kasirAja dev + ) diff --git a/src/utils/index.js b/src/utils/index.js new file mode 100644 index 0000000..717bee1 --- /dev/null +++ b/src/utils/index.js @@ -0,0 +1,3 @@ +export const formatDate = (date) => { + return date.toLocaleDateString() +} \ No newline at end of file diff --git a/src/views/dashboard/Dashboard.js b/src/views/dashboard/Dashboard.js index dfc6439..4c40cb6 100644 --- a/src/views/dashboard/Dashboard.js +++ b/src/views/dashboard/Dashboard.js @@ -1,22 +1,33 @@ import { - Flex, - Box, + Flex, Stat, StatLabel, StatNumber, StatHelpText, StatArrow } from "@chakra-ui/react" +import Card from "../../components/Common/Card" export default function Dashboard() { return ( - - - Something - - - Something - + + + + Penjualan + 345.670 + + + 23.36% from yesterday + + + + + + Pembelian + 145.670 + + + 3.36% from yesterday + + + -
- Dashboard -
) } \ No newline at end of file diff --git a/src/views/products/List.js b/src/views/products/List.js index ae72f3b..911fcd2 100644 --- a/src/views/products/List.js +++ b/src/views/products/List.js @@ -1,12 +1,44 @@ -import { Box } from "@chakra-ui/react"; -import { Link } from "react-router-dom"; +import { + 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 ( - - - Halo - - + + {/* Tombol Create */} + + {/* Filter Tanggal */} + + {/* daftar products */} + + + + + + + + + + { + arr.map(() => ( + {alert('Hello')}}> + + + + + )) + } + +
To convertintomultiply by
inchesmillimetres (mm)25.4
+ ) } \ No newline at end of file