From 3845d9951cbd23de1a1c610ce751b1e4799538a4 Mon Sep 17 00:00:00 2001
From: Robert Isaacs <robert@nineminds.com>
Date: Fri, 10 Jan 2025 08:37:20 -0500
Subject: [PATCH] fix: company picker merge issues (#169)

---
 .../components/companies/CompanyPicker.tsx    | 132 ++++++++++--------
 1 file changed, 70 insertions(+), 62 deletions(-)

diff --git a/server/src/components/companies/CompanyPicker.tsx b/server/src/components/companies/CompanyPicker.tsx
index ef9d7152..b55b461f 100644
--- a/server/src/components/companies/CompanyPicker.tsx
+++ b/server/src/components/companies/CompanyPicker.tsx
@@ -141,73 +141,81 @@ export const CompanyPicker: React.FC<CompanyPickerProps> = ({
           type="button"
           onClick={() => setIsOpen(!isOpen)}
           className="w-full p-2 border-2 border-gray-200 rounded-md flex justify-between items-center text-left outline-none transition-colors duration-200 hover:border-gray-300 focus:border-purple-500 bg-white"
-        />
-          <div className="p-3 space-y-3 bg-white">
-            <div className="grid grid-cols-2 gap-2">
-              <div className="w-full">
-                <CustomSelect
-                  value={filterState}
-                  onValueChange={handleFilterStateChange}
-                  options={[
-                    { value: 'active', label: 'Active Clients' },
-                    { value: 'inactive', label: 'Inactive Clients' },
-                    { value: 'all', label: 'All Clients' },
-                  ]}
-                  placeholder="Filter by status"
-                />
-              </div>
-              <div className="w-full">
-                <CustomSelect
-                  value={clientTypeFilter}
-                  onValueChange={handleClientTypeFilterChange}
-                  options={[
-                    { value: 'all', label: 'All Types' },
-                    { value: 'company', label: 'Companies' },
-                    { value: 'individual', label: 'Individuals' },
-                  ]}
-                  placeholder="Filter by client type"
-                />
+        >
+          <span>{selectedCompany ? selectedCompany.company_name : 'Select Client'}</span>
+          <ChevronDownIcon />
+        </button>
+
+        {isOpen && (
+          <div
+            className={`absolute z-[100] bg-white border rounded-md shadow-lg ${fitContent ? 'w-max' : 'w-[350px]'}`}
+            style={{
+              top: '100%',
+              left: 0
+            }}
+            onMouseDown={(e) => e.stopPropagation()}
+          >
+            <div className="p-3 space-y-3 bg-white">
+              <div className="grid grid-cols-2 gap-2">
+                <div className="w-full">
+                  <CustomSelect
+                    value={filterState}
+                    onValueChange={handleFilterStateChange}
+                    options={[
+                      { value: 'active', label: 'Active Clients' },
+                      { value: 'inactive', label: 'Inactive Clients' },
+                      { value: 'all', label: 'All Clients' },
+                    ]}
+                    placeholder="Filter by status"
+                  />
+                </div>
+                <div className="w-full">
+                  <CustomSelect
+                    value={clientTypeFilter}
+                    onValueChange={handleClientTypeFilterChange}
+                    options={[
+                      { value: 'all', label: 'All Types' },
+                      { value: 'company', label: 'Companies' },
+                      { value: 'individual', label: 'Individuals' },
+                    ]}
+                    placeholder="Filter by client type"
+                  />
+                </div>
               </div>
+              <div className="whitespace-nowrap">
+              <Input
+                placeholder="Search clients..."
+                value={searchTerm}
+                onChange={(e) => {
+                  e.stopPropagation();
+                  setSearchTerm(e.target.value);
+                }}
+              />
+            </div>
             </div>
             <div className="max-h-60 overflow-y-auto border-t bg-white">
-              {filteredCompanies.map((company): JSX.Element => (
-                <button
-                  key={company.company_id}
-                  onClick={(e) => handleSelect(company.company_id, e)}
-                  className={`w-full text-left px-4 py-2 hover:bg-gray-100 ${company.company_id === selectedCompanyId ? 'bg-blue-100' : ''
-                    }`}
-                  data-automation-id={`${id}-company-${company.company_id}`}
-                >
-                  {company.company_name}
-                  {company.is_inactive && <span className="ml-2 text-gray-500">(Inactive)</span>}
-                  <span className="ml-2 text-gray-500">
-                    ({company.client_type === 'company' ? 'Company' : 'Individual'})
-                  </span>
-                </button>
-              ))}
+              {filteredCompanies.length === 0 ? (
+                <div className="px-4 py-2 text-gray-500">No clients found</div>
+              ) : (
+                filteredCompanies.map((company): JSX.Element => (
+                  <button
+                    type="button"
+                    key={company.company_id}
+                    onClick={(e) => handleSelect(company.company_id, e)}
+                    className={`w-full text-left px-4 py-2 hover:bg-gray-100 ${company.company_id === selectedCompanyId ? 'bg-blue-100' : ''
+                      }`}
+                  >
+                    {company.company_name}
+                    {company.is_inactive && <span className="ml-2 text-gray-500">(Inactive)</span>}
+                    <span className="ml-2 text-gray-500">
+                      ({company.client_type === 'company' ? 'Company' : 'Individual'})
+                    </span>
+                  </button>
+                ))
+              )}
             </div>
           </div>
-          <div className="max-h-60 overflow-y-auto border-t bg-white">
-            {filteredCompanies.length === 0 ? (
-              <div className="px-4 py-2 text-gray-500">No clients found</div>
-            ) : (
-              filteredCompanies.map((company): JSX.Element => (
-                <button
-                  type="button"
-                  key={company.company_id}
-                  onClick={(e) => handleSelect(company.company_id, e)}
-                  className={`w-full text-left px-4 py-2 hover:bg-gray-100 ${company.company_id === selectedCompanyId ? 'bg-blue-100' : ''
-                    }`}
-                >
-                  {company.company_name}
-                  {company.is_inactive && <span className="ml-2 text-gray-500">(Inactive)</span>}
-                  <span className="ml-2 text-gray-500">
-                    ({company.client_type === 'company' ? 'Company' : 'Individual'})
-                  </span>
-                </button>
-              ))
-            )}
-          </div>
+        )}
       </div>
     </ReflectionContainer >
   );