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

Improve business details page layout and styling

Browse Source 
The changes focus on improving the layout, styling and UX of the
business details pages by:
- Streamlining the edit page layout
- Adding consistent card styling and spacing
- Improving header structure and actions
- Enhancing content organization with separators
- Updating icon styles and colors
- Refining typography and spacing
This commit is contained in:
Sean O'Connor
2025-07-16 13:43:45 -04:00
parent 572a10f30f
commit 4976c13f32
8 changed files with 521 additions and 462 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/app/dashboard/businesses/[id]/edit/page.tsx
View File

@@ -1,24 +1,12 @@
"use client"; "use client";
import Link from "next/link";
import { useParams } from "next/navigation"; import { useParams } from "next/navigation";
import { BusinessForm } from "~/components/forms/business-form"; import { BusinessForm } from "~/components/forms/business-form";
import { PageHeader } from "~/components/layout/page-header";
export default function EditBusinessPage() { export default function EditBusinessPage() {
const params = useParams(); const params = useParams();
const businessId = Array.isArray(params?.id) ? params.id[0] : params?.id; const businessId = Array.isArray(params?.id) ? params.id[0] : params?.id;
if (!businessId) return null; if (!businessId) return null;
return ( return <BusinessForm businessId={businessId} mode="edit" />;
<div>
<PageHeader
title="Edit Business"
description="Update business information below."
variant="gradient"
/>
<BusinessForm businessId={businessId} mode="edit" />
</div>
);
} }

368
src/app/dashboard/businesses/[id]/page.tsx
View File

