From e2c6db1bfa1e786c7fb38fba01368d998c8df23a Mon Sep 17 00:00:00 2001 From: Peter Vachon Date: Wed, 25 Feb 2026 09:10:18 -0500 Subject: [PATCH 01/17] chore(apollo-vertex): Bypassing Auth locally --- apps/apollo-vertex/next-env.d.ts | 2 +- apps/apollo-vertex/registry/shell/shell.tsx | 48 +++++++++++++++---- .../apollo-vertex/templates/ShellTemplate.tsx | 6 +-- 3 files changed, 42 insertions(+), 14 deletions(-) diff --git a/apps/apollo-vertex/next-env.d.ts b/apps/apollo-vertex/next-env.d.ts index 9edff1c7c..c4b7818fb 100644 --- a/apps/apollo-vertex/next-env.d.ts +++ b/apps/apollo-vertex/next-env.d.ts @@ -1,6 +1,6 @@ /// /// -import "./.next/types/routes.d.ts"; +import "./.next/dev/types/routes.d.ts"; // NOTE: This file should not be edited // see https://nextjs.org/docs/app/api-reference/config/typescript for more information. diff --git a/apps/apollo-vertex/registry/shell/shell.tsx b/apps/apollo-vertex/registry/shell/shell.tsx index 99708605c..8eb7fec4d 100644 --- a/apps/apollo-vertex/registry/shell/shell.tsx +++ b/apps/apollo-vertex/registry/shell/shell.tsx @@ -1,5 +1,10 @@ import type { FC, PropsWithChildren } from "react"; -import { ShellAuthProvider, useAuth } from "./shell-auth-provider"; +import { + AuthContext, + type AuthContextValue, + ShellAuthProvider, + useAuth, +} from "./shell-auth-provider"; import { ShellLayout } from "./shell-layout"; import { LocaleProvider } from "./shell-locale-provider"; import { ShellLogin } from "./shell-login"; @@ -43,12 +48,24 @@ const ApolloShellComponent: FC = ({ ); }; -interface ApolloShellProps extends ApolloShellComponentProps { - clientId: string; - scope: string; - baseUrl: string; - variant?: "minimal"; -} +const MOCK_AUTH_CONTEXT: AuthContextValue = { + user: { name: "Dev User", email: "dev@localhost", sub: "dev-user-001" }, + isAuthenticated: true, + isLoading: false, + login: async () => {}, + logout: () => {}, + accessToken: "bypass-token", +}; + +const MockAuthProvider: FC = ({ children }) => ( + {children} +); + +type ApolloShellProps = ApolloShellComponentProps & + ( + | { bypassAuth: true; clientId?: string; scope?: string; baseUrl?: string } + | { bypassAuth?: false; clientId: string; scope: string; baseUrl: string } + ); export const ApolloShell: FC = ({ clientId, @@ -59,9 +76,22 @@ export const ApolloShell: FC = ({ productName, companyLogo, variant, + bypassAuth, }) => { + const AuthWrapper = bypassAuth + ? MockAuthProvider + : ({ children }: PropsWithChildren) => ( + + {children} + + ); + return ( - + = ({ {children} - + ); }; diff --git a/apps/apollo-vertex/templates/ShellTemplate.tsx b/apps/apollo-vertex/templates/ShellTemplate.tsx index d0d451104..75f412615 100644 --- a/apps/apollo-vertex/templates/ShellTemplate.tsx +++ b/apps/apollo-vertex/templates/ShellTemplate.tsx @@ -8,14 +8,12 @@ interface ShellTemplateWithAuthProps { } const queryClient = new QueryClient(); -const baseUrl = typeof window === "undefined" ? "" : window.location.origin; + export function ShellTemplate({ variant }: ShellTemplateWithAuthProps) { return ( Date: Wed, 25 Feb 2026 10:08:01 -0500 Subject: [PATCH 02/17] chore(apollo-vertex): Dummy content --- apps/apollo-vertex/app/(preview)/layout.tsx | 9 + .../(preview)/preview/shell-minimal/page.tsx | 7 + .../preview/shell/invoice-dashboard.tsx | 213 ++++++++++++++++++ .../app/(preview)/preview/shell/page.tsx | 83 +++++++ .../app/vertex-components/shell/page.mdx | 4 + .../registry/shell/shell-layout.tsx | 6 +- .../registry/shell/shell-sidebar.tsx | 4 + apps/apollo-vertex/registry/shell/shell.tsx | 7 +- .../apollo-vertex/templates/ShellTemplate.tsx | 11 +- 9 files changed, 338 insertions(+), 6 deletions(-) create mode 100644 apps/apollo-vertex/app/(preview)/layout.tsx create mode 100644 apps/apollo-vertex/app/(preview)/preview/shell-minimal/page.tsx create mode 100644 apps/apollo-vertex/app/(preview)/preview/shell/invoice-dashboard.tsx create mode 100644 apps/apollo-vertex/app/(preview)/preview/shell/page.tsx diff --git a/apps/apollo-vertex/app/(preview)/layout.tsx b/apps/apollo-vertex/app/(preview)/layout.tsx new file mode 100644 index 000000000..02b220198 --- /dev/null +++ b/apps/apollo-vertex/app/(preview)/layout.tsx @@ -0,0 +1,9 @@ +import type { ReactNode } from "react"; + +export default function PreviewLayout({ children }: { children: ReactNode }) { + return ( +
+ {children} +
+ ); +} diff --git a/apps/apollo-vertex/app/(preview)/preview/shell-minimal/page.tsx b/apps/apollo-vertex/app/(preview)/preview/shell-minimal/page.tsx new file mode 100644 index 000000000..89edc929c --- /dev/null +++ b/apps/apollo-vertex/app/(preview)/preview/shell-minimal/page.tsx @@ -0,0 +1,7 @@ +"use client"; + +import { ShellTemplate } from "@/templates/ShellTemplate"; + +export default function ShellMinimalPreviewPage() { + return ; +} diff --git a/apps/apollo-vertex/app/(preview)/preview/shell/invoice-dashboard.tsx b/apps/apollo-vertex/app/(preview)/preview/shell/invoice-dashboard.tsx new file mode 100644 index 000000000..df9dc5e68 --- /dev/null +++ b/apps/apollo-vertex/app/(preview)/preview/shell/invoice-dashboard.tsx @@ -0,0 +1,213 @@ +"use client"; + +import { + CheckCircle, + Clock, + FileText, + AlertTriangle, + Plus, + TrendingUp, +} from "lucide-react"; +import { Badge } from "@/components/ui/badge"; +import { Button } from "@/components/ui/button"; +import { + Card, + CardContent, + CardHeader, + CardTitle, +} from "@/components/ui/card"; +import { Progress } from "@/components/ui/progress"; +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/components/ui/table"; + +const kpis = [ + { label: "Total Invoices", value: "1,247", icon: FileText, change: "+12%" }, + { label: "Pending Review", value: "83", icon: Clock, change: "-5%" }, + { label: "Processed Today", value: "156", icon: CheckCircle, change: "+23%" }, + { label: "Success Rate", value: "98.2%", icon: TrendingUp, change: "+0.4%" }, +]; + +const invoices = [ + { id: "INV-4021", vendor: "Acme Corp", amount: "$12,450.00", status: "Processed" as const, date: "Feb 25, 2026" }, + { id: "INV-4020", vendor: "Global Supplies Ltd", amount: "$3,280.50", status: "Pending" as const, date: "Feb 25, 2026" }, + { id: "INV-4019", vendor: "TechParts Inc", amount: "$8,920.00", status: "In Review" as const, date: "Feb 24, 2026" }, + { id: "INV-4018", vendor: "Office Depot", amount: "$1,150.75", status: "Processed" as const, date: "Feb 24, 2026" }, + { id: "INV-4017", vendor: "CloudServ Solutions", amount: "$24,000.00", status: "Failed" as const, date: "Feb 23, 2026" }, + { id: "INV-4016", vendor: "Metro Logistics", amount: "$6,780.00", status: "Processed" as const, date: "Feb 23, 2026" }, +]; + +const statusVariant: Record = { + Processed: "default", + Pending: "secondary", + Failed: "destructive", + "In Review": "outline", +}; + +const activityBars = [ + { label: "Mon", height: 60 }, + { label: "Tue", height: 85 }, + { label: "Wed", height: 45 }, + { label: "Thu", height: 92 }, + { label: "Fri", height: 78 }, + { label: "Sat", height: 30 }, + { label: "Sun", height: 15 }, +]; + +const recentActivity = [ + { text: "INV-4021 processed successfully", time: "2 min ago" }, + { text: "INV-4020 submitted for review", time: "15 min ago" }, + { text: "Batch processing completed (42 invoices)", time: "1 hr ago" }, + { text: "INV-4017 failed — missing PO number", time: "3 hrs ago" }, +]; + +export function InvoiceDashboard({ visible }: { visible: boolean }) { + if (!visible) return null; + + return ( +
+ {/* Header */} +
+
+

