namirasoft-site-react 1.4.548 → 1.4.550

package/src/components/NSBoxDateRangeBase.tsx

@@ -88,6 +88,8 @@ export abstract class NSBoxDateRangeBase<TProps extends NSBoxDateRangeBaseProps<
     protected abstract getBuiltinPresets(): { label: string; title: string; from: Date; to: Date }[];
     protected abstract renderPicker(): React.ReactNode;
 
+    protected normalizeValue(value: NSBoxDateRangeValue): NSBoxDateRangeValue { return value; }
+
     protected toDayjsValue(): [Dayjs, Dayjs] | null
     {
         const { value } = this.state;
@@ -127,8 +129,9 @@ export abstract class NSBoxDateRangeBase<TProps extends NSBoxDateRangeBaseProps<
             <div className={Styles.ns_preset_container}>
                 {builtinPresets.map(p =>
                 {
-                    const isActive = this.state.value?.from.getTime() === p.from.getTime()
-                        && this.state.value?.to.getTime() === p.to.getTime();
+                    const norm = this.normalizeValue({ from: p.from, to: p.to });
+                    const isActive = this.state.value?.from.getTime() === norm.from.getTime()
+                        && this.state.value?.to.getTime() === norm.to.getTime();
                     return (
                         <button
                             key={p.label}
@@ -144,8 +147,9 @@ export abstract class NSBoxDateRangeBase<TProps extends NSBoxDateRangeBaseProps<
                 {showDivider && <div className={Styles.ns_preset_divider} />}
                 {resolvedCustom.map(p =>
                 {
-                    const isActive = this.state.value?.from.getTime() === p.from.getTime()
-                        && this.state.value?.to.getTime() === p.to.getTime();
+                    const norm = this.normalizeValue({ from: p.from, to: p.to });
+                    const isActive = this.state.value?.from.getTime() === norm.from.getTime()
+                        && this.state.value?.to.getTime() === norm.to.getTime();
                     return (
                         <button
                             key={p.shortName}

package/src/components/NSBoxDateTimeRange.tsx

@@ -31,11 +31,13 @@ export class NSBoxDateTimeRange extends NSBoxDateRangeBase<NSBoxDateTimeRangePro
         const now = new Date();
         now.setSeconds(0, 0);
         return [
-            { label: '1H', title: 'Last 1 Hour', from: TimeOperation.hoursAgo(1, now), to: now },
-            { label: '6H', title: 'Last 6 Hours', from: TimeOperation.hoursAgo(6, now), to: now },
-            { label: '12H', title: 'Last 12 Hours', from: TimeOperation.hoursAgo(12, now), to: now },
             { label: '1D', title: 'Last 1 Day', from: TimeOperation.daysAgo(1, now), to: now },
+            { label: '2D', title: 'Last 2 Days', from: TimeOperation.daysAgo(2, now), to: now },
             { label: '1W', title: 'Last 1 Week', from: TimeOperation.weeksAgo(1, now), to: now },
+            { label: '1M', title: 'Last 1 Month', from: TimeOperation.monthsAgo(1, now), to: now },
+            { label: '3M', title: 'Last 3 Months', from: TimeOperation.monthsAgo(3, now), to: now },
+            { label: '6M', title: 'Last 6 Months', from: TimeOperation.monthsAgo(6, now), to: now },
+            { label: '1Y', title: 'Last Year', from: TimeOperation.yearsAgo(1, now), to: now },
         ];
     }
 

package/src/components/NSBoxTimeRange.tsx

@@ -118,9 +118,11 @@ export class NSBoxTimeRange extends Component<NSBoxTimeRangeProps, NSBoxTimeRang
         now.setSeconds(0, 0);
         const to = TimeOperation.format(now, fmt);
         return [
+            { label: '15M', title: 'Last 15 Min', from: TimeOperation.format(TimeOperation.minutesAgo(15, now), fmt), to },
             { label: '30M', title: 'Last 30 Min', from: TimeOperation.format(TimeOperation.minutesAgo(30, now), fmt), to },
             { label: '1H', title: 'Last 1 Hour', from: TimeOperation.format(TimeOperation.hoursAgo(1, now), fmt), to },
             { label: '2H', title: 'Last 2 Hours', from: TimeOperation.format(TimeOperation.hoursAgo(2, now), fmt), to },
+            { label: '4H', title: 'Last 4 Hours', from: TimeOperation.format(TimeOperation.hoursAgo(4, now), fmt), to },
             { label: '6H', title: 'Last 6 Hours', from: TimeOperation.format(TimeOperation.hoursAgo(6, now), fmt), to },
             { label: '12H', title: 'Last 12 Hours', from: TimeOperation.format(TimeOperation.hoursAgo(12, now), fmt), to },
         ];

package/src/components/NSButton.tsx

@@ -1,7 +1,7 @@
 import Styles from "./NSButton.module.css";
 import { IBaseComponentProps } from "../props/IBaseComponentProps";
 import { IImageProps } from "../props/IImageProps";
-import React from "react";
+import { ButtonHTMLAttributes, Component } from "react";
 import { NSLoading, NSLoadingProps } from "./NSLoading";
 
 export interface NSButtonOnClickProps<ParameterType = any>
@@ -17,6 +17,7 @@ export interface NSButtonProps<ParameterType = any> extends IBaseComponentProps
     onClick: NSButtonOnClickProps<ParameterType>;
     disabled?: boolean;
     loading?: NSLoadingProps
+    attributes?: ButtonHTMLAttributes<HTMLButtonElement>
 }
 
 export interface NSButtonState 
@@ -24,7 +25,7 @@ export interface NSButtonState
     clicked: boolean;
 }
 
-export class NSButton extends React.Component<NSButtonProps, NSButtonState>
+export class NSButton extends Component<NSButtonProps, NSButtonState>
 {
     constructor(props: NSButtonProps)
     {
@@ -60,13 +61,11 @@ export class NSButton extends React.Component<NSButtonProps, NSButtonState>
 
         return (
             <button id={this.props.id}
-                className={`${this.props.disabled ? Styles.ns_button_disabled : Styles.ns_button} ${this.props.classList?.join(" ") ?? ""}`}
-                style={this.props.style}
-                onClick={() =>
-                {
-                    this.performClick();
-                }}
+                {...this.props.attributes}
                 disabled={this.props.disabled}
+                style={this.props.style}
+                className={`${this.props.disabled ? Styles.ns_button_disabled : Styles.ns_button} ${this.props.classList?.join(" ") ?? ""}`}
+                onClick={() => this.performClick()}
             >
                 {this.props.icon && <img {...this.props.icon} alt="Icon" width={24} height={24} />}
                 {this.props.title}

package/src/components/NSTable.module.css

@@ -1,312 +1,321 @@
 .ns_table {
-	display: flex;
-	flex-direction: column;
-	overflow-x: auto;
-	color: rgba(20, 27, 92);
+    display: flex;
+    flex-direction: column;
+    overflow-x: auto;
+    color: rgba(20, 27, 92);
 }
 
 .ns_search_input {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	flex-wrap: wrap;
-	position: relative;
-	z-index: -1;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    position: relative;
+    z-index: -1;
 }
 
 .ns_search_input {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	flex-wrap: wrap;
-	position: relative;
-	z-index: -1;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    position: relative;
+    z-index: -1;
 }
 
 .ns_table thead {
-	display: none;
+    display: none;
 }
 
 .ns_table tr {
-	border-radius: 0px;
-	padding: 16px 8px;
-	display: block;
-	background-color: #fff;
-	transition: all 0.2s ease-in-out;
+    border-radius: 0px;
+    padding: 16px 8px;
+    display: block;
+    background-color: #fff;
+    transition: all 0.2s ease-in-out;
 }
 
 .ns_table tbody tr {
-	cursor: pointer;
+    cursor: pointer;
 }
 
 .ns_table td {
-	display: flex;
-	flex-direction: row;
-	gap: 16px;
-	margin: 8px;
-	padding: 8px 0;
-	font-size: 16px;
-	justify-content: left;
-	align-items: center;
-	color: #000;
-	height: max-content;
-	max-height: 3rem;
-	line-clamp: 2;
-	-webkit-line-clamp: 2;
-	-webkit-box-orient: vertical;
-	overflow: hidden;
-	padding-top: 0 !important;
-	padding-bottom: 0 !important;
-	overflow-wrap: break-word;
-	word-break: break-word;
+    display: flex;
+    flex-direction: row;
+    gap: 16px;
+    margin: 8px;
+    padding: 8px 0;
+    font-size: 16px;
+    justify-content: left;
+    align-items: center;
+    color: #000;
+    height: max-content;
+    max-height: 3rem;
+    line-clamp: 2;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+    overflow-wrap: break-word;
+    word-break: break-word;
 }
 
 .ns_table td::before {
-	content: attr(data-label);
-	font-weight: bold;
-	float: left;
-	min-width: 30%;
+    content: attr(data-label);
+    font-weight: bold;
+    float: left;
+    min-width: 30%;
 }
 
 .ns_tbody tr:nth-child(odd) {
-	background-color: #f5f5f5;
+    background-color: #f5f5f5;
 }
 
 .ns_tbody tr:nth-child(even) {
-	background-color: #ffffff;
+    background-color: #ffffff;
 }
 
 .ns_tbody tr:hover {
-	background-color: rgb(184, 190, 240, 0.32);
+    background-color: rgb(184, 190, 240, 0.32);
 }
 
 .ns_tbody tr.ns_selected {
-	background-color: rgb(184, 190, 240, 0.64);
+    background-color: rgb(184, 190, 240, 0.64);
 }
 
 .ns_table tfoot {
-	padding: 1rem 0 0;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
+    padding: 1rem 0 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
 /* Check Box */
 .ns_check_box {
-	width: 100%;
-	text-align: center;
+    width: 100%;
+    text-align: center;
 }
 
 .ns_check_box {
-	height: 24px;
-	width: 24px !important;
-	cursor: pointer;
+    height: 24px;
+    width: 24px !important;
+    cursor: pointer;
 }
 
 .ns_check_box:checked {
-	accent-color: #141B5C;
+    accent-color: #141B5C;
 }
 
 .ns_check_box_label {
-	display: block;
-	width: 100%;
-	height: 100%;
-	cursor: pointer;
-	display: flex;
-	justify-content: left;
-	align-items: center;
+    display: block;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    display: flex;
+    justify-content: left;
+    align-items: center;
 }
 
 .ns_indeterminate:indeterminate {
-	border: 1px solid rgba(255, 148, 50, 1);
+    border: 1px solid rgba(255, 148, 50, 1);
 }
 
 .ns_indeterminate {
-	position: relative;
+    position: relative;
 }
 
 .ns_indeterminate::after {
-	content: "-";
-	display: block;
-	position: absolute;
-	width: 100%;
-	height: 100%;
-	top: 0;
-	left: 0;
-	border: 5px solid #fffbff;
-	color: #141b5c;
-	background: #141b5c;
+    content: "-";
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    border: 5px solid #fffbff;
+    color: #141b5c;
+    background: #141b5c;
+}
+
+.ns_tfoot_row,
+.ns_tfoot_cell {
+    display: contents !important;
+}
+
+.ns_tfoot_cell::before {
+    display: none !important;
 }
 
 /* Button Panel */
 .ns_button_panel {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	justify-content: center;
-	align-items: center;
-	width: 100%;
-	gap: 16px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    gap: 16px;
 }
 
 @media screen and (max-width: 991px) {
-	.ns_table td {
-		width: auto;
-	}
+    .ns_table td {
+        width: auto;
+    }
 }
 
 @media screen and (min-width: 992px) {
-	.ns_table_wrapper {
-		position: relative;
-		height: 100%;
-	}
-
-	.ns_table {
-		height: 100%;
-		max-height: 33.625rem;
-		border-radius: 0.75rem;
-		justify-content: flex-start;
-		overflow: scroll auto;
-		background-color: #fff;
-		color: #000;
-	}
-
-	.ns_table tr {
-		min-width: fit-content;
-		margin: 0;
-		border: 1px solid transparent;
-		border-radius: 0;
-		padding: 4px 8px;
-		display: grid;
-		align-items: center;
-		grid-auto-flow: column;
-		grid-auto-columns: max-content;
-	}
-
-	.ns_table th {
-		margin: 8px;
-		padding: 0;
-		font-size: 16px;
-		font-weight: 500;
-		line-height: 1.5rem;
-		color: #fff;
-	}
-
-	.ns_table td {
-		align-items: flex-start;
-		line-height: 1.5rem;
-		text-align: left;
-	}
-
-	.ns_table td::before {
-		content: "";
-		float: left;
-		font-weight: bold;
-		min-width: unset;
-		display: none;
-	}
-
-	.ns_table thead {
-		position: sticky;
-		top: 0;
-		min-width: max-content;
-		display: block;
-	}
-
-	.ns_table thead tr {
-		background-color: rgba(20, 27, 92);
-	}
-
-	.ns_table tbody {
-		padding-bottom: 0.5rem;
-	}
-
-	.ns_table tbody tr.ns_selected,
-	.ns_table tbody tr.ns_last_selected {
-		border-color: rgba(20, 27, 92);
-	}
-
-	.ns_table tbody tr.ns_selected+tr,
-	.ns_table tbody tr.ns_last_selected+tr {
-		border-top-color: transparent;
-	}
-
-	.ns_table tfoot {
-		position: sticky;
-		bottom: 0;
-		left: 0;
-		width: 100%;
-		padding: 1rem;
-		flex-direction: row;
-		background-color: #fff;
-	}
-
-	.ns_table tfoot.padding_0 {
-		padding: 0;
-	}
-
-	.ns_check_box {
-		display: flex;
-		align-items: center;
-		cursor: pointer;
-	}
-
-	.ns_checkbox_label {
-		justify-content: center;
-	}
-
-	.ns_table_scrollbar {
-		position: absolute;
-		left: 0;
-		width: 100%;
-		height: 0.5rem;
-		overflow: auto visible;
-		background-color: #efefef;
-	}
-
-	.ns_table_scrollbar.bottom-0 {
-		bottom: 0;
-	}
-
-	.ns_table_scrollbar_content {
-		height: 0.25rem;
-	}
-
-	.ns_table,
-	.ns_table_scrollbar {
-		&::-webkit-scrollbar {
-			width: 0.5rem;
-			height: 0.5rem;
-		}
-
-		&::-webkit-scrollbar-track {
-			border-radius: 0.25rem;
-			background: #efefef;
-		}
-
-		&::-webkit-scrollbar-thumb {
-			border-radius: 0.25rem;
-			background: #888;
-		}
-
-		&::-webkit-scrollbar-thumb:hover {
-			background: #555;
-		}
-	}
-
-	.ns_table::-webkit-scrollbar {
-		height: 0;
-	}
-
-	.ns_table_scrollbar::-webkit-scrollbar {
-		width: 0;
-	}
+    .ns_table_wrapper {
+        position: relative;
+        height: 100%;
+    }
+
+    .ns_table {
+        height: 100%;
+        max-height: 33.625rem;
+        border-radius: 0.75rem;
+        justify-content: flex-start;
+        overflow: scroll auto;
+        background-color: #fff;
+        color: #000;
+    }
+
+    .ns_table tr {
+        min-width: fit-content;
+        margin: 0;
+        border: 1px solid transparent;
+        border-radius: 0;
+        padding: 4px 8px;
+        display: grid;
+        align-items: center;
+        grid-auto-flow: column;
+        grid-auto-columns: max-content;
+    }
+
+    .ns_table th {
+        margin: 8px;
+        padding: 0;
+        font-size: 16px;
+        font-weight: 500;
+        line-height: 1.5rem;
+        color: #fff;
+    }
+
+    .ns_table td {
+        align-items: flex-start;
+        line-height: 1.5rem;
+        text-align: left;
+    }
+
+    .ns_table td::before {
+        content: "";
+        float: left;
+        font-weight: bold;
+        min-width: unset;
+        display: none;
+    }
+
+    .ns_table thead {
+        position: sticky;
+        top: 0;
+        min-width: max-content;
+        display: block;
+    }
+
+    .ns_table thead tr {
+        background-color: rgba(20, 27, 92);
+    }
+
+    .ns_table tbody {
+        padding-bottom: 0.5rem;
+    }
+
+    .ns_table tbody tr.ns_selected,
+    .ns_table tbody tr.ns_last_selected {
+        border-color: rgba(20, 27, 92);
+    }
+
+    .ns_table tbody tr.ns_selected+tr,
+    .ns_table tbody tr.ns_last_selected+tr {
+        border-top-color: transparent;
+    }
+
+    .ns_table tfoot {
+        position: sticky;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        padding: 1rem;
+        flex-direction: row;
+        background-color: #fff;
+    }
+
+    .ns_table tfoot.padding_0 {
+        padding: 0;
+    }
+
+    .ns_check_box {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+    }
+
+    .ns_checkbox_label {
+        justify-content: center;
+    }
+
+    .ns_table_scrollbar {
+        position: absolute;
+        left: 0;
+        width: 100%;
+        height: 0.5rem;
+        overflow: auto visible;
+        background-color: #efefef;
+    }
+
+    .ns_table_scrollbar.bottom-0 {
+        bottom: 0;
+    }
+
+    .ns_table_scrollbar_content {
+        height: 0.25rem;
+    }
+
+    .ns_table,
+    .ns_table_scrollbar {
+        &::-webkit-scrollbar {
+            width: 0.5rem;
+            height: 0.5rem;
+        }
+
+        &::-webkit-scrollbar-track {
+            border-radius: 0.25rem;
+            background: #efefef;
+        }
+
+        &::-webkit-scrollbar-thumb {
+            border-radius: 0.25rem;
+            background: #888;
+        }
+
+        &::-webkit-scrollbar-thumb:hover {
+            background: #555;
+        }
+    }
+
+    .ns_table::-webkit-scrollbar {
+        height: 0;
+    }
+
+    .ns_table_scrollbar::-webkit-scrollbar {
+        width: 0;
+    }
 }
 
 @media screen and (min-width: 1024px) {
-	.ns_button_panel {
-		flex-wrap: nowrap;
-		justify-content: flex-end;
-		gap: 24px;
-	}
+    .ns_button_panel {
+        flex-wrap: nowrap;
+        justify-content: flex-end;
+        gap: 24px;
+    }
 }

package/src/components/NSTable.tsx

@@ -853,8 +853,8 @@ export class NSTable<RowType> extends Component<NSTableProps<RowType>, NSTableSt
 					</tbody>
 
 					<tfoot className={!show_pagination && !show_button_panel ? Styles.padding_0 : ""}>
-						<tr>
-							<td colSpan={this.getColumns(true).length + (this.props.checkbox ? 1 : 0)}>
+						<tr className={Styles.ns_tfoot_row}>
+							<td className={Styles.ns_tfoot_cell}>
 								<div
 									ref={this.TableScrollbar_Ref}
 									className={Styles.ns_table_scrollbar}