fix: adjust share to whatsapp message

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

@@ -556,9 +556,43 @@ export function DetailDailyChecklistContent() {
     });
   };
 
-  const shareHandler = async () => {
+  const isMobileDevice = () => {
-    setIsGeneratingImage(true);
+    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+      navigator.userAgent
+    );
+  };
 
+  const getStatusMessage = () => {
+    switch (header?.status) {
+      case 'DRAFT':
+        return 'Checklist harian perlu disubmit';
+      case 'SUBMITTED':
+        return 'Checklist harian menunggu persetujuan';
+      case 'APPROVED':
+        return 'Checklist harian telah disetujui';
+      case 'REJECTED':
+        return 'Checklist harian telah ditolak';
+      default:
+        return '';
+    }
+  };
+
+  const shareHandler = async () => {
+    const isMobile = isMobileDevice();
+
+    if (isMobile) {
+      setIsGeneratingImage(true);
+    }
+
+    const baseTitle = `Daily Checklist - ${formatDate(header?.date || '')} - ${header?.kandang_name} - ${header?.category}`;
+    const statusMsg = getStatusMessage();
+    const statusInfo = `\nStatus: ${header?.status}${statusMsg ? ` - ${statusMsg}` : ''}`;
+    const urlMessage = `\n\nView full checklist: ${window.location.href}`;
+    const fullMessage = baseTitle + statusInfo + urlMessage;
+
+    let shareData: ShareData;
+
+    if (isMobile) {
       const htmlBlob = await htmlToImage.toBlob(document.body);
       const imgFile = new File(
         [htmlBlob!],
@@ -568,14 +602,21 @@ export function DetailDailyChecklistContent() {
         }
       );
 
-    setIsGeneratingImage(false);
+      shareData = {
-
-    const shareData = {
         files: [imgFile],
-      title: `Daily Checklist - ${formatDate(header?.date || '')} - ${header?.kandang_name} - ${header?.category}`,
+        title: baseTitle,
-      text: `Daily Checklist - ${formatDate(header?.date || '')} - ${header?.kandang_name} - ${header?.category}`,
+        text: fullMessage,
         url: window.location.href,
       };
+    } else {
+      shareData = {
+        title: baseTitle,
+        text: fullMessage,
+        url: window.location.href,
+      };
+    }
+
+    setIsGeneratingImage(false);
 
     try {
       if (!navigator.canShare(shareData)) {
@@ -592,6 +633,25 @@ export function DetailDailyChecklistContent() {
     }
   };
 
+  const shareToWhatsAppHandler = async () => {
+    const isMobile = isMobileDevice();
+    setIsGeneratingImage(true);
+
+    const statusMsg = getStatusMessage();
+    const category = header?.category || '';
+    const message = encodeURIComponent(
+      `Daily Checklist\n\nTanggal: ${formatDate(header?.date || '')}\nKandang: ${header?.kandang_name}\nKategori: ${CATEGORY_LABELS[category] || category}\nProgress: ${header?.progress_percent}%\nStatus: ${header?.status}${statusMsg ? ` - ${statusMsg}` : ''}\n\nLihat detail lengkap: ${window.location.href}`
+    );
+
+    setIsGeneratingImage(false);
+
+    const whatsappUrl = isMobile
+      ? `https://wa.me/?text=${message}`
+      : `https://web.whatsapp.com/send?text=${message}`;
+
+    window.open(whatsappUrl, '_blank');
+  };
+
   if (loading) {
     return (
       <div className='min-h-screen'>
@@ -618,8 +678,8 @@ export function DetailDailyChecklistContent() {
   return (
     <div className='min-h-screen'>
       <div className='p-6'>
-        {/* Page Title with Back Button */}
+        {/* Action Buttons */}
-        <div className='mb-6 flex items-center gap-4'>
+        <div className='mb-6 flex items-start sm:items-center justify-between gap-4 flex-wrap'>
           <Button
             variant='outline'
             size='sm'
@@ -630,18 +690,10 @@ export function DetailDailyChecklistContent() {
             Kembali
           </Button>
 
-          <div className='flex-1'>
+          <div className='flex items-center gap-2 flex-wrap'>
-            <h1 className='text-2xl font-semibold text-gray-900'>
-              Detail Daily Checklist
-            </h1>
-            <p className='text-sm text-gray-600 mt-1'>
-              Lihat detail checklist harian
-            </p>
-          </div>
-
             {header.status === 'SUBMITTED' && (
               <RequirePermission permissions='lti.daily_checklist.create'>
-              <div className='flex gap-2'>
+                <div className='flex gap-2 flex-wrap'>
                   <Button
                     onClick={handleApprove}
                     disabled={actionLoading}
@@ -675,6 +727,30 @@ export function DetailDailyChecklistContent() {
 
               {isGeneratingImage && 'Memuat...'}
             </Button>
+
+            <Button
+              variant='outline'
+              size='sm'
+              onClick={shareToWhatsAppHandler}
+              disabled={isGeneratingImage}
+              className='border-gray-200'
+            >
+              <Icon icon='mdi:whatsapp' className='w-4 h-4 mr-1' />
+              {!isGeneratingImage && 'Bagikan via WhatsApp'}
+
+              {isGeneratingImage && 'Memuat...'}
+            </Button>
+          </div>
+        </div>
+
+        {/* Page Title */}
+        <div className='mb-6'>
+          <h1 className='text-2xl font-semibold text-gray-900'>
+            Detail Daily Checklist
+          </h1>
+          <p className='text-sm text-gray-600 mt-1'>
+            Lihat detail checklist harian
+          </p>
         </div>
 
         {/* Header Info Card */}