francy51
c222179170
Enhance the company analysis overview page with better data presentation and visual design: - Fix business description display by filtering raw API data artifacts - Improve metadata layout with consolidated single-line format - Fix price chart Y-axis scaling to auto-scale to data range - Replace 'n/a' with cleaner em dash (—) for empty states - Add visual indicators and color-coded backgrounds to bull/bear sections - Improve empty state messaging with centered icons These changes improve information density, visual hierarchy, and overall user experience across the analysis page. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
89 lines
3.2 KiB
TypeScript
89 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { ExternalLink } from "lucide-react";
|
|
import { Panel } from "@/components/ui/panel";
|
|
import type { CompanyAnalysis } from "@/lib/types";
|
|
|
|
type CompanyOverviewCardProps = {
|
|
analysis: CompanyAnalysis;
|
|
};
|
|
|
|
export function CompanyOverviewCard(props: CompanyOverviewCardProps) {
|
|
const [expanded, setExpanded] = useState(false);
|
|
|
|
// Get the actual business description, filtering out raw data artifacts
|
|
const rawDescription = props.analysis.companyProfile.description;
|
|
const isRawData = rawDescription && (
|
|
rawDescription.includes('http://') ||
|
|
rawDescription.includes('P1Y') ||
|
|
rawDescription.includes('P3Y') ||
|
|
rawDescription.includes('FY false')
|
|
);
|
|
|
|
const description = !rawDescription || isRawData
|
|
? "No business description available."
|
|
: rawDescription;
|
|
|
|
const needsClamp = description.length > 320;
|
|
|
|
// Combine metadata into a single line
|
|
const metadata = [
|
|
props.analysis.company.ticker,
|
|
props.analysis.company.sector ?? props.analysis.companyProfile.industry,
|
|
props.analysis.company.cik ? `CIK ${props.analysis.company.cik}` : null,
|
|
].filter(Boolean).join(' · ');
|
|
|
|
return (
|
|
<Panel className="h-full pt-2">
|
|
<div className="space-y-5">
|
|
{/* Header with company name and metadata */}
|
|
<div>
|
|
<h2 className="text-2xl font-semibold text-[color:var(--terminal-bright)]">
|
|
{props.analysis.company.companyName}
|
|
</h2>
|
|
<p className="mt-1 text-xs uppercase tracking-[0.18em] text-[color:var(--terminal-muted)]">
|
|
{metadata}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Business description section */}
|
|
<div className="border-t border-[color:var(--line-weak)] py-4">
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-xs uppercase tracking-[0.14em] text-[color:var(--terminal-muted)]">
|
|
Business description
|
|
</p>
|
|
<p className="mt-3 text-sm leading-7 text-[color:var(--terminal-bright)]">
|
|
{expanded || !needsClamp
|
|
? description
|
|
: `${description.slice(0, 320).trimEnd()}...`}
|
|
</p>
|
|
</div>
|
|
{props.analysis.companyProfile.website ? (
|
|
<a
|
|
href={props.analysis.companyProfile.website}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="inline-flex shrink-0 items-center gap-1 text-xs uppercase tracking-[0.14em] text-[color:var(--accent)] hover:text-[color:var(--accent-strong)]"
|
|
>
|
|
Website
|
|
<ExternalLink className="size-3.5" />
|
|
</a>
|
|
) : null}
|
|
</div>
|
|
{needsClamp ? (
|
|
<button
|
|
type="button"
|
|
onClick={() => setExpanded((current) => !current)}
|
|
className="mt-3 text-xs uppercase tracking-[0.14em] text-[color:var(--accent)] hover:text-[color:var(--accent-strong)]"
|
|
>
|
|
{expanded ? "Show less" : "Read more"}
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</Panel>
|
|
);
|
|
}
|