Merge branch 'migrate_main' of https://git.marcoaiot.com/admin/marco.pms.web into migrate_main
This commit is contained in:
commit
6531eb7576
@ -30,11 +30,6 @@
|
||||
width: 45px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.app-brand-logo-border {
|
||||
border: 1px solid #d5d5d5;
|
||||
}
|
||||
.app-brand-text {
|
||||
font-size: 1.75rem;
|
||||
letter-spacing: -0.5px;
|
||||
@ -165,10 +160,9 @@ thead tr {
|
||||
|
||||
.app-brand-logo-login {
|
||||
max-width: 50px; /* default for mobile */
|
||||
height: auto; /* keep aspect ratio */
|
||||
height: auto; /* keep aspect ratio */
|
||||
}
|
||||
|
||||
|
||||
/* Tablet and up (≥768px) */
|
||||
@media (min-width: 768px) {
|
||||
.app-brand-logo-login {
|
||||
@ -182,4 +176,3 @@ thead tr {
|
||||
max-width: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
BIN
public/img/app/error in filter of expenses .png
Normal file
BIN
public/img/app/error in filter of expenses .png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 273 KiB |
BIN
public/img/app/should be expense category .png
Normal file
BIN
public/img/app/should be expense category .png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
BIN
public/img/illustrations/02.png
Normal file
BIN
public/img/illustrations/02.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 137 KiB |
BIN
public/img/illustrations/03.png
Normal file
BIN
public/img/illustrations/03.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 162 KiB |
BIN
public/img/illustrations/gap between grid header and message.png
Normal file
BIN
public/img/illustrations/gap between grid header and message.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
BIN
public/img/illustrations/payment request.png
Normal file
BIN
public/img/illustrations/payment request.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
public/img/illustrations/prom-min.webp
Normal file
BIN
public/img/illustrations/prom-min.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 426 KiB |
@ -9,6 +9,7 @@ const DatePicker = ({
|
||||
allowText = false,
|
||||
maxDate,
|
||||
minDate,
|
||||
disabled = false,
|
||||
...rest
|
||||
}) => {
|
||||
const inputRef = useRef(null);
|
||||
@ -64,6 +65,7 @@ const DatePicker = ({
|
||||
}}
|
||||
readOnly={!allowText}
|
||||
autoComplete="off"
|
||||
disabled={disabled}
|
||||
/>
|
||||
|
||||
<span
|
||||
|
||||
@ -5,6 +5,7 @@ const InputSuggestions = ({
|
||||
value,
|
||||
onChange,
|
||||
error,
|
||||
disabled=false
|
||||
}) => {
|
||||
const [filteredList, setFilteredList] = useState([]);
|
||||
const [showSuggestions, setShowSuggestions] = useState(false);
|
||||
@ -34,6 +35,7 @@ const InputSuggestions = ({
|
||||
onFocus={() => {
|
||||
if (value) setShowSuggestions(true);
|
||||
}}
|
||||
disabled={disabled}
|
||||
/>
|
||||
{showSuggestions && filteredList.length > 0 && (
|
||||
<ul
|
||||
|
||||
@ -17,20 +17,47 @@ export const queryClient = new QueryClient({
|
||||
const AuthLayout = () => {
|
||||
return (
|
||||
// <div className="login-box">
|
||||
<div className="authentication-wrapper authentication-cover">
|
||||
<Link
|
||||
<div className="authentication-wrapper authentication-cover ">
|
||||
<div
|
||||
className="position-fixed "
|
||||
style={{ background: "white", width: "65%", zIndex: "100" }}
|
||||
>
|
||||
{" "}
|
||||
<nav
|
||||
class="navbar navbar-light ms-10 w-auto justify-content-start"
|
||||
style={{ opacity: "100%" }}
|
||||
>
|
||||
<a class="navbar-brand" href="/">
|
||||
Home
|
||||
</a>
|
||||
<a class="navbar-brand" href="/#landingFeatures">
|
||||
Features
|
||||
</a>
|
||||
<a class="navbar-brand" href="/#landingPricing">
|
||||
Pricing
|
||||
</a>
|
||||
<a class="navbar-brand" href="/#landingFAQ">
|
||||
FAQ
|
||||
</a>
|
||||
<a class="navbar-brand" href="/#sectionBlog">
|
||||
Blogs
|
||||
</a>
|
||||
<a class="navbar-brand" href="/#landingCTA">
|
||||
Contact Us
|
||||
</a>
|
||||
</nav>{" "}
|
||||
</div>
|
||||
|
||||
{/* <Link
|
||||
aria-label="Go to Home Page"
|
||||
to="/"
|
||||
className="app-brand-link gap-2 position-fixed top-2 start-0 mx-2 mx-sm-4"
|
||||
className="app-brand-link gap-2 position-fixed mt-10 ms-5"
|
||||
>
|
||||
{/* <span className="app-brand-logo rounded-circle ">
|
||||
<img
|
||||
src="/img/brand/marco.png"
|
||||
alt="marco-logo"
|
||||
className="app-brand-logo-login"
|
||||
/>
|
||||
</span> */}
|
||||
</Link>
|
||||
<h5>
|
||||
{" "}
|
||||
<i class="bx bx-left-arrow-circle"></i> Home
|
||||
</h5>
|
||||
</Link> */}
|
||||
<Outlet />
|
||||
</div>
|
||||
// </div>
|
||||
|
||||
@ -75,7 +75,7 @@ nav.layout-navbar .navbar.landing-navbar {
|
||||
--bs-front-navbar-border-color: rgba(var(--bs-paper-bg-rgb), 0.68);
|
||||
border: 2px solid var(--bs-front-navbar-border-color);
|
||||
background-color: var(--bs-front-navbar-bg);
|
||||
margin-block-start: 1rem;
|
||||
margin-block-start: 0rem;
|
||||
padding-block: 0.614rem;
|
||||
transform: unset;
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
@ -58,7 +58,7 @@ const SubscriptionPlans = () => {
|
||||
<PlanCardSkeleton />
|
||||
<PlanCardSkeleton />
|
||||
</>
|
||||
) : data.length === 0 ? (
|
||||
) : data?.length === 0 ? (
|
||||
<div className="text-center">No plans found</div>
|
||||
) : isError ? (
|
||||
<div className="text-start bg-light">
|
||||
|
||||
@ -87,10 +87,10 @@ const LoginPage = () => {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="col-12 col-lg-5 col-xl-4 d-flex align-items-center p-4 p-sm-5 bg-gray-60">
|
||||
<div className="w-100" style={{ maxWidth: 420, margin: "0 auto" }}>
|
||||
<div className="col-12 col-lg-5 col-xl-4 d-flex align-items-top p-4 p-sm-5 bg-gray-60">
|
||||
<div className="w-100 mt-10" style={{ maxWidth: 420, margin: "0 auto" }}>
|
||||
<Link aria-label="Go to Home Page" to="/">
|
||||
<span class="app-brand-logo rounded-circle app-brand-logo-border">
|
||||
<span class="app-brand-logo rounded-circle">
|
||||
<img src="/img/brand/marco.png" width="70" />
|
||||
</span>
|
||||
<br />
|
||||
|
||||
95
src/pages/authentication/MainLogin.css
Normal file
95
src/pages/authentication/MainLogin.css
Normal file
@ -0,0 +1,95 @@
|
||||
.display-header {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
font-family: "Poppins", sans-serif;
|
||||
color: #00324c;
|
||||
font-size: 35px;
|
||||
font-weight: 300;
|
||||
line-height: 45px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.display-title {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
font-family: "Poppins", sans-serif;
|
||||
color: #00324c;
|
||||
font-size: 20px;
|
||||
font-weight: 300;
|
||||
line-height: 45px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.display-body {
|
||||
font-size: larger;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
font-family: "Poppins", sans-serif;
|
||||
color: #687377;
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
}
|
||||
ul {
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
list-style-type: disc;
|
||||
margin-block-start: 1em;
|
||||
margin-block-end: 1em;
|
||||
padding-inline-start: 40px;
|
||||
unicode-bidi: isolate;
|
||||
}
|
||||
|
||||
ul li {
|
||||
padding: 10px 10px 10px 0;
|
||||
}
|
||||
|
||||
li {
|
||||
unicode-bidi: isolate;
|
||||
margin: 0px;
|
||||
display: list-item;
|
||||
}
|
||||
.ul.more-features-list {
|
||||
max-width: 430px;
|
||||
padding: 10px 0 0 0;
|
||||
display: block;
|
||||
}
|
||||
ul.more-features-list {
|
||||
display: block;
|
||||
|
||||
position: relative;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
border-bottom: 1px #d6d7d7 solid;
|
||||
}
|
||||
|
||||
.autoplay-progress {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
bottom: 16px;
|
||||
z-index: 10;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
color: var(--swiper-theme-color);
|
||||
}
|
||||
|
||||
.autoplay-progress svg {
|
||||
--progress: 0;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0px;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
stroke-width: 4px;
|
||||
stroke: var(--swiper-theme-color);
|
||||
fill: none;
|
||||
stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
|
||||
stroke-dasharray: 125.6;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
@ -1,19 +1,249 @@
|
||||
import React from "react";
|
||||
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-none d-lg-flex col-lg-7 col-xl-8 align-items-center p-5">
|
||||
<div className="w-100 d-flex justify-content-center">
|
||||
<img
|
||||
src="/img/illustrations/worker_03.png"
|
||||
className="img-fluid"
|
||||
alt="Login image"
|
||||
width="70%"
|
||||
data-app-dark-img="illustrations/boy-with-rocket-dark.png"
|
||||
data-app-light-img="illustrations/boy-with-rocket-light.png"
|
||||
/>
|
||||
<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" }}>
|
||||
<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 src="/img/illustrations/03.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>
|
||||
<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>
|
||||
<LoginPage />
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user