From 77825ffaa16a8d90139acf5e9627f00798fe0b48 Mon Sep 17 00:00:00 2001
From: 230417 <230417@epvc.pt>
Date: Wed, 18 Mar 2026 09:16:13 +0000
Subject: [PATCH] feat: Add direct call functionality to displayed phone
 numbers and enhance phone input validation.

---
 web/src/components/ShopDetailsTab.tsx | 28 +++++++++++++--------------
 web/src/pages/Dashboard.tsx           | 18 +++++++++++++----
 2 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/web/src/components/ShopDetailsTab.tsx b/web/src/components/ShopDetailsTab.tsx
index 41df0fd..3f1148c 100644
--- a/web/src/components/ShopDetailsTab.tsx
+++ b/web/src/components/ShopDetailsTab.tsx
@@ -99,30 +99,30 @@ export const ShopDetailsTab = ({ shop }: { shop: BarberShop }) => {
         <h3 className="text-xl font-bold mb-4">Contacto</h3>
         <div className="flex flex-col gap-3">
           {contacts.phone1 && (
-            <div className="flex items-center justify-between p-4 bg-white border border-slate-200 shadow-sm rounded-2xl group">
+            <a href={`tel:${contacts.phone1.replace(/\D/g, '')}`} className="flex items-center justify-between p-4 bg-white border border-slate-200 shadow-sm rounded-2xl group hover:border-indigo-300 hover:shadow-md transition-all">
               <div className="flex items-center gap-4">
-                <div className="w-10 h-10 flex items-center justify-center bg-slate-50 border border-slate-100 rounded-full text-slate-500">
+                <div className="w-10 h-10 flex items-center justify-center bg-indigo-50 border border-indigo-100 rounded-full text-indigo-600 transition-colors">
                   <Smartphone size={20} />
                 </div>
-                <span className="text-slate-700 font-bold text-lg">{contacts.phone1}</span>
+                <span className="text-slate-700 font-bold text-lg group-hover:text-indigo-700 transition-colors">{contacts.phone1}</span>
               </div>
-              <button onClick={() => copyToClipboard(contacts.phone1!)} className="text-slate-400 hover:text-indigo-600 transition-colors p-2">
-                <Copy size={20} />
-              </button>
-            </div>
+              <div className="text-indigo-400 bg-indigo-50 p-2 rounded-xl group-hover:bg-indigo-600 group-hover:text-white transition-colors">
+                <Phone size={20} />
+              </div>
+            </a>
           )}
           {contacts.phone2 && (
-            <div className="flex items-center justify-between p-4 bg-white border border-slate-200 shadow-sm rounded-2xl group">
+            <a href={`tel:${contacts.phone2.replace(/\D/g, '')}`} className="flex items-center justify-between p-4 bg-white border border-slate-200 shadow-sm rounded-2xl group hover:border-indigo-300 hover:shadow-md transition-all">
               <div className="flex items-center gap-4">
-                <div className="w-10 h-10 flex items-center justify-center bg-slate-50 border border-slate-100 rounded-full text-slate-500">
+                <div className="w-10 h-10 flex items-center justify-center bg-indigo-50 border border-indigo-100 rounded-full text-indigo-600 transition-colors">
                   <Phone size={20} />
                 </div>
-                <span className="text-slate-700 font-bold text-lg">{contacts.phone2}</span>
+                <span className="text-slate-700 font-bold text-lg group-hover:text-indigo-700 transition-colors">{contacts.phone2}</span>
               </div>
-              <button onClick={() => copyToClipboard(contacts.phone2!)} className="text-slate-400 hover:text-indigo-600 transition-colors p-2">
-                <Copy size={20} />
-              </button>
-            </div>
+              <div className="text-indigo-400 bg-indigo-50 p-2 rounded-xl group-hover:bg-indigo-600 group-hover:text-white transition-colors">
+                <Phone size={20} />
+              </div>
+            </a>
           )}
         </div>
       </section>
diff --git a/web/src/pages/Dashboard.tsx b/web/src/pages/Dashboard.tsx
index d443f70..07ef711 100644
--- a/web/src/pages/Dashboard.tsx
+++ b/web/src/pages/Dashboard.tsx
@@ -1107,15 +1107,25 @@ function DashboardInner({ shop }: { shop: BarberShop }) {
                     <div className="grid md:grid-cols-2 gap-4">
                       <Input
                         label="Telefone Principal"
+                        type="tel"
+                        maxLength={9}
                         value={editContacts.phone1 || ''}
-                        onChange={(e) => setEditContacts({ ...editContacts, phone1: e.target.value })}
-                        placeholder="Ex: 910 000 000"
+                        onChange={(e) => {
+                          const val = e.target.value.replace(/\D/g, '').slice(0, 9);
+                          setEditContacts({ ...editContacts, phone1: val });
+                        }}
+                        placeholder="Ex: 910000000"
                       />
                       <Input
                         label="Telefone Secundário"
+                        type="tel"
+                        maxLength={9}
                         value={editContacts.phone2 || ''}
-                        onChange={(e) => setEditContacts({ ...editContacts, phone2: e.target.value })}
-                        placeholder="Ex: 252 000 000"
+                        onChange={(e) => {
+                          const val = e.target.value.replace(/\D/g, '').slice(0, 9);
+                          setEditContacts({ ...editContacts, phone2: val });
+                        }}
+                        placeholder="Ex: 252000000"
                       />
                       <Input
                         label="Link do WhatsApp"