feat: refactor stream plans management with calendar view and improve…

…d list actions

src/App.tsx

@@ -1,10 +1,9 @@
 import localForageDataProvider from 'ra-data-local-forage';
 import { useEffect, useState } from 'react';
 import { Admin, type DataProvider, Resource } from 'react-admin';
+import { Route } from 'react-router-dom';
 
-import StreamPlansCreate from './resources/stream_plans/StreamPlansCreate';
-import StreamPlansEdit from './resources/stream_plans/StreamPlansEdit';
-import StreamPlansList from './resources/stream_plans/StreamPlansList';
+import streamPlans, { StreamPlansCalendar } from './resources/stream_plans';
 
 import defaultData from '../defaultData.json';
 import i18nProvider from './i18nProvider';
@@ -31,12 +30,9 @@ function App() {
 
   return (
     <Admin dataProvider={dataProvider} i18nProvider={i18nProvider}>
-      <Resource
-        name="stream_plans"
-        list={StreamPlansList}
-        create={StreamPlansCreate}
-        edit={StreamPlansEdit}
-      />
+      <Resource name="stream_plans" {...streamPlans}>
+        <Route path="calendar" element={<StreamPlansCalendar />} />
+      </Resource>
     </Admin>
   );
 }

src/resources/stream_plans/StreamPlansCalendar.tsx

@@ -0,0 +1,31 @@
+import {
+  CreateButton,
+  Datagrid,
+  List,
+  ListButton,
+  TextField,
+  TopToolbar,
+} from 'react-admin';
+import RecurrenceDayField from '../../atoms/RecurrenceDayField';
+
+const ListActions = () => (
+  <TopToolbar>
+    <CreateButton />
+
+    <ListButton />
+  </TopToolbar>
+);
+
+function StreamPlansCalendar() {
+  return (
+    <List actions={<ListActions />}>
+      <Datagrid>
+        <TextField source="name" />
+        <TextField source="start_time" />
+        <RecurrenceDayField source="recurrence.days" />
+      </Datagrid>
+    </List>
+  );
+}
+
+export default StreamPlansCalendar;

src/resources/stream_plans/StreamPlansList.tsx

@@ -1,9 +1,30 @@
-import { Datagrid, List, TextField } from 'react-admin';
+import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
+import {
+  Button,
+  CreateButton,
+  Datagrid,
+  Link,
+  List,
+  TextField,
+  TopToolbar,
+} from 'react-admin';
 import RecurrenceDayField from '../../atoms/RecurrenceDayField';
 
+const ListActions = () => {
+  return (
+    <TopToolbar>
+      <CreateButton />
+
+      <Button component={Link} to="calendar" label="Calendar">
+        <CalendarMonthIcon />
+      </Button>
+    </TopToolbar>
+  );
+};
+
 function StreamPlansList() {
   return (
-    <List>
+    <List actions={<ListActions />}>
       <Datagrid>
         <TextField source="name" />
         <TextField source="start_time" />

src/resources/stream_plans/index.ts

@@ -0,0 +1,12 @@
+import StreamPlansCalendar from './StreamPlansCalendar';
+import StreamPlansCreate from './StreamPlansCreate';
+import StreamPlansEdit from './StreamPlansEdit';
+import StreamPlansList from './StreamPlansList';
+
+export default {
+  list: StreamPlansList,
+  create: StreamPlansCreate,
+  edit: StreamPlansEdit,
+};
+
+export { StreamPlansCalendar };