183 lines
No EOL
9.4 KiB
Markdown
183 lines
No EOL
9.4 KiB
Markdown
# Progress Summary - Meat Farmer Monorepo
|
|
|
|
## User UI Development Progress
|
|
|
|
### Profile Image & User Details System
|
|
|
|
#### Database Schema Updates
|
|
- **Added `user_details` table** with fields: bio, dateOfBirth, gender, occupation, profileImage
|
|
- **Established one-to-one relationship** between users and user_details tables
|
|
- **Updated relations** in schema for proper data fetching
|
|
|
|
#### Backend API Enhancements
|
|
- **Updated auth controller** (`login`, `register`, `getProfile`) to query userDetails and return complete user information
|
|
- **Added `updateProfile` API** with comprehensive validation and transaction-based updates
|
|
- **Implemented signed URLs** for secure profile image access (3-day expiration)
|
|
- **Enhanced tRPC `getSelfData`** to include all user details with signed URLs
|
|
|
|
#### Frontend Auth System
|
|
- **Extended AuthContext** with `userDetails` state and `updateUserDetails` function
|
|
- **Modified tRPC queries** for fresh data on every app startup (no caching)
|
|
- **Added `useUserDetails` hook** for accessing detailed user information
|
|
- **Updated login/register flows** to populate complete user data
|
|
|
|
### Edit Profile Functionality
|
|
|
|
#### Page Implementation
|
|
- **Created edit-profile page** with pre-populated form values
|
|
- **Conditional form rendering** - password fields hidden in edit mode
|
|
- **Profile image upload** support with existing image display
|
|
- **Form validation** adjusted for edit vs registration modes
|
|
|
|
#### API Integration
|
|
- **Added `useUpdateProfile` hook** using React Query for profile updates
|
|
- **Multipart form data handling** for profile image uploads
|
|
- **Error handling and loading states** with proper user feedback
|
|
- **Context synchronization** after successful profile updates
|
|
|
|
### UI/UX Improvements
|
|
|
|
#### Drawer Layout Enhancements
|
|
- **Profile image display** in drawer header with fallback to person icon
|
|
- **User details integration** showing name and mobile from userDetails
|
|
- **Circular avatar styling** for profile images
|
|
|
|
#### Me Page Redesign
|
|
- **2x2 grid layout** replacing vertical button list
|
|
- **MaterialIcons integration** with relevant icons for each section:
|
|
- Orders: `shopping-bag` (blue)
|
|
- Complaints: `report-problem` (green)
|
|
- Coupons: `local-offer` (purple)
|
|
- Profile: `person` (orange)
|
|
- **Enhanced styling** with rounded corners, shadows, and better typography
|
|
- **Responsive design** with proper spacing and touch targets
|
|
|
|
### Registration Form Updates
|
|
- **Edit mode support** with `isEdit` prop
|
|
- **Conditional field rendering** (passwords/terms hidden in edit mode)
|
|
- **Initial values support** for pre-populating form data
|
|
- **Profile image handling** for both new uploads and existing images
|
|
|
|
## Files Modified
|
|
|
|
### Backend
|
|
- `apps/backend/src/db/schema.ts` - Added user_details table, vendor_snippets table, and relations definitions
|
|
- `apps/backend/src/uv-apis/auth.controller.ts` - Enhanced auth APIs with userDetails and signed URLs
|
|
- `apps/backend/src/uv-apis/auth.router.ts` - Added update profile route
|
|
- `apps/backend/src/trpc/user-apis/user.ts` - Updated getSelfData with userDetails
|
|
- `apps/backend/src/trpc/admin-apis/vendor-snippets.ts` - Complete CRUD API for vendor snippets management
|
|
|
|
### Frontend
|
|
- `apps/user-ui/src/types/auth.ts` - Added UserDetails interface and updated AuthState
|
|
- `apps/user-ui/src/contexts/AuthContext.tsx` - Enhanced with userDetails state and hooks
|
|
- `apps/user-ui/src/api-hooks/auth.api.ts` - Added updateProfile API and hook
|
|
- `apps/user-ui/components/registration-form.tsx` - Added edit mode support
|
|
- `apps/user-ui/app/(drawer)/edit-profile/index.tsx` - New edit profile page
|
|
- `apps/user-ui/app/(drawer)/_layout.tsx` - Updated drawer with profile image
|
|
- `apps/user-ui/app/(drawer)/me/index.tsx` - Redesigned with 2x2 grid and icons
|
|
|
|
### Admin UI (New Vendor Snippets Feature)
|
|
- `apps/admin-ui/app/(drawer)/vendor-snippets/index.tsx` - Main vendor snippets management page
|
|
- `apps/admin-ui/app/(drawer)/_layout.tsx` - Added vendor snippets to drawer navigation
|
|
- `apps/admin-ui/components/VendorSnippetForm.tsx` - Create/edit form with validation
|
|
- `apps/admin-ui/components/SnippetOrdersView.tsx` - Orders viewing component with matching highlights
|
|
- `apps/admin-ui/src/api-hooks/vendor-snippets.api.ts` - tRPC hooks for vendor snippets operations
|
|
- `apps/admin-ui/src/trpc-client.ts` - Updated imports for tRPC client usage
|
|
|
|
## Key Features Implemented
|
|
|
|
### User UI Features
|
|
✅ **Complete user profile system** with detailed information storage
|
|
✅ **Secure image handling** with signed URLs and S3 integration
|
|
✅ **Edit profile functionality** with pre-populated forms and validation
|
|
✅ **Beautiful UI components** with icons and modern design patterns
|
|
✅ **Fresh data fetching** on app startup with no caching
|
|
✅ **Transaction-safe updates** with proper error handling
|
|
✅ **Responsive grid layouts** optimized for mobile experience
|
|
|
|
### Admin UI Features (Vendor Snippets)
|
|
✅ **Complete vendor snippets management system** with full CRUD operations
|
|
✅ **Advanced order matching logic** that finds orders by slot and product criteria
|
|
✅ **Interactive forms** with slot/product selection and validation
|
|
✅ **Orders viewing interface** with product matching highlights and statistics
|
|
✅ **Automatic data refresh** using focus callbacks for fresh data
|
|
✅ **Proper relations handling** in Drizzle ORM with foreign key relationships
|
|
✅ **Error handling and loading states** throughout the user journey
|
|
✅ **Navigation integration** with drawer menu and proper routing
|
|
|
|
## Admin UI Changes
|
|
|
|
### Vendor Snippets Management System
|
|
|
|
#### Database Schema Updates
|
|
- **Added `vendor_snippets` table** with fields: id, snippetCode, slotId, productIds, validTill, createdAt
|
|
- **Established foreign key relationship** between vendorSnippets and deliverySlotInfo tables
|
|
- **Added relations definition** (`vendorSnippetsRelations`) for proper Drizzle ORM queries
|
|
- **Array field support** for storing multiple product IDs per snippet
|
|
|
|
#### Backend API Implementation
|
|
- **Complete CRUD operations** for vendor snippets:
|
|
- `create`: Validates slot/product existence, prevents duplicate codes
|
|
- `getAll`: Returns snippets with slot relations, ordered by creation date
|
|
- `getById`: Fetches individual snippet with slot details
|
|
- `update`: Partial updates with validation and uniqueness checks
|
|
- `delete`: Soft delete by setting expiry to current time
|
|
- **`getOrdersBySnippet` API**: Advanced order matching logic that:
|
|
- Finds orders with matching delivery slots
|
|
- Filters orders containing at least one snippet product
|
|
- Returns formatted order data with product matching highlights
|
|
- Includes customer details, pricing, and delivery information
|
|
|
|
#### Admin UI Implementation
|
|
- **Vendor Snippets List Page**: Complete management interface with:
|
|
- Snippet cards showing code, slot info, product count, expiry dates
|
|
- Action buttons for View Orders, Edit, and Delete operations
|
|
- Empty state with call-to-action for first snippet creation
|
|
- Loading states and error handling
|
|
- **Create/Edit Forms**: Comprehensive form components using:
|
|
- BottomDropdown for slot selection (replacing custom dropdowns)
|
|
- MultiSelectDropdown for product selection with search
|
|
- DatePicker for expiry date management
|
|
- Form validation with real-time error feedback
|
|
- Auto-generated snippet codes for new entries
|
|
|
|
#### Orders Viewing System
|
|
- **SnippetOrdersView Component**: Dedicated screen for viewing matched orders:
|
|
- Order cards with customer details, amounts, and delivery slots
|
|
- Product lists with matching highlights (⭐ indicators)
|
|
- Summary statistics (total orders, revenue)
|
|
- Responsive design with proper spacing and typography
|
|
|
|
#### Navigation & UX Enhancements
|
|
- **Drawer Integration**: Added "Vendor Snippets" to admin navigation menu
|
|
- **Focus-based Refetching**: Implemented `useFocusCallback` for automatic data refresh when returning to the screen
|
|
- **Error Handling**: Fixed tRPC client vs hooks usage (`trpcClient` for direct queries)
|
|
- **Loading States**: Proper loading indicators and user feedback throughout the flow
|
|
|
|
#### Technical Improvements
|
|
- **Relations Fix**: Resolved Drizzle ORM error by adding missing relations definition
|
|
- **API Client Usage**: Corrected tRPC usage patterns (hooks vs direct client)
|
|
- **Type Safety**: Proper TypeScript interfaces and error handling
|
|
- **Performance**: Efficient queries with proper indexing and filtering
|
|
|
|
### Previous Admin UI Changes
|
|
|
|
#### Slot Selection Centralization
|
|
- **Moved slot dropdown** from individual pages to Manage Orders hub page
|
|
- **Updated navigation** with slotId query parameters
|
|
- **Streamlined child pages** with URL param reading
|
|
|
|
#### UI Cleanup & Improvements
|
|
- **Removed redundant elements** from drawer navigation
|
|
- **Compacted order displays** for better space utilization
|
|
- **Enhanced delivery sequences** layout
|
|
|
|
## Important Notes
|
|
- **Do not run build, compile, or migration commands** - These should be handled manually by developers
|
|
- Avoid running `npm run build`, `tsc`, `drizzle-kit generate`, or similar compilation/migration commands
|
|
- Schema changes should be committed and migrations generated manually
|
|
- **Signed URLs** are used for secure image access with 3-day expiration
|
|
- **React Query** handles all API state management with proper loading/error states
|
|
- **Vendor Snippets**: Relations definitions are critical for Drizzle ORM queries - always define relations for foreign key relationships
|
|
- **tRPC Usage**: Use `trpc` for React hooks and `trpcClient` for direct API calls outside components
|
|
- **Focus Callbacks**: Implemented for automatic data refresh when screens regain focus |