feat: modularize admin settings into individual components and standardize swapstation role naming

2026-05-10 17:17:37 +06:00
parent 3d89b38417
commit c8b4f8ff0f
18 changed files with 2838 additions and 2263 deletions
--- a/src/app/admin/settings/components/IntegrationSettings.tsx
+++ b/src/app/admin/settings/components/IntegrationSettings.tsx
@@ -0,0 +1,135 @@
+'use client';
+
+import { CompanySettings } from '../page';
+
+interface IntegrationSettingsProps {
+  settings: CompanySettings;
+  setSettings: React.Dispatch<React.SetStateAction<CompanySettings>>;
+}
+
+export default function IntegrationSettings({ settings, setSettings }: IntegrationSettingsProps) {
+  return (
+    <div className="p-6 space-y-6">
+      <h3 className="text-lg font-semibold text-slate-800">Email Integration (SMTP)</h3>
+
+      <div className="grid lg:grid-cols-2 gap-4">
+        <div>
+          <label className="text-sm text-slate-600">SMTP Host</label>
+          <input
+            type="text"
+            value={settings.smtp.host}
+            onChange={(e) => setSettings({ ...settings, smtp: { ...settings.smtp, host: e.target.value } })}
+            className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
+          />
+        </div>
+        <div>
+          <label className="text-sm text-slate-600">SMTP Port</label>
+          <input
+            type="number"
+            value={settings.smtp.port}
+            onChange={(e) => setSettings({ ...settings, smtp: { ...settings.smtp, port: parseInt(e.target.value) } })}
+            className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
+          />
+        </div>
+        <div>
+          <label className="text-sm text-slate-600">Username</label>
+          <input
+            type="text"
+            value={settings.smtp.user}
+            onChange={(e) => setSettings({ ...settings, smtp: { ...settings.smtp, user: e.target.value } })}
+            className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
+          />
+        </div>
+        <div>
+          <label className="text-sm text-slate-600">Password</label>
+          <input
+            type="password"
+            value={settings.smtp.password}
+            onChange={(e) => setSettings({ ...settings, smtp: { ...settings.smtp, password: e.target.value } })}
+            className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
+          />
+        </div>
+        <div>
+          <label className="text-sm text-slate-600">From Email</label>
+          <input
+            type="email"
+            value={settings.smtp.fromEmail}
+            onChange={(e) => setSettings({ ...settings, smtp: { ...settings.smtp, fromEmail: e.target.value } })}
+            className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
+          />
+        </div>
+        <div>
+          <label className="text-sm text-slate-600">From Name</label>
+          <input
+            type="text"
+            value={settings.smtp.fromName}
+            onChange={(e) => setSettings({ ...settings, smtp: { ...settings.smtp, fromName: e.target.value } })}
+            className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
+          />
+        </div>
+      </div>
+
+      <div>
+        <label className="text-sm text-slate-600">Encryption</label>
+        <div className="flex gap-3 mt-2">
+          {(['ssl', 'tls', 'none'] as const).map(enc => (
+            <button
+              key={enc}
+              onClick={() => setSettings({ ...settings, smtp: { ...settings.smtp, encryption: enc } })}
+              className={`px-4 py-2 text-sm rounded-lg border ${settings.smtp.encryption === enc
+                ? 'bg-accent text-white border-accent'
+                : 'border-slate-200 text-slate-600'
+                }`}
+            >
+              {enc.toUpperCase()}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <h3 className="text-lg font-semibold text-slate-800 pt-4 border-t">SMS Integration</h3>
+
+      <div className="grid lg:grid-cols-2 gap-4">
+        <div>
+          <label className="text-sm text-slate-600">Provider</label>
+          <select
+            value={settings.sms.provider}
+            onChange={(e) => setSettings({ ...settings, sms: { ...settings.sms, provider: e.target.value } })}
+            className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
+          >
+            <option value="BulkSMS">BulkSMS BD</option>
+            <option value="Twilio">Twilio</option>
+            <option value="Msg91">Msg91</option>
+          </select>
+        </div>
+        <div>
+          <label className="text-sm text-slate-600">Sender ID</label>
+          <input
+            type="text"
+            value={settings.sms.senderId}
+            onChange={(e) => setSettings({ ...settings, sms: { ...settings.sms, senderId: e.target.value } })}
+            className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
+          />
+        </div>
+        <div className="lg:col-span-2">
+          <label className="text-sm text-slate-600">API Key</label>
+          <input
+            type="password"
+            value={settings.sms.apiKey}
+            onChange={(e) => setSettings({ ...settings, sms: { ...settings.sms, apiKey: e.target.value } })}
+            className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
+          />
+        </div>
+        <div className="lg:col-span-2">
+          <label className="text-sm text-slate-600">API URL</label>
+          <input
+            type="text"
+            value={settings.sms.url}
+            onChange={(e) => setSettings({ ...settings, sms: { ...settings.sms, url: e.target.value } })}
+            className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}