Styling fixes

vjvirtan · Oct 25, 2024 · abd056f · abd056f
1 parent b973ee6
commit abd056f
Show file tree

Hide file tree

Showing 28 changed files with 116 additions and 107 deletions.
diff --git a/.env.production b/.env.production
@@ -1 +1 @@
-NEXT_PUBLIC_API_URL = https://test.firehay.com
+NEXT_PUBLIC_API_URL = https://kyc.firehay.com/v1
diff --git a/.gitignore b/.gitignore
@@ -34,3 +34,8 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# compressed
+*.tar
+*.zip
+
diff --git a/Dockerfile b/Dockerfile
diff --git a/Kyc-Api.tar.tar b/Kyc-Api.tar.tar
diff --git a/app/components/EditPerson.tsx b/app/components/EditPerson.tsx
@@ -1,5 +1,5 @@
 import FetchSelections from "../requests/FetchSelections";
-import { FetchResponse } from "../requests/useFetch";
+
 import { UseCompany } from "../contexts/CompanyContext";
 import { UsePersonsContex } from "../contexts/Person";
 import { UseReportContext } from "../contexts/Report";
@@ -8,6 +8,7 @@ import Benefiary from "./form/Benefiary";
 import Board from "./form/Board";
 import Shares from "./form/Shares";
 import PersonInfo from "./Presentation/PersonInfo";
