create-react-my-app 1.0.0

package/template/frontend/src/pages/report.jsx

@@ -0,0 +1,90 @@
+import { useState } from 'react';
+import Navbar from '../components/Navbar';
+import Button from '../components/Button';
+import Table from '../components/Table';
+import { api } from '../config/api';
+
+const columns = [
+  { key: 'id', label: 'ID' },
+  { key: 'title', label: 'Title' },
+  { key: 'category', label: 'Category' },
+  { key: 'amount', label: 'Amount', render: (v) => `$${Number(v).toFixed(2)}` },
+  { key: 'report_date', label: 'Date' },
+];
+
+const Report = () => {
+  const [reportData, setReportData] = useState([]);
+  const [date, setDate] = useState(new Date().toISOString().split('T')[0]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [message, setMessage] = useState('');
+
+  const fetchReport = async () => {
+    setLoading(true);
+    setError('');
+    setMessage('');
+    try {
+      const res = await api.get(`/report?date=${date}`);
+      setReportData(res.data.data ?? []);
+      setMessage(res.data.message);
+    } catch (err) {
+      setError(err.response?.data?.message || 'Could not load report');
+      setReportData([]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const exportCsv = () => {
+    if (!reportData.length) return;
+    const headers = columns.map((c) => c.label).join(',');
+    const rows = reportData.map((row) => columns.map((c) => row[c.key]).join(','));
+    const blob = new Blob([[headers, ...rows].join('\n')], { type: 'text/csv' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `report_${date}.csv`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <>
+      <Navbar />
+      <div className="page-shell max-w-6xl mx-auto px-5 py-10 sm:py-14">
+        <header className="mb-10 animate-fade-in">
+          <h1 className="text-2xl sm:text-3xl font-semibold text-white">Report</h1>
+          <p className="text-neutral-500 text-sm mt-2">Generate a report for any date.</p>
+        </header>
+
+        <div className="border border-neutral-800 rounded-sm p-6 mb-8 animate-fade-in no-print">
+          <div className="flex flex-col sm:flex-row gap-4">
+            <input
+              type="date"
+              value={date}
+              onChange={(e) => setDate(e.target.value)}
+              className="flex-1 h-11 px-4 bg-black border border-neutral-700 rounded-sm text-white focus:outline-none focus:border-white transition-colors"
+            />
+            <Button size="md" theme="white" onClick={fetchReport} loading={loading} className="sm:min-w-[160px]">
+              Generate
+            </Button>
+          </div>
+          {error && <p className="text-sm text-neutral-400 mt-4 text-center">{error}</p>}
+          {message && !error && <p className="text-sm text-neutral-500 mt-4 text-center">{message}</p>}
+          {reportData.length > 0 && (
+            <div className="flex flex-wrap gap-3 mt-6 pt-6 border-t border-neutral-800">
+              <Button size="sm" theme="white" onClick={exportCsv}>Export CSV</Button>
+              <Button size="sm" theme="black" onClick={() => window.print()}>Print</Button>
+            </div>
+          )}
+        </div>
+
+        {(reportData.length > 0 || (message && !error)) && (
+          <Table title={`Results — ${date}`} columns={columns} data={reportData} emptyMessage="No entries for this date" />
+        )}
+      </div>
+    </>
+  );
+};
+
+export default Report;

package/template/frontend/src/pages/signup.jsx

@@ -0,0 +1,46 @@
+import { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import Form from '../components/Form';
+import { api } from '../config/api';
+
+const fields = [
+  { name: 'username', label: 'Username', placeholder: 'Choose username', required: true, minLength: 2 },
+  { name: 'password', label: 'Password', type: 'password', placeholder: 'Create password', required: true },
+  {
+    name: 'confirmPassword', label: 'Confirm', type: 'password', placeholder: 'Repeat password', required: true, validatePassword: false,
+    validate: (v, all) => (all?.password && v !== all.password ? 'Passwords do not match' : ''),
+  },
+];
+
+const Signup = () => {
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const navigate = useNavigate();
+
+  const handleSubmit = async (data) => {
+    try {
+      setLoading(true);
+      setError('');
+      await api.post('/auth/register', { username: data.username, password: data.password });
+      navigate('/trial');
+    } catch (err) {
+      setError(err.response?.data?.message || 'Signup failed');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center px-5 py-16">
+      <div className="w-full max-w-md animate-fade-in">
+        <p className="text-center text-xs uppercase tracking-[0.3em] text-neutral-500 mb-8">Get started</p>
+        <Form title="Sign up" fields={fields} onSubmit={handleSubmit} loading={loading} error={error} submitText="Create account" submitTheme="white" />
+        <p className="text-center text-sm text-neutral-500 mt-8">
+          Have an account? <Link to="/login" className="text-white hover:underline">Sign in</Link>
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default Signup;

package/template/frontend/src/pages/trial.jsx

@@ -0,0 +1,87 @@
+import { useState } from 'react';
+import Navbar from '../components/Navbar';
+import Form from '../components/Form';
+import Table from '../components/Table';
+
+const formFields = [
+  { name: 'name', label: 'Name', placeholder: 'Item name', required: true },
+  {
+    name: 'category',
+    label: 'Category',
+    type: 'select',
+    placeholder: 'Pick category',
+    required: true,
+    options: [
+      { value: 'electronics', label: 'Electronics' },
+      { value: 'accessories', label: 'Accessories' },
+      { value: 'office', label: 'Office' },
+    ],
+  },
+  { name: 'quantity', label: 'Quantity', type: 'number', placeholder: '0', required: true, min: 1 },
+  { name: 'price', label: 'Price', type: 'number', placeholder: '0.00', required: true, min: 0 },
+];
+
+const columns = [
+  { key: 'name', label: 'Name' },
+  { key: 'category', label: 'Category' },
+  { key: 'quantity', label: 'Qty' },
+  { key: 'price', label: 'Price', render: (v) => `$${Number(v).toFixed(2)}` },
+];
+
+const Trial = () => {
+  const [items, setItems] = useState([
+    { id: 1, name: 'Keyboard', category: 'electronics', quantity: 12, price: 49.99 },
+    { id: 2, name: 'Notebook', category: 'office', quantity: 40, price: 3.5 },
+  ]);
+  const [editingId, setEditingId] = useState(null);
+
+  const handleSubmit = (data) => {
+    if (editingId) {
+      setItems((prev) => prev.map((item) => (item.id === editingId ? { ...item, ...data, id: editingId } : item)));
+      setEditingId(null);
+    } else {
+      setItems((prev) => [...prev, { id: Date.now(), ...data }]);
+    }
+  };
+
+  const editingItem = items.find((item) => item.id === editingId);
+
+  return (
+    <>
+      <Navbar />
+      <div className="page-shell max-w-full mx-auto px-5 py-10 sm:py-14">
+        <header className="mb-10 animate-fade-in">
+          <h1 className="text-2xl sm:text-3xl font-semibold text-white tracking-tight">Form & Table</h1>
+          <p className="text-neutral-500 mt-2 text-sm max-w-lg">
+            Add rows with the form, then edit or remove them from the table.
+          </p>
+        </header>
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-10 items-start">
+          <Form
+            key={editingId ?? 'new'}
+            title={editingId ? 'Edit item' : 'Add item'}
+            fields={formFields}
+            onSubmit={handleSubmit}
+            submitText={editingId ? 'Save changes' : 'Add to table'}
+            submitTheme="white"
+            initialValues={editingItem ?? {}}
+          />
+          <Table
+            title="Items"
+            columns={columns}
+            data={items}
+            onEdit={(row) => setEditingId(row.id)}
+            onDelete={(row) => {
+              setItems((prev) => prev.filter((i) => i.id !== row.id));
+              if (editingId === row.id) setEditingId(null);
+            }}
+            emptyMessage="Nothing here yet — add something above"
+          />
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Trial;

package/template/frontend/vite.config.js

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  server: {
+    port: 5173,
+  },
+});