Merge pull request #7 from nikolaysm/refacto-upload-page

feat(frontend): improve upload UI; add compose watch; better commitlint; sqlite dev DB

- frontend(FileUpload): redesigned Dropzone wrapper with safe container, added top-right **X** clear
  button, made submit full-width, and centered hover/focus states; fixed `cn()` missing comma and
  class duplication; improved empty/error states
- frontend(index): centered landing layout and added subtle background for a cleaner first run
- frontend(package): enable `next dev --turbopack` for faster local refresh
- ci(commitlint): handle new-branch pushes (all-zero `before` SHA) by linting each commit from the
  event payload via `jq`; fail fast if any commit breaks rules; warn/fail when `jq` is unavailable
- makefile: add `compose-watch` for Docker’s file-watcher rebuilds; add `run-db` helper to start
  Postgres quickly; ensure `run-backend` also runs `uv-update` before launching Uvicorn
- backend(config): simplify Pydantic v2 settings, correct `postgresql` typo, and switch default
  `DATABASE_URL` to `sqlite:///./budget_wise.db` for frictionless local development while keeping
  env-var override support (case-insensitive)
- docker-compose: make `db-network`’s `internal` flag configurable via `INTERNAL_DB_NETWORK` (default
  `false`) to ease local service access during development

Author: nikolaysm

.github/workflows/commitlint.yml

@@ -47,7 +47,35 @@ jobs:
             HEAD_SHA="${{ github.event.after }}"
             # Handle initial commit (before can be all zeros)
             if [ "$BASE_SHA" = "0000000000000000000000000000000000000000" ] || [ -z "$BASE_SHA" ]; then
-              BASE_SHA=$(git rev-list --max-parents=0 HEAD | tail -n1)
+              echo "Detected branch creation push (all-zero before). Using per-commit lint from event payload."
+              # Early per-commit lint for new branch pushes
+              if command -v jq >/dev/null 2>&1; then
+                COUNT=$(jq '.commits | length' "$GITHUB_EVENT_PATH")
+                if [ "$COUNT" -eq 0 ]; then
+                  echo "No commits in event payload. Nothing to lint."
+                  exit 0
+                fi
+                FAIL=0
+                for SHA in $(jq -r '.commits[].id' "$GITHUB_EVENT_PATH"); do
+                  MSG=$(git show -s --format=%B "$SHA" 2>/dev/null || true)
+                  if [ -z "$MSG" ]; then
+                    echo "Warning: could not read commit $SHA; skipping."
+                    continue
+                  fi
+                  echo "Linting commit $SHA"
+                  if ! printf "%s" "$MSG" | pnpm exec commitlint --config .commitlintrc.yml; then
+                    FAIL=1
+                  fi
+                done
+                if [ $FAIL -ne 0 ]; then
+                  echo "Commitlint failed for one or more commits."
+                  exit 1
+                fi
+                exit 0
+              else
+                echo "jq not available; cannot lint per-commit for new branch push. Failing."
+                exit 2
+              fi
             fi
             if [ -z "$HEAD_SHA" ]; then
               HEAD_SHA="HEAD"

Makefile

@@ -46,7 +46,7 @@ uv-update: $(VENV)
 	cd backend && $(UV) sync
 
 .PHONY: run-backend
-run-backend: uv-setup
+run-backend: uv-setup uv-update
 	@echo "[run] Starting FastAPI (reload)"
 	[ -f "$$HOME/.local/bin/env" ] && . "$$HOME/.local/bin/env" || true; export PATH="$$HOME/.local/bin:$$PATH"; \
 	cd backend && $(UV) run uvicorn app.main:app --reload
@@ -73,6 +73,12 @@ compose-down:
 	@echo "[docker] Stopping and removing services + volumes"
 	docker compose down -v
 
+# Add docker watchers for frontend and backend
+.PHONY: compose-watch
+compose-watch:
+	@echo "[docker] Building and starting services with watchers"
+	docker compose up --watch --build
+
 # Frontend (pnpm) helpers
 .PHONY: frontend-install
 frontend-install:
@@ -98,3 +104,8 @@ frontend-lint: frontend-install
 frontend-typecheck: frontend-install
 	@echo "[frontend] Type checking"
 	cd $(FRONTEND_DIR) && $(PNPM) exec tsc --noEmit --project tsconfig.json
+
+.PHONY: run-db
+run-db:
+	@echo "[docker] Starting Postgres database"
+	docker compose up -d postgres

backend/app/core/config.py

@@ -13,14 +13,16 @@
 
 class Settings(BaseSettings):
     """Configuration values loaded from environment variables or defaults."""
