Merge pull request 'feat: show customer branding on login page' (#7) from feature/login-branding into main

Reviewed-on: #7

packages/admin/src/components/pos/pos-cart-panel.tsx

@@ -4,7 +4,6 @@ import { posMutations, posKeys, type Transaction } from '@/api/pos'
 import { Button } from '@/components/ui/button'
 import { Separator } from '@/components/ui/separator'
 import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import { X, Banknote, CreditCard, FileText, Ban, UserRound, Tag } from 'lucide-react'
 import { toast } from 'sonner'

packages/admin/src/components/pos/pos-receipt.tsx

@@ -100,7 +100,6 @@ function useStoreLogo(companyId?: string) {
 }
 
 export function POSReceipt({ data, size = 'thermal', footerText, config }: POSReceiptProps) {
-  const { transaction: txn, company, location } = data
   const isThermal = size === 'thermal'
 
   if (!isThermal) {

packages/admin/src/routes/login.tsx

@@ -1,8 +1,13 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { createFileRoute, useRouter, redirect } from '@tanstack/react-router'
 import { useAuthStore } from '@/stores/auth.store'
 import { login } from '@/api/auth'
 
+interface Branding {
+  name: string | null
+  hasLogo: boolean
+}
+
 export const Route = createFileRoute('/login')({
   beforeLoad: () => {
     const { token } = useAuthStore.getState()
@@ -20,6 +25,14 @@ function LoginPage() {
   const [password, setPassword] = useState('')
   const [error, setError] = useState('')
   const [loading, setLoading] = useState(false)
+  const [branding, setBranding] = useState<Branding | null>(null)
+
+  useEffect(() => {
+    fetch('/v1/store/branding')
+      .then((r) => r.ok ? r.json() : null)
+      .then((data) => { if (data) setBranding(data) })
+      .catch(() => {})
+  }, [])
 
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault()
@@ -48,8 +61,16 @@ function LoginPage() {
         style={{ backgroundColor: '#131c2e', borderColor: '#1e2d45' }}
       >
         <div className="text-center mb-8">
-          <h1 className="text-3xl font-bold" style={{ color: '#d8dfe9' }}>LunarFront</h1>
+          {branding?.hasLogo ? (
-          <p className="text-sm mt-1" style={{ color: '#6b7a8d' }}>Small Business Management</p>
+            <img src="/v1/store/logo" alt={branding.name ?? 'Store'} className="max-h-14 max-w-[220px] object-contain mx-auto" />
+          ) : (
+            <h1 className="text-3xl font-bold" style={{ color: '#d8dfe9' }}>{branding?.name ?? 'LunarFront'}</h1>
+          )}
+          {branding?.name ? (
+            <p className="text-[10px] mt-2" style={{ color: '#4a5568' }}>Powered by <span style={{ color: '#6b7a8d' }}>LunarFront</span></p>
+          ) : (
+            <p className="text-sm mt-1" style={{ color: '#6b7a8d' }}>Small Business Management</p>
+          )}
         </div>
         <form onSubmit={handleSubmit} className="space-y-4">
           <div className="space-y-2">

packages/backend/src/routes/v1/store.ts

@@ -1,9 +1,43 @@
 import type { FastifyPluginAsync } from 'fastify'
 import { eq } from 'drizzle-orm'
 import { companies, locations } from '../../db/schema/stores.js'
+import { files } from '../../db/schema/files.js'
 import { ValidationError } from '../../lib/errors.js'
 
 export const storeRoutes: FastifyPluginAsync = async (app) => {
+  // --- Public branding (no auth — used on login page) ---
+
+  app.get('/store/branding', async (_request, reply) => {
+    const [store] = await app.db.select({
+      name: companies.name,
+      logoFileId: companies.logoFileId,
+    }).from(companies).limit(1)
+    if (!store) return reply.send({ name: null, hasLogo: false })
+    return reply.send({ name: store.name, hasLogo: !!store.logoFileId })
+  })
+
+  app.get('/store/logo', async (_request, reply) => {
+    const [store] = await app.db.select({ logoFileId: companies.logoFileId }).from(companies).limit(1)
+    if (!store?.logoFileId) return reply.status(404).send({ error: { message: 'No logo configured', statusCode: 404 } })
+
+    const [file] = await app.db.select().from(files).where(eq(files.id, store.logoFileId)).limit(1)
+    if (!file) return reply.status(404).send({ error: { message: 'Logo file not found', statusCode: 404 } })
+
+    try {
+      const data = await app.storage.get(file.path)
+      const ext = file.path.split('.').pop()?.toLowerCase()
+      const contentTypeMap: Record<string, string> = {
+        jpg: 'image/jpeg', jpeg: 'image/jpeg', png: 'image/png', webp: 'image/webp', svg: 'image/svg+xml',
+      }
+      return reply
+        .header('Content-Type', contentTypeMap[ext ?? ''] ?? 'application/octet-stream')
+        .header('Cache-Control', 'public, max-age=3600')
+        .send(data)
+    } catch {
+      return reply.status(404).send({ error: { message: 'Logo file not readable', statusCode: 404 } })
+    }
+  })
+
   // --- Company / Store Settings ---
 
   app.get('/store', { preHandler: [app.authenticate, app.requirePermission('settings.view')] }, async (request, reply) => {

packages/backend/src/services/report.service.ts

@@ -1,4 +1,4 @@
-import { eq, and, sql, gte, lt } from 'drizzle-orm'
+import { eq, and, gte, lt } from 'drizzle-orm'
 import type { PostgresJsDatabase } from 'drizzle-orm/postgres-js'
 import { transactions, drawerSessions, drawerAdjustments, registers } from '../db/schema/pos.js'
 import { locations } from '../db/schema/stores.js'