@djb25/digit-ui-module-ekyc 1.0.0

package/dist/index.js

@@ -0,0 +1 @@
+var e,t=require("react"),r=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,n=require("react-router-dom"),i=require("@djb25/digit-ui-react-components"),s=require("react-i18next");function o(){return(o=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)({}).hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(null,arguments)}const a=function(){function e(){}return e.prototype.then=function(t,r){const n=new e,i=this.s;if(i){const e=1&i?t:r;if(e){try{u(n,1,e(this.v))}catch(e){u(n,2,e)}return n}return this}return this.o=function(e){try{const i=e.v;1&e.s?u(n,1,t?t(i):i):r?u(n,1,r(i)):u(n,2,i)}catch(e){u(n,2,e)}},n},e}();function u(e,t,r){if(!e.s){if(r instanceof a){if(!r.s)return void(r.o=u.bind(null,e,t));1&t&&(t=r.s),r=r.v}if(r&&r.then)return void r.then(u.bind(null,e,t),u.bind(null,e,2));e.s=t,e.v=r;const n=e.o;n&&n(e)}}function c(e){return e instanceof a&&1&e.s}const l="undefined"!=typeof Symbol?Symbol.iterator||(Symbol.iterator=Symbol("Symbol.iterator")):"@@iterator";function f(e,t,r){if("function"==typeof e[l]){var n,i,s,o=e[l]();if(function e(l){try{for(;!((n=o.next()).done||r&&r());)if((l=t(n.value))&&l.then){if(!c(l))return void l.then(e,s||(s=u.bind(null,i=new a,2)));l=l.v}i?u(i,1,l):i=l}catch(e){u(i||(i=new a),2,e)}}(),o.return){var f=function(e){try{n.done||o.return()}catch(e){}return e};if(i&&i.then)return i.then(f,function(e){throw f(e)});f()}return i}if(!("length"in e))throw new TypeError("Object is not iterable");for(var d=[],m=0;m<e.length;m++)d.push(e[m]);return function(e,t,r){var n,i,s=-1;return function o(l){try{for(;++s<e.length&&(!r||!r());)if((l=t(s))&&l.then){if(!c(l))return void l.then(o,i||(i=u.bind(null,n=new a,2)));l=l.v}n?u(n,1,l):n=l}catch(e){u(n||(n=new a),2,e)}}(),n}(d,function(e){return t(d[e])},r)}"undefined"!=typeof Symbol&&(Symbol.asyncIterator||(Symbol.asyncIterator=Symbol("Symbol.asyncIterator")));var d=e=>e instanceof HTMLElement;const m={onBlur:"onBlur",onChange:"onChange",onSubmit:"onSubmit",onTouched:"onTouched",all:"all"};var p=e=>null==e;const g=e=>"object"==typeof e;var h=e=>!p(e)&&!Array.isArray(e)&&g(e)&&!(e instanceof Date),b=e=>/^\w*$/.test(e),v=e=>e.filter(Boolean),y=e=>v(e.replace(/["|']/g,"").replace(/\[/g,".").replace(/\]/g,"").split("."));function E(e,t,r){let n=-1;const i=b(t)?[t]:y(t),s=i.length,o=s-1;for(;++n<s;){const t=i[n];let s=r;if(n!==o){const r=e[t];s=h(r)||Array.isArray(r)?r:isNaN(+i[n+1])?{}:[]}e[t]=s,e=e[t]}return e}var C=function(e,t){void 0===t&&(t={});for(const r in e)b(r)?t[r]=e[r]:E(t,r,e[r]);return t},O=e=>void 0===e,S=function(e,t,r){void 0===e&&(e={});const n=v(t.split(/[,[\].]+?/)).reduce((e,t)=>p(e)?e:e[t],e);return O(n)||n===e?O(e[t])?r:e[t]:n},A=(e,t)=>{d(e)&&e.removeEventListener&&(e.removeEventListener("input",t),e.removeEventListener("change",t),e.removeEventListener("blur",t))};const N={isValid:!1,value:null};var j=e=>Array.isArray(e)?e.reduce((e,t)=>t&&t.ref.checked?{isValid:!0,value:t.ref.value}:e,N):N,P=e=>"radio"===e.type,R=e=>"file"===e.type,D=e=>"checkbox"===e.type,x=e=>"select-multiple"===e.type;const V={value:!1,isValid:!1},T={value:!0,isValid:!0};var k=e=>{if(Array.isArray(e)){if(e.length>1){const t=e.filter(e=>e&&e.ref.checked).map(e=>{let{ref:{value:t}}=e;return t});return{value:t,isValid:!!t.length}}const{checked:t,value:r,attributes:n}=e[0].ref;return t?n&&!O(n.value)?O(r)||""===r?T:{value:r,isValid:!0}:T:V}return V};function F(e,t,r,n,i){const s=e.current[t];if(s){const{ref:{value:e,disabled:t},ref:r,valueAsNumber:a,valueAsDate:u,setValueAs:c}=s;if(t&&n)return;return R(r)?r.files:P(r)?j(s.options).value:x(r)?(o=r.options,[...o].filter(e=>{let{selected:t}=e;return t}).map(e=>{let{value:t}=e;return t})):D(r)?k(s.options).value:i?e:a?""===e?NaN:+e:u?r.valueAsDate:c?c(e):e}var o;if(r)return S(r.current,t)}function w(e){return!e||e instanceof HTMLElement&&e.nodeType!==Node.DOCUMENT_NODE&&w(e.parentNode)}var L=e=>h(e)&&!Object.keys(e).length,_=e=>"boolean"==typeof e;function K(e,t){const r=b(t)?[t]:y(t),n=1==r.length?e:function(e,t){const r=t.slice(0,-1).length;let n=0;for(;n<r;)e=O(e)?n++:e[t[n++]];return e}(e,r);let i;n&&delete n[r[r.length-1]];for(let t=0;t<r.slice(0,-1).length;t++){let n,s=-1;const o=r.slice(0,-(t+1)),a=o.length-1;for(t>0&&(i=e);++s<o.length;){const t=o[s];n=n?n[t]:e[t],a===s&&(h(n)&&L(n)||Array.isArray(n)&&!n.filter(e=>h(e)&&!L(e)||_(e)).length)&&(i?delete i[t]:delete e[t]),i=n}}return e}const Y=(e,t)=>e&&e.ref===t;var M=e=>p(e)||!g(e);function B(e,t){if(M(e)||M(t))return t;for(const r in t){const n=e[r],i=t[r];try{e[r]=h(n)&&h(i)||Array.isArray(n)&&Array.isArray(i)?B(n,i):i}catch(e){}}return e}function I(e,r,n){if(M(e)||M(r)||e instanceof Date||r instanceof Date)return e===r;if(!t.isValidElement(e)){const t=Object.keys(e),i=Object.keys(r);if(t.length!==i.length)return!1;for(const i of t){const t=e[i];if(!n||"ref"!==i){const e=r[i];if((h(t)||Array.isArray(t))&&(h(e)||Array.isArray(e))?!I(t,e,n):t!==e)return!1}}}return!0}function z(e,t,r,n,i){let s=-1;for(;++s<e.length;){for(const n in e[s])Array.isArray(e[s][n])?(!r[s]&&(r[s]={}),r[s][n]=[],z(e[s][n],S(t[s]||{},n,[]),r[s][n],r[s],n)):I(S(t[s]||{},n),e[s][n])?E(r[s]||{},n):r[s]=Object.assign(Object.assign({},r[s]),{[n]:!0});n&&!r.length&&delete n[i]}return r}var W=e=>"string"==typeof e,U=(e,t,r,n,i)=>{const s={};for(const t in e.current)(O(i)||(W(i)?t.startsWith(i):Array.isArray(i)&&i.find(e=>t.startsWith(e))))&&(s[t]=F(e,t,void 0,n));return r?C(s):B(t,C(s))},H=e=>e instanceof RegExp,G=e=>h(e)&&!H(e)?e:{value:e,message:""},q=e=>"function"==typeof e,J=e=>W(e)||t.isValidElement(e);function $(e,t,r){if(void 0===r&&(r="validate"),J(e)||_(e)&&!e)return{type:r,message:J(e)?e:"",ref:t}}var X=(e,t,r,n,i)=>t?Object.assign(Object.assign({},r[e]),{types:Object.assign(Object.assign({},r[e]&&r[e].types?r[e].types:{}),{[n]:i||!0})}):{},Z=function(e,t,r,n){let{ref:i,ref:{value:s},options:o,required:a,maxLength:u,minLength:c,min:l,max:d,pattern:m,validate:g}=r;try{let r=!1;const b=i.name,v={},y=P(i),E=D(i),C=y||E,O=""===s,S=X.bind(null,b,t,v),A=function(e,t,r,n,s){void 0===n&&(n="maxLength"),void 0===s&&(s="minLength");const o=e?t:r;v[b]=Object.assign({type:e?n:s,message:o,ref:i},S(e?n:s,o))};if(a&&(!y&&!E&&(O||p(s))||_(s)&&!s||E&&!k(o).isValid||y&&!j(o).isValid)){const{value:r,message:n}=J(a)?{value:!!a,message:a}:G(a);if(r&&(v[b]=Object.assign({type:"required",message:n,ref:C?((e.current[b].options||[])[0]||{}).ref:i},S("required",n)),!t))return Promise.resolve(v)}if(!(p(l)&&p(d)||""===s)){let e,r;const n=G(d),o=G(l);if(isNaN(s)){const t=i.valueAsDate||new Date(s);W(n.value)&&(e=t>new Date(n.value)),W(o.value)&&(r=t<new Date(o.value))}else{const t=i.valueAsNumber||parseFloat(s);p(n.value)||(e=t>n.value),p(o.value)||(r=t<o.value)}if((e||r)&&(A(!!e,n.message,o.message,"max","min"),!t))return Promise.resolve(v)}if(W(s)&&!O&&(u||c)){const e=G(u),r=G(c),n=!p(e.value)&&s.length>e.value,i=!p(r.value)&&s.length<r.value;if((n||i)&&(A(n,e.message,r.message),!t))return Promise.resolve(v)}if(W(s)&&m&&!O){const{value:e,message:r}=G(m);if(H(e)&&!e.test(s)&&(v[b]=Object.assign({type:"pattern",message:r,ref:i},S("pattern",r)),!t))return Promise.resolve(v)}const N=function(){if(g){const s=F(e,b,n,!1,!0),a=C&&o?o[0].ref:i;return q(g)?Promise.resolve(g(s)).then(function(e){const n=$(e,a);if(n&&(v[b]=Object.assign(Object.assign({},n),S("validate",n.message)),!t))return r=!0,v}):function(){if(h(g)){let n=!1;function e(){if(!L(i)&&(v[b]=Object.assign({ref:a},i),!t))return r=!0,v}let i={};const o=f(Object.entries(g),function(e){let[r,o]=e;if(L(i)||t)return Promise.resolve(o(s)).then(function(e){const n=$(e,a,r);n&&(i=Object.assign(Object.assign({},n),S(r,n.message)),t&&(v[b]=i))});n=!0},function(){return n});return o&&o.then?o.then(e):e()}}()}}();return Promise.resolve(N&&N.then?N.then(function(e){return r?e:v}):r?N:v)}catch(e){return Promise.reject(e)}};const Q=function(e,t,r){void 0===r&&(r=[]);for(const n in t){const i=e+(h(t)?"."+n:"["+n+"]");M(t[n])?r.push(i):Q(i,t[n],r)}return r};var ee=(e,t,r,n,i)=>{let s=void 0;return r.add(t),L(e)||(s=S(e,t),(h(s)||Array.isArray(s))&&Q(t,s).forEach(e=>r.add(e))),O(s)?i?n:S(n,t):s},te=e=>{let{isOnBlur:t,isOnChange:r,isOnTouch:n,isTouched:i,isReValidateOnBlur:s,isReValidateOnChange:o,isBlurEvent:a,isSubmitted:u,isOnAll:c}=e;return!c&&(!u&&n?!(i||a):(u?s:t)?!a:!(u?o:r)||a)},re=e=>e.substring(0,e.indexOf("[")),ne=(e,t)=>[...e].some(e=>((e,t)=>RegExp(("^"+t+"([|.)\\d+").replace(/\[/g,"\\[").replace(/\]/g,"\\]")).test(e))(t,e)),ie="undefined"!=typeof window&&"undefined"!=typeof document;function se(e){var t;let r;if(M(e)||ie&&(e instanceof File||d(e)))return e;if(!["Set","Map","Object","Date","Array"].includes(null===(t=e.constructor)||void 0===t?void 0:t.name))return e;if(e instanceof Date)return r=new Date(e.getTime()),r;if(e instanceof Set){r=new Set;for(const t of e)r.add(t);return r}if(e instanceof Map){r=new Map;for(const t of e.keys())r.set(t,se(e.get(t)));return r}r=Array.isArray(e)?[]:{};for(const t in e)r[t]=se(e[t]);return r}var oe=e=>({isOnSubmit:!e||e===m.onSubmit,isOnBlur:e===m.onBlur,isOnChange:e===m.onChange,isOnAll:e===m.all,isOnTouch:e===m.onTouched}),ae=e=>P(e)||D(e);const ue="undefined"==typeof window,ce=ie?"Proxy"in window:"undefined"!=typeof Proxy,le=t.createContext(null);le.displayName="RHFContext";const fe=e=>{const{as:r,render:n}=e,i=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(n=Object.getOwnPropertySymbols(e);i<n.length;i++)t.indexOf(n[i])<0&&Object.prototype.propertyIsEnumerable.call(e,n[i])&&(r[n[i]]=e[n[i]])}return r}(e,["rules","as","render","defaultValue","control","onFocus"]),{field:s,meta:o}=function(e){let{name:r,rules:n,defaultValue:i,control:s,onFocus:o}=e;const a=t.useContext(le);if("production"!==process.env.NODE_ENV&&!s&&!a)throw new Error("📋 Controller is missing `control` prop. https://react-hook-form.com/api#Controller");const{defaultValuesRef:u,setValue:c,register:l,unregister:f,trigger:d,mode:m,reValidateMode:{isReValidateOnBlur:p,isReValidateOnChange:g},formState:b,formStateRef:{current:{isSubmitted:v,touched:y,errors:C}},updateFormState:A,readFormStateRef:N,fieldsRef:j,fieldArrayNamesRef:P,shallowFieldsStateRef:R}=s||a.control,D=!ne(P.current,r),x=()=>!O(S(R.current,r))&&D?S(R.current,r):O(i)?S(u.current,r):i,[V,T]=t.useState(x()),k=t.useRef(V),F=t.useRef({focus:()=>null}),w=t.useRef(o||(()=>{q(F.current.focus)&&F.current.focus(),"production"!==process.env.NODE_ENV&&(q(F.current.focus)||console.warn("📋 'ref' from Controller render prop must be attached to a React component or a DOM Element whose ref provides a 'focus()' method"))})),L=t.useCallback(e=>!te(Object.assign({isBlurEvent:e,isReValidateOnBlur:p,isReValidateOnChange:g,isSubmitted:v,isTouched:!!S(y,r)},m)),[p,g,v,y,r,m]),_=t.useCallback(e=>{let[t]=e;const r=(e=>M(e)||!h(e.target)||h(e.target)&&!e.type?e:O(e.target.value)?e.target.checked:e.target.value)(t);return T(r),k.current=r,r},[]),K=t.useCallback(e=>{if("production"!==process.env.NODE_ENV&&!r)return console.warn("📋 Field is missing `name` prop. https://react-hook-form.com/api#Controller");j.current[r]?j.current[r]=Object.assign({ref:j.current[r].ref},n):(l(Object.defineProperties({name:r,focus:w.current},{value:{set(e){T(e),k.current=e},get:()=>k.current}}),n),e=O(S(u.current,r))),e&&D&&T(x())},[n,r,l]);t.useEffect(()=>()=>f(r),[r]),t.useEffect(()=>{"production"!==process.env.NODE_ENV&&(O(V)&&console.warn("📋 "+r+" is missing in the 'defaultValue' prop of either its Controller (https://react-hook-form.com/api#Controller) or useForm (https://react-hook-form.com/api#useForm)"),!D&&O(i)&&console.warn("📋 Controller is missing `defaultValue` prop when using `useFieldArray`. https://react-hook-form.com/api#Controller")),K()},[K]),t.useEffect(()=>{!j.current[r]&&K(!0)});const Y=t.useCallback(()=>{N.current.touched&&!S(y,r)&&(E(y,r,!0),A({touched:y})),L(!0)&&d(r)},[r,A,L,d,N]);return{field:{onChange:t.useCallback(function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return c(r,_(t),{shouldValidate:L(),shouldDirty:!0})},[c,r,L]),onBlur:Y,name:r,value:V,ref:F},meta:Object.defineProperties({invalid:!!S(C,r)},{isDirty:{get:()=>!!S(b.dirtyFields,r)},isTouched:{get:()=>!!S(b.touched,r)}})}}(e),a=Object.assign(Object.assign({},i),s);return r?t.isValidElement(r)?t.cloneElement(r,a):t.createElement(r,a):n?n(s,o):null},de=e=>{let{onSearch:n,searchFields:a,searchParams:u}=e;const{t:c}=s.useTranslation(),{register:l,handleSubmit:g,watch:y,control:N}=function(e){let{mode:r=m.onSubmit,reValidateMode:n=m.onChange,resolver:i,context:s,defaultValues:o={},shouldFocusError:a=!0,shouldUnregister:u=!0,criteriaMode:c}=void 0===e?{}:e;const l=t.useRef({}),g=t.useRef({}),y=t.useRef({}),N=t.useRef(new Set),j=t.useRef({}),V=t.useRef({}),T=t.useRef({}),k=t.useRef({}),_=t.useRef(o),H=t.useRef(!1),G=t.useRef(!1),J=t.useRef(),$=t.useRef({}),X=t.useRef({}),le=t.useRef(s),fe=t.useRef(i),de=t.useRef(new Set),me=t.useRef(oe(r)),{isOnSubmit:pe,isOnTouch:ge}=me.current,he=c===m.all,[be,ve]=t.useState({isDirty:!1,isValidating:!1,dirtyFields:{},isSubmitted:!1,submitCount:0,touched:{},isSubmitting:!1,isSubmitSuccessful:!1,isValid:!pe,errors:{}}),ye=t.useRef({isDirty:!ce,dirtyFields:!ce,touched:!ce||ge,isValidating:!ce,isSubmitting:!ce,isValid:!ce}),Ee=t.useRef(be),Ce=t.useRef(),{isOnBlur:Oe,isOnChange:Se}=t.useRef(oe(n)).current;le.current=s,fe.current=i,Ee.current=be,$.current=u?{}:L($.current)?se(o):$.current;const Ae=t.useCallback(function(e){void 0===e&&(e={}),H.current||(Ee.current=Object.assign(Object.assign({},Ee.current),e),ve(Ee.current))},[]),Ne=()=>ye.current.isValidating&&Ae({isValidating:!0}),je=t.useCallback(function(e,t,r,n,i){void 0===r&&(r=!1),void 0===n&&(n={});let s=r||(e=>{let{errors:t,name:r,error:n,validFields:i,fieldsWithValidation:s}=e;const o=O(n),a=S(t,r);return o&&!!a||!o&&!I(a,n,!0)||o&&S(s,r)&&!S(i,r)})({errors:Ee.current.errors,error:t,name:e,validFields:k.current,fieldsWithValidation:T.current});const o=S(Ee.current.errors,e);t?(K(k.current,e),s=s||!o||!I(o,t,!0),E(Ee.current.errors,e,t)):((S(T.current,e)||fe.current)&&(E(k.current,e,!0),s=s||o),K(Ee.current.errors,e)),(s&&!p(r)||!L(n)||ye.current.isValidating)&&Ae(Object.assign(Object.assign(Object.assign({},n),fe.current?{isValid:!!i}:{}),{isValidating:!1}))},[]),Pe=t.useCallback((e,t)=>{const{ref:r,options:n}=l.current[e],i=ie&&d(r)&&p(t)?"":t;P(r)?(n||[]).forEach(e=>{let{ref:t}=e;return t.checked=t.value===i}):R(r)&&!W(i)?r.files=i:x(r)?[...r.options].forEach(e=>e.selected=i.includes(e.value)):D(r)&&n?n.length>1?n.forEach(e=>{let{ref:t}=e;return t.checked=Array.isArray(i)?!!i.find(e=>e===t.value):i===t.value}):n[0].ref.checked=!!i:r.value=i},[]),Re=t.useCallback((e,t)=>{if(ye.current.isDirty){const r=Ke();return e&&t&&E(r,e,t),!I(r,_.current)}return!1},[]),De=t.useCallback(function(e,t){if(void 0===t&&(t=!0),ye.current.isDirty||ye.current.dirtyFields){const r=!I(S(_.current,e),F(l,e,$)),n=S(Ee.current.dirtyFields,e),i=Ee.current.isDirty;r?E(Ee.current.dirtyFields,e,!0):K(Ee.current.dirtyFields,e);const s={isDirty:Re(),dirtyFields:Ee.current.dirtyFields},o=ye.current.isDirty&&i!==s.isDirty||ye.current.dirtyFields&&n!==S(Ee.current.dirtyFields,e);return o&&t&&Ae(s),o?s:{}}return{}},[]),xe=t.useCallback(function(e,t){try{return"production"===process.env.NODE_ENV||l.current[e]?Promise.resolve(Z(l,he,l.current[e],$)).then(function(r){const n=r[e];return je(e,n,t),O(n)}):(console.warn("📋 Field is missing with `name` attribute: ",e),Promise.resolve(!1))}catch(e){return Promise.reject(e)}},[je,he]),Ve=t.useCallback(function(e){try{return Promise.resolve(fe.current(Ke(),le.current,he)).then(function(t){let{errors:r}=t;const n=Ee.current.isValid;if(Array.isArray(e)){const t=e.map(e=>{const t=S(r,e);return t?E(Ee.current.errors,e,t):K(Ee.current.errors,e),!t}).every(Boolean);return Ae({isValid:L(r),isValidating:!1}),t}{const t=S(r,e);return je(e,t,n!==L(r),{},L(r)),!t}})}catch(e){return Promise.reject(e)}},[je,he]),Te=t.useCallback(function(e){try{let r=!1;function t(e){return r?e:Promise.resolve(xe(n))}const n=e||Object.keys(l.current);if(Ne(),fe.current)return Promise.resolve(Ve(n));const i=function(){if(Array.isArray(n))return!e&&(Ee.current.errors={}),Promise.resolve(Promise.all(n.map(function(e){try{return Promise.resolve(xe(e,null))}catch(e){return Promise.reject(e)}}))).then(function(e){Ae({isValidating:!1});const t=e.every(Boolean);return r=!0,t})}();return Promise.resolve(i&&i.then?i.then(t):t(i))}catch(e){return Promise.reject(e)}},[Ve,xe]),ke=t.useCallback((e,t,r)=>{let{shouldDirty:n,shouldValidate:i}=r;const s={};E(s,e,t);for(const r of Q(e,t))l.current[r]&&(Pe(r,S(s,r)),n&&De(r),i&&Te(r))},[Te,Pe,De]),Fe=t.useCallback((e,t,r)=>{if(!u&&!M(t)&&E($.current,e,Array.isArray(t)?[...t]:Object.assign({},t)),l.current[e])Pe(e,t),r.shouldDirty&&De(e),r.shouldValidate&&Te(e);else if(!M(t)&&(ke(e,t,r),de.current.has(e))){const n=re(e)||e;E(g.current,e,t),X.current[n]({[n]:S(g.current,n)}),(ye.current.isDirty||ye.current.dirtyFields)&&r.shouldDirty&&(E(Ee.current.dirtyFields,e,((e,t,r)=>B(z(e,t,r.slice(0,e.length)),z(t,e,r.slice(0,e.length))))(t,S(_.current,e,[]),S(Ee.current.dirtyFields,e,[]))),Ae({isDirty:!I(Object.assign(Object.assign({},Ke()),{[e]:t}),_.current)}))}!u&&E($.current,e,t)},[De,Pe,ke]),we=e=>G.current||N.current.has(e)||N.current.has((e.match(/\w+/)||[])[0]),Le=e=>{let t=!0;if(!L(j.current))for(const r in j.current)e&&j.current[r].size&&!j.current[r].has(e)&&!j.current[r].has(re(e))||(V.current[r](),t=!1);return t};function _e(e){if(!u){let t=se(e);for(const e of de.current)b(e)&&!t[e]&&(t=Object.assign(Object.assign({},t),{[e]:[]}));return t}return e}function Ke(e){if(W(e))return F(l,e,$);if(Array.isArray(e)){const t={};for(const r of e)E(t,r,F(l,r,$));return t}return _e(U(l,se($.current),u))}J.current=J.current?J.current:function(e){let{type:t,target:r}=e;try{let e=r.name;const n=l.current[e];let i,s;return Promise.resolve(function(){if(n){function o(){!a&&Le(e),je(e,i,d,f,s)}const a="blur"===t,c=te(Object.assign({isBlurEvent:a,isReValidateOnChange:Se,isReValidateOnBlur:Oe,isTouched:!!S(Ee.current.touched,e),isSubmitted:Ee.current.isSubmitted},me.current));let f=De(e,!1),d=!L(f)||!a&&we(e);if(a&&!S(Ee.current.touched,e)&&ye.current.touched&&(E(Ee.current.touched,e,!0),f=Object.assign(Object.assign({},f),{touched:Ee.current.touched})),!u&&D(r)&&E($.current,e,F(l,e)),c)return!a&&Le(e),(!L(f)||d&&L(f))&&Ae(f);Ne();const m=fe.current?Promise.resolve(fe.current(Ke(),le.current,he)).then(function(t){let{errors:n}=t;const o=Ee.current.isValid;if(i=S(n,e),D(r)&&!i&&fe.current){const t=re(e),r=S(n,t,{});r.type&&r.message&&(i=r),t&&(r||S(Ee.current.errors,t))&&(e=t)}s=L(n),o!==s&&(d=!0)}):Promise.resolve(Z(l,he,n,$)).then(function(t){i=t[e]});return m&&m.then?m.then(o):o()}}())}catch(e){return Promise.reject(e)}};const Ye=t.useCallback(function(e){void 0===e&&(e={});try{const t=L(l.current)?_.current:{};return Promise.resolve(fe.current(Object.assign(Object.assign(Object.assign({},t),Ke()),e),le.current,he)).then(function(e){let{errors:t}=e;const r=L(t);Ee.current.isValid!==r&&Ae({isValid:r})})}catch(e){return Promise.reject(e)}},[he]),Me=t.useCallback((e,t)=>{!function(e,t,r,n,i,s){const{ref:o,ref:{name:a}}=r,u=e.current[a];if(!i){const t=F(e,a,n);!O(t)&&E(n.current,a,t)}o.type&&u?P(o)||D(o)?Array.isArray(u.options)&&u.options.length?(v(u.options).forEach(function(e,r){void 0===e&&(e={}),(w(e.ref)&&Y(e,e.ref)||s)&&(A(e.ref,t),K(u.options,"["+r+"]"))}),u.options&&!v(u.options).length&&delete e.current[a]):delete e.current[a]:(w(o)&&Y(u,o)||s)&&(A(o,t),delete e.current[a]):delete e.current[a]}(l,J.current,e,$,u,t),u&&(K(k.current,e.ref.name),K(T.current,e.ref.name))},[u]),Be=t.useCallback(e=>{if(G.current)Ae();else{for(const t of N.current)if(t.startsWith(e)){Ae();break}Le(e)}},[]),Ie=t.useCallback((e,t)=>{e&&(Me(e,t),u&&!v(e.options||[]).length&&(K(Ee.current.errors,e.ref.name),E(Ee.current.dirtyFields,e.ref.name,!0),Ae({isDirty:Re()}),ye.current.isValid&&fe.current&&Ye(),Be(e.ref.name)))},[Ye,Me]),ze=t.useCallback((e,t,r)=>{const n=r?j.current[r]:N.current;let i=U(l,se($.current),u,!1,e);if(W(e)){const r=re(e)||e;return de.current.has(r)&&(i=Object.assign(Object.assign({},y.current),i)),ee(i,e,n,O(S(_.current,e))?t:S(_.current,e),!0)}const s=O(t)?_.current:t;return Array.isArray(e)?e.reduce((e,t)=>Object.assign(Object.assign({},e),{[t]:ee(i,t,n,s)}),{}):(G.current=O(r),C(!L(i)&&i||s))},[]);function We(e,t){if(void 0===t&&(t={}),"production"!==process.env.NODE_ENV){if(!e.name)return console.warn("📋 Field is missing `name` attribute",e,"https://react-hook-form.com/api#useForm");if(de.current.has(e.name.split(/\[\d+\]$/)[0])&&!RegExp(("^"+e.name.split(/\[\d+\]$/)[0]+"[\\d+].\\w+").replace(/\[/g,"\\[").replace(/\]/g,"\\]")).test(e.name))return console.warn('📋 `name` prop should be in object shape: name="test[index].name"',e,"https://react-hook-form.com/api#useFieldArray")}const{name:r,type:n,value:i}=e,s=Object.assign({ref:e},t),o=l.current,a=ae(e),c=ne(de.current,r),f=t=>ie&&(!d(e)||t===e);let m,p=o[r],g=!0;if(p&&(a?Array.isArray(p.options)&&v(p.options).find(e=>i===e.ref.value&&f(e.ref)):f(p.ref)))return void(o[r]=Object.assign(Object.assign({},p),t));p=n?a?Object.assign({options:[...v(p&&p.options||[]),{ref:e}],ref:{type:n,name:r}},t):Object.assign({},s):s,o[r]=p;const h=O(S($.current,r));L(_.current)&&h||(m=S(h?_.current:$.current,r),g=O(m),g||c||Pe(r,m)),L(t)||(E(T.current,r,!0),!pe&&ye.current.isValid&&Z(l,he,p,$).then(e=>{const t=Ee.current.isValid;L(e)?E(k.current,r,!0):K(k.current,r),t!==L(e)&&Ae()})),!u||c&&g||!c&&K(Ee.current.dirtyFields,r),n&&function(e,t,r){let{ref:n}=e;d(n)&&r&&(n.addEventListener(t?"change":"input",r),n.addEventListener("blur",r))}(a&&p.options?p.options[p.options.length-1]:p,a||"select-one"===e.type,J.current)}const Ue=t.useCallback((e,t)=>function(r){try{r&&r.preventDefault&&(r.preventDefault(),r.persist());let n={},i=_e(U(l,se($.current),u,!0));return ye.current.isSubmitting&&Ae({isSubmitting:!0}),Promise.resolve(function(s,o){try{var u=function(){function s(){const s=function(){if(L(n)&&Object.keys(Ee.current.errors).every(e=>e in l.current))return Ae({errors:{},isSubmitting:!0}),Promise.resolve(e(i,r)).then(function(){});{function s(e){a&&((e,t)=>{for(const r in e)if(S(t,r)){const t=e[r];if(t){if(t.ref.focus&&O(t.ref.focus()))break;if(t.options){t.options[0].ref.focus();break}}}})(l.current,Ee.current.errors)}return Ee.current.errors=Object.assign(Object.assign({},Ee.current.errors),n),t?Promise.resolve(t(Ee.current.errors,r)).then(s):s()}}();if(s&&s.then)return s.then(function(){})}const o=fe.current?Promise.resolve(fe.current(i,le.current,he)).then(function(e){let{errors:t,values:r}=e;Ee.current.errors=n=t,i=r}):f(Object.values(l.current),function(e){const t=function(){if(e){const{name:t}=e.ref;return Promise.resolve(Z(l,he,e,$)).then(function(e){e[t]?(E(n,t,e[t]),K(k.current,t)):S(T.current,t)&&(K(Ee.current.errors,t),E(k.current,t,!0))})}}();if(t&&t.then)return t.then(function(){})});return o&&o.then?o.then(s):s()}()}catch(e){return o(!0,e)}return u&&u.then?u.then(o.bind(null,!1),o.bind(null,!0)):o(!1,u)}(0,function(e,t){if(Ee.current.isSubmitting=!1,Ae({isSubmitted:!0,isSubmitting:!1,isSubmitSuccessful:L(Ee.current.errors),submitCount:Ee.current.submitCount+1}),e)throw t;return t}))}catch(r){return Promise.reject(r)}},[a,he]);t.useEffect(()=>{i&&ye.current.isValid&&Ye(),Ce.current=Ce.current||!ie?Ce.current:function(e,t){const r=new MutationObserver(()=>{for(const r of Object.values(e.current))if(r&&r.options)for(const e of r.options)e&&e.ref&&w(e.ref)&&t(r);else r&&w(r.ref)&&t(r)});return r.observe(window.document,{childList:!0,subtree:!0}),r}(l,Ie)},[Ie,_.current]),t.useEffect(()=>()=>{Ce.current&&Ce.current.disconnect(),H.current=!0,"production"===process.env.NODE_ENV&&Object.values(l.current).forEach(e=>Ie(e,!0))},[]),!i&&ye.current.isValid&&(be.isValid=I(k.current,T.current)&&L(Ee.current.errors));const He={trigger:Te,setValue:t.useCallback(function(e,t,r){Fe(e,t,r||{}),we(e)&&Ae(),Le(e)},[Fe,Te]),getValues:t.useCallback(Ke,[]),register:t.useCallback(function(e,t){if(!ue)if(W(e))We({name:e},t);else{if(!h(e)||!("name"in e))return t=>t&&We(t,e);We(e,t)}},[_.current]),unregister:t.useCallback(function(e){for(const t of Array.isArray(e)?e:[e])Ie(l.current[t],!0)},[]),formState:ce?new Proxy(be,{get:(e,t)=>{if("production"!==process.env.NODE_ENV&&"isValid"===t&&pe&&console.warn("📋 `formState.isValid` is applicable with `onTouched`, `onChange` or `onBlur` mode. https://react-hook-form.com/api#formState"),t in e)return ye.current[t]=!0,e[t]}}):be},Ge=t.useMemo(()=>Object.assign({isFormDirty:Re,updateWatchedValue:Be,shouldUnregister:u,updateFormState:Ae,removeFieldEventListener:Me,watchInternal:ze,mode:me.current,reValidateMode:{isReValidateOnBlur:Oe,isReValidateOnChange:Se},validateResolver:i?Ye:void 0,fieldsRef:l,resetFieldArrayFunctionRef:X,useWatchFieldsRef:j,useWatchRenderFunctionsRef:V,fieldArrayDefaultValuesRef:g,validFieldsRef:k,fieldsWithValidationRef:T,fieldArrayNamesRef:de,readFormStateRef:ye,formStateRef:Ee,defaultValuesRef:_,shallowFieldsStateRef:$,fieldArrayValuesRef:y},He),[_.current,Be,u,Me,ze]);return Object.assign({watch:function(e,t){return ze(e,t)},control:Ge,handleSubmit:Ue,reset:t.useCallback(function(e,t){if(void 0===t&&(t={}),ie)for(const e of Object.values(l.current))if(e){const{ref:t,options:r}=e,n=ae(t)&&Array.isArray(r)?r[0].ref:t;if(d(n))try{n.closest("form").reset();break}catch(e){}}l.current={},_.current=Object.assign({},e||_.current),e&&Le(""),Object.values(X.current).forEach(e=>q(e)&&e()),$.current=u?{}:se(e||_.current),(e=>{let{errors:t,isDirty:r,isSubmitted:n,touched:i,isValid:s,submitCount:o,dirtyFields:a}=e;s||(k.current={},T.current={}),g.current={},N.current=new Set,G.current=!1,Ae({submitCount:o?Ee.current.submitCount:0,isDirty:!!r&&Ee.current.isDirty,isSubmitted:!!n&&Ee.current.isSubmitted,isValid:!!s&&Ee.current.isValid,dirtyFields:a?Ee.current.dirtyFields:{},touched:i?Ee.current.touched:{},errors:t?Ee.current.errors:{},isSubmitting:!1,isSubmitSuccessful:!1})})(t)},[]),clearErrors:t.useCallback(function(e){e&&(Array.isArray(e)?e:[e]).forEach(e=>l.current[e]&&b(e)?delete Ee.current.errors[e]:K(Ee.current.errors,e)),Ae({errors:e?Ee.current.errors:{}})},[]),setError:t.useCallback(function(e,t){const r=(l.current[e]||{}).ref;E(Ee.current.errors,e,Object.assign(Object.assign({},t),{ref:r})),Ae({isValid:!1}),t.shouldFocus&&r&&r.focus&&r.focus()},[]),errors:be.errors},He)}({defaultValues:u}),j=y(),V=t.useRef(j);return t.useEffect(()=>{if(JSON.stringify(V.current)!==JSON.stringify(j)){V.current=j;const e=setTimeout(()=>{n(j)},300);return()=>clearTimeout(e)}},[j,n]),r.createElement("form",{onSubmit:g(e=>{n(e)}),style:{flex:1}},r.createElement("div",{className:"search-container",style:{backgroundColor:"#ffffffff",padding:"24px"}},r.createElement("div",{className:"complaint-input-container",style:{display:"grid",gridTemplateColumns:"repeat(auto-fill, minmax(700px, 1fr))",gap:"20px",alignItems:"end"}},null==a?void 0:a.map(e=>r.createElement("div",{key:e.name,className:"input-fields"},r.createElement(i.Label,null,e.label),"dropdown"===e.type?r.createElement(fe,{control:N,name:e.name,render:t=>r.createElement(i.Dropdown,{selected:t.value,select:e=>{t.onChange(e)},onBlur:t.onBlur,option:e.options,optionKey:e.optionsKey,t:c})}):r.createElement(i.TextInput,o({},e,{inputRef:l,watch:y})))))))},me=e=>{let{countData:t}=e;const{t:n}=s.useTranslation(),o={flex:1,textAlign:"center",padding:"24px",borderRadius:"12px",boxShadow:"0 4px 6px -1px rgba(0, 0, 0, 0.1)",border:"1px solid #EAECF0"};return r.createElement("div",{className:"status-container",style:{display:"flex",gap:"24px",marginBottom:"32px"}},r.createElement(i.Card,{style:o},r.createElement("div",{style:{fontSize:"32px",fontWeight:"700",color:"#101828"}},(null==t?void 0:t.total)||0),r.createElement("div",{style:{color:"#667085",marginTop:"8px",fontSize:"14px",fontWeight:"500"}},n("EKYC_TOTAL"))),r.createElement(i.Card,{style:o},r.createElement("div",{style:{fontSize:"32px",fontWeight:"700",color:"#B54708"}},(null==t?void 0:t.pending)||0),r.createElement("div",{style:{color:"#667085",marginTop:"8px",fontSize:"14px",fontWeight:"500"}},n("EKYC_PENDING"))),r.createElement(i.Card,{style:o},r.createElement("div",{style:{fontSize:"32px",fontWeight:"700",color:"#027A48"}},(null==t?void 0:t.completed)||0),r.createElement("div",{style:{color:"#667085",marginTop:"8px",fontSize:"14px",fontWeight:"500"}},n("EKYC_COMPLETED"))))},pe=e=>{let{data:o,isLoading:a,onSort:u,onNextPage:c,onPrevPage:l,currentPage:f,pageSizeLimit:d,onPageSizeChange:m,parentRoute:p,searchParams:g,sortParams:h,totalRecords:b,countData:v,onSearch:y,searchFields:E}=e;const{t:C}=s.useTranslation(),O=t.useMemo(()=>[{Header:C("EKYC_APPLICATION_NO"),accessor:"applicationNumber",Cell:e=>{var t;let{row:i}=e;const s=(null===(t=i.original)||void 0===t?void 0:t.applicationNumber)||"NA";return r.createElement(n.Link,{to:p+"/application-details/"+s},r.createElement("span",{className:"link",style:{color:"#F47738",fontWeight:"600"}},s))}},{Header:C("EKYC_CITIZEN_NAME"),accessor:"citizenName",Cell:e=>{var t;let{row:n}=e;return r.createElement("span",null,(null===(t=n.original)||void 0===t?void 0:t.citizenName)||"NA")}},{Header:C("EKYC_MOBILE_NO"),accessor:"mobileNumber",Cell:e=>{var t;let{row:n}=e;return r.createElement("span",null,(null===(t=n.original)||void 0===t?void 0:t.mobileNumber)||"NA")}},{Header:C("EKYC_STATUS"),accessor:"status",Cell:e=>{var t;let{row:n}=e;const i=(null===(t=n.original)||void 0===t?void 0:t.status)||"DEFAULT",s=(e=>{const t={ALL:{bg:"#F4F4F4",text:"#505A5F"},COMPLETED:{bg:"#E7F4E9",text:"#0B6623"},PENDING:{bg:"#FFF5E6",text:"#945700"},REJECTED:{bg:"#FBEAE9",text:"#AF1E11"},DEFAULT:{bg:"#F4F4F4",text:"#505A5F"}};return t[e]||t.DEFAULT})(i);return r.createElement("span",{style:{padding:"6px 12px",borderRadius:"20px",fontSize:"12px",fontWeight:"600",backgroundColor:s.bg,color:s.text,textTransform:"uppercase"}},C("EKYC_STATUS_"+i))}}],[C,p]),S=t.useMemo(()=>(null==o?void 0:o.items)||[],[o]);return r.createElement("div",{className:"inbox-wrapper",style:{padding:"24px",backgroundColor:"#f4f7f9",minWidth:"170vh"}},r.createElement("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:"24px"}},r.createElement(i.Header,{style:{margin:0}},C("EKYC_INBOX_HEADER")),r.createElement(n.Link,{to:p+"/create-kyc",style:{textDecoration:"none"}},r.createElement(i.SubmitBar,{label:C("EKYC_CREATE_KYC")}))),r.createElement("div",{style:{marginBottom:"24px"}},r.createElement(me,{countData:v})),r.createElement(i.Card,{style:{marginBottom:"24px",padding:"20px"}},r.createElement(de,{onSearch:y,searchFields:E,searchParams:g})),r.createElement(i.Card,{style:{padding:"0px",overflow:"hidden"}},r.createElement(i.Table,{t:C,data:S,columns:O,isLoading:a,onSort:u,sortParams:h,totalRecords:b,onNextPage:c,onPrevPage:l,currentPage:f,pageSizeLimit:d,onPageSizeChange:m,getCellProps:e=>({style:{padding:"20px 18px",fontSize:"16px"}})})))},ge=[{applicationNumber:"EKYC-2024-001",citizenName:"Rahul Sharma",mobileNumber:"9876543210",status:"COMPLETED"},{applicationNumber:"EKYC-2024-002",citizenName:"Anjali Devi",mobileNumber:"9123456789",status:"PENDING"},{applicationNumber:"EKYC-2024-003",citizenName:"Amit Kumar",mobileNumber:"8888888888",status:"REJECTED"},{applicationNumber:"EKYC-2024-004",citizenName:"Priya Singh",mobileNumber:"7777777777",status:"COMPLETED"},{applicationNumber:"EKYC-2024-005",citizenName:"Suresh Gupta",mobileNumber:"6666666666",status:"PENDING"}],he=e=>{let{parentRoute:n,businessService:i="EKYC",initialStates:a={}}=e;Digit.ULBService.getCurrentTenantId();const{t:u}=s.useTranslation(),[c,l]=t.useState(a.pageOffset||0),[f,d]=t.useState(a.pageSize||10),[m,p]=t.useState(a.sortParams||[{id:"createdTime",desc:!0}]),g=t.useMemo(()=>({label:u("EKYC_STATUS_ALL"),value:""}),[u]),[h,b]=t.useState(a.searchParams||{status:g}),v=t.useMemo(()=>ge.filter(e=>{var t;let r=!0;const n=void 0!==(null===(t=h.status)||void 0===t?void 0:t.value)?h.status.value:h.status;return n&&e.status!==n&&(r=!1),r}),[h]),y=t.useMemo(()=>({total:ge.length,completed:ge.filter(e=>"COMPLETED"===e.status).length,pending:ge.filter(e=>"PENDING"===e.status).length,rejected:ge.filter(e=>"REJECTED"===e.status).length}),[]),E=t.useCallback(e=>{b(t=>o({},t,e)),l(0)},[]),C=t.useCallback(e=>{e.length>0&&p(e)},[]),O=t.useMemo(()=>[{label:u("EKYC_STATUS"),name:"status",type:"dropdown",options:[{label:u("EKYC_STATUS_ALL"),value:""},{label:u("EKYC_STATUS_COMPLETED"),value:"COMPLETED"},{label:u("EKYC_STATUS_PENDING"),value:"PENDING"},{label:u("EKYC_STATUS_REJECTED"),value:"REJECTED"}],optionsKey:"label"}],[u]);return r.createElement("div",{className:"inbox-main-container"},r.createElement(pe,{businessService:i,data:{items:v,totalCount:v.length},isLoading:!1,searchFields:O,onSearch:E,onSort:C,onNextPage:()=>l(e=>e+f),onPrevPage:()=>l(e=>Math.max(e-f,0)),currentPage:Math.floor(c/f),pageSizeLimit:f,onPageSizeChange:e=>{const t=Number(e.target.value);d(t),l(0)},parentRoute:n,searchParams:h,sortParams:m,totalRecords:v.length,countData:y}))},be=e=>{let{path:t}=e;return r.createElement(n.Switch,null,r.createElement(n.Route,{path:t+"/dashboard"},r.createElement(he,null)),r.createElement(n.Route,{path:t+"/create-kyc"},r.createElement("div",null,"Create KYC Page Placeholder")),r.createElement(n.Route,{path:""+t},r.createElement(he,null)))},ve=e=>{let{stateCode:t,userType:i,tenants:s}=e;const{path:o,url:a}=n.useRouteMatch(),u=Digit.StoreData.getCurrentLanguage(),{isLoading:c}=Digit.Services.useStore({stateCode:t,moduleCode:"EKYC",language:u});return Digit.SessionStorage.set("EKYC_TENANTS",s),c?null:"employee"===i?r.createElement(be,{path:o,url:a,userType:i,tenants:s}):null},ye={EKYCModule:ve,EKYCCard:()=>{const{t:e}=s.useTranslation(),t={Icon:r.createElement(i.PersonIcon,null),moduleName:e("ACTION_TEST_EKYC"),kpis:[{count:"-",label:e("TOTAL_EKYC"),link:"/digit-ui/employee/ekyc/dashboard"}],links:[{label:e("EKYC_DASHBOARD"),link:"/digit-ui/employee/ekyc/dashboard"},{label:e("EKYC_CREATE_KYC"),link:"/digit-ui/employee/ekyc/create-kyc"}]};return r.createElement(i.EmployeeModuleCard,t)},EKYCInbox:he,EKYCDesktopInbox:pe};exports.EkycModule=ve,exports.default=ve,exports.initEkycComponents=()=>{Object.entries(ye).forEach(e=>{let[t,r]=e;Digit.ComponentRegistryService.setComponent(t,r)})};

package/package.json

@@ -0,0 +1,28 @@
+{
+    "name": "@djb25/digit-ui-module-ekyc",
+    "version": "1.0.0",
+    "description": "Digit UI Module for Ekyc",
+    "main": "dist/index.js",
+    "module": "dist/index.modern.js",
+    "source": "src/Module.js",
+    "scripts": {
+        "start": "microbundle-crl watch --no-compress --format modern,cjs",
+        "build": "microbundle-crl --compress --no-sourcemap --format cjs",
+        "prepublish": "yarn build"
+    },
+    "keywords": [
+        "digit-ui",
+        "module",
+        "ekyc"
+    ],
+    "author": "Shivam Nishad",
+    "license": "ISC",
+    "dependencies": {
+        "@djb25/digit-ui-react-components": "1.0.0",
+        "microbundle-crl": "^0.13.11",
+        "react": "17.0.2",
+        "react-dom": "17.0.2",
+        "react-i18next": "11.16.2",
+        "react-router-dom": "5.3.0"
+    }
+}

package/src/Module.js

@@ -0,0 +1,56 @@
+import React from "react";
+import { Route, Switch, useRouteMatch } from "react-router-dom";
+import EKYCCard from "./components/EKYCCard";
+// import EkycDashboard from "./components/Dashboard";
+import Inbox from "./pages/employee/Inbox";
+import DesktopInbox from "./components/DesktopInbox";
+
+const EmployeeApp = ({ path, url, userType, tenants }) => {
+    return (
+        <Switch>
+            <Route path={`${path}/dashboard`}>
+                <Inbox />
+            </Route>
+            {/* <Route path={`${path}/inbox`}>
+                <Inbox />
+            </Route> */}
+            <Route path={`${path}/create-kyc`}>
+                <div>Create KYC Page Placeholder</div>
+            </Route>
+            <Route path={`${path}`}>
+                <Inbox />
+            </Route>
+        </Switch>
+    );
+};
+
+export const EkycModule = ({ stateCode, userType, tenants }) => {
+    const { path, url } = useRouteMatch();
+    const moduleCode = "EKYC";
+    const language = Digit.StoreData.getCurrentLanguage();
+    const { isLoading, data: store } = Digit.Services.useStore({ stateCode, moduleCode, language });
+    Digit.SessionStorage.set("EKYC_TENANTS", tenants);
+
+    if (isLoading) {
+        return null;
+    }
+    if (userType === "employee") {
+        return <EmployeeApp path={path} url={url} userType={userType} tenants={tenants} />;
+    } else return null;
+};
+
+const componentsToRegister = {
+    EKYCModule: EkycModule,
+    EKYCCard: EKYCCard,
+    // EkycDashboard: EkycDashboard,
+    EKYCInbox: Inbox,
+    EKYCDesktopInbox: DesktopInbox,
+};
+
+export const initEkycComponents = () => {
+    Object.entries(componentsToRegister).forEach(([key, value]) => {
+        Digit.ComponentRegistryService.setComponent(key, value);
+    });
+};
+
+export default EkycModule;

package/src/components/DesktopInbox.js

@@ -0,0 +1,147 @@
+import React, { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { Table, SubmitBar, Header, Card } from "@djb25/digit-ui-react-components";
+import { Link } from "react-router-dom";
+import SearchApplication from "./Search";
+import StatusCards from "./StatusCards";
+
+const DesktopInbox = ({
+    data,
+    isLoading,
+    onSort,
+    onNextPage,
+    onPrevPage,
+    currentPage,
+    pageSizeLimit,
+    onPageSizeChange,
+    parentRoute,
+    searchParams,
+    sortParams,
+    totalRecords,
+    countData,
+    onSearch,
+    searchFields,
+}) => {
+    const { t } = useTranslation();
+
+    // Helper for Status Styles
+    const getStatusStyle = (status) => {
+        const styles = {
+            ALL: { bg: "#F4F4F4", text: "#505A5F" },
+            COMPLETED: { bg: "#E7F4E9", text: "#0B6623" },
+            PENDING: { bg: "#FFF5E6", text: "#945700" },
+            REJECTED: { bg: "#FBEAE9", text: "#AF1E11" },
+            DEFAULT: { bg: "#F4F4F4", text: "#505A5F" }
+        };
+        return styles[status] || styles.DEFAULT;
+    };
+
+    const columns = useMemo(
+        () => [
+            {
+                Header: t("EKYC_APPLICATION_NO"),
+                accessor: "applicationNumber",
+                Cell: ({ row }) => {
+                    const applicationNumber = row.original?.applicationNumber || "NA";
+                    return (
+                        <Link to={`${parentRoute}/application-details/${applicationNumber}`}>
+                            <span className="link" style={{ color: "#F47738", fontWeight: "600" }}>
+                                {applicationNumber}
+                            </span>
+                        </Link>
+                    );
+                },
+            },
+            {
+                Header: t("EKYC_CITIZEN_NAME"),
+                accessor: "citizenName",
+                Cell: ({ row }) => <span>{row.original?.citizenName || "NA"}</span>
+            },
+            {
+                Header: t("EKYC_MOBILE_NO"),
+                accessor: "mobileNumber",
+                Cell: ({ row }) => <span>{row.original?.mobileNumber || "NA"}</span>
+            },
+            {
+                Header: t("EKYC_STATUS"),
+                accessor: "status",
+                Cell: ({ row }) => {
+                    const status = row.original?.status || "DEFAULT";
+                    const theme = getStatusStyle(status);
+                    return (
+                        <span style={{
+                            padding: "6px 12px",
+                            borderRadius: "20px",
+                            fontSize: "12px",
+                            fontWeight: "600",
+                            backgroundColor: theme.bg,
+                            color: theme.text,
+                            textTransform: "uppercase"
+                        }}>
+                            {t(`EKYC_STATUS_${status}`)}
+                        </span>
+                    );
+                },
+            },
+        ],
+        [t, parentRoute]
+    );
+
+    const tableData = useMemo(() => {
+        return data?.items || [];
+    }, [data]);
+
+    return (
+        <div className="inbox-wrapper" style={{ padding: "24px", backgroundColor: "#f4f7f9", minWidth: "170vh" }}>
+            {/* Top Bar: Header + Action Button */}
+            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "24px" }}>
+                <Header style={{ margin: 0 }}>{t("EKYC_INBOX_HEADER")}</Header>
+                <Link to={`${parentRoute}/create-kyc`} style={{ textDecoration: "none" }}>
+                    <SubmitBar label={t("EKYC_CREATE_KYC")} />
+                </Link>
+            </div>
+
+            {/* Metrics Section */}
+            <div style={{ marginBottom: "24px" }}>
+                <StatusCards countData={countData} />
+            </div>
+
+            {/* Search Section */}
+            <Card style={{ marginBottom: "24px", padding: "20px" }}>
+                <SearchApplication
+                    onSearch={onSearch}
+                    searchFields={searchFields}
+                    searchParams={searchParams}
+                />
+            </Card>
+
+            {/* Table Section */}
+            <Card style={{ padding: "0px", overflow: "hidden" }}>
+                <Table
+                    t={t}
+                    data={tableData}
+                    columns={columns}
+                    isLoading={isLoading}
+                    onSort={onSort}
+                    sortParams={sortParams}
+                    totalRecords={totalRecords}
+                    onNextPage={onNextPage}
+                    onPrevPage={onPrevPage}
+                    currentPage={currentPage}
+                    pageSizeLimit={pageSizeLimit}
+                    onPageSizeChange={onPageSizeChange}
+                    getCellProps={(cellInfo) => {
+                        return {
+                            style: {
+                                padding: "20px 18px",
+                                fontSize: "16px",
+                            },
+                        };
+                    }}
+                />
+            </Card>
+        </div>
+    );
+};
+
+export default DesktopInbox;

package/src/components/EKYCCard.js

@@ -0,0 +1,33 @@
+import { PersonIcon, EmployeeModuleCard } from "@djb25/digit-ui-react-components";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+const EKYCCard = () => {
+    const { t } = useTranslation();
+
+    const propsForModuleCard = {
+        Icon: <PersonIcon />,
+        moduleName: t("ACTION_TEST_EKYC"),
+        kpis: [
+            {
+                count: "-",
+                label: t("TOTAL_EKYC"),
+                link: `/digit-ui/employee/ekyc/dashboard`
+            }
+        ],
+        links: [
+            {
+                label: t("EKYC_DASHBOARD"),
+                link: `/digit-ui/employee/ekyc/dashboard`
+            },
+            {
+                label: t("EKYC_CREATE_KYC"),
+                link: `/digit-ui/employee/ekyc/create-kyc`
+            },
+        ]
+    }
+
+    return <EmployeeModuleCard {...propsForModuleCard} />
+};
+
+export default EKYCCard;

package/src/components/Search.js

@@ -0,0 +1,77 @@
+import React, { useEffect, useRef } from "react";
+import { useForm, Controller } from "react-hook-form";
+import { TextInput, Label, LinkLabel, Dropdown } from "@djb25/digit-ui-react-components";
+import { useTranslation } from "react-i18next";
+
+const SearchApplication = ({ onSearch, searchFields, searchParams }) => {
+    const { t } = useTranslation();
+    const { register, handleSubmit, reset, watch, control } = useForm({
+        defaultValues: searchParams,
+    });
+
+    const onSubmitInput = (data) => {
+        onSearch(data);
+    };
+
+    function clearSearch() {
+        const resetValues = searchFields.reduce((acc, field) => ({ ...acc, [field?.name]: "" }), {});
+        reset(resetValues);
+        onSearch({ ...resetValues });
+    }
+
+    // Watch all fields
+    const watchedFields = watch();
+    const prevFields = useRef(watchedFields);
+
+    // Trigger search only when fields actually change and compare values to avoid loops
+    useEffect(() => {
+        const isChanged = JSON.stringify(prevFields.current) !== JSON.stringify(watchedFields);
+        if (isChanged) {
+            prevFields.current = watchedFields;
+            // Debounce or delay if needed, but for dropdowns immediate is fine
+            const timeoutId = setTimeout(() => {
+                onSearch(watchedFields);
+            }, 300); // Small debounce to be safe
+            return () => clearTimeout(timeoutId);
+        }
+    }, [watchedFields, onSearch]);
+
+    return (
+        <form onSubmit={handleSubmit(onSubmitInput)} style={{ flex: 1 }}>
+            <div className="search-container" style={{ backgroundColor: "#ffffffff", padding: "24px" }}>
+                <div className="complaint-input-container" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(700px, 1fr))", gap: "20px", alignItems: "end" }}>
+                    {searchFields?.map((input) => (
+                        <div key={input.name} className="input-fields">
+                            <Label>{input.label}</Label>
+                            {input.type === "dropdown" ? (
+                                <Controller
+                                    control={control}
+                                    name={input.name}
+                                    render={(props) => (
+                                        <Dropdown
+                                            selected={props.value}
+                                            select={(val) => {
+                                                props.onChange(val);
+                                            }}
+                                            onBlur={props.onBlur}
+                                            option={input.options}
+                                            optionKey={input.optionsKey}
+                                            t={t}
+                                        />
+                                    )}
+                                />
+                            ) : (
+                                <TextInput {...input} inputRef={register} watch={watch} />
+                            )}
+                        </div>
+                    ))}
+                    {/* <div className="search-submit-wrapper" style={{ display: "flex", alignItems: "center", gap: "20px", height: "40px" }}>
+                        <LinkLabel onClick={clearSearch}>{t("ES_COMMON_CLEAR_ALL")}</LinkLabel>
+                    </div> */}
+                </div>
+            </div>
+        </form>
+    );
+};
+
+export default SearchApplication;

package/src/components/StatusCards.js

@@ -0,0 +1,35 @@
+import React from "react";
+import { Card } from "@djb25/digit-ui-react-components";
+import { useTranslation } from "react-i18next";
+
+const StatusCards = ({ countData }) => {
+    const { t } = useTranslation();
+
+    const cardStyle = {
+        flex: 1,
+        textAlign: "center",
+        padding: "24px",
+        borderRadius: "12px",
+        boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
+        border: "1px solid #EAECF0"
+    };
+
+    return (
+        <div className="status-container" style={{ display: "flex", gap: "24px", marginBottom: "32px" }}>
+            <Card style={cardStyle}>
+                <div style={{ fontSize: "32px", fontWeight: "700", color: "#101828" }}>{countData?.total || 0}</div>
+                <div style={{ color: "#667085", marginTop: "8px", fontSize: "14px", fontWeight: "500" }}>{t("EKYC_TOTAL")}</div>
+            </Card>
+            <Card style={cardStyle}>
+                <div style={{ fontSize: "32px", fontWeight: "700", color: "#B54708" }}>{countData?.pending || 0}</div>
+                <div style={{ color: "#667085", marginTop: "8px", fontSize: "14px", fontWeight: "500" }}>{t("EKYC_PENDING")}</div>
+            </Card>
+            <Card style={cardStyle}>
+                <div style={{ fontSize: "32px", fontWeight: "700", color: "#027A48" }}>{countData?.completed || 0}</div>
+                <div style={{ color: "#667085", marginTop: "8px", fontSize: "14px", fontWeight: "500" }}>{t("EKYC_COMPLETED")}</div>
+            </Card>
+        </div>
+    );
+};
+
+export default StatusCards;

package/src/pages/employee/Inbox.js

@@ -0,0 +1,118 @@
+import React, { useCallback, useEffect, useState, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import DesktopInbox from "../../components/DesktopInbox";
+
+const MOCK_DATA_ITEMS = [
+    { applicationNumber: "EKYC-2024-001", citizenName: "Rahul Sharma", mobileNumber: "9876543210", status: "COMPLETED" },
+    { applicationNumber: "EKYC-2024-002", citizenName: "Anjali Devi", mobileNumber: "9123456789", status: "PENDING" },
+    { applicationNumber: "EKYC-2024-003", citizenName: "Amit Kumar", mobileNumber: "8888888888", status: "REJECTED" },
+    { applicationNumber: "EKYC-2024-004", citizenName: "Priya Singh", mobileNumber: "7777777777", status: "COMPLETED" },
+    { applicationNumber: "EKYC-2024-005", citizenName: "Suresh Gupta", mobileNumber: "6666666666", status: "PENDING" },
+];
+
+const Inbox = ({
+    parentRoute,
+    businessService = "EKYC",
+    initialStates = {},
+    filterComponent,
+    isInbox,
+}) => {
+    const tenantId = Digit.ULBService.getCurrentTenantId();
+    const { t } = useTranslation();
+
+    // 1. Unified State Management
+    const [pageOffset, setPageOffset] = useState(initialStates.pageOffset || 0);
+    const [pageSize, setPageSize] = useState(initialStates.pageSize || 10);
+    const [sortParams, setSortParams] = useState(initialStates.sortParams || [{ id: "createdTime", desc: true }]);
+
+    // Define the default option for the dropdown
+    const defaultStatusOption = useMemo(() => ({ label: t("EKYC_STATUS_ALL"), value: "" }), [t]);
+
+    // Maintain the full search objects for the Search component
+    const [searchParams, setSearchParams] = useState(initialStates.searchParams || { status: defaultStatusOption });
+
+    // 2. Local Filtering Logic for Static Data
+    const filteredStaticData = useMemo(() => {
+        return MOCK_DATA_ITEMS.filter((item) => {
+            let match = true;
+            // Extract the string value from the status object if it exists
+            const currentStatus = searchParams.status?.value !== undefined ? searchParams.status.value : searchParams.status;
+
+            if (currentStatus && item.status !== currentStatus) {
+                match = false;
+            }
+            return match;
+        });
+    }, [searchParams]);
+
+    const staticCountData = useMemo(() => {
+        return {
+            total: MOCK_DATA_ITEMS.length,
+            completed: MOCK_DATA_ITEMS.filter(i => i.status === "COMPLETED").length,
+            pending: MOCK_DATA_ITEMS.filter(i => i.status === "PENDING").length,
+            rejected: MOCK_DATA_ITEMS.filter(i => i.status === "REJECTED").length
+        };
+    }, []);
+
+    // 3. Handlers
+    const handleSearch = useCallback((filterParam) => {
+        // Here we keep the full objects (like for dropdowns) in searchParams
+        // so that the Search component can display them correctly.
+        setSearchParams((prev) => ({ ...prev, ...filterParam }));
+        setPageOffset(0);
+    }, []);
+
+    const fetchNextPage = () => setPageOffset((prev) => prev + pageSize);
+    const fetchPrevPage = () => setPageOffset((prev) => Math.max(prev - pageSize, 0));
+
+    const handlePageSizeChange = (e) => {
+        const newSize = Number(e.target.value);
+        setPageSize(newSize);
+        setPageOffset(0);
+    };
+
+    const handleSort = useCallback((args) => {
+        if (args.length > 0) setSortParams(args);
+    }, []);
+
+    // 4. Form Configuration
+    const searchFields = useMemo(() => [
+        {
+            label: t("EKYC_STATUS"),
+            name: "status",
+            type: "dropdown",
+            options: [
+                { label: t("EKYC_STATUS_ALL"), value: "" },
+                { label: t("EKYC_STATUS_COMPLETED"), value: "COMPLETED" },
+                { label: t("EKYC_STATUS_PENDING"), value: "PENDING" },
+                { label: t("EKYC_STATUS_REJECTED"), value: "REJECTED" },
+            ],
+            optionsKey: "label"
+        },
+    ], [t]);
+
+    return (
+        <div className="inbox-main-container">
+            <DesktopInbox
+                businessService={businessService}
+                data={{ items: filteredStaticData, totalCount: filteredStaticData.length }}
+                isLoading={false}
+                searchFields={searchFields}
+                onSearch={handleSearch}
+                onSort={handleSort}
+                onNextPage={fetchNextPage}
+                onPrevPage={fetchPrevPage}
+                currentPage={Math.floor(pageOffset / pageSize)}
+                pageSizeLimit={pageSize}
+                onPageSizeChange={handlePageSizeChange}
+                parentRoute={parentRoute}
+                searchParams={searchParams}
+                sortParams={sortParams}
+                totalRecords={filteredStaticData.length}
+                countData={staticCountData}
+            />
+        </div>
+    );
+};
+
+export default Inbox;