From 26585e739c9a2e5b5cd489ad336e908c87fa9d81 Mon Sep 17 00:00:00 2001 From: Muhmd <149331205+ByMuhmd@users.noreply.github.com> Date: Sat, 4 Jul 2026 17:31:52 +0300 Subject: [PATCH 1/2] feat: implement services directory page with filtering and search functionality --- app/client/home/page.tsx | 2 +- app/client/services/page.tsx | 169 +++++++++++++++++++++++++++++++++++ 2 files changed, 170 insertions(+), 1 deletion(-) create mode 100644 app/client/services/page.tsx diff --git a/app/client/home/page.tsx b/app/client/home/page.tsx index 3bdb418..5f834dc 100644 --- a/app/client/home/page.tsx +++ b/app/client/home/page.tsx @@ -161,7 +161,7 @@ export default function ClientHomePage() {

الخدمات الرئيسية

- عرض الكل + عرض الكل
{loading ? (
diff --git a/app/client/services/page.tsx b/app/client/services/page.tsx new file mode 100644 index 0000000..ab33423 --- /dev/null +++ b/app/client/services/page.tsx @@ -0,0 +1,169 @@ +'use client' + +import { useState, useEffect } from 'react' +import { useRouter } from 'next/navigation' +import Link from 'next/link' +import { ArrowLeft, Settings, Sparkles, Home, AlertTriangle, PenTool, Wrench, Zap, Droplets, Wind, Truck, Search } from 'lucide-react' +import { createClient } from '@/lib/supabase/client' + +// Use lucide icons for simplicity and wide coverage +const iconMap: Record = { + painting: , + carpentry: , + plumbing: , + electricity: , + ac: , + cleaning: , + moving: , + default: +} + +const TOPICS = [ + { id: 'maintenance', label: 'صيانة وتصليح', icon: , color: 'from-blue-600 to-cyan-600' }, + { id: 'construction', label: 'تشطيبات وديكور', icon: , color: 'from-purple-600 to-indigo-600' }, + { id: 'cleaning', label: 'نظافة وعناية', icon: , color: 'from-teal-500 to-emerald-500' }, + { id: 'emergency', label: 'خدمات الطوارئ', icon: , color: 'from-red-500 to-orange-500' }, +] + +const HARDCODED_CATEGORIES = [ + { id: 'painting', label_ar: 'دهان', icon: 'painting', topicId: 'construction' }, + { id: 'carpentry', label_ar: 'نجارة', icon: 'carpentry', topicId: 'maintenance' }, + { id: 'plumbing', label_ar: 'سباكة', icon: 'plumbing', topicId: 'maintenance' }, + { id: 'electricity', label_ar: 'كهرباء', icon: 'electricity', topicId: 'maintenance' }, + { id: 'ac', label_ar: 'تكييف', icon: 'ac', topicId: 'maintenance' }, + { id: 'cleaning', label_ar: 'تنظيف', icon: 'cleaning', topicId: 'cleaning' }, + { id: 'moving', label_ar: 'نقل عفش', icon: 'moving', topicId: 'general' }, +] + +export default function MainServicesPage() { + const router = useRouter() + const supabase = createClient() + const [categories, setCategories] = useState(HARDCODED_CATEGORIES) + const [loading, setLoading] = useState(true) + const [searchQuery, setSearchQuery] = useState('') + const [activeTopic, setActiveTopic] = useState('all') + + useEffect(() => { + const fetchCategories = async () => { + setLoading(true) + const { data } = await supabase.from('categories').select('*').order('usage_count', { ascending: false }) + if (data && data.length > 0) { + // Merge with hardcoded to keep topic mapping if needed + const merged = data.map(dbCat => { + const hc = HARDCODED_CATEGORIES.find(c => c.id === dbCat.id) + return { ...dbCat, topicId: hc?.topicId || 'general' } + }) + setCategories(merged) + } + setLoading(false) + } + fetchCategories() + }, [supabase]) + + const filteredCategories = categories.filter(c => { + const matchesSearch = c.label_ar.includes(searchQuery) + const matchesTopic = activeTopic === 'all' || c.topicId === activeTopic + return matchesSearch && matchesTopic + }) + + return ( +
+ {/* Header */} +
+
+ +

الخدمات والتخصصات

+
+
+
+ +
+ {/* Search */} +
+
+ setSearchQuery(e.target.value)} + /> +
+ +
+ + {/* Topics Section */} +
+

التخصصات (Topics)

+
+ {TOPICS.map(topic => ( + + ))} +
+
+ + {/* Services Section */} +
+
+

+ {activeTopic === 'all' ? 'جميع الخدمات' : TOPICS.find(t => t.id === activeTopic)?.label} +

+ {activeTopic !== 'all' && ( + + )} +
+ + {loading ? ( +
+ {[1,2,3,4,5,6].map(i => ( +
+
+
+
+ ))} +
+ ) : filteredCategories.length === 0 ? ( +
+ +

لا توجد خدمات مطابقة لبحثك

+
+ ) : ( +
+ {filteredCategories.map(cat => { + const icon = iconMap[cat.icon || 'default'] || iconMap.default + return ( + +
+
+ {icon} +
+ {cat.label_ar} + + ) + })} +
+ )} +
+
+
+ ) +} From 5b8d416a293d4fec7715c299b8d6e7b50949429d Mon Sep 17 00:00:00 2001 From: Muhmd <149331205+ByMuhmd@users.noreply.github.com> Date: Sat, 4 Jul 2026 17:34:07 +0300 Subject: [PATCH 2/2] refactor: remove redundant inline comments from services page --- app/client/services/page.tsx | 6 ------ 1 file changed, 6 deletions(-) diff --git a/app/client/services/page.tsx b/app/client/services/page.tsx index ab33423..80f432e 100644 --- a/app/client/services/page.tsx +++ b/app/client/services/page.tsx @@ -6,7 +6,6 @@ import Link from 'next/link' import { ArrowLeft, Settings, Sparkles, Home, AlertTriangle, PenTool, Wrench, Zap, Droplets, Wind, Truck, Search } from 'lucide-react' import { createClient } from '@/lib/supabase/client' -// Use lucide icons for simplicity and wide coverage const iconMap: Record = { painting: , carpentry: , @@ -48,7 +47,6 @@ export default function MainServicesPage() { setLoading(true) const { data } = await supabase.from('categories').select('*').order('usage_count', { ascending: false }) if (data && data.length > 0) { - // Merge with hardcoded to keep topic mapping if needed const merged = data.map(dbCat => { const hc = HARDCODED_CATEGORIES.find(c => c.id === dbCat.id) return { ...dbCat, topicId: hc?.topicId || 'general' } @@ -68,7 +66,6 @@ export default function MainServicesPage() { return (
- {/* Header */}
- {/* Search */}
- {/* Topics Section */}

التخصصات (Topics)

@@ -119,7 +114,6 @@ export default function MainServicesPage() {
- {/* Services Section */}