Initial commit: igny8 project

frontend/src/pages/Settings/Industries.tsx

@@ -0,0 +1,64 @@
+import { useState, useEffect } from 'react';
+import PageMeta from '../../components/common/PageMeta';
+import { useToast } from '../../components/ui/toast/ToastContainer';
+import { fetchIndustries, Industry } from '../../services/api';
+import { Card } from '../../components/ui/card';
+import Badge from '../../components/ui/badge/Badge';
+
+export default function Industries() {
+  const toast = useToast();
+  const [industries, setIndustries] = useState<Industry[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    loadIndustries();
+  }, []);
+
+  const loadIndustries = async () => {
+    try {
+      setLoading(true);
+      const response = await fetchIndustries();
+      setIndustries(response.industries || []);
+    } catch (error: any) {
+      toast.error(`Failed to load industries: ${error.message}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="p-6">
+      <PageMeta title="Industries" />
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Industries</h1>
+        <p className="text-gray-600 dark:text-gray-400 mt-1">Manage global industry templates (Admin Only)</p>
+      </div>
+
+      {loading ? (
+        <div className="flex items-center justify-center h-64">
+          <div className="text-gray-500">Loading...</div>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {industries.map((industry) => (
+            <Card key={industry.id} className="p-6">
+              <div className="flex justify-between items-start mb-4">
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">{industry.name}</h3>
+                <Badge variant="light" color={industry.is_active ? 'success' : 'dark'}>
+                  {industry.is_active ? 'Active' : 'Inactive'}
+                </Badge>
+              </div>
+              {industry.description && (
+                <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">{industry.description}</p>
+              )}
+              <p className="text-sm text-gray-500 dark:text-gray-400">
+                Sectors: {industry.sectors_count || 0}
+              </p>
+            </Card>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+