All files / libs/assignments/plans/components/src/lib/user-plan-assignments-table useUserPlanAssignmentsTableColumns.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { css } from '@emotion/react';
import { IconArchive } from '@tabler/icons-react';
import { useMemo } from 'react';
import { FormattedMessage, useIntl } from 'react-intl';
import { generatePath } from 'react-router-dom';

import { ColumnHelper, DataGrid, Table, Tooltip } from '@allshares/studio-design-system';
import { routes } from '@amalia/core/routes';
import { fuzzyFilter } from '@amalia/ext/filters';
import { canModifyPlanAssignments, canViewPlanAssignments } from '@amalia/kernel/auth/shared';
import { useAbilityContext } from '@amalia/kernel/auth/state';
import { IconPlanVisibility } from '@amalia/payout-definition/plans/components';
import { type PlanAssignmentWithPlanAndMainTeam } from '@amalia/payout-definition/plans/types';
import { type UserProfile } from '@amalia/tenants/users/profile/types';

import { PlanAssignmentsTableDeleteAssignmentAction } from '../plan-assignments-table/cells/actions/PlanAssignmentsTableDeleteAssignmentAction';
import { PlanAssignmentsTableEndDateCell } from '../plan-assignments-table/cells/end-date/PlanAssignmentsTableEndDateCell';
import { PlanAssignmentsTableMainTeamCell } from '../plan-assignments-table/cells/main-team/PlanAssignmentsTableMainTeamCell';
import { PlanAssignmentsTableStartDateCell } from '../plan-assignments-table/cells/start-date/PlanAssignmentsTableStartDateCell';

const columnHelper = new ColumnHelper<PlanAssignmentWithPlanAndMainTeam>();

export const useUserPlanAssignmentsTableColumns = ({
  user,
}: {
  readonly user: Pick<UserProfile, 'firstName' | 'id' | 'lastName'>;
}) => {
  const ability = useAbilityContext();
  const { formatMessage } = useIntl();

  return useMemo(
    () =>
      [
        columnHelper.accessor((planAssignment) => planAssignment.plan.name, {
          id: 'plan',
          header: formatMessage({ defaultMessage: 'Plan name' }),
          size: 320,
          sortingFn: DataGrid.sortingFn.strings,
          filterFn: fuzzyFilter,

          cell: ({ row: { plan } }) => (
            <Table.Cell.Main
              tooltipContent={plan.name}
              link={
                canViewPlanAssignments(ability) ? (
                  <Table.Cell.Main.Link to={generatePath(routes.PLAN_HUB, { planId: plan.id, tab: null })}>
                    <FormattedMessage defaultMessage="View plan" />
                  </Table.Cell.Main.Link>
                ) : undefined
              }
            >
              <div
                css={css`
                  display: flex;
                  align-items: center;
                  gap: 6px;
                `}
              >
                {!!plan.archived && (
                  <Tooltip content={formatMessage({ defaultMessage: 'This plan is archived' })}>
                    <IconArchive size={16} />
                  </Tooltip>
                )}
                <IconPlanVisibility isPlanHidden={plan.isHidden} />
                <span>{plan.name}</span>
              </div>
            </Table.Cell.Main>
          ),
        }),
        columnHelper.accessor('effectiveAsOf', {
          id: 'effectiveAsOf',
          header: formatMessage({ defaultMessage: 'Start date' }),
          size: 150,
          cell: ({ row: planAssignment }) => (
            <PlanAssignmentsTableStartDateCell
              plan={planAssignment.plan}
              planAssignment={planAssignment}
            />
          ),
        }),
        columnHelper.accessor('effectiveUntil', {
          id: 'effectiveUntil',
          header: formatMessage({ defaultMessage: 'End date' }),
          size: 150,
          cell: ({ row: planAssignment }) => (
            <PlanAssignmentsTableEndDateCell
              plan={planAssignment.plan}
              planAssignment={planAssignment}
            />
          ),
        }),
        columnHelper.accessor('mainTeam', {
          id: 'mainTeam',
          header: formatMessage({ defaultMessage: 'Primary team' }),
          tooltip: (
            <Table.Column.Tooltip
              content={
                <FormattedMessage
                  defaultMessage="The <b>primary team</b> refers to the team whose metrics will be used in calculations when a user is assigned to multiple teams.{br}For example: Annette is assigned to one team as an employee (Managers) and is the manager of two other teams (Sales and CSM).{br}Since Annette should only be commissioned based on the Sales team's results, <b>Sales</b> is designated as her primary team."
                  values={{ b: (chunks) => <b>{chunks}</b> }}
                />
              }
            />
          ),
          size: 150,
          cell: ({ row: planAssignment }) => (
            <PlanAssignmentsTableMainTeamCell
              plan={planAssignment.plan}
              planAssignment={planAssignment}
            />
          ),
        }),
        canModifyPlanAssignments(ability) &&
          columnHelper.display({
            id: Table.Cell.Actions.columnId,
            header: '',
            size: 0,
            cell: ({ row: planAssignment }) => (
              <Table.Cell.Actions>
                <PlanAssignmentsTableDeleteAssignmentAction
                  plan={planAssignment.plan}
                  planAssignment={planAssignment}
                  user={user}
                />
              </Table.Cell.Actions>
            ),
          }),
      ].filter(Boolean),
    [formatMessage, user, ability],
  );
};