From e64f7d8f029e03219197c6dcb408ebaf14cbd7ea Mon Sep 17 00:00:00 2001 From: johndoe6345789 Date: Fri, 23 Jan 2026 02:22:24 +0000 Subject: [PATCH] Generated by Spark: split app.tsx into 5 parts --- src/App.tsx | 46 +--- src/components/dashboard-view.tsx | 236 ++++++++++++++++++ src/components/navigation.tsx | 62 +++++ src/components/roadmap-view.tsx | 393 ++++++++++++++++++++++++++++++ src/components/views/index.tsx | 5 + 5 files changed, 707 insertions(+), 35 deletions(-) create mode 100644 src/components/dashboard-view.tsx create mode 100644 src/components/navigation.tsx create mode 100644 src/components/roadmap-view.tsx create mode 100644 src/components/views/index.tsx diff --git a/src/App.tsx b/src/App.tsx index 1c3b1f7..fcde2cf 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -9,25 +9,9 @@ import { ShieldCheck, ChartBar, Buildings, - CheckCircle, - XCircle, - ClockCounterClockwise, - Plus, - MagnifyingGlass, - Funnel, - Download, - ArrowUp, - ArrowDown, - Warning, MapTrifold, - UploadSimple, - FileCsv, - Envelope, - X, - CalendarBlank, Notepad, Bell, - Camera, ChartLine, CurrencyCircleDollar, QrCode, @@ -35,24 +19,23 @@ import { UserPlus, Gear, FileText, - CaretDown, - CaretRight, - Question + Question, + UploadSimple, + ClockCounterClockwise, + CalendarBlank, + Envelope, + X } from '@phosphor-icons/react' -import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' import { Button } from '@/components/ui/button' -import { Badge } from '@/components/ui/badge' -import { Input } from '@/components/ui/input' -import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select' -import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog' -import { Label } from '@/components/ui/label' -import { Textarea } from '@/components/ui/textarea' import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover' import { Separator } from '@/components/ui/separator' import { ScrollArea } from '@/components/ui/scroll-area' import { toast } from 'sonner' import { cn } from '@/lib/utils' +import { NavItem, NavGroup } from '@/components/navigation' +import { DashboardView } from '@/components/dashboard-view' +import { RoadmapView } from '@/components/roadmap-view' import { ReportsView } from '@/components/ReportsView' import { CurrencyManagement } from '@/components/CurrencyManagement' import { EmailTemplateManager } from '@/components/EmailTemplateManager' @@ -71,7 +54,6 @@ import { CustomReportBuilder } from '@/components/CustomReportBuilder' import { HolidayPayManager } from '@/components/HolidayPayManager' import { PermanentPlacementInvoice } from '@/components/PermanentPlacementInvoice' import { CreditNoteGenerator } from '@/components/CreditNoteGenerator' -import { ShiftPremiumCalculator } from '@/components/ShiftPremiumCalculator' import { ContractValidator } from '@/components/ContractValidator' import { DetailedTimesheetEntry } from '@/components/DetailedTimesheetEntry' import { ShiftPatternManager } from '@/components/ShiftPatternManager' @@ -81,6 +63,7 @@ import { ExpenseDetailDialog } from '@/components/ExpenseDetailDialog' import { ComplianceDetailDialog } from '@/components/ComplianceDetailDialog' import { AdvancedSearch, type FilterField } from '@/components/AdvancedSearch' import { QueryLanguageGuide } from '@/components/QueryLanguageGuide' +import { TimesheetsView, BillingView, PayrollView, ExpensesView, ComplianceView } from '@/components/views' import type { Timesheet, Invoice, @@ -909,13 +892,7 @@ function App() { ) } -interface NavItemProps { - icon: React.ReactNode - label: string - active?: boolean - onClick?: () => void - badge?: number -} +export default App function NavItem({ icon, label, active, onClick, badge }: NavItemProps) { return ( @@ -3083,4 +3060,3 @@ function RoadmapView() { ) } -export default App diff --git a/src/components/dashboard-view.tsx b/src/components/dashboard-view.tsx new file mode 100644 index 0000000..d856e7d --- /dev/null +++ b/src/components/dashboard-view.tsx @@ -0,0 +1,236 @@ +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' +import { Button } from '@/components/ui/button' +import { + Clock, + Receipt, + CurrencyDollar, + ClockCounterClockwise, + CheckCircle, + Warning, + Notepad, + Download, + ArrowUp, + ArrowDown +} from '@phosphor-icons/react' +import { cn } from '@/lib/utils' +import type { DashboardMetrics } from '@/lib/types' + +interface DashboardViewProps { + metrics: DashboardMetrics +} + +export function DashboardView({ metrics }: DashboardViewProps) { + return ( +
+
+

Dashboard

+

Real-time overview of your workforce operations

+
+ +
+ } + trend={{ value: 12, direction: 'up' }} + variant="warning" + /> + } + variant="default" + /> + } + trend={{ value: 5, direction: 'down' }} + variant="error" + /> + } + variant="warning" + /> +
+ +
+ + + Monthly Revenue + Total invoiced this month + + +
+ £{metrics.monthlyRevenue.toLocaleString()} +
+
+ + 12.5% from last month +
+ + + + + + Monthly Payroll + Total payroll costs + + +
+ £{metrics.monthlyPayroll.toLocaleString()} +
+
+ + 8.3% from last month +
+ + + + + + Gross Margin + Revenue minus payroll + + +
+ {metrics.grossMargin.toFixed(1)}% +
+
+ + 3.2% from last month +
+ + +
+ +
+ + + Recent Activity + Latest timesheet and billing events + + +
+ } + title="Timesheet approved" + description="John Smith - Week ending 15 Jan 2025" + time="5 minutes ago" + /> + } + title="Invoice generated" + description="INV-00234 - Acme Corp - £2,450" + time="12 minutes ago" + /> + } + title="Payroll completed" + description="Weekly run - 45 workers - £28,900" + time="1 hour ago" + /> + } + title="Document expiring soon" + description="DBS check for Sarah Johnson - 14 days" + time="2 hours ago" + /> +
+ + + + + + Quick Actions + Common tasks and workflows + + + + + + + + +
+
+ ) +} + +interface MetricCardProps { + title: string + value: number + icon: React.ReactNode + trend?: { value: number; direction: 'up' | 'down' } + variant?: 'default' | 'success' | 'warning' | 'error' +} + +function MetricCard({ title, value, icon, trend, variant = 'default' }: MetricCardProps) { + const borderColors = { + default: 'border-border', + success: 'border-success/20', + warning: 'border-warning/20', + error: 'border-destructive/20' + } + + return ( + + + + {title} + + {icon} + + +
{value}
+ {trend && ( +
+ {trend.direction === 'up' ? ( + + ) : ( + + )} + {trend.value}% vs last week +
+ )} + + + ) +} + +interface ActivityItemProps { + icon: React.ReactNode + title: string + description: string + time: string +} + +function ActivityItem({ icon, title, description, time }: ActivityItemProps) { + return ( +
+
{icon}
+
+

{title}

+

{description}

+
+ {time} +
+ ) +} diff --git a/src/components/navigation.tsx b/src/components/navigation.tsx new file mode 100644 index 0000000..4915864 --- /dev/null +++ b/src/components/navigation.tsx @@ -0,0 +1,62 @@ +import { Badge } from '@/components/ui/badge' +import { cn } from '@/lib/utils' +import { CaretDown, CaretRight } from '@phosphor-icons/react' + +interface NavItemProps { + icon: React.ReactNode + label: string + active?: boolean + onClick?: () => void + badge?: number +} + +export function NavItem({ icon, label, active, onClick, badge }: NavItemProps) { + return ( + + ) +} + +interface NavGroupProps { + id: string + label: string + expanded: boolean + onToggle: () => void + children: React.ReactNode +} + +export function NavGroup({ label, expanded, onToggle, children }: NavGroupProps) { + return ( +
+ + {expanded && ( +
+ {children} +
+ )} +
+ ) +} diff --git a/src/components/roadmap-view.tsx b/src/components/roadmap-view.tsx new file mode 100644 index 0000000..60f5976 --- /dev/null +++ b/src/components/roadmap-view.tsx @@ -0,0 +1,393 @@ +import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' +import { Button } from '@/components/ui/button' +import { CheckCircle, ClockCounterClockwise, MapTrifold, Warning, Download } from '@phosphor-icons/react' +import { cn } from '@/lib/utils' + +export function RoadmapView() { + const roadmapContent = `# WorkForce Pro - Development Roadmap + +## Phase 1: Foundation & Core Pay/Bill (Quarters 1-2) ✅ + +### Core Platform Infrastructure +- ✅ Multi-tenancy architecture +- ✅ Entity and division management +- ✅ User authentication and role-based access control +- ✅ Cloud-hosted SaaS deployment +- ✅ Basic security and data access controls + +### Timesheet Management - Basic +- ✅ Online web portal timesheet entry +- ✅ Timesheet approval workflows +- ✅ Status tracking (pending/approved/rejected) +- ✅ Agency-initiated timesheet creation +- ✅ Bulk entry by administrators +- ✅ Mobile timesheet submission +- 📋 Batch import capabilities +- ✅ QR-coded paper timesheet scanning + +### Basic Billing & Invoicing +- ✅ Invoice generation from timesheets +- ✅ Invoice status tracking +- ✅ Multi-currency support (GBP, USD, EUR) +- ✅ Electronic invoice delivery +- ✅ Sales invoice templates +- ✅ Payment terms configuration +- 📋 Purchase order tracking + +### Basic Payroll +- ✅ Payroll run tracking +- ✅ Worker payment calculations +- ✅ One-click payroll processing +- 📋 PAYE payroll integration +- ✅ Holiday pay calculations + +### Dashboard & Core Reporting +- ✅ Executive dashboard with key metrics +- ✅ Pending approvals tracking +- ✅ Overdue invoice monitoring +- ✅ Revenue and margin visibility +- ✅ Activity feed + +--- + +## Phase 2: Advanced Operations & Automation (Quarters 3-4) 🔄 + +### Expense Management +- ✅ Worker expense submission (web portal) +- ✅ Agency-created expense entries +- ✅ Expense approval workflows +- ✅ Integration with billing and payroll +- ✅ Reimbursable vs billable expense tracking +- 📋 Mobile expense capture with receipt photos + +### Notifications & Workflow Automation +- ✅ In-system alert notifications +- ✅ Real-time notification center +- ✅ Notification history and tracking +- ✅ Event-driven processing updates +- ✅ Email notification templates +- 📋 Configurable notification rules +- 📋 Automated follow-up reminders + +### Timesheet Management - Advanced +- ✅ Multi-step approval routing +- 📋 Time and rate adjustment wizard +- 📋 Automated credit generation +- 📋 Re-invoicing workflows +- 📋 Full audit trail + +### Advanced Billing +- 📋 Permanent placement invoices +- 📋 Contractor self-billing +- 📋 Bespoke invoice templates +- 📋 Client self-billing support +- 📋 Withholding tax handling + +### Contract, Rate & Rule Enforcement +- ✅ Rate templates by role/client/placement +- 📋 Automatic shift premium calculations +- 📋 Overtime rate automation +- 📋 Time pattern validation +- 📋 AWR monitoring + +--- + +## Phase 3: Compliance & Self-Service (Quarters 5-6) 📋 + +### Compliance Management - Enhanced +- ✅ Document tracking and monitoring +- ✅ Expiry alerts and notifications +- ✅ Document upload and storage +- 📋 Digital onboarding workflows +- 📋 Automated contract pack generation +- 📋 Compliance enforcement rules +- 📋 Statutory reporting support + +### Self-Service Portals +- 📋 Branded worker portal +- 📋 Branded client portal +- 📋 Real-time timesheet visibility +- 📋 Invoice and payment status +- 📋 Paperless document access +- 📋 Mobile-responsive design + +### Advanced Payroll Processing +- 📋 CIS processing +- 📋 Agency staff payroll +- 📋 Multiple employment models +- 📋 International payroll preparation +- 📋 Holiday pay automation + +--- + +## Phase 4: Analytics & Integrations (Quarters 7-8) 📋 + +### Advanced Reporting & Analytics +- ✅ Real-time gross margin reporting +- ✅ Forecasting and predictive analytics +- ✅ Missing timesheet reports +- ✅ Custom report builder +- 📋 Client-level performance dashboards +- 📋 Placement-level profitability + +### System Integrations +- 📋 ATS (Applicant Tracking System) integration +- 📋 CRM platform integration +- 📋 Accounting system integration (Xero, QuickBooks, Sage) +- 📋 RESTful API for third-party integrations +- 📋 Webhook support for real-time updates + +### Global & Multi-Currency - Advanced +- ✅ Multi-currency billing (expanded) +- 📋 International sales tax handling +- 📋 Withholding tax automation +- 📋 Cross-border margin calculation + +--- + +## Phase 5: Enterprise & Scale (Quarters 9-10) 📋 + +### Multi-Tenancy - Advanced +- 📋 Franchise management capabilities +- 📋 Agency group consolidation +- 📋 Cross-entity reporting +- 📋 Delegated administration controls + +### Configuration & Customisation +- 📋 Custom system labels +- 📋 Agency-defined security roles +- ✅ Editable email templates +- 📋 White-label capabilities +- 📋 Custom workflow builders + +### Performance & Scale +- 📋 High-volume processing optimization +- 📋 Batch processing improvements +- 📋 Performance monitoring dashboards +- 📋 Load balancing and scaling + +--- + +## Phase 6: Innovation & AI (Quarters 11-12) 📋 + +### Intelligent Automation +- 📋 AI-powered timesheet anomaly detection +- 📋 Predictive compliance alerts +- 📋 Smart invoice matching +- 📋 Automated expense categorization +- 📋 Machine learning for margin optimization + +### Advanced Analytics +- 📋 Business intelligence dashboards +- 📋 Trend analysis and insights +- 📋 Benchmarking and KPI tracking +- 📋 Predictive workforce planning + +### Mobile Excellence +- 📋 Native mobile apps (iOS/Android) +- 📋 Offline capability +- 📋 Biometric authentication +- 📋 Push notifications +- 📋 Geolocation-based features + +--- + +## Legend +- ✅ **Completed** - Feature is implemented and live +- 🔄 **In Progress** - Currently under development +- 📋 **Planned** - Scheduled for future development + +--- + +## Success Metrics + +### Operational Efficiency +- 80% reduction in timesheet processing time +- 95% straight-through invoice processing +- 90% reduction in compliance breach incidents + +### User Adoption +- 85%+ worker portal adoption +- 75%+ client portal adoption +- <5% support ticket rate per user + +### Financial Impact +- 99.5% billing accuracy +- <2% margin leakage +- 30% reduction in administrative overhead` + + const parseMarkdown = (text: string) => { + const lines = text.split('\n') + const elements: React.ReactNode[] = [] + let inList = false + let listItems: React.ReactNode[] = [] + + const flushList = (index: number) => { + if (inList && listItems.length > 0) { + elements.push( + + ) + listItems = [] + inList = false + } + } + + lines.forEach((line, i) => { + if (line.startsWith('# ')) { + flushList(i) + elements.push( +

