@autobusal/common 0.0.40 → 1.0.0

package/IpLogs/View.tsx

@@ -0,0 +1,48 @@
+import { TFunction } from 'i18next';
+import { Table, Row } from '../index';
+import { Container } from './styles';
+import { GetLogs } from './services';
+
+interface Props {
+  id: number
+  page: number
+  type: 'admins' | 'agents' | 'financers' | 'operators' | 'visitors'
+  t: TFunction<'common'>
+}
+
+const View = ({ id, page, type, t }: Props): JSX.Element => {
+  const { data, isLoading, isFetching } = GetLogs(id, type, page);
+
+  const rows = data?.data.map(item => (
+    <Row
+      key={ item.id }
+      id={ item.id }
+      data={ [
+        item.ip,
+        item.created_at
+      ] }
+    />
+  ));
+
+  return (
+    <Container>
+      <Table
+        url={ `/admin/${ type }/manage/${ id }` }
+        columns={ [{
+          name: t('ip_logs.ip', { ns: 'common' }),
+          width: 80
+        }, {
+          name: t('ip_logs.date', { ns: 'common' }),
+          width: 20
+        }] }
+        rows={ rows }
+        pages={ data }
+        loading={ isLoading }
+        fetching={ isFetching }
+        t={ t }
+      />
+    </Container>
+  );
+};
+
+export default View;

package/IpLogs/services.ts

@@ -0,0 +1,27 @@
+import { useQuery, UseQueryResult } from '@tanstack/react-query';
+import { apiClient } from '@autobusal/providers';
+import { LogData } from '@autobusal/providers/types/users';
+import { PaginationData } from '@autobusal/providers/types/pagination';
+
+export const GetLogs = (id: number, type: string, page: number): UseQueryResult<PaginationData<LogData>> => (
+  useQuery({
+    queryKey: ['ip-logs', { id, type, page }],
+    queryFn: async () => {
+      if (id === 0) {
+        return null;
+      }
+
+      return await apiClient
+        .get('/api/logs', {
+          params: {
+            id,
+            type,
+            page
+          }
+        })
+        .then(response => (
+          response.data
+        ))
+    }
+  })
+);

package/IpLogs/styles.ts

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  margin-top: 15px;
+`;
+
+export const NotAvailable = styled.div`
+  font-size: ${ props => props.theme.size.s };
+  color: ${ props => props.theme.font.info };
+`;

package/Loading/Loading.tsx

@@ -1,8 +1,7 @@
 import { SpinnerRoundFilled, SpinnerCircularFixed } from 'spinners-react';
-import { useSystemTheme } from '@autobusal/providers';
-import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
-import { ContainerGeneral, ContainerInline, ContainerParagraph } from './styles';
-import 'react-loading-skeleton/dist/skeleton.css';
+import { useSystemTheme } from '@autobusal/hooks';
+import Paragraph from './Paragraph';
+import { ContainerGeneral, ContainerInline, ContainerBoxMiddle, ContainerFull } from './styles';
 
 export const General = (): JSX.Element => {
   const theme = useSystemTheme();
@@ -21,7 +20,7 @@ export const General = (): JSX.Element => {
         : <SpinnerCircularFixed size={ options.size } color={ options.color } speed={ options.speed } thickness={ options.thickness } />
       }
     </ContainerGeneral>
-  )
+  );
 };
 
 interface InlineProps {
@@ -47,23 +46,29 @@ export const Inline = ({ text }: InlineProps): JSX.Element => {
   );
 };
 
-interface ParagraphProps {
+interface BoxProps {
   count?: number
 }
 
-export const Paragraph = ({ count = 3 }: ParagraphProps): JSX.Element => {
-  const theme = useSystemTheme();
+export const Box = ({ count = 3 }: BoxProps): JSX.Element => (
+  <>
+    <Paragraph isTitle />
 
-  const baseColor = theme === 'light' ? '#EBEBEB' : "#202020";
-  const highlightColor = theme === 'light' ? '#F5F5F5' : '#444444';
+    <div className="box">
+      <Paragraph count={ count } />
+    </div>
+  </>
+);
 
-  return (
-    <SkeletonTheme baseColor={ baseColor } highlightColor={ highlightColor }>
-      <ContainerParagraph>
-        <Skeleton count={ count - 1 } /> <br />
-        <Skeleton count={ count + 1 } /> <br />
-        <Skeleton count={ count } />
-      </ContainerParagraph>
-    </SkeletonTheme>
-  );
-};
+export const BoxMiddle = ({ count = 3 }: BoxProps): JSX.Element => (
+  <ContainerBoxMiddle className="box">
+    <Paragraph isTitle />
+    <Paragraph count={ count } />
+  </ContainerBoxMiddle>
+);
+
+export const GeneralFull = (): JSX.Element => (
+  <ContainerFull>
+    <General />
+  </ContainerFull>
+);

package/Loading/Paragraph.tsx

@@ -0,0 +1,62 @@
+import { useSystemTheme } from '@autobusal/hooks';
+import { getRandomNumber } from '@autobusal/utilities';
+import { ContainerParagraphs, ContainerParagraph, ItemParagraph } from './styles';
+
+interface Props {
+  count?: number
+  isTitle?: boolean
+}
+
+const Paragraph = ({ count = 3, isTitle }: Props): JSX.Element => {
+  const theme = useSystemTheme();
+
+  const color = theme === 'light' ? '#EBEBEB' : '#202020';
+
+  if (isTitle) {
+    return (
+      <h1>
+        <ItemParagraph
+          $color={ color }
+          $width={ 50 }
+          $height={ 27 }
+        />
+      </h1>
+    );
+  }
+
+  const paragraphs = getParagraphs(count, color);
+
+  return (
+    <ContainerParagraphs>
+      { paragraphs }
+    </ContainerParagraphs>
+  );
+};
+
+const getParagraphs = (count: number, color: string): JSX.Element[] => {
+  const paragraphs: JSX.Element[] = [];
+
+  for (let i = 1; i <= count; i++) {
+    const items: JSX.Element[] = [];
+
+    for (let j = 1; j <= 3; j++) {
+      items.push(
+        <ItemParagraph
+          key={ 100 * i + j }
+          $color={ color }
+          $width={ getRandomNumber(60, 100) }
+        />
+      );
+    }
+
+    paragraphs.push(
+      <ContainerParagraph key={ i }>
+        { items }
+      </ContainerParagraph>
+    );
+  }
+
+  return paragraphs;
+};
+
+export default Paragraph;

package/Loading/styles.ts

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { Middle } from '@layouts/Full/styles';
 
 export const ContainerGeneral = styled.div`
   width: 100%;
