fix various bugs in collaborative listing and details pages

Author: Deepthi-Chand

app/[locale]/(user)/collaboratives/CollaborativesListingClient.tsx

@@ -10,8 +10,10 @@ import { GraphQLPublic } from '@/lib/api';
 import { formatDate, generateJsonLd } from '@/lib/utils';
 import { useQuery } from '@tanstack/react-query';
 import Image from 'next/image';
-import { Button, Card, Icon, Text } from 'opub-ui';
+import { Button, Card, Icon, SearchInput, Select, Text } from 'opub-ui';
 import { useState } from 'react';
+import { cn } from '@/lib/utils';
+import Styles from '../datasets/dataset.module.scss';
 
 const PublishedCollaboratives = graphql(`
   query PublishedCollaboratives {
@@ -57,6 +59,10 @@ const PublishedCollaboratives = graphql(`
         code
         name
       }
+      geographies {
+        id
+        name
+      }
       datasetCount
       metadata {
         metadataItem {
@@ -73,7 +79,7 @@ const PublishedCollaboratives = graphql(`
 
 const CollaborativesListingClient = () => {
   const [searchTerm, setSearchTerm] = useState('');
-  const [selectedSector, setSelectedSector] = useState('');
+  const [sortBy, setSortBy] = useState('title_asc');
 
   const {
     data: collaborativesData,
@@ -107,20 +113,30 @@ const CollaborativesListingClient = () => {
 
   const collaboratives = collaborativesData?.publishedCollaboratives || [];
 
-  // Filter collaboratives based on search term and sector
-  const filteredCollaboratives = collaboratives.filter((collaborative) => {
-    const matchesSearch = collaborative.title?.toLowerCase().includes(searchTerm.toLowerCase()) ||
-                         collaborative.summary?.toLowerCase().includes(searchTerm.toLowerCase());
-    const matchesSector = !selectedSector || 
-                         collaborative.sectors?.some(sector => sector.name === selectedSector);
-    return matchesSearch && matchesSector;
-  });
-
-  // Get unique sectors for filter dropdown
-  const allSectors = collaboratives.flatMap((collaborative: TypeCollaborative) => 
-    collaborative.sectors?.map((sector: any) => sector.name) || []
-  );
-  const uniqueSectors = [...new Set(allSectors)];
+  // Filter and sort collaboratives
+  const filteredAndSortedCollaboratives = collaboratives
+    .filter((collaborative) => {
+      const matchesSearch = collaborative.title?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                           collaborative.summary?.toLowerCase().includes(searchTerm.toLowerCase());
+      return matchesSearch;
+    })
+    .sort((a, b) => {
+      const [field, direction] = sortBy.split('_');
+      
+      if (field === 'title') {
+        const comparison = (a.title || '').localeCompare(b.title || '');
+        return direction === 'asc' ? comparison : -comparison;
+      } else if (field === 'startedOn') {
+        const dateA = new Date(a.startedOn || 0).getTime();
+        const dateB = new Date(b.startedOn || 0).getTime();
+        return direction === 'asc' ? dateA - dateB : dateB - dateA;
+      } else if (field === 'datasetCount') {
+        const countA = a.datasetCount || 0;
+        const countB = b.datasetCount || 0;
+        return direction === 'asc' ? countA - countB : countB - countA;
+      }
+      return 0;
+    });
   const jsonLd = generateJsonLd({
       '@context': 'https://schema.org',
       '@type': 'WebPage',
@@ -181,31 +197,65 @@ const CollaborativesListingClient = () => {
         <div className="container py-8 lg:py-14">
           {/* Header Section */}
           <div className="mb-8">
+            <Text variant="heading2xl" fontWeight="bold" className="mb-8">
+              Explore Collaboratives
+            </Text>
 
             {/* Search and Filter Section */}
-            <div className="flex flex-col gap-4 md:flex-row md:items-center md:gap-6">
-              <div className="flex-1">
-                <input
-                  type="text"
-                  placeholder="Search collaboratives..."
-                  value={searchTerm}
-                  onChange={(e) => setSearchTerm(e.target.value)}
-                  className="w-full rounded-lg border border-greyExtralight px-4 py-2 focus:border-primaryBlue focus:outline-none"
-                />
-              </div>
-              <div className="md:w-48">
-                <select
-                  value={selectedSector}
-                  onChange={(e) => setSelectedSector(e.target.value)}
-                  className="w-full rounded-lg border border-greyExtralight px-4 py-2 focus:border-primaryBlue focus:outline-none"
+            <div className="flex flex-wrap gap-6 lg:flex-nowrap">
+              <SearchInput
+                label={''}
+                className={cn('w-full', Styles.Search)}
+                onSubmit={(e) => {
+                  setSearchTerm(e);
+                }}
+                onClear={() => {
+                  setSearchTerm('');
+                }}
+                name={'Start typing to search for any collaborative'}
+              />
+              <div className="flex items-center gap-2">
+                <Text
+                  variant="bodyLg"
+                  fontWeight="semibold"
+                  className="whitespace-nowrap text-secondaryOrange"
                 >
-                  <option value="">All Sectors</option>
-                  {uniqueSectors.map((sector: string) => (
-                    <option key={sector} value={sector}>
-                      {sector}
-                    </option>
-                  ))}
-                </select>
+                  Sort :
+                </Text>
+                <Select
+                  label=""
+                  labelInline
+                  name="sort-select"
+                  options={[
+                    {
+                      label: 'Title Asc',
+                      value: 'title_asc',
+                    },
+                    {
+                      label: 'Title Desc',
+                      value: 'title_desc',
+                    },
+                    {
+                      label: 'Started Date Asc',
+                      value: 'startedOn_asc',
+                    },
+                    {
+                      label: 'Started Date Desc',
+                      value: 'startedOn_desc',
+                    },
+                    {
+                      label: 'Dataset Count Asc',
+                      value: 'datasetCount_asc',
+                    },
+                    {
+                      label: 'Dataset Count Desc',
+                      value: 'datasetCount_desc',
+                    },
+                  ]}
+                  onChange={(e: any) => {
+                    setSortBy(e);
+                  }}
+                />
               </div>
             </div>
           </div>
@@ -228,16 +278,10 @@ const CollaborativesListingClient = () => {
           {/* Results Section */}
           {!isLoading && !error && (
             <>
-              <div className="mb-6 flex items-center justify-between">
-                <Text variant="headingLg">
-                  {filteredCollaboratives.length} Collaborative{filteredCollaboratives.length !== 1 ? 's' : ''} Found
-                </Text>
-              </div>
-
               {/* Collaboratives Grid */}
-              {filteredCollaboratives.length > 0 ? (
+              {filteredAndSortedCollaboratives.length > 0 ? (
                 <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
-                  {filteredCollaboratives.map((collaborative: TypeCollaborative) => (
+                  {filteredAndSortedCollaboratives.map((collaborative: TypeCollaborative) => (
                     <Card
                       key={collaborative.id}
                       title={collaborative.title || ''}
@@ -258,10 +302,9 @@ const CollaborativesListingClient = () => {
                           icon: Icons.globe,
                           label: 'Geography',
                           value:
-                            collaborative.metadata?.find(
-                              (meta: any) =>
-                                meta.metadataItem?.label === 'Geography'
-                            )?.value || 'N/A',
+                            collaborative.geographies && collaborative.geographies.length > 0
+                              ? collaborative.geographies.map((geo: any) => geo.name).join(', ')
+                              : 'N/A',
                         },
                       ]}
                       href={`/collaboratives/${collaborative.slug}`}
@@ -296,15 +339,14 @@ const CollaborativesListingClient = () => {
                   <Text variant="bodyLg" color="subdued">
                     Try adjusting your search terms or filters.
                   </Text>
-                  {(searchTerm || selectedSector) && (
+                  {searchTerm && (
                     <Button
                       onClick={() => {
                         setSearchTerm('');
-                        setSelectedSector('');
                       }}
                       kind="secondary"
                     >
-                      Clear Filters
+                      Clear Search
                     </Button>
                   )}
                 </div>

app/[locale]/(user)/collaboratives/[collaborativeSlug]/CollaborativeDetailsClient.tsx

@@ -454,7 +454,7 @@ const CollaborativeDetailClient = () => {
                         key={useCase.id}
                         variation={'collapsed'}
                         iconColor="success"
-                        href={`/usecases/${useCase.slug}`}
+                        href={`/usecases/${useCase.id}`}
                       />
                     );
                   })}

app/[locale]/dashboard/[entityType]/[entitySlug]/collaboratives/edit/[id]/assign/page.tsx

@@ -129,7 +129,7 @@ const Assign = () => {
         toast('Dataset Assigned Successfully');
         CollaborativeDetails.refetch();
         router.push(
-          `/dashboard/${params.entityType}/${params.entitySlug}/collaboratives/edit/${params.id}/contributors`
+          `/dashboard/${params.entityType}/${params.entitySlug}/collaboratives/edit/${params.id}/usecases`
         );
       },
       onError: (err: any) => {