namirasoft-site-react 1.3.442 → 1.3.444

package/src/components/NSChartTable.tsx

@@ -1,94 +1,98 @@
 import { Table, Progress } from 'antd';
 import { ColumnType } from 'antd/es/table';
-import { IBaseComponentProps } from '../main';
+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 DataType
+{
+	key: string;
+	job: string;
+	totalHours: number;
+	percentage: number;
+	cost: number;
+	income: number;
+	benefit: number;
 }
 
-interface CustomTableProps extends IBaseComponentProps {
-    data: DataType[];
+interface CustomTableProps extends IBaseComponentProps
+{
+	data: DataType[];
 }
 
-const 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 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)}
-                    strokeWidth={16}
-                    size={{ width: 310, height: 16 }}
-                />
-            ),
-        },
-    ];
+	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)}
+					strokeWidth={16}
+					size={{ width: 310, height: 16 }}
+				/>
+			),
+		},
+	];
 
-    return (
-        <div>
-            <Table
-                columns={columns}
-                dataSource={props.data}
-                pagination={false}
-                scroll={{ x: 800 }} 
-                rowClassName={() => Styles.custom_row}
-            />
-        </div>
-    );
+	return (
+		<div>
+			<Table
+				columns={columns}
+				dataSource={props.data}
+				pagination={false}
+				scroll={{ x: 800 }}
+				rowClassName={() => Styles.custom_row}
+			/>
+		</div>
+	);
 };
 
 export default NSChartTable;

package/src/components/NSDownload.tsx

@@ -1,58 +1,65 @@
 import { useState } from "react";
-import { IBaseComponentProps, NSButtonBlue } from "../main";
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
 import { NSBoxRadio } from "./NSBoxRadio";
-import Styles from "./NSDownload.module.css"
 import { NSLine } from "./NSLine";
+import { NSButtonBlue } from "./NSButtonBlue";
+import Styles from "./NSDownload.module.css"
 
