fix: added comments

Author: ishanBahuguna

frontend/src/components/CardDetailsPage.tsx

@@ -74,6 +74,7 @@ const DetailsCard = ({
   const { data } = useSession()
   const router = useRouter()
 
+  // compute styles based on type prop
   const secondaryCardStyles = (() => {
     if (type === 'program' || type === 'module') {
       return 'gap-2 md:col-span-7'

frontend/src/components/ProgramCard.tsx

@@ -31,6 +31,7 @@ const ProgramCard: React.FC<ProgramCardProps> = ({ program, onEdit, onView, acce
       ? `${program.description.slice(0, 100)}...`
       : program.description || 'No description available.'
 
+  // computes a formatted date string for the program based on its start and end dates.
   const dateInfo = (() => {
     if (program.startedAt && program.endedAt) {
       return `${formatDate(program.startedAt)} – ${formatDate(program.endedAt)}`

frontend/src/hooks/useSearchPage.ts

@@ -84,9 +84,11 @@ export function useSearchPage<T>({
       try {
         let computedIndexName = indexName
 
+        // check if valid sort option is selected
         const hasValidSort = sortBy && sortBy !== 'default' && sortBy[0] !== 'default'
 
         if (hasValidSort) {
+        // if sorting is active then  appends the sort field and order to the base index name.
           const orderSuffix = order && order !== '' ? `_${order}` : ''
           computedIndexName = `${indexName}_${sortBy}${orderSuffix}`
         }

frontend/src/utils/milestoneProgress.ts

@@ -1,5 +1,6 @@
 import { faCircleCheck, faClock, faUserGear } from '@fortawesome/free-solid-svg-icons'
 
+// helper functions used in about/page.tsx
 export const getMilestoneProgressText = (progress: number): string => {
   if (progress === 100) {
     return 'Completed'