mirror of
https://github.com/soconnor0919/beenvoice.git
synced 2025-12-13 09:34:44 -05:00
Improve business details page layout and styling
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:
@@ -1,24 +1,12 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useParams } from "next/navigation";
|
||||
import { BusinessForm } from "~/components/forms/business-form";
|
||||
import { PageHeader } from "~/components/layout/page-header";
|
||||
|
||||
export default function EditBusinessPage() {
|
||||
const params = useParams();
|
||||
const businessId = Array.isArray(params?.id) ? params.id[0] : params?.id;
|
||||
if (!businessId) return null;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<PageHeader
|
||||
title="Edit Business"
|
||||
description="Update business information below."
|
||||
variant="gradient"
|
||||
/>
|
||||
|
||||
<BusinessForm businessId={businessId} mode="edit" />
|
||||
</div>
|
||||
);
|
||||
return <BusinessForm businessId={businessId} mode="edit" />;
|
||||
}
|
||||
|
||||
@@ -4,6 +4,7 @@ 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,
|
||||
@@ -15,6 +16,7 @@ import {
|
||||
DollarSign,
|
||||
Globe,
|
||||
Hash,
|
||||
ArrowLeft,
|
||||
} from "lucide-react";
|
||||
|
||||
interface BusinessDetailPageProps {
|
||||
@@ -41,72 +43,91 @@ export default async function BusinessDetailPage({
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="mx-auto max-w-4xl space-y-6">
|
||||
<PageHeader
|
||||
title={business.name}
|
||||
description="Business Details"
|
||||
variant="gradient"
|
||||
>
|
||||
<Link href={`/dashboard/businesses/${business.id}/edit`}>
|
||||
<Button variant="brand">
|
||||
<Edit className="mr-2 h-4 w-4" />
|
||||
Edit Business
|
||||
</Button>
|
||||
<div className="space-y-6 pb-32">
|
||||
<PageHeader
|
||||
title={business.name}
|
||||
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>
|
||||
</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">
|
||||
{/* Business Information Card */}
|
||||
<div className="lg:col-span-2">
|
||||
<Card className="card-primary">
|
||||
<CardHeader>
|
||||
<CardTitle className="card-title-success">
|
||||
<Building className="h-5 w-5" />
|
||||
<span>Business Information</span>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* Basic Info */}
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||
<div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
|
||||
{/* Business Information Card */}
|
||||
<div className="lg:col-span-2">
|
||||
<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>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="icon-bg-emerald">
|
||||
<Mail className="text-icon-emerald h-4 w-4" />
|
||||
<div className="bg-green-subtle rounded-lg p-2">
|
||||
<Mail className="text-icon-green h-4 w-4" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-muted text-sm font-medium">Email</p>
|
||||
<p className="text-accent text-sm">{business.email}</p>
|
||||
<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="icon-bg-emerald">
|
||||
<Phone className="text-icon-emerald h-4 w-4" />
|
||||
<div className="bg-green-subtle rounded-lg p-2">
|
||||
<Phone className="text-icon-green h-4 w-4" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-muted text-sm font-medium">Phone</p>
|
||||
<p className="text-accent text-sm">{business.phone}</p>
|
||||
<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="icon-bg-emerald">
|
||||
<Globe className="text-icon-emerald h-4 w-4" />
|
||||
<div className="bg-green-subtle rounded-lg p-2">
|
||||
<Globe className="text-icon-green h-4 w-4" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-muted text-sm font-medium">
|
||||
<p className="text-muted-foreground text-sm font-medium">
|
||||
Website
|
||||
</p>
|
||||
<a
|
||||
href={business.website}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="link-primary text-sm"
|
||||
className="text-primary text-sm hover:underline"
|
||||
>
|
||||
{business.website}
|
||||
</a>
|
||||
@@ -116,152 +137,169 @@ export default async function BusinessDetailPage({
|
||||
|
||||
{business.taxId && (
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="icon-bg-emerald">
|
||||
<Hash className="text-icon-emerald h-4 w-4" />
|
||||
<div className="bg-green-subtle rounded-lg p-2">
|
||||
<Hash className="text-icon-green h-4 w-4" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-muted text-sm font-medium">Tax ID</p>
|
||||
<p className="text-accent text-sm">{business.taxId}</p>
|
||||
<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) && (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center space-x-3">
|
||||
<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>
|
||||
{/* Address */}
|
||||
{(business.addressLine1 ?? business.city ?? business.state) && (
|
||||
<>
|
||||
<Separator />
|
||||
<div>
|
||||
<p className="text-muted text-sm font-medium">
|
||||
Business Added
|
||||
</p>
|
||||
<p className="text-secondary text-sm">
|
||||
{formatDate(business.createdAt)}
|
||||
</p>
|
||||
<h3 className="mb-4 text-lg font-semibold">
|
||||
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>
|
||||
)}
|
||||
{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>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Default Business Badge */}
|
||||
{business.isDefault && (
|
||||
<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="icon-bg-emerald">
|
||||
<Building className="text-icon-emerald h-4 w-4" />
|
||||
<div className="bg-green-subtle rounded-lg p-2">
|
||||
<Calendar className="text-icon-green h-4 w-4" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-muted text-sm font-medium">Status</p>
|
||||
<Badge className="badge-success">Default Business</Badge>
|
||||
<p className="text-muted-foreground text-sm font-medium">
|
||||
Business Added
|
||||
</p>
|
||||
<p className="text-foreground text-sm">
|
||||
{formatDate(business.createdAt)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Settings & Actions Card */}
|
||||
<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>
|
||||
{/* Default Business Badge */}
|
||||
{business.isDefault && (
|
||||
<p className="text-icon-emerald">
|
||||
This is your default business and will be automatically
|
||||
selected when creating new invoices.
|
||||
</p>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="bg-green-subtle rounded-lg p-2">
|
||||
<Building className="text-icon-green h-4 w-4" />
|
||||
</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>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</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>
|
||||
|
||||
@@ -53,11 +53,8 @@ const formatAddress = (business: Business) => {
|
||||
return parts.join(", ") || "—";
|
||||
};
|
||||
|
||||
export function BusinessesDataTable({
|
||||
businesses: initialBusinesses,
|
||||
}: BusinessesDataTableProps) {
|
||||
export function BusinessesDataTable({ businesses }: BusinessesDataTableProps) {
|
||||
const router = useRouter();
|
||||
const [businesses, setBusinesses] = useState(initialBusinesses);
|
||||
const [businessToDelete, setBusinessToDelete] = useState<Business | null>(
|
||||
null,
|
||||
);
|
||||
@@ -67,7 +64,6 @@ export function BusinessesDataTable({
|
||||
const deleteBusinessMutation = api.businesses.delete.useMutation({
|
||||
onSuccess: () => {
|
||||
toast.success("Business deleted successfully");
|
||||
setBusinesses(businesses.filter((b) => b.id !== businessToDelete?.id));
|
||||
setBusinessToDelete(null);
|
||||
void utils.businesses.getAll.invalidate();
|
||||
},
|
||||
@@ -95,8 +91,8 @@ export function BusinessesDataTable({
|
||||
const business = row.original;
|
||||
return (
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="bg-status-info-muted hidden rounded-lg p-2 sm:flex">
|
||||
<Building className="text-status-info h-4 w-4" />
|
||||
<div className="bg-blue-subtle hidden rounded-lg p-2 sm:flex">
|
||||
<Building className="text-icon-blue h-4 w-4" />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="truncate font-medium">{business.name}</p>
|
||||
@@ -186,10 +182,10 @@ export function BusinessesDataTable({
|
||||
return (
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
<Link href={`/dashboard/businesses/${business.id}/edit`}>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-8 w-8 p-0"
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-muted-foreground hover:text-foreground h-8 w-8 p-0"
|
||||
data-action-button="true"
|
||||
>
|
||||
<Pencil className="h-3.5 w-3.5" />
|
||||
@@ -198,7 +194,7 @@ export function BusinessesDataTable({
|
||||
<Button
|
||||
variant="ghost"
|
||||
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"
|
||||
onClick={() => setBusinessToDelete(business)}
|
||||
>
|
||||
@@ -230,7 +226,8 @@ export function BusinessesDataTable({
|
||||
<DialogTitle>Are you sure?</DialogTitle>
|
||||
<DialogDescription>
|
||||
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>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
|
||||
@@ -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} />;
|
||||
}
|
||||
@@ -5,7 +5,7 @@ import { HydrateClient } from "~/trpc/server";
|
||||
|
||||
export default function NewBusinessPage() {
|
||||
return (
|
||||
<div>
|
||||
<div className="space-y-6 pb-32">
|
||||
<PageHeader
|
||||
title="Add Business"
|
||||
description="Enter business details below to add a new business."
|
||||
|
||||
@@ -1,20 +1,28 @@
|
||||
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 { Plus } from "lucide-react";
|
||||
import { BusinessesTable } from "./_components/businesses-table";
|
||||
import { Plus, Building } from "lucide-react";
|
||||
import { BusinessesDataTable } from "./_components/businesses-data-table";
|
||||
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() {
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
title="Businesses"
|
||||
description="Manage your businesses and their information."
|
||||
description="Manage your businesses and their information"
|
||||
variant="gradient"
|
||||
>
|
||||
<Button asChild variant="brand">
|
||||
<Button asChild className="btn-brand-primary shadow-md">
|
||||
<Link href="/dashboard/businesses/new">
|
||||
<Plus className="mr-2 h-5 w-5" />
|
||||
<span>Add Business</span>
|
||||
@@ -23,7 +31,9 @@ export default async function BusinessesPage() {
|
||||
</PageHeader>
|
||||
|
||||
<HydrateClient>
|
||||
<BusinessesTable />
|
||||
<Suspense fallback={<DataTableSkeleton columns={6} rows={5} />}>
|
||||
<BusinessesTable />
|
||||
</Suspense>
|
||||
</HydrateClient>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -8,12 +8,12 @@ export function InvoiceDetailsSkeleton() {
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<Skeleton className="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 h-8 w-48 sm:h-9 sm:w-64" />
|
||||
<Skeleton className="bg-muted/30 mt-1 h-4 w-40 sm:w-48" />
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Skeleton className="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-20 sm:h-9 sm:w-24" />
|
||||
<Skeleton className="bg-muted/30 h-8 w-16 sm:h-9 sm:w-20" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -22,23 +22,23 @@ export function InvoiceDetailsSkeleton() {
|
||||
{/* Left Column */}
|
||||
<div className="space-y-6 lg:col-span-2">
|
||||
{/* Invoice Header Skeleton */}
|
||||
<Card className="shadow-sm">
|
||||
<Card className="card-primary">
|
||||
<CardContent className="p-4 sm:p-6">
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start justify-between gap-6">
|
||||
<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">
|
||||
<Skeleton className="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-6 w-40 sm:h-8 sm:w-48" />
|
||||
<Skeleton className="bg-muted/30 h-5 w-16 sm:h-6" />
|
||||
</div>
|
||||
<div className="space-y-1 sm:space-y-0">
|
||||
<Skeleton className="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-32 sm:h-4 sm:w-40" />
|
||||
<Skeleton className="bg-muted/30 h-3 w-28 sm:hidden sm:h-4 sm:w-36" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-shrink-0 text-right">
|
||||
<Skeleton className="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 h-3 w-20 sm:h-4" />
|
||||
<Skeleton className="bg-muted/30 mt-1 h-6 w-24 sm:h-8 sm:w-28" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -48,20 +48,20 @@ export function InvoiceDetailsSkeleton() {
|
||||
{/* Client & Business Info */}
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
{Array.from({ length: 2 }).map((_, i) => (
|
||||
<Card key={i} className="shadow-sm">
|
||||
<Card key={i} className="card-primary">
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Skeleton className="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-4 w-4 sm:h-5 sm:w-5" />
|
||||
<Skeleton className="bg-muted/30 h-5 w-16 sm:h-6" />
|
||||
</div>
|
||||
</CardHeader>
|
||||
<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">
|
||||
{Array.from({ length: 3 }).map((_, j) => (
|
||||
<div key={j} className="flex items-center gap-3">
|
||||
<Skeleton className="h-8 w-8 rounded-lg" />
|
||||
<Skeleton className="h-4 w-28" />
|
||||
<Skeleton className="bg-muted/30 h-8 w-8 rounded-lg" />
|
||||
<Skeleton className="bg-muted/30 h-4 w-28" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -71,11 +71,11 @@ export function InvoiceDetailsSkeleton() {
|
||||
</div>
|
||||
|
||||
{/* Invoice Items Skeleton */}
|
||||
<Card className="shadow-sm">
|
||||
<Card className="card-primary">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<Skeleton className="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-4 w-4 sm:h-5 sm:w-5" />
|
||||
<Skeleton className="bg-muted/30 h-5 w-28 sm:h-6" />
|
||||
</div>
|
||||
</CardHeader>
|
||||
<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 className="flex items-start justify-between gap-4">
|
||||
<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">
|
||||
<Skeleton className="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="h-3 w-24 sm:hidden sm:h-4 sm:w-28" />
|
||||
<Skeleton className="bg-muted/30 h-3 w-20 sm:h-4 sm:w-24" />
|
||||
<Skeleton className="bg-muted/30 h-3 w-16 sm:hidden sm:h-4 sm:w-20" />
|
||||
<Skeleton className="bg-muted/30 h-3 w-24 sm:hidden sm:h-4 sm:w-28" />
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
@@ -101,17 +101,17 @@ export function InvoiceDetailsSkeleton() {
|
||||
<div className="bg-muted/30 rounded-lg p-4">
|
||||
<div className="space-y-3">
|
||||
<div className="flex justify-between">
|
||||
<Skeleton className="h-4 w-16" />
|
||||
<Skeleton className="h-4 w-20" />
|
||||
<Skeleton className="bg-muted/30 h-4 w-16" />
|
||||
<Skeleton className="bg-muted/30 h-4 w-20" />
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<Skeleton className="h-4 w-20" />
|
||||
<Skeleton className="h-4 w-16" />
|
||||
<Skeleton className="bg-muted/30 h-4 w-20" />
|
||||
<Skeleton className="bg-muted/30 h-4 w-16" />
|
||||
</div>
|
||||
<Separator />
|
||||
<div className="flex justify-between">
|
||||
<Skeleton className="h-5 w-12" />
|
||||
<Skeleton className="h-5 w-24" />
|
||||
<Skeleton className="bg-muted/30 h-5 w-12" />
|
||||
<Skeleton className="bg-muted/30 h-5 w-24" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -119,15 +119,15 @@ export function InvoiceDetailsSkeleton() {
|
||||
</Card>
|
||||
|
||||
{/* Notes */}
|
||||
<Card className="shadow-sm">
|
||||
<Card className="card-primary">
|
||||
<CardHeader>
|
||||
<Skeleton className="h-6 w-16" />
|
||||
<Skeleton className="bg-muted/30 h-6 w-16" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-full" />
|
||||
<Skeleton className="h-4 w-3/4" />
|
||||
<Skeleton className="h-4 w-1/2" />
|
||||
<Skeleton className="bg-muted/30 h-4 w-full" />
|
||||
<Skeleton className="bg-muted/30 h-4 w-3/4" />
|
||||
<Skeleton className="bg-muted/30 h-4 w-1/2" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
@@ -135,16 +135,16 @@ export function InvoiceDetailsSkeleton() {
|
||||
|
||||
{/* Right Column - Actions */}
|
||||
<div className="space-y-6">
|
||||
<Card className="sticky top-6 shadow-sm">
|
||||
<Card className="card-primary sticky top-6">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<Skeleton className="h-5 w-5" />
|
||||
<Skeleton className="h-6 w-16" />
|
||||
<Skeleton className="bg-muted/30 h-5 w-5" />
|
||||
<Skeleton className="bg-muted/30 h-6 w-16" />
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{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>
|
||||
</Card>
|
||||
|
||||
@@ -25,6 +25,7 @@ import { Skeleton } from "~/components/ui/skeleton";
|
||||
import { Switch } from "~/components/ui/switch";
|
||||
import { AddressForm } from "~/components/forms/address-form";
|
||||
import { FloatingActionBar } from "~/components/layout/floating-action-bar";
|
||||
import { PageHeader } from "~/components/layout/page-header";
|
||||
import { api } from "~/trpc/react";
|
||||
import {
|
||||
formatPhoneNumber,
|
||||
@@ -274,217 +275,261 @@ export function BusinessForm({ businessId, mode }: BusinessFormProps) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-6xl pb-32">
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{/* Main Form Container - styled like data table */}
|
||||
<div className="space-y-4">
|
||||
{/* Basic Information */}
|
||||
<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">
|
||||
<Building className="text-brand-light h-5 w-5" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle>Basic Information</CardTitle>
|
||||
<p className="text-muted-foreground mt-1 text-sm">
|
||||
Enter your business details
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name" className="text-sm font-medium">
|
||||
Business Name
|
||||
<span className="text-destructive ml-1">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="name"
|
||||
value={formData.name}
|
||||
onChange={(e) => handleInputChange("name", e.target.value)}
|
||||
placeholder={PLACEHOLDERS.name}
|
||||
className={`${errors.name ? "border-destructive" : ""}`}
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
{errors.name && (
|
||||
<p className="text-destructive text-sm">{errors.name}</p>
|
||||
)}
|
||||
</div>
|
||||
<>
|
||||
<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>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="taxId" className="text-sm font-medium">
|
||||
Tax ID (EIN)
|
||||
<span className="text-muted-foreground ml-1 text-xs font-normal">
|
||||
(Optional)
|
||||
</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>
|
||||
)}
|
||||
<form id="business-form" onSubmit={handleSubmit} className="space-y-6">
|
||||
{/* Main Form Container - styled like data table */}
|
||||
<div className="space-y-4">
|
||||
{/* Basic Information */}
|
||||
<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">
|
||||
<Building className="text-brand-light h-5 w-5" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle>Basic Information</CardTitle>
|
||||
<p className="text-muted-foreground mt-1 text-sm">
|
||||
Enter your business details
|
||||
</p>
|
||||
</div>
|
||||
</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 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"
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name" className="text-sm font-medium">
|
||||
Business Name
|
||||
<span className="text-destructive ml-1">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="name"
|
||||
value={formData.name}
|
||||
onChange={(e) =>
|
||||
handleInputChange("name", e.target.value)
|
||||
}
|
||||
placeholder={PLACEHOLDERS.name}
|
||||
className={`${errors.name ? "border-destructive" : ""}`}
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
<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}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{errors.name && (
|
||||
<p className="text-destructive text-sm">{errors.name}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Settings */}
|
||||
<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 className="space-y-2">
|
||||
<Label htmlFor="taxId" className="text-sm font-medium">
|
||||
Tax ID (EIN)
|
||||
<span className="text-muted-foreground ml-1 text-xs font-normal">
|
||||
(Optional)
|
||||
</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>
|
||||
<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
|
||||
|
||||
<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>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
Set this as your default business for new invoices
|
||||
</p>
|
||||
<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>
|
||||
<Switch
|
||||
id="isDefault"
|
||||
checked={formData.isDefault}
|
||||
onCheckedChange={(checked) =>
|
||||
handleInputChange("isDefault", checked)
|
||||
}
|
||||
disabled={isSubmitting}
|
||||
</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
|
||||
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>
|
||||
</Card>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Settings */}
|
||||
<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
|
||||
leftContent={
|
||||
@@ -541,6 +586,6 @@ export function BusinessForm({ businessId, mode }: BusinessFormProps) {
|
||||
)}
|
||||
</Button>
|
||||
</FloatingActionBar>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user