@tuturuuu/ui 0.1.0 → 0.3.1

package/src/components/ui/finance/transactions/transactions-create-summary.tsx

@@ -1,6 +1,10 @@
 'use client';
 
 import { CreateDialogFeatureSummary } from '@tuturuuu/ui/finance/shared/create-dialog-feature-summary';
+import {
+  type FinancePermissionRequestUser,
+  FinancePermissionWarningContent,
+} from '@tuturuuu/ui/finance/shared/finance-permission-warning-dialog';
 import { TransactionForm } from '@tuturuuu/ui/finance/transactions/form';
 
 interface TransactionsCreateSummaryProps {
@@ -12,6 +16,7 @@ interface TransactionsCreateSummaryProps {
   createTitle: string;
   defaultOpen?: boolean;
   description: string;
+  permissionRequestUser?: FinancePermissionRequestUser | null;
   pluralTitle: string;
   singularTitle: string;
   wsId: string;
@@ -26,6 +31,7 @@ export function TransactionsCreateSummary({
   createTitle,
   defaultOpen = false,
   description,
+  permissionRequestUser,
   pluralTitle,
   singularTitle,
   wsId,
@@ -48,8 +54,14 @@ export function TransactionsCreateSummary({
             canCreateConfidentialTransactions={
               canCreateConfidentialTransactions
             }
+            permissionRequestUser={permissionRequestUser}
           />
-        ) : undefined
+        ) : (
+          <FinancePermissionWarningContent
+            missingPermissions={['create_transactions']}
+            user={permissionRequestUser}
+          />
+        )
       }
     />
   );

package/src/components/ui/finance/transactions/transactions-infinite-page.tsx

@@ -6,6 +6,7 @@ import { Button } from '@tuturuuu/ui/button';
 import SearchBar from '@tuturuuu/ui/custom/search-bar';
 import { Dialog, DialogContent, DialogTrigger } from '@tuturuuu/ui/dialog';
 import { DateRangeFilterWrapper } from '@tuturuuu/ui/finance/shared/date-range-filter-wrapper';
+import type { FinancePermissionRequestUser } from '@tuturuuu/ui/finance/shared/finance-permission-warning-dialog';
 import { CategoryFilterWrapper } from '@tuturuuu/ui/finance/transactions/category-filter-wrapper';
 import { InfiniteTransactionsList } from '@tuturuuu/ui/finance/transactions/infinite-transactions-list';
 import MoneyLoverImportDialog from '@tuturuuu/ui/finance/transactions/money-lover-import-dialog';
@@ -41,6 +42,7 @@ interface TransactionsInfinitePageProps {
   canViewConfidentialCategory?: boolean;
   /** Hide transaction creator (useful for personal workspaces) */
   isPersonalWorkspace?: boolean;
+  permissionRequestUser?: FinancePermissionRequestUser | null;
   showTransactionTypeFilter?: boolean;
 }
 
@@ -62,6 +64,7 @@ export function TransactionsInfinitePage({
   canViewConfidentialDescription,
   canViewConfidentialCategory,
   isPersonalWorkspace,
+  permissionRequestUser,
   showTransactionTypeFilter,
 }: TransactionsInfinitePageProps) {
   const t = useTranslations();
@@ -206,6 +209,7 @@ export function TransactionsInfinitePage({
           canViewConfidentialDescription={canViewConfidentialDescription}
           canViewConfidentialCategory={canViewConfidentialCategory}
           isPersonalWorkspace={isPersonalWorkspace}
+          permissionRequestUser={permissionRequestUser}
         />
       </Suspense>
     </div>

package/src/components/ui/finance/transactions/transactions-page.tsx

@@ -1,3 +1,8 @@
+import { Button } from '@tuturuuu/ui/button';
+import {
+  type FinancePermissionRequestUser,
+  FinancePermissionWarningDialog,
+} from '@tuturuuu/ui/finance/shared/finance-permission-warning-dialog';
 import ExportDialogContent from '@tuturuuu/ui/finance/transactions/export-dialog-content';
 import { TransactionsCreateSummary } from '@tuturuuu/ui/finance/transactions/transactions-create-summary';
 import { TransactionsInfinitePage } from '@tuturuuu/ui/finance/transactions/transactions-infinite-page';
@@ -19,6 +24,7 @@ interface Props {
     personal?: boolean | null;
     timezone?: string | null;
   };
+  permissionRequestUser?: FinancePermissionRequestUser | null;
   openCreateDialog?: boolean;
   showTransactionTypeFilter?: boolean;
 }
@@ -28,6 +34,7 @@ export default async function TransactionsPage({
   permissions,
   wsId,
   workspace,
+  permissionRequestUser,
   openCreateDialog = false,
   showTransactionTypeFilter = false,
 }: Props) {
@@ -71,7 +78,20 @@ export default async function TransactionsPage({
     'view_confidential_category'
   );
 
-  if (!canViewTransactions) return notFound();
+  if (!canViewTransactions) {
+    return (
+      <FinancePermissionWarningDialog
+        defaultOpen
+        missingPermissions={['view_transactions']}
+        user={permissionRequestUser}
+        trigger={
+          <Button variant="outline">
+            {t('finance-permission-warning.open_request')}
+          </Button>
+        }
+      />
+    );
+  }
 
   return (
     <>
@@ -87,6 +107,7 @@ export default async function TransactionsPage({
         canChangeFinanceWallets={canChangeFinanceWallets}
         canSetFinanceWalletsOnCreate={canSetFinanceWalletsOnCreate}
         canCreateConfidentialTransactions={canCreateConfidentialTransactions}
+        permissionRequestUser={permissionRequestUser}
       />
       <Separator className="my-4" />
       <TransactionsInfinitePage
@@ -109,6 +130,7 @@ export default async function TransactionsPage({
         canViewConfidentialDescription={canViewConfidentialDescription}
         canViewConfidentialCategory={canViewConfidentialCategory}
         isPersonalWorkspace={!!resolvedWorkspace.personal}
+        permissionRequestUser={permissionRequestUser}
         showTransactionTypeFilter={showTransactionTypeFilter}
       />
     </>

package/src/components/ui/finance/wallets/walletId/wallet-details-actions.tsx

@@ -4,6 +4,7 @@ import { Pencil, Plus } from '@tuturuuu/icons';
 import type { Wallet } from '@tuturuuu/types/primitives/Wallet';
 import { Button } from '@tuturuuu/ui/button';
 import ModifiableDialogTrigger from '@tuturuuu/ui/custom/modifiable-dialog-trigger';
+import type { FinancePermissionRequestUser } from '@tuturuuu/ui/finance/shared/finance-permission-warning-dialog';
 import { TransactionForm } from '@tuturuuu/ui/finance/transactions/form';
 import { WalletForm } from '@tuturuuu/ui/finance/wallets/form';
 import { useTranslations } from 'next-intl';
@@ -21,6 +22,7 @@ interface WalletDetailsActionsProps {
   canSetFinanceWalletsOnCreate?: boolean;
   canDeleteWallets: boolean;
   isPersonalWorkspace: boolean;
+  permissionRequestUser?: FinancePermissionRequestUser | null;
 }
 
 export function WalletDetailsActions({
@@ -34,6 +36,7 @@ export function WalletDetailsActions({
   canSetFinanceWalletsOnCreate,
   canDeleteWallets,
   isPersonalWorkspace,
+  permissionRequestUser,
 }: WalletDetailsActionsProps) {
   const t = useTranslations();
 
@@ -101,6 +104,7 @@ export function WalletDetailsActions({
                 canCreateConfidentialTransactions={
                   canCreateConfidentialTransactions
                 }
+                permissionRequestUser={permissionRequestUser}
               />
             }
           />

package/src/components/ui/finance/wallets/walletId/wallet-details-page.tsx

@@ -7,6 +7,7 @@ import {
 import { createAdminClient } from '@tuturuuu/supabase/next/server';
 import type { Wallet } from '@tuturuuu/types';
 import FeatureSummary from '@tuturuuu/ui/custom/feature-summary';
+import type { FinancePermissionRequestUser } from '@tuturuuu/ui/finance/shared/finance-permission-warning-dialog';
 import { InfiniteTransactionsList } from '@tuturuuu/ui/finance/transactions/infinite-transactions-list';
 import { Separator } from '@tuturuuu/ui/separator';
 import { Skeleton } from '@tuturuuu/ui/skeleton';
@@ -47,6 +48,7 @@ interface Props {
   workspace?: {
     personal?: boolean | null;
   };
+  permissionRequestUser?: FinancePermissionRequestUser | null;
 }
 
 export default async function WalletDetailsPage({
@@ -56,6 +58,7 @@ export default async function WalletDetailsPage({
   internalApiOptions,
   permissions,
   workspace,
+  permissionRequestUser,
 }: Props) {
   const [t, resolvedWorkspace, resolvedPermissions, resolvedDefaultCurrency] =
     await Promise.all([
@@ -164,6 +167,7 @@ export default async function WalletDetailsPage({
           canSetFinanceWalletsOnCreate={canSetFinanceWalletsOnCreate}
           canDeleteWallets={canDeleteWallets}
           isPersonalWorkspace={!!resolvedWorkspace.personal}
+          permissionRequestUser={permissionRequestUser}
         />
       </div>
       <Separator className="my-4" />
@@ -320,6 +324,7 @@ export default async function WalletDetailsPage({
           canViewConfidentialDescription={canViewConfidentialDescription}
           canViewConfidentialCategory={canViewConfidentialCategory}
           isPersonalWorkspace={!!resolvedWorkspace.personal}
+          permissionRequestUser={permissionRequestUser}
         />
       </Suspense>
     </div>

package/src/components/ui/legacy/calendar/calendar-content.tsx

@@ -11,6 +11,7 @@ import { AgendaView } from './agenda-view';
 import { CalendarHeader } from './calendar-header';
 import { CalendarViewWithTrail } from './calendar-view-with-trail';
 import { EventModal } from './event-modal';
+import { EventPreviewPopover } from './event-preview-popover';
 import { MonthCalendar } from './month-calendar';
 import { useCalendarSettings } from './settings/settings-context';
 import { WeekdayBar } from './weekday-bar';
@@ -664,7 +665,14 @@ export const CalendarContent = ({
         )}
       </div>
 
-      {disabled ? null : workspace && <EventModal />}
+      {disabled
+        ? null
+        : workspace && (
+            <>
+              <EventPreviewPopover />
+              <EventModal />
+            </>
+          )}
     </div>
   );
 };

package/src/components/ui/legacy/calendar/event-modal.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useQuery } from '@tanstack/react-query';
 import { calendarEventsSchema } from '@tuturuuu/ai/calendar/events';
 import { useObject } from '@tuturuuu/ai/object/core';
 import {
@@ -24,6 +25,11 @@ import {
   Unlock,
   X,
 } from '@tuturuuu/icons';
+import {
+  type CalendarSourceInput,
+  type CalendarSourceOption,
+  getWorkspaceCalendarDefaultSource,
+} from '@tuturuuu/internal-api';
 import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
 import type { SupportedColor } from '@tuturuuu/types/primitives/SupportedColors';
 import { Badge } from '@tuturuuu/ui/badge';
@@ -48,6 +54,13 @@ import { useCalendar } from '@tuturuuu/ui/hooks/use-calendar';
 import { useForm } from '@tuturuuu/ui/hooks/use-form';
 import { useToast } from '@tuturuuu/ui/hooks/use-toast';
 import { ScrollArea } from '@tuturuuu/ui/scroll-area';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@tuturuuu/ui/select';
 import { Separator } from '@tuturuuu/ui/separator';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@tuturuuu/ui/tabs';
 import {
@@ -61,7 +74,7 @@ import dayjs from 'dayjs';
 import ts from 'dayjs/plugin/timezone';
 import utc from 'dayjs/plugin/utc';
 import Image from 'next/image';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { z } from 'zod';
 import { Alert, AlertDescription, AlertTitle } from '../../alert';
 import { AutosizeTextarea } from '../../custom/autosize-textarea';
@@ -89,6 +102,53 @@ const AIFormSchema = z.object({
   smart_scheduling: z.boolean().default(true),
 });
 
+function sourceInputFromOption(
+  option?: CalendarSourceOption | null
+): CalendarSourceInput | undefined {
+  if (!option) return undefined;
+
+  if (option.provider === 'tuturuuu') {
+    return {
+      provider: 'tuturuuu',
+      workspaceCalendarId: option.workspaceCalendarId,
+    };
+  }
+
+  return {
+    provider: option.provider,
+    connectionId: option.connectionId,
+  };
+}
+
+function findEventSourceOption(
+  options: CalendarSourceOption[],
+  event: Partial<CalendarEvent>
+) {
+  if (event.provider === 'google' || event.provider === 'microsoft') {
+    return options.find((option) => {
+      if (option.provider === 'tuturuuu') return false;
+      if (option.provider !== event.provider) return false;
+      if (
+        event.source_calendar_id &&
+        option.workspaceCalendarId === event.source_calendar_id
+      ) {
+        return true;
+      }
+
+      return (
+        option.externalCalendarId ===
+        (event.external_calendar_id ?? event.google_calendar_id)
+      );
+    });
+  }
+
+  return options.find(
+    (option) =>
+      option.provider === 'tuturuuu' &&
+      option.workspaceCalendarId === event.source_calendar_id
+  );
+}
+
 export function EventModal() {
   const { toast } = useToast();
   const startPickerRef = useRef<HTMLButtonElement>(null);
@@ -118,6 +178,23 @@ export function EventModal() {
     location: '',
     locked: false,
   });
+  const [selectedSourceId, setSelectedSourceId] = useState<string | null>(null);
+
+  const wsId = activeEvent?.ws_id || event.ws_id;
+  const { data: sourceData } = useQuery({
+    queryKey: ['calendar-default-source', wsId],
+    enabled: !!wsId,
+    queryFn: () => getWorkspaceCalendarDefaultSource(wsId as string),
+    staleTime: 30_000,
+  });
+  const sourceOptions = useMemo(
+    () => sourceData?.options ?? [],
+    [sourceData?.options]
+  );
+  const selectedSourceOption =
+    sourceOptions.find((option) => option.id === selectedSourceId) ??
+    sourceData?.defaultSource ??
+    sourceOptions[0];
 
   // State for AI event generation
   const [generatedEvents, setGeneratedEvents] =
@@ -239,10 +316,19 @@ export function EventModal() {
         location: activeEvent.location || '',
         locked: activeEvent.locked || false,
         ws_id: activeEvent.ws_id,
+        provider: activeEvent.provider,
+        source_calendar_id: activeEvent.source_calendar_id,
+        external_calendar_id: activeEvent.external_calendar_id,
+        external_event_id: activeEvent.external_event_id,
         google_event_id: activeEvent.google_event_id,
+        google_calendar_id: activeEvent.google_calendar_id,
       };
 
       setEvent(cleanEventData);
+      const sourceOption = findEventSourceOption(sourceOptions, cleanEventData);
+      setSelectedSourceId(
+        sourceOption?.id ?? sourceData?.defaultSource?.id ?? null
+      );
 
       // Only check for all-day if this is an existing event (not a new one)
       if (activeEvent.id !== 'new') {
@@ -270,9 +356,11 @@ export function EventModal() {
         color: 'BLUE' as SupportedColor,
         location: '',
         locked: false,
+        ws_id: '',
       };
 
       setEvent(newEvent);
+      setSelectedSourceId(sourceData?.defaultSource?.id ?? null);
       setIsAllDay(false);
 
       // Reset AI form
@@ -282,7 +370,15 @@ export function EventModal() {
 
     // Clear any error messages
     setDateError(null);
-  }, [activeEvent, checkForOverlaps, aiForm, defaultNewEventTab, isEditing]);
+  }, [
+    activeEvent,
+    checkForOverlaps,
+    aiForm,
+    defaultNewEventTab,
+    isEditing,
+    sourceData?.defaultSource?.id,
+    sourceOptions,
+  ]);
 
   // Handle manual event save
   const handleManualSave = async () => {
@@ -309,6 +405,7 @@ export function EventModal() {
         color: event.color || 'BLUE',
         location: event.location || '',
         locked: event.locked || false,
+        source: sourceInputFromOption(selectedSourceOption),
       };
 
       if (activeEvent?.id === 'new') {
@@ -413,6 +510,7 @@ export function EventModal() {
             color: eventData.color || 'BLUE',
             location: eventData.location || '',
             locked: eventData.locked || false,
+            source: sourceInputFromOption(selectedSourceOption),
           };
 
           const savedEvent = await addEvent(calendarEvent);
@@ -927,6 +1025,52 @@ export function EventModal() {
                       onChange={(value) => setEvent({ ...event, title: value })}
                     />
 
+                    <div className="space-y-2">
+                      <div className="flex items-center justify-between">
+                        <label
+                          htmlFor="event-source"
+                          className="font-medium text-sm"
+                        >
+                          Calendar source
+                        </label>
+                        {selectedSourceOption && (
+                          <Badge variant="secondary" className="capitalize">
+                            {selectedSourceOption.provider}
+                          </Badge>
+                        )}
+                      </div>
+                      <Select
+                        value={selectedSourceId ?? undefined}
+                        onValueChange={(value) => setSelectedSourceId(value)}
+                        disabled={sourceOptions.length === 0 || isSaving}
+                      >
+                        <SelectTrigger id="event-source" className="w-full">
+                          <SelectValue placeholder="Choose calendar source" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {sourceOptions.map((option) => (
+                            <SelectItem key={option.id} value={option.id}>
+                              <div className="flex min-w-0 items-center gap-2">
+                                <span
+                                  className="h-2.5 w-2.5 shrink-0 rounded-full"
+                                  style={{
+                                    backgroundColor: option.color ?? undefined,
+                                  }}
+                                />
+                                <span className="truncate">{option.label}</span>
+                                {option.provider !== 'tuturuuu' &&
+                                  option.accountEmail && (
+                                    <span className="text-muted-foreground text-xs">
+                                      {option.accountEmail}
+                                    </span>
+                                  )}
+                              </div>
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+
                     {/* Date and Time Selection */}
                     <div className="space-y-2">
                       <div className="flex items-center justify-between">

package/src/components/ui/legacy/calendar/event-preview-popover.tsx

@@ -0,0 +1,200 @@
+'use client';
+
+import {
+  Calendar,
+  Clock,
+  Edit3,
+  ExternalLink,
+  Lock,
+  MapPin,
+  Trash2,
+  X,
+} from '@tuturuuu/icons';
+import { Badge } from '@tuturuuu/ui/badge';
+import { Button } from '@tuturuuu/ui/button';
+import { useCalendar } from '@tuturuuu/ui/hooks/use-calendar';
+import { cn } from '@tuturuuu/utils/format';
+import { format } from 'date-fns';
+import { useEffect, useRef } from 'react';
+
+function formatEventTime(startAt?: string, endAt?: string) {
+  if (!startAt || !endAt) return '';
+
+  const start = new Date(startAt);
+  const end = new Date(endAt);
+  const sameDay = start.toDateString() === end.toDateString();
+
+  if (sameDay) {
+    return `${format(start, 'EEE, MMM d')} - ${format(start, 'p')} - ${format(end, 'p')}`;
+  }
+
+  return `${format(start, 'MMM d, p')} - ${format(end, 'MMM d, p')}`;
+}
+
+function getSourceLabel(event: {
+  provider?: string | null;
+  google_calendar_id?: string | null;
+  external_calendar_id?: string | null;
+  _calendarName?: string;
+}) {
+  if (event._calendarName) return event._calendarName;
+  if (event.provider === 'google') {
+    return event.google_calendar_id || event.external_calendar_id || 'Google';
+  }
+  if (event.provider === 'microsoft') {
+    return event.external_calendar_id || 'Microsoft';
+  }
+  return 'Tuturuuu';
+}
+
+export function EventPreviewPopover() {
+  const {
+    previewEvent,
+    isPreviewOpen,
+    closePreview,
+    openEventEditor,
+    deleteEvent,
+    readOnly,
+  } = useCalendar();
+  const popoverRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!isPreviewOpen) return;
+
+    const handlePointerDown = (event: PointerEvent) => {
+      if (
+        popoverRef.current &&
+        event.target instanceof Node &&
+        !popoverRef.current.contains(event.target)
+      ) {
+        closePreview();
+      }
+    };
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') closePreview();
+    };
+
+    document.addEventListener('pointerdown', handlePointerDown);
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('pointerdown', handlePointerDown);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [closePreview, isPreviewOpen]);
+
+  if (!isPreviewOpen || !previewEvent) return null;
+
+  const provider = previewEvent.provider || 'tuturuuu';
+  const isSynced = provider === 'google' || provider === 'microsoft';
+  const sourceLabel = getSourceLabel(previewEvent);
+
+  return (
+    <div
+      ref={popoverRef}
+      className={cn(
+        'fixed top-20 right-4 z-50 w-[min(380px,calc(100vw-2rem))]',
+        'rounded-lg border bg-popover p-4 text-popover-foreground shadow-xl'
+      )}
+      role="dialog"
+      aria-label="Event quick preview"
+    >
+      <div className="flex items-start gap-3">
+        <div
+          className="mt-1 h-3 w-3 shrink-0 rounded-full"
+          style={{ backgroundColor: previewEvent._calendarColor || undefined }}
+        />
+        <div className="min-w-0 flex-1 space-y-3">
+          <div className="flex items-start justify-between gap-3">
+            <div className="min-w-0">
+              <h3 className="truncate font-semibold text-base">
+                {previewEvent.title || 'Untitled event'}
+              </h3>
+              <p className="text-muted-foreground text-sm">
+                {formatEventTime(previewEvent.start_at, previewEvent.end_at)}
+              </p>
+            </div>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8 shrink-0"
+              onClick={closePreview}
+            >
+              <X className="h-4 w-4" />
+            </Button>
+          </div>
+
+          <div className="space-y-2 text-sm">
+            <div className="flex items-center gap-2 text-muted-foreground">
+              <Calendar className="h-4 w-4" />
+              <span className="truncate">{sourceLabel}</span>
+              <Badge variant="secondary" className="ml-auto capitalize">
+                {provider}
+              </Badge>
+            </div>
+            <div className="flex items-center gap-2 text-muted-foreground">
+              <Clock className="h-4 w-4" />
+              <span>
+                {isSynced ? 'Synced with provider' : 'Local calendar'}
+              </span>
+            </div>
+            {previewEvent.locked && (
+              <div className="flex items-center gap-2 text-muted-foreground">
+                <Lock className="h-4 w-4" />
+                <span>Locked from auto scheduling</span>
+              </div>
+            )}
+            {previewEvent.location && (
+              <div className="flex items-center gap-2 text-muted-foreground">
+                <MapPin className="h-4 w-4" />
+                <span className="truncate">{previewEvent.location}</span>
+              </div>
+            )}
+          </div>
+
+          {previewEvent.description && (
+            <p className="line-clamp-3 text-muted-foreground text-sm">
+              {previewEvent.description}
+            </p>
+          )}
+
+          <div className="flex items-center justify-end gap-2 pt-1">
+            {isSynced && (
+              <Badge variant="outline" className="gap-1">
+                <ExternalLink className="h-3 w-3" />
+                {provider}
+              </Badge>
+            )}
+            {!readOnly && (
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="h-9 w-9 text-destructive hover:text-destructive"
+                onClick={async () => {
+                  await deleteEvent(previewEvent.id);
+                  closePreview();
+                }}
+              >
+                <Trash2 className="h-4 w-4" />
+              </Button>
+            )}
+            <Button
+              type="button"
+              size="sm"
+              className="gap-2"
+              onClick={() => {
+                openEventEditor(previewEvent.id);
+                closePreview();
+              }}
+            >
+              <Edit3 className="h-4 w-4" />
+              Edit
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}