create-sales 1.0.0

package/frontend-project/src/pages/Users.tsx

@@ -0,0 +1,199 @@
+import { useState, useEffect } from 'react';
+import { getUsers, createUser, updateUser, deleteUser } from '../api/users';
+import { User } from '../types';
+import Table from '../components/common/Table';
+import Modal from '../components/common/Modal';
+import { useAuth } from '../context/AuthContext';
+
+const defaultForm = { UserName: '', Password: '', UserRole: 'agent' };
+
+const Users = () => {
+  const { user: currentUser } = useAuth();
+  const [users, setUsers] = useState<User[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [deleteModalOpen, setDeleteModalOpen] = useState(false);
+  const [editUser, setEditUser] = useState<User | null>(null);
+  const [deleteId, setDeleteId] = useState<number | null>(null);
+  const [form, setForm] = useState(defaultForm);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState('');
+  const [search, setSearch] = useState('');
+
+  const fetchUsers = async () => {
+    setLoading(true);
+    try {
+      const data = await getUsers();
+      setUsers(data);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => { fetchUsers(); }, []);
+
+  const openAdd = () => {
+    setEditUser(null);
+    setForm(defaultForm);
+    setError('');
+    setModalOpen(true);
+  };
+
+  const openEdit = (u: User) => {
+    setEditUser(u);
+    setForm({ UserName: u.UserName, Password: '', UserRole: u.UserRole });
+    setError('');
+    setModalOpen(true);
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSaving(true);
+    setError('');
+    try {
+      if (editUser) {
+        const payload: { UserName: string; UserRole: string; Password?: string } = {
+          UserName: form.UserName,
+          UserRole: form.UserRole,
+        };
+        if (form.Password) payload.Password = form.Password;
+        await updateUser(editUser.UserID, payload);
+      } else {
+        await createUser(form);
+      }
+      setModalOpen(false);
+      fetchUsers();
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'An error occurred');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!deleteId) return;
+    if (deleteId === currentUser?.UserID) {
+      alert('You cannot delete your own account.');
+      return;
+    }
+    try {
+      await deleteUser(deleteId);
+      setDeleteModalOpen(false);
+      fetchUsers();
+    } catch (err: unknown) {
+      alert(err instanceof Error ? err.message : 'Delete failed');
+    }
+  };
+
+  const filtered = users.filter(
+    (u) =>
+      u.UserName.toLowerCase().includes(search.toLowerCase()) ||
+      u.UserRole.toLowerCase().includes(search.toLowerCase())
+  );
+
+  const columns = [
+    { key: 'UserID', label: '#' },
+    { key: 'UserName', label: 'Username' },
+    { key: 'UserRole', label: 'Role', render: (u: User) => (
+      <span className={`px-2 py-1 rounded-full text-xs font-medium ${
+        u.UserRole === 'admin' ? 'bg-purple-100 text-purple-700' : 'bg-blue-100 text-blue-700'
+      }`}>{u.UserRole}</span>
+    )},
+    {
+      key: 'actions', label: 'Actions',
+      render: (u: User) => (
+        <div className="flex gap-2">
+          <button onClick={() => openEdit(u)} className="bg-blue-50 hover:bg-blue-100 text-blue-700 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors">Edit</button>
+          {u.UserID !== currentUser?.UserID && (
+            <button onClick={() => { setDeleteId(u.UserID); setDeleteModalOpen(true); }} className="bg-red-50 hover:bg-red-100 text-red-700 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors">Delete</button>
+          )}
+        </div>
+      ),
+    },
+  ];
+
+  if (currentUser?.UserRole !== 'admin') {
+    return (
+      <div className="flex items-center justify-center min-h-[60vh]">
+        <div className="text-center">
+          <p className="text-4xl mb-3">🚫</p>
+          <h2 className="text-xl font-bold text-gray-800">Access Denied</h2>
+          <p className="text-gray-500 mt-2">Only administrators can manage users.</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-5">
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-800">User Management</h1>
+          <p className="text-gray-500 text-sm mt-1">Manage system users and their roles</p>
+        </div>
+        <button onClick={openAdd} className="bg-gray-900 hover:bg-gray-700 text-yellow-400 px-5 py-2.5 rounded-xl text-sm font-semibold transition-colors shadow-sm">
+          + Add New User
+        </button>
+      </div>
+
+      <input
+        type="text"
+        placeholder="Search by username or role..."
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+        className="w-full sm:max-w-sm border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-400"
+      />
+
+      <Table columns={columns} data={filtered} keyExtractor={(u) => u.UserID} loading={loading} emptyMessage="No users found." />
+
+      <Modal isOpen={modalOpen} onClose={() => setModalOpen(false)} title={editUser ? 'Edit User' : 'Add New User'}>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {error && <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-600">{error}</div>}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1.5">Username *</label>
+            <input required type="text" value={form.UserName} onChange={(e) => setForm({ ...form, UserName: e.target.value })}
+              className="w-full border border-gray-200 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-400"
+              placeholder="Enter username" />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1.5">
+              Password {editUser ? '(leave blank to keep)' : '*'}
+            </label>
+            <input
+              type="password"
+              required={!editUser}
+              value={form.Password}
+              onChange={(e) => setForm({ ...form, Password: e.target.value })}
+              className="w-full border border-gray-200 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-400"
+              placeholder={editUser ? 'Leave blank to keep current password' : 'Enter password'}
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1.5">Role *</label>
+            <select value={form.UserRole} onChange={(e) => setForm({ ...form, UserRole: e.target.value })}
+              className="w-full border border-gray-200 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-400">
+              <option value="agent">Agent</option>
+              <option value="admin">Admin</option>
+            </select>
+          </div>
+          <div className="flex gap-3 pt-2">
+            <button type="button" onClick={() => setModalOpen(false)} className="flex-1 border border-gray-200 text-gray-700 py-2.5 rounded-lg text-sm hover:bg-gray-50">Cancel</button>
+            <button type="submit" disabled={saving} className="flex-1 bg-gray-900 text-yellow-400 py-2.5 rounded-lg text-sm font-semibold hover:bg-gray-700 disabled:opacity-50">
+              {saving ? 'Saving...' : editUser ? 'Update User' : 'Add User'}
+            </button>
+          </div>
+        </form>
+      </Modal>
+
+      <Modal isOpen={deleteModalOpen} onClose={() => setDeleteModalOpen(false)} title="Confirm Delete" size="sm">
+        <p className="text-gray-600 text-sm mb-4">Are you sure you want to delete this user?</p>
+        <div className="flex gap-3">
+          <button onClick={() => setDeleteModalOpen(false)} className="flex-1 border border-gray-200 text-gray-700 py-2.5 rounded-lg text-sm hover:bg-gray-50">Cancel</button>
+          <button onClick={handleDelete} className="flex-1 bg-red-600 text-white py-2.5 rounded-lg text-sm font-semibold hover:bg-red-700">Delete</button>
+        </div>
+      </Modal>
+    </div>
+  );
+};
+
+export default Users;

package/frontend-project/src/types/index.ts

@@ -0,0 +1,63 @@
+export interface User {
+  UserID: number;
+  UserName: string;
+  UserRole: 'admin' | 'agent';
+}
+
+export interface Bus {
+  BusID: number;
+  PlateNumber: string;
+  TotalSeats: number;
+  BusType: string;
+}
+
+export interface Schedule {
+  ScheduleID: number;
+  BusID: number;
+  RouteName: string;
+  DeparturePoint: string;
+  Destination: string;
+  DepartureTime: string;
+  EstimatedArrivalTime: string;
+  TicketPrice: number;
+  ScheduleStatus: 'Active' | 'Inactive' | 'Cancelled';
+  PlateNumber?: string;
+  BusType?: string;
+  TotalSeats?: number;
+}
+
+export interface Booking {
+  BookingID: number;
+  ScheduleID: number;
+  UserID: number;
+  PassengerName: string;
+  PassengerGender: 'Male' | 'Female' | 'Other';
+  PassengerPhone: string;
+  SeatNumber: string;
+  PaymentStatus: 'Pending' | 'Paid' | 'Cancelled';
+  BookingDate: string;
+  RouteName?: string;
+  DeparturePoint?: string;
+  Destination?: string;
+  DepartureTime?: string;
+  PlateNumber?: string;
+  UserName?: string;
+  TicketPrice?: number;
+}
+
+export interface AuthContextType {
+  user: User | null;
+  login: (username: string, password: string) => Promise<void>;
+  logout: () => Promise<void>;
+  loading: boolean;
+}
+
+export interface PassengerReport {
+  RouteName: string;
+  DeparturePoint: string;
+  Destination: string;
+  DepartureTime: string;
+  PlateNumber: string;
+  TotalPassengers: number;
+  Passengers: Booking[];
+}

package/frontend-project/src/utils/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/frontend-project/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "ignoreDeprecations": "6.0",
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Path mapping */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src", "vite.config.ts"]
+}

package/frontend-project/vite.config.ts

@@ -0,0 +1,19 @@
+import tailwindcss from "@tailwindcss/vite";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+import { viteSingleFile } from "vite-plugin-singlefile";
+
+const srcPath = decodeURIComponent(new URL("./src", import.meta.url).pathname).replace(
+  /^\/([A-Za-z]:)/,
+  "$1"
+);
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss(), viteSingleFile()],
+  resolve: {
+    alias: {
+      "@": srcPath,
+    },
+  },
+});

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "create-sales",
+  "version": "1.0.0",
+  "description": "npm create sales initializer for a full-stack bus reservation template.",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "bin": {
+    "create-sales": "bin/create-sales.js"
+  },
+  "workspaces": [
+    "frontend-project",
+    "backend-project"
+  ],
+  "scripts": {
+    "dev:frontend": "npm run dev --workspace frontend-project",
+    "build:frontend": "npm run build --workspace frontend-project",
+    "dev:backend": "npm run dev --workspace backend-project",
+    "start:backend": "npm start --workspace backend-project"
+  },
+  "keywords": [
+    "template",
+    "full-stack",
+    "react",
+    "vite",
+    "typescript",
+    "express",
+    "mysql",
+    "tailwindcss",
+    "bus-reservation"
+  ],
+  "files": [
+    "README.md",
+    ".gitignore",
+    "bin/create-sales.js",
+    "frontend-project/index.html",
+    "frontend-project/package.json",
+    "frontend-project/tsconfig.json",
+    "frontend-project/vite.config.ts",
+    "frontend-project/src",
+    "backend-project/package.json",
+    "backend-project/.env.example",
+    "backend-project/db.js",
+    "backend-project/server.js",
+    "backend-project/database",
+    "backend-project/middleware",
+    "backend-project/routes"
+  ]
+}