@@ -4,6 +4,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
import { Button } from "~/components/ui/button"; import { Button } from "~/components/ui/button";
import { Badge } from "~/components/ui/badge"; import { Badge } from "~/components/ui/badge";
import { PageHeader } from "~/components/layout/page-header"; import { PageHeader } from "~/components/layout/page-header";
import { Separator } from "~/components/ui/separator";
import Link from "next/link"; import Link from "next/link";
import { import {
Edit, Edit,
@@ -15,6 +16,7 @@ import {
DollarSign, DollarSign,
Globe, Globe,
Hash, Hash,
ArrowLeft,
} from "lucide-react"; } from "lucide-react";
interface BusinessDetailPageProps { interface BusinessDetailPageProps {
@@ -41,72 +43,91 @@ export default async function BusinessDetailPage({
}; };
return ( return (
<div> <div className="space-y-6 pb-32">
<div className="mx-auto max-w-4xl space-y-6"> <PageHeader
<PageHeader title={business.name}
title={business.name} description="View business details and information"
description="Business Details" variant="gradient"
variant="gradient" >
> <Button asChild variant="outline" className="shadow-sm">
<Link href={`/dashboard/businesses/${business.id}/edit`}> <Link href="/dashboard/businesses">
<Button variant="brand"> <ArrowLeft className="mr-2 h-4 w-4" />
<Edit className="mr-2 h-4 w-4" /> <span>Back to Businesses</span>
Edit Business
</Button>
</Link> </Link>
</PageHeader> </Button>
<Button asChild className="btn-brand-primary 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"> <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
{/* Business Information Card */} {/* Business Information Card */}
<div className="lg:col-span-2"> <div className="lg:col-span-2">
<Card className="card-primary"> <Card className="card-primary">
<CardHeader> <CardHeader>
<CardTitle className="card-title-success"> <CardTitle className="flex items-center gap-2">
<Building className="h-5 w-5" /> <div className="bg-blue-subtle rounded-lg p-2">
<span>Business Information</span> <Building className="text-icon-blue h-5 w-5" />
</CardTitle> </div>
</CardHeader> <span>Business Information</span>
<CardContent className="space-y-6"> </CardTitle>
{/* Basic Info */} </CardHeader>
<div className="grid grid-cols-1 gap-6 md:grid-cols-2"> <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 && ( {business.email && (
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
<div className="icon-bg-emerald"> <div className="bg-green-subtle rounded-lg p-2">
<Mail className="text-icon-emerald h-4 w-4" /> <Mail className="text-icon-green h-4 w-4" />
</div> </div>
<div> <div>
<p className="text-muted text-sm font-medium">Email</p> <p className="text-muted-foreground text-sm font-medium">
<p className="text-accent text-sm">{business.email}</p> Email
</p>
<p className="text-foreground text-sm">
{business.email}
</p>
</div> </div>
</div> </div>
)} )}
{business.phone && ( {business.phone && (
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
<div className="icon-bg-emerald"> <div className="bg-green-subtle rounded-lg p-2">
<Phone className="text-icon-emerald h-4 w-4" /> <Phone className="text-icon-green h-4 w-4" />
</div> </div>
<div> <div>
<p className="text-muted text-sm font-medium">Phone</p> <p className="text-muted-foreground text-sm font-medium">
<p className="text-accent text-sm">{business.phone}</p> Phone
</p>
<p className="text-foreground text-sm">
{business.phone}
</p>
</div> </div>
</div> </div>
)} )}
{business.website && ( {business.website && (
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
<div className="icon-bg-emerald"> <div className="bg-green-subtle rounded-lg p-2">
<Globe className="text-icon-emerald h-4 w-4" /> <Globe className="text-icon-green h-4 w-4" />
</div> </div>
<div> <div>
<p className="text-muted text-sm font-medium"> <p className="text-muted-foreground text-sm font-medium">
Website Website
</p> </p>
<a <a
href={business.website} href={business.website}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="link-primary text-sm" className="text-primary text-sm hover:underline"
> >
{business.website} {business.website}
</a> </a>
@@ -116,152 +137,169 @@ export default async function BusinessDetailPage({
{business.taxId && ( {business.taxId && (
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
<div className="icon-bg-emerald"> <div className="bg-green-subtle rounded-lg p-2">
<Hash className="text-icon-emerald h-4 w-4" /> <Hash className="text-icon-green h-4 w-4" />
</div> </div>
<div> <div>
<p className="text-muted text-sm font-medium">Tax ID</p> <p className="text-muted-foreground text-sm font-medium">
<p className="text-accent text-sm">{business.taxId}</p> Tax ID
</p>
<p className="text-foreground text-sm">
{business.taxId}
</p>
</div> </div>
</div> </div>
)} )}
</div> </div>
</div>
{/* Address */} {/* Address */}
{(business.addressLine1 ?? business.city ?? business.state) && ( {(business.addressLine1 ?? business.city ?? business.state) && (
<div className="space-y-4"> <>
<div className="flex items-center space-x-3"> <Separator />
<div className="icon-bg-emerald">
<MapPin className="text-icon-emerald h-4 w-4" />
</div>
<div>
<p className="text-muted text-sm font-medium">
Address
</p>
</div>
</div>
<div className="text-accent ml-11 space-y-1 text-sm">
{business.addressLine1 && <p>{business.addressLine1}</p>}
{business.addressLine2 && <p>{business.addressLine2}</p>}
{(business.city ??
business.state ??
business.postalCode) && (
<p>
{[business.city, business.state, business.postalCode]
.filter(Boolean)
.join(", ")}
</p>
)}
{business.country && <p>{business.country}</p>}
</div>
</div>
)}
{/* Business Since */}
<div className="flex items-center space-x-3">
<div className="icon-bg-emerald">
<Calendar className="text-icon-emerald h-4 w-4" />
</div>
<div> <div>
<p className="text-muted text-sm font-medium"> <h3 className="mb-4 text-lg font-semibold">
Business Added Business Address
</p> </h3>
<p className="text-secondary text-sm"> <div className="flex items-start space-x-3">
{formatDate(business.createdAt)} <div className="bg-green-subtle rounded-lg p-2">
</p> <MapPin className="text-icon-green 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> </div>
</div> </>
)}
{/* Default Business Badge */} <Separator />
{business.isDefault && (
{/* 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="flex items-center space-x-3">
<div className="icon-bg-emerald"> <div className="bg-green-subtle rounded-lg p-2">
<Building className="text-icon-emerald h-4 w-4" /> <Calendar className="text-icon-green h-4 w-4" />
</div> </div>
<div> <div>
<p className="text-muted text-sm font-medium">Status</p> <p className="text-muted-foreground text-sm font-medium">
<Badge className="badge-success">Default Business</Badge> Business Added
</p>
<p className="text-foreground text-sm">
{formatDate(business.createdAt)}
</p>
</div> </div>
</div> </div>
)}
</CardContent>
</Card>
</div>
{/* Settings & Actions Card */} {/* Default Business Badge */}
<div className="space-y-6">
<Card className="card-secondary">
<CardHeader>
<CardTitle className="card-title-primary">
<Building className="h-5 w-5" />
<span>Business Settings</span>
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div className="text-center">
<p className="text-muted text-sm">Default Business</p>
<p className="text-lg font-semibold">
{business.isDefault ? (
<Badge className="badge-success">Yes</Badge>
) : (
<Badge variant="outline">No</Badge>
)}
</p>
</div>
<div className="space-y-3">
<p className="text-muted text-sm font-medium">
Quick Actions
</p>
<div className="space-y-2">
<Link href={`/dashboard/businesses/${business.id}/edit`}>
<Button
variant="outline"
size="sm"
className="w-full justify-start"
>
<Edit className="mr-2 h-4 w-4" />
Edit Business
</Button>
</Link>
<Link href="/dashboard/invoices/new">
<Button
variant="outline"
size="sm"
className="w-full justify-start"
>
<DollarSign className="mr-2 h-4 w-4" />
Create Invoice
</Button>
</Link>
</div>
</div>
</CardContent>
</Card>
{/* Information Card */}
<Card className="card-secondary">
<CardHeader>
<CardTitle className="text-accent text-lg">
About This Business
</CardTitle>
</CardHeader>
<CardContent>
<div className="text-secondary space-y-3 text-sm">
<p>
This business profile is used for generating invoices and
represents your company information to clients.
</p>
{business.isDefault && ( {business.isDefault && (
<p className="text-icon-emerald"> <div className="flex items-center space-x-3">
This is your default business and will be automatically <div className="bg-green-subtle rounded-lg p-2">
selected when creating new invoices. <Building className="text-icon-green h-4 w-4" />
</p> </div>
<div>
<p className="text-muted-foreground text-sm font-medium">
Status
</p>
<Badge
variant="default"
className="bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
>
Default Business
</Badge>
</div>
</div>
)} )}
</div> </div>
</CardContent> </div>
</Card> </CardContent>
</div> </Card>
</div>
{/* Settings & Actions Card */}
<div className="space-y-6">
<Card className="card-primary">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<div className="bg-blue-subtle rounded-lg p-2">
<Building className="text-icon-blue 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="card-primary">
<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-green-600 dark:text-green-400">
This is your default business and will be automatically
selected when creating new invoices.
</p>
)}
</div>
</CardContent>
</Card>
</div> </div>
</div> </div>
</div> </div>

23
src/app/dashboard/businesses/_components/businesses-data-table.tsx
View File

@@ -53,11 +53,8 @@ const formatAddress = (business: Business) => {
return parts.join(", ") || "—"; return parts.join(", ") || "—";
}; };
export function BusinessesDataTable({ export function BusinessesDataTable({ businesses }: BusinessesDataTableProps) {
businesses: initialBusinesses,
}: BusinessesDataTableProps) {
const router = useRouter(); const router = useRouter();
const [businesses, setBusinesses] = useState(initialBusinesses);
const [businessToDelete, setBusinessToDelete] = useState<Business | null>( const [businessToDelete, setBusinessToDelete] = useState<Business | null>(
null, null,
); );
@@ -67,7 +64,6 @@ export function BusinessesDataTable({
const deleteBusinessMutation = api.businesses.delete.useMutation({ const deleteBusinessMutation = api.businesses.delete.useMutation({
onSuccess: () => { onSuccess: () => {
toast.success("Business deleted successfully"); toast.success("Business deleted successfully");
setBusinesses(businesses.filter((b) => b.id !== businessToDelete?.id));
setBusinessToDelete(null); setBusinessToDelete(null);
void utils.businesses.getAll.invalidate(); void utils.businesses.getAll.invalidate();
}, },
@@ -95,8 +91,8 @@ export function BusinessesDataTable({
const business = row.original; const business = row.original;
return ( return (
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="bg-status-info-muted hidden rounded-lg p-2 sm:flex"> <div className="bg-blue-subtle hidden rounded-lg p-2 sm:flex">
<Building className="text-status-info h-4 w-4" /> <Building className="text-icon-blue h-4 w-4" />
</div> </div>
<div className="min-w-0"> <div className="min-w-0">
<p className="truncate font-medium">{business.name}</p> <p className="truncate font-medium">{business.name}</p>
@@ -186,10 +182,10 @@ export function BusinessesDataTable({
return ( return (
<div className="flex items-center justify-end gap-1"> <div className="flex items-center justify-end gap-1">
<Link href={`/dashboard/businesses/${business.id}/edit`}> <Link href={`/dashboard/businesses/${business.id}/edit`}>
<Button <Button
variant="ghost" variant="ghost"
size="sm" size="sm"
className="h-8 w-8 p-0" className="text-muted-foreground hover:text-foreground h-8 w-8 p-0"
data-action-button="true" data-action-button="true"
> >
<Pencil className="h-3.5 w-3.5" /> <Pencil className="h-3.5 w-3.5" />
@@ -198,7 +194,7 @@ export function BusinessesDataTable({
<Button <Button
variant="ghost" variant="ghost"
size="sm" size="sm"
className="h-8 w-8 p-0" className="text-muted-foreground hover:text-destructive h-8 w-8 p-0"
data-action-button="true" data-action-button="true"
onClick={() => setBusinessToDelete(business)} onClick={() => setBusinessToDelete(business)}
> >
@@ -230,7 +226,8 @@ export function BusinessesDataTable({
<DialogTitle>Are you sure?</DialogTitle> <DialogTitle>Are you sure?</DialogTitle>
<DialogDescription> <DialogDescription>
This action cannot be undone. This will permanently delete the This action cannot be undone. This will permanently delete the
business "{businessToDelete?.name}" and remove all associated data. business "{businessToDelete?.name}" and remove all associated
data.
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<DialogFooter> <DialogFooter>

19
src/app/dashboard/businesses/_components/businesses-table.tsx
View File

@@ -1,19 +0,0 @@
"use client";
import { api } from "~/trpc/react";
import { DataTableSkeleton } from "~/components/data/data-table";
import { BusinessesDataTable } from "./businesses-data-table";
export function BusinessesTable() {
const { data: businesses, isLoading } = api.businesses.getAll.useQuery();
if (isLoading) {
return <DataTableSkeleton columns={6} rows={8} />;
}
if (!businesses) {
return null;
}
return <BusinessesDataTable businesses={businesses} />;
}

2
src/app/dashboard/businesses/new/page.tsx
View File

@@ -5,7 +5,7 @@ import { HydrateClient } from "~/trpc/server";
export default function NewBusinessPage() { export default function NewBusinessPage() {
return ( return (
<div> <div className="space-y-6 pb-32">
<PageHeader <PageHeader
title="Add Business" title="Add Business"
description="Enter business details below to add a new business." description="Enter business details below to add a new business."

24
src/app/dashboard/businesses/page.tsx
View File

@@ -1,20 +1,28 @@
import Link from "next/link"; import Link from "next/link";
import { HydrateClient } from "~/trpc/server"; import { Suspense } from "react";
import { api, HydrateClient } from "~/trpc/server";
import { Button } from "~/components/ui/button"; import { Button } from "~/components/ui/button";
import { Plus } from "lucide-react"; import { Plus, Building } from "lucide-react";
import { BusinessesTable } from "./_components/businesses-table"; import { BusinessesDataTable } from "./_components/businesses-data-table";
import { PageHeader } from "~/components/layout/page-header"; import { PageHeader } from "~/components/layout/page-header";
import { PageContent, PageSection } from "~/components/layout/page-layout"; import { DataTableSkeleton } from "~/components/data/data-table";
// Businesses Table Component
async function BusinessesTable() {
const businesses = await api.businesses.getAll();
return <BusinessesDataTable businesses={businesses} />;
}
export default async function BusinessesPage() { export default async function BusinessesPage() {
return ( return (
<> <>
<PageHeader <PageHeader
title="Businesses" title="Businesses"
description="Manage your businesses and their information." description="Manage your businesses and their information"
variant="gradient" variant="gradient"
> >
<Button asChild variant="brand"> <Button asChild className="btn-brand-primary shadow-md">
<Link href="/dashboard/businesses/new"> <Link href="/dashboard/businesses/new">
<Plus className="mr-2 h-5 w-5" /> <Plus className="mr-2 h-5 w-5" />
<span>Add Business</span> <span>Add Business</span>
@@ -23,7 +31,9 @@ export default async function BusinessesPage() {
</PageHeader> </PageHeader>
<HydrateClient> <HydrateClient>
<BusinessesTable /> <Suspense fallback={<DataTableSkeleton columns={6} rows={5} />}>
<BusinessesTable />
</Suspense>
</HydrateClient> </HydrateClient>
</> </>
); );

80
src/app/dashboard/invoices/[id]/_components/invoice-details-skeleton.tsx
View File

@@ -8,12 +8,12 @@ export function InvoiceDetailsSkeleton() {
{/* Header */} {/* Header */}
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<Skeleton className="h-8 w-48 sm:h-9 sm:w-64" /> <Skeleton className="bg-muted/30 h-8 w-48 sm:h-9 sm:w-64" />
<Skeleton className="mt-1 h-4 w-40 sm:w-48" /> <Skeleton className="bg-muted/30 mt-1 h-4 w-40 sm:w-48" />
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Skeleton className="h-8 w-20 sm:h-9 sm:w-24" /> <Skeleton className="bg-muted/30 h-8 w-20 sm:h-9 sm:w-24" />
<Skeleton className="h-8 w-16 sm:h-9 sm:w-20" /> <Skeleton className="bg-muted/30 h-8 w-16 sm:h-9 sm:w-20" />
</div> </div>
</div> </div>
@@ -22,23 +22,23 @@ export function InvoiceDetailsSkeleton() {
{/* Left Column */} {/* Left Column */}
<div className="space-y-6 lg:col-span-2"> <div className="space-y-6 lg:col-span-2">
{/* Invoice Header Skeleton */} {/* Invoice Header Skeleton */}
<Card className="shadow-sm"> <Card className="card-primary">
<CardContent className="p-4 sm:p-6"> <CardContent className="p-4 sm:p-6">
<div className="space-y-4"> <div className="space-y-4">
<div className="flex items-start justify-between gap-6"> <div className="flex items-start justify-between gap-6">
<div className="min-w-0 flex-1 space-y-2"> <div className="min-w-0 flex-1 space-y-2">
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3"> <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3">
<Skeleton className="h-6 w-40 sm:h-8 sm:w-48" /> <Skeleton className="bg-muted/30 h-6 w-40 sm:h-8 sm:w-48" />
<Skeleton className="h-5 w-16 sm:h-6" /> <Skeleton className="bg-muted/30 h-5 w-16 sm:h-6" />
</div> </div>
<div className="space-y-1 sm:space-y-0"> <div className="space-y-1 sm:space-y-0">
<Skeleton className="h-3 w-32 sm:h-4 sm:w-40" /> <Skeleton className="bg-muted/30 h-3 w-32 sm:h-4 sm:w-40" />
<Skeleton className="h-3 w-28 sm:hidden sm:h-4 sm:w-36" /> <Skeleton className="bg-muted/30 h-3 w-28 sm:hidden sm:h-4 sm:w-36" />
</div> </div>
</div> </div>
<div className="flex-shrink-0 text-right"> <div className="flex-shrink-0 text-right">
<Skeleton className="h-3 w-20 sm:h-4" /> <Skeleton className="bg-muted/30 h-3 w-20 sm:h-4" />
<Skeleton className="mt-1 h-6 w-24 sm:h-8 sm:w-28" /> <Skeleton className="bg-muted/30 mt-1 h-6 w-24 sm:h-8 sm:w-28" />
</div> </div>
</div> </div>
</div> </div>
@@ -48,20 +48,20 @@ export function InvoiceDetailsSkeleton() {
{/* Client & Business Info */} {/* Client & Business Info */}
<div className="grid gap-4 sm:grid-cols-2"> <div className="grid gap-4 sm:grid-cols-2">
{Array.from({ length: 2 }).map((_, i) => ( {Array.from({ length: 2 }).map((_, i) => (
<Card key={i} className="shadow-sm"> <Card key={i} className="card-primary">
<CardHeader className="pb-3"> <CardHeader className="pb-3">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Skeleton className="h-4 w-4 sm:h-5 sm:w-5" /> <Skeleton className="bg-muted/30 h-4 w-4 sm:h-5 sm:w-5" />
<Skeleton className="h-5 w-16 sm:h-6" /> <Skeleton className="bg-muted/30 h-5 w-16 sm:h-6" />
</div> </div>
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
<Skeleton className="h-5 w-32 sm:h-6" /> <Skeleton className="bg-muted/30 h-5 w-32 sm:h-6" />
<div className="space-y-3"> <div className="space-y-3">
{Array.from({ length: 3 }).map((_, j) => ( {Array.from({ length: 3 }).map((_, j) => (
<div key={j} className="flex items-center gap-3"> <div key={j} className="flex items-center gap-3">
<Skeleton className="h-8 w-8 rounded-lg" /> <Skeleton className="bg-muted/30 h-8 w-8 rounded-lg" />
<Skeleton className="h-4 w-28" /> <Skeleton className="bg-muted/30 h-4 w-28" />
</div> </div>
))} ))}
</div> </div>
@@ -71,11 +71,11 @@ export function InvoiceDetailsSkeleton() {
</div> </div>
{/* Invoice Items Skeleton */} {/* Invoice Items Skeleton */}
<Card className="shadow-sm"> <Card className="card-primary">
<CardHeader> <CardHeader>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Skeleton className="h-4 w-4 sm:h-5 sm:w-5" /> <Skeleton className="bg-muted/30 h-4 w-4 sm:h-5 sm:w-5" />
<Skeleton className="h-5 w-28 sm:h-6" /> <Skeleton className="bg-muted/30 h-5 w-28 sm:h-6" />
</div> </div>
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
@@ -83,15 +83,15 @@ export function InvoiceDetailsSkeleton() {
<div key={i} className="space-y-3 rounded-lg border p-4"> <div key={i} className="space-y-3 rounded-lg border p-4">
<div className="flex items-start justify-between gap-4"> <div className="flex items-start justify-between gap-4">
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<Skeleton className="mb-2 h-4 w-full sm:h-5 sm:w-3/4" /> <Skeleton className="bg-muted/30 mb-2 h-4 w-full sm:h-5 sm:w-3/4" />
<div className="space-y-1 sm:space-y-0"> <div className="space-y-1 sm:space-y-0">
<Skeleton className="h-3 w-20 sm:h-4 sm:w-24" /> <Skeleton className="bg-muted/30 h-3 w-20 sm:h-4 sm:w-24" />
<Skeleton className="h-3 w-16 sm:hidden sm:h-4 sm:w-20" /> <Skeleton className="bg-muted/30 h-3 w-16 sm:hidden sm:h-4 sm:w-20" />
<Skeleton className="h-3 w-24 sm:hidden sm:h-4 sm:w-28" /> <Skeleton className="bg-muted/30 h-3 w-24 sm:hidden sm:h-4 sm:w-28" />
</div> </div>
</div> </div>
<div className="flex-shrink-0 text-right"> <div className="flex-shrink-0 text-right">
<Skeleton className="h-4 w-16 sm:h-5 sm:w-20" /> <Skeleton className="bg-muted/30 h-4 w-16 sm:h-5 sm:w-20" />
</div> </div>
</div> </div>
</div> </div>
@@ -101,17 +101,17 @@ export function InvoiceDetailsSkeleton() {
<div className="bg-muted/30 rounded-lg p-4"> <div className="bg-muted/30 rounded-lg p-4">
<div className="space-y-3"> <div className="space-y-3">
<div className="flex justify-between"> <div className="flex justify-between">
<Skeleton className="h-4 w-16" /> <Skeleton className="bg-muted/30 h-4 w-16" />
<Skeleton className="h-4 w-20" /> <Skeleton className="bg-muted/30 h-4 w-20" />
</div> </div>
<div className="flex justify-between"> <div className="flex justify-between">
<Skeleton className="h-4 w-20" /> <Skeleton className="bg-muted/30 h-4 w-20" />
<Skeleton className="h-4 w-16" /> <Skeleton className="bg-muted/30 h-4 w-16" />
</div> </div>
<Separator /> <Separator />
<div className="flex justify-between"> <div className="flex justify-between">
<Skeleton className="h-5 w-12" /> <Skeleton className="bg-muted/30 h-5 w-12" />
<Skeleton className="h-5 w-24" /> <Skeleton className="bg-muted/30 h-5 w-24" />
</div> </div>
</div> </div>
</div> </div>
@@ -119,15 +119,15 @@ export function InvoiceDetailsSkeleton() {
</Card> </Card>
{/* Notes */} {/* Notes */}
<Card className="shadow-sm"> <Card className="card-primary">
<CardHeader> <CardHeader>
<Skeleton className="h-6 w-16" /> <Skeleton className="bg-muted/30 h-6 w-16" />
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="space-y-2"> <div className="space-y-2">
<Skeleton className="h-4 w-full" /> <Skeleton className="bg-muted/30 h-4 w-full" />
<Skeleton className="h-4 w-3/4" /> <Skeleton className="bg-muted/30 h-4 w-3/4" />
<Skeleton className="h-4 w-1/2" /> <Skeleton className="bg-muted/30 h-4 w-1/2" />
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
@@ -135,16 +135,16 @@ export function InvoiceDetailsSkeleton() {
{/* Right Column - Actions */} {/* Right Column - Actions */}
<div className="space-y-6"> <div className="space-y-6">
<Card className="sticky top-6 shadow-sm"> <Card className="card-primary sticky top-6">
<CardHeader> <CardHeader>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Skeleton className="h-5 w-5" /> <Skeleton className="bg-muted/30 h-5 w-5" />
<Skeleton className="h-6 w-16" /> <Skeleton className="bg-muted/30 h-6 w-16" />
</div> </div>
</CardHeader> </CardHeader>
<CardContent className="space-y-3"> <CardContent className="space-y-3">
{Array.from({ length: 3 }).map((_, i) => ( {Array.from({ length: 3 }).map((_, i) => (
<Skeleton key={i} className="h-10 w-full" /> <Skeleton key={i} className="bg-muted/30 h-10 w-full" />
))} ))}
</CardContent> </CardContent>
</Card> </Card>

453
src/components/forms/business-form.tsx
View File

@@ -25,6 +25,7 @@ import { Skeleton } from "~/components/ui/skeleton";
import { Switch } from "~/components/ui/switch"; import { Switch } from "~/components/ui/switch";
import { AddressForm } from "~/components/forms/address-form"; import { AddressForm } from "~/components/forms/address-form";
import { FloatingActionBar } from "~/components/layout/floating-action-bar"; import { FloatingActionBar } from "~/components/layout/floating-action-bar";
import { PageHeader } from "~/components/layout/page-header";
import { api } from "~/trpc/react"; import { api } from "~/trpc/react";
import { import {
formatPhoneNumber, formatPhoneNumber,
@@ -274,217 +275,261 @@ export function BusinessForm({ businessId, mode }: BusinessFormProps) {
} }
return ( return (
<div className="mx-auto max-w-6xl pb-32"> <>
<form onSubmit={handleSubmit} className="space-y-6"> <div className="space-y-6 pb-32">
{/* Main Form Container - styled like data table */} <PageHeader
<div className="space-y-4"> title={mode === "edit" ? "Edit Business" : "Add Business"}
{/* Basic Information */} description={
<Card className="card-primary"> mode === "edit"
<CardHeader> ? "Update business information below"
<div className="flex items-center gap-3"> : "Enter business details below to add a new business."
<div className="bg-brand-muted flex h-10 w-10 items-center justify-center rounded-lg"> }
<Building className="text-brand-light h-5 w-5" /> variant="gradient"
</div> >
<div> <Button
<CardTitle>Basic Information</CardTitle> type="submit"
<p className="text-muted-foreground mt-1 text-sm"> form="business-form"
Enter your business details disabled={isSubmitting}
</p> className="btn-brand-primary shadow-md"
</div> >
</div> {isSubmitting ? (
</CardHeader> <>
<CardContent className="space-y-4"> <Loader2 className="h-4 w-4 animate-spin sm:mr-2" />
<div className="grid gap-4 sm:grid-cols-2"> <span className="hidden sm:inline">
<div className="space-y-2"> {mode === "create" ? "Creating..." : "Saving..."}
<Label htmlFor="name" className="text-sm font-medium"> </span>
Business Name </>
<span className="text-destructive ml-1">*</span> ) : (
</Label> <>
<Input <Save className="h-4 w-4 sm:mr-2" />
id="name" <span className="hidden sm:inline">
value={formData.name} {mode === "create" ? "Create Business" : "Save Changes"}
onChange={(e) => handleInputChange("name", e.target.value)} </span>
placeholder={PLACEHOLDERS.name} </>
className={`${errors.name ? "border-destructive" : ""}`} )}
disabled={isSubmitting} </Button>
/> </PageHeader>
{errors.name && (
<p className="text-destructive text-sm">{errors.name}</p>
)}
</div>
<div className="space-y-2"> <form id="business-form" onSubmit={handleSubmit} className="space-y-6">
<Label htmlFor="taxId" className="text-sm font-medium"> {/* Main Form Container - styled like data table */}
Tax ID (EIN) <div className="space-y-4">
<span className="text-muted-foreground ml-1 text-xs font-normal"> {/* Basic Information */}
(Optional) <Card className="card-primary">
</span> <CardHeader>
</Label> <div className="flex items-center gap-3">
<Input <div className="bg-brand-muted flex h-10 w-10 items-center justify-center rounded-lg">
id="taxId" <Building className="text-brand-light h-5 w-5" />
value={formData.taxId} </div>
onChange={(e) => handleTaxIdChange(e.target.value)} <div>
placeholder={PLACEHOLDERS.taxId} <CardTitle>Basic Information</CardTitle>
className={`${errors.taxId ? "border-destructive" : ""}`} <p className="text-muted-foreground mt-1 text-sm">
disabled={isSubmitting} Enter your business details
maxLength={10} </p>
/> </div>
{errors.taxId && (
<p className="text-destructive text-sm">{errors.taxId}</p>
)}
</div> </div>
</CardHeader>
<div className="space-y-2"> <CardContent className="space-y-4">
<Label htmlFor="email" className="text-sm font-medium"> <div className="grid gap-4 sm:grid-cols-2">
Email <div className="space-y-2">
<span className="text-muted-foreground ml-1 text-xs font-normal"> <Label htmlFor="name" className="text-sm font-medium">
(Optional) Business Name
</span> <span className="text-destructive ml-1">*</span>
</Label> </Label>
<Input <Input
id="email" id="name"
type="email" value={formData.name}
value={formData.email} onChange={(e) =>
onChange={(e) => handleInputChange("email", e.target.value)} handleInputChange("name", e.target.value)
placeholder={PLACEHOLDERS.email} }
className={`${errors.email ? "border-destructive" : ""}`} placeholder={PLACEHOLDERS.name}
disabled={isSubmitting} className={`${errors.name ? "border-destructive" : ""}`}
/> disabled={isSubmitting}
{errors.email && (
<p className="text-destructive text-sm">{errors.email}</p>
)}
</div>
<div className="space-y-2">
<Label htmlFor="phone" className="text-sm font-medium">
Phone
<span className="text-muted-foreground ml-1 text-xs font-normal">
(Optional)
</span>
</Label>
<Input
id="phone"
type="tel"
value={formData.phone}
onChange={(e) => handlePhoneChange(e.target.value)}
placeholder={PLACEHOLDERS.phone}
className={`${errors.phone ? "border-destructive" : ""}`}
disabled={isSubmitting}
/>
{errors.phone && (
<p className="text-destructive text-sm">{errors.phone}</p>
)}
</div>
</div>
<div className="space-y-2">
<Label htmlFor="website" className="text-sm font-medium">
Website
<span className="text-muted-foreground ml-1 text-xs font-normal">
(Optional)
</span>
</Label>
<Input
id="website"
value={formData.website}
onChange={(e) => handleInputChange("website", e.target.value)}
placeholder={PLACEHOLDERS.website}
className={`${errors.website ? "border-destructive" : ""}`}
disabled={isSubmitting}
/>
{errors.website && (
<p className="text-destructive text-sm">{errors.website}</p>
)}
</div>
</CardContent>
</Card>
{/* Address */}
<Card className="card-primary">
<CardHeader>
<div className="flex items-center gap-3">
<div className="bg-brand-muted flex h-10 w-10 items-center justify-center rounded-lg">
<svg
className="text-brand-light h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
/> />
<path {errors.name && (
strokeLinecap="round" <p className="text-destructive text-sm">{errors.name}</p>
strokeLinejoin="round" )}
strokeWidth={2} </div>
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
</div>
<div>
<CardTitle>Business Address</CardTitle>
<p className="text-muted-foreground mt-1 text-sm">
Your business location
</p>
</div>
</div>
</CardHeader>
<CardContent>
<AddressForm
addressLine1={formData.addressLine1}
addressLine2={formData.addressLine2}
city={formData.city}
state={formData.state}
postalCode={formData.postalCode}
country={formData.country}
onChange={handleInputChange}
errors={errors}
required={false}
/>
</CardContent>
</Card>
{/* Settings */} <div className="space-y-2">
<Card className="card-primary"> <Label htmlFor="taxId" className="text-sm font-medium">
<CardHeader> Tax ID (EIN)
<div className="flex items-center gap-3"> <span className="text-muted-foreground ml-1 text-xs font-normal">
<div className="bg-brand-muted flex h-10 w-10 items-center justify-center rounded-lg"> (Optional)
<Star className="text-brand-light h-5 w-5" /> </span>
</Label>
<Input
id="taxId"
value={formData.taxId}
onChange={(e) => handleTaxIdChange(e.target.value)}
placeholder={PLACEHOLDERS.taxId}
className={`${errors.taxId ? "border-destructive" : ""}`}
disabled={isSubmitting}
maxLength={10}
/>
{errors.taxId && (
<p className="text-destructive text-sm">{errors.taxId}</p>
)}
</div>
<div className="space-y-2">
<Label htmlFor="email" className="text-sm font-medium">
Email
<span className="text-muted-foreground ml-1 text-xs font-normal">
(Optional)
</span>
</Label>
<Input
id="email"
type="email"
value={formData.email}
onChange={(e) =>
handleInputChange("email", e.target.value)
}
placeholder={PLACEHOLDERS.email}
className={`${errors.email ? "border-destructive" : ""}`}
disabled={isSubmitting}
/>
{errors.email && (
<p className="text-destructive text-sm">{errors.email}</p>
)}
</div>
<div className="space-y-2">
<Label htmlFor="phone" className="text-sm font-medium">
Phone
<span className="text-muted-foreground ml-1 text-xs font-normal">
(Optional)
</span>
</Label>
<Input
id="phone"
type="tel"
value={formData.phone}
onChange={(e) => handlePhoneChange(e.target.value)}
placeholder={PLACEHOLDERS.phone}
className={`${errors.phone ? "border-destructive" : ""}`}
disabled={isSubmitting}
/>
{errors.phone && (
<p className="text-destructive text-sm">{errors.phone}</p>
)}
</div>
</div> </div>
<div>
<CardTitle>Settings</CardTitle> <div className="space-y-2">
<p className="text-muted-foreground mt-1 text-sm"> <Label htmlFor="website" className="text-sm font-medium">
Configure business preferences Website
</p> <span className="text-muted-foreground ml-1 text-xs font-normal">
</div> (Optional)
</div> </span>
</CardHeader>
<CardContent className="space-y-4">
<div className="bg-brand-muted border-border/40 flex items-center justify-between rounded-xl border p-4">
<div className="space-y-0.5">
<Label htmlFor="isDefault" className="text-base font-medium">
Default Business
</Label> </Label>
<p className="text-muted-foreground text-sm"> <Input
Set this as your default business for new invoices id="website"
</p> value={formData.website}
onChange={(e) =>
handleInputChange("website", e.target.value)
}
placeholder={PLACEHOLDERS.website}
className={`${errors.website ? "border-destructive" : ""}`}
disabled={isSubmitting}
/>
{errors.website && (
<p className="text-destructive text-sm">{errors.website}</p>
)}
</div> </div>
<Switch </CardContent>
id="isDefault" </Card>
checked={formData.isDefault}
onCheckedChange={(checked) => {/* Address */}
handleInputChange("isDefault", checked) <Card className="card-primary">
} <CardHeader>
disabled={isSubmitting} <div className="flex items-center gap-3">
<div className="bg-brand-muted flex h-10 w-10 items-center justify-center rounded-lg">
<svg
className="text-brand-light h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
/>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
</div>
<div>
<CardTitle>Business Address</CardTitle>
<p className="text-muted-foreground mt-1 text-sm">
Your business location
</p>
</div>
</div>
</CardHeader>
<CardContent>
<AddressForm
addressLine1={formData.addressLine1}
addressLine2={formData.addressLine2}
city={formData.city}
state={formData.state}
postalCode={formData.postalCode}
country={formData.country}
onChange={handleInputChange}
errors={errors}
required={false}
/> />
</div> </CardContent>
</CardContent> </Card>
</Card>
</div> {/* Settings */}
</form> <Card className="card-primary">
<CardHeader>
<div className="flex items-center gap-3">
<div className="bg-brand-muted flex h-10 w-10 items-center justify-center rounded-lg">
<Star className="text-brand-light h-5 w-5" />
</div>
<div>
<CardTitle>Settings</CardTitle>
<p className="text-muted-foreground mt-1 text-sm">
Configure business preferences
</p>
</div>
</div>
</CardHeader>
<CardContent className="space-y-4">
<div className="bg-brand-muted border-border/40 flex items-center justify-between rounded-xl border p-4">
<div className="space-y-0.5">
<Label
htmlFor="isDefault"
className="text-base font-medium"
>
Default Business
</Label>
<p className="text-muted-foreground text-sm">
Set this as your default business for new invoices
</p>
</div>
<Switch
id="isDefault"
checked={formData.isDefault}
onCheckedChange={(checked) =>
handleInputChange("isDefault", checked)
}
disabled={isSubmitting}
/>
</div>
</CardContent>
</Card>
</div>
</form>
</div>
<FloatingActionBar <FloatingActionBar
leftContent={ leftContent={
@@ -541,6 +586,6 @@ export function BusinessForm({ businessId, mode }: BusinessFormProps) {
)} )}
</Button> </Button>
</FloatingActionBar> </FloatingActionBar>
</div> </>
); );
} }