Find Services | Crafted Network™

import React, { ReactElement, useEffect, useState } from 'react'; import Head from 'next/head'; import { useRouter } from 'next/router'; import { mdiMagnify, mdiMapMarker, mdiStar, mdiShieldCheck, mdiClockOutline, mdiCurrencyUsd, mdiFilterVariant } from '@mdi/js'; import axios from 'axios'; import LayoutGuest from '../layouts/Guest'; import BaseIcon from '../components/BaseIcon'; import LoadingSpinner from '../components/LoadingSpinner'; import Link from 'next/link'; const SearchView = () => { const router = useRouter(); const { query: searchQueryParam, location: locationParam } = router.query; const [loading, setLoading] = useState(false); const [searchResults, setSearchResults] = useState([]); const [searchQuery, setSearchQuery] = useState(searchQueryParam || ''); const [location, setLocation] = useState(locationParam || ''); useEffect(() => { if (searchQueryParam) { setSearchQuery(searchQueryParam as string); fetchData(searchQueryParam as string); } }, [searchQueryParam]); const fetchData = async (query: string) => { setLoading(true); try { const response = await axios.post('/search', { searchQuery: query }); setSearchResults(response.data); } catch (error) { console.error('Search error:', error); } finally { setLoading(false); } }; const handleSearch = (e: React.FormEvent) => { e.preventDefault(); router.push({ pathname: '/search', query: { query: searchQuery, location }, }); }; const businesses = searchResults.filter((item: any) => item.tableName === 'businesses'); const getBusinessImage = (biz: any) => { if (biz.business_photos_business && biz.business_photos_business.length > 0) { const photo = biz.business_photos_business[0].photos && biz.business_photos_business[0].photos[0]; if (photo && photo.publicUrl) { return `/api/file/download?privateUrl=${photo.publicUrl}`; } } return null; }; return (

Find Services | Crafted Network™ {/* Search Header */}

{/* Filters Sidebar */} {/* Results Area */}

{loading ? 'Searching...' : `${businesses.length} Results for "${searchQueryParam || 'Businesses'}"`}

Sort by: Reliability Score

{loading ? (

) : (

{businesses.map((biz: any) => (

{/* Image */}

{getBusinessImage(biz) ? ( {biz.name}

) : (

)} {biz.reliability_score >= 80 && (

Top Rated

)}

{biz.name}

{biz.city}, {biz.state} {biz.address}

{biz.rating || ((biz.reliability_score || 0) / 20).toFixed(1)}

Reliability Score

{biz.description || 'Verified service professional providing high-quality solutions for your needs.'}

~{biz.response_time_median_minutes || 30}m Response

Fair Pricing

Verified

))} {businesses.length === 0 && !loading && (

No businesses found

Try adjusting your search terms or location.

)}

); }; SearchView.getLayout = function getLayout(page: ReactElement) { return {page}; }; export default SearchView;