From 9deccf7349333458ba252e034ec037232c5f2f4e Mon Sep 17 00:00:00 2001
From: Natallia Bukhtsik <natallia@nineminds.com>
Date: Mon, 11 Nov 2024 10:45:03 -0500
Subject: [PATCH 1/4] Alga PSA

---
 server/entrypoint.sh | 35 +++++++++++++++++------------------
 1 file changed, 17 insertions(+), 18 deletions(-)

diff --git a/server/entrypoint.sh b/server/entrypoint.sh
index 4a2fbf2e..b664a447 100755
--- a/server/entrypoint.sh
+++ b/server/entrypoint.sh
@@ -13,10 +13,10 @@ NODE_ENV=${NODE_ENV:-production}
 # done
 
 
-version="0.0.0"
+version="0.0.1"
 commit="abc123"
-date="13-08-2023"
-author="Ivan D Gomez J"
+date="04-11-2024"
+author="NineMinds"
 
 # Function to print colored text
 print_color() {
@@ -27,8 +27,8 @@ print_color() {
 
 # Print the first ASCII art
 print_color "35" "
-					     ******* 
-					****************                     
+					     			******* 
+								****************                     
 		                    ***********************                  
 		                 *****************************               
 		               *********************************             
@@ -69,14 +69,13 @@ print_color "35" "
 
 # Print the second ASCII art
 print_color "34" "
-             ######  ######## ########     ###     ######  ######## ####    ###    ##    ## 
-            ##    ## ##       ##     ##   ## ##   ##    ##    ##     ##    ## ##   ###   ## 
-            ##       ##       ##     ##  ##   ##  ##          ##     ##   ##   ##  ####  ## 
-             ######  ######   ########  ##     ##  ######     ##     ##  ##     ## ## ## ## 
-                  ## ##       ##     ## #########       ##    ##     ##  ######### ##  #### 
-            ##    ## ##       ##     ## ##     ## ##    ##    ##     ##  ##     ## ##   ### 
-             ######  ######## ########  ##     ##  ######     ##    #### ##     ## ##    ## 
-
+             ###    ##       ######     ###          ######   #####     ### 
+            ## ##   ##      ##    ##   ## ##         #     # #     #   ## ##
+           ##   ##  ##      ##        ##   ##        #     # #        ##   ##
+          ##     ## ##      ##  #### ##     ##       ######   #####  ##     ##
+          ######### ##      ##    ## #########       #             # #########
+          ##     ## ##      ##    ## ##     ##       #            #  ##     ##
+          ##     ## ######## ######  ##     ##       #       ##### 	 ##     ##
 
 
 			  #####  ####### ######  #     # ####### ######  
@@ -92,12 +91,12 @@ print_color "34" "
 print_color "36" "
                     ****************************************************
                     *                                                  *
-                    *               SEBASTIAN NEXT.JS                  *
+                    *               ALGA PSA NEXT.JS                   *
                     *                                                  *
-                    *               Version .: $version                   *
-                    *               Commit  .: $commit                  *
-                    *               Date    .: $date              *
-                    *               Author  .: $author          *
+                    *               Version .: $version                *
+                    *               Commit  .: $commit                 *
+                    *               Date    .: $date                   *
+                    *               Author  .: $author                 *
                     *                                                  *
                     ****************************************************
 "

From ee6d79a78444bdb4f91ff12574a1f6a6ba482b24 Mon Sep 17 00:00:00 2001
From: Natallia Bukhtsik <natallia@nineminds.com>
Date: Thu, 7 Nov 2024 14:31:38 -0500
Subject: [PATCH 2/4] =?UTF-8?q?=F0=9F=91=BB=20If=20I=20were=20the=20wizard?=
 =?UTF-8?q?=20of=20roles,=20oh=20I=20would=20add...=20Because=20because=20?=
 =?UTF-8?q?because=20because=20becaaaause...=20Roles=20&=20comments=20to?=
 =?UTF-8?q?=20contacts=20at=20last!?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../20241107120000_add_notes_to_contacts.js   | 11 +++++++
 .../contacts/ContactDetailsEdit.tsx           | 21 +++++++++++++-
 .../contacts/ContactDetailsView.tsx           |  7 +++++
 .../contacts/ContactsImportDialog.tsx         | 16 ++++++++--
 .../components/contacts/QuickAddContact.tsx   | 29 ++++++++++++++++++-
 server/src/components/ui/TextArea.tsx         | 12 ++++++--
 server/src/interfaces/contact.interfaces.tsx  |  4 +++
 .../contact-actions/contactActions.tsx        | 15 +++++++---
 8 files changed, 104 insertions(+), 11 deletions(-)
 create mode 100644 server/migrations/20241107120000_add_notes_to_contacts.js

diff --git a/server/migrations/20241107120000_add_notes_to_contacts.js b/server/migrations/20241107120000_add_notes_to_contacts.js
new file mode 100644
index 00000000..813ca609
--- /dev/null
+++ b/server/migrations/20241107120000_add_notes_to_contacts.js
@@ -0,0 +1,11 @@
+exports.up = async function(knex) {
+    await knex.schema.alterTable('contacts', (table) => {
+        table.text('notes');
+    });
+};
+
+exports.down = async function(knex) {
+    await knex.schema.alterTable('contacts', (table) => {
+        table.dropColumn('notes');
+    });
+};
diff --git a/server/src/components/contacts/ContactDetailsEdit.tsx b/server/src/components/contacts/ContactDetailsEdit.tsx
index 108dd4f2..bbef9d8d 100644
--- a/server/src/components/contacts/ContactDetailsEdit.tsx
+++ b/server/src/components/contacts/ContactDetailsEdit.tsx
@@ -4,6 +4,7 @@ import React, { useState, useEffect } from 'react';
 import { IContact } from '@/interfaces/contact.interfaces';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
+import { TextArea } from '@/components/ui/TextArea';
 import { Flex, Text, Heading } from '@radix-ui/themes';
 import { updateContact } from '@/lib/actions/contact-actions/contactActions';
 import { findTagsByEntityIds, findAllTagsByType } from '@/lib/actions/tagActions';
@@ -90,6 +91,12 @@ const ContactDetailsEdit: React.FC<ContactDetailsEditProps> = ({
             value={contact.phone_number} 
             onChange={(value) => handleInputChange('phone_number', value)} 
           />
+          <TableRow 
+            label="Role" 
+            value={contact.role || ''} 
+            onChange={(value) => handleInputChange('role', value)} 
+            placeholder="e.g., Manager, Developer, etc."
+          />
           <tr>
             <td className="py-2 font-semibold">Company:</td>
             <td className="py-2">
@@ -116,6 +123,16 @@ const ContactDetailsEdit: React.FC<ContactDetailsEditProps> = ({
             onChange={(value) => handleInputChange('is_inactive', value === 'Inactive')} 
             options={['Active', 'Inactive']}
           />
+          <tr>
+            <td className="py-2 font-semibold">Notes:</td>
+            <td className="py-2">
+              <TextArea
+                value={contact.notes || ''}
+                onChange={(e) => handleInputChange('notes', e.target.value)}
+                placeholder="Add any additional notes about the contact..."
+              />
+            </td>
+          </tr>
           <tr>
             <td className="py-2 font-semibold">Tags:</td>
             <td className="py-2">
@@ -144,9 +161,10 @@ interface TableRowProps {
   onChange: (value: string) => void;
   type?: string;
   options?: string[];
+  placeholder?: string;
 }
 
-const TableRow: React.FC<TableRowProps> = ({ label, value, onChange, type = "text", options }) => (
+const TableRow: React.FC<TableRowProps> = ({ label, value, onChange, type = "text", options, placeholder }) => (
   <tr>
     <td className="py-2 font-semibold">{label}:</td>
     <td className="py-2">
@@ -166,6 +184,7 @@ const TableRow: React.FC<TableRowProps> = ({ label, value, onChange, type = "tex
           value={value}
           onChange={(e) => onChange(e.target.value)}
           className="w-full"
+          placeholder={placeholder}
         />
       )}
     </td>
diff --git a/server/src/components/contacts/ContactDetailsView.tsx b/server/src/components/contacts/ContactDetailsView.tsx
index 655a90df..b337035b 100644
--- a/server/src/components/contacts/ContactDetailsView.tsx
+++ b/server/src/components/contacts/ContactDetailsView.tsx
@@ -157,10 +157,17 @@ const ContactDetailsView: React.FC<ContactDetailsViewProps> = ({
             value={getCompanyName(contact.company_id!)}
             onClick={() => handleCompanyClick()}
           />
+          <TableRow label="Role" value={contact.role || 'Not set'} />
           <TableRow label="Date of Birth" value={formatDateForDisplay(contact.date_of_birth)} />
           <TableRow label="Status" value={contact.is_inactive ? 'Inactive' : 'Active'} />
           <TableRow label="Created At" value={new Date(contact.created_at).toLocaleString()} />
           <TableRow label="Updated At" value={new Date(contact.updated_at).toLocaleString()} />
+          {contact.notes && (
+            <tr>
+              <td className="py-2 font-semibold align-top">Notes:</td>
+              <td className="py-2 whitespace-pre-wrap">{contact.notes}</td>
+            </tr>
+          )}
           <tr>
             <td className="py-2 font-semibold">Tags:</td>
             <td className="py-2">
diff --git a/server/src/components/contacts/ContactsImportDialog.tsx b/server/src/components/contacts/ContactsImportDialog.tsx
index 1b247df3..a7358a38 100644
--- a/server/src/components/contacts/ContactsImportDialog.tsx
+++ b/server/src/components/contacts/ContactsImportDialog.tsx
@@ -27,7 +27,9 @@ const CONTACT_FIELDS = {
   phone_number: 'Phone Number',
   company_name: 'Company',
   tags: 'Tags',
-  date_of_birth: 'Date of Birth'
+  date_of_birth: 'Date of Birth',
+  role: 'Role',
+  notes: 'Notes'
 } as const;
 
 interface ImportOptionsProps {
@@ -112,6 +114,8 @@ const ContactsImportDialog: React.FC<ContactsImportDialogProps> = ({
         else if (headerLower.includes('company')) contactField = 'company_name';
         else if (headerLower.includes('tag')) contactField = 'tags';
         else if (headerLower.includes('birth')) contactField = 'date_of_birth';
+        else if (headerLower.includes('role')) contactField = 'role';
+        else if (headerLower.includes('note')) contactField = 'notes';
 
         return {
           csvHeader: header,
@@ -210,6 +214,8 @@ const ContactsImportDialog: React.FC<ContactsImportDialogProps> = ({
         phone_number: record.phone_number,
         company_id: company?.company_id || null,
         date_of_birth: record.date_of_birth || undefined,
+        role: record.role,
+        notes: record.notes,
         is_inactive: false
       };
     });
@@ -262,7 +268,9 @@ const ContactsImportDialog: React.FC<ContactsImportDialogProps> = ({
           phone_number: result.data.phone_number || '',
           company_name: result.data.company_name || '',
           tags: result.data.tags || '',
-          date_of_birth: result.data.date_of_birth || ''
+          date_of_birth: result.data.date_of_birth || '',
+          role: result.data.role || '',
+          notes: result.data.notes || ''
         };
         return data;
       });
@@ -567,7 +575,9 @@ const ContactsImportDialog: React.FC<ContactsImportDialogProps> = ({
               phone_number: result.data.phone_number || '',
               company_name: result.data.company_name || '',
               tags: result.data.tags || '',
-              date_of_birth: result.data.date_of_birth || ''
+              date_of_birth: result.data.date_of_birth || '',
+              role: result.data.role || '',
+              notes: result.data.notes || ''
             }));
           processImport(validData);
         }}
diff --git a/server/src/components/contacts/QuickAddContact.tsx b/server/src/components/contacts/QuickAddContact.tsx
index cd34861a..10a035b1 100644
--- a/server/src/components/contacts/QuickAddContact.tsx
+++ b/server/src/components/contacts/QuickAddContact.tsx
@@ -4,6 +4,7 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "
 import { Button } from "@/components/ui/Button";
 import { Input } from "@/components/ui/Input";
 import { Label } from "@/components/ui/Label";
+import { TextArea } from "@/components/ui/TextArea";
 import { addContact } from '@/lib/actions/contact-actions/contactActions';
 import { CompanyPicker } from '@/components/companies/CompanyPicker';
 import { ICompany } from '@/interfaces/company.interfaces';
@@ -32,6 +33,8 @@ export const QuickAddContact: React.FC<QuickAddContactProps> = ({
   const [filterState, setFilterState] = useState<'all' | 'active' | 'inactive'>('all');
   const [clientTypeFilter, setClientTypeFilter] = useState<'all' | 'company' | 'individual'>('all');
   const [isInactive, setIsInactive] = useState(false);
+  const [role, setRole] = useState('');
+  const [notes, setNotes] = useState('');
 
   // Set initial company ID when the component mounts or when selectedCompanyId changes
   useEffect(() => {
@@ -48,6 +51,8 @@ export const QuickAddContact: React.FC<QuickAddContactProps> = ({
       setPhoneNumber('');
       setCompanyId(null);
       setIsInactive(false);
+      setRole('');
+      setNotes('');
     }
   }, [isOpen, selectedCompanyId]);
 
@@ -64,6 +69,8 @@ export const QuickAddContact: React.FC<QuickAddContactProps> = ({
         phone_number: phoneNumber,
         company_id: companyId || undefined,
         is_inactive: isInactive,
+        role: role,
+        notes: notes,
       });
       onContactAdded(newContact);
       onClose();
@@ -80,6 +87,7 @@ export const QuickAddContact: React.FC<QuickAddContactProps> = ({
       <DialogContent>
         <form onSubmit={handleSubmit}>
           <div className="space-y-4">
+            <div>
               <Label htmlFor="fullName">Full Name</Label>
               <Input
                 id="fullName"
@@ -106,6 +114,24 @@ export const QuickAddContact: React.FC<QuickAddContactProps> = ({
                 onChange={(e) => setPhoneNumber(e.target.value)}
               />
             </div>
+            <div>
+              <Label htmlFor="role">Role</Label>
+              <Input
+                id="role"
+                value={role}
+                onChange={(e) => setRole(e.target.value)}
+                placeholder="e.g., Manager, Developer, etc."
+              />
+            </div>
+            <div>
+              <Label htmlFor="notes">Notes</Label>
+              <TextArea
+                id="notes"
+                value={notes}
+                onChange={(e) => setNotes(e.target.value)}
+                placeholder="Add any additional notes about the contact..."
+              />
+            </div>
             <div>
               <Label>Company (Optional)</Label>
               <CompanyPicker
@@ -117,7 +143,8 @@ export const QuickAddContact: React.FC<QuickAddContactProps> = ({
                 clientTypeFilter={clientTypeFilter}
                 onClientTypeFilterChange={setClientTypeFilter}
               />
-           <div className="flex items-center justify-between py-2">
+            </div>
+            <div className="flex items-center justify-between py-2">
               <div className="flex items-center space-x-2">
                 <Label htmlFor="inactive-switch">Status</Label>
                 <span className="text-sm text-gray-500">
diff --git a/server/src/components/ui/TextArea.tsx b/server/src/components/ui/TextArea.tsx
index 6450b97b..8a2895d4 100644
--- a/server/src/components/ui/TextArea.tsx
+++ b/server/src/components/ui/TextArea.tsx
@@ -5,13 +5,21 @@ interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement
 }
 
 export function TextArea({ label, ...props }: TextAreaProps) {
+  const handleInput = (e: React.FormEvent<HTMLTextAreaElement>) => {
+    const target = e.target as HTMLTextAreaElement;
+    target.style.height = 'auto';
+    target.style.height = target.scrollHeight + 'px';
+  };
+
   return (
     <div className="flex flex-col">
       {label && <label className="mb-1 text-sm font-medium">{label}</label>}
       <textarea
-        className="w-full px-3 py-2 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+        className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 resize-none overflow-hidden"
+        onInput={handleInput}
+        style={{ height: 'auto' }}
         {...props}
       />
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/server/src/interfaces/contact.interfaces.tsx b/server/src/interfaces/contact.interfaces.tsx
index 42abde9c..b448abab 100644
--- a/server/src/interfaces/contact.interfaces.tsx
+++ b/server/src/interfaces/contact.interfaces.tsx
@@ -6,10 +6,12 @@ export interface IContact extends TenantEntity, ITaggable {
   company_id: string | null;
   phone_number: string;
   email: string;
+  role: string;
   date_of_birth?: string;
   created_at: string;
   updated_at: string;
   is_inactive: boolean;
+  notes?: string;
 }
 
 export interface ICSVColumnMapping {
@@ -57,4 +59,6 @@ export type MappableField =
   | 'email'
   | 'date_of_birth'
   | 'company_name'
+  | 'role'
+  | 'notes'
   | 'tags';
diff --git a/server/src/lib/actions/contact-actions/contactActions.tsx b/server/src/lib/actions/contact-actions/contactActions.tsx
index 5b580fb2..aedf8ce5 100644
--- a/server/src/lib/actions/contact-actions/contactActions.tsx
+++ b/server/src/lib/actions/contact-actions/contactActions.tsx
@@ -210,7 +210,7 @@ export async function updateContact(contactData: Partial<IContact>): Promise<ICo
     const {knex: db, tenant} = await createTenantKnex();
     if (!tenant) {
       throw new Error('Tenant not found');
-  }
+    }
     if (!contactData.contact_name_id) {
       throw new Error('Contact ID is required for updating');
     }
@@ -218,7 +218,8 @@ export async function updateContact(contactData: Partial<IContact>): Promise<ICo
     // Define valid fields
     const validFields: (keyof IContact)[] = [
       'contact_name_id', 'full_name', 'company_id', 'phone_number', 
-      'email', 'date_of_birth', 'created_at', 'updated_at', 'is_inactive'
+      'email', 'date_of_birth', 'created_at', 'updated_at', 'is_inactive',
+      'role', 'notes'
     ];
 
     // Filter and create updateData
@@ -276,7 +277,7 @@ export async function exportContactsToCSV(
   companies: ICompany[],
   contactTags: Record<string, ITag[]>
 ): Promise<string> {
-  const fields = ['full_name', 'email', 'phone_number', 'company_name', 'tags'];
+  const fields = ['full_name', 'email', 'phone_number', 'company_name', 'role', 'notes', 'tags'];
   
   const data = contacts.map((contact): Record<string, string> => {
     const company = companies.find(c => c.company_id === contact.company_id);
@@ -285,6 +286,8 @@ export async function exportContactsToCSV(
       email: contact.email,
       phone_number: contact.phone_number,
       company_name: company ? company.company_name : '',
+      role: contact.role || '',
+      notes: contact.notes || '',
       tags: (contactTags[contact.contact_name_id] || [])
         .map((tag: ITag): string => tag.tag_text)
         .join(', ')
@@ -338,7 +341,9 @@ export async function importContactsFromCSV(
             ...contactData,
             tenant: existingContact.tenant,
             updated_at: new Date().toISOString(),
-            date_of_birth: contactData.date_of_birth || undefined
+            date_of_birth: contactData.date_of_birth || undefined,
+            role: contactData.role || existingContact.role,
+            notes: contactData.notes || existingContact.notes
           };
 
           [savedContact] = await trx('contacts')
@@ -361,6 +366,8 @@ export async function importContactsFromCSV(
             company_id: contactData.company_id,
             is_inactive: contactData.is_inactive || false,
             date_of_birth: contactData.date_of_birth,
+            role: contactData.role || '',
+            notes: contactData.notes || '',
             tenant: tenant,
             created_at: new Date().toISOString(),
             updated_at: new Date().toISOString()

From ccbdb38f8d6bae05b7db99ec1bc8713fe2921fb6 Mon Sep 17 00:00:00 2001
From: Natallia Bukhtsik <natallia@nineminds.com>
Date: Fri, 8 Nov 2024 15:19:32 -0500
Subject: [PATCH 3/4] =?UTF-8?q?Added=20notes=20to=20company=20page=20but?=
 =?UTF-8?q?=20those=20pesky=20height=20calculations=20are=20still=20misbeh?=
 =?UTF-8?q?aving=20like=20flying=20monkeys.=20Toto,=20I've=20a=20feeling?=
 =?UTF-8?q?=20we're=20not=20done=20=20yet!=20=F0=9F=8C=AA=EF=B8=8F?=
 =?UTF-8?q?=E2=9C=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...00_add_notes_to_contacts_and_companies.js} |   8 +
 server/src/components/companies/Companies.tsx |   2 +
 .../components/companies/CompanyDetails.tsx   |  43 +++-
 .../src/components/companies/CompanyForm.tsx  | 207 ++++++++++++------
 server/src/components/ui/TextArea.tsx         |  95 ++++++--
 server/src/interfaces/company.interfaces.tsx  |   1 +
 server/src/lib/actions/companyActions.ts      |   4 +-
 7 files changed, 265 insertions(+), 95 deletions(-)
 rename server/migrations/{20241107120000_add_notes_to_contacts.js => 20241107120000_add_notes_to_contacts_and_companies.js} (58%)

diff --git a/server/migrations/20241107120000_add_notes_to_contacts.js b/server/migrations/20241107120000_add_notes_to_contacts_and_companies.js
similarity index 58%
rename from server/migrations/20241107120000_add_notes_to_contacts.js
rename to server/migrations/20241107120000_add_notes_to_contacts_and_companies.js
index 813ca609..b6c98765 100644
--- a/server/migrations/20241107120000_add_notes_to_contacts.js
+++ b/server/migrations/20241107120000_add_notes_to_contacts_and_companies.js
@@ -2,10 +2,18 @@ exports.up = async function(knex) {
     await knex.schema.alterTable('contacts', (table) => {
         table.text('notes');
     });
+
+    await knex.schema.alterTable('companies', (table) => {
+        table.text('notes');
+    });
 };
 
 exports.down = async function(knex) {
     await knex.schema.alterTable('contacts', (table) => {
         table.dropColumn('notes');
     });
+
+    await knex.schema.alterTable('companies', (table) => {
+        table.dropColumn('notes');
+    });
 };
diff --git a/server/src/components/companies/Companies.tsx b/server/src/components/companies/Companies.tsx
index d82b59d4..8faf117a 100644
--- a/server/src/components/companies/Companies.tsx
+++ b/server/src/components/companies/Companies.tsx
@@ -85,6 +85,8 @@ const Companies: React.FC = () => {
         address: data.address || '',
         is_inactive: data.is_inactive || false,
         is_tax_exempt: data.is_tax_exempt || false,
+        notes: data.notes,
+        client_type: data.client_type || 'company',
         tenant: data.tenant!
       };      
       await createCompany(newCompanyData);
diff --git a/server/src/components/companies/CompanyDetails.tsx b/server/src/components/companies/CompanyDetails.tsx
index 58c3159a..f2cde3c4 100644
--- a/server/src/components/companies/CompanyDetails.tsx
+++ b/server/src/components/companies/CompanyDetails.tsx
@@ -23,12 +23,13 @@ import { ArrowLeft } from 'lucide-react';
 import { getCurrentUser } from '@/lib/actions/user-actions/userActions';
 import { IUserWithRoles } from '@/interfaces/auth.interfaces';
 import { useRouter, usePathname } from 'next/navigation';
+import { TextArea } from '@/components/ui/TextArea';
 
 interface CompanyDetailsProps {
   company: ICompany;
   documents?: IDocument[];
   contacts?: IContact[];
-  isInDrawer?: boolean; // Prop to indicate if component is rendered in a drawer
+  isInDrawer?: boolean;
 }
 
 const TextDetailItem: React.FC<{ 
@@ -58,6 +59,38 @@ const TextDetailItem: React.FC<{
   );
 };
 
+const NotesDetailItem: React.FC<{ 
+  value: string; 
+  onEdit: (value: string) => void;
+  onSave: () => void;
+}> = ({ value, onEdit, onSave }) => {
+  const [localValue, setLocalValue] = useState(value);
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setLocalValue(e.target.value);
+    onEdit(e.target.value);
+  };
+  
+  return (
+    <div className="space-y-4">
+      <Text as="label" size="2" className="text-gray-700 font-medium">Notes</Text>
+      <TextArea
+        value={localValue}
+        onChange={handleChange}
+        placeholder="Add notes about this company..."
+      />
+      <div className="flex justify-end">
+        <Button 
+          onClick={onSave}
+          className="bg-blue-600 text-white hover:bg-blue-700 transition-colors"
+        >
+          Save Notes
+        </Button>
+      </div>
+    </div>
+  );
+};
+
 const SwitchDetailItem: React.FC<{ 
   value: boolean; 
   onEdit: (value: boolean) => void;
@@ -332,10 +365,10 @@ const CompanyDetails: React.FC<CompanyDetailsProps> = ({
     {
       label: "Notes",
       content: (
-        <TextDetailItem 
-          label="Notes" 
-          value={editedCompany.properties?.notes ?? ""} 
-          onEdit={(value) => handleFieldChange('properties.notes', value)}
+        <NotesDetailItem 
+          value={editedCompany.notes ?? ""}
+          onEdit={(value) => handleFieldChange('notes', value)}
+          onSave={handleSave}
         />
       )
     },
diff --git a/server/src/components/companies/CompanyForm.tsx b/server/src/components/companies/CompanyForm.tsx
index 2bccc651..1a3133ed 100644
--- a/server/src/components/companies/CompanyForm.tsx
+++ b/server/src/components/companies/CompanyForm.tsx
@@ -1,96 +1,165 @@
 // server/src/components/CompanyForm.tsx
-import React from 'react';
-import { useForm } from 'react-hook-form';
+import React, { useState } from 'react';
 import { ICompany } from '@/interfaces/company.interfaces';
 import { Input } from "@/components/ui/Input";
 import { Button } from "@/components/ui/Button";
 import { Label } from "@/components/ui/Label";
 import { Select } from "@/components/ui/Select";
+import { TextArea } from "@/components/ui/TextArea";
 
 interface CompanyFormProps {
   onSubmit: (data: Omit<ICompany, "company_id" | "created_at" | "updated_at">) => void;
 }
 
 const CompanyForm: React.FC<CompanyFormProps> = ({ onSubmit }) => {
-  const { register, handleSubmit, setValue, formState: { errors } } = useForm<Omit<ICompany, "company_id" | "created_at" | "updated_at">>();
+  const [formData, setFormData] = useState({
+    company_name: '',
+    client_type: 'company',
+    phone_no: '',
+    email: '',
+    url: '',
+    address: '',
+    notes: '',
+    is_inactive: false,
+    is_tax_exempt: false,
+    properties: {
+      industry: '',
+      company_size: '',
+      annual_revenue: ''
+    }
+  });
 
-  const clientTypeOptions = [
-    { value: 'company', label: 'Company' },
-    { value: 'individual', label: 'Individual' }
-  ];
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onSubmit(formData);
+  };
+
+  const handleChange = (field: string, value: string | boolean) => {
+    if (field.startsWith('properties.')) {
+      const propertyField = field.split('.')[1];
+      setFormData(prev => ({
+        ...prev,
+        properties: {
+          ...prev.properties,
+          [propertyField]: value
+        }
+      }));
+    } else {
+      setFormData(prev => ({
+        ...prev,
+        [field]: value
+      }));
+    }
+  };
 
   return (
-    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
-      <div>
-        <Label htmlFor="company_name">Company Name</Label>
-        <Input
-          id="company_name"
-          {...register('company_name', { required: 'Company name is required' })}
-        />
-        {errors.company_name && <p className="mt-1 text-sm text-red-600">{errors.company_name.message}</p>}
-      </div>
+    <form onSubmit={handleSubmit} className="flex flex-col h-[600px]">
+      <div className="flex-1 overflow-hidden">
+        <div className="h-full overflow-y-auto px-4 space-y-4 pb-4">
+          <div>
+            <Label htmlFor="company_name">Company Name</Label>
+            <Input
+              id="company_name"
+              value={formData.company_name}
+              onChange={(e) => handleChange('company_name', e.target.value)}
+              required
+            />
+          </div>
 
-      <div>
-        <Select
-          id="client_type"
-          label="Client Type"
-          options={clientTypeOptions}
-          onChange={(value) => setValue('client_type', value)}
-        />
-        {errors.client_type && <p className="mt-1 text-sm text-red-600">{errors.client_type.message}</p>}
-      </div>
+          <div>
+            <Select
+              id="client_type"
+              label="Client Type"
+              options={[
+                { value: 'company', label: 'Company' },
+                { value: 'individual', label: 'Individual' }
+              ]}
+              value={formData.client_type}
+              onChange={(value) => handleChange('client_type', value)}
+            />
+          </div>
 
-      <div>
-        <Label htmlFor="phone_no">Phone Number</Label>
-        <Input
-          id="phone_no"
-          {...register('phone_no')}
-        />
-      </div>
+          <div>
+            <Label htmlFor="phone_no">Phone Number</Label>
+            <Input
+              id="phone_no"
+              value={formData.phone_no}
+              onChange={(e) => handleChange('phone_no', e.target.value)}
+            />
+          </div>
 
-      <div>
-        <Label htmlFor="url">URL</Label>
-        <Input
-          id="url"
-          {...register('url')}
-        />
-      </div>
+          <div>
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              value={formData.email}
+              onChange={(e) => handleChange('email', e.target.value)}
+            />
+          </div>
 
-      <div>
-        <Label htmlFor="address">Address</Label>
-        <Input
-          id="address"
-          {...register('address')}
-        />
-      </div>
+          <div>
+            <Label htmlFor="url">URL</Label>
+            <Input
+              id="url"
+              value={formData.url}
+              onChange={(e) => handleChange('url', e.target.value)}
+            />
+          </div>
 
-      <div>
-        <Label htmlFor="industry">Industry</Label>
-        <Input
-          id="industry"
-          {...register('properties.industry')}
-        />
-      </div>
+          <div>
+            <Label htmlFor="address">Address</Label>
+            <Input
+              id="address"
+              value={formData.address}
+              onChange={(e) => handleChange('address', e.target.value)}
+            />
+          </div>
 
-      <div>
-        <Label htmlFor="company_size">Company Size</Label>
-        <Input
-          id="company_size"
-          {...register('properties.company_size')}
-        />
-      </div>
+          <div>
+            <Label htmlFor="industry">Industry</Label>
+            <Input
+              id="industry"
+              value={formData.properties.industry}
+              onChange={(e) => handleChange('properties.industry', e.target.value)}
+            />
+          </div>
+
+          <div>
+            <Label htmlFor="company_size">Company Size</Label>
+            <Input
+              id="company_size"
+              value={formData.properties.company_size}
+              onChange={(e) => handleChange('properties.company_size', e.target.value)}
+            />
+          </div>
 
-      <div>
-        <Label htmlFor="annual_revenue">Annual Revenue</Label>
-        <Input
-          id="annual_revenue"
-          {...register('properties.annual_revenue')}
-        />
+          <div>
+            <Label htmlFor="annual_revenue">Annual Revenue</Label>
+            <Input
+              id="annual_revenue"
+              value={formData.properties.annual_revenue}
+              onChange={(e) => handleChange('properties.annual_revenue', e.target.value)}
+            />
+          </div>
+
+          <div>
+            <Label htmlFor="notes">Notes</Label>
+            <TextArea
+              id="notes"
+              value={formData.notes}
+              onChange={(e) => handleChange('notes', e.target.value)}
+              placeholder="Add any additional notes"
+            />
+          </div>
+        </div>
       </div>
 
-      <Button type="submit">
-        Create Client
-      </Button>
+      <div className="pt-4 mt-4 border-t">
+        <Button type="submit">
+          Create Client
+        </Button>
+      </div>
     </form>
   );
 };
diff --git a/server/src/components/ui/TextArea.tsx b/server/src/components/ui/TextArea.tsx
index 8a2895d4..8b85c881 100644
--- a/server/src/components/ui/TextArea.tsx
+++ b/server/src/components/ui/TextArea.tsx
@@ -1,25 +1,80 @@
-import React from 'react';
+import React, { forwardRef, useLayoutEffect, useEffect, useRef } from 'react';
 
 interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
   label?: string;
 }
 
-export function TextArea({ label, ...props }: TextAreaProps) {
-  const handleInput = (e: React.FormEvent<HTMLTextAreaElement>) => {
-    const target = e.target as HTMLTextAreaElement;
-    target.style.height = 'auto';
-    target.style.height = target.scrollHeight + 'px';
-  };
-
-  return (
-    <div className="flex flex-col">
-      {label && <label className="mb-1 text-sm font-medium">{label}</label>}
-      <textarea
-        className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 resize-none overflow-hidden"
-        onInput={handleInput}
-        style={{ height: 'auto' }}
-        {...props}
-      />
-    </div>
-  );
-}
+export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
+  ({ label, onChange, className, value = '', ...props }, ref) => {
+    // Keep track of whether initial adjustment has been done
+    const initialAdjustmentDone = useRef(false);
+
+    const adjustHeight = (element: HTMLTextAreaElement) => {
+      // Force a reflow
+      void element.offsetHeight;
+      
+      // Reset height to get proper scrollHeight
+      element.style.height = 'auto';
+      
+      // Set new height
+      const newHeight = element.scrollHeight;
+      element.style.height = `${newHeight}px`;
+    };
+
+    // Immediate mount effect for initial content
+    useEffect(() => {
+      if (!initialAdjustmentDone.current && ref && 'current' in ref && ref.current) {
+        const textarea = ref.current;
+        
+        // Force immediate height adjustment
+        const adjustInitialHeight = () => {
+          // Force a reflow first
+          void textarea.offsetHeight;
+          textarea.style.height = 'auto';
+          const scrollHeight = textarea.scrollHeight;
+          textarea.style.height = `${scrollHeight}px`;
+          initialAdjustmentDone.current = true;
+        };
+
+        // Run adjustment immediately and after a small delay
+        adjustInitialHeight();
+        setTimeout(adjustInitialHeight, 0);
+      }
+    }, []);
+
+    // Handle subsequent value changes
+    useLayoutEffect(() => {
+      if (ref && 'current' in ref && ref.current) {
+        adjustHeight(ref.current);
+      }
+    }, [value]);
+
+    const handleInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      adjustHeight(e.target);
+      
+      if (onChange) {
+        onChange(e);
+      }
+    };
+
+    return (
+      <div className="mb-4">
+        {label && (
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            {label}
+          </label>
+        )}
+        <textarea
+          ref={ref}
+          rows={1}
+          className={`w-full px-3 py-[0.4375rem] border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none overflow-hidden whitespace-pre-wrap ${className}`}
+          onChange={handleInput}
+          value={value}
+          {...props}
+        />
+      </div>
+    );
+  }
+);
+
+TextArea.displayName = 'TextArea';
diff --git a/server/src/interfaces/company.interfaces.tsx b/server/src/interfaces/company.interfaces.tsx
index d339f5d3..88f0c1dd 100644
--- a/server/src/interfaces/company.interfaces.tsx
+++ b/server/src/interfaces/company.interfaces.tsx
@@ -12,6 +12,7 @@ export interface ICompany extends TenantEntity {
   is_inactive: boolean;
   client_type?: string;
   tax_id_number?: string; 
+  notes?: string;
   properties?: {
     industry?: string;
     company_size?: string;
diff --git a/server/src/lib/actions/companyActions.ts b/server/src/lib/actions/companyActions.ts
index eeb80f48..f2360fd8 100644
--- a/server/src/lib/actions/companyActions.ts
+++ b/server/src/lib/actions/companyActions.ts
@@ -359,7 +359,8 @@ export async function exportCompaniesToCSV(companies: ICompany[]): Promise<strin
     'preferred_payment_method',
     'auto_invoice',
     'invoice_delivery_method',
-    'tax_region'
+    'tax_region',
+    'notes' 
   ];
 
   return unparseCSV(companies, fields);
@@ -464,6 +465,7 @@ export async function importCompaniesFromCSV(
             tax_region: companyData.tax_region || '',
             tax_id_number: companyData.tax_id_number || '',
             tax_exemption_certificate: companyData.tax_exemption_certificate || '',
+            notes: companyData.notes || '', // Added notes field
             created_at: new Date().toISOString(),
             updated_at: new Date().toISOString()
           };

From fa14e723f61cfcf675d87c3536f6bc8460dc260f Mon Sep 17 00:00:00 2001
From: Natallia Bukhtsik <natallia@nineminds.com>
Date: Mon, 11 Nov 2024 11:20:06 -0500
Subject: [PATCH 4/4] =?UTF-8?q?=F0=9F=8C=88=20Click=20those=20ruby=20heels?=
 =?UTF-8?q?:=20Fixed=20height=20calculations=20to=20match=20Emerald=20City?=
 =?UTF-8?q?=20standards?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server/src/components/ui/TextArea.tsx | 85 +++++++++++++++++----------
 1 file changed, 55 insertions(+), 30 deletions(-)

diff --git a/server/src/components/ui/TextArea.tsx b/server/src/components/ui/TextArea.tsx
index 8b85c881..fc29f717 100644
--- a/server/src/components/ui/TextArea.tsx
+++ b/server/src/components/ui/TextArea.tsx
@@ -6,51 +6,60 @@ interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement
 
 export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
   ({ label, onChange, className, value = '', ...props }, ref) => {
-    // Keep track of whether initial adjustment has been done
-    const initialAdjustmentDone = useRef(false);
+    const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+    const combinedRef = (node: HTMLTextAreaElement) => {
+      textareaRef.current = node;
+      if (typeof ref === 'function') {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    };
 
     const adjustHeight = (element: HTMLTextAreaElement) => {
-      // Force a reflow
-      void element.offsetHeight;
-      
-      // Reset height to get proper scrollHeight
+      // Temporarily collapse to get the minimum height
       element.style.height = 'auto';
       
-      // Set new height
-      const newHeight = element.scrollHeight;
+      // Get the computed line height to ensure proper minimum height
+      const computedStyle = window.getComputedStyle(element);
+      const lineHeight = parseInt(computedStyle.lineHeight);
+      
+      // Calculate height based on content
+      const newHeight = Math.max(
+        element.scrollHeight,
+        lineHeight * 1.5 // Minimum height of ~1.5 lines
+      );
+      
+      // Set the new height
       element.style.height = `${newHeight}px`;
     };
 
-    // Immediate mount effect for initial content
+    // Initial setup and content-based adjustment
     useEffect(() => {
-      if (!initialAdjustmentDone.current && ref && 'current' in ref && ref.current) {
-        const textarea = ref.current;
+      if (textareaRef.current) {
+        const element = textareaRef.current;
         
-        // Force immediate height adjustment
-        const adjustInitialHeight = () => {
-          // Force a reflow first
-          void textarea.offsetHeight;
-          textarea.style.height = 'auto';
-          const scrollHeight = textarea.scrollHeight;
-          textarea.style.height = `${scrollHeight}px`;
-          initialAdjustmentDone.current = true;
-        };
-
-        // Run adjustment immediately and after a small delay
-        adjustInitialHeight();
-        setTimeout(adjustInitialHeight, 0);
+        // Ensure proper initial display
+        element.style.height = 'auto';
+        element.style.overflow = 'hidden';
+        
+        // Force a reflow and adjust height
+        void element.offsetHeight;
+        adjustHeight(element);
       }
     }, []);
 
-    // Handle subsequent value changes
+    // Handle value changes
     useLayoutEffect(() => {
-      if (ref && 'current' in ref && ref.current) {
-        adjustHeight(ref.current);
+      if (textareaRef.current) {
+        adjustHeight(textareaRef.current);
       }
     }, [value]);
 
     const handleInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-      adjustHeight(e.target);
+      if (textareaRef.current) {
+        adjustHeight(textareaRef.current);
+      }
       
       if (onChange) {
         onChange(e);
@@ -65,9 +74,25 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
           </label>
         )}
         <textarea
-          ref={ref}
+          ref={combinedRef}
           rows={1}
-          className={`w-full px-3 py-[0.4375rem] border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none overflow-hidden whitespace-pre-wrap ${className}`}
+          className={`
+            w-full 
+            px-3 
+            py-2 
+            border 
+            border-gray-300 
+            rounded-md 
+            shadow-sm 
+            focus:outline-none 
+            focus:ring-2 
+            focus:ring-blue-500 
+            focus:border-blue-500 
+            resize-none 
+            overflow-hidden 
+            whitespace-pre-wrap
+            ${className}
+          `}
           onChange={handleInput}
           value={value}
           {...props}