Fixed button in view

src/app/(dashboard)/leads/new/page.tsx

@@ -0,0 +1,271 @@
+"use client"
+
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+import Link from "next/link"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import * as z from "zod"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Card, CardContent } from "@/components/ui/card"
+import { ArrowLeft } from "lucide-react"
+import { Lead, LeadStatus } from "@/types"
+import { leads } from "@/data/leads"
+import { users } from "@/data/users"
+import { LEAD_SOURCES, LEAD_STATUSES } from "@/lib/constants"
+
+const leadFormSchema = z.object({
+  companyName: z.string().min(1, "Company name is required"),
+  contactName: z.string().min(1, "Contact name is required"),
+  email: z.string().email("Invalid email address"),
+  phone: z.string().optional(),
+  source: z.string().optional(),
+  description: z.string().optional(),
+  status: z.string(),
+  assignedUserId: z.string().optional(),
+})
+
+type LeadFormValues = z.infer<typeof leadFormSchema>
+
+export default function CreateLeadPage() {
+  const router = useRouter()
+  const [saving, setSaving] = useState(false)
+
+  const form = useForm<LeadFormValues>({
+    resolver: zodResolver(leadFormSchema),
+    defaultValues: {
+      companyName: "",
+      contactName: "",
+      email: "",
+      phone: "",
+      source: "",
+      description: "",
+      status: "open",
+      assignedUserId: "none",
+    },
+  })
+
+  function onSubmit(values: LeadFormValues) {
+    setSaving(true)
+    const now = new Date().toISOString()
+    const assignedUserId: string | null = values.assignedUserId === "none" ? null : (values.assignedUserId ?? null)
+    const assignedUser = assignedUserId ? users.find((u) => u.id === assignedUserId) ?? null : null
+
+    const newLead: Lead = {
+      id: `lead-${String(leads.length + 1).padStart(3, "0")}`,
+      companyName: values.companyName,
+      contactName: values.contactName,
+      email: values.email,
+      phone: values.phone ?? "",
+      source: values.source ?? "",
+      description: values.description ?? "",
+      status: values.status as LeadStatus,
+      assignedUserId,
+      assignedUser,
+      createdAt: now,
+      updatedAt: now,
+    }
+
+    leads.unshift(newLead)
+    router.push("/leads")
+  }
+
+  return (
+    <div className="space-y-6">
+      <Link
+        href="/leads"
+        className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
+      >
+        <ArrowLeft className="h-4 w-4" />
+        Back to leads
+      </Link>
+
+      <div>
+        <h1 className="text-2xl font-bold tracking-tight">Create New Lead</h1>
+        <p className="mt-1 text-sm text-muted-foreground">Fill in the details to add a new lead.</p>
+      </div>
+
+      <Card>
+        <CardContent className="pt-6">
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+              <div className="grid grid-cols-2 gap-4">
+                <FormField
+                  control={form.control}
+                  name="companyName"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Company Name</FormLabel>
+                      <FormControl>
+                        <Input placeholder="Acme Corp" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="contactName"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Contact Name</FormLabel>
+                      <FormControl>
+                        <Input placeholder="John Doe" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="email"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Email</FormLabel>
+                      <FormControl>
+                        <Input placeholder="john@acme.com" type="email" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="phone"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Phone</FormLabel>
+                      <FormControl>
+                        <Input placeholder="(555) 123-4567" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="source"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Source</FormLabel>
+                      <Select onValueChange={field.onChange} defaultValue={field.value}>
+                        <FormControl>
+                          <SelectTrigger>
+                            <SelectValue placeholder="Select source" />
+                          </SelectTrigger>
+                        </FormControl>
+                        <SelectContent>
+                          {LEAD_SOURCES.map((source) => (
+                            <SelectItem key={source} value={source}>
+                              {source}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="status"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Status</FormLabel>
+                      <Select onValueChange={field.onChange} defaultValue={field.value}>
+                        <FormControl>
+                          <SelectTrigger>
+                            <SelectValue placeholder="Select status" />
+                          </SelectTrigger>
+                        </FormControl>
+                        <SelectContent>
+                          {Object.entries(LEAD_STATUSES).map(([key, { label }]) => (
+                            <SelectItem key={key} value={key}>
+                              {label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+              <FormField
+                control={form.control}
+                name="description"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Description</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        placeholder="Brief description of the lead and their requirements..."
+                        className="min-h-[100px]"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="assignedUserId"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Assign To</FormLabel>
+                    <Select onValueChange={field.onChange} defaultValue={field.value}>
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select user" />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        <SelectItem value="none">Unassigned</SelectItem>
+                        {users.filter((u) => u.active).map((user) => (
+                          <SelectItem key={user.id} value={user.id}>
+                            {user.name} ({user.role})
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <div className="flex items-center gap-3 pt-2">
+                <Button type="submit" disabled={saving}>
+                  {saving ? "Saving..." : "Create Lead"}
+                </Button>
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => router.push("/leads")}
+                >
+                  Cancel
+                </Button>
+              </div>
+            </form>
+          </Form>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

src/app/(dashboard)/leads/page.tsx

@@ -1,18 +1,18 @@
 "use client"
 
 import { useState, useMemo } from "react"
+import { useRouter } from "next/navigation"
 import { PageHeader } from "@/components/shared/page-header"
 import { LeadsTable } from "@/components/leads/leads-table"
 import { LeadsTableToolbar } from "@/components/leads/leads-table-toolbar"
-import { LeadFormDialog } from "@/components/leads/lead-form-dialog"
 import { leads } from "@/data/leads"
 import { filterLeadsByPeriod } from "@/lib/date-utils"
 
 export default function LeadsPage() {
+  const router = useRouter()
   const [search, setSearch] = useState("")
   const [statusFilter, setStatusFilter] = useState("all")
   const [periodFilter, setPeriodFilter] = useState("all")
-  const [createOpen, setCreateOpen] = useState(false)
 
   const filteredLeads = useMemo(() => {
     let result = leads
@@ -55,13 +55,11 @@ export default function LeadsPage() {
             onStatusFilterChange={setStatusFilter}
             periodFilter={periodFilter}
             onPeriodFilterChange={setPeriodFilter}
-            onCreateClick={() => setCreateOpen(true)}
+            onCreateClick={() => router.push("/leads/new")}
           />
         </div>
         <LeadsTable data={filteredLeads} />
       </div>
-
-      <LeadFormDialog open={createOpen} onOpenChange={setCreateOpen} />
     </div>
   )
 }

src/components/leads/lead-form-dialog.tsx

@@ -66,7 +66,7 @@ export function LeadFormDialog({ open, onOpenChange, lead }: LeadFormDialogProps
       source: "",
       description: "",
       status: "open",
-      assignedUserId: "",
+      assignedUserId: "none",
     },
   })
 
@@ -80,7 +80,7 @@ export function LeadFormDialog({ open, onOpenChange, lead }: LeadFormDialogProps
         source: lead.source || "",
         description: lead.description || "",
         status: lead.status,
-        assignedUserId: lead.assignedUserId || "",
+        assignedUserId: lead.assignedUserId || "none",
       })
     } else {
       form.reset({
@@ -91,13 +91,17 @@ export function LeadFormDialog({ open, onOpenChange, lead }: LeadFormDialogProps
         source: "",
         description: "",
         status: "open",
-        assignedUserId: "",
+        assignedUserId: "none",
       })
     }
   }, [lead, form])
 
   function onSubmit(values: LeadFormValues) {
-    console.log(values)
+    const payload = {
+      ...values,
+      assignedUserId: values.assignedUserId === "none" ? null : values.assignedUserId,
+    }
+    console.log(payload)
     onOpenChange(false)
   }
 
@@ -246,7 +250,7 @@ export function LeadFormDialog({ open, onOpenChange, lead }: LeadFormDialogProps
                       </SelectTrigger>
                     </FormControl>
                     <SelectContent>
-                      <SelectItem value="">Unassigned</SelectItem>
+                      <SelectItem value="none">Unassigned</SelectItem>
                       {users.filter(u => u.active).map((user) => (
                         <SelectItem key={user.id} value={user.id}>
                           {user.name} ({user.role})