Improvements: The isVerified mark is now dynamic: made possible through the upload of certificates

Author: ReyJrFerrer

src/frontend/src/components/client/ServiceListItem.tsx

@@ -22,7 +22,7 @@ const ServiceListItem: React.FC<ServiceListItemProps> = React.memo(
   ({ service, isGridItem = false, retainMobileLayout = false }) => {
     // Fetch the latest service data to get isVerified
     const { service: fetchedService } = useServiceById(service.id);
-    const isVerified = fetchedService?.isVerified === true;
+    const isVerified = fetchedService?.isVerified;
     // Use the same logic as ServiceDetailPageComponent for review count
     const { reviews = [], getAverageRating } = useServiceReviews(service.id);
     const visibleReviews = Array.isArray(reviews)
@@ -44,6 +44,8 @@ const ServiceListItem: React.FC<ServiceListItemProps> = React.memo(
       loading: false,
     };
 
+    console.log("From Service List Item", fetchedService);
+
     // Define layout classes based on props
     const itemWidthClass = isGridItem
       ? "w-full" // Full width for grid items

src/frontend/src/components/client/ServiceListRow.tsx

@@ -0,0 +1,110 @@
+import React from "react";
+import ServiceListItem from "./ServiceListItem"; // Your individual card component
+import {
+  EnrichedService,
+  useAllServicesWithProviders,
+} from "../../hooks/serviceInformation";
+import { getCategoryImage } from "../../utils/serviceHelpers";
+
+interface ServicesListProps {
+  className?: string;
+}
+
+const ServicesList: React.FC<ServicesListProps> = ({ className = "" }) => {
+  const { services, loading, error } = useAllServicesWithProviders();
+
+  const enhanceService = (service: EnrichedService): EnrichedService => ({
+    ...service,
+    heroImage: getCategoryImage(service.category.name),
+    providerName: service.providerName,
+    providerAvatar: service.providerAvatar,
+    rating: {
+      average: service.rating.average ?? 0,
+      count: service.rating.count ?? 0,
+    },
+    price: {
+      amount: service.price.amount,
+      unit: service.price.unit,
+      display: `₱${service.price.amount.toLocaleString(undefined, {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+      })}`,
+    },
+    location: {
+      serviceRadius: service.location?.serviceRadius,
+      address: service.location?.address,
+      city: service.location?.city,
+      state: service.location?.state,
+      serviceRadiusUnit: service.location?.serviceRadiusUnit,
+    },
+  });
+
+  if (loading) {
+    return (
+      <div className={`${className}`}>
+        <div className="mb-4 flex items-center justify-between">
+          <div className="h-7 w-32 animate-pulse rounded-md bg-gray-200"></div>
+        </div>
+        <div className="grid grid-cols-1 gap-4 lg:grid-cols-4">
+          {[...Array(4)].map((_, i) => (
+            <div
+              key={i}
+              className="overflow-hidden rounded-lg bg-white shadow-sm"
+            >
+              {/* Image skeleton */}
+              <div className="aspect-video w-full animate-pulse bg-gray-200"></div>
+              {/* Content skeleton */}
+              <div className="p-3">
+                <div className="mb-2 flex items-center justify-between">
+                  <div className="h-4 w-20 animate-pulse rounded bg-gray-200"></div>
+                  <div className="h-3 w-16 animate-pulse rounded bg-gray-200"></div>
+                </div>
+                <div className="mb-2 h-4 w-full animate-pulse rounded bg-gray-200"></div>
+                <div className="mb-2 h-3 w-24 animate-pulse rounded bg-gray-200"></div>
+                <div className="flex items-center justify-between border-t border-gray-100 pt-2">
+                  <div className="h-5 w-16 animate-pulse rounded bg-gray-200"></div>
+                  <div className="h-3 w-12 animate-pulse rounded bg-gray-200"></div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={`p-4 ${className}`}>
+        <h2 className="mb-4 text-lg font-bold sm:text-xl">Book Now!</h2>
+        <p className="text-red-500">Error loading services: {error.message}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`w-full max-w-full ${className}`}>
+      <div className="mb-4 flex items-center justify-between">
+        <h2 className="text-lg font-bold sm:text-xl">Book Now!</h2>
+      </div>
+
+      {services.length === 0 ? (
+        <div className="py-12 text-center">
+          <p className="text-gray-500">
+            No top-rated services available at the moment.
+          </p>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4">
+          {services.map((service) => (
+            <div key={service.id}>
+              <ServiceListItem service={enhanceService(service)} />
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ServicesList;

src/frontend/src/hooks/serviceDetail.tsx

@@ -134,7 +134,7 @@ const formatServiceForDetailPage = (
     },
     media: service.imageUrls, // Default empty media array
     requirements: [], // Default empty requirements
-    isVerified: true, // Default value
+    isVerified: service.isVerifiedService, // Default value
     slug: service.id, // Using ID as slug
     heroImage:
       service.category.imageUrl || getCategoryImage(service.category.name),

src/frontend/src/pages/client/home.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { useUserProfile } from "../../hooks/useUserProfile";
 import Header from "../../components/client/Header";
 import Categories from "../../components/client/Categories";
-import ServiceList from "../../components/client/ServiceListReact";
+import ServiceList from "../../components/client/ServiceListRow";
 import BottomNavigation from "../../components/client/BottomNavigation";
 import { useServiceManagement } from "../../hooks/serviceManagement";
 import { useBookingManagement } from "../../hooks/bookingManagement";