dwindown/meet-hub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Code edited in Lovable Code Editor

Browse Source 
Edited UI in Lovable
This commit is contained in:
gpt-engineer-app[bot]
2025-12-19 10:55:49 +00:00
parent 86eabfddde
commit d860f0296d
1 changed files with 53 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
src/pages/member/MemberDashboard.tsx
View File

@@ -1,14 +1,14 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from "react";
import { useNavigate } from 'react-router-dom'; import { useNavigate } from "react-router-dom";
import { AppLayout } from '@/components/AppLayout'; import { AppLayout } from "@/components/AppLayout";
import { useAuth } from '@/hooks/useAuth'; import { useAuth } from "@/hooks/useAuth";
import { supabase } from '@/integrations/supabase/client'; import { supabase } from "@/integrations/supabase/client";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from '@/components/ui/badge'; import { Badge } from "@/components/ui/badge";
import { Button } from '@/components/ui/button'; import { Button } from "@/components/ui/button";
import { Skeleton } from '@/components/ui/skeleton'; import { Skeleton } from "@/components/ui/skeleton";
import { formatIDR } from '@/lib/format'; import { formatIDR } from "@/lib/format";
import { Video, Calendar, BookOpen, ArrowRight, Package, Receipt, ShoppingBag } from 'lucide-react'; import { Video, Calendar, BookOpen, ArrowRight, Package, Receipt, ShoppingBag } from "lucide-react";
interface UserAccess { interface UserAccess {
id: string; id: string;
@@ -37,32 +37,38 @@ export default function MemberDashboard() {
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
useEffect(() => { useEffect(() => {
if (!authLoading && !user) navigate('/auth'); if (!authLoading && !user) navigate("/auth");
else if (user) fetchData(); else if (user) fetchData();
}, [user, authLoading]); }, [user, authLoading]);
const fetchData = async () => { const fetchData = async () => {
const [accessRes, ordersRes, paidOrdersRes] = await Promise.all([ const [accessRes, ordersRes, paidOrdersRes] = await Promise.all([
supabase.from('user_access').select(`id, product:products (id, title, slug, type, meeting_link, recording_url)`).eq('user_id', user!.id), supabase
supabase.from('orders').select('*').eq('user_id', user!.id).order('created_at', { ascending: false }).limit(3), .from("user_access")
.select(`id, product:products (id, title, slug, type, meeting_link, recording_url)`)
.eq("user_id", user!.id),
supabase.from("orders").select("*").eq("user_id", user!.id).order("created_at", { ascending: false }).limit(3),
// Also get products from paid orders (via order_items) // Also get products from paid orders (via order_items)
supabase.from('orders') supabase
.select(` .from("orders")
.select(
`
order_items ( order_items (
product:products (id, title, slug, type, meeting_link, recording_url) product:products (id, title, slug, type, meeting_link, recording_url)
) )
`) `,
.eq('user_id', user!.id) )
.eq('payment_status', 'paid') .eq("user_id", user!.id)
.eq('payment_provider', 'pakasir') .eq("payment_status", "paid")
.eq("payment_provider", "pakasir"),
]); ]);
// Combine access from user_access and paid orders // Combine access from user_access and paid orders
const directAccess = accessRes.data as unknown as UserAccess[] || []; const directAccess = (accessRes.data as unknown as UserAccess[]) || [];
const paidProductAccess: UserAccess[] = []; const paidProductAccess: UserAccess[] = [];
if (paidOrdersRes.data) { if (paidOrdersRes.data) {
const existingIds = new Set(directAccess.map(a => a.product.id)); const existingIds = new Set(directAccess.map((a) => a.product.id));
paidOrdersRes.data.forEach((order: any) => { paidOrdersRes.data.forEach((order: any) => {
order.order_items?.forEach((item: any) => { order.order_items?.forEach((item: any) => {
if (item.product && !existingIds.has(item.product.id)) { if (item.product && !existingIds.has(item.product.id)) {
@@ -80,12 +86,12 @@ export default function MemberDashboard() {
const getQuickAction = (item: UserAccess) => { const getQuickAction = (item: UserAccess) => {
switch (item.product.type) { switch (item.product.type) {
case 'consulting': case "consulting":
return { label: 'Jadwalkan', icon: Calendar, href: item.product.meeting_link }; return { label: "Jadwalkan", icon: Calendar, href: item.product.meeting_link };
case 'webinar': case "webinar":
return { label: 'Tonton', icon: Video, href: item.product.recording_url || item.product.meeting_link }; return { label: "Tonton", icon: Video, href: item.product.recording_url || item.product.meeting_link };
case 'bootcamp': case "bootcamp":
return { label: 'Lanjutkan', icon: BookOpen, route: `/bootcamp/${item.product.slug}` }; return { label: "Lanjutkan", icon: BookOpen, route: `/bootcamp/${item.product.slug}` };
default: default:
return null; return null;
} }
@@ -97,7 +103,9 @@ export default function MemberDashboard() {
<div className="container mx-auto px-4 py-8"> <div className="container mx-auto px-4 py-8">
<Skeleton className="h-10 w-1/3 mb-8" /> <Skeleton className="h-10 w-1/3 mb-8" />
<div className="grid gap-4 md:grid-cols-2"> <div className="grid gap-4 md:grid-cols-2">
{[...Array(4)].map((_, i) => <Skeleton key={i} className="h-32" />)} {[...Array(4)].map((_, i) => (
<Skeleton key={i} className="h-32" />
))}
</div> </div>
</div> </div>
</AppLayout> </AppLayout>
@@ -125,7 +133,7 @@ export default function MemberDashboard() {
<Card className="border-2 border-border"> <Card className="border-2 border-border">
<CardContent className="pt-6"> <CardContent className="pt-6">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<Receipt className="w-10 h-10 text-accent" /> <Receipt className="w-10 h-10 text-primary" />
<div> <div>
<p className="text-3xl font-bold">{recentOrders.length}</p> <p className="text-3xl font-bold">{recentOrders.length}</p>
<p className="text-muted-foreground">Order Terbaru</p> <p className="text-muted-foreground">Order Terbaru</p>
@@ -136,13 +144,13 @@ export default function MemberDashboard() {
<Card className="border-2 border-border col-span-full lg:col-span-1"> <Card className="border-2 border-border col-span-full lg:col-span-1">
<CardContent className="pt-6 flex items-center justify-between"> <CardContent className="pt-6 flex items-center justify-between">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<ShoppingBag className="w-10 h-10 text-secondary-foreground" /> <ShoppingBag className="w-10 h-10 text-primary" />
<div> <div>
<p className="text-sm text-muted-foreground">Jelajahi lebih banyak</p> <p className="text-sm text-muted-foreground">Jelajahi lebih banyak</p>
<p className="font-medium">Lihat semua produk</p> <p className="font-medium">Lihat semua produk</p>
</div> </div>
</div> </div>
<Button variant="outline" onClick={() => navigate('/products')} className="border-2"> <Button variant="outline" onClick={() => navigate("/products")} className="border-2">
<ArrowRight className="w-4 h-4" /> <ArrowRight className="w-4 h-4" />
</Button> </Button>
</CardContent> </CardContent>
@@ -153,7 +161,7 @@ export default function MemberDashboard() {
<div className="mb-8"> <div className="mb-8">
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-4">
<h2 className="text-2xl font-bold">Akses Cepat</h2> <h2 className="text-2xl font-bold">Akses Cepat</h2>
<Button variant="ghost" onClick={() => navigate('/access')}> <Button variant="ghost" onClick={() => navigate("/access")}>
Lihat Semua Lihat Semua
<ArrowRight className="w-4 h-4 ml-2" /> <ArrowRight className="w-4 h-4 ml-2" />
</Button> </Button>
@@ -168,8 +176,8 @@ export default function MemberDashboard() {
<CardDescription className="capitalize">{item.product.type}</CardDescription> <CardDescription className="capitalize">{item.product.type}</CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
{action && ( {action &&
action.route ? ( (action.route ? (
<Button onClick={() => navigate(action.route!)} className="w-full shadow-sm"> <Button onClick={() => navigate(action.route!)} className="w-full shadow-sm">
<action.icon className="w-4 h-4 mr-2" /> <action.icon className="w-4 h-4 mr-2" />
{action.label} {action.label}
@@ -181,8 +189,7 @@ export default function MemberDashboard() {
{action.label} {action.label}
</a> </a>
</Button> </Button>
) : null ) : null)}
)}
</CardContent> </CardContent>
</Card> </Card>
); );
@@ -195,7 +202,7 @@ export default function MemberDashboard() {
<div> <div>
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-4">
<h2 className="text-2xl font-bold">Order Terbaru</h2> <h2 className="text-2xl font-bold">Order Terbaru</h2>
<Button variant="ghost" onClick={() => navigate('/orders')}> <Button variant="ghost" onClick={() => navigate("/orders")}>
Lihat Semua Lihat Semua
<ArrowRight className="w-4 h-4 ml-2" /> <ArrowRight className="w-4 h-4 ml-2" />
</Button> </Button>
@@ -206,11 +213,13 @@ export default function MemberDashboard() {
<div key={order.id} className="flex items-center justify-between p-4"> <div key={order.id} className="flex items-center justify-between p-4">
<div> <div>
<p className="font-mono text-sm">{order.id.slice(0, 8)}</p> <p className="font-mono text-sm">{order.id.slice(0, 8)}</p>
<p className="text-xs text-muted-foreground">{new Date(order.created_at).toLocaleDateString('id-ID')}</p> <p className="text-xs text-muted-foreground">
{new Date(order.created_at).toLocaleDateString("id-ID")}
</p>
</div> </div>
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<Badge className={order.payment_status === 'paid' ? 'bg-accent' : 'bg-muted'}> <Badge className={order.payment_status === "paid" ? "bg-accent" : "bg-muted"}>
{order.payment_status === 'paid' ? 'Lunas' : 'Pending'} {order.payment_status === "paid" ? "Lunas" : "Pending"}
</Badge> </Badge>
<span className="font-bold">{formatIDR(order.total_amount)}</span> <span className="font-bold">{formatIDR(order.total_amount)}</span>
</div> </div>