@autobusal/common 0.0.40 → 0.0.41

package/ApiDetails/ApiDetails.tsx

@@ -0,0 +1,50 @@
+import { useState } from 'react';
+import { TFunction } from 'i18next';
+import { IoKeySharp } from 'react-icons/io5';
+import { Button, Modal } from '@autobusal/common';
+import Content from './Content';
+
+interface Props {
+  id?: number
+  type: 'devpos'
+  t: TFunction<'common'>
+}
+
+const ApiDetails = ({ id, type, t }: Props): JSX.Element => {
+  const [ show, setShow ] = useState<boolean>(false);
+
+  if (id === undefined) {
+    return <>-</>;
+  }
+
+  return (
+    <>
+      <Button
+        type="button"
+        subtype="secondary"
+        size="small"
+        text={ (
+          <>
+            <IoKeySharp />
+            { t('api_details.manage', { ns: 'common' }) }
+          </>
+        ) }
+        noMargin
+        onClick={ () => setShow(true) }
+      />
+
+      { show && (
+        <Modal
+          width={ 700 }
+          title={ t('api_details.title', { ns: 'common', title: type.toUpperCase() }) }
+          content={
+            <Content id={ id } type={ type } t={ t } />
+          }
+          onClose={ () => setShow(false) }
+        />
+      ) }
+    </>
+  );
+};
+
+export default ApiDetails;

package/ApiDetails/Content.tsx

@@ -0,0 +1,44 @@
+import { TFunction } from 'i18next';
+import { Paragraph } from '@autobusal/common';
+import DevPos from './Devpos';
+import { GetSettings, PostSettings } from './services';
+
+interface Props {
+  id: number
+  type: 'devpos'
+  t: TFunction<'common'>
+}
+
+const Content = ({ id, type, t }: Props): JSX.Element => {
+  const { data, isFetching } = GetSettings(id, type);
+
+  const { mutate: SaveSettings, isPending } = PostSettings(id, type);
+
+  if (isFetching) {
+    return <Paragraph count={ 3 } />;
+  }
+
+  if (typeof data === 'string') {
+    return (
+      <div>{ t('api_details.unavailable', { ns: 'common' }) }</div>
+    );
+  }
+
+  const onSave = (data: any) => {
+    SaveSettings(data);
+  };
+
+  switch (type) {
+    case 'devpos':
+      return (
+        <DevPos
+          data={ data }
+          loading={ isPending }
+          t={ t }
+          onSave={ onSave }
+        />
+      );
+  }
+};
+
+export default Content;

package/ApiDetails/Devpos.tsx

