From 3cdd4945df9f1e46808ed3fd8a59852ed6b223a9 Mon Sep 17 00:00:00 2001 From: 230417 <230417@epvc.pt> Date: Tue, 17 Mar 2026 16:25:06 +0000 Subject: [PATCH] feat: Implement editing for shop contacts, social networks, schedule, and payment methods in Dashboard settings, and update ShopDetails UI styling. --- web/src/components/ShopDetailsTab.tsx | 38 ++++----- web/src/pages/Dashboard.tsx | 117 +++++++++++++++++++++++++- web/src/pages/ShopDetails.tsx | 2 +- 3 files changed, 136 insertions(+), 21 deletions(-) diff --git a/web/src/components/ShopDetailsTab.tsx b/web/src/components/ShopDetailsTab.tsx index 7081644..41df0fd 100644 --- a/web/src/components/ShopDetailsTab.tsx +++ b/web/src/components/ShopDetailsTab.tsx @@ -33,7 +33,7 @@ export const ShopDetailsTab = ({ shop }: { shop: BarberShop }) => { }; return ( -
+
{/* Horário de atendimento */}

Horário de atendimento

@@ -41,12 +41,12 @@ export const ShopDetailsTab = ({ shop }: { shop: BarberShop }) => { {schedule.map((slot, i) => (
- {slot.day} + {slot.day} {i === currentDayIndex && ( - Hoje + Hoje )}
- + {slot.closed ? 'Fechado' : `${slot.open} - ${slot.close}`}
@@ -54,72 +54,72 @@ export const ShopDetailsTab = ({ shop }: { shop: BarberShop }) => {
-
+
{/* Formas de pagamento */}

Formas de pagamento

{paymentMethods.map((method, i) => ( - + {method} ))}
-
+
{/* Redes Sociais */}

Redes Sociais

{socials.whatsapp && ( - + )} {socials.instagram && ( - + )} {socials.facebook && ( - + )}
-
+
{/* Contacto */}

Contacto

{contacts.phone1 && ( -
+
-
+
- {contacts.phone1} + {contacts.phone1}
-
)} {contacts.phone2 && ( -
+
-
+
- {contacts.phone2} + {contacts.phone2}
-
diff --git a/web/src/pages/Dashboard.tsx b/web/src/pages/Dashboard.tsx index 929320f..ce72b2b 100644 --- a/web/src/pages/Dashboard.tsx +++ b/web/src/pages/Dashboard.tsx @@ -13,7 +13,7 @@ import { Tabs } from '../components/ui/tabs'; import { currency } from '../lib/format'; import { useApp } from '../context/AppContext'; import { supabase } from '../lib/supabase'; -import { Product, BarberShop } from '../types'; +import { Product, BarberShop, ShopSchedule } from '../types'; import { BarChart, Bar, CartesianGrid, ResponsiveContainer, Tooltip, XAxis } from 'recharts'; import { CalendarWeekView } from '../components/CalendarWeekView'; import { @@ -146,6 +146,19 @@ function DashboardInner({ shop }: { shop: BarberShop }) { // Settings states const [editShopName, setEditShopName] = useState(shop.name); const [editShopAddress, setEditShopAddress] = useState(shop.address || ''); + const [editPaymentMethods, setEditPaymentMethods] = useState(shop.paymentMethods?.join(', ') || 'Dinheiro, Cartão de Crédito, Cartão de Débito'); + const [editSocials, setEditSocials] = useState(shop.socialNetworks || { whatsapp: '', instagram: '', facebook: '' }); + const [editContacts, setEditContacts] = useState(shop.contacts || { phone1: '', phone2: '' }); + const [editSchedule, setEditSchedule] = useState(shop.schedule || [ + { day: 'Segunda-feira', open: '09:00', close: '19:30' }, + { day: 'Terça-feira', open: '09:00', close: '19:30' }, + { day: 'Quarta-feira', open: '09:00', close: '19:30' }, + { day: 'Quinta-feira', open: '09:00', close: '19:30' }, + { day: 'Sexta-feira', open: '09:00', close: '19:30' }, + { day: 'Sábado', open: '09:00', close: '19:00' }, + { day: 'Domingo', open: '', close: '', closed: true }, + ]); + const [isSavingSettings, setIsSavingSettings] = useState(false); const [showSaveSuccess, setShowSaveSuccess] = useState(false); @@ -331,6 +344,10 @@ function DashboardInner({ shop }: { shop: BarberShop }) { await updateShopDetails(shop.id, { name: editShopName, address: editShopAddress, + paymentMethods: editPaymentMethods.split(',').map(s => s.trim()).filter(Boolean), + socialNetworks: editSocials, + contacts: editContacts, + schedule: editSchedule, }); setShowSaveSuccess(true); setTimeout(() => setShowSaveSuccess(false), 3000); @@ -1071,6 +1088,104 @@ function DashboardInner({ shop }: { shop: BarberShop }) { placeholder="Rua, Número, Código Postal, Localidade" /> +
+

Contactos e Redes Sociais

+
+ setEditContacts({ ...editContacts, phone1: e.target.value })} + placeholder="Ex: 910 000 000" + /> + setEditContacts({ ...editContacts, phone2: e.target.value })} + placeholder="Ex: 252 000 000" + /> + setEditSocials({ ...editSocials, whatsapp: e.target.value })} + placeholder="https://wa.me/351910000000" + /> + setEditSocials({ ...editSocials, instagram: e.target.value })} + placeholder="https://instagram.com/suabarbearia" + /> + setEditSocials({ ...editSocials, facebook: e.target.value })} + placeholder="https://facebook.com/suabarbearia" + /> +
+
+ +
+

Horário de Atendimento

+
+ {editSchedule.map((slot, idx) => ( +
+
+ {slot.day} +
+ {!slot.closed ? ( + <> + { + const newSchedule = [...editSchedule]; + newSchedule[idx].open = e.target.value; + setEditSchedule(newSchedule); + }} + className="w-28" + /> + - + { + const newSchedule = [...editSchedule]; + newSchedule[idx].close = e.target.value; + setEditSchedule(newSchedule); + }} + className="w-28" + /> + + ) : ( +
Fechado
+ )} + +
+ ))} +
+
+ +
+

Formas de Pagamento

+ setEditPaymentMethods(e.target.value)} + placeholder="Ex: Dinheiro, Cartão de Crédito, MBWay" + /> +
+
) : tab === 'detalhes' ? ( -
+
) : (