Us09 historico emprestimo livros

src/App.tsx

@@ -8,6 +8,7 @@ import { Toaster } from "./components/ui/toaster"
 import PrivateRoute from './PrivateRoute';
 import SignIn from "./pages/SignIn"
 import Users from "./pages/Users"
+import HistoricoLivro from "./pages/HistoricoLivro"
 
 function App() {
   return (
@@ -20,6 +21,7 @@ function App() {
             <Route path="/login" element={<SignIn />} />
             <Route path="/inicio" element={<PrivateRoute><Home /></PrivateRoute>} />
             <Route path="/usuarios" element={<PrivateRoute><Users /></PrivateRoute>} />
+            <Route path="/emprestimo-de-livros" element={<HistoricoLivro/>} />
           </Routes>
         </BrowserRouter>
       </AuthProvider>

src/components/SideBar/index.tsx

@@ -1,6 +1,7 @@
 import { Box, Stack, Text } from "@chakra-ui/react"
 import { Button } from "../ui/button"
-import { BsPerson, BsHouse } from 'react-icons/bs';
+import { BsPerson, BsHouse, BsBook  } from 'react-icons/bs';
+import { FaFileExport } from "react-icons/fa";
 import { useLocation, useNavigate } from "react-router";
 import { useAuth } from "../../hooks/useAuth";
 
@@ -14,6 +15,8 @@ export const SideBar = () => {
   const tabs = [
     { label: 'Início', value: 'inicio', icon: <BsHouse /> },
     { label: 'Usuários', value: 'usuarios', icon: <BsPerson /> },
+    { label: 'Exportar Dados', value: 'exportar-dados', icon: <FaFileExport /> },
+    { label: 'Empréstimos', value: 'emprestimo-de-livros', icon: < BsBook  />}
   ]
 
   return (
@@ -29,7 +32,7 @@ export const SideBar = () => {
             >
               <Stack align='center'>
                 {tab.icon}
-                <Text textAlign='center'>{tab.label}</Text>
+                <Text textAlign='center' lineClamp="2">{tab.label}</Text>
               </Stack>
             </Button>
           ))}

src/components/ui/number-input.tsx

@@ -0,0 +1,24 @@
+import { NumberInput as ChakraNumberInput } from "@chakra-ui/react"
+import * as React from "react"
+
+export interface NumberInputProps extends ChakraNumberInput.RootProps {}
+
+export const NumberInputRoot = React.forwardRef<
+  HTMLDivElement,
+  NumberInputProps
+>(function NumberInput(props, ref) {
+  const { children, ...rest } = props
+  return (
+    <ChakraNumberInput.Root ref={ref} variant="outline" {...rest}>
+      {children}
+      <ChakraNumberInput.Control>
+        <ChakraNumberInput.IncrementTrigger />
+        <ChakraNumberInput.DecrementTrigger />
+      </ChakraNumberInput.Control>
+    </ChakraNumberInput.Root>
+  )
+})
+
+export const NumberInputField = ChakraNumberInput.Input
+export const NumberInputScrubber = ChakraNumberInput.Scrubber
+export const NumberInputLabel = ChakraNumberInput.Label

src/components/ui/select.tsx

@@ -0,0 +1,143 @@
+"use client"
+
+import type { CollectionItem } from "@chakra-ui/react"
+import { Select as ChakraSelect, Portal } from "@chakra-ui/react"
+import { CloseButton } from "./close-button"
+import * as React from "react"
+
+interface SelectTriggerProps extends ChakraSelect.ControlProps {
+  clearable?: boolean
+}
+
+export const SelectTrigger = React.forwardRef<
+  HTMLButtonElement,
+  SelectTriggerProps
+>(function SelectTrigger(props, ref) {
+  const { children, clearable, ...rest } = props
+  return (
+    <ChakraSelect.Control {...rest}>
+      <ChakraSelect.Trigger ref={ref}>{children}</ChakraSelect.Trigger>
+      <ChakraSelect.IndicatorGroup>
+        {clearable && <SelectClearTrigger />}
+        <ChakraSelect.Indicator />
+      </ChakraSelect.IndicatorGroup>
+    </ChakraSelect.Control>
+  )
+})
+
+const SelectClearTrigger = React.forwardRef<
+  HTMLButtonElement,
+  ChakraSelect.ClearTriggerProps
+>(function SelectClearTrigger(props, ref) {
+  return (
+    <ChakraSelect.ClearTrigger asChild {...props} ref={ref}>
+      <CloseButton
+        size="xs"
+        variant="plain"
+        focusVisibleRing="inside"
+        focusRingWidth="2px"
+        pointerEvents="auto"
+      />
+    </ChakraSelect.ClearTrigger>
+  )
+})
+
+interface SelectContentProps extends ChakraSelect.ContentProps {
+  portalled?: boolean
+  portalRef?: React.RefObject<HTMLElement>
+}
+
+export const SelectContent = React.forwardRef<
+  HTMLDivElement,
+  SelectContentProps
+>(function SelectContent(props, ref) {
+  const { portalled = true, portalRef, ...rest } = props
+  return (
+    <Portal disabled={!portalled} container={portalRef}>
+      <ChakraSelect.Positioner>
+        <ChakraSelect.Content {...rest} ref={ref} />
+      </ChakraSelect.Positioner>
+    </Portal>
+  )
+})
+
+export const SelectItem = React.forwardRef<
+  HTMLDivElement,
+  ChakraSelect.ItemProps
+>(function SelectItem(props, ref) {
+  const { item, children, ...rest } = props
+  return (
+    <ChakraSelect.Item key={item.value} item={item} {...rest} ref={ref}>
+      {children}
+      <ChakraSelect.ItemIndicator />
+    </ChakraSelect.Item>
+  )
+})
+
+interface SelectValueTextProps
+  extends Omit<ChakraSelect.ValueTextProps, "children"> {
+  children?(items: CollectionItem[]): React.ReactNode
+}
+
+export const SelectValueText = React.forwardRef<
+  HTMLSpanElement,
+  SelectValueTextProps
+>(function SelectValueText(props, ref) {
+  const { children, ...rest } = props
+  return (
+    <ChakraSelect.ValueText {...rest} ref={ref}>
+      <ChakraSelect.Context>
+        {(select) => {
+          const items = select.selectedItems
+          if (items.length === 0) return props.placeholder
+          if (children) return children(items)
+          if (items.length === 1)
+            return select.collection.stringifyItem(items[0])
+          return `${items.length} selected`
+        }}
+      </ChakraSelect.Context>
+    </ChakraSelect.ValueText>
+  )
+})
+
+export const SelectRoot = React.forwardRef<
+  HTMLDivElement,
+  ChakraSelect.RootProps
+>(function SelectRoot(props, ref) {
+  return (
+    <ChakraSelect.Root
+      {...props}
+      ref={ref}
+      positioning={{ sameWidth: true, ...props.positioning }}
+    >
+      {props.asChild ? (
+        props.children
+      ) : (
+        <>
+          <ChakraSelect.HiddenSelect />
+          {props.children}
+        </>
+      )}
+    </ChakraSelect.Root>
+  )
+}) as ChakraSelect.RootComponent
+
+interface SelectItemGroupProps extends ChakraSelect.ItemGroupProps {
+  label: React.ReactNode
+}
+
+export const SelectItemGroup = React.forwardRef<
+  HTMLDivElement,
+  SelectItemGroupProps
+>(function SelectItemGroup(props, ref) {
+  const { children, label, ...rest } = props
+  return (
+    <ChakraSelect.ItemGroup {...rest} ref={ref}>
+      <ChakraSelect.ItemGroupLabel>{label}</ChakraSelect.ItemGroupLabel>
+      {children}
+    </ChakraSelect.ItemGroup>
+  )
+})
+
+export const SelectLabel = ChakraSelect.Label
+export const SelectItemText = ChakraSelect.ItemText

src/pages/HistoricoLivro/CardLivro/index.tsx

@@ -0,0 +1,39 @@
+import { Card, Text, Image, Flex } from '@chakra-ui/react';
+const livro = {
+  capa: 'https://images.unsplash.com/photo-1555041469-a586c61ea9bc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80', // Simulação de uma imagem de capa
+  titulo: 'Livro Exemplo',
+  autor: 'Autor Exemplo',
+  status: 'Disponível'
+};
+
+function CardLivro() {
+  return (
+    <Flex>
+      <Card.Root maxW="xs" maxH={'400px'} p={'20px'} m={'40px 0 0 50px'}>
+        <Card.Title alignSelf={'center'} fontSize={'2xl'} mb={'5px'}>
+          {livro.titulo}
+        </Card.Title>
+        <Image
+          src={livro.capa}
+          alt="Capa Livro"
+        />
+        <Card.Body gap="0">
+          <Text textStyle="xl" fontWeight="medium" letterSpacing="tight" mt="1">
+             {"Autor: "+ livro.autor}
+          </Text>
+          <Text textStyle="xl" fontWeight="medium" letterSpacing="tight" mt="1">
+            {"Status: "+livro.status} 
+          </Text>
+        </Card.Body>
+      </Card.Root>
+      <Card.Root maxW="xs" maxH={'160px'} p={'20px'} m={'40px 0 0 25px'}>
+        <Card.Title alignSelf={'center'} fontSize={'3xl'} mt={'10px'}>
+          123
+        </Card.Title>
+        <Card.Description marginTop={'20px'}>Total de usuários que pegaram o livro</Card.Description>
+      </Card.Root>
+    </Flex>
+  );
+}
+
+export default CardLivro;