Changes

2025-12-19 14:43:28 +00:00
parent 04a140b305
commit b63da103cd
8 changed files with 265 additions and 35 deletions
--- a/src/components/AppLayout.tsx
+++ b/src/components/AppLayout.tsx
@@ -20,6 +20,7 @@ import {
  Home,
  MoreHorizontal,
  X,
+  Video,
 } from 'lucide-react';

 interface NavItem {
@@ -40,6 +41,7 @@ const adminNavItems: NavItem[] = [
  { label: 'Dashboard', href: '/admin', icon: LayoutDashboard },
  { label: 'Produk', href: '/admin/products', icon: Package },
  { label: 'Bootcamp', href: '/admin/bootcamp', icon: BookOpen },
+  { label: 'Konsultasi', href: '/admin/consulting', icon: Video },
  { label: 'Order', href: '/admin/orders', icon: Receipt },
  { label: 'Member', href: '/admin/members', icon: Users },
  { label: 'Kalender', href: '/admin/events', icon: Calendar },
@@ -152,15 +154,17 @@ export function AppLayout({ children }: AppLayoutProps) {
        </nav>

        <div className="p-4 border-t-2 border-border space-y-2">
-          <Link to="/checkout" className="flex items-center gap-3 px-3 py-2 hover:bg-muted text-sm font-medium">
-            <ShoppingCart className="w-5 h-5" />
-            Keranjang
-            {items.length > 0 && (
-              <span className="ml-auto bg-primary text-primary-foreground text-xs px-2 py-0.5">
-                {items.length}
-              </span>
-            )}
-          </Link>
+          {!isAdmin && (
+            <Link to="/checkout" className="flex items-center gap-3 px-3 py-2 hover:bg-muted text-sm font-medium">
+              <ShoppingCart className="w-5 h-5" />
+              Keranjang
+              {items.length > 0 && (
+                <span className="ml-auto bg-primary text-primary-foreground text-xs px-2 py-0.5">
+                  {items.length}
+                </span>
+              )}
+            </Link>
+          )}
          <button
            onClick={handleSignOut}
            className="flex items-center gap-3 px-3 py-2 hover:bg-muted text-sm font-medium w-full text-left"
--- a/src/components/RichTextEditor.tsx
+++ b/src/components/RichTextEditor.tsx
@@ -9,7 +9,7 @@ import {
  Image as ImageIcon, Heading1, Heading2, Undo, Redo 
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
-import { useCallback } from 'react';
+import { useCallback, useEffect } from 'react';
 import { supabase } from '@/integrations/supabase/client';
 import { toast } from '@/hooks/use-toast';

@@ -45,6 +45,13 @@ export function RichTextEditor({ content, onChange, placeholder = 'Tulis konten.
    },
  });

+  // Sync content when it changes externally (e.g., when editing different items)
+  useEffect(() => {
+    if (editor && content !== editor.getHTML()) {
+      editor.commands.setContent(content || '');
+    }
+  }, [content, editor]);
+
  const addLink = useCallback(() => {
    if (!editor) return;
    const url = window.prompt('Masukkan URL:');
--- a/src/components/admin/settings/NotifikasiTab.tsx
+++ b/src/components/admin/settings/NotifikasiTab.tsx
@@ -103,6 +103,7 @@ export function NotifikasiTab() {
  const [saving, setSaving] = useState(false);
  const [testEmail, setTestEmail] = useState('');
  const [expandedTemplates, setExpandedTemplates] = useState<Set<string>>(new Set());
+  const [sendingTest, setSendingTest] = useState(false);

  useEffect(() => {
    fetchData();
@@ -156,8 +157,36 @@ export function NotifikasiTab() {

  const sendTestEmail = async () => {
    if (!testEmail) return toast({ title: 'Error', description: 'Masukkan email tujuan', variant: 'destructive' });
-    console.log('Test email would be sent to:', testEmail, 'with SMTP config:', smtp);
-    toast({ title: 'Info', description: `Email uji coba akan dikirim ke ${testEmail} (fitur sedang dikembangkan)` });
+    if (!isSmtpConfigured) return toast({ title: 'Error', description: 'Lengkapi konfigurasi SMTP terlebih dahulu', variant: 'destructive' });
+    
+    setSendingTest(true);
+    try {
+      const { data, error } = await supabase.functions.invoke('send-test-email', {
+        body: {
+          to: testEmail,
+          smtp_host: smtp.smtp_host,
+          smtp_port: smtp.smtp_port,
+          smtp_username: smtp.smtp_username,
+          smtp_password: smtp.smtp_password,
+          smtp_from_name: smtp.smtp_from_name,
+          smtp_from_email: smtp.smtp_from_email,
+          smtp_use_tls: smtp.smtp_use_tls,
+        },
+      });
+
+      if (error) throw error;
+      
+      if (data?.success) {
+        toast({ title: 'Berhasil', description: data.message });
+      } else {
+        throw new Error(data?.message || 'Failed to send test email');
+      }
+    } catch (error: any) {
+      console.error('Test email error:', error);
+      toast({ title: 'Error', description: error.message || 'Gagal mengirim email uji coba', variant: 'destructive' });
+    } finally {
+      setSendingTest(false);
+    }
  };

  const updateTemplate = async (template: NotificationTemplate) => {
@@ -278,9 +307,9 @@ export function NotifikasiTab() {
                placeholder="Email uji coba"
                className="border-2 max-w-xs"
              />
-              <Button variant="outline" onClick={sendTestEmail} className="border-2">
+              <Button variant="outline" onClick={sendTestEmail} className="border-2" disabled={sendingTest}>
                <Send className="w-4 h-4 mr-2" />
-                Kirim Email Uji Coba
+                {sendingTest ? 'Mengirim...' : 'Kirim Email Uji Coba'}
              </Button>
            </div>
          </div>
--- a/src/pages/Admin.tsx
+++ b/src/pages/Admin.tsx
@@ -20,7 +20,7 @@ import { CurriculumEditor } from '@/components/admin/CurriculumEditor';

 interface Product { id: string; title: string; slug: string; type: string; description: string; content: string; meeting_link: string | null; recording_url: string | null; price: number; sale_price: number | null; is_active: boolean; }

-const emptyProduct = { title: '', slug: '', type: 'consulting', description: '', content: '', meeting_link: '', recording_url: '', price: 0, sale_price: null as number | null, is_active: true };
+const emptyProduct = { title: '', slug: '', type: 'webinar', description: '', content: '', meeting_link: '', recording_url: '', price: 0, sale_price: null as number | null, is_active: true };

 export default function Admin() {
  const { user, isAdmin, loading: authLoading } = useAuth();
@@ -102,7 +102,7 @@ export default function Admin() {
                    <div className="space-y-2"><Label>Title *</Label><Input value={form.title} onChange={(e) => setForm({ ...form, title: e.target.value, slug: generateSlug(e.target.value) })} className="border-2" /></div>
                    <div className="space-y-2"><Label>Slug *</Label><Input value={form.slug} onChange={(e) => setForm({ ...form, slug: e.target.value })} className="border-2" /></div>
                  </div>
-                  <div className="space-y-2"><Label>Type</Label><Select value={form.type} onValueChange={(v) => setForm({ ...form, type: v })}><SelectTrigger className="border-2"><SelectValue /></SelectTrigger><SelectContent><SelectItem value="consulting">Consulting</SelectItem><SelectItem value="webinar">Webinar</SelectItem><SelectItem value="bootcamp">Bootcamp</SelectItem></SelectContent></Select></div>
+                  <div className="space-y-2"><Label>Type</Label><Select value={form.type} onValueChange={(v) => setForm({ ...form, type: v })}><SelectTrigger className="border-2"><SelectValue /></SelectTrigger><SelectContent><SelectItem value="webinar">Webinar</SelectItem><SelectItem value="bootcamp">Bootcamp</SelectItem></SelectContent></Select></div>
                  <div className="space-y-2"><Label>Description</Label><Textarea value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} className="border-2" rows={2} /></div>
                  <div className="space-y-2"><Label>Content (HTML)</Label><Textarea value={form.content} onChange={(e) => setForm({ ...form, content: e.target.value })} className="border-2 font-mono text-sm" rows={6} /></div>
                  <div className="grid grid-cols-2 gap-4">
--- a/src/pages/ConsultingBooking.tsx
+++ b/src/pages/ConsultingBooking.tsx
@@ -13,7 +13,7 @@ import { Skeleton } from '@/components/ui/skeleton';
 import { toast } from '@/hooks/use-toast';
 import { formatIDR } from '@/lib/format';
 import { Video, Clock, Calendar as CalendarIcon, MessageSquare } from 'lucide-react';
-import { format, addMinutes, parse, isAfter, isBefore, startOfDay, addDays } from 'date-fns';
+import { format, addMinutes, parse, isAfter, isBefore, startOfDay, addDays, isSameDay } from 'date-fns';
 import { id } from 'date-fns/locale';

 interface ConsultingSettings {
@@ -106,6 +106,8 @@ export default function ConsultingBooking() {

    const slots: TimeSlot[] = [];
    const duration = settings.consulting_block_duration_minutes;
+    const now = new Date();
+    const isToday = isSameDay(selectedDate, now);

    for (const wh of dayWorkhours) {
      let current = parse(wh.start_time, 'HH:mm:ss', selectedDate);
@@ -122,10 +124,13 @@ export default function ConsultingBooking() {
          return !(slotEnd <= csStart || slotStart >= csEnd);
        });

+        // Check if slot is in the past for today
+        const isPassed = isToday && isBefore(current, now);
+
        slots.push({
          start: slotStart,
          end: slotEnd,
-          available: !isConflict,
+          available: !isConflict && !isPassed,
        });

        current = addMinutes(current, duration);
--- a/src/pages/admin/AdminProducts.tsx
+++ b/src/pages/admin/AdminProducts.tsx
@@ -32,13 +32,12 @@ interface Product {
  price: number;
  sale_price: number | null;
  is_active: boolean;
-  consulting_duration_minutes: number | null;
 }

 const emptyProduct = {
  title: '',
  slug: '',
-  type: 'consulting',
+  type: 'webinar',
  description: '',
  content: '',
  meeting_link: '',
@@ -46,7 +45,6 @@ const emptyProduct = {
  price: 0,
  sale_price: null as number | null,
  is_active: true,
-  consulting_duration_minutes: 60,
 };

 export default function AdminProducts() {
@@ -89,7 +87,6 @@ export default function AdminProducts() {
      price: product.price,
      sale_price: product.sale_price,
      is_active: product.is_active,
-      consulting_duration_minutes: product.consulting_duration_minutes || 60,
    });
    setActiveTab('details');
    setDialogOpen(true);
@@ -119,7 +116,6 @@ export default function AdminProducts() {
      price: form.price,
      sale_price: form.sale_price || null,
      is_active: form.is_active,
-      consulting_duration_minutes: form.type === 'consulting' ? form.consulting_duration_minutes : null,
    };

    if (editingProduct) {
@@ -246,23 +242,11 @@ export default function AdminProducts() {
                  <Select value={form.type} onValueChange={(v) => setForm({ ...form, type: v })}>
                    <SelectTrigger className="border-2"><SelectValue /></SelectTrigger>
                    <SelectContent>
-                      <SelectItem value="consulting">Consulting</SelectItem>
                      <SelectItem value="webinar">Webinar</SelectItem>
                      <SelectItem value="bootcamp">Bootcamp</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
-                {form.type === 'consulting' && (
-                  <div className="space-y-2">
-                    <Label>Durasi Konsultasi (menit)</Label>
-                    <Input
-                      type="number"
-                      value={form.consulting_duration_minutes || 60}
-                      onChange={(e) => setForm({ ...form, consulting_duration_minutes: parseInt(e.target.value) || 60 })}
-                      className="border-2"
-                    />
-                  </div>
-                )}
                <div className="space-y-2">
                  <Label>Deskripsi</Label>
                  <RichTextEditor content={form.description} onChange={(v) => setForm({ ...form, description: v })} />