feat: add edit mode for Google Sheets data range in drawer

src/app/dashboard/[teamId]/_components/dashboard-metric-card.tsx

@@ -9,6 +9,7 @@ import {
   ClipboardCheck,
   Info,
   Loader2,
+  Pencil,
   Settings,
   X,
 } from "lucide-react";
@@ -52,6 +53,7 @@ export function DashboardMetricCard({
   teamId,
 }: DashboardMetricCardProps) {
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  const [isEditMode, setIsEditMode] = useState(false);
   const { confirm } = useConfirmation();
   const utils = api.useUtils();
   const { isProcessing, getError } = useDashboardCharts(teamId);
@@ -62,6 +64,7 @@ export function DashboardMetricCard({
   const error = getError(metricId);
 
   const isIntegrationMetric = !!metric.integration?.providerId;
+  const isGoogleSheets = metric.templateId?.startsWith("gsheets-") ?? false;
   const chartTransform =
     dashboardChart.chartConfig as ChartTransformResult | null;
   const hasChartData = !!chartTransform?.chartData?.length;
@@ -119,6 +122,18 @@ export function DashboardMetricCard({
       toast.error("Update failed", { description: err.message }),
   });
 
+  const updateConfigMutation =
+    api.metric.updateEndpointConfigAndRegenerate.useMutation({
+      onMutate: () => setOptimisticProcessing(metricId),
+      onSuccess: () => {
+        setIsEditMode(false);
+        toast.success("Range updated, refreshing data...");
+        void utils.dashboard.getDashboardCharts.invalidate({ teamId });
+      },
+      onError: (err) =>
+        toast.error("Update failed", { description: err.message }),
+    });
+
   // ---------------------------------------------------------------------------
   // Handlers
   // ---------------------------------------------------------------------------
@@ -170,6 +185,28 @@ export function DashboardMetricCard({
     [metricId, regenerateChartMutation],
   );
 
+  const handleUpdateConfig = useCallback(
+    (newDataRange: string) => {
+      const currentConfig = metric.endpointConfig as Record<string, string>;
+      updateConfigMutation.mutate({
+        metricId,
+        endpointConfig: {
+          ...currentConfig,
+          DATA_RANGE: newDataRange,
+        },
+      });
+    },
+    [metricId, metric.endpointConfig, updateConfigMutation],
+  );
+
+  // Reset edit mode when drawer closes
+  const handleDrawerOpenChange = useCallback((open: boolean) => {
+    setIsDrawerOpen(open);
+    if (!open) {
+      setIsEditMode(false);
+    }
+  }, []);
+
   // ---------------------------------------------------------------------------
   // Render
   // ---------------------------------------------------------------------------
@@ -238,7 +275,7 @@ export function DashboardMetricCard({
   );
 
   return (
-    <Drawer open={isDrawerOpen} onOpenChange={setIsDrawerOpen}>
+    <Drawer open={isDrawerOpen} onOpenChange={handleDrawerOpenChange}>
       {cardContent}
 
       <DrawerContent className="flex h-[60vh] max-h-[60vh] flex-col overflow-hidden">
@@ -301,6 +338,16 @@ export function DashboardMetricCard({
                 </TooltipContent>
               </Tooltip>
             )}
+            {isGoogleSheets && !isEditMode && !processing && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setIsEditMode(true)}
+              >
+                <Pencil className="mr-1 h-4 w-4" />
+                Edit Range
+              </Button>
+            )}
             <DrawerClose asChild>
               <Button
                 variant="ghost"
@@ -325,6 +372,10 @@ export function DashboardMetricCard({
             onDelete={handleDelete}
             onClose={() => setIsDrawerOpen(false)}
             onRegenerateChart={handleRegenerateChart}
+            isEditMode={isEditMode}
+            onExitEditMode={() => setIsEditMode(false)}
+            onUpdateConfig={handleUpdateConfig}
+            isUpdatingConfig={updateConfigMutation.isPending}
           />
         </div>
       </DrawerContent>

src/app/dashboard/[teamId]/_components/dashboard-metric-drawer.tsx

@@ -14,6 +14,7 @@ import { DashboardMetricChart } from "./dashboard-metric-chart";
 import {
   type DrawerTab,
   DrawerTabButtons,
+  GSheetsRangeEditor,
   GoalTabContent,
   RoleTabContent,
   SettingsTabContent,
@@ -33,6 +34,11 @@ interface DashboardMetricDrawerProps {
     cadence: Cadence,
     selectedDimension?: string,
   ) => void;
+  // Edit mode props (for Google Sheets)
+  isEditMode?: boolean;
+  onExitEditMode?: () => void;
+  onUpdateConfig?: (newDataRange: string) => void;
+  isUpdatingConfig?: boolean;
 }
 
 export function DashboardMetricDrawer({
@@ -45,6 +51,10 @@ export function DashboardMetricDrawer({
   onDelete,
   onClose,
   onRegenerateChart,
+  isEditMode = false,
+  onExitEditMode,
+  onUpdateConfig,
+  isUpdatingConfig = false,
 }: DashboardMetricDrawerProps) {
   const metric = dashboardChart.metric;
   const metricId = metric.id;
@@ -196,18 +206,39 @@ export function DashboardMetricDrawer({
       {/* Chart Column */}
       <div className="flex flex-col border-l">
         <div className="flex-1 overflow-hidden p-4">
-          <DashboardMetricChart
-            title={chartTransform?.title ?? metric.name}
-            chartTransform={chartTransform ?? null}
-            hasChartData={hasChartData}
-            isIntegrationMetric={isIntegrationMetric}
-            integrationId={metric.integration?.providerId}
-            roles={metric.roles ?? []}
-            goal={metric.goal}
-            goalProgress={goalProgress}
-            valueLabel={dashboardChart.valueLabel ?? null}
-            isProcessing={isProcessing}
-          />
+          {isEditMode && onExitEditMode && onUpdateConfig ? (
+            <GSheetsRangeEditor
+              connectionId={metric.integration?.connectionId ?? ""}
+              spreadsheetId={
+                (metric.endpointConfig as Record<string, string>)
+                  ?.SPREADSHEET_ID ?? ""
+              }
+              sheetName={
+                (metric.endpointConfig as Record<string, string>)?.SHEET_NAME ??
+                ""
+              }
+              currentRange={
+                (metric.endpointConfig as Record<string, string>)?.DATA_RANGE ??
+                ""
+              }
+              onSave={onUpdateConfig}
+              onCancel={onExitEditMode}
+              isSaving={isUpdatingConfig}
+            />
+          ) : (
+            <DashboardMetricChart
+              title={chartTransform?.title ?? metric.name}
+              chartTransform={chartTransform ?? null}
+              hasChartData={hasChartData}
+              isIntegrationMetric={isIntegrationMetric}
+              integrationId={metric.integration?.providerId}
+              roles={metric.roles ?? []}
+              goal={metric.goal}
+              goalProgress={goalProgress}
+              valueLabel={dashboardChart.valueLabel ?? null}
+              isProcessing={isProcessing}
+            />
+          )}
         </div>
       </div>
     </div>