From 0d2c60429975bf4e242de12780a1602f2b55e0af Mon Sep 17 00:00:00 2001
From: Igor <114025058+igaryakqwe@users.noreply.github.com>
Date: Sat, 22 Jun 2024 22:56:29 +0300
Subject: [PATCH 01/14] feature: add icon button component

---
 src/app/test/icon-button/page.tsx             | 18 ++++
 .../ui/icon-button/IconButton.styles.ts       | 93 +++++++++++++++++++
 .../common/ui/icon-button/IconButton.tsx      | 42 +++++++++
 .../common/ui/icon-button/types/index.ts      | 31 +++++++
 4 files changed, 184 insertions(+)
 create mode 100644 src/app/test/icon-button/page.tsx
 create mode 100644 src/components/common/ui/icon-button/IconButton.styles.ts
 create mode 100644 src/components/common/ui/icon-button/IconButton.tsx
 create mode 100644 src/components/common/ui/icon-button/types/index.ts

diff --git a/src/app/test/icon-button/page.tsx b/src/app/test/icon-button/page.tsx
new file mode 100644
index 0000000..198f014
--- /dev/null
+++ b/src/app/test/icon-button/page.tsx
@@ -0,0 +1,18 @@
+import { Box } from '@mui/material';
+
+import IconButton from '@/components/common/ui/icon-button/IconButton';
+
+const Page = () => {
+  return (
+    <Box sx={{ display: 'flex', gap: '10px' }}>
+      <IconButton size={'small'} />
+      <IconButton />
+      <IconButton disabled />
+      <IconButton variant="outlined" size={'small'} />
+      <IconButton variant="outlined" />
+      <IconButton variant="outlined" disabled />
+    </Box>
+  );
+};
+
+export default Page;
diff --git a/src/components/common/ui/icon-button/IconButton.styles.ts b/src/components/common/ui/icon-button/IconButton.styles.ts
new file mode 100644
index 0000000..00cbf3f
--- /dev/null
+++ b/src/components/common/ui/icon-button/IconButton.styles.ts
@@ -0,0 +1,93 @@
+import { SxProps, Theme } from '@mui/material/styles';
+
+import {
+  ButtonColors,
+  IconButtonSize,
+  IconButtonVariant,
+} from '@/components/common/ui/icon-button/types';
+
+const buttonColour: ButtonColors = {
+  contained: {
+    default: {
+      color: 'orange.300',
+      border: 'orange.300',
+    },
+    hover: {
+      color: 'orange.200',
+      border: 'orange.200',
+    },
+    active: {
+      color: 'orange.400',
+      border: 'orange.400',
+    },
+    focused: {
+      color: 'orange.300',
+      border: 'orange.100',
+    },
+    disabled: {
+      color: 'gray.200',
+      border: 'gray.200',
+    },
+  },
+  outlined: {
+    default: {
+      color: 'transparent',
+      border: 'orange.300',
+    },
+    hover: {
+      color: 'rgba(255, 84, 30, 0.15)',
+      border: 'orange.300',
+    },
+    active: {
+      color: 'rgba(255, 84, 30, 0.50)',
+      border: 'orange.300',
+    },
+    focused: {
+      color: 'rgba(255, 84, 30, 0.30)',
+      border: 'orange.300',
+    },
+    disabled: {
+      color: 'transparent',
+      border: 'gray.200',
+    },
+  },
+};
+
+export const button = (
+  size: IconButtonSize,
+  variant: IconButtonVariant,
+): SxProps<Theme> => ({
+  borderRadius: '6px',
+  border: '2px solid',
+  p: 0,
+  width: size === 'small' ? '36px' : '48px',
+  height: size === 'small' ? '36px' : '48px',
+
+  backgroundColor: buttonColour[variant].default.color,
+  borderColor: buttonColour[variant].default.border,
+  '&:hover': {
+    backgroundColor: buttonColour[variant].hover.color,
+    borderColor: buttonColour[variant].hover.border,
+  },
+  '&:active': {
+    backgroundColor: buttonColour[variant].active.color,
+    borderColor: buttonColour[variant].active.border,
+  },
+  '&:focus': {
+    backgroundColor: buttonColour[variant].focused.color,
+    borderColor: buttonColour[variant].focused.border,
+  },
+  '&:disabled': {
+    backgroundColor: buttonColour[variant].disabled.color,
+    borderColor: buttonColour[variant].disabled.border,
+    svg: {
+      stroke: variant === 'contained' ? 'white' : '#949394',
+    },
+  },
+
+  svg: {
+    width: '24px',
+    height: '24px',
+    stroke: variant === 'contained' ? 'white' : 'black',
+  },
+});
diff --git a/src/components/common/ui/icon-button/IconButton.tsx b/src/components/common/ui/icon-button/IconButton.tsx
new file mode 100644
index 0000000..5f06c34
--- /dev/null
+++ b/src/components/common/ui/icon-button/IconButton.tsx
@@ -0,0 +1,42 @@
+import { FC, ReactNode } from 'react';
+import { PlusIcon } from '@heroicons/react/24/outline';
+import {
+  IconButton as IconButtonMUI,
+  IconButtonOwnProps as IconButtonPropsMUI,
+} from '@mui/material';
+import { SxProps, Theme } from '@mui/material/styles';
+
+import {
+  IconButtonSize,
+  IconButtonVariant,
+} from '@/components/common/ui/icon-button/types';
+import mergeSx from '@/lib/utils/mergeSx';
+
+import * as styles from './IconButton.styles';
+
+interface IconButtonProps extends IconButtonPropsMUI {
+  children?: ReactNode;
+  size?: IconButtonSize;
+  variant?: IconButtonVariant;
+  sx?: SxProps<Theme>;
+}
+
+const IconButton: FC<IconButtonProps> = ({
+  children = <PlusIcon />,
+  size = 'medium',
+  variant = 'contained',
+  sx = {},
+  ...props
+}) => {
+  return (
+    <IconButtonMUI
+      disableRipple
+      sx={mergeSx(styles.button(size, variant), sx)}
+      {...props}
+    >
+      {children}
+    </IconButtonMUI>
+  );
+};
+
+export default IconButton;
diff --git a/src/components/common/ui/icon-button/types/index.ts b/src/components/common/ui/icon-button/types/index.ts
new file mode 100644
index 0000000..4eea48d
--- /dev/null
+++ b/src/components/common/ui/icon-button/types/index.ts
@@ -0,0 +1,31 @@
+export type IconButtonSize = 'small' | 'medium';
+
+export type IconButtonVariant = 'contained' | 'outlined';
+
+export interface ButtonColors {
+  contained: Colors;
+  outlined: Colors;
+}
+
+interface Colors {
+  default: {
+    color: string;
+    border: string;
+  };
+  hover: {
+    color: string;
+    border: string;
+  };
+  active: {
+    color: string;
+    border: string;
+  };
+  focused: {
+    color: string;
+    border: string;
+  };
+  disabled: {
+    color: string;
+    border: string;
+  };
+}

From 2994c7408107a7a3d86bfdb94ca085d829f110fa Mon Sep 17 00:00:00 2001
From: Igor <114025058+igaryakqwe@users.noreply.github.com>
Date: Tue, 2 Jul 2024 15:06:44 +0300
Subject: [PATCH 02/14] enhancement: added startAdornment for input

