@autobusal/common 0.0.40 → 0.0.41

package/Loading/styles.ts

@@ -18,5 +18,14 @@ export const ContainerInline = styled.div`
 `;
 
 export const ContainerParagraph = styled.div`
+  display: flex;
+  gap: 5px;
   padding: 15px 0;
+`;
+
+export const ItemParagraph = styled.div<{ $color: string, $width: number }>`
+  flex-basis: ${ props => props.$width };
+  height: 5px;
+  background: ${ props => props.$color };
+  border-radius: 5px;
 `;

package/Modal/Modal.tsx

@@ -1,6 +1,6 @@
 import { AiOutlineClose } from 'react-icons/ai';
 import { useOverflow } from '@autobusal/hooks';
-import { Paragraph } from '../index';
+import { Paragraph } from '../Loading/Loading';
 import { Background, Container, Title, ButtonClose } from './styles';
 
 interface Props {
@@ -28,7 +28,8 @@ const Modal = ({ loading, width, title, content, onClose }: Props): JSX.Element
           </ButtonClose>
         </Title>
 
-        { loading ? <Paragraph /> : content }
+        {/* { loading ? <Paragraph /> : content } */}
+        <Paragraph />
       </Container>
     </>
   );

package/Pagination/Pagination.tsx

@@ -1,6 +1,6 @@
 import { TFunction } from 'i18next';
 import { Container, Left, Right, PageText, PageLink } from './styles';
