component supabase

2025-04-01 17:36:28 +08:00
parent 696a434b95
commit c0649ce10f
9 changed files with 1076 additions and 0 deletions
--- a/app/(app)/AppLayoutClient.tsx
+++ b/app/(app)/AppLayoutClient.tsx
@@ -32,6 +32,12 @@ export default function AppLayoutClient({
                    >
                      Dashboard
                    </Link>
+                    <Link
+                      href="/analytics"
+                      className="text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 px-3 py-2 rounded-md text-sm font-medium"
+                    >
+                      Analytics
+                    </Link>
                    <Link
                      href="/events"
                      className="text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 px-3 py-2 rounded-md text-sm font-medium"
--- a/app/(app)/analytics/page.tsx
+++ b/app/(app)/analytics/page.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import { useState } from 'react';
+import { subDays } from 'date-fns';
+import { DateRangePicker } from '@/app/components/ui/DateRangePicker';
+import { TeamSelector } from '@/app/components/ui/TeamSelector';
+
+export default function AnalyticsPage() {
+  // 默认日期范围为最近7天
+  const today = new Date();
+  const [dateRange, setDateRange] = useState({
+    from: subDays(today, 7), // 7天前
+    to: today // 今天
+  });
+
+  // 添加团队选择状态
+  const [selectedTeamId, setSelectedTeamId] = useState<string>();
+
+  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">
+        <h1 className="text-xl font-bold text-gray-900 dark:text-gray-100">Analytics</h1>
+        
+        <div className="flex flex-col gap-4 md:flex-row md:items-center">
+          <TeamSelector
+            value={selectedTeamId}
+            onChange={setSelectedTeamId}
+            className="w-[200px]"
+          />
+          <DateRangePicker
+            value={dateRange}
+            onChange={setDateRange}
+          />
+        </div>
+      </div>
+
+      {/* 如果没有选择团队，显示提示信息 */}
+      {!selectedTeamId && (
+        <div className="flex items-center justify-center p-8 bg-gray-50 dark:bg-gray-800 rounded-lg">
+          <p className="text-gray-500 dark:text-gray-400">
+            Please select a team to view analytics
+          </p>
+        </div>
+      )}
+
+      {/* 如果选择了团队，这里可以显示团队相关的分析数据 */}
+      {selectedTeamId && (
+        <div className="space-y-6">
+          {/* 这里添加实际的分析数据组件 */}
+        </div>
+      )}
+    </div>
+  );
+} 
--- a/app/api/teams/list/route.ts
+++ b/app/api/teams/list/route.ts
@@ -0,0 +1,41 @@
+import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs';
+import { cookies } from 'next/headers';
+import { NextResponse } from 'next/server';
+
+export async function GET() {
+  try {
+    const supabase = createRouteHandlerClient({ cookies });
+    
+    // 获取当前用户
+    const { data: { user }, error: userError } = await supabase.auth.getUser();
+    if (userError || !user) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+    }
+
+    // 获取用户所属的所有团队
+    const { data: teams, error: teamsError } = await supabase
+      .from('teams')
+      .select(`
+        id,
+        name,
+        description,
+        avatar_url
+      `)
+      .innerJoin('team_membership', 'teams.id = team_membership.team_id')
+      .eq('team_membership.user_id', user.id)
+      .is('teams.deleted_at', null);
+
+    if (teamsError) {
+      console.error('Error fetching teams:', teamsError);
+      return NextResponse.json({ error: 'Failed to fetch teams' }, { status: 500 });
+    }
+
+    return NextResponse.json(teams);
+  } catch (error) {
+    console.error('Error in /api/teams/list:', error);
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    );
+  }
+} 
--- a/app/components/ui/Select.tsx
+++ b/app/components/ui/Select.tsx
@@ -0,0 +1,88 @@
+"use client";
+
+import * as React from 'react';
+import { ChevronDown } from 'lucide-react';
+
+interface SelectOption {
+  value: string;
+  label: string;
+  icon?: string;
+}
+
+interface SelectProps {
+  value?: string;
+  onChange?: (value: string) => void;
+  options: SelectOption[];
+  placeholder?: string;
+  className?: string;
+}
+
+export function Select({ value, onChange, options, placeholder, className = '' }: SelectProps) {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const containerRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  const selectedOption = options.find(option => option.value === value);
+
+  return (
+    <div className={`relative ${className}`} ref={containerRef}>
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+      >
+        <span className="flex items-center">
+          {selectedOption?.icon && (
+            <img 
+              src={selectedOption.icon} 
+              alt="" 
+              className="mr-2 h-4 w-4 rounded-full"
+            />
+          )}
+          {selectedOption?.label || placeholder}
+        </span>
+        <ChevronDown className="h-4 w-4 opacity-50" />
+      </button>
+
+      {isOpen && (
+        <div className="absolute z-50 mt-1 w-full rounded-md border bg-popover text-popover-foreground shadow-md animate-in fade-in-80">
+          <div className="p-1">
+            {options.map((option) => (
+              <button
+                key={option.value}
+                onClick={() => {
+                  onChange?.(option.value);
+                  setIsOpen(false);
+                }}
+                className={`relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none hover:bg-accent hover:text-accent-foreground ${
+                  option.value === value ? 'bg-accent text-accent-foreground' : ''
+                }`}
+              >
+                {option.icon && (
+                  <img 
+                    src={option.icon} 
+                    alt="" 
+                    className="mr-2 h-4 w-4 rounded-full"
+                  />
+                )}
+                {option.label}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+} 
--- a/app/components/ui/TeamSelector.tsx
+++ b/app/components/ui/TeamSelector.tsx
@@ -0,0 +1,137 @@
+"use client";
+
+import { useEffect, useState } from 'react';
+import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';
+import type { Database } from '@/types/supabase';
+import { Select } from './Select';
+
+type Team = Database['public']['Tables']['teams']['Row'];
+
+interface TeamSelectorProps {
+  value?: string;
+  onChange?: (teamId: string) => void;
+  className?: string;
+}
+
+export function TeamSelector({ value, onChange, className }: TeamSelectorProps) {
+  const [teams, setTeams] = useState<Team[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  
+  const supabase = createClientComponentClient<Database>();
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const fetchTeams = async (userId: string) => {
+      if (!isMounted) return;
+      
+      console.log('Starting to fetch teams for user:', userId);
+      setLoading(true);
+      setError(null);
+      
+      try {
+        // 获取用户的团队成员关系
+        console.log('Fetching team memberships for user:', userId);
+        const { data: memberships, error: membershipError } = await supabase
+          .from('team_membership')
+          .select('team_id')
+          .eq('user_id', userId);
+
+        console.log('Team memberships result:', { memberships, membershipError });
+
+        if (membershipError) {
+          console.error('Membership error:', membershipError);
+          throw membershipError;
+        }
+
+        if (!memberships || memberships.length === 0) {
+          console.log('No team memberships found');
+          if (isMounted) {
+            setTeams([]);
+          }
+          return;
+        }
+
+        // 获取团队详细信息
+        const teamIds = memberships.map(m => m.team_id);
+        console.log('Fetching teams with IDs:', teamIds);
+        const { data: teamsData, error: teamsError } = await supabase
+          .from('teams')
+          .select('*')
+          .in('id', teamIds)
+          .is('deleted_at', null);
+
+        console.log('Teams result:', { teamsData, teamsError });
+
+        if (teamsError) {
+          console.error('Teams error:', teamsError);
+          throw teamsError;
+        }
+
+        if (isMounted && teamsData) {
+          setTeams(teamsData);
+        }
+      } catch (err) {
+        console.error('Error fetching teams:', err);
+        if (isMounted) {
+          setError(err instanceof Error ? err.message : 'Failed to load teams');
+        }
+      } finally {
+        if (isMounted) {
+          setLoading(false);
+        }
+      }
+    };
+
+    // 设置认证状态监听器
+    const { data: { subscription } } = supabase.auth.onAuthStateChange((event, session) => {
+      console.log('Auth state changed:', event, session?.user);
+      if (event === 'SIGNED_IN' && session?.user?.id) {
+        fetchTeams(session.user.id);
+      } else if (event === 'SIGNED_OUT') {
+        setTeams([]);
+        setError(null);
+      }
+    });
+
+    // 初始检查session
+    supabase.auth.getSession().then(({ data: { session } }) => {
+      console.log('Initial session check:', session?.user);
+      if (session?.user?.id) {
+        fetchTeams(session.user.id);
+      }
+    });
+
+    return () => {
+      isMounted = false;
+      subscription.unsubscribe();
+    };
+  }, [supabase]);
+
+  if (loading) {
+    return <div className="animate-pulse h-10 bg-gray-200 rounded-md dark:bg-gray-700" />;
+  }
+
+  if (error) {
+    return <div className="text-red-500 text-sm">{error}</div>;
+  }
+
+  if (teams.length === 0) {
+    return <div className="text-sm text-gray-500">No teams available</div>;
+  }
+
+  return (
+    <Select
+      className={className}
+      value={value}
+      onChange={(newValue: string) => onChange?.(newValue)}
+      options={teams.map(team => ({
+        value: team.id,
+        label: team.name,
+        icon: team.avatar_url || undefined
+      }))}
+      placeholder="Select a team"
+    />
+  );
+}