chore: Refactor CI/CD pipeline documentation and enhance Docker configurations (#92)

- Deleted outdated CI/CD pipeline documentation to streamline project resources.
- Updated docker-compose.yml to improve performance on macOS by using :cached for volume mounts.
- Enhanced environment.example by adding LORDICON_API_KEY for better configuration management.
- Expanded .dockerignore to exclude additional build artifacts and environment files.
- Introduced LoadingSpinner component for consistent loading indicators across the application.
- Integrated Lordicon components for improved iconography in various UI components.
- Updated theme-switching functionality with a new ThemeSwitcher component for better user experience.

Author: geeth24

CI-CD-PIPELINE.md

@@ -1,18 +1,37 @@
+# Dependencies
 node_modules
-npm-debug.log*
+npm-debug.log
+pnpm-debug.log
+yarn-debug.log
+yarn-error.log
+
+# Next.js build output
 .next
-.nuxt
+out
 dist
-.cache
-.parcel-cache
+build
+
+# Testing
+coverage
+.turbo
+
+# Environment files
+.env
 .env.local
-.env.development.local
-.env.test.local
-.env.production.local
+.env.development
+.env.production
+.env.test
+
+# Misc
 .DS_Store
 *.log
 .git
 .gitignore
 README.md
+
+# IDE
 .vscode
 .idea
+*.swp
+*.swo
+*~

client/.dockerignore

@@ -3,12 +3,14 @@ FROM node:18-alpine
 
 WORKDIR /app
 
+# Install pnpm
 RUN npm install -g pnpm
 
+# Copy only package files first for better caching
 COPY package.json pnpm-lock.yaml ./
-RUN pnpm install
 
-COPY . .
+# Install dependencies
+RUN pnpm install --frozen-lockfile
 
 # Build arguments
 ARG NEXT_PUBLIC_API_URL
@@ -22,6 +24,9 @@ ENV NEXT_PUBLIC_MAPBOX_TOKEN=$NEXT_PUBLIC_MAPBOX_TOKEN
 ENV NODE_ENV=$NODE_ENV
 ENV NEXT_PUBLIC_VERSION=$VERSION
 
+# Copy source files
+COPY . .
+
 EXPOSE 3000
 
 CMD ["pnpm", "dev"]

client/Dockerfile

@@ -7,6 +7,7 @@ import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Input } from "@/components/ui/input";
 import { adminApiGet, adminApiPost } from "@/lib/admin-api-client";
+import { LoadingSpinner } from "@/components/loading-spinner";
 
 
 type TaskRecord = {
@@ -132,7 +133,7 @@ export default function DevToolsPage() {
   if (loading) {
     return (
       <div className="min-h-screen flex items-center justify-center">
-        <div className="text-muted-foreground">Loading...</div>
+        <LoadingSpinner size={64} />
       </div>
     );
   }

client/app/admin/dev-tools/page.tsx

@@ -2,14 +2,14 @@
 
 import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
-import { useTheme } from "next-themes";
 import { Logo } from "@/components/logo";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Input } from "@/components/ui/input";
 import { Skeleton } from "@/components/ui/skeleton";
-import { Shield, LogOut, Users, Settings, Activity, Clock, AlertTriangle, TrendingUp, CheckCircle2, XCircle, Search, Wrench, MapPin, Sun, Moon } from "lucide-react";
+import { ThemeSwitcher } from "@/components/theme-switcher";
+import { Shield, LogOut, Users, Settings, Activity, Clock, AlertTriangle, TrendingUp, CheckCircle2, XCircle, Search, Wrench, MapPin } from "lucide-react";
 import { 
   getAdminStats, 
   getRecentCrises, 
@@ -19,6 +19,7 @@ import {
   type RecentUser
 } from "@/lib/admin-api-client";
 import { formatActivityTime } from "@/lib/utils";
+import { LoadingSpinner } from "@/components/loading-spinner";
 
 interface AdminUser {
   id: string;
@@ -27,8 +28,6 @@ interface AdminUser {
 }
 
 export default function AdminDashboard() {
-  const { theme, setTheme } = useTheme();
-  const [mounted, setMounted] = useState(false);
   const [adminUser, setAdminUser] = useState<AdminUser | null>(null);
   const [loading, setLoading] = useState(true);
   const [statsLoading, setStatsLoading] = useState(true);
@@ -40,10 +39,6 @@ export default function AdminDashboard() {
   const [searchQuery, setSearchQuery] = useState("");
   const router = useRouter();
 
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
   useEffect(() => {
     const checkAuth = async () => {
       const token = localStorage.getItem('admin_token') || sessionStorage.getItem('admin_token');
@@ -167,7 +162,7 @@ export default function AdminDashboard() {
   if (loading && !adminUser) {
     return (
       <div className="min-h-screen flex items-center justify-center">
-        <div className="text-muted-foreground">Loading...</div>
+        <LoadingSpinner size={64} />
       </div>
     );
   }
@@ -186,29 +181,7 @@ export default function AdminDashboard() {
             </Badge>
           </div>
           <div className="flex items-center gap-2">
-            <Button
-              variant="outline"
-              size="icon"
-              onClick={() => {
-                const currentTheme = theme || "system";
-                if (currentTheme === "dark") {
-                  setTheme("light");
-                } else if (currentTheme === "light") {
-                  setTheme("dark");
-                } else {
-                  // If system, toggle to opposite of current resolved theme
-                  const isDark = document.documentElement.classList.contains("dark");
-                  setTheme(isDark ? "light" : "dark");
-                }
-              }}
-              aria-label="Toggle theme"
-            >
-              {mounted && theme === "dark" ? (
-                <Sun className="h-4 w-4" aria-hidden="true" />
-              ) : (
-                <Moon className="h-4 w-4" aria-hidden="true" />
-              )}
-            </Button>
+            <ThemeSwitcher />
             <Button variant="outline" onClick={handleLogout} aria-label="Log out from admin dashboard">
               <LogOut className="mr-2 h-4 w-4" aria-hidden="true" />
               Logout