@tuturuuu/ui 0.0.4 → 0.2.0

package/src/components/ui/legacy/meet/page.tsx

@@ -0,0 +1,331 @@
+import { Calendar, UserIcon, Users, Video, Zap } from '@tuturuuu/icons';
+import {
+  createAdminClient,
+  createClient,
+} from '@tuturuuu/supabase/next/server';
+import type { MeetTogetherPlan } from '@tuturuuu/types/primitives/MeetTogetherPlan';
+import { Badge } from '@tuturuuu/ui/badge';
+import { Button } from '@tuturuuu/ui/button';
+import { Card, CardContent } from '@tuturuuu/ui/card';
+import { GradientHeadline } from '@tuturuuu/ui/custom/gradient-headline';
+import { Separator } from '@tuturuuu/ui/separator';
+import 'dayjs/locale/vi';
+import 'dayjs/plugin/relativeTime';
+import Link from 'next/link';
+import { getLocale, getTranslations } from 'next-intl/server';
+import { MeetTogetherClient } from './client-wrapper';
+import Form from './form';
+
+// Extended interface to include participants
+export interface MeetTogetherPlanWithParticipants extends MeetTogetherPlan {
+  participants?: Array<{
+    user_id: string | null;
+    display_name: string | null;
+    is_guest: boolean | null;
+    timeblock_count: number | null;
+    plan_id: string | null;
+  }>;
+}
+
+// Server component props type
+interface MeetTogetherPageProps {
+  wsId?: string;
+  path?: string;
+  searchParams?: Promise<{
+    page?: string;
+    pageSize?: string;
+    search?: string;
+  }>;
+}
+
+export async function MeetTogetherPage({
+  wsId,
+  path,
+  searchParams,
+}: MeetTogetherPageProps) {
+  const locale = await getLocale();
+  const t = await getTranslations('meet-together');
+  const tCommon = await getTranslations('common');
+
+  const resolvedSearchParams = await searchParams;
+  const page = parseInt(resolvedSearchParams?.page || '1', 10);
+  const pageSize = parseInt(resolvedSearchParams?.pageSize || '9', 10);
+
+  const {
+    data: plans,
+    user,
+    totalCount,
+  } = await getData({ wsId, page, pageSize });
+  const totalPages = Math.ceil(totalCount / pageSize);
+
+  return (
+    <div className="relative flex w-full flex-col items-center overflow-hidden">
+      {/* Background decorative elements */}
+      <div className="pointer-events-none absolute inset-0 -z-10">
+        <div className="absolute top-20 -left-32 h-64 w-64 rounded-full bg-dynamic-blue/10 blur-3xl"></div>
+        <div className="absolute top-32 -right-32 h-64 w-64 rounded-full bg-dynamic-purple/10 blur-3xl"></div>
+        <div className="absolute bottom-1/3 left-1/4 h-40 w-40 rounded-full bg-dynamic-green/5 blur-2xl"></div>
+      </div>
+
+      {/* Hero + Form side-by-side on desktop, stacked on mobile */}
+      <div className="container mx-auto mt-8 flex max-w-6xl flex-col gap-8 px-4 py-10 lg:flex-row lg:items-center lg:gap-12">
+        {/* Hero section */}
+        <div className="flex flex-1 flex-col items-center text-center lg:items-start lg:text-left">
+          {/* Badge */}
+          <Badge variant="secondary" className="mb-6 px-4 py-2">
+            <Video className="mr-2 h-4 w-4" />
+            {t('meeting_coordination')}
+          </Badge>
+
+          {/* Main heading */}
+          <h1 className="mb-6 text-balance text-center font-bold text-4xl text-foreground leading-tight tracking-tight md:text-5xl lg:text-left lg:text-6xl">
+            {t('headline-p1')}{' '}
+            <GradientHeadline className="bg-linear-to-r from-dynamic-blue via-dynamic-purple to-dynamic-green bg-clip-text">
+              {t('headline-p2')}
+            </GradientHeadline>
+          </h1>
+
+          {/* Subtitle */}
+          <p className="mb-8 max-w-2xl text-center text-foreground/70 text-lg leading-relaxed md:text-xl lg:text-left">
+            {t('new_plan_desc')}
+          </p>
+
+          {/* Features highlights */}
+          <div className="mb-8 grid grid-cols-1 gap-4 md:grid-cols-3">
+            <div className="flex items-center gap-3 rounded-lg bg-dynamic-blue/5 p-4">
+              <div className="flex h-10 w-10 items-center justify-center rounded-full bg-dynamic-blue/10">
+                <Calendar className="h-5 w-5 text-dynamic-blue" />
+              </div>
+              <div className="text-left">
+                <p className="font-medium text-foreground text-sm">
+                  {t('smart_scheduling')}
+                </p>
+                <p className="text-foreground/60 text-xs">
+                  {t('automatic_coordination')}
+                </p>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-3 rounded-lg bg-dynamic-purple/5 p-4">
+              <div className="flex h-10 w-10 items-center justify-center rounded-full bg-dynamic-purple/10">
+                <Users className="h-5 w-5 text-dynamic-purple" />
+              </div>
+              <div className="text-left">
+                <p className="font-medium text-foreground text-sm">
+                  {t('group_availability')}
+                </p>
+                <p className="text-foreground/60 text-xs">
+                  {t('find_perfect_time')}
+                </p>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-3 rounded-lg bg-dynamic-green/5 p-4">
+              <div className="flex h-10 w-10 items-center justify-center rounded-full bg-dynamic-green/10">
+                <Zap className="h-5 w-5 text-dynamic-green" />
+              </div>
+              <div className="text-left">
+                <p className="font-medium text-foreground text-sm">
+                  {t('instant_setup')}
+                </p>
+                <p className="text-foreground/60 text-xs">
+                  {t('minutes_to_create')}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        {/* Form section */}
+        <div className="mx-auto w-full max-w-2xl flex-1 lg:mx-0">
+          <Card className="border-border/50 bg-accent/50 backdrop-blur-sm">
+            <CardContent className="p-6 md:p-8">
+              <Form
+                wsId={wsId}
+                user={
+                  user
+                    ? {
+                        id: user.id,
+                        avatar_url: user.user_metadata?.avatar_url ?? null,
+                        bio: user.user_metadata?.bio ?? null,
+                        created_at: user.created_at ?? null,
+                        display_name: user.user_metadata?.display_name ?? null,
+                        handle: user.user_metadata?.handle ?? null,
+                      }
+                    : null
+                }
+              />
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+
+      <Separator className="my-8 md:my-16" />
+
+      {/* Plans section */}
+      <div className="flex w-full flex-col items-center justify-center px-4 pb-16">
+        <div className="w-full max-w-6xl">
+          <div className="mb-8 flex flex-col gap-4">
+            <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+              <div className="space-y-2 text-center sm:text-left">
+                <h2 className="font-bold text-2xl text-foreground md:text-3xl">
+                  {t('your_plans')}
+                </h2>
+                {totalCount > 0 && (
+                  <p className="text-foreground/60 text-sm">
+                    <span className="font-medium text-foreground">
+                      {totalCount}
+                    </span>{' '}
+                    {tCommon('result(s)')}
+                  </p>
+                )}
+              </div>
+            </div>
+          </div>
+
+          {user?.id ? (
+            <MeetTogetherClient
+              plans={plans}
+              locale={locale}
+              totalPages={totalPages}
+              totalCount={totalCount}
+              currentPage={page}
+              pageSize={pageSize}
+              user={user}
+              path={path}
+            />
+          ) : (
+            <Card className="border-border/50 bg-linear-to-br from-dynamic-blue/5 to-dynamic-purple/5">
+              <CardContent className="flex flex-col items-center justify-center p-16">
+                <div className="mb-8 rounded-full bg-dynamic-blue/10 p-8 shadow-sm">
+                  <UserIcon className="h-8 w-8 text-dynamic-blue" />
+                </div>
+                <h3 className="mb-4 font-semibold text-foreground text-xl">
+                  {t('login_required')}
+                </h3>
+                <p className="mb-6 max-w-md text-center text-foreground/70 text-sm leading-relaxed">
+                  {t('login_required_desc')}
+                </p>
+                <div className="flex gap-4">
+                  <Button asChild>
+                    <Link href="/login">{tCommon('sign_in')}</Link>
+                  </Button>
+                  <Button variant="outline" asChild>
+                    <Link href="/register">{tCommon('create_account')}</Link>
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+async function getData({
+  wsId,
+  page = 1,
+  pageSize = 9,
+}: {
+  wsId?: string;
+  page?: number;
+  pageSize?: number;
+} = {}) {
+  const supabase = await createClient();
+
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  if (!user) return { data: [], totalCount: 0, user };
+
+  const sbAdmin = await createAdminClient();
+
+  const createdPlansQuery = sbAdmin
+    .from('meet_together_plans')
+    .select('*')
+    .eq('creator_id', user.id)
+    .order('created_at', { ascending: false });
+
+  const joinedPlansQuery = sbAdmin
+    .from('meet_together_user_timeblocks')
+    .select('...meet_together_plans!inner(*)')
+    .eq('user_id', user.id)
+    .neq('meet_together_plans.creator_id', user.id)
+    .order('created_at', {
+      ascending: false,
+      referencedTable: 'meet_together_plans',
+    });
+
+  if (wsId) {
+    createdPlansQuery.eq('ws_id', wsId);
+    joinedPlansQuery.eq('meet_together_plans.ws_id', wsId);
+  }
+
+  const [createdPlansResult, joinedPlansResult] = await Promise.all([
+    createdPlansQuery,
+    joinedPlansQuery,
+  ]);
+
+  const { data: createdPlans } = createdPlansResult;
+  const { data: joinedPlans } = joinedPlansResult;
+
+  // Combine and deduplicate
+  const planMap = new Map();
+  createdPlans?.forEach((plan) => {
+    if (!planMap.has(plan.id)) {
+      planMap.set(plan.id, plan);
+    }
+  });
+  joinedPlans?.forEach((plan) => {
+    if (!planMap.has(plan.id)) {
+      planMap.set(plan.id, plan);
+    }
+  });
+
+  const allPlans = Array.from(planMap.values()).sort(
+    (a, b) =>
+      new Date(b.created_at || 0).getTime() -
+      new Date(a.created_at || 0).getTime()
+  );
+
+  // Apply pagination
+  const from = (page - 1) * pageSize;
+  const to = from + pageSize;
+  const paginatedPlans = allPlans.slice(from, to);
+
+  const planIds =
+    paginatedPlans
+      ?.map((plan) => plan.id)
+      .filter((id): id is string => Boolean(id)) || [];
+
+  let participantsData: {
+    user_id: string | null;
+    display_name: string | null;
+    is_guest: boolean | null;
+    timeblock_count: number | null;
+    plan_id: string | null;
+  }[] = [];
+
+  if (planIds.length > 0) {
+    const { data } = await sbAdmin
+      .from('meet_together_users')
+      .select('user_id, display_name, plan_id, is_guest, timeblock_count')
+      .in('plan_id', planIds);
+
+    participantsData = data || [];
+  }
+
+  const plansWithParticipants = paginatedPlans.map((plan) => ({
+    ...plan,
+    participants: plan.id
+      ? participantsData.filter((p) => p.plan_id === plan.id)
+      : [],
+  }));
+
+  return {
+    data: plansWithParticipants as MeetTogetherPlanWithParticipants[],
+    user,
+    totalCount: allPlans.length, // Use actual count after deduplication
+  };
+}

package/src/components/ui/legacy/meet/pagination.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { useCallback, useTransition } from 'react';
+import { DataPagination } from '../../custom/data-pagination';
+
+interface MeetTogetherPaginationProps {
+  currentPage: number;
+  totalPages: number;
+  totalCount: number;
+  pageSize: number;
+}
+
+export default function MeetTogetherPagination({
+  currentPage,
+  totalPages,
+  totalCount,
+  pageSize,
+}: MeetTogetherPaginationProps) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const [isPending, startTransition] = useTransition();
+
+  const createURL = useCallback(
+    (params: Record<string, string>) => {
+      const newSearchParams = new URLSearchParams(searchParams.toString());
+
+      // Update the specified parameters
+      Object.entries(params).forEach(([key, value]) => {
+        if (value) {
+          newSearchParams.set(key, value);
+        } else {
+          newSearchParams.delete(key);
+        }
+      });
+
+      return `${pathname}?${newSearchParams.toString()}`;
+    },
+    [pathname, searchParams]
+  );
+
+  const handlePageChange = useCallback(
+    (page: number) => {
+      if (page === currentPage) return;
+
+      startTransition(() => {
+        const url = createURL({ page: page.toString() });
+        router.push(url);
+      });
+    },
+    [router, currentPage, createURL]
+  );
+
+  const handlePageSizeChange = useCallback(
+    (newPageSize: number) => {
+      if (newPageSize === pageSize) return;
+
+      startTransition(() => {
+        const url = createURL({
+          pageSize: newPageSize.toString(),
+          page: '1', // Reset to first page when changing page size
+        });
+        router.push(url);
+      });
+    },
+    [router, pageSize, createURL]
+  );
+
+  const pageSizeOptions = [6, 9, 12, 18, 24];
+
+  return (
+    <div style={{ opacity: isPending ? 0.7 : 1 }}>
+      <DataPagination
+        currentPage={currentPage}
+        totalPages={totalPages}
+        totalCount={totalCount}
+        pageSize={pageSize}
+        onPageChange={handlePageChange}
+        onPageSizeChange={handlePageSizeChange}
+        itemName="plans"
+        pageSizeOptions={pageSizeOptions}
+        showPageSizeSelector={totalCount > 6}
+      />
+    </div>
+  );
+}

package/src/components/ui/legacy/meet/planId/account-badge.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+
+export default function AccountBadge({ type }: { type: 'GUEST' | 'PLATFORM' }) {
+  const t = useTranslations('meet-together-plan-details');
+
+  return (
+    <div
+      className={`${
+        type === 'GUEST'
+          ? 'border border-foreground/20 bg-foreground/10'
+          : 'bg-linear-to-r from-dynamic-red/70 to-dynamic-blue/70'
+      } mt-2 rounded px-2 py-1 font-semibold text-sm`}
+    >
+      <span className={`bg-linear-to-r bg-clip-text text-white`}>
+        {t(type === 'GUEST' ? 'guest_account' : 'tuturuuu_account')}
+      </span>
+    </div>
+  );
+}

package/src/components/ui/legacy/meet/planId/agenda-details.tsx

@@ -0,0 +1,131 @@
+'use client';
+
+import { updatePlan } from '@tuturuuu/apis/meet/actions';
+import { ClipboardList, Pencil, Plus } from '@tuturuuu/icons';
+import type { MeetTogetherPlan } from '@tuturuuu/types/primitives/MeetTogetherPlan';
+import type { JSONContent } from '@tuturuuu/types/tiptap';
+import { Button } from '@tuturuuu/ui/button';
+import { useTimeBlocking } from '@tuturuuu/ui/hooks/time-blocking-provider';
+import { RichTextEditor } from '@tuturuuu/ui/text-editor/editor';
+import { useRouter } from 'next/navigation';
+import { useTranslations } from 'next-intl';
+import { useCallback, useState } from 'react';
+
+interface AgendaDetailsProps {
+  plan: MeetTogetherPlan;
+}
+
+export default function AgendaDetails({ plan }: AgendaDetailsProps) {
+  const t = useTranslations('meet-together');
+  const router = useRouter();
+  const { user } = useTimeBlocking();
+  const [editContent, setEditContent] = useState<JSONContent | null>(
+    plan.agenda_content || null
+  );
+  const [isEditing, setIsEditing] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleEdit = useCallback(() => {
+    setIsEditing(true);
+    setEditContent(plan.agenda_content || null);
+  }, [plan.agenda_content]);
+
+  const handleCancel = useCallback(() => {
+    setIsEditing(false);
+    setEditContent(plan.agenda_content || null);
+  }, [plan.agenda_content]);
+
+  const handleSave = useCallback(async () => {
+    if (!plan.id) return;
+
+    setIsLoading(true);
+    try {
+      const result = await updatePlan(plan.id, {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        agenda_content: editContent as any,
+      });
+
+      if (result.data) {
+        setIsEditing(false);
+        router.refresh();
+      } else {
+        console.error('Failed to save agenda:', result.error);
+      }
+    } catch (error) {
+      console.error('Error saving agenda:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [plan.id, editContent, router]);
+
+  const handleContentChange = useCallback((content: JSONContent | null) => {
+    setEditContent(content || null);
+  }, []);
+
+  // Only allow platform users to edit (not guest users)
+  const canEdit = !!user && !user.is_guest;
+
+  return (
+    <div className="w-full space-y-8">
+      <div className="flex flex-col items-start justify-between gap-4 md:flex-row">
+        <div className="space-y-4">
+          <p className="font-semibold text-4xl">{t('agenda')}</p>
+          <p className="text-md text-muted-foreground">
+            {t('agenda_description')}
+          </p>
+        </div>
+        {isEditing ? (
+          <div className="flex justify-center gap-2">
+            <Button
+              onClick={handleCancel}
+              variant="outline"
+              size="lg"
+              disabled={isLoading}
+            >
+              Cancel
+            </Button>
+            <Button onClick={handleSave} size="lg" disabled={isLoading}>
+              {isLoading ? 'Saving...' : 'Save'}
+            </Button>
+          </div>
+        ) : canEdit ? (
+          plan.agenda_content ? (
+            <Button onClick={handleEdit} variant="outline" size="lg">
+              <Pencil size={16} />
+              Edit
+            </Button>
+          ) : (
+            <Button onClick={handleEdit} variant="default" size="lg">
+              <Plus size={16} />
+              Add Agenda
+            </Button>
+          )
+        ) : null}
+      </div>
+
+      {plan.agenda_content || isEditing ? (
+        <RichTextEditor
+          content={isEditing ? editContent : plan.agenda_content || null}
+          onChange={isEditing ? handleContentChange : undefined}
+          readOnly={!isEditing}
+          className="max-h-screen w-full"
+        />
+      ) : (
+        <div className="flex h-96 w-full items-center justify-center">
+          <div className="flex flex-col items-center space-y-4 text-center">
+            <div className="rounded-full bg-muted p-6">
+              <ClipboardList size={48} className="text-muted-foreground" />
+            </div>
+            <div className="space-y-2">
+              <h3 className="font-medium text-lg">No Agenda Content Yet</h3>
+              <p className="max-w-md text-muted-foreground text-sm">
+                Start organizing your meeting by creating a structured outline
+                to keep everyone on track to make your meeting more productive.
+              </p>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/ui/legacy/meet/planId/all-availabilities.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+import type { MeetTogetherPlan } from '@tuturuuu/types/primitives/MeetTogetherPlan';
+import type { Timeblock } from '@tuturuuu/types/primitives/Timeblock';
+import { useTimeBlocking } from '@tuturuuu/ui/hooks/time-blocking-provider';
+import { cn } from '@tuturuuu/utils/format';
+import { useTranslations } from 'next-intl';
+import { memo, useMemo } from 'react';
+import DatePlanner from './date-planner';
+
+// Memoized progress bar component
+const ProgressBar = memo(({ totalUserCount }: { totalUserCount: number }) => {
+  const progressBars = useMemo(() => {
+    return Array.from({ length: (totalUserCount || 1) + 1 }).map((_, i) => (
+      <div
+        key={i}
+        style={{
+          width: `calc(100% / ${totalUserCount || 1} )`,
+        }}
+        className={`h-full ${
+          i < (totalUserCount || 1) ? 'border-foreground/50 border-r' : ''
+        }`}
+      >
+        <div
+          className={`h-full w-full ${cn(
+            i === 0 ? 'bg-foreground/10' : 'bg-green-500/70',
+            i === (totalUserCount || 1) && 'rounded-r-[0.175rem]'
+          )}`}
+          style={{
+            opacity: i === 0 ? 1 : i / (totalUserCount || 1),
+          }}
+        />
+      </div>
+    ));
+  }, [totalUserCount]);
+
+  return (
+    <div className="flex h-4 w-32 rounded border border-foreground/50">
+      {progressBars}
+    </div>
+  );
+});
+
+ProgressBar.displayName = 'ProgressBar';
+
+function AllAvailabilities({
+  plan,
+  timeblocks,
+  showBestTimes = false,
+  onBestTimesStatusByDateAction,
+}: {
+  plan: MeetTogetherPlan;
+  timeblocks: Timeblock[];
+  showBestTimes?: boolean;
+  onBestTimesStatusByDateAction?: (status: Record<string, boolean>) => void;
+}) {
+  const t = useTranslations('meet-together-plan-details');
+  const { user, planUsers, selectedTimeBlocks, filteredUserIds } =
+    useTimeBlocking();
+
+  // Memoize expensive calculations
+  const totalUserCount = useMemo(() => {
+    return filteredUserIds.length === 0
+      ? planUsers.length
+      : filteredUserIds.length;
+  }, [filteredUserIds.length, planUsers.length]);
+
+  const localTimeblocks = useMemo(() => {
+    return [
+      ...timeblocks.filter((tb) => {
+        return tb.user_id !== user?.id;
+      }),
+      ...selectedTimeBlocks.data.map((tb) => ({
+        ...tb,
+        user_id: user?.id,
+      })),
+    ];
+  }, [timeblocks, user?.id, selectedTimeBlocks.data]);
+
+  return (
+    <div className="flex flex-col gap-2 text-center">
+      {/* Existing UI */}
+      <div className="font-semibold">{t('everyone_availability')}</div>
+      <div className="flex items-center justify-center gap-2 text-sm">
+        <div>
+          0/{totalUserCount} {t('available')}
+        </div>
+        <ProgressBar totalUserCount={totalUserCount} />
+        <div>
+          {totalUserCount}/{totalUserCount} {t('available')}
+        </div>
+      </div>
+      <DatePlanner
+        timeblocks={localTimeblocks}
+        dates={plan.dates}
+        start={plan.start_time}
+        end={plan.end_time}
+        showBestTimes={showBestTimes}
+        onBestTimesStatusByDateAction={onBestTimesStatusByDateAction}
+      />
+    </div>
+  );
+}
+
+export default memo(AllAvailabilities);