329 lines
12 KiB
TypeScript
329 lines
12 KiB
TypeScript
import { notFound } from "next/navigation";
|
|
import { api } from "~/trpc/server";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
|
|
import { Button } from "~/components/ui/button";
|
|
import { Badge } from "~/components/ui/badge";
|
|
import { PageHeader } from "~/components/layout/page-header";
|
|
import { Separator } from "~/components/ui/separator";
|
|
import Link from "next/link";
|
|
import {
|
|
Edit,
|
|
Mail,
|
|
Phone,
|
|
MapPin,
|
|
Building,
|
|
Calendar,
|
|
DollarSign,
|
|
Globe,
|
|
Hash,
|
|
ArrowLeft,
|
|
} from "lucide-react";
|
|
|
|
interface BusinessDetailPageProps {
|
|
params: Promise<{ id: string }>;
|
|
}
|
|
|
|
export default async function BusinessDetailPage({
|
|
params,
|
|
}: BusinessDetailPageProps) {
|
|
const { id } = await params;
|
|
|
|
const business = await api.businesses.getById({ id });
|
|
|
|
if (!business) {
|
|
notFound();
|
|
}
|
|
|
|
const formatDate = (date: Date) => {
|
|
return new Intl.DateTimeFormat("en-US", {
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric",
|
|
}).format(date);
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6 pb-32">
|
|
<PageHeader
|
|
title={`${business.name}${business.nickname ? ` (${business.nickname})` : ""}`}
|
|
description="View business details and information"
|
|
variant="gradient"
|
|
>
|
|
<Button asChild variant="outline" className="shadow-sm">
|
|
<Link href="/dashboard/businesses">
|
|
<ArrowLeft className="mr-2 h-4 w-4" />
|
|
<span>Back to Businesses</span>
|
|
</Link>
|
|
</Button>
|
|
<Button asChild variant="default" className="shadow-md">
|
|
<Link href={`/dashboard/businesses/${business.id}/edit`}>
|
|
<Edit className="mr-2 h-4 w-4" />
|
|
<span>Edit Business</span>
|
|
</Link>
|
|
</Button>
|
|
</PageHeader>
|
|
|
|
<div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
|
|
{/* Business Information Card */}
|
|
<div className="lg:col-span-2">
|
|
<Card className="bg-card border-border border">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<div className="bg-primary/10 p-2">
|
|
<Building className="text-primary h-5 w-5" />
|
|
</div>
|
|
<span>Business Information</span>
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
{/* Contact Information */}
|
|
<div>
|
|
<h3 className="mb-4 text-lg font-semibold">
|
|
Contact Information
|
|
</h3>
|
|
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
|
{business.email && (
|
|
<div className="flex items-center space-x-3">
|
|
<div className="bg-primary/10 p-2">
|
|
<Mail className="text-primary h-4 w-4" />
|
|
</div>
|
|
<div>
|
|
<p className="text-muted-foreground text-sm font-medium">
|
|
Email
|
|
</p>
|
|
<p className="text-foreground text-sm">
|
|
{business.email}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{business.phone && (
|
|
<div className="flex items-center space-x-3">
|
|
<div className="bg-primary/10 p-2">
|
|
<Phone className="text-primary h-4 w-4" />
|
|
</div>
|
|
<div>
|
|
<p className="text-muted-foreground text-sm font-medium">
|
|
Phone
|
|
</p>
|
|
<p className="text-foreground text-sm">
|
|
{business.phone}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{business.website && (
|
|
<div className="flex items-center space-x-3">
|
|
<div className="bg-primary/10 p-2">
|
|
<Globe className="text-primary h-4 w-4" />
|
|
</div>
|
|
<div>
|
|
<p className="text-muted-foreground text-sm font-medium">
|
|
Website
|
|
</p>
|
|
<a
|
|
href={business.website}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-primary text-sm hover:underline"
|
|
>
|
|
{business.website}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{business.taxId && (
|
|
<div className="flex items-center space-x-3">
|
|
<div className="bg-primary/10 p-2">
|
|
<Hash className="text-primary h-4 w-4" />
|
|
</div>
|
|
<div>
|
|
<p className="text-muted-foreground text-sm font-medium">
|
|
Tax ID
|
|
</p>
|
|
<p className="text-foreground text-sm">
|
|
{business.taxId}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Address */}
|
|
{(business.addressLine1 ?? business.city ?? business.state) && (
|
|
<>
|
|
<Separator />
|
|
<div>
|
|
<h3 className="mb-4 text-lg font-semibold">
|
|
Business Address
|
|
</h3>
|
|
<div className="flex items-start space-x-3">
|
|
<div className="bg-primary/10 p-2">
|
|
<MapPin className="text-primary h-4 w-4" />
|
|
</div>
|
|
<div className="space-y-1 text-sm">
|
|
{business.addressLine1 && (
|
|
<p className="text-foreground">
|
|
{business.addressLine1}
|
|
</p>
|
|
)}
|
|
{business.addressLine2 && (
|
|
<p className="text-foreground">
|
|
{business.addressLine2}
|
|
</p>
|
|
)}
|
|
{(business.city ??
|
|
business.state ??
|
|
business.postalCode) && (
|
|
<p className="text-foreground">
|
|
{[
|
|
business.city,
|
|
business.state,
|
|
business.postalCode,
|
|
]
|
|
.filter(Boolean)
|
|
.join(", ")}
|
|
</p>
|
|
)}
|
|
{business.country && (
|
|
<p className="text-foreground">{business.country}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
<Separator />
|
|
|
|
{/* Business Metadata */}
|
|
<div>
|
|
<h3 className="mb-4 text-lg font-semibold">Business Details</h3>
|
|
<div className="space-y-4">
|
|
<div className="flex items-center space-x-3">
|
|
<div className="bg-primary/10 p-2">
|
|
<Calendar className="text-primary h-4 w-4" />
|
|
</div>
|
|
<div>
|
|
<p className="text-muted-foreground text-sm font-medium">
|
|
Business Added
|
|
</p>
|
|
<p className="text-foreground text-sm">
|
|
{formatDate(business.createdAt)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{business.nickname && (
|
|
<div className="flex items-center space-x-3">
|
|
<div className="bg-primary/10 p-2">
|
|
<Building className="text-primary h-4 w-4" />
|
|
</div>
|
|
<div>
|
|
<div className="flex items-center gap-2">
|
|
<p className="text-muted-foreground text-sm font-medium">
|
|
Nickname
|
|
</p>
|
|
<Badge variant="outline" className="text-xs">
|
|
Internal only
|
|
</Badge>
|
|
</div>
|
|
<p className="text-foreground text-sm">
|
|
{business.nickname}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Default Business Badge */}
|
|
{business.isDefault && (
|
|
<div className="flex items-center space-x-3">
|
|
<div className="bg-primary/10 p-2">
|
|
<Building className="text-primary h-4 w-4" />
|
|
</div>
|
|
<div>
|
|
<p className="text-muted-foreground text-sm font-medium">
|
|
Status
|
|
</p>
|
|
<Badge
|
|
variant="default"
|
|
className="bg-primary/10 text-primary"
|
|
>
|
|
Default Business
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Settings & Actions Card */}
|
|
<div className="space-y-6">
|
|
<Card className="bg-card border-border border">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<div className="bg-primary/10 p-2">
|
|
<Building className="text-primary h-5 w-5" />
|
|
</div>
|
|
<span>Quick Actions</span>
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Button
|
|
asChild
|
|
variant="outline"
|
|
className="w-full justify-start"
|
|
>
|
|
<Link href={`/dashboard/businesses/${business.id}/edit`}>
|
|
<Edit className="mr-2 h-4 w-4" />
|
|
Edit Business
|
|
</Link>
|
|
</Button>
|
|
<Button
|
|
asChild
|
|
variant="outline"
|
|
className="w-full justify-start"
|
|
>
|
|
<Link href="/dashboard/invoices/new">
|
|
<DollarSign className="mr-2 h-4 w-4" />
|
|
Create Invoice
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Information Card */}
|
|
<Card className="bg-card border-border border">
|
|
<CardHeader>
|
|
<CardTitle className="text-lg">About This Business</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-muted-foreground space-y-3 text-sm">
|
|
<p>
|
|
This business profile is used for generating invoices and
|
|
represents your company information to clients.
|
|
</p>
|
|
{business.isDefault && (
|
|
<p className="text-primary">
|
|
This is your default business and will be automatically
|
|
selected when creating new invoices.
|
|
</p>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|