{ "name": "Casebook", "slug": "casebook", "blocks": ["Pages", "Lists", "Sign-in: users", "Actions: pay"], "persona": "freelancers", "keywords": [ "client portal", "app", "login", "member sign-in", "clients", "files", "bookkeeper", "accountant", "document upload", "receipts", "tasks", "virtual assistant", "members area" ], "description": "An app template for a small bookkeeping practice: each client signs in to send receipts, invoices and letters from their phone, answer the bookkeeper's questions, and see where their next VAT return or tax deadline stands. A public page with the two monthly packages, six member screens under /app and a privacy notice with blanks.", "audience": [ "bookkeepers and small accounting practices", "freelance finance assistants" ], "category": "Client portal", "job": "member-app", "categoryId": "client-portal", "alsoFits": [ "payroll bureau client area", "office admin service", "paperwork drop for a lettings agent", "virtual assistant client portal" ], "direction": "Manila accordion file with index tabs, tear-off deadline pages and red-ink stamps on typed slips", "mood": [ "light", "calm", "classic" ], "fonts": [ "Libre Franklin", "Courier Prime" ], "memberApp": { "path": "/app", "setup": { "signup": "invite", "profile_fields": [ { "name": "name", "type": "text", "label": "First name" }, { "name": "business", "type": "text", "label": "Business name" } ], "display_field": "name" }, "lists": [ { "list": "documents", "label": "Papers", "by": "member", "status_options": [ "Received", "Checked", "Query", "Filed" ], "reply": true, "fields": [ { "name": "kind", "type": "choice", "label": "What is it?", "required": true, "options": [ "Receipt", "Sales invoice", "Bill", "Letter", "Other" ] }, { "name": "file", "type": "photo", "label": "Photo or PDF", "required": true }, { "name": "title", "type": "text", "label": "Who from, or what for", "required": true }, { "name": "amount", "type": "number", "label": "Amount (£)" }, { "name": "period", "type": "text", "label": "Which month?" }, { "name": "memo", "type": "long_text", "label": "Anything we should know" } ] }, { "list": "questions", "label": "Questions for the client", "by": "owner", "fields": [ { "name": "question", "type": "text", "label": "Question", "required": true }, { "name": "stage", "type": "choice", "label": "Stage", "required": true, "options": [ "Waiting on you", "Sorted" ] }, { "name": "due", "type": "date", "label": "Answer by" }, { "name": "detail", "type": "long_text", "label": "What we need" }, { "name": "asked_by", "type": "text", "label": "Asked by" } ] }, { "list": "answers", "label": "Answers and notes", "by": "member", "status_options": [ "Received", "Sorted" ], "reply": true, "fields": [ { "name": "about", "type": "choice", "label": "What is this?", "required": true, "options": [ "Something else", "Question", "Approval" ] }, { "name": "question", "type": "text", "label": "Which question or filing?", "required": true }, { "name": "answer", "type": "long_text", "label": "Your answer", "required": true }, { "name": "file", "type": "photo", "label": "Add a photo or PDF" } ] }, { "list": "deadlines", "label": "Deadlines", "by": "owner", "fields": [ { "name": "filing", "type": "text", "label": "Filing", "required": true }, { "name": "period", "type": "text", "label": "Period" }, { "name": "due", "type": "date", "label": "Due", "required": true }, { "name": "stage", "type": "choice", "label": "Stage", "required": true, "options": [ "Gathering papers", "Being prepared", "Ready for you to approve", "Filed" ] }, { "name": "sales", "type": "number", "label": "Sales (£)" }, { "name": "vat_sales", "type": "number", "label": "VAT on sales (£)" }, { "name": "vat_costs", "type": "number", "label": "VAT on costs (£)" }, { "name": "to_pay", "type": "number", "label": "To pay (£)" }, { "name": "memo", "type": "long_text", "label": "Note" }, { "name": "link", "type": "text", "label": "Link to the working papers" } ] } ], "plans": [ { "plan": "essentials", "name": "Essentials", "paid": true, "price": { "amount": 4500, "currency": "gbp", "interval": "month" } }, { "plan": "vat", "name": "Essentials + VAT", "paid": true, "price": { "amount": 9500, "currency": "gbp", "interval": "month" } } ], "demo": { "member": { "name": "Imogen Tarrant", "email": "imogen.tarrant@example.com", "profile": { "name": "Imogen", "business": "Quarrybank Pottery" } }, "plans": [ "vat" ], "rows": { "documents": [ { "kind": "Receipt", "file": "art/doc-fuel.svg", "title": "Fuel, Quarry Lane services", "amount": 58.4, "period": "This month", "_added": "-1d", "_status": "Received" }, { "kind": "Receipt", "file": "art/doc-courier.svg", "title": "Parcelforce, 3 parcels to Bristol", "amount": 21.85, "period": "This month", "_added": "-2d", "_status": "Checked" }, { "kind": "Receipt", "file": "art/doc-kiln.svg", "title": "Kilnworks, kiln element repair", "amount": 486, "period": "This month", "memo": "Paid on the spot when the engineer came out.", "_added": "-6d", "_status": "Query", "_reply": "Thanks, Imogen. We can’t see this £486 leave the business account. There’s a question for you on it." }, { "kind": "Sales invoice", "file": "art/doc-invoice.svg", "title": "Harbour Gallery, invoice 0142", "amount": 640, "period": "This month", "_added": "-8d", "_status": "Filed", "_reply": "Matched to their payment on the 30th." }, { "kind": "Bill", "file": "art/doc-rent.svg", "title": "Studio rent, Quarry Yard Unit 4", "amount": 550, "period": "This month", "_added": "-12d", "_status": "Filed" }, { "kind": "Letter", "file": "art/doc-rates.svg", "title": "Business rates, new instalments", "period": "This month", "memo": "They changed the dates. Does this change what I put aside?", "_added": "-19d", "_status": "Checked", "_reply": "£94 a month, ten instalments. Already in your cash plan." }, { "kind": "Receipt", "file": "art/doc-clay.svg", "title": "Valentine Clays, stoneware order", "amount": 318.2, "period": "Last month", "_added": "-41d", "_status": "Filed" } ], "questions": [ { "question": "Receipt for the Potclays glaze order (£212.60)", "stage": "Waiting on you", "due": "+4d", "detail": "It’s on the business account but we have no receipt. A photo of the email confirmation is fine.", "asked_by": "Morwenna", "_added": "-3d" }, { "question": "Which account paid the kiln repair?", "stage": "Waiting on you", "due": "+2d", "detail": "Kilnworks were paid £486 this month, but it isn’t on the business account. If it went on a personal card, say so and we’ll record it as money you put in.", "asked_by": "Ruairi", "_added": "-5d" }, { "question": "Etsy payout last month: sales or a refund?", "stage": "Sorted", "detail": "One payout was £34 lower than the sales report.", "asked_by": "Morwenna", "_added": "-14d" }, { "question": "Is the studio rent going up?", "stage": "Sorted", "detail": "Last month’s invoice mentions a review.", "asked_by": "Ruairi", "_added": "-33d" } ], "answers": [ { "about": "Question", "question": "Etsy payout last month: sales or a refund?", "answer": "Both. Sales, less a £34 refund to a customer in Leeds for a cracked mug.", "_added": "-13d", "_status": "Sorted", "_reply": "Perfect, thank you. Booked as sales with the refund against them." }, { "about": "Question", "question": "Is the studio rent going up?", "answer": "Yes, from £520 to £550 a month. The new invoice is in Papers.", "file": "art/doc-rent.svg", "_added": "-30d", "_status": "Sorted", "_reply": "Got it. £550 from this month on." } ], "deadlines": [ { "filing": "VAT return", "period": "Last quarter", "due": "+12d", "stage": "Ready for you to approve", "sales": 14820, "vat_sales": 2964, "vat_costs": 1695.6, "to_pay": 1268.4, "memo": "The two open questions are small and won’t change these figures. Approve them and Morwenna files the same day.", "link": "https://files.wenlockpirie.example.com/quarrybank/vat-last-quarter", "_added": "-9d" }, { "filing": "Self Assessment", "period": "Last tax year", "due": "2027-01-31", "stage": "Gathering papers", "memo": "We start in December. Send your pension statement when it arrives.", "_added": "-20d" }, { "filing": "VAT return", "period": "The quarter before", "due": "-80d", "stage": "Filed", "sales": 13940, "vat_sales": 2788, "vat_costs": 1603.8, "to_pay": 1184.2, "memo": "Filed and paid on time.", "link": "https://files.wenlockpirie.example.com/quarrybank/vat-quarter-before", "_added": "-80d" } ] } } }, "files": [ "index.html", "privacy.html", "app/index.html", "app/upload.html", "app/papers.html", "app/questions.html", "app/deadlines.html", "app/package.html", "app/account.html", "styles.css", "app.js", "kit.css", "kit.js", "kit-icons.svg", "site.webmanifest", "favicon.svg", "art/icons.svg", "art/doc-fuel.svg", "art/doc-courier.svg", "art/doc-kiln.svg", "art/doc-invoice.svg", "art/doc-rent.svg", "art/doc-rates.svg", "art/doc-clay.svg", "og.png", "apple-touch-icon.png", "icon-192.png", "icon-512.png", "icon-512-maskable.png" ], "pages": [ { "path": "index.html", "label": "Home", "purpose": "The public page: what clients do in the app, the three steps, the two monthly packages with prices, the practice and its hours, and a link to sign in" }, { "path": "app/index.html", "label": "Home", "purpose": "Signed out: a welcome with the drawn accordion file and sign-in. Signed in: how many questions are waiting, the next deadline as a tear-off calendar page with its figures and stage, the questions as red-ink slips, the latest papers in the manila folder, and send buttons" }, { "path": "app/upload.html", "label": "Send a paper", "purpose": "The core action: choose what it is, take a photo or pick a PDF, who it is from, the amount and month, and a note; saved papers show in Papers" }, { "path": "app/papers.html", "label": "Papers", "purpose": "Everything the client has sent, newest first, behind manila tabs by kind, each a typed slip with a thumbnail, the bookkeeper’s status as a rubber stamp (Received, Checked, Query, Filed) and reply" }, { "path": "app/questions.html", "label": "Questions", "purpose": "The bookkeeper’s questions waiting on the client with an answer form (prefilled from the question), then the sorted questions and the client’s answers with the bookkeeper’s reply" }, { "path": "app/deadlines.html", "label": "Deadlines", "purpose": "Each filing (VAT return, Self Assessment) with its period, due date, a four-step stage timeline, a note and a link to the figures" }, { "path": "app/package.html", "label": "Package", "purpose": "The client’s monthly package, what it covers and how to change it; join buttons for clients without one" }, { "path": "app/account.html", "label": "Account", "purpose": "Page Lemon’s account block (sign-in, profile, package renewal, billing, devices, leaving) and how to reach the practice" }, { "path": "privacy.html", "label": "Privacy", "purpose": "The privacy notice, with blanks the Site Owner fills in" } ], "facts": [ "practice name", "address", "contact email", "phone number", "opening hours", "the bookkeepers’ names", "package prices", "privacy contact and address" ], "interview": [ "What is your practice called, where is it, and who in it looks after clients?", "Who are your clients (sole traders, small companies, landlords), and which filings do you do for them?", "What packages do you offer, what does each cover, and what do they cost a month?", "Which papers do clients send most, and how soon do you check them?", "How quickly do you answer a client, and on which days and hours?", "Which email address and phone number should clients use?", "What address and privacy contact should the privacy notice show?" ], "customise": { "strings": [ "Wenlock Pirie Bookkeeping, its address, phone, email and hours: replace every data-pl-fill fact with the owner’s own, and the names Morwenna and Ruairi on index.html and the app pages. Replace the name in site.webmanifest.name too; keep short_name as Casebook unless the owner chooses another app name.", "Fill in every highlighted blank on privacy.html with the Site Owner before clients use the site (not legal advice: https://pagelemon.com/agents/member-app-legal).", "setup_app with signup invite (the practice invites each client), profile_fields and display_field as memberApp.setup says; then save_app_list for documents, questions, answers and deadlines exactly as memberApp.lists says, so the field names match the pages.", "The owner’s path: Dashboard, Apps, Entries. Open a new paper, set its status (Received, Checked, Query, Filed) and write a short reply; the client sees both on Papers and Home. Ask a question by adding a questions row assigned to the client with stage Waiting on you; set it to Sorted once their answer is in. Keep each deadline row’s stage current.", "Set the plans with save_plan: essentials (£45 a month) and vat (Essentials + VAT, £95 a month). Change the prices on index.html and app/package.html together.", "Stage names are the choice options of questions.stage and deadlines.stage; if you rename them, change data-cb-stage on the pages too so the timeline and badges follow.", "Paperwork only: never add fields that ask clients for card, bank account, ID or tax reference numbers, passwords or anything about their health. Keep the line “Cover the long card number before you take the photo.” next to the photo field." ], "colours": "Edit the --cb-* and --k-* tokens at the top of styles.css: Manila #F2D58A for the folder and tabs, Ledger Green #1F5B45 for actions, Red Ink #B3261E for deadlines, money owed and queries, Carbon #1C1F1D text on white. The dark scheme (a dark desk where the folder and paper keep their colours) follows the device.", "fonts": "Libre Franklin (headings and buttons) with Courier Prime (every amount, reference, date and typed label), from one Google Fonts link in each page head; to self-host, swap that link for local files and keep the --cb-sans and --cb-type stacks in styles.css", "sections": "Member pages live under /app and use the shared app kit (kit.css, kit.js, kit-icons.svg; never edit those copies). app/upload.html holds the documents add form; app/questions.html the answers add form (?question= prefills it); app/index.html, papers.html, questions.html and deadlines.html show the lists; app/package.html the join buttons; app/account.html the account block. app.js turns each stage into the stamp and timeline, counts the days to a deadline (and to 31 January on index.html), counts the questions still waiting for the headings, runs the folder tabs on Papers (?kind=Receipt opens that tab) and fills this month on the send form.", "images": "No photos: paper and type only. art/doc-*.svg are the sample client’s papers (drawn, no real data). The accordion file on index.html and the signed-out Home, the tear-off calendar pages, paper clips and rubber stamps are drawn in HTML and CSS (pb-*, cb-acc, cb-tear, cb-clip, cb-stamp in styles.css). art/icons.svg adds the file, upload, folder and message icons. favicon.svg is the manila folder mark; the PNG icons are made from it." }, "schemaVersion": 2, "updated": "2026-10-25" }