Fix customer/owner dropdown readability in New Project dialog

Replace native <select> elements with shadcn Select component
so dropdown options use the theme's styled popover colors

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

@@ -220,29 +220,29 @@ function NewProjectDialog({ statuses, onCreated }: { statuses: ProjectStatus[];
           </div>
           <div>
             <label className="text-sm font-medium">Customer *</label>
-            <select
+            <Select value={customerId} onValueChange={setCustomerId}>
-              value={customerId}
+              <SelectTrigger className="h-9 w-full">
-              onChange={(e) => setCustomerId(e.target.value)}
+                <SelectValue placeholder="Select customer..." />
-              className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm"
+              </SelectTrigger>
-            >
+              <SelectContent>
-              <option value="">Select customer...</option>
+                {customers.map((c: any) => (
-              {customers.map((c: any) => (
+                  <SelectItem key={c.id} value={c.id}>{c.company_name || `${c.first_name} ${c.last_name}`}</SelectItem>
-                <option key={c.id} value={c.id}>{c.company_name || `${c.first_name} ${c.last_name}`}</option>
+                ))}
-              ))}
+              </SelectContent>
-            </select>
+            </Select>
           </div>
           <div>
             <label className="text-sm font-medium">Project Owner</label>
-            <select
+            <Select value={ownerId} onValueChange={setOwnerId}>
-              value={ownerId}
+              <SelectTrigger className="h-9 w-full">
-              onChange={(e) => setOwnerId(e.target.value)}
+                <SelectValue placeholder="Select owner..." />
-              className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm"
+              </SelectTrigger>
-            >
+              <SelectContent>
-              <option value="">Select owner...</option>
+                {users.map((u: any) => (
-              {users.map((u: any) => (
+                  <SelectItem key={u.id} value={u.id}>{u.first_name} {u.last_name}</SelectItem>
-                <option key={u.id} value={u.id}>{u.first_name} {u.last_name}</option>
+                ))}
-              ))}
+              </SelectContent>
-            </select>
+            </Select>
           </div>
           <div className="grid grid-cols-2 gap-4">
             <div>