✨ Add manage dashboards page

src/modals/create-dashboard/create-dashboard.modal.tsx

@@ -0,0 +1,56 @@
+import { Button, Group, Stack, Text, TextInput } from '@mantine/core';
+import { useForm } from '@mantine/form';
+import { ContextModalProps, modals } from '@mantine/modals';
+import { getStaticFallbackConfig } from '~/tools/config/getFallbackConfig';
+import { api } from '~/utils/api';
+import { useI18nZodResolver } from '~/utils/i18n-zod-resolver';
+import { createDashboardSchemaValidation } from '~/validations/dashboards';
+
+export const CreateDashboardModal = ({ context, id, innerProps }: ContextModalProps<{}>) => {
+  const apiContext = api.useContext();
+  const { isLoading, mutateAsync } = api.config.save.useMutation({
+    onSuccess: async () => {
+      await apiContext.config.all.invalidate();
+      modals.close(id);
+    },
+  });
+
+  const { i18nZodResolver } = useI18nZodResolver();
+
+  const form = useForm({
+    initialValues: {
+      name: '',
+    },
+    validate: i18nZodResolver(createDashboardSchemaValidation),
+  });
+
+  return (
+    <Stack>
+      <Text>A name cannot be changed after a dashboard has been created.</Text>
+
+      <TextInput label="Name" withAsterisk {...form.getInputProps('name')} />
+
+      <Group grow>
+        <Button
+          onClick={() => {
+            modals.close(id);
+          }}
+        >
+          Cancel
+        </Button>
+        <Button
+          onClick={async () => {
+            const fallbackConfig = getStaticFallbackConfig(form.values.name);
+            await mutateAsync({
+              name: form.values.name,
+              config: fallbackConfig,
+            });
+          }}
+          disabled={isLoading}
+        >
+          Create
+        </Button>
+      </Group>
+    </Stack>
+  );
+};

src/modals/modals.ts

@@ -9,6 +9,7 @@ import { CategoryEditModal } from '~/components/Dashboard/Wrappers/Category/Cate
 import { DeleteUserModal } from './delete-user/delete-user.modal';
 import { CreateRegistrationTokenModal } from './create-registration-token/create-registration-token.modal';
 import { DeleteRegistrationTokenModal } from './delete-registration-token/delete-registration-token.modal';
+import { CreateDashboardModal } from './create-dashboard/create-dashboard.modal';
 
 export const modals = {
   editApp: EditAppModal,
@@ -20,7 +21,8 @@ export const modals = {
   changeIntegrationPositionModal: ChangeWidgetPositionModal,
   deleteUserModal: DeleteUserModal,
   createRegistrationTokenModal: CreateRegistrationTokenModal,
-  deleteRegistrationTokenModal: DeleteRegistrationTokenModal
+  deleteRegistrationTokenModal: DeleteRegistrationTokenModal,
+  createDashboardModal: CreateDashboardModal
 };
 
 declare module '@mantine/modals' {