[front] 💄 styles: enchance site responsive

CtrI-Alt-Del · Dec 2, 2024 · ef91e50 · ef91e50
1 parent 834880c
commit ef91e50
Show file tree

Hide file tree

Showing 14 changed files with 73 additions and 40 deletions.
diff --git a/apps/server/src/database/prisma/repositories/prisma-locations-repository.ts b/apps/server/src/database/prisma/repositories/prisma-locations-repository.ts
@@ -68,8 +68,6 @@ export class PrismaLocationsRepository implements ILocationsRepository {
 
   async findById(locationId: string): Promise<Location | null> {
     try {
-      console.log(await prisma.location.findMany())
-      console.log('locationId', locationId)
       const prismaLocation = await prisma.location.findUnique({
         where: {
           id: locationId,
@@ -79,8 +77,6 @@ export class PrismaLocationsRepository implements ILocationsRepository {
         },
       })
 
-      console.log({ prismaLocation })
-
       if (!prismaLocation) return null
       return this.mapper.toDomain(prismaLocation)
     } catch (error) {

diff --git a/apps/web/src/ui/components/commons/employee-select/use-employee-select.ts b/apps/web/src/ui/components/commons/employee-select/use-employee-select.ts
@@ -2,7 +2,6 @@ import { useApi, useCache, useToast, useUrlParamNumber } from '@/ui/hooks'
 import { useState } from 'react'
 import { useAuthContext } from '../../contexts/auth-context'
 import { CACHE } from '@/constants'
-import { User } from '@stocker/core/entities'
 
 export function useEmployeeSelect(onSelectChange: (employeeId: string) => void) {
   const [employeeId, setEmployeeId] = useState<string>()
@@ -11,44 +10,50 @@ export function useEmployeeSelect(onSelectChange: (employeeId: string) => void)
   const { company } = useAuthContext()
   const { showError } = useToast()
   const [page, setPage] = useUrlParamNumber('employeePage', 1)
+
   function handleEmployeeIdchange(employeeId: string) {
     setEmployeeId(employeeId)
     onSelectChange(employeeId)
   }
+
   function handleEmployeeNamechange(name: string) {
     setSelectedEmployeeName(name)
   }
+
   async function fetchEmployees() {
     if (!company) return
     const response = await usersService.listUsers({
       page,
       companyId: company.id,
     })
-    console.log(response)
     if (response.isFailure) {
       showError(response.errorMessage)
       return
     }
     return response.body
   }
+
   const { data, isFetching } = useCache({
     fetcher: fetchEmployees,
     key: CACHE.users.key,
     dependencies: [page],
   })
+
   function handlePagechange(page: number) {
     setPage(page)
   }
+
   const employees = data ? data.items : []
   const itemsCount = data ? data.itemsCount : 0
+
   return {
     isFetching,
     totalPages: Math.ceil(itemsCount / 10),
     page,
     employees,
+    selectedEmployeeName,
     handleEmployeeIdchange,
     handleEmployeePageChange: handlePagechange,
     handleEmployeeNamechange,
-    selectedEmployeeName,
   }
 }
diff --git a/apps/web/src/ui/components/contexts/auth-context/hooks/use-auth-context-provider.ts b/apps/web/src/ui/components/contexts/auth-context/hooks/use-auth-context-provider.ts
@@ -66,7 +66,7 @@ export function useAuthContextProvider({
 
   const company = comapanyDto ? Company.create(comapanyDto) : null
 
-  const { data: userRole } = useCache({
+  const { data: userRole, clearCache: clearUserRoleCache } = useCache({
     fetcher: fetchPermissions,
     key: CACHE.permissions.key,
   })
@@ -122,6 +122,7 @@ export function useAuthContextProvider({
   async function logout() {
     setUser(null)
     navigateTo(ROUTES.login)
+    clearUserRoleCache()
     setTimeout(async () => {
       await deleteCookieAction(COOKIES.jwt.key)
     }, 2500)
@@ -209,7 +210,6 @@ export function useAuthContextProvider({
     if (jwt) logoutUnkownAccount(jwt)
   }
 
-
   return {
     user,
     company,

diff --git a/...web/src/ui/components/layouts/dashboard/navbar/navbar-user/notifications-dialog/index.tsx b/...web/src/ui/components/layouts/dashboard/navbar/navbar-user/notifications-dialog/index.tsx
@@ -59,7 +59,8 @@ export const NotifcationsDialog = ({ companyId }: NotifcationsDialogProps) => {
                         id={stockNotification.id}
                         href={`/inventory/stocks/${stockNotification.product.id}`}
                         icon='product'
-                        title={`${stockNotification.product.name} | estoque atual: ${stockNotification.product.currentStock}`}
+                        title={stockNotification.product.name}
+                        subtitle={`estoque atual: ${stockNotification.product.currentStock} | estoque mínimo: ${stockNotification.product.minimumStock}`}
                         sentAt={stockNotification.sentAt ?? new Date()}
                         onDelete={handleDeleteNotification}
                       />
@@ -95,7 +96,8 @@ export const NotifcationsDialog = ({ companyId }: NotifcationsDialogProps) => {
                         id={expirationDateNotification.id}
                         href={`/inventory/stocks/${expirationDateNotification.id}`}
                         icon='batch'
-                        title={`${expirationDateNotification.batch.code} | dias até expiração: ${expirationDateNotification.batch.daysToExpiration}`}
+                        title={`Código do lote: ${expirationDateNotification.batch.code}`}
+                        subtitle={`dias até expiração: ${expirationDateNotification.batch.daysToExpiration}`}
                         sentAt={expirationDateNotification.sentAt ?? new Date()}
                         onDelete={handleDeleteNotification}
                       />

diff --git a/...nts/layouts/dashboard/navbar/navbar-user/notifications-dialog/notification-card/index.tsx b/...nts/layouts/dashboard/navbar/navbar-user/notifications-dialog/notification-card/index.tsx
@@ -10,6 +10,7 @@ import Link from 'next/link'
 type NotificationCardProps = {
   id: string
   title: string
+  subtitle: string
   href: string
   icon: IconName
   sentAt: Date
@@ -19,6 +20,7 @@ type NotificationCardProps = {
 export const NotificationCard = ({
   id,
   title,
+  subtitle,
   icon,
   sentAt,
   href,
@@ -39,6 +41,7 @@ export const NotificationCard = ({
           -<h3 className='truncate text-gray-500 max-w-72'>{title}</h3>
         </div>
       </div>
+      <p className='truncate text-gray-500 pl-12'>{subtitle}</p>
       <div className='flex items-center gap-3 mt-2 ml-12'>
         <Button
           as={Link}

diff --git a/apps/web/src/ui/components/pages/inventory-movements/inventory-movements-table/index.tsx b/apps/web/src/ui/components/pages/inventory-movements/inventory-movements-table/index.tsx
@@ -76,7 +76,9 @@ export const InventoryMovementsTable = ({
         >
           {(item) => (
             <TableRow key={item.id}>
-              <TableCell key='product'>{item.product?.name}</TableCell>
+              <TableCell key='product'>
+                <span className='truncate'>{item.product?.name}</span>
+              </TableCell>
               <TableCell key='date' className='w-40'>
                 {new Datetime(item.registeredAt).format('DD/MM/YYYY HH:mm')}
               </TableCell>
@@ -85,10 +87,10 @@ export const InventoryMovementsTable = ({
               </TableCell>
               <TableCell key='quantity'>{item.itemsCount}</TableCell>
               <TableCell key='employee' className='w-32'>
-                {item.responsible?.dto.name}
+                <span className='truncate'>{item.responsible?.dto.name}</span>
               </TableCell>
               <TableCell key='remark' className='w-96'>
-                {item.remark}
+                <span className='truncate'>{item.remark}</span>
               </TableCell>
             </TableRow>
           )}

diff --git a/apps/web/src/ui/components/pages/product-stock/index.tsx b/apps/web/src/ui/components/pages/product-stock/index.tsx
@@ -60,10 +60,15 @@ export const ProductStockPage = ({ productDto }: ProductStockPageProps) => {
         </div>
 
         {userRole?.hasPermission('inventory-movements') && (
-          <div className='flex flex-col sm:flex-row gap-1'>
+          <div className='flex flex-col sm:flex-row gap-3 mt-3'>
             <Drawer
               trigger={
-                <Button color='primary' radius='sm' endContent={<Icon name='inbound' />}>
+                <Button
+                  color='primary'
+                  radius='sm'
+                  endContent={<Icon name='inbound' />}
+                  className='w-full md:w-56'
+                >
                   Lançamento de entrada
                 </Button>
               }
@@ -82,7 +87,12 @@ export const ProductStockPage = ({ productDto }: ProductStockPageProps) => {
 
             <Drawer
               trigger={
-                <Button color='primary' radius='sm' endContent={<Icon name='outbound' />}>
+                <Button
+                  color='primary'
+                  radius='sm'
+                  endContent={<Icon name='outbound' />}
+                  className='w-full md:w-56'
+                >
                   Lançamento de saída
                 </Button>
               }

diff --git a/apps/web/src/ui/components/pages/product-stock/inventory-movements-table/index.tsx b/apps/web/src/ui/components/pages/product-stock/inventory-movements-table/index.tsx
@@ -70,7 +70,7 @@ export const InventoryMovementsTable = ({
         items={inventoryMovements}
         emptyContent='Nenhum lançamento registrado para esse produto'
         isLoading={isLoading}
-        loadingContent={<Spinner color='primary'  />}
+        loadingContent={<Spinner color='primary' />}
       >
         {(item) => (
           <TableRow>
@@ -81,8 +81,12 @@ export const InventoryMovementsTable = ({
               {item.movementType === 'inbound' ? 'Entrada' : 'Saída'}
             </TableCell>
             <TableCell>{item.itemsCount}</TableCell>
-            <TableCell>{item.responsible.name}</TableCell>
-            <TableCell>{item.remark ?? 'N/A'}</TableCell>
+            <TableCell>
+              <span className='truncate'>{item.responsible?.name}</span>
+            </TableCell>
+            <TableCell>
+              <span className='truncate'>{item.remark ?? 'N/A'}</span>
+            </TableCell>
           </TableRow>
         )}
       </TableBody>

diff --git a/apps/web/src/ui/components/pages/stocks/index.tsx b/apps/web/src/ui/components/pages/stocks/index.tsx
@@ -152,7 +152,7 @@ export const StocksPage = () => {
                 <Link href={`${ROUTES.inventory.stocks}/${product.id}`}>
                   <Icon name='stock' className='size-6 text-zinc-500 mr-1' />
                 </Link>
-                {product.name}
+                <span className='truncate'>{product.name}</span>
               </TableCell>
               <TableCell key='batch'>{product.batchesCount}</TableCell>
               <TableCell key='inbound' className='font-semibold'>

diff --git a/apps/web/src/ui/components/pages/suppliers/index.tsx b/apps/web/src/ui/components/pages/suppliers/index.tsx
@@ -17,13 +17,13 @@ export const SuppliersPage = () => {
     isDeleting,
     selectedSuppliersIds,
     isLoading,
+    nameSearchValue,
     handleRegisterSupplierFormSubmit,
     handleUpdateSupplier,
     handleSuppliersSelectionChange,
     handlePageChange,
     handleDeleteSuppliersAlertDialogConfirm,
-    nameSearchValue,
-    handleNameSearchChange
+    handleNameSearchChange,
   } = useSuppliersPage()
   return (
     <>
@@ -33,7 +33,7 @@ export const SuppliersPage = () => {
             <h1 className='text-3xl font-black'>Fornecedores</h1>
             <Search value={nameSearchValue} onSearchChange={handleNameSearchChange} />
           </div>
-          <div className='flex items-center justify-center gap-1'>
+          <div className='flex flex-col md:justify-end md:flex-row gap-1 w-full md:w-max ml-auto mt-3 md:mt-0'>
             {selectedSuppliersIds.length > 0 && (
               <AlertDialog
                 trigger={
@@ -50,7 +50,12 @@ export const SuppliersPage = () => {
             )}
             <Drawer
               trigger={
-                <Button variant='solid' color='primary' size='md' className='text-orange'>
+                <Button
+                  variant='solid'
+                  color='primary'
+                  size='md'
+                  className='text-orange w-full'
+                >
                   <span className='text-white'>Adicionar Fornecedor</span>
                 </Button>
               }

diff --git a/apps/web/src/ui/components/pages/suppliers/register-supplier-form/index.tsx b/apps/web/src/ui/components/pages/suppliers/register-supplier-form/index.tsx
@@ -36,14 +36,12 @@ export const RegisterSupplierForm = ({
           />
           <Input
             label='CNPJ'
-            isRequired
             isInvalid={Boolean(errors.cnpj)}
             errorMessage={errors.cnpj?.message}
             {...register('cnpj')}
           />
           <Input
             label='Telefone'
-            isRequired
             isInvalid={Boolean(errors.phone)}
             errorMessage={errors.phone?.message}
             {...register('phone')}
@@ -57,11 +55,7 @@ export const RegisterSupplierForm = ({
         <Button onClick={onCancel} isDisabled={isSubmiting}>
           Cancelar
         </Button>
-        <Button
-          type='submit'
-          color='primary'
-          isLoading={isSubmiting}
-        >
+        <Button type='submit' color='primary' isLoading={isSubmiting}>
           Confirm
         </Button>
       </div>

diff --git a/apps/web/src/ui/components/pages/suppliers/suppliers-table/index.tsx b/apps/web/src/ui/components/pages/suppliers/suppliers-table/index.tsx
@@ -93,10 +93,18 @@ export const SuppliersTable = ({
         >
           {(supplier) => (
             <TableRow key={supplier.id}>
-              <TableCell key='name'>{supplier.name}</TableCell>
-              <TableCell key='email'>{supplier.email}</TableCell>
-              <TableCell key='cnpj'>{supplier.cnpj}</TableCell>
-              <TableCell key='phone'>{supplier.phone}</TableCell>
+              <TableCell key='name'>
+                <span className='truncate'>{supplier.name}</span>
+              </TableCell>
+              <TableCell key='email'>
+                <span className='truncate'>{supplier.email}</span>
+              </TableCell>
+              <TableCell key='cnpj'>
+                <span className='truncate'>{supplier.cnpj}</span>
+              </TableCell>
+              <TableCell key='phone'>
+                <span className='truncate'>{supplier.phone}</span>
+              </TableCell>
               <TableCell key='actions'>
                 <Tooltip content='Visualizar dados do Fornecedor'>
                   <IconButton

diff --git a/apps/web/src/ui/components/pages/suppliers/use-suppliers-page.ts b/apps/web/src/ui/components/pages/suppliers/use-suppliers-page.ts
@@ -8,8 +8,6 @@ import {
 } from '@/ui/hooks'
 import { useState } from 'react'
 import { useAuthContext } from '../../contexts/auth-context'
-import { SuppliersService } from '@/api/services'
-import { SupplierDto } from '@stocker/core/dtos'
 
 export function useSuppliersPage() {
   const { showSuccess, showError } = useToast()
@@ -27,7 +25,7 @@ export function useSuppliersPage() {
     const response = await suppliersService.listSuppliers({
       page,
       companyId: user.companyId,
-      name: nameSearchValue
+      name: nameSearchValue,
     })
     if (response.isFailure) {
       showError(response.errorMessage)
@@ -40,7 +38,7 @@ export function useSuppliersPage() {
   const { data, isFetching, refetch } = useCache({
     fetcher: fetchUsers,
     key: CACHE.users.key,
-    dependencies: [page,nameSearchValue],
+    dependencies: [page, nameSearchValue],
   })
   async function handleUpdateSupplier() {
     refetch()

diff --git a/apps/web/src/ui/hooks/use-cache.ts b/apps/web/src/ui/hooks/use-cache.ts
@@ -23,6 +23,7 @@ type Cache<CacheData> = {
   isRefetching: boolean
   refetch: () => void
   mutate: (newCacheData: CacheData | null, consig?: MudateConfig) => void
+  clearCache: VoidFunction
 }
 
 export function useCache<CacheData>({
@@ -56,12 +57,17 @@ export function useCache<CacheData>({
       )
   }
 
+  function clearCache() {
+    mutate(undefined)
+  }
+
   return {
     data: data ?? null,
     error,
     isFetching: isLoading,
     isRefetching: isValidating,
     refetch: () => mutate(),
     mutate: mutateCache,
+    clearCache,
   }
 }