+
+ )}
+
+ {item.title}
+
+ {item.title}
+
+
+ {user.name}
+ ++ {user.email} +
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/UIs/Customers/src/app/providers/index.tsx b/UIs/Customers/src/app/providers/index.tsx
new file mode 100644
index 0000000..d9ddfe3
--- /dev/null
+++ b/UIs/Customers/src/app/providers/index.tsx
@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { queryClient } from '../config/react-query';
+import { ThemeProvider } from '../theme/theme-provider';
+
+export const AppProviders = ({ children }: { children: ReactNode }) => {
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/UIs/Customers/src/features/auth/components/login-form/index.tsx b/UIs/Customers/src/features/auth/components/login-form/index.tsx
new file mode 100644
index 0000000..65799d9
--- /dev/null
+++ b/UIs/Customers/src/features/auth/components/login-form/index.tsx
@@ -0,0 +1,53 @@
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Form } from '@/shared/components/ui/form';
+import { useLogin } from '../../hooks/use-login';
+import { loginFormSchema, type LoginFormSchema } from './schema';
+import { LoginHeader } from './header';
+import { CredentialsFields } from './credentials';
+import { LoginTermsAndServices } from './terms-and-services';
+import { formDraftService } from '@/shared/services/form-draft';
+import { SubmitingButton } from '@/shared/components/global/submiting-button';
+
+export function LoginForm() {
+ const { mutateAsync: login, isPending } = useLogin();
+
+ const form = useForm
+
+
+ Faça login na sua conta.
+ +
+ Não possui uma conta?{' '}
+
+ Contate o adminstrador
+
+
+
+ Ao clicar em continuar, você concorda com nossos{' '}
+ Termos de Serviço e{' '}
+ Política de Privacidade.
+
+ );
+}
diff --git a/UIs/Customers/src/features/auth/hooks/use-login.ts b/UIs/Customers/src/features/auth/hooks/use-login.ts
new file mode 100644
index 0000000..c81f44e
--- /dev/null
+++ b/UIs/Customers/src/features/auth/hooks/use-login.ts
@@ -0,0 +1,20 @@
+import { useMutation } from '@tanstack/react-query';
+import { authService } from '../services';
+import { useAuthStore } from '../store';
+import type { LoginCredentials } from '../types';
+
+export const useLogin = () => {
+ const setSession = useAuthStore((state) => state.setSession);
+
+ return useMutation({
+ mutationFn: (credentials: LoginCredentials) =>
+ authService.login(credentials),
+ meta: {
+ successMessage: 'Login realizado com sucesso! Redirecionando...'
+ },
+ onSuccess: (session) => {
+ console.log(session)
+ setSession(session);
+ }
+ });
+};
diff --git a/UIs/Customers/src/features/auth/services/index.ts b/UIs/Customers/src/features/auth/services/index.ts
new file mode 100644
index 0000000..3b5c092
--- /dev/null
+++ b/UIs/Customers/src/features/auth/services/index.ts
@@ -0,0 +1,30 @@
+
+import type {
+ AuthSession,
+ LoginCredentials,
+} from '../types';
+
+
+export const authService = {
+ login: async (credentials: LoginCredentials): Promise
+ Trending up this month
+
+ Visitors for the last 6 months
+
+
+ Down 20% this period
+
+ Acquisition needs attention
+
+
+ Strong user retention
+ Engagement exceed targets
+
+ Steady performance increase
+ Meets growth projections
+
+
+
+ );
+};
diff --git a/UIs/Customers/src/index.css b/UIs/Customers/src/index.css
new file mode 100644
index 0000000..f668f48
--- /dev/null
+++ b/UIs/Customers/src/index.css
@@ -0,0 +1,179 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+ --radius-sm: calc(var(--radius) - 4px);
+ --radius-md: calc(var(--radius) - 2px);
+ --radius-lg: var(--radius);
+ --radius-xl: calc(var(--radius) + 4px);
+ --color-background: var(--background);
+ --color-foreground: var(--foreground);
+ --color-card: var(--card);
+ --color-card-foreground: var(--card-foreground);
+ --color-popover: var(--popover);
+ --color-popover-foreground: var(--popover-foreground);
+ --color-primary: var(--primary);
+ --color-primary-foreground: var(--primary-foreground);
+ --color-secondary: var(--secondary);
+ --color-secondary-foreground: var(--secondary-foreground);
+ --color-muted: var(--muted);
+ --color-muted-foreground: var(--muted-foreground);
+ --color-accent: var(--accent);
+ --color-accent-foreground: var(--accent-foreground);
+ --color-destructive: var(--destructive);
+ --color-border: var(--border);
+ --color-input: var(--input);
+ --color-ring: var(--ring);
+ --color-chart-1: var(--chart-1);
+ --color-chart-2: var(--chart-2);
+ --color-chart-3: var(--chart-3);
+ --color-chart-4: var(--chart-4);
+ --color-chart-5: var(--chart-5);
+ --color-sidebar: var(--sidebar);
+ --color-sidebar-foreground: var(--sidebar-foreground);
+ --color-sidebar-primary: var(--sidebar-primary);
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+ --color-sidebar-accent: var(--sidebar-accent);
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+ --color-sidebar-border: var(--sidebar-border);
+ --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+ font-family: 'Poppins', sans-serif;
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ --radius: 0.625rem;
+ --background: oklch(1 0 0);
+ --foreground: oklch(0.13 0.028 261.692);
+ --card: oklch(1 0 0);
+ --card-foreground: oklch(0.13 0.028 261.692);
+ --popover: oklch(1 0 0);
+ --popover-foreground: oklch(0.13 0.028 261.692);
+ --primary: oklch(0.21 0.034 264.665);
+ --primary-foreground: oklch(0.985 0.002 247.839);
+ --secondary: oklch(0.967 0.003 264.542);
+ --secondary-foreground: oklch(0.21 0.034 264.665);
+ --muted: oklch(0.967 0.003 264.542);
+ --muted-foreground: oklch(0.551 0.027 264.364);
+ --accent: oklch(0.967 0.003 264.542);
+ --accent-foreground: oklch(0.21 0.034 264.665);
+ --destructive: oklch(0.577 0.245 27.325);
+ --border: oklch(0.928 0.006 264.531);
+ --input: oklch(0.928 0.006 264.531);
+ --ring: oklch(0.707 0.022 261.325);
+ --chart-1: var(--color-red-900);
+ --chart-2: var(--color-red-500);
+ --chart-3: oklch(0.398 0.07 227.392);
+ --chart-4: oklch(0.828 0.189 84.429);
+ --chart-5: oklch(0.769 0.188 70.08);
+ --sidebar: oklch(0.985 0.002 247.839);
+ --sidebar-foreground: oklch(0.13 0.028 261.692);
+ --sidebar-primary: oklch(0.21 0.034 264.665);
+ --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
+ --sidebar-accent: oklch(0.967 0.003 264.542);
+ --sidebar-accent-foreground: oklch(0.21 0.034 264.665);
+ --sidebar-border: oklch(0.928 0.006 264.531);
+ --sidebar-ring: oklch(0.707 0.022 261.325);
+}
+
+.dark {
+ --background: oklch(0.141 0.005 285.823);
+ --foreground: oklch(0.985 0 0);
+ --card: oklch(0.21 0.006 285.885);
+ --card-foreground: oklch(0.985 0 0);
+ --popover: oklch(0.21 0.006 285.885);
+ --popover-foreground: oklch(0.985 0 0);
+ --primary: oklch(0.92 0.004 286.32);
+ --primary-foreground: oklch(0.21 0.006 285.885);
+ --secondary: oklch(0.274 0.006 286.033);
+ --secondary-foreground: oklch(0.985 0 0);
+ --muted: oklch(0.274 0.006 286.033);
+ --muted-foreground: oklch(0.705 0.015 286.067);
+ --accent: oklch(0.274 0.006 286.033);
+ --accent-foreground: oklch(0.985 0 0);
+ --destructive: oklch(0.704 0.191 22.216);
+ --border: oklch(1 0 0 / 10%);
+ --input: oklch(1 0 0 / 15%);
+ --ring: oklch(0.552 0.016 285.938);
+ --chart-1: var(--color-red-700);
+ --chart-2: var(--color-red-300);
+ --chart-3: oklch(0.769 0.188 70.08);
+ --chart-4: oklch(0.627 0.265 303.9);
+ --chart-5: oklch(0.645 0.246 16.439);
+ --sidebar: oklch(0.21 0.006 285.885);
+ --sidebar-foreground: oklch(0.985 0 0);
+ --sidebar-primary: oklch(0.488 0.243 264.376);
+ --sidebar-primary-foreground: oklch(0.985 0 0);
+ --sidebar-accent: oklch(0.274 0.006 286.033);
+ --sidebar-accent-foreground: oklch(0.985 0 0);
+ --sidebar-border: oklch(1 0 0 / 10%);
+ --sidebar-ring: oklch(0.552 0.016 285.938);
+}
+
+
+@layer base {
+ * {
+ @apply border-border outline-ring/50;
+ }
+ body {
+ @apply bg-background text-foreground;
+ margin: 0;
+ font-family: 'Poppins', sans-serif;
+ }
+ :-webkit-scrollbar {
+ width: 10px;
+ height: 10px;
+ }
+
+ ::-webkit-scrollbar-track {
+ background: transparent;
+ }
+
+ ::-webkit-scrollbar-thumb {
+ background-color: #b91c1c;
+ border-radius: 10px;
+ border: 2px solid var(--background);
+ }
+
+ ::-webkit-scrollbar-thumb:hover {
+ background-color: #991b1b;
+ }
+
+ * {
+ scrollbar-width: thin;
+ scrollbar-color: #b91c1c transparent;
+ }
+
+ .font-extralight,
+ .font-light,
+ .font-medium,
+ .font-normal {
+ font-family: 'Poppins', sans-serif;
+ }
+
+ .font-semibold,
+ .font-bold,
+ .font-extrabold,
+ .font-black {
+ font-family: 'Montserrat', sans-serif;
+ }
+
+ .font-weight-200,
+ .font-weight-300,
+ .font-weight-400 {
+ font-family: 'Poppins', sans-serif;
+ }
+
+ .font-weight-500,
+ .font-weight-600,
+ .font-weight-700,
+ .font-weight-800,
+ .font-weight-900 {
+ font-family: 'Montserrat', sans-serif;
+ }
+}
\ No newline at end of file
diff --git a/UIs/Customers/src/main.tsx b/UIs/Customers/src/main.tsx
new file mode 100644
index 0000000..b5bfb2c
--- /dev/null
+++ b/UIs/Customers/src/main.tsx
@@ -0,0 +1,11 @@
+import './index.css';
+import App from './app/app';
+
+import { createRoot } from 'react-dom/client';
+import { StrictMode } from 'react';
+
+createRoot(document.getElementById('root')!).render(
+
+
+
+ Detalhes: {row.original.name}
+
+ )
+ : undefined
+ }
+ tableOptions={{
+ data,
+ columns,
+ getCoreRowModel: getCoreRowModel(),
+ getPaginationRowModel: getPaginationRowModel(),
+ getFilteredRowModel: getFilteredRowModel(),
+ getSortedRowModel: getSortedRowModel(),
+ getExpandedRowModel: getExpandedRowModel(),
+ getRowCanExpand: () => true,
+ initialState: {
+ pagination: { pageSize: 10 },
+ ...initialState
+ }
+ }}
+ >
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/UIs/Customers/src/shared/components/global/datatable/pieces/datatable-dropdown-column-visibility/index.tsx b/UIs/Customers/src/shared/components/global/datatable/pieces/datatable-dropdown-column-visibility/index.tsx
new file mode 100644
index 0000000..ead64b2
--- /dev/null
+++ b/UIs/Customers/src/shared/components/global/datatable/pieces/datatable-dropdown-column-visibility/index.tsx
@@ -0,0 +1,39 @@
+import { useDataTable } from '../../hook/usetable';
+import { Button } from '@/shared/components/ui/button';
+import { Eye } from 'lucide-react';
+import {
+ DropdownMenuCheckboxItem,
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuTrigger
+} from '@/shared/components/ui/dropdown-menu';
+
+export function DataTableDropdownColumnsVisibility() {
+ const { table } = useDataTable();
+
+ return (
+
+
+ );
+}
diff --git a/UIs/Customers/src/shared/components/global/datatable/pieces/datatable/index.tsx b/UIs/Customers/src/shared/components/global/datatable/pieces/datatable/index.tsx
new file mode 100644
index 0000000..0b31b7b
--- /dev/null
+++ b/UIs/Customers/src/shared/components/global/datatable/pieces/datatable/index.tsx
@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+import {
+ useReactTable,
+ type Row,
+ type TableOptions
+} from '@tanstack/react-table';
+import { DataTableContext } from '../../hook/usetable';
+
+export interface IDataTableArraste para alterar a prioridade do banco
+Arraste e solte seus arquivos aqui
+
+ {files.map((file) => (
+
+ );
+}
diff --git a/UIs/Customers/src/shared/components/global/file-picker/pieces/count/index.tsx b/UIs/Customers/src/shared/components/global/file-picker/pieces/count/index.tsx
new file mode 100644
index 0000000..8b8aab3
--- /dev/null
+++ b/UIs/Customers/src/shared/components/global/file-picker/pieces/count/index.tsx
@@ -0,0 +1,10 @@
+import { useFilePickerContext } from '../../hooks';
+
+export function FilePickerCount({ label }: { label: string }) {
+ const [{ files }] = useFilePickerContext();
+ return (
+
+ {
+ //@ts-expect-error file
+ !file.url && getFilePreview(file)
+ }
+ 
+
+ ))}
+
+ {file.isPrimary && (
+
+
+
+ )}
+ {!file.isPrimary && (
+
+ )}
+
+ + {label} ({files.length}) +
+ ); +} diff --git a/UIs/Customers/src/shared/components/global/file-picker/pieces/drag/index.tsx b/UIs/Customers/src/shared/components/global/file-picker/pieces/drag/index.tsx new file mode 100644 index 0000000..aa22d81 --- /dev/null +++ b/UIs/Customers/src/shared/components/global/file-picker/pieces/drag/index.tsx @@ -0,0 +1,32 @@ +import type { ReactNode, DragEvent } from 'react'; +import { useCallback } from 'react'; +import { useFilePickerContext } from '../../hooks'; +import { useDropzone } from '@/shared/hooks/use-dropzone'; + +export function FilePickerDrag({ children }: { children?: ReactNode }) { + const [{ files }, { addFiles }] = useFilePickerContext(); + + const handleDrop = useCallback( + (e: DragEvent 0 || undefined}
+ className="relative flex min-h-56 flex-col items-center overflow-hidden rounded-xl border-2 border-muted-foreground/50 border-dashed p-4 transition-colors not-data-[files]:justify-center has-[input:focus]:border-ring has-[input:focus]:ring-[3px] has-[input:focus]:ring-ring/50 data-[dragging=true]:bg-accent/50"
+ >
+ {children}
+
+ );
+}
diff --git a/UIs/Customers/src/shared/components/global/file-picker/pieces/empty/index.tsx b/UIs/Customers/src/shared/components/global/file-picker/pieces/empty/index.tsx
new file mode 100644
index 0000000..8579764
--- /dev/null
+++ b/UIs/Customers/src/shared/components/global/file-picker/pieces/empty/index.tsx
@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+import { useFilePickerContext } from '../../hooks';
+
+type TFilePickerEmpty = {
+ children?: ReactNode;
+};
+
+export function FilePickerEmpty({ children }: TFilePickerEmpty) {
+ const [{ files }] = useFilePickerContext();
+ return (
+ files.length < 1 && (
+
+ {children}
+
+ )
+ );
+}
diff --git a/UIs/Customers/src/shared/components/global/file-picker/pieces/error/index.tsx b/UIs/Customers/src/shared/components/global/file-picker/pieces/error/index.tsx
new file mode 100644
index 0000000..a115ac3
--- /dev/null
+++ b/UIs/Customers/src/shared/components/global/file-picker/pieces/error/index.tsx
@@ -0,0 +1,24 @@
+import { AlertCircleIcon } from 'lucide-react';
+import { useFilePickerContext } from '../../hooks';
+
+export function FilePickerError() {
+ const [{ errors }] = useFilePickerContext();
+
+ if (errors.length === 0) {
+ return null;
+ }
+
+ return (
+
+ {errors.map((error, index) => (
+
+ );
+}
diff --git a/UIs/Customers/src/shared/components/global/file-picker/pieces/file-picker/index.tsx b/UIs/Customers/src/shared/components/global/file-picker/pieces/file-picker/index.tsx
new file mode 100644
index 0000000..5185bb9
--- /dev/null
+++ b/UIs/Customers/src/shared/components/global/file-picker/pieces/file-picker/index.tsx
@@ -0,0 +1,47 @@
+import { useMemo, type ReactNode } from 'react';
+import { useFilePicker } from '../../hooks/use-file-picker';
+import { FilePickerContext } from '../../hooks';
+import type { FilePickerOptions, FileWithPreview } from '../../types';
+
+type TFilePicker = Omit<
+ FilePickerOptions,
+ 'maxSize' | 'files' | 'onFilesChange'
+> & {
+ files: FileWithPreview[];
+ onFilesChange: (files: FileWithPreview[]) => void;
+ maxSizeMB?: number;
+ children?: ReactNode;
+};
+
+export function FilePicker({
+ children,
+ maxSizeMB = 5,
+ files,
+ onFilesChange,
+ ...options
+}: TFilePicker) {
+ const filePickerOptions: FilePickerOptions = {
+ ...options,
+ files,
+ onFilesChange,
+ maxFiles: options.maxFiles ? options.maxFiles : 5,
+ multiple: options.multiple || true,
+ maxSize: maxSizeMB * 1024 * 1024
+ };
+
+ const [state, actions] = useFilePicker(filePickerOptions);
+
+ const contextValue: [typeof state & { files: typeof files }, typeof actions] =
+ useMemo(() => {
+ return [{ ...state, files }, actions] as [
+ typeof state & { files: typeof files },
+ typeof actions
+ ];
+ }, [state, files, actions]);
+
+ return (
+
+
+ ))}
+ {children}
+
+ {children}
+
+ )
+ );
+}
diff --git a/UIs/Customers/src/shared/components/global/file-picker/pieces/input/index.tsx b/UIs/Customers/src/shared/components/global/file-picker/pieces/input/index.tsx
new file mode 100644
index 0000000..424281d
--- /dev/null
+++ b/UIs/Customers/src/shared/components/global/file-picker/pieces/input/index.tsx
@@ -0,0 +1,19 @@
+import { Input } from '@/shared/components/ui/input';
+import { useFilePickerContext } from '../../hooks';
+
+export function FilePickerInput({ ...props }: React.ComponentProps<'input'>) {
+ const [, { getInputProps }] = useFilePickerContext();
+
+ const { ref, ...inputProps } = getInputProps();
+
+ return (
+
+ );
+}
diff --git a/UIs/Customers/src/shared/components/global/file-picker/types/index.ts b/UIs/Customers/src/shared/components/global/file-picker/types/index.ts
new file mode 100644
index 0000000..95ce2eb
--- /dev/null
+++ b/UIs/Customers/src/shared/components/global/file-picker/types/index.ts
@@ -0,0 +1,49 @@
+import type { ChangeEvent, InputHTMLAttributes, RefObject } from 'react';
+
+export type FileMetadata = {
+ name: string;
+ size: number;
+ type: string;
+ url: string;
+ id: string;
+};
+
+export type FileWithPreview = {
+ id: string;
+ file?: File | FileMetadata;
+ name: string;
+ url: string;
+ type: string;
+ publicId?: string;
+ isPrimary?: boolean;
+};
+
+export type FilePickerOptions = {
+ files: FileWithPreview[];
+ onFilesChange: (files: FileWithPreview[]) => void;
+ onFilesAdded?: (addedFiles: FileWithPreview[]) => void;
+
+ maxFiles?: number;
+ maxSize?: number;
+ accept?: string;
+ multiple?: boolean;
+};
+
+export type FilePickerState = {
+ errors: string[];
+};
+
+export type FilePickerActions = {
+ addFiles: (files: FileList | File[]) => void;
+ removeFile: (id: string) => void;
+ setPrimaryFile: (id: string) => void;
+ clearFiles: () => void;
+ clearErrors: () => void;
+ handleFileChange: (e: ChangeEvent
+ {fileType?.startsWith('image/') ? (
+ file.file instanceof File ? (
+ (() => {
+ const previewUrl = URL.createObjectURL(file.file);
+ return renderImage(previewUrl);
+ })()
+ ) : file.file.src ? (
+ renderImage(file.file.src)
+ ) : (
+
+ );
+};
diff --git a/UIs/Customers/src/shared/components/global/file-picker/utils/index.tsx b/UIs/Customers/src/shared/components/global/file-picker/utils/index.tsx
new file mode 100644
index 0000000..dfbdc6b
--- /dev/null
+++ b/UIs/Customers/src/shared/components/global/file-picker/utils/index.tsx
@@ -0,0 +1,5 @@
+export { getFileIcon } from './get-file-icon';
+export { getFilePreview } from './get-file-preview';
+export { generateUniqueId } from './generate-unique-id';
+export { validateFile } from './validate-file';
+export { processNewFiles } from './process-new-files';
diff --git a/UIs/Customers/src/shared/components/global/file-picker/utils/process-new-files/index.test.tsx b/UIs/Customers/src/shared/components/global/file-picker/utils/process-new-files/index.test.tsx
new file mode 100644
index 0000000..6de68db
--- /dev/null
+++ b/UIs/Customers/src/shared/components/global/file-picker/utils/process-new-files/index.test.tsx
@@ -0,0 +1,143 @@
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import { processNewFiles } from '.';
+import type { FileWithPreview } from '../../types';
+
+const { mockGenerateUniqueId, mockValidateFile } = vi.hoisted(() => {
+ const mockGenerateUniqueId = vi.fn(() => 'unique-id-mock');
+ const mockValidateFile = vi.fn();
+
+ return {
+ mockGenerateUniqueId,
+ mockValidateFile
+ };
+});
+
+vi.mock('../generate-unique-id', () => ({
+ generateUniqueId: mockGenerateUniqueId
+}));
+
+vi.mock('../validate-file', () => ({
+ validateFile: mockValidateFile
+}));
+
+//@ts-expect-error global is not defined
+global.URL.createObjectURL = vi.fn((file) => `blob-url-mock-${file.name}`);
+
+const existingFileInstance = new File(['data'], 'A.jpg', {
+ lastModified: 1000
+});
+
+Object.defineProperty(existingFileInstance, 'size', {
+ value: 100,
+ writable: true
+});
+
+const mockFileA = {
+ name: 'A.jpg',
+ size: 100,
+ lastModified: 1000,
+ type: 'image/jpeg'
+} as File;
+
+const mockFileB = {
+ name: 'B.png',
+ size: 200,
+ lastModified: 2000,
+ type: 'image/png'
+} as File;
+
+const mockFileC = {
+ name: 'A.jpg',
+ size: 100,
+ lastModified: 1000,
+ type: 'image/jpeg'
+} as File;
+
+const existingFileA: FileWithPreview = {
+ file: existingFileInstance,
+ id: 'idA',
+ url: 'blobA',
+ name: 'A.jpg',
+ type: 'image/jpeg',
+ isPrimary: false
+};
+
+const defaultOptions = {
+ maxSize: 500,
+ accept: 'image/*',
+ multiple: true
+};
+
+describe('processNewFiles', () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ mockValidateFile.mockReturnValue(null);
+ });
+
+ it('must structure valid files with a unique ID and Blob URL', () => {
+ const { validFiles, errors } = processNewFiles(
+ [mockFileB],
+ [],
+ defaultOptions
+ );
+
+ expect(errors).toEqual([]);
+ expect(validFiles).toHaveLength(1);
+ expect(validFiles[0]).toEqual({
+ file: mockFileB,
+ id: 'unique-id-mock',
+ src: 'blob-url-mock-B.png',
+ publicId: undefined,
+ isPrimary: false,
+ name: mockFileB.name,
+ type: mockFileB.type
+ });
+
+ expect(mockGenerateUniqueId).toHaveBeenCalledWith(mockFileB);
+ //@ts-expect-error global is not defined
+ expect(global.URL.createObjectURL).toHaveBeenCalledWith(mockFileB);
+ });
+
+ it('should ignore files that are exact duplicates in "multiple" mode', () => {
+ const newFiles = [mockFileC];
+
+ const { validFiles, errors } = processNewFiles(
+ newFiles,
+ [existingFileA],
+ defaultOptions
+ );
+
+ expect(errors).toEqual([]);
+ expect(validFiles).toEqual([]);
+
+ expect(mockValidateFile).not.toHaveBeenCalled();
+ });
+
+ it('should add the error to the list and skip the file if the validation fails', () => {
+ const VALIDATION_ERROR = 'Arquivo muito grande!';
+
+ mockValidateFile.mockReturnValue(VALIDATION_ERROR);
+
+ const { validFiles, errors } = processNewFiles(
+ [mockFileB],
+ [],
+ defaultOptions
+ );
+
+ expect(errors).toEqual([VALIDATION_ERROR]);
+ expect(validFiles).toEqual([]);
+
+ //@ts-expect-error global is not defined
+ expect(global.URL.createObjectURL).not.toHaveBeenCalled();
+ });
+
+ it('The file should be processed in "single" mode (skipping the duplicate check)', () => {
+ const { validFiles } = processNewFiles([mockFileA], [existingFileA], {
+ ...defaultOptions,
+ multiple: false
+ });
+
+ expect(validFiles).toHaveLength(1);
+ expect(mockValidateFile).toHaveBeenCalledTimes(1);
+ });
+});
diff --git a/UIs/Customers/src/shared/components/global/file-picker/utils/process-new-files/index.tsx b/UIs/Customers/src/shared/components/global/file-picker/utils/process-new-files/index.tsx
new file mode 100644
index 0000000..e4fad6f
--- /dev/null
+++ b/UIs/Customers/src/shared/components/global/file-picker/utils/process-new-files/index.tsx
@@ -0,0 +1,49 @@
+import type { FileWithPreview } from '../../types';
+import { generateUniqueId } from '../generate-unique-id';
+import { validateFile } from '../validate-file';
+
+export function processNewFiles(
+ newFilesArray: File[],
+ existingFiles: FileWithPreview[],
+ options: {
+ maxSize: number;
+ accept: string;
+ multiple: boolean;
+ }
+): { validFiles: FileWithPreview[]; errors: string[] } {
+ const errors: string[] = [];
+ const validFiles: FileWithPreview[] = [];
+
+ newFilesArray.forEach((file) => {
+ if (options.multiple) {
+ const isDuplicate = existingFiles.some(
+ (existingFile) =>
+ existingFile.file instanceof File &&
+ existingFile.file.name === file.name &&
+ existingFile.file.size === file.size &&
+ existingFile.file.lastModified === file.lastModified
+ );
+ if (isDuplicate) {
+ return;
+ }
+ }
+
+ const error = validateFile(file, options.maxSize, options.accept);
+
+ if (error) {
+ errors.push(error);
+ } else {
+ validFiles.push({
+ file,
+ id: generateUniqueId(file),
+ url: URL.createObjectURL(file),
+ publicId: undefined,
+ isPrimary: false,
+ name: file.name,
+ type: file.type
+ });
+ }
+ });
+
+ return { validFiles, errors };
+}
diff --git a/UIs/Customers/src/shared/components/global/file-picker/utils/validate-file/index.test.tsx b/UIs/Customers/src/shared/components/global/file-picker/utils/validate-file/index.test.tsx
new file mode 100644
index 0000000..b35984e
--- /dev/null
+++ b/UIs/Customers/src/shared/components/global/file-picker/utils/validate-file/index.test.tsx
@@ -0,0 +1,101 @@
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import { validateFile } from '.';
+
+const { mockFormatBytes } = vi.hoisted(() => {
+ const mockFormatBytes = vi.fn((size) => `${size / 1024} KB`);
+
+ return {
+ mockFormatBytes
+ };
+});
+
+vi.mock('@/shared/utils', () => ({ formatBytes: mockFormatBytes }));
+
+const createMockFile = (name: string, size: number, type: string = '') =>
+ ({
+ name,
+ size,
+ type,
+ lastModified: 0,
+ slice: vi.fn()
+ }) as unknown as File;
+
+describe('validateFile', () => {
+ const MAX_SIZE_BYTES = 500000; // 500 KB
+ const FILE_NAME = 'test-file.pdf';
+
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ it('should return an error if the file size exceeds maxSize', () => {
+ const largeFile = createMockFile(FILE_NAME, MAX_SIZE_BYTES + 1000); // 501 KB
+ const error = validateFile(largeFile, MAX_SIZE_BYTES, '*');
+
+ expect(error).toContain(`O arquivo "${FILE_NAME}" excede o tamanho máximo`);
+
+ expect(mockFormatBytes).toHaveBeenCalledWith(MAX_SIZE_BYTES);
+ });
+
+ it('should return null if the file size is within the limit', () => {
+ const smallFile = createMockFile(FILE_NAME, MAX_SIZE_BYTES - 100);
+ const error = validateFile(smallFile, MAX_SIZE_BYTES, '*');
+
+ expect(error).toBeNull();
+ });
+
+ it('It should return null if "accept" is "*" (Acceptance guard)', () => {
+ const file = createMockFile(FILE_NAME, 100, 'application/whatever');
+ const error = validateFile(file, MAX_SIZE_BYTES, '*');
+
+ expect(error).toBeNull();
+ });
+
+ it('must successfully accept Wildcard type (image/*)', () => {
+ const file = createMockFile('photo.jpeg', 100, 'image/jpeg');
+ const error = validateFile(file, MAX_SIZE_BYTES, 'image/*,application/pdf');
+
+ expect(error).toBeNull();
+ });
+
+ it('must successfully accept exact MIME type', () => {
+ const file = createMockFile('doc.pdf', 100, 'application/pdf');
+ const error = validateFile(file, MAX_SIZE_BYTES, 'image/*,application/pdf');
+
+ expect(error).toBeNull();
+ });
+
+ it('should return an error indicating that the MIME type is not accepted', () => {
+ const file = createMockFile('video.mp4', 100, 'video/mp4');
+ const error = validateFile(file, MAX_SIZE_BYTES, 'image/*,application/pdf');
+
+ expect(error).toContain('não tem um formato aceito.');
+ });
+
+ it('should successfully accept files with the extension (.pdf)', () => {
+ const file = createMockFile('report.pdf', 100, 'application/octet-stream');
+ const error = validateFile(file, MAX_SIZE_BYTES, '.pdf, .doc');
+
+ expect(error).toBeNull();
+ });
+
+ it('should return an error if the extension is not accepted', () => {
+ const file = createMockFile('image.jpg', 100, 'image/jpeg');
+ const error = validateFile(file, MAX_SIZE_BYTES, '.pdf,.png');
+
+ expect(error).toContain('não tem um formato aceito.');
+ });
+
+ it('should prioritize size failure if both (size and type) fail', () => {
+ const largeFile = createMockFile(
+ 'bad.mp4',
+ MAX_SIZE_BYTES + 1000,
+ 'video/mp4'
+ );
+
+ const error = validateFile(largeFile, MAX_SIZE_BYTES, 'image/png');
+
+ expect(error).toContain('excede o tamanho máximo');
+ expect(error).not.toContain('formato aceito');
+ });
+});
diff --git a/UIs/Customers/src/shared/components/global/file-picker/utils/validate-file/index.tsx b/UIs/Customers/src/shared/components/global/file-picker/utils/validate-file/index.tsx
new file mode 100644
index 0000000..4b3187d
--- /dev/null
+++ b/UIs/Customers/src/shared/components/global/file-picker/utils/validate-file/index.tsx
@@ -0,0 +1,33 @@
+import { formatBytes } from '@/shared/utils';
+export function validateFile(
+ file: File,
+ maxSize: number,
+ accept: string
+): string | null {
+ if (file.size > maxSize) {
+ return `O arquivo "${file.name}" excede o tamanho máximo de ${formatBytes(maxSize)}.`;
+ }
+
+ if (accept !== '*') {
+ const acceptedTypes = accept.split(',').map((type) => type.trim());
+ const fileType = file.type || '';
+ const fileExtension = `.${file.name.split('.').pop() || ''}`;
+
+ const isAccepted = acceptedTypes.some((type) => {
+ if (type.startsWith('.')) {
+ return fileExtension.toLowerCase() === type.toLowerCase();
+ }
+ if (type.endsWith('/*')) {
+ const baseType = type.split('/')[0];
+ return fileType.startsWith(`${baseType}/`);
+ }
+ return fileType === type;
+ });
+
+ if (!isAccepted) {
+ return `O arquivo "${file.name}" não tem um formato aceito.`;
+ }
+ }
+
+ return null;
+}
diff --git a/UIs/Customers/src/shared/components/global/floating-navigation/index.tsx b/UIs/Customers/src/shared/components/global/floating-navigation/index.tsx
new file mode 100644
index 0000000..4f4e4b0
--- /dev/null
+++ b/UIs/Customers/src/shared/components/global/floating-navigation/index.tsx
@@ -0,0 +1,64 @@
+import { Button } from '../../ui/button';
+import type{ ElementType } from 'react';
+
+interface NavigationItem {
+ name: string;
+ href: string;
+ icon: ElementType;
+ active?: boolean;
+}
+
+interface FloatingNavigationProps {
+ items: NavigationItem[];
+}
+export const FloatingNavigation = ({ items }: FloatingNavigationProps) => {
+
+ return (
+ -
+ {items.map((item) => (
+
-
+
+
+
+ ++ +
+ {item.name} +
+
+ ))}
+
+ {status === 'loading' && showSkeleton && (
+
+
+ )}
+
+ {status === 'error' && (
+
+ 
setStatus('loaded')}
+ onError={() => setStatus('error')}
+ />
+
+
+ );
+}
diff --git a/UIs/Customers/src/shared/components/global/input-builder/index.tsx b/UIs/Customers/src/shared/components/global/input-builder/index.tsx
new file mode 100644
index 0000000..758c70e
--- /dev/null
+++ b/UIs/Customers/src/shared/components/global/input-builder/index.tsx
@@ -0,0 +1,45 @@
+import type { ComponentProps } from 'react';
+import { Input } from '@/shared/components/ui/input';
+import { InputPercent } from './inputs/input-percent';
+import { InputMonth } from './inputs/input-month';
+import { InputYear } from './inputs/input-year';
+import { InputInstallment } from './inputs/input-installment';
+import { InputMoney } from './inputs/input-money';
+
+export enum InputType {
+ Money = 'Money',
+ Percent = 'Percent',
+ Month = 'Month',
+ Year = 'Year',
+ Installments = 'Installments'
+}
+
+interface InputBuilderProps extends ComponentProps<'input'> {
+ onChangeHandler?: (value: string) => void;
+ inputType: InputType;
+}
+
+
+const INPUT_STRATEGIES: Record
+
+ )}
+
+
+ onChangeHandler?.(e.target.value)}
+ />
+
+ parcelas
+
+
+ );
+};
diff --git a/UIs/Customers/src/shared/components/global/input-builder/inputs/input-money.tsx b/UIs/Customers/src/shared/components/global/input-builder/inputs/input-money.tsx
new file mode 100644
index 0000000..5e2e8d6
--- /dev/null
+++ b/UIs/Customers/src/shared/components/global/input-builder/inputs/input-money.tsx
@@ -0,0 +1,56 @@
+import { Input } from '@/shared/components/ui/input';
+import { maskInputMoneyBR } from '@/shared/utils/masks/mask-money';
+import type { ComponentProps } from 'react';
+
+interface InputMoneyProps extends ComponentProps<'input'> {
+ onChangeHandler?: (value: string) => void;
+}
+
+const parseToNumber = (value: any) => {
+ if (value === null || value === undefined || value === '') return undefined;
+ if (typeof value === 'number') return value;
+
+ let stringValue = String(value);
+
+ if (stringValue.includes('.') && stringValue.includes(',')) {
+ stringValue = stringValue.replace(/\./g, '').replace(',', '.');
+ } else if (stringValue.includes(',')) {
+ stringValue = stringValue.replace(',', '.');
+ }
+
+ const parsed = parseFloat(stringValue);
+ return isNaN(parsed) ? undefined : parsed;
+};
+
+function formatCurrencyPTBR(value: any) {
+ const number = parseToNumber(value);
+ if (number === undefined || number === null || isNaN(number))
+ return 'R$ 0,00';
+ return new Intl.NumberFormat('pt-BR', {
+ style: 'currency',
+ currency: 'BRL'
+ }).format(number);
+}
+
+export const InputMoney = ({
+ onChangeHandler,
+ value,
+ defaultValue,
+ ...props
+}: InputMoneyProps) => {
+ const maskedValue = defaultValue
+ ? formatCurrencyPTBR(defaultValue)
+ : value
+ ? formatCurrencyPTBR(value)
+ : '';
+ return (
+ {
+ const masked = maskInputMoneyBR(e.target.value);
+ onChangeHandler?.(masked);
+ }}
+ />
+ );
+};
diff --git a/UIs/Customers/src/shared/components/global/input-builder/inputs/input-month.tsx b/UIs/Customers/src/shared/components/global/input-builder/inputs/input-month.tsx
new file mode 100644
index 0000000..f9cbabc
--- /dev/null
+++ b/UIs/Customers/src/shared/components/global/input-builder/inputs/input-month.tsx
@@ -0,0 +1,20 @@
+import { InputWithSuffix } from '@/shared/components/ui/input-with-sufix';
+import type { ComponentProps } from 'react';
+
+interface InputMonthsProps extends ComponentProps<'input'> {
+ onChangeHandler?: (value: string) => void;
+}
+
+export const InputMonth = ({ onChangeHandler, ...props }: InputMonthsProps) => {
+ return (
+
+ {
+ const value = e.target.value;
+ const sanitized = maskPercent(value, maxDecimals);
+ setPercentValue(sanitized);
+ }}
+ className="pr-8"
+ />
+
+ %
+
+
+ );
+};
diff --git a/UIs/Customers/src/shared/components/global/input-builder/inputs/input-year.tsx b/UIs/Customers/src/shared/components/global/input-builder/inputs/input-year.tsx
new file mode 100644
index 0000000..ad04ed3
--- /dev/null
+++ b/UIs/Customers/src/shared/components/global/input-builder/inputs/input-year.tsx
@@ -0,0 +1,20 @@
+import { InputWithSuffix } from '@/shared/components/ui/input-with-sufix';
+import type { ComponentProps } from 'react';
+
+interface InputYearProps extends ComponentProps<'input'> {
+ onChangeHandler?: (value: string) => void;
+}
+
+export const InputYear = ({ onChangeHandler, ...props }: InputYearProps) => {
+ return (
+
+
+ {title}
+
+
+ );
+}
diff --git a/UIs/Customers/src/shared/components/global/restricted-link/index.tsx b/UIs/Customers/src/shared/components/global/restricted-link/index.tsx
new file mode 100644
index 0000000..b5f47a4
--- /dev/null
+++ b/UIs/Customers/src/shared/components/global/restricted-link/index.tsx
@@ -0,0 +1,12 @@
+//import { getCurrentTenant } from "@/libs/axios";
+import { NavLink, type NavLinkProps } from 'react-router';
+
+export function RestrictedLink({ children, ...props }: NavLinkProps) {
+ const tenant = 'smartconsig'; // Mock tenant value for demonstration
+
+ if (tenant !== 'smartconsig') {
+ return null;
+ }
+
+ return
+
+ {title}
+{message}
+Passo 1: Dados
}, + { id: 'step-2', label: 'Endereço', component:Passo 2: Endereço
}, + { id: 'step-3', label: 'Revisão', component:Passo 3: Revisão
} +]; + +const WizardContextSpy = ({ onContext }: { onContext: (ctx: any) => void }) => { + const context = useWizard(); + + onContext(context); + + return null; +}; + +const renderWizard = ( + initialEntries = ['/'], + props: any = {}, + extraChildren: React.ReactNode = null +) => { + return render( +
+
+ );
+}
diff --git a/UIs/Customers/src/shared/components/global/wizard/pieces/wizard-header/index.tsx b/UIs/Customers/src/shared/components/global/wizard/pieces/wizard-header/index.tsx
new file mode 100644
index 0000000..f39c85a
--- /dev/null
+++ b/UIs/Customers/src/shared/components/global/wizard/pieces/wizard-header/index.tsx
@@ -0,0 +1,34 @@
+import type { ComponentProps } from 'react';
+import { useWizard } from '../../hooks';
+import { cn } from '@/shared/utils';
+import {
+ Breadcrumb,
+ BreadcrumbItem,
+ BreadcrumbList,
+ BreadcrumbPage,
+ BreadcrumbSeparator
+} from '@/shared/components/ui/breadcrumb';
+import { Progress } from '@/shared/components/ui/progress';
+
+export function WizardHeader({
+ className,
+ label,
+ ...props
+}: { label?: string } & ComponentProps<'div'>) {
+ const { state } = useWizard();
+
+ return (
+
+ {!state.isFirstStep && (
+
+ )}
+
+
+
+
+
+ {state.isLastStep ? (
+
+ ) : (
+
+ )}
+
+
+
+
+ {label}
+ {state.currentStep?.label}
+
+
+
+
+ );
+}
diff --git a/UIs/Customers/src/shared/components/global/wizard/pieces/wizard/index.tsx b/UIs/Customers/src/shared/components/global/wizard/pieces/wizard/index.tsx
new file mode 100644
index 0000000..f6fc201
--- /dev/null
+++ b/UIs/Customers/src/shared/components/global/wizard/pieces/wizard/index.tsx
@@ -0,0 +1,6 @@
+import { WizardProvider } from '../../hooks';
+import type { WizardRootProps } from '../../types';
+
+export function Wizard(props: WizardRootProps) {
+ return {children}
+
+ {children}
+
+