@accounter/client 0.0.7-alpha-20251020201144-e623a2bb538d1219a5f541df2364646012ebe9ea → 0.0.7-alpha-20251021062721-ab43b5f013b9852ff5216bc141852da9dcfe0df7

package/src/components/business/business-header.tsx

@@ -0,0 +1,65 @@
+import { format } from 'date-fns';
+import { Building2 } from 'lucide-react';
+import { Badge } from '@/components/ui/badge.js';
+import { BusinessHeaderFragmentDoc } from '@/gql/graphql.js';
+import { getFragmentData, type FragmentType } from '@/gql/index.js';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
+/* GraphQL */ `
+  fragment BusinessHeader on Business {
+    __typename
+    id
+    name
+    createdAt
+    ... on LtdFinancialEntity {
+      governmentId
+    }
+  }
+`;
+
+interface Props {
+  data?: FragmentType<typeof BusinessHeaderFragmentDoc>;
+}
+
+export function BusinessHeader({ data }: Props) {
+  const business = getFragmentData(BusinessHeaderFragmentDoc, data);
+
+  if (!business || business.__typename !== 'LtdFinancialEntity') {
+    return <div />;
+  }
+
+  return (
+    <header className="sticky top-0 z-50 w-full border-b border-border bg-card/95 backdrop-blur supports-[backdrop-filter]:bg-card/60">
+      <div className="container mx-auto px-4 md:px-6 lg:px-8 max-w-7xl">
+        <div className="flex h-16 items-center justify-between gap-4">
+          <div className="flex items-center gap-3 min-w-0 flex-1">
+            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-accent">
+              <Building2 className="h-5 w-5 text-accent-foreground" />
+            </div>
+            <div className="min-w-0 flex-1">
+              <div className="flex items-center gap-2 flex-wrap">
+                <h1 className="text-lg font-semibold text-foreground">{business.name}</h1>
+                {/* TODO: make dynamic, add client badge */}
+                <Badge variant="secondary">Active</Badge>
+              </div>
+              <p className="text-sm text-muted-foreground truncate">Business ID: {business.id}</p>
+            </div>
+          </div>
+
+          <div className="hidden md:flex items-center gap-6 text-sm">
+            <div className="text-right">
+              <p className="text-muted-foreground">Tax ID</p>
+              <p className="font-medium text-foreground">{business.governmentId}</p>
+            </div>
+            <div className="text-right">
+              <p className="text-muted-foreground">Since</p>
+              <p className="font-medium text-foreground">
+                {format(business.createdAt, 'MMM yyyy')}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}

package/src/components/business/charges-section.tsx

@@ -0,0 +1,82 @@
+import { useContext, useState } from 'react';
+import { useQuery } from 'urql';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card.js';
+import { BusinessChargesSectionDocument, ChargeSortByField } from '@/gql/graphql.js';
+import { UserContext } from '@/providers/user-provider.js';
+import { Pagination } from '@mantine/core';
+import { ChargesTable } from '../charges/charges-table';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
+/* GraphQL */ `
+  query BusinessChargesSection($page: Int, $limit: Int, $filters: ChargeFilter) {
+    allCharges(page: $page, limit: $limit, filters: $filters) {
+      nodes {
+        id
+        ...ChargesTableFields
+      }
+      pageInfo {
+        totalPages
+      }
+    }
+  }
+`;
+
+interface Props {
+  businessId: string;
+}
+
+export function ChargesSection({ businessId }: Props) {
+  const { userContext } = useContext(UserContext);
+  const [activePage, setActivePage] = useState(1);
+
+  const [{ data, fetching }] = useQuery({
+    query: BusinessChargesSectionDocument,
+    variables: {
+      filters: {
+        byOwners: userContext?.context.adminBusinessId
+          ? [userContext.context.adminBusinessId]
+          : undefined,
+        sortBy: {
+          field: ChargeSortByField.Date,
+          asc: false,
+        },
+        byBusinesses: [businessId],
+      },
+      page: activePage,
+      limit: 100,
+    },
+  });
+
+  const totalPages = data?.allCharges?.pageInfo.totalPages ?? 1;
+  const charges = data?.allCharges?.nodes ?? [];
+
+  if (fetching) {
+    return <div>Loading charges...</div>;
+  }
+
+  return (
+    <Card>
+      <CardHeader className="flex w-full justify-between items-center">
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle>Charges</CardTitle>
+            <CardDescription>Recurring and one-time charges for this business</CardDescription>
+          </div>
+        </div>
+        {totalPages > 1 && (
+          <Pagination
+            className="flex-fit"
+            value={activePage}
+            onChange={setActivePage}
+            total={totalPages}
+          />
+        )}
+      </CardHeader>
+      <CardContent>
+        <div className="rounded-md border">
+          <ChargesTable data={charges} isAllOpened={false} />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/business/charts-section.tsx

@@ -0,0 +1,115 @@
+import { DollarSign, TrendingUp } from 'lucide-react';
+import { CartesianGrid, Line, LineChart, ResponsiveContainer, XAxis, YAxis } from 'recharts';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card.js';
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart.js';
+
+const revenueData = [
+  { month: 'Jan', revenue: 12_500, expenses: 8200 },
+  { month: 'Feb', revenue: 15_800, expenses: 9100 },
+  { month: 'Mar', revenue: 18_200, expenses: 10_500 },
+  { month: 'Apr', revenue: 16_900, expenses: 9800 },
+  { month: 'May', revenue: 21_300, expenses: 11_200 },
+  { month: 'Jun', revenue: 24_500, expenses: 12_800 },
+  { month: 'Jul', revenue: 22_800, expenses: 11_900 },
+  { month: 'Aug', revenue: 26_100, expenses: 13_500 },
+  { month: 'Sep', revenue: 28_900, expenses: 14_200 },
+  { month: 'Oct', revenue: 31_200, expenses: 15_100 },
+];
+
+export function ChartsSection() {
+  const totalRevenue = revenueData.reduce((sum, item) => sum + item.revenue, 0);
+  const avgRevenue = totalRevenue / revenueData.length;
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Revenue Analytics</CardTitle>
+        <CardDescription>Revenue and expenses over time</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="grid gap-4 md:grid-cols-3 mb-6">
+          <div className="rounded-lg border p-4 space-y-2">
+            <div className="flex items-center gap-2 text-sm text-muted-foreground">
+              <DollarSign className="h-4 w-4" />
+              Total Revenue
+            </div>
+            <p className="text-2xl font-bold">${totalRevenue.toLocaleString()}</p>
+            <div className="flex items-center gap-1 text-sm text-green-600">
+              <TrendingUp className="h-3 w-3" />
+              <span>+24.5% from last period</span>
+            </div>
+          </div>
+
+          <div className="rounded-lg border p-4 space-y-2">
+            <div className="flex items-center gap-2 text-sm text-muted-foreground">
+              <DollarSign className="h-4 w-4" />
+              Average Monthly
+            </div>
+            <p className="text-2xl font-bold">
+              ${avgRevenue.toLocaleString(undefined, { maximumFractionDigits: 0 })}
+            </p>
+            <div className="flex items-center gap-1 text-sm text-green-600">
+              <TrendingUp className="h-3 w-3" />
+              <span>+18.2% growth rate</span>
+            </div>
+          </div>
+
+          <div className="rounded-lg border p-4 space-y-2">
+            <div className="flex items-center gap-2 text-sm text-muted-foreground">
+              <DollarSign className="h-4 w-4" />
+              Current Month
+            </div>
+            <p className="text-2xl font-bold">
+              ${revenueData[revenueData.length - 1].revenue.toLocaleString()}
+            </p>
+            <div className="flex items-center gap-1 text-sm text-green-600">
+              <TrendingUp className="h-3 w-3" />
+              <span>+8.0% from last month</span>
+            </div>
+          </div>
+        </div>
+
+        <ChartContainer
+          config={{
+            revenue: {
+              label: 'Revenue',
+              color: 'hsl(var(--chart-1))',
+            },
+            expenses: {
+              label: 'Expenses',
+              color: 'hsl(var(--chart-2))',
+            },
+          }}
+          className="h-[400px]"
+        >
+          <ResponsiveContainer width="100%" height="100%">
+            <LineChart data={revenueData} margin={{ top: 5, right: 10, left: 10, bottom: 5 }}>
+              <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
+              <XAxis
+                dataKey="month"
+                className="text-xs"
+                tick={{ fill: 'hsl(var(--muted-foreground))' }}
+              />
+              <YAxis className="text-xs" tick={{ fill: 'hsl(var(--muted-foreground))' }} />
+              <ChartTooltip content={<ChartTooltipContent />} />
+              <Line
+                type="monotone"
+                dataKey="revenue"
+                stroke="var(--color-revenue)"
+                strokeWidth={2}
+                dot={{ fill: 'var(--color-revenue)', r: 4 }}
+              />
+              <Line
+                type="monotone"
+                dataKey="expenses"
+                stroke="var(--color-expenses)"
+                strokeWidth={2}
+                dot={{ fill: 'var(--color-expenses)', r: 4 }}
+              />
+            </LineChart>
+          </ResponsiveContainer>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+}