-export interface NSDownloadProps extends IBaseComponentProps {
-    releaseDate: string;
+export interface NSDownloadProps extends IBaseComponentProps
+{
+	releaseDate: string;
 }
 
-function NSDownload(props: NSDownloadProps) {
-    const [state, setState] = useState("32-bit");
+function NSDownload(props: NSDownloadProps)
+{
+	const [state, setState] = useState("32-bit");
 
-    return (
-        <div className={`${Styles.download_parent} ${props.classList?.join(' ')}`}>
-            <div className={Styles.download_header}>
-                <h3 style={{ color: "#141B5C" }}>Choose Your Windows Architecture</h3>
-                <div className={Styles.radio_group}>
-                    <NSBoxRadio
-                        title={"32-bit"}
-                        required={false}
-                        isSelected={state === "32-bit"}
-                        onChanged={(event) => {
-                            let value = event.getValue();
-                            if (value) {
-                                setState("32-bit");
-                            }
-                        }}
-                        classList={[Styles.radio_button]}
-                    />
-                    <NSBoxRadio
-                        title={"64-bit"}
-                        required={false}
-                        isSelected={state === "64-bit"}
-                        onChanged={(event) => {
-                            let value = event.getValue();
-                            if (value) {
-                                setState("64-bit");
-                            }
-                        }}
-                        classList={[Styles.radio_button]}
-                    />
-                </div>
-            </div>
-            <NSLine />
-            <div className={Styles.download_detail}>
-                <h4 style={{ color: "#141B5C" }}>For Windows 7 and higher, Windows Server 2008 R2 and higher.</h4>
-                <div>
-                    <p style={{ marginBottom: "0" }}>Latest Version</p>
-                    <p style={{ marginBottom: "0" }}>Release Date: {props.releaseDate}</p>
-                </div>
-                <NSButtonBlue title="Download" onClick={() => { }} classList={[Styles.download_button]} />
-            </div>
-        </div>
-    );
+	return (
+		<div className={`${Styles.download_parent} ${props.classList?.join(' ')}`}>
+			<div className={Styles.download_header}>
+				<h3 style={{ color: "#141B5C" }}>Choose Your Windows Architecture</h3>
+				<div className={Styles.radio_group}>
+					<NSBoxRadio
+						title={"32-bit"}
+						required={false}
+						isSelected={state === "32-bit"}
+						onChanged={(event) =>
+						{
+							let value = event.getValue();
+							if (value)
+							{
+								setState("32-bit");
+							}
+						}}
+						classList={[Styles.radio_button]}
+					/>
+					<NSBoxRadio
+						title={"64-bit"}
+						required={false}
+						isSelected={state === "64-bit"}
+						onChanged={(event) =>
+						{
+							let value = event.getValue();
+							if (value)
+							{
+								setState("64-bit");
+							}
+						}}
+						classList={[Styles.radio_button]}
+					/>
+				</div>
+			</div>
+			<NSLine />
+			<div className={Styles.download_detail}>
+				<h4 style={{ color: "#141B5C" }}>For Windows 7 and higher, Windows Server 2008 R2 and higher.</h4>
+				<div>
+					<p style={{ marginBottom: "0" }}>Latest Version</p>
+					<p style={{ marginBottom: "0" }}>Release Date: {props.releaseDate}</p>
+				</div>
+				<NSButtonBlue title="Download" onClick={() => { }} classList={[Styles.download_button]} />
+			</div>
+		</div>
+	);
 }
 
 export default NSDownload;

package/src/components/NSTable.module.css

@@ -61,7 +61,7 @@
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    justify-content: space-between;
+    justify-content: center;
     align-items: center;
     width: 100%;
     gap: 16px;
@@ -82,6 +82,12 @@
     justify-content: center
 }
 
+@media screen and (min-width: 420px) { 
+	.ns_button {
+        justify-content: space-between;
+    }
+}
+
 @media screen and (min-width: 992px) {
     .ns_table {
         color: #000000;

package/src/components/NSTimeTable.tsx

@@ -1,47 +1,50 @@
 import { ConfigProvider, Table } from 'antd';
 import type { TableProps } from 'antd';
-import { IBaseComponentProps } from '../main';
+import { IBaseComponentProps } from '../props/IBaseComponentProps';
 import Styles from "./NSTimeTable.module.css"
 
-interface DataType {
-    key: string;
-    year: string;
-    month: string;
-    week: string;
-    today: string;
+interface DataType
+{
+	key: string;
+	year: string;
+	month: string;
+	week: string;
+	today: string;
 }
 
-export interface NSTimeTableProps extends IBaseComponentProps {
-    rows: DataType[];
-    columns: TableProps<DataType>['columns'];
+export interface NSTimeTableProps extends IBaseComponentProps
+{
+	rows: DataType[];
+	columns: TableProps<DataType>['columns'];
 }
 
-const NSTimeTable = (props: NSTimeTableProps) => {
+const NSTimeTable = (props: NSTimeTableProps) =>
+{
 
-    return (
-        <ConfigProvider theme={{
-            components: {
-                Table: {
-                    headerBg: "#141B5C",
-                    headerColor: "#fff",
-                    headerSplitColor: "#141B5C",
-                    cellFontSize: 16,
-                    colorText: "#141B5C",
-                }
-            }
-        }}>
-            <Table
-                columns={props.columns}
-                dataSource={props.rows}
-                bordered={false}
-                rowClassName={Styles.custom_row}
-                rowHoverable={false}
-                scroll={{
-                    x: true
-                }}
-            />
-        </ConfigProvider>
-    )
+	return (
+		<ConfigProvider theme={{
+			components: {
+				Table: {
+					headerBg: "#141B5C",
+					headerColor: "#fff",
+					headerSplitColor: "#141B5C",
+					cellFontSize: 16,
+					colorText: "#141B5C",
+				}
+			}
+		}}>
+			<Table
+				columns={props.columns}
+				dataSource={props.rows}
+				bordered={false}
+				rowClassName={Styles.custom_row}
+				rowHoverable={false}
+				scroll={{
+					x: true
+				}}
+			/>
+		</ConfigProvider>
+	)
 };
 
 export default NSTimeTable;

package/src/components/NSTimelineMonthly.module.css

@@ -48,4 +48,8 @@
     overflow-x: scroll;
     -ms-overflow-style: none;
     scrollbar-width: none;
+}
+
+.ns_time_line_title {
+    color: #141B5C;
 }

package/src/components/NSTimelineMonthly.tsx

@@ -5,11 +5,12 @@ export interface NSdata
 {
     title: string;
     value: number;
-    percentage:number;
+    percentage: number;
 }
 export interface INSNSTimelineMonthlyProps extends IBaseComponentProps
 {
     data: NSdata[];
+    title?: string;
 }
 
 export function NSTimelineMonthly(props: INSNSTimelineMonthlyProps)
@@ -20,20 +21,23 @@ export function NSTimelineMonthly(props: INSNSTimelineMonthlyProps)
         return percentage.toString() + "%";
     }
     return (
-        <div className={Styles.ns_parent}>
-            <div className={Styles.ns_time_line_monthly}>
-                {
-                    props.data.map((card, index) => (
-                        <div className={Styles.ns_time_line_monthly_card} key={index}>
-                            <h5 className={Styles.ns_time_line_monthly_card_week_day}>{card.title}</h5>
-                            <span className={Styles.ns_time_line_cards_hour}>{card.value}</span>
-                            <div className={Styles.ns_time_line_monthly_card_parent_chart}>
-                                <div className={Styles.ns_time_line_monthly_card_bar} style={{ width: getPercentage(card.value), background: Color.getColor(card.percentage)}}>bar</div>
+        <>
+            <div className={Styles.ns_parent}>
+                <h5 className={Styles.ns_time_line_title}>{props.title}</h5>
+                <div className={Styles.ns_time_line_monthly}>
+                    {
+                        props.data.map((card, index) => (
+                            <div className={Styles.ns_time_line_monthly_card} key={index}>
+                                <h5 className={Styles.ns_time_line_monthly_card_week_day}>{card.title}</h5>
+                                <span className={Styles.ns_time_line_cards_hour}>{card.value}</span>
+                                <div className={Styles.ns_time_line_monthly_card_parent_chart}>
+                                    <div className={Styles.ns_time_line_monthly_card_bar} style={{ width: getPercentage(card.value), background: Color.getColor(card.percentage) }}>bar</div>
+                                </div>
                             </div>
-                        </div>
-                    ))
-                }
+                        ))
+                    }
+                </div>
             </div>
-        </div>
+        </>
     );
 }