299 lines
14 KiB
JavaScript
299 lines
14 KiB
JavaScript
import { React, useRef } from "react";
|
|
import LoginPage from "./LoginPage";
|
|
import "./MainLogin.css";
|
|
const MainLogin = () => {
|
|
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
|
|
className="w-75 text-start swiper-container login-pg-swiper"
|
|
style={{ marginTop: "75px" }}
|
|
>
|
|
<div
|
|
id="textCarousel"
|
|
className="carousel slide"
|
|
data-bs-ride="carousel"
|
|
>
|
|
<div className="carousel-inner">
|
|
<div className="carousel-item active">
|
|
<div className="p-5 text-center">
|
|
<p>
|
|
<img
|
|
className="w-100 login-pg-img-swiper"
|
|
src="/img/illustrations/03.png"
|
|
></img>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="carousel-item active">
|
|
<div className="p-5 text-center">
|
|
<p>
|
|
<img
|
|
className="w-100 login-pg-img-swiper"
|
|
src="/img/illustrations/fm-01.png"
|
|
></img>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="carousel-item ">
|
|
<div className="p-5 ">
|
|
<p>
|
|
<div className="text-start">
|
|
<h3 className="display-header text-black">
|
|
{" "}
|
|
Financial Management (Expense & Billing)
|
|
</h3>
|
|
<h4 className="display-title text-black">
|
|
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>
|
|
</p>
|
|
{/* <button class="btn btn-light">Learn More</button> */}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="carousel-item">
|
|
<div className="p-5 text-center ">
|
|
<p className="text-start">
|
|
<div className="text-start">
|
|
<h1 className="display-header text-black">
|
|
{" "}
|
|
Flexible Project Approval/Review Workflow
|
|
</h1>
|
|
<h4 className="display-title text-black">
|
|
Streamline Decisions. Accelerate Project Completion.
|
|
</h4>
|
|
</div>
|
|
|
|
<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 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> 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>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="carousel-item">
|
|
<div className="p-5 text-center ">
|
|
<p className="text-start">
|
|
<div className="text-start">
|
|
<h1 className="display-header text-black">
|
|
{" "}
|
|
Project Management
|
|
</h1>
|
|
<h4 className="display-title text-black">
|
|
End-to-End Project Lifecycle Management
|
|
</h4>
|
|
</div>
|
|
|
|
<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>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
className="carousel-control-prev"
|
|
type="button"
|
|
data-bs-target="#textCarousel"
|
|
data-bs-slide="prev"
|
|
>
|
|
<span
|
|
className="carousel-control-prev-icon"
|
|
aria-hidden="true"
|
|
></span>
|
|
<span className="visually-hidden">Previous</span>
|
|
</button>
|
|
<button
|
|
className="carousel-control-next"
|
|
type="button"
|
|
data-bs-target="#textCarousel"
|
|
data-bs-slide="next"
|
|
>
|
|
<span
|
|
className="carousel-control-next-icon"
|
|
aria-hidden="true"
|
|
></span>
|
|
<span className="visually-hidden">Next</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<LoginPage />
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
export default MainLogin;
|