namirasoft-site-react 1.3.24 → 1.3.26

package/src/components/NSLinkBlue.tsx

@@ -1,29 +1,25 @@
 "use client";
 
+import { LinkType } from "../types/Link";
 import Styles from "./NSLinkBlue.module.css";
 import React from "react";
 
-export interface NSLinkBlueProps
+export interface NSLinkBlueProps extends LinkType
 {
-	title?: string;
-	href: string;
-	target?: string;
 	style?: React.CSSProperties;
 }
 
-export interface NSLinkBlueState
+export interface NSLinkBlueState extends LinkType
 {
-	title?: string;
-	href: string;
-	target?: string;
+
 }
 
-export class NSLinkBlue extends React.Component<NSLinkBlueProps, NSLinkBlueState>
+export class NSLinkBlue extends React.Component<NSLinkBlueProps, NSLinkBlueState> 
 {
 	constructor(props: NSLinkBlueProps)
 	{
 		super(props);
-		this.state = { title: props.title , href: props.href , target: props.target};
+		this.state = { title: props.title, href: props.href, target: props.target };
 	}
 	setTitle(title: string)
 	{

package/src/components/NSLoading.tsx

@@ -1,11 +1,11 @@
 import { Component } from 'react';
 import Styles from './NSLoading.module.css';
 import { NSSection } from './NSSection';
-import { Background } from '../types/Background';
+import { BackgroundType } from '../types/Background';
 
 interface NSLoadingProps
 {
-	background?: Background;
+	background?: BackgroundType;
 	padding_bottom?: string;
 }
 

package/src/components/NSSection.tsx

@@ -2,18 +2,18 @@
 
 import { Component, ReactNode } from "react";
 import Styles from './NSSection.module.css'
-import { Background } from "../types/Background";
+import { BackgroundType } from "../types/Background";
 
 export interface NSSectionProps
 {
 	children: ReactNode;
-	background?: Background;
+	background?: BackgroundType;
 	padding_bottom?: string
 }
 
 export interface NSSectionState
 {
-	background?: Background;
+	background?: BackgroundType;
 }
 
 export class NSSection extends Component<NSSectionProps, NSSectionState> {

package/src/components/NSSectionBars.tsx

@@ -4,11 +4,11 @@ import { Component } from 'react';
 import Styles from './NSSectionBars.module.css';
 import { NSEntityBar, NSEntityBarProps } from './NSEntityBar';
 import { NSSection } from './NSSection';
-import { Background } from '../types/Background';
+import { BackgroundType } from '../types/Background';
 
 export interface NSSectionBarsProps
 {
-	background?: Background;
+	background?: BackgroundType;
 	bars: NSEntityBarProps[]
 }
 

package/src/components/NSSectionCards.tsx

@@ -6,7 +6,7 @@ import { NSTitle } from './NSTitle';
 import { NSCard, NSCardProps } from './NSCard';
 import { NSSection } from './NSSection';
 import { NSLinkBlue } from './NSLinkBlue';
-import { Background } from '../types/Background';
+import { BackgroundType } from '../types/Background';
 
 export interface NSSectionCardsProps
 {
@@ -18,7 +18,7 @@ export interface NSSectionCardsProps
 		text: string,
 		color?: string
 	};
-	background?: Background
+	background?: BackgroundType
 	button?: {
 		href: string;
 		title: string;
@@ -27,7 +27,8 @@ export interface NSSectionCardsProps
 	padding_bottom?: string
 }
 
-export class NSSectionCards extends Component<NSSectionCardsProps> {
+export class NSSectionCards extends Component<NSSectionCardsProps>
+{
 	override render()
 	{
 		return (

package/src/components/NSSectionTitle.tsx

@@ -3,7 +3,7 @@
 import { Component, ReactNode } from 'react';
 import { NSSection } from './NSSection';
 import { NSTitle } from './NSTitle';
-import { Background } from '../types/Background';
+import { BackgroundType } from '../types/Background';
 
 export interface NSSectionTitleProps
 {
@@ -11,7 +11,7 @@ export interface NSSectionTitleProps
 		text: string,
 		color?: string
 	};
-	background?: Background
+	background?: BackgroundType
 	padding_bottom?: string;
 	children: ReactNode
 }

package/src/components/NSTable.module.css

@@ -1,4 +1,4 @@
-.thead th {
+.ns_thead th {
     background-color: rgba(20, 27, 92, 1);
     font-size: 16px;
     font-weight: 300;
@@ -7,7 +7,7 @@
     font-size: 16px;
 }
 
-.tbody td {
+.ns_tbody td {
     background-color: rgb(173, 178, 206);
     color: rgba(20, 27, 92, 1);
     padding: 8px 16px;
@@ -17,17 +17,17 @@
 
 }
 
-table {
+.ns_table {
     width: 100%;
 }
 
-.project_list_container {
+.ns_project_list_container {
     text-align: left;
     border-top-left-radius: 8px;
     border-top-right-radius: 8px;
 }
 
-.button_group_desktop {
+.ns_button_group_desktop {
     display: flex;
     flex-direction: row;
     justify-content: end;
@@ -35,7 +35,7 @@ table {
     padding: 24px 0;
 }
 
-.button_group_desktop button {
+.ns_button_group_desktop button {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -49,22 +49,22 @@ table {
     background-color: transparent;
 }
 
-.export_button {
+.ns_export_button {
     border: 1px solid rgba(255, 148, 50, 1);
 }
 
-.refresh_button {
+.ns_refresh_button {
     border: 1px solid rgba(3, 119, 255, 1);
 }
 
 @media only screen and (max-width:600px) {
-    .project_list_container {
+    .ns_project_list_container {
         overflow: auto;
     }
 }
 
 /* table-satus */
-.inqueue_status {
+.ns_inqueue_status {
     color: white;
     background-color: rgba(255, 148, 50, 1);
     font-size: 12px;
@@ -76,7 +76,7 @@ table {
     padding-top: 2px;
 }
 
-.reserving_status {
+.ns_reserving_status {
     color: white;
     background-color: rgba(255, 79, 79, 1);
     font-size: 12px;
@@ -88,7 +88,7 @@ table {
     padding-top: 2px;
 }
 
-.done-status {
+.ns_done-status {
     color: white;
     background-color: rgba(6, 209, 130, 1);
     font-size: 12px;
@@ -100,7 +100,7 @@ table {
     padding-top: 2px;
 }
 
-.inprogress_status {
+.ns_inprogress_status {
     color: white;
     background-color: rgba(230, 208, 19, 1);
     font-size: 12px;

package/src/components/NSTable.tsx

@@ -37,14 +37,14 @@ export class NSTable<RowType> extends Component<NSTableProps<RowType>, NSTableSt
     {
         let column_keys = Object.keys(this.state.columns);
         return (
-            <div className={Styles.project_list_container}>
-                <table className={Styles.table}>
-                    <thead className={Styles.thead}>
+            <div className={Styles.ns_project_list_container}>
+                <table className={Styles.ns_table}>
+                    <thead className={Styles.ns_thead}>
                         <tr>
                             {column_keys.map(column_key => <th key={column_key} scope="col">{this.state.columns[column_key]}</th>)}
                         </tr>
                     </thead>
-                    <tbody className={Styles.tbody}>
+                    <tbody className={Styles.ns_tbody}>
                         {
                             this.state.rows.map((row, rowIndex) =>
                                 <tr key={this.props.getRowKey(row, rowIndex)}>
@@ -59,9 +59,9 @@ export class NSTable<RowType> extends Component<NSTableProps<RowType>, NSTableSt
                         }
                     </tbody >
                 </table>
-                <div className={Styles.button_group_desktop}>
-                    <button onClick={() => window.print()} className={Styles.export_button}><img src="/assets/images/export-vector.png" alt="Export Table Data" width={13} height={16} />Export</button>
-                    <button onClick={() => window.location.reload()} className={Styles.refresh_button}><img src="/assets/images/refresh-vector.png" alt="Refresh Table Contnet" width={15} height={16} />Refresh</button>
+                <div className={Styles.ns_button_group_desktop}>
+                    <button onClick={() => window.print()} className={Styles.ns_export_button}><img src="/assets/images/export-vector.png" alt="Export Table Data" width={13} height={16} />Export</button>
+                    <button onClick={() => window.location.reload()} className={Styles.ns_refresh_button}><img src="/assets/images/refresh-vector.png" alt="Refresh Table Contnet" width={15} height={16} />Refresh</button>
                 </div>
             </div >
         )

package/src/main.ts

@@ -23,6 +23,7 @@ export * from "./components/NSInputTime";
 export * from "./components/NSLayout";
 export * from "./components/NSLayoutHeroBanner";
 export * from "./components/NSLayoutTitle";
+export * from "./components/NSLoading";
 export * from "./components/NSSelectBox";
 export * from "./components/NSSection";
 export * from "./components/NSSectionBars";
@@ -35,5 +36,6 @@ export * from "./components/NSPagination";
 export * from "./components/NSTable";
 export * from "./components/NSTitle";
 export * from "./pages/NSLoginPage";
+export * from "./pages/NSNotFoundPage";
 
 

package/src/pages/NSNotFoundPage.module.css

@@ -0,0 +1,19 @@
+.ns_not_found_page { 
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background-image: url('../assets/images/404\ image_mobile.svg');
+	background-repeat: no-repeat;
+	background-size: cover;
+	background-position: center;
+	background-color: #fff;
+	width: 100%;
+	height: 100vh;
+margin-bottom: 48px;
+}
+
+@media only screen and (min-width: 1024px) { 
+	.ns_not_found_page { 
+		background-image: url('../assets/images/404\ image.svg');
+	}
+}

package/src/pages/NSNotFoundPage.tsx

@@ -0,0 +1,18 @@
+import { Component } from 'react';
+import Styles from './NSNotFoundPage.module.css'
+import { NSLinkBlue } from '../main';
+
+class NSNotFoundPage extends Component
+{
+	override render()
+	{
+		return (
+			<>
+				<div className={Styles.ns_not_found_page}></div>
+				<NSLinkBlue href='/' target='_self' title='Back To Home'/>``
+			</>
+		);
+	}
+}
+
+export default NSNotFoundPage;

package/src/types/Background.ts

@@ -1,4 +1,4 @@
-export interface Background
+export interface BackgroundType
 {
 	image?: string,
 	color?: string,

package/src/types/Link.ts

@@ -0,0 +1,6 @@
+export interface LinkType
+{
+	title?: string;
+	href: string;
+	target?: string;
+}