restore: tasks, users, settings, dashboard — all original pages recovered from old Docker image
This commit is contained in:
Forge
676
app/(app)/settings/page.tsx
Normal file
676
app/(app)/settings/page.tsx
Normal file
@@ -0,0 +1,676 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useQuery, useMutation } from "@tanstack/react-query";
|
||||
import { toast } from "sonner";
|
||||
import {
|
||||
Building2, CreditCard, Map, Wifi, Users, ChevronRight,
|
||||
} from "lucide-react";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
|
||||
import { Button } from "@/components/ui/Button";
|
||||
import { Input } from "@/components/ui/Input";
|
||||
import { Table, TableHead, TableBody, TableRow, Th, Td, EmptyState } from "@/components/ui/Table";
|
||||
import { Badge } from "@/components/ui/Badge";
|
||||
import { Modal } from "@/components/ui/Modal";
|
||||
import { formatCurrency } from "@/lib/utils";
|
||||
import api from "@/lib/api";
|
||||
|
||||
// ─── Types ─────────────────────────────────────────────────────────────────────
|
||||
|
||||
interface Tenant {
|
||||
id: string;
|
||||
name: string;
|
||||
slug: string;
|
||||
address?: string;
|
||||
phone?: string;
|
||||
email?: string;
|
||||
settings?: TenantBillingSettings | null;
|
||||
}
|
||||
|
||||
interface TenantBillingSettings {
|
||||
billingDay?: number;
|
||||
lateFeeAmount?: number;
|
||||
lateFeeGraceDays?: number;
|
||||
}
|
||||
|
||||
interface Plan {
|
||||
id: string;
|
||||
name: string;
|
||||
description?: string;
|
||||
type: string;
|
||||
speedDownMbps: number;
|
||||
speedUpMbps: number;
|
||||
monthlyPrice: number | string;
|
||||
isActive: boolean;
|
||||
}
|
||||
|
||||
// ─── Sub-page: Tenant ─────────────────────────────────────────────────────────
|
||||
|
||||
function TenantSettings() {
|
||||
const [name, setName] = useState("");
|
||||
const [address, setAddress] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [phone, setPhone] = useState("");
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
|
||||
const { isLoading } = useQuery<Tenant>({
|
||||
queryKey: ["tenant-me"],
|
||||
queryFn: async () => {
|
||||
const res = await api.get<Tenant>("/api/v1/tenants/me");
|
||||
return res.data;
|
||||
},
|
||||
select: (data) => {
|
||||
if (!loaded) {
|
||||
setName(data.name ?? "");
|
||||
setAddress(data.address ?? "");
|
||||
setEmail(data.email ?? "");
|
||||
setPhone(data.phone ?? "");
|
||||
setLoaded(true);
|
||||
}
|
||||
return data;
|
||||
},
|
||||
});
|
||||
|
||||
const saveMutation = useMutation({
|
||||
mutationFn: async () => {
|
||||
await api.patch("/api/v1/tenants/me", { name, address, email, phone });
|
||||
},
|
||||
onSuccess: () => toast.success("Tenant settings saved"),
|
||||
onError: () => toast.error("Failed to save. Endpoint may not be available yet."),
|
||||
});
|
||||
|
||||
if (isLoading) {
|
||||
return <div className="h-40 animate-pulse bg-gray-100 rounded-xl" />;
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader><CardTitle>Business Information</CardTitle></CardHeader>
|
||||
<CardContent>
|
||||
<form
|
||||
onSubmit={(e) => { e.preventDefault(); saveMutation.mutate(); }}
|
||||
className="space-y-4 max-w-lg"
|
||||
>
|
||||
<Input
|
||||
label="Business Name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
/>
|
||||
<Input
|
||||
label="Address"
|
||||
value={address}
|
||||
onChange={(e) => setAddress(e.target.value)}
|
||||
/>
|
||||
<Input
|
||||
label="Contact Email"
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
/>
|
||||
<Input
|
||||
label="Phone"
|
||||
value={phone}
|
||||
onChange={(e) => setPhone(e.target.value)}
|
||||
/>
|
||||
{saveMutation.isError && (
|
||||
<p className="text-sm text-orange-600 bg-orange-50 rounded-lg px-3 py-2">
|
||||
Save endpoint not available yet — changes not persisted.
|
||||
</p>
|
||||
)}
|
||||
<Button type="submit" isLoading={saveMutation.isPending}>
|
||||
Save Changes
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Sub-page: Billing Settings ───────────────────────────────────────────────
|
||||
|
||||
function BillingSettings() {
|
||||
const [billingDay, setBillingDay] = useState("1");
|
||||
const [lateFeeAmount, setLateFeeAmount] = useState("0");
|
||||
const [graceDays, setGraceDays] = useState("0");
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
|
||||
const { isLoading } = useQuery<TenantBillingSettings>({
|
||||
queryKey: ["tenant-billing-settings"],
|
||||
queryFn: async () => {
|
||||
try {
|
||||
const res = await api.get<TenantBillingSettings>("/api/v1/tenants/me/settings");
|
||||
return res.data ?? {};
|
||||
} catch {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
select: (data) => {
|
||||
if (!loaded && data) {
|
||||
setBillingDay(String(data.billingDay ?? 1));
|
||||
setLateFeeAmount(String(data.lateFeeAmount ?? 0));
|
||||
setGraceDays(String(data.lateFeeGraceDays ?? 0));
|
||||
setLoaded(true);
|
||||
}
|
||||
return data;
|
||||
},
|
||||
});
|
||||
|
||||
const saveMutation = useMutation({
|
||||
mutationFn: async () => {
|
||||
await api.patch("/api/v1/tenants/me/settings", {
|
||||
billingDay: parseInt(billingDay),
|
||||
lateFeeAmount: parseFloat(lateFeeAmount),
|
||||
lateFeeGraceDays: parseInt(graceDays),
|
||||
});
|
||||
},
|
||||
onSuccess: () => toast.success("Billing settings saved"),
|
||||
onError: () => toast.error("Failed to save. Endpoint may not be available yet."),
|
||||
});
|
||||
|
||||
if (isLoading) {
|
||||
return <div className="h-40 animate-pulse bg-gray-100 rounded-xl" />;
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader><CardTitle>Billing Configuration</CardTitle></CardHeader>
|
||||
<CardContent>
|
||||
<form
|
||||
onSubmit={(e) => { e.preventDefault(); saveMutation.mutate(); }}
|
||||
className="space-y-4 max-w-lg"
|
||||
>
|
||||
<Input
|
||||
label="Billing Day (1–28)"
|
||||
type="number"
|
||||
min="1"
|
||||
max="28"
|
||||
value={billingDay}
|
||||
onChange={(e) => setBillingDay(e.target.value)}
|
||||
hint="Day of month invoices are generated"
|
||||
/>
|
||||
<Input
|
||||
label="Late Fee Amount (₱)"
|
||||
type="number"
|
||||
min="0"
|
||||
step="0.01"
|
||||
value={lateFeeAmount}
|
||||
onChange={(e) => setLateFeeAmount(e.target.value)}
|
||||
/>
|
||||
<Input
|
||||
label="Late Fee Grace Days"
|
||||
type="number"
|
||||
min="0"
|
||||
value={graceDays}
|
||||
onChange={(e) => setGraceDays(e.target.value)}
|
||||
hint="Days after due date before late fee applies"
|
||||
/>
|
||||
{saveMutation.isError && (
|
||||
<p className="text-sm text-orange-600 bg-orange-50 rounded-lg px-3 py-2">
|
||||
Save endpoint not available yet — changes not persisted.
|
||||
</p>
|
||||
)}
|
||||
<Button type="submit" isLoading={saveMutation.isPending}>
|
||||
Save Billing Settings
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Sub-page: Areas & Zones ──────────────────────────────────────────────────
|
||||
|
||||
interface Area {
|
||||
id: string;
|
||||
name: string;
|
||||
zones?: Zone[];
|
||||
}
|
||||
|
||||
interface Zone {
|
||||
id: string;
|
||||
name: string;
|
||||
areaId: string;
|
||||
}
|
||||
|
||||
function AreasSettings() {
|
||||
const [showAddArea, setShowAddArea] = useState(false);
|
||||
const [showAddZone, setShowAddZone] = useState(false);
|
||||
const [areaName, setAreaName] = useState("");
|
||||
const [zoneName, setZoneName] = useState("");
|
||||
const [zoneAreaId, setZoneAreaId] = useState("");
|
||||
|
||||
const { data: areas, isLoading, refetch } = useQuery<Area[]>({
|
||||
queryKey: ["areas"],
|
||||
queryFn: async () => {
|
||||
try {
|
||||
const res = await api.get<Area[] | { data: Area[] }>("/api/v1/areas");
|
||||
const d = res.data;
|
||||
return Array.isArray(d) ? d : (d as { data: Area[] }).data ?? [];
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const addAreaMutation = useMutation({
|
||||
mutationFn: async () => {
|
||||
await api.post("/api/v1/areas", { name: areaName });
|
||||
},
|
||||
onSuccess: () => {
|
||||
toast.success("Area added");
|
||||
setAreaName("");
|
||||
setShowAddArea(false);
|
||||
refetch();
|
||||
},
|
||||
onError: () => toast.error("Failed to add area"),
|
||||
});
|
||||
|
||||
const addZoneMutation = useMutation({
|
||||
mutationFn: async () => {
|
||||
await api.post("/api/v1/zones", { name: zoneName, areaId: zoneAreaId });
|
||||
},
|
||||
onSuccess: () => {
|
||||
toast.success("Zone added");
|
||||
setZoneName("");
|
||||
setZoneAreaId("");
|
||||
setShowAddZone(false);
|
||||
refetch();
|
||||
},
|
||||
onError: () => toast.error("Failed to add zone"),
|
||||
});
|
||||
|
||||
const areaList = areas ?? [];
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle>Areas & Zones</CardTitle>
|
||||
<div className="flex gap-2">
|
||||
<Button size="sm" variant="outline" onClick={() => setShowAddArea(true)}>
|
||||
+ Area
|
||||
</Button>
|
||||
<Button size="sm" variant="outline" onClick={() => setShowAddZone(true)}>
|
||||
+ Zone
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<Th>Area Name</Th>
|
||||
<Th>Zones</Th>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{isLoading ? (
|
||||
Array.from({ length: 3 }).map((_, i) => (
|
||||
<TableRow key={i}>
|
||||
<Td><div className="h-4 w-32 animate-pulse bg-gray-100 rounded" /></Td>
|
||||
<Td><div className="h-4 w-24 animate-pulse bg-gray-100 rounded" /></Td>
|
||||
</TableRow>
|
||||
))
|
||||
) : areaList.length === 0 ? (
|
||||
<EmptyState message="No areas configured" />
|
||||
) : (
|
||||
areaList.map((a) => (
|
||||
<TableRow key={a.id}>
|
||||
<Td className="font-medium">{a.name}</Td>
|
||||
<Td className="text-sm text-gray-500">
|
||||
{a.zones?.length
|
||||
? a.zones.map((z) => z.name).join(", ")
|
||||
: <span className="text-gray-300">No zones</span>}
|
||||
</Td>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Add Area Modal */}
|
||||
<Modal isOpen={showAddArea} onClose={() => setShowAddArea(false)} title="Add Area">
|
||||
<form onSubmit={(e) => { e.preventDefault(); addAreaMutation.mutate(); }} className="space-y-4">
|
||||
<Input
|
||||
label="Area Name"
|
||||
value={areaName}
|
||||
onChange={(e) => setAreaName(e.target.value)}
|
||||
placeholder="e.g. North Sector"
|
||||
/>
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button type="button" variant="outline" size="sm" onClick={() => setShowAddArea(false)}>Cancel</Button>
|
||||
<Button type="submit" size="sm" isLoading={addAreaMutation.isPending} disabled={!areaName.trim()}>
|
||||
Add Area
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
|
||||
{/* Add Zone Modal */}
|
||||
<Modal isOpen={showAddZone} onClose={() => setShowAddZone(false)} title="Add Zone">
|
||||
<form onSubmit={(e) => { e.preventDefault(); addZoneMutation.mutate(); }} className="space-y-4">
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="text-sm font-medium text-gray-700">Area</label>
|
||||
<select
|
||||
className="block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
value={zoneAreaId}
|
||||
onChange={(e) => setZoneAreaId(e.target.value)}
|
||||
>
|
||||
<option value="">Select area</option>
|
||||
{areaList.map((a) => (
|
||||
<option key={a.id} value={a.id}>{a.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<Input
|
||||
label="Zone Name"
|
||||
value={zoneName}
|
||||
onChange={(e) => setZoneName(e.target.value)}
|
||||
placeholder="e.g. Zone 1"
|
||||
/>
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button type="button" variant="outline" size="sm" onClick={() => setShowAddZone(false)}>Cancel</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
size="sm"
|
||||
isLoading={addZoneMutation.isPending}
|
||||
disabled={!zoneName.trim() || !zoneAreaId}
|
||||
>
|
||||
Add Zone
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Sub-page: Plans ──────────────────────────────────────────────────────────
|
||||
|
||||
function PlansSettings() {
|
||||
const [showAdd, setShowAdd] = useState(false);
|
||||
const [planName, setPlanName] = useState("");
|
||||
const [planType, setPlanType] = useState("POSTPAID");
|
||||
const [speedDown, setSpeedDown] = useState("");
|
||||
const [speedUp, setSpeedUp] = useState("");
|
||||
const [price, setPrice] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
|
||||
const { data, isLoading, refetch } = useQuery<Plan[]>({
|
||||
queryKey: ["plans"],
|
||||
queryFn: async () => {
|
||||
try {
|
||||
const res = await api.get<Plan[] | { data: Plan[] }>("/api/v1/plans");
|
||||
const d = res.data;
|
||||
return Array.isArray(d) ? d : (d as { data: Plan[] }).data ?? [];
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const addPlanMutation = useMutation({
|
||||
mutationFn: async () => {
|
||||
await api.post("/api/v1/plans", {
|
||||
name: planName,
|
||||
type: planType,
|
||||
speedDownMbps: parseInt(speedDown),
|
||||
speedUpMbps: parseInt(speedUp),
|
||||
monthlyPrice: parseFloat(price),
|
||||
description: description || undefined,
|
||||
});
|
||||
},
|
||||
onSuccess: () => {
|
||||
toast.success("Plan created");
|
||||
resetAdd();
|
||||
setShowAdd(false);
|
||||
refetch();
|
||||
},
|
||||
onError: () => toast.error("Failed to create plan"),
|
||||
});
|
||||
|
||||
const toggleActiveMutation = useMutation({
|
||||
mutationFn: async ({ id, isActive }: { id: string; isActive: boolean }) => {
|
||||
await api.patch(`/api/v1/plans/${id}`, { isActive: !isActive });
|
||||
},
|
||||
onSuccess: () => {
|
||||
toast.success("Plan updated");
|
||||
refetch();
|
||||
},
|
||||
onError: () => toast.error("Failed to update plan"),
|
||||
});
|
||||
|
||||
function resetAdd() {
|
||||
setPlanName(""); setPlanType("POSTPAID");
|
||||
setSpeedDown(""); setSpeedUp(""); setPrice(""); setDescription("");
|
||||
}
|
||||
|
||||
const plans = data ?? [];
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle>Plans</CardTitle>
|
||||
<Button size="sm" onClick={() => setShowAdd(true)}>
|
||||
+ Add Plan
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<Th>Name</Th>
|
||||
<Th>Type</Th>
|
||||
<Th>Speed</Th>
|
||||
<Th>Price</Th>
|
||||
<Th>Status</Th>
|
||||
<Th>Actions</Th>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{isLoading ? (
|
||||
Array.from({ length: 3 }).map((_, i) => (
|
||||
<TableRow key={i}>
|
||||
{[1,2,3,4,5,6].map((j) => (
|
||||
<Td key={j}><div className="h-4 w-20 animate-pulse bg-gray-100 rounded" /></Td>
|
||||
))}
|
||||
</TableRow>
|
||||
))
|
||||
) : plans.length === 0 ? (
|
||||
<EmptyState message="No plans configured" />
|
||||
) : (
|
||||
plans.map((p) => (
|
||||
<TableRow key={p.id}>
|
||||
<Td className="font-medium">{p.name}</Td>
|
||||
<Td><Badge variant="muted">{p.type}</Badge></Td>
|
||||
<Td className="text-sm">{p.speedDownMbps}/{p.speedUpMbps} Mbps</Td>
|
||||
<Td className="font-semibold">{formatCurrency(Number(p.monthlyPrice))}</Td>
|
||||
<Td>
|
||||
<Badge variant={p.isActive ? "success" : "muted"}>
|
||||
{p.isActive ? "Active" : "Inactive"}
|
||||
</Badge>
|
||||
</Td>
|
||||
<Td>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => toggleActiveMutation.mutate({ id: p.id, isActive: p.isActive })}
|
||||
>
|
||||
{p.isActive ? "Archive" : "Restore"}
|
||||
</Button>
|
||||
</Td>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Add Plan Modal */}
|
||||
<Modal isOpen={showAdd} onClose={() => { setShowAdd(false); resetAdd(); }} title="Add Plan" className="max-w-lg">
|
||||
<form onSubmit={(e) => { e.preventDefault(); addPlanMutation.mutate(); }} className="space-y-4">
|
||||
<Input label="Plan Name" value={planName} onChange={(e) => setPlanName(e.target.value)} placeholder="e.g. Basic 10 Mbps" />
|
||||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="text-sm font-medium text-gray-700">Type</label>
|
||||
<select
|
||||
className="block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
value={planType}
|
||||
onChange={(e) => setPlanType(e.target.value)}
|
||||
>
|
||||
<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" min="1" value={speedDown} onChange={(e) => setSpeedDown(e.target.value)} />
|
||||
<Input label="Upload (Mbps)" type="number" min="1" value={speedUp} onChange={(e) => setSpeedUp(e.target.value)} />
|
||||
</div>
|
||||
|
||||
<Input label="Monthly Price (₱)" type="number" min="0" step="0.01" value={price} onChange={(e) => setPrice(e.target.value)} />
|
||||
<Input label="Description (optional)" value={description} onChange={(e) => setDescription(e.target.value)} />
|
||||
|
||||
<div className="flex justify-end gap-2 pt-1">
|
||||
<Button type="button" variant="outline" size="sm" onClick={() => { setShowAdd(false); resetAdd(); }}>Cancel</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
size="sm"
|
||||
isLoading={addPlanMutation.isPending}
|
||||
disabled={!planName.trim() || !speedDown || !speedUp || !price}
|
||||
>
|
||||
Create Plan
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Sub-page: Users ──────────────────────────────────────────────────────────
|
||||
|
||||
interface UserItem {
|
||||
id: string;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
email: string;
|
||||
isActive: boolean;
|
||||
}
|
||||
|
||||
function UsersSettings() {
|
||||
const { data, isLoading } = useQuery<UserItem[]>({
|
||||
queryKey: ["users-settings"],
|
||||
queryFn: async () => {
|
||||
const res = await api.get<UserItem[]>("/api/v1/users");
|
||||
return Array.isArray(res.data) ? res.data : [];
|
||||
},
|
||||
});
|
||||
|
||||
const users = data ?? [];
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader><CardTitle>Users</CardTitle></CardHeader>
|
||||
<CardContent className="p-0">
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<Th>Name</Th>
|
||||
<Th>Email</Th>
|
||||
<Th>Status</Th>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{isLoading ? (
|
||||
Array.from({ length: 3 }).map((_, i) => (
|
||||
<TableRow key={i}>
|
||||
{[1,2,3].map((j) => <Td key={j}><div className="h-4 w-28 animate-pulse bg-gray-100 rounded" /></Td>)}
|
||||
</TableRow>
|
||||
))
|
||||
) : users.length === 0 ? (
|
||||
<EmptyState message="No users found" />
|
||||
) : (
|
||||
users.map((u) => (
|
||||
<TableRow key={u.id}>
|
||||
<Td className="font-medium">{u.firstName} {u.lastName}</Td>
|
||||
<Td className="text-sm text-gray-600">{u.email}</Td>
|
||||
<Td>
|
||||
<Badge variant={u.isActive ? "success" : "muted"}>
|
||||
{u.isActive ? "Active" : "Inactive"}
|
||||
</Badge>
|
||||
</Td>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Main Page ─────────────────────────────────────────────────────────────────
|
||||
|
||||
const SUB_NAV = [
|
||||
{ key: "tenant", label: "Tenant", icon: Building2 },
|
||||
{ key: "billing", label: "Billing", icon: CreditCard },
|
||||
{ key: "areas", label: "Areas & Zones", icon: Map },
|
||||
{ key: "plans", label: "Plans", icon: Wifi },
|
||||
{ key: "users", label: "Users", icon: Users },
|
||||
] as const;
|
||||
|
||||
type SubPage = typeof SUB_NAV[number]["key"];
|
||||
|
||||
export default function SettingsPage() {
|
||||
const [active, setActive] = useState<SubPage>("tenant");
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">Settings</h1>
|
||||
<p className="text-sm text-gray-500">Manage your ISP configuration</p>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-6">
|
||||
{/* Left sub-nav */}
|
||||
<aside className="w-48 flex-shrink-0">
|
||||
<nav className="space-y-0.5">
|
||||
{SUB_NAV.map(({ key, label, icon: Icon }) => (
|
||||
<button
|
||||
key={key}
|
||||
onClick={() => setActive(key)}
|
||||
className={`w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
|
||||
active === key
|
||||
? "bg-blue-50 text-blue-700"
|
||||
: "text-gray-600 hover:bg-gray-100 hover:text-gray-900"
|
||||
}`}
|
||||
>
|
||||
<Icon className="h-4 w-4 flex-shrink-0" />
|
||||
<span className="flex-1 text-left">{label}</span>
|
||||
{active === key && <ChevronRight className="h-3 w-3 opacity-50" />}
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 min-w-0">
|
||||
{active === "tenant" && <TenantSettings />}
|
||||
{active === "billing" && <BillingSettings />}
|
||||
{active === "areas" && <AreasSettings />}
|
||||
{active === "plans" && <PlansSettings />}
|
||||
{active === "users" && <UsersSettings />}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user