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,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 },
|
||||
});
|
||||
Reference in New Issue
Block a user