Dwinzo-Beta/Dwinzo_Demo
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/ui' into main-demo

Browse Source
This commit is contained in:
Vishnu
2025-08-22 13:01:25 +05:30
parent 290985d59e dc873a8c59
commit 45fba262a2
34 changed files with 1945 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/src/components/Dashboard/DashboardCard.tsx
View File

@@ -75,7 +75,7 @@ const DashboardCard: React.FC<DashBoardCardProps> = ({
setLoadingProgress(1);
setProjectName(projectName);
navigate(`/${projectId}`);
navigate(`/projects/${projectId}`);
} catch {}
};
@@ -108,7 +108,7 @@ const DashboardCard: React.FC<DashBoardCardProps> = ({
setIsKebabOpen(false);
}
} catch (error) {}
window.open(`/${projectId}`, "_blank");
window.open(`/projects/${projectId}`, "_blank");
break;
case "rename":
setIsRenaming(true);

15
app/src/components/forgotPassword/ConfirmationMessgae.tsx Normal file
View File

@@ -0,0 +1,15 @@
import React from 'react';
import { SuccessIcon } from '../icons/ExportCommonIcons';
const ConfirmationMessage: React.FC = () => {
return (
<div className='request-container'>
<div className="icon"><SuccessIcon /></div>
<h1 className='header'>Successfully</h1>
<p className='sub-header'>Your password has been reset successfully</p>
<a href='/' className='login'>Login</a>
</div>
);
};
export default ConfirmationMessage;

30
app/src/components/forgotPassword/EmailInput.tsx Normal file
View File

@@ -0,0 +1,30 @@
import React from 'react';
interface Props {
email: string;
setEmail: (value: string) => void;
onSubmit: () => void;
}
const EmailInput: React.FC<Props> = ({ email, setEmail, onSubmit }) => {
return (
<div className='request-container'>
<h1 className='header'>Forgot password</h1>
<p className='sub-header'>
Enter your email for the verification process, we will send a 4-digit code to your email.
</p>
<form className='auth-form' onSubmit={(e) => { e.preventDefault(); onSubmit(); }}>
<input
type='email'
placeholder='Email'
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>
<button type='submit' className='continue-button'>Continue</button>
</form>
</div>
);
};
export default EmailInput;

52
app/src/components/forgotPassword/OTPInput.tsx Normal file
View File

@@ -0,0 +1,52 @@
import React, { useState, useRef, useEffect } from 'react';
const OTPInput: React.FC<{ length?: number; onComplete: (otp: string) => void }> = ({ length = 4, onComplete }) => {
const [otpValues, setOtpValues] = useState<string[]>(Array(length).fill(''));
const inputsRef = useRef<(HTMLInputElement | null)[]>([]);
// Auto focus first input on mount
useEffect(() => {
inputsRef.current[0]?.focus();
}, []);
const handleChange = (value: string, index: number) => {
if (/^[0-9]?$/.test(value)) {
const newOtp = [...otpValues];
newOtp[index] = value;
setOtpValues(newOtp);
if (value && index < length - 1) {
inputsRef.current[index + 1]?.focus();
}
if (newOtp.every((digit) => digit !== '')) {
onComplete(newOtp.join(''));
}
}
};
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>, index: number) => {
if (e.key === 'Backspace' && !otpValues[index] && index > 0) {
inputsRef.current[index - 1]?.focus();
}
};
return (
<div className="otp-container">
{otpValues.map((value, index) => (
<input
key={index}
type="text"
className="otp-input"
maxLength={1}
value={value}
onChange={(e) => handleChange(e.target.value, index)}
onKeyDown={(e) => handleKeyDown(e, index)}
ref={(el) => (inputsRef.current[index] = el)}
/>
))}
</div>
);
};
export default OTPInput;

57
app/src/components/forgotPassword/OTP_Verification.tsx Normal file
View File

@@ -0,0 +1,57 @@
import React, { useState } from 'react';
import OTPInput from './OTPInput';
interface Props {
email: string;
timer: number;
setCode: (value: string) => void;
onSubmit: () => void;
resendCode: () => void;
}
const OTPVerification: React.FC<Props> = ({ email, timer, setCode, onSubmit, resendCode }) => {
const [otp, setOtp] = useState('');
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
console.log('otp.length: ', otp.length);
if (otp.length === 4) {
onSubmit();
} else {
alert('Please enter the 4-digit code');
}
};
return (
<div className='request-container'>
<h1 className='header'>Verification</h1>
<p className='sub-header'>
Enter the 4-digit code sent to <strong>{email}</strong>.
</p>
<form className='auth-form' onSubmit={handleSubmit}>
<OTPInput length={4} onComplete={(code) => { setOtp(code); setCode(code); }} />
<div className="timing">
{timer > 0
? `${String(Math.floor(timer / 60)).padStart(2, '0')}:${String(timer % 60).padStart(2, '0')}`
: ''}
</div>
<button
type='submit'
className='continue-button'
disabled={otp.length < 4} // prevent clicking if not complete
>
Verify
</button>
</form>
<div
className={`resend ${timer > 0 ? 'disabled' : ''}`}
onClick={timer === 0 ? resendCode : undefined}
style={{ cursor: timer === 0 ? 'pointer' : 'not-allowed', opacity: timer === 0 ? 1 : 0.5 }}
>
If you didn’t receive a code, <span>Resend</span>
</div>
</div>
);
};
export default OTPVerification;

77
app/src/components/forgotPassword/PasswordSetup.tsx Normal file
View File

@@ -0,0 +1,77 @@
import React, { useState } from 'react';
import { EyeIcon } from '../icons/ExportCommonIcons';
interface Props {
newPassword: string;
confirmPassword: string;
setNewPassword: (value: string) => void;
setConfirmPassword: (value: string) => void;
onSubmit: () => void;
}
const PasswordSetup: React.FC<Props> = ({
newPassword,
confirmPassword,
setNewPassword,
setConfirmPassword,
onSubmit
}) => {
const [showNewPassword, setShowNewPassword] = useState(false);
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
return (
<div className='request-container'>
<h1 className='header'>New Password</h1>
<p className='sub-header'>Set the new password for your account so you can login and access all features.</p>
<form
className='auth-form'
onSubmit={(e) => {
e.preventDefault();
if (newPassword !== confirmPassword) {
alert('Passwords do not match');
return;
}
onSubmit();
}}
>
<div className="password-container">
<input
type={showNewPassword ? 'text' : 'password'}
placeholder='Enter new password'
value={newPassword}
onChange={(e) => setNewPassword(e.target.value)}
required
/>
<button
type="button"
className="toggle-password"
onClick={() => setShowNewPassword(prev => !prev)}
>
<EyeIcon isClosed={!showNewPassword} />
</button>
</div>
<div className="password-container">
<input
type={showConfirmPassword ? 'text' : 'password'}
placeholder='Confirm password'
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
required
/>
<button
type="button"
className="toggle-password"
onClick={() => setShowConfirmPassword(prev => !prev)}
>
<EyeIcon isClosed={!showConfirmPassword} />
</button>
</div>
<button type='submit' className='continue-button'>Update password</button>
</form>
</div>
);
};
export default PasswordSetup;

18
app/src/components/icons/ContextMenuIcons.tsx
View File

