openship 0.1.1 → 0.1.7

package/apps/dashboard/src/app/(dashboard)/(deployment)/deploy/[slug]/components/SkeletonLoader.tsx

@@ -1,87 +0,0 @@
-import { PageContainer } from "@/components/ui/PageContainer";
-
-const Shimmer = ({ className }: { className?: string }) => (
-  <div className={`bg-muted animate-pulse rounded-lg ${className ?? ""}`} />
-);
-
-const SkeletonLoader = () => (
-  <div className="min-h-screen bg-background">
-    <PageContainer>
-      <div className="grid lg:grid-cols-[1fr_340px] gap-6">
-        {/* Main column */}
-        <div className="space-y-5">
-          {/* Project Settings */}
-          <div className="bg-card rounded-2xl border border-border/50 p-5 space-y-4">
-            <div className="flex items-center gap-3">
-              <Shimmer className="w-8 h-8 rounded-lg" />
-              <Shimmer className="h-5 w-32" />
-            </div>
-            <Shimmer className="h-10 rounded-xl" />
-            <div className="grid grid-cols-3 gap-3">
-              {[1, 2, 3, 4, 5, 6].map((i) => (
-                <Shimmer key={i} className="h-14 rounded-lg" />
-              ))}
-            </div>
-            <Shimmer className="h-10 rounded-xl" />
-          </div>
-
-          {/* Build Settings */}
-          <div className="bg-card rounded-2xl border border-border/50 p-5 space-y-4">
-            <div className="flex items-center gap-3">
-              <Shimmer className="w-8 h-8 rounded-lg" />
-              <Shimmer className="h-5 w-28" />
-            </div>
-            {[1, 2, 3].map((i) => (
-              <div key={i}>
-                <Shimmer className="h-4 w-24 mb-2" />
-                <Shimmer className="h-10 rounded-xl" />
-              </div>
-            ))}
-          </div>
-
-          {/* Environment Variables */}
-          <div className="bg-card rounded-2xl border border-border/50 p-5 space-y-4">
-            <div className="flex items-center gap-3">
-              <Shimmer className="w-8 h-8 rounded-lg" />
-              <Shimmer className="h-5 w-40" />
-            </div>
-            {[1, 2].map((i) => (
-              <div key={i} className="flex gap-3">
-                <Shimmer className="flex-1 h-10 rounded-xl" />
-                <Shimmer className="flex-1 h-10 rounded-xl" />
-                <Shimmer className="w-10 h-10 rounded-xl" />
-              </div>
-            ))}
-          </div>
-
-          {/* Project Name */}
-          <div className="bg-card rounded-2xl border border-border/50 p-5 space-y-4">
-            <Shimmer className="h-4 w-24" />
-            <Shimmer className="h-10 rounded-xl" />
-            <Shimmer className="h-4 w-56" />
-          </div>
-        </div>
-
-        {/* Sidebar */}
-        <div className="space-y-4">
-          <div className="bg-card rounded-2xl border border-border/50 p-4">
-            <div className="flex items-center gap-3">
-              <Shimmer className="w-8 h-8 rounded-lg" />
-              <div className="flex-1 space-y-1.5">
-                <Shimmer className="h-4 w-32" />
-                <Shimmer className="h-3 w-20" />
-              </div>
-            </div>
-          </div>
-          <div className="bg-card rounded-2xl border border-border/50 p-4 space-y-3">
-            <Shimmer className="h-4 w-16" />
-            <Shimmer className="h-9 rounded-xl" />
-          </div>
-          <Shimmer className="h-10 rounded-xl" />
-        </div>
-      </div>
-    </PageContainer>
-  </div>
-);
-
-export default SkeletonLoader;

package/apps/dashboard/src/app/(dashboard)/(deployment)/deploy/[slug]/page.tsx

