refactor(forms): update layout and structure of form components

- Adjusted the `SheetContent` width in multiple form components to improve responsiveness.
- Enhanced the `CompanyForm` layout by reorganizing fields for better clarity and usability, including the addition of coordinates input.
- Updated the `CustomerForm` and `SupplierForm` to maintain consistency in design and structure.
- Improved the `DataTable` component's card styling for better visual appeal and user interaction.
- Refined the `QuotesPage` card styling to enhance the user experience when selecting quotes.

src/app/(app)/quotes/page.tsx

@@ -879,7 +879,7 @@ export default function QuotesPage() {
             item.status === "new" ||
             (item.status === "claimed" && item.claimed_by === currentUserId);
           return (
-            <Card className="cursor-pointer border-0 shadow-none" onClick={() => router.push(`/quotes/${item.id}`)}>
+            <Card className="cursor-pointer rounded-b-none border-0 shadow-none ring-0" onClick={() => router.push(`/quotes/${item.id}`)}>
               <CardContent className="p-4">
                 <div className="flex items-start justify-between gap-2">
                   <div className="min-w-0 flex items-center gap-2">

src/components/company-form.tsx

@@ -234,7 +234,7 @@ export function CompanyForm({ open, onOpenChange, company, onSaved }: CompanyFor
 
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent className="w-full sm:max-w-lg p-0 flex flex-col">
+      <SheetContent className="w-full sm:max-w-md p-0 flex flex-col">
         <SheetHeader className="px-6 pt-6 pb-2 border-b shrink-0">
           <SheetTitle className="text-lg flex items-center gap-2">
             <div className="flex h-8 w-8 items-center justify-center rounded-md bg-primary/10 text-primary">
@@ -249,6 +249,7 @@ export function CompanyForm({ open, onOpenChange, company, onSaved }: CompanyFor
 
         <form onSubmit={handleSubmit} className="flex-1 flex flex-col min-h-0">
           <div className="flex-1 overflow-y-auto space-y-6 px-6 py-5">
+            <div className="space-y-4">
               <div>
                 <FieldLabel icon={Building2} label="Company Name *" />
                 <Input
@@ -261,45 +262,6 @@ export function CompanyForm({ open, onOpenChange, company, onSaved }: CompanyFor
                 />
                 <DuplicateWarning matches={duplicateMatches} entityLabel="Company" />
               </div>
-
-            <Separator />
-
-            <div>
-              <FieldLabel icon={MapPin} label="Address" />
-              <Input
-                value={form.address}
-                onChange={(e) => setForm({ ...form, address: e.target.value })}
-                placeholder="Physical or postal address"
-                className="h-9"
-              />
-            </div>
-
-            <Separator />
-
-            <div className="grid grid-cols-2 gap-4">
-              <div>
-                <FieldLabel icon={Mail} label="Email" />
-                <Input
-                  value={form.company_email}
-                  onChange={(e) => setForm({ ...form, company_email: e.target.value })}
-                  type="email"
-                  placeholder="accounts@acme.co.za"
-                  className="h-9"
-                />
-              </div>
-              <div>
-                <FieldLabel icon={Phone} label="Tel" />
-                <Input
-                  value={form.company_tel}
-                  onChange={(e) => setForm({ ...form, company_tel: e.target.value })}
-                  placeholder="e.g. 011 555 0100"
-                  className="h-9"
-                />
-              </div>
-            </div>
-
-            <Separator />
-
               <div>
                 <FieldLabel icon={Hash} label="Vendor Number" />
                 <Input
@@ -309,9 +271,21 @@ export function CompanyForm({ open, onOpenChange, company, onSaved }: CompanyFor
                   className="h-9"
                 />
               </div>
+            </div>
 
             <Separator />
 
+            <div className="space-y-4">
+              <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Location</p>
+              <div>
+                <FieldLabel icon={MapPin} label="Address" />
+                <Input
+                  value={form.address}
+                  onChange={(e) => setForm({ ...form, address: e.target.value })}
+                  placeholder="Physical or postal address"
+                  className="h-9"
+                />
+              </div>
               <div>
                 <FieldLabel icon={MapPin} label="Coordinates" />
                 <div className="grid grid-cols-2 gap-3">
@@ -341,6 +315,34 @@ export function CompanyForm({ open, onOpenChange, company, onSaved }: CompanyFor
               </div>
             </div>
 
+            <Separator />
+
+            <div className="space-y-4">
+              <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Contact</p>
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <FieldLabel icon={Mail} label="Email" />
+                  <Input
+                    value={form.company_email}
+                    onChange={(e) => setForm({ ...form, company_email: e.target.value })}
+                    type="email"
+                    placeholder="accounts@acme.co.za"
+                    className="h-9"
+                  />
+                </div>
+                <div>
+                  <FieldLabel icon={Phone} label="Tel" />
+                  <Input
+                    value={form.company_tel}
+                    onChange={(e) => setForm({ ...form, company_tel: e.target.value })}
+                    placeholder="e.g. 011 555 0100"
+                    className="h-9"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
           <SheetFooter className="border-t px-6 pb-6 pt-4 bg-popover shrink-0">
             <Button type="submit" disabled={loading} className="w-full">
               {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}

src/components/customer-form.tsx

@@ -271,7 +271,7 @@ export function CustomerForm({ open, onOpenChange, customer, onSaved }: Customer
   return (
     <>
       <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent className="w-full sm:max-w-lg p-0 flex flex-col">
+      <SheetContent className="w-full sm:max-w-md p-0 flex flex-col">
         <SheetHeader className="px-6 pt-6 pb-2 border-b shrink-0">
           <SheetTitle className="text-lg flex items-center gap-2">
             <div className="flex h-8 w-8 items-center justify-center rounded-md bg-primary/10 text-primary">

src/components/data-table.tsx

@@ -264,8 +264,9 @@ export function DataTable<T>({
                 <div
                   key={rowKey}
                   className={cn(
+                    "rounded-2xl bg-card text-card-foreground shadow-sm shadow-foreground/5 ring-1 ring-foreground/5 overflow-hidden",
                     mobileCardClassName?.(item),
-                    selected && "ring-1 ring-info/40 rounded-md",
+                    selected && "ring-2 ring-info/40",
                   )}
                   style={mobileCardStyle?.(item)}
                 >

src/components/supplier-form.tsx

@@ -185,7 +185,7 @@ export function SupplierForm({ open, onOpenChange, supplier, onSaved }: Supplier
   return (
     <>
       <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent className="w-full sm:max-w-lg p-0 flex flex-col">
+      <SheetContent className="w-full sm:max-w-md p-0 flex flex-col">
         <SheetHeader className="px-6 pt-6 pb-2 border-b shrink-0">
           <SheetTitle className="text-lg flex items-center gap-2">
             <div className="flex h-8 w-8 items-center justify-center rounded-md bg-primary/10 text-primary">

src/components/ui/sheet.tsx

@@ -53,7 +53,7 @@ function SheetContent({
         data-slot="sheet-content"
         data-side={side}
         className={cn(
-          "fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+          "fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-full data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-full data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:w-3/4 data-[side=right]:sm:w-3/4 data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
           className
         )}
         {...props}