Overview

Project Overview

The Analytic Hierarchy Process (AHP) app is a Vite + React single-page application that helps teams create, edit, and review decision analyses directly in the browser. It ships with sample scenarios, includes an admin-only dashboard, and operates entirely on client-side storage so it can run on static hosting without server dependencies.

Key capabilities

• Admin authentication gate protecting the dashboard and editing workflows.
• Creation and editing of AHP analyses with persisted data in the browser.
• Dashboard overview cards, recent analysis lists, and quick links into edit flows.
• Responsive UI composed from Tailwind CSS utilities, Radix UI primitives, and Shadcn-inspired components.
• Client-only data layer that seeds from JSON and syncs via localStorage (with an in-memory fallback for non-browser contexts).

High-level architecture

• React SPA with hash-based routing: Uses react-router-dom v7 hash router so routes work on static hosts without custom rewrite rules.
• Feature organization: Routed pages live in src/pages, shared UI lives in src/components (with components/ui for primitives), and shared logic resides in src/hooks and src/utils.
• State and persistence: Authentication context tracks login status in localStorage, while the AHP data service provides CRUD operations backed by local storage and emits change events to keep views synchronized.
• Styling and visuals: Tailwind CSS powers layout and spacing, Radix UI primitives supply accessibility, and Recharts renders analytics visualizations.

Included libraries (high level)

• React ecosystem: react, react-dom, react-router-dom
• Styling & UI: Tailwind CSS, Radix UI packages, tailwind-merge, clsx, lucide-react, framer-motion, tailwindcss-animate, react-resizable-panels, embla-carousel-react, react-day-picker, cmdk, sonner
• Forms & validation: react-hook-form, zod, @hookform/resolvers
• Data visualization: recharts
• Utilities and helpers: date-fns, class-variance-authority, input-otp, vaul, next-themes, prop-types

Technical Details

Technical Details

Application structure

• Entry point: src/main.jsx mounts the React tree and global providers (e.g., toaster) before rendering the router defined in src/pages/index.jsx.
• Routing: Uses createHashRouter from react-router-dom v7. AuthProvider wraps the router, and RequireAuth protects all routes except /login.
• Layout shell: src/pages/Layout.jsx provides the global navigation, header, and content container shared by routed pages.
• Pages:
  • Dashboard.jsx renders overview cards (StatsOverview), recent analyses (RecentAnalyses), and actions to view/edit/delete analyses.
  • CreateAnalysis.jsx supplies the form-driven experience for building or editing AHP models, using validation helpers and shared UI primitives.
  • Login.jsx presents the admin authentication form.

Authentication flow

• Implemented in src/hooks/useAuth.jsx via a React context and useAuth hook.
• Credentials come from VITE_ADMIN_USERNAME and VITE_ADMIN_PASSWORD with safe defaults for local development.
• Auth state persists in localStorage under ahp:auth:v1; a constant-time password comparison reduces timing-leak risk.
• Protected routes redirect unauthenticated users to /login, and the context exposes login/logout helpers for UI components.

Data layer and APIs

• Seed data lives in src/data/analyses.json and is loaded on first run.
• src/api/entities.js exports DecisionAnalysis, a service exposing CRUD operations against the stored analyses:
  • list(orderBy) sorts results (e.g., -created_date).
  • get(id) retrieves a specific analysis or throws if missing.
  • create(payload) inserts a new analysis, generating IDs and timestamps as needed.
  • update(id, updates) merges changes and refreshes the updated_date stamp.
  • delete(id) removes an analysis by ID.
• Storage writes to localStorage when available, with an in-memory fallback for environments without persistent browser storage.
• After mutations, the service dispatches a custom analyses_changed DOM event so dashboard and list views can refresh automatically.

Styling and UI system

• Tailwind CSS provides utility-first styling; clsx and tailwind-merge help compose class names safely.
• Radix UI primitives and Shadcn-inspired components live under src/components/ui, covering dialogs, popovers, dropdowns, and other interactive elements.
• Icons use lucide-react; motion and animation rely on framer-motion and tailwindcss-animate.
• Charts and summaries on the dashboard use recharts for data visualization.

Utilities and helpers

• src/lib/utils.js offers the cn helper for class name merging.
• src/utils contains routing helpers (createPageUrl, PAGE_ROUTES) and other shared logic reused across pages and components.

Testing and quality

• ESLint configuration lives in eslint.config.js and runs via npm run lint to enforce consistency across React and hook usage.

• The project currently relies on manual and exploratory testing alongside linting; no automated test suite is configured in the repository.

• ChatOps interface lets teams approve or override automated fixes.

• Pluggable policy hooks support vendor-specific add-ons.