create-jinmankn-app 1.0.0

package/templates/blueprint/frontend/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "blueprint-frontend",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.7.9",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.28.1"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.8",
+    "@vitejs/plugin-react": "^4.3.4",
+    "tailwindcss": "^4.1.8",
+    "vite": "^6.0.6"
+  }
+}

package/templates/blueprint/frontend/public/favicon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
+  <rect width="32" height="32" rx="6" fill="#2563eb"/>
+  <text x="16" y="22" text-anchor="middle" fill="white" font-size="14" font-family="system-ui,sans-serif" font-weight="700">B</text>
+</svg>

package/templates/blueprint/frontend/src/App.jsx

@@ -0,0 +1,78 @@
+import { Routes, Route, Navigate } from 'react-router-dom';
+
+import ProtectedRoute from './components/ProtectedRoute';
+
+import DashboardLayout from './components/DashboardLayout';
+
+import Login from './pages/Login';
+
+import Register from './pages/Register';
+
+import DashboardHome from './pages/DashboardHome';
+
+import Items from './pages/Items';
+
+import Report from './pages/Report';
+
+import Profile from './pages/Profile';
+
+
+
+function App() {
+
+  return (
+
+    <Routes>
+
+      <Route path="/login" element={<Login />} />
+
+      <Route path="/register" element={<Register />} />
+
+
+
+      <Route
+
+        path="/dashboard"
+
+        element={
+
+          <ProtectedRoute>
+
+            <DashboardLayout />
+
+          </ProtectedRoute>
+
+        }
+
+      >
+
+        {/* dashboard routes — add a <Route> here when you add a new <Link> in DashboardLayout.jsx */}
+
+        <Route index element={<DashboardHome />} />
+
+        <Route path="items" element={<Items />} />
+
+        <Route path="report" element={<Report />} />
+
+        <Route path="profile" element={<Profile />} />
+
+      </Route>
+
+
+
+      <Route path="/items" element={<Navigate to="/dashboard/items" replace />} />
+
+      <Route path="/" element={<Navigate to="/dashboard" replace />} />
+
+      <Route path="*" element={<Navigate to="/dashboard" replace />} />
+
+    </Routes>
+
+  );
+
+}
+
+
+
+export default App;
+

package/templates/blueprint/frontend/src/assets/logo.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="none">
+  <rect width="40" height="40" rx="8" fill="#1e293b"/>
+  <text x="20" y="27" text-anchor="middle" fill="white" font-size="18" font-family="system-ui,sans-serif" font-weight="700">B</text>
+</svg>

package/templates/blueprint/frontend/src/components/DashboardLayout.jsx