@@ -1,169 +0,0 @@
-"use client";
-
-import React, { useState, useEffect, useRef } from "react";
-import { useRouter, useParams, useSearchParams } from "next/navigation";
-import ProjectSettings from "@/components/import-project/ProjectSettings";
-import BuildSettings from "@/components/import-project/BuildSettings";
-import DockerSettings from "@/components/import-project/DockerSettings";
-import ComposeServices from "@/components/import-project/ComposeServices";
-import EnvironmentVariables from "@/components/import-project/EnvironmentVariables";
-import Sidebar from "./components/Sidebar";
-import { decodeSlug } from "@/utils/repoSlug";
-import { useDeployment } from "@/context/DeploymentContext";
-import SkeletonLoader from "./components/SkeletonLoader";
-import ErrorState from "@/components/shared/ErrorState";
-import { PageContainer } from "@/components/ui/PageContainer";
-
-interface DeployError {
-    type: 'invalid_url' | 'repo_not_found' | 'initialization_failed';
-    message: string;
-    details?: string;
-}
-
-const ProjectName: React.FC = () => {
-    const { config, updateConfig } = useDeployment();
-    return (
-        <div className="bg-card rounded-2xl border border-border/50">
-            <div className="px-5 py-5">
-                <label className="text-[15px] font-semibold text-foreground mb-2 block">
-                    Project Name
-                </label>
-                <input
-                    type="text"
-                    value={config.projectName}
-                    onChange={(e) => updateConfig({ projectName: e.target.value })}
-                    placeholder="my-awesome-project"
-                    className="w-full px-4 py-2.5 bg-muted/30 border border-border/50 rounded-xl text-sm text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all"
-                />
-                <p className="text-sm text-muted-foreground mt-1.5">
-                    A unique identifier for your deployment
-                </p>
-            </div>
-        </div>
-    );
-};
-
-const DeployRepository: React.FC = () => {
-    const params = useParams();
-    const router = useRouter();
-    const slug = params.slug as string;
-    const { config, initializeFromRepo, initializeFromLocal } = useDeployment();
-    const searchParams = useSearchParams();
-    const force = searchParams.get("force") || undefined;
-    
-    const [loading, setLoading] = useState<boolean>(true);
-    const [error, setError] = useState<DeployError | null>(null);
-    const hasInitialized = useRef<boolean>(false);
-
-    useEffect(() => {
-        const initialize = async () => {
-            if (hasInitialized.current || !slug) return;
-            hasInitialized.current = true;
-
-            const decoded = decodeSlug(slug);
-
-            if (!decoded) {
-                setError({
-                    type: 'invalid_url',
-                    message: 'Invalid Repository URL',
-                    details: 'The repository URL format is not recognized. Please check the URL and try again.'
-                });
-                setLoading(false);
-                return;
-            }
-
-            let result;
-            if (decoded.kind === "local") {
-                result = await initializeFromLocal(decoded.path);
-            } else {
-                result = await initializeFromRepo(decoded.owner, decoded.repo, force);
-            }
-
-            if (!result.success) {
-                // If build is already in progress, redirect to build page (handled elsewhere)
-                if ('buildInProgress' in result && result.buildInProgress) {
-                    setLoading(false);
-                    return;
-                }
-
-                // Handle specific error cases
-                if (result.error) {
-                    setError({
-                        type: result.errorType === 'api_error' ? 'repo_not_found' : 'initialization_failed',
-                        message: decoded.kind === 'local' ? 'Failed to Load Project' : 'Failed to Load Repository',
-                        details: result.error
-                    });
-                } else {
-                    setError({
-                        type: 'initialization_failed',
-                        message: decoded.kind === 'local' ? 'Failed to Load Project' : 'Failed to Load Repository',
-                        details: decoded.kind === 'local'
-                            ? 'We couldn\'t scan this folder. Make sure the path is correct and accessible.'
-                            : 'We couldn\'t load this repository. It might be private, doesn\'t exist, or you don\'t have access to it.'
-                    });
-                }
-            }
-            
-            setLoading(false);
-        };
-
-        initialize();
-    }, [slug, initializeFromRepo, force, router]);
-
-    if (loading) {
-        return <SkeletonLoader />;
-    }
-
-    if (error) {
-        return (
-            <ErrorState 
-                type="repo-not-found" 
-                error={{
-                    message: error.message,
-                    details: error.details
-                }}
-            />
-        );
-    }
-
-    if (!config.repo || !config.owner) {
-        return null;
-    }
-
-    return (
-        <div className="min-h-screen bg-background">
-            <PageContainer>
-                <div className="grid lg:grid-cols-[1fr_340px] gap-6">
-                    <div className="space-y-5">
-                        {/* App flow: framework picker + build settings */}
-                        {config.projectType === "app" && (
-                            <>
-                                <ProjectSettings />
-                                <BuildSettings />
-                            </>
-                        )}
-
-                        {/* Docker flow: single Dockerfile, just port */}
-                        {config.projectType === "docker" && (
-                            <DockerSettings />
-                        )}
-
-                        {/* Services flow: compose parsed services (env is per-service) */}
-                        {config.projectType === "services" && (
-                            <ComposeServices />
-                        )}
-
-                        {/* Global env vars — app & docker only (compose has per-service env) */}
-                        {config.projectType !== "services" && (
-                            <EnvironmentVariables />
-                        )}
-                        <ProjectName />
-                    </div>
-                    <Sidebar />
-                </div>
-            </PageContainer>
-        </div>
-    );
-};
-
-export default DeployRepository;

