update template[

georgepiter · Apr 6, 2023 · d478383 · d478383
1 parent 6482c6d
commit d478383
Show file tree

Hide file tree

Showing 13 changed files with 150 additions and 152 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/DataTableBase.tsx b/src/components/DataTableBase.tsx
@@ -1,6 +1,7 @@
 import { useColorMode, useTheme } from "@chakra-ui/react";
 import DataTable,{ TableColumn } from "react-data-table-component";
 
+import classnames from "classnames";
 interface Props {
  columns: TableColumn<any>[];
  data: any[];
@@ -28,7 +29,7 @@ export default function DataTableBase({ columns, data, title = "" }: Props) {
  color:
  colorMode == "dark"
  ? theme.colors.gray["200"]
- : theme.colors.gray["500"],
+ : theme.colors.gray["800"],
  backgroundColor:
  colorMode == "dark" ? theme.colors.gray["800"] : "white",
  minHeight: "56px",
@@ -38,10 +39,10 @@ export default function DataTableBase({ columns, data, title = "" }: Props) {
  },
  headRow: {
  style: {
- fontSize: "15px",
+ fontSize: "16px",
  color:
  colorMode == "dark"
- ? theme.colors.gray["300"]
+ ? theme.colors.gray["200"]
  : theme.colors.gray["500"],
  backgroundColor:
  colorMode == "dark" ? theme.colors.gray["800"] : "white",
@@ -69,6 +70,7 @@ export default function DataTableBase({ columns, data, title = "" }: Props) {
  colorMode == "dark" ? theme.colors.gray["800"] : "white",
  },
  },
+
  pagination: {
  style: {
  color:
@@ -82,51 +84,14 @@ export default function DataTableBase({ columns, data, title = "" }: Props) {
  borderTopStyle: "solid",
  borderTopWidth: "1px",
  },
- pageButtonsStyle: {
- borderRadius: "50%",
- height: "40px",
- width: "40px",
- padding: "8px",
- margin: "px",
- cursor: "pointer",
- transition: "0.4s",
- color:
- colorMode == "dark"
- ? theme.colors.gray["900"]
- : theme.colors.gray["300"],
- fill:
- colorMode == "dark"
- ? theme.colors.gray["900"]
- : theme.colors.gray["300"],
- backgroundColor: "transparent",
- "&:disabled": {
- cursor: "unset",
- color:
- colorMode == "dark"
- ? theme.colors.gray["900"]
- : theme.colors.gray["100"],
- fill:
- colorMode == "dark"
- ? theme.colors.gray["900"]
- : theme.colors.gray["100"],
- },
- "&:hover:not(:disabled)": {
- backgroundColor:
- colorMode == "dark"
- ? theme.colors.gray["500"]
- : theme.colors.gray["50"],
- },
- "&:focus": {
- outline: "none",
- backgroundColor:
- colorMode == "dark"
- ? theme.colors.gray["500"]
- : theme.colors.gray["50"],
- },
- },
  },
  };
 
+ const paginationOptions = {
+ rowsPerPageText: "Página:",
+ rangeSeparatorText: "of",
+ };
+
  return (
  <DataTable
  title={title}
@@ -136,6 +101,10 @@ export default function DataTableBase({ columns, data, title = "" }: Props) {
  fixedHeaderScrollHeight="300px"
  customStyles={tableCustomStyles}
  noDataComponent="Nenhum registro encontrado."
+ paginationPerPage={5}
+ paginationRowsPerPageOptions={[5, 10, 20]}
+ className={colorMode === "dark" ? "dark" : "light"}
+ paginationComponentOptions={paginationOptions}
  />
  );
 }
diff --git a/src/components/tables/DebtsAllTable.tsx b/src/components/tables/DebtsAllTable.tsx
@@ -1,4 +1,4 @@
-import { useColorMode, Tag, HStack, Heading } from "@chakra-ui/react";
+import { useColorMode, Tag, HStack, Heading, Divider } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
 
 import { getAllDebtsByRegister } from "@/services/debt";
@@ -44,12 +44,12 @@ export default function DebtsAllTable({ userId }: Props) {
  name: "Status",
  selector: (row: any) => (
  <Tag
+ size="sm"
  variant="solid"
- colorScheme={
- row.status == "Aguardando Pagamento" ? "orange" : "green"
- }
+ borderRadius="full"
+ colorScheme={row.status == "AWAITING_PAYMENT" ? "orange" : "green"}
  >
- {row.status}
+ {row.status === "AWAITING_PAYMENT" ? "Aguardando Pagamento" : "Pago"}
  </Tag>
  ),
  },
@@ -101,6 +101,7 @@ export default function DebtsAllTable({ userId }: Props) {
  />
  </Heading>
  </HStack>
+ <Divider mt={2} />
  <DataTableBase columns={columns} data={debts} title="" />
  </Box>
  </>

diff --git a/src/components/tables/HistoryAllByRegisterTable.tsx b/src/components/tables/HistoryAllByRegisterTable.tsx
@@ -8,7 +8,10 @@ import {
  Stack,
  Text,
  useTheme,
- VStack
+ Divider,
+ VStack,
+ Heading,
+ Center
 } from "@chakra-ui/react";
 import {
  LineChart,
@@ -154,54 +157,63 @@ export default function HistoryAllByRegisterTable({ registerId }: Props) {
 
  return (
  <>
- <DataTableBase columns={columns} data={history} title="Histórico" />
- <HStack mt={5} spacing={6} mb={10}>
- <Box title="Saldo Anual">
- <Stack mt={5} w="100%">
- {history.length === 0 ? (
+ <Box>
+ <Heading as="h4" size="md">
+ Histórico
+ </Heading>
+ <Divider mt={2} />
+ <DataTableBase columns={columns} data={history} title="" />
+ </Box>
+
+ <HStack mt={5} spacing={6} mb={10}>
+ <Box title="Saldo Anual">
+ <Divider mt={2} />
+ <Stack mt={5} w="100%">
+ {history.length === 0 ? (
+ <Center>
  <Text>Nenhum registro encontrado.</Text>
- ) : (
-  <div style={{ width: "100%", height: 300 }}>
-  <ResponsiveContainer>
-  <LineChart
-  data={history}
-  margin={{
-  top: 5,
-  right: 30,
-  left: 20,
-  bottom: 5,
- }}
- >
-  <CartesianGrid strokeDasharray="3 3" />
-  <XAxis dataKey="period" tickFormatter={dateFormat} />
-  <YAxis tickFormatter={moneyFormat} />
-  <Tooltip />
-  <Legend />
-  <Line
-  type="monotone"
-  dataKey="balanceCredit"
-  name="Saldo"
-  stroke={theme.colors.primary["500"]}
- />
- </LineChart>
- </ResponsiveContainer>
- </div>
- )}
- </Stack>
- </Box>
- </HStack>
-
- <Alert
-  title="Deletar Histórico"
-  description="Você tem certeza que deseja excluir esse histórico?"
-  buttonTitle="Deletar"
-  isOpen={isOpenConfirm}
-  onOpen={onOpenConfirm}
-  onClose={onCloseConfirm}
-  onClick={handleDeleteHistory}
-  cancelRef={cancelRef}
- />
-
+ </Center>
+ ) : (
+ <div style={{ width: "100%", height: 300 }}>
+ <ResponsiveContainer>
+ <LineChart
+ data={history}
+ margin={{
+ top: 5,
+ right: 30,
+ left: 20,
+ bottom: 5,
+ }}
+ >
+ <CartesianGrid strokeDasharray="3 3" />
+ <XAxis dataKey="period" tickFormatter={dateFormat} />
+ <YAxis tickFormatter={moneyFormat} />
+ <Tooltip />
+ <Legend />
+ <Line
+ type="monotone"
+ dataKey="balanceCredit"
+ name="Saldo"
+ stroke={theme.colors.primary["500"]}
+ />
+ </LineChart>
+ </ResponsiveContainer>
+ </div>
+ )}
+ </Stack>
+ </Box>
+ </HStack>
+
+ <Alert
+ title="Deletar Histórico"
+ description="Você tem certeza que deseja excluir esse histórico?"
+ buttonTitle="Deletar"
+ isOpen={isOpenConfirm}
+ onOpen={onOpenConfirm}
+ onClose={onCloseConfirm}
+ onClick={handleDeleteHistory}
+ cancelRef={cancelRef}
+ />
  </>
  );
 }
diff --git a/src/components/tables/HistoryTable.tsx b/src/components/tables/HistoryTable.tsx
@@ -3,11 +3,6 @@
 
 import { HamburgerIcon } from "@chakra-ui/icons";
 import {
- HStack,
- Menu,
- MenuButton,
- MenuItem,
- MenuList,
  Button as ButtonBase,
  Text,
  IconButton as IconButtonBase,
@@ -20,14 +15,17 @@ import {
  AlertDialogFooter,
  useDisclosure,
  useToast,
- useTheme,
+ Divider,
+ Heading,
 } from "@chakra-ui/react";
 import { useEffect, useRef, useState } from "react";
 import { FiTrash2 } from "react-icons/fi";
 
 import { HistoryDTO } from "@/dto/http/HistoryDTO";
+import IconButton from "@/components/IconButton";
 import { deleteHistory, getAllHistoryByRegister } from "@/services/history";
 import DataTableBase from "../DataTableBase";
+import Box from "../Box";
 
 interface Props {
  registerId: number
@@ -78,25 +76,19 @@ export default function HistoryTable({ registerId }: Props) {
  }).format(Number(row.totalCredit)),
  },
  {
- name: "Ações",
- selector: (row: any) => (
- <Menu>
- <MenuButton
- rounded={20}
- bg={colorMode == "dark" ? "gray.500" : "gray.50"}
- as={IconButtonBase}
- icon={<HamburgerIcon />}
+ name: "Deletar",
+ selector: (row: any) =>
+ row.financialHistoryId && (
+ <IconButton
+ size="md"
+ rounded={25}
+ boxShadow="md"
+ colorScheme="red"
+ aria-label="Delete History"
+ onClick={() => handleConfirm(row.financialHistoryId)}
+ icon={<FiTrash2 />}
  />
- <MenuList minWidth="150px">
- <MenuItem onClick={() => handleConfirm(row.financialHistoryId)}>
- <HStack flex={1} justifyContent="space-between">
- <Text>Excluir</Text>
- <FiTrash2 />
- </HStack>
- </MenuItem>
- </MenuList>
- </Menu>
- ),
+ ),
  },
  ];
 
@@ -147,7 +139,13 @@ export default function HistoryTable({ registerId }: Props) {
 
  return (
  <>
- <DataTableBase columns={columns} data={history} title="Histórico" />
+ <Box>
+ <Heading as="h4" size="md">
+ Histórico
+ </Heading>
+ <Divider mt={2} />
+ <DataTableBase columns={columns} data={history} title="" />
+ </Box>
 
  <AlertDialog
  isOpen={isOpenConfirm}

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -7,6 +7,9 @@ import { ChakraProvider } from "@chakra-ui/react";
 import { ProfileContextProvider } from "@/contexts/ProfileContext";
 import { RegisterContextProvider } from "@/contexts/RegisterContext";
 
+import "../styles/styles.css";
+
+
 interface Props {
  Component: any;
  pageProps: any

diff --git a/src/pages/admin/category/index.tsx b/src/pages/admin/category/index.tsx
@@ -3,7 +3,6 @@ import {
  Container,
  Heading,
  HStack,
- IconButton,
  Menu,
  MenuButton,
  Table,
@@ -56,7 +55,7 @@ import { createCategory, deleteCategory, getCategoryById, listAllCategory, updat
 import { Input } from "@/components/Input";
 import Button from "@/components/Button";
 import { CategoryModel } from "@/models/category";
-
+import IconButton from "@/components/IconButton";
 
 const insertFormSchema = z.object({
  description: z.string({
@@ -236,12 +235,11 @@ export default function Category() {
  <Layout>
  {/* LIST CATEGORIES */}
  <Container maxW="6xl" mt={10}>
- <Heading as="h4" size="md" mb={5}>
- Categorias
- </Heading>
-
  <Box>
- <HStack display="flex" justifyContent="flex-end">
+ <HStack display="flex" justifyContent="space-between">
+ <Heading as="h4" size="md">
+ Categorias
+ </Heading>
  <Heading as="h4" size="md" mb={10}>
  <IconButton
  size="md"