ankhbayar/Assist_Design
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Refactor UI components for improved styling and consistency

Browse Source 
- Updated global styles to enhance color usage and contrast across the application.
- Refined input components for better accessibility and visual feedback.
- Enhanced layout components with consistent padding and margins for a cleaner look.
- Improved card and button styles to align with the new design tokens.
- Standardized text colors and hover effects for better user interaction.
This commit is contained in:
barsa 2025-12-16 16:08:17 +09:00
parent b5c917be33
commit 9d6c7dcde0
52 changed files with 1329 additions and 1540 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
apps/portal/src/app/globals.css
View File

@ -4,37 +4,38 @@
@import "../styles/utilities.css";
@import "../styles/responsive.css";
@custom-variant dark (&:is(.dark *));
:root {
--radius: 0.625rem;
/* Core neutrals (light) */
--background: oklch(0.98 0 0);
/* Background and cards are both white for clean look */
--background: oklch(1 0 0); /* pure white for main content */
--foreground: oklch(0.16 0 0);
--card: var(--background);
--card: oklch(1 0 0); /* pure white for cards */
--card-foreground: var(--foreground);
--popover: var(--background);
--card-muted: oklch(0.98 0.003 250); /* subtle gray for nested/muted cards */
--popover: oklch(1 0 0);
--popover-foreground: var(--foreground);
/* Primary brand (azure) */
--primary: oklch(0.62 0.17 255);
/* Primary brand - matches logo cyan blue */
--primary: oklch(0.68 0.14 220); /* bright cyan blue from logo */
--primary-foreground: oklch(0.99 0 0);
/* Interaction shades */
--primary-hover: oklch(0.58 0.17 255);
--primary-active: oklch(0.54 0.17 255);
--primary-hover: oklch(0.63 0.14 220);
--primary-active: oklch(0.58 0.14 220);
/* Subtle surfaces & text */
--secondary: oklch(0.93 0 0);
--secondary: oklch(0.95 0.003 250); /* subtle cool gray */
--secondary-foreground: oklch(0.29 0 0);
--muted: oklch(0.95 0 0);
--muted-foreground: oklch(0.55 0 0);
--muted: oklch(0.96 0.003 250); /* subtle cool gray for surfaces */
--muted-foreground: oklch(0.5 0 0);
/* Light accent (tinted, not a second brand) */
--accent: oklch(0.94 0.03 245);
/* Light accent (tinted with brand) */
--accent: oklch(0.95 0.05 220); /* light cyan tint */
--accent-foreground: var(--foreground);
/* Feedback (now with full semantic set) */
@ -50,33 +51,33 @@
--warning-foreground: oklch(0.16 0 0);
--warning-soft: oklch(0.96 0.07 90);
--info: oklch(0.64 0.16 255);
--info: oklch(0.68 0.14 220); /* matches primary */
--info-foreground: oklch(0.99 0 0);
--info-soft: oklch(0.95 0.05 255);
--info-soft: oklch(0.95 0.06 220);
/* UI chrome */
--border: oklch(0.90 0 0);
--border-muted: oklch(0.88 0 0);
--input: var(--border);
--ring: oklch(0.68 0.16 255);
--border: oklch(0.9 0 0);
--border-muted: oklch(0.92 0 0);
--input: oklch(0.88 0 0); /* slightly darker for inputs */
--ring: oklch(0.72 0.12 220);
--ring-subtle: color-mix(in oklch, var(--ring) 45%, transparent);
/* Charts */
--chart-1: oklch(0.62 0.17 255);
--chart-2: oklch(0.66 0.15 202);
--chart-1: oklch(0.68 0.14 220); /* cyan from logo */
--chart-2: oklch(0.28 0.1 265); /* navy from logo */
--chart-3: oklch(0.64 0.19 147);
--chart-4: oklch(0.70 0.16 82);
--chart-4: oklch(0.7 0.16 82);
--chart-5: oklch(0.68 0.16 28);
/* Sidebar */
--sidebar: var(--background);
--sidebar-foreground: var(--foreground);
--sidebar-primary: var(--primary);
--sidebar-primary-foreground: var(--primary-foreground);
--sidebar-accent: var(--secondary);
--sidebar-accent-foreground: var(--secondary-foreground);
--sidebar-border: var(--border);
--sidebar-ring: var(--ring);
/* Sidebar - Brand navy blue from logo */
--sidebar: oklch(0.28 0.1 265); /* deep navy blue from logo */
--sidebar-foreground: oklch(1 0 0); /* pure white text */
--sidebar-primary: oklch(1 0 0); /* white for emphasis */
--sidebar-primary-foreground: oklch(0.28 0.1 265);
--sidebar-accent: oklch(0.35 0.09 265); /* lighter navy for hover */
--sidebar-accent-foreground: oklch(1 0 0);
--sidebar-border: oklch(0.35 0.08 265); /* lighter navy border */
--sidebar-ring: oklch(0.72 0.12 220);
}
.dark {
@ -86,28 +87,29 @@
--card: oklch(0.18 0 0);
--card-foreground: var(--foreground);
--card-muted: oklch(0.22 0 0); /* subtle lighter gray for nested cards */
--popover: oklch(0.18 0 0);
--popover-foreground: var(--foreground);
/* Primary brand (slightly lighter for dark) */
--primary: oklch(0.74 0.16 255);
/* Primary brand - lighter cyan for dark mode */
--primary: oklch(0.75 0.12 220);
--primary-foreground: oklch(0.15 0 0);
--primary-hover: oklch(0.70 0.16 255);
--primary-active: oklch(0.66 0.16 255);
--primary-hover: oklch(0.7 0.12 220);
--primary-active: oklch(0.65 0.12 220);
/* Subtle surfaces & text */
--secondary: oklch(0.22 0 0);
--secondary-foreground: oklch(0.90 0 0);
--secondary-foreground: oklch(0.9 0 0);
--muted: oklch(0.25 0 0);
--muted-foreground: oklch(0.74 0 0);
/* Accent (tinted) */
--accent: oklch(0.24 0.02 245);
/* Accent (tinted with brand) */
--accent: oklch(0.24 0.04 220);
--accent-foreground: oklch(0.92 0 0);
/* Feedback */
--destructive: oklch(0.70 0.21 27);
--destructive: oklch(0.7 0.21 27);
--destructive-foreground: oklch(0.15 0 0);
--destructive-soft: oklch(0.25 0.05 27);
@ -119,32 +121,32 @@
--warning-foreground: oklch(0.15 0 0);
--warning-soft: oklch(0.26 0.07 90);
--info: oklch(0.78 0.15 255);
--info: oklch(0.75 0.12 220);
--info-foreground: oklch(0.15 0 0);
--info-soft: oklch(0.24 0.05 255);
--info-soft: oklch(0.24 0.05 220);
/* UI chrome */
--border: oklch(0.32 0 0);
--border-muted: oklch(0.28 0 0);
--input: var(--border);
--ring: oklch(0.78 0.13 255);
--input: oklch(0.35 0 0); /* slightly lighter for inputs */
--ring: oklch(0.78 0.1 220);
--ring-subtle: color-mix(in oklch, var(--ring) 40%, transparent);
/* Charts */
--chart-1: oklch(0.74 0.16 255);
--chart-2: oklch(0.72 0.14 202);
--chart-3: oklch(0.70 0.18 147);
--chart-1: oklch(0.75 0.12 220); /* cyan from logo */
--chart-2: oklch(0.45 0.08 265); /* navy from logo */
--chart-3: oklch(0.7 0.18 147);
--chart-4: oklch(0.74 0.17 82);
--chart-5: oklch(0.72 0.17 28);
/* Sidebar */
--sidebar: var(--card);
--sidebar-foreground: var(--foreground);
--sidebar-primary: var(--primary);
--sidebar-primary-foreground: var(--primary-foreground);
--sidebar-accent: var(--secondary);
--sidebar-accent-foreground: var(--secondary-foreground);
--sidebar-border: var(--border);
/* Sidebar - Dark navy from logo */
--sidebar: oklch(0.2 0.08 265); /* darker navy */
--sidebar-foreground: oklch(1 0 0); /* pure white */
--sidebar-primary: oklch(1 0 0);
--sidebar-primary-foreground: oklch(0.2 0.08 265);
--sidebar-accent: oklch(0.28 0.07 265); /* lighter on hover */
--sidebar-accent-foreground: oklch(1 0 0);
--sidebar-border: oklch(0.28 0.06 265);
--sidebar-ring: var(--ring);
}
@ -154,6 +156,7 @@
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-card-muted: var(--card-muted);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
@ -224,11 +227,15 @@
@theme inline {
--animate-aurora: aurora 60s linear infinite;
@keyframes aurora {
from {
backgroundPosition: 50% 50%, 50% 50%;
from {
backgroundposition:
50% 50%,
50% 50%;
}
to {
backgroundPosition: 350% 50%, 350% 50%;
to {
backgroundposition:
350% 50%,
350% 50%;
}
}
}
@ -240,4 +247,4 @@
body {
@apply bg-background text-foreground;
}
}
}

9
apps/portal/src/components/atoms/input.tsx
View File

@ -14,9 +14,14 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
<input
type={type}
className={cn(
"flex h-10 w-full rounded-md border border-input bg-background text-foreground px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
"flex h-11 w-full rounded-lg border border-border bg-card text-foreground px-4 py-2.5 text-sm shadow-sm ring-offset-background transition-all duration-200",
"file:border-0 file:bg-transparent file:text-sm file:font-medium",
"placeholder:text-muted-foreground",
"hover:border-muted-foreground/50",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-0 focus-visible:border-primary",
"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-border",
isInvalid &&
"border-destructive focus-visible:ring-destructive focus-visible:ring-offset-2",
"border-destructive hover:border-destructive focus-visible:ring-destructive/40 focus-visible:border-destructive",
className
)}
aria-invalid={isInvalid || undefined}

2
apps/portal/src/components/molecules/FormField/FormField.tsx
View File

