admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

remove swiper from login main and added bootstrap corausal

Browse Source
This commit is contained in:
Vikas Nale 2025-11-11 17:34:25 +05:30
parent 1067ac02b3
commit 04a3141f65
5 changed files with 343 additions and 335 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/common/OfwLabel.jsx Normal file
View File

@ -0,0 +1,12 @@
const OfwLabel = () => {
return (
<>
<a className="mx-1 text-green" href="/">
<span className="text-blue">OnField</span>
<span>Work</span>
<span className="text-dark">.com</span>
</a>
</>
);
};
export default OfwLabel;

138
src/pages/Home/LandingPage.jsx
View File

@ -8,6 +8,7 @@ import { EffectFlip, Autoplay, Pagination, Navigation } from "swiper/modules";
import SwaperSlideImages from "./SwaperSlideImages";
import FeatureCard from "./FEatureCard";
import SubscriptionPlans from "./SubscriptionPlans";
import OfwLabel from "../../components/common/OfwLabel";
const LandingPage = () => {
return (
@ -21,11 +22,7 @@ const LandingPage = () => {
style={{ width: "40px" }}
className="me-2"
></img>
<a className="navbar-brand fw-bold text-green" href="#">
<span className="text-blue">OnField</span>
<span>Work</span>
<span className="text-dark">.com</span>
</a>
<OfwLabel></OfwLabel>
<button
className="navbar-toggler"
type="button"
@ -359,117 +356,90 @@ const LandingPage = () => {
{/* <!-- About --> */}
<section id="about" className="section-py vh-auto">
<div className="container text-start" style={{ maxWidth: "75%" }}>
<h2 className="fw-bold mb-4 text-center">
About{" "}
<a className="text-green" href="#">
<span className="text-blue">OnField</span>
<span>Work</span>
<span className="text-dark">.com</span>
</a>
</h2>
<h3 className="fw-bold mb-4 text-center">
About <OfwLabel></OfwLabel>
</h3>
<p>
<a className="text-green" href="#">
<span className="text-blue">OnField</span>
<span>Work</span>
<span className="text-dark">.com</span>
</a>{" "}
is a powerful SaaS-based Project Management Platform built to
simplify and streamline field operations for modern businesses.
<OfwLabel></OfwLabel> is a powerful SaaS-based Project Management
Platform built to simplify and streamline field operations for
modern businesses.
</p>{" "}
<p>
Whether you manage on-site teams, oversee multiple projects, or
coordinate vendors and suppliers,{" "}
<a className="text-green" href="#">
<span className="text-blue">OnField</span>
<span>Work</span>
<span className="text-dark">.com</span>
</a>{" "}
coordinate vendors and suppliers, <OfwLabel></OfwLabel>
brings everything together in one connected ecosystem — giving you
complete control, visibility, and efficiency in your day-to-day
operations.
</p>
<h5> Our Mission</h5> At{" "}
<a className="text-green" href="#">
<span className="text-blue">OnField</span>
<span>Work</span>
<span className="text-dark">.com</span>
</a>
, our mission is to empower organizations to manage their field
operations effortlessly — helping teams stay organized, accountable,
and productive, no matter where they are. We aim to eliminate manual
processes, data silos, and communication gaps that often slow down
projects and increase operational costs. <br /> What We Do We provide
a comprehensive suite of tools designed to handle every critical
aspect of field management — from workforce tracking to expense
control and reporting. With
<a className="text-green" href="#">
<span className="text-blue">OnField</span>
<span>Work</span>
<span className="text-dark">.com</span>
</a>
, you can:
<h5> Our Mission</h5>{" "}
<p>
At <OfwLabel></OfwLabel>
, our mission is to empower organizations to manage their field
operations effortlessly — helping teams stay organized, accountable,
and productive, no matter where they are. We aim to eliminate manual
processes, data silos, and communication gaps that often slow down
projects and increase operational costs. <br /> What We Do We
provide a comprehensive suite of tools designed to handle every
critical aspect of field management — from workforce tracking to
expense control and reporting. With
<OfwLabel></OfwLabel>, you can:
</p>
<ul>
<li>
<li className="more-features-list-items">
<strong> Track Attendance Seamlessly -</strong> Enable site
managers to record daily attendance, capture employee photos, and
maintain transparent records for management.{" "}
</li>
<li>
<li className="more-features-list-items">
<strong> Manage Expenses Efficiently -</strong> Log, categorize,
and approve expenses related to daily operations, procurement, and
travel — all within a streamlined workflow.
</li>
<li>
<li className="more-features-list-items">
<strong> Generate Smart Reports -</strong> Get real-time insights
through dashboards and reports that highlight project progress,
team productivity, and cost trends.
</li>
<li>
<li className="more-features-list-items">
{" "}
<strong> Organize Your Directory -</strong> Maintain a unified
directory for teams, suppliers, and vendors. Every contact is
securely stored, role-based, and easy to access — ensuring that
your network stays structured and connected.
</li>
<li>
<li className="more-features-list-items">
<strong> Record Notes & References -</strong> Attach notes to
contacts for instant recall and better relationship management
across your organization.
</li>{" "}
<li>
<li className="more-features-list-items">
<strong> Role-Based Access Control -</strong> Protect sensitive
data with secure, role-based permissions, ensuring that each team
member accesses only the information relevant to their role.{" "}
</li>{" "}
</ul>
<h5>
Why Choose{" "}
<a className="text-green" href="#">
<span className="text-blue">OnField</span>
<span>Work</span>
<span className="text-dark">.com</span>
</a>
?{" "}
Why Choose <OfwLabel></OfwLabel>?{" "}
</h5>
<ul>
<li>
<li className="more-features-list-items">
<strong> Purpose-Built for Field Teams -</strong> Designed keeping
in mind the unique challenges of field operations.
</li>{" "}
<li>
<li className="more-features-list-items">
<strong> Scalable & Cloud-Based -</strong> A SaaS platform that
grows with your business — accessible from anywhere, anytime.
</li>{" "}
<li>
<li className="more-features-list-items">
<strong> Unified Dashboard Experience -</strong> Get a 360° view
of all your field activities, project progress, and financial
health.
</li>{" "}
<li>
<li className="more-features-list-items">
<strong> Data-Driven Insights -</strong> Make informed decisions
using analytics and trend-based reporting.{" "}
</li>
<li>
<li className="more-features-list-items">
<strong>Collaboration at Its Core - </strong>Connect your teams,
vendors, and suppliers under one digital workspace.{" "}
</li>
@ -480,7 +450,7 @@ const LandingPage = () => {
<section id="faq" className="bg-light section-py vh-auto">
<div className="container text-center">
<h3>
Frequently AskedQuestions <br />
Frequently Asked Questions <br />
<h6 className="text-normal">
{" "}
Browse through these FAQs to find answers to commonly asked
@ -499,7 +469,7 @@ const LandingPage = () => {
aria-expanded="true"
aria-controls="accordionOne"
>
What is OnFieldWork.com?
What is <OfwLabel></OfwLabel>?
</button>
</h2>
<div
@ -553,7 +523,7 @@ const LandingPage = () => {
aria-expanded="false"
aria-controls="accordionThree"
>
How secure is OnFieldWork.com?
How secure is <OfwLabel></OfwLabel>?
</button>
</h2>
<div
@ -563,7 +533,7 @@ const LandingPage = () => {
data-bs-parent="#accordionExample"
>
<div className="accordion-body text-start">
Security is at the core of OnFieldWork.com. We use
Security is at the core of <OfwLabel></OfwLabel>. We use
industry-standard encryption (SSL/TLS) to protect data in
transit and advanced encryption to safeguard data at rest.
Role-based access controls ensure that only authorized users
@ -622,12 +592,12 @@ const LandingPage = () => {
data-bs-parent="#accordionExample"
>
<div className="accordion-body text-start">
OnFieldWork.com operate under a proprietary license combined
with a subscription model. This means customers don’t own the
software but are granted the right to access and use it
through the cloud under our Terms of Service. Depending on the
plan, licensing may be based on users, features, or usage, and
you can upgrade, downgrade, or cancel at any time. non!
<OfwLabel></OfwLabel> operate under a proprietary license
combined with a subscription model. This means customers don’t
own the software but are granted the right to access and use
it through the cloud under our Terms of Service. Depending on
the plan, licensing may be based on users, features, or usage,
and you can upgrade, downgrade, or cancel at any time. non!
</div>
</div>
</div>
@ -641,7 +611,7 @@ const LandingPage = () => {
aria-expanded="false"
aria-controls="accordionSix"
>
Can I customize OnFieldWork.com for my business needs?
Can I customize <OfwLabel></OfwLabel> for my business needs?
</button>
</h2>
<div
@ -651,13 +621,13 @@ const LandingPage = () => {
data-bs-parent="#accordionExample"
>
<div className="accordion-body text-start">
Yes, OnFieldWork.com is designed to be flexible and adaptable.
You can customize workflows, user roles, permissions, and
reporting to match your organization’s unique processes.
Depending on your plan, we also support advanced customization
such as integrating with third-party tools, adding custom
fields, and tailoring modules to fit your business
requirements.
Yes, <OfwLabel></OfwLabel> is designed to be flexible and
adaptable. You can customize workflows, user roles,
permissions, and reporting to match your organization’s unique
processes. Depending on your plan, we also support advanced
customization such as integrating with third-party tools,
adding custom fields, and tailoring modules to fit your
business requirements.
</div>
</div>
</div>
@ -680,9 +650,9 @@ const LandingPage = () => {
/>
</div>
<div className="col-lg-6 contact-text">
<h2>
<h3>
Contact <span className="text-green">Us</span>
</h2>
</h3>
<p>
We’d love to hear from you! Whether you have a question about
features, pricing, or anything else — our team is ready to

2
src/pages/Home/SubscriptionPlans.jsx
View File

@ -102,7 +102,7 @@ const SubscriptionPlans = () => {
<h6 className="fw-bold text-uppercase border-top pt-3 mb-3 text-center">
Features
</h6>
<ul className="list-unstyled text-start mb-4 ms-7 fs-5">
<ul className="list-unstyled text-start mb-4 ms-7 fs-6">
{plan.features?.modules &&
Object.values(plan.features.modules).map((mod) =>
mod && mod.name ? (

3
src/pages/authentication/MainLogin.css
View File

@ -40,7 +40,7 @@ li.more-features-list-items {
ul.more-features-list {
font-size: 16px;
font-weight: 300;
list-style-type: disc;
list-style-type: none;
margin-block-start: 1em;
margin-block-end: 1em;
padding-inline-start: 40px;
@ -49,7 +49,6 @@ ul.more-features-list {
position: relative;
margin-left: 10px;
max-width: 430px;
padding: 10px 0 0 0;
display: block;
}

523
src/pages/authentication/MainLogin.jsx
View File

@ -1,15 +1,7 @@
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">
@ -19,249 +11,284 @@ const MainLogin = () => {
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
id="textCarousel"
class="carousel slide"
data-bs-ride="carousel"
>
<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 class="carousel-inner">
<div class="carousel-item active">
<div class="p-5 text-center">
<p>
<img
className="w-100 login-pg-img-swiper"
src="/img/illustrations/03.png"
></img>
</p>
</div>
</div>
<div class="carousel-item active">
<div class="p-5 text-center">
<p>
<img
className="w-100 login-pg-img-swiper"
src="/img/illustrations/fm-01.png"
></img>
</p>
</div>
</div>
<div class="carousel-item ">
<div class="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 class="carousel-item">
<div class="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 class="carousel-item">
<div class="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>
<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>
<button
class="carousel-control-prev"
type="button"
data-bs-target="#textCarousel"
data-bs-slide="prev"
>
<span
class="carousel-control-prev-icon"
aria-hidden="true"
></span>
<span class="visually-hidden">Previous</span>
</button>
<button
class="carousel-control-next"
type="button"
data-bs-target="#textCarousel"
data-bs-slide="next"
>
<span
class="carousel-control-next-icon"
aria-hidden="true"
></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
{/* </div> */}
</div>
<LoginPage />
</div>