AutoTechLab · igaryakqwe · Jun 22, 2024 · Jul 2, 2024 · Jul 2, 2024 · Jul 5, 2024
diff --git a/.env b/.env
diff --git a/public/images/avatar.jpg b/public/images/avatar.jpg
diff --git a/public/svgs/organisation-default.svg b/public/svgs/organisation-default.svg
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -13,7 +13,11 @@ export const metadata: Metadata = {
   description: 'Generated by create next app',
 };
 
-export default function RootLayout({ children }: { children: ReactNode }) {
+export default async function RootLayout({
+  children,
+}: {
+  children: ReactNode;
+}) {
   return (
     <html lang="uk-UA">
       <body className={montserrat.className} style={{ height: '100vh' }}>

diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
@@ -6,12 +6,6 @@ import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 
 import Button from '@/components/common/ui/button';
-import {
-  ButtonColor,
-  ButtonIcon,
-  ButtonSize,
-  ButtonVariant,
-} from '@/components/common/ui/button/types';
 
 import * as styles from '../components/pages/NotFound.styles';
 
@@ -30,13 +24,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>

diff --git a/src/app/organisations/Organisations.styles.ts b/src/app/organisations/Organisations.styles.ts
@@ -0,0 +1,7 @@
+import { SxProps, Theme } from '@mui/material/styles';
+
+export const wrapper: SxProps<Theme> = {
+  width: '100%',
+  display: 'grid',
+  placeItems: 'center',
+};
diff --git a/src/app/organisations/[id]/Organisation.styles.ts b/src/app/organisations/[id]/Organisation.styles.ts
@@ -0,0 +1,55 @@
+import { SxProps, Theme } from '@mui/material/styles';
+
+export const layout: SxProps<Theme> = {
+  p: {
+    mobile: '16px',
+    tablet: '32px',
+    desktop: '48px 100px 36px 100px',
+  },
+  display: 'flex',
+  justifyContent: 'center',
+  backgroundColor: 'gray.700',
+  flexDirection: {
+    mobile: 'column',
+    desktop: 'row',
+  },
+  gap: {
+    mobile: '10px',
+    desktop: '20px',
+  },
+};
+
+export const wrapper: SxProps<Theme> = {
+  width: '100%',
+};
+
+export const search: SxProps<Theme> = {
+  width: '100%',
+  my: '16px',
+  display: 'inline-flex',
+  gap: '16px',
+};
+
+export const input: SxProps<Theme> = {
+  width: '100%',
+  backgroundColor: 'white',
+  '.MuiInputBase-root': {
+    backgroundColor: 'white!important',
+  },
+};
+
+export const items: SxProps<Theme> = {
+  pr: '5px',
+  pb: '5px',
+  maxHeight: {
+    mobile: '100%',
+    desktop: '57vh',
+  },
+  overflowY: 'auto',
+
+  '::-webkit-scrollbar': {
+    width: '0px',
+  },
+  scrollbarWidth: 'none',
+  msOverflowStyle: 'none',
+};
diff --git a/src/app/organisations/[id]/components/info-card/InfoCard.styles.ts b/src/app/organisations/[id]/components/info-card/InfoCard.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',
+};
diff --git a/src/app/organisations/[id]/components/info-card/InfoCard.tsx b/src/app/organisations/[id]/components/info-card/InfoCard.tsx
@@ -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;
diff --git a/src/app/organisations/[id]/components/organisation-bar/OrganisationBar.styles.ts b/src/app/organisations/[id]/components/organisation-bar/OrganisationBar.styles.ts
@@ -0,0 +1,31 @@
+import { SxProps, Theme } from '@mui/material/styles';
+
+export const wrapper: SxProps<Theme> = {
+  maxWidth: {
+    mobile: '100%',
+    tablet: '603px',
+  },
+  p: '8px',
+
+  display: 'inline-flex',
+  gap: '20px',
+
+  float: 'left',
+  overflow: 'scroll',
+  scrollbarWidth: 'none',
+  '&::-webkit-scrollbar': {
+    width: '0',
+    height: '0',
+  },
+
+  backgroundColor: 'white.main',
+  boxShadow: '0px 4px 4px 0px rgba(0, 0, 0, 0.25)',
+  borderRadius: '6px',
+};
+
+export const button = (isActive: boolean): SxProps<Theme> => ({
+  ...(isActive && {
+    backgroundColor: 'rgba(255, 84, 30, 0.35)',
+    color: 'orange.100',
+  }),
+});
diff --git a/src/app/organisations/[id]/components/organisation-bar/OrganisationBar.tsx b/src/app/organisations/[id]/components/organisation-bar/OrganisationBar.tsx
@@ -0,0 +1,36 @@
+'use client';
+import { FC } from 'react';
+import { Box } from '@mui/material';
+import Link from 'next/link';
+import { usePathname, useSearchParams } from 'next/navigation';
+
+import { tabs } from '@/app/organisations/[id]/components/organisation-bar/constants';
+import Button from '@/components/common/ui/button';
+
+import * as styles from './OrganisationBar.styles';
+
+interface OrganisationBarProps {}
+
+const OrganisationBar: FC<OrganisationBarProps> = () => {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const curTab = searchParams.get('tab');
+
+  return (
+    <Box sx={styles.wrapper}>
+      {tabs.map((tab) => (
+        <Link key={tab.href} href={`${pathname}?tab=${tab.href}`} passHref>
+          <Button
+            sx={styles.button(curTab === tab.href)}
+            variant="text"
+            size="small"
+          >
+            {tab.name}
+          </Button>
+        </Link>
+      ))}
+    </Box>
+  );
+};
+
+export default OrganisationBar;
diff --git a/src/app/organisations/[id]/components/organisation-bar/constants/index.ts b/src/app/organisations/[id]/components/organisation-bar/constants/index.ts
@@ -0,0 +1,18 @@
+export const tabs = [
+  {
+    name: 'Працівники',
+    href: 'employees',
+  },
+  {
+    name: 'Послуги',
+    href: 'services',
+  },
+  {
+    name: 'Клієнти',
+    href: 'clients',
+  },
+  {
+    name: 'Автомобілі',
+    href: 'cars',
+  },
+];
diff --git a/src/app/organisations/[id]/components/organisation-bar/index.ts b/src/app/organisations/[id]/components/organisation-bar/index.ts
@@ -0,0 +1 @@
+export { default } from './OrganisationBar';
diff --git a/src/app/organisations/[id]/components/organisation-dasboard/OrganisationDashboard.styles.ts b/src/app/organisations/[id]/components/organisation-dasboard/OrganisationDashboard.styles.ts
@@ -0,0 +1,24 @@
+import { SxProps, Theme } from '@mui/material/styles';
+
+export const wrapper: SxProps<Theme> = {
+  flex: '0 0 auto',
+  maxWidth: {
+    mobile: '100%',
+    desktop: '400px',
+  },
+  height: 'fit-content',
+  p: '16px',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '16px',
+  backgroundColor: 'white.main',
+
+  borderRadius: '4px',
+  boxShadow: '6px 6px 4px 0px rgba(0, 0, 0, 0.25)',
+
+  img: {
+    borderRadius: '4px',
+    width: '100%',
+    height: 'auto',
+  },
+};
diff --git a/src/app/organisations/[id]/components/organisation-dasboard/OrganisationDashboard.tsx b/src/app/organisations/[id]/components/organisation-dasboard/OrganisationDashboard.tsx
@@ -0,0 +1,45 @@
+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 Button from '@/components/common/ui/button';
+
+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 display="flex" flexDirection="row" gap="16px">
+        <Button size="small">Редагувати</Button>
+        <Button size="small">Видалити</Button>
+      </Box>
+    </Box>
+  );
+};
+
+export default OrganisationDashboard;
diff --git a/src/app/organisations/[id]/layout.tsx b/src/app/organisations/[id]/layout.tsx
@@ -0,0 +1,26 @@
+import { FC, PropsWithChildren } from 'react';
+import { Box } 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;
diff --git a/src/app/organisations/[id]/page.tsx b/src/app/organisations/[id]/page.tsx
@@ -0,0 +1,31 @@
+import { Box, Stack } from '@mui/material';
+
+import OrganisationBar from '@/app/organisations/[id]/components/organisation-bar';
+import { mocks } from '@/app/profile/components/tabs/constants';
+import Card from '@/components/common/ui/card';
+import Position from '@/components/common/ui/card/components/Position';
+import IconButton from '@/components/common/ui/icon-button/IconButton';
+import Input from '@/components/common/ui/input/Input';
+
+import * as styles from './Organisation.styles';
+
+const OrganisationPage = () => {
+  return (
+    <Box sx={styles.wrapper}>
+      <OrganisationBar />
+      <Box sx={styles.search}>
+        <Input isSearch placeholder="Пошук" sx={styles.input} />
+        <IconButton />
+      </Box>
+      <Stack sx={styles.items} flexDirection="column" gap="10px">
+        {mocks.map((mock) => (
+          <Card key={mock.avatar} avatar={mock.avatar} name={mock.name}>
+            <Position position={mock.position} />
+          </Card>
+        ))}
+      </Stack>
+    </Box>
+  );
+};
+
+export default OrganisationPage;