+ {line.substring(2)} +

+ ) + } else if (line.startsWith('## ')) { + flushList(i) + const text = line.substring(3) + elements.push( +

+ {text} +

+ ) + } else if (line.startsWith('### ')) { + flushList(i) + elements.push( +

+ {line.substring(4)} +

+ ) + } else if (line.startsWith('- ')) { + if (!inList) { + inList = true + } + const text = line.substring(2) + const isCompleted = text.startsWith('✅') + const isInProgress = text.startsWith('🔄') + const isPlanned = text.startsWith('📋') + + listItems.push( +
  • + + {isCompleted && ✅} + {isInProgress && 🔄} + {isPlanned && 📋} + {!isCompleted && !isInProgress && !isPlanned && •} + + + {text.replace(/^[✅🔄📋]\s*/, '')} + +
    • + ) + } else if (line.startsWith('---')) { + flushList(i) + elements.push(
    ) + } else if (line.trim() !== '') { + flushList(i) + elements.push( +

    + {line} +

    + ) + } + }) + + flushList(lines.length) + return elements + } + + return ( +
    +
    +
    +

    Product Roadmap

    +

    Development phases and feature timeline

    +
    +
    + +
    +
    + +
    + + + + + Completed + + + +
    Phase 1-2 + Features
    +

    Core platform with advanced features

    +     +     + + + + + + In Progress + + + +
    Phase 2
    +

    Advanced Operations & Automation

    +     +     + + + + + + Total Phases + + + +
    6
    +

    2 years timeline

    +     +     +
    + + + + {parseMarkdown(roadmapContent)} + + + + + +

    + + Release Cadence +

    +
    +
    +

    Major Releases

    +

    Quarterly

    +
    +
    +

    Minor Updates

    +

    Monthly

    +
    +
    +

    Patches

    +

    Weekly

    +
    +
    +

    Hotfixes

    +

    As needed

    +
    +
    +     +     +
    + ) +} diff --git a/src/components/views/index.tsx b/src/components/views/index.tsx new file mode 100644 index 0000000..3af8a00 --- /dev/null +++ b/src/components/views/index.tsx @@ -0,0 +1,5 @@ +export { TimesheetsView } from './TimesheetsView' +export { BillingView } from './BillingView' +export { PayrollView } from './PayrollView' +export { ExpensesView } from './ExpensesView' +export { ComplianceView } from './ComplianceView'