🎉 Gitea Mirror: Added

src/components/activity/ActivityList.tsx

@@ -0,0 +1,202 @@
+import { useMemo, useRef, useState, useEffect } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import type { MirrorJob } from "@/lib/db/schema";
+import Fuse from "fuse.js";
+import { Button } from "../ui/button";
+import { RefreshCw } from "lucide-react";
+import { Card } from "../ui/card";
+import { formatDate, getStatusColor } from "@/lib/utils";
+import { Skeleton } from "../ui/skeleton";
+import type { FilterParams } from "@/types/filter";
+
+interface ActivityListProps {
+  activities: MirrorJob[];
+  isLoading: boolean;
+  filter: FilterParams;
+  setFilter: (filter: FilterParams) => void;
+}
+
+export default function ActivityList({
+  activities,
+  isLoading,
+  filter,
+  setFilter,
+}: ActivityListProps) {
+  const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
+  const parentRef = useRef<HTMLDivElement>(null);
+  const rowRefs = useRef<Map<string, HTMLDivElement | null>>(new Map());
+
+  const filteredActivities = useMemo(() => {
+    let result = activities;
+
+    if (filter.status) {
+      result = result.filter((activity) => activity.status === filter.status);
+    }
+
+    if (filter.type) {
+      if (filter.type === 'repository') {
+        result = result.filter((activity) => !!activity.repositoryId);
+      } else if (filter.type === 'organization') {
+        result = result.filter((activity) => !!activity.organizationId);
+      }
+    }
+
+    if (filter.name) {
+      result = result.filter((activity) => 
+        activity.repositoryName === filter.name || 
+        activity.organizationName === filter.name
+      );
+    }
+
+    if (filter.searchTerm) {
+      const fuse = new Fuse(result, {
+        keys: ["message", "details", "organizationName", "repositoryName"],
+        threshold: 0.3,
+      });
+      result = fuse.search(filter.searchTerm).map((res) => res.item);
+    }
+
+    return result;
+  }, [activities, filter]);
+
+  const virtualizer = useVirtualizer({
+    count: filteredActivities.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: (index) => {
+      const activity = filteredActivities[index];
+      return expandedItems.has(activity.id || "") ? 217 : 120;
+    },
+    overscan: 5,
+    measureElement: (el) => el.getBoundingClientRect().height + 8,
+  });
+
+  useEffect(() => {
+    virtualizer.measure();
+  }, [expandedItems, virtualizer]);
+
+  return isLoading ? (
+    <div className="flex flex-col gap-y-4">
+      {Array.from({ length: 5 }, (_, index) => (
+        <Skeleton key={index} className="h-28 w-full rounded-md" />
+      ))}
+    </div>
+  ) : filteredActivities.length === 0 ? (
+    <div className="flex flex-col items-center justify-center py-12 text-center">
+      <RefreshCw className="h-12 w-12 text-muted-foreground mb-4" />
+      <h3 className="text-lg font-medium">No activities found</h3>
+      <p className="text-sm text-muted-foreground mt-1 mb-4 max-w-md">
+        {filter.searchTerm || filter.status || filter.type || filter.name
+          ? "Try adjusting your search or filter criteria."
+          : "No mirroring activities have been recorded yet."}
+      </p>
+      {filter.searchTerm || filter.status || filter.type || filter.name ? (
+        <Button
+          variant="outline"
+          onClick={() => {
+            setFilter({ searchTerm: "", status: "", type: "", name: "" });
+          }}
+        >
+          Clear Filters
+        </Button>
+      ) : (
+        <Button>
+          <RefreshCw className="h-4 w-4 mr-2" />
+          Refresh
+        </Button>
+      )}
+    </div>
+  ) : (
+    <Card
+      className="border rounded-md max-h-[calc(100dvh-191px)] overflow-y-auto relative"
+      ref={parentRef}
+    >
+      <div
+        style={{
+          height: virtualizer.getTotalSize(),
+          position: "relative",
+          width: "100%",
+        }}
+      >
+        {virtualizer.getVirtualItems().map((virtualRow) => {
+          const activity = filteredActivities[virtualRow.index];
+          const isExpanded = expandedItems.has(activity.id || "");
+          const key = activity.id || String(virtualRow.index);
+
+          return (
+            <div
+              key={key}
+              ref={(node) => {
+                if (node) {
+                  rowRefs.current.set(key, node);
+                  virtualizer.measureElement(node);
+                }
+              }}
+              style={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                transform: `translateY(${virtualRow.start}px)`,
+                paddingBottom: "8px",
+              }}
+              className="border-b px-4 pt-4"
+            >
+              <div className="flex items-start gap-4">
+                <div className="relative mt-2">
+                  <div
+                    className={`h-2 w-2 rounded-full ${getStatusColor(
+                      activity.status
+                    )}`}
+                  />
+                </div>
+                <div className="flex-1">
+                  <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-1">
+                    <p className="font-medium">{activity.message}</p>
+                    <p className="text-sm text-muted-foreground">
+                      {formatDate(activity.timestamp)}
+                    </p>
+                  </div>
+
+                  {activity.repositoryName && (
+                    <p className="text-sm text-muted-foreground mb-2">
+                      Repository: {activity.repositoryName}
+                    </p>
+                  )}
+
+                  {activity.organizationName && (
+                    <p className="text-sm text-muted-foreground mb-2">
+                      Organization: {activity.organizationName}
+                    </p>
+                  )}
+
+                  {activity.details && (
+                    <div className="mt-2">
+                      <Button
+                        variant="ghost"
+                        onClick={() => {
+                          const newSet = new Set(expandedItems);
+                          const id = activity.id || "";
+                          newSet.has(id) ? newSet.delete(id) : newSet.add(id);
+                          setExpandedItems(newSet);
+                        }}
+                        className="text-xs h-7 px-2"
+                      >
+                        {isExpanded ? "Hide Details" : "Show Details"}
+                      </Button>
+
+                      {isExpanded && (
+                        <pre className="mt-2 p-3 bg-muted rounded-md text-xs overflow-auto whitespace-pre-wrap min-h-[100px]">
+                          {activity.details}
+                        </pre>
+                      )}
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </Card>
+  );
+}

src/components/activity/ActivityLog.tsx

@@ -0,0 +1,313 @@
+import { useCallback, useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Search, Download, RefreshCw, ChevronDown } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
+import { apiRequest, formatDate } from "@/lib/utils";
+import { useAuth } from "@/hooks/useAuth";
+import type { MirrorJob } from "@/lib/db/schema";
+import type { ActivityApiResponse } from "@/types/activities";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select";
+import { repoStatusEnum, type RepoStatus } from "@/types/Repository";
+import ActivityList from "./ActivityList";
+import { ActivityNameCombobox } from "./ActivityNameCombobox";
+import { useSSE } from "@/hooks/useSEE";
+import { useFilterParams } from "@/hooks/useFilterParams";
+import { toast } from "sonner";
+
+export function ActivityLog() {
+  const { user } = useAuth();
+  const [activities, setActivities] = useState<MirrorJob[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const { filter, setFilter } = useFilterParams({
+    searchTerm: "",
+    status: "",
+    type: "",
+    name: "",
+  });
+
+  const handleNewMessage = useCallback((data: MirrorJob) => {
+    setActivities((prevActivities) => [data, ...prevActivities]);
+
+    console.log("Received new log:", data);
+  }, []);
+
+  // Use the SSE hook
+  const { connected } = useSSE({
+    userId: user?.id,
+    onMessage: handleNewMessage,
+  });
+
+  const fetchActivities = useCallback(async () => {
+    if (!user) return false;
+
+    try {
+      setIsLoading(true);
+
+      const response = await apiRequest<ActivityApiResponse>(
+        `/activities?userId=${user.id}`,
+        {
+          method: "GET",
+        }
+      );
+
+      if (response.success) {
+        setActivities(response.activities);
+        return true;
+      } else {
+        toast.error(response.message || "Failed to fetch activities.");
+        return false;
+      }
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to fetch activities."
+      );
+      return false;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [user]);
+
+  useEffect(() => {
+    fetchActivities();
+  }, [fetchActivities]);
+
+  const handleRefreshActivities = async () => {
+    const success = await fetchActivities();
+    if (success) {
+      toast.success("Activities refreshed successfully.");
+    }
+  };
+
+  // Get the currently filtered activities
+  const getFilteredActivities = () => {
+    return activities.filter(activity => {
+      let isIncluded = true;
+
+      if (filter.status) {
+        isIncluded = isIncluded && activity.status === filter.status;
+      }
+
+      if (filter.type) {
+        if (filter.type === 'repository') {
+          isIncluded = isIncluded && !!activity.repositoryId;
+        } else if (filter.type === 'organization') {
+          isIncluded = isIncluded && !!activity.organizationId;
+        }
+      }
+
+      if (filter.name) {
+        isIncluded = isIncluded && (
+          activity.repositoryName === filter.name ||
+          activity.organizationName === filter.name
+        );
+      }
+
+      // Note: We're not applying the search term filter here as that would require
+      // re-implementing the Fuse.js search logic
+
+      return isIncluded;
+    });
+  };
+
+  // Function to export activities as CSV
+  const exportAsCSV = () => {
+    const filteredActivities = getFilteredActivities();
+
+    if (filteredActivities.length === 0) {
+      toast.error("No activities to export.");
+      return;
+    }
+
+    // Create CSV content
+    const headers = ["Timestamp", "Message", "Status", "Repository", "Organization", "Details"];
+    const csvRows = [
+      headers.join(","),
+      ...filteredActivities.map(activity => {
+        const formattedDate = formatDate(activity.timestamp);
+        // Escape fields that might contain commas or quotes
+        const escapeCsvField = (field: string | null | undefined) => {
+          if (!field) return '';
+          if (field.includes(',') || field.includes('"') || field.includes('\n')) {
+            return `"${field.replace(/"/g, '""')}"`;
+          }
+          return field;
+        };
+
+        return [
+          formattedDate,
+          escapeCsvField(activity.message),
+          activity.status,
+          escapeCsvField(activity.repositoryName || ''),
+          escapeCsvField(activity.organizationName || ''),
+          escapeCsvField(activity.details || '')
+        ].join(',');
+      })
+    ];
+
+    const csvContent = csvRows.join('\n');
+
+    // Download the CSV file
+    downloadFile(csvContent, 'text/csv;charset=utf-8;', 'activity_log_export.csv');
+
+    toast.success("Activity log exported as CSV successfully.");
+  };
+
+  // Function to export activities as JSON
+  const exportAsJSON = () => {
+    const filteredActivities = getFilteredActivities();
+
+    if (filteredActivities.length === 0) {
+      toast.error("No activities to export.");
+      return;
+    }
+
+    // Format the activities for export (removing any sensitive or unnecessary fields if needed)
+    const activitiesForExport = filteredActivities.map(activity => ({
+      id: activity.id,
+      timestamp: activity.timestamp,
+      formattedTime: formatDate(activity.timestamp),
+      message: activity.message,
+      status: activity.status,
+      repositoryId: activity.repositoryId,
+      repositoryName: activity.repositoryName,
+      organizationId: activity.organizationId,
+      organizationName: activity.organizationName,
+      details: activity.details
+    }));
+
+    const jsonContent = JSON.stringify(activitiesForExport, null, 2);
+
+    // Download the JSON file
+    downloadFile(jsonContent, 'application/json', 'activity_log_export.json');
+
+    toast.success("Activity log exported as JSON successfully.");
+  };
+
+  // Generic function to download a file
+  const downloadFile = (content: string, mimeType: string, filename: string) => {
+    // Add date to filename
+    const date = new Date();
+    const dateStr = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+    const filenameWithDate = filename.replace('.', `_${dateStr}.`);
+
+    // Create a download link
+    const blob = new Blob([content], { type: mimeType });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+
+    link.href = url;
+    link.setAttribute('download', filenameWithDate);
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  return (
+    <div className="flex flex-col gap-y-8">
+      <div className="flex flex-row items-center gap-4 w-full">
+        <div className="relative flex-1">
+          <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+          <input
+            type="text"
+            placeholder="Search activities..."
+            className="pl-8 h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            value={filter.searchTerm}
+            onChange={(e) =>
+              setFilter((prev) => ({ ...prev, searchTerm: e.target.value }))
+            }
+          />
+        </div>
+        <Select
+          value={filter.status || "all"}
+          onValueChange={(value) =>
+            setFilter((prev) => ({
+              ...prev,
+              status: value === "all" ? "" : (value as RepoStatus),
+            }))
+          }
+        >
+          <SelectTrigger className="w-[140px] h-9 max-h-9">
+            <SelectValue placeholder="All Status" />
+          </SelectTrigger>
+          <SelectContent>
+            {["all", ...repoStatusEnum.options].map((status) => (
+              <SelectItem key={status} value={status}>
+                {status === "all"
+                  ? "All Status"
+                  : status.charAt(0).toUpperCase() + status.slice(1)}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+
+        {/* Repository/Organization Name Combobox */}
+        <ActivityNameCombobox
+          activities={activities}
+          value={filter.name || ""}
+          onChange={(name: string) => setFilter((prev) => ({ ...prev, name }))}
+        />
+        {/* Filter by type: repository/org/all */}
+        <Select
+          value={filter.type || "all"}
+          onValueChange={(value) =>
+            setFilter((prev) => ({
+              ...prev,
+              type: value === "all" ? "" : value,
+            }))
+          }
+        >
+          <SelectTrigger className="w-[140px] h-9 max-h-9">
+            <SelectValue placeholder="All Types" />
+          </SelectTrigger>
+          <SelectContent>
+            {['all', 'repository', 'organization'].map((type) => (
+              <SelectItem key={type} value={type}>
+                {type === 'all' ? 'All Types' : type.charAt(0).toUpperCase() + type.slice(1)}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" className="flex items-center gap-1">
+              <Download className="h-4 w-4 mr-1" />
+              Export
+              <ChevronDown className="h-4 w-4 ml-1" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem onClick={exportAsCSV}>
+              Export as CSV
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={exportAsJSON}>
+              Export as JSON
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <Button onClick={handleRefreshActivities}>
+          <RefreshCw className="h-4 w-4 mr-2" />
+          Refresh
+        </Button>
+      </div>
+      <div className="flex flex-col gap-y-6">
+        <ActivityList
+          activities={activities}
+          isLoading={isLoading || !connected}
+          filter={filter}
+          setFilter={setFilter}
+        />
+      </div>
+    </div>
+  );
+}

src/components/activity/ActivityNameCombobox.tsx

@@ -0,0 +1,86 @@
+import * as React from "react";
+import { ChevronsUpDown, Check } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+
+type ActivityNameComboboxProps = {
+  activities: any[];
+  value: string;
+  onChange: (value: string) => void;
+};
+
+export function ActivityNameCombobox({ activities, value, onChange }: ActivityNameComboboxProps) {
+  // Collect unique names from repositoryName and organizationName
+  const names = React.useMemo(() => {
+    const set = new Set<string>();
+    activities.forEach((a) => {
+      if (a.repositoryName) set.add(a.repositoryName);
+      if (a.organizationName) set.add(a.organizationName);
+    });
+    return Array.from(set).sort();
+  }, [activities]);
+
+  const [open, setOpen] = React.useState(false);
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-[180px] justify-between"
+        >
+          {value ? value : "All Names"}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[180px] p-0">
+        <Command>
+          <CommandInput placeholder="Search name..." />
+          <CommandList>
+            <CommandEmpty>No name found.</CommandEmpty>
+            <CommandGroup>
+              <CommandItem
+                key="all"
+                value=""
+                onSelect={() => {
+                  onChange("");
+                  setOpen(false);
+                }}
+              >
+                <Check className={cn("mr-2 h-4 w-4", value === "" ? "opacity-100" : "opacity-0")} />
+                All Names
+              </CommandItem>
+              {names.map((name) => (
+                <CommandItem
+                  key={name}
+                  value={name}
+                  onSelect={() => {
+                    onChange(name);
+                    setOpen(false);
+                  }}
+                >
+                  <Check className={cn("mr-2 h-4 w-4", value === name ? "opacity-100" : "opacity-0")} />
+                  {name}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

src/components/auth/LoginForm.tsx

@@ -0,0 +1,117 @@
+'use client';
+
+import * as React from 'react';
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import { SiGitea } from 'react-icons/si';
+import { toast, Toaster } from 'sonner';
+import { FlipHorizontal } from 'lucide-react';
+
+export function LoginForm() {
+  const [isLoading, setIsLoading] = useState(false);
+
+  async function handleLogin(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setIsLoading(true);
+    const form = e.currentTarget;
+    const formData = new FormData(form);
+    const username = formData.get('username') as string | null;
+    const password = formData.get('password') as string | null;
+
+    if (!username || !password) {
+      toast.error('Please enter both username and password');
+      setIsLoading(false);
+      return;
+    }
+
+    const loginData = { username, password };
+
+    try {
+      const response = await fetch('/api/auth/login', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(loginData),
+      });
+
+      const data = await response.json();
+
+      if (response.ok) {
+        toast.success('Login successful!');
+        // Small delay before redirecting to see the success message
+        setTimeout(() => {
+          window.location.href = '/';
+        }, 1000);
+      } else {
+        toast.error(data.error || 'Login failed. Please try again.');
+      }
+    } catch (error) {
+      toast.error('An error occurred while logging in. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  return (
+    <>
+      <Card className="w-full max-w-md">
+        <CardHeader className="text-center">
+          <div className="flex justify-center mb-4">
+            <SiGitea className="h-10 w-10" />
+          </div>
+          <CardTitle className="text-2xl">Gitea Mirror</CardTitle>
+          <CardDescription>
+            Log in to manage your GitHub to Gitea mirroring
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form id="login-form" onSubmit={handleLogin}>
+            <div className="space-y-4">
+              <div>
+                <label htmlFor="username" className="block text-sm font-medium mb-1">
+                  Username
+                </label>
+                <input
+                  id="username"
+                  name="username"
+                  type="text"
+                  required
+                  className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                  placeholder="Enter your username"
+                  disabled={isLoading}
+                />
+              </div>
+              <div>
+                <label htmlFor="password" className="block text-sm font-medium mb-1">
+                  Password
+                </label>
+                <input
+                  id="password"
+                  name="password"
+                  type="password"
+                  required
+                  className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                  placeholder="Enter your password"
+                  disabled={isLoading}
+                />
+              </div>
+            </div>
+          </form>
+        </CardContent>
+        <CardFooter>
+          <Button type="submit" form="login-form" className="w-full" disabled={isLoading}>
+            {isLoading ? 'Logging in...' : 'Log In'}
+          </Button>
+        </CardFooter>
+        <div className="px-6 pb-6 text-center">
+          <p className="text-sm text-muted-foreground">
+            Don't have an account? Contact your administrator.
+          </p>
+        </div>
+      </Card>
+      <Toaster />
+    </>
+  );
+}

src/components/auth/SignupForm.tsx

@@ -0,0 +1,146 @@
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import { GitMerge } from 'lucide-react';
+import { toast, Toaster } from 'sonner';
+
+export function SignupForm() {
+  const [isLoading, setIsLoading] = useState(false);
+
+  async function handleSignup(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setIsLoading(true);
+    const form = e.currentTarget;
+    const formData = new FormData(form);
+    const username = formData.get('username') as string | null;
+    const email = formData.get('email') as string | null;
+    const password = formData.get('password') as string | null;
+    const confirmPassword = formData.get('confirmPassword') as string | null;
+
+    if (!username || !email || !password || !confirmPassword) {
+      toast.error('Please fill in all fields');
+      setIsLoading(false);
+      return;
+    }
+
+    if (password !== confirmPassword) {
+      toast.error('Passwords do not match');
+      setIsLoading(false);
+      return;
+    }
+
+    const signupData = { username, email, password };
+
+    try {
+      const response = await fetch('/api/auth/register', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(signupData),
+      });
+
+      const data = await response.json();
+
+      if (response.ok) {
+        toast.success('Account created successfully! Redirecting to dashboard...');
+        // Small delay before redirecting to see the success message
+        setTimeout(() => {
+          window.location.href = '/';
+        }, 1500);
+      } else {
+        toast.error(data.error || 'Failed to create account. Please try again.');
+      }
+    } catch (error) {
+      toast.error('An error occurred while creating your account. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  return (
+    <>
+      <Card className="w-full max-w-md">
+        <CardHeader className="text-center">
+          <div className="flex justify-center mb-4">
+            <GitMerge className="h-10 w-10" />
+          </div>
+          <CardTitle className="text-2xl">Create Admin Account</CardTitle>
+          <CardDescription>
+            Set up your administrator account for Gitea Mirror
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form id="signup-form" onSubmit={handleSignup}>
+            <div className="space-y-4">
+              <div>
+                <label htmlFor="username" className="block text-sm font-medium mb-1">
+                  Username
+                </label>
+                <input
+                  id="username"
+                  name="username"
+                  type="text"
+                  required
+                  className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                  placeholder="Enter your username"
+                  disabled={isLoading}
+                />
+              </div>
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium mb-1">
+                  Email
+                </label>
+                <input
+                  id="email"
+                  name="email"
+                  type="email"
+                  required
+                  className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                  placeholder="Enter your email"
+                  disabled={isLoading}
+                />
+              </div>
+              <div>
+                <label htmlFor="password" className="block text-sm font-medium mb-1">
+                  Password
+                </label>
+                <input
+                  id="password"
+                  name="password"
+                  type="password"
+                  required
+                  className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                  placeholder="Create a password"
+                  disabled={isLoading}
+                />
+              </div>
+              <div>
+                <label htmlFor="confirmPassword" className="block text-sm font-medium mb-1">
+                  Confirm Password
+                </label>
+                <input
+                  id="confirmPassword"
+                  name="confirmPassword"
+                  type="password"
+                  required
+                  className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                  placeholder="Confirm your password"
+                  disabled={isLoading}
+                />
+              </div>
+            </div>
+          </form>
+        </CardContent>
+        <CardFooter>
+          <Button type="submit" form="signup-form" className="w-full" disabled={isLoading}>
+            {isLoading ? 'Creating Account...' : 'Create Admin Account'}
+          </Button>
+        </CardFooter>
+      </Card>
+      <Toaster />
+    </>
+  );
+}

src/components/config/ConfigTabs.tsx

@@ -0,0 +1,398 @@
+import { useEffect, useState } from "react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { GitHubConfigForm } from "./GitHubConfigForm";
+import { GiteaConfigForm } from "./GiteaConfigForm";
+import { ScheduleConfigForm } from "./ScheduleConfigForm";
+import type {
+  ConfigApiResponse,
+  GiteaConfig,
+  GitHubConfig,
+  SaveConfigApiRequest,
+  SaveConfigApiResponse,
+  ScheduleConfig,
+} from "@/types/config";
+import { Button } from "../ui/button";
+import { useAuth } from "@/hooks/useAuth";
+import { apiRequest } from "@/lib/utils";
+import { Copy, CopyCheck, RefreshCw } from "lucide-react";
+import { toast } from "sonner";
+
+type ConfigState = {
+  githubConfig: GitHubConfig;
+  giteaConfig: GiteaConfig;
+  scheduleConfig: ScheduleConfig;
+};
+
+export function ConfigTabs() {
+  const [config, setConfig] = useState<ConfigState>({
+    githubConfig: {
+      username: "",
+      token: "",
+      skipForks: false,
+      privateRepositories: false,
+      mirrorIssues: false,
+      mirrorStarred: false,
+      preserveOrgStructure: false,
+      skipStarredIssues: false,
+    },
+
+    giteaConfig: {
+      url: "",
+      username: "",
+      token: "",
+      organization: "github-mirrors",
+      visibility: "public",
+      starredReposOrg: "github",
+    },
+
+    scheduleConfig: {
+      enabled: false,
+      interval: 3600,
+    },
+  });
+  const { user, refreshUser } = useAuth();
+  const [isLoading, setIsLoading] = useState(true);
+  const [dockerCode, setDockerCode] = useState<string>("");
+  const [isCopied, setIsCopied] = useState<boolean>(false);
+  const [isSyncing, setIsSyncing] = useState<boolean>(false);
+  const [isConfigSaved, setIsConfigSaved] = useState<boolean>(false);
+
+  // Check if all required fields are filled to enable the Save Configuration button
+  const isConfigFormValid = (): boolean => {
+    const { githubConfig, giteaConfig } = config;
+
+    // Check GitHub required fields
+    const isGitHubValid = !!(
+      githubConfig.username?.trim() && githubConfig.token?.trim()
+    );
+
+    // Check Gitea required fields
+    const isGiteaValid = !!(
+      giteaConfig.url?.trim() &&
+      giteaConfig.username?.trim() &&
+      giteaConfig.token?.trim()
+    );
+
+    return isGitHubValid && isGiteaValid;
+  };
+
+  useEffect(() => {
+    const updateLastAndNextRun = () => {
+      const lastRun = config.scheduleConfig.lastRun
+        ? new Date(config.scheduleConfig.lastRun)
+        : new Date(); // fallback to now if lastRun is null
+      const intervalInSeconds = config.scheduleConfig.interval;
+      const nextRun = new Date(lastRun.getTime() + intervalInSeconds * 1000);
+
+      setConfig((prev) => ({
+        ...prev,
+        scheduleConfig: {
+          ...prev.scheduleConfig,
+          lastRun,
+          nextRun,
+        },
+      }));
+    };
+
+    updateLastAndNextRun();
+  }, [config.scheduleConfig.interval]);
+
+  const handleImportGitHubData = async () => {
+    try {
+      if (!user?.id) return;
+
+      setIsSyncing(true);
+
+      const result = await apiRequest<{ success: boolean; message?: string }>(
+        `/sync?userId=${user.id}`,
+        {
+          method: "POST",
+        }
+      );
+
+      if (result.success) {
+        toast.success(
+          "GitHub data imported successfully! Head to the Dashboard to start mirroring repositories."
+        );
+      } else {
+        toast.error(
+          `Failed to import GitHub data: ${result.message || "Unknown error"}`
+        );
+      }
+    } catch (error) {
+      toast.error(
+        `Error importing GitHub data: ${
+          error instanceof Error ? error.message : String(error)
+        }`
+      );
+    } finally {
+      setIsSyncing(false);
+    }
+  };
+
+  const handleSaveConfig = async () => {
+    try {
+      if (!user || !user.id) {
+        return;
+      }
+
+      const reqPyload: SaveConfigApiRequest = {
+        userId: user.id,
+        githubConfig: config.githubConfig,
+        giteaConfig: config.giteaConfig,
+        scheduleConfig: config.scheduleConfig,
+      };
+      const response = await fetch("/api/config", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(reqPyload),
+      });
+
+      const result: SaveConfigApiResponse = await response.json();
+
+      if (result.success) {
+        await refreshUser();
+        setIsConfigSaved(true);
+
+        toast.success(
+          "Configuration saved successfully! Now import your GitHub data to begin."
+        );
+      } else {
+        toast.error(
+          `Failed to save configuration: ${result.message || "Unknown error"}`
+        );
+      }
+    } catch (error) {
+      toast.error(
+        `An error occurred while saving the configuration: ${
+          error instanceof Error ? error.message : String(error)
+        }`
+      );
+    }
+  };
+
+  useEffect(() => {
+    const fetchConfig = async () => {
+      try {
+        if (!user) {
+          return;
+        }
+
+        setIsLoading(true);
+
+        const response = await apiRequest<ConfigApiResponse>(
+          `/config?userId=${user.id}`,
+          {
+            method: "GET",
+          }
+        );
+
+        // Check if we have a valid config response
+        if (response && !response.error) {
+          setConfig({
+            githubConfig: response.githubConfig || config.githubConfig,
+            giteaConfig: response.giteaConfig || config.giteaConfig,
+            scheduleConfig: response.scheduleConfig || config.scheduleConfig,
+          });
+
+          // If we got a valid config from the server, it means it was previously saved
+          if (response.id) {
+            setIsConfigSaved(true);
+          }
+        }
+        // If there's an error, we'll just use the default config defined in state
+
+        setIsLoading(false);
+      } catch (error) {
+        // Don't show error for first-time users, just use the default config
+        console.warn("Could not fetch configuration, using defaults:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchConfig();
+  }, [user]);
+
+  useEffect(() => {
+    const generateDockerCode = () => {
+      return `version: "3.3"
+services:
+  gitea-mirror:
+    image: arunavo4/gitea-mirror:latest
+    restart: unless-stopped
+    container_name: gitea-mirror
+    environment:
+      - GITHUB_USERNAME=${config.githubConfig.username}
+      - GITEA_URL=${config.giteaConfig.url}
+      - GITEA_TOKEN=${config.giteaConfig.token}
+      - GITHUB_TOKEN=${config.githubConfig.token}
+      - SKIP_FORKS=${config.githubConfig.skipForks}
+      - PRIVATE_REPOSITORIES=${config.githubConfig.privateRepositories}
+      - MIRROR_ISSUES=${config.githubConfig.mirrorIssues}
+      - MIRROR_STARRED=${config.githubConfig.mirrorStarred}
+      - PRESERVE_ORG_STRUCTURE=${config.githubConfig.preserveOrgStructure}
+      - SKIP_STARRED_ISSUES=${config.githubConfig.skipStarredIssues}
+      - GITEA_ORGANIZATION=${config.giteaConfig.organization}
+      - GITEA_ORG_VISIBILITY=${config.giteaConfig.visibility}
+      - DELAY=${config.scheduleConfig.interval}`;
+    };
+
+    const code = generateDockerCode();
+    setDockerCode(code);
+  }, [config]);
+
+  const handleCopyToClipboard = (text: string) => {
+    navigator.clipboard.writeText(text).then(
+      () => {
+        setIsCopied(true);
+        toast.success("Docker configuration copied to clipboard!");
+        setTimeout(() => setIsCopied(false), 2000);
+      },
+      (err) => {
+        toast.error("Could not copy text to clipboard.");
+      }
+    );
+  };
+
+  return isLoading ? (
+    <div>loading...</div>
+  ) : (
+    <div className="flex flex-col gap-y-6">
+      <Card>
+        <CardHeader className="flex-row justify-between">
+          <div className="flex flex-col gap-y-1.5 m-0">
+            <CardTitle>Configuration Settings</CardTitle>
+            <CardDescription>
+              Configure your GitHub and Gitea connections, and set up automatic
+              mirroring.
+            </CardDescription>
+          </div>
+
+          <div className="flex gap-x-4">
+            <Button
+              onClick={handleImportGitHubData}
+              disabled={isSyncing || !isConfigSaved}
+              title={
+                !isConfigSaved
+                  ? "Save configuration first"
+                  : isSyncing
+                  ? "Import in progress"
+                  : "Import GitHub Data"
+              }
+            >
+              {isSyncing ? (
+                <>
+                  <RefreshCw className="h-4 w-4 animate-spin mr-1" />
+                  Import GitHub Data
+                </>
+              ) : (
+                <>
+                  <RefreshCw className="h-4 w-4 mr-1" />
+                  Import GitHub Data
+                </>
+              )}
+            </Button>
+            <Button
+              onClick={handleSaveConfig}
+              disabled={!isConfigFormValid()}
+              title={
+                !isConfigFormValid()
+                  ? "Please fill all required fields"
+                  : "Save Configuration"
+              }
+            >
+              Save Configuration
+            </Button>
+          </div>
+        </CardHeader>
+
+        <CardContent>
+          <div className="flex flex-col gap-y-4">
+            <div className="flex gap-x-4">
+              <GitHubConfigForm
+                config={config.githubConfig}
+                setConfig={(update) =>
+                  setConfig((prev) => ({
+                    ...prev,
+                    githubConfig:
+                      typeof update === "function"
+                        ? update(prev.githubConfig)
+                        : update,
+                  }))
+                }
+              />
+
+              <GiteaConfigForm
+                config={config?.giteaConfig ?? ({} as GiteaConfig)}
+                setConfig={(update) =>
+                  setConfig((prev) => ({
+                    ...prev,
+                    giteaConfig:
+                      typeof update === "function"
+                        ? update(prev.giteaConfig)
+                        : update,
+                    githubConfig: prev?.githubConfig ?? ({} as GitHubConfig),
+                    scheduleConfig:
+                      prev?.scheduleConfig ?? ({} as ScheduleConfig),
+                  }))
+                }
+              />
+            </div>
+
+            <ScheduleConfigForm
+              config={config?.scheduleConfig ?? ({} as ScheduleConfig)}
+              setConfig={(update) =>
+                setConfig((prev) => ({
+                  ...prev,
+                  scheduleConfig:
+                    typeof update === "function"
+                      ? update(prev.scheduleConfig)
+                      : update,
+                  githubConfig: prev?.githubConfig ?? ({} as GitHubConfig),
+                  giteaConfig: prev?.giteaConfig ?? ({} as GiteaConfig),
+                }))
+              }
+            />
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Docker Configuration</CardTitle>
+          <CardDescription>
+            Equivalent Docker configuration for your current settings.
+          </CardDescription>
+        </CardHeader>
+
+        <CardContent className="relative">
+          <Button
+            variant="outline"
+            size="icon"
+            className="absolute top-4 right-10"
+            onClick={() => handleCopyToClipboard(dockerCode)}
+          >
+            {isCopied ? (
+              <CopyCheck className="text-green-500" />
+            ) : (
+              <Copy className="text-muted-foreground" />
+            )}
+          </Button>
+
+          <pre className="bg-muted p-4 rounded-md overflow-auto text-sm">
+            {dockerCode}
+          </pre>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

src/components/config/GitHubConfigForm.tsx

@@ -0,0 +1,340 @@
+import React, { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { githubApi } from "@/lib/api";
+import type { GitHubConfig } from "@/types/config";
+import { Input } from "../ui/input";
+import { Checkbox } from "../ui/checkbox";
+import { toast } from "sonner";
+import { AlertTriangle } from "lucide-react";
+import { Alert, AlertDescription } from "../ui/alert";
+import { Info } from "lucide-react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+
+interface GitHubConfigFormProps {
+  config: GitHubConfig;
+  setConfig: React.Dispatch<React.SetStateAction<GitHubConfig>>;
+}
+
+export function GitHubConfigForm({ config, setConfig }: GitHubConfigFormProps) {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value, type, checked } = e.target;
+
+    // Special handling for preserveOrgStructure changes
+    if (
+      name === "preserveOrgStructure" &&
+      config.preserveOrgStructure !== checked
+    ) {
+      toast.info(
+        "Changing this setting may affect how repositories are accessed in Gitea. " +
+          "Existing mirrored repositories will still be accessible during sync operations.",
+        {
+          duration: 6000,
+          position: "top-center",
+        }
+      );
+    }
+
+    setConfig({
+      ...config,
+      [name]: type === "checkbox" ? checked : value,
+    });
+  };
+
+  const testConnection = async () => {
+    if (!config.token) {
+      toast.error("GitHub token is required to test the connection");
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      const result = await githubApi.testConnection(config.token);
+      if (result.success) {
+        toast.success("Successfully connected to GitHub!");
+      } else {
+        toast.error("Failed to connect to GitHub. Please check your token.");
+      }
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "An unknown error occurred"
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Card className="w-full">
+      <CardHeader className="flex flex-row items-center justify-between gap-4">
+        <CardTitle className="text-lg font-semibold">
+          GitHub Configuration
+        </CardTitle>
+        <Button
+          type="button"
+          variant="outline"
+          onClick={testConnection}
+          disabled={isLoading || !config.token}
+        >
+          {isLoading ? "Testing..." : "Test Connection"}
+        </Button>
+      </CardHeader>
+
+      <CardContent className="flex flex-col gap-y-6">
+        <div>
+          <label
+            htmlFor="github-username"
+            className="block text-sm font-medium mb-1.5"
+          >
+            GitHub Username
+          </label>
+          <Input
+            id="github-username"
+            name="username"
+            type="text"
+            value={config.username}
+            onChange={handleChange}
+            placeholder="Your GitHub username"
+            required
+            className="bg-background"
+          />
+        </div>
+
+        <div>
+          <label
+            htmlFor="github-token"
+            className="block text-sm font-medium mb-1.5"
+          >
+            GitHub Token
+          </label>
+          <Input
+            id="github-token"
+            name="token"
+            type="password"
+            value={config.token}
+            onChange={handleChange}
+            className="bg-background"
+            placeholder="Your GitHub personal access token"
+          />
+          <p className="text-xs text-muted-foreground mt-1">
+            Required for private repositories, organizations, and starred
+            repositories.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div className="space-y-3">
+            <div className="flex items-center">
+              <Checkbox
+                id="skip-forks"
+                name="skipForks"
+                checked={config.skipForks}
+                onCheckedChange={(checked) =>
+                  handleChange({
+                    target: {
+                      name: "skipForks",
+                      type: "checkbox",
+                      checked: Boolean(checked),
+                      value: "",
+                    },
+                  } as React.ChangeEvent<HTMLInputElement>)
+                }
+              />
+              <label
+                htmlFor="skip-forks"
+                className="ml-2 block text-sm select-none"
+              >
+                Skip Forks
+              </label>
+            </div>
+
+            <div className="flex items-center">
+              <Checkbox
+                id="private-repositories"
+                name="privateRepositories"
+                checked={config.privateRepositories}
+                onCheckedChange={(checked) =>
+                  handleChange({
+                    target: {
+                      name: "privateRepositories",
+                      type: "checkbox",
+                      checked: Boolean(checked),
+                      value: "",
+                    },
+                  } as React.ChangeEvent<HTMLInputElement>)
+                }
+              />
+              <label
+                htmlFor="private-repositories"
+                className="ml-2 block text-sm select-none"
+              >
+                Mirror Private Repos
+              </label>
+            </div>
+
+            <div className="flex items-center">
+              <Checkbox
+                id="mirror-starred"
+                name="mirrorStarred"
+                checked={config.mirrorStarred}
+                onCheckedChange={(checked) =>
+                  handleChange({
+                    target: {
+                      name: "mirrorStarred",
+                      type: "checkbox",
+                      checked: Boolean(checked),
+                      value: "",
+                    },
+                  } as React.ChangeEvent<HTMLInputElement>)
+                }
+              />
+              <label
+                htmlFor="mirror-starred"
+                className="ml-2 block text-sm select-none"
+              >
+                Mirror Starred Repos
+              </label>
+            </div>
+          </div>
+
+          <div className="space-y-3">
+            <div className="flex items-center">
+              <Checkbox
+                id="mirror-issues"
+                name="mirrorIssues"
+                checked={config.mirrorIssues}
+                onCheckedChange={(checked) =>
+                  handleChange({
+                    target: {
+                      name: "mirrorIssues",
+                      type: "checkbox",
+                      checked: Boolean(checked),
+                      value: "",
+                    },
+                  } as React.ChangeEvent<HTMLInputElement>)
+                }
+              />
+              <label
+                htmlFor="mirror-issues"
+                className="ml-2 block text-sm select-none"
+              >
+                Mirror Issues
+              </label>
+            </div>
+
+            <div className="flex items-center">
+              <Checkbox
+                id="preserve-org-structure"
+                name="preserveOrgStructure"
+                checked={config.preserveOrgStructure}
+                onCheckedChange={(checked) =>
+                  handleChange({
+                    target: {
+                      name: "preserveOrgStructure",
+                      type: "checkbox",
+                      checked: Boolean(checked),
+                      value: "",
+                    },
+                  } as React.ChangeEvent<HTMLInputElement>)
+                }
+              />
+              <label
+                htmlFor="preserve-org-structure"
+                className="ml-2 text-sm select-none flex items-center"
+              >
+                Preserve Org Structure
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <span
+                      className="ml-1 cursor-pointer align-middle text-muted-foreground"
+                      role="button"
+                      tabIndex={0}
+                    >
+                      <Info size={16} />
+                    </span>
+                  </TooltipTrigger>
+                  <TooltipContent side="right" className="max-w-xs text-xs">
+                    When enabled, organization repositories will be mirrored to
+                    the same organization structure in Gitea. When disabled, all
+                    repositories will be mirrored under your Gitea username.
+                  </TooltipContent>
+                </Tooltip>
+              </label>
+            </div>
+
+            <div className="flex items-center">
+              <Checkbox
+                id="skip-starred-issues"
+                name="skipStarredIssues"
+                checked={config.skipStarredIssues}
+                onCheckedChange={(checked) =>
+                  handleChange({
+                    target: {
+                      name: "skipStarredIssues",
+                      type: "checkbox",
+                      checked: Boolean(checked),
+                      value: "",
+                    },
+                  } as React.ChangeEvent<HTMLInputElement>)
+                }
+              />
+              <label
+                htmlFor="skip-starred-issues"
+                className="ml-2 block text-sm select-none"
+              >
+                Skip Issues for Starred Repos
+              </label>
+            </div>
+          </div>
+        </div>
+      </CardContent>
+
+      <CardFooter className="flex-col items-start">
+        <Alert variant="note" className="w-full">
+          <AlertTriangle className="h-4 w-4 text-blue-600 dark:text-blue-400 mr-2" />
+          <AlertDescription className="text-sm">
+            <div className="font-semibold mb-1">Note:</div>
+            <div className="mb-1">
+              You need to create a{" "}
+              <span className="font-semibold">Classic GitHub PAT Token</span>{" "}
+              with following scopes:
+            </div>
+            <ul className="ml-4 mb-1 list-disc">
+              <li>
+                <code>repo</code>
+              </li>
+              <li>
+                <code>admin:org</code>
+              </li>
+            </ul>
+            <div className="mb-1">
+              The organization access is required for mirroring organization
+              repositories.
+            </div>
+            <div>
+              You can generate tokens at{" "}
+              <a
+                href="https://github.com/settings/tokens"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="underline font-medium hover:text-blue-900 dark:hover:text-blue-200"
+              >
+                github.com/settings/tokens
+              </a>
+              .
+            </div>
+          </AlertDescription>
+        </Alert>
+      </CardFooter>
+    </Card>
+  );
+}

src/components/config/GiteaConfigForm.tsx

@@ -0,0 +1,228 @@
+import React, { useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select";
+import { giteaApi } from "@/lib/api";
+import type { GiteaConfig, GiteaOrgVisibility } from "@/types/config";
+import { toast } from "sonner";
+
+interface GiteaConfigFormProps {
+  config: GiteaConfig;
+  setConfig: React.Dispatch<React.SetStateAction<GiteaConfig>>;
+}
+
+export function GiteaConfigForm({ config, setConfig }: GiteaConfigFormProps) {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
+  ) => {
+    const { name, value } = e.target;
+    setConfig({
+      ...config,
+      [name]: value,
+    });
+  };
+
+  const testConnection = async () => {
+    if (!config.url || !config.token) {
+      toast.error("Gitea URL and token are required to test the connection");
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      const result = await giteaApi.testConnection(config.url, config.token);
+      if (result.success) {
+        toast.success("Successfully connected to Gitea!");
+      } else {
+        toast.error(
+          "Failed to connect to Gitea. Please check your URL and token."
+        );
+      }
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "An unknown error occurred"
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Card className="w-full">
+      <CardHeader className="flex flex-row items-center justify-between gap-4">
+        <CardTitle className="text-lg font-semibold">
+          Gitea Configuration
+        </CardTitle>
+        <Button
+          type="button"
+          variant="outline"
+          onClick={testConnection}
+          disabled={isLoading || !config.url || !config.token}
+        >
+          {isLoading ? "Testing..." : "Test Connection"}
+        </Button>
+      </CardHeader>
+
+      <CardContent className="flex flex-col gap-y-6">
+        <div>
+          <label
+            htmlFor="gitea-username"
+            className="block text-sm font-medium mb-1.5"
+          >
+            Gitea Username
+          </label>
+          <input
+            id="gitea-username"
+            name="username"
+            type="text"
+            value={config.username}
+            onChange={handleChange}
+            className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            placeholder="Your Gitea username"
+            required
+          />
+        </div>
+
+        <div>
+          <label
+            htmlFor="gitea-url"
+            className="block text-sm font-medium mb-1.5"
+          >
+            Gitea URL
+          </label>
+          <input
+            id="gitea-url"
+            name="url"
+            type="url"
+            value={config.url}
+            onChange={handleChange}
+            className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            placeholder="https://your-gitea-instance.com"
+            required
+          />
+        </div>
+
+        <div>
+          <label
+            htmlFor="gitea-token"
+            className="block text-sm font-medium mb-1.5"
+          >
+            Gitea Token
+          </label>
+          <input
+            id="gitea-token"
+            name="token"
+            type="password"
+            value={config.token}
+            onChange={handleChange}
+            className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            placeholder="Your Gitea access token"
+            required
+          />
+          <p className="text-xs text-muted-foreground mt-1">
+            Create a token in your Gitea instance under Settings &gt;
+            Applications.
+          </p>
+        </div>
+
+        <div>
+          <label
+            htmlFor="organization"
+            className="block text-sm font-medium mb-1.5"
+          >
+            Default Organization (Optional)
+          </label>
+          <input
+            id="organization"
+            name="organization"
+            type="text"
+            value={config.organization}
+            onChange={handleChange}
+            className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            placeholder="Organization name"
+          />
+          <p className="text-xs text-muted-foreground mt-1">
+            If specified, repositories will be mirrored to this organization.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label
+              htmlFor="visibility"
+              className="block text-sm font-medium mb-1.5"
+            >
+              Organization Visibility
+            </label>
+            <Select
+              name="visibility"
+              value={config.visibility}
+              onValueChange={(value) =>
+                handleChange({
+                  target: { name: "visibility", value },
+                } as React.ChangeEvent<HTMLInputElement>)
+              }
+            >
+              <SelectTrigger className="w-full border border-input dark:bg-background dark:hover:bg-background">
+                <SelectValue placeholder="Select visibility" />
+              </SelectTrigger>
+              <SelectContent className="bg-background text-foreground border border-input shadow-sm">
+                {(["public", "private", "limited"] as GiteaOrgVisibility[]).map(
+                  (option) => (
+                    <SelectItem
+                      key={option}
+                      value={option}
+                      className="cursor-pointer text-sm px-3 py-2 hover:bg-accent focus:bg-accent focus:text-accent-foreground"
+                    >
+                      {option.charAt(0).toUpperCase() + option.slice(1)}
+                    </SelectItem>
+                  )
+                )}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div>
+            <label
+              htmlFor="starred-repos-org"
+              className="block text-sm font-medium mb-1.5"
+            >
+              Starred Repositories Organization
+            </label>
+            <input
+              id="starred-repos-org"
+              name="starredReposOrg"
+              type="text"
+              value={config.starredReposOrg}
+              onChange={handleChange}
+              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+              placeholder="github"
+            />
+            <p className="text-xs text-muted-foreground mt-1">
+              Organization for starred repositories (default: github)
+            </p>
+          </div>
+        </div>
+      </CardContent>
+
+      <CardFooter className="">
+        {/* Footer content can be added here if needed */}
+      </CardFooter>
+    </Card>
+  );
+}

src/components/config/ScheduleConfigForm.tsx

@@ -0,0 +1,139 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { Checkbox } from "../ui/checkbox";
+import type { ScheduleConfig } from "@/types/config";
+import { formatDate } from "@/lib/utils";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select";
+
+interface ScheduleConfigFormProps {
+  config: ScheduleConfig;
+  setConfig: React.Dispatch<React.SetStateAction<ScheduleConfig>>;
+}
+
+export function ScheduleConfigForm({
+  config,
+  setConfig,
+}: ScheduleConfigFormProps) {
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
+  ) => {
+    const { name, value, type } = e.target;
+    setConfig({
+      ...config,
+      [name]:
+        type === "checkbox" ? (e.target as HTMLInputElement).checked : value,
+    });
+  };
+
+  // Convert seconds to human-readable format
+  const formatInterval = (seconds: number): string => {
+    if (seconds < 60) return `${seconds} seconds`;
+    if (seconds < 3600) return `${Math.floor(seconds / 60)} minutes`;
+    if (seconds < 86400) return `${Math.floor(seconds / 3600)} hours`;
+    return `${Math.floor(seconds / 86400)} days`;
+  };
+
+  // Predefined intervals
+  const intervals: { value: number; label: string }[] = [
+    // { value: 120, label: "2 minutes" }, //for testing
+    { value: 900, label: "15 minutes" },
+    { value: 1800, label: "30 minutes" },
+    { value: 3600, label: "1 hour" },
+    { value: 7200, label: "2 hours" },
+    { value: 14400, label: "4 hours" },
+    { value: 28800, label: "8 hours" },
+    { value: 43200, label: "12 hours" },
+    { value: 86400, label: "1 day" },
+    { value: 172800, label: "2 days" },
+    { value: 604800, label: "1 week" },
+  ];
+
+  return (
+    <Card>
+      <CardContent className="pt-6">
+        <div className="flex flex-col gap-y-4">
+          <div className="flex items-center">
+            <Checkbox
+              id="enabled"
+              name="enabled"
+              checked={config.enabled}
+              onCheckedChange={(checked) =>
+                handleChange({
+                  target: {
+                    name: "enabled",
+                    type: "checkbox",
+                    checked: Boolean(checked),
+                    value: "",
+                  },
+                } as React.ChangeEvent<HTMLInputElement>)
+              }
+            />
+            <label
+              htmlFor="enabled"
+              className="select-none ml-2 block text-sm font-medium"
+            >
+              Enable Automatic Mirroring
+            </label>
+          </div>
+
+          <div>
+            <label
+              htmlFor="interval"
+              className="block text-sm font-medium mb-1.5"
+            >
+              Mirroring Interval
+            </label>
+
+            <Select
+              name="interval"
+              value={String(config.interval)}
+              onValueChange={(value) =>
+                handleChange({
+                  target: { name: "interval", value },
+                } as React.ChangeEvent<HTMLInputElement>)
+              }
+            >
+              <SelectTrigger className="w-full border border-input dark:bg-background dark:hover:bg-background">
+                <SelectValue placeholder="Select interval" />
+              </SelectTrigger>
+              <SelectContent className="bg-background text-foreground border border-input shadow-sm">
+                {intervals.map((interval) => (
+                  <SelectItem
+                    key={interval.value}
+                    value={interval.value.toString()}
+                    className="cursor-pointer text-sm px-3 py-2 hover:bg-accent focus:bg-accent focus:text-accent-foreground"
+                  >
+                    {interval.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+
+            <p className="text-xs text-muted-foreground mt-1">
+              How often the mirroring process should run.
+            </p>
+          </div>
+
+          {config.lastRun && (
+            <div>
+              <label className="block text-sm font-medium mb-1">Last Run</label>
+              <div className="text-sm">{formatDate(config.lastRun)}</div>
+            </div>
+          )}
+
+          {config.nextRun && config.enabled && (
+            <div>
+              <label className="block text-sm font-medium mb-1">Next Run</label>
+              <div className="text-sm">{formatDate(config.nextRun)}</div>
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

src/components/dashboard/Dashboard.tsx

@@ -0,0 +1,145 @@
+import { StatusCard } from "./StatusCard";
+import { RecentActivity } from "./RecentActivity";
+import { RepositoryList } from "./RepositoryList";
+import { GitFork, Clock, FlipHorizontal, Building2 } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import type { MirrorJob, Organization, Repository } from "@/lib/db/schema";
+import { useAuth } from "@/hooks/useAuth";
+import { apiRequest } from "@/lib/utils";
+import type { DashboardApiResponse } from "@/types/dashboard";
+import { useSSE } from "@/hooks/useSEE";
+import { toast } from "sonner";
+
+export function Dashboard() {
+  const { user } = useAuth();
+  const [repositories, setRepositories] = useState<Repository[]>([]);
+  const [organizations, setOrganizations] = useState<Organization[]>([]);
+  const [activities, setActivities] = useState<MirrorJob[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [repoCount, setRepoCount] = useState<number>(0);
+  const [orgCount, setOrgCount] = useState<number>(0);
+  const [mirroredCount, setMirroredCount] = useState<number>(0);
+  const [lastSync, setLastSync] = useState<Date | null>(null);
+
+  // Create a stable callback using useCallback
+  const handleNewMessage = useCallback((data: MirrorJob) => {
+    if (data.repositoryId) {
+      setRepositories((prevRepos) =>
+        prevRepos.map((repo) =>
+          repo.id === data.repositoryId
+            ? { ...repo, status: data.status, details: data.details }
+            : repo
+        )
+      );
+    } else if (data.organizationId) {
+      setOrganizations((prevOrgs) =>
+        prevOrgs.map((org) =>
+          org.id === data.organizationId
+            ? { ...org, status: data.status, details: data.details }
+            : org
+        )
+      );
+    }
+
+    setActivities((prevActivities) => [data, ...prevActivities]);
+
+    console.log("Received new log:", data);
+  }, []);
+
+  // Use the SSE hook
+  const { connected } = useSSE({
+    userId: user?.id,
+    onMessage: handleNewMessage,
+  });
+
+  useEffect(() => {
+    const fetchDashboardData = async () => {
+      try {
+        if (!user || !user.id) {
+          return;
+        }
+
+        setIsLoading(false);
+
+        const response = await apiRequest<DashboardApiResponse>(
+          `/dashboard?userId=${user.id}`,
+          {
+            method: "GET",
+          }
+        );
+
+        if (response.success) {
+          setRepositories(response.repositories);
+          setOrganizations(response.organizations);
+          setActivities(response.activities);
+          setRepoCount(response.repoCount);
+          setOrgCount(response.orgCount);
+          setMirroredCount(response.mirroredCount);
+          setLastSync(response.lastSync);
+        } else {
+          toast.error(response.error || "Error fetching dashboard data");
+        }
+      } catch (error) {
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Error fetching dashboard data"
+        );
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchDashboardData();
+  }, [user]);
+
+  return isLoading || !connected ? (
+    <div>loading...</div>
+  ) : (
+    <div className="flex flex-col gap-y-6">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        <StatusCard
+          title="Total Repositories"
+          value={repoCount}
+          icon={<GitFork className="h-4 w-4" />}
+          description="Repositories being mirrored"
+        />
+        <StatusCard
+          title="Mirrored"
+          value={mirroredCount}
+          icon={<FlipHorizontal className="h-4 w-4" />}
+          description="Successfully mirrored"
+        />
+        <StatusCard
+          title="Organizations"
+          value={orgCount}
+          icon={<Building2 className="h-4 w-4" />}
+          description="GitHub organizations"
+        />
+        <StatusCard
+          title="Last Sync"
+          value={
+            lastSync
+              ? new Date(lastSync).toLocaleString("en-US", {
+                  month: "2-digit",
+                  day: "2-digit",
+                  year: "2-digit",
+                  hour: "2-digit",
+                  minute: "2-digit",
+                })
+              : "N/A"
+          }
+          icon={<Clock className="h-4 w-4" />}
+          description="Last successful sync"
+        />
+      </div>
+
+      <div className="flex gap-x-6 items-start">
+        <RepositoryList repositories={repositories} />
+
+        {/* the api already sends 10 activities only but slicing in case of realtime updates */}
+        <RecentActivity activities={activities.slice(0, 10)} />
+      </div>
+    </div>
+  );
+}

src/components/dashboard/RecentActivity.tsx

@@ -0,0 +1,48 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import type { MirrorJob } from "@/lib/db/schema";
+import { formatDate, getStatusColor } from "@/lib/utils";
+import { Button } from "../ui/button";
+
+interface RecentActivityProps {
+  activities: MirrorJob[];
+}
+
+export function RecentActivity({ activities }: RecentActivityProps) {
+  return (
+    <Card className="w-full">
+      <CardHeader className="flex flex-row items-center justify-between">
+        <CardTitle>Recent Activity</CardTitle>
+        <Button variant="outline" asChild>
+          <a href="/activity">View All</a>
+        </Button>
+      </CardHeader>
+      <CardContent className="max-h-[calc(100dvh-22.5rem)] overflow-y-auto">
+        <div className="flex flex-col divide-y divide-border">
+          {activities.length === 0 ? (
+            <p className="text-sm text-muted-foreground">No recent activity</p>
+          ) : (
+            activities.map((activity, index) => (
+              <div key={index} className="flex items-start gap-x-4 py-4">
+                <div className="relative mt-1">
+                  <div
+                    className={`h-2 w-2 rounded-full ${getStatusColor(
+                      activity.status
+                    )}`}
+                  />
+                </div>
+                <div className="flex-1 space-y-1">
+                  <p className="text-sm font-medium leading-none">
+                    {activity.message}
+                  </p>
+                  <p className="text-xs text-muted-foreground">
+                    {formatDate(activity.timestamp)}
+                  </p>
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

src/components/dashboard/RepositoryList.tsx

@@ -0,0 +1,92 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { GitFork } from "lucide-react";
+import { SiGithub } from "react-icons/si";
+import type { Repository } from "@/lib/db/schema";
+import { getStatusColor } from "@/lib/utils";
+
+interface RepositoryListProps {
+  repositories: Repository[];
+}
+
+export function RepositoryList({ repositories }: RepositoryListProps) {
+  return (
+    <Card className="w-full">
+      {/* calculating the max height based non the other elements and sizing styles */}
+      <CardHeader className="flex flex-row items-center justify-between">
+        <CardTitle>Repositories</CardTitle>
+        <Button variant="outline" asChild>
+          <a href="/repositories">View All</a>
+        </Button>
+      </CardHeader>
+      <CardContent className="max-h-[calc(100dvh-22.5rem)] overflow-y-auto">
+        {repositories.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-6 text-center">
+            <GitFork className="h-10 w-10 text-muted-foreground mb-4" />
+            <h3 className="text-lg font-medium">No repositories found</h3>
+            <p className="text-sm text-muted-foreground mt-1 mb-4">
+              Configure your GitHub connection to start mirroring repositories.
+            </p>
+            <Button asChild>
+              <a href="/config">Configure GitHub</a>
+            </Button>
+          </div>
+        ) : (
+          <div className="flex flex-col divide-y divide-border">
+            {repositories.map((repo, index) => (
+              <div
+                key={index}
+                className="flex items-center justify-between gap-x-4 py-4"
+              >
+                <div className="flex-1">
+                  <div className="flex items-center gap-2">
+                    <h4 className="text-sm font-medium">{repo.name}</h4>
+                    {repo.isPrivate && (
+                      <span className="rounded-full bg-muted px-2 py-0.5 text-xs">
+                        Private
+                      </span>
+                    )}
+                  </div>
+                  <div className="flex items-center gap-2 mt-1">
+                    <span className="text-xs text-muted-foreground">
+                      {repo.owner}
+                    </span>
+                    {repo.organization && (
+                      <span className="text-xs text-muted-foreground">
+                        • {repo.organization}
+                      </span>
+                    )}
+                  </div>
+                </div>
+
+                <div className="flex items-center gap-2">
+                  <div
+                    className={`h-2 w-2 rounded-full ${getStatusColor(
+                      repo.status
+                    )}`}
+                  />
+                  <span className="text-xs capitalize w-[3rem]">
+                    {/* setting the minimum width to 3rem corresponding to the largest status (mirrored) so that all are left alligned */}
+                    {repo.status}
+                  </span>
+                  <Button variant="ghost" size="icon">
+                    <GitFork className="h-4 w-4" />
+                  </Button>
+                  <Button variant="ghost" size="icon" asChild>
+                    <a
+                      href={repo.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      >
+                       <SiGithub className="h-4 w-4" />
+                      </a>
+                  </Button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

src/components/dashboard/StatusCard.tsx

@@ -0,0 +1,33 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+interface StatusCardProps {
+  title: string;
+  value: string | number;
+  icon: React.ReactNode;
+  description?: string;
+  className?: string;
+}
+
+export function StatusCard({
+  title,
+  value,
+  icon,
+  description,
+  className,
+}: StatusCardProps) {
+  return (
+    <Card className={cn("overflow-hidden", className)}>
+      <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
+        <CardTitle className="text-sm font-medium">{title}</CardTitle>
+        <div className="h-4 w-4 text-muted-foreground">{icon}</div>
+      </CardHeader>
+      <CardContent>
+        <div className="text-2xl font-bold">{value}</div>
+        {description && (
+          <p className="text-xs text-muted-foreground mt-1">{description}</p>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

src/components/layout/Header.tsx

@@ -0,0 +1,49 @@
+import { useAuth } from "@/hooks/useAuth";
+import { Button } from "@/components/ui/button";
+import { SiGitea } from "react-icons/si";
+import { ModeToggle } from "@/components/theme/ModeToggle";
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
+import { toast } from "sonner";
+
+export function Header() {
+  const { user, logout } = useAuth();
+
+  const handleLogout = async () => {
+    toast.success("Logged out successfully");
+    // Small delay to show the toast before redirecting
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    logout();
+  };
+
+  return (
+    <header className="border-b bg-background">
+      <div className="flex h-[4.5rem] items-center justify-between px-6">
+        <a href="/" className="flex items-center gap-2 py-1">
+          <SiGitea className="h-6 w-6" />
+          <span className="text-xl font-bold">Gitea Mirror</span>
+        </a>
+
+        <div className="flex items-center gap-4">
+          <ModeToggle />
+          {user ? (
+            <>
+              <Avatar>
+                <AvatarImage src="" alt="@shadcn" />
+                <AvatarFallback>
+                  {user.username.charAt(0).toUpperCase()}
+                </AvatarFallback>
+              </Avatar>
+              <Button variant="outline" size="lg" onClick={handleLogout}>
+                Logout
+              </Button>
+            </>
+          ) : (
+            <Button variant="outline" size="lg" asChild>
+              <a href="/login">Login</a>
+            </Button>
+          )}
+        </div>
+      </div>
+    </header>
+  );
+}

src/components/layout/MainLayout.tsx

@@ -0,0 +1,61 @@
+import { Header } from "./Header";
+import { Sidebar } from "./Sidebar";
+import { Dashboard } from "@/components/dashboard/Dashboard";
+import Repository from "../repositories/Repository";
+import Providers from "./Providers";
+import { ConfigTabs } from "../config/ConfigTabs";
+import { ActivityLog } from "../activity/ActivityLog";
+import { Organization } from "../organizations/Organization";
+import { Toaster } from "@/components/ui/sonner";
+import { useAuth } from "@/hooks/useAuth";
+import { useRepoSync } from "@/hooks/useSyncRepo";
+
+interface AppProps {
+  page:
+    | "dashboard"
+    | "repositories"
+    | "organizations"
+    | "configuration"
+    | "activity-log";
+  "client:load"?: boolean;
+  "client:idle"?: boolean;
+  "client:visible"?: boolean;
+  "client:media"?: string;
+  "client:only"?: boolean | string;
+}
+
+export default function App({ page }: AppProps) {
+  return (
+    <Providers>
+      <AppWithProviders page={page} />
+    </Providers>
+  );
+}
+
+function AppWithProviders({ page }: AppProps) {
+  const { user } = useAuth();
+  useRepoSync({
+    userId: user?.id,
+    enabled: user?.syncEnabled,
+    interval: user?.syncInterval,
+    lastSync: user?.lastSync,
+    nextSync: user?.nextSync,
+  });
+
+  return (
+    <main className="flex min-h-screen flex-col">
+      <Header />
+      <div className="flex flex-1">
+        <Sidebar />
+        <section className="flex-1 p-6 overflow-y-auto h-[calc(100dvh-4.55rem)]">
+          {page === "dashboard" && <Dashboard />}
+          {page === "repositories" && <Repository />}
+          {page === "organizations" && <Organization />}
+          {page === "configuration" && <ConfigTabs />}
+          {page === "activity-log" && <ActivityLog />}
+        </section>
+      </div>
+      <Toaster />
+    </main>
+  );
+}

src/components/layout/Providers.tsx

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { AuthProvider } from "@/hooks/useAuth";
+import { TooltipProvider } from "@/components/ui/tooltip";
+
+export default function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <AuthProvider>
+      <TooltipProvider>
+        {children}
+      </TooltipProvider>
+    </AuthProvider>
+  );
+}

src/components/layout/Sidebar.tsx

@@ -0,0 +1,66 @@
+import { useEffect, useState } from "react";
+import { cn } from "@/lib/utils";
+import { ExternalLink } from "lucide-react";
+import { links } from "@/data/Sidebar";
+
+interface SidebarProps {
+  className?: string;
+}
+
+export function Sidebar({ className }: SidebarProps) {
+  const [currentPath, setCurrentPath] = useState<string>("");
+
+  useEffect(() => {
+    // Hydration happens here
+    const path = window.location.pathname;
+    setCurrentPath(path);
+    console.log("Hydrated path:", path); // Should log now
+  }, []);
+
+  return (
+    <aside className={cn("w-64 border-r bg-background", className)}>
+      <div className="flex flex-col h-full py-4">
+        <nav className="flex flex-col gap-y-1 pl-2 pr-3">
+          {links.map((link, index) => {
+            const isActive = currentPath === link.href;
+            const Icon = link.icon;
+
+            return (
+              <a
+                key={index}
+                href={link.href}
+                className={cn(
+                  "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors",
+                  isActive
+                    ? "bg-primary text-primary-foreground"
+                    : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+                )}
+              >
+                <Icon className="h-4 w-4" />
+                {link.label}
+              </a>
+            );
+          })}
+        </nav>
+
+        <div className="mt-auto px-4 py-4">
+          <div className="rounded-md bg-muted p-3">
+            <h4 className="text-sm font-medium mb-2">Need Help?</h4>
+            <p className="text-xs text-muted-foreground mb-2">
+              Check out the documentation for help with setup and configuration.
+            </p>
+            <a
+              href="/docs"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-1 text-xs text-primary hover:underline"
+            >
+              Documentation
+              <ExternalLink className="h-3 w-3" />
+            </a>
+          </div>
+        </div>
+      </div>
+    </aside>
+  );
+}

src/components/organizations/AddOrganizationDialog.tsx

@@ -0,0 +1,150 @@
+import * as React from "react";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../ui/dialog";
+import { LoaderCircle, Plus } from "lucide-react";
+import type { MembershipRole } from "@/types/organizations";
+import { RadioGroup, RadioGroupItem } from "../ui/radio";
+import { Label } from "../ui/label";
+
+interface AddOrganizationDialogProps {
+  isDialogOpen: boolean;
+  setIsDialogOpen: (isOpen: boolean) => void;
+  onAddOrganization: ({
+    org,
+    role,
+  }: {
+    org: string;
+    role: MembershipRole;
+  }) => Promise<void>;
+}
+
+export default function AddOrganizationDialog({
+  isDialogOpen,
+  setIsDialogOpen,
+  onAddOrganization,
+}: AddOrganizationDialogProps) {
+  const [org, setOrg] = useState<string>("");
+  const [role, setRole] = useState<MembershipRole>("member");
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string>("");
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!org || org.trim() === "") {
+      setError("Please enter a valid organization name.");
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+
+      await onAddOrganization({ org, role });
+
+      setError("");
+      setOrg("");
+      setRole("member");
+      setIsDialogOpen(false);
+    } catch (err: any) {
+      setError(err?.message || "Failed to add repository.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+      <DialogTrigger asChild>
+        <Button className="fixed bottom-6 right-6 rounded-full h-12 w-12 shadow-lg p-0">
+          <Plus className="h-6 w-6" />
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent className="sm:max-w-[425px] gap-0 gap-y-6">
+        <DialogHeader>
+          <DialogTitle>Add Organization</DialogTitle>
+          <DialogDescription>
+            You can add public organizations
+          </DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit} className="flex flex-col gap-y-6">
+          <div className="space-y-4">
+            <div>
+              <label
+                htmlFor="name"
+                className="block text-sm font-medium mb-1.5"
+              >
+                Organization Name
+              </label>
+              <input
+                id="name"
+                type="text"
+                value={org}
+                onChange={(e) => setOrg(e.target.value)}
+                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                placeholder="e.g., microsoft"
+                autoComplete="off"
+                autoFocus
+                required
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium mb-1">
+                Membership Role
+              </label>
+
+              <RadioGroup
+                value={role}
+                onValueChange={(val) => setRole(val as MembershipRole)}
+                className="flex flex-col gap-y-2"
+              >
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem value="member" id="r1" />
+                  <Label htmlFor="r1">Member</Label>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem value="admin" id="r2" />
+                  <Label htmlFor="r2">Admin</Label>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem value="billing_manager" id="r3" />
+                  <Label htmlFor="r3">Billing Manager</Label>
+                </div>
+              </RadioGroup>
+            </div>
+
+            {error && <p className="text-sm text-red-500 mt-1">{error}</p>}
+          </div>
+
+          <div className="flex justify-between">
+            <Button
+              type="button"
+              variant="outline"
+              disabled={isLoading}
+              onClick={() => setIsDialogOpen(false)}
+            >
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isLoading}>
+              {isLoading ? (
+                <LoaderCircle className="h-4 w-4 animate-spin" />
+              ) : (
+                "Add Repository"
+              )}
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/organizations/Organization.tsx

@@ -0,0 +1,377 @@
+import { useCallback, useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Search, RefreshCw, FlipHorizontal, Plus } from "lucide-react";
+import type { MirrorJob, Organization } from "@/lib/db/schema";
+import { OrganizationList } from "./OrganizationsList";
+import AddOrganizationDialog from "./AddOrganizationDialog";
+import { useAuth } from "@/hooks/useAuth";
+import { apiRequest } from "@/lib/utils";
+import {
+  membershipRoleEnum,
+  type AddOrganizationApiRequest,
+  type AddOrganizationApiResponse,
+  type MembershipRole,
+  type OrganizationsApiResponse,
+} from "@/types/organizations";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select";
+import type { MirrorOrgRequest, MirrorOrgResponse } from "@/types/mirror";
+import { useSSE } from "@/hooks/useSEE";
+import { useFilterParams } from "@/hooks/useFilterParams";
+import { toast } from "sonner";
+
+export function Organization() {
+  const [organizations, setOrganizations] = useState<Organization[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false);
+  const { user } = useAuth();
+  const { filter, setFilter } = useFilterParams({
+    searchTerm: "",
+    membershipRole: "",
+    status: "",
+  });
+  const [loadingOrgIds, setLoadingOrgIds] = useState<Set<string>>(new Set()); // this is used when the api actions are performed
+
+  // Create a stable callback using useCallback
+  const handleNewMessage = useCallback((data: MirrorJob) => {
+    if (data.organizationId) {
+      setOrganizations((prevOrgs) =>
+        prevOrgs.map((org) =>
+          org.id === data.organizationId
+            ? { ...org, status: data.status, details: data.details }
+            : org
+        )
+      );
+    }
+
+    console.log("Received new log:", data);
+  }, []);
+
+  // Use the SSE hook
+  const { connected } = useSSE({
+    userId: user?.id,
+    onMessage: handleNewMessage,
+  });
+
+  const fetchOrganizations = useCallback(async () => {
+    if (!user || !user.id) {
+      return false;
+    }
+
+    try {
+      setIsLoading(true);
+
+      const response = await apiRequest<OrganizationsApiResponse>(
+        `/github/organizations?userId=${user.id}`,
+        {
+          method: "GET",
+        }
+      );
+
+      if (response.success) {
+        setOrganizations(response.organizations);
+        return true;
+      } else {
+        toast.error(response.error || "Error fetching organizations");
+        return false;
+      }
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Error fetching organizations"
+      );
+      return false;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [user]);
+
+  useEffect(() => {
+    fetchOrganizations();
+  }, [fetchOrganizations]);
+
+  const handleRefresh = async () => {
+    const success = await fetchOrganizations();
+    if (success) {
+      toast.success("Organizations refreshed successfully.");
+    }
+  };
+
+  const handleMirrorOrg = async ({ orgId }: { orgId: string }) => {
+    try {
+      if (!user || !user.id) {
+        return;
+      }
+
+      setLoadingOrgIds((prev) => new Set(prev).add(orgId));
+
+      const reqPayload: MirrorOrgRequest = {
+        userId: user.id,
+        organizationIds: [orgId],
+      };
+
+      const response = await apiRequest<MirrorOrgResponse>("/job/mirror-org", {
+        method: "POST",
+        data: reqPayload,
+      });
+
+      if (response.success) {
+        toast.success(`Mirroring started for organization ID: ${orgId}`);
+
+        setOrganizations((prevOrgs) =>
+          prevOrgs.map((org) => {
+            const updated = response.organizations.find((o) => o.id === org.id);
+            return updated ? updated : org;
+          })
+        );
+      } else {
+        toast.error(response.error || "Error starting mirror job");
+      }
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Error starting mirror job"
+      );
+    } finally {
+      setLoadingOrgIds((prev) => {
+        const newSet = new Set(prev);
+        newSet.delete(orgId);
+        return newSet;
+      });
+    }
+  };
+
+  const handleAddOrganization = async ({
+    org,
+    role,
+  }: {
+    org: string;
+    role: MembershipRole;
+  }) => {
+    try {
+      if (!user || !user.id) {
+        return;
+      }
+
+      const reqPayload: AddOrganizationApiRequest = {
+        userId: user.id,
+        org,
+        role,
+      };
+
+      const response = await apiRequest<AddOrganizationApiResponse>(
+        "/sync/organization",
+        {
+          method: "POST",
+          data: reqPayload,
+        }
+      );
+
+      if (response.success) {
+        toast.success(`Organization added successfully`);
+        setOrganizations((prev) => [...prev, response.organization]);
+
+        await fetchOrganizations();
+
+        setFilter((prev) => ({
+          ...prev,
+          searchTerm: org,
+        }));
+      } else {
+        toast.error(response.error || "Error adding organization");
+      }
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Error adding organization"
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleMirrorAllOrgs = async () => {
+    try {
+      if (!user || !user.id || organizations.length === 0) {
+        return;
+      }
+
+      // Filter out organizations that are already mirrored to avoid duplicate operations
+      const eligibleOrgs = organizations.filter(
+        (org) =>
+          org.status !== "mirroring" && org.status !== "mirrored" && org.id
+      );
+
+      if (eligibleOrgs.length === 0) {
+        toast.info("No eligible organizations to mirror");
+        return;
+      }
+
+      // Get all organization IDs
+      const orgIds = eligibleOrgs.map((org) => org.id as string);
+
+      // Set loading state for all organizations being mirrored
+      setLoadingOrgIds((prev) => {
+        const newSet = new Set(prev);
+        orgIds.forEach((id) => newSet.add(id));
+        return newSet;
+      });
+
+      const reqPayload: MirrorOrgRequest = {
+        userId: user.id,
+        organizationIds: orgIds,
+      };
+
+      const response = await apiRequest<MirrorOrgResponse>("/job/mirror-org", {
+        method: "POST",
+        data: reqPayload,
+      });
+
+      if (response.success) {
+        toast.success(`Mirroring started for ${orgIds.length} organizations`);
+        setOrganizations((prevOrgs) =>
+          prevOrgs.map((org) => {
+            const updated = response.organizations.find((o) => o.id === org.id);
+            return updated ? updated : org;
+          })
+        );
+      } else {
+        toast.error(response.error || "Error starting mirror jobs");
+      }
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Error starting mirror jobs"
+      );
+    } finally {
+      // Reset loading states - we'll let the SSE updates handle status changes
+      setLoadingOrgIds(new Set());
+    }
+  };
+
+  // Get unique organization names for combobox (since Organization has no owner field)
+  const ownerOptions = Array.from(
+    new Set(
+      organizations.map((org) => org.name).filter((v): v is string => !!v)
+    )
+  ).sort();
+
+  return (
+    <div className="flex flex-col gap-y-8">
+      {/* Combine search and actions into a single flex row */}
+      <div className="flex flex-row items-center gap-4 w-full flex-wrap">
+        <div className="relative flex-grow">
+          <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+          <input
+            type="text"
+            placeholder="Search Organizations..."
+            className="pl-8 h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            value={filter.searchTerm}
+            onChange={(e) =>
+              setFilter((prev) => ({ ...prev, searchTerm: e.target.value }))
+            }
+          />
+        </div>
+
+        {/* Membership Role Filter */}
+        <Select
+          value={filter.membershipRole || "all"}
+          onValueChange={(value) =>
+            setFilter((prev) => ({
+              ...prev,
+              membershipRole: value === "all" ? "" : (value as MembershipRole),
+            }))
+          }
+        >
+          <SelectTrigger className="w-[140px] h-9 max-h-9">
+            <SelectValue placeholder="All Roles" />
+          </SelectTrigger>
+          <SelectContent>
+            {["all", ...membershipRoleEnum.options].map((role) => (
+              <SelectItem key={role} value={role}>
+                {role === "all"
+                  ? "All Roles"
+                  : role
+                      .replace(/_/g, " ")
+                      .replace(/\b\w/g, (c) => c.toUpperCase())}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+
+        {/* Status Filter */}
+        <Select
+          value={filter.status || "all"}
+          onValueChange={(value) =>
+            setFilter((prev) => ({
+              ...prev,
+              status:
+                value === "all"
+                  ? ""
+                  : (value as
+                      | ""
+                      | "imported"
+                      | "mirroring"
+                      | "mirrored"
+                      | "failed"
+                      | "syncing"
+                      | "synced"),
+            }))
+          }
+        >
+          <SelectTrigger className="w-[140px] h-9 max-h-9">
+            <SelectValue placeholder="All Statuses" />
+          </SelectTrigger>
+          <SelectContent>
+            {[
+              "all",
+              "imported",
+              "mirroring",
+              "mirrored",
+              "failed",
+              "syncing",
+              "synced",
+            ].map((status) => (
+              <SelectItem key={status} value={status}>
+                {status === "all"
+                  ? "All Statuses"
+                  : status.charAt(0).toUpperCase() + status.slice(1)}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+
+        <Button variant="default" onClick={handleRefresh}>
+          <RefreshCw className="h-4 w-4 mr-2" />
+          Refresh
+        </Button>
+
+        <Button
+          variant="default"
+          onClick={handleMirrorAllOrgs}
+          disabled={isLoading || loadingOrgIds.size > 0}
+        >
+          <FlipHorizontal className="h-4 w-4 mr-2" />
+          Mirror All
+        </Button>
+      </div>
+
+      <OrganizationList
+        organizations={organizations}
+        isLoading={isLoading || !connected}
+        filter={filter}
+        setFilter={setFilter}
+        loadingOrgIds={loadingOrgIds}
+        onMirror={handleMirrorOrg}
+        onAddOrganization={() => setIsDialogOpen(true)}
+      />
+
+      <AddOrganizationDialog
+        onAddOrganization={handleAddOrganization}
+        isDialogOpen={isDialogOpen}
+        setIsDialogOpen={setIsDialogOpen}
+      />
+    </div>
+  );
+}

src/components/organizations/OrganizationsList.tsx

@@ -0,0 +1,178 @@
+import { useMemo } from "react";
+import { Card } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Plus, RefreshCw, Building2 } from "lucide-react";
+import { SiGithub } from "react-icons/si";
+import type { Organization } from "@/lib/db/schema";
+import type { FilterParams } from "@/types/filter";
+import Fuse from "fuse.js";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Checkbox } from "@/components/ui/checkbox";
+import { getStatusColor } from "@/lib/utils";
+
+interface OrganizationListProps {
+  organizations: Organization[];
+  isLoading: boolean;
+  filter: FilterParams;
+  setFilter: (filter: FilterParams) => void;
+  onMirror: ({ orgId }: { orgId: string }) => Promise<void>;
+  loadingOrgIds: Set<string>;
+  onAddOrganization?: () => void;
+}
+
+export function OrganizationList({
+  organizations,
+  isLoading,
+  filter,
+  setFilter,
+  onMirror,
+  loadingOrgIds,
+  onAddOrganization,
+}: OrganizationListProps) {
+  const hasAnyFilter = Object.values(filter).some(
+    (val) => val?.toString().trim() !== ""
+  );
+
+  const filteredOrganizations = useMemo(() => {
+    let result = organizations;
+
+    if (filter.membershipRole) {
+      result = result.filter((org) => org.membershipRole === filter.membershipRole);
+    }
+
+    if (filter.status) {
+      result = result.filter((org) => org.status === filter.status);
+    }
+
+    if (filter.searchTerm) {
+      const fuse = new Fuse(result, {
+        keys: ["name", "type"],
+        threshold: 0.3,
+      });
+      result = fuse.search(filter.searchTerm).map((res) => res.item);
+    }
+
+    return result;
+  }, [organizations, filter]);
+
+  return isLoading ? (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      {Array.from({ length: 5 }).map((_, i) => (
+        <Skeleton key={i} className="h-[136px] w-full" />
+      ))}
+    </div>
+  ) : filteredOrganizations.length === 0 ? (
+    <div className="flex flex-col items-center justify-center py-12 text-center">
+      <Building2 className="h-12 w-12 text-muted-foreground mb-4" />
+      <h3 className="text-lg font-medium">No organizations found</h3>
+      <p className="text-sm text-muted-foreground mt-1 mb-4 max-w-md">
+        {hasAnyFilter
+          ? "Try adjusting your search or filter criteria."
+          : "Add GitHub organizations to mirror their repositories."}
+      </p>
+      {hasAnyFilter ? (
+        <Button
+          variant="outline"
+          onClick={() => {
+            setFilter({
+              searchTerm: "",
+              membershipRole: "",
+            });
+          }}
+        >
+          Clear Filters
+        </Button>
+      ) : (
+        <Button onClick={onAddOrganization}>
+          <Plus className="h-4 w-4 mr-2" />
+          Add Organization
+        </Button>
+      )}
+    </div>
+  ) : (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      {filteredOrganizations.map((org, index) => {
+        const isLoading = loadingOrgIds.has(org.id ?? "");
+
+        return (
+          <Card key={index} className="overflow-hidden p-4">
+            <div className="flex items-center justify-between mb-2">
+              <div className="flex items-center gap-2">
+                <Building2 className="h-5 w-5 text-muted-foreground" />
+                <a 
+                  href={`/repositories?organization=${encodeURIComponent(org.name || '')}`}
+                  className="font-medium hover:underline cursor-pointer"
+                >
+                  {org.name}
+                </a>
+              </div>
+              <span
+                className={`text-xs px-2 py-1 rounded-full capitalize ${
+                  org.membershipRole === "member"
+                    ? "bg-blue-100 text-blue-800"
+                    : "bg-purple-100 text-purple-800"
+                }`}
+              >
+                {org.membershipRole}
+                {/* needs to be updated  */}
+              </span>
+            </div>
+
+            <p className="text-sm text-muted-foreground mb-4">
+              {org.repositoryCount}{" "}
+              {org.repositoryCount === 1 ? "repository" : "repositories"}
+            </p>
+
+            <div className="flex items-center justify-between">
+              <div className="flex items-center">
+                <Checkbox
+                  id={`include-${org.id}`}
+                  name={`include-${org.id}`}
+                  checked={org.status === "mirrored"}
+                  disabled={
+                    loadingOrgIds.has(org.id ?? "") ||
+                    org.status === "mirrored" ||
+                    org.status === "mirroring"
+                  }
+                  onCheckedChange={async (checked) => {
+                    if (checked && !org.isIncluded && org.id) {
+                      onMirror({ orgId: org.id });
+                    }
+                  }}
+                />
+                <label
+                  htmlFor={`include-${org.id}`}
+                  className="ml-2 text-sm select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                >
+                  Include in mirroring
+                </label>
+
+                {isLoading && (
+                  <RefreshCw className="opacity-50 h-4 w-4 animate-spin ml-4" />
+                )}
+              </div>
+
+              <Button variant="ghost" size="icon" asChild>
+                <a
+                  href={`https://github.com/${org.name}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                   <SiGithub className="h-4 w-4" />
+                </a>
+              </Button>
+            </div>
+
+            {/* dont know if this looks good. maybe revised  */}
+            <div className="flex items-center gap-2 justify-end mt-4">
+              <div
+                className={`h-2 w-2 rounded-full ${getStatusColor(org.status)}`}
+              />
+              <span className="text-sm capitalize">{org.status}</span>
+            </div>
+          </Card>
+        );
+      })}
+    </div>
+  );
+}

src/components/repositories/AddRepositoryDialog.tsx

@@ -0,0 +1,141 @@
+import * as React from "react";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../ui/dialog";
+import { LoaderCircle, Plus } from "lucide-react";
+
+interface AddRepositoryDialogProps {
+  isDialogOpen: boolean;
+  setIsDialogOpen: (isOpen: boolean) => void;
+  onAddRepository: ({
+    repo,
+    owner,
+  }: {
+    repo: string;
+    owner: string;
+  }) => Promise<void>;
+}
+
+export default function AddRepositoryDialog({
+  isDialogOpen,
+  setIsDialogOpen,
+  onAddRepository,
+}: AddRepositoryDialogProps) {
+  const [repo, setRepo] = useState<string>("");
+  const [owner, setOwner] = useState<string>("");
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string>("");
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!repo || !owner || repo.trim() === "" || owner.trim() === "") {
+      setError("Please enter a valid repository name and owner.");
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+
+      await onAddRepository({ repo, owner });
+
+      setError("");
+      setRepo("");
+      setOwner("");
+      setIsDialogOpen(false);
+    } catch (err: any) {
+      setError(err?.message || "Failed to add repository.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+      <DialogTrigger asChild>
+        <Button className="fixed bottom-6 right-6 rounded-full h-12 w-12 shadow-lg p-0">
+          <Plus className="h-6 w-6" />
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent className="sm:max-w-[425px] gap-0 gap-y-6">
+        <DialogHeader>
+          <DialogTitle>Add Repository</DialogTitle>
+          <DialogDescription>
+            You can add public repositories of others
+          </DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit} className="flex flex-col gap-y-6">
+          <div className="space-y-4">
+            <div>
+              <label
+                htmlFor="name"
+                className="block text-sm font-medium mb-1.5"
+              >
+                Repository Name
+              </label>
+              <input
+                id="name"
+                type="text"
+                value={repo}
+                onChange={(e) => setRepo(e.target.value)}
+                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                placeholder="e.g., next.js"
+                autoComplete="off"
+                autoFocus
+                required
+              />
+            </div>
+
+            <div>
+              <label
+                htmlFor="name"
+                className="block text-sm font-medium mb-1.5"
+              >
+                Repository Owner
+              </label>
+              <input
+                id="name"
+                type="text"
+                value={owner}
+                onChange={(e) => setOwner(e.target.value)}
+                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                placeholder="e.g., vercel"
+                autoComplete="off"
+                required
+              />
+            </div>
+
+            {error && <p className="text-sm text-red-500 mt-1">{error}</p>}
+          </div>
+
+          <div className="flex justify-between">
+            <Button
+              type="button"
+              variant="outline"
+              disabled={isLoading}
+              onClick={() => setIsDialogOpen(false)}
+            >
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isLoading}>
+              {isLoading ? (
+                <LoaderCircle className="h-4 w-4 animate-spin" />
+              ) : (
+                "Add Repository"
+              )}
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/repositories/Repository.tsx

@@ -0,0 +1,457 @@
+import { useCallback, useEffect, useState } from "react";
+import RepositoryTable from "./RepositoryTable";
+import type { MirrorJob, Repository } from "@/lib/db/schema";
+import { useAuth } from "@/hooks/useAuth";
+import {
+  repoStatusEnum,
+  type AddRepositoriesApiRequest,
+  type AddRepositoriesApiResponse,
+  type RepositoryApiResponse,
+  type RepoStatus,
+} from "@/types/Repository";
+import { apiRequest } from "@/lib/utils";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select";
+import { Button } from "@/components/ui/button";
+import { Search, RefreshCw, FlipHorizontal } from "lucide-react";
+import type { MirrorRepoRequest, MirrorRepoResponse } from "@/types/mirror";
+import { useSSE } from "@/hooks/useSEE";
+import { useFilterParams } from "@/hooks/useFilterParams";
+import { toast } from "sonner";
+import type { SyncRepoRequest, SyncRepoResponse } from "@/types/sync";
+import { OwnerCombobox, OrganizationCombobox } from "./RepositoryComboboxes";
+import type { RetryRepoRequest, RetryRepoResponse } from "@/types/retry";
+import AddRepositoryDialog from "./AddRepositoryDialog";
+
+export default function Repository() {
+  const [repositories, setRepositories] = useState<Repository[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const { user } = useAuth();
+  const { filter, setFilter } = useFilterParams({
+    searchTerm: "",
+    status: "",
+    organization: "",
+    owner: "",
+  });
+  const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false);
+
+  // Read organization filter from URL when component mounts
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const orgParam = urlParams.get("organization");
+
+    if (orgParam) {
+      setFilter((prev) => ({ ...prev, organization: orgParam }));
+    }
+  }, [setFilter]);
+
+  const [loadingRepoIds, setLoadingRepoIds] = useState<Set<string>>(new Set()); // this is used when the api actions are performed
+
+  // Create a stable callback using useCallback
+  const handleNewMessage = useCallback((data: MirrorJob) => {
+    if (data.repositoryId) {
+      setRepositories((prevRepos) =>
+        prevRepos.map((repo) =>
+          repo.id === data.repositoryId
+            ? { ...repo, status: data.status, details: data.details }
+            : repo
+        )
+      );
+    }
+
+    console.log("Received new log:", data);
+  }, []);
+
+  // Use the SSE hook
+  const { connected } = useSSE({
+    userId: user?.id,
+    onMessage: handleNewMessage,
+  });
+
+  const fetchRepositories = useCallback(async () => {
+    if (!user) return;
+
+    setIsLoading(true);
+    try {
+      const response = await apiRequest<RepositoryApiResponse>(
+        `/github/repositories?userId=${user.id}`,
+        {
+          method: "GET",
+        }
+      );
+
+      if (response.success) {
+        setRepositories(response.repositories);
+        return true;
+      } else {
+        toast.error(response.error || "Error fetching repositories");
+        return false;
+      }
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Error fetching repositories"
+      );
+      return false;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [user]);
+
+  useEffect(() => {
+    fetchRepositories();
+  }, [fetchRepositories]);
+
+  const handleRefresh = async () => {
+    const success = await fetchRepositories();
+    if (success) {
+      toast.success("Repositories refreshed successfully.");
+    }
+  };
+
+  const handleMirrorRepo = async ({ repoId }: { repoId: string }) => {
+    try {
+      if (!user || !user.id) {
+        return;
+      }
+
+      setLoadingRepoIds((prev) => new Set(prev).add(repoId));
+
+      const reqPayload: MirrorRepoRequest = {
+        userId: user.id,
+        repositoryIds: [repoId],
+      };
+
+      const response = await apiRequest<MirrorRepoResponse>(
+        "/job/mirror-repo",
+        {
+          method: "POST",
+          data: reqPayload,
+        }
+      );
+
+      if (response.success) {
+        toast.success(`Mirroring started for repository ID: ${repoId}`);
+        setRepositories((prevRepos) =>
+          prevRepos.map((repo) => {
+            const updated = response.repositories.find((r) => r.id === repo.id);
+            return updated ? updated : repo;
+          })
+        );
+      } else {
+        toast.error(response.error || "Error starting mirror job");
+      }
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Error starting mirror job"
+      );
+    } finally {
+      setLoadingRepoIds((prev) => {
+        const newSet = new Set(prev);
+        newSet.delete(repoId);
+        return newSet;
+      });
+    }
+  };
+
+  const handleMirrorAllRepos = async () => {
+    try {
+      if (!user || !user.id || repositories.length === 0) {
+        return;
+      }
+
+      // Filter out repositories that are already mirroring to avoid duplicate operations. also filter out mirrored (mirrored can be synced and not mirrored again)
+      const eligibleRepos = repositories.filter(
+        (repo) =>
+          repo.status !== "mirroring" && repo.status !== "mirrored" && repo.id //not ignoring failed ones because we want to retry them if not mirrored. if mirrored, gitea fucnion handlers will silently ignore them
+      );
+
+      if (eligibleRepos.length === 0) {
+        toast.info("No eligible repositories to mirror");
+        return;
+      }
+
+      // Get all repository IDs
+      const repoIds = eligibleRepos.map((repo) => repo.id as string);
+
+      // Set loading state for all repositories being mirrored
+      setLoadingRepoIds((prev) => {
+        const newSet = new Set(prev);
+        repoIds.forEach((id) => newSet.add(id));
+        return newSet;
+      });
+
+      const reqPayload: MirrorRepoRequest = {
+        userId: user.id,
+        repositoryIds: repoIds,
+      };
+
+      const response = await apiRequest<MirrorRepoResponse>(
+        "/job/mirror-repo",
+        {
+          method: "POST",
+          data: reqPayload,
+        }
+      );
+
+      if (response.success) {
+        toast.success(`Mirroring started for ${repoIds.length} repositories`);
+        setRepositories((prevRepos) =>
+          prevRepos.map((repo) => {
+            const updated = response.repositories.find((r) => r.id === repo.id);
+            return updated ? updated : repo;
+          })
+        );
+      } else {
+        toast.error(response.error || "Error starting mirror jobs");
+      }
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Error starting mirror jobs"
+      );
+    } finally {
+      // Reset loading states - we'll let the SSE updates handle status changes
+      setLoadingRepoIds(new Set());
+    }
+  };
+
+  const handleSyncRepo = async ({ repoId }: { repoId: string }) => {
+    try {
+      if (!user || !user.id) {
+        return;
+      }
+
+      setLoadingRepoIds((prev) => new Set(prev).add(repoId));
+
+      const reqPayload: SyncRepoRequest = {
+        userId: user.id,
+        repositoryIds: [repoId],
+      };
+
+      const response = await apiRequest<SyncRepoResponse>("/job/sync-repo", {
+        method: "POST",
+        data: reqPayload,
+      });
+
+      if (response.success) {
+        toast.success(`Syncing started for repository ID: ${repoId}`);
+        setRepositories((prevRepos) =>
+          prevRepos.map((repo) => {
+            const updated = response.repositories.find((r) => r.id === repo.id);
+            return updated ? updated : repo;
+          })
+        );
+      } else {
+        toast.error(response.error || "Error starting sync job");
+      }
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Error starting sync job"
+      );
+    } finally {
+      setLoadingRepoIds((prev) => {
+        const newSet = new Set(prev);
+        newSet.delete(repoId);
+        return newSet;
+      });
+    }
+  };
+
+  const handleRetryRepoAction = async ({ repoId }: { repoId: string }) => {
+    try {
+      if (!user || !user.id) {
+        return;
+      }
+
+      setLoadingRepoIds((prev) => new Set(prev).add(repoId));
+
+      const reqPayload: RetryRepoRequest = {
+        userId: user.id,
+        repositoryIds: [repoId],
+      };
+
+      const response = await apiRequest<RetryRepoResponse>("/job/retry-repo", {
+        method: "POST",
+        data: reqPayload,
+      });
+
+      if (response.success) {
+        toast.success(`Retrying job for repository ID: ${repoId}`);
+        setRepositories((prevRepos) =>
+          prevRepos.map((repo) => {
+            const updated = response.repositories.find((r) => r.id === repo.id);
+            return updated ? updated : repo;
+          })
+        );
+      } else {
+        toast.error(response.error || "Error retrying job");
+      }
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Error retrying job"
+      );
+    } finally {
+      setLoadingRepoIds((prev) => {
+        const newSet = new Set(prev);
+        newSet.delete(repoId);
+        return newSet;
+      });
+    }
+  };
+
+  const handleAddRepository = async ({
+    repo,
+    owner,
+  }: {
+    repo: string;
+    owner: string;
+  }) => {
+    try {
+      if (!user || !user.id) {
+        return;
+      }
+
+      const reqPayload: AddRepositoriesApiRequest = {
+        userId: user.id,
+        repo,
+        owner,
+      };
+
+      const response = await apiRequest<AddRepositoriesApiResponse>(
+        "/sync/repository",
+        {
+          method: "POST",
+          data: reqPayload,
+        }
+      );
+
+      if (response.success) {
+        toast.success(`Repository added successfully`);
+        setRepositories((prevRepos) => [...prevRepos, response.repository]);
+
+        await fetchRepositories();
+
+        setFilter((prev) => ({
+          ...prev,
+          searchTerm: repo,
+        }));
+      } else {
+        toast.error(response.error || "Error adding repository");
+      }
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Error adding repository"
+      );
+    }
+  };
+
+  // Get unique owners and organizations for comboboxes
+  const ownerOptions = Array.from(
+    new Set(
+      repositories.map((repo) => repo.owner).filter((v): v is string => !!v)
+    )
+  ).sort();
+  const orgOptions = Array.from(
+    new Set(
+      repositories
+        .map((repo) => repo.organization)
+        .filter((v): v is string => !!v)
+    )
+  ).sort();
+
+  return (
+    <div className="flex flex-col gap-y-8">
+      {/* Combine search and actions into a single flex row */}
+      <div className="flex flex-row items-center gap-4 w-full flex-wrap">
+        <div className="relative flex-grow min-w-[180px]">
+          <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+          <input
+            type="text"
+            placeholder="Search repositories..."
+            className="pl-8 h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            value={filter.searchTerm}
+            onChange={(e) =>
+              setFilter((prev) => ({ ...prev, searchTerm: e.target.value }))
+            }
+          />
+        </div>
+
+        {/* Owner Combobox */}
+        <OwnerCombobox
+          options={ownerOptions}
+          value={filter.owner || ""}
+          onChange={(owner: string) =>
+            setFilter((prev) => ({ ...prev, owner }))
+          }
+        />
+
+        {/* Organization Combobox */}
+        <OrganizationCombobox
+          options={orgOptions}
+          value={filter.organization || ""}
+          onChange={(organization: string) =>
+            setFilter((prev) => ({ ...prev, organization }))
+          }
+        />
+
+        <Select
+          value={filter.status || "all"}
+          onValueChange={(value) =>
+            setFilter((prev) => ({
+              ...prev,
+              status: value === "all" ? "" : (value as RepoStatus),
+            }))
+          }
+        >
+          <SelectTrigger className="w-[140px] h-9 max-h-9">
+            <SelectValue placeholder="All Status" />
+          </SelectTrigger>
+          <SelectContent>
+            {["all", ...repoStatusEnum.options].map((status) => (
+              <SelectItem key={status} value={status}>
+                {status === "all"
+                  ? "All Status"
+                  : status.charAt(0).toUpperCase() + status.slice(1)}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+
+        <Button variant="default" onClick={handleRefresh}>
+          <RefreshCw className="h-4 w-4 mr-2" />
+          Refresh
+        </Button>
+
+        <Button
+          variant="default"
+          onClick={handleMirrorAllRepos}
+          disabled={isLoading || loadingRepoIds.size > 0}
+        >
+          <FlipHorizontal className="h-4 w-4 mr-2" />
+          Mirror All
+        </Button>
+      </div>
+
+      <RepositoryTable
+        repositories={repositories}
+        isLoading={isLoading || !connected}
+        filter={filter}
+        setFilter={setFilter}
+        onMirror={handleMirrorRepo}
+        onSync={handleSyncRepo}
+        onRetry={handleRetryRepoAction}
+        loadingRepoIds={loadingRepoIds}
+      />
+
+      <AddRepositoryDialog
+        onAddRepository={handleAddRepository}
+        isDialogOpen={isDialogOpen}
+        setIsDialogOpen={setIsDialogOpen}
+      />
+    </div>
+  );
+}

src/components/repositories/RepositoryComboboxes.tsx

@@ -0,0 +1,131 @@
+import * as React from "react";
+import { ChevronsUpDown, Check } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+
+type ComboboxProps = {
+  options: string[];
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  label?: string;
+};
+
+export function OwnerCombobox({ options, value, onChange, placeholder = "Owner" }: ComboboxProps) {
+  const [open, setOpen] = React.useState(false);
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-[160px] justify-between"
+        >
+          {value ? value : placeholder}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[160px] p-0">
+        <Command>
+          <CommandInput placeholder={`Search ${placeholder.toLowerCase()}...`} />
+          <CommandList>
+            <CommandEmpty>No {placeholder.toLowerCase()} found.</CommandEmpty>
+            <CommandGroup>
+              <CommandItem
+                key="all"
+                value=""
+                onSelect={() => {
+                  onChange("");
+                  setOpen(false);
+                }}
+              >
+                <Check className={cn("mr-2 h-4 w-4", value === "" ? "opacity-100" : "opacity-0")} />
+                All
+              </CommandItem>
+              {options.map((option) => (
+                <CommandItem
+                  key={option}
+                  value={option}
+                  onSelect={() => {
+                    onChange(option);
+                    setOpen(false);
+                  }}
+                >
+                  <Check className={cn("mr-2 h-4 w-4", value === option ? "opacity-100" : "opacity-0")} />
+                  {option}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export function OrganizationCombobox({ options, value, onChange, placeholder = "Organization" }: ComboboxProps) {
+  const [open, setOpen] = React.useState(false);
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-[160px] justify-between"
+        >
+          {value ? value : placeholder}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[160px] p-0">
+        <Command>
+          <CommandInput placeholder={`Search ${placeholder.toLowerCase()}...`} />
+          <CommandList>
+            <CommandEmpty>No {placeholder.toLowerCase()} found.</CommandEmpty>
+            <CommandGroup>
+              <CommandItem
+                key="all"
+                value=""
+                onSelect={() => {
+                  onChange("");
+                  setOpen(false);
+                }}
+              >
+                <Check className={cn("mr-2 h-4 w-4", value === "" ? "opacity-100" : "opacity-0")} />
+                All
+              </CommandItem>
+              {options.map((option) => (
+                <CommandItem
+                  key={option}
+                  value={option}
+                  onSelect={() => {
+                    onChange(option);
+                    setOpen(false);
+                  }}
+                >
+                  <Check className={cn("mr-2 h-4 w-4", value === option ? "opacity-100" : "opacity-0")} />
+                  {option}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

src/components/repositories/RepositoryTable.tsx

@@ -0,0 +1,363 @@
+import { useMemo, useRef } from "react";
+import Fuse from "fuse.js";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { GitFork, RefreshCw, RotateCcw } from "lucide-react";
+import { SiGithub } from "react-icons/si";
+import type { Repository } from "@/lib/db/schema";
+import { Button } from "@/components/ui/button";
+import { formatDate, getStatusColor } from "@/lib/utils";
+import type { FilterParams } from "@/types/filter";
+import { Skeleton } from "@/components/ui/skeleton";
+
+interface RepositoryTableProps {
+  repositories: Repository[];
+  isLoading: boolean;
+  filter: FilterParams;
+  setFilter: (filter: FilterParams) => void;
+  onMirror: ({ repoId }: { repoId: string }) => Promise<void>;
+  onSync: ({ repoId }: { repoId: string }) => Promise<void>;
+  onRetry: ({ repoId }: { repoId: string }) => Promise<void>;
+  loadingRepoIds: Set<string>;
+}
+
+export default function RepositoryTable({
+  repositories,
+  isLoading,
+  filter,
+  setFilter,
+  onMirror,
+  onSync,
+  onRetry,
+  loadingRepoIds,
+}: RepositoryTableProps) {
+  const tableParentRef = useRef<HTMLDivElement>(null);
+
+  const hasAnyFilter = Object.values(filter).some(
+    (val) => val?.toString().trim() !== ""
+  );
+
+  const filteredRepositories = useMemo(() => {
+    let result = repositories;
+
+    if (filter.status) {
+      result = result.filter((repo) => repo.status === filter.status);
+    }
+
+    if (filter.owner) {
+      result = result.filter((repo) => repo.owner === filter.owner);
+    }
+
+    if (filter.organization) {
+      result = result.filter(
+        (repo) => repo.organization === filter.organization
+      );
+    }
+
+    if (filter.searchTerm) {
+      const fuse = new Fuse(result, {
+        keys: ["name", "fullName", "owner", "organization"],
+        threshold: 0.3,
+      });
+      result = fuse.search(filter.searchTerm).map((res) => res.item);
+    }
+
+    return result;
+  }, [repositories, filter]);
+
+  const rowVirtualizer = useVirtualizer({
+    count: filteredRepositories.length,
+    getScrollElement: () => tableParentRef.current,
+    estimateSize: () => 65,
+    overscan: 5,
+  });
+
+  return isLoading ? (
+    <div className="border rounded-md">
+      <div className="h-[45px] flex items-center justify-between border-b bg-muted/50">
+        <div className="h-full p-3 text-sm font-medium flex-[2.5]">
+          Repository
+        </div>
+        <div className="h-full p-3 text-sm font-medium flex-[1]">Owner</div>
+        <div className="h-full p-3 text-sm font-medium flex-[1]">
+          Organization
+        </div>
+        <div className="h-full p-3 text-sm font-medium flex-[1]">
+          Last Mirrored
+        </div>
+        <div className="h-full p-3 text-sm font-medium flex-[1]">Status</div>
+        <div className="h-full p-3 text-sm font-medium flex-[1] text-right">
+          Actions
+        </div>
+      </div>
+
+      {Array.from({ length: 5 }).map((_, i) => (
+        <div
+          key={i}
+          className="h-[65px] flex items-center justify-between border-b bg-transparent"
+        >
+          <div className="h-full p-3 text-sm font-medium flex-[2.5]">
+            <Skeleton className="h-full w-full" />
+          </div>
+          <div className="h-full p-3 text-sm font-medium flex-[1]">
+            <Skeleton className="h-full w-full" />
+          </div>
+          <div className="h-full p-3 text-sm font-medium flex-[1]">
+            <Skeleton className="h-full w-full" />
+          </div>
+          <div className="h-full p-3 text-sm font-medium flex-[1]">
+            <Skeleton className="h-full w-full" />
+          </div>
+          <div className="h-full p-3 text-sm font-medium flex-[1]">
+            <Skeleton className="h-full w-full" />
+          </div>
+          <div className="h-full p-3 text-sm font-medium flex-[1] text-right">
+            <Skeleton className="h-full w-full" />
+          </div>
+        </div>
+      ))}
+    </div>
+  ) : filteredRepositories.length === 0 ? (
+    <div className="flex flex-col items-center justify-center py-12 text-center">
+      <GitFork className="h-12 w-12 text-muted-foreground mb-4" />
+      <h3 className="text-lg font-medium">No repositories found</h3>
+      <p className="text-sm text-muted-foreground mt-1 mb-4 max-w-md">
+        {hasAnyFilter
+          ? "Try adjusting your search or filter criteria."
+          : "Configure your GitHub connection to start mirroring repositories."}
+      </p>
+      {hasAnyFilter ? (
+        <Button
+          variant="outline"
+          onClick={() =>
+            setFilter({
+              searchTerm: "",
+              status: "",
+            })
+          }
+        >
+          Clear Filters
+        </Button>
+      ) : (
+        <Button asChild>
+          <a href="/config">Configure GitHub</a>
+        </Button>
+      )}
+    </div>
+  ) : (
+    <div className="flex flex-col border rounded-md">
+      {/* table header */}
+      <div className="h-[45px] flex items-center justify-between border-b bg-muted/50">
+        <div className="h-full p-3 text-sm font-medium flex-[2.5]">
+          Repository
+        </div>
+        <div className="h-full p-3 text-sm font-medium flex-[1]">Owner</div>
+        <div className="h-full p-3 text-sm font-medium flex-[1]">
+          Organization
+        </div>
+        <div className="h-full p-3 text-sm font-medium flex-[1]">
+          Last Mirrored
+        </div>
+        <div className="h-full p-3 text-sm font-medium flex-[1]">Status</div>
+        <div className="h-full p-3 text-sm font-medium flex-[1] text-right">
+          Actions
+        </div>
+      </div>
+
+      {/* table body wrapper (for a parent in virtualization) */}
+      <div
+        ref={tableParentRef}
+        className="flex flex-col max-h-[calc(100dvh-236px)] overflow-y-auto" //the height is set according to the other contents
+      >
+        <div
+          style={{
+            height: `${rowVirtualizer.getTotalSize()}px`,
+            position: "relative",
+          }}
+        >
+          {rowVirtualizer.getVirtualItems().map((virtualRow, index) => {
+            const repo = filteredRepositories[virtualRow.index];
+            const isLoading = loadingRepoIds.has(repo.id ?? "");
+
+            return (
+              <div
+                key={index}
+                ref={rowVirtualizer.measureElement}
+                style={{
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  transform: `translateY(${virtualRow.start}px)`,
+                  width: "100%",
+                }}
+                data-index={virtualRow.index}
+                className="h-[65px] flex items-center justify-between bg-transparent border-b hover:bg-muted/50" //the height is set according to the row content. right now the highest row is in the repo column which is arround 64.99px
+              >
+                {/* Repository  */}
+                <div className="h-full p-3 flex items-center gap-2 flex-[2.5]">
+                  <GitFork className="h-4 w-4 text-muted-foreground" />
+                  <div>
+                    <div className="font-medium">{repo.name}</div>
+                    <div className="text-xs text-muted-foreground">
+                      {repo.fullName}
+                    </div>
+                  </div>
+                  {repo.isPrivate && (
+                    <span className="ml-2 rounded-full bg-muted px-2 py-0.5 text-xs">
+                      Private
+                    </span>
+                  )}
+                </div>
+
+                {/* Owner  */}
+                <div className="h-full p-3 flex items-center flex-[1]">
+                  <p className="text-sm">{repo.owner}</p>
+                </div>
+
+                {/* Organization  */}
+                <div className="h-full p-3 flex items-center flex-[1]">
+                  <p className="text-sm"> {repo.organization || "-"}</p>
+                </div>
+
+                {/* Last Mirrored  */}
+                <div className="h-full p-3 flex items-center flex-[1]">
+                  <p className="text-sm">
+                    {repo.lastMirrored
+                      ? formatDate(new Date(repo.lastMirrored))
+                      : "Never"}
+                  </p>
+                </div>
+
+                {/* Status  */}
+                <div className="h-full p-3 flex items-center gap-x-2 flex-[1]">
+                  <div
+                    className={`h-2 w-2 rounded-full ${getStatusColor(
+                      repo.status
+                    )}`}
+                  />
+                  <span className="text-sm capitalize">{repo.status}</span>
+                </div>
+
+                {/* Actions  */}
+                <div className="h-full p-3 flex items-center justify-end gap-x-2 flex-[1]">
+                  {/* {repo.status === "mirrored" ||
+                  repo.status === "syncing" ||
+                  repo.status === "synced" ? (
+                    <Button
+                      variant="ghost"
+                      disabled={repo.status === "syncing" || isLoading}
+                      onClick={() => onSync({ repoId: repo.id ?? "" })}
+                    >
+                      {isLoading ? (
+                        <>
+                          <RefreshCw className="h-4 w-4 animate-spin mr-1" />
+                          Sync
+                        </>
+                      ) : (
+                        <>
+                          <RefreshCw className="h-4 w-4 mr-1" />
+                          Sync
+                        </>
+                      )}
+                    </Button>
+                  ) : (
+                    <Button
+                      variant="ghost"
+                      disabled={repo.status === "mirroring" || isLoading}
+                      onClick={() => onMirror({ repoId: repo.id ?? "" })}
+                    >
+                      {isLoading ? (
+                        <>
+                          <RefreshCw className="h-4 w-4 animate-spin mr-1" />
+                          Mirror
+                        </>
+                      ) : (
+                        <>
+                          <RefreshCw className="h-4 w-4 mr-1" />
+                          Mirror
+                        </>
+                      )}
+                    </Button>
+                  )} */}
+
+                  <RepoActionButton
+                    repo={{ id: repo.id ?? "", status: repo.status }}
+                    isLoading={isLoading}
+                    onMirror={({ repoId }) =>
+                      onMirror({ repoId: repo.id ?? "" })
+                    }
+                    onSync={({ repoId }) => onSync({ repoId: repo.id ?? "" })}
+                    onRetry={({ repoId }) => onRetry({ repoId: repo.id ?? "" })}
+                  />
+                  <Button variant="ghost" size="icon" asChild>
+                    <a
+                      href={repo.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      <SiGithub className="h-4 w-4" />
+                    </a>
+                  </Button>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function RepoActionButton({
+  repo,
+  isLoading,
+  onMirror,
+  onSync,
+  onRetry,
+}: {
+  repo: { id: string; status: string };
+  isLoading: boolean;
+  onMirror: ({ repoId }: { repoId: string }) => void;
+  onSync: ({ repoId }: { repoId: string }) => void;
+  onRetry: ({ repoId }: { repoId: string }) => void;
+}) {
+  const repoId = repo.id ?? "";
+
+  let label = "";
+  let icon = <></>;
+  let onClick = () => {};
+  let disabled = isLoading;
+
+  if (repo.status === "failed") {
+    label = "Retry";
+    icon = <RotateCcw className="h-4 w-4 mr-1" />;
+    onClick = () => onRetry({ repoId });
+  } else if (["mirrored", "synced", "syncing"].includes(repo.status)) {
+    label = "Sync";
+    icon = <RefreshCw className="h-4 w-4 mr-1" />;
+    onClick = () => onSync({ repoId });
+    disabled ||= repo.status === "syncing";
+  } else if (["imported", "mirroring"].includes(repo.status)) {
+    label = "Mirror";
+    icon = <RefreshCw className="h-4 w-4 mr-1" />;
+    onClick = () => onMirror({ repoId });
+    disabled ||= repo.status === "mirroring";
+  } else {
+    return null; // unsupported status
+  }
+
+  return (
+    <Button variant="ghost" disabled={disabled} onClick={onClick}>
+      {isLoading ? (
+        <>
+          <RefreshCw className="h-4 w-4 animate-spin mr-1" />
+          {label}
+        </>
+      ) : (
+        <>
+          {icon}
+          {label}
+        </>
+      )}
+    </Button>
+  );
+}

src/components/theme/ModeToggle.tsx

@@ -0,0 +1,52 @@
+import * as React from "react";
+import { Moon, Sun } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+export function ModeToggle() {
+  const [theme, setThemeState] = React.useState<"light" | "dark" | "system">(
+    "light"
+  );
+
+  React.useEffect(() => {
+    const isDarkMode = document.documentElement.classList.contains("dark");
+    setThemeState(isDarkMode ? "dark" : "light");
+  }, []);
+
+  React.useEffect(() => {
+    const isDark =
+      theme === "dark" ||
+      (theme === "system" &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches);
+    document.documentElement.classList[isDark ? "add" : "remove"]("dark");
+  }, [theme]);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="lg" className="has-[>svg]:px-3">
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setThemeState("light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setThemeState("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setThemeState("system")}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

src/components/theme/ThemeScript.astro

@@ -0,0 +1,21 @@
+---
+---
+
+<script is:inline>
+  const getThemePreference = () => {
+    if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
+      return localStorage.getItem('theme');
+    }
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  };
+  const isDark = getThemePreference() === 'dark';
+  document.documentElement.classList[isDark ? 'add' : 'remove']('dark');
+
+  if (typeof localStorage !== 'undefined') {
+    const observer = new MutationObserver(() => {
+      const isDark = document.documentElement.classList.contains('dark');
+      localStorage.setItem('theme', isDark ? 'dark' : 'light');
+    });
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+  }
+</script>

src/components/ui/alert.tsx

@@ -0,0 +1,70 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+        warning:
+          "bg-amber-50 border-amber-200 text-amber-800 dark:bg-amber-950/30 dark:border-amber-800 dark:text-amber-300 [&>svg]:text-amber-600 dark:[&>svg]:text-amber-500",
+        note:
+          "bg-blue-50 border-blue-200 text-blue-900 dark:bg-blue-950/30 dark:border-blue-800 dark:text-blue-200 [&>svg]:text-blue-600 dark:[&>svg]:text-blue-400",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }

src/components/ui/avatar.tsx

@@ -0,0 +1,48 @@
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+
+import { cn } from "@/lib/utils";
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };

src/components/ui/button.tsx

@@ -0,0 +1,59 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };

src/components/ui/card.tsx

@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

src/components/ui/checkbox.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };

src/components/ui/command.tsx

@@ -0,0 +1,175 @@
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+import { SearchIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string
+  description?: string
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent className="overflow-hidden p-0">
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  )
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("bg-border -mx-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}

src/components/ui/dialog.tsx

@@ -0,0 +1,135 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content>) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+          <XIcon />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,255 @@
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}

src/components/ui/input.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = "Input";
+
+export { Input };

src/components/ui/label.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };

src/components/ui/popover.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

src/components/ui/radio.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { Circle } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-3.5 w-3.5 fill-primary" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export { RadioGroup, RadioGroupItem };

src/components/ui/select.tsx

@@ -0,0 +1,183 @@
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />;
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default";
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input cursor-pointer data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  );
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  );
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};

src/components/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils";
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-primary/10", className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };

src/components/ui/sonner.tsx

@@ -0,0 +1,24 @@
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner"
+import type { ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

src/components/ui/tabs.tsx

@@ -0,0 +1,53 @@
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

src/components/ui/tooltip.tsx

@@ -0,0 +1,55 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-[var(--radix-tooltip-content-transform-origin)] rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }