394 lines
15 KiB
TypeScript
394 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
|
import { RefreshCw, Package, Plus, Pencil, Trash2 } from "lucide-react";
|
|
import { Card, CardContent, CardHeader } from "@/components/ui/Card";
|
|
import { Table, TableHead, TableBody, TableRow, Th, Td, EmptyState } from "@/components/ui/Table";
|
|
import { Badge } from "@/components/ui/Badge";
|
|
import { Button } from "@/components/ui/Button";
|
|
import { Input } from "@/components/ui/Input";
|
|
import { Modal } from "@/components/ui/Modal";
|
|
import { formatCurrency } from "@/lib/utils";
|
|
import api from "@/lib/api";
|
|
import { toast } from "sonner";
|
|
|
|
interface Plan {
|
|
id: string;
|
|
name: string;
|
|
type: "PREPAID" | "POSTPAID";
|
|
speedDownMbps: number;
|
|
speedUpMbps: number;
|
|
monthlyPrice: string | number;
|
|
description?: string | null;
|
|
isActive: boolean;
|
|
}
|
|
|
|
const typeVariant: Record<string, "success" | "muted"> = {
|
|
PREPAID: "success",
|
|
POSTPAID: "muted",
|
|
};
|
|
|
|
const emptyForm = {
|
|
name: "",
|
|
type: "POSTPAID" as "PREPAID" | "POSTPAID",
|
|
speedDownMbps: "",
|
|
speedUpMbps: "",
|
|
monthlyPrice: "",
|
|
description: "",
|
|
};
|
|
|
|
export default function PlansPage() {
|
|
const qc = useQueryClient();
|
|
const [search, setSearch] = useState("");
|
|
|
|
// Modals
|
|
const [showCreate, setShowCreate] = useState(false);
|
|
const [editPlan, setEditPlan] = useState<Plan | null>(null);
|
|
const [deletePlan, setDeletePlan] = useState<Plan | null>(null);
|
|
|
|
// Forms
|
|
const [createForm, setCreateForm] = useState({ ...emptyForm });
|
|
const [editForm, setEditForm] = useState({ ...emptyForm });
|
|
|
|
// GET /plans returns a plain array (not paginated)
|
|
const { data: allPlans = [], isLoading, isError, refetch } = useQuery<Plan[]>({
|
|
queryKey: ["plans"],
|
|
queryFn: async () => {
|
|
const res = await api.get<Plan[] | { data: Plan[] }>("/api/v1/plans");
|
|
return Array.isArray(res.data) ? res.data : (res.data as any).data ?? [];
|
|
},
|
|
});
|
|
|
|
// Client-side search filter
|
|
const plans = search
|
|
? allPlans.filter(p =>
|
|
p.name.toLowerCase().includes(search.toLowerCase()) ||
|
|
p.type.toLowerCase().includes(search.toLowerCase())
|
|
)
|
|
: allPlans;
|
|
|
|
const createMutation = useMutation({
|
|
mutationFn: async () => {
|
|
await api.post("/api/v1/plans", {
|
|
name: createForm.name,
|
|
type: createForm.type,
|
|
speedDownMbps: Number(createForm.speedDownMbps),
|
|
speedUpMbps: Number(createForm.speedUpMbps),
|
|
monthlyPrice: Number(createForm.monthlyPrice),
|
|
description: createForm.description || undefined,
|
|
});
|
|
},
|
|
onSuccess: () => {
|
|
toast.success("Plan created!");
|
|
setShowCreate(false);
|
|
setCreateForm({ ...emptyForm });
|
|
qc.invalidateQueries({ queryKey: ["plans"] });
|
|
},
|
|
onError: (e: any) => toast.error(e.response?.data?.message ?? "Failed to create plan"),
|
|
});
|
|
|
|
const updateMutation = useMutation({
|
|
mutationFn: async () => {
|
|
await api.patch(`/api/v1/plans/${editPlan!.id}`, {
|
|
name: editForm.name,
|
|
type: editForm.type,
|
|
speedDownMbps: Number(editForm.speedDownMbps),
|
|
speedUpMbps: Number(editForm.speedUpMbps),
|
|
monthlyPrice: Number(editForm.monthlyPrice),
|
|
description: editForm.description || undefined,
|
|
});
|
|
},
|
|
onSuccess: () => {
|
|
toast.success("Plan updated!");
|
|
setEditPlan(null);
|
|
qc.invalidateQueries({ queryKey: ["plans"] });
|
|
},
|
|
onError: (e: any) => toast.error(e.response?.data?.message ?? "Failed to update plan"),
|
|
});
|
|
|
|
const deleteMutation = useMutation({
|
|
mutationFn: async () => {
|
|
await api.delete(`/api/v1/plans/${deletePlan!.id}`);
|
|
},
|
|
onSuccess: () => {
|
|
toast.success("Plan deleted!");
|
|
setDeletePlan(null);
|
|
qc.invalidateQueries({ queryKey: ["plans"] });
|
|
},
|
|
onError: (e: any) => toast.error(e.response?.data?.message ?? "Failed to delete plan"),
|
|
});
|
|
|
|
const openEdit = (plan: Plan) => {
|
|
setEditForm({
|
|
name: plan.name,
|
|
type: plan.type,
|
|
speedDownMbps: String(plan.speedDownMbps),
|
|
speedUpMbps: String(plan.speedUpMbps),
|
|
monthlyPrice: String(plan.monthlyPrice),
|
|
description: plan.description ?? "",
|
|
});
|
|
setEditPlan(plan);
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-gray-900">Plans</h1>
|
|
<p className="text-sm text-gray-500 mt-1">{allPlans.length} total plans</p>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button onClick={() => refetch()} variant="outline" size="sm" data-testid="btn-refresh">
|
|
<RefreshCw size={14} className="mr-1" />Refresh
|
|
</Button>
|
|
<Button onClick={() => setShowCreate(true)} size="sm" data-testid="btn-add-plan">
|
|
<Plus size={14} className="mr-1" />Add Plan
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<input
|
|
className="w-full max-w-sm border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
placeholder="Search plans..."
|
|
value={search}
|
|
onChange={e => setSearch(e.target.value)}
|
|
data-testid="input-search"
|
|
/>
|
|
</CardHeader>
|
|
<CardContent className="p-0">
|
|
<Table>
|
|
<TableHead>
|
|
<TableRow>
|
|
<Th>Name</Th>
|
|
<Th>Type</Th>
|
|
<Th>Speed (Down/Up)</Th>
|
|
<Th>Monthly Price</Th>
|
|
<Th>Status</Th>
|
|
<Th>Description</Th>
|
|
<Th></Th>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{isLoading ? (
|
|
Array.from({ length: 5 }).map((_, i) => (
|
|
<TableRow key={i}>
|
|
<Td colSpan={7}><div className="h-4 bg-gray-100 rounded animate-pulse" /></Td>
|
|
</TableRow>
|
|
))
|
|
) : isError ? (
|
|
<TableRow>
|
|
<Td colSpan={7}>
|
|
<p className="text-center py-6 text-red-400 text-sm">
|
|
Failed to load plans.{" "}
|
|
<button onClick={() => refetch()} className="underline">Retry</button>
|
|
</p>
|
|
</Td>
|
|
</TableRow>
|
|
) : plans.length === 0 ? (
|
|
<EmptyState colSpan={7} message="No plans found" icon={<Package size={24} />} />
|
|
) : (
|
|
plans.map(plan => (
|
|
<TableRow key={plan.id} data-testid="plan-row">
|
|
<Td className="font-medium">{plan.name}</Td>
|
|
<Td>
|
|
<Badge variant={typeVariant[plan.type] ?? "muted"}>{plan.type}</Badge>
|
|
</Td>
|
|
<Td className="font-mono text-sm">{plan.speedDownMbps}/{plan.speedUpMbps} Mbps</Td>
|
|
<Td className="font-semibold">{formatCurrency(Number(plan.monthlyPrice))}</Td>
|
|
<Td>
|
|
<Badge variant={plan.isActive ? "success" : "muted"}>
|
|
{plan.isActive ? "Active" : "Inactive"}
|
|
</Badge>
|
|
</Td>
|
|
<Td className="text-gray-500 text-sm max-w-xs truncate">{plan.description ?? "—"}</Td>
|
|
<Td>
|
|
<div className="flex gap-2 justify-end">
|
|
<button
|
|
onClick={() => openEdit(plan)}
|
|
className="p-1.5 rounded hover:bg-blue-50 text-blue-600 transition-colors"
|
|
data-testid="btn-edit-plan"
|
|
title="Edit plan"
|
|
>
|
|
<Pencil size={14} />
|
|
</button>
|
|
<button
|
|
onClick={() => setDeletePlan(plan)}
|
|
className="p-1.5 rounded hover:bg-red-50 text-red-500 transition-colors"
|
|
data-testid="btn-delete-plan"
|
|
title="Delete plan"
|
|
>
|
|
<Trash2 size={14} />
|
|
</button>
|
|
</div>
|
|
</Td>
|
|
</TableRow>
|
|
))
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Create Plan Modal */}
|
|
<Modal isOpen={showCreate} onClose={() => { setShowCreate(false); setCreateForm({ ...emptyForm }); }} title="Add Plan" className="max-w-md">
|
|
<div className="space-y-4" data-testid="modal-create-plan">
|
|
<Input
|
|
label="Plan Name"
|
|
value={createForm.name}
|
|
onChange={e => setCreateForm(f => ({ ...f, name: e.target.value }))}
|
|
placeholder="e.g. Basic 25Mbps"
|
|
data-testid="input-plan-name"
|
|
/>
|
|
<div className="flex flex-col gap-1.5">
|
|
<label className="text-sm font-medium text-gray-700">Type</label>
|
|
<select
|
|
className="border rounded-lg px-3 py-2 text-sm"
|
|
value={createForm.type}
|
|
onChange={e => setCreateForm(f => ({ ...f, type: e.target.value as "PREPAID" | "POSTPAID" }))}
|
|
data-testid="select-plan-type"
|
|
>
|
|
<option value="POSTPAID">POSTPAID</option>
|
|
<option value="PREPAID">PREPAID</option>
|
|
</select>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<Input
|
|
label="Download (Mbps)"
|
|
type="number"
|
|
value={createForm.speedDownMbps}
|
|
onChange={e => setCreateForm(f => ({ ...f, speedDownMbps: e.target.value }))}
|
|
placeholder="e.g. 25"
|
|
data-testid="input-plan-speed-down"
|
|
/>
|
|
<Input
|
|
label="Upload (Mbps)"
|
|
type="number"
|
|
value={createForm.speedUpMbps}
|
|
onChange={e => setCreateForm(f => ({ ...f, speedUpMbps: e.target.value }))}
|
|
placeholder="e.g. 10"
|
|
data-testid="input-plan-speed-up"
|
|
/>
|
|
</div>
|
|
<Input
|
|
label="Monthly Price (₱)"
|
|
type="number"
|
|
value={createForm.monthlyPrice}
|
|
onChange={e => setCreateForm(f => ({ ...f, monthlyPrice: e.target.value }))}
|
|
placeholder="e.g. 999"
|
|
data-testid="input-plan-price"
|
|
/>
|
|
<Input
|
|
label="Description (optional)"
|
|
value={createForm.description}
|
|
onChange={e => setCreateForm(f => ({ ...f, description: e.target.value }))}
|
|
placeholder="e.g. Perfect for households"
|
|
data-testid="input-plan-description"
|
|
/>
|
|
<div className="flex gap-2 justify-end pt-2">
|
|
<Button variant="outline" size="sm" onClick={() => { setShowCreate(false); setCreateForm({ ...emptyForm }); }}>Cancel</Button>
|
|
<Button
|
|
size="sm"
|
|
onClick={() => createMutation.mutate()}
|
|
isLoading={createMutation.isPending}
|
|
disabled={!createForm.name || !createForm.speedDownMbps || !createForm.speedUpMbps || !createForm.monthlyPrice}
|
|
data-testid="btn-submit-create"
|
|
>
|
|
Create Plan
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
|
|
{/* Edit Plan Modal */}
|
|
<Modal isOpen={!!editPlan} onClose={() => setEditPlan(null)} title={`Edit Plan: ${editPlan?.name ?? ""}`} className="max-w-md">
|
|
<div className="space-y-4" data-testid="modal-edit-plan">
|
|
<Input
|
|
label="Plan Name"
|
|
value={editForm.name}
|
|
onChange={e => setEditForm(f => ({ ...f, name: e.target.value }))}
|
|
data-testid="input-edit-name"
|
|
/>
|
|
<div className="flex flex-col gap-1.5">
|
|
<label className="text-sm font-medium text-gray-700">Type</label>
|
|
<select
|
|
className="border rounded-lg px-3 py-2 text-sm"
|
|
value={editForm.type}
|
|
onChange={e => setEditForm(f => ({ ...f, type: e.target.value as "PREPAID" | "POSTPAID" }))}
|
|
data-testid="select-edit-type"
|
|
>
|
|
<option value="POSTPAID">POSTPAID</option>
|
|
<option value="PREPAID">PREPAID</option>
|
|
</select>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<Input
|
|
label="Download (Mbps)"
|
|
type="number"
|
|
value={editForm.speedDownMbps}
|
|
onChange={e => setEditForm(f => ({ ...f, speedDownMbps: e.target.value }))}
|
|
data-testid="input-edit-speed-down"
|
|
/>
|
|
<Input
|
|
label="Upload (Mbps)"
|
|
type="number"
|
|
value={editForm.speedUpMbps}
|
|
onChange={e => setEditForm(f => ({ ...f, speedUpMbps: e.target.value }))}
|
|
data-testid="input-edit-speed-up"
|
|
/>
|
|
</div>
|
|
<Input
|
|
label="Monthly Price (₱)"
|
|
type="number"
|
|
value={editForm.monthlyPrice}
|
|
onChange={e => setEditForm(f => ({ ...f, monthlyPrice: e.target.value }))}
|
|
data-testid="input-edit-price"
|
|
/>
|
|
<Input
|
|
label="Description (optional)"
|
|
value={editForm.description}
|
|
onChange={e => setEditForm(f => ({ ...f, description: e.target.value }))}
|
|
data-testid="input-edit-description"
|
|
/>
|
|
<div className="flex gap-2 justify-end pt-2">
|
|
<Button variant="outline" size="sm" onClick={() => setEditPlan(null)}>Cancel</Button>
|
|
<Button
|
|
size="sm"
|
|
onClick={() => updateMutation.mutate()}
|
|
isLoading={updateMutation.isPending}
|
|
disabled={!editForm.name || !editForm.speedDownMbps || !editForm.speedUpMbps || !editForm.monthlyPrice}
|
|
data-testid="btn-submit-edit"
|
|
>
|
|
Save Changes
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
|
|
{/* Delete Confirmation Modal */}
|
|
<Modal isOpen={!!deletePlan} onClose={() => setDeletePlan(null)} title="Delete Plan" className="max-w-sm">
|
|
<div className="space-y-4" data-testid="modal-delete-plan">
|
|
<p className="text-sm text-gray-600">
|
|
Are you sure you want to delete <strong>{deletePlan?.name}</strong>? This action cannot be undone.
|
|
</p>
|
|
<div className="flex gap-2 justify-end pt-2">
|
|
<Button variant="outline" size="sm" onClick={() => setDeletePlan(null)} data-testid="btn-cancel-delete">Cancel</Button>
|
|
<Button
|
|
variant="danger"
|
|
size="sm"
|
|
onClick={() => deleteMutation.mutate()}
|
|
isLoading={deleteMutation.isPending}
|
|
data-testid="btn-confirm-delete"
|
|
>
|
|
Delete
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
</div>
|
|
);
|
|
}
|