update collapse button, add to bottom of ai insight

components/AiInsightCard.tsx

@@ -265,6 +265,7 @@ export const AiInsightCard: React.FC<AiInsightCardProps> = ({
   const [reportType, setReportType] = useState<InsightReportType>('daily');
   const [dayPeriod, setDayPeriod] = useState<string | null>(null);
   const [isCollapsed, setIsCollapsed] = useState(false);
+  const cardRef = useRef<HTMLDivElement>(null);
   const insightInFlightRef = useRef(false);
 
   const effectiveKandangId = kandangId ?? selectedKandangId;
@@ -782,7 +783,10 @@ export const AiInsightCard: React.FC<AiInsightCardProps> = ({
   };
 
   return (
-    <div className="bg-white border border-gray-100 rounded-xl shadow-sm overflow-hidden transition-all">
+    <div
+      ref={cardRef}
+      className="bg-white border border-gray-100 rounded-xl shadow-sm overflow-hidden transition-all"
+    >
       <div className="p-5 sm:p-6">
         <div
           className={`flex flex-col md:flex-row md:items-center justify-between gap-4 ${isCollapsed ? '' : 'mb-4'}`}
@@ -1135,11 +1139,25 @@ export const AiInsightCard: React.FC<AiInsightCardProps> = ({
               )}
             </div>
 
-            {lastUpdated && (
+            <div className="mt-6 pt-4 border-t border-gray-100 flex flex-col items-center justify-center gap-1.5">
-              <div className="mt-4 pt-4 border-t border-gray-100">
+              <button
-                <p className="text-xs text-gray-500">Terakhir diperbarui: {formatLastUpdated()}</p>
+                type="button"
-              </div>
+                onClick={() => {
-            )}
+                  setIsCollapsed(true);
+                  cardRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                }}
+                className="group flex items-center justify-center w-10 h-7 rounded-full bg-gray-50 hover:bg-red-50 text-gray-400 hover:text-red-600 border border-gray-200 hover:border-red-200 shadow-xs transition-all duration-200"
+                title="Tutup AI Insight"
+                aria-label="Tutup AI Insight"
+              >
+                <i className="fa-solid fa-chevron-up text-xs transition-transform group-hover:-translate-y-0.5" />
+              </button>
+              {lastUpdated && (
+                <p className="text-[11px] text-gray-400">
+                  Terakhir diperbarui: {formatLastUpdated()}
+                </p>
+              )}
+            </div>
           </>
         )}
       </div>

components/shared/PageAiInsight.tsx

@@ -239,6 +239,7 @@ export const PageAiInsight: React.FC<PageAiInsightProps> = ({
   const lastCacheKeyRef = useRef<string | null>(null);
   const desiredKeyRef = useRef<string>('');
   const requestIdRef = useRef(0);
+  const cardRef = useRef<HTMLDivElement>(null);
   const generateRef = useRef<(force?: boolean) => Promise<void>>(async () => {});
 
   const chartHighlight = React.useMemo(() => {
@@ -674,7 +675,10 @@ export const PageAiInsight: React.FC<PageAiInsightProps> = ({
   }, [scopeKey]);
 
   return (
-    <div className="rounded-xl border border-gray-100 bg-white shadow-sm overflow-hidden mb-6 transition-all">
+    <div
+      ref={cardRef}
+      className="rounded-xl border border-gray-100 bg-white shadow-sm overflow-hidden mb-6 transition-all"
+    >
       <div className="flex items-center justify-between px-5 py-3.5 border-b border-gray-100 bg-gray-50/80">
         <div
           className="flex items-center gap-2.5 min-w-0 cursor-pointer select-none group"
@@ -1103,6 +1107,21 @@ export const PageAiInsight: React.FC<PageAiInsightProps> = ({
               </div>
             </div>
           )}
+
+          <div className="mt-5 pt-3 border-t border-gray-100 flex justify-center">
+            <button
+              type="button"
+              onClick={() => {
+                setIsCollapsed(true);
+                cardRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+              }}
+              className="group flex items-center justify-center w-10 h-7 rounded-full bg-gray-50 hover:bg-red-50 text-gray-400 hover:text-red-600 border border-gray-200 hover:border-red-200 shadow-xs transition-all duration-200"
+              title="Tutup AI Insight"
+              aria-label="Tutup AI Insight"
+            >
+              <i className="fa-solid fa-chevron-up text-xs transition-transform group-hover:-translate-y-0.5" />
+            </button>
+          </div>
         </div>
       )}
     </div>