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