share link daftar-tamu

proyek-frontend/app/pages/p/daftar-tamu.vue

@@ -92,8 +92,28 @@
                 >
                   <td class="p-3 text-gray-700">{{ index + 1 }}</td>
                   <td class="p-3 text-gray-800 font-medium">{{ guest.nama_tamu }}</td>
-                  <td class="p-3 text-gray-600 font-mono text-sm">
+                  <td class="p-3">
-                    <a :href="`${config.public.baseUrl}/p/${guest.kode_invitasi}`" target="_blank">{{ guest.kode_invitasi }}</a>
+                    <div class="flex items-center gap-2">
+                      <a 
+                        :href="`${config.public.baseUrl}/p/${guest.kode_invitasi}`" 
+                        target="_blank"
+                        class="text-gray-600 font-mono text-sm hover:text-blue-600 hover:underline transition"
+                        @click.stop
+                      >
+                        {{ guest.kode_invitasi }}
+                      </a>
+                      <button
+                        @click="shareInvitationLink(guest.kode_invitasi)"
+                        class="bg-indigo-500 hover:bg-indigo-600 text-white px-3 py-1 rounded-lg text-xs font-medium transition shadow-sm whitespace-nowrap flex items-center gap-1"
+                        :disabled="loading"
+                        title="Bagikan Link Invitasi"
+                      >
+                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z"></path>
+                        </svg>
+                        Share
+                      </button>
+                    </div>
                   </td>
                   <td class="p-3 text-center">
                     <button
@@ -133,6 +153,60 @@ const backendUrl = config.public.apiBaseUrl;
 // Runtime Config
 const { public: { apiBase } } = useRuntimeConfig();
 
+// Share invitation link
+const shareInvitationLink = async (kodeInvitasi) => {
+  const inviteUrl = `${config.public.baseUrl}/p/${kodeInvitasi}`;
+  
+  if (navigator.share) {
+    // Native Web Share API (mobile)
+    try {
+      await navigator.share({
+        title: 'Undangan Pernikahan',
+        text: 'Silakan buka undangan pernikahan saya',
+        url: inviteUrl,
+      });
+    } catch (error) {
+      if (error.name !== 'AbortError') {
+        copyToClipboard(inviteUrl);
+      }
+    }
+  } else {
+    // Fallback to copy to clipboard (desktop)
+    copyToClipboard(inviteUrl);
+  }
+};
+
+// Copy to clipboard function
+const copyToClipboard = (text) => {
+  navigator.clipboard.writeText(text).then(() => {
+    // Show temporary success message
+    const originalText = successMessage.value;
+    successMessage.value = 'Link undangan berhasil disalin!';
+    setTimeout(() => {
+      successMessage.value = originalText;
+    }, 2000);
+  }).catch((err) => {
+    console.error('Failed to copy: ', err);
+    // Fallback for older browsers
+    const textArea = document.createElement('textarea');
+    textArea.value = text;
+    document.body.appendChild(textArea);
+    textArea.focus();
+    textArea.select();
+    try {
+      document.execCommand('copy');
+      const originalText = successMessage.value;
+      successMessage.value = 'Link undangan berhasil disalin!';
+      setTimeout(() => {
+        successMessage.value = originalText;
+      }, 2000);
+    } catch (err) {
+      console.error('Fallback copy failed: ', err);
+    }
+    document.body.removeChild(textArea);
+  });
+};
+
 // Fetch guests data based on customer code
 const handleFetchGuests = async () => {
   if (!kodePelanggan.value.trim()) {