diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 13ef25a..4726d53 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -6,6 +6,8 @@ import RegisterPage from './pages/auth/RegisterPage'; import { DashboardPage } from './pages/dashboard/DashboardPage'; import { InvoicesPage } from './pages/invoices/InvoicesPage'; +import { CompaniesPage } from './pages/companies/CompaniesPage'; + // ── Protected Route Guard ───────────────────────────────── const ProtectedRoute = ({ children }: { children: React.ReactNode }) => { const isAuthenticated = useAuthStore((state) => state.isAuthenticated); @@ -25,7 +27,7 @@ export default function App() { } /> } /> } /> - إدارة الشركات} /> + } /> إدارة الموظفين} /> الإعدادات} /> diff --git a/frontend/src/pages/companies/CompaniesPage.tsx b/frontend/src/pages/companies/CompaniesPage.tsx new file mode 100644 index 0000000..6e287ad --- /dev/null +++ b/frontend/src/pages/companies/CompaniesPage.tsx @@ -0,0 +1,197 @@ +/** + * ════════════════════════════════════════════════════════════ + * مُصادَق (Musadaq) — Companies Management Page + * ════════════════════════════════════════════════════════════ + */ + +import { useState, useEffect } from 'react'; +import { Building2, Plus, Search, MoreVertical, ShieldCheck, Key } from 'lucide-react'; +import apiClient from '../../api/client'; + +export const CompaniesPage = () => { + const [companies, setCompanies] = useState([]); + const [isLoading, setIsLoading] = useState(true); + const [searchTerm, setSearchTerm] = useState(''); + const [isAddModalOpen, setIsAddModalOpen] = useState(false); + + // Form State + const [name, setName] = useState(''); + const [tin, setTin] = useState(''); + const [address, setAddress] = useState(''); + + const fetchCompanies = async () => { + try { + const { data } = await apiClient.get('/companies'); + setCompanies(data); + } catch (error) { + console.error('Failed to fetch companies', error); + } finally { + setIsLoading(false); + } + }; + + useEffect(() => { + fetchCompanies(); + }, []); + + const handleCreateCompany = async (e: React.FormEvent) => { + e.preventDefault(); + try { + await apiClient.post('/companies', { name, tin, address }); + setIsAddModalOpen(false); + setName(''); + setTin(''); + setAddress(''); + fetchCompanies(); + } catch (error) { + console.error('Failed to create company', error); + alert('حدث خطأ أثناء إضافة الشركة'); + } + }; + + const filteredCompanies = companies.filter(c => + c.name.includes(searchTerm) || c.tin?.includes(searchTerm) + ); + + return ( +
+
+
+

إدارة الشركات

+

أضف عملائك وشركاتك لربط فواتيرهم بنظام جو فوترة.

+
+ +
+ + {/* ── Search Bar ──────────────────────────────── */} +
+
+ + setSearchTerm(e.target.value)} + /> +
+
+ + {/* ── Companies Grid ───────────────────────────────────── */} + {isLoading ? ( +
+
+
+ ) : filteredCompanies.length === 0 ? ( +
+
+ +
+

لا توجد شركات مسجلة

+

ابدأ بإضافة أول شركة لكي تتمكن من رفع فواتيرها ومعالجتها ضريبياً.

+ +
+ ) : ( +
+ {filteredCompanies.map((company, idx) => ( +
+
+
+ +
+ +
+

{company.name}

+

الرقم الضريبي: {company.tin || 'غير محدد'}

+ +
+
+ {company.jofotara_client_id ? ( + + مربوط بجو فوترة + + ) : ( + + غير مربوط + + )} +
+ +
+
+ ))} +
+ )} + + {/* ── Add Company Modal ───────────────────────────────── */} + {isAddModalOpen && ( +
+
+

إضافة شركة جديدة

+
+
+ + setName(e.target.value)} + className="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 outline-none focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 transition-all" + placeholder="مثال: صيدلية النجاح" + /> +
+
+ + setTin(e.target.value)} + className="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 outline-none focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 transition-all font-mono" + placeholder="مثال: 123456789" + /> +
+
+ + setAddress(e.target.value)} + className="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 outline-none focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 transition-all" + placeholder="مثال: عمان، شارع مكة" + /> +
+
+ + +
+
+
+
+ )} +
+ ); +};