272 lines
12 KiB
JavaScript
272 lines
12 KiB
JavaScript
import { React, useRef } from "react";
|
|
import LoginPage from "./LoginPage";
|
|
import "./MainLogin.css";
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
import { EffectFlip, Autoplay, Pagination, Navigation } from "swiper/modules";
|
|
const MainLogin = () => {
|
|
const progressCircle = useRef(null);
|
|
const progressContent = useRef(null);
|
|
const onAutoplayTimeLeft = (s, time, progress) => {
|
|
progressCircle.current.style.setProperty("--progress", 1 - progress);
|
|
progressContent.current.textContent = `${Math.ceil(time / 1000)}s`;
|
|
};
|
|
return (
|
|
<>
|
|
<div className="authentication-inner row m-0">
|
|
<div className=" d-lg-flex col-lg-7 col-xl-8 align-items-center p-5 justify-content-center">
|
|
{/* <div className="w-75 text-start" style={{ marginTop: "75px" }}> */}
|
|
<div
|
|
class="w-75 text-start swiper-container login-pg-swiper"
|
|
style={{ marginTop: "75px" }}
|
|
>
|
|
<Swiper
|
|
spaceBetween={30}
|
|
centeredSlides={true}
|
|
rewind={true}
|
|
autoplay={{
|
|
delay: 3500,
|
|
disableOnInteraction: false,
|
|
}}
|
|
pagination={{
|
|
clickable: true,
|
|
}}
|
|
keyboard={{
|
|
enabled: true,
|
|
}}
|
|
navigation={false}
|
|
modules={[EffectFlip, Autoplay, Pagination, Navigation]}
|
|
className="mySwiper"
|
|
onSlideChange={() => {}}
|
|
onSwiper={(swiper) => {}}
|
|
onAutoplayTimeLeft={onAutoplayTimeLeft}
|
|
>
|
|
<div className="autoplay-progress" slot="container-end">
|
|
<svg viewBox="0 0 48 48" ref={progressCircle}>
|
|
<circle cx="24" cy="24" r="20"></circle>
|
|
</svg>
|
|
<span ref={progressContent}></span>
|
|
</div>
|
|
<SwiperSlide>
|
|
<img
|
|
className="login-pg-img-swiper"
|
|
src="/img/illustrations/03.png"
|
|
></img>
|
|
</SwiperSlide>
|
|
{/* <SwiperSlide>
|
|
<img src="/img/illustrations/finaicial management.png"></img>
|
|
</SwiperSlide> */}
|
|
<SwiperSlide>
|
|
<img
|
|
className="login-pg-img-swiper"
|
|
src="/img/illustrations/fm-01.png"
|
|
></img>
|
|
</SwiperSlide>
|
|
{/* <SwiperSlide>
|
|
<div className="text-start">
|
|
<h1 className="display-header">
|
|
Financial Management (Expense & Billing)
|
|
</h1>
|
|
<h4 className="display-title">
|
|
Eliminate Paper Receipts. Take Control of Your Cash Flow.
|
|
</h4>
|
|
<p className="display-body">
|
|
Managing field expenses is often messy, slow, and prone to
|
|
errors. onfieldwork.com digitizes the entire process, giving
|
|
you real-time financial visibility and control, whether your
|
|
team is on a construction site or servicing a client's
|
|
facility.
|
|
</p>
|
|
<ul className="more-features-list list-unstyled">
|
|
<li>
|
|
<div className="d-flex">
|
|
<i className="bx bxs-check-circle text-success"></i>
|
|
<div className="list-item ms-2 pb-2">
|
|
{" "}
|
|
<b> Billing & Collection:</b> Generate accurate
|
|
invoices based on logged project data and efficiently
|
|
track the status of payments to speed up collection
|
|
cycles.
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div className="d-flex">
|
|
<i className="bx bxs-check-circle text-success"></i>
|
|
<div className="list-item ms-2 pb-2">
|
|
{" "}
|
|
<b> Recurring Expenses:</b> Set up and manage
|
|
automatic payments for predictable costs (like monthly
|
|
equipment rentals or subscriptions) to ensure they are
|
|
never missed.
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div className="d-flex">
|
|
<i className="bx bxs-check-circle text-success"></i>
|
|
<div className="list-item ms-2 pb-2">
|
|
{" "}
|
|
<b> Advance Payment Management:</b> A clear system for
|
|
issuing and tracking advances given to field staff.
|
|
Easily reconcile these advances against submitted
|
|
expenses and salaries.
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div className="d-flex">
|
|
<i className="bx bxs-check-circle text-success"></i>
|
|
<div className="list-item ms-2 pb-2">
|
|
{" "}
|
|
<b> Petty Cash Management:</b> Maintain a secure,
|
|
digital ledger for small, daily expenditures,
|
|
replacing error-prone manual logbooks.
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</SwiperSlide> */}
|
|
<SwiperSlide>
|
|
<div className="text-start">
|
|
<h1 className="display-header">
|
|
Flexible Project Approval/Review Workflow
|
|
</h1>
|
|
<h4 className="display-title">
|
|
Streamline Decisions. Accelerate Project Completion.
|
|
</h4>
|
|
<p className="display-body">
|
|
The speed of a project often hinges on the efficiency of the
|
|
review and approval process. onfieldwork.com replaces
|
|
bottlenecks and email chains with flexible, defined digital
|
|
workflows that keep work moving forward.
|
|
</p>
|
|
<ul className="more-features-list list-unstyled">
|
|
<li>
|
|
<div className="d-flex">
|
|
<i className="bx bxs-check-circle text-success"></i>
|
|
<div className="list-item ms-2 pb-2">
|
|
{" "}
|
|
<b> Customizable Approval Chains</b>
|
|
<ul>
|
|
<li>
|
|
<b> Define Your Process:</b> Easily configure
|
|
multi-step approval paths for any item: document
|
|
submissions, expense reports, task completion
|
|
sign-offs, or material requests.
|
|
</li>
|
|
<li>
|
|
<b>Role-Based Routing:</b> Approvals are
|
|
automatically routed to the correct individual
|
|
based on their Role (e.g., Site Supervisor,
|
|
Project Manager, Finance Admin) thanks to our
|
|
Role-Based Access Control (RBAC).
|
|
</li>
|
|
</ul>{" "}
|
|
</div>
|
|
</div>
|
|
</li>
|
|
{/* <li>
|
|
<div className="d-flex">
|
|
<i className="bx bxs-check-circle text-success"></i>
|
|
<div className="list-item ms-2 pb-2">
|
|
{" "}
|
|
<b>Real-Time Notifications & Tracking</b>
|
|
<ul>
|
|
<li>
|
|
<b>No More Delays:</b> Reviewers receive instant
|
|
alerts via the Web and Mobile app when an item
|
|
requires their attention.
|
|
</li>
|
|
<li>
|
|
<b> Audit Trail:</b> Every action, comment,
|
|
approval, or rejection is logged with a timestamp
|
|
and user ID, providing a complete, non-repudiable
|
|
history for every decision.
|
|
</li>
|
|
</ul>{" "}
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div className="d-flex">
|
|
<i className="bx bxs-check-circle text-success"></i>
|
|
<div className="list-item ms-2 pb-2">
|
|
{" "}
|
|
<b>Seamless Task Handoff</b> Once a task or document
|
|
is approved, the next action is immediately
|
|
triggered—whether it's allocating a new work package
|
|
to the team or initiating a purchase order.
|
|
</div>
|
|
</div>
|
|
</li> */}
|
|
</ul>
|
|
</div>
|
|
</SwiperSlide>
|
|
<SwiperSlide>
|
|
<div className="text-start">
|
|
<h1 className="display-header">Project Management</h1>
|
|
<h4 className="display-title">
|
|
End-to-End Project Lifecycle Management
|
|
</h4>
|
|
<p className="display-body">
|
|
Stop using spreadsheets and start managing progress.
|
|
onfieldwork.com is your single source of truth for all
|
|
project activities.
|
|
</p>
|
|
<ul className="more-features-list list-unstyled">
|
|
<li className="more-features-list-items">
|
|
<div className="d-flex">
|
|
<i className="bx bxs-check-circle text-success"></i>
|
|
<div className="list-item ms-2 pb-2">
|
|
{" "}
|
|
<b> Create & Manage Multiple Projects:</b>Organize all
|
|
current and upcoming work in a centralized dashboard.
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div className="d-flex">
|
|
<i className="bx bxs-check-circle text-success"></i>
|
|
<div className="list-item ms-2 pb-2">
|
|
{" "}
|
|
<b>Infrastructure Management:</b>Track and manage
|
|
project resources, equipment, and key locations.
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div className="d-flex">
|
|
<i className="bx bxs-check-circle text-success"></i>
|
|
<div className="list-item ms-2 pb-2">
|
|
{" "}
|
|
<b>Team & Document Management:</b>Secure storage for
|
|
drawings, contracts, and easy team setup.
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div className="d-flex">
|
|
<i className="bx bxs-check-circle text-success"></i>
|
|
<div className="list-item ms-2 pb-2">
|
|
{" "}
|
|
<b>Work Allocation & Tracking:</b>Implement
|
|
customizable Approval/Review Workflows for tasks and
|
|
documents.
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</SwiperSlide>
|
|
</Swiper>
|
|
</div>
|
|
{/* </div> */}
|
|
</div>
|
|
<LoginPage />
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
export default MainLogin;
|