CivicDataLab · Abhishekfm · Mar 27, 2026 · Mar 26, 2026
diff --git a/app/[locale]/(user)/collaboratives/CollaborativesListingClient.tsx b/app/[locale]/(user)/collaboratives/CollaborativesListingClient.tsx
@@ -64,6 +64,10 @@ const PublishedCollaboratives = graphql(`
         id
         name
       }
+      coverImage {
+        name
+        path
+      }
       datasetCount
       metadata {
         metadataItem {
@@ -300,12 +304,17 @@ const CollaborativesListingClient = () => {
                         title={collaborative.title || ''}
                         variation="collapsed"
                         iconColor="warning"
-                        imageUrl={`${process.env.NEXT_PUBLIC_BACKEND_URL}/${collaborative.logo?.path.replace('/code/files/', '')}`}
+                        imageUrl={
+                          collaborative.coverImage
+                            ? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${collaborative.coverImage?.path.replace('/code/files/', '')}`
+                            : `${process.env.NEXT_PUBLIC_BACKEND_URL}/${collaborative.logo?.path.replace('/code/files/', '')}`
+                        }
+                        // imageUrl={`${process.env.NEXT_PUBLIC_BACKEND_URL}/${collaborative.logo?.path.replace('/code/files/', '')}`}
                         metadataContent={[
                           {
                             icon: Icons.calendar as any,
                             label: 'Started',
-                            value: formatDate(collaborative.startedOn),
+                            value: formatDate(collaborative.startedOn) || 'N/A',
                           },
                           {
                             icon: Icons.dataset as any,

diff --git a/app/[locale]/(user)/usecases/components/Metadata.tsx b/app/[locale]/(user)/usecases/components/Metadata.tsx
@@ -1,10 +1,10 @@
+import { useEffect, useState } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { Button, Divider, Icon, Text, Tooltip } from 'opub-ui';
-import { useEffect, useState } from 'react';
 
-import { Icons } from '@/components/icons';
 import { formatDate, getWebsiteTitle } from '@/lib/utils';
+import { Icons } from '@/components/icons';
 
 const Metadata = ({ data, setOpen }: { data: any; setOpen?: any }) => {
   const [platformTitle, setPlatformTitle] = useState<string | null>(null);
@@ -43,6 +43,7 @@ const Metadata = ({ data, setOpen }: { data: any; setOpen?: any }) => {
 
     return '/publishers';
   };
+  console.log('data?.useCase ', data?.useCase);
 
   const metadata = [
     {
@@ -92,11 +93,15 @@ const Metadata = ({ data, setOpen }: { data: any; setOpen?: any }) => {
         ),
       tooltipContent: data.useCase.platformUrl === null ? 'N/A' : platformTitle,
     },
-    {
-      label: 'Started On',
-      value: formatDate(data.useCase.startedOn) || 'N/A',
-      tooltipContent: formatDate(data.useCase.startedOn) || 'N/A',
-    },
+    ...(data.useCase.startedOn
+      ? [
+          {
+            label: 'Started On',
+            value: formatDate(data.useCase.startedOn) || 'N/A',
+            tooltipContent: formatDate(data.useCase.startedOn) || 'N/A',
+          },
+        ]
+      : []),
     {
       label: 'Status',
       value: data.useCase.runningStatus.split('_').join('') || 'N/A',

diff --git a/app/[locale]/dashboard/[entityType]/[entitySlug]/collaboratives/edit/[id]/details/page.tsx b/app/[locale]/dashboard/[entityType]/[entitySlug]/collaboratives/edit/[id]/details/page.tsx
@@ -8,9 +8,9 @@ import { useMutation, useQuery } from '@tanstack/react-query';
 import { DropZone, Select, TextField, toast } from 'opub-ui';
 
 import { GraphQL } from '@/lib/api';
+import { RichTextEditor } from '@/components/RichTextEditor';
 import { useEditStatus } from '../../context';
 import Metadata from '../metadata/page';
-import { RichTextEditor } from '@/components/RichTextEditor';
 
 const UpdateCollaborativeMutation: any = graphql(`
   mutation updateCollaborative($data: CollaborativeInputPartial!) {
@@ -74,31 +74,32 @@ const Details = () => {
 
   const router = useRouter();
 
-  const CollaborativeData: { data: any; isLoading: boolean; refetch: any } = useQuery(
-    [`fetch_CollaborativeData_details`],
-    () =>
-      GraphQL(
-        FetchCollaborative,
-        {
-          [params.entityType]: params.entitySlug,
-        },
-        {
-          filters: {
-            id: params.id,
+  const CollaborativeData: { data: any; isLoading: boolean; refetch: any } =
+    useQuery(
+      [`fetch_CollaborativeData_details`],
+      () =>
+        GraphQL(
+          FetchCollaborative,
+          {
+            [params.entityType]: params.entitySlug,
           },
-        }
-      ),
-    {
-      refetchOnMount: true,
-      refetchOnReconnect: true,
-    }
-  );
+          {
+            filters: {
+              id: params.id,
+            },
+          }
+        ),
+      {
+        refetchOnMount: true,
+        refetchOnReconnect: true,
+      }
+    );
 
   const CollaborativesData =
-    CollaborativeData?.data?.collaboratives && 
-    Array.isArray(CollaborativeData?.data?.collaboratives) && 
-    CollaborativeData?.data?.collaboratives?.length > 0 
-      ? CollaborativeData?.data?.collaboratives[0] 
+    CollaborativeData?.data?.collaboratives &&
+    Array.isArray(CollaborativeData?.data?.collaboratives) &&
+    CollaborativeData?.data?.collaboratives?.length > 0
+      ? CollaborativeData?.data?.collaboratives[0]
       : null;
 
   const initialFormData = {
@@ -251,7 +252,7 @@ const Details = () => {
       </div>
 
       <Metadata />
-      
+
       <div className="flex flex-wrap gap-6 md:flex-nowrap lg:flex-nowrap">
         <div className="w-full">
           <TextField
@@ -282,7 +283,7 @@ const Details = () => {
           />
         </div>
       </div>
-      
+
       <div>
         <DropZone
           label={!formData?.logo ? 'Logo *' : 'Change Logo *'}
@@ -292,25 +293,33 @@ const Details = () => {
           <DropZone.FileUpload
             actionHint="Only one image can be added. Recommended resolution: Square (400x400) - Supported File Types: PNG/JPG/SVG "
             actionTitle={
-              formData.logo && typeof formData.logo === 'object' && 'name' in formData.logo
+              formData.logo &&
+              typeof formData.logo === 'object' &&
+              'name' in formData.logo
                 ? (formData.logo as any).name?.split('/').pop() || 'Logo file'
                 : 'Name of the logo'
             }
           />
         </DropZone>
       </div>
-      
+
       <div>
         <DropZone
-          label={!formData?.coverImage ? 'Cover Image' : 'Change Cover Image'}
+          label={
+            !formData?.coverImage ? 'Cover Image *' : 'Change Cover Image *'
+          }
           onDrop={onCoverImageDrop}
           name={'CoverImage'}
+          required
         >
           <DropZone.FileUpload
             actionHint="Only one image can be added. Recommended resolution: 16:9 - (1280x720), (1920x1080) - Supported File Types: PNG/JPG "
             actionTitle={
-              formData.coverImage && typeof formData.coverImage === 'object' && 'name' in formData.coverImage
-                ? (formData.coverImage as any).name?.split('/').pop() || 'Cover image file'
+              formData.coverImage &&
+              typeof formData.coverImage === 'object' &&
+              'name' in formData.coverImage
+                ? (formData.coverImage as any).name?.split('/').pop() ||
+                  'Cover image file'
                 : 'Name of the cover image'
             }
           />

diff --git a/...[locale]/dashboard/[entityType]/[entitySlug]/collaboratives/edit/[id]/publish/Details.tsx b/...[locale]/dashboard/[entityType]/[entitySlug]/collaboratives/edit/[id]/publish/Details.tsx
@@ -101,6 +101,7 @@ const Details = ({ data }: { data: any }) => {
                 src={`${process.env.NEXT_PUBLIC_BACKEND_URL}/${data?.collaboratives[0]?.logo?.path.replace('/code/files/', '')}`}
                 alt={data?.collaboratives[0]?.title}
                 width={240}
+                className="object-contain"
                 height={240}
               />
             </div>

diff --git a/app/[locale]/dashboard/[entityType]/[entitySlug]/collaboratives/edit/[id]/publish/page.tsx b/app/[locale]/dashboard/[entityType]/[entitySlug]/collaboratives/edit/[id]/publish/page.tsx
@@ -188,8 +188,9 @@ const Publish = () => {
         CollaborativeData.data?.collaboratives[0]?.sectors.length === 0 ||
         CollaborativeData.data?.collaboratives[0]?.summary.length === 0 ||
         CollaborativeData.data?.collaboratives[0]?.sdgs.length === 0 ||
-        CollaborativeData.data?.collaboratives[0]?.logo === null
-          ? 'Summary or SDG or Sectors or Logo is missing. Please add to continue.'
+        CollaborativeData.data?.collaboratives[0]?.logo === null ||
+        CollaborativeData.data?.collaboratives[0]?.coverImage === null
+          ? 'Summary, SDG, Sectors, Logo, or Cover Image is missing. Please add to continue.'
           : '',
       errorType: 'critical',
     },
@@ -227,7 +228,8 @@ const Publish = () => {
       collaborative.sectors.length > 0 &&
       collaborative?.summary.length > 0 &&
       collaborative?.sdgs.length > 0 &&
-      collaborative?.logo !== null;
+      collaborative?.logo !== null &&
+      collaborative?.coverImage !== null;
 
     // No datasets assigned
     if (!hasDatasets) return true;

diff --git a/app/[locale]/dashboard/[entityType]/[entitySlug]/usecases/edit/[id]/details/page.tsx b/app/[locale]/dashboard/[entityType]/[entitySlug]/usecases/edit/[id]/details/page.tsx
@@ -10,9 +10,9 @@ import { DropZone, Select, TextField, toast } from 'opub-ui';
 // Assuming you are using these components
 
 import { GraphQL } from '@/lib/api';
+import { RichTextEditor } from '@/components/RichTextEditor';
 import { useEditStatus } from '../../context';
 import Metadata from '../metadata/page';
-import { RichTextEditor } from '@/components/RichTextEditor';
 
 const UpdateUseCaseMutation: any = graphql(`
   mutation updateUseCase($data: UseCaseInputPartial!) {
@@ -75,7 +75,6 @@ const Details = () => {
       ? error.message.trim()
       : fallback;
 
-
   const UseCaseData: { data: any; isLoading: boolean; refetch: any } = useQuery(
     [`fetch_UseCaseData_details`],
     () =>
@@ -285,6 +284,7 @@ const Details = () => {
             label="Started On"
             name="startedOn"
             type="date"
+            required
             max={new Date().toISOString().split('T')[0]}
             value={formData.startedOn || ''}
             onChange={(e) => {

diff --git a/app/[locale]/dashboard/[entityType]/[entitySlug]/usecases/edit/[id]/publish/Details.tsx b/app/[locale]/dashboard/[entityType]/[entitySlug]/usecases/edit/[id]/publish/Details.tsx
@@ -43,8 +43,18 @@ const Details = ({ data }: { data: any }) => {
       value: data?.useCases[0]?.completedOn,
     },
     { label: 'Sector', value: data?.useCases[0]?.sectors[0]?.name },
-    { label: 'Geography', value: data?.useCases[0]?.geographies?.map((geo: any) => geo.name).join(', ') },
-    { label: 'SDG Goals', value: data?.useCases[0]?.sdgs?.map((sdg: any) => `${sdg.code} - ${sdg.name}`).join(', ') },
+    {
+      label: 'Geography',
+      value: data?.useCases[0]?.geographies
+        ?.map((geo: any) => geo.name)
+        .join(', '),
+    },
+    {
+      label: 'SDG Goals',
+      value: data?.useCases[0]?.sdgs
+        ?.map((sdg: any) => `${sdg.code} - ${sdg.name}`)
+        .join(', '),
+    },
     { label: 'Tags', value: data?.useCases[0]?.tags[0]?.value },
     ...(data?.useCases[0]?.metadata?.map((meta: any) => ({
       label: meta.metadataItem?.label,
@@ -63,9 +73,9 @@ const Details = ({ data }: { data: any }) => {
                     <Text variant="bodyMd">{item.label}:</Text>
                   </div>
                   <div>
-                    <Text variant="bodyMd"><RichTextRenderer
-                                    content={item.value}
-                                  /></Text>
+                    <Text variant="bodyMd">
+                      <RichTextRenderer content={item.value} />
+                    </Text>
                   </div>
                 </div>
               )
@@ -81,7 +91,11 @@ const Details = ({ data }: { data: any }) => {
                   className="text-primaryBlue underline"
                   href={data.useCases[0].platformUrl}
                 >
-                  <Text className="underline" color="highlight" variant="bodyLg">
+                  <Text
+                    className="underline"
+                    color="highlight"
+                    variant="bodyLg"
+                  >
                     {platformTitle?.trim() ? platformTitle : 'Visit Platform'}
                   </Text>
                 </Link>
@@ -102,6 +116,7 @@ const Details = ({ data }: { data: any }) => {
                 src={`${process.env.NEXT_PUBLIC_BACKEND_URL}/${data?.useCases[0]?.logo?.path.replace('/code/files/', '')}`}
                 alt={data?.useCases[0]?.title}
                 width={240}
+                className="object-contain"
                 height={240}
               />
             </div>

diff --git a/app/[locale]/dashboard/[entityType]/[entitySlug]/usecases/edit/[id]/publish/page.tsx b/app/[locale]/dashboard/[entityType]/[entitySlug]/usecases/edit/[id]/publish/page.tsx
@@ -186,8 +186,9 @@ const Publish = () => {
         UseCaseData.data?.useCases[0]?.sectors.length === 0 ||
         UseCaseData.data?.useCases[0]?.summary.length === 0 ||
         UseCaseData.data?.useCases[0]?.sdgs.length === 0 ||
-        UseCaseData.data?.useCases[0]?.logo === null
-          ? 'Summary or SDG or Sectors or Logo is missing. Please add to continue.'
+        UseCaseData.data?.useCases[0]?.logo === null ||
+        !UseCaseData.data?.useCases[0]?.startedOn
+          ? 'Summary, SDG, Sectors, Logo, or Started On is missing. Please add to continue.'
           : '',
       errorType: 'critical',
     },
@@ -219,7 +220,8 @@ const Publish = () => {
       useCase.sectors.length > 0 &&
       useCase?.summary.length > 0 &&
       useCase?.sdgs.length > 0 &&
-      useCase?.logo !== null;
+      useCase?.logo !== null &&
+      !!useCase?.startedOn;
 
     // No datasets assigned
     if (!hasDatasets) return true;

diff --git a/lib/utils.ts b/lib/utils.ts
@@ -58,7 +58,8 @@ export function cn(...inputs: ClassNameValue[]) {
   return twMerge(inputs);
 }
 
-export function formatDate(input: string | number): string {
+export function formatDate(input: string | number | null): string {
+  if (input === null || input === undefined) return 'N/A';
   const date = new Date(input);
   return date.toLocaleDateString('en-US', {
     month: 'long',