@@ -17,6 +18,38 @@ export const ContainerInline = styled.div`
   color: ${ props => props.theme.font.faded };
 `;
 
-export const ContainerParagraph = styled.div`
+export const ContainerParagraphs = styled.div`
+  display: flex;
+  gap: 20px;
+  flex-direction: column;
   padding: 15px 0;
+`;
+
+export const ContainerParagraph = styled.div`
+  display: flex;
+  gap: 9px;
+  flex-direction: column;
+`;
+
+export const ItemParagraph = styled.div<{
+  $color: string
+  $width: number
+  $height?: number
+}>`
+  width: ${ props => props.$width }%;
+  height: ${ props => props.$height ? props.$height : 11 }px;
+  background: ${ props => props.$color };
+  border-radius: 5px;
+`;
+
+export const ContainerBoxMiddle = styled(Middle)`
+  & > h1 {
+    margin-bottom: 15px;
+  }
+`;
+
+export const ContainerFull = styled.div`
+  flex: 1;
+  display: flex;
+  align-items: center;
 `;

package/Meta.tsx

@@ -4,7 +4,7 @@ interface Props {
   title: string
   keywords?: string
   description?: string
-  children: JSX.Element | JSX.Element[] | string | null | false | boolean
+  children: any
 }
 
 const Meta = ({ title, keywords, description, children }: Props): JSX.Element => (

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/Paragraph';
 import { Background, Container, Title, ButtonClose } from './styles';
 
 interface Props {

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 '@autobusal/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/Passengers/Passengers.tsx

@@ -2,8 +2,8 @@ import { useState, useEffect, useRef } from 'react';
 import { TFunction } from 'i18next';
 import { UseFormRegister, UseFormSetValue } from 'react-hook-form';
 import { useOutside } from '@autobusal/hooks';
-import getText from './utilities/getText';
 import Persons from './Persons';
+import { getText } from './utilities';
 import { Container } from './styles';
 
 interface Props {
@@ -28,8 +28,9 @@ const Passengers = ({ defaultAdults, defaultChildren, defaultBabies, t, refs, on
 
   useEffect(() => {
     const text = getText(adults, children, babies, t);
+
     setDisplay(text);
-  }, [adults, children, babies]);
+  }, [adults, children, babies, t]);
 
   useOutside(ref, () => setShow(false));
 
@@ -57,9 +58,9 @@ const Passengers = ({ defaultAdults, defaultChildren, defaultBabies, t, refs, on
 
       { show &&
         <Persons
-          adults={ adults }
-          children={ children }
-          babies={ babies }
+          adultsNo={ adults }
+          childrenNo={ children }
+          babiesNo={ babies }
           t={ t }
           onChange={ onChange }
         /> }

package/Passengers/Persons.tsx

@@ -3,20 +3,20 @@ import Person from './Person';
 import { Passengers } from './styles';
 
 interface Props {
-  adults: number
-  children: number
-  babies: number
+  adultsNo: number
+  childrenNo: number
+  babiesNo: number
   t: TFunction<'common'>
   onChange: (name: ('adults' | 'children' | 'babies'), amount: number) => void
 }
 
-const Persons = ({ adults, children, babies, t, onChange }: Props): JSX.Element => (
+const Persons = ({ adultsNo, childrenNo, babiesNo, t, onChange }: Props): JSX.Element => (
   <Passengers>
     <Person
       name="adults"
       title={ t('data.persons.adult.plural', { ns: 'common' }) }
       description={ t('data.persons.adult.description', { ns: 'common' }) }
-      amount={ adults }
+      amount={ adultsNo }
       onChange={ onChange }
     />
 
@@ -24,7 +24,7 @@ const Persons = ({ adults, children, babies, t, onChange }: Props): JSX.Element
       name="children"
       title={ t('data.persons.child.plural', { ns: 'common' }) }
       description={ t('data.persons.child.description', { ns: 'common' }) }
-      amount={ children }
+      amount={ childrenNo }
       onChange={ onChange }
     />
 
@@ -32,7 +32,7 @@ const Persons = ({ adults, children, babies, t, onChange }: Props): JSX.Element
       name="babies"
       title={ t('data.persons.baby.plural', { ns: 'common' }) }
       description={ t('data.persons.baby.description', { ns: 'common' }) }
-      amount={ babies }
+      amount={ babiesNo }
       onChange={ onChange }
     />
   </Passengers>

package/Passengers/{utilities/getText.ts → utilities.ts}

@@ -1,7 +1,7 @@
 import { TFunction } from 'i18next';
 
-const getText = (adults: number, children: number, babies: number, t: TFunction<'common'>): string => {
-  let final = [];
+export const getText = (adults: number, children: number, babies: number, t: TFunction<'common'>): string => {
+  const final = [];
 
   if (adults > 0) {
     final.push(`${ t('data.persons.adult.plural', { ns: 'common' }) }: ${ adults }`);
@@ -16,6 +16,4 @@ const getText = (adults: number, children: number, babies: number, t: TFunction<
   }
 
   return final.join(', ');
-};
-
-export default getText;
+};

package/Password/Password.tsx

@@ -2,17 +2,18 @@ import { useState } from 'react';
 import { TFunction } from 'i18next';
 import { UseFormRegister } from 'react-hook-form';
 import { AiFillEye, AiFillEyeInvisible } from 'react-icons/ai';
-import { validate } from '@autobusal/utilities';
+import { Validate } from '@autobusal/utilities';
 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/Password/styles.ts

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled from 'styled-components';
 
 export const Container = styled.div`
   position: relative;

