Add custom date range support to profit analytics

Introduces a date range picker to the profit analytics dashboard, allowing users to select custom date ranges for profit calculations. Updates ProfitAnalyticsChart and profit-analytics-service to handle both period and date range queries, improving flexibility and user experience.

components/analytics/AnalyticsDashboard.tsx

@@ -27,6 +27,10 @@ import { formatGBP } from "@/utils/format";
 import { MetricsCardSkeleton } from './SkeletonLoaders';
 import dynamic from 'next/dynamic';
 import { Skeleton } from "@/components/ui/skeleton";
+import { DateRangePicker } from "@/components/ui/date-picker";
+import { DateRange } from "react-day-picker";
+import { addDays, startOfDay, endOfDay } from "date-fns";
+import type { DateRange as ProfitDateRange } from "@/lib/services/profit-analytics-service";
 
 // Lazy load chart components
 const RevenueChart = dynamic(() => import('./RevenueChart'), {
@@ -78,6 +82,10 @@ export default function AnalyticsDashboard({ initialData }: AnalyticsDashboardPr
   const [isLoading, setIsLoading] = useState(false);
   const [timeRange, setTimeRange] = useState('30');
   const [hideNumbers, setHideNumbers] = useState(false);
+  const [profitDateRange, setProfitDateRange] = useState<DateRange | undefined>({
+    from: startOfDay(addDays(new Date(), -29)),
+    to: endOfDay(new Date())
+  });
   const { toast } = useToast();
 
   // Function to mask sensitive numbers
@@ -302,8 +310,41 @@ export default function AnalyticsDashboard({ initialData }: AnalyticsDashboardPr
           </TabsContent>
 
           <TabsContent value="profit" className="space-y-6">
+            {/* Date Range Selector for Profit Calculator */}
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-lg">Date Range</CardTitle>
+                <CardDescription>
+                  Select a custom date range for profit calculations
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="flex flex-col sm:flex-row gap-4 sm:items-center">
+                  <DateRangePicker
+                    dateRange={profitDateRange}
+                    onDateRangeChange={setProfitDateRange}
+                    placeholder="Select date range"
+                    showPresets={true}
+                    className="w-full sm:w-auto"
+                  />
+                  {profitDateRange?.from && profitDateRange?.to && (
+                    <div className="text-sm text-muted-foreground flex items-center">
+                      <span>
+                        {profitDateRange.from.toLocaleDateString()} - {profitDateRange.to.toLocaleDateString()}
+                      </span>
+                    </div>
+                  )}
+                </div>
+              </CardContent>
+            </Card>
             <Suspense fallback={<ChartSkeleton />}>
-              <ProfitAnalyticsChart timeRange={timeRange} hideNumbers={hideNumbers} />
+              <ProfitAnalyticsChart 
+                dateRange={profitDateRange?.from && profitDateRange?.to ? {
+                  from: profitDateRange.from,
+                  to: profitDateRange.to
+                } : undefined}
+                hideNumbers={hideNumbers} 
+              />
             </Suspense>
           </TabsContent>