feat: add domain models and repositories for user, spool presets, and filaments
- Introduced SpoolPreset and User domain models with necessary DTOs and utility functions. - Created AuthRepository, FilamentRepository, and SpoolPresetRepository interfaces for authentication and data management. - Implemented UI components for filament display, including ColorSwatch, FilamentCard, and StockBar. - Developed layout components such as Header and Screen for consistent app structure. - Added reusable UI components like Badge, Button, Card, and Input for better user interaction. - Established global constants and theme settings for consistent styling across the application. - Implemented utility functions for filament calculations and formatting. - Created Zustand stores for managing authentication, filament, and preset states. - Configured TypeScript settings for improved development experience.
This commit is contained in:
@@ -0,0 +1,14 @@
|
|||||||
|
# URL base da API do backend Rust
|
||||||
|
# Em desenvolvimento, aponta para o localhost na porta do backend (8080)
|
||||||
|
# No Android Emulator, use http://10.0.2.2:8080/api/v1
|
||||||
|
# No dispositivo físico, use o IP da sua máquina: http://192.168.x.x:8080/api/v1
|
||||||
|
EXPO_PUBLIC_API_URL=http://localhost:8080/api/v1
|
||||||
|
|
||||||
|
# OAuth Google (mesmo Client ID usado no backend)
|
||||||
|
EXPO_PUBLIC_GOOGLE_CLIENT_ID=seu_google_client_id.apps.googleusercontent.com
|
||||||
|
|
||||||
|
# Deep link scheme (deve bater com app.json → scheme)
|
||||||
|
EXPO_PUBLIC_APP_SCHEME=meowspool
|
||||||
|
|
||||||
|
# Ambiente
|
||||||
|
EXPO_PUBLIC_APP_ENV=development
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
> Why do I have a folder named ".expo" in my project?
|
||||||
|
The ".expo" folder is created when an Expo project is started using "expo start" command.
|
||||||
|
> What do the files contain?
|
||||||
|
- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
|
||||||
|
- "settings.json": contains the server configuration that is used to serve the application manifest.
|
||||||
|
> Should I commit the ".expo" folder?
|
||||||
|
No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
|
||||||
|
Upon project creation, the ".expo" folder is already added to your ".gitignore" file.
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"devices": []
|
||||||
|
}
|
||||||
Vendored
+14
@@ -0,0 +1,14 @@
|
|||||||
|
/* eslint-disable */
|
||||||
|
import * as Router from 'expo-router';
|
||||||
|
|
||||||
|
export * from 'expo-router';
|
||||||
|
|
||||||
|
declare module 'expo-router' {
|
||||||
|
export namespace ExpoRouter {
|
||||||
|
export interface __routes<T extends string | object = string> {
|
||||||
|
hrefInputParams: { pathname: Router.RelativePathString, params?: Router.UnknownInputParams } | { pathname: Router.ExternalPathString, params?: Router.UnknownInputParams } | { pathname: `/_sitemap`; params?: Router.UnknownInputParams; } | { pathname: `${'/(app)'}${'/(tabs)'}/add` | `/add`; params?: Router.UnknownInputParams; } | { pathname: `${'/(app)'}${'/(tabs)'}/config` | `/config`; params?: Router.UnknownInputParams; } | { pathname: `${'/(app)'}${'/(tabs)'}/home` | `/home`; params?: Router.UnknownInputParams; } | { pathname: `${'/(app)'}${'/(tabs)'}/inventory` | `/inventory`; params?: Router.UnknownInputParams; } | { pathname: `${'/(app)'}${'/(tabs)'}/profile` | `/profile`; params?: Router.UnknownInputParams; } | { pathname: `${'/(app)'}/config/presets/new` | `/config/presets/new`; params?: Router.UnknownInputParams; } | { pathname: `${'/(app)'}/inventory/filters` | `/inventory/filters`; params?: Router.UnknownInputParams; } | { pathname: `${'/(app)'}/inventory/new` | `/inventory/new`; params?: Router.UnknownInputParams; } | { pathname: `${'/(auth)'}/forgot-password` | `/forgot-password`; params?: Router.UnknownInputParams; } | { pathname: `${'/(auth)'}/login` | `/login`; params?: Router.UnknownInputParams; } | { pathname: `${'/(auth)'}/password-reset-done` | `/password-reset-done`; params?: Router.UnknownInputParams; } | { pathname: `${'/(auth)'}/register` | `/register`; params?: Router.UnknownInputParams; } | { pathname: `${'/(auth)'}/reset-password` | `/reset-password`; params?: Router.UnknownInputParams; } | { pathname: `${'/(auth)'}/verify-email` | `/verify-email`; params?: Router.UnknownInputParams; } | { pathname: `${'/(app)'}/config/presets/[id]/edit` | `/config/presets/[id]/edit`, params: Router.UnknownInputParams & { id: string | number; } } | { pathname: `${'/(app)'}/filaments/[id]/label` | `/filaments/[id]/label`, params: Router.UnknownInputParams & { id: string | number; } } | { pathname: `${'/(app)'}/filaments/[id]/qrcode` | `/filaments/[id]/qrcode`, params: Router.UnknownInputParams & { id: string | number; } } | { pathname: `${'/(app)'}/inventory/[id]` | `/inventory/[id]`, params: Router.UnknownInputParams & { id: string | number; } } | { pathname: `${'/(app)'}/inventory/[id]/edit` | `/inventory/[id]/edit`, params: Router.UnknownInputParams & { id: string | number; } };
|
||||||
|
hrefOutputParams: { pathname: Router.RelativePathString, params?: Router.UnknownOutputParams } | { pathname: Router.ExternalPathString, params?: Router.UnknownOutputParams } | { pathname: `/_sitemap`; params?: Router.UnknownOutputParams; } | { pathname: `${'/(app)'}${'/(tabs)'}/add` | `/add`; params?: Router.UnknownOutputParams; } | { pathname: `${'/(app)'}${'/(tabs)'}/config` | `/config`; params?: Router.UnknownOutputParams; } | { pathname: `${'/(app)'}${'/(tabs)'}/home` | `/home`; params?: Router.UnknownOutputParams; } | { pathname: `${'/(app)'}${'/(tabs)'}/inventory` | `/inventory`; params?: Router.UnknownOutputParams; } | { pathname: `${'/(app)'}${'/(tabs)'}/profile` | `/profile`; params?: Router.UnknownOutputParams; } | { pathname: `${'/(app)'}/config/presets/new` | `/config/presets/new`; params?: Router.UnknownOutputParams; } | { pathname: `${'/(app)'}/inventory/filters` | `/inventory/filters`; params?: Router.UnknownOutputParams; } | { pathname: `${'/(app)'}/inventory/new` | `/inventory/new`; params?: Router.UnknownOutputParams; } | { pathname: `${'/(auth)'}/forgot-password` | `/forgot-password`; params?: Router.UnknownOutputParams; } | { pathname: `${'/(auth)'}/login` | `/login`; params?: Router.UnknownOutputParams; } | { pathname: `${'/(auth)'}/password-reset-done` | `/password-reset-done`; params?: Router.UnknownOutputParams; } | { pathname: `${'/(auth)'}/register` | `/register`; params?: Router.UnknownOutputParams; } | { pathname: `${'/(auth)'}/reset-password` | `/reset-password`; params?: Router.UnknownOutputParams; } | { pathname: `${'/(auth)'}/verify-email` | `/verify-email`; params?: Router.UnknownOutputParams; } | { pathname: `${'/(app)'}/config/presets/[id]/edit` | `/config/presets/[id]/edit`, params: Router.UnknownOutputParams & { id: string; } } | { pathname: `${'/(app)'}/filaments/[id]/label` | `/filaments/[id]/label`, params: Router.UnknownOutputParams & { id: string; } } | { pathname: `${'/(app)'}/filaments/[id]/qrcode` | `/filaments/[id]/qrcode`, params: Router.UnknownOutputParams & { id: string; } } | { pathname: `${'/(app)'}/inventory/[id]` | `/inventory/[id]`, params: Router.UnknownOutputParams & { id: string; } } | { pathname: `${'/(app)'}/inventory/[id]/edit` | `/inventory/[id]/edit`, params: Router.UnknownOutputParams & { id: string; } };
|
||||||
|
href: Router.RelativePathString | Router.ExternalPathString | `/_sitemap${`?${string}` | `#${string}` | ''}` | `${'/(app)'}${'/(tabs)'}/add${`?${string}` | `#${string}` | ''}` | `/add${`?${string}` | `#${string}` | ''}` | `${'/(app)'}${'/(tabs)'}/config${`?${string}` | `#${string}` | ''}` | `/config${`?${string}` | `#${string}` | ''}` | `${'/(app)'}${'/(tabs)'}/home${`?${string}` | `#${string}` | ''}` | `/home${`?${string}` | `#${string}` | ''}` | `${'/(app)'}${'/(tabs)'}/inventory${`?${string}` | `#${string}` | ''}` | `/inventory${`?${string}` | `#${string}` | ''}` | `${'/(app)'}${'/(tabs)'}/profile${`?${string}` | `#${string}` | ''}` | `/profile${`?${string}` | `#${string}` | ''}` | `${'/(app)'}/config/presets/new${`?${string}` | `#${string}` | ''}` | `/config/presets/new${`?${string}` | `#${string}` | ''}` | `${'/(app)'}/inventory/filters${`?${string}` | `#${string}` | ''}` | `/inventory/filters${`?${string}` | `#${string}` | ''}` | `${'/(app)'}/inventory/new${`?${string}` | `#${string}` | ''}` | `/inventory/new${`?${string}` | `#${string}` | ''}` | `${'/(auth)'}/forgot-password${`?${string}` | `#${string}` | ''}` | `/forgot-password${`?${string}` | `#${string}` | ''}` | `${'/(auth)'}/login${`?${string}` | `#${string}` | ''}` | `/login${`?${string}` | `#${string}` | ''}` | `${'/(auth)'}/password-reset-done${`?${string}` | `#${string}` | ''}` | `/password-reset-done${`?${string}` | `#${string}` | ''}` | `${'/(auth)'}/register${`?${string}` | `#${string}` | ''}` | `/register${`?${string}` | `#${string}` | ''}` | `${'/(auth)'}/reset-password${`?${string}` | `#${string}` | ''}` | `/reset-password${`?${string}` | `#${string}` | ''}` | `${'/(auth)'}/verify-email${`?${string}` | `#${string}` | ''}` | `/verify-email${`?${string}` | `#${string}` | ''}` | { pathname: Router.RelativePathString, params?: Router.UnknownInputParams } | { pathname: Router.ExternalPathString, params?: Router.UnknownInputParams } | { pathname: `/_sitemap`; params?: Router.UnknownInputParams; } | { pathname: `${'/(app)'}${'/(tabs)'}/add` | `/add`; params?: Router.UnknownInputParams; } | { pathname: `${'/(app)'}${'/(tabs)'}/config` | `/config`; params?: Router.UnknownInputParams; } | { pathname: `${'/(app)'}${'/(tabs)'}/home` | `/home`; params?: Router.UnknownInputParams; } | { pathname: `${'/(app)'}${'/(tabs)'}/inventory` | `/inventory`; params?: Router.UnknownInputParams; } | { pathname: `${'/(app)'}${'/(tabs)'}/profile` | `/profile`; params?: Router.UnknownInputParams; } | { pathname: `${'/(app)'}/config/presets/new` | `/config/presets/new`; params?: Router.UnknownInputParams; } | { pathname: `${'/(app)'}/inventory/filters` | `/inventory/filters`; params?: Router.UnknownInputParams; } | { pathname: `${'/(app)'}/inventory/new` | `/inventory/new`; params?: Router.UnknownInputParams; } | { pathname: `${'/(auth)'}/forgot-password` | `/forgot-password`; params?: Router.UnknownInputParams; } | { pathname: `${'/(auth)'}/login` | `/login`; params?: Router.UnknownInputParams; } | { pathname: `${'/(auth)'}/password-reset-done` | `/password-reset-done`; params?: Router.UnknownInputParams; } | { pathname: `${'/(auth)'}/register` | `/register`; params?: Router.UnknownInputParams; } | { pathname: `${'/(auth)'}/reset-password` | `/reset-password`; params?: Router.UnknownInputParams; } | { pathname: `${'/(auth)'}/verify-email` | `/verify-email`; params?: Router.UnknownInputParams; } | `${'/(app)'}/config/presets/${Router.SingleRoutePart<T>}/edit${`?${string}` | `#${string}` | ''}` | `/config/presets/${Router.SingleRoutePart<T>}/edit${`?${string}` | `#${string}` | ''}` | `${'/(app)'}/filaments/${Router.SingleRoutePart<T>}/label${`?${string}` | `#${string}` | ''}` | `/filaments/${Router.SingleRoutePart<T>}/label${`?${string}` | `#${string}` | ''}` | `${'/(app)'}/filaments/${Router.SingleRoutePart<T>}/qrcode${`?${string}` | `#${string}` | ''}` | `/filaments/${Router.SingleRoutePart<T>}/qrcode${`?${string}` | `#${string}` | ''}` | `${'/(app)'}/inventory/${Router.SingleRoutePart<T>}${`?${string}` | `#${string}` | ''}` | `/inventory/${Router.SingleRoutePart<T>}${`?${string}` | `#${string}` | ''}` | `${'/(app)'}/inventory/${Router.SingleRoutePart<T>}/edit${`?${string}` | `#${string}` | ''}` | `/inventory/${Router.SingleRoutePart<T>}/edit${`?${string}` | `#${string}` | ''}` | { pathname: `${'/(app)'}/config/presets/[id]/edit` | `/config/presets/[id]/edit`, params: Router.UnknownInputParams & { id: string | number; } } | { pathname: `${'/(app)'}/filaments/[id]/label` | `/filaments/[id]/label`, params: Router.UnknownInputParams & { id: string | number; } } | { pathname: `${'/(app)'}/filaments/[id]/qrcode` | `/filaments/[id]/qrcode`, params: Router.UnknownInputParams & { id: string | number; } } | { pathname: `${'/(app)'}/inventory/[id]` | `/inventory/[id]`, params: Router.UnknownInputParams & { id: string | number; } } | { pathname: `${'/(app)'}/inventory/[id]/edit` | `/inventory/[id]/edit`, params: Router.UnknownInputParams & { id: string | number; } };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
|
||||||
|
# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
|
||||||
|
# The following patterns were generated by expo-cli
|
||||||
|
|
||||||
|
expo-env.d.ts
|
||||||
|
# @end expo-cli
|
||||||
@@ -0,0 +1,2 @@
|
|||||||
|
[tools]
|
||||||
|
node = "22"
|
||||||
+353
@@ -0,0 +1,353 @@
|
|||||||
|
# MeowSpool Mobile — Agent Guide
|
||||||
|
|
||||||
|
## Visão Geral
|
||||||
|
|
||||||
|
Aplicação mobile do **MeowSpool** construída com **React Native** + **Expo** (SDK ~51), usando **expo-router** para navegação baseada em sistema de arquivos. A arquitetura espelha o backend Rust: **Clean Code / Hexagonal**, com camadas bem delimitadas do domínio até a apresentação.
|
||||||
|
|
||||||
|
O app é **offline-first**: todos os dados são persistidos localmente em **SQLite** (expo-sqlite + SQLCipher) e sincronizados com o backend Rust em background usando estratégia **last-write-wins** via campo `updatedAt`.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Stack
|
||||||
|
|
||||||
|
| Componente | Biblioteca | Observação |
|
||||||
|
|-----------------------|------------------------------------|-----------------------------------------------|
|
||||||
|
| Framework | `expo` ~51 | Managed Workflow |
|
||||||
|
| Navigation | `expo-router` ~3 | File-system routing |
|
||||||
|
| Linguagem | TypeScript 5.x | strict mode |
|
||||||
|
| Node Version | 22 LTS | Gerenciado via `mise` (`.mise.toml`) |
|
||||||
|
| UI | React Native + `@expo/vector-icons`| Ionicons |
|
||||||
|
| Forms | `react-hook-form` + `zod` | Validação em runtime |
|
||||||
|
| Estado global | `zustand` | Stores em `src/store/` |
|
||||||
|
| HTTP | `axios` | Interceptor Bearer + refresh automático |
|
||||||
|
| DB local | `expo-sqlite` + SQLCipher | WAL mode, foreign keys |
|
||||||
|
| Auth persistência | `expo-secure-store` | JWT cifrado no keychain |
|
||||||
|
| Safe Area | `react-native-safe-area-context` | |
|
||||||
|
| Gesture Handler | `react-native-gesture-handler` | |
|
||||||
|
| Animations | `react-native-reanimated` | |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Arquitetura de Camadas
|
||||||
|
|
||||||
|
```
|
||||||
|
src/
|
||||||
|
├── domain/ ← Entidades puras (sem dependências externas)
|
||||||
|
├── ports/ ← Interfaces/contratos (traits equivalentes ao Rust)
|
||||||
|
├── application/ ← Use Cases (orquestram domínio + ports)
|
||||||
|
├── adapters/
|
||||||
|
│ ├── remote/ ← Implementações HTTP (Axios → API Rust)
|
||||||
|
│ └── local/ ← Implementações SQLite (expo-sqlite)
|
||||||
|
├── store/ ← Estado em memória (Zustand) — cache das queries
|
||||||
|
├── shared/ ← Design tokens, constantes, utilitários
|
||||||
|
└── presentation/
|
||||||
|
└── components/ ← Componentes UI reutilizáveis
|
||||||
|
```
|
||||||
|
|
||||||
|
### Regra de dependência
|
||||||
|
|
||||||
|
```
|
||||||
|
presentation → store → application → ports ← adapters
|
||||||
|
↑
|
||||||
|
domain
|
||||||
|
```
|
||||||
|
|
||||||
|
Nenhuma camada interna importa de camadas externas. Os `adapters` implementam os `ports`.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Estrutura de Arquivos
|
||||||
|
|
||||||
|
```
|
||||||
|
mobile/
|
||||||
|
├── .mise.toml ← node 22 LTS
|
||||||
|
├── app.json ← Expo config, scheme "meowspool"
|
||||||
|
├── babel.config.js ← module-resolver + reanimated
|
||||||
|
├── tsconfig.json ← aliases @domain, @ports, @application,
|
||||||
|
│ @adapters, @presentation, @store, @shared
|
||||||
|
├── index.js ← expo-router entry point
|
||||||
|
├── package.json
|
||||||
|
│
|
||||||
|
├── app/ ← expo-router file-system routes
|
||||||
|
│ ├── _layout.tsx ← Root layout (carrega sessão)
|
||||||
|
│ ├── (auth)/
|
||||||
|
│ │ ├── _layout.tsx ← Redireciona se já autenticado
|
||||||
|
│ │ ├── login.tsx ← G3-0
|
||||||
|
│ │ ├── register.tsx ← IX-0
|
||||||
|
│ │ ├── forgot-password.tsx ← L2-0
|
||||||
|
│ │ ├── verify-email.tsx ← RU-0
|
||||||
|
│ │ ├── reset-password.tsx ← 117-0
|
||||||
|
│ │ └── password-reset-done.tsx ← 135-0
|
||||||
|
│ └── (app)/
|
||||||
|
│ ├── _layout.tsx ← Stack autenticado
|
||||||
|
│ ├── (tabs)/
|
||||||
|
│ │ ├── _layout.tsx ← Bottom tabs: Início|Estoque|[+]|Config|Perfil
|
||||||
|
│ │ ├── home.tsx ← 1-0 Dashboard
|
||||||
|
│ │ ├── inventory.tsx ← CW-0 Inventário
|
||||||
|
│ │ ├── add.tsx ← FAB → redireciona para /inventory/new
|
||||||
|
│ │ ├── config.tsx ← M4-0 Presets de Carretéis
|
||||||
|
│ │ └── profile.tsx ← 1LQ-0 Perfil
|
||||||
|
│ ├── inventory/
|
||||||
|
│ │ ├── new.tsx ← 2X-0 Cadastro de Filamento
|
||||||
|
│ │ ├── filters.tsx ← 17H-0 Filtros (bottom sheet)
|
||||||
|
│ │ ├── [id].tsx ← 6L-0 Detalhe do Filamento
|
||||||
|
│ │ └── [id]/
|
||||||
|
│ │ └── edit.tsx ← 13O-0 Editar Filamento
|
||||||
|
│ ├── config/
|
||||||
|
│ │ └── presets/
|
||||||
|
│ │ ├── new.tsx ← QM-0 Novo Preset
|
||||||
|
│ │ └── [id]/
|
||||||
|
│ │ └── edit.tsx ← 1KD-0 Editar Preset
|
||||||
|
│ └── filaments/
|
||||||
|
│ └── [id]/
|
||||||
|
│ ├── qrcode.tsx ← 1CF-0 Ver QR Code
|
||||||
|
│ └── label.tsx ← 1FZ-0 Exportar Etiqueta SVG
|
||||||
|
│
|
||||||
|
└── src/
|
||||||
|
├── domain/
|
||||||
|
│ ├── Filament.ts ← interface Filament, calcNetWeight
|
||||||
|
│ ├── SpoolPreset.ts ← interface SpoolPreset, isUserOwnedPreset
|
||||||
|
│ ├── User.ts ← interface User, AuthSession, DTOs
|
||||||
|
│ └── Dashboard.ts ← DashboardData, MaterialSummary, etc.
|
||||||
|
├── ports/
|
||||||
|
│ ├── FilamentRepository.ts ← interface IFilamentRepository
|
||||||
|
│ ├── SpoolPresetRepository.ts ← interface ISpoolPresetRepository
|
||||||
|
│ └── AuthRepository.ts ← interface IAuthRepository
|
||||||
|
├── application/
|
||||||
|
│ ├── filament/
|
||||||
|
│ │ ├── CreateFilamentUseCase.ts
|
||||||
|
│ │ ├── UpdateFilamentUseCase.ts
|
||||||
|
│ │ ├── ListFilamentsUseCase.ts
|
||||||
|
│ │ └── DeleteFilamentUseCase.ts
|
||||||
|
│ ├── preset/
|
||||||
|
│ │ └── PresetUseCases.ts ← List, Create, Update, Delete
|
||||||
|
│ └── auth/
|
||||||
|
│ └── AuthUseCases.ts ← Login, Register, Google, Logout, etc.
|
||||||
|
├── adapters/
|
||||||
|
│ ├── remote/
|
||||||
|
│ │ ├── httpClient.ts ← Axios + interceptors JWT + refresh
|
||||||
|
│ │ ├── ApiAuthRepository.ts ← /api/v1/auth/*
|
||||||
|
│ │ ├── ApiFilamentRepository.ts ← /api/v1/filaments/*
|
||||||
|
│ │ └── ApiSpoolPresetRepository.ts ← /api/v1/spool-presets/*
|
||||||
|
│ └── local/
|
||||||
|
│ ├── database.ts ← init SQLite, WAL, foreign keys, tabelas
|
||||||
|
│ ├── LocalFilamentRepository.ts
|
||||||
|
│ └── LocalSpoolPresetRepository.ts
|
||||||
|
├── store/
|
||||||
|
│ ├── authStore.ts ← Zustand: sessão, SecureStore
|
||||||
|
│ ├── filamentStore.ts ← Zustand: lista + filtros em memória
|
||||||
|
│ └── presetStore.ts ← Zustand: systemPresets + userPresets
|
||||||
|
├── shared/
|
||||||
|
│ ├── theme.ts ← Design tokens (cores, tipografia, espaçamento)
|
||||||
|
│ ├── constants.ts ← API_BASE_URL, SecureStore keys, MATERIALS
|
||||||
|
│ └── utils/
|
||||||
|
│ └── filament.ts ← calcFilamentPercentage, formatWeight, etc.
|
||||||
|
└── presentation/
|
||||||
|
└── components/
|
||||||
|
├── ui/
|
||||||
|
│ ├── Button.tsx ← primary, secondary, ghost, danger
|
||||||
|
│ ├── Input.tsx ← label, leftIcon, rightLabel, isPassword, error
|
||||||
|
│ ├── Card.tsx ← container surface com borda
|
||||||
|
│ └── Badge.tsx ← badge dinâmico de estoque
|
||||||
|
├── layout/
|
||||||
|
│ ├── Screen.tsx ← SafeArea + scroll + keyboardAvoiding
|
||||||
|
│ └── Header.tsx ← título centralizado, back, slot direito
|
||||||
|
└── filament/
|
||||||
|
├── StockBar.tsx ← barra de progresso + badge numérico
|
||||||
|
├── ColorSwatch.tsx ← quadrado/círculo com cor hex
|
||||||
|
└── FilamentCard.tsx ← card de lista
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Design Tokens
|
||||||
|
|
||||||
|
Arquivo: `src/shared/theme.ts`
|
||||||
|
|
||||||
|
### Paleta (siamês)
|
||||||
|
|
||||||
|
| Token | Valor | Uso |
|
||||||
|
|------------------|-------------|--------------------------------------|
|
||||||
|
| `bgBase` | `#1E1B18` | Fundo geral |
|
||||||
|
| `bgSurface` | `#2A2622` | Cards, containers |
|
||||||
|
| `bgHover` | `#332F2B` | Hover/pressed em cards |
|
||||||
|
| `textPrimary` | `#F5EEDC` | Títulos, peso líquido |
|
||||||
|
| `textSecondary` | `#C9C1B0` | Descrições, labels |
|
||||||
|
| `accent` | `#38BCC2` | Botões de ação, elementos ativos |
|
||||||
|
| `accentMuted` | `#38BCC226` | Background de badges accent (10%) |
|
||||||
|
| `stockLow` | `#FF6B6B` | ≤ 15% — vermelho |
|
||||||
|
| `stockMedium` | `#FF9F43` | ≤ 35% — laranja |
|
||||||
|
| `stockOk` | `#38BCC2` | > 35% — accent |
|
||||||
|
| `border` | `#3D3830` | Bordas sutis |
|
||||||
|
| `error` | `#FF6B6B` | Mensagens de erro |
|
||||||
|
|
||||||
|
### Tipografia
|
||||||
|
|
||||||
|
- UI: **Inter**
|
||||||
|
- Mono (slugs, hex, URLs): **JetBrains Mono**
|
||||||
|
- App é **dark-mode exclusivo** — nenhum suporte a light mode
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Navegação (expo-router)
|
||||||
|
|
||||||
|
### Estrutura de grupos
|
||||||
|
|
||||||
|
```
|
||||||
|
(auth) ← sem autenticação; redireciona para (app) se sessão válida
|
||||||
|
(app) ← com autenticação; redireciona para (auth) se sem sessão
|
||||||
|
(tabs) ← bottom tabs fixos
|
||||||
|
```
|
||||||
|
|
||||||
|
### Deep links
|
||||||
|
|
||||||
|
- Scheme: `meowspool://`
|
||||||
|
- Filamento: `meowspool://filament/<id>` → `/(app)/inventory/<id>`
|
||||||
|
- QR público: `meowspool.app/f/<slug>` (web)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Estratégia Offline-First
|
||||||
|
|
||||||
|
1. **Escrita**: toda mutação persiste primeiro no SQLite (`synced = 0`) e enfileira em `sync_queue`.
|
||||||
|
2. **Leitura**: lê sempre do SQLite; a API é usada apenas para sync.
|
||||||
|
3. **Sync**: background job consome `sync_queue` e envia para o backend Rust.
|
||||||
|
4. **Conflito**: last-write-wins via `updatedAt` (ISO 8601). O backend é a fonte de verdade em conflitos.
|
||||||
|
5. **Auth offline**: token armazenado no `expo-secure-store`; refresh automático via interceptor Axios.
|
||||||
|
|
||||||
|
### Schema SQLite
|
||||||
|
|
||||||
|
```sql
|
||||||
|
-- filaments
|
||||||
|
id TEXT PRIMARY KEY, user_id TEXT, material TEXT, brand TEXT, model TEXT,
|
||||||
|
color_hex TEXT, spool_preset_id TEXT, total_weight_g REAL, net_weight_g REAL,
|
||||||
|
temp_hotend_c REAL, temp_bed_c REAL, flow_factor_pct REAL, notes TEXT,
|
||||||
|
synced INTEGER DEFAULT 0, updated_at TEXT, created_at TEXT
|
||||||
|
|
||||||
|
-- spool_presets
|
||||||
|
id TEXT PRIMARY KEY, user_id TEXT, name TEXT, spool_weight_g REAL,
|
||||||
|
is_system INTEGER DEFAULT 0, synced INTEGER DEFAULT 0, created_at TEXT
|
||||||
|
|
||||||
|
-- sync_queue
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT, entity_type TEXT, entity_id TEXT,
|
||||||
|
operation TEXT, payload TEXT, created_at TEXT
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Convenções de Código
|
||||||
|
|
||||||
|
### Nomenclatura
|
||||||
|
|
||||||
|
- **Componentes React**: PascalCase (`FilamentCard.tsx`)
|
||||||
|
- **Hooks**: camelCase com prefixo `use` (`useFilamentStore`)
|
||||||
|
- **Use Cases**: PascalCase com sufixo `UseCase` (`CreateFilamentUseCase`)
|
||||||
|
- **Repositórios**: PascalCase com prefixo de implementação (`ApiFilamentRepository`, `LocalFilamentRepository`)
|
||||||
|
- **Stores**: camelCase (`filamentStore.ts`), exportados como `useXxxStore`
|
||||||
|
|
||||||
|
### Imports
|
||||||
|
|
||||||
|
Sempre usar aliases em vez de caminhos relativos:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import { Filament } from '@domain/Filament';
|
||||||
|
import { useFilamentStore } from '@store/filamentStore';
|
||||||
|
import { colors } from '@shared/theme';
|
||||||
|
import { Button } from '@presentation/components/ui/Button';
|
||||||
|
```
|
||||||
|
|
||||||
|
### Componentes de tela
|
||||||
|
|
||||||
|
- Toda tela usa `SafeAreaView` com `backgroundColor: colors.bgBase`
|
||||||
|
- Header manual (não usa o header do expo-router): `headerShown: false`
|
||||||
|
- CTA fixo: `View` com `padding: spacing[5]` + `borderTopWidth: 1` + `borderTopColor: colors.border`
|
||||||
|
- ScrollViews com `showsVerticalScrollIndicator={false}` e `keyboardShouldPersistTaps="handled"`
|
||||||
|
|
||||||
|
### Formulários
|
||||||
|
|
||||||
|
- `react-hook-form` + `zodResolver` para todos os formulários
|
||||||
|
- Validações no schema Zod (nunca inline)
|
||||||
|
- `isLoading` local no componente durante submit
|
||||||
|
- Erros de API exibidos via `Alert.alert`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## API do Backend (rotas relevantes)
|
||||||
|
|
||||||
|
Base: `EXPO_PUBLIC_API_URL` (padrão: `http://localhost:3000/api/v1`)
|
||||||
|
|
||||||
|
### Auth
|
||||||
|
|
||||||
|
| Método | Rota | Descrição |
|
||||||
|
|--------|-------------------------------|------------------------------|
|
||||||
|
| POST | `/auth/login` | Login email/senha |
|
||||||
|
| POST | `/auth/register` | Cadastro |
|
||||||
|
| POST | `/auth/google` | OAuth Google |
|
||||||
|
| POST | `/auth/refresh` | Refresh token |
|
||||||
|
| POST | `/auth/logout` | Logout |
|
||||||
|
| POST | `/auth/forgot-password` | Solicitar reset de senha |
|
||||||
|
| POST | `/auth/reset-password` | Confirmar reset com token |
|
||||||
|
| POST | `/auth/verify-email` | Verificar e-mail com código |
|
||||||
|
|
||||||
|
### Filaments
|
||||||
|
|
||||||
|
| Método | Rota | Descrição |
|
||||||
|
|--------|-------------------------------|------------------------------|
|
||||||
|
| GET | `/filaments` | Listar (com filtros) |
|
||||||
|
| POST | `/filaments` | Criar |
|
||||||
|
| GET | `/filaments/:id` | Detalhe |
|
||||||
|
| PATCH | `/filaments/:id` | Atualizar |
|
||||||
|
| DELETE | `/filaments/:id` | Excluir |
|
||||||
|
| GET | `/filaments/:id/qrcode` | QR Code SVG |
|
||||||
|
| GET | `/filaments/:id/label` | Etiqueta SVG |
|
||||||
|
|
||||||
|
### Spool Presets
|
||||||
|
|
||||||
|
| Método | Rota | Descrição |
|
||||||
|
|--------|-------------------------------|------------------------------|
|
||||||
|
| GET | `/spool-presets` | Listar (sistema + usuário) |
|
||||||
|
| POST | `/spool-presets` | Criar preset do usuário |
|
||||||
|
| PATCH | `/spool-presets/:id` | Atualizar preset do usuário |
|
||||||
|
| DELETE | `/spool-presets/:id` | Excluir preset do usuário |
|
||||||
|
|
||||||
|
### Dashboard
|
||||||
|
|
||||||
|
| Método | Rota | Descrição |
|
||||||
|
|--------|-------------------------------|------------------------------|
|
||||||
|
| GET | `/dashboard` | Dados agregados do dashboard |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Próximos Passos (integrações pendentes)
|
||||||
|
|
||||||
|
- [ ] Instanciar e injetar repositórios concretos nos Use Cases (DI container simples ou Context)
|
||||||
|
- [ ] Implementar sync background com `sync_queue` SQLite → API
|
||||||
|
- [ ] Integrar `react-native-qrcode-svg` para render real do QR Code
|
||||||
|
- [ ] Gerar SVG de etiqueta (integração com `/filaments/:id/label` do backend)
|
||||||
|
- [ ] Expo Notifications para alertas de estoque baixo
|
||||||
|
- [ ] Google OAuth com `expo-auth-session`
|
||||||
|
- [ ] Testes de integração com Jest + Testing Library
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Executando o Projeto
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Instalar dependências (na pasta mobile/)
|
||||||
|
mise install # garante Node 22
|
||||||
|
npm install
|
||||||
|
|
||||||
|
# Iniciar servidor de desenvolvimento
|
||||||
|
npx expo start
|
||||||
|
|
||||||
|
# iOS
|
||||||
|
npx expo run:ios
|
||||||
|
|
||||||
|
# Android
|
||||||
|
npx expo run:android
|
||||||
|
```
|
||||||
|
|
||||||
|
> **Variável de ambiente**: crie `mobile/.env` com:
|
||||||
|
> ```
|
||||||
|
> EXPO_PUBLIC_API_URL=http://localhost:3000/api/v1
|
||||||
|
> ```
|
||||||
@@ -0,0 +1,38 @@
|
|||||||
|
{
|
||||||
|
"expo": {
|
||||||
|
"name": "MeowSpool",
|
||||||
|
"slug": "meowspool",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"orientation": "portrait",
|
||||||
|
"icon": "./assets/icon.png",
|
||||||
|
"userInterfaceStyle": "dark",
|
||||||
|
"splash": {
|
||||||
|
"image": "./assets/splash.png",
|
||||||
|
"resizeMode": "contain",
|
||||||
|
"backgroundColor": "#1E1B18"
|
||||||
|
},
|
||||||
|
"assetBundlePatterns": ["**/*"],
|
||||||
|
"ios": {
|
||||||
|
"supportsTablet": false,
|
||||||
|
"bundleIdentifier": "com.meowspool.app"
|
||||||
|
},
|
||||||
|
"android": {
|
||||||
|
"adaptiveIcon": {
|
||||||
|
"foregroundImage": "./assets/adaptive-icon.png",
|
||||||
|
"backgroundColor": "#1E1B18"
|
||||||
|
},
|
||||||
|
"package": "com.meowspool.app"
|
||||||
|
},
|
||||||
|
"web": {
|
||||||
|
"favicon": "./assets/favicon.png"
|
||||||
|
},
|
||||||
|
"scheme": "meowspool",
|
||||||
|
"plugins": [
|
||||||
|
"expo-router",
|
||||||
|
"expo-secure-store"
|
||||||
|
],
|
||||||
|
"experiments": {
|
||||||
|
"typedRoutes": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,109 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Tabs, Redirect } from 'expo-router';
|
||||||
|
import { View, TouchableOpacity, StyleSheet } from 'react-native';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import { useAuthStore } from '@store/authStore';
|
||||||
|
import { colors, radius, spacing } from '@shared/theme';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Layout do app autenticado com Bottom Tab Navigator.
|
||||||
|
* 4 abas + FAB central: Início | Estoque | [+] | Config | Perfil
|
||||||
|
*/
|
||||||
|
export default function AppLayout(): React.ReactElement {
|
||||||
|
const { isAuthenticated } = useAuthStore();
|
||||||
|
|
||||||
|
if (!isAuthenticated) {
|
||||||
|
return <Redirect href="/(auth)/login" />;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Tabs
|
||||||
|
screenOptions={{
|
||||||
|
headerShown: false,
|
||||||
|
tabBarStyle: styles.tabBar,
|
||||||
|
tabBarActiveTintColor: colors.accent,
|
||||||
|
tabBarInactiveTintColor: colors.textSecondary,
|
||||||
|
tabBarLabelStyle: styles.tabLabel,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Tabs.Screen
|
||||||
|
name="home"
|
||||||
|
options={{
|
||||||
|
title: 'Início',
|
||||||
|
tabBarIcon: ({ color, size }) => (
|
||||||
|
<Ionicons name="grid-outline" size={size} color={color} />
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Tabs.Screen
|
||||||
|
name="inventory"
|
||||||
|
options={{
|
||||||
|
title: 'Estoque',
|
||||||
|
tabBarIcon: ({ color, size }) => (
|
||||||
|
<Ionicons name="layers-outline" size={size} color={color} />
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Tabs.Screen
|
||||||
|
name="add"
|
||||||
|
options={{
|
||||||
|
title: '',
|
||||||
|
tabBarIcon: () => (
|
||||||
|
<View style={styles.fab}>
|
||||||
|
<Ionicons name="add" size={28} color={colors.bgBase} />
|
||||||
|
</View>
|
||||||
|
),
|
||||||
|
tabBarButton: (props) => (
|
||||||
|
<TouchableOpacity {...props} style={styles.fabWrapper} activeOpacity={0.8} />
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Tabs.Screen
|
||||||
|
name="config"
|
||||||
|
options={{
|
||||||
|
title: 'Config',
|
||||||
|
tabBarIcon: ({ color, size }) => (
|
||||||
|
<Ionicons name="settings-outline" size={size} color={color} />
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Tabs.Screen
|
||||||
|
name="profile"
|
||||||
|
options={{
|
||||||
|
title: 'Perfil',
|
||||||
|
tabBarIcon: ({ color, size }) => (
|
||||||
|
<Ionicons name="person-outline" size={size} color={color} />
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Tabs>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
tabBar: {
|
||||||
|
backgroundColor: colors.bgSurface,
|
||||||
|
borderTopColor: colors.border,
|
||||||
|
borderTopWidth: 1,
|
||||||
|
height: 72,
|
||||||
|
paddingBottom: spacing[2],
|
||||||
|
},
|
||||||
|
tabLabel: {
|
||||||
|
fontSize: 11,
|
||||||
|
fontFamily: 'Inter',
|
||||||
|
},
|
||||||
|
fabWrapper: {
|
||||||
|
flex: 1,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
top: -8,
|
||||||
|
},
|
||||||
|
fab: {
|
||||||
|
width: 56,
|
||||||
|
height: 56,
|
||||||
|
borderRadius: radius.full,
|
||||||
|
backgroundColor: colors.accent,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -0,0 +1,17 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { useRouter } from 'expo-router';
|
||||||
|
import { Screen } from '@presentation/components/layout/Screen';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Tab "add" — apenas redireciona para o formulário de novo filamento.
|
||||||
|
* O FAB central da tab bar chama esta rota.
|
||||||
|
*/
|
||||||
|
export default function AddTab(): React.ReactElement {
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
router.replace('/(app)/inventory/new');
|
||||||
|
}, [router]);
|
||||||
|
|
||||||
|
return <Screen />;
|
||||||
|
}
|
||||||
@@ -0,0 +1,238 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import {
|
||||||
|
View, Text, ScrollView, TouchableOpacity, StyleSheet, Alert,
|
||||||
|
} from 'react-native';
|
||||||
|
import { useRouter } from 'expo-router';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||||
|
import { usePresetStore } from '@store/presetStore';
|
||||||
|
import { isUserOwnedPreset } from '@domain/SpoolPreset';
|
||||||
|
import { colors, typography, spacing, radius } from '@shared/theme';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Tela de Presets de Carretéis — M4-0
|
||||||
|
*/
|
||||||
|
export default function ConfigScreen(): React.ReactElement {
|
||||||
|
const router = useRouter();
|
||||||
|
const { systemPresets, userPresets, removePreset } = usePresetStore();
|
||||||
|
|
||||||
|
function handleDelete(id: string, name: string): void {
|
||||||
|
Alert.alert(
|
||||||
|
'Excluir preset',
|
||||||
|
`Deseja excluir o preset "${name}"?`,
|
||||||
|
[
|
||||||
|
{ text: 'Cancelar', style: 'cancel' },
|
||||||
|
{ text: 'Excluir', style: 'destructive', onPress: () => removePreset(id) },
|
||||||
|
],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SafeAreaView style={styles.safe}>
|
||||||
|
{/* Header */}
|
||||||
|
<View style={styles.header}>
|
||||||
|
<View>
|
||||||
|
<Text style={styles.headerSub}>Configurações</Text>
|
||||||
|
<Text style={styles.headerTitle}>Presets de Carretéis</Text>
|
||||||
|
</View>
|
||||||
|
<TouchableOpacity
|
||||||
|
style={styles.addBtn}
|
||||||
|
onPress={() => router.push('/(app)/config/presets/new' as never)}
|
||||||
|
>
|
||||||
|
<Ionicons name="add" size={24} color={colors.bgBase} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<ScrollView showsVerticalScrollIndicator={false} style={styles.scroll}>
|
||||||
|
{/* Presets do Sistema */}
|
||||||
|
<View style={styles.section}>
|
||||||
|
<View style={styles.sectionHeader}>
|
||||||
|
<Text style={styles.sectionLabel}>PRESETS DO SISTEMA</Text>
|
||||||
|
<View style={styles.readonlyBadge}>
|
||||||
|
<Text style={styles.readonlyText}>Somente leitura</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
{systemPresets.map((preset) => (
|
||||||
|
<View key={preset.id} style={styles.presetRow}>
|
||||||
|
<View style={styles.presetIcon}>
|
||||||
|
<Ionicons name="disc-outline" size={20} color={colors.textSecondary} />
|
||||||
|
</View>
|
||||||
|
<View style={styles.presetInfo}>
|
||||||
|
<Text style={styles.presetName}>{preset.name}</Text>
|
||||||
|
<Text style={styles.presetSub}>
|
||||||
|
{/* type field not in SpoolPreset domain yet — show dash */}
|
||||||
|
Carretel · {preset.spoolWeightG}g
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
<View style={styles.weightBadge}>
|
||||||
|
<Text style={styles.weightBadgeText}>{preset.spoolWeightG}g</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Meus Presets */}
|
||||||
|
{userPresets.length > 0 && (
|
||||||
|
<View style={styles.section}>
|
||||||
|
<Text style={styles.sectionLabel}>MEUS PRESETS</Text>
|
||||||
|
{userPresets.map((preset) => (
|
||||||
|
<View key={preset.id} style={styles.presetRow}>
|
||||||
|
<View style={styles.presetIcon}>
|
||||||
|
<Ionicons name="disc-outline" size={20} color={colors.textSecondary} />
|
||||||
|
</View>
|
||||||
|
<View style={styles.presetInfo}>
|
||||||
|
<Text style={styles.presetName}>{preset.name}</Text>
|
||||||
|
<Text style={styles.presetSub}>Customizado · {preset.spoolWeightG}g</Text>
|
||||||
|
</View>
|
||||||
|
<View style={styles.userPresetActions}>
|
||||||
|
<View style={styles.weightBadge}>
|
||||||
|
<Text style={styles.weightBadgeText}>{preset.spoolWeightG}g</Text>
|
||||||
|
</View>
|
||||||
|
{isUserOwnedPreset(preset) && (
|
||||||
|
<>
|
||||||
|
<TouchableOpacity
|
||||||
|
onPress={() => router.push(`/(app)/config/presets/${preset.id}/edit` as never)}
|
||||||
|
>
|
||||||
|
<Ionicons name="create-outline" size={20} color={colors.textSecondary} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
<TouchableOpacity onPress={() => handleDelete(preset.id, preset.name)}>
|
||||||
|
<Ionicons name="trash-outline" size={20} color={colors.textSecondary} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{userPresets.length === 0 && (
|
||||||
|
<View style={styles.emptyUser}>
|
||||||
|
<Text style={styles.emptyText}>Nenhum preset personalizado ainda.</Text>
|
||||||
|
<TouchableOpacity onPress={() => router.push('/(app)/config/presets/new' as never)}>
|
||||||
|
<Text style={styles.emptyLink}>+ Criar preset</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
</ScrollView>
|
||||||
|
</SafeAreaView>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
safe: { flex: 1, backgroundColor: colors.bgBase },
|
||||||
|
header: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
paddingHorizontal: spacing[5],
|
||||||
|
paddingTop: spacing[5],
|
||||||
|
paddingBottom: spacing[4],
|
||||||
|
},
|
||||||
|
headerSub: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.sm,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
},
|
||||||
|
headerTitle: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.xl,
|
||||||
|
fontWeight: typography.fontWeight.bold,
|
||||||
|
color: colors.textPrimary,
|
||||||
|
},
|
||||||
|
addBtn: {
|
||||||
|
width: 44,
|
||||||
|
height: 44,
|
||||||
|
borderRadius: radius.lg,
|
||||||
|
backgroundColor: colors.accent,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
scroll: { flex: 1, paddingHorizontal: spacing[5] },
|
||||||
|
section: { marginBottom: spacing[6] },
|
||||||
|
sectionHeader: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: spacing[3],
|
||||||
|
marginBottom: spacing[3],
|
||||||
|
},
|
||||||
|
sectionLabel: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.xs,
|
||||||
|
fontWeight: typography.fontWeight.bold,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
letterSpacing: 0.8,
|
||||||
|
textTransform: 'uppercase',
|
||||||
|
},
|
||||||
|
readonlyBadge: {
|
||||||
|
backgroundColor: colors.accentMuted,
|
||||||
|
paddingHorizontal: spacing[3],
|
||||||
|
paddingVertical: 3,
|
||||||
|
borderRadius: radius.full,
|
||||||
|
},
|
||||||
|
readonlyText: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.xs,
|
||||||
|
color: colors.accent,
|
||||||
|
},
|
||||||
|
presetRow: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: spacing[3],
|
||||||
|
backgroundColor: colors.bgSurface,
|
||||||
|
borderRadius: radius.lg,
|
||||||
|
padding: spacing[4],
|
||||||
|
marginBottom: spacing[2],
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: colors.border,
|
||||||
|
},
|
||||||
|
presetIcon: {
|
||||||
|
width: 40,
|
||||||
|
height: 40,
|
||||||
|
borderRadius: radius.md,
|
||||||
|
backgroundColor: colors.bgHover,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
presetInfo: { flex: 1 },
|
||||||
|
presetName: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.base,
|
||||||
|
fontWeight: typography.fontWeight.medium,
|
||||||
|
color: colors.textPrimary,
|
||||||
|
},
|
||||||
|
presetSub: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.xs,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
marginTop: 2,
|
||||||
|
},
|
||||||
|
weightBadge: {
|
||||||
|
backgroundColor: colors.bgHover,
|
||||||
|
paddingHorizontal: spacing[3],
|
||||||
|
paddingVertical: 5,
|
||||||
|
borderRadius: radius.sm,
|
||||||
|
},
|
||||||
|
weightBadgeText: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.sm,
|
||||||
|
fontWeight: typography.fontWeight.medium,
|
||||||
|
color: colors.textPrimary,
|
||||||
|
},
|
||||||
|
userPresetActions: { flexDirection: 'row', alignItems: 'center', gap: spacing[3] },
|
||||||
|
emptyUser: {
|
||||||
|
alignItems: 'center',
|
||||||
|
paddingVertical: spacing[8],
|
||||||
|
gap: spacing[3],
|
||||||
|
},
|
||||||
|
emptyText: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.sm,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
},
|
||||||
|
emptyLink: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.sm,
|
||||||
|
color: colors.accent,
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -0,0 +1,244 @@
|
|||||||
|
import React, { useEffect } from 'react';
|
||||||
|
import {
|
||||||
|
View, Text, ScrollView, TouchableOpacity, StyleSheet,
|
||||||
|
} from 'react-native';
|
||||||
|
import { useRouter } from 'expo-router';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||||
|
import { useFilamentStore } from '@store/filamentStore';
|
||||||
|
import { useAuthStore } from '@store/authStore';
|
||||||
|
import { ColorSwatch } from '@presentation/components/filament/ColorSwatch';
|
||||||
|
import { StockBar, StockBadge } from '@presentation/components/filament/StockBar';
|
||||||
|
import { Card } from '@presentation/components/ui/Card';
|
||||||
|
import { calcFilamentPercentage } from '@domain/Filament';
|
||||||
|
import { formatWeight } from '@shared/utils/filament';
|
||||||
|
import { colors, typography, spacing, radius } from '@shared/theme';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Tela Home / Dashboard — 1-0
|
||||||
|
*
|
||||||
|
* Seções:
|
||||||
|
* - Totais (estoque total em kg, rolos acabando)
|
||||||
|
* - Uso Recente (2 últimos filamentos, cards grandes)
|
||||||
|
* - Inventário rápido (lista com botão "Pesar")
|
||||||
|
* - Por Material (resumo agregado)
|
||||||
|
* - Estoque Baixo (filamentos ≤35%)
|
||||||
|
*/
|
||||||
|
export default function HomeScreen(): React.ReactElement {
|
||||||
|
const router = useRouter();
|
||||||
|
const { user } = useAuthStore();
|
||||||
|
const { filaments, isLoading } = useFilamentStore();
|
||||||
|
|
||||||
|
// Dados derivados
|
||||||
|
const totalKg = (filaments.reduce((s, f) => s + f.netWeightG, 0) / 1000).toFixed(1);
|
||||||
|
const lowStockFilaments = filaments.filter((f) => calcFilamentPercentage(f) <= 35);
|
||||||
|
const recentFilaments = [...filaments].sort(
|
||||||
|
(a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime(),
|
||||||
|
).slice(0, 2);
|
||||||
|
|
||||||
|
// Agrupamento por material
|
||||||
|
const byMaterial = filaments.reduce<Record<string, { count: number; totalG: number }>>((acc, f) => {
|
||||||
|
if (!acc[f.material]) acc[f.material] = { count: 0, totalG: 0 };
|
||||||
|
acc[f.material].count += 1;
|
||||||
|
acc[f.material].totalG += f.netWeightG;
|
||||||
|
return acc;
|
||||||
|
}, {});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SafeAreaView style={styles.safe}>
|
||||||
|
<ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.scroll}>
|
||||||
|
|
||||||
|
{/* Cabeçalho */}
|
||||||
|
<View style={styles.headerRow}>
|
||||||
|
<View>
|
||||||
|
<Text style={styles.welcomeText}>Bem-vindo de volta,</Text>
|
||||||
|
<Text style={styles.title}>Seu Inventário</Text>
|
||||||
|
</View>
|
||||||
|
<TouchableOpacity
|
||||||
|
style={styles.qrBtn}
|
||||||
|
onPress={() => router.push('/(app)/qrcode/scan')}
|
||||||
|
>
|
||||||
|
<Ionicons name="qr-code-outline" size={22} color={colors.textPrimary} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Totais */}
|
||||||
|
<View style={styles.statsRow}>
|
||||||
|
<Card style={styles.statCard}>
|
||||||
|
<Text style={styles.statLabel}>Total em Estoque</Text>
|
||||||
|
<Text style={styles.statValue}>{totalKg} kg</Text>
|
||||||
|
</Card>
|
||||||
|
<Card style={styles.statCard}>
|
||||||
|
<Text style={styles.statLabel}>Rolos Acabando</Text>
|
||||||
|
<Text style={styles.statValueAlert}>{lowStockFilaments.length} unidades</Text>
|
||||||
|
</Card>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Uso Recente */}
|
||||||
|
{recentFilaments.length > 0 && (
|
||||||
|
<>
|
||||||
|
<Text style={styles.sectionTitle}>USO RECENTE</Text>
|
||||||
|
<ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.recentScroll}>
|
||||||
|
{recentFilaments.map((f) => {
|
||||||
|
const pct = calcFilamentPercentage(f);
|
||||||
|
return (
|
||||||
|
<TouchableOpacity
|
||||||
|
key={f.id}
|
||||||
|
style={styles.recentCard}
|
||||||
|
onPress={() => router.push(`/(app)/inventory/${f.id}`)}
|
||||||
|
activeOpacity={0.8}
|
||||||
|
>
|
||||||
|
<ColorSwatch colorHex={f.colorHex} size={40} />
|
||||||
|
<Text style={styles.recentName}>{f.model ?? f.material}</Text>
|
||||||
|
<Text style={styles.recentMeta}>{f.brand} · {f.colorHex}</Text>
|
||||||
|
<View style={styles.recentBottom}>
|
||||||
|
<Text style={styles.recentWeight}>{formatWeight(f.netWeightG)}</Text>
|
||||||
|
<StockBadge percentage={pct} />
|
||||||
|
</View>
|
||||||
|
<StockBar percentage={pct} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</ScrollView>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Inventário rápido */}
|
||||||
|
{filaments.length > 0 && (
|
||||||
|
<>
|
||||||
|
<View style={styles.sectionHeader}>
|
||||||
|
<Text style={styles.sectionTitle}>INVENTÁRIO</Text>
|
||||||
|
<TouchableOpacity onPress={() => router.push('/(app)/(tabs)/inventory')}>
|
||||||
|
<Text style={styles.sectionLink}>Ver todos</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
{filaments.slice(0, 4).map((f) => (
|
||||||
|
<TouchableOpacity
|
||||||
|
key={f.id}
|
||||||
|
style={styles.inventoryRow}
|
||||||
|
onPress={() => router.push(`/(app)/inventory/${f.id}`)}
|
||||||
|
activeOpacity={0.8}
|
||||||
|
>
|
||||||
|
<ColorSwatch colorHex={f.colorHex} size={40} />
|
||||||
|
<View style={styles.inventoryInfo}>
|
||||||
|
<Text style={styles.inventoryName}>{f.model ?? f.material}</Text>
|
||||||
|
<Text style={styles.inventoryMeta}>
|
||||||
|
{f.tempHotendC ? `${f.tempHotendC}°C` : '—'} / {f.tempBedC ? `${f.tempBedC}°C` : '—'} · Fluxo {f.flowFactorPct ?? '—'}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
<View style={styles.inventoryRight}>
|
||||||
|
<Text style={styles.inventoryWeight}>{formatWeight(f.netWeightG)}</Text>
|
||||||
|
<TouchableOpacity style={styles.pesarBtn}>
|
||||||
|
<Ionicons name="scale-outline" size={14} color={colors.accent} />
|
||||||
|
<Text style={styles.pesarText}>Pesar</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
</TouchableOpacity>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Por Material */}
|
||||||
|
{Object.keys(byMaterial).length > 0 && (
|
||||||
|
<>
|
||||||
|
<Text style={styles.sectionTitle}>POR MATERIAL</Text>
|
||||||
|
{Object.entries(byMaterial).map(([mat, data]) => (
|
||||||
|
<View key={mat} style={styles.materialRow}>
|
||||||
|
<View style={[styles.materialDot, { backgroundColor: colors.accent }]} />
|
||||||
|
<Text style={styles.materialName}>{mat}</Text>
|
||||||
|
<Text style={styles.materialCount}>{data.count} rolos</Text>
|
||||||
|
<Text style={styles.materialWeight}>{(data.totalG / 1000).toFixed(1)} kg</Text>
|
||||||
|
</View>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Estoque Baixo */}
|
||||||
|
{lowStockFilaments.length > 0 && (
|
||||||
|
<>
|
||||||
|
<Text style={styles.sectionTitle}>ESTOQUE BAIXO</Text>
|
||||||
|
{lowStockFilaments.map((f) => {
|
||||||
|
const pct = calcFilamentPercentage(f);
|
||||||
|
return (
|
||||||
|
<TouchableOpacity
|
||||||
|
key={f.id}
|
||||||
|
style={styles.lowStockCard}
|
||||||
|
onPress={() => router.push(`/(app)/inventory/${f.id}`)}
|
||||||
|
activeOpacity={0.8}
|
||||||
|
>
|
||||||
|
<View style={[styles.lowStockAccent, { backgroundColor: pct <= 15 ? colors.stockLow : colors.stockMedium }]} />
|
||||||
|
<ColorSwatch colorHex={f.colorHex} size={40} />
|
||||||
|
<View style={styles.lowStockInfo}>
|
||||||
|
<Text style={styles.lowStockName}>{f.model ?? f.material}</Text>
|
||||||
|
<Text style={styles.lowStockMeta}>{f.brand} · {f.material}</Text>
|
||||||
|
</View>
|
||||||
|
<View style={styles.lowStockRight}>
|
||||||
|
<Text style={[styles.lowStockWeight, { color: pct <= 15 ? colors.stockLow : colors.stockMedium }]}>
|
||||||
|
{formatWeight(f.netWeightG)}
|
||||||
|
</Text>
|
||||||
|
<StockBadge percentage={pct} />
|
||||||
|
</View>
|
||||||
|
</TouchableOpacity>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Estado vazio */}
|
||||||
|
{!isLoading && filaments.length === 0 && (
|
||||||
|
<View style={styles.empty}>
|
||||||
|
<Ionicons name="layers-outline" size={48} color={colors.textSecondary} />
|
||||||
|
<Text style={styles.emptyTitle}>Nenhum filamento ainda</Text>
|
||||||
|
<Text style={styles.emptyText}>Toque em + para adicionar seu primeiro filamento.</Text>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
</ScrollView>
|
||||||
|
</SafeAreaView>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
safe: { flex: 1, backgroundColor: colors.bgBase },
|
||||||
|
scroll: { padding: spacing[5], gap: spacing[4], paddingBottom: spacing[10] },
|
||||||
|
headerRow: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: spacing[2] },
|
||||||
|
welcomeText: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.sm, color: colors.textSecondary },
|
||||||
|
title: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize['2xl'], fontWeight: typography.fontWeight.bold, color: colors.textPrimary },
|
||||||
|
qrBtn: { width: 40, height: 40, borderRadius: radius.md, backgroundColor: colors.bgSurface, alignItems: 'center', justifyContent: 'center', borderWidth: 1, borderColor: colors.border },
|
||||||
|
statsRow: { flexDirection: 'row', gap: spacing[3] },
|
||||||
|
statCard: { flex: 1, gap: spacing[1] },
|
||||||
|
statLabel: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.xs, color: colors.textSecondary },
|
||||||
|
statValue: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.xl, fontWeight: typography.fontWeight.bold, color: colors.accent },
|
||||||
|
statValueAlert: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.xl, fontWeight: typography.fontWeight.bold, color: colors.textPrimary },
|
||||||
|
sectionTitle: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.xs, fontWeight: typography.fontWeight.bold, color: colors.textSecondary, letterSpacing: 0.8, textTransform: 'uppercase', marginTop: spacing[2] },
|
||||||
|
sectionHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginTop: spacing[2] },
|
||||||
|
sectionLink: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.sm, color: colors.accent },
|
||||||
|
recentScroll: { marginHorizontal: -spacing[5] },
|
||||||
|
recentCard: { width: 160, backgroundColor: colors.bgSurface, borderRadius: radius.lg, padding: spacing[4], marginLeft: spacing[5], gap: spacing[2], borderWidth: 1, borderColor: colors.border },
|
||||||
|
recentName: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.base, fontWeight: typography.fontWeight.semibold, color: colors.textPrimary },
|
||||||
|
recentMeta: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.xs, color: colors.textSecondary },
|
||||||
|
recentBottom: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
|
||||||
|
recentWeight: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.lg, fontWeight: typography.fontWeight.bold, color: colors.textPrimary },
|
||||||
|
inventoryRow: { flexDirection: 'row', alignItems: 'center', gap: spacing[3], backgroundColor: colors.bgSurface, borderRadius: radius.lg, padding: spacing[4], borderWidth: 1, borderColor: colors.border },
|
||||||
|
inventoryInfo: { flex: 1, gap: 2 },
|
||||||
|
inventoryName: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.base, fontWeight: typography.fontWeight.semibold, color: colors.textPrimary },
|
||||||
|
inventoryMeta: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.xs, color: colors.textSecondary },
|
||||||
|
inventoryRight: { alignItems: 'flex-end', gap: spacing[1] },
|
||||||
|
inventoryWeight: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.base, fontWeight: typography.fontWeight.bold, color: colors.textPrimary },
|
||||||
|
pesarBtn: { flexDirection: 'row', alignItems: 'center', gap: 4 },
|
||||||
|
pesarText: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.xs, color: colors.accent },
|
||||||
|
materialRow: { flexDirection: 'row', alignItems: 'center', gap: spacing[3], paddingVertical: spacing[3], borderBottomWidth: 1, borderBottomColor: colors.border },
|
||||||
|
materialDot: { width: 8, height: 8, borderRadius: radius.full },
|
||||||
|
materialName: { flex: 1, fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.base, color: colors.textPrimary },
|
||||||
|
materialCount: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.sm, color: colors.textSecondary },
|
||||||
|
materialWeight: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.base, fontWeight: typography.fontWeight.bold, color: colors.textPrimary, minWidth: 60, textAlign: 'right' },
|
||||||
|
lowStockCard: { flexDirection: 'row', alignItems: 'center', gap: spacing[3], backgroundColor: colors.bgSurface, borderRadius: radius.lg, padding: spacing[4], borderWidth: 1, borderColor: colors.border, overflow: 'hidden' },
|
||||||
|
lowStockAccent: { position: 'absolute', left: 0, top: 0, bottom: 0, width: 3 },
|
||||||
|
lowStockInfo: { flex: 1, gap: 2 },
|
||||||
|
lowStockName: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.base, fontWeight: typography.fontWeight.semibold, color: colors.textPrimary },
|
||||||
|
lowStockMeta: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.xs, color: colors.textSecondary },
|
||||||
|
lowStockRight: { alignItems: 'flex-end', gap: spacing[1] },
|
||||||
|
lowStockWeight: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.base, fontWeight: typography.fontWeight.bold },
|
||||||
|
empty: { flex: 1, alignItems: 'center', justifyContent: 'center', gap: spacing[3], marginTop: spacing[16] },
|
||||||
|
emptyTitle: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.lg, fontWeight: typography.fontWeight.semibold, color: colors.textPrimary },
|
||||||
|
emptyText: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.sm, color: colors.textSecondary, textAlign: 'center' },
|
||||||
|
});
|
||||||
@@ -0,0 +1,132 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import {
|
||||||
|
View, Text, FlatList, TouchableOpacity, StyleSheet, TextInput,
|
||||||
|
} from 'react-native';
|
||||||
|
import { useRouter } from 'expo-router';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||||
|
import { useFilamentStore } from '@store/filamentStore';
|
||||||
|
import { FilamentCard } from '@presentation/components/filament/FilamentCard';
|
||||||
|
import type { Filament } from '@domain/Filament';
|
||||||
|
import { colors, typography, spacing, radius } from '@shared/theme';
|
||||||
|
import { MATERIALS } from '@shared/constants';
|
||||||
|
|
||||||
|
const TABS = ['Todos', ...MATERIALS.slice(0, 4)] as const;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Tela de Inventário — CW-0
|
||||||
|
* Busca, chips de material, lista de filamentos com peso e % de estoque.
|
||||||
|
*/
|
||||||
|
export default function InventoryScreen(): React.ReactElement {
|
||||||
|
const router = useRouter();
|
||||||
|
const { filaments } = useFilamentStore();
|
||||||
|
const [search, setSearch] = useState('');
|
||||||
|
const [activeTab, setActiveTab] = useState<string>('Todos');
|
||||||
|
|
||||||
|
const filtered = filaments.filter((f) => {
|
||||||
|
const matchMaterial = activeTab === 'Todos' || f.material === activeTab;
|
||||||
|
const matchSearch =
|
||||||
|
search.length === 0 ||
|
||||||
|
f.brand.toLowerCase().includes(search.toLowerCase()) ||
|
||||||
|
(f.model ?? '').toLowerCase().includes(search.toLowerCase()) ||
|
||||||
|
f.material.toLowerCase().includes(search.toLowerCase());
|
||||||
|
return matchMaterial && matchSearch;
|
||||||
|
});
|
||||||
|
|
||||||
|
function renderItem({ item }: { item: Filament }): React.ReactElement {
|
||||||
|
return <FilamentCard filament={item} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SafeAreaView style={styles.safe}>
|
||||||
|
{/* Cabeçalho */}
|
||||||
|
<View style={styles.header}>
|
||||||
|
<View>
|
||||||
|
<Text style={styles.headerSub}>Seu estoque</Text>
|
||||||
|
<Text style={styles.headerTitle}>Inventário</Text>
|
||||||
|
</View>
|
||||||
|
<TouchableOpacity
|
||||||
|
style={styles.filterBtn}
|
||||||
|
onPress={() => router.push('/(app)/inventory/filters')}
|
||||||
|
>
|
||||||
|
<Ionicons name="options-outline" size={20} color={colors.textPrimary} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Busca */}
|
||||||
|
<View style={styles.searchRow}>
|
||||||
|
<Ionicons name="search-outline" size={18} color={colors.textSecondary} style={styles.searchIcon} />
|
||||||
|
<TextInput
|
||||||
|
style={styles.searchInput}
|
||||||
|
placeholder="Buscar por marca, material..."
|
||||||
|
placeholderTextColor={colors.textSecondary}
|
||||||
|
value={search}
|
||||||
|
onChangeText={setSearch}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Chips de material */}
|
||||||
|
<View style={styles.chipsRow}>
|
||||||
|
{TABS.map((tab) => (
|
||||||
|
<TouchableOpacity
|
||||||
|
key={tab}
|
||||||
|
onPress={() => setActiveTab(tab)}
|
||||||
|
style={[styles.chip, activeTab === tab && styles.chipActive]}
|
||||||
|
>
|
||||||
|
<Text style={[styles.chipText, activeTab === tab && styles.chipTextActive]}>
|
||||||
|
{tab}
|
||||||
|
</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Contagem */}
|
||||||
|
<View style={styles.countRow}>
|
||||||
|
<Text style={styles.countText}>{filtered.length} FILAMENTOS</Text>
|
||||||
|
<TouchableOpacity style={styles.sortBtn}>
|
||||||
|
<Ionicons name="swap-vertical-outline" size={14} color={colors.textSecondary} />
|
||||||
|
<Text style={styles.sortText}>Ordenar</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<FlatList
|
||||||
|
data={filtered}
|
||||||
|
keyExtractor={(item) => item.id}
|
||||||
|
renderItem={renderItem}
|
||||||
|
contentContainerStyle={styles.list}
|
||||||
|
ItemSeparatorComponent={() => <View style={styles.separator} />}
|
||||||
|
showsVerticalScrollIndicator={false}
|
||||||
|
ListEmptyComponent={
|
||||||
|
<View style={styles.empty}>
|
||||||
|
<Ionicons name="layers-outline" size={40} color={colors.textSecondary} />
|
||||||
|
<Text style={styles.emptyText}>Nenhum filamento encontrado.</Text>
|
||||||
|
</View>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</SafeAreaView>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
safe: { flex: 1, backgroundColor: colors.bgBase },
|
||||||
|
header: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start', paddingHorizontal: spacing[5], paddingTop: spacing[4] },
|
||||||
|
headerSub: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.sm, color: colors.textSecondary },
|
||||||
|
headerTitle: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize['2xl'], fontWeight: typography.fontWeight.bold, color: colors.textPrimary },
|
||||||
|
filterBtn: { width: 40, height: 40, borderRadius: radius.md, backgroundColor: colors.bgSurface, alignItems: 'center', justifyContent: 'center', borderWidth: 1, borderColor: colors.border },
|
||||||
|
searchRow: { flexDirection: 'row', alignItems: 'center', backgroundColor: colors.bgSurface, borderRadius: radius.md, marginHorizontal: spacing[5], marginTop: spacing[4], paddingHorizontal: spacing[4], borderWidth: 1, borderColor: colors.border, height: 48 },
|
||||||
|
searchIcon: { marginRight: spacing[2] },
|
||||||
|
searchInput: { flex: 1, fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.base, color: colors.textPrimary },
|
||||||
|
chipsRow: { flexDirection: 'row', gap: spacing[2], paddingHorizontal: spacing[5], marginTop: spacing[3], flexWrap: 'wrap' },
|
||||||
|
chip: { paddingHorizontal: spacing[4], paddingVertical: spacing[2], borderRadius: radius.full, backgroundColor: colors.bgSurface, borderWidth: 1, borderColor: colors.border },
|
||||||
|
chipActive: { backgroundColor: colors.accent, borderColor: colors.accent },
|
||||||
|
chipText: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.sm, fontWeight: typography.fontWeight.medium, color: colors.textSecondary },
|
||||||
|
chipTextActive: { color: colors.bgBase },
|
||||||
|
countRow: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingHorizontal: spacing[5], marginTop: spacing[4], marginBottom: spacing[2] },
|
||||||
|
countText: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.xs, fontWeight: typography.fontWeight.bold, color: colors.textSecondary, letterSpacing: 0.8 },
|
||||||
|
sortBtn: { flexDirection: 'row', alignItems: 'center', gap: 4 },
|
||||||
|
sortText: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.sm, color: colors.textSecondary },
|
||||||
|
list: { paddingHorizontal: spacing[5], paddingBottom: spacing[10] },
|
||||||
|
separator: { height: spacing[2] },
|
||||||
|
empty: { alignItems: 'center', gap: spacing[3], paddingTop: spacing[12] },
|
||||||
|
emptyText: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.base, color: colors.textSecondary },
|
||||||
|
});
|
||||||
@@ -0,0 +1,234 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import {
|
||||||
|
View, Text, TouchableOpacity, StyleSheet, Alert,
|
||||||
|
} from 'react-native';
|
||||||
|
import { useRouter } from 'expo-router';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||||
|
import { useAuthStore } from '@store/authStore';
|
||||||
|
import { colors, typography, spacing, radius } from '@shared/theme';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Tela de Perfil — 1LQ-0
|
||||||
|
*/
|
||||||
|
export default function ProfileScreen(): React.ReactElement {
|
||||||
|
const router = useRouter();
|
||||||
|
const { user, clearSession } = useAuthStore();
|
||||||
|
|
||||||
|
function handleLogout(): void {
|
||||||
|
Alert.alert(
|
||||||
|
'Sair da conta',
|
||||||
|
'Deseja sair da sua conta? Seus dados offline continuarão disponíveis.',
|
||||||
|
[
|
||||||
|
{ text: 'Cancelar', style: 'cancel' },
|
||||||
|
{
|
||||||
|
text: 'Sair',
|
||||||
|
style: 'destructive',
|
||||||
|
onPress: async () => {
|
||||||
|
await clearSession();
|
||||||
|
router.replace('/(auth)/login');
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const displayName = user?.name ?? 'Usuário';
|
||||||
|
const displayEmail = user?.email ?? 'email@exemplo.com';
|
||||||
|
const isGoogleLinked = user?.googleId != null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SafeAreaView style={styles.safe}>
|
||||||
|
{/* Header */}
|
||||||
|
<View style={styles.header}>
|
||||||
|
<Text style={styles.headerTitle}>Perfil</Text>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={styles.content}>
|
||||||
|
{/* Avatar */}
|
||||||
|
<View style={styles.avatarSection}>
|
||||||
|
<View style={styles.avatarRing}>
|
||||||
|
<Ionicons name="person-outline" size={40} color={colors.accent} />
|
||||||
|
</View>
|
||||||
|
<Text style={styles.userName}>{displayName}</Text>
|
||||||
|
<Text style={styles.userEmail}>{displayEmail}</Text>
|
||||||
|
{isGoogleLinked && (
|
||||||
|
<View style={styles.googleBadge}>
|
||||||
|
<Ionicons name="logo-google" size={14} color={colors.textPrimary} />
|
||||||
|
<Text style={styles.googleBadgeText}>Conectado com Google</Text>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Conta */}
|
||||||
|
<Text style={styles.sectionLabel}>CONTA</Text>
|
||||||
|
<View style={styles.menuGroup}>
|
||||||
|
<TouchableOpacity style={[styles.menuItem, styles.menuItemFirst]}>
|
||||||
|
<Ionicons name="mail-outline" size={20} color={colors.textSecondary} />
|
||||||
|
<View style={styles.menuItemContent}>
|
||||||
|
<Text style={styles.menuItemLabel}>E-mail</Text>
|
||||||
|
<Text style={styles.menuItemValue}>{displayEmail}</Text>
|
||||||
|
</View>
|
||||||
|
<Ionicons name="chevron-forward" size={18} color={colors.textSecondary} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
<View style={styles.menuDivider} />
|
||||||
|
<TouchableOpacity style={[styles.menuItem, styles.menuItemLast]}>
|
||||||
|
<Ionicons name="lock-closed-outline" size={20} color={colors.textSecondary} />
|
||||||
|
<View style={styles.menuItemContent}>
|
||||||
|
<Text style={styles.menuItemLabel}>Senha</Text>
|
||||||
|
<Text style={styles.menuItemValue}>••••••••</Text>
|
||||||
|
</View>
|
||||||
|
<Ionicons name="chevron-forward" size={18} color={colors.textSecondary} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Vinculações */}
|
||||||
|
<Text style={styles.sectionLabel}>VINCULAÇÕES</Text>
|
||||||
|
<View style={styles.menuGroup}>
|
||||||
|
<View style={[styles.menuItem, styles.menuItemFirst, styles.menuItemLast]}>
|
||||||
|
<Ionicons name="logo-google" size={20} color={colors.textSecondary} />
|
||||||
|
<View style={styles.menuItemContent}>
|
||||||
|
<Text style={styles.menuItemLabel}>Google</Text>
|
||||||
|
<Text style={styles.menuItemValue}>{displayEmail}</Text>
|
||||||
|
</View>
|
||||||
|
<View style={[styles.linkedBadge, !isGoogleLinked && styles.unlinkedBadge]}>
|
||||||
|
<Text style={[styles.linkedBadgeText, !isGoogleLinked && styles.unlinkedBadgeText]}>
|
||||||
|
{isGoogleLinked ? 'Vinculado' : 'Vincular'}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Logout */}
|
||||||
|
<TouchableOpacity style={styles.logoutBtn} onPress={handleLogout}>
|
||||||
|
<Ionicons name="log-out-outline" size={18} color={colors.error} />
|
||||||
|
<Text style={styles.logoutText}>Sair da Conta</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
</SafeAreaView>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
safe: { flex: 1, backgroundColor: colors.bgBase },
|
||||||
|
header: {
|
||||||
|
paddingHorizontal: spacing[5],
|
||||||
|
paddingTop: spacing[5],
|
||||||
|
paddingBottom: spacing[4],
|
||||||
|
},
|
||||||
|
headerTitle: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.xl,
|
||||||
|
fontWeight: typography.fontWeight.bold,
|
||||||
|
color: colors.textPrimary,
|
||||||
|
},
|
||||||
|
content: { flex: 1, paddingHorizontal: spacing[5], gap: spacing[5] },
|
||||||
|
avatarSection: { alignItems: 'center', gap: spacing[2], paddingBottom: spacing[2] },
|
||||||
|
avatarRing: {
|
||||||
|
width: 80,
|
||||||
|
height: 80,
|
||||||
|
borderRadius: radius.full,
|
||||||
|
borderWidth: 2,
|
||||||
|
borderColor: colors.accent,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
backgroundColor: colors.bgSurface,
|
||||||
|
},
|
||||||
|
userName: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.lg,
|
||||||
|
fontWeight: typography.fontWeight.bold,
|
||||||
|
color: colors.textPrimary,
|
||||||
|
},
|
||||||
|
userEmail: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.sm,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
},
|
||||||
|
googleBadge: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: 6,
|
||||||
|
backgroundColor: colors.bgSurface,
|
||||||
|
paddingHorizontal: spacing[3],
|
||||||
|
paddingVertical: 5,
|
||||||
|
borderRadius: radius.full,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: colors.border,
|
||||||
|
marginTop: spacing[1],
|
||||||
|
},
|
||||||
|
googleBadgeText: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.xs,
|
||||||
|
color: colors.textPrimary,
|
||||||
|
},
|
||||||
|
sectionLabel: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.xs,
|
||||||
|
fontWeight: typography.fontWeight.bold,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
letterSpacing: 0.8,
|
||||||
|
textTransform: 'uppercase',
|
||||||
|
},
|
||||||
|
menuGroup: {
|
||||||
|
backgroundColor: colors.bgSurface,
|
||||||
|
borderRadius: radius.lg,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: colors.border,
|
||||||
|
overflow: 'hidden',
|
||||||
|
marginTop: -spacing[2],
|
||||||
|
},
|
||||||
|
menuItem: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: spacing[3],
|
||||||
|
padding: spacing[4],
|
||||||
|
},
|
||||||
|
menuItemFirst: {},
|
||||||
|
menuItemLast: {},
|
||||||
|
menuItemContent: { flex: 1 },
|
||||||
|
menuItemLabel: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.xs,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
marginBottom: 2,
|
||||||
|
},
|
||||||
|
menuItemValue: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.base,
|
||||||
|
color: colors.textPrimary,
|
||||||
|
},
|
||||||
|
menuDivider: { height: 1, backgroundColor: colors.border, marginLeft: spacing[5] + 20 + spacing[3] },
|
||||||
|
linkedBadge: {
|
||||||
|
backgroundColor: colors.bgHover,
|
||||||
|
paddingHorizontal: spacing[3],
|
||||||
|
paddingVertical: 5,
|
||||||
|
borderRadius: radius.sm,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: colors.border,
|
||||||
|
},
|
||||||
|
unlinkedBadge: { borderColor: colors.accent, backgroundColor: colors.accentMuted },
|
||||||
|
linkedBadgeText: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.xs,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
},
|
||||||
|
unlinkedBadgeText: { color: colors.accent },
|
||||||
|
logoutBtn: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
gap: spacing[2],
|
||||||
|
backgroundColor: 'rgba(255,107,107,0.12)',
|
||||||
|
paddingVertical: spacing[4],
|
||||||
|
borderRadius: radius.lg,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: 'rgba(255,107,107,0.3)',
|
||||||
|
},
|
||||||
|
logoutText: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.base,
|
||||||
|
fontWeight: typography.fontWeight.medium,
|
||||||
|
color: colors.error,
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Stack } from 'expo-router';
|
||||||
|
|
||||||
|
export default function AppLayout(): React.ReactElement {
|
||||||
|
return (
|
||||||
|
<Stack screenOptions={{ headerShown: false, contentStyle: { backgroundColor: '#1E1B18' } }} />
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,249 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import {
|
||||||
|
View, Text, TouchableOpacity, StyleSheet, Alert,
|
||||||
|
} from 'react-native';
|
||||||
|
import { useLocalSearchParams, useRouter } from 'expo-router';
|
||||||
|
import { useForm, Controller } from 'react-hook-form';
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import { z } from 'zod';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||||
|
import { usePresetStore } from '@store/presetStore';
|
||||||
|
import { Input } from '@presentation/components/ui/Input';
|
||||||
|
import { Button } from '@presentation/components/ui/Button';
|
||||||
|
import { colors, typography, spacing, radius } from '@shared/theme';
|
||||||
|
|
||||||
|
const schema = z.object({
|
||||||
|
name: z.string().min(1, 'Nome obrigatório'),
|
||||||
|
spoolWeightG: z.coerce.number().min(1, 'Peso obrigatório'),
|
||||||
|
});
|
||||||
|
|
||||||
|
type FormData = z.infer<typeof schema>;
|
||||||
|
|
||||||
|
type SpoolType = 'Plástico' | 'Papelão' | 'Outro';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Tela de Editar Preset — 1KD-0
|
||||||
|
*/
|
||||||
|
export default function EditPresetScreen(): React.ReactElement {
|
||||||
|
const { id } = useLocalSearchParams<{ id: string }>();
|
||||||
|
const router = useRouter();
|
||||||
|
const { presets, updatePreset, removePreset } = usePresetStore();
|
||||||
|
|
||||||
|
const preset = presets.find((p) => p.id === id);
|
||||||
|
const [spoolType, setSpoolType] = useState<SpoolType>('Plástico');
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
|
||||||
|
const { control, handleSubmit, formState: { errors } } = useForm<FormData>({
|
||||||
|
resolver: zodResolver(schema),
|
||||||
|
defaultValues: {
|
||||||
|
name: preset?.name ?? '',
|
||||||
|
spoolWeightG: preset?.spoolWeightG ?? undefined,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!preset) {
|
||||||
|
return (
|
||||||
|
<SafeAreaView style={styles.safe}>
|
||||||
|
<View style={styles.notFound}>
|
||||||
|
<Text style={styles.notFoundText}>Preset não encontrado</Text>
|
||||||
|
<TouchableOpacity onPress={() => router.back()}>
|
||||||
|
<Text style={styles.backLink}>Voltar</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
</SafeAreaView>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleDelete(): void {
|
||||||
|
Alert.alert(
|
||||||
|
'Excluir preset',
|
||||||
|
`Deseja excluir o preset "${preset!.name}"?`,
|
||||||
|
[
|
||||||
|
{ text: 'Cancelar', style: 'cancel' },
|
||||||
|
{
|
||||||
|
text: 'Excluir',
|
||||||
|
style: 'destructive',
|
||||||
|
onPress: () => {
|
||||||
|
removePreset(preset!.id);
|
||||||
|
router.replace('/(app)/(tabs)/config' as never);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function onSubmit(data: FormData): Promise<void> {
|
||||||
|
setIsLoading(true);
|
||||||
|
try {
|
||||||
|
// TODO: UpdatePresetUseCase via DI container
|
||||||
|
updatePreset({
|
||||||
|
...preset!,
|
||||||
|
name: data.name,
|
||||||
|
spoolWeightG: Number(data.spoolWeightG),
|
||||||
|
});
|
||||||
|
router.back();
|
||||||
|
} catch {
|
||||||
|
Alert.alert('Erro', 'Não foi possível salvar as alterações.');
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SafeAreaView style={styles.safe}>
|
||||||
|
{/* Header */}
|
||||||
|
<View style={styles.header}>
|
||||||
|
<TouchableOpacity onPress={() => router.back()}>
|
||||||
|
<Ionicons name="chevron-back" size={24} color={colors.textPrimary} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
<Text style={styles.headerTitle}>Editar Preset</Text>
|
||||||
|
<TouchableOpacity onPress={handleDelete}>
|
||||||
|
<Ionicons name="trash-outline" size={20} color={colors.textPrimary} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={styles.content}>
|
||||||
|
{/* Ícone */}
|
||||||
|
<View style={styles.iconContainer}>
|
||||||
|
<View style={styles.iconBg}>
|
||||||
|
<Ionicons name="disc-outline" size={48} color={colors.accent} />
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Nome */}
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="name"
|
||||||
|
render={({ field }) => (
|
||||||
|
<Input
|
||||||
|
label="NOME DO PRESET"
|
||||||
|
placeholder="Ex: Minha Marca Especial"
|
||||||
|
error={errors.name?.message}
|
||||||
|
onChangeText={field.onChange}
|
||||||
|
value={field.value}
|
||||||
|
leftIcon={<Ionicons name="create-outline" size={16} color={colors.textSecondary} />}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Peso */}
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="spoolWeightG"
|
||||||
|
render={({ field }) => (
|
||||||
|
<Input
|
||||||
|
label="PESO DO CARRETEL VAZIO"
|
||||||
|
placeholder="Ex: 250"
|
||||||
|
keyboardType="numeric"
|
||||||
|
error={errors.spoolWeightG?.message}
|
||||||
|
onChangeText={field.onChange}
|
||||||
|
value={field.value?.toString() ?? ''}
|
||||||
|
leftIcon={<Ionicons name="scale-outline" size={16} color={colors.textSecondary} />}
|
||||||
|
rightLabel="g"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<Text style={styles.hint}>
|
||||||
|
Pese o carretel vazio em uma balança e insira o valor em gramas.
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
{/* Tipo */}
|
||||||
|
<View style={styles.typeRow}>
|
||||||
|
<Text style={styles.typeLabel}>TIPO DE CARRETEL</Text>
|
||||||
|
<Text style={styles.optional}>Opcional</Text>
|
||||||
|
</View>
|
||||||
|
<View style={styles.typeChips}>
|
||||||
|
{(['Plástico', 'Papelão', 'Outro'] as SpoolType[]).map((t) => (
|
||||||
|
<TouchableOpacity
|
||||||
|
key={t}
|
||||||
|
onPress={() => setSpoolType(t)}
|
||||||
|
style={[styles.chip, spoolType === t && styles.chipActive]}
|
||||||
|
>
|
||||||
|
<Text style={[styles.chipText, spoolType === t && styles.chipTextActive]}>{t}</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* CTA */}
|
||||||
|
<View style={styles.footer}>
|
||||||
|
<Button label="Salvar Alterações" onPress={handleSubmit(onSubmit)} isLoading={isLoading} />
|
||||||
|
</View>
|
||||||
|
</SafeAreaView>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
safe: { flex: 1, backgroundColor: colors.bgBase },
|
||||||
|
notFound: { flex: 1, alignItems: 'center', justifyContent: 'center', gap: spacing[4] },
|
||||||
|
notFoundText: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.base, color: colors.textSecondary },
|
||||||
|
backLink: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.base, color: colors.accent },
|
||||||
|
header: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
paddingHorizontal: spacing[5],
|
||||||
|
paddingVertical: spacing[4],
|
||||||
|
},
|
||||||
|
headerTitle: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.md,
|
||||||
|
fontWeight: typography.fontWeight.semibold,
|
||||||
|
color: colors.textPrimary,
|
||||||
|
},
|
||||||
|
content: { flex: 1, paddingHorizontal: spacing[5], gap: spacing[4] },
|
||||||
|
iconContainer: { alignItems: 'center', paddingVertical: spacing[6] },
|
||||||
|
iconBg: {
|
||||||
|
width: 96,
|
||||||
|
height: 96,
|
||||||
|
borderRadius: radius.xl,
|
||||||
|
backgroundColor: colors.bgSurface,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
hint: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.sm,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
lineHeight: typography.fontSize.sm * 1.6,
|
||||||
|
marginTop: -spacing[2],
|
||||||
|
},
|
||||||
|
typeRow: { flexDirection: 'row', alignItems: 'center', gap: spacing[3] },
|
||||||
|
typeLabel: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.xs,
|
||||||
|
fontWeight: typography.fontWeight.bold,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
letterSpacing: 0.8,
|
||||||
|
textTransform: 'uppercase',
|
||||||
|
},
|
||||||
|
optional: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.xs,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
},
|
||||||
|
typeChips: { flexDirection: 'row', gap: spacing[2] },
|
||||||
|
chip: {
|
||||||
|
paddingHorizontal: spacing[4],
|
||||||
|
paddingVertical: spacing[3],
|
||||||
|
borderRadius: radius.md,
|
||||||
|
backgroundColor: colors.bgSurface,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: colors.border,
|
||||||
|
},
|
||||||
|
chipActive: { backgroundColor: colors.accent, borderColor: colors.accent },
|
||||||
|
chipText: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.sm,
|
||||||
|
fontWeight: typography.fontWeight.medium,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
},
|
||||||
|
chipTextActive: { color: colors.bgBase },
|
||||||
|
footer: {
|
||||||
|
padding: spacing[5],
|
||||||
|
borderTopWidth: 1,
|
||||||
|
borderTopColor: colors.border,
|
||||||
|
backgroundColor: colors.bgBase,
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -0,0 +1,212 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import {
|
||||||
|
View, Text, TouchableOpacity, StyleSheet, Alert,
|
||||||
|
} from 'react-native';
|
||||||
|
import { useRouter } from 'expo-router';
|
||||||
|
import { useForm, Controller } from 'react-hook-form';
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import { z } from 'zod';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||||
|
import { usePresetStore } from '@store/presetStore';
|
||||||
|
import { Input } from '@presentation/components/ui/Input';
|
||||||
|
import { Button } from '@presentation/components/ui/Button';
|
||||||
|
import { colors, typography, spacing, radius } from '@shared/theme';
|
||||||
|
import type { SpoolPreset } from '@domain/SpoolPreset';
|
||||||
|
|
||||||
|
const schema = z.object({
|
||||||
|
name: z.string().min(1, 'Nome obrigatório'),
|
||||||
|
spoolWeightG: z.coerce.number().min(1, 'Peso obrigatório'),
|
||||||
|
});
|
||||||
|
|
||||||
|
type FormData = z.infer<typeof schema>;
|
||||||
|
|
||||||
|
type SpoolType = 'Plástico' | 'Papelão' | 'Outro';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Tela de Novo Preset — QM-0
|
||||||
|
*/
|
||||||
|
export default function NewPresetScreen(): React.ReactElement {
|
||||||
|
const router = useRouter();
|
||||||
|
const { addPreset } = usePresetStore();
|
||||||
|
const [spoolType, setSpoolType] = useState<SpoolType>('Plástico');
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
|
||||||
|
const { control, handleSubmit, formState: { errors } } = useForm<FormData>({
|
||||||
|
resolver: zodResolver(schema),
|
||||||
|
defaultValues: { name: '', spoolWeightG: undefined },
|
||||||
|
});
|
||||||
|
|
||||||
|
async function onSubmit(data: FormData): Promise<void> {
|
||||||
|
setIsLoading(true);
|
||||||
|
try {
|
||||||
|
// TODO: CreatePresetUseCase via DI container
|
||||||
|
const preset: SpoolPreset = {
|
||||||
|
id: `user-${Date.now()}`,
|
||||||
|
name: data.name,
|
||||||
|
spoolWeightG: Number(data.spoolWeightG),
|
||||||
|
isSystem: false,
|
||||||
|
userId: 'me',
|
||||||
|
createdAt: new Date().toISOString(),
|
||||||
|
};
|
||||||
|
addPreset(preset);
|
||||||
|
router.back();
|
||||||
|
} catch {
|
||||||
|
Alert.alert('Erro', 'Não foi possível salvar o preset.');
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SafeAreaView style={styles.safe}>
|
||||||
|
{/* Header */}
|
||||||
|
<View style={styles.header}>
|
||||||
|
<TouchableOpacity onPress={() => router.back()}>
|
||||||
|
<Ionicons name="chevron-back" size={24} color={colors.textPrimary} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
<Text style={styles.headerTitle}>Novo Preset</Text>
|
||||||
|
<View style={{ width: 24 }} />
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={styles.content}>
|
||||||
|
{/* Ícone */}
|
||||||
|
<View style={styles.iconContainer}>
|
||||||
|
<View style={styles.iconBg}>
|
||||||
|
<Ionicons name="disc-outline" size={48} color={colors.accent} />
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Nome */}
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="name"
|
||||||
|
render={({ field }) => (
|
||||||
|
<Input
|
||||||
|
label="NOME DO PRESET"
|
||||||
|
placeholder="Ex: Minha Marca Especial"
|
||||||
|
error={errors.name?.message}
|
||||||
|
onChangeText={field.onChange}
|
||||||
|
value={field.value}
|
||||||
|
leftIcon={<Ionicons name="create-outline" size={16} color={colors.textSecondary} />}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Peso */}
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="spoolWeightG"
|
||||||
|
render={({ field }) => (
|
||||||
|
<Input
|
||||||
|
label="PESO DO CARRETEL VAZIO"
|
||||||
|
placeholder="Ex: 250"
|
||||||
|
keyboardType="numeric"
|
||||||
|
error={errors.spoolWeightG?.message}
|
||||||
|
onChangeText={field.onChange}
|
||||||
|
value={field.value?.toString() ?? ''}
|
||||||
|
leftIcon={<Ionicons name="scale-outline" size={16} color={colors.textSecondary} />}
|
||||||
|
rightLabel="g"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<Text style={styles.hint}>
|
||||||
|
Pese o carretel vazio em uma balança e insira o valor em gramas.
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
{/* Tipo */}
|
||||||
|
<View style={styles.typeRow}>
|
||||||
|
<Text style={styles.typeLabel}>TIPO DE CARRETEL</Text>
|
||||||
|
<Text style={styles.optional}>Opcional</Text>
|
||||||
|
</View>
|
||||||
|
<View style={styles.typeChips}>
|
||||||
|
{(['Plástico', 'Papelão', 'Outro'] as SpoolType[]).map((t) => (
|
||||||
|
<TouchableOpacity
|
||||||
|
key={t}
|
||||||
|
onPress={() => setSpoolType(t)}
|
||||||
|
style={[styles.chip, spoolType === t && styles.chipActive]}
|
||||||
|
>
|
||||||
|
<Text style={[styles.chipText, spoolType === t && styles.chipTextActive]}>{t}</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* CTA */}
|
||||||
|
<View style={styles.footer}>
|
||||||
|
<Button label="Salvar Preset" onPress={handleSubmit(onSubmit)} isLoading={isLoading} />
|
||||||
|
</View>
|
||||||
|
</SafeAreaView>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
safe: { flex: 1, backgroundColor: colors.bgBase },
|
||||||
|
header: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
paddingHorizontal: spacing[5],
|
||||||
|
paddingVertical: spacing[4],
|
||||||
|
},
|
||||||
|
headerTitle: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.md,
|
||||||
|
fontWeight: typography.fontWeight.semibold,
|
||||||
|
color: colors.textPrimary,
|
||||||
|
},
|
||||||
|
content: { flex: 1, paddingHorizontal: spacing[5], gap: spacing[4] },
|
||||||
|
iconContainer: { alignItems: 'center', paddingVertical: spacing[6] },
|
||||||
|
iconBg: {
|
||||||
|
width: 96,
|
||||||
|
height: 96,
|
||||||
|
borderRadius: radius.xl,
|
||||||
|
backgroundColor: colors.bgSurface,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
hint: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.sm,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
lineHeight: typography.fontSize.sm * 1.6,
|
||||||
|
marginTop: -spacing[2],
|
||||||
|
},
|
||||||
|
typeRow: { flexDirection: 'row', alignItems: 'center', gap: spacing[3] },
|
||||||
|
typeLabel: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.xs,
|
||||||
|
fontWeight: typography.fontWeight.bold,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
letterSpacing: 0.8,
|
||||||
|
textTransform: 'uppercase',
|
||||||
|
},
|
||||||
|
optional: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.xs,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
},
|
||||||
|
typeChips: { flexDirection: 'row', gap: spacing[2] },
|
||||||
|
chip: {
|
||||||
|
paddingHorizontal: spacing[4],
|
||||||
|
paddingVertical: spacing[3],
|
||||||
|
borderRadius: radius.md,
|
||||||
|
backgroundColor: colors.bgSurface,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: colors.border,
|
||||||
|
},
|
||||||
|
chipActive: { backgroundColor: colors.accent, borderColor: colors.accent },
|
||||||
|
chipText: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.sm,
|
||||||
|
fontWeight: typography.fontWeight.medium,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
},
|
||||||
|
chipTextActive: { color: colors.bgBase },
|
||||||
|
footer: {
|
||||||
|
padding: spacing[5],
|
||||||
|
borderTopWidth: 1,
|
||||||
|
borderTopColor: colors.border,
|
||||||
|
backgroundColor: colors.bgBase,
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -0,0 +1,307 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import {
|
||||||
|
View, Text, TouchableOpacity, StyleSheet, Alert,
|
||||||
|
} from 'react-native';
|
||||||
|
import { useLocalSearchParams, useRouter } from 'expo-router';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||||
|
import { useFilamentStore } from '@store/filamentStore';
|
||||||
|
import { usePresetStore } from '@store/presetStore';
|
||||||
|
import { calcFilamentPercentage } from '@domain/Filament';
|
||||||
|
import { colors, typography, spacing, radius } from '@shared/theme';
|
||||||
|
import { formatWeight } from '@shared/utils/filament';
|
||||||
|
import { Button } from '@presentation/components/ui/Button';
|
||||||
|
|
||||||
|
type LabelSize = '50x30' | '62x29' | '38x25';
|
||||||
|
|
||||||
|
const LABEL_SIZES: { id: LabelSize; label: string; sub: string }[] = [
|
||||||
|
{ id: '50x30', label: '50 × 30', sub: 'Padrão' },
|
||||||
|
{ id: '62x29', label: '62 × 29', sub: 'Brother DK' },
|
||||||
|
{ id: '38x25', label: '38 × 25', sub: 'Dymo 11354' },
|
||||||
|
];
|
||||||
|
|
||||||
|
type ContentOption = 'color' | 'name' | 'material_brand' | 'net_weight' | 'print_temp' | 'qrcode';
|
||||||
|
|
||||||
|
const CONTENT_OPTIONS: { id: ContentOption; label: string }[] = [
|
||||||
|
{ id: 'color', label: 'Cor visual' },
|
||||||
|
{ id: 'name', label: 'Nome' },
|
||||||
|
{ id: 'material_brand', label: 'Material · Marca' },
|
||||||
|
{ id: 'net_weight', label: 'Peso líquido' },
|
||||||
|
{ id: 'print_temp', label: 'Temp. impressão' },
|
||||||
|
{ id: 'qrcode', label: 'QR Code' },
|
||||||
|
];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Tela de Exportar Etiqueta — 1FZ-0
|
||||||
|
*/
|
||||||
|
export default function LabelScreen(): React.ReactElement {
|
||||||
|
const { id } = useLocalSearchParams<{ id: string }>();
|
||||||
|
const router = useRouter();
|
||||||
|
const { filaments } = useFilamentStore();
|
||||||
|
const { presets } = usePresetStore();
|
||||||
|
|
||||||
|
const filament = filaments.find((f) => f.id === id);
|
||||||
|
const preset = filament ? presets.find((p) => p.id === filament.spoolPresetId) : undefined;
|
||||||
|
|
||||||
|
const [selectedSize, setSelectedSize] = useState<LabelSize>('50x30');
|
||||||
|
const [enabledContent, setEnabledContent] = useState<Set<ContentOption>>(
|
||||||
|
new Set(['color', 'name', 'material_brand', 'net_weight', 'print_temp', 'qrcode']),
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!filament) {
|
||||||
|
return (
|
||||||
|
<SafeAreaView style={styles.safe}>
|
||||||
|
<View style={styles.notFound}>
|
||||||
|
<Text style={styles.notFoundText}>Filamento não encontrado</Text>
|
||||||
|
</View>
|
||||||
|
</SafeAreaView>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const pct = calcFilamentPercentage(filament);
|
||||||
|
|
||||||
|
function toggleContent(opt: ContentOption): void {
|
||||||
|
setEnabledContent((prev) => {
|
||||||
|
const next = new Set(prev);
|
||||||
|
if (next.has(opt)) next.delete(opt); else next.add(opt);
|
||||||
|
return next;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleExport(): void {
|
||||||
|
// TODO: Generate SVG and share via expo-sharing
|
||||||
|
Alert.alert('Exportar SVG', 'Funcionalidade de exportação SVG será implementada na integração com o backend.');
|
||||||
|
}
|
||||||
|
|
||||||
|
const sizeLabel = LABEL_SIZES.find((s) => s.id === selectedSize);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SafeAreaView style={styles.safe}>
|
||||||
|
{/* Header */}
|
||||||
|
<View style={styles.header}>
|
||||||
|
<TouchableOpacity onPress={() => router.back()}>
|
||||||
|
<Ionicons name="chevron-back" size={24} color={colors.textPrimary} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
<Text style={styles.headerTitle}>Exportar Etiqueta</Text>
|
||||||
|
<View style={{ width: 24 }} />
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={styles.content}>
|
||||||
|
{/* Label Preview */}
|
||||||
|
<Text style={styles.sectionLabel}>PREVIEW DA ETIQUETA</Text>
|
||||||
|
<View style={styles.previewCard}>
|
||||||
|
<View style={[styles.previewColorBar, { backgroundColor: filament.colorHex }]} />
|
||||||
|
<View style={styles.previewBody}>
|
||||||
|
<View style={styles.previewTop}>
|
||||||
|
<View style={styles.previewInfo}>
|
||||||
|
<View style={styles.previewNameRow}>
|
||||||
|
<View style={[styles.previewDot, { backgroundColor: filament.colorHex }]} />
|
||||||
|
<Text style={styles.previewName}>
|
||||||
|
{filament.brand}{filament.model ? ` ${filament.model}` : ''}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
<Text style={styles.previewMeta}>
|
||||||
|
{filament.brand} · {filament.material} · {filament.colorHex}
|
||||||
|
</Text>
|
||||||
|
<View style={styles.previewParamsRow}>
|
||||||
|
<View>
|
||||||
|
<Text style={styles.previewParamLabel}>DISPONÍVEL</Text>
|
||||||
|
<Text style={styles.previewParamValue}>{formatWeight(filament.netWeightG)}</Text>
|
||||||
|
</View>
|
||||||
|
{filament.tempHotendC && (
|
||||||
|
<View>
|
||||||
|
<Text style={styles.previewParamLabel}>HOTEND</Text>
|
||||||
|
<Text style={styles.previewParamValue}>{filament.tempHotendC}°C</Text>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
{filament.tempBedC && (
|
||||||
|
<View>
|
||||||
|
<Text style={styles.previewParamLabel}>MESA</Text>
|
||||||
|
<Text style={styles.previewParamValue}>{filament.tempBedC}°C</Text>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
{/* QR placeholder */}
|
||||||
|
<Ionicons name="qr-code" size={48} color={colors.textSecondary} />
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<Text style={styles.previewSize}>
|
||||||
|
<Ionicons name="resize-outline" size={12} color={colors.textSecondary} />{' '}
|
||||||
|
{sizeLabel?.label} mm ({sizeLabel?.sub})
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
{/* Tamanho */}
|
||||||
|
<Text style={[styles.sectionLabel, { marginTop: spacing[2] }]}>TAMANHO</Text>
|
||||||
|
<View style={styles.sizeChips}>
|
||||||
|
{LABEL_SIZES.map((s) => (
|
||||||
|
<TouchableOpacity
|
||||||
|
key={s.id}
|
||||||
|
onPress={() => setSelectedSize(s.id)}
|
||||||
|
style={[styles.sizeChip, selectedSize === s.id && styles.sizeChipActive]}
|
||||||
|
>
|
||||||
|
<Text style={[styles.sizeChipMain, selectedSize === s.id && styles.sizeChipMainActive]}>
|
||||||
|
{s.label}
|
||||||
|
</Text>
|
||||||
|
<Text style={[styles.sizeChipSub, selectedSize === s.id && styles.sizeChipSubActive]}>
|
||||||
|
{s.sub}
|
||||||
|
</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Conteúdo */}
|
||||||
|
<Text style={styles.sectionLabel}>CONTEÚDO DA ETIQUETA</Text>
|
||||||
|
<View style={styles.contentOptions}>
|
||||||
|
{CONTENT_OPTIONS.map((opt) => {
|
||||||
|
const active = enabledContent.has(opt.id);
|
||||||
|
return (
|
||||||
|
<TouchableOpacity
|
||||||
|
key={opt.id}
|
||||||
|
onPress={() => toggleContent(opt.id)}
|
||||||
|
style={[styles.contentChip, active && styles.contentChipActive]}
|
||||||
|
>
|
||||||
|
{active && <Ionicons name="checkmark" size={12} color={colors.accent} />}
|
||||||
|
<Text style={[styles.contentChipText, active && styles.contentChipTextActive]}>
|
||||||
|
{opt.label}
|
||||||
|
</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* CTA */}
|
||||||
|
<View style={styles.footer}>
|
||||||
|
<Button
|
||||||
|
label="Exportar SVG"
|
||||||
|
leftIcon={<Ionicons name="download-outline" size={18} color={colors.bgBase} />}
|
||||||
|
onPress={handleExport}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</SafeAreaView>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
safe: { flex: 1, backgroundColor: colors.bgBase },
|
||||||
|
notFound: { flex: 1, alignItems: 'center', justifyContent: 'center' },
|
||||||
|
notFoundText: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.base, color: colors.textSecondary },
|
||||||
|
header: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
paddingHorizontal: spacing[5],
|
||||||
|
paddingVertical: spacing[4],
|
||||||
|
},
|
||||||
|
headerTitle: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.md,
|
||||||
|
fontWeight: typography.fontWeight.semibold,
|
||||||
|
color: colors.textPrimary,
|
||||||
|
},
|
||||||
|
content: { flex: 1, paddingHorizontal: spacing[5], gap: spacing[4] },
|
||||||
|
sectionLabel: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.xs,
|
||||||
|
fontWeight: typography.fontWeight.bold,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
letterSpacing: 0.8,
|
||||||
|
textTransform: 'uppercase',
|
||||||
|
},
|
||||||
|
previewCard: {
|
||||||
|
backgroundColor: '#F5EFE0',
|
||||||
|
borderRadius: radius.lg,
|
||||||
|
flexDirection: 'row',
|
||||||
|
overflow: 'hidden',
|
||||||
|
minHeight: 100,
|
||||||
|
},
|
||||||
|
previewColorBar: { width: 10 },
|
||||||
|
previewBody: { flex: 1, padding: spacing[3] },
|
||||||
|
previewTop: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start' },
|
||||||
|
previewInfo: { flex: 1, gap: 4 },
|
||||||
|
previewNameRow: { flexDirection: 'row', alignItems: 'center', gap: 6 },
|
||||||
|
previewDot: { width: 12, height: 12, borderRadius: radius.full },
|
||||||
|
previewName: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.sm,
|
||||||
|
fontWeight: typography.fontWeight.bold,
|
||||||
|
color: colors.black,
|
||||||
|
},
|
||||||
|
previewMeta: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.xs,
|
||||||
|
color: '#666',
|
||||||
|
},
|
||||||
|
previewParamsRow: { flexDirection: 'row', gap: spacing[4], marginTop: 4 },
|
||||||
|
previewParamLabel: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: 9,
|
||||||
|
color: '#888',
|
||||||
|
textTransform: 'uppercase',
|
||||||
|
},
|
||||||
|
previewParamValue: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.sm,
|
||||||
|
fontWeight: typography.fontWeight.bold,
|
||||||
|
color: colors.black,
|
||||||
|
},
|
||||||
|
previewSize: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.xs,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
textAlign: 'right',
|
||||||
|
marginTop: -spacing[2],
|
||||||
|
},
|
||||||
|
sizeChips: { flexDirection: 'row', gap: spacing[2] },
|
||||||
|
sizeChip: {
|
||||||
|
flex: 1,
|
||||||
|
alignItems: 'center',
|
||||||
|
paddingVertical: spacing[3],
|
||||||
|
borderRadius: radius.lg,
|
||||||
|
backgroundColor: colors.bgSurface,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: colors.border,
|
||||||
|
},
|
||||||
|
sizeChipActive: { borderColor: colors.accent, backgroundColor: colors.accentMuted },
|
||||||
|
sizeChipMain: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.sm,
|
||||||
|
fontWeight: typography.fontWeight.semibold,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
},
|
||||||
|
sizeChipMainActive: { color: colors.accent },
|
||||||
|
sizeChipSub: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.xs,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
marginTop: 2,
|
||||||
|
},
|
||||||
|
sizeChipSubActive: { color: colors.accent },
|
||||||
|
contentOptions: { flexDirection: 'row', flexWrap: 'wrap', gap: spacing[2] },
|
||||||
|
contentChip: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: 4,
|
||||||
|
paddingHorizontal: spacing[3],
|
||||||
|
paddingVertical: spacing[2],
|
||||||
|
borderRadius: radius.full,
|
||||||
|
backgroundColor: colors.bgHover,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: colors.border,
|
||||||
|
},
|
||||||
|
contentChipActive: { borderColor: colors.accent },
|
||||||
|
contentChipText: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.xs,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
},
|
||||||
|
contentChipTextActive: { color: colors.accent },
|
||||||
|
footer: {
|
||||||
|
padding: spacing[5],
|
||||||
|
borderTopWidth: 1,
|
||||||
|
borderTopColor: colors.border,
|
||||||
|
backgroundColor: colors.bgBase,
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -0,0 +1,189 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import {
|
||||||
|
View, Text, TouchableOpacity, StyleSheet, Alert, Share,
|
||||||
|
} from 'react-native';
|
||||||
|
import { useLocalSearchParams, useRouter } from 'expo-router';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||||
|
import { useFilamentStore } from '@store/filamentStore';
|
||||||
|
import { colors, typography, spacing, radius } from '@shared/theme';
|
||||||
|
import { Button } from '@presentation/components/ui/Button';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Tela de QR Code — 1CF-0
|
||||||
|
*/
|
||||||
|
export default function QRCodeScreen(): React.ReactElement {
|
||||||
|
const { id } = useLocalSearchParams<{ id: string }>();
|
||||||
|
const router = useRouter();
|
||||||
|
const { filaments } = useFilamentStore();
|
||||||
|
|
||||||
|
const filament = filaments.find((f) => f.id === id);
|
||||||
|
|
||||||
|
const slug = filament
|
||||||
|
? `${filament.brand.toLowerCase()}-${(filament.model ?? '').toLowerCase()}-${filament.colorHex.replace('#', '').toLowerCase()}`.replace(/\s+/g, '-')
|
||||||
|
: 'desconhecido';
|
||||||
|
|
||||||
|
const deepLink = `meowspool.app/f/${slug}`;
|
||||||
|
|
||||||
|
async function handleShare(): Promise<void> {
|
||||||
|
try {
|
||||||
|
await Share.share({ message: `meowspool://filament/${id}`, url: `https://${deepLink}` });
|
||||||
|
} catch {
|
||||||
|
// cancelled
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleCopyLink(): Promise<void> {
|
||||||
|
// expo-clipboard not installed — show alert as placeholder
|
||||||
|
Alert.alert('Link copiado', deepLink);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!filament) {
|
||||||
|
return (
|
||||||
|
<SafeAreaView style={styles.safe}>
|
||||||
|
<View style={styles.notFound}>
|
||||||
|
<Text style={styles.notFoundText}>Filamento não encontrado</Text>
|
||||||
|
</View>
|
||||||
|
</SafeAreaView>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SafeAreaView style={styles.safe}>
|
||||||
|
{/* Header */}
|
||||||
|
<View style={styles.header}>
|
||||||
|
<TouchableOpacity onPress={() => router.back()}>
|
||||||
|
<Ionicons name="chevron-back" size={24} color={colors.textPrimary} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
<Text style={styles.headerTitle}>QR Code</Text>
|
||||||
|
<View style={{ width: 24 }} />
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Filament identity */}
|
||||||
|
<View style={styles.identity}>
|
||||||
|
<View style={[styles.swatch, { backgroundColor: filament.colorHex }]} />
|
||||||
|
<View>
|
||||||
|
<Text style={styles.name}>
|
||||||
|
{filament.brand}{filament.model ? ` ${filament.model}` : ''}
|
||||||
|
</Text>
|
||||||
|
<Text style={styles.meta}>
|
||||||
|
{filament.brand} · {filament.material} · {filament.colorHex}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* QR Code area */}
|
||||||
|
<View style={styles.qrContainer}>
|
||||||
|
<View style={styles.qrCard}>
|
||||||
|
{/* Placeholder QR — real impl would use react-native-qrcode-svg */}
|
||||||
|
<View style={styles.qrPlaceholder}>
|
||||||
|
<Ionicons name="qr-code" size={160} color={colors.black} />
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<Text style={styles.qrHint}>Aponte a câmera para escanear</Text>
|
||||||
|
<View style={styles.linkBadge}>
|
||||||
|
<Text style={styles.linkText}>{deepLink}</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Actions */}
|
||||||
|
<View style={styles.footer}>
|
||||||
|
<Button
|
||||||
|
label="Compartilhar QR Code"
|
||||||
|
leftIcon={<Ionicons name="share-outline" size={18} color={colors.bgBase} />}
|
||||||
|
onPress={handleShare}
|
||||||
|
/>
|
||||||
|
<TouchableOpacity style={styles.copyBtn} onPress={handleCopyLink}>
|
||||||
|
<Text style={styles.copyBtnText}>Copiar link</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
</SafeAreaView>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
safe: { flex: 1, backgroundColor: colors.bgBase },
|
||||||
|
notFound: { flex: 1, alignItems: 'center', justifyContent: 'center' },
|
||||||
|
notFoundText: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.base, color: colors.textSecondary },
|
||||||
|
header: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
paddingHorizontal: spacing[5],
|
||||||
|
paddingVertical: spacing[4],
|
||||||
|
},
|
||||||
|
headerTitle: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.md,
|
||||||
|
fontWeight: typography.fontWeight.semibold,
|
||||||
|
color: colors.textPrimary,
|
||||||
|
},
|
||||||
|
identity: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: spacing[3],
|
||||||
|
paddingHorizontal: spacing[5],
|
||||||
|
paddingBottom: spacing[4],
|
||||||
|
},
|
||||||
|
swatch: { width: 44, height: 44, borderRadius: radius.md },
|
||||||
|
name: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.base,
|
||||||
|
fontWeight: typography.fontWeight.semibold,
|
||||||
|
color: colors.textPrimary,
|
||||||
|
},
|
||||||
|
meta: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.sm,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
},
|
||||||
|
qrContainer: {
|
||||||
|
flex: 1,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
gap: spacing[4],
|
||||||
|
paddingHorizontal: spacing[5],
|
||||||
|
},
|
||||||
|
qrCard: {
|
||||||
|
backgroundColor: '#F5EFE0',
|
||||||
|
borderRadius: radius.xl,
|
||||||
|
padding: spacing[6],
|
||||||
|
},
|
||||||
|
qrPlaceholder: {
|
||||||
|
width: 200,
|
||||||
|
height: 200,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
qrHint: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.sm,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
},
|
||||||
|
linkBadge: {
|
||||||
|
backgroundColor: colors.bgSurface,
|
||||||
|
paddingHorizontal: spacing[4],
|
||||||
|
paddingVertical: spacing[2],
|
||||||
|
borderRadius: radius.full,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: colors.border,
|
||||||
|
},
|
||||||
|
linkText: {
|
||||||
|
fontFamily: typography.fontFamily.mono,
|
||||||
|
fontSize: typography.fontSize.xs,
|
||||||
|
color: colors.accent,
|
||||||
|
},
|
||||||
|
footer: {
|
||||||
|
padding: spacing[5],
|
||||||
|
gap: spacing[3],
|
||||||
|
borderTopWidth: 1,
|
||||||
|
borderTopColor: colors.border,
|
||||||
|
backgroundColor: colors.bgBase,
|
||||||
|
},
|
||||||
|
copyBtn: { alignItems: 'center', paddingVertical: spacing[2] },
|
||||||
|
copyBtnText: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.base,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -0,0 +1,351 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import {
|
||||||
|
View, Text, ScrollView, TouchableOpacity, StyleSheet, Alert, Share,
|
||||||
|
} from 'react-native';
|
||||||
|
import { useLocalSearchParams, useRouter } from 'expo-router';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||||
|
import { useFilamentStore } from '@store/filamentStore';
|
||||||
|
import { usePresetStore } from '@store/presetStore';
|
||||||
|
import { calcFilamentPercentage } from '@domain/Filament';
|
||||||
|
import { colors, typography, spacing, radius, getStockColor, getStockBgColor } from '@shared/theme';
|
||||||
|
import { formatWeight } from '@shared/utils/filament';
|
||||||
|
import { Card } from '@presentation/components/ui/Card';
|
||||||
|
import { Button } from '@presentation/components/ui/Button';
|
||||||
|
import { StockBar } from '@presentation/components/filament/StockBar';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Tela de Detalhe do Filamento — 6L-0
|
||||||
|
*/
|
||||||
|
export default function FilamentDetailScreen(): React.ReactElement {
|
||||||
|
const { id } = useLocalSearchParams<{ id: string }>();
|
||||||
|
const router = useRouter();
|
||||||
|
const { filaments, removeFilament } = useFilamentStore();
|
||||||
|
const { presets } = usePresetStore();
|
||||||
|
|
||||||
|
const filament = filaments.find((f) => f.id === id);
|
||||||
|
const preset = filament ? presets.find((p) => p.id === filament.spoolPresetId) : undefined;
|
||||||
|
|
||||||
|
if (!filament) {
|
||||||
|
return (
|
||||||
|
<SafeAreaView style={styles.safe}>
|
||||||
|
<View style={styles.notFound}>
|
||||||
|
<Text style={styles.notFoundText}>Filamento não encontrado</Text>
|
||||||
|
<TouchableOpacity onPress={() => router.back()}>
|
||||||
|
<Text style={styles.backLink}>Voltar</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
</SafeAreaView>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const pct = calcFilamentPercentage(filament);
|
||||||
|
const stockColor = getStockColor(pct);
|
||||||
|
const slug = `${filament.brand.toLowerCase()}-${(filament.model ?? '').toLowerCase()}-${filament.colorHex.replace('#', '').toLowerCase()}`.replace(/\s+/g, '-');
|
||||||
|
|
||||||
|
function handleDelete(): void {
|
||||||
|
Alert.alert(
|
||||||
|
'Excluir filamento',
|
||||||
|
`Deseja excluir "${filament!.brand}${filament!.model ? ` ${filament!.model}` : ''}"? Esta ação não pode ser desfeita.`,
|
||||||
|
[
|
||||||
|
{ text: 'Cancelar', style: 'cancel' },
|
||||||
|
{
|
||||||
|
text: 'Excluir',
|
||||||
|
style: 'destructive',
|
||||||
|
onPress: () => {
|
||||||
|
removeFilament(filament!.id);
|
||||||
|
router.back();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SafeAreaView style={styles.safe}>
|
||||||
|
<ScrollView showsVerticalScrollIndicator={false}>
|
||||||
|
{/* Header */}
|
||||||
|
<View style={styles.header}>
|
||||||
|
<TouchableOpacity onPress={() => router.back()}>
|
||||||
|
<Ionicons name="chevron-back" size={24} color={colors.textPrimary} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
<Text style={styles.headerTitle}>
|
||||||
|
{filament.brand}{filament.model ? ` ${filament.model}` : ''}
|
||||||
|
</Text>
|
||||||
|
<View style={styles.headerActions}>
|
||||||
|
<TouchableOpacity
|
||||||
|
onPress={() => router.push(`/(app)/inventory/${id}/edit` as never)}
|
||||||
|
style={styles.headerBtn}
|
||||||
|
>
|
||||||
|
<Ionicons name="pencil-outline" size={20} color={colors.textPrimary} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
<TouchableOpacity onPress={handleDelete} style={styles.headerBtn}>
|
||||||
|
<Ionicons name="trash-outline" size={20} color={colors.textPrimary} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={styles.content}>
|
||||||
|
{/* Identity Card */}
|
||||||
|
<Card style={styles.identityCard}>
|
||||||
|
<View style={[styles.colorSwatch, { backgroundColor: filament.colorHex }]} />
|
||||||
|
<View style={styles.identityInfo}>
|
||||||
|
<Text style={styles.filamentName}>
|
||||||
|
{filament.brand}{filament.model ? ` ${filament.model}` : ''}
|
||||||
|
</Text>
|
||||||
|
<Text style={styles.filamentBrandLine}>
|
||||||
|
{filament.brand} · {filament.colorHex.toLowerCase().startsWith('#') ? '' : '#'}{filament.colorHex}
|
||||||
|
</Text>
|
||||||
|
<View style={styles.badgeRow}>
|
||||||
|
<View style={styles.materialBadge}>
|
||||||
|
<Text style={styles.materialBadgeText}>{filament.material}</Text>
|
||||||
|
</View>
|
||||||
|
<View style={styles.hexBadge}>
|
||||||
|
<Text style={styles.hexBadgeText}>{filament.colorHex}</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Filamento Disponível */}
|
||||||
|
<Card>
|
||||||
|
<View style={styles.stockHeader}>
|
||||||
|
<Text style={styles.sectionLabel}>FILAMENTO DISPONÍVEL</Text>
|
||||||
|
<View style={[styles.pctBadge, { backgroundColor: getStockBgColor(pct) }]}>
|
||||||
|
<Text style={[styles.pctText, { color: stockColor }]}>{pct}%</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View style={styles.weightRow}>
|
||||||
|
<Text style={[styles.netWeight, { color: stockColor }]}>
|
||||||
|
{formatWeight(filament.netWeightG)}
|
||||||
|
</Text>
|
||||||
|
<Text style={styles.totalWeight}>de {formatWeight(filament.totalWeightG)}</Text>
|
||||||
|
</View>
|
||||||
|
<StockBar percentage={pct} />
|
||||||
|
<View style={styles.stockMeta}>
|
||||||
|
<Text style={styles.stockMetaText}>
|
||||||
|
Carretel: {preset?.name ?? '—'} · {preset?.spoolWeightG ?? 0}g
|
||||||
|
</Text>
|
||||||
|
<Text style={styles.stockMetaText}>
|
||||||
|
Total pesado: {formatWeight(filament.totalWeightG)}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Parâmetros de Impressão */}
|
||||||
|
<Card>
|
||||||
|
<Text style={styles.sectionLabel}>PARÂMETROS DE IMPRESSÃO</Text>
|
||||||
|
<View style={styles.paramsGrid}>
|
||||||
|
<View style={styles.paramItem}>
|
||||||
|
<Ionicons name="thermometer-outline" size={20} color={colors.stockLow} />
|
||||||
|
<Text style={styles.paramValue}>{filament.tempHotendC ?? '—'}°C</Text>
|
||||||
|
<Text style={styles.paramLabel}>Hotend</Text>
|
||||||
|
</View>
|
||||||
|
<View style={styles.paramItem}>
|
||||||
|
<Ionicons name="flag-outline" size={20} color={colors.stockMedium} />
|
||||||
|
<Text style={styles.paramValue}>{filament.tempBedC ?? '—'}°C</Text>
|
||||||
|
<Text style={styles.paramLabel}>Mesa</Text>
|
||||||
|
</View>
|
||||||
|
<View style={styles.paramItem}>
|
||||||
|
<Ionicons name="time-outline" size={20} color={colors.accent} />
|
||||||
|
<Text style={styles.paramValue}>{filament.flowFactorPct ?? '—'}%</Text>
|
||||||
|
<Text style={styles.paramLabel}>Fluxo</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Identificação */}
|
||||||
|
<Card>
|
||||||
|
<View style={styles.idSection}>
|
||||||
|
{/* QR Code placeholder */}
|
||||||
|
<View style={styles.qrPreview}>
|
||||||
|
<Ionicons name="qr-code-outline" size={48} color={colors.textSecondary} />
|
||||||
|
</View>
|
||||||
|
<View style={styles.idInfo}>
|
||||||
|
<Text style={styles.idTitle}>Identificação</Text>
|
||||||
|
<Text style={styles.idSlug}>{slug}</Text>
|
||||||
|
<View style={styles.idButtons}>
|
||||||
|
<TouchableOpacity
|
||||||
|
style={styles.idBtn}
|
||||||
|
onPress={() => router.push(`/(app)/filaments/${id}/label` as never)}
|
||||||
|
>
|
||||||
|
<Ionicons name="add-outline" size={14} color={colors.accent} />
|
||||||
|
<Text style={styles.idBtnText}>Exportar SVG</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
<TouchableOpacity
|
||||||
|
style={[styles.idBtn, styles.idBtnSecondary]}
|
||||||
|
onPress={() => router.push(`/(app)/filaments/${id}/qrcode` as never)}
|
||||||
|
>
|
||||||
|
<Ionicons name="qr-code-outline" size={14} color={colors.textSecondary} />
|
||||||
|
<Text style={styles.idBtnTextSecondary}>Ver QR</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Observações */}
|
||||||
|
{filament.notes ? (
|
||||||
|
<Card>
|
||||||
|
<Text style={styles.sectionLabel}>OBSERVAÇÕES</Text>
|
||||||
|
<Text style={styles.notesText}>{filament.notes}</Text>
|
||||||
|
</Card>
|
||||||
|
) : null}
|
||||||
|
</View>
|
||||||
|
</ScrollView>
|
||||||
|
|
||||||
|
{/* CTA fixo */}
|
||||||
|
<View style={styles.footer}>
|
||||||
|
<Button
|
||||||
|
label="Pesar Novamente"
|
||||||
|
leftIcon={<Ionicons name="scale-outline" size={18} color={colors.bgBase} />}
|
||||||
|
onPress={() => router.push(`/(app)/inventory/${id}/edit` as never)}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</SafeAreaView>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
safe: { flex: 1, backgroundColor: colors.bgBase },
|
||||||
|
notFound: { flex: 1, alignItems: 'center', justifyContent: 'center', gap: spacing[4] },
|
||||||
|
notFoundText: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.base, color: colors.textSecondary },
|
||||||
|
backLink: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.base, color: colors.accent },
|
||||||
|
|
||||||
|
header: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
paddingHorizontal: spacing[5],
|
||||||
|
paddingVertical: spacing[4],
|
||||||
|
},
|
||||||
|
headerTitle: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.md,
|
||||||
|
fontWeight: typography.fontWeight.semibold,
|
||||||
|
color: colors.textPrimary,
|
||||||
|
flex: 1,
|
||||||
|
textAlign: 'center',
|
||||||
|
},
|
||||||
|
headerActions: { flexDirection: 'row', gap: spacing[2] },
|
||||||
|
headerBtn: { padding: spacing[1] },
|
||||||
|
|
||||||
|
content: { paddingHorizontal: spacing[5], gap: spacing[4], paddingBottom: spacing[10] },
|
||||||
|
|
||||||
|
identityCard: { flexDirection: 'row', alignItems: 'center', gap: spacing[4] },
|
||||||
|
colorSwatch: { width: 72, height: 72, borderRadius: radius.lg },
|
||||||
|
identityInfo: { flex: 1, gap: spacing[1] },
|
||||||
|
filamentName: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.lg,
|
||||||
|
fontWeight: typography.fontWeight.bold,
|
||||||
|
color: colors.textPrimary,
|
||||||
|
},
|
||||||
|
filamentBrandLine: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.sm,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
},
|
||||||
|
badgeRow: { flexDirection: 'row', gap: spacing[2], marginTop: spacing[1] },
|
||||||
|
materialBadge: {
|
||||||
|
paddingHorizontal: spacing[3],
|
||||||
|
paddingVertical: 3,
|
||||||
|
backgroundColor: colors.bgHover,
|
||||||
|
borderRadius: radius.full,
|
||||||
|
},
|
||||||
|
materialBadgeText: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.xs,
|
||||||
|
fontWeight: typography.fontWeight.medium,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
},
|
||||||
|
hexBadge: {
|
||||||
|
paddingHorizontal: spacing[3],
|
||||||
|
paddingVertical: 3,
|
||||||
|
backgroundColor: colors.bgHover,
|
||||||
|
borderRadius: radius.full,
|
||||||
|
},
|
||||||
|
hexBadgeText: {
|
||||||
|
fontFamily: typography.fontFamily.mono,
|
||||||
|
fontSize: typography.fontSize.xs,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
},
|
||||||
|
|
||||||
|
sectionLabel: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.xs,
|
||||||
|
fontWeight: typography.fontWeight.bold,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
letterSpacing: 0.8,
|
||||||
|
textTransform: 'uppercase',
|
||||||
|
marginBottom: spacing[3],
|
||||||
|
},
|
||||||
|
|
||||||
|
stockHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: spacing[2] },
|
||||||
|
pctBadge: { paddingHorizontal: spacing[3], paddingVertical: 4, borderRadius: radius.sm },
|
||||||
|
pctText: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.sm, fontWeight: typography.fontWeight.bold },
|
||||||
|
weightRow: { flexDirection: 'row', alignItems: 'baseline', gap: spacing[2], marginBottom: spacing[3] },
|
||||||
|
netWeight: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize['3xl'], fontWeight: typography.fontWeight.bold },
|
||||||
|
totalWeight: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.sm, color: colors.textSecondary },
|
||||||
|
stockMeta: { flexDirection: 'row', justifyContent: 'space-between', marginTop: spacing[3] },
|
||||||
|
stockMetaText: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.xs, color: colors.textSecondary },
|
||||||
|
|
||||||
|
paramsGrid: { flexDirection: 'row', justifyContent: 'space-around' },
|
||||||
|
paramItem: { alignItems: 'center', gap: spacing[1] },
|
||||||
|
paramValue: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.xl,
|
||||||
|
fontWeight: typography.fontWeight.bold,
|
||||||
|
color: colors.textPrimary,
|
||||||
|
},
|
||||||
|
paramLabel: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.xs, color: colors.textSecondary },
|
||||||
|
|
||||||
|
idSection: { flexDirection: 'row', gap: spacing[4], alignItems: 'flex-start' },
|
||||||
|
qrPreview: {
|
||||||
|
width: 80,
|
||||||
|
height: 80,
|
||||||
|
backgroundColor: colors.bgHover,
|
||||||
|
borderRadius: radius.md,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
idInfo: { flex: 1, gap: spacing[2] },
|
||||||
|
idTitle: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.base,
|
||||||
|
fontWeight: typography.fontWeight.semibold,
|
||||||
|
color: colors.textPrimary,
|
||||||
|
},
|
||||||
|
idSlug: {
|
||||||
|
fontFamily: typography.fontFamily.mono,
|
||||||
|
fontSize: typography.fontSize.xs,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
},
|
||||||
|
idButtons: { flexDirection: 'row', gap: spacing[2], flexWrap: 'wrap' },
|
||||||
|
idBtn: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: 4,
|
||||||
|
backgroundColor: colors.accentMuted,
|
||||||
|
paddingHorizontal: spacing[3],
|
||||||
|
paddingVertical: 6,
|
||||||
|
borderRadius: radius.sm,
|
||||||
|
},
|
||||||
|
idBtnText: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.xs, color: colors.accent },
|
||||||
|
idBtnSecondary: { backgroundColor: colors.bgHover },
|
||||||
|
idBtnTextSecondary: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.xs, color: colors.textSecondary },
|
||||||
|
|
||||||
|
notesText: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.base,
|
||||||
|
color: colors.textPrimary,
|
||||||
|
lineHeight: typography.fontSize.base * typography.lineHeight.relaxed,
|
||||||
|
},
|
||||||
|
|
||||||
|
footer: {
|
||||||
|
padding: spacing[5],
|
||||||
|
borderTopWidth: 1,
|
||||||
|
borderTopColor: colors.border,
|
||||||
|
backgroundColor: colors.bgBase,
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -0,0 +1,374 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import {
|
||||||
|
View, Text, ScrollView, TouchableOpacity, TextInput, StyleSheet, Alert,
|
||||||
|
} from 'react-native';
|
||||||
|
import { useLocalSearchParams, useRouter } from 'expo-router';
|
||||||
|
import { useForm, Controller } from 'react-hook-form';
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import { z } from 'zod';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||||
|
import { usePresetStore } from '@store/presetStore';
|
||||||
|
import { useFilamentStore } from '@store/filamentStore';
|
||||||
|
import { Input } from '@presentation/components/ui/Input';
|
||||||
|
import { Button } from '@presentation/components/ui/Button';
|
||||||
|
import { Card } from '@presentation/components/ui/Card';
|
||||||
|
import { calcNetWeight } from '@domain/Filament';
|
||||||
|
import { colors, typography, spacing, radius } from '@shared/theme';
|
||||||
|
import { MATERIALS, type Material } from '@shared/constants';
|
||||||
|
import { formatWeight } from '@shared/utils/filament';
|
||||||
|
|
||||||
|
const schema = z.object({
|
||||||
|
brand: z.string().min(1, 'Marca obrigatória'),
|
||||||
|
model: z.string().optional(),
|
||||||
|
totalWeightG: z.coerce.number().min(1, 'Informe o peso total'),
|
||||||
|
tempHotendC: z.coerce.number().optional(),
|
||||||
|
tempBedC: z.coerce.number().optional(),
|
||||||
|
flowFactorPct: z.coerce.number().optional(),
|
||||||
|
notes: z.string().optional(),
|
||||||
|
});
|
||||||
|
|
||||||
|
type FormData = z.infer<typeof schema>;
|
||||||
|
|
||||||
|
const PRESET_COLORS = ['#E05533', '#2563EB', '#FFFFFF', '#1E1B18', '#22C55E', '#EAB308', '#EC4899', '#A855F7', '#F97316'];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Tela de Edição de Filamento — 13O-0
|
||||||
|
*/
|
||||||
|
export default function EditFilamentScreen(): React.ReactElement {
|
||||||
|
const { id } = useLocalSearchParams<{ id: string }>();
|
||||||
|
const router = useRouter();
|
||||||
|
const { presets, systemPresets } = usePresetStore();
|
||||||
|
const { filaments, updateFilament, removeFilament } = useFilamentStore();
|
||||||
|
|
||||||
|
const filament = filaments.find((f) => f.id === id);
|
||||||
|
|
||||||
|
const [selectedColor, setSelectedColor] = useState(filament?.colorHex ?? '#E05533');
|
||||||
|
const [hexInput, setHexInput] = useState(filament?.colorHex ?? '#E05533');
|
||||||
|
const [selectedMaterial, setSelectedMaterial] = useState<Material>((filament?.material as Material) ?? 'PLA');
|
||||||
|
const [selectedPresetId, setSelectedPresetId] = useState<string | null>(filament?.spoolPresetId ?? systemPresets[0]?.id ?? null);
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
|
||||||
|
const { control, handleSubmit, watch, formState: { errors } } = useForm<FormData>({
|
||||||
|
resolver: zodResolver(schema),
|
||||||
|
defaultValues: {
|
||||||
|
brand: filament?.brand ?? '',
|
||||||
|
model: filament?.model ?? '',
|
||||||
|
totalWeightG: filament?.totalWeightG ?? 0,
|
||||||
|
tempHotendC: filament?.tempHotendC ?? 210,
|
||||||
|
tempBedC: filament?.tempBedC ?? 60,
|
||||||
|
flowFactorPct: filament?.flowFactorPct ?? 100,
|
||||||
|
notes: filament?.notes ?? '',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const totalWeight = watch('totalWeightG');
|
||||||
|
const selectedPreset = presets.find((p) => p.id === selectedPresetId);
|
||||||
|
const netWeight = selectedPreset && totalWeight
|
||||||
|
? calcNetWeight(Number(totalWeight), selectedPreset.spoolWeightG)
|
||||||
|
: 0;
|
||||||
|
const pct = Math.min(100, Math.round((netWeight / 1000) * 100));
|
||||||
|
|
||||||
|
if (!filament) {
|
||||||
|
return (
|
||||||
|
<SafeAreaView style={styles.safe}>
|
||||||
|
<View style={styles.notFound}>
|
||||||
|
<Text style={styles.notFoundText}>Filamento não encontrado</Text>
|
||||||
|
<TouchableOpacity onPress={() => router.back()}>
|
||||||
|
<Text style={styles.backLink}>Voltar</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
</SafeAreaView>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleDelete(): void {
|
||||||
|
Alert.alert(
|
||||||
|
'Excluir filamento',
|
||||||
|
`Deseja excluir "${filament!.brand}${filament!.model ? ` ${filament!.model}` : ''}"? Esta ação não pode ser desfeita.`,
|
||||||
|
[
|
||||||
|
{ text: 'Cancelar', style: 'cancel' },
|
||||||
|
{
|
||||||
|
text: 'Excluir',
|
||||||
|
style: 'destructive',
|
||||||
|
onPress: () => {
|
||||||
|
removeFilament(filament!.id);
|
||||||
|
router.replace('/(app)/(tabs)/inventory');
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function onSubmit(data: FormData): Promise<void> {
|
||||||
|
if (!selectedPresetId) {
|
||||||
|
Alert.alert('Atenção', 'Selecione um preset de carretel.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setIsLoading(true);
|
||||||
|
try {
|
||||||
|
// TODO: UpdateFilamentUseCase via container DI
|
||||||
|
const updated = {
|
||||||
|
...filament!,
|
||||||
|
brand: data.brand,
|
||||||
|
model: data.model ?? null,
|
||||||
|
colorHex: selectedColor,
|
||||||
|
material: selectedMaterial,
|
||||||
|
spoolPresetId: selectedPresetId,
|
||||||
|
totalWeightG: Number(data.totalWeightG),
|
||||||
|
netWeightG: netWeight,
|
||||||
|
tempHotendC: data.tempHotendC ?? null,
|
||||||
|
tempBedC: data.tempBedC ?? null,
|
||||||
|
flowFactorPct: data.flowFactorPct ?? null,
|
||||||
|
notes: data.notes ?? null,
|
||||||
|
updatedAt: new Date().toISOString(),
|
||||||
|
};
|
||||||
|
updateFilament(updated);
|
||||||
|
router.back();
|
||||||
|
} catch {
|
||||||
|
Alert.alert('Erro', 'Não foi possível salvar as alterações.');
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SafeAreaView style={styles.safe}>
|
||||||
|
<ScrollView showsVerticalScrollIndicator={false} keyboardShouldPersistTaps="handled">
|
||||||
|
{/* Header */}
|
||||||
|
<View style={styles.header}>
|
||||||
|
<TouchableOpacity onPress={() => router.back()}>
|
||||||
|
<Ionicons name="chevron-back" size={24} color={colors.textPrimary} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
<Text style={styles.headerTitle}>Editar Filamento</Text>
|
||||||
|
<TouchableOpacity onPress={handleDelete}>
|
||||||
|
<Ionicons name="trash-outline" size={20} color={colors.textPrimary} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={styles.content}>
|
||||||
|
{/* Cor */}
|
||||||
|
<Text style={styles.sectionLabel}>COR DO FILAMENTO</Text>
|
||||||
|
<Card style={styles.colorCard}>
|
||||||
|
<View style={styles.colorPreviewRow}>
|
||||||
|
<View style={[styles.colorSquare, { backgroundColor: selectedColor }]} />
|
||||||
|
<Text style={styles.hexValue}>{hexInput}</Text>
|
||||||
|
<TouchableOpacity><Ionicons name="pencil-outline" size={18} color={colors.textSecondary} /></TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
<View style={styles.colorPalette}>
|
||||||
|
{PRESET_COLORS.map((c) => (
|
||||||
|
<TouchableOpacity
|
||||||
|
key={c}
|
||||||
|
onPress={() => { setSelectedColor(c); setHexInput(c); }}
|
||||||
|
style={[styles.colorDot, { backgroundColor: c }, selectedColor === c && styles.colorDotActive]}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
<TouchableOpacity style={styles.colorAddBtn}>
|
||||||
|
<Ionicons name="add" size={18} color={colors.textSecondary} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Material */}
|
||||||
|
<Text style={styles.sectionLabel}>MATERIAL</Text>
|
||||||
|
<View style={styles.materialChips}>
|
||||||
|
{MATERIALS.map((m) => (
|
||||||
|
<TouchableOpacity
|
||||||
|
key={m}
|
||||||
|
onPress={() => setSelectedMaterial(m)}
|
||||||
|
style={[styles.chip, selectedMaterial === m && styles.chipActive]}
|
||||||
|
>
|
||||||
|
<Text style={[styles.chipText, selectedMaterial === m && styles.chipTextActive]}>{m}</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Marca e Modelo */}
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="brand"
|
||||||
|
render={({ field }) => (
|
||||||
|
<Input label="MARCA" placeholder="Elegoo" error={errors.brand?.message} onChangeText={field.onChange} value={field.value} />
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="model"
|
||||||
|
render={({ field }) => (
|
||||||
|
<Input label="MODELO (OPCIONAL)" placeholder="Ex: Rapid, Matte, Silk..." onChangeText={field.onChange} value={field.value ?? ''} />
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Parâmetros de impressão */}
|
||||||
|
<Text style={styles.sectionLabel}>PARÂMETROS DE IMPRESSÃO</Text>
|
||||||
|
<View style={styles.paramRow}>
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="tempHotendC"
|
||||||
|
render={({ field }) => (
|
||||||
|
<View style={styles.paramField}>
|
||||||
|
<Input
|
||||||
|
label="Hotend (°C)"
|
||||||
|
keyboardType="numeric"
|
||||||
|
onChangeText={field.onChange}
|
||||||
|
value={field.value?.toString() ?? ''}
|
||||||
|
leftIcon={<Ionicons name="thermometer-outline" size={16} color={colors.stockLow} />}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="tempBedC"
|
||||||
|
render={({ field }) => (
|
||||||
|
<View style={styles.paramField}>
|
||||||
|
<Input
|
||||||
|
label="Mesa (°C)"
|
||||||
|
keyboardType="numeric"
|
||||||
|
onChangeText={field.onChange}
|
||||||
|
value={field.value?.toString() ?? ''}
|
||||||
|
leftIcon={<Ionicons name="flag-outline" size={16} color={colors.stockMedium} />}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="flowFactorPct"
|
||||||
|
render={({ field }) => (
|
||||||
|
<View style={styles.paramField}>
|
||||||
|
<Input
|
||||||
|
label="Fluxo (%)"
|
||||||
|
keyboardType="numeric"
|
||||||
|
onChangeText={field.onChange}
|
||||||
|
value={field.value?.toString() ?? ''}
|
||||||
|
leftIcon={<Ionicons name="time-outline" size={16} color={colors.accent} />}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Preset */}
|
||||||
|
<View style={styles.presetHeader}>
|
||||||
|
<Text style={styles.sectionLabel}>PRESET DO CARRETEL</Text>
|
||||||
|
<TouchableOpacity onPress={() => router.push('/(app)/config/presets/new' as never)}>
|
||||||
|
<Text style={styles.addPresetLink}>+ Personalizado</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
{presets.map((p) => (
|
||||||
|
<TouchableOpacity
|
||||||
|
key={p.id}
|
||||||
|
onPress={() => setSelectedPresetId(p.id)}
|
||||||
|
style={[styles.presetItem, selectedPresetId === p.id && styles.presetItemActive]}
|
||||||
|
>
|
||||||
|
<Ionicons name="disc-outline" size={20} color={selectedPresetId === p.id ? colors.accent : colors.textSecondary} />
|
||||||
|
<View style={styles.presetInfo}>
|
||||||
|
<Text style={[styles.presetName, selectedPresetId === p.id && styles.presetNameActive]}>{p.name}</Text>
|
||||||
|
{selectedPresetId === p.id && <Text style={styles.presetSub}>Carretel: {p.spoolWeightG}g</Text>}
|
||||||
|
</View>
|
||||||
|
<Text style={styles.presetWeight}>{p.spoolWeightG}g</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{/* Calculadora */}
|
||||||
|
<Text style={styles.sectionLabel}>CALCULADORA DE PESO</Text>
|
||||||
|
<Text style={styles.calcLabel}>Peso Total na Balança (g)</Text>
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="totalWeightG"
|
||||||
|
render={({ field }) => (
|
||||||
|
<Card style={styles.calcInput}>
|
||||||
|
<Ionicons name="scale-outline" size={20} color={colors.textSecondary} />
|
||||||
|
<TextInput
|
||||||
|
style={styles.calcValue}
|
||||||
|
keyboardType="numeric"
|
||||||
|
placeholder="0"
|
||||||
|
placeholderTextColor={colors.textSecondary}
|
||||||
|
onChangeText={field.onChange}
|
||||||
|
value={field.value?.toString() ?? ''}
|
||||||
|
/>
|
||||||
|
<Text style={styles.calcUnit}>g</Text>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{netWeight > 0 && (
|
||||||
|
<Card style={styles.resultCard}>
|
||||||
|
<View style={styles.resultTop}>
|
||||||
|
<Text style={styles.resultLabel}>Filamento Disponível</Text>
|
||||||
|
<Text style={styles.resultCalc}>{totalWeight}g – {selectedPreset?.spoolWeightG}g</Text>
|
||||||
|
</View>
|
||||||
|
<View style={styles.resultBottom}>
|
||||||
|
<Text style={styles.resultValue}>{formatWeight(netWeight)}</Text>
|
||||||
|
<View style={styles.resultPctBadge}>
|
||||||
|
<View style={[styles.resultDot, { backgroundColor: colors.accent }]} />
|
||||||
|
<Text style={styles.resultPct}>{pct}%</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
</ScrollView>
|
||||||
|
|
||||||
|
{/* CTA fixo */}
|
||||||
|
<View style={styles.footer}>
|
||||||
|
<Button
|
||||||
|
label="Salvar Alterações"
|
||||||
|
leftIcon={<Ionicons name="save-outline" size={18} color={colors.bgBase} />}
|
||||||
|
onPress={handleSubmit(onSubmit)}
|
||||||
|
isLoading={isLoading}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</SafeAreaView>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
safe: { flex: 1, backgroundColor: colors.bgBase },
|
||||||
|
notFound: { flex: 1, alignItems: 'center', justifyContent: 'center', gap: spacing[4] },
|
||||||
|
notFoundText: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.base, color: colors.textSecondary },
|
||||||
|
backLink: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.base, color: colors.accent },
|
||||||
|
header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: spacing[5], paddingVertical: spacing[4] },
|
||||||
|
headerTitle: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.md, fontWeight: typography.fontWeight.semibold, color: colors.textPrimary },
|
||||||
|
content: { paddingHorizontal: spacing[5], gap: spacing[4], paddingBottom: spacing[10] },
|
||||||
|
sectionLabel: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.xs, fontWeight: typography.fontWeight.bold, color: colors.textSecondary, letterSpacing: 0.8, textTransform: 'uppercase' },
|
||||||
|
colorCard: { gap: spacing[3] },
|
||||||
|
colorPreviewRow: { flexDirection: 'row', alignItems: 'center', gap: spacing[3] },
|
||||||
|
colorSquare: { width: 40, height: 40, borderRadius: radius.sm },
|
||||||
|
hexValue: { flex: 1, fontFamily: typography.fontFamily.mono, fontSize: typography.fontSize.base, color: colors.textPrimary },
|
||||||
|
colorPalette: { flexDirection: 'row', flexWrap: 'wrap', gap: spacing[2] },
|
||||||
|
colorDot: { width: 32, height: 32, borderRadius: radius.full, borderWidth: 2, borderColor: 'transparent' },
|
||||||
|
colorDotActive: { borderColor: colors.accent },
|
||||||
|
colorAddBtn: { width: 32, height: 32, borderRadius: radius.full, backgroundColor: colors.bgHover, alignItems: 'center', justifyContent: 'center' },
|
||||||
|
materialChips: { flexDirection: 'row', flexWrap: 'wrap', gap: spacing[2] },
|
||||||
|
chip: { paddingHorizontal: spacing[4], paddingVertical: spacing[2], borderRadius: radius.full, backgroundColor: colors.bgSurface, borderWidth: 1, borderColor: colors.border },
|
||||||
|
chipActive: { backgroundColor: colors.accent, borderColor: colors.accent },
|
||||||
|
chipText: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.sm, fontWeight: typography.fontWeight.medium, color: colors.textSecondary },
|
||||||
|
chipTextActive: { color: colors.bgBase },
|
||||||
|
paramRow: { flexDirection: 'row', gap: spacing[3] },
|
||||||
|
paramField: { flex: 1 },
|
||||||
|
presetHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
|
||||||
|
addPresetLink: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.sm, color: colors.accent },
|
||||||
|
presetItem: { flexDirection: 'row', alignItems: 'center', gap: spacing[3], backgroundColor: colors.bgSurface, borderRadius: radius.lg, padding: spacing[4], borderWidth: 1, borderColor: colors.border },
|
||||||
|
presetItemActive: { borderColor: colors.accent },
|
||||||
|
presetInfo: { flex: 1 },
|
||||||
|
presetName: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.base, color: colors.textPrimary },
|
||||||
|
presetNameActive: { color: colors.accent },
|
||||||
|
presetSub: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.xs, color: colors.textSecondary },
|
||||||
|
presetWeight: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.sm, color: colors.textSecondary },
|
||||||
|
calcLabel: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.sm, color: colors.textSecondary },
|
||||||
|
calcInput: { flexDirection: 'row', alignItems: 'center', gap: spacing[3] },
|
||||||
|
calcValue: { flex: 1, fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize['2xl'], fontWeight: typography.fontWeight.bold, color: colors.textPrimary },
|
||||||
|
calcUnit: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.base, color: colors.textSecondary },
|
||||||
|
resultCard: { backgroundColor: colors.bgHover },
|
||||||
|
resultTop: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: spacing[2] },
|
||||||
|
resultLabel: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.sm, color: colors.textSecondary },
|
||||||
|
resultCalc: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.xs, color: colors.textSecondary },
|
||||||
|
resultBottom: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
|
||||||
|
resultValue: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize['2xl'], fontWeight: typography.fontWeight.bold, color: colors.accent },
|
||||||
|
resultPctBadge: { flexDirection: 'row', alignItems: 'center', gap: 6, backgroundColor: colors.accentMuted, paddingHorizontal: spacing[3], paddingVertical: 4, borderRadius: radius.sm },
|
||||||
|
resultDot: { width: 8, height: 8, borderRadius: radius.full },
|
||||||
|
resultPct: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.sm, fontWeight: typography.fontWeight.bold, color: colors.accent },
|
||||||
|
footer: { padding: spacing[5], borderTopWidth: 1, borderTopColor: colors.border, backgroundColor: colors.bgBase },
|
||||||
|
});
|
||||||
@@ -0,0 +1,278 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import {
|
||||||
|
View, Text, TouchableOpacity, StyleSheet, ScrollView,
|
||||||
|
} from 'react-native';
|
||||||
|
import { useRouter } from 'expo-router';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||||
|
import { useFilamentStore } from '@store/filamentStore';
|
||||||
|
import { colors, typography, spacing, radius } from '@shared/theme';
|
||||||
|
import { MATERIALS, type Material } from '@shared/constants';
|
||||||
|
import { Button } from '@presentation/components/ui/Button';
|
||||||
|
import type { FilamentFilter } from '@domain/Filament';
|
||||||
|
|
||||||
|
const BRANDS = ['Elegoo', 'Bambu Lab', 'Prusament', 'Polymaker', 'Creality'];
|
||||||
|
|
||||||
|
type StockLevel = 'all' | 'low' | 'medium';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Tela de Filtros — 17H-0
|
||||||
|
* Renderizada como modal / bottom sheet a partir da tela de Inventário.
|
||||||
|
*/
|
||||||
|
export default function FiltersScreen(): React.ReactElement {
|
||||||
|
const router = useRouter();
|
||||||
|
const { activeFilter, setFilter, resetFilter } = useFilamentStore();
|
||||||
|
|
||||||
|
const [selectedMaterials, setSelectedMaterials] = useState<Material[]>(
|
||||||
|
activeFilter.material ? [activeFilter.material] : [],
|
||||||
|
);
|
||||||
|
const [selectedBrands, setSelectedBrands] = useState<string[]>(
|
||||||
|
activeFilter.brand ? [activeFilter.brand] : [],
|
||||||
|
);
|
||||||
|
const [stockLevel, setStockLevel] = useState<StockLevel>(
|
||||||
|
activeFilter.stockLevel === 'low' ? 'low' : activeFilter.stockLevel === 'medium' ? 'medium' : 'all',
|
||||||
|
);
|
||||||
|
|
||||||
|
function toggleMaterial(m: Material): void {
|
||||||
|
setSelectedMaterials((prev) =>
|
||||||
|
prev.includes(m) ? prev.filter((x) => x !== m) : [...prev, m],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleBrand(b: string): void {
|
||||||
|
setSelectedBrands((prev) =>
|
||||||
|
prev.includes(b) ? prev.filter((x) => x !== b) : [...prev, b],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleApply(): void {
|
||||||
|
const filter: FilamentFilter = {
|
||||||
|
...(selectedMaterials.length === 1 ? { material: selectedMaterials[0] } : {}),
|
||||||
|
...(selectedBrands.length === 1 ? { brand: selectedBrands[0] } : {}),
|
||||||
|
...(stockLevel !== 'all' ? { stockLevel: stockLevel as FilamentFilter['stockLevel'] } : {}),
|
||||||
|
sortBy: 'created_at_desc',
|
||||||
|
page: 1,
|
||||||
|
perPage: 50,
|
||||||
|
};
|
||||||
|
setFilter(filter);
|
||||||
|
router.back();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleClear(): void {
|
||||||
|
setSelectedMaterials([]);
|
||||||
|
setSelectedBrands([]);
|
||||||
|
setStockLevel('all');
|
||||||
|
resetFilter();
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SafeAreaView style={styles.safe}>
|
||||||
|
{/* Dimmed background area (topo) */}
|
||||||
|
<TouchableOpacity style={styles.backdrop} onPress={() => router.back()} />
|
||||||
|
|
||||||
|
{/* Bottom sheet */}
|
||||||
|
<View style={styles.sheet}>
|
||||||
|
{/* Handle */}
|
||||||
|
<View style={styles.handle} />
|
||||||
|
|
||||||
|
{/* Header */}
|
||||||
|
<View style={styles.sheetHeader}>
|
||||||
|
<Text style={styles.sheetTitle}>Filtros</Text>
|
||||||
|
<TouchableOpacity onPress={handleClear}>
|
||||||
|
<Text style={styles.clearText}>Limpar tudo</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<ScrollView showsVerticalScrollIndicator={false} style={styles.scroll}>
|
||||||
|
{/* Material */}
|
||||||
|
<Text style={styles.sectionLabel}>MATERIAL</Text>
|
||||||
|
<View style={styles.chips}>
|
||||||
|
{MATERIALS.map((m) => (
|
||||||
|
<TouchableOpacity
|
||||||
|
key={m}
|
||||||
|
onPress={() => toggleMaterial(m)}
|
||||||
|
style={[styles.chip, selectedMaterials.includes(m) && styles.chipActive]}
|
||||||
|
>
|
||||||
|
<Text style={[styles.chipText, selectedMaterials.includes(m) && styles.chipTextActive]}>
|
||||||
|
{m}
|
||||||
|
</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Marca */}
|
||||||
|
<Text style={[styles.sectionLabel, { marginTop: spacing[5] }]}>MARCA</Text>
|
||||||
|
<View style={styles.chips}>
|
||||||
|
{BRANDS.map((b) => (
|
||||||
|
<TouchableOpacity
|
||||||
|
key={b}
|
||||||
|
onPress={() => toggleBrand(b)}
|
||||||
|
style={[styles.chip, selectedBrands.includes(b) && styles.chipActive]}
|
||||||
|
>
|
||||||
|
<Text style={[styles.chipText, selectedBrands.includes(b) && styles.chipTextActive]}>
|
||||||
|
{b}
|
||||||
|
</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Nível de Estoque */}
|
||||||
|
<Text style={[styles.sectionLabel, { marginTop: spacing[5] }]}>NÍVEL DE ESTOQUE</Text>
|
||||||
|
<View style={styles.radioGroup}>
|
||||||
|
<TouchableOpacity
|
||||||
|
style={[styles.radioItem, stockLevel === 'all' && styles.radioItemActive]}
|
||||||
|
onPress={() => setStockLevel('all')}
|
||||||
|
>
|
||||||
|
<Text style={styles.radioLabel}>Todos</Text>
|
||||||
|
<View style={[styles.radioCircle, stockLevel === 'all' && styles.radioCircleActive]}>
|
||||||
|
{stockLevel === 'all' && <Ionicons name="checkmark" size={14} color={colors.bgBase} />}
|
||||||
|
</View>
|
||||||
|
</TouchableOpacity>
|
||||||
|
|
||||||
|
<TouchableOpacity
|
||||||
|
style={[styles.radioItem, stockLevel === 'medium' && styles.radioItemActive]}
|
||||||
|
onPress={() => setStockLevel('medium')}
|
||||||
|
>
|
||||||
|
<View style={styles.radioLabelRow}>
|
||||||
|
<Text style={styles.radioLabel}>Estoque baixo</Text>
|
||||||
|
<View style={styles.radioBadge}>
|
||||||
|
<Text style={styles.radioBadgeText}>abaixo de 25%</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View style={[styles.radioCircle, stockLevel === 'medium' && styles.radioCircleActive]}>
|
||||||
|
{stockLevel === 'medium' && <Ionicons name="checkmark" size={14} color={colors.bgBase} />}
|
||||||
|
</View>
|
||||||
|
</TouchableOpacity>
|
||||||
|
|
||||||
|
<TouchableOpacity
|
||||||
|
style={[styles.radioItem, stockLevel === 'low' && styles.radioItemActive]}
|
||||||
|
onPress={() => setStockLevel('low')}
|
||||||
|
>
|
||||||
|
<View style={styles.radioLabelRow}>
|
||||||
|
<Text style={styles.radioLabel}>Quase vazio</Text>
|
||||||
|
<View style={[styles.radioBadge, styles.radioBadgeCritical]}>
|
||||||
|
<Text style={[styles.radioBadgeText, styles.radioBadgeTextCritical]}>abaixo de 10%</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View style={[styles.radioCircle, stockLevel === 'low' && styles.radioCircleActive]}>
|
||||||
|
{stockLevel === 'low' && <Ionicons name="checkmark" size={14} color={colors.bgBase} />}
|
||||||
|
</View>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
</ScrollView>
|
||||||
|
|
||||||
|
{/* CTA */}
|
||||||
|
<View style={styles.footer}>
|
||||||
|
<Button label="Aplicar Filtros" onPress={handleApply} />
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</SafeAreaView>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
safe: { flex: 1, backgroundColor: 'transparent' },
|
||||||
|
backdrop: { flex: 1, backgroundColor: colors.overlay },
|
||||||
|
sheet: {
|
||||||
|
backgroundColor: colors.bgSurface,
|
||||||
|
borderTopLeftRadius: radius.xl,
|
||||||
|
borderTopRightRadius: radius.xl,
|
||||||
|
paddingBottom: spacing[5],
|
||||||
|
},
|
||||||
|
handle: {
|
||||||
|
width: 40,
|
||||||
|
height: 4,
|
||||||
|
backgroundColor: colors.border,
|
||||||
|
borderRadius: radius.full,
|
||||||
|
alignSelf: 'center',
|
||||||
|
marginTop: spacing[3],
|
||||||
|
marginBottom: spacing[2],
|
||||||
|
},
|
||||||
|
sheetHeader: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
paddingHorizontal: spacing[5],
|
||||||
|
paddingVertical: spacing[4],
|
||||||
|
},
|
||||||
|
sheetTitle: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.lg,
|
||||||
|
fontWeight: typography.fontWeight.bold,
|
||||||
|
color: colors.textPrimary,
|
||||||
|
},
|
||||||
|
clearText: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.sm,
|
||||||
|
color: colors.accent,
|
||||||
|
},
|
||||||
|
scroll: { paddingHorizontal: spacing[5], maxHeight: 440 },
|
||||||
|
sectionLabel: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.xs,
|
||||||
|
fontWeight: typography.fontWeight.bold,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
letterSpacing: 0.8,
|
||||||
|
textTransform: 'uppercase',
|
||||||
|
marginBottom: spacing[3],
|
||||||
|
},
|
||||||
|
chips: { flexDirection: 'row', flexWrap: 'wrap', gap: spacing[2] },
|
||||||
|
chip: {
|
||||||
|
paddingHorizontal: spacing[4],
|
||||||
|
paddingVertical: spacing[2],
|
||||||
|
borderRadius: radius.full,
|
||||||
|
backgroundColor: colors.bgHover,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: colors.border,
|
||||||
|
},
|
||||||
|
chipActive: { backgroundColor: colors.accent, borderColor: colors.accent },
|
||||||
|
chipText: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.sm,
|
||||||
|
fontWeight: typography.fontWeight.medium,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
},
|
||||||
|
chipTextActive: { color: colors.bgBase },
|
||||||
|
radioGroup: { gap: spacing[2], paddingBottom: spacing[4] },
|
||||||
|
radioItem: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
backgroundColor: colors.bgHover,
|
||||||
|
borderRadius: radius.lg,
|
||||||
|
padding: spacing[4],
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: colors.border,
|
||||||
|
},
|
||||||
|
radioItemActive: { borderColor: colors.accent },
|
||||||
|
radioLabelRow: { flexDirection: 'row', alignItems: 'center', gap: spacing[2] },
|
||||||
|
radioLabel: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.base,
|
||||||
|
color: colors.textPrimary,
|
||||||
|
},
|
||||||
|
radioCircle: {
|
||||||
|
width: 24,
|
||||||
|
height: 24,
|
||||||
|
borderRadius: radius.full,
|
||||||
|
borderWidth: 2,
|
||||||
|
borderColor: colors.border,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
radioCircleActive: { backgroundColor: colors.accent, borderColor: colors.accent },
|
||||||
|
radioBadge: {
|
||||||
|
backgroundColor: colors.accentMuted,
|
||||||
|
paddingHorizontal: spacing[2],
|
||||||
|
paddingVertical: 2,
|
||||||
|
borderRadius: radius.sm,
|
||||||
|
},
|
||||||
|
radioBadgeCritical: { backgroundColor: 'rgba(255,107,107,0.15)' },
|
||||||
|
radioBadgeText: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.xs,
|
||||||
|
color: colors.accent,
|
||||||
|
},
|
||||||
|
radioBadgeTextCritical: { color: colors.stockLow },
|
||||||
|
footer: { paddingHorizontal: spacing[5], paddingTop: spacing[3] },
|
||||||
|
});
|
||||||
@@ -0,0 +1,312 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import {
|
||||||
|
View, Text, ScrollView, TouchableOpacity, TextInput, StyleSheet, Alert,
|
||||||
|
} from 'react-native';
|
||||||
|
import { useRouter } from 'expo-router';
|
||||||
|
import { useForm, Controller } from 'react-hook-form';
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import { z } from 'zod';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||||
|
import { usePresetStore } from '@store/presetStore';
|
||||||
|
import { useFilamentStore } from '@store/filamentStore';
|
||||||
|
import { Input } from '@presentation/components/ui/Input';
|
||||||
|
import { Button } from '@presentation/components/ui/Button';
|
||||||
|
import { Card } from '@presentation/components/ui/Card';
|
||||||
|
import { calcNetWeight } from '@domain/Filament';
|
||||||
|
import { colors, typography, spacing, radius } from '@shared/theme';
|
||||||
|
import { MATERIALS, type Material } from '@shared/constants';
|
||||||
|
import { formatWeight } from '@shared/utils/filament';
|
||||||
|
|
||||||
|
const schema = z.object({
|
||||||
|
brand: z.string().min(1, 'Marca obrigatória'),
|
||||||
|
model: z.string().optional(),
|
||||||
|
totalWeightG: z.coerce.number().min(1, 'Informe o peso total'),
|
||||||
|
tempHotendC: z.coerce.number().optional(),
|
||||||
|
tempBedC: z.coerce.number().optional(),
|
||||||
|
flowFactorPct: z.coerce.number().optional(),
|
||||||
|
notes: z.string().optional(),
|
||||||
|
});
|
||||||
|
|
||||||
|
type FormData = z.infer<typeof schema>;
|
||||||
|
|
||||||
|
const PRESET_COLORS = ['#E05533', '#2563EB', '#FFFFFF', '#1E1B18', '#22C55E', '#EAB308', '#EC4899', '#A855F7', '#F97316'];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Tela de Cadastro de Filamento — 2X-0
|
||||||
|
*/
|
||||||
|
export default function NewFilamentScreen(): React.ReactElement {
|
||||||
|
const router = useRouter();
|
||||||
|
const { presets, systemPresets } = usePresetStore();
|
||||||
|
const { addFilament } = useFilamentStore();
|
||||||
|
|
||||||
|
const [selectedColor, setSelectedColor] = useState('#E05533');
|
||||||
|
const [hexInput, setHexInput] = useState('#E05533');
|
||||||
|
const [selectedMaterial, setSelectedMaterial] = useState<Material>('PLA');
|
||||||
|
const [selectedPresetId, setSelectedPresetId] = useState<string | null>(systemPresets[0]?.id ?? null);
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
|
||||||
|
const { control, handleSubmit, watch, formState: { errors } } = useForm<FormData>({
|
||||||
|
resolver: zodResolver(schema),
|
||||||
|
defaultValues: { brand: '', model: '', totalWeightG: 0, tempHotendC: 210, tempBedC: 60, flowFactorPct: 100 },
|
||||||
|
});
|
||||||
|
|
||||||
|
const totalWeight = watch('totalWeightG');
|
||||||
|
const selectedPreset = presets.find((p) => p.id === selectedPresetId);
|
||||||
|
const netWeight = selectedPreset && totalWeight
|
||||||
|
? calcNetWeight(Number(totalWeight), selectedPreset.spoolWeightG)
|
||||||
|
: 0;
|
||||||
|
const pct = Math.min(100, Math.round((netWeight / 1000) * 100));
|
||||||
|
|
||||||
|
async function onSubmit(data: FormData): Promise<void> {
|
||||||
|
if (!selectedPresetId) {
|
||||||
|
Alert.alert('Atenção', 'Selecione um preset de carretel.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setIsLoading(true);
|
||||||
|
try {
|
||||||
|
// TODO: CreateFilamentUseCase via container DI
|
||||||
|
console.log('create filament', { ...data, material: selectedMaterial, colorHex: selectedColor, spoolPresetId: selectedPresetId });
|
||||||
|
router.back();
|
||||||
|
} catch {
|
||||||
|
Alert.alert('Erro', 'Não foi possível salvar o filamento.');
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SafeAreaView style={styles.safe}>
|
||||||
|
<ScrollView showsVerticalScrollIndicator={false} keyboardShouldPersistTaps="handled">
|
||||||
|
{/* Header */}
|
||||||
|
<View style={styles.header}>
|
||||||
|
<TouchableOpacity onPress={() => router.back()}>
|
||||||
|
<Ionicons name="chevron-back" size={24} color={colors.textPrimary} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
<Text style={styles.headerTitle}>Novo Filamento</Text>
|
||||||
|
<View style={{ width: 24 }} />
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={styles.content}>
|
||||||
|
{/* Cor */}
|
||||||
|
<Text style={styles.sectionLabel}>COR DO FILAMENTO</Text>
|
||||||
|
<Card style={styles.colorCard}>
|
||||||
|
<View style={styles.colorPreviewRow}>
|
||||||
|
<View style={[styles.colorSquare, { backgroundColor: selectedColor }]} />
|
||||||
|
<Text style={styles.hexValue}>{hexInput}</Text>
|
||||||
|
<TouchableOpacity><Ionicons name="pencil-outline" size={18} color={colors.textSecondary} /></TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
<View style={styles.colorPalette}>
|
||||||
|
{PRESET_COLORS.map((c) => (
|
||||||
|
<TouchableOpacity
|
||||||
|
key={c}
|
||||||
|
onPress={() => { setSelectedColor(c); setHexInput(c); }}
|
||||||
|
style={[styles.colorDot, { backgroundColor: c }, selectedColor === c && styles.colorDotActive]}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
<TouchableOpacity style={styles.colorAddBtn}>
|
||||||
|
<Ionicons name="add" size={18} color={colors.textSecondary} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Material */}
|
||||||
|
<Text style={styles.sectionLabel}>MATERIAL</Text>
|
||||||
|
<View style={styles.materialChips}>
|
||||||
|
{MATERIALS.map((m) => (
|
||||||
|
<TouchableOpacity
|
||||||
|
key={m}
|
||||||
|
onPress={() => setSelectedMaterial(m)}
|
||||||
|
style={[styles.chip, selectedMaterial === m && styles.chipActive]}
|
||||||
|
>
|
||||||
|
<Text style={[styles.chipText, selectedMaterial === m && styles.chipTextActive]}>{m}</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Marca e Modelo */}
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="brand"
|
||||||
|
render={({ field }) => (
|
||||||
|
<Input label="MARCA" placeholder="Elegoo" error={errors.brand?.message} onChangeText={field.onChange} value={field.value} />
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="model"
|
||||||
|
render={({ field }) => (
|
||||||
|
<Input label="MODELO (OPCIONAL)" placeholder="Ex: Rapid, Matte, Silk..." onChangeText={field.onChange} value={field.value ?? ''} />
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Parâmetros de impressão */}
|
||||||
|
<Text style={styles.sectionLabel}>PARÂMETROS DE IMPRESSÃO</Text>
|
||||||
|
<View style={styles.paramRow}>
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="tempHotendC"
|
||||||
|
render={({ field }) => (
|
||||||
|
<View style={styles.paramField}>
|
||||||
|
<Input
|
||||||
|
label="Hotend (°C)"
|
||||||
|
keyboardType="numeric"
|
||||||
|
onChangeText={field.onChange}
|
||||||
|
value={field.value?.toString() ?? ''}
|
||||||
|
leftIcon={<Ionicons name="thermometer-outline" size={16} color={colors.stockLow} />}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="tempBedC"
|
||||||
|
render={({ field }) => (
|
||||||
|
<View style={styles.paramField}>
|
||||||
|
<Input
|
||||||
|
label="Mesa (°C)"
|
||||||
|
keyboardType="numeric"
|
||||||
|
onChangeText={field.onChange}
|
||||||
|
value={field.value?.toString() ?? ''}
|
||||||
|
leftIcon={<Ionicons name="flag-outline" size={16} color={colors.stockMedium} />}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="flowFactorPct"
|
||||||
|
render={({ field }) => (
|
||||||
|
<View style={styles.paramField}>
|
||||||
|
<Input
|
||||||
|
label="Fluxo (%)"
|
||||||
|
keyboardType="numeric"
|
||||||
|
onChangeText={field.onChange}
|
||||||
|
value={field.value?.toString() ?? ''}
|
||||||
|
leftIcon={<Ionicons name="time-outline" size={16} color={colors.accent} />}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Preset */}
|
||||||
|
<View style={styles.presetHeader}>
|
||||||
|
<Text style={styles.sectionLabel}>PRESET DO CARRETEL</Text>
|
||||||
|
<TouchableOpacity onPress={() => router.push('/(app)/config/presets/new')}>
|
||||||
|
<Text style={styles.addPresetLink}>+ Personalizado</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
{presets.map((p) => (
|
||||||
|
<TouchableOpacity
|
||||||
|
key={p.id}
|
||||||
|
onPress={() => setSelectedPresetId(p.id)}
|
||||||
|
style={[styles.presetItem, selectedPresetId === p.id && styles.presetItemActive]}
|
||||||
|
>
|
||||||
|
<Ionicons name="disc-outline" size={20} color={selectedPresetId === p.id ? colors.accent : colors.textSecondary} />
|
||||||
|
<View style={styles.presetInfo}>
|
||||||
|
<Text style={[styles.presetName, selectedPresetId === p.id && styles.presetNameActive]}>{p.name}</Text>
|
||||||
|
{selectedPresetId === p.id && <Text style={styles.presetSub}>Carretel: {p.spoolWeightG}g</Text>}
|
||||||
|
</View>
|
||||||
|
<Text style={styles.presetWeight}>{p.spoolWeightG}g</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{/* Calculadora */}
|
||||||
|
<Text style={styles.sectionLabel}>CALCULADORA DE PESO</Text>
|
||||||
|
<Text style={styles.calcLabel}>Peso Total na Balança (g)</Text>
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="totalWeightG"
|
||||||
|
render={({ field }) => (
|
||||||
|
<Card style={styles.calcInput}>
|
||||||
|
<Ionicons name="scale-outline" size={20} color={colors.textSecondary} />
|
||||||
|
<TextInput
|
||||||
|
style={styles.calcValue}
|
||||||
|
keyboardType="numeric"
|
||||||
|
placeholder="0"
|
||||||
|
placeholderTextColor={colors.textSecondary}
|
||||||
|
onChangeText={field.onChange}
|
||||||
|
value={field.value?.toString() ?? ''}
|
||||||
|
/>
|
||||||
|
<Text style={styles.calcUnit}>g</Text>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{netWeight > 0 && (
|
||||||
|
<Card style={styles.resultCard}>
|
||||||
|
<View style={styles.resultTop}>
|
||||||
|
<Text style={styles.resultLabel}>Filamento Disponível</Text>
|
||||||
|
<Text style={styles.resultCalc}>{totalWeight}g – {selectedPreset?.spoolWeightG}g</Text>
|
||||||
|
</View>
|
||||||
|
<View style={styles.resultBottom}>
|
||||||
|
<Text style={styles.resultValue}>{formatWeight(netWeight)}</Text>
|
||||||
|
<View style={styles.resultPctBadge}>
|
||||||
|
<View style={[styles.resultDot, { backgroundColor: colors.accent }]} />
|
||||||
|
<Text style={styles.resultPct}>{pct}%</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
</ScrollView>
|
||||||
|
|
||||||
|
{/* CTA fixo */}
|
||||||
|
<View style={styles.footer}>
|
||||||
|
<Button
|
||||||
|
label="Salvar Filamento"
|
||||||
|
leftIcon={<Ionicons name="save-outline" size={18} color={colors.bgBase} />}
|
||||||
|
onPress={handleSubmit(onSubmit)}
|
||||||
|
isLoading={isLoading}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</SafeAreaView>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
safe: { flex: 1, backgroundColor: colors.bgBase },
|
||||||
|
header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: spacing[5], paddingVertical: spacing[4] },
|
||||||
|
headerTitle: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.md, fontWeight: typography.fontWeight.semibold, color: colors.textPrimary },
|
||||||
|
content: { paddingHorizontal: spacing[5], gap: spacing[4], paddingBottom: spacing[10] },
|
||||||
|
sectionLabel: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.xs, fontWeight: typography.fontWeight.bold, color: colors.textSecondary, letterSpacing: 0.8, textTransform: 'uppercase' },
|
||||||
|
colorCard: { gap: spacing[3] },
|
||||||
|
colorPreviewRow: { flexDirection: 'row', alignItems: 'center', gap: spacing[3] },
|
||||||
|
colorSquare: { width: 40, height: 40, borderRadius: radius.sm },
|
||||||
|
hexValue: { flex: 1, fontFamily: typography.fontFamily.mono, fontSize: typography.fontSize.base, color: colors.textPrimary },
|
||||||
|
colorPalette: { flexDirection: 'row', flexWrap: 'wrap', gap: spacing[2] },
|
||||||
|
colorDot: { width: 32, height: 32, borderRadius: radius.full, borderWidth: 2, borderColor: 'transparent' },
|
||||||
|
colorDotActive: { borderColor: colors.accent },
|
||||||
|
colorAddBtn: { width: 32, height: 32, borderRadius: radius.full, backgroundColor: colors.bgHover, alignItems: 'center', justifyContent: 'center' },
|
||||||
|
materialChips: { flexDirection: 'row', flexWrap: 'wrap', gap: spacing[2] },
|
||||||
|
chip: { paddingHorizontal: spacing[4], paddingVertical: spacing[2], borderRadius: radius.full, backgroundColor: colors.bgSurface, borderWidth: 1, borderColor: colors.border },
|
||||||
|
chipActive: { backgroundColor: colors.accent, borderColor: colors.accent },
|
||||||
|
chipText: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.sm, fontWeight: typography.fontWeight.medium, color: colors.textSecondary },
|
||||||
|
chipTextActive: { color: colors.bgBase },
|
||||||
|
paramRow: { flexDirection: 'row', gap: spacing[3] },
|
||||||
|
paramField: { flex: 1 },
|
||||||
|
presetHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
|
||||||
|
addPresetLink: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.sm, color: colors.accent },
|
||||||
|
presetItem: { flexDirection: 'row', alignItems: 'center', gap: spacing[3], backgroundColor: colors.bgSurface, borderRadius: radius.lg, padding: spacing[4], borderWidth: 1, borderColor: colors.border },
|
||||||
|
presetItemActive: { borderColor: colors.accent },
|
||||||
|
presetInfo: { flex: 1 },
|
||||||
|
presetName: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.base, color: colors.textPrimary },
|
||||||
|
presetNameActive: { color: colors.accent },
|
||||||
|
presetSub: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.xs, color: colors.textSecondary },
|
||||||
|
presetWeight: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.sm, color: colors.textSecondary },
|
||||||
|
calcLabel: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.sm, color: colors.textSecondary },
|
||||||
|
calcInput: { flexDirection: 'row', alignItems: 'center', gap: spacing[3] },
|
||||||
|
calcValue: { flex: 1, fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize['2xl'], fontWeight: typography.fontWeight.bold, color: colors.textPrimary },
|
||||||
|
calcUnit: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.base, color: colors.textSecondary },
|
||||||
|
resultCard: { backgroundColor: colors.bgHover },
|
||||||
|
resultTop: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: spacing[2] },
|
||||||
|
resultLabel: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.sm, color: colors.textSecondary },
|
||||||
|
resultCalc: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.xs, color: colors.textSecondary },
|
||||||
|
resultBottom: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
|
||||||
|
resultValue: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize['2xl'], fontWeight: typography.fontWeight.bold, color: colors.accent },
|
||||||
|
resultPctBadge: { flexDirection: 'row', alignItems: 'center', gap: 6, backgroundColor: colors.accentMuted, paddingHorizontal: spacing[3], paddingVertical: 4, borderRadius: radius.sm },
|
||||||
|
resultDot: { width: 8, height: 8, borderRadius: radius.full },
|
||||||
|
resultPct: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.sm, fontWeight: typography.fontWeight.bold, color: colors.accent },
|
||||||
|
footer: { padding: spacing[5], borderTopWidth: 1, borderTopColor: colors.border, backgroundColor: colors.bgBase },
|
||||||
|
});
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Stack, Redirect } from 'expo-router';
|
||||||
|
import { useAuthStore } from '@store/authStore';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Layout do grupo de rotas de autenticação: (auth).
|
||||||
|
* Se o usuário já estiver autenticado, redireciona para o app.
|
||||||
|
*/
|
||||||
|
export default function AuthLayout(): React.ReactElement {
|
||||||
|
const { isAuthenticated } = useAuthStore();
|
||||||
|
|
||||||
|
if (isAuthenticated) {
|
||||||
|
return <Redirect href="/(app)/(tabs)/home" />;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Stack screenOptions={{ headerShown: false, contentStyle: { backgroundColor: '#1E1B18' } }} />
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,123 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { View, Text, StyleSheet, Alert } from 'react-native';
|
||||||
|
import { useForm, Controller } from 'react-hook-form';
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import { z } from 'zod';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import { Screen } from '@presentation/components/layout/Screen';
|
||||||
|
import { Header } from '@presentation/components/layout/Header';
|
||||||
|
import { Input } from '@presentation/components/ui/Input';
|
||||||
|
import { Button } from '@presentation/components/ui/Button';
|
||||||
|
import { colors, typography, spacing } from '@shared/theme';
|
||||||
|
|
||||||
|
const schema = z.object({
|
||||||
|
email: z.string().email('E-mail inválido'),
|
||||||
|
});
|
||||||
|
|
||||||
|
type FormData = z.infer<typeof schema>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Tela de Recuperação de Senha — L2-0
|
||||||
|
*/
|
||||||
|
export default function ForgotPasswordScreen(): React.ReactElement {
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
const [sent, setSent] = useState(false);
|
||||||
|
|
||||||
|
const { control, handleSubmit, formState: { errors } } = useForm<FormData>({
|
||||||
|
resolver: zodResolver(schema),
|
||||||
|
defaultValues: { email: '' },
|
||||||
|
});
|
||||||
|
|
||||||
|
async function onSubmit(data: FormData): Promise<void> {
|
||||||
|
setIsLoading(true);
|
||||||
|
try {
|
||||||
|
// TODO: ForgotPasswordUseCase
|
||||||
|
console.log('forgot-password', data);
|
||||||
|
setSent(true);
|
||||||
|
} catch {
|
||||||
|
Alert.alert('Erro', 'Não foi possível enviar o e-mail.');
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Screen keyboardAvoiding>
|
||||||
|
<Header title="Recuperar senha" showBack />
|
||||||
|
|
||||||
|
<View style={styles.content}>
|
||||||
|
{sent ? (
|
||||||
|
<View style={styles.successCard}>
|
||||||
|
<Ionicons name="mail-open-outline" size={48} color={colors.accent} />
|
||||||
|
<Text style={styles.successTitle}>E-mail enviado!</Text>
|
||||||
|
<Text style={styles.successText}>
|
||||||
|
Verifique sua caixa de entrada e siga as instruções para redefinir sua senha.
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Text style={styles.description}>
|
||||||
|
Informe seu e-mail cadastrado. Enviaremos um link para você redefinir sua senha.
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="email"
|
||||||
|
render={({ field }) => (
|
||||||
|
<Input
|
||||||
|
label="E-MAIL"
|
||||||
|
placeholder="seu@email.com"
|
||||||
|
keyboardType="email-address"
|
||||||
|
autoComplete="email"
|
||||||
|
leftIcon={<Ionicons name="mail-outline" size={18} color={colors.textSecondary} />}
|
||||||
|
error={errors.email?.message}
|
||||||
|
onChangeText={field.onChange}
|
||||||
|
value={field.value}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Button label="Enviar link" onPress={handleSubmit(onSubmit)} isLoading={isLoading} style={styles.cta} />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
</Screen>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
content: {
|
||||||
|
flex: 1,
|
||||||
|
paddingTop: spacing[6],
|
||||||
|
gap: spacing[5],
|
||||||
|
},
|
||||||
|
description: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.base,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
lineHeight: typography.fontSize.base * 1.6,
|
||||||
|
},
|
||||||
|
cta: {
|
||||||
|
marginTop: spacing[2],
|
||||||
|
},
|
||||||
|
successCard: {
|
||||||
|
flex: 1,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
gap: spacing[4],
|
||||||
|
paddingHorizontal: spacing[4],
|
||||||
|
},
|
||||||
|
successTitle: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.xl,
|
||||||
|
fontWeight: typography.fontWeight.bold,
|
||||||
|
color: colors.textPrimary,
|
||||||
|
},
|
||||||
|
successText: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.base,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
textAlign: 'center',
|
||||||
|
lineHeight: typography.fontSize.base * 1.6,
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -0,0 +1,213 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { View, Text, Image, StyleSheet, TouchableOpacity, Alert } from 'react-native';
|
||||||
|
import { Link, useRouter } from 'expo-router';
|
||||||
|
import { useForm, Controller } from 'react-hook-form';
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import { z } from 'zod';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import { Screen } from '@presentation/components/layout/Screen';
|
||||||
|
import { Input } from '@presentation/components/ui/Input';
|
||||||
|
import { Button } from '@presentation/components/ui/Button';
|
||||||
|
import { colors, typography, spacing } from '@shared/theme';
|
||||||
|
|
||||||
|
const schema = z.object({
|
||||||
|
email: z.string().email('E-mail inválido'),
|
||||||
|
password: z.string().min(1, 'Senha obrigatória'),
|
||||||
|
});
|
||||||
|
|
||||||
|
type FormData = z.infer<typeof schema>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Tela de Login — G3-0
|
||||||
|
* E-mail + Senha, "Esqueci minha senha" e OAuth Google.
|
||||||
|
*/
|
||||||
|
export default function LoginScreen(): React.ReactElement {
|
||||||
|
const router = useRouter();
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
const [isGoogleLoading, setIsGoogleLoading] = useState(false);
|
||||||
|
|
||||||
|
const { control, handleSubmit, formState: { errors } } = useForm<FormData>({
|
||||||
|
resolver: zodResolver(schema),
|
||||||
|
defaultValues: { email: '', password: '' },
|
||||||
|
});
|
||||||
|
|
||||||
|
async function onSubmit(data: FormData): Promise<void> {
|
||||||
|
setIsLoading(true);
|
||||||
|
try {
|
||||||
|
// TODO: injetar LoginUseCase via container de DI
|
||||||
|
console.log('login', data);
|
||||||
|
router.replace('/(app)/(tabs)/home');
|
||||||
|
} catch (err) {
|
||||||
|
Alert.alert('Erro', 'E-mail ou senha incorretos.');
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function onGoogleLogin(): Promise<void> {
|
||||||
|
setIsGoogleLoading(true);
|
||||||
|
try {
|
||||||
|
// TODO: Google Sign-In + GoogleLoginUseCase
|
||||||
|
router.replace('/(app)/(tabs)/home');
|
||||||
|
} catch {
|
||||||
|
Alert.alert('Erro', 'Não foi possível entrar com o Google.');
|
||||||
|
} finally {
|
||||||
|
setIsGoogleLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Screen scrollable keyboardAvoiding>
|
||||||
|
{/* Logo */}
|
||||||
|
<View style={styles.hero}>
|
||||||
|
<View style={styles.logoContainer}>
|
||||||
|
<Ionicons name="paw" size={48} color={colors.accent} />
|
||||||
|
</View>
|
||||||
|
<Text style={styles.appName}>MeowSpool</Text>
|
||||||
|
<Text style={styles.tagline}>Gerencie seus filamentos com precisão.</Text>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Formulário */}
|
||||||
|
<View style={styles.form}>
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="email"
|
||||||
|
render={({ field }) => (
|
||||||
|
<Input
|
||||||
|
label="E-MAIL"
|
||||||
|
placeholder="seu@email.com"
|
||||||
|
keyboardType="email-address"
|
||||||
|
autoComplete="email"
|
||||||
|
leftIcon={<Ionicons name="mail-outline" size={18} color={colors.textSecondary} />}
|
||||||
|
error={errors.email?.message}
|
||||||
|
onChangeText={field.onChange}
|
||||||
|
value={field.value}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="password"
|
||||||
|
render={({ field }) => (
|
||||||
|
<Input
|
||||||
|
label="SENHA"
|
||||||
|
placeholder="••••••••"
|
||||||
|
isPassword
|
||||||
|
leftIcon={<Ionicons name="lock-closed-outline" size={18} color={colors.textSecondary} />}
|
||||||
|
error={errors.password?.message}
|
||||||
|
onChangeText={field.onChange}
|
||||||
|
value={field.value}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<TouchableOpacity onPress={() => router.push('/(auth)/forgot-password')} style={styles.forgotRow}>
|
||||||
|
<Text style={styles.forgotText}>Esqueci minha senha</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
|
||||||
|
<Button label="Entrar" onPress={handleSubmit(onSubmit)} isLoading={isLoading} />
|
||||||
|
|
||||||
|
{/* Divisor */}
|
||||||
|
<View style={styles.divider}>
|
||||||
|
<View style={styles.dividerLine} />
|
||||||
|
<Text style={styles.dividerText}>ou continue com</Text>
|
||||||
|
<View style={styles.dividerLine} />
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Google */}
|
||||||
|
<Button
|
||||||
|
label="Entrar com Google"
|
||||||
|
variant="secondary"
|
||||||
|
leftIcon={<Ionicons name="logo-google" size={18} color={colors.textPrimary} />}
|
||||||
|
onPress={onGoogleLogin}
|
||||||
|
isLoading={isGoogleLoading}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Criar conta */}
|
||||||
|
<View style={styles.footer}>
|
||||||
|
<Text style={styles.footerText}>Não tem uma conta? </Text>
|
||||||
|
<Link href="/(auth)/register" asChild>
|
||||||
|
<TouchableOpacity>
|
||||||
|
<Text style={styles.footerLink}>Criar conta</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</Link>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</Screen>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
hero: {
|
||||||
|
alignItems: 'center',
|
||||||
|
paddingTop: spacing[12],
|
||||||
|
paddingBottom: spacing[10],
|
||||||
|
gap: spacing[2],
|
||||||
|
},
|
||||||
|
logoContainer: {
|
||||||
|
width: 80,
|
||||||
|
height: 80,
|
||||||
|
borderRadius: 20,
|
||||||
|
backgroundColor: colors.bgSurface,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
marginBottom: spacing[2],
|
||||||
|
},
|
||||||
|
appName: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize['2xl'],
|
||||||
|
fontWeight: typography.fontWeight.bold,
|
||||||
|
color: colors.textPrimary,
|
||||||
|
},
|
||||||
|
tagline: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.base,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
},
|
||||||
|
form: {
|
||||||
|
gap: spacing[4],
|
||||||
|
paddingBottom: spacing[8],
|
||||||
|
},
|
||||||
|
forgotRow: {
|
||||||
|
alignSelf: 'flex-end',
|
||||||
|
marginTop: -spacing[2],
|
||||||
|
},
|
||||||
|
forgotText: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.sm,
|
||||||
|
color: colors.accent,
|
||||||
|
},
|
||||||
|
divider: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: spacing[3],
|
||||||
|
marginVertical: spacing[2],
|
||||||
|
},
|
||||||
|
dividerLine: {
|
||||||
|
flex: 1,
|
||||||
|
height: 1,
|
||||||
|
backgroundColor: colors.border,
|
||||||
|
},
|
||||||
|
dividerText: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.sm,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
},
|
||||||
|
footer: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'center',
|
||||||
|
marginTop: spacing[2],
|
||||||
|
},
|
||||||
|
footerText: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.sm,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
},
|
||||||
|
footerLink: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.sm,
|
||||||
|
color: colors.accent,
|
||||||
|
fontWeight: typography.fontWeight.semibold,
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -0,0 +1,70 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { View, Text, StyleSheet } from 'react-native';
|
||||||
|
import { useRouter } from 'expo-router';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import { Screen } from '@presentation/components/layout/Screen';
|
||||||
|
import { Button } from '@presentation/components/ui/Button';
|
||||||
|
import { colors, typography, spacing, radius } from '@shared/theme';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Tela de Senha Redefinida — 135-0
|
||||||
|
* Confirmação de sucesso após redefinição de senha.
|
||||||
|
*/
|
||||||
|
export default function PasswordResetDoneScreen(): React.ReactElement {
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Screen>
|
||||||
|
<View style={styles.content}>
|
||||||
|
<View style={styles.iconWrapper}>
|
||||||
|
<Ionicons name="checkmark-circle" size={64} color={colors.accent} />
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<Text style={styles.title}>Senha redefinida!</Text>
|
||||||
|
<Text style={styles.description}>
|
||||||
|
Sua senha foi alterada com sucesso. Você já pode fazer login com a nova senha.
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
label="Ir para o Login"
|
||||||
|
onPress={() => router.replace('/(auth)/login')}
|
||||||
|
style={styles.cta}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</Screen>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
content: {
|
||||||
|
flex: 1,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
gap: spacing[5],
|
||||||
|
paddingHorizontal: spacing[4],
|
||||||
|
},
|
||||||
|
iconWrapper: {
|
||||||
|
width: 100,
|
||||||
|
height: 100,
|
||||||
|
borderRadius: radius.xl,
|
||||||
|
backgroundColor: 'rgba(56,188,194,0.12)',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
marginBottom: spacing[2],
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.xl,
|
||||||
|
fontWeight: typography.fontWeight.bold,
|
||||||
|
color: colors.textPrimary,
|
||||||
|
textAlign: 'center',
|
||||||
|
},
|
||||||
|
description: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.base,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
textAlign: 'center',
|
||||||
|
lineHeight: typography.fontSize.base * 1.6,
|
||||||
|
},
|
||||||
|
cta: { width: '100%', marginTop: spacing[4] },
|
||||||
|
});
|
||||||
@@ -0,0 +1,146 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { View, Text, StyleSheet, TouchableOpacity, Alert } from 'react-native';
|
||||||
|
import { Link, useRouter } from 'expo-router';
|
||||||
|
import { useForm, Controller } from 'react-hook-form';
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import { z } from 'zod';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import { Screen } from '@presentation/components/layout/Screen';
|
||||||
|
import { Header } from '@presentation/components/layout/Header';
|
||||||
|
import { Input } from '@presentation/components/ui/Input';
|
||||||
|
import { Button } from '@presentation/components/ui/Button';
|
||||||
|
import { colors, typography, spacing } from '@shared/theme';
|
||||||
|
|
||||||
|
const schema = z.object({
|
||||||
|
email: z.string().email('E-mail inválido'),
|
||||||
|
password: z
|
||||||
|
.string()
|
||||||
|
.min(8, 'Mínimo 8 caracteres'),
|
||||||
|
confirmPassword: z.string(),
|
||||||
|
}).refine((d) => d.password === d.confirmPassword, {
|
||||||
|
message: 'As senhas não coincidem',
|
||||||
|
path: ['confirmPassword'],
|
||||||
|
});
|
||||||
|
|
||||||
|
type FormData = z.infer<typeof schema>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Tela de Cadastro — IX-0
|
||||||
|
*/
|
||||||
|
export default function RegisterScreen(): React.ReactElement {
|
||||||
|
const router = useRouter();
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
|
||||||
|
const { control, handleSubmit, formState: { errors } } = useForm<FormData>({
|
||||||
|
resolver: zodResolver(schema),
|
||||||
|
defaultValues: { email: '', password: '', confirmPassword: '' },
|
||||||
|
});
|
||||||
|
|
||||||
|
async function onSubmit(data: FormData): Promise<void> {
|
||||||
|
setIsLoading(true);
|
||||||
|
try {
|
||||||
|
// TODO: injetar RegisterUseCase
|
||||||
|
console.log('register', data);
|
||||||
|
router.replace('/(auth)/verify-email');
|
||||||
|
} catch {
|
||||||
|
Alert.alert('Erro', 'Não foi possível criar sua conta.');
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Screen scrollable keyboardAvoiding>
|
||||||
|
<Header title="Criar conta" showBack />
|
||||||
|
|
||||||
|
<View style={styles.form}>
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="email"
|
||||||
|
render={({ field }) => (
|
||||||
|
<Input
|
||||||
|
label="E-MAIL"
|
||||||
|
placeholder="seu@email.com"
|
||||||
|
keyboardType="email-address"
|
||||||
|
autoComplete="email"
|
||||||
|
leftIcon={<Ionicons name="mail-outline" size={18} color={colors.textSecondary} />}
|
||||||
|
error={errors.email?.message}
|
||||||
|
onChangeText={field.onChange}
|
||||||
|
value={field.value}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="password"
|
||||||
|
render={({ field }) => (
|
||||||
|
<Input
|
||||||
|
label="SENHA"
|
||||||
|
placeholder="Mínimo 8 caracteres"
|
||||||
|
isPassword
|
||||||
|
leftIcon={<Ionicons name="lock-closed-outline" size={18} color={colors.textSecondary} />}
|
||||||
|
error={errors.password?.message}
|
||||||
|
onChangeText={field.onChange}
|
||||||
|
value={field.value}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="confirmPassword"
|
||||||
|
render={({ field }) => (
|
||||||
|
<Input
|
||||||
|
label="CONFIRMAR SENHA"
|
||||||
|
placeholder="Repita a senha"
|
||||||
|
isPassword
|
||||||
|
leftIcon={<Ionicons name="lock-closed-outline" size={18} color={colors.textSecondary} />}
|
||||||
|
error={errors.confirmPassword?.message}
|
||||||
|
onChangeText={field.onChange}
|
||||||
|
value={field.value}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Button label="Criar conta" onPress={handleSubmit(onSubmit)} isLoading={isLoading} style={styles.cta} />
|
||||||
|
|
||||||
|
<View style={styles.footer}>
|
||||||
|
<Text style={styles.footerText}>Já tem uma conta? </Text>
|
||||||
|
<Link href="/(auth)/login" asChild>
|
||||||
|
<TouchableOpacity>
|
||||||
|
<Text style={styles.footerLink}>Entrar</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</Link>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</Screen>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
form: {
|
||||||
|
gap: spacing[4],
|
||||||
|
paddingTop: spacing[6],
|
||||||
|
paddingBottom: spacing[8],
|
||||||
|
},
|
||||||
|
cta: {
|
||||||
|
marginTop: spacing[2],
|
||||||
|
},
|
||||||
|
footer: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'center',
|
||||||
|
marginTop: spacing[4],
|
||||||
|
},
|
||||||
|
footerText: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.sm,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
},
|
||||||
|
footerLink: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.sm,
|
||||||
|
color: colors.accent,
|
||||||
|
fontWeight: typography.fontWeight.semibold,
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -0,0 +1,116 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { View, Text, StyleSheet, Alert } from 'react-native';
|
||||||
|
import { useLocalSearchParams, useRouter } from 'expo-router';
|
||||||
|
import { useForm, Controller } from 'react-hook-form';
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import { z } from 'zod';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import { Screen } from '@presentation/components/layout/Screen';
|
||||||
|
import { Header } from '@presentation/components/layout/Header';
|
||||||
|
import { Input } from '@presentation/components/ui/Input';
|
||||||
|
import { Button } from '@presentation/components/ui/Button';
|
||||||
|
import { colors, typography, spacing } from '@shared/theme';
|
||||||
|
|
||||||
|
const schema = z.object({
|
||||||
|
password: z.string().min(8, 'Mínimo 8 caracteres'),
|
||||||
|
confirmPassword: z.string(),
|
||||||
|
}).refine((d) => d.password === d.confirmPassword, {
|
||||||
|
message: 'As senhas não coincidem',
|
||||||
|
path: ['confirmPassword'],
|
||||||
|
});
|
||||||
|
|
||||||
|
type FormData = z.infer<typeof schema>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Tela de Redefinir Senha — 117-0
|
||||||
|
* Recebe `token` via deep link: meowspool://reset-password?token=xxx
|
||||||
|
*/
|
||||||
|
export default function ResetPasswordScreen(): React.ReactElement {
|
||||||
|
const { token } = useLocalSearchParams<{ token: string }>();
|
||||||
|
const router = useRouter();
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
|
||||||
|
const { control, handleSubmit, formState: { errors } } = useForm<FormData>({
|
||||||
|
resolver: zodResolver(schema),
|
||||||
|
defaultValues: { password: '', confirmPassword: '' },
|
||||||
|
});
|
||||||
|
|
||||||
|
async function onSubmit(data: FormData): Promise<void> {
|
||||||
|
if (!token) {
|
||||||
|
Alert.alert('Erro', 'Token inválido.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setIsLoading(true);
|
||||||
|
try {
|
||||||
|
// TODO: ResetPasswordUseCase
|
||||||
|
console.log('reset-password', { token, ...data });
|
||||||
|
router.replace('/(auth)/password-reset-done');
|
||||||
|
} catch {
|
||||||
|
Alert.alert('Erro', 'Não foi possível redefinir a senha.');
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Screen keyboardAvoiding>
|
||||||
|
<Header title="Nova senha" showBack />
|
||||||
|
|
||||||
|
<View style={styles.content}>
|
||||||
|
<Text style={styles.description}>
|
||||||
|
Escolha uma nova senha segura para sua conta.
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="password"
|
||||||
|
render={({ field }) => (
|
||||||
|
<Input
|
||||||
|
label="NOVA SENHA"
|
||||||
|
placeholder="Mínimo 8 caracteres"
|
||||||
|
isPassword
|
||||||
|
leftIcon={<Ionicons name="lock-closed-outline" size={18} color={colors.textSecondary} />}
|
||||||
|
error={errors.password?.message}
|
||||||
|
onChangeText={field.onChange}
|
||||||
|
value={field.value}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="confirmPassword"
|
||||||
|
render={({ field }) => (
|
||||||
|
<Input
|
||||||
|
label="CONFIRMAR NOVA SENHA"
|
||||||
|
placeholder="Repita a senha"
|
||||||
|
isPassword
|
||||||
|
leftIcon={<Ionicons name="lock-closed-outline" size={18} color={colors.textSecondary} />}
|
||||||
|
error={errors.confirmPassword?.message}
|
||||||
|
onChangeText={field.onChange}
|
||||||
|
value={field.value}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Button label="Redefinir senha" onPress={handleSubmit(onSubmit)} isLoading={isLoading} style={styles.cta} />
|
||||||
|
</View>
|
||||||
|
</Screen>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
content: {
|
||||||
|
flex: 1,
|
||||||
|
paddingTop: spacing[6],
|
||||||
|
gap: spacing[4],
|
||||||
|
},
|
||||||
|
description: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.base,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
lineHeight: typography.fontSize.base * 1.6,
|
||||||
|
marginBottom: spacing[2],
|
||||||
|
},
|
||||||
|
cta: { marginTop: spacing[2] },
|
||||||
|
});
|
||||||
@@ -0,0 +1,78 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { View, Text, StyleSheet } from 'react-native';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import { Screen } from '@presentation/components/layout/Screen';
|
||||||
|
import { Header } from '@presentation/components/layout/Header';
|
||||||
|
import { colors, typography, spacing, radius } from '@shared/theme';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Tela de Verificação de E-mail — RU-0
|
||||||
|
* Mostrada após o cadastro bem-sucedido.
|
||||||
|
*/
|
||||||
|
export default function VerifyEmailScreen(): React.ReactElement {
|
||||||
|
return (
|
||||||
|
<Screen>
|
||||||
|
<Header title="Verificar e-mail" showBack />
|
||||||
|
|
||||||
|
<View style={styles.content}>
|
||||||
|
<View style={styles.iconWrapper}>
|
||||||
|
<Ionicons name="mail-outline" size={64} color={colors.accent} />
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<Text style={styles.title}>Confirme seu e-mail</Text>
|
||||||
|
<Text style={styles.description}>
|
||||||
|
Enviamos um link de verificação para o seu e-mail. Clique no link para ativar sua conta e poder fazer login.
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
<View style={styles.hint}>
|
||||||
|
<Ionicons name="information-circle-outline" size={16} color={colors.textSecondary} />
|
||||||
|
<Text style={styles.hintText}>Não recebeu? Verifique sua pasta de spam.</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</Screen>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
content: {
|
||||||
|
flex: 1,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
gap: spacing[5],
|
||||||
|
paddingHorizontal: spacing[4],
|
||||||
|
},
|
||||||
|
iconWrapper: {
|
||||||
|
width: 100,
|
||||||
|
height: 100,
|
||||||
|
borderRadius: radius.xl,
|
||||||
|
backgroundColor: colors.bgSurface,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
marginBottom: spacing[2],
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.xl,
|
||||||
|
fontWeight: typography.fontWeight.bold,
|
||||||
|
color: colors.textPrimary,
|
||||||
|
textAlign: 'center',
|
||||||
|
},
|
||||||
|
description: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.base,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
textAlign: 'center',
|
||||||
|
lineHeight: typography.fontSize.base * 1.6,
|
||||||
|
},
|
||||||
|
hint: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: spacing[2],
|
||||||
|
marginTop: spacing[4],
|
||||||
|
},
|
||||||
|
hintText: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.sm,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
import React, { useEffect } from 'react';
|
||||||
|
import { Stack } from 'expo-router';
|
||||||
|
import { StatusBar } from 'expo-status-bar';
|
||||||
|
import { useAuthStore } from '@store/authStore';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Root layout do expo-router.
|
||||||
|
* Carrega a sessão armazenada e controla o fluxo auth vs app.
|
||||||
|
*/
|
||||||
|
export default function RootLayout(): React.ReactElement | null {
|
||||||
|
const { loadStoredSession, isLoading } = useAuthStore();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadStoredSession();
|
||||||
|
}, [loadStoredSession]);
|
||||||
|
|
||||||
|
if (isLoading) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<StatusBar style="light" backgroundColor="transparent" translucent />
|
||||||
|
<Stack screenOptions={{ headerShown: false, contentStyle: { backgroundColor: '#1E1B18' } }}>
|
||||||
|
<Stack.Screen name="(auth)" />
|
||||||
|
<Stack.Screen name="(app)" />
|
||||||
|
</Stack>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 178 B |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
@@ -0,0 +1,24 @@
|
|||||||
|
module.exports = function (api) {
|
||||||
|
api.cache(true);
|
||||||
|
return {
|
||||||
|
presets: ['babel-preset-expo'],
|
||||||
|
plugins: [
|
||||||
|
[
|
||||||
|
'module-resolver',
|
||||||
|
{
|
||||||
|
root: ['./src'],
|
||||||
|
alias: {
|
||||||
|
'@domain': './src/domain',
|
||||||
|
'@ports': './src/ports',
|
||||||
|
'@application': './src/application',
|
||||||
|
'@adapters': './src/adapters',
|
||||||
|
'@presentation': './src/presentation',
|
||||||
|
'@store': './src/store',
|
||||||
|
'@shared': './src/shared',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
'react-native-reanimated/plugin',
|
||||||
|
],
|
||||||
|
};
|
||||||
|
};
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
import 'expo-router/entry';
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
// Learn more https://docs.expo.io/guides/customizing-metro
|
||||||
|
const { getDefaultConfig } = require('expo/metro-config');
|
||||||
|
|
||||||
|
/** @type {import('expo/metro-config').MetroConfig} */
|
||||||
|
const config = getDefaultConfig(__dirname);
|
||||||
|
|
||||||
|
module.exports = config;
|
||||||
Generated
+12961
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,54 @@
|
|||||||
|
{
|
||||||
|
"name": "meowspool-mobile",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"main": "expo-router/entry",
|
||||||
|
"scripts": {
|
||||||
|
"start": "expo start",
|
||||||
|
"android": "expo start --android",
|
||||||
|
"ios": "expo start --ios",
|
||||||
|
"web": "expo start --web",
|
||||||
|
"lint": "eslint src --ext .ts,.tsx",
|
||||||
|
"type-check": "tsc --noEmit"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@expo/vector-icons": "^15.0.3",
|
||||||
|
"@hookform/resolvers": "^3.9.0",
|
||||||
|
"@react-navigation/bottom-tabs": "^7.15.5",
|
||||||
|
"@react-navigation/native": "^7.1.33",
|
||||||
|
"@react-navigation/native-stack": "^7.14.5",
|
||||||
|
"axios": "^1.7.7",
|
||||||
|
"expo": "~54.0.0",
|
||||||
|
"expo-constants": "~18.0.13",
|
||||||
|
"expo-font": "~14.0.11",
|
||||||
|
"expo-linking": "~8.0.11",
|
||||||
|
"expo-router": "~6.0.23",
|
||||||
|
"expo-secure-store": "~15.0.8",
|
||||||
|
"expo-splash-screen": "~31.0.13",
|
||||||
|
"expo-sqlite": "~16.0.10",
|
||||||
|
"expo-status-bar": "~3.0.9",
|
||||||
|
"expo-system-ui": "~6.0.9",
|
||||||
|
"react": "19.1.0",
|
||||||
|
"react-hook-form": "^7.53.0",
|
||||||
|
"react-native": "0.81.5",
|
||||||
|
"react-native-gesture-handler": "~2.28.0",
|
||||||
|
"react-native-qrcode-svg": "^6.3.0",
|
||||||
|
"react-native-reanimated": "~4.1.1",
|
||||||
|
"react-native-safe-area-context": "~5.6.0",
|
||||||
|
"react-native-screens": "~4.16.0",
|
||||||
|
"react-native-svg": "15.12.1",
|
||||||
|
"zod": "^3.23.8",
|
||||||
|
"zustand": "^4.5.4"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@babel/core": "^7.24.0",
|
||||||
|
"@types/react": "~19.1.10",
|
||||||
|
"@types/react-native": "~0.73.0",
|
||||||
|
"@typescript-eslint/eslint-plugin": "^7.0.0",
|
||||||
|
"@typescript-eslint/parser": "^7.0.0",
|
||||||
|
"eslint": "^8.57.0",
|
||||||
|
"eslint-plugin-react": "^7.34.0",
|
||||||
|
"eslint-plugin-react-hooks": "^4.6.0",
|
||||||
|
"eslint-plugin-react-native": "^4.1.0",
|
||||||
|
"typescript": "~5.9.2"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,127 @@
|
|||||||
|
import { getDatabase } from './database';
|
||||||
|
import type { FilamentRepository } from '@ports/FilamentRepository';
|
||||||
|
import type { Filament, CreateFilamentInput, UpdateFilamentInput, FilamentFilter } from '@domain/Filament';
|
||||||
|
|
||||||
|
function rowToFilament(row: Record<string, unknown>): Filament {
|
||||||
|
return {
|
||||||
|
id: row.id as string,
|
||||||
|
userId: row.user_id as string,
|
||||||
|
material: row.material as Filament['material'],
|
||||||
|
brand: row.brand as string,
|
||||||
|
model: (row.model as string | null) ?? null,
|
||||||
|
colorHex: row.color_hex as string,
|
||||||
|
spoolPresetId: row.spool_preset_id as string,
|
||||||
|
totalWeightG: row.total_weight_g as number,
|
||||||
|
netWeightG: row.net_weight_g as number,
|
||||||
|
tempHotendC: (row.temp_hotend_c as number | null) ?? null,
|
||||||
|
tempBedC: (row.temp_bed_c as number | null) ?? null,
|
||||||
|
flowFactorPct: (row.flow_factor_pct as number | null) ?? null,
|
||||||
|
notes: (row.notes as string | null) ?? null,
|
||||||
|
updatedAt: row.updated_at as string,
|
||||||
|
createdAt: row.created_at as string,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Implementação local (SQLite) do FilamentRepository.
|
||||||
|
* Persiste todos os dados offline-first. A sync layer envia para a API quando online.
|
||||||
|
*/
|
||||||
|
export class LocalFilamentRepository implements FilamentRepository {
|
||||||
|
async findById(id: string, userId: string): Promise<Filament | null> {
|
||||||
|
const db = await getDatabase();
|
||||||
|
const row = await db.getFirstAsync<Record<string, unknown>>(
|
||||||
|
'SELECT * FROM filaments WHERE id = ? AND user_id = ?',
|
||||||
|
[id, userId],
|
||||||
|
);
|
||||||
|
return row ? rowToFilament(row) : null;
|
||||||
|
}
|
||||||
|
|
||||||
|
async list(userId: string, filter?: FilamentFilter): Promise<Filament[]> {
|
||||||
|
const db = await getDatabase();
|
||||||
|
let query = 'SELECT * FROM filaments WHERE user_id = ?';
|
||||||
|
const params: (string | number | null)[] = [userId];
|
||||||
|
|
||||||
|
if (filter?.material) {
|
||||||
|
query += ' AND material = ?';
|
||||||
|
params.push(filter.material);
|
||||||
|
}
|
||||||
|
if (filter?.brand) {
|
||||||
|
query += ' AND brand LIKE ?';
|
||||||
|
params.push(`%${filter.brand}%`);
|
||||||
|
}
|
||||||
|
if (filter?.search) {
|
||||||
|
query += ' AND (brand LIKE ? OR model LIKE ? OR notes LIKE ?)';
|
||||||
|
params.push(`%${filter.search}%`, `%${filter.search}%`, `%${filter.search}%`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const orderMap: Record<string, string> = {
|
||||||
|
net_weight_asc: 'net_weight_g ASC',
|
||||||
|
net_weight_desc: 'net_weight_g DESC',
|
||||||
|
created_at_desc: 'created_at DESC',
|
||||||
|
};
|
||||||
|
query += ` ORDER BY ${orderMap[filter?.sortBy ?? 'created_at_desc']}`;
|
||||||
|
|
||||||
|
const rows = await db.getAllAsync<Record<string, unknown>>(query, params);
|
||||||
|
return rows.map(rowToFilament);
|
||||||
|
}
|
||||||
|
|
||||||
|
async create(
|
||||||
|
userId: string,
|
||||||
|
input: CreateFilamentInput & { netWeightG: number },
|
||||||
|
): Promise<Filament> {
|
||||||
|
const db = await getDatabase();
|
||||||
|
const id = `local_${Date.now()}_${Math.random().toString(36).slice(2)}`;
|
||||||
|
const now = new Date().toISOString();
|
||||||
|
|
||||||
|
await db.runAsync(
|
||||||
|
`INSERT INTO filaments
|
||||||
|
(id, user_id, material, brand, model, color_hex, spool_preset_id,
|
||||||
|
total_weight_g, net_weight_g, temp_hotend_c, temp_bed_c,
|
||||||
|
flow_factor_pct, notes, updated_at, created_at, synced)
|
||||||
|
VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, 0)`,
|
||||||
|
[
|
||||||
|
id, userId, input.material, input.brand, input.model ?? null,
|
||||||
|
input.colorHex, input.spoolPresetId, input.totalWeightG, input.netWeightG,
|
||||||
|
input.tempHotendC ?? null, input.tempBedC ?? null,
|
||||||
|
input.flowFactorPct ?? null, input.notes ?? null, now, now,
|
||||||
|
],
|
||||||
|
);
|
||||||
|
|
||||||
|
const created = await this.findById(id, userId);
|
||||||
|
return created!;
|
||||||
|
}
|
||||||
|
|
||||||
|
async update(id: string, userId: string, input: UpdateFilamentInput & { netWeightG?: number }): Promise<Filament> {
|
||||||
|
const db = await getDatabase();
|
||||||
|
const now = new Date().toISOString();
|
||||||
|
|
||||||
|
const fields: string[] = ['updated_at = ?', 'synced = 0'];
|
||||||
|
const params: (string | number | null)[] = [now];
|
||||||
|
|
||||||
|
if (input.material) { fields.push('material = ?'); params.push(input.material); }
|
||||||
|
if (input.brand) { fields.push('brand = ?'); params.push(input.brand); }
|
||||||
|
if (input.model !== undefined) { fields.push('model = ?'); params.push(input.model); }
|
||||||
|
if (input.colorHex) { fields.push('color_hex = ?'); params.push(input.colorHex); }
|
||||||
|
if (input.spoolPresetId) { fields.push('spool_preset_id = ?'); params.push(input.spoolPresetId); }
|
||||||
|
if (input.totalWeightG !== undefined) { fields.push('total_weight_g = ?'); params.push(input.totalWeightG); }
|
||||||
|
if (input.netWeightG !== undefined) { fields.push('net_weight_g = ?'); params.push(input.netWeightG); }
|
||||||
|
if (input.tempHotendC !== undefined) { fields.push('temp_hotend_c = ?'); params.push(input.tempHotendC); }
|
||||||
|
if (input.tempBedC !== undefined) { fields.push('temp_bed_c = ?'); params.push(input.tempBedC); }
|
||||||
|
if (input.flowFactorPct !== undefined) { fields.push('flow_factor_pct = ?'); params.push(input.flowFactorPct); }
|
||||||
|
if (input.notes !== undefined) { fields.push('notes = ?'); params.push(input.notes); }
|
||||||
|
|
||||||
|
params.push(id, userId);
|
||||||
|
await db.runAsync(
|
||||||
|
`UPDATE filaments SET ${fields.join(', ')} WHERE id = ? AND user_id = ?`,
|
||||||
|
params,
|
||||||
|
);
|
||||||
|
|
||||||
|
const updated = await this.findById(id, userId);
|
||||||
|
return updated!;
|
||||||
|
}
|
||||||
|
|
||||||
|
async remove(id: string, userId: string): Promise<void> {
|
||||||
|
const db = await getDatabase();
|
||||||
|
await db.runAsync('DELETE FROM filaments WHERE id = ? AND user_id = ?', [id, userId]);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,87 @@
|
|||||||
|
import { getDatabase } from './database';
|
||||||
|
import type { SpoolPresetRepository } from '@ports/SpoolPresetRepository';
|
||||||
|
import type { SpoolPreset, CreateSpoolPresetInput, UpdateSpoolPresetInput } from '@domain/SpoolPreset';
|
||||||
|
|
||||||
|
function rowToPreset(row: Record<string, unknown>): SpoolPreset {
|
||||||
|
return {
|
||||||
|
id: row.id as string,
|
||||||
|
name: row.name as string,
|
||||||
|
spoolWeightG: row.spool_weight_g as number,
|
||||||
|
isSystem: Boolean(row.is_system),
|
||||||
|
userId: (row.user_id as string | null) ?? null,
|
||||||
|
createdAt: row.created_at as string,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Implementação local (SQLite) do SpoolPresetRepository.
|
||||||
|
*/
|
||||||
|
export class LocalSpoolPresetRepository implements SpoolPresetRepository {
|
||||||
|
async list(userId: string): Promise<SpoolPreset[]> {
|
||||||
|
const db = await getDatabase();
|
||||||
|
const rows = await db.getAllAsync<Record<string, unknown>>(
|
||||||
|
'SELECT * FROM spool_presets WHERE is_system = 1 OR user_id = ? ORDER BY is_system DESC, name ASC',
|
||||||
|
[userId],
|
||||||
|
);
|
||||||
|
return rows.map(rowToPreset);
|
||||||
|
}
|
||||||
|
|
||||||
|
async findById(id: string): Promise<SpoolPreset | null> {
|
||||||
|
const db = await getDatabase();
|
||||||
|
const row = await db.getFirstAsync<Record<string, unknown>>(
|
||||||
|
'SELECT * FROM spool_presets WHERE id = ?',
|
||||||
|
[id],
|
||||||
|
);
|
||||||
|
return row ? rowToPreset(row) : null;
|
||||||
|
}
|
||||||
|
|
||||||
|
async create(userId: string, input: CreateSpoolPresetInput): Promise<SpoolPreset> {
|
||||||
|
const db = await getDatabase();
|
||||||
|
const id = `local_preset_${Date.now()}_${Math.random().toString(36).slice(2)}`;
|
||||||
|
const now = new Date().toISOString();
|
||||||
|
|
||||||
|
await db.runAsync(
|
||||||
|
'INSERT INTO spool_presets (id, name, spool_weight_g, is_system, user_id, created_at) VALUES (?, ?, ?, 0, ?, ?)',
|
||||||
|
[id, input.name, input.spoolWeightG, userId, now],
|
||||||
|
);
|
||||||
|
|
||||||
|
const created = await this.findById(id);
|
||||||
|
return created!;
|
||||||
|
}
|
||||||
|
|
||||||
|
async update(id: string, _userId: string, input: UpdateSpoolPresetInput): Promise<SpoolPreset> {
|
||||||
|
const db = await getDatabase();
|
||||||
|
const fields: string[] = [];
|
||||||
|
const params: (string | number | null)[] = [];
|
||||||
|
|
||||||
|
if (input.name) { fields.push('name = ?'); params.push(input.name); }
|
||||||
|
if (input.spoolWeightG !== undefined) { fields.push('spool_weight_g = ?'); params.push(input.spoolWeightG); }
|
||||||
|
|
||||||
|
if (fields.length > 0) {
|
||||||
|
params.push(id);
|
||||||
|
await db.runAsync(`UPDATE spool_presets SET ${fields.join(', ')} WHERE id = ?`, params);
|
||||||
|
}
|
||||||
|
|
||||||
|
const updated = await this.findById(id);
|
||||||
|
return updated!;
|
||||||
|
}
|
||||||
|
|
||||||
|
async remove(id: string): Promise<void> {
|
||||||
|
const db = await getDatabase();
|
||||||
|
await db.runAsync('DELETE FROM spool_presets WHERE id = ? AND is_system = 0', [id]);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Upsert utilizado pelo SyncService para popular presets do sistema vindos da API.
|
||||||
|
*/
|
||||||
|
async upsertSystemPresets(presets: SpoolPreset[]): Promise<void> {
|
||||||
|
const db = await getDatabase();
|
||||||
|
for (const p of presets) {
|
||||||
|
await db.runAsync(
|
||||||
|
`INSERT OR REPLACE INTO spool_presets (id, name, spool_weight_g, is_system, user_id, created_at)
|
||||||
|
VALUES (?, ?, ?, ?, ?, ?)`,
|
||||||
|
[p.id, p.name, p.spoolWeightG, p.isSystem ? 1 : 0, p.userId ?? null, p.createdAt],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,60 @@
|
|||||||
|
import { openDatabaseAsync, type SQLiteDatabase } from 'expo-sqlite';
|
||||||
|
import { LOCAL_DB_NAME } from '@shared/constants';
|
||||||
|
|
||||||
|
let _db: SQLiteDatabase | null = null;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Retorna a instância singleton do banco SQLite local.
|
||||||
|
* Roda as migrations na primeira abertura.
|
||||||
|
*/
|
||||||
|
export async function getDatabase(): Promise<SQLiteDatabase> {
|
||||||
|
if (_db) return _db;
|
||||||
|
_db = await openDatabaseAsync(LOCAL_DB_NAME);
|
||||||
|
await runMigrations(_db);
|
||||||
|
return _db;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function runMigrations(db: SQLiteDatabase): Promise<void> {
|
||||||
|
await db.execAsync(`
|
||||||
|
PRAGMA journal_mode = WAL;
|
||||||
|
PRAGMA foreign_keys = ON;
|
||||||
|
|
||||||
|
CREATE TABLE IF NOT EXISTS spool_presets (
|
||||||
|
id TEXT PRIMARY KEY,
|
||||||
|
name TEXT NOT NULL,
|
||||||
|
spool_weight_g INTEGER NOT NULL,
|
||||||
|
is_system INTEGER NOT NULL DEFAULT 0,
|
||||||
|
user_id TEXT,
|
||||||
|
created_at TEXT NOT NULL
|
||||||
|
);
|
||||||
|
|
||||||
|
CREATE TABLE IF NOT EXISTS filaments (
|
||||||
|
id TEXT PRIMARY KEY,
|
||||||
|
user_id TEXT NOT NULL,
|
||||||
|
material TEXT NOT NULL,
|
||||||
|
brand TEXT NOT NULL,
|
||||||
|
model TEXT,
|
||||||
|
color_hex TEXT NOT NULL,
|
||||||
|
spool_preset_id TEXT NOT NULL,
|
||||||
|
total_weight_g INTEGER NOT NULL,
|
||||||
|
net_weight_g INTEGER NOT NULL,
|
||||||
|
temp_hotend_c INTEGER,
|
||||||
|
temp_bed_c INTEGER,
|
||||||
|
flow_factor_pct REAL,
|
||||||
|
notes TEXT,
|
||||||
|
updated_at TEXT NOT NULL,
|
||||||
|
created_at TEXT NOT NULL,
|
||||||
|
synced INTEGER NOT NULL DEFAULT 0,
|
||||||
|
FOREIGN KEY (spool_preset_id) REFERENCES spool_presets(id)
|
||||||
|
);
|
||||||
|
|
||||||
|
CREATE TABLE IF NOT EXISTS sync_queue (
|
||||||
|
id TEXT PRIMARY KEY,
|
||||||
|
entity TEXT NOT NULL,
|
||||||
|
entity_id TEXT NOT NULL,
|
||||||
|
operation TEXT NOT NULL,
|
||||||
|
payload TEXT NOT NULL,
|
||||||
|
created_at TEXT NOT NULL
|
||||||
|
);
|
||||||
|
`);
|
||||||
|
}
|
||||||
@@ -0,0 +1,65 @@
|
|||||||
|
import { httpClient } from './httpClient';
|
||||||
|
import type { AuthRepository } from '@ports/AuthRepository';
|
||||||
|
import type { AuthSession, LoginInput, RegisterInput, GoogleOAuthInput } from '@domain/User';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Implementação remota do AuthRepository.
|
||||||
|
* Consome os endpoints /api/v1/auth/* do backend Rust.
|
||||||
|
*/
|
||||||
|
export class ApiAuthRepository implements AuthRepository {
|
||||||
|
async login(input: LoginInput): Promise<AuthSession> {
|
||||||
|
const { data } = await httpClient.post('/auth/login', input);
|
||||||
|
return this.mapSession(data);
|
||||||
|
}
|
||||||
|
|
||||||
|
async register(input: RegisterInput): Promise<AuthSession> {
|
||||||
|
const { data } = await httpClient.post('/auth/register', input);
|
||||||
|
return this.mapSession(data);
|
||||||
|
}
|
||||||
|
|
||||||
|
async loginWithGoogle(input: GoogleOAuthInput): Promise<AuthSession> {
|
||||||
|
const { data } = await httpClient.post('/auth/oauth/google', input);
|
||||||
|
return this.mapSession(data);
|
||||||
|
}
|
||||||
|
|
||||||
|
async refreshToken(refreshToken: string): Promise<Pick<AuthSession, 'accessToken' | 'refreshToken'>> {
|
||||||
|
const { data } = await httpClient.post('/auth/refresh', { refreshToken });
|
||||||
|
return {
|
||||||
|
accessToken: data.access_token,
|
||||||
|
refreshToken: data.refresh_token,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
async logout(accessToken: string): Promise<void> {
|
||||||
|
await httpClient.post('/auth/logout', {}, {
|
||||||
|
headers: { Authorization: `Bearer ${accessToken}` },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async forgotPassword(email: string): Promise<void> {
|
||||||
|
await httpClient.post('/auth/forgot-password', { email });
|
||||||
|
}
|
||||||
|
|
||||||
|
async verifyEmail(token: string): Promise<void> {
|
||||||
|
await httpClient.post('/auth/verify-email', { token });
|
||||||
|
}
|
||||||
|
|
||||||
|
async resetPassword(token: string, newPassword: string): Promise<void> {
|
||||||
|
await httpClient.post('/auth/reset-password', { token, new_password: newPassword });
|
||||||
|
}
|
||||||
|
|
||||||
|
private mapSession(data: Record<string, unknown>): AuthSession {
|
||||||
|
const user = data.user as Record<string, unknown>;
|
||||||
|
return {
|
||||||
|
accessToken: data.access_token as string,
|
||||||
|
refreshToken: data.refresh_token as string,
|
||||||
|
user: {
|
||||||
|
id: user.id as string,
|
||||||
|
email: user.email as string,
|
||||||
|
name: (user.name as string | null) ?? null,
|
||||||
|
googleId: (user.google_id as string | null) ?? null,
|
||||||
|
createdAt: user.created_at as string,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,93 @@
|
|||||||
|
import { httpClient } from './httpClient';
|
||||||
|
import type { FilamentRepository } from '@ports/FilamentRepository';
|
||||||
|
import type { Filament, CreateFilamentInput, UpdateFilamentInput, FilamentFilter } from '@domain/Filament';
|
||||||
|
|
||||||
|
function mapFilament(d: Record<string, unknown>): Filament {
|
||||||
|
return {
|
||||||
|
id: d.id as string,
|
||||||
|
userId: d.user_id as string,
|
||||||
|
material: d.material as Filament['material'],
|
||||||
|
brand: d.brand as string,
|
||||||
|
model: (d.model as string | null) ?? null,
|
||||||
|
colorHex: d.color_hex as string,
|
||||||
|
spoolPresetId: d.spool_preset_id as string,
|
||||||
|
totalWeightG: d.total_weight_g as number,
|
||||||
|
netWeightG: d.net_weight_g as number,
|
||||||
|
tempHotendC: (d.temp_hotend_c as number | null) ?? null,
|
||||||
|
tempBedC: (d.temp_bed_c as number | null) ?? null,
|
||||||
|
flowFactorPct: (d.flow_factor_pct as number | null) ?? null,
|
||||||
|
notes: (d.notes as string | null) ?? null,
|
||||||
|
updatedAt: d.updated_at as string,
|
||||||
|
createdAt: d.created_at as string,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Implementação remota do FilamentRepository.
|
||||||
|
* Consome os endpoints /api/v1/filaments/* do backend Rust.
|
||||||
|
*/
|
||||||
|
export class ApiFilamentRepository implements FilamentRepository {
|
||||||
|
async findById(id: string): Promise<Filament | null> {
|
||||||
|
try {
|
||||||
|
const { data } = await httpClient.get(`/filaments/${id}`);
|
||||||
|
return mapFilament(data);
|
||||||
|
} catch (err: unknown) {
|
||||||
|
if ((err as { response?: { status?: number } }).response?.status === 404) return null;
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async list(_userId: string, filter?: FilamentFilter): Promise<Filament[]> {
|
||||||
|
const params: Record<string, unknown> = {};
|
||||||
|
if (filter?.material) params.material = filter.material;
|
||||||
|
if (filter?.brand) params.brand = filter.brand;
|
||||||
|
if (filter?.search) params.search = filter.search;
|
||||||
|
if (filter?.stockLevel) params.stock_level = filter.stockLevel;
|
||||||
|
if (filter?.sortBy) params.sort = filter.sortBy;
|
||||||
|
if (filter?.page) params.page = filter.page;
|
||||||
|
if (filter?.perPage) params.per_page = filter.perPage;
|
||||||
|
|
||||||
|
const { data } = await httpClient.get('/filaments', { params });
|
||||||
|
return (data as Record<string, unknown>[]).map(mapFilament);
|
||||||
|
}
|
||||||
|
|
||||||
|
async create(
|
||||||
|
_userId: string,
|
||||||
|
input: CreateFilamentInput & { netWeightG: number },
|
||||||
|
): Promise<Filament> {
|
||||||
|
const { data } = await httpClient.post('/filaments', {
|
||||||
|
material: input.material,
|
||||||
|
brand: input.brand,
|
||||||
|
model: input.model,
|
||||||
|
color_hex: input.colorHex,
|
||||||
|
spool_preset_id: input.spoolPresetId,
|
||||||
|
total_weight_g: input.totalWeightG,
|
||||||
|
temp_hotend_c: input.tempHotendC,
|
||||||
|
temp_bed_c: input.tempBedC,
|
||||||
|
flow_factor_pct: input.flowFactorPct,
|
||||||
|
notes: input.notes,
|
||||||
|
});
|
||||||
|
return mapFilament(data);
|
||||||
|
}
|
||||||
|
|
||||||
|
async update(id: string, _userId: string, input: UpdateFilamentInput & { netWeightG?: number }): Promise<Filament> {
|
||||||
|
const body: Record<string, unknown> = {};
|
||||||
|
if (input.material) body.material = input.material;
|
||||||
|
if (input.brand) body.brand = input.brand;
|
||||||
|
if (input.model !== undefined) body.model = input.model;
|
||||||
|
if (input.colorHex) body.color_hex = input.colorHex;
|
||||||
|
if (input.spoolPresetId) body.spool_preset_id = input.spoolPresetId;
|
||||||
|
if (input.totalWeightG !== undefined) body.total_weight_g = input.totalWeightG;
|
||||||
|
if (input.tempHotendC !== undefined) body.temp_hotend_c = input.tempHotendC;
|
||||||
|
if (input.tempBedC !== undefined) body.temp_bed_c = input.tempBedC;
|
||||||
|
if (input.flowFactorPct !== undefined) body.flow_factor_pct = input.flowFactorPct;
|
||||||
|
if (input.notes !== undefined) body.notes = input.notes;
|
||||||
|
|
||||||
|
const { data } = await httpClient.put(`/filaments/${id}`, body);
|
||||||
|
return mapFilament(data);
|
||||||
|
}
|
||||||
|
|
||||||
|
async remove(id: string): Promise<void> {
|
||||||
|
await httpClient.delete(`/filaments/${id}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,55 @@
|
|||||||
|
import { httpClient } from './httpClient';
|
||||||
|
import type { SpoolPresetRepository } from '@ports/SpoolPresetRepository';
|
||||||
|
import type { SpoolPreset, CreateSpoolPresetInput, UpdateSpoolPresetInput } from '@domain/SpoolPreset';
|
||||||
|
|
||||||
|
function mapPreset(d: Record<string, unknown>): SpoolPreset {
|
||||||
|
return {
|
||||||
|
id: d.id as string,
|
||||||
|
name: d.name as string,
|
||||||
|
spoolWeightG: d.spool_weight_g as number,
|
||||||
|
isSystem: d.is_system as boolean,
|
||||||
|
userId: (d.user_id as string | null) ?? null,
|
||||||
|
createdAt: d.created_at as string,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Implementação remota do SpoolPresetRepository.
|
||||||
|
* Consome os endpoints /api/v1/spool-presets/* do backend Rust.
|
||||||
|
*/
|
||||||
|
export class ApiSpoolPresetRepository implements SpoolPresetRepository {
|
||||||
|
async list(): Promise<SpoolPreset[]> {
|
||||||
|
const { data } = await httpClient.get('/spool-presets');
|
||||||
|
return (data as Record<string, unknown>[]).map(mapPreset);
|
||||||
|
}
|
||||||
|
|
||||||
|
async findById(id: string): Promise<SpoolPreset | null> {
|
||||||
|
try {
|
||||||
|
const { data } = await httpClient.get(`/spool-presets/${id}`);
|
||||||
|
return mapPreset(data);
|
||||||
|
} catch (err: unknown) {
|
||||||
|
if ((err as { response?: { status?: number } }).response?.status === 404) return null;
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async create(_userId: string, input: CreateSpoolPresetInput): Promise<SpoolPreset> {
|
||||||
|
const { data } = await httpClient.post('/spool-presets', {
|
||||||
|
name: input.name,
|
||||||
|
spool_weight_g: input.spoolWeightG,
|
||||||
|
});
|
||||||
|
return mapPreset(data);
|
||||||
|
}
|
||||||
|
|
||||||
|
async update(id: string, _userId: string, input: UpdateSpoolPresetInput): Promise<SpoolPreset> {
|
||||||
|
const body: Record<string, unknown> = {};
|
||||||
|
if (input.name) body.name = input.name;
|
||||||
|
if (input.spoolWeightG !== undefined) body.spool_weight_g = input.spoolWeightG;
|
||||||
|
const { data } = await httpClient.put(`/spool-presets/${id}`, body);
|
||||||
|
return mapPreset(data);
|
||||||
|
}
|
||||||
|
|
||||||
|
async remove(id: string): Promise<void> {
|
||||||
|
await httpClient.delete(`/spool-presets/${id}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,90 @@
|
|||||||
|
import axios, { type AxiosInstance, type InternalAxiosRequestConfig } from 'axios';
|
||||||
|
import * as SecureStore from 'expo-secure-store';
|
||||||
|
import { API_BASE_URL, SECURE_STORE_ACCESS_TOKEN, SECURE_STORE_REFRESH_TOKEN } from '@shared/constants';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Cliente HTTP centralizado.
|
||||||
|
*
|
||||||
|
* - Injeta o Bearer token automaticamente em todas as requisições.
|
||||||
|
* - Intercepta 401 para tentar refresh do token automaticamente.
|
||||||
|
* - Garante que todas as chamadas apontem para a base URL da API.
|
||||||
|
*/
|
||||||
|
const httpClient: AxiosInstance = axios.create({
|
||||||
|
baseURL: API_BASE_URL,
|
||||||
|
timeout: 15_000,
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// ── Interceptor de request: anexa Bearer token ──────────────
|
||||||
|
httpClient.interceptors.request.use(async (config: InternalAxiosRequestConfig) => {
|
||||||
|
const token = await SecureStore.getItemAsync(SECURE_STORE_ACCESS_TOKEN);
|
||||||
|
if (token && config.headers) {
|
||||||
|
config.headers.Authorization = `Bearer ${token}`;
|
||||||
|
}
|
||||||
|
return config;
|
||||||
|
});
|
||||||
|
|
||||||
|
// ── Interceptor de response: refresh automático em 401 ──────
|
||||||
|
let isRefreshing = false;
|
||||||
|
let pendingQueue: Array<{
|
||||||
|
resolve: (token: string) => void;
|
||||||
|
reject: (err: unknown) => void;
|
||||||
|
}> = [];
|
||||||
|
|
||||||
|
function processQueue(error: unknown, token: string | null): void {
|
||||||
|
pendingQueue.forEach(({ resolve, reject }) => {
|
||||||
|
if (error) reject(error);
|
||||||
|
else if (token) resolve(token);
|
||||||
|
});
|
||||||
|
pendingQueue = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
httpClient.interceptors.response.use(
|
||||||
|
(response) => response,
|
||||||
|
async (error) => {
|
||||||
|
const originalRequest = error.config;
|
||||||
|
|
||||||
|
if (error.response?.status === 401 && !originalRequest._retry) {
|
||||||
|
if (isRefreshing) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
pendingQueue.push({ resolve, reject });
|
||||||
|
}).then((token) => {
|
||||||
|
originalRequest.headers.Authorization = `Bearer ${token}`;
|
||||||
|
return httpClient(originalRequest);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
originalRequest._retry = true;
|
||||||
|
isRefreshing = true;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const refreshToken = await SecureStore.getItemAsync(SECURE_STORE_REFRESH_TOKEN);
|
||||||
|
if (!refreshToken) throw new Error('No refresh token');
|
||||||
|
|
||||||
|
const { data } = await axios.post(`${API_BASE_URL}/auth/refresh`, { refreshToken });
|
||||||
|
|
||||||
|
await SecureStore.setItemAsync(SECURE_STORE_ACCESS_TOKEN, data.access_token);
|
||||||
|
await SecureStore.setItemAsync(SECURE_STORE_REFRESH_TOKEN, data.refresh_token);
|
||||||
|
|
||||||
|
processQueue(null, data.access_token);
|
||||||
|
originalRequest.headers.Authorization = `Bearer ${data.access_token}`;
|
||||||
|
|
||||||
|
return httpClient(originalRequest);
|
||||||
|
} catch (refreshError) {
|
||||||
|
processQueue(refreshError, null);
|
||||||
|
// Limpa tokens inválidos — a store de auth detecta e redireciona para login
|
||||||
|
await SecureStore.deleteItemAsync(SECURE_STORE_ACCESS_TOKEN);
|
||||||
|
await SecureStore.deleteItemAsync(SECURE_STORE_REFRESH_TOKEN);
|
||||||
|
return Promise.reject(refreshError);
|
||||||
|
} finally {
|
||||||
|
isRefreshing = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return Promise.reject(error);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
export { httpClient };
|
||||||
@@ -0,0 +1,80 @@
|
|||||||
|
import type { AuthRepository } from '@ports/AuthRepository';
|
||||||
|
import type { AuthSession, LoginInput, RegisterInput, GoogleOAuthInput } from '@domain/User';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Caso de uso: Login com e-mail/senha.
|
||||||
|
*/
|
||||||
|
export class LoginUseCase {
|
||||||
|
constructor(private readonly authRepo: AuthRepository) {}
|
||||||
|
|
||||||
|
async execute(input: LoginInput): Promise<AuthSession> {
|
||||||
|
if (!input.email || !input.password) {
|
||||||
|
throw new Error('E-mail e senha são obrigatórios.');
|
||||||
|
}
|
||||||
|
return this.authRepo.login(input);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Caso de uso: Cadastro de novo usuário.
|
||||||
|
*/
|
||||||
|
export class RegisterUseCase {
|
||||||
|
constructor(private readonly authRepo: AuthRepository) {}
|
||||||
|
|
||||||
|
async execute(input: RegisterInput): Promise<AuthSession> {
|
||||||
|
if (!input.email || !input.password) {
|
||||||
|
throw new Error('E-mail e senha são obrigatórios.');
|
||||||
|
}
|
||||||
|
if (input.password.length < 8) {
|
||||||
|
throw new Error('A senha deve ter ao menos 8 caracteres.');
|
||||||
|
}
|
||||||
|
return this.authRepo.register(input);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Caso de uso: Login via OAuth Google.
|
||||||
|
*/
|
||||||
|
export class GoogleLoginUseCase {
|
||||||
|
constructor(private readonly authRepo: AuthRepository) {}
|
||||||
|
|
||||||
|
async execute(input: GoogleOAuthInput): Promise<AuthSession> {
|
||||||
|
return this.authRepo.loginWithGoogle(input);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Caso de uso: Logout.
|
||||||
|
*/
|
||||||
|
export class LogoutUseCase {
|
||||||
|
constructor(private readonly authRepo: AuthRepository) {}
|
||||||
|
|
||||||
|
async execute(accessToken: string): Promise<void> {
|
||||||
|
await this.authRepo.logout(accessToken);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Caso de uso: Solicitar redefinição de senha.
|
||||||
|
*/
|
||||||
|
export class ForgotPasswordUseCase {
|
||||||
|
constructor(private readonly authRepo: AuthRepository) {}
|
||||||
|
|
||||||
|
async execute(email: string): Promise<void> {
|
||||||
|
await this.authRepo.forgotPassword(email);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Caso de uso: Redefinir senha com token.
|
||||||
|
*/
|
||||||
|
export class ResetPasswordUseCase {
|
||||||
|
constructor(private readonly authRepo: AuthRepository) {}
|
||||||
|
|
||||||
|
async execute(token: string, newPassword: string): Promise<void> {
|
||||||
|
if (newPassword.length < 8) {
|
||||||
|
throw new Error('A nova senha deve ter ao menos 8 caracteres.');
|
||||||
|
}
|
||||||
|
await this.authRepo.resetPassword(token, newPassword);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
import type { FilamentRepository } from '@ports/FilamentRepository';
|
||||||
|
import type { SpoolPresetRepository } from '@ports/SpoolPresetRepository';
|
||||||
|
import type { Filament, CreateFilamentInput } from '@domain/Filament';
|
||||||
|
import { calcNetWeight } from '@domain/Filament';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Caso de uso: Criar Filamento.
|
||||||
|
*
|
||||||
|
* Responsabilidade: buscar o preset selecionado, calcular o peso líquido
|
||||||
|
* e persistir o filamento via repositório.
|
||||||
|
*/
|
||||||
|
export class CreateFilamentUseCase {
|
||||||
|
constructor(
|
||||||
|
private readonly filamentRepo: FilamentRepository,
|
||||||
|
private readonly presetRepo: SpoolPresetRepository,
|
||||||
|
) {}
|
||||||
|
|
||||||
|
async execute(userId: string, input: CreateFilamentInput): Promise<Filament> {
|
||||||
|
const preset = await this.presetRepo.findById(input.spoolPresetId);
|
||||||
|
if (!preset) {
|
||||||
|
throw new Error(`Preset de carretel não encontrado: ${input.spoolPresetId}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const netWeightG = calcNetWeight(input.totalWeightG, preset.spoolWeightG);
|
||||||
|
|
||||||
|
return this.filamentRepo.create(userId, { ...input, netWeightG });
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
import type { FilamentRepository } from '@ports/FilamentRepository';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Caso de uso: Deletar Filamento.
|
||||||
|
*/
|
||||||
|
export class DeleteFilamentUseCase {
|
||||||
|
constructor(private readonly filamentRepo: FilamentRepository) {}
|
||||||
|
|
||||||
|
async execute(id: string, userId: string): Promise<void> {
|
||||||
|
const existing = await this.filamentRepo.findById(id, userId);
|
||||||
|
if (!existing) {
|
||||||
|
throw new Error(`Filamento não encontrado: ${id}`);
|
||||||
|
}
|
||||||
|
await this.filamentRepo.remove(id, userId);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
import type { FilamentRepository } from '@ports/FilamentRepository';
|
||||||
|
import type { Filament, FilamentFilter } from '@domain/Filament';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Caso de uso: Listar Filamentos.
|
||||||
|
*/
|
||||||
|
export class ListFilamentsUseCase {
|
||||||
|
constructor(private readonly filamentRepo: FilamentRepository) {}
|
||||||
|
|
||||||
|
async execute(userId: string, filter?: FilamentFilter): Promise<Filament[]> {
|
||||||
|
return this.filamentRepo.list(userId, filter);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,40 @@
|
|||||||
|
import type { FilamentRepository } from '@ports/FilamentRepository';
|
||||||
|
import type { SpoolPresetRepository } from '@ports/SpoolPresetRepository';
|
||||||
|
import type { Filament, UpdateFilamentInput } from '@domain/Filament';
|
||||||
|
import { calcNetWeight } from '@domain/Filament';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Caso de uso: Atualizar Filamento.
|
||||||
|
*
|
||||||
|
* Se o peso total ou o preset mudaram, recalcula o peso líquido.
|
||||||
|
*/
|
||||||
|
export class UpdateFilamentUseCase {
|
||||||
|
constructor(
|
||||||
|
private readonly filamentRepo: FilamentRepository,
|
||||||
|
private readonly presetRepo: SpoolPresetRepository,
|
||||||
|
) {}
|
||||||
|
|
||||||
|
async execute(id: string, userId: string, input: UpdateFilamentInput): Promise<Filament> {
|
||||||
|
const existing = await this.filamentRepo.findById(id, userId);
|
||||||
|
if (!existing) {
|
||||||
|
throw new Error(`Filamento não encontrado: ${id}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
let netWeightG = existing.netWeightG;
|
||||||
|
|
||||||
|
const totalChanged = input.totalWeightG !== undefined;
|
||||||
|
const presetChanged = input.spoolPresetId !== undefined;
|
||||||
|
|
||||||
|
if (totalChanged || presetChanged) {
|
||||||
|
const presetId = input.spoolPresetId ?? existing.spoolPresetId;
|
||||||
|
const preset = await this.presetRepo.findById(presetId);
|
||||||
|
if (!preset) {
|
||||||
|
throw new Error(`Preset de carretel não encontrado: ${presetId}`);
|
||||||
|
}
|
||||||
|
const totalWeight = input.totalWeightG ?? existing.totalWeightG;
|
||||||
|
netWeightG = calcNetWeight(totalWeight, preset.spoolWeightG);
|
||||||
|
}
|
||||||
|
|
||||||
|
return this.filamentRepo.update(id, userId, { ...input, netWeightG });
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,60 @@
|
|||||||
|
import type { SpoolPresetRepository } from '@ports/SpoolPresetRepository';
|
||||||
|
import type { SpoolPreset, CreateSpoolPresetInput, UpdateSpoolPresetInput } from '@domain/SpoolPreset';
|
||||||
|
import { isUserOwnedPreset } from '@domain/SpoolPreset';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Caso de uso: Listar Presets de Carretéis.
|
||||||
|
* Retorna presets do sistema + presets do usuário.
|
||||||
|
*/
|
||||||
|
export class ListPresetsUseCase {
|
||||||
|
constructor(private readonly presetRepo: SpoolPresetRepository) {}
|
||||||
|
|
||||||
|
async execute(userId: string): Promise<SpoolPreset[]> {
|
||||||
|
return this.presetRepo.list(userId);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Caso de uso: Criar Preset Customizado.
|
||||||
|
*/
|
||||||
|
export class CreatePresetUseCase {
|
||||||
|
constructor(private readonly presetRepo: SpoolPresetRepository) {}
|
||||||
|
|
||||||
|
async execute(userId: string, input: CreateSpoolPresetInput): Promise<SpoolPreset> {
|
||||||
|
return this.presetRepo.create(userId, input);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Caso de uso: Atualizar Preset.
|
||||||
|
* Garante que apenas presets customizados do usuário sejam editáveis.
|
||||||
|
*/
|
||||||
|
export class UpdatePresetUseCase {
|
||||||
|
constructor(private readonly presetRepo: SpoolPresetRepository) {}
|
||||||
|
|
||||||
|
async execute(id: string, userId: string, input: UpdateSpoolPresetInput): Promise<SpoolPreset> {
|
||||||
|
const existing = await this.presetRepo.findById(id);
|
||||||
|
if (!existing) throw new Error(`Preset não encontrado: ${id}`);
|
||||||
|
if (!isUserOwnedPreset(existing)) {
|
||||||
|
throw new Error('Presets do sistema não podem ser editados.');
|
||||||
|
}
|
||||||
|
return this.presetRepo.update(id, userId, input);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Caso de uso: Deletar Preset.
|
||||||
|
* Garante que apenas presets customizados do usuário sejam deletáveis.
|
||||||
|
*/
|
||||||
|
export class DeletePresetUseCase {
|
||||||
|
constructor(private readonly presetRepo: SpoolPresetRepository) {}
|
||||||
|
|
||||||
|
async execute(id: string, userId: string): Promise<void> {
|
||||||
|
const existing = await this.presetRepo.findById(id);
|
||||||
|
if (!existing) throw new Error(`Preset não encontrado: ${id}`);
|
||||||
|
if (!isUserOwnedPreset(existing)) {
|
||||||
|
throw new Error('Presets do sistema não podem ser excluídos.');
|
||||||
|
}
|
||||||
|
await this.presetRepo.remove(id, userId);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,37 @@
|
|||||||
|
/**
|
||||||
|
* Dados agregados do dashboard.
|
||||||
|
* Construído a partir dos filamentos do usuário.
|
||||||
|
*/
|
||||||
|
export interface DashboardData {
|
||||||
|
totalStockKg: number;
|
||||||
|
lowStockCount: number;
|
||||||
|
byMaterial: MaterialSummary[];
|
||||||
|
lowStockFilaments: LowStockFilament[];
|
||||||
|
recentFilaments: RecentFilament[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface MaterialSummary {
|
||||||
|
material: string;
|
||||||
|
count: number;
|
||||||
|
totalKg: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface LowStockFilament {
|
||||||
|
id: string;
|
||||||
|
name: string; // ex: "PETG White"
|
||||||
|
brand: string;
|
||||||
|
material: string;
|
||||||
|
netWeightG: number;
|
||||||
|
percentage: number;
|
||||||
|
colorHex: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface RecentFilament {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
brand: string;
|
||||||
|
material: string;
|
||||||
|
netWeightG: number;
|
||||||
|
percentage: number;
|
||||||
|
colorHex: string;
|
||||||
|
}
|
||||||
@@ -0,0 +1,65 @@
|
|||||||
|
import type { Material } from '@shared/constants';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Entidade de domínio: Filamento.
|
||||||
|
*
|
||||||
|
* Representa um rolo de filamento no inventário do usuário.
|
||||||
|
* Esta é uma entidade pura — sem dependências de UI, API ou banco de dados.
|
||||||
|
*/
|
||||||
|
export interface Filament {
|
||||||
|
readonly id: string;
|
||||||
|
readonly userId: string;
|
||||||
|
material: Material;
|
||||||
|
brand: string;
|
||||||
|
model: string | null;
|
||||||
|
colorHex: string;
|
||||||
|
spoolPresetId: string;
|
||||||
|
totalWeightG: number;
|
||||||
|
netWeightG: number;
|
||||||
|
tempHotendC: number | null;
|
||||||
|
tempBedC: number | null;
|
||||||
|
flowFactorPct: number | null;
|
||||||
|
notes: string | null;
|
||||||
|
readonly updatedAt: string; // ISO 8601 — usado no sync offline
|
||||||
|
readonly createdAt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* DTO para criação de um novo filamento.
|
||||||
|
* Campos calculados (netWeightG) são omitidos — derivados no use case.
|
||||||
|
*/
|
||||||
|
export type CreateFilamentInput = Omit<Filament, 'id' | 'userId' | 'netWeightG' | 'createdAt' | 'updatedAt'>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* DTO para atualização de um filamento existente.
|
||||||
|
*/
|
||||||
|
export type UpdateFilamentInput = Partial<CreateFilamentInput>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Filtros disponíveis na listagem de filamentos.
|
||||||
|
*/
|
||||||
|
export interface FilamentFilter {
|
||||||
|
material?: Material;
|
||||||
|
brand?: string;
|
||||||
|
search?: string;
|
||||||
|
stockLevel?: 'low' | 'medium' | 'ok';
|
||||||
|
sortBy?: 'net_weight_asc' | 'net_weight_desc' | 'created_at_desc';
|
||||||
|
page?: number;
|
||||||
|
perPage?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Calcula a porcentagem de filamento disponível em relação ao peso total
|
||||||
|
* de um rolo cheio (1000g por convenção).
|
||||||
|
*/
|
||||||
|
export function calcFilamentPercentage(filament: Filament): number {
|
||||||
|
const base = 1000;
|
||||||
|
return Math.min(100, Math.max(0, Math.round((filament.netWeightG / base) * 100)));
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Calcula o peso líquido dado o peso total e o peso do carretel vazio.
|
||||||
|
*/
|
||||||
|
export function calcNetWeight(totalWeightG: number, spoolWeightG: number): number {
|
||||||
|
return Math.max(0, totalWeightG - spoolWeightG);
|
||||||
|
}
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
/**
|
||||||
|
* Entidade de domínio: Preset de Carretel.
|
||||||
|
*
|
||||||
|
* Representa o peso do carretel vazio de uma marca/modelo.
|
||||||
|
* Presets do sistema (isSystem = true) são somente leitura.
|
||||||
|
*/
|
||||||
|
export interface SpoolPreset {
|
||||||
|
readonly id: string;
|
||||||
|
name: string;
|
||||||
|
spoolWeightG: number;
|
||||||
|
readonly isSystem: boolean;
|
||||||
|
readonly userId: string | null; // null para presets do sistema
|
||||||
|
readonly createdAt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* DTO para criação de um preset customizado.
|
||||||
|
*/
|
||||||
|
export type CreateSpoolPresetInput = Pick<SpoolPreset, 'name' | 'spoolWeightG'>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* DTO para atualização de um preset customizado.
|
||||||
|
*/
|
||||||
|
export type UpdateSpoolPresetInput = Partial<CreateSpoolPresetInput>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Guard: retorna true se o preset pode ser editado/deletado pelo usuário.
|
||||||
|
*/
|
||||||
|
export function isUserOwnedPreset(preset: SpoolPreset): boolean {
|
||||||
|
return !preset.isSystem && preset.userId !== null;
|
||||||
|
}
|
||||||
@@ -0,0 +1,44 @@
|
|||||||
|
/**
|
||||||
|
* Entidade de domínio: Usuário.
|
||||||
|
*
|
||||||
|
* Representa o usuário autenticado na sessão.
|
||||||
|
*/
|
||||||
|
export interface User {
|
||||||
|
readonly id: string;
|
||||||
|
email: string;
|
||||||
|
name: string | null;
|
||||||
|
readonly googleId: string | null;
|
||||||
|
readonly createdAt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Sessão de autenticação persistida localmente.
|
||||||
|
*/
|
||||||
|
export interface AuthSession {
|
||||||
|
readonly accessToken: string;
|
||||||
|
readonly refreshToken: string;
|
||||||
|
readonly user: User;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* DTO para login com e-mail/senha.
|
||||||
|
*/
|
||||||
|
export interface LoginInput {
|
||||||
|
email: string;
|
||||||
|
password: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* DTO para cadastro.
|
||||||
|
*/
|
||||||
|
export interface RegisterInput {
|
||||||
|
email: string;
|
||||||
|
password: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* DTO para autenticação via OAuth Google.
|
||||||
|
*/
|
||||||
|
export interface GoogleOAuthInput {
|
||||||
|
idToken: string;
|
||||||
|
}
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
import type { AuthSession, LoginInput, RegisterInput, GoogleOAuthInput } from '@domain/User';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Contrato para o repositório de autenticação.
|
||||||
|
* Abstrai o transporte (REST) das operações de auth.
|
||||||
|
*/
|
||||||
|
export interface AuthRepository {
|
||||||
|
login(input: LoginInput): Promise<AuthSession>;
|
||||||
|
register(input: RegisterInput): Promise<AuthSession>;
|
||||||
|
loginWithGoogle(input: GoogleOAuthInput): Promise<AuthSession>;
|
||||||
|
refreshToken(refreshToken: string): Promise<Pick<AuthSession, 'accessToken' | 'refreshToken'>>;
|
||||||
|
logout(accessToken: string): Promise<void>;
|
||||||
|
forgotPassword(email: string): Promise<void>;
|
||||||
|
verifyEmail(token: string): Promise<void>;
|
||||||
|
resetPassword(token: string, newPassword: string): Promise<void>;
|
||||||
|
}
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
import type { Filament, CreateFilamentInput, UpdateFilamentInput, FilamentFilter } from '@domain/Filament';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Contrato que qualquer repositório de filamentos deve implementar.
|
||||||
|
* Tanto o adapter local (SQLite) quanto o remoto (API) implementam esta interface.
|
||||||
|
*/
|
||||||
|
export interface FilamentRepository {
|
||||||
|
findById(id: string, userId: string): Promise<Filament | null>;
|
||||||
|
list(userId: string, filter?: FilamentFilter): Promise<Filament[]>;
|
||||||
|
create(userId: string, input: CreateFilamentInput & { netWeightG: number }): Promise<Filament>;
|
||||||
|
update(id: string, userId: string, input: UpdateFilamentInput & { netWeightG?: number }): Promise<Filament>;
|
||||||
|
remove(id: string, userId: string): Promise<void>;
|
||||||
|
}
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
import type { SpoolPreset, CreateSpoolPresetInput, UpdateSpoolPresetInput } from '@domain/SpoolPreset';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Contrato que qualquer repositório de presets de carretéis deve implementar.
|
||||||
|
*/
|
||||||
|
export interface SpoolPresetRepository {
|
||||||
|
list(userId: string): Promise<SpoolPreset[]>;
|
||||||
|
findById(id: string): Promise<SpoolPreset | null>;
|
||||||
|
create(userId: string, input: CreateSpoolPresetInput): Promise<SpoolPreset>;
|
||||||
|
update(id: string, userId: string, input: UpdateSpoolPresetInput): Promise<SpoolPreset>;
|
||||||
|
remove(id: string, userId: string): Promise<void>;
|
||||||
|
}
|
||||||
@@ -0,0 +1,40 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { View, StyleSheet } from 'react-native';
|
||||||
|
import { colors, radius } from '@shared/theme';
|
||||||
|
|
||||||
|
interface ColorSwatchProps {
|
||||||
|
colorHex: string;
|
||||||
|
size?: number;
|
||||||
|
borderRadius?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Swatch de cor do filamento.
|
||||||
|
* Exibe um quadrado (ou círculo) com a cor hex do filamento.
|
||||||
|
*/
|
||||||
|
export function ColorSwatch({
|
||||||
|
colorHex,
|
||||||
|
size = 48,
|
||||||
|
borderRadius,
|
||||||
|
}: ColorSwatchProps): React.ReactElement {
|
||||||
|
return (
|
||||||
|
<View
|
||||||
|
style={[
|
||||||
|
styles.swatch,
|
||||||
|
{
|
||||||
|
width: size,
|
||||||
|
height: size,
|
||||||
|
backgroundColor: colorHex,
|
||||||
|
borderRadius: borderRadius ?? Math.round(size * 0.2),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
swatch: {
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: 'rgba(255,255,255,0.08)',
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -0,0 +1,88 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
|
||||||
|
import { useRouter } from 'expo-router';
|
||||||
|
import type { Filament } from '@domain/Filament';
|
||||||
|
import { calcFilamentPercentage } from '@domain/Filament';
|
||||||
|
import { ColorSwatch } from './ColorSwatch';
|
||||||
|
import { StockBadge } from './StockBar';
|
||||||
|
import { colors, typography, spacing, radius } from '@shared/theme';
|
||||||
|
import { formatWeight } from '@shared/utils/filament';
|
||||||
|
|
||||||
|
interface FilamentCardProps {
|
||||||
|
filament: Filament;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Card de filamento usado na listagem do Inventário.
|
||||||
|
* Exibe: swatch de cor, nome (modelo), marca, material, temperatura, peso e badge de %.
|
||||||
|
*/
|
||||||
|
export function FilamentCard({ filament }: FilamentCardProps): React.ReactElement {
|
||||||
|
const router = useRouter();
|
||||||
|
const percentage = calcFilamentPercentage(filament);
|
||||||
|
const name = filament.model ?? filament.material;
|
||||||
|
|
||||||
|
function handlePress(): void {
|
||||||
|
router.push(`/inventory/${filament.id}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<TouchableOpacity
|
||||||
|
activeOpacity={0.75}
|
||||||
|
onPress={handlePress}
|
||||||
|
style={styles.card}
|
||||||
|
>
|
||||||
|
<ColorSwatch colorHex={filament.colorHex} size={48} />
|
||||||
|
|
||||||
|
<View style={styles.info}>
|
||||||
|
<Text style={styles.name}>{name}</Text>
|
||||||
|
<Text style={styles.meta}>
|
||||||
|
{filament.brand} · {filament.material}
|
||||||
|
{filament.tempHotendC ? ` · ${filament.tempHotendC}°C` : ''}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={styles.right}>
|
||||||
|
<Text style={styles.weight}>{formatWeight(filament.netWeightG)}</Text>
|
||||||
|
<StockBadge percentage={percentage} />
|
||||||
|
</View>
|
||||||
|
</TouchableOpacity>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
card: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: spacing[3],
|
||||||
|
backgroundColor: colors.bgSurface,
|
||||||
|
borderRadius: radius.lg,
|
||||||
|
padding: spacing[4],
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: colors.border,
|
||||||
|
},
|
||||||
|
info: {
|
||||||
|
flex: 1,
|
||||||
|
gap: 2,
|
||||||
|
},
|
||||||
|
name: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.base,
|
||||||
|
fontWeight: typography.fontWeight.semibold,
|
||||||
|
color: colors.textPrimary,
|
||||||
|
},
|
||||||
|
meta: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.sm,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
},
|
||||||
|
right: {
|
||||||
|
alignItems: 'flex-end',
|
||||||
|
gap: spacing[1],
|
||||||
|
},
|
||||||
|
weight: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.base,
|
||||||
|
fontWeight: typography.fontWeight.bold,
|
||||||
|
color: colors.textPrimary,
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -0,0 +1,68 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { View, Text, StyleSheet } from 'react-native';
|
||||||
|
import { colors, typography, radius, spacing } from '@shared/theme';
|
||||||
|
import { getStockColor } from '@shared/theme';
|
||||||
|
|
||||||
|
interface StockBarProps {
|
||||||
|
percentage: number;
|
||||||
|
height?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Barra de progresso de estoque.
|
||||||
|
* Muda de cor baseado nos limiares definidos no PRD (15% / 35%).
|
||||||
|
*/
|
||||||
|
export function StockBar({ percentage, height = 4 }: StockBarProps): React.ReactElement {
|
||||||
|
const color = getStockColor(percentage);
|
||||||
|
const width = `${Math.min(100, Math.max(0, percentage))}%`;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={[styles.track, { height }]}>
|
||||||
|
<View style={{ ...styles.fill, width: width as `${number}%`, backgroundColor: color, height }} />
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
interface StockBadgeProps {
|
||||||
|
percentage: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Badge numérico de estoque com cor dinâmica.
|
||||||
|
*/
|
||||||
|
export function StockBadge({ percentage }: StockBadgeProps): React.ReactElement {
|
||||||
|
const color = getStockColor(percentage);
|
||||||
|
const bg = percentage <= 15
|
||||||
|
? 'rgba(255,107,107,0.15)'
|
||||||
|
: percentage <= 35
|
||||||
|
? 'rgba(255,159,67,0.15)'
|
||||||
|
: 'rgba(56,188,194,0.15)';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={[styles.badge, { backgroundColor: bg }]}>
|
||||||
|
<Text style={[styles.badgeText, { color }]}>{percentage}%</Text>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
track: {
|
||||||
|
width: '100%',
|
||||||
|
backgroundColor: colors.bgHover,
|
||||||
|
borderRadius: radius.full,
|
||||||
|
overflow: 'hidden',
|
||||||
|
},
|
||||||
|
fill: {
|
||||||
|
borderRadius: radius.full,
|
||||||
|
},
|
||||||
|
badge: {
|
||||||
|
paddingHorizontal: spacing[2],
|
||||||
|
paddingVertical: 3,
|
||||||
|
borderRadius: radius.sm,
|
||||||
|
},
|
||||||
|
badgeText: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.xs,
|
||||||
|
fontWeight: typography.fontWeight.bold,
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -0,0 +1,75 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import { useRouter } from 'expo-router';
|
||||||
|
import { colors, typography, spacing } from '@shared/theme';
|
||||||
|
|
||||||
|
interface HeaderProps {
|
||||||
|
title: string;
|
||||||
|
/** Mostra botão de voltar. Padrão: false */
|
||||||
|
showBack?: boolean;
|
||||||
|
/** Ação customizada para o botão de voltar */
|
||||||
|
onBack?: () => void;
|
||||||
|
rightAction?: React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Header de tela padrão do MeowSpool.
|
||||||
|
* - Título centralizado
|
||||||
|
* - Botão de voltar opcional (usa expo-router)
|
||||||
|
* - Slot para ação à direita (ícone, botão, etc.)
|
||||||
|
*/
|
||||||
|
export function Header({ title, showBack = false, onBack, rightAction }: HeaderProps): React.ReactElement {
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
function handleBack(): void {
|
||||||
|
if (onBack) {
|
||||||
|
onBack();
|
||||||
|
} else {
|
||||||
|
router.back();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={styles.header}>
|
||||||
|
<View style={styles.left}>
|
||||||
|
{showBack ? (
|
||||||
|
<TouchableOpacity onPress={handleBack} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
|
||||||
|
<Ionicons name="chevron-back" size={24} color={colors.textPrimary} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
) : null}
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<Text style={styles.title}>{title}</Text>
|
||||||
|
|
||||||
|
<View style={styles.right}>{rightAction ?? null}</View>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
header: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
paddingHorizontal: spacing[5],
|
||||||
|
paddingVertical: spacing[4],
|
||||||
|
minHeight: 56,
|
||||||
|
},
|
||||||
|
left: {
|
||||||
|
width: 40,
|
||||||
|
alignItems: 'flex-start',
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
flex: 1,
|
||||||
|
textAlign: 'center',
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.md,
|
||||||
|
fontWeight: typography.fontWeight.semibold,
|
||||||
|
color: colors.textPrimary,
|
||||||
|
},
|
||||||
|
right: {
|
||||||
|
width: 40,
|
||||||
|
alignItems: 'flex-end',
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -0,0 +1,87 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import {
|
||||||
|
SafeAreaView,
|
||||||
|
ScrollView,
|
||||||
|
KeyboardAvoidingView,
|
||||||
|
View,
|
||||||
|
Platform,
|
||||||
|
StyleSheet,
|
||||||
|
type ViewStyle,
|
||||||
|
} from 'react-native';
|
||||||
|
import { colors, spacing } from '@shared/theme';
|
||||||
|
|
||||||
|
interface ScreenProps {
|
||||||
|
children: React.ReactNode;
|
||||||
|
/** Permite scroll vertical. Padrão: false */
|
||||||
|
scrollable?: boolean;
|
||||||
|
/** Evita que o teclado cubra campos de formulário. Padrão: false */
|
||||||
|
keyboardAvoiding?: boolean;
|
||||||
|
/** Padding horizontal. Padrão: 20 */
|
||||||
|
horizontalPadding?: number;
|
||||||
|
style?: ViewStyle;
|
||||||
|
contentStyle?: ViewStyle;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Wrapper de tela base.
|
||||||
|
* Aplica SafeArea, cor de fundo e opcionalmente scroll/teclado.
|
||||||
|
*/
|
||||||
|
export function Screen({
|
||||||
|
children,
|
||||||
|
scrollable = false,
|
||||||
|
keyboardAvoiding = false,
|
||||||
|
horizontalPadding = spacing[5],
|
||||||
|
style,
|
||||||
|
contentStyle,
|
||||||
|
}: ScreenProps): React.ReactElement {
|
||||||
|
const inner = scrollable ? (
|
||||||
|
<ScrollView
|
||||||
|
style={styles.scroll}
|
||||||
|
contentContainerStyle={[
|
||||||
|
styles.scrollContent,
|
||||||
|
{ paddingHorizontal: horizontalPadding },
|
||||||
|
contentStyle,
|
||||||
|
]}
|
||||||
|
showsVerticalScrollIndicator={false}
|
||||||
|
keyboardShouldPersistTaps="handled"
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</ScrollView>
|
||||||
|
) : (
|
||||||
|
<View style={[styles.flex, { paddingHorizontal: horizontalPadding }, contentStyle]}>
|
||||||
|
{children}
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
|
||||||
|
const content = keyboardAvoiding ? (
|
||||||
|
<KeyboardAvoidingView
|
||||||
|
style={styles.flex}
|
||||||
|
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
||||||
|
keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : 20}
|
||||||
|
>
|
||||||
|
{inner}
|
||||||
|
</KeyboardAvoidingView>
|
||||||
|
) : (
|
||||||
|
inner
|
||||||
|
);
|
||||||
|
|
||||||
|
return <SafeAreaView style={[styles.safeArea, style]}>{content}</SafeAreaView>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
safeArea: {
|
||||||
|
flex: 1,
|
||||||
|
backgroundColor: colors.bgBase,
|
||||||
|
},
|
||||||
|
flex: {
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
scroll: {
|
||||||
|
flex: 1,
|
||||||
|
backgroundColor: colors.bgBase,
|
||||||
|
},
|
||||||
|
scrollContent: {
|
||||||
|
flexGrow: 1,
|
||||||
|
paddingBottom: spacing[10],
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -0,0 +1,41 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { View, Text, StyleSheet } from 'react-native';
|
||||||
|
import { colors, typography, radius, spacing } from '@shared/theme';
|
||||||
|
import { getStockColor, getStockBgColor } from '@shared/theme';
|
||||||
|
|
||||||
|
interface BadgeProps {
|
||||||
|
label: string;
|
||||||
|
/** Se fornecido, a cor muda de acordo com o limiar de estoque */
|
||||||
|
stockPercentage?: number;
|
||||||
|
color?: string;
|
||||||
|
bgColor?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Badge genérico do MeowSpool.
|
||||||
|
* Usado para material, percentual de estoque e status.
|
||||||
|
*/
|
||||||
|
export function Badge({ label, stockPercentage, color, bgColor }: BadgeProps): React.ReactElement {
|
||||||
|
const resolvedColor = stockPercentage !== undefined ? getStockColor(stockPercentage) : (color ?? colors.accent);
|
||||||
|
const resolvedBg = stockPercentage !== undefined ? getStockBgColor(stockPercentage) : (bgColor ?? colors.accentMuted);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={[styles.badge, { backgroundColor: resolvedBg }]}>
|
||||||
|
<Text style={[styles.label, { color: resolvedColor }]}>{label}</Text>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
badge: {
|
||||||
|
paddingHorizontal: spacing[2],
|
||||||
|
paddingVertical: 3,
|
||||||
|
borderRadius: radius.sm,
|
||||||
|
alignSelf: 'flex-start',
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.xs,
|
||||||
|
fontWeight: typography.fontWeight.bold,
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -0,0 +1,106 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import {
|
||||||
|
TouchableOpacity,
|
||||||
|
Text,
|
||||||
|
ActivityIndicator,
|
||||||
|
StyleSheet,
|
||||||
|
type TouchableOpacityProps,
|
||||||
|
} from 'react-native';
|
||||||
|
import { colors, typography, radius, spacing } from '@shared/theme';
|
||||||
|
|
||||||
|
type Variant = 'primary' | 'secondary' | 'ghost' | 'danger';
|
||||||
|
|
||||||
|
interface ButtonProps extends TouchableOpacityProps {
|
||||||
|
label: string;
|
||||||
|
variant?: Variant;
|
||||||
|
isLoading?: boolean;
|
||||||
|
leftIcon?: React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Botão base do MeowSpool.
|
||||||
|
* - primary: fundo accent (#38BCC2), texto escuro — ação principal
|
||||||
|
* - secondary: fundo surface com borda — ação secundária
|
||||||
|
* - ghost: sem fundo — ação terciária / links
|
||||||
|
* - danger: fundo vermelho translúcido — ações destrutivas
|
||||||
|
*/
|
||||||
|
export function Button({
|
||||||
|
label,
|
||||||
|
variant = 'primary',
|
||||||
|
isLoading = false,
|
||||||
|
leftIcon,
|
||||||
|
disabled,
|
||||||
|
style,
|
||||||
|
...props
|
||||||
|
}: ButtonProps): React.ReactElement {
|
||||||
|
const isDisabled = disabled || isLoading;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<TouchableOpacity
|
||||||
|
activeOpacity={0.8}
|
||||||
|
disabled={isDisabled}
|
||||||
|
style={[styles.base, styles[variant], isDisabled && styles.disabled, style]}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{isLoading ? (
|
||||||
|
<ActivityIndicator color={variant === 'primary' ? colors.bgBase : colors.accent} />
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{leftIcon}
|
||||||
|
<Text style={[styles.label, styles[`${variant}Label`]]}>{label}</Text>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</TouchableOpacity>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
base: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
gap: spacing[2],
|
||||||
|
borderRadius: radius.lg,
|
||||||
|
paddingVertical: spacing[4],
|
||||||
|
paddingHorizontal: spacing[6],
|
||||||
|
minHeight: 52,
|
||||||
|
},
|
||||||
|
// ── Variantes ───────────────────────────────────────────────
|
||||||
|
primary: {
|
||||||
|
backgroundColor: colors.accent,
|
||||||
|
},
|
||||||
|
secondary: {
|
||||||
|
backgroundColor: colors.bgSurface,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: colors.border,
|
||||||
|
},
|
||||||
|
ghost: {
|
||||||
|
backgroundColor: colors.transparent,
|
||||||
|
},
|
||||||
|
danger: {
|
||||||
|
backgroundColor: 'rgba(255,107,107,0.12)',
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: colors.error,
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
opacity: 0.4,
|
||||||
|
},
|
||||||
|
// ── Labels ──────────────────────────────────────────────────
|
||||||
|
label: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.base,
|
||||||
|
fontWeight: typography.fontWeight.semibold,
|
||||||
|
},
|
||||||
|
primaryLabel: {
|
||||||
|
color: colors.bgBase,
|
||||||
|
},
|
||||||
|
secondaryLabel: {
|
||||||
|
color: colors.textPrimary,
|
||||||
|
},
|
||||||
|
ghostLabel: {
|
||||||
|
color: colors.accent,
|
||||||
|
},
|
||||||
|
dangerLabel: {
|
||||||
|
color: colors.error,
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { View, StyleSheet, type ViewProps } from 'react-native';
|
||||||
|
import { colors, radius, spacing } from '@shared/theme';
|
||||||
|
|
||||||
|
interface CardProps extends ViewProps {
|
||||||
|
children: React.ReactNode;
|
||||||
|
padding?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Container card com fundo surface e borda sutil.
|
||||||
|
*/
|
||||||
|
export function Card({ children, padding = spacing[4], style, ...props }: CardProps): React.ReactElement {
|
||||||
|
return (
|
||||||
|
<View style={[styles.card, { padding }, style]} {...props}>
|
||||||
|
{children}
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
card: {
|
||||||
|
backgroundColor: colors.bgSurface,
|
||||||
|
borderRadius: radius.lg,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: colors.border,
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -0,0 +1,125 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import {
|
||||||
|
View,
|
||||||
|
TextInput,
|
||||||
|
Text,
|
||||||
|
TouchableOpacity,
|
||||||
|
StyleSheet,
|
||||||
|
type TextInputProps,
|
||||||
|
} from 'react-native';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import { colors, typography, radius, spacing } from '@shared/theme';
|
||||||
|
|
||||||
|
interface InputProps extends TextInputProps {
|
||||||
|
label?: string;
|
||||||
|
error?: string;
|
||||||
|
leftIcon?: React.ReactNode;
|
||||||
|
isPassword?: boolean;
|
||||||
|
/** Text suffix rendered to the right of the input (e.g. "g" for grams) */
|
||||||
|
rightLabel?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Campo de entrada base do MeowSpool.
|
||||||
|
* Suporta label, ícone à esquerda, toggle de senha e mensagem de erro.
|
||||||
|
*/
|
||||||
|
export function Input({
|
||||||
|
label,
|
||||||
|
error,
|
||||||
|
leftIcon,
|
||||||
|
isPassword = false,
|
||||||
|
rightLabel,
|
||||||
|
style,
|
||||||
|
...props
|
||||||
|
}: InputProps): React.ReactElement {
|
||||||
|
const [isVisible, setIsVisible] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={styles.wrapper}>
|
||||||
|
{label ? <Text style={styles.label}>{label}</Text> : null}
|
||||||
|
|
||||||
|
<View style={[styles.container, error ? styles.containerError : null]}>
|
||||||
|
{leftIcon ? <View style={styles.iconLeft}>{leftIcon}</View> : null}
|
||||||
|
|
||||||
|
<TextInput
|
||||||
|
style={[styles.input, style]}
|
||||||
|
placeholderTextColor={colors.textSecondary}
|
||||||
|
secureTextEntry={isPassword && !isVisible}
|
||||||
|
autoCapitalize="none"
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{isPassword ? (
|
||||||
|
<TouchableOpacity
|
||||||
|
onPress={() => setIsVisible((v) => !v)}
|
||||||
|
style={styles.iconRight}
|
||||||
|
hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
|
||||||
|
>
|
||||||
|
<Ionicons
|
||||||
|
name={isVisible ? 'eye-off-outline' : 'eye-outline'}
|
||||||
|
size={20}
|
||||||
|
color={colors.textSecondary}
|
||||||
|
/>
|
||||||
|
</TouchableOpacity>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{rightLabel && !isPassword ? (
|
||||||
|
<Text style={styles.rightLabel}>{rightLabel}</Text>
|
||||||
|
) : null}
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{error ? <Text style={styles.error}>{error}</Text> : null}
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
wrapper: {
|
||||||
|
gap: spacing[2],
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.xs,
|
||||||
|
fontWeight: typography.fontWeight.semibold,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
textTransform: 'uppercase',
|
||||||
|
letterSpacing: 0.8,
|
||||||
|
},
|
||||||
|
container: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
backgroundColor: colors.bgSurface,
|
||||||
|
borderRadius: radius.md,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: colors.border,
|
||||||
|
paddingHorizontal: spacing[4],
|
||||||
|
minHeight: 52,
|
||||||
|
},
|
||||||
|
containerError: {
|
||||||
|
borderColor: colors.error,
|
||||||
|
},
|
||||||
|
iconLeft: {
|
||||||
|
marginRight: spacing[3],
|
||||||
|
},
|
||||||
|
iconRight: {
|
||||||
|
marginLeft: spacing[2],
|
||||||
|
},
|
||||||
|
input: {
|
||||||
|
flex: 1,
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.base,
|
||||||
|
color: colors.textPrimary,
|
||||||
|
paddingVertical: spacing[4],
|
||||||
|
},
|
||||||
|
error: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.xs,
|
||||||
|
color: colors.error,
|
||||||
|
},
|
||||||
|
rightLabel: {
|
||||||
|
fontFamily: typography.fontFamily.ui,
|
||||||
|
fontSize: typography.fontSize.base,
|
||||||
|
color: colors.textSecondary,
|
||||||
|
marginLeft: spacing[2],
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -0,0 +1,32 @@
|
|||||||
|
/** Constantes globais da aplicação */
|
||||||
|
|
||||||
|
export const APP_NAME = 'MeowSpool';
|
||||||
|
export const APP_SCHEME = 'meowspool';
|
||||||
|
|
||||||
|
/** URL base da API — substituída por variável de ambiente em produção */
|
||||||
|
export const API_BASE_URL = process.env.EXPO_PUBLIC_API_URL ?? 'http://localhost:3000/api/v1';
|
||||||
|
|
||||||
|
/** Chave usada no SecureStore para o access token JWT */
|
||||||
|
export const SECURE_STORE_ACCESS_TOKEN = 'meowspool_access_token';
|
||||||
|
|
||||||
|
/** Chave usada no SecureStore para o refresh token */
|
||||||
|
export const SECURE_STORE_REFRESH_TOKEN = 'meowspool_refresh_token';
|
||||||
|
|
||||||
|
/** Nome do banco SQLite local */
|
||||||
|
export const LOCAL_DB_NAME = 'meowspool.db';
|
||||||
|
|
||||||
|
/** Limiar de estoque baixo (%) */
|
||||||
|
export const STOCK_THRESHOLD_LOW = 15;
|
||||||
|
|
||||||
|
/** Limiar de estoque médio (%) */
|
||||||
|
export const STOCK_THRESHOLD_MEDIUM = 35;
|
||||||
|
|
||||||
|
/** Peso do rolo padrão para calcular % (1000g) */
|
||||||
|
export const DEFAULT_SPOOL_TOTAL_WEIGHT_G = 1000;
|
||||||
|
|
||||||
|
/** Tamanho padrão da etiqueta SVG exportada */
|
||||||
|
export const LABEL_DEFAULT_WIDTH_MM = 50;
|
||||||
|
export const LABEL_DEFAULT_HEIGHT_MM = 30;
|
||||||
|
|
||||||
|
export const MATERIALS = ['PLA', 'ABS', 'PETG', 'TPU', 'ASA', 'PA', 'PC'] as const;
|
||||||
|
export type Material = (typeof MATERIALS)[number];
|
||||||
@@ -0,0 +1,140 @@
|
|||||||
|
/**
|
||||||
|
* MeowSpool Design Tokens
|
||||||
|
*
|
||||||
|
* Paleta siamês: tons quentes/escuros com accent azul-aço
|
||||||
|
* inspirados nos olhos do gato siamês.
|
||||||
|
*
|
||||||
|
* Fonte única de verdade para cores, tipografia e espaçamento.
|
||||||
|
*/
|
||||||
|
|
||||||
|
export const colors = {
|
||||||
|
// ── Backgrounds ────────────────────────────────────────────
|
||||||
|
bgBase: '#1E1B18', // Fundo geral
|
||||||
|
bgSurface: '#2A2622', // Cards, containers, widgets
|
||||||
|
bgHover: '#332F2B', // Hover em cards e itens de lista
|
||||||
|
|
||||||
|
// ── Textos ─────────────────────────────────────────────────
|
||||||
|
textPrimary: '#F5EEDC', // Títulos, peso líquido
|
||||||
|
textSecondary: '#C9C1B0',// Descrições, labels
|
||||||
|
|
||||||
|
// ── Accent ─────────────────────────────────────────────────
|
||||||
|
accent: '#38BCC2', // Botões de ação, elementos ativos
|
||||||
|
accentMuted: '#38BCC226',// Backgrounds de badges (10% opacidade)
|
||||||
|
|
||||||
|
// ── Estoque (alertas) ───────────────────────────────────────
|
||||||
|
stockLow: '#FF6B6B', // ≤ 15% — vermelho
|
||||||
|
stockMedium: '#FF9F43', // ≤ 35% — laranja
|
||||||
|
stockOk: '#38BCC2', // > 35% — accent
|
||||||
|
|
||||||
|
// ── Utilitários ─────────────────────────────────────────────
|
||||||
|
white: '#FFFFFF',
|
||||||
|
black: '#000000',
|
||||||
|
transparent: 'transparent',
|
||||||
|
border: '#3D3830', // Bordas sutis
|
||||||
|
overlay: 'rgba(0,0,0,0.6)',
|
||||||
|
error: '#FF6B6B',
|
||||||
|
success: '#4CAF50',
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
export const typography = {
|
||||||
|
// ── Famílias ────────────────────────────────────────────────
|
||||||
|
fontFamily: {
|
||||||
|
ui: 'Inter', // Texto geral da interface
|
||||||
|
mono: 'JetBrains Mono', // URLs, slugs, código
|
||||||
|
},
|
||||||
|
|
||||||
|
// ── Tamanhos ────────────────────────────────────────────────
|
||||||
|
fontSize: {
|
||||||
|
xs: 11,
|
||||||
|
sm: 13,
|
||||||
|
base: 15,
|
||||||
|
md: 17,
|
||||||
|
lg: 20,
|
||||||
|
xl: 24,
|
||||||
|
'2xl': 28,
|
||||||
|
'3xl': 34,
|
||||||
|
},
|
||||||
|
|
||||||
|
// ── Pesos ───────────────────────────────────────────────────
|
||||||
|
fontWeight: {
|
||||||
|
regular: '400' as const,
|
||||||
|
medium: '500' as const,
|
||||||
|
semibold: '600' as const,
|
||||||
|
bold: '700' as const,
|
||||||
|
},
|
||||||
|
|
||||||
|
// ── Alturas de linha ────────────────────────────────────────
|
||||||
|
lineHeight: {
|
||||||
|
tight: 1.2,
|
||||||
|
normal: 1.5,
|
||||||
|
relaxed: 1.7,
|
||||||
|
},
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
export const spacing = {
|
||||||
|
0: 0,
|
||||||
|
1: 4,
|
||||||
|
2: 8,
|
||||||
|
3: 12,
|
||||||
|
4: 16,
|
||||||
|
5: 20,
|
||||||
|
6: 24,
|
||||||
|
7: 28,
|
||||||
|
8: 32,
|
||||||
|
10: 40,
|
||||||
|
12: 48,
|
||||||
|
16: 64,
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
export const radius = {
|
||||||
|
sm: 6,
|
||||||
|
md: 10,
|
||||||
|
lg: 14,
|
||||||
|
xl: 20,
|
||||||
|
full: 9999,
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
export const shadows = {
|
||||||
|
sm: {
|
||||||
|
shadowColor: colors.black,
|
||||||
|
shadowOffset: { width: 0, height: 1 },
|
||||||
|
shadowOpacity: 0.2,
|
||||||
|
shadowRadius: 3,
|
||||||
|
elevation: 2,
|
||||||
|
},
|
||||||
|
md: {
|
||||||
|
shadowColor: colors.black,
|
||||||
|
shadowOffset: { width: 0, height: 4 },
|
||||||
|
shadowOpacity: 0.25,
|
||||||
|
shadowRadius: 8,
|
||||||
|
elevation: 4,
|
||||||
|
},
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Retorna a cor de alerta de estoque baseada na porcentagem.
|
||||||
|
*/
|
||||||
|
export function getStockColor(percentage: number): string {
|
||||||
|
if (percentage <= 15) return colors.stockLow;
|
||||||
|
if (percentage <= 35) return colors.stockMedium;
|
||||||
|
return colors.stockOk;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Retorna a cor de background muted do alerta baseado na porcentagem.
|
||||||
|
*/
|
||||||
|
export function getStockBgColor(percentage: number): string {
|
||||||
|
if (percentage <= 15) return 'rgba(255,107,107,0.15)';
|
||||||
|
if (percentage <= 35) return 'rgba(255,159,67,0.15)';
|
||||||
|
return colors.accentMuted;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const theme = {
|
||||||
|
colors,
|
||||||
|
typography,
|
||||||
|
spacing,
|
||||||
|
radius,
|
||||||
|
shadows,
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
export type Theme = typeof theme;
|
||||||
@@ -0,0 +1,49 @@
|
|||||||
|
import { DEFAULT_SPOOL_TOTAL_WEIGHT_G } from '../constants';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Calcula a porcentagem de filamento disponível.
|
||||||
|
* Usa 1000g como base (peso total do rolo cheio) por convenção.
|
||||||
|
*/
|
||||||
|
export function calcFilamentPercentage(netWeightG: number): number {
|
||||||
|
const pct = Math.round((netWeightG / DEFAULT_SPOOL_TOTAL_WEIGHT_G) * 100);
|
||||||
|
return Math.min(100, Math.max(0, pct));
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Formata gramas para exibição amigável (ex: 1200g → "1.2 kg", 750g → "750g").
|
||||||
|
*/
|
||||||
|
export function formatWeight(grams: number): string {
|
||||||
|
if (grams >= 1000) {
|
||||||
|
const kg = (grams / 1000).toFixed(1);
|
||||||
|
return `${kg} kg`;
|
||||||
|
}
|
||||||
|
return `${grams}g`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Gera um slug legível a partir de modelo, marca e cor (usado em URLs e QR).
|
||||||
|
* Ex: "PLA Rapid", "Elegoo", "Blue" → "pla-rapid-elegoo-blue"
|
||||||
|
*/
|
||||||
|
export function generateSlug(...parts: string[]): string {
|
||||||
|
return parts
|
||||||
|
.join('-')
|
||||||
|
.toLowerCase()
|
||||||
|
.replace(/\s+/g, '-')
|
||||||
|
.replace(/[^a-z0-9-]/g, '')
|
||||||
|
.replace(/-+/g, '-')
|
||||||
|
.replace(/^-|-$/g, '');
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Garante que um valor hex tenha o prefixo '#'.
|
||||||
|
*/
|
||||||
|
export function normalizeHex(hex: string): string {
|
||||||
|
return hex.startsWith('#') ? hex : `#${hex}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Verifica se uma string é um hex de cor válido.
|
||||||
|
*/
|
||||||
|
export function isValidHex(hex: string): boolean {
|
||||||
|
return /^#?([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(hex);
|
||||||
|
}
|
||||||
@@ -0,0 +1,69 @@
|
|||||||
|
import { create } from 'zustand';
|
||||||
|
import * as SecureStore from 'expo-secure-store';
|
||||||
|
import type { User, AuthSession } from '@domain/User';
|
||||||
|
import { SECURE_STORE_ACCESS_TOKEN, SECURE_STORE_REFRESH_TOKEN } from '@shared/constants';
|
||||||
|
|
||||||
|
interface AuthState {
|
||||||
|
user: User | null;
|
||||||
|
accessToken: string | null;
|
||||||
|
refreshToken: string | null;
|
||||||
|
isAuthenticated: boolean;
|
||||||
|
isLoading: boolean;
|
||||||
|
|
||||||
|
setSession: (session: AuthSession) => Promise<void>;
|
||||||
|
clearSession: () => Promise<void>;
|
||||||
|
loadStoredSession: () => Promise<void>;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Store de autenticação.
|
||||||
|
*
|
||||||
|
* Persiste os tokens no SecureStore do dispositivo.
|
||||||
|
* O estado `isAuthenticated` é a fonte de verdade para a navegação.
|
||||||
|
*/
|
||||||
|
export const useAuthStore = create<AuthState>((set) => ({
|
||||||
|
user: null,
|
||||||
|
accessToken: null,
|
||||||
|
refreshToken: null,
|
||||||
|
isAuthenticated: false,
|
||||||
|
isLoading: true,
|
||||||
|
|
||||||
|
setSession: async (session: AuthSession) => {
|
||||||
|
await SecureStore.setItemAsync(SECURE_STORE_ACCESS_TOKEN, session.accessToken);
|
||||||
|
await SecureStore.setItemAsync(SECURE_STORE_REFRESH_TOKEN, session.refreshToken);
|
||||||
|
set({
|
||||||
|
user: session.user,
|
||||||
|
accessToken: session.accessToken,
|
||||||
|
refreshToken: session.refreshToken,
|
||||||
|
isAuthenticated: true,
|
||||||
|
isLoading: false,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
clearSession: async () => {
|
||||||
|
await SecureStore.deleteItemAsync(SECURE_STORE_ACCESS_TOKEN);
|
||||||
|
await SecureStore.deleteItemAsync(SECURE_STORE_REFRESH_TOKEN);
|
||||||
|
set({
|
||||||
|
user: null,
|
||||||
|
accessToken: null,
|
||||||
|
refreshToken: null,
|
||||||
|
isAuthenticated: false,
|
||||||
|
isLoading: false,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
loadStoredSession: async () => {
|
||||||
|
set({ isLoading: true });
|
||||||
|
try {
|
||||||
|
const accessToken = await SecureStore.getItemAsync(SECURE_STORE_ACCESS_TOKEN);
|
||||||
|
if (accessToken) {
|
||||||
|
// TODO: validar token com /api/v1/users/me e popular o user
|
||||||
|
set({ accessToken, isAuthenticated: true, isLoading: false });
|
||||||
|
} else {
|
||||||
|
set({ isLoading: false });
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
set({ isLoading: false });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}));
|
||||||
@@ -0,0 +1,49 @@
|
|||||||
|
import { create } from 'zustand';
|
||||||
|
import type { Filament, FilamentFilter } from '@domain/Filament';
|
||||||
|
|
||||||
|
interface FilamentState {
|
||||||
|
filaments: Filament[];
|
||||||
|
isLoading: boolean;
|
||||||
|
error: string | null;
|
||||||
|
activeFilter: FilamentFilter;
|
||||||
|
|
||||||
|
setFilaments: (filaments: Filament[]) => void;
|
||||||
|
addFilament: (filament: Filament) => void;
|
||||||
|
updateFilament: (filament: Filament) => void;
|
||||||
|
removeFilament: (id: string) => void;
|
||||||
|
setLoading: (loading: boolean) => void;
|
||||||
|
setError: (error: string | null) => void;
|
||||||
|
setFilter: (filter: FilamentFilter) => void;
|
||||||
|
resetFilter: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const DEFAULT_FILTER: FilamentFilter = {
|
||||||
|
sortBy: 'created_at_desc',
|
||||||
|
page: 1,
|
||||||
|
perPage: 50,
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Store de filamentos.
|
||||||
|
* Mantém a lista em memória para acesso rápido nas telas de listagem.
|
||||||
|
*/
|
||||||
|
export const useFilamentStore = create<FilamentState>((set) => ({
|
||||||
|
filaments: [],
|
||||||
|
isLoading: false,
|
||||||
|
error: null,
|
||||||
|
activeFilter: DEFAULT_FILTER,
|
||||||
|
|
||||||
|
setFilaments: (filaments) => set({ filaments }),
|
||||||
|
addFilament: (filament) =>
|
||||||
|
set((state) => ({ filaments: [filament, ...state.filaments] })),
|
||||||
|
updateFilament: (filament) =>
|
||||||
|
set((state) => ({
|
||||||
|
filaments: state.filaments.map((f) => (f.id === filament.id ? filament : f)),
|
||||||
|
})),
|
||||||
|
removeFilament: (id) =>
|
||||||
|
set((state) => ({ filaments: state.filaments.filter((f) => f.id !== id) })),
|
||||||
|
setLoading: (isLoading) => set({ isLoading }),
|
||||||
|
setError: (error) => set({ error }),
|
||||||
|
setFilter: (filter) => set({ activeFilter: filter }),
|
||||||
|
resetFilter: () => set({ activeFilter: DEFAULT_FILTER }),
|
||||||
|
}));
|
||||||
@@ -0,0 +1,66 @@
|
|||||||
|
import { create } from 'zustand';
|
||||||
|
import type { SpoolPreset } from '@domain/SpoolPreset';
|
||||||
|
|
||||||
|
interface PresetState {
|
||||||
|
presets: SpoolPreset[];
|
||||||
|
systemPresets: SpoolPreset[];
|
||||||
|
userPresets: SpoolPreset[];
|
||||||
|
isLoading: boolean;
|
||||||
|
error: string | null;
|
||||||
|
|
||||||
|
setPresets: (presets: SpoolPreset[]) => void;
|
||||||
|
addPreset: (preset: SpoolPreset) => void;
|
||||||
|
updatePreset: (preset: SpoolPreset) => void;
|
||||||
|
removePreset: (id: string) => void;
|
||||||
|
setLoading: (loading: boolean) => void;
|
||||||
|
setError: (error: string | null) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Store de presets de carretéis.
|
||||||
|
* Mantém sistema e usuário separados para facilitar a renderização de seções distintas.
|
||||||
|
*/
|
||||||
|
export const usePresetStore = create<PresetState>((set) => ({
|
||||||
|
presets: [],
|
||||||
|
systemPresets: [],
|
||||||
|
userPresets: [],
|
||||||
|
isLoading: false,
|
||||||
|
error: null,
|
||||||
|
|
||||||
|
setPresets: (presets) =>
|
||||||
|
set({
|
||||||
|
presets,
|
||||||
|
systemPresets: presets.filter((p) => p.isSystem),
|
||||||
|
userPresets: presets.filter((p) => !p.isSystem),
|
||||||
|
}),
|
||||||
|
|
||||||
|
addPreset: (preset) =>
|
||||||
|
set((state) => {
|
||||||
|
const presets = [...state.presets, preset];
|
||||||
|
return {
|
||||||
|
presets,
|
||||||
|
userPresets: presets.filter((p) => !p.isSystem),
|
||||||
|
};
|
||||||
|
}),
|
||||||
|
|
||||||
|
updatePreset: (preset) =>
|
||||||
|
set((state) => {
|
||||||
|
const presets = state.presets.map((p) => (p.id === preset.id ? preset : p));
|
||||||
|
return {
|
||||||
|
presets,
|
||||||
|
userPresets: presets.filter((p) => !p.isSystem),
|
||||||
|
};
|
||||||
|
}),
|
||||||
|
|
||||||
|
removePreset: (id) =>
|
||||||
|
set((state) => {
|
||||||
|
const presets = state.presets.filter((p) => p.id !== id);
|
||||||
|
return {
|
||||||
|
presets,
|
||||||
|
userPresets: presets.filter((p) => !p.isSystem),
|
||||||
|
};
|
||||||
|
}),
|
||||||
|
|
||||||
|
setLoading: (isLoading) => set({ isLoading }),
|
||||||
|
setError: (error) => set({ error }),
|
||||||
|
}));
|
||||||
@@ -0,0 +1,54 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2020",
|
||||||
|
"lib": [
|
||||||
|
"ES2020"
|
||||||
|
],
|
||||||
|
"allowJs": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"allowSyntheticDefaultImports": true,
|
||||||
|
"strict": true,
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-native",
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@domain/*": [
|
||||||
|
"src/domain/*"
|
||||||
|
],
|
||||||
|
"@ports/*": [
|
||||||
|
"src/ports/*"
|
||||||
|
],
|
||||||
|
"@application/*": [
|
||||||
|
"src/application/*"
|
||||||
|
],
|
||||||
|
"@adapters/*": [
|
||||||
|
"src/adapters/*"
|
||||||
|
],
|
||||||
|
"@presentation/*": [
|
||||||
|
"src/presentation/*"
|
||||||
|
],
|
||||||
|
"@store/*": [
|
||||||
|
"src/store/*"
|
||||||
|
],
|
||||||
|
"@shared/*": [
|
||||||
|
"src/shared/*"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"src",
|
||||||
|
"app.json",
|
||||||
|
".expo/types/**/*.ts",
|
||||||
|
"expo-env.d.ts"
|
||||||
|
],
|
||||||
|
"exclude": [
|
||||||
|
"node_modules"
|
||||||
|
],
|
||||||
|
"extends": "expo/tsconfig.base"
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user