revert(people): restore Emir's directory, import and directory sync markup

His last versions (ecd02bc, directory CSS from b5a30e9) of the
directory, connect modal, import modal and directory sync page. Kept logic:
the toast sink import path and LOCALE number formatting.

Author: waleedlatif1

apps/sim/app/(product)/o/[organizationId]/people/_components/directory-sync/connect-modal.tsx

@@ -5,7 +5,7 @@ import { Button } from '@sim/emcn/button'
 import { TextField } from '@sim/emcn/field'
 import { SecretField } from '@sim/emcn/field/value-fields'
 import { Modal } from '@sim/emcn/modal'
-import { FailureNotice, InlineNotice } from '@sim/emcn/status'
+import { InlineNotice } from '@sim/emcn/status'
 import Link from 'next/link'
 import styles from '@/app/(product)/o/[organizationId]/people/_components/directory-sync/directory-sync.module.css'
 import { ExternalLink } from '@/app/(product)/o/[organizationId]/people/_components/external-link/external-link'
@@ -138,18 +138,15 @@ export function ConnectModal({ organizationId, source, onClose, onConnected }: C
           </ExternalLink>
         </>
       )}
-      {source === 'scim' && provisioning.failed && (
-        <FailureNotice
-          message='Could not read the provisioning connection.'
-          retrying={provisioning.fetching}
-          onRetry={provisioning.refresh}
-        />
-      )}
-      {source === 'scim' && !provisioning.failed && (
+      {source === 'scim' && (
         <div className={styles.provisioning} aria-live='polite'>
           {!provisioning.loading && (
             <p data-type='T060'>
-              {provisioning.ready ? 'Active' : 'Enable provisioning before connecting this source.'}
+              {provisioning.failed
+                ? 'Could not read the provisioning connection.'
+                : provisioning.ready
+                  ? 'Active'
+                  : 'Enable provisioning before connecting this source.'}
             </p>
           )}
           <div className={styles.quietActions}>

apps/sim/app/(product)/o/[organizationId]/people/_components/directory-sync/directory-sync-page.tsx

@@ -3,7 +3,7 @@
 import { useState } from 'react'
 import { Button } from '@sim/emcn/button'
 import { Modal } from '@sim/emcn/modal'
-import { FailureNotice, InlineNotice, StatusText } from '@sim/emcn/status'
+import { FailureNotice, InlineNotice, StatusTag } from '@sim/emcn/status'
 import { PageColumn } from '@sim/emcn-platform/page-column'
 import { formatDateTime } from '@sim/utils/formatting'
 import {
@@ -105,7 +105,7 @@ function SyncCard({ sync, syncing, running, onUpdate, onRun }: SyncCardProps) {
             </span>
           )}
         </span>
-        <StatusText label={tag} intent={intent} />
+        <StatusTag label={tag} intent={intent} live />
       </header>
       <div className={styles.summary}>
         <h2 data-type='T042'>{title}</h2>

apps/sim/app/(product)/o/[organizationId]/people/_components/directory/directory.module.css

@@ -32,13 +32,6 @@
   margin-inline-start: auto;
 }
 
-/* A phone gives search its own row, out to the page gutter. */
-@media (width < 30rem) {
-  .search {
-    flex-basis: 100%;
-  }
-}
-
 .scope {
   flex: 1;
   color: var(--ui-secondary);
@@ -51,33 +44,3 @@
     display: none;
   }
 }
-
-.personCell {
-  display: grid;
-  min-inline-size: 0;
-}
-
-.summary,
-.summaryDepartment {
-  display: none;
-}
-
-.summary {
-  gap: var(--ui-stack-gap);
-  margin-block-start: var(--ui-stack-gap);
-  color: var(--ui-secondary);
-  overflow-wrap: anywhere;
-}
-
-/* The breakpoints where the table hides its columns: what leaves the row joins the person's cell. */
-@container (width < 48rem) {
-  .summary {
-    display: grid;
-  }
-}
-
-@container (width < 30rem) {
-  .summaryDepartment {
-    display: inline;
-  }
-}

apps/sim/app/(product)/o/[organizationId]/people/_components/directory/directory.tsx

@@ -28,23 +28,6 @@ function DirectoryCell({ value }: DirectoryCellProps) {
   return <span data-type='T043'>{value || '—'}</span>
 }
 
-interface PersonSummaryProps {
-  department: string | null
-  location: string | null
-  manager: string | undefined
-}
-
-/** What the table's hidden columns would say, under the person, so a narrow table loses nothing. */
-function PersonSummary({ department, location, manager }: PersonSummaryProps) {
-  const place = [location, manager && `Reports to ${manager}`].filter(Boolean).join(' · ')
-  return (
-    <span className={styles.summary} data-type='T052'>
-      {department && <span className={styles.summaryDepartment}>{department}</span>}
-      {place && <span>{place}</span>}
-    </span>
-  )
-}
-
 interface PeopleDirectoryProps {
   organizationId: string
 }
@@ -60,16 +43,7 @@ export function PeopleDirectory({ organizationId }: PeopleDirectoryProps) {
         id: person.memberId,
         values: {},
         cells: {
-          person: (
-            <span className={styles.personCell}>
-              <PersonIdentity person={person} />
-              <PersonSummary
-                department={person.department}
-                location={person.location}
-                manager={person.manager?.name}
-              />
-            </span>
-          ),
+          person: <PersonIdentity person={person} />,
           department: <DirectoryCell value={person.department} />,
           location: <DirectoryCell value={person.location} />,
           manager: <DirectoryCell value={person.manager?.name} />,

apps/sim/app/(product)/o/[organizationId]/people/_components/import/import-modal.tsx

@@ -8,7 +8,7 @@ import { FileField } from '@sim/emcn/field/file-field'
 import { SecretField } from '@sim/emcn/field/value-fields'
 import { Modal } from '@sim/emcn/modal'
 import { useScrollEdges } from '@sim/emcn/scroll-area/use-scroll-edges'
-import { FailureNotice } from '@sim/emcn/status'
+import { InlineNotice } from '@sim/emcn/status'
 import { getErrorMessage } from '@sim/utils/errors'
 import Link from 'next/link'
 import { toast } from '@/lib/toast/sink'
@@ -156,7 +156,6 @@ export function ImportModal({ organizationId, onClose, onOpenSync }: ImportModal
       confirmLabel={
         done ? 'Done' : preview ? `Import ${plural(preview.updated, 'profile')}` : 'Preview import'
       }
-      pending={pending}
       confirmDisabled={pending || (!preview && !ready)}
       onBack={preview ? () => setPreview(null) : undefined}
       onConfirm={
@@ -248,46 +247,45 @@ export function ImportModal({ organizationId, onClose, onOpenSync }: ImportModal
               </ExternalLink>
             </>
           )}
-          {source === 'directory' && connection.failed && (
-            <FailureNotice
-              message='Could not load your provisioning connection.'
-              retrying={connection.fetching}
-              onRetry={connection.refresh}
-            />
-          )}
-          {source === 'directory' && !connection.failed && !connection.loading && (
+          {source === 'directory' && (
             <>
-              <p className={styles.secondary} data-type='T060'>
-                {!connection.active
-                  ? 'Enable SCIM provisioning and assign accounts in your provider to import their profiles.'
-                  : connection.userCount === 0
-                    ? 'Your connection is active. Assign accounts to Sim in your identity provider, then refresh here.'
-                    : `Your connection has ${plural(connection.userCount, 'provisioned account')}. Preview the profile fields and reporting lines sent by your provider.`}
-              </p>
-              <div className={styles.links}>
-                {canOpenProvisioningSettings && (
+              {!connection.loading && (
+                <p className={styles.secondary} data-type='T060'>
+                  {connection.failed
+                    ? 'Could not load your provisioning connection.'
+                    : !connection.active
+                      ? 'Enable SCIM provisioning and assign accounts in your provider to import their profiles.'
+                      : connection.userCount === 0
+                        ? 'Your connection is active. Assign accounts to Sim in your identity provider, then refresh here.'
+                        : `Your connection has ${plural(connection.userCount, 'provisioned account')}. Preview the profile fields and reporting lines sent by your provider.`}
+                </p>
+              )}
+              {!connection.loading && (
+                <div className={styles.links}>
+                  {canOpenProvisioningSettings && !connection.failed && (
+                    <Button
+                      variant='quiet'
+                      size='compact'
+                      render={<Link href={provisioningSettingsHref} />}
+                    >
+                      {connection.active ? 'Manage provisioning' : 'Set up provisioning'}
+                    </Button>
+                  )}
+                  {!connection.active && (
+                    <ExternalLink href='https://docs.sim.ai/platform/enterprise/scim'>
+                      Provisioning guide
+                    </ExternalLink>
+                  )}
                   <Button
                     variant='quiet'
                     size='compact'
-                    render={<Link href={provisioningSettingsHref} />}
+                    disabled={connection.fetching}
+                    onClick={connection.refresh}
                   >
-                    {connection.active ? 'Manage provisioning' : 'Set up provisioning'}
+                    {connection.failed ? 'Retry connection' : 'Refresh'}
                   </Button>
-                )}
-                {!connection.active && (
-                  <ExternalLink href='https://docs.sim.ai/platform/enterprise/scim'>
-                    Provisioning guide
-                  </ExternalLink>
-                )}
-                <Button
-                  variant='quiet'
-                  size='compact'
-                  disabled={connection.fetching}
-                  onClick={connection.refresh}
-                >
-                  Refresh
-                </Button>
-              </div>
+                </div>
+              )}
             </>
           )}
           {source === 'file' && (
@@ -303,6 +301,7 @@ export function ImportModal({ organizationId, onClose, onOpenSync }: ImportModal
                 error={fileError}
                 hint='CSV or Excel with an email column, plus any of title, department, location, start date, and manager email.'
               />
+              {reading && <InlineNotice message='Reading…' />}
               <div>
                 <Button variant='quiet' size='compact' onClick={downloadImportTemplate}>
                   Download template