289 on opportunities page i see person and company card layout read only (#293)

* feature: create boardCard component

* test: add snapshot for BoardCards

* feature: fix typename of company

* feature: add max width on BoardItem

* feature: design CompanyBoardCard

* feature: Add People picture and name

* feature: design PeopleCard

* feature: fix font weight for card header

* test: fix storybook for board

* test: add unit test for column optimistic renderer

front/src/modules/opportunities/components/Board.tsx

@@ -61,9 +61,7 @@ export const Board = ({ initialBoard, items }: BoardProps) => {
                     >
                       {(draggableProvided) => (
                         <BoardItem draggableProvided={draggableProvided}>
-                          <BoardCard>
-                            {items[itemKey]?.id || 'Item not found'}
-                          </BoardCard>
+                          <BoardCard item={items[itemKey]} />
                         </BoardItem>
                       )}
                     </Draggable>

front/src/modules/opportunities/components/BoardCard.tsx

@@ -1,5 +1,122 @@
 import styled from '@emotion/styled';
 
-export const BoardCard = styled.p`
+import { Company, Person } from '../../../generated/graphql';
+import CompanyChip from '../../companies/components/CompanyChip';
+import PersonPlaceholder from '../../people/components/person-placeholder.png';
+import { PersonChip } from '../../people/components/PersonChip';
+import {
+  IconBuilding,
+  IconCalendar,
+  IconMail,
+  IconPhone,
+  IconSum,
+  IconUser,
+} from '../../ui/icons';
+import { getLogoUrlFromDomainName, humanReadableDate } from '../../utils/utils';
+
+const StyledBoardCard = styled.div`
   color: ${(props) => props.theme.text80};
 `;
+
+const StyledBoardCardHeader = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  font-weight: ${(props) => props.theme.fontWeightBold};
+  height: 24px;
+  padding: ${(props) => props.theme.spacing(2)};
+  img {
+    height: 16px;
+    margin-right: ${(props) => props.theme.spacing(2)};
+    object-fit: cover;
+    width: 16px;
+  }
+`;
+const StyledBoardCardBody = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${(props) => props.theme.spacing(2)};
+  padding: ${(props) => props.theme.spacing(2)};
+  span {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    svg {
+      color: ${(props) => props.theme.text40};
+      margin-right: ${(props) => props.theme.spacing(2)};
+    }
+  }
+`;
+
+export const BoardCard = ({ item }: { item: Person | Company }) => {
+  if (item.__typename === 'Person') return <PersonBoardCard person={item} />;
+  if (item.__typename === 'Company') return <CompanyBoardCard company={item} />;
+  // @todo return card skeleton
+  return null;
+};
+
+const PersonBoardCard = ({ person }: { person: Person }) => {
+  const fullname = `${person.firstname} ${person.lastname}`;
+  return (
+    <StyledBoardCard>
+      <StyledBoardCardHeader>
+        <img
+          data-testid="person-chip-image"
+          src={PersonPlaceholder.toString()}
+          alt="person"
+        />
+        {fullname}
+      </StyledBoardCardHeader>
+      <StyledBoardCardBody>
+        <span>
+          <IconBuilding size={16} />
+          <CompanyChip
+            name={person.company?.name || ''}
+            picture={getLogoUrlFromDomainName(
+              person.company?.domainName,
+            ).toString()}
+          />
+        </span>
+        <span>
+          <IconMail size={16} />
+          {person.email}
+        </span>
+        <span>
+          <IconPhone size={16} />
+          {person.phone}
+        </span>
+        <span>
+          <IconCalendar size={16} />
+          {humanReadableDate(new Date(person.createdAt as string))}
+        </span>
+      </StyledBoardCardBody>
+    </StyledBoardCard>
+  );
+};
+
+const CompanyBoardCard = ({ company }: { company: Company }) => {
+  return (
+    <StyledBoardCard>
+      <StyledBoardCardHeader>
+        <img
+          src={getLogoUrlFromDomainName(company.domainName).toString()}
+          alt={`${company.name}-company-logo`}
+        />
+        <span>{company.name}</span>
+      </StyledBoardCardHeader>
+      <StyledBoardCardBody>
+        <span>
+          <IconUser size={16} />
+          <PersonChip name={company.accountOwner?.displayName || ''} />
+        </span>
+        <span>
+          <IconSum size={16} /> {company.employees}
+        </span>
+        <span>
+          <IconCalendar size={16} />
+          {humanReadableDate(new Date(company.createdAt as string))}
+        </span>
+      </StyledBoardCardBody>
+    </StyledBoardCard>
+  );
+};

front/src/modules/opportunities/components/__stories__/BoardCard.stories.tsx

@@ -0,0 +1,36 @@
+import { StrictMode } from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Company, Person } from '../../../../generated/graphql';
+import { mockedCompaniesData } from '../../../../testing/mock-data/companies';
+import { mockedPeopleData } from '../../../../testing/mock-data/people';
+import { BoardItem } from '../../../ui/components/board/BoardItem';
+import { BoardCard } from '../BoardCard';
+
+const meta: Meta<typeof BoardCard> = {
+  title: 'UI/Board/BoardCard',
+  component: BoardCard,
+};
+
+export default meta;
+type Story = StoryObj<typeof BoardCard>;
+
+export const CompanyBoardCard: Story = {
+  render: () => (
+    <StrictMode>
+      <BoardItem draggableProvided={undefined}>
+        <BoardCard item={mockedCompaniesData[0] as Company} />
+      </BoardItem>
+    </StrictMode>
+  ),
+};
+
+export const PersonBoardCard: Story = {
+  render: () => (
+    <StrictMode>
+      <BoardItem draggableProvided={undefined}>
+        <BoardCard item={mockedPeopleData[0] as Person} />
+      </BoardItem>
+    </StrictMode>
+  ),
+};

front/src/modules/opportunities/components/__stories__/mock-data.ts

@@ -1,16 +1,22 @@
+import { mockedCompaniesData } from '../../../../testing/mock-data/companies';
+import { mockedPeopleData } from '../../../../testing/mock-data/people';
 import { Column, Items } from '../../../ui/components/board/Board';
 
 export const items: Items = {
-  'item-1': { id: 'item-1', content: 'Item 1' },
-  'item-2': { id: 'item-2', content: 'Item 2' },
-  'item-3': { id: 'item-3', content: 'Item 3' },
-  'item-4': { id: 'item-4', content: 'Item 4' },
-  'item-5': { id: 'item-5', content: 'Item 5' },
-  'item-6': { id: 'item-6', content: 'Item 6' },
+  'item-1': mockedCompaniesData[0],
+  'item-2': mockedCompaniesData[1],
+  'item-3': mockedCompaniesData[2],
+  'item-4': mockedPeopleData[0],
+  'item-5': mockedPeopleData[1],
+  'item-6': mockedPeopleData[2],
 };
+
 for (let i = 7; i <= 20; i++) {
   const key = `item-${i}`;
-  items[key] = { id: key, content: `Item ${i}` };
+  items[key] = {
+    ...mockedCompaniesData[i % mockedCompaniesData.length],
+    id: key,
+  };
 }
 
 export const initialBoard = [