Add all filters to tables + make column width fixed (#133)

* Add additional filters on companies and people page

* Make colunn width fixed

* Remove duplicate declaration of Unknown type

front/src/pages/companies/companies-columns.tsx

@@ -50,6 +50,7 @@ export const useCompaniesColumns = () => {
             onChange={props.row.getToggleSelectedHandler()}
           />
         ),
+        size: 25,
       },
       columnHelper.accessor('name', {
         header: () => (
@@ -68,6 +69,7 @@ export const useCompaniesColumns = () => {
             ChipComponent={CompanyChip}
           />
         ),
+        size: 120,
       }),
       columnHelper.accessor('employees', {
         header: () => (
@@ -89,6 +91,7 @@ export const useCompaniesColumns = () => {
             }}
           />
         ),
+        size: 70,
       }),
       columnHelper.accessor('domainName', {
         header: () => (
@@ -104,6 +107,7 @@ export const useCompaniesColumns = () => {
             }}
           />
         ),
+        size: 100,
       }),
       columnHelper.accessor('address', {
         header: () => (
@@ -119,6 +123,7 @@ export const useCompaniesColumns = () => {
             }}
           />
         ),
+        size: 170,
       }),
       columnHelper.accessor('creationDate', {
         header: () => (
@@ -134,6 +139,7 @@ export const useCompaniesColumns = () => {
             }}
           />
         ),
+        size: 70,
       }),
       columnHelper.accessor('accountOwner', {
         header: () => (

front/src/pages/companies/companies-filters.tsx

@@ -4,9 +4,12 @@ import {
   TbLink,
   TbMapPin,
   TbSum,
+  TbUser,
 } from 'react-icons/tb';
 import { Company } from '../../interfaces/entities/company.interface';
 import { FilterConfigType } from '../../interfaces/filters/interface';
+import { SEARCH_USER_QUERY } from '../../services/api/search/search';
+import { User, mapToUser } from '../../interfaces/entities/user.interface';
 
 export const nameFilter = {
   key: 'company_name',
@@ -31,6 +34,33 @@ export const nameFilter = {
   ],
 } satisfies FilterConfigType<Company, string>;
 
+export const employeesFilter = {
+  key: 'company_employees',
+  label: 'Employees',
+  icon: <TbSum size={16} />,
+  type: 'text',
+  operands: [
+    {
+      label: 'Greater than',
+      id: 'greater_than',
+      whereTemplate: (searchString) => ({
+        employees: {
+          _gte: isNaN(Number(searchString)) ? undefined : Number(searchString),
+        },
+      }),
+    },
+    {
+      label: 'Less than',
+      id: 'less_than',
+      whereTemplate: (searchString) => ({
+        employees: {
+          _lte: isNaN(Number(searchString)) ? undefined : Number(searchString),
+        },
+      }),
+    },
+  ],
+} satisfies FilterConfigType<Company, string>;
+
 export const urlFilter = {
   key: 'company_domain_name',
   label: 'Url',
@@ -77,33 +107,6 @@ export const addressFilter = {
   ],
 } satisfies FilterConfigType<Company, string>;
 
-export const employeesFilter = {
-  key: 'company_employees',
-  label: 'Employees',
-  icon: <TbSum size={16} />,
-  type: 'text',
-  operands: [
-    {
-      label: 'Greater than',
-      id: 'greater_than',
-      whereTemplate: (searchString) => ({
-        employees: {
-          _gte: isNaN(Number(searchString)) ? undefined : Number(searchString),
-        },
-      }),
-    },
-    {
-      label: 'Less than',
-      id: 'less_than',
-      whereTemplate: (searchString) => ({
-        employees: {
-          _lte: isNaN(Number(searchString)) ? undefined : Number(searchString),
-        },
-      }),
-    },
-  ],
-} satisfies FilterConfigType<Company, string>;
-
 export const creationDateFilter = {
   key: 'company_created_at',
   label: 'Created At',
@@ -131,10 +134,45 @@ export const creationDateFilter = {
   ],
 } satisfies FilterConfigType<Company, string>;
 
+export const accountOwnerFilter = {
+  key: 'account_owner_name',
+  label: 'Account Owner',
+  icon: <TbUser size={16} />,
+  type: 'relation',
+  searchConfig: {
+    query: SEARCH_USER_QUERY,
+    template: (searchString: string) => ({
+      displayName: { _ilike: `%${searchString}%` },
+    }),
+    resultMapper: (data) => ({
+      value: mapToUser(data),
+      render: (owner) => owner.displayName,
+    }),
+  },
+  selectedValueRender: (owner) => owner.displayName || '',
+  operands: [
+    {
+      label: 'Is',
+      id: 'is',
+      whereTemplate: (owner) => ({
+        account_owner: { displayName: { _eq: owner.displayName } },
+      }),
+    },
+    {
+      label: 'Is not',
+      id: 'is_not',
+      whereTemplate: (owner) => ({
+        _not: { account_owner: { displayName: { _eq: owner.displayName } } },
+      }),
+    },
+  ],
+} satisfies FilterConfigType<Company, User>;
+
 export const availableFilters = [
   nameFilter,
+  employeesFilter,
   urlFilter,
   addressFilter,
-  employeesFilter,
   creationDateFilter,
+  accountOwnerFilter,
 ];

front/src/pages/people/people-columns.tsx

@@ -53,6 +53,7 @@ export const usePeopleColumns = () => {
             onChange={props.row.getToggleSelectedHandler()}
           />
         ),
+        size: 25,
       },
       columnHelper.accessor('firstname', {
         header: () => (
@@ -70,6 +71,7 @@ export const usePeopleColumns = () => {
             }}
           />
         ),
+        size: 200,
       }),
       columnHelper.accessor('email', {
         header: () => (
@@ -86,6 +88,7 @@ export const usePeopleColumns = () => {
             }}
           />
         ),
+        size: 200,
       }),
       columnHelper.accessor('company', {
         header: () => (
@@ -125,6 +128,7 @@ export const usePeopleColumns = () => {
             }
           />
         ),
+        size: 150,
       }),
       columnHelper.accessor('phone', {
         header: () => (
@@ -141,6 +145,7 @@ export const usePeopleColumns = () => {
             }}
           />
         ),
+        size: 130,
       }),
       columnHelper.accessor('creationDate', {
         header: () => (
@@ -156,6 +161,7 @@ export const usePeopleColumns = () => {
             }}
           />
         ),
+        size: 100,
       }),
       columnHelper.accessor('city', {
         header: () => (

front/src/pages/people/people-filters.tsx

@@ -5,7 +5,14 @@ import {
   mapToCompany,
 } from '../../interfaces/entities/company.interface';
 import { FilterConfigType } from '../../interfaces/filters/interface';
-import { TbBuilding, TbMail, TbMapPin, TbUser } from 'react-icons/tb';
+import {
+  TbBuilding,
+  TbCalendar,
+  TbMail,
+  TbMapPin,
+  TbPhone,
+  TbUser,
+} from 'react-icons/tb';
 
 export const fullnameFilter = {
   key: 'fullname',
@@ -38,6 +45,29 @@ export const fullnameFilter = {
   ],
 } satisfies FilterConfigType<Person, string>;
 
+export const emailFilter = {
+  key: 'email',
+  label: 'Email',
+  icon: <TbMail size={16} />,
+  type: 'text',
+  operands: [
+    {
+      label: 'Contains',
+      id: 'like',
+      whereTemplate: (searchString) => ({
+        email: { _ilike: `%${searchString}%` },
+      }),
+    },
+    {
+      label: 'Does not contain',
+      id: 'not_like',
+      whereTemplate: (searchString) => ({
+        _not: { email: { _ilike: `%${searchString}%` } },
+      }),
+    },
+  ],
+} satisfies FilterConfigType<Person, string>;
+
 export const companyFilter = {
   key: 'company_name',
   label: 'Company',
@@ -72,29 +102,56 @@ export const companyFilter = {
   ],
 } satisfies FilterConfigType<Person, Company>;
 
-export const emailFilter = {
-  key: 'email',
-  label: 'Email',
-  icon: <TbMail size={16} />,
+export const phoneFilter = {
+  key: 'phone',
+  label: 'Phone',
+  icon: <TbPhone size={16} />,
   type: 'text',
   operands: [
     {
       label: 'Contains',
       id: 'like',
       whereTemplate: (searchString) => ({
-        email: { _ilike: `%${searchString}%` },
+        phone: { _ilike: `%${searchString}%` },
       }),
     },
     {
       label: 'Does not contain',
       id: 'not_like',
       whereTemplate: (searchString) => ({
-        _not: { email: { _ilike: `%${searchString}%` } },
+        _not: { phone: { _ilike: `%${searchString}%` } },
       }),
     },
   ],
 } satisfies FilterConfigType<Person, string>;
 
+export const creationDateFilter = {
+  key: 'person_created_at',
+  label: 'Created At',
+  icon: <TbCalendar size={16} />,
+  type: 'date',
+  operands: [
+    {
+      label: 'Greater than',
+      id: 'greater_than',
+      whereTemplate: (searchString) => ({
+        created_at: {
+          _gte: searchString,
+        },
+      }),
+    },
+    {
+      label: 'Less than',
+      id: 'less_than',
+      whereTemplate: (searchString) => ({
+        created_at: {
+          _lte: searchString,
+        },
+      }),
+    },
+  ],
+} satisfies FilterConfigType<Company, string>;
+
 export const cityFilter = {
   key: 'city',
   label: 'City',
@@ -120,7 +177,9 @@ export const cityFilter = {
 
 export const availableFilters = [
   fullnameFilter,
-  companyFilter,
   emailFilter,
+  companyFilter,
+  phoneFilter,
+  creationDateFilter,
   cityFilter,
 ] satisfies FilterConfigType<Person>[];