Merge pull request #207 from vselvarajijay/main

Fixing overrides for @akello/react

apps/cocm-registry/src/apps/registry_list/RegistrySelector.tsx

@@ -1,73 +1,17 @@
 
-import AkelloLog from "../../images/logos/akello/akello-corner-logo.svg"
-import AkelloLogWhite from "../../images/logos/akello/akello-white-logo.png"
 import {useEffect, useState} from "react";
 import {getUserRegistries} from "../../api/user";
 import {useDispatch, useSelector} from "react-redux";
 import {RootState} from "../../store";
 import {useNavigate} from "react-router";
 import {setSelectedRegistry} from "../../reducers/appSlice";
-import {TopNavigation, ThemeSwap} from "@akello/react"
-
-interface RegistryProps {
-    id: string
-    name: string
-    members: number
-    logo_url?: string
-    patients: number
-    description: string
-    questionnaires: [any]
-    integrations?: [any]
-}
-
-const Registry:React.FC<RegistryProps> = ({id, name, members, patients, questionnaires, description, integrations, logo_url}) => {
-    const navigate = useNavigate()
-    const dispatch = useDispatch()
-    console.log('integrations: ' + integrations)
-    return (
-        <>
-            <div className={"flex flex-row w-full justify-between py-8 px-12"} onClick={() => {
-                dispatch(setSelectedRegistry({
-                    id: id,
-                    name: name
-                }))
-                localStorage.setItem("selectedRegistry",  JSON.stringify({id: id, name: name}))
-                navigate('/registry')
-            }}>
-                <div className={" flex flex-row space-x-4"}>
-                    <div>
-                        <img src={logo_url ? logo_url : AkelloLog} className={"w-28 h-auto rounded-lg cursor-pointer"}/>
-                    </div>
-                    <div className={"flex flex-col space-y-4"}>
-                        <div className={"font-medium text-3xl"}>
-                            {name}
-                        </div>
-                        <div className="flex flex-row">
-                            {members} members | {patients} active patients | {questionnaires.length} screeners
-                        </div>
-                        <div>
-
-                        </div>
-                    </div>
-
-                </div>
-
-                <div className={"my-auto"}>
-                    <button className={"btn btn-secondary rounded-lg text-xl"}>
-                        LAUNCH
-                    </button>
-
-                </div>
-
-            </div>
-        </>
-    )
-}
+import {RegistrySelectRow, TopNavigation, WelcomeBanner, ThemeSwap} from "@akello/react"
 
 
 const Section = () => {
     const token = useSelector((state: RootState) => state.app.token)
     const navigate = useNavigate()
+    const dispatch = useDispatch()
     const [create, setCreate] = useState(false)
     const [registries, setRegistries] = useState([])
     const [isLoading, setIsLoading] = useState(true)
@@ -107,7 +51,26 @@ const Section = () => {
                     {
                         !isLoading && registries.map((registry) => {
                             return (
-                                <Registry id={registry['id']} name={registry['name']} members={registry['members']} patients={registry['active_patients']} questionnaires={registry['questionnaires']} integrations={registry['integrations']} description={''} logo_url={registry['logo_url']} />
+                                <>
+                                <RegistrySelectRow 
+                                    id={"registry['id']"} 
+                                    onClick={() => {
+                                        localStorage.setItem("selectedRegistry",  JSON.stringify({id: registry['id'], name: registry['name']}))
+                                        dispatch(setSelectedRegistry({
+                                            id: registry['id'],
+                                            name: registry['name']
+                                        }))
+                                        navigate('/registry')
+                                    }}
+                                    name={registry['name']}
+                                    members={registry['members']}
+                                    logo_url={''}
+                                    patients={3}
+                                    screeners={3}
+                                />
+
+                                </>
+
                             )
                         })
                     }
@@ -147,10 +110,9 @@ const RegistrySelector:React.FC<RegistrySelectorProps> = ({signOut}) => {
                         </>
                     }
                 />
+
                 <div className="p-4  mx-auto  max-w-7xl pb-24 pt-10 sm:pb-32 lg:grid lg:grid-cols-1 lg:gap-x-8 lg:px-8 lg:py-20 space-y-12">
-                    <div className={"text-4xl font-black"}>
-                        🌈 Welcome back, {userProfile.first_name}
-                    </div>
+                    <WelcomeBanner first_name={userProfile.first_name} />
                     <Section />
                 </div>
             </div>

apps/cocm-registry/tailwind.config.js

@@ -3,7 +3,8 @@ module.exports = {
   content: [
     "./src/**/*.{html,js,tsx}",
     "./node_modules/react-tailwindcss-datepicker/dist/index.esm.js",
-    './node_modules/daisyui/dist/**/*.js'
+    './node_modules/daisyui/dist/**/*.js',    
+    './node_modules/@akello/react/dist/**/*.js'    
   ],
   daisyui: {
     themes: ["light", "dark", "cupcake"],