@wealthx/shadcn 1.4.1 → 1.5.0

package/src/components/ui/appointment-calendar-view.tsx

@@ -345,7 +345,10 @@ function MonthView({
   // Derive year/month from today prop
   const todayDate = new Date(today + "T00:00:00");
   const grid = generateMonthGrid(todayDate.getFullYear(), todayDate.getMonth());
-  const toIso = (d: Date) => d.toISOString().slice(0, 10);
+  // Use local date parts — toISOString() converts to UTC first, which shifts the
+  // date back 1 day for UTC+ timezones (e.g. UTC+7 shows Thu booking on Wed cell).
+  const toIso = (d: Date) =>
+    `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
 
   return (
     <div className="flex flex-col">

package/src/components/ui/appointment-detail-sheet.tsx

@@ -21,6 +21,7 @@ import {
   Check,
   CircleUser,
   Clock,
+  ExternalLink,
   FileText,
   Mail,
   MapPin,
@@ -54,6 +55,10 @@ export interface AppointmentDetailItem {
   meetingFormat?: AppointmentMeetingFormat;
   /** Formatted location string — shown for offline meetings */
   meetingLocation?: string;
+  /** Phone number — shown for call meetings */
+  callPhone?: string;
+  /** Join URL — shown for google-meet and microsoft-teams meetings */
+  meetingLink?: string;
 }
 
 export type LoanApplicationStatus =
@@ -123,6 +128,34 @@ const STATUS_CONFIG: Record<
   },
 };
 
+// ---------------------------------------------------------------------------
+// Meeting format config
+// ---------------------------------------------------------------------------
+
+const ICON_CLASS = "mt-0.5 h-4 w-4 shrink-0 text-muted-foreground";
+
+const MEETING_FORMAT_META: Record<
+  AppointmentMeetingFormat,
+  { icon: React.ReactNode; label: string }
+> = {
+  call: { icon: <Phone className={ICON_CLASS} />, label: "Phone Call" },
+  "google-meet": {
+    icon: <Video className={ICON_CLASS} />,
+    label: "Google Meet",
+  },
+  "microsoft-teams": {
+    icon: <Users className={ICON_CLASS} />,
+    label: "Microsoft Teams",
+  },
+  offline: { icon: <MapPin className={ICON_CLASS} />, label: "In Person" },
+};
+
+/** Formats that use a join link rather than a phone number or physical location */
+const ONLINE_FORMATS = new Set<AppointmentMeetingFormat>([
+  "google-meet",
+  "microsoft-teams",
+]);
+
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
@@ -148,6 +181,8 @@ export function AppointmentDetailSheet({
   const { variant, label, icon } = STATUS_CONFIG[appointment.status];
   const isCancelled = appointment.status === "cancelled";
   const isConfirmed = appointment.status === "confirmed";
+  const fmt = appointment.meetingFormat;
+  const meetingMeta = fmt ? MEETING_FORMAT_META[fmt] : undefined;
 
   return (
     <>
@@ -232,32 +267,32 @@ export function AppointmentDetailSheet({
               </span>
             </div>
 
-            {/* Meeting format — for offline, location is shown inline to avoid a second MapPin */}
-            {appointment.meetingFormat && (
+            {fmt && meetingMeta && (
               <div className="flex items-start gap-3 text-sm">
-                {appointment.meetingFormat === "call" && (
-                  <Phone className="h-4 w-4 shrink-0 text-muted-foreground" />
-                )}
-                {appointment.meetingFormat === "google-meet" && (
-                  <Video className="h-4 w-4 shrink-0 text-muted-foreground" />
-                )}
-                {appointment.meetingFormat === "offline" && (
-                  <MapPin className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
-                )}
+                {meetingMeta.icon}
                 <div className="flex flex-col gap-0.5">
-                  <span className="font-medium">
-                    {appointment.meetingFormat === "call" && "Phone Call"}
-                    {appointment.meetingFormat === "google-meet" &&
-                      "Google Meet"}
-                    {appointment.meetingFormat === "offline" && "In Person"}
-                  </span>
-                  {/* Location shown below format label — only for offline, avoids duplicate MapPin */}
-                  {appointment.meetingFormat === "offline" &&
-                    appointment.meetingLocation && (
-                      <span className="text-muted-foreground">
-                        {appointment.meetingLocation}
-                      </span>
-                    )}
+                  <span className="font-medium">{meetingMeta.label}</span>
+                  {fmt === "call" && appointment.callPhone && (
+                    <span className="text-muted-foreground">
+                      {appointment.callPhone}
+                    </span>
+                  )}
+                  {ONLINE_FORMATS.has(fmt) && appointment.meetingLink && (
+                    <a
+                      href={appointment.meetingLink}
+                      target="_blank"
+                      rel="noreferrer"
+                      className="flex items-center gap-1 text-primary hover:underline"
+                    >
+                      <ExternalLink className="h-3 w-3" />
+                      Join Meeting
+                    </a>
+                  )}
+                  {fmt === "offline" && appointment.meetingLocation && (
+                    <span className="text-muted-foreground">
+                      {appointment.meetingLocation}
+                    </span>
+                  )}
                 </div>
               </div>
             )}

package/src/components/ui/appointment-time-slot-picker.tsx

@@ -14,7 +14,11 @@ export type AppointmentStatus =
   | "cancelled"
   | "rescheduled";
 
-export type AppointmentMeetingFormat = "call" | "google-meet" | "offline";
+export type AppointmentMeetingFormat =
+  | "call"
+  | "google-meet"
+  | "microsoft-teams"
+  | "offline";
 
 // ---------------------------------------------------------------------------
 // Time slot

package/src/components/ui/asset-accordion.tsx

@@ -0,0 +1,241 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Button } from "@/components/ui/button";
+import { formatCurrency } from "@/lib/format-currency";
+
+export type AssetItem = {
+  id: string;
+  description: string;
+  estimatedValue: number;
+  subLabel?: string;
+};
+
+export type AssetGroup = {
+  assetType: string;
+  label: string;
+  items: AssetItem[];
+};
+
+export type AssetAccordionProps = {
+  groups: AssetGroup[];
+  /** Which group values are expanded (controlled). */
+  openGroups?: string[];
+  onToggleGroup?: (assetType: string) => void;
+  onAddItem?: (assetType: string) => void;
+  onEditItem?: (assetType: string, itemId: string) => void;
+  onDeleteItem?: (assetType: string, itemId: string) => void;
+  onPrev?: () => void;
+  onNext?: () => void;
+  nextLabel?: string;
+  /** Accessible label for the accordion landmark region. */
+  "aria-label"?: string;
+  className?: string;
+};
+
+export function AssetAccordion({
+  groups,
+  openGroups,
+  onToggleGroup,
+  onAddItem,
+  onEditItem,
+  onDeleteItem,
+  onPrev,
+  onNext,
+  nextLabel = "Next",
+  "aria-label": ariaLabel = "Asset list",
+  className,
+}: AssetAccordionProps) {
+  const totalAssets = groups
+    .flatMap((g) => g.items)
+    .reduce((sum, item) => sum + item.estimatedValue, 0);
+
+  return (
+    <div className={cn("flex flex-col gap-4 font-sans", className)}>
+      <div className="flex items-center justify-between pb-2">
+        <h3 className="text-sm font-semibold text-foreground">Assets</h3>
+        <span className="text-sm font-medium text-foreground">
+          Total: {formatCurrency(totalAssets)}
+        </span>
+      </div>
+
+      <Accordion
+        type="multiple"
+        aria-label={ariaLabel}
+        value={openGroups}
+        onValueChange={(vals) => {
+          // Fire toggle for each value change
+          const prev = new Set(openGroups ?? []);
+          const next = new Set(vals as string[]);
+          for (const v of next) {
+            if (!prev.has(v)) onToggleGroup?.(v);
+          }
+          for (const v of prev) {
+            if (!next.has(v)) onToggleGroup?.(v);
+          }
+        }}
+      >
+        {groups.map((group) => (
+          <AccordionItem key={group.assetType} value={group.assetType}>
+            <AccordionTrigger>
+              <div className="flex w-full items-center justify-between pr-2">
+                <span>{group.label}</span>
+                <span className="text-xs text-muted-foreground">
+                  {group.items.length}{" "}
+                  {group.items.length === 1 ? "item" : "items"} ·{" "}
+                  {formatCurrency(
+                    group.items.reduce((s, i) => s + i.estimatedValue, 0),
+                  )}
+                </span>
+              </div>
+            </AccordionTrigger>
+            <AccordionContent>
+              <div className="flex flex-col gap-2 pb-2">
+                {group.items.length === 0 ? (
+                  <p className="text-xs text-muted-foreground">
+                    No {group.label.toLowerCase()} added yet.
+                  </p>
+                ) : (
+                  group.items.map((item) => (
+                    <AssetItemRow
+                      key={item.id}
+                      item={item}
+                      onEdit={() => onEditItem?.(group.assetType, item.id)}
+                      onDelete={() => onDeleteItem?.(group.assetType, item.id)}
+                    />
+                  ))
+                )}
+                <button
+                  type="button"
+                  onClick={() => onAddItem?.(group.assetType)}
+                  className="mt-1 flex items-center gap-1 text-xs text-primary hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                >
+                  <PlusIcon className="size-3" />
+                  Add {group.label}
+                </button>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        ))}
+      </Accordion>
+
+      <div className="flex items-center justify-between pt-2">
+        {onPrev ? (
+          <Button variant="outline" onClick={onPrev}>
+            <ChevronLeftIcon className="mr-1 size-4" />
+            Previous
+          </Button>
+        ) : (
+          <span />
+        )}
+        {onNext && (
+          <Button onClick={onNext}>
+            {nextLabel}
+            <ChevronRightIcon className="ml-1 size-4" />
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function AssetItemRow({
+  item,
+  onEdit,
+  onDelete,
+}: {
+  item: AssetItem;
+  onEdit?: () => void;
+  onDelete?: () => void;
+}) {
+  return (
+    <div className="flex items-center justify-between border border-border p-3">
+      <div className="flex flex-col gap-0.5">
+        <span className="text-sm font-medium text-foreground">
+          {item.description}
+        </span>
+        {item.subLabel && (
+          <span className="text-xs text-muted-foreground">{item.subLabel}</span>
+        )}
+        <span className="text-sm text-foreground">
+          {formatCurrency(item.estimatedValue)}
+        </span>
+      </div>
+      <div className="flex items-center gap-2">
+        <button
+          type="button"
+          onClick={onEdit}
+          className="text-xs text-primary hover:underline focus-visible:outline-none"
+        >
+          Edit
+        </button>
+        <button
+          type="button"
+          onClick={onDelete}
+          className="text-xs text-destructive hover:underline focus-visible:outline-none"
+        >
+          Delete
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function PlusIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      aria-hidden="true"
+    >
+      <path d="M12 5v14M5 12h14" />
+    </svg>
+  );
+}
+
+function ChevronLeftIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      aria-hidden="true"
+    >
+      <path d="m15 18-6-6 6-6" />
+    </svg>
+  );
+}
+
+function ChevronRightIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      aria-hidden="true"
+    >
+      <path d="m9 18 6-6-6-6" />
+    </svg>
+  );
+}

package/src/components/ui/assets-liabilities-side-card.tsx

@@ -0,0 +1,157 @@
+import React from "react";
+import { Info } from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle } from "./card";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "./tooltip";
+import { cn } from "@/lib/utils";
+import { formatCurrencyAbbrev } from "@/lib/format-currency";
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+export interface AssetsLiabilitiesSideCardProps {
+  /** Total liabilities in dollars (positive number — displayed as negative) */
+  liabilities: number;
+  /** Total cash assets in dollars */
+  assets: number;
+  /** Net position in dollars (may be negative) */
+  netPosition: number;
+  /** Total property value in dollars */
+  propertyValue: number;
+  title?: string;
+  /** Tooltip text explaining the snapshot context */
+  tooltipText?: string;
+  className?: string;
+}
+
+// ─── Metric row ──────────────────────────────────────────────────────────────
+
+function MetricRow({
+  label,
+  value,
+  valueClass,
+}: {
+  label: string;
+  value: string;
+  valueClass?: string;
+}) {
+  return (
+    <div className="flex items-center justify-between gap-2">
+      <span className="text-sm font-medium text-foreground">{label}</span>
+      <span className={cn("text-base font-semibold shrink-0", valueClass)}>
+        {value}
+      </span>
+    </div>
+  );
+}
+
+// ─── Sub-row ─────────────────────────────────────────────────────────────────
+
+function SubRow({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex items-center justify-between gap-2 pl-3 text-sm">
+      <span className="text-muted-foreground">{label}</span>
+      <span className="font-medium text-foreground">{value}</span>
+    </div>
+  );
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export function AssetsLiabilitiesSideCard({
+  liabilities,
+  assets,
+  netPosition,
+  propertyValue,
+  title = "Assets & Liabilities",
+  tooltipText = "Current snapshot of your financial position. These values are not affected by the date range filter.",
+  className,
+}: AssetsLiabilitiesSideCardProps) {
+  const totalAssets = assets + propertyValue;
+  const netPositive = netPosition >= 0;
+
+  return (
+    <Card className={cn("flex flex-col", className)}>
+      <CardHeader className="pb-2">
+        <div className="flex items-center gap-1">
+          <CardTitle className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+            {title}
+          </CardTitle>
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Info
+                  size={13}
+                  className="cursor-help text-muted-foreground"
+                  aria-label="About this data"
+                />
+              </TooltipTrigger>
+              <TooltipContent className="max-w-56">
+                {tooltipText}
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+      </CardHeader>
+
+      <CardContent className="flex flex-1 flex-col gap-4 pb-5">
+        {/* Hero: Net Position */}
+        <div className="flex items-center justify-between gap-2">
+          <span className="text-sm font-medium text-foreground">
+            Net Position
+          </span>
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span
+                  className={cn(
+                    "cursor-default text-xl font-bold leading-tight shrink-0",
+                    netPositive ? "text-foreground" : "text-destructive",
+                  )}
+                >
+                  {netPositive ? "" : "-"}
+                  {formatCurrencyAbbrev(Math.abs(netPosition))}
+                </span>
+              </TooltipTrigger>
+              <TooltipContent>
+                {netPositive ? "" : "-"}$
+                {Math.abs(netPosition).toLocaleString()}
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+
+        {/* Divider */}
+        <div className="border-t border-border" />
+
+        {/* Total Assets */}
+        <div className="flex flex-col gap-2">
+          <MetricRow
+            label="Total Assets"
+            value={formatCurrencyAbbrev(totalAssets)}
+            valueClass="text-xl"
+          />
+          <div className="flex flex-col gap-1.5">
+            <SubRow label="Cash Assets" value={formatCurrencyAbbrev(assets)} />
+            <SubRow
+              label="Property Value"
+              value={formatCurrencyAbbrev(propertyValue)}
+            />
+          </div>
+        </div>
+
+        <div className="border-t border-border" />
+
+        {/* Total Liabilities */}
+        <MetricRow
+          label="Total Liabilities"
+          value={`-${formatCurrencyAbbrev(liabilities)}`}
+          valueClass="text-xl text-destructive"
+        />
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/ui/auth-page-layout.tsx

@@ -21,7 +21,7 @@ export function AuthPageLayout({
   return (
     <div
       className={cn(
-        "relative flex min-h-screen w-full flex-col items-center justify-center px-10 py-16 font-sans",
+        "relative flex min-h-screen w-full flex-col items-center justify-center px-4 py-10 font-sans sm:px-10 sm:py-16",
         className,
       )}
     >
@@ -36,7 +36,7 @@ export function AuthPageLayout({
         )}
       >
         {(title || subtitle) && (
-          <div className="flex w-[320px] flex-col items-center gap-2 text-center">
+          <div className="flex w-full max-w-[320px] flex-col items-center gap-2 text-center">
             {title && (
               <h1 className="m-0 text-[30px] font-semibold leading-9 text-card-foreground">
                 {title}
@@ -50,7 +50,7 @@ export function AuthPageLayout({
           </div>
         )}
 
-        <div className={cn("w-full", wide ? "max-w-full" : "w-[320px]")}>
+        <div className={cn("w-full", wide ? "max-w-full" : "max-w-[320px]")}>
           {children}
         </div>
       </div>