Unify entities navigation, redesign time clock, and add invoice PDF preview.

Combine clients and businesses under entities, polish the web time clock,
and show live invoice PDF preview with tighter line-item editing.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/components/forms/business-form.tsx

@@ -338,7 +338,7 @@ export function BusinessForm({ businessId, mode }: BusinessFormProps) {
         }
 
         toast.success("Business created successfully");
-        router.push("/dashboard/businesses");
+        router.push("/dashboard/entities?tab=businesses");
       } else {
         // Update business data (excluding email config fields)
         const businessData = {
@@ -386,7 +386,7 @@ export function BusinessForm({ businessId, mode }: BusinessFormProps) {
         }
 
         toast.success("Business updated successfully");
-        router.push("/dashboard/businesses");
+        router.push("/dashboard/entities?tab=businesses");
       }
     } finally {
       setIsSubmitting(false);
@@ -400,7 +400,7 @@ export function BusinessForm({ businessId, mode }: BusinessFormProps) {
       );
       if (!confirmed) return;
     }
-    router.push("/dashboard/businesses");
+    router.push("/dashboard/entities?tab=businesses");
   };
 
   if (

src/components/forms/client-form.tsx

@@ -99,7 +99,7 @@ export function ClientForm({ clientId, mode }: ClientFormProps) {
   const createClient = api.clients.create.useMutation({
     onSuccess: () => {
       toast.success("Client created successfully");
-      router.push("/dashboard/clients");
+      router.push("/dashboard/entities?tab=clients");
     },
     onError: (error) => {
       toast.error(error.message || "Failed to create client");
@@ -109,7 +109,7 @@ export function ClientForm({ clientId, mode }: ClientFormProps) {
   const updateClient = api.clients.update.useMutation({
     onSuccess: () => {
       toast.success("Client updated successfully");
-      router.push("/dashboard/clients");
+      router.push("/dashboard/entities?tab=clients");
     },
     onError: (error) => {
       toast.error(error.message || "Failed to update client");
@@ -232,7 +232,7 @@ export function ClientForm({ clientId, mode }: ClientFormProps) {
       );
       if (!confirmed) return;
     }
-    router.push("/dashboard/clients");
+    router.push("/dashboard/entities?tab=clients");
   };
 
   if (mode === "edit" && isLoadingClient) {

src/components/forms/invoice-form.tsx

@@ -52,6 +52,7 @@ import {
 import { STATUS_OPTIONS } from "./invoice/types";
 import type { InvoiceFormData, InvoiceItem } from "./invoice/types";
 import type { ParsedLineItem } from "~/lib/parse-line-item";
+import { InvoicePdfPreviewPanel } from "./invoice/invoice-pdf-preview-panel";
 
 import { CountUp } from "~/components/ui/count-up";
 
@@ -135,6 +136,15 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [activeTab, setActiveTab] = useState("details");
   const [previewTab, setPreviewTab] = useState("pdf");
+  const [previewPinned, setPreviewPinned] = useState(false);
+
+  useEffect(() => {
+    const media = window.matchMedia("(min-width: 1024px)");
+    const update = () => setPreviewPinned(media.matches);
+    update();
+    media.addEventListener("change", update);
+    return () => media.removeEventListener("change", update);
+  }, []);
 
   // Queries (Same as before)
   const { data: clients, isLoading: loadingClients } =
@@ -254,17 +264,6 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
     [formData],
   );
 
-  const { data: pdfPreview, isFetching: pdfPreviewLoading } =
-    api.invoices.previewPdf.useQuery(pdfPreviewInput, {
-      enabled:
-        activeTab === "preview" &&
-        previewTab === "pdf" &&
-        Boolean(formData.clientId) &&
-        formData.items.length > 0 &&
-        formData.items.every((item) => item.description.trim() !== ""),
-      refetchOnWindowFocus: false,
-      staleTime: 0,
-    });
   const selectedClient = React.useMemo(
     () => clients?.find((client) => client.id === formData.clientId),
     [clients, formData.clientId],
@@ -480,9 +479,10 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
           </Button>
         </PageHeader>
 
-        <Tabs value={activeTab} className="w-full" onValueChange={setActiveTab}>
+        <div className="grid grid-cols-1 gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(320px,380px)]">
+          <Tabs value={activeTab} className="w-full" onValueChange={setActiveTab}>
           {/* TAB SELECTOR: w-full, p-1, visible background */}
-          <TabsList className="bg-muted grid h-auto w-full grid-cols-4 rounded-xl p-1">
+          <TabsList className="bg-muted grid h-auto w-full grid-cols-4 rounded-xl p-1 lg:grid-cols-3">
             <TabsTrigger
               value="details"
               className="data-[state=active]:bg-background rounded-lg py-2.5 data-[state=active]:shadow-sm"
@@ -503,7 +503,7 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
             </TabsTrigger>
             <TabsTrigger
               value="preview"
-              className="data-[state=active]:bg-background rounded-lg py-2.5 data-[state=active]:shadow-sm"
+              className="data-[state=active]:bg-background rounded-lg py-2.5 data-[state=active]:shadow-sm lg:hidden"
             >
               Preview
             </TabsTrigger>
@@ -863,43 +863,7 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
               </TabsList>
 
               <TabsContent value="pdf" className="mt-6">
-                <Card>
-                  <CardHeader>
-                    <CardTitle className="flex gap-2">
-                      <FileText className="h-5 w-5" /> PDF Preview
-                    </CardTitle>
-                  </CardHeader>
-                  <CardContent className="p-0">
-                    <div className="bg-muted/20 h-[760px] overflow-hidden border-t">
-                      {!formData.clientId ? (
-                        <div className="text-muted-foreground flex h-full items-center justify-center p-6 text-center text-sm">
-                          Select a client to generate the PDF preview.
-                        </div>
-                      ) : formData.items.some(
-                          (item) => item.description.trim() === "",
-                        ) ? (
-                        <div className="text-muted-foreground flex h-full items-center justify-center p-6 text-center text-sm">
-                          Add descriptions for all line items to generate the
-                          PDF preview.
-                        </div>
-                      ) : pdfPreviewLoading && !pdfPreview ? (
-                        <div className="text-muted-foreground flex h-full items-center justify-center p-6 text-center text-sm">
-                          Generating server PDF preview...
-                        </div>
-                      ) : pdfPreview ? (
-                        <iframe
-                          title="Server-generated PDF preview"
-                          src={`data:${pdfPreview.contentType};base64,${pdfPreview.base64}`}
-                          className="h-full w-full border-0"
-                        />
-                      ) : (
-                        <div className="text-muted-foreground flex h-full items-center justify-center p-6 text-center text-sm">
-                          PDF preview will appear here.
-                        </div>
-                      )}
-                    </div>
-                  </CardContent>
-                </Card>
+                <InvoicePdfPreviewPanel input={pdfPreviewInput} />
               </TabsContent>
 
               <TabsContent value="email" className="mt-6">
@@ -954,6 +918,24 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
             </Tabs>
           </TabsContent>
         </Tabs>
+
+          <aside className="hidden lg:block">
+            <div className="sticky top-4 space-y-4">
+              <InvoicePdfPreviewPanel
+                input={pdfPreviewInput}
+                enabled={previewPinned || activeTab === "preview"}
+              />
+              <Card className="border-primary/20 bg-primary/5">
+                <CardContent className="flex items-center justify-between p-4">
+                  <span className="text-muted-foreground text-sm">Invoice total</span>
+                  <span className="font-mono text-2xl font-bold">
+                    <CountUp value={totals.total} prefix="$" />
+                  </span>
+                </CardContent>
+              </Card>
+            </div>
+          </aside>
+        </div>
       </div>
 
       <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>

src/components/forms/invoice-line-items.tsx

@@ -8,7 +8,6 @@ import Link from "next/link";
 import { Button } from "~/components/ui/button";
 import { DatePicker } from "~/components/ui/date-picker";
 import { Input } from "~/components/ui/input";
-import { Label } from "~/components/ui/label";
 import { NumberInput } from "~/components/ui/number-input";
 import { cn } from "~/lib/utils";
 import { parseLineItem, type ParsedLineItem } from "~/lib/parse-line-item";
@@ -156,7 +155,7 @@ const LineItemCard = React.forwardRef<HTMLDivElement, LineItemRowProps>(
       <div
         ref={ref}
         className={cn(
-          "group hover:bg-muted/40 hidden min-h-16 grid-cols-[140px_minmax(200px,1fr)_124px_136px_104px_32px] items-center gap-2 border-b px-3 py-2 transition-colors md:grid",
+          "group hover:bg-muted/30 hidden min-h-11 grid-cols-[108px_minmax(180px,1fr)_96px_108px_88px_28px] items-center gap-1.5 border-b px-2 py-1.5 transition-colors md:grid",
         )}
       >
         <DatePicker
@@ -164,7 +163,7 @@ const LineItemCard = React.forwardRef<HTMLDivElement, LineItemRowProps>(
           onDateChange={(date) => onUpdate(index, "date", date ?? new Date())}
           size="sm"
           className="w-full"
-          inputClassName="h-9"
+          inputClassName="h-8 text-xs"
           disabled={readOnly}
         />
 
@@ -173,8 +172,8 @@ const LineItemCard = React.forwardRef<HTMLDivElement, LineItemRowProps>(
           onChange={(v) => onDescriptionChange(index, v)}
           onSelect={(s) => onSelectSuggestion(index, s)}
           suggestions={suggestions}
-          placeholder="Describe the work performed..."
-          className="h-9 w-full text-sm font-medium"
+          placeholder="Description"
+          className="h-8 w-full text-sm"
           disabled={readOnly}
         />
 
@@ -184,7 +183,7 @@ const LineItemCard = React.forwardRef<HTMLDivElement, LineItemRowProps>(
           min={0}
           step={0.25}
           width="full"
-          className="h-9 font-mono [&_button]:w-6 [&_input]:min-w-12"
+          className="h-8 font-mono [&_button]:h-7 [&_button]:w-5 [&_input]:min-w-10 [&_input]:text-xs"
           suffix="h"
           disabled={readOnly}
         />
@@ -196,11 +195,11 @@ const LineItemCard = React.forwardRef<HTMLDivElement, LineItemRowProps>(
           step={1}
           prefix="$"
           width="full"
-          className="h-9 font-mono [&_button]:w-6 [&_input]:min-w-14"
+          className="h-8 font-mono [&_button]:h-7 [&_button]:w-5 [&_input]:min-w-12 [&_input]:text-xs"
           disabled={readOnly}
         />
 
-        <div className="text-primary text-right font-mono font-semibold">
+        <div className="text-primary text-right font-mono text-sm font-semibold tabular-nums">
           ${(item.hours * item.rate).toFixed(2)}
         </div>
 
@@ -210,11 +209,11 @@ const LineItemCard = React.forwardRef<HTMLDivElement, LineItemRowProps>(
             variant="ghost"
             size="sm"
             onClick={() => onRemove(index)}
-            className="text-muted-foreground hover:text-destructive h-8 w-8 p-0"
+            className="text-muted-foreground hover:text-destructive h-7 w-7 p-0"
             disabled={!canRemove}
             aria-label="Remove item"
           >
-            <Trash2 className="h-4 w-4" />
+            <Trash2 className="h-3.5 w-3.5" />
           </Button>
         ) : (
           <span />
@@ -237,103 +236,72 @@ function MobileLineItem({
   readOnly,
 }: LineItemRowProps) {
   return (
-    <motion.div
-      layout
+    <div
       id={`invoice-item-${index}-mobile`}
-      initial={{ opacity: 0, y: 20 }}
-      animate={{ opacity: 1, y: 0 }}
-      exit={{ opacity: 0, y: -20 }}
-      transition={{ duration: 0.2, ease: "easeOut" }}
-      className="border-border bg-card overflow-hidden rounded-lg border md:hidden"
+      className="border-border space-y-1.5 border-b px-3 py-2 md:hidden"
     >
-      <div className="space-y-3 p-4">
-        {/* Description */}
-        <div className="space-y-1">
-          <Label className="text-muted-foreground text-xs">Description</Label>
-          <DescriptionAutocomplete
-            value={item.description}
-            onChange={(v) => onDescriptionChange(index, v)}
-            onSelect={(s) => onSelectSuggestion(index, s)}
-            suggestions={suggestions}
-            placeholder="Describe the work performed..."
-            className="pl-3 text-sm"
-            disabled={readOnly}
-          />
-        </div>
+      <div className="flex items-center gap-2">
+        <span className="text-muted-foreground w-5 shrink-0 text-center text-xs font-semibold">
+          {index + 1}
+        </span>
+        <DescriptionAutocomplete
+          value={item.description}
+          onChange={(v) => onDescriptionChange(index, v)}
+          onSelect={(s) => onSelectSuggestion(index, s)}
+          suggestions={suggestions}
+          placeholder="Description"
+          className="h-8 flex-1 text-sm"
+          disabled={readOnly}
+        />
+      </div>
 
-        {/* Date */}
-        <div className="space-y-1">
-          <Label className="text-muted-foreground text-xs">Date</Label>
-          <DatePicker
-            date={item.date}
-            onDateChange={(date) => onUpdate(index, "date", date ?? new Date())}
+      <div className="flex items-center gap-1.5 pl-7">
+        <DatePicker
+          date={item.date}
+          onDateChange={(date) => onUpdate(index, "date", date ?? new Date())}
+          size="sm"
+          className="w-[92px] shrink-0"
+          inputClassName="h-8 px-2 text-xs"
+          disabled={readOnly}
+        />
+        <NumberInput
+          value={item.hours}
+          onChange={(value) => onUpdate(index, "hours", value)}
+          min={0}
+          step={0.25}
+          width="full"
+          className="h-8 w-[88px] shrink-0 font-mono [&_button]:h-7 [&_button]:w-5 [&_input]:min-w-8 [&_input]:text-xs"
+          suffix="h"
+          disabled={readOnly}
+        />
+        <NumberInput
+          value={item.rate}
+          onChange={(value) => onUpdate(index, "rate", value)}
+          min={0}
+          step={1}
+          prefix="$"
+          width="full"
+          className="h-8 w-[84px] shrink-0 font-mono [&_button]:h-7 [&_button]:w-5 [&_input]:min-w-10 [&_input]:text-xs"
+          disabled={readOnly}
+        />
+        <span className="text-primary ml-auto font-mono text-sm font-semibold tabular-nums">
+          ${(item.hours * item.rate).toFixed(2)}
+        </span>
+        {!readOnly ? (
+          <Button
+            type="button"
+            variant="ghost"
             size="sm"
-            inputClassName="h-9"
-            disabled={readOnly}
-          />
-        </div>
-
-        {/* Hours and Rate in a row */}
-        <div className="grid grid-cols-2 gap-3">
-          <div className="space-y-1">
-            <Label className="text-muted-foreground text-xs">Hours</Label>
-            <NumberInput
-              value={item.hours}
-              onChange={(value) => onUpdate(index, "hours", value)}
-              min={0}
-              step={0.25}
-              width="full"
-              disabled={readOnly}
-            />
-          </div>
-          <div className="space-y-1">
-            <Label className="text-muted-foreground text-xs">Rate</Label>
-            <NumberInput
-              value={item.rate}
-              onChange={(value) => onUpdate(index, "rate", value)}
-              min={0}
-              step={1}
-              prefix="$"
-              width="full"
-              className="font-mono"
-              disabled={readOnly}
-            />
-          </div>
-        </div>
+            onClick={() => onRemove(index)}
+            className="text-muted-foreground hover:text-destructive h-7 w-7 shrink-0 p-0"
+            disabled={!canRemove}
+            aria-label="Remove item"
+          >
+            <Trash2 className="h-3.5 w-3.5" />
+          </Button>
+        ) : null}
       </div>
-
-      {/* Bottom section with controls, item name, and total */}
-      <div className="border-border bg-muted/50 flex items-center justify-between border-t px-4 py-2">
-        <div className="flex items-center gap-2">
-          {!readOnly ? (
-            <Button
-              type="button"
-              variant="ghost"
-              size="sm"
-              onClick={() => onRemove(index)}
-              className="text-muted-foreground hover:text-destructive h-8 w-8 p-0"
-              disabled={!canRemove}
-              aria-label="Remove item"
-            >
-              <Trash2 className="h-4 w-4" />
-            </Button>
-          ) : null}
-        </div>
-        <div className="flex-1 px-3 text-center">
-          <span className="text-muted-foreground block text-sm font-medium">
-            <span className="hidden sm:inline">Item </span>
-            <span className="sm:hidden">#</span>
-            {index + 1}
-          </span>
-        </div>
-        <div className="flex flex-col items-end">
-          <span className="text-muted-foreground text-xs">Total</span>
-          <span className="text-primary text-lg font-bold">
-            ${(item.hours * item.rate).toFixed(2)}
-          </span>
-        </div>
-      </div>
-    </motion.div>
+    </div>
   );
 }
 
@@ -405,12 +373,12 @@ export function InvoiceLineItems({
         </p>
       ) : null}
       <AnimatePresence>
-        <div className="space-y-2 md:space-y-0 md:overflow-hidden md:rounded-lg md:border">
-          <div className="bg-muted/60 text-muted-foreground hidden grid-cols-[140px_minmax(200px,1fr)_124px_136px_104px_32px] gap-2 border-b px-3 py-2 text-xs font-medium md:grid">
+        <div className="space-y-0 md:overflow-hidden md:rounded-lg md:border">
+          <div className="bg-muted/60 text-muted-foreground hidden grid-cols-[108px_minmax(180px,1fr)_96px_108px_88px_28px] gap-1.5 border-b px-2 py-1.5 text-[11px] font-semibold tracking-wide uppercase md:grid">
             <span>Date</span>
             <span>Description</span>
-            <span className="text-right">Hours</span>
-            <span className="text-right">Rate</span>
+            <span className="text-center">Hours</span>
+            <span className="text-center">Rate</span>
             <span className="text-right">Amount</span>
             <span />
           </div>
@@ -483,7 +451,7 @@ export function InvoiceLineItems({
           type="button"
           variant="outline"
           onClick={onAddItem}
-          className="border-border text-muted-foreground hover:text-primary hover:bg-accent/50 hover:border-primary/50 mt-3 w-full border-dashed py-6 transition-all"
+          className="border-border text-muted-foreground hover:text-primary hover:bg-accent/50 hover:border-primary/50 mt-2 w-full border-dashed py-3 transition-all"
         >
           <Plus className="mr-2 h-4 w-4" />
           Add Line Item

src/components/forms/invoice/invoice-pdf-preview-panel.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { FileText, Loader2 } from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
+import { Button } from "~/components/ui/button";
+import { cn } from "~/lib/utils";
+import { api } from "~/trpc/react";
+
+export type InvoicePdfPreviewInput = {
+  invoiceNumber: string;
+  invoicePrefix: string;
+  businessId: string;
+  clientId: string;
+  issueDate: Date;
+  dueDate: Date;
+  status: "draft" | "sent" | "paid";
+  notes: string;
+  emailMessage: string;
+  taxRate: number;
+  currency: string;
+  items: Array<{
+    date: Date;
+    description: string;
+    hours: number;
+    rate: number;
+  }>;
+};
+
+function canPreview(input: InvoicePdfPreviewInput | null): input is InvoicePdfPreviewInput {
+  if (!input?.clientId) return false;
+  if (input.items.length === 0) return false;
+  return input.items.every((item) => item.description.trim().length > 0);
+}
+
+type InvoicePdfPreviewPanelProps = {
+  input: InvoicePdfPreviewInput | null;
+  enabled?: boolean;
+  className?: string;
+  heightClassName?: string;
+};
+
+export function InvoicePdfPreviewPanel({
+  input,
+  enabled = true,
+  className,
+  heightClassName = "h-[min(80vh,760px)]",
+}: InvoicePdfPreviewPanelProps) {
+  const previewReady = canPreview(input);
+
+  const { data: pdfPreview, isFetching, error, refetch } =
+    api.invoices.previewPdf.useQuery(input!, {
+      enabled: enabled && previewReady,
+      refetchOnWindowFocus: false,
+      staleTime: 5_000,
+    });
+
+  return (
+    <Card className={cn("overflow-hidden", className)}>
+      <CardHeader className="pb-3">
+        <CardTitle className="flex items-center gap-2 text-base">
+          <FileText className="h-4 w-4" />
+          PDF preview
+          {isFetching ? <Loader2 className="text-muted-foreground h-3.5 w-3.5 animate-spin" /> : null}
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="p-0">
+        <div
+          className={cn(
+            "bg-muted/20 overflow-hidden border-t",
+            heightClassName,
+          )}
+        >
+          {!previewReady ? (
+            <div className="text-muted-foreground flex h-full items-center justify-center p-6 text-center text-sm">
+              Select a client and add descriptions for all line items to generate the
+              PDF preview.
+            </div>
+          ) : error ? (
+            <div className="flex h-full flex-col items-center justify-center gap-3 p-6 text-center">
+              <p className="text-destructive text-sm">{error.message}</p>
+              <Button type="button" variant="outline" size="sm" onClick={() => void refetch()}>
+                Try again
+              </Button>
+            </div>
+          ) : isFetching && !pdfPreview ? (
+            <div className="text-muted-foreground flex h-full items-center justify-center gap-2 p-6 text-center text-sm">
+              <Loader2 className="h-4 w-4 animate-spin" />
+              Generating preview…
+            </div>
+          ) : pdfPreview ? (
+            <iframe
+              title="Invoice PDF preview"
+              src={`data:${pdfPreview.contentType};base64,${pdfPreview.base64}`}
+              className="h-full w-full border-0"
+            />
+          ) : (
+            <div className="text-muted-foreground flex h-full items-center justify-center p-6 text-center text-sm">
+              PDF preview will appear here.
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}