namirasoft-site-react 1.3.436 → 1.3.438

package/src/components/NSBoxEmail.tsx

@@ -7,7 +7,6 @@ import { IBaseComponentProps } from "../props/IBaseComponentProps";
 import { NSBoxErrorNotifier } from "./NSBoxErrorNotifier";
 import { NSAssistantButton } from "./NSAssistantButton";
 import Styles from "./NSBox.module.css";
-import IconInputEmail from '../assets/images/icon-input-email.svg';
 
 export interface INSBoxEmailProps extends IBaseComponentProps, IValidationProps, IValidationStringProps
 {
@@ -95,7 +94,7 @@ export class NSBoxEmail extends React.Component<INSBoxEmailProps, INSBoxEmailSta
 						type="email"
 						className={Styles.ns_input}
 						placeholder={this.props.placeholder}
-						style={{ background: `url(${IconInputEmail}) white no-repeat scroll center right 16px` }}
+						style={{ background: `url("https://static.namirasoft.com/image/concept/nsbox/email.png") white no-repeat scroll center right 16px`, backgroundSize: "24px" }}
 					/>
 					<NSBoxErrorNotifier error={this.state.error} clearError={() => this.setState({ error: "" })} />
 				</div>

package/src/components/NSBoxEntity.tsx

@@ -2,7 +2,6 @@
 import React from "react";
 import Styles from "./NSBoxEntity.module.css";
 import { Select, Space } from 'antd';
-import IconSelectBox from '../assets/images/icon-select-box.svg';
 import { IBaseComponentProps } from "../props/IBaseComponentProps";
 import { IValidationProps } from "../props/IValidationProps";
 import { Validator } from "../Validator";
@@ -172,7 +171,7 @@ export class NSBoxEntity<Data> extends React.Component<INSBoxEntityProps<Data>,
 								{option.data.desc}
 							</Space>
 						)}
-						suffixIcon={<img src={IconSelectBox} alt="SelectBox Icon" />}
+						suffixIcon={<img src="https://static.namirasoft.com/image/concept/arrow/down/blue.svg" alt="SelectBox Icon" />}
 					/>
 					<NSBoxErrorNotifier error={this.state.error} clearError={() => this.setState({ error: "" })} />
 				</div>

package/src/components/NSBoxErrorNotifier.tsx

@@ -1,5 +1,4 @@
 import Styles from "./NSBoxErrorNotifier.module.css";
-import Danger from '../assets/images/danger.svg';
 import { IBaseComponentProps } from "../props/IBaseComponentProps";
 
 export interface INSBoxErrorNotifierProps extends IBaseComponentProps
@@ -21,7 +20,7 @@ export function NSBoxErrorNotifier(props: INSBoxErrorNotifierProps)
 				<div id={props.id} className="d-flex justify-content-start align-items-center gap-2 ms-2">
 					<img
 						className={""}
-						src={Danger}
+						src="https://static.namirasoft.com/image/concept/danger/red.svg"
 						alt="Error Icon"
 						width={13}
 						height={13}

package/src/components/NSBoxIPV4.tsx

@@ -2,7 +2,6 @@
 
 import React from "react";
 import Styles from "./NSBox.module.css";
-import IconInputIP from '../assets/images/icon-input-ip.svg';
 import { IBaseComponentProps } from "../props/IBaseComponentProps";
 import { IValidationProps } from "../props/IValidationProps";
 import { IValidationStringProps } from "../props/IValidationStringProps";
@@ -87,7 +86,7 @@ export class NSBoxIPV4 extends React.Component<INSBoxIPV4Props, INSBoxIPV4State>
 						maxLength={15}
 						size={15}
 						pattern={IPV4_PATTERN}
-						style={{ background: `url(${IconInputIP}) white no-repeat scroll center right 16px` }}
+						style={{ background: `url("https://static.namirasoft.com/image/concept/nsbox/ipv4%266.png") white no-repeat scroll center right 16px`, backgroundSize: "24px" }}
 					/>
 				</div>
 				<NSBoxErrorNotifier error={this.state.error} clearError={() => this.setState({ error: "" })} />

package/src/components/NSBoxIPV6.tsx

@@ -2,7 +2,6 @@
 
 import React from "react";
 import Styles from "./NSBox.module.css";
-import IconInputIP from '../assets/images/icon-input-ip.svg';
 import { IBaseComponentProps } from "../props/IBaseComponentProps";
 import { IValidationProps } from "../props/IValidationProps";
 import { IValidationStringProps } from "../props/IValidationStringProps";
@@ -84,7 +83,7 @@ export class NSBoxIPV6 extends React.Component<INSBoxIPV6Props, INSBoxIPV6State>
 						onChange={this.onChanged}
 						onClick={() => this.props.onClicked}
 						pattern={IPV6_PATTERN}
