Add super-admin invoices: settings templates and per-business issue flow.

Platform invoice templates live under Settings; each business can list and issue invoices with optional name and a meshkee.com public link.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/super-admin/src/components/Modal.module.css

@@ -27,6 +27,10 @@
   max-width: 640px;
 }
 
+.modalXl {
+  max-width: min(1180px, calc(100vw - 40px));
+}
+
 .header {
   position: relative;
   padding: 18px 18px 10px;

apps/super-admin/src/components/Modal.tsx

@@ -8,9 +8,11 @@ interface ModalProps {
   children: React.ReactNode
   onClose: () => void
   wide?: boolean
+  /** Extra-wide dialog for dense forms (e.g. invoice editor). */
+  xl?: boolean
 }
 
-export function Modal({ open, title, children, onClose, wide }: ModalProps) {
+export function Modal({ open, title, children, onClose, wide, xl }: ModalProps) {
   useEffect(() => {
     if (!open) return
     const onKey = (e: KeyboardEvent) => {
@@ -22,9 +24,11 @@ export function Modal({ open, title, children, onClose, wide }: ModalProps) {
 
   if (!open) return null
 
+  const sizeClass = xl ? styles.modalXl : wide ? styles.modalWide : ''
+
   return (
     <div className={styles.overlay} role="dialog" aria-modal="true" onClick={onClose}>
-      <div className={`${styles.modal} ${wide ? styles.modalWide : ''}`} onClick={(e) => e.stopPropagation()}>
+      <div className={`${styles.modal} ${sizeClass}`} onClick={(e) => e.stopPropagation()}>
         <div className={styles.header}>
           <h3 className={styles.title}>{title}</h3>
           <button type="button" className={styles.closeBtn} onClick={onClose} aria-label="Close">

apps/super-admin/src/components/PageContent.module.css

@@ -46,7 +46,7 @@
 
 .gridHome {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(4, 1fr);
   gap: 24px;
 }
 

apps/super-admin/src/components/Sidebar.tsx

@@ -1,5 +1,5 @@
 import { NavLink, useNavigate } from 'react-router-dom'
-import { Home, Building2, Users, Globe, HelpCircle, LogOut } from 'lucide-react'
+import { Home, Building2, Users, Globe, Settings, HelpCircle, LogOut } from 'lucide-react'
 import { useAuth } from '../context/AuthContext'
 import meshkeeLogo from '../assets/meshkee-logo.png'
 import styles from './Sidebar.module.css'
@@ -9,6 +9,7 @@ const navItems = [
   { icon: Building2, label: 'Businesses', to: '/businesses' },
   { icon: Users, label: 'Users', to: '/users' },
   { icon: Globe, label: 'Websites', to: '/websites' },
+  { icon: Settings, label: 'Settings', to: '/settings' },
 ]
 
 const footerItems = [