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/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>[];