Contract Management Platform

A contract lifecycle management dashboard built with React + TypeScript. It allows users to design reusable blueprints, generate contract instances, and manage their status through a strict workflow. 

Features

Blueprint Builder: Create templates with configurable fields (Text, Date, Signature, Checkbox). Supports intuitive drag-and-drop reordering.

Lifecycle Engine: Contracts strictly follow the Created → Approved → Sent → Signed → Locked flow. State transitions are validated at the data layer.

Revocation Logic: Contracts can be revoked from early stages (Created, Approved, Sent) but become immutable once Signed or Locked.

Role-Based Permissions: Fields can be designated as 'Editable by Manager' or 'Editable by Client'. The UI adapts to the current user's role (simulated) and contract status, unlocking only the relevant fields for input.

Mobile-First Design: Fully responsive layout optimized for all devices. Features a vertical-stack dashboard on mobile, touch-friendly touch targets, and a collapsible navigation system.

Dashboard: Filterable views (Active, Pending, Signed, Archived) with search by contract or blueprint name.

Assumptions

Single User Mode: The app demonstrates the full lifecycle from one view. The user plays both roles—internal manager (approving, sending) and external client (signing). Role-based hints in the UI clarify which action belongs to whom.

No Backend: All data lives in localStorage. This was intentional to keep the focus on frontend architecture. Swapping in an API later would just mean replacing the Zustand persist middleware with async fetches.

Signature is Visual Only: The signature pad uses HTML5 Canvas. It captures the drawing as a data URL but doesn't do any cryptographic verification. It's a simulation for demo purposes.



Limitations

No undo/redo for actions

No PDF export