From 26c69b340d69e5dbbe854ca9c4059a67cd9b2215 Mon Sep 17 00:00:00 2001
From: Alberto-Audrix <alberto.suiwidjaya6@gmail.com>
Date: Thu, 8 Oct 2026 10:54:49 +0700
Subject: [PATCH] update collapse button, add to bottom of ai insight

---
 components/AiInsightCard.tsx        | 30 +++++++++++++++++++++++------
 components/shared/PageAiInsight.tsx | 21 +++++++++++++++++++-
 2 files changed, 44 insertions(+), 7 deletions(-)

diff --git a/components/AiInsightCard.tsx b/components/AiInsightCard.tsx
index 270fa0c..6d04c02 100644
--- a/components/AiInsightCard.tsx
+++ b/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-4 pt-4 border-t border-gray-100">
-                <p className="text-xs text-gray-500">Terakhir diperbarui: {formatLastUpdated()}</p>
-              </div>
-            )}
+            <div className="mt-6 pt-4 border-t border-gray-100 flex flex-col items-center justify-center gap-1.5">
+              <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>
+              {lastUpdated && (
+                <p className="text-[11px] text-gray-400">
+                  Terakhir diperbarui: {formatLastUpdated()}
+                </p>
+              )}
+            </div>
           </>
         )}
       </div>
diff --git a/components/shared/PageAiInsight.tsx b/components/shared/PageAiInsight.tsx
index 320674e..1835e66 100644
--- a/components/shared/PageAiInsight.tsx
+++ b/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>