@@ -0,0 +1,103 @@
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+import { Link, Outlet, useNavigate } from 'react-router-dom';
+import logo from '../assets/logo.svg';
+
+
+function DashboardLayout() {
+  const navigate = useNavigate();
+  const [user, setUser] = useState(null);
+  const [error, setError] = useState('');
+
+  const handleRetrieve = async () => {
+    const storedUser = localStorage.getItem('user');
+    if (storedUser) {
+      setUser(JSON.parse(storedUser));
+    }
+
+    try {
+      const response = await axios.get('http://localhost:5000/api/auth/me', {
+        headers: {
+          Authorization: `Bearer ${localStorage.getItem('token')}`,
+        },
+      });
+      setUser(response.data.user);
+      localStorage.setItem('user', JSON.stringify(response.data.user));
+    } catch (err) {
+      if (!storedUser) {
+        setError(err.response?.data?.message || 'Could not load user');
+      }
+      console.error('Server Error:', err.response?.data || err.message);
+    }
+  };
+
+  useEffect(() => {
+    handleRetrieve();
+  }, []);
+
+  const handleLogout = () => {
+    localStorage.removeItem('token');
+    localStorage.removeItem('user');
+    navigate('/login');
+  };
+
+  return (
+    <div className="min-h-screen bg-slate-100">
+      <aside className="fixed inset-y-0 left-0 w-64 bg-slate-900 text-slate-100 flex flex-col">
+        <div className="px-5 py-6 border-b border-slate-700">
+          {/* <img src={logo} alt="" className="h-9 w-9 mb-3" /> */}
+          <p className="text-xs font-semibold uppercase tracking-wider text-slate-400">Blueprint</p>
+          <h1 className="text-lg font-bold text-white mt-1">Dashboard</h1>
+        </div>
+
+        {/* Sidebar links — add or edit <Link> lines here. Change the text to rename a link. */}
+        <div className="flex-1 px-3 py-4 space-y-1">
+          <Link to="/dashboard" className="block rounded-lg px-3 py-2.5 text-sm font-medium text-slate-300 hover:bg-slate-800 hover:text-white transition-colors">
+            Overview
+          </Link>
+          <Link to="/dashboard/items" className="block rounded-lg px-3 py-2.5 text-sm font-medium text-slate-300 hover:bg-slate-800 hover:text-white transition-colors">
+            Items
+          </Link>
+          <Link to="/dashboard/profile" className="block rounded-lg px-3 py-2.5 text-sm font-medium text-slate-300 hover:bg-slate-800 hover:text-white transition-colors">
+            Profile
+          </Link>
+          <Link to="/dashboard/report" className="block rounded-lg px-3 py-2.5 text-sm font-medium text-slate-300 hover:bg-slate-800 hover:text-white transition-colors">
+            Report
+          </Link>
+        </div>
+
+        <div className="px-4 py-4 border-t border-slate-700">
+          {error && <p className="text-xs text-red-400 mb-2">{error}</p>}
+          {user && (
+            <p className="text-sm font-medium text-white truncate">{user.name}</p>
+          )}
+          {user && (
+            <p className="text-xs text-slate-400 truncate mt-0.5">{user.email}</p>
+          )}
+          <button
+            type="button"
+            onClick={handleLogout}
+            className="mt-3 w-full text-sm font-medium text-slate-300 hover:text-white border border-slate-600 rounded-lg px-3 py-2 hover:bg-slate-800 transition-colors"
+          >
+            Log out
+          </button>
+        </div>
+      </aside>
+
+      <div className="ml-64 flex min-h-screen flex-col">
+        <header className="bg-white border-b border-slate-200 px-6 py-4">
+          <p className="text-sm text-slate-500">Welcome back</p>
+          <h2 className="text-xl font-semibold text-slate-800">
+            {user ? `Hello, ${user.name}` : 'Dashboard'}
+          </h2>
+        </header>
+
+        <main className="flex-1 p-6 overflow-auto">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  );
+}
+
+export default DashboardLayout;

package/templates/blueprint/frontend/src/components/ProtectedRoute.jsx

@@ -0,0 +1,18 @@
+// this component is helping us to protect our routes so that only authenticated users can access the routes
+import { Navigate } from 'react-router-dom';
+
+// this function is firstly checking if the user is authenticated by checking the token in the localStorage
+// if the user is not authenticated, it will redirect the user to the login page
+// if the user is authenticated, it will return the children components
+//and the children component is the component that we want to protect
+function ProtectedRoute({ children }) {
+  const token = localStorage.getItem('token');
+
+  if (!token) {
+    return <Navigate to="/login" replace />;
+  }
+
+  return children;
+}
+
+export default ProtectedRoute;

package/templates/blueprint/frontend/src/index.css

@@ -0,0 +1 @@
+@import 'tailwindcss';

package/templates/blueprint/frontend/src/main.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+);

package/templates/blueprint/frontend/src/pages/DashboardHome.jsx