+import { FetchResponse } from "../interface/FetchInterface";
 
 const EditPerson = () => {
   const { useCompany } = UseCompany();
@@ -63,10 +64,10 @@ const EditPerson = () => {
   const boardRoles = ["ceo", "headOfBoard", "boardMember", "deputyBoardMember"];
   const ready = (
     <>
-      <div className='flex bg-main-light border-2 rounded-lg border-base-dark m-3 p-2'>
+      <div className='flex justify-around bg-main-light  border-2 rounded-lg border-base-dark m-3 p-2'>
         <div>
           <PersonInfo />
-          <div className={`flex `}>
+          <div className={`flex justify-around `}>
             <Shares />
             <Benefiary />
           </div>

diff --git a/app/components/HeaderComponent.tsx b/app/components/HeaderComponent.tsx
@@ -4,7 +4,9 @@ import useTranslation from "../service/useTranslation";
 const HeaderComponent = () => {
   const { translatePageText } = useTranslation();
   return (
-    <div className='pl-5 py-6 text-2xl '>{translatePageText("headerText")}</div>
+    <div className='pl-5 py-6 text-2xl  md:whitespace-nowrap md:overflow-hidden w-50 truncate '>
+      {translatePageText("headerText")}
+    </div>
   );
 };
 

diff --git a/app/components/LanguageSelection.tsx b/app/components/LanguageSelection.tsx
@@ -57,10 +57,18 @@ export const LanguageSelection = () => {
 
   return (
     <>
-      <div className='flex text-black gap-2 align-bottom pl-2 pr-2 pt-1 pb-1 bg-orange-50 shadow-md shadow-orange-500 rounded-md'>
-        <div>{lang}</div>
-        <div onClick={(e) => handleClick(e)}>
-          <div className='flex gap-3'>{selected()}</div>
+      <div className='flex text-black gap-2 align-end pl-2 pr-2 pt-1 pb-1 justify-end'>
+        <div
+          className=' bg-orange-50 shadow-md pl-2 pr-2 pt-1 pb-1  shadow-orange-500 rounded-md md:whitespace-nowrap lg:whitespace-nowrap'
+          bg-orange-50
+          shadow-md
+          shadow-orange-500
+          rounded-md
+        >
+          <div>{lang}</div>
+          <div onClick={(e) => handleClick(e)}>
+            <div className='flex gap-3'>{selected()}</div>
+          </div>
         </div>
       </div>
     </>

diff --git a/app/components/Presentation/CompanyDetails.tsx b/app/components/Presentation/CompanyDetails.tsx
@@ -16,24 +16,26 @@ const CompanyDetails = (): React.JSX.Element => {
 
   const details = (
     <>
-      <div className='gap-10 p-5 bg-main-primary rounded-md m-2'>
-        <div className=' rounded bg-orange-400  p-3'>
+      <div className='gap-10 p-5 bg-main-primary rounded-md m-2 '>
+        <div className=' rounded bg-orange-400  p-3 max-w-max '>
           <div className={`${labelStyle} grid grid-cols-3 `}>
-            <div className='row-start-1'>{translate("companyName")} </div>
+            <div className='row-start-1 px-3'>{translate("companyName")} </div>
             <div className={`${itemStyle} row-start-1 col-span-2`}>
               {useCompany?.name}
             </div>
           </div>
 
           <div className={`${labelStyle} grid grid-cols-3 `}>
-            <div className='row-start-1'>{translate("businessId")} </div>
+            <div className='row-start-1 px-3'>{translate("businessId")} </div>
             <div className={`${itemStyle} row-start-1 col-span-2`}>
               {useCompany?.businessId}
             </div>
           </div>
 
           <div className={`${labelStyle} grid grid-cols-3 `}>
-            <div className='row-start-1'>{translatePageText("address")} </div>
+            <div className='row-start-1 px-3'>
+              {translatePageText("address")}{" "}
+            </div>
             <div className={`${itemStyle} row-start-1 col-span-2`}>
               <div> {useCompany?.address}</div>
               <div>
@@ -48,7 +50,7 @@ const CompanyDetails = (): React.JSX.Element => {
               setCompany(null);
               setPerson((prev) => ({ ...prev, person: initPerson }));
             }}
-            className='rounded-3xl  text-white border-2 bg-green-900  p-2 content-center hover:border-orange-600'
+            className='rounded-xl  text-white border-2 bg-green-900  p-2 content-center hover:border-orange-600'
           >
             {translatePageText("done")?.toUpperCase()}
           </div>
@@ -63,7 +65,7 @@ const CompanyDetails = (): React.JSX.Element => {
                   person: initPerson,
                 }))
               }
-              className='rounded-3xl  text-white border-2 bg-green-900  shadow-sm shadow-green-500  p-2  content-center hover:border-orange-600'
+              className='rounded-xl  text-white border-2 bg-green-900  shadow-sm shadow-green-500  p-2  content-center hover:border-orange-600'
             >
               {" "}
               {translatePageText("addperson")?.toUpperCase()}

diff --git a/app/components/Presentation/OwnerList.tsx b/app/components/Presentation/OwnerList.tsx
@@ -48,20 +48,20 @@ function OwnerList() {
                 <>
                   <div
                     onClick={(e) => updatePerson(person!)}
-                    className={`${mainListStyle} grid grid-cols-5 ${isNew}`}
+                    className={`${mainListStyle} grid grid-cols-3 justify-evenly  md:whitespace-nowrap md:overflow-hidden  ${isNew}`}
                     key={person?.lastName}
                   >
-                    <div className={`${listItemStyle} flex gap-3  `}>
+                    <div className={`${listItemStyle}  gap-3 flex `}>
                       <div>{person?.lastName}</div>
                       <div>{person?.firstName}</div>
                     </div>
-                    <div className={`${listItemStyle} col-start-3`}>
+                    <div className={`${listItemStyle} justify-start `}>
                       <div>
                         {person?.personId}
                         <div className={selectAnimation}>select</div>
                       </div>
                     </div>
-                    <div className={`${listItemStyle} col-start-5`}>
+                    <div className={`${listItemStyle}  `}>
                       {e?.percentage} {" %"}
                     </div>
                   </div>

diff --git a/app/components/Presentation/ReportCompany.tsx b/app/components/Presentation/ReportCompany.tsx
@@ -11,7 +11,9 @@ const ReportCompany = () => {
       <div className={` ${backgroundListStyle}  `}>
         <BoardList />
       </div>
-      <div className={` ${backgroundListStyle} grid grid-rows-1 grid-cols-2 `}>
+      <div
+        className={` ${backgroundListStyle} grid grid-rows-1 lg:grid-cols-2 `}
+      >
         <OwnerList />
         <BeneficiaryList />
       </div>

diff --git a/app/components/Ready.tsx b/app/components/Ready.tsx
@@ -20,33 +20,32 @@ const preLoad = () => {
 
 export const Ready = (): React.JSX.Element => {
   const getReady = () => {
-    const { useAdvice, setAdvice } = UseAdviceContext();
+    const { useAdvice } = UseAdviceContext();
 
     const ready = () => {
       return (
         <>
           <div className='row-start-1 row-end-1'>
-            <div className=' grid grid-cols-5 rounded-md text-white mb-3 bg-gray-600  shadow-md shadow-orange-500 items-center justify-center gap-y-2'>
-              <div className=' col-start-1 col-span-3  '>
+            <div className=' grid grid-flow-col auto-cols-[minmax(300 ,1fr)] rounded-md text-white mb-3 bg-gray-600  shadow-md shadow-orange-500  gap-y-2'>
+              <div className='    '>
                 <HeaderComponent />
               </div>
-              <div className='col-start-5 p-2'>
+              <div className='p-2 '>
                 <LanguageSelection />
               </div>
             </div>
-            <div className='flex rounded mb-3 mt-3 ring-2 ring-base-dark shadow-md shadow-orange-500 bg-main-mid'>
+            <div className='grid lg:grid-flow-col  auto-cols-[minmax(250 ,1fr)] rounded mb-3 mt-3 ring-2 ring-base-dark shadow-md shadow-orange-500 bg-main-mid'>
               <CompanyDetails />
-              <div className={``}>
+              <div className={`flex auto-cols-[minmax(300 ,1fr)]`}>
                 <FindPersonForm />
                 <EditPerson />
               </div>
               <Sanctions />
             </div>
             <div></div>
           </div>
-          <div className='row-start-3 col-start-1 '>
-            <CompanySelection />
-          </div>
+
+          <CompanySelection />
         </>
       );
     };

diff --git a/app/components/form/Benefiary.tsx b/app/components/form/Benefiary.tsx
@@ -1,4 +1,3 @@
-"use client";
 import FetchSelections from "@/app/requests/FetchSelections";
 import { UseCompany } from "@/app/contexts/CompanyContext";
 import { PersonInterface, UsePersonsContex } from "@/app/contexts/Person";
@@ -46,19 +45,19 @@ const Benefiary = () => {
   return (
     <>
       <div
-        className={`
+        className={`flex-1
           m-2 rounded-md p-2 shadow-md shadow-main-primary content-center
           ${isBene ? selectedStyle : "bg-main-light"}`}
         onClick={(e) => changeBen(isBene!)}
       >
-        <div className='grid grid-cols-10 grid-rows-1 justify-self-start '>
-          <input
-            className='px-2 m-1 row-start-1 '
-            checked={isBene}
-            type='checkbox'
-            readOnly
-          ></input>
-          <div className='col-start-2 px-2 row-start-1 col-span-9 '>
+        <div className='justify-self-start  '>
+          <div className=' px-2 col-span-9 '>
+            <input
+              className='p-2 mr-2'
+              checked={isBene}
+              type='checkbox'
+              readOnly
+            ></input>
             {translatePageText("beneficiary")}
           </div>
         </div>

diff --git a/app/components/form/FindPersonForm.tsx b/app/components/form/FindPersonForm.tsx
@@ -1,4 +1,3 @@
-"use client";
 import { UseCompany } from "@/app/contexts/CompanyContext";
 import React, { useState } from "react";
 import Validate, { Valid } from "./useValidate";

diff --git a/app/components/form/FindPersonFormChild.tsx b/app/components/form/FindPersonFormChild.tsx
@@ -72,7 +72,7 @@ const FindPersonFormChild = () => {
           }}
         >
           {" "}
-          <div className='text-black'>Demo persons:</div>
+          <div className='text-black'>{translatePageText("demoInfo")}</div>
           <div id={"010101AXXXX"}>010101AXXXX</div>
           <div id={"020202AXXXX"}>020202AXXXX</div>
           <div id={"030303-XXXX"}>030303-XXXX</div>

diff --git a/app/components/form/Kyc.tsx b/app/components/form/Kyc.tsx
@@ -1,4 +1,3 @@
-"use client";
 import React from "react";
 import { UsePersonsContex } from "../../contexts/Person";
 

diff --git a/app/components/form/Sanctions.tsx b/app/components/form/Sanctions.tsx
@@ -7,12 +7,12 @@ const Sanctions = () => {
   const show = (
     <>
       <div
-        className='px-1 bg-base-mid flex justify-center
-       mt-5 border-solid border-y-2 border-base-dark 
-       max-h-10 text-white 
-       hover:bg-base-light  hover:text-black hover:ring-2 ring-red-200'
+        className='px-1 bg-base-mid flex justify-start
+       m-5 border-solid border-y-2 border-base-dark 
+      flex-1 lg:max-h-[15%] text-white 
+       hover:bg-base-light  hover:text-black hover:ring-2 ring-red-200 mr-4'
       >
-        <div className='m-1'> Check Sanctions</div>
+        <div className='m-1'>Check Sanctions</div>
         <label className='text-sm text-red-300'>offline</label>
       </div>
     </>

diff --git a/app/components/form/Shares.tsx b/app/components/form/Shares.tsx
@@ -86,18 +86,22 @@ const Shares = () => {
   };
   return (
     <>
-      <div className='m-2 rounded-md p-2 shadow-md shadow-main-primary'>
-        <label className={`${headerStyle}`}>{translatePageText("share")}</label>
-        <input
-          className='w-20  text-black  m-3 rounded ring-2 ring-orange-200 shadow-sm shadow-orange-300'
-          value={own == 0 ? "" : own}
-          onChange={(e) => {
-            addToLocalStorage("ownerTicket", Date.now());
-            onChangeOwner(e);
-          }}
-          type='number'
-        ></input>
-        %
+      <div className='flex-1 m-2 rounded-md p-2 shadow-md shadow-main-primary'>
+        <div className={`mt-1 ${headerStyle}`}>
+          {translatePageText("share")}
+        </div>
+        <div className='flex mt-2 ml-1'>
+          <input
+            className='w-20 pl-2 justify-items-end text-black  m-3 rounded ring-2 ring-orange-200 shadow-sm shadow-orange-300'
+            value={own == 0 ? "" : own}
+            onChange={(e) => {
+              addToLocalStorage("ownerTicket", Date.now());
+              onChangeOwner(e);
+            }}
+            type='number'
+          ></input>
+          <div className='pt-3'>%</div>
+        </div>
       </div>
     </>
   );

diff --git a/app/interface/FetchInterface.tsx b/app/interface/FetchInterface.tsx
@@ -0,0 +1,10 @@
+import { MainErrorInterface } from "../interface/ValidationInterface";
+
+export interface FetchResponse {
+  status: boolean;
+  data?: any;
+  style?: string;
+  errorMessage?: MainErrorInterface | null;
+  simpleErrorMessage: string;
+}
+export const URL = process.env.NEXT_PUBLIC_API_URL;
diff --git a/app/page.tsx b/app/page.tsx
@@ -14,7 +14,7 @@ export default function Home() {
       <PersonContextProvider>
         <AdviceContextProvider>
           <ReportContextProvider>
-            <main className='px-12 pt-5'>
+            <main className='mt-5 sm:w-[95%] md:w-[90%] lg:w-[90%] xl:w-[85%] 2xl:w-[60%] justify-self-center'>
               <Ready />
             </main>
           </ReportContextProvider>

diff --git a/app/requests/FetchAdvice.tsx b/app/requests/FetchAdvice.tsx
@@ -1,11 +1,6 @@
-import {
-  Advice,
-  KeyValue,
-  MainAdviceInterface,
-  UseAdviceContext,
-} from "../contexts/Advice";
-import { useLocalStorage } from "../service/useLocalStorage";
-import { FetchResponse, URL, useFetch } from "./useFetch";
+import { Advice, KeyValue, UseAdviceContext } from "../contexts/Advice";
+import { FetchResponse, URL } from "../interface/FetchInterface";
+import { useFetch } from "./useFetch";
 
 const fResponse: FetchResponse = {
   status: false,
@@ -16,9 +11,7 @@ const fResponse: FetchResponse = {
 };
 
 const FetchAdvice = async () => {
-  const { getFromLocalStorage } = useLocalStorage();
   const { getData } = useFetch();
-  let adviceData: MainAdviceInterface | null = null;
 
   const { useAdvice, setAdvice } = UseAdviceContext();
   const response = getData(URL + "/advice/all")

diff --git a/app/requests/FetchCompany.tsx b/app/requests/FetchCompany.tsx
@@ -1,5 +1,6 @@
 import { CompanyInterface } from "../contexts/CompanyContext";
-import { URL, useFetch } from "./useFetch";
+import { URL } from "../interface/FetchInterface";
+import { useFetch } from "./useFetch";
 
 const FetchCompany = async (id: string) => {
   const { postData } = useFetch();

diff --git a/app/requests/FetchPerson.tsx b/app/requests/FetchPerson.tsx
@@ -1,6 +1,7 @@
 import { PersonInterface } from "../contexts/Person";
+import { FetchResponse, URL } from "../interface/FetchInterface";
 
-import { FetchResponse, URL, useFetch } from "./useFetch";
+import { useFetch } from "./useFetch";
 const fResponse: FetchResponse = {
   status: false,
   data: null,

diff --git a/app/requests/FetchReport.tsx b/app/requests/FetchReport.tsx
@@ -1,5 +1,6 @@
 import { UseReportContext } from "../contexts/Report";
-import { URL, useFetch } from "./useFetch";
+import { URL } from "../interface/FetchInterface";
+import { useFetch } from "./useFetch";
 const FetchReport = (businessId: string) => {
   const { postData } = useFetch();
   const { setReport } = UseReportContext();
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		NEXT_PUBLIC_API_URL = https://test.firehay.com
		NEXT_PUBLIC_API_URL = https://kyc.firehay.com/v1