@@ -173,7 +173,7 @@ export function FocusIcon() {
export function TransformIcon() {
return (
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_55_63)">
<g clipPath="url(#clip0_55_63)">
<path d="M3 0.75C2.40326 0.75 1.83097 0.987053 1.40901 1.40901C0.987053 1.83097 0.75 2.40326 0.75 3C0.75 3.59674 0.987053 4.16903 1.40901 4.59099C1.83097 5.01295 2.40326 5.25 3 5.25C3.24134 5.24937 3.481 5.20991 3.7098 5.13314L3.28805 4.71141L4.79632 3.20316L4.94545 3.05402L5.22342 3.33199C5.24047 3.22214 5.24935 3.11117 5.25 3C5.25 2.40326 5.01295 1.83097 4.59099 1.40901C4.16903 0.987053 3.59674 0.75 3 0.75ZM4.94545 3.65062L3.88467 4.71141L5.92336 6.75L5.37333 7.30001L8.07427 7.84017L7.53403 5.13923L6.98405 5.68922L4.94545 3.65062ZM8.28647 6.75L8.61202 8.37797L6.75 8.00555V11.25H11.25V6.75H8.28645H8.28647Z" fill="#FCFDFD" />
</g>
<defs>
@@ -189,10 +189,10 @@ export function TransformIcon() {
export function DublicateIcon() {
return (
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1_190)">
<g clipPath="url(#clip0_1_190)">
<path d="M9 1.5H2C1.72386 1.5 1.5 1.72386 1.5 2V9C1.5 9.27615 1.27614 9.5 1 9.5C0.72386 9.5 0.5 9.27615 0.5 9V2C0.5 1.17158 1.17158 0.5 2 0.5H9C9.27615 0.5 9.5 0.72386 9.5 1C9.5 1.27614 9.27615 1.5 9 1.5Z" fill="white" />
<path d="M6.5 5.5C6.5 5.22385 6.72385 5 7 5C7.27615 5 7.5 5.22385 7.5 5.5V6.5H8.5C8.77615 6.5 9 6.72385 9 7C9 7.27615 8.77615 7.5 8.5 7.5H7.5V8.5C7.5 8.77615 7.27615 9 7 9C6.72385 9 6.5 8.77615 6.5 8.5V7.5H5.5C5.22385 7.5 5 7.27615 5 7C5 6.72385 5.22385 6.5 5.5 6.5H6.5V5.5Z" fill="white" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 2.5C10.8285 2.5 11.5 3.17158 11.5 4V10C11.5 10.8285 10.8285 11.5 10 11.5H4C3.17158 11.5 2.5 10.8285 2.5 10V4C2.5 3.17158 3.17158 2.5 4 2.5H10ZM10 3.5C10.2761 3.5 10.5 3.72386 10.5 4V10C10.5 10.2761 10.2761 10.5 10 10.5H4C3.72386 10.5 3.5 10.2761 3.5 10V4C3.5 3.72386 3.72386 3.5 4 3.5H10Z" fill="white" />
<path fillRule="evenodd" clipRule="evenodd" d="M10 2.5C10.8285 2.5 11.5 3.17158 11.5 4V10C11.5 10.8285 10.8285 11.5 10 11.5H4C3.17158 11.5 2.5 10.8285 2.5 10V4C2.5 3.17158 3.17158 2.5 4 2.5H10ZM10 3.5C10.2761 3.5 10.5 3.72386 10.5 4V10C10.5 10.2761 10.2761 10.5 10 10.5H4C3.72386 10.5 3.5 10.2761 3.5 10V4C3.5 3.72386 3.72386 3.5 4 3.5H10Z" fill="white" />
</g>
<defs>
<clipPath id="clip0_1_190">
@@ -207,7 +207,7 @@ export function DublicateIcon() {
export function CopyIcon() {
return (
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1_197)">
<g clipPath="url(#clip0_1_197)">
<path d="M4.375 1.5H8.875C9.22018 1.5 9.5 1.77982 9.5 2.125V5.07422C9.25749 5.02497 9.00651 5 8.75 5C6.67893 5 5 6.67893 5 8.75C5 8.91951 5.01426 9.08616 5.03613 9.25H4.375C4.02982 9.25 3.75 8.97018 3.75 8.625V2.125C3.75 1.77982 4.02982 1.5 4.375 1.5Z" stroke="white" />
<path d="M7.02181 10.8891C5.8404 9.93469 5.6564 8.20324 6.61085 7.02182C7.56529 5.84041 9.29675 5.65641 10.4782 6.61086C11.6596 7.5653 11.8436 9.29676 10.8891 10.4782C9.93468 11.6596 8.20322 11.8436 7.02181 10.8891ZM7.53035 9.63652C7.55951 9.73588 7.64818 9.80729 7.7514 9.81511L7.79716 9.81441L7.84067 9.80562C7.94019 9.77642 8.01223 9.68724 8.01987 9.58381L8.01932 9.53942L7.89568 8.38246L9.76272 9.88956L9.80012 9.91475C9.89114 9.96447 10.0045 9.95243 10.083 9.88469L10.1143 9.8522L10.1395 9.8148C10.1892 9.72378 10.1772 9.61043 10.1094 9.53189L10.0769 9.50062L8.20913 7.99291L9.36823 7.86974L9.41174 7.86095C9.52542 7.82759 9.60327 7.71674 9.59039 7.59475C9.57742 7.47272 9.47859 7.38002 9.36039 7.37128L9.3154 7.37259L7.5357 7.5631L7.50592 7.57044L7.46405 7.58808L7.42779 7.61277L7.40435 7.63401L7.37612 7.66895L7.36028 7.69633L7.35134 7.71672L7.33894 7.75692L7.33456 7.781L7.33441 7.81227L7.52217 9.59225L7.53035 9.63652Z" fill="white" />
</g>
@@ -223,7 +223,7 @@ export function CopyIcon() {
export function PasteIcon() {
return (
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1_207)">
<g clipPath="url(#clip0_1_207)">
<path d="M4.375 1.5H8.875C9.22018 1.5 9.5 1.77982 9.5 2.125V5.07422C9.25749 5.02497 9.00651 5 8.75 5C6.67893 5 5 6.67893 5 8.75C5 8.91951 5.01426 9.08616 5.03613 9.25H4.375C4.02982 9.25 3.75 8.97018 3.75 8.625V2.125C3.75 1.77982 4.02982 1.5 4.375 1.5Z" stroke="white" />
<path d="M10.4408 6.58164C11.6383 7.51587 11.8516 9.24395 10.9174 10.4414C9.9832 11.6389 8.25512 11.8523 7.05765 10.918C5.86019 9.98382 5.64679 8.25574 6.58102 7.05828C7.51524 5.86081 9.24332 5.64742 10.4408 6.58164ZM9.95361 7.84272C9.92276 7.74387 9.83289 7.67398 9.72956 7.66791L9.68382 7.66939L9.64046 7.67892C9.54146 7.7098 9.47094 7.8002 9.46506 7.90374L9.46636 7.94811L9.60965 9.10281L7.71726 7.62766L7.67944 7.60311C7.58759 7.55494 7.47446 7.56891 7.39709 7.63798L7.36637 7.67099L7.34182 7.70881C7.29366 7.80066 7.30763 7.91379 7.37669 7.99117L7.4097 8.02188L9.30286 9.49763L8.14603 9.64048L8.10268 9.65001C7.98957 9.6853 7.91362 9.79746 7.92858 9.91921C7.94362 10.041 8.044 10.132 8.16233 10.1387L8.2073 10.1367L9.9835 9.91593L10.0131 9.90809L10.0547 9.88974L10.0906 9.86444L10.1136 9.8428L10.1413 9.80739L10.1566 9.77974L10.1652 9.7592L10.1769 9.71879L10.1809 9.69464L10.1805 9.66338L9.96254 7.88684L9.95361 7.84272Z" fill="white" />
</g>
@@ -248,7 +248,7 @@ export function ModifiersIcon() {
export function DeleteIcon() {
return (
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1_241)">
<g clipPath="url(#clip0_1_241)">
<path d="M4.70588 5.32353V9.02941M7.17647 5.32353V9.02941M9.64706 2.85294V10.2647C9.64706 10.947 9.09402 11.5 8.41177 11.5H3.47059C2.78835 11.5 2.23529 10.947 2.23529 10.2647V2.85294M1 2.85294H10.8824M7.79412 2.85294V2.23529C7.79412 1.55306 7.24108 1 6.55882 1H5.32353C4.6413 1 4.08824 1.55306 4.08824 2.23529V2.85294" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
</g>
<defs>
@@ -263,7 +263,7 @@ export function DeleteIcon() {
export function MoveIcon() {
return (
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1_241)">
<g clipPath="url(#clip0_1_241)">
<path d="M4.70588 5.32353V9.02941M7.17647 5.32353V9.02941M9.64706 2.85294V10.2647C9.64706 10.947 9.09402 11.5 8.41177 11.5H3.47059C2.78835 11.5 2.23529 10.947 2.23529 10.2647V2.85294M1 2.85294H10.8824M7.79412 2.85294V2.23529C7.79412 1.55306 7.24108 1 6.55882 1H5.32353C4.6413 1 4.08824 1.55306 4.08824 2.23529V2.85294" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
</g>
<defs>
@@ -278,7 +278,7 @@ export function MoveIcon() {
export function RotateIcon() {
return (
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.99998 1.31111H4.7251L3.88539 0.471406L4.3568 0L6.00124 1.64444L4.37502 3.27067L3.90361 2.79927L4.72511 1.97777H3.99998C2.89541 1.97777 1.99998 2.87321 1.99998 3.97777H1.33331C1.33331 2.50501 2.52722 1.31111 3.99998 1.31111ZM3.99998 5.33333C3.99998 4.59696 4.59693 4 5.33331 4H10.6667C11.4031 4 12 4.59696 12 5.33333V10.6667C12 11.4031 11.4031 12 10.6667 12H5.33331C4.59693 12 3.99998 11.4031 3.99998 10.6667V5.33333ZM5.33331 4.66667H10.6667C11.0349 4.66667 11.3333 4.96514 11.3333 5.33333V10.6667C11.3333 11.0349 11.0349 11.3333 10.6667 11.3333H5.33331C4.96513 11.3333 4.66664 11.0349 4.66664 10.6667V5.33333C4.66664 4.96514 4.96513 4.66667 5.33331 4.66667Z" fill="#FCFDFD" />
<path fillRule="evenodd" clipRule="evenodd" d="M3.99998 1.31111H4.7251L3.88539 0.471406L4.3568 0L6.00124 1.64444L4.37502 3.27067L3.90361 2.79927L4.72511 1.97777H3.99998C2.89541 1.97777 1.99998 2.87321 1.99998 3.97777H1.33331C1.33331 2.50501 2.52722 1.31111 3.99998 1.31111ZM3.99998 5.33333C3.99998 4.59696 4.59693 4 5.33331 4H10.6667C11.4031 4 12 4.59696 12 5.33333V10.6667C12 11.4031 11.4031 12 10.6667 12H5.33331C4.59693 12 3.99998 11.4031 3.99998 10.6667V5.33333ZM5.33331 4.66667H10.6667C11.0349 4.66667 11.3333 4.96514 11.3333 5.33333V10.6667C11.3333 11.0349 11.0349 11.3333 10.6667 11.3333H5.33331C4.96513 11.3333 4.66664 11.0349 4.66664 10.6667V5.33333C4.66664 4.96514 4.96513 4.66667 5.33331 4.66667Z" fill="#FCFDFD" />
</svg>
);
}
@@ -286,7 +286,7 @@ export function RotateIcon() {
export function GroupIcon() {
return (
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.99998 1.31111H4.7251L3.88539 0.471406L4.3568 0L6.00124 1.64444L4.37502 3.27067L3.90361 2.79927L4.72511 1.97777H3.99998C2.89541 1.97777 1.99998 2.87321 1.99998 3.97777H1.33331C1.33331 2.50501 2.52722 1.31111 3.99998 1.31111ZM3.99998 5.33333C3.99998 4.59696 4.59693 4 5.33331 4H10.6667C11.4031 4 12 4.59696 12 5.33333V10.6667C12 11.4031 11.4031 12 10.6667 12H5.33331C4.59693 12 3.99998 11.4031 3.99998 10.6667V5.33333ZM5.33331 4.66667H10.6667C11.0349 4.66667 11.3333 4.96514 11.3333 5.33333V10.6667C11.3333 11.0349 11.0349 11.3333 10.6667 11.3333H5.33331C4.96513 11.3333 4.66664 11.0349 4.66664 10.6667V5.33333C4.66664 4.96514 4.96513 4.66667 5.33331 4.66667Z" fill="#FCFDFD" />
<path fillRule="evenodd" clipRule="evenodd" d="M3.99998 1.31111H4.7251L3.88539 0.471406L4.3568 0L6.00124 1.64444L4.37502 3.27067L3.90361 2.79927L4.72511 1.97777H3.99998C2.89541 1.97777 1.99998 2.87321 1.99998 3.97777H1.33331C1.33331 2.50501 2.52722 1.31111 3.99998 1.31111ZM3.99998 5.33333C3.99998 4.59696 4.59693 4 5.33331 4H10.6667C11.4031 4 12 4.59696 12 5.33333V10.6667C12 11.4031 11.4031 12 10.6667 12H5.33331C4.59693 12 3.99998 11.4031 3.99998 10.6667V5.33333ZM5.33331 4.66667H10.6667C11.0349 4.66667 11.3333 4.96514 11.3333 5.33333V10.6667C11.3333 11.0349 11.0349 11.3333 10.6667 11.3333H5.33331C4.96513 11.3333 4.66664 11.0349 4.66664 10.6667V5.33333C4.66664 4.96514 4.96513 4.66667 5.33331 4.66667Z" fill="#FCFDFD" />
</svg>
);
}

181
app/src/components/icons/ExportCommonIcons.tsx
View File

@@ -1356,3 +1356,184 @@ export const GreenTickIcon = () => {
</svg>
);
};
export const SuccessIcon = () => {
return (
<svg width="155" height="155" viewBox="0 0 155 155" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M115.596 48.1456C117.888 50.4283 117.896 54.1368 115.613 56.4288L66.2605 105.982C63.9779 108.274 60.2695 108.281 57.9775 105.999L39.9789 88.075C37.6868 85.7924 37.6791 82.0838 39.9617 79.7917C42.2443 77.4996 45.9528 77.4919 48.2449 79.7745L62.0935 93.5657L107.313 48.1624C109.596 45.8704 113.304 45.8629 115.596 48.1456Z" fill="#244A84" />
<path fillRule="evenodd" clipRule="evenodd" d="M77.1586 11.7143C46.1114 11.7143 20.065 33.3937 13.379 62.4361L13.379 62.4362C12.2906 67.1635 11.7143 72.0909 11.7143 77.1586C11.7143 113.275 41.0421 142.603 77.1586 142.603C113.275 142.603 142.603 113.275 142.603 77.1586C142.603 41.0421 113.275 11.7143 77.1586 11.7143ZM1.96331 59.808C9.8455 25.5697 40.53 0 77.1586 0C119.745 0 154.317 34.5725 154.317 77.1586C154.317 119.745 119.745 154.317 77.1586 154.317C34.5725 154.317 0 119.745 0 77.1586C0 71.1999 0.677961 65.3909 1.96331 59.808Z" fill="#C2CDE0" />
</svg>
)
}
export const AlertIcon = () => {
return (
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.454 14.797H6.54597C6.1917 14.8122 5.83973 14.7329 5.5262 14.5673C5.21266 14.4017 4.94885 14.1556 4.76177 13.8544C4.5747 13.5531 4.47112 13.2075 4.46165 12.8531C4.45219 12.4986 4.53719 12.148 4.70792 11.8372L8.16189 5.83436C8.35337 5.51828 8.62315 5.25693 8.94513 5.07553C9.2671 4.89413 9.63038 4.79883 9.99993 4.79883C10.3695 4.79883 10.7328 4.89413 11.0548 5.07553C11.3768 5.25693 11.6466 5.51828 11.838 5.83436L15.292 11.8372C15.4627 12.148 15.5478 12.4986 15.5383 12.8531C15.5288 13.2075 15.4253 13.5531 15.2382 13.8544C15.0511 14.1556 14.7872 14.4017 14.4737 14.5673C14.1602 14.7329 13.8082 14.8122 13.454 14.797Z" stroke="var(--text-color)" stroke-width="0.832956" stroke-linecap="round" stroke-linejoin="round" />
<path d="M10.0015 12.1777C10.0679 12.1791 10.1324 12.1997 10.187 12.2373C10.2417 12.275 10.2842 12.328 10.3091 12.3896C10.3339 12.4515 10.3402 12.5197 10.3267 12.585C10.3131 12.6501 10.2802 12.7099 10.2329 12.7568C10.1857 12.8035 10.1254 12.8357 10.0601 12.8486C9.99488 12.8615 9.92713 12.8544 9.86572 12.8291C9.83506 12.8165 9.80623 12.8 9.78076 12.7793L9.71436 12.7061L9.67139 12.6172C9.66175 12.5864 9.65628 12.5541 9.65576 12.5215C9.65579 12.4763 9.66481 12.4314 9.68213 12.3896C9.69961 12.3477 9.72603 12.3093 9.7583 12.2773C9.79045 12.2455 9.82857 12.2203 9.87061 12.2031C9.91219 12.1862 9.95664 12.1776 10.0015 12.1777ZM9.85596 10.998L9.77783 8.09961V8.08887L9.77686 8.07812V8.03125C9.77846 8.01596 9.78187 8.00098 9.78662 7.98633C9.7962 7.95676 9.81179 7.92933 9.83252 7.90625C9.84285 7.89476 9.85427 7.88407 9.8667 7.875L9.90674 7.85156C9.93523 7.83888 9.96642 7.83203 9.99756 7.83203C10.013 7.83203 10.0284 7.83375 10.0435 7.83691L10.0884 7.85156C10.1166 7.86421 10.1418 7.88315 10.1626 7.90625C10.1834 7.92943 10.199 7.95689 10.2085 7.98633C10.2181 8.01596 10.2215 8.04735 10.2183 8.07812L10.2173 8.08887V8.10059L10.145 10.999V11.0059C10.145 11.0441 10.1291 11.0804 10.1021 11.1074C10.0749 11.1345 10.0386 11.1504 10.0005 11.1504C9.96219 11.1504 9.92502 11.1345 9.89795 11.1074C9.87115 11.0804 9.85598 11.0439 9.85596 11.0059V10.998Z" fill="black" stroke="var(--text-color)" stroke-width="0.555304" />
</svg>
)
}
export const NavigationIcon = () => {
return (
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.99988 4.58398C7.0132 4.58398 4.5835 7.01369 4.5835 10.0004C4.5835 12.9872 7.0132 15.4173 9.99988 15.4173C12.9867 15.4173 15.4168 12.9872 15.4168 10.0004C15.4168 7.01369 12.9867 4.58398 9.99988 4.58398ZM9.99988 14.7764C7.36664 14.7764 5.22402 12.634 5.22402 10.0004C5.22402 7.36713 7.3666 5.22451 9.99988 5.22451C12.6335 5.22451 14.7759 7.36709 14.7759 10.0004C14.7759 12.634 12.6335 14.7764 9.99988 14.7764Z" fill="var(--text-color)" fill-opacity="0.85" />
<path d="M9.92024 6.74255L8.37659 12.8023C8.36662 12.8418 8.38635 12.8823 8.42392 12.8985C8.46109 12.9147 8.50461 12.9018 8.52685 12.8671L10.0191 10.5407L11.4739 12.8667C11.4894 12.8915 11.5166 12.9055 11.544 12.9055C11.5548 12.9055 11.5655 12.9033 11.5764 12.8991C11.6142 12.8829 11.6341 12.8419 11.6244 12.8023L10.0807 6.74255C10.0619 6.66915 9.93845 6.66915 9.92024 6.74255ZM10.0899 10.3422C10.0747 10.3184 10.0487 10.3039 10.0203 10.3039H10.0201C9.99177 10.3039 9.96531 10.3178 9.95019 10.3416L8.66357 12.3474L10.0001 7.09867L11.3321 12.3286L10.0899 10.3422Z" fill="var(--text-color)" fill-opacity="0.85" />
<path d="M11.5438 12.9321C11.5066 12.9321 11.4708 12.9126 11.4514 12.8814L10.0187 10.59L8.54867 12.8817C8.52069 12.9257 8.46184 12.9438 8.41374 12.9235C8.3643 12.9019 8.33822 12.8484 8.35165 12.7966L9.89512 6.73667C9.90622 6.69241 9.94861 6.66211 10.0003 6.66211C10.0519 6.66211 10.0946 6.69199 10.1059 6.73667L11.649 12.7966C11.6624 12.8488 11.6362 12.9024 11.5865 12.9235C11.5723 12.9293 11.5584 12.9321 11.5438 12.9321ZM10.0189 10.4928L10.0411 10.5279L11.4957 12.8537C11.5097 12.8765 11.5396 12.8863 11.5664 12.8754C11.5917 12.8645 11.6057 12.8365 11.5988 12.8095L10.0553 6.7495C10.0486 6.72325 10.0216 6.71384 10.0002 6.71384C9.9787 6.71384 9.95185 6.72325 9.94515 6.7495L8.4019 12.8095C8.39461 12.8365 8.40842 12.8645 8.4339 12.8754C8.45842 12.8852 8.48985 12.8766 8.50444 12.8537L10.0189 10.4928ZM8.59871 12.4969L9.99995 6.99367L11.3991 12.4844L10.0678 10.3568C10.0465 10.3226 9.99244 10.3244 9.97215 10.3562L8.59871 12.4969Z" fill="var(--text-color)" fill-opacity="0.85" />
</svg>
)
}
export const HangTagIcon = () => {
return (
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_5895_2753)">
<path d="M14.7002 5.2998V9.37598L9.5 14.5762L5.42383 10.5L10.624 5.2998H14.7002ZM12 7.2002C11.5581 7.2002 11.2002 7.55806 11.2002 8C11.2002 8.44194 11.5581 8.7998 12 8.7998C12.4419 8.7998 12.7998 8.44194 12.7998 8C12.7998 7.55806 12.4419 7.2002 12 7.2002Z" stroke="var(--text-color)" stroke-opacity="0.85" stroke-width="0.6" />
</g>
<defs>
<clipPath id="clip0_5895_2753">
<rect width="20" height="20" fill="var(--text-color)" />
</clipPath>
</defs>
</svg>
)
}
export const DecalInfoIcon = () => {
return (
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.0002 15.4173C12.9917 15.4173 15.4168 12.9922 15.4168 10.0007C15.4168 7.00911 12.9917 4.58398 10.0002 4.58398C7.00862 4.58398 4.5835 7.00911 4.5835 10.0007C4.5835 12.9922 7.00862 15.4173 10.0002 15.4173Z" stroke="var(--text-color)" stroke-opacity="0.85" stroke-width="0.8125" />
<path d="M10 12.709V9.45898" stroke="var(--text-color)" stroke-opacity="0.85" stroke-width="0.8125" stroke-linecap="round" />
<path d="M10.0002 7.29167C10.2993 7.29167 10.5418 7.53418 10.5418 7.83333C10.5418 8.13249 10.2993 8.375 10.0002 8.375C9.70101 8.375 9.4585 8.13249 9.4585 7.83333C9.4585 7.53418 9.70101 7.29167 10.0002 7.29167Z" fill="var(--text-color)" fill-opacity="0.85" />
</svg>
)
}
export const LayeringBottomIcon = () => {
return (
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.857138" y="5.39229" width="10.9233" height="9.75071" stroke="var(--text-color)" stroke-width="0.714277" />
<path d="M5.49121 0.599609H14.3867C14.9559 0.599609 15.3994 1.01267 15.3994 1.5V9.5C15.3993 9.98728 14.9559 10.3994 14.3867 10.3994H5.49121C4.92207 10.3994 4.47858 9.98728 4.47852 9.5V1.5C4.47852 1.01268 4.92203 0.599609 5.49121 0.599609Z" fill="#6F42C1" stroke="white" stroke-width="0.2" />
<path d="M7.87686 6.85212L9.54491 8.3521C9.5966 8.39897 9.65809 8.43616 9.72585 8.46155C9.7936 8.48693 9.86628 8.5 9.93968 8.5C10.0131 8.5 10.0858 8.48693 10.1535 8.46155C10.2213 8.43616 10.2828 8.39897 10.3345 8.3521L12.0025 6.85212C12.1072 6.75797 12.166 6.63027 12.166 6.49713C12.166 6.36398 12.1072 6.23628 12.0025 6.14213C11.8978 6.04798 11.7558 5.99509 11.6077 5.99509C11.4597 5.99509 11.3177 6.04798 11.213 6.14213L10.4957 6.79212V2.99717C10.4957 2.86456 10.4371 2.73739 10.3328 2.64362C10.2286 2.54985 10.0871 2.49718 9.93968 2.49718C9.79222 2.49718 9.65079 2.54985 9.54652 2.64362C9.44224 2.73739 9.38366 2.86456 9.38366 2.99717V6.79212L8.6664 6.14213C8.61472 6.09527 8.55322 6.05807 8.48546 6.03269C8.41771 6.0073 8.34503 5.99423 8.27163 5.99423C8.19823 5.99423 8.12556 6.0073 8.0578 6.03269C7.99005 6.05807 7.92855 6.09527 7.87686 6.14213C7.82475 6.18861 7.78338 6.24391 7.75516 6.30484C7.72693 6.36577 7.71239 6.43112 7.71239 6.49713C7.71239 6.56313 7.72693 6.62848 7.75516 6.68941C7.78338 6.75034 7.82475 6.80564 7.87686 6.85212Z" fill="#FCFDFD" />
</svg>
)
}
export const LayeringTopIcon = () => {
return (
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.857138" y="5.39229" width="10.9233" height="9.75071" stroke="var(--text-color)" stroke-width="0.714277" />
<path d="M5.49121 0.599609H14.3867C14.9559 0.599609 15.3994 1.01267 15.3994 1.5V9.5C15.3993 9.98728 14.9559 10.3994 14.3867 10.3994H5.49121C4.92207 10.3994 4.47858 9.98728 4.47852 9.5V1.5C4.47852 1.01268 4.92203 0.599609 5.49121 0.599609Z" fill="#6F42C1" stroke="white" stroke-width="0.2" />
<path d="M12.002 4.14397L10.334 2.64399C10.2823 2.59713 10.2208 2.55993 10.1531 2.53455C10.0853 2.50916 10.0126 2.49609 9.93923 2.49609C9.86583 2.49609 9.79315 2.50916 9.7254 2.53455C9.65764 2.55993 9.59614 2.59713 9.54446 2.64399L7.87641 4.14397C7.77171 4.23812 7.71289 4.36582 7.71289 4.49897C7.71289 4.63212 7.77171 4.75981 7.87641 4.85396C7.98111 4.94811 8.12311 5.00101 8.27118 5.00101C8.41925 5.00101 8.56125 4.94811 8.66595 4.85396L9.38321 4.20397V7.99892C9.38321 8.13153 9.44179 8.25871 9.54606 8.35247C9.65034 8.44624 9.79176 8.49892 9.93923 8.49892C10.0867 8.49892 10.2281 8.44624 10.3324 8.35247C10.4367 8.25871 10.4952 8.13153 10.4952 7.99892V4.20397L11.2125 4.85396C11.2642 4.90083 11.3257 4.93802 11.3934 4.96341C11.4612 4.98879 11.5339 5.00186 11.6073 5.00186C11.6807 5.00186 11.7533 4.98879 11.8211 4.96341C11.8889 4.93802 11.9504 4.90083 12.002 4.85396C12.0542 4.80748 12.0955 4.75218 12.1238 4.69125C12.152 4.63033 12.1665 4.56497 12.1665 4.49897C12.1665 4.43296 12.152 4.36761 12.1238 4.30668C12.0955 4.24575 12.0542 4.19045 12.002 4.14397Z" fill="#FCFDFD" />
</svg>
)
}
export const ValueUpdateIcon = () => {
return (
<svg width="9" height="12" viewBox="0 0 9 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.30511 4.5C1.50348 4.5 1.10202 3.53079 1.66886 2.96396L3.80771 0.825099C4.15911 0.473707 4.72882 0.473708 5.08021 0.825099L7.21907 2.96396C7.78591 3.5308 7.38445 4.5 6.58282 4.5L2.30511 4.5Z" fill="#B7B7C6" />
<path d="M2.30511 7.5C1.50348 7.5 1.10202 8.46921 1.66886 9.03604L3.80771 11.1749C4.15911 11.5263 4.72882 11.5263 5.08021 11.1749L7.21907 9.03604C7.78591 8.4692 7.38445 7.5 6.58282 7.5L2.30511 7.5Z" fill="#B7B7C6" />
</svg>
)
}
export const ListTaskIcon = () => {
return (
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.00008 8.66667H12.6667C13.0349 8.66667 13.3334 8.96514 13.3334 9.33333C13.3334 9.70152 13.0349 10 12.6667 10H6.00008C5.63189 10 5.33341 9.70152 5.33341 9.33333C5.33341 8.96514 5.63189 8.66667 6.00008 8.66667ZM6.00008 11.3333H12.6667C13.0349 11.3333 13.3334 11.6318 13.3334 12C13.3334 12.3682 13.0349 12.6667 12.6667 12.6667H6.00008C5.63189 12.6667 5.33341 12.3682 5.33341 12C5.33341 11.6318 5.63189 11.3333 6.00008 11.3333ZM10.0001 6H12.6667C13.0349 6 13.3334 6.29848 13.3334 6.66667C13.3334 7.03486 13.0349 7.33333 12.6667 7.33333H10.0001C9.63189 7.33333 9.33342 7.03486 9.33342 6.66667C9.33342 6.29848 9.63189 6 10.0001 6ZM5.16184 7.27614L2.66675 4.78105L3.60956 3.83824L5.16184 5.39052L8.55237 2L9.49518 2.94281L5.16184 7.27614Z" fill="#B7B7C6" />
</svg>
)
}
export const LocationPinIcon = () => {
return (
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.99992 14C10.3333 11.6 12.6666 9.45093 12.6666 6.8C12.6666 4.14903 10.5773 2 7.99992 2C5.42259 2 3.33325 4.14903 3.33325 6.8C3.33325 9.45093 5.66659 11.6 7.99992 14Z" stroke="#B7B7C6" stroke-linecap="round" stroke-linejoin="round" />
<path d="M8 8.66602C9.1046 8.66602 10 7.77062 10 6.66602C10 5.56145 9.1046 4.66602 8 4.66602C6.8954 4.66602 6 5.56145 6 6.66602C6 7.77062 6.8954 8.66602 8 8.66602Z" stroke="#B7B7C6" stroke-linecap="round" stroke-linejoin="round" />
</svg>
)
}
export const ClockThreeIcon = () => {
return (
<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.5 3.20833V5.5H6.875M9.625 5.5C9.625 7.77819 7.77819 9.625 5.5 9.625C3.22183 9.625 1.375 7.77819 1.375 5.5C1.375 3.22183 3.22183 1.375 5.5 1.375C7.77819 1.375 9.625 3.22183 9.625 5.5Z" stroke="#FCFDFD" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
)
}
export const SlectedTickIcon = () => {
return (
<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.90747 6.87464C4.98667 6.94724 5.11867 6.94724 5.19787 6.86804L7.67287 4.31384C7.75207 4.23464 7.75207 4.10264 7.66627 4.02344C7.58707 3.94424 7.45507 3.94424 7.37587 4.03004L4.90087 6.58424L5.19127 6.57764L3.68647 5.19824C3.60067 5.11904 3.47527 5.12564 3.39607 5.21144C3.31687 5.29724 3.32347 5.42264 3.40927 5.50184L4.90747 6.87464Z" fill="#FCFDFD" />
<path d="M5.53442 9.57422C3.25742 9.57422 1.40942 7.72622 1.40942 5.44922C1.40942 3.17222 3.25742 1.32422 5.53442 1.32422C7.81142 1.32422 9.65942 3.17222 9.65942 5.44922C9.65942 7.72622 7.81142 9.57422 5.53442 9.57422ZM5.53442 1.72022C3.47522 1.72022 1.80542 3.39002 1.80542 5.44922C1.80542 7.50842 3.47522 9.17822 5.53442 9.17822C7.59362 9.17822 9.26342 7.50842 9.26342 5.44922C9.26342 3.39002 7.59362 1.72022 5.53442 1.72022Z" fill="#FCFDFD" />
</svg>
)
}
export const HourGlassIcon = () => {
return (
<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.98324 5.5C5.98324 6.21872 6.39671 6.55406 6.79659 6.87775C7.29742 7.28394 7.86133 7.74109 7.91957 9.13971H3.07633C3.13456 7.74109 3.69847 7.28394 4.19929 6.87775C4.59918 6.55406 5.01265 6.21872 5.01265 5.5C5.01265 4.78128 4.59918 4.44594 4.19929 4.12225C3.69847 3.71606 3.13456 3.25891 3.07633 1.86029H7.91956C7.86133 3.25891 7.29741 3.71606 6.79659 4.12225C6.39671 4.44594 5.98324 4.78128 5.98324 5.5ZM7.10233 4.49884C7.68468 4.02665 8.40971 3.43896 8.40971 1.61765V1.375H2.58618V1.61764C2.58618 3.43896 3.31121 4.02664 3.89357 4.49884C4.275 4.80846 4.52735 5.01276 4.52735 5.5C4.52735 5.98724 4.275 6.19154 3.89357 6.50116C3.31121 6.97335 2.58618 7.56104 2.58618 9.38235V9.625H8.40971V9.38236C8.40971 7.56104 7.68468 6.97336 7.10233 6.50116C6.72089 6.19154 6.46853 5.98724 6.46853 5.5C6.46853 5.01276 6.72088 4.80846 7.10233 4.49884ZM5.38706 6.85208L4.65814 7.44365C4.33882 7.70231 4.06366 7.92506 3.91613 8.41181H7.07976C6.93223 7.92506 6.65707 7.70231 6.33775 7.44365L5.60884 6.85208C5.54429 6.79967 5.4516 6.79967 5.38706 6.85208Z" fill="#FCFDFD" />
</svg>
)
}
export const TargetIcon = () => {
return (
<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.625 5.5C9.625 7.77815 7.77815 9.625 5.5 9.625M9.625 5.5C9.625 3.22182 7.77815 1.375 5.5 1.375M9.625 5.5H7.975M5.5 9.625C3.22182 9.625 1.375 7.77815 1.375 5.5M5.5 9.625V7.975M5.5 1.375C3.22182 1.375 1.375 3.22182 1.375 5.5M5.5 1.375V3.025M1.375 5.5H3.025" stroke="#FCFDFD" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
)
}
export const ForkLiftIcon = () => {
return (
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_6014_655)">
<g filter="url(#filter0_f_6014_655)">
<path d="M4.97826 12.4473C4.1581 12.4473 3.49243 13.112 3.49243 13.9331C3.49243 14.753 4.15813 15.4177 4.97826 15.4177C5.79818 15.4177 6.46284 14.753 6.46284 13.9331C6.46284 13.1119 5.79815 12.4473 4.97826 12.4473ZM4.97826 14.4544C4.69055 14.4544 4.45567 14.2208 4.45567 13.9331C4.45567 13.6454 4.69052 13.4105 4.97826 13.4105C5.26573 13.4105 5.49957 13.6454 5.49957 13.9331C5.49957 14.2208 5.26573 14.4544 4.97826 14.4544Z" fill="white" />
<path d="M11.3257 5.81717C11.1156 5.08596 10.4467 4.58203 9.6857 4.58203H5.20523C4.84291 4.58203 4.5491 4.87583 4.5491 5.23816V9.41249H4.07715C3.26935 9.41249 2.6145 10.0673 2.6145 10.8751V13.4258H2.88458C3.11388 12.4815 3.96429 11.7774 4.9782 11.7774C5.99161 11.7774 6.84123 12.4815 7.07052 13.4258H8.05798C8.13812 12.1123 9.22862 11.0679 10.5618 11.0679C11.2884 11.0679 11.9421 11.3804 12.4009 11.876V11.7487V10.3279C12.4009 9.8179 12.3293 9.31021 12.1885 8.82012L11.3257 5.81717ZM10.1793 8.21563L9.49446 8.6286L10.5313 10.6025H8.67763L7.81739 9.41249H6.07579V5.66572H9.6857C9.96187 5.66572 10.208 5.85115 10.2844 6.1165L11.1471 9.11919C11.2058 9.32329 11.2487 9.53116 11.2769 9.74131L10.1793 8.21563Z" fill="white" />
<path d="M10.5616 11.7383C9.54538 11.7383 8.7207 12.5617 8.7207 13.5792C8.7207 14.5948 9.54538 15.4183 10.5616 15.4183C11.5772 15.4183 12.4007 14.5948 12.4007 13.5792C12.4007 12.5617 11.5772 11.7383 10.5616 11.7383ZM10.5616 14.225C10.2051 14.225 9.91402 13.9357 9.91402 13.5792C9.91402 13.2226 10.2051 12.9316 10.5616 12.9316C10.9176 12.9316 11.2074 13.2226 11.2074 13.5792C11.2074 13.9357 10.9176 14.225 10.5616 14.225Z" fill="white" />
<path d="M14.8484 14.1482C14.3396 14.1482 13.9269 13.7355 13.9269 13.2268V4.58203H12.7197V15.0314H18.679V14.1482H14.8484Z" fill="white" />
<path d="M9.85501 7.42463L8.88497 8.09259C8.78745 8.15961 8.76301 8.2929 8.83003 8.39041C8.89704 8.48768 9.03033 8.51237 9.12785 8.44535L10.0979 7.77714C10.1954 7.71012 10.2199 7.57681 10.1529 7.47957C10.0858 7.38206 9.95231 7.35733 9.85501 7.42463Z" fill="white" />
</g>
<path d="M4.97826 12.4473C4.1581 12.4473 3.49243 13.112 3.49243 13.9331C3.49243 14.753 4.15813 15.4177 4.97826 15.4177C5.79818 15.4177 6.46284 14.753 6.46284 13.9331C6.46284 13.1119 5.79815 12.4473 4.97826 12.4473ZM4.97826 14.4544C4.69055 14.4544 4.45567 14.2208 4.45567 13.9331C4.45567 13.6454 4.69052 13.4105 4.97826 13.4105C5.26573 13.4105 5.49957 13.6454 5.49957 13.9331C5.49957 14.2208 5.26573 14.4544 4.97826 14.4544Z" fill="white" />
<path d="M11.3257 5.81717C11.1156 5.08596 10.4467 4.58203 9.6857 4.58203H5.20523C4.84291 4.58203 4.5491 4.87583 4.5491 5.23816V9.41249H4.07715C3.26935 9.41249 2.6145 10.0673 2.6145 10.8751V13.4258H2.88458C3.11388 12.4815 3.96429 11.7774 4.9782 11.7774C5.99161 11.7774 6.84123 12.4815 7.07052 13.4258H8.05798C8.13812 12.1123 9.22862 11.0679 10.5618 11.0679C11.2884 11.0679 11.9421 11.3804 12.4009 11.876V11.7487V10.3279C12.4009 9.8179 12.3293 9.31021 12.1885 8.82012L11.3257 5.81717ZM10.1793 8.21563L9.49446 8.6286L10.5313 10.6025H8.67763L7.81739 9.41249H6.07579V5.66572H9.6857C9.96187 5.66572 10.208 5.85115 10.2844 6.1165L11.1471 9.11919C11.2058 9.32329 11.2487 9.53116 11.2769 9.74131L10.1793 8.21563Z" fill="white" />
<path d="M10.5616 11.7383C9.54538 11.7383 8.7207 12.5617 8.7207 13.5792C8.7207 14.5948 9.54538 15.4183 10.5616 15.4183C11.5772 15.4183 12.4007 14.5948 12.4007 13.5792C12.4007 12.5617 11.5772 11.7383 10.5616 11.7383ZM10.5616 14.225C10.2051 14.225 9.91402 13.9357 9.91402 13.5792C9.91402 13.2226 10.2051 12.9316 10.5616 12.9316C10.9176 12.9316 11.2074 13.2226 11.2074 13.5792C11.2074 13.9357 10.9176 14.225 10.5616 14.225Z" fill="white" />
<path d="M14.8484 14.1482C14.3396 14.1482 13.9269 13.7355 13.9269 13.2268V4.58203H12.7197V15.0314H18.679V14.1482H14.8484Z" fill="white" />
<path d="M9.85501 7.42463L8.88497 8.09259C8.78745 8.15961 8.76301 8.2929 8.83003 8.39041C8.89704 8.48768 9.03033 8.51237 9.12785 8.44535L10.0979 7.77714C10.1954 7.71012 10.2199 7.57681 10.1529 7.47957C10.0858 7.38206 9.95231 7.35733 9.85501 7.42463Z" fill="white" />
</g>
<defs>
<filter id="filter0_f_6014_655" x="2.14674" y="4.11427" width="17" height="11.7715" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="0.233881" result="effect1_foregroundBlur_6014_655" />
</filter>
<clipPath id="clip0_6014_655">
<rect width="18.7105" height="18.7105" fill="white" transform="translate(0.644775 0.644531)" />
</clipPath>
</defs>
</svg>
)
}
export const RightHalfFillCircleIcon = () => {
return (
<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.50391 17.3962C13.8218 17.3962 17.4003 13.8178 17.4003 9.49985C17.4003 5.18983 13.8139 1.60352 9.49594 1.60352C5.17802 1.60352 1.59961 5.18983 1.59961 9.49985C1.59961 13.8178 5.18596 17.3962 9.50391 17.3962ZM9.50391 16.0523C5.86982 16.0523 2.95143 13.1339 2.95143 9.49985C2.95143 5.87373 5.86189 2.95533 9.49594 2.95533L9.50391 16.0523Z" fill="#CCACFF" />
</svg>
)
}

26
app/src/components/icons/SimulationIcons.tsx
View File

@@ -835,3 +835,29 @@ export const LayoutIcon = () => {
</svg>
);
};
export function FilePackageIcon({ isActive }: Readonly<{ isActive: boolean }>) {
return (
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_6049_2260)">
<g filter="url(#filter0_f_6049_2260)">
<path d="M12 3C13.1046 3 14 3.89543 14 5H15C16.6569 5 18 6.34315 18 8V14C18 15.6569 16.6569 17 15 17H5C3.34315 17 2 15.6569 2 14V8C2 6.34315 3.34315 5 5 5H6C6 3.89543 6.89543 3 8 3H12ZM17 9H3V14C3 15.0711 3.84198 15.9455 4.90018 15.9976L5 16H15C16.0711 16 16.9455 15.158 16.9976 14.0998L17 14V9ZM15 6H5C3.9289 6 3.05446 6.84198 3.00245 7.90018L3 8H17C17 6.9289 16.158 6.05446 15.0998 6.00245L15 6ZM12 4H8C7.47282 4 7.04092 4.40794 7.00274 4.92537L7 5H13C13 4.47282 12.5921 4.04092 12.0746 4.00274L12 4Z" fill="#FCFDFD" />
</g>
<path d="M12 3C13.1046 3 14 3.89543 14 5H15C16.6569 5 18 6.34315 18 8V14C18 15.6569 16.6569 17 15 17H5C3.34315 17 2 15.6569 2 14V8C2 6.34315 3.34315 5 5 5H6C6 3.89543 6.89543 3 8 3H12ZM17 9H3V14C3 15.0711 3.84198 15.9455 4.90018 15.9976L5 16H15C16.0711 16 16.9455 15.158 16.9976 14.0998L17 14V9ZM15 6H5C3.9289 6 3.05446 6.84198 3.00245 7.90018L3 8H17C17 6.9289 16.158 6.05446 15.0998 6.00245L15 6ZM12 4H8C7.47282 4 7.04092 4.40794 7.00274 4.92537L7 5H13C13 4.47282 12.5921 4.04092 12.0746 4.00274L12 4Z" fill="#FCFDFD" />
</g>
<defs>
<filter id="filter0_f_6049_2260" x="1.1" y="2.1" width="17.8" height="15.8" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="0.45" result="effect1_foregroundBlur_6049_2260" />
</filter>
<clipPath id="clip0_6049_2260">
<rect width="20" height="20" fill="white" />
</clipPath>
</defs>
</svg>
)
}

8
app/src/components/layout/scenes/MainScene.tsx
View File

@@ -59,7 +59,7 @@ function MainScene() {
const { setFloatingWidget } = useFloatingWidget();
const { clearComparisonProduct } = useComparisonProduct();
const { selectedFloorItem, setSelectedFloorItem } = useSelectedFloorItem();
const { selectedAssets,setSelectedAssets } = useSelectedAssets();
const { selectedAssets, setSelectedAssets } = useSelectedAssets();
const { assetStore, productStore } = useSceneContext();
const { products } = productStore();
const { setName } = assetStore();
@@ -101,7 +101,7 @@ function MainScene() {
if (!projectId) return
if (selectedFloorItem) {
console.log('selectedFloorItem.userData.modelUuid: ', selectedFloorItem.userData.modelUuid);
console.log(' newName: ', newName);
console.log(' newName: ', newName);
console.log('projectId: ', projectId);
setAssetsApi({
modelUuid: selectedFloorItem.userData.modelUuid,
@@ -140,7 +140,7 @@ function MainScene() {
{!selectedUser && (
<>
<KeyPressListener />
{loadingProgress > 0 && <LoadingPage progress={loadingProgress} />}
{/* {loadingProgress > 0 && <LoadingPage progress={loadingProgress} />} */}
{!isPlaying && (
<>
{toggleThreeD && !isVersionSaved && <ModuleToggle />}
@@ -188,7 +188,7 @@ function MainScene() {
}
onDragOver={(event) => event.preventDefault()}
>
<Scene layout="Main Layout" />
{/* <Scene layout="Main Layout" /> */}
</div>
{selectedProduct && selectedVersion && isVersionSaved && !isPlaying && activeModule === "simulation" && (

28
app/src/components/layout/sidebarLeft/Assets.tsx
View File

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
import Search from "../../ui/inputs/Search";
import { getCategoryAsset } from "../../../services/factoryBuilder/asset/assets/getCategoryAsset";
import { fetchAssets } from "../../../services/marketplace/fetchAssets";
import { useSelectedItem } from "../../../store/builder/store";
import { useDecalStore, useSelectedItem } from "../../../store/builder/store";
// images -------------------
import vehicle from "../../../assets/image/categories/vehicles.png";
@@ -13,7 +13,9 @@ import storage from "../../../assets/image/categories/storage.png";
import office from "../../../assets/image/categories/office.png";
import safety from "../../../assets/image/categories/safety.png";
import feneration from "../../../assets/image/categories/feneration.png";
import decal from "../../../assets/image/categories/decal.png";
import SkeletonUI from "../../templates/SkeletonUI";
import { AlertIcon, DecalInfoIcon, HangTagIcon, NavigationIcon } from "../../icons/ExportCommonIcons";
// -------------------------------------
interface AssetProp {
@@ -86,6 +88,7 @@ const Assets: React.FC = () => {
useEffect(() => {
setCategoryList([
{ category: "Fenestration", categoryImage: feneration },
{ category: "Decals", categoryImage: decal },
{ category: "Vehicles", categoryImage: vehicle },
{ category: "Workstation", categoryImage: workStation },
{ category: "Machines", categoryImage: machines },
@@ -111,6 +114,16 @@ const Assets: React.FC = () => {
}
};
const activeSubcategories = [
{ name: "Safety", icon: <AlertIcon /> },
{ name: "Navigation", icon: <NavigationIcon /> },
{ name: "Branding", icon: <HangTagIcon /> },
{ name: "Informational", icon: <DecalInfoIcon /> }
]
const { selectedSubCategory, setSelectedSubCategory } = useDecalStore();
return (
<div className="assets-container-main">
<Search onChange={handleSearchChange} />
@@ -181,6 +194,19 @@ const Assets: React.FC = () => {
← Back
</button>
</h2>
{selectedCategory === "Decals" &&
<>
<div className="catogory-asset-filter">
{activeSubcategories.map((cat, index) => (
<div className={`catogory-asset-filter-wrapper ${selectedSubCategory === cat.name ? "active" : ""}`} onClick={() => setSelectedSubCategory(cat.name)}>
<div className="sub-catagory">{cat.icon}</div>
<div className="sub-catagory">{cat.name}</div>
</div>
))}
</div>
</>
}
<div className="assets-container">
{categoryAssets?.map((asset: any, index: number) => (
<div

78
app/src/components/layout/sidebarRight/SideBarRight.tsx
View File

@@ -3,6 +3,7 @@ import Header from "./Header";
import useModuleStore, { useSubModuleStore } from "../../../store/useModuleStore";
import {
AnalysisIcon,
FilePackageIcon,
MechanicsIcon,
PropertiesIcon,
SimulationIcon,
@@ -12,6 +13,7 @@ import Visualization from "./visualization/Visualization";
import Analysis from "./analysis/Analysis";
import Simulations from "./simulation/Simulations";
import useVersionHistoryVisibleStore, {
useDecalStore,
useSaveVersion,
useSelectedFloorItem,
useToolMode,
@@ -31,6 +33,8 @@ import WallProperties from "./properties/WallProperties";
import FloorProperties from "./properties/FloorProperties";
import SelectedWallProperties from "./properties/SelectedWallProperties";
import SelectedFloorProperties from "./properties/SelectedFloorProperties";
import DecalTransformation from "./decals/DecalTransformation";
import ResourceManagement from "./resourceManagement/ResourceManagement";
type DisplayComponent =
| "versionHistory"
@@ -46,6 +50,8 @@ type DisplayComponent =
| "mechanics"
| "analysis"
| "visualization"
| "decals"
| "resourceManagement"
| "none";
const SideBarRight: React.FC = () => {
@@ -59,6 +65,7 @@ const SideBarRight: React.FC = () => {
const { selectedEventSphere } = useSelectedEventSphere();
const { viewVersionHistory, setVersionHistoryVisible } = useVersionHistoryVisibleStore();
const { isVersionSaved } = useSaveVersion();
const { selectedSubCategory } = useDecalStore();
const [displayComponent, setDisplayComponent] = useState<DisplayComponent>("none");
@@ -100,6 +107,19 @@ const SideBarRight: React.FC = () => {
setDisplayComponent("analysis");
return;
}
if (subModule === "resourceManagement") {
setDisplayComponent("resourceManagement");
return;
}
}
if (activeModule === "simulation" || activeModule === "builder") {
if (subModule === "resourceManagement") {
setDisplayComponent("resourceManagement");
return;
}
}
if (subModule === "properties" && activeModule !== "visualization") {
@@ -119,7 +139,13 @@ const SideBarRight: React.FC = () => {
setDisplayComponent("versionHistory");
return;
}
if (!selectedFloorItem && !selectedFloor && !selectedWall) {
if (selectedSubCategory) {
setDisplayComponent("decals");
return;
}
if (!selectedFloorItem && !selectedFloor && !selectedWall && !selectedSubCategory) {
if (toolMode === "Aisle") {
setDisplayComponent("aisleProperties");
return;
@@ -135,6 +161,7 @@ const SideBarRight: React.FC = () => {
setDisplayComponent("globalProperties");
return;
}
}
if (subModule === "zoneProperties" && (activeModule === "builder" || activeModule === "simulation")) {
@@ -143,9 +170,10 @@ const SideBarRight: React.FC = () => {
}
setDisplayComponent("none");
}, [viewVersionHistory, activeModule, subModule, isVersionSaved, selectedFloorItem, selectedWall, selectedFloor, selectedAisle, toolMode,]);
}, [viewVersionHistory, activeModule, subModule, isVersionSaved, selectedFloorItem, selectedWall, selectedFloor, selectedAisle, toolMode, selectedSubCategory]);
const renderComponent = () => {
switch (displayComponent) {
case "versionHistory":
return <VersionHistory />;
@@ -173,6 +201,10 @@ const SideBarRight: React.FC = () => {
return <Analysis />;
case "visualization":
return <Visualization />;
case "decals":
return <DecalTransformation />;
case "resourceManagement":
return <ResourceManagement />;
default:
return null;
}
@@ -188,19 +220,23 @@ const SideBarRight: React.FC = () => {
<>
{(!isVersionSaved || activeModule !== "simulation") && (
<div className="sidebar-actions-container">
{activeModule !== "simulation" && (
<button
id="sidebar-action-list-properties"
className={`sidebar-action-list ${subModule === "properties" ? "active" : ""}`}
onClick={() => {
setSubModule("properties");
setVersionHistoryVisible(false);
}}
>
<div className="tooltip">properties</div>
<PropertiesIcon isActive={subModule === "properties"} />
</button>
<>
<button
id="sidebar-action-list-properties"
className={`sidebar-action-list ${subModule === "properties" ? "active" : ""}`}
onClick={() => {
setSubModule("properties");
setVersionHistoryVisible(false);
}}
>
<div className="tooltip">properties</div>
<PropertiesIcon isActive={subModule === "properties"} />
</button>
</>
)}
{activeModule === "simulation" && (
<>
<button
@@ -238,6 +274,21 @@ const SideBarRight: React.FC = () => {
</button>
</>
)}
{(activeModule === "builder" || activeModule === "simulation") && (
<button
id="sidebar-action-list-properties"
className={`sidebar-action-list ${subModule === "resourceManagement" ? "active" : ""}`}
onClick={() => {
setSubModule("resourceManagement");
setVersionHistoryVisible(false);
}}
>
<div className="tooltip">Resource Management</div>
<FilePackageIcon isActive={subModule === "resourceManagement"} />
</button>
)}
</div>
)}
@@ -245,6 +296,7 @@ const SideBarRight: React.FC = () => {
<div className="sidebar-right-container">
<div className="sidebar-right-content-container">
{renderComponent()}
{/* <ResourceManagement /> */}
</div>
</div>
)}

59
app/src/components/layout/sidebarRight/decals/DecalTransformation.tsx Normal file
View File

@@ -0,0 +1,59 @@
import React, { useState } from 'react';
import RotationInput from '../customInput/RotationInput';
import PositionInput from '../customInput/PositionInputs';
import { LockIcon } from '../../../icons/RealTimeVisulationIcons';
import { LayeringBottomIcon, LayeringTopIcon, ValueUpdateIcon } from '../../../icons/ExportCommonIcons';
import decalImage from "../../../../assets/image/sampleDecal.png"
const DecalTransformation = () => {
return (
<div className='decal-transformation-container'>
{["position", "rotation", "scale"].map((transformation) => (
<div className="transformation-wrapper">
<div className="header">{transformation}</div>
<div className="input-wrapppers">
<input type="number" name="" id="" />
<div className="icon"><ValueUpdateIcon /></div>
<input type="number" name="" id="" />
<div className="icon"><ValueUpdateIcon /></div>
<input type="number" name="" id="" />
<div className="icon"><ValueUpdateIcon /></div>
<div className="icon"><LockIcon /></div>
</div>
</div>
))}
<div className="transformation-wrapper opacity">
<div className="header">opacity</div>
<div className="input-wrapppers">
<input type="number" name="" id="" />
<div className="icon"><ValueUpdateIcon /></div>
</div>
</div>
<div className="transformation-wrapper opacity">
<div className="header">Layering</div>
<div className="layers">
<div className="icon">
<LayeringBottomIcon />
</div>
<div className="icon">
<LayeringTopIcon />
</div>
</div>
</div>
<div className="preview">
<img src={decalImage} alt="" />
<div className="replace-btn">replace</div>
</div>
</div>
);
};
export default DecalTransformation;

25
app/src/components/layout/sidebarRight/resourceManagement/NavigateCatagory.tsx Normal file
View File

@@ -0,0 +1,25 @@
import React from 'react';
interface Props {
category: string[];
selectedCategory: string;
setSelectedCategory: (cat: string) => void;
}
const NavigateCategory = ({ category, selectedCategory, setSelectedCategory }: Props) => {
return (
<div className="category-wrapper">
{category.map((cat) => (
<div
key={cat}
className={`category ${selectedCategory === cat ? "active" : ''}`}
onClick={() => setSelectedCategory(cat)}
>
{cat}
</div>
))}
</div>
);
};
export default NavigateCategory;

48
app/src/components/layout/sidebarRight/resourceManagement/ResourceManagement.tsx Normal file
View File

@@ -0,0 +1,48 @@
import React, { useState } from 'react'
import Search from '../../../ui/inputs/Search'
import RegularDropDown from '../../../ui/inputs/RegularDropDown'
import Hrm from './hrm/Hrm'
import AssetManagement from './hrm/assetManagement/AssetManagement'
const ResourceManagement = () => {
type DisplayType = "hrm" | "asset";
const [selectType, setSelectType] = useState("assetManagement")
const [display, setDisplay] = useState<DisplayType>("asset");
return (
<div className='resourceManagement-container'>
<div className="navigation-wrapper">
<div
className={`navigation ${selectType === "assetManagement" ? "active" : ""}`}
onClick={() => setSelectType("assetManagement")}
>
Asset Management
</div>
<div
className={`navigation ${selectType === "peopleOperation" ? "active" : ""}`}
onClick={() => setSelectType("peopleOperation")}
>
People Operations
</div>
</div>
<div className="search-container">
<Search onChange={() => { }} />
<div className="select-catagory">
<RegularDropDown
header={"floor"}
options={["floor"]} // Pass layout names as options
onSelect={() => { }}
search={false}
/>
</div>
</div>
{selectType === "assetManagement" ? <AssetManagement /> : <Hrm />}
</div>
)
}
export default ResourceManagement

212
app/src/components/layout/sidebarRight/resourceManagement/hrm/Hrm.tsx Normal file
View File

@@ -0,0 +1,212 @@
import React, { useState } from 'react'
import Search from '../../../../ui/inputs/Search'
import RegularDropDown from '../../../../ui/inputs/RegularDropDown'
import { ClockThreeIcon, HourGlassIcon, ListTaskIcon, LocationPinIcon, SlectedTickIcon, TargetIcon } from '../../../../icons/ExportCommonIcons'
import NavigateCatagory from '../NavigateCatagory'
const Hrm = () => {
const employee_details = [
{
"employee": {
image: "",
"name": "John Doe",
"employee_id": "HR-204",
"status": "Active",
},
"task": {
"status": "Ongoing",
"title": "Inspecting Machine X",
"location": {
"floor": 4,
"zone": "B"
},
"planned_time_hours": 6,
"time_spent_hours": 2,
"total_tasks": 12,
"completed_tasks": 3
},
"actions": [
"Assign Task",
"Reassign Task",
"Pause",
"Emergency Stop"
],
"location": "Floor 4 . Zone B"
},
{
"employee": {
image: "",
"name": "Alice Smith",
"employee_id": "HR-205",
"status": "Active",
},
"task": {
"status": "Ongoing",
"title": "Calibrating Sensor Y",
"location": {
"floor": 2,
"zone": "A"
},
"planned_time_hours": 4,
"time_spent_hours": 1.5,
"total_tasks": 10,
"completed_tasks": 2
},
"actions": [
"Assign Task",
"Reassign Task",
"Pause",
"Emergency Stop"
],
"location": "Floor 4 . Zone B"
},
{
"employee": {
image: "",
"name": "Michael Lee",
"employee_id": "HR-206",
"status": "Active",
},
"task": {
"status": "Ongoing",
"title": "Testing Conveyor Belt Z",
"location": {
"floor": 5,
"zone": "C"
},
"planned_time_hours": 5,
"time_spent_hours": 3,
"total_tasks": 8,
"completed_tasks": 5
},
"actions": [
"Assign Task",
"Reassign Task",
"Pause",
"Emergency Stop"
],
"location": "Floor 4 . Zone B"
}
]
const [selectedCard, setSelectedCard] = useState(0);
console.log('selectedCard: ', selectedCard);
return (
<>
{/* <NavigateCatagory
category={["All People", "Technician", "Operator", "Supervisor", "Safety Officer"]}
selectedCategory={selectedCategory}
setSelectedCategory={setSelectedCategory}
/> */}
<div className='hrm-container assetManagement-wrapper'>
{employee_details.map((employee, index) => (
<div
className={`analysis-wrapper ${selectedCard === index ? "active" : ""}`}
onClick={() => setSelectedCard(index)}
>
<header>
<div className="user-details">
<div className="user-image-wrapper">
<img className='user-image' src={employee.employee.image} alt="" />
<div className={`status ${employee.employee.status}`}></div>
</div>
<div className="details">
<div className="employee-name">{employee.employee.name}</div>
<div className="employee-id">{employee.employee.employee_id}</div>
</div>
</div>
<div className="see-more">View more</div>
</header>
<div className="content">
{/* <div className="task-info">
<div className="task-wrapper">
<div className="task-label">
<span className='label-icon'><ListTaskIcon /></span>
<span className='label-text'>Ongoing Task:</span>
</div>
<div className="task-title">{employee.task.title}</div>
</div>
<div className="task-wrapper">
<div className="task-label">
<span className='label-icon'><LocationPinIcon /></span>
<span className='label-text'>Location:</span>
</div>
<div className="task-title">
Floor {employee.task.location.floor}. Zone {employee.task.location.zone}
</div>
</div>
</div> */}
<div className="task-stats">
<div className="stat-item">
<div className="stat-wrapper">
<span className="stat-icon"><ClockThreeIcon /></span>
<span>Planned time:</span>
</div>
<span className='stat-value'>{employee.task.planned_time_hours} hr</span>
</div>
{/* <div className="stat-item">
<div className="stat-wrapper">
<span className="stat-icon"><SlectedTickIcon /></span>
<span>Total Tasks:</span>
</div>
<span className='stat-value'>{employee.task.total_tasks}</span>
</div>
<div className="stat-item">
<div className="stat-wrapper">
<span className="stat-icon"><HourGlassIcon /></span>
<span>Time Spent:</span>
</div>
<span className='stat-value'>{employee.task.time_spent_hours} hr</span>
</div> */}
<div className="stat-item">
<div className="stat-wrapper">
<span className="stat-icon"><TargetIcon /></span>
<span>Cost per hr:</span>
</div>
<span className='stat-value'>{employee.task.completed_tasks}</span>
</div>
</div>
<div className="location-wrapper">
<div className="location-header">
<div className="icon">
<LocationPinIcon />
</div>
<div className="header">Location:</div>
</div>
<div className="location-value">{employee.location}</div>
</div>
<div className="task-actions">
{/* <button className="btn btn-default">Assign Task</button>
<button className="btn btn-default">Reassign Task</button> */}
<button className="btn btn-default">Pause</button>
<button className="btn btn-danger">Emergency Stop</button>
</div>
</div>
</div>
))}
</div>
</>
)
}
export default Hrm

159
app/src/components/layout/sidebarRight/resourceManagement/hrm/assetManagement/AssetManagement.tsx Normal file
View File

@@ -0,0 +1,159 @@
import React, { useState } from 'react'
import NavigateCatagory from '../../NavigateCatagory'
import { EyeIcon, ForkLiftIcon, KebabIcon, LocationPinIcon, RightHalfFillCircleIcon } from '../../../../../icons/ExportCommonIcons';
import assetImage from "../../../../../../assets/image/asset-image.png"
const AssetManagement = () => {
const [selectedCategory, setSelectedCategory] = useState("All Assets");
const [expandedAssetId, setExpandedAssetId] = useState<string | null>(null);
const dummyAssets = [
{
id: '1',
name: 'Forklift Model X200',
model: 'FLK-0025',
status: 'Online',
usageRate: 89,
level: 'Level 1',
image: assetImage,
description: 'Electric forklift used for moving goods and materials in warehouse operations.',
cost: 122000,
count: 5,
},
{
id: '2',
name: 'Warehouse Robot WR-300',
model: 'WRB-3001',
status: 'Online',
usageRate: 76,
level: 'Level 2',
image: assetImage,
description: 'Automated robot for handling packages and inventory in the warehouse.',
cost: 85000,
count: 3,
},
{
id: '3',
name: 'Conveyor Belt System CB-150',
model: 'CBS-150X',
status: 'Online',
usageRate: 95,
level: 'Level 3',
image: assetImage,
description: 'High-speed conveyor belt system for efficient material handling.',
cost: 45000,
count: 2,
},
];
return (
<>
{/* <NavigateCatagory
category={["All Assets", "Machines", "Workstation", "Vehicles"]}
selectedCategory={selectedCategory}
setSelectedCategory={setSelectedCategory}
/> */}
<div className='assetManagement-container'>
{dummyAssets.map((asset, index) => (
<div className={`assetManagement-wrapper ${expandedAssetId === asset.id ? "openViewMore" : ""}`}>
<header>
<div className="header-wrapper">
{expandedAssetId === asset.id ?
<img className='asset-image' src={asset.image} alt="" />
:
<div className="icon"><ForkLiftIcon /></div>
}
<div className="asset-details-container">
<div className="asset-details">
<div className="asset-name">{asset.name}</div>
<div className="asset-model">{asset.model}</div>
</div>
<div className="asset-status-wrapper">
<div className={`indication ${asset.status}`}></div>
<div className="status">{asset.status}</div>
</div>
</div>
</div>
{expandedAssetId === asset.id && <div className="description">{asset.description}</div>}
</header>
{expandedAssetId === asset.id ? (
<div className="asset-estimate">
<div className="asset-estimate__unit-cost">
<div className="asset-estimate__label">Cost of Asset</div>
<div className="asset-estimate__value">₹ 1,22,000</div>
</div>
<div className="asset-estimate__breakdown">
<div className="asset-estimate__in-scene">
<div className="asset-estimate__label">In Scene</div>
<div className="asset-estimate__value">5 items</div>
</div>
<div className="asset-estimate__total-cost">
<div className="asset-estimate__label">Total Cost</div>
<div className="asset-estimate__value">₹ 6,10,000</div>
</div>
</div>
<div className="asset-estimate__view-button" onClick={() => setExpandedAssetId(null)}>
<EyeIcon isClosed={false} />
<div className="asset-estimate__view-text">View in Scene</div>
</div>
</div>
) : (
<div className="asset-contents">
<div className="asset-wrapper">
<div className="key-wrapper">
<div className="icon"><RightHalfFillCircleIcon /></div>
<div className="key">Usage rate</div>
</div>
<div className="progress-wrapper">
<div className="progress-bar">
<div
className="filled-value"
style={{ width: `${asset.usageRate}%` }}
></div>
</div>
<div className="usage-value">{asset.usageRate}%</div>
</div>
</div>
<div className="asset-wrapper">
<div className="key-wrapper">
<div className="icon"><LocationPinIcon /></div>
<div className="key">{asset.level}</div>
</div>
<div
className="viewMore"
onClick={() =>
setExpandedAssetId(expandedAssetId === asset.id ? null : asset.id)
}
>
<div className="value">{expandedAssetId === asset.id ? "View Less" : "View More"}</div>
<div className="icon"><KebabIcon /></div>
</div>
</div>
</div>
)}
</div>
))}
</div >
</>
)
}
export default AssetManagement