Initial commit
This commit is contained in:
Monarch055
@@ -0,0 +1,48 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.*
|
||||
.yarn/*
|
||||
!.yarn/patches
|
||||
!.yarn/plugins
|
||||
!.yarn/releases
|
||||
!.yarn/versions
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
.pnpm-debug.log*
|
||||
|
||||
# env files (can opt-in for committing if needed)
|
||||
.env*
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
next-env.d.ts
|
||||
|
||||
# markdown
|
||||
*.md
|
||||
!README.md
|
||||
/Laporan
|
||||
/sistem-km-old
|
||||
*.sql
|
||||
@@ -0,0 +1,36 @@
|
||||
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
|
||||
|
||||
## Getting Started
|
||||
|
||||
First, run the development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
# or
|
||||
pnpm dev
|
||||
# or
|
||||
bun dev
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
|
||||
You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
|
||||
|
||||
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
|
||||
|
||||
## Learn More
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
|
||||
|
||||
## Deploy on Vercel
|
||||
|
||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||
|
||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|
||||
@@ -0,0 +1,16 @@
|
||||
import { defineConfig, globalIgnores } from "eslint/config";
|
||||
import nextVitals from "eslint-config-next/core-web-vitals";
|
||||
|
||||
const eslintConfig = defineConfig([
|
||||
...nextVitals,
|
||||
// Override default ignores of eslint-config-next.
|
||||
globalIgnores([
|
||||
// Default ignores of eslint-config-next:
|
||||
".next/**",
|
||||
"out/**",
|
||||
"build/**",
|
||||
"next-env.d.ts",
|
||||
]),
|
||||
]);
|
||||
|
||||
export default eslintConfig;
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
basePath: '/sistem-km-next',
|
||||
/* config options here */
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
|
||||
Generated
+6097
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"name": "sistem-km-next",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "eslint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@supabase/ssr": "^0.10.3",
|
||||
"@supabase/supabase-js": "^2.106.0",
|
||||
"chart.js": "^4.5.1",
|
||||
"leaflet": "^1.9.4",
|
||||
"leaflet.heat": "^0.2.0",
|
||||
"next": "16.2.6",
|
||||
"react": "19.2.4",
|
||||
"react-chartjs-2": "^5.3.1",
|
||||
"react-dom": "19.2.4",
|
||||
"react-leaflet": "^5.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"eslint": "^9",
|
||||
"eslint-config-next": "16.2.6"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
|
||||
|
After Width: | Height: | Size: 391 B |
@@ -0,0 +1 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 689 KiB |
@@ -0,0 +1 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 128 B |
@@ -0,0 +1 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
|
||||
|
After Width: | Height: | Size: 385 B |
@@ -0,0 +1,104 @@
|
||||
const fs = require('fs');
|
||||
let code = fs.readFileSync('src/components/Dashboard.js', 'utf8');
|
||||
|
||||
const imports = `import SidebarControls from './dashboard/SidebarControls';
|
||||
import StatsPanel from './dashboard/StatsPanel';
|
||||
import ApprovalQueueModal from './dashboard/modals/ApprovalQueueModal';
|
||||
import UserProvisioningModal from './dashboard/modals/UserProvisioningModal';
|
||||
import DonationModal from './dashboard/modals/DonationModal';
|
||||
import HubFormModal from './dashboard/modals/HubFormModal';
|
||||
import HouseholdFormModal from './dashboard/modals/HouseholdFormModal';
|
||||
`;
|
||||
|
||||
code = code.replace("import { useRouter } from 'next/navigation';", "import { useRouter } from 'next/navigation';\n" + imports);
|
||||
|
||||
const leftPanelStart = code.indexOf('{/* Left Panel (Controls) */}');
|
||||
const leftPanelEnd = code.indexOf('{/* Right Panel (Stats) */}');
|
||||
|
||||
if (leftPanelStart > -1 && leftPanelEnd > -1) {
|
||||
const newLeftPanel = `{/* Left Panel (Controls) */}
|
||||
<div className={\`left-panel glass-panel \${showControls ? '' : 'hidden'}\`} id="controlsPanel">
|
||||
<div className="panel-title">
|
||||
<span className="title-text"><i className="fas fa-sliders-h"></i> Controls</span>
|
||||
<button className="btn-toggle-panel" onClick={() => setShowControls(false)} title="Hide Controls">
|
||||
<i className="fas fa-chevron-left"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<SidebarControls
|
||||
user={user} profile={profile} router={router}
|
||||
isEditMode={isEditMode} setIsEditMode={setIsEditMode}
|
||||
setShowApprovalModal={setShowApprovalModal} setShowUserModal={setShowUserModal}
|
||||
fetchUsers={fetchUsers} setPlacementMode={setPlacementMode}
|
||||
setShowToast={setShowToast} filters={filters} setFilters={setFilters}
|
||||
hubStyles={hubStyles}
|
||||
/>
|
||||
</div>
|
||||
|
||||
`;
|
||||
|
||||
code = code.substring(0, leftPanelStart) + newLeftPanel + code.substring(leftPanelEnd);
|
||||
}
|
||||
|
||||
const rightPanelStart = code.indexOf('{/* Right Panel (Stats) */}');
|
||||
const rightPanelEnd = code.indexOf('{/* Add Location Floating Button */}');
|
||||
|
||||
if (rightPanelStart > -1 && rightPanelEnd > -1) {
|
||||
const newRightPanel = `{/* Right Panel (Stats) */}
|
||||
<StatsPanel
|
||||
profile={profile} showStats={showStats}
|
||||
setShowStats={setShowStats} stats={stats}
|
||||
/>
|
||||
|
||||
`;
|
||||
|
||||
code = code.substring(0, rightPanelStart) + newRightPanel + code.substring(rightPanelEnd);
|
||||
}
|
||||
|
||||
const modalStartIndex = code.indexOf('{/* Hub Modal */}');
|
||||
|
||||
if (modalStartIndex > -1) {
|
||||
const newModals = `
|
||||
<HubFormModal
|
||||
showHubModal={showHubModal} setShowHubModal={setShowHubModal}
|
||||
hubFormData={hubFormData} setHubFormData={setHubFormData}
|
||||
handleSaveHub={handleSaveHub} isEditMode={isEditMode}
|
||||
/>
|
||||
|
||||
<HouseholdFormModal
|
||||
showHhModal={showHhModal} setShowHhModal={setShowHhModal}
|
||||
hhFormData={hhFormData} setHhFormData={setHhFormData}
|
||||
handleSaveHh={handleSaveHh} hubs={hubs}
|
||||
imageFile={imageFile} setImageFile={setImageFile}
|
||||
isUploading={isUploading} isEditMode={isEditMode}
|
||||
/>
|
||||
|
||||
<DonationModal
|
||||
showDonationModal={showDonationModal} setShowDonationModal={setShowDonationModal}
|
||||
donationFormData={donationFormData} setDonationFormData={setDonationFormData}
|
||||
hubs={hubs} isSubmittingDonation={isSubmittingDonation}
|
||||
handleSaveDonation={handleSaveDonation} donationsList={donationsList}
|
||||
/>
|
||||
|
||||
<ApprovalQueueModal
|
||||
showApprovalModal={showApprovalModal} setShowApprovalModal={setShowApprovalModal}
|
||||
households={households} selectedPhotoUrl={selectedPhotoUrl}
|
||||
setSelectedPhotoUrl={setSelectedPhotoUrl} handleVerifyAction={handleVerifyAction}
|
||||
/>
|
||||
|
||||
<UserProvisioningModal
|
||||
showUserModal={showUserModal} setShowUserModal={setShowUserModal}
|
||||
usersList={usersList} profile={profile}
|
||||
userFormData={userFormData} setUserFormData={setUserFormData}
|
||||
handleCreateUser={handleCreateUser} isSubmittingUser={isSubmittingUser}
|
||||
handleDeleteUser={handleDeleteUser}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}`;
|
||||
|
||||
code = code.substring(0, modalStartIndex) + newModals;
|
||||
}
|
||||
|
||||
fs.writeFileSync('src/components/Dashboard.js', code);
|
||||
console.log('Dashboard.js successfully refactored');
|
||||
@@ -0,0 +1,169 @@
|
||||
const fs = require('fs');
|
||||
|
||||
let code = fs.readFileSync('src/components/Dashboard.js', 'utf8');
|
||||
|
||||
// 1. ADD MISSING STATE AND FUNCTIONS FOR USER PROVISIONING
|
||||
const stateIndex = code.indexOf('const [isEditMode, setIsEditMode] = useState(false);');
|
||||
if (stateIndex > -1) {
|
||||
const userStates = `
|
||||
const [showUserModal, setShowUserModal] = useState(false);
|
||||
const [usersList, setUsersList] = useState([]);
|
||||
const [userFormData, setUserFormData] = useState({
|
||||
email: '',
|
||||
password: '',
|
||||
full_name: '',
|
||||
role: 'pic'
|
||||
});
|
||||
const [isSubmittingUser, setIsSubmittingUser] = useState(false);
|
||||
|
||||
const fetchUsers = async () => {
|
||||
try {
|
||||
const res = await fetch('/api/users');
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
setUsersList(data.users || []);
|
||||
}
|
||||
} catch (e) { console.error('Error fetching users:', e); }
|
||||
};
|
||||
|
||||
const handleCreateUser = async (e) => {
|
||||
e.preventDefault();
|
||||
setIsSubmittingUser(true);
|
||||
try {
|
||||
const res = await fetch('/api/users', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(userFormData)
|
||||
});
|
||||
if (res.ok) {
|
||||
alert('User created successfully');
|
||||
fetchUsers();
|
||||
setUserFormData({ email: '', password: '', full_name: '', role: 'pic' });
|
||||
setShowUserModal(false);
|
||||
} else {
|
||||
const data = await res.json();
|
||||
alert('Failed to create user: ' + data.error);
|
||||
}
|
||||
} catch (e) { alert('Error: ' + e.message); }
|
||||
setIsSubmittingUser(false);
|
||||
};
|
||||
|
||||
const handleDeleteUser = async (id) => {
|
||||
if (!confirm('Are you sure you want to delete this user?')) return;
|
||||
try {
|
||||
const res = await fetch(\`/api/users?id=\${id}\`, { method: 'DELETE' });
|
||||
if (res.ok) fetchUsers();
|
||||
else alert('Failed to delete user');
|
||||
} catch (e) { alert('Error deleting user'); }
|
||||
};
|
||||
|
||||
`;
|
||||
code = code.substring(0, stateIndex) + userStates + code.substring(stateIndex);
|
||||
}
|
||||
|
||||
// 2. REMOVE isPointInPolygon AND getKecamatanForPoint
|
||||
code = code.replace(/const isPointInPolygon = [\s\S]*?return null;\n};\n/, '');
|
||||
|
||||
// 3. FIX PostGIS USAGES (remove getKecamatanForPoint calls)
|
||||
code = code.replace(/const calculatedKec = getKecamatanForPoint[^;]+;/g, '');
|
||||
code = code.replace(/hh\.sub_district \|\| calculatedKec \|\| subDistrictsList\[idx % subDistrictsList\.length\]/g, "hh.sub_district || 'Belum Terpetakan'");
|
||||
code = code.replace(/hh\.sub_district = calculatedKec \|\| hh\.sub_district \|\| subDistrictsList\[idx % subDistrictsList\.length\];/g, "hh.sub_district = hh.sub_district || 'Belum Terpetakan';");
|
||||
|
||||
// 4. ADD MODULAR IMPORTS
|
||||
const imports = `import SidebarControls from './dashboard/SidebarControls';
|
||||
import StatsPanel from './dashboard/StatsPanel';
|
||||
import ApprovalQueueModal from './dashboard/modals/ApprovalQueueModal';
|
||||
import UserProvisioningModal from './dashboard/modals/UserProvisioningModal';
|
||||
import DonationModal from './dashboard/modals/DonationModal';
|
||||
import HubFormModal from './dashboard/modals/HubFormModal';
|
||||
import HouseholdFormModal from './dashboard/modals/HouseholdFormModal';
|
||||
`;
|
||||
code = code.replace("import { useRouter } from 'next/navigation';", "import { useRouter } from 'next/navigation';\n" + imports);
|
||||
|
||||
// 5. REPLACE LEFT PANEL
|
||||
const leftPanelStart = code.indexOf('{/* Left Panel (Controls) */}');
|
||||
const leftPanelEnd = code.indexOf('{/* Right Panel (Stats) */}');
|
||||
if (leftPanelStart > -1 && leftPanelEnd > -1) {
|
||||
const newLeftPanel = `{/* Left Panel (Controls) */}
|
||||
<div className={\`left-panel glass-panel \${showControls ? '' : 'hidden'}\`} id="controlsPanel">
|
||||
<div className="panel-title">
|
||||
<span className="title-text"><i className="fas fa-sliders-h"></i> Controls</span>
|
||||
<button className="btn-toggle-panel" onClick={() => setShowControls(false)} title="Hide Controls">
|
||||
<i className="fas fa-chevron-left"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<SidebarControls
|
||||
user={user} profile={profile} router={router}
|
||||
isEditMode={isEditMode} setIsEditMode={setIsEditMode}
|
||||
setShowApprovalModal={setShowApprovalModal} setShowUserModal={setShowUserModal}
|
||||
fetchUsers={fetchUsers} setPlacementMode={setPlacementMode}
|
||||
setShowToast={setShowToast} filters={filters} setFilters={setFilters}
|
||||
hubStyles={hubStyles}
|
||||
/>
|
||||
</div>
|
||||
|
||||
`;
|
||||
code = code.substring(0, leftPanelStart) + newLeftPanel + code.substring(leftPanelEnd);
|
||||
}
|
||||
|
||||
// 6. REPLACE RIGHT PANEL
|
||||
const rightPanelStart = code.indexOf('{/* Right Panel (Stats) */}');
|
||||
const rightPanelEnd = code.indexOf('{/* Add Location Floating Button */}');
|
||||
if (rightPanelStart > -1 && rightPanelEnd > -1) {
|
||||
const newRightPanel = `{/* Right Panel (Stats) */}
|
||||
<StatsPanel
|
||||
profile={profile} showStats={showStats}
|
||||
setShowStats={setShowStats} stats={stats}
|
||||
/>
|
||||
|
||||
`;
|
||||
code = code.substring(0, rightPanelStart) + newRightPanel + code.substring(rightPanelEnd);
|
||||
}
|
||||
|
||||
// 7. REPLACE MODALS
|
||||
const modalStartIndex = code.indexOf('{/* Hub Modal */}');
|
||||
if (modalStartIndex > -1) {
|
||||
const newModals = `{/* Hub Modal */}
|
||||
<HubFormModal
|
||||
showHubModal={showHubModal} setShowHubModal={setShowHubModal}
|
||||
hubFormData={hubFormData} setHubFormData={setHubFormData}
|
||||
handleSaveHub={handleSaveHub} isEditMode={isEditMode}
|
||||
/>
|
||||
|
||||
<HouseholdFormModal
|
||||
showHhModal={showHhModal} setShowHhModal={setShowHhModal}
|
||||
hhFormData={hhFormData} setHhFormData={setHhFormData}
|
||||
handleSaveHh={handleSaveHh} hubs={hubs}
|
||||
imageFile={imageFile} setImageFile={setImageFile}
|
||||
isUploading={isUploading} isEditMode={isEditMode}
|
||||
/>
|
||||
|
||||
<DonationModal
|
||||
showDonationModal={showDonationModal} setShowDonationModal={setShowDonationModal}
|
||||
donationFormData={donationFormData} setDonationFormData={setDonationFormData}
|
||||
hubs={hubs} isSubmittingDonation={isSubmittingDonation}
|
||||
handleSaveDonation={handleSaveDonation} donationsList={donationsList}
|
||||
/>
|
||||
|
||||
<ApprovalQueueModal
|
||||
showApprovalModal={showApprovalModal} setShowApprovalModal={setShowApprovalModal}
|
||||
households={households} selectedPhotoUrl={selectedPhotoUrl}
|
||||
setSelectedPhotoUrl={setSelectedPhotoUrl} handleVerifyAction={handleVerifyAction}
|
||||
/>
|
||||
|
||||
<UserProvisioningModal
|
||||
showUserModal={showUserModal} setShowUserModal={setShowUserModal}
|
||||
usersList={usersList} profile={profile}
|
||||
userFormData={userFormData} setUserFormData={setUserFormData}
|
||||
handleCreateUser={handleCreateUser} isSubmittingUser={isSubmittingUser}
|
||||
handleDeleteUser={handleDeleteUser}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}`;
|
||||
code = code.substring(0, modalStartIndex) + newModals;
|
||||
}
|
||||
|
||||
fs.writeFileSync('src/components/Dashboard.js', code);
|
||||
console.log('Dashboard.js completely restored and refactored!');
|
||||
@@ -0,0 +1,75 @@
|
||||
const fs = require('fs');
|
||||
const { createClient } = require('@supabase/supabase-js');
|
||||
|
||||
// Parse .env.local
|
||||
const envFile = fs.readFileSync('.env.local', 'utf8');
|
||||
const envVars = {};
|
||||
envFile.split('\n').forEach(line => {
|
||||
const match = line.match(/^([^=]+)=(.*)$/);
|
||||
if (match) envVars[match[1]] = match[2];
|
||||
});
|
||||
|
||||
async function main() {
|
||||
const supabaseUrl = envVars.NEXT_PUBLIC_SUPABASE_URL;
|
||||
const supabaseKey = envVars.SUPABASE_SERVICE_ROLE_KEY;
|
||||
|
||||
if (!supabaseUrl || !supabaseKey) {
|
||||
console.error('Missing Supabase credentials in .env.local');
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
const supabase = createClient(supabaseUrl, supabaseKey);
|
||||
|
||||
// 1. Upload Sub-districts
|
||||
console.log('Reading GeoJSON...');
|
||||
const geojsonRaw = fs.readFileSync('src/lib/Admin_Kecamatan.json', 'utf8');
|
||||
const geojson = JSON.parse(geojsonRaw);
|
||||
|
||||
for (const feature of geojson.features) {
|
||||
const name = feature.properties?.Ket;
|
||||
if (!name) continue;
|
||||
|
||||
let geom = feature.geometry;
|
||||
if (geom.type === 'Polygon') {
|
||||
geom = {
|
||||
type: 'MultiPolygon',
|
||||
coordinates: [geom.coordinates]
|
||||
};
|
||||
}
|
||||
|
||||
console.log(`Uploading ${name}...`);
|
||||
// Supabase auto-casts GeoJSON objects to PostGIS geometry during insert
|
||||
const { error } = await supabase.from('sub_districts').upsert(
|
||||
{ name: name, geom: geom },
|
||||
{ onConflict: 'name' }
|
||||
);
|
||||
|
||||
if (error) {
|
||||
console.error(`Failed to upload ${name}:`, error.message);
|
||||
} else {
|
||||
console.log(`Success: ${name}`);
|
||||
}
|
||||
}
|
||||
|
||||
// 2. Trigger updates on existing households to populate the sub_district column
|
||||
console.log('Triggering updates on existing households to populate sub_district...');
|
||||
const { data: households, error: fetchErr } = await supabase.from('households').select('id, location');
|
||||
|
||||
if (fetchErr) {
|
||||
console.error('Error fetching households:', fetchErr);
|
||||
} else if (households && households.length > 0) {
|
||||
console.log(`Found ${households.length} households. Updating...`);
|
||||
for (const hh of households) {
|
||||
// Touching the row will fire the trigger
|
||||
const { error: upErr } = await supabase.from('households').update({ location: hh.location }).eq('id', hh.id);
|
||||
if (upErr) console.error(`Error updating HH ${hh.id}:`, upErr.message);
|
||||
}
|
||||
console.log('Completed household updates.');
|
||||
} else {
|
||||
console.log('No households found to update.');
|
||||
}
|
||||
|
||||
console.log('Migration complete.');
|
||||
}
|
||||
|
||||
main();
|
||||
@@ -0,0 +1,67 @@
|
||||
import { createClient } from '@supabase/supabase-js';
|
||||
import { NextResponse } from 'next/server';
|
||||
|
||||
export async function DELETE(request) {
|
||||
try {
|
||||
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
|
||||
const supabaseServiceKey = process.env.SUPABASE_SERVICE_ROLE_KEY;
|
||||
|
||||
if (!supabaseServiceKey) {
|
||||
return NextResponse.json({ error: 'Service role key not configured' }, { status: 500 });
|
||||
}
|
||||
|
||||
const supabaseAdmin = createClient(supabaseUrl, supabaseServiceKey);
|
||||
|
||||
// Get Hub ID
|
||||
const { searchParams } = new URL(request.url);
|
||||
const id = searchParams.get('id');
|
||||
|
||||
if (!id) {
|
||||
return NextResponse.json({ error: 'Missing hub id' }, { status: 400 });
|
||||
}
|
||||
|
||||
// 1. Fetch Hub to identify connected users (pic_id & head_id)
|
||||
const { data: hub, error: fetchErr } = await supabaseAdmin
|
||||
.from('hubs')
|
||||
.select('pic_id, head_id')
|
||||
.eq('id', id)
|
||||
.single();
|
||||
|
||||
if (fetchErr) {
|
||||
console.error(`Failed to fetch hub ${id}:`, fetchErr);
|
||||
return NextResponse.json({ error: 'Hub not found' }, { status: 404 });
|
||||
}
|
||||
|
||||
// 2. Delete connected accounts if they exist
|
||||
if (hub.pic_id) {
|
||||
try {
|
||||
const { error: delPicErr } = await supabaseAdmin.auth.admin.deleteUser(hub.pic_id);
|
||||
if (delPicErr) console.error(`Error deleting PIC user ${hub.pic_id} from Auth:`, delPicErr);
|
||||
} catch (err) {
|
||||
console.error(`Failed to delete PIC user ${hub.pic_id}:`, err);
|
||||
}
|
||||
}
|
||||
|
||||
if (hub.head_id) {
|
||||
try {
|
||||
const { error: delHeadErr } = await supabaseAdmin.auth.admin.deleteUser(hub.head_id);
|
||||
if (delHeadErr) console.error(`Error deleting Head user ${hub.head_id} from Auth:`, delHeadErr);
|
||||
} catch (err) {
|
||||
console.error(`Failed to delete Head user ${hub.head_id}:`, err);
|
||||
}
|
||||
}
|
||||
|
||||
// 3. Delete the Hub (cascades donations, sets household assignments to NULL)
|
||||
const { error: deleteErr } = await supabaseAdmin
|
||||
.from('hubs')
|
||||
.delete()
|
||||
.eq('id', id);
|
||||
|
||||
if (deleteErr) throw deleteErr;
|
||||
|
||||
return NextResponse.json({ success: true });
|
||||
} catch (error) {
|
||||
console.error('Hubs API DELETE Error:', error);
|
||||
return NextResponse.json({ error: error.message }, { status: 500 });
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,151 @@
|
||||
import { createClient } from '@supabase/supabase-js';
|
||||
import { NextResponse } from 'next/server';
|
||||
import kecamatanData from '@/lib/Admin_Kecamatan.json';
|
||||
|
||||
const isPointInPolygon = (point, polygon) => {
|
||||
const x = point[0], y = point[1];
|
||||
let inside = false;
|
||||
for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
|
||||
const xi = polygon[i][0], yi = polygon[i][1];
|
||||
const xj = polygon[j][0], yj = polygon[j][1];
|
||||
const intersect = ((yi > y) !== (yj > y))
|
||||
&& (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
|
||||
if (intersect) inside = !inside;
|
||||
}
|
||||
return inside;
|
||||
};
|
||||
|
||||
const getKecamatanForPoint = (lat, lng) => {
|
||||
if (!kecamatanData || !kecamatanData.features) return null;
|
||||
for (const feature of kecamatanData.features) {
|
||||
const name = feature.properties?.Ket;
|
||||
const geom = feature.geometry;
|
||||
if (!name || !geom) continue;
|
||||
|
||||
if (geom.type === 'Polygon') {
|
||||
if (isPointInPolygon([lng, lat], geom.coordinates[0])) {
|
||||
return name;
|
||||
}
|
||||
} else if (geom.type === 'MultiPolygon') {
|
||||
for (const polygonCoords of geom.coordinates) {
|
||||
if (isPointInPolygon([lng, lat], polygonCoords[0])) {
|
||||
return name;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const parseLocation = (loc) => {
|
||||
if (!loc) return { lat: 0, lng: 0 };
|
||||
if (typeof loc === 'string') {
|
||||
const match = loc.match(/POINT\(([^ ]+) ([^ ]+)\)/);
|
||||
if (match) return { lng: parseFloat(match[1]), lat: parseFloat(match[2]) };
|
||||
} else if (loc.coordinates) {
|
||||
return { lng: loc.coordinates[0], lat: loc.coordinates[1] };
|
||||
}
|
||||
return { lat: 0, lng: 0 };
|
||||
};
|
||||
|
||||
// Calculate distance in meters between two points (Haversine formula approximation equivalent to Leaflet's distance)
|
||||
const distanceTo = (lat1, lon1, lat2, lon2) => {
|
||||
const R = 6371e3; // metres
|
||||
const φ1 = lat1 * Math.PI/180; // φ, λ in radians
|
||||
const φ2 = lat2 * Math.PI/180;
|
||||
const Δφ = (lat2-lat1) * Math.PI/180;
|
||||
const Δλ = (lon2-lon1) * Math.PI/180;
|
||||
|
||||
const a = Math.sin(Δφ/2) * Math.sin(Δφ/2) +
|
||||
Math.cos(φ1) * Math.cos(φ2) *
|
||||
Math.sin(Δλ/2) * Math.sin(Δλ/2);
|
||||
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
|
||||
|
||||
return R * c;
|
||||
};
|
||||
|
||||
export async function GET() {
|
||||
try {
|
||||
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
|
||||
const supabaseServiceKey = process.env.SUPABASE_SERVICE_ROLE_KEY;
|
||||
|
||||
if (!supabaseServiceKey) {
|
||||
return NextResponse.json({ error: 'Service role key not configured' }, { status: 500 });
|
||||
}
|
||||
|
||||
const supabaseAdmin = createClient(supabaseUrl, supabaseServiceKey);
|
||||
|
||||
// Fetch all hubs and households using admin privileges
|
||||
const { data: hubsData, error: hubsErr } = await supabaseAdmin.from('hubs').select('*');
|
||||
const { data: hhData, error: hhErr } = await supabaseAdmin.from('households').select('*');
|
||||
|
||||
if (hubsErr) throw hubsErr;
|
||||
if (hhErr) throw hhErr;
|
||||
|
||||
const parsedHubs = (hubsData || []).map(hub => {
|
||||
const { lat, lng } = parseLocation(hub.location);
|
||||
return { ...hub, lat, lng, radius: hub.radius_meter };
|
||||
});
|
||||
|
||||
let coveredCount = 0;
|
||||
const typeCounts = {};
|
||||
const subDistrictsMap = {};
|
||||
const subDistrictsList = ['Pontianak Barat', 'Pontianak Kota', 'Pontianak Selatan', 'Pontianak Tenggara', 'Pontianak Timur', 'Pontianak Utara'];
|
||||
|
||||
subDistrictsList.forEach(sub => {
|
||||
subDistrictsMap[sub] = { covered: 0, uncovered: 0 };
|
||||
});
|
||||
|
||||
(hhData || []).forEach((hh, idx) => {
|
||||
const { lat, lng } = parseLocation(hh.location);
|
||||
|
||||
let closestHub = null;
|
||||
let minDistance = Infinity;
|
||||
|
||||
parsedHubs.forEach(hub => {
|
||||
const dist = distanceTo(lat, lng, hub.lat, hub.lng);
|
||||
const hubRadius = parseInt(hub.radius) || 500;
|
||||
if (dist <= hubRadius && dist < minDistance) {
|
||||
minDistance = dist;
|
||||
closestHub = hub;
|
||||
}
|
||||
});
|
||||
|
||||
const covered = !!closestHub;
|
||||
if (covered) {
|
||||
coveredCount++;
|
||||
const type = closestHub.type;
|
||||
typeCounts[type] = (typeCounts[type] || 0) + 1;
|
||||
}
|
||||
|
||||
// Sub-district logic (now provided by PostGIS database trigger with dynamic backend JS fallback!)
|
||||
let sub = hh.sub_district;
|
||||
if (!sub || sub === 'Belum Terpetakan') {
|
||||
const coords = parseLocation(hh.location);
|
||||
sub = getKecamatanForPoint(coords.lat, coords.lng) || 'Belum Terpetakan';
|
||||
}
|
||||
|
||||
if (!subDistrictsMap[sub]) subDistrictsMap[sub] = { covered: 0, uncovered: 0 };
|
||||
|
||||
if (covered) subDistrictsMap[sub].covered++;
|
||||
else subDistrictsMap[sub].uncovered++;
|
||||
});
|
||||
|
||||
const total = hhData ? hhData.length : 0;
|
||||
const uncoveredCount = total - coveredCount;
|
||||
const equalityIndex = total > 0 ? Math.round((coveredCount / total) * 100) : 0;
|
||||
|
||||
return NextResponse.json({
|
||||
hubsCount: parsedHubs.length,
|
||||
coveredCount,
|
||||
uncoveredCount,
|
||||
equalityIndex,
|
||||
subDistrictsMap,
|
||||
typeCounts
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('Stats API Error:', error);
|
||||
return NextResponse.json({ error: error.message }, { status: 500 });
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,143 @@
|
||||
import { createClient } from '@supabase/supabase-js';
|
||||
import { NextResponse } from 'next/server';
|
||||
|
||||
export async function GET() {
|
||||
try {
|
||||
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
|
||||
const supabaseServiceKey = process.env.SUPABASE_SERVICE_ROLE_KEY;
|
||||
|
||||
if (!supabaseServiceKey) {
|
||||
return NextResponse.json({ error: 'Service role key not configured' }, { status: 500 });
|
||||
}
|
||||
|
||||
const supabaseAdmin = createClient(supabaseUrl, supabaseServiceKey);
|
||||
|
||||
// Fetch auth users
|
||||
const { data: authData, error: authErr } = await supabaseAdmin.auth.admin.listUsers();
|
||||
if (authErr) throw authErr;
|
||||
|
||||
// Fetch profiles
|
||||
const { data: profilesData, error: profErr } = await supabaseAdmin.from('profiles').select('*');
|
||||
if (profErr) throw profErr;
|
||||
|
||||
// Merge them
|
||||
const users = (authData.users || []).map(authUser => {
|
||||
const profile = profilesData.find(p => p.id === authUser.id) || {};
|
||||
return {
|
||||
id: authUser.id,
|
||||
email: authUser.email,
|
||||
full_name: profile.full_name || 'N/A',
|
||||
role: profile.role || 'public',
|
||||
password_changed: profile.password_changed,
|
||||
created_at: authUser.created_at
|
||||
};
|
||||
});
|
||||
|
||||
return NextResponse.json({ users });
|
||||
} catch (error) {
|
||||
console.error('Users API GET Error:', error);
|
||||
return NextResponse.json({ error: error.message }, { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
export async function POST(request) {
|
||||
try {
|
||||
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
|
||||
const supabaseServiceKey = process.env.SUPABASE_SERVICE_ROLE_KEY;
|
||||
|
||||
if (!supabaseServiceKey) {
|
||||
return NextResponse.json({ error: 'Service role key not configured' }, { status: 500 });
|
||||
}
|
||||
|
||||
const supabaseAdmin = createClient(supabaseUrl, supabaseServiceKey);
|
||||
const body = await request.json();
|
||||
const { email, password, full_name, role, hub_id } = body;
|
||||
|
||||
if (!email || !password || !full_name || !role) {
|
||||
return NextResponse.json({ error: 'Missing required fields' }, { status: 400 });
|
||||
}
|
||||
|
||||
// 1. Create user in Auth
|
||||
const { data: authData, error: authErr } = await supabaseAdmin.auth.admin.createUser({
|
||||
email,
|
||||
password,
|
||||
email_confirm: true, // Auto-confirm email
|
||||
});
|
||||
|
||||
if (authErr) throw authErr;
|
||||
|
||||
const newUserId = authData.user.id;
|
||||
|
||||
// 2. Insert into profiles (bypassing RLS with service role)
|
||||
const { error: profErr } = await supabaseAdmin.from('profiles').insert([{
|
||||
id: newUserId,
|
||||
full_name,
|
||||
role,
|
||||
password_changed: false // Force change password on first login
|
||||
}]);
|
||||
|
||||
// If profile insert fails, we rollback the auth user creation
|
||||
if (profErr) {
|
||||
await supabaseAdmin.auth.admin.deleteUser(newUserId);
|
||||
throw profErr;
|
||||
}
|
||||
|
||||
// 3. Assign user to worship hub (if role is pic or hub_head and hub_id is provided)
|
||||
if (hub_id && (role === 'pic' || role === 'hub_head')) {
|
||||
const updateData = {};
|
||||
if (role === 'pic') {
|
||||
updateData.pic_id = newUserId;
|
||||
} else if (role === 'hub_head') {
|
||||
updateData.head_id = newUserId;
|
||||
}
|
||||
|
||||
const { error: hubErr } = await supabaseAdmin
|
||||
.from('hubs')
|
||||
.update(updateData)
|
||||
.eq('id', hub_id);
|
||||
|
||||
if (hubErr) {
|
||||
// Rollback profile and auth user
|
||||
await supabaseAdmin.from('profiles').delete().eq('id', newUserId);
|
||||
await supabaseAdmin.auth.admin.deleteUser(newUserId);
|
||||
throw hubErr;
|
||||
}
|
||||
}
|
||||
|
||||
return NextResponse.json({ success: true, user: authData.user });
|
||||
} catch (error) {
|
||||
console.error('Users API POST Error:', error);
|
||||
return NextResponse.json({ error: error.message }, { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
export async function DELETE(request) {
|
||||
try {
|
||||
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
|
||||
const supabaseServiceKey = process.env.SUPABASE_SERVICE_ROLE_KEY;
|
||||
|
||||
if (!supabaseServiceKey) {
|
||||
return NextResponse.json({ error: 'Service role key not configured' }, { status: 500 });
|
||||
}
|
||||
|
||||
const supabaseAdmin = createClient(supabaseUrl, supabaseServiceKey);
|
||||
|
||||
// Using searchParams to get ID
|
||||
const { searchParams } = new URL(request.url);
|
||||
const id = searchParams.get('id');
|
||||
|
||||
if (!id) {
|
||||
return NextResponse.json({ error: 'Missing user id' }, { status: 400 });
|
||||
}
|
||||
|
||||
// Delete from auth.users (Cascades to profiles table via foreign key)
|
||||
const { error } = await supabaseAdmin.auth.admin.deleteUser(id);
|
||||
|
||||
if (error) throw error;
|
||||
|
||||
return NextResponse.json({ success: true });
|
||||
} catch (error) {
|
||||
console.error('Users API DELETE Error:', error);
|
||||
return NextResponse.json({ error: error.message }, { status: 500 });
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,139 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { supabase } from '@/lib/supabase';
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
export default function ChangePassword() {
|
||||
const [password, setPassword] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
const [user, setUser] = useState(null);
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
supabase.auth.getUser().then(({ data }) => {
|
||||
if (!data?.user) router.push('/login');
|
||||
else setUser(data.user);
|
||||
});
|
||||
}, [router]);
|
||||
|
||||
const handleUpdate = async (e) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const { error: authError } = await supabase.auth.updateUser({ password });
|
||||
|
||||
if (authError) {
|
||||
setError(authError.message);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const { error: profileError } = await supabase
|
||||
.from('profiles')
|
||||
.update({ password_changed: true })
|
||||
.eq('id', user.id);
|
||||
|
||||
if (profileError) {
|
||||
setError(profileError.message);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
router.push('/');
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
minHeight: '100vh',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
background: '#f8fafc',
|
||||
fontFamily: '"Inter", sans-serif'
|
||||
}}>
|
||||
<div style={{
|
||||
background: 'white',
|
||||
padding: '40px',
|
||||
borderRadius: '24px',
|
||||
boxShadow: '0 8px 32px rgba(0, 0, 0, 0.05)',
|
||||
width: '100%',
|
||||
maxWidth: '400px',
|
||||
textAlign: 'center',
|
||||
border: '1px solid #e2e8f0'
|
||||
}}>
|
||||
<h2 style={{ margin: '0 0 8px 0', color: '#1e293b', fontSize: '1.5rem' }}>Rotasi Keamanan</h2>
|
||||
<p style={{ margin: '0 0 24px 0', color: '#ef4444', fontSize: '0.85rem', fontWeight: '500', background: '#fee2e2', padding: '10px', borderRadius: '8px' }}>
|
||||
<i className="fas fa-lock"></i> Untuk alasan keamanan, Anda wajib mengubah kata sandi default sebelum melanjutkan.
|
||||
</p>
|
||||
|
||||
{error && (
|
||||
<div style={{ background: '#fee2e2', color: '#ef4444', padding: '10px', borderRadius: '8px', marginBottom: '16px', fontSize: '0.85rem' }}>
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleUpdate} style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
|
||||
<div style={{ textAlign: 'left' }}>
|
||||
<label style={{ display: 'block', fontSize: '0.85rem', color: '#475569', marginBottom: '6px', fontWeight: '500' }}>Kata Sandi Baru</label>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<input
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
minLength={6}
|
||||
style={{
|
||||
width: '100%', padding: '12px 44px 12px 16px', borderRadius: '12px',
|
||||
border: '1px solid #cbd5e1', background: 'white',
|
||||
outline: 'none', transition: 'border-color 0.2s', color: 'black',
|
||||
boxShadow: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.05)'
|
||||
}}
|
||||
required
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: '14px',
|
||||
top: '50%',
|
||||
transform: 'translateY(-50%)',
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
color: '#94a3b8',
|
||||
cursor: 'pointer',
|
||||
padding: '4px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '1rem',
|
||||
outline: 'none'
|
||||
}}
|
||||
title={showPassword ? 'Sembunyikan Kata Sandi' : 'Tampilkan Kata Sandi'}
|
||||
>
|
||||
<i className={showPassword ? 'fas fa-eye-slash' : 'fas fa-eye'}></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
style={{
|
||||
width: '100%', padding: '14px', borderRadius: '12px',
|
||||
background: '#10b981', color: 'white',
|
||||
border: 'none', fontWeight: '600', fontSize: '1rem',
|
||||
cursor: loading ? 'not-allowed' : 'pointer',
|
||||
marginTop: '8px', transition: 'background 0.2s',
|
||||
opacity: loading ? 0.7 : 1
|
||||
}}
|
||||
>
|
||||
{loading ? 'Menyimpan...' : 'Simpan & Lanjutkan'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
@@ -0,0 +1,784 @@
|
||||
:root {
|
||||
--primary: #3b82f6;
|
||||
--primary-hover: #2563eb;
|
||||
--success: #10b981;
|
||||
--danger: #ef4444;
|
||||
--dark: #0f172a;
|
||||
--panel-bg: rgba(255, 255, 255, 0.85); /* Slightly less transparent for readability */
|
||||
--panel-border: rgba(255, 255, 255, 0.5);
|
||||
--text-main: #1e293b;
|
||||
--text-muted: #64748b;
|
||||
--shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
--glow: 0 0 40px rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Outfit', sans-serif;
|
||||
}
|
||||
|
||||
body, html {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background-color: #f0f0f0; /* Light background behind map */
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
#map {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Glassmorphism Panels */
|
||||
.glass-panel {
|
||||
background: var(--panel-bg);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--panel-border);
|
||||
border-radius: 16px;
|
||||
box-shadow: var(--shadow);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
/* Top Header */
|
||||
.top-bar {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 96%;
|
||||
height: 64px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 24px;
|
||||
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
|
||||
}
|
||||
|
||||
.top-bar.hidden {
|
||||
transform: translate(-50%, -150%);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.top-bar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.logo i {
|
||||
color: var(--primary);
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
border-radius: 32px;
|
||||
padding: 10px 24px;
|
||||
width: 40%;
|
||||
max-width: 500px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.search-container:focus-within {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
.search-container input {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-main);
|
||||
outline: none;
|
||||
width: 100%;
|
||||
margin-left: 12px;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.search-container input::placeholder {
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
background: linear-gradient(135deg, var(--primary), #6366f1);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 24px;
|
||||
border-radius: 32px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
|
||||
}
|
||||
|
||||
.login-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(59, 130, 246, 0.6);
|
||||
}
|
||||
|
||||
/* Left Panel */
|
||||
.left-panel {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 2%;
|
||||
width: 300px;
|
||||
padding: 24px;
|
||||
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
|
||||
transform-origin: left center;
|
||||
}
|
||||
|
||||
.left-panel.hidden {
|
||||
transform: translateX(-120%);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
color: var(--text-main);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.panel-title .title-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* Dropdown & Buttons */
|
||||
.btn-group {
|
||||
position: relative;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: rgba(59, 130, 246, 0.2);
|
||||
color: #60a5fa;
|
||||
border: 1px solid rgba(59, 130, 246, 0.4);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
.submenu {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: calc(100% + 10px); /* Show on the right instead of covering the edit mode toggle */
|
||||
width: 220px;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--panel-border);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
z-index: 1001;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.submenu.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.submenu button {
|
||||
padding: 12px 16px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-main);
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.submenu button:hover {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* Toggle Switch */
|
||||
.toggle-group {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
padding: 16px;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.toggle-group label {
|
||||
font-weight: 500;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 46px;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
transition: .4s;
|
||||
border-radius: 26px;
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
left: 3px;
|
||||
bottom: 3px;
|
||||
background-color: white;
|
||||
transition: .4s;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
input:checked + .slider {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
/* Checkboxes */
|
||||
.filter-group h4 {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.checkbox-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
cursor: pointer;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.checkbox-item input {
|
||||
appearance: none;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 2px solid rgba(0, 0, 0, 0.3);
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.checkbox-item input:checked {
|
||||
background: var(--primary);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.checkbox-item input:checked::after {
|
||||
content: '\f00c';
|
||||
font-family: 'Font Awesome 6 Free';
|
||||
font-weight: 900;
|
||||
font-size: 10px;
|
||||
color: white;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
/* Right Panel */
|
||||
.right-panel {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
right: 2%;
|
||||
width: 380px;
|
||||
padding: 24px;
|
||||
max-height: calc(100vh - 120px);
|
||||
overflow-y: auto;
|
||||
transition: transform 0.3s ease, opacity 0.3s ease;
|
||||
transform-origin: right center;
|
||||
}
|
||||
|
||||
.right-panel.hidden {
|
||||
transform: translateX(120%);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.right-panel::-webkit-scrollbar { width: 4px; }
|
||||
.right-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 4px; }
|
||||
|
||||
.btn-toggle-panel {
|
||||
background: rgba(0,0,0,0.05);
|
||||
border: none;
|
||||
color: var(--text-main);
|
||||
border-radius: 8px;
|
||||
padding: 4px 8px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.btn-toggle-panel:hover {
|
||||
background: rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.show-panel-btn {
|
||||
position: absolute;
|
||||
padding: 10px 18px;
|
||||
background: var(--panel-bg);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--panel-border);
|
||||
color: var(--text-main);
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
box-shadow: var(--shadow);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.show-panel-btn:hover {
|
||||
background: rgba(241, 245, 249, 0.95);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.show-panel-btn.hidden {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#showTopBarBtn { top: 20px; left: 50%; transform: translateX(-50%); }
|
||||
#showTopBarBtn:hover { transform: translateX(-50%) translateY(-2px); }
|
||||
#showControlsBtn { top: 100px; left: 2%; }
|
||||
#showStatsBtn { top: 100px; right: 2%; }
|
||||
#showLegendBtn { bottom: 30px; left: 2%; }
|
||||
|
||||
.kpi-container {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.kpi-box {
|
||||
flex: 1;
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
padding: 16px 12px;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.kpi-value {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.kpi-label {
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.text-success { color: var(--success); }
|
||||
.text-danger { color: var(--danger); }
|
||||
.text-primary { color: #60a5fa; }
|
||||
|
||||
.chart-box {
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.chart-box h4 {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Gauge */
|
||||
.gauge-container {
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.gauge {
|
||||
width: 160px;
|
||||
height: 80px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-top-left-radius: 160px;
|
||||
border-top-right-radius: 160px;
|
||||
}
|
||||
|
||||
.gauge-fill {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to right, var(--danger), var(--warning), var(--success));
|
||||
transform-origin: center top;
|
||||
transform: rotate(0turn);
|
||||
transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.gauge-cover {
|
||||
width: 130px;
|
||||
height: 65px;
|
||||
background: white;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 15px;
|
||||
border-top-left-radius: 130px;
|
||||
border-top-right-radius: 130px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
padding-bottom: 10px;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Legend */
|
||||
.legend {
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
left: 2%;
|
||||
padding: 16px;
|
||||
font-size: 0.85rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
z-index: 1000;
|
||||
width: 230px;
|
||||
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
|
||||
transform-origin: left bottom;
|
||||
}
|
||||
.legend.hidden {
|
||||
transform: translateX(-120%);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.legend-color {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.hub-legend-icon {
|
||||
width: 22px; height: 22px;
|
||||
border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 11px; color: white; border: 1px solid rgba(255,255,255,0.8);
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
/* Custom Map Icons & Popups */
|
||||
.leaflet-popup-content-wrapper {
|
||||
background: var(--panel-bg);
|
||||
backdrop-filter: blur(12px);
|
||||
color: var(--text-main);
|
||||
border: 1px solid var(--panel-border);
|
||||
border-radius: 12px;
|
||||
}
|
||||
.leaflet-popup-tip {
|
||||
background: var(--panel-bg);
|
||||
}
|
||||
.leaflet-popup-content h3 {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 1.1rem;
|
||||
border-bottom: 1px solid rgba(0,0,0,0.1);
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
.leaflet-popup-content p {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.popup-slider-container {
|
||||
margin-top: 12px;
|
||||
background: rgba(0,0,0,0.05);
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.popup-slider-container label {
|
||||
display: block;
|
||||
font-size: 0.8rem;
|
||||
margin-bottom: 6px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.popup-slider-container input[type=range] {
|
||||
width: 100%;
|
||||
accent-color: var(--primary);
|
||||
}
|
||||
.popup-slider-container input[type=range]:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.citizen-modal {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
.citizen-photo {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: rgba(0,0,0,0.05);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: rgba(0,0,0,0.3);
|
||||
font-size: 2rem;
|
||||
object-fit: cover;
|
||||
}
|
||||
.citizen-details {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Modal Overlay */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(4px);
|
||||
z-index: 2000;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
.modal-overlay.active {
|
||||
display: flex;
|
||||
opacity: 1;
|
||||
}
|
||||
.modal-content {
|
||||
background: var(--panel-bg);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid var(--panel-border);
|
||||
border-radius: 16px;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 20px 40px rgba(0,0,0,0.5);
|
||||
transform: translateY(20px);
|
||||
transition: transform 0.3s ease;
|
||||
color: var(--text-main);
|
||||
}
|
||||
.modal-overlay.active .modal-content {
|
||||
transform: translateY(0);
|
||||
}
|
||||
.modal-header {
|
||||
display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;
|
||||
}
|
||||
.close-btn {
|
||||
background: none; border: none; font-size: 1.5rem; color: var(--text-muted); cursor: pointer;
|
||||
}
|
||||
.form-group { margin-bottom: 16px; }
|
||||
.form-group label { display: block; font-size: 0.85rem; margin-bottom: 6px; color: var(--text-muted); }
|
||||
.form-control {
|
||||
width: 100%; padding: 10px 12px; background: rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.1);
|
||||
border-radius: 8px; color: var(--text-main); font-size: 0.95rem;
|
||||
}
|
||||
.form-control:focus { outline: none; border-color: var(--primary); }
|
||||
.modal-actions { display: flex; gap: 12px; margin-top: 24px; }
|
||||
.modal-actions .btn { flex: 1; }
|
||||
|
||||
.btn-success { background: rgba(16, 185, 129, 0.2); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.4); }
|
||||
.btn-success:hover { background: rgba(16, 185, 129, 0.3); }
|
||||
|
||||
.placement-toast {
|
||||
position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%);
|
||||
padding: 12px 24px; border-radius: 30px; font-weight: 500;
|
||||
z-index: 1500; display: none; align-items: center; gap: 10px;
|
||||
}
|
||||
.placement-toast button {
|
||||
background: rgba(0,0,0,0.1); border: none; color: var(--text-main); padding: 6px 12px;
|
||||
border-radius: 12px; cursor: pointer; font-size: 0.8rem;
|
||||
}
|
||||
|
||||
/* Login Specific Styles */
|
||||
.map-glow-overlay {
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: radial-gradient(circle at center, rgba(255, 255, 255, 0.25) 0%, rgba(248, 250, 252, 0.85) 100%);
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 1000;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
padding: 40px;
|
||||
background: var(--panel-bg);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid var(--panel-border);
|
||||
border-radius: 24px;
|
||||
box-shadow: var(--shadow), var(--glow);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
animation: fadeIn 0.8s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translate(-50%, -40%); }
|
||||
to { opacity: 1; transform: translate(-50%, -50%); }
|
||||
}
|
||||
|
||||
.btn-login {
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
background: linear-gradient(135deg, var(--primary), #6366f1);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.btn-login:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(59, 130, 246, 0.6);
|
||||
}
|
||||
|
||||
.back-link {
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.back-link a {
|
||||
color: var(--text-muted);
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.back-link a:hover {
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
@keyframes slideInRight {
|
||||
from { transform: translateX(120%); opacity: 0; }
|
||||
to { transform: translateX(0); opacity: 1; }
|
||||
}
|
||||
@keyframes fadeInScale {
|
||||
from { transform: scale(0.95); opacity: 0; }
|
||||
to { transform: scale(1); opacity: 1; }
|
||||
}
|
||||
|
||||
/* Suppress native password reveal/clear buttons in IE/Edge to prevent double eye icon stacking */
|
||||
input::-ms-reveal,
|
||||
input::-ms-clear {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@keyframes pulse-border {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.8), 0 4px 10px rgba(0,0,0,0.4);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 8px rgba(239, 68, 68, 0), 0 4px 10px rgba(0,0,0,0.4);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(239, 68, 68, 0), 0 4px 10px rgba(0,0,0,0.4);
|
||||
}
|
||||
}
|
||||
.pulse-border {
|
||||
animation: pulse-border 1.8s infinite !important;
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import { Outfit } from "next/font/google";
|
||||
import "leaflet/dist/leaflet.css";
|
||||
import "./globals.css";
|
||||
|
||||
const outfit = Outfit({
|
||||
subsets: ["latin"],
|
||||
weight: ["300", "400", "500", "600", "700"],
|
||||
});
|
||||
|
||||
export const metadata = {
|
||||
title: "Sinergi Umat - Community Aid Distribution & Mapping System",
|
||||
description: "A spatial assignment application to map and manage distribution of community aid to underprivileged households.",
|
||||
};
|
||||
|
||||
export default function RootLayout({ children }) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
|
||||
</head>
|
||||
<body className={outfit.className}>
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,281 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { supabase } from '@/lib/supabase';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import 'leaflet/dist/leaflet.css';
|
||||
|
||||
export default function Login() {
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const router = useRouter();
|
||||
const mapRef = useRef(null);
|
||||
const mapInstanceRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
let active = true;
|
||||
|
||||
// Dynamically load Leaflet for the background map
|
||||
import('leaflet').then((L) => {
|
||||
if (!active) return;
|
||||
|
||||
if (!mapInstanceRef.current && mapRef.current) {
|
||||
// Initialize map centered on Pontianak
|
||||
const map = L.map(mapRef.current, {
|
||||
center: [-0.0227, 109.3340],
|
||||
zoom: 13,
|
||||
zoomControl: false,
|
||||
dragging: false,
|
||||
scrollWheelZoom: false,
|
||||
doubleClickZoom: false,
|
||||
boxZoom: false,
|
||||
keyboard: false,
|
||||
attributionControl: false
|
||||
});
|
||||
|
||||
// Use CartoDB Positron for a clean, light background
|
||||
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
|
||||
maxZoom: 19,
|
||||
subdomains: 'abcd'
|
||||
}).addTo(map);
|
||||
|
||||
mapInstanceRef.current = map;
|
||||
|
||||
// Force resize recalculation to ensure tiles render immediately
|
||||
setTimeout(() => {
|
||||
if (active && mapInstanceRef.current) {
|
||||
mapInstanceRef.current.invalidateSize();
|
||||
}
|
||||
}, 150);
|
||||
}
|
||||
});
|
||||
|
||||
return () => {
|
||||
active = false;
|
||||
if (mapInstanceRef.current) {
|
||||
mapInstanceRef.current.remove();
|
||||
mapInstanceRef.current = null;
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleLogin = async (e) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const { data, error: authError } = await supabase.auth.signInWithPassword({
|
||||
email,
|
||||
password,
|
||||
});
|
||||
|
||||
if (authError) {
|
||||
setError(authError.message);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if they need password rotation
|
||||
const { data: profile } = await supabase
|
||||
.from('profiles')
|
||||
.select('password_changed')
|
||||
.eq('id', data.user.id)
|
||||
.single();
|
||||
|
||||
if (profile && profile.password_changed === false) {
|
||||
router.push('/change-password');
|
||||
} else {
|
||||
router.push('/');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
position: 'relative',
|
||||
minHeight: '100vh',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontFamily: '"Inter", sans-serif',
|
||||
overflow: 'hidden'
|
||||
}}>
|
||||
{/* Return to Dashboard Button */}
|
||||
<button
|
||||
onClick={() => router.push('/')}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '24px',
|
||||
left: '24px',
|
||||
zIndex: 10,
|
||||
background: 'rgba(255, 255, 255, 0.85)',
|
||||
backdropFilter: 'blur(8px)',
|
||||
WebkitBackdropFilter: 'blur(8px)',
|
||||
border: '1px solid rgba(255, 255, 255, 0.6)',
|
||||
borderRadius: '14px',
|
||||
padding: '10px 18px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
color: '#1e293b',
|
||||
fontWeight: '600',
|
||||
fontSize: '0.9rem',
|
||||
cursor: 'pointer',
|
||||
boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.15)',
|
||||
transition: 'all 0.2s',
|
||||
outline: 'none'
|
||||
}}
|
||||
onMouseOver={(e) => {
|
||||
e.currentTarget.style.transform = 'translateY(-2px)';
|
||||
e.currentTarget.style.background = 'rgba(255, 255, 255, 0.95)';
|
||||
}}
|
||||
onMouseOut={(e) => {
|
||||
e.currentTarget.style.transform = 'translateY(0)';
|
||||
e.currentTarget.style.background = 'rgba(255, 255, 255, 0.85)';
|
||||
}}
|
||||
>
|
||||
<i className="fas fa-arrow-left" style={{ color: 'var(--primary, #3b82f6)' }}></i>
|
||||
<span>Kembali ke Dasbor</span>
|
||||
</button>
|
||||
|
||||
{/* Dynamic Leaflet Background */}
|
||||
<div
|
||||
ref={mapRef}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0, left: 0, right: 0, bottom: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
zIndex: 1,
|
||||
filter: 'brightness(0.95)'
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Glassmorphism Dark/Blur Overlay */}
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
top: 0, left: 0, right: 0, bottom: 0,
|
||||
zIndex: 2,
|
||||
background: 'rgba(15, 23, 42, 0.45)', // Slightly reduced opacity for a clearer view of the map
|
||||
backdropFilter: 'blur(4px)', // Reduced from 10px
|
||||
WebkitBackdropFilter: 'blur(4px)'
|
||||
}} />
|
||||
|
||||
{/* Login Card */}
|
||||
<div style={{
|
||||
background: 'rgba(255, 255, 255, 0.85)',
|
||||
backdropFilter: 'blur(8px)', // Reduced from 20px
|
||||
WebkitBackdropFilter: 'blur(8px)',
|
||||
padding: '40px',
|
||||
borderRadius: '24px',
|
||||
boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.5)',
|
||||
width: '100%',
|
||||
maxWidth: '400px',
|
||||
textAlign: 'center',
|
||||
border: '1px solid rgba(255, 255, 255, 0.6)',
|
||||
zIndex: 10
|
||||
}}>
|
||||
<div style={{
|
||||
background: 'var(--primary, #3b82f6)',
|
||||
width: '60px', height: '60px',
|
||||
borderRadius: '50%',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
color: 'white', fontSize: '24px',
|
||||
margin: '0 auto 20px auto',
|
||||
boxShadow: '0 10px 15px -3px rgba(59, 130, 246, 0.5)'
|
||||
}}>
|
||||
<i className="fas fa-hands-holding-circle"></i>
|
||||
</div>
|
||||
<h2 style={{ margin: '0 0 8px 0', color: '#1e293b', fontSize: '1.8rem', fontWeight: '800' }}>Sinergi Umat</h2>
|
||||
<p style={{ margin: '0 0 24px 0', color: '#64748b', fontSize: '0.95rem' }}>Portal Manajemen Bantuan & Geotagging</p>
|
||||
|
||||
{error && (
|
||||
<div style={{ background: '#fee2e2', color: '#ef4444', padding: '10px', borderRadius: '8px', marginBottom: '16px', fontSize: '0.85rem', fontWeight: '500' }}>
|
||||
<i className="fas fa-exclamation-circle" style={{ marginRight: '5px' }}></i> {error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleLogin} style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
|
||||
<div style={{ textAlign: 'left' }}>
|
||||
<label style={{ display: 'block', fontSize: '0.85rem', color: '#475569', marginBottom: '6px', fontWeight: '600' }}>Email</label>
|
||||
<input
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
style={{
|
||||
width: '100%', padding: '12px 16px', borderRadius: '12px',
|
||||
border: '1px solid #cbd5e1', background: 'white',
|
||||
outline: 'none', transition: 'all 0.2s', color: '#1e293b',
|
||||
boxShadow: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.05)'
|
||||
}}
|
||||
onFocus={(e) => e.target.style.borderColor = 'var(--primary, #3b82f6)'}
|
||||
onBlur={(e) => e.target.style.borderColor = '#cbd5e1'}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div style={{ textAlign: 'left' }}>
|
||||
<label style={{ display: 'block', fontSize: '0.85rem', color: '#475569', marginBottom: '6px', fontWeight: '600' }}>Kata Sandi</label>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<input
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
style={{
|
||||
width: '100%', padding: '12px 44px 12px 16px', borderRadius: '12px',
|
||||
border: '1px solid #cbd5e1', background: 'white',
|
||||
outline: 'none', transition: 'all 0.2s', color: '#1e293b',
|
||||
boxShadow: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.05)'
|
||||
}}
|
||||
onFocus={(e) => e.target.style.borderColor = 'var(--primary, #3b82f6)'}
|
||||
onBlur={(e) => e.target.style.borderColor = '#cbd5e1'}
|
||||
required
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: '14px',
|
||||
top: '50%',
|
||||
transform: 'translateY(-50%)',
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
color: '#94a3b8',
|
||||
cursor: 'pointer',
|
||||
padding: '4px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '1rem',
|
||||
outline: 'none'
|
||||
}}
|
||||
title={showPassword ? 'Sembunyikan Kata Sandi' : 'Tampilkan Kata Sandi'}
|
||||
>
|
||||
<i className={showPassword ? 'fas fa-eye-slash' : 'fas fa-eye'}></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
style={{
|
||||
width: '100%', padding: '14px', borderRadius: '12px',
|
||||
background: 'var(--primary, #3b82f6)', color: 'white',
|
||||
border: 'none', fontWeight: '600', fontSize: '1rem',
|
||||
cursor: loading ? 'not-allowed' : 'pointer',
|
||||
marginTop: '8px', transition: 'all 0.2s',
|
||||
opacity: loading ? 0.8 : 1,
|
||||
boxShadow: loading ? 'none' : '0 4px 6px -1px rgba(59, 130, 246, 0.5)'
|
||||
}}
|
||||
onMouseOver={(e) => { if(!loading) e.target.style.transform = 'translateY(-2px)' }}
|
||||
onMouseOut={(e) => { if(!loading) e.target.style.transform = 'translateY(0)' }}
|
||||
>
|
||||
{loading ? <><i className="fas fa-spinner fa-spin"></i> Memverifikasi...</> : 'Masuk ke Dasbor'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
'use client';
|
||||
|
||||
import dynamic from 'next/dynamic';
|
||||
|
||||
// Load Leaflet map on client-side ONLY to bypass window-not-defined Node errors
|
||||
const Dashboard = dynamic(() => import('@/components/Dashboard'), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main style={{ width: '100vw', height: '100vh', overflow: 'hidden', position: 'relative' }}>
|
||||
<Dashboard />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,142 @@
|
||||
.page {
|
||||
--background: #fafafa;
|
||||
--foreground: #fff;
|
||||
|
||||
--text-primary: #000;
|
||||
--text-secondary: #666;
|
||||
|
||||
--button-primary-hover: #383838;
|
||||
--button-secondary-hover: #f2f2f2;
|
||||
--button-secondary-border: #ebebeb;
|
||||
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: var(--font-geist-sans);
|
||||
background-color: var(--background);
|
||||
}
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
background-color: var(--foreground);
|
||||
padding: 120px 60px;
|
||||
}
|
||||
|
||||
.intro {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
text-align: left;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.intro h1 {
|
||||
max-width: 320px;
|
||||
font-size: 40px;
|
||||
font-weight: 600;
|
||||
line-height: 48px;
|
||||
letter-spacing: -2.4px;
|
||||
text-wrap: balance;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.intro p {
|
||||
max-width: 440px;
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
text-wrap: balance;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.intro a {
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.ctas {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
max-width: 440px;
|
||||
gap: 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.ctas a {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
border-radius: 128px;
|
||||
border: 1px solid transparent;
|
||||
transition: 0.2s;
|
||||
cursor: pointer;
|
||||
width: fit-content;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
a.primary {
|
||||
background: var(--text-primary);
|
||||
color: var(--background);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
a.secondary {
|
||||
border-color: var(--button-secondary-border);
|
||||
}
|
||||
|
||||
/* Enable hover only on non-touch devices */
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
a.primary:hover {
|
||||
background: var(--button-primary-hover);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
a.secondary:hover {
|
||||
background: var(--button-secondary-hover);
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.main {
|
||||
padding: 48px 24px;
|
||||
}
|
||||
|
||||
.intro {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.intro h1 {
|
||||
font-size: 32px;
|
||||
line-height: 40px;
|
||||
letter-spacing: -1.92px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.logo {
|
||||
filter: invert();
|
||||
}
|
||||
|
||||
.page {
|
||||
--background: #000;
|
||||
--foreground: #000;
|
||||
|
||||
--text-primary: #ededed;
|
||||
--text-secondary: #999;
|
||||
|
||||
--button-primary-hover: #ccc;
|
||||
--button-secondary-hover: #1a1a1a;
|
||||
--button-secondary-border: #1a1a1a;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,319 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function SidebarControls({
|
||||
user,
|
||||
profile,
|
||||
isEditMode,
|
||||
setIsEditMode,
|
||||
setShowApprovalModal,
|
||||
setShowUserModal,
|
||||
fetchUsers,
|
||||
setPlacementMode,
|
||||
setShowToast,
|
||||
filters,
|
||||
setFilters,
|
||||
hubStyles,
|
||||
setShowSurveyModal,
|
||||
setShowCapacityModal,
|
||||
pendingCapacityCount,
|
||||
setShowDelegationModal,
|
||||
pendingDelegationsCount,
|
||||
hubs,
|
||||
onFocusHub,
|
||||
onOpenKas,
|
||||
setShowPicListModal,
|
||||
onlyMyHub,
|
||||
setOnlyMyHub
|
||||
}) {
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
|
||||
{user && (profile?.role === 'super_admin' || profile?.role === 'pic') && (
|
||||
<div className="edit-mode-controls" style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||||
<h4 style={{ fontSize: '0.8rem', color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.5px', marginBottom: '4px' }}>
|
||||
<i className="fas fa-edit"></i> Mode Edit Peta
|
||||
</h4>
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
onClick={() => setIsEditMode(!isEditMode)}
|
||||
style={{
|
||||
justifyContent: 'flex-start',
|
||||
background: isEditMode ? 'rgba(239, 68, 68, 0.15)' : 'rgba(59, 130, 246, 0.15)',
|
||||
color: isEditMode ? 'var(--danger)' : 'var(--primary)',
|
||||
border: isEditMode ? '1px solid rgba(239, 68, 68, 0.3)' : '1px solid rgba(59, 130, 246, 0.3)',
|
||||
padding: '10px 16px',
|
||||
borderRadius: '8px'
|
||||
}}
|
||||
>
|
||||
<i className={`fas ${isEditMode ? 'fa-lock-open' : 'fa-lock'}`}></i>
|
||||
<span>{isEditMode ? 'Nonaktifkan Mode Edit' : 'Aktifkan Mode Edit'}</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{user && profile?.role === 'super_admin' && (
|
||||
<div className="admin-controls" style={{ display: 'flex', flexDirection: 'column', gap: '10px', marginTop: '10px' }}>
|
||||
<h4 style={{ fontSize: '0.8rem', color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.5px', marginBottom: '4px' }}>
|
||||
<i className="fas fa-user-shield"></i> Aksi Admin
|
||||
</h4>
|
||||
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
onClick={() => setShowApprovalModal(true)}
|
||||
style={{
|
||||
justifyContent: 'flex-start',
|
||||
background: 'rgba(59, 130, 246, 0.05)',
|
||||
color: 'var(--text-main)',
|
||||
border: '1px solid rgba(0, 0, 0, 0.1)',
|
||||
padding: '10px 16px',
|
||||
borderRadius: '8px'
|
||||
}}
|
||||
>
|
||||
<i className="fas fa-list-check" style={{ color: 'var(--primary)' }}></i>
|
||||
<span>Verifikasi KK</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
onClick={() => setShowCapacityModal(true)}
|
||||
style={{
|
||||
justifyContent: 'flex-start',
|
||||
background: 'rgba(59, 130, 246, 0.05)',
|
||||
color: 'var(--text-main)',
|
||||
border: '1px solid rgba(0, 0, 0, 0.1)',
|
||||
padding: '10px 16px',
|
||||
borderRadius: '8px',
|
||||
position: 'relative'
|
||||
}}
|
||||
>
|
||||
<i className="fas fa-triangle-exclamation" style={{ color: '#d97706' }}></i>
|
||||
<span>Kapasitas Hub</span>
|
||||
{pendingCapacityCount > 0 && (
|
||||
<span style={{
|
||||
position: 'absolute',
|
||||
right: '16px',
|
||||
background: 'var(--danger)',
|
||||
color: 'white',
|
||||
fontSize: '0.7rem',
|
||||
padding: '2px 6px',
|
||||
borderRadius: '10px',
|
||||
fontWeight: 'bold'
|
||||
}}>
|
||||
{pendingCapacityCount}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
onClick={() => { fetchUsers(); setShowUserModal(true); }}
|
||||
style={{
|
||||
justifyContent: 'flex-start',
|
||||
background: 'rgba(59, 130, 246, 0.05)',
|
||||
color: 'var(--text-main)',
|
||||
border: '1px solid rgba(0, 0, 0, 0.1)',
|
||||
padding: '10px 16px',
|
||||
borderRadius: '8px'
|
||||
}}
|
||||
>
|
||||
<i className="fas fa-users-cog" style={{ color: 'var(--primary)' }}></i>
|
||||
<span>Manajemen Pengguna</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{user && (profile?.role === 'pic' || profile?.role === 'super_admin') && isEditMode && (
|
||||
<div className="surveyor-controls" style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||||
<h4 style={{ fontSize: '0.8rem', color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.5px', marginBottom: '4px' }}>
|
||||
<i className="fas fa-route"></i> Menu Surveyor
|
||||
</h4>
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
onClick={() => setShowSurveyModal(true)}
|
||||
style={{
|
||||
justifyContent: 'flex-start',
|
||||
background: 'rgba(16, 185, 129, 0.15)',
|
||||
color: 'var(--success)',
|
||||
border: '1px solid rgba(16, 185, 129, 0.3)',
|
||||
padding: '10px 16px',
|
||||
borderRadius: '8px'
|
||||
}}
|
||||
>
|
||||
<i className="fas fa-house-medical" style={{ color: 'var(--success)' }}></i>
|
||||
<span>Tambah Pendataan KK</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{user && profile?.role === 'pic' && (
|
||||
<div className="pic-hub-controls" style={{ display: 'flex', flexDirection: 'column', gap: '10px', marginTop: '5px' }}>
|
||||
<h4 style={{ fontSize: '0.8rem', color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.5px', marginBottom: '4px' }}>
|
||||
<i className="fas fa-mosque"></i> Hub Saya
|
||||
</h4>
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
onClick={() => {
|
||||
const myHub = hubs.find(h => h.pic_id === profile.id);
|
||||
if (myHub) onFocusHub(myHub);
|
||||
}}
|
||||
style={{
|
||||
justifyContent: 'flex-start',
|
||||
background: 'rgba(59, 130, 246, 0.05)',
|
||||
color: 'var(--text-main)',
|
||||
border: '1px solid rgba(0, 0, 0, 0.1)',
|
||||
padding: '10px 16px',
|
||||
borderRadius: '8px'
|
||||
}}
|
||||
>
|
||||
<i className="fas fa-search-location" style={{ color: 'var(--primary)' }}></i>
|
||||
<span>Fokus ke Hub Saya</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{user && profile?.role === 'hub_head' && (
|
||||
<div className="delegation-controls" style={{ display: 'flex', flexDirection: 'column', gap: '10px', marginTop: '5px' }}>
|
||||
<h4 style={{ fontSize: '0.8rem', color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.5px', marginBottom: '4px' }}>
|
||||
<i className="fas fa-handshake"></i> Koordinasi Hub
|
||||
</h4>
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
onClick={() => setShowDelegationModal(true)}
|
||||
style={{
|
||||
justifyContent: 'flex-start',
|
||||
background: 'rgba(59, 130, 246, 0.05)',
|
||||
color: 'var(--text-main)',
|
||||
border: '1px solid rgba(0, 0, 0, 0.1)',
|
||||
padding: '10px 16px',
|
||||
borderRadius: '8px',
|
||||
position: 'relative'
|
||||
}}
|
||||
>
|
||||
<i className="fas fa-exchange-alt" style={{ color: 'var(--primary)' }}></i>
|
||||
<span>Delegasi Masuk</span>
|
||||
{pendingDelegationsCount > 0 && (
|
||||
<span style={{
|
||||
position: 'absolute',
|
||||
right: '16px',
|
||||
background: 'var(--danger)',
|
||||
color: 'white',
|
||||
fontSize: '0.7rem',
|
||||
padding: '2px 6px',
|
||||
borderRadius: '10px',
|
||||
fontWeight: 'bold'
|
||||
}}>
|
||||
{pendingDelegationsCount}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{user && profile?.role === 'hub_head' && (
|
||||
<div className="manager-controls" style={{ display: 'flex', flexDirection: 'column', gap: '10px', marginTop: '5px' }}>
|
||||
<h4 style={{ fontSize: '0.8rem', color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.5px', marginBottom: '4px' }}>
|
||||
<i className="fas fa-mosque"></i> Menu Ketua Pengurus
|
||||
</h4>
|
||||
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
onClick={() => {
|
||||
const myHub = hubs.find(h => h.head_id === profile.id);
|
||||
if (myHub) onFocusHub(myHub);
|
||||
}}
|
||||
style={{
|
||||
justifyContent: 'flex-start',
|
||||
background: 'rgba(59, 130, 246, 0.05)',
|
||||
color: 'var(--text-main)',
|
||||
border: '1px solid rgba(0, 0, 0, 0.1)',
|
||||
padding: '10px 16px',
|
||||
borderRadius: '8px'
|
||||
}}
|
||||
>
|
||||
<i className="fas fa-search-location" style={{ color: 'var(--primary)' }}></i>
|
||||
<span>Fokus ke Hub Saya</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
onClick={() => {
|
||||
const myHub = hubs.find(h => h.head_id === profile.id);
|
||||
if (myHub) onOpenKas(myHub);
|
||||
}}
|
||||
style={{
|
||||
justifyContent: 'flex-start',
|
||||
background: 'rgba(59, 130, 246, 0.05)',
|
||||
color: 'var(--text-main)',
|
||||
border: '1px solid rgba(0, 0, 0, 0.1)',
|
||||
padding: '10px 16px',
|
||||
borderRadius: '8px'
|
||||
}}
|
||||
>
|
||||
<i className="fas fa-wallet" style={{ color: 'var(--success)' }}></i>
|
||||
<span>Manajemen Kas</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
onClick={() => {
|
||||
fetchUsers();
|
||||
setShowPicListModal(true);
|
||||
}}
|
||||
style={{
|
||||
justifyContent: 'flex-start',
|
||||
background: 'rgba(59, 130, 246, 0.05)',
|
||||
color: 'var(--text-main)',
|
||||
border: '1px solid rgba(0, 0, 0, 0.1)',
|
||||
padding: '10px 16px',
|
||||
borderRadius: '8px'
|
||||
}}
|
||||
>
|
||||
<i className="fas fa-users" style={{ color: '#d97706' }}></i>
|
||||
<span>Akun PIC Lapangan</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isEditMode && profile?.role === 'super_admin' && (
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
onClick={() => { setPlacementMode('hub'); setShowToast(true); }}
|
||||
style={{
|
||||
justifyContent: 'flex-start',
|
||||
background: 'rgba(59, 130, 246, 0.15)',
|
||||
color: 'var(--primary)',
|
||||
border: '1px solid rgba(59, 130, 246, 0.3)',
|
||||
padding: '10px 16px',
|
||||
borderRadius: '8px'
|
||||
}}
|
||||
>
|
||||
<i className="fas fa-place-of-worship"></i>
|
||||
<span>Tambah Rumah Ibadah</span>
|
||||
</button>
|
||||
)}
|
||||
|
||||
<div className="filter-group">
|
||||
<h4><i className="fas fa-filter"></i> Filter Visibilitas</h4>
|
||||
{user && (profile?.role === 'pic' || profile?.role === 'hub_head') && (
|
||||
<label className="checkbox-item" style={{ marginBottom: '8px', borderBottom: '1px dashed rgba(0,0,0,0.1)', paddingBottom: '8px', fontWeight: 'bold' }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={onlyMyHub}
|
||||
onChange={(e) => setOnlyMyHub(e.target.checked)}
|
||||
/>
|
||||
<i className="fas fa-location-crosshairs" style={{ color: 'var(--primary)', width: '20px' }}></i> Hanya Hub Saya
|
||||
</label>
|
||||
)}
|
||||
{Object.keys(filters).map(key => (
|
||||
<label className="checkbox-item" key={key}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={filters[key]}
|
||||
onChange={(e) => setFilters({ ...filters, [key]: e.target.checked })}
|
||||
/>
|
||||
<i className={hubStyles[key].iconClass} style={{ color: hubStyles[key].color, width: '20px' }}></i> {key === 'Mosque' ? 'Masjid' : key === 'Church' ? 'Gereja' : key === 'Temple' ? 'Pura' : key === 'Vihara' ? 'Vihara' : 'Lainnya'}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function StatsPanel({
|
||||
profile,
|
||||
showStats,
|
||||
setShowStats,
|
||||
stats
|
||||
}) {
|
||||
return (
|
||||
<div className={`right-panel glass-panel ${showStats ? '' : 'hidden'}`} id="statsPanel">
|
||||
<div className="panel-title">
|
||||
<span className="title-text"><i className="fas fa-chart-pie"></i> {profile?.role === 'hub_head' || profile?.role === 'pic' ? 'Micro Statistics (Your Area)' : 'Macro Statistics (City Level)'}</span>
|
||||
<button className="btn-toggle-panel" onClick={() => setShowStats(false)}><i className="fas fa-chevron-right"></i> Hide</button>
|
||||
</div>
|
||||
|
||||
<div className="kpi-container">
|
||||
<div className="kpi-card text-center">
|
||||
<div style={{ fontSize: '2rem', color: 'var(--success)', fontWeight: 'bold' }}>{stats.coveredCount}</div>
|
||||
<div style={{ fontSize: '0.8rem', color: '#64748b' }}>Warga Terjangkau</div>
|
||||
</div>
|
||||
<div className="kpi-card text-center">
|
||||
<div style={{ fontSize: '2rem', color: 'var(--danger)', fontWeight: 'bold' }}>{stats.uncoveredCount}</div>
|
||||
<div style={{ fontSize: '0.8rem', color: '#64748b' }}>Warga Belum Terjangkau</div>
|
||||
</div>
|
||||
<div className="kpi-card text-center">
|
||||
<div style={{ fontSize: '2rem', color: 'var(--primary)', fontWeight: 'bold' }}>{stats.equalityIndex}%</div>
|
||||
<div style={{ fontSize: '0.8rem', color: '#64748b' }}>Indeks Pemerataan</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ padding: '0 20px', display: 'flex', gap: '20px' }}>
|
||||
<div style={{ flex: 1 }}>
|
||||
<h4 style={{ margin: '10px 0 5px 0', fontSize: '0.85rem', color: '#475569', textAlign: 'center' }}>Sebaran per Wilayah</h4>
|
||||
<canvas id="subDistrictChart" style={{ width: '100%', height: '200px' }}></canvas>
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<h4 style={{ margin: '10px 0 5px 0', fontSize: '0.85rem', color: '#475569', textAlign: 'center' }}>Berdasarkan Tipe Hub</h4>
|
||||
<canvas id="typeChart" style={{ width: '100%', height: '200px' }}></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
import React from 'react';
|
||||
import { supabase } from '@/lib/supabase';
|
||||
|
||||
export default function ApprovalQueueModal({
|
||||
showApprovalModal,
|
||||
setShowApprovalModal,
|
||||
households,
|
||||
selectedPhotoUrl,
|
||||
setSelectedPhotoUrl,
|
||||
handleVerifyAction,
|
||||
onFocusHousehold
|
||||
}) {
|
||||
if (!showApprovalModal) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="modal-overlay active">
|
||||
<div className="modal-content" style={{ maxWidth: '900px', width: '90%' }}>
|
||||
<div className="modal-header">
|
||||
<h2><i className="fas fa-list-check text-primary"></i> Antrean Verifikasi KK</h2>
|
||||
<button className="close-btn" onClick={() => setShowApprovalModal(false)}>×</button>
|
||||
</div>
|
||||
<div className="modal-body" style={{ maxHeight: '60vh', overflowY: 'auto' }}>
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.9rem' }}>
|
||||
<thead>
|
||||
<tr style={{ background: '#f1f5f9', textAlign: 'left' }}>
|
||||
<th style={{ padding: '10px', borderBottom: '2px solid #e2e8f0' }}>Kepala Keluarga</th>
|
||||
<th style={{ padding: '10px', borderBottom: '2px solid #e2e8f0' }}>Jml Anggota</th>
|
||||
<th style={{ padding: '10px', borderBottom: '2px solid #e2e8f0' }}>Wilayah</th>
|
||||
<th style={{ padding: '10px', borderBottom: '2px solid #e2e8f0' }}>Aksi Lokasi / Foto</th>
|
||||
<th style={{ padding: '10px', borderBottom: '2px solid #e2e8f0', textAlign: 'right' }}>Aksi Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{households.filter(hh => hh.status === 'Pending').length === 0 ? (
|
||||
<tr><td colSpan="5" style={{ textAlign: 'center', padding: '20px', color: '#64748b' }}>Tidak ada antrean pending.</td></tr>
|
||||
) : (
|
||||
households.filter(hh => hh.status === 'Pending').map(hh => (
|
||||
<tr key={hh.id} style={{ borderBottom: '1px solid #e2e8f0' }}>
|
||||
<td style={{ padding: '10px' }}>
|
||||
<span style={{ fontWeight: 'bold' }}>{hh.head_of_family}</span>
|
||||
<br/><small style={{ color: '#64748b' }}>NIK: {hh.nik || '-'}</small>
|
||||
</td>
|
||||
<td style={{ padding: '10px' }}>{hh.family_size} Jiwa</td>
|
||||
<td style={{ padding: '10px' }}>{hh.sub_district}</td>
|
||||
<td style={{ padding: '10px' }}>
|
||||
<div style={{ display: 'flex', gap: '8px' }}>
|
||||
<button onClick={async () => {
|
||||
if (hh.photo_url && !hh.photo_url.startsWith('http')) {
|
||||
const { data } = await supabase.storage.from('geotagging-photo').createSignedUrl(hh.photo_url, 3600);
|
||||
if (data && data.signedUrl) setSelectedPhotoUrl(data.signedUrl);
|
||||
} else {
|
||||
setSelectedPhotoUrl(hh.photo_url || 'https://via.placeholder.com/150');
|
||||
}
|
||||
}} className="btn btn-outline" style={{ padding: '4px 8px', fontSize: '0.8rem' }}>Lihat Foto</button>
|
||||
|
||||
<button onClick={() => onFocusHousehold(hh)} className="btn btn-outline" style={{ padding: '4px 8px', fontSize: '0.8rem', color: 'var(--primary)', borderColor: 'rgba(59, 130, 246, 0.3)' }} title="Fokus Peta ke Lokasi KK">
|
||||
<i className="fas fa-crosshairs"></i> Lihat Lokasi
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
<td style={{ padding: '10px', textAlign: 'right' }}>
|
||||
<button onClick={() => handleVerifyAction(hh.id, 'Verified')} className="btn btn-primary" style={{ padding: '4px 8px', fontSize: '0.8rem', background: '#10b981', borderColor: '#10b981', color: 'white', marginRight: '5px' }}>Terima</button>
|
||||
<button onClick={() => handleVerifyAction(hh.id, 'Rejected')} className="btn btn-outline" style={{ padding: '4px 8px', fontSize: '0.8rem', color: '#ef4444', borderColor: '#ef4444' }}>Tolak</button>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Photo Preview Overlay */}
|
||||
{selectedPhotoUrl && (
|
||||
<div className="modal-overlay active" style={{ zIndex: 9999 }} onClick={() => setSelectedPhotoUrl('')}>
|
||||
<div style={{ position: 'relative', maxWidth: '90%', maxHeight: '90%' }}>
|
||||
<button onClick={() => setSelectedPhotoUrl('')} style={{ position: 'absolute', top: '-40px', right: '0', background: 'none', border: 'none', color: 'white', fontSize: '2rem', cursor: 'pointer' }}>×</button>
|
||||
<img src={selectedPhotoUrl} alt="Bukti Foto" style={{ maxWidth: '100%', maxHeight: '90vh', borderRadius: '8px', boxShadow: '0 4px 20px rgba(0,0,0,0.5)' }} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,324 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { supabase } from '../../../lib/supabase';
|
||||
|
||||
export default function CapacityApprovalModal({
|
||||
showApprovalModal,
|
||||
setShowApprovalModal,
|
||||
hubs,
|
||||
households,
|
||||
showToastNotification,
|
||||
onSuccess
|
||||
}) {
|
||||
const [selectedHub, setSelectedHub] = useState(null);
|
||||
const [hubDonations, setHubDonations] = useState([]);
|
||||
const [isLoadingFinancials, setIsLoadingFinancials] = useState(false);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
// Filter hubs that have pending requests
|
||||
const pendingHubs = hubs.filter(h => h.pending_capacity_status !== null && h.pending_capacity_status !== undefined);
|
||||
|
||||
// Auto-select first pending hub
|
||||
useEffect(() => {
|
||||
if (pendingHubs.length > 0 && !selectedHub) {
|
||||
setSelectedHub(pendingHubs[0]);
|
||||
} else if (pendingHubs.length === 0) {
|
||||
setSelectedHub(null);
|
||||
}
|
||||
}, [hubs, pendingHubs, selectedHub]);
|
||||
|
||||
// Fetch selected hub's financials
|
||||
useEffect(() => {
|
||||
if (selectedHub) {
|
||||
const fetchHubFinancials = async () => {
|
||||
setIsLoadingFinancials(true);
|
||||
const { data, error } = await supabase
|
||||
.from('donations')
|
||||
.select('*')
|
||||
.eq('hub_id', selectedHub.id)
|
||||
.order('transaction_date', { ascending: false });
|
||||
if (error) {
|
||||
console.error('Error fetching hub donations:', error);
|
||||
} else {
|
||||
setHubDonations(data || []);
|
||||
}
|
||||
setIsLoadingFinancials(false);
|
||||
};
|
||||
fetchHubFinancials();
|
||||
} else {
|
||||
setHubDonations([]);
|
||||
}
|
||||
}, [selectedHub]);
|
||||
|
||||
if (!showApprovalModal) return null;
|
||||
|
||||
// Calculations for selected hub
|
||||
const servedKkCount = selectedHub
|
||||
? households.filter(hh => hh.db_assigned_hub_id === selectedHub.id).length
|
||||
: 0;
|
||||
|
||||
const totalBalance = hubDonations.reduce((acc, curr) => {
|
||||
if (curr.type === 'IN') return acc + Number(curr.amount);
|
||||
return acc - Number(curr.amount);
|
||||
}, 0);
|
||||
|
||||
const ratioPerKk = servedKkCount > 0 ? totalBalance / servedKkCount : totalBalance;
|
||||
|
||||
// Determine critical state warning and recommendations
|
||||
let recommendationText = 'Kondisi Aman';
|
||||
let recommendationColor = '#10b981';
|
||||
let recommendationIcon = 'fa-check-circle';
|
||||
|
||||
if (ratioPerKk < 100000) {
|
||||
recommendationText = 'SANGAT KRITIS (Rekomendasi Setujui: Valid)';
|
||||
recommendationColor = '#ef4444';
|
||||
recommendationIcon = 'fa-exclamation-triangle';
|
||||
} else if (ratioPerKk < 300000) {
|
||||
recommendationText = 'KRITIS / SEDANG (Rekomendasi Setujui: Cukup Valid)';
|
||||
recommendationColor = '#f59e0b';
|
||||
recommendationIcon = 'fa-circle-info';
|
||||
} else {
|
||||
recommendationText = 'KONDISI SEHAT (Rekomendasi Tolak: Dana Cukup)';
|
||||
recommendationColor = '#3b82f6';
|
||||
recommendationIcon = 'fa-shield-halved';
|
||||
}
|
||||
|
||||
// Handle decisions
|
||||
const handleDecision = async (hubId, approve) => {
|
||||
if (isSubmitting) return;
|
||||
setIsSubmitting(true);
|
||||
|
||||
try {
|
||||
if (approve) {
|
||||
// Overwrite main status and reset pending status
|
||||
const { error } = await supabase
|
||||
.from('hubs')
|
||||
.update({
|
||||
capacity_status: selectedHub.pending_capacity_status,
|
||||
pending_capacity_status: null
|
||||
})
|
||||
.eq('id', hubId);
|
||||
|
||||
if (error) {
|
||||
alert(`Gagal menyetujui pengajuan: ${error.message}`);
|
||||
} else {
|
||||
showToastNotification(`Berhasil menyetujui perubahan kapasitas menjadi overloaded!`);
|
||||
setSelectedHub(null);
|
||||
onSuccess();
|
||||
}
|
||||
} else {
|
||||
// Just reject by resetting pending status
|
||||
const { error } = await supabase
|
||||
.from('hubs')
|
||||
.update({ pending_capacity_status: null })
|
||||
.eq('id', hubId);
|
||||
|
||||
if (error) {
|
||||
alert(`Gagal menolak pengajuan: ${error.message}`);
|
||||
} else {
|
||||
showToastNotification(`Pengajuan perubahan kapasitas ditolak.`);
|
||||
setSelectedHub(null);
|
||||
onSuccess();
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="modal-overlay active">
|
||||
<div className="modal-content" style={{ maxWidth: '950px', width: '95%' }}>
|
||||
<div className="modal-header">
|
||||
<h2><i className="fas fa-list-check text-primary"></i> Antrean Verifikasi Kapasitas Hub</h2>
|
||||
<button className="close-btn" onClick={() => setShowApprovalModal(false)}>×</button>
|
||||
</div>
|
||||
|
||||
<div className="modal-body" style={{ display: 'grid', gridTemplateColumns: '300px 1fr', gap: '20px', maxHeight: '70vh', overflowY: 'auto' }}>
|
||||
|
||||
{/* Left Column: Pending Hubs List */}
|
||||
<div style={{ borderRight: '1px solid #e2e8f0', paddingRight: '15px' }}>
|
||||
<h3 style={{ margin: '0 0 15px 0', fontSize: '1rem', color: 'var(--text-muted)' }}>Daftar Pengajuan ({pendingHubs.length})</h3>
|
||||
{pendingHubs.length === 0 ? (
|
||||
<p style={{ textAlign: 'center', color: '#94a3b8', fontSize: '0.9rem', padding: '40px 10px' }}>
|
||||
Tidak ada pengajuan perubahan kapasitas saat ini.
|
||||
</p>
|
||||
) : (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||||
{pendingHubs.map(hub => {
|
||||
const isSelected = selectedHub?.id === hub.id;
|
||||
return (
|
||||
<div
|
||||
key={hub.id}
|
||||
onClick={() => setSelectedHub(hub)}
|
||||
style={{
|
||||
padding: '12px',
|
||||
borderRadius: '8px',
|
||||
border: isSelected ? '2px solid var(--primary)' : '1px solid #e2e8f0',
|
||||
background: isSelected ? 'rgba(59, 130, 246, 0.05)' : 'white',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.2s'
|
||||
}}
|
||||
>
|
||||
<strong style={{ display: 'block', fontSize: '0.9rem', color: '#1e293b' }}>{hub.name}</strong>
|
||||
<span style={{ fontSize: '0.75rem', color: '#64748b' }}>{hub.type}</span>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '8px' }}>
|
||||
<span style={{ fontSize: '0.7rem', padding: '2px 6px', background: '#fef3c7', color: '#d97706', borderRadius: '4px', fontWeight: 'bold' }}>
|
||||
Minta: {hub.pending_capacity_status === 'overloaded' ? 'Overloaded' : 'Normal'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right Column: Selected Hub Details and Ratio Analysis */}
|
||||
<div>
|
||||
{selectedHub ? (
|
||||
<div>
|
||||
{/* Hub Header */}
|
||||
<div style={{ marginBottom: '20px' }}>
|
||||
<h3 style={{ margin: '0 0 4px 0', fontSize: '1.25rem', color: '#1e293b' }}>{selectedHub.name}</h3>
|
||||
<p style={{ margin: 0, fontSize: '0.8rem', color: '#64748b' }}>
|
||||
<i className="fas fa-map-marker-alt" style={{ marginRight: '6px' }}></i>{selectedHub.address || 'Alamat belum diatur'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Metrics Cards Grid */}
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '15px', marginBottom: '20px' }}>
|
||||
|
||||
{/* Card 1: Assigned KK */}
|
||||
<div style={{ background: '#f8fafc', padding: '15px', borderRadius: '8px', border: '1px solid #e2e8f0' }}>
|
||||
<span style={{ display: 'block', fontSize: '0.75rem', color: '#64748b', fontWeight: 'bold', textTransform: 'uppercase' }}>KK Terlayani</span>
|
||||
<strong style={{ fontSize: '1.5rem', color: '#1e293b' }}>{servedKkCount} <span style={{ fontSize: '0.85rem', fontWeight: 'normal' }}>Keluarga</span></strong>
|
||||
</div>
|
||||
|
||||
{/* Card 2: Donation Balance */}
|
||||
<div style={{ background: '#f8fafc', padding: '15px', borderRadius: '8px', border: '1px solid #e2e8f0' }}>
|
||||
<span style={{ display: 'block', fontSize: '0.75rem', color: '#64748b', fontWeight: 'bold', textTransform: 'uppercase' }}>Saldo Kas</span>
|
||||
{isLoadingFinancials ? (
|
||||
<span style={{ fontSize: '0.9rem', color: '#94a3b8' }}>Memuat data...</span>
|
||||
) : (
|
||||
<strong style={{ fontSize: '1.5rem', color: totalBalance >= 0 ? '#10b981' : '#ef4444' }}>
|
||||
Rp{totalBalance.toLocaleString('id-ID')}
|
||||
</strong>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Card 3: Financial Ratio */}
|
||||
<div style={{ background: '#f8fafc', padding: '15px', borderRadius: '8px', border: '1px solid #e2e8f0' }}>
|
||||
<span style={{ display: 'block', fontSize: '0.75rem', color: '#64748b', fontWeight: 'bold', textTransform: 'uppercase' }}>Rasio Dana / KK</span>
|
||||
{isLoadingFinancials ? (
|
||||
<span style={{ fontSize: '0.9rem', color: '#94a3b8' }}>Memuat data...</span>
|
||||
) : (
|
||||
<strong style={{ fontSize: '1.25rem', color: ratioPerKk < 100000 ? '#ef4444' : '#1e293b' }}>
|
||||
Rp{Math.round(ratioPerKk).toLocaleString('id-ID')} <span style={{ fontSize: '0.75rem', fontWeight: 'normal', color: '#64748b' }}>/ KK</span>
|
||||
</strong>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Audit & Recommendation Box */}
|
||||
<div style={{
|
||||
background: 'rgba(0,0,0,0.02)',
|
||||
padding: '15px',
|
||||
borderRadius: '8px',
|
||||
borderLeft: `4px solid ${recommendationColor}`,
|
||||
marginBottom: '20px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '12px'
|
||||
}}>
|
||||
<i className={`fas ${recommendationIcon}`} style={{ color: recommendationColor, fontSize: '1.5rem' }}></i>
|
||||
<div>
|
||||
<strong style={{ display: 'block', fontSize: '0.85rem', color: '#1e293b' }}>Rekomendasi Analitis Pusat:</strong>
|
||||
<span style={{ fontSize: '0.8rem', fontWeight: 'bold', color: recommendationColor }}>{recommendationText}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Last 5 Transactions List */}
|
||||
<div style={{ background: '#f8fafc', padding: '15px', borderRadius: '8px', border: '1px solid #e2e8f0', marginBottom: '25px' }}>
|
||||
<h4 style={{ margin: '0 0 10px 0', fontSize: '0.9rem', color: '#1e293b' }}><i className="fas fa-history"></i> Riwayat Transaksi Terakhir</h4>
|
||||
{isLoadingFinancials ? (
|
||||
<p style={{ textAlign: 'center', color: '#94a3b8', fontSize: '0.85rem', padding: '10px 0' }}>Memuat data keuangan...</p>
|
||||
) : hubDonations.length === 0 ? (
|
||||
<p style={{ textAlign: 'center', color: '#94a3b8', fontSize: '0.85rem', padding: '10px 0' }}>Tidak ada riwayat transaksi kas.</p>
|
||||
) : (
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.8rem' }}>
|
||||
<thead>
|
||||
<tr style={{ background: '#e2e8f0', textAlign: 'left' }}>
|
||||
<th style={{ padding: '6px', borderBottom: '1px solid #cbd5e1' }}>Tanggal</th>
|
||||
<th style={{ padding: '6px', borderBottom: '1px solid #cbd5e1' }}>Keterangan</th>
|
||||
<th style={{ padding: '6px', borderBottom: '1px solid #cbd5e1', textAlign: 'right' }}>Nominal</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{hubDonations.slice(0, 5).map(donation => (
|
||||
<tr key={donation.id} style={{ borderBottom: '1px solid #e2e8f0' }}>
|
||||
<td style={{ padding: '6px', color: '#475569' }}>{donation.transaction_date}</td>
|
||||
<td style={{ padding: '6px', color: '#1e293b' }}>{donation.description}</td>
|
||||
<td style={{ padding: '6px', textAlign: 'right', fontWeight: 'bold', color: donation.type === 'IN' ? '#10b981' : '#ef4444' }}>
|
||||
{donation.type === 'IN' ? '+' : '-'} Rp{Number(donation.amount).toLocaleString('id-ID')}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Actions Buttons */}
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: '12px' }}>
|
||||
<button
|
||||
className="btn btn-secondary"
|
||||
onClick={() => handleDecision(selectedHub.id, false)}
|
||||
disabled={isSubmitting}
|
||||
style={{
|
||||
padding: '10px 20px',
|
||||
background: '#fee2e2',
|
||||
color: '#b91c1c',
|
||||
border: '1px solid #fecaca',
|
||||
borderRadius: '6px',
|
||||
cursor: 'pointer',
|
||||
fontWeight: '600',
|
||||
fontSize: '0.85rem'
|
||||
}}
|
||||
>
|
||||
<i className="fas fa-times-circle"></i> Tolak Pengajuan
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
onClick={() => handleDecision(selectedHub.id, true)}
|
||||
disabled={isSubmitting}
|
||||
style={{
|
||||
padding: '10px 20px',
|
||||
background: '#10b981',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: '6px',
|
||||
cursor: 'pointer',
|
||||
fontWeight: '600',
|
||||
fontSize: '0.85rem'
|
||||
}}
|
||||
>
|
||||
<i className="fas fa-check-circle"></i> Setujui Pengajuan
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '40vh', color: '#94a3b8' }}>
|
||||
<i className="fas fa-arrow-left" style={{ fontSize: '2rem', marginBottom: '10px' }}></i>
|
||||
<p style={{ margin: 0 }}>Silakan pilih salah satu Hub dari antrean di sebelah kiri untuk diaudit.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,250 @@
|
||||
import React from 'react';
|
||||
import { supabase } from '@/lib/supabase';
|
||||
|
||||
// Simple Haversine distance calculator
|
||||
function getDistance(lat1, lon1, lat2, lon2) {
|
||||
if (!lat1 || !lon1 || !lat2 || !lon2) return 0;
|
||||
const R = 6371000; // meters
|
||||
const phi1 = (lat1 * Math.PI) / 180;
|
||||
const phi2 = (lat2 * Math.PI) / 180;
|
||||
const deltaPhi = ((lat2 - lat1) * Math.PI) / 180;
|
||||
const deltaLambda = ((lon2 - lon1) * Math.PI) / 180;
|
||||
|
||||
const a =
|
||||
Math.sin(deltaPhi / 2) * Math.sin(deltaPhi / 2) +
|
||||
Math.cos(phi1) * Math.cos(phi2) * Math.sin(deltaLambda / 2) * Math.sin(deltaLambda / 2);
|
||||
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
|
||||
|
||||
return R * c; // in meters
|
||||
}
|
||||
|
||||
export default function DelegationQueueModal({
|
||||
showDelegationModal,
|
||||
setShowDelegationModal,
|
||||
households,
|
||||
hubs,
|
||||
myHub,
|
||||
selectedPhotoUrl,
|
||||
setSelectedPhotoUrl,
|
||||
onFocusHousehold,
|
||||
fetchData,
|
||||
showToastNotification
|
||||
}) {
|
||||
if (!showDelegationModal || !myHub) return null;
|
||||
|
||||
// Filter incoming transfers targeted to myHub
|
||||
const incomingDelegations = households.filter(hh => hh.pending_transfer_hub_id === myHub.id);
|
||||
|
||||
const handleAccept = async (hh) => {
|
||||
try {
|
||||
const { error } = await supabase
|
||||
.from('households')
|
||||
.update({
|
||||
assigned_hub_id: myHub.id,
|
||||
pending_transfer_hub_id: null,
|
||||
manual_override_assigned_hub: true
|
||||
})
|
||||
.eq('id', hh.id);
|
||||
|
||||
if (error) throw error;
|
||||
|
||||
showToastNotification(`Warga ${hh.head_of_family} berhasil diterima dan dialihkan ke Hub Anda!`, 'success');
|
||||
fetchData();
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
showToastNotification(`Gagal menerima delegasi: ${err.message}`, 'danger');
|
||||
}
|
||||
};
|
||||
|
||||
const handleReject = async (hh) => {
|
||||
try {
|
||||
const { error } = await supabase
|
||||
.from('households')
|
||||
.update({
|
||||
pending_transfer_hub_id: null
|
||||
})
|
||||
.eq('id', hh.id);
|
||||
|
||||
if (error) throw error;
|
||||
|
||||
showToastNotification(`Delegasi warga ${hh.head_of_family} berhasil ditolak.`, 'success');
|
||||
fetchData();
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
showToastNotification(`Gagal menolak delegasi: ${err.message}`, 'danger');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="modal-overlay active">
|
||||
<div className="modal-content" style={{ maxWidth: '950px', width: '90%' }}>
|
||||
<div className="modal-header">
|
||||
<h2>
|
||||
<i className="fas fa-exchange-alt text-primary" style={{ marginRight: '8px' }}></i>
|
||||
Permohonan Delegasi Masuk
|
||||
</h2>
|
||||
<button className="close-btn" onClick={() => setShowDelegationModal(false)}>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body" style={{ maxHeight: '60vh', overflowY: 'auto' }}>
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.9rem' }}>
|
||||
<thead>
|
||||
<tr style={{ background: '#f1f5f9', textAlign: 'left' }}>
|
||||
<th style={{ padding: '12px 10px', borderBottom: '2px solid #e2e8f0' }}>Kepala Keluarga</th>
|
||||
<th style={{ padding: '12px 10px', borderBottom: '2px solid #e2e8f0' }}>Jumlah Anggota</th>
|
||||
<th style={{ padding: '12px 10px', borderBottom: '2px solid #e2e8f0' }}>Hub Asal</th>
|
||||
<th style={{ padding: '12px 10px', borderBottom: '2px solid #e2e8f0' }}>Jarak ke Hub Anda</th>
|
||||
<th style={{ padding: '12px 10px', borderBottom: '2px solid #e2e8f0' }}>Verifikasi Media</th>
|
||||
<th style={{ padding: '12px 10px', borderBottom: '2px solid #e2e8f0', textAlign: 'right' }}>Aksi Keputusan</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{incomingDelegations.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan="6" style={{ textAlign: 'center', padding: '30px', color: '#64748b' }}>
|
||||
Tidak ada permohonan delegasi masuk untuk Hub Anda.
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
incomingDelegations.map((hh) => {
|
||||
const originHubName = hubs.find((h) => String(h.id) === String(hh.db_assigned_hub_id))?.name || 'Hub Tidak Dikenal';
|
||||
const distanceMeters = getDistance(hh.lat, hh.lng, myHub.lat, myHub.lng);
|
||||
const formattedDistance =
|
||||
distanceMeters > 1000
|
||||
? `${(distanceMeters / 1000).toFixed(2)} km`
|
||||
: `${Math.round(distanceMeters)} m`;
|
||||
|
||||
return (
|
||||
<tr key={hh.id} style={{ borderBottom: '1px solid #e2e8f0' }}>
|
||||
<td style={{ padding: '12px 10px' }}>
|
||||
<span style={{ fontWeight: 'bold' }}>{hh.head_of_family}</span>
|
||||
<br />
|
||||
<small style={{ color: '#64748b' }}>NIK: {hh.nik || '-'}</small>
|
||||
</td>
|
||||
<td style={{ padding: '12px 10px' }}>{hh.family_size} Jiwa</td>
|
||||
<td style={{ padding: '12px 10px', color: '#4b5563', fontWeight: '500' }}>
|
||||
{originHubName}
|
||||
</td>
|
||||
<td style={{ padding: '12px 10px' }}>
|
||||
<span
|
||||
style={{
|
||||
padding: '2px 6px',
|
||||
borderRadius: '4px',
|
||||
background: distanceMeters > (myHub.radius || 500) ? '#fef3c7' : '#dcfce7',
|
||||
color: distanceMeters > (myHub.radius || 500) ? '#d97706' : '#15803d',
|
||||
fontWeight: '600',
|
||||
fontSize: '0.8rem'
|
||||
}}
|
||||
>
|
||||
{formattedDistance}
|
||||
</span>
|
||||
</td>
|
||||
<td style={{ padding: '12px 10px' }}>
|
||||
<div style={{ display: 'flex', gap: '8px' }}>
|
||||
<button
|
||||
onClick={async () => {
|
||||
if (hh.photo_url && !hh.photo_url.startsWith('http')) {
|
||||
const { data } = await supabase.storage.from('geotagging-photo').createSignedUrl(hh.photo_url, 3600);
|
||||
if (data && data.signedUrl) setSelectedPhotoUrl(data.signedUrl);
|
||||
} else {
|
||||
setSelectedPhotoUrl(hh.photo_url || 'https://via.placeholder.com/150');
|
||||
}
|
||||
}}
|
||||
className="btn btn-outline"
|
||||
style={{ padding: '4px 8px', fontSize: '0.8rem' }}
|
||||
>
|
||||
Foto
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
onFocusHousehold(hh);
|
||||
setShowDelegationModal(false);
|
||||
}}
|
||||
className="btn btn-outline"
|
||||
style={{
|
||||
padding: '4px 8px',
|
||||
fontSize: '0.8rem',
|
||||
color: 'var(--primary)',
|
||||
borderColor: 'rgba(59, 130, 246, 0.3)'
|
||||
}}
|
||||
title="Fokus Peta ke Lokasi KK"
|
||||
>
|
||||
<i className="fas fa-crosshairs"></i> Peta
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
<td style={{ padding: '12px 10px', textAlign: 'right' }}>
|
||||
<button
|
||||
onClick={() => handleAccept(hh)}
|
||||
className="btn btn-primary"
|
||||
style={{
|
||||
padding: '4px 10px',
|
||||
fontSize: '0.8rem',
|
||||
background: '#10b981',
|
||||
borderColor: '#10b981',
|
||||
color: 'white',
|
||||
marginRight: '6px'
|
||||
}}
|
||||
>
|
||||
Terima
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleReject(hh)}
|
||||
className="btn btn-outline"
|
||||
style={{
|
||||
padding: '4px 10px',
|
||||
fontSize: '0.8rem',
|
||||
color: '#ef4444',
|
||||
borderColor: '#ef4444'
|
||||
}}
|
||||
>
|
||||
Tolak
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Photo Preview Overlay */}
|
||||
{selectedPhotoUrl && (
|
||||
<div className="modal-overlay active" style={{ zIndex: 9999 }} onClick={() => setSelectedPhotoUrl('')}>
|
||||
<div style={{ position: 'relative', maxWidth: '90%', maxHeight: '90%' }}>
|
||||
<button
|
||||
onClick={() => setSelectedPhotoUrl('')}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '-40px',
|
||||
right: '0',
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
color: 'white',
|
||||
fontSize: '2rem',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
<img
|
||||
src={selectedPhotoUrl}
|
||||
alt="Bukti Foto"
|
||||
style={{
|
||||
maxWidth: '100%',
|
||||
maxHeight: '90vh',
|
||||
borderRadius: '8px',
|
||||
boxShadow: '0 4px 20px rgba(0,0,0,0.5)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function DonationModal({
|
||||
showDonationModal,
|
||||
setShowDonationModal,
|
||||
donationFormData,
|
||||
setDonationFormData,
|
||||
hubs,
|
||||
isSubmittingDonation,
|
||||
handleSaveDonation,
|
||||
donationsList,
|
||||
profile
|
||||
}) {
|
||||
if (!showDonationModal) return null;
|
||||
if (!profile) return null; // Secure fail-safe for unauthenticated users
|
||||
|
||||
// Check roles: PIC, Hub Head, and Super Admin can record transactions
|
||||
const canEdit = profile.role === 'super_admin' || profile.role === 'pic' || profile.role === 'hub_head';
|
||||
|
||||
// Calculate Running / Total Balance
|
||||
const totalBalance = donationsList.reduce((acc, curr) => {
|
||||
if (curr.type === 'IN') {
|
||||
return acc + Number(curr.amount);
|
||||
} else {
|
||||
return acc - Number(curr.amount);
|
||||
}
|
||||
}, 0);
|
||||
|
||||
// Filter hubs list based on role
|
||||
const allowedHubs = profile.role === 'super_admin'
|
||||
? hubs
|
||||
: hubs.filter(h => h.pic_id === profile.id || h.head_id === profile.id);
|
||||
|
||||
return (
|
||||
<div className="modal-overlay active">
|
||||
<div className="modal-content" style={{ maxWidth: '800px', width: '90%' }}>
|
||||
<div className="modal-header">
|
||||
<h2><i className="fas fa-hand-holding-heart text-primary"></i> Manajemen Donasi / Kas</h2>
|
||||
<button className="close-btn" onClick={() => setShowDonationModal(false)}>×</button>
|
||||
</div>
|
||||
<div className="modal-body" style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: canEdit ? '1fr 1fr' : '1fr',
|
||||
gap: '20px',
|
||||
maxHeight: '60vh',
|
||||
overflowY: 'auto'
|
||||
}}>
|
||||
|
||||
{/* Form Transaksi (Only for PIC & Super Admin) */}
|
||||
{canEdit && (
|
||||
<div>
|
||||
<h3 style={{ margin: '0 0 15px 0', fontSize: '1.1rem' }}>Tambah Transaksi</h3>
|
||||
<form onSubmit={handleSaveDonation} style={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
|
||||
<div className="form-group">
|
||||
<label>Rumah Ibadah</label>
|
||||
<select
|
||||
className="form-control"
|
||||
value={donationFormData.hub_id}
|
||||
onChange={(e) => setDonationFormData({...donationFormData, hub_id: e.target.value})}
|
||||
required
|
||||
disabled={profile.role !== 'super_admin'}
|
||||
>
|
||||
<option value="">Pilih Rumah Ibadah</option>
|
||||
{allowedHubs.map(h => <option key={h.id} value={h.id}>{h.name}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Jenis Transaksi</label>
|
||||
<select className="form-control" value={donationFormData.type} onChange={(e) => setDonationFormData({...donationFormData, type: e.target.value})} required>
|
||||
<option value="IN">Pemasukan (Donasi/Sedekah)</option>
|
||||
<option value="OUT">Pengeluaran (Bantuan/Operasional)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Nominal (Rp)</label>
|
||||
<input type="number" className="form-control" value={donationFormData.amount} onChange={(e) => setDonationFormData({...donationFormData, amount: e.target.value})} min="1" required />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Keterangan</label>
|
||||
<textarea className="form-control" value={donationFormData.description} onChange={(e) => setDonationFormData({...donationFormData, description: e.target.value})} required rows="3" placeholder="Contoh: Sedekah hamba Allah / Bantuan Sembako"></textarea>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Tanggal Transaksi</label>
|
||||
<input type="date" className="form-control" value={donationFormData.transaction_date} onChange={(e) => setDonationFormData({...donationFormData, transaction_date: e.target.value})} required />
|
||||
</div>
|
||||
<button type="submit" className="btn btn-primary" disabled={isSubmittingDonation} style={{ width: '100%', padding: '10px' }}>
|
||||
<i className="fas fa-save"></i> {isSubmittingDonation ? 'Menyimpan...' : 'Simpan Transaksi'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Transaction Logs */}
|
||||
<div style={{ background: '#f8fafc', padding: '15px', borderRadius: '8px' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '15px', flexWrap: 'wrap', gap: '10px' }}>
|
||||
<h3 style={{ margin: 0, fontSize: '1.1rem' }}>Riwayat Transaksi</h3>
|
||||
<div style={{
|
||||
padding: '6px 12px',
|
||||
background: totalBalance >= 0 ? '#dcfce7' : '#fee2e2',
|
||||
color: totalBalance >= 0 ? '#15803d' : '#b91c1c',
|
||||
borderRadius: '20px',
|
||||
fontWeight: 'bold',
|
||||
fontSize: '0.85rem'
|
||||
}}>
|
||||
Saldo Kas: Rp{totalBalance.toLocaleString('id-ID')}
|
||||
</div>
|
||||
</div>
|
||||
{donationsList.length === 0 ? (
|
||||
<p style={{ textAlign: 'center', color: '#94a3b8', fontSize: '0.9rem', padding: '20px 0' }}>Belum ada data transaksi.</p>
|
||||
) : (
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.85rem' }}>
|
||||
<thead>
|
||||
<tr style={{ background: '#e2e8f0', textAlign: 'left' }}>
|
||||
<th style={{ padding: '8px', borderBottom: '2px solid #cbd5e1' }}>Tanggal</th>
|
||||
<th style={{ padding: '8px', borderBottom: '2px solid #cbd5e1' }}>Keterangan</th>
|
||||
<th style={{ padding: '8px', borderBottom: '2px solid #cbd5e1', textAlign: 'right' }}>Nominal</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{donationsList.map(d => (
|
||||
<tr key={d.id} style={{ borderBottom: '1px solid #e2e8f0' }}>
|
||||
<td style={{ padding: '8px', color: '#475569' }}>{d.transaction_date}</td>
|
||||
<td style={{ padding: '8px' }}>
|
||||
<span style={{ fontWeight: '500', color: '#1e293b' }}>{d.description}</span>
|
||||
{d.profiles && d.profiles.full_name && <div style={{ fontSize: '0.7rem', color: '#94a3b8' }}>Oleh: {d.profiles.full_name}</div>}
|
||||
</td>
|
||||
<td style={{ padding: '8px', textAlign: 'right', fontWeight: 'bold', color: d.type === 'IN' ? '#10b981' : '#ef4444' }}>
|
||||
{d.type === 'IN' ? '+' : '-'} Rp{Number(d.amount).toLocaleString('id-ID')}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function HouseholdFormModal({
|
||||
showHhModal,
|
||||
setShowHhModal,
|
||||
hhFormData,
|
||||
setHhFormData,
|
||||
handleSaveHh,
|
||||
hubs,
|
||||
imageFile,
|
||||
setImageFile,
|
||||
isUploading,
|
||||
isEditMode,
|
||||
profile
|
||||
}) {
|
||||
if (!showHhModal) return null;
|
||||
|
||||
return (
|
||||
<div className="modal-overlay active">
|
||||
<div className="modal-content">
|
||||
<div className="modal-header">
|
||||
<h2>{hhFormData.id ? 'Edit' : 'Tambah'} Data Warga</h2>
|
||||
<button className="close-btn" onClick={() => setShowHhModal(false)}>×</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<form onSubmit={handleSaveHh} style={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
|
||||
<div className="form-group">
|
||||
<label>Nama Kepala Keluarga</label>
|
||||
<input type="text" className="form-control" value={hhFormData.head_name} onChange={e => setHhFormData({...hhFormData, head_name: e.target.value})} required />
|
||||
</div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px' }}>
|
||||
<div className="form-group">
|
||||
<label>NIK</label>
|
||||
<input type="text" className="form-control" value={hhFormData.nik} onChange={e => setHhFormData({...hhFormData, nik: e.target.value})} required />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>No. KK</label>
|
||||
<input type="text" className="form-control" value={hhFormData.no_kk} onChange={e => setHhFormData({...hhFormData, no_kk: e.target.value})} required />
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Jumlah Anggota Keluarga</label>
|
||||
<input type="number" className="form-control" value={hhFormData.family_size} onChange={e => setHhFormData({...hhFormData, family_size: e.target.value})} required min="1" />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Pilih Hub Rumah Ibadah {profile?.role === 'pic' ? '(Terkunci untuk Hub Anda)' : '(Opsional)'}</label>
|
||||
<select
|
||||
className="form-control"
|
||||
value={hhFormData.assigned_hub_id || ''}
|
||||
onChange={e => setHhFormData({...hhFormData, assigned_hub_id: e.target.value || null})}
|
||||
disabled={profile?.role === 'pic'}
|
||||
>
|
||||
<option value="">-- Tidak Ada --</option>
|
||||
{hubs.map(h => (
|
||||
<option key={h.id} value={h.id}>{h.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Geotagging Photo Upload */}
|
||||
<div className="form-group" style={{ background: '#f8fafc', padding: '15px', borderRadius: '8px', border: '1px dashed #cbd5e1' }}>
|
||||
<label style={{ display: 'block', marginBottom: '10px', fontWeight: 'bold' }}><i className="fas fa-camera"></i> Bukti Foto Lokasi / Rumah</label>
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
capture="environment"
|
||||
onChange={(e) => {
|
||||
if (e.target.files && e.target.files[0]) {
|
||||
setImageFile(e.target.files[0]);
|
||||
}
|
||||
}}
|
||||
style={{ width: '100%', fontSize: '0.9rem' }}
|
||||
required={false}
|
||||
/>
|
||||
{imageFile && <p style={{ fontSize: '0.8rem', color: '#10b981', marginTop: '5px' }}>File siap diunggah: {imageFile.name}</p>}
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px' }}>
|
||||
<div className="form-group">
|
||||
<label>Latitude</label>
|
||||
<input type="text" className="form-control" value={hhFormData.lat} readOnly />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Longitude</label>
|
||||
<input type="text" className="form-control" value={hhFormData.lng} readOnly />
|
||||
</div>
|
||||
</div>
|
||||
{isEditMode && (
|
||||
<button type="submit" className="btn btn-primary" disabled={isUploading}>
|
||||
{isUploading ? 'Menyimpan...' : 'Simpan'}
|
||||
</button>
|
||||
)}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function HubFormModal({
|
||||
showHubModal,
|
||||
setShowHubModal,
|
||||
hubFormData,
|
||||
setHubFormData,
|
||||
handleSaveHub,
|
||||
isEditMode
|
||||
}) {
|
||||
if (!showHubModal) return null;
|
||||
|
||||
return (
|
||||
<div className="modal-overlay active">
|
||||
<div className="modal-content">
|
||||
<div className="modal-header">
|
||||
<h2>{hubFormData.id ? 'Edit' : 'Tambah'} Rumah Ibadah</h2>
|
||||
<button className="close-btn" onClick={() => setShowHubModal(false)}>×</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<form onSubmit={handleSaveHub} style={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
|
||||
<div className="form-group">
|
||||
<label>Nama Rumah Ibadah</label>
|
||||
<input type="text" className="form-control" value={hubFormData.name} onChange={e => setHubFormData({...hubFormData, name: e.target.value})} required />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Tipe</label>
|
||||
<select className="form-control" value={hubFormData.type} onChange={e => setHubFormData({...hubFormData, type: e.target.value})}>
|
||||
<option value="Mosque">Masjid</option>
|
||||
<option value="Church">Gereja</option>
|
||||
<option value="Temple">Pura</option>
|
||||
<option value="Vihara">Vihara</option>
|
||||
<option value="Other">Lainnya</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Radius Jangkauan (Meter)</label>
|
||||
<input type="number" className="form-control" value={hubFormData.radius_meter} onChange={e => setHubFormData({...hubFormData, radius_meter: e.target.value})} required />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Nomor Kontak PIC</label>
|
||||
<input type="text" className="form-control" value={hubFormData.pic_phone || ''} onChange={e => setHubFormData({...hubFormData, pic_phone: e.target.value})} placeholder="Contoh: 08123456789" />
|
||||
</div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px' }}>
|
||||
<div className="form-group">
|
||||
<label>Latitude</label>
|
||||
<input type="text" className="form-control" value={hubFormData.lat} readOnly />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Longitude</label>
|
||||
<input type="text" className="form-control" value={hubFormData.lng} readOnly />
|
||||
</div>
|
||||
</div>
|
||||
{isEditMode && (
|
||||
<button type="submit" className="btn btn-primary" style={{ marginTop: '10px' }}>
|
||||
<i className="fas fa-save"></i> Simpan
|
||||
</button>
|
||||
)}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function PicListModal({
|
||||
showPicListModal,
|
||||
setShowPicListModal,
|
||||
myHub,
|
||||
usersList
|
||||
}) {
|
||||
if (!showPicListModal || !myHub) return null;
|
||||
|
||||
// Filter PICs assigned to this hub
|
||||
const assignedPics = usersList.filter(u => u.role === 'pic' && u.id === myHub.pic_id);
|
||||
|
||||
return (
|
||||
<div className="modal-overlay active">
|
||||
<div className="modal-content" style={{ maxWidth: '500px', width: '90%' }}>
|
||||
<div className="modal-header">
|
||||
<h2>
|
||||
<i className="fas fa-id-card text-primary" style={{ marginRight: '8px' }}></i>
|
||||
Daftar PIC Lapangan
|
||||
</h2>
|
||||
<button className="close-btn" onClick={() => setShowPicListModal(false)}>×</button>
|
||||
</div>
|
||||
<div className="modal-body" style={{ display: 'flex', flexDirection: 'column', gap: '15px', padding: '10px 0' }}>
|
||||
<p style={{ margin: 0, fontSize: '0.9rem', color: 'var(--text-muted)' }}>
|
||||
Berikut adalah akun PIC / Surveyor Lapangan yang ditugaskan untuk mengelola dan menyurvei wilayah jangkauan <strong>{myHub.name}</strong>.
|
||||
</p>
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '12px', marginTop: '10px' }}>
|
||||
{assignedPics.length === 0 ? (
|
||||
<div style={{ textAlign: 'center', padding: '20px', background: '#f8fafc', borderRadius: '8px', color: '#94a3b8', border: '1px dashed #cbd5e1' }}>
|
||||
<i className="fas fa-user-slash" style={{ fontSize: '1.5rem', marginBottom: '8px', display: 'block' }}></i>
|
||||
Belum ada akun PIC yang ditugaskan ke Hub ini.
|
||||
</div>
|
||||
) : (
|
||||
assignedPics.map(pic => (
|
||||
<div key={pic.id} style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '15px',
|
||||
padding: '15px',
|
||||
background: 'rgba(59, 130, 246, 0.05)',
|
||||
border: '1px solid rgba(59, 130, 246, 0.15)',
|
||||
borderRadius: '8px'
|
||||
}}>
|
||||
<div style={{
|
||||
width: '45px',
|
||||
height: '45px',
|
||||
borderRadius: '50%',
|
||||
background: 'var(--primary)',
|
||||
color: 'white',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontWeight: 'bold',
|
||||
fontSize: '1.1rem'
|
||||
}}>
|
||||
{pic.full_name ? pic.full_name.charAt(0).toUpperCase() : 'P'}
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<h4 style={{ margin: '0 0 4px 0', fontSize: '0.95rem', fontWeight: 'bold', color: 'var(--text-main)' }}>{pic.full_name}</h4>
|
||||
<p style={{ margin: 0, fontSize: '0.8rem', color: '#64748b' }}><i className="fas fa-envelope" style={{ marginRight: '6px' }}></i>{pic.email}</p>
|
||||
</div>
|
||||
<span style={{
|
||||
padding: '4px 8px',
|
||||
borderRadius: '4px',
|
||||
fontSize: '0.7rem',
|
||||
fontWeight: 'bold',
|
||||
background: '#dbeafe',
|
||||
color: '#3b82f6',
|
||||
textTransform: 'uppercase'
|
||||
}}>
|
||||
PIC Surveyor
|
||||
</span>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,165 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function ProfileModal({
|
||||
showProfileModal,
|
||||
setShowProfileModal,
|
||||
profile,
|
||||
user,
|
||||
handleLogout,
|
||||
isLoggingOut
|
||||
}) {
|
||||
if (!showProfileModal) return null;
|
||||
|
||||
const getRoleBadge = (role) => {
|
||||
switch (role) {
|
||||
case 'super_admin':
|
||||
return {
|
||||
label: 'Super Admin',
|
||||
bg: '#fee2e2',
|
||||
color: '#ef4444',
|
||||
icon: 'fa-shield-halved'
|
||||
};
|
||||
case 'pic':
|
||||
return {
|
||||
label: 'Surveyor / PIC Lapangan',
|
||||
bg: '#dbeafe',
|
||||
color: '#3b82f6',
|
||||
icon: 'fa-route'
|
||||
};
|
||||
case 'hub_head':
|
||||
return {
|
||||
label: 'Ketua Pengurus Rumah Ibadah',
|
||||
bg: '#fef3c7',
|
||||
color: '#d97706',
|
||||
icon: 'fa-mosque'
|
||||
};
|
||||
default:
|
||||
return {
|
||||
label: 'Pengguna',
|
||||
bg: '#f1f5f9',
|
||||
color: '#475569',
|
||||
icon: 'fa-user'
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const badge = getRoleBadge(profile?.role);
|
||||
const initials = profile?.full_name ? profile.full_name.substring(0, 2).toUpperCase() : 'US';
|
||||
|
||||
return (
|
||||
<div className="modal-overlay active" onClick={() => setShowProfileModal(false)}>
|
||||
<div
|
||||
className="modal-content"
|
||||
style={{ maxWidth: '400px', width: '90%', textAlign: 'center', padding: '30px' }}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="modal-header" style={{ marginBottom: '10px', justifyContent: 'center', position: 'relative' }}>
|
||||
<h2 style={{ fontSize: '1.3rem', margin: 0, fontWeight: '700' }}>Profil Pengguna</h2>
|
||||
<button
|
||||
className="close-btn"
|
||||
onClick={() => setShowProfileModal(false)}
|
||||
style={{ position: 'absolute', right: 0, top: '50%', transform: 'translateY(-50%)' }}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="modal-body" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '20px', padding: '10px 0 0 0' }}>
|
||||
{/* Avatar Area */}
|
||||
<div style={{
|
||||
background: 'linear-gradient(135deg, var(--primary), #6366f1)',
|
||||
color: 'white',
|
||||
width: '80px',
|
||||
height: '80px',
|
||||
borderRadius: '50%',
|
||||
fontSize: '2rem',
|
||||
fontWeight: 'bold',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
boxShadow: '0 10px 25px rgba(59, 130, 246, 0.4)',
|
||||
marginBottom: '5px'
|
||||
}}>
|
||||
{initials}
|
||||
</div>
|
||||
|
||||
{/* User Details */}
|
||||
<div>
|
||||
<h3 style={{ margin: '0 0 4px 0', fontSize: '1.25rem', fontWeight: '700', color: '#1e293b' }}>
|
||||
{profile?.full_name || 'Pengguna Sinergi Umat'}
|
||||
</h3>
|
||||
<p style={{ margin: '0 0 12px 0', color: '#64748b', fontSize: '0.9rem' }}>
|
||||
{user?.email}
|
||||
</p>
|
||||
|
||||
{/* Role Badge */}
|
||||
<span style={{
|
||||
padding: '6px 14px',
|
||||
borderRadius: '20px',
|
||||
fontSize: '0.8rem',
|
||||
fontWeight: '700',
|
||||
background: badge.bg,
|
||||
color: badge.color,
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: '6px',
|
||||
boxShadow: `0 2px 8px ${badge.bg}`
|
||||
}}>
|
||||
<i className={`fas ${badge.icon}`}></i> {badge.label}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<hr style={{ width: '100%', border: '0', borderTop: '1px solid #e2e8f0', margin: '5px 0' }} />
|
||||
|
||||
{/* Actions */}
|
||||
<div style={{ width: '100%', display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
disabled={isLoggingOut}
|
||||
className="btn"
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, #ef4444, #dc2626)',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
padding: '12px',
|
||||
borderRadius: '12px',
|
||||
fontWeight: '600',
|
||||
fontSize: '0.95rem',
|
||||
cursor: 'pointer',
|
||||
boxShadow: '0 4px 12px rgba(239, 68, 68, 0.3)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: '8px',
|
||||
transition: 'all 0.2s'
|
||||
}}
|
||||
onMouseOver={(e) => e.currentTarget.style.transform = 'translateY(-2px)'}
|
||||
onMouseOut={(e) => e.currentTarget.style.transform = 'translateY(0)'}
|
||||
>
|
||||
<i className="fas fa-sign-out-alt"></i> {isLoggingOut ? 'Keluar...' : 'Keluar dari Akun (Logout)'}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowProfileModal(false)}
|
||||
className="btn btn-outline"
|
||||
style={{
|
||||
background: 'rgba(0,0,0,0.05)',
|
||||
color: '#475569',
|
||||
border: '1px solid rgba(0,0,0,0.1)',
|
||||
padding: '12px',
|
||||
borderRadius: '12px',
|
||||
fontWeight: '500',
|
||||
fontSize: '0.95rem',
|
||||
cursor: 'pointer',
|
||||
transition: 'background 0.2s'
|
||||
}}
|
||||
onMouseOver={(e) => e.currentTarget.style.background = 'rgba(0,0,0,0.1)'}
|
||||
onMouseOut={(e) => e.currentTarget.style.background = 'rgba(0,0,0,0.05)'}
|
||||
>
|
||||
Kembali ke Dasbor
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,410 @@
|
||||
import React, { useState, useRef } from 'react';
|
||||
|
||||
// Pure JavaScript GPS EXIF metadata reader
|
||||
function getEXIFGPS(arrayBuffer) {
|
||||
const dataView = new DataView(arrayBuffer);
|
||||
if (dataView.getUint16(0, false) !== 0xFFD8) {
|
||||
return null; // Not a JPEG
|
||||
}
|
||||
let offset = 2;
|
||||
const length = dataView.byteLength;
|
||||
let exifOffset = null;
|
||||
|
||||
while (offset < length) {
|
||||
const marker = dataView.getUint16(offset, false);
|
||||
offset += 2;
|
||||
if (marker === 0xFFE1) { // APP1 segment containing EXIF
|
||||
const segmentLength = dataView.getUint16(offset, false);
|
||||
if (dataView.getUint32(offset + 2, false) === 0x45786966) { // "Exif"
|
||||
exifOffset = offset + 8;
|
||||
break;
|
||||
}
|
||||
offset += segmentLength;
|
||||
} else if ((marker & 0xFF00) === 0xFF00) {
|
||||
const segmentLength = dataView.getUint16(offset, false);
|
||||
offset += segmentLength;
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (!exifOffset) return null;
|
||||
|
||||
const littleEndian = dataView.getUint16(exifOffset, false) === 0x4949;
|
||||
const ifd0Offset = dataView.getUint32(exifOffset + 4, littleEndian);
|
||||
|
||||
function parseIFD(offset, tiffOffset) {
|
||||
try {
|
||||
const entriesCount = dataView.getUint16(tiffOffset + offset, littleEndian);
|
||||
const tags = {};
|
||||
|
||||
for (let i = 0; i < entriesCount; i++) {
|
||||
const entryOffset = tiffOffset + offset + 2 + i * 12;
|
||||
if (entryOffset + 12 > dataView.byteLength) break;
|
||||
const tag = dataView.getUint16(entryOffset, littleEndian);
|
||||
const type = dataView.getUint16(entryOffset + 2, littleEndian);
|
||||
const count = dataView.getUint32(entryOffset + 4, littleEndian);
|
||||
const valueOffset = dataView.getUint32(entryOffset + 8, littleEndian);
|
||||
|
||||
tags[tag] = { type, count, offset: valueOffset, rawOffset: entryOffset + 8 };
|
||||
}
|
||||
return tags;
|
||||
} catch (e) {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
const ifd0 = parseIFD(ifd0Offset, exifOffset);
|
||||
if (ifd0[0x8825]) { // GPS IFD Pointer
|
||||
const gpsOffset = ifd0[0x8825].offset;
|
||||
const gpsIFD = parseIFD(gpsOffset, exifOffset);
|
||||
|
||||
const readRational = (valueOffset) => {
|
||||
const targetOffset = exifOffset + valueOffset;
|
||||
if (targetOffset + 8 > dataView.byteLength) return 0;
|
||||
const num = dataView.getUint32(targetOffset, littleEndian);
|
||||
const den = dataView.getUint32(targetOffset + 4, littleEndian);
|
||||
return den === 0 ? 0 : num / den;
|
||||
};
|
||||
|
||||
const readCoordinate = (tag) => {
|
||||
if (!gpsIFD[tag]) return null;
|
||||
const offset = gpsIFD[tag].offset;
|
||||
const deg = readRational(offset);
|
||||
const min = readRational(offset + 8);
|
||||
const sec = readRational(offset + 16);
|
||||
return deg + min / 60 + sec / 3600;
|
||||
};
|
||||
|
||||
let lat = readCoordinate(2); // GPSLatitude
|
||||
let lng = readCoordinate(4); // GPSLongitude
|
||||
|
||||
if (lat !== null && lng !== null) {
|
||||
if (gpsIFD[1]) { // GPSLatitudeRef
|
||||
const refOffset = gpsIFD[1].rawOffset;
|
||||
const refChar = String.fromCharCode(dataView.getUint8(refOffset));
|
||||
if (refChar === 'S') lat = -lat;
|
||||
}
|
||||
if (gpsIFD[3]) { // GPSLongitudeRef
|
||||
const refOffset = gpsIFD[3].rawOffset;
|
||||
const refChar = String.fromCharCode(dataView.getUint8(refOffset));
|
||||
if (refChar === 'W') lng = -lng;
|
||||
}
|
||||
return { lat, lng };
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('GPS parsing error:', err);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
export default function SurveyMethodModal({
|
||||
showSurveyModal,
|
||||
setShowSurveyModal,
|
||||
setPlacementMode,
|
||||
setShowToast,
|
||||
hubs,
|
||||
mapInstance,
|
||||
setHhFormData,
|
||||
setImageFile,
|
||||
setShowHhModal,
|
||||
showToastNotification,
|
||||
profile
|
||||
}) {
|
||||
const [optionMode, setOptionMode] = useState(null); // 'upload' or null
|
||||
const [gpsData, setGpsData] = useState(null);
|
||||
const [errorMsg, setErrorMsg] = useState(null);
|
||||
const [tempFile, setTempFile] = useState(null);
|
||||
const fileInputRef = useRef(null);
|
||||
|
||||
if (!showSurveyModal) return null;
|
||||
|
||||
const resetSurveyModal = () => {
|
||||
setOptionMode(null);
|
||||
setGpsData(null);
|
||||
setErrorMsg(null);
|
||||
setTempFile(null);
|
||||
};
|
||||
|
||||
const handleSelectMapOption = () => {
|
||||
setPlacementMode('household');
|
||||
setShowToast(true);
|
||||
setShowSurveyModal(false);
|
||||
resetSurveyModal();
|
||||
};
|
||||
|
||||
const handleFileChange = (e) => {
|
||||
const file = e.target.files[0];
|
||||
if (!file) return;
|
||||
|
||||
setErrorMsg(null);
|
||||
setGpsData(null);
|
||||
setTempFile(null);
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = (event) => {
|
||||
const buffer = event.target.result;
|
||||
const coords = getEXIFGPS(buffer);
|
||||
|
||||
if (coords) {
|
||||
setGpsData(coords);
|
||||
setTempFile(file);
|
||||
showToastNotification('Metadata lokasi GPS berhasil ditarik!');
|
||||
} else {
|
||||
setErrorMsg('Foto ini tidak memiliki metadata lokasi GPS (geotag). Silakan ambil foto baru menggunakan kamera ponsel dengan mengaktifkan GPS / Lokasi, atau gunakan opsi "Tentukan Posisi Melalui Peta".');
|
||||
}
|
||||
};
|
||||
reader.onerror = () => {
|
||||
setErrorMsg('Gagal membaca berkas gambar.');
|
||||
};
|
||||
reader.readAsArrayBuffer(file);
|
||||
};
|
||||
|
||||
const handleContinueSurvey = () => {
|
||||
if (!gpsData || !tempFile) return;
|
||||
|
||||
// Spatially calculate closest hub using Haversine / Leaflet map distance
|
||||
let closestHub = null;
|
||||
let minDistance = Infinity;
|
||||
|
||||
hubs.forEach(hub => {
|
||||
if (mapInstance && mapInstance.current) {
|
||||
const dist = mapInstance.current.distance([gpsData.lat, gpsData.lng], [hub.lat, hub.lng]);
|
||||
const hubRadius = parseInt(hub.radius) || 500;
|
||||
if (dist <= hubRadius && dist < minDistance) {
|
||||
minDistance = dist;
|
||||
closestHub = hub;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// For non-admin, if they use photo geotag, they can add anywhere.
|
||||
// If it's outside their own hub's radius, we assign it to their hub anyway but flag it with manual override.
|
||||
let finalAssignedHubId = closestHub ? closestHub.id : null;
|
||||
let forceManualOverride = false;
|
||||
|
||||
if (profile?.role !== 'super_admin') {
|
||||
const myHub = hubs.find(h => h.pic_id === profile?.id || h.head_id === profile?.id);
|
||||
if (myHub) {
|
||||
const isInsideRadius = closestHub && closestHub.id === myHub.id;
|
||||
if (!isInsideRadius) {
|
||||
// Outside their hub's radius! Force assignment to myHub and flag with manual override
|
||||
finalAssignedHubId = myHub.id;
|
||||
forceManualOverride = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setHhFormData({
|
||||
id: '',
|
||||
head_name: '',
|
||||
nik: '',
|
||||
no_kk: '',
|
||||
family_size: 1,
|
||||
status: 'Pending',
|
||||
photo_url: '',
|
||||
lat: gpsData.lat,
|
||||
lng: gpsData.lng,
|
||||
assigned_hub_id: finalAssignedHubId,
|
||||
manual_override_assigned_hub: forceManualOverride
|
||||
});
|
||||
|
||||
setImageFile(tempFile);
|
||||
setShowSurveyModal(false);
|
||||
setShowHhModal(true);
|
||||
resetSurveyModal();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="modal-overlay active" onClick={() => { setShowSurveyModal(false); resetSurveyModal(); }}>
|
||||
<div
|
||||
className="modal-content"
|
||||
style={{ maxWidth: '500px', width: '90%', padding: '24px' }}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="modal-header">
|
||||
<h2><i className="fas fa-house-medical text-primary"></i> Pendataan KK Baru</h2>
|
||||
<button className="close-btn" onClick={() => { setShowSurveyModal(false); resetSurveyModal(); }}>×</button>
|
||||
</div>
|
||||
|
||||
<div className="modal-body" style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
|
||||
|
||||
{optionMode === null ? (
|
||||
<>
|
||||
<p style={{ margin: '0 0 10px 0', color: '#64748b', fontSize: '0.95rem', lineHeight: '1.5' }}>
|
||||
Silakan pilih salah satu opsi di bawah untuk menentukan lokasi koordinat rumah warga yang didata:
|
||||
</p>
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
|
||||
{/* Option 1: Map click */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSelectMapOption}
|
||||
style={{
|
||||
background: 'rgba(59, 130, 246, 0.08)',
|
||||
border: '1px solid rgba(59, 130, 246, 0.25)',
|
||||
borderRadius: '12px',
|
||||
padding: '16px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '16px',
|
||||
cursor: 'pointer',
|
||||
textAlign: 'left',
|
||||
transition: 'all 0.2s',
|
||||
width: '100%',
|
||||
color: '#1e293b'
|
||||
}}
|
||||
onMouseOver={(e) => {
|
||||
e.currentTarget.style.background = 'rgba(59, 130, 246, 0.15)';
|
||||
e.currentTarget.style.transform = 'translateY(-2px)';
|
||||
}}
|
||||
onMouseOut={(e) => {
|
||||
e.currentTarget.style.background = 'rgba(59, 130, 246, 0.08)';
|
||||
e.currentTarget.style.transform = 'translateY(0)';
|
||||
}}
|
||||
>
|
||||
<div style={{
|
||||
background: 'var(--primary, #3b82f6)',
|
||||
color: 'white',
|
||||
width: '40px', height: '40px', borderRadius: '50%',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
fontSize: '1.25rem', flexShrink: 0
|
||||
}}>
|
||||
<i className="fas fa-map-location-dot"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 style={{ margin: '0 0 4px 0', fontSize: '0.95rem', fontWeight: '700' }}>Tentukan Posisi Melalui Peta</h4>
|
||||
<p style={{ margin: 0, fontSize: '0.8rem', color: '#64748b' }}>Pilih lokasi rumah warga secara manual dengan menunjuknya langsung di peta interaktif.</p>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* Option 2: Geotagging upload */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOptionMode('upload')}
|
||||
style={{
|
||||
background: 'rgba(16, 185, 129, 0.08)',
|
||||
border: '1px solid rgba(16, 185, 129, 0.25)',
|
||||
borderRadius: '12px',
|
||||
padding: '16px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '16px',
|
||||
cursor: 'pointer',
|
||||
textAlign: 'left',
|
||||
transition: 'all 0.2s',
|
||||
width: '100%',
|
||||
color: '#1e293b'
|
||||
}}
|
||||
onMouseOver={(e) => {
|
||||
e.currentTarget.style.background = 'rgba(16, 185, 129, 0.15)';
|
||||
e.currentTarget.style.transform = 'translateY(-2px)';
|
||||
}}
|
||||
onMouseOut={(e) => {
|
||||
e.currentTarget.style.background = 'rgba(16, 185, 129, 0.08)';
|
||||
e.currentTarget.style.transform = 'translateY(0)';
|
||||
}}
|
||||
>
|
||||
<div style={{
|
||||
background: 'var(--success, #10b981)',
|
||||
color: 'white',
|
||||
width: '40px', height: '40px', borderRadius: '50%',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
fontSize: '1.25rem', flexShrink: 0
|
||||
}}>
|
||||
<i className="fas fa-camera-retro"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 style={{ margin: '0 0 4px 0', fontSize: '0.95rem', fontWeight: '700' }}>Unggah Foto dengan Geotag</h4>
|
||||
<p style={{ margin: 0, fontSize: '0.8rem', color: '#64748b' }}>Ekstraksi koordinat otomatis dari metadata GPS foto rumah warga yang diambil langsung di lapangan.</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOptionMode(null)}
|
||||
style={{ background: 'none', border: 'none', color: '#64748b', cursor: 'pointer', fontSize: '0.9rem' }}
|
||||
>
|
||||
<i className="fas fa-arrow-left"></i> Kembali
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<h4 style={{ fontSize: '0.95rem', fontWeight: '600', margin: 0 }}>Metode Unggah Foto Ber-Geotag</h4>
|
||||
<p style={{ margin: 0, color: '#64748b', fontSize: '0.85rem', lineHeight: '1.4' }}>
|
||||
Unggah berkas foto JPG/JPEG rumah warga yang diambil dari kamera ber-GPS aktif. Sistem akan menarik metadata lokasi secara otomatis.
|
||||
</p>
|
||||
|
||||
<div
|
||||
style={{
|
||||
border: '2px dashed #cbd5e1',
|
||||
borderRadius: '12px',
|
||||
padding: '24px 16px',
|
||||
textAlign: 'center',
|
||||
background: 'rgba(0,0,0,0.02)',
|
||||
cursor: 'pointer',
|
||||
transition: 'border-color 0.2s'
|
||||
}}
|
||||
onClick={() => fileInputRef.current && fileInputRef.current.click()}
|
||||
onMouseOver={(e) => e.currentTarget.style.borderColor = 'var(--success, #10b981)'}
|
||||
onMouseOut={(e) => e.currentTarget.style.borderColor = '#cbd5e1'}
|
||||
>
|
||||
<i className="fas fa-cloud-arrow-up" style={{ fontSize: '2.5rem', color: '#94a3b8', marginBottom: '10px', display: 'block' }}></i>
|
||||
<span style={{ fontSize: '0.9rem', color: '#475569', fontWeight: '500' }}>
|
||||
{tempFile ? tempFile.name : 'Klik untuk Pilih Foto Rumah'}
|
||||
</span>
|
||||
<input
|
||||
type="file"
|
||||
ref={fileInputRef}
|
||||
accept="image/jpeg,image/jpg"
|
||||
onChange={handleFileChange}
|
||||
style={{ display: 'none' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{errorMsg && (
|
||||
<div style={{ background: '#fee2e2', color: '#ef4444', padding: '12px', borderRadius: '8px', fontSize: '0.8rem', lineHeight: '1.4', fontWeight: '500' }}>
|
||||
<i className="fas fa-exclamation-triangle" style={{ marginRight: '6px' }}></i> {errorMsg}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{gpsData && (
|
||||
<div style={{ background: '#d1fae5', color: '#065f46', padding: '12px', borderRadius: '8px', fontSize: '0.85rem', fontWeight: '500' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '6px', marginBottom: '4px' }}>
|
||||
<i className="fas fa-circle-check" style={{ color: '#10b981' }}></i>
|
||||
<strong>Metadata Lokasi Terbaca!</strong>
|
||||
</div>
|
||||
<div style={{ fontSize: '0.75rem', fontFamily: 'monospace', marginTop: '4px', opacity: 0.9 }}>
|
||||
Lintang: {gpsData.lat.toFixed(6)} | Bujur: {gpsData.lng.toFixed(6)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div style={{ display: 'flex', gap: '12px', marginTop: '10px' }}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleContinueSurvey}
|
||||
disabled={!gpsData}
|
||||
className="btn btn-success"
|
||||
style={{
|
||||
flex: 1, padding: '12px', borderRadius: '10px',
|
||||
fontWeight: '600', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px',
|
||||
opacity: gpsData ? 1 : 0.5, cursor: gpsData ? 'pointer' : 'not-allowed'
|
||||
}}
|
||||
>
|
||||
<i className="fas fa-arrow-right"></i> Lanjutkan Pengisian Data
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,116 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function UserProvisioningModal({
|
||||
showUserModal,
|
||||
setShowUserModal,
|
||||
usersList,
|
||||
profile,
|
||||
userFormData,
|
||||
setUserFormData,
|
||||
handleCreateUser,
|
||||
isSubmittingUser,
|
||||
handleDeleteUser,
|
||||
hubs
|
||||
}) {
|
||||
if (!showUserModal) return null;
|
||||
|
||||
return (
|
||||
<div className="modal-overlay active">
|
||||
<div className="modal-content" style={{ maxWidth: '900px', width: '90%' }}>
|
||||
<div className="modal-header">
|
||||
<h2><i className="fas fa-users-cog text-primary"></i> Manajemen Pengguna</h2>
|
||||
<button className="close-btn" onClick={() => setShowUserModal(false)}>×</button>
|
||||
</div>
|
||||
<div className="modal-body" style={{ display: 'flex', flexDirection: 'column', gap: '20px', maxHeight: '70vh', overflowY: 'auto' }}>
|
||||
|
||||
{/* Form Tambah Pengguna */}
|
||||
<div style={{ background: '#f8fafc', padding: '20px', borderRadius: '8px', border: '1px solid #e2e8f0' }}>
|
||||
<h3 style={{ margin: '0 0 15px 0', fontSize: '1.1rem' }}>Tambah Pengguna Baru</h3>
|
||||
<form onSubmit={handleCreateUser} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '15px' }}>
|
||||
<div className="form-group">
|
||||
<label>Email</label>
|
||||
<input type="email" className="form-control" value={userFormData.email} onChange={(e) => setUserFormData({...userFormData, email: e.target.value})} required />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Kata Sandi Sementara</label>
|
||||
<input type="text" className="form-control" value={userFormData.password} onChange={(e) => setUserFormData({...userFormData, password: e.target.value})} required minLength="6" />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Nama Lengkap</label>
|
||||
<input type="text" className="form-control" value={userFormData.full_name} onChange={(e) => setUserFormData({...userFormData, full_name: e.target.value})} required />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Peran (Role)</label>
|
||||
<select className="form-control" value={userFormData.role} onChange={(e) => setUserFormData({...userFormData, role: e.target.value, hub_id: ''})} required>
|
||||
<option value="pic">Surveyor / PIC Lapangan</option>
|
||||
<option value="hub_head">Ketua Pengurus Rumah Ibadah</option>
|
||||
<option value="super_admin">Super Admin</option>
|
||||
</select>
|
||||
</div>
|
||||
{(userFormData.role === 'pic' || userFormData.role === 'hub_head') && (
|
||||
<div className="form-group" style={{ gridColumn: '1 / -1' }}>
|
||||
<label>Tugaskan ke Rumah Ibadah (Hub)</label>
|
||||
<select className="form-control" value={userFormData.hub_id || ''} onChange={(e) => setUserFormData({...userFormData, hub_id: e.target.value})} required>
|
||||
<option value="">Pilih Rumah Ibadah</option>
|
||||
{hubs.map(h => (
|
||||
<option key={h.id} value={h.id}>{h.name} ({h.type === 'Mosque' ? 'Masjid' : h.type === 'Church' ? 'Gereja' : h.type === 'Temple' ? 'Pura' : h.type === 'Vihara' ? 'Vihara' : 'Lainnya'})</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
<div style={{ gridColumn: '1 / -1', display: 'flex', justifyContent: 'flex-end', marginTop: '10px' }}>
|
||||
<button type="submit" className="btn btn-primary" disabled={isSubmittingUser}>
|
||||
<i className="fas fa-plus"></i> {isSubmittingUser ? 'Menyimpan...' : 'Buat Akun'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Tabel Pengguna */}
|
||||
<div>
|
||||
<h3 style={{ margin: '0 0 15px 0', fontSize: '1.1rem' }}>Daftar Pengguna</h3>
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.9rem' }}>
|
||||
<thead>
|
||||
<tr style={{ background: '#f1f5f9', textAlign: 'left' }}>
|
||||
<th style={{ padding: '10px', borderBottom: '2px solid #e2e8f0' }}>Nama</th>
|
||||
<th style={{ padding: '10px', borderBottom: '2px solid #e2e8f0' }}>Email</th>
|
||||
<th style={{ padding: '10px', borderBottom: '2px solid #e2e8f0' }}>Role</th>
|
||||
<th style={{ padding: '10px', borderBottom: '2px solid #e2e8f0', textAlign: 'right' }}>Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{usersList.length === 0 ? (
|
||||
<tr><td colSpan="4" style={{ textAlign: 'center', padding: '20px', color: '#64748b' }}>Memuat data pengguna...</td></tr>
|
||||
) : (
|
||||
usersList.map(u => (
|
||||
<tr key={u.id} style={{ borderBottom: '1px solid #e2e8f0' }}>
|
||||
<td style={{ padding: '10px', fontWeight: '500' }}>{u.full_name}</td>
|
||||
<td style={{ padding: '10px', color: '#475569' }}>{u.email}</td>
|
||||
<td style={{ padding: '10px' }}>
|
||||
<span style={{
|
||||
padding: '4px 8px', borderRadius: '4px', fontSize: '0.8rem', fontWeight: 'bold',
|
||||
background: u.role === 'super_admin' ? '#fee2e2' : u.role === 'pic' ? '#dbeafe' : '#fef3c7',
|
||||
color: u.role === 'super_admin' ? '#ef4444' : u.role === 'pic' ? '#3b82f6' : '#d97706'
|
||||
}}>
|
||||
{u.role.toUpperCase()}
|
||||
</span>
|
||||
</td>
|
||||
<td style={{ padding: '10px', textAlign: 'right' }}>
|
||||
{u.id !== profile?.id && (
|
||||
<button onClick={() => handleDeleteUser(u.id)} className="btn btn-outline" style={{ padding: '4px 8px', fontSize: '0.8rem', color: '#ef4444', borderColor: '#ef4444' }}>
|
||||
<i className="fas fa-trash"></i> Hapus
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,224 @@
|
||||
/**
|
||||
* A safe, modular Leaflet Heatmap Layer factory that does NOT mutate the
|
||||
* read-only/frozen Leaflet ES module (L) instance.
|
||||
*
|
||||
* Usage:
|
||||
* import { createHeatLayer } from '@/lib/initLeafletHeat';
|
||||
* ...
|
||||
* heatLayersRef.current = createHeatLayer(L, points, options).addTo(map);
|
||||
*/
|
||||
|
||||
// ─── simpleheat (inlined from mourner/simpleheat) ───────────────────────────
|
||||
function simpleheat(canvas) {
|
||||
if (!(this instanceof simpleheat)) return new simpleheat(canvas);
|
||||
this._canvas = canvas = typeof canvas === 'string'
|
||||
? document.getElementById(canvas)
|
||||
: canvas;
|
||||
this._ctx = canvas.getContext('2d');
|
||||
this._width = canvas.width;
|
||||
this._height = canvas.height;
|
||||
this._max = 1;
|
||||
this.clear();
|
||||
}
|
||||
|
||||
simpleheat.prototype = {
|
||||
defaultRadius: 25,
|
||||
defaultGradient: { 0.4: 'blue', 0.6: 'cyan', 0.7: 'lime', 0.8: 'yellow', 1: 'red' },
|
||||
|
||||
data(data) { this._data = data; return this; },
|
||||
max(max) { this._max = max; return this; },
|
||||
add(point) { this._data.push(point); return this; },
|
||||
clear() { this._data = []; return this; },
|
||||
|
||||
radius(r, blur) {
|
||||
blur = blur || 15;
|
||||
const circle = this._circle = document.createElement('canvas');
|
||||
const ctx = circle.getContext('2d');
|
||||
const e = this._r = r + blur;
|
||||
circle.width = circle.height = 2 * e;
|
||||
ctx.shadowOffsetX = ctx.shadowOffsetY = 200;
|
||||
ctx.shadowBlur = blur;
|
||||
ctx.shadowColor = 'black';
|
||||
ctx.beginPath();
|
||||
ctx.arc(e - 200, e - 200, r, 0, Math.PI * 2, true);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
return this;
|
||||
},
|
||||
|
||||
gradient(grad) {
|
||||
const canvas = document.createElement('canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const grad2 = ctx.createLinearGradient(0, 0, 0, 256);
|
||||
canvas.width = 1;
|
||||
canvas.height = 256;
|
||||
for (const i in grad) grad2.addColorStop(+i, grad[i]);
|
||||
ctx.fillStyle = grad2;
|
||||
ctx.fillRect(0, 0, 1, 256);
|
||||
this._grad = ctx.getImageData(0, 0, 1, 256).data;
|
||||
return this;
|
||||
},
|
||||
|
||||
draw(minOpacity) {
|
||||
if (!this._circle) this.radius(this.defaultRadius);
|
||||
if (!this._grad) this.gradient(this.defaultGradient);
|
||||
const ctx = this._ctx;
|
||||
ctx.clearRect(0, 0, this._width, this._height);
|
||||
for (let i = 0, len = this._data.length; i < len; i++) {
|
||||
const p = this._data[i];
|
||||
ctx.globalAlpha = Math.max(p[2] / this._max, minOpacity || 0.05);
|
||||
ctx.drawImage(this._circle, p[0] - this._r, p[1] - this._r);
|
||||
}
|
||||
const img = ctx.getImageData(0, 0, this._width, this._height);
|
||||
this._colorize(img.data, this._grad);
|
||||
ctx.putImageData(img, 0, 0);
|
||||
return this;
|
||||
},
|
||||
|
||||
_colorize(pixels, grad) {
|
||||
for (let j = 3, len = pixels.length; j < len; j += 4) {
|
||||
const k = pixels[j] * 4;
|
||||
if (k) {
|
||||
pixels[j - 3] = grad[k];
|
||||
pixels[j - 2] = grad[k + 1];
|
||||
pixels[j - 1] = grad[k + 2];
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Cache the HeatLayer class once defined per L instance
|
||||
let HeatLayerClass = null;
|
||||
|
||||
export function createHeatLayer(L, latlngs, options) {
|
||||
if (!HeatLayerClass) {
|
||||
HeatLayerClass = (L.Layer ? L.Layer : L.Class).extend({
|
||||
initialize(latlngs, options) {
|
||||
this._latlngs = latlngs;
|
||||
L.setOptions(this, options);
|
||||
},
|
||||
|
||||
setLatLngs(latlngs) { this._latlngs = latlngs; return this.redraw(); },
|
||||
addLatLng(latlng) { this._latlngs.push(latlng); return this.redraw(); },
|
||||
|
||||
setOptions(options) {
|
||||
L.setOptions(this, options);
|
||||
if (this._heat) this._updateOptions();
|
||||
return this.redraw();
|
||||
},
|
||||
|
||||
redraw() {
|
||||
if (!this._heat || this._frame || this._map._animating) return this;
|
||||
this._frame = L.Util.requestAnimFrame(this._redraw, this);
|
||||
return this;
|
||||
},
|
||||
|
||||
onAdd(map) {
|
||||
this._map = map;
|
||||
if (!this._canvas) this._initCanvas();
|
||||
map.getPanes().overlayPane.appendChild(this._canvas);
|
||||
map.on('moveend', this._reset, this);
|
||||
if (map.options.zoomAnimation && L.Browser.any3d) {
|
||||
map.on('zoomanim', this._animateZoom, this);
|
||||
}
|
||||
this._reset();
|
||||
},
|
||||
|
||||
onRemove(map) {
|
||||
map.getPanes().overlayPane.removeChild(this._canvas);
|
||||
map.off('moveend', this._reset, this);
|
||||
if (map.options.zoomAnimation) {
|
||||
map.off('zoomanim', this._animateZoom, this);
|
||||
}
|
||||
},
|
||||
|
||||
addTo(map) { map.addLayer(this); return this; },
|
||||
|
||||
_initCanvas() {
|
||||
const canvas = this._canvas = L.DomUtil.create('canvas', 'leaflet-heatmap-layer leaflet-layer');
|
||||
const originProp = L.DomUtil.testProp(['transformOrigin', 'WebkitTransformOrigin', 'msTransformOrigin']);
|
||||
canvas.style[originProp] = '50% 50%';
|
||||
const size = this._map.getSize();
|
||||
canvas.width = size.x;
|
||||
canvas.height = size.y;
|
||||
const animated = this._map.options.zoomAnimation && L.Browser.any3d;
|
||||
L.DomUtil.addClass(canvas, 'leaflet-zoom-' + (animated ? 'animated' : 'hide'));
|
||||
this._heat = simpleheat(canvas);
|
||||
this._updateOptions();
|
||||
},
|
||||
|
||||
_updateOptions() {
|
||||
this._heat.radius(this.options.radius || this._heat.defaultRadius, this.options.blur);
|
||||
if (this.options.gradient) this._heat.gradient(this.options.gradient);
|
||||
if (this.options.max) this._heat.max(this.options.max);
|
||||
},
|
||||
|
||||
_reset() {
|
||||
const topLeft = this._map.containerPointToLayerPoint([0, 0]);
|
||||
L.DomUtil.setPosition(this._canvas, topLeft);
|
||||
const size = this._map.getSize();
|
||||
if (this._heat._width !== size.x) this._canvas.width = this._heat._width = size.x;
|
||||
if (this._heat._height !== size.y) this._canvas.height = this._heat._height = size.y;
|
||||
this._redraw();
|
||||
},
|
||||
|
||||
_redraw() {
|
||||
const r = this._heat._r;
|
||||
const size = this._map.getSize();
|
||||
const bounds = new L.Bounds(L.point([-r, -r]), size.add([r, r]));
|
||||
const maxVal = this.options.max == null ? 1 : this.options.max;
|
||||
const maxZoom = this.options.maxZoom == null ? this._map.getMaxZoom() : this.options.maxZoom;
|
||||
const v = 1 / Math.pow(2, Math.max(0, Math.min(maxZoom - this._map.getZoom(), 12)));
|
||||
const cellSize = r / 2;
|
||||
const panePos = this._map._getMapPanePos();
|
||||
const offsetX = panePos.x % cellSize;
|
||||
const offsetY = panePos.y % cellSize;
|
||||
const grid = [];
|
||||
const points = [];
|
||||
|
||||
for (let i = 0, len = this._latlngs.length; i < len; i++) {
|
||||
const p = this._map.latLngToContainerPoint(this._latlngs[i]);
|
||||
if (!bounds.contains(p)) continue;
|
||||
const x = Math.floor((p.x - offsetX) / cellSize) + 2;
|
||||
const y = Math.floor((p.y - offsetY) / cellSize) + 2;
|
||||
const alt = this._latlngs[i].alt != null ? this._latlngs[i].alt
|
||||
: this._latlngs[i][2] != null ? +this._latlngs[i][2]
|
||||
: 1;
|
||||
const w = alt * v;
|
||||
grid[y] = grid[y] || [];
|
||||
const cell = grid[y][x];
|
||||
if (cell) {
|
||||
cell[0] = (cell[0] * cell[2] + p.x * w) / (cell[2] + w);
|
||||
cell[1] = (cell[1] * cell[2] + p.y * w) / (cell[2] + w);
|
||||
cell[2] += w;
|
||||
} else {
|
||||
grid[y][x] = [p.x, p.y, w];
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = 0, len = grid.length; i < len; i++) {
|
||||
if (!grid[i]) continue;
|
||||
for (let j = 0, jlen = grid[i].length; j < jlen; j++) {
|
||||
const cell = grid[i][j];
|
||||
if (cell) points.push([Math.round(cell[0]), Math.round(cell[1]), Math.min(cell[2], maxVal)]);
|
||||
}
|
||||
}
|
||||
|
||||
this._heat.data(points).draw(this.options.minOpacity);
|
||||
this._frame = null;
|
||||
},
|
||||
|
||||
_animateZoom(e) {
|
||||
const scale = this._map.getZoomScale(e.zoom);
|
||||
const offset = this._map._getCenterOffset(e.center)._multiplyBy(-scale).subtract(this._map._getMapPanePos());
|
||||
if (L.DomUtil.setTransform) {
|
||||
L.DomUtil.setTransform(this._canvas, offset, scale);
|
||||
} else {
|
||||
this._canvas.style[L.DomUtil.TRANSFORM] = L.DomUtil.getTranslateString(offset) + ' scale(' + scale + ')';
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return new HeatLayerClass(latlngs, options);
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
import { createClient } from '@supabase/supabase-js';
|
||||
|
||||
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
|
||||
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
|
||||
|
||||
export const supabase = createClient(supabaseUrl, supabaseAnonKey);
|
||||
Reference in New Issue
Block a user