src/components/ui/separator.tsx (1)

6-26: Add JSDoc documentation and consider accessibility improvements.

While the implementation is solid, consider these enhancements:

1. Add JSDoc documentation to describe the component and its props
2. Consider handling non-decorative cases with proper ARIA attributes

Add documentation and improve accessibility with this diff:

+/**
+ * A visual separator component that can be either horizontal or vertical.
+ * @param className - Additional classes to apply to the separator
+ * @param orientation - The orientation of the separator ('horizontal' | 'vertical')
+ * @param decorative - Whether the separator is purely decorative
+ */
 const Separator = React.forwardRef<
   React.ElementRef<typeof SeparatorPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
 >(
   (
     { className, orientation = "horizontal", decorative = true, ...props },
     ref,
   ) => (
     <SeparatorPrimitive.Root
       ref={ref}
       decorative={decorative}
+      aria-orientation={orientation}
+      role={decorative ? "none" : "separator"}
       orientation={orientation}
       className={cn(
         "shrink-0 bg-gray-200 dark:bg-gray-800",
         orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
         className,
       )}
       {...props}
     />
   ),
 );

src/components/ui/badge.tsx (1)

6-26: Consider adjusting warning variant hover state for better contrast.

While the badge variants are well-defined with good semantic meaning and dark mode support, the warning variant's hover state (hover:bg-yellow-500) might not provide sufficient contrast with the text color in light mode.

Consider this adjustment:

  warning:
-   "border-transparent bg-yellow-400 text-gray-900 shadow hover:bg-yellow-500 dark:bg-yellow-400 dark:text-gray-900 dark:hover:bg-yellow-500",
+   "border-transparent bg-yellow-400 text-gray-900 shadow hover:bg-yellow-400/80 dark:bg-yellow-400 dark:text-gray-900 dark:hover:bg-yellow-400/80",

src/components/ui/card.tsx (2)

5-18: Consider enhancing accessibility with semantic HTML and ARIA attributes.

While the implementation is solid, consider these improvements for better accessibility:

 const Card = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div
+  <article
     ref={ref}
     className={cn(
       "rounded-xl border border-gray-200 bg-white text-gray-950 shadow dark:border-gray-800 dark:bg-gray-950 dark:text-gray-50",
       className,
     )}
+    role="article"
+    aria-label="Content card"
     {...props}
-  />
+  />
 ));

---

1-83: Well-structured compound component system.

The card component system follows the compound component pattern effectively, providing a flexible and maintainable solution for the Sample Test Details page UI update. The consistent implementation of forwarded refs and className handling makes these components highly reusable.

Consider documenting usage examples in comments or creating a Storybook story to showcase different card compositions and variants.

src/components/Patient/SampleDetails.tsx (2)

292-308: Consider enhancing accessibility of status indicators

The new card header layout effectively organizes status and result information. However, consider adding ARIA labels for screen readers.

-              <Badge variant="outline" className="font-semibold">
+              <Badge variant="outline" className="font-semibold" aria-label={`Status: ${sampleDetails?.status}`}>
                 {sampleDetails?.status}
               </Badge>
-              <Badge variant="secondary" className="font-semibold">
+              <Badge variant="secondary" className="font-semibold" aria-label={`Result: ${sampleDetails?.result}`}>
                 {sampleDetails?.result}
               </Badge>

---

450-473: Clean up redundant whitespace characters

The layout and spacing using Separator components is good, but there are unnecessary whitespace characters in the JSX that should be removed for cleaner code.

- {" "}
  {sampleDetails.patient_travel_history}

Configuration used: CodeRabbit UI
Review profile: CHILL

#!/bin/bash
# Description: Verify the Separator component usage in Sample Test Details page

# Check for Separator component usage
rg -l "Separator" "src/components/Patient/"

# Check for proper imports
rg "from.*separator" "src/components/Patient/"

#!/bin/bash
# Check the actual usage of Separator in SampleDetails.tsx
rg -A 5 "Separator" "src/components/Patient/SampleDetails.tsx"

# Check if there are any styling conflicts or overrides
rg "className.*Separator" "src/components/Patient/SampleDetails.tsx"

# Check the overall structure of SampleDetails component
ast-grep --pattern 'export function SampleDetails() {
  $$$
}'

#!/bin/bash
# Description: Verify Badge component usage in Sample Test Details page
# Expected: Badge component is properly imported and used in the Sample Test Details page

# Check for Badge component imports
echo "Checking Badge component imports..."
rg -l "import.*Badge.*from.*badge" src/

# Check for Badge component usage
echo "Checking Badge component usage..."
ast-grep --pattern 'Badge $$$' src/

