change ports

SPEC.md

@@ -245,7 +245,7 @@ air
 cd frontend && npm run dev
 ```
 
-Frontend dev server runs on `:5173` and proxies API calls to `:8081`.
+Frontend dev server runs on `:5175` and proxies API calls to `:8085`.
 
 ### Production Build
 

frontend/src/App.jsx

@@ -15,7 +15,7 @@ import ChangePasswordModal from './components/ChangePasswordModal'
 import SettingsModal from './components/SettingsModal'
 import './App.css'
 
-const API_BASE = import.meta.env.VITE_API_URL || 'http://localhost:8081/api'
+const API_BASE = import.meta.env.VITE_API_URL || 'http://localhost:8085/api'
 
 function App() {
   const navigate = useNavigate()

frontend/src/components/Activity.jsx

@@ -2,7 +2,7 @@ import { useState, useEffect, useRef, useCallback } from 'react'
 import axios from 'axios'
 import LazyMedia from './LazyMedia'
 
-const API_BASE = import.meta.env.VITE_API_URL || 'http://localhost:8081/api'
+const API_BASE = import.meta.env.VITE_API_URL || 'http://localhost:8085/api'
 const PAGE_SIZE = 50
 
 function Activity({ startDate, endDate }) {

frontend/src/components/Calls.jsx

@@ -1,7 +1,7 @@
 import { useState, useEffect, useRef, useCallback } from 'react'
 import axios from 'axios'
 
-const API_BASE = import.meta.env.VITE_API_URL || 'http://localhost:8081/api'
+const API_BASE = import.meta.env.VITE_API_URL || 'http://localhost:8085/api'
 const PAGE_SIZE = 50
 
 function Calls({ startDate, endDate }) {

frontend/src/components/LazyMedia.jsx

@@ -3,7 +3,7 @@ import axios from 'axios'
 import VCardPreview from './VCardPreview'
 import './LazyMedia.css'
 
-const API_BASE = import.meta.env.VITE_API_URL || 'http://localhost:8081/api'
+const API_BASE = import.meta.env.VITE_API_URL || 'http://localhost:8085/api'
 
 function LazyMedia({ messageId, mediaType, className, alt = "MMS attachment" }) {
   const [src, setSrc] = useState(null)

frontend/src/components/MediaCarousel.jsx

@@ -2,7 +2,7 @@ import { useState, useEffect, useRef } from 'react'
 import { format } from 'date-fns'
 import './MediaCarousel.css'
 
-const API_BASE = import.meta.env.VITE_API_URL || 'http://localhost:8081/api'
+const API_BASE = import.meta.env.VITE_API_URL || 'http://localhost:8085/api'
 
 function MediaCarousel({ mediaItems, initialIndex, onClose, transcodeVideos = new Set() }) {
   const [currentIndex, setCurrentIndex] = useState(initialIndex)

frontend/src/components/MediaGrid.jsx

@@ -3,7 +3,7 @@ import axios from 'axios'
 import MediaCarousel from './MediaCarousel'
 import './MediaGrid.css'
 
-const API_BASE = import.meta.env.VITE_API_URL || 'http://localhost:8081/api'
+const API_BASE = import.meta.env.VITE_API_URL || 'http://localhost:8085/api'
 
 function MediaGrid({ conversation, startDate, endDate }) {
   const [mediaItems, setMediaItems] = useState([])

frontend/src/components/MessageThread.jsx

@@ -5,7 +5,7 @@ import { format } from 'date-fns'
 import LazyMedia from './LazyMedia'
 import MediaGrid from './MediaGrid'
 
-const API_BASE = import.meta.env.VITE_API_URL || 'http://localhost:8081/api'
+const API_BASE = import.meta.env.VITE_API_URL || 'http://localhost:8085/api'
 
 function MessageThread({ conversation, startDate, endDate }) {
   const location = useLocation()

frontend/src/components/PrintView.jsx

@@ -4,7 +4,7 @@ import axios from 'axios'
 import { format } from 'date-fns'
 import './PrintView.css'
 
-const API_BASE = import.meta.env.VITE_API_URL || 'http://localhost:8081/api'
+const API_BASE = import.meta.env.VITE_API_URL || 'http://localhost:8085/api'
 
 function PrintView() {
   const { address } = useParams()

frontend/src/components/Search.jsx

@@ -3,7 +3,7 @@ import { useEffect, useRef } from 'react'
 import axios from 'axios'
 import { format } from 'date-fns'
 
-const API_BASE = import.meta.env.VITE_API_URL || 'http://localhost:8081/api'
+const API_BASE = import.meta.env.VITE_API_URL || 'http://localhost:8085/api'
 
 function Search({ searchQuery, setSearchQuery, results, setResults, loading, setLoading, searched, setSearched, scrollPosition, setScrollPosition }) {
   const navigate = useNavigate()

frontend/src/components/SettingsModal.jsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react'
 import axios from 'axios'
 
-const API_BASE = import.meta.env.VITE_API_URL || 'http://localhost:8081/api'
+const API_BASE = import.meta.env.VITE_API_URL || 'http://localhost:8085/api'
 
 function SettingsModal({ show, onClose, onSettingsUpdated }) {
   const [settings, setSettings] = useState({

frontend/src/components/Summary.jsx

@@ -5,7 +5,7 @@ import {
   PieChart, Pie, Cell, LineChart, Line, Legend
 } from 'recharts'
 
-const API_BASE = import.meta.env.VITE_API_URL || 'http://localhost:8081/api'
+const API_BASE = import.meta.env.VITE_API_URL || 'http://localhost:8085/api'
 
 // Color palette
 const COLORS = ['#0d6efd', '#198754', '#ffc107', '#dc3545', '#6c757d', '#0dcaf0', '#6610f2', '#d63384']
@@ -166,23 +166,25 @@ function Summary({ startDate, endDate }) {
               <div className="card-header">Sent vs Received</div>
               <div className="card-body">
                 {messageTypeData.length > 0 ? (
-                  <ResponsiveContainer width="100%" height={200}>
+                  <ResponsiveContainer width="100%" height={240}>
                     <PieChart>
                       <Pie
                         data={messageTypeData}
                         cx="50%"
-                        cy="50%"
+                        cy="45%"
                         innerRadius={40}
-                        outerRadius={80}
+                        outerRadius={70}
                         paddingAngle={5}
                         dataKey="value"
-                        label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
+                        label={({ percent }) => `${(percent * 100).toFixed(0)}%`}
+                        labelLine={true}
                       >
                         {messageTypeData.map((entry, index) => (
                           <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                         ))}
                       </Pie>
-                      <Tooltip />
+                      <Tooltip formatter={(value, name) => [value.toLocaleString(), name]} />
+                      <Legend />
                     </PieChart>
                   </ResponsiveContainer>
                 ) : (

frontend/src/components/Upload.jsx

@@ -2,7 +2,7 @@ import { useState } from 'react'
 import axios from 'axios'
 import { Modal, Button, Form, Alert, Spinner, ProgressBar } from 'react-bootstrap'
 
-const API_BASE = import.meta.env.VITE_API_URL || 'http://localhost:8081/api'
+const API_BASE = import.meta.env.VITE_API_URL || 'http://localhost:8085/api'
 
 function Upload({ onClose, onSuccess }) {
   const [files, setFiles] = useState([])

frontend/src/contexts/AuthContext.jsx

@@ -1,7 +1,7 @@
 import { createContext, useContext, useState, useEffect } from 'react'
 import axios from 'axios'
 
-const API_BASE = import.meta.env.VITE_API_URL || 'http://localhost:8081/api'
+const API_BASE = import.meta.env.VITE_API_URL || 'http://localhost:8085/api'
 
 const AuthContext = createContext(null)
 

frontend/vite.config.js

@@ -4,4 +4,7 @@ import react from '@vitejs/plugin-react'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
+  server: {
+    port: 5175,
+  },
 })

internal/cors_middleware.go

@@ -11,8 +11,9 @@ import (
 func CustomCORSMiddleware() echo.MiddlewareFunc {
 	allowedOrigins := map[string]bool{
 		"http://localhost:5173": true,
+		"http://localhost:5175": true,
 		"http://localhost:3000": true,
-		"http://localhost:8081": true,
+		"http://localhost:8085": true,
 	}
 
 	return func(next echo.HandlerFunc) echo.HandlerFunc {

main.go

@@ -150,7 +150,7 @@ func main() {
 	go func() {
 		port := os.Getenv("PORT")
 		if port == "" {
-			port = "8081"
+			port = "8085"
 		}
 		pprofPort := "6060"
 		logger.Info("Memory profiling available", "url", "http://localhost:"+pprofPort+"/debug/pprof/")
@@ -161,7 +161,7 @@ func main() {
 
 	port := os.Getenv("PORT")
 	if port == "" {
-		port = "8081"
+		port = "8085"
 	}
 
 	// Create HTTP server with longer timeouts for large file uploads