Invoice Processing

+

+ Monitor and manage invoice automation workflows +

+
+ +
+ + {/* KPI Cards */} +
+ {kpis.map((kpi) => ( + + +
+ + {kpi.label} + + +
+ + +
{kpi.value}
+

+ {kpi.change} from last week +

+ + + ))} +
+ + {/* Invoices Table */} + + + Recent Invoices + + + + + + Invoice + Vendor + Amount + Status + Date + + + + {invoices.map((inv) => ( + + {inv.id} + {inv.vendor} + {inv.amount} + + {inv.status} + + {inv.date} + + ))} + +
+ + + + {/* Bottom Row */} +
+ {/* Processing Activity */} + + + Processing Activity + + +
+ {activityBars.map((bar) => ( +
+
+ {bar.label} +
+ ))} +
+ + + + {/* Recent Activity */} + + + Recent Activity + + +
+ {recentActivity.map((event, i) => ( +
+
+
+

{event.text}

+

{event.time}

+
+
+ ))} +
+ + +
+ + {/* Processing Pipeline */} + + + Processing Pipeline + + +
+
+ OCR Extraction + 96% +
+ +
+ Field Validation + 88% +
+ +
+ Approval Routing + 72% +
+ +
+ + +
+ ); +} diff --git a/apps/apollo-vertex/app/(preview)/preview/shell/page.tsx b/apps/apollo-vertex/app/(preview)/preview/shell/page.tsx new file mode 100644 index 000000000..f3c67c4ac --- /dev/null +++ b/apps/apollo-vertex/app/(preview)/preview/shell/page.tsx @@ -0,0 +1,83 @@ +"use client"; + +import { AnimatePresence, motion } from "framer-motion"; +import { Eye, EyeOff } from "lucide-react"; +import { useState } from "react"; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "@/components/ui/tooltip"; +import { useLocalStorage } from "@/registry/use-local-storage/use-local-storage"; +import { ShellTemplate } from "@/templates/ShellTemplate"; +import { InvoiceDashboard } from "./invoice-dashboard"; + +function VisibilityToggle({ + visible, + onToggle, +}: { + visible: boolean; + onToggle: () => void; +}) { + const [isCollapsed] = useLocalStorage("sidebar-collapsed", false); + const Icon = visible ? Eye : EyeOff; + + const content = ( + + ); + + if (isCollapsed) { + return ( + + + {content} + + Toggle Content + + + + ); + } + + return content; +} + +export default function ShellPreviewPage() { + const [contentVisible, setContentVisible] = useState(true); + + return ( + setContentVisible((v) => !v)} + /> + } + > + + + ); +} diff --git a/apps/apollo-vertex/app/vertex-components/shell/page.mdx b/apps/apollo-vertex/app/vertex-components/shell/page.mdx index 704ab68a8..e3738bc40 100644 --- a/apps/apollo-vertex/app/vertex-components/shell/page.mdx +++ b/apps/apollo-vertex/app/vertex-components/shell/page.mdx @@ -10,6 +10,8 @@ A component that includes OAuth2 authentication and a collapsible sidebar.
+Open standalone preview ↗ + ## Minimal Header Variant Use the `variant="minimal"` prop to render a horizontal header layout instead of the default sidebar. @@ -20,6 +22,8 @@ Use the `variant="minimal"` prop to render a horizontal header layout instead of +Open standalone preview ↗ + ## Features - **OAuth2 Authentication**: Built-in authorization code flow with PKCE diff --git a/apps/apollo-vertex/registry/shell/shell-layout.tsx b/apps/apollo-vertex/registry/shell/shell-layout.tsx index 95ea57503..264e868d9 100644 --- a/apps/apollo-vertex/registry/shell/shell-layout.tsx +++ b/apps/apollo-vertex/registry/shell/shell-layout.tsx @@ -1,4 +1,4 @@ -import type { PropsWithChildren } from "react"; +import type { PropsWithChildren, ReactNode } from "react"; import type { CompanyLogo } from "./shell"; import { Sidebar } from "./shell-sidebar"; import { useTheme } from "./shell-theme-provider"; @@ -10,6 +10,7 @@ interface ShellLayoutProps { productName: string; variant?: "minimal"; companyLogo?: CompanyLogo; + sidebarActions?: ReactNode; } function DarkGradientBackground() { @@ -277,6 +278,7 @@ export function ShellLayout({ productName, variant, companyLogo, + sidebarActions, }: PropsWithChildren) { if (variant === "minimal") { return ( @@ -286,6 +288,7 @@ export function ShellLayout({ variant={variant} productName={productName} companyLogo={companyLogo} + sidebarActions={sidebarActions} />
@@ -303,6 +306,7 @@ export function ShellLayout({ variant={variant} productName={productName} companyLogo={companyLogo} + sidebarActions={sidebarActions} />
diff --git a/apps/apollo-vertex/registry/shell/shell-sidebar.tsx b/apps/apollo-vertex/registry/shell/shell-sidebar.tsx index 75cb69935..5d792fd2f 100644 --- a/apps/apollo-vertex/registry/shell/shell-sidebar.tsx +++ b/apps/apollo-vertex/registry/shell/shell-sidebar.tsx @@ -1,5 +1,6 @@ import { motion } from "framer-motion"; import { BarChart3, FolderOpen, Home, Settings, Users } from "lucide-react"; +import type { ReactNode } from "react"; import { cn } from "@/lib/utils"; import { useLocalStorage } from "@/registry/use-local-storage/use-local-storage"; import type { CompanyLogo } from "./shell"; @@ -16,6 +17,7 @@ interface SidebarProps { productName: string; variant?: "minimal"; companyLogo?: CompanyLogo; + sidebarActions?: ReactNode; } export const Sidebar = ({ @@ -23,6 +25,7 @@ export const Sidebar = ({ productName, variant, companyLogo, + sidebarActions, }: SidebarProps) => { const [isCollapsed] = useLocalStorage("sidebar-collapsed", false); @@ -83,6 +86,7 @@ export const Sidebar = ({ + {sidebarActions}
{isCollapsed ? ( diff --git a/apps/apollo-vertex/registry/shell/shell.tsx b/apps/apollo-vertex/registry/shell/shell.tsx index 8eb7fec4d..26b0488a2 100644 --- a/apps/apollo-vertex/registry/shell/shell.tsx +++ b/apps/apollo-vertex/registry/shell/shell.tsx @@ -1,4 +1,4 @@ -import type { FC, PropsWithChildren } from "react"; +import type { FC, PropsWithChildren, ReactNode } from "react"; import { AuthContext, type AuthContextValue, @@ -20,6 +20,7 @@ export interface ApolloShellComponentProps extends PropsWithChildren { productName: string; variant?: "minimal"; companyLogo?: CompanyLogo; + sidebarActions?: ReactNode; } const ApolloShellComponent: FC = ({ @@ -28,6 +29,7 @@ const ApolloShellComponent: FC = ({ productName, companyLogo, variant, + sidebarActions, }) => { const { accessToken } = useAuth(); if (!accessToken) { @@ -41,6 +43,7 @@ const ApolloShellComponent: FC = ({ productName={productName} companyLogo={companyLogo} variant={variant} + sidebarActions={sidebarActions} > {children} @@ -77,6 +80,7 @@ export const ApolloShell: FC = ({ companyLogo, variant, bypassAuth, + sidebarActions, }) => { const AuthWrapper = bypassAuth ? MockAuthProvider @@ -98,6 +102,7 @@ export const ApolloShell: FC = ({ productName={productName} companyLogo={companyLogo} variant={variant} + sidebarActions={sidebarActions} > {children} diff --git a/apps/apollo-vertex/templates/ShellTemplate.tsx b/apps/apollo-vertex/templates/ShellTemplate.tsx index 75f412615..55a0b43b1 100644 --- a/apps/apollo-vertex/templates/ShellTemplate.tsx +++ b/apps/apollo-vertex/templates/ShellTemplate.tsx @@ -1,15 +1,17 @@ "use client"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import type { ReactNode } from "react"; import { ApolloShell } from "@/registry/shell/shell"; -interface ShellTemplateWithAuthProps { +interface ShellTemplateProps { variant?: "minimal"; + children?: ReactNode; + sidebarActions?: ReactNode; } const queryClient = new QueryClient(); - -export function ShellTemplate({ variant }: ShellTemplateWithAuthProps) { +export function ShellTemplate({ variant, children, sidebarActions }: ShellTemplateProps) { return ( -
+ {children ??
} ); From fee12f7fd3c778e068f092423f7d320b6bb026cf Mon Sep 17 00:00:00 2001 From: Peter Vachon Date: Wed, 25 Feb 2026 15:53:50 -0500 Subject: [PATCH 03/17] chore(apollo-vertex): Shell updates --- .../shell-minimal/loan-qc-dashboard.tsx | 200 +++++++++++++ .../(preview)/preview/shell-minimal/page.tsx | 39 ++- .../preview/shell/invoice-dashboard.tsx | 32 +- apps/apollo-vertex/locales/en.json | 3 + apps/apollo-vertex/public/UiPath.svg | 6 + apps/apollo-vertex/registry/card/card.tsx | 2 +- .../registry/shell/shell-company.tsx | 135 ++++++--- .../registry/shell/shell-layout.tsx | 276 ++++++------------ .../registry/shell/shell-minimal-company.tsx | 9 +- .../registry/shell/shell-nav-item.tsx | 2 +- .../registry/shell/shell-sidebar.tsx | 49 ++-- .../registry/shell/shell-user-profile.tsx | 228 +++++++++++---- apps/apollo-vertex/registry/shell/shell.tsx | 5 + .../apollo-vertex/templates/ShellTemplate.tsx | 5 +- 14 files changed, 643 insertions(+), 348 deletions(-) create mode 100644 apps/apollo-vertex/app/(preview)/preview/shell-minimal/loan-qc-dashboard.tsx create mode 100644 apps/apollo-vertex/public/UiPath.svg diff --git a/apps/apollo-vertex/app/(preview)/preview/shell-minimal/loan-qc-dashboard.tsx b/apps/apollo-vertex/app/(preview)/preview/shell-minimal/loan-qc-dashboard.tsx new file mode 100644 index 000000000..153f51a03 --- /dev/null +++ b/apps/apollo-vertex/app/(preview)/preview/shell-minimal/loan-qc-dashboard.tsx @@ -0,0 +1,200 @@ +"use client"; + +import { + AlertTriangle, + CheckCircle, + Clock, + FileSearch, + ShieldCheck, + TrendingUp, + XCircle, +} from "lucide-react"; +import { Badge } from "@/components/ui/badge"; +import { + Card, + CardContent, + CardHeader, + CardTitle, +} from "@/components/ui/card"; +import { Progress } from "@/components/ui/progress"; +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/components/ui/table"; + +const kpis = [ + { label: "Loans Reviewed", value: "3,842", icon: FileSearch, change: "+18%" }, + { label: "Pending QC", value: "127", icon: Clock, change: "-8%" }, + { label: "Compliance Rate", value: "99.1%", icon: ShieldCheck, change: "+0.3%" }, + { label: "Defect Rate", value: "0.9%", icon: TrendingUp, change: "-0.2%" }, +]; + +const loans = [ + { id: "LN-8842", borrower: "Martinez Holdings LLC", amount: "$1,250,000", type: "Commercial", status: "Passed" as const, date: "Feb 25, 2026" }, + { id: "LN-8841", borrower: "Sarah Chen", amount: "$485,000", type: "Residential", status: "Flagged" as const, date: "Feb 25, 2026" }, + { id: "LN-8840", borrower: "Greenfield Dev Corp", amount: "$3,200,000", type: "Construction", status: "In Review" as const, date: "Feb 24, 2026" }, + { id: "LN-8839", borrower: "James & Linda Park", amount: "$320,000", type: "Residential", status: "Passed" as const, date: "Feb 24, 2026" }, + { id: "LN-8838", borrower: "NovaTech Industries", amount: "$890,000", type: "Commercial", status: "Failed" as const, date: "Feb 23, 2026" }, + { id: "LN-8837", borrower: "Riverside Properties", amount: "$2,100,000", type: "Commercial", status: "Passed" as const, date: "Feb 23, 2026" }, +]; + +const statusVariant: Record = { + Passed: "default", + "In Review": "secondary", + Failed: "destructive", + Flagged: "outline", +}; + +const statusIcon: Record = { + Passed: CheckCircle, + "In Review": Clock, + Failed: XCircle, + Flagged: AlertTriangle, +}; + +const complianceChecks = [ + { label: "Income Verification", pass: 98 }, + { label: "Credit Score Threshold", pass: 96 }, + { label: "Debt-to-Income Ratio", pass: 91 }, + { label: "Collateral Appraisal", pass: 87 }, + { label: "Document Completeness", pass: 94 }, +]; + +const recentFindings = [ + { text: "LN-8838 — missing employment verification letter", time: "1 hr ago", severity: "high" as const }, + { text: "LN-8841 — DTI ratio exceeds threshold (43.2%)", time: "2 hrs ago", severity: "medium" as const }, + { text: "Batch QC completed — 156 loans, 2 flagged", time: "4 hrs ago", severity: "low" as const }, + { text: "LN-8835 — appraisal gap identified ($12K)", time: "6 hrs ago", severity: "medium" as const }, +]; + +const severityColor: Record = { + high: "bg-destructive", + medium: "bg-warning", + low: "bg-primary", +}; + +export function LoanQcDashboard({ visible }: { visible: boolean }) { + if (!visible) return null; + + return ( +
+ {/* Header */} +
+

Loan Processing QC

+

+ Quality control and compliance monitoring for loan origination +

+
+ + {/* KPI Cards */} +
+ {kpis.map((kpi) => ( + + +
+ + {kpi.label} + + +
+ + +
{kpi.value}
+

+ {kpi.change} from last week +

+ + + ))} +
+ + {/* Loans Table */} + + + Recent QC Reviews + + + + + + Loan ID + Borrower + Amount + Type + Status + Date + + + + {loans.map((loan) => { + const StatusIcon = statusIcon[loan.status]; + return ( + + {loan.id} + {loan.borrower} + {loan.amount} + {loan.type} + + + + {loan.status} + + + {loan.date} + + ); + })} + +
+ + + + {/* Bottom Row */} +
+ {/* Compliance Checks */} + + + Compliance Pass Rates + + +
+ {complianceChecks.map((check) => ( +
+
+ {check.label} + {check.pass}% +
+ +
+ ))} +
+ + + + {/* Recent Findings */} + + + Recent Findings + + +
+ {recentFindings.map((finding, i) => ( +
+
+
+

{finding.text}

+

{finding.time}

+
+
+ ))} +
+ + +
+
+ ); +} diff --git a/apps/apollo-vertex/app/(preview)/preview/shell-minimal/page.tsx b/apps/apollo-vertex/app/(preview)/preview/shell-minimal/page.tsx index 89edc929c..cf87403a9 100644 --- a/apps/apollo-vertex/app/(preview)/preview/shell-minimal/page.tsx +++ b/apps/apollo-vertex/app/(preview)/preview/shell-minimal/page.tsx @@ -1,7 +1,44 @@ "use client"; +import { Eye, EyeOff } from "lucide-react"; +import { useState } from "react"; import { ShellTemplate } from "@/templates/ShellTemplate"; +import { LoanQcDashboard } from "./loan-qc-dashboard"; + +function VisibilityToggle({ + visible, + onToggle, +}: { + visible: boolean; + onToggle: () => void; +}) { + const Icon = visible ? Eye : EyeOff; + + return ( + + ); +} export default function ShellMinimalPreviewPage() { - return ; + const [contentVisible, setContentVisible] = useState(true); + + return ( + setContentVisible((v) => !v)} + /> + } + > + + + ); } diff --git a/apps/apollo-vertex/app/(preview)/preview/shell/invoice-dashboard.tsx b/apps/apollo-vertex/app/(preview)/preview/shell/invoice-dashboard.tsx index df9dc5e68..bf3520c25 100644 --- a/apps/apollo-vertex/app/(preview)/preview/shell/invoice-dashboard.tsx +++ b/apps/apollo-vertex/app/(preview)/preview/shell/invoice-dashboard.tsx @@ -5,11 +5,9 @@ import { Clock, FileText, AlertTriangle, - Plus, TrendingUp, } from "lucide-react"; import { Badge } from "@/components/ui/badge"; -import { Button } from "@/components/ui/button"; import { Card, CardContent, @@ -70,25 +68,19 @@ export function InvoiceDashboard({ visible }: { visible: boolean }) { if (!visible) return null; return ( -
+
{/* Header */} -
-
-

Invoice Processing

-

- Monitor and manage invoice automation workflows -

-
- +
+

Invoice Processing

+

+ Monitor and manage invoice automation workflows +

{/* KPI Cards */} -
+
{kpis.map((kpi) => ( - +
@@ -108,7 +100,7 @@ export function InvoiceDashboard({ visible }: { visible: boolean }) {
{/* Invoices Table */} - + Recent Invoices @@ -143,7 +135,7 @@ export function InvoiceDashboard({ visible }: { visible: boolean }) { {/* Bottom Row */}
{/* Processing Activity */} - + Processing Activity @@ -163,7 +155,7 @@ export function InvoiceDashboard({ visible }: { visible: boolean }) { {/* Recent Activity */} - + Recent Activity @@ -184,7 +176,7 @@ export function InvoiceDashboard({ visible }: { visible: boolean }) {
{/* Processing Pipeline */} - + Processing Pipeline diff --git a/apps/apollo-vertex/locales/en.json b/apps/apollo-vertex/locales/en.json index d12c3aac5..b0944d477 100644 --- a/apps/apollo-vertex/locales/en.json +++ b/apps/apollo-vertex/locales/en.json @@ -25,6 +25,7 @@ "changes_apply_instantly": "Changes apply instantly", "click_me": "Click me", "close": "Close", + "close_sidebar": "Close sidebar", "copy_payment_id": "Copy payment ID", "custom": "Custom", "dark": "Dark", @@ -41,6 +42,7 @@ "hide": "Hide", "import": "Import", "info": "Info", + "language": "Language", "light": "Light", "light_mode": "Light Mode", "load_from_preset": "Load from preset:", @@ -54,6 +56,7 @@ "no_results": "No results.", "of": "of", "open_menu": "Open menu", + "open_sidebar": "Open sidebar", "outline": "Outline", "page": "Page", "preview": "Preview", diff --git a/apps/apollo-vertex/public/UiPath.svg b/apps/apollo-vertex/public/UiPath.svg new file mode 100644 index 000000000..92eb9870f --- /dev/null +++ b/apps/apollo-vertex/public/UiPath.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/apps/apollo-vertex/registry/card/card.tsx b/apps/apollo-vertex/registry/card/card.tsx index 4f880247e..bd9db2e5e 100644 --- a/apps/apollo-vertex/registry/card/card.tsx +++ b/apps/apollo-vertex/registry/card/card.tsx @@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
void; +}) { + const { t } = useTranslation(); + const [hovered, setHovered] = useState(false); + + return ( + + + + + + + {t("open_sidebar")} + + + + ); +} + export const Company = ({ companyName, productName, companyLogo, }: CompanyProps) => { + const { t } = useTranslation(); const [isCollapsed, setIsCollapsed] = useLocalStorage( "sidebar-collapsed", false, ); const iconElement = ( {companyLogo ? ( {companyLogo.alt} ) : ( - + )} ); return ( -
+
{isCollapsed ? ( - - - - - - -
- {companyName} - {productName} -
- - - + setIsCollapsed(false)} + /> ) : ( iconElement )} @@ -92,7 +153,7 @@ export const Company = ({ exit="exit" transition={fastFadeTransition} > - + {companyName} @@ -116,14 +177,22 @@ export const Company = ({ exit="exit" transition={fastFadeTransition} > - + + + + + + + {t("close_sidebar")} + + + )} diff --git a/apps/apollo-vertex/registry/shell/shell-layout.tsx b/apps/apollo-vertex/registry/shell/shell-layout.tsx index 264e868d9..bf04aad18 100644 --- a/apps/apollo-vertex/registry/shell/shell-layout.tsx +++ b/apps/apollo-vertex/registry/shell/shell-layout.tsx @@ -11,146 +11,74 @@ interface ShellLayoutProps { variant?: "minimal"; companyLogo?: CompanyLogo; sidebarActions?: ReactNode; + headerActions?: ReactNode; } function DarkGradientBackground() { return ( -
- {/* ellipse 1 - top left */} -
- - - - - - - - - - - + /> - {/* Ellipse 2 - center */} + {/* Organic shape — upper left indigo (wide, stretched) */}
- {/* ellipse 3 - bottom right */} - + /> - {/* Ellipse 4 - top right */} + {/* Organic shape — lower right cyan (stretched horizontal) */}
- {/* Noise overlay to reduce banding */} + {/* Grain texture */}
- {/* ellipse 1 - top left */} -
+ + {/* Organic shape — upper left soft periwinkle (wide, stretched) */} +
- - - - - - - - - - - + /> - {/* ellipse 2 - center */} + {/* Organic shape — center lavender (oblong, diagonal) */}
- {/* ellipse 3 - top right */} + {/* Organic shape — lower right aqua (stretched horizontal) */}
- - {/* Noise overlay to reduce banding */} -
); } @@ -279,18 +164,21 @@ export function ShellLayout({ variant, companyLogo, sidebarActions, + headerActions, }: PropsWithChildren) { if (variant === "minimal") { return ( -
- -
+
+
+ +
{children}
@@ -300,7 +188,7 @@ export function ShellLayout({ } return ( -
+
{ return (
-
+
{companyLogo ? ( {companyLogo.alt} ) : ( -
+ )}
- + {companyName} {productName} diff --git a/apps/apollo-vertex/registry/shell/shell-nav-item.tsx b/apps/apollo-vertex/registry/shell/shell-nav-item.tsx index d5c7af1a4..11c6212e0 100644 --- a/apps/apollo-vertex/registry/shell/shell-nav-item.tsx +++ b/apps/apollo-vertex/registry/shell/shell-nav-item.tsx @@ -38,7 +38,7 @@ export const NavItem = ({ to, icon: Icon, text }: NavItemProps) => { isCollapsed ? "w-8 justify-center" : "pr-3", isActive ? "bg-sidebar-accent text-sidebar-accent-foreground" - : "text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground", + : "text-sidebar-foreground/80 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground", )} > { const [isCollapsed] = useLocalStorage("sidebar-collapsed", false); - const sidebarWidth = isCollapsed ? "w-[48px]" : "w-[264px]"; + const sidebarWidth = isCollapsed ? "w-16" : "w-[280px]"; if (variant === "minimal") { return ( -
+
-
@@ -63,10 +62,10 @@ export const Sidebar = ({ -