namirasoft-site-react 1.2.0

package/src/assets/images/rectangle.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="18" height="18" rx="3" fill="white" stroke="#848484" stroke-width="2"/>
+</svg>

package/src/components/NSButtonGreen.module.css

@@ -0,0 +1,12 @@
+.ns_button_green {
+    width: 358px;
+    max-width: 100%;
+    height: 48px;
+    border-radius: 8px;
+    background-color: #06D182;
+    color: #fff;
+    border: 0;
+    box-shadow: inset 0 -4px 4px 0px rgb(0 0 0 / 25%);
+    font-size: 16px;
+    font-weight: 400;
+}

package/src/components/NSButtonGreen.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import Style from "./NSButtonGreen.module.css";
+
+interface IProps
+{
+    title: string;
+    onClick: () => void;
+}
+
+interface IState { }
+
+export default class NSButtonGreen extends React.Component<IProps, IState>
+{
+    override  render()
+    {
+        return <button onClick={this.props.onClick} className={Style.ns_button_green}>{this.props.title}</button>;
+    }
+}

package/src/components/NSButtonRed.module.css

@@ -0,0 +1,12 @@
+.ns_button_red {
+    width: 358px;
+    max-width: 100%;
+    height: 48px;
+    border-radius: 8px;
+    background-color: #FF3F3F;
+    color: #fff;
+    border: 0;
+    box-shadow: inset 0 -4px 4px 0px rgb(0 0 0 / 25%);
+    font-size: 16px;
+    font-weight: 400;
+}

package/src/components/NSButtonRed.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import Style from "./NSButtonRed.module.css";
+
+interface IProps
+{
+    title: string;
+    onClick: () => void;
+}
+
+interface IState { }
+
+export default class NSButtonRed extends React.Component<IProps, IState>
+{
+    override  render()
+    {
+        return <button onClick={this.props.onClick} className={Style.ns_button_red}>{this.props.title}</button>;
+    }
+}

package/src/components/NSFooter.module.css

@@ -0,0 +1,32 @@
+.ns_footer {
+    width: 100%;
+    background: rgba(0, 0, 0, 0.3);
+    padding: 16px 0 8px 0;
+}
+
+.footns_footer li {
+    color: #fff;
+}
+
+.ns_footer ul {
+    list-style: none;
+    color: #fff;
+    padding: 0;
+}
+.ns_footer_copyright{
+    color: #fff !important;
+    text-align: center;
+    justify-content: center;
+    width: 100%;
+}
+.ns_footer_parent_items{
+    gap: 64px;
+}
+.ns_footer li{
+    font-size: 12px !important;
+    font-weight: 300 !important;
+}
+.ns_footer h5{
+    font-size: 16px !important;
+    font-weight: 600 !important;
+}

package/src/components/NSFooter.tsx

