From d478383488f33a7f945bb0adb783a192b6445299 Mon Sep 17 00:00:00 2001
From: Karen Vicente <karenyasmin37@gmail.com>
Date: Thu, 6 Apr 2023 00:41:58 -0300
Subject: [PATCH] update template[

---
 package-lock.json                             |   1 +
 src/components/DataTableBase.tsx              |  59 +++-------
 src/components/tables/DebtsAllTable.tsx       |  11 +-
 .../tables/HistoryAllByRegisterTable.tsx      | 108 ++++++++++--------
 src/components/tables/HistoryTable.tsx        |  48 ++++----
 src/pages/_app.tsx                            |   3 +
 src/pages/admin/category/index.tsx            |  12 +-
 src/pages/admin/user/index.tsx                |  16 +--
 src/pages/dashboard/index.tsx                 |   2 +-
 src/pages/debt/index.tsx                      |  23 ++--
 src/pages/register/[id].tsx                   |   6 +-
 src/styles/index.ts                           |   8 +-
 src/styles/styles.css                         |   5 +
 13 files changed, 150 insertions(+), 152 deletions(-)
 create mode 100644 src/styles/styles.css

diff --git a/package-lock.json b/package-lock.json
index ef3d618..2876a15 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,6 +28,7 @@
         "axios": "^1.2.3",
         "babel-runtime": "^6.26.0",
         "base64-js": "^1.5.1",
+        "classnames": "^2.3.2",
         "cookies-next": "^2.1.1",
         "eslint": "8.31.0",
         "eslint-config-next": "13.1.2",
diff --git a/src/components/DataTableBase.tsx b/src/components/DataTableBase.tsx
index 34fea1a..3afbf18 100644
--- 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}
     />
   );
 }
\ No newline at end of file
diff --git a/src/components/tables/DebtsAllTable.tsx b/src/components/tables/DebtsAllTable.tsx
index b6d3854..1a3979c 100644
--- 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
index 6365d16..0e98fcf 100644
--- 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}
+      />
     </>
   );
 }
