Spaces:

mobadara
/

precision-diagnostics-xai

Sleeping

App Files Files Community

mobadara commited on Jun 1

Commit

ed483bc

1 Parent(s): a38e020

initialized frontend

Browse files

Files changed (21) hide show

frontend/.gitignore +24 -0
frontend/README.md +16 -0
frontend/eslint.config.js +21 -0
frontend/index.html +13 -0
frontend/package-lock.json +0 -0
frontend/package.json +32 -0
frontend/public/favicon.svg +1 -0
frontend/public/icons.svg +24 -0
frontend/src/App.css +184 -0
frontend/src/App.jsx +26 -0
frontend/src/AuthContext.jsx +31 -0
frontend/src/Dashboard.jsx +36 -0
frontend/src/LoginScreen.jsx +67 -0
frontend/src/assets/hero.png +0 -0
frontend/src/assets/react.svg +1 -0
frontend/src/assets/vite.svg +1 -0
frontend/src/authContext.js +3 -0
frontend/src/index.css +14 -0
frontend/src/main.jsx +10 -0
frontend/src/useAuth.js +4 -0
frontend/vite.config.js +11 -0

frontend/.gitignore ADDED Viewed

	@@ -0,0 +1,24 @@

+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+node_modules
+dist
+dist-ssr
+*.local
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/README.md ADDED Viewed

	@@ -0,0 +1,16 @@

+# React + Vite
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+Currently, two official plugins are available:
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+## React Compiler
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+## Expanding the ESLint configuration
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.

frontend/eslint.config.js ADDED Viewed

	@@ -0,0 +1,21 @@

+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      globals: globals.browser,
+      parserOptions: { ecmaFeatures: { jsx: true } },
+    },
+  },
+])

frontend/index.html ADDED Viewed

	@@ -0,0 +1,13 @@

+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>frontend</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

frontend/package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

frontend/package.json ADDED Viewed

	@@ -0,0 +1,32 @@

+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.16.1",
+    "lucide-react": "^1.17.0",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "react-router-dom": "^7.16.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@tailwindcss/vite": "^4.3.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^10.3.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.6.0",
+    "tailwindcss": "^4.3.0",
+    "vite": "^8.0.12"
+  }
+}

frontend/public/favicon.svg ADDED Viewed

frontend/public/icons.svg ADDED Viewed

frontend/src/App.css ADDED Viewed

	@@ -0,0 +1,184 @@

+.counter {
+  font-size: 16px;
+  padding: 5px 10px;
+  border-radius: 5px;
+  color: var(--accent);
+  background: var(--accent-bg);
+  border: 2px solid transparent;
+  transition: border-color 0.3s;
+  margin-bottom: 24px;
+  &:hover {
+    border-color: var(--accent-border);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+  }
+}
+.hero {
+  position: relative;
+  .base,
+  .framework,
+  .vite {
+    inset-inline: 0;
+    margin: 0 auto;
+  }
+  .base {
+    width: 170px;
+    position: relative;
+    z-index: 0;
+  }
+  .framework,
+  .vite {
+    position: absolute;
+  }
+  .framework {
+    z-index: 1;
+    top: 34px;
+    height: 28px;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
+      scale(1.4);
+  }
+  .vite {
+    z-index: 0;
+    top: 107px;
+    height: 26px;
+    width: auto;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
+      scale(0.8);
+  }
+}
+#center {
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+  place-content: center;
+  place-items: center;
+  flex-grow: 1;
+  @media (max-width: 1024px) {
+    padding: 32px 20px 24px;
+    gap: 18px;
+  }
+}
+#next-steps {
+  display: flex;
+  border-top: 1px solid var(--border);
+  text-align: left;
+  & > div {
+    flex: 1 1 0;
+    padding: 32px;
+    @media (max-width: 1024px) {
+      padding: 24px 20px;
+    }
+  }
+  .icon {
+    margin-bottom: 16px;
+    width: 22px;
+    height: 22px;
+  }
+  @media (max-width: 1024px) {
+    flex-direction: column;
+    text-align: center;
+  }
+}
+#docs {
+  border-right: 1px solid var(--border);
+  @media (max-width: 1024px) {
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+  }
+}
+#next-steps ul {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  gap: 8px;
+  margin: 32px 0 0;
+  .logo {
+    height: 18px;
+  }
+  a {
+    color: var(--text-h);
+    font-size: 16px;
+    border-radius: 6px;
+    background: var(--social-bg);
+    display: flex;
+    padding: 6px 12px;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
+    transition: box-shadow 0.3s;
+    &:hover {
+      box-shadow: var(--shadow);
+    }
+    .button-icon {
+      height: 18px;
+      width: 18px;
+    }
+  }
+  @media (max-width: 1024px) {
+    margin-top: 20px;
+    flex-wrap: wrap;
+    justify-content: center;
+    li {
+      flex: 1 1 calc(50% - 8px);
+    }
+    a {
+      width: 100%;
+      justify-content: center;
+      box-sizing: border-box;
+    }
+  }
+}
+#spacer {
+  height: 88px;
+  border-top: 1px solid var(--border);
+  @media (max-width: 1024px) {
+    height: 48px;
+  }
+}
+.ticks {
+  position: relative;
+  width: 100%;
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    top: -4.5px;
+    border: 5px solid transparent;
+  }
+  &::before {
+    left: 0;
+    border-left-color: var(--border);
+  }
+  &::after {
+    right: 0;
+    border-right-color: var(--border);
+  }
+}

