+ {breadcrumbs && breadcrumbs.length > 0 && (
+
+
+ {/* Breadcrumbs will be rendered here if needed */}
+
+ )}
+ {children}
+
+
+ );
+};
+```
+
+---
+
+### Step 9: Frontend - API Service
+
+Create: `bugulma/frontend/services/discovery-api.ts`
+
+```typescript
+import { BaseService } from './base-service';
+
+export interface SearchQuery {
+ q?: string;
+ category?: string;
+ listing_type?: string;
+ location?: { lat: number; lng: number };
+ max_distance_km?: number;
+ price_min?: number;
+ price_max?: number;
+ page?: number;
+ limit?: number;
+}
+
+export interface SearchResult {
+ id: string;
+ type: 'product' | 'service' | 'community';
+ title: string;
+ description: string;
+ category: string;
+ price?: number;
+ location: { lat: number; lng: number };
+ distance_km?: number;
+ organization_name?: string;
+ user_name?: string;
+ rating?: number;
+ verified: boolean;
+ images: string[];
+}
+
+export interface SearchResponse {
+ results: SearchResult[];
+ total: number;
+ page: number;
+ limit: number;
+}
+
+class DiscoveryService extends BaseService {
+ constructor() {
+ super('/api/v1/discovery');
+ }
+
+ async search(query: SearchQuery): PromiseFind Products & Services
+Searching...
}
+ {results &&
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+```
+
+### Example 3: Admin Dashboard with Stats
+
+```tsx
+import { useAdmin } from '@/hooks/useAdmin';
+
+const AdminDashboard = () => {
+ const { adminStats, refreshAdminStats, canAccessAnalytics } = useAdmin();
+
+ return (
+
+ {adminStats && (
+
+ );
+};
+```
+
+### Example 4: Conditional Menu Items
+
+```tsx
+const AdminSidebar = () => {
+ const { checkPermission } = usePermissions();
+
+ return (
+
+ );
+};
+```
+
+## Backend Integration
+
+### Token Structure
+
+The JWT token should include:
+```json
+{
+ "user_id": "uuid",
+ "email": "user@example.com",
+ "name": "User Name",
+ "role": "admin",
+ "permissions": ["organizations:read", "organizations:update", ...]
+}
+```
+
+### API Endpoints
+
+- `POST /api/v1/auth/login` - Login
+- `GET /api/v1/auth/me` - Get current user (token validation)
+- `POST /api/v1/auth/logout` - Logout (optional, client-side cleanup)
+
+### Backend Middleware
+
+- `AuthMiddleware` - Validates JWT token
+- `RequireRole` - Checks role
+- Future: `RequirePermission` - Checks specific permissions
+
+## Security Considerations
+
+1. **Token Validation**: Always validated server-side
+2. **Client-Side Checks**: UI-only, never trusted for security
+3. **Permission Checks**: Backend must enforce all permissions
+4. **Token Storage**: localStorage (consider httpOnly cookies for production)
+5. **Auto-Refresh**: Tokens should be refreshed before expiry
+6. **Logout**: Clears all auth-related storage
+
+## Future Enhancements
+
+1. **Granular Permissions from Backend**: Support for user-specific permissions
+2. **Permission Groups**: Group permissions for easier management
+3. **Audit Logging**: Track permission checks and access attempts
+4. **Token Refresh**: Automatic token refresh before expiry
+5. **Multi-Factor Authentication**: 2FA support
+6. **Session Management**: Multiple active sessions
+7. **Role Hierarchy**: Support for role inheritance
+
+## Migration Notes
+
+### Updating Existing Code
+
+1. **Replace role checks**:
+ ```tsx
+ // Old
+ {user?.role === 'admin' &&
+
+ )}
+
+ {canAccessAnalytics && (
+ Pending Verifications: {adminStats.pendingVerifications}
+Pending Translations: {adminStats.pendingTranslations}
+{selectedOrg ? '1' : '—'}
+ ```
+ - **CRITICAL BUG**: Shows "1" if `selectedOrg` exists, otherwise "—"
+ - Should show actual count of user's organizations
+ - Logic is completely wrong - `selectedOrg` is a state variable, not a count
+
+2. **Missing Data Integration**
+ - Doesn't use `useUserOrganizations()` hook to get actual count
+ - Organizations list is shown separately but count is wrong
+ - No connection between the stat card and the actual list
+
+3. **Limited Functionality**
+ - No filtering/sorting of proposals
+ - No search functionality
+ - No proposal details on click
+ - No statistics per organization
+ - No activity timeline
+
+4. **Incomplete Features**
+ - "View All Proposals" button navigates to `/map` (wrong destination)
+ - No proposal creation from dashboard
+ - No quick actions for common tasks
+
+---
+
+### 3. Admin Dashboard (`AdminPage.tsx` - `/admin`)
+
+#### ✅ Strengths
+- **Comprehensive Admin Stats**: Total orgs, verified orgs, connections, new orgs
+- **Visual Analytics**: Economic connections graph, supply/demand analysis
+- **Organization Management**: Full organization table with management capabilities
+- **Well-Structured**: Clear sections for different admin functions
+
+#### ❌ Issues & Gaps
+
+1. **Limited Statistics**
+ - Only 4 basic stats cards
+ - No trend indicators (month-over-month, year-over-year)
+ - No percentage calculations (e.g., verification rate)
+ - No time-based comparisons
+
+2. **Missing Admin Features**
+ - No user activity statistics
+ - No system health metrics
+ - No recent admin actions log
+ - No pending approvals queue
+ - No alerts/notifications for critical issues
+
+3. **Economic Graph & Supply/Demand**
+ - No date range filtering
+ - No export functionality (mentioned in docs but not implemented)
+ - No drill-down capabilities
+ - Limited interactivity
+
+4. **Organization Table**
+ - No mention of filtering/search capabilities in review
+ - No bulk operations visible
+ - No statistics summary
+
+---
+
+### 4. Organization Pages (`OrganizationPage.tsx`)
+
+#### ✅ Strengths
+- **Comprehensive Organization View**: Shows all organization details
+- **Network Graph**: Visual representation of connections
+- **Resource Flows**: Lists organization's resource flows
+- **Partnership Hub**: AI-powered symbiosis analysis
+
+#### ❌ Critical Gap: **NO ORGANIZATION DASHBOARD**
+
+1. **Missing Organization Statistics**
+ - Backend API exists: `/api/analytics/organizations/:organizationId/stats`
+ - **NOT USED** in frontend
+ - Organization statistics include:
+ - Total Sites
+ - Total Resource Flows
+ - Active Matches
+ - Total Matches
+ - CO₂ Savings (organization-specific)
+ - Economic Value (organization-specific)
+ - **Impact**: Organization owners can't see their organization's performance metrics
+
+2. **No Dashboard View**
+ - Organization page is detail-focused, not dashboard-focused
+ - No metrics/statistics section
+ - No performance indicators
+ - No activity timeline for the organization
+ - No comparison with similar organizations
+
+3. **Missing Features**
+ - No organization-level analytics
+ - No resource flow statistics
+ - No match success metrics
+ - No impact visualization
+ - No historical trends
+
+---
+
+## Major Gaps & Missing Features
+
+### 1. Organization-Specific Dashboard
+**Priority: HIGH**
+
+- **Gap**: No dedicated dashboard view for individual organizations
+- **Impact**: Organization owners/managers can't track their organization's performance
+- **Solution**:
+ - Create `/organization/:id/dashboard` route
+ - Implement organization statistics component
+ - Use existing backend API: `GET /api/analytics/organizations/:organizationId/stats`
+ - Display: sites count, resource flows, matches, CO₂ savings, economic value
+ - Add charts for trends over time
+
+### 2. User-Specific Metrics on Main Dashboard
+**Priority: HIGH**
+
+- **Gap**: Dashboard shows platform-wide stats instead of user-specific
+- **Impact**: Users can't understand their personal contribution
+- **Solution**:
+ - Add user-specific metrics section
+ - Show "My Organizations", "My Resource Flows", "My Matches"
+ - Calculate user's personal CO₂ savings and economic value
+ - Add comparison: "Your contribution vs Platform average"
+
+### 3. Fix Critical Bug in UserDashboard
+**Priority: CRITICAL**
+
+- **Bug**: Organizations count shows "1" or "—" instead of actual count
+- **Location**: `UserDashboard.tsx` line 67
+- **Fix**: Use `useUserOrganizations()` to get actual count
+
+### 4. Activity Feed Improvements
+**Priority: MEDIUM**
+
+- **Gap**: Activity feed shows system-wide activity, not user-specific
+- **Solution**:
+ - Filter activity by user's organizations
+ - Add activity type filters
+ - Add date range selector
+ - Make "View All Activity" functional
+ - Add activity details modal/page
+
+### 5. Proposals Management
+**Priority: MEDIUM**
+
+- **Gap**: Active Proposals section shows placeholder
+- **Solution**:
+ - Display actual proposals list
+ - Add proposal status breakdown
+ - Add direct links to proposals
+ - Add proposal creation from dashboard
+ - Fix navigation (should go to proposals page, not `/map`)
+
+### 6. Date Range & Time Filters
+**Priority: MEDIUM**
+
+- **Gap**: No time-based filtering for metrics
+- **Solution**:
+ - Add date range picker
+ - Add preset options (Last 7 days, Last 30 days, Last year, All time)
+ - Apply filters to all metrics
+ - Show trend indicators (↑↓ with percentages)
+
+### 7. Export Functionality
+**Priority: LOW**
+
+- **Gap**: No way to export dashboard data
+- **Solution**:
+ - Add "Export" button to dashboards
+ - Support CSV, PDF, Excel formats
+ - Include current filters in export
+
+### 8. Customizable Widgets
+**Priority: LOW**
+
+- **Gap**: Dashboards are static, not customizable
+- **Solution**:
+ - Allow users to rearrange dashboard sections
+ - Allow hiding/showing specific widgets
+ - Save user preferences
+
+### 9. Empty States & Onboarding
+**Priority: MEDIUM**
+
+- **Gap**: New users see empty dashboards without guidance
+- **Solution**:
+ - Add helpful empty states with CTAs
+ - Add onboarding tooltips for first-time users
+ - Show "Getting Started" checklist
+
+### 10. Real-Time Updates
+**Priority: LOW**
+
+- **Gap**: Dashboards don't update in real-time
+- **Solution**:
+ - Add WebSocket support for live updates
+ - Add manual refresh button
+ - Show "Last updated" timestamp
+
+### 11. Notifications & Alerts
+**Priority: MEDIUM**
+
+- **Gap**: No notification system for important events
+- **Solution**:
+ - Add notification center
+ - Show alerts for: new proposals, match updates, organization verification
+ - Add notification badges on dashboard
+
+### 12. Comparison Features
+**Priority: LOW**
+
+- **Gap**: No way to compare performance
+- **Solution**:
+ - Compare organization vs similar organizations
+ - Compare user metrics vs platform average
+ - Add benchmarking features
+
+---
+
+## UX/UI Improvements Needed
+
+### 1. Visual Hierarchy
+- **Issue**: Some sections lack clear visual separation
+- **Fix**: Improve card spacing, add section dividers
+
+### 2. Icon Consistency
+- **Issue**: Duplicate icons (Target icon used twice)
+- **Fix**: Use unique, meaningful icons for each metric
+
+### 3. Tooltips & Help Text
+- **Issue**: Metrics lack explanations
+- **Fix**: Add tooltips explaining what each metric means
+- **Fix**: Add help icons with detailed descriptions
+
+### 4. Loading States
+- **Issue**: Some sections don't show loading states
+- **Fix**: Add skeleton loaders for all async data
+
+### 5. Error States
+- **Issue**: Limited error handling display
+- **Fix**: Add proper error messages with retry options
+
+### 6. Responsive Design
+- **Issue**: Some grids may not work well on mobile
+- **Fix**: Test and improve mobile layouts
+- **Fix**: Consider mobile-first approach for stats cards
+
+### 7. Accessibility
+- **Issue**: Missing ARIA labels, keyboard navigation
+- **Fix**: Add proper ARIA labels
+- **Fix**: Ensure keyboard navigation works
+- **Fix**: Add screen reader support
+
+### 8. Performance
+- **Issue**: Multiple API calls on dashboard load
+- **Fix**: Consider batching API calls
+- **Fix**: Implement proper caching strategies
+- **Fix**: Add request deduplication
+
+---
+
+## Technical Debt
+
+### 1. Code Duplication
+- **Issue**: Similar stat card components in different dashboards
+- **Fix**: Create reusable `StatCard` component
+
+### 2. Type Safety
+- **Issue**: Use of `any` types in DashboardPage.tsx
+- **Fix**: Define proper TypeScript interfaces
+
+### 3. API Integration
+- **Issue**: Organization statistics API exists but unused
+- **Fix**: Create frontend hook and integrate
+
+### 4. Error Handling
+- **Issue**: Limited error boundaries
+- **Fix**: Add proper error boundaries for dashboard sections
+
+---
+
+## Recommended Implementation Priority
+
+### Phase 1: Critical Fixes (Immediate)
+1. ✅ Fix UserDashboard organizations count bug
+2. ✅ Add user-specific metrics to DashboardPage
+3. ✅ Implement organization statistics on organization pages
+4. ✅ Fix Active Proposals section (show actual data)
+
+### Phase 2: High Priority (Next Sprint)
+1. ✅ Create organization dashboard route
+2. ✅ Add activity feed filtering
+3. ✅ Add date range selectors
+4. ✅ Improve empty states
+
+### Phase 3: Medium Priority (Future)
+1. ✅ Add export functionality
+2. ✅ Add notifications system
+3. ✅ Add comparison features
+4. ✅ Improve admin dashboard statistics
+
+### Phase 4: Nice to Have (Backlog)
+1. ✅ Customizable widgets
+2. ✅ Real-time updates
+3. ✅ Advanced analytics
+4. ✅ Benchmarking features
+
+---
+
+## Conclusion
+
+The dashboards provide a solid foundation but have significant gaps, especially:
+1. **Missing organization-specific dashboards** (backend API exists but unused)
+2. **User dashboard shows platform stats instead of user stats**
+3. **Critical bug in UserDashboard organizations count**
+4. **Limited filtering, sorting, and customization options**
+
+Addressing these issues will significantly improve user experience and provide valuable insights to both users and organization managers.
+
+---
+
+## Appendix: API Endpoints Available but Unused
+
+1. `GET /api/analytics/organizations/:organizationId/stats` - Organization statistics
+2. Organization statistics include: sites, resource flows, matches, CO₂ savings, economic value
+
+These should be integrated into organization pages and a dedicated organization dashboard.
+
diff --git a/bugulma/frontend/PAYWALL_AND_SUBSCRIPTIONS.md b/bugulma/frontend/PAYWALL_AND_SUBSCRIPTIONS.md
new file mode 100644
index 0000000..bdf448e
--- /dev/null
+++ b/bugulma/frontend/PAYWALL_AND_SUBSCRIPTIONS.md
@@ -0,0 +1,446 @@
+# Paywall and Subscription System
+
+## Overview
+
+Complete subscription and paywall system for monetizing features and managing user access based on subscription plans.
+
+## Architecture
+
+### 1. Subscription Types (`types/subscription.ts`)
+
+**Subscription Plans**:
+- `free` - Free tier with basic features
+- `basic` - Basic paid plan
+- `professional` - Professional plan (most popular)
+- `enterprise` - Enterprise plan with all features
+
+**Subscription Status**:
+- `active` - Active subscription
+- `canceled` - Canceled but still active until period end
+- `past_due` - Payment failed, needs attention
+- `trialing` - In trial period
+- `expired` - Subscription expired
+- `none` - No subscription
+
+**Features**:
+- Unlimited organizations
+- Advanced analytics
+- API access
+- Custom domain
+- SSO
+- Priority/Dedicated support
+- Team collaboration
+- White label
+
+**Limits**:
+- Organizations count
+- Users/team members
+- Storage (MB)
+- API calls per month
+- Custom domains
+
+### 2. Subscription Context (`SubscriptionContext`)
+
+**Location**: `contexts/SubscriptionContext.tsx`
+
+**Features**:
+- Subscription state management
+- Feature checking
+- Limit checking
+- Auto-refresh subscription data
+- Defaults to free plan if no subscription
+
+**Usage**:
+```tsx
+import { useSubscription } from '@/contexts/SubscriptionContext';
+
+const {
+ subscription,
+ isLoading,
+ refreshSubscription,
+ hasFeature,
+ hasActiveSubscription,
+ canAccessFeature,
+ isWithinLimits,
+ getRemainingLimit,
+} = useSubscription();
+```
+
+### 3. Paywall Components
+
+#### `Paywall`
+
+**Location**: `components/paywall/Paywall.tsx`
+
+**Features**:
+- Blocks access to premium features
+- Shows upgrade dialog
+- Displays plan comparison
+- Customizable messaging
+
+**Usage**:
+```tsx
+
+
+ );
+};
+```
+
+### Example 3: Limit Warnings
+
+```tsx
+import { LimitWarning } from '@/components/paywall';
+import { useSubscription } from '@/hooks/useSubscription';
+
+const OrganizationsList = () => {
+ const { organizations } = useOrganizations();
+ const { isWithinLimits } = useSubscription();
+
+ return (
+
+
+ );
+};
+```
+
+### Example 4: Plan-Based UI
+
+```tsx
+import { useSubscription } from '@/hooks/useSubscription';
+
+const SettingsPage = () => {
+ const { hasCustomDomain, hasSSO, isProfessionalPlan } = useSubscription();
+
+ return (
+
+
+ );
+};
+```
+
+### Example 5: Combined Permissions and Subscriptions
+
+```tsx
+import { PermissionGate } from '@/components/auth';
+import { FeatureGate } from '@/components/paywall';
+
+const AdminOrganizationsPage = () => {
+ return (
+
-
)}
- {parseError &&
+
{parseError}
} + {parseError &&
+ }
+ items={enabledActions.map((action) => ({
+ label: action.label,
+ value: action.label,
+ icon: action.icon,
+ onClick: () => action.onClick(item),
+ disabled: action.disabled?.(item),
+ }))}
+ align="right"
+ />
+ );
+ },
+ width: 80,
+ sortable: false,
+ align: 'right' as const,
+ },
+ ];
+ }, [tableColumns, actions]);
+
+ const handleSort = (key: string) => {
+ if (!sorting) return;
+ const newDirection =
+ sorting.column === key && sorting.direction === 'asc' ? 'desc' : 'asc';
+ sorting.onSort(key, newDirection);
+ };
+
+ return (
+
+
+
+ {!isCollapsed && (
+ <>
+
+
+
+ )}
+
+ );
+};
+
diff --git a/bugulma/frontend/components/admin/OrganizationTable.tsx b/bugulma/frontend/components/admin/OrganizationTable.tsx
index 3f8fd37..e712823 100644
--- a/bugulma/frontend/components/admin/OrganizationTable.tsx
+++ b/bugulma/frontend/components/admin/OrganizationTable.tsx
@@ -10,6 +10,7 @@ import {
} from '@/lib/sector-mapper.ts';
import { getOrganizationSubtypeLabel } from '@/schemas/organizationSubtype.ts';
import { Organization } from '@/types.ts';
+import { useVerifyOrganization, useRejectVerification } from '@/hooks/api/useAdminAPI.ts';
import React, { useCallback } from 'react';
interface OrganizationTableProps {
@@ -36,11 +37,30 @@ const OrganizationTable = ({ onUpdateOrganization }: OrganizationTableProps) =>
const { t } = useTranslation();
const { filter, setFilter, searchTerm, setSearchTerm, filteredOrgs } = useOrganizationTable();
+ const { mutate: verifyOrganization } = useVerifyOrganization();
+ const { mutate: rejectVerification } = useRejectVerification();
+
const handleVerify = useCallback(
(org: Organization) => {
- onUpdateOrganization({ ...org, Verified: !org.Verified });
+ if (org.Verified) {
+ // If already verified, we could reject or just update locally
+ // For now, just update locally
+ onUpdateOrganization({ ...org, Verified: false });
+ } else {
+ verifyOrganization(
+ { id: org.ID, notes: 'Verified via admin panel' },
+ {
+ onSuccess: () => {
+ onUpdateOrganization({ ...org, Verified: true });
+ },
+ onError: (error) => {
+ console.error('Failed to verify organization:', error);
+ },
+ }
+ );
+ }
},
- [onUpdateOrganization]
+ [onUpdateOrganization, verifyOrganization]
);
return (
diff --git a/bugulma/frontend/components/admin/PageHeader.tsx b/bugulma/frontend/components/admin/PageHeader.tsx
new file mode 100644
index 0000000..121329f
--- /dev/null
+++ b/bugulma/frontend/components/admin/PageHeader.tsx
@@ -0,0 +1,122 @@
+import React from 'react';
+import { clsx } from 'clsx';
+import { ArrowLeft, MoreVertical } from 'lucide-react';
+import { Button, Breadcrumbs, DropdownMenu } from '@/components/ui';
+import { useNavigate } from 'react-router-dom';
+
+export interface PageHeaderAction {
+ label: string;
+ icon?: React.ReactNode;
+ onClick: () => void;
+ variant?: 'primary' | 'outline' | 'ghost' | 'destructive';
+ disabled?: boolean;
+}
+
+export interface PageHeaderProps {
+ title: string;
+ subtitle?: string;
+ breadcrumbs?: Array<{ label: string; href?: string; icon?: React.ReactNode }>;
+ actions?: PageHeaderAction[];
+ onBack?: () => void;
+ backLabel?: string;
+ className?: string;
+}
+
+/**
+ * Enhanced page header component for admin pages
+ */
+export const PageHeader = ({
+ title,
+ subtitle,
+ breadcrumbs,
+ actions = [],
+ onBack,
+ backLabel = 'Back',
+ className,
+}: PageHeaderProps) => {
+ const navigate = useNavigate();
+
+ const handleBack = () => {
+ if (onBack) {
+ onBack();
+ } else {
+ navigate(-1);
+ }
+ };
+
+ const primaryActions = actions.filter((a) => a.variant === 'primary' || !a.variant);
+ const secondaryActions = actions.filter((a) => a.variant !== 'primary' && a.variant !== 'destructive');
+ const destructiveActions = actions.filter((a) => a.variant === 'destructive');
+
+ const menuActions = [...secondaryActions, ...destructiveActions];
+
+ return (
+
+ {/* Page content */}
+
+```
+
+### Data Management Components
+
+#### `DataTable`
+Enhanced data table with built-in pagination, sorting, filtering, selection, and actions.
+
+**Features:**
+- Column-based rendering
+- Sortable columns
+- Row selection (single/multiple)
+- Bulk actions
+- Search integration
+- Pagination
+- Loading states
+- Mobile card view
+- Action menus per row
+
+**Usage:**
+```tsx
+ org.id}
+ pagination={{ currentPage, totalPages, pageSize, totalItems, onPageChange }}
+ sorting={{ column, direction, onSort }}
+ search={{ value, onChange }}
+ selection={{ selectedRows, onSelectionChange }}
+ actions={[
+ { label: 'Edit', icon:
+ {/* Form fields */}
+
+```
+
+#### `SettingsSection`
+Component for settings pages.
+
+**Usage:**
+```tsx
+Save}
+>
+ {/* Settings fields */}
+
+```
+
+#### `ChartCard`
+Wrapper component for charts with export and refresh.
+
+**Features:**
+- Title and description
+- Export button
+- Refresh button
+- Loading state
+- Custom actions
+
+**Usage:**
+```tsx
+ {}}
+ onRefresh={() => {}}
+ isLoading={false}
+>
+ {/* Chart component */}
+
+```
+
+#### `ActivityFeed`
+Component for displaying system activity logs.
+
+**Features:**
+- Activity items with user avatars
+- Activity types (create, update, delete, verify, login)
+- Timestamp formatting
+- Loading states
+- Load more functionality
+- Empty states
+
+**Usage:**
+```tsx
+ {}}
+ hasMore={true}
+/>
+```
+
+## Component Relationships
+
+```
+AdminLayout
+├── Sidebar Navigation
+├── Header (with user menu, notifications)
+└── Main Content
+ ├── PageHeader
+ │ ├── Breadcrumbs
+ │ └── Actions
+ ├── SearchAndFilter
+ │ ├── SearchBar
+ │ └── FilterBar
+ ├── DataTable
+ │ ├── ResponsiveTable (from ui primitives)
+ │ ├── Pagination
+ │ └── Bulk Actions
+ ├── StatCard (for dashboard)
+ ├── ChartCard (for analytics)
+ ├── FormSection (for forms)
+ ├── SettingsSection (for settings)
+ └── ActivityFeed (for activity logs)
+```
+
+## Design Principles
+
+All components follow:
+- **Consistency**: Unified design system
+- **Accessibility**: ARIA labels, keyboard navigation
+- **Responsiveness**: Mobile-first design
+- **Type Safety**: Full TypeScript support
+- **Composability**: Components work together seamlessly
+- **Performance**: Optimized rendering and state management
+
+## Usage Examples
+
+### Complete Admin Page Example
+
+```tsx
+import { AdminLayout, PageHeader, DataTable, SearchAndFilter } from '@/components/admin';
+
+const OrganizationsPage = () => {
+ const [search, setSearch] = useState('');
+ const [filters, setFilters] = useState({});
+ const [selectedRows, setSelectedRows] = useState(new Set());
+
+ return (
+
+ {} },
+ { label: 'Export', variant: 'outline', onClick: () => {} },
+ ]}
+ />
+
+ org.id}
+ search={{ value: search, onChange: setSearch }}
+ selection={{ selectedRows, onSelectionChange: setSelectedRows }}
+ pagination={pagination}
+ sorting={sorting}
+ actions={tableActions}
+ bulkActions={bulkActions}
+ />
+
+ );
+};
+```
+
+## Next Steps
+
+These components are ready to be used in admin pages. They provide:
+- ✅ Complete layout structure
+- ✅ Data management capabilities
+- ✅ Form and settings organization
+- ✅ Dashboard components
+- ✅ Activity tracking
+
+All components are production-ready and follow best practices for maintainability and scalability.
+
diff --git a/bugulma/frontend/components/admin/SearchAndFilter.tsx b/bugulma/frontend/components/admin/SearchAndFilter.tsx
new file mode 100644
index 0000000..64e1b6c
--- /dev/null
+++ b/bugulma/frontend/components/admin/SearchAndFilter.tsx
@@ -0,0 +1,34 @@
+import { SearchBar } from '@/components/ui';
+import { clsx } from 'clsx';
+import { FilterBar, type FilterBarProps } from './FilterBar';
+
+export interface SearchAndFilterProps {
+ search?: {
+ value: string;
+ onChange: (value: string) => void;
+ placeholder?: string;
+ };
+ filters?: FilterBarProps;
+ className?: string;
+}
+
+/**
+ * Combined search and filter component
+ */
+export const SearchAndFilter = ({ search, filters, className }: SearchAndFilterProps) => {
+ return (
+
+
+
+
+
+
+ );
+};
+
diff --git a/bugulma/frontend/components/admin/StatCard.tsx b/bugulma/frontend/components/admin/StatCard.tsx
index 3b458cf..d53aba1 100644
--- a/bugulma/frontend/components/admin/StatCard.tsx
+++ b/bugulma/frontend/components/admin/StatCard.tsx
@@ -1,24 +1,91 @@
import React from 'react';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card.tsx';
+import { clsx } from 'clsx';
+import { ArrowUp, ArrowDown, TrendingUp } from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card';
+import { useNavigate } from 'react-router-dom';
-interface StatCardProps {
+export interface StatCardProps {
title: string;
- value: string;
+ value: string | number;
icon: React.ReactNode;
subtext?: string;
+ trend?: {
+ value: number;
+ label: string;
+ isPositive?: boolean;
+ };
+ onClick?: () => void;
+ color?: 'primary' | 'success' | 'warning' | 'info' | 'default';
+ className?: string;
}
-const StatCard = ({ title, value, icon, subtext }: StatCardProps) => (
-
-
- {title}
- {icon}
-
-
-
-
-);
+const colorClasses = {
+ primary: 'bg-primary/10 text-primary border-primary/20',
+ success: 'bg-success/10 text-success border-success/20',
+ warning: 'bg-warning/10 text-warning border-warning/20',
+ info: 'bg-primary/10 text-primary border-primary/20',
+ default: 'bg-muted text-muted-foreground border-border',
+};
-export default React.memo(StatCard);
+/**
+ * Enhanced stat card component for dashboard metrics
+ */
+export const StatCard = ({
+ title,
+ value,
+ icon,
+ subtext,
+ trend,
+ onClick,
+ color = 'default',
+ className,
+}: StatCardProps) => {
+ const navigate = useNavigate();
+
+ const handleClick = () => {
+ if (onClick) {
+ onClick();
+ }
+ };
+
+ return (
+
+
+ {title}
+
+
+
+
+ );
+};
diff --git a/bugulma/frontend/components/admin/index.ts b/bugulma/frontend/components/admin/index.ts
new file mode 100644
index 0000000..77089d4
--- /dev/null
+++ b/bugulma/frontend/components/admin/index.ts
@@ -0,0 +1,61 @@
+/**
+ * Admin Feature Components
+ *
+ * Reusable components for admin panel pages
+ */
+
+// Layout
+export {
+ AdminLayout,
+ type AdminLayoutProps,
+ type AdminNavItem
+} from './layout/AdminLayout';
+
+// Data Management
+export {
+ DataTable, type DataTableAction, type DataTableColumn, type DataTableProps
+} from './DataTable';
+
+export {
+ FilterBar,
+ type FilterBarProps,
+ type FilterOption,
+ type FilterValue
+} from './FilterBar';
+
+export {
+ SearchAndFilter,
+ type SearchAndFilterProps
+} from './SearchAndFilter';
+
+// Page Components
+export {
+ PageHeader, type PageHeaderAction, type PageHeaderProps
+} from './PageHeader';
+
+export {
+ StatCard,
+ type StatCardProps
+} from './StatCard';
+
+export {
+ FormSection,
+ type FormSectionProps
+} from './FormSection';
+
+export {
+ SettingsSection,
+ type SettingsSectionProps
+} from './SettingsSection';
+
+export {
+ ChartCard,
+ type ChartCardProps
+} from './ChartCard';
+
+export {
+ ActivityFeed,
+ type ActivityFeedProps,
+ type ActivityItem
+} from './ActivityFeed';
+
diff --git a/bugulma/frontend/components/admin/layout/AdminLayout.tsx b/bugulma/frontend/components/admin/layout/AdminLayout.tsx
new file mode 100644
index 0000000..00d1578
--- /dev/null
+++ b/bugulma/frontend/components/admin/layout/AdminLayout.tsx
@@ -0,0 +1,344 @@
+import { Avatar, DropdownMenu } from '@/components/ui';
+import { useAuth } from '@/contexts/AuthContext';
+import { useTranslation } from '@/hooks/useI18n';
+import { clsx } from 'clsx';
+import {
+ BarChart3,
+ Bell,
+ Building2,
+ ChevronRight,
+ FileText,
+ Languages,
+ LayoutDashboard,
+ LogOut,
+ Menu,
+ Settings,
+ User,
+ Users,
+ X,
+} from 'lucide-react';
+import React, { useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+export interface AdminNavItem {
+ id: string;
+ label: string;
+ icon: React.ReactNode;
+ path: string;
+ badge?: number;
+ children?: AdminNavItem[];
+}
+
+export interface AdminLayoutProps {
+ children: React.ReactNode;
+ title?: string;
+ breadcrumbs?: Array<{ label: string; href?: string }>;
+}
+
+const defaultNavItems: AdminNavItem[] = [
+ {
+ id: 'dashboard',
+ label: 'Dashboard',
+ icon: >(new Set());
+ const location = useLocation();
+ const navigate = useNavigate();
+ const { user, logout } = useAuth();
+ const { t } = useTranslation();
+
+ const toggleSidebar = () => setSidebarOpen(!sidebarOpen);
+ const toggleExpanded = (id: string) => {
+ setExpandedItems((prev) => {
+ const newSet = new Set(prev);
+ if (newSet.has(id)) {
+ newSet.delete(id);
+ } else {
+ newSet.add(id);
+ }
+ return newSet;
+ });
+ };
+
+ const isActive = (path: string) => location.pathname === path || location.pathname.startsWith(path + '/');
+
+ const userMenuItems = [
+ {
+ label: 'Profile',
+ value: 'profile',
+ icon:
+ );
+};
+
diff --git a/bugulma/frontend/components/auth/AdminRoute.tsx b/bugulma/frontend/components/auth/AdminRoute.tsx
new file mode 100644
index 0000000..152fe12
--- /dev/null
+++ b/bugulma/frontend/components/auth/AdminRoute.tsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import { Navigate, useLocation } from 'react-router-dom';
+import { useAuth } from '@/contexts/AuthContext';
+import { usePermissions } from '@/hooks/usePermissions';
+import { Permission } from '@/types/permissions';
+import { Alert } from '@/components/ui';
+
+export interface AdminRouteProps {
+ children: React.ReactNode;
+ permission?: Permission | Permission[];
+ requireAll?: boolean;
+ fallbackPath?: string;
+}
+
+/**
+ * Route protection specifically for admin routes
+ * Automatically checks for admin role and optional permissions
+ */
+export const AdminRoute = ({
+ children,
+ permission,
+ requireAll = false,
+ fallbackPath = '/',
+}: AdminRouteProps) => {
+ const { isAuthenticated, isLoading } = useAuth();
+ const { isAdmin, checkAnyPermission, checkAllPermissions } = usePermissions();
+ const location = useLocation();
+
+ if (isLoading) {
+ return (
+
+ {/* Toolbar */}
+ {
+ const item = data.find((d) => getRowId(d) === id);
+ if (item && selection) {
+ const isSelected = selection.selectedRows.has(id);
+ handleSelectRow(id, !isSelected);
+ }
+ }}
+ getRowId={getRowId}
+ renderMobileCard={renderMobileCard}
+ isLoading={isLoading}
+ />
+
+ {/* Pagination */}
+ {pagination && (
+
+ );
+}
+
diff --git a/bugulma/frontend/components/admin/FilterBar.tsx b/bugulma/frontend/components/admin/FilterBar.tsx
new file mode 100644
index 0000000..379246c
--- /dev/null
+++ b/bugulma/frontend/components/admin/FilterBar.tsx
@@ -0,0 +1,213 @@
+import React, { useState } from 'react';
+import { clsx } from 'clsx';
+import { Filter, X } from 'lucide-react';
+import { Button, Popover, SelectDropdown, CheckboxGroup } from '@/components/ui';
+
+export interface FilterOption {
+ id: string;
+ label: string;
+ type: 'select' | 'multiselect' | 'date' | 'daterange' | 'text' | 'number';
+ options?: Array<{ label: string; value: string }>;
+ placeholder?: string;
+}
+
+export interface FilterValue {
+ [key: string]: string | string[] | number | { from: Date; to: Date } | null;
+}
+
+export interface FilterBarProps {
+ filters: FilterOption[];
+ values: FilterValue;
+ onChange: (values: FilterValue) => void;
+ onReset?: () => void;
+ className?: string;
+}
+
+/**
+ * Advanced filter bar component
+ */
+export const FilterBar = ({
+ filters,
+ values,
+ onChange,
+ onReset,
+ className,
+}: FilterBarProps) => {
+ const [isOpen, setIsOpen] = useState(false);
+ const activeFilterCount = Object.values(values).filter(
+ (v) => v !== null && v !== undefined && (Array.isArray(v) ? v.length > 0 : true)
+ ).length;
+
+ const handleFilterChange = (filterId: string, value: any) => {
+ onChange({
+ ...values,
+ [filterId]: value,
+ });
+ };
+
+ const handleReset = () => {
+ const resetValues: FilterValue = {};
+ filters.forEach((filter) => {
+ resetValues[filter.id] = null;
+ });
+ onChange(resetValues);
+ onReset?.();
+ };
+
+ const hasActiveFilters = activeFilterCount > 0;
+
+ return (
+
+ {/* Search */}
+ {search && (
+
+
+ {/* Select All Checkbox (if selection enabled) */}
+ {selection && data.length > 0 && (
+
+
+ )}
+
+ {/* Bulk Actions */}
+ {hasSelection && bulkActions && bulkActions.length > 0 && (
+
+
+ {selectedCount} selected
+
+ {bulkActions.map((action, index) => (
+
+ ))}
+
+
+ )}
+
+ {
+ if (el) {
+ el.indeterminate = someSelected && !allSelected;
+ }
+ }}
+ onChange={(e) => handleSelectAll(e.target.checked)}
+ />
+
+ Select all ({data.length} items)
+
+
+ )}
+
+ {/* Table */}
+
+
+ )}
+
+ Items per page:
+
+
+ )}
+
+
+
+ );
+};
+
diff --git a/bugulma/frontend/components/admin/FormSection.tsx b/bugulma/frontend/components/admin/FormSection.tsx
new file mode 100644
index 0000000..12dfcfe
--- /dev/null
+++ b/bugulma/frontend/components/admin/FormSection.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { clsx } from 'clsx';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/Card';
+import { Separator } from '@/components/ui';
+
+export interface FormSectionProps {
+ title: string;
+ description?: string;
+ children: React.ReactNode;
+ collapsible?: boolean;
+ defaultCollapsed?: boolean;
+ className?: string;
+ actions?: React.ReactNode;
+}
+
+/**
+ * Form section component for grouping related form fields
+ */
+export const FormSection = ({
+ title,
+ description,
+ children,
+ collapsible = false,
+ defaultCollapsed = false,
+ className,
+ actions,
+}: FormSectionProps) => {
+ const [isCollapsed, setIsCollapsed] = React.useState(defaultCollapsed);
+
+ return (
+
+
+ }
+ open={isOpen}
+ onOpenChange={setIsOpen}
+ modal
+ />
+
+ {/* Active Filter Tags */}
+ {hasActiveFilters && (
+
+
+
+ Filters
+ {hasActiveFilters && ( + + )} +
+ {filters.map((filter) => {
+ const currentValue = values[filter.id];
+
+ switch (filter.type) {
+ case 'select':
+ return (
+
+
+
+
+ handleFilterChange(filter.id, value || null)}
+ options={filter.options || []}
+ placeholder={filter.placeholder || `Select ${filter.label}`}
+ />
+
+ );
+
+ case 'multiselect':
+ return (
+
+
+ handleFilterChange(filter.id, selected)}
+ options={
+ filter.options?.map((opt) => ({
+ value: opt.value,
+ label: opt.label,
+ })) || []
+ }
+ orientation="vertical"
+ />
+
+ );
+
+ case 'text':
+ return (
+
+
+ handleFilterChange(filter.id, e.target.value || null)}
+ placeholder={filter.placeholder}
+ className="w-full rounded-md border bg-background px-3 py-2 text-sm"
+ />
+
+ );
+
+ case 'number':
+ return (
+
+
+
+ handleFilterChange(filter.id, e.target.value ? Number(e.target.value) : null)
+ }
+ placeholder={filter.placeholder}
+ className="w-full rounded-md border bg-background px-3 py-2 text-sm"
+ />
+
+ );
+
+ default:
+ return null;
+ }
+ })}
+
+
+
+
+
+ {filters.map((filter) => {
+ const value = values[filter.id];
+ if (!value || (Array.isArray(value) && value.length === 0)) return null;
+
+ let displayValue = '';
+ if (Array.isArray(value)) {
+ displayValue = value.join(', ');
+ } else {
+ displayValue = String(value);
+ }
+
+ return (
+
+ )}
+
+ {filter.label}:
+ {displayValue}
+
+
+ );
+ })}
+
+
+
+ {title}
+ {description && {description} }
+
+ {actions && {actions}
}
+ {children}
+
+ {/* Breadcrumbs */}
+ {breadcrumbs && breadcrumbs.length > 0 && (
+
+ );
+};
+
diff --git a/bugulma/frontend/components/admin/README.md b/bugulma/frontend/components/admin/README.md
new file mode 100644
index 0000000..c777fcd
--- /dev/null
+++ b/bugulma/frontend/components/admin/README.md
@@ -0,0 +1,316 @@
+# Admin Feature Components
+
+Reusable feature components for the admin panel, built based on the ADMIN_PANEL_CONCEPT.md specification.
+
+## Components Overview
+
+### Layout Components
+
+#### `AdminLayout`
+Main layout component with sidebar navigation, header, and content area.
+
+**Features:**
+- Collapsible sidebar with navigation items
+- Expandable menu items with children
+- User menu with dropdown
+- Notifications indicator
+- Responsive design (mobile-friendly)
+- Breadcrumbs support
+
+**Usage:**
+```tsx
+
+
+
+
+
+ {/* Actions */}
+ {actions.length > 0 && (
+
+ {onBack && (
+
+ )}
+
+
+
+ {title}
+ {subtitle && ( +{subtitle}
+ )} +
+ {primaryActions.map((action, index) => (
+
+ ))}
+
+ {menuActions.length > 0 && (
+
+
+ )}
+
+ {search && (
+
+ );
+};
+
diff --git a/bugulma/frontend/components/admin/SettingsSection.tsx b/bugulma/frontend/components/admin/SettingsSection.tsx
new file mode 100644
index 0000000..49012ae
--- /dev/null
+++ b/bugulma/frontend/components/admin/SettingsSection.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { clsx } from 'clsx';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/Card';
+import { Separator } from '@/components/ui';
+
+export interface SettingsSectionProps {
+ title: string;
+ description?: string;
+ children: React.ReactNode;
+ className?: string;
+ actions?: React.ReactNode;
+}
+
+/**
+ * Settings section component for settings pages
+ */
+export const SettingsSection = ({
+ title,
+ description,
+ children,
+ className,
+ actions,
+}: SettingsSectionProps) => {
+ return (
+
+
+ )}
+ {filters &&
+
+
+ {title}
+ {description && {description} }
+
+ {actions && {actions}
}
+ {children}
+ {value}
- {subtext && {subtext}
} -{icon}
+ {value}
+ {subtext && {subtext}
} + {trend && ( +
+ {trend.isPositive !== false ? (
+
+ )}
+
+ {/* Sidebar */}
+
+
+ {/* Main Content */}
+
+
+
+
+ {/* Header */}
+
+
+
+
+ {/* Page Content */}
+
+
+ {title &&
+
+ {title}
} +
+
+
+
+
+ }
+ items={userMenuItems}
+ align="right"
+ />
+
+
+
+ );
+ }
+
+ if (!isAuthenticated) {
+ return
+
+ );
+ }
+
+ // Check additional permissions if specified
+ if (permission) {
+ const permissions = Array.isArray(permission) ? permission : [permission];
+ const hasAccess = requireAll
+ ? checkAllPermissions(permissions)
+ : checkAnyPermission(permissions);
+
+ if (!hasAccess) {
+ return (
+
+
+ );
+ }
+ }
+
+ return <>{children};
+};
+
diff --git a/bugulma/frontend/components/auth/PermissionGate.tsx b/bugulma/frontend/components/auth/PermissionGate.tsx
new file mode 100644
index 0000000..a7aa65f
--- /dev/null
+++ b/bugulma/frontend/components/auth/PermissionGate.tsx
@@ -0,0 +1,44 @@
+import { usePermissions } from '@/hooks/usePermissions';
+import { Permission } from '@/types/permissions';
+import React from 'react';
+
+export interface PermissionGateProps {
+ children: React.ReactNode;
+ permission: Permission | Permission[];
+ requireAll?: boolean;
+ fallback?: React.ReactNode;
+ showError?: boolean;
+}
+
+/**
+ * Component that conditionally renders children based on permissions
+ * Use this for hiding/showing UI elements based on permissions
+ */
+export const PermissionGate = ({
+ children,
+ permission,
+ requireAll = false,
+ fallback = null,
+ showError = false,
+}: PermissionGateProps) => {
+ const { checkAnyPermission, checkAllPermissions } = usePermissions();
+
+ const permissions = Array.isArray(permission) ? permission : [permission];
+ const hasAccess = requireAll
+ ? checkAllPermissions(permissions)
+ : checkAnyPermission(permissions);
+
+ if (!hasAccess) {
+ if (showError) {
+ return (
+
+ You don't have permission to view this content.
+
+ );
+ }
+ return <>{fallback};
+ }
+
+ return <>{children};
+};
+
diff --git a/bugulma/frontend/components/auth/ProtectedRoute.tsx b/bugulma/frontend/components/auth/ProtectedRoute.tsx
index db79f9c..111ae56 100644
--- a/bugulma/frontend/components/auth/ProtectedRoute.tsx
+++ b/bugulma/frontend/components/auth/ProtectedRoute.tsx
@@ -1,14 +1,29 @@
import React from 'react';
import { Navigate, useLocation } from 'react-router-dom';
import { useAuth } from '@/contexts/AuthContext';
+import { usePermissions } from '@/hooks/usePermissions';
+import { Permission, Role } from '@/types/permissions';
-interface ProtectedRouteProps {
+export interface ProtectedRouteProps {
children: React.ReactNode;
- requiredRole?: 'admin' | 'user';
+ requiredRole?: Role;
+ permission?: Permission | Permission[];
+ requireAll?: boolean;
+ fallbackPath?: string;
}
-const ProtectedRoute = ({ children, requiredRole = 'user' }: ProtectedRouteProps) => {
+/**
+ * Enhanced protected route with role and permission checking
+ */
+const ProtectedRoute = ({
+ children,
+ requiredRole = 'user',
+ permission,
+ requireAll = false,
+ fallbackPath = '/',
+}: ProtectedRouteProps) => {
const { isAuthenticated, user, isLoading } = useAuth();
+ const { checkAnyPermission, checkAllPermissions, role } = usePermissions();
const location = useLocation();
if (isLoading) {
@@ -23,8 +38,25 @@ const ProtectedRoute = ({ children, requiredRole = 'user' }: ProtectedRouteProps
return
{lines.map((line, j) => (
-
);
diff --git a/bugulma/frontend/components/community/CreateCommunityListingForm.tsx b/bugulma/frontend/components/community/CreateCommunityListingForm.tsx
new file mode 100644
index 0000000..8eaa586
--- /dev/null
+++ b/bugulma/frontend/components/community/CreateCommunityListingForm.tsx
@@ -0,0 +1,467 @@
+import { useTranslation } from '@/hooks/useI18n';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useMutation } from '@tanstack/react-query';
+import React, { useCallback, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
+
+import {
+ communityListingFormSchema,
+ CONDITION_OPTIONS,
+ LISTING_CATEGORIES,
+ PRICE_TYPE_OPTIONS,
+ RATE_TYPE_OPTIONS,
+ SERVICE_TYPE_OPTIONS,
+ type CommunityListingFormData,
+} from '@/schemas/community';
+import { createCommunityListing } from '@/services/discovery-api';
+
+import { Alert } from '@/components/ui/Alert';
+import Button from '@/components/ui/Button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card';
+import Checkbox from '@/components/ui/Checkbox';
+import { FormField } from '@/components/ui/FormField';
+import ImageGallery from '@/components/ui/ImageGallery';
+import Input from '@/components/ui/Input';
+import { Stack } from '@/components/ui/layout';
+import MapPicker from '@/components/ui/MapPicker';
+import Select from '@/components/ui/Select';
+import Spinner from '@/components/ui/Spinner';
+import Textarea from '@/components/ui/Textarea';
+import { Heading, Text } from '@/components/ui/Typography';
+import { Euro, MapPin, Tag, Upload } from 'lucide-react';
+
+interface CreateCommunityListingFormProps {
+ onSuccess?: (listing: any) => void;
+ onCancel?: () => void;
+}
+
+const CreateCommunityListingForm: React.FC
+
+ {t('community.form.locationHelp')}
+
+
+
+ {errors.latitude && (
+
+
+ );
+};
+
+export default CreateCommunityListingForm;
diff --git a/bugulma/frontend/components/discovery/DiscoverySearchBar.tsx b/bugulma/frontend/components/discovery/DiscoverySearchBar.tsx
new file mode 100644
index 0000000..6ca06c1
--- /dev/null
+++ b/bugulma/frontend/components/discovery/DiscoverySearchBar.tsx
@@ -0,0 +1,179 @@
+import { Card, FormField } from '@/components/ui';
+import Button from '@/components/ui/Button';
+import Flex from '@/components/ui/Flex';
+import Grid from '@/components/ui/Grid';
+import Input from '@/components/ui/Input';
+import Select from '@/components/ui/Select';
+import Stack from '@/components/ui/Stack';
+import { useTranslation } from '@/hooks/useI18n';
+import { getCategories, type SearchQuery } from '@/services/discovery-api';
+import { useQuery } from '@tanstack/react-query';
+import { Filter, MapPin, Search } from 'lucide-react';
+import React, { useMemo, useState } from 'react';
+
+interface DiscoverySearchBarProps {
+ onSearch: (query: SearchQuery) => void;
+ initialQuery?: SearchQuery;
+ showFilters?: boolean;
+}
+
+export default function DiscoverySearchBar({
+ onSearch,
+ initialQuery,
+ showFilters = true,
+}: DiscoverySearchBarProps) {
+ const { t } = useTranslation();
+ const [query, setQuery] = useState(initialQuery?.query || '');
+ const [category, setCategory] = useState(initialQuery?.categories?.[0] || '');
+ const [radius, setRadius] = useState(initialQuery?.radius_km?.toString() || '50');
+ const [showAdvanced, setShowAdvanced] = useState(false);
+
+ // Fetch categories from backend
+ const { data: categoriesData, isLoading: categoriesLoading } = useQuery({
+ queryKey: ['discovery-categories'],
+ queryFn: getCategories,
+ staleTime: 1000 * 60 * 60, // Cache for 1 hour
+ });
+
+ // Combine all categories for the dropdown
+ const allCategories = useMemo(() => {
+ if (!categoriesData) return [];
+ // Combine all category types, removing duplicates
+ const combined = [
+ ...categoriesData.products,
+ ...categoriesData.services,
+ ...categoriesData.community,
+ ];
+ // Remove duplicates and sort
+ return Array.from(new Set(combined)).sort();
+ }, [categoriesData]);
+
+ const handleSearch = () => {
+ const searchQuery: SearchQuery = {
+ query: query || undefined,
+ categories: category ? [category] : undefined,
+ radius_km: radius ? parseFloat(radius) : undefined,
+ limit: 20,
+ };
+
+ // Try to get user location if available
+ if (navigator.geolocation) {
+ navigator.geolocation.getCurrentPosition(
+ (position) => {
+ searchQuery.latitude = position.coords.latitude;
+ searchQuery.longitude = position.coords.longitude;
+ onSearch(searchQuery);
+ },
+ () => {
+ // Location denied or unavailable, search without location
+ onSearch(searchQuery);
+ }
+ );
+ } else {
+ onSearch(searchQuery);
+ }
+ };
+
+ const handleKeyPress = (e: React.KeyboardEvent
+
+ {t('community.step')} {currentStep} {t('community.of')} {totalSteps}
+
+
+
+
+
+ {[1, 2, 3].map(step => (
+
+ ))}
+
+
+
+
+
+
+
+
+
+ 
setImageError(true)}
+ />
+
+ );
+};
+
+export default React.memo(MatchCardImage);
+
diff --git a/bugulma/frontend/components/discovery/MatchCardMetadata.tsx b/bugulma/frontend/components/discovery/MatchCardMetadata.tsx
new file mode 100644
index 0000000..bec3cc1
--- /dev/null
+++ b/bugulma/frontend/components/discovery/MatchCardMetadata.tsx
@@ -0,0 +1,100 @@
+import { Text } from '@/components/ui/Typography';
+import { Flex, Stack } from '@/components/ui/layout';
+import Badge from '@/components/ui/Badge';
+import { MapPin } from 'lucide-react';
+import React from 'react';
+import { useTranslation } from '@/hooks/useI18n';
+
+interface MatchCardMetadataProps {
+ organizationName?: string;
+ distanceKm?: number | null;
+ availabilityStatus?: string | null;
+ tags?: string[];
+ organizationLabelTKey: string;
+ distanceTKey: string;
+ maxTags?: number;
+}
+
+/**
+ * Reusable metadata component for discovery match cards
+ * Displays organization info, location, availability, and tags
+ */
+export const MatchCardMetadata: React.FC
+
+
{item.title}
-
+
{/* Content with improved typography */}
@@ -174,7 +176,7 @@ const TimelineItem: React.FC
- {title}
{subtitle && (
- {subtitle}
)}
{children && - {title} -
+{subtitle}
+{children}
}
diff --git a/bugulma/frontend/components/layout/TopBar.tsx b/bugulma/frontend/components/layout/TopBar.tsx
index 3243b8a..fe4a5e4 100644
--- a/bugulma/frontend/components/layout/TopBar.tsx
+++ b/bugulma/frontend/components/layout/TopBar.tsx
@@ -1,9 +1,14 @@
-import React from 'react';
-import { useScrollListener } from '@/hooks/useScrollListener.ts';
+import BrandIdentity from '@/components/layout/BrandIdentity.tsx';
import { HeaderLayout, HeaderSection } from '@/components/layout/Header.tsx';
import HeaderActions from '@/components/layout/HeaderActions.tsx';
+import Button from '@/components/ui/Button';
+import { DropdownMenu } from '@/components/ui/DropdownMenu';
import SearchBar from '@/components/ui/SearchBar.tsx';
-import BrandIdentity from '@/components/layout/BrandIdentity.tsx';
+import { useAuth } from '@/contexts/AuthContext';
+import { useTranslation } from '@/hooks/useI18n';
+import { useScrollListener } from '@/hooks/useScrollListener.ts';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
interface TopBarProps {
showSearch?: boolean;
@@ -18,6 +23,9 @@ const TopBar = ({
onSearchChange,
onSearchSubmit,
}: TopBarProps) => {
+ const { t } = useTranslation();
+ const { isAuthenticated } = useAuth();
+ const navigate = useNavigate();
const isScrolled = useScrollListener(10);
return (
@@ -29,8 +37,67 @@ const TopBar = ({
{!data && (
{
+ const count = cluster.getChildCount();
+ const size = count < 10 ? 'small' : count < 100 ? 'medium' : 'large';
+ const className = `marker-cluster marker-cluster-${size}`;
+ return L.divIcon({
+ html: `
+ )}
+
{/* Map controls */}
- {t('historicalContext.prompt')}
@@ -33,10 +34,10 @@ const HistoricalContextAI = ({ landmark }: HistoricalContextAIProps) => {
{data && (
diff --git a/bugulma/frontend/components/map/LeafletMap.tsx b/bugulma/frontend/components/map/LeafletMap.tsx
index ebb1a9a..2e400ce 100644
--- a/bugulma/frontend/components/map/LeafletMap.tsx
+++ b/bugulma/frontend/components/map/LeafletMap.tsx
@@ -1,17 +1,18 @@
+import HistoricalMarkers from '@/components/map/HistoricalMarkers.tsx';
+import MapControls from '@/components/map/MapControls.tsx';
+import OrganizationCenterHandler from '@/components/map/OrganizationCenterHandler.tsx';
+import OrganizationMarkers from '@/components/map/OrganizationMarkers.tsx';
+import ProductServiceMarkers from '@/components/map/ProductServiceMarkers.tsx';
+import SymbiosisLines from '@/components/map/SymbiosisLines.tsx';
+import { useMapFilter, useMapInteraction, useMapUI, useMapViewport } from '@/contexts/MapContexts.tsx';
+import bugulmaGeo from '@/data/bugulmaGeometry.json';
+import { useMapData } from '@/hooks/map/useMapData.ts';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import { useCallback, useEffect, useRef } from 'react';
import { GeoJSON, MapContainer, TileLayer, useMap, useMapEvents } from 'react-leaflet';
import MarkerClusterGroup from 'react-leaflet-markercluster';
import 'react-leaflet-markercluster/styles';
-import { useMapFilter, useMapInteraction, useMapUI, useMapViewport } from '@/contexts/MapContexts.tsx';
-import bugulmaGeo from '@/data/bugulmaGeometry.json';
-import { useMapData } from '@/hooks/map/useMapData.ts';
-import HistoricalMarkers from '@/components/map/HistoricalMarkers.tsx';
-import MapControls from '@/components/map/MapControls.tsx';
-import OrganizationCenterHandler from '@/components/map/OrganizationCenterHandler.tsx';
-import OrganizationMarkers from '@/components/map/OrganizationMarkers.tsx';
-import SymbiosisLines from '@/components/map/SymbiosisLines.tsx';
// Fix for default marker icon issue in Leaflet with webpack/vite
delete (L.Icon.Default.prototype as unknown as { _getIconUrl?: unknown })._getIconUrl;
@@ -147,7 +148,7 @@ const LeafletMap = () => {
useMapInteraction();
const { historicalLandmarks } = useMapData();
const { filteredAndSortedOrgs } = useMapFilter();
- const { mapViewMode } = useMapUI();
+ const { mapViewMode, showProductsServices } = useMapUI();
// GeoJSON style function - show only edges, no fill to avoid darkening the area
const geoJsonStyle = {
@@ -273,6 +274,41 @@ const LeafletMap = () => {
/>
)}
+ {/* Products and Services markers */}
+ {mapViewMode === 'organizations' && showProductsServices && (
+ {t('historicalContext.prompt')}
+
-
)}
{t('historicalContext.title')}
-++{t('historicalContext.title')} +{data} -
${count}
`,
+ className,
+ iconSize: L.point(40, 40),
+ });
+ }}
+ >
+
+
- {t('analyticsDashboard.totalMatchValue', 'Total Match Value')}
+ {t('analyticsDashboard.totalMatchValue')}
{formatCurrency(analytics.totalMatchValue)}
@@ -217,7 +217,7 @@ const AnalyticsDashboard = () => {
label: item.type,
value: item.count,
}))}
- title={t('analyticsDashboard.topResourceTypes', 'Top Resource Types')}
+ title={t('analyticsDashboard.topResourceTypes')}
/>
)}
@@ -230,7 +230,7 @@ const AnalyticsDashboard = () => {
@@ -246,7 +246,7 @@ const AnalyticsDashboard = () => {
{formatNumber(analytics.totalConnections)}
- {t('analyticsDashboard.total', 'Total')} + {t('analyticsDashboard.total')}
@@ -254,7 +254,7 @@ const AnalyticsDashboard = () => {
{formatNumber(analytics.activeConnections)}
- {t('analyticsDashboard.active', 'Active')} + {t('analyticsDashboard.active')}
@@ -262,14 +262,14 @@ const AnalyticsDashboard = () => {
{formatNumber(analytics.potentialConnections)}
- {t('analyticsDashboard.potential', 'Potential')} + {t('analyticsDashboard.potential')}
- {t('analyticsDashboard.connectionRate', 'Connection Rate')}
+ {t('analyticsDashboard.connectionRate')}
{formatPercentage(analytics.connectionRate)}
@@ -285,7 +285,7 @@ const AnalyticsDashboard = () => {
@@ -297,7 +297,7 @@ const AnalyticsDashboard = () => {
@@ -374,11 +374,11 @@ const AnalyticsDashboard = () => {
{formatNumber(analytics.activeMatchesCount)}
- {t('analyticsDashboard.totalFlowVolume', 'Total Flow Volume')}
+ {t('analyticsDashboard.totalFlowVolume')}
{formatNumber(analytics.totalFlowVolume)}
@@ -306,7 +306,7 @@ const AnalyticsDashboard = () => {
@@ -361,11 +361,11 @@ const AnalyticsDashboard = () => {
{formatCurrency(analytics.totalEconomicValue)}
- {t('analyticsDashboard.avgFlowValue', 'Average Flow Value')}
+ {t('analyticsDashboard.avgFlowValue')}
{formatCurrency(analytics.avgFlowValue)}
@@ -319,7 +319,7 @@ const AnalyticsDashboard = () => {
label: type,
value: count as number,
}))}
- title={t('analyticsDashboard.flowsByType', 'Flows by Type')}
+ title={t('analyticsDashboard.flowsByType')}
/>
)}
@@ -333,7 +333,7 @@ const AnalyticsDashboard = () => {
@@ -348,11 +348,11 @@ const AnalyticsDashboard = () => {
{formatNumber(analytics.totalCo2Saved)}
- {t('analyticsDashboard.tonnesCo2Saved', 'Tonnes CO₂ Saved')} + {t('analyticsDashboard.tonnesCo2Saved')}
- {t('analyticsDashboard.economicValueCreated', 'Economic Value Created')} + {t('analyticsDashboard.economicValueCreated')}
- {t('analyticsDashboard.activeMatches', 'Active Matches')} + {t('analyticsDashboard.activeMatches')}
- {t('analyticsDashboard.impactCategories', 'Impact Categories')} + {t('analyticsDashboard.impactCategories')}
-
)}
{t('analyticsDashboard.noNeedsData', 'No needs data available')}
+{t('analyticsDashboard.noNeedsData')}
-
)}
{t('analyticsDashboard.noOffersData', 'No offers data available')}
+{t('analyticsDashboard.noOffersData')}
@@ -493,10 +493,10 @@ const AnalyticsDashboard = () => {
- {gap.severity} {t('analyticsDashboard.gap', 'gap')}
+ {gap.severity} {t('analyticsDashboard.gap')}
- {gap.potential_matches} {t('analyticsDashboard.potentialMatches', 'potential matches')}
+ {gap.potential_matches} {t('analyticsDashboard.potentialMatches')}
@@ -509,18 +509,18 @@ const AnalyticsDashboard = () => {
{/* Export Actions */}
{gap.description}
+
{formatNumber(stats.totalCo2Saved)} t
-
- - {t('dashboard.perYear', 'per year')} -
+ +
- {formatCurrency(stats.totalEconomicValue)}
-
- - {t('dashboard.created', 'created annually')} -
+
+
{formatNumber(stats.activeMatches)}
-
- - {t('dashboard.operational', 'currently operational')} -
+ +
+
+
+
+
+
-
- ) : stats.recentActivity.length > 0 ? (
-
- {stats.recentActivity.slice(0, 5).map((activity: any, index: number) => (
-
+ {filteredActivities.slice(0, 5).map((activity) => (
+
+
) : (
-
-
-
- {activity.type}
-
-
+
-
- {activity.description}
-- {new Date(activity.timestamp).toLocaleDateString()} -
-
+ {filteredActivities.length > 5 && (
+
-
+
)}
-
-
+ {t('dashboard.noRecentActivity', 'No recent activity')}
-
- {/* This would show actual proposals - placeholder for now */}
-
+
+
+ )}
) : (
-
-
- - {t('dashboard.pendingReviews', 'Pending proposal reviews')} -
-- {stats.activeProposals} {t('dashboard.requireAttention', 'require your attention')} -
-
-
-
+ {pendingProposals.slice(0, 5).map((proposal: Proposal) => (
+ {
+ // Navigate to organization page or matching dashboard
+ if (proposal.toOrgId) {
+ navigate(`/organization/${proposal.toOrgId}`);
+ } else if (proposal.fromOrgId) {
+ navigate(`/organization/${proposal.fromOrgId}`);
+ } else {
+ navigate('/matching');
+ }
+ }}
+ >
+
+ ))}
+ {pendingProposals.length > 5 && (
+
+
+ {t(`organizationPage.status.${proposal.status}`)}
+
+
+
+
+ {proposal.message || t('dashboard.proposalNoMessage')}
+
+
+ {t('dashboard.proposalStatus')}:{' '}
+ {t(`organizationPage.status.${proposal.status}`)}
+
+
+
-
+ {t('dashboard.noActiveProposals', 'No active proposals')}
- - {
className="p-4 border rounded-lg hover:bg-muted/50 cursor-pointer transition-colors"
onClick={() => navigate(`/organization/${org.ID}`)}
>
- {org.Name}
+ {org.sector}
{org.subtype}
))}
{org.Name}
-{org.sector}
+
-
-
+
+
{Math.round(stats.matchSuccessRate * 100)}%
-
- - {t('dashboard.matchSuccessRate', 'Match Success Rate')} -
-
-
-
+
+
+
{stats.avgMatchTime.toFixed(1)}
-
- - {t('dashboard.avgMatchTime', 'Avg Match Time (days)')} -
-
-
+
+
+
+
+
{stats.topResourceTypes.length}
-
- - {t('dashboard.activeResourceTypes', 'Active Resource Types')} -
-
+ {/* Category Badge */}
+ {category && (
+ {title}
+
+ {/* Description */}
+ {description && (
+ {description}
+ )}
+
+ {hasActiveSearch && (
+
+
+ {category}
+
+
+ )}
+
+ {/* Title */}
+
+
+
+
+
+
+ {loading ? (
+
-
{building.Name}
{building.HeritageStatus && (
@@ -144,45 +139,45 @@ const HeritageBuildingPage = () => {
diff --git a/bugulma/frontend/pages/LandingPage.tsx b/bugulma/frontend/pages/LandingPage.tsx
index 525aa88..f6dd326 100644
--- a/bugulma/frontend/pages/LandingPage.tsx
+++ b/bugulma/frontend/pages/LandingPage.tsx
@@ -35,7 +35,7 @@ const LandingPage = () => {
/>
-
+ - {t('common.loading') || 'Loading building details...'} -
-
+
);
@@ -115,9 +112,7 @@ const HeritageBuildingPage = () => {
- {building.Name} -
+
+
-
+
+
{building.Notes ? (
-
@@ -410,7 +410,7 @@ const ImpactMetrics = () => {
) : (
@@ -421,7 +421,7 @@ const ImpactMetrics = () => {
@@ -430,13 +430,13 @@ const ImpactMetrics = () => {
@@ -445,13 +445,13 @@ const ImpactMetrics = () => {
+
{t('heritage.aboutBuilding') || 'About This Building'}
-
+
{building.Notes ? (
-
-
{/* Current Use */}
{(building.CurrentUse || building.OriginalPurpose) && (
{building.Notes}
+
+ {building.Notes}
) : (
-
+
-
+
+
- {t('impactMetrics.perMatch', 'per match')}
+ {t('impactMetrics.perMatch')}
@@ -253,7 +253,7 @@ const ImpactMetrics = () => {
@@ -266,14 +266,14 @@ const ImpactMetrics = () => {
@@ -292,7 +292,7 @@ const ImpactMetrics = () => {
@@ -303,13 +303,13 @@ const ImpactMetrics = () => {
) : Object.keys(impact.economicBreakdown).length > 0 ? (
@@ -321,7 +321,7 @@ const ImpactMetrics = () => {
@@ -355,7 +355,7 @@ const ImpactMetrics = () => {
{/* Impact Categories Overview */}
- {t('impactMetrics.impactCategoriesOverview', 'Impact Categories Overview')}
+ {t('impactMetrics.impactCategoriesOverview')}
))}
@@ -387,7 +387,7 @@ const ImpactMetrics = () => {
+
{t('heritage.buildingUse') || 'Building Use'}
-
+
{building.OriginalPurpose && (
- {t('impactMetrics.operational', 'operational')}
+ {t('impactMetrics.operational')}
@@ -234,7 +234,7 @@ const ImpactMetrics = () => {
-
+
- {building.OriginalPurpose}
+
{t('heritage.originalPurpose') || 'Original Purpose'}
-
- {building.OriginalPurpose}
+ +
-
+
- {building.CurrentUse}
+
{t('heritage.currentUse') || 'Current Use'}
-
- {building.CurrentUse}
+ +
-
+
+
@@ -232,19 +227,19 @@ const HeritageBuildingPage = () => {
>
{/* Quick Facts */}
+
{t('heritage.sources') || 'Sources & References'}
-
+
{building.Sources.map((source, index) => (
@@ -215,7 +210,7 @@ const HeritageBuildingPage = () => {
{index + 1}
- {source}
+ {source}
))}
-
+
+
- {t('impactMetrics.createdAnnually', 'created annually')}
+ {t('impactMetrics.createdAnnually')}
@@ -213,7 +213,7 @@ const ImpactMetrics = () => {
+
{t('heritage.quickFacts') || 'Quick Facts'}
-
+
{building.YearBuilt && (
- {t('impactMetrics.tonnesPerYear', 'tonnes/year')}
+ {t('impactMetrics.tonnesPerYear')}
@@ -192,7 +192,7 @@ const ImpactMetrics = () => {
- {building.YearBuilt}
+
{building.YearBuilt}
+ +
- {building.Architect}
+
{building.Architect}
+ +
- {building.BuilderOwner}
+
{building.BuilderOwner}
+ +
- {building.Style}
+
{building.Style}
+ +
- {building.Materials}
+
{building.Materials}
+ +
- {building.Storeys}
+
{building.Storeys}
+ +
- {building.FloorAreaM2} m²
+
{building.FloorAreaM2} m²
+ +
-
+
+
+
{t('heritage.location') || 'Location'}
-
+
{building.Address && (
diff --git a/bugulma/frontend/pages/ImpactMetrics.tsx b/bugulma/frontend/pages/ImpactMetrics.tsx
index 11b3bdd..81c6b3e 100644
--- a/bugulma/frontend/pages/ImpactMetrics.tsx
+++ b/bugulma/frontend/pages/ImpactMetrics.tsx
@@ -155,8 +155,8 @@ const ImpactMetrics = () => {
- {building.Address}
+
{building.Address}
+ +
-
+
+
+
- {t('impactMetrics.co2Saved', 'CO₂ Saved')} + {t('impactMetrics.co2Saved')}
{formatNumber(impact.totalCo2Saved)} @@ -179,7 +179,7 @@ const ImpactMetrics = () => {
- {t('impactMetrics.economicValue', 'Economic Value')} + {t('impactMetrics.economicValue')}
{formatCurrency(impact.totalEconomicValue)} @@ -200,7 +200,7 @@ const ImpactMetrics = () => {
- {t('impactMetrics.activeMatches', 'Active Matches')} + {t('impactMetrics.activeMatches')}
{formatNumber(impact.activeMatchesCount)} @@ -221,7 +221,7 @@ const ImpactMetrics = () => {
- {t('impactMetrics.avgValuePerMatch', 'Avg Value/Match')} + {t('impactMetrics.avgValuePerMatch')}
{formatCurrency(impact.avgValuePerMatch)} @@ -242,7 +242,7 @@ const ImpactMetrics = () => {
{t('impactMetrics.noEnvironmentalData', 'No environmental impact data available')}
+{t('impactMetrics.noEnvironmentalData')}
{t('impactMetrics.noEconomicData', 'No economic impact data available')}
+{t('impactMetrics.noEconomicData')}
@@ -372,7 +372,7 @@ const ImpactMetrics = () => {
{formatNumber(value)}
- {t('impactMetrics.tonnesCo2Reduced', 'tonnes CO₂ reduced')} + {t('impactMetrics.tonnesCo2Reduced')}
{t('impactMetrics.noProjectionData', 'No projection data available')}
+{t('impactMetrics.noProjectionData')}
{impact.totalCo2Saved >= 1000 - ? t('impactMetrics.majorContributor', 'Major contributor to regional decarbonization goals') - : t('impactMetrics.growingImpact', 'Growing environmental impact through industrial symbiosis') + ? t('impactMetrics.majorContributor') + : t('impactMetrics.growingImpact') }
{impact.totalEconomicValue >= 1000000 - ? t('impactMetrics.significantEconomicValue', 'Creating significant economic value through resource optimization') - : t('impactMetrics.economicBenefits', 'Delivering economic benefits through efficient resource matching') + ? t('impactMetrics.significantEconomicValue') + : t('impactMetrics.economicBenefits') }
- {t('impactMetrics.activeConnections', '{{count}} active symbiotic connections driving circular economy')} + {t('impactMetrics.activeConnections')} .replace('{{count}}', impact.activeMatchesCount.toString())
@@ -38,6 +102,46 @@ const LoginPage = () => {
{t('loginPage.subtitle')}
+ {isDevelopment && (
+
+
+ )}
+
- Quick Login (Development)
+
+ {TEST_USERS.map((testUser) => (
+
+ ))}
+
+
+
+ Test Credentials:
+
+ {TEST_USERS.map((user) => (
+
+
+
+ {user.role}
+
+ {user.email}
+ /
+ {user.password}
+
+ ))}
+
- {t('loginPage.demoNote')}
+
+ {!isDevelopment &&
diff --git a/bugulma/frontend/pages/MatchDetailPage.tsx b/bugulma/frontend/pages/MatchDetailPage.tsx
index fbe373b..488485c 100644
--- a/bugulma/frontend/pages/MatchDetailPage.tsx
+++ b/bugulma/frontend/pages/MatchDetailPage.tsx
@@ -11,6 +11,7 @@ import Button from '@/components/ui/Button.tsx';
import Badge from '@/components/ui/Badge.tsx';
import Select from '@/components/ui/Select.tsx';
import Textarea from '@/components/ui/Textarea.tsx';
+import { Label, FormField } from '@/components/ui';
import { useTranslation } from '@/hooks/useI18n.tsx';
import { useMatch, useUpdateMatchStatus } from '@/hooks/api/useMatchingAPI.ts';
import { useNavigation } from '@/hooks/useNavigation.tsx';
@@ -51,11 +52,11 @@ const MatchDetailPage = () => {
const getHistoryTitle = (action: string, value?: string) => {
switch (action) {
case 'status_change':
- return t('matchDetail.statusChanged', 'Status changed');
+ return t('matchDetail.statusChanged');
case 'comment':
- return t('matchDetail.commentAdded', 'Comment added');
+ return t('matchDetail.commentAdded');
case 'update':
- return t('matchDetail.matchUpdated', 'Match updated');
+ return t('matchDetail.matchUpdated');
default:
return value || action;
}
@@ -112,15 +113,15 @@ const MatchDetailPage = () => {
{t('loginPage.demoNote')}
}
+
+ {t('loginPage.noAccount', "Don't have an account?")}{' '}
+
+ {t('loginPage.signupLink')}
+
+
- {error?.message || t('matchDetail.notFound', 'Match not found')} + {error?.message || t('matchDetail.notFound')}