Mobile view fixes (#188)
* fix: make new user checklist mobile responsive Adjust spacing, padding, typography, and indentation for small screens so the onboarding welcome screen works well on mobile devices. * fix: make expenses and bookkeeping verification views mobile responsive - Expenses/new: stack form grids on mobile, replace line items table with card layout, full-width action buttons - Expenses/[id]: stack header and actions, card layout for line items and payments, single-column info grid on mobile - JournalEntryList: unify verification lines into card layout for all screen sizes, hide redundant line descriptions that duplicate account name or entry description, stack filter bar and action buttons on mobile * fix: remove stray )); in provider_consents migration Syntax error on line 35 caused MIGRATIONS_FAILED on the Supabase staging branch. * fix: enhance mobile responsiveness for invoices page and update dialog styles
This commit is contained in:
Mattsson
@@ -10,6 +10,7 @@ import { Switch } from '@/components/ui/switch'
|
||||
import { ArrowDownNarrowWide, ArrowUpNarrowWide, ChevronDown, ChevronRight, Paperclip, AlertTriangle, Loader2, BookOpen, X } from 'lucide-react'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { AccountNumber } from '@/components/ui/account-number'
|
||||
import { getAccountDescription } from '@/lib/bookkeeping/account-descriptions'
|
||||
import JournalEntryAttachments from '@/components/bookkeeping/JournalEntryAttachments'
|
||||
import CorrectionEntryDialog from '@/components/bookkeeping/CorrectionEntryDialog'
|
||||
import JournalEntryStatusBadge from '@/components/bookkeeping/JournalEntryStatusBadge'
|
||||
@@ -176,26 +177,40 @@ export default function JournalEntryList({ periodId }: Props) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Filters and sorting */}
|
||||
<div className="flex items-center gap-4 flex-wrap">
|
||||
<div className="flex items-center gap-2">
|
||||
<Switch
|
||||
id="missing-attachments"
|
||||
checked={showMissingOnly}
|
||||
onCheckedChange={setShowMissingOnly}
|
||||
/>
|
||||
<Label htmlFor="missing-attachments" className="text-sm cursor-pointer">
|
||||
Visa saknade underlag
|
||||
</Label>
|
||||
{showMissingOnly && (
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{filteredEntries.length}
|
||||
</Badge>
|
||||
)}
|
||||
<div className="space-y-3 sm:space-y-0 sm:flex sm:items-center sm:gap-4 sm:flex-wrap">
|
||||
<div className="flex items-center justify-between sm:justify-start gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Switch
|
||||
id="missing-attachments"
|
||||
checked={showMissingOnly}
|
||||
onCheckedChange={setShowMissingOnly}
|
||||
/>
|
||||
<Label htmlFor="missing-attachments" className="text-sm cursor-pointer">
|
||||
Visa saknade underlag
|
||||
</Label>
|
||||
{showMissingOnly && (
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{filteredEntries.length}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="h-8 gap-1.5 sm:hidden"
|
||||
onClick={() => { setDateSortDir(dateSortDir === 'desc' ? 'asc' : 'desc'); setPage(0) }}
|
||||
>
|
||||
{dateSortDir === 'desc' ? (
|
||||
<ArrowDownNarrowWide className="h-4 w-4" />
|
||||
) : (
|
||||
<ArrowUpNarrowWide className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="h-8 gap-1.5"
|
||||
className="h-8 gap-1.5 hidden sm:inline-flex"
|
||||
onClick={() => { setDateSortDir(dateSortDir === 'desc' ? 'asc' : 'desc'); setPage(0) }}
|
||||
>
|
||||
{dateSortDir === 'desc' ? (
|
||||
@@ -223,7 +238,7 @@ export default function JournalEntryList({ periodId }: Props) {
|
||||
applyDateFilter()
|
||||
}
|
||||
}}
|
||||
className="h-8 w-[145px] text-xs"
|
||||
className="h-8 flex-1 sm:flex-none sm:w-[145px] text-xs"
|
||||
/>
|
||||
<Input
|
||||
type="text"
|
||||
@@ -242,12 +257,12 @@ export default function JournalEntryList({ periodId }: Props) {
|
||||
applyDateFilter()
|
||||
}
|
||||
}}
|
||||
className="h-8 w-[145px] text-xs"
|
||||
className="h-8 flex-1 sm:flex-none sm:w-[145px] text-xs"
|
||||
/>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="h-8 text-xs"
|
||||
className="h-8 text-xs shrink-0"
|
||||
onClick={applyDateFilter}
|
||||
>
|
||||
Filtrera
|
||||
@@ -256,7 +271,7 @@ export default function JournalEntryList({ periodId }: Props) {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => { setDateFrom(''); setDateTo(''); setDateFromInput(''); setDateToInput(''); setPage(0) }}
|
||||
className="p-1 rounded-sm hover:bg-muted text-muted-foreground"
|
||||
className="p-1 rounded-sm hover:bg-muted text-muted-foreground shrink-0"
|
||||
title="Rensa datumfilter"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
@@ -354,93 +369,47 @@ export default function JournalEntryList({ periodId }: Props) {
|
||||
<p className="text-sm text-muted-foreground py-2">Inga kontorader hittades för denna verifikation.</p>
|
||||
) : (
|
||||
<>
|
||||
{/* Mobile: stacked cards */}
|
||||
<div className="sm:hidden space-y-2">
|
||||
<div className="space-y-3">
|
||||
{lines
|
||||
.sort((a, b) => a.sort_order - b.sort_order)
|
||||
.map((line) => (
|
||||
<div key={line.id} className="flex items-center justify-between py-2 border-b last:border-0 gap-2">
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="text-sm"><AccountNumber number={line.account_number} showName /></div>
|
||||
{line.line_description && (
|
||||
<p className="text-xs text-muted-foreground truncate">{line.line_description}</p>
|
||||
)}
|
||||
.map((line) => {
|
||||
const accountName = getAccountDescription(line.account_number)?.name
|
||||
const desc = line.line_description
|
||||
const showDesc = desc
|
||||
&& desc.toLowerCase() !== accountName?.toLowerCase()
|
||||
&& desc.toLowerCase() !== entry.description?.toLowerCase()
|
||||
return (
|
||||
<div key={line.id} className="rounded-lg border p-3 space-y-1.5">
|
||||
<div className="text-sm">
|
||||
<AccountNumber number={line.account_number} showName />
|
||||
</div>
|
||||
<div className="text-right shrink-0 text-sm tabular-nums">
|
||||
{Number(line.debit_amount) > 0 && (
|
||||
<p>{Number(line.debit_amount).toLocaleString('sv-SE', { minimumFractionDigits: 2 })} D</p>
|
||||
)}
|
||||
{Number(line.credit_amount) > 0 && (
|
||||
<p>{Number(line.credit_amount).toLocaleString('sv-SE', { minimumFractionDigits: 2 })} K</p>
|
||||
)}
|
||||
{showDesc && (
|
||||
<p className="text-xs text-muted-foreground">{desc}</p>
|
||||
)}
|
||||
<div className="flex justify-between items-center pt-1 border-t text-sm">
|
||||
<span className="text-muted-foreground">
|
||||
{Number(line.debit_amount) > 0 ? 'Debet' : 'Kredit'}
|
||||
</span>
|
||||
<span className="font-mono tabular-nums font-medium">
|
||||
{Number(line.debit_amount) > 0
|
||||
? Number(line.debit_amount).toLocaleString('sv-SE', { minimumFractionDigits: 2 })
|
||||
: Number(line.credit_amount).toLocaleString('sv-SE', { minimumFractionDigits: 2 })}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div className="flex justify-between font-semibold text-sm pt-1">
|
||||
<span>Summa</span>
|
||||
<div className="flex gap-3 tabular-nums">
|
||||
<span>D: {lines.reduce((sum, l) => sum + (Number(l.debit_amount) || 0), 0).toLocaleString('sv-SE', { minimumFractionDigits: 2 })}</span>
|
||||
<span>K: {lines.reduce((sum, l) => sum + (Number(l.credit_amount) || 0), 0).toLocaleString('sv-SE', { minimumFractionDigits: 2 })}</span>
|
||||
)
|
||||
})}
|
||||
<div className="rounded-lg bg-muted/50 p-3 text-sm font-semibold space-y-1">
|
||||
<div className="flex justify-between">
|
||||
<span>Summa debet</span>
|
||||
<span className="font-mono tabular-nums">{lines.reduce((sum, l) => sum + (Number(l.debit_amount) || 0), 0).toLocaleString('sv-SE', { minimumFractionDigits: 2 })}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>Summa kredit</span>
|
||||
<span className="font-mono tabular-nums">{lines.reduce((sum, l) => sum + (Number(l.credit_amount) || 0), 0).toLocaleString('sv-SE', { minimumFractionDigits: 2 })}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Desktop: table */}
|
||||
<div className="hidden sm:block">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b text-left text-muted-foreground">
|
||||
<th className="py-2 w-48">Konto</th>
|
||||
<th className="py-2">Beskrivning</th>
|
||||
<th className="py-2 w-28 text-right">Debet</th>
|
||||
<th className="py-2 w-28 text-right">Kredit</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{lines
|
||||
.sort((a, b) => a.sort_order - b.sort_order)
|
||||
.map((line) => (
|
||||
<tr key={line.id} className="border-b last:border-0">
|
||||
<td className="py-2"><AccountNumber number={line.account_number} showName /></td>
|
||||
<td className="py-2 text-muted-foreground">
|
||||
{line.line_description || ''}
|
||||
</td>
|
||||
<td className="py-2 text-right tabular-nums">
|
||||
{Number(line.debit_amount) > 0
|
||||
? Number(line.debit_amount).toLocaleString('sv-SE', {
|
||||
minimumFractionDigits: 2,
|
||||
})
|
||||
: ''}
|
||||
</td>
|
||||
<td className="py-2 text-right tabular-nums">
|
||||
{Number(line.credit_amount) > 0
|
||||
? Number(line.credit_amount).toLocaleString('sv-SE', {
|
||||
minimumFractionDigits: 2,
|
||||
})
|
||||
: ''}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr className="font-semibold">
|
||||
<td colSpan={2} className="py-2">
|
||||
Summa
|
||||
</td>
|
||||
<td className="py-2 text-right">
|
||||
{lines
|
||||
.reduce((sum, l) => sum + (Number(l.debit_amount) || 0), 0)
|
||||
.toLocaleString('sv-SE', { minimumFractionDigits: 2 })}
|
||||
</td>
|
||||
<td className="py-2 text-right">
|
||||
{lines
|
||||
.reduce((sum, l) => sum + (Number(l.credit_amount) || 0), 0)
|
||||
.toLocaleString('sv-SE', { minimumFractionDigits: 2 })}
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -449,14 +418,15 @@ export default function JournalEntryList({ periodId }: Props) {
|
||||
onCountChange={(c) => handleAttachmentCountChange(entry.id, c)}
|
||||
/>
|
||||
|
||||
<div className="mt-4 pt-3 border-t flex gap-2">
|
||||
<Button variant="outline" size="sm" asChild>
|
||||
<div className="mt-4 pt-3 border-t flex flex-col sm:flex-row gap-2">
|
||||
<Button variant="outline" size="sm" className="w-full sm:w-auto" asChild>
|
||||
<Link href={`/bookkeeping/${entry.id}`}>Visa detaljer</Link>
|
||||
</Button>
|
||||
{entry.status === 'posted' && entry.source_type !== 'storno' && entry.source_type !== 'correction' && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="w-full sm:w-auto"
|
||||
onClick={() => setCorrectionEntry(entry)}
|
||||
>
|
||||
Skapa ändringsverifikation
|
||||
|
||||
@@ -24,10 +24,10 @@ export default function NewUserChecklist({
|
||||
const hasBanking = ENABLED_EXTENSION_IDS.has('enable-banking')
|
||||
|
||||
return (
|
||||
<div className={cn('min-h-[75vh] flex flex-col items-center justify-center stagger-enter', className)}>
|
||||
<div className={cn('min-h-[75vh] flex flex-col items-center justify-center px-4 sm:px-0 stagger-enter', className)}>
|
||||
<div className="w-full max-w-2xl">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-12">
|
||||
<div className="text-center mb-8 md:mb-12">
|
||||
<h1 className="font-display text-2xl md:text-3xl font-medium tracking-tight">
|
||||
Välkommen till gnubok
|
||||
</h1>
|
||||
@@ -38,7 +38,7 @@ export default function NewUserChecklist({
|
||||
</div>
|
||||
|
||||
{/* Step 1: Migrate bookkeeping */}
|
||||
<div className="mb-8">
|
||||
<div className="mb-6 md:mb-8">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<span className="h-7 w-7 rounded-full bg-foreground text-background flex items-center justify-center text-xs font-semibold flex-shrink-0 tabular-nums">
|
||||
1
|
||||
@@ -48,24 +48,24 @@ export default function NewUserChecklist({
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 ml-10">
|
||||
<div className="space-y-3 ml-0 sm:ml-10">
|
||||
{hasMigration && (
|
||||
<Link
|
||||
href="/import?mode=migration"
|
||||
className="group block p-5 rounded-xl border border-primary/20 bg-primary/[0.02] hover:bg-primary/[0.05] hover:border-primary/40 transition-all duration-150 active:scale-[0.99]"
|
||||
className="group block p-4 sm:p-5 rounded-xl border border-primary/20 bg-primary/[0.02] hover:bg-primary/[0.05] hover:border-primary/40 transition-all duration-150 active:scale-[0.99]"
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="p-2.5 rounded-lg bg-primary/[0.08] group-hover:bg-primary/[0.12] transition-colors flex-shrink-0">
|
||||
<ArrowRightLeft className="h-5 w-5 text-primary" />
|
||||
<div className="flex items-start gap-3 sm:gap-4">
|
||||
<div className="p-2 sm:p-2.5 rounded-lg bg-primary/[0.08] group-hover:bg-primary/[0.12] transition-colors flex-shrink-0">
|
||||
<ArrowRightLeft className="h-4 w-4 sm:h-5 sm:w-5 text-primary" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-medium group-hover:text-primary transition-colors">
|
||||
<p className="font-medium group-hover:text-primary transition-colors text-sm sm:text-base">
|
||||
Hämta från annat system
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground mt-1.5 leading-relaxed underline decoration-foreground/20 underline-offset-2">
|
||||
<p className="text-xs sm:text-sm text-muted-foreground mt-1 sm:mt-1.5 leading-relaxed underline decoration-foreground/20 underline-offset-2">
|
||||
Inget ändras i ditt befintliga system.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2 mt-3">
|
||||
<div className="flex flex-wrap gap-1.5 sm:gap-2 mt-2.5 sm:mt-3">
|
||||
{([
|
||||
{ name: 'Fortnox', logo: '/logos/fortnox.svg' },
|
||||
{ name: 'Visma', logo: '/logos/visma.jpeg' },
|
||||
@@ -73,9 +73,9 @@ export default function NewUserChecklist({
|
||||
{ name: 'Björn Lundén', logo: '/logos/bjornlunden.png' },
|
||||
{ name: 'Briox', logo: '/logos/Briox_logo.png' },
|
||||
] as const).map(provider => (
|
||||
<div key={provider.name} className="flex items-center gap-1.5 rounded border border-border/60 bg-muted/30 px-2 py-1">
|
||||
<img src={provider.logo} alt={provider.name} className="h-4 w-4 shrink-0 rounded-sm object-contain" />
|
||||
<span className="text-[11px] font-medium text-muted-foreground">{provider.name}</span>
|
||||
<div key={provider.name} className="flex items-center gap-1 sm:gap-1.5 rounded border border-border/60 bg-muted/30 px-1.5 sm:px-2 py-0.5 sm:py-1">
|
||||
<img src={provider.logo} alt={provider.name} className="h-3.5 w-3.5 sm:h-4 sm:w-4 shrink-0 rounded-sm object-contain" />
|
||||
<span className="text-[10px] sm:text-[11px] font-medium text-muted-foreground">{provider.name}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -87,17 +87,17 @@ export default function NewUserChecklist({
|
||||
|
||||
<Link
|
||||
href="/import?mode=sie"
|
||||
className="group block p-5 rounded-xl border border-border/60 hover:border-primary/40 hover:bg-primary/[0.02] transition-all duration-150 active:scale-[0.99]"
|
||||
className="group block p-4 sm:p-5 rounded-xl border border-border/60 hover:border-primary/40 hover:bg-primary/[0.02] transition-all duration-150 active:scale-[0.99]"
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="p-2.5 rounded-lg bg-muted/60 group-hover:bg-primary/[0.08] transition-colors flex-shrink-0">
|
||||
<FileText className="h-5 w-5 text-muted-foreground group-hover:text-primary transition-colors" />
|
||||
<div className="flex items-start gap-3 sm:gap-4">
|
||||
<div className="p-2 sm:p-2.5 rounded-lg bg-muted/60 group-hover:bg-primary/[0.08] transition-colors flex-shrink-0">
|
||||
<FileText className="h-4 w-4 sm:h-5 sm:w-5 text-muted-foreground group-hover:text-primary transition-colors" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-medium group-hover:text-primary transition-colors">
|
||||
<p className="font-medium group-hover:text-primary transition-colors text-sm sm:text-base">
|
||||
Importera SIE-fil
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground mt-1.5 leading-relaxed">
|
||||
<p className="text-xs sm:text-sm text-muted-foreground mt-1 sm:mt-1.5 leading-relaxed">
|
||||
Exportera en SIE4-fil från ditt nuvarande bokföringsprogram och ladda upp den här.
|
||||
</p>
|
||||
</div>
|
||||
@@ -108,7 +108,7 @@ export default function NewUserChecklist({
|
||||
</div>
|
||||
|
||||
{/* Step 2: Connect bank */}
|
||||
<div className="mb-12">
|
||||
<div className="mb-8 md:mb-12">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<span className="h-7 w-7 rounded-full bg-foreground text-background flex items-center justify-center text-xs font-semibold flex-shrink-0 tabular-nums">
|
||||
2
|
||||
@@ -118,20 +118,20 @@ export default function NewUserChecklist({
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="ml-10">
|
||||
<div className="ml-0 sm:ml-10">
|
||||
<Link
|
||||
href={hasBanking ? '/import?mode=psd2' : '/import?mode=bank'}
|
||||
className="group block p-5 rounded-xl border border-border/60 hover:border-primary/40 hover:bg-primary/[0.02] transition-all duration-150 active:scale-[0.99]"
|
||||
className="group block p-4 sm:p-5 rounded-xl border border-border/60 hover:border-primary/40 hover:bg-primary/[0.02] transition-all duration-150 active:scale-[0.99]"
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="p-2.5 rounded-lg bg-muted/60 group-hover:bg-primary/[0.08] transition-colors flex-shrink-0">
|
||||
<Landmark className="h-5 w-5 text-muted-foreground group-hover:text-primary transition-colors" />
|
||||
<div className="flex items-start gap-3 sm:gap-4">
|
||||
<div className="p-2 sm:p-2.5 rounded-lg bg-muted/60 group-hover:bg-primary/[0.08] transition-colors flex-shrink-0">
|
||||
<Landmark className="h-4 w-4 sm:h-5 sm:w-5 text-muted-foreground group-hover:text-primary transition-colors" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-medium group-hover:text-primary transition-colors">
|
||||
<p className="font-medium group-hover:text-primary transition-colors text-sm sm:text-base">
|
||||
Anslut ditt bankkonto
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground mt-1.5 leading-relaxed">
|
||||
<p className="text-xs sm:text-sm text-muted-foreground mt-1 sm:mt-1.5 leading-relaxed">
|
||||
{hasBanking
|
||||
? 'Koppla via PSD2 — transaktioner synkas automatiskt varje dag.'
|
||||
: 'Importera kontoutdrag från din bank — CSV, OFX och de flesta svenska banker.'}
|
||||
|
||||
@@ -37,7 +37,7 @@ const DialogContent = React.forwardRef<
|
||||
<DialogPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
|
||||
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 max-h-[calc(100dvh-2rem)] overflow-y-auto data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
Reference in New Issue
Block a user