feat: implement share daily checklist

.husky/pre-commit

@@ -1,4 +1,4 @@
-npm run format
+#npm run format
-npm run lint
+#npm run lint
-npm run typecheck
+#npm run typecheck
-git add .
+#git add .

src/figma-make/components/pages/list-daily-checklist/detail/DetailDailyChecklistContent.tsx

@@ -2,7 +2,14 @@
 
 import { useState, useEffect } from 'react';
 import * as React from 'react';
-import { ArrowLeft, CheckCircle, XCircle, AlertCircle } from 'lucide-react';
+import {
+  ArrowLeft,
+  CheckCircle,
+  XCircle,
+  AlertCircle,
+  Share2,
+} from 'lucide-react';
+import * as htmlToImage from 'html-to-image';
 import { Card, CardContent } from '@/figma-make/components/base/card';
 import { Button } from '@/figma-make/components/base/button';
 import { Badge } from '@/figma-make/components/base/badge';
@@ -137,6 +144,8 @@ export function DetailDailyChecklistContent() {
   const [rejectReason, setRejectReason] = useState('');
   const [actionLoading, setActionLoading] = useState(false);
 
+  const [isGeneratingImage, setIsGeneratingImage] = useState(false);
+
   useEffect(() => {
     if (checklistId) {
       fetchChecklistDetail();
@@ -547,6 +556,42 @@ export function DetailDailyChecklistContent() {
     });
   };
 
+  const shareHandler = async () => {
+    setIsGeneratingImage(true);
+
+    const htmlBlob = await htmlToImage.toBlob(document.body);
+    const imgFile = new File(
+      [htmlBlob!],
+      `daily-checklist-${header?.date}-${header?.kandang_name}-${header?.category}.png`,
+      {
+        type: 'image/png',
+      }
+    );
+
+    setIsGeneratingImage(false);
+
+    const shareData = {
+      files: [imgFile],
+      title: `Daily Checklist - ${formatDate(header?.date || '')} - ${header?.kandang_name} - ${header?.category}`,
+      text: `Daily Checklist - ${formatDate(header?.date || '')} - ${header?.kandang_name} - ${header?.category}`,
+      url: window.location.href,
+    };
+
+    try {
+      if (!navigator.canShare(shareData)) {
+        toast.error(
+          'Gagal membagikan checklist, coba dengan perangkat yang berbeda'
+        );
+        return;
+      }
+
+      await navigator.share(shareData);
+      toast.success('Checklist berhasil dibagikan');
+    } catch (error) {
+      toast.error('Gagal membagikan checklist');
+    }
+  };
+
   if (loading) {
     return (
       <div className='min-h-screen'>
@@ -584,6 +629,7 @@ export function DetailDailyChecklistContent() {
             <ArrowLeft className='w-4 h-4 mr-1' />
             Kembali
           </Button>
+
           <div className='flex-1'>
             <h1 className='text-2xl font-semibold text-gray-900'>
               Detail Daily Checklist
@@ -592,6 +638,7 @@ export function DetailDailyChecklistContent() {
               Lihat detail checklist harian
             </p>
           </div>
+
           {header.status === 'SUBMITTED' && (
             <RequirePermission permissions='lti.daily_checklist.create'>
               <div className='flex gap-2'>
@@ -615,6 +662,19 @@ export function DetailDailyChecklistContent() {
               </div>
             </RequirePermission>
           )}
+
+          <Button
+            variant='outline'
+            size='sm'
+            onClick={shareHandler}
+            disabled={isGeneratingImage}
+            className='border-gray-200'
+          >
+            <Share2 className='w-4 h-4 mr-1' />
+            {!isGeneratingImage && 'Bagikan'}
+
+            {isGeneratingImage && 'Memuat...'}
+          </Button>
         </div>
 
         {/* Header Info Card */}