salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

123

Browse Source
This commit is contained in:
Desktop
2025-11-12 22:17:37 +05:00
parent 7c48854e86
commit 883e4642dc
4 changed files with 18 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/common/ComponentCard.tsx
View File

@@ -13,10 +13,10 @@ const ComponentCard: React.FC<ComponentCardProps> = ({
}) => { }) => {
return ( return (
<div <div
className={`rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03] ${className}`} className={`rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03] overflow-visible ${className}`}
> >
{/* Card Header */} {/* Card Header */}
<div className="px-6 py-5"> <div className="px-6 py-5 relative z-0">
<h3 className="text-base font-medium text-gray-800 dark:text-white/90"> <h3 className="text-base font-medium text-gray-800 dark:text-white/90">
{title} {title}
</h3> </h3>
@@ -28,7 +28,7 @@ const ComponentCard: React.FC<ComponentCardProps> = ({
</div> </div>
{/* Card Body */} {/* Card Body */}
<div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6"> <div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6 overflow-visible">
<div className="space-y-6">{children}</div> <div className="space-y-6">{children}</div>
</div> </div>
</div> </div>

20
frontend/src/components/dashboard/WorkflowPipeline.tsx
View File

@@ -1,4 +1,4 @@
import { ReactNode } from "react"; import React, { ReactNode } from "react";
import { Link } from "react-router"; import { Link } from "react-router";
import { CheckCircleIcon, TimeIcon, ArrowRightIcon } from "../../icons"; import { CheckCircleIcon, TimeIcon, ArrowRightIcon } from "../../icons";
import { Tooltip } from "../ui/tooltip"; import { Tooltip } from "../ui/tooltip";
@@ -59,8 +59,8 @@ export default function WorkflowPipeline({
}; };
return ( return (
<div className={`relative ${className}`}> <div className={`relative overflow-visible ${className}`}>
<div className="flex items-center justify-between gap-4 overflow-x-auto pb-4 scrollbar-hide"> <div className="flex items-center justify-between gap-2 overflow-x-auto pb-4 scrollbar-hide">
<style>{` <style>{`
.scrollbar-hide::-webkit-scrollbar { .scrollbar-hide::-webkit-scrollbar {
display: none; display: none;
@@ -75,9 +75,9 @@ export default function WorkflowPipeline({
const nextStep = !isLast ? steps[index + 1] : null; const nextStep = !isLast ? steps[index + 1] : null;
return ( return (
<div key={step.number} className="flex items-center flex-shrink-0"> <React.Fragment key={step.number}>
{/* Step Node */} {/* Step Node */}
<div className="flex flex-col items-center"> <div className="flex flex-col items-center flex-shrink-0">
<Tooltip <Tooltip
text={ text={
step.details || step.details ||
@@ -149,13 +149,13 @@ export default function WorkflowPipeline({
{/* Connection Line */} {/* Connection Line */}
{!isLast && showConnections && ( {!isLast && showConnections && (
<div className="flex items-center mx-2 flex-shrink-0"> <div className="flex items-center flex-1 min-w-[60px] max-w-[120px] mx-1">
<div className={`h-0.5 w-16 ${getConnectionColor(step.status, nextStep?.status)} transition-colors duration-300`} /> <div className={`h-0.5 flex-1 ${getConnectionColor(step.status, nextStep?.status)} transition-colors duration-300`} />
<ArrowRightIcon className={`size-4 ${step.status === "completed" ? "text-success-500" : "text-gray-400"} transition-colors duration-300`} /> <ArrowRightIcon className={`size-4 mx-1 flex-shrink-0 ${step.status === "completed" ? "text-success-500" : "text-gray-400"} transition-colors duration-300`} />
<div className={`h-0.5 w-16 ${getConnectionColor(step.status, nextStep?.status)} transition-colors duration-300`} /> <div className={`h-0.5 flex-1 ${getConnectionColor(step.status, nextStep?.status)} transition-colors duration-300`} />
</div> </div>
)} )}
</div> </React.Fragment>
); );
})} })}
</div> </div>

4
frontend/src/components/ui/tooltip/EnhancedTooltip.tsx
View File

@@ -58,6 +58,7 @@ export const EnhancedTooltip: React.FC<EnhancedTooltipProps> = ({
<div <div
ref={triggerRef} ref={triggerRef}
className={`relative inline-flex ${className}`} className={`relative inline-flex ${className}`}
style={{ zIndex: 1 }}
onMouseEnter={handleMouseEnter} onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave} onMouseLeave={handleMouseLeave}
> >
@@ -66,12 +67,13 @@ export const EnhancedTooltip: React.FC<EnhancedTooltipProps> = ({
<div <div
ref={tooltipRef} ref={tooltipRef}
className={` className={`
absolute z-[9999] px-3 py-2 text-xs font-medium text-white bg-gray-900 rounded-lg absolute z-[99999] px-3 py-2 text-xs font-medium text-white bg-gray-900 rounded-lg
opacity-100 pointer-events-none transition-opacity duration-200 opacity-100 pointer-events-none transition-opacity duration-200
whitespace-normal max-w-xs shadow-lg whitespace-normal max-w-xs shadow-lg
before:absolute before:border-4 before:border-transparent before:content-[''] before:absolute before:border-4 before:border-transparent before:content-['']
${placementClasses[placement]} ${placementClasses[placement]}
`} `}
style={{ zIndex: 99999 }}
onMouseEnter={() => setIsVisible(true)} onMouseEnter={() => setIsVisible(true)}
onMouseLeave={() => setIsVisible(false)} onMouseLeave={() => setIsVisible(false)}
> >

4
frontend/src/components/ui/tooltip/Tooltip.tsx
View File

@@ -23,10 +23,10 @@ export const Tooltip: React.FC<TooltipProps> = ({
}; };
return ( return (
<div className={`relative group inline-flex ${className}`}> <div className={`relative group inline-flex ${className}`} style={{ zIndex: 1 }}>
{children} {children}
<span <span
className={`absolute z-[9999] px-3 py-1.5 text-xs font-medium text-white bg-gray-900 rounded-lg opacity-0 pointer-events-none group-hover:opacity-100 transition-opacity whitespace-nowrap before:absolute before:border-4 before:border-transparent before:content-[''] ${placementClasses[placement]}`} className={`absolute z-[99999] px-3 py-1.5 text-xs font-medium text-white bg-gray-900 rounded-lg opacity-0 pointer-events-none group-hover:opacity-100 transition-opacity whitespace-nowrap before:absolute before:border-4 before:border-transparent before:content-[''] ${placementClasses[placement]}`}
> >
{text} {text}
</span> </span>