add. Li

apps/web/src/app/main/courses/components/CourseCard.tsx

@@ -18,6 +18,8 @@ export default function CourseCard({ course }: CourseCardProps) {
 	const handleClick = (course: CourseDto) => {
 		navigate(`/course/${course.id}/detail`);
 	};
+
+
 	return (
 		<Card
 			onClick={() => handleClick(course)}
@@ -39,10 +41,26 @@ export default function CourseCard({ course }: CourseCardProps) {
 			}>
 			<div className="px-4">
 				<div className="flex gap-2 mb-4">
+          {course.terms.map((term) => {
+            return (
               <Tag
+                key={term.id}
+                // color={term.taxonomy.slug===TaxonomySlug.CATEGORY? "blue" : "green"}
+                color={term?.taxonomy?.slug === TaxonomySlug.CATEGORY
+                  ? "blue"
+                  : term?.taxonomy?.slug === TaxonomySlug.LEVEL
+                  ? "green"
+                  : "blue"}
+                className="px-3 py-1 rounded-full bg-blue-100 text-blue-600 border-0">
+                {term.name}
+              </Tag>
+            );
+          })}
+					{/* <Tag
 						color="blue"
 						className="px-3 py-1 rounded-full bg-blue-100 text-blue-600 border-0">
 						{course.terms?.[0].name}
+            
 					</Tag>
 
 					<Tag
@@ -55,7 +73,7 @@ export default function CourseCard({ course }: CourseCardProps) {
 						}
 						className="px-3 py-1 rounded-full border-0">
 						{course.terms?.[1].name}
-					</Tag>
+					</Tag> */}
 				</div>
 				<Title
 					level={4}
@@ -67,7 +85,8 @@ export default function CourseCard({ course }: CourseCardProps) {
 					<TeamOutlined className="text-blue-500 text-lg transform group-hover:scale-110 transition-transform duration-300" />
 					<div className="ml-2 flex items-center flex-grow">
 						<Text className="font-medium text-blue-500 hover:text-blue-600 transition-colors duration-300 truncate max-w-[120px]">
-							{course?.depts?.[0]?.name}
+							{(course.depts.map((depts)=>depts.name))}
+              {/* {course?.depts?.[0]?.name} */}
 						</Text>
 					</div>
 					<span className="text-xs font-medium text-gray-500">

apps/web/src/app/main/home/components/CoursesSection.tsx

@@ -6,7 +6,7 @@ import {
 	TeamOutlined,
 	ArrowRightOutlined,
 } from "@ant-design/icons";
-import { CourseDto, TaxonomySlug, TermDto } from "@nice/common";
+import { courseDetailSelect, CourseDto, TaxonomySlug, TermDto } from "@nice/common";
 import { api } from "@nice/client";
 import CourseCard from "../../courses/components/CourseCard";
 interface GetTaxonomyProps {
@@ -50,10 +50,7 @@ function useFetchCoursesByCategory(category: string) {
 						},
 					},
 			take: 8,
-			include: {
-				terms: true,
-				depts: true,
-			},
+			select: courseDetailSelect,
 		});
 
 	return { data, isLoading };
@@ -83,6 +80,9 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
 				);
 	}, [selectedCategory, data]);
 	const displayedCourses = isDataLoading ? [] : filteredCourses;
+  useEffect(()=>{
+    console.log(data)
+  })
 	return (
 		<section className="relative py-20 overflow-hidden bg-gradient-to-b from-gray-50 to-white">
 			<div className="max-w-screen-2xl mx-auto px-6 relative">

packages/common/src/models/post.ts

@@ -77,7 +77,7 @@ export type Course = Post & {
 export type CourseDto = Course & {
 	enrollments?: Enrollment[];
 	sections?: SectionDto[];
-	terms: Term[];
+	terms: TermDto[];
 	lectureCount?: number;
 	depts:Department[]
 };

packages/common/src/models/term.ts

@@ -1,8 +1,10 @@
-import { Term } from "@prisma/client";
+import { Taxonomy, Term } from "@prisma/client";
 import { ResPerm } from "./rbac";
+import { TaxonomySlug } from "../enum";
 
 export type TermDto = Term & {
     permissions: ResPerm;
     children: TermDto[];
     hasChildren: boolean;
+    taxonomy: Taxonomy
 };