Import company and person from csv file (#1236)

* feat: wip implement back-end call csv import * fix: rebase IconBrandTwitter missing * feat: person and company csv import * fix: test & clean * fix: clean & test
2023-08-16 23:18:16 +02:00
parent 5890354d21
commit 8863bb0035
74 changed files with 950 additions and 312 deletions
--- a/front/src/modules/companies/graphql/mutations/insertManyCompany.ts
+++ b/front/src/modules/companies/graphql/mutations/insertManyCompany.ts
@ -0,0 +1,9 @@
+import { gql } from '@apollo/client';
+
+export const INSERT_MANY_COMPANY = gql`
+  mutation InsertManyCompany($data: [CompanyCreateManyInput!]!) {
+    createManyCompany(data: $data) {
+      count
+    }
+  }
+`;
--- a/front/src/modules/companies/hooks/useSpreadsheetCompanyImport.ts
+++ b/front/src/modules/companies/hooks/useSpreadsheetCompanyImport.ts
@ -0,0 +1,69 @@
+import { v4 as uuidv4 } from 'uuid';
+
+import { useSpreadsheetImport } from '@/spreadsheet-import/hooks/useSpreadsheetImport';
+import { SpreadsheetOptions } from '@/spreadsheet-import/types';
+import { useSnackBar } from '@/ui/snack-bar/hooks/useSnackBar';
+import { useUpsertEntityTableItems } from '@/ui/table/hooks/useUpsertEntityTableItems';
+import { useUpsertTableRowIds } from '@/ui/table/hooks/useUpsertTableRowIds';
+import {
+  GetPeopleDocument,
+  useInsertManyCompanyMutation,
+} from '~/generated/graphql';
+
+import { fieldsForCompany } from '../utils/fieldsForCompany';
+
+export type FieldCompanyMapping = (typeof fieldsForCompany)[number]['key'];
+
+export function useSpreadsheetCompanyImport() {
+  const { openSpreadsheetImport } = useSpreadsheetImport<FieldCompanyMapping>();
+  const upsertEntityTableItems = useUpsertEntityTableItems();
+  const upsertTableRowIds = useUpsertTableRowIds();
+  const { enqueueSnackBar } = useSnackBar();
+
+  const [createManyCompany] = useInsertManyCompanyMutation();
+
+  const openCompanySpreadsheetImport = (
+    options?: Omit<
+      SpreadsheetOptions<FieldCompanyMapping>,
+      'fields' | 'isOpen' | 'onClose'
+    >,
+  ) => {
+    openSpreadsheetImport({
+      ...options,
+      async onSubmit(data) {
+        // TODO: Add better type checking in spreadsheet import later
+        const createInputs = data.validData.map((company) => ({
+          id: uuidv4(),
+          name: company.name as string,
+          domainName: company.domainName as string,
+          address: company.address as string,
+          employees: parseInt(company.employees as string, 10),
+          linkedinUrl: company.linkedinUrl as string | undefined,
+        }));
+
+        try {
+          const result = await createManyCompany({
+            variables: {
+              data: createInputs,
+            },
+            refetchQueries: [GetPeopleDocument],
+          });
+
+          if (result.errors) {
+            throw result.errors;
+          }
+
+          upsertTableRowIds(createInputs.map((company) => company.id));
+          upsertEntityTableItems(createInputs);
+        } catch (error: any) {
+          enqueueSnackBar(error?.message || 'Something went wrong', {
+            variant: 'error',
+          });
+        }
+      },
+      fields: fieldsForCompany,
+    });
+  };
+
+  return { openCompanySpreadsheetImport };
+}
--- a/front/src/modules/companies/table/components/CompanyTable.tsx
+++ b/front/src/modules/companies/table/components/CompanyTable.tsx
@ -3,6 +3,7 @@ import { useMemo } from 'react';
 import { companyViewFields } from '@/companies/constants/companyViewFields';
 import { useCompanyTableActionBarEntries } from '@/companies/hooks/useCompanyTableActionBarEntries';
 import { useCompanyTableContextMenuEntries } from '@/companies/hooks/useCompanyTableContextMenuEntries';
+import { useSpreadsheetCompanyImport } from '@/companies/hooks/useSpreadsheetCompanyImport';
 import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState';
 import { sortsOrderByScopedState } from '@/ui/filter-n-sort/states/sortScopedState';
 import { turnFilterIntoWhereClause } from '@/ui/filter-n-sort/utils/turnFilterIntoWhereClause';
@ -43,6 +44,7 @@ export function CompanyTable() {
    viewFieldDefinitions: companyViewFields,
  });
  const { updateSorts } = useViewSorts({ availableSorts });