@ -56,7 +56,7 @@ const FormField = forwardRef<HTMLInputElement, FormFieldProps>(
>
<span>{label}</span>
{required ? (
<span aria-hidden="true" className="ml-1 text-red-600">
<span aria-hidden="true" className="ml-1 text-destructive">
*
</span>
) : null}

82
apps/portal/src/components/molecules/SearchFilterBar/SearchFilterBar.tsx
View File

@ -28,50 +28,46 @@ export function SearchFilterBar({
children,
}: SearchFilterBarProps) {
return (
<div className="bg-card text-card-foreground border border-border shadow-[var(--cp-shadow-1)] rounded-lg mb-6">
<div className="p-6 border-b border-border">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
{/* Search */}
<div className="relative max-w-xs">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<MagnifyingGlassIcon className="h-5 w-5 text-muted-foreground/70" />
</div>
<input
type="text"
className="block w-full pl-10 pr-3 py-2 border border-input rounded-md leading-5 bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring transition-colors"
placeholder={searchPlaceholder}
value={searchValue}
onChange={e => onSearchChange(e.target.value)}
/>
</div>
{/* Filters and Actions */}
<div className="flex items-center gap-4">
{/* Status Filter */}
{filterOptions.length > 0 && onFilterChange && filterValue !== undefined && (
<div className="relative">
<select
value={filterValue}
onChange={e => onFilterChange(e.target.value)}
className="block w-40 pl-3 pr-8 py-2 text-base border border-input focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring sm:text-sm rounded-md appearance-none bg-background text-foreground transition-colors"
aria-label={filterLabel}
>
{filterOptions.map(option => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</select>
<div className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<FunnelIcon className="h-4 w-4 text-muted-foreground/70" />
</div>
</div>
)}
{/* Additional children (custom actions) */}
{children}
</div>
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
{/* Search */}
<div className="relative flex-1 max-w-sm">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<MagnifyingGlassIcon className="h-5 w-5 text-muted-foreground" />
</div>
<input
type="text"
className="block w-full pl-10 pr-3 py-2.5 border border-border rounded-lg leading-5 bg-card text-foreground shadow-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-primary transition-colors"
placeholder={searchPlaceholder}
value={searchValue}
onChange={e => onSearchChange(e.target.value)}
/>
</div>
{/* Filters and Actions */}
<div className="flex items-center gap-3">
{/* Status Filter */}
{filterOptions.length > 0 && onFilterChange && filterValue !== undefined && (
<div className="relative">
<select
value={filterValue}
onChange={e => onFilterChange(e.target.value)}
className="block w-40 pl-3 pr-8 py-2.5 text-sm border border-border focus:outline-none focus:ring-2 focus:ring-ring focus:border-primary rounded-lg appearance-none bg-card text-foreground shadow-sm cursor-pointer transition-colors"
aria-label={filterLabel}
>
{filterOptions.map(option => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</select>
<div className="absolute inset-y-0 right-0 flex items-center pr-2.5 pointer-events-none">
<FunnelIcon className="h-4 w-4 text-muted-foreground" />
</div>
</div>
)}
{/* Additional children (custom actions) */}
{children}
</div>
</div>
);

25
apps/portal/src/components/molecules/SubCard/SubCard.tsx
View File

@ -1,4 +1,5 @@
import { forwardRef, type ReactNode } from "react";
import { cn } from "@/lib/utils";
export interface SubCardProps {
title?: string;
@ -10,6 +11,8 @@ export interface SubCardProps {
className?: string;
headerClassName?: string;
bodyClassName?: string;
/** Enable hover effects for interactive cards */
interactive?: boolean;
}
export const SubCard = forwardRef<HTMLDivElement, SubCardProps>(
@ -24,20 +27,24 @@ export const SubCard = forwardRef<HTMLDivElement, SubCardProps>(
className = "",
headerClassName = "",
bodyClassName = "",
interactive = false,
},
ref
) => (
<div
ref={ref}
className={`border-[var(--cp-card-border)] bg-card text-card-foreground shadow-[var(--cp-card-shadow)] rounded-[var(--cp-card-radius)] p-[var(--cp-card-padding)] transition-shadow duration-[var(--cp-duration-normal)] hover:shadow-[var(--cp-card-shadow-lg)] ${className}`}
className={cn(
"border border-border bg-card text-card-foreground shadow-sm rounded-2xl p-5 sm:p-6",
interactive &&
"transition-all duration-200 hover:shadow-md hover:border-border/80 cursor-pointer",
className
)}
>
{header ? (
<div className={`${headerClassName || "mb-[var(--cp-space-lg)]"}`}>{header}</div>
<div className={`${headerClassName || "mb-5"}`}>{header}</div>
) : title ? (
<div
className={`flex items-center justify-between mb-[var(--cp-space-lg)] ${headerClassName}`}
>
<div className="flex items-center gap-[var(--cp-space-sm)]">
<div className={`flex items-center justify-between mb-5 ${headerClassName}`}>
<div className="flex items-center gap-3">
{icon && <div className="text-primary">{icon}</div>}
<h3 className="text-lg font-semibold text-foreground">{title}</h3>
</div>
@ -45,11 +52,7 @@ export const SubCard = forwardRef<HTMLDivElement, SubCardProps>(
</div>
) : null}
<div className={bodyClassName}>{children}</div>
{footer ? (
<div className="mt-[var(--cp-space-lg)] pt-[var(--cp-space-lg)] border-t border-border">
{footer}
</div>
) : null}
{footer ? <div className="mt-5 pt-5 border-t border-border/60">{footer}</div> : null}
</div>
)
);

2
apps/portal/src/components/organisms/AppShell/AppShell.tsx
View File

@ -180,7 +180,7 @@ export function AppShell({ children }: AppShellProps) {
</div>
{/* Main content */}
<div className="flex flex-col w-0 flex-1 overflow-hidden">
<div className="flex flex-col w-0 flex-1 overflow-hidden bg-background">
{/* Header */}
<Header
onMenuClick={() => setSidebarOpen(true)}

21
apps/portal/src/components/organisms/AppShell/Header.tsx
View File

@ -17,12 +17,18 @@ export const Header = memo(function Header({ onMenuClick, user, profileReady }:
"Account"
: user?.email?.split("@")[0] || "Account";
// Get initials for avatar
const initials =
profileReady && user?.firstName && user?.lastName
? `${user.firstName[0]}${user.lastName[0]}`.toUpperCase()
: displayName.slice(0, 2).toUpperCase();
return (
<div className="bg-[var(--cp-header-bg)] border-b border-[var(--cp-header-border)] backdrop-blur-sm">
<div className="bg-[var(--cp-header-bg)] border-b border-[var(--cp-header-border)]/50 backdrop-blur-xl">
<div className="flex items-center h-16 gap-3 px-4 sm:px-6">
<button
type="button"
className="md:hidden p-2 rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted transition-colors duration-[var(--cp-duration-normal)] focus:outline-none focus:ring-2 focus:ring-primary/20"
className="md:hidden p-2 rounded-xl text-muted-foreground hover:text-foreground hover:bg-muted/60 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary/20"
onClick={onMenuClick}
aria-label="Open navigation"
>
@ -31,12 +37,12 @@ export const Header = memo(function Header({ onMenuClick, user, profileReady }:
<div className="flex-1" />
<div className="flex items-center gap-2">
<div className="flex items-center gap-1">
<Link
href="/support"
prefetch
aria-label="Help"
className="hidden sm:inline-flex p-2 rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
className="hidden sm:inline-flex p-2.5 rounded-xl text-muted-foreground hover:text-foreground hover:bg-muted/60 transition-all duration-200"
title="Support Center"
>
<QuestionMarkCircleIcon className="h-5 w-5" />
@ -45,9 +51,12 @@ export const Header = memo(function Header({ onMenuClick, user, profileReady }:
<Link
href="/account"
prefetch
className="hidden sm:inline-flex items-center px-2.5 py-1.5 text-sm font-medium text-foreground/80 hover:text-foreground hover:bg-muted rounded-lg transition-colors duration-[var(--cp-duration-normal)]"
className="group flex items-center gap-2.5 px-3 py-1.5 text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted/60 rounded-xl transition-all duration-200"
>
{displayName}
<div className="h-7 w-7 rounded-lg bg-gradient-to-br from-primary to-primary-hover flex items-center justify-center text-xs font-bold text-primary-foreground shadow-sm">
{initials}
</div>
<span className="hidden sm:inline">{displayName}</span>
</Link>
</div>
</div>

60
apps/portal/src/components/organisms/AppShell/Sidebar.tsx
View File

@ -23,16 +23,14 @@ export const Sidebar = memo(function Sidebar({
}: SidebarProps) {
return (
<div className="flex flex-col h-0 flex-1 bg-[var(--cp-sidebar-bg)]">
<div className="flex items-center flex-shrink-0 h-16 px-6 border-b border-[var(--cp-sidebar-border)]">
<div className="flex items-center flex-shrink-0 h-16 px-5 border-b border-[var(--cp-sidebar-border)]">
<div className="flex items-center space-x-3">
<div className="p-2 bg-card rounded-xl border border-[var(--cp-sidebar-border)] shadow-[var(--cp-shadow-1)]">
<Logo size={20} />
<div className="h-10 w-10 bg-white rounded-xl shadow-lg shadow-black/10 flex items-center justify-center">
<Logo size={26} />
</div>
<div>
<span className="text-base font-bold text-[var(--cp-sidebar-text)]">
Assist Solutions
</span>
<p className="text-xs text-[var(--cp-sidebar-text)]/60">Customer Portal</p>
<span className="text-base font-bold text-white">Assist Solutions</span>
<p className="text-xs text-white/70 font-medium">Customer Portal</p>
</div>
</div>
</div>
@ -89,32 +87,30 @@ const NavigationItem = memo(function NavigationItem({
<button
onClick={() => toggleExpanded(item.name)}
aria-expanded={isExpanded}
className={`group w-full flex items-center px-3 py-2.5 text-left text-sm font-medium rounded-lg transition-all duration-200 relative ${
className={`group w-full flex items-center px-3 py-2.5 text-left text-sm font-semibold rounded-lg transition-all duration-200 relative ${
isActive
? "text-[var(--cp-sidebar-active-text)] bg-[var(--cp-sidebar-active-bg)]"
: "text-[var(--cp-sidebar-text)] hover:text-[var(--cp-sidebar-text-hover)] hover:bg-[var(--cp-sidebar-hover-bg)]"
} focus:outline-none focus:ring-2 focus:ring-primary/20`}
? "text-white bg-white/20 shadow-sm"
: "text-white/90 hover:text-white hover:bg-white/10"
} focus:outline-none focus:ring-2 focus:ring-white/30`}
>
{isActive && (
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-6 bg-primary rounded-r-full" />
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-6 bg-white rounded-r-full" />
)}
<div
className={`p-1.5 rounded-md mr-3 transition-colors duration-200 ${
isActive
? "bg-primary/10 text-primary"
: "text-[var(--cp-sidebar-text)]/70 group-hover:text-[var(--cp-sidebar-text-hover)] group-hover:bg-[var(--cp-sidebar-hover-bg)]"
isActive ? "bg-white/20 text-white" : "text-white/80 group-hover:text-white"
}`}
>
<item.icon className="h-5 w-5" />
</div>
<span className="flex-1 font-medium">{item.name}</span>
<span className="flex-1">{item.name}</span>
<svg
className={`h-4 w-4 transition-transform duration-200 ease-out ${
isExpanded ? "rotate-90" : ""
} ${isActive ? "text-primary" : "text-[var(--cp-sidebar-text)]/50"}`}
} ${isActive ? "text-white" : "text-white/60 group-hover:text-white/80"}`}
viewBox="0 0 20 20"
fill="currentColor"
>
@ -131,7 +127,7 @@ const NavigationItem = memo(function NavigationItem({
isExpanded ? "max-h-96 opacity-100" : "max-h-0 opacity-0"
}`}
>
<div className="mt-1 ml-6 space-y-0.5 border-l border-[var(--cp-sidebar-border)] pl-4">
<div className="mt-1 ml-6 space-y-0.5 border-l border-white/30 pl-4">
{item.children?.map((child: NavigationChild) => {
const isChildActive = pathname === (child.href || "").split(/[?#]/)[0];
return (
@ -146,21 +142,19 @@ const NavigationItem = memo(function NavigationItem({
}}
className={`group flex items-center px-3 py-2 text-sm rounded-md transition-all duration-200 relative ${
isChildActive
? "text-[var(--cp-sidebar-active-text)] bg-[var(--cp-sidebar-active-bg)] font-medium"
: "text-[var(--cp-sidebar-text)]/80 hover:text-[var(--cp-sidebar-text-hover)] hover:bg-[var(--cp-sidebar-hover-bg)]"
? "text-white bg-white/20 font-semibold"
: "text-white/80 hover:text-white hover:bg-white/10 font-medium"
}`}
title={child.tooltip || child.name}
aria-current={isChildActive ? "page" : undefined}
>
{isChildActive && (
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-0.5 h-4 bg-primary rounded-full" />
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-0.5 h-4 bg-white rounded-full" />
)}
<div
className={`w-1.5 h-1.5 rounded-full mr-3 transition-colors duration-200 ${
isChildActive
? "bg-primary"
: "bg-[var(--cp-sidebar-text)]/30 group-hover:bg-[var(--cp-sidebar-text)]/50"
isChildActive ? "bg-white" : "bg-white/40 group-hover:bg-white/70"
}`}
/>
@ -178,9 +172,9 @@ const NavigationItem = memo(function NavigationItem({
return (
<button
onClick={handleLogout}
className="group w-full flex items-center px-3 py-2.5 text-sm font-medium text-destructive hover:bg-destructive-soft rounded-lg transition-colors duration-[var(--cp-duration-normal)] focus:outline-none focus:ring-2 focus:ring-destructive/20"
className="group w-full flex items-center px-3 py-2.5 text-sm font-semibold text-red-300 hover:text-red-100 hover:bg-red-500/25 rounded-lg transition-colors duration-[var(--cp-duration-normal)] focus:outline-none focus:ring-2 focus:ring-red-400/30"
>
<div className="p-1.5 rounded-md mr-3 text-destructive group-hover:bg-destructive-soft transition-colors duration-[var(--cp-duration-normal)]">
<div className="p-1.5 rounded-md mr-3 text-red-300 group-hover:text-red-100 transition-colors duration-[var(--cp-duration-normal)]">
<item.icon className="h-5 w-5" />
</div>
<span>{item.name}</span>
@ -197,22 +191,20 @@ const NavigationItem = memo(function NavigationItem({
void router.prefetch(item.href);
}
}}
className={`group w-full flex items-center px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 relative ${
className={`group w-full flex items-center px-3 py-2.5 text-sm font-semibold rounded-lg transition-all duration-200 relative ${
isActive
? "text-[var(--cp-sidebar-active-text)] bg-[var(--cp-sidebar-active-bg)]"
: "text-[var(--cp-sidebar-text)] hover:text-[var(--cp-sidebar-text-hover)] hover:bg-[var(--cp-sidebar-hover-bg)]"
} focus:outline-none focus:ring-2 focus:ring-primary/20`}
? "text-white bg-white/20 shadow-sm"
: "text-white/90 hover:text-white hover:bg-white/10"
} focus:outline-none focus:ring-2 focus:ring-white/30`}
aria-current={isActive ? "page" : undefined}
>
{isActive && (
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-6 bg-primary rounded-r-full" />
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-6 bg-white rounded-r-full" />
)}
<div
className={`p-1.5 rounded-md mr-3 transition-colors duration-200 ${
isActive
? "bg-primary/10 text-primary"
: "text-[var(--cp-sidebar-text)]/70 group-hover:text-[var(--cp-sidebar-text-hover)] group-hover:bg-[var(--cp-sidebar-hover-bg)]"
isActive ? "bg-white/20 text-white" : "text-white/80 group-hover:text-white"
}`}
>
<item.icon className="h-5 w-5" />

37
apps/portal/src/components/templates/AuthLayout/AuthLayout.tsx
View File

@ -22,36 +22,55 @@ export function AuthLayout({
backLabel = "Back to Home",
}: AuthLayoutProps) {
return (
<div className="w-full flex flex-col items-center py-[var(--cp-space-3xl)]">
<div className="w-full flex flex-col items-center">
<div className="w-full max-w-md">
{showBackButton && (
<div className="mb-6">
<Link
href={backHref}
className="inline-flex items-center text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
className="inline-flex items-center text-sm font-medium text-muted-foreground hover:text-foreground transition-colors group"
>
<ArrowLeftIcon className="h-4 w-4 mr-2" />
<ArrowLeftIcon className="h-4 w-4 mr-2 transition-transform group-hover:-translate-x-0.5" />
{backLabel}
</Link>
</div>
)}
<div className="text-center">
<div className="flex justify-center mb-8">
<Logo size={72} className="text-primary" />
<div className="flex justify-center mb-6">
<div className="relative">
<div className="absolute inset-0 bg-[#28A6E0]/15 blur-2xl rounded-full scale-[2]" />
<div className="relative h-[4.5rem] w-[4.5rem] rounded-2xl bg-white border border-border/50 flex items-center justify-center shadow-xl shadow-[#28A6E0]/15">
<Logo size={44} />
</div>
</div>
</div>
<h1 className="text-2xl sm:text-3xl font-bold tracking-tight text-foreground mb-3">
<h1 className="text-2xl sm:text-3xl font-bold tracking-tight text-foreground mb-2">
{title}
</h1>
{subtitle && (
<p className="text-base text-muted-foreground leading-relaxed">{subtitle}</p>
<p className="text-sm sm:text-base text-muted-foreground leading-relaxed max-w-sm mx-auto">
{subtitle}
</p>
)}
</div>
</div>
<div className="mt-8 w-full max-w-md">
<div className="bg-card text-card-foreground py-10 px-6 rounded-3xl border border-border shadow-[var(--cp-card-shadow-lg)] sm:px-12">
{children}
<div className="relative">
{/* Subtle gradient glow behind card */}
<div className="absolute -inset-1 bg-gradient-to-r from-primary/10 via-transparent to-primary/10 rounded-[1.75rem] blur-xl opacity-50" />
<div className="relative bg-card text-card-foreground py-10 px-6 rounded-2xl border border-border/60 shadow-xl shadow-black/5 sm:px-10 backdrop-blur-sm">
{children}
</div>
</div>
{/* Trust indicator */}
<div className="mt-6 text-center">
<p className="text-xs text-muted-foreground/60">
Secure login protected by SSL encryption
</p>
</div>
</div>
</div>

2
apps/portal/src/components/templates/PageLayout/PageLayout.tsx
View File

@ -63,7 +63,7 @@ export function PageLayout({
)}
{/* Header */}
<div className="mb-[var(--cp-space-2xl)] sm:mb-[var(--cp-space-3xl)]">
<div className="mb-[var(--cp-space-xl)] sm:mb-[var(--cp-space-2xl)] pb-[var(--cp-space-xl)] sm:pb-[var(--cp-space-2xl)] border-b border-border">
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-[var(--cp-space-lg)] sm:gap-[var(--cp-space-xl)]">
<div className="flex items-start min-w-0 flex-1">
{icon && (

43
apps/portal/src/components/templates/PublicShell/PublicShell.tsx
View File

@ -9,14 +9,20 @@ export interface PublicShellProps {
export function PublicShell({ children }: PublicShellProps) {
return (
<div className="min-h-screen flex flex-col bg-background text-foreground">
<header className="sticky top-0 z-40 border-b border-border bg-background/80 backdrop-blur-sm">
{/* Subtle background pattern */}
<div className="fixed inset-0 -z-10 overflow-hidden pointer-events-none">
<div className="absolute top-0 left-1/4 w-96 h-96 bg-primary/5 rounded-full blur-3xl" />
<div className="absolute bottom-0 right-1/4 w-96 h-96 bg-primary/5 rounded-full blur-3xl" />
</div>
<header className="sticky top-0 z-40 border-b border-border/50 bg-background/80 backdrop-blur-xl">
<div className="max-w-[var(--cp-page-max-width)] mx-auto px-[var(--cp-page-padding)] py-3 flex items-center justify-between gap-4">
<Link href="/" className="inline-flex items-center gap-3 min-w-0">
<span className="inline-flex items-center justify-center h-9 w-9 rounded-xl border border-border bg-card shadow-[var(--cp-shadow-1)]">
<Logo size={20} />
<Link href="/" className="inline-flex items-center gap-3 min-w-0 group">
<span className="inline-flex items-center justify-center h-11 w-11 rounded-xl bg-white border border-border/60 shadow-lg shadow-[#28A6E0]/10 transition-transform group-hover:scale-105">
<Logo size={28} />
</span>
<span className="min-w-0">
<span className="block text-sm font-semibold leading-tight truncate">
<span className="block text-base font-bold leading-tight truncate text-foreground">
Assist Solutions
</span>
<span className="block text-xs text-muted-foreground leading-tight truncate">
@ -28,13 +34,13 @@ export function PublicShell({ children }: PublicShellProps) {
<nav className="flex items-center gap-2">
<Link
href="/support"
className="hidden sm:inline-flex items-center rounded-lg px-3 py-2 text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
className="hidden sm:inline-flex items-center rounded-lg px-3 py-2 text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors"
>
Support
</Link>
<Link
href="/auth/login"
className="inline-flex items-center rounded-lg px-3 py-2 text-sm font-medium bg-primary text-primary-foreground hover:bg-primary-hover transition-colors"
className="inline-flex items-center rounded-lg px-4 py-2 text-sm font-medium bg-primary text-primary-foreground hover:bg-primary-hover shadow-sm shadow-primary/20 transition-all hover:shadow-md hover:shadow-primary/30"
>
Sign in
</Link>
@ -43,25 +49,34 @@ export function PublicShell({ children }: PublicShellProps) {
</header>
<main className="flex-1">
<div className="max-w-[var(--cp-page-max-width)] mx-auto px-[var(--cp-page-padding)] py-[var(--cp-space-3xl)]">
<div className="max-w-[var(--cp-page-max-width)] mx-auto px-[var(--cp-page-padding)] py-12 sm:py-16">
{children}
</div>
</main>
<footer className="border-t border-border bg-background">
<footer className="border-t border-border/50 bg-muted/30">
<div className="max-w-[var(--cp-page-max-width)] mx-auto px-[var(--cp-page-padding)] py-8">
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
<div className="text-sm text-muted-foreground">
© {new Date().getFullYear()} Assist Solutions
© {new Date().getFullYear()} Assist Solutions. All rights reserved.
</div>
<div className="flex items-center gap-4 text-sm">
<Link href="/support" className="text-muted-foreground hover:text-foreground">
<div className="flex items-center gap-6 text-sm">
<Link
href="/support"
className="text-muted-foreground hover:text-foreground transition-colors"
>
Support
</Link>
<Link href="#" className="text-muted-foreground hover:text-foreground">
<Link
href="#"
className="text-muted-foreground hover:text-foreground transition-colors"
>
Privacy
</Link>
<Link href="#" className="text-muted-foreground hover:text-foreground">
<Link
href="#"
className="text-muted-foreground hover:text-foreground transition-colors"
>
Terms
</Link>
</div>

28
apps/portal/src/features/account/components/AddressCard.tsx
View File

@ -33,16 +33,18 @@ export function AddressCard({
return (
<SubCard>
<div className="pb-5 border-b border-gray-200">
<div className="pb-5 border-b border-border/60">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-3">
<MapPinIcon className="h-6 w-6 text-blue-600" />
<h2 className="text-xl font-semibold text-gray-900">Address Information</h2>
<div className="h-10 w-10 rounded-xl bg-primary/10 flex items-center justify-center">
<MapPinIcon className="h-5 w-5 text-primary" />
</div>
<h2 className="text-lg font-semibold text-foreground">Address Information</h2>
</div>
{!isEditing && (
<button
onClick={onEdit}
className="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 transition-colors"
className="inline-flex items-center px-4 py-2 border border-border text-sm font-medium rounded-lg text-foreground bg-background hover:bg-muted transition-colors"
>
<PencilIcon className="h-4 w-4 mr-2" />
Edit
@ -55,12 +57,12 @@ export function AddressCard({
{isEditing ? (
<div className="space-y-6">
<AddressForm initialAddress={address} onChange={addr => onAddressChange(addr, true)} />
{error && <div className="text-sm text-red-600">{error}</div>}
<div className="flex items-center justify-end space-x-3 pt-4 border-t border-gray-200">
{error && <div className="text-sm text-destructive">{error}</div>}
<div className="flex items-center justify-end space-x-3 pt-4 border-t border-border/60">
<button
onClick={onCancel}
disabled={isSaving}
className="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 transition-colors"
className="inline-flex items-center px-4 py-2 border border-border text-sm font-medium rounded-lg text-foreground bg-background hover:bg-muted disabled:opacity-50 transition-colors"
>
<XMarkIcon className="h-4 w-4 mr-2" />
Cancel
@ -68,11 +70,11 @@ export function AddressCard({
<button
onClick={onSave}
disabled={isSaving}
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 disabled:opacity-50 transition-colors"
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg text-primary-foreground bg-primary hover:bg-primary-hover disabled:opacity-50 transition-colors shadow-sm"
>
{isSaving ? (
<>
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-primary-foreground mr-2"></div>
Saving...
</>
) : (
@ -85,15 +87,15 @@ export function AddressCard({
</div>
</div>
) : (
<div className="space-y-1 text-gray-900">
<div className="space-y-1.5 text-foreground">
{address.address1 && <p className="font-semibold text-base">{address.address1}</p>}
{address.address2 && <p className="text-gray-700">{address.address2}</p>}
{address.address2 && <p className="text-muted-foreground">{address.address2}</p>}
{(address.city || address.state || address.postcode) && (
<p className="text-gray-700">
<p className="text-muted-foreground">
{[address.city, address.state, address.postcode].filter(Boolean).join(", ")}
</p>
)}
{countryLabel && <p className="text-gray-600 font-medium">{countryLabel}</p>}
{countryLabel && <p className="text-muted-foreground font-medium">{countryLabel}</p>}
</div>
)}
</div>

18
apps/portal/src/features/account/views/ProfileContainer.tsx
View File

@ -125,7 +125,7 @@ export default function ProfileContainer() {
))}
<div className="sm:col-span-2">
<Skeleton className="h-4 w-28 mb-3" />
<div className="bg-muted rounded-lg p-4 border border-border">
<div className="bg-card rounded-lg p-4 border border-border shadow-sm">
<div className="flex items-center justify-between">
<Skeleton className="h-5 w-48" />
<Skeleton className="h-5 w-24" />
@ -152,7 +152,7 @@ export default function ProfileContainer() {
</div>
</div>
<div className="p-6">
<div className="bg-muted rounded-lg p-4 border border-border">
<div className="bg-card rounded-lg p-4 border border-border shadow-sm">
<div className="space-y-2">
<Skeleton className="h-4 w-60" />
<Skeleton className="h-4 w-48" />
@ -211,7 +211,7 @@ export default function ProfileContainer() {
<label className="block text-sm font-medium text-muted-foreground mb-2">
First Name
</label>
<div className="bg-muted rounded-lg p-4 border border-border">
<div className="bg-card rounded-lg p-4 border border-border shadow-sm">
<p className="text-base text-foreground font-medium">
{user?.firstname || (
<span className="text-muted-foreground italic">Not provided</span>
@ -226,7 +226,7 @@ export default function ProfileContainer() {
<label className="block text-sm font-medium text-muted-foreground mb-2">
Last Name
</label>
<div className="bg-muted rounded-lg p-4 border border-border">
<div className="bg-card rounded-lg p-4 border border-border shadow-sm">
<p className="text-base text-foreground font-medium">
{user?.lastname || (
<span className="text-muted-foreground italic">Not provided</span>
@ -249,7 +249,7 @@ export default function ProfileContainer() {
className="block w-full px-4 py-2.5 border border-input rounded-lg bg-background text-foreground shadow-[var(--cp-shadow-1)] focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring transition-colors"
/>
) : (
<div className="bg-muted rounded-lg p-4 border border-border">
<div className="bg-card rounded-lg p-4 border border-border shadow-sm">
<div className="flex items-center justify-between">
<p className="text-base text-foreground font-medium">{user?.email}</p>
</div>
@ -264,7 +264,7 @@ export default function ProfileContainer() {
<label className="block text-sm font-medium text-muted-foreground mb-2">
Customer Number
</label>
<div className="bg-muted rounded-lg p-4 border border-border">
<div className="bg-card rounded-lg p-4 border border-border shadow-sm">
<p className="text-base text-foreground font-medium">
{user?.sfNumber || (
<span className="text-muted-foreground italic">Not available</span>
@ -278,7 +278,7 @@ export default function ProfileContainer() {
<label className="block text-sm font-medium text-muted-foreground mb-2">
Date of Birth
</label>
<div className="bg-muted rounded-lg p-4 border border-border">
<div className="bg-card rounded-lg p-4 border border-border shadow-sm">
<p className="text-base text-foreground font-medium">
{user?.dateOfBirth || (
<span className="text-muted-foreground italic">Not provided</span>
@ -312,7 +312,7 @@ export default function ProfileContainer() {
<div>
<label className="block text-sm font-medium text-muted-foreground mb-2">Gender</label>
<div className="bg-muted rounded-lg p-4 border border-border">
<div className="bg-card rounded-lg p-4 border border-border shadow-sm">
<p className="text-base text-foreground font-medium">
{user?.gender || (
<span className="text-muted-foreground italic">Not provided</span>
@ -443,7 +443,7 @@ export default function ProfileContainer() {
) : (
<div>
{address.values.address1 || address.values.city ? (
<div className="bg-muted rounded-lg p-5 border border-border">
<div className="bg-card rounded-lg p-5 border border-border shadow-sm">
<div className="text-foreground space-y-1.5">
{address.values.address1 && (
<p className="font-medium text-base">{address.values.address1}</p>

10
apps/portal/src/features/auth/components/LoginForm/LoginForm.tsx
View File

@ -107,9 +107,9 @@ export function LoginForm({
checked={values.rememberMe}
onChange={e => setValue("rememberMe", e.target.checked)}
disabled={isSubmitting || loading}
className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded transition-colors"
className="h-4 w-4 text-primary focus:ring-primary border-border rounded transition-colors accent-primary"
/>
<label htmlFor="remember-me" className="ml-2 block text-sm text-gray-700">
<label htmlFor="remember-me" className="ml-2 block text-sm text-muted-foreground">
Remember me
</label>
</div>
@ -118,7 +118,7 @@ export function LoginForm({
<div className="text-sm">
<Link
href="/auth/forgot-password"
className="font-medium text-blue-600 hover:text-blue-500 transition-colors duration-200"
className="font-medium text-primary hover:text-primary-hover transition-colors duration-200"
>
Forgot your password?
</Link>
@ -140,11 +140,11 @@ export function LoginForm({
{showSignupLink && (
<div className="text-center">
<p className="text-sm text-gray-600">
<p className="text-sm text-muted-foreground">
Don&apos;t have an account?{" "}
<Link
href="/auth/signup"
className="font-medium text-blue-600 hover:text-blue-500 transition-colors duration-200"
className="font-medium text-primary hover:text-primary-hover transition-colors duration-200"
>
Sign up
</Link>

48
apps/portal/src/features/billing/components/InvoiceDetail/InvoiceItems.tsx
View File

@ -21,17 +21,15 @@ export function InvoiceItems({ items = [], currency }: InvoiceItemsProps) {
const hasLinkedItems = items.some(item => hasServiceConnection(item));
const hasOneTimeItems = items.some(item => !hasServiceConnection(item));
const renderItemContent = (item: InvoiceItem, index: number) => {
const renderItemContent = (item: InvoiceItem) => {
const isLinked = hasServiceConnection(item);
const itemContent = (
<div
className={`flex justify-between items-start py-4 rounded-lg transition-all duration-200 ${
index !== items.length - 1 ? "border-b border-slate-100" : ""
} ${
className={`flex justify-between items-start py-4 px-4 rounded-xl transition-all duration-200 ${
isLinked
? "hover:bg-blue-50 hover:border-blue-200 cursor-pointer group"
: "bg-slate-50/50"
? "hover:bg-primary/5 cursor-pointer group border border-transparent hover:border-primary/20"
: "bg-muted/30"
}`}
>
<div className="flex-1 pr-4">
@ -39,13 +37,13 @@ export function InvoiceItems({ items = [], currency }: InvoiceItemsProps) {
<div className="flex-1">
<div
className={`font-semibold mb-1 ${
isLinked ? "text-blue-900 group-hover:text-blue-700" : "text-slate-900"
isLinked ? "text-primary group-hover:text-primary/80" : "text-foreground"
}`}
>
{item.description}
{isLinked && (
<svg
className="inline-block w-4 h-4 ml-1 text-blue-500 group-hover:text-blue-600"
className="inline-block w-4 h-4 ml-1 text-primary/70 group-hover:text-primary"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
@ -61,12 +59,12 @@ export function InvoiceItems({ items = [], currency }: InvoiceItemsProps) {
</div>
<div className="flex flex-wrap gap-3 text-sm">
{item.quantity && item.quantity > 1 && (
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary/10 text-primary">
Qty: {item.quantity}
</span>
)}
{isLinked ? (
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-success/10 text-success">
<svg className="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path
fillRule="evenodd"
@ -77,7 +75,7 @@ export function InvoiceItems({ items = [], currency }: InvoiceItemsProps) {
Service #{item.serviceId}
</span>
) : (
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-100 text-slate-600">
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-muted text-muted-foreground">
<svg className="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path
fillRule="evenodd"
@ -92,10 +90,10 @@ export function InvoiceItems({ items = [], currency }: InvoiceItemsProps) {
</div>
</div>
</div>
<div className="text-right">
<div className="text-right flex-shrink-0">
<div
className={`text-xl font-bold ${
isLinked ? "text-blue-900 group-hover:text-blue-700" : "text-slate-900"
isLinked ? "text-primary group-hover:text-primary/80" : "text-foreground"
}`}
>
{formatCurrency(item.amount || 0, currency)}
@ -116,20 +114,20 @@ export function InvoiceItems({ items = [], currency }: InvoiceItemsProps) {
};
return (
<div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
<div className="px-6 py-4 bg-slate-50 border-b border-slate-200">
<div className="bg-card rounded-2xl border border-border overflow-hidden">
<div className="px-6 py-4 bg-muted/50 border-b border-border">
<div className="flex items-center justify-between">
<h3 className="text-lg font-semibold text-slate-900">Items & Services</h3>
<div className="flex items-center gap-4 text-xs text-slate-500">
<h3 className="text-lg font-semibold text-foreground">Items & Services</h3>
<div className="flex items-center gap-4 text-xs text-muted-foreground">
{hasLinkedItems && (
<div className="flex items-center gap-1">
<div className="w-2 h-2 bg-green-500 rounded-full"></div>
<div className="flex items-center gap-1.5">
<div className="w-2 h-2 bg-success rounded-full"></div>
<span>Linked to service</span>
</div>
)}
{hasOneTimeItems && (
<div className="flex items-center gap-1">
<div className="w-2 h-2 bg-slate-400 rounded-full"></div>
<div className="flex items-center gap-1.5">
<div className="w-2 h-2 bg-muted-foreground/50 rounded-full"></div>
<span>One-time item</span>
</div>
)}
@ -138,12 +136,10 @@ export function InvoiceItems({ items = [], currency }: InvoiceItemsProps) {
</div>
<div className="p-6">
{items.length > 0 ? (
<div className="space-y-2">
{items.map((item, index) => renderItemContent(item, index))}
</div>
<div className="space-y-3">{items.map(item => renderItemContent(item))}</div>
) : (
<div className="text-center py-8">
<div className="text-slate-400 mb-2">
<div className="text-muted-foreground/50 mb-2">
<svg
className="w-12 h-12 mx-auto"
fill="none"
@ -158,7 +154,7 @@ export function InvoiceItems({ items = [], currency }: InvoiceItemsProps) {
/>
</svg>
</div>
<p className="text-slate-500">No items found on this invoice.</p>
<p className="text-muted-foreground">No items found on this invoice.</p>
</div>
)}
</div>

149
apps/portal/src/features/billing/components/InvoiceDetail/InvoiceSummaryBar.tsx
View File

@ -91,92 +91,81 @@ export function InvoiceSummaryBar({
const statusLabel = statusLabelMap[invoice.status] ?? invoice.status;
return (
<div
className={cn(
"sticky top-0 z-10 bg-white/95 backdrop-blur supports-[backdrop-filter]:bg-white/80",
"border-b border-slate-200 shadow-sm",
"px-4 sm:px-6 lg:px-8 py-6"
)}
>
<div className="max-w-4xl mx-auto">
{/* Header layout with proper alignment */}
<div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-6">
<div className="px-6 py-8 sm:px-8">
{/* Header layout with proper alignment */}
<div className="flex flex-col gap-6">
{/* Top row: Amount and Actions */}
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-6">
{/* Left section: Amount, currency, and status */}
<div className="flex-1">
<div className="flex items-baseline gap-4 mb-3">
<div className="text-4xl lg:text-5xl font-bold text-slate-900 leading-none">
{formattedTotal}
</div>
<div className="text-lg font-medium text-slate-500 uppercase tracking-wide">
{invoice.currency?.toUpperCase()}
</div>
<StatusPill
size="md"
variant={statusVariant}
label={statusLabel}
className="font-semibold"
/>
<div className="flex items-center gap-4 flex-wrap">
<div className="text-4xl sm:text-5xl font-bold text-foreground leading-none">
{formattedTotal}
</div>
<div className="text-base font-medium text-muted-foreground uppercase tracking-wide">
{invoice.currency?.toUpperCase()}
</div>
<StatusPill
size="md"
variant={statusVariant}
label={statusLabel}
className="font-semibold"
/>
</div>
{/* Due date information */}
{(dueDisplay || relativeDue) && (
<div className="flex items-center gap-2 text-sm text-slate-600">
{dueDisplay && <span>Due {dueDisplay}</span>}
{relativeDue && (
<>
{dueDisplay && <span className="text-slate-400">•</span>}
<span
className={cn(
"font-medium",
invoice.status === "Overdue" ? "text-red-600" : "text-amber-600"
)}
>
{relativeDue}
</span>
</>
)}
</div>
{/* Right section: Actions */}
<div className="flex flex-row gap-3 flex-shrink-0">
<Button
variant="outline"
onClick={onDownload}
disabled={!onDownload}
loading={loadingDownload}
leftIcon={<ArrowDownTrayIcon className="h-4 w-4" />}
>
Download PDF
</Button>
{(invoice.status === "Unpaid" || invoice.status === "Overdue") && (
<Button
onClick={onPay}
disabled={!onPay}
loading={loadingPayment}
rightIcon={<ArrowTopRightOnSquareIcon className="h-4 w-4" />}
variant="default"
>
Pay Now
</Button>
)}
</div>
</div>
{/* Bottom row: Due date and Invoice metadata */}
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 text-sm text-muted-foreground border-t border-border pt-4">
{/* Due date information */}
<div className="flex items-center gap-2">
{dueDisplay && <span>Due {dueDisplay}</span>}
{relativeDue && (
<>
{dueDisplay && <span className="text-muted-foreground/50">•</span>}
<span
className={cn(
"font-medium",
invoice.status === "Overdue" ? "text-destructive" : "text-warning"
)}
>
{relativeDue}
</span>
</>
)}
</div>
{/* Right section: Actions and invoice info */}
<div className="flex flex-col lg:items-end gap-4">
{/* Action buttons */}
<div className="flex flex-col sm:flex-row gap-3 lg:flex-row-reverse">
<Button
variant="outline"
onClick={onDownload}
disabled={!onDownload}
loading={loadingDownload}
leftIcon={<ArrowDownTrayIcon className="h-4 w-4" />}
className="order-2 sm:order-1 lg:order-2"
>
Download PDF
</Button>
{(invoice.status === "Unpaid" || invoice.status === "Overdue") && (
<Button
onClick={onPay}
disabled={!onPay}
loading={loadingPayment}
rightIcon={<ArrowTopRightOnSquareIcon className="h-4 w-4" />}
variant="default"
className="order-1 sm:order-2 lg:order-1"
>
Pay Now
</Button>
)}
</div>
{/* Invoice metadata - inline layout */}
<div className="flex flex-col sm:flex-row lg:flex-col xl:flex-row gap-2 lg:items-end text-sm text-slate-600">
<div className="font-semibold text-slate-900">Invoice #{invoice.number}</div>
{issuedDisplay && (
<>
<span className="hidden sm:inline lg:hidden xl:inline text-slate-400">•</span>
<div>Issued {issuedDisplay}</div>
</>
)}
</div>
{/* Invoice metadata */}
<div className="flex items-center gap-2">
<span className="font-semibold text-foreground">Invoice #{invoice.number}</span>
{issuedDisplay && (
<>
<span className="text-muted-foreground/50">•</span>
<span>Issued {issuedDisplay}</span>
</>
)}
</div>
</div>
</div>

32
apps/portal/src/features/billing/components/InvoiceDetail/InvoiceTotals.tsx
View File

@ -13,30 +13,30 @@ export function InvoiceTotals({ subtotal, tax, total }: InvoiceTotalsProps) {
const { formatCurrency } = useFormatCurrency();
return (
<div className="bg-gradient-to-br from-slate-50 to-slate-100 rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
<div className="px-8 py-6">
<h3 className="text-lg font-semibold text-slate-900 mb-6">Invoice Summary</h3>
<div className="bg-card rounded-2xl border border-border overflow-hidden">
<div className="px-6 py-5 bg-muted/50 border-b border-border">
<h3 className="text-base font-semibold text-foreground">Invoice Summary</h3>
</div>
<div className="px-6 py-5">
<div className="space-y-4">
<div className="flex justify-between items-center text-slate-600">
<span className="font-medium">Subtotal</span>
<span className="font-semibold text-slate-900">{formatCurrency(subtotal)}</span>
<div className="flex justify-between items-center">
<span className="text-sm text-muted-foreground">Subtotal</span>
<span className="text-sm font-semibold text-foreground">
{formatCurrency(subtotal)}
</span>
</div>
{tax > 0 && (
<div className="flex justify-between items-center text-slate-600">
<span className="font-medium">Tax</span>
<span className="font-semibold text-slate-900">{formatCurrency(tax)}</span>
<div className="flex justify-between items-center">
<span className="text-sm text-muted-foreground">Tax</span>
<span className="text-sm font-semibold text-foreground">{formatCurrency(tax)}</span>
</div>
)}
<div className="border-t border-slate-300 pt-4 mt-6">
<div className="border-t border-border pt-4">
<div className="flex justify-between items-center">
<span className="text-xl font-bold text-slate-900">Total Amount</span>
<div className="flex items-baseline gap-2">
<div className="text-3xl font-bold text-slate-900">{formatCurrency(total)}</div>
<div className="text-lg font-medium text-slate-500">JPY</div>
</div>
<span className="text-base font-semibold text-foreground">Total</span>
<span className="text-xl font-bold text-foreground">{formatCurrency(total)}</span>
</div>
</div>
</div>

92
apps/portal/src/features/billing/components/InvoiceList/InvoiceList.tsx
View File

@ -94,36 +94,38 @@ export function InvoicesList({
}
return (
<div className={cn("space-y-4", className)}>
{/* Clean Header */}
<div
className={cn(
"bg-card rounded-xl border border-border shadow-[var(--cp-shadow-1)] overflow-hidden",
className
)}
>
{/* Search/Filter Header */}
{showFilters && (
<div className="bg-white/80 backdrop-blur-sm rounded-xl border border-gray-200/60 px-5 py-4 shadow-sm">
<div className="px-6 py-4 border-b border-border">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
{/* Title Section */}
<div className="flex items-center gap-3">
<h2 className="text-lg font-semibold text-gray-900">Invoices</h2>
{pagination?.totalItems && (
<span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-700">
{pagination.totalItems} total
</span>
)}
{/* Search Input */}
<div className="relative flex-1 max-w-sm">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<MagnifyingGlassIcon className="h-5 w-5 text-muted-foreground" />
</div>
<input
type="text"
className="block w-full pl-10 pr-3 py-2.5 text-sm border border-border rounded-lg bg-card shadow-sm placeholder-muted-foreground text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-primary transition-colors"
placeholder="Search invoices..."
value={searchTerm}
onChange={e => setSearchTerm(e.target.value)}
/>
</div>
{/* Controls */}
<div className="flex items-center gap-3">
{/* Search Input */}
<div className="relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<MagnifyingGlassIcon className="h-4 w-4 text-gray-400" />
</div>
<input
type="text"
className="block w-64 pl-9 pr-4 py-2.5 text-sm border border-gray-200 rounded-lg bg-white/50 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-400 transition-all duration-200"
placeholder="Search invoices..."
value={searchTerm}
onChange={e => setSearchTerm(e.target.value)}
/>
</div>
{/* Total Count */}
{pagination?.totalItems && (
<span className="text-sm text-muted-foreground">
{pagination.totalItems} invoice{pagination.totalItems !== 1 ? "s" : ""}
</span>
)}
{/* Filter Dropdown */}
{!isSubscriptionMode && (
@ -135,7 +137,7 @@ export function InvoicesList({
setStatusFilter(nextValue);
setCurrentPage(1);
}}
className="block w-36 pl-3 pr-8 py-2.5 text-sm border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-400 rounded-lg appearance-none bg-white/50 cursor-pointer transition-all duration-200"
className="block w-40 pl-3 pr-8 py-2.5 text-sm border border-border focus:outline-none focus:ring-2 focus:ring-ring focus:border-primary rounded-lg appearance-none bg-card shadow-sm text-foreground cursor-pointer transition-colors"
>
{statusFilterOptions.map(option => (
<option key={option.value} value={option.value}>
@ -143,8 +145,8 @@ export function InvoicesList({
</option>
))}
</select>
<div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
<ChevronDownIcon className="h-4 w-4 text-gray-400" />
<div className="absolute inset-y-0 right-0 flex items-center pr-2.5 pointer-events-none">
<ChevronDownIcon className="h-4 w-4 text-muted-foreground" />
</div>
</div>
)}
@ -154,24 +156,24 @@ export function InvoicesList({
)}
{/* Invoice Table */}
<div className="bg-white rounded-xl border border-gray-200/60 shadow-sm overflow-hidden">
<InvoiceTable
invoices={filtered}
loading={isLoading}
compact={compact}
className="border-0 rounded-none shadow-none"
/>
{pagination && filtered.length > 0 && (
<div className="border-t border-gray-100 bg-gray-50/30 px-6 py-4">
<PaginationBar
currentPage={currentPage}
pageSize={pageSize}
totalItems={pagination?.totalItems || 0}
onPageChange={setCurrentPage}
/>
</div>
)}
</div>
<InvoiceTable
invoices={filtered}
loading={isLoading}
compact={compact}
className="border-0 rounded-none shadow-none"
/>
{/* Pagination */}
{pagination && filtered.length > 0 && (
<div className="border-t border-border px-6 py-4">
<PaginationBar
currentPage={currentPage}
pageSize={pageSize}
totalItems={pagination?.totalItems || 0}
onPageChange={setCurrentPage}
/>
</div>
)}
</div>
);
}

104
apps/portal/src/features/billing/components/InvoiceTable/InvoiceTable.tsx
View File

@ -34,16 +34,16 @@ interface InvoiceTableProps {
const getStatusIcon = (status: string) => {
switch (status.toLowerCase()) {
case "paid":
return <CheckCircleIcon className="h-5 w-5 text-green-500" />;
return <CheckCircleIcon className="h-5 w-5 text-success" />;
case "unpaid":
return <ClockIcon className="h-5 w-5 text-yellow-500" />;
return <ClockIcon className="h-5 w-5 text-warning" />;
case "overdue":
return <ExclamationTriangleIcon className="h-5 w-5 text-red-500" />;
return <ExclamationTriangleIcon className="h-5 w-5 text-destructive" />;
case "cancelled":
case "canceled":
return <ExclamationTriangleIcon className="h-5 w-5 text-gray-500" />;
return <ExclamationTriangleIcon className="h-5 w-5 text-muted-foreground" />;
default:
return <ClockIcon className="h-5 w-5 text-gray-500" />;
return <ClockIcon className="h-5 w-5 text-muted-foreground" />;
}
};
@ -113,22 +113,22 @@ export function InvoiceTable({
const baseColumns = [
{
key: "invoice",
header: "Invoice Details",
header: "Invoice",
className: "w-1/3",
render: (invoice: Invoice) => {
const statusIcon = getStatusIcon(invoice.status);
return (
<div className="flex items-start space-x-3 py-3">
<div className="flex-shrink-0 mt-1">{statusIcon}</div>
<div className="flex items-start space-x-3 py-5">
<div className="flex-shrink-0 mt-0.5">{statusIcon}</div>
<div className="min-w-0 flex-1">
<div className="font-semibold text-gray-900 text-sm">{invoice.number}</div>
<div className="font-semibold text-foreground text-sm">{invoice.number}</div>
{!compact && invoice.description && (
<div className="text-sm text-gray-600 mt-1.5 line-clamp-2 leading-relaxed">
<div className="text-sm text-muted-foreground mt-1 line-clamp-1">
{invoice.description}
</div>
)}
{!compact && invoice.issuedAt && (
<div className="text-xs text-gray-500 mt-2 font-medium">
<div className="text-xs text-muted-foreground mt-1.5">
Issued {format(new Date(invoice.issuedAt), "MMM d, yyyy")}
</div>
)}
@ -146,12 +146,12 @@ export function InvoiceTable({
switch (invoice.status) {
case "Paid":
return (
<div className="space-y-2">
<span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-800 border border-green-200">
<div className="space-y-1.5">
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-success-soft text-success border border-success/20">
Paid
</span>
{invoice.paidDate && (
<div className="text-xs text-green-700 font-medium">
<div className="text-xs text-muted-foreground">
{format(new Date(invoice.paidDate), "MMM d, yyyy")}
</div>
)}
@ -160,12 +160,12 @@ export function InvoiceTable({
case "Overdue":
return (
<div className="space-y-2">
<span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-red-100 text-red-800 border border-red-200">
<div className="space-y-1.5">
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-destructive-soft text-destructive border border-destructive/20">
Overdue
</span>
{invoice.daysOverdue && (
<div className="text-xs text-red-700 font-medium">
<div className="text-xs text-destructive">
{invoice.daysOverdue} day{invoice.daysOverdue !== 1 ? "s" : ""} overdue
</div>
)}
@ -174,12 +174,12 @@ export function InvoiceTable({
case "Unpaid":
return (
<div className="space-y-2">
<span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-800 border border-yellow-200">
<div className="space-y-1.5">
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-warning-soft text-warning border border-warning/20">
Unpaid
</span>
{invoice.dueDate && (
<div className="text-xs text-yellow-700 font-medium">
<div className="text-xs text-muted-foreground">
Due {format(new Date(invoice.dueDate), "MMM d, yyyy")}
</div>
)}
@ -192,7 +192,7 @@ export function InvoiceTable({
}
};
return <div className="py-3">{renderStatusWithDate()}</div>;
return <div className="py-5">{renderStatusWithDate()}</div>;
},
},
{
@ -200,8 +200,8 @@ export function InvoiceTable({
header: "Amount",
className: "w-32 text-right",
render: (invoice: Invoice) => (
<div className="py-3 text-right">
<div className="font-bold text-gray-900 text-base">
<div className="py-5 text-right">
<div className="font-bold text-foreground text-sm tabular-nums">
{formatCurrency(invoice.total, invoice.currency)}
</div>
</div>
@ -213,15 +213,15 @@ export function InvoiceTable({
if (showActions) {
baseColumns.push({
key: "actions",
header: "Actions",
className: "w-48 text-right",
header: "",
className: "w-44 text-right",
render: (invoice: Invoice) => {
const canPay = invoice.status === "Unpaid" || invoice.status === "Overdue";
const isPaymentLoading = paymentLoading === invoice.id;
const isDownloadLoading = downloadLoading === invoice.id;
return (
<div className="py-3 flex justify-end items-center space-x-2">
<div className="py-5 flex justify-end items-center space-x-2">
{/* Payment Button - Only for unpaid invoices - Always on the left */}
{canPay && (
<Button
@ -231,7 +231,7 @@ export function InvoiceTable({
void handlePayment(invoice, event);
}}
loading={isPaymentLoading}
className="text-xs font-medium shadow-sm"
className="text-xs font-medium"
>
Pay Now
</Button>
@ -248,7 +248,7 @@ export function InvoiceTable({
leftIcon={
!isDownloadLoading ? <ArrowDownTrayIcon className="h-4 w-4" /> : undefined
}
className="text-xs font-medium border-gray-300 hover:border-gray-400 hover:bg-gray-50"
className="text-xs font-medium"
title="Download PDF"
>
PDF
@ -270,38 +270,36 @@ export function InvoiceTable({
if (loading) {
return (
<div className={cn("bg-white overflow-hidden", className)}>
<div className={cn("bg-card overflow-hidden", className)}>
<div className="animate-pulse">
{/* Header skeleton */}
<div className="bg-gradient-to-r from-gray-50 to-gray-50/80 px-6 py-4 border-b border-gray-200/80">
<div className="bg-muted/50 px-6 py-4 border-b border-border">
<div className="grid grid-cols-4 gap-4">
<div className="h-3 bg-gray-200 rounded w-32"></div>
<div className="h-3 bg-gray-200 rounded w-16"></div>
<div className="h-3 bg-gray-200 rounded w-20"></div>
<div className="h-3 bg-gray-200 rounded w-24"></div>
<div className="h-3 bg-muted rounded w-32"></div>
<div className="h-3 bg-muted rounded w-16"></div>
<div className="h-3 bg-muted rounded w-20"></div>
<div className="h-3 bg-muted rounded w-24"></div>
</div>
</div>
{/* Row skeletons */}
<div className="divide-y divide-gray-100/60">
<div className="divide-y divide-border">
{Array.from({ length: 6 }).map((_, i) => (
<div key={i} className="px-6 py-5">
<div className="grid grid-cols-4 gap-4 items-center">
<div className="flex items-center space-x-3">
<div className="h-5 w-5 bg-gray-200 rounded-full"></div>
<div className="space-y-2.5 flex-1">
<div className="h-4 bg-gray-200 rounded w-28"></div>
<div className="h-3 bg-gray-200 rounded w-40"></div>
<div className="h-3 bg-gray-200 rounded w-24"></div>
<div className="h-5 w-5 bg-muted rounded-full"></div>
<div className="space-y-2 flex-1">
<div className="h-4 bg-muted rounded w-28"></div>
<div className="h-3 bg-muted rounded w-40"></div>
</div>
</div>
<div className="h-6 bg-gray-200 rounded-full w-20"></div>
<div className="text-right space-y-2">
<div className="h-4 bg-gray-200 rounded w-24 ml-auto"></div>
<div className="h-3 bg-gray-200 rounded w-20 ml-auto"></div>
<div className="h-5 bg-muted rounded-full w-16"></div>
<div className="text-right">
<div className="h-4 bg-muted rounded w-20 ml-auto"></div>
</div>
<div className="text-right flex justify-end space-x-2">
<div className="h-8 bg-gray-200 rounded w-16"></div>
<div className="h-8 bg-gray-200 rounded w-20"></div>
<div className="h-8 bg-muted rounded w-16"></div>
<div className="h-8 bg-muted rounded w-14"></div>
</div>
</div>
</div>
@ -313,7 +311,7 @@ export function InvoiceTable({
}
return (
<div className={cn("bg-white overflow-hidden", className)}>
<div className={cn("bg-card overflow-hidden", className)}>
<DataTable
data={invoices}
columns={columns}
@ -322,12 +320,14 @@ export function InvoiceTable({
className={cn(
"invoice-table",
// Header styling - cleaner and more modern
"[&_thead]:bg-gradient-to-r [&_thead]:from-gray-50 [&_thead]:to-gray-50/80",
"[&_thead_th]:px-6 [&_thead_th]:py-3.5 [&_thead_th]:text-xs [&_thead_th]:font-medium [&_thead_th]:text-gray-600 [&_thead_th]:uppercase [&_thead_th]:tracking-wide",
"[&_thead_th]:border-b [&_thead_th]:border-gray-200/80",
"[&_thead]:bg-muted/50",
"[&_thead_th]:px-6 [&_thead_th]:py-3.5 [&_thead_th]:text-xs [&_thead_th]:font-medium [&_thead_th]:text-muted-foreground [&_thead_th]:uppercase [&_thead_th]:tracking-wide",
"[&_thead_th]:border-b [&_thead_th]:border-border",
// Right-align Amount column header (3rd column)
"[&_thead_th:nth-child(3)]:text-right",
// Row styling - enhanced hover and spacing
"[&_tbody_tr]:border-b [&_tbody_tr]:border-gray-100/60 [&_tbody_tr]:transition-all [&_tbody_tr]:duration-200",
"[&_tbody_tr:hover]:bg-gradient-to-r [&_tbody_tr:hover]:from-blue-50/30 [&_tbody_tr:hover]:to-indigo-50/20 [&_tbody_tr]:cursor-pointer",
"[&_tbody_tr]:border-b [&_tbody_tr]:border-border [&_tbody_tr]:transition-all [&_tbody_tr]:duration-200",
"[&_tbody_tr:hover]:bg-primary/5 [&_tbody_tr]:cursor-pointer",
"[&_tbody_tr:last-child]:border-b-0",
// Cell styling - better spacing
"[&_tbody_td]:px-6 [&_tbody_td]:py-1 [&_tbody_td]:align-top",

9
apps/portal/src/features/billing/views/InvoiceDetail.tsx
View File

@ -109,14 +109,9 @@ export function InvoiceDetailContainer() {
{ label: "Invoices", href: "/billing/invoices" },
{ label: `#${invoice.id}` },
]}
actions={
<Link href="/billing/invoices" className="text-sm font-medium text-primary hover:underline">
Back to invoices
</Link>
}
>
<div className="max-w-4xl">
<div className="bg-card text-card-foreground rounded-3xl shadow-[var(--cp-card-shadow-lg)] border border-border overflow-hidden">
<div>
<div className="bg-card text-card-foreground rounded-2xl shadow-[var(--cp-shadow-1)] border border-border overflow-hidden">
<InvoiceSummaryBar
invoice={invoice}
loadingDownload={loadingDownload}

2
apps/portal/src/features/catalog/components/base/CatalogBackLink.tsx
View File

@ -38,7 +38,7 @@ export function CatalogBackLink({
size="sm"
variant="ghost"
leftIcon={icon}
className={cn("text-gray-600 hover:text-gray-900", buttonClassName)}
className={cn("text-muted-foreground hover:text-foreground", buttonClassName)}
>
{label}
</Button>

6
apps/portal/src/features/catalog/components/base/CatalogHero.tsx
View File

@ -36,9 +36,9 @@ export function CatalogHero({
align === "center" ? "mx-auto max-w-2xl" : ""
)}
>
{eyebrow ? <div className="text-xs font-medium text-blue-700">{eyebrow}</div> : null}
<h1 className="text-2xl md:text-3xl font-bold text-gray-900 leading-tight">{title}</h1>
<p className="text-sm text-gray-600 leading-relaxed">{description}</p>
{eyebrow ? <div className="text-xs font-medium text-primary">{eyebrow}</div> : null}
<h1 className="text-2xl md:text-3xl font-bold text-foreground leading-tight">{title}</h1>
<p className="text-sm text-muted-foreground leading-relaxed">{description}</p>
{children ? <div className="mt-1 w-full">{children}</div> : null}
</div>
);

37
apps/portal/src/features/catalog/components/common/ServiceHeroCard.tsx
View File

@ -3,7 +3,7 @@
import React from "react";
import { AnimatedCard } from "@/components/molecules/AnimatedCard/AnimatedCard";
import { Button } from "@/components/atoms/button";
import { ArrowRightIcon } from "@heroicons/react/24/outline";
import { ArrowRightIcon, CheckIcon } from "@heroicons/react/24/outline";
export function ServiceHeroCard({
title,
@ -20,24 +20,25 @@ export function ServiceHeroCard({
href: string;
color: "blue" | "green" | "purple";
}) {
// Use design system tokens for colors
const colorClasses = {
blue: {
iconBg: "bg-blue-100",
iconText: "text-blue-600",
border: "border-blue-100",
hoverBorder: "hover:border-blue-200",
iconBg: "bg-info-soft",
iconText: "text-info",
border: "border-info/20",
hoverBorder: "hover:border-info/40",
},
green: {
iconBg: "bg-green-100",
iconText: "text-green-600",
border: "border-green-100",
hoverBorder: "hover:border-green-200",
iconBg: "bg-success-soft",
iconText: "text-success",
border: "border-success/20",
hoverBorder: "hover:border-success/40",
},
purple: {
iconBg: "bg-purple-100",
iconText: "text-purple-600",
border: "border-purple-100",
hoverBorder: "hover:border-purple-200",
iconBg: "bg-primary/10",
iconText: "text-primary",
border: "border-primary/20",
hoverBorder: "hover:border-primary/40",
},
} as const;
@ -47,25 +48,25 @@ export function ServiceHeroCard({
<AnimatedCard
className={`relative group rounded-2xl overflow-hidden h-full border-2 ${colors.border} ${colors.hoverBorder} transition-all duration-300 hover:shadow-lg hover:-translate-y-1`}
>
<div className="p-8 h-full flex flex-col bg-white">
<div className="p-8 h-full flex flex-col bg-card">
{/* Icon and Title */}
<div className="flex items-start gap-4 mb-4">
<div className={`p-3 rounded-xl ${colors.iconBg} flex-shrink-0`}>
<div className={colors.iconText}>{icon}</div>
</div>
<div>
<h3 className="text-2xl font-bold text-gray-900">{title}</h3>
<h3 className="text-2xl font-bold text-foreground">{title}</h3>
</div>
</div>
{/* Description */}
<p className="text-sm text-gray-600 mb-6 leading-relaxed">{description}</p>
<p className="text-sm text-muted-foreground mb-6 leading-relaxed">{description}</p>
{/* Features List */}
<ul className="space-y-2.5 mb-8 flex-grow">
{features.map((feature, index) => (
<li key={index} className="flex items-start gap-2.5 text-sm text-gray-700">
<span className="text-green-600 mt-0.5 flex-shrink-0">✓</span>
<li key={index} className="flex items-start gap-2.5 text-sm text-foreground/80">
<CheckIcon className="h-4 w-4 text-success mt-0.5 flex-shrink-0" />
<span>{feature}</span>
</li>
))}

59
apps/portal/src/features/catalog/components/internet/InternetPlanCard.tsx
View File

@ -2,7 +2,7 @@
import { AnimatedCard } from "@/components/molecules";
import { Button } from "@/components/atoms/button";
import { ArrowRightIcon } from "@heroicons/react/24/outline";
import { ArrowRightIcon, CheckIcon } from "@heroicons/react/24/outline";
import type {
InternetPlanCatalogItem,
InternetInstallationCatalogItem,
@ -22,6 +22,26 @@ interface InternetPlanCardProps {
disabledReason?: string;
}
// Tier-based styling using design tokens
const tierStyles = {
gold: {
card: "border-2 border-warning/50 bg-gradient-to-br from-card to-warning-soft/30 shadow-xl hover:shadow-2xl ring-2 ring-warning/20",
border: "border-warning/30",
},
platinum: {
card: "border-2 border-primary/50 bg-gradient-to-br from-card to-info-soft/30 shadow-xl hover:shadow-2xl ring-2 ring-primary/20",
border: "border-primary/30",
},
silver: {
card: "border-2 border-muted-foreground/30 bg-gradient-to-br from-card to-muted/30 shadow-lg hover:shadow-xl ring-1 ring-border",
border: "border-muted-foreground/20",
},
default: {
card: "border border-border bg-card shadow-md hover:shadow-xl",
border: "border-border",
},
} as const;
export function InternetPlanCard({
plan,
installations,
@ -51,14 +71,11 @@ export function InternetPlanCard({
const minInstallationPrice = installationPrices.length ? Math.min(...installationPrices) : 0;
const getBorderClass = () => {
if (isGold)
return "border-2 border-yellow-300 bg-gradient-to-br from-white to-yellow-50/30 shadow-xl hover:shadow-2xl ring-2 ring-yellow-200/50";
if (isPlatinum)
return "border-2 border-indigo-300 bg-gradient-to-br from-white to-indigo-50/30 shadow-xl hover:shadow-2xl ring-2 ring-indigo-200/50";
if (isSilver)
return "border-2 border-gray-300 bg-gradient-to-br from-white to-gray-50/30 shadow-lg hover:shadow-xl ring-1 ring-gray-200/50";
return "border border-gray-200 bg-white shadow-md hover:shadow-xl";
const getTierStyle = () => {
if (isGold) return tierStyles.gold;
if (isPlatinum) return tierStyles.platinum;
if (isSilver) return tierStyles.silver;
return tierStyles.default;
};
const getTierBadgeVariant = (): BadgeVariant => {
@ -68,16 +85,18 @@ export function InternetPlanCard({
return "default";
};
const tierStyle = getTierStyle();
const renderFeature = (feature: string, index: number) => {
const [label, detail] = feature.split(":");
if (detail) {
return (
<li key={index} className="flex items-start gap-2">
<span className="text-green-600 mt-0.5 flex-shrink-0">✓</span>
<CheckIcon className="h-4 w-4 text-success mt-0.5 flex-shrink-0" />
<span>
<span className="font-medium text-gray-900">{label.trim()}:</span>{" "}
<span className="text-gray-700">{detail.trim()}</span>
<span className="font-medium text-foreground">{label.trim()}:</span>{" "}
<span className="text-muted-foreground">{detail.trim()}</span>
</span>
</li>
);
@ -85,8 +104,8 @@ export function InternetPlanCard({
return (
<li key={index} className="flex items-start gap-2">
<span className="text-green-600 mt-0.5 flex-shrink-0">✓</span>
<span className="text-gray-700">{feature}</span>
<CheckIcon className="h-4 w-4 text-success mt-0.5 flex-shrink-0" />
<span className="text-muted-foreground">{feature}</span>
</li>
);
};
@ -127,11 +146,11 @@ export function InternetPlanCard({
return (
<AnimatedCard
variant="static"
className={`overflow-hidden flex flex-col h-full transition-all duration-200 ease-out hover:-translate-y-1 rounded-xl ${getBorderClass()}`}
className={`overflow-hidden flex flex-col h-full transition-all duration-200 ease-out hover:-translate-y-1 rounded-xl ${tierStyle.card}`}
>
<div className="p-6 sm:p-7 flex flex-col flex-grow space-y-5">
{/* Header with badges */}
<div className="flex flex-col gap-3 pb-4 border-b border-gray-100">
<div className={`flex flex-col gap-3 pb-4 border-b ${tierStyle.border}`}>
<div className="inline-flex flex-wrap items-center gap-2 text-sm">
<CardBadge
text={plan.internetPlanTier ?? "Plan"}
@ -144,11 +163,11 @@ export function InternetPlanCard({
{/* Plan name and description - Full width */}
<div className="w-full space-y-2">
<h3 className="text-xl sm:text-2xl font-bold text-gray-900 leading-tight">
<h3 className="text-xl sm:text-2xl font-bold text-foreground leading-tight">
{planBaseName}
</h3>
{plan.catalogMetadata?.tierDescription || plan.description ? (
<p className="text-sm text-gray-600 leading-relaxed">
<p className="text-sm text-muted-foreground leading-relaxed">
{plan.catalogMetadata?.tierDescription || plan.description}
</p>
) : null}
@ -167,10 +186,10 @@ export function InternetPlanCard({
{/* Features */}
<div className="flex-grow pt-1">
<h4 className="font-semibold text-gray-900 mb-4 text-sm uppercase tracking-wide">
<h4 className="font-semibold text-foreground mb-4 text-sm uppercase tracking-wide">
Your Plan Includes:
</h4>
<ul className="space-y-3 text-sm text-gray-700">{renderPlanFeatures()}</ul>
<ul className="space-y-3 text-sm">{renderPlanFeatures()}</ul>
</div>
{/* Action Button */}

14
apps/portal/src/features/catalog/components/internet/configure/InternetConfigureContainer.tsx
View File

@ -116,7 +116,7 @@ export function InternetConfigureContainer({
description="Set up your internet service options"
>
<div className="text-center py-12">
<p className="text-gray-500">Plan not found</p>
<p className="text-muted-foreground">Plan not found</p>
</div>
</PageLayout>
);
@ -210,7 +210,7 @@ export function InternetConfigureContainer({
title="Configure Internet Service"
description="Set up your internet service options"
>
<div className="min-h-[70vh] bg-gradient-to-br from-slate-50 via-blue-50/20 to-slate-50">
<div className="min-h-[70vh]">
<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
{/* Plan Header */}
<PlanHeader plan={plan} />
@ -238,21 +238,21 @@ function PlanHeader({ plan }: { plan: InternetPlanCatalogItem }) {
<Button
as="a"
href="/catalog/internet"
variant="outline"
variant="ghost"
size="sm"
leftIcon={<ArrowLeftIcon className="w-4 h-4" />}
className="mb-6"
className="mb-6 text-muted-foreground hover:text-foreground"
>
Back to Internet Plans
</Button>
<h1 className="text-2xl md:text-3xl font-bold text-gray-900 mb-5">Configure your plan</h1>
<h1 className="text-2xl md:text-3xl font-bold text-foreground mb-5">Configure your plan</h1>
<span className="sr-only">
{planBaseName}
{planDetail ? ` (${planDetail})` : ""}
</span>
<div className="inline-flex flex-wrap items-center justify-center gap-3 bg-white px-6 py-3 rounded-full border border-blue-100 shadow-sm text-sm">
<div className="inline-flex flex-wrap items-center justify-center gap-3 bg-card px-6 py-3 rounded-full border border-border shadow-sm text-sm">
{plan.internetPlanTier ? (
<CardBadge
text={plan.internetPlanTier}
@ -262,7 +262,7 @@ function PlanHeader({ plan }: { plan: InternetPlanCatalogItem }) {
) : null}
{planDetail ? <CardBadge text={planDetail} variant="family" size="sm" /> : null}
{plan.monthlyPrice && plan.monthlyPrice > 0 ? (
<span className="inline-flex items-center rounded-full bg-blue-600/10 px-3 py-1 text-sm font-semibold text-blue-700">
<span className="inline-flex items-center rounded-full bg-primary/10 px-3 py-1 text-sm font-semibold text-primary">
¥{plan.monthlyPrice.toLocaleString()}/month
</span>
) : null}

60
apps/portal/src/features/catalog/components/internet/configure/steps/ReviewOrderStep.tsx
View File

@ -72,7 +72,7 @@ export function ReviewOrderStep({
/>
</div>
<div className="flex justify-between pt-6 border-t">
<div className="flex justify-between pt-6 border-t border-border">
<Button onClick={onBack} variant="outline" leftIcon={<ArrowLeftIcon className="w-4 h-4" />}>
Back to Add-ons
</Button>
@ -100,26 +100,26 @@ function OrderSummary({
oneTimeTotal: number;
}) {
return (
<div className="bg-gradient-to-b from-white to-gray-50 shadow-xl rounded-lg border border-gray-200 p-6">
<div className="bg-card shadow-xl rounded-lg border border-border p-6">
{/* Receipt Header */}
<div className="text-center border-b-2 border-dashed border-gray-300 pb-4 mb-6">
<h3 className="text-xl font-bold text-gray-900 mb-1">Order Summary</h3>
<p className="text-sm text-gray-500">Review your configuration</p>
<div className="text-center border-b-2 border-dashed border-border pb-4 mb-6">
<h3 className="text-xl font-bold text-foreground mb-1">Order Summary</h3>
<p className="text-sm text-muted-foreground">Review your configuration</p>
</div>
{/* Plan Details */}
<div className="space-y-3 mb-6">
<div className="flex justify-between items-start">
<div>
<h4 className="font-semibold text-gray-900">{plan.name}</h4>
<p className="text-sm text-gray-600">Internet Service</p>
{mode && <p className="text-sm text-gray-600">Access Mode: {mode}</p>}
<h4 className="font-semibold text-foreground">{plan.name}</h4>
<p className="text-sm text-muted-foreground">Internet Service</p>
{mode && <p className="text-sm text-muted-foreground">Access Mode: {mode}</p>}
</div>
<div className="text-right">
<p className="font-semibold text-gray-900">
<p className="font-semibold text-foreground">
¥{(plan.monthlyPrice ?? 0).toLocaleString()}
</p>
<p className="text-xs text-gray-500">per month</p>
<p className="text-xs text-muted-foreground">per month</p>
</div>
</div>
</div>
@ -127,21 +127,21 @@ function OrderSummary({
{/* Installation */}
{(selectedInstallation.monthlyPrice ?? 0) > 0 ||
(selectedInstallation.oneTimePrice ?? 0) > 0 ? (
<div className="border-t border-gray-200 pt-4 mb-6">
<h4 className="font-medium text-gray-900 mb-3">Installation</h4>
<div className="border-t border-border pt-4 mb-6">
<h4 className="font-medium text-foreground mb-3">Installation</h4>
<div className="flex justify-between text-sm">
<span className="text-gray-600">{selectedInstallation.name}</span>
<span className="text-gray-900">
<span className="text-muted-foreground">{selectedInstallation.name}</span>
<span className="text-foreground">
{selectedInstallation.monthlyPrice && selectedInstallation.monthlyPrice > 0 && (
<>
¥{selectedInstallation.monthlyPrice.toLocaleString()}
<span className="text-xs text-gray-500 ml-1">/mo</span>
<span className="text-xs text-muted-foreground ml-1">/mo</span>
</>
)}
{selectedInstallation.oneTimePrice && selectedInstallation.oneTimePrice > 0 && (
<>
¥{selectedInstallation.oneTimePrice.toLocaleString()}
<span className="text-xs text-gray-500 ml-1">/once</span>
<span className="text-xs text-muted-foreground ml-1">/once</span>
</>
)}
</span>
@ -151,23 +151,23 @@ function OrderSummary({
{/* Add-ons */}
{selectedAddons.length > 0 && (
<div className="border-t border-gray-200 pt-4 mb-6">
<h4 className="font-medium text-gray-900 mb-3">Add-ons</h4>
<div className="border-t border-border pt-4 mb-6">
<h4 className="font-medium text-foreground mb-3">Add-ons</h4>
<div className="space-y-2">
{selectedAddons.map(addon => (
<div key={addon.sku} className="flex justify-between text-sm">
<span className="text-gray-600">{addon.name}</span>
<span className="text-gray-900">
<span className="text-muted-foreground">{addon.name}</span>
<span className="text-foreground">
{addon.monthlyPrice && addon.monthlyPrice > 0 && (
<>
¥{addon.monthlyPrice.toLocaleString()}
<span className="text-xs text-gray-500 ml-1">/mo</span>
<span className="text-xs text-muted-foreground ml-1">/mo</span>
</>
)}
{addon.oneTimePrice && addon.oneTimePrice > 0 && (
<>
¥{addon.oneTimePrice.toLocaleString()}
<span className="text-xs text-gray-500 ml-1">/once</span>
<span className="text-xs text-muted-foreground ml-1">/once</span>
</>
)}
</span>
@ -178,26 +178,24 @@ function OrderSummary({
)}
{/* Totals */}
<div className="border-t-2 border-dashed border-gray-300 pt-4 bg-gray-50 -mx-6 px-6 py-4 rounded-b-lg">
<div className="border-t-2 border-dashed border-border pt-4 bg-muted/50 -mx-6 px-6 py-4 rounded-b-lg">
<div className="space-y-2">
<div className="flex justify-between text-xl font-bold">
<span className="text-gray-900">Monthly Total</span>
<span className="text-blue-600">¥{monthlyTotal.toLocaleString()}</span>
<span className="text-foreground">Monthly Total</span>
<span className="text-primary">¥{monthlyTotal.toLocaleString()}</span>
</div>
{oneTimeTotal > 0 && (
<div className="flex justify-between text-sm">
<span className="text-gray-600">One-time Total</span>
<span className="text-orange-600 font-semibold">
¥{oneTimeTotal.toLocaleString()}
</span>
<span className="text-muted-foreground">One-time Total</span>
<span className="text-warning font-semibold">¥{oneTimeTotal.toLocaleString()}</span>
</div>
)}
</div>
</div>
{/* Receipt Footer */}
<div className="text-center mt-6 pt-4 border-t border-gray-200">
<p className="text-xs text-gray-500">High-speed internet service</p>
<div className="text-center mt-6 pt-4 border-t border-border">
<p className="text-xs text-muted-foreground">High-speed internet service</p>
</div>
</div>
);

8
apps/portal/src/features/catalog/components/sim/SimPlanCard.tsx
View File

@ -24,8 +24,8 @@ export function SimPlanCard({ plan, isFamily }: { plan: SimCatalogProduct; isFam
<div className="flex items-start justify-between gap-4 mb-3">
<div className="flex flex-col gap-2">
<div className="flex items-center gap-2">
<DevicePhoneMobileIcon className="h-5 w-5 text-blue-600" />
<span className="font-bold text-base text-gray-900">{plan.simDataSize}</span>
<DevicePhoneMobileIcon className="h-5 w-5 text-primary" />
<span className="font-bold text-base text-foreground">{plan.simDataSize}</span>
</div>
{isFamilyPlan && <CardBadge text="Family Discount" variant="family" size="sm" />}
</div>
@ -35,13 +35,13 @@ export function SimPlanCard({ plan, isFamily }: { plan: SimCatalogProduct; isFam
<div className="mb-4">
<CardPricing monthlyPrice={displayPrice} size="sm" alignment="left" />
{isFamilyPlan && (
<div className="text-xs text-green-600 font-medium mt-1">Discounted pricing applied</div>
<div className="text-xs text-success font-medium mt-1">Discounted pricing applied</div>
)}
</div>
{/* Description */}
<div className="mb-4 flex-grow">
<p className="text-sm text-gray-600 leading-relaxed line-clamp-2">{plan.name}</p>
<p className="text-sm text-muted-foreground leading-relaxed line-clamp-2">{plan.name}</p>
</div>
{/* Action Button */}

8
apps/portal/src/features/catalog/components/vpn/VpnPlanCard.tsx
View File

@ -12,14 +12,14 @@ interface VpnPlanCardProps {
export function VpnPlanCard({ plan }: VpnPlanCardProps) {
return (
<AnimatedCard className="p-6 border border-blue-200 hover:border-blue-300 transition-all duration-300 hover:shadow-lg flex flex-col h-full">
<AnimatedCard className="p-6 border border-primary/20 hover:border-primary/40 transition-all duration-300 hover:shadow-lg flex flex-col h-full">
{/* Header with icon and name */}
<div className="flex items-start gap-3 mb-4">
<div className="p-2 bg-blue-50 rounded-lg">
<ShieldCheckIcon className="h-6 w-6 text-blue-600" />
<div className="p-2 bg-primary/10 rounded-lg">
<ShieldCheckIcon className="h-6 w-6 text-primary" />
</div>
<div className="flex-1">
<h3 className="text-xl font-semibold text-gray-900">{plan.name}</h3>
<h3 className="text-xl font-semibold text-foreground">{plan.name}</h3>
</div>
</div>

10
apps/portal/src/features/checkout/views/CheckoutContainer.tsx
View File

@ -213,8 +213,8 @@ export function CheckoutContainer() {
</div>
</div>
<div className="bg-muted border border-border rounded-2xl p-6 md:p-7 text-center shadow-[var(--cp-shadow-1)]">
<div className="w-16 h-16 bg-card rounded-full flex items-center justify-center mx-auto mb-4 shadow-[var(--cp-shadow-1)] border border-border">
<div className="bg-card border border-border rounded-2xl p-6 md:p-7 text-center shadow-[var(--cp-shadow-1)]">
<div className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4 shadow-sm border border-primary/20">
<ShieldCheckIcon className="w-8 h-8 text-primary" />
</div>
<h2 className="text-2xl font-bold text-foreground mb-2">Review & Submit</h2>
@ -222,7 +222,7 @@ export function CheckoutContainer() {
You’re almost done. Confirm your details above, then submit your order. We’ll review and
notify you when everything is ready.
</p>
<div className="bg-card rounded-lg p-4 border border-border text-left max-w-2xl mx-auto shadow-[var(--cp-shadow-1)]">
<div className="bg-muted/50 rounded-lg p-4 border border-border text-left max-w-2xl mx-auto">
<h3 className="font-semibold text-foreground mb-2">What to expect</h3>
<div className="text-sm text-muted-foreground space-y-1">
<p>• Our team reviews your order and schedules setup if needed</p>
@ -252,8 +252,8 @@ export function CheckoutContainer() {
<div className="flex gap-4">
<Button
type="button"
variant="outline"
className="flex-1 py-4"
variant="ghost"
className="flex-1 py-4 text-muted-foreground hover:text-foreground"
onClick={navigateBackToConfigure}
>
← Back to Configuration

175
apps/portal/src/features/dashboard/components/ActivityFeed.tsx
View File

@ -1,175 +0,0 @@
"use client";
import { useState } from "react";
import { ArrowTrendingUpIcon } from "@heroicons/react/24/outline";
import { cn } from "@/lib/utils";
import { DashboardActivityItem } from "./DashboardActivityItem";
import {
filterActivities,
ACTIVITY_FILTERS,
getActivityNavigationPath,
isActivityClickable,
} from "../utils/dashboard.utils";
import type { Activity, ActivityFilter } from "@customer-portal/domain/dashboard";
export interface ActivityFeedProps {
activities: Activity[];
onItemClick?: (activity: Activity) => void;
className?: string;
maxItems?: number;
showFilter?: boolean;
loading?: boolean;
error?: string | null;
}
export function ActivityFeed({
activities,
onItemClick,
className,
maxItems = 10,
showFilter = true,
loading = false,
error = null,
}: ActivityFeedProps) {
const [filter, setFilter] = useState<ActivityFilter>("all");
const filteredActivities = filterActivities(activities, filter);
const displayActivities = filteredActivities.slice(0, maxItems);
const handleActivityClick = (activity: Activity) => {
if (onItemClick) {
onItemClick(activity);
} else if (isActivityClickable(activity)) {
const path = getActivityNavigationPath(activity);
if (path) {
window.location.href = path;
}
}
};
if (loading) {
return (
<div
className={cn(
"bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden",
className
)}
>
<div className="px-6 py-4 border-b border-gray-100">
<div className="flex items-center justify-between">
<div className="h-6 bg-gray-200 rounded animate-pulse w-32" />
{showFilter && (
<div className="flex items-center space-x-1 bg-gray-100 rounded-lg p-1">
{ACTIVITY_FILTERS.map((_, index) => (
<div key={index} className="h-6 w-12 bg-gray-200 rounded animate-pulse" />
))}
</div>
)}
</div>
</div>
<div className="p-6 space-y-4">
{Array.from({ length: 3 }).map((_, index) => (
<div key={index} className="flex items-start space-x-4">
<div className="w-10 h-10 rounded-full bg-gray-200 animate-pulse" />
<div className="flex-1 space-y-2">
<div className="h-4 bg-gray-200 rounded animate-pulse w-3/4" />
<div className="h-3 bg-gray-200 rounded animate-pulse w-1/2" />
<div className="h-3 bg-gray-200 rounded animate-pulse w-1/4" />
</div>
</div>
))}
</div>
</div>
);
}
if (error) {
return (
<div
className={cn(
"bg-white rounded-2xl shadow-lg border border-red-200 overflow-hidden",
className
)}
>
<div className="px-6 py-4 border-b border-red-100">
<h3 className="text-lg font-semibold text-gray-900">Recent Activity</h3>
</div>
<div className="p-6">
<div className="text-center py-8">
<div className="text-red-600 text-sm">{error}</div>
</div>
</div>
</div>
);
}
return (
<div
className={cn(
"bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden",
className
)}
>
<div className="px-6 py-4 border-b border-gray-100">
<div className="flex items-center justify-between">
<h3 className="text-lg font-semibold text-gray-900">Recent Activity</h3>
{showFilter && (
<div className="flex items-center space-x-1 bg-gray-100 rounded-lg p-1">
{ACTIVITY_FILTERS.map(filterOption => (
<button
key={filterOption.key}
onClick={() => setFilter(filterOption.key)}
className={cn(
"px-2.5 py-1 text-xs rounded-md font-medium transition-all duration-200",
filter === filterOption.key
? "bg-white text-gray-900 shadow"
: "text-gray-600 hover:text-gray-900 hover:bg-gray-50"
)}
>
{filterOption.label}
</button>
))}
</div>
)}
</div>
</div>
<div className="p-6 max-h-[360px] overflow-y-auto">
{displayActivities.length > 0 ? (
<div className="space-y-4">
{displayActivities.map(activity => {
const clickable = isActivityClickable(activity);
return (
<DashboardActivityItem
key={activity.id}
activity={activity}
onClick={clickable ? () => handleActivityClick(activity) : undefined}
/>
);
})}
</div>
) : (
<div className="text-center py-12">
<ArrowTrendingUpIcon className="mx-auto h-12 w-12 text-gray-400" />
<h3 className="mt-2 text-sm font-medium text-gray-900">
{filter === "all" ? "No recent activity" : `No ${filter} activity`}
</h3>
<p className="mt-1 text-sm text-gray-500">
{filter === "all"
? "Your account activity will appear here."
: `Your ${filter} activity will appear here.`}
</p>
</div>
)}
</div>
{filteredActivities.length > maxItems && (
<div className="px-6 py-3 border-t border-gray-100 bg-gray-50">
<p className="text-xs text-gray-500 text-center">
Showing {maxItems} of {filteredActivities.length} activities
</p>
</div>
)}
</div>
);
}

110
apps/portal/src/features/dashboard/components/ActivityTimeline.tsx Normal file
View File

@ -0,0 +1,110 @@
"use client";
import { useMemo } from "react";
import { format, isToday, isYesterday, isSameDay } from "date-fns";
import { ArrowTrendingUpIcon } from "@heroicons/react/24/outline";
import type { Activity } from "@customer-portal/domain/dashboard";
import { DashboardActivityItem } from "./DashboardActivityItem";
interface ActivityTimelineProps {
activities: Activity[];
onItemClick?: (activity: Activity) => void;
maxItems?: number;
}
interface GroupedActivities {
label: string;
date: Date;
activities: Activity[];
}
function formatDateLabel(date: Date): string {
if (isToday(date)) {
return "Today";
}
if (isYesterday(date)) {
return "Yesterday";
}
return format(date, "MMM d");
}
function groupActivitiesByDate(activities: Activity[]): GroupedActivities[] {
const groups: GroupedActivities[] = [];
for (const activity of activities) {
const activityDate = new Date(activity.date);
const existingGroup = groups.find(g => isSameDay(g.date, activityDate));
if (existingGroup) {
existingGroup.activities.push(activity);
} else {
groups.push({
label: formatDateLabel(activityDate),
date: activityDate,
activities: [activity],
});
}
}
// Sort groups by date (newest first)
return groups.sort((a, b) => b.date.getTime() - a.date.getTime());
}
export function ActivityTimeline({
activities,
onItemClick,
maxItems = 10,
}: ActivityTimelineProps) {
const groupedActivities = useMemo(() => {
const limited = activities.slice(0, maxItems);
return groupActivitiesByDate(limited);
}, [activities, maxItems]);
if (activities.length === 0) {
return (
<div className="text-center py-12">
<div className="w-12 h-12 rounded-xl bg-muted/50 flex items-center justify-center mx-auto mb-3">
<ArrowTrendingUpIcon className="h-6 w-6 text-muted-foreground/40" />
</div>
<h3 className="text-sm font-medium text-foreground">No recent activity</h3>
<p className="mt-1 text-sm text-muted-foreground max-w-xs mx-auto">
Your account activity will appear here once you start using our services.
</p>
</div>
);
}
return (
<div className="space-y-6">
{groupedActivities.map(group => (
<div key={group.label}>
{/* Date header */}
<div className="flex items-center gap-3 mb-3">
<span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
{group.label}
</span>
<div className="flex-1 h-px bg-border" />
</div>
{/* Activities for this date */}
<div className="space-y-0">
{group.activities.map((activity, index) => {
const isClickable =
activity.type === "invoice_created" || activity.type === "invoice_paid";
const isLastInGroup = index === group.activities.length - 1;
return (
<DashboardActivityItem
key={activity.id}
activity={activity}
onClick={isClickable && onItemClick ? () => onItemClick(activity) : undefined}
showConnector={!isLastInGroup}
/>
);
})}
</div>
</div>
))}
</div>
);
}

62
apps/portal/src/features/dashboard/components/DashboardActivityItem.tsx
View File

@ -9,15 +9,12 @@ import {
ExclamationTriangleIcon,
} from "@heroicons/react/24/outline";
import type { Activity } from "@customer-portal/domain/dashboard";
import {
formatActivityDate,
formatActivityDescription,
getActivityIconGradient,
} from "../utils/dashboard.utils";
import { formatActivityDescription } from "../utils/dashboard.utils";
interface DashboardActivityItemProps {
activity: Activity;
onClick?: () => void;
showConnector?: boolean;
}
const ICON_COMPONENTS: Record<Activity["type"], ComponentType<SVGProps<SVGSVGElement>>> = {
@ -28,43 +25,58 @@ const ICON_COMPONENTS: Record<Activity["type"], ComponentType<SVGProps<SVGSVGEle
case_closed: CheckCircleIcon,
};
const ICON_COLORS: Record<Activity["type"], string> = {
invoice_created: "text-blue-500 bg-blue-50",
invoice_paid: "text-green-500 bg-green-50",
service_activated: "text-purple-500 bg-purple-50",
case_created: "text-amber-500 bg-amber-50",
case_closed: "text-green-500 bg-green-50",
};
const FALLBACK_ICON = ExclamationTriangleIcon;
export function DashboardActivityItem({ activity, onClick }: DashboardActivityItemProps) {
export function DashboardActivityItem({
activity,
onClick,
showConnector = true,
}: DashboardActivityItemProps) {
const Icon = ICON_COMPONENTS[activity.type] ?? FALLBACK_ICON;
const gradient = getActivityIconGradient(activity.type);
const colorClasses = ICON_COLORS[activity.type] ?? "text-muted-foreground bg-muted";
const description = formatActivityDescription(activity);
const formattedDate = formatActivityDate(activity.date);
const content = (
<>
<div className="flex-shrink-0">
<div
className={`w-10 h-10 rounded-full bg-gradient-to-r ${gradient} flex items-center justify-center shadow-[var(--cp-shadow-1)]`}
>
<Icon className="h-5 w-5 text-white" />
</div>
<div className="flex items-start gap-3 relative">
{/* Timeline connector */}
{showConnector && (
<div className="absolute left-[15px] top-8 bottom-0 w-px bg-border -z-10" />
)}
{/* Icon */}
<div
className={`flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center ${colorClasses}`}
>
<Icon className="h-4 w-4" />
</div>
<div className="flex-1 min-w-0">
{/* Content */}
<div className="flex-1 min-w-0 pb-4">
<p
className={[
"text-sm font-medium",
onClick ? "text-foreground group-hover:text-primary" : "text-foreground",
].join(" ")}
className={`text-sm font-medium leading-tight ${
onClick ? "text-foreground group-hover:text-primary" : "text-foreground"
}`}
>
{activity.title}
</p>
<p className="text-sm text-muted-foreground mt-1">{description}</p>
<p className="text-xs text-muted-foreground/70 mt-2">{formattedDate}</p>
<p className="text-sm text-muted-foreground mt-0.5 leading-snug">{description}</p>
</div>
</>
</div>
);
if (onClick) {
return (
<button
type="button"
className="group flex items-start space-x-4 w-full text-left p-3 -m-3 rounded-lg hover:bg-muted transition-colors duration-[var(--cp-duration-normal)] cursor-pointer"
className="group w-full text-left rounded-lg hover:bg-muted/50 transition-colors cursor-pointer -mx-2 px-2"
onClick={onClick}
>
{content}
@ -72,5 +84,5 @@ export function DashboardActivityItem({ activity, onClick }: DashboardActivityIt
);
}
return <div className="flex items-start space-x-4 w-full text-left">{content}</div>;
return <div className="w-full text-left">{content}</div>;
}

18
apps/portal/src/features/dashboard/components/PaymentErrorBanner.tsx
View File

@ -1,18 +0,0 @@
"use client";
import { AlertBanner } from "@/components/molecules/AlertBanner/AlertBanner";
interface PaymentErrorBannerProps {
message: string;
onDismiss: () => void;
}
export function PaymentErrorBanner({ message, onDismiss }: PaymentErrorBannerProps) {
return (
<AlertBanner variant="error" title="Payment Error" onClose={onDismiss} role="alert">
{message}
</AlertBanner>
);
}
export type { PaymentErrorBannerProps };

21
apps/portal/src/features/dashboard/components/QuickAction.tsx
View File

@ -1,6 +1,7 @@
"use client";
import Link from "next/link";
import { ArrowRightIcon } from "@heroicons/react/24/outline";
export function QuickAction({
href,
@ -20,28 +21,18 @@ export function QuickAction({
return (
<Link
href={href}
className="flex items-center p-4 rounded-xl hover:bg-muted transition-colors duration-[var(--cp-duration-normal)] group"
className="flex items-center p-4 rounded-xl border border-transparent hover:border-border/60 hover:bg-muted/50 transition-all duration-200 group"
>
<div className={`flex-shrink-0 p-2 rounded-lg ${bgColor}`}>
<div className={`flex-shrink-0 p-2.5 rounded-xl ${bgColor} border border-primary/10`}>
<Icon className={`h-5 w-5 ${iconColor}`} />
</div>
<div className="ml-3 flex-1">
<div className="ml-4 flex-1 min-w-0">
<p className="text-sm font-semibold text-foreground group-hover:text-primary transition-colors">
{title}
</p>
<p className="text-xs text-muted-foreground">{description}</p>
<p className="text-xs text-muted-foreground mt-0.5 leading-relaxed">{description}</p>
</div>
<svg
className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clipRule="evenodd"
/>
</svg>
<ArrowRightIcon className="h-4 w-4 text-muted-foreground/50 group-hover:text-primary group-hover:translate-x-0.5 transition-all" />
</Link>
);
}

66
apps/portal/src/features/dashboard/components/StatCard.tsx
View File

@ -1,54 +1,52 @@
"use client";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { ArrowRightIcon } from "@heroicons/react/24/outline";
export function StatCard({
title,
value,
icon: Icon,
gradient,
href,
zeroHint,
tone = "neutral",
}: {
title: string;
value: string | number;
icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
gradient: string;
href: string;
zeroHint?: { text: string; href: string };
tone?: "neutral" | "primary" | "info" | "success" | "warning";
}) {
const router = useRouter();
const toneStyles: Record<
NonNullable<Parameters<typeof StatCard>[0]["tone"]>,
{ iconWrap: string; icon: string }
> = {
neutral: { iconWrap: "bg-muted/50", icon: "text-muted-foreground" },
primary: { iconWrap: "bg-primary/10", icon: "text-primary" },
info: { iconWrap: "bg-info/10", icon: "text-info" },
success: { iconWrap: "bg-success/10", icon: "text-success" },
warning: { iconWrap: "bg-warning/10", icon: "text-warning" },
};
const styles = toneStyles[tone];
return (
<Link href={href} className="group">
<div className="bg-card text-card-foreground rounded-2xl shadow-[var(--cp-card-shadow)] border border-border overflow-hidden hover:shadow-[var(--cp-card-shadow-lg)] transition-shadow duration-[var(--cp-duration-normal)] min-h-[116px] flex">
<div className="p-6 flex-1">
<div className="flex items-center">
<div className={`flex-shrink-0 p-3 rounded-xl bg-gradient-to-r ${gradient}`}>
<Icon className="h-6 w-6 text-white" />
</div>
<div className="ml-4 flex-1">
<p className="text-sm font-medium text-muted-foreground uppercase tracking-wide">
{title}
</p>
<p className="text-2xl font-bold text-foreground mt-1">{value}</p>
{Number(value) === 0 && zeroHint ? (
<span
onClick={e => {
// Prevent card navigation if clicking the hint
e.preventDefault();
e.stopPropagation();
router.push(zeroHint.href);
}}
className="mt-1 inline-flex items-center text-xs font-medium text-primary hover:underline cursor-pointer"
>
{zeroHint.text} →
</span>
) : null}
</div>
</div>
</div>
<Link
href={href}
className="group flex items-center gap-4 p-4 rounded-xl hover:bg-muted/50 transition-colors"
aria-label={`${title}: ${value}`}
>
<div
className={`flex-shrink-0 h-10 w-10 rounded-xl flex items-center justify-center ${styles.iconWrap}`}
aria-hidden="true"
>
<Icon className={`h-5 w-5 ${styles.icon}`} />
</div>
<div className="min-w-0 flex-1">
<p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">{title}</p>
<p className="text-2xl font-bold text-foreground mt-0.5 tabular-nums">{value}</p>
</div>
<ArrowRightIcon className="h-4 w-4 text-muted-foreground/40 group-hover:text-foreground group-hover:translate-x-0.5 transition-all" />
</Link>
);
}

41
apps/portal/src/features/dashboard/components/TasksChip.tsx
View File

@ -1,41 +0,0 @@
"use client";
import { useRouter } from "next/navigation";
import { generateDashboardTasks } from "@/features/dashboard/utils/dashboard.utils";
interface TasksChipProps {
summaryLoading: boolean;
summary: {
nextInvoice?: { id: number } | null;
stats?: { unpaidInvoices?: number; openCases?: number };
};
}
export function TasksChip({ summaryLoading, summary }: TasksChipProps) {
const router = useRouter();
if (summaryLoading) return null;
const tasks = generateDashboardTasks(summary);
const count = tasks.length;
if (count === 0) return null;
return (
<button
onClick={() => {
const first = tasks[0];
if (first.href.startsWith("#")) {
const el = document.querySelector(first.href);
if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
} else {
router.push(first.href);
}
}}
className="inline-flex items-center rounded-full bg-blue-50 text-blue-700 px-2.5 py-1 text-xs font-medium hover:bg-blue-100 transition-colors duration-200"
title={tasks.map(t => t.label).join(" • ")}
>
{count} task{count === 1 ? "" : "s"}
</button>
);
}
export type { TasksChipProps };

67
apps/portal/src/features/dashboard/components/UpcomingPaymentBanner.tsx
View File

@ -1,67 +0,0 @@
"use client";
import Link from "next/link";
import { CalendarDaysIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
import { format, formatDistanceToNow } from "date-fns";
import { useFormatCurrency } from "@/lib/hooks/useFormatCurrency";
import type { NextInvoice } from "@customer-portal/domain/dashboard";
interface UpcomingPaymentBannerProps {
invoice: NextInvoice;
onPay?: (invoiceId: number) => void;
loading?: boolean;
}
export function UpcomingPaymentBanner({ invoice, onPay, loading }: UpcomingPaymentBannerProps) {
const { formatCurrency } = useFormatCurrency();
return (
<div id="attention" className="bg-white rounded-xl border border-orange-200 shadow-sm p-4">
<div className="flex items-center gap-4">
<div className="flex-shrink-0">
<div className="w-10 h-10 rounded-md bg-gradient-to-r from-amber-500 to-orange-500 flex items-center justify-center">
<CalendarDaysIcon className="h-5 w-5 text-white" />
</div>
</div>
<div className="flex-1 min-w-0">
<div className="flex flex-wrap items-center gap-2 text-sm text-gray-700">
<span className="font-semibold text-gray-900">Upcoming Payment</span>
<span className="text-gray-400">•</span>
<span>Invoice #{invoice.id}</span>
<span className="text-gray-400">•</span>
<span title={format(new Date(invoice.dueDate), "MMMM d, yyyy")}>
Due {formatDistanceToNow(new Date(invoice.dueDate), { addSuffix: true })}
</span>
</div>
<div className="mt-1 text-2xl font-bold text-gray-900">
{formatCurrency(invoice.amount, { currency: invoice.currency })}
</div>
<div className="mt-1 text-xs text-gray-500">
Exact due date: {format(new Date(invoice.dueDate), "MMMM d, yyyy")}
</div>
</div>
<div className="flex flex-col items-end gap-2">
{onPay && (
<button
onClick={() => onPay(invoice.id)}
disabled={loading}
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
>
{loading ? "Opening Payment..." : "Pay Now"}
{!loading && <ChevronRightIcon className="ml-2 h-4 w-4" />}
</button>
)}
<Link
href={`/billing/invoices/${invoice.id}`}
className="text-blue-600 hover:text-blue-700 font-medium text-sm"
>
View invoice
</Link>
</div>
</div>
</div>
);
}
export type { UpcomingPaymentBannerProps };

1
apps/portal/src/features/dashboard/components/index.ts
View File

@ -2,3 +2,4 @@ export * from "./StatCard";
export * from "./QuickAction";
export * from "./DashboardActivityItem";
export * from "./AccountStatusCard";
export * from "./ActivityTimeline";

15
apps/portal/src/features/dashboard/utils/dashboard.utils.ts
View File

@ -78,21 +78,6 @@ export function formatActivityDate(date: string): string {
}
}
/**
* Get activity icon gradient class
*/
export function getActivityIconGradient(activityType: Activity["type"]): string {
const gradientMap: Record<Activity["type"], string> = {
invoice_created: "from-blue-500 to-cyan-500",
invoice_paid: "from-green-500 to-emerald-500",
service_activated: "from-purple-500 to-pink-500",
case_created: "from-yellow-500 to-orange-500",
case_closed: "from-green-500 to-emerald-500",
};
return gradientMap[activityType] || "from-gray-500 to-slate-500";
}
export function formatActivityDescription(activity: Activity): string {
switch (activity.type) {
case "invoice_created":

368
apps/portal/src/features/dashboard/views/DashboardView.tsx
View File

@ -4,25 +4,19 @@ import { useState, useEffect } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import type { Activity, DashboardSummary } from "@customer-portal/domain/dashboard";
import {
ServerIcon,
ChatBubbleLeftRightIcon,
ChevronRightIcon,
DocumentTextIcon,
ArrowTrendingUpIcon,
CalendarDaysIcon,
} from "@heroicons/react/24/outline";
import { ChevronRightIcon } from "@heroicons/react/24/outline";
import {
CreditCardIcon as CreditCardIconSolid,
ServerIcon as ServerIconSolid,
ChatBubbleLeftRightIcon as ChatBubbleLeftRightIconSolid,
ClipboardDocumentListIcon as ClipboardDocumentListIconSolid,
Squares2X2Icon as Squares2X2IconSolid,
} from "@heroicons/react/24/solid";
import { format, formatDistanceToNow } from "date-fns";
import { useAuthStore } from "@/features/auth/services/auth.store";
import { useDashboardSummary } from "@/features/dashboard/hooks";
import { StatCard, QuickAction, DashboardActivityItem } from "@/features/dashboard/components";
import { StatCard, ActivityTimeline } from "@/features/dashboard/components";
import { LoadingStats, LoadingTable } from "@/components/atoms";
import { ErrorState } from "@/components/atoms/error-state";
import { PageLayout } from "@/components/templates";
@ -71,7 +65,6 @@ export function DashboardView() {
// Handle activity item clicks
const handleActivityClick = (activity: Activity) => {
if (activity.type === "invoice_created" || activity.type === "invoice_paid") {
// Use the related invoice ID for navigation
if (activity.relatedId) {
router.push(`/billing/invoices/${activity.relatedId}`);
}
@ -115,175 +108,147 @@ export function DashboardView() {
actions={<TasksChip summaryLoading={summaryLoading} summary={summary} />}
>
{/* Greeting */}
<div className="flex items-start justify-between gap-4">
<div className="min-w-0">
<div className="text-sm text-muted-foreground">Welcome back</div>
<div className="text-xl sm:text-2xl font-semibold text-foreground truncate">
{user?.firstname || user?.email?.split("@")[0] || "User"}
</div>
<div className="mb-6">
<p className="text-sm font-medium text-muted-foreground">Welcome back</p>
<h2 className="text-2xl sm:text-3xl font-bold text-foreground truncate mt-1">
{user?.firstname || user?.email?.split("@")[0] || "User"}
</h2>
</div>
{/* Overview Stats Card */}
<div className="cp-card rounded-2xl">
<div className="mb-2">
<h3 className="text-sm font-semibold text-foreground">Overview</h3>
<p className="text-xs text-muted-foreground mt-0.5">Quick snapshot of your account</p>
</div>
</div>
{/* Stats */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--cp-space-2xl)]">
<StatCard
title="Recent Orders"
value={summary?.stats?.recentOrders ?? 0}
icon={ClipboardDocumentListIconSolid}
gradient="from-primary to-primary-hover"
href="/orders"
/>
<StatCard
title="Pending Invoices"
value={summary?.stats?.unpaidInvoices || 0}
icon={CreditCardIconSolid}
gradient={
(summary?.stats?.unpaidInvoices ?? 0) > 0
? "from-warning to-warning"
: "from-muted-foreground to-foreground"
}
href="/billing/invoices"
zeroHint={{ text: "Set up auto-pay", href: "/billing/payments" }}
/>
<StatCard
title="Active Services"
value={summary?.stats?.activeSubscriptions || 0}
icon={ServerIconSolid}
gradient="from-info to-primary"
href="/subscriptions"
/>
<StatCard
title="Support Cases"
value={summary?.stats?.openCases || 0}
icon={ChatBubbleLeftRightIconSolid}
gradient={
(summary?.stats?.openCases ?? 0) > 0
? "from-info to-primary"
: "from-muted-foreground to-foreground"
}
href="/support/cases"
zeroHint={{ text: "Open a ticket", href: "/support/new" }}
/>
</div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-[var(--cp-space-3xl)]">
{/* Main Content Area */}
<div className="lg:col-span-2 space-y-[var(--cp-space-3xl)]">
{/* Upcoming Payment */}
{upcomingInvoice && (
<div
id="attention"
className="bg-card border border-warning/35 rounded-xl p-4 shadow-[var(--cp-shadow-1)]"
>
<div className="flex items-center gap-4">
<div className="flex-shrink-0">
<div className="w-10 h-10 rounded-md bg-gradient-to-r from-warning to-warning flex items-center justify-center">
<CalendarDaysIcon className="h-5 w-5 text-warning-foreground" />
</div>
</div>
<div className="flex-1 min-w-0">
<div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
<span className="font-semibold text-foreground">Upcoming Payment</span>
<span className="text-muted-foreground/60">•</span>
<span>Invoice #{upcomingInvoice.id}</span>
<span className="text-muted-foreground/60">•</span>
<span title={format(new Date(upcomingInvoice.dueDate), "MMMM d, yyyy")}>
Due{" "}
{formatDistanceToNow(new Date(upcomingInvoice.dueDate), {
addSuffix: true,
})}
</span>
</div>
<div className="mt-1 text-2xl font-bold text-foreground">
{formatCurrency(upcomingInvoice.amount, {
currency: upcomingInvoice.currency,
})}
</div>
<div className="mt-1 text-xs text-muted-foreground">
Exact due date: {format(new Date(upcomingInvoice.dueDate), "MMMM d, yyyy")}
</div>
</div>
<div className="flex flex-col items-end gap-2">
<Button
size="sm"
onClick={() => handlePayNow(upcomingInvoice.id)}
isLoading={paymentLoading}
loadingText="Opening…"
rightIcon={
!paymentLoading ? <ChevronRightIcon className="h-4 w-4" /> : undefined
}
>
Pay now
</Button>
<Link
href={`/billing/invoices/${upcomingInvoice.id}`}
className="text-primary hover:underline font-medium text-sm"
>
View invoice
</Link>
</div>
</div>
</div>
)}
{/* Payment Error Display */}
{paymentError && (
<ErrorState
title="Payment Error"
message={paymentError}
variant="inline"
onRetry={() => setPaymentError(null)}
retryLabel="Dismiss"
/>
)}
{/* Recent Activity */}
<RecentActivityCard
activities={summary?.recentActivity || []}
onItemClick={handleActivityClick}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 divide-y sm:divide-y-0 sm:divide-x divide-border/60 -mx-4 sm:-mx-0">
<StatCard
title="Recent Orders"
value={summary?.stats?.recentOrders ?? 0}
icon={ClipboardDocumentListIconSolid}
tone="primary"
href="/orders"
/>
<StatCard
title="Pending Invoices"
value={summary?.stats?.unpaidInvoices ?? 0}
icon={CreditCardIconSolid}
tone={(summary?.stats?.unpaidInvoices ?? 0) > 0 ? "warning" : "neutral"}
href="/billing/invoices"
/>
<StatCard
title="Active Services"
value={summary?.stats?.activeSubscriptions ?? 0}
icon={ServerIconSolid}
tone="info"
href="/subscriptions"
/>
<StatCard
title="Support Cases"
value={summary?.stats?.openCases ?? 0}
icon={ChatBubbleLeftRightIconSolid}
tone={(summary?.stats?.openCases ?? 0) > 0 ? "info" : "neutral"}
href="/support/cases"
/>
<StatCard
title="Browse Catalog"
value="→"
icon={Squares2X2IconSolid}
tone="primary"
href="/catalog"
/>
</div>
</div>
{/* Sidebar */}
<div className="space-y-[var(--cp-space-2xl)]">
<div className="bg-card text-card-foreground rounded-2xl shadow-[var(--cp-card-shadow)] border border-border overflow-hidden">
<div className="px-6 py-4 border-b border-border">
<h3 className="text-lg font-semibold text-foreground">Quick Actions</h3>
{/* Billing Card - only shown when there's an upcoming invoice */}
{upcomingInvoice && (
<div className="cp-card rounded-2xl" id="attention">
<div className="flex items-center justify-between gap-4 mb-4">
<div>
<h3 className="text-sm font-semibold text-foreground">Upcoming Payment</h3>
<p className="text-xs text-muted-foreground mt-0.5">Invoice due soon</p>
</div>
<div className="p-[var(--cp-space-2xl)] space-y-[var(--cp-space-lg)]">
<QuickAction
href="/billing/invoices"
title="View invoices"
description="Review and pay invoices"
icon={DocumentTextIcon}
iconColor="text-primary"
bgColor="bg-primary/10"
/>
<QuickAction
href="/subscriptions"
title="Manage services"
description="View active subscriptions"
icon={ServerIcon}
iconColor="text-primary"
bgColor="bg-primary/10"
/>
<QuickAction
href="/support/new"
title="Get support"
description="Open a support ticket"
icon={ChatBubbleLeftRightIcon}
iconColor="text-primary"
bgColor="bg-primary/10"
/>
<Link
href="/billing/invoices"
className="text-sm font-medium text-primary hover:text-primary-hover transition-colors"
>
View all invoices
</Link>
</div>
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 p-4 rounded-xl bg-muted/30 border border-border/60">
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2">
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-warning/10 text-warning">
Due soon
</span>
<span className="text-sm text-muted-foreground">Invoice #{upcomingInvoice.id}</span>
</div>
<div className="mt-2 text-2xl font-bold text-foreground">
{formatCurrency(upcomingInvoice.amount, {
currency: upcomingInvoice.currency,
})}
</div>
<p className="mt-1 text-sm text-muted-foreground">
Due{" "}
{formatDistanceToNow(new Date(upcomingInvoice.dueDate), {
addSuffix: true,
})}{" "}
· {format(new Date(upcomingInvoice.dueDate), "MMMM d, yyyy")}
</p>
</div>
<div className="flex items-center gap-3">
<Link
href={`/billing/invoices/${upcomingInvoice.id}`}
className="text-sm font-medium text-primary hover:text-primary-hover transition-colors"
>
View details
</Link>
<Button
onClick={() => handlePayNow(upcomingInvoice.id)}
isLoading={paymentLoading}
loadingText="Opening…"
rightIcon={!paymentLoading ? <ChevronRightIcon className="h-4 w-4" /> : undefined}
>
Pay now
</Button>
</div>
</div>
</div>
)}
{/* Payment Error Display */}
{paymentError && (
<ErrorState
title="Payment Error"
message={paymentError}
variant="inline"
onRetry={() => setPaymentError(null)}
retryLabel="Dismiss"
/>
)}
{/* Recent Activity Card */}
<div className="cp-card rounded-2xl">
<div className="flex items-center justify-between gap-4 mb-5">
<div>
<h3 className="text-sm font-semibold text-foreground">Recent Activity</h3>
<p className="text-xs text-muted-foreground mt-0.5">Your latest account updates</p>
</div>
</div>
<ActivityTimeline
activities={summary?.recentActivity || []}
onItemClick={handleActivityClick}
maxItems={8}
/>
</div>
</PageLayout>
);
}
// Helpers and small components (local to dashboard)
// Helpers
function TasksChip({
summaryLoading,
summary,
@ -315,76 +280,3 @@ function TasksChip({
</button>
);
}
function RecentActivityCard({
activities,
onItemClick,
}: {
activities: Activity[];
onItemClick: (a: Activity) => void;
}) {
const [filter, setFilter] = useState<"all" | "billing" | "orders" | "support">("all");
const filtered = activities.filter(a => {
if (filter === "all") return true;
if (filter === "billing") return a.type === "invoice_created" || a.type === "invoice_paid";
if (filter === "orders") return a.type === "service_activated";
if (filter === "support") return a.type === "case_created" || a.type === "case_closed";
return true;
});
return (
<div className="bg-card text-card-foreground rounded-2xl shadow-[var(--cp-card-shadow)] border border-border overflow-hidden">
<div className="px-6 py-4 border-b border-border">
<div className="flex items-center justify-between">
<h3 className="text-lg font-semibold text-foreground">Recent Activity</h3>
<div className="flex items-center space-x-1 bg-muted rounded-lg p-1">
{(
[
{ k: "all", label: "All" },
{ k: "billing", label: "Billing" },
{ k: "orders", label: "Orders" },
{ k: "support", label: "Support" },
] as const
).map(opt => (
<button
key={opt.k}
onClick={() => setFilter(opt.k)}
className={`px-2.5 py-1 text-xs rounded-md font-medium ${
filter === opt.k
? "bg-card text-foreground shadow-[var(--cp-shadow-1)]"
: "text-muted-foreground hover:text-foreground"
}`}
>
{opt.label}
</button>
))}
</div>
</div>
</div>
<div className="p-6 max-h-[360px] overflow-y-auto">
{filtered.length > 0 ? (
<div className="space-y-4">
{filtered.slice(0, 10).map(activity => {
const isClickable =
activity.type === "invoice_created" || activity.type === "invoice_paid";
return (
<DashboardActivityItem
key={activity.id}
activity={activity}
onClick={isClickable ? () => onItemClick(activity) : undefined}
/>
);
})}
</div>
) : (
<div className="text-center py-12">
<ArrowTrendingUpIcon className="mx-auto h-12 w-12 text-muted-foreground/60" />
<h3 className="mt-2 text-sm font-medium text-foreground">No recent activity</h3>
<p className="mt-1 text-sm text-muted-foreground">
Your account activity will appear here.
</p>
</div>
)}
</div>
</div>
);
}

136
apps/portal/src/features/landing-page/views/PublicLandingView.tsx
View File

@ -6,44 +6,55 @@ import {
CreditCardIcon,
Cog6ToothIcon,
PhoneIcon,
ArrowRightIcon,
} from "@heroicons/react/24/outline";
export function PublicLandingView() {
return (
<div className="space-y-[var(--cp-space-3xl)]">
<div className="space-y-12">
{/* Hero */}
<section className="text-center space-y-4">
<div className="inline-flex items-center justify-center h-14 w-14 rounded-2xl border border-border bg-card shadow-[var(--cp-shadow-1)] mx-auto">
<Logo size={28} />
<section className="text-center space-y-8">
<div className="relative inline-block">
{/* Subtle glow behind logo */}
<div className="absolute inset-0 bg-primary/15 blur-3xl rounded-full scale-[2]" />
<div className="relative inline-flex items-center justify-center h-24 w-24 rounded-3xl bg-card border border-border/40 shadow-2xl shadow-primary/20 mx-auto">
<Logo size={56} />
</div>
</div>
<div className="space-y-4">
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-foreground">
Customer Portal
</h1>
<p className="text-lg sm:text-xl text-muted-foreground max-w-2xl mx-auto leading-relaxed">
Manage your services, billing, and support in one place.
</p>
</div>
<h1 className="text-3xl sm:text-4xl font-bold tracking-tight">Customer Portal</h1>
<p className="text-base sm:text-lg text-muted-foreground max-w-2xl mx-auto">
Manage your services, billing, and support in one place.
</p>
</section>
{/* Primary actions */}
<section className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="cp-card">
<div className="flex items-start gap-4">
<div className="h-11 w-11 rounded-xl bg-muted flex items-center justify-center flex-shrink-0">
<UserIcon className="h-6 w-6 text-foreground/70" />
<section className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
<div className="group relative bg-card rounded-2xl border border-border/50 p-7 shadow-lg shadow-black/5 hover:shadow-xl hover:border-border/80 transition-all duration-300 hover:-translate-y-1">
<div className="absolute inset-0 bg-gradient-to-br from-primary/5 to-transparent rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity" />
<div className="relative flex items-start gap-5">
<div className="h-14 w-14 rounded-2xl bg-gradient-to-br from-primary/15 to-primary/5 border border-primary/20 flex items-center justify-center flex-shrink-0">
<UserIcon className="h-7 w-7 text-primary" />
</div>
<div className="min-w-0 flex-1">
<h2 className="text-lg font-semibold">Existing customers</h2>
<p className="text-sm text-muted-foreground mt-1">
<h2 className="text-xl font-semibold text-foreground">Existing customers</h2>
<p className="text-sm text-muted-foreground mt-2 leading-relaxed">
Sign in or migrate your account from the old system.
</p>
<div className="mt-4 flex flex-col sm:flex-row gap-2">
<div className="mt-6 flex flex-col sm:flex-row gap-3">
<Link
href="/auth/login"
className="inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium bg-primary text-primary-foreground hover:bg-primary-hover transition-colors"
className="inline-flex items-center justify-center gap-2 rounded-xl px-6 py-3 text-sm font-semibold bg-primary text-primary-foreground hover:bg-primary-hover shadow-md shadow-primary/25 hover:shadow-lg hover:shadow-primary/30 transition-all"
>
Sign in
<ArrowRightIcon className="h-4 w-4" />
</Link>
<Link
href="/auth/link-whmcs"
className="inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium border border-border bg-card hover:bg-muted transition-colors"
className="inline-flex items-center justify-center rounded-xl px-6 py-3 text-sm font-medium border border-border bg-card hover:bg-muted/50 transition-colors"
>
Migrate account
</Link>
@ -52,22 +63,24 @@ export function PublicLandingView() {
</div>
</div>
<div className="cp-card">
<div className="flex items-start gap-4">
<div className="h-11 w-11 rounded-xl bg-muted flex items-center justify-center flex-shrink-0">
<SparklesIcon className="h-6 w-6 text-foreground/70" />
<div className="group relative bg-card rounded-2xl border border-border/50 p-7 shadow-lg shadow-black/5 hover:shadow-xl hover:border-border/80 transition-all duration-300 hover:-translate-y-1">
<div className="absolute inset-0 bg-gradient-to-br from-success/5 to-transparent rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity" />
<div className="relative flex items-start gap-5">
<div className="h-14 w-14 rounded-2xl bg-gradient-to-br from-success/15 to-success/5 border border-success/20 flex items-center justify-center flex-shrink-0">
<SparklesIcon className="h-7 w-7 text-success" />
</div>
<div className="min-w-0 flex-1">
<h2 className="text-lg font-semibold">New customers</h2>
<p className="text-sm text-muted-foreground mt-1">
Create an account to get started.
<h2 className="text-xl font-semibold text-foreground">New customers</h2>
<p className="text-sm text-muted-foreground mt-2 leading-relaxed">
Create an account to get started with our services.
</p>
<div className="mt-4">
<div className="mt-6">
<Link
href="/auth/signup"
className="inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium bg-primary text-primary-foreground hover:bg-primary-hover transition-colors"
className="inline-flex items-center justify-center gap-2 rounded-xl px-6 py-3 text-sm font-semibold bg-primary text-primary-foreground hover:bg-primary-hover shadow-md shadow-primary/25 hover:shadow-lg hover:shadow-primary/30 transition-all"
>
Create account
<ArrowRightIcon className="h-4 w-4" />
</Link>
</div>
</div>
@ -76,41 +89,50 @@ export function PublicLandingView() {
</section>
{/* Feature highlights */}
<section className="cp-card">
<div className="flex items-center justify-between gap-4 flex-wrap mb-6">
<h2 className="text-lg font-semibold">Everything you need</h2>
<Link href="/support" className="text-sm font-medium text-primary hover:underline">
Need help?
</Link>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div className="rounded-xl border border-border bg-card p-5">
<div className="h-10 w-10 rounded-lg bg-muted flex items-center justify-center mb-3">
<CreditCardIcon className="h-5 w-5 text-foreground/70" />
</div>
<div className="font-semibold">Billing</div>
<div className="text-sm text-muted-foreground mt-1">
View invoices, payments, and billing history.
<section className="max-w-4xl mx-auto">
<div className="bg-card rounded-2xl border border-border/50 p-8 sm:p-10 shadow-lg shadow-black/5">
<div className="flex items-center justify-between gap-4 flex-wrap mb-10">
<div>
<h2 className="text-2xl font-bold text-foreground">Everything you need</h2>
<p className="text-muted-foreground mt-2">Powerful tools to manage your account</p>
</div>
<Link
href="/support"
className="inline-flex items-center gap-2 text-sm font-semibold text-primary hover:text-primary-hover transition-colors"
>
Need help?
<ArrowRightIcon className="h-4 w-4" />
</Link>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-5">
<div className="group rounded-2xl border border-border/50 bg-card p-6 hover:border-primary/30 hover:shadow-md transition-all duration-300">
<div className="h-12 w-12 rounded-xl bg-gradient-to-br from-primary/15 to-primary/5 border border-primary/15 flex items-center justify-center mb-5">
<CreditCardIcon className="h-6 w-6 text-primary" />
</div>
<div className="text-lg font-semibold text-foreground">Billing</div>
<div className="text-sm text-muted-foreground mt-2 leading-relaxed">
View invoices, payments, and billing history.
</div>
</div>
<div className="rounded-xl border border-border bg-card p-5">
<div className="h-10 w-10 rounded-lg bg-muted flex items-center justify-center mb-3">
<Cog6ToothIcon className="h-5 w-5 text-foreground/70" />
<div className="group rounded-2xl border border-border/50 bg-card p-6 hover:border-info/30 hover:shadow-md transition-all duration-300">
<div className="h-12 w-12 rounded-xl bg-gradient-to-br from-info/15 to-info/5 border border-info/15 flex items-center justify-center mb-5">
<Cog6ToothIcon className="h-6 w-6 text-info" />
</div>
<div className="text-lg font-semibold text-foreground">Services</div>
<div className="text-sm text-muted-foreground mt-2 leading-relaxed">
Manage subscriptions and service details.
</div>
</div>
<div className="font-semibold">Services</div>
<div className="text-sm text-muted-foreground mt-1">
Manage subscriptions and service details.
</div>
</div>
<div className="rounded-xl border border-border bg-card p-5">
<div className="h-10 w-10 rounded-lg bg-muted flex items-center justify-center mb-3">
<PhoneIcon className="h-5 w-5 text-foreground/70" />
</div>
<div className="font-semibold">Support</div>
<div className="text-sm text-muted-foreground mt-1">
Create cases and track responses in one place.
<div className="group rounded-2xl border border-border/50 bg-card p-6 hover:border-success/30 hover:shadow-md transition-all duration-300">
<div className="h-12 w-12 rounded-xl bg-gradient-to-br from-success/15 to-success/5 border border-success/15 flex items-center justify-center mb-5">
<PhoneIcon className="h-6 w-6 text-success" />
</div>
<div className="text-lg font-semibold text-foreground">Support</div>
<div className="text-sm text-muted-foreground mt-2 leading-relaxed">
Create cases and track responses in one place.
</div>
</div>
</div>
</div>

42
apps/portal/src/features/orders/components/OrderCard.tsx
View File

@ -34,10 +34,10 @@ const STATUS_PILL_VARIANT = {
} as const;
const SERVICE_ICON_STYLES = {
internet: "bg-blue-50 text-blue-600",
sim: "bg-violet-50 text-violet-600",
vpn: "bg-teal-50 text-teal-600",
default: "bg-slate-50 text-slate-600",
internet: "bg-info/10 text-info border border-info/10",
sim: "bg-primary/10 text-primary border border-primary/10",
vpn: "bg-success/10 text-success border border-success/10",
default: "bg-muted text-muted-foreground border border-border",
} as const;
const renderServiceIcon = (orderType?: string): ReactNode => {
@ -100,9 +100,9 @@ export function OrderCard({ order, onClick, footer, className }: OrderCardProps)
<article
key={String(order.id)}
className={cn(
"group overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm transition-all focus-visible:outline-none",
"group overflow-hidden rounded-2xl border border-border bg-card shadow-[var(--cp-shadow-1)] transition-all duration-200 focus-visible:outline-none",
isInteractive &&
"cursor-pointer hover:border-blue-200 hover:shadow-md focus-within:border-blue-300 focus-within:ring-2 focus-within:ring-blue-100",
"cursor-pointer hover:border-primary/30 hover:shadow-lg hover:-translate-y-0.5 focus-within:border-primary/40 focus-within:ring-2 focus-within:ring-primary/10",
className
)}
onClick={onClick}
@ -110,13 +110,13 @@ export function OrderCard({ order, onClick, footer, className }: OrderCardProps)
role={isInteractive ? "button" : undefined}
tabIndex={isInteractive ? 0 : undefined}
>
<div className="px-6 py-4">
<div className="flex items-start justify-between gap-6">
<div className="px-5 sm:px-6 py-5">
<div className="flex items-start justify-between gap-4 sm:gap-6">
{/* Left section: Icon + Service info + Status */}
<div className="flex items-start gap-3 flex-1 min-w-0">
<div className="flex items-start gap-3 sm:gap-4 flex-1 min-w-0">
<div
className={cn(
"flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg",
"flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-xl",
iconStyles
)}
>
@ -124,14 +124,14 @@ export function OrderCard({ order, onClick, footer, className }: OrderCardProps)
</div>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 flex-wrap">
<h3 className="font-semibold text-gray-900">{serviceName}</h3>
<h3 className="font-semibold text-foreground">{serviceName}</h3>
<StatusPill label={statusDescriptor.label} variant={statusVariant} />
</div>
<div className="mt-1 flex items-center gap-2 text-xs text-gray-500">
<div className="mt-1.5 flex items-center gap-2 text-xs text-muted-foreground">
<span className="font-medium">
#{order.orderNumber || String(order.id).slice(-8)}
</span>
<span>•</span>
<span className="text-muted-foreground/40">•</span>
<span>{formattedCreatedDate || "—"}</span>
</div>
{displayItems.length > 0 && (
@ -139,7 +139,7 @@ export function OrderCard({ order, onClick, footer, className }: OrderCardProps)
{displayItems.map(item => (
<span
key={item.id}
className="inline-flex items-center rounded-md bg-slate-100 px-2.5 py-1 text-xs font-medium text-slate-700"
className="inline-flex items-center rounded-lg bg-muted px-2.5 py-1 text-xs font-medium text-muted-foreground"
>
{item.name}
</span>
@ -151,23 +151,23 @@ export function OrderCard({ order, onClick, footer, className }: OrderCardProps)
{/* Right section: Pricing */}
{showPricing && (
<div className="flex items-start gap-4 flex-shrink-0">
<div className="flex items-start gap-4 sm:gap-5 flex-shrink-0">
{totals.monthlyTotal > 0 && (
<div className="text-right">
<p className="text-[10px] font-medium uppercase tracking-wider text-blue-600">
<p className="text-[10px] font-semibold uppercase tracking-wider text-primary">
Monthly
</p>
<p className="text-xl font-bold text-gray-900">
<p className="text-xl font-bold text-foreground tabular-nums">
¥{totals.monthlyTotal.toLocaleString()}
</p>
</div>
)}
{totals.oneTimeTotal > 0 && (
<div className="text-right">
<p className="text-[10px] font-medium uppercase tracking-wider text-blue-600">
<p className="text-[10px] font-semibold uppercase tracking-wider text-primary">
One-Time
</p>
<p className="text-lg font-bold text-gray-900">
<p className="text-lg font-bold text-foreground tabular-nums">
¥{totals.oneTimeTotal.toLocaleString()}
</p>
</div>
@ -176,7 +176,9 @@ export function OrderCard({ order, onClick, footer, className }: OrderCardProps)
)}
</div>
</div>
{footer && <div className="border-t border-slate-100 bg-slate-50 px-6 py-3">{footer}</div>}
{footer && (
<div className="border-t border-border bg-muted/30 px-5 sm:px-6 py-3">{footer}</div>
)}
</article>
);
}

72
apps/portal/src/features/orders/views/OrderDetail.tsx
View File

@ -17,10 +17,8 @@ import {
ClockIcon,
Squares2X2Icon,
ExclamationTriangleIcon,
ArrowLeftIcon,
} from "@heroicons/react/24/outline";
import { StatusPill } from "@/components/atoms/status-pill";
import { Button } from "@/components/atoms/button";
import { ordersService } from "@/features/orders/services/orders.service";
import { useOrderUpdates } from "@/features/orders/hooks/useOrderUpdates";
import {
@ -97,23 +95,23 @@ const ITEM_VISUAL_STYLES: Record<
}
> = {
service: {
container: "border-info/30 bg-card",
container: "bg-card",
icon: "bg-info-soft text-info",
},
installation: {
container: "border-success/25 bg-card",
container: "bg-card",
icon: "bg-success-soft text-success",
},
addon: {
container: "border-border bg-card",
container: "bg-card",
icon: "bg-muted text-foreground/70",
},
activation: {
container: "border-success/25 bg-card",
container: "bg-card",
icon: "bg-success-soft text-success",
},
other: {
container: "border-border bg-card",
container: "bg-card",
icon: "bg-muted text-muted-foreground",
},
};
@ -269,29 +267,18 @@ export function OrderDetailContainer() {
useOrderUpdates(params.id, handleOrderUpdate);
const orderNumber = data?.orderNumber || (data ? String(data.id).slice(-8) : "");
return (
<PageLayout
icon={<ClipboardDocumentCheckIcon />}
title={data ? `${data.orderType} Service Order` : "Order Details"}
description={
data
? `Order #${data.orderNumber || String(data.id).slice(-8)}`
: "Loading order details..."
}
description={data ? `Order #${orderNumber}` : "Loading order details..."}
breadcrumbs={[
{ label: "Orders", href: "/orders" },
{ label: data ? `Order #${orderNumber}` : "Order Details" },
]}
>
<div className="mb-6">
<Button
as="a"
href="/orders"
size="sm"
variant="ghost"
leftIcon={<ArrowLeftIcon className="h-4 w-4" />}
className="text-muted-foreground hover:text-foreground"
>
Back to orders
</Button>
</div>
{error && <div className="mb-4 text-sm text-destructive">{error}</div>}
{isNewOrder && (
@ -382,26 +369,27 @@ export function OrderDetailContainer() {
No items found on this order.
</div>
) : (
displayItems.map((item, itemIndex) => {
const categoryConfig =
CATEGORY_CONFIG[item.primaryCategory] ?? CATEGORY_CONFIG.other;
const Icon = categoryConfig.icon;
const style = getItemVisualStyle(item);
<div className="rounded-xl border border-border overflow-hidden divide-y divide-border">
{displayItems.map(item => {
const categoryConfig =
CATEGORY_CONFIG[item.primaryCategory] ?? CATEGORY_CONFIG.other;
const Icon = categoryConfig.icon;
const style = getItemVisualStyle(item);
return (
<div key={item.id}>
return (
<div
key={item.id}
className={cn(
"flex flex-col gap-3 rounded-xl border px-4 py-4 sm:flex-row sm:items-center sm:justify-between",
"flex flex-col gap-3 px-4 py-4 sm:flex-row sm:items-center sm:justify-between",
style.container,
itemIndex > 0 && "border-t-0 rounded-t-none"
"border-0 rounded-none"
)}
>
{/* Icon + Title & Category | Price */}
<div className="flex flex-1 items-start gap-3">
<div
className={cn(
"flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-lg",
"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg",
style.icon
)}
>
@ -449,9 +437,9 @@ export function OrderDetailContainer() {
</div>
</div>
</div>
</div>
);
})
);
})}
</div>
)}
</div>
</div>
@ -472,14 +460,14 @@ export function OrderDetailContainer() {
)}
{showFeeNotice && (
<div className="border-l-4 border-amber-500 bg-amber-50 px-4 py-3">
<div className="border-l-4 border-warning bg-warning-soft px-4 py-3">
<div className="flex items-start gap-3">
<ExclamationTriangleIcon className="h-5 w-5 flex-shrink-0 text-amber-600" />
<ExclamationTriangleIcon className="h-5 w-5 flex-shrink-0 text-warning" />
<div>
<p className="text-sm font-semibold text-amber-900">
<p className="text-sm font-semibold text-foreground">
Installation Fee Notice
</p>
<p className="mt-1 text-sm text-amber-800">
<p className="mt-1 text-sm text-muted-foreground">
Standard installation is included. Additional charges may apply for
weekend scheduling, express service, or specialized equipment
installation. Any extra fees will be discussed and approved by you before

70
apps/portal/src/features/subscriptions/components/SubscriptionCard.tsx
View File

@ -45,17 +45,25 @@ export const SubscriptionCard = forwardRef<HTMLDivElement, SubscriptionCardProps
if (variant === "grid") {
return (
<SubCard ref={ref} className={cn("hover:shadow-lg transition-all duration-200", className)}>
<SubCard
ref={ref}
className={cn(
"hover:shadow-lg hover:-translate-y-0.5 transition-all duration-200",
className
)}
>
<div className="space-y-4">
{/* Header */}
<div className="flex items-start justify-between">
<div className="flex items-center space-x-3">
{getSubscriptionStatusIcon(subscription.status)}
<div className="min-w-0 flex-1">
<h3 className="text-lg font-semibold text-gray-900 truncate">
<h3 className="text-lg font-semibold text-foreground truncate">
{subscription.productName}
</h3>
<p className="text-sm text-gray-500">Service ID: {subscription.serviceId}</p>
<p className="text-sm text-muted-foreground">
Service ID: {subscription.serviceId}
</p>
</div>
</div>
<StatusPill
@ -68,23 +76,31 @@ export const SubscriptionCard = forwardRef<HTMLDivElement, SubscriptionCardProps
{/* Details */}
<div className="grid grid-cols-2 gap-4 text-sm">
<div>
<p className="text-gray-500">Price</p>
<p className="font-semibold text-gray-900">{formatCurrency(subscription.amount)}</p>
<p className="text-xs text-gray-500">{getBillingCycleLabel(subscription.cycle)}</p>
<p className="text-muted-foreground text-xs font-medium uppercase tracking-wider">
Price
</p>
<p className="font-semibold text-foreground mt-1">
{formatCurrency(subscription.amount)}
</p>
<p className="text-xs text-muted-foreground">
{getBillingCycleLabel(subscription.cycle)}
</p>
</div>
<div>
<p className="text-gray-500">Next Due</p>
<div className="flex items-center space-x-1">
<CalendarIcon className="h-4 w-4 text-gray-400" />
<p className="font-medium text-gray-900">{formatDate(subscription.nextDue)}</p>
<p className="text-muted-foreground text-xs font-medium uppercase tracking-wider">
Next Due
</p>
<div className="flex items-center space-x-1 mt-1">
<CalendarIcon className="h-4 w-4 text-muted-foreground/60" />
<p className="font-medium text-foreground">{formatDate(subscription.nextDue)}</p>
</div>
</div>
</div>
{/* Actions */}
{showActions && (
<div className="flex items-center justify-between pt-2 border-t border-gray-100">
<p className="text-xs text-gray-500">
<div className="flex items-center justify-between pt-3 border-t border-border/60">
<p className="text-xs text-muted-foreground">
Created {formatDate(subscription.registrationDate)}
</p>
<div className="flex items-center space-x-2">
@ -106,13 +122,19 @@ export const SubscriptionCard = forwardRef<HTMLDivElement, SubscriptionCardProps
// List variant (default)
return (
<SubCard ref={ref} className={cn("hover:shadow-md transition-all duration-200", className)}>
<SubCard
ref={ref}
className={cn(
"hover:shadow-lg hover:-translate-y-0.5 transition-all duration-200",
className
)}
>
<div className="flex items-center justify-between">
<div className="flex items-center space-x-4 min-w-0 flex-1">
{getSubscriptionStatusIcon(subscription.status)}
<div className="min-w-0 flex-1">
<div className="flex items-center space-x-3">
<h3 className="text-base font-semibold text-gray-900 truncate">
<h3 className="text-base font-semibold text-foreground truncate">
{subscription.productName}
</h3>
<StatusPill
@ -121,22 +143,28 @@ export const SubscriptionCard = forwardRef<HTMLDivElement, SubscriptionCardProps
size="sm"
/>
</div>
<p className="text-sm text-gray-500 mt-1">Service ID: {subscription.serviceId}</p>
<p className="text-sm text-muted-foreground mt-1">
Service ID: {subscription.serviceId}
</p>
</div>
</div>
<div className="flex items-center space-x-6 text-sm">
<div className="text-right">
<p className="font-semibold text-gray-900">{formatCurrency(subscription.amount)}</p>
<p className="text-gray-500">{getBillingCycleLabel(subscription.cycle)}</p>
<p className="font-semibold text-foreground tabular-nums">
{formatCurrency(subscription.amount)}
</p>
<p className="text-muted-foreground text-xs">
{getBillingCycleLabel(subscription.cycle)}
</p>
</div>
<div className="text-right">
<div className="text-right hidden sm:block">
<div className="flex items-center space-x-1">
<CalendarIcon className="h-4 w-4 text-gray-400" />
<p className="text-gray-900">{formatDate(subscription.nextDue)}</p>
<CalendarIcon className="h-4 w-4 text-muted-foreground/60" />
<p className="text-foreground">{formatDate(subscription.nextDue)}</p>
</div>
<p className="text-gray-500">Next due</p>
<p className="text-muted-foreground text-xs">Next due</p>
</div>
{showActions && (

58
apps/portal/src/features/subscriptions/components/SubscriptionTable/SubscriptionTable.tsx
View File

@ -32,13 +32,13 @@ interface SubscriptionTableProps {
const getStatusIcon = (status: string) => {
switch (status) {
case SUBSCRIPTION_STATUS.ACTIVE:
return <CheckCircleIcon className="h-5 w-5 text-green-500" />;
return <CheckCircleIcon className="h-5 w-5 text-success" />;
case SUBSCRIPTION_STATUS.COMPLETED:
return <CheckCircleIcon className="h-5 w-5 text-blue-500" />;
return <CheckCircleIcon className="h-5 w-5 text-primary" />;
case SUBSCRIPTION_STATUS.CANCELLED:
return <XCircleIcon className="h-5 w-5 text-gray-500" />;
return <XCircleIcon className="h-5 w-5 text-muted-foreground" />;
default:
return <ClockIcon className="h-5 w-5 text-gray-500" />;
return <ClockIcon className="h-5 w-5 text-muted-foreground" />;
}
};
@ -116,11 +116,11 @@ export function SubscriptionTable({
render: (subscription: Subscription) => {
const statusIcon = getStatusIcon(subscription.status);
return (
<div className="flex items-center space-x-3 py-4">
<div className="flex items-center space-x-3 py-5">
<div className="flex-shrink-0">{statusIcon}</div>
<div className="min-w-0 flex-1">
<div className="flex items-center gap-2.5">
<div className="font-semibold text-gray-900 text-sm">
<div className="font-semibold text-foreground text-sm">
{subscription.productName}
</div>
<StatusPill
@ -139,10 +139,10 @@ export function SubscriptionTable({
header: "Amount",
className: "",
render: (subscription: Subscription) => (
<div className="py-4 text-right">
<div className="font-semibold text-gray-900 text-sm">
<div className="py-5 text-right">
<div className="font-bold text-foreground text-sm tabular-nums">
{formatCurrency(subscription.amount, subscription.currency)}{" "}
<span className="text-xs text-gray-500 font-normal">
<span className="text-xs text-muted-foreground font-normal">
{getBillingPeriodText(subscription.cycle)}
</span>
</div>
@ -154,10 +154,10 @@ export function SubscriptionTable({
header: "Next Due",
className: "",
render: (subscription: Subscription) => (
<div className="py-4">
<div className="py-5">
<div className="flex items-center gap-2">
<CalendarIcon className="h-4 w-4 text-gray-400" />
<div className="text-sm font-medium text-gray-700">
<CalendarIcon className="h-4 w-4 text-muted-foreground" />
<div className="text-sm font-medium text-foreground">
{formatDate(subscription.nextDue)}
</div>
</div>
@ -175,33 +175,33 @@ export function SubscriptionTable({
if (loading) {
return (
<div className={cn("bg-white overflow-hidden", className)}>
<div className={cn("bg-card overflow-hidden", className)}>
<div className="animate-pulse">
{/* Header skeleton */}
<div className="bg-gradient-to-r from-gray-50 to-gray-50/80 px-6 py-4 border-b border-gray-200/80">
<div className="bg-muted/50 px-6 py-4 border-b border-border">
<div className="grid grid-cols-3 gap-6">
<div className="h-3 bg-gray-200 rounded w-24"></div>
<div className="h-3 bg-gray-200 rounded w-20 ml-auto"></div>
<div className="h-3 bg-gray-200 rounded w-24"></div>
<div className="h-3 bg-muted rounded w-24"></div>
<div className="h-3 bg-muted rounded w-20 ml-auto"></div>
<div className="h-3 bg-muted rounded w-24"></div>
</div>
</div>
{/* Row skeletons */}
<div className="divide-y divide-gray-100/60">
<div className="divide-y divide-border">
{Array.from({ length: 6 }).map((_, i) => (
<div key={i} className="px-6 py-5">
<div className="grid grid-cols-3 gap-6 items-center">
<div className="flex items-center space-x-3">
<div className="h-5 w-5 bg-gray-200 rounded-full flex-shrink-0"></div>
<div className="h-5 w-5 bg-muted rounded-full flex-shrink-0"></div>
<div className="space-y-2 flex-1">
<div className="h-4 bg-gray-200 rounded w-48"></div>
<div className="h-4 bg-muted rounded w-48"></div>
</div>
</div>
<div className="text-right">
<div className="h-4 bg-gray-200 rounded w-32 ml-auto"></div>
<div className="h-4 bg-muted rounded w-32 ml-auto"></div>
</div>
<div className="flex items-center gap-2">
<div className="h-4 w-4 bg-gray-200 rounded"></div>
<div className="h-4 bg-gray-200 rounded w-28"></div>
<div className="h-4 w-4 bg-muted rounded"></div>
<div className="h-4 bg-muted rounded w-28"></div>
</div>
</div>
</div>
@ -213,7 +213,7 @@ export function SubscriptionTable({
}
return (
<div className={cn("bg-white overflow-hidden", className)}>
<div className={cn("bg-card overflow-hidden", className)}>
<DataTable
data={subscriptions}
columns={columns}
@ -222,14 +222,14 @@ export function SubscriptionTable({
className={cn(
"subscription-table",
// Header styling - cleaner and more modern
"[&_thead]:bg-gradient-to-r [&_thead]:from-gray-50 [&_thead]:to-gray-50/80",
"[&_thead_th]:px-6 [&_thead_th]:py-3.5 [&_thead_th]:text-xs [&_thead_th]:font-medium [&_thead_th]:text-gray-600 [&_thead_th]:uppercase [&_thead_th]:tracking-wide",
"[&_thead_th]:border-b [&_thead_th]:border-gray-200/80",
"[&_thead]:bg-muted/50",
"[&_thead_th]:px-6 [&_thead_th]:py-3.5 [&_thead_th]:text-xs [&_thead_th]:font-medium [&_thead_th]:text-muted-foreground [&_thead_th]:uppercase [&_thead_th]:tracking-wide",
"[&_thead_th]:border-b [&_thead_th]:border-border",
// Right-align Amount column header (2nd column)
"[&_thead_th:nth-child(2)]:text-right",
// Row styling - enhanced hover and spacing
"[&_tbody_tr]:border-b [&_tbody_tr]:border-gray-100/60 [&_tbody_tr]:transition-all [&_tbody_tr]:duration-200",
"[&_tbody_tr:hover]:bg-gradient-to-r [&_tbody_tr:hover]:from-blue-50/30 [&_tbody_tr:hover]:to-indigo-50/20 [&_tbody_tr]:cursor-pointer",
"[&_tbody_tr]:border-b [&_tbody_tr]:border-border [&_tbody_tr]:transition-all [&_tbody_tr]:duration-200",
"[&_tbody_tr:hover]:bg-primary/5 [&_tbody_tr]:cursor-pointer",
"[&_tbody_tr:last-child]:border-b-0",
// Cell styling - better spacing
"[&_tbody_td]:px-6 [&_tbody_td]:py-1 [&_tbody_td]:align-top",

10
apps/portal/src/features/subscriptions/utils/status-presenters.tsx
View File

@ -16,13 +16,13 @@ import {
export type SubscriptionStatusVariant = "success" | "info" | "warning" | "neutral" | "error";
const STATUS_ICON_MAP: Record<SubscriptionStatus, ReactNode> = {
[SUBSCRIPTION_STATUS.ACTIVE]: <CheckCircleIcon className="h-6 w-6 text-green-500" />,
[SUBSCRIPTION_STATUS.ACTIVE]: <CheckCircleIcon className="h-6 w-6 text-success" />,
[SUBSCRIPTION_STATUS.INACTIVE]: <ServerIcon className="h-6 w-6 text-muted-foreground" />,
[SUBSCRIPTION_STATUS.PENDING]: <ClockIcon className="h-6 w-6 text-blue-500" />,
[SUBSCRIPTION_STATUS.SUSPENDED]: <ExclamationTriangleIcon className="h-6 w-6 text-yellow-500" />,
[SUBSCRIPTION_STATUS.TERMINATED]: <XCircleIcon className="h-6 w-6 text-red-500" />,
[SUBSCRIPTION_STATUS.PENDING]: <ClockIcon className="h-6 w-6 text-info" />,
[SUBSCRIPTION_STATUS.SUSPENDED]: <ExclamationTriangleIcon className="h-6 w-6 text-warning" />,
[SUBSCRIPTION_STATUS.TERMINATED]: <XCircleIcon className="h-6 w-6 text-destructive" />,
[SUBSCRIPTION_STATUS.CANCELLED]: <XCircleIcon className="h-6 w-6 text-muted-foreground" />,
[SUBSCRIPTION_STATUS.COMPLETED]: <CheckCircleIcon className="h-6 w-6 text-green-500" />,
[SUBSCRIPTION_STATUS.COMPLETED]: <CheckCircleIcon className="h-6 w-6 text-success" />,
};
const STATUS_VARIANT_MAP: Record<SubscriptionStatus, SubscriptionStatusVariant> = {

202
apps/portal/src/features/subscriptions/views/SubscriptionDetail.tsx
View File

@ -1,7 +1,5 @@
"use client";
import { SubCard } from "@/components/molecules/SubCard/SubCard";
import { DetailHeader } from "@/components/molecules/DetailHeader/DetailHeader";
import { useEffect, useState } from "react";
import { useParams, useSearchParams } from "next/navigation";
import Link from "next/link";
@ -11,41 +9,35 @@ import { useSubscription } from "@/features/subscriptions/hooks";
import { InvoicesList } from "@/features/billing/components/InvoiceList/InvoiceList";
import { Formatting } from "@customer-portal/domain/toolkit";
import { PageLayout } from "@/components/templates/PageLayout";
import { StatusPill } from "@/components/atoms/status-pill";
const { formatCurrency: sharedFormatCurrency } = Formatting;
import { SimManagementSection } from "@/features/sim-management";
import {
getBillingCycleLabel,
getSubscriptionStatusIcon,
getSubscriptionStatusVariant,
} from "@/features/subscriptions/utils/status-presenters";
import { cn } from "@/lib/utils";
export function SubscriptionDetailContainer() {
const params = useParams();
const searchParams = useSearchParams();
const [showInvoices, setShowInvoices] = useState(true);
const [showSimManagement, setShowSimManagement] = useState(false);
const [activeTab, setActiveTab] = useState<"overview" | "sim">("overview");
const subscriptionId = parseInt(params.id as string);
const { data: subscription, isLoading, error } = useSubscription(subscriptionId);
useEffect(() => {
const updateVisibility = () => {
const updateTab = () => {
const hash = typeof window !== "undefined" ? window.location.hash : "";
const service = (searchParams.get("service") || "").toLowerCase();
const isSimContext = hash.includes("sim-management") || service === "sim";
if (isSimContext) {
setShowInvoices(false);
setShowSimManagement(true);
} else {
setShowInvoices(true);
setShowSimManagement(false);
}
setActiveTab(isSimContext ? "sim" : "overview");
};
updateVisibility();
updateTab();
if (typeof window !== "undefined") {
window.addEventListener("hashchange", updateVisibility);
return () => window.removeEventListener("hashchange", updateVisibility);
window.addEventListener("hashchange", updateTab);
return () => window.removeEventListener("hashchange", updateTab);
}
return;
}, [searchParams]);
@ -87,104 +79,114 @@ export function SubscriptionDetailContainer() {
error={pageError}
>
{subscription ? (
<div className="max-w-7xl mx-auto">
<SubCard className="mb-6">
<DetailHeader
title="Subscription Details"
subtitle="Service subscription information"
leftIcon={getSubscriptionStatusIcon(subscription.status)}
status={{
label: subscription.status,
variant: getSubscriptionStatusVariant(subscription.status),
}}
/>
<div className="pt-4">
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div>
<h4 className="text-sm font-medium text-muted-foreground uppercase tracking-wider">
Billing Amount
</h4>
<div className="mt-2 flex items-baseline gap-2">
<p className="text-2xl font-bold text-foreground">
{formatCurrency(subscription.amount)}
</p>
<span className="text-sm text-muted-foreground">
{getBillingCycleLabel(subscription.cycle)}
</span>
<div className="space-y-6">
{/* Main Subscription Card */}
<div className="bg-card border border-border rounded-2xl shadow-sm overflow-hidden">
{/* Header with status */}
<div className="px-6 py-5 border-b border-border">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="h-10 w-10 rounded-xl bg-primary/10 flex items-center justify-center">
<ServerIcon className="h-5 w-5 text-primary" />
</div>
</div>
<div>
<h4 className="text-sm font-medium text-muted-foreground uppercase tracking-wider">
Next Due Date
</h4>
<div className="flex items-center mt-2">
<CalendarIcon className="h-4 w-4 text-muted-foreground/70 mr-2" />
<p className="text-lg font-medium text-foreground">
{formatDate(subscription.nextDue)}
<div>
<h2 className="text-lg font-semibold text-foreground">Subscription Details</h2>
<p className="text-sm text-muted-foreground">
Service subscription information
</p>
</div>
</div>
<div>
<h4 className="text-sm font-medium text-muted-foreground uppercase tracking-wider">
Registration Date
</h4>
<div className="flex items-center mt-2">
<CalendarIcon className="h-4 w-4 text-muted-foreground/70 mr-2" />
<p className="text-lg font-medium text-foreground">
{formatDate(subscription.registrationDate)}
</p>
</div>
<StatusPill
label={subscription.status}
variant={getSubscriptionStatusVariant(subscription.status)}
/>
</div>
</div>
{/* Stats Row */}
<div className="px-6 py-5 grid grid-cols-1 md:grid-cols-3 gap-6 bg-muted/20">
<div>
<h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
Billing Amount
</h4>
<div className="mt-2 flex items-baseline gap-2">
<p className="text-2xl font-bold text-foreground">
{formatCurrency(subscription.amount)}
</p>
<span className="text-sm text-muted-foreground">
{getBillingCycleLabel(subscription.cycle)}
</span>
</div>
</div>
<div>
<h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
Next Due Date
</h4>
<div className="flex items-center mt-2 gap-2">
<CalendarIcon className="h-4 w-4 text-muted-foreground" />
<p className="text-lg font-medium text-foreground">
{formatDate(subscription.nextDue)}
</p>
</div>
</div>
<div>
<h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
Registration Date
</h4>
<div className="flex items-center mt-2 gap-2">
<CalendarIcon className="h-4 w-4 text-muted-foreground" />
<p className="text-lg font-medium text-foreground">
{formatDate(subscription.registrationDate)}
</p>
</div>
</div>
</div>
</SubCard>
</div>
{/* Tab Navigation for SIM Services */}
{isSimService && (
<div className="mb-8">
<SubCard>
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
<div>
<h3 className="text-xl font-semibold text-foreground">Service Management</h3>
<p className="text-sm text-muted-foreground mt-1">
Switch between billing and SIM management views
</p>
</div>
<div className="flex flex-col sm:flex-row gap-2 bg-muted rounded-xl p-2 border border-border/60">
<Link
href={`/subscriptions/${subscriptionId}#sim-management`}
className={`px-6 py-3 text-sm font-semibold rounded-lg transition-colors min-w-[140px] text-center ${
showSimManagement
? "bg-card text-primary shadow-[var(--cp-shadow-1)]"
: "text-muted-foreground hover:text-foreground hover:bg-card/60"
}`}
>
<ServerIcon className="h-4 w-4 inline mr-2" />
SIM Management
</Link>
<Link
href={`/subscriptions/${subscriptionId}`}
className={`px-6 py-3 text-sm font-semibold rounded-lg transition-colors min-w-[120px] text-center ${
showInvoices
? "bg-card text-primary shadow-[var(--cp-shadow-1)]"
: "text-muted-foreground hover:text-foreground hover:bg-card/60"
}`}
>
<DocumentTextIcon className="h-4 w-4 inline mr-2" />
Invoices
</Link>
</div>
</div>
</SubCard>
<div className="flex items-center gap-1 p-1 bg-muted rounded-lg w-fit">
<Link
href={`/subscriptions/${subscriptionId}`}
className={cn(
"px-4 py-2 text-sm font-medium rounded-md transition-all flex items-center gap-2",
activeTab === "overview"
? "bg-card text-foreground shadow-sm"
: "text-muted-foreground hover:text-foreground"
)}
>
<DocumentTextIcon className="h-4 w-4" />
Overview & Billing
</Link>
<Link
href={`/subscriptions/${subscriptionId}#sim-management`}
className={cn(
"px-4 py-2 text-sm font-medium rounded-md transition-all flex items-center gap-2",
activeTab === "sim"
? "bg-card text-foreground shadow-sm"
: "text-muted-foreground hover:text-foreground"
)}
>
<ServerIcon className="h-4 w-4" />
SIM Management
</Link>
</div>
)}
{showSimManagement && (
<div className="mb-10">
<SimManagementSection subscriptionId={subscriptionId} />
</div>
{/* SIM Management Section */}
{activeTab === "sim" && isSimService && (
<SimManagementSection subscriptionId={subscriptionId} />
)}
{showInvoices && <InvoicesList subscriptionId={subscriptionId} pageSize={5} />}
{/* Billing History Section */}
{activeTab === "overview" && (
<div className="space-y-4">
<div className="flex items-center justify-between">
<h3 className="text-lg font-semibold text-foreground">Billing History</h3>
</div>
<InvoicesList subscriptionId={subscriptionId} pageSize={5} showFilters={false} />
</div>
)}
</div>
) : null}
</PageLayout>

76
apps/portal/src/features/subscriptions/views/SubscriptionsList.tsx
View File

@ -101,56 +101,46 @@ export function SubscriptionsListContainer() {
>
<ErrorBoundary>
{stats && (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
<SubCard>
<div className="flex items-center">
<div className="flex-shrink-0">
<CheckCircleIcon className="h-8 w-8 text-success" />
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
<div className="bg-card rounded-xl border border-border p-5 shadow-[var(--cp-shadow-1)]">
<div className="flex items-center gap-4">
<div className="h-10 w-10 rounded-lg bg-success/10 flex items-center justify-center">
<CheckCircleIcon className="h-5 w-5 text-success" />
</div>
<div className="ml-5 w-0 flex-1">
<dl>
<dt className="text-sm font-medium text-muted-foreground truncate">Active</dt>
<dd className="text-lg font-medium text-foreground">{stats.active}</dd>
</dl>
<div>
<p className="text-sm font-medium text-muted-foreground">Active</p>
<p className="text-2xl font-bold text-foreground">{stats.active}</p>
</div>
</div>
</SubCard>
<SubCard>
<div className="flex items-center">
<div className="flex-shrink-0">
<CheckCircleIcon className="h-8 w-8 text-primary" />
</div>
<div className="bg-card rounded-xl border border-border p-5 shadow-[var(--cp-shadow-1)]">
<div className="flex items-center gap-4">
<div className="h-10 w-10 rounded-lg bg-primary/10 flex items-center justify-center">
<CheckCircleIcon className="h-5 w-5 text-primary" />
</div>
<div className="ml-5 w-0 flex-1">
<dl>
<dt className="text-sm font-medium text-muted-foreground truncate">
Completed
</dt>
<dd className="text-lg font-medium text-foreground">{stats.completed}</dd>
</dl>
<div>
<p className="text-sm font-medium text-muted-foreground">Completed</p>
<p className="text-2xl font-bold text-foreground">{stats.completed}</p>
</div>
</div>
</SubCard>
<SubCard>
<div className="flex items-center">
<div className="flex-shrink-0">
<XCircleIcon className="h-8 w-8 text-muted-foreground" />
</div>
<div className="bg-card rounded-xl border border-border p-5 shadow-[var(--cp-shadow-1)]">
<div className="flex items-center gap-4">
<div className="h-10 w-10 rounded-lg bg-muted flex items-center justify-center">
<XCircleIcon className="h-5 w-5 text-muted-foreground" />
</div>
<div className="ml-5 w-0 flex-1">
<dl>
<dt className="text-sm font-medium text-muted-foreground truncate">
Cancelled
</dt>
<dd className="text-lg font-medium text-foreground">{stats.cancelled}</dd>
</dl>
<div>
<p className="text-sm font-medium text-muted-foreground">Cancelled</p>
<p className="text-2xl font-bold text-foreground">{stats.cancelled}</p>
</div>
</div>
</SubCard>
</div>
</div>
)}
<div className="space-y-4">
<div className="bg-card rounded-xl border border-border shadow-[var(--cp-shadow-1)] overflow-hidden">
{/* Search/Filter Header */}
<div className="bg-card rounded-xl border border-border px-5 py-4 shadow-[var(--cp-shadow-1)]">
<div className="px-6 py-4 border-b border-border">
<SearchFilterBar
searchValue={searchTerm}
onSearchChange={setSearchTerm}
@ -163,13 +153,11 @@ export function SubscriptionsListContainer() {
</div>
{/* Subscriptions Table */}
<div className="bg-card rounded-xl border border-border shadow-[var(--cp-shadow-1)] overflow-hidden">
<SubscriptionTable
subscriptions={filteredSubscriptions}
loading={isLoading}
className="border-0 rounded-none shadow-none"
/>
</div>
<SubscriptionTable
subscriptions={filteredSubscriptions}
loading={isLoading}
className="border-0 rounded-none shadow-none"
/>
</div>
</ErrorBoundary>
</PageLayout>

52
apps/portal/src/features/support/utils/case-presenters.tsx
View File

@ -28,15 +28,15 @@ const ICON_SIZE_CLASSES: Record<IconSize, string> = {
* Status to icon mapping
*/
const STATUS_ICON_MAP: Record<string, (className: string) => ReactNode> = {
[SUPPORT_CASE_STATUS.RESOLVED]: cls => <CheckCircleIcon className={`${cls} text-green-500`} />,
[SUPPORT_CASE_STATUS.CLOSED]: cls => <CheckCircleIcon className={`${cls} text-green-500`} />,
[SUPPORT_CASE_STATUS.VPN_PENDING]: cls => <CheckCircleIcon className={`${cls} text-green-500`} />,
[SUPPORT_CASE_STATUS.PENDING]: cls => <CheckCircleIcon className={`${cls} text-green-500`} />,
[SUPPORT_CASE_STATUS.IN_PROGRESS]: cls => <ClockIcon className={`${cls} text-blue-500`} />,
[SUPPORT_CASE_STATUS.RESOLVED]: cls => <CheckCircleIcon className={`${cls} text-success`} />,
[SUPPORT_CASE_STATUS.CLOSED]: cls => <CheckCircleIcon className={`${cls} text-success`} />,
[SUPPORT_CASE_STATUS.VPN_PENDING]: cls => <CheckCircleIcon className={`${cls} text-success`} />,
[SUPPORT_CASE_STATUS.PENDING]: cls => <CheckCircleIcon className={`${cls} text-success`} />,
[SUPPORT_CASE_STATUS.IN_PROGRESS]: cls => <ClockIcon className={`${cls} text-info`} />,
[SUPPORT_CASE_STATUS.AWAITING_APPROVAL]: cls => (
<ExclamationTriangleIcon className={`${cls} text-amber-500`} />
<ExclamationTriangleIcon className={`${cls} text-warning`} />
),
[SUPPORT_CASE_STATUS.NEW]: cls => <SparklesIcon className={`${cls} text-purple-500`} />,
[SUPPORT_CASE_STATUS.NEW]: cls => <SparklesIcon className={`${cls} text-primary`} />,
};
/**
@ -65,42 +65,42 @@ const PRIORITY_VARIANT_MAP: Record<string, CasePriorityVariant> = {
* Tailwind class mappings for status variants
*/
const STATUS_CLASSES: Record<CaseStatusVariant, string> = {
success: "text-green-700 bg-green-50",
info: "text-blue-700 bg-blue-50",
warning: "text-amber-700 bg-amber-50",
purple: "text-purple-700 bg-purple-50",
neutral: "text-gray-700 bg-gray-50",
success: "text-success bg-success-soft",
info: "text-info bg-info-soft",
warning: "text-warning bg-warning-soft",
purple: "text-primary bg-primary/10",
neutral: "text-muted-foreground bg-muted",
};
/**
* Tailwind class mappings for status variants with border
*/
const STATUS_CLASSES_WITH_BORDER: Record<CaseStatusVariant, string> = {
success: "text-green-700 bg-green-50 border-green-200",
info: "text-blue-700 bg-blue-50 border-blue-200",
warning: "text-amber-700 bg-amber-50 border-amber-200",
purple: "text-purple-700 bg-purple-50 border-purple-200",
neutral: "text-gray-700 bg-gray-50 border-gray-200",
success: "text-success bg-success-soft border-success/20",
info: "text-info bg-info-soft border-info/20",
warning: "text-warning bg-warning-soft border-warning/20",
purple: "text-primary bg-primary/10 border-primary/20",
neutral: "text-muted-foreground bg-muted border-border",
};
/**
* Tailwind class mappings for priority variants
*/
const PRIORITY_CLASSES: Record<CasePriorityVariant, string> = {
high: "text-red-700 bg-red-50",
medium: "text-amber-700 bg-amber-50",
low: "text-green-700 bg-green-50",
neutral: "text-gray-700 bg-gray-50",
high: "text-destructive bg-destructive-soft",
medium: "text-warning bg-warning-soft",
low: "text-success bg-success-soft",
neutral: "text-muted-foreground bg-muted",
};
/**
* Tailwind class mappings for priority variants with border
*/
const PRIORITY_CLASSES_WITH_BORDER: Record<CasePriorityVariant, string> = {
high: "text-red-700 bg-red-50 border-red-200",
medium: "text-amber-700 bg-amber-50 border-amber-200",
low: "text-green-700 bg-green-50 border-green-200",
neutral: "text-gray-700 bg-gray-50 border-gray-200",
high: "text-destructive bg-destructive-soft border-destructive/20",
medium: "text-warning bg-warning-soft border-warning/20",
low: "text-success bg-success-soft border-success/20",
neutral: "text-muted-foreground bg-muted border-border",
};
/**
@ -114,7 +114,7 @@ export function getCaseStatusIcon(status: string, size: IconSize = "sm"): ReactN
return iconFn(sizeClass);
}
return <ChatBubbleLeftRightIcon className={`${sizeClass} text-gray-400`} />;
return <ChatBubbleLeftRightIcon className={`${sizeClass} text-muted-foreground`} />;
}
/**

8
apps/portal/src/features/support/views/SupportCasesView.tsx
View File

@ -128,14 +128,14 @@ export function SupportCasesView() {
{/* Search */}
<div className="flex-1 relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<MagnifyingGlassIcon className="h-4 w-4 text-muted-foreground/70" />
<MagnifyingGlassIcon className="h-4 w-4 text-muted-foreground" />
</div>
<input
type="text"
placeholder="Search by case number or subject..."
value={searchTerm}
onChange={event => setSearchTerm(event.target.value)}
className="block w-full pl-9 pr-3 py-2 border border-input rounded-lg text-sm bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring transition-colors"
className="block w-full pl-9 pr-3 py-2 border border-border rounded-lg text-sm bg-card shadow-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-primary transition-colors"
/>
</div>
@ -144,7 +144,7 @@ export function SupportCasesView() {
<select
value={statusFilter}
onChange={event => setStatusFilter(event.target.value)}
className="appearance-none pl-3 pr-8 py-2 border border-input rounded-lg text-sm bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring transition-colors cursor-pointer"
className="appearance-none pl-3 pr-8 py-2 border border-border rounded-lg text-sm bg-card shadow-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-primary transition-colors cursor-pointer"
>
{statusFilterOptions.map(option => (
<option key={option.value} value={option.value}>
@ -156,7 +156,7 @@ export function SupportCasesView() {
<select
value={priorityFilter}
onChange={event => setPriorityFilter(event.target.value)}
className="appearance-none pl-3 pr-8 py-2 border border-input rounded-lg text-sm bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring transition-colors cursor-pointer"
className="appearance-none pl-3 pr-8 py-2 border border-border rounded-lg text-sm bg-card shadow-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-primary transition-colors cursor-pointer"
>
{priorityFilterOptions.map(option => (
<option key={option.value} value={option.value}>

75
apps/portal/src/styles/tokens.css
View File

@ -78,8 +78,8 @@
--cp-card-shadow-lg: var(--cp-shadow-3);
/* ============= SHADOWS ============= */
--cp-shadow-1: 0 1px 2px 0 rgb(0 0 0 / 0.06);
--cp-shadow-2: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.08);
--cp-shadow-1: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.06);
--cp-shadow-2: 0 2px 4px -1px rgb(0 0 0 / 0.1), 0 1px 3px 0 rgb(0 0 0 / 0.08);
--cp-shadow-3: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);
/* ============= MOTION ============= */
@ -93,20 +93,20 @@
--cp-transition-slow: var(--cp-duration-slow);
/* ============= COLOR (LIGHT) ============= */
/* Core neutrals (light) */
--cp-bg: oklch(0.98 0 0);
/* Core neutrals (light) - clean white main area */
--cp-bg: oklch(1 0 0); /* pure white for main content area */
--cp-fg: oklch(0.16 0 0);
--cp-surface: oklch(0.95 0 0); /* panels/strips */
--cp-muted: oklch(0.93 0 0); /* chips/subtle */
--cp-surface: oklch(1 0 0); /* pure white for cards */
--cp-muted: oklch(0.97 0.003 250); /* subtle cool gray for table headers */
--cp-border: oklch(0.9 0 0);
--cp-border-muted: oklch(0.88 0 0);
--cp-border-muted: oklch(0.92 0 0);
/* Brand & focus (azure) */
--cp-primary: oklch(0.62 0.17 255);
/* Brand & focus - matches logo cyan blue */
--cp-primary: oklch(0.68 0.14 220); /* bright cyan blue from logo */
--cp-on-primary: oklch(0.99 0 0);
--cp-primary-hover: oklch(0.58 0.17 255);
--cp-primary-active: oklch(0.54 0.17 255);
--cp-ring: oklch(0.68 0.16 255);
--cp-primary-hover: oklch(0.63 0.14 220);
--cp-primary-active: oklch(0.58 0.14 220);
--cp-ring: oklch(0.72 0.12 220);
/* Semantic */
--cp-success: oklch(0.67 0.14 150);
@ -121,20 +121,21 @@
--cp-on-error: oklch(0.99 0 0);
--cp-error-soft: oklch(0.96 0.05 27);
--cp-info: oklch(0.64 0.16 255);
--cp-info: oklch(0.68 0.14 220); /* matches primary */
--cp-on-info: oklch(0.99 0 0);
--cp-info-soft: oklch(0.95 0.05 255);
--cp-info-soft: oklch(0.95 0.06 220);
/* Sidebar/Header derive from core tokens */
--cp-sidebar-bg: var(--cp-bg);
--cp-sidebar-border: var(--cp-border);
--cp-sidebar-text: oklch(0.35 0 0);
--cp-sidebar-text-hover: oklch(0.22 0 0);
--cp-sidebar-hover-bg: var(--cp-muted);
--cp-sidebar-active-bg: color-mix(in oklch, var(--cp-primary) 12%, transparent);
--cp-sidebar-active-text: var(--cp-primary);
/* Sidebar - Brand navy blue from logo */
--cp-sidebar-bg: oklch(0.28 0.1 265); /* deep navy blue from logo */
--cp-sidebar-border: oklch(0.35 0.08 265); /* lighter navy for borders */
--cp-sidebar-text: oklch(1 0 0); /* pure white text */
--cp-sidebar-text-hover: oklch(1 0 0); /* pure white on hover */
--cp-sidebar-hover-bg: oklch(0.35 0.09 265); /* lighter navy on hover */
--cp-sidebar-active-bg: oklch(1 0 0 / 0.18); /* white overlay for active */
--cp-sidebar-active-text: oklch(1 0 0); /* white for active text */
--cp-header-bg: oklch(1 0 0 / 0.85);
/* Header */
--cp-header-bg: oklch(1 0 0 / 0.95); /* slightly more opaque white */
--cp-header-border: var(--cp-border);
--cp-header-text: oklch(0.2 0 0);
@ -171,11 +172,11 @@
--cp-border: oklch(0.32 0 0);
--cp-border-muted: oklch(0.28 0 0);
--cp-primary: oklch(0.74 0.16 255);
--cp-primary: oklch(0.75 0.12 220); /* lighter cyan for dark mode */
--cp-on-primary: oklch(0.15 0 0);
--cp-primary-hover: oklch(0.7 0.16 255);
--cp-primary-active: oklch(0.66 0.16 255);
--cp-ring: oklch(0.78 0.13 255);
--cp-primary-hover: oklch(0.7 0.12 220);
--cp-primary-active: oklch(0.65 0.12 220);
--cp-ring: oklch(0.78 0.1 220);
--cp-success: oklch(0.76 0.14 150);
--cp-on-success: oklch(0.15 0 0);
@ -189,18 +190,20 @@
--cp-on-error: oklch(0.15 0 0);
--cp-error-soft: oklch(0.25 0.05 27);
--cp-info: oklch(0.78 0.15 255);
--cp-info: oklch(0.75 0.12 220);
--cp-on-info: oklch(0.15 0 0);
--cp-info-soft: oklch(0.24 0.05 255);
--cp-info-soft: oklch(0.24 0.05 220);
--cp-sidebar-bg: var(--cp-surface);
--cp-sidebar-hover-bg: oklch(0.24 0 0);
--cp-sidebar-text: oklch(0.9 0 0);
--cp-sidebar-text-hover: oklch(0.98 0 0);
--cp-sidebar-active-bg: color-mix(in oklch, var(--cp-primary) 18%, transparent);
--cp-sidebar-active-text: var(--cp-primary);
/* Sidebar - Dark navy from logo */
--cp-sidebar-bg: oklch(0.2 0.08 265); /* darker navy */
--cp-sidebar-border: oklch(0.28 0.06 265);
--cp-sidebar-hover-bg: oklch(0.28 0.07 265);
--cp-sidebar-text: oklch(1 0 0); /* pure white */
--cp-sidebar-text-hover: oklch(1 0 0);
--cp-sidebar-active-bg: oklch(1 0 0 / 0.18);
--cp-sidebar-active-text: oklch(1 0 0);
--cp-header-bg: oklch(0.18 0 0 / 0.9);
--cp-header-bg: oklch(0.18 0 0 / 0.95);
--cp-header-border: var(--cp-border);
--cp-header-text: var(--cp-fg);
}

22
apps/portal/src/styles/utilities.css
View File

@ -11,10 +11,18 @@
.cp-card {
background: var(--card);
color: var(--card-foreground);
border: 1px solid var(--border);
border: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
border-radius: var(--cp-card-radius);
box-shadow: var(--cp-card-shadow);
padding: var(--cp-card-padding);
transition:
box-shadow 0.2s ease,
border-color 0.2s ease;
}
.cp-card:hover {
box-shadow: var(--cp-card-shadow-lg);
border-color: var(--border);
}
.cp-card-sm {
@ -26,6 +34,18 @@
box-shadow: var(--cp-card-shadow-lg);
}
.cp-card-interactive {
cursor: pointer;
}
.cp-card-interactive:hover {
transform: translateY(-1px);
}
.cp-card-interactive:active {
transform: translateY(0);
}
/* ===== BADGE ===== */
.cp-badge {
display: inline-flex;