+    # Use case-insensitive env vars so DATABASE_URL works as expected
+    model_config = SettingsConfigDict(
+        env_file=".env",
+        case_sensitive=False,
+        extra="ignore"
+    )
 
     # Database URL in SQLAlchemy format
     # Example: postgresql+psycopg://user:password@localhost:5432/budget_db
-    database_url: str = "postPgresql+psycopg://budget_user:budget_pass@localhost:5432/budget_db"
-
-    # Pydantic v2 settings configuration
-    # Use case-insensitive env vars so DATABASE_URL works as expected
-    model_config = SettingsConfigDict(env_file=".env", case_sensitive=False)
+    database_url: str = "sqlite:///./budget_wise.db"
 
 
 @lru_cache()

docker-compose.yml

@@ -94,6 +94,6 @@ volumes:
 networks:
   db-network:
     driver: bridge
-    internal: true
+    internal: ${INTERNAL_DB_NETWORK:-false}
   webapp:
     driver: bridge

frontend/components/FileUpload.tsx

@@ -5,6 +5,7 @@ import { cn } from '@/lib/utils';
 import { Upload, Loader2 } from 'lucide-react';
 import { Dropzone, DropzoneContent, DropzoneEmptyState } from '@/components/ui/shadcn-io/dropzone';
 import { Progress } from '@/components/ui/progress';
+import { X } from "lucide-react"
 
 /**
  * FileUpload component allows users to select and submit CSV or Excel files
@@ -51,36 +52,48 @@ const FileUpload: React.FC = () => {
   };
 
   return (
-    <div className="mt-6 max-w-xl space-y-4">
-      <Dropzone
-        accept={{
-          'text/csv': ['.csv'],
-          'application/vnd.ms-excel': ['.xls'],
-          'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': ['.xlsx'],
-        }}
-        maxFiles={1}
-        disabled={isUploading}
-        src={file ? [file] : undefined}
-        onDrop={(accepted) => setFile(accepted[0] || null)}
-      >
-        <DropzoneContent />
-        <DropzoneEmptyState />
-      </Dropzone>
-
-      <div className="flex items-center gap-3">
-        <Button type="button" variant="ghost" onClick={() => setFile(null)} disabled={!file || isUploading}>
-          Clear
-        </Button>
+    <div className="mt-6 min-w-xl max-w-xl space-y-4">
+      <div
+        className="relative flex size-full flex-col gap-4 rounded-md
+          overflow-hidden bg-muted items-center justify-center"
+        >
+        <div className="flex w-full justify-end cursor-pointer">
+          <Button
+            type="button"
+            variant="ghost"
+            onClick={() => setFile(null)}
+            disabled={!file || isUploading}
+          >
+            <X />
+          </Button>
+        </div>
+        <Dropzone
+          className="border-dashed cursor-pointer rounded-t-none"
+          accept={{
+            'text/csv': ['.csv'],
+            'application/vnd.ms-excel': ['.xls'],
+            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': ['.xlsx'],
+          }}
+          maxFiles={1}
+          disabled={isUploading}
+          src={file ? [file] : undefined}
+          onDrop={(accepted) => setFile(accepted[0] || null)}
+        >
+          <DropzoneContent />
+          <DropzoneEmptyState />
+        </Dropzone>
       </div>
 
       <form onSubmit={handleSubmit}>
           <Button
+            variant="secondary"
             type="submit"
             size="lg"
             disabled={!file || isUploading}
             className={cn(
               'group shadow-sm hover:shadow-md transition-all',
-              'ring-1 ring-black/10 hover:ring-black/20'
+              'ring-1 ring-black/10 hover:ring-black/20',
+              'w-full cursor-pointer'
             )}
           >
             {isUploading ? (
@@ -112,7 +125,7 @@ const FileUpload: React.FC = () => {
             {success}
           </div>
         )}
-  {error && (
+        {error && (
           <div className="mt-3 inline-flex items-center gap-2 text-red-600 text-sm">
             <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
               <circle cx="12" cy="12" r="10" />

frontend/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "packageManager": "pnpm@10.15.0",
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx"

frontend/pages/index.tsx

@@ -9,7 +9,7 @@ const Home: NextPage = () => {
         <title>Budget App</title>
         <meta name="description" content="Upload your bank statements and categorize transactions" />
       </Head>
-      <main className="p-8">
+      <main className="p-8 flex flex-col items-center justify-center min-h-screen bg-gray-50">
         <h1 className="text-3xl font-bold">Budget Control</h1>
         <p className="text-gray-600 mt-2">Upload your CSV or Excel files to parse and store your transactions.</p>
         <FileUpload />