frontend/src/App.jsx ADDED Viewed

	@@ -0,0 +1,26 @@

+import React from 'react';
+import { AuthProvider } from './AuthContext';
+import { useAuth } from './useAuth';
+import LoginScreen from './LoginScreen';
+import Dashboard from './Dashboard';
+// The Gatekeeper Component
+const MainRouter = () => {
+    const { user } = useAuth();
+    // If no user exists in global state, lock them out
+    if (!user) {
+        return <LoginScreen />;
+    }
+    // Otherwise, let them into the system
+    return <Dashboard />;
+};
+export default function App() {
+    return (
+        <AuthProvider>
+            <MainRouter />
+        </AuthProvider>
+    );
+}

frontend/src/AuthContext.jsx ADDED Viewed

	@@ -0,0 +1,31 @@

+import { useState } from 'react';
+import { AuthContext } from './authContext';
+export const AuthProvider = ({ children }) => {
+    const [user, setUser] = useState(() => {
+        const storedUser = localStorage.getItem('debutron_user');
+        return storedUser ? JSON.parse(storedUser) : null;
+    });
+    const login = (email, password) => {
+        // Hardcoded for MVP phase
+        if (email === "doctor@clinic.com" && password === "password123") {
+            const userData = { email, role: "physician", name: "Dr. Smith" };
+            setUser(userData);
+            localStorage.setItem('debutron_user', JSON.stringify(userData));
+            return true;
+        }
+        return false;
+    };
+    const logout = () => {
+        setUser(null);
+        localStorage.removeItem('debutron_user');
+    };
+    return (
+        <AuthContext.Provider value={{ user, login, logout }}>
+            {children}
+        </AuthContext.Provider>
+    );
+};

frontend/src/Dashboard.jsx ADDED Viewed

	@@ -0,0 +1,36 @@

+import React from 'react';
+import { useAuth } from './useAuth';
+import { LogOut, Activity } from 'lucide-react';
+export default function Dashboard() {
+    const { user, logout } = useAuth();
+    return (
+        <div className="min-h-screen bg-gray-50">
+            {/* Top Navigation Bar */}
+            <nav className="bg-navy text-white p-4 shadow-md flex justify-between items-center">
+                <div className="flex items-center gap-3">
+                    <Activity className="w-6 h-6 text-trust-cyan" />
+                    <span className="font-bold tracking-wide">DEBUTRON LAB</span>
+                </div>
+                <div className="flex items-center gap-6">
+                    <span className="text-sm text-gray-200">Welcome, {user?.name}</span>
+                    <button
+                        onClick={logout}
+                        className="flex items-center gap-2 hover:text-red-300 transition-colors text-sm font-medium"
+                    >
+                        <LogOut className="w-4 h-4" /> Logout
+                    </button>
+                </div>
+            </nav>
+            {/* Main Content Area */}
+            <main className="max-w-7xl mx-auto p-6 mt-8">
+                <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-12 text-center">
+                    <h2 className="text-2xl font-semibold text-navy mb-2">Diagnostic Engine Active</h2>
+                    <p className="text-gray-500">The main X-Ray upload interface will go here.</p>
+                </div>
+            </main>
+        </div>
+    );
+}