@@ -0,0 +1,139 @@
+import { TFunction } from 'i18next';
+import { useForm } from 'react-hook-form';
+import { Button } from '@autobusal/common';
+import { display, validate } from '@autobusal/utilities/form';
+import { ApiDetailsData } from '@modules/Providers/types/users';
+import { DevPosForm } from './types';
+
+interface Props {
+  data?: ApiDetailsData
+  loading: boolean
+  t: TFunction<'common'>
+  onSave: (data: any) => void
+}
+
+const DevPos = ({ data, loading, t, onSave }: Props): JSX.Element => {
+  const { register, handleSubmit, formState: { errors } } = useForm<DevPosForm>();
+
+  const onClick = (): void => {
+    handleSubmit(onSave)();
+  };
+
+  const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      onClick();
+    }
+  };
+
+  return (
+    <>
+      <div className="column">
+        <div className="row">
+          { t('api_details.devpos.business_code', { ns: 'common' }) }
+
+          <input type="text" defaultValue={ data?.business_code } { ...register('business_code', validate('required|min_length:2', t)) } onKeyDown={ onKeyDown } />
+
+          { display(errors.business_code) }
+        </div>
+
+        <div className="row">
+          { t('api_details.devpos.operator_code', { ns: 'common' }) }
+
+          <input type="text" defaultValue={ data?.operator_code } { ...register('operator_code', validate('required|min_length:2', t)) } onKeyDown={ onKeyDown } />
+
+          { display(errors.operator_code) }
+        </div>
+      </div>
+
+      <div className="column">
+        <div className="row">
+          { t('api_details.devpos.nuis', { ns: 'common' }) }
+
+          <input type="text" defaultValue={ data?.nuis } { ...register('nuis', validate('required|min_length:2', t)) } onKeyDown={ onKeyDown } />
+
+          { display(errors.nuis) }
+        </div>
+
+        <div className="row">
+          { t('api_details.devpos.fiscalization_number', { ns: 'common' }) }
+
+          <input type="text" defaultValue={ data?.fiscalization_number } { ...register('fiscalization_number', validate('required|min_length:2', t)) } onKeyDown={ onKeyDown } />
+
+          { display(errors.fiscalization_number) }
+        </div>
+      </div>
+
+      <div className="column">
+        <div className="row">
+          { t('api_details.devpos.username', { ns: 'common' }) }
+
+          <input type="text" defaultValue={ data?.username } { ...register('username', validate('required|min_length:2', t)) } onKeyDown={ onKeyDown } />
+
+          { display(errors.username) }
+        </div>
+
+        <div className="row">
+          { t('api_details.devpos.password', { ns: 'common' }) }
+
+          <input type="text" defaultValue={ data?.password } { ...register('password', validate('required|min_length:2', t)) } onKeyDown={ onKeyDown } />
+
+          { display(errors.password) }
+        </div>
+      </div>
+
+      <div className="row">
+        { t('api_details.devpos.bank_name', { ns: 'common' }) }
+
+        <input type="text" defaultValue={ data?.bank_name } { ...register('bank_name', validate('required|min_length:2', t)) } onKeyDown={ onKeyDown } />
+
+        { display(errors.bank_name) }
+      </div>
+
+      <div className="column">
+        <div className="row">
+          { t('api_details.devpos.bank_swift', { ns: 'common' }) }
+
+          <input type="text" defaultValue={ data?.bank_swift } { ...register('bank_swift', validate('required|min_length:2', t)) } onKeyDown={ onKeyDown } />
+
+          { display(errors.bank_swift) }
+        </div>
+
+        <div className="row">
+          { t('api_details.devpos.bank_account', { ns: 'common' }) }
+
+          <input type="text" defaultValue={ data?.bank_account } { ...register('bank_account', validate('required|min_length:2', t)) } onKeyDown={ onKeyDown } />
+
+          { display(errors.bank_account) }
+        </div>
+      </div>
+
+      <div className="column">
+        <div className="row">
+          { t('api_details.devpos.bank_address', { ns: 'common' }) }
+
+          <input type="text" defaultValue={ data?.bank_address } { ...register('bank_address', validate('required|min_length:2', t)) } onKeyDown={ onKeyDown } />
+
+          { display(errors.bank_address) }
+        </div>
+        
+        <div className="row">
+          { t('api_details.devpos.bank_city', { ns: 'common' }) }
+
+          <input type="text" defaultValue={ data?.bank_city } { ...register('bank_city', validate('required|min_length:2', t)) } onKeyDown={ onKeyDown } />
+
+          { display(errors.bank_city) }
+        </div>
+      </div>
+
+      <Button
+        type="button"
+        loading={ loading }
+        text={ t('api_details.save', { ns: 'common' }) }
+        onClick={ onClick }
+      />
+    </>
+  );
+};
+
+export default DevPos;

package/ApiDetails/services.ts

