audrix/dashboard-cpsp
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add collapse button for ai insight

Browse Source
This commit is contained in:
Alberto-Audrix committed 2026-10-08 10:24:08 +07:00
1 parent 6bad900cf0
commit 67df3eeeb6
2 files changed
+109 -26
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

components/AiInsightCard.tsx
+61 -15
View File
@@ -264,6 +264,7 @@ export const AiInsightCard: React.FC<AiInsightCardProps> = ({
const [detailsOpen, setDetailsOpen] = useState(false);
const [reportType, setReportType] = useState<InsightReportType>('daily');
const [dayPeriod, setDayPeriod] = useState<string | null>(null);
const [isCollapsed, setIsCollapsed] = useState(false);
const insightInFlightRef = useRef(false);
const effectiveKandangId = kandangId ?? selectedKandangId;
@@ -781,13 +782,28 @@ export const AiInsightCard: React.FC<AiInsightCardProps> = ({
};
return (
<div className="bg-white border border-gray-100 rounded-xl shadow-sm overflow-hidden">
<div 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 mb-4 gap-4">
<div className="flex items-center gap-2 min-w-0">
<i className="fa-solid fa-brain text-red-600 text-xl" />
<div
className={`flex flex-col md:flex-row md:items-center justify-between gap-4 ${isCollapsed ? '' : 'mb-4'}`}
>
<div
className="flex items-center gap-2 min-w-0 cursor-pointer select-none group"
onClick={() => setIsCollapsed((prev) => !prev)}
title={isCollapsed ? 'Klik untuk membuka AI Insight' : 'Klik untuk menutup AI Insight'}
>
<i className="fa-solid fa-brain text-red-600 text-xl shrink-0 group-hover:scale-110 transition-transform" />
<div className="min-w-0">
<h2 className="text-lg font-bold text-gray-900">AI Insight</h2>
<div className="flex items-center gap-2">
<h2 className="text-lg font-bold text-gray-900 group-hover:text-red-700 transition-colors">
AI Insight
</h2>
{isCollapsed && hasInsight && (
<span className="text-[11px] font-semibold text-emerald-700 bg-emerald-50 border border-emerald-200 px-2 py-0.5 rounded-full">
Tersedia
</span>
)}
</div>
<p className="text-xs text-gray-400 truncate">
{selectedKandang?.kandang_name ?? `Kandang ${effectiveKandangId}`}
{selectedSite?.site_name ? ` · ${selectedSite.site_name}` : ''}
@@ -795,7 +811,7 @@ export const AiInsightCard: React.FC<AiInsightCardProps> = ({
</div>
</div>
<div className="flex flex-wrap items-center gap-2">
{(page === 'dashboard' || !page) && (
{!isCollapsed && (page === 'dashboard' || !page) && (
<>
<select
value={reportType}
@@ -832,16 +848,29 @@ export const AiInsightCard: React.FC<AiInsightCardProps> = ({
>
<i className={`fa-solid fa-rotate-right text-gray-700 ${loading ? 'fa-spin' : ''}`} />
</button>
<button
type="button"
onClick={() => setIsCollapsed((prev) => !prev)}
className="p-2 rounded-lg transition-all shadow-sm border border-gray-200 bg-white hover:bg-gray-50 text-gray-600 hover:text-gray-900"
title={isCollapsed ? 'Buka AI Insight' : 'Tutup AI Insight'}
aria-label={isCollapsed ? 'Buka AI Insight' : 'Tutup AI Insight'}
>
<i
className={`fa-solid ${isCollapsed ? 'fa-chevron-down' : 'fa-chevron-up'} text-sm`}
/>
</button>
</div>
</div>
{!isCollapsed && (
<>
{effectiveKandangId != null ? renderVisualBlock() : null}
<div className="min-h-[120px]">
{effectiveKandangId == null ? (
<div className="bg-amber-50 border border-amber-100 rounded-lg p-4 text-sm text-amber-800">
Pilih satu kandang untuk menghasilkan AI Insight. Generate untuk semua kandang tidak
diizinkan.
Pilih satu kandang untuk menghasilkan AI Insight. Generate untuk semua kandang
tidak diizinkan.
</div>
) : loading && !insightText ? (
<div className="flex items-center justify-center py-8">
@@ -886,7 +915,8 @@ export const AiInsightCard: React.FC<AiInsightCardProps> = ({
<div className="rounded-xl border border-gray-100 bg-white p-5 shadow-sm">
<h4 className="text-sm font-bold text-gray-800 mb-3 flex items-center gap-2">
<i className="fa-solid fa-magnifying-glass-chart text-red-600" /> Akar penyebab
<i className="fa-solid fa-magnifying-glass-chart text-red-600" /> Akar
penyebab
</h4>
{endCycleInsight.akar_penyebab.length === 0 ? (
<p className="text-sm text-gray-500">
@@ -900,7 +930,9 @@ export const AiInsightCard: React.FC<AiInsightCardProps> = ({
className="rounded-lg border border-gray-100 bg-gray-50 p-3"
>
<div className="flex flex-wrap items-center gap-2">
<p className="text-sm font-semibold text-gray-800">{item.hipotesis}</p>
<p className="text-sm font-semibold text-gray-800">
{item.hipotesis}
</p>
{item.confidence ? (
<span
className={`rounded-full border px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide ${
@@ -919,7 +951,10 @@ export const AiInsightCard: React.FC<AiInsightCardProps> = ({
{item.bukti.length > 0 ? (
<ul className="mt-2 space-y-1">
{item.bukti.map((bukti, buktiIdx) => (
<li key={`${bukti}-${buktiIdx}`} className="text-xs text-gray-600">
<li
key={`${bukti}-${buktiIdx}`}
className="text-xs text-gray-600"
>
— {bukti}
</li>
))}
@@ -950,7 +985,9 @@ export const AiInsightCard: React.FC<AiInsightCardProps> = ({
</p>
<p className="mt-1 text-sm text-gray-800">{item.aksi}</p>
{item.metrik_pantau ? (
<p className="mt-1 text-xs text-gray-500">Pantau: {item.metrik_pantau}</p>
<p className="mt-1 text-xs text-gray-500">
Pantau: {item.metrik_pantau}
</p>
) : null}
</li>
))}
@@ -976,7 +1013,11 @@ export const AiInsightCard: React.FC<AiInsightCardProps> = ({
<i className="fa-solid fa-brain text-red-600" /> AI Insight
</h4>
<div className="text-sm text-gray-700 space-y-2 leading-relaxed">
{renderBulletList([...summary.bullets, ...summary.risks, ...summary.actions])}
{renderBulletList([
...summary.bullets,
...summary.risks,
...summary.actions,
])}
</div>
</div>
<CitationsBlock citations={citations} />
@@ -1047,7 +1088,8 @@ export const AiInsightCard: React.FC<AiInsightCardProps> = ({
{dailyInsight.akar_masalah && (
<div className="rounded-xl border border-amber-100/80 bg-amber-50/40 p-5 shadow-sm">
<h4 className="text-sm font-bold text-gray-800 mb-2 flex items-center gap-2">
<i className="fa-solid fa-magnifying-glass-chart text-amber-600" /> Akar Masalah
<i className="fa-solid fa-magnifying-glass-chart text-amber-600" /> Akar
Masalah
</h4>
<p className="text-sm text-gray-700 bg-white/80 p-3 rounded-lg border border-amber-100/80">
{dailyInsight.akar_masalah}
@@ -1078,7 +1120,9 @@ export const AiInsightCard: React.FC<AiInsightCardProps> = ({
<div className="flex flex-col items-center justify-center gap-2 py-8 text-center">
<i className="fa-solid fa-brain text-gray-300 text-2xl" />
<p className="text-sm text-gray-500">Belum ada AI Insight untuk periode ini.</p>
<p className="text-xs text-gray-400">Klik tombol refresh untuk generate insight.</p>
<p className="text-xs text-gray-400">
Klik tombol refresh untuk generate insight.
</p>
<button
type="button"
onClick={() => generateInsight(true)}
@@ -1096,6 +1140,8 @@ export const AiInsightCard: React.FC<AiInsightCardProps> = ({
<p className="text-xs text-gray-500">Terakhir diperbarui: {formatLastUpdated()}</p>
</div>
)}
</>
)}
</div>
</div>
);
components/shared/PageAiInsight.tsx
+48 -11
View File
@@ -169,6 +169,7 @@ export const PageAiInsight: React.FC<PageAiInsightProps> = ({
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [stage, setStage] = useState<InsightJobStage | null>(null);
const [isCollapsed, setIsCollapsed] = useState(false);
const supportsTimeframe = Boolean(scalarScope);
const timeframe: 'harian' | 'mingguan' = 'harian';
@@ -673,14 +674,27 @@ export const PageAiInsight: React.FC<PageAiInsightProps> = ({
}, [scopeKey]);
return (
<div className="rounded-xl border border-gray-100 bg-white shadow-sm overflow-hidden mb-6">
<div 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">
<div className="p-1.5 bg-red-50 rounded-lg">
<div
className="flex items-center gap-2.5 min-w-0 cursor-pointer select-none group"
onClick={() => setIsCollapsed((prev) => !prev)}
title={isCollapsed ? 'Klik untuk membuka AI Insight' : 'Klik untuk menutup AI Insight'}
>
<div className="p-1.5 bg-red-50 rounded-lg group-hover:bg-red-100 transition-colors">
<i className={`fa-solid ${meta.icon} text-red-600 text-sm`} />
</div>
<div className="min-w-0">
<span className="text-sm font-bold text-gray-900">{meta.title}</span>
<div className="flex items-center gap-2">
<span className="text-sm font-bold text-gray-900 group-hover:text-red-700 transition-colors">
{meta.title}
</span>
{isCollapsed && result && (
<span className="text-[10px] font-semibold text-emerald-700 bg-emerald-50 border border-emerald-200 px-2 py-0.5 rounded-full">
Tersedia
</span>
)}
</div>
<p className="text-xs text-gray-400 truncate">
{selectedKandang?.kandang_name ?? 'Kandang'}
{selectedSite?.site_name ? ` · ${selectedSite.site_name}` : ''}
@@ -693,7 +707,10 @@ export const PageAiInsight: React.FC<PageAiInsightProps> = ({
</div>
</div>
<div className="flex items-center gap-2 shrink-0">
{supportsTimeframe && timeframe === 'harian' && availableDays.length > 1 && (
{!isCollapsed &&
supportsTimeframe &&
timeframe === 'harian' &&
availableDays.length > 1 && (
<select
value={effectiveDay ?? availableDays[availableDays.length - 1]}
onChange={(e) => setSelectedDay(parseInt(e.target.value, 10))}
@@ -717,9 +734,21 @@ export const PageAiInsight: React.FC<PageAiInsightProps> = ({
className={`fa-solid fa-rotate-right text-gray-600 text-sm ${loading ? 'fa-spin' : ''}`}
/>
</button>
<button
type="button"
onClick={() => setIsCollapsed((prev) => !prev)}
title={isCollapsed ? 'Buka AI Insight' : 'Tutup AI Insight'}
aria-label={isCollapsed ? 'Buka AI Insight' : 'Tutup AI Insight'}
className="p-1.5 rounded-lg border border-gray-200 bg-white hover:bg-gray-50 transition-all text-gray-600 hover:text-gray-900"
>
<i
className={`fa-solid ${isCollapsed ? 'fa-chevron-down' : 'fa-chevron-up'} text-sm`}
/>
</button>
</div>
</div>
{!isCollapsed && (
<div className="p-4">
{selectedKandangId == null && (
<div className="flex items-start gap-2 bg-amber-50 border border-amber-100 rounded-xl p-3">
@@ -870,7 +899,9 @@ export const PageAiInsight: React.FC<PageAiInsightProps> = ({
</span>
</div>
<div className="flex justify-between items-center py-1 border-b border-gray-50">
<span className="text-sm text-gray-600 font-medium">BW Rata-rata Panen</span>
<span className="text-sm text-gray-600 font-medium">
BW Rata-rata Panen
</span>
<span className="text-sm font-bold text-gray-900">
{typeof displayContext.bw_panen_gram === 'number'
? `${displayContext.bw_panen_gram.toLocaleString('id-ID', {
@@ -900,8 +931,10 @@ export const PageAiInsight: React.FC<PageAiInsightProps> = ({
<span className="text-sm text-gray-600 font-medium">Experience Suhu</span>
<span className="text-sm font-bold text-gray-900">
{renderDayRange(
displayContext.experience_suhu_min_C ?? displayContext.experience_suhu_C,
displayContext.experience_suhu_max_C ?? displayContext.experience_suhu_C,
displayContext.experience_suhu_min_C ??
displayContext.experience_suhu_C,
displayContext.experience_suhu_max_C ??
displayContext.experience_suhu_C,
'°C'
)}
</span>
@@ -910,8 +943,10 @@ export const PageAiInsight: React.FC<PageAiInsightProps> = ({
<span className="text-sm text-gray-600 font-medium">Kelembapan</span>
<span className="text-sm font-bold text-gray-900">
{renderDayRange(
displayContext.kelembapan_min_persen ?? displayContext.kelembapan_persen,
displayContext.kelembapan_max_persen ?? displayContext.kelembapan_persen,
displayContext.kelembapan_min_persen ??
displayContext.kelembapan_persen,
displayContext.kelembapan_max_persen ??
displayContext.kelembapan_persen,
'%'
)}
</span>
@@ -1046,7 +1081,8 @@ export const PageAiInsight: React.FC<PageAiInsightProps> = ({
{result.akar_masalah && (
<div className="mt-4">
<h4 className="text-sm font-bold text-gray-800 mb-2 flex items-center gap-2">
<i className="fa-solid fa-magnifying-glass-chart text-amber-600" /> Akar Masalah
<i className="fa-solid fa-magnifying-glass-chart text-amber-600" /> Akar
Masalah
</h4>
<p className="text-sm text-gray-700 bg-amber-50/50 p-3 rounded-lg border border-amber-100/80">
{result.akar_masalah}
@@ -1068,6 +1104,7 @@ export const PageAiInsight: React.FC<PageAiInsightProps> = ({
</div>
)}
</div>
)}
</div>
);
};