fix: adjust share to whatsapp message

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

@@ -556,27 +556,68 @@ 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 htmlBlob = await htmlToImage.toBlob(document.body);
-    const imgFile = new File(
-      [htmlBlob!],
-      `daily-checklist-${header?.date}-${header?.kandang_name}-${header?.category}.png`,
-      {
-        type: 'image/png',
-      }
     );
+  };
+
+  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!],
+        `daily-checklist-${header?.date}-${header?.kandang_name}-${header?.category}.png`,
+        {
+          type: 'image/png',
+        }
+      );
+
+      shareData = {
+        files: [imgFile],
+        title: baseTitle,
+        text: fullMessage,
+        url: window.location.href,
+      };
+    } else {
+      shareData = {
+        title: baseTitle,
+        text: fullMessage,
+        url: window.location.href,
+      };
+    }
 
     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(
@@ -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,51 +690,67 @@ 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'>
+            {header.status === 'SUBMITTED' && (
-              Detail Daily Checklist
+              <RequirePermission permissions='lti.daily_checklist.create'>
-            </h1>
+                <div className='flex gap-2 flex-wrap'>
-            <p className='text-sm text-gray-600 mt-1'>
+                  <Button
-              Lihat detail checklist harian
+                    onClick={handleApprove}
-            </p>
+                    disabled={actionLoading}
+                    className='bg-green-600 hover:bg-green-700 text-white'
+                  >
+                    <CheckCircle className='w-4 h-4 mr-2' />
+                    Approve
+                  </Button>
+                  <Button
+                    onClick={handleReject}
+                    disabled={actionLoading}
+                    variant='destructive'
+                    className='bg-red-600 hover:bg-red-700 text-white'
+                  >
+                    <XCircle className='w-4 h-4 mr-2' />
+                    Reject
+                  </Button>
+                </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>
+
+            <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>
 
-          {header.status === 'SUBMITTED' && (
+        {/* Page Title */}
-            <RequirePermission permissions='lti.daily_checklist.create'>
+        <div className='mb-6'>
-              <div className='flex gap-2'>
+          <h1 className='text-2xl font-semibold text-gray-900'>
-                <Button
+            Detail Daily Checklist
-                  onClick={handleApprove}
+          </h1>
-                  disabled={actionLoading}
+          <p className='text-sm text-gray-600 mt-1'>
-                  className='bg-green-600 hover:bg-green-700 text-white'
+            Lihat detail checklist harian
-                >
+          </p>
-                  <CheckCircle className='w-4 h-4 mr-2' />
-                  Approve
-                </Button>
-                <Button
-                  onClick={handleReject}
-                  disabled={actionLoading}
-                  variant='destructive'
-                  className='bg-red-600 hover:bg-red-700 text-white'
-                >
-                  <XCircle className='w-4 h-4 mr-2' />
-                  Reject
-                </Button>
-              </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 */}