#!/bin/bash
# Let's examine how the Badge component is used in SampleDetails.tsx
echo "Checking Badge usage in SampleDetails.tsx..."
rg -A 5 -B 5 "Badge" src/components/Patient/SampleDetails.tsx

# Also check the specific variant being used
echo "Checking Badge variant usage..."
ast-grep --pattern '<Badge variant="$_" $$$>' src/components/Patient/SampleDetails.tsx

Configuration used: CodeRabbit UI
Review profile: CHILL

#!/bin/bash
# Description: Check if @radix-ui/react-separator is already included in plugin dependencies

# Search for @radix-ui/react-separator in package.json files under apps directory
fd package.json apps -x jq -r '.dependencies | select(."@radix-ui/react-separator" != null) | "@radix-ui/react-separator"'

#!/bin/bash
# Let's first check the repository structure to locate package.json files
fd package.json

# Then examine the getPluginDependencies function implementation
ast-grep --pattern 'function getPluginDependencies() {
  $$$
}'

# Also search for any direct references to this dependency
rg "@radix-ui/react-separator" -A 2 -B 2

#!/bin/bash
# Let's check the content of package.json for dependencies
cat package.json | jq '.dependencies'

# And examine the getPluginDependencies function content
rg -A 10 "function getPluginDependencies" 

src/components/ui/separator.tsx (1)

1-3: Consider enhancing the Separator component with accessibility and customization options.

While the current implementation works, here are some suggested improvements:

1. Use semantic HTML with proper ARIA attributes
2. Add TypeScript props interface for customization
3. Include component documentation

Consider this implementation:

-export default function Separator() {
-  return <div className="border-t border-gray-300 my-4"></div>;
+interface SeparatorProps {
+  className?: string;
+  orientation?: 'horizontal' | 'vertical';
+}
+
+/**
+ * A visual separator component used to divide content sections
+ * @param props.className - Additional CSS classes to apply
+ * @param props.orientation - Direction of the separator (horizontal/vertical)
+ */
+export default function Separator({ 
+  className = '',
+  orientation = 'horizontal'
+}: SeparatorProps) {
+  return (
+    <hr
+      role="separator"
+      aria-orientation={orientation}
+      className={`border-gray-300 my-4 ${className}`}
+    />
+  );
+}

Key improvements:

• Uses semantic <hr> element instead of <div>
• Adds proper ARIA attributes for accessibility
• Includes TypeScript props interface for type safety
• Allows customization through props
• Adds JSDoc documentation

src/components/Patient/SampleDetails.tsx (4)

293-308: Enhance accessibility of the status section

While the layout is well-structured, consider these accessibility improvements:

1. Add an aria-label to the status section
2. Ensure status badges have sufficient color contrast
3. Consider adding aria-current for the current status

-        <CardHeader className="space-y-4">
+        <CardHeader className="space-y-4" aria-label="Sample Status Information">
           <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
             <div className="space-y-1 flex gap-2 items-center">
               <div className="text-sm text-muted-foreground">Status:</div>
-              <Badge variant="outline" className="font-semibold">
+              <Badge 
+                variant="outline" 
+                className="font-semibold"
+                aria-current="true">
                 {sampleDetails?.status}
               </Badge>
             </div>

---

310-340: Extract repeated date formatting logic

The date formatting logic is duplicated across multiple fields. Consider extracting it into a reusable component.

+ const FormattedDate = ({ date, fallback = "-" }) => (
+   <div className="font-medium">
+     {date ? formatDateTime(date) : fallback}
+   </div>
+ );

// Usage:
-              <div className="font-medium">
-                {sampleDetails?.date_of_result
-                  ? formatDateTime(sampleDetails.date_of_result)
-                  : "-"}
-              </div>
+              <FormattedDate date={sampleDetails?.date_of_result} />

---

341-350: Add text wrapping for long doctor names

Long doctor names might overflow their container. Consider adding text wrapping utilities.

-              <div className="font-medium">
+              <div className="font-medium break-words">
                 {startCase(camelCase(sampleDetails.doctor_name))}
               </div>

---

464-471: Remove unnecessary whitespace in string interpolation

The extra whitespace characters in the JSX are unnecessary.

               <div className="font-medium">
-                {" "}
                 {startCase(camelCase(sampleDetails.sample_type))}
               </div>

Configuration used: CodeRabbit UI
Review profile: CHILL

src/components/ui/card.tsx (3)

5-18: Consider making heading level configurable

While using semantic HTML (h2) is good for accessibility, forcing all cards to be h2 elements might not be appropriate in all contexts. Consider making the heading level configurable to maintain proper document outline.

 const Card = React.forwardRef<
-  HTMLHeadingElement,
+  HTMLElement,
-  React.HTMLAttributes<HTMLHeadingElement>
+  React.HTMLAttributes<HTMLElement> & {
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div'
+  }
->(({ className, ...props }, ref) => (
+>(({ className, as: Component = 'div', ...props }, ref) => (
-  <h2
+  <Component
     ref={ref}
     className={cn(
       "rounded-xl border border-gray-200 bg-white text-gray-950 shadow dark:border-gray-800 dark:bg-gray-950 dark:text-gray-50",
       className,
     )}
     {...props}
   />
 ));

---

44-54: Enhance accessibility attributes

Consider adding ARIA attributes to improve screen reader experience.

 const CardDescription = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
+    role="contentinfo"
+    aria-label="Card description"
     className={cn("text-sm text-gray-500 dark:text-gray-400", className)}
     {...props}
   />
 ));

---

64-74: Add semantic role for better accessibility

Consider adding a role attribute to clarify the footer's purpose to assistive technologies.

 const CardFooter = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
+    role="contentinfo"
     className={cn("flex items-center p-6 pt-0", className)}
     {...props}
   />
 ));

