feat: implement Players component with data fetching and loading state; remove mock data and enhance error handling in database service

pages/Cities.tsx

@@ -53,6 +53,17 @@ const Cities: React.FC<CitiesProps> = ({ onSelectCity }) => {
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
+    const loadData = async () => {
+      setLoading(true);
+      try {
+        await dbService.fetchAll();
+      } catch (error) {
+        console.warn('Failed to fetch fresh data:', error);
+        // Continue with cached data
+      }
+      setLoading(false);
+    };
+
     const loadCities = () => {
       // Get all organizations from database
       const allOrgs = dbService.getOrgs();
@@ -63,7 +74,7 @@ const Cities: React.FC<CitiesProps> = ({ onSelectCity }) => {
         // Count citizens (players with this organizationId)
         const allPlayers = dbService.getPlayers();
         const citizenCount = allPlayers.filter(player =>
-          player.stats.organizationId === city.id
+          player.organizationId === city.id
         ).length;
 
         // Count businesses/projects in this city
@@ -87,11 +98,10 @@ const Cities: React.FC<CitiesProps> = ({ onSelectCity }) => {
 
       setCities(cityOrgs);
       setCitiesWithStats(citiesStats);
-      setLoading(false);
     };
 
-    // Initial load
-    loadCities();
+    // Load fresh data on mount
+    loadData();
 
     // Subscribe to updates
     const unsub = dbService.subscribe(loadCities);