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>
);
} }

208
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,19 +43,24 @@ 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="Business Details" description="View business details and information"
variant="gradient" variant="gradient"
> >
<Link href={`/dashboard/businesses/${business.id}/edit`}> <Button asChild variant="outline" className="shadow-sm">
<Button variant="brand"> <Link href="/dashboard/businesses">
<Edit className="mr-2 h-4 w-4" /> <ArrowLeft className="mr-2 h-4 w-4" />
Edit Business <span>Back to Businesses</span>
</Button>
</Link> </Link>
</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> </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">
@@ -61,52 +68,66 @@ export default async function BusinessDetailPage({
<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">
<Building className="text-icon-blue h-5 w-5" />
</div>
<span>Business Information</span> <span>Business Information</span>
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent className="space-y-6"> <CardContent className="space-y-6">
{/* Basic Info */} {/* Contact Information */}
<div className="grid grid-cols-1 gap-6 md:grid-cols-2"> <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,57 +137,82 @@ 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> <div>
<p className="text-muted text-sm font-medium"> <h3 className="mb-4 text-lg font-semibold">
Address Business Address
</h3>
<div className="flex items-start space-x-3">
<div className="bg-green-subtle rounded-lg p-2">
<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> </p>
</div> )}
</div> {business.addressLine2 && (
<div className="text-accent ml-11 space-y-1 text-sm"> <p className="text-foreground">
{business.addressLine1 && <p>{business.addressLine1}</p>} {business.addressLine2}
{business.addressLine2 && <p>{business.addressLine2}</p>} </p>
)}
{(business.city ?? {(business.city ??
business.state ?? business.state ??
business.postalCode) && ( business.postalCode) && (
<p> <p className="text-foreground">
{[business.city, business.state, business.postalCode] {[
business.city,
business.state,
business.postalCode,
]
.filter(Boolean) .filter(Boolean)
.join(", ")} .join(", ")}
</p> </p>
)} )}
{business.country && <p>{business.country}</p>} {business.country && (
<p className="text-foreground">{business.country}</p>
)}
</div> </div>
</div> </div>
</div>
</>
)} )}
{/* Business Since */} <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="flex items-center space-x-3">
<div className="icon-bg-emerald"> <div className="bg-green-subtle rounded-lg p-2">
<Calendar 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"> <p className="text-muted-foreground text-sm font-medium">
Business Added Business Added
</p> </p>
<p className="text-secondary text-sm"> <p className="text-foreground text-sm">
{formatDate(business.createdAt)} {formatDate(business.createdAt)}
</p> </p>
</div> </div>
@@ -175,85 +221,78 @@ export default async function BusinessDetailPage({
{/* Default Business Badge */} {/* Default Business Badge */}
{business.isDefault && ( {business.isDefault && (
<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" /> <Building 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> 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>
)} )}
</div>
</div>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
{/* Settings & Actions Card */} {/* Settings & Actions Card */}
<div className="space-y-6"> <div className="space-y-6">
<Card className="card-secondary"> <Card className="card-primary">
<CardHeader> <CardHeader>
<CardTitle className="card-title-primary"> <CardTitle className="flex items-center gap-2">
<Building className="h-5 w-5" /> <div className="bg-blue-subtle rounded-lg p-2">
<span>Business Settings</span> <Building className="text-icon-blue h-5 w-5" />
</div>
<span>Quick Actions</span>
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <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"> <div className="space-y-2">
<Link href={`/dashboard/businesses/${business.id}/edit`}>
<Button <Button
asChild
variant="outline" variant="outline"
size="sm"
className="w-full justify-start" className="w-full justify-start"
> >
<Link href={`/dashboard/businesses/${business.id}/edit`}>
<Edit className="mr-2 h-4 w-4" /> <Edit className="mr-2 h-4 w-4" />
Edit Business Edit Business
</Button>
</Link> </Link>
<Link href="/dashboard/invoices/new"> </Button>
<Button <Button
asChild
variant="outline" variant="outline"
size="sm"
className="w-full justify-start" className="w-full justify-start"
> >
<Link href="/dashboard/invoices/new">
<DollarSign className="mr-2 h-4 w-4" /> <DollarSign className="mr-2 h-4 w-4" />
Create Invoice Create Invoice
</Button>
</Link> </Link>
</div> </Button>
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
{/* Information Card */} {/* Information Card */}
<Card className="card-secondary"> <Card className="card-primary">
<CardHeader> <CardHeader>
<CardTitle className="text-accent text-lg"> <CardTitle className="text-lg">About This Business</CardTitle>
About This Business
</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="text-secondary space-y-3 text-sm"> <div className="text-muted-foreground space-y-3 text-sm">
<p> <p>
This business profile is used for generating invoices and This business profile is used for generating invoices and
represents your company information to clients. represents your company information to clients.
</p> </p>
{business.isDefault && ( {business.isDefault && (
<p className="text-icon-emerald"> <p className="text-green-600 dark:text-green-400">
This is your default business and will be automatically This is your default business and will be automatically
selected when creating new invoices. selected when creating new invoices.
</p> </p>
@@ -264,6 +303,5 @@ export default async function BusinessDetailPage({
</div> </div>
</div> </div>
</div> </div>
</div>
); );
} }

17
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>
@@ -189,7 +185,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-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."

22
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>
<Suspense fallback={<DataTableSkeleton columns={6} rows={5} />}>
<BusinessesTable /> <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>

59
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,8 +275,42 @@ 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">
<PageHeader
title={mode === "edit" ? "Edit Business" : "Add Business"}
description={
mode === "edit"
? "Update business information below"
: "Enter business details below to add a new business."
}
variant="gradient"
>
<Button
type="submit"
form="business-form"
disabled={isSubmitting}
className="btn-brand-primary shadow-md"
>
{isSubmitting ? (
<>
<Loader2 className="h-4 w-4 animate-spin sm:mr-2" />
<span className="hidden sm:inline">
{mode === "create" ? "Creating..." : "Saving..."}
</span>
</>
) : (
<>
<Save className="h-4 w-4 sm:mr-2" />
<span className="hidden sm:inline">
{mode === "create" ? "Create Business" : "Save Changes"}
</span>
</>
)}
</Button>
</PageHeader>
<form id="business-form" onSubmit={handleSubmit} className="space-y-6">
{/* Main Form Container - styled like data table */} {/* Main Form Container - styled like data table */}
<div className="space-y-4"> <div className="space-y-4">
{/* Basic Information */} {/* Basic Information */}
@@ -303,7 +338,9 @@ export function BusinessForm({ businessId, mode }: BusinessFormProps) {
<Input <Input
id="name" id="name"
value={formData.name} value={formData.name}
onChange={(e) => handleInputChange("name", e.target.value)} onChange={(e) =>
handleInputChange("name", e.target.value)
}
placeholder={PLACEHOLDERS.name} placeholder={PLACEHOLDERS.name}
className={`${errors.name ? "border-destructive" : ""}`} className={`${errors.name ? "border-destructive" : ""}`}
disabled={isSubmitting} disabled={isSubmitting}
@@ -345,7 +382,9 @@ export function BusinessForm({ businessId, mode }: BusinessFormProps) {
id="email" id="email"
type="email" type="email"
value={formData.email} value={formData.email}
onChange={(e) => handleInputChange("email", e.target.value)} onChange={(e) =>
handleInputChange("email", e.target.value)
}
placeholder={PLACEHOLDERS.email} placeholder={PLACEHOLDERS.email}
className={`${errors.email ? "border-destructive" : ""}`} className={`${errors.email ? "border-destructive" : ""}`}
disabled={isSubmitting} disabled={isSubmitting}
@@ -387,7 +426,9 @@ export function BusinessForm({ businessId, mode }: BusinessFormProps) {
<Input <Input
id="website" id="website"
value={formData.website} value={formData.website}
onChange={(e) => handleInputChange("website", e.target.value)} onChange={(e) =>
handleInputChange("website", e.target.value)
}
placeholder={PLACEHOLDERS.website} placeholder={PLACEHOLDERS.website}
className={`${errors.website ? "border-destructive" : ""}`} className={`${errors.website ? "border-destructive" : ""}`}
disabled={isSubmitting} disabled={isSubmitting}
@@ -465,7 +506,10 @@ export function BusinessForm({ businessId, mode }: BusinessFormProps) {
<CardContent className="space-y-4"> <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="bg-brand-muted border-border/40 flex items-center justify-between rounded-xl border p-4">
<div className="space-y-0.5"> <div className="space-y-0.5">
<Label htmlFor="isDefault" className="text-base font-medium"> <Label
htmlFor="isDefault"
className="text-base font-medium"
>
Default Business Default Business
</Label> </Label>
<p className="text-muted-foreground text-sm"> <p className="text-muted-foreground text-sm">
@@ -485,6 +529,7 @@ export function BusinessForm({ businessId, mode }: BusinessFormProps) {
</Card> </Card>
</div> </div>
</form> </form>
</div>
<FloatingActionBar <FloatingActionBar
leftContent={ leftContent={
@@ -541,6 +586,6 @@ export function BusinessForm({ businessId, mode }: BusinessFormProps) {
)} )}
</Button> </Button>
</FloatingActionBar> </FloatingActionBar>
</div> </>
); );
} }