Configuration used: CodeRabbit UI
Review profile: CHILL

src/components/ui/card.tsx (2)

5-18: Add semantic role for better accessibility.

The Card component should have a semantic role to improve accessibility.

 <div
   ref={ref}
   className={cn(
     "rounded-xl border border-gray-200 bg-white text-gray-950 shadow dark:border-gray-800 dark:bg-gray-950 dark:text-gray-50",
     className,
   )}
+  role="article"
   {...props}
 />

---

45-55: Use semantic paragraph element.

Consider using a <p> element instead of a <div> for better semantics, as this component represents descriptive text.

 const CardDescription = React.forwardRef<
-  HTMLDivElement,
+  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLDivElement>
+  React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-  <div
+  <p
     ref={ref}
     className={cn("text-sm text-gray-500 dark:text-gray-400", className)}
     {...props}
-  />
+  />
 ));

Configuration used: CodeRabbit UI
Review profile: CHILL

#!/bin/bash
# Description: Check the usage of Card components in Sample Test Details page

# Find files that import Card components
rg -l "import.*from.*['\"]@/components/ui/card['\"]"

# Check the actual usage of Card components
rg -A 5 "(<Card|<CardHeader|<CardTitle|<CardDescription|<CardContent|<CardFooter)"

#!/bin/bash
# Get the full content of SampleDetails.tsx to verify proper component usage
cat src/components/Patient/SampleDetails.tsx

src/components/ui/card.tsx (3)

5-18: Enhance accessibility with ARIA attributes and semantic roles.

Consider adding semantic roles and ARIA attributes to improve accessibility:

 <div
   ref={ref}
+  role="article"
+  aria-label={props['aria-label'] || 'Card'}
   className={cn(
     "rounded-xl border border-gray-200 bg-white text-gray-950 shadow dark:border-gray-800 dark:bg-gray-950 dark:text-gray-50",
     className,
   )}
   {...props}
 />

---

44-54: Use semantic paragraph element for CardDescription.

The description would be more semantic using a <p> element instead of a <div>:

 const CardDescription = React.forwardRef<
-  HTMLDivElement,
+  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLDivElement>
+  React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-  <div
+  <p
     ref={ref}
     className={cn("text-sm text-gray-500 dark:text-gray-400", className)}
     {...props}
-  />
+  />
 ));

---

56-73: Add semantic roles to content and footer components.

Enhance the semantic structure of the card components:

 const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+  <div
+    ref={ref}
+    role="region"
+    aria-label={props['aria-label'] || 'Card content'}
+    className={cn("p-6 pt-0", className)}
+    {...props}
+  />
 ));

 const CardFooter = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
+    role="contentinfo"
     className={cn("flex items-center p-6 pt-0", className)}
     {...props}
   />
 ));

Configuration used: CodeRabbit UI
Review profile: CHILL

#!/bin/bash
# Description: Verify the integration of card components in the Sample Test Details page

# Search for imports and usage of Card components
rg -A 5 "import.*from.*card" "src/components/Patient/"

#!/bin/bash
# Get the implementation details of SampleDetails component
ast-grep --pattern 'const SampleDetails = $$$' src/components/Patient/SampleDetails.tsx

# Also check the actual usage of CardHeader and CardContent
rg -B 2 -A 5 '<Card(Header|Content)' src/components/Patient/SampleDetails.tsx