15 KiB
15 KiB
Comprehensive Frontend Integration Requirements & API Contract
- Author: Lead Full-Stack System Architect
- Version: 1.0.0
- Status: Production Specification
- Target Applications: Next.js Storefront App & React Admin SPA
- Base Backend Path:
/api
Executive Summary & Authentication Protocols
This document defines the strict integration contract between the NestJS backend and the two frontend applications (Next.js SSR/SEO Storefront and React SPA Admin Panel).
Authentication Headers
- Public Endpoints: Require no authentication header.
- User Authenticated Endpoints: Require
Authorization: Bearer <accessToken>. - Admin Endpoints: Require
Authorization: Bearer <accessToken>where user role isAdmin.
Domain Specifications
1. Banners & Hero Sliders
Backend Endpoint Specifications
GET /api/banners- Auth: Public
- Response (200 OK):
[ { "id": "uuid-string", "title": "تخصص دارویی از آلمان", "subtitle": "بیش از ۴۰ سال تجربه", "imageUrl": "https://example.com/banner.jpg", "linkUrl": "/products/joints", "position": "home_hero", "isActive": true, "order": 0, "createdAt": "2026-08-06T20:00:00.000Z", "updatedAt": "2026-08-06T20:00:00.000Z" } ]
POST /api/banners- Auth: Admin
- Request Body:
{ "title": "عنوان بنر", "subtitle": "زیرعنوان اختیاری", "imageUrl": "https://example.com/banner.jpg", "linkUrl": "/products/joints", "position": "home_hero", "isActive": true, "order": 1 }
PUT /api/banners/reorder- Auth: Admin
- Request Body:
[ { "id": "uuid-1", "order": 0 }, { "id": "uuid-2", "order": 1 } ]
PATCH /api/banners/:id- Auth: Admin
- Request Body:
Partial<BannerInput>
DELETE /api/banners/:id- Auth: Admin
Admin Panel Action Items
- Create Banners Management Table (
/admin/banners). - Form Modal fields:
title(text, required),subtitle(text),imageUrl(file uploader / URL string, required),linkUrl(text),position(select:home_hero,category_top,sidebar),isActive(toggle switch),order(number). - Implement Drag-and-Drop table rows triggering
PUT /api/banners/reorder.
Storefront (Next.js) Action Items
- Update
frontend/application/components/Hero.tsxandHomeClient.tsxto fetchGET /api/banners. - Filter response by
position === 'home_hero'andisActive === true.
2. Smart Advisor Rules Engine
Backend Endpoint Specifications
GET /api/smart-advisor/rules- Auth: Public
- Response (200 OK):
[ { "id": "rule-uuid", "condition": "مشکلات مفصلی و لنگش", "targetPetType": "سگ", "recommendedProduct": "product-uuid", "reason": "حاوی ۱۰٪ پودر صدف لبسبز برای بازسازی غضروف", "createdAt": "2026-08-06T20:00:00.000Z", "product": { "id": "product-uuid", "nameFa": "کنهیدروکس GAG", "slug": "canhydrox-gag" } } ]
POST /api/smart-advisor/rules- Auth: Admin
- Request Body:
{ "condition": "مشکلات گوارشی", "targetPetType": "گربه", "recommendedProduct": "product-uuid", "reason": "پروبیوتیک حاوی باکتری انتروکوکوس فسیوم" }
PATCH /api/smart-advisor/rules/:id&DELETE /api/smart-advisor/rules/:id- Auth: Admin
Admin Panel Action Items
- Create Smart Advisor Rules Manager (
/admin/smart-advisor). - Form fields:
condition(text),targetPetType(select:سگ,گربه,هر دو),recommendedProduct(searchable product dropdown),reason(textarea).
Storefront (Next.js) Action Items
- Update
frontend/application/components/SmartAdvisor.tsxto queryGET /api/smart-advisor/rules. - Dynamically render recommendation cards based on user's pet selection.
3. Customer & Vet Testimonials
Backend Endpoint Specifications
GET /api/testimonials- Auth: Public
- Response (200 OK):
[ { "id": "testimonial-uuid", "authorName": "دکتر علیرضا محمدی", "roleTitle": "دامپزشک و متخصص جراحی", "avatarUrl": "https://example.com/avatar.jpg", "content": "فرمولاسیون کنهیدروکس کنینا در بهبودی پاهای O شکل سگهای نژاد بزرگ معجزه میکند.", "rating": 5, "isFeatured": true, "isActive": true, "order": 0 } ]
POST /api/testimonials,PATCH /api/testimonials/:id,DELETE /api/testimonials/:id- Auth: Admin
Admin Panel Action Items
- Create Testimonials Manager (
/admin/testimonials). - Form fields:
authorName(text, required),roleTitle(text),avatarUrl(image uploader),content(textarea, required),rating(rating selector 1-5),isFeatured(toggle),isActive(toggle).
Storefront (Next.js) Action Items
- Update
frontend/application/components/VetGallery.tsxand homepage testimonial widgets to fetchGET /api/testimonials.
4. Ingredients & Scientific Wiki
Backend Endpoint Specifications
GET /api/ingredients- Auth: Public
- Response (200 OK):
[ { "id": "ingredient-uuid", "nameFa": "صدف لبسبز", "nameEn": "Green-Lipped Mussel", "slug": "green-lipped-mussel", "scientificName": "Perna canaliculus", "description": "صدف بومی نیوزیلند غنی از گلیکوزآمیپوگلیکانها", "imageUrl": "https://example.com/mussel.png", "benefits": ["ترمیم غضروف", "کاهش التهاب مفاصل"] } ]
GET /api/ingredients/:idOrSlug- Auth: Public
POST /api/ingredients,PATCH /api/ingredients/:id,DELETE /api/ingredients/:id- Auth: Admin
Admin Panel Action Items
- Create Ingredients Encyclopedia Manager (
/admin/ingredients). - Form fields:
nameFa(text, required),nameEn(text, required),slug(text, unique),scientificName(text),description(rich text editor),imageUrl(uploader),benefits(tag input string array).
Storefront (Next.js) Action Items
- Update
frontend/application/components/IngredientWiki.tsxto fetchGET /api/ingredientsandGET /api/ingredients/:idOrSlug.
5. Product Dosage Configuration
Backend Endpoint Specifications
GET /api/products/:id/dosage-config- Auth: Public
- Response (200 OK):
{ "unit": "قرص", "baseWeightKg": 10, "baseDose": 1, "maxDailyDose": 4, "instructions": "همراه با غذا یا بلافاصله بعد از غذا مصرف شود" }
PATCH /api/products/:id/dosage-config- Auth: Admin
- Request Body: Json object with dosage formula parameters.
Admin Panel Action Items
- Inside Product Edit Page (
/admin/products/:id), add a Dosage Formula Builder Tab. - Fields:
unit(text),baseWeightKg(number),baseDose(number),maxDailyDose(number),instructions(textarea).
Storefront (Next.js) Action Items
- Update
frontend/application/components/ProductPage.tsxand dosage calculator widget to fetchGET /api/products/:id/dosage-configfor interactive dosage calculation based on pet's exact weight.
6. SEO Settings
Backend Endpoint Specifications
GET /api/settings/seo- Auth: Admin
- Response (200 OK):
{ "defaultMetaTitle": "کنینا ایران | مکملهای دارویی آلمانی حیوانات خانگی", "defaultMetaDescription": "نمایندگی رسمی محصولات کنینا فارما آلمان", "keywords": "مکمل سگ, مکمل گربه, کنهیدروکس, کنینا", "canonicalBaseUrl": "https://caninairan.com", "ogImageUrl": "https://caninairan.com/og-default.jpg" }
PATCH /api/settings/seo- Auth: Admin
Admin Panel Action Items
- Create SEO Global Settings Form (
/admin/settings/seo). - Fields:
defaultMetaTitle,defaultMetaDescription,keywords,canonicalBaseUrl,ogImageUrl.
Storefront (Next.js) Action Items
- Connect
app/layout.tsxdynamic metadata generator to fetch default SEO settings.
7. Financial Settings
Backend Endpoint Specifications
GET /api/settings/financial- Auth: Admin
- Response (200 OK):
{ "taxPercentage": 10, "freeShippingThreshold": 2000000, "standardShippingFee": 85000, "charityDonationOptions": [10000, 20000, 50000] }
PATCH /api/settings/financial- Auth: Admin
Admin Panel Action Items
- Create Financial & Shipping Settings Form (
/admin/settings/financial). - Fields:
taxPercentage(number),freeShippingThreshold(number),standardShippingFee(number),charityDonationOptions(number array).
Storefront (Next.js) Action Items
- Update
frontend/application/components/CheckoutPage.tsxandcartStore.tsto compute shipping fees, free shipping progress bars, and charity options dynamically.
8. System Settings
Backend Endpoint Specifications
GET /api/settings/system- Auth: Admin
- Response (200 OK):
{ "maintenanceMode": false, "allowGuestCheckout": true, "b2bRegistrationOpen": true, "supportPhone": "021-12345678" }
PATCH /api/settings/system- Auth: Admin
Admin Panel Action Items
- Create System Control Panel (
/admin/settings/system). - Fields:
maintenanceMode(toggle),allowGuestCheckout(toggle),b2bRegistrationOpen(toggle),supportPhone(text).
Storefront (Next.js) Action Items
- Read
maintenanceModeflag in Next.js middleware to renderMaintenancePage.tsxwhen system maintenance is enabled.
9. Prescriptions Workflow
Backend Endpoint Specifications
POST /api/prescriptions- Auth: User Authenticated
- Request Body:
{ "petId": "pet-uuid-optional", "fileUrl": "https://cdn.caninairan.com/prescriptions/rx-123.pdf", "notes": "نسخه مربوط به کلینیک دکتر رضایی" }
GET /api/prescriptions- Auth: User / Admin
- Response: List of prescriptions (scoped to user or all for Admin).
GET /api/prescriptions/:id- Auth: User / Admin
PATCH /api/prescriptions/:id/review- Auth: Admin
- Request Body:
{ "status": "APPROVED", "adminNotes": "نسخه تایید شد. دوز مصرفی مطابق دستور پزشک است." }
Admin Panel Action Items
- Create Prescription Review Dashboard (
/admin/prescriptions). - Features: Filter by
status(PENDING,APPROVED,REJECTED), image/PDF viewer, status change toggle buttons withadminNotescomment input.
Storefront (Next.js) Action Items
- Update
frontend/application/components/PrescriptionUploadModal.tsxandUserDashboard.tsxto handle upload viaPOST /api/prescriptionsand display prescription review badges.
10. B2B Wholesale Portal & Partner Credit
Backend Endpoint Specifications
POST /api/b2b/inquiries- Auth: Public
- Request Body:
{ "companyName": "کلینیک دامپزشکی پارت", "contactName": "دکتر کامران سمیعی", "email": "info@partvet.com", "phone": "09121112233", "businessType": "clinic", "estimatedVolume": "۵۰ تا ۱۰۰ بسته در ماه", "message": "تقاضای دریافت لیست قیمت عمده و نمایندگی استان اصفهان" }
GET /api/b2b/inquiries&PATCH /api/b2b/inquiries/:id- Auth: Admin
GET /api/b2b/partner- Auth: User Authenticated (Partner)
- Response: Partner account details, credit limits, discount tiers.
POST /api/b2b/orders- Auth: User Authenticated (Partner)
- Request Body:
{ "items": [ { "productId": "prod-1", "quantity": 50 } ], "totalAmount": 75000000 }
Admin Panel Action Items
- Create B2B Partner & Inquiry Management (
/admin/b2b). - Inquiry review table with status toggles (
PENDING,CONTACTED,APPROVED,REJECTED). - Partner Account setup modal (assigning credit limits and discount tiers to user accounts).
Storefront (Next.js) Action Items
- Update
frontend/application/components/B2BPortal.tsxto post inquiries toPOST /api/b2b/inquiries. - If logged in user has
User_Partnerrole, render partner credit dashboard and wholesale order form usingGET /api/b2b/partnerandPOST /api/b2b/orders.
Shared TypeScript Interfaces for Frontend Codebases
Developers should paste the following definitions into lib/types.ts / src/types/api.ts:
export interface Banner {
id: string;
title: string;
subtitle?: string;
imageUrl: string;
linkUrl?: string;
position: string;
isActive: boolean;
order: number;
createdAt: string;
updatedAt: string;
}
export interface SmartAdvisorRule {
id: string;
condition: string;
targetPetType?: string;
recommendedProduct: string;
reason: string;
createdAt: string;
product?: {
id: string;
nameFa: string;
slug: string;
};
}
export interface Testimonial {
id: string;
authorName: string;
roleTitle?: string;
avatarUrl?: string;
content: string;
rating: number;
isFeatured: boolean;
isActive: boolean;
order: number;
createdAt: string;
updatedAt: string;
}
export interface Ingredient {
id: string;
nameFa: string;
nameEn: string;
slug: string;
description?: string;
scientificName?: string;
imageUrl?: string;
benefits: string[];
createdAt: string;
updatedAt: string;
}
export interface Prescription {
id: string;
userId: string;
petId?: string;
fileUrl: string;
status: 'PENDING' | 'APPROVED' | 'REJECTED';
notes?: string;
adminNotes?: string;
createdAt: string;
updatedAt: string;
}
export interface B2BInquiry {
id: string;
companyName: string;
contactName: string;
email: string;
phone: string;
businessType: string;
estimatedVolume?: string;
message: string;
status: 'PENDING' | 'CONTACTED' | 'APPROVED' | 'REJECTED';
adminNotes?: string;
createdAt: string;
updatedAt: string;
}
export interface PartnerAccount {
id: string;
userId: string;
companyName: string;
taxId?: string;
creditLimit: string | number;
discountTier: string;
status: string;
createdAt: string;
updatedAt: string;
}