restore: tasks, users, settings, dashboard — all original pages recovered from old Docker image
This commit is contained in:
Forge
@@ -1,166 +1,334 @@
|
|||||||
'use client';
|
"use client";
|
||||||
|
|
||||||
import { useQuery } from '@tanstack/react-query';
|
import { useQuery, useMutation } from "@tanstack/react-query";
|
||||||
import { api } from '@/lib/api';
|
import { useRouter } from "next/navigation";
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
import { Users, Wifi, FileText, DollarSign, Ticket, CheckSquare, TrendingUp, Database, RefreshCw } from "lucide-react";
|
||||||
import { Skeleton } from '@/components/ui/skeleton';
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
|
||||||
import { Users, Wifi, DollarSign, AlertTriangle, Ticket, ClipboardList } from 'lucide-react';
|
import { Button } from "@/components/ui/Button";
|
||||||
|
import { Badge } from "@/components/ui/Badge";
|
||||||
|
import { formatCurrency, formatDateTime } from "@/lib/utils";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import api from "@/lib/api";
|
||||||
|
import type { DashboardSummary, PaginatedResponse, Ticket as TicketType } from "@/types";
|
||||||
|
import {
|
||||||
|
LineChart,
|
||||||
|
Line,
|
||||||
|
XAxis,
|
||||||
|
YAxis,
|
||||||
|
CartesianGrid,
|
||||||
|
Tooltip,
|
||||||
|
ResponsiveContainer,
|
||||||
|
Legend,
|
||||||
|
} from "recharts";
|
||||||
|
|
||||||
interface DashboardSummary {
|
interface KpiCardProps {
|
||||||
subscribers: { total: number; active: number; pending: number; suspended: number };
|
title: string;
|
||||||
billing: { unpaidInvoices: number; overdueInvoices: number };
|
value: string | number;
|
||||||
support: { openTickets: number; inProgressTickets: number };
|
icon: React.ComponentType<{ className?: string }>;
|
||||||
tasks: { pending: number };
|
color: string;
|
||||||
revenue: { thisMonth: number; lastMonth: number; trend: number };
|
subtitle?: string;
|
||||||
leads: { total: number; new: number };
|
href?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
function KpiCard({
|
function KpiCard({ title, value, icon: Icon, color, subtitle, href }: KpiCardProps) {
|
||||||
label,
|
const router = useRouter();
|
||||||
value,
|
|
||||||
sub,
|
|
||||||
icon: Icon,
|
|
||||||
color,
|
|
||||||
isLoading,
|
|
||||||
}: {
|
|
||||||
label: string;
|
|
||||||
value: string;
|
|
||||||
sub?: string;
|
|
||||||
icon: React.ElementType;
|
|
||||||
color: string;
|
|
||||||
isLoading: boolean;
|
|
||||||
}) {
|
|
||||||
return (
|
return (
|
||||||
<Card className="border shadow-sm">
|
<Card
|
||||||
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
className={href ? "cursor-pointer hover:shadow-md transition-shadow" : ""}
|
||||||
<CardTitle className="text-sm font-medium text-slate-500">{label}</CardTitle>
|
onClick={href ? () => router.push(href) : undefined}
|
||||||
<div
|
>
|
||||||
className="w-9 h-9 rounded-lg flex items-center justify-center"
|
<CardContent className="flex items-center gap-4 py-5">
|
||||||
style={{ backgroundColor: color + '1A' }}
|
<div className={`flex h-12 w-12 items-center justify-center rounded-xl ${color} shrink-0`}>
|
||||||
>
|
<Icon className="h-6 w-6 text-white" />
|
||||||
<Icon size={18} style={{ color }} />
|
|
||||||
</div>
|
</div>
|
||||||
</CardHeader>
|
<div className="min-w-0">
|
||||||
<CardContent>
|
<p className="text-sm font-medium text-gray-500 truncate">{title}</p>
|
||||||
{isLoading ? (
|
<p className="text-2xl font-bold text-gray-900">{value}</p>
|
||||||
<Skeleton className="h-8 w-24" />
|
{subtitle && <p className="text-xs text-gray-400 mt-0.5">{subtitle}</p>}
|
||||||
) : (
|
</div>
|
||||||
<>
|
{href && (
|
||||||
<p className="text-2xl font-bold text-slate-800">{value}</p>
|
<div className="ml-auto text-gray-300 text-xs">→</div>
|
||||||
{sub && <p className="text-xs text-slate-500 mt-1">{sub}</p>}
|
|
||||||
</>
|
|
||||||
)}
|
)}
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const priorityVariant: Record<string, "danger" | "warning" | "default" | "muted"> = {
|
||||||
|
URGENT: "danger",
|
||||||
|
urgent: "danger",
|
||||||
|
HIGH: "warning",
|
||||||
|
high: "warning",
|
||||||
|
NORMAL: "default",
|
||||||
|
normal: "default",
|
||||||
|
MEDIUM: "default",
|
||||||
|
medium: "default",
|
||||||
|
LOW: "muted",
|
||||||
|
low: "muted",
|
||||||
|
};
|
||||||
|
|
||||||
|
// Build mock time-series data from revenue for the chart
|
||||||
|
function buildChartData(stats: DashboardSummary | undefined) {
|
||||||
|
if (!stats) return [];
|
||||||
|
// Create a simple 2-month comparison from revenue data
|
||||||
|
const now = new Date();
|
||||||
|
const thisMonth = now.toLocaleString("default", { month: "short" });
|
||||||
|
const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1).toLocaleString("default", { month: "short" });
|
||||||
|
return [
|
||||||
|
{ month: lastMonth, revenue: stats.revenue.lastMonth, clients: stats.subscribers.total },
|
||||||
|
{ month: thisMonth, revenue: stats.revenue.thisMonth, clients: stats.subscribers.active },
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
export default function DashboardPage() {
|
export default function DashboardPage() {
|
||||||
const { data, isLoading, error } = useQuery<DashboardSummary>({
|
const router = useRouter();
|
||||||
queryKey: ['dashboard', 'summary'],
|
|
||||||
|
const { data: stats, isLoading: statsLoading, refetch: refetchStats } = useQuery<DashboardSummary>({
|
||||||
|
queryKey: ["dashboard-summary"],
|
||||||
queryFn: async () => {
|
queryFn: async () => {
|
||||||
const res = await api.get('/api/v1/dashboard/summary');
|
const res = await api.get<DashboardSummary>("/api/v1/dashboard/summary");
|
||||||
return res.data;
|
return res.data;
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const fmt = (n: number) => n?.toLocaleString() ?? '—';
|
const { data: ticketsData, refetch: refetchTickets } = useQuery<PaginatedResponse<TicketType>>({
|
||||||
const peso = (n: number) =>
|
queryKey: ["recent-tickets"],
|
||||||
'₱' + (n ?? 0).toLocaleString('en-PH', { minimumFractionDigits: 2 });
|
queryFn: async () => {
|
||||||
|
const res = await api.get<PaginatedResponse<TicketType>>("/api/v1/tickets?page=1&limit=5");
|
||||||
|
return res.data;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const seedMutation = useMutation({
|
||||||
|
mutationFn: () => api.post<{ message: string }>("/api/v1/_seed", {}),
|
||||||
|
onSuccess: (res) => {
|
||||||
|
toast.success(res.data?.message || "Demo data seeded!");
|
||||||
|
refetchStats();
|
||||||
|
refetchTickets();
|
||||||
|
},
|
||||||
|
onError: (err: { response?: { data?: { message?: string } } }) => {
|
||||||
|
toast.error(err?.response?.data?.message || "Seed failed");
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const recentTickets = ticketsData?.data ?? [];
|
||||||
|
const chartData = buildChartData(stats);
|
||||||
|
const hasChartData = chartData.some((d) => d.revenue > 0);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div className="space-y-6">
|
||||||
<div className="mb-6">
|
<div className="flex items-center justify-between">
|
||||||
<h1 className="text-2xl font-bold text-slate-800">Dashboard</h1>
|
<div>
|
||||||
<p className="text-slate-500 text-sm mt-1">Overview of your ISP operations</p>
|
<h1 className="text-2xl font-bold text-gray-900">Dashboard</h1>
|
||||||
|
<p className="text-sm text-gray-500 mt-0.5">Overview of your ISP operations</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-2 flex-wrap justify-end">
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => { refetchStats(); refetchTickets(); }}
|
||||||
|
>
|
||||||
|
<RefreshCw className="h-4 w-4" />
|
||||||
|
Refresh
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="secondary"
|
||||||
|
onClick={() => seedMutation.mutate()}
|
||||||
|
isLoading={seedMutation.isPending}
|
||||||
|
>
|
||||||
|
<Database className="h-4 w-4" />
|
||||||
|
Seed Demo Data
|
||||||
|
</Button>
|
||||||
|
<Button size="sm" onClick={() => router.push("/clients")}>
|
||||||
|
+ New Client
|
||||||
|
</Button>
|
||||||
|
<Button size="sm" variant="secondary" onClick={() => router.push("/payments")}>
|
||||||
|
+ Record Payment
|
||||||
|
</Button>
|
||||||
|
<Button size="sm" variant="secondary" onClick={() => router.push("/tickets")}>
|
||||||
|
+ New Ticket
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{error && (
|
{/* KPI Cards */}
|
||||||
<div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-red-600 text-sm">
|
{statsLoading ? (
|
||||||
Failed to load dashboard data.
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||||
|
{[1, 2, 3, 4].map((i) => (
|
||||||
|
<Card key={i}>
|
||||||
|
<CardContent className="py-5">
|
||||||
|
<div className="h-16 animate-pulse bg-gray-100 rounded-lg" />
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||||
|
<KpiCard
|
||||||
|
title="Total Clients"
|
||||||
|
value={stats?.subscribers.total ?? 0}
|
||||||
|
icon={Users}
|
||||||
|
color="bg-blue-500"
|
||||||
|
subtitle={`${stats?.subscribers.active ?? 0} active`}
|
||||||
|
href="/clients"
|
||||||
|
/>
|
||||||
|
<KpiCard
|
||||||
|
title="Active Subscriptions"
|
||||||
|
value={stats?.subscribers.active ?? 0}
|
||||||
|
icon={Wifi}
|
||||||
|
color="bg-green-500"
|
||||||
|
subtitle={`${stats?.subscribers.suspended ?? 0} suspended`}
|
||||||
|
href="/subscriptions"
|
||||||
|
/>
|
||||||
|
<KpiCard
|
||||||
|
title="Overdue Invoices"
|
||||||
|
value={stats?.billing.overdueInvoices ?? 0}
|
||||||
|
icon={FileText}
|
||||||
|
color="bg-red-500"
|
||||||
|
subtitle={`${stats?.billing.unpaidInvoices ?? 0} unpaid total`}
|
||||||
|
href="/invoices?status=OVERDUE"
|
||||||
|
/>
|
||||||
|
<KpiCard
|
||||||
|
title="Monthly Revenue"
|
||||||
|
value={formatCurrency(stats?.revenue.thisMonth ?? 0)}
|
||||||
|
icon={DollarSign}
|
||||||
|
color="bg-purple-500"
|
||||||
|
subtitle={
|
||||||
|
stats?.revenue.growth != null
|
||||||
|
? `${stats.revenue.growth > 0 ? "+" : ""}${stats.revenue.growth.toFixed(1)}% vs last month`
|
||||||
|
: "vs last month"
|
||||||
|
}
|
||||||
|
href="/payments"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* KPI Row 1 */}
|
{/* Secondary stats */}
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-4 mb-4">
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||||||
<KpiCard
|
<Card
|
||||||
label="Active Subscribers"
|
className="cursor-pointer hover:shadow-md transition-shadow"
|
||||||
value={fmt(data?.subscribers?.active ?? 0)}
|
onClick={() => router.push("/tickets?status=OPEN")}
|
||||||
sub={`${fmt(data?.subscribers?.total ?? 0)} total · ${fmt(data?.subscribers?.pending ?? 0)} pending`}
|
>
|
||||||
icon={Wifi}
|
<CardContent className="flex items-center gap-3 py-4">
|
||||||
color="#059669"
|
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-amber-50 shrink-0">
|
||||||
isLoading={isLoading}
|
<Ticket className="h-5 w-5 text-amber-600" />
|
||||||
/>
|
|
||||||
<KpiCard
|
|
||||||
label="Revenue This Month"
|
|
||||||
value={peso(data?.revenue?.thisMonth ?? 0)}
|
|
||||||
sub={`Last month: ${peso(data?.revenue?.lastMonth ?? 0)}`}
|
|
||||||
icon={DollarSign}
|
|
||||||
color="#0891B2"
|
|
||||||
isLoading={isLoading}
|
|
||||||
/>
|
|
||||||
<KpiCard
|
|
||||||
label="Overdue Invoices"
|
|
||||||
value={fmt(data?.billing?.overdueInvoices ?? 0)}
|
|
||||||
sub={`${fmt(data?.billing?.unpaidInvoices ?? 0)} unpaid total`}
|
|
||||||
icon={AlertTriangle}
|
|
||||||
color="#DC2626"
|
|
||||||
isLoading={isLoading}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* KPI Row 2 */}
|
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-4 mb-8">
|
|
||||||
<KpiCard
|
|
||||||
label="Open Tickets"
|
|
||||||
value={fmt(data?.support?.openTickets ?? 0)}
|
|
||||||
sub={`${fmt(data?.support?.inProgressTickets ?? 0)} in progress`}
|
|
||||||
icon={Ticket}
|
|
||||||
color="#7C3AED"
|
|
||||||
isLoading={isLoading}
|
|
||||||
/>
|
|
||||||
<KpiCard
|
|
||||||
label="Pending Tasks"
|
|
||||||
value={fmt(data?.tasks?.pending ?? 0)}
|
|
||||||
sub="Manual tasks awaiting action"
|
|
||||||
icon={ClipboardList}
|
|
||||||
color="#D97706"
|
|
||||||
isLoading={isLoading}
|
|
||||||
/>
|
|
||||||
<KpiCard
|
|
||||||
label="Total Clients"
|
|
||||||
value={fmt(data?.subscribers?.total ?? 0)}
|
|
||||||
sub={`${fmt(data?.leads?.new ?? 0)} new leads`}
|
|
||||||
icon={Users}
|
|
||||||
color="#0F172A"
|
|
||||||
isLoading={isLoading}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Quick stats */}
|
|
||||||
<Card className="border shadow-sm">
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle className="text-base font-semibold text-slate-700">Subscriber Breakdown</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
{isLoading ? (
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Skeleton className="h-4 w-full" />
|
|
||||||
<Skeleton className="h-4 w-3/4" />
|
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-gray-500">Open Tickets</p>
|
||||||
|
<p className="text-xl font-bold text-gray-900">{stats?.support.openTickets ?? 0}</p>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card
|
||||||
|
className="cursor-pointer hover:shadow-md transition-shadow"
|
||||||
|
onClick={() => router.push("/tickets?status=IN_PROGRESS")}
|
||||||
|
>
|
||||||
|
<CardContent className="flex items-center gap-3 py-4">
|
||||||
|
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-50 shrink-0">
|
||||||
|
<TrendingUp className="h-5 w-5 text-blue-600" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-gray-500">In-Progress Tickets</p>
|
||||||
|
<p className="text-xl font-bold text-gray-900">{stats?.support.inProgressTickets ?? 0}</p>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card
|
||||||
|
className="cursor-pointer hover:shadow-md transition-shadow"
|
||||||
|
onClick={() => router.push("/tasks")}
|
||||||
|
>
|
||||||
|
<CardContent className="flex items-center gap-3 py-4">
|
||||||
|
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-green-50 shrink-0">
|
||||||
|
<CheckSquare className="h-5 w-5 text-green-600" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-gray-500">Pending Tasks</p>
|
||||||
|
<p className="text-xl font-bold text-gray-900">{stats?.tasks.pending ?? 0}</p>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Revenue Chart */}
|
||||||
|
{!statsLoading && (
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Revenue Overview</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
{hasChartData ? (
|
||||||
|
<ResponsiveContainer width="100%" height={220}>
|
||||||
|
<LineChart data={chartData} margin={{ top: 5, right: 20, left: 0, bottom: 5 }}>
|
||||||
|
<CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
|
||||||
|
<XAxis dataKey="month" tick={{ fontSize: 12 }} />
|
||||||
|
<YAxis tick={{ fontSize: 12 }} tickFormatter={(v: number) => `₱${(v / 1000).toFixed(0)}k`} />
|
||||||
|
<Tooltip formatter={(v) => formatCurrency(Number(v))} />
|
||||||
|
<Legend />
|
||||||
|
<Line
|
||||||
|
type="monotone"
|
||||||
|
dataKey="revenue"
|
||||||
|
stroke="#3b82f6"
|
||||||
|
strokeWidth={2}
|
||||||
|
dot={{ r: 4 }}
|
||||||
|
name="Revenue"
|
||||||
|
/>
|
||||||
|
</LineChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
) : (
|
||||||
|
<div className="flex flex-col items-center justify-center h-32 text-gray-400">
|
||||||
|
<TrendingUp className="h-8 w-8 mb-2 opacity-40" />
|
||||||
|
<p className="text-sm">Revenue data will appear once payments are recorded.</p>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="secondary"
|
||||||
|
className="mt-3"
|
||||||
|
onClick={() => seedMutation.mutate()}
|
||||||
|
isLoading={seedMutation.isPending}
|
||||||
|
>
|
||||||
|
<Database className="h-4 w-4" />
|
||||||
|
Seed Demo Data
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Recent Tickets */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Recent Tickets</CardTitle>
|
||||||
|
<Button size="sm" variant="ghost" onClick={() => router.push("/tickets")}>
|
||||||
|
View all →
|
||||||
|
</Button>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="p-0">
|
||||||
|
{recentTickets.length === 0 ? (
|
||||||
|
<div className="py-10 text-center text-gray-400 text-sm">No tickets yet</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
|
<div className="divide-y divide-gray-50">
|
||||||
{[
|
{recentTickets.map((ticket) => (
|
||||||
{ label: 'Active', value: data?.subscribers?.active ?? 0, color: '#059669' },
|
<div
|
||||||
{ label: 'Pending', value: data?.subscribers?.pending ?? 0, color: '#D97706' },
|
key={ticket.id}
|
||||||
{ label: 'Suspended', value: data?.subscribers?.suspended ?? 0, color: '#DC2626' },
|
className="flex items-center justify-between px-6 py-3 hover:bg-gray-50 cursor-pointer transition-colors"
|
||||||
{ label: 'Total', value: data?.subscribers?.total ?? 0, color: '#0891B2' },
|
onClick={() => router.push("/tickets")}
|
||||||
].map((item) => (
|
>
|
||||||
<div key={item.label} className="text-center p-3 rounded-lg bg-slate-50">
|
<div>
|
||||||
<p className="text-2xl font-bold" style={{ color: item.color }}>
|
<p className="text-sm font-medium text-gray-800">{ticket.subject}</p>
|
||||||
{item.value}
|
<p className="text-xs text-gray-400 mt-0.5">
|
||||||
</p>
|
{ticket.client
|
||||||
<p className="text-xs text-slate-500 mt-1">{item.label}</p>
|
? `${ticket.client.firstName} ${ticket.client.lastName}`
|
||||||
|
: "No client"}{" "}
|
||||||
|
• {formatDateTime(ticket.createdAt)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Badge variant={priorityVariant[ticket.priority] ?? "muted"}>
|
||||||
|
{ticket.priority}
|
||||||
|
</Badge>
|
||||||
|
<Badge variant="muted">{ticket.status}</Badge>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
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>
|
||||||
|
);
|
||||||
|
}
|
||||||
123
app/(app)/tasks/page.tsx
Normal file
123
app/(app)/tasks/page.tsx
Normal file
@@ -0,0 +1,123 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import { useQuery } from "@tanstack/react-query";
|
||||||
|
import { ChevronLeft, ChevronRight, RefreshCw } from "lucide-react";
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } 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 { formatDate } from "@/lib/utils";
|
||||||
|
import api from "@/lib/api";
|
||||||
|
import type { Task, PaginatedResponse } from "@/types";
|
||||||
|
|
||||||
|
const statusVariant: Record<string, "success" | "warning" | "default" | "muted"> = {
|
||||||
|
done: "success",
|
||||||
|
DONE: "success",
|
||||||
|
completed: "success",
|
||||||
|
COMPLETED: "success",
|
||||||
|
in_progress: "default",
|
||||||
|
IN_PROGRESS: "default",
|
||||||
|
pending: "warning",
|
||||||
|
PENDING: "warning",
|
||||||
|
cancelled: "muted",
|
||||||
|
CANCELLED: "muted",
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function TasksPage() {
|
||||||
|
const [page, setPage] = useState(1);
|
||||||
|
|
||||||
|
const { data, isLoading, refetch } = useQuery<PaginatedResponse<Task>>({
|
||||||
|
queryKey: ["tasks", page],
|
||||||
|
queryFn: async () => {
|
||||||
|
const res = await api.get<PaginatedResponse<Task>>(`/api/v1/tasks?page=${page}&limit=20`);
|
||||||
|
return res.data;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const tasks = data?.data ?? [];
|
||||||
|
const meta = data?.meta;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold text-gray-900">Tasks</h1>
|
||||||
|
<p className="text-sm text-gray-500">{meta?.total ?? 0} total tasks</p>
|
||||||
|
</div>
|
||||||
|
<Button size="sm" variant="outline" onClick={() => refetch()}>
|
||||||
|
<RefreshCw className="h-4 w-4" />
|
||||||
|
Refresh
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader><CardTitle>All Tasks</CardTitle></CardHeader>
|
||||||
|
<CardContent className="p-0">
|
||||||
|
<Table>
|
||||||
|
<TableHead>
|
||||||
|
<TableRow>
|
||||||
|
<Th>Title</Th>
|
||||||
|
<Th>Type</Th>
|
||||||
|
<Th>Status</Th>
|
||||||
|
<Th>Assigned To</Th>
|
||||||
|
<Th>Due Date</Th>
|
||||||
|
<Th>Linked Ticket</Th>
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
{isLoading ? (
|
||||||
|
Array.from({ length: 5 }).map((_, i) => (
|
||||||
|
<TableRow key={i}>
|
||||||
|
{Array.from({ length: 6 }).map((_, j) => (
|
||||||
|
<Td key={j}><div className="h-4 w-24 animate-pulse bg-gray-100 rounded" /></Td>
|
||||||
|
))}
|
||||||
|
</TableRow>
|
||||||
|
))
|
||||||
|
) : tasks.length === 0 ? (
|
||||||
|
<EmptyState message="No tasks yet" />
|
||||||
|
) : (
|
||||||
|
tasks.map((task) => (
|
||||||
|
<TableRow key={task.id} className="hover:bg-gray-50 transition-colors">
|
||||||
|
<Td className="font-medium">{task.title}</Td>
|
||||||
|
<Td><Badge variant="muted">{task.type}</Badge></Td>
|
||||||
|
<Td>
|
||||||
|
<Badge variant={statusVariant[task.status] ?? "muted"}>
|
||||||
|
{task.status}
|
||||||
|
</Badge>
|
||||||
|
</Td>
|
||||||
|
<Td className="text-gray-500">
|
||||||
|
{task.assignedUser
|
||||||
|
? `${task.assignedUser.firstName} ${task.assignedUser.lastName}`
|
||||||
|
: task.assignedTo ?? "—"}
|
||||||
|
</Td>
|
||||||
|
<Td className="text-gray-500">
|
||||||
|
{task.dueDate ? formatDate(task.dueDate) : "—"}
|
||||||
|
</Td>
|
||||||
|
<Td className="text-gray-400 text-xs font-mono">
|
||||||
|
{task.ticket?.subject ?? (task.ticketId ? task.ticketId.slice(0, 8) : "—")}
|
||||||
|
</Td>
|
||||||
|
</TableRow>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
|
||||||
|
{meta && meta.totalPages > 1 && (
|
||||||
|
<div className="flex items-center justify-between px-4 py-3 border-t border-gray-100">
|
||||||
|
<p className="text-sm text-gray-500">Page {meta.page} of {meta.totalPages}</p>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button size="sm" variant="outline" disabled={page <= 1} onClick={() => setPage(page - 1)}>
|
||||||
|
<ChevronLeft className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button size="sm" variant="outline" disabled={page >= meta.totalPages} onClick={() => setPage(page + 1)}>
|
||||||
|
<ChevronRight className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
110
app/(app)/users/page.tsx
Normal file
110
app/(app)/users/page.tsx
Normal file
@@ -0,0 +1,110 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useQuery } from "@tanstack/react-query";
|
||||||
|
import { RefreshCw } from "lucide-react";
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } 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 { formatDate } from "@/lib/utils";
|
||||||
|
import api from "@/lib/api";
|
||||||
|
import type { User, UsersResponse } from "@/types";
|
||||||
|
|
||||||
|
export default function UsersPage() {
|
||||||
|
const { data: users, isLoading, refetch } = useQuery<UsersResponse>({
|
||||||
|
queryKey: ["users"],
|
||||||
|
queryFn: async () => {
|
||||||
|
const res = await api.get<UsersResponse>("/api/v1/users?page=1&limit=20");
|
||||||
|
// Handle both array and paginated response
|
||||||
|
const d = res.data;
|
||||||
|
if (Array.isArray(d)) return d;
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
|
const anyD = d as any;
|
||||||
|
if (anyD.data) return anyD.data as UsersResponse;
|
||||||
|
return [];
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const userList: User[] = users ?? [];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold text-gray-900">Users</h1>
|
||||||
|
<p className="text-sm text-gray-500">{userList.length} total users</p>
|
||||||
|
</div>
|
||||||
|
<Button size="sm" variant="outline" onClick={() => refetch()}>
|
||||||
|
<RefreshCw className="h-4 w-4" />
|
||||||
|
Refresh
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader><CardTitle>All Users</CardTitle></CardHeader>
|
||||||
|
<CardContent className="p-0">
|
||||||
|
<Table>
|
||||||
|
<TableHead>
|
||||||
|
<TableRow>
|
||||||
|
<Th>Name</Th>
|
||||||
|
<Th>Email</Th>
|
||||||
|
<Th>Role</Th>
|
||||||
|
<Th>Status</Th>
|
||||||
|
<Th>Last Login</Th>
|
||||||
|
<Th>Joined</Th>
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
{isLoading ? (
|
||||||
|
Array.from({ length: 3 }).map((_, i) => (
|
||||||
|
<TableRow key={i}>
|
||||||
|
{Array.from({ length: 6 }).map((_, j) => (
|
||||||
|
<Td key={j}><div className="h-4 w-24 animate-pulse bg-gray-100 rounded" /></Td>
|
||||||
|
))}
|
||||||
|
</TableRow>
|
||||||
|
))
|
||||||
|
) : userList.length === 0 ? (
|
||||||
|
<EmptyState message="No users found" />
|
||||||
|
) : (
|
||||||
|
userList.map((user) => {
|
||||||
|
const roles = user.roleAssignments?.map((r) => r.role) ?? [];
|
||||||
|
return (
|
||||||
|
<TableRow key={user.id} className="hover:bg-gray-50 transition-colors">
|
||||||
|
<Td className="font-medium">{user.firstName} {user.lastName}</Td>
|
||||||
|
<Td className="text-gray-500">{user.email}</Td>
|
||||||
|
<Td>
|
||||||
|
<div className="flex gap-1 flex-wrap">
|
||||||
|
{roles.length === 0 ? (
|
||||||
|
<Badge variant="muted">No role</Badge>
|
||||||
|
) : (
|
||||||
|
roles.map((role) => (
|
||||||
|
<Badge
|
||||||
|
key={role}
|
||||||
|
variant={role === "ADMIN" ? "default" : role === "TECHNICIAN" ? "success" : "muted"}
|
||||||
|
>
|
||||||
|
{role}
|
||||||
|
</Badge>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Td>
|
||||||
|
<Td>
|
||||||
|
<Badge variant={user.isActive ? "success" : "muted"}>
|
||||||
|
{user.isActive ? "Active" : "Inactive"}
|
||||||
|
</Badge>
|
||||||
|
</Td>
|
||||||
|
<Td className="text-xs text-gray-400">
|
||||||
|
{user.lastLoginAt ? formatDate(user.lastLoginAt) : "Never"}
|
||||||
|
</Td>
|
||||||
|
<Td className="text-xs text-gray-400">{formatDate(user.createdAt)}</Td>
|
||||||
|
</TableRow>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
)}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user