v1.0.5 #13

nickolasdeluca · Sep 4, 2024 · e95cc06 · e95cc06
2 parents a893f45 + aef2545
commit e95cc06
Show file tree

Hide file tree

Showing 6 changed files with 2,736 additions and 5,435 deletions.
diff --git a/app/components/more-info.js b/app/components/more-info.js
@@ -10,78 +10,73 @@ import {
   ModalOverlay,
   Text,
   useDisclosure,
-} from "@chakra-ui/react";
-import { FaInfo } from "react-icons/fa";
+} from '@chakra-ui/react';
+import { FaInfo } from 'react-icons/fa';
 
 export default function MoreInfoModal({ tracking }) {
   const { isOpen, onOpen, onClose } = useDisclosure();
 
   return (
     <Box>
-      <Button
-        colorScheme={"teal"}
-        leftIcon={<FaInfo />}
-        onClick={onOpen}
-        size={"xs"}
-      >
+      <Button colorScheme={'teal'} leftIcon={<FaInfo />} onClick={onOpen}>
         Info
       </Button>
       <Modal
         isOpen={isOpen}
         onClose={onClose}
-        scrollBehavior={"inside"}
+        scrollBehavior={'inside'}
         isCentered
       >
         <ModalOverlay
-          bg={"none"}
-          backdropFilter="auto"
-          backdropInvert="10%"
-          backdropBlur="1px"
+          bg={'none'}
+          backdropFilter='auto'
+          backdropInvert='10%'
+          backdropBlur='1px'
         />
         <ModalContent>
           <ModalHeader>Informações detalhadas do rastreio</ModalHeader>
           <ModalCloseButton />
           <ModalBody>
             <Text>
-              <Text as={"b"}>Data/Hora</Text>: {tracking.data_hora}
+              <Text as={'b'}>Data/Hora</Text>: {tracking.data_hora}
             </Text>
             <Text>
-              <Text as={"b"}>Data/Hora Efetiva</Text>:{" "}
+              <Text as={'b'}>Data/Hora Efetiva</Text>:{' '}
               {tracking.data_hora_efetiva}
             </Text>
             <Text>
-              <Text as={"b"}>Cidade</Text>: {tracking.cidade}
+              <Text as={'b'}>Cidade</Text>: {tracking.cidade}
             </Text>
             <Text>
-              <Text as={"b"}>Descrição</Text>: {tracking.descricao}
+              <Text as={'b'}>Descrição</Text>: {tracking.descricao}
             </Text>
             <Text>
-              <Text as={"b"}>Domínio</Text>: {tracking.dominio}
+              <Text as={'b'}>Domínio</Text>: {tracking.dominio}
             </Text>
             <Text>
-              <Text as={"b"}>Filial</Text>: {tracking.filial}
+              <Text as={'b'}>Filial</Text>: {tracking.filial}
             </Text>
             <Text>
-              <Text as={"b"}>Nome do Recebedor</Text>:{" "}
-              {tracking.nome_recebedor != ""
+              <Text as={'b'}>Nome do Recebedor</Text>:{' '}
+              {tracking.nome_recebedor != ''
                 ? tracking.nome_recebedor
-                : "Não informado"}
+                : 'Não informado'}
             </Text>
             <Text>
-              <Text as={"b"}>Documento do Recebedor</Text>:{" "}
-              {tracking.nro_doc_recebedor != ""
+              <Text as={'b'}>Documento do Recebedor</Text>:{' '}
+              {tracking.nro_doc_recebedor != ''
                 ? tracking.nro_doc_recebedor
-                : "Não informado"}
+                : 'Não informado'}
             </Text>
             <Text>
-              <Text as={"b"}>Ocorrência</Text>: {tracking.ocorrencia}
+              <Text as={'b'}>Ocorrência</Text>: {tracking.ocorrencia}
             </Text>
             <Text>
-              <Text as={"b"}>Tipo</Text>: {tracking.tipo}
+              <Text as={'b'}>Tipo</Text>: {tracking.tipo}
             </Text>
           </ModalBody>
           <ModalFooter>
-            <Button colorScheme="blue" mr={3} onClick={onClose}>
+            <Button colorScheme='blue' mr={3} onClick={onClose}>
               Fechar
             </Button>
           </ModalFooter>

diff --git a/app/components/tracker.js b/app/components/tracker.js
@@ -4,23 +4,16 @@ import {
   Button,
   Card,
   CardBody,
-  Center,
   ChakraProvider,
   Checkbox,
   Container,
   extendTheme,
   Input,
-  Table,
-  Tbody,
-  Td,
   Text,
-  Th,
-  Thead,
-  Tr,
   useToast,
 } from '@chakra-ui/react';
 import { useEffect, useState } from 'react';
-import MoreInfoModal from './more-info';
+import TrackingTable from './tracking-table';
 
 export default function Tracker() {
   const [loading, setLoading] = useState(true);
@@ -169,7 +162,7 @@ export default function Tracker() {
 
   return (
     <ChakraProvider theme={theme}>
-      <Container maxWidth={'40%'} marginTop={5} minWidth={'489px'}>
+      <Container maxWidth={'40%'} marginTop={5} minWidth={'375px'} paddingX={2}>
         <Card maxWidth={'100%'}>
           <Text marginX={5} marginTop={5} fontSize={'xl'} as={'b'}>
             SSW Tracking
@@ -199,7 +192,12 @@ export default function Tracker() {
         </Card>
       </Container>
       {loading ? null : (
-        <Container maxWidth={'40%'} marginTop={5} minWidth={'489px'}>
+        <Container
+          maxWidth={'40%'}
+          marginTop={5}
+          minWidth={'375px'}
+          paddingX={2}
+        >
           <Card colorScheme={'teal'}>
             <CardBody>
               <Text fontSize={'xl'} as={'b'}>
@@ -222,47 +220,7 @@ export default function Tracker() {
           </Card>
         </Container>
       )}
-      {loading ? null : (
-        <Container maxWidth={'80%'} marginY={5} minWidth={'975px'}>
-          <Center>
-            <Card padding={5}>
-              <Text fontSize={'xl'} as={'b'}>
-                Informações de rastreio
-              </Text>
-              <Center marginTop={5}>
-                <Table
-                  variant={'striped'}
-                  colorScheme={'teal'}
-                  padding={5}
-                  size={'sm'}
-                >
-                  <Thead>
-                    <Tr>
-                      <Th>Data/Hora</Th>
-                      <Th>Cidade</Th>
-                      <Th>Situação</Th>
-                    </Tr>
-                  </Thead>
-                  <Tbody>
-                    {tracking.map((item, index) => {
-                      return (
-                        <Tr key={index}>
-                          <Td>{item.data_hora_efetiva}</Td>
-                          <Td>{item.cidade}</Td>
-                          <Td>{item.descricao}</Td>
-                          <Td>
-                            <MoreInfoModal tracking={item}></MoreInfoModal>
-                          </Td>
-                        </Tr>
-                      );
-                    })}
-                  </Tbody>
-                </Table>
-              </Center>
-            </Card>
-          </Center>
-        </Container>
-      )}
+      {loading ? null : <TrackingTable tracking={tracking}></TrackingTable>}
     </ChakraProvider>
   );
 }
diff --git a/app/components/tracking-table.js b/app/components/tracking-table.js
@@ -0,0 +1,96 @@
+import {
+  Flex,
+  Button,
+  Container,
+  Center,
+  Card,
+  Text,
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  Box,
+  useBreakpointValue,
+} from '@chakra-ui/react';
+import MoreInfoModal from './more-info';
+
+export default function TrackingTable({ tracking }) {
+  const isVertical = useBreakpointValue({ base: true, md: false });
+
+  return (
+    <Container maxWidth={'80%'} marginY={5} minWidth={'375px'} paddingX={2}>
+      <Center>
+        <Card padding={5}>
+          <Text fontSize={'xl'} as={'b'}>
+            Informações de rastreio
+          </Text>
+          <Center marginTop={5}>
+            {isVertical ? (
+              <Box width='100%'>
+                {tracking.map((item, index) => (
+                  <Box
+                    key={index}
+                    marginBottom={4}
+                    padding={4}
+                    border='1px solid #ddd'
+                    borderRadius='md'
+                  >
+                    <Box>
+                      <Text as='b'>Data/Hora Efetiva:</Text>{' '}
+                      <Text display='inline'>{item.data_hora_efetiva}</Text>
+                    </Box>
+                    <Box>
+                      <Text as='b'>Cidade:</Text>{' '}
+                      <Text display='inline'>{item.cidade}</Text>
+                    </Box>
+                    <Box>
+                      <Text as='b'>Situação:</Text>{' '}
+                      <Text display='inline'>{item.descricao}</Text>
+                    </Box>
+                    <Flex width={'100%'} marginTop={3}>
+                      <MoreInfoModal tracking={item}></MoreInfoModal>
+                    </Flex>
+                  </Box>
+                ))}
+              </Box>
+            ) : (
+              <Table
+                variant={'striped'}
+                colorScheme={'teal'}
+                padding={5}
+                size={'sm'}
+              >
+                <Thead>
+                  <Tr>
+                    <Th>Data/Hora</Th>
+                    <Th>Cidade</Th>
+                    <Th>Situação</Th>
+                    <Th></Th>
+                  </Tr>
+                </Thead>
+                <Tbody>
+                  {tracking.map((item, index) => (
+                    <Tr key={index}>
+                      <Td>{item.data_hora_efetiva}</Td>
+                      <Td>{item.cidade}</Td>
+                      <Td>{item.descricao}</Td>
+                      <Td>
+                        <MoreInfoModal tracking={item}>
+                          <Button size='xs' colorScheme='teal'>
+                            Info
+                          </Button>
+                        </MoreInfoModal>
+                      </Td>
+                    </Tr>
+                  ))}
+                </Tbody>
+              </Table>
+            )}
+          </Center>
+        </Card>
+      </Center>
+    </Container>
+  );
+}
diff --git a/next.config.js b/next.config.js
@@ -1,10 +1,6 @@
 /**
  * @type {import('next').NextConfig}
  */
-const nextConfig = {
-  experimental: {
-    appDir: true,
-  },
-};
+const nextConfig = {};
 
 export default nextConfig;