tags selector

app/(app)/analytics/page.tsx

@@ -5,6 +5,7 @@ import { subDays } from 'date-fns';
 import { DateRangePicker } from '@/app/components/ui/DateRangePicker';
 import { TeamSelector } from '@/app/components/ui/TeamSelector';
 import { ProjectSelector } from '@/app/components/ui/ProjectSelector';
+import { TagSelector } from '@/app/components/ui/TagSelector';
 
 export default function AnalyticsPage() {
   // 默认日期范围为最近7天
@@ -20,6 +21,14 @@ export default function AnalyticsPage() {
   // 添加项目选择状态 - 使用数组支持多选
   const [selectedProjectIds, setSelectedProjectIds] = useState<string[]>([]);
   
+  // 添加标签选择状态 - 使用数组支持多选
+  const [selectedTagIds, setSelectedTagIds] = useState<string[]>([]);
+
+  // 分析是否有任何选择
+  const hasNoSelection = selectedTeamIds.length === 0 && 
+                          selectedProjectIds.length === 0 && 
+                          selectedTagIds.length === 0;
+
   return (
     <div className="container mx-auto px-4 py-8">
       <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between mb-8">
@@ -39,6 +48,13 @@ export default function AnalyticsPage() {
             multiple={true}
             teamId={selectedTeamIds.length === 1 ? selectedTeamIds[0] : undefined}
           />
+          <TagSelector
+            value={selectedTagIds}
+            onChange={(value) => setSelectedTagIds(Array.isArray(value) ? value : [value])}
+            className="w-[250px]"
+            multiple={true}
+            teamId={selectedTeamIds.length === 1 ? selectedTeamIds[0] : undefined}
+          />
           <DateRangePicker
             value={dateRange}
             onChange={setDateRange}
@@ -46,11 +62,11 @@ export default function AnalyticsPage() {
         </div>
       </div>
 
-      {/* 如果没有选择团队或项目，显示提示信息 */}
-      {selectedTeamIds.length === 0 && selectedProjectIds.length === 0 && (
+      {/* 如果没有选择任何项，显示提示信息 */}
+      {hasNoSelection && (
         <div className="flex items-center justify-center p-8 bg-gray-50 rounded-lg">
           <p className="text-gray-500">
-            Please select teams or projects to view analytics
+            Please select teams, projects, or tags to view analytics
           </p>
         </div>
       )}
@@ -74,7 +90,7 @@ export default function AnalyticsPage() {
       
       {/* 显示项目相关的分析数据 */}
       {selectedProjectIds.length > 0 && (
-        <div className="bg-white rounded-lg shadow p-6">
+        <div className="bg-white rounded-lg shadow p-6 mb-6">
           <h2 className="text-lg font-semibold text-gray-900 mb-4">
             Project Analytics ({selectedProjectIds.length} selected)
           </h2>
@@ -88,6 +104,23 @@ export default function AnalyticsPage() {
           </div>
         </div>
       )}
+      
+      {/* 显示标签相关的分析数据 */}
+      {selectedTagIds.length > 0 && (
+        <div className="bg-white rounded-lg shadow p-6">
+          <h2 className="text-lg font-semibold text-gray-900 mb-4">
+            Tag Analytics ({selectedTagIds.length} selected)
+          </h2>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            {selectedTagIds.map((tagId) => (
+              <div key={tagId} className="p-4 border rounded-md">
+                <h3 className="font-medium text-gray-800">Tag ID: {tagId}</h3>
+                <p className="text-gray-500 mt-2">Tag analytics will appear here</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
     </div>
   );
 } 

app/components/ui/TagSelector.tsx

@@ -0,0 +1,281 @@
+"use client";
+
+import * as React from 'react';
+import { useEffect, useState, useRef } from 'react';
+import { getSupabaseClient } from '../../utils/supabase';
+import { AuthChangeEvent } from '@supabase/supabase-js';
+import { Loader2, X, Check, Tag } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+// Define Tag type based on the database schema
+interface Tag {
+  id: string;
+  name: string;
+  type?: string | null;
+  attributes?: Record<string, unknown>;
+  created_at?: string;
+  updated_at?: string;
+  deleted_at?: string | null;
+  parent_tag_id?: string | null;
+  team_id?: string | null;
+  is_shared?: boolean;
+  schema_version?: number | null;
+  is_system?: boolean;
+}
+
+// TagSelector component with multi-select support
+export function TagSelector({ 
+  value, 
+  onChange, 
+  className,
+  multiple = false,
+  teamId,
+  tagType,
+}: { 
+  value?: string | string[];
+  onChange?: (tagId: string | string[]) => void;
+  className?: string;
+  multiple?: boolean;
+  teamId?: string; // Optional team ID to filter tags by team
+  tagType?: string; // Optional tag type for filtering
+}) {
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [tags, setTags] = useState<Tag[]>([]);
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
+  const [isOpen, setIsOpen] = useState(false);
+  const selectorRef = useRef<HTMLDivElement>(null);
+
+  // Initialize selected tags based on value prop
+  useEffect(() => {
+    if (value) {
+      if (Array.isArray(value)) {
+        setSelectedIds(value);
+      } else {
+        setSelectedIds(value ? [value] : []);
+      }
+    } else {
+      setSelectedIds([]);
+    }
+  }, [value]);
+
+  // Add click outside listener to close dropdown
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (selectorRef.current && !selectorRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    }
+
+    // Only add the event listener if the dropdown is open
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const fetchTags = async () => {
+      if (!isMounted) return;
+      setLoading(true);
+      setError(null);
+      
+      try {
+        const supabase = getSupabaseClient();
+        
+        let query = supabase.from('tags').select('*').is('deleted_at', null);
+        
+        // Filter by team if teamId is provided
+        if (teamId) {
+          query = query.eq('team_id', teamId);
+        }
+        
+        // Filter by tag type if provided
+        if (tagType) {
+          query = query.eq('type', tagType);
+        }
+        
+        const { data: tagsData, error: tagsError } = await query;
+
+        if (tagsError) throw tagsError;
+
+        if (!tagsData || tagsData.length === 0) {
+          if (isMounted) setTags([]);
+          return;
+        }
+        
+        if (isMounted) {
+          setTags(tagsData as Tag[]);
+        }
+      } catch (err) {
+        if (isMounted) {
+          setError(err instanceof Error ? err.message : 'Failed to load tags');
+        }
+      } finally {
+        if (isMounted) {
+          setLoading(false);
+        }
+      }
+    };
+
+    const supabase = getSupabaseClient();
+    
+    const { data: { subscription } } = supabase.auth.onAuthStateChange((event: AuthChangeEvent) => {
+      if (event === 'SIGNED_IN') {
+        fetchTags();
+      } else if (event === 'SIGNED_OUT') {
+        setTags([]);
+        setError(null);
+      }
+    });
+
+    supabase.auth.getSession().then(() => {
+      fetchTags();
+    });
+
+    return () => {
+      isMounted = false;
+      subscription.unsubscribe();
+    };
+  }, [teamId, tagType]);
+
+  const handleToggle = () => {
+    if (!loading && !error && tags.length > 0) {
+      setIsOpen(!isOpen);
+    }
+  };
+
+  const handleTagSelect = (tagId: string) => {
+    let newSelected: string[];
+    
+    if (multiple) {
+      // For multi-select: toggle tag in/out of selection
+      if (selectedIds.includes(tagId)) {
+        newSelected = selectedIds.filter(id => id !== tagId);
+      } else {
+        newSelected = [...selectedIds, tagId];
+      }
+    } else {
+      // For single-select: replace selection with the new tag
+      newSelected = [tagId];
+      setIsOpen(false);
+    }
+    
+    setSelectedIds(newSelected);
+    
+    if (onChange) {
+      onChange(multiple ? newSelected : newSelected[0] || '');
+    }
+  };
+
+  const removeTag = (e: React.MouseEvent, tagId: string) => {
+    e.stopPropagation();
+    const newSelected = selectedIds.filter(id => id !== tagId);
+    setSelectedIds(newSelected);
+    if (onChange) {
+      onChange(multiple ? newSelected : newSelected[0] || '');
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className={cn(
+        "flex w-full items-center justify-between rounded-md border px-3 py-2",
+        className
+      )}>
+        <Loader2 className="h-4 w-4 animate-spin" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={cn(
+        "flex w-full items-center rounded-md border border-destructive bg-destructive/10 px-3 py-2 text-destructive",
+        className
+      )}>
+        {error}
+      </div>
+    );
+  }
+
+  if (tags.length === 0) {
+    return (
+      <div className={cn(
+        "flex w-full items-center rounded-md border px-3 py-2 text-muted-foreground",
+        className
+      )}>
+        No tags available
+      </div>
+    );
+  }
+
+  const selectedTags = tags.filter(tag => selectedIds.includes(tag.id));
+
+  return (
+    <div className="relative" ref={selectorRef}>
+      <div 
+        className={cn(
+          "flex w-full min-h-10 items-center flex-wrap rounded-md border p-1 cursor-pointer",
+          isOpen && "ring-2 ring-offset-2 ring-purple-500",
+          className
+        )}
+        onClick={handleToggle}
+      >
+        {selectedTags.length > 0 ? (
+          <div className="flex flex-wrap gap-1">
+            {selectedTags.map(tag => (
+              <div 
+                key={tag.id} 
+                className="flex items-center gap-1 bg-purple-100 text-purple-800 rounded-md px-2 py-1 text-sm"
+              >
+                {tag.name}
+                {multiple && (
+                  <X 
+                    size={14} 
+                    className="cursor-pointer hover:text-purple-900" 
+                    onClick={(e) => removeTag(e, tag.id)} 
+                  />
+                )}
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="px-2 py-1 text-gray-500">Select tags</div>
+        )}
+      </div>
+      
+      {isOpen && (
+        <div className="absolute w-full mt-1 max-h-60 overflow-auto rounded-md border bg-white shadow-lg z-10">
+          {tags.map(tag => (
+            <div 
+              key={tag.id}
+              className={cn(
+                "px-3 py-2 cursor-pointer hover:bg-gray-100 flex items-center justify-between",
+                selectedIds.includes(tag.id) && "bg-purple-50"
+              )}
+              onClick={() => handleTagSelect(tag.id)}
+            >
+              <span className="flex items-center gap-2">
+                <Tag className="h-4 w-4 text-purple-500" />
+                <span>{tag.name}</span>
+                {tag.type && (
+                  <span className="text-xs text-gray-500 bg-gray-100 px-1.5 py-0.5 rounded">
+                    {tag.type}
+                  </span>
+                )}
+              </span>
+              {selectedIds.includes(tag.id) && (
+                <Check className="h-4 w-4 text-purple-600" />
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}