dwindown/tabungin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: apply theme colors to all admin pages

Browse Source 
AdminDashboard:
- Replace all gray colors with theme variables
- Indonesian text: 'Selamat datang', 'Kelola Plans', etc.
- Loading: 'Memuat...'

AdminPlans:
- bg-card, text-foreground, border-border
- text-muted-foreground for secondary text
- bg-muted for sections
- text-primary for links/icons
- text-destructive for delete
- Indonesian: 'Kelola Plans', 'Tambah Plan', 'Tidak ada plan'

AdminUsers:
- Same theme color replacements
- Indonesian: 'Kelola Users', 'Tidak ada user'
- bg-primary for avatars
- Consistent hover states

All pages now:
✅ Respect light/dark mode
✅ Use @theme colors from index.css
✅ Indonesian text (keeping English tech terms)
✅ Consistent with member layout styling
This commit is contained in:
dwindown
2025-10-11 20:18:10 +07:00
parent 4bd95e50e8
commit 50ce884a43
13 changed files with 328 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/api/dist/auth/auth.controller.d.ts vendored
View File

@@ -20,6 +20,7 @@ export declare class AuthController {
name: string | null;
avatarUrl: string | null;
emailVerified: boolean;
role: string;
};
token: string;
}>;
@@ -43,6 +44,7 @@ export declare class AuthController {
name: string | null;
avatarUrl: string | null;
emailVerified: boolean;
role: string;
};
token: string;
requiresOtp?: undefined;
@@ -60,6 +62,7 @@ export declare class AuthController {
name: string | null;
avatarUrl: string | null;
emailVerified: boolean;
role: string;
};
token: string;
}>;
@@ -71,6 +74,7 @@ export declare class AuthController {
emailVerified: boolean;
name: string | null;
avatarUrl: string | null;
role: string;
}>;
changePassword(req: RequestWithUser, body: {
currentPassword: string;

5
apps/api/dist/auth/auth.service.d.ts vendored
View File

@@ -13,6 +13,7 @@ export declare class AuthService {
name: string | null;
avatarUrl: string | null;
emailVerified: boolean;
role: string;
};
token: string;
}>;
@@ -33,6 +34,7 @@ export declare class AuthService {
name: string | null;
avatarUrl: string | null;
emailVerified: boolean;
role: string;
};
token: string;
requiresOtp?: undefined;
@@ -61,6 +63,7 @@ export declare class AuthService {
name: string | null;
avatarUrl: string | null;
emailVerified: boolean;
role: string;
};
token: string;
requiresOtp?: undefined;
@@ -74,6 +77,7 @@ export declare class AuthService {
name: string | null;
avatarUrl: string | null;
emailVerified: boolean;
role: string;
};
token: string;
}>;
@@ -85,6 +89,7 @@ export declare class AuthService {
emailVerified: boolean;
name: string | null;
avatarUrl: string | null;
role: string;
}>;
changePassword(userId: string, currentPassword: string, newPassword: string, isSettingPassword?: boolean): Promise<{
message: string;

6
apps/api/dist/auth/auth.service.js vendored
View File

@@ -88,6 +88,7 @@ let AuthService = class AuthService {
name: user.name,
avatarUrl: user.avatarUrl,
emailVerified: user.emailVerified,
role: user.role,
},
token,
};
@@ -102,6 +103,7 @@ let AuthService = class AuthService {
name: true,
avatarUrl: true,
emailVerified: true,
role: true,
otpEmailEnabled: true,
otpWhatsappEnabled: true,
otpTotpEnabled: true,
@@ -150,6 +152,7 @@ let AuthService = class AuthService {
name: user.name,
avatarUrl: user.avatarUrl,
emailVerified: user.emailVerified,
role: user.role,
},
token,
};
@@ -254,6 +257,7 @@ let AuthService = class AuthService {
name: user.name,
avatarUrl: user.avatarUrl,
emailVerified: user.emailVerified,
role: user.role,
},
token,
};
@@ -313,6 +317,7 @@ let AuthService = class AuthService {
name: user.name,
avatarUrl: user.avatarUrl,
emailVerified: user.emailVerified,
role: user.role,
},
token,
};
@@ -340,6 +345,7 @@ let AuthService = class AuthService {
name: true,
avatarUrl: true,
emailVerified: true,
role: true,
},
});
if (!user) {

2
apps/api/dist/auth/auth.service.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
apps/api/dist/tsconfig.build.tsbuildinfo vendored
View File

File diff suppressed because one or more lines are too long

33
apps/web/src/components/admin/AdminBreadcrumb.tsx Normal file
View File

@@ -0,0 +1,33 @@
import { ChevronRight, Shield } from 'lucide-react'
interface AdminBreadcrumbProps {
currentPage: string
}
const pageNames: Record<string, string> = {
'/admin': 'Dashboard',
'/admin/plans': 'Plans',
'/admin/payment-methods': 'Payment Methods',
'/admin/payments': 'Payments',
'/admin/users': 'Users',
'/admin/settings': 'Settings',
}
export function AdminBreadcrumb({ currentPage }: AdminBreadcrumbProps) {
const pageName = pageNames[currentPage] || 'Admin'
return (
<nav className="flex items-center space-x-1 text-sm text-muted-foreground">
<div className="flex items-center space-x-1">
<Shield className="h-4 w-4" />
<span>Admin</span>
</div>
{currentPage !== '/admin' && (
<>
<ChevronRight className="h-4 w-4" />
<span className="font-medium text-foreground">{pageName}</span>
</>
)}
</nav>
)
}

176
apps/web/src/components/admin/AdminLayout.tsx
View File

@@ -1,47 +1,31 @@
import { Link, useLocation, Outlet } from 'react-router-dom'
import { Link, useLocation, Outlet, useNavigate } from 'react-router-dom'
import { useAuth } from '../../contexts/AuthContext'
import {
LayoutDashboard,
CreditCard,
Wallet,
Users,
Settings,
LogOut,
Menu,
X,
} from 'lucide-react'
import { useState } from 'react'
const navigation = [
{ name: 'Dashboard', href: '/admin', icon: LayoutDashboard },
{ name: 'Plans', href: '/admin/plans', icon: CreditCard },
{ name: 'Payment Methods', href: '/admin/payment-methods', icon: Wallet },
{ name: 'Payments', href: '/admin/payments', icon: CreditCard },
{ name: 'Users', href: '/admin/users', icon: Users },
{ name: 'Settings', href: '/admin/settings', icon: Settings },
]
import { SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'
import { AdminSidebar } from './AdminSidebar'
import { AdminBreadcrumb } from './AdminBreadcrumb'
import { ThemeToggle } from '../ThemeToggle'
export function AdminLayout() {
const { user, logout } = useAuth()
const { user } = useAuth()
const location = useLocation()
const [sidebarOpen, setSidebarOpen] = useState(false)
const navigate = useNavigate()
// Check if user is admin
if (user?.role !== 'admin') {
return (
<div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
<div className="min-h-screen flex items-center justify-center bg-background">
<div className="text-center">
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
Access Denied
<h1 className="text-2xl font-bold text-foreground mb-2">
Akses Ditolak
</h1>
<p className="text-gray-600 dark:text-gray-400">
You don't have permission to access the admin panel.
<p className="text-muted-foreground">
Anda tidak memiliki izin untuk mengakses panel admin.
</p>
<Link
to="/"
className="mt-4 inline-block text-blue-600 hover:text-blue-700"
className="mt-4 inline-block text-primary hover:text-primary/90"
>
Go to Dashboard
Kembali ke Dashboard
</Link>
</div>
</div>
@@ -49,117 +33,31 @@ export function AdminLayout() {
}
return (
<div className="min-h-screen bg-gray-50 dark:bg-gray-900">
{/* Mobile sidebar backdrop */}
{sidebarOpen && (
<div
className="fixed inset-0 bg-gray-600 bg-opacity-75 z-20 lg:hidden"
onClick={() => setSidebarOpen(false)}
/>
)}
{/* Sidebar */}
<div
className={`fixed inset-y-0 left-0 z-30 w-64 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 transform transition-transform duration-300 ease-in-out lg:translate-x-0 ${
sidebarOpen ? 'translate-x-0' : '-translate-x-full'
}`}
>
<div className="flex flex-col h-full">
{/* Logo */}
<div className="flex items-center justify-between h-16 px-6 border-b border-gray-200 dark:border-gray-700">
<h1 className="text-xl font-bold text-gray-900 dark:text-white">
Admin Panel
</h1>
<button
onClick={() => setSidebarOpen(false)}
className="lg:hidden text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
>
<X className="h-6 w-6" />
</button>
</div>
{/* Navigation */}
<nav className="flex-1 px-4 py-6 space-y-1 overflow-y-auto">
{navigation.map((item) => {
const isActive = location.pathname === item.href
return (
<Link
key={item.name}
to={item.href}
className={`flex items-center px-4 py-3 text-sm font-medium rounded-lg transition-colors ${
isActive
? 'bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:text-blue-400'
: 'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700'
}`}
onClick={() => setSidebarOpen(false)}
>
<item.icon className="h-5 w-5 mr-3" />
{item.name}
</Link>
)
})}
</nav>
{/* User info & logout */}
<div className="p-4 border-t border-gray-200 dark:border-gray-700">
<div className="flex items-center mb-3">
<div className="flex-shrink-0">
<div className="h-10 w-10 rounded-full bg-blue-600 flex items-center justify-center text-white font-semibold">
{user?.name?.[0] || user?.email[0].toUpperCase()}
</div>
</div>
<div className="ml-3 flex-1 min-w-0">
<p className="text-sm font-medium text-gray-900 dark:text-white truncate">
{user?.name || 'Admin'}
</p>
<p className="text-xs text-gray-500 dark:text-gray-400 truncate">
{user?.email}
</p>
</div>
</div>
<button
onClick={logout}
className="w-full flex items-center justify-center px-4 py-2 text-sm font-medium text-red-700 bg-red-50 rounded-lg hover:bg-red-100 dark:bg-red-900/20 dark:text-red-400 dark:hover:bg-red-900/30 transition-colors"
>
<LogOut className="h-4 w-4 mr-2" />
Logout
</button>
</div>
</div>
</div>
{/* Main content */}
<div className="lg:pl-64">
{/* Top bar */}
<div className="sticky top-0 z-10 flex items-center h-16 px-4 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 lg:px-8">
<button
onClick={() => setSidebarOpen(true)}
className="lg:hidden text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
>
<Menu className="h-6 w-6" />
</button>
<div className="flex-1 flex items-center justify-between lg:justify-end">
<h2 className="text-lg font-semibold text-gray-900 dark:text-white lg:hidden">
Admin
</h2>
<div className="flex items-center space-x-4">
<span className="text-sm text-gray-600 dark:text-gray-400">
{new Date().toLocaleDateString('id-ID', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric',
})}
</span>
<SidebarProvider>
<AdminSidebar currentPage={location.pathname} onNavigate={navigate} />
<main className="flex-1 overflow-hidden">
<div className="flex h-screen flex-col">
<header className="flex h-16 shrink-0 items-center gap-4 border-b px-4 bg-background">
<SidebarTrigger className="-ml-1 md:h-8 md:w-8 h-10 w-10" />
<AdminBreadcrumb currentPage={location.pathname} />
<div className="flex-1" />
<span className="text-sm text-muted-foreground hidden sm:block">
{new Date().toLocaleDateString('id-ID', {
weekday: 'long',
day: 'numeric',
month: 'long',
year: 'numeric',
})}
</span>
<ThemeToggle />
</header>
<div className="flex-1 overflow-auto">
<div className="container mx-auto max-w-7xl p-4">
<Outlet />
</div>
</div>
</div>
{/* Page content */}
<main className="p-4 lg:p-8">
<Outlet />
</main>
</div>
</div>
</main>
</SidebarProvider>
)
}

129
apps/web/src/components/admin/AdminSidebar.tsx Normal file
View File

@@ -0,0 +1,129 @@
import { LayoutDashboard, CreditCard, Wallet, Users, Settings, LogOut } from 'lucide-react'
import { Logo } from '../Logo'
import {
Sidebar,
SidebarContent,
SidebarFooter,
SidebarGroup,
SidebarGroupContent,
SidebarHeader,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
} from '@/components/ui/sidebar'
import { useAuth } from '@/contexts/AuthContext'
import { getAvatarUrl } from '@/lib/utils'
const items = [
{
title: 'Dashboard',
url: '/admin',
icon: LayoutDashboard,
},
{
title: 'Plans',
url: '/admin/plans',
icon: CreditCard,
},
{
title: 'Payment Methods',
url: '/admin/payment-methods',
icon: Wallet,
},
{
title: 'Payments',
url: '/admin/payments',
icon: CreditCard,
},
{
title: 'Users',
url: '/admin/users',
icon: Users,
},
{
title: 'Settings',
url: '/admin/settings',
icon: Settings,
},
]
interface AdminSidebarProps {
currentPage: string
onNavigate: (page: string) => void
}
export function AdminSidebar({ currentPage, onNavigate }: AdminSidebarProps) {
const { user, logout } = useAuth()
return (
<Sidebar>
<SidebarHeader className="p-4">
<div className="mx-auto">
<Logo variant="large" />
</div>
</SidebarHeader>
<SidebarContent>
<SidebarGroup>
<SidebarGroupContent>
<SidebarMenu>
{items.map((item) => {
const isActive = currentPage === item.url
return (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton
asChild
isActive={isActive}
onClick={() => onNavigate(item.url)}
className={`${
isActive
? 'bg-primary/10 text-primary hover:bg-primary/10 hover:text-primary'
: ''
}`}
>
<button className="w-full">
<item.icon />
<span>{item.title}</span>
</button>
</SidebarMenuButton>
</SidebarMenuItem>
)
})}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
<SidebarFooter className="p-4">
<div className="flex items-center justify-between gap-3">
<div className="flex items-center gap-3 flex-1 min-w-0">
{getAvatarUrl(user?.avatarUrl) ? (
<img
src={getAvatarUrl(user?.avatarUrl)!}
alt={user?.name || user?.email || 'Admin'}
className="h-10 w-10 rounded-full"
/>
) : (
<div className="h-10 w-10 rounded-full bg-primary flex items-center justify-center text-primary-foreground font-semibold">
{user?.name?.[0] || user?.email[0].toUpperCase()}
</div>
)}
<div className="flex flex-col min-w-0">
{user?.name && (
<span className="text-sm font-medium truncate">{user.name}</span>
)}
<span className="text-xs text-muted-foreground truncate">
{user?.email}
</span>
</div>
</div>
</div>
<button
onClick={logout}
className="w-full mt-3 flex items-center justify-center px-4 py-2 text-sm font-medium text-destructive-foreground bg-destructive rounded-lg hover:bg-destructive/90 transition-colors"
>
<LogOut className="h-4 w-4 mr-2" />
Logout
</button>
</SidebarFooter>
</Sidebar>
)
}

42
apps/web/src/components/admin/pages/AdminDashboard.tsx
View File

@@ -42,7 +42,7 @@ export function AdminDashboard() {
if (loading) {
return (
<div className="flex items-center justify-center h-64">
<div className="text-gray-600 dark:text-gray-400">Loading...</div>
<div className="text-muted-foreground">Memuat...</div>
</div>
)
}
@@ -81,11 +81,11 @@ export function AdminDashboard() {
return (
<div>
<div className="mb-8">
<h1 className="text-3xl font-bold text-gray-900 dark:text-white">
<h1 className="text-3xl font-bold text-foreground">
Dashboard
</h1>
<p className="mt-2 text-gray-600 dark:text-gray-400">
Welcome to the admin panel
<p className="mt-2 text-muted-foreground">
Selamat datang di panel admin
</p>
</div>
@@ -94,17 +94,17 @@ export function AdminDashboard() {
{statCards.map((stat) => (
<div
key={stat.name}
className="bg-white dark:bg-gray-800 rounded-lg shadow p-6 border border-gray-200 dark:border-gray-700"
className="bg-card rounded-lg shadow p-6 border border-border"
>
<div className="flex items-center">
<div className={`p-3 rounded-lg ${stat.bgColor}`}>
<stat.icon className={`h-6 w-6 text-white ${stat.color}`} />
</div>
<div className="ml-4">
<p className="text-sm font-medium text-gray-600 dark:text-gray-400">
<p className="text-sm font-medium text-muted-foreground">
{stat.name}
</p>
<p className="text-2xl font-bold text-gray-900 dark:text-white">
<p className="text-2xl font-bold text-foreground">
{stat.value}
</p>
</div>
@@ -114,36 +114,36 @@ export function AdminDashboard() {
</div>
{/* Quick Actions */}
<div className="bg-white dark:bg-gray-800 rounded-lg shadow border border-gray-200 dark:border-gray-700 p-6">
<h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
<div className="bg-card rounded-lg shadow border border-border p-6">
<h2 className="text-lg font-semibold text-foreground mb-4">
Quick Actions
</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<a
href="/admin/plans"
className="flex items-center p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
className="flex items-center p-4 border border-border rounded-lg hover:bg-accent transition-colors"
>
<CreditCard className="h-5 w-5 text-blue-600 dark:text-blue-400 mr-3" />
<span className="text-sm font-medium text-gray-900 dark:text-white">
Manage Plans
<CreditCard className="h-5 w-5 text-primary mr-3" />
<span className="text-sm font-medium text-foreground">
Kelola Plans
</span>
</a>
<a
href="/admin/payments"
className="flex items-center p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
className="flex items-center p-4 border border-border rounded-lg hover:bg-accent transition-colors"
>
<DollarSign className="h-5 w-5 text-green-600 dark:text-green-400 mr-3" />
<span className="text-sm font-medium text-gray-900 dark:text-white">
Verify Payments
<DollarSign className="h-5 w-5 text-primary mr-3" />
<span className="text-sm font-medium text-foreground">
Verifikasi Pembayaran
</span>
</a>
<a
href="/admin/users"
className="flex items-center p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
className="flex items-center p-4 border border-border rounded-lg hover:bg-accent transition-colors"
>
<Users className="h-5 w-5 text-purple-600 dark:text-purple-400 mr-3" />
<span className="text-sm font-medium text-gray-900 dark:text-white">
Manage Users
<Users className="h-5 w-5 text-primary mr-3" />
<span className="text-sm font-medium text-foreground">
Kelola Users
</span>
</a>
</div>

52
apps/web/src/components/admin/pages/AdminPlans.tsx
View File

@@ -92,7 +92,7 @@ export function AdminPlans() {
if (loading) {
return (
<div className="flex items-center justify-center h-64">
<div className="text-gray-600 dark:text-gray-400">Loading...</div>
<div className="text-muted-foreground">Memuat...</div>
</div>
)
}
@@ -101,11 +101,11 @@ export function AdminPlans() {
<div>
<div className="flex items-center justify-between mb-8">
<div>
<h1 className="text-3xl font-bold text-gray-900 dark:text-white">
Plans Management
<h1 className="text-3xl font-bold text-foreground">
Kelola Plans
</h1>
<p className="mt-2 text-gray-600 dark:text-gray-400">
Manage subscription plans
<p className="mt-2 text-muted-foreground">
Kelola paket berlangganan
</p>
</div>
<button
@@ -113,10 +113,10 @@ export function AdminPlans() {
setEditingPlan(null)
setShowModal(true)
}}
className="flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
className="flex items-center px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors"
>
<Plus className="h-5 w-5 mr-2" />
Add Plan
Tambah Plan
</button>
</div>
@@ -125,14 +125,14 @@ export function AdminPlans() {
{plans.map((plan) => (
<div
key={plan.id}
className="bg-white dark:bg-gray-800 rounded-lg shadow border border-gray-200 dark:border-gray-700 overflow-hidden"
className="bg-card rounded-lg shadow border border-border overflow-hidden"
>
{/* Header */}
<div className="p-6 border-b border-gray-200 dark:border-gray-700">
<div className="p-6 border-b border-border">
<div className="flex items-start justify-between mb-2">
<div className="flex items-center">
<GripVertical className="h-5 w-5 text-gray-400 mr-2 cursor-move" />
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
<GripVertical className="h-5 w-5 text-muted-foreground mr-2 cursor-move" />
<h3 className="text-lg font-semibold text-foreground">
{plan.name}
</h3>
</div>
@@ -150,17 +150,17 @@ export function AdminPlans() {
</span>
)}
</div>
<p className="text-sm text-gray-600 dark:text-gray-400">
<p className="text-sm text-muted-foreground">
{plan.description}
</p>
</div>
{/* Price */}
<div className="p-6 bg-gray-50 dark:bg-gray-900/50">
<div className="text-3xl font-bold text-gray-900 dark:text-white">
<div className="p-6 bg-muted">
<div className="text-3xl font-bold text-foreground">
{formatPrice(plan.price, plan.currency)}
</div>
<div className="text-sm text-gray-600 dark:text-gray-400 mt-1">
<div className="text-sm text-muted-foreground mt-1">
{plan.durationType === 'lifetime'
? 'Lifetime access'
: plan.durationType === 'monthly'
@@ -170,24 +170,24 @@ export function AdminPlans() {
: plan.durationType}
</div>
{plan.trialDays > 0 && (
<div className="text-sm text-blue-600 dark:text-blue-400 mt-1">
<div className="text-sm text-primary mt-1">
{plan.trialDays} days free trial
</div>
)}
</div>
{/* Stats */}
<div className="p-6 border-t border-gray-200 dark:border-gray-700">
<div className="p-6 border-t border-border">
<div className="flex items-center justify-between text-sm">
<span className="text-gray-600 dark:text-gray-400">
<span className="text-muted-foreground">
Subscriptions:
</span>
<span className="font-medium text-gray-900 dark:text-white">
<span className="font-medium text-foreground">
{plan._count.subscriptions}
</span>
</div>
<div className="flex items-center justify-between text-sm mt-2">
<span className="text-gray-600 dark:text-gray-400">Status:</span>
<span className="text-muted-foreground">Status:</span>
<div className="flex items-center space-x-2">
{plan.isActive && (
<span className="px-2 py-1 text-xs bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400 rounded">
@@ -197,17 +197,17 @@ export function AdminPlans() {
{plan.isVisible ? (
<Eye className="h-4 w-4 text-green-600 dark:text-green-400" />
) : (
<EyeOff className="h-4 w-4 text-gray-400" />
<EyeOff className="h-4 w-4 text-muted-foreground" />
)}
</div>
</div>
</div>
{/* Actions */}
<div className="p-4 bg-gray-50 dark:bg-gray-900/50 border-t border-gray-200 dark:border-gray-700 flex items-center justify-end space-x-2">
<div className="p-4 bg-muted border-t border-border flex items-center justify-end space-x-2">
<button
onClick={() => toggleVisibility(plan)}
className="p-2 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white transition-colors"
className="p-2 text-muted-foreground hover:text-foreground transition-colors"
title={plan.isVisible ? 'Hide' : 'Show'}
>
{plan.isVisible ? (
@@ -221,14 +221,14 @@ export function AdminPlans() {
setEditingPlan(plan)
setShowModal(true)
}}
className="p-2 text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 transition-colors"
className="p-2 text-primary hover:text-primary/80 transition-colors"
title="Edit"
>
<Edit className="h-4 w-4" />
</button>
<button
onClick={() => handleDelete(plan.id)}
className="p-2 text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 transition-colors"
className="p-2 text-destructive hover:text-destructive/80 transition-colors"
title="Delete"
>
<Trash2 className="h-4 w-4" />
@@ -240,7 +240,7 @@ export function AdminPlans() {
{plans.length === 0 && (
<div className="text-center py-12">
<p className="text-gray-600 dark:text-gray-400">No plans found</p>
<p className="text-muted-foreground">Tidak ada plan</p>
</div>
)}
</div>

48
apps/web/src/components/admin/pages/AdminUsers.tsx
View File

@@ -90,7 +90,7 @@ export function AdminUsers() {
if (loading) {
return (
<div className="flex items-center justify-center h-64">
<div className="text-gray-600 dark:text-gray-400">Loading...</div>
<div className="text-muted-foreground">Memuat...</div>
</div>
)
}
@@ -98,64 +98,64 @@ export function AdminUsers() {
return (
<div>
<div className="mb-8">
<h1 className="text-3xl font-bold text-gray-900 dark:text-white">
Users Management
<h1 className="text-3xl font-bold text-foreground">
Kelola Users
</h1>
<p className="mt-2 text-gray-600 dark:text-gray-400">
Manage user accounts and permissions
<p className="mt-2 text-muted-foreground">
Kelola akun dan izin pengguna
</p>
</div>
{/* Search */}
<div className="mb-6">
<div className="relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" />
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-muted-foreground" />
<input
type="text"
placeholder="Search by email or name..."
value={search}
onChange={(e) => setSearch(e.target.value)}
className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
className="w-full pl-10 pr-4 py-2 border border-input rounded-lg bg-background text-foreground focus:ring-2 focus:ring-ring focus:border-transparent"
/>
</div>
</div>
{/* Users Table */}
<div className="bg-white dark:bg-gray-800 rounded-lg shadow border border-gray-200 dark:border-gray-700 overflow-hidden">
<div className="bg-card rounded-lg shadow border border-border overflow-hidden">
<div className="overflow-x-auto">
<table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead className="bg-gray-50 dark:bg-gray-900/50">
<table className="min-w-full divide-y divide-border">
<thead className="bg-muted">
<tr>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
<th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
User
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
<th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
Role
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
<th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
Stats
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
<th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
Status
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
<th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
Actions
</th>
</tr>
</thead>
<tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
<tbody className="bg-card divide-y divide-border">
{users.map((user) => (
<tr key={user.id}>
<td className="px-6 py-4 whitespace-nowrap">
<div className="flex items-center">
<div className="flex-shrink-0 h-10 w-10 rounded-full bg-blue-600 flex items-center justify-center text-white font-semibold">
<div className="flex-shrink-0 h-10 w-10 rounded-full bg-primary flex items-center justify-center text-primary-foreground font-semibold">
{user.name?.[0] || user.email[0].toUpperCase()}
</div>
<div className="ml-4">
<div className="text-sm font-medium text-gray-900 dark:text-white">
<div className="text-sm font-medium text-foreground">
{user.name || 'No name'}
</div>
<div className="text-sm text-gray-500 dark:text-gray-400">
<div className="text-sm text-muted-foreground">
{user.email}
</div>
</div>
@@ -172,7 +172,7 @@ export function AdminUsers() {
{user.role}
</span>
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
<td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground">
<div>{user._count.wallets} wallets</div>
<div>{user._count.transactions} transactions</div>
</td>
@@ -195,7 +195,7 @@ export function AdminUsers() {
{user.suspendedAt ? (
<button
onClick={() => handleSuspend(user.id, false)}
className="text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300"
className="text-primary hover:text-primary/80"
title="Unsuspend"
>
<UserCheck className="h-4 w-4 inline" />
@@ -203,7 +203,7 @@ export function AdminUsers() {
) : (
<button
onClick={() => handleSuspend(user.id, true)}
className="text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
className="text-destructive hover:text-destructive/80"
title="Suspend"
>
<UserX className="h-4 w-4 inline" />
@@ -211,7 +211,7 @@ export function AdminUsers() {
)}
<button
onClick={() => handleGrantPro(user.id)}
className="text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-300"
className="text-primary hover:text-primary/80"
title="Grant Pro Access"
>
<Crown className="h-4 w-4 inline" />
@@ -226,7 +226,7 @@ export function AdminUsers() {
{users.length === 0 && (
<div className="text-center py-12">
<p className="text-gray-600 dark:text-gray-400">No users found</p>
<p className="text-muted-foreground">Tidak ada user</p>
</div>
)}
</div>

60
apps/web/src/components/layout/AppSidebar.tsx
View File

@@ -6,7 +6,6 @@ import {
SidebarFooter,
SidebarGroup,
SidebarGroupContent,
SidebarGroupLabel,
SidebarHeader,
SidebarMenu,
SidebarMenuButton,
@@ -55,23 +54,30 @@ export function AppSidebar({ currentPage, onNavigate }: AppSidebarProps) {
</SidebarHeader>
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Navigation</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
{items.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton
asChild
isActive={currentPage === item.url}
onClick={() => onNavigate(item.url)}
>
<button className="w-full">
<item.icon />
<span>{item.title}</span>
</button>
</SidebarMenuButton>
</SidebarMenuItem>
))}
<SidebarMenu className="flex-1 space-y-1 overflow-y-auto">
{items.map((item) => {
const isActive = currentPage === item.url
return (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton
asChild
isActive={isActive}
onClick={() => onNavigate(item.url)}
className={`flex items-center px-4 py-3 text-sm font-medium rounded-lg transition-colors ${
isActive
? 'bg-primary/10 text-primary'
: 'text-foreground hover:bg-accent hover:text-accent-foreground'
}`}
>
<button className="w-full">
<item.icon />
<span>{item.title}</span>
</button>
</SidebarMenuButton>
</SidebarMenuItem>
)
})}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
@@ -83,11 +89,11 @@ export function AppSidebar({ currentPage, onNavigate }: AppSidebarProps) {
<img
src={getAvatarUrl(user?.avatarUrl)!}
alt={user?.name || user?.email || 'User'}
className="h-8 w-8 rounded-full"
className="h-10 w-10 rounded-full"
/>
) : (
<div className="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center">
<User className="h-4 w-4" />
<div className="h-10 w-10 rounded-full bg-primary flex items-center justify-center text-primary-foreground font-semibold">
{user?.name?.[0] || user?.email[0].toUpperCase()}
</div>
)}
<div className="flex flex-col min-w-0">
@@ -97,14 +103,14 @@ export function AppSidebar({ currentPage, onNavigate }: AppSidebarProps) {
<span className="text-xs text-muted-foreground truncate">{user?.email}</span>
</div>
</div>
<button
onClick={logout}
className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 flex-shrink-0"
title="Sign out"
>
<LogOut className="h-4 w-4" />
</button>
</div>
<button
onClick={logout}
className="w-full mt-3 flex items-center justify-center px-4 py-2 text-sm font-medium text-destructive-foreground bg-destructive rounded-lg hover:bg-destructive/90 transition-colors"
>
<LogOut className="h-4 w-4 mr-2" />
Logout
</button>
</SidebarFooter>
</Sidebar>
)

8
apps/web/src/components/layout/DashboardLayout.tsx
View File

@@ -19,6 +19,14 @@ export function DashboardLayout({ children, currentPage, onNavigate }: Dashboard
<SidebarTrigger className="-ml-1 md:h-8 md:w-8 h-10 w-10" />
<Breadcrumb currentPage={currentPage} />
<div className="flex-1" />
<span className="text-sm text-muted-foreground hidden sm:block">
{new Date().toLocaleDateString('id-ID', {
weekday: 'long',
day: 'numeric',
month: 'long',
year: 'numeric',
})}
</span>
<ThemeToggle />
</header>
<div className="flex-1 overflow-auto">