-						style={{ background: `url(${IconInputIP}) white no-repeat scroll center right 16px` }}
+						style={{ background: `url("https://static.namirasoft.com/image/concept/nsbox/ipv4%266.png") white no-repeat scroll center right 16px`, backgroundSize: "24px" }}
 					/>
 				</div>
 				<NSBoxErrorNotifier error={this.state.error} clearError={() => this.setState({ error: "" })} />

package/src/components/NSBoxInteger.tsx

@@ -2,7 +2,6 @@
 
 import React from "react";
 import Styles from "./NSBox.module.css";
-import IconInputInteger from '../assets/images/icon-input-integer.svg';
 import { IBaseComponentProps } from "../props/IBaseComponentProps";
 import { IValidationNumberProps } from "../props/IValidationNumberProps";
 import { IValidationProps } from "../props/IValidationProps";
@@ -80,7 +79,7 @@ export class NSBoxInteger extends React.Component<INSBoxIntegerProps, INSBoxInte
 						value={this.state.value}
 						onChange={this.onChanged}
 						onClick={() => this.props.onClicked}
-						style={{ background: `url(${IconInputInteger}) white no-repeat scroll center right 16px` }}
+						style={{ background: `url("https://static.namirasoft.com/image/concept/nsbox/Integer.png") white no-repeat scroll center right 16px`, backgroundSize: "24px" }}
 					/>
 				</div>
 				<NSBoxErrorNotifier error={this.state.error} clearError={() => this.setState({ error: "" })} />

package/src/components/NSBoxPassword.tsx

@@ -2,7 +2,6 @@
 
 import React from "react";
 import Styles from "./NSBox.module.css";
-import IconInputString from '../assets/images/icon-input-string.svg';
 import { IBaseComponentProps } from "../props/IBaseComponentProps";
 import { IValidationProps } from "../props/IValidationProps";
 import { IValidationStringProps } from "../props/IValidationStringProps";
@@ -80,7 +79,7 @@ export class NSBoxPassword extends React.Component<INSBoxPasswordProps, INSBoxPa
 						value={this.state.value}
 						onChange={this.onChanged}
 						onClick={() => this.props.onClicked}
-						style={{ background: `url(${IconInputString}) white no-repeat scroll center right 16px` }}
+						style={{ background: `url("https://static.namirasoft.com/image/concept/nsbox/string.png") white no-repeat scroll center right 16px`, backgroundSize: "24px" }}
 					/>
 					<NSBoxErrorNotifier error={this.state.error} clearError={() => this.setState({ error: "" })} />
 				</div>

package/src/components/NSBoxPhone.tsx

@@ -2,7 +2,6 @@
 
 import React from "react";
 import Styles from "./NSBox.module.css";
-import PhoneIcon from '../assets/images/icon-input-phone.svg';
 import PhoneInput from 'react-phone-input-2'
 import 'react-phone-input-2/lib/style.css'
 import { IBaseComponentProps } from "../props/IBaseComponentProps";
@@ -80,7 +79,7 @@ export class NSBoxPhone extends React.Component<INSBoxPhoneProps, INSBoxPhoneSta
 						inputClass={Styles.PhoneIconns_input}
 						placeholder={this.props.placeholder}
 						inputStyle={{
-							background: `url(${PhoneIcon}) white no-repeat scroll center right 16px`,
+							background: `url("https://static.namirasoft.com/image/concept/nsbox/phone.png") white no-repeat scroll center right 16px`,
 							backgroundSize: "24px"
 						}}
 					/>

package/src/components/NSBoxPrice.tsx

@@ -2,7 +2,6 @@
 
 import React from "react";
 import Styles from "./NSBox.module.css";
-import IconInputFloat from '../assets/images/icon-input-float.svg';
 import { IBaseComponentProps } from "../props/IBaseComponentProps";
 import { IValidationProps } from "../props/IValidationProps";
 import { IValidationNumberProps } from "../props/IValidationNumberProps";
@@ -82,7 +81,7 @@ export class NSBoxPrice extends React.Component<INSBoxPriceProps, INSBoxPriceSta
 						onClick={() => this.props.onClicked}
 						step="0.01"
 						min="0"
-						style={{ background: `url(${IconInputFloat}) white no-repeat scroll center right 16px` }}
+						style={{ background: `url("https://static.namirasoft.com/image/concept/nsbox/price.png") white no-repeat scroll center right 16px`, backgroundSize: "24px" }}
 					/>
 				</div>
 				<NSBoxErrorNotifier error={this.state.error} clearError={() => this.setState({ error: "" })} />

package/src/components/NSBoxSearch.tsx