-import { PaginationData } from './types';
+import { PaginationData } from '@modules/Providers/types/pagination';
 
 interface Props {
   pages: PaginationData<unknown>
@@ -24,6 +24,7 @@ const Pagination = ({ pages, t }: Props): (JSX.Element | null) => {
     <Container>
       <Left>
         { t('pagination.showing', {
+          ns: 'common',
           current: pages.current_page,
           max: pages.last_page
         }) }

package/Password/Password.tsx

@@ -8,11 +8,12 @@ import { Container } from './styles';
 interface Props {
   name: string
   tabIndex?: number
+  validation?: string
   t: TFunction<'common'>
   refs: UseFormRegister<any>
 }
 
-const Password = ({ name, tabIndex, t, refs }: Props): JSX.Element => {
+const Password = ({ name, tabIndex, validation, t, refs }: Props): JSX.Element => {
   const [ show, setShow ] = useState<boolean>(false);
 
   const toggle = (): void => {
@@ -21,7 +22,7 @@ const Password = ({ name, tabIndex, t, refs }: Props): JSX.Element => {
   
   return (
     <Container>
-      <input type={ show ? 'text' : 'password' } tabIndex={ tabIndex } { ...refs(name, validate('required|min_length:6|max_length:20', t)) } />
+      <input type={ show ? 'text' : 'password' } tabIndex={ tabIndex } { ...refs(name, validate(validation ?? '', t)) } />
 
       { show
         ? <AiFillEye onClick={ toggle } />

package/Report/Report.tsx

@@ -0,0 +1,39 @@
+import { useState } from 'react';
+import { TFunction } from 'i18next';
+import { MdOutlineBugReport } from 'react-icons/md';
+import Modal from '../Modal/Modal';
+import Send from './Send';
+import { Container, ButtonMore } from './styles';
+
+interface Props {
+  question: string
+  type: string
+  margin?: number
+  t: TFunction<'common'>
+}
+
+const Report = ({ question, type, margin, t }: Props): JSX.Element => {
+  const [ show, setShow ] = useState<boolean>(false);
+
+  return (
+    <Container $margin={ margin }>
+      <ButtonMore type="button" onClick={ () => setShow(true) }>
+        <MdOutlineBugReport />
+        { question }
+      </ButtonMore>
+
+      { show && (
+        <Modal
+          width={ 500 }
+          title={ t('report.title', { ns: 'common' }) }
+          content={
+            <Send type={ type } t={ t } />
+          }
+          onClose={ () => setShow(false) }
+        />
+      ) }
+    </Container>
+  );
+};
+
+export default Report;

package/Report/Send.tsx

@@ -0,0 +1,55 @@
+import { TFunction } from 'i18next';
+import { useForm } from 'react-hook-form';
+import { Button } from '@autobusal/common';
+import { RiCheckFill } from 'react-icons/ri';
+import { validate, display } from '@autobusal/utilities/form';
+import { Success } from './styles';
+import { PostReport } from './services';
+
+interface Props {
+  type: string
+  t: TFunction<'common'> 
+}
+
+interface ReportForm {
+  about: string
+}
+
+const Send = ({ type, t }: Props): JSX.Element => {
+  const { register, handleSubmit, formState: { errors } } = useForm<ReportForm>();
+
+  const { mutate: Send, isPending, isSuccess } = PostReport(type);
+
+  const onSubmit = (data: ReportForm): void => {
+    Send(data);
+  };
+
+  if (isSuccess) {
+    return (
+      <Success>
+        <RiCheckFill />
+        { t('report.sent', { ns: 'common' }) }
+      </Success>
+    );
+  }
+
+  return (
+    <form onSubmit={ handleSubmit(onSubmit) }>
+      <div className="row">
+        { t('report.explain', { ns: 'common' }) }
+
+        <textarea { ...register('about', validate('required|min_length:3', t)) } />
+
+        { display(errors.about) }
+      </div>
+
+      <Button
+        loading={ isPending }
+        type="submit"
+        text={ t('report.send', { ns: 'common' }) }
+      />
+    </form>
+  );
+};
+
+export default Send;

package/Report/services.ts

@@ -0,0 +1,18 @@
+import { UseMutationResult, useMutation } from '@tanstack/react-query';
+import { apiClient } from '@autobusal/providers';
+
+export const PostReport = (type: string): UseMutationResult<void> => (
+  useMutation({
+    mutationKey: ['operator-locations-move', { type }],
+    mutationFn: async (data: any) => (
+      await apiClient
+        .post('/api/reporting/send', {
+          ...data,
+          type
+        })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);

package/Report/styles.ts

@@ -0,0 +1,31 @@
+import styled, { css } from 'styled-components';
+
+export const Container = styled.div<{ $margin?: number }>`
+  display: flex;
+  ${ props => props.$margin && css<{ $margin?: number }>`
+    margin-top: ${ props => props.$margin };
+  ` }
+`;
+
+export const ButtonMore = styled.button`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: auto;
+  font-size: ${ props => props.theme.size.xs };
+  color: ${ props => props.theme.font.info };
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export const Success = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 25px 0;
+  font-weight: 700;
+  color: ${ props => props.theme.font.success };
+  font-size: ${ props => props.theme.size.l };
+`;

package/Seats/ChooseSeat.tsx

@@ -27,7 +27,7 @@ const ChooseSeat = ({ name, type, defaultValue, bus, picked, validation, t, refs
   const [ selected, setSelected ] = useState<number>(defaultValue ?? 0);
 
   // if we don't have a bus, we just show a notification
-  if (! bus.bus) {
+  if (!bus.bus) {
     return <Unavailable t={ t } />;
   }
 

package/Seats/Preview.tsx

@@ -9,7 +9,7 @@ interface Props {
   occupied: number[]
   picked: number[]
   selected: number
-  t: TFunction<'general'>
+  t: TFunction<'common'>
   onSelect: (seat: number, occupied: boolean) => void
   onClose: () => void
 }
@@ -38,7 +38,7 @@ const Preview = ({ bus, occupied, picked, selected, t, onSelect, onClose }: Prop
   return (
     <Modal
       width={ 1040 }
-      title={ t('seats.title', { bus: bus.name }) }
+      title={ t('seats.title', { ns: 'common', bus: bus.name }) }
       content={ (
         <Seats>
           <SeatsInner $image={ bus.image_url }>

package/Seats/styles.ts

@@ -87,46 +87,4 @@ export const TitleUnavailable = styled.div`
   align-items: center;
   font-weight: 700;
   font-size: ${ props => props.theme.size.s };
-`;
-
-// // @todo: finish adding a seat
-// // .choose-seats {
-// //   .bus-plan {
-// //     .bus-seat {
-// //       .remove {
-// //         position: absolute;
-// //         top: 0;
-// //         right: 0;
-// //         z-index: 1;
-// //         width: 20px;
-// //         height: 20px;
-// //         background-color: $red;
-// //         border-radius: $border-radius - 3;
-
-// //         svg {
-// //           margin: 1px auto 0;
-// //           font-size: $size-info;
-// //           color: $white;
-// //         }
-// //       }
-// //     }
-
-// //     .add-seat {
-// //       display: block;
-// //       position: absolute;
-// //       z-index: 5;
-// //       bottom: -58px;
-// //       width: 50px;
-// //       height: 38px;
-// //       text-align: center;
-// //       line-height: 32px;
-// //       color: $blue;
-// //       border: 3px solid $blue;
-// //       border-radius: 100px;
-
-// //       svg {
-// //         margin: 0;
-// //       }
-// //     }
-// //   }
-// // }
+`;

package/Table/Actions/Actions.tsx

@@ -0,0 +1,40 @@
+import { TFunction } from 'i18next';
+import { NavigateFunction } from 'react-router-dom';
+import Get from './Get';
+import { Container } from './styles';
+import { Td } from '../styles';
+
+interface Props {
+  id: number
+  url: string
+  urlWith?: string
+  available?: string[]
+  t: TFunction<'common'>
+  handlers?: any
+  navigate: NavigateFunction
+}
+
+const Actions = ({ id, url, urlWith, available, t, handlers, navigate }: Props): JSX.Element => {
+  const actions = available?.map((action, index) => (
+    <Get
+      key={ index }
+      id={ id }
+      url={ url }
+      urlWith={ urlWith }
+      type={ action }
+      t={ t }
+      handlers={ handlers }
+      navigate={ navigate }
+    />
+  ));
+
+  return (
+    <Td>
+      <Container>
+        { actions }
+      </Container>
+    </Td>
+  );
+};
+
+export default Actions;

package/Table/Actions/Get.tsx

@@ -0,0 +1,49 @@
+import { TFunction } from 'i18next';
+import { NavigateFunction } from 'react-router-dom';
+import Icon from './Icon';
+import { ButtonAction } from './styles';
+
+interface Props {
+  id: number
+  url: string
+  urlWith?: string
+  type: string
+  t: TFunction<'common'>
+  handlers?: any
+  navigate: NavigateFunction
+}
+
+const Get = ({ id, url, urlWith, type, t, handlers, navigate }: Props): (JSX.Element | null) => {
+  if (['create', 'search'].includes(type)) {
+    return null;
+  }
+
+  const onAskDeletion = (): void => {
+    // ask for the deletion of the object
+    if (window.confirm(t('table.confirm', { ns: 'common' }))) {
+      handlers.delete(id);
+    }
+  };
+
+  const onClick = (event: React.MouseEvent<HTMLButtonElement>): void => {
+    event.stopPropagation();
+
+    if (type === 'view' || type === 'update') {
+      navigate(`${ url }/manage/${ id }${ urlWith ? `?${ urlWith }` : '' }`);
+    } else if (type === 'delete') {
+      onAskDeletion();
+    } else {
+      if (handlers[type]) {
+        handlers[type](id);
+      }
+    }
+  };
+
+  return (
+    <ButtonAction $type={ type } onClick={ (event) => onClick(event) }>
+      <Icon type={ type } t={ t } />
+    </ButtonAction>
+  );
+};
+
+export default Get;

package/Table/Actions/Icon.tsx

@@ -0,0 +1,54 @@
+import { TFunction } from 'i18next';
+import { AiOutlineCheck, AiOutlineCloudDownload } from 'react-icons/ai';
+import { BiEditAlt, BiTransfer, BiTrash } from 'react-icons/bi';
+import { FaTrash } from 'react-icons/fa';
+import { GiMoneyStack } from 'react-icons/gi';
+import { IoDocumentLockOutline } from 'react-icons/io5';
+import { RiBusLine, RiEyeLine, RiLoginCircleLine } from 'react-icons/ri';
+
+interface Props {
+  type: string
+  t: TFunction<'common'>
+}
+
+const Icon = ({ type, t }: Props): (JSX.Element | null) => {
+  switch (type) {
+    case 'view':
+    case 'preview':
+      return <RiEyeLine title={ t('table.actions.view', { ns: 'common' }) } />;
+
+    case 'delete':
+      return <BiTrash title={ t('table.actions.delete', { ns: 'common' }) } />;
+
+    case 'login_as':
+      return <RiLoginCircleLine title={ t('table.actions.custom.login_as', { ns: 'common' }) } />;
+
+    case 'approve':
+      return <AiOutlineCheck title={ t('table.actions.custom.approve', { ns: 'common' }) } />;
+
+    case 'deny':
+      return <FaTrash title={ t('table.actions.custom.deny', { ns: 'common' }) } />;
+
+    case 'update':
+      return <BiEditAlt title={ t('table.actions.custom.update', { ns: 'common' }) } />;
+
+    case 'transactions':
+      return <BiTransfer title={ t('table.actions.custom.transactions', { ns: 'common' }) } />;
+
+    case 'comissions':
+      return <GiMoneyStack title={ t('table.actions.custom.comissions', { ns: 'common' }) }  />;
+
+    case 'download':
+      return <AiOutlineCloudDownload  title={ t('table.actions.custom.download', { ns: 'common' }) }  />;
+
+    case 'bus':
+      return <RiBusLine  title={ t('table.actions.custom.bus', { ns: 'common' }) }  />;
+
+    case 'douane':
+      return <IoDocumentLockOutline  title={ t('table.actions.custom.douane', { ns: 'common' }) }  />;
+  }
+
+  return null;
+};
+
+export default Icon;

package/Table/Actions/styles.ts

@@ -0,0 +1,22 @@
+import styled, { css } from 'styled-components';
+
+export const Container = styled.div`
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+`;
+
+export const ButtonAction = styled.button<{ $type: string }>`
+  display: flex;
+  align-items: center;
+  font-size: ${ props => props.theme.size.xxl };
+  color: ${ props => props.theme.font.info };
+
+  ${ props => (props.$type === 'delete' || props.$type === 'deny') && css`
+    color: ${ props => props.theme.font.error };
+  ` }
+
+  ${ props => props.$type === 'approve' && css`
+    color: ${ props => props.theme.font.success };
+  ` }
+`;

package/Table/Header/Header.tsx

@@ -0,0 +1,46 @@
+import { TFunction } from 'i18next';
+import Sort from './Sort';
+import { Container, Td, Column, Text } from './styles';
+import { ColumnData, SortingData } from '../types';
+import { getUrl } from '../browseUrl';
+
+interface Props {
+  url: string
+  data: ColumnData[]
+  sorting?: SortingData
+  t: TFunction<'common'>
+  actions?: string[]
+}
+
+const Header = ({ url, data, sorting, t, actions }: Props): JSX.Element => {
+  const params = getUrl();
+
+  const columns = data.map((item, index) => (
+    <Td key={ index } $width={ item.width }>
+      <Column>
+        { item.slug
+          ? <Sort item={ item } url={ url } params={ params } sorting={ sorting } />
+          : <Text>{ item.name }</Text>
+        }
+      </Column>
+    </Td>
+  ));
+
+  return (
+    <Container>
+      <tr>
+        { columns }
+
+        { (actions !== undefined && actions.length > 0) && (
+          <Td $width={ 10 }>
+            <Column>
+              <Text>{ t('table.options', { ns: 'common' }) }</Text>
+            </Column>
+          </Td>
+        ) }
+      </tr>
+    </Container>
+  );
+};
+
+export default Header;

package/Table/Header/Sort.tsx

@@ -0,0 +1,33 @@
+import { LinkHeader } from './styles';
+import { ColumnData, SortingData } from '../types';
+import { parseUrl } from '../browseUrl';
+import { BiSortDown, BiSortUp } from 'react-icons/bi';
+
+interface Props {
+  item: ColumnData
+  url: string
+  params: any
+  sorting?: SortingData
+}
+
+const Sort = ({ item, url, params, sorting }: Props): JSX.Element => {
+  const isCurrent = params.sort === item.slug || (params.sort === undefined && sorting?.slug === item.slug);
+
+  const order = params.order ?? (
+    isCurrent ? sorting?.order : (item.type === 'az' ? 'asc' : 'desc')
+  );
+
+  const sort = parseUrl({ page: 1, sort: item.slug, order: (
+    order === 'desc' ? 'asc' : 'desc'
+  ) });
+
+  return (
+    <LinkHeader to={ `${ url }${ sort }` }>
+      { item.name }
+
+      { isCurrent && (order == 'desc' ? <BiSortDown /> : <BiSortUp />) }
+    </LinkHeader>
+  );
+};
+
+export default Sort;

package/Table/Header/styles.ts

@@ -0,0 +1,48 @@
+import styled, { css } from 'styled-components';
+import { Link } from 'react-router-dom';
+
+export const Container = styled.thead`
+  background: ${ props => props.theme.background.neutral };
+
+  & > tr > td:first-of-type > div {
+    justify-content: left;
+  }
+`;
+
+interface TdData {
+  $width?: number
+}
+
+export const Td = styled.td<TdData>`
+  ${ props => props.$width && css<TdData>`
+    width: ${ props => props.$width }%;
+  ` }
+`;
+
+export const Column = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 16px;
+  color: ${ props => props.theme.font.faded };
+  font-weight: 700;
+  text-transform: uppercase;
+  font-size: ${ props => props.theme.size.xs };
+`;
+
+export const Text = styled.span`
+  cursor: default;
+`;
+
+export const LinkHeader = styled(Link)`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  color: ${ props => props.theme.font.faded };
+  transition: all 0.3s ease;
+
+  &:hover {
+    opacity: .7;
+    text-decoration: none;
+  }
+`;

package/Table/Paginate.tsx

@@ -0,0 +1,34 @@
+import { TFunction } from 'i18next';
+import Pagination from '../Pagination/Pagination';
+import { ContainerPaginate } from './styles';
+import { PaginationData } from '@modules/Providers/types/pagination';
+
+interface Props {
+  data?: PaginationData<any>
+  colLength: number
+  t: TFunction<'common'>
+}
+
+const Paginate = ({ data, colLength, t }: Props): (JSX.Element | null) => {
+  if (data === undefined) {
+    return null;
+  }
+
+  if (data.last_page < 2) {
+    return null;
+  }
+
+  return (
+    <tfoot>
+      <tr>
+        <td colSpan={ colLength }>
+          <ContainerPaginate>
+            <Pagination pages={ data } t={ t } />
+          </ContainerPaginate>
+        </td>
+      </tr>
+    </tfoot>
+  );
+};
+
+export default Paginate;

package/Table/Row.tsx

@@ -0,0 +1,20 @@
+import { Td } from './styles';
+
+interface Props {
+  id: number
+  data: any[]
+  withoutView?: boolean
+}
+
+// @todo: de scos id-ul din toate row-urile
+const Row = ({ id, data }: Props): JSX.Element[] => {
+  const columns = data.map((item, index) => (
+    <Td key={ index }>
+      { item }
+    </Td>
+  ));
+
+  return columns;
+};
+
+export default Row;

package/Table/Rows/Loading.tsx

@@ -0,0 +1,22 @@
+import { TFunction } from 'i18next';
+import { Inline } from '@autobusal/common';
+import { ContainerLoading } from './styles';
+
+interface Props {
+  length: number
+  t: TFunction<'common'>
+}
+
+const Loading = ({ length, t }: Props): JSX.Element => (
+  <tbody>
+    <tr>
+      <td colSpan={ length }>
+        <ContainerLoading>
+          <Inline text={ t('table.loading_data', { ns: 'common' }) } />
+        </ContainerLoading>
+      </td>
+    </tr>
+  </tbody>
+);
+
+export default Loading;