first time include all file

UI/Reactui/src/components/Header.css

@@ -0,0 +1,42 @@
+.app-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 2rem;
+  background-color: #ffffff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.header-nav {
+  display: flex;
+  gap: 1.5rem;
+}
+
+.header-nav a {
+  text-decoration: none;
+  color: #333;
+  font-weight: 500;
+}
+
+.header-nav a:hover {
+  color: #007bff;
+}
+
+.header-actions button {
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-weight: 600;
+}
+
+.login-btn {
+  background-color: #007bff;
+  color: white;
+}
+
+.logout-btn {
+  background-color: #f8f9fa;
+  border: 1px solid #ccc;
+  color: #333;
+}

UI/Reactui/src/components/Header.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import './Header.css';
+
+// Define the types for the props
+interface HeaderProps {
+  title: string;
+  onLogout?: () => void; // Optional function for a logout button
+}
+
+export const Header: React.FC<HeaderProps> = ({ title, onLogout }) => {
+  return (
+    <header className="app-header">
+      <div className="header-logo">
+        <h1>{title}</h1>
+      </div>
+      
+      <nav className="header-nav">
+        <a href="/home">Home</a>
+        <a href="/adminuser">Admin User</a>
+        <a href="/validationpoint">Validation Point</a>
+      </nav>
+
+      <div className="header-actions">
+        {onLogout ? (
+          <button onClick={onLogout} className="logout-btn">
+            Log Out
+          </button>
+        ) : (
+          <button className="login-btn">Log In</button>
+        )}
+      </div>
+    </header>
+  );
+};