l-min-components 1.0.422 → 1.0.428

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.422",
+  "version": "1.0.428",
   "type": "module",
   "files": [
     "src/assets",
@@ -22,6 +22,7 @@
     "l-min-components": "^1.0.220",
     "moment": "^2.29.4",
     "prop-types": "^15.8.1",
+    "rc-progress": "^3.5.1",
     "rc-slider": "^10.1.1",
     "rc-tooltip": "^6.0.1",
     "react": "^18.2.0",

package/src/components/AppMainLayout/index.jsx

@@ -24,6 +24,7 @@ import InstructorAccountSwitcher from "../instructorAccountSwitcher";
 // import SideMenu from "../sideBar/sideMenu";
 import InstructorRightBar from "../fileRightBar/instructorRightBar";
 import EnterpriseRightBar from "../fileRightBar/enterpriseRightBar";
+import PersonalRightBar from "../fileRightBar/personalRightBar";
 
 const AppMainLayout = () => {
   const [isOpen, setIsOpen] = useState(true);
@@ -165,8 +166,18 @@ const AppMainLayout = () => {
                 (window.location.pathname.includes("enterprise") &&
                 !window.location.pathname.includes("file-manager") ? (
                   <EnterpriseRightBar />
-                ) : window.location.pathname.includes("personal") ? (
+                ) : window.location.pathname.includes("personal/dashboard") ? (
                   <InstructorRightBar />
+                ) : window.location.pathname.includes("personal/addons") ? (
+                  <InstructorRightBar personal /> 
+                )  : window.location.pathname.includes("personal/courses") ? (
+                  <InstructorRightBar personal /> 
+                )  : window.location.pathname.includes("personal/library/selectlanguage") ? (
+                  <InstructorRightBar personal /> 
+                ) : window.location.pathname.includes("personal/library") ? (
+                  <PersonalRightBar personalLibrary  />
+                ) : window.location.pathname.includes("personal/reports") ? (
+                  <PersonalRightBar personalReport /> 
                 ) : window.location.pathname.includes("instructor") &&
                   !window.location.pathname.includes("manage-teams") &&
                   !window.location.pathname.includes("file-manager") ? (
@@ -176,7 +187,6 @@ const AppMainLayout = () => {
                 ) : (
                   <Banner />
                 ))}
-
               {/* {rightComponent ?? <Banner />} */}
             </RightLayout>
           )}

package/src/components/fileRightBar/components/ugradeLock.jsx

@@ -6,16 +6,22 @@ import Button from "../../button";
 import UpgradeIcon from "../assets/Feature.png";
 
 
-const UpgradeComponent = () => {
+const UpgradeComponent = ({personal}) => {
 
   return (
     
     <Upgrade>
       <div className="container">
        <img src={UpgradeIcon} alt="upgrad lock" />
+       {personal ? 
        <p>
-         Upgrade to <span>ENTERPRISE</span> for more features.
+         Upgrade to PRO for more features.
        </p>
+      :
+      <p>
+      Upgrade to <span>ENTERPRISE</span> for more features.
+    </p>
+      }
        <Button
         type="primary"
         text="Upgrade"

package/src/components/fileRightBar/instructorRightBar.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import {
   BannerWrapper,
   InstructorContainer,
@@ -31,13 +31,19 @@ import SliderIcon from "./assets/slider";
 *
 */
 
-const InstructorRightBar = (props) => {
+const InstructorRightBar = ({personal, onClick}) => {
+  // const [account, setAccount] = useState("instructor")
 
   return (
     <InstructorContainer>   
     <BannerWrapper>
       <div className="head_instructor">
+        {personal ? 
+           <h3 className="personal_head">Recommended</h3>
+           :  
         <h3>Learn a new language today</h3>
+      }
+        
       </div>
       <NewLanguage>
         <div className="top_section">
@@ -56,6 +62,7 @@ const InstructorRightBar = (props) => {
         </div>
       </NewLanguage>
       <SliderIcon />
+      {!personal && 
       <Button
         type="primary"
         text="Create Personal Account"
@@ -68,12 +75,14 @@ const InstructorRightBar = (props) => {
           height: "40px",
           boxShadow: "0px 10px 20px 0px rgba(254, 191, 16, 0.25)", 
         }}
-        onClick={props.onClick}
+        onClick={onClick}
       />
+    }
     </BannerWrapper>
-    <RecentAdded>
+    <RecentAdded className={personal ? "personal_added" : ""} >
       <div className="top_area">
-        <h5>Recently added</h5>
+      {personal ? <h5>Friends</h5> :
+        <h5>Recently added</h5> }
         <p>See all</p>
       </div>
       <div className="users_list">
@@ -92,7 +101,11 @@ const InstructorRightBar = (props) => {
       </div>
 
     </RecentAdded>
+    {personal ? 
+    <UpgradeComponent personal />
+    :
     <UpgradeComponent />
+    }
     
   </InstructorContainer>
   );

package/src/components/fileRightBar/personalRightBar/index.jsx

@@ -0,0 +1,155 @@
+import React from "react";
+import {
+  BannerWrapper,
+  InstructorContainer,
+  NewLanguage,
+  RecentAdded,
+  Container,
+  Upgrade,
+  Users,
+  UploadProgressContainer
+} from "../styles";
+import Button from "../../button";
+import CircularProgressBar from "../components/progressBar";
+import UpgradeIcon from "../assets/Feature.png";
+import { UploadProgress } from "../assets/uploadProgressIcon";
+import ProgressBar from "../../progressBar";
+import UpgradeComponent from "../components/ugradeLock";
+import LessonIcon from "../assets/lession";
+import LessonFlag from "../assets/lessonflag";
+import Ellipse from "../assets/Ellipse.png";
+import Ellipse2 from "../assets/Ellipse2.png";
+import Ellipse3 from "../assets/Ellipse3.png";
+import Ellipse4 from "../assets/Ellipse4.png";
+import SliderIcon from "../assets/slider";
+import { Line } from "rc-progress";
+import LibraryAdImage from "../assets/libraryAd.png"
+
+/**
+ * @param {{
+*  CourseClick: function,
+*  UpgradeClick: function,
+* }} props - properties of graph Component
+*
+*/
+
+const PersonalRightBar = ({UpgradeClick, CourseClick, personalReport, personalLibrary }) => {
+
+  return (
+    <InstructorContainer>  
+      {!personalReport && 
+    <BannerWrapper>
+      <div className="head_instructor head_enterprise">
+        <h3>Recommended</h3>
+      </div>
+      <NewLanguage>
+        <div className="top_section">
+          <div className="lession_cont">
+            <LessonIcon />
+            <p> 9 lessions</p>
+          </div>
+          <div className="flag_cont">
+            <LessonFlag />
+
+          </div>
+        </div>
+
+        <div className="buttom_section">
+          <p>French for Beginners</p>
+        </div>
+      </NewLanguage>
+      <SliderIcon />
+    </BannerWrapper>
+    }
+    {!personalReport &&
+    <RecentAdded>
+      <div className="top_area">
+        <h5>Friends</h5>
+        <p>See all</p>
+      </div>
+      <div className="users_list">
+      <div className="user">
+       <img src={Ellipse} alt="user" />
+      </div>
+      <div className="user">
+        <img src={Ellipse2} alt="user" />
+      </div>
+      <div className="user">
+        <img src={Ellipse3} alt="user" />
+      </div>
+      <div className="user">
+        <img src={Ellipse4} alt="user" />
+      </div>
+      </div>
+     
+    </RecentAdded>
+    }
+    {!personalLibrary  &&
+    <RecentAdded className={personalReport ? "courses personal_courses" : "courses"} >
+      <div className="top_area">
+        <h5>In Progress</h5>
+        <p>See all</p>
+      </div>
+      <div className="course_list">
+        <div className="course">
+        <NewLanguage className="courses_personal">
+           <h3>French for Beginners</h3>
+              <div className="line">
+              <Line
+                percent={54}
+                strokeWidth={8}
+                trailWidth={8}
+                strokeColor="#FECF4C"
+              />
+              <span> {54}%</span>
+            </div>
+            
+        </NewLanguage>
+        <NewLanguage className="courses_personal">
+              <h3>French for Beginners</h3>
+              <div className="line">
+              <Line
+                percent={54}
+                strokeWidth={8}
+                trailWidth={8}
+                strokeColor="#FECF4C"
+              />
+              <span> {54}%</span>
+            </div>
+            
+        </NewLanguage>
+        <NewLanguage className="courses_personal">
+              <h3>French for Beginners</h3>
+              <div className="line">
+              <Line
+                percent={54}
+                strokeWidth={8}
+                trailWidth={8}
+                strokeColor="#FECF4C"
+              />
+              <span> {54}%</span>
+            </div>
+            
+        </NewLanguage>
+        </div>
+        
+      </div>
+     
+    </RecentAdded>
+    }
+    {personalReport &&
+    <UpgradeComponent personal />
+    }
+
+    {personalLibrary && 
+    <div className="library_img">
+        <img src={LibraryAdImage} alt="ad image" />
+    </div>
+      
+    }
+    
+  </InstructorContainer>
+  );
+};
+
+export default PersonalRightBar;

package/src/components/fileRightBar/personalRightBar/upgrade.jsx

@@ -0,0 +1,43 @@
+import React from "react";
+import {
+  Upgrade,
+} from "../styles";
+import Button from "../../button";
+import UpgradeIcon from "../assets/Feature.png";
+import EnterpriseUpgrade from "../assets/enterpriseUpgrade.png"
+
+
+const UpgradeComponent = ({UpgradeClick}) => {
+
+  return (
+    
+    <Upgrade>
+      <div className="container">
+       <img src={EnterpriseUpgrade} alt="upgrad box" />
+       <div className="upgrade_text">
+          <p>You are running out of slot?</p>
+       </div>
+       <p className="reminder">
+         45 slots remaining out of 50 slots for bronze package
+       </p>
+       <Button
+        type="primary"
+        text="Upgrade"
+        styles={{
+          marginTop: "12px",
+          fontSize: "16px",
+          width: "171px",
+          height: "38.641px",
+          gap: "8px",
+          padding: "15.457px 30.913px",
+        }}
+        onClick={UpgradeClick}
+      />
+
+      </div>
+       
+    </Upgrade>
+  );
+};
+
+export default UpgradeComponent;

package/src/components/fileRightBar/styles/index.jsx

@@ -15,6 +15,11 @@ export const InstructorContainer = styled.div`
   padding: 10px 0px;
   border-radius: 30px;
 
+  .library_img{
+    padding: 10px;
+    margin-top: 20px;
+  }
+
 `;
 
 export const Container = styled.div`
@@ -64,6 +69,10 @@ export const BannerWrapper = styled.div`
       font-weight: 700;
       line-height: 15.457px; /* 111.111% */
       letter-spacing: 0.278px;
+
+      &.personal_head{
+        text-align: left;
+      }
     }
   }
 
@@ -391,13 +400,14 @@ export const NewLanguage = styled.div`
   background-repeat: no-repeat;
   margin-top: 10px;
   width: 100%;
-  height: 126.743px;
+  height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: start;
   gap: 60px;
   padding: 10px;
   margin-bottom: 10px;
+  border-radius: 18.548px; 
   
   .top_section{
     display: flex;
@@ -420,6 +430,7 @@ export const NewLanguage = styled.div`
         font-weight: 700;
         line-height: 17.002px; /* 157.143% */
         letter-spacing: 0.216px;
+        
       }
 
       svg{
@@ -451,6 +462,47 @@ export const NewLanguage = styled.div`
       letter-spacing: 0.278px;
     }
   }
+
+  &.courses_personal{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 10px;
+    padding: 10px 10px;
+    border-radius: 20px;
+    /* height: 140px; */
+    /* width: 90%; */
+
+    h3{
+      color: var(--white, #FFF);
+      font-family: Nunito;
+      font-size: 20.313px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 16.313px; /* 100% */
+      letter-spacing: 0.326px;
+       text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
+    }
+    .line{
+      display: flex;
+      align-items: center;
+      width: 90%;
+
+      span{
+       color: var(--neutral-80, #fff);
+          text-align: center;
+          font-family: Nunito;
+          font-size: 13px;
+          font-style: normal;
+          font-weight: 700;
+          line-height: 24px; /* 150% */
+          letter-spacing: 0.32px;
+          margin-left: 10px;
+      }
+      
+
+    }
+  }
 `
 
 export const RecentAdded = styled.div`
@@ -458,6 +510,17 @@ display: flex;
 flex-direction: column;
 padding: 10px 20px;
 margin-top: -30px;
+
+&.personal_added{
+  margin-bottom: 30px;
+}
+&.courses{
+  margin-top: 30px;
+}
+&.personal_courses{
+  margin-top: 5px;
+  margin-bottom: 20px;
+}
     .top_area{
       display: flex;
       justify-content: space-between;
@@ -472,6 +535,7 @@ margin-top: -30px;
         font-weight: 700;
         line-height: 15.457px; /* 111.111% */
         letter-spacing: 0.278px;
+        /* cursor: pointer; */
       }
 
       p{
@@ -482,6 +546,7 @@ margin-top: -30px;
         font-weight: 700;
         line-height: 15.457px; /* 128.804% */
         letter-spacing: 0.24px;
+        cursor: pointer;
       }
     }
     .users_list {
@@ -489,6 +554,16 @@ margin-top: -30px;
   gap: 12px;
 }
 
+.course_list{
+  display: grid;
+  justify-content: center;
+  align-items: center;
+
+  .course{
+
+  }
+}
+
 .user {
   position: relative; /* Make the parent container relative */
   width: 40px;