frontend/src/LoginScreen.jsx ADDED Viewed

	@@ -0,0 +1,67 @@

+import React, { useState } from 'react';
+import { useAuth } from './useAuth';
+import { Activity } from 'lucide-react';
+export default function LoginScreen() {
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [error, setError] = useState('');
+    const { login } = useAuth();
+    const handleLogin = (e) => {
+        e.preventDefault();
+        const success = login(email, password);
+        if (!success) setError("Invalid credentials. Use doctor@clinic.com / password123");
+    };
+    return (
+        <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
+            <div className="max-w-md w-full bg-white rounded-xl shadow-lg p-8">
+                <div className="flex flex-col items-center justify-center mb-8">
+                    <div className="bg-navy p-3 rounded-full mb-4">
+                        <Activity className="text-white w-8 h-8" />
+                    </div>
+                    <h2 className="text-2xl font-bold text-navy">DEBUTRON LAB</h2>
+                    <p className="text-gray-500 text-sm mt-1">Precision Diagnostics Portal</p>
+                </div>
+                {error && (
+                    <div className="mb-4 p-3 bg-red-50 text-critical-red text-sm rounded-md border border-red-100">
+                        {error}
+                    </div>
+                )}
+                <form onSubmit={handleLogin} className="space-y-6">
+                    <div>
+                        <label className="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
+                        <input
+                            type="email"
+                            required
+                            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-trust-cyan focus:border-transparent outline-none transition-all"
+                            value={email}
+                            onChange={(e) => setEmail(e.target.value)}
+                            placeholder="doctor@clinic.com"
+                        />
+                    </div>
+                    <div>
+                        <label className="block text-sm font-medium text-gray-700 mb-1">Password</label>
+                        <input
+                            type="password"
+                            required
+                            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-trust-cyan focus:border-transparent outline-none transition-all"
+                            value={password}
+                            onChange={(e) => setPassword(e.target.value)}
+                            placeholder="••••••••"
+                        />
+                    </div>
+                    <button
+                        type="submit"
+                        className="w-full bg-navy hover:bg-blue-900 text-white font-semibold py-2.5 rounded-lg transition-colors duration-200"
+                    >
+                        Secure Login
+                    </button>
+                </form>
+            </div>
+        </div>
+    );
+}

frontend/src/assets/hero.png ADDED Viewed

frontend/src/assets/react.svg ADDED Viewed

frontend/src/assets/vite.svg ADDED Viewed

frontend/src/authContext.js ADDED Viewed

	@@ -0,0 +1,3 @@


1	+ import { createContext } from 'react';
2	+
3	+ export const AuthContext = createContext(null);

frontend/src/index.css ADDED Viewed

	@@ -0,0 +1,14 @@

+@import "tailwindcss";
+@theme {
+  /* Your core brand color */
+  --color-navy: #000080;
+  /* Medical Accents */
+  --color-clinical-teal: #0F766E;
+  --color-surgical-mint: #10B981;
+  --color-trust-cyan: #0EA5E9;
+  /* Alert color for "Pneumonia Detected" */
+  --color-critical-red: #EF4444;
+}

frontend/src/main.jsx ADDED Viewed

	@@ -0,0 +1,10 @@

+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

frontend/src/useAuth.js ADDED Viewed

	@@ -0,0 +1,4 @@

+import { useContext } from 'react';
+import { AuthContext } from './authContext';
+export const useAuth = () => useContext(AuthContext);

frontend/vite.config.js ADDED Viewed

	@@ -0,0 +1,11 @@

+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    react(),
+    tailwindcss()
+  ],
+})