Changes

src/pages/Products.tsx

@@ -1,13 +1,14 @@
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { supabase } from '@/integrations/supabase/client';
-import { Layout } from '@/components/Layout';
+import { AppLayout } from '@/components/AppLayout';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { useCart } from '@/contexts/CartContext';
 import { toast } from '@/hooks/use-toast';
 import { Skeleton } from '@/components/ui/skeleton';
+import { formatIDR } from '@/lib/format';
 
 interface Product {
   id: string;
@@ -37,7 +38,7 @@ export default function Products() {
       .order('created_at', { ascending: false });
 
     if (error) {
-      toast({ title: 'Error', description: 'Failed to load products', variant: 'destructive' });
+      toast({ title: 'Error', description: 'Gagal memuat produk', variant: 'destructive' });
     } else {
       setProducts(data || []);
     }
@@ -52,25 +53,25 @@ export default function Products() {
       sale_price: product.sale_price,
       type: product.type,
     });
-    toast({ title: 'Added to cart', description: `${product.title} has been added to your cart` });
+    toast({ title: 'Ditambahkan', description: `${product.title} sudah ditambahkan ke keranjang` });
   };
 
   const isInCart = (productId: string) => items.some(item => item.id === productId);
 
-  const getTypeColor = (type: string) => {
+  const getTypeLabel = (type: string) => {
     switch (type) {
-      case 'consulting': return 'bg-secondary';
-      case 'webinar': return 'bg-accent';
-      case 'bootcamp': return 'bg-muted';
-      default: return 'bg-secondary';
+      case 'consulting': return 'Konsultasi';
+      case 'webinar': return 'Webinar';
+      case 'bootcamp': return 'Bootcamp';
+      default: return type;
     }
   };
 
   return (
-    <Layout>
+    <AppLayout>
       <div className="container mx-auto px-4 py-8">
-        <h1 className="text-4xl font-bold mb-2">Products</h1>
-        <p className="text-muted-foreground mb-8">Browse our consulting, webinars, and bootcamps</p>
+        <h1 className="text-4xl font-bold mb-2">Produk</h1>
+        <p className="text-muted-foreground mb-8">Jelajahi konsultasi, webinar, dan bootcamp kami</p>
 
         {loading ? (
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -88,7 +89,7 @@ export default function Products() {
           </div>
         ) : products.length === 0 ? (
           <div className="text-center py-12">
-            <p className="text-muted-foreground">No products available yet.</p>
+            <p className="text-muted-foreground">Belum ada produk tersedia.</p>
           </div>
         ) : (
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -97,7 +98,7 @@ export default function Products() {
                 <CardHeader>
                   <div className="flex justify-between items-start">
                     <CardTitle className="text-xl">{product.title}</CardTitle>
-                    <Badge className={getTypeColor(product.type)}>{product.type}</Badge>
+                    <Badge className="bg-secondary">{getTypeLabel(product.type)}</Badge>
                   </div>
                   <CardDescription className="line-clamp-2">{product.description}</CardDescription>
                 </CardHeader>
@@ -105,23 +106,23 @@ export default function Products() {
                   <div className="flex items-center gap-2 mb-4">
                     {product.sale_price ? (
                       <>
-                        <span className="text-2xl font-bold">${product.sale_price}</span>
-                        <span className="text-muted-foreground line-through">${product.price}</span>
+                        <span className="text-2xl font-bold">{formatIDR(product.sale_price)}</span>
+                        <span className="text-muted-foreground line-through">{formatIDR(product.price)}</span>
                       </>
                     ) : (
-                      <span className="text-2xl font-bold">${product.price}</span>
+                      <span className="text-2xl font-bold">{formatIDR(product.price)}</span>
                     )}
                   </div>
                   <div className="flex gap-2">
                     <Link to={`/products/${product.slug}`} className="flex-1">
-                      <Button variant="outline" className="w-full border-2">View Details</Button>
+                      <Button variant="outline" className="w-full border-2">Lihat Detail</Button>
                     </Link>
-                    <Button 
-                      onClick={() => handleAddToCart(product)} 
+                    <Button
+                      onClick={() => handleAddToCart(product)}
                       disabled={isInCart(product.id)}
                       className="shadow-xs"
                     >
-                      {isInCart(product.id) ? 'In Cart' : 'Add'}
+                      {isInCart(product.id) ? 'Di Keranjang' : 'Tambah'}
                     </Button>
                   </div>
                 </CardContent>
@@ -130,6 +131,6 @@ export default function Products() {
           </div>
         )}
       </div>
-    </Layout>
+    </AppLayout>
   );
 }