{hasLogo && (
- // Uploaded SVGs are sanitized and served by our route. next/image's
- // optimizer intentionally rejects SVG, so a native img is required.
- // eslint-disable-next-line @next/next/no-img-element
-
diff --git a/apps/web/src/components/branding/business-brand-image.tsx b/apps/web/src/components/branding/business-brand-image.tsx
new file mode 100644
index 0000000..94248d9
--- /dev/null
+++ b/apps/web/src/components/branding/business-brand-image.tsx
@@ -0,0 +1,54 @@
+import { cn } from "~/lib/utils";
+import {
+ businessBrandAssetPath,
+ hasBusinessBrandAsset,
+ type BrandAssetKind,
+ type BrandAssetTheme,
+ type BusinessBrandAssets,
+} from "~/lib/business-branding";
+
+type BusinessBrandImageProps = {
+ business: BusinessBrandAssets & { id: string; name?: string | null };
+ kind?: BrandAssetKind;
+ theme?: BrandAssetTheme | "auto";
+ className?: string;
+ imageClassName?: string;
+ decorative?: boolean;
+};
+
+export function BusinessBrandImage({
+ business,
+ kind = "icon",
+ theme = "auto",
+ className,
+ imageClassName,
+ decorative = false,
+}: BusinessBrandImageProps) {
+ if (!hasBusinessBrandAsset(business)) return null;
+ const alt = decorative ? "" : `${business.name ?? "Business"} ${kind}`;
+ const image = (variant: BrandAssetTheme, variantClassName?: string) => (
+ // eslint-disable-next-line @next/next/no-img-element -- object-storage-backed SVG/raster brand asset
+
+ );
+
+ return (
+
+ {theme === "auto" ? (
+ <>
+ {image("light", "dark:hidden")}
+ {image("dark", "hidden dark:block")}
+
+ ) : (
+ image(theme)
+ )}
+
+ );
+}
diff --git a/apps/web/src/components/branding/dashboard-brand.tsx b/apps/web/src/components/branding/dashboard-brand.tsx
new file mode 100644
index 0000000..064bea7
--- /dev/null
+++ b/apps/web/src/components/branding/dashboard-brand.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import { BusinessBrandImage } from "~/components/branding/business-brand-image";
+import { Logo } from "~/components/branding/logo";
+import { hasBusinessBrandAsset } from "~/lib/business-branding";
+import { api } from "~/trpc/react";
+
+export function DashboardBrand({ compact = false }: { compact?: boolean }) {
+ const { data: business } = api.businesses.getDefault.useQuery();
+ if (business && hasBusinessBrandAsset(business)) {
+ return (
+
+ );
+ }
+ return
;
+}
diff --git a/apps/web/src/components/forms/business-form.tsx b/apps/web/src/components/forms/business-form.tsx
index a9bacc8..e23cb95 100644
--- a/apps/web/src/components/forms/business-form.tsx
+++ b/apps/web/src/components/forms/business-form.tsx
@@ -24,7 +24,10 @@ import { toast } from "sonner";
import { AddressForm } from "~/components/forms/address-form";
import { FloatingActionBar } from "~/components/layout/floating-action-bar";
import { DashboardPageHeader } from "~/components/layout/page-header";
-import { DashboardPage, dashboardGapClass } from "~/components/layout/dashboard-page";
+import {
+ DashboardPage,
+ dashboardGapClass,
+} from "~/components/layout/dashboard-page";
import { cn } from "~/lib/utils";
import { Button } from "~/components/ui/button";
import { Alert, AlertDescription } from "~/components/ui/alert";
@@ -43,6 +46,13 @@ import {
VALIDATION_MESSAGES,
} from "~/lib/form-constants";
import { api } from "~/trpc/react";
+import {
+ businessBrandAssetPath,
+ getBrandAssetFieldNames,
+ hasBusinessBrandAsset,
+ type BrandAssetKind,
+ type BrandAssetTheme,
+} from "~/lib/business-branding";
interface BusinessFormProps {
businessId?: string;
@@ -114,6 +124,54 @@ const ACCEPTED_LOGO_TYPES = new Set([
"image/svg+xml",
]);
+const BRAND_ASSET_SLOTS: Array<{
+ kind: BrandAssetKind;
+ theme: BrandAssetTheme;
+ label: string;
+ description: string;
+}> = [
+ {
+ kind: "logo",
+ theme: "light",
+ label: "Logo · light",
+ description: "Icon + text for light backgrounds",
+ },
+ {
+ kind: "logo",
+ theme: "dark",
+ label: "Logo · dark",
+ description: "Icon + text for dark backgrounds",
+ },
+ {
+ kind: "wordmark",
+ theme: "light",
+ label: "Wordmark · light",
+ description: "Text-only mark for light backgrounds",
+ },
+ {
+ kind: "wordmark",
+ theme: "dark",
+ label: "Wordmark · dark",
+ description: "Text-only mark for dark backgrounds",
+ },
+ {
+ kind: "icon",
+ theme: "light",
+ label: "Icon · light",
+ description: "Compact mark for light UI",
+ },
+ {
+ kind: "icon",
+ theme: "dark",
+ label: "Icon · dark",
+ description: "Compact mark for dark UI",
+ },
+];
+
+function assetSlotKey(kind: BrandAssetKind, theme: BrandAssetTheme) {
+ return `${kind}-${theme}`;
+}
+
export function BusinessForm({ businessId, mode }: BusinessFormProps) {
const router = useRouter();
const utils = api.useUtils();
@@ -123,7 +181,7 @@ export function BusinessForm({ businessId, mode }: BusinessFormProps) {
const [showApiKey, setShowApiKey] = useState(false);
const [isDirty, setIsDirty] = useState(false);
const [initialized, setInitialized] = useState(false);
- const [isUploadingLogo, setIsUploadingLogo] = useState(false);
+ const [uploadingAsset, setUploadingAsset] = useState
(null);
// Fetch business data if editing
const { data: business, isLoading: isLoadingBusiness } =
@@ -165,20 +223,20 @@ export function BusinessForm({ businessId, mode }: BusinessFormProps) {
});
const uploadLogo = api.businesses.uploadLogo.useMutation({
- onSuccess: async () => {
+ onSuccess: async (_data, variables) => {
await utils.businesses.getById.invalidate({ id: businessId });
- toast.success("Logo updated");
+ toast.success(`${variables.kind} ${variables.theme} variant updated`);
},
onError: (error) => {
toast.error(error.message || "Failed to upload logo");
},
- onSettled: () => setIsUploadingLogo(false),
+ onSettled: () => setUploadingAsset(null),
});
const removeLogo = api.businesses.removeLogo.useMutation({
- onSuccess: async () => {
+ onSuccess: async (_data, variables) => {
await utils.businesses.getById.invalidate({ id: businessId });
- toast.success("Logo removed");
+ toast.success(`${variables.kind} ${variables.theme} variant removed`);
},
onError: (error) => {
toast.error(error.message || "Failed to remove logo");
@@ -187,6 +245,8 @@ export function BusinessForm({ businessId, mode }: BusinessFormProps) {
const handleLogoFileSelected = async (
e: React.ChangeEvent,
+ kind: BrandAssetKind,
+ theme: BrandAssetTheme,
) => {
const file = e.target.files?.[0];
e.target.value = "";
@@ -201,7 +261,7 @@ export function BusinessForm({ businessId, mode }: BusinessFormProps) {
return;
}
- setIsUploadingLogo(true);
+ setUploadingAsset(assetSlotKey(kind, theme));
const data = await new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => {
@@ -217,6 +277,8 @@ export function BusinessForm({ businessId, mode }: BusinessFormProps) {
filename: file.name,
mimeType: file.type,
data,
+ kind,
+ theme,
});
};
@@ -229,12 +291,7 @@ export function BusinessForm({ businessId, mode }: BusinessFormProps) {
// Load business data once when editing (avoid overwriting unsaved changes on refetch)
useEffect(() => {
- if (
- business &&
- mode === "edit" &&
- !initialized &&
- !isLoadingEmailConfig
- ) {
+ if (business && mode === "edit" && !initialized && !isLoadingEmailConfig) {
// eslint-disable-next-line react-hooks/set-state-in-effect -- Sync loaded business data into the edit form.
setFormData({
name: business.name,
@@ -732,74 +789,128 @@ export function BusinessForm({ businessId, mode }: BusinessFormProps) {
-
Logo
+
Brand assets
- Shown on invoices sent to your clients. PNG, JPEG,
- WebP, or SVG, up to 5MB.
+ Add logos, wordmarks, and icons for light and dark
+ backgrounds. Missing variants fall back automatically.
+ PNG, JPEG, WebP, or SVG, up to 5MB.