@campxdev/react-blueprint 0.1.52 → 0.1.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "0.1.52",
+  "version": "0.1.54",
   "main": "./export.ts",
   "private": false,
   "dependencies": {

package/src/App.tsx

@@ -10,6 +10,7 @@ function App() {
         actions={[<p>asdjflsf</p>]}
         userFullName="Srikanth Yellapragada"
         collapsed={false}
+        institutionsData={[]}
       />
     </Providers>
   );

package/src/components/Feedback/Tutorial/Tutorial.tsx

@@ -65,7 +65,7 @@ export const Tutorial = ({
       if (!userTours.includes(tourName)) {
         localStorage.setItem(
           "userTours",
-          JSON.stringify([...JSON.parse(userTours), { ...reqData }])
+          JSON.stringify([...JSON.parse(userTours), tourName])
         );
       }
       await axios.post("/square/tours/complete", { reqData });

package/src/components/Image/Image.tsx

@@ -0,0 +1,45 @@
+import { Box } from "@mui/material";
+// const brokenImage = require("./broken-image.png");
+
+interface ImageProps {
+  src: string;
+  alt: string;
+  height: string | number;
+  width: string | number;
+  fit?: "cover" | "contain" | "fill";
+  radius?: string | number;
+  defaultImage?: any;
+}
+
+export default function Image({
+  src,
+  alt,
+  height,
+  width,
+  fit = "contain",
+  radius = "10px",
+  defaultImage = null,
+}: ImageProps) {
+  return (
+    <Box
+      sx={{
+        height: height,
+        width: width,
+        "& > img": {
+          borderRadius: radius,
+          width: "100%",
+          height: "100%",
+          objectFit: fit,
+        },
+      }}
+    >
+      <img
+        src={src || defaultImage}
+        alt={alt}
+        onError={(e: any) => {
+          e.target.src = defaultImage ? defaultImage : "";
+        }}
+      />
+    </Box>
+  );
+}

package/src/components/Layout/AppHeader/AppHeader.tsx

@@ -14,6 +14,7 @@ export interface AppHeaderProps {
   userFullName: string;
   designation?: string;
   collapsed: boolean;
+  institutionsData?: any[];
   profileSx?: any;
   showActiveDevices?: boolean;
 }
@@ -26,6 +27,7 @@ export const AppHeader = ({
   clientName,
   userFullName,
   collapsed,
+  institutionsData,
   showActiveDevices = true,
 }: AppHeaderProps) => {
   return (
@@ -42,6 +44,7 @@ export const AppHeader = ({
         <UserBox
           fullName={userFullName}
           actions={[]}
+          institutionsData={institutionsData}
           profileSx={profileSx}
           designation={designation}
           showActiveDevices={showActiveDevices}

package/src/components/Layout/AppHeader/AppHeaderActions/SwitchInstitution.tsx

@@ -0,0 +1,100 @@
+import { Box, Stack, TextField, Typography, styled } from "@mui/material";
+import Cookies from "js-cookie";
+import { useState } from "react";
+import { isDevelopment } from "../../../../utils/constants";
+import Image from "../../../Image/Image";
+
+const SwitchInstitution = ({ close, institutions }: any) => {
+  const [searchText, setSearchText] = useState<string>("");
+
+  const filteredInstitutions = institutions?.filter((item: any) =>
+    item.name.toLowerCase().includes(searchText.toLowerCase())
+  );
+
+  return (
+    <Box sx={{ padding: "20px" }}>
+      <Stack>
+        <Typography variant="subtitle3" textAlign={"center"}>
+          Select an Institution
+        </Typography>
+
+        <TextField
+          label="Search Institution"
+          variant="outlined"
+          value={searchText}
+          sx={{
+            display: "flex",
+            alignItems: "center",
+          }}
+          fullWidth
+          onChange={(e) => setSearchText(e.target.value)}
+        />
+      </Stack>
+      <StyledInstitutionContainer>
+        {filteredInstitutions?.map((item: any, index: number) => (
+          <InstitutionCard institution={item} key={index} />
+        ))}
+      </StyledInstitutionContainer>
+    </Box>
+  );
+};
+
+const InstitutionCard = ({ institution }: any) => {
+  const handleClick = () => {
+    if (isDevelopment) {
+      Cookies.set("campx_institution", institution?.code);
+    } else {
+    }
+
+    window.location.replace(`${window.location.origin}/${institution?.code}`);
+  };
+
+  return (
+    <StyledInstitutionCard onClick={handleClick}>
+      <Image
+        alt="logo"
+        height={"100px"}
+        width="100%"
+        src={institution?.imageSquare?.url}
+      />
+      <Typography variant="body2">{institution?.name}</Typography>
+    </StyledInstitutionCard>
+  );
+};
+
+const StyledInstitutionCard = styled(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  gap: "20px",
+  padding: "14px",
+  border: "1px solid black",
+  borderRadius: "10px",
+  cursor: "pointer",
+  width: "200px",
+  flexShrink: 0,
+}));
+
+export const StyledInstitutionContainer = styled(Box)(({ theme }) => ({
+  marginTop: "20px",
+  display: "flex",
+  justifyContent: "center",
+  padding: "20px",
+  flexWrap: "wrap",
+  gap: "20px",
+  "&::-webkit-scrollbar": {
+    width: "0.5em",
+    height: "0.5em",
+    backgroundColor: "rgba(0, 0, 0, 0.1)",
+  },
+  "&::-webkit-scrollbar-thumb": {
+    backgroundColor: "rgba(0, 0, 0, 0.2)",
+    borderRadius: "3px",
+
+    "&:hover": {
+      background: "rgba(0, 0, 0, 0.3)",
+    },
+  },
+}));
+
+export default SwitchInstitution;

package/src/components/Layout/AppHeader/AppHeaderActions/UserBox.tsx

@@ -1,8 +1,11 @@
-import { Avatar, Stack, Typography, useTheme } from "@mui/material";
+import { Avatar, Box, Stack, Typography, useTheme } from "@mui/material";
 import { ReactNode } from "react";
+import DialogButton from "../../../Navigation/DialogButton/DialogButton";
 import { DropdownMenu } from "../../../Navigation/DropDownMenu/DropDownMenu";
 import { DropdownMenuItem } from "../../../Navigation/DropDownMenu/DropdownMenuItem";
+import { StyledMenuItem } from "../../../Navigation/DropDownMenu/styles";
 import { Icons } from "../../../export";
+import SwitchInstitution from "./SwitchInstitution";
 
 const getStartingLetters = (text: string) => {
   if (!text) return "";
@@ -18,12 +21,14 @@ export default function UserBox({
   actions,
   profileUrl,
   profileSx = {},
+  institutionsData,
   avatar = true, // Make avatar optional, default to true
   navigationIcon = true, // Make navigationIcon optional, default to true
   showActiveDevices = true, // Make active devices optional, default to true
 }: {
   fullName: string;
   designation?: string;
+  institutionsData?: any[];
   actions: {
     label: ReactNode;
     icon?: ReactNode;
@@ -39,75 +44,102 @@ export default function UserBox({
   const theme = useTheme();
 
   return (
-    <DropdownMenu
-      anchor={({ open }) => (
-        <Avatar src={profileUrl ?? ""} onClick={open} sx={profileSx}>
-          {getStartingLetters(fullName)}
-        </Avatar>
-      )}
-      menuListProps={{
-        sx: {
-          width: "300px",
-          borderRadius: "5px",
-        },
-      }}
-      menu={[
-        <DropdownMenuItem
-          label={
-            <Stack gap={0.5} sx={{ width: "100%" }}>
-              <Typography variant="subtitle3">Account</Typography>
-              <Stack
-                direction={"row"}
-                alignItems={"center"}
-                justifyContent={"space-between"}
-              >
-                {avatar && (
-                  <Stack direction={"row"} gap={1}>
-                    <Avatar src={profileUrl ?? ""} sx={profileSx}>
-                      {getStartingLetters(fullName)}
-                    </Avatar>
-                    <Stack direction={"row"} justifyContent={"space-between"}>
-                      <Stack>
-                        <Typography variant="subtitle3">{fullName}</Typography>
-                        <Typography variant="caption">{designation}</Typography>
+    <>
+      <DropdownMenu
+        anchor={({ open }) => (
+          <Avatar src={profileUrl ?? ""} onClick={open} sx={profileSx}>
+            {getStartingLetters(fullName)}
+          </Avatar>
+        )}
+        menuListProps={{
+          sx: {
+            width: "300px",
+            borderRadius: "5px",
+          },
+        }}
+        menu={[
+          <DropdownMenuItem
+            label={
+              <Stack gap={0.5} sx={{ width: "100%" }}>
+                <Typography variant="subtitle3">Account</Typography>
+                <Stack
+                  direction={"row"}
+                  alignItems={"center"}
+                  justifyContent={"space-between"}
+                >
+                  {avatar && (
+                    <Stack direction={"row"} gap={1}>
+                      <Avatar src={profileUrl ?? ""} sx={profileSx}>
+                        {getStartingLetters(fullName)}
+                      </Avatar>
+                      <Stack direction={"row"} justifyContent={"space-between"}>
+                        <Stack>
+                          <Typography variant="subtitle3">
+                            {fullName}
+                          </Typography>
+                          <Typography variant="caption">
+                            {designation}
+                          </Typography>
+                        </Stack>
                       </Stack>
                     </Stack>
-                  </Stack>
-                )}
-                {navigationIcon && <Icons.NavigationIcon />}
+                  )}
+                  {navigationIcon && <Icons.NavigationIcon />}
+                </Stack>
               </Stack>
-            </Stack>
-          }
-          onClick={() => alert("Action 1 clicked")}
-        />,
-        showActiveDevices && (
+            }
+            onClick={() => alert("Action 1 clicked")}
+          />,
+          showActiveDevices && (
+            <DropdownMenuItem
+              label={
+                <Stack gap={0.5}>
+                  <Typography variant="subtitle3">Active Devices</Typography>
+                </Stack>
+              }
+              onClick={() => alert("Action 1 clicked")}
+            />
+          ),
+          <Box>
+            <DialogButton
+              anchor={({ open }) => (
+                <StyledMenuItem
+                  onClick={() => {
+                    open();
+                  }}
+                >
+                  Change Institution
+                </StyledMenuItem>
+              )}
+              content={({ close }) => (
+                <SwitchInstitution
+                  close={close}
+                  institutions={institutionsData}
+                />
+              )}
+              title=""
+            />
+          </Box>,
+
           <DropdownMenuItem
             label={
-              <Stack gap={0.5}>
-                <Typography variant="subtitle3">Active Devices</Typography>
+              <Stack
+                gap={0.5}
+                direction={"row"}
+                justifyContent={"space-between"}
+                width={"100%"}
+              >
+                <Typography variant="subtitle3">Logout</Typography>
+                <Icons.LogoutIcon
+                  hoverColor={theme.palette.tertiary.main}
+                  size={20}
+                />
               </Stack>
             }
             onClick={() => alert("Action 1 clicked")}
-          />
-        ),
-        <DropdownMenuItem
-          label={
-            <Stack
-              gap={0.5}
-              direction={"row"}
-              justifyContent={"space-between"}
-              width={"100%"}
-            >
-              <Typography variant="subtitle3">Logout</Typography>
-              <Icons.LogoutIcon
-                hoverColor={theme.palette.tertiary.main}
-                size={20}
-              />
-            </Stack>
-          }
-          onClick={() => alert("Action 1 clicked")}
-        />,
-      ]}
-    />
+          />,
+        ]}
+      />
+    </>
   );
 }

package/src/utils/constants.ts

@@ -1,9 +1,6 @@
 import Cookies from "js-cookie";
 
-export const isDevelopment: boolean =
-  process.env.NODE_ENV === "development" ||
-  window.location.origin.split("campx")[1] === ".dev";
-
+export const isDevelopment: boolean = process.env.NODE_ENV === "development";
 export const urlTenantKey = window.location.pathname.split("/")[1];
 export const institutionKey = window.location.pathname.split("/")[2];
 export const sessionKey = Cookies.get("campx_session_key");