soconnor/beenvoice
1
0
Fork 0
mirror of https://github.com/soconnor0919/beenvoice.git synced 2025-12-14 10:04:44 -05:00
Code Issues Packages Projects Releases Wiki Activity

Begin dark mode!

Browse Source
This commit is contained in:
Sean O'Connor
2025-07-12 21:46:26 -04:00
parent 07f190bce2
commit fa4bd886b3
23 changed files with 2189 additions and 1030 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
src/app/dashboard/clients/[id]/page.tsx
View File

@@ -4,17 +4,27 @@ import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
import { Button } from "~/components/ui/button";
import { Badge } from "~/components/ui/badge";
import Link from "next/link";
import { Edit, Mail, Phone, MapPin, Building, Calendar, DollarSign } from "lucide-react";
import {
Edit,
Mail,
Phone,
MapPin,
Building,
Calendar,
DollarSign,
} from "lucide-react";
interface ClientDetailPageProps {
params: Promise<{ id: string }>;
}
export default async function ClientDetailPage({ params }: ClientDetailPageProps) {
export default async function ClientDetailPage({
params,
}: ClientDetailPageProps) {
const { id } = await params;
const client = await api.clients.getById({ id });
if (!client) {
notFound();
}
@@ -34,20 +44,26 @@ export default async function ClientDetailPage({ params }: ClientDetailPageProps
}).format(amount);
};
const totalInvoiced = client.invoices?.reduce((sum, invoice) => sum + invoice.totalAmount, 0) || 0;
const paidInvoices = client.invoices?.filter(invoice => invoice.status === "paid").length || 0;
const pendingInvoices = client.invoices?.filter(invoice => invoice.status === "sent").length || 0;
const totalInvoiced =
client.invoices?.reduce((sum, invoice) => sum + invoice.totalAmount, 0) ||
0;
const paidInvoices =
client.invoices?.filter((invoice) => invoice.status === "paid").length || 0;
const pendingInvoices =
client.invoices?.filter((invoice) => invoice.status === "sent").length || 0;
return (
<div className="p-4 md:p-6 md:ml-72 md:mr-4">
<div className="max-w-4xl mx-auto space-y-6">
<div className="p-4 md:mr-4 md:ml-72 md:p-6">
<div className="mx-auto max-w-4xl space-y-6">
{/* Header */}
<div className="flex items-center justify-between">
<div>
<h1 className="text-3xl font-bold bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent">
<h1 className="bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-3xl font-bold text-transparent">
{client.name}
</h1>
<p className="text-muted-foreground">Client Details</p>
<p className="text-muted-foreground dark:text-gray-300">
Client Details
</p>
</div>
<Link href={`/clients/${client.id}/edit`}>
<Button className="bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-700 hover:to-teal-700">
@@ -57,39 +73,47 @@ export default async function ClientDetailPage({ params }: ClientDetailPageProps
</Link>
</div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
{/* Client Information Card */}
<div className="lg:col-span-2">
<Card className="shadow-xl border-0 bg-white/80 backdrop-blur-sm">
<Card className="border-0 bg-white/80 shadow-xl backdrop-blur-sm dark:bg-gray-800/80">
<CardHeader>
<CardTitle className="flex items-center space-x-2 text-emerald-700">
<CardTitle className="flex items-center space-x-2 text-emerald-700 dark:text-emerald-400">
<Building className="h-5 w-5" />
<span>Contact Information</span>
</CardTitle>
</CardHeader>
<CardContent className="space-y-6">
{/* Basic Info */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
{client.email && (
<div className="flex items-center space-x-3">
<div className="p-2 bg-emerald-100 rounded-lg">
<div className="rounded-lg bg-emerald-100 p-2 dark:bg-emerald-900/30">
<Mail className="h-4 w-4 text-emerald-600" />
</div>
<div>
<p className="text-sm font-medium text-gray-500">Email</p>
<p className="text-sm">{client.email}</p>
<p className="text-sm font-medium text-gray-500 dark:text-gray-400">
Email
</p>
<p className="text-sm dark:text-gray-300">
{client.email}
</p>
</div>
</div>
)}
{client.phone && (
<div className="flex items-center space-x-3">
<div className="p-2 bg-emerald-100 rounded-lg">
<div className="rounded-lg bg-emerald-100 p-2 dark:bg-emerald-900/30">
<Phone className="h-4 w-4 text-emerald-600" />
</div>
<div>
<p className="text-sm font-medium text-gray-500">Phone</p>
<p className="text-sm">{client.phone}</p>
<p className="text-sm font-medium text-gray-500 dark:text-gray-400">
Phone
</p>
<p className="text-sm dark:text-gray-300">
{client.phone}
</p>
</div>
</div>
)}
@@ -99,19 +123,23 @@ export default async function ClientDetailPage({ params }: ClientDetailPageProps
{(client.addressLine1 ?? client.city ?? client.state) && (
<div className="space-y-4">
<div className="flex items-center space-x-3">
<div className="p-2 bg-emerald-100 rounded-lg">
<div className="rounded-lg bg-emerald-100 p-2 dark:bg-emerald-900/30">
<MapPin className="h-4 w-4 text-emerald-600" />
</div>
<div>
<p className="text-sm font-medium text-gray-500">Address</p>
<p className="text-sm font-medium text-gray-500 dark:text-gray-400">
Address
</p>
</div>
</div>
<div className="ml-11 space-y-1 text-sm">
<div className="ml-11 space-y-1 text-sm dark:text-gray-300">
{client.addressLine1 && <p>{client.addressLine1}</p>}
{client.addressLine2 && <p>{client.addressLine2}</p>}
{(client.city ?? client.state ?? client.postalCode) && (
<p>
{[client.city, client.state, client.postalCode].filter(Boolean).join(", ")}
{[client.city, client.state, client.postalCode]
.filter(Boolean)
.join(", ")}
</p>
)}
{client.country && <p>{client.country}</p>}
@@ -121,12 +149,16 @@ export default async function ClientDetailPage({ params }: ClientDetailPageProps
{/* Client Since */}
<div className="flex items-center space-x-3">
<div className="p-2 bg-emerald-100 rounded-lg">
<div className="rounded-lg bg-emerald-100 p-2 dark:bg-emerald-900/30">
<Calendar className="h-4 w-4 text-emerald-600" />
</div>
<div>
<p className="text-sm font-medium text-gray-500">Client Since</p>
<p className="text-sm">{formatDate(client.createdAt)}</p>
<p className="text-sm font-medium text-gray-500 dark:text-gray-400">
Client Since
</p>
<p className="text-sm dark:text-gray-300">
{formatDate(client.createdAt)}
</p>
</div>
</div>
</CardContent>
@@ -135,9 +167,9 @@ export default async function ClientDetailPage({ params }: ClientDetailPageProps
{/* Stats Card */}
<div className="space-y-6">
<Card className="shadow-xl border-0 bg-white/80 backdrop-blur-sm">
<Card className="border-0 bg-white/80 shadow-xl backdrop-blur-sm dark:bg-gray-800/80">
<CardHeader>
<CardTitle className="flex items-center space-x-2 text-emerald-700">
<CardTitle className="flex items-center space-x-2 text-emerald-700 dark:text-emerald-400">
<DollarSign className="h-5 w-5" />
<span>Invoice Summary</span>
</CardTitle>
@@ -147,17 +179,27 @@ export default async function ClientDetailPage({ params }: ClientDetailPageProps
<p className="text-2xl font-bold text-emerald-600">
{formatCurrency(totalInvoiced)}
</p>
<p className="text-sm text-gray-500">Total Invoiced</p>
<p className="text-sm text-gray-500 dark:text-gray-400">
Total Invoiced
</p>
</div>
<div className="grid grid-cols-2 gap-4">
<div className="text-center">
<p className="text-lg font-semibold text-green-600">{paidInvoices}</p>
<p className="text-xs text-gray-500">Paid</p>
<p className="text-lg font-semibold text-green-600">
{paidInvoices}
</p>
<p className="text-xs text-gray-500 dark:text-gray-400">
Paid
</p>
</div>
<div className="text-center">
<p className="text-lg font-semibold text-orange-600">{pendingInvoices}</p>
<p className="text-xs text-gray-500">Pending</p>
<p className="text-lg font-semibold text-orange-600">
{pendingInvoices}
</p>
<p className="text-xs text-gray-500 dark:text-gray-400">
Pending
</p>
</div>
</div>
</CardContent>
@@ -165,24 +207,38 @@ export default async function ClientDetailPage({ params }: ClientDetailPageProps
{/* Recent Invoices */}
{client.invoices && client.invoices.length > 0 && (
<Card className="shadow-xl border-0 bg-white/80 backdrop-blur-sm">
<Card className="border-0 bg-white/80 shadow-xl backdrop-blur-sm dark:bg-gray-800/80">
<CardHeader>
<CardTitle className="text-lg">Recent Invoices</CardTitle>
<CardTitle className="text-lg dark:text-white">
Recent Invoices
</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-3">
{client.invoices.slice(0, 3).map((invoice) => (
<div key={invoice.id} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
<div
key={invoice.id}
className="flex items-center justify-between rounded-lg bg-gray-50 p-3 dark:bg-gray-700"
>
<div>
<p className="font-medium text-sm">{invoice.invoiceNumber}</p>
<p className="text-xs text-gray-500">{formatDate(invoice.issueDate)}</p>
<p className="text-sm font-medium dark:text-white">
{invoice.invoiceNumber}
</p>
<p className="text-xs text-gray-500 dark:text-gray-400">
{formatDate(invoice.issueDate)}
</p>
</div>
<div className="text-right">
<p className="font-medium text-sm">{formatCurrency(invoice.totalAmount)}</p>
<Badge
<p className="text-sm font-medium dark:text-white">
{formatCurrency(invoice.totalAmount)}
</p>
<Badge
variant={
invoice.status === "paid" ? "default" :
invoice.status === "sent" ? "secondary" : "outline"
invoice.status === "paid"
? "default"
: invoice.status === "sent"
? "secondary"
: "outline"
}
className="text-xs"
>
@@ -200,4 +256,4 @@ export default async function ClientDetailPage({ params }: ClientDetailPageProps
</div>
</div>
);
}
}