@@ -93,7 +93,7 @@ export class NSBoxSearch extends React.Component<INSBoxSearchProps, INSBoxSearch
 						style=
 						{{
 							background: `url(${"https://static.namirasoft.com/image/concept/search/blue.svg"}) white no-repeat left`,
-							backgroundSize: "32px",
+							backgroundSize: "24px",
 							backgroundPosition: "10px",
 							paddingLeft: "48px",
 						}}

package/src/components/NSBoxString.tsx

@@ -7,7 +7,6 @@ import { Validator } from "../Validator";
 import { NSBoxErrorNotifier } from "./NSBoxErrorNotifier";
 import { NSAssistantButton } from "./NSAssistantButton";
 import Styles from "./NSBox.module.css";
-import IconInputString from '../assets/images/icon-input-string.svg';
 
 export interface INSBoxStringProps extends IBaseComponentProps, IValidationProps, IValidationStringProps
 {
@@ -96,7 +95,7 @@ export class NSBoxString extends React.Component<INSBoxStringProps, INSBoxString
 						value={this.state.value}
 						onChange={this.onChanged}
 						onClick={() => this.props.onClicked}
-						style={{ background: `url(${IconInputString}) white no-repeat scroll center right 16px` }}
+						style={{ background: `url("https://static.namirasoft.com/image/concept/nsbox/string.png") white no-repeat scroll center right 16px`, backgroundSize: "24px" }}
 					/>
 					<NSBoxErrorNotifier error={this.state.error} clearError={() => this.setState({ error: "" })} />
 				</div>

package/src/components/NSBoxTextArea.tsx

@@ -7,7 +7,6 @@ import { IValidationProps } from "../props/IValidationProps";
 import { IValidationStringProps } from "../props/IValidationStringProps";
 import { Validator } from "../Validator";
 import { NSBoxErrorNotifier } from "./NSBoxErrorNotifier";
-import IconInputString from '../assets/images/icon-input-string.svg';
 
 export interface INSBoxTextAreaProps extends IBaseComponentProps, IValidationProps, IValidationStringProps
 {
@@ -90,7 +89,7 @@ export class NSBoxTextArea extends React.Component<INSBoxTextAreaProps, INSBoxTe
 							style={{
 								height: !this.props.rows ? "96px" : "",
 								background:
-									`url(${IconInputString}) white no-repeat scroll top right 16px `,
+									`url("https://static.namirasoft.com/image/concept/nsbox/string.png") white no-repeat scroll top right 16px `,
 								backgroundPositionY: "12px"
 							}}
 							cols={this.props.cols}

package/src/components/NSBoxTime.tsx

@@ -2,7 +2,6 @@
 
 import React from "react";
 import Styles from "./NSBox.module.css";
-import IconInputTime from '../assets/images/icon-input-time.svg';
 import { IBaseComponentProps } from "../props/IBaseComponentProps";
 import { IValidationProps } from "../props/IValidationProps";
 import { IValidationStringProps } from "../props/IValidationStringProps";
@@ -82,7 +81,7 @@ export class NSBoxTime extends React.Component<INSBoxTimeProps, INSBoxTimeState>
 						onChange={this.onChanged}
 						onClick={() => this.props.onClicked}
 						step="2"
-						style={{ background: `url(${IconInputTime}) white no-repeat scroll center right 16px` }}
+						style={{ background: `url("https://static.namirasoft.com/image/concept/nsbox/time.png") white no-repeat scroll center right 16px`, backgroundSize: "24px" }}
 					/>
 				</div>
 				<NSBoxErrorNotifier error={this.state.error} clearError={() => this.setState({ error: "" })} />

package/src/components/NSCopyToClipboard.tsx

@@ -1,5 +1,4 @@
 import Styles from "./NSCopyToClipboard.module.css";
-import IconInputString from '../assets/images/icon-input-copy.svg';
 import { IBaseComponentProps } from "../props/IBaseComponentProps";
 
 export interface INSCopyToClipboardProps extends IBaseComponentProps
@@ -24,7 +23,7 @@ export function NSCopyToClipboard(props: INSCopyToClipboardProps)
 				<p className="m-0">{props.value}</p>
 				<img
 					className={Styles.ns_copy_to_clipboard_icon}
-					src={IconInputString}
+					src="https://static.namirasoft.com/image/concept/copy/blue.svg"
 					alt="Copy Icon"
 					width={24}
 					height={24}

package/src/components/NSLine.module.css

@@ -0,0 +1,14 @@
+.ns_line_container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+}
+
+.ns_line {
+    border: 1px solid rgb(0, 0, 0);
+    border-left: 300px solid transparent;
+    border-right: 300px solid transparent;
+    width: 80%;
+}

package/src/components/NSLine.tsx

@@ -1,7 +1,5 @@
-// import Styles from './NSLine.module.css';
+import Styles from './NSLine.module.css';
 import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import Line from "../assets/images/line.png";
-
 export interface INSLineProps extends IBaseComponentProps
 {
 
@@ -10,10 +8,8 @@ export interface INSLineProps extends IBaseComponentProps
 export function NSLine()
 {
     return (
-        <img src={Line}
-            alt="Line"
-            width={"100%"}
-            height={"max-content"}
-        />
+        <div className={Styles.ns_line_container}>
+        <hr className={Styles.ns_line}></hr>
+        </div>
     );
 }

package/src/components/NSRange.module.css

@@ -0,0 +1,25 @@
+.ns_range_time_item {
+    z-index: 99;
+    text-align: center;
+    padding: 10px;
+    width: 4.166666%;
+    display: inline-block;
+    height: 60px;
+    position: relative;
+    border-width: 1px;
+    border-color: black;
+    border-style: groove;
+}
+
+.ns_range_time_box_full {
+    background-color: #fff;
+    border-radius: 5px;
+    margin-bottom: 40px;
+    position: relative;
+    box-shadow: 0 3px 6px 0 rgb(0 0 0 / 7%);
+    overflow: hidden;
+}
+.ns_range_time_line{
+    position: absolute;
+        height: 100%;
+}

package/src/components/NSRange.tsx

@@ -1,15 +1,81 @@
-// import Styles from './NSRange.module.css';
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { useEffect, useState } from 'react';
+import Styles from './NSRange.module.css';
+import { IBaseComponentProps } from '../props/IBaseComponentProps';
 
-export interface INSRangeProps extends IBaseComponentProps
+import Color from "../Color";
+
+export interface NSRangeRow
 {
+    start_time: Date;
+    end_time: Date;
+    percentage: number;
+}
 
+export interface INSRangeProps extends IBaseComponentProps
+{
+    data: NSRangeRow[];
 }
 
 export function NSRange(props: INSRangeProps)
 {
-    console.log(props)
+    const [Widths, setWidths] = useState<string[]>([]);
+    const [positions, setPositions] = useState<string[]>([]);
+
+    useEffect(() =>
+    {
+        const widths = props.data?.map((data) =>
+        {
+            const minutes = calculateMinutesBetween(data.start_time, data.end_time);
+            return convertToPercentage(minutes);
+        });
+        const positions = props.data?.map((data) =>
+        {
+            const minutes = calculateMinutesBetween(new Date('2023-08-14T00:00:00'), data.start_time);
+            return convertToPercentage(minutes);
+        });
+        setWidths(widths);
+        setPositions(positions);
+    }, [props.data]);
+
+    const calculateMinutesBetween = (start_time: Date, end_time: Date): number =>
+    {
+        const difference_in_milliseconds = Math.abs(start_time.getTime() - end_time.getTime());
+        const difference_in_minutes = Math.floor(difference_in_milliseconds / 1000 / 60);
+        return difference_in_minutes;
+    };
+
+    const convertToPercentage = (minute: number): string =>
+    {
+        const width = ((minute * 100) / 1440).toString();
+        return `${width}%`;
+    };
+
     return (
-        <div></div>
+        <div className="container-fluid d-flex justify-content-center direction-ltr">
+            <div className="col-12 col-sm-11 px-0">
+                <div className={` ${Styles.ns_range_time_box_full} d-flex justify-content-start`}>
+                    <div>
+                        {
+                            props.data?.map((data, index) =>
+                                <span
+                                    key={index}
+                                    className={Styles.ns_range_time_line}
+                                    style={{
+                                        background: Color.getColor(data?.percentage),
+                                        width: Widths[index] || '0%',
+                                        left: positions[index] || '%0'
+                                    }}>
+                                </span>
+                            )
+                        }
+                    </div>
+                    {[...Array(24).keys()].map(hour => (
+                        <div key={hour} className={Styles.ns_range_time_item}>
+                            <span>{hour.toString().padStart(2, '0')}:00</span>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </div>
     );
 }

package/src/components/NSTabPage.module.css

@@ -47,7 +47,6 @@
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    height: 500px;
     overflow-y: auto;
 }
 

package/src/pages/NSNotFoundPage.module.css

@@ -2,7 +2,7 @@
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	background-image: url('../assets/images/404\ image_mobile.svg');
+	background-image: url('https://static.namirasoft.com/image/concept/404/image.png');
 	background-repeat: no-repeat;
 	background-size: contain;
 	background-position: center;
@@ -14,6 +14,6 @@
 
 @media only screen and (min-width: 1024px) {
 	.ns_not_found_page {
-		background-image: url('../assets/images/404\ image.svg');
+		background-image: url('https://static.namirasoft.com/image/concept/404/image.png');
 	}
 }