+  const { openCompanySpreadsheetImport } = useSpreadsheetCompanyImport();

  const filters = useRecoilScopedValue(
    filtersScopedState,
@ -56,6 +58,10 @@ export function CompanyTable() {
  const { setContextMenuEntries } = useCompanyTableContextMenuEntries();
  const { setActionBarEntries } = useCompanyTableActionBarEntries();

+  function handleImport() {
+    openCompanySpreadsheetImport();
+  }
+
  return (
    <>
      <GenericEntityTableData
@ -81,6 +87,7 @@ export function CompanyTable() {
        onColumnsChange={handleColumnsChange}
        onSortsUpdate={currentViewId ? updateSorts : undefined}
        onViewsChange={handleViewsChange}
+        onImport={handleImport}
        updateEntityMutation={({
          variables,
        }: {
--- a/front/src/modules/companies/utils/fieldsForCompany.tsx
+++ b/front/src/modules/companies/utils/fieldsForCompany.tsx
@ -0,0 +1,80 @@
+import {
+  IconBrandLinkedin,
+  IconBuildingSkyscraper,
+  IconMail,
+  IconMap,
+  IconUsers,
+} from '@/ui/icon';
+
+export const fieldsForCompany = [
+  {
+    icon: <IconBuildingSkyscraper />,
+    label: 'Name',
+    key: 'name',
+    alternateMatches: ['name', 'company name', 'company'],
+    fieldType: {
+      type: 'input',
+    },
+    example: 'Tim',
+    validations: [
+      {
+        rule: 'required',
+        errorMessage: 'Name is required',
+        level: 'error',
+      },
+    ],
+  },
+  {
+    icon: <IconMail />,
+    label: 'Domain name',
+    key: 'domainName',
+    alternateMatches: ['domain', 'domain name'],
+    fieldType: {
+      type: 'input',
+    },
+    example: 'apple.dev',
+    validations: [
+      {
+        rule: 'required',
+        errorMessage: 'Domain name is required',
+        level: 'error',
+      },
+    ],
+  },
+  {
+    icon: <IconBrandLinkedin />,
+    label: 'Linkedin URL',
+    key: 'linkedinUrl',
+    alternateMatches: ['linkedIn', 'linkedin', 'linkedin url'],
+    fieldType: {
+      type: 'input',
+    },
+    example: 'https://www.linkedin.com/in/apple',
+  },
+  {
+    icon: <IconMap />,
+    label: 'Address',
+    key: 'address',
+    fieldType: {
+      type: 'input',
+    },
+    example: 'Maple street',
+    validations: [
+      {
+        rule: 'required',
+        errorMessage: 'Address is required',
+        level: 'error',
+      },
+    ],
+  },
+  {
+    icon: <IconUsers />,
+    label: 'Employees',
+    key: 'employees',
+    alternateMatches: ['employees', 'total employees', 'number of employees'],
+    fieldType: {
+      type: 'input',
+    },
+    example: '150',
+  },
+] as const;
--- a/front/src/modules/people/graphql/mutations/insertManyPerson.ts
+++ b/front/src/modules/people/graphql/mutations/insertManyPerson.ts
@ -0,0 +1,9 @@
+import { gql } from '@apollo/client';
+
+export const INSERT_MANY_PERSON = gql`
+  mutation InsertManyPerson($data: [PersonCreateManyInput!]!) {
+    createManyPerson(data: $data) {
+      count
+    }
+  }
+`;
--- a/front/src/modules/people/hooks/useSpreadsheetPersonImport.ts
+++ b/front/src/modules/people/hooks/useSpreadsheetPersonImport.ts
@ -0,0 +1,72 @@
+import { v4 as uuidv4 } from 'uuid';
+
+import { useSpreadsheetImport } from '@/spreadsheet-import/hooks/useSpreadsheetImport';
+import { SpreadsheetOptions } from '@/spreadsheet-import/types';
+import { useSnackBar } from '@/ui/snack-bar/hooks/useSnackBar';
+import { useUpsertEntityTableItems } from '@/ui/table/hooks/useUpsertEntityTableItems';
+import { useUpsertTableRowIds } from '@/ui/table/hooks/useUpsertTableRowIds';
+import {
+  GetPeopleDocument,
+  useInsertManyPersonMutation,
+} from '~/generated/graphql';
+
+import { fieldsForPerson } from '../utils/fieldsForPerson';
+
+export type FieldPersonMapping = (typeof fieldsForPerson)[number]['key'];
+
+export function useSpreadsheetPersonImport() {
+  const { openSpreadsheetImport } = useSpreadsheetImport<FieldPersonMapping>();
+  const upsertEntityTableItems = useUpsertEntityTableItems();
+  const upsertTableRowIds = useUpsertTableRowIds();
+  const { enqueueSnackBar } = useSnackBar();
+
+  const [createManyPerson] = useInsertManyPersonMutation();
+
+  const openPersonSpreadsheetImport = (
+    options?: Omit<
+      SpreadsheetOptions<FieldPersonMapping>,
+      'fields' | 'isOpen' | 'onClose'
+    >,
+  ) => {
+    openSpreadsheetImport({
+      ...options,
+      async onSubmit(data) {
+        // TODO: Add better type checking in spreadsheet import later
+        const createInputs = data.validData.map((person) => ({
+          id: uuidv4(),
+          firstName: person.firstName as string | undefined,
+          lastName: person.lastName as string | undefined,
+          email: person.email as string | undefined,
+          linkedinUrl: person.linkedinUrl as string | undefined,
+          xUrl: person.xUrl as string | undefined,
+          jobTitle: person.jobTitle as string | undefined,
+          phone: person.phone as string | undefined,
+          city: person.city as string | undefined,
+        }));
+
+        try {
+          const result = await createManyPerson({
+            variables: {
+              data: createInputs,
+            },
+            refetchQueries: [GetPeopleDocument],
+          });
+
+          if (result.errors) {
+            throw result.errors;
+          }
+
+          upsertTableRowIds(createInputs.map((person) => person.id));
+          upsertEntityTableItems(createInputs);
+        } catch (error: any) {
+          enqueueSnackBar(error?.message || 'Something went wrong', {
+            variant: 'error',
+          });
+        }
+      },
+      fields: fieldsForPerson,
+    });
+  };
+
+  return { openPersonSpreadsheetImport };
+}
--- a/front/src/modules/people/table/components/PeopleTable.tsx
+++ b/front/src/modules/people/table/components/PeopleTable.tsx
@ -3,6 +3,7 @@ import { useMemo } from 'react';
 import { peopleViewFields } from '@/people/constants/peopleViewFields';
 import { usePersonTableContextMenuEntries } from '@/people/hooks/usePeopleTableContextMenuEntries';
 import { usePersonTableActionBarEntries } from '@/people/hooks/usePersonTableActionBarEntries';
+import { useSpreadsheetPersonImport } from '@/people/hooks/useSpreadsheetPersonImport';
 import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState';
 import { sortsOrderByScopedState } from '@/ui/filter-n-sort/states/sortScopedState';
 import { turnFilterIntoWhereClause } from '@/ui/filter-n-sort/utils/turnFilterIntoWhereClause';
@ -35,6 +36,7 @@ export function PeopleTable() {
  );
  const [updateEntityMutation] = useUpdateOnePersonMutation();
  const upsertEntityTableItem = useUpsertEntityTableItem();
+  const { openPersonSpreadsheetImport } = useSpreadsheetPersonImport();

  const objectId = 'person';
  const { handleViewsChange } = useTableViews({ objectId });
@ -56,6 +58,10 @@ export function PeopleTable() {
  const { setContextMenuEntries } = usePersonTableContextMenuEntries();
  const { setActionBarEntries } = usePersonTableActionBarEntries();

+  function handleImport() {
+    openPersonSpreadsheetImport();
+  }
+
  return (
    <>
      <GenericEntityTableData
@ -81,6 +87,7 @@ export function PeopleTable() {
        onColumnsChange={handleColumnsChange}
        onSortsUpdate={currentViewId ? updateSorts : undefined}
        onViewsChange={handleViewsChange}
+        onImport={handleImport}
        updateEntityMutation={({
          variables,
        }: {
--- a/front/src/modules/people/utils/fieldsForPerson.tsx
+++ b/front/src/modules/people/utils/fieldsForPerson.tsx
@ -0,0 +1,120 @@
+import { isValidPhoneNumber } from 'libphonenumber-js';
+
+import {
+  IconBrandLinkedin,
+  IconBrandTwitter,
+  IconBriefcase,
+  IconMail,
+  IconMap,
+  IconUser,
+} from '@/ui/icon';
+
+export const fieldsForPerson = [
+  {
+    icon: <IconUser />,
+    label: 'Firstname',
+    key: 'firstName',
+    alternateMatches: ['first name', 'first', 'firstname'],
+    fieldType: {
+      type: 'input',
+    },
+    example: 'Tim',
+    validations: [
+      {
+        rule: 'required',
+        errorMessage: 'Firstname is required',
+        level: 'error',
+      },
+    ],
+  },
+  {
+    icon: <IconUser />,
+    label: 'Lastname',
+    key: 'lastName',
+    alternateMatches: ['last name', 'last', 'lastname'],
+    fieldType: {
+      type: 'input',
+    },
+    example: 'Cook',
+    validations: [
+      {
+        rule: 'required',
+        errorMessage: 'Lastname is required',
+        level: 'error',
+      },
+    ],
+  },
+  {
+    icon: <IconMail />,
+    label: 'Email',
+    key: 'email',
+    alternateMatches: ['email', 'mail'],
+    fieldType: {
+      type: 'input',
+    },
+    example: 'tim@apple.dev',
+    validations: [
+      {
+        rule: 'required',
+        errorMessage: 'email is required',
+        level: 'error',
+      },
+    ],
+  },
+  {
+    icon: <IconBrandLinkedin />,
+    label: 'Linkedin URL',
+    key: 'linkedinUrl',
+    alternateMatches: ['linkedIn', 'linkedin', 'linkedin url'],
+    fieldType: {
+      type: 'input',
+    },
+    example: 'https://www.linkedin.com/in/timcook',
+  },
+  {
+    icon: <IconBrandTwitter />,
+    label: 'X URL',
+    key: 'xUrl',
+    alternateMatches: ['x', 'x url'],
+    fieldType: {
+      type: 'input',
+    },
+    example: 'https://x.com/tim_cook',
+  },
+  {
+    icon: <IconBriefcase />,
+    label: 'Job title',
+    key: 'jobTitle',
+    alternateMatches: ['job', 'job title'],
+    fieldType: {
+      type: 'input',
+    },
+    example: 'CEO',
+  },
+  {
+    icon: <IconBriefcase />,
+    label: 'Phone',
+    key: 'phone',
+    fieldType: {
+      type: 'input',
+    },
+    example: '+1234567890',
+    validations: [
+      {
+        rule: 'function',
+        isValid: (value: string) => isValidPhoneNumber(value),
+        errorMessage: 'phone is not valid',
+        level: 'error',
+      },
+    ],
+  },
+  {
+    icon: <IconMap />,
+    label: 'City',
+    key: 'city',
+    fieldType: {
+      type: 'input',
+    },
+    example: 'Seattle',
+  },
+] as const;
--- a/front/src/modules/spreadsheet-import/components/core/ContinueButton.tsx
+++ b/front/src/modules/spreadsheet-import/components/core/ContinueButton.tsx
--- a/front/src/modules/spreadsheet-import/components/core/Heading.tsx
+++ b/front/src/modules/spreadsheet-import/components/core/Heading.tsx
--- a/front/src/modules/spreadsheet-import/components/core/MatchColumnSelect.tsx
+++ b/front/src/modules/spreadsheet-import/components/core/MatchColumnSelect.tsx
@ -195,6 +195,7 @@ export const MatchColumnSelect = ({
                      value?.value !== option.value &&
                      createPortal(
                        <AppTooltip
+                          key={option.value}
                          anchorSelect={`#${option.value}`}
                          content="You are already importing this column."
                          place="right"
--- a/front/src/modules/spreadsheet-import/components/core/ModalCloseButton.tsx
+++ b/front/src/modules/spreadsheet-import/components/core/ModalCloseButton.tsx
--- a/front/src/modules/spreadsheet-import/components/core/ModalWrapper.tsx
+++ b/front/src/modules/spreadsheet-import/components/core/ModalWrapper.tsx
@ -1,7 +1,7 @@
 import type React from 'react';
 import styled from '@emotion/styled';

-import { useRsi } from '@/spreadsheet-import/hooks/useRsi';
+import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
 import { Modal } from '@/ui/modal/components/Modal';

 import { ModalCloseButton } from './ModalCloseButton';
@ -27,7 +27,7 @@ type Props = {
 };

 export const ModalWrapper = ({ children, isOpen, onClose }: Props) => {
-  const { rtl } = useRsi();
+  const { rtl } = useSpreadsheetImportInternal();

  return (
    <StyledModal isOpen={isOpen}>
--- a/front/src/modules/spreadsheet-import/components/core/Providers.tsx
+++ b/front/src/modules/spreadsheet-import/components/core/Providers.tsx
@ -1,25 +1,21 @@
 import { createContext } from 'react';

-import type { RsiProps } from '@/spreadsheet-import/types';
+import type { SpreadsheetOptions } from '@/spreadsheet-import/types';

 export const RsiContext = createContext({} as any);

 type ProvidersProps<T extends string> = {
  children: React.ReactNode;
-  rsiValues: RsiProps<T>;
+  values: SpreadsheetOptions<T>;
 };

-export const rootId = 'chakra-modal-rsi';
-
 export const Providers = <T extends string>({
  children,
-  rsiValues,
+  values,
 }: ProvidersProps<T>) => {
-  if (!rsiValues.fields) {
+  if (!values.fields) {
    throw new Error('Fields must be provided to spreadsheet-import');
  }

-  return (
-    <RsiContext.Provider value={rsiValues}>{children}</RsiContext.Provider>
-  );
+  return <RsiContext.Provider value={values}>{children}</RsiContext.Provider>;
 };
--- a/front/src/modules/spreadsheet-import/components/SpreadsheetImport.tsx
+++ b/front/src/modules/spreadsheet-import/components/SpreadsheetImport.tsx
@ -1,28 +0,0 @@
-import type { RsiProps } from '../types';
-
-import { ModalWrapper } from './core/ModalWrapper';
-import { Providers } from './core/Providers';
-import { Steps } from './steps/Steps';
-
-export const defaultRSIProps: Partial<RsiProps<any>> = {
-  autoMapHeaders: true,
-  allowInvalidSubmit: true,
-  autoMapDistance: 2,
-  uploadStepHook: async (value) => value,
-  selectHeaderStepHook: async (headerValues, data) => ({ headerValues, data }),
-  matchColumnsStepHook: async (table) => table,
-  dateFormat: 'yyyy-mm-dd', // ISO 8601,
-  parseRaw: true,
-} as const;
-
-export const SpreadsheetImport = <T extends string>(props: RsiProps<T>) => {
-  return (
-    <Providers rsiValues={props}>
-      <ModalWrapper isOpen={props.isOpen} onClose={props.onClose}>
-        <Steps />
-      </ModalWrapper>
-    </Providers>
-  );
-};
-
-SpreadsheetImport.defaultProps = defaultRSIProps;
--- a/front/src/modules/spreadsheet-import/components/core/Table.tsx
+++ b/front/src/modules/spreadsheet-import/components/core/Table.tsx
@ -1,7 +1,7 @@
 import DataGrid, { DataGridProps } from 'react-data-grid';
 import styled from '@emotion/styled';

-import { useRsi } from '@/spreadsheet-import/hooks/useRsi';
+import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
 import { rgba } from '@/ui/theme/constants/colors';

 const StyledDataGrid = styled(DataGrid)`
@ -112,7 +112,7 @@ type Props<Data> = DataGridProps<Data> & {
 };

 export const Table = <Data,>(props: Props<Data>) => {
-  const { rtl } = useRsi();
+  const { rtl } = useSpreadsheetImportInternal();

  return (
    <StyledDataGrid direction={rtl ? 'rtl' : 'ltr'} rowHeight={52} {...props} />
--- a/front/src/modules/spreadsheet-import/hooks/useRsi.ts
+++ b/front/src/modules/spreadsheet-import/hooks/useRsi.ts
@ -1,11 +0,0 @@
-import { useContext } from 'react';
-import { SetRequired } from 'type-fest';
-
-import { RsiContext } from '@/spreadsheet-import/components/core/Providers';
-import { defaultRSIProps } from '@/spreadsheet-import/components/SpreadsheetImport';
-import { RsiProps } from '@/spreadsheet-import/types';
-
-export const useRsi = <T extends string>() =>
-  useContext<SetRequired<RsiProps<T>, keyof typeof defaultRSIProps>>(
-    RsiContext,
-  );
--- a/front/src/modules/spreadsheet-import/hooks/useSpreadsheetImport.tsx
+++ b/front/src/modules/spreadsheet-import/hooks/useSpreadsheetImport.tsx
@ -1,13 +1,13 @@
 import { useSetRecoilState } from 'recoil';

 import { spreadsheetImportState } from '@/spreadsheet-import/states/spreadsheetImportState';
-import { RsiProps } from '@/spreadsheet-import/types';
+import { SpreadsheetOptions } from '@/spreadsheet-import/types';

-export function useSpreadsheetImport() {
+export function useSpreadsheetImport<T extends string>() {
  const setSpreadSheetImport = useSetRecoilState(spreadsheetImportState);

  const openSpreadsheetImport = (
-    options: Omit<RsiProps<string>, 'isOpen' | 'onClose'>,
+    options: Omit<SpreadsheetOptions<T>, 'isOpen' | 'onClose'>,
  ) => {
    setSpreadSheetImport({
      isOpen: true,
--- a/front/src/modules/spreadsheet-import/hooks/useSpreadsheetImportInitialStep.ts
+++ b/front/src/modules/spreadsheet-import/hooks/useSpreadsheetImportInitialStep.ts
@ -1,8 +1,8 @@
 import { useMemo } from 'react';

-import { StepType } from '@/spreadsheet-import/components/steps/UploadFlow';
+import { StepType } from '@/spreadsheet-import/steps/components/UploadFlow';

-export const useRsiInitialStep = (initialStep?: StepType) => {
+export const useSpreadsheetImportInitialStep = (initialStep?: StepType) => {
  const steps = ['uploadStep', 'matchColumnsStep', 'validationStep'] as const;

  const initialStepNumber = useMemo(() => {
--- a/front/src/modules/spreadsheet-import/hooks/useSpreadsheetImportInternal.ts
+++ b/front/src/modules/spreadsheet-import/hooks/useSpreadsheetImportInternal.ts
@ -0,0 +1,14 @@
+import { useContext } from 'react';
+import { SetRequired } from 'type-fest';
+
+import { RsiContext } from '@/spreadsheet-import/components/Providers';
+import { defaultSpreadsheetImportProps } from '@/spreadsheet-import/provider/components/SpreadsheetImport';
+import { SpreadsheetOptions } from '@/spreadsheet-import/types';
+
+export const useSpreadsheetImportInternal = <T extends string>() =>
+  useContext<
+    SetRequired<
+      SpreadsheetOptions<T>,
+      keyof typeof defaultSpreadsheetImportProps
+    >
+  >(RsiContext);
--- a/front/src/modules/spreadsheet-import/provider/components/SpreadsheetImport.tsx
+++ b/front/src/modules/spreadsheet-import/provider/components/SpreadsheetImport.tsx
@ -0,0 +1,29 @@
+import { ModalWrapper } from '@/spreadsheet-import/components/ModalWrapper';
+import { Providers } from '@/spreadsheet-import/components/Providers';
+import { Steps } from '@/spreadsheet-import/steps/components/Steps';
+import type { SpreadsheetOptions } from '@/spreadsheet-import/types';
+
+export const defaultSpreadsheetImportProps: Partial<SpreadsheetOptions<any>> = {
+  autoMapHeaders: true,
+  allowInvalidSubmit: true,
+  autoMapDistance: 2,
+  uploadStepHook: async (value) => value,
+  selectHeaderStepHook: async (headerValues, data) => ({ headerValues, data }),
+  matchColumnsStepHook: async (table) => table,
+  dateFormat: 'yyyy-mm-dd', // ISO 8601,
+  parseRaw: true,
+} as const;
+
+export const SpreadsheetImport = <T extends string>(
+  props: SpreadsheetOptions<T>,
+) => {
+  return (
+    <Providers values={props}>
+      <ModalWrapper isOpen={props.isOpen} onClose={props.onClose}>
+        <Steps />
+      </ModalWrapper>
+    </Providers>
+  );
+};
+
+SpreadsheetImport.defaultProps = defaultSpreadsheetImportProps;
--- a/front/src/modules/spreadsheet-import/provider/components/SpreadsheetImportProvider.tsx
+++ b/front/src/modules/spreadsheet-import/provider/components/SpreadsheetImportProvider.tsx
@ -1,7 +1,7 @@
 import React from 'react';
 import { useRecoilState } from 'recoil';

-import { spreadsheetImportState } from '../states/spreadsheetImportState';
+import { spreadsheetImportState } from '@/spreadsheet-import/states/spreadsheetImportState';

 import { SpreadsheetImport } from './SpreadsheetImport';

--- a/front/src/modules/spreadsheet-import/states/spreadsheetImportState.ts
+++ b/front/src/modules/spreadsheet-import/states/spreadsheetImportState.ts
@ -1,13 +1,13 @@
 import { atom } from 'recoil';

-import { RsiProps } from '../types';
+import { SpreadsheetOptions } from '../types';

 export type SpreadsheetImportState<T extends string> = {
  isOpen: boolean;
-  options: Omit<RsiProps<T>, 'isOpen' | 'onClose'> | null;
+  options: Omit<SpreadsheetOptions<T>, 'isOpen' | 'onClose'> | null;
 };

-export const spreadsheetImportState = atom<SpreadsheetImportState<string>>({
+export const spreadsheetImportState = atom<SpreadsheetImportState<any>>({
  key: 'spreadsheetImportState',
  default: {
    isOpen: false,
--- a/front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx
+++ b/front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx
@ -1,9 +1,9 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import styled from '@emotion/styled';

-import { ContinueButton } from '@/spreadsheet-import/components/core/ContinueButton';
-import { Heading } from '@/spreadsheet-import/components/core/Heading';
-import { useRsi } from '@/spreadsheet-import/hooks/useRsi';
+import { ContinueButton } from '@/spreadsheet-import/components/ContinueButton';
+import { Heading } from '@/spreadsheet-import/components/Heading';
+import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
 import type { Field, RawData } from '@/spreadsheet-import/types';
 import { findUnmatchedRequiredFields } from '@/spreadsheet-import/utils/findUnmatchedRequiredFields';
 import { getMatchedColumns } from '@/spreadsheet-import/utils/getMatchedColumns';
@ -114,7 +114,8 @@ export const MatchColumnsStep = <T extends string>({
  const { enqueueDialog } = useDialog();
  const { enqueueSnackBar } = useSnackBar();
  const dataExample = data.slice(0, 2);
-  const { fields, autoMapHeaders, autoMapDistance } = useRsi<T>();
+  const { fields, autoMapHeaders, autoMapDistance } =
+    useSpreadsheetImportInternal<T>();
  const [isLoading, setIsLoading] = useState(false);
  const [columns, setColumns] = useState<Columns<T>>(
    // Do not remove spread, it indexes empty array elements, otherwise map() skips over them
--- a/front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/ColumnGrid.tsx
+++ b/front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/ColumnGrid.tsx
--- a/front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelect.tsx
+++ b/front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelect.tsx
@ -1,7 +1,7 @@
 import styled from '@emotion/styled';

-import { MatchColumnSelect } from '@/spreadsheet-import/components/core/MatchColumnSelect';
-import { useRsi } from '@/spreadsheet-import/hooks/useRsi';
+import { MatchColumnSelect } from '@/spreadsheet-import/components/MatchColumnSelect';
+import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
 import { SelectOption } from '@/spreadsheet-import/types';
 import { getFieldOptions } from '@/spreadsheet-import/utils/getFieldOptions';

@ -35,7 +35,7 @@ export const SubMatchingSelect = <T extends string>({
  column,
  onSubChange,
 }: Props<T>) => {
-  const { fields } = useRsi<T>();
+  const { fields } = useSpreadsheetImportInternal<T>();
  const options = getFieldOptions(fields, column.value) as SelectOption[];
  const value = options.find((opt) => opt.value === option.value);

--- a/front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/TemplateColumn.tsx
+++ b/front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/TemplateColumn.tsx
@ -8,8 +8,8 @@ import {
 } from '@chakra-ui/accordion';
 import styled from '@emotion/styled';

-import { MatchColumnSelect } from '@/spreadsheet-import/components/core/MatchColumnSelect';
-import { useRsi } from '@/spreadsheet-import/hooks/useRsi';
+import { MatchColumnSelect } from '@/spreadsheet-import/components/MatchColumnSelect';
+import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
 import type { Fields } from '@/spreadsheet-import/types';
 import { IconChevronDown, IconForbid } from '@/ui/icon';

@ -86,7 +86,7 @@ export const TemplateColumn = <T extends string>({
  onChange,
  onSubChange,
 }: TemplateColumnProps<T>) => {
-  const { fields } = useRsi<T>();
+  const { fields } = useSpreadsheetImportInternal<T>();
  const column = columns[columnIndex];
  const isIgnored = column.type === ColumnType.ignored;
  const isSelect = 'matchedOptions' in column;
--- a/front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/UserTableColumn.tsx
+++ b/front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/UserTableColumn.tsx
--- a/front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/SelectHeaderStep.tsx
+++ b/front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/SelectHeaderStep.tsx
@ -1,8 +1,8 @@
 import { useCallback, useState } from 'react';
 import styled from '@emotion/styled';

-import { ContinueButton } from '@/spreadsheet-import/components/core/ContinueButton';
-import { Heading } from '@/spreadsheet-import/components/core/Heading';
+import { ContinueButton } from '@/spreadsheet-import/components/ContinueButton';
+import { Heading } from '@/spreadsheet-import/components/Heading';
 import type { RawData } from '@/spreadsheet-import/types';
 import { Modal } from '@/ui/modal/components/Modal';

--- a/front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/components/SelectColumn.tsx
+++ b/front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/components/SelectColumn.tsx
--- a/front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/components/SelectHeaderTable.tsx
+++ b/front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/components/SelectHeaderTable.tsx
@ -1,6 +1,6 @@
 import { useMemo } from 'react';

-import { Table } from '@/spreadsheet-import/components/core/Table';
+import { Table } from '@/spreadsheet-import/components/Table';
 import type { RawData } from '@/spreadsheet-import/types';

 import { generateSelectionColumns } from './SelectColumn';
--- a/front/src/modules/spreadsheet-import/steps/components/SelectSheetStep/SelectSheetStep.tsx
+++ b/front/src/modules/spreadsheet-import/steps/components/SelectSheetStep/SelectSheetStep.tsx
@ -1,13 +1,12 @@
 import { useCallback, useState } from 'react';
 import styled from '@emotion/styled';

-import { Heading } from '@/spreadsheet-import/components/core/Heading';
+import { ContinueButton } from '@/spreadsheet-import/components/ContinueButton';
+import { Heading } from '@/spreadsheet-import/components/Heading';
 import { Radio } from '@/ui/input/radio/components/Radio';
 import { RadioGroup } from '@/ui/input/radio/components/RadioGroup';
 import { Modal } from '@/ui/modal/components/Modal';

-import { ContinueButton } from '../../core/ContinueButton';
-
 const Content = styled(Modal.Content)`
  align-items: center;
 `;
--- a/front/src/modules/spreadsheet-import/steps/components/Steps.tsx
+++ b/front/src/modules/spreadsheet-import/steps/components/Steps.tsx
@ -1,7 +1,7 @@
 import styled from '@emotion/styled';

-import { useRsi } from '@/spreadsheet-import/hooks/useRsi';
-import { useRsiInitialStep } from '@/spreadsheet-import/hooks/useRsiInitialStep';
+import { useSpreadsheetImportInitialStep } from '@/spreadsheet-import/hooks/useSpreadsheetImportInitialStep';
+import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
 import { Modal } from '@/ui/modal/components/Modal';
 import { StepBar } from '@/ui/step-bar/components/StepBar';
 import { useStepBar } from '@/ui/step-bar/hooks/useStepBar';
@ -24,9 +24,11 @@ const stepTitles = {
 } as const;

 export const Steps = () => {
-  const { initialStepState } = useRsi();
+  const { initialStepState } = useSpreadsheetImportInternal();

-  const { steps, initialStep } = useRsiInitialStep(initialStepState?.type);
+  const { steps, initialStep } = useSpreadsheetImportInitialStep(
+    initialStepState?.type,
+  );

  const { nextStep, activeStep } = useStepBar({
    initialStep,
--- a/front/src/modules/spreadsheet-import/steps/components/UploadFlow.tsx
+++ b/front/src/modules/spreadsheet-import/steps/components/UploadFlow.tsx
@ -3,7 +3,7 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import type XLSX from 'xlsx-ugnis';

-import { useRsi } from '@/spreadsheet-import/hooks/useRsi';
+import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
 import type { RawData } from '@/spreadsheet-import/types';
 import { exceedsMaxRecords } from '@/spreadsheet-import/utils/exceedsMaxRecords';
 import { mapWorkbook } from '@/spreadsheet-import/utils/mapWorkbook';
@ -29,6 +29,7 @@ export enum StepType {
  selectHeader = 'selectHeader',
  matchColumns = 'matchColumns',
  validateData = 'validateData',
+  loading = 'loading',
 }
 export type StepState =
  | {
@ -50,6 +51,9 @@ export type StepState =
  | {
      type: StepType.validateData;
      data: any[];
+    }
+  | {
+      type: StepType.loading;
    };

 interface Props {
@ -58,7 +62,7 @@ interface Props {

 export const UploadFlow = ({ nextStep }: Props) => {
  const theme = useTheme();
-  const { initialStepState } = useRsi();
+  const { initialStepState } = useSpreadsheetImportInternal();
  const [state, setState] = useState<StepState>(
    initialStepState || { type: StepType.upload },
  );
@ -68,7 +72,7 @@ export const UploadFlow = ({ nextStep }: Props) => {
    uploadStepHook,
    selectHeaderStepHook,
    matchColumnsStepHook,
-  } = useRsi();
+  } = useSpreadsheetImportInternal();
  const { enqueueSnackBar } = useSnackBar();

  const errorToast = useCallback(
@ -191,7 +195,18 @@ export const UploadFlow = ({ nextStep }: Props) => {
      if (!uploadedFile) {
        throw new Error('File not found');
      }
-      return <ValidationStep initialData={state.data} file={uploadedFile} />;
+      return (
+        <ValidationStep
+          initialData={state.data}
+          file={uploadedFile}
+          onSubmitStart={() =>
+            setState({
+              type: StepType.loading,
+            })
+          }
+        />
+      );
+    case StepType.loading:
    default:
      return (
        <ProgressBarContainer>
--- a/front/src/modules/spreadsheet-import/steps/components/UploadStep/UploadStep.tsx
+++ b/front/src/modules/spreadsheet-import/steps/components/UploadStep/UploadStep.tsx
--- a/front/src/modules/spreadsheet-import/steps/components/UploadStep/components/DropZone.tsx
+++ b/front/src/modules/spreadsheet-import/steps/components/UploadStep/components/DropZone.tsx
@ -3,7 +3,7 @@ import { useDropzone } from 'react-dropzone';
 import styled from '@emotion/styled';
 import * as XLSX from 'xlsx-ugnis';

-import { useRsi } from '@/spreadsheet-import/hooks/useRsi';
+import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
 import { readFileAsync } from '@/spreadsheet-import/utils/readFilesAsync';
 import { MainButton } from '@/ui/button/components/MainButton';
 import { useSnackBar } from '@/ui/snack-bar/hooks/useSnackBar';
@ -83,7 +83,7 @@ type DropZoneProps = {
 };

 export const DropZone = ({ onContinue, isLoading }: DropZoneProps) => {
-  const { maxFileSize, dateFormat, parseRaw } = useRsi();
+  const { maxFileSize, dateFormat, parseRaw } = useSpreadsheetImportInternal();

  const [loading, setLoading] = useState(false);

--- a/front/src/modules/spreadsheet-import/steps/components/UploadStep/components/ExampleTable.tsx
+++ b/front/src/modules/spreadsheet-import/steps/components/UploadStep/components/ExampleTable.tsx
@ -1,6 +1,6 @@
 import { useMemo } from 'react';

-import { Table } from '@/spreadsheet-import/components/core/Table';
+import { Table } from '@/spreadsheet-import/components/Table';
 import type { Fields } from '@/spreadsheet-import/types';
 import { generateExampleRow } from '@/spreadsheet-import/utils/generateExampleRow';

--- a/front/src/modules/spreadsheet-import/steps/components/UploadStep/components/columns.tsx
+++ b/front/src/modules/spreadsheet-import/steps/components/UploadStep/components/columns.tsx
--- a/front/src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx
+++ b/front/src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx
@ -2,10 +2,10 @@ import { useCallback, useMemo, useState } from 'react';
 import type { RowsChangeData } from 'react-data-grid';
 import styled from '@emotion/styled';

-import { ContinueButton } from '@/spreadsheet-import/components/core/ContinueButton';
-import { Heading } from '@/spreadsheet-import/components/core/Heading';
-import { Table } from '@/spreadsheet-import/components/core/Table';
-import { useRsi } from '@/spreadsheet-import/hooks/useRsi';
+import { ContinueButton } from '@/spreadsheet-import/components/ContinueButton';
+import { Heading } from '@/spreadsheet-import/components/Heading';
+import { Table } from '@/spreadsheet-import/components/Table';
+import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
 import type { Data } from '@/spreadsheet-import/types';
 import { addErrorsAndRunHooks } from '@/spreadsheet-import/utils/dataMutations';
 import { Button, ButtonVariant } from '@/ui/button/components/Button';
@ -56,14 +56,17 @@ const NoRowsContainer = styled.div`
 type Props<T extends string> = {
  initialData: Data<T>[];
  file: File;
+  onSubmitStart?: () => void;
 };

 export const ValidationStep = <T extends string>({
  initialData,
  file,
+  onSubmitStart,
 }: Props<T>) => {
  const { enqueueDialog } = useDialog();
-  const { fields, onClose, onSubmit, rowHook, tableHook } = useRsi<T>();
+  const { fields, onClose, onSubmit, rowHook, tableHook } =
+    useSpreadsheetImportInternal<T>();

  const [data, setData] = useState<(Data<T> & Meta)[]>(
    useMemo(
@ -146,7 +149,8 @@ export const ValidationStep = <T extends string>({
      },
      { validData: [] as Data<T>[], invalidData: [] as Data<T>[], all: data },
    );
-    onSubmit(calculatedData, file);
+    onSubmitStart?.();
+    await onSubmit(calculatedData, file);
    onClose();
  };
  const onContinue = () => {
--- a/front/src/modules/spreadsheet-import/steps/components/ValidationStep/components/columns.tsx
+++ b/front/src/modules/spreadsheet-import/steps/components/ValidationStep/components/columns.tsx
@ -2,7 +2,7 @@ import { Column, useRowSelection } from 'react-data-grid';
 import { createPortal } from 'react-dom';
 import styled from '@emotion/styled';

-import { MatchColumnSelect } from '@/spreadsheet-import/components/core/MatchColumnSelect';
+import { MatchColumnSelect } from '@/spreadsheet-import/components/MatchColumnSelect';
 import type { Data, Fields } from '@/spreadsheet-import/types';
 import {
  Checkbox,
@ -118,14 +118,13 @@ export const generateColumns = <T extends string>(
      ),
      editable: column.fieldType.type !== 'checkbox',
      editor: ({ row, onRowChange, onClose }) => {
+        const columnKey = column.key as keyof (Data<T> & Meta);
        let component;

        switch (column.fieldType.type) {
          case 'select': {
            const value = column.fieldType.options.find(
-              (option) =>
-                option.value ===
-                (row[column.key as keyof (Data<T> & Meta)] as string),
+              (option) => option.value === (row[columnKey] as string),
            );

            component = (
@ -139,7 +138,7 @@ export const generateColumns = <T extends string>(
                    : value
                }
                onChange={(value) => {
-                  onRowChange({ ...row, [column.key]: value?.value }, true);
+                  onRowChange({ ...row, [columnKey]: value?.value }, true);
                }}
                options={column.fieldType.options}
              />
@ -149,9 +148,9 @@ export const generateColumns = <T extends string>(
          default:
            component = (
              <TextInput
-                value={row[column.key] as string}
+                value={row[columnKey] as string}
                onChange={(value: string) => {
-                  onRowChange({ ...row, [column.key]: value });
+                  onRowChange({ ...row, [columnKey]: value });
                }}
                autoFocus={true}
                onBlur={() => onClose(true)}
@ -165,23 +164,24 @@ export const generateColumns = <T extends string>(
        editOnClick: true,
      },
      formatter: ({ row, onRowChange }) => {
+        const columnKey = column.key as keyof (Data<T> & Meta);
        let component;

        switch (column.fieldType.type) {
          case 'checkbox':
            component = (
              <ToggleContainer
-                id={`${column.key}-${row.__index}`}
+                id={`${columnKey}-${row.__index}`}
                onClick={(event) => {
                  event.stopPropagation();
                }}
              >
                <Toggle
-                  value={row[column.key] as boolean}
+                  value={row[columnKey] as boolean}
                  onChange={() => {
                    onRowChange({
                      ...row,
-                      [column.key]: !row[column.key as T],
+                      [columnKey]: !row[columnKey],
                    });
                  }}
                />
@ -190,30 +190,30 @@ export const generateColumns = <T extends string>(
            break;
          case 'select':
            component = (
-              <DefaultContainer id={`${column.key}-${row.__index}`}>
+              <DefaultContainer id={`${columnKey}-${row.__index}`}>
                {column.fieldType.options.find(
-                  (option) => option.value === row[column.key as T],
+                  (option) => option.value === row[columnKey as T],
                )?.label || null}
              </DefaultContainer>
            );
            break;
          default:
            component = (
-              <DefaultContainer id={`${column.key}-${row.__index}`}>
-                {row[column.key as T]}
+              <DefaultContainer id={`${columnKey}-${row.__index}`}>
+                {row[columnKey]}
              </DefaultContainer>
            );
        }

-        if (row.__errors?.[column.key]) {
+        if (row.__errors?.[columnKey]) {
          return (
            <>
              {component}
              {createPortal(
                <AppTooltip
-                  anchorSelect={`#${column.key}-${row.__index}`}
+                  anchorSelect={`#${columnKey}-${row.__index}`}
                  place="top"
-                  content={row.__errors?.[column.key]?.message}
+                  content={row.__errors?.[columnKey]?.message}
                />,
                document.body,
              )}
--- a/front/src/modules/spreadsheet-import/steps/components/ValidationStep/types.ts
+++ b/front/src/modules/spreadsheet-import/steps/components/ValidationStep/types.ts
--- a/front/src/modules/spreadsheet-import/steps/components/stories/MatchColumns.stories.tsx
+++ b/front/src/modules/spreadsheet-import/steps/components/stories/MatchColumns.stories.tsx
@ -1,8 +1,8 @@
 import { Meta } from '@storybook/react';

-import { ModalWrapper } from '@/spreadsheet-import/components/core/ModalWrapper';
-import { Providers } from '@/spreadsheet-import/components/core/Providers';
-import { MatchColumnsStep } from '@/spreadsheet-import/components/steps/MatchColumnsStep/MatchColumnsStep';
+import { ModalWrapper } from '@/spreadsheet-import/components/ModalWrapper';
+import { Providers } from '@/spreadsheet-import/components/Providers';
+import { MatchColumnsStep } from '@/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep';
 import { mockRsiValues } from '@/spreadsheet-import/tests/mockRsiValues';

 const meta: Meta<typeof MatchColumnsStep> = {
@ -58,7 +58,7 @@ const mockData = [

 export function Default() {
  return (
-    <Providers rsiValues={mockRsiValues}>
+    <Providers values={mockRsiValues}>
      <ModalWrapper isOpen={true} onClose={() => null}>
        <MatchColumnsStep
          headerValues={mockData[0] as string[]}
--- a/front/src/modules/spreadsheet-import/steps/components/stories/SelectHeader.stories.tsx
+++ b/front/src/modules/spreadsheet-import/steps/components/stories/SelectHeader.stories.tsx
@ -1,8 +1,8 @@
 import { Meta } from '@storybook/react';

-import { ModalWrapper } from '@/spreadsheet-import/components/core/ModalWrapper';
-import { Providers } from '@/spreadsheet-import/components/core/Providers';
-import { SelectHeaderStep } from '@/spreadsheet-import/components/steps/SelectHeaderStep/SelectHeaderStep';
+import { ModalWrapper } from '@/spreadsheet-import/components/ModalWrapper';
+import { Providers } from '@/spreadsheet-import/components/Providers';
+import { SelectHeaderStep } from '@/spreadsheet-import/steps/components/SelectHeaderStep/SelectHeaderStep';
 import {
  headerSelectionTableFields,
  mockRsiValues,
@ -20,7 +20,7 @@ export default meta;

 export function Default() {
  return (
-    <Providers rsiValues={mockRsiValues}>
+    <Providers values={mockRsiValues}>
      <ModalWrapper isOpen={true} onClose={() => null}>
        <SelectHeaderStep
          data={headerSelectionTableFields}
--- a/front/src/modules/spreadsheet-import/steps/components/stories/SelectSheet.stories.tsx
+++ b/front/src/modules/spreadsheet-import/steps/components/stories/SelectSheet.stories.tsx
@ -1,8 +1,8 @@
 import { Meta } from '@storybook/react';

-import { ModalWrapper } from '@/spreadsheet-import/components/core/ModalWrapper';
-import { Providers } from '@/spreadsheet-import/components/core/Providers';
-import { SelectSheetStep } from '@/spreadsheet-import/components/steps/SelectSheetStep/SelectSheetStep';
+import { ModalWrapper } from '@/spreadsheet-import/components/ModalWrapper';
+import { Providers } from '@/spreadsheet-import/components/Providers';
+import { SelectSheetStep } from '@/spreadsheet-import/steps/components/SelectSheetStep/SelectSheetStep';
 import { mockRsiValues } from '@/spreadsheet-import/tests/mockRsiValues';

 const meta: Meta<typeof SelectSheetStep> = {
@ -19,7 +19,7 @@ const sheetNames = ['Sheet1', 'Sheet2', 'Sheet3'];

 export function Default() {
  return (
-    <Providers rsiValues={mockRsiValues}>
+    <Providers values={mockRsiValues}>
      <ModalWrapper isOpen={true} onClose={() => null}>
        <SelectSheetStep
          sheetNames={sheetNames}
--- a/front/src/modules/spreadsheet-import/steps/components/stories/Upload.stories.tsx
+++ b/front/src/modules/spreadsheet-import/steps/components/stories/Upload.stories.tsx
@ -1,8 +1,8 @@
 import { Meta } from '@storybook/react';

-import { ModalWrapper } from '@/spreadsheet-import/components/core/ModalWrapper';
-import { Providers } from '@/spreadsheet-import/components/core/Providers';
-import { UploadStep } from '@/spreadsheet-import/components/steps/UploadStep/UploadStep';
+import { ModalWrapper } from '@/spreadsheet-import/components/ModalWrapper';
+import { Providers } from '@/spreadsheet-import/components/Providers';
+import { UploadStep } from '@/spreadsheet-import/steps/components/UploadStep/UploadStep';
 import { mockRsiValues } from '@/spreadsheet-import/tests/mockRsiValues';

 const meta: Meta<typeof UploadStep> = {
@ -17,7 +17,7 @@ export default meta;

 export function Default() {
  return (
-    <Providers rsiValues={mockRsiValues}>
+    <Providers values={mockRsiValues}>
      <ModalWrapper isOpen={true} onClose={() => null}>
        <UploadStep onContinue={() => Promise.resolve()} />
      </ModalWrapper>
--- a/front/src/modules/spreadsheet-import/steps/components/stories/Validation.stories.tsx
+++ b/front/src/modules/spreadsheet-import/steps/components/stories/Validation.stories.tsx
@ -1,8 +1,8 @@
 import { Meta } from '@storybook/react';

-import { ModalWrapper } from '@/spreadsheet-import/components/core/ModalWrapper';
-import { Providers } from '@/spreadsheet-import/components/core/Providers';
-import { ValidationStep } from '@/spreadsheet-import/components/steps/ValidationStep/ValidationStep';
+import { ModalWrapper } from '@/spreadsheet-import/components/ModalWrapper';
+import { Providers } from '@/spreadsheet-import/components/Providers';
+import { ValidationStep } from '@/spreadsheet-import/steps/components/ValidationStep/ValidationStep';
 import {
  editableTableInitialData,
  mockRsiValues,
@ -22,7 +22,7 @@ const file = new File([''], 'file.csv');

 export function Default() {
  return (
-    <Providers rsiValues={mockRsiValues}>
+    <Providers values={mockRsiValues}>
      <ModalWrapper isOpen={true} onClose={() => null}>
        <ValidationStep initialData={editableTableInitialData} file={file} />
      </ModalWrapper>
--- a/front/src/modules/spreadsheet-import/tests/mockRsiValues.ts
+++ b/front/src/modules/spreadsheet-import/tests/mockRsiValues.ts
@ -1,5 +1,5 @@
-import { defaultRSIProps } from '@/spreadsheet-import/components/SpreadsheetImport';
-import type { RsiProps } from '@/spreadsheet-import/types';
+import { defaultSpreadsheetImportProps } from '@/spreadsheet-import/provider/components/SpreadsheetImport';
+import type { SpreadsheetOptions } from '@/spreadsheet-import/types';

 const fields = [
  {
@ -87,13 +87,14 @@ const fields = [
  },
 ] as const;

-const mockComponentBehaviourForTypes = <T extends string>(props: RsiProps<T>) =>
-  props;
+const mockComponentBehaviourForTypes = <T extends string>(
+  props: SpreadsheetOptions<T>,
+) => props;

 export const mockRsiValues = mockComponentBehaviourForTypes({
-  ...defaultRSIProps,
+  ...defaultSpreadsheetImportProps,
  fields: fields,
-  onSubmit: (data) => {
+  onSubmit: async (data) => {
    console.log(data.all.map((value) => value));
  },
  isOpen: true,
--- a/front/src/modules/spreadsheet-import/types/index.ts
+++ b/front/src/modules/spreadsheet-import/types/index.ts
@ -1,16 +1,16 @@
 import { ReadonlyDeep } from 'type-fest';

-import { Columns } from '../components/steps/MatchColumnsStep/MatchColumnsStep';
-import { StepState } from '../components/steps/UploadFlow';
-import { Meta } from '../components/steps/ValidationStep/types';
+import { Columns } from '@/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep';
+import { StepState } from '@/spreadsheet-import/steps/components/UploadFlow';
+import { Meta } from '@/spreadsheet-import/steps/components/ValidationStep/types';

-export type RsiProps<T extends string> = {
+export type SpreadsheetOptions<Keys extends string> = {
  // Is modal visible.
  isOpen: boolean;
  // callback when RSI is closed before final submit
  onClose: () => void;
  // Field description for requested data
-  fields: Fields<T>;
+  fields: Fields<Keys>;
  // Runs after file upload step, receives and returns raw sheet data
  uploadStepHook?: (data: RawData[]) => Promise<RawData[]>;
  // Runs after header selection step, receives and returns raw sheet data
@ -20,16 +20,16 @@ export type RsiProps<T extends string> = {
  ) => Promise<{ headerValues: RawData; data: RawData[] }>;
  // Runs once before validation step, used for data mutations and if you want to change how columns were matched
  matchColumnsStepHook?: (
-    table: Data<T>[],
+    table: Data<Keys>[],
    rawData: RawData[],
-    columns: Columns<T>,
-  ) => Promise<Data<T>[]>;
+    columns: Columns<Keys>,
+  ) => Promise<Data<Keys>[]>;
  // Runs after column matching and on entry change
-  rowHook?: RowHook<T>;
+  rowHook?: RowHook<Keys>;
  // Runs after column matching and on entry change
-  tableHook?: TableHook<T>;
+  tableHook?: TableHook<Keys>;
  // Function called after user finishes the flow
-  onSubmit: (data: Result<T>, file: File) => void;
+  onSubmit: (data: Result<Keys>, file: File) => Promise<void>;
  // Allows submitting with errors. Default: true
  allowInvalidSubmit?: boolean;
  // Theme configuration passed to underlying Chakra-UI
@ -110,7 +110,8 @@ export type Input = {
 export type Validation =
  | RequiredValidation
  | UniqueValidation
-  | RegexValidation;
+  | RegexValidation
+  | FunctionValidation;

 export type RequiredValidation = {
  rule: 'required';
@ -133,6 +134,13 @@ export type RegexValidation = {
  level?: ErrorLevel;
 };

+export type FunctionValidation = {
+  rule: 'function';
+  isValid: (value: string) => boolean;
+  errorMessage: string;
+  level?: ErrorLevel;
+};
+
 export type RowHook<T extends string> = (
  row: Data<T>,
  addError: (fieldKey: T, error: Info) => void,
--- a/front/src/modules/spreadsheet-import/utils/dataMutations.ts
+++ b/front/src/modules/spreadsheet-import/utils/dataMutations.ts
@ -3,7 +3,7 @@ import { v4 } from 'uuid';
 import type {
  Errors,
  Meta,
-} from '@/spreadsheet-import/components/steps/ValidationStep/types';
+} from '@/spreadsheet-import/steps/components/ValidationStep/types';
 import type {
  Data,
  Fields,
@ -93,8 +93,9 @@ export const addErrorsAndRunHooks = <T extends string>(
        case 'regex': {
          const regex = new RegExp(validation.value, validation.flags);
          data.forEach((entry, index) => {
-            const value = entry[field.key]?.toString() ?? '';
-            if (!value.match(regex)) {
+            const value = entry[field.key]?.toString();
+
+            if (value && !value.match(regex)) {
              errors[index] = {
                ...errors[index],
                [field.key]: {
@ -108,6 +109,22 @@ export const addErrorsAndRunHooks = <T extends string>(
          });
          break;
        }
+        case 'function': {
+          data.forEach((entry, index) => {
+            const value = entry[field.key]?.toString();
+
+            if (value && !validation.isValid(value)) {
+              errors[index] = {
+                ...errors[index],
+                [field.key]: {
+                  level: validation.level || 'error',
+                  message: validation.errorMessage || 'Field is invalid',
+                },
+              };
+            }
+          });
+          break;
+        }
      }
    });
  });
--- a/front/src/modules/spreadsheet-import/utils/findUnmatchedRequiredFields.ts
+++ b/front/src/modules/spreadsheet-import/utils/findUnmatchedRequiredFields.ts
@ -1,4 +1,4 @@
-import type { Columns } from '@/spreadsheet-import/components/steps/MatchColumnsStep/MatchColumnsStep';
+import type { Columns } from '@/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep';
 import type { Fields } from '@/spreadsheet-import/types';

 export const findUnmatchedRequiredFields = <T extends string>(
--- a/front/src/modules/spreadsheet-import/utils/getMatchedColumns.ts
+++ b/front/src/modules/spreadsheet-import/utils/getMatchedColumns.ts
@ -4,7 +4,7 @@ import type {
  Column,
  Columns,
  MatchColumnsProps,
-} from '@/spreadsheet-import/components/steps/MatchColumnsStep/MatchColumnsStep';
+} from '@/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep';
 import type { Field, Fields } from '@/spreadsheet-import/types';

 import { findMatch } from './findMatch';
--- a/front/src/modules/spreadsheet-import/utils/normalizeTableData.ts
+++ b/front/src/modules/spreadsheet-import/utils/normalizeTableData.ts
@ -1,7 +1,7 @@
 import {
  Columns,
  ColumnType,
-} from '@/spreadsheet-import/components/steps/MatchColumnsStep/MatchColumnsStep';
+} from '@/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep';
 import type { Data, Fields, RawData } from '@/spreadsheet-import/types';

 import { normalizeCheckboxValue } from './normalizeCheckboxValue';
--- a/front/src/modules/spreadsheet-import/utils/setColumn.ts
+++ b/front/src/modules/spreadsheet-import/utils/setColumn.ts
@ -2,7 +2,7 @@ import {
  Column,
  ColumnType,
  MatchColumnsProps,
-} from '@/spreadsheet-import/components/steps/MatchColumnsStep/MatchColumnsStep';
+} from '@/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep';
 import type { Field } from '@/spreadsheet-import/types';

 import { uniqueEntries } from './uniqueEntries';
--- a/front/src/modules/spreadsheet-import/utils/setIgnoreColumn.ts
+++ b/front/src/modules/spreadsheet-import/utils/setIgnoreColumn.ts
@ -1,7 +1,7 @@
 import {
  Column,
  ColumnType,
-} from '@/spreadsheet-import/components/steps/MatchColumnsStep/MatchColumnsStep';
+} from '@/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep';

 export const setIgnoreColumn = <T extends string>({
  header,
--- a/front/src/modules/spreadsheet-import/utils/setSubColumn.ts
+++ b/front/src/modules/spreadsheet-import/utils/setSubColumn.ts
@ -3,7 +3,7 @@ import {
  MatchedOptions,
  MatchedSelectColumn,
  MatchedSelectOptionsColumn,
-} from '@/spreadsheet-import/components/steps/MatchColumnsStep/MatchColumnsStep';
+} from '@/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep';

 export const setSubColumn = <T>(
  oldColumn: MatchedSelectColumn<T> | MatchedSelectOptionsColumn<T>,
--- a/front/src/modules/spreadsheet-import/utils/uniqueEntries.ts
+++ b/front/src/modules/spreadsheet-import/utils/uniqueEntries.ts
@ -3,7 +3,7 @@ import uniqBy from 'lodash/uniqBy';
 import type {
  MatchColumnsProps,
  MatchedOptions,
-} from '@/spreadsheet-import/components/steps/MatchColumnsStep/MatchColumnsStep';
+} from '@/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep';

 export const uniqueEntries = <T extends string>(
  data: MatchColumnsProps<T>['data'],
--- a/front/src/modules/ui/dialog/components/DialogProvider.tsx
+++ b/front/src/modules/ui/dialog/components/DialogProvider.tsx
@ -19,7 +19,11 @@ export function DialogProvider({ children }: React.PropsWithChildren) {
    <>
      {children}
      {dialogState.queue.map((dialog) => (
-        <Dialog {...dialog} onClose={() => handleDialogClose(dialog.id)} />
+        <Dialog
+          key={dialog.id}
+          {...dialog}
+          onClose={() => handleDialogClose(dialog.id)}
+        />
      ))}
    </>
  );
--- a/front/src/modules/ui/icon/index.ts
+++ b/front/src/modules/ui/icon/index.ts
@ -11,6 +11,7 @@ export {
  IconBrandGithub,
  IconBrandGoogle,
  IconBrandLinkedin,
+  IconBrandTwitter,
  IconBrandX,
  IconBriefcase,
  IconBuildingSkyscraper,
--- a/front/src/modules/ui/input/radio/components/Radio.tsx
+++ b/front/src/modules/ui/input/radio/components/Radio.tsx
@ -30,7 +30,7 @@ const Container = styled.div<{ labelPosition?: LabelPosition }>`
 `;

 type RadioInputProps = {
-  radioSize?: RadioSize;
+  'radio-size'?: RadioSize;
 };

 const RadioInput = styled(motion.input)<RadioInputProps>`
@ -60,13 +60,13 @@ const RadioInput = styled(motion.input)<RadioInputProps>`
      background-color: ${({ theme }) => theme.grayScale.gray0};
      border-radius: 50%;
      content: '';
-      height: ${({ radioSize }) =>
+      height: ${({ 'radio-size': radioSize }) =>
        radioSize === RadioSize.Large ? '8px' : '6px'};
      left: 50%;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
-      width: ${({ radioSize }) =>
+      width: ${({ 'radio-size': radioSize }) =>
        radioSize === RadioSize.Large ? '8px' : '6px'};
    }
  }
@ -74,10 +74,10 @@ const RadioInput = styled(motion.input)<RadioInputProps>`
    cursor: not-allowed;
    opacity: 0.12;
  }
-  height: ${({ radioSize }) =>
+  height: ${({ 'radio-size': radioSize }) =>
    radioSize === RadioSize.Large ? '18px' : '16px'};
  position: relative;
-  width: ${({ radioSize }) =>
+  width: ${({ 'radio-size': radioSize }) =>
    radioSize === RadioSize.Large ? '18px' : '16px'};
 `;

@ -134,7 +134,7 @@ export function Radio({
        data-testid="input-radio"
        checked={checked}
        value={value}
-        radioSize={size}
+        radio-size={size}
        disabled={disabled}
        onChange={handleChange}
        initial={{ scale: 0.95 }}
--- a/front/src/modules/ui/step-bar/components/Step.tsx
+++ b/front/src/modules/ui/step-bar/components/Step.tsx
@ -10,7 +10,7 @@ const Container = styled.div<{ isLast: boolean }>`
  flex-grow: ${({ isLast }) => (isLast ? '0' : '1')};
 `;

-const StepCircle = styled(motion.div)<{ isCurrent: boolean }>`
+const StepCircle = styled(motion.div)`
  align-items: center;
  border-radius: 50%;
  border-style: solid;
@ -40,7 +40,7 @@ const StepLabel = styled.span<{ isActive: boolean }>`
  white-space: nowrap;
 `;

-const StepLine = styled(motion.div)<{ isActive: boolean }>`
+const StepLine = styled(motion.div)`
  height: 2px;
  margin-left: ${({ theme }) => theme.spacing(2)};
  margin-right: ${({ theme }) => theme.spacing(2)};
@ -92,7 +92,6 @@ export const Step = ({
  return (
    <Container isLast={isLast}>
      <StepCircle
-        isCurrent={isActive}
        variants={variantsCircle}
        animate={isActive ? 'active' : 'inactive'}
      >
@ -107,7 +106,6 @@ export const Step = ({
      <StepLabel isActive={isActive}>{label}</StepLabel>
      {!isLast && (
        <StepLine
-          isActive={isActive}
          variants={variantsLine}
          animate={isActive ? 'active' : 'inactive'}
        />
--- a/front/src/modules/ui/table/components/EntityTable.tsx
+++ b/front/src/modules/ui/table/components/EntityTable.tsx
@ -99,6 +99,7 @@ type OwnProps<SortField> = {
  onColumnsChange?: (columns: ViewFieldDefinition<ViewFieldMetadata>[]) => void;
  onSortsUpdate?: (sorts: Array<SelectedSortType<SortField>>) => void;
  onViewsChange?: (views: TableView[]) => void;
+  onImport?: () => void;
  updateEntityMutation: any;
 };

@ -108,6 +109,7 @@ export function EntityTable<SortField>({
  onColumnsChange,
  onSortsUpdate,
  onViewsChange,
+  onImport,
  updateEntityMutation,
 }: OwnProps<SortField>) {
  const tableBodyRef = useRef<HTMLDivElement>(null);
@ -136,6 +138,7 @@ export function EntityTable<SortField>({
            onColumnsChange={onColumnsChange}
            onSortsUpdate={onSortsUpdate}
            onViewsChange={onViewsChange}
+            onImport={onImport}
          />
          <StyledTableWrapper>
            <StyledTable>
--- a/front/src/modules/ui/table/hooks/useUpsertEntityTableItems.ts
+++ b/front/src/modules/ui/table/hooks/useUpsertEntityTableItems.ts
@ -0,0 +1,34 @@
+import { useRecoilCallback } from 'recoil';
+
+import { tableEntitiesFamilyState } from '@/ui/table/states/tableEntitiesFamilyState';
+
+export function useUpsertEntityTableItems() {
+  return useRecoilCallback(
+    ({ set, snapshot }) =>
+      <T extends { id: string }>(entities: T[]) => {
+        // Create a map of new entities for quick lookup.
+        const newEntityMap = new Map(
+          entities.map((entity) => [entity.id, entity]),
+        );
+
+        // Filter out entities that are already the same in the state.
+        const entitiesToUpdate = entities.filter((entity) => {
+          const currentEntity = snapshot
+            .getLoadable(tableEntitiesFamilyState(entity.id))
+            .valueMaybe();
+
+          return (
+            !currentEntity ||
+            JSON.stringify(currentEntity) !==
+              JSON.stringify(newEntityMap.get(entity.id))
+          );
+        });
+
+        // Batch set state for the filtered entities.
+        for (const entity of entitiesToUpdate) {
+          set(tableEntitiesFamilyState(entity.id), entity);
+        }
+      },
+    [],
+  );
+}
--- a/front/src/modules/ui/table/hooks/useUpsertTableRowIds.ts
+++ b/front/src/modules/ui/table/hooks/useUpsertTableRowIds.ts
@ -0,0 +1,18 @@
+import { useRecoilCallback } from 'recoil';
+
+import { tableRowIdsState } from '../states/tableRowIdsState';
+
+export function useUpsertTableRowIds() {
+  return useRecoilCallback(
+    ({ set, snapshot }) =>
+      (rowIds: string[]) => {
+        const currentRowIds = snapshot
+          .getLoadable(tableRowIdsState)
+          .valueOrThrow();
+
+        const uniqueRowIds = Array.from(new Set([...rowIds, ...currentRowIds]));
+        set(tableRowIdsState, uniqueRowIds);
+      },
+    [],
+  );
+}
--- a/front/src/modules/ui/table/options/components/TableOptionsDropdownButton.tsx
+++ b/front/src/modules/ui/table/options/components/TableOptionsDropdownButton.tsx
@ -9,7 +9,6 @@ import { useTheme } from '@emotion/react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { v4 } from 'uuid';

-import { useSpreadsheetImport } from '@/spreadsheet-import/hooks/useSpreadsheetImport';
 import { IconButton } from '@/ui/button/components/IconButton';
 import { DropdownMenuHeader } from '@/ui/dropdown/components/DropdownMenuHeader';
 import { DropdownMenuInput } from '@/ui/dropdown/components/DropdownMenuInput';
@ -51,6 +50,7 @@ import { TableOptionsDropdownSection } from './TableOptionsDropdownSection';
 type TableOptionsDropdownButtonProps = {
  onColumnsChange?: (columns: ViewFieldDefinition<ViewFieldMetadata>[]) => void;
  onViewsChange?: (views: TableView[]) => void;
+  onImport?: () => void;
  HotkeyScope: TableOptionsHotkeyScope;
 };

@ -61,12 +61,11 @@ enum Option {
 export const TableOptionsDropdownButton = ({
  onColumnsChange,
  onViewsChange,
+  onImport,
  HotkeyScope,
 }: TableOptionsDropdownButtonProps) => {
  const theme = useTheme();

-  const { openSpreadsheetImport } = useSpreadsheetImport();
-
  const [isUnfolded, setIsUnfolded] = useState(false);
  const [selectedOption, setSelectedOption] = useState<Option | undefined>(
    undefined,
@ -94,16 +93,6 @@ export const TableOptionsDropdownButton = ({
    setHotkeyScopeAndMemorizePreviousScope,
  } = usePreviousHotkeyScope();

-  function handleImport() {
-    openSpreadsheetImport({
-      onSubmit: (datam, file) => {
-        console.log('datam', datam);
-        console.log('file', file);
-      },
-      fields: [],
-    });
-  }
-
  const handleColumnVisibilityChange = useCallback(
    (columnId: string, nextIsVisible: boolean) => {
      const nextColumns = columns.map((column) =>
@ -245,8 +234,8 @@ export const TableOptionsDropdownButton = ({
              <IconTag size={theme.icon.size.md} />
              Properties
            </DropdownMenuItem>
-            {false && (
-              <DropdownMenuItem onClick={handleImport}>
+            {onImport && (
+              <DropdownMenuItem onClick={onImport}>
                <IconFileImport size={theme.icon.size.md} />
                Import
              </DropdownMenuItem>
--- a/front/src/modules/ui/table/table-header/components/TableHeader.tsx
+++ b/front/src/modules/ui/table/table-header/components/TableHeader.tsx
@ -26,6 +26,7 @@ type OwnProps<SortField> = {
  onColumnsChange?: (columns: ViewFieldDefinition<ViewFieldMetadata>[]) => void;
  onSortsUpdate?: (sorts: Array<SelectedSortType<SortField>>) => void;
  onViewsChange?: (views: TableView[]) => void;
+  onImport?: () => void;
 };

 export function TableHeader<SortField>({
@ -34,6 +35,7 @@ export function TableHeader<SortField>({
  onColumnsChange,
  onSortsUpdate,
  onViewsChange,
+  onImport,
 }: OwnProps<SortField>) {
  const [sorts, setSorts] = useRecoilScopedState<SelectedSortType<SortField>[]>(
    sortScopedState,
@ -82,6 +84,7 @@ export function TableHeader<SortField>({
            isPrimaryButton
          />
          <TableOptionsDropdownButton
+            onImport={onImport}
            onColumnsChange={onColumnsChange}
            onViewsChange={onViewsChange}
            HotkeyScope={TableOptionsHotkeyScope.Dropdown}