feat: add project to expenses

src/containers/Expenses/ExpenseForm/ExpenseForm.schema.tsx

@@ -33,6 +33,7 @@ const Schema = Yup.object().shape({
         }),
       landed_cost: Yup.boolean(),
       description: Yup.string().max(DATATYPES_LENGTH.TEXT).nullable(),
+      project_id: Yup.number().nullable(),
     }),
   ),
 });

src/containers/Expenses/ExpenseForm/ExpenseFormEntriesField.tsx

@@ -9,12 +9,13 @@ import { defaultExpenseEntry, accountsFieldShouldUpdate } from './utils';
  */
 export default function ExpenseFormEntriesField({ linesNumber = 4 }) {
   // Expense form context.
-  const { accounts } = useExpenseFormContext();
+  const { accounts, projects } = useExpenseFormContext();
 
   return (
     <FastField
       name={'categories'}
       accounts={accounts}
+      projects={projects}
       shouldUpdate={accountsFieldShouldUpdate}
     >
       {({

src/containers/Expenses/ExpenseForm/ExpenseFormEntriesTable.tsx

@@ -26,7 +26,7 @@ export default function ExpenseFormEntriesTable({
   minLines,
 }) {
   // Expense form context.
-  const { accounts } = useExpenseFormContext();
+  const { accounts, projects } = useExpenseFormContext();
 
   // Memorized data table columns.
   const columns = useExpenseFormTableColumns({ landedCost });
@@ -69,11 +69,12 @@ export default function ExpenseFormEntriesTable({
       sticky={true}
       payload={{
         accounts: accounts,
+        projects: projects,
         errors: error,
         updateData: handleUpdateData,
         removeRow: handleRemoveRow,
         autoFocus: ['expense_account_id', 0],
-        currencyCode
+        currencyCode,
       }}
     />
   );
@@ -81,4 +82,4 @@ export default function ExpenseFormEntriesTable({
 
 ExpenseFormEntriesTable.defaultProps = {
   minLines: 1,
-}
+};

src/containers/Expenses/ExpenseForm/ExpenseFormPageProvider.tsx

@@ -11,6 +11,7 @@ import {
   useCreateExpense,
   useEditExpense,
 } from '@/hooks/query';
+import { useProjects } from '@/containers/Projects/hooks';
 
 const ExpenseFormPageContext = createContext();
 
@@ -45,6 +46,12 @@ function ExpenseFormPageProvider({ query, expenseId, ...props }) {
   // Fetch accounts list.
   const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
 
+  // Fetch the  projects list.
+  const {
+    data: { projects },
+    isLoading: isProjectsLoading,
+  } = useProjects();
+
   // Create and edit expense mutate.
   const { mutateAsync: createExpenseMutate } = useCreateExpense();
   const { mutateAsync: editExpenseMutate } = useEditExpense();
@@ -66,7 +73,8 @@ function ExpenseFormPageProvider({ query, expenseId, ...props }) {
     expense,
     accounts,
     branches,
-
+    projects,
+    
     isCurrenciesLoading,
     isExpenseLoading,
     isCustomersLoading,
@@ -84,7 +92,8 @@ function ExpenseFormPageProvider({ query, expenseId, ...props }) {
         isCurrenciesLoading ||
         isExpenseLoading ||
         isCustomersLoading ||
-        isAccountsLoading
+        isAccountsLoading ||
+        isProjectsLoading
       }
       name={'expense-form'}
     >

src/containers/Expenses/ExpenseForm/components.tsx

@@ -14,11 +14,12 @@ import {
   InputGroupCell,
   MoneyFieldCell,
   AccountsListFieldCell,
+  ProjectsListFieldCell,
   CheckBoxFieldCell,
 } from '@/components/DataTableCells';
-import { CellType, Align } from '@/constants';
+import { CellType, Features, Align } from '@/constants';
 
-import { useCurrentOrganization } from '@/hooks/state';
+import { useCurrentOrganization, useFeatureCan } from '@/hooks/state';
 import { useExpensesIsForeign } from './utils';
 
 /**
@@ -90,6 +91,8 @@ export function ExpenseAmountHeaderCell({ payload: { currencyCode } }) {
  * Retrieve expense form table entries columns.
  */
 export function useExpenseFormTableColumns({ landedCost }) {
+  const { featureCan } = useFeatureCan();
+
   return React.useMemo(
     () => [
       {
@@ -118,6 +121,20 @@ export function useExpenseFormTableColumns({ landedCost }) {
         disableSortBy: true,
         width: 100,
       },
+      ...(featureCan(Features.Branches)
+        ? [
+            {
+              Header: intl.get('project'),
+              id: 'project_id',
+              accessor: 'project_id',
+              Cell: ProjectsListFieldCell,
+              className: 'project_id',
+              disableSortBy: true,
+              width: 40,
+            },
+          ]
+        : []),
+
       ...(landedCost
         ? [
             {

src/containers/Expenses/ExpenseForm/utils.tsx

@@ -31,6 +31,7 @@ export const defaultExpenseEntry = {
   expense_account_id: '',
   description: '',
   landed_cost: 0,
+  project_id: '',
 };
 
 export const defaultExpense = {