---
 .../page-layout/footer/constants/index.ts     |  4 ++--
 .../common/ui/input/Input.styles.ts           |  2 +-
 src/components/common/ui/input/Input.tsx      | 21 +++++++++++++++----
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/components/common/layout/page-layout/footer/constants/index.ts b/src/components/common/layout/page-layout/footer/constants/index.ts
index 0d91d13..97444e6 100644
--- a/src/components/common/layout/page-layout/footer/constants/index.ts
+++ b/src/components/common/layout/page-layout/footer/constants/index.ts
@@ -8,8 +8,8 @@ export const links: Links = {
       href: '/',
     },
     {
-      title: 'Організація',
-      href: '/organization',
+      title: 'Організації',
+      href: '/organizations',
     },
     {
       title: 'Ціни',
diff --git a/src/components/common/ui/input/Input.styles.ts b/src/components/common/ui/input/Input.styles.ts
index eebae1a..7091e4e 100644
--- a/src/components/common/ui/input/Input.styles.ts
+++ b/src/components/common/ui/input/Input.styles.ts
@@ -4,7 +4,7 @@ import { InputVariant } from '@/components/common/ui/input/types';
 
 export const formControl = (variant: InputVariant): SxProps<Theme> => ({
   '.MuiInputBase-root': {
-    m: '10px 0 0 0',
+    m: 0,
     border: '2px solid',
     borderColor: 'gray.400',
 
diff --git a/src/components/common/ui/input/Input.tsx b/src/components/common/ui/input/Input.tsx
index f87496d..7906dd3 100644
--- a/src/components/common/ui/input/Input.tsx
+++ b/src/components/common/ui/input/Input.tsx
@@ -1,7 +1,11 @@
 'use client';
 
 import React, { FC, useState } from 'react';
-import { EyeIcon, EyeSlashIcon } from '@heroicons/react/24/outline';
+import {
+  EyeIcon,
+  EyeSlashIcon,
+  MagnifyingGlassIcon,
+} from '@heroicons/react/24/outline';
 import {
   FormControl,
   IconButton,
@@ -28,6 +32,7 @@ interface InputProps extends InputPropsMUI {
   password?: boolean;
   sx?: SxProps<Theme>;
   fullWidth?: boolean;
+  isSearch?: boolean;
 }
 
 const Input: FC<InputProps> = ({
@@ -39,6 +44,7 @@ const Input: FC<InputProps> = ({
   password = false,
   sx = {},
   fullWidth = false,
+  isSearch = false,
   ...props
 }) => {
   const [showPassword, setShowPassword] = useState(!password);
@@ -47,16 +53,22 @@ const Input: FC<InputProps> = ({
     setShowPassword((prevShowPassword) => !prevShowPassword);
   };
 
-  const eyeColor =
+  const iconColor =
     variant === 'white' ? theme.palette.gray[300] : theme.palette.gray[400];
 
+  const startAdornment = isSearch ? (
+    <InputAdornment position="start">
+      <MagnifyingGlassIcon width={24} height={24} color={iconColor} />
+    </InputAdornment>
+  ) : null;
+
   const endAdornment = password ? (
     <InputAdornment position="end">
       <IconButton edge="end" onClick={handleTogglePasswordVisibility}>
         {showPassword ? (
-          <EyeIcon width={24} height={24} color={eyeColor} />
+          <EyeIcon width={24} height={24} color={iconColor} />
         ) : (
-          <EyeSlashIcon width={24} height={24} color={eyeColor} />
+          <EyeSlashIcon width={24} height={24} color={iconColor} />
         )}
       </IconButton>
     </InputAdornment>
@@ -77,6 +89,7 @@ const Input: FC<InputProps> = ({
         </InputLabel>
       )}
       <InputMUI
+        startAdornment={startAdornment}
         endAdornment={endAdornment}
         sx={styles.input(variant)}
         disableUnderline

From 973bf74e78ae1ac71523cd35b8358aad99b3423e Mon Sep 17 00:00:00 2001
From: Igor <114025058+igaryakqwe@users.noreply.github.com>
Date: Tue, 2 Jul 2024 15:07:02 +0300
Subject: [PATCH 03/14] feature: add organisation page

---
 src/app/organisations/Organisations.styles.ts | 21 +++++++++++++++++
 src/app/organisations/page.tsx                | 23 +++++++++++++++++++
 .../header/menu/constants/menuItems.ts        |  4 ++--
 3 files changed, 46 insertions(+), 2 deletions(-)
 create mode 100644 src/app/organisations/Organisations.styles.ts
 create mode 100644 src/app/organisations/page.tsx

diff --git a/src/app/organisations/Organisations.styles.ts b/src/app/organisations/Organisations.styles.ts
new file mode 100644
index 0000000..db89cf8
--- /dev/null
+++ b/src/app/organisations/Organisations.styles.ts
@@ -0,0 +1,21 @@
+import { SxProps, Theme } from '@mui/material/styles';
+
+export const wrapper: SxProps<Theme> = {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  width: '100%',
+};
+
+export const search: SxProps<Theme> = {
+  maxWidth: '794px',
+  width: '100%',
+  mt: '26px',
+  display: 'inline-flex',
+  gap: '16px',
+};
+
+export const input: SxProps<Theme> = {
+  maxWidth: '730px',
+  flexGrow: 1,
+};
diff --git a/src/app/organisations/page.tsx b/src/app/organisations/page.tsx
new file mode 100644
index 0000000..3221ceb
--- /dev/null
+++ b/src/app/organisations/page.tsx
@@ -0,0 +1,23 @@
+import { Box, Typography } from '@mui/material';
+
+import IconButton from '@/components/common/ui/icon-button/IconButton';
+import Input from '@/components/common/ui/input/Input';
+
+import * as styles from './Organisations.styles';
+
+const Organisations = () => {
+  return (
+    <Box sx={styles.wrapper}>
+      <Typography mt="48px" typography="h5Medium">
+        Мої організації
+      </Typography>
+
+      <Box sx={styles.search}>
+        <Input sx={styles.input} isSearch fullWidth placeholder="Пошук" />
+        <IconButton />
+      </Box>
+    </Box>
+  );
+};
+
+export default Organisations;
diff --git a/src/components/common/layout/page-layout/header/menu/constants/menuItems.ts b/src/components/common/layout/page-layout/header/menu/constants/menuItems.ts
index 8a613f1..959786f 100644
--- a/src/components/common/layout/page-layout/header/menu/constants/menuItems.ts
+++ b/src/components/common/layout/page-layout/header/menu/constants/menuItems.ts
@@ -4,8 +4,8 @@ export const menuItems = [
     url: '/',
   },
   {
-    title: 'Організація',
-    url: '/organisation',
+    title: 'Організації',
+    url: '/organisations',
   },
   {
     title: 'Ціни',

From 08db19977ef3159210edb683cd5c42adaf37cf88 Mon Sep 17 00:00:00 2001
From: Igor <114025058+igaryakqwe@users.noreply.github.com>
Date: Fri, 5 Jul 2024 10:26:04 +0300
Subject: [PATCH 04/14] feature: added organisation dashboard

---
 public/svgs/organisation-default.svg          | 30 ++++++++++++++
 src/app/not-found.tsx                         |  8 +---
 src/app/organisations/Organisations.styles.ts |  8 ++++
 .../organisations/[id]/Organisation.styles.ts |  7 ++++
 .../components/info-card/InfoCard.styles.ts   |  8 ++++
 .../[id]/components/info-card/InfoCard.tsx    | 22 ++++++++++
 .../OrganisationDashboard.styles.ts           | 13 ++++++
 .../OrganisationDashboard.tsx                 | 40 +++++++++++++++++++
 src/app/organisations/[id]/layout.tsx         | 26 ++++++++++++
 src/app/organisations/[id]/page.tsx           |  5 +++
 src/app/organisations/page.tsx                | 34 ++++++++++++++++
 11 files changed, 194 insertions(+), 7 deletions(-)
 create mode 100644 public/svgs/organisation-default.svg
 create mode 100644 src/app/organisations/[id]/Organisation.styles.ts
 create mode 100644 src/app/organisations/[id]/components/info-card/InfoCard.styles.ts
 create mode 100644 src/app/organisations/[id]/components/info-card/InfoCard.tsx
 create mode 100644 src/app/organisations/[id]/components/organisation-dasboard/OrganisationDashboard.styles.ts
 create mode 100644 src/app/organisations/[id]/components/organisation-dasboard/OrganisationDashboard.tsx
 create mode 100644 src/app/organisations/[id]/layout.tsx
 create mode 100644 src/app/organisations/[id]/page.tsx

diff --git a/public/svgs/organisation-default.svg b/public/svgs/organisation-default.svg
new file mode 100644
index 0000000..60939e3
--- /dev/null
+++ b/public/svgs/organisation-default.svg
@@ -0,0 +1,30 @@
+<svg width="355" height="200" viewBox="0 0 355 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_1150_2650)">
+        <rect width="355" height="200" rx="4" fill="#EBEBEB"/>
+        <path d="M228.947 103.489C229.953 100.258 232.021 97.4624 234.816 95.5558L297.208 52.9975C302.474 49.4054 309.435 49.534 314.565 53.3183L327.173 62.6195C332.667 66.6721 334.731 73.9229 332.196 80.2612L286.272 195.071C283.994 200.766 278.478 204.5 272.345 204.5H217.88C207.767 204.5 200.552 194.697 203.558 185.041L228.947 103.489Z" fill="#F7B49F" fill-opacity="0.9"/>
+        <path d="M65 95C65 73.4609 82.4609 56 104 56C125.539 56 143 73.4609 143 95V199.982C143 207.724 136.724 214 128.982 214H79.0179C71.276 214 65 207.724 65 199.982V95Z" fill="#C32E00" fill-opacity="0.9"/>
+        <path d="M116.494 209.334C109.961 208.879 106.371 201.52 110.035 196.091L185.962 83.5937C189.624 78.1674 197.787 78.7394 200.657 84.6234L260.124 206.55C262.994 212.434 258.419 219.218 251.888 218.763L116.494 209.334Z" fill="#FF541E" fill-opacity="0.8"/>
+        <ellipse cx="35" cy="158.5" rx="60" ry="61.5" fill="#F88E6D" fill-opacity="0.8"/>
+        <path d="M92 100V100C97.8002 107.566 109.2 107.566 115 100V100" stroke="black" stroke-width="3" stroke-linecap="round"/>
+        <path d="M183 141.261V141.261C187.595 144.116 193.436 144.014 197.928 141V141" stroke="black" stroke-width="3" stroke-linecap="round"/>
+        <path d="M295.248 82V82C298.877 86.0108 304.52 87.5228 309.669 85.8642V85.8642" stroke="black" stroke-width="3" stroke-linecap="round"/>
+        <path d="M41.4832 132V132C44.0917 137.018 49.2975 140.146 54.953 140.093V140.093" stroke="black" stroke-width="3" stroke-linecap="round"/>
+        <circle cx="91" cy="89" r="3" fill="black"/>
+        <circle cx="175.052" cy="132.052" r="3" transform="rotate(-1 175.052 132.052)" fill="black"/>
+        <circle cx="44.0519" cy="122.052" r="3" transform="rotate(-1 44.0519 122.052)" fill="black"/>
+        <circle cx="117" cy="89" r="3" fill="black"/>
+        <circle cx="205.052" cy="132.052" r="3" transform="rotate(-1 205.052 132.052)" fill="black"/>
+        <circle cx="63.0519" cy="132.052" r="3" transform="rotate(-1 63.0519 132.052)" fill="black"/>
+        <path d="M260.881 106.977C260.389 99.1561 270.269 95.3635 275.135 101.505L305.724 140.103C307.895 142.844 311.596 143.856 314.86 142.603L359.906 125.312C367.075 122.56 373.626 130.508 369.557 137.02L343.326 178.994C341.533 181.863 341.739 185.551 343.841 188.202L374.961 227.472C379.791 233.568 373.962 242.275 366.486 240.131L320.239 226.872C316.808 225.888 313.141 227.296 311.25 230.322L285.754 271.121C281.632 277.717 271.474 275.147 270.985 267.384L267.836 217.378C267.623 214.001 265.309 211.123 262.056 210.191L214.477 196.55C207.095 194.434 206.646 184.143 213.815 181.391L258.86 164.1C262.125 162.847 264.197 159.618 263.977 156.128L260.881 106.977Z" fill="#E33C08" fill-opacity="0.8"/>
+        <circle cx="284.052" cy="175.052" r="3" transform="rotate(-1 284.052 175.052)" fill="black"/>
+        <circle cx="294.052" cy="71.0519" r="3" transform="rotate(-1 294.052 71.0519)" fill="black"/>
+        <circle cx="307.052" cy="166.052" r="3" transform="rotate(-1 307.052 166.052)" fill="black"/>
+        <circle cx="316.052" cy="78.0519" r="3" transform="rotate(-1 316.052 78.0519)" fill="black"/>
+        <path d="M291 180.925V180.925C297.414 183.373 304.66 180.878 308.207 175V175" stroke="black" stroke-width="3" stroke-linecap="round"/>
+    </g>
+    <defs>
+        <clipPath id="clip0_1150_2650">
+            <rect width="355" height="200" rx="4" fill="white"/>
+        </clipPath>
+    </defs>
+</svg>
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index f95d955..e0631a3 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -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>
diff --git a/src/app/organisations/Organisations.styles.ts b/src/app/organisations/Organisations.styles.ts
index db89cf8..028704b 100644
--- a/src/app/organisations/Organisations.styles.ts
+++ b/src/app/organisations/Organisations.styles.ts
@@ -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',
 };
diff --git a/src/app/organisations/[id]/Organisation.styles.ts b/src/app/organisations/[id]/Organisation.styles.ts
new file mode 100644
index 0000000..1679376
--- /dev/null
+++ b/src/app/organisations/[id]/Organisation.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',
+};
diff --git a/src/app/organisations/[id]/components/info-card/InfoCard.styles.ts b/src/app/organisations/[id]/components/info-card/InfoCard.styles.ts
new file mode 100644
index 0000000..62fd32e
--- /dev/null
+++ 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
new file mode 100644
index 0000000..298a6f7
--- /dev/null
+++ 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-dasboard/OrganisationDashboard.styles.ts b/src/app/organisations/[id]/components/organisation-dasboard/OrganisationDashboard.styles.ts
new file mode 100644
index 0000000..55f8991
--- /dev/null
+++ b/src/app/organisations/[id]/components/organisation-dasboard/OrganisationDashboard.styles.ts
@@ -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)',
+};
diff --git a/src/app/organisations/[id]/components/organisation-dasboard/OrganisationDashboard.tsx b/src/app/organisations/[id]/components/organisation-dasboard/OrganisationDashboard.tsx
new file mode 100644
index 0000000..0b1dd6f
--- /dev/null
+++ b/src/app/organisations/[id]/components/organisation-dasboard/OrganisationDashboard.tsx
@@ -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;
diff --git a/src/app/organisations/[id]/layout.tsx b/src/app/organisations/[id]/layout.tsx
new file mode 100644
index 0000000..0874ad2
--- /dev/null
+++ b/src/app/organisations/[id]/layout.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;
diff --git a/src/app/organisations/[id]/page.tsx b/src/app/organisations/[id]/page.tsx
new file mode 100644
index 0000000..3d58e59
--- /dev/null
+++ b/src/app/organisations/[id]/page.tsx
@@ -0,0 +1,5 @@
+const OrganisationPage = () => {
+  return <div>Organisation Page</div>;
+};
+
+export default OrganisationPage;
diff --git a/src/app/organisations/page.tsx b/src/app/organisations/page.tsx
index 3221ceb..fcabbc1 100644
--- a/src/app/organisations/page.tsx
+++ b/src/app/organisations/page.tsx
@@ -2,9 +2,32 @@ import { Box, Typography } from '@mui/material';
 
 import IconButton from '@/components/common/ui/icon-button/IconButton';
 import Input from '@/components/common/ui/input/Input';
+import OrganisationCard from '@/components/common/ui/organisation-card';
 
 import * as styles from './Organisations.styles';
 
+const mocks = [
+  {
+    avatar:
+      'https://autolab-fs.s3.eu-north-1.amazonaws.com/default/avatar-org.svg',
+    name: 'Автосервіс Гепард',
+    position: 'Власник',
+    description:
+      'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus accusantium aperiam delectus dolor dolores enim error est et excepturi ipsum iusto magni non pariatur, quibusdam reiciendis sapiente, sed sint tenetur!\n ',
+  },
+  {
+    avatar:
+      'https://autolab-fs.s3.eu-north-1.amazonaws.com/default/avatar-org.svg',
+    name: 'Автосервіс Чірік',
+    position: 'Співвласник',
+  },
+  {
+    avatar: '/images/avatar.jpg',
+    name: 'Автосервіс Лісовик',
+    position: 'Співробітник',
+  },
+];
+
 const Organisations = () => {
   return (
     <Box sx={styles.wrapper}>
@@ -16,6 +39,17 @@ const Organisations = () => {
         <Input sx={styles.input} isSearch fullWidth placeholder="Пошук" />
         <IconButton />
       </Box>
+      <Box sx={styles.organisations}>
+        {mocks.map((mock, index) => (
+          <OrganisationCard
+            key={index}
+            name={mock.name}
+            avatar={mock.avatar}
+            position={mock.position}
+            description={mock.description}
+          />
+        ))}
+      </Box>
     </Box>
   );
 };

From 828fb71477b5da8c693a1adc4cfe488d6f48fa4f Mon Sep 17 00:00:00 2001
From: Igor <114025058+igaryakqwe@users.noreply.github.com>
Date: Sun, 7 Jul 2024 19:17:31 +0300
Subject: [PATCH 05/14] enhancement: improved responsive

---
 src/app/not-found.tsx                               |  6 ------
 .../layout/page-layout/footer/Footer.styles.ts      | 13 ++++++++-----
 .../layout/page-layout/header/Header.styles.ts      |  6 +++++-
 src/components/pages/NotFound.styles.ts             | 10 ++++------
 4 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index e0631a3..c0feb5a 100644
--- 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';
 
diff --git a/src/components/common/layout/page-layout/footer/Footer.styles.ts b/src/components/common/layout/page-layout/footer/Footer.styles.ts
index 5a9537b..7383352 100644
--- a/src/components/common/layout/page-layout/footer/Footer.styles.ts
+++ b/src/components/common/layout/page-layout/footer/Footer.styles.ts
@@ -10,14 +10,11 @@ export const wrapper: SxProps<Theme> = {
     desktop: 'flex-start',
     mobile: 'center',
   },
-  justifyContent: {
-    desktop: 'space-between',
-    mobile: 'center',
-  },
   zIndex: 11,
 
   padding: {
-    mobileMedium: '38px 100px',
+    desktop: '38px 100px',
+    mobileMedium: '38px 50px',
     mobile: '16px',
   },
   height: 'auto',
@@ -41,7 +38,13 @@ export const text: SxProps<Theme> = {
 };
 
 export const columns: SxProps<Theme> = {
+  width: '100%',
   display: 'flex',
+  justifyContent: {
+    desktop: 'flex-end',
+    mobileMedium: 'center',
+    mobile: 'space-between',
+  },
   gap: {
     desktop: '80px',
     mobileMedium: '40px',
diff --git a/src/components/common/layout/page-layout/header/Header.styles.ts b/src/components/common/layout/page-layout/header/Header.styles.ts
index 50475a2..4b51b9d 100644
--- a/src/components/common/layout/page-layout/header/Header.styles.ts
+++ b/src/components/common/layout/page-layout/header/Header.styles.ts
@@ -1,7 +1,11 @@
 import { SxProps, Theme } from '@mui/material/styles';
 
 export const wrapper: SxProps<Theme> = {
-  p: '0px 100px',
+  py: 0,
+  px: {
+    mobile: '16px',
+    tablet: '100px',
+  },
   width: '100%',
   height: '64px',
   boxShadow: 'rgba(0, 0, 0, 0.24) 0px 3px 8px',
diff --git a/src/components/pages/NotFound.styles.ts b/src/components/pages/NotFound.styles.ts
index f0d1971..1587a3f 100644
--- a/src/components/pages/NotFound.styles.ts
+++ b/src/components/pages/NotFound.styles.ts
@@ -1,16 +1,14 @@
 import { SxProps, Theme } from '@mui/material/styles';
 
 export const wrapper: SxProps<Theme> = {
-  height: {
-    desktop: '100%',
-    mobile: '100vh',
-  },
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
   justifyContent: 'center',
-  m: '14px 24px 106px 24px',
-
+  m: {
+    mobile: '106px 24px',
+    tablet: '14px 24px 106px 24px',
+  },
   img: {
     maxWidth: '100%',
     height: 'auto',

From 1c63931dd07a56046f3bb98238ffdd5ed16aa421 Mon Sep 17 00:00:00 2001
From: Igor <114025058+igaryakqwe@users.noreply.github.com>
Date: Sun, 7 Jul 2024 23:20:33 +0300
Subject: [PATCH 06/14] feature: added new button variant

---
 .../common/ui/button/Button.styles.ts         | 74 +++++++++++--------
 src/components/common/ui/button/Button.tsx    |  6 +-
 2 files changed, 49 insertions(+), 31 deletions(-)

diff --git a/src/components/common/ui/button/Button.styles.ts b/src/components/common/ui/button/Button.styles.ts
index a9160fa..fd20dd6 100644
--- a/src/components/common/ui/button/Button.styles.ts
+++ b/src/components/common/ui/button/Button.styles.ts
@@ -73,6 +73,27 @@ const outlinedWhiteColors: SxProps<Theme> = {
   },
 };
 
+const textColors: SxProps<Theme> = {
+  backgroundColor: 'transparent',
+  borderColor: 'transparent',
+  color: 'black.main',
+  '&:hover': {
+    backgroundColor: 'rgba(255, 84, 30, 0.15);',
+    borderColor: 'transparent',
+  },
+  '&:active': {
+    backgroundColor: 'rgba(255, 84, 30, 0.35)',
+    color: 'orange.100',
+  },
+  '&:focus': {
+    backgroundColor: 'rgba(255, 84, 30, 0.15)',
+    borderColor: 'orange.300',
+  },
+  '&.Mui-disabled': {
+    color: 'gray.500',
+  },
+};
+
 export const button = (
   variant: ButtonVariant,
   size: ButtonSize,
@@ -85,23 +106,25 @@ export const button = (
   borderRadius: '6px',
   textTransform: 'none',
   display: 'flex',
+
+  ...(size === 'small' && {
+    typography: 'body1Bold',
+    p: '10px 20px',
+    gap: '8px',
+  }),
+  ...(size === 'medium' && {
+    p: '12px 28px',
+    typography: 'h6Bold',
+    gap: '12px',
+  }),
+  ...(size === 'large' && {
+    p: '16px 32px',
+    gap: '12px',
+    typography: 'h6Bold',
+  }),
+
   ...(variant === 'contained' && {
     ...containedColors,
-    ...(size === 'small' && {
-      typography: 'body1Bold',
-      p: '10px 20px',
-      gap: '8px',
-    }),
-    ...(size === 'medium' && {
-      p: '12px 28px',
-      typography: 'h6Bold',
-      gap: '12px',
-    }),
-    ...(size === 'large' && {
-      p: '16px 32px',
-      gap: '12px',
-      typography: 'h6Bold',
-    }),
   }),
   ...(variant === 'outlined' && {
     ...(color === 'primary' && {
@@ -110,20 +133,11 @@ export const button = (
     ...(color === 'secondary' && {
       ...outlinedWhiteColors,
     }),
-    ...(size === 'small' && {
-      typography: 'body1Bold',
-      p: '10px 20px',
-      gap: '8px',
-    }),
-    ...(size === 'medium' && {
-      p: '12px 28px',
-      typography: 'h6Bold',
-      gap: '12px',
-    }),
-    ...(size === 'large' && {
-      p: '16px 32px',
-      gap: '12px',
-      typography: 'h6Bold',
-    }),
+  }),
+  ...(variant === 'text' && {
+    p: '10px 24px',
+    border: '1px solid',
+    typography: 'body1Medium',
+    ...textColors,
   }),
 });
diff --git a/src/components/common/ui/button/Button.tsx b/src/components/common/ui/button/Button.tsx
index 7b90ff1..d6ed4b9 100644
--- a/src/components/common/ui/button/Button.tsx
+++ b/src/components/common/ui/button/Button.tsx
@@ -27,7 +27,11 @@ const Button: FC<ButtonProps> = ({
   ...rest
 }) => {
   return (
-    <ButtonMUI sx={mergeSx(styles.button(variant, size, color), sx)} {...rest}>
+    <ButtonMUI
+      sx={mergeSx(styles.button(variant, size, color), sx)}
+      disableRipple
+      {...rest}
+    >
       {icon === 'left' && iconComponent}
       {children}
       {icon === 'right' && iconComponent}

From 3124b8871a29d70c0fc66bf6b6abc19de4aa30ef Mon Sep 17 00:00:00 2001
From: Igor <114025058+igaryakqwe@users.noreply.github.com>
Date: Mon, 8 Jul 2024 10:24:34 +0300
Subject: [PATCH 07/14] feature: added basic organisation page

---
 .../organisations/[id]/Organisation.styles.ts | 15 ++++++++
 .../OrganisationBar.styles.ts                 | 20 +++++++++++
 .../organisation-bar/OrganisationBar.tsx      | 36 +++++++++++++++++++
 .../organisation-bar/constants/index.ts       | 18 ++++++++++
 .../[id]/components/organisation-bar/index.ts |  1 +
 .../OrganisationDashboard.styles.ts           |  5 +++
 src/app/organisations/[id]/layout.tsx         |  3 +-
 src/app/organisations/[id]/page.tsx           | 30 +++++++++++++++-
 src/app/test/button/page.tsx                  |  6 ++++
 .../common/ui/button/types/index.ts           |  2 +-
 10 files changed, 133 insertions(+), 3 deletions(-)
 create mode 100644 src/app/organisations/[id]/components/organisation-bar/OrganisationBar.styles.ts
 create mode 100644 src/app/organisations/[id]/components/organisation-bar/OrganisationBar.tsx
 create mode 100644 src/app/organisations/[id]/components/organisation-bar/constants/index.ts
 create mode 100644 src/app/organisations/[id]/components/organisation-bar/index.ts

diff --git a/src/app/organisations/[id]/Organisation.styles.ts b/src/app/organisations/[id]/Organisation.styles.ts
index 1679376..5d1bed9 100644
--- a/src/app/organisations/[id]/Organisation.styles.ts
+++ b/src/app/organisations/[id]/Organisation.styles.ts
@@ -5,3 +5,18 @@ export const layout: SxProps<Theme> = {
   display: 'flex',
   backgroundColor: 'gray.700',
 };
+
+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%',
+};
diff --git a/src/app/organisations/[id]/components/organisation-bar/OrganisationBar.styles.ts b/src/app/organisations/[id]/components/organisation-bar/OrganisationBar.styles.ts
new file mode 100644
index 0000000..74bc211
--- /dev/null
+++ b/src/app/organisations/[id]/components/organisation-bar/OrganisationBar.styles.ts
@@ -0,0 +1,20 @@
+import { SxProps, Theme } from '@mui/material/styles';
+
+export const wrapper: SxProps<Theme> = {
+  p: '8px',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '20px',
+  float: 'left',
+
+  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
new file mode 100644
index 0000000..a3ef197
--- /dev/null
+++ 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
new file mode 100644
index 0000000..9008e46
--- /dev/null
+++ 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
new file mode 100644
index 0000000..a4f54f9
--- /dev/null
+++ 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
index 55f8991..e3ee127 100644
--- a/src/app/organisations/[id]/components/organisation-dasboard/OrganisationDashboard.styles.ts
+++ b/src/app/organisations/[id]/components/organisation-dasboard/OrganisationDashboard.styles.ts
@@ -3,6 +3,7 @@ import { SxProps, Theme } from '@mui/material/styles';
 export const wrapper: SxProps<Theme> = {
   maxWidth: '387px',
   p: '16px',
+  mr: '20px',
   display: 'flex',
   flexDirection: 'column',
   gap: '16px',
@@ -10,4 +11,8 @@ export const wrapper: SxProps<Theme> = {
 
   borderRadius: '4px',
   boxShadow: '6px 6px 4px 0px rgba(0, 0, 0, 0.25)',
+
+  img: {
+    borderRadius: '4px',
+  },
 };
diff --git a/src/app/organisations/[id]/layout.tsx b/src/app/organisations/[id]/layout.tsx
index 0874ad2..cf80fa0 100644
--- a/src/app/organisations/[id]/layout.tsx
+++ b/src/app/organisations/[id]/layout.tsx
@@ -1,6 +1,7 @@
 import { FC, PropsWithChildren } from 'react';
-import { Box, Typography } from '@mui/material';
+import { Box } from '@mui/material';
 
+import OrganisationBar from '@/app/organisations/[id]/components/organisation-bar';
 import OrganisationDashboard from '@/app/organisations/[id]/components/organisation-dasboard/OrganisationDashboard';
 
 import * as styles from './Organisation.styles';
diff --git a/src/app/organisations/[id]/page.tsx b/src/app/organisations/[id]/page.tsx
index 3d58e59..0ae7ba7 100644
--- a/src/app/organisations/[id]/page.tsx
+++ b/src/app/organisations/[id]/page.tsx
@@ -1,5 +1,33 @@
+import { Box, Stack } from '@mui/material';
+
+import OrganisationBar from '@/app/organisations/[id]/components/organisation-bar';
+import { mocks } from '@/app/profile/components/tabs/constants';
+import IconButton from '@/components/common/ui/icon-button/IconButton';
+import Input from '@/components/common/ui/input/Input';
+import OrganisationCard from '@/components/common/ui/organisation-card';
+
+import * as styles from './Organisation.styles';
+
 const OrganisationPage = () => {
-  return <div>Organisation Page</div>;
+  return (
+    <Box sx={styles.wrapper}>
+      <OrganisationBar />
+      <Box sx={styles.search}>
+        <Input isSearch placeholder="Пошук" sx={styles.input} />
+        <IconButton />
+      </Box>
+      <Stack flexDirection="column" gap="10px">
+        {mocks.map((mock, index) => (
+          <OrganisationCard
+            key={mock.avatar}
+            avatar={mock.avatar}
+            name={mock.name}
+            position={mock.position}
+          />
+        ))}
+      </Stack>
+    </Box>
+  );
 };
 
 export default OrganisationPage;
diff --git a/src/app/test/button/page.tsx b/src/app/test/button/page.tsx
index f070c09..cc5142a 100644
--- a/src/app/test/button/page.tsx
+++ b/src/app/test/button/page.tsx
@@ -114,6 +114,12 @@ const ButtonPage = () => {
           <Button size="small" variant="outlined" color="primary">
             Button
           </Button>
+          <Button size="small" variant="text">
+            Button
+          </Button>{' '}
+          <Button disabled size="small" variant="text">
+            Button
+          </Button>
         </Box>
       </Box>
     </Box>
diff --git a/src/components/common/ui/button/types/index.ts b/src/components/common/ui/button/types/index.ts
index d9f08a1..c7cc625 100644
--- a/src/components/common/ui/button/types/index.ts
+++ b/src/components/common/ui/button/types/index.ts
@@ -2,6 +2,6 @@ export type ButtonSize = 'small' | 'medium' | 'large';
 
 export type ButtonIcon = 'none' | 'left' | 'right';
 
-export type ButtonVariant = 'contained' | 'outlined';
+export type ButtonVariant = 'contained' | 'outlined' | 'text';
 
 export type ButtonColor = 'primary' | 'secondary';

From 3bb5d39cb219bcfc7958fb411274a44cce9ceb71 Mon Sep 17 00:00:00 2001
From: Igor <114025058+igaryakqwe@users.noreply.github.com>
Date: Fri, 12 Jul 2024 14:56:46 +0300
Subject: [PATCH 08/14] feature: finished organisation tabs without logic

---
 .../organisations/[id]/Organisation.styles.ts | 19 ++++++++++++++++++-
 .../OrganisationBar.styles.ts                 | 15 +++++++++++++--
 .../OrganisationDashboard.styles.ts           |  8 ++++++--
 .../OrganisationDashboard.tsx                 |  5 +++++
 src/app/organisations/[id]/layout.tsx         |  1 -
 .../page-layout/header/Header.styles.ts       |  3 ++-
 6 files changed, 44 insertions(+), 7 deletions(-)

diff --git a/src/app/organisations/[id]/Organisation.styles.ts b/src/app/organisations/[id]/Organisation.styles.ts
index 5d1bed9..e50d396 100644
--- a/src/app/organisations/[id]/Organisation.styles.ts
+++ b/src/app/organisations/[id]/Organisation.styles.ts
@@ -1,9 +1,22 @@
 import { SxProps, Theme } from '@mui/material/styles';
 
 export const layout: SxProps<Theme> = {
-  p: '48px 100px 36px 100px',
+  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> = {
@@ -19,4 +32,8 @@ export const search: SxProps<Theme> = {
 
 export const input: SxProps<Theme> = {
   width: '100%',
+  backgroundColor: 'white',
+  '.MuiInputBase-root': {
+    backgroundColor: 'white!important',
+  },
 };
diff --git a/src/app/organisations/[id]/components/organisation-bar/OrganisationBar.styles.ts b/src/app/organisations/[id]/components/organisation-bar/OrganisationBar.styles.ts
index 74bc211..038d52d 100644
--- a/src/app/organisations/[id]/components/organisation-bar/OrganisationBar.styles.ts
+++ b/src/app/organisations/[id]/components/organisation-bar/OrganisationBar.styles.ts
@@ -1,11 +1,22 @@
 import { SxProps, Theme } from '@mui/material/styles';
 
 export const wrapper: SxProps<Theme> = {
+  maxWidth: {
+    mobile: '100%',
+    tablet: '603px',
+  },
   p: '8px',
-  display: 'flex',
-  alignItems: 'center',
+
+  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)',
diff --git a/src/app/organisations/[id]/components/organisation-dasboard/OrganisationDashboard.styles.ts b/src/app/organisations/[id]/components/organisation-dasboard/OrganisationDashboard.styles.ts
index e3ee127..c682978 100644
--- a/src/app/organisations/[id]/components/organisation-dasboard/OrganisationDashboard.styles.ts
+++ b/src/app/organisations/[id]/components/organisation-dasboard/OrganisationDashboard.styles.ts
@@ -1,9 +1,11 @@
 import { SxProps, Theme } from '@mui/material/styles';
 
 export const wrapper: SxProps<Theme> = {
-  maxWidth: '387px',
+  maxWidth: {
+    mobile: '100%',
+    desktop: '400px',
+  },
   p: '16px',
-  mr: '20px',
   display: 'flex',
   flexDirection: 'column',
   gap: '16px',
@@ -14,5 +16,7 @@ export const wrapper: SxProps<Theme> = {
 
   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
index 0b1dd6f..78e5b7c 100644
--- a/src/app/organisations/[id]/components/organisation-dasboard/OrganisationDashboard.tsx
+++ b/src/app/organisations/[id]/components/organisation-dasboard/OrganisationDashboard.tsx
@@ -3,6 +3,7 @@ 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';
 
@@ -33,6 +34,10 @@ const OrganisationDashboard: FC<OrganisationDashboardProps> = ({
         <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>
   );
 };
diff --git a/src/app/organisations/[id]/layout.tsx b/src/app/organisations/[id]/layout.tsx
index cf80fa0..bb795b0 100644
--- a/src/app/organisations/[id]/layout.tsx
+++ b/src/app/organisations/[id]/layout.tsx
@@ -1,7 +1,6 @@
 import { FC, PropsWithChildren } from 'react';
 import { Box } from '@mui/material';
 
-import OrganisationBar from '@/app/organisations/[id]/components/organisation-bar';
 import OrganisationDashboard from '@/app/organisations/[id]/components/organisation-dasboard/OrganisationDashboard';
 
 import * as styles from './Organisation.styles';
diff --git a/src/components/common/layout/page-layout/header/Header.styles.ts b/src/components/common/layout/page-layout/header/Header.styles.ts
index 4b51b9d..b175d7a 100644
--- a/src/components/common/layout/page-layout/header/Header.styles.ts
+++ b/src/components/common/layout/page-layout/header/Header.styles.ts
@@ -4,7 +4,8 @@ export const wrapper: SxProps<Theme> = {
   py: 0,
   px: {
     mobile: '16px',
-    tablet: '100px',
+    tablet: '32px',
+    desktop: '100px',
   },
   width: '100%',
   height: '64px',

From 1fd9bb28e090a66f0d8172dbcc89aab715701a3d Mon Sep 17 00:00:00 2001
From: Igor <114025058+igaryakqwe@users.noreply.github.com>
Date: Sat, 13 Jul 2024 10:22:45 +0300
Subject: [PATCH 09/14] enhancement: updated card component using compound
 components

---
 src/app/organisations/[id]/page.tsx           | 14 ++---
 .../tabs/contents/Organisations.tsx           | 10 ++--
 src/app/test/organisation-card/page.tsx       | 57 +++++++++++++++++--
 .../Card.styles.ts}                           | 21 +++++++
 src/components/common/ui/card/Card.tsx        | 50 ++++++++++++++++
 .../common/ui/card/components/Auto.tsx        | 20 +++++++
 .../common/ui/card/components/Phone.tsx       | 11 ++++
 .../common/ui/card/components/Position.tsx    | 11 ++++
 .../common/ui/card/components/Price.tsx       | 11 ++++
 src/components/common/ui/card/index.ts        |  1 +
 src/components/common/ui/card/types/index.ts  | 27 +++++++++
 .../ui/organisation-card/OrganisationCard.tsx | 56 ------------------
 .../common/ui/organisation-card/index.ts      |  1 -
 src/types/auto.ts                             | 10 ++++
 14 files changed, 227 insertions(+), 73 deletions(-)
 rename src/components/common/ui/{organisation-card/OrganisationCard.styles.ts => card/Card.styles.ts} (69%)
 create mode 100644 src/components/common/ui/card/Card.tsx
 create mode 100644 src/components/common/ui/card/components/Auto.tsx
 create mode 100644 src/components/common/ui/card/components/Phone.tsx
 create mode 100644 src/components/common/ui/card/components/Position.tsx
 create mode 100644 src/components/common/ui/card/components/Price.tsx
 create mode 100644 src/components/common/ui/card/index.ts
 create mode 100644 src/components/common/ui/card/types/index.ts
 delete mode 100644 src/components/common/ui/organisation-card/OrganisationCard.tsx
 delete mode 100644 src/components/common/ui/organisation-card/index.ts
 create mode 100644 src/types/auto.ts

diff --git a/src/app/organisations/[id]/page.tsx b/src/app/organisations/[id]/page.tsx
index 0ae7ba7..99ee333 100644
--- a/src/app/organisations/[id]/page.tsx
+++ b/src/app/organisations/[id]/page.tsx
@@ -2,9 +2,10 @@ 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 OrganisationCard from '@/components/common/ui/organisation-card';
 
 import * as styles from './Organisation.styles';
 
@@ -17,13 +18,10 @@ const OrganisationPage = () => {
         <IconButton />
       </Box>
       <Stack flexDirection="column" gap="10px">
-        {mocks.map((mock, index) => (
-          <OrganisationCard
-            key={mock.avatar}
-            avatar={mock.avatar}
-            name={mock.name}
-            position={mock.position}
-          />
+        {mocks.map((mock) => (
+          <Card key={mock.avatar} avatar={mock.avatar} name={mock.name}>
+            <Position position={mock.position} />
+          </Card>
         ))}
       </Stack>
     </Box>
diff --git a/src/app/profile/components/tabs/contents/Organisations.tsx b/src/app/profile/components/tabs/contents/Organisations.tsx
index cab8fd2..52775d3 100644
--- a/src/app/profile/components/tabs/contents/Organisations.tsx
+++ b/src/app/profile/components/tabs/contents/Organisations.tsx
@@ -4,8 +4,9 @@ import { Box, Stack, Typography } from '@mui/material';
 import { mocks } from '@/app/profile/components/tabs/constants';
 import Gear from '@/components/common/icons/Gear';
 import Button from '@/components/common/ui/button';
+import Card from '@/components/common/ui/card';
+import Position from '@/components/common/ui/card/components/Position';
 
-import OrganisationCard from '../../../../../components/common/ui/organisation-card';
 import * as styles from '../Tabs.styles';
 
 const Organisations: FC = () => {
@@ -35,12 +36,13 @@ const Organisations: FC = () => {
   return (
     <Box sx={styles.organisations}>
       {mocks.map((organisation) => (
-        <OrganisationCard
+        <Card
           key={organisation.name}
           avatar={organisation.avatar}
           name={organisation.name}
-          position={organisation.position}
-        />
+        >
+          <Position position={organisation.position} />
+        </Card>
       ))}
       <Button
         sx={{ alignSelf: 'self-end', mt: '15px' }}
diff --git a/src/app/test/organisation-card/page.tsx b/src/app/test/organisation-card/page.tsx
index 7ac26fb..791e88d 100644
--- a/src/app/test/organisation-card/page.tsx
+++ b/src/app/test/organisation-card/page.tsx
@@ -1,6 +1,9 @@
 import { Stack, Typography } from '@mui/material';
 
-import OrganisationCard from '@/components/common/ui/organisation-card';
+import { Card, Position, Price } from '@/components/common/ui/card/Card';
+import Auto from '@/components/common/ui/card/components/Auto';
+import Phone from '@/components/common/ui/card/components/Phone';
+import type { Auto as IAuto } from '@/types/auto';
 
 const mocks = [
   {
@@ -24,18 +27,64 @@ const mocks = [
   },
 ];
 
+const autoMocks: IAuto[] = [
+  {
+    id: 1,
+    number: 'ABC123',
+    brand: 'Toyota',
+    model: 'Corolla',
+    year: 2020,
+    vin: '1HGBH41JXMN109186',
+    engine: '1.8L',
+    volume: 1800,
+  },
+  {
+    id: 2,
+    number: 'XYZ789',
+    brand: 'Honda',
+    model: 'Civic',
+    year: 2018,
+    vin: '2HGBH41JXMN109187',
+    engine: '2.0L',
+    volume: 2000,
+  },
+  {
+    id: 3,
+    number: 'DEF456',
+    brand: 'Ford',
+    model: 'Focus',
+    year: 2019,
+    vin: '3HGBH41JXMN109188',
+    engine: '1.5L',
+    volume: 1500,
+  },
+];
+
 const Page = () => {
   return (
     <Stack sx={{ m: '20px' }} flexDirection="column" gap="10px">
       <Typography typography="h3Bold">Organisation Card</Typography>
       {mocks.map((mock, index) => (
-        <OrganisationCard
+        <Card
           key={index}
           name={mock.name}
           avatar={mock.avatar}
-          position={mock.position}
           description={mock.description}
-        />
+        >
+          <Position position={mock.position} />
+        </Card>
+      ))}
+      <Card name={'Test'} />
+      <Card name={'Test'}>
+        <Price price="1000 UAH" />
+      </Card>
+      <Card name={'Test'}>
+        <Phone phone="+3806661516144" />
+      </Card>
+      {autoMocks.map((auto: IAuto) => (
+        <Card key={auto.id} name={auto.number}>
+          <Auto auto={auto} />
+        </Card>
       ))}
     </Stack>
   );
diff --git a/src/components/common/ui/organisation-card/OrganisationCard.styles.ts b/src/components/common/ui/card/Card.styles.ts
similarity index 69%
rename from src/components/common/ui/organisation-card/OrganisationCard.styles.ts
rename to src/components/common/ui/card/Card.styles.ts
index f83bc4b..cba4bb4 100644
--- a/src/components/common/ui/organisation-card/OrganisationCard.styles.ts
+++ b/src/components/common/ui/card/Card.styles.ts
@@ -1,5 +1,10 @@
 import { SxProps, Theme } from '@mui/material/styles';
 
+const defaultTextSettings = {
+  typography: 'body1',
+  color: 'black',
+};
+
 export const wrapper: SxProps<Theme> = {
   width: '100%',
   a: {
@@ -33,6 +38,14 @@ export const info: SxProps<Theme> = {
   columnGap: '20px',
 };
 
+export const heading: SxProps<Theme> = {
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'flex-start',
+  gap: '8px',
+};
+
 export const avatar: SxProps<Theme> = {
   width: '64px',
   height: '64px',
@@ -40,6 +53,14 @@ export const avatar: SxProps<Theme> = {
   borderColor: 'gray.500',
 };
 
+export const price: SxProps<Theme> = {
+  typography: 'body1Bold',
+  color: 'orange.100',
+};
+
+export const phone: SxProps<Theme> = defaultTextSettings;
+export const auto: SxProps<Theme> = defaultTextSettings;
+
 export const description: SxProps<Theme> = {
   mt: '14px',
   overflow: 'hidden',
diff --git a/src/components/common/ui/card/Card.tsx b/src/components/common/ui/card/Card.tsx
new file mode 100644
index 0000000..92c6115
--- /dev/null
+++ b/src/components/common/ui/card/Card.tsx
@@ -0,0 +1,50 @@
+'use client';
+import { FC } from 'react';
+import { Avatar, Box, Typography } from '@mui/material';
+import Link from 'next/link';
+
+import Position from '@/components/common/ui/card/components/Position';
+import Price from '@/components/common/ui/card/components/Price';
+import RoundButtonIcon from '@/components/common/ui/round-button-icon';
+import useToast from '@/hooks/use-toast';
+
+import * as styles from './Card.styles';
+import type { CardProps } from './types';
+
+const CardComponent: FC<CardProps> = ({
+  avatar,
+  name,
+  description = '',
+  href = '',
+  children,
+}) => {
+  const toast = useToast();
+  const handleDelete = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+    toast.success('Deleted', '', 3000);
+  };
+
+  return (
+    <Box sx={styles.wrapper}>
+      <Link href={href}>
+        <Box sx={styles.title}>
+          <Box sx={styles.info}>
+            {avatar && <Avatar src={avatar} sx={styles.avatar} />}
+            <Box sx={styles.heading}>
+              <Typography typography="h6Bold">{name}</Typography>
+              {children}
+            </Box>
+          </Box>
+          <RoundButtonIcon onClick={handleDelete} />
+        </Box>
+        {description && (
+          <Typography sx={styles.description}>{description}</Typography>
+        )}
+      </Link>
+    </Box>
+  );
+};
+
+export const Card = Object.assign(CardComponent, { Position, Price });
+
+export { CardComponent, Position, Price };
diff --git a/src/components/common/ui/card/components/Auto.tsx b/src/components/common/ui/card/components/Auto.tsx
new file mode 100644
index 0000000..2115a57
--- /dev/null
+++ b/src/components/common/ui/card/components/Auto.tsx
@@ -0,0 +1,20 @@
+import { FC } from 'react';
+import { Typography } from '@mui/material';
+
+import * as styles from '@/components/common/ui/card/Card.styles';
+import { AutoProps } from '@/components/common/ui/card/types';
+
+const Auto: FC<AutoProps> = ({ auto }) => {
+  return (
+    <>
+      <Typography sx={styles.auto}>Бренд: {auto.brand}</Typography>
+      <Typography sx={styles.auto}>Модель: {auto.model}</Typography>
+      <Typography sx={styles.auto}>Рік: {auto.year}</Typography>
+      <Typography sx={styles.auto}>VIN код: {auto.vin}</Typography>
+      <Typography sx={styles.auto}>Двигун: {auto.engine}</Typography>
+      <Typography sx={styles.auto}>Об'єм двигуна: {auto.volume}L</Typography>
+    </>
+  );
+};
+
+export default Auto;
diff --git a/src/components/common/ui/card/components/Phone.tsx b/src/components/common/ui/card/components/Phone.tsx
new file mode 100644
index 0000000..4badc59
--- /dev/null
+++ b/src/components/common/ui/card/components/Phone.tsx
@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { Typography } from '@mui/material';
+
+import * as styles from '@/components/common/ui/card/Card.styles';
+import type { NumberProps } from '@/components/common/ui/card/types';
+
+const Phone: FC<NumberProps> = ({ phone }) => (
+  <Typography sx={styles.phone}>телефон: {phone}</Typography>
+);
+
+export default Phone;
diff --git a/src/components/common/ui/card/components/Position.tsx b/src/components/common/ui/card/components/Position.tsx
new file mode 100644
index 0000000..547c87f
--- /dev/null
+++ b/src/components/common/ui/card/components/Position.tsx
@@ -0,0 +1,11 @@
+import { FC } from 'react';
+
+import Tag from '@/components/common/ui/tag';
+
+import type { PositionProps } from '../types';
+
+const Position: FC<PositionProps> = ({ position }) => (
+  <Tag text={position} color="orange" />
+);
+
+export default Position;
diff --git a/src/components/common/ui/card/components/Price.tsx b/src/components/common/ui/card/components/Price.tsx
new file mode 100644
index 0000000..73eb374
--- /dev/null
+++ b/src/components/common/ui/card/components/Price.tsx
@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { Typography } from '@mui/material';
+
+import * as styles from '@/components/common/ui/card/Card.styles';
+import type { PriceProps } from '@/components/common/ui/card/types';
+
+const Price: FC<PriceProps> = ({ price }) => (
+  <Typography sx={styles.price}>{price}</Typography>
+);
+
+export default Price;
diff --git a/src/components/common/ui/card/index.ts b/src/components/common/ui/card/index.ts
new file mode 100644
index 0000000..d9c55c8
--- /dev/null
+++ b/src/components/common/ui/card/index.ts
@@ -0,0 +1 @@
+export { Card as default } from './Card';
diff --git a/src/components/common/ui/card/types/index.ts b/src/components/common/ui/card/types/index.ts
new file mode 100644
index 0000000..8ac9950
--- /dev/null
+++ b/src/components/common/ui/card/types/index.ts
@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+
+import { Auto } from '@/types/auto';
+
+export interface CardProps {
+  avatar?: string;
+  name: string;
+  description?: string;
+  href?: string;
+  children?: ReactNode;
+}
+
+export interface PositionProps {
+  position: string;
+}
+
+export interface PriceProps {
+  price: string;
+}
+
+export interface NumberProps {
+  phone: string;
+}
+
+export interface AutoProps {
+  auto: Auto;
+}
diff --git a/src/components/common/ui/organisation-card/OrganisationCard.tsx b/src/components/common/ui/organisation-card/OrganisationCard.tsx
deleted file mode 100644
index 7f3fa2d..0000000
--- a/src/components/common/ui/organisation-card/OrganisationCard.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-'use client';
-import { FC } from 'react';
-import { Avatar, Box, Typography } from '@mui/material';
-import Link from 'next/link';
-
-import Tag from '@/components/common/ui/tag';
-import useToast from '@/hooks/use-toast';
-
-import RoundButtonIcon from '../round-button-icon';
-
-import * as styles from './OrganisationCard.styles';
-
-interface OrganisationCardProps {
-  avatar: string;
-  name: string;
-  position: string;
-  description?: string;
-}
-
-const OrganisationCard: FC<OrganisationCardProps> = ({
-  avatar,
-  name,
-  position,
-  description = '',
-}) => {
-  const toast = useToast();
-  const handleDelete = () => {
-    toast.success('Deleted', '', 3000);
-  };
-
-  const href = 'organisation/1';
-
-  return (
-    <Box sx={styles.wrapper}>
-      <Link href={href}>
-        <Box sx={styles.title}>
-          <Box sx={styles.info}>
-            <Avatar src={avatar} sx={styles.avatar} />
-            <Box>
-              <Typography typography="h6Bold" sx={{ mb: '8px' }}>
-                {name}
-              </Typography>
-              <Tag text={position} color="orange" />
-            </Box>
-          </Box>
-          <RoundButtonIcon onClick={handleDelete} />
-        </Box>
-        {description && (
-          <Typography sx={styles.description}>{description}</Typography>
-        )}
-      </Link>
-    </Box>
-  );
-};
-
-export default OrganisationCard;
diff --git a/src/components/common/ui/organisation-card/index.ts b/src/components/common/ui/organisation-card/index.ts
deleted file mode 100644
index 0bee94d..0000000
--- a/src/components/common/ui/organisation-card/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './OrganisationCard';
diff --git a/src/types/auto.ts b/src/types/auto.ts
new file mode 100644
index 0000000..15c093e
--- /dev/null
+++ b/src/types/auto.ts
@@ -0,0 +1,10 @@
+export interface Auto {
+  id: number;
+  number: string;
+  brand: string;
+  model: string;
+  year: number;
+  vin: string;
+  engine: string;
+  volume: number;
+}

From c497751bb83dfd98f976a4ec19ed4aab43193be6 Mon Sep 17 00:00:00 2001
From: Igor <114025058+igaryakqwe@users.noreply.github.com>
Date: Sat, 13 Jul 2024 11:14:38 +0300
Subject: [PATCH 10/14] feature: made responsive for cards

---
 src/components/common/ui/card/Card.styles.ts | 66 +++++++++++++++-----
 src/components/common/ui/card/Card.tsx       | 24 ++++---
 2 files changed, 65 insertions(+), 25 deletions(-)

diff --git a/src/components/common/ui/card/Card.styles.ts b/src/components/common/ui/card/Card.styles.ts
index cba4bb4..fe816b9 100644
--- a/src/components/common/ui/card/Card.styles.ts
+++ b/src/components/common/ui/card/Card.styles.ts
@@ -7,23 +7,35 @@ const defaultTextSettings = {
 
 export const wrapper: SxProps<Theme> = {
   width: '100%',
-  a: {
-    display: 'block',
-    p: '12px 20px',
-    borderRadius: '6px',
-    border: '1px solid',
-    borderColor: 'gray.500',
-    backgroundColor: 'gray.700',
-    boxShadow: '2px 2px 4px 0px rgba(0, 0, 0, 0.25)',
 
-    '&:hover': {
-      backgroundColor: 'gray.600',
-    },
+  display: 'block',
+  borderRadius: '6px',
+  border: '1px solid',
+  borderColor: 'gray.500',
+  backgroundColor: 'gray.700',
+  boxShadow: '2px 2px 4px 0px rgba(0, 0, 0, 0.25)',
+
+  '&:hover': {
+    backgroundColor: 'gray.600',
+  },
+
+  '&:focus': {
+    outline: '2px solid',
+    outlineColor: 'gray.100',
+  },
+};
+
+export const box: SxProps<Theme> = {
+  flex: '1 1 auto',
+  height: 'auto',
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+};
 
-    '&:focus': {
-      outline: '2px solid',
-      outlineColor: 'gray.100',
-    },
+export const content: SxProps<Theme> = {
+  p: {
+    mobile: '12px 0 12px 20px',
   },
 };
 
@@ -69,3 +81,27 @@ export const description: SxProps<Theme> = {
   WebkitLineClamp: 3,
   WebkitBoxOrient: 'vertical',
 };
+
+export const button: SxProps<Theme> = {
+  alignSelf: 'stretch',
+  width: {
+    mobile: '28px',
+    tablet: '44px',
+  },
+  height: {
+    mobile: 'auto',
+    tablet: '44px',
+  },
+  borderRadius: {
+    tablet: '50%',
+    mobile: '0 6px 6px 0',
+  },
+  m: {
+    mobile: 0,
+    tablet: '22px 16px 0 0',
+  },
+  p: {
+    mobile: '4px',
+    tablet: 0,
+  },
+};
diff --git a/src/components/common/ui/card/Card.tsx b/src/components/common/ui/card/Card.tsx
index 92c6115..e8a9037 100644
--- a/src/components/common/ui/card/Card.tsx
+++ b/src/components/common/ui/card/Card.tsx
@@ -27,19 +27,23 @@ const CardComponent: FC<CardProps> = ({
   return (
     <Box sx={styles.wrapper}>
       <Link href={href}>
-        <Box sx={styles.title}>
-          <Box sx={styles.info}>
-            {avatar && <Avatar src={avatar} sx={styles.avatar} />}
-            <Box sx={styles.heading}>
-              <Typography typography="h6Bold">{name}</Typography>
-              {children}
+        <Box sx={styles.box}>
+          <Box sx={styles.content}>
+            <Box sx={styles.title}>
+              <Box sx={styles.info}>
+                {avatar && <Avatar src={avatar} sx={styles.avatar} />}
+                <Box sx={styles.heading}>
+                  <Typography typography="h6Bold">{name}</Typography>
+                  {children}
+                </Box>
+              </Box>
             </Box>
+            {description && (
+              <Typography sx={styles.description}>{description}</Typography>
+            )}
           </Box>
-          <RoundButtonIcon onClick={handleDelete} />
+          <RoundButtonIcon sx={styles.button} onClick={handleDelete} />
         </Box>
-        {description && (
-          <Typography sx={styles.description}>{description}</Typography>
-        )}
       </Link>
     </Box>
   );

From c19738a33b5bbdd132753e3cd57c16143c1a6a2a Mon Sep 17 00:00:00 2001
From: Igor <114025058+igaryakqwe@users.noreply.github.com>
Date: Sat, 13 Jul 2024 11:30:34 +0300
Subject: [PATCH 11/14] feature: add scrolling for items

---
 .../organisations/[id]/Organisation.styles.ts    | 16 ++++++++++++++++
 .../OrganisationDashboard.styles.ts              |  2 ++
 src/app/organisations/[id]/page.tsx              |  2 +-
 .../profile/components/tabs/constants/index.tsx  | 15 +++++++++++++++
 4 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/src/app/organisations/[id]/Organisation.styles.ts b/src/app/organisations/[id]/Organisation.styles.ts
index e50d396..5b1743e 100644
--- a/src/app/organisations/[id]/Organisation.styles.ts
+++ b/src/app/organisations/[id]/Organisation.styles.ts
@@ -37,3 +37,19 @@ export const input: SxProps<Theme> = {
     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/organisation-dasboard/OrganisationDashboard.styles.ts b/src/app/organisations/[id]/components/organisation-dasboard/OrganisationDashboard.styles.ts
index c682978..2fc0558 100644
--- a/src/app/organisations/[id]/components/organisation-dasboard/OrganisationDashboard.styles.ts
+++ b/src/app/organisations/[id]/components/organisation-dasboard/OrganisationDashboard.styles.ts
@@ -1,10 +1,12 @@
 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',
diff --git a/src/app/organisations/[id]/page.tsx b/src/app/organisations/[id]/page.tsx
index 99ee333..c1a62de 100644
--- a/src/app/organisations/[id]/page.tsx
+++ b/src/app/organisations/[id]/page.tsx
@@ -17,7 +17,7 @@ const OrganisationPage = () => {
         <Input isSearch placeholder="Пошук" sx={styles.input} />
         <IconButton />
       </Box>
-      <Stack flexDirection="column" gap="10px">
+      <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} />
diff --git a/src/app/profile/components/tabs/constants/index.tsx b/src/app/profile/components/tabs/constants/index.tsx
index 90851fa..b13c55c 100644
--- a/src/app/profile/components/tabs/constants/index.tsx
+++ b/src/app/profile/components/tabs/constants/index.tsx
@@ -39,4 +39,19 @@ export const mocks = [
     name: 'Автосервіс Лісовик',
     position: 'Співробітник',
   },
+  {
+    avatar: '/images/avatar.jpg',
+    name: 'Автосервіс Гепард',
+    position: 'Власник',
+  },
+  {
+    avatar: '/images/avatar.jpg',
+    name: 'Автосервіс Чірік',
+    position: 'Співвласник',
+  },
+  {
+    avatar: '/images/avatar.jpg',
+    name: 'Автосервіс Лісовик',
+    position: 'Співробітник',
+  },
 ];

From b174170fc97423308daecebfa5c3c78334d81974 Mon Sep 17 00:00:00 2001
From: Ihor Novykov <ihor.n@develops.today>
Date: Sat, 21 Sep 2024 16:00:04 +0300
Subject: [PATCH 12/14] feat: adjusted auth with cookies

---
 .env                                          |  3 --
 src/app/layout.tsx                            |  6 +++-
 .../profile-header/ProfileHeader.tsx          | 32 +++++++------------
 src/app/profile/page.tsx                      |  2 +-
 .../common/ui/logout-button/LogoutButton.tsx  |  2 +-
 .../pages/auth-pages/login-page/LoginPage.tsx |  4 +--
 src/hooks/use-auth/useAuth.ts                 |  2 ++
 src/lib/api/auth/AuthAPI.ts                   | 10 ++----
 src/lib/api/getAuthorizationHeader.ts         |  9 ------
 src/lib/api/instance.ts                       |  7 ++--
 src/lib/api/user/UserAPI.ts                   | 15 ++-------
 src/middleware.ts                             | 12 +++++++
 12 files changed, 43 insertions(+), 61 deletions(-)
 delete mode 100644 .env
 delete mode 100644 src/lib/api/getAuthorizationHeader.ts
 create mode 100644 src/middleware.ts

diff --git a/.env b/.env
deleted file mode 100644
index 970babe..0000000
--- a/.env
+++ /dev/null
@@ -1,3 +0,0 @@
-BASE_URL=http://localhost:4455
-NEXTAUTH_SECRET=SOME_SECRET
-NEXTAUTH_URL=http://localhost:3000
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 4c9aaf1..0773bc1 100644
--- 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/profile/components/profile-header/ProfileHeader.tsx b/src/app/profile/components/profile-header/ProfileHeader.tsx
index 8c3c7a0..0792837 100644
--- a/src/app/profile/components/profile-header/ProfileHeader.tsx
+++ b/src/app/profile/components/profile-header/ProfileHeader.tsx
@@ -1,37 +1,27 @@
-'use client';
-
 import React, { FC } from 'react';
-import { Box, Skeleton, Typography } from '@mui/material';
-import { useRouter } from 'next/navigation';
+import { Box, Typography } from '@mui/material';
+import { cookies } from 'next/headers';
+import { redirect } from 'next/navigation';
 
 import LogoutButton from '@/components/common/ui/logout-button/LogoutButton';
-import { useAuthContext } from '@/hooks/use-auth/auth-context/AuthContext';
-import StorageUtil from '@/lib/utils/storageUtil';
 
 import * as styles from './ProfileHeader.styles';
 
 const ProfileHeader: FC = () => {
-  const router = useRouter();
-  const { isLoading, mutate } = useAuthContext();
   const logout = async () => {
-    StorageUtil.deleteToken();
-    await mutate();
-    router.push('/login');
+    'use server';
+
+    cookies().delete('accessToken');
+    redirect('/login');
   };
 
   return (
     <Box sx={styles.wrapper}>
       <Typography typography="h4Bold">Профіль</Typography>
-      {isLoading ? (
-        <Skeleton
-          variant="rounded"
-          sx={{ borderRadius: '6px' }}
-          width="116px"
-          height="40px"
-        />
-      ) : (
-        <LogoutButton onClick={() => logout()}>Вихід</LogoutButton>
-      )}
+
+      <form action={logout}>
+        <LogoutButton type="submit">Вихід</LogoutButton>
+      </form>
     </Box>
   );
 };
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
index 2de64c9..06bdb10 100644
--- a/src/app/profile/page.tsx
+++ b/src/app/profile/page.tsx
@@ -7,7 +7,7 @@ import ProfileHeader from '@/app/profile/components/profile-header';
 import Tabs from './components/tabs';
 import * as styles from './ProfilePage.styles';
 
-const Profile = () => {
+const Profile = async () => {
   return (
     <Box sx={styles.wrapper}>
       <ProfileHeader />
diff --git a/src/components/common/ui/logout-button/LogoutButton.tsx b/src/components/common/ui/logout-button/LogoutButton.tsx
index ac0b336..de2d37d 100644
--- a/src/components/common/ui/logout-button/LogoutButton.tsx
+++ b/src/components/common/ui/logout-button/LogoutButton.tsx
@@ -1,5 +1,5 @@
+'use client';
 import React, { FC } from 'react';
-import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline';
 import { Button, ButtonProps, Typography } from '@mui/material';
 import { SxProps, Theme } from '@mui/material/styles';
 
diff --git a/src/components/pages/auth-pages/login-page/LoginPage.tsx b/src/components/pages/auth-pages/login-page/LoginPage.tsx
index 3d847bc..cc67745 100644
--- a/src/components/pages/auth-pages/login-page/LoginPage.tsx
+++ b/src/components/pages/auth-pages/login-page/LoginPage.tsx
@@ -14,7 +14,6 @@ import SideSection from '@/components/pages/auth-pages/components/side-section';
 import useToast from '@/hooks/use-toast';
 import AuthAPI from '@/lib/api/auth/AuthAPI';
 import { exceptionMapper } from '@/lib/utils/exception-mapper';
-import storageUtil from '@/lib/utils/storageUtil';
 
 import { initialValues } from './constants/initialValues';
 import * as styles from './LoginPage.styles';
@@ -26,8 +25,7 @@ const LoginPage: FC = () => {
     initialValues,
     onSubmit: async (values) => {
       try {
-        const { accessToken } = await AuthAPI.login(values);
-        storageUtil.setToken(accessToken);
+        await AuthAPI.login(values);
         router.replace('/profile?tab=organisations');
         return;
       } catch (e) {
diff --git a/src/hooks/use-auth/useAuth.ts b/src/hooks/use-auth/useAuth.ts
index 186ffa7..39f26b4 100644
--- a/src/hooks/use-auth/useAuth.ts
+++ b/src/hooks/use-auth/useAuth.ts
@@ -10,6 +10,8 @@ const useAuth = () => {
     mutate,
   } = useSWR('authorization', () => UserAPI.getUser(), {
     revalidateOnFocus: false,
+    refreshInterval: 0,
+    revalidateOnReconnect: false,
   });
 
   return {
diff --git a/src/lib/api/auth/AuthAPI.ts b/src/lib/api/auth/AuthAPI.ts
index ac78343..9e488cf 100644
--- a/src/lib/api/auth/AuthAPI.ts
+++ b/src/lib/api/auth/AuthAPI.ts
@@ -2,7 +2,6 @@ import { ChangePasswordBody } from '@/lib/api/auth/types/ChangePasswordBody';
 import { LoginBody } from '@/lib/api/auth/types/LoginBody';
 import { RegisterBody } from '@/lib/api/auth/types/RegisterBody';
 import { Token } from '@/lib/api/auth/types/Token';
-import { getAuthorizationHeader } from '@/lib/api/getAuthorizationHeader';
 import { instance } from '@/lib/api/instance';
 
 class AuthAPI {
@@ -12,8 +11,7 @@ class AuthAPI {
   }
 
   async login(body: LoginBody) {
-    const { data } = await instance.post<Token>('/auth/login', body);
-    return data;
+    await instance.post('/auth/login', body);
   }
 
   async approveEmail(token: string) {
@@ -38,11 +36,7 @@ class AuthAPI {
   }
 
   async changePassword(values: ChangePasswordBody) {
-    await instance.patch(
-      '/auth/change/password',
-      values,
-      getAuthorizationHeader(),
-    );
+    await instance.patch('/auth/change/password', values);
   }
 }
 
diff --git a/src/lib/api/getAuthorizationHeader.ts b/src/lib/api/getAuthorizationHeader.ts
deleted file mode 100644
index 3a0eda0..0000000
--- a/src/lib/api/getAuthorizationHeader.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import storageUtil from '@/lib/utils/storageUtil';
-
-export const getAuthorizationHeader = () => {
-  return {
-    headers: {
-      Authorization: `Bearer ${storageUtil.getAccessToken()}`,
-    },
-  };
-};
diff --git a/src/lib/api/instance.ts b/src/lib/api/instance.ts
index 9ca45a9..91e8f71 100644
--- a/src/lib/api/instance.ts
+++ b/src/lib/api/instance.ts
@@ -1,5 +1,8 @@
 import axios from 'axios';
 
-const baseURL = process.env.BASE_URL;
+const baseURL = process.env.NEXT_PUBLIC_API_URL;
 
-export const instance = axios.create({ baseURL: 'http://localhost:80/' });
+export const instance = axios.create({
+  baseURL,
+  withCredentials: true,
+});
diff --git a/src/lib/api/user/UserAPI.ts b/src/lib/api/user/UserAPI.ts
index 87ba72a..2ab66a2 100644
--- a/src/lib/api/user/UserAPI.ts
+++ b/src/lib/api/user/UserAPI.ts
@@ -1,29 +1,20 @@
-import { getAuthorizationHeader } from '@/lib/api/getAuthorizationHeader';
 import { instance } from '@/lib/api/instance';
 import { UserBody, UserInfo } from '@/lib/api/user/types/UserBody';
 
 class UserAPI {
   async getUser() {
-    const { data } = await instance.get<UserBody>('/auth/user', {
-      ...getAuthorizationHeader(),
-    });
+    const { data } = await instance.get<UserBody>('/auth/user');
 
     return data;
   }
 
   async changePersonalInfo(info: UserInfo) {
-    const { data } = await instance.patch<UserBody>('/users', info, {
-      ...getAuthorizationHeader(),
-    });
+    const { data } = await instance.patch<UserBody>('/users', info);
     return data;
   }
 
   async changeAvatar(body: FormData) {
-    const { data } = await instance.patch<UserBody>(
-      '/users/avatar',
-      body,
-      getAuthorizationHeader(),
-    );
+    const { data } = await instance.patch<UserBody>('/users/avatar', body);
     return data;
   }
 }
diff --git a/src/middleware.ts b/src/middleware.ts
new file mode 100644
index 0000000..1832542
--- /dev/null
+++ b/src/middleware.ts
@@ -0,0 +1,12 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function middleware(request: NextRequest) {
+  const accessToken = request.cookies.get('accessToken');
+  if (!accessToken) {
+    return NextResponse.redirect(new URL('/login', request.url));
+  }
+}
+
+export const config = {
+  matcher: ['/profile/:path*', '/organisations/:path*'],
+};

From 707968b1ce911d0d2e36edb28a51ae00e6555b6f Mon Sep 17 00:00:00 2001
From: Ihor Novykov <ihor.n@develops.today>
Date: Sat, 21 Sep 2024 17:33:32 +0300
Subject: [PATCH 13/14] feat: added popup screen for creating organisations

---
 public/images/avatar.jpg                      | Bin 30631 -> 0 bytes
 src/app/organisations/Organisations.styles.ts |   1 +
 src/app/organisations/page.tsx                |  19 +--
 .../components/tabs/constants/index.tsx       |  60 ++++-----
 .../tabs/contents/Organisations.tsx           |  90 ++++++++------
 src/components/common/ui/card/Card.tsx        |   4 +-
 src/components/common/ui/card/types/index.ts  |   2 +
 .../common/ui/input/Input.styles.ts           |   1 -
 .../OrganisationPopup.styles.ts               |  40 ++++++
 .../organisation-popup/OrganisationPopup.tsx  | 116 ++++++++++++++++++
 .../pop-ups/organisation-popup/types/index.ts |   4 +
 11 files changed, 261 insertions(+), 76 deletions(-)
 delete mode 100644 public/images/avatar.jpg
 create mode 100644 src/components/common/ui/pop-ups/organisation-popup/OrganisationPopup.styles.ts
 create mode 100644 src/components/common/ui/pop-ups/organisation-popup/OrganisationPopup.tsx
 create mode 100644 src/components/common/ui/pop-ups/organisation-popup/types/index.ts

diff --git a/public/images/avatar.jpg b/public/images/avatar.jpg
deleted file mode 100644
index 19ba5b829ac0951d0f0553054e3ba91e8fbe992e..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 30631
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

diff --git a/src/app/organisations/Organisations.styles.ts b/src/app/organisations/Organisations.styles.ts
index 028704b..0a38998 100644
--- a/src/app/organisations/Organisations.styles.ts
+++ b/src/app/organisations/Organisations.styles.ts
@@ -22,6 +22,7 @@ export const input: SxProps<Theme> = {
 };
 
 export const organisations: SxProps<Theme> = {
+  width: '100%',
   maxWidth: '994px',
   display: 'grid',
   gap: '16px',
diff --git a/src/app/organisations/page.tsx b/src/app/organisations/page.tsx
index fcabbc1..7207a62 100644
--- a/src/app/organisations/page.tsx
+++ b/src/app/organisations/page.tsx
@@ -1,8 +1,9 @@
 import { Box, Typography } from '@mui/material';
 
+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 OrganisationCard from '@/components/common/ui/organisation-card';
 
 import * as styles from './Organisations.styles';
 
@@ -40,14 +41,14 @@ const Organisations = () => {
         <IconButton />
       </Box>
       <Box sx={styles.organisations}>
-        {mocks.map((mock, index) => (
-          <OrganisationCard
-            key={index}
-            name={mock.name}
-            avatar={mock.avatar}
-            position={mock.position}
-            description={mock.description}
-          />
+        {mocks.map((organisation) => (
+          <Card
+            key={organisation.name}
+            avatar={organisation.avatar}
+            name={organisation.name}
+          >
+            <Position position={organisation.position} />
+          </Card>
         ))}
       </Box>
     </Box>
diff --git a/src/app/profile/components/tabs/constants/index.tsx b/src/app/profile/components/tabs/constants/index.tsx
index b13c55c..28ca6ed 100644
--- a/src/app/profile/components/tabs/constants/index.tsx
+++ b/src/app/profile/components/tabs/constants/index.tsx
@@ -24,34 +24,34 @@ export const tabs = [
 ];
 
 export const mocks = [
-  {
-    avatar: '/images/avatar.jpg',
-    name: 'Автосервіс Гепард',
-    position: 'Власник',
-  },
-  {
-    avatar: '/images/avatar.jpg',
-    name: 'Автосервіс Чірік',
-    position: 'Співвласник',
-  },
-  {
-    avatar: '/images/avatar.jpg',
-    name: 'Автосервіс Лісовик',
-    position: 'Співробітник',
-  },
-  {
-    avatar: '/images/avatar.jpg',
-    name: 'Автосервіс Гепард',
-    position: 'Власник',
-  },
-  {
-    avatar: '/images/avatar.jpg',
-    name: 'Автосервіс Чірік',
-    position: 'Співвласник',
-  },
-  {
-    avatar: '/images/avatar.jpg',
-    name: 'Автосервіс Лісовик',
-    position: 'Співробітник',
-  },
+  // {
+  //   avatar: '/images/avatar.jpg',
+  //   name: 'Автосервіс Гепард',
+  //   position: 'Власник',
+  // },
+  // {
+  //   avatar: '/images/avatar.jpg',
+  //   name: 'Автосервіс Чірік',
+  //   position: 'Співвласник',
+  // },
+  // {
+  //   avatar: '/images/avatar.jpg',
+  //   name: 'Автосервіс Лісовик',
+  //   position: 'Співробітник',
+  // },
+  // {
+  //   avatar: '/images/avatar.jpg',
+  //   name: 'Автосервіс Гепард',
+  //   position: 'Власник',
+  // },
+  // {
+  //   avatar: '/images/avatar.jpg',
+  //   name: 'Автосервіс Чірік',
+  //   position: 'Співвласник',
+  // },
+  // {
+  //   avatar: '/images/avatar.jpg',
+  //   name: 'Автосервіс Лісовик',
+  //   position: 'Співробітник',
+  // },
 ];
diff --git a/src/app/profile/components/tabs/contents/Organisations.tsx b/src/app/profile/components/tabs/contents/Organisations.tsx
index 52775d3..d881976 100644
--- a/src/app/profile/components/tabs/contents/Organisations.tsx
+++ b/src/app/profile/components/tabs/contents/Organisations.tsx
@@ -1,4 +1,5 @@
-import { FC } from 'react';
+import { FC, useState } from 'react';
+import { PencilSquareIcon } from '@heroicons/react/24/outline';
 import { Box, Stack, Typography } from '@mui/material';
 
 import { mocks } from '@/app/profile/components/tabs/constants';
@@ -6,52 +7,71 @@ import Gear from '@/components/common/icons/Gear';
 import Button from '@/components/common/ui/button';
 import Card from '@/components/common/ui/card';
 import Position from '@/components/common/ui/card/components/Position';
+import OrganisationPopup from '@/components/common/ui/pop-ups/organisation-popup/OrganisationPopup';
 
 import * as styles from '../Tabs.styles';
 
 const Organisations: FC = () => {
+  const [open, setOpen] = useState(false);
+
+  const handleClick = () => {
+    setOpen(!open);
+    console.log(open);
+  };
+
   if (mocks.length === 0) {
     return (
-      <Box sx={styles.organisations}>
-        <Stack
-          sx={styles.noOrganisations}
-          flexDirection="column"
-          alignItems="center"
-        >
-          <Gear />
-          <Typography typography="h6">
-            У вас покищо немає доданих організацій!
-            <br />
-            Ви можете приєднатися до організації або створити власну.
-          </Typography>
-          <Stack flexDirection="row" gap="16px">
-            <Button variant="outlined">Створити</Button>
-            <Button>Приєднатися</Button>
+      <OrganisationPopup open={open} handleClick={handleClick}>
+        <Box sx={styles.organisations}>
+          <Stack
+            sx={styles.noOrganisations}
+            flexDirection="column"
+            alignItems="center"
+          >
+            <Gear />
+            <Typography typography="h6">
+              У вас поки немає доданих організацій!
+              <br />
+              Ви можете створити власну або власники інших організацій можуть
+              додати вас до свого складу :)
+            </Typography>
+            <Stack flexDirection="row" gap="16px">
+              <Button
+                onClick={handleClick}
+                icon="left"
+                iconComponent={<PencilSquareIcon />}
+              >
+                Створити
+              </Button>
+            </Stack>
           </Stack>
-        </Stack>
-      </Box>
+        </Box>
+      </OrganisationPopup>
     );
   }
 
   return (
-    <Box sx={styles.organisations}>
-      {mocks.map((organisation) => (
-        <Card
-          key={organisation.name}
-          avatar={organisation.avatar}
-          name={organisation.name}
+    <OrganisationPopup open={open} handleClick={handleClick}>
+      <Box sx={styles.organisations}>
+        {mocks.map((organisation) => (
+          <Card
+            key={organisation.name}
+            avatar={organisation.avatar}
+            name={organisation.name}
+          >
+            <Position position={organisation.position} />
+          </Card>
+        ))}
+        <Button
+          sx={{ alignSelf: 'self-end', mt: '15px' }}
+          variant="outlined"
+          icon="right"
+          onClick={handleClick}
         >
-          <Position position={organisation.position} />
-        </Card>
-      ))}
-      <Button
-        sx={{ alignSelf: 'self-end', mt: '15px' }}
-        variant="outlined"
-        icon="right"
-      >
-        Створити
-      </Button>
-    </Box>
+          Створити
+        </Button>
+      </Box>
+    </OrganisationPopup>
   );
 };
 
diff --git a/src/components/common/ui/card/Card.tsx b/src/components/common/ui/card/Card.tsx
index e8a9037..b83fa06 100644
--- a/src/components/common/ui/card/Card.tsx
+++ b/src/components/common/ui/card/Card.tsx
@@ -7,6 +7,7 @@ import Position from '@/components/common/ui/card/components/Position';
 import Price from '@/components/common/ui/card/components/Price';
 import RoundButtonIcon from '@/components/common/ui/round-button-icon';
 import useToast from '@/hooks/use-toast';
+import mergeSx from '@/lib/utils/mergeSx';
 
 import * as styles from './Card.styles';
 import type { CardProps } from './types';
@@ -17,6 +18,7 @@ const CardComponent: FC<CardProps> = ({
   description = '',
   href = '',
   children,
+  sx = {},
 }) => {
   const toast = useToast();
   const handleDelete = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -25,7 +27,7 @@ const CardComponent: FC<CardProps> = ({
   };
 
   return (
-    <Box sx={styles.wrapper}>
+    <Box sx={mergeSx(styles.wrapper, sx)}>
       <Link href={href}>
         <Box sx={styles.box}>
           <Box sx={styles.content}>
diff --git a/src/components/common/ui/card/types/index.ts b/src/components/common/ui/card/types/index.ts
index 8ac9950..3b08ad0 100644
--- a/src/components/common/ui/card/types/index.ts
+++ b/src/components/common/ui/card/types/index.ts
@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
 
 import { Auto } from '@/types/auto';
 
@@ -8,6 +9,7 @@ export interface CardProps {
   description?: string;
   href?: string;
   children?: ReactNode;
+  sx?: SxProps<Theme>;
 }
 
 export interface PositionProps {
diff --git a/src/components/common/ui/input/Input.styles.ts b/src/components/common/ui/input/Input.styles.ts
index 7091e4e..492c1ae 100644
--- a/src/components/common/ui/input/Input.styles.ts
+++ b/src/components/common/ui/input/Input.styles.ts
@@ -4,7 +4,6 @@ import { InputVariant } from '@/components/common/ui/input/types';
 
 export const formControl = (variant: InputVariant): SxProps<Theme> => ({
   '.MuiInputBase-root': {
-    m: 0,
     border: '2px solid',
     borderColor: 'gray.400',
 
diff --git a/src/components/common/ui/pop-ups/organisation-popup/OrganisationPopup.styles.ts b/src/components/common/ui/pop-ups/organisation-popup/OrganisationPopup.styles.ts
new file mode 100644
index 0000000..16cf975
--- /dev/null
+++ b/src/components/common/ui/pop-ups/organisation-popup/OrganisationPopup.styles.ts
@@ -0,0 +1,40 @@
+import { SxProps, Theme } from '@mui/material/styles';
+
+export const modal: SxProps<Theme> = {
+  zIndex: 10,
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+};
+
+export const window: SxProps<Theme> = {
+  zIndex: 11,
+  width: '500px',
+  backgroundColor: 'white.main',
+  px: '40px',
+  py: '20px',
+  borderRadius: '6px',
+  border: '1px solid',
+  borderColor: 'grey.500',
+  background: 'white.main',
+};
+
+export const backdrop: SxProps<Theme> = {
+  background: 'rgba(151, 151, 151, 0.40);',
+  backdropFilter: 'blur(4px)',
+};
+
+export const avatarWrapper: SxProps<Theme> = {
+  mt: '20px',
+  width: '160px',
+  height: '160px',
+  position: 'relative',
+};
+
+export const buttonIcon: SxProps<Theme> = {
+  position: 'absolute',
+  right: '0px',
+  top: '120px',
+  margin: 'auto',
+};
diff --git a/src/components/common/ui/pop-ups/organisation-popup/OrganisationPopup.tsx b/src/components/common/ui/pop-ups/organisation-popup/OrganisationPopup.tsx
new file mode 100644
index 0000000..55d7da1
--- /dev/null
+++ b/src/components/common/ui/pop-ups/organisation-popup/OrganisationPopup.tsx
@@ -0,0 +1,116 @@
+import { FC, PropsWithChildren, useRef, useState } from 'react';
+import { PencilSquareIcon } from '@heroicons/react/24/outline';
+import { Avatar, Box, Modal, Stack, Typography } from '@mui/material';
+import { useFormik } from 'formik';
+
+import Button from '@/components/common/ui/button';
+import Input from '@/components/common/ui/input/Input';
+import RoundButtonIcon from '@/components/common/ui/round-button-icon';
+
+import * as styles from './OrganisationPopup.styles';
+
+interface OrganisationPopupProps {
+  open: boolean;
+  handleClick: () => void;
+}
+
+const OrganisationPopup: FC<PropsWithChildren<OrganisationPopupProps>> = ({
+  children,
+  open,
+  handleClick,
+}) => {
+  const [avatar, setAvatar] = useState<string>(
+    '/svgs/organisation-default.svg',
+  );
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const formik = useFormik({
+    initialValues: {
+      avatar: '',
+    },
+    onSubmit: (values) => {
+      console.log(values);
+    },
+  });
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.currentTarget.files?.[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setAvatar(reader.result as string);
+        formik.setFieldValue('avatar', reader.result);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const handleChangeAvatar = () => {
+    fileInputRef.current?.click();
+  };
+
+  return (
+    <>
+      {children}
+      <Modal
+        sx={styles.modal}
+        onClose={handleClick}
+        open={open}
+        BackdropProps={{
+          sx: styles.backdrop,
+        }}
+      >
+        <Box sx={styles.window}>
+          <Box>
+            <Typography typography="h5Bold">Створення організації</Typography>
+            <form onSubmit={formik.handleSubmit}>
+              <Stack flexDirection="column" alignItems="center" gap="20px">
+                <Box sx={styles.avatarWrapper}>
+                  <Avatar src={avatar} sx={{ width: '100%', height: '100%' }} />
+                  <input
+                    type="file"
+                    ref={fileInputRef}
+                    accept=".jpeg, .jpg, .png, .webp"
+                    style={{ display: 'none' }}
+                    onChange={handleFileChange}
+                  />
+                  <RoundButtonIcon
+                    sx={styles.buttonIcon}
+                    icon={<PencilSquareIcon />}
+                    onClick={handleChangeAvatar}
+                  />
+                </Box>
+                <Input
+                  fullWidth
+                  label="Назва"
+                  placeholder="Автосервіс Гепард"
+                />
+                <Input
+                  fullWidth
+                  label="Адреса"
+                  placeholder="м. Київ, проспект Перемоги 10"
+                />
+                <Input
+                  multiline
+                  fullWidth
+                  minRows={3}
+                  label="Опис (опціонально)"
+                  placeholder="Опис організації"
+                />
+                <Button
+                  sx={{ alignSelf: 'self-end' }}
+                  size="small"
+                  type="submit"
+                >
+                  Створити
+                </Button>
+              </Stack>
+            </form>
+          </Box>
+        </Box>
+      </Modal>
+    </>
+  );
+};
+
+export default OrganisationPopup;
diff --git a/src/components/common/ui/pop-ups/organisation-popup/types/index.ts b/src/components/common/ui/pop-ups/organisation-popup/types/index.ts
new file mode 100644
index 0000000..ad512c8
--- /dev/null
+++ b/src/components/common/ui/pop-ups/organisation-popup/types/index.ts
@@ -0,0 +1,4 @@
+export interface ICreateOrganisationContext {
+  open: boolean;
+  handleClick: () => void;
+}

From d04dd0ca9071a232e3e20c452ece62ba59279cd5 Mon Sep 17 00:00:00 2001
From: Ihor Novykov <ihor.n@develops.today>
Date: Sun, 22 Sep 2024 16:31:58 +0300
Subject: [PATCH 14/14] feat: added creating organisations

---
 src/app/organisations/Organisations.styles.ts | 25 +---------
 .../OrganisationsList.styles.ts               | 30 ++++++++++++
 .../organisations-llist/OrganisationsList.tsx | 43 +++++++++++++++++
 .../components/organisations-llist/index.ts   |  1 +
 src/app/organisations/page.tsx                | 48 ++-----------------
 .../components/profile-card/ProfileCard.tsx   |  4 +-
 .../profile-card/popup/ProfileEditPopup.tsx   |  2 +-
 .../page-layout/footer/Footer.styles.ts       |  2 +-
 .../common/ui/icon-button/IconButton.tsx      |  3 ++
 .../OrganisationPopup.styles.ts               |  2 +-
 .../organisation-popup/OrganisationPopup.tsx  | 45 +++++++++++++++--
 src/lib/api/organisations/OrganisationsAPI.ts | 21 ++++++++
 src/lib/api/organisations/types/index.ts      |  6 +++
 13 files changed, 156 insertions(+), 76 deletions(-)
 create mode 100644 src/app/organisations/components/organisations-llist/OrganisationsList.styles.ts
 create mode 100644 src/app/organisations/components/organisations-llist/OrganisationsList.tsx
 create mode 100644 src/app/organisations/components/organisations-llist/index.ts
 create mode 100644 src/lib/api/organisations/OrganisationsAPI.ts
 create mode 100644 src/lib/api/organisations/types/index.ts

diff --git a/src/app/organisations/Organisations.styles.ts b/src/app/organisations/Organisations.styles.ts
index 0a38998..ccc1348 100644
--- a/src/app/organisations/Organisations.styles.ts
+++ b/src/app/organisations/Organisations.styles.ts
@@ -1,30 +1,7 @@
 import { SxProps, Theme } from '@mui/material/styles';
 
 export const wrapper: SxProps<Theme> = {
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
   width: '100%',
-};
-
-export const search: SxProps<Theme> = {
-  maxWidth: '794px',
-  width: '100%',
-  mt: '26px',
-  display: 'inline-flex',
-  gap: '16px',
-};
-
-export const input: SxProps<Theme> = {
-  maxWidth: '730px',
-  flexGrow: 1,
-  mb: '26px',
-};
-
-export const organisations: SxProps<Theme> = {
-  width: '100%',
-  maxWidth: '994px',
   display: 'grid',
-  gap: '16px',
-  mb: '64px',
+  placeItems: 'center',
 };
diff --git a/src/app/organisations/components/organisations-llist/OrganisationsList.styles.ts b/src/app/organisations/components/organisations-llist/OrganisationsList.styles.ts
new file mode 100644
index 0000000..5e5f868
--- /dev/null
+++ b/src/app/organisations/components/organisations-llist/OrganisationsList.styles.ts
@@ -0,0 +1,30 @@
+import { SxProps, Theme } from '@mui/material/styles';
+
+export const wrapper: SxProps<Theme> = {
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+};
+
+export const search: SxProps<Theme> = {
+  maxWidth: '794px',
+  width: '100%',
+  mt: '26px',
+  display: 'inline-flex',
+  gap: '16px',
+};
+
+export const input: SxProps<Theme> = {
+  maxWidth: '730px',
+  flexGrow: 1,
+  mb: '26px',
+};
+
+export const organisations: SxProps<Theme> = {
+  width: '100%',
+  maxWidth: '994px',
+  display: 'grid',
+  gap: '16px',
+  mb: '64px',
+};
diff --git a/src/app/organisations/components/organisations-llist/OrganisationsList.tsx b/src/app/organisations/components/organisations-llist/OrganisationsList.tsx
new file mode 100644
index 0000000..ce102cb
--- /dev/null
+++ b/src/app/organisations/components/organisations-llist/OrganisationsList.tsx
@@ -0,0 +1,43 @@
+'use client';
+import { FC, useState } from 'react';
+import { Box } from '@mui/material';
+
+import IconButton from '@/components/common/ui/icon-button/IconButton';
+import Input from '@/components/common/ui/input/Input';
+import OrganisationPopup from '@/components/common/ui/pop-ups/organisation-popup/OrganisationPopup';
+
+import * as styles from './OrganisationsList.styles';
+
+interface OrganisationsListProps {}
+
+const OrganisationsList: FC<OrganisationsListProps> = () => {
+  const [open, setOpen] = useState(false);
+
+  const handleClick = () => {
+    setOpen(!open);
+  };
+
+  return (
+    <Box sx={styles.wrapper}>
+      <OrganisationPopup open={open} handleClick={handleClick}>
+        <Box sx={styles.search}>
+          <Input sx={styles.input} isSearch fullWidth placeholder="Пошук" />
+          <IconButton onClick={handleClick} />
+        </Box>
+      </OrganisationPopup>
+      <Box sx={styles.organisations}>
+        {/*{mocks.map((organisation) => (*/}
+        {/*  <Card*/}
+        {/*    key={organisation.name}*/}
+        {/*    avatar={organisation.avatar}*/}
+        {/*    name={organisation.name}*/}
+        {/*  >*/}
+        {/*    <Position position={organisation.position} />*/}
+        {/*  </Card>*/}
+        {/*))}*/}
+      </Box>
+    </Box>
+  );
+};
+
+export default OrganisationsList;
diff --git a/src/app/organisations/components/organisations-llist/index.ts b/src/app/organisations/components/organisations-llist/index.ts
new file mode 100644
index 0000000..119f03d
--- /dev/null
+++ b/src/app/organisations/components/organisations-llist/index.ts
@@ -0,0 +1 @@
+export { default } from './OrganisationsList';
diff --git a/src/app/organisations/page.tsx b/src/app/organisations/page.tsx
index 7207a62..06b1d28 100644
--- a/src/app/organisations/page.tsx
+++ b/src/app/organisations/page.tsx
@@ -1,58 +1,18 @@
 import { Box, Typography } from '@mui/material';
 
-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 OrganisationsList from '@/app/organisations/components/organisations-llist';
 
 import * as styles from './Organisations.styles';
 
-const mocks = [
-  {
-    avatar:
-      'https://autolab-fs.s3.eu-north-1.amazonaws.com/default/avatar-org.svg',
-    name: 'Автосервіс Гепард',
-    position: 'Власник',
-    description:
-      'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus accusantium aperiam delectus dolor dolores enim error est et excepturi ipsum iusto magni non pariatur, quibusdam reiciendis sapiente, sed sint tenetur!\n ',
-  },
-  {
-    avatar:
-      'https://autolab-fs.s3.eu-north-1.amazonaws.com/default/avatar-org.svg',
-    name: 'Автосервіс Чірік',
-    position: 'Співвласник',
-  },
-  {
-    avatar: '/images/avatar.jpg',
-    name: 'Автосервіс Лісовик',
-    position: 'Співробітник',
-  },
-];
-
-const Organisations = () => {
+const OrganisationsPage = () => {
   return (
     <Box sx={styles.wrapper}>
       <Typography mt="48px" typography="h5Medium">
         Мої організації
       </Typography>
-
-      <Box sx={styles.search}>
-        <Input sx={styles.input} isSearch fullWidth placeholder="Пошук" />
-        <IconButton />
-      </Box>
-      <Box sx={styles.organisations}>
-        {mocks.map((organisation) => (
-          <Card
-            key={organisation.name}
-            avatar={organisation.avatar}
-            name={organisation.name}
-          >
-            <Position position={organisation.position} />
-          </Card>
-        ))}
-      </Box>
+      <OrganisationsList />
     </Box>
   );
 };
 
-export default Organisations;
+export default OrganisationsPage;
diff --git a/src/app/profile/components/profile-card/ProfileCard.tsx b/src/app/profile/components/profile-card/ProfileCard.tsx
index 6865ad5..b78f5a7 100644
--- a/src/app/profile/components/profile-card/ProfileCard.tsx
+++ b/src/app/profile/components/profile-card/ProfileCard.tsx
@@ -27,7 +27,7 @@ export const ProfileCardContext = createContext<ProfileCardContextProps | null>(
 );
 
 const ProfileCard: FC = () => {
-  const { user, isLoading } = useAuthContext();
+  const { user, isLoading, isError } = useAuthContext();
   const birthday = getDate(user?.birthDate as string);
   const years = getYears(user?.birthDate as string);
   const [open, setOpen] = useState(false);
@@ -38,7 +38,7 @@ const ProfileCard: FC = () => {
 
   return (
     <Box sx={styles.wrapper}>
-      {isLoading ? (
+      {isError || (!user && isLoading) ? (
         <ProfileCardSkeleton />
       ) : (
         <ProfileCardContext.Provider value={{ open, handleClick }}>
diff --git a/src/app/profile/components/profile-card/popup/ProfileEditPopup.tsx b/src/app/profile/components/profile-card/popup/ProfileEditPopup.tsx
index 52c5930..f753420 100644
--- a/src/app/profile/components/profile-card/popup/ProfileEditPopup.tsx
+++ b/src/app/profile/components/profile-card/popup/ProfileEditPopup.tsx
@@ -32,7 +32,7 @@ const ProfileEditPopup: FC = () => {
   const [activeSection, setActiveSection] =
     useState<EditTabName>('personalData');
   const { user } = useAuthContext();
-  const [avatar, setAvatar] = useState<string>(user!.avatar);
+  const [avatar, setAvatar] = useState<string>(user?.avatar || '');
   const fileInputRef = useRef<HTMLInputElement>(null);
   const toast = useToast();
 
diff --git a/src/components/common/layout/page-layout/footer/Footer.styles.ts b/src/components/common/layout/page-layout/footer/Footer.styles.ts
index 7383352..3c4e62f 100644
--- a/src/components/common/layout/page-layout/footer/Footer.styles.ts
+++ b/src/components/common/layout/page-layout/footer/Footer.styles.ts
@@ -10,7 +10,7 @@ export const wrapper: SxProps<Theme> = {
     desktop: 'flex-start',
     mobile: 'center',
   },
-  zIndex: 11,
+  zIndex: 10,
 
   padding: {
     desktop: '38px 100px',
diff --git a/src/components/common/ui/icon-button/IconButton.tsx b/src/components/common/ui/icon-button/IconButton.tsx
index 5f06c34..f8a9b8b 100644
--- a/src/components/common/ui/icon-button/IconButton.tsx
+++ b/src/components/common/ui/icon-button/IconButton.tsx
@@ -18,6 +18,7 @@ interface IconButtonProps extends IconButtonPropsMUI {
   children?: ReactNode;
   size?: IconButtonSize;
   variant?: IconButtonVariant;
+  onClick?: () => void;
   sx?: SxProps<Theme>;
 }
 
@@ -25,12 +26,14 @@ const IconButton: FC<IconButtonProps> = ({
   children = <PlusIcon />,
   size = 'medium',
   variant = 'contained',
+  onClick = () => {},
   sx = {},
   ...props
 }) => {
   return (
     <IconButtonMUI
       disableRipple
+      onClick={onClick}
       sx={mergeSx(styles.button(size, variant), sx)}
       {...props}
     >
diff --git a/src/components/common/ui/pop-ups/organisation-popup/OrganisationPopup.styles.ts b/src/components/common/ui/pop-ups/organisation-popup/OrganisationPopup.styles.ts
index 16cf975..19d0230 100644
--- a/src/components/common/ui/pop-ups/organisation-popup/OrganisationPopup.styles.ts
+++ b/src/components/common/ui/pop-ups/organisation-popup/OrganisationPopup.styles.ts
@@ -9,7 +9,7 @@ export const modal: SxProps<Theme> = {
 };
 
 export const window: SxProps<Theme> = {
-  zIndex: 11,
+  zIndex: 10,
   width: '500px',
   backgroundColor: 'white.main',
   px: '40px',
diff --git a/src/components/common/ui/pop-ups/organisation-popup/OrganisationPopup.tsx b/src/components/common/ui/pop-ups/organisation-popup/OrganisationPopup.tsx
index 55d7da1..1202933 100644
--- a/src/components/common/ui/pop-ups/organisation-popup/OrganisationPopup.tsx
+++ b/src/components/common/ui/pop-ups/organisation-popup/OrganisationPopup.tsx
@@ -1,11 +1,14 @@
 import { FC, PropsWithChildren, useRef, useState } from 'react';
 import { PencilSquareIcon } from '@heroicons/react/24/outline';
 import { Avatar, Box, Modal, Stack, Typography } from '@mui/material';
+import { isAxiosError } from 'axios';
 import { useFormik } from 'formik';
 
 import Button from '@/components/common/ui/button';
 import Input from '@/components/common/ui/input/Input';
 import RoundButtonIcon from '@/components/common/ui/round-button-icon';
+import useToast from '@/hooks/use-toast';
+import OrganisationsAPI from '@/lib/api/organisations/OrganisationsAPI';
 
 import * as styles from './OrganisationPopup.styles';
 
@@ -19,6 +22,8 @@ const OrganisationPopup: FC<PropsWithChildren<OrganisationPopupProps>> = ({
   open,
   handleClick,
 }) => {
+  const toast = useToast();
+
   const [avatar, setAvatar] = useState<string>(
     '/svgs/organisation-default.svg',
   );
@@ -26,10 +31,35 @@ const OrganisationPopup: FC<PropsWithChildren<OrganisationPopupProps>> = ({
 
   const formik = useFormik({
     initialValues: {
-      avatar: '',
+      avatar: null,
+      name: '',
+      address: '',
+      info: '',
     },
-    onSubmit: (values) => {
+    onSubmit: async (values) => {
       console.log(values);
+      const formData = new FormData();
+      if (values.avatar) {
+        formData.append('avatar', values.avatar as Blob);
+      }
+      formData.append('name', values.name);
+      formData.append('address', values.address);
+      if (values.info) {
+        formData.append('info', values.info);
+      }
+
+      try {
+        await OrganisationsAPI.create(formData);
+        toast.success('Організація створена успішно');
+        handleClick();
+      } catch (error) {
+        if (isAxiosError(error)) {
+          toast.error(
+            'Помилка при створенні організації',
+            error?.response?.data?.message,
+          );
+        }
+      }
     },
   });
 
@@ -39,7 +69,7 @@ const OrganisationPopup: FC<PropsWithChildren<OrganisationPopupProps>> = ({
       const reader = new FileReader();
       reader.onloadend = () => {
         setAvatar(reader.result as string);
-        formik.setFieldValue('avatar', reader.result);
+        formik.setFieldValue('avatar', file);
       };
       reader.readAsDataURL(file);
     }
@@ -81,21 +111,30 @@ const OrganisationPopup: FC<PropsWithChildren<OrganisationPopupProps>> = ({
                   />
                 </Box>
                 <Input
+                  name="name"
                   fullWidth
                   label="Назва"
                   placeholder="Автосервіс Гепард"
+                  onChange={formik.handleChange}
+                  value={formik.values.name}
                 />
                 <Input
+                  name="address"
                   fullWidth
                   label="Адреса"
                   placeholder="м. Київ, проспект Перемоги 10"
+                  onChange={formik.handleChange}
+                  value={formik.values.address}
                 />
                 <Input
+                  name="info"
                   multiline
                   fullWidth
                   minRows={3}
                   label="Опис (опціонально)"
                   placeholder="Опис організації"
+                  onChange={formik.handleChange}
+                  value={formik.values.info}
                 />
                 <Button
                   sx={{ alignSelf: 'self-end' }}
diff --git a/src/lib/api/organisations/OrganisationsAPI.ts b/src/lib/api/organisations/OrganisationsAPI.ts
new file mode 100644
index 0000000..cc8d35c
--- /dev/null
+++ b/src/lib/api/organisations/OrganisationsAPI.ts
@@ -0,0 +1,21 @@
+import { instance } from '@/lib/api/instance';
+import { IOrganisationResponse } from '@/lib/api/organisations/types';
+
+class OrganisationsAPI {
+  async create(body: FormData) {
+    await instance.post('/organizations', body);
+  }
+
+  async getById(id: string) {
+    const { data } = await instance.get<IOrganisationResponse>(
+      `/organizations/${id}`,
+    );
+    return data;
+  }
+
+  async delete(id: string) {
+    await instance.delete(`/organizations/${id}`);
+  }
+}
+
+export default new OrganisationsAPI();
diff --git a/src/lib/api/organisations/types/index.ts b/src/lib/api/organisations/types/index.ts
new file mode 100644
index 0000000..b253075
--- /dev/null
+++ b/src/lib/api/organisations/types/index.ts
@@ -0,0 +1,6 @@
+export interface IOrganisationResponse {
+  id: string;
+  name: string;
+  avatar: string;
+  address: string;
+}