namirasoft-site-react 1.4.339 → 1.4.340

package/src/components/NSChartTable.module.css

@@ -1,22 +1,22 @@
-.custom_row td {
-    border: none;
-}
-
-.custom_row td:nth-child(2),
-.custom_row td:nth-child(3),
-.custom_row td:nth-child(4),
-.custom_row td:nth-child(5),
-.custom_row td:nth-child(6) {
-    border-bottom: 1px dashed #d9d9d9;
-}
-
-/* Override default Ant Design row borders */
-.ant-table-tbody>tr>td {
-    border-bottom: none !important;
-}
-
-/* Increase progress bar height */
-.ant-progress {
-    height: 16px !important;
-    /* Adjust as needed */
+.custom_row td {
+    border: none;
+}
+
+.custom_row td:nth-child(2),
+.custom_row td:nth-child(3),
+.custom_row td:nth-child(4),
+.custom_row td:nth-child(5),
+.custom_row td:nth-child(6) {
+    border-bottom: 1px dashed #d9d9d9;
+}
+
+/* Override default Ant Design row borders */
+.ant-table-tbody>tr>td {
+    border-bottom: none !important;
+}
+
+/* Increase progress bar height */
+.ant-progress {
+    height: 16px !important;
+    /* Adjust as needed */
 }

package/src/components/NSChartTable.tsx

@@ -1,95 +1,95 @@
-import { Table, Progress } from 'antd';
-import { ColumnType } from 'antd/es/table';
-import { IBaseComponentProps } from '../props/IBaseComponentProps';
-import Styles from "./NSChartTable.module.css"
-
-interface DataType
-{
-	key: string;
-	job: string;
-	totalHours: number;
-	percentage: number;
-	cost: number;
-	income: number;
-	benefit: number;
-}
-
-interface CustomTableProps extends IBaseComponentProps
-{
-	data: DataType[];
-}
-
-export function NSChartTable(props: CustomTableProps)
-{
-	const getColor = (percentage: number) =>
-	{
-		if (percentage >= 75) return '#368F01';
-		if (percentage >= 60) return ' #44B400';
-		if (percentage >= 50) return '#56E500';
-		if (percentage >= 25) return '#FAFF00';
-		return 'red';
-	};
-
-	const columns: ColumnType<DataType>[] = [
-		{
-			title: '',
-			dataIndex: 'job',
-			key: 'job',
-		},
-		{
-			title: 'Total Hours',
-			dataIndex: 'totalHours',
-			key: 'totalHours',
-			render: (text: number) => <div>{text}</div>,
-		},
-		{
-			title: 'Percentage',
-			dataIndex: 'percentage',
-			key: 'percentage',
-			render: (text: number) => <div>{text}%</div>,
-		},
-		{
-			title: 'Cost',
-			dataIndex: 'cost',
-			key: 'cost',
-			render: (text: number) => <div>${text}</div>,
-		},
-		{
-			title: 'Income',
-			dataIndex: 'income',
-			key: 'income',
-			render: (text: number) => <div>${text}</div>,
-		},
-		{
-			title: 'Benefit',
-			dataIndex: 'benefit',
-			key: 'benefit',
-			render: (text: number) => <div>${text}</div>,
-		},
-		{
-			title: '',
-			dataIndex: 'totalHours',
-			key: 'chart',
-			render: (totalHours: number, record: DataType) => (
-				<Progress
-					percent={(totalHours / 8) * 100}
-					showInfo={false}
-					strokeColor={getColor(record.percentage)}
-					size={{ width: 310, height: 16 }}
-				/>
-			),
-		},
-	];
-
-	return (
-		<div className={`${props.classList?.join(" ") ?? ""}`} style={props.style}>
-			<Table
-				columns={columns}
-				dataSource={props.data}
-				pagination={false}
-				scroll={{ x: 800 }}
-				rowClassName={() => Styles.custom_row}
-			/>
-		</div>
-	);
+import { Table, Progress } from 'antd';
+import { ColumnType } from 'antd/es/table';
+import { IBaseComponentProps } from '../props/IBaseComponentProps';
+import Styles from "./NSChartTable.module.css"
+
+interface DataType
+{
+	key: string;
+	job: string;
+	totalHours: number;
+	percentage: number;
+	cost: number;
+	income: number;
+	benefit: number;
+}
+
+interface CustomTableProps extends IBaseComponentProps
+{
+	data: DataType[];
+}
+
+export function NSChartTable(props: CustomTableProps)
+{
+	const getColor = (percentage: number) =>
+	{
+		if (percentage >= 75) return '#368F01';
+		if (percentage >= 60) return ' #44B400';
+		if (percentage >= 50) return '#56E500';
+		if (percentage >= 25) return '#FAFF00';
+		return 'red';
+	};
+
+	const columns: ColumnType<DataType>[] = [
+		{
+			title: '',
+			dataIndex: 'job',
+			key: 'job',
+		},
+		{
+			title: 'Total Hours',
+			dataIndex: 'totalHours',
+			key: 'totalHours',
+			render: (text: number) => <div>{text}</div>,
+		},
+		{
+			title: 'Percentage',
+			dataIndex: 'percentage',
+			key: 'percentage',
+			render: (text: number) => <div>{text}%</div>,
+		},
+		{
+			title: 'Cost',
+			dataIndex: 'cost',
+			key: 'cost',
+			render: (text: number) => <div>${text}</div>,
+		},
+		{
+			title: 'Income',
+			dataIndex: 'income',
+			key: 'income',
+			render: (text: number) => <div>${text}</div>,
+		},
+		{
+			title: 'Benefit',
+			dataIndex: 'benefit',
+			key: 'benefit',
+			render: (text: number) => <div>${text}</div>,
+		},
+		{
+			title: '',
+			dataIndex: 'totalHours',
+			key: 'chart',
+			render: (totalHours: number, record: DataType) => (
+				<Progress
+					percent={(totalHours / 8) * 100}
+					showInfo={false}
+					strokeColor={getColor(record.percentage)}
+					size={{ width: 310, height: 16 }}
+				/>
+			),
+		},
+	];
+
+	return (
+		<div className={`${props.classList?.join(" ") ?? ""}`} style={props.style}>
+			<Table
+				columns={columns}
+				dataSource={props.data}
+				pagination={false}
+				scroll={{ x: 800 }}
+				rowClassName={() => Styles.custom_row}
+			/>
+		</div>
+	);
 };

package/src/components/NSColumn.module.css

@@ -1,17 +1,17 @@
-.ns_column {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 16px;
-    margin: 0;
-    justify-content: flex-start;
-    width: max-content;
-    max-width: 100%;
-    width: 100%;
-}
-
-@media only screen and (min-width: 768px) {
-    .ns_column {
-        flex-wrap: wrap;
-    }
+.ns_column {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+    margin: 0;
+    justify-content: flex-start;
+    width: max-content;
+    max-width: 100%;
+    width: 100%;
+}
+
+@media only screen and (min-width: 768px) {
+    .ns_column {
+        flex-wrap: wrap;
+    }
 }

package/src/components/NSColumn.tsx

@@ -1,25 +1,25 @@
-import { ReactNode } from "react";
-import Styles from './NSColumn.module.css';
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-
-export interface NSColumnProps extends IBaseComponentProps
-{
-    children: ReactNode;
-    onEnterPressed?: () => void;
-}
-export function NSColumn(props: NSColumnProps)
-{
-    return (
-        <div id={props.id}
-            className={`${Styles.ns_column} ${props.classList?.join(" ") ?? ""}`}
-            style={props.style}
-            onKeyUp={e =>
-            {
-                if (e.key === "Enter")
-                    props.onEnterPressed?.();
-            }}
-        >
-            {props.children}
-        </div>
-    );
+import { ReactNode } from "react";
+import Styles from './NSColumn.module.css';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+
+export interface NSColumnProps extends IBaseComponentProps
+{
+    children: ReactNode;
+    onEnterPressed?: () => void;
+}
+export function NSColumn(props: NSColumnProps)
+{
+    return (
+        <div id={props.id}
+            className={`${Styles.ns_column} ${props.classList?.join(" ") ?? ""}`}
+            style={props.style}
+            onKeyUp={e =>
+            {
+                if (e.key === "Enter")
+                    props.onEnterPressed?.();
+            }}
+        >
+            {props.children}
+        </div>
+    );
 }

package/src/components/NSCopy.tsx

@@ -1,59 +1,59 @@
-import React, { useRef, useState } from "react";
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import { SetTimeouService } from "namirasoft-core";
-
-export interface NSCopyProps extends IBaseComponentProps
-{
-	children: React.ReactNode;
-	value?: string;
-}
-
-export interface NSCopyState
-{
-	copied: boolean;
-}
-
-export function NSCopy(props: NSCopyProps)
-{
-	let NSCopyParent_ref = useRef<HTMLDivElement>(null);
-	const service = useRef<SetTimeouService>(new SetTimeouService());
-
-	let [state, setState] = useState<NSCopyState>({ copied: false });
-
-	function onCopy(e: React.MouseEvent<HTMLImageElement>): void
-	{
-		e.stopPropagation();
-
-		if (NSCopyParent_ref.current)
-		{
-			let value = props.value ?? NSCopyParent_ref.current?.innerText;
-			navigator.clipboard.writeText(value);
-
-			setState({ copied: true });
-			service.current?.setTimeoutIfNotCalledAgain(() => { setState({ copied: false }) }, 3000);
-		}
-	}
-
-	return (
-		<div
-			ref={NSCopyParent_ref}
-			id={props.id}
-			className={`d-flex align-items-center ${props.classList?.join(" ") ?? ""}`}
-			style={props.style}
-		>
-			<div>
-				{props.children}
-			</div>
-			<img src={state.copied ? "https://static.namirasoft.com/image/concept/check/on/blue.svg" : "https://static.namirasoft.com/image/concept/copy/blue.svg"}
-				alt='Copy'
-				width={16}
-				height={16}
-				onClick={onCopy}
-				style={{
-					cursor: "pointer",
-					marginLeft: "4px"
-				}}
-			/>
-		</div>
-	);
+import React, { useRef, useState } from "react";
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { SetTimeouService } from "namirasoft-core";
+
+export interface NSCopyProps extends IBaseComponentProps
+{
+	children: React.ReactNode;
+	value?: string;
+}
+
+export interface NSCopyState
+{
+	copied: boolean;
+}
+
+export function NSCopy(props: NSCopyProps)
+{
+	let NSCopyParent_ref = useRef<HTMLDivElement>(null);
+	const service = useRef<SetTimeouService>(new SetTimeouService());
+
+	let [state, setState] = useState<NSCopyState>({ copied: false });
+
+	function onCopy(e: React.MouseEvent<HTMLImageElement>): void
+	{
+		e.stopPropagation();
+
+		if (NSCopyParent_ref.current)
+		{
+			let value = props.value ?? NSCopyParent_ref.current?.innerText;
+			navigator.clipboard.writeText(value);
+
+			setState({ copied: true });
+			service.current?.setTimeoutIfNotCalledAgain(() => { setState({ copied: false }) }, 3000);
+		}
+	}
+
+	return (
+		<div
+			ref={NSCopyParent_ref}
+			id={props.id}
+			className={`d-flex align-items-center ${props.classList?.join(" ") ?? ""}`}
+			style={props.style}
+		>
+			<div>
+				{props.children}
+			</div>
+			<img src={state.copied ? "https://static.namirasoft.com/image/concept/check/on/blue.svg" : "https://static.namirasoft.com/image/concept/copy/blue.svg"}
+				alt='Copy'
+				width={16}
+				height={16}
+				onClick={onCopy}
+				style={{
+					cursor: "pointer",
+					marginLeft: "4px"
+				}}
+			/>
+		</div>
+	);
 }

package/src/components/NSCopyBox.module.css

@@ -1,40 +1,40 @@
-.ns_copy {
-    display: flex;
-    flex-direction: column;
-    width: 416px;
-    color: #fff;
-    position: relative;
-    max-width: 100%;
-    margin: 0 auto;
-}
-
-.ns_copy_value {
-    border-radius: 8px;
-    padding: 10px 12px;
-    font-size: 16px;
-    font-weight: 400;
-    text-align: center;
-    overflow: hidden;
-    display: flex;
-    gap: 16px;
-    align-items: center;
-    border-radius: 8px;
-    border: 1px solid rgba(161, 164, 176, 1);
-    background-color: #fff;
-}
-
-.ns_copy_value p {
-    color: rgba(20, 27, 92, 1);
-    width: 100%;
-    display: inline-block;
-    overflow: hidden;
-    word-wrap: break-word;
-}
-
-.ns_copy_title {
-    font-size: 24px;
-    font-weight: 700;
-    color: rgba(20, 27, 92, 1);
-    text-align: center;
-    margin-bottom: 16px;
+.ns_copy {
+    display: flex;
+    flex-direction: column;
+    width: 416px;
+    color: #fff;
+    position: relative;
+    max-width: 100%;
+    margin: 0 auto;
+}
+
+.ns_copy_value {
+    border-radius: 8px;
+    padding: 10px 12px;
+    font-size: 16px;
+    font-weight: 400;
+    text-align: center;
+    overflow: hidden;
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    border-radius: 8px;
+    border: 1px solid rgba(161, 164, 176, 1);
+    background-color: #fff;
+}
+
+.ns_copy_value p {
+    color: rgba(20, 27, 92, 1);
+    width: 100%;
+    display: inline-block;
+    overflow: hidden;
+    word-wrap: break-word;
+}
+
+.ns_copy_title {
+    font-size: 24px;
+    font-weight: 700;
+    color: rgba(20, 27, 92, 1);
+    text-align: center;
+    margin-bottom: 16px;
 }

package/src/components/NSCopyBox.tsx

@@ -1,54 +1,54 @@
-import { useRef, useState } from "react";
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-
-import Styles from "./NSCopyBox.module.css";
-import { SetTimeouService } from "namirasoft-core";
-
-export interface NSCopyBoxProps extends IBaseComponentProps
-{
-	title?: string;
-	value: string;
-}
-
-export interface NSCopyBoxState
-{
-	copied: boolean;
-}
-
-export function NSCopyBox(props: NSCopyBoxProps)
-{
-	const service = useRef<SetTimeouService>(new SetTimeouService());
-
-	let [state, setState] = useState<NSCopyBoxState>({ copied: false });
-
-	function onCopy(): void
-	{
-		if (navigator.clipboard && navigator.clipboard.writeText)
-		{
-			navigator.clipboard.writeText(props.value);
-
-			setState({ copied: true });
-			service.current?.setTimeoutIfNotCalledAgain(() => { setState({ copied: false }) }, 3000);
-		}
-	}
-
-	return (
-		<div id={props.id}
-			className={`${Styles.ns_copy} ${props.classList?.join(" ") ?? ""}`}
-			style={props.style}
-		>
-			<div className={Styles.ns_copy_value}>
-				{
-					props.title && <p className="m-0">{props.title}</p>
-				}
-				<img src={state.copied ? "https://static.namirasoft.com/image/concept/check/on/blue.svg" : "https://static.namirasoft.com/image/concept/copy/blue.svg"}
-					alt='Copy'
-					width={16}
-					height={16}
-					onClick={onCopy}
-					style={{ cursor: "pointer" }}
-				/>
-			</div>
-		</div>
-	);
+import { useRef, useState } from "react";
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+
+import Styles from "./NSCopyBox.module.css";
+import { SetTimeouService } from "namirasoft-core";
+
+export interface NSCopyBoxProps extends IBaseComponentProps
+{
+	title?: string;
+	value: string;
+}
+
+export interface NSCopyBoxState
+{
+	copied: boolean;
+}
+
+export function NSCopyBox(props: NSCopyBoxProps)
+{
+	const service = useRef<SetTimeouService>(new SetTimeouService());
+
+	let [state, setState] = useState<NSCopyBoxState>({ copied: false });
+
+	function onCopy(): void
+	{
+		if (navigator.clipboard && navigator.clipboard.writeText)
+		{
+			navigator.clipboard.writeText(props.value);
+
+			setState({ copied: true });
+			service.current?.setTimeoutIfNotCalledAgain(() => { setState({ copied: false }) }, 3000);
+		}
+	}
+
+	return (
+		<div id={props.id}
+			className={`${Styles.ns_copy} ${props.classList?.join(" ") ?? ""}`}
+			style={props.style}
+		>
+			<div className={Styles.ns_copy_value}>
+				{
+					props.title && <p className="m-0">{props.title}</p>
+				}
+				<img src={state.copied ? "https://static.namirasoft.com/image/concept/check/on/blue.svg" : "https://static.namirasoft.com/image/concept/copy/blue.svg"}
+					alt='Copy'
+					width={16}
+					height={16}
+					onClick={onCopy}
+					style={{ cursor: "pointer" }}
+				/>
+			</div>
+		</div>
+	);
 }