fix: url and crm

Author: rob-at-cortex

src/components/Blocks/FeaturesBlock.tsx

@@ -3,6 +3,7 @@ import type { FeaturesBlock as FeaturesBlockProps } from '@/payload-types'
 import { cn } from '@/lib/utils/cn'
 import React from 'react'
 import { RichText } from '@/components/Payload/RichText'
+import { getLinkHref } from '@/lib/utils/getLinkHref'
 import type { Page } from '@/payload-types'
 import { ContentCard, FeatureCard } from '../Cards'
 // type Props = {
@@ -134,10 +135,7 @@ const IconFeature = ({ section, index }: { section: Section; index: number }) =>
   )
   return section.link ? (
     <a
-      href={
-        section.link.url ? section.link.url : '#'
-        // : `/${section.link.reference?.relationTo}/${(section.link.reference?.value as Page)?.slug || '#'}`
-      }
+      href={getLinkHref(section.link)}
       key={index}
       className="no-underline group"
     >

src/components/CRM/DealDetails.tsx

@@ -134,7 +134,7 @@ try {
   }
 
   const getUserById = (userId: string) => {
-    return users?.find((user) => (user as User).id === Number(userId));
+    return users?.find((user) => (user as User).id === userId);
   };
 
   return (

src/components/CRM/NewDealForm.tsx

@@ -157,7 +157,7 @@ export function NewDealForm({
 }
 
   const getUserById = (userId: string) => {
-    return users?.find((user) => (user as User).id === Number(userId))
+    return users?.find((user) => (user as User).id === userId)
   }
 
   const getCustomerById = (customerID: string) => {

src/components/CRM/mockData.ts

@@ -18,11 +18,11 @@ export const mockCategories: DealCategory[] = [
 
 
 export const mockUsers: User[] = [
-  { id: 1, name: "John Doe", email: "john.doe@example.com", role: "user", createdAt: "2023-01-01", updatedAt: "2023-01-01" },
-  { id: 2, name: "Jane Smith", email: "jane.smith@example.com", role: "user", createdAt: "2023-01-01", updatedAt: "2023-01-01" },
-  { id: 3, name: "Bob Johnson", email: "bob.johnson@example.com", role: "user", createdAt: "2023-01-01", updatedAt: "2023-01-01" },
-  { id: 4, name: "Alice Brown", email: "alice.brown@example.com", role: "user", createdAt: "2023-01-01", updatedAt: "2023-01-01" },
-  { id: 5, name: "Charlie Davis", email: "charlie.davis@example.com", role: "user", createdAt: "2023-01-01", updatedAt: "2023-01-01" },
+  { id: "1", name: "John Doe", email: "john.doe@example.com", role: "user", createdAt: "2023-01-01", updatedAt: "2023-01-01" },
+  { id: "2", name: "Jane Smith", email: "jane.smith@example.com", role: "user", createdAt: "2023-01-01", updatedAt: "2023-01-01" },
+  { id: "3", name: "Bob Johnson", email: "bob.johnson@example.com", role: "user", createdAt: "2023-01-01", updatedAt: "2023-01-01" },
+  { id: "4", name: "Alice Brown", email: "alice.brown@example.com", role: "user", createdAt: "2023-01-01", updatedAt: "2023-01-01" },
+  { id: "5", name: "Charlie Davis", email: "charlie.davis@example.com", role: "user", createdAt: "2023-01-01", updatedAt: "2023-01-01" },
 ];
 
 export const mockDeals: Deal[] = [
@@ -44,7 +44,7 @@ export const mockDeals: Deal[] = [
     id: 2,
     customer: { id: 2, name: "GlobalTech", active: true, createdAt: "2023-01-01", updatedAt: "2023-01-01" },
     value: 75000,
-    assignee: { id: 2, name: "Jane Smith", email: "jane.smith@example.com", role: "user", createdAt: "2023-01-01", updatedAt: "2023-01-01" },
+    assignee: { id: "2", name: "Jane Smith", email: "jane.smith@example.com", role: "user", createdAt: "2023-01-01", updatedAt: "2023-01-01" },
     status: "Proposal Made",
     categories: mockCategories.slice(0, 3), // Pass in 3 of the mockCategories
     dateLogged: "2023-02-01",

src/components/Cards/FeatureCard.tsx

@@ -4,6 +4,7 @@ import { Sparkles } from 'lucide-react'
 import { RichText } from '@/components/Payload/RichText'
 import { DynamicIcon, type DynamicIconProps, type IconType } from '../Images'
 import Image, { type StaticImageData } from 'next/image'
+import { getLinkHref } from '@/lib/utils/getLinkHref'
 
 import type { FeaturesBlock as FeaturesBlockProps, Media } from '@/payload-types'
 type Section = NonNullable<FeaturesBlockProps['features']>[number]
@@ -68,7 +69,7 @@ export function FeatureCard({
 
   return (
     <a
-      href={link?.url || '#'}
+      href={getLinkHref(link)}
       className={cn(
         'min-w-56 max-w-xl h-full flex flex-col group bg-background',
         image ? 'p-0' : 'p-6 md:p-8',

src/utils/getLinkHref.ts

@@ -0,0 +1,37 @@
+import type { Page } from '@/payload-types'
+
+/**
+ * Constructs a link href from either a direct URL or a reference structure
+ * @param link - Link object with optional url and reference
+ * @returns The constructed href string or '#'
+ */
+export function getLinkHref(link?: {
+  url?: string | null
+  reference?: {
+    relationTo?: string
+    value?: any
+  } | null
+}): string {
+  if (!link) return '#'
+
+  // If a direct URL exists, use it
+  if (link.url) return link.url
+
+  // If reference exists, build URL from relationTo and slug
+  if (link.reference?.value) {
+    const { relationTo, value } = link.reference
+    const slug = (value as Page)?.slug
+
+    if (!slug) return '#'
+
+    // For pages, just use the slug
+    if (relationTo === 'pages') {
+      return `/${slug}`
+    }
+
+    // For other relationTo types, use relationTo/slug format
+    return `/${relationTo}/${slug}`
+  }
+
+  return '#'
+}