feature: added organisation dashboard

Author: ihornovykov

public/svgs/organisation-default.svg

@@ -30,13 +30,7 @@ const NotFound: FC = () => {
         <br />
         Ви можете написати в підтримку, якщо ви впевнені, що виникла помилка
       </Typography>
-      <Button
-        onClick={() => router.back()}
-        size={ButtonSize.LARGE}
-        variant={ButtonVariant.CONTAINED}
-        color={ButtonColor.PRIMARY}
-        icon={ButtonIcon.NONE}
-      >
+      <Button onClick={() => router.back()} size="large">
         Повернутися назад
       </Button>
     </Box>

src/app/not-found.tsx

@@ -18,4 +18,12 @@ export const search: SxProps<Theme> = {
 export const input: SxProps<Theme> = {
   maxWidth: '730px',
   flexGrow: 1,
+  mb: '26px',
+};
+
+export const organisations: SxProps<Theme> = {
+  maxWidth: '994px',
+  display: 'grid',
+  gap: '16px',
+  mb: '64px',
 };

src/app/organisations/Organisations.styles.ts

@@ -0,0 +1,7 @@
+import { SxProps, Theme } from '@mui/material/styles';
+
+export const layout: SxProps<Theme> = {
+  p: '48px 100px 36px 100px',
+  display: 'flex',
+  backgroundColor: 'gray.700',
+};

src/app/organisations/[id]/Organisation.styles.ts

@@ -0,0 +1,8 @@
+import { SxProps, Theme } from '@mui/material/styles';
+
+export const wrapper: SxProps<Theme> = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'flex-start',
+  gap: '20px',
+};

src/app/organisations/[id]/components/info-card/InfoCard.styles.ts

@@ -0,0 +1,22 @@
+import { FC } from 'react';
+import { Box, Typography } from '@mui/material';
+
+import * as styles from './InfoCard.styles';
+
+interface InfoCardProps {
+  name: string;
+  value: string;
+}
+
+const InfoCard: FC<InfoCardProps> = ({ name, value }) => {
+  return (
+    <Box sx={styles.wrapper}>
+      <Typography color="gray.100" typography="body2">
+        {name}
+      </Typography>
+      <Typography typography="body1Medium">{value}</Typography>
+    </Box>
+  );
+};
+
+export default InfoCard;

src/app/organisations/[id]/components/info-card/InfoCard.tsx

@@ -0,0 +1,13 @@
+import { SxProps, Theme } from '@mui/material/styles';
+
+export const wrapper: SxProps<Theme> = {
+  maxWidth: '387px',
+  p: '16px',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '16px',
+  backgroundColor: 'white.main',
+
+  borderRadius: '4px',
+  boxShadow: '6px 6px 4px 0px rgba(0, 0, 0, 0.25)',
+};

src/app/organisations/[id]/components/organisation-dasboard/OrganisationDashboard.styles.ts

@@ -0,0 +1,40 @@
+import { FC } from 'react';
+import { Box, Typography } from '@mui/material';
+import Image from 'next/image';
+
+import InfoCard from '@/app/organisations/[id]/components/info-card/InfoCard';
+
+import * as styles from './OrganisationDashboard.styles';
+
+interface OrganisationDashboardProps {
+  organisation: {
+    avatar: string;
+    name: string;
+    address: string;
+    owner: string;
+    description?: string;
+  };
+}
+
+const OrganisationDashboard: FC<OrganisationDashboardProps> = ({
+  organisation,
+}) => {
+  return (
+    <Box sx={styles.wrapper}>
+      <Image
+        src={organisation.avatar}
+        alt="organisation picture"
+        width={355}
+        height={200}
+      />
+      <Typography typography="h5Bold">{organisation.name}</Typography>
+      <Box>
+        <InfoCard name="Адреса" value={organisation.address} />
+        <InfoCard name="Власник" value={organisation.owner} />
+      </Box>
+      <Typography typography="body2">{organisation.description}</Typography>
+    </Box>
+  );
+};
+
+export default OrganisationDashboard;

src/app/organisations/[id]/components/organisation-dasboard/OrganisationDashboard.tsx

@@ -0,0 +1,26 @@
+import { FC, PropsWithChildren } from 'react';
+import { Box, Typography } from '@mui/material';
+
+import OrganisationDashboard from '@/app/organisations/[id]/components/organisation-dasboard/OrganisationDashboard';
+
+import * as styles from './Organisation.styles';
+
+const organisation = {
+  avatar: '/svgs/organisation-default.svg',
+  name: 'Автосервіс Гепард',
+  address: 'м. Київ, проспект Перемоги 10',
+  owner: 'Новиков Ігор Михайлович',
+  description:
+    'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur culpa cupiditate dignissimos dolorem dolores, error expedita fugit id itaque minima minus molestias nemo, nobis nostrum nulla placeat quis repudiandae! Quod.\n',
+};
+
+const OrganisationLayout: FC<PropsWithChildren> = ({ children }) => {
+  return (
+    <Box sx={styles.layout}>
+      <OrganisationDashboard organisation={organisation} />
+      {children}
+    </Box>
+  );
+};
+
+export default OrganisationLayout;

src/app/organisations/[id]/layout.tsx

@@ -0,0 +1,5 @@
+const OrganisationPage = () => {
+  return <div>Organisation Page</div>;
+};
+
+export default OrganisationPage;