\ No newline at end of file
diff --git a/src/components/tables/HistoryTable.tsx b/src/components/tables/HistoryTable.tsx
index 20ac020..b57e913 100644
--- 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
index 758d7fa..e0465df 100644
--- 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
index f3a4ee9..c65d7f4 100644
--- 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"
diff --git a/src/pages/admin/user/index.tsx b/src/pages/admin/user/index.tsx
index 6c8e0ff..19a6ce1 100644
--- a/src/pages/admin/user/index.tsx
+++ b/src/pages/admin/user/index.tsx
@@ -3,7 +3,6 @@ import {
   Flex,
   Heading,
   HStack,
-  IconButton,
   Menu,
   MenuButton,
   MenuItem,
@@ -59,12 +58,14 @@ import { UserModel } from "@/models/user";
 import Spinner from "@/components/Spinner";
 import Layout from "@/components/template/Layout";
 import Box from "@/components/Box";
+import IconButton from "@/components/IconButton";
 
 import { UserDTO } from "@/dto/http/UserDTO";
 
 import { createUser, listAllUser, deleteUser, updateStatusUser, updateRole } from "@/services/user";
 import { UserStatusDTO } from "@/dto/http/UserStatusDTO";
 import { UserRoleDTO } from "@/dto/http/UserRoleDTO";
+import DataTableBase from "@/components/DataTableBase";
 
 const insertFormSchema = z
   .object({
@@ -320,12 +321,11 @@ export default function User() {
     <Layout>
       {/* LIST USERS */}
       <Container maxW="6xl" mt={10}>
-        <Heading as="h4" size="md" mb={5}>
-          Usuários
-        </Heading>
-
         <Box>
-          <HStack display="flex" justifyContent="flex-end">
+          <HStack display="flex" justifyContent="space-between">
+            <Heading as="h4" size="md">
+              Usuários
+            </Heading>
             <Heading as="h4" size="md" mb={10}>
               <IconButton
                 size="md"
@@ -339,10 +339,12 @@ export default function User() {
             </Heading>
           </HStack>
 
+          {/* <DataTableBase columns={columns} data={users} title="" /> */}
+
           {isLoading ? (
             <Spinner />
           ) : (
-            <TableContainer>
+            <TableContainer my={5}>
               <Table size="sm">
                 <Thead>
                   <Tr>
diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx
index be3769e..e690be2 100644
--- a/src/pages/dashboard/index.tsx
+++ b/src/pages/dashboard/index.tsx
@@ -72,7 +72,7 @@ export default function Dashboard() {
           <CardDashboard
             color="red.600"
             title="Gastos"
-            value={dash.totalDebt ? Number(dash.totalDebt) : 0}
+            value={dash.totalDebt ? - Number(dash.totalDebt) : 0}
             isLoaded={dash.totalDebt != null}
             icon={<FiArrowDownCircle size={25} />}
           />
diff --git a/src/pages/debt/index.tsx b/src/pages/debt/index.tsx
index cc1a9bb..90fb6de 100644
--- a/src/pages/debt/index.tsx
+++ b/src/pages/debt/index.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 
 import {
+  Divider,
   Container,
   Flex,
   Heading,
@@ -203,11 +204,11 @@ export default function Debt() {
         }).format(Number(row.value)),
     },
     {
-      name: "Data Vencimento",
+      name: "Dt. Vencimento",
       selector: (row: any) => new Date(row.dueDate).toLocaleDateString(),
     },
     {
-      name: "Data Pagamento",
+      name: "Dt. Pagamento",
       selector: (row: any) =>
         row.paymentDate ? new Date(row.paymentDate).toLocaleDateString() : "-",
     },
@@ -236,7 +237,9 @@ export default function Debt() {
       name: "Status",
       selector: (row: any) => (
         <Tag
+          size="sm"
           variant="solid"
+          borderRadius="full"
           colorScheme={
             row.status == "Aguardando Pagamento" ? "orange" : "green"
           }
@@ -615,7 +618,7 @@ export default function Debt() {
   return (
     <Layout>
       <Container maxW="6xl" mt={10} mb={10}>
-        <Card mb={5}>
+        <Card mb={5} bg={colorMode === "dark" ? "gray.800" : "white"}>
           <CardHeader>
             <Heading size="md">
               <Flex justifyContent="space-between">
@@ -635,6 +638,7 @@ export default function Debt() {
                 )}
               </Flex>
             </Heading>
+            <Divider mt={2} />
           </CardHeader>
           <CardBody>
             <Stack>
@@ -691,8 +695,8 @@ export default function Debt() {
 
               <StatGroup>
                 <Stat>
-                  <StatLabel>Entradas</StatLabel>
-                  <StatNumber>
+                  <StatLabel color="green.500">Entradas</StatLabel>
+                  <StatNumber color="green.500">
                     <Skeleton
                       isLoaded={debtValue.totalEntryValue != null}
                       w="90%"
@@ -710,8 +714,8 @@ export default function Debt() {
                 </Stat>
 
                 <Stat>
-                  <StatLabel>Saídas</StatLabel>
-                  <StatNumber>
+                  <StatLabel color="red.400">Saídas</StatLabel>
+                  <StatNumber color="red.400">
                     <Skeleton isLoaded={debtValue.totalDebt != null} w="90%">
                       {new Intl.NumberFormat("pt-br", {
                         style: "currency",
@@ -726,8 +730,8 @@ export default function Debt() {
                 </Stat>
 
                 <Stat>
-                  <StatLabel>Saldo</StatLabel>
-                  <StatNumber>
+                  <StatLabel color="blue.500">Saldo</StatLabel>
+                  <StatNumber color="blue.500">
                     <Skeleton
                       isLoaded={debtValue.currentTotalValue != null}
                       w="90%"
@@ -776,6 +780,7 @@ export default function Debt() {
               />
             </Heading>
           </HStack>
+          <Divider mt={2} />
           <DataTableBase columns={columns} data={debts} title="" />
         </Box>
         {/* LIST DEBTS */}
diff --git a/src/pages/register/[id].tsx b/src/pages/register/[id].tsx
index 81dfcfc..aa29be4 100644
--- a/src/pages/register/[id].tsx
+++ b/src/pages/register/[id].tsx
@@ -69,7 +69,7 @@ export default function Register() {
 
   const { registerBase, setRegister } = useRegister();
 
-  const { query } = useRouter();
+  const { query, push } = useRouter();
   const registerId = Number(query.id);
 
   const { colorMode } = useColorMode();
@@ -129,6 +129,10 @@ export default function Register() {
         } as RegisterProps;
         setRegister(registerBaseNew);
 
+        push({
+          pathname: "/debt",
+        });
+
         toast({
           title: "Registro atualizado com sucesso.",
           status: "success",
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 6e8c351..21998fb 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -42,10 +42,10 @@ export const theme = extendTheme({
       300: "#a0a0a6",
       400: "#8d8d95",
       500: "#71717a",
-      600: "#67676f",
-      700: "#505057",
-      800: "#3e3e43",
-      900: "#2f2f33",
+      600: "#505057",
+      700: "#3e3e43",
+      800: "#2f2f33",
+      900: "#262629",
     },
   },
 
diff --git a/src/styles/styles.css b/src/styles/styles.css
new file mode 100644
index 0000000..08194f6
--- /dev/null
+++ b/src/styles/styles.css
@@ -0,0 +1,5 @@
+/* Estilos para tema dark */
+.dark + div select {
+  background-color: #505057;
+  color: white;
+}
\ No newline at end of file