0
# Admin Interface
1

2
Core admin interface components providing the foundational structure and context for react-admin applications.
3

4
## Capabilities
5

6
### AdminUI Component
7

8
Main admin interface wrapper component that provides the complete UI shell including routing, theme, and layout management.
9

10
```typescript { .api }
11
/**
12
 * Main admin interface wrapper component providing the complete UI shell
13
 * @param props - AdminUI configuration props
14
 * @returns Complete admin interface with routing and theme
15
 */
16
function AdminUI(props: AdminUIProps): ReactElement;
17

18
interface AdminUIProps {
19
  /** Layout component to use for the admin interface */
20
  layout?: ComponentType<LayoutProps>;
21
  /** Material UI theme configuration */
22
  theme?: Theme;
23
  /** Child components and routes */
24
  children?: ReactNode;
25
  /** Custom app bar component */
26
  appBar?: ComponentType<AppBarProps>;
27
  /** Custom sidebar component */
28
  sidebar?: ComponentType<SidebarProps>;
29
  /** Custom menu component */
30
  menu?: ComponentType<MenuProps>;
31
  /** Catch all component for unknown routes */
32
  catchAll?: ComponentType;
33
  /** Loading component */
34
  loading?: ComponentType;
35
  /** Custom login page component */
36
  loginPage?: ComponentType<LoginProps>;
37
  /** Disable authentication */
38
  disableAuthentication?: boolean;
39
}
40
```
41

42
**Usage Examples:**
43

44
```typescript
45
import { AdminUI, Layout, defaultTheme } from "ra-ui-materialui";
46

47
// Basic admin UI
48
const App = () => (
49
  <AdminUI layout={Layout} theme={defaultTheme}>
50
    {/* Resource definitions and routes */}
51
  </AdminUI>
52
);
53

54
// Custom admin UI with theme
55
const App = () => (
56
  <AdminUI 
57
    layout={Layout}
58
    theme={radiantDarkTheme}
59
    loginPage={CustomLogin}
60
  >
61
    {/* Admin content */}
62
  </AdminUI>
63
);
64
```
65

66
### AdminContext Component
67

68
Context provider for admin application state and configuration, managing data providers, authentication, and internationalization.
69

70
```typescript { .api }
71
/**
72
 * Context provider for admin application state and configuration
73
 * @param props - AdminContext configuration props
74
 * @returns Provider component with admin context
75
 */
76
function AdminContext(props: AdminContextProps): ReactElement;
77

78
interface AdminContextProps {
79
  /** Data provider for API operations */
80
  dataProvider?: DataProvider;
81
  /** Authentication provider */
82
  authProvider?: AuthProvider;
83
  /** Internationalization provider */
84
  i18nProvider?: I18nProvider;
85
  /** Navigation history instance */
86
  history?: History;
87
  /** Child components */
88
  children?: ReactNode;
89
  /** Base name for routing */
90
  basename?: string;
91
}
92
```
93

94
**Usage Examples:**
95

96
```typescript
97
import { AdminContext } from "ra-ui-materialui";
98
import { dataProvider, authProvider, i18nProvider } from "./providers";
99

100
const App = () => (
101
  <AdminContext
102
    dataProvider={dataProvider}
103
    authProvider={authProvider}
104
    i18nProvider={i18nProvider}
105
  >
106
    {/* Admin interface components */}
107
  </AdminContext>
108
);
109
```
110

111
## Types
112

113
```typescript { .api }
114
interface DataProvider {
115
  getList: (resource: string, params: GetListParams) => Promise<GetListResult>;
116
  getOne: (resource: string, params: GetOneParams) => Promise<GetOneResult>;
117
  create: (resource: string, params: CreateParams) => Promise<CreateResult>;
118
  update: (resource: string, params: UpdateParams) => Promise<UpdateResult>;
119
  delete: (resource: string, params: DeleteParams) => Promise<DeleteResult>;
120
  deleteMany: (resource: string, params: DeleteManyParams) => Promise<DeleteManyResult>;
121
  updateMany: (resource: string, params: UpdateManyParams) => Promise<UpdateManyResult>;
122
}
123

124
interface AuthProvider {
125
  login: (params: any) => Promise<any>;
126
  logout: (params: any) => Promise<void | false | string>;
127
  checkAuth: (params: any) => Promise<void>;
128
  checkError: (error: any) => Promise<void>;
129
  getIdentity: () => Promise<UserIdentity>;
130
  getPermissions: (params: any) => Promise<any>;
131
}
132

133
interface I18nProvider {
134
  translate: (key: string, options?: any) => string;
135
  changeLocale: (locale: string) => Promise<void>;
136
  getLocale: () => string;
137
  getMessages: () => any;
138
}
139

140
interface UserIdentity {
141
  id: string | number;
142
  fullName?: string;
143
  avatar?: string;
144
  [key: string]: any;
145
}
146
```