diff --git a/src/components/Activities/InfraPlanning.jsx b/src/components/Activities/InfraPlanning.jsx index 664c0613..dc237c63 100644 --- a/src/components/Activities/InfraPlanning.jsx +++ b/src/components/Activities/InfraPlanning.jsx @@ -19,54 +19,60 @@ import { useSelectedProject } from "../../slices/apiDataManager"; import Loader from "../common/Loader"; -const InfraPlanning = () => -{ - const {profile: LoggedUser, refetch : fetchData} = useProfile() - const dispatch = useDispatch() - // const selectedProject = useSelector((store)=>store.localVariables.projectId) + + +const InfraPlanning = () => { + const { profile: LoggedUser, refetch: fetchData } = useProfile(); + const dispatch = useDispatch(); const selectedProject = useSelectedProject(); - const {projectInfra, isLoading, error} = useProjectInfra( selectedProject ) + const { projectInfra, isLoading, isError, error, isFetched } = useProjectInfra(selectedProject); - - const ManageInfra = useHasUserPermission( MANAGE_PROJECT_INFRA ) - const ApprovedTaskRights = useHasUserPermission(APPROVE_TASK) - const ReportTaskRights = useHasUserPermission(ASSIGN_REPORT_TASK) - const reloadedData = useSelector( ( store ) => store.localVariables.reload ) + const canManageInfra = useHasUserPermission(MANAGE_PROJECT_INFRA); + const canApproveTask = useHasUserPermission(APPROVE_TASK); + const canReportTask = useHasUserPermission(ASSIGN_REPORT_TASK); - - // useEffect( () => - // { - // if (reloadedData) - // { - // refetch() - // dispatch( refreshData( false ) ) - // } + const reloadedData = useSelector((store) => store.localVariables.reload); - // },[reloadedData]) + const hasAccess = canManageInfra || canApproveTask || canReportTask; + + if (isError) { + return
{error?.response?.data?.message || error?.message}
; + } + + if (!hasAccess && !isLoading) { + return ( +
+ +

Access Denied: You don't have permission to perform this action.

+
+ ); + } + + if (isLoading) { + return ; + } + + if (isFetched && (!projectInfra || projectInfra.length === 0)) { + return ( +
+

No Result Found

+
+ ); + } return (
-
-
- {(ApprovedTaskRights || ReportTaskRights) ? ( -
-
- {isLoading && ( )} - {( !isLoading && projectInfra?.length === 0 ) && (

No Result Found

)} - {(!isLoading && projectInfra?.length > 0) && ()} +
+
+
+
- ) : ( -
- -

Access Denied: You don't have permission to perform this action. !

-
- )}
-
); }; export default InfraPlanning; + diff --git a/src/components/Project/ProjectPermission.jsx b/src/components/Project/ProjectPermission.jsx index 471e283d..fa6bf1d2 100644 --- a/src/components/Project/ProjectPermission.jsx +++ b/src/components/Project/ProjectPermission.jsx @@ -28,6 +28,7 @@ const ProjectPermission = () => { handleSubmit, reset, control, + setValue, formState: { errors, isDirty }, } = useForm({ resolver: zodResolver(ProjectPermissionSchema), @@ -45,18 +46,26 @@ const ProjectPermission = () => { ); useEffect(() => { - if (!selectedEmployee) return; + if (!selectedEmployee) return; - const enabledPerms = - selectedEmpPermissions?.permissions - ?.filter((perm) => perm.isEnabled) - ?.map((perm) => perm.id) || []; + const enabledPerms = + selectedEmpPermissions?.permissions + ?.filter((perm) => perm.isEnabled) + ?.map((perm) => perm.id) || []; - reset((prev) => ({ - ...prev, - selectedPermissions: enabledPerms, - })); - }, [selectedEmpPermissions, reset, selectedEmployee]); + setValue("selectedPermissions", enabledPerms, { shouldValidate: true }); +}, [selectedEmpPermissions, setValue, selectedEmployee]); + +const selectedPermissions = watch("selectedPermissions") || []; + +const existingEnabledIds = + selectedEmpPermissions?.permissions + ?.filter((p) => p.isEnabled) + ?.map((p) => p.id) || []; + +const hasChanges = + selectedPermissions.length !== existingEnabledIds.length || + selectedPermissions.some((id) => !existingEnabledIds.includes(id)); const { mutate: updatePermission, isPending } = useUpdateProjectLevelEmployeePermission(); @@ -145,7 +154,7 @@ const ProjectPermission = () => {
- {isDirty && ( + {hasChanges && (

- Frequently asked - - questions - + Questions + {/* laptop charging + /> */}

@@ -816,19 +816,26 @@ const LandingPage = () => {

+
+ hero elements +
{" "}

- Let's work - laptop charging + /> */} - together + Together

Any question or remark? just write us a message @@ -873,15 +880,15 @@ const LandingPage = () => {

-

+

Ready to Get Started? -
-
- Start your project with a 14-day free trial
- +
+ Start your project with a free trial +
+ {/* Get Started - {" "} + {" "} */} {
-
- hero elements -
@@ -1056,7 +1056,10 @@ const LandingPage = () => { {/* Footer: Start */} diff --git a/src/pages/Home/PlanCardSkeleton.jsx b/src/pages/Home/PlanCardSkeleton.jsx new file mode 100644 index 00000000..837ea686 --- /dev/null +++ b/src/pages/Home/PlanCardSkeleton.jsx @@ -0,0 +1,44 @@ +import React from "react"; + +const SubscriptionPlanSkeleton = () => { + return ( +
+
+ {/* Header */} +
+
+
+
+
+ + {/* Price */} +
+
+
+ + {/* Storage & Trial */} +
+
+
+
+ + {/* Features */} +
+ Features +
+
    + {[1, 2, 3].map((i) => ( +
  • +
    +
    • + ))} +
+ + {/* Button */} +
+
+
+ ); +}; + +export default SubscriptionPlanSkeleton; diff --git a/src/pages/Home/SubscriptionPlans.jsx b/src/pages/Home/SubscriptionPlans.jsx index 0d44472c..24be62f9 100644 --- a/src/pages/Home/SubscriptionPlans.jsx +++ b/src/pages/Home/SubscriptionPlans.jsx @@ -1,115 +1,7 @@ -// // src/components/SubscriptionPlans.jsx -// import React, { useState, useEffect } from "react"; -// import axios from "axios"; - -// const SubscriptionPlans = () => { -// const [plans, setPlans] = useState([]); -// const [frequency, setFrequency] = useState(1); // 1=Monthly, 2=Quarterly, 3=Half-Yearly, 4=Yearly -// const [loading, setLoading] = useState(false); - -// useEffect(() => { -// const fetchPlans = async () => { -// try { -// setLoading(true); -// const res = await axios.get( -// `/api/market/list/subscription-plan?frequency=${frequency}` -// ); -// setPlans(res.data?.data || []); -// } catch (err) { -// console.error("Error fetching plans:", err); -// } finally { -// setLoading(false); -// } -// }; - -// fetchPlans(); -// }, [frequency]); - -// return ( -//
-// {/* Frequency Switcher */} -//
-//
-// {["Monthly", "Quarterly", "Half-Yearly", "Yearly"].map((label, idx) => ( -// -// ))} -//
-//
- -// {/* Cards */} -//
-// {loading ? ( -//
Loading...
-// ) : plans.length === 0 ? ( -//
No plans found
-// ) : ( -// plans.map((plan) => ( -//
-//
-//
-//

{plan.planName}

-//

{plan.description}

-//
-// -// {plan.currency?.symbol} -// {plan.price} -// -// /mo -//
-//
-// Max Users: {plan.maxUser} | Storage: {plan.maxStorage} MB -//
-//
- -//
-//
    -// {plan.features?.modules && -// Object.values(plan.features.modules).map((mod) => ( -//
  • -// -// {mod.name}{" "} -// {mod.enabled ? ( -// Enabled -// ) : ( -// Disabled -// )} -//
    • -// ))} -//
  • -// -// Support:{" "} -// {plan.features?.supports?.prioritySupport -// ? "Priority" -// : plan.features?.supports?.phoneSupport -// ? "Phone & Email" -// : "Email Only"} -//
    • -//
-//
- -//
-// -//
-//
-//
-// )) -// )} -//
-//
-// ); -// }; - -// export default SubscriptionPlans; - import React, { useState, useEffect } from "react"; import axios from "axios"; +import { Link } from "react-router-dom"; +import PlanCardSkeleton from "./PlanCardSkeleton"; const SubscriptionPlans = () => { const [plans, setPlans] = useState([]); @@ -120,11 +12,10 @@ const SubscriptionPlans = () => { const fetchPlans = async () => { try { setLoading(true); - const res = await axios.get(`http://localhost:5032/api/market/list/subscription-plan?frequency=${frequency}`, { - headers: { - "Content-Type": "application/json" - } - }); + const res = await axios.get( + `http://localhost:5032/api/market/list/subscription-plan?frequency=${frequency}`, + { headers: { "Content-Type": "application/json" } } + ); setPlans(res.data?.data || []); } catch (err) { console.error("Error fetching plans:", err); @@ -137,10 +28,10 @@ const SubscriptionPlans = () => { const frequencyLabel = (freq) => { switch (freq) { - case 0: return "mo"; - case 1: return "3mo"; - case 2: return "6mo"; - case 3: return "yr"; + case 0: return "1 mo"; + case 1: return "3 mo"; + case 2: return "6 mo"; + case 3: return "1 yr"; default: return "mo"; } }; @@ -155,7 +46,7 @@ const SubscriptionPlans = () => { key={idx} type="button" className={`btn btn-${frequency === idx ? "primary" : "outline-secondary"}`} - onClick={() => setFrequency(idx)} // use idx directly (0,1,2,3) + onClick={() => setFrequency(idx)} > {label} @@ -163,73 +54,88 @@ const SubscriptionPlans = () => { - {/* Cards */} -
+
{loading ? ( -
Loading...
+ // Show 3 skeletons + <> + + + + ) : plans.length === 0 ? (
No plans found
) : ( plans.map((plan) => (
-
-
-

{plan.planName}

-

{plan.description}

-
- - {plan.currency?.symbol}{plan.price} - - /{frequencyLabel(frequency)} +
+ {/* Header */} +
+ +

{plan.planName}

+

{plan.description}

+
+ + {/* Price */} +
+

+ {plan.currency?.symbol} {plan.price} + / {frequencyLabel(frequency)} +

+
+ + {/* Storage & Trial */} +
+
+ + Storage {plan.maxStorage} MB
-
- Max Users: {plan.maxUser} | Storage: {plan.maxStorage} MB +
+ + Trial Days {plan.trialDays}
-
-
    - {plan.features?.modules && - Object.values(plan.features.modules).map((modGroup) => - Object.values(modGroup).map((mod) => - mod && mod.name ? ( -
  • - - {mod.name}{" "} - {mod.enabled ? ( - Enabled - ) : ( - Disabled - )} -
    • - ) : null - ) - )} + {/* Features */} +
    + Features +
    +
      + {plan.features?.modules && + Object.values(plan.features.modules).map((mod) => + mod && mod.name ? ( +
    • + {mod.enabled ? ( + + ) : ( + + )} + {mod.name} +
      • + ) : null + )} +
    -
  • - - Support:{" "} - {plan.features?.supports?.prioritySupport - ? "Priority" - : plan.features?.supports?.phoneSupport - ? "Phone & Email" - : "Email Only"} -
    • -
-
- -
- + {/* Button */} +
+ + Request a Demo +
)) )}
+
); }; export default SubscriptionPlans; - diff --git a/src/pages/authentication/LoginPage.jsx b/src/pages/authentication/LoginPage.jsx index db99e6a1..3e331376 100644 --- a/src/pages/authentication/LoginPage.jsx +++ b/src/pages/authentication/LoginPage.jsx @@ -136,7 +136,7 @@ const LoginPage = () => { )}
*/} -
+
@@ -146,7 +146,8 @@ const LoginPage = () => { type={hidepass ? "password" : "text"} autoComplete="new-password" id="password" - className="form-control form-control-xl shadow-none" + className={`form-control form-control-xl shadow-none ${errors.password ? "is-invalid" : "" + }`} name="password" {...register("password")} placeholder="••••••••••••" @@ -155,7 +156,7 @@ const LoginPage = () => {
+ + {/* ✅ Error message */} + {errors.password && ( +
+ {errors.password.message} +
+ )}
+ {/* Remember Me + Forgot Password */}
diff --git a/src/pages/project/ProjectDetails.jsx b/src/pages/project/ProjectDetails.jsx index f7ccabbe..b57f9362 100644 --- a/src/pages/project/ProjectDetails.jsx +++ b/src/pages/project/ProjectDetails.jsx @@ -1,5 +1,6 @@ -import { useSelector, useDispatch } from "react-redux"; // Import useSelector import React, { useState, useEffect, useCallback } from "react"; +import { useDispatch } from "react-redux"; +import { useNavigate } from "react-router-dom"; import ProjectOverview from "../../components/Project/ProjectOverview"; import AboutProject from "../../components/Project/AboutProject"; @@ -9,63 +10,43 @@ import ProjectInfra from "../../components/Project/ProjectInfra"; import Loader from "../../components/common/Loader"; import WorkPlan from "../../components/Project/WorkPlan"; import Breadcrumb from "../../components/common/Breadcrumb"; -import { - cacheData, - clearCacheKey, - getCachedData, - useSelectedProject, -} from "../../slices/apiDataManager"; -import "./ProjectDetails.css"; -import { useProjectDetails } from "../../hooks/useProjects"; +import { useSelectedProject } from "../../slices/apiDataManager"; +import { useProjectDetails, useProjectName } from "../../hooks/useProjects"; import { ComingSoonPage } from "../Misc/ComingSoonPage"; import eventBus from "../../services/eventBus"; import ProjectProgressChart from "../../components/Dashboard/ProjectProgressChart"; -import { useProjectName } from "../../hooks/useProjects"; import AttendanceOverview from "../../components/Dashboard/AttendanceChart"; import { setProjectId } from "../../slices/localVariablesSlice"; -import ProjectDocument from "../../components/Project/ProjectDocuments"; import ProjectDocuments from "../../components/Project/ProjectDocuments"; import ProjectSetting from "../../components/Project/ProjectSetting"; import DirectoryPage from "../Directory/DirectoryPage"; -import { useHasAnyPermission } from "../../hooks/useExpense"; -import { VIEW_PROJECTS } from "../../utils/constants"; -import { useNavigate, useRoutes } from "react-router-dom"; -import { useHasUserPermission } from "../../hooks/useHasUserPermission"; +import { useProjectAccess } from "../../hooks/useProjectAccess"; // ✅ new + +import "./ProjectDetails.css"; const ProjectDetails = () => { const projectId = useSelectedProject(); - const CanViewProject = useHasUserPermission(VIEW_PROJECTS); - const navigate = useNavigate(); - - const { projectNames, fetchData } = useProjectName(); const dispatch = useDispatch(); + const { projectNames } = useProjectName(); + const { projects_Details, loading: projectLoading, refetch } = + useProjectDetails(projectId); + + const { canView, loading: permsLoading } = useProjectAccess(projectId); + useEffect(() => { - if (!CanViewProject) { - navigate("/dashboard"); + if (!projectId && projectNames.length > 0) { + dispatch(setProjectId(projectNames[0].id)); } - if (projectId == null) { - dispatch(setProjectId(projectNames[0]?.id)); - } - }, [projectNames]); + }, [projectId, projectNames, dispatch]); - const { - projects_Details, - loading: projectLoading, - error: projectError, - refetch, - } = useProjectDetails(projectId); - - const [activePill, setActivePill] = useState(() => { - return localStorage.getItem("lastActiveProjectTab") || "profile"; - }); + const [activePill, setActivePill] = useState( + localStorage.getItem("lastActiveProjectTab") || "profile" + ); const handler = useCallback( (msg) => { - if ( - msg.keyword === "Update_Project" && - projects_Details?.id === msg.response.id - ) { + if (msg.keyword === "Update_Project" && projects_Details?.id === msg.response.id) { refetch(); } }, @@ -79,69 +60,42 @@ const ProjectDetails = () => { const handlePillClick = (pillKey) => { setActivePill(pillKey); - localStorage.setItem("lastActiveProjectTab", pillKey); + localStorage.setItem("lastActiveProjectTab", pillKey); }; - const renderContent = () => { - if (projectLoading || !projects_Details) return ; + if (projectLoading || permsLoading || !projects_Details) { + return ; + } + const renderContent = () => { switch (activePill) { case "profile": - return ( - <> -
-
- - -
-
- -
- {" "} - -
-
-
- - ); - - case "teams": return (
-
- +
+ + +
+
+ +
+ +
); - + case "teams": + return ; case "infra": return ; - case "workplan": return ; - case "directory": - return ( -
- -
- ); + return ; case "documents": - return ( -
- -
- ); + return ; case "setting": - return ( -
- -
- ); - + return ; default: return ; } @@ -156,7 +110,6 @@ const ProjectDetails = () => { { label: projects_Details?.name || "Project", link: null }, ]} /> -