🥅 Add alert when procedure failed

src/components/Manage/User/Create/review-input-step.tsx

@@ -1,5 +1,7 @@
-import { Button, Card, Group, Table, Text, Title } from '@mantine/core';
+import { Alert, Button, Card, Group, Table, Text, Title } from '@mantine/core';
 import {
+  IconAlertTriangle,
+  IconAlertTriangleFilled,
   IconArrowLeft,
   IconCheck,
   IconInfoCircle,
@@ -21,7 +23,7 @@ export const ReviewInputStep = ({ values, prevStep, nextStep }: ReviewInputStepP
   const { t } = useTranslation('manage/users/create');
 
   const utils = api.useContext();
-  const { mutateAsync: createAsync, isLoading } = api.user.create.useMutation({
+  const { mutateAsync: createAsync, isLoading, isError, error } = api.user.create.useMutation({
     onSettled: () => {
       void utils.user.all.invalidate();
     },
@@ -87,6 +89,12 @@ export const ReviewInputStep = ({ values, prevStep, nextStep }: ReviewInputStepP
         </tbody>
       </Table>
 
+      {isError && (
+        <Alert color="red" icon={<IconAlertTriangleFilled size="0.9rem" />} mb="lg">
+          <Text color="red">User creation has failed: {error.message}</Text>
+        </Alert>
+      )}
+
       <Group position="apart" noWrap>
         <Button leftIcon={<IconArrowLeft size="1rem" />} onClick={prevStep} variant="light" px="xl">
           {t('common:previous')}

src/components/Onboarding/step-onboarding-finished.tsx

@@ -6,6 +6,7 @@ import {
   IconManualGearbox,
 } from '@tabler/icons-react';
 import Image from 'next/image';
+import Link from 'next/link';
 
 import { OnboardingStepWrapper } from './common-wrapper';
 
@@ -22,6 +23,8 @@ export const StepOnboardingFinished = () => {
 
         <Stack>
           <NavLink
+            component={Link}
+            href="/b/default"
             rightSection={<IconChevronRight size="0.8rem" stroke={1.5} />}
             className={classes.link}
             icon={<IconDashboard />}
@@ -30,6 +33,8 @@ export const StepOnboardingFinished = () => {
             active
           />
           <NavLink
+            component={Link}
+            href="/manage"
             rightSection={<IconChevronRight size="0.8rem" stroke={1.5} />}
             className={classes.link}
             icon={<IconManualGearbox />}
@@ -38,6 +43,9 @@ export const StepOnboardingFinished = () => {
             active
           />
           <NavLink
+            component='a'
+            href="https://homarr.dev"
+            target="_blank"
             rightSection={<IconChevronRight size="0.8rem" stroke={1.5} />}
             className={classes.link}
             icon={<IconFileText />}