You are an expert AI assistant tasked with generating a single-page React SPA for a SaaS application called 'Tedarikçi Hakları: Adil Sözleşme Takip Platformu' (Supplier Rights: Fair Contract Tracking Platform). This application aims to help small and medium-sized businesses (SMBs) in the food and other supply chain industries manage their contracts with suppliers transparently, proactively identify potential disputes, and foster fair trade practices.
PROJECT OVERVIEW:
The core problem this application addresses is the common issue of powerful buyers exploiting or 'screwing over' their suppliers, often due to opaque contract terms, unequal bargaining power, and lack of clear tracking mechanisms. Many SMBs lack the sophisticated systems to monitor contractual obligations from both sides, leading to disputes, damaged relationships, and financial losses. 'Tedarikçi Hakları' provides a centralized, transparent platform for managing supplier contracts. Its value proposition lies in enabling fair trade, reducing disputes, improving supplier relationships, and ensuring contract compliance through proactive monitoring and alerts. It empowers suppliers by providing them with visibility into their obligations and buyers by helping them maintain ethical and compliant supplier relationships.
TECH STACK:
- Frontend Framework: React (using functional components and Hooks)
- State Management: Zustand (lightweight and efficient for this scope)
- Styling: Tailwind CSS (for rapid UI development and utility-first approach)
- Routing: React Router DOM (for single-page navigation)
- UI Components: Headless UI (for accessible and customizable components like modals, dropdowns)
- Form Handling: React Hook Form (for efficient form validation)
- Icons: Heroicons
- Date Handling: date-fns
- Build Tool: Vite (for fast development server and build times)
CORE FEATURES & USER FLOWS:
1. **Supplier & Contract Management:**
* **User Flow:** User navigates to 'Suppliers' or 'Contracts' section. Clicks 'Add New'. Fills out a form with supplier details (Name, Contact Person, Email, Phone, Address) and contract details (Contract Name/ID, Supplier, Start Date, End Date, Key Terms, Document Upload). Clicks 'Save'. The new supplier/contract appears in a sortable, filterable list.
* **Details:** This involves forms for adding/editing suppliers and contracts. A key part is defining 'Key Terms' which will be structured data points for tracking (e.g., Payment Term: 'Net 30', Delivery Window: '2-3 days', Price Escalation Clause: 'CPI + 2%', Minimum Order Quantity: '1000 units'). Allow uploading of the original contract document (PDF, DOCX).
2. **Contractual Obligation Tracking:**
* **User Flow:** On the contract details page or a dedicated 'Tracking' dashboard, users can log specific events or data points related to contract terms. For example, for a 'Payment Term: Net 30' contract, the user logs an invoice date and amount. The system automatically calculates the due date.
* **Details:** This is the core of the value proposition. For each defined 'Key Term', the system needs a way to track its status. Examples:
* *Payment Terms:* Log invoice date, amount, payment date. System highlights overdue or early payments.
* *Delivery Times:* Log order date, promised delivery date, actual delivery date. System calculates variance.
* *Pricing:* Log unit price at different points in time. System can compare against agreed-upon clauses (e.g., CPI + 2%).
* *Quantity:* Log delivered quantity vs. Minimum Order Quantity (MOQ) or agreed volumes.
* This feature will require flexible input fields based on the type of term being tracked.
3. **Dispute Potential Alert System:**
* **User Flow:** The system automatically scans tracked data against contract terms. If a deviation exceeds a predefined threshold (e.g., payment is 5 days past due, delivery is 2 days late), an alert is generated. Alerts appear in a notification center and can be flagged for review.
* **Details:** This involves setting up rules engine logic. For instance, if `actualDeliveryDate - promisedDeliveryDate > 2 days` OR `paymentDueDate - today > 5 days`, generate an alert. Users should be able to configure alert thresholds per contract or term type. Alerts should be clear, stating the contract, the term, the deviation, and the severity.
4. **Supplier Performance Dashboard:**
* **User Flow:** A dedicated dashboard view showing key performance indicators (KPIs) for each supplier based on the tracked data. Visualizations (charts, graphs) display on-time delivery rates, payment timeliness, price variance trends, etc.
* **Details:** Aggregate the tracked data into meaningful metrics. For example: '% On-Time Delivery', '% Timely Payments', 'Average Price Variance %'. This provides a quick overview of supplier reliability.
UI/UX DESIGN:
- **Layout:** Clean, modern, dashboard-centric design. A persistent sidebar for navigation (Dashboard, Suppliers, Contracts, Reports, Settings). Main content area displays dynamic information. Use of cards for summarizing information.
- **Color Palette:** Primary: A professional, trustworthy blue (#4A90E2). Secondary: A neutral gray (#F5F7FA for backgrounds). Accent: A warning orange/red for alerts (#F56565), and a success green for positive indicators (#48BB78). Use subtle shades for depth.
- **Typography:** Sans-serif fonts for readability. Main headings: Inter (Bold). Body text: Inter (Regular). Font sizes: H1: 32px, H2: 24px, H3: 18px, Body: 16px, Captions: 14px.
- **Responsive Design:** Mobile-first approach. Sidebar collapses into a hamburger menu on smaller screens. All tables and forms should be responsive, potentially using horizontal scrolling or card-based layouts on mobile. Ensure usability across devices (desktop, tablet, mobile).
- **Key Components:** Data tables with sorting/filtering, forms with validation feedback, cards for summaries, notification badges, modals for confirmations, date pickers, file upload components.
COMPONENT BREAKDOWN:
- `App.jsx`: Main application component, sets up routing.
- `Layout.jsx`: Main layout wrapper including sidebar and header.
- `Sidebar.jsx`: Navigation component with links. Props: `isOpen`, `onClose`.
- `DashboardPage.jsx`: Main landing page showing summary cards and recent alerts.
- `SuppliersPage.jsx`: Displays a list of suppliers, includes search/filter. Child components: `SupplierList.jsx`, `SupplierListItem.jsx`, `AddSupplierModal.jsx`.
- `ContractsPage.jsx`: Displays a list of contracts, includes search/filter. Child components: `ContractList.jsx`, `ContractListItem.jsx`, `AddContractModal.jsx`.
- `ContractDetailsPage.jsx`: Shows detailed view of a single contract, including terms, tracking, and alerts. Child components: `ContractTerms.jsx`, `TrackingForm.jsx`, `AlertsList.jsx`.
- `DataTable.jsx`: Generic table component. Props: `columns`, `data`.
- `Modal.jsx`: Generic modal component. Props: `isOpen`, `onClose`, `children`, `title`.
- `AlertBadge.jsx`: Displays notification count. Props: `count`.
- `FormInput.jsx`, `DatePickerInput.jsx`, `FileUploadInput.jsx`: Custom form input components.
DATA MODEL (using Zustand stores):
- `supplierStore`: { suppliers: [], addSupplier, editSupplier, deleteSupplier }
- `contractStore`: { contracts: [], addContract, editContract, deleteContract }
- `trackingStore`: { trackingData: [], addTrackingEntry, editTrackingEntry }
- `alertStore`: { alerts: [], addAlert, dismissAlert }
Mock Data Format Examples:
```javascript
// Supplier Mock Data
{
id: 'supp_123',
name: 'Le Gout Foods',
contactPerson: 'Alice Dubois',
email: 'alice.dubois@legout.com',
phone: '+1-555-0101',
address: '12 Rue de la Paix, Paris'
}
// Contract Mock Data
{
id: 'cont_abc',
supplierId: 'supp_123',
name: 'Q3 Spice Order',
startDate: '2024-07-01',
endDate: '2024-09-30',
keyTerms: [
{ id: 'term_1', type: 'PAYMENT_TERM', value: 'Net 30', description: 'Payment due within 30 days of invoice date' },
{ id: 'term_2', type: 'DELIVERY_WINDOW', value: '2-4 days', description: 'Standard delivery time' },
{ id: 'term_3', type: 'PRICE_CLAUSE', value: 'Base + 5%', description: '5% increase over base price for this quarter' },
{ id: 'term_4', type: 'MIN_ORDER_QTY', value: '500 units', description: 'Minimum order quantity per shipment' }
],
documentUrl: '/docs/cont_abc.pdf'
}
// Tracking Data Mock (example for PAYMENT_TERM)
{
id: 'track_xyz',
contractId: 'cont_abc',
termId: 'term_1', // Corresponds to 'PAYMENT_TERM'
dateLogged: '2024-07-15', // Date the invoice was received/generated
value: { amount: 1500.00, currency: 'USD' }, // Invoice amount
dueDate: '2024-08-14', // Calculated based on 'Net 30'
status: 'PENDING_PAYMENT' // PENDING_PAYMENT, PAID, OVERDUE
}
// Tracking Data Mock (example for DELIVERY_WINDOW)
{
id: 'track_pqr',
contractId: 'cont_abc',
termId: 'term_2', // Corresponds to 'DELIVERY_WINDOW'
orderDate: '2024-07-10',
promisedDeliveryDate: '2024-07-13', // Based on term_2
actualDeliveryDate: '2024-07-16',
status: 'DELAYED' // ON_TIME, DELAYED, EARLY
}
// Alert Mock Data
{
id: 'alert_789',
contractId: 'cont_abc',
termId: 'term_1',
alertType: 'PAYMENT_OVERDUE',
message: 'Payment for Invoice #INV001 is 5 days overdue.',
severity: 'HIGH',
isDismissed: false,
timestamp: '2024-08-19T10:00:00Z'
}
```
ANIMATIONS & INTERACTIONS:
- **Page Transitions:** Subtle fade-in/fade-out for page changes using `Framer Motion` or similar library.
- **Hover Effects:** Slight lift/shadow effect on interactive elements like buttons and list items. Color changes on table rows when hovered.
- **Loading States:** Use spinners or skeleton loaders for data fetching. Display 'Loading...' messages clearly.
- **Micro-interactions:** Button click feedback (slight scale down). Form validation success/error animations (e.g., input border color change). Smooth expand/collapse animations for accordions or expandable rows.
- **Modal Animations:** Slide-in or fade-in/out for modals.
EDGE CASES:
- **Empty States:** Display friendly messages and clear calls to action when lists (suppliers, contracts, alerts) are empty (e.g., 'No suppliers added yet. Click here to add your first supplier.').
- **Error Handling:** Global error handling for API calls. Specific error messages for form validation (e.g., 'Email is invalid', 'Payment term must be a number'). Display user-friendly error messages, not raw error objects.
- **Validation:** Implement robust client-side validation using React Hook Form for all forms. Server-side validation is assumed for a real backend.
- **Accessibility (a11y):** Use semantic HTML. Ensure keyboard navigability for all interactive elements. Use ARIA attributes where necessary. Ensure sufficient color contrast. Headless UI components provide good out-of-the-box accessibility.
- **File Uploads:** Handle various file types, display upload progress, manage errors during upload.
- **Date Handling:** Ensure correct timezone handling and clear date formatting for users.
DEPLOYMENT NOTES:
- **Build Configuration:** Configure Vite for production builds (`vite build`). Optimize assets (minification, code splitting).
- **Environment Variables:** Use `.env` files for managing API keys, base URLs, etc. (`VITE_API_URL`). Ensure sensitive variables are not committed to version control.
- **Performance Optimizations:** Code splitting using React.lazy and Suspense. Memoization with `React.memo` for potentially expensive components. Optimize image loading if any are used.
- **Hosting:** Recommend static hosting platforms like Vercel, Netlify, or AWS S3/CloudFront for the SPA frontend.
- **API Integration:** The prompt assumes a RESTful API backend. Define API endpoints for CRUD operations on suppliers, contracts, tracking data, and alerts. The current prompt focuses solely on the frontend SPA generation.