@@ -0,0 +1,126 @@
+import React from "react";
+// import Namira from '../assets/images/namira.svg';
+import Styles from "./NSFooter.module.css";
+import { NamirasoftAPILinkServer, FilterLinkRow } from 'namirasoft-api-link';
+
+interface IProps
+{
+    scope: string;
+    name: string;
+}
+
+interface IState
+{
+    filters: FilterLinkRow[];
+    selected: FilterLinkRow | null;
+}
+
+export default class NSFooter extends React.Component<IProps, IState> {
+    constructor(props: IProps)
+    {
+        super(props);
+        this.state = {
+            filters: [],
+            selected: null
+        };
+        this.hasChild = this.hasChild.bind(this);
+        this.render_menu = this.render_menu.bind(this);
+        this.render_menuItem = this.render_menuItem.bind(this);
+    }
+    override componentDidMount(): void
+    {
+        let server = new NamirasoftAPILinkServer(console.error);
+        server.filter.GetFilters(this.props.scope, this.props.name).then(filters =>
+        {
+            this.setState({ filters });
+        });
+    }
+    private hasChild(id: number): boolean
+    {
+        return this.state.filters.filter(f => f.parent_id === id).length > 0;
+    }
+    override render()
+    {
+        return (
+            <div className={Styles.ns_footer}>
+                <div className="container">
+                    <div className={`d-flex justify-content-between ${Styles.ns_footer_parent_items}`}>
+                        <div className="d-none d-md-block">
+                            <div>
+                                <a href="/">
+                                    <img src="https://static.namirasoft.com/logo/account/base.png" alt='footer' width={48} height={48} />
+                                </a>
+                            </div>
+                        </div>
+                        <div className="d-flex flex-wrap w-100 gap-5">
+                            {this.render_menu(0, null)}
+                        </div>
+                        <div className="justify-content-end d-none d-md-flex">
+                            <div>
+                                <a href="/">
+                                    <img src="https://static.namirasoft.com/logo/namirasoft/name.png" alt='footer' width={48} height={48} />
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="d-flex justify-content-center gap-4 mb-3 d-block d-md-none">
+                        <div>
+                            <a href="/">
+                                <img src="https://static.namirasoft.com/logo/account/base.png" alt='footer' width={48} height={48} />
+                            </a>
+                        </div>
+                        <div>
+                            <a href="/">
+                                <img src="https://static.namirasoft.com/logo/namirasoft/name.png" alt='footer' width={48} height={48} />
+                            </a>
+                        </div>
+                    </div>
+                    <div className={`row ${Styles.ns_footer_copyright}`}>©Copyright 2010 - 2023 Namira Software Corporation. All rights reserved.</div>
+                </div>
+            </div>
+        );
+    }
+    private render_menu(level: number, parent_id: number | null)
+    {
+        let fs: FilterLinkRow[] = this.state.filters?.filter(f => f.parent_id === parent_id);
+        return (
+            <>
+                {(fs?.map(f => this.render_menuItem(level, f)))}
+            </>
+        );
+    }
+    private render_menuItem(level: number, filter: FilterLinkRow)
+    {
+        if (this.hasChild(filter.id))
+        {
+            return (<>
+                <ul
+                    id={`dropdown_parent${filter.id}`}>
+                    {filter.name}
+                    {this.render_menu(1, filter.id)}
+                </ul>
+            </>
+            );
+        }
+        else if (level == 0)
+        {
+            return (<>
+                <ul
+                    id={`dropdown_parent${filter.id}`}>
+                    {filter.name}
+                </ul>
+            </>
+            );
+        }
+        else
+        {
+            return (
+                <li className="mb-2">{filter.name}</li>
+            );
+        }
+    }
+
+
+}
+
+

package/src/components/NSHeader.module.css

