Фронтенд для сервиса (#5)

Co-authored-by: gorbenko.pavel <gorbenko.pavel@tansu.kz>
Reviewed-on: http://git.tnsu.kz/gorbenko.pavel/tnsu-approval-route/pulls/5

frontend/src/webparts/approvalAdmin/components/ui/CellNote.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import styles from './DataTable.module.scss';
+import { Icon } from './Icon';
+
+export interface ICellNoteProps {
+  children: React.ReactNode;
+  /** 'warn' — амбер с иконкой (например, причина от бэкенда), 'muted' — нейтральная пометка. */
+  kind?: 'warn' | 'muted';
+}
+
+/** Пояснение под основным значением ячейки — например, причина, по которой оно пустое. */
+export const CellNote: React.FC<ICellNoteProps> = ({ children, kind = 'muted' }) => (
+  <span className={`${styles.cellNote} ${kind === 'warn' ? styles.cellNoteWarn : ''}`}>
+    {kind === 'warn' && <Icon name="warning" size="sm" />}
+    <span>{children}</span>
+  </span>
+);