diff --git a/src/App.jsx b/src/App.jsx index 363a5b0..0ae4841 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -38,6 +38,9 @@ export default function App() { const [authMode, setAuthMode] = useState('login'); const [authError, setAuthError] = useState(''); const [categoryFilter, setCategoryFilter] = useState('Todos'); + const [colorFilter, setColorFilter] = useState(''); + const [ageFilter, setAgeFilter] = useState('any'); + const [showClosetFilters, setShowClosetFilters] = useState(false); // Estado para criação de Looks const [selectedForLook, setSelectedForLook] = useState([]); @@ -110,14 +113,31 @@ export default function App() { const laundryClothes = useMemo(() => clothes.filter(c => c.status === 'laundry'), [clothes]); const trashClothes = useMemo(() => clothes.filter(c => c.status === 'trash'), [clothes]); + const availableColors = useMemo(() => { + const colors = new Set(activeClothes.map(c => c.color).filter(Boolean)); + return Array.from(colors); + }, [activeClothes]); + const filteredClothes = useMemo(() => { return activeClothes.filter(c => { const matchesSearch = (c.name || "").toLowerCase().includes(searchTerm.toLowerCase()) || (c.color || "").toLowerCase().includes(searchTerm.toLowerCase()); - const matchesCategory = categoryFilter === 'Todos' || c.category === categoryFilter; - return matchesSearch && matchesCategory; + const matchesCategory = categoryFilter === 'Todos' || categoryFilter === t('all') || c.category === categoryFilter; + const matchesColor = !colorFilter || c.color === colorFilter; + + let matchesAge = true; + if (ageFilter !== 'any') { + const ageInMs = new Date().getTime() - (c.createdAt || new Date().getTime()); + const days = ageInMs / (1000 * 60 * 60 * 24); + if (ageFilter === 'month') matchesAge = days <= 30; + else if (ageFilter === '6months') matchesAge = days <= 180; + else if (ageFilter === '1year') matchesAge = days <= 365; + else if (ageFilter === 'older') matchesAge = days > 365; + } + + return matchesSearch && matchesCategory && matchesColor && matchesAge; }); - }, [activeClothes, searchTerm, categoryFilter]); + }, [activeClothes, searchTerm, categoryFilter, colorFilter, ageFilter, t]); // Ações de Itens const handleItemAction = async (action, item) => { @@ -249,10 +269,18 @@ export default function App() { const fd = new FormData(e.target); try { const profileDoc = doc(db, 'artifacts', appId, 'users', user.uid, 'profile', 'data'); + const dobDay = fd.get('dobDay'); + const dobMonth = fd.get('dobMonth'); + const dobYear = fd.get('dobYear'); + let dob = fd.get('dob') || ''; + if (dobDay && dobMonth && dobYear) { + dob = `${dobYear}-${dobMonth}-${dobDay}`; + } + await setDoc(profileDoc, { username: fd.get('username') || '', fullName: fd.get('fullName') || '', - dob: fd.get('dob') || '', + dob: dob, bio: fd.get('bio') || '' }, { merge: true }); } catch (err) { @@ -461,16 +489,16 @@ export default function App() { /> -
- {[t('all'), t('tops'), t('bottoms'), t('footwear'), t('coats'), t('accessories')].map(cat => ( - - ))} +
+
@@ -678,7 +706,23 @@ export default function App() {
- +
+ +
+ + + +
+
+ + +
+
+ +
+ {[t('all'), t('tops'), t('bottoms'), t('footwear'), t('coats'), t('accessories')].map(cat => ( + + ))} +
+
+ +
+ + +
+ +
+ +
+ {[ + { id: 'any', label: t('anyAge') }, + { id: 'month', label: t('lessThanMonth') }, + { id: '6months', label: t('lessThan6Months') }, + { id: '1year', label: t('lessThanYear') }, + { id: 'older', label: t('older') } + ].map(ageOpt => ( + + ))} +
+
+
+ +
+ + +
+ + + )} + {/* Modal de Idioma */} {showLangModal && (
setShowLangModal(false)}> diff --git a/src/lib/i18n.js b/src/lib/i18n.js index 57a5562..05907ab 100644 --- a/src/lib/i18n.js +++ b/src/lib/i18n.js @@ -93,6 +93,15 @@ export const translations = { userTitle: "Utilizador", themeColor: "Cor do Tema", personalizeColor: "Personalizar a cor", + advancedFilters: "Filtros Avançados", + filterByColor: "Cor", + filterByAge: "Idade da Peça", + anyAge: "Qualquer Idade", + lessThanMonth: "Menos de 1 Mês", + lessThan6Months: "Menos de 6 Meses", + lessThanYear: "Menos de 1 Ano", + older: "Mais antigo", + applyFilters: "Aplicar Filtros", profileInfo: "Informações da Conta", username: "Nome de Utilizador", fullName: "Nome Completo", @@ -195,6 +204,15 @@ export const translations = { userTitle: "User", themeColor: "Theme Color", personalizeColor: "Personalize the color", + advancedFilters: "Advanced Filters", + filterByColor: "Color", + filterByAge: "Item Age", + anyAge: "Any Age", + lessThanMonth: "Less than 1 Month", + lessThan6Months: "Less than 6 Months", + lessThanYear: "Less than 1 Year", + older: "Older", + applyFilters: "Apply Filters", profileInfo: "Account Information", username: "Username", fullName: "Full Name", @@ -297,6 +315,15 @@ export const translations = { userTitle: "Usuario", themeColor: "Color del Tema", personalizeColor: "Personaliza el color", + advancedFilters: "Filtros Avanzados", + filterByColor: "Color", + filterByAge: "Edad de la Prenda", + anyAge: "Cualquier Edad", + lessThanMonth: "Menos de 1 Mes", + lessThan6Months: "Menos de 6 Meses", + lessThanYear: "Menos de 1 Año", + older: "Más Antiguo", + applyFilters: "Aplicar Filtros", profileInfo: "Información de la Cuenta", username: "Nombre de Usuario", fullName: "Nombre Completo", @@ -399,6 +426,15 @@ export const translations = { userTitle: "Utilisateur", themeColor: "Couleur du Thème", personalizeColor: "Personnaliser la couleur", + advancedFilters: "Filtres Avancés", + filterByColor: "Couleur", + filterByAge: "Âge de l'article", + anyAge: "Tout âge", + lessThanMonth: "Moins d'un mois", + lessThan6Months: "Moins de 6 mois", + lessThanYear: "Moins d'un an", + older: "Plus ancien", + applyFilters: "Appliquer les filtres", profileInfo: "Informations du Compte", username: "Nom d'utilisateur", fullName: "Nom Complet", @@ -501,6 +537,15 @@ export const translations = { userTitle: "Benutzer", themeColor: "Themenfarbe", personalizeColor: "Farbe anpassen", + advancedFilters: "Erweiterte Filter", + filterByColor: "Farbe", + filterByAge: "Artikelalter", + anyAge: "Jedes Alter", + lessThanMonth: "Weniger als 1 Monat", + lessThan6Months: "Weniger als 6 Monate", + lessThanYear: "Weniger als 1 Jahr", + older: "Älter", + applyFilters: "Filter anwenden", profileInfo: "Kontoinformationen", username: "Benutzername", fullName: "Vollständiger Name",