@@ -0,0 +1,38 @@
+import { useQuery, UseQueryResult, useMutation, UseMutationResult } from '@tanstack/react-query';
+import { apiClient } from '@autobusal/providers';
+import { ApiDetailsData } from '@modules/Providers/types/users';
+
+export const GetSettings = (id: number, type: string): UseQueryResult<ApiDetailsData | string> => (
+  useQuery({
+    queryKey: ['apidetails-get-settings', { id, type }],
+    queryFn: async () => (
+      await apiClient
+        .get('/api/api_details/admin/get', {
+          params: {
+            id,
+            type
+          }
+        })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);
+
+export const PostSettings = (id: number, type: string): UseMutationResult<void> => (
+  useMutation({
+    mutationKey: ['apidetails-update-settings'],
+    mutationFn: async (data: any) => (
+      await apiClient
+        .post('/api/api_details/admin/update', {
+          ...data,
+          id,
+          type
+        })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);

package/ApiDetails/types.ts

@@ -0,0 +1,13 @@
+export interface DevPosForm {
+  business_code: string
+  operator_code: string
+  nuis: string
+  fiscalization_number: string
+  username: string
+  password: string
+  bank_name: string
+  bank_swift: string
+  bank_account: string
+  bank_address: string
+  bank_city: string
+}

package/Avatar.tsx

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+import { OperatorData } from '@modules/Providers/types/operators';
+import { AgentData } from '@modules/Providers/types/agents';
+
+interface Props {
+  display?: OperatorData | AgentData
+}
+
+const Avatar = ({ display }: Props): JSX.Element => (
+  <Container>
+    { display?.logo_url !== '' && <img src={ display?.logo_url } />}
+    { display?.company }
+  </Container>
+);
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+
+  & > img {
+    display: block;
+    width: 80px;
+    border-radius: ${ props => props.theme.borderRadius };
+  }
+`;
+
+export default Avatar;

package/BackTo.tsx

@@ -15,21 +15,45 @@ const LinkStyled = styled(Link)`
   padding: 4px 12px;
   font-size: calc(${ props => props.theme.size.info } - 1px);
   text-transform: uppercase;
-  background: ${ props => props.theme.neutral };
+  background: ${ props => props.theme.foreground.normal };
   border-radius: ${ props => props.theme.borderRadius };
+  box-shadow: ${ props => props.theme.boxShadow };
   transition: all 0.3s ease;
 
   &:hover {
+    opacity: .8;
     text-decoration: none;
-    background: ${ props => props.theme.primaryTransparent };
   }
 `;
 
-const BackTo = ({ to, t }: Props): JSX.Element => (
+export const BackTo = ({ to, t }: Props): JSX.Element => (
   <LinkStyled to={ to }>
     <BiChevronLeftCircle />
     { t('back', { ns: 'common' }) }
   </LinkStyled>
 );
 
-export default BackTo;
+interface TitleProps {
+  title: string
+  to: string
+  t: TFunction<'common'>
+}
+
+const ContainerTitle = styled.div`
+  display: flex;
+  gap: 15px;
+  align-items: center;
+  margin-bottom: 20px;
+
+  & > h1 {
+    margin-bottom: 0;
+  }
+`;
+
+export const BackWithTitle = ({ title, to, t }: TitleProps): JSX.Element => (
+  <ContainerTitle>
+    <BackTo to={ to } t={ t } />
+
+    <h1>{ title }</h1>
+  </ContainerTitle>
+);

package/ContactInfo/ContactInfo.tsx

@@ -0,0 +1,40 @@
+import { TFunction } from 'i18next';
+import { BiTransfer } from 'react-icons/bi';
+import { RiMoneyEuroCircleFill, RiPhoneLine } from 'react-icons/ri';
+import { Container, Funds, LinkMore } from './styles';
+
+interface Props {
+  item: any
+  t: TFunction<'common'>
+}
+
+const ContactInfo = ({ item, t }: Props): JSX.Element => {
+  const onClick = (event: React.MouseEvent<HTMLAnchorElement>): void => {
+    event.stopPropagation();
+  };
+
+  return (
+    <Container>
+      { item.funds_display && <Funds>{ item.funds_display }</Funds> }
+
+      { item.mobile && (
+        <LinkMore to={ `tel:${ item.mobile }` } onClick={ (event) => onClick(event) }>
+          <RiPhoneLine />
+          { item.mobile }
+        </LinkMore>
+      ) }
+
+      <LinkMore to={ `/admin/funds/manage/${ item.user.id }` } onClick={ (event) => onClick(event) }>
+        <RiMoneyEuroCircleFill />
+        { t('contact_info.add_funds', { ns: 'common' }) }
+      </LinkMore>
+
+      <LinkMore to={ `/account/transactions?id=${ item.user.id }` } onClick={ (event) => onClick(event) }>
+        <BiTransfer />
+        { t('contact_info.view_transactions', { ns: 'common' }) }
+      </LinkMore>
+    </Container>
+  );
+};
+
+export default ContactInfo;

package/ContactInfo/styles.ts

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+`;
+
+export const Funds = styled.div`
+  font-weight: 700;
+  color: ${ props => props.theme.font.info };
+`;
+
+export const LinkMore = styled(Link)`
+  align-self: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  padding: 2px 5px;
+  font-weight: 700;
+  font-size: ${ props => props.theme.size.xs };
+  border: 1px solid ${ props => props.theme.primary.normal };
+  border-radius: ${ props => props.theme.borderRadius };
+  transition: all 0.3s ease;
+
+  &:hover {
+    text-decoration: none;
+    color: ${ props => props.theme.primary.contrast };
+    background: ${ props => props.theme.primary.normal };
+  }
+`;

package/File/File.tsx

@@ -11,11 +11,12 @@ interface Props {
   name: string
   value?: string
   validation?: string
+  multiple?: boolean
   t: TFunction<'comon'>
   refs: UseFormRegister<any>
 }
 
-const File = ({ name, value, validation, t, refs }: Props): JSX.Element => {
+const File = ({ name, value, validation, multiple, t, refs }: Props): JSX.Element => {
   const [ uploaded, setUploaded ] = useState<boolean>(false);
   const [ preview, setPreview ] = useState<boolean>(false);
 
@@ -38,6 +39,8 @@ const File = ({ name, value, validation, t, refs }: Props): JSX.Element => {
     }
   };
 
+  const type = multiple ? 'multiple' : 'single';
+
   return (
     <>
       <Container>
@@ -45,6 +48,7 @@ const File = ({ name, value, validation, t, refs }: Props): JSX.Element => {
           { ...rest }
           type="file"
           name={ name }
+          multiple={ multiple }
           style={{ display: 'none' }}
           ref={ (e) => {
             ref(e);
@@ -57,8 +61,8 @@ const File = ({ name, value, validation, t, refs }: Props): JSX.Element => {
           size="small"
           text={
             uploaded
-              ? <><HiCheck /> { t('file.done', { ns: 'common' }) }</>
-              : <><HiOutlineCloudUpload /> { t('file.ready', { ns: 'common' }) }</>
+              ? <><HiCheck /> { t(`file.${ type }.done`, { ns: 'common' }) }</>
+              : <><HiOutlineCloudUpload /> { t(`file.${ type }.ready`, { ns: 'common' }) }</>
           }
           noMargin
           onClick={ onClick }

package/IpLogs/IpLogs.tsx

@@ -0,0 +1,47 @@
+import { TFunction } from 'i18next';
+import { useState } from 'react';
+import { AiOutlineLogin } from 'react-icons/ai';
+import { Button } from '@autobusal/common';
+import View from './View';
+import { NotAvailable } from './styles';
+
+interface Props {
+  id: number
+  page: number
+  type: 'admins' | 'financers' | 'operators' | 'visitors'
+  t: TFunction<'common'>
+}
+
+const IpLogs = ({ id, page, type, t }: Props): (JSX.Element | string) => {
+  const [ show, setShow ] = useState<boolean>(false);
+
+  if (id == 0) {
+    return (
+      <NotAvailable>
+        { t('ip_logs.not_available', { ns: 'common' }) }
+      </NotAvailable>
+    );
+  }
+
+  return (
+    <>
+      <Button
+        type="button"
+        subtype="secondary"
+        size="small"
+        text={ (
+          <>
+            <AiOutlineLogin />
+            { t('ip_logs.view', { ns: 'common' }) }
+          </>
+        ) }
+        noMargin
+        onClick={ () => setShow(true) }
+      />
+
+      { show && <View id={ id } page={ page } type={ type } t={ t } /> }
+    </>
+  );
+};
+
+export default IpLogs;

package/IpLogs/View.tsx

@@ -0,0 +1,48 @@
+import { TFunction } from 'i18next';
+import Table from '@modules/Common/Table/Table';
+import Row from '@modules/Common/Table/Row';
+import { Container } from './styles';
+import { GetLogs } from './services';
+
+interface Props {
+  id: number
+  page: number
+  type: 'admins' | 'financers'
+  t: TFunction<'common'>
+}
+
+const View = ({ id, page, type, t }: Props): JSX.Element => {
+  const { data, 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={ 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 '@modules/Providers/types/users';
+import { PaginationData } from '@autobusal/common/Pagination/types';
+
+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 { getRandomNumber } from '@modules/Utilities';
+import { ContainerGeneral, ContainerInline, ContainerParagraph, ItemParagraph } 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 {
@@ -52,18 +51,34 @@ interface ParagraphProps {
 }
 
 export const Paragraph = ({ count = 3 }: ParagraphProps): JSX.Element => {
+  const items: JSX.Element[] = [];
+
   const theme = useSystemTheme();
 
-  const baseColor = theme === 'light' ? '#EBEBEB' : "#202020";
-  const highlightColor = theme === 'light' ? '#F5F5F5' : '#444444';
+  for (let i = 1; i <= count; i++) {
+    items.push(
+      <ItemParagraph $color={ theme === 'light' ? '#EBEBEB' : '#202020' } $width={ getRandomNumber(60, 100) } />
+    );
+  }
 
   return (
-    <SkeletonTheme baseColor={ baseColor } highlightColor={ highlightColor }>
-      <ContainerParagraph>
-        <Skeleton count={ count - 1 } /> <br />
-        <Skeleton count={ count + 1 } /> <br />
-        <Skeleton count={ count } />
-      </ContainerParagraph>
-    </SkeletonTheme>
+    <ContainerParagraph>
+      { items }
+    </ContainerParagraph>
   );
-};
+};
+
+interface BoxProps {
+  title?: string
+  count?: number
+}
+
+export const Box = ({ title, count = 3 }: BoxProps): JSX.Element => (
+  <>
+    <h1>{ title }</h1>
+
+    <div className="box">
+      {/* <Paragraph count={ count } /> */}
+    </div>
+  </>
+);