first commit

open.warehouse.web.warehouse/src/App.css

@@ -0,0 +1,44 @@
+#root {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 2rem;
+    text-align: center;
+}
+
+.logo {
+    height: 6em;
+    padding: 1.5em;
+    will-change: filter;
+    transition: filter 300ms;
+}
+
+.logo:hover {
+    filter: drop-shadow(0 0 2em #646cffaa);
+}
+
+.logo.react:hover {
+    filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    a:nth-of-type(2) .logo {
+        animation: logo-spin infinite 20s linear;
+    }
+}
+
+.card {
+    padding: 2em;
+}
+
+.read-the-docs {
+    color: #888;
+}

open.warehouse.web.warehouse/src/App.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';
+import LoginForm from './Auth/Login';
+import MainLayout from './Layout/MainLayout';
+
+const App: React.FC = () => {
+    return (
+        <Router>
+            <Routes>
+                <Route path="/login" element={<LoginForm />}/>
+                <Route path="/*" element={<MainLayout/>} />
+            </Routes>
+        </Router>
+    );
+};
+
+export default App;

open.warehouse.web.warehouse/src/Auth/AccountSetting.tsx

@@ -0,0 +1,279 @@
+import React, { useState, useEffect } from "react";
+import { Api } from "../client/auth_client";
+import {UnAuthorized} from './Auth.tsx'
+import PhoneInput from 'react-phone-input-2';
+import 'react-phone-input-2/lib/style.css';
+import './AccountSettings.css';
+import {useNavigate} from "react-router-dom";
+
+const AccountSettings: React.FC = () => {
+    const [email, setEmail] = useState<string | null>();
+    const [dialCodeAndPhoneNumber, setDialCodeAndPhoneNumber] = useState<string>("");
+    const [dialCode, setDialCode] = useState<string | null>();
+    const [phoneNumber, setPhoneNumber] = useState<string |null>();
+    const [currentPassword, setCurrentPassword] = useState("");
+    const [newPassword, setNewPassword] = useState("");
+    const [confirmPassword, setConfirmPassword] = useState("");
+    const [problem, setProblem] = useState<string | null>(null);
+    const [view, setView] = useState<"profile" | "password">("profile");
+    const [isOk, setOk] = useState<boolean>(false);
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        const getUserDetail = async () => {
+            const token = localStorage.getItem("authToken");
+            const client = new Api({
+                baseUrl: "/auth",
+                securityWorker: () => ({ headers: { Authorization: `Bearer ${token}` } }),
+            });
+
+            const result = await client.account.getMyDetailCreate();
+
+            if (result?.data) {
+                const dialCode = result.data.dialCode ?? "";
+                const phoneNumber = result.data.phone ?? "";
+
+                setDialCode(dialCode);
+                setPhoneNumber(phoneNumber);
+                setDialCodeAndPhoneNumber(dialCode + phoneNumber);
+                setEmail(result.data.email);
+            }
+            setOk(true);
+        };
+
+        getUserDetail().then();
+    }, []);
+
+    const handleSaveEmailChanges = async () => {
+        try {
+            setProblem(null);
+
+            const token = localStorage.getItem("authToken");
+            const client = new Api({
+                baseUrl: "/auth",
+                securityWorker: () => ({ headers: { Authorization: `Bearer ${token}` } }),
+            });
+
+            const emailResponse = await client.account.updateUserEmailCreate({ newEmail: email });
+
+            if(emailResponse.status === 401) await UnAuthorized(navigate)
+
+            if (!emailResponse.data.updateSuccess) {
+                setProblem("Failed to update email: " + JSON.stringify(emailResponse.data.problems));
+                return;
+            }
+
+            alert("Email changes saved successfully!");
+        } catch (error) {
+            setProblem("An error occurred while saving email changes. Please try again.");
+            console.error("Error saving email changes", error);
+        }
+    };
+
+    const handleSavePhoneChanges = async () => {
+        try {
+            setProblem(null);
+
+            const token = localStorage.getItem("authToken");
+            const client = new Api({
+                baseUrl: "/auth",
+                securityWorker: () => ({ headers: { Authorization: `Bearer ${token}` } }),
+            });
+
+            const phoneResponse = await client.account.updatePhoneNumberCreate({
+                prefix: dialCode,
+                number: phoneNumber,
+            });
+
+            if(phoneResponse.status === 401) await UnAuthorized(navigate)
+
+            if (!phoneResponse.data.updateSuccess) {
+                setProblem("Failed to update phone: " + JSON.stringify(phoneResponse.data.problems));
+                return;
+            }
+
+            alert("Phone changes saved successfully!");
+        } catch (error) {
+            setProblem("An error occurred while saving phone changes. Please try again.");
+            console.error("Error saving phone changes", error);
+        }
+    };
+
+    const handleChangePassword = async () => {
+        const token = localStorage.getItem("authToken");
+        const client = new Api({
+            baseUrl: "/auth",
+            securityWorker: () => ({ headers: { Authorization: `Bearer ${token}` } }),
+        });
+
+        try {
+            setProblem(null);
+
+            if (newPassword && newPassword === confirmPassword) {
+                const passwordResponse = await client.account.changePasswordCreate({
+                    password: currentPassword,
+                    newPassword1: newPassword,
+                    newPassword2: confirmPassword,
+                    logOutAllSession: false
+                });
+
+                setCurrentPassword("")
+                setConfirmPassword("")
+                setNewPassword("")
+
+                if(passwordResponse.status === 401) await UnAuthorized(navigate)
+
+                if (!passwordResponse.data.isSuccess) {
+                    setProblem("Failed to change password: " + passwordResponse.data.mess);
+                    return;
+                }
+
+                alert("Password changed successfully!");
+            } else if (newPassword !== confirmPassword) {
+                setProblem("New password and confirm password do not match.");
+            }
+        } catch (error) {
+            setProblem("An error occurred while changing the password. Please try again.");
+            console.error("Error changing password", error);
+        }
+    };
+
+    if (!isOk) {
+        return (
+            <div className="loading-screen">
+                <div className="spinner">
+                    <div className="lds-ring">
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="settings-container">
+            <div className="settings-sidebar">
+                <h2>Account Settings</h2>
+
+                <div className="toggle-buttons">
+                    <button
+                        className={`btn ${view === "profile" ? "btn-selected" : ""}`}
+                        onClick={() => setView("profile")}
+                    >
+                        Profile Changes
+                    </button>
+                    <button
+                        className={`btn ${view === "password" ? "btn-selected" : ""}`}
+                        onClick={() => setView("password")}
+                    >
+                        Password Changes
+                    </button>
+                </div>
+            </div>
+
+            <div className="settings-content">
+                <div className="toggle-form-container">
+                    <div className="divider-line-vertical"></div>
+
+                    {view === "profile" && (
+                        <div className="settings-section">
+                            <h4>Profile Information</h4>
+
+                            <div className="form-group">
+                                <label>Email</label>
+                                <div className="input-button-container">
+                                    <input
+                                        type="email"
+                                        value={email ?? ""}
+                                        onChange={(e) => setEmail(e.target.value)}
+                                        className="form-control compact-input"
+                                    />
+                                    <button className="btn btn-primary" onClick={handleSaveEmailChanges}>
+                                        Save Email Changes
+                                    </button>
+                                </div>
+                            </div>
+
+
+                            <div className="form-group">
+                                <label>Phone</label>
+                                <PhoneInput
+                                    country={'pl'}
+                                    value={dialCodeAndPhoneNumber}
+                                    onChange={(phone, data) => {
+                                        let lenOfDialCode : number = 0;
+                                        if ("dialCode" in data) {
+                                            lenOfDialCode = data.dialCode.length;
+                                            setDialCode(data.dialCode);
+                                        }
+
+                                        const phoneNumber = phone.slice(lenOfDialCode, phone.length);
+
+                                        setPhoneNumber(phoneNumber);
+
+                                        setDialCodeAndPhoneNumber(phone)
+
+                                    }}
+                                    inputProps={{
+                                        name: 'phone',
+                                        required: true,
+                                    }}
+                                />
+                                <button className="btn btn-primary" onClick={handleSavePhoneChanges}>
+                                    Save Phone Changes
+                                </button>
+                            </div>
+
+                        </div>
+                        )}
+
+                    {view === "password" && (
+                        <div className="settings-section">
+                            <h4>Change Password</h4>
+                            <div className="form-group">
+                                <label>Current Password</label>
+                                <input
+                                    type="password"
+                                    value={currentPassword}
+                                    onChange={(e) => setCurrentPassword(e.target.value)}
+                                    className="form-control compact-input"
+                                />
+                            </div>
+
+                            <div className="form-group">
+                                <label>New Password</label>
+                                <input
+                                    type="password"
+                                    value={newPassword}
+                                    onChange={(e) => setNewPassword(e.target.value)}
+                                            className="form-control compact-input"
+                                        />
+                                    </div>
+
+                                    <div className="form-group">
+                                        <label>Confirm New Password</label>
+                                        <input
+                                            type="password"
+                                            value={confirmPassword}
+                                            onChange={(e) => setConfirmPassword(e.target.value)}
+                                            className="form-control compact-input"
+                                        />
+                                    </div>
+
+                                    <button className="btn btn-primary compact-button" onClick={handleChangePassword}>
+                                        Change Password
+                                    </button>
+
+                                    {problem && <div className="problem-field">{problem}</div>}
+                                </div>
+                            )}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default AccountSettings;

open.warehouse.web.warehouse/src/Auth/AccountSettings.css

@@ -0,0 +1,129 @@
+.settings-container {
+    display: flex;
+    max-width: 100%;
+    margin: 20px;
+    padding: 0;
+    color: #edf2f7;
+    align-items: flex-start;
+    border-radius: 8px;
+}
+
+.settings-sidebar {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    min-width: 250px;
+    padding: 20px;
+}
+
+.toggle-buttons {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-top: 20px;
+    width: 100%;
+}
+
+.btn {
+    background-color: #2d3748;
+    color: #edf2f7;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    width: 100%;
+    max-width: 400px;
+    text-align: center;
+}
+
+.btn:hover {
+    background-color: #4a5568;
+}
+
+.btn-selected {
+    background-color: #3182ce;
+}
+
+.btn-selected:hover {
+    background-color: #5e97d0;
+}
+
+.settings-content {
+    flex: 1;
+    padding: 20px;
+    max-width: 800px;
+    margin-left: 20px;
+    display: flex;
+}
+
+.toggle-form-container {
+    display: flex;
+    flex: 1;
+}
+
+.divider-line-vertical {
+    width: 2px;
+    height: auto;
+    background-color: #4a5568;
+    margin: 0 20px;
+}
+
+.settings-section {
+    width: 100%;
+    margin-bottom: 30px;
+}
+
+.settings-section h4 {
+    margin-bottom: 15px;
+    color: #63b3ed;
+}
+
+.form-group {
+    margin-bottom: 15px;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: bold;
+}
+
+.form-control {
+    padding: 10px;
+    border: 1px solid #4a5568;
+    border-radius: 5px;
+    background-color: #2d3748;
+    color: #edf2f7;
+}
+
+.compact-input {
+    max-width: 400px;
+    width: 100%;
+}
+
+.form-control:focus {
+    border-color: #63b3ed;
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(99, 179, 237, 0.5);
+}
+
+.compact-button {
+    max-width: 400px;
+    width: 100%;
+}
+
+.btn-primary {
+    background-color: #3182ce;
+    border-color: #3182ce;
+    color: #edf2f7;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    margin-top: 20px;
+}
+
+.btn-primary:hover {
+    background-color: #63b3ed;
+    border-color: #63b3ed;
+}

open.warehouse.web.warehouse/src/Auth/Auth.tsx

@@ -0,0 +1,77 @@
+import {createRemoteJWKSet, jwtVerify} from 'jose';
+import {Api as Auth} from '../client/auth_client';
+import {useNavigate} from "react-router-dom";
+
+export interface TokenPayload {
+    unique_name: string;
+    exp: number;
+    [key: string]: any;
+}
+
+export const validateToken = async (token: string): Promise<TokenPayload | null> => {
+    try {
+        const JWKS = createRemoteJWKSet(
+            new URL('auth/.well-known/jwks', window.location.origin)
+        );
+        const { payload } = await jwtVerify(token, JWKS);
+        const tokenPayload = payload as TokenPayload;
+        const currentTime = Math.floor(Date.now() / 1000);
+
+        if (tokenPayload.exp && tokenPayload.exp > currentTime) {
+            return tokenPayload;
+        } else {
+            return null;
+        }
+    } catch (error) {
+        console.error('Token validation failed', error);
+        return null;
+    }
+};
+
+export const handleLogout = async (navigate: ReturnType<typeof useNavigate>) => {
+    const token = localStorage.getItem('authToken');
+    if (token) {
+        const client = new Auth({
+            baseUrl: 'auth',
+            securityWorker: () => ({ headers: { Authorization: `Bearer ${token}` } }),
+        });
+
+        try {
+            const result = await client.logOut.logOutList();
+            if (result?.data?.logOutSuccess) {
+                localStorage.removeItem('authToken');
+                navigate('/login');
+            }
+        } catch (error) {
+            console.error('Logout failed', error);
+        }
+    } else {
+        navigate('/login');
+    }
+};
+
+export const GetUserPrivileges = async (navigate: ReturnType<typeof useNavigate>) => {
+    const token = localStorage.getItem('authToken');
+    if (token) {
+        const client = new Auth({
+            baseUrl: 'auth',
+            securityWorker: () => ({ headers: { Authorization: `Bearer ${token}` } }),
+        });
+
+        try {
+            const result = await client.privilege.getUserPrivilegeCreate();
+            return result.data;
+        } catch (error) {
+            localStorage.removeItem('authToken');
+            navigate('/login');
+        }
+    } else {
+        navigate('/login');
+    }
+};
+
+export const UnAuthorized = async (navigate: ReturnType<typeof useNavigate>) => {
+    localStorage.removeItem('authToken');
+    navigate('/login');
+};
+

open.warehouse.web.warehouse/src/Auth/Login.css

@@ -0,0 +1,58 @@
+body {
+    margin: 0;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background-color: #2d3748; /* Modern dark background */
+    color: #edf2f7; /* Light text color for readability */
+}
+
+.login-container {
+    max-width: 400px;
+    margin: 0 auto;
+    background-color: #1a202c; /* Dark background for login card */
+    border-radius: 8px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
+    padding: 20px;
+    color: #edf2f7;
+}
+
+.card {
+    background-color: #1a202c;
+    border: none;
+    color: #edf2f7;
+}
+
+.card .form-label {
+    color: #a0aec0; /* Subtle color for form labels */
+}
+
+.form-control {
+    background-color: #2d3748;
+    color: #edf2f7;
+    border: 1px solid #4a5568;
+    border-radius: 5px;
+}
+
+.form-control:focus {
+    border-color: #63b3ed;
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(99, 179, 237, 0.5);
+}
+
+.btn-primary {
+    background-color: #3182ce;
+    border-color: #3182ce;
+    color: #edf2f7;
+    border-radius: 5px;
+}
+
+.btn-primary:hover {
+    background-color: #63b3ed;
+    border-color: #63b3ed;
+}
+
+.text-danger {
+    color: #e53e3e; /* Bright red for error messages */
+    font-size: 0.9rem;
+    margin-bottom: 10px;
+    text-align: center;
+}

open.warehouse.web.warehouse/src/Auth/Login.tsx

@@ -0,0 +1,89 @@
+import React, { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Api as auth } from '../client/auth_client.ts';
+import '../LoadingScreen.css';
+import './Login.css'
+
+const LoginForm: React.FC = () => {
+    const [login, setLogin] = useState('');
+    const [password, setPassword] = useState('');
+    const [problem, setProblem] = useState<string | null>(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const navigate = useNavigate();
+    const client = new auth({ baseUrl: 'auth' });
+
+    useEffect(() => {
+        document.title = 'Login - My App';
+    }, []);
+
+    const handleEnterKey = (e: React.KeyboardEvent) => {
+        if (e.key === 'Enter') {
+            handleLogin();
+        }
+    };
+
+    const handleLogin = async () => {
+        setIsLoading(true);
+        try {
+            const response = await client.login.loginCreate({ login: login, pass: password });
+
+            if (response.status === 200 && response.data && response.data.token) {
+                const token = response.data.token;
+                localStorage.setItem('authToken', token);
+                navigate('/');
+            }
+        } catch (error) {
+            setProblem('Login failed. Please check your credentials.');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    if (isLoading) {
+        return (
+            <div className="loading-screen">
+                <div className="spinner">
+                    <div className="lds-ring"><div></div><div></div><div></div><div></div></div>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="d-flex justify-content-center align-items-center vh-100">
+            <div className="">
+                <div className="card p-4 shadow-lg login-container">
+                    <h3 className="text-center mb-4">Login</h3>
+                    <div className="text-danger">{problem}</div>
+                    <div className="mb-3">
+                        <label htmlFor="username" className="form-label">Username</label>
+                        <input
+                            id="username"
+                            type="text"
+                            onKeyDown={handleEnterKey}
+                            value={login}
+                            onChange={(e) => setLogin(e.target.value)}
+                            className="form-control"
+                            required
+                        />
+                    </div>
+                    <div className="mb-3">
+                        <label htmlFor="password" className="form-label">Password</label>
+                        <input
+                            id="password"
+                            type="password"
+                            onKeyDown={handleEnterKey}
+                            value={password}
+                            onChange={(e) => setPassword(e.target.value)}
+                            className="form-control"
+                            required
+                        />
+                    </div>
+                    <button className="btn btn-primary btn-lg btn-block w-100" onClick={handleLogin}>Login</button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default LoginForm;

open.warehouse.web.warehouse/src/Auth/react-phone-input-2-custom.css

@@ -0,0 +1,330 @@
+.react-tel-input {
+    font-family: 'Roboto', sans-serif;
+    font-size: 15px;
+    position: relative;
+    width: 100%;
+}
+
+.react-tel-input :disabled {
+    cursor: not-allowed;
+}
+
+.react-tel-input .flag {
+    width: 16px;
+    height: 11px;
+}
+
+.react-tel-input .form-control {
+    position: relative;
+    font-size: 14px;
+    letter-spacing: 0.01rem;
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+    padding-left: 48px;
+    margin-left: 0;
+    background: #ffffff;
+    border: 1px solid #cacaca;
+    border-radius: 5px;
+    line-height: 25px;
+    height: 35px;
+    width: 300px;
+    outline: none;
+}
+
+.react-tel-input .form-control.invalid-number {
+    border: 1px solid #d79f9f;
+    background-color: #faf0f0;
+    border-left-color: #cacaca;
+}
+
+.react-tel-input .form-control.invalid-number:focus {
+    border: 1px solid #d79f9f;
+    border-left-color: #cacaca;
+    background-color: #faf0f0;
+}
+
+.react-tel-input .flag-dropdown {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    padding: 0;
+    background-color: #f5f5f5;
+    border: 1px solid #cacaca;
+    border-radius: 3px 0 0 3px;
+}
+
+.react-tel-input .flag-dropdown:hover,
+.react-tel-input .flag-dropdown:focus {
+    cursor: pointer;
+}
+
+.react-tel-input .flag-dropdown.invalid-number {
+    border-color: #d79f9f;
+}
+
+.react-tel-input .flag-dropdown.open {
+    z-index: 2;
+    background: #ffffff;
+    border-radius: 3px 0 0 0;
+}
+
+.react-tel-input .flag-dropdown.open .selected-flag {
+    background: #ffffff;
+    border-radius: 3px 0 0 0;
+}
+
+.react-tel-input input[disabled] + .flag-dropdown:hover {
+    cursor: default;
+}
+
+.react-tel-input input[disabled] + .flag-dropdown:hover .selected-flag {
+    background-color: transparent;
+}
+
+.react-tel-input .selected-flag {
+    outline: none;
+    position: relative;
+    width: 38px;
+    height: 100%;
+    padding: 0 0 0 8px;
+    border-radius: 3px 0 0 3px;
+}
+
+.react-tel-input .selected-flag:hover,
+.react-tel-input .selected-flag:focus {
+    background-color: #ffffff;
+}
+
+.react-tel-input .selected-flag .flag {
+    position: absolute;
+    top: 50%;
+    margin-top: -5px;
+}
+
+.react-tel-input .selected-flag .arrow {
+    position: relative;
+    top: 50%;
+    margin-top: -2px;
+    left: 20px;
+    width: 0;
+    height: 0;
+    border-left: 3px solid transparent;
+    border-right: 3px solid transparent;
+    border-top: 4px solid #555;
+}
+
+.react-tel-input .selected-flag .arrow.up {
+    border-top: none;
+    border-bottom: 4px solid #555;
+}
+
+.react-tel-input .country-list {
+    outline: none;
+    z-index: 1;
+    list-style: none;
+    position: absolute;
+    padding: 0;
+    margin: 10px 0 10px -1px;
+    box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.35);
+    background-color: #ffffff;
+    width: 300px;
+    max-height: 200px;
+    overflow-y: scroll;
+    border-radius: 0 0 3px 3px;
+}
+
+.react-tel-input .country-list .flag {
+    display: inline-block;
+}
+
+.react-tel-input .country-list .divider {
+    padding-bottom: 5px;
+    margin-bottom: 5px;
+    border-bottom: 1px solid #cccccc;
+}
+
+.react-tel-input .country-list .country {
+    padding: 7px 9px;
+}
+
+.react-tel-input .country-list .country .dial-code {
+    color: #6b6b6b;
+}
+
+.react-tel-input .country-list .country:hover {
+    background-color: #f1f1f1;
+}
+
+.react-tel-input .country-list .country.highlight {
+    background-color: #f1f1f1;
+}
+
+.react-tel-input .country-list .flag {
+    margin-right: 7px;
+    margin-top: 2px;
+}
+
+.react-tel-input .country-list .country-name {
+    margin-right: 6px;
+}
+
+.react-tel-input .country-list .search {
+    position: sticky;
+    top: 0;
+    background-color: #ffffff;
+    padding: 10px 0 6px 10px;
+}
+
+.react-tel-input .country-list .search-emoji {
+    font-size: 15px;
+}
+
+.react-tel-input .country-list .search-box {
+    border: 1px solid #cacaca;
+    border-radius: 3px;
+    font-size: 15px;
+    line-height: 15px;
+    margin-left: 6px;
+    padding: 3px 8px 5px;
+    outline: none;
+}
+
+.react-tel-input .country-list .no-entries-message {
+    padding: 7px 10px 11px;
+    opacity: 0.7;
+}
+
+.react-tel-input .invalid-number-message {
+    position: absolute;
+    z-index: 1;
+    font-size: 13px;
+    left: 46px;
+    top: -8px;
+    background: #ffffff;
+    padding: 0 2px;
+    color: #de0000;
+}
+
+.react-tel-input .special-label {
+    display: none;
+    position: absolute;
+    z-index: 1;
+    font-size: 13px;
+    left: 46px;
+    top: -8px;
+    background: #ffffff;
+    padding: 0 2px;
+    white-space: nowrap;
+}
+
+.react-tel-input * {
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+}
+
+.react-tel-input .hide {
+    display: none;
+}
+
+.react-tel-input .v-hide {
+    visibility: hidden;
+}
+
+.react-tel-input {
+    font-family: 'Roboto', sans-serif;
+    font-size: 15px;
+    position: relative;
+    width: 100%;
+}
+
+.react-tel-input :disabled {
+    cursor: not-allowed;
+}
+
+.react-tel-input .form-control {
+    border: 1px solid #4a5568;
+    border-radius: 5px;
+    background-color: #2d3748;
+    color: #edf2f7;
+    max-width: 400px;
+    width: 100%;
+}
+
+.react-tel-input .form-control:focus {
+    border-color: #63b3ed;
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(99, 179, 237, 0.5);
+}
+
+.react-tel-input .flag-dropdown {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    padding: 0;
+    background-color: #2d3748;
+    border: 1px solid #4a5568;
+    border-radius: 5px 0 0 5px;
+}
+
+.react-tel-input .flag-dropdown:hover, .react-tel-input .flag-dropdown:focus {
+    cursor: pointer;
+    background-color: #4a5568;
+}
+
+.react-tel-input .selected-flag {
+    outline: none;
+    position: relative;
+    width: 38px;
+    height: 100%;
+    padding: 0 0 0 8px;
+    border-radius: 5px 0 0 5px;
+    background-color: #2d3748;
+}
+
+.react-tel-input .selected-flag:hover, .react-tel-input .selected-flag:focus {
+    background-color: #4a5568;
+}
+
+.react-tel-input .country-list {
+    outline: none;
+    z-index: 1;
+    list-style: none;
+    position: absolute;
+    padding: 0;
+    margin: 10px 0 10px -1px;
+    box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.35);
+    background-color: #2d3748;
+    width: 300px;
+    max-height: 200px;
+    overflow-y: scroll;
+    border-radius: 0 0 5px 5px;
+    color: #edf2f7;
+}
+
+.react-tel-input .country-list .country:hover {
+    background-color: #4a5568;
+}
+
+.react-tel-input .country-list .search-box {
+    border: 1px solid #4a5568;
+    border-radius: 5px;
+    font-size: 15px;
+    line-height: 15px;
+    padding: 3px 8px 5px;
+    outline: none;
+    background-color: #2d3748;
+    color: #edf2f7;
+}
+
+.react-tel-input .country-list .search-box:focus {
+    border-color: #63b3ed;
+    box-shadow: 0 0 0 2px rgba(99, 179, 237, 0.5);
+}
+
+.react-tel-input .country-list .country.highlight {
+    background-color: #343c4b;
+}
+
+.react-tel-input .flag-dropdown.open .selected-flag {
+    background: #404752;
+}

open.warehouse.web.warehouse/src/Home.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+interface TokenPayload {
+    unique_name: string;
+    exp: number;
+    [key: string]: any;
+}
+
+interface HomeProps {
+    tokenPayload: TokenPayload | null;
+}
+
+const Home: React.FC<HomeProps> = ({ tokenPayload }) => {
+    return (
+        <div className="home">
+            <h2>Welcome, {tokenPayload?.unique_name ? tokenPayload.unique_name : 'Unknown'}</h2>
+            <p>
+                Token expires at: {tokenPayload?.exp ? new Date(tokenPayload.exp * 1000).toLocaleString() : 'Unknown'}
+            </p>
+        </div>
+    );
+};
+
+export default Home;

open.warehouse.web.warehouse/src/Layout/AccountDropdown.module.css

@@ -0,0 +1,75 @@
+.accountMenu {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+.profileIcon {
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
+    overflow: hidden;
+    border-radius: 50%;
+}
+
+.profileIcon img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.dropdownMenu {
+    position: absolute;
+    top: 60px;
+    right: 0;
+    background-color: #1a202c;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    padding: 16px;
+    z-index: 100;
+    width: 250px;
+}
+
+.profileInfo {
+    text-align: center;
+    margin-bottom: 16px;
+}
+
+.profileInfo img {
+    width: 60px;
+    height: 60px;
+    object-fit: cover;
+    border-radius: 50%;
+    margin-bottom: 8px;
+}
+
+.profileInfo h6 {
+    margin: 0;
+    color: #edf2f7;
+}
+
+.profileInfo small {
+    color: #a0aec0;
+}
+
+.dropdownList {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    color: #edf2f7;
+}
+
+.dropdownList li {
+    padding: 8px 0;
+    cursor: pointer;
+    font-size: 0.9rem;
+}
+
+.dropdownList li:hover {
+    background-color: #2d3748;
+}
+
+.logout {
+    color: #e53e3e;
+    font-weight: bold;
+}

open.warehouse.web.warehouse/src/Layout/AccountDropdown.tsx

@@ -0,0 +1,89 @@
+import React, { useRef, useEffect } from "react";
+import styles from "./AccountDropdown.module.css";
+import {handleLogout} from '../Auth/Auth'
+import {useNavigate} from "react-router-dom";
+
+interface TokenPayload {
+    unique_name: string;
+    exp: number;
+    [key: string]: any;
+}
+
+interface AccountDropdownProps {
+    tokenPayload: TokenPayload | null;
+    privilegeList: string[] | undefined;
+}
+
+const AccountDropdown: React.FC<AccountDropdownProps> = ({
+                                                             tokenPayload,
+                                                             privilegeList,
+                                                         }) => {
+    const dropdownRef = useRef<HTMLDivElement>(null);
+    const [isOpen, setIsOpen] = React.useState(false);
+    const navigate = useNavigate();
+
+    const toggleDropdown = () => {
+        setIsOpen((prev) => !prev);
+    };
+
+    const handleClickOutside = (event: MouseEvent) => {
+        if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+            setIsOpen(false);
+        }
+    };
+
+    // @ts-ignore
+    const havePrivilege = (privilege:string): boolean  => {
+        if (!privilegeList) return false;
+
+        return privilege in privilegeList || "admin" in privilegeList;
+
+    }
+
+    useEffect(() => {
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, []);
+
+    return (
+        <div className={styles.accountMenu} ref={dropdownRef}>
+            <div className={styles.profileIcon} onClick={toggleDropdown}>
+                <img
+                    src="https://via.placeholder.com/40" // Replace with a real profile image
+                    alt="Profile"
+                    className="rounded-circle"
+                />
+            </div>
+            {isOpen && (
+                <div className={styles.dropdownMenu}>
+                    <div className={styles.profileInfo}>
+                        <img
+                            src="https://via.placeholder.com/60" // Replace with a real profile image
+                            alt="Profile"
+                            className="rounded-circle mb-2"
+                        />
+                        <div>
+                            <h6>{tokenPayload?.unique_name || "Guest"}</h6>
+                            {tokenPayload && (
+                                <small>
+                                    Token expires at:{" "}
+                                    {new Date(tokenPayload.exp * 1000).toLocaleString()}
+                                </small>
+                            )}
+                        </div>
+                    </div>
+                    <ul className={styles.dropdownList}>
+                        <li onClick={() => navigate('/accountSettings')}>Setting</li>
+                        <li className={styles.logout} onClick={() => handleLogout(navigate)}>
+                            Logout
+                        </li>
+                    </ul>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default AccountDropdown;

open.warehouse.web.warehouse/src/Layout/MainLayout.css

@@ -0,0 +1,105 @@
+.page {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+main {
+    flex: 1;
+}
+
+.main-content {
+    background-color: #2d3748;
+    color: #edf2f7;
+}
+
+.sidebar {
+    background-image: linear-gradient(180deg, #1a202c 0%, #2d3748 112%);
+    color: #cbd5e0;
+}
+
+.top-row {
+    background-color: #1a202c;
+    border-bottom: 1px solid #3e475e;
+    justify-content: flex-end;
+    height: 3.5rem;
+    display: flex;
+    align-items: center;
+}
+
+.top-row a, .top-row .btn-link {
+    white-space: nowrap;
+    margin-left: 1.5rem;
+    text-decoration: none;
+    color: #63b3ed;
+}
+
+.top-row  a:hover, .top-row  .btn-link:hover {
+    text-decoration: underline;
+    color: #3182ce;
+}
+
+.top-row  a:first-child {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+@media (max-width: 640.98px) {
+    .top-row {
+        justify-content: space-between;
+    }
+
+    .top-row  a, .top-row  .btn-link {
+        margin-left: 0;
+    }
+}
+
+@media (min-width: 641px) {
+    .page {
+        flex-direction: row;
+    }
+
+    .sidebar {
+        width: 250px;
+        height: 100vh;
+        position: sticky;
+        top: 0;
+    }
+
+    .top-row {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+    }
+
+    .top-row.auth  a:first-child {
+        flex: 1;
+        text-align: right;
+        width: 0;
+    }
+
+    .top-row, article {
+        padding-left: 2rem !important;
+        padding-right: 1.5rem !important;
+    }
+}
+
+#blazor-error-ui {
+    background: #feb2b2;
+    bottom: 0;
+    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
+    display: none;
+    left: 0;
+    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
+    position: fixed;
+    width: 100%;
+    z-index: 1000;
+}
+
+#blazor-error-ui .dismiss {
+    cursor: pointer;
+    position: absolute;
+    right: 0.75rem;
+    top: 0.5rem;
+    color: #742a2a;
+}

open.warehouse.web.warehouse/src/Layout/MainLayout.tsx

@@ -0,0 +1,154 @@
+import React, { useEffect, useState } from "react";
+import NavLayout from "./NavLayout.tsx";
+import { Route, Routes, useNavigate } from "react-router-dom";
+import Home from "../Home.tsx";
+import './MainLayout.css';
+import { validateToken, GetUserPrivileges, TokenPayload, UnAuthorized } from '../Auth/Auth.tsx';
+import '../LoadingScreen.css'
+import AccountDropdown from "./AccountDropdown.tsx";
+import AccountSettings from "../Auth/AccountSetting.tsx";
+import { Api as Auth } from '../client/auth_client.ts';
+import '../Pages/NotFound.tsx';
+import NotFound from "../Pages/NotFound.tsx";
+import "../Pages/UserAccountList.tsx";
+import UserAccountList from "../Pages/UserAccountList.tsx";
+
+const MainLayout: React.FC = () => {
+    const [tokenPayload, setTokenPayload] = useState<TokenPayload | null>(null);
+    const [tokenExpiryTime, setTokenExpiryTime] = useState<number | null>(null);
+    const [isAuthenticating, setIsAuthenticating] = useState(true);
+    const [privilegesList, setPrivilegesList] = useState<string[]>();
+    const [isTokenRegenerating, setIsTokenRegenerating] = useState<boolean>(false);
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        const validateAndSetToken = async () => {
+            if (isTokenRegenerating) return;
+
+            const token = localStorage.getItem('authToken');
+            if (token) {
+                const payload = await validateToken(token);
+                if (payload) {
+                    setTokenPayload(payload);
+                    setTokenExpiryTime(payload.exp);
+                    setIsAuthenticating(false);
+                } else {
+                    localStorage.removeItem('authToken');
+                    navigate('/login');
+                }
+            } else {
+                navigate('/login');
+            }
+        };
+
+        const getUserPrivileges = async () => {
+            const privileges = await GetUserPrivileges(navigate);
+            setPrivilegesList(privileges);
+        };
+
+        getUserPrivileges().then();
+        validateAndSetToken().then();
+    }, [navigate, isTokenRegenerating]);
+
+    useEffect(() => {
+        if (tokenExpiryTime) {
+            const currentTime = Math.floor(Date.now() / 1000);
+            const timeUntilExpiry = tokenExpiryTime - currentTime;
+
+            if (timeUntilExpiry > 900) {
+                const timeoutId = setTimeout(() => {
+                    regenerateToken().then();
+                }, (timeUntilExpiry - 900) * 1000);
+                return () => clearTimeout(timeoutId);
+            } else {
+                regenerateToken().then();
+            }
+        }
+    }, [tokenExpiryTime]);
+
+    const regenerateToken = async () => {
+        if (isTokenRegenerating) return;
+
+        setIsTokenRegenerating(true);
+        const token = localStorage.getItem('authToken');
+        if (token) {
+            const client = new Auth({
+                baseUrl: 'auth',
+                securityWorker: () => ({ headers: { Authorization: `Bearer ${token}` } }),
+            });
+            try {
+                const responseToken = await client.regenerateToken.regenerateTokenList();
+                if (responseToken.status === 401) {
+                    await UnAuthorized(navigate);
+                } else if (responseToken.data.token) {
+                    const newToken = responseToken.data.token;
+                    localStorage.setItem('authToken', newToken);
+                    const newPayload = await validateToken(newToken);
+                    if (newPayload) {
+                        setTokenPayload(newPayload);
+                        setTokenExpiryTime(newPayload.exp);
+                    } else {
+                        await validateToken(newToken);
+                    }
+                }
+            } catch (error) {
+                console.error('Token regeneration failed', error);
+                localStorage.removeItem('authToken');
+                navigate('/login');
+            } finally {
+                setIsTokenRegenerating(false);
+            }
+        } else {
+            setIsTokenRegenerating(false);
+            navigate('/login');
+        }
+    };
+
+    if (isAuthenticating) {
+        return (
+            <div className="loading-screen">
+                <div className="spinner">
+                    <div className="lds-ring">
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                        <div></div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="page">
+            <div className="sidebar">
+                <NavLayout privilegeList={privilegesList} />
+            </div>
+
+            <main className="main-content">
+                <div className="top-row px-4">
+                    {tokenPayload && (
+                        <AccountDropdown
+                            tokenPayload={tokenPayload}
+                            privilegeList={privilegesList}
+                        />
+                    )}
+                </div>
+                <div className="content px-4">
+                    <Routes>
+                        <Route path="/" element={<Home tokenPayload={tokenPayload} />} />
+
+                        <Route
+                            path="/accountSettings/"
+                            element={<AccountSettings />}
+                        />
+                        <Route path="/accounts/" element={<UserAccountList />} />
+                        <Route path="/*" element={<NotFound />} />
+                    </Routes>
+                </div>
+            </main>
+        </div>
+    );
+};
+
+export default MainLayout;

open.warehouse.web.warehouse/src/Layout/NavLayout.module.css

@@ -0,0 +1,127 @@
+.navbarToggler {
+    appearance: none;
+    cursor: pointer;
+    width: 3.5rem;
+    height: 2.5rem;
+    color: white;
+    position: absolute;
+    top: 0.5rem;
+    right: 1rem;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
+}
+
+.navbarToggler:checked {
+    background-color: rgba(255, 255, 255, 0.5);
+}
+
+.topRow {
+    height: 3.5rem;
+    background-color: #222834;
+    cursor: pointer;
+}
+
+.navbarBrand {
+    font-size: 1.1rem;
+}
+
+.bi {
+    display: inline-block;
+    position: relative;
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-right: 0.75rem;
+    margin-left: 0.75rem;
+    top: -1px;
+    background-size: cover;
+}
+
+.biHouseDoorFillNavMenu {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
+}
+
+.biPlusSquareFillNavMenu {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
+}
+
+.biListNestedNavMenu {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
+}
+
+.biLockNavMenu {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
+}
+
+.biPersonNavMenu {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
+}
+
+.biPersonBadgeNavMenu {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
+}
+
+.biPersonFillNavMenu {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
+}
+
+.biArrowBarLeftNavMenu {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
+}
+
+.navItem {
+    font-size: 0.9rem;
+    padding-bottom: 0.5rem;
+}
+
+.navItem:first-of-type {
+    padding-top: 1rem;
+}
+
+.navItem:last-of-type {
+    padding-bottom: 1rem;
+}
+
+.navItem .navLink {
+    color: #d7d7d7;
+    background: none;
+    border: none;
+    border-radius: 4px;
+    height: 3rem;
+    display: flex;
+    align-items: center;
+    line-height: 3rem;
+    width: 100%;
+}
+
+.navItem a.active {
+    background-color: rgba(255,255,255,0.37);
+    color: white;
+}
+
+.navItem .navLink:hover {
+    background-color: rgba(255,255,255,0.1);
+    color: white;
+}
+
+.navScrollable {
+    display: none;
+}
+
+.navbarToggler:checked ~ .navScrollable {
+    display: block;
+}
+
+@media (min-width: 641px) {
+    .navbarToggler {
+        display: none;
+    }
+
+    .navScrollable {
+        /* Never collapse the sidebar for wide screens */
+        display: block;
+
+        /* Allow sidebar to scroll for tall menus */
+        height: calc(100vh - 3.5rem);
+        overflow-y: auto;
+    }
+}

open.warehouse.web.warehouse/src/Layout/NavLayout.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import style from './NavLayout.module.css'
+interface NavProps {
+    privilegeList : string[] | undefined
+}
+
+
+// @ts-ignore
+const NavLayout: React.FC<NavProps> = ({privilegeList}) => {
+    const navigate = useNavigate();
+    return (
+        <>
+            <div className={`${style.topRow} top-row ps-3 navbar navbar-dark` } onClick={()  => navigate("/")}>
+                <div className="container-fluid">
+                    <span className="navbar-brand">OpenWarehouse</span>
+                </div>
+            </div>
+
+            <input type="checkbox" title="Navigation menu" className={`${style.navbarToggler}`} />
+
+            <div className={style.navScrollable}>
+                <nav className="flex-column">
+                    <div className={`${style.navItem} px-3`}>
+                        <button
+                            className={`${style.navLink} nav-link active`}
+                            onClick={() => navigate('/')}
+                        >
+                            <span
+                                className={`${style.bi} ${style.biHouseDoorFillNavMenu}`}
+                                aria-hidden="true"
+                            ></span>{' '}
+                            Home
+                        </button>
+                    </div>
+                    <div className={`${style.navItem} px-3`}>
+                        <button
+                            className={`${style.navLink} nav-link active`}
+                            onClick={() => navigate('/accounts')}
+                        >
+                            <span
+                                className={`${style.bi} ${style.biPlusSquareFillNavMenu}`}
+                                aria-hidden="true"
+                            ></span>{' '}
+                            Accounts
+                        </button>
+                    </div>
+                    <div className={`${style.navItem} px-3`}>
+                        <button
+                            className={`${style.navLink} nav-link active`}
+                            onClick={() => navigate('/weather')}
+                        >
+                            <span
+                                className={`${style.bi} ${style.biListNestedNavMenu}`}
+                                aria-hidden="true"
+                            ></span>{' '}
+                            Weather
+                        </button>
+                    </div>
+                    <div className={`${style.navItem} px-3`}>
+                        <button
+                            className={`${style.navLink} nav-link active`}
+                            onClick={() => navigate('/auth')}
+                        >
+                            <span
+                                className={`${style.bi} ${style.biLockNavMenu}`}
+                                aria-hidden="true"
+                            ></span>{' '}
+                            Auth Required
+                        </button>
+                    </div>
+                </nav>
+            </div>
+        </>
+    );
+};
+
+export default NavLayout;

open.warehouse.web.warehouse/src/LoadingScreen.css

@@ -0,0 +1,51 @@
+.loading-screen {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    background-color: #2d3748; /* Matches the dark theme background */
+    color: #edf2f7; /* Light text color for contrast */
+}
+
+.spinner {
+    display: inline-block;
+}
+
+.lds-ring {
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 80px;
+}
+
+.lds-ring div {
+    box-sizing: border-box;
+    display: block;
+    position: absolute;
+    width: 64px;
+    height: 64px;
+    margin: 8px;
+    border: 8px solid #63b3ed; /* Bright blue for consistency */
+    border-radius: 50%;
+    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    border-color: #63b3ed transparent transparent transparent;
+}
+
+.lds-ring div:nth-child(1) {
+    animation-delay: -0.45s;
+}
+.lds-ring div:nth-child(2) {
+    animation-delay: -0.3s;
+}
+.lds-ring div:nth-child(3) {
+    animation-delay: -0.15s;
+}
+
+@keyframes lds-ring {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}

open.warehouse.web.warehouse/src/Pages/Module/ConfirmDeleteUserModal.tsx

@@ -0,0 +1,52 @@
+import React, { useEffect, useRef } from 'react';
+
+interface ConfirmDeleteUserModalProps {
+    userName: string;
+    confirmDelete: () => void;
+    closeModal: () => void;
+}
+
+const ConfirmDeleteUserModal: React.FC<ConfirmDeleteUserModalProps> = ({ userName, confirmDelete, closeModal }) => {
+    const modalRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') {
+                closeModal();
+            }
+        };
+
+        const handleClickOutside = (e: MouseEvent) => {
+            if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
+                closeModal();
+            }
+        };
+
+        document.addEventListener('keydown', handleKeyDown);
+        document.addEventListener('mousedown', handleClickOutside);
+
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [closeModal]);
+
+    return (
+        <div className="delete-user-modal">
+            <div className="delete-user-content" ref={modalRef}>
+                <h3>Are you sure?</h3>
+                <p>Are you sure you want to delete user <strong>{userName}</strong>?</p>
+                <div className="delete-user-actions">
+                    <button className="btn btn-danger" onClick={confirmDelete}>
+                        Yes
+                    </button>
+                    <button className="btn btn-secondary"  onClick={closeModal}>
+                        Cancel
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ConfirmDeleteUserModal;

open.warehouse.web.warehouse/src/Pages/Module/CreateUserModal.tsx

@@ -0,0 +1,244 @@
+import React, { useEffect, useRef, useState } from 'react';
+import {Api as Auth, RoleModel} from '../../client/auth_client';
+import PhoneInputComponent from "./PhoneInputComponent.tsx";
+
+interface CreateUserModalProps {
+    closeModal: () => void;
+    availableRoles: RoleModel[];
+    refreshList: () => void;
+}
+
+const CreateUserModal: React.FC<CreateUserModalProps> = ({ closeModal, availableRoles, refreshList }) => {
+    const [newUser, setNewUser] = useState({
+        userName: '',
+        email: '',
+        password: '',
+        confirmPassword: '',
+    });
+
+    const [dialCode, setDialCode] = useState<string | null>();
+    const [phoneNumber, setPhoneNumber] = useState<string |null>();
+
+    const [userRoles, setUserRoles] = useState<string[]>([]);
+    const [roleSearchQuery, setRoleSearchQuery] = useState<string>('');
+    const [filteredRoles, setFilteredRoles] = useState<RoleModel[]>([]);
+    const [showDropdown, setShowDropdown] = useState<boolean>(false);
+    const modalRef = useRef<HTMLDivElement>(null);
+    const [loading, setLoading] = useState<boolean>(false);
+    const [successMessage, setSuccessMessage] = useState<string | null>(null);
+
+    useEffect(() => {
+        // Initialize filtered roles to be the available roles (excluding already chosen roles)
+        setFilteredRoles(filterAvailableRoles());
+    }, [availableRoles, userRoles]);
+
+    useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') {
+                closeModal();
+            }
+        };
+
+        const handleClickOutside = (e: MouseEvent) => {
+            if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
+                closeModal();
+            }
+        };
+
+        document.addEventListener('keydown', handleKeyDown);
+        document.addEventListener('mousedown', handleClickOutside);
+
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [closeModal]);
+
+    const filterAvailableRoles = () => {
+        return availableRoles.filter((role) => !userRoles.includes(role.roleName ?? ""));
+    };
+
+    const handleRoleSearch = (query: string) => {
+        setRoleSearchQuery(query);
+        if (query.length > 0) {
+            setFilteredRoles(
+                availableRoles.filter(
+                    (role) =>
+                        role.roleName?.toLowerCase().includes(query.toLowerCase()) &&
+                        !userRoles.includes(role.roleName)
+                )
+            );
+        } else {
+            setFilteredRoles(filterAvailableRoles());
+        }
+        setShowDropdown(query.length > 0);
+    };
+
+    const handleAddRole = (role: string) => {
+        if (!userRoles.includes(role)) {
+            setUserRoles([...userRoles, role]);
+        }
+        setRoleSearchQuery('');
+        setFilteredRoles(filterAvailableRoles());
+        setShowDropdown(false);
+    };
+
+    const handleRemoveRole = (role: string) => {
+        setUserRoles(userRoles.filter((r) => r !== role));
+        setFilteredRoles(filterAvailableRoles());
+    };
+
+    const handleCreateUser = async () => {
+        setLoading(true); // Start loading
+        const token = localStorage.getItem("authToken");
+        const client = new Auth({
+            baseUrl: "/auth",
+            securityWorker: () => ({ headers: { Authorization: `Bearer ${token}` } }),
+        });
+
+        try {
+            const result = await client.account.createUserCreate({
+                email: newUser.email,
+                password: newUser.password,
+                roles: userRoles,
+                username: newUser.userName,
+                dialcode: dialCode,
+                phone: phoneNumber,
+            });
+
+            if (result.status === 200) {
+                refreshList()
+                setSuccessMessage("User created successfully!");
+                setTimeout(() => {
+                    setSuccessMessage(null);
+                    closeModal();
+                }, 2000);
+            } else {
+                alert("Failed to create user. Please try again.");
+            }
+        } catch (error) {
+            console.error("Error creating user:", error);
+            alert("Failed to create user. Please try again.");
+        } finally {
+            setLoading(false); // Stop loading
+        }
+    };
+
+    return (
+        <div className="edit-user-window">
+            <div className="edit-user-content" ref={modalRef}>
+                <h3>Create User</h3>
+                {successMessage && <div className="success-message">{successMessage}</div>}
+                <label>
+                    Name:
+                    <input
+                        type="text"
+                        value={newUser.userName}
+                        onChange={(e) => setNewUser({ ...newUser, userName: e.target.value })}
+                        className="form-control"
+                    />
+                </label>
+                <label>
+                    Email:
+                    <input
+                        type="email"
+                        value={newUser.email}
+                        onChange={(e) => setNewUser({ ...newUser, email: e.target.value })}
+                        className="form-control"
+                    />
+                </label>
+                <label>
+                    Phone:
+                    <PhoneInputComponent value={`${dialCode}${phoneNumber}`}
+                                         onChange={ (phone, data) =>{
+                                             let lenOfDialCode : number = 0;
+                                             if ("dialCode" in data) {
+                                                 lenOfDialCode = data.dialCode.length;
+                                                 setDialCode(data.dialCode);
+                                             }
+
+                                             const phoneNumber = phone.slice(lenOfDialCode, phone.length);
+
+                                             setPhoneNumber(phoneNumber);
+
+                                         }}/>
+                </label>
+                <label>
+                    Password:
+                    <input
+                        type="password"
+                        value={newUser.password}
+                        onChange={(e) => setNewUser({ ...newUser, password: e.target.value })}
+                        className="form-control"
+                    />
+                </label>
+                <label>
+                    Confirm Password:
+                    <input
+                        type="password"
+                        value={newUser.confirmPassword}
+                        onChange={(e) => setNewUser({ ...newUser, confirmPassword: e.target.value })}
+                        className="form-control"
+                    />
+                </label>
+                <div className="role-search">
+                    <h4>Available Roles</h4>
+                    <div className="role-search-container">
+                        <input
+                            type="text"
+                            placeholder="Search roles..."
+                            value={roleSearchQuery}
+                            onChange={(e) => handleRoleSearch(e.target.value)}
+                            className="form-control role-search-input"
+                        />
+                        {showDropdown && (
+                            <div className="role-dropdown">
+                                <div className="role-list">
+                                    {filteredRoles.map((role) => (
+                                        <div
+                                            key={role.roleName}
+                                            className="role-dropdown-item"
+                                            onClick={() => handleAddRole(role.roleName ?? "")}
+                                        >
+                                            {role.roleName}
+                                        </div>
+                                    ))}
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                </div>
+                <div className="assigned-roles">
+                    <h4>Assigned Roles</h4>
+                    <ul>
+                        {userRoles.map((role) => (
+                            <li key={role}>
+                                {role}
+                                <button
+                                    className="btn-remove-role"
+                                    onClick={() => handleRemoveRole(role)}
+                                >
+                                    Remove
+                                </button>
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+                <div className="edit-user-actions">
+                    <button
+                        className="btn-save"
+                        onClick={handleCreateUser}
+                        disabled={(loading || successMessage != null)}
+                    >
+                        {loading && (<span className="spinner-border spinner-border-sm" role="status"
+                                           aria-hidden="true"></span>)}
+                        Create
+                    </button>
+                    <button className="btn-cancel" onClick={closeModal}>Cancel</button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CreateUserModal;

open.warehouse.web.warehouse/src/Pages/Module/EditPasswordModal.tsx

@@ -0,0 +1,67 @@
+import React, {useEffect, useRef, useState} from 'react';
+import { AccountDetailRespond } from '../../client/auth_client';
+
+interface EditPasswordModalProps {
+    user: AccountDetailRespond;
+    closeModal: () => void;
+}
+
+const EditPasswordModal: React.FC<EditPasswordModalProps> = ({ user, closeModal }) => {
+    const modalRef = useRef<HTMLDivElement>(null);
+    const [newPassword, setNewPassword] = useState('');
+    const [confirmPassword, setConfirmPassword] = useState('');
+
+    useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') {
+                closeModal();
+            }
+        };
+
+        const handleClickOutside = (e: MouseEvent) => {
+            if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
+                closeModal();
+            }
+        };
+
+        document.addEventListener('keydown', handleKeyDown);
+        document.addEventListener('mousedown', handleClickOutside);
+
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [closeModal]);
+
+    return (
+        <div className="edit-password-window">
+            <div className="edit-password-content" ref={modalRef}>
+                <h3>Edit Password for {user.userName}</h3>
+                <label>
+                    New Password:
+                    <input
+                        type="password"
+                        value={newPassword}
+                        onChange={(e) => setNewPassword(e.target.value)}
+                        className="form-control"
+                    />
+                </label>
+                <label>
+                    Confirm New Password:
+                    <input
+                        type="password"
+                        value={confirmPassword}
+                        onChange={(e) => setConfirmPassword(e.target.value)}
+                        className="form-control"
+                    />
+                </label>
+                <div className="edit-password-actions">
+                    <button className="btn-save" onClick={() => alert('Save password clicked')}>Save</button>
+                    <button className="btn-cancel" onClick={closeModal}>Cancel</button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default EditPasswordModal;

open.warehouse.web.warehouse/src/Pages/Module/EditRolesModal.css

@@ -0,0 +1,58 @@
+.loading-screen {
+    position: fixed; /* Ensure the loading spinner is fixed on the viewport */
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(0, 0, 0, 0.5); /* Optional: Add a semi-transparent overlay */
+    z-index: 1000; /* Make sure it appears above other content */
+}
+
+.spinner {
+    width: 80px;
+    height: 80px;
+}
+
+.lds-ring {
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 80px;
+}
+
+.lds-ring div {
+    box-sizing: border-box;
+    display: block;
+    position: absolute;
+    width: 64px;
+    height: 64px;
+    margin: 8px;
+    border: 8px solid #3182ce;
+    border-radius: 50%;
+    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    border-color: #3182ce transparent transparent transparent;
+}
+
+.lds-ring div:nth-child(1) {
+    animation-delay: -0.45s;
+}
+
+.lds-ring div:nth-child(2) {
+    animation-delay: -0.3s;
+}
+
+.lds-ring div:nth-child(3) {
+    animation-delay: -0.15s;
+}
+
+@keyframes lds-ring {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}

open.warehouse.web.warehouse/src/Pages/Module/EditRolesModal.tsx

@@ -0,0 +1,174 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { AccountDetailRespond, Api, RoleModel } from '../../client/auth_client';
+import './EditRolesModal.css';
+
+interface EditRolesModalProps {
+    user: AccountDetailRespond;
+    availableRoles: RoleModel[];
+    closeModal: () => void;
+}
+
+const EditRolesModal: React.FC<EditRolesModalProps> = ({ user, availableRoles, closeModal }) => {
+    const [userRoles, setUserRoles] = useState<string[]>([]);
+    const [roleSearchQuery, setRoleSearchQuery] = useState<string>('');
+    const [filteredRoles, setFilteredRoles] = useState<RoleModel[]>(availableRoles);
+    const [showDropdown, setShowDropdown] = useState<boolean>(false);
+    const [loadingRoles, setLoadingRoles] = useState<boolean>(true);
+    const modalRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const getRoles = async () => {
+            const token = localStorage.getItem("authToken");
+            const client = new Api({
+                baseUrl: "/auth",
+                securityWorker: () => ({ headers: { Authorization: `Bearer ${token}` } }),
+            });
+
+            try {
+                let result = await client.role.getUserRolesCreate({ userIdentify: user.id });
+                if (result && result.data.roles) {
+                    const roles = result.data.roles
+                        .map((role) => role.roleName)
+                        .filter((roleName): roleName is string => roleName != null); // Filter null or undefined values
+                    setUserRoles(roles);
+                }
+            } catch (e) {
+                console.error('Error fetching user roles:', e);
+            } finally {
+                setLoadingRoles(false);
+            }
+        };
+
+        getRoles().then();
+    }, [user.id]);
+
+    useEffect(() => {
+        setFilteredRoles(availableRoles);
+    }, [availableRoles]);
+
+    useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') {
+                closeModal();
+            }
+        };
+
+        const handleClickOutside = (e: MouseEvent) => {
+            if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
+                closeModal();
+            }
+        };
+
+        document.addEventListener('keydown', handleKeyDown);
+        document.addEventListener('mousedown', handleClickOutside);
+
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [closeModal]);
+
+    const handleRoleSearch = (query: string) => {
+        setRoleSearchQuery(query);
+        setFilteredRoles(
+            availableRoles.filter((role) =>
+                role.roleName?.toLowerCase().includes(query.toLowerCase())
+            )
+        );
+        setShowDropdown(query.length > 0);
+    };
+
+    const handleAddRole = (role: string) => {
+        if (!userRoles.includes(role)) {
+            setUserRoles([...userRoles, role]);
+        }
+        setRoleSearchQuery('');
+        setShowDropdown(false);
+    };
+
+    const handleRemoveRole = (role: string) => {
+        setUserRoles(userRoles.filter((r) => r !== role));
+    };
+
+    return (
+        <div className="edit-roles-window">
+            <div className="edit-roles-content" ref={modalRef}>
+                <h3>Edit Roles for {user.userName}</h3>
+                {loadingRoles ? (
+                    <div className="loading-screen">
+                        <div className="spinner">
+                            <div className="lds-ring">
+                                <div></div>
+                                <div></div>
+                                <div></div>
+                                <div></div>
+                            </div>
+                        </div>
+                    </div>
+                ) : (
+                    <>
+                        <div className="role-search">
+                            <h4>Available Roles</h4>
+                            <div className="role-search-container">
+                                <input
+                                    type="text"
+                                    placeholder="Search roles..."
+                                    value={roleSearchQuery}
+                                    onChange={(e) => handleRoleSearch(e.target.value)}
+                                    className="form-control role-search-input"
+                                />
+                                {showDropdown && (
+                                    <div className="role-dropdown">
+                                        {filteredRoles.length > 0 ? (
+                                            filteredRoles.map((role) => (
+                                                <div
+                                                    key={role.roleName}
+                                                    className="role-dropdown-item"
+                                                    onClick={() => handleAddRole(role.roleName ?? "")}
+                                                >
+                                                    {role.roleName}
+                                                </div>
+                                            ))
+                                        ) : (
+                                            <div className="role-dropdown-item">No roles found</div>
+                                        )}
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                        <div className="assigned-roles">
+                            <h4>Assigned Roles</h4>
+                            {userRoles.length > 0 ? (
+                                <ul>
+                                    {userRoles.map((role) => (
+                                        <li key={role}>
+                                            {role}
+                                            <button
+                                                className="btn-remove-role"
+                                                onClick={() => handleRemoveRole(role)}
+                                            >
+                                                Remove
+                                            </button>
+                                        </li>
+                                    ))}
+                                </ul>
+                            ) : (
+                                <p>No roles assigned</p>
+                            )}
+                        </div>
+                        <div className="edit-roles-actions">
+                            <button className="btn-save" onClick={() => alert('Roles updated successfully!')}>
+                                Save
+                            </button>
+                            <button className="btn-cancel" onClick={closeModal}>
+                                Cancel
+                            </button>
+                        </div>
+                    </>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default EditRolesModal;

open.warehouse.web.warehouse/src/Pages/Module/EditUserModal.tsx

@@ -0,0 +1,136 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Api as Auth, AccountDetailRespond } from '../../client/auth_client';
+import './PhoneInputComponent';
+import PhoneInputComponent from './PhoneInputComponent.tsx';
+
+interface EditUserModalProps {
+    user: AccountDetailRespond;
+    closeModal: () => void;
+}
+
+const EditUserModal: React.FC<EditUserModalProps> = ({ user, closeModal }) => {
+    const modalRef = useRef<HTMLDivElement>(null);
+    const [editingUser, setEditingUser] = useState(user);
+    const [dialCode, setDialCode] = useState<string | null>(user.dialCode ?? "");
+    const [phoneNumber, setPhoneNumber] = useState<string | null>(user.phone ?? "");
+    const [successMessage, setSuccessMessage] = useState<string | null>(null);
+    const [loading, setLoading] = useState<boolean>(false);
+
+    useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') {
+                closeModal();
+            }
+        };
+
+        const handleClickOutside = (e: MouseEvent) => {
+            if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
+                closeModal();
+            }
+        };
+
+        document.addEventListener('keydown', handleKeyDown);
+        document.addEventListener('mousedown', handleClickOutside);
+
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [closeModal]);
+
+    const editUser = async () => {
+        setLoading(true); // Start loading
+        const token = localStorage.getItem("authToken");
+        const client = new Auth({
+            baseUrl: "/auth",
+            securityWorker: () => ({ headers: { Authorization: `Bearer ${token}` } }),
+        });
+
+        try {
+            const result = await client.account.editAccountCreate({
+                userId: user.id,
+                newDialCode: dialCode,
+                newEmail: editingUser.email,
+                newPhone: phoneNumber,
+                newUserName: editingUser.userName,
+            });
+
+            if (result.status === 200) {
+                setSuccessMessage("Operation successful!");
+                setTimeout(() => {
+                    setSuccessMessage(null);
+                    closeModal();
+                }, 2000);
+            } else {
+                alert("Failed to update user details. Please try again.");
+            }
+        } catch (error) {
+            console.error("Error updating user details:", error);
+            alert("Failed to update user details. Please try again.");
+        } finally {
+            setLoading(false); // Stop loading
+        }
+    };
+
+    return (
+        <div className="edit-user-window">
+            <div className="edit-user-content" ref={modalRef}>
+                <h3>Edit User</h3>
+                {successMessage && <div className="success-message">{successMessage}</div>}
+                <label>
+                    Name:
+                    <input
+                        type="text"
+                        value={editingUser.userName ?? ''}
+                        onChange={(e) => setEditingUser({ ...editingUser, userName: e.target.value })}
+                        className="form-control"
+                    />
+                </label>
+                <label>
+                    Email:
+                    <input
+                        type="email"
+                        value={editingUser.email ?? ''}
+                        onChange={(e) => setEditingUser({ ...editingUser, email: e.target.value })}
+                        className="form-control"
+                    />
+                </label>
+                <label>
+                    Phone:
+                    <PhoneInputComponent
+                        value={`${dialCode}${phoneNumber}`}
+                        onChange={(phone, data) => {
+                            let lenOfDialCode: number = 0;
+                            if ("dialCode" in data) {
+                                lenOfDialCode = data.dialCode.length;
+                                setDialCode(data.dialCode);
+                            }
+
+                            const phoneNumber = phone.slice(lenOfDialCode, phone.length);
+                            setPhoneNumber(phoneNumber);
+                        }}
+                    />
+                </label>
+                <div className="edit-user-actions">
+                    <button
+                        className="btn-save"
+                        onClick={editUser}
+                        disabled={loading}
+                    >
+                        {loading && (<span className="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>)}
+                        Save
+                    </button>
+                    <button
+                        className="btn-cancel"
+                        onClick={closeModal}
+                        disabled={loading}
+                    >
+                        Cancel
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default EditUserModal;

open.warehouse.web.warehouse/src/Pages/Module/PhoneInputComponent.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import PhoneInput, {CountryData} from 'react-phone-input-2';
+import 'react-phone-input-2/lib/style.css';
+import '../../Auth/react-phone-input-2-custom.css';
+
+interface PhoneInputProps {
+    value: string;
+    onChange?(
+        value: string,
+        data: CountryData | {},
+        event: React.ChangeEvent<HTMLInputElement>,
+        formattedValue: string
+    ): void;
+}
+
+const PhoneInputComponent: React.FC<PhoneInputProps> = ({ value, onChange }) => {
+    return (
+        <PhoneInput
+            country={'pl'}
+            value={value}
+            onChange={onChange}
+            inputProps={{
+                name: 'phone',
+                required: true,
+            }}
+            containerClass="react-tel-input"
+        />
+    );
+};
+
+export default PhoneInputComponent;

open.warehouse.web.warehouse/src/Pages/NotFound.css

@@ -0,0 +1,20 @@
+.not-found-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    text-align: center;
+    color: #edf2f7;
+}
+
+.not-found-container h1 {
+    font-size: 6rem;
+    margin-bottom: 20px;
+    color: #ff0000;
+}
+
+.not-found-container p {
+    font-size: 1.5rem;
+    margin-bottom: 20px;
+}

open.warehouse.web.warehouse/src/Pages/NotFound.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import './NotFound.css';
+
+const NotFound: React.FC = () => {
+    return (
+        <div className="not-found-container">
+            <h1>404</h1>
+            <p>Oops! The page you are looking for does not exist.</p>
+        </div>
+    );
+};
+
+export default NotFound;

open.warehouse.web.warehouse/src/Pages/UserAccountList.css

@@ -0,0 +1,384 @@
+.user-list-container {
+    padding: 20px;
+    color: #edf2f7;
+}
+
+.header-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.user-list-table {
+    width: 100%;
+    border-collapse: collapse;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.user-list-table th, .user-list-table td {
+    border: 1px solid #4a5568;
+    padding: 15px;
+    text-align: left;
+    background-color: #2d3748;
+    color: #edf2f7;
+}
+
+.user-list-table th {
+    background-color: #3182ce;
+    color: #fff;
+    font-weight: bold;
+    text-transform: uppercase;
+}
+
+.user-list-table tr:hover {
+    background-color: #3b4754;
+    transition: background-color 0.3s ease;
+}
+
+.loading-screen {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+}
+
+.spinner {
+    width: 80px;
+    height: 80px;
+    position: relative;
+}
+
+.lds-ring {
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 80px;
+}
+
+.lds-ring div {
+    box-sizing: border-box;
+    display: block;
+    position: absolute;
+    width: 64px;
+    height: 64px;
+    margin: 8px;
+    border: 8px solid #3182ce;
+    border-radius: 50%;
+    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    border-color: #3182ce transparent transparent transparent;
+}
+
+.lds-ring div:nth-child(1) {
+    animation-delay: -0.45s;
+}
+
+.lds-ring div:nth-child(2) {
+    animation-delay: -0.3s;
+}
+
+.lds-ring div:nth-child(3) {
+    animation-delay: -0.15s;
+}
+
+@keyframes lds-ring {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.error {
+    text-align: center;
+    color: #e53e3e;
+    margin-top: 20px;
+    font-weight: bold;
+}
+
+.btn-create {
+    background-color: #38a169;
+    color: #fff;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.btn-create:hover {
+    background-color: #2f855a;
+}
+
+.btn-edit, .btn-password, .btn-role, .btn-delete {
+    color: #fff;
+    border: none;
+    padding: 8px 12px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    margin-right: 10px;
+}
+
+.btn-edit {
+    background-color: #3182ce;
+}
+
+.btn-edit:hover {
+    background-color: #5e97d0;
+}
+
+.btn-password {
+    background-color: #ed8936;
+}
+
+.btn-password:hover {
+    background-color: #dd6b20;
+}
+
+.btn-role {
+    background-color: #805ad5; /* Distinct color for role management */
+}
+
+.btn-role:hover {
+    background-color: #6b46c1;
+}
+
+.btn-delete {
+    background-color: #e53e3e;
+}
+
+.btn-delete:hover {
+    background-color: #c53030;
+}
+
+.edit-user-window, .edit-password-window, .edit-roles-window {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: #1a202c;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    z-index: 1000;
+    max-width: 400px;
+    width: 90%;
+}
+
+.edit-user-content, .edit-password-content, .edit-roles-content {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+}
+
+.edit-user-actions, .edit-password-actions, .edit-roles-actions {
+    display: flex;
+    justify-content: space-between;
+}
+
+.btn-save {
+    background-color: #38a169;
+    color: #fff;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.btn-save:hover {
+    background-color: #2f855a;
+}
+
+.btn-cancel {
+    background-color: #e53e3e;
+    color: #fff;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.btn-cancel:hover {
+    background-color: #c53030;
+}
+
+.form-control {
+    padding: 10px;
+    border: 1px solid #4a5568;
+    border-radius: 5px;
+    background-color: #2d3748;
+    color: #edf2f7;
+    outline: none;
+    max-width: 100%;
+}
+
+.form-control:focus {
+    border-color: #63b3ed;
+    box-shadow: 0 0 0 2px rgba(99, 179, 237, 0.5);
+}
+
+.pagination-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 20px;
+    gap: 10px;
+}
+
+.pagination-button {
+    background-color: #3182ce;
+    color: #fff;
+    border: none;
+    padding: 10px 15px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.pagination-button:disabled {
+    background-color: #4a5568;
+    cursor: not-allowed;
+}
+
+.pagination-button:hover:not(:disabled) {
+    background-color: #5e97d0;
+}
+
+.page-info {
+    font-size: 1rem;
+    color: #edf2f7;
+}
+
+.available-roles {
+    margin-bottom: 10px;
+}
+
+.assigned-roles ul {
+    list-style: none;
+    padding: 0;
+}
+
+.assigned-roles ul li {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+    background-color: #2d3748;
+    border-radius: 5px;
+    margin-bottom: 5px;
+}
+
+.btn-remove-role {
+    background-color: #e53e3e;
+    color: #fff;
+    border: none;
+    padding: 5px 10px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.btn-remove-role:hover {
+    background-color: #c53030;
+}
+
+.role-search-container {
+    position: relative;
+}
+
+.role-dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    max-height: 150px;
+    overflow-y: auto;
+    background-color: #2d3748;
+    border: 1px solid #4a5568;
+    border-radius: 5px;
+    z-index: 1000;
+}
+
+.role-dropdown-item {
+    padding: 10px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+.role-dropdown-item:hover {
+    background-color: #4a5568;
+}
+
+.role-list {
+    max-height: 150px;
+    overflow-y: auto;
+}
+
+.role-dropdown-item {
+    padding: 8px 12px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+.role-dropdown-item:hover {
+    background-color: #4a5568;
+}
+
+.assigned-roles {
+    max-height: 150px;
+    overflow-y: auto;
+}
+
+.btn-remove-role {
+    margin-left: 10px;
+    background-color: #e53e3e;
+    color: #fff;
+    border: none;
+    padding: 5px 10px;
+    border-radius: 3px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.btn-remove-role:hover {
+    background-color: #c53030;
+}
+
+.success-message {
+    margin-bottom: 10px;
+    padding: 10px;
+    background-color: #38a169;
+    color: #fff;
+    border-radius: 5px;
+    text-align: center;
+}
+.delete-user-modal {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: #1a202c;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    z-index: 1000;
+}
+
+.delete-user-content {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    align-items: center;
+    color: #edf2f7;
+}
+
+.delete-user-actions {
+    display: flex;
+    gap: 15px;
+}

open.warehouse.web.warehouse/src/Pages/UserAccountList.tsx

@@ -0,0 +1,192 @@
+import React, { useEffect, useState } from 'react';
+import { Api, AccountDetailRespond, RoleModel } from '../client/auth_client';
+import { UnAuthorized } from '../Auth/Auth';
+import { useNavigate } from 'react-router-dom';
+import './UserAccountList.css';
+import CreateUserModal from './Module/CreateUserModal';
+import EditUserModal from './Module/EditUserModal';
+import EditPasswordModal from './Module/EditPasswordModal';
+import EditRolesModal from './Module/EditRolesModal';
+import ConfirmDeleteUserModal from './Module/ConfirmDeleteUserModal'
+
+const UserAccountList: React.FC = () => {
+    const [creatingUser, setCreatingUser] = useState<boolean>(false);
+    const [editingUser, setEditingUser] = useState<AccountDetailRespond | null>(null);
+    const [userToDelete, setUserToDelete] = useState<AccountDetailRespond | null>(null);
+    const [editingPassword, setEditingPassword] = useState<AccountDetailRespond | null>(null);
+    const [editingRolesUser, setEditingRolesUser] = useState<AccountDetailRespond | null>(null);
+    const [users, setUsers] = useState<AccountDetailRespond[]>([]);
+    const [loading, setLoading] = useState<boolean>(true);
+    const [error, setError] = useState<string | null>(null);
+    const [availableRoles, setAvailableRoles] = useState<RoleModel[]>([]);
+    const [currentPage, setCurrentPage] = useState<number>(1);
+    const [nextPageExists, setNextPageExists] = useState<boolean>(false);
+    const navigate = useNavigate();
+    const [isDeletingUser, setIsDeletingUser] = useState<boolean>(false)
+
+    const pageSize = 10;
+
+    useEffect(() => {
+        fetchUsers(currentPage).then();
+    }, [currentPage]);
+
+    useEffect(() => {
+        fetchRoles().then();
+    }, []);
+
+    const fetchUsers = async (page: number) => {
+        try {
+            setLoading(true);
+            const token = localStorage.getItem("authToken");
+            const client = new Api({
+                baseUrl: "/auth",
+                securityWorker: () => ({ headers: { Authorization: `Bearer ${token}` } }),
+            });
+
+            const result = await client.account.getListOfUsersCreate({ page, pageSize });
+
+            if (result.status === 401) {
+                await UnAuthorized(navigate);
+            } else if (result?.data && result.data.accountsDetail) {
+                setUsers(result.data.accountsDetail);
+                setCurrentPage(page);
+                setNextPageExists(result.data.nextPageExist || false);
+            }
+        } catch (e) {
+            setError('Failed to load user accounts. Please try again later.');
+            console.error('Error fetching user accounts:', e);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const fetchRoles = async () => {
+        try {
+            const token = localStorage.getItem("authToken");
+            const client = new Api({
+                baseUrl: "/auth",
+                securityWorker: () => ({ headers: { Authorization: `Bearer ${token}` } }),
+            });
+
+            const rolesResult = await client.role.getRolesCreate();
+            if (rolesResult?.data?.roles) {
+                setAvailableRoles(rolesResult.data.roles);
+            }
+        } catch (e) {
+            console.error('Error fetching roles:', e);
+        }
+    };
+
+    const closeAllWindows = () => {
+        setCreatingUser(false);
+        setEditingUser(null);
+        setEditingPassword(null);
+        setEditingRolesUser(null);
+    };
+
+    const handleDeleteUser = (user: AccountDetailRespond) => {
+        setUserToDelete(user);
+        setIsDeletingUser(true);
+    };
+
+    const handleConfirmDeleteUser = async () => {
+        if (!userToDelete) return;
+
+        try {
+            const token = localStorage.getItem("authToken");
+            const client = new Api({
+                baseUrl: "/auth",
+                securityWorker: () => ({ headers: { Authorization: `Bearer ${token}` } }),
+            });
+
+            await client.account.deleteUserDelete({userId: userToDelete.id})
+            fetchUsers(currentPage).then();
+            alert(`User ${userToDelete.userName} deleted successfully!`);
+        } catch (e) {
+            console.error('Error deleting user:', e);
+            alert('Failed to delete user. Please try again.');
+        } finally {
+            handleCloseDeleteUserModal();
+        }
+    };
+
+    const handleCloseDeleteUserModal = () => {
+        setUserToDelete(null);
+        setIsDeletingUser(false);
+    };
+
+    return (
+        <div className="user-list-container">
+            {loading ? (
+                <div className="loading-screen">
+                    <div className="spinner">
+                        <div className="lds-ring">
+                            <div></div>
+                            <div></div>
+                            <div></div>
+                            <div></div>
+                        </div>
+                    </div>
+                </div>
+            ) : error ? (
+                <div className="error">{error}</div>
+            ) : (
+                <>
+                    <div className="header-container">
+                        <h2>User Accounts</h2>
+                        <button className="btn-create" onClick={() => setCreatingUser(true)}>Create User</button>
+                    </div>
+                    <table className="user-list-table">
+                        <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Email</th>
+                            <th>Phone</th>
+                            <th>Actions</th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        {users.map((user) => (
+                            <tr key={user.id}>
+                                <td>{user.userName}</td>
+                                <td>{user.email}</td>
+                                <td>{user.phone}</td>
+                                <td>
+                                    <button className="btn-edit" onClick={() => setEditingUser(user)}>Edit</button>
+                                    <button className="btn-password" onClick={() => setEditingPassword(user)}>Edit Password</button>
+                                    <button className="btn-role" onClick={() => setEditingRolesUser(user)}>Edit Roles</button>
+                                    <button
+                                        className="btn-delete"
+                                        onClick={() => handleDeleteUser(user)}>
+                                        Delete
+                                    </button>
+                                </td>
+                            </tr>
+                        ))}
+                        </tbody>
+                    </table>
+                    <div className="pagination-container">
+                    <button className="pagination-button" disabled={currentPage === 1} onClick={() => setCurrentPage(currentPage - 1)}>Previous</button>
+                        <span className="page-info">Page {currentPage}</span>
+                        <button className="pagination-button" disabled={!nextPageExists} onClick={() => setCurrentPage(currentPage + 1)}>Next</button>
+                    </div>
+
+                    {creatingUser && <CreateUserModal closeModal={closeAllWindows} availableRoles={availableRoles} refreshList={()=> fetchUsers(currentPage)} />}
+                    {editingUser && <EditUserModal user={editingUser} closeModal={closeAllWindows} />}
+                    {editingPassword && <EditPasswordModal user={editingPassword} closeModal={closeAllWindows} />}
+                    {editingRolesUser && <EditRolesModal user={editingRolesUser} availableRoles={availableRoles} closeModal={closeAllWindows} />}
+                    {isDeletingUser && (
+                        <ConfirmDeleteUserModal
+                            userName={userToDelete?.userName ?? ''}
+                            confirmDelete={handleConfirmDeleteUser}
+                            closeModal={handleCloseDeleteUserModal}
+                        />
+                    )}
+
+                </>
+            )}
+        </div>
+    );
+};
+
+export default UserAccountList;

open.warehouse.web.warehouse/src/assets/react.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img"
+     class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228">
+    <path fill="#00D8FF"
+          d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path>
+</svg>

open.warehouse.web.warehouse/src/index.css

@@ -0,0 +1,73 @@
+:root {
+    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+    line-height: 1.5;
+    font-weight: 400;
+
+    color-scheme: light dark;
+    color: rgba(255, 255, 255, 0.87);
+    background-color: #242424;
+
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+    font-weight: 500;
+    color: #646cff;
+    text-decoration: inherit;
+}
+
+a:hover {
+    color: #535bf2;
+}
+
+body {
+    margin: 0;
+    display: flex;
+    place-items: center;
+    min-width: 320px;
+    min-height: 100vh;
+}
+
+h1 {
+    font-size: 3.2em;
+    line-height: 1.1;
+}
+
+button {
+    border-radius: 8px;
+    border: 1px solid transparent;
+    padding: 0.6em 1.2em;
+    font-size: 1em;
+    font-weight: 500;
+    font-family: inherit;
+    background-color: #1a1a1a;
+    cursor: pointer;
+    transition: border-color 0.25s;
+}
+
+button:hover {
+    border-color: #646cff;
+}
+
+button:focus,
+button:focus-visible {
+    outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        color: #213547;
+        background-color: #ffffff;
+    }
+
+    a:hover {
+        color: #747bff;
+    }
+
+    button {
+        background-color: #f9f9f9;
+    }
+}

open.warehouse.web.warehouse/src/main.tsx

@@ -0,0 +1,9 @@
+import {StrictMode} from 'react'
+import {createRoot} from 'react-dom/client'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+    <StrictMode>
+        <App/>
+    </StrictMode>,
+)

open.warehouse.web.warehouse/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />