alterações design

src/pages/Dashboard.tsx

@@ -47,12 +47,13 @@ export default function Dashboard() {
   const [prodStock, setProdStock] = useState('10');
   const [barberName, setBarberName] = useState('');
   const [barberSpecs, setBarberSpecs] = useState('');
+  const [barberSearchQuery, setBarberSearchQuery] = useState('');
 
   // Segurança de Bloqueio - Validação estrita do role do utilziador no componente
-  if (!user || user.role !== 'barbearia') {
+  if (!user || user.role !== 'barbearia' || !shop) {
     return (
-      <View style={styles.container}>
-        <Text>Área exclusiva para barbearias</Text>
+      <View style={[styles.container, { justifyContent: 'center', alignItems: 'center' }]}>
+        <Text style={{ color: '#fff', fontSize: 18 }}>A carregar dados da barbearia...</Text>
       </View>
     );
   }
@@ -114,12 +115,11 @@ export default function Dashboard() {
     if (!barberName.trim()) return;
     addBarber(shop.id, {
       name: barberName,
-      specialties: barberSpecs.split(',').map((s) => s.trim()).filter(Boolean),
+      specialties: [],
       schedule: [],
     });
     setBarberName('');
-    setBarberSpecs('');
-    Alert.alert('Sucesso', 'Barbeiro adicionado');
+    Alert.alert('Sucesso', 'Profissional adicionado');
   };
 
   /**
@@ -141,7 +141,7 @@ export default function Dashboard() {
     { id: 'orders', label: 'Pedidos Boutique' },
     { id: 'services', label: 'Serviços' },
     { id: 'products', label: 'Produtos' },
-    { id: 'barbers', label: 'Equipa' },
+    { id: 'barbers', label: 'Profissionais' },
   ];
 
   return (
@@ -366,38 +366,60 @@ export default function Dashboard() {
         )}
 
         {activeTab === 'barbers' && (
-          <View>
-            {shop.barbers.map((b) => (
-              <Card key={b.id} style={styles.itemCard}>
-                <View style={styles.itemHeader}>
-                  <View>
-                    <Text style={styles.itemName}>{b.name}</Text>
-                    <Text style={styles.itemDesc}>
-                      Especialidades: {b.specialties.length > 0 ? b.specialties.join(', ') : 'Nenhuma'}
-                    </Text>
+          <View style={{ gap: 20 }}>
+            <Text style={[styles.title, { marginBottom: 0 }]}>Profissionais</Text>
+
+            {/* Barra de Pesquisa Estilo Screenshot */}
+            <View style={styles.searchContainer}>
+              <Input
+                placeholder="Pesquisar"
+                value={barberSearchQuery}
+                onChangeText={setBarberSearchQuery}
+                style={styles.searchInput}
+                placeholderTextColor="#64748b"
+              />
+            </View>
+
+            {/* Lista de Profissionais */}
+            <View style={styles.barberList}>
+              {shop.barbers
+                .filter(b => b.name.toLowerCase().includes(barberSearchQuery.toLowerCase()))
+                .map((b) => (
+                <View key={b.id} style={styles.barberCard}>
+                  <View style={styles.barberAvatar}>
+                    {/* Placeholder ou imagem real se disponível futuramente */}
+                    <Text style={{ color: '#6366f1', fontWeight: 'bold' }}>{b.name.charAt(0)}</Text>
                   </View>
+                  <View style={styles.barberInfo}>
+                    <Text style={styles.barberNameText}>{b.name}</Text>
+                  </View>
+                  <TouchableOpacity 
+                    onPress={() => {
+                      Alert.alert('Confirmar', 'Deseja remover este profissional?', [
+                        { text: 'Cancelar', style: 'cancel' },
+                        { text: 'Remover', style: 'destructive', onPress: () => deleteBarber(shop.id, b.id) },
+                      ]);
+                    }}
+                    style={styles.deleteBarberBtn}
+                  >
+                    <Text style={{ color: '#ef4444', fontSize: 12 }}>Sair</Text>
+                  </TouchableOpacity>
                 </View>
-                <Button
-                  onPress={() => {
-                    Alert.alert('Confirmar', 'Deseja remover este barbeiro?', [
-                      { text: 'Cancelar', style: 'cancel' },
-                      { text: 'Remover', style: 'destructive', onPress: () => deleteBarber(shop.id, b.id) },
-                    ]);
-                  }}
-                  variant="outline"
-                  size="sm"
-                  style={styles.deleteButton}
-                >
-                  Remover
-                </Button>
-              </Card>
-            ))}
+              ))}
+              
+              {shop.barbers.filter(b => b.name.toLowerCase().includes(barberSearchQuery.toLowerCase())).length === 0 && (
+                <View style={styles.emptyResults}>
+                  <Text style={styles.emptyText}>Nenhum profissional encontrado.</Text>
+                </View>
+              )}
+            </View>
+
+            {/* Formulário de Adição */}
             <Card style={styles.formCard}>
-              <Text style={styles.formTitle}>Adicionar barbeiro</Text>
+              <Text style={styles.formTitle}>Adicionar profissional</Text>
               <Input label="Nome" value={barberName} onChangeText={setBarberName} placeholder="Ex: João Silva" />
-              <Input label="Especialidades" value={barberSpecs} onChangeText={setBarberSpecs} placeholder="Fade, Navalha, Barba" />
               <Button onPress={addNewBarber} style={styles.addButton}>
-                Adicionar
+                Adicionar Coração do Negócio
               </Button>
             </Card>
           </View>
@@ -570,6 +592,69 @@ const styles = StyleSheet.create({
   stockButton: {
     flex: 1,
   },
+  searchContainer: {
+    marginBottom: 8,
+  },
+  searchInput: {
+    backgroundColor: '#0d0d0d',
+    borderColor: 'rgba(255,255,255,0.05)',
+    height: 56,
+    borderRadius: 16,
+    paddingHorizontal: 20,
+    color: '#fff',
+    fontSize: 16,
+  },
+  barberList: {
+    gap: 12,
+  },
+  barberCard: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 16,
+    backgroundColor: '#0d0d0d',
+    borderRadius: 24,
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.05)',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.2,
+    shadowRadius: 8,
+    elevation: 4,
+  },
+  barberAvatar: {
+    width: 60,
+    height: 60,
+    borderRadius: 18,
+    backgroundColor: '#1e293b',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 16,
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.1)',
+  },
+  barberInfo: {
+    flex: 1,
+  },
+  barberNameText: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    color: '#fff',
+    letterSpacing: -0.5,
+  },
+  deleteBarberBtn: {
+    padding: 8,
+    backgroundColor: 'rgba(239, 68, 68, 0.1)',
+    borderRadius: 12,
+  },
+  emptyResults: {
+    padding: 40,
+    alignItems: 'center',
+    backgroundColor: '#0d0d0d',
+    borderRadius: 24,
+    borderStyle: 'dashed',
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.1)',
+  },
 });