@autobusal/common 0.0.39 → 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/Autocomplete/Autocomplete.tsx

@@ -27,7 +27,7 @@ const Autocomplete = ({ name, defaultValue, data, validation, t, refs, onUpdate
   const [ selected, setSelected ] = useState<number>(-1);
   const [ value, setValue ] = useState<string>(defaultValue);
 
-  const ref = useRef(null);
+  const ref = useRef<HTMLDivElement>(null);
 
   useOutside(ref, () => setShow(false));
 

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/Calendar/Calendar.tsx

@@ -21,7 +21,7 @@ const Calendar = ({ type, name, defaultValue, t, validation, refs, onUpdate }: P
   const [ prepared, setPrepared ] = useState<string>(defaultValue ?? prepareDate(new Date()));
   const [ selected, setSelected ] = useState<string>(prepared);
 
-  const ref = useRef(null);
+  const ref = useRef<HTMLDivElement>(null);
 
   useOutside(ref, () => setShow(false));
 

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

@@ -0,0 +1,88 @@
+import { TFunction } from 'i18next';
+import { useState, useRef } from 'react';
+import { UseFormRegister } from 'react-hook-form';
+import { HiOutlineCloudUpload, HiCheck } from 'react-icons/hi';
+import { Modal } from '@autobusal/common';
+import { validate } from '@autobusal/utilities';
+import { Button } from '../Button/Button';
+import { Container, ImgView, ImgPreview } from './styles';
+
+interface Props {
+  name: string
+  value?: string
+  validation?: string
+  multiple?: boolean
+  t: TFunction<'comon'>
+  refs: UseFormRegister<any>
+}
+
+const File = ({ name, value, validation, multiple, t, refs }: Props): JSX.Element => {
+  const [ uploaded, setUploaded ] = useState<boolean>(false);
+  const [ preview, setPreview ] = useState<boolean>(false);
+
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const rules = validate(String(validation), t);
+
+  const onChange = (): void => {
+    setUploaded(true);
+  };
+
+  // we listen for the change
+  rules.onChange = onChange;
+
+  const { ref, ...rest } = refs(name, rules);
+
+  const onClick = (): void => {
+    if (inputRef.current !== null) {
+      inputRef.current.click();
+    }
+  };
+
+  const type = multiple ? 'multiple' : 'single';
+
+  return (
+    <>
+      <Container>
+        <input
+          { ...rest }
+          type="file"
+          name={ name }
+          multiple={ multiple }
+          style={{ display: 'none' }}
+          ref={ (e) => {
+            ref(e);
+            inputRef.current = e;
+          } }
+        />
+
+        <Button
+          type="button"
+          size="small"
+          text={
+            uploaded
+              ? <><HiCheck /> { t(`file.${ type }.done`, { ns: 'common' }) }</>
+              : <><HiOutlineCloudUpload /> { t(`file.${ type }.ready`, { ns: 'common' }) }</>
+          }
+          noMargin
+          onClick={ onClick }
+        />
+
+        { value && <ImgView src={ value } onClick={ () => setPreview(true) } /> }
+      </Container>
+
+      { preview && (
+        <Modal
+          width={ 500 }
+          title={ t('file.preview', { ns: 'common' }) }
+          content={ (
+            <ImgPreview src={ value } />
+          ) }
+          onClose={ () => setPreview(false) }
+        />
+      ) }
+    </>
+  );
+};
+
+export default File;

package/File/styles.ts

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  height: 38px;
+`;
+
+export const ImgView = styled.img`
+  display: block;
+  height: 38px;
+  padding: 4px;
+  border: 1px solid ${ props => props.theme.background.neutral };
+  border-radius: ${ props => props.theme.borderRadius };
+  cursor: pointer;
+`;
+
+export const ImgPreview = styled.img`
+  display: block;
+  width: 100%;
+`;

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;