@@ -0,0 +1,74 @@
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+import { Link } from 'react-router-dom';
+
+function DashboardHome() {
+  const [itemCount, setItemCount] = useState(null);
+  const [error, setError] = useState('');
+
+  const handleRetrieve = async () => {
+    try {
+      const response = await axios.get('http://localhost:5000/api/items', {
+        headers: {
+          Authorization: `Bearer ${localStorage.getItem('token')}`,
+        },
+      });
+      setItemCount(response.data.items.length);
+    } catch (err) {
+      setError(err.response?.data?.message || 'Could not load overview');
+      console.error('Server Error:', err.response?.data || err.message);
+    }
+  };
+
+  useEffect(() => {
+    handleRetrieve();
+  }, []);
+
+  return (
+    <div className="max-w-4xl">
+      <h1 className="text-2xl font-bold text-slate-800 mb-2">Overview</h1>
+      <p className="text-slate-600 mb-8">
+        Use the sidebar to move between sections of your dashboard.
+      </p>
+
+      {error && (
+        <p className="mb-4 text-sm text-red-600 bg-red-50 border border-red-200 rounded px-3 py-2">
+          {error}
+        </p>
+      )}
+
+      <div className="grid gap-4 sm:grid-cols-2">
+        <div className="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
+          <p className="text-sm font-medium text-slate-500">Total items</p>
+          <p className="text-3xl font-bold text-slate-800 mt-2">
+            {itemCount === null ? '—' : itemCount}
+          </p>
+          <Link
+            to="/dashboard/items"
+            className="inline-block mt-4 text-sm font-medium text-blue-600 hover:underline"
+          >
+            Manage items →
+          </Link>
+        </div>
+
+        <div className="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
+          <p className="text-sm font-medium text-slate-500">Quick links</p>
+          <ul className="mt-3 space-y-2 text-sm">
+            <li>
+              <Link to="/dashboard/items" className="text-blue-600 hover:underline">
+                Items — create and edit
+              </Link>
+            </li>
+            <li>
+              <Link to="/dashboard/profile" className="text-blue-600 hover:underline">
+                Profile — account details
+              </Link>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default DashboardHome;

package/templates/blueprint/frontend/src/pages/Items.jsx

@@ -0,0 +1,243 @@
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+
+function Items() {
+  const [items, setItems] = useState([]);
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const [error, setError] = useState('');
+  const [message, setMessage] = useState('');
+  const [editId, setEditId] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [submitting, setSubmitting] = useState(false);
+
+  const getAuthHeaders = () => ({
+    Authorization: `Bearer ${localStorage.getItem('token')}`,
+  });
+
+  const handleRetrieve = async () => {
+    try {
+      const response = await axios.get('http://localhost:5000/api/items', {
+        headers: getAuthHeaders(),
+      });
+      setItems(response.data.items);
+    } catch (err) {
+      setError(err.response?.data?.message || 'Failed to load items');
+      console.error('Server Error:', err.response?.data || err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    handleRetrieve();
+  }, []);
+
+  const handleDelete = async (id) => {
+    if (!window.confirm('Delete this item?')) return;
+
+    setError('');
+    try {
+      await axios.delete(`http://localhost:5000/api/items/${id}`, {
+        headers: getAuthHeaders(),
+      });
+      setMessage('Item deleted successfully');
+      if (editId === id) {
+        setTitle('');
+        setDescription('');
+        setEditId(null);
+      }
+      handleRetrieve();
+    } catch (err) {
+      setError(err.response?.data?.message || 'Delete failed');
+      console.error('Server Error:', err.response?.data || err.message);
+    }
+  };
+
+  const handleEdit = (item) => {
+    setEditId(item._id);
+    setTitle(item.title);
+    setDescription(item.description || '');
+    setMessage('');
+    setError('');
+  };
+
+  const handleUpdate = async (e) => {
+    e.preventDefault();
+    if (!editId) return;
+
+    setSubmitting(true);
+    setError('');
+    try {
+      await axios.put(
+        `http://localhost:5000/api/items/${editId}`,
+        { title, description },
+        { headers: getAuthHeaders() },
+      );
+      setMessage('Item updated successfully');
+      setTitle('');
+      setDescription('');
+      setEditId(null);
+      handleRetrieve();
+    } catch (err) {
+      setError(err.response?.data?.message || 'Update failed');
+      console.error('Server Error:', err.response?.data || err.message);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    setMessage('');
+
+    if (editId) {
+      await handleUpdate(e);
+      return;
+    }
+
+    setSubmitting(true);
+    try {
+      await axios.post(
+        'http://localhost:5000/api/items',
+        { title, description },
+        { headers: getAuthHeaders() },
+      );
+      setMessage('Item added successfully');
+      setTitle('');
+      setDescription('');
+      handleRetrieve();
+    } catch (err) {
+      setError(err.response?.data?.message || 'Adding item failed');
+      console.error('Server Error:', err.response?.data || err.message);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const handleCancelEdit = () => {
+    setTitle('');
+    setDescription('');
+    setEditId(null);
+    setError('');
+    setMessage('');
+  };
+
+  return (
+    <div className="max-w-3xl">
+      <h1 className="text-2xl font-bold text-slate-800 mb-6">Items</h1>
+
+      {message && (
+        <p className="mb-4 text-sm text-green-700 bg-green-50 border border-green-200 rounded px-3 py-2">
+          {message}
+        </p>
+      )}
+
+      {error && (
+        <p className="mb-4 text-sm text-red-600 bg-red-50 border border-red-200 rounded px-3 py-2">
+          {error}
+        </p>
+      )}
+
+      <section className="bg-white rounded-lg shadow-md p-6 mb-8">
+        <h2 className="text-lg font-semibold text-slate-800 mb-4">
+          {editId ? 'Edit item' : 'New item'}
+        </h2>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label htmlFor="title" className="block text-sm font-medium text-slate-700 mb-1">
+              Title
+            </label>
+            <input
+              id="title"
+              name="title"
+              type="text"
+              required
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              className="w-full border border-slate-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+          <div>
+            <label
+              htmlFor="description"
+              className="block text-sm font-medium text-slate-700 mb-1"
+            >
+              Description
+            </label>
+            <textarea
+              id="description"
+              name="description"
+              rows={3}
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              className="w-full border border-slate-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+          <div className="flex gap-2">
+            <button
+              type="submit"
+              disabled={submitting}
+              className="bg-blue-600 text-white font-medium px-4 py-2 rounded hover:bg-blue-700 disabled:opacity-50"
+            >
+              {submitting ? 'Saving...' : editId ? 'Update' : 'Create'}
+            </button>
+            {editId && (
+              <button
+                type="button"
+                onClick={handleCancelEdit}
+                className="border border-slate-300 text-slate-700 font-medium px-4 py-2 rounded hover:bg-slate-50"
+              >
+                Cancel
+              </button>
+            )}
+          </div>
+        </form>
+      </section>
+
+      <section>
+        <h2 className="text-lg font-semibold text-slate-800 mb-4">Your items</h2>
+        {loading ? (
+          <p className="text-slate-500">Loading...</p>
+        ) : items.length === 0 ? (
+          <p className="text-slate-500">No items yet. Create one above.</p>
+        ) : (
+          <ul className="space-y-3">
+            {items.map((item) => (
+              <li
+                key={item._id}
+                className="bg-white rounded-lg shadow-sm border border-slate-200 p-4 flex justify-between gap-4"
+              >
+                <div>
+                  <h3 className="font-medium text-slate-800">{item.title}</h3>
+                  {item.description && (
+                    <p className="text-sm text-slate-600 mt-1">{item.description}</p>
+                  )}
+                </div>
+                <div className="flex gap-2 shrink-0">
+                  <button
+                    type="button"
+                    onClick={() => handleEdit(item)}
+                    className="text-sm text-blue-600 hover:underline"
+                  >
+                    Edit
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => handleDelete(item._id)}
+                    className="text-sm text-red-600 hover:underline"
+                  >
+                    Delete
+                  </button>
+                </div>
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+    </div>
+  );
+}
+
+export default Items;

package/templates/blueprint/frontend/src/pages/Login.jsx

@@ -0,0 +1,101 @@
+import { useState } from 'react';
+import axios from 'axios';
+import { Link, useNavigate } from 'react-router-dom';
+
+function Login() {
+  const navigate = useNavigate();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [message, setMessage] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    setMessage('');
+    setLoading(true);
+
+    try {
+      const response = await axios.post('http://localhost:5000/api/auth/login', { email, password });
+      localStorage.setItem('token', response.data.token);
+      localStorage.setItem('user', JSON.stringify(response.data.user));
+      setMessage('Login successful');
+      navigate('/dashboard');
+    } catch (err) {
+      setError(err.response?.data?.message || 'Login failed');
+      console.error('Server Error:', err.response?.data || err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center px-4">
+      <div className="w-full max-w-md bg-white rounded-lg shadow-md p-8">
+        <h1 className="text-2xl font-bold text-slate-800 mb-6">Sign in</h1>
+
+        {message && (
+          <p className="mb-4 text-sm text-green-700 bg-green-50 border border-green-200 rounded px-3 py-2">
+            {message}
+          </p>
+        )}
+
+        {error && (
+          <p className="mb-4 text-sm text-red-600 bg-red-50 border border-red-200 rounded px-3 py-2">
+            {error}
+          </p>
+        )}
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label htmlFor="email" className="block text-sm font-medium text-slate-700 mb-1">
+              Email
+            </label>
+            <input
+              id="email"
+              name="email"
+              type="email"
+              required
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="w-full border border-slate-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+
+          <div>
+            <label htmlFor="password" className="block text-sm font-medium text-slate-700 mb-1">
+              Password
+            </label>
+            <input
+              id="password"
+              name="password"
+              type="password"
+              required
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="w-full border border-slate-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full bg-blue-600 text-white font-medium py-2 rounded hover:bg-blue-700 disabled:opacity-50"
+          >
+            {loading ? 'Signing in...' : 'Sign in'}
+          </button>
+        </form>
+
+        <p className="mt-4 text-sm text-slate-600 text-center">
+          No account?{' '}
+          <Link to="/register" className="text-blue-600 hover:underline">
+            Register
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default Login;