feat: create automatic assignment panel UI

experimental feature

src/component/panels/AutomaticAssignment/AutomaticAssignment.tsx

@@ -0,0 +1,31 @@
+/** @jsxImportSource @emotion/react */
+import { SvgNmrAssignment2 } from 'cheminfo-font';
+import { useCallback } from 'react';
+
+import Button from '../../elements/ButtonToolTip';
+import { tablePanelStyle } from '../extra/BasicPanelStyle';
+import DefaultPanelHeader from '../header/DefaultPanelHeader';
+
+function AutomaticAssignment() {
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  const automaticAssignmentHandler = useCallback(() => {}, []);
+
+  return (
+    <div css={tablePanelStyle}>
+      {
+        <DefaultPanelHeader showSettingButton={false} canDelete={false}>
+          <Button
+            popupTitle="automatic assignment"
+            onClick={automaticAssignmentHandler}
+          >
+            <SvgNmrAssignment2 style={{ fontSize: '18px' }} />
+          </Button>
+        </DefaultPanelHeader>
+      }
+
+      <div className="inner-container" />
+    </div>
+  );
+}
+
+export default AutomaticAssignment;

src/component/panels/AutomaticAssignment/AutomaticAssignmentTable.tsx

@@ -0,0 +1,62 @@
+import { SvgNmrAssignment } from 'cheminfo-font';
+import { useCallback, useMemo, memo } from 'react';
+
+import ReactTable from '../../elements/ReactTable/ReactTable';
+import { CustomColumn } from '../../elements/ReactTable/utility/addCustomColumn';
+import NoTableData from '../extra/placeholder/NoTableData';
+
+interface AutomaticAssignmentTableProps {
+  data: any;
+}
+
+function PeaksTable({ data }: AutomaticAssignmentTableProps) {
+  const assignHandler = useCallback((e, row) => {
+    e.preventDefault();
+    e.stopPropagation();
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const params = row.original;
+  }, []);
+
+  const COLUMNS: CustomColumn[] = useMemo(
+    () => [
+      {
+        index: 1,
+        Header: '#',
+        Cell: ({ row }) => row.index + 1,
+        style: { width: '1%', maxWidth: '40px', minWidth: '40px' },
+      },
+      {
+        index: 2,
+        Header: 'Score',
+      },
+      {
+        index: 3,
+        Header: '',
+        style: {
+          width: '1%',
+          maxWidth: '24px',
+          minWidth: '24px',
+        },
+        id: 'assign-button',
+        Cell: ({ row }) => (
+          <button
+            type="button"
+            className="assign-button"
+            onClick={(e) => assignHandler(e, row)}
+          >
+            <SvgNmrAssignment />
+          </button>
+        ),
+      },
+    ],
+    [assignHandler],
+  );
+
+  return data && data.length > 0 ? (
+    <ReactTable data={data} columns={COLUMNS} />
+  ) : (
+    <NoTableData />
+  );
+}
+
+export default memo(PeaksTable);

src/component/panels/Panels.tsx

@@ -7,6 +7,7 @@ import { usePreferences } from '../context/PreferencesContext';
 import useCheckExperimentalFeature from '../hooks/useCheckExperimentalFeature';
 import { DISPLAYER_MODE } from '../reducer/core/Constants';
 
+import AutomaticAssignment from './AutomaticAssignment/AutomaticAssignment';
 import InformationPanel from './InformationPanel';
 import IntegralPanel from './IntegralsPanel/IntegralPanel';
 import MatrixGenerationPanel from './MatrixGenerationPanel/MatrixGenerationPanel';
@@ -104,6 +105,13 @@ const accordionItems: AccordionItem[] = [
     hidePreferenceKey: 'hideDatabasePanel',
     mode: null,
   },
+  {
+    title: 'Automatic Assignment',
+    component: <AutomaticAssignment />,
+    hidePreferenceKey: '',
+    mode: null,
+    isExperimental: true,
+  },
 ];
 
 export const TOOLS_PANELS_ACCORDION: Record<string, string> = {