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,
 ];