andika/membership-fe
3
1
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update Responsive and Contact Us page and function

Browse Source
This commit is contained in:
Koncept Kit
2025-12-13 00:58:39 +07:00
parent 44f2be5d84
commit 12a32b7f3f
22 changed files with 936 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/pages/admin/AdminEvents.js
View File

@@ -131,7 +131,7 @@ const AdminEvents = () => {
return (
<>
{/* Header */}
<div className="mb-8 flex justify-between items-center">
<div className="mb-8 flex flex-col sm:flex-row gap-4 justify-between items-start sm:items-center">
<div>
<h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Event Management
@@ -156,7 +156,7 @@ const AdminEvents = () => {
</Button>
</DialogTrigger>
<DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
<DialogContent className="max-w-[calc(100vw-2rem)] sm:max-w-2xl max-h-[90vh] overflow-y-auto">
<DialogHeader>
<DialogTitle className="text-2xl text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
{editingEvent ? 'Edit Event' : 'Create New Event'}
@@ -188,7 +188,7 @@ const AdminEvents = () => {
/>
</div>
<div className="grid md:grid-cols-2 gap-4">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Start Date & Time *
@@ -254,13 +254,7 @@ const AdminEvents = () => {
</label>
</div>
<div className="flex gap-3 pt-4">
<Button
type="submit"
className="flex-1 bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full"
>
{editingEvent ? 'Update Event' : 'Create Event'}
</Button>
<div className="flex flex-col-reverse sm:flex-row gap-3 pt-4">
<Button
type="button"
variant="outline"
@@ -269,6 +263,12 @@ const AdminEvents = () => {
>
Cancel
</Button>
<Button
type="submit"
className="flex-1 bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full"
>
{editingEvent ? 'Update Event' : 'Create Event'}
</Button>
</div>
</form>
</DialogContent>
@@ -281,7 +281,7 @@ const AdminEvents = () => {
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading events...</p>
</div>
) : events.length > 0 ? (
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{events.map((event) => (
<Card
key={event.id}

4
src/pages/admin/AdminMembers.js
View File

@@ -100,7 +100,7 @@ const AdminMembers = () => {
</div>
{/* Stats */}
<div className="grid md:grid-cols-4 gap-4 mb-8">
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 mb-8">
<Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]">
<p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Members</p>
<p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
@@ -129,7 +129,7 @@ const AdminMembers = () => {
{/* Filters */}
<Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb] mb-8">
<div className="grid md:grid-cols-2 gap-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="relative">
<Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[#664fa3]" />
<Input

18
src/pages/admin/AdminPlans.js
View File

@@ -147,7 +147,7 @@ const AdminPlans = () => {
</div>
{/* Stats */}
<div className="grid md:grid-cols-4 gap-4 mb-8">
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 mb-8">
<Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]">
<p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Plans</p>
<p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
@@ -183,7 +183,7 @@ const AdminPlans = () => {
{/* Filters */}
<Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb] mb-8">
<div className="grid md:grid-cols-2 gap-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="relative">
<Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[#664fa3]" />
<Input
@@ -212,7 +212,7 @@ const AdminPlans = () => {
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading plans...</p>
</div>
) : filteredPlans.length > 0 ? (
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{filteredPlans.map((plan) => (
<Card
key={plan.id}
@@ -286,7 +286,7 @@ const AdminPlans = () => {
</div>
{/* Actions */}
<div className="flex gap-2 pt-4 border-t border-[#ddd8eb]">
<div className="flex flex-col sm:flex-row gap-2 pt-4 border-t border-[#ddd8eb]">
<Button
onClick={() => handleEditPlan(plan)}
variant="outline"
@@ -350,16 +350,16 @@ const AdminPlans = () => {
{/* Delete Confirmation Dialog */}
{deleteDialogOpen && (
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
<Card className="p-8 bg-white rounded-2xl max-w-md mx-4">
<h2 className="text-2xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
<Card className="p-6 sm:p-8 bg-white rounded-2xl max-w-md w-full">
<h2 className="text-xl sm:text-2xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Delete Plan
</h2>
<p className="text-[#664fa3] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-sm sm:text-base text-[#664fa3] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Are you sure you want to delete "{planToDelete?.name}"? This action
will deactivate the plan and it won't be available for new subscriptions.
</p>
<div className="flex gap-4">
<div className="flex flex-col-reverse sm:flex-row gap-3 sm:gap-4">
<Button
onClick={() => setDeleteDialogOpen(false)}
variant="outline"

93
src/pages/admin/AdminSubscriptions.js
View File

@@ -314,7 +314,98 @@ const AdminSubscriptions = () => {
{/* Subscriptions Table */}
<Card className="bg-white rounded-2xl border-2 border-[#ddd8eb] overflow-hidden">
<div className="overflow-x-auto">
{/* Mobile Card View */}
<div className="md:hidden p-4 space-y-4">
{filteredSubscriptions.length > 0 ? (
filteredSubscriptions.map((sub) => (
<Card key={sub.id} className="p-4 border border-[#ddd8eb] bg-[#f9f5ff]/30">
<div className="space-y-3">
{/* Member Info */}
<div className="flex justify-between items-start border-b border-[#ddd8eb] pb-3">
<div className="flex-1">
<p className="font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
{sub.user.first_name} {sub.user.last_name}
</p>
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{sub.user.email}
</p>
</div>
<Badge variant={getStatusBadgeVariant(sub.status)}>{sub.status}</Badge>
</div>
{/* Plan & Period */}
<div className="grid grid-cols-2 gap-3 text-sm">
<div>
<p className="text-xs text-[#664fa3] mb-1">Plan</p>
<p className="font-medium text-[#422268]">{sub.plan.name}</p>
<p className="text-xs text-[#664fa3]">{sub.plan.billing_cycle}</p>
</div>
<div>
<p className="text-xs text-[#664fa3] mb-1">Period</p>
<p className="text-[#422268]">
{new Date(sub.current_period_start).toLocaleDateString()} -
{new Date(sub.current_period_end).toLocaleDateString()}
</p>
</div>
</div>
{/* Pricing */}
<div className="grid grid-cols-3 gap-2 text-sm bg-white/50 p-3 rounded">
<div>
<p className="text-xs text-[#664fa3] mb-1">Base Fee</p>
<p className="font-medium text-[#422268]">
${(sub.base_fee_cents / 100).toFixed(2)}
</p>
</div>
<div>
<p className="text-xs text-[#664fa3] mb-1">Donation</p>
<p className="font-medium text-[#422268]">
${(sub.donation_cents / 100).toFixed(2)}
</p>
</div>
<div>
<p className="text-xs text-[#664fa3] mb-1">Total</p>
<p className="font-semibold text-[#422268]">
${(sub.total_cents / 100).toFixed(2)}
</p>
</div>
</div>
{/* Actions */}
<div className="flex gap-2 pt-2">
<Button
size="sm"
variant="outline"
onClick={() => handleEdit(sub)}
className="flex-1 text-[#664fa3] hover:bg-[#DDD8EB]"
>
<Edit className="h-4 w-4 mr-2" />
Edit
</Button>
{sub.status === 'active' && (
<Button
size="sm"
variant="outline"
onClick={() => handleCancelSubscription(sub.id)}
className="flex-1 text-red-600 hover:bg-red-50"
>
<XCircle className="h-4 w-4 mr-2" />
Cancel
</Button>
)}
</div>
</div>
</Card>
))
) : (
<div className="p-12 text-center text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
No subscriptions found
</div>
)}
</div>
{/* Desktop Table View */}
<div className="hidden md:block overflow-x-auto">
<table className="w-full">
<thead>
<tr className="bg-[#DDD8EB]/20 border-b border-[#ddd8eb]">