fixing data fetching from external API, spesifically in achievement and projects categories and name of team member

groups/ACAAB/src/components/AchievementModal.tsx

@@ -88,10 +88,30 @@ export default function AchievementModal({ achievement, onClose }: AchievementMo
             <InfoRow icon={<Tag size={14} />} label={t.modal.bidang} value={achievement.category} />
           </div>
 
+          {/* Members list */}
+          {achievement.members && achievement.members.length > 0 && (
+            <div className="border-t border-slate-100 pt-4 mb-4">
+              <p className="text-[10px] font-bold uppercase tracking-wider text-slate-400 mb-2">Anggota Tim</p>
+              <ul className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+                {achievement.members.map((m, i) => (
+                  <li key={i} className="flex items-center gap-2 bg-slate-50 px-3 py-2 rounded-md">
+                    <span className="w-6 h-6 rounded-full bg-primary-gold/20 text-primary-gold flex items-center justify-center text-xs font-bold shrink-0">
+                      {m.nama.charAt(0).toUpperCase()}
+                    </span>
+                    <div className="flex flex-col">
+                      <span className="text-sm font-semibold text-slate-700 leading-none">{m.nama}</span>
+                      {m.angkatan && <span className="text-[10px] text-slate-500 mt-1">Angkatan {m.angkatan}</span>}
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+
           {/* Description */}
           <div className="border-t border-slate-100 pt-4">
             <p className="text-[10px] font-bold uppercase tracking-wider text-slate-400 mb-2">{t.modal.deskripsi}</p>
-            <p className="text-slate-600 text-sm leading-relaxed">{achievement.description}</p>
+            <p className="text-slate-600 text-sm leading-relaxed">{achievement.description.replace(/\*\*/g, '')}</p>
           </div>
 
           {/* Close button */}

groups/ACAAB/src/components/ProjectCarousel.tsx

@@ -23,7 +23,7 @@ export default function ProjectCarousel() {
   const [filterYear, setFilterYear] = useState('');
 
   const categories = useMemo(
-    () => [...new Set(projects.map((p) => p.category))].sort(),
+    () => [...new Set(projects.flatMap((p) => p.category))].sort(),
     [projects]
   );
   
@@ -40,9 +40,9 @@ export default function ProjectCarousel() {
         !q ||
         p.title.toLowerCase().includes(q) ||
         p.studentName.toLowerCase().includes(q) ||
-        p.category.toLowerCase().includes(q) ||
+        p.category.join(' ').toLowerCase().includes(q) ||
         p.description.toLowerCase().includes(q);
-      const matchCategory = !filterCategory || p.category === filterCategory;
+      const matchCategory = !filterCategory || p.category.includes(filterCategory);
       const matchYear = !filterYear || String(p.year) === filterYear;
       return matchSearch && matchCategory && matchYear;
     });
@@ -271,11 +271,15 @@ export default function ProjectCarousel() {
                         <h4 className="text-lg font-bold font-display text-white leading-snug mb-1">
                           {project.title}
                         </h4>
-                        {project.category && (
-                          <span className="inline-flex items-center gap-1 text-[10px] font-bold text-primary-gold uppercase tracking-wider">
-                            <Tag size={10} />
-                            {project.category}
-                          </span>
+                        {project.category && project.category.length > 0 && (
+                          <div className="flex flex-wrap gap-2 mt-1">
+                            {project.category.map((cat, i) => (
+                              <span key={i} className="inline-flex items-center gap-1 text-[10px] font-bold text-primary-gold uppercase tracking-wider bg-black/30 px-2 py-1 rounded backdrop-blur-sm">
+                                <Tag size={10} />
+                                {cat}
+                              </span>
+                            ))}
+                          </div>
                         )}
                       </div>
                     </div>

groups/ACAAB/src/components/ProjectModal.tsx

@@ -56,12 +56,14 @@ export default function ProjectModal({ project, onClose }: ProjectModalProps) {
           </button>
 
           {/* Category badge */}
-          {project.category && (
-            <div className="absolute bottom-4 left-4">
-              <span className="bg-primary-gold text-slate-900 text-xs font-bold px-3 py-1.5 rounded flex items-center gap-1.5 uppercase tracking-wide">
-                <Tag size={12} />
-                {project.category}
-              </span>
+          {project.category && project.category.length > 0 && (
+            <div className="absolute bottom-4 left-4 flex flex-wrap gap-2">
+              {project.category.map((cat, i) => (
+                <span key={i} className="bg-primary-gold text-slate-900 text-xs font-bold px-3 py-1.5 rounded flex items-center gap-1.5 uppercase tracking-wide">
+                  <Tag size={12} />
+                  {cat}
+                </span>
+              ))}
             </div>
           )}
         </div>
@@ -81,15 +83,41 @@ export default function ProjectModal({ project, onClose }: ProjectModalProps) {
             {project.year && (
               <InfoRow icon={<Calendar size={14} />} label={t.modal.tahun} value={String(project.year)} />
             )}
-            {project.category && (
-              <InfoRow icon={<Tag size={14} />} label={t.modal.bidang} value={project.category} />
+            {project.category && project.category.length > 0 && (
+              <InfoRow icon={<Tag size={14} />} label={t.modal.bidang} value={project.category.join(', ')} />
             )}
           </div>
 
+          {/* Members list */}
+          {project.members && project.members.length > 0 && (
+            <div className="border-t border-slate-100 pt-4 mb-4">
+              <p className="text-[10px] font-bold uppercase tracking-wider text-slate-400 mb-2">Anggota Tim</p>
+              <ul className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+                {project.members.map((m, i) => (
+                  <li key={i} className="flex items-center gap-2 bg-slate-50 px-3 py-2 rounded-md border border-slate-100">
+                    <span className="w-6 h-6 rounded-full bg-primary-gold/20 text-primary-gold flex items-center justify-center text-xs font-bold shrink-0">
+                      {m.nama.charAt(0).toUpperCase()}
+                    </span>
+                    <div className="flex flex-col">
+                      <span className="text-sm font-semibold text-slate-700 leading-none">{m.nama}</span>
+                      {m.nim && <span className="text-[10px] text-slate-500 mt-1">{m.nim}</span>}
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+
           {/* Description */}
           <div className="border-t border-slate-100 pt-4 mb-5">
             <p className="text-[10px] font-bold uppercase tracking-wider text-slate-400 mb-2">{t.modal.deskripsi}</p>
             <p className="text-slate-600 text-sm leading-relaxed">{project.description}</p>
+            {project.catatan && (
+              <div className="mt-4 p-3 bg-blue-50/50 border border-blue-100 rounded-lg">
+                <p className="text-[10px] font-bold uppercase tracking-wider text-blue-400 mb-1">Catatan Tambahan</p>
+                <p className="text-sm text-slate-600 italic">{project.catatan}</p>
+              </div>
+            )}
           </div>
 
           {/* Project link */}