@@ -0,0 +1,127 @@
+.ns_navbar_usersname {
+    color: #fff !important;
+    font-size: 16px;
+    font-weight: 400;
+}
+
+.ns_navbar {
+    min-height: 60px;
+    background-color: rgba(0, 0, 0, 0.3) !important;
+    position: relative;
+    z-index: 10;
+    display: flex;
+    align-items: center;
+}
+
+.ns_navbar_menu_icon {
+    display: none;
+}
+
+.ns_navbar_elements ul {
+    display: flex;
+    justify-content: space-between;
+    list-style-type: none;
+}
+
+.ns_navbar_elements ul li:not(:last-child) {
+    margin-right: 60px;
+}
+
+.ns_navbar_elements ul a {
+    font-size: 16px;
+    font-weight: 400;
+    color: #2f234f;
+    text-decoration: none;
+}
+
+.ns_navbar_elements ul a.ns_navbar_active {
+    color: #574c4c;
+    font-weight: 500;
+    position: relative;
+}
+
+.ns_navbar_elements ul a.ns_navbar_active::after {
+    content: "";
+    position: absolute;
+    bottom: -4px;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background-color: #574c4c;
+}
+
+@media (max-width: 768px) {
+    .ns_navbar_elements ul li:not(:last-child) {
+        margin-right: 30px;
+    }
+}
+
+@media (max-width: 600px) {
+    .ns_navbar_menu_icon {
+        display: block;
+        cursor: pointer;
+    }
+
+    .ns_navbar_elements {
+        position: absolute;
+        right: 0;
+        top: 60px;
+        width: 0px;
+        height: calc(100vh - 60px);
+        transition: all 0.3s ease-in;
+        overflow: hidden;
+        background-color: rgb(0 15 53 / 98%) !important;
+    }
+
+    .ns_navbar_elements.ns_navbar_active {
+        width: 270px;
+    }
+
+    .ns_navbar_elements ul {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .ns_navbar_elements ul li {
+        margin-right: unset;
+        margin-top: 22px;
+    }
+
+    .ns_navbar_elements div {
+        flex-direction: column;
+        align-content: center;
+    }
+}
+
+.ns_navbar_parent_content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+@media only screen and (min-width: 991px) {
+    .ns_nav_second_item .dropdown-menu {
+        margin-top: -20% !important;
+        margin-left: 100%;
+    }
+
+    .ns_navbar_content {
+        width: 100%;
+    }
+}
+
+.ns_navbar_first_level_item a {
+    color: #fff;
+}
+
+.ns_navbar_second_level_item a {
+    color: #000 !important;
+}
+
+.ns_navbar_first_level_item {
+    color: #fff;
+}
+
+.ns_navbar_second_level_item {
+    color: #000 !important;
+}

package/src/components/NSHeader.tsx

@@ -0,0 +1,134 @@
+import React from "react";
+import Styles from "./NSHeader.module.css";
+import Nav from 'react-bootstrap/Nav';
+import Menu from '../assets/images/menu.svg';
+import Exit from '../assets/images/exit.svg';
+import NavDropdown from 'react-bootstrap/NavDropdown';
+import { NamirasoftAPILinkServer, FilterLinkRow } from 'namirasoft-api-link';
+
+interface IProps
+{
+    scope: string;
+    name: string;
+}
+
+interface IState
+{
+    filters: FilterLinkRow[];
+    selected: FilterLinkRow | null;
+    showNavbar: boolean;
+}
+
+export default class NSHeader extends React.Component<IProps, IState> {
+    constructor(props: IProps)
+    {
+        super(props);
+        this.state = {
+            filters: [],
+            selected: null,
+            showNavbar: false
+        };
+        this.hasChild = this.hasChild.bind(this);
+        this.onMenuItemToggled = this.onMenuItemToggled.bind(this);
+        this.render_menu = this.render_menu.bind(this);
+        this.render_menuItem = this.render_menuItem.bind(this);
+        this.handleShowNavbar = this.handleShowNavbar.bind(this);
+    }
+    override componentDidMount(): void
+    {
+        let server = new NamirasoftAPILinkServer(console.error);
+        server.filter.GetFilters(this.props.scope, this.props.name).then(filters =>
+        {
+            this.setState({ filters });
+        });
+    }
+    private onMenuItemToggled(checked: boolean, selected: FilterLinkRow)
+    {
+        if (checked)
+            this.setState({ selected });
+    }
+    private hasChild(id: number): boolean
+    {
+        return this.state.filters.filter(f => f.parent_id === id).length > 0;
+    }
+    handleShowNavbar(): void
+    {
+        this.setState({ showNavbar: !this.state.showNavbar });
+    }
+    override render()
+    {
+        return (
+            <nav className={Styles.ns_navbar}>
+                <div className={`${Styles.ns_navbar_parent_content} container`}>
+                    <img
+                        src="https://static.namirasoft.com/logo/account/base.png"
+                        alt="logo"
+                        width={48}
+                        height={48}
+                    />
+                    <div className={`${Styles.ns_navbar_content} gap-2 d-flex justify-content-between`} >
+                        <div className={`${Styles.ns_navbar_elements} ${this.state.showNavbar && Styles.ns_navbar_active}`}>
+                            {this.render_menu(0, null)}
+                        </div>
+                        <div className="d-flex justify-content-center align-items-center">
+                            <span className={`me-2 ${Styles.ns_navbar_usersname}`}>name</span>
+                            <img src={Exit}
+                                alt="exit"
+                                width={20}
+                                height={20}
+                            />
+                        </div>
+                        <div className={Styles.ns_navbar_menu_icon} onClick={this.handleShowNavbar}>
+                            <img
+                                src={Menu}
+                                alt="menu"
+                                width={19}
+                                height={17}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </nav>
+        );
+    }
+    private render_menu(level: number, parent_id: number | null)
+    {
+        let fs: FilterLinkRow[] = this.state.filters?.filter(f => f.parent_id === parent_id);
+        return (
+            <Nav className="me-auto" >
+                {(fs?.map(f => this.render_menuItem(level, f)))}
+            </Nav>
+        );
+    }
+    private render_menuItem(level: number, filter: FilterLinkRow)
+    {
+        if (this.hasChild(filter.id))
+        {
+            let sub_menus = <></>;
+            if (level === 0)
+                if (this.state.selected)
+                {
+                    sub_menus =
+                        <div
+                            id={`dropdown_items${filter.id}`}>
+                            {this.render_menu(1, this.state.selected.id)}
+                        </div >
+                }
+            return (<>
+                <NavDropdown
+                    onToggle={(checked) => this.onMenuItemToggled(checked, filter)}
+                    className={level === 0 ? Styles.ns_navbar_first_level_item : Styles.ns_navbar_second_level_item}
+                    title={filter.name}
+                    id={`dropdown_parent${filter.id}`}>
+                    {sub_menus}
+                </NavDropdown >
+            </>
+            );
+        } else
+        {
+            return (
+                <Nav.Link className={level === 0 ? Styles.ns_navbar_first_level_item : Styles.ns_navbar_second_level_item} href={filter.link?.url}>{filter.name}li</Nav.Link>
+            );
+        }
+    }
+}

package/src/components/NSInputDate.module.css

@@ -0,0 +1,32 @@
+.ns_parent_input{
+    display: flex;
+    flex-direction: column;
+    width: 326px;
+    color: #fff;
+    position: relative;
+    max-width: 100%;
+}
+.ns_input{
+    border-radius: 8px;
+    padding: 10px 12px;
+    font-size: 16px;
+    font-weight: 400;
+}
+.ns_input_icon{
+    position: absolute;
+    right: 20px;
+    top: 51%;
+}
+.ns_input_title {
+    font-size: 16px;
+    font-weight: 400;
+}
+input[type="date"]::-webkit-calendar-picker-indicator {
+    display: block;
+    background: url(../assets/images/icon-input-date.svg) no-repeat;
+    width: 24px;
+    height: 24px;
+    position: relative;
+    top: 3px;
+    left: 4px;
+}

package/src/components/NSInputDate.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import Styles from "./NSInputDate.module.css";
+
+interface IProps
+{
+    title: string;
+}
+
+interface IState
+{
+    value: string;
+}
+
+export default class NSInputDate extends React.Component<IProps, IState> {
+    constructor(props: IProps)
+    {
+        super(props);
+        this.state = {
+            value: "",
+        };
+        this.setValue = this.setValue.bind(this);
+        this.getValue = this.getValue.bind(this);
+        this.setDefaultValue = this.setDefaultValue.bind(this);
+    }
+    setValue(e: React.ChangeEvent<HTMLInputElement>): void
+    {
+        this.setState({ value: e.target.value });
+    }
+    setDefaultValue(value: string): void
+    {
+        this.setState({ value });
+    }
+    getValue(): string
+    {
+        return this.state.value;
+    }
+    override render()
+    {
+        return (
+            <div className={`${Styles.ns_parent_input} p-2`}>
+                <span className={Styles.ns_input_title}>{this.props.title}</span>
+                <input
+                    value={this.state.value}
+                    onChange={this.setValue}
+                    type="date"
+                    className={Styles.ns_input}
+                    placeholder="YYYY/MM/DD"
+                />
+            </div>
+        );
+    }
+}
+
+

package/src/components/NSInputDuration.module.css

@@ -0,0 +1,26 @@
+.ns_input_parent {
+    display: flex;
+    flex-direction: column;
+    width: 326px;
+    color: #fff;
+    position: relative;
+    max-width: 100%;
+}
+
+.ns_input {
+    border-radius: 8px;
+    padding: 10px 12px;
+    font-size: 16px;
+    font-weight: 400;
+}
+
+.ns_input_icon {
+    position: absolute;
+    right: 20px;
+    top: 51%;
+}
+
+.ns_input_title {
+    font-size: 16px;
+    font-weight: 400;
+}

package/src/components/NSInputDuration.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import Styles from "./NSInputDuration.module.css";
+import IconInputDuration from '../assets/images/icon-input-duration.svg';
+
+interface IProps
+{
+    title: string;
+}
+
+interface IState
+{
+    value: string;
+}
+
+export default class NSInputDuration extends React.Component<IProps, IState> {
+    constructor(props: IProps)
+    {
+        super(props);
+        this.state = {
+            value: "",
+        };
+        this.setValue = this.setValue.bind(this);
+        this.getValue = this.getValue.bind(this);
+        this.setDefaultValue = this.setDefaultValue.bind(this);
+    }
+    setValue(e: React.ChangeEvent<HTMLInputElement>): void
+    {
+        this.setState({ value: e.target.value });
+    }
+    setDefaultValue(value: string): void
+    {
+        this.setState({ value });
+    }
+    getValue(): string
+    {
+        return this.state.value;
+    }
+    override render()
+    {
+        return (
+            <div className={`${Styles.ns_input_parent} p-2`}>
+                <span className={Styles.ns_input_title}>{this.props.title}</span>
+                <img
+                    className={Styles.ns_input_icon}
+                    src={IconInputDuration}
+                    alt="icon"
+                    width={24}
+                    height={24}
+                />
+                <input
+                    value={this.state.value}
+                    onChange={this.setValue}
+                    type="time"
+                    className={Styles.ns_input}
+                    placeholder="21:44:06"
+                    step="2"
+                />
+            </div>
+        );
+    }
+}
+
+