refactor: simplify ux for sheet import

apps/client/src/features/app-settings/panel/manage-panel/sources-panel/ImportReview.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { CustomFields, Rundown } from 'ontime-types';
+import { getFirstEventNormal, getLastEventNormal, millisToString } from 'ontime-utils';
 
 import Button from '../../../../../common/components/buttons/Button';
 import useRundown from '../../../../../common/hooks-query/useRundown';
@@ -43,6 +44,9 @@ export default function ImportReview(props: ImportReviewProps) {
     onFinished();
   };
 
+  const { firstEvent } = getFirstEventNormal(rundown.entries, rundown.flatOrder);
+  const { lastEvent } = getLastEventNormal(rundown.entries, rundown.flatOrder);
+
   return (
     <Panel.Section>
       <Panel.Title>
@@ -56,6 +60,24 @@ export default function ImportReview(props: ImportReviewProps) {
           </Button>
         </Panel.InlineElements>
       </Panel.Title>
+      <Panel.ListGroup>
+        <Panel.ListItem>
+          <b>Title</b> {rundown.title}
+        </Panel.ListItem>
+        <Panel.ListItem>
+          <b>Number of entries</b> {rundown.flatOrder.length}
+        </Panel.ListItem>
+        {firstEvent && (
+          <Panel.ListItem>
+            <b>Start Time</b> {millisToString(firstEvent.timeStart)}
+          </Panel.ListItem>
+        )}
+        {lastEvent && (
+          <Panel.ListItem>
+            <b>End Time</b> {millisToString(lastEvent.timeEnd)}
+          </Panel.ListItem>
+        )}
+      </Panel.ListGroup>
       <PreviewSpreadsheet rundown={rundown} customFields={customFields} />
     </Panel.Section>
   );

apps/client/src/features/app-settings/panel/manage-panel/sources-panel/import-map/ImportMapForm.tsx

@@ -5,6 +5,7 @@ import { checkRegex, ImportMap } from 'ontime-utils';
 
 import Button from '../../../../../../common/components/buttons/Button';
 import IconButton from '../../../../../../common/components/buttons/IconButton';
+import Info from '../../../../../../common/components/info/Info';
 import Input from '../../../../../../common/components/input/input/Input';
 import Select from '../../../../../../common/components/select/Select';
 import Tooltip from '../../../../../../common/components/tooltip/Tooltip';
@@ -136,6 +137,10 @@ export default function ImportMapForm({
           </Button>
         </Panel.InlineElements>
       </Panel.Title>
+      <Info>
+        Match your spreadsheet columns to Ontime fields. <br />
+        You can also add Custom Fields by providing a name for Ontime and the spreadsheet column name.
+      </Info>
       <Panel.Table>
         <thead>
           <tr>

apps/client/src/features/app-settings/panel/manage-panel/sources-panel/preview/PreviewRundown.tsx

@@ -18,9 +18,7 @@ function booleanToText(value?: boolean) {
   return value ? 'Yes' : undefined;
 }
 
-export default function PreviewRundown(props: PreviewRundownProps) {
-  const { rundown, customFields } = props;
-
+export default function PreviewRundown({ rundown, customFields }: PreviewRundownProps) {
   // we only count Ontime Events which are 1 based in client
   let eventIndex = 0;
 
@@ -59,9 +57,7 @@ export default function PreviewRundown(props: PreviewRundownProps) {
             const colour = entry.colour ? getAccessibleColour(entry.colour) : {};
             return (
               <tr key={entry.id}>
-                <td className={style.center}>
-                  <Tag>-</Tag>
-                </td>
+                <td /> {/** Index */}
                 <td className={style.center}>
                   <Tag>{entry.type}</Tag>
                 </td>