test V1.1

.gitignore

@@ -1,3 +1,8 @@
 node_modules/
 */node_modules/
 */build/
+
+**/node_modules/
+**/build/
+.DS_Store
+.env

backend/src/db/api/companies.js

@@ -16,6 +16,26 @@ module.exports = class CompaniesDBApi {
             {
                 id: data.id || undefined,
 
+        name: data.name
+        ||
+        null
+            ,
+
+        address: data.address
+        ||
+        null
+            ,
+
+        email: data.email
+        ||
+        null
+            ,
+
+        phonenumber: data.phonenumber
+        ||
+        null
+            ,
+
             importHash: data.importHash || null,
             createdById: currentUser.id,
             updatedById: currentUser.id,
@@ -34,6 +54,26 @@ module.exports = class CompaniesDBApi {
         const companiesData = data.map((item, index) => ({
                 id: item.id || undefined,
 
+                name: item.name
+            ||
+            null
+            ,
+
+                address: item.address
+            ||
+            null
+            ,
+
+                email: item.email
+            ||
+            null
+            ,
+
+                phonenumber: item.phonenumber
+            ||
+            null
+            ,
+
             importHash: item.importHash || null,
             createdById: currentUser.id,
             updatedById: currentUser.id,
@@ -54,6 +94,14 @@ module.exports = class CompaniesDBApi {
 
         const updatePayload = {};
 
+        if (data.name !== undefined) updatePayload.name = data.name;
+
+        if (data.address !== undefined) updatePayload.address = data.address;
+
+        if (data.email !== undefined) updatePayload.email = data.email;
+
+        if (data.phonenumber !== undefined) updatePayload.phonenumber = data.phonenumber;
+
         updatePayload.updatedById = currentUser.id;
 
         await companies.update(updatePayload, {transaction});
@@ -149,6 +197,50 @@ module.exports = class CompaniesDBApi {
                 };
             }
 
+                if (filter.name) {
+                    where = {
+                        ...where,
+                        [Op.and]: Utils.ilike(
+                            'companies',
+                            'name',
+                            filter.name,
+                        ),
+                    };
+                }
+
+                if (filter.address) {
+                    where = {
+                        ...where,
+                        [Op.and]: Utils.ilike(
+                            'companies',
+                            'address',
+                            filter.address,
+                        ),
+                    };
+                }
+
+                if (filter.email) {
+                    where = {
+                        ...where,
+                        [Op.and]: Utils.ilike(
+                            'companies',
+                            'email',
+                            filter.email,
+                        ),
+                    };
+                }
+
+                if (filter.phonenumber) {
+                    where = {
+                        ...where,
+                        [Op.and]: Utils.ilike(
+                            'companies',
+                            'phonenumber',
+                            filter.phonenumber,
+                        ),
+                    };
+                }
+
             if (filter.active !== undefined) {
                 where = {
                     ...where,
@@ -219,7 +311,7 @@ module.exports = class CompaniesDBApi {
                     { ['id']: Utils.uuid(query) },
                     Utils.ilike(
                         'companies',
-                        'id',
+                        'name',
                         query,
                     ),
                 ],
@@ -227,16 +319,16 @@ module.exports = class CompaniesDBApi {
         }
 
         const records = await db.companies.findAll({
-            attributes: [ 'id', 'id' ],
+            attributes: [ 'id', 'name' ],
             where,
             limit: limit ? Number(limit) : undefined,
             offset: offset ? Number(offset) : undefined,
-            orderBy: [['id', 'ASC']],
+            orderBy: [['name', 'ASC']],
         });
 
         return records.map((record) => ({
             id: record.id,
-            label: record.id,
+            label: record.name,
         }));
     }
 

backend/src/db/migrations/1753424341635.js

@@ -0,0 +1,54 @@
+module.exports = {
+    /**
+     * @param {QueryInterface} queryInterface
+     * @param {Sequelize} Sequelize
+     * @returns {Promise<void>}
+     */
+    async up(queryInterface, Sequelize) {
+        /**
+         * @type {Transaction}
+         */
+        const transaction = await queryInterface.sequelize.transaction();
+        try {
+
+                    await queryInterface.addColumn(
+                      'companies',
+                      'name',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+
+                      },
+                      { transaction }
+                    );
+
+            await transaction.commit();
+        } catch (err) {
+            await transaction.rollback();
+            throw err;
+        }
+    },
+    /**
+     * @param {QueryInterface} queryInterface
+     * @param {Sequelize} Sequelize
+     * @returns {Promise<void>}
+     */
+    async down(queryInterface, Sequelize) {
+        /**
+         * @type {Transaction}
+         */
+        const transaction = await queryInterface.sequelize.transaction();
+        try {
+
+                    await queryInterface.removeColumn(
+                        'companies',
+                        'name',
+                        { transaction }
+                    );
+
+            await transaction.commit();
+        } catch (err) {
+            await transaction.rollback();
+            throw err;
+        }
+    }
+};

backend/src/db/migrations/1753424347349.js

@@ -0,0 +1,54 @@
+module.exports = {
+    /**
+     * @param {QueryInterface} queryInterface
+     * @param {Sequelize} Sequelize
+     * @returns {Promise<void>}
+     */
+    async up(queryInterface, Sequelize) {
+        /**
+         * @type {Transaction}
+         */
+        const transaction = await queryInterface.sequelize.transaction();
+        try {
+
+                    await queryInterface.addColumn(
+                      'companies',
+                      'address',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+
+                      },
+                      { transaction }
+                    );
+
+            await transaction.commit();
+        } catch (err) {
+            await transaction.rollback();
+            throw err;
+        }
+    },
+    /**
+     * @param {QueryInterface} queryInterface
+     * @param {Sequelize} Sequelize
+     * @returns {Promise<void>}
+     */
+    async down(queryInterface, Sequelize) {
+        /**
+         * @type {Transaction}
+         */
+        const transaction = await queryInterface.sequelize.transaction();
+        try {
+
+                    await queryInterface.removeColumn(
+                        'companies',
+                        'address',
+                        { transaction }
+                    );
+
+            await transaction.commit();
+        } catch (err) {
+            await transaction.rollback();
+            throw err;
+        }
+    }
+};

backend/src/db/migrations/1753424353903.js

@@ -0,0 +1,54 @@
+module.exports = {
+    /**
+     * @param {QueryInterface} queryInterface
+     * @param {Sequelize} Sequelize
+     * @returns {Promise<void>}
+     */
+    async up(queryInterface, Sequelize) {
+        /**
+         * @type {Transaction}
+         */
+        const transaction = await queryInterface.sequelize.transaction();
+        try {
+
+                    await queryInterface.addColumn(
+                      'companies',
+                      'email',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+
+                      },
+                      { transaction }
+                    );
+
+            await transaction.commit();
+        } catch (err) {
+            await transaction.rollback();
+            throw err;
+        }
+    },
+    /**
+     * @param {QueryInterface} queryInterface
+     * @param {Sequelize} Sequelize
+     * @returns {Promise<void>}
+     */
+    async down(queryInterface, Sequelize) {
+        /**
+         * @type {Transaction}
+         */
+        const transaction = await queryInterface.sequelize.transaction();
+        try {
+
+                    await queryInterface.removeColumn(
+                        'companies',
+                        'email',
+                        { transaction }
+                    );
+
+            await transaction.commit();
+        } catch (err) {
+            await transaction.rollback();
+            throw err;
+        }
+    }
+};

backend/src/db/migrations/1753424357878.js

@@ -0,0 +1,54 @@
+module.exports = {
+    /**
+     * @param {QueryInterface} queryInterface
+     * @param {Sequelize} Sequelize
+     * @returns {Promise<void>}
+     */
+    async up(queryInterface, Sequelize) {
+        /**
+         * @type {Transaction}
+         */
+        const transaction = await queryInterface.sequelize.transaction();
+        try {
+
+                    await queryInterface.addColumn(
+                      'companies',
+                      'phonenumber',
+                      {
+                          type: Sequelize.DataTypes.TEXT,
+
+                      },
+                      { transaction }
+                    );
+
+            await transaction.commit();
+        } catch (err) {
+            await transaction.rollback();
+            throw err;
+        }
+    },
+    /**
+     * @param {QueryInterface} queryInterface
+     * @param {Sequelize} Sequelize
+     * @returns {Promise<void>}
+     */
+    async down(queryInterface, Sequelize) {
+        /**
+         * @type {Transaction}
+         */
+        const transaction = await queryInterface.sequelize.transaction();
+        try {
+
+                    await queryInterface.removeColumn(
+                        'companies',
+                        'phonenumber',
+                        { transaction }
+                    );
+
+            await transaction.commit();
+        } catch (err) {
+            await transaction.rollback();
+            throw err;
+        }
+    }
+};

backend/src/db/migrations/1753424362035.js

@@ -0,0 +1,38 @@
+module.exports = {
+    /**
+     * @param {QueryInterface} queryInterface
+     * @param {Sequelize} Sequelize
+     * @returns {Promise<void>}
+     */
+    async up(queryInterface, Sequelize) {
+        /**
+         * @type {Transaction}
+         */
+        const transaction = await queryInterface.sequelize.transaction();
+        try {
+
+            await transaction.commit();
+        } catch (err) {
+            await transaction.rollback();
+            throw err;
+        }
+    },
+    /**
+     * @param {QueryInterface} queryInterface
+     * @param {Sequelize} Sequelize
+     * @returns {Promise<void>}
+     */
+    async down(queryInterface, Sequelize) {
+        /**
+         * @type {Transaction}
+         */
+        const transaction = await queryInterface.sequelize.transaction();
+        try {
+
+            await transaction.commit();
+        } catch (err) {
+            await transaction.rollback();
+            throw err;
+        }
+    }
+};

backend/src/db/migrations/1753425156635.js

@@ -0,0 +1,38 @@
+module.exports = {
+    /**
+     * @param {QueryInterface} queryInterface
+     * @param {Sequelize} Sequelize
+     * @returns {Promise<void>}
+     */
+    async up(queryInterface, Sequelize) {
+        /**
+         * @type {Transaction}
+         */
+        const transaction = await queryInterface.sequelize.transaction();
+        try {
+
+            await transaction.commit();
+        } catch (err) {
+            await transaction.rollback();
+            throw err;
+        }
+    },
+    /**
+     * @param {QueryInterface} queryInterface
+     * @param {Sequelize} Sequelize
+     * @returns {Promise<void>}
+     */
+    async down(queryInterface, Sequelize) {
+        /**
+         * @type {Transaction}
+         */
+        const transaction = await queryInterface.sequelize.transaction();
+        try {
+
+            await transaction.commit();
+        } catch (err) {
+            await transaction.rollback();
+            throw err;
+        }
+    }
+};

backend/src/db/models/companies.js

@@ -14,6 +14,26 @@ module.exports = function(sequelize, DataTypes) {
         primaryKey: true,
       },
 
+name: {
+        type: DataTypes.TEXT,
+
+      },
+
+address: {
+        type: DataTypes.TEXT,
+
+      },
+
+email: {
+        type: DataTypes.TEXT,
+
+      },
+
+phonenumber: {
+        type: DataTypes.TEXT,
+
+      },
+
       importHash: {
         type: DataTypes.STRING(255),
         allowNull: true,

backend/src/routes/companies.js

@@ -17,6 +17,19 @@ const { parse } = require('json2csv');
  *        type: object
  *        properties:
 
+ *          name:
+ *            type: string
+ *            default: name
+ *          address:
+ *            type: string
+ *            default: address
+ *          email:
+ *            type: string
+ *            default: email
+ *          phonenumber:
+ *            type: string
+ *            default: phonenumber
+
  */
 
 /**
@@ -272,7 +285,7 @@ router.get('/', wrapAsync(async (req, res) => {
     req.query, { currentUser }
   );
   if (filetype && filetype === 'csv') {
-    const fields = ['id',
+    const fields = ['id','name','address','email','phonenumber',
 
         ];
     const opts = { fields };

backend/src/services/search.js

@@ -71,6 +71,18 @@ module.exports = class SearchService {
 
             ],
 
+            "companies": [
+
+                "name",
+
+                "address",
+
+                "email",
+
+                "phonenumber",
+
+            ],
+
       };
       const columnsInt = {
 

frontend/json/runtimeError.json

@@ -0,0 +1 @@
+{}

frontend/src/components/Companies/CardCompanies.tsx

@@ -46,7 +46,7 @@ const CardCompanies = ({
             }`}
           >
               <Link href={`/companies/companies-view/?id=${item.id}`} className='text-lg font-bold leading-6 line-clamp-1'>
-                  {item.id}
+                  {item.name}
               </Link>
 
               <div className='ml-auto'>
@@ -61,6 +61,51 @@ const CardCompanies = ({
             </div>
             <dl className='divide-y dark:divide-dark-700 px-6 py-4 text-sm leading-6 h-64 overflow-y-auto'>
 
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='text-gray-500 dark:text-dark-600'>Name</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.name }
+                        </div>
+                    </dd>
+                </div>
+
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='text-gray-500 dark:text-dark-600'>Address</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.address }
+                        </div>
+                    </dd>
+                </div>
+
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='text-gray-500 dark:text-dark-600'>Email</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.email }
+                        </div>
+                    </dd>
+                </div>
+
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='text-gray-500 dark:text-dark-600'>Phonenumber</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.phonenumber }
+                        </div>
+                    </dd>
+                </div>
+
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='text-gray-500 dark:text-dark-600'>Buildings</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.buildings }
+                        </div>
+                    </dd>
+                </div>
+
             </dl>
           </li>
         ))}

frontend/src/components/Companies/ListCompanies.tsx

@@ -35,6 +35,31 @@ const ListCompanies = ({ companies, loading, onDelete, currentPage, numPages, on
                               }
                           >
 
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs text-gray-500'}>Name</p>
+                                <p className={'line-clamp-2'}>{ item.name }</p>
+                            </div>
+
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs text-gray-500'}>Address</p>
+                                <p className={'line-clamp-2'}>{ item.address }</p>
+                            </div>
+
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs text-gray-500'}>Email</p>
+                                <p className={'line-clamp-2'}>{ item.email }</p>
+                            </div>
+
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs text-gray-500'}>Phonenumber</p>
+                                <p className={'line-clamp-2'}>{ item.phonenumber }</p>
+                            </div>
+
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs text-gray-500'}>Buildings</p>
+                                <p className={'line-clamp-2'}>{ item.buildings }</p>
+                            </div>
+
                           </Link>
                             <ListActionsPopover
                               onDelete={onDelete}

frontend/src/components/Companies/configureCompaniesCols.tsx

@@ -27,6 +27,71 @@ export const loadColumns = async (
     }
     return [
 
+        {
+            field: 'name',
+            headerName: 'Name',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+
+            editable: true,
+
+        },
+
+        {
+            field: 'address',
+            headerName: 'Address',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+
+            editable: true,
+
+        },
+
+        {
+            field: 'email',
+            headerName: 'Email',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+
+            editable: true,
+
+        },
+
+        {
+            field: 'phonenumber',
+            headerName: 'Phonenumber',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+
+            editable: true,
+
+        },
+
+        {
+            field: 'buildings',
+            headerName: 'Buildings',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+
+            editable: true,
+
+        },
+
         {
             field: 'actions',
             type: 'actions',

frontend/src/components/Users/CardUsers.tsx

@@ -115,6 +115,15 @@ const CardUsers = ({
                     </dd>
                 </div>
 
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='text-gray-500 dark:text-dark-600'>Reimbursements</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.reimbursements }
+                        </div>
+                    </dd>
+                </div>
+
             </dl>
           </li>
         ))}

frontend/src/components/Users/ListUsers.tsx

@@ -65,6 +65,11 @@ const ListUsers = ({ users, loading, onDelete, currentPage, numPages, onPageChan
                                 <p className={'line-clamp-2'}>{ item.avatar }</p>
                             </div>
 
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs text-gray-500'}>Reimbursements</p>
+                                <p className={'line-clamp-2'}>{ item.reimbursements }</p>
+                            </div>
+
                           </Link>
                             <ListActionsPopover
                               onDelete={onDelete}

frontend/src/components/Users/configureUsersCols.tsx

@@ -106,6 +106,19 @@ export const loadColumns = async (
 
         },
 
+        {
+            field: 'reimbursements',
+            headerName: 'Reimbursements',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+
+            editable: true,
+
+        },
+
         {
             field: 'actions',
             type: 'actions',

frontend/src/helpers/dataFormatter.js

@@ -96,23 +96,42 @@ export default {
             return {label: val.station_id, id: val.id}
         },
 
+        reimbursementsManyListFormatter(val) {
+            if (!val || !val.length) return []
+            return val.map((item) => item.request_date)
+        },
+        reimbursementsOneListFormatter(val) {
+            if (!val) return ''
+            return val.request_date
+        },
+        reimbursementsManyListFormatterEdit(val) {
+            if (!val || !val.length) return []
+            return val.map((item) => {
+              return {id: item.id, label: item.request_date}
+            });
+        },
+        reimbursementsOneListFormatterEdit(val) {
+            if (!val) return ''
+            return {label: val.request_date, id: val.id}
+        },
+
         companiesManyListFormatter(val) {
             if (!val || !val.length) return []
-            return val.map((item) => item.id)
+            return val.map((item) => item.name)
         },
         companiesOneListFormatter(val) {
             if (!val) return ''
-            return val.id
+            return val.name
         },
         companiesManyListFormatterEdit(val) {
             if (!val || !val.length) return []
             return val.map((item) => {
-              return {id: item.id, label: item.id}
+              return {id: item.id, label: item.name}
             });
         },
         companiesOneListFormatterEdit(val) {
             if (!val) return ''
-            return {label: val.id, id: val.id}
+            return {label: val.name, id: val.id}
         },
 
 }

frontend/src/pages/buildings/[buildingsId].tsx

@@ -114,7 +114,7 @@ const EditBuildings = () => {
             options={initialValues.company}
             itemRef={'companies'}
 
-            showField={'id'}
+            showField={'name'}
 
         ></Field>
     </FormField>

frontend/src/pages/buildings/buildings-edit.tsx

@@ -112,7 +112,7 @@ const EditBuildingsPage = () => {
             options={initialValues.company}
             itemRef={'companies'}
 
-            showField={'id'}
+            showField={'name'}
 
         ></Field>
     </FormField>

frontend/src/pages/buildings/buildings-view.tsx

@@ -62,7 +62,7 @@ const BuildingsView = () => {
                 <div className={'mb-4'}>
                     <p className={'block font-bold mb-2'}>Company</p>
 
-                        <p>{buildings?.company?.id ?? 'No data'}</p>
+                        <p>{buildings?.company?.name ?? 'No data'}</p>
 
                 </div>
 

frontend/src/pages/companies/[companiesId].tsx

@@ -32,6 +32,14 @@ const EditCompanies = () => {
   const dispatch = useAppDispatch()
   const initVals = {
 
+    'name': '',
+
+    'address': '',
+
+    'email': '',
+
+    'phonenumber': '',
+
   }
   const [initialValues, setInitialValues] = useState(initVals)
 
@@ -82,6 +90,42 @@ const EditCompanies = () => {
           >
             <Form>
 
+    <FormField
+        label="Name"
+    >
+        <Field
+            name="name"
+            placeholder="Name"
+        />
+    </FormField>
+
+    <FormField
+        label="Address"
+    >
+        <Field
+            name="address"
+            placeholder="Address"
+        />
+    </FormField>
+
+    <FormField
+        label="Email"
+    >
+        <Field
+            name="email"
+            placeholder="Email"
+        />
+    </FormField>
+
+    <FormField
+        label="Phonenumber"
+    >
+        <Field
+            name="phonenumber"
+            placeholder="Phonenumber"
+        />
+    </FormField>
+
               <BaseDivider />
               <BaseButtons>
                 <BaseButton type="submit" color="info" label="Submit" />

frontend/src/pages/companies/companies-edit.tsx

@@ -33,6 +33,14 @@ const EditCompaniesPage = () => {
   const dispatch = useAppDispatch()
   const initVals = {
 
+    'name': '',
+
+    'address': '',
+
+    'email': '',
+
+    'phonenumber': '',
+
   }
   const [initialValues, setInitialValues] = useState(initVals)
 
@@ -80,6 +88,42 @@ const EditCompaniesPage = () => {
           >
             <Form>
 
+    <FormField
+        label="Name"
+    >
+        <Field
+            name="name"
+            placeholder="Name"
+        />
+    </FormField>
+
+    <FormField
+        label="Address"
+    >
+        <Field
+            name="address"
+            placeholder="Address"
+        />
+    </FormField>
+
+    <FormField
+        label="Email"
+    >
+        <Field
+            name="email"
+            placeholder="Email"
+        />
+    </FormField>
+
+    <FormField
+        label="Phonenumber"
+    >
+        <Field
+            name="phonenumber"
+            placeholder="Phonenumber"
+        />
+    </FormField>
+
               <BaseDivider />
               <BaseButtons>
                 <BaseButton type="submit" color="info" label="Submit" />

frontend/src/pages/companies/companies-list.tsx

@@ -22,7 +22,7 @@ const CompaniesTablesPage = () => {
 
   const dispatch = useAppDispatch();
 
-  const [filters] = useState([
+  const [filters] = useState([{label: 'Name', title: 'name'},{label: 'Address', title: 'address'},{label: 'Email', title: 'email'},{label: 'Phonenumber', title: 'phonenumber'},
 
   ]);
   const addFilter = () => {

frontend/src/pages/companies/companies-new.tsx

@@ -25,6 +25,14 @@ import { useRouter } from 'next/router'
 
 const initialValues = {
 
+    name: '',
+
+    address: '',
+
+    email: '',
+
+    phonenumber: '',
+
 }
 
 const CompaniesNew = () => {
@@ -53,6 +61,42 @@ const CompaniesNew = () => {
           >
             <Form>
 
+  <FormField
+      label="Name"
+  >
+      <Field
+          name="name"
+          placeholder="Name"
+      />
+  </FormField>
+
+  <FormField
+      label="Address"
+  >
+      <Field
+          name="address"
+          placeholder="Address"
+      />
+  </FormField>
+
+  <FormField
+      label="Email"
+  >
+      <Field
+          name="email"
+          placeholder="Email"
+      />
+  </FormField>
+
+  <FormField
+      label="Phonenumber"
+  >
+      <Field
+          name="phonenumber"
+          placeholder="Phonenumber"
+      />
+  </FormField>
+
               <BaseDivider />
               <BaseButtons>
                 <BaseButton type="submit" color="info" label="Submit" />

frontend/src/pages/companies/companies-table.tsx

@@ -22,7 +22,7 @@ const CompaniesTablesPage = () => {
 
   const dispatch = useAppDispatch();
 
-  const [filters] = useState([
+  const [filters] = useState([{label: 'Name', title: 'name'},{label: 'Address', title: 'address'},{label: 'Email', title: 'email'},{label: 'Phonenumber', title: 'phonenumber'},
 
   ]);
     const addFilter = () => {

frontend/src/pages/companies/companies-view.tsx

@@ -49,6 +49,26 @@ const CompaniesView = () => {
             </SectionTitleLineWithButton>
             <CardBox>
 
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Name</p>
+                    <p>{companies?.name}</p>
+                </div>
+
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Address</p>
+                    <p>{companies?.address}</p>
+                </div>
+
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Email</p>
+                    <p>{companies?.email}</p>
+                </div>
+
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Phonenumber</p>
+                    <p>{companies?.phonenumber}</p>
+                </div>
+
                 <>
                     <p className={'block font-bold mb-2'}>Buildings Company</p>
                     <CardBox