@licklist/design 0.78.5-dev.107 → 0.78.5-dev.109

package/src/v2/shadcn/_reference/DiarySettings.tsx

@@ -0,0 +1,187 @@
+import React, { useState, useEffect } from 'react';
+import { Switch } from './ui/switch';
+import { Label } from './ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
+import { supabase } from '@/integrations/supabase/client';
+import { useNotify } from '../hooks/useNotify';
+import { useProvider } from '@/contexts/ProviderContext';
+
+type DefaultFlowsView = 'list' | 'grid' | 'diary' | 'schedule';
+
+const DiarySettings: React.FC = () => {
+  const { provider, refreshProvider } = useProvider();
+  const { showSuccess, showError } = useNotify();
+  const [diaryEnabled, setDiaryEnabled] = useState(true);
+  const [scheduleEnabled, setScheduleEnabled] = useState(false);
+  const [defaultView, setDefaultView] = useState<DefaultFlowsView>('list');
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    if (provider) {
+      setDiaryEnabled(provider.diary_enabled !== false);
+      setScheduleEnabled(provider.schedule_enabled === true);
+      setDefaultView(provider.default_flows_view || 'list');
+    }
+  }, [provider]);
+
+  const handleDiaryToggle = async (checked: boolean) => {
+    if (!provider) return;
+
+    setIsLoading(true);
+    try {
+      const updates: { diary_enabled: boolean; default_flows_view?: string } = { 
+        diary_enabled: checked 
+      };
+      
+      if (!checked && defaultView === 'diary') {
+        updates.default_flows_view = 'list';
+        setDefaultView('list');
+      }
+
+      const { error } = await supabase
+        .from('providers')
+        .update(updates)
+        .eq('id', provider.id);
+
+      if (error) throw error;
+
+      setDiaryEnabled(checked);
+      await refreshProvider();
+      showSuccess(`Diary view ${checked ? 'enabled' : 'disabled'}`);
+    } catch (error) {
+      console.error('Error updating diary setting:', error);
+      showError('Failed to update diary setting');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleScheduleToggle = async (checked: boolean) => {
+    if (!provider) return;
+
+    setIsLoading(true);
+    try {
+      const updates: { schedule_enabled: boolean; default_flows_view?: string } = { 
+        schedule_enabled: checked 
+      };
+      
+      if (!checked && defaultView === 'schedule') {
+        updates.default_flows_view = 'list';
+        setDefaultView('list');
+      }
+
+      const { error } = await supabase
+        .from('providers')
+        .update(updates)
+        .eq('id', provider.id);
+
+      if (error) throw error;
+
+      setScheduleEnabled(checked);
+      await refreshProvider();
+      showSuccess(`Schedule view ${checked ? 'enabled' : 'disabled'}`);
+    } catch (error) {
+      console.error('Error updating schedule setting:', error);
+      showError('Failed to update schedule setting');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleDefaultViewChange = async (value: DefaultFlowsView) => {
+    if (!provider) return;
+
+    setIsLoading(true);
+    try {
+      const { error } = await supabase
+        .from('providers')
+        .update({ default_flows_view: value })
+        .eq('id', provider.id);
+
+      if (error) throw error;
+
+      setDefaultView(value);
+      sessionStorage.removeItem(`flowsViewMode-${provider.id}`);
+      await refreshProvider();
+      showSuccess('Default view updated');
+    } catch (error) {
+      console.error('Error updating default view:', error);
+      showError('Failed to update default view');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-4 w-full">
+      {/* Diary View Toggle */}
+      <div className="flex items-center justify-between p-4 border border-border-primary rounded-lg bg-surface-secondary w-full">
+        <div className="flex flex-col gap-1">
+          <Label htmlFor="diary-enabled" className="text-label-primary font-medium">
+            Enable Diary View
+          </Label>
+          <p className="text-label-tertiary text-sm">
+            Show the diary calendar view option on the Flows page
+          </p>
+        </div>
+        <Switch
+          id="diary-enabled"
+          checked={diaryEnabled}
+          onCheckedChange={handleDiaryToggle}
+          disabled={isLoading}
+        />
+      </div>
+
+      {/* Schedule View Toggle */}
+      <div className="flex items-center justify-between p-4 border border-border-primary rounded-lg bg-surface-secondary">
+        <div className="flex flex-col gap-1">
+          <Label htmlFor="schedule-enabled" className="text-label-primary font-medium">
+            Enable Schedule View
+          </Label>
+          <p className="text-label-tertiary text-sm">
+            Show the schedule view for managing fixed session times
+          </p>
+        </div>
+        <Switch
+          id="schedule-enabled"
+          checked={scheduleEnabled}
+          onCheckedChange={handleScheduleToggle}
+          disabled={isLoading}
+        />
+      </div>
+
+      {/* Default View Selection */}
+      <div className="flex items-center justify-between p-4 border border-border-primary rounded-lg bg-surface-secondary">
+        <div className="flex flex-col gap-1">
+          <Label htmlFor="default-view" className="text-label-primary font-medium">
+            Default View
+          </Label>
+          <p className="text-label-tertiary text-sm">
+            Choose which view to show when opening the Flows page
+          </p>
+        </div>
+        <Select
+          value={defaultView}
+          onValueChange={handleDefaultViewChange}
+          disabled={isLoading}
+        >
+          <SelectTrigger className="w-[140px]">
+            <SelectValue placeholder="Select view" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="list">List</SelectItem>
+            <SelectItem value="grid">Grid</SelectItem>
+            {diaryEnabled && (
+              <SelectItem value="diary">Diary</SelectItem>
+            )}
+            {scheduleEnabled && (
+              <SelectItem value="schedule">Schedule</SelectItem>
+            )}
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  );
+};
+
+export default DiarySettings;