@carlonicora/nextjs-jsonapi 1.14.0 → 1.16.0

package/src/features/billing/stripe-usage/components/containers/UsageContainer.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { Activity } from "lucide-react";
+import { useEffect, useState } from "react";
+import { StripeSubscriptionInterface, StripeSubscriptionService } from "../../../stripe-subscription";
+import { MeterInterface, MeterSummaryInterface } from "../../data/stripe-usage.interface";
+import { StripeUsageService } from "../../data/stripe-usage.service";
+import { UsageSummaryCards } from "../widgets/UsageSummaryCards";
+
+export function UsageContainer() {
+  const [meters, setMeters] = useState<MeterInterface[]>([]);
+  const [summaries, setSummaries] = useState<Record<string, MeterSummaryInterface | null>>({});
+  const [loading, setLoading] = useState<boolean>(true);
+  const [subscriptions, setSubscriptions] = useState<StripeSubscriptionInterface[]>([]);
+
+  useEffect(() => {
+    loadUsageData();
+  }, []);
+
+  const loadUsageData = async () => {
+    setLoading(true);
+
+    try {
+      // First, check if there are any metered subscriptions
+      const fetchedSubscriptions = await StripeSubscriptionService.listSubscriptions();
+      setSubscriptions(fetchedSubscriptions);
+
+      const hasMeteredSubscriptions = fetchedSubscriptions.some((sub) => sub.price?.recurring?.usageType === "metered");
+
+      if (!hasMeteredSubscriptions) {
+        setLoading(false);
+        return;
+      }
+
+      // Load meters
+      const fetchedMeters = await StripeUsageService.listMeters();
+      setMeters(fetchedMeters);
+
+      // Load summaries for each meter (current month)
+      const summariesMap: Record<string, MeterSummaryInterface | null> = {};
+      const now = new Date();
+      const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
+      const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59, 999);
+
+      for (const meter of fetchedMeters) {
+        try {
+          const meterSummaries = await StripeUsageService.getMeterSummaries({
+            meterId: meter.id,
+            startTime: startOfMonth,
+            endTime: endOfMonth,
+          });
+          // Use the first (most recent) summary
+          summariesMap[meter.id] = meterSummaries.length > 0 ? meterSummaries[0] : null;
+        } catch (error) {
+          console.error(`[UsageContainer] Failed to load summaries for meter ${meter.id}:`, error);
+          summariesMap[meter.id] = null;
+        }
+      }
+
+      setSummaries(summariesMap);
+    } catch (error) {
+      console.error("[UsageContainer] Failed to load usage data:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Check if there are any metered subscriptions
+  const hasMeteredSubscriptions = subscriptions.some((sub) => sub.price?.recurring?.usageType === "metered");
+
+  // Don't render if no metered subscriptions
+  if (!loading && !hasMeteredSubscriptions) {
+    return null;
+  }
+
+  if (loading) {
+    return (
+      <div className="flex h-64 items-center justify-center">
+        <p className="text-muted-foreground">Loading usage data...</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex w-full flex-col gap-y-6">
+      {/* Header */}
+      <div className="flex items-center gap-x-3">
+        <Activity className="h-8 w-8" />
+        <h1 className="text-3xl font-bold">Usage Tracking</h1>
+      </div>
+
+      {/* Empty State */}
+      {meters.length === 0 && (
+        <div className="bg-muted/50 flex flex-col items-center justify-center gap-y-4 rounded-lg border-2 border-dashed border-gray-300 p-12">
+          <Activity className="text-muted-foreground h-16 w-16" />
+          <div className="text-center">
+            <h3 className="mb-2 text-xl font-semibold">No usage meters configured</h3>
+            <p className="text-muted-foreground">
+              Usage tracking will appear here when you have metered subscriptions with configured meters.
+            </p>
+          </div>
+        </div>
+      )}
+
+      {/* Usage Summary Cards */}
+      {meters.length > 0 && <UsageSummaryCards meters={meters} summaries={summaries} />}
+    </div>
+  );
+}

package/src/features/billing/stripe-usage/components/containers/index.ts

@@ -0,0 +1 @@
+export * from "./UsageContainer";

package/src/features/billing/stripe-usage/components/details/UsageSummaryCard.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { Activity } from "lucide-react";
+import { Card, CardContent, CardHeader } from "../../../../../shadcnui";
+import { MeterInterface, MeterSummaryInterface } from "../../data/stripe-usage.interface";
+
+type UsageSummaryCardProps = {
+  meter: MeterInterface;
+  summary: MeterSummaryInterface | null;
+};
+
+/**
+ * Get progress bar color based on usage percentage
+ */
+function getProgressColor(percentage: number | null): string {
+  if (percentage === null) return "bg-blue-500";
+  if (percentage >= 90) return "bg-red-500";
+  if (percentage >= 75) return "bg-orange-500";
+  return "bg-green-500";
+}
+
+/**
+ * Format a Unix timestamp to readable date
+ */
+function formatDate(date: Date | undefined): string {
+  if (!date) return "N/A";
+
+  try {
+    return new Intl.DateTimeFormat("en-US", {
+      month: "short",
+      day: "numeric",
+    }).format(new Date(date));
+  } catch (error) {
+    return "Invalid Date";
+  }
+}
+
+export function UsageSummaryCard({ meter, summary }: UsageSummaryCardProps) {
+  const currentUsage = summary?.aggregatedValue ?? 0;
+  const limit = (meter as any).limit; // Meters may have optional limit field
+  const percentage = limit && limit > 0 ? (currentUsage / limit) * 100 : null;
+  const progressColor = getProgressColor(percentage);
+  const progressWidth = percentage !== null ? Math.min(percentage, 100) : 0;
+
+  const displayName = meter.displayName || meter.eventName;
+  const hasLimit = limit !== null && limit !== undefined;
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center gap-x-3 pb-3">
+        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100 text-blue-600">
+          <Activity className="h-5 w-5" />
+        </div>
+        <div className="flex flex-col">
+          <h3 className="font-semibold">{displayName}</h3>
+          <p className="text-xs text-gray-500">{meter.id}</p>
+        </div>
+      </CardHeader>
+
+      <CardContent className="flex flex-col gap-y-4">
+        {/* Current Usage */}
+        <div>
+          <p className="text-3xl font-bold">{currentUsage.toLocaleString()}</p>
+          {hasLimit && <p className="text-sm text-gray-500">of {limit.toLocaleString()} used</p>}
+        </div>
+
+        {/* Progress Bar */}
+        {hasLimit ? (
+          <div className="flex flex-col gap-y-2">
+            <div className="h-2 w-full overflow-hidden rounded-full bg-gray-200">
+              <div className={`h-full transition-all ${progressColor}`} style={{ width: `${progressWidth}%` }} />
+            </div>
+            <p className="text-sm text-gray-500">{percentage?.toFixed(1)}% used</p>
+          </div>
+        ) : (
+          <p className="text-sm text-gray-500">No limit set</p>
+        )}
+
+        {/* Period Information */}
+        {summary && summary.start && summary.end && (
+          <div className="border-t pt-3">
+            <p className="text-xs text-gray-500">
+              Period: {formatDate(summary.start)} - {formatDate(summary.end)}
+            </p>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/src/features/billing/stripe-usage/components/details/index.ts

@@ -0,0 +1 @@
+export * from "./UsageSummaryCard";

package/src/features/billing/stripe-usage/components/index.ts

@@ -0,0 +1,4 @@
+export * from "./containers";
+export * from "./details";
+export * from "./lists";
+export * from "./widgets";

package/src/features/billing/stripe-usage/components/lists/UsageHistoryTable.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../../../../shadcnui";
+import { StripeUsageInterface } from "../../data/stripe-usage.interface";
+
+type UsageHistoryTableProps = {
+  usageRecords: StripeUsageInterface[];
+};
+
+/**
+ * Format a date with time for usage history
+ */
+function formatDateTime(date: Date | string | undefined): string {
+  if (!date) return "N/A";
+
+  const dateObj = typeof date === "string" ? new Date(date) : date;
+
+  try {
+    return new Intl.DateTimeFormat("en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+      hour: "numeric",
+      minute: "2-digit",
+    }).format(dateObj);
+  } catch (error) {
+    return "Invalid Date";
+  }
+}
+
+export function UsageHistoryTable({ usageRecords }: UsageHistoryTableProps) {
+  if (usageRecords.length === 0) {
+    return (
+      <div className="rounded-lg border p-8 text-center">
+        <p className="text-muted-foreground">No usage history available.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex w-full flex-col gap-y-4">
+      <h2 className="text-xl font-semibold">Usage History</h2>
+      <div className="overflow-hidden rounded-lg border">
+        <Table>
+          <TableHeader className="bg-muted">
+            <TableRow>
+              <TableHead>Date & Time</TableHead>
+              <TableHead>Meter Event</TableHead>
+              <TableHead className="text-right">Quantity</TableHead>
+              <TableHead>Event ID</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {usageRecords.map((record) => {
+              const dateTime = formatDateTime(record.timestamp);
+              const quantity = record.quantity.toLocaleString();
+
+              return (
+                <TableRow key={record.id}>
+                  <TableCell className="font-medium">{dateTime}</TableCell>
+                  <TableCell className="text-muted-foreground">{record.meterEventName}</TableCell>
+                  <TableCell className="text-right font-medium">{quantity}</TableCell>
+                  <TableCell className="text-muted-foreground text-sm font-mono">{record.stripeEventId}</TableCell>
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+}

package/src/features/billing/stripe-usage/components/lists/index.ts

@@ -0,0 +1 @@
+export * from "./UsageHistoryTable";

package/src/features/billing/stripe-usage/components/widgets/UsageSummaryCards.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { MeterInterface, MeterSummaryInterface } from "../../data/stripe-usage.interface";
+import { UsageSummaryCard } from "../details/UsageSummaryCard";
+
+type UsageSummaryCardsProps = {
+  meters: MeterInterface[];
+  summaries: Record<string, MeterSummaryInterface | null>;
+};
+
+export function UsageSummaryCards({ meters, summaries }: UsageSummaryCardsProps) {
+  return (
+    <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+      {meters.map((meter) => (
+        <UsageSummaryCard key={meter.id} meter={meter} summary={summaries[meter.id] || null} />
+      ))}
+    </div>
+  );
+}

package/src/features/billing/stripe-usage/components/widgets/index.ts

@@ -0,0 +1 @@
+export * from "./UsageSummaryCards";

package/src/features/billing/stripe-usage/data/index.ts

@@ -0,0 +1,3 @@
+export * from "./stripe-usage";
+export * from "./stripe-usage.interface";
+export * from "./stripe-usage.service";

package/src/features/billing/stripe-usage/data/stripe-usage.interface.ts

@@ -0,0 +1,55 @@
+import { ApiDataInterface } from "../../../../core";
+
+// ============================================================================
+// Usage Record Interfaces
+// ============================================================================
+
+export interface StripeUsageInterface extends ApiDataInterface {
+  get subscriptionId(): string;
+  get meterId(): string;
+  get meterEventName(): string;
+  get stripeEventId(): string;
+  get quantity(): number;
+  get timestamp(): Date | undefined;
+}
+
+// ============================================================================
+// Meter Interfaces
+// ============================================================================
+
+export interface MeterInterface {
+  id: string;
+  displayName: string;
+  eventName: string;
+  status: string;
+}
+
+export interface MeterSummaryInterface {
+  meterId: string;
+  start: Date;
+  end: Date;
+  aggregatedValue: number;
+}
+
+export interface UsageSummaryInterface {
+  subscriptionItemId: string;
+  period: {
+    start: Date;
+    end: Date;
+  };
+  totalUsage: number;
+}
+
+// ============================================================================
+// Usage Input DTOs
+// ============================================================================
+
+export type ReportUsageInput = {
+  subscriptionItemId: string;
+  quantity: number;
+  timestamp?: number;
+  action?: "increment" | "set";
+};
+
+// Backwards compatibility alias
+export type UsageRecordInterface = StripeUsageInterface;

package/src/features/billing/stripe-usage/data/stripe-usage.service.ts

@@ -0,0 +1,129 @@
+import { AbstractService, EndpointCreator, HttpMethod, Modules, NextRef, PreviousRef } from "../../../../core";
+import {
+  MeterInterface,
+  MeterSummaryInterface,
+  ReportUsageInput,
+  StripeUsageInterface,
+  UsageSummaryInterface,
+} from "./stripe-usage.interface";
+
+/**
+ * Service for managing Stripe usage tracking
+ */
+export class StripeUsageService extends AbstractService {
+  // ============================================================================
+  // Meter Methods
+  // ============================================================================
+
+  /**
+   * List all available usage meters
+   */
+  static async listMeters(params?: { next?: NextRef; prev?: PreviousRef }): Promise<MeterInterface[]> {
+    const endpoint = new EndpointCreator({
+      endpoint: Modules.StripeUsage,
+      childEndpoint: "meters",
+    });
+
+    return this.callApi({
+      type: Modules.StripeUsage,
+      method: HttpMethod.GET,
+      endpoint: endpoint.generate(),
+      next: params?.next,
+      previous: params?.prev,
+    });
+  }
+
+  /**
+   * Get meter summaries for a specific time period
+   */
+  static async getMeterSummaries(params: {
+    meterId: string;
+    startTime: Date;
+    endTime: Date;
+  }): Promise<MeterSummaryInterface[]> {
+    const endpoint = new EndpointCreator({
+      endpoint: Modules.StripeUsage,
+      childEndpoint: `meters/${params.meterId}/summaries`,
+    });
+
+    endpoint.addAdditionalParam("startTime", params.startTime.toISOString());
+    endpoint.addAdditionalParam("endTime", params.endTime.toISOString());
+
+    return this.callApi({
+      type: Modules.StripeUsage,
+      method: HttpMethod.GET,
+      endpoint: endpoint.generate(),
+    });
+  }
+
+  // ============================================================================
+  // Usage Record Methods
+  // ============================================================================
+
+  /**
+   * Report usage for a subscription item
+   */
+  static async reportUsage(params: ReportUsageInput): Promise<StripeUsageInterface> {
+    const endpoint = new EndpointCreator({
+      endpoint: Modules.StripeUsage,
+    });
+
+    return this.callApi<StripeUsageInterface>({
+      type: Modules.StripeUsage,
+      method: HttpMethod.POST,
+      endpoint: endpoint.generate(),
+      input: params,
+    });
+  }
+
+  /**
+   * List usage records for a subscription item
+   */
+  static async listUsageRecords(params: {
+    subscriptionItemId: string;
+    next?: NextRef;
+    prev?: PreviousRef;
+  }): Promise<StripeUsageInterface[]> {
+    const endpoint = new EndpointCreator({
+      endpoint: Modules.StripeUsage,
+    });
+
+    endpoint.addAdditionalParam("subscriptionItemId", params.subscriptionItemId);
+
+    return this.callApi({
+      type: Modules.StripeUsage,
+      method: HttpMethod.GET,
+      endpoint: endpoint.generate(),
+      next: params?.next,
+      previous: params?.prev,
+    });
+  }
+
+  /**
+   * Get usage summary for a subscription item
+   */
+  static async getUsageSummary(params: {
+    subscriptionItemId: string;
+    start?: Date;
+    end?: Date;
+  }): Promise<UsageSummaryInterface> {
+    const endpoint = new EndpointCreator({
+      endpoint: Modules.StripeUsage,
+      childEndpoint: "summary",
+    });
+
+    endpoint.addAdditionalParam("subscriptionItemId", params.subscriptionItemId);
+    if (params.start) {
+      endpoint.addAdditionalParam("start", params.start.toISOString());
+    }
+    if (params.end) {
+      endpoint.addAdditionalParam("end", params.end.toISOString());
+    }
+
+    return this.callApi({
+      type: Modules.StripeUsage,
+      method: HttpMethod.GET,
+      endpoint: endpoint.generate(),
+    });
+  }
+}

package/src/features/billing/stripe-usage/data/stripe-usage.ts

@@ -0,0 +1,70 @@
+import { AbstractApiData, JsonApiHydratedDataInterface, Modules } from "../../../../core";
+import { ReportUsageInput, StripeUsageInterface } from "./stripe-usage.interface";
+
+export class StripeUsage extends AbstractApiData implements StripeUsageInterface {
+  private _subscriptionId?: string;
+  private _meterId?: string;
+  private _meterEventName?: string;
+  private _stripeEventId?: string;
+  private _quantity?: number;
+  private _timestamp?: Date;
+
+  get subscriptionId(): string {
+    if (!this._subscriptionId) throw new Error("subscriptionId is not defined");
+    return this._subscriptionId;
+  }
+
+  get meterId(): string {
+    if (!this._meterId) throw new Error("meterId is not defined");
+    return this._meterId;
+  }
+
+  get meterEventName(): string {
+    if (!this._meterEventName) throw new Error("meterEventName is not defined");
+    return this._meterEventName;
+  }
+
+  get stripeEventId(): string {
+    if (!this._stripeEventId) throw new Error("stripeEventId is not defined");
+    return this._stripeEventId;
+  }
+
+  get quantity(): number {
+    if (this._quantity === undefined) throw new Error("quantity is not defined");
+    return this._quantity;
+  }
+
+  get timestamp(): Date | undefined {
+    return this._timestamp;
+  }
+
+  rehydrate(data: JsonApiHydratedDataInterface): this {
+    super.rehydrate(data);
+
+    this._subscriptionId = data.jsonApi.attributes.subscriptionId;
+    this._meterId = data.jsonApi.attributes.meterId;
+    this._meterEventName = data.jsonApi.attributes.meterEventName;
+    this._stripeEventId = data.jsonApi.attributes.stripeEventId;
+    this._quantity = data.jsonApi.attributes.quantity;
+    this._timestamp = data.jsonApi.attributes.timestamp ? new Date(data.jsonApi.attributes.timestamp) : undefined;
+
+    return this;
+  }
+
+  createJsonApi(data: ReportUsageInput): any {
+    const response: any = {
+      data: {
+        type: Modules.StripeUsage.name,
+        attributes: {
+          subscriptionItemId: data.subscriptionItemId,
+          quantity: data.quantity,
+        },
+      },
+    };
+
+    if (data.timestamp !== undefined) response.data.attributes.timestamp = data.timestamp;
+    if (data.action !== undefined) response.data.attributes.action = data.action;
+
+    return response;
+  }
+}

package/src/features/billing/stripe-usage/index.ts

@@ -0,0 +1,2 @@
+export * from "./data";
+export * from "./stripe-usage.module";

package/src/features/billing/stripe-usage/stripe-usage.module.ts

@@ -0,0 +1,9 @@
+import { ModuleFactory } from "../../../permissions";
+import { StripeUsage } from "./data/stripe-usage";
+
+export const StripeUsageModule = (factory: ModuleFactory) =>
+  factory({
+    name: "stripe-usage-records",
+    model: StripeUsage,
+    moduleId: "c2e9f4a6-1d7b-4e3a-8f5c-9b2d6a1e7f3c",
+  });

package/src/features/company/components/forms/CompanyEditor.tsx

@@ -26,8 +26,8 @@ import { useI18nRouter } from "../../../../i18n";
 import { getRoleId } from "../../../../roles";
 import { Dialog, DialogContent, Form, ScrollArea } from "../../../../shadcnui";
 import { FeatureInterface } from "../../../feature";
-import { S3Interface } from "../../../s3";
 import { FeatureService } from "../../../feature/data/feature.service";
+import { S3Interface } from "../../../s3";
 import { S3Service } from "../../../s3/data/s3.service";
 import { UserInterface } from "../../../user";
 import { useCurrentUserContext } from "../../../user/contexts";
@@ -122,7 +122,7 @@ function CompanyEditorInternal({ company, propagateChanges, onRevalidate }: Comp
       if (hasRole(getRoleId().Administrator)) {
         setFeatures(allfeatures);
       } else {
-        setFeatures(allfeatures.filter((feature) => feature.isProduction));
+        setFeatures(allfeatures.filter((feature) => feature.isCore));
       }
     }
     if (

package/src/features/company/components/forms/CompanyLicense.tsx

@@ -26,8 +26,8 @@ import {
   Link,
 } from "../../../../shadcnui";
 import { UserInterface } from "../../../user";
-import { UserService } from "../../../user/data/user.service";
 import { useCurrentUserContext } from "../../../user/contexts";
+import { UserService } from "../../../user/data/user.service";
 import { CompanyInput } from "../../data";
 import { CompanyService } from "../../data/company.service";
 
@@ -154,11 +154,11 @@ export default function CompanyLicense({ onRevalidate, onUpdateToken }: CompanyL
               <CardHeader>
                 <CardTitle>Company License Required</CardTitle>
                 <CardDescription className={`flex w-full flex-col`}>
-                  <div>You need to activate your license to use Phlow.</div>
+                  <div>You need to activate your license to use Only35.</div>
                   <div>
                     <span>To obtain your license, please visit</span>
-                    <Link href="https://phlow.com" target="_blank" className={`text-primary`}>
-                      our website (https://phlow.com)
+                    <Link href="https://only35.com" target="_blank" className={`text-primary`}>
+                      our website (https://only35.com)
                     </Link>
                     <span>, register for an account and follow the instructions provided.</span>
                   </div>

package/src/features/company/contexts/CompanyContext.tsx

@@ -10,7 +10,7 @@ import { Action } from "../../../permissions";
 import { getRoleId } from "../../../roles";
 import { UserInterface } from "../../user";
 import { useCurrentUserContext } from "../../user/contexts";
-import { CompanyConfigurationEditor, CompanyDeleter, CompanyEditor } from "../components";
+import { CompanyDeleter, CompanyEditor } from "../components";
 import { CompanyInterface } from "../data";
 
 interface CompanyContextType {
@@ -71,7 +71,7 @@ export const CompanyProvider = ({ children, dehydratedCompany }: CompanyProvider
       hasRole(getRoleId().Administrator) ||
       hasPermissionToModule({ module: Modules.Company, action: Action.Update })
     ) {
-      if (company) functions.push(<CompanyConfigurationEditor key="companyConfigurationEditor" company={company} />);
+      // if (company) functions.push(<CompanyConfigurationEditor key="companyConfigurationEditor" company={company} />);
       functions.push(<CompanyEditor key="companyEditor" company={company} propagateChanges={setCompany} />);
     }