Merge pull request #27 from AplinkosMinisterija/tools_groups_fixes

Tools groups fixes

src/App.tsx

@@ -119,6 +119,7 @@ function App() {
 
   useEffect(() => {
     if (!isInvalidProfile) return;
+
     cookies.remove('profileId', { path: '/' });
 
     if (!navigateRef?.current) return;
@@ -129,6 +130,7 @@ function App() {
   if (isLoading) {
     return <LoaderComponent />;
   }
+
   return (
     <>
       <Routes>

src/components/buttons/Button.tsx

@@ -111,6 +111,7 @@ const StyledButton = styled.button<{
     background-color: ${({ variant, theme }) => theme.colors.hover[variant]};
   }
   cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  opacity: ${({ disabled }) => (disabled ? 0.6 : 1)};
   width: 100%;
 `;
 

src/components/buttons/FishingLocationButton.tsx

@@ -10,7 +10,19 @@ export enum Variant {
   GREY = 'GREY',
 }
 
-const FishingLocationButton = ({ variant = Variant.GREY, title, image, onClick }: any) => {
+interface FishingLocationButtonProps {
+  title: string;
+  image: string;
+  onClick: () => void;
+  variant?: Variant;
+}
+
+const FishingLocationButton = ({
+  variant = Variant.GREY,
+  title,
+  image,
+  onClick,
+}: FishingLocationButtonProps) => {
   return (
     <Container $variant={variant} onClick={onClick}>
       <Image src={image} />

src/components/buttons/LargeButton.tsx

@@ -10,7 +10,21 @@ enum Variant {
   GREY = 'GREY',
 }
 
-const LargeButton = ({ variant = Variant.GREY, title, subtitle, buttonLabel, onClick }: any) => {
+interface LargeButtonProps {
+  title: string;
+  subtitle: string;
+  buttonLabel: string;
+  onClick: () => void;
+  variant?: Variant;
+}
+
+const LargeButton = ({
+  variant = Variant.GREY,
+  title,
+  subtitle,
+  buttonLabel,
+  onClick,
+}: LargeButtonProps) => {
   return (
     <Container $variant={variant} onClick={onClick}>
       <Title dangerouslySetInnerHTML={{ __html: title }} />

src/components/buttons/MenuButton.tsx

@@ -1,34 +1,37 @@
 import styled from 'styled-components';
 import Icon, { IconName } from '../other/Icon';
-
-const MenuButton = ({ label, icon, onClick, isActive }: any) => {
+interface MenuButtonProps {
+  label: string;
+  icon?: IconName;
+  onClick: () => void;
+  isActive?: boolean;
+}
+const MenuButton = ({ label, icon, onClick, isActive = false }: MenuButtonProps) => {
   //TODO: disable option
   return (
-    <Container isActive={isActive} onClick={onClick}>
-      <IconContainer>
-        <StyledIcon name={icon} />
-      </IconContainer>
+    <Container $isActive={isActive} onClick={onClick}>
+      <IconContainer>{icon ? <StyledIcon name={icon} /> : null}</IconContainer>
       {label}
       <Icon name={IconName.right} />
     </Container>
   );
 };
-const Container = styled.div<{ isActive: boolean }>`
+const Container = styled.div<{ $isActive: boolean }>`
   grid-template-columns: 48px 1fr 32px;
   align-items: center;
   font-size: 2rem;
   font-weight: 600;
   background-color: ${({ theme }) => theme.colors.largeButton.GREY};
-  border: 1px solid var(--transparent-color);
+  border: 1px solid transparent;
   border-radius: 12px;
   padding: 16px;
   margin-bottom: 16px;
   display: grid;
   text-decoration: none;
   gap: 12px;
 
-  ${({ isActive, theme }) =>
-    isActive &&
+  ${({ $isActive, theme }) =>
+    $isActive &&
     `
     background-color: #f5f6fe;
     border: 1px solid ${theme.colors.primary};

src/components/buttons/SwitchButton.tsx

@@ -1,11 +1,21 @@
 import styled from 'styled-components';
-
-const SwitchButton = ({ options, onChange, value, className }: any) => {
+import { FishingToolsType } from '../../utils';
+interface SwitchButtonProps {
+  options: any[];
+  onChange: (value: any) => void;
+  value: any;
+  className?: string;
+}
+const SwitchButton = ({ options, onChange, value, className = '' }: SwitchButtonProps) => {
   return (
     <Container className={className}>
       <Content $numberOfColumns={options.length}>
-        {options.map((option: any) => (
-          <Button onClick={() => onChange(option.value)} $selected={option.value === value}>
+        {options.map((option: any, index: number) => (
+          <Button
+            key={`switch_btn_${index}`}
+            onClick={() => onChange(option.value)}
+            $selected={option.value === value}
+          >
             {option.label}
           </Button>
         ))}
@@ -15,7 +25,6 @@ const SwitchButton = ({ options, onChange, value, className }: any) => {
 };
 
 const Container = styled.div`
-  padding: 2px 0;
   width: 100%;
   padding: 32px 0;
 `;
@@ -26,7 +35,7 @@ const Content = styled.div<{ $numberOfColumns?: number }>`
     Array($numberOfColumns || 2)
       .fill('1fr')
       .join(' ')};
-  background-color: ${({ theme }) => theme.colors.background.primary};
+  background-color: ${({ theme }) => theme.colors.cardBackground.primary};
   padding: 4px;
   border-radius: 99px;
 `;

src/components/buttons/ToolTypeButton.tsx

@@ -1,6 +1,18 @@
 import styled from 'styled-components';
-
-const ToolTypeButton = ({ label, icon, active, onClick, disabled }: any) => {
+interface ToolTypeButtonProps {
+  label: string;
+  icon: string;
+  onClick: () => void;
+  disabled?: boolean;
+  active?: boolean;
+}
+const ToolTypeButton = ({
+  label,
+  icon,
+  onClick,
+  disabled = false,
+  active = false,
+}: ToolTypeButtonProps) => {
   return (
     <Container disabled={disabled} onClick={() => !disabled && onClick()} $active={active}>
       <StyledImage src={icon} $active={active} />

src/components/cards/FishingCard.tsx

@@ -0,0 +1,186 @@
+import styled from 'styled-components';
+import { format, differenceInHours, differenceInMinutes } from 'date-fns';
+import Icon, { IconName } from '../other/Icon';
+const formatDuration = (startDate?: string, endDate?: string) => {
+  if (!startDate || !endDate) {
+    return '';
+  }
+  const durationInMinutes = differenceInMinutes(new Date(endDate), new Date(startDate));
+  const durationInHours = differenceInHours(new Date(endDate), new Date(startDate), {
+    roundingMethod: 'floor',
+  });
+  if (!durationInHours) {
+    return durationInMinutes + 'min.';
+  }
+  const minutes = durationInMinutes - durationInHours * 60;
+  return durationInHours + 'val. ' + minutes + 'min.';
+};
+
+const Months = [
+  'Sausio',
+  'Vasarion',
+  'Kovo',
+  'Balandžio',
+  'Gegužės',
+  'Birželio',
+  'Liepos',
+  'Rugpjūčio',
+  'Rugsėjo',
+  'Spalio',
+  'Lapkričio',
+  'Gruodžio',
+];
+
+const getWeightString = (fishOnBoat: any, fishOnShore: any) => {
+  if (!fishOnShore && !fishOnBoat) {
+    return '';
+  }
+  if (fishOnShore) {
+    const weightOnShore =
+      Object.values(fishOnShore.data)
+        .flat()
+        .reduce((acc: any, current: any) => acc + current, 0) || '';
+    return weightOnShore ? `${weightOnShore}kg` : '';
+  }
+  const weightOnBoat =
+    Object.values(fishOnBoat || {})
+      ?.map((e: any) => Object.values(e.data))
+      .flat()
+      .reduce((acc: any, current: any) => acc + current, 0) || '';
+  return weightOnBoat ? `~${weightOnBoat}kg` : '';
+};
+
+const FishingCard = ({ startDate, endDate, fishOnBoat, fishOnShore, onClick }: any) => {
+  const month: string = startDate ? format(new Date(startDate), 'M') : '';
+  const dayOfMonth = startDate ? format(new Date(startDate), 'd') : '';
+  const day = `${Months[Number(month)]} ${dayOfMonth}d.`;
+
+  const startHours = startDate ? format(new Date(startDate), 'HH:mm') : '';
+  const endHours = endDate ? format(new Date(endDate), 'HH:mm') : 'Žvejojama';
+  const active = !endDate && startDate;
+
+  const weight = getWeightString(fishOnBoat, fishOnShore);
+
+  return (
+    <Container $active={active} onClick={onClick}>
+      <Row>
+        <FishingDate>{day}</FishingDate>
+        {weight && (
+          <FishingWeight>
+            <Icon name={IconName.fish} />
+            {weight}
+          </FishingWeight>
+        )}
+      </Row>
+      <MiddleRow>
+        <Circle $active={active} />
+        <Line $active={active} />
+        <Time>
+          <StyledImage src="/ship.svg" />
+          {formatDuration(startDate, endDate)}
+        </Time>
+        <Line $active={active} />
+        <Circle $active={active} />
+      </MiddleRow>
+
+      <Row>
+        {startDate && <CellLeft>{startHours}</CellLeft>}
+        {endDate && <CellRight>{endHours}</CellRight>}
+      </Row>
+    </Container>
+  );
+};
+export default FishingCard;
+
+const Container = styled.div<{ $active: boolean }>`
+  width: 100%;
+  background-color: ${({ theme, $active }) =>
+    $active ? theme.colors.largeButton.FLORAL_WHITE : theme.colors.largeButton.GREY};
+  border-radius: 12px;
+  padding: 16px;
+  margin-bottom: 16px;
+  color: grey;
+  display: grid;
+  text-decoration: none;
+`;
+
+const Row = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+`;
+
+const MiddleRow = styled.div`
+  display: grid;
+  grid-template-columns: 10px 1fr auto 1fr 10px;
+  align-items: center;
+  margin-top: 12px;
+`;
+
+const Circle = styled.div<{ $active: boolean }>`
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background-color: white;
+  border: 2px solid
+    ${({ theme, $active }) => ($active ? theme.colors.yellowDarker : theme.colors.greyDarker)};
+`;
+
+const Line = styled.div<{ $active: boolean }>`
+  height: 2px;
+  width: 100%;
+  background-color: ${({ theme, $active }) =>
+    $active ? theme.colors.yellowDarker : theme.colors.greyDarker};
+`;
+
+const Time = styled.div`
+  display: flex;
+  margin: 0 8px;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  font-weight: 600;
+  font-size: 12px;
+  color: ${({ theme }) => theme.colors.text.secondary};
+`;
+
+const StyledImage = styled.img`
+  width: 1.6rem;
+  height: 1.6rem;
+  fill: none;
+  stroke: currentcolor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  filter: invert(33%) sepia(0%) saturate(783%) hue-rotate(206deg) brightness(88%) contrast(86%);
+`;
+const FishingDate = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  font-size: 20px;
+  font-weight: 700;
+  color: ${({ theme }) => theme.colors.text.primary};
+`;
+
+const FishingWeight = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  font-size: 20px;
+  font-weight: 700;
+  align-items: center;
+  color: ${({ theme }) => theme.colors.text.primary};
+  gap: 4px;
+`;
+
+const CellLeft = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  font-size: 1.4rem;
+  color: ${({ theme }) => theme.colors.text.secondary};
+`;
+const CellRight = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  font-size: 1.4rem;
+  color: ${({ theme }) => theme.colors.text.secondary};
+`;