package/apps/dashboard/src/app/(dashboard)/(deployment)/layout.tsx

@@ -1,7 +0,0 @@
-"use client";
-
-import { DeploymentProvider } from "@/context/DeploymentContext";
-
-export default function DeploymentLayout({ children }: { children: React.ReactNode }) {
-  return <DeploymentProvider>{children}</DeploymentProvider>;
-}

package/apps/dashboard/src/app/(dashboard)/billing/page.tsx

@@ -1,3 +0,0 @@
-export default function BillingPage() {
-  return <div />;
-}

package/apps/dashboard/src/app/(dashboard)/deployments/components/CommitDetailsModal.tsx

@@ -1,240 +0,0 @@
-"use client";
-
-import React, { useState } from "react";
-import { X, Github, GitCommit, ExternalLink, User, Calendar } from "lucide-react";
-import { formatDate } from "@/utils/date";
-import FileIcon from "@/components/ui/FileIcon";
-import type { Deployment } from "../types";
-
-interface CommitDetailsModalProps {
-  deployment: Deployment;
-  isOpen: boolean;
-  onClose: () => void;
-}
-
-export const CommitDetailsModal: React.FC<CommitDetailsModalProps> = ({
-  deployment,
-  isOpen,
-  onClose,
-}) => {
-  const [expandedSection, setExpandedSection] = useState<'added' | 'modified' | 'removed' | null>('modified');
-
-  if (!isOpen) return null;
-
-  const hasCommitData = deployment.commit && deployment.commit.hash && deployment.commit.hash !== 'N/A';
-  const commitUrl = deployment.owner && deployment.repo && deployment.commit?.hash
-    ? `https://github.com/${deployment.owner}/${deployment.repo}/commit/${deployment.commit.hash}`
-    : null;
-
-  const changedFiles = deployment.commit?.changedFiles || [];
-
-  return (
-    <>
-      {/* Backdrop */}
-      <div
-        className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 transition-opacity"
-        onClick={onClose}
-      />
-
-      {/* Modal */}
-      <div className="fixed inset-0 z-50 flex items-center justify-center p-4 pointer-events-none">
-        <div
-          className="bg-card rounded-2xl shadow-2xl max-w-3xl w-full max-h-[85vh] overflow-hidden pointer-events-auto animate-in zoom-in-95 duration-200 border border-border/50"
-          onClick={(e) => e.stopPropagation()}
-        >
-          {/* Header */}
-          <div className="sticky top-0 bg-card border-b border-border/50 px-6 py-5 flex items-center justify-between z-10">
-            <div className="flex items-center gap-3">
-              <div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center">
-                <GitCommit className="w-5 h-5 text-primary" />
-              </div>
-              <div>
-                <h2 className="text-xl font-bold text-foreground">Commit Details</h2>
-                {hasCommitData && (
-                  <p className="text-sm text-muted-foreground font-mono">{deployment.commit.hash}</p>
-                )}
-              </div>
-            </div>
-            <button
-              onClick={onClose}
-              className="w-10 h-10 rounded-full hover:bg-muted flex items-center justify-center transition-colors"
-            >
-              <X className="w-5 h-5 text-muted-foreground" />
-            </button>
-          </div>
-
-          {/* Content */}
-          <div className="overflow-y-auto max-h-[calc(85vh-88px)] p-6">
-            {hasCommitData ? (
-              <div className="space-y-6">
-                {/* Commit Message */}
-                <div className="bg-primary/5 rounded-2xl p-5 border border-primary/10">
-                  <div className="flex items-start gap-3">
-                    <div className="w-10 h-10 rounded-xl bg-card flex items-center justify-center flex-shrink-0 shadow-sm border border-border/50">
-                      <GitCommit className="w-5 h-5 text-primary" />
-                    </div>
-                    <div className="flex-1 min-w-0">
-                      <p className="text-base font-semibold text-foreground mb-2">
-                        {deployment.commit.message}
-                      </p>
-                      <div className="flex items-center gap-3 text-sm text-muted-foreground">
-                        <div className="flex items-center gap-1.5">
-                          <User className="w-4 h-4" />
-                          <span>{deployment.commit.author}</span>
-                        </div>
-                        <span className="text-muted-foreground/30">•</span>
-                        <div className="flex items-center gap-1.5">
-                          <Calendar className="w-4 h-4" />
-                          <span>{formatDate(deployment.commit.timestamp, undefined, undefined, true)}</span>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-                {/* Deployment Info */}
-                <div className="grid grid-cols-2 gap-4">
-                  <div className="bg-muted/40 border border-border/50 rounded-xl p-4">
-                    <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-2">
-                      Project
-                    </p>
-                    <p className="text-base font-medium text-foreground">
-                      {deployment.projectName || 'Unknown Project'}
-                    </p>
-                  </div>
-                  <div className="bg-muted/40 border border-border/50 rounded-xl p-4">
-                    <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-2">
-                      Domain
-                    </p>
-                    <p className="text-base font-medium text-foreground truncate">
-                      {deployment.domain || 'No domain'}
-                    </p>
-                  </div>
-                  <div className="bg-muted/40 border border-border/50 rounded-xl p-4">
-                    <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-2">
-                      Status
-                    </p>
-                    <span className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium ${
-                      deployment.status === 'success' ? 'bg-emerald-500/10 text-emerald-600' :
-                      deployment.status === 'failed' ? 'bg-red-500/10 text-red-600' :
-                      deployment.status === 'building' ? 'bg-blue-500/10 text-blue-600' :
-                      'bg-muted text-muted-foreground'
-                    }`}>
-                      {deployment.status.charAt(0).toUpperCase() + deployment.status.slice(1)}
-                    </span>
-                  </div>
-                  <div className="bg-muted/40 border border-border/50 rounded-xl p-4">
-                    <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-2">
-                      Environment
-                    </p>
-                    <p className="text-base font-medium text-foreground">
-                      {deployment.environment || 'production'}
-                    </p>
-                  </div>
-                </div>
-
-                {/* Changed Files */}
-                {changedFiles && changedFiles.length > 0 && (
-                  <div>
-                    <h3 className="text-base font-bold text-foreground mb-3 flex items-center gap-2">
-                      Changed Files ({changedFiles.length})
-                    </h3>
-                    <div className="bg-muted/40 rounded-xl border border-border/50 p-4">
-                      <div className="space-y-2">
-                        {changedFiles.map((file: any, idx: number) => {
-                          const fileTypeConfig: Record<string, { bg: string; text: string; label: string }> = {
-                            added: { bg: 'bg-emerald-500/10', text: 'text-emerald-600', label: '+ Added' },
-                            modified: { bg: 'bg-blue-500/10', text: 'text-blue-600', label: '~ Modified' },
-                            removed: { bg: 'bg-red-500/10', text: 'text-red-600', label: '- Removed' },
-                          };
-                          const typeConfig = fileTypeConfig[file.type] || fileTypeConfig.modified;
-
-                          return (
-                            <div
-                              key={idx}
-                              className="flex items-center gap-3 p-3 bg-card rounded-lg border border-border/50 hover:bg-muted/60 transition-colors"
-                            >
-                              <FileIcon fileName={file.name} language={file.language} style={{}} />
-                              <span className="text-sm text-foreground flex-1 min-w-0 truncate font-mono">
-                                {file.name}
-                              </span>
-                              <span className={`px-2.5 py-1 rounded-full text-xs font-medium ${typeConfig.bg} ${typeConfig.text}`}>
-                                {typeConfig.label}
-                              </span>
-                            </div>
-                          );
-                        })}
-                      </div>
-                    </div>
-                  </div>
-                )}
-
-                {/* Action Buttons */}
-                <div className="flex gap-3 pt-4 border-t border-border/50">
-                  {commitUrl && (
-                    <a
-                      href={commitUrl}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="flex-1 inline-flex items-center justify-center gap-2 px-5 py-3 bg-foreground text-background rounded-xl font-medium text-sm hover:opacity-90 transition-all"
-                    >
-                      <Github className="w-4 h-4" />
-                      View on GitHub
-                    </a>
-                  )}
-                  {deployment.domain && deployment.status === 'success' && (
-                    <a
-                      href={`https://${deployment.domain}`}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="flex-1 inline-flex items-center justify-center gap-2 px-5 py-3 bg-primary text-primary-foreground rounded-xl font-medium text-sm hover:opacity-90 transition-all"
-                    >
-                      <ExternalLink className="w-4 h-4" />
-                      Visit Site
-                    </a>
-                  )}
-                </div>
-              </div>
-            ) : (
-              /* Manual Deployment */
-              <div className="text-center py-12">
-                <div className="w-16 h-16 rounded-full bg-muted flex items-center justify-center mx-auto mb-4">
-                  <GitCommit className="w-8 h-8 text-muted-foreground/50" />
-                </div>
-                <h3 className="text-lg font-semibold text-foreground mb-2">
-                  Manual Deployment
-                </h3>
-                <p className="text-sm text-muted-foreground max-w-md mx-auto mb-6">
-                  This deployment was triggered manually and doesn't have commit information.
-                </p>
-                <div className="bg-muted/40 rounded-xl border border-border/50 p-4 max-w-md mx-auto">
-                  <div className="space-y-3 text-left">
-                    <div>
-                      <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-1">
-                        Deployment ID
-                      </p>
-                      <code className="text-sm text-foreground font-mono">{deployment.id}</code>
-                    </div>
-                    <div>
-                      <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-1">
-                        Created
-                      </p>
-                      <p className="text-sm text-foreground">{formatDate(deployment.createdAt)}</p>
-                    </div>
-                    <div>
-                      <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-1">
-                        Type
-                      </p>
-                      <p className="text-sm text-foreground capitalize">{deployment.type || 'Manual'}</p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
-

package/apps/dashboard/src/app/(dashboard)/deployments/components/DeploymentCard.tsx

@@ -1,121 +0,0 @@
-"use client";
-
-import React, { useState } from "react";
-import { useRouter } from "next/navigation";
-import { DeploymentMenu } from "./DeploymentMenu";
-import { CommitDetailsModal } from "./CommitDetailsModal";
-import type { Deployment } from "../types";
-import { formatDistanceToNow, formatBuildTime, getStatusConfig } from "../utils";
-import { GitBranch, Clock, ExternalLink, MoreVertical } from "lucide-react";
-import { getFrameworkConfig } from "@/components/import-project/Frameworks";
-
-interface DeploymentCardProps {
-  deployment: Deployment;
-  onStatusChange?: () => void;
-}
-
-export const DeploymentCard: React.FC<DeploymentCardProps> = ({ deployment, onStatusChange }) => {
-  const router = useRouter();
-  const [isCommitModalOpen, setIsCommitModalOpen] = useState(false);
-  const statusConfig = getStatusConfig(deployment.status);
-  const frameworkConfig = getFrameworkConfig(deployment.framework);
-
-  const hasCommitData = deployment.commit?.hash && deployment.commit.hash !== "N/A";
-  const hasCommitMessage = deployment.commit?.message && deployment.commit.message !== "Manual deployment";
-
-  return (
-    <div
-      className="px-4 py-3.5 flex items-center gap-4 hover:bg-muted/40 transition-colors cursor-pointer group"
-      onClick={() => router.push(`/build/${deployment.id}`)}
-    >
-      {/* Framework icon */}
-      <div className="w-10 h-10 rounded-xl bg-muted/60 flex items-center justify-center shrink-0 group-hover:bg-muted transition-colors">
-        {frameworkConfig.icon ? (
-          frameworkConfig.icon("hsl(var(--foreground))")
-        ) : (
-          <span className="text-xs font-mono font-bold text-muted-foreground">
-            {(deployment.framework || "?").slice(0, 2).toUpperCase()}
-          </span>
-        )}
-      </div>
-
-      {/* Main info */}
-      <div className="flex-1 min-w-0">
-        <div className="flex items-center gap-2 mb-0.5">
-          <p className="text-sm font-medium text-foreground truncate">
-            {deployment.projectName || "Unknown Project"}
-          </p>
-          <span
-            className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-medium shrink-0 ${statusConfig.bgColor}`}
-            style={{ color: statusConfig.color }}
-          >
-            <span className="w-1.5 h-1.5 rounded-full" style={{ backgroundColor: statusConfig.color }} />
-            {statusConfig.label}
-          </span>
-        </div>
-        <div className="flex items-center gap-2 mt-0.5">
-          <p className="text-xs text-muted-foreground truncate max-w-[280px]">
-            {hasCommitMessage ? deployment.commit.message : "Manual deploy"}
-          </p>
-          <span className="text-muted-foreground/40">·</span>
-          <span className="text-xs text-muted-foreground shrink-0">
-            {formatDistanceToNow(new Date(deployment.createdAt))}
-          </span>
-          {deployment.buildTime ? (
-            <>
-              <span className="text-muted-foreground/40">·</span>
-              <span className="text-xs text-muted-foreground shrink-0 flex items-center gap-1">
-                <Clock className="size-3" />
-                {formatBuildTime(deployment.buildTime)}
-              </span>
-            </>
-          ) : null}
-          {deployment.branch && (
-            <>
-              <span className="text-muted-foreground/40 hidden sm:inline">·</span>
-              <span className="text-xs text-muted-foreground shrink-0 items-center gap-1 hidden sm:flex">
-                <GitBranch className="size-3" />
-                {deployment.branch}
-              </span>
-            </>
-          )}
-        </div>
-      </div>
-
-      {/* Right side — commit hash + actions */}
-      <div className="flex items-center gap-2 shrink-0">
-        {hasCommitData && (
-          <button
-            onClick={(e) => {
-              e.stopPropagation();
-              if (deployment.owner && deployment.repo) {
-                window.open(
-                  `https://github.com/${deployment.owner}/${deployment.repo}/commit/${deployment.commit.fullHash || deployment.commit.hash}`,
-                  "_blank",
-                );
-              } else {
-                setIsCommitModalOpen(true);
-              }
-            }}
-            className="inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs text-muted-foreground hover:text-foreground hover:bg-muted transition-colors font-mono"
-          >
-            {deployment.commit.hash.slice(0, 7)}
-            {deployment.owner && deployment.repo && <ExternalLink className="size-3" />}
-          </button>
-        )}
-
-        <DeploymentMenu
-          deployment={deployment}
-          triggerClassName="w-8 h-8 flex items-center justify-center rounded-lg text-muted-foreground/50 hover:text-foreground hover:bg-muted transition-colors"
-          onStatusChange={onStatusChange}
-        />
-      </div>
-
-      <CommitDetailsModal
-        deployment={deployment}
-        isOpen={isCommitModalOpen}
-        onClose={() => setIsCommitModalOpen(false)}
-      />
-    </div>
-  );
-};