package/Policy/services.ts

@@ -8,9 +8,7 @@ export const GetPolicy = (id: number): UseQueryResult<PolicyData> => (
     queryFn: async () => (
       await apiClient
         .get('/api/routes/policy', {
-          params: {
-            id
-          }
+          params: { id }
         })
         .then(response => (
           response.data

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,52 @@
+import { TFunction } from 'i18next';
+import { useForm } from 'react-hook-form';
+import { RiCheckFill } from 'react-icons/ri';
+import { Button } from '../index';
+import { Validate, Display } from '@autobusal/utilities';
+import { Success } from './styles';
+import { ReportForm } from './types';
+import { PostReport } from './services';
+
+interface Props {
+  type: string
+  t: TFunction<'common'> 
+}
+
+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,19 @@
+import { UseMutationResult, useMutation } from '@tanstack/react-query';
+import { apiClient } from '@autobusal/providers';
+import { ReportForm } from './types';
+
+export const PostReport = (type: string): UseMutationResult<void, Error, ReportForm, unknown> => (
+  useMutation({
+    mutationKey: ['operator-locations-move', { type }],
+    mutationFn: async (data: ReportForm) => (
+      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/Report/types.ts

@@ -0,0 +1,3 @@
+export interface ReportForm {
+  about: string
+}

package/RouteItem/styles.ts

@@ -1,6 +1,5 @@
 import styled, { css } from 'styled-components';
 import { Link } from 'react-router-dom';
-// import { Box } from '@layouts/styles';
 
 export const Container = styled.div`
   padding: 10px;

package/Seats/ChooseSeat.tsx

@@ -3,7 +3,7 @@ import { UseFormRegister } from 'react-hook-form';
 import { TFunction } from 'i18next';
 import { FaCheck } from 'react-icons/fa';
 import { MdEventSeat } from 'react-icons/md';
-import { validate } from '@autobusal/utilities';
+import { Validate } from '@autobusal/utilities';
 import Unavailable from './Unavailable';
 import Preview from './Preview';
 import { ButtonSeat } from './styles';
@@ -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 } />;
   }
 
@@ -61,7 +61,7 @@ const ChooseSeat = ({ name, type, defaultValue, bus, picked, validation, t, refs
         />
       ) }
 
-      <input type="hidden" defaultValue={ selected } { ...refs(name, validate(validation, t)) } />
+      <input type="hidden" defaultValue={ selected } { ...refs(name, Validate(validation, t)) } />
     </div>
   );
 };

package/Seats/Preview.tsx

@@ -1,6 +1,6 @@
 import { TFunction } from 'i18next';
 import { MdEventSeat } from 'react-icons/md';
-import { Modal } from '@autobusal/common';
+import { Modal } from '../index';
 import { Seats, SeatsInner, ButtonOccupy } from './styles';
 import { BusData } from '@autobusal/providers/types/buses';
 
@@ -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 }>