first commit
This commit is contained in:
Optirx
15
.claude/settings.local.json
Normal file
15
.claude/settings.local.json
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
{
|
||||||
|
"permissions": {
|
||||||
|
"allow": [
|
||||||
|
"Bash(dir /a)",
|
||||||
|
"Bash(npm create:*)",
|
||||||
|
"mcp__appwrite-mcp-server__manage_database",
|
||||||
|
"Bash(npm init:*)",
|
||||||
|
"Bash(npx --yes create-vite@latest . --template react)",
|
||||||
|
"mcp__appwrite-mcp-server__bucket_operations",
|
||||||
|
"Bash(npm run build:*)",
|
||||||
|
"mcp__appwrite-mcp-server__attribute_operations",
|
||||||
|
"mcp__appwrite-mcp-server__collection_operations"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
11
.dockerignore
Normal file
11
.dockerignore
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
.git
|
||||||
|
.gitignore
|
||||||
|
README.md
|
||||||
|
.env
|
||||||
|
.env.*
|
||||||
|
!.env.example
|
||||||
|
*.log
|
||||||
|
.DS_Store
|
||||||
|
.claude
|
||||||
2
.env.example
Normal file
2
.env.example
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
VITE_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
|
||||||
|
VITE_APPWRITE_PROJECT_ID=your-project-id
|
||||||
28
.gitignore
vendored
Normal file
28
.gitignore
vendored
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
# Dependencies
|
||||||
|
node_modules
|
||||||
|
|
||||||
|
# Build
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
|
||||||
|
# Environment
|
||||||
|
.env
|
||||||
|
.env.local
|
||||||
|
.env.*.local
|
||||||
|
|
||||||
|
# Logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
|
||||||
|
# Editor
|
||||||
|
.vscode
|
||||||
|
.idea
|
||||||
|
*.swp
|
||||||
|
*.swo
|
||||||
|
|
||||||
|
# OS
|
||||||
|
.DS_Store
|
||||||
|
Thumbs.db
|
||||||
|
|
||||||
|
# Debug
|
||||||
|
*.local
|
||||||
38
Dockerfile
Normal file
38
Dockerfile
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
# Build stage
|
||||||
|
FROM node:20-alpine as build
|
||||||
|
|
||||||
|
WORKDIR /app
|
||||||
|
|
||||||
|
# Copy package files
|
||||||
|
COPY package*.json ./
|
||||||
|
|
||||||
|
# Install dependencies
|
||||||
|
RUN npm ci
|
||||||
|
|
||||||
|
# Copy source code
|
||||||
|
COPY . .
|
||||||
|
|
||||||
|
# Build args for environment variables
|
||||||
|
ARG VITE_APPWRITE_ENDPOINT
|
||||||
|
ARG VITE_APPWRITE_PROJECT_ID
|
||||||
|
|
||||||
|
# Set environment variables for build
|
||||||
|
ENV VITE_APPWRITE_ENDPOINT=$VITE_APPWRITE_ENDPOINT
|
||||||
|
ENV VITE_APPWRITE_PROJECT_ID=$VITE_APPWRITE_PROJECT_ID
|
||||||
|
|
||||||
|
# Build the app
|
||||||
|
RUN npm run build
|
||||||
|
|
||||||
|
# Production stage
|
||||||
|
FROM nginx:alpine
|
||||||
|
|
||||||
|
# Copy built files
|
||||||
|
COPY --from=build /app/dist /usr/share/nginx/html
|
||||||
|
|
||||||
|
# Copy nginx config
|
||||||
|
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||||
|
|
||||||
|
# Expose port
|
||||||
|
EXPOSE 80
|
||||||
|
|
||||||
|
CMD ["nginx", "-g", "daemon off;"]
|
||||||
125
README.md
Normal file
125
README.md
Normal file
@@ -0,0 +1,125 @@
|
|||||||
|
# ArkLinks
|
||||||
|
|
||||||
|
A modern, customizable link-in-bio solution built with React and Appwrite.
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
- **Setup Wizard** - Easy first-time configuration
|
||||||
|
- **Link Management** - Add, edit, reorder your links
|
||||||
|
- **Social Media** - Connect all your social profiles
|
||||||
|
- **Theme Customization** - Colors, fonts, button styles
|
||||||
|
- **Gallery** - Showcase your past works
|
||||||
|
- **App Downloads** - iOS/Android app links with Coming Soon badge
|
||||||
|
- **QR Code Generator** - Custom QR codes with your logo
|
||||||
|
- **Coming Soon** - Mark links/apps as coming soon
|
||||||
|
- **Mobile Responsive** - Looks great on all devices
|
||||||
|
|
||||||
|
## Quick Start
|
||||||
|
|
||||||
|
### 1. Setup Appwrite
|
||||||
|
|
||||||
|
Create a project on [Appwrite Cloud](https://cloud.appwrite.io) or self-hosted instance.
|
||||||
|
|
||||||
|
The database, collections, and bucket are already created. Note your:
|
||||||
|
- Endpoint URL (e.g., `https://cloud.appwrite.io/v1`)
|
||||||
|
- Project ID
|
||||||
|
|
||||||
|
### 2. Configure Environment
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cp .env.example .env
|
||||||
|
```
|
||||||
|
|
||||||
|
Edit `.env`:
|
||||||
|
```
|
||||||
|
VITE_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
|
||||||
|
VITE_APPWRITE_PROJECT_ID=your-project-id
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. Run Locally
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
Open http://localhost:3000
|
||||||
|
|
||||||
|
### 4. Deploy with Docker
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Set environment variables
|
||||||
|
export VITE_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
|
||||||
|
export VITE_APPWRITE_PROJECT_ID=your-project-id
|
||||||
|
|
||||||
|
# Build and run
|
||||||
|
docker-compose up -d --build
|
||||||
|
```
|
||||||
|
|
||||||
|
## Project Structure
|
||||||
|
|
||||||
|
```
|
||||||
|
src/
|
||||||
|
├── components/
|
||||||
|
│ └── AdminLayout.jsx # Admin sidebar layout
|
||||||
|
├── lib/
|
||||||
|
│ └── appwrite.js # Appwrite SDK configuration
|
||||||
|
├── pages/
|
||||||
|
│ ├── Home.jsx # Public profile page
|
||||||
|
│ ├── ComingSoon.jsx # Coming soon page
|
||||||
|
│ └── admin/
|
||||||
|
│ ├── Setup.jsx # First-time setup wizard
|
||||||
|
│ ├── Dashboard.jsx # Admin dashboard
|
||||||
|
│ ├── Links.jsx # Manage links
|
||||||
|
│ ├── Social.jsx # Social media links
|
||||||
|
│ ├── Theme.jsx # Theme customization
|
||||||
|
│ ├── Gallery.jsx # Gallery management
|
||||||
|
│ ├── Apps.jsx # App download links
|
||||||
|
│ └── QRCode.jsx # QR code generator
|
||||||
|
├── App.jsx # Main router
|
||||||
|
├── main.jsx # Entry point
|
||||||
|
└── index.css # Tailwind CSS
|
||||||
|
```
|
||||||
|
|
||||||
|
## Appwrite Database Structure
|
||||||
|
|
||||||
|
**Database:** `arklinks`
|
||||||
|
|
||||||
|
| Collection | Purpose |
|
||||||
|
|------------|---------|
|
||||||
|
| `clients` | Business profile info |
|
||||||
|
| `links` | Custom links |
|
||||||
|
| `socialLinks` | Social media profiles |
|
||||||
|
| `themes` | Color and style settings |
|
||||||
|
| `gallery` | Portfolio images |
|
||||||
|
| `apps` | App download links |
|
||||||
|
|
||||||
|
**Bucket:** `arklinks-media` - Stores logos and gallery images
|
||||||
|
|
||||||
|
## Deployment for Each Client
|
||||||
|
|
||||||
|
1. Clone the repo
|
||||||
|
2. Set environment variables for Appwrite
|
||||||
|
3. Deploy with Docker:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
docker-compose up -d --build
|
||||||
|
```
|
||||||
|
|
||||||
|
4. Visit the URL - the setup wizard will guide through configuration
|
||||||
|
5. Each deployment creates its own records in the central Appwrite database
|
||||||
|
|
||||||
|
## Tech Stack
|
||||||
|
|
||||||
|
- **React 18** - UI framework
|
||||||
|
- **Vite** - Build tool
|
||||||
|
- **Tailwind CSS** - Styling
|
||||||
|
- **React Router** - Navigation
|
||||||
|
- **Appwrite** - Database & Storage
|
||||||
|
- **qrcode.react** - QR code generation
|
||||||
|
- **Lucide React** - Icons
|
||||||
|
- **Docker + Nginx** - Production deployment
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
MIT
|
||||||
14
docker-compose.yml
Normal file
14
docker-compose.yml
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
version: '3.8'
|
||||||
|
|
||||||
|
services:
|
||||||
|
arklinks:
|
||||||
|
build:
|
||||||
|
context: .
|
||||||
|
args:
|
||||||
|
- VITE_APPWRITE_ENDPOINT=${VITE_APPWRITE_ENDPOINT}
|
||||||
|
- VITE_APPWRITE_PROJECT_ID=${VITE_APPWRITE_PROJECT_ID}
|
||||||
|
ports:
|
||||||
|
- "${PORT:-3000}:80"
|
||||||
|
restart: unless-stopped
|
||||||
|
environment:
|
||||||
|
- NODE_ENV=production
|
||||||
17
index.html
Normal file
17
index.html
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>ArkLinks</title>
|
||||||
|
<!-- Google Fonts -->
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Lato:wght@400;700&family=Lora:wght@400;500;600;700&family=Merriweather:wght@400;700&family=Montserrat:wght@400;500;600;700&family=Nunito:wght@400;500;600;700&family=Open+Sans:wght@400;500;600;700&family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&family=Raleway:wght@400;500;600;700&family=Roboto:wght@400;500;700&family=Source+Code+Pro:wght@400;500;600;700&family=Dancing+Script:wght@400;500;600;700&family=Pacifico&family=Bebas+Neue&family=Oswald:wght@400;500;600;700&family=Quicksand:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.jsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
21
nginx.conf
Normal file
21
nginx.conf
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
server {
|
||||||
|
listen 80;
|
||||||
|
server_name localhost;
|
||||||
|
root /usr/share/nginx/html;
|
||||||
|
index index.html;
|
||||||
|
|
||||||
|
# Gzip compression
|
||||||
|
gzip on;
|
||||||
|
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
|
||||||
|
|
||||||
|
# Handle SPA routing - redirect all requests to index.html
|
||||||
|
location / {
|
||||||
|
try_files $uri $uri/ /index.html;
|
||||||
|
}
|
||||||
|
|
||||||
|
# Cache static assets
|
||||||
|
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {
|
||||||
|
expires 1y;
|
||||||
|
add_header Cache-Control "public, immutable";
|
||||||
|
}
|
||||||
|
}
|
||||||
2811
package-lock.json
generated
Normal file
2811
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
28
package.json
Normal file
28
package.json
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
{
|
||||||
|
"name": "arklinks",
|
||||||
|
"private": true,
|
||||||
|
"version": "1.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0",
|
||||||
|
"react-router-dom": "^6.20.0",
|
||||||
|
"appwrite": "^14.0.0",
|
||||||
|
"qrcode.react": "^3.1.0",
|
||||||
|
"lucide-react": "^0.294.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/react": "^18.2.37",
|
||||||
|
"@types/react-dom": "^18.2.15",
|
||||||
|
"@vitejs/plugin-react": "^4.2.0",
|
||||||
|
"autoprefixer": "^10.4.16",
|
||||||
|
"postcss": "^8.4.31",
|
||||||
|
"tailwindcss": "^3.3.5",
|
||||||
|
"vite": "^5.0.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
4
public/favicon.svg
Normal file
4
public/favicon.svg
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||||
|
<rect width="100" height="100" rx="20" fill="#3B82F6"/>
|
||||||
|
<path d="M30 35h40M30 50h40M30 65h40" stroke="white" stroke-width="6" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 225 B |
160
src/App.jsx
Normal file
160
src/App.jsx
Normal file
@@ -0,0 +1,160 @@
|
|||||||
|
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
|
||||||
|
import { useState, useEffect } from 'react'
|
||||||
|
import { databases, DATABASE_ID, COLLECTIONS, getFilePreview } from './lib/appwrite'
|
||||||
|
|
||||||
|
// Pages
|
||||||
|
import Home from './pages/Home'
|
||||||
|
import ComingSoon from './pages/ComingSoon'
|
||||||
|
import Setup from './pages/admin/Setup'
|
||||||
|
import Login from './pages/admin/Login'
|
||||||
|
import Dashboard from './pages/admin/Dashboard'
|
||||||
|
import Links from './pages/admin/Links'
|
||||||
|
import Social from './pages/admin/Social'
|
||||||
|
import Theme from './pages/admin/Theme'
|
||||||
|
import Gallery from './pages/admin/Gallery'
|
||||||
|
import Apps from './pages/admin/Apps'
|
||||||
|
import QRCode from './pages/admin/QRCode'
|
||||||
|
import Profile from './pages/admin/Profile'
|
||||||
|
import Reviews from './pages/admin/Reviews'
|
||||||
|
import Banners from './pages/admin/Banners'
|
||||||
|
import AdminLayout from './components/AdminLayout'
|
||||||
|
|
||||||
|
// Session timeout: 24 hours
|
||||||
|
const SESSION_TIMEOUT = 24 * 60 * 60 * 1000
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
const [isSetupComplete, setIsSetupComplete] = useState(null)
|
||||||
|
const [clientData, setClientData] = useState(null)
|
||||||
|
const [loading, setLoading] = useState(true)
|
||||||
|
const [isAuthenticated, setIsAuthenticated] = useState(false)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
checkSetup()
|
||||||
|
checkAuth()
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
// Update page title and favicon when client data changes
|
||||||
|
useEffect(() => {
|
||||||
|
if (clientData?.businessName) {
|
||||||
|
document.title = clientData.businessName
|
||||||
|
}
|
||||||
|
|
||||||
|
if (clientData?.logoFileId) {
|
||||||
|
// Update favicon
|
||||||
|
const faviconUrl = getFilePreview(clientData.logoFileId, 64, 64)
|
||||||
|
let link = document.querySelector("link[rel~='icon']")
|
||||||
|
if (!link) {
|
||||||
|
link = document.createElement('link')
|
||||||
|
link.rel = 'icon'
|
||||||
|
document.head.appendChild(link)
|
||||||
|
}
|
||||||
|
link.href = faviconUrl
|
||||||
|
}
|
||||||
|
}, [clientData])
|
||||||
|
|
||||||
|
const checkAuth = () => {
|
||||||
|
const authState = sessionStorage.getItem('arklinks_auth')
|
||||||
|
const authTime = sessionStorage.getItem('arklinks_auth_time')
|
||||||
|
|
||||||
|
if (authState === 'true' && authTime) {
|
||||||
|
const elapsed = Date.now() - parseInt(authTime)
|
||||||
|
if (elapsed < SESSION_TIMEOUT) {
|
||||||
|
setIsAuthenticated(true)
|
||||||
|
} else {
|
||||||
|
// Session expired
|
||||||
|
handleLogout()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const checkSetup = async () => {
|
||||||
|
try {
|
||||||
|
// Check if client exists by looking for any client record
|
||||||
|
const response = await databases.listDocuments(DATABASE_ID, COLLECTIONS.CLIENTS)
|
||||||
|
if (response.documents.length > 0) {
|
||||||
|
const client = response.documents[0]
|
||||||
|
setClientData(client)
|
||||||
|
setIsSetupComplete(client.isSetupComplete)
|
||||||
|
} else {
|
||||||
|
setIsSetupComplete(false)
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Setup check error:', error)
|
||||||
|
setIsSetupComplete(false)
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleLogin = () => {
|
||||||
|
setIsAuthenticated(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleLogout = () => {
|
||||||
|
sessionStorage.removeItem('arklinks_auth')
|
||||||
|
sessionStorage.removeItem('arklinks_auth_time')
|
||||||
|
setIsAuthenticated(false)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center bg-gray-100">
|
||||||
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check if admin password is set
|
||||||
|
const hasAdminPassword = clientData?.adminPassword && clientData.adminPassword.length > 0
|
||||||
|
const needsAuth = hasAdminPassword && !isAuthenticated
|
||||||
|
|
||||||
|
return (
|
||||||
|
<BrowserRouter>
|
||||||
|
<Routes>
|
||||||
|
{/* Public Routes */}
|
||||||
|
<Route path="/" element={
|
||||||
|
isSetupComplete ? <Home clientData={clientData} /> : <Navigate to="/admin/setup" />
|
||||||
|
} />
|
||||||
|
<Route path="/coming-soon" element={<ComingSoon />} />
|
||||||
|
|
||||||
|
{/* Admin Login */}
|
||||||
|
<Route path="/admin/login" element={
|
||||||
|
isAuthenticated ? (
|
||||||
|
<Navigate to="/admin" />
|
||||||
|
) : (
|
||||||
|
<Login onLogin={handleLogin} clientData={clientData} />
|
||||||
|
)
|
||||||
|
} />
|
||||||
|
|
||||||
|
{/* Admin Setup */}
|
||||||
|
<Route path="/admin/setup" element={
|
||||||
|
<Setup onSetupComplete={() => { setIsSetupComplete(true); checkSetup(); }} />
|
||||||
|
} />
|
||||||
|
|
||||||
|
{/* Protected Admin Routes */}
|
||||||
|
<Route path="/admin" element={
|
||||||
|
!isSetupComplete ? (
|
||||||
|
<Navigate to="/admin/setup" />
|
||||||
|
) : needsAuth ? (
|
||||||
|
<Navigate to="/admin/login" />
|
||||||
|
) : (
|
||||||
|
<AdminLayout clientData={clientData} onLogout={handleLogout} />
|
||||||
|
)
|
||||||
|
}>
|
||||||
|
<Route index element={<Dashboard clientData={clientData} />} />
|
||||||
|
<Route path="links" element={<Links clientData={clientData} />} />
|
||||||
|
<Route path="social" element={<Social clientData={clientData} />} />
|
||||||
|
<Route path="theme" element={<Theme clientData={clientData} onUpdate={checkSetup} />} />
|
||||||
|
<Route path="gallery" element={<Gallery clientData={clientData} />} />
|
||||||
|
<Route path="apps" element={<Apps clientData={clientData} />} />
|
||||||
|
<Route path="qr-code" element={<QRCode clientData={clientData} />} />
|
||||||
|
<Route path="profile" element={<Profile clientData={clientData} onUpdate={checkSetup} />} />
|
||||||
|
<Route path="reviews" element={<Reviews clientData={clientData} />} />
|
||||||
|
<Route path="banners" element={<Banners clientData={clientData} />} />
|
||||||
|
</Route>
|
||||||
|
</Routes>
|
||||||
|
</BrowserRouter>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App
|
||||||
145
src/components/AdminLayout.jsx
Normal file
145
src/components/AdminLayout.jsx
Normal file
@@ -0,0 +1,145 @@
|
|||||||
|
import { Outlet, NavLink, useNavigate } from 'react-router-dom'
|
||||||
|
import {
|
||||||
|
LayoutDashboard,
|
||||||
|
Link2,
|
||||||
|
Share2,
|
||||||
|
Palette,
|
||||||
|
Image,
|
||||||
|
Smartphone,
|
||||||
|
QrCode,
|
||||||
|
ExternalLink,
|
||||||
|
Menu,
|
||||||
|
X,
|
||||||
|
User,
|
||||||
|
LogOut,
|
||||||
|
Star,
|
||||||
|
Layers
|
||||||
|
} from 'lucide-react'
|
||||||
|
import { useState } from 'react'
|
||||||
|
import { getFilePreview } from '../lib/appwrite'
|
||||||
|
|
||||||
|
const navItems = [
|
||||||
|
{ path: '/admin', icon: LayoutDashboard, label: 'Dashboard', end: true },
|
||||||
|
{ path: '/admin/profile', icon: User, label: 'Profile' },
|
||||||
|
{ path: '/admin/links', icon: Link2, label: 'Links' },
|
||||||
|
{ path: '/admin/social', icon: Share2, label: 'Social Media' },
|
||||||
|
{ path: '/admin/banners', icon: Layers, label: 'Banners' },
|
||||||
|
{ path: '/admin/reviews', icon: Star, label: 'Reviews' },
|
||||||
|
{ path: '/admin/theme', icon: Palette, label: 'Theme' },
|
||||||
|
{ path: '/admin/gallery', icon: Image, label: 'Gallery' },
|
||||||
|
{ path: '/admin/apps', icon: Smartphone, label: 'Apps' },
|
||||||
|
{ path: '/admin/qr-code', icon: QrCode, label: 'QR Code' },
|
||||||
|
]
|
||||||
|
|
||||||
|
export default function AdminLayout({ clientData, onLogout }) {
|
||||||
|
const [sidebarOpen, setSidebarOpen] = useState(false)
|
||||||
|
const navigate = useNavigate()
|
||||||
|
|
||||||
|
const handleLogout = () => {
|
||||||
|
if (onLogout) {
|
||||||
|
onLogout()
|
||||||
|
navigate('/admin/login')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-100">
|
||||||
|
{/* Mobile header */}
|
||||||
|
<div className="lg:hidden bg-white shadow-sm p-4 flex items-center justify-between">
|
||||||
|
<button
|
||||||
|
onClick={() => setSidebarOpen(true)}
|
||||||
|
className="p-2 hover:bg-gray-100 rounded-lg"
|
||||||
|
>
|
||||||
|
<Menu size={24} />
|
||||||
|
</button>
|
||||||
|
<h1 className="font-bold text-lg">ArkLinks Admin</h1>
|
||||||
|
<div className="w-10" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Sidebar overlay */}
|
||||||
|
{sidebarOpen && (
|
||||||
|
<div
|
||||||
|
className="fixed inset-0 bg-black/50 z-40 lg:hidden"
|
||||||
|
onClick={() => setSidebarOpen(false)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Sidebar */}
|
||||||
|
<aside className={`
|
||||||
|
fixed top-0 left-0 z-50 h-full w-64 bg-white shadow-lg transform transition-transform duration-200
|
||||||
|
lg:translate-x-0 ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'}
|
||||||
|
`}>
|
||||||
|
<div className="p-4 border-b flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
{clientData?.logoFileId && (
|
||||||
|
<img
|
||||||
|
src={getFilePreview(clientData.logoFileId, 40, 40)}
|
||||||
|
alt="Logo"
|
||||||
|
className="w-10 h-10 rounded-full object-cover"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<div>
|
||||||
|
<h2 className="font-bold text-sm truncate max-w-[140px]">
|
||||||
|
{clientData?.businessName || 'ArkLinks'}
|
||||||
|
</h2>
|
||||||
|
<p className="text-xs text-gray-500">Admin Panel</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={() => setSidebarOpen(false)}
|
||||||
|
className="lg:hidden p-1 hover:bg-gray-100 rounded"
|
||||||
|
>
|
||||||
|
<X size={20} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav className="p-4 space-y-1">
|
||||||
|
{navItems.map(({ path, icon: Icon, label, end }) => (
|
||||||
|
<NavLink
|
||||||
|
key={path}
|
||||||
|
to={path}
|
||||||
|
end={end}
|
||||||
|
onClick={() => setSidebarOpen(false)}
|
||||||
|
className={({ isActive }) => `
|
||||||
|
flex items-center gap-3 px-4 py-3 rounded-lg transition-colors
|
||||||
|
${isActive
|
||||||
|
? 'bg-blue-50 text-blue-600 font-medium'
|
||||||
|
: 'text-gray-600 hover:bg-gray-50'
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
<Icon size={20} />
|
||||||
|
{label}
|
||||||
|
</NavLink>
|
||||||
|
))}
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div className="absolute bottom-0 left-0 right-0 p-4 border-t space-y-2">
|
||||||
|
<button
|
||||||
|
onClick={() => window.open('/', '_blank')}
|
||||||
|
className="flex items-center justify-center gap-2 w-full py-3 bg-gray-900 text-white rounded-lg hover:bg-gray-800 transition-colors"
|
||||||
|
>
|
||||||
|
<ExternalLink size={18} />
|
||||||
|
View Live Page
|
||||||
|
</button>
|
||||||
|
{onLogout && (
|
||||||
|
<button
|
||||||
|
onClick={handleLogout}
|
||||||
|
className="flex items-center justify-center gap-2 w-full py-3 bg-red-50 text-red-600 rounded-lg hover:bg-red-100 transition-colors"
|
||||||
|
>
|
||||||
|
<LogOut size={18} />
|
||||||
|
Sign Out
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
{/* Main content */}
|
||||||
|
<main className="lg:ml-64 min-h-screen">
|
||||||
|
<div className="p-4 lg:p-8">
|
||||||
|
<Outlet />
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
14
src/index.css
Normal file
14
src/index.css
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
69
src/lib/appwrite.js
Normal file
69
src/lib/appwrite.js
Normal file
@@ -0,0 +1,69 @@
|
|||||||
|
import { Client, Databases, Storage, ID, Query } from 'appwrite'
|
||||||
|
|
||||||
|
// Initialize Appwrite Client
|
||||||
|
const client = new Client()
|
||||||
|
|
||||||
|
// Configure with environment variables or defaults
|
||||||
|
const ENDPOINT = import.meta.env.VITE_APPWRITE_ENDPOINT || 'https://cloud.appwrite.io/v1'
|
||||||
|
const PROJECT_ID = import.meta.env.VITE_APPWRITE_PROJECT_ID || ''
|
||||||
|
|
||||||
|
client
|
||||||
|
.setEndpoint(ENDPOINT)
|
||||||
|
.setProject(PROJECT_ID)
|
||||||
|
|
||||||
|
// Database and Storage instances
|
||||||
|
export const databases = new Databases(client)
|
||||||
|
export const storage = new Storage(client)
|
||||||
|
|
||||||
|
// Constants
|
||||||
|
export const DATABASE_ID = 'arklinks'
|
||||||
|
export const BUCKET_ID = 'arklinks-media'
|
||||||
|
|
||||||
|
export const COLLECTIONS = {
|
||||||
|
CLIENTS: 'clients',
|
||||||
|
LINKS: 'links',
|
||||||
|
SOCIAL_LINKS: 'socialLinks',
|
||||||
|
THEMES: 'themes',
|
||||||
|
GALLERY: 'gallery',
|
||||||
|
APPS: 'apps',
|
||||||
|
SECTIONS: 'sections',
|
||||||
|
REVIEWS: 'reviews',
|
||||||
|
BANNERS: 'banners'
|
||||||
|
}
|
||||||
|
|
||||||
|
// Helper functions
|
||||||
|
export const generateId = () => ID.unique()
|
||||||
|
|
||||||
|
// File URL helper
|
||||||
|
export const getFileUrl = (fileId) => {
|
||||||
|
if (!fileId) return null
|
||||||
|
return `${ENDPOINT}/storage/buckets/${BUCKET_ID}/files/${fileId}/view?project=${PROJECT_ID}`
|
||||||
|
}
|
||||||
|
|
||||||
|
export const getFilePreview = (fileId, width = 400, height = 400) => {
|
||||||
|
if (!fileId) return null
|
||||||
|
return `${ENDPOINT}/storage/buckets/${BUCKET_ID}/files/${fileId}/preview?project=${PROJECT_ID}&width=${width}&height=${height}`
|
||||||
|
}
|
||||||
|
|
||||||
|
// Upload file helper
|
||||||
|
export const uploadFile = async (file) => {
|
||||||
|
try {
|
||||||
|
const response = await storage.createFile(BUCKET_ID, ID.unique(), file)
|
||||||
|
return response.$id
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Upload error:', error)
|
||||||
|
throw error
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Delete file helper
|
||||||
|
export const deleteFile = async (fileId) => {
|
||||||
|
try {
|
||||||
|
await storage.deleteFile(BUCKET_ID, fileId)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Delete error:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Query, ID }
|
||||||
|
export default client
|
||||||
10
src/main.jsx
Normal file
10
src/main.jsx
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import ReactDOM from 'react-dom/client'
|
||||||
|
import App from './App'
|
||||||
|
import './index.css'
|
||||||
|
|
||||||
|
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<App />
|
||||||
|
</React.StrictMode>,
|
||||||
|
)
|
||||||
29
src/pages/ComingSoon.jsx
Normal file
29
src/pages/ComingSoon.jsx
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
import { useNavigate } from 'react-router-dom'
|
||||||
|
import { Clock, ArrowLeft } from 'lucide-react'
|
||||||
|
|
||||||
|
export default function ComingSoon() {
|
||||||
|
const navigate = useNavigate()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gradient-to-br from-blue-600 to-purple-700 flex items-center justify-center p-4">
|
||||||
|
<div className="text-center text-white">
|
||||||
|
<div className="w-20 h-20 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||||
|
<Clock className="w-10 h-10" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 className="text-4xl font-bold mb-4">Coming Soon</h1>
|
||||||
|
<p className="text-lg opacity-80 mb-8 max-w-md">
|
||||||
|
We're working hard to bring you something amazing. Stay tuned!
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={() => navigate('/')}
|
||||||
|
className="inline-flex items-center gap-2 px-6 py-3 bg-white text-blue-600 rounded-full font-medium hover:bg-gray-100 transition-colors"
|
||||||
|
>
|
||||||
|
<ArrowLeft size={20} />
|
||||||
|
Go Back
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
809
src/pages/Home.jsx
Normal file
809
src/pages/Home.jsx
Normal file
@@ -0,0 +1,809 @@
|
|||||||
|
import { useState, useEffect } from 'react'
|
||||||
|
import { useNavigate } from 'react-router-dom'
|
||||||
|
import {
|
||||||
|
Facebook, Twitter, Instagram, Linkedin, Youtube, Github,
|
||||||
|
MessageCircle, Send, Music2, Globe, MapPin, Mail, Phone,
|
||||||
|
ExternalLink, Clock, ChevronDown, ChevronUp, Apple, Smartphone, Monitor,
|
||||||
|
Star, ChevronLeft, ChevronRight, Eye, User
|
||||||
|
} from 'lucide-react'
|
||||||
|
import { databases, DATABASE_ID, COLLECTIONS, Query, getFilePreview } from '../lib/appwrite'
|
||||||
|
|
||||||
|
const SOCIAL_ICONS = {
|
||||||
|
facebook: Facebook,
|
||||||
|
twitter: Twitter,
|
||||||
|
instagram: Instagram,
|
||||||
|
linkedin: Linkedin,
|
||||||
|
youtube: Youtube,
|
||||||
|
github: Github,
|
||||||
|
tiktok: Music2,
|
||||||
|
whatsapp: MessageCircle,
|
||||||
|
telegram: Send,
|
||||||
|
website: Globe
|
||||||
|
}
|
||||||
|
|
||||||
|
const PLATFORM_ICONS = {
|
||||||
|
ios: Apple,
|
||||||
|
android: Smartphone,
|
||||||
|
web: Monitor,
|
||||||
|
windows: Monitor,
|
||||||
|
macos: Apple
|
||||||
|
}
|
||||||
|
|
||||||
|
const BUTTON_STYLES = {
|
||||||
|
rounded: 'rounded-lg',
|
||||||
|
square: 'rounded-none',
|
||||||
|
pill: 'rounded-full'
|
||||||
|
}
|
||||||
|
|
||||||
|
const SHADOW_CLASSES = {
|
||||||
|
none: '',
|
||||||
|
sm: 'shadow-sm',
|
||||||
|
md: 'shadow-md',
|
||||||
|
lg: 'shadow-lg'
|
||||||
|
}
|
||||||
|
|
||||||
|
const BUTTON_ANIMATION_CLASSES = {
|
||||||
|
none: '',
|
||||||
|
scale: 'hover:scale-[1.02]',
|
||||||
|
glow: 'hover:shadow-lg hover:shadow-blue-500/50',
|
||||||
|
slide: 'hover:-translate-y-1'
|
||||||
|
}
|
||||||
|
|
||||||
|
const FONT_SIZE_CLASSES = {
|
||||||
|
sm: 'text-sm',
|
||||||
|
md: 'text-base',
|
||||||
|
lg: 'text-lg',
|
||||||
|
xl: 'text-xl'
|
||||||
|
}
|
||||||
|
|
||||||
|
const TITLE_SIZE_CLASSES = {
|
||||||
|
sm: 'text-lg',
|
||||||
|
md: 'text-xl',
|
||||||
|
lg: 'text-2xl',
|
||||||
|
xl: 'text-3xl',
|
||||||
|
'2xl': 'text-4xl'
|
||||||
|
}
|
||||||
|
|
||||||
|
const FONT_WEIGHT_CLASSES = {
|
||||||
|
normal: 'font-normal',
|
||||||
|
medium: 'font-medium',
|
||||||
|
semibold: 'font-semibold',
|
||||||
|
bold: 'font-bold'
|
||||||
|
}
|
||||||
|
|
||||||
|
const SECTION_SIZE_CLASSES = {
|
||||||
|
sm: 'text-xs',
|
||||||
|
md: 'text-sm',
|
||||||
|
lg: 'text-base',
|
||||||
|
xl: 'text-lg'
|
||||||
|
}
|
||||||
|
|
||||||
|
const LOGO_SIZES = {
|
||||||
|
sm: 64,
|
||||||
|
md: 80,
|
||||||
|
lg: 96,
|
||||||
|
xl: 120,
|
||||||
|
'2xl': 160
|
||||||
|
}
|
||||||
|
|
||||||
|
const SOCIAL_ICON_SIZES = {
|
||||||
|
sm: { size: 32, iconSize: 16 },
|
||||||
|
md: { size: 40, iconSize: 20 },
|
||||||
|
lg: { size: 48, iconSize: 24 },
|
||||||
|
xl: { size: 56, iconSize: 28 }
|
||||||
|
}
|
||||||
|
|
||||||
|
const SOCIAL_ICON_SHAPES = {
|
||||||
|
circle: 'rounded-full',
|
||||||
|
rounded: 'rounded-lg',
|
||||||
|
square: 'rounded-none',
|
||||||
|
squircle: 'rounded-xl'
|
||||||
|
}
|
||||||
|
|
||||||
|
const SOCIAL_ICON_SPACING = {
|
||||||
|
tight: 'gap-1',
|
||||||
|
normal: 'gap-3',
|
||||||
|
relaxed: 'gap-4',
|
||||||
|
loose: 'gap-6'
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Home({ clientData }) {
|
||||||
|
const navigate = useNavigate()
|
||||||
|
const [theme, setTheme] = useState(null)
|
||||||
|
const [links, setLinks] = useState([])
|
||||||
|
const [sections, setSections] = useState([])
|
||||||
|
const [socialLinks, setSocialLinks] = useState([])
|
||||||
|
const [gallery, setGallery] = useState([])
|
||||||
|
const [apps, setApps] = useState([])
|
||||||
|
const [reviews, setReviews] = useState([])
|
||||||
|
const [banners, setBanners] = useState([])
|
||||||
|
const [loading, setLoading] = useState(true)
|
||||||
|
const [showGallery, setShowGallery] = useState(false)
|
||||||
|
const [currentBanner, setCurrentBanner] = useState(0)
|
||||||
|
const [visitCount, setVisitCount] = useState(0)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (clientData && clientData.$id) {
|
||||||
|
loadData()
|
||||||
|
}
|
||||||
|
}, [clientData])
|
||||||
|
|
||||||
|
// Banner auto-play effect
|
||||||
|
useEffect(() => {
|
||||||
|
if (!theme || banners.length <= 1) return
|
||||||
|
|
||||||
|
const autoPlay = theme.bannerAutoPlay !== false
|
||||||
|
const intervalTime = theme.bannerInterval || 5
|
||||||
|
|
||||||
|
if (!autoPlay) return
|
||||||
|
|
||||||
|
const timer = setInterval(() => {
|
||||||
|
setCurrentBanner((prev) => (prev + 1) % banners.length)
|
||||||
|
}, intervalTime * 1000)
|
||||||
|
|
||||||
|
return () => clearInterval(timer)
|
||||||
|
}, [theme, banners.length])
|
||||||
|
|
||||||
|
const loadData = async () => {
|
||||||
|
try {
|
||||||
|
// Load core data first
|
||||||
|
const [themeRes, linksRes, sectionsRes, socialRes, galleryRes, appsRes] = await Promise.all([
|
||||||
|
databases.listDocuments(DATABASE_ID, COLLECTIONS.THEMES, [
|
||||||
|
Query.equal('clientId', clientData.$id)
|
||||||
|
]).catch(() => ({ documents: [] })),
|
||||||
|
databases.listDocuments(DATABASE_ID, COLLECTIONS.LINKS, [
|
||||||
|
Query.equal('clientId', clientData.$id),
|
||||||
|
Query.equal('isEnabled', true),
|
||||||
|
Query.orderAsc('order')
|
||||||
|
]).catch(() => ({ documents: [] })),
|
||||||
|
databases.listDocuments(DATABASE_ID, COLLECTIONS.SECTIONS, [
|
||||||
|
Query.equal('clientId', clientData.$id),
|
||||||
|
Query.orderAsc('order')
|
||||||
|
]).catch(() => ({ documents: [] })),
|
||||||
|
databases.listDocuments(DATABASE_ID, COLLECTIONS.SOCIAL_LINKS, [
|
||||||
|
Query.equal('clientId', clientData.$id),
|
||||||
|
Query.equal('isEnabled', true),
|
||||||
|
Query.orderAsc('order')
|
||||||
|
]).catch(() => ({ documents: [] })),
|
||||||
|
databases.listDocuments(DATABASE_ID, COLLECTIONS.GALLERY, [
|
||||||
|
Query.equal('clientId', clientData.$id),
|
||||||
|
Query.orderAsc('order')
|
||||||
|
]).catch(() => ({ documents: [] })),
|
||||||
|
databases.listDocuments(DATABASE_ID, COLLECTIONS.APPS, [
|
||||||
|
Query.equal('clientId', clientData.$id),
|
||||||
|
Query.orderAsc('order')
|
||||||
|
]).catch(() => ({ documents: [] }))
|
||||||
|
])
|
||||||
|
|
||||||
|
if (themeRes.documents.length > 0) {
|
||||||
|
setTheme(themeRes.documents[0])
|
||||||
|
}
|
||||||
|
setLinks(linksRes.documents)
|
||||||
|
setSections(sectionsRes.documents)
|
||||||
|
setSocialLinks(socialRes.documents)
|
||||||
|
setGallery(galleryRes.documents)
|
||||||
|
setApps(appsRes.documents)
|
||||||
|
|
||||||
|
// Try to load new collections (reviews and banners) - these might not exist
|
||||||
|
try {
|
||||||
|
const reviewsRes = await databases.listDocuments(DATABASE_ID, COLLECTIONS.REVIEWS, [
|
||||||
|
Query.equal('clientId', clientData.$id),
|
||||||
|
Query.equal('isEnabled', true),
|
||||||
|
Query.orderAsc('order')
|
||||||
|
])
|
||||||
|
setReviews(reviewsRes.documents)
|
||||||
|
} catch (e) {
|
||||||
|
console.log('Reviews collection not available')
|
||||||
|
setReviews([])
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const bannersRes = await databases.listDocuments(DATABASE_ID, COLLECTIONS.BANNERS, [
|
||||||
|
Query.equal('clientId', clientData.$id),
|
||||||
|
Query.equal('isEnabled', true),
|
||||||
|
Query.orderAsc('order')
|
||||||
|
])
|
||||||
|
setBanners(bannersRes.documents)
|
||||||
|
} catch (e) {
|
||||||
|
console.log('Banners collection not available')
|
||||||
|
setBanners([])
|
||||||
|
}
|
||||||
|
|
||||||
|
setVisitCount(clientData.visitCount || 0)
|
||||||
|
|
||||||
|
// Try to increment visit counter
|
||||||
|
try {
|
||||||
|
const newCount = (clientData.visitCount || 0) + 1
|
||||||
|
await databases.updateDocument(DATABASE_ID, COLLECTIONS.CLIENTS, clientData.$id, {
|
||||||
|
visitCount: newCount
|
||||||
|
})
|
||||||
|
setVisitCount(newCount)
|
||||||
|
} catch (e) {
|
||||||
|
console.log('Could not update visit count')
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error loading data:', error)
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const getCombinedItems = () => {
|
||||||
|
const all = [
|
||||||
|
...links.map(l => ({ ...l, itemType: 'link' })),
|
||||||
|
...sections.map(s => ({ ...s, itemType: 'section' }))
|
||||||
|
]
|
||||||
|
return all.sort((a, b) => a.order - b.order)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleLinkClick = (link) => {
|
||||||
|
if (link.isComingSoon) {
|
||||||
|
navigate('/coming-soon')
|
||||||
|
} else {
|
||||||
|
window.open(link.url, '_blank')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleAppClick = (app) => {
|
||||||
|
if (app.isComingSoon) {
|
||||||
|
navigate('/coming-soon')
|
||||||
|
} else if (app.url) {
|
||||||
|
window.open(app.url, '_blank')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center bg-gray-100">
|
||||||
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Theme values with defaults
|
||||||
|
const buttonStyle = BUTTON_STYLES[theme?.buttonStyle] || BUTTON_STYLES.rounded
|
||||||
|
const shadowClass = SHADOW_CLASSES[theme?.buttonShadow] || ''
|
||||||
|
const buttonAnimationClass = BUTTON_ANIMATION_CLASSES[theme?.buttonAnimation] || BUTTON_ANIMATION_CLASSES.scale
|
||||||
|
const fontSizeClass = FONT_SIZE_CLASSES[theme?.fontSize] || 'text-base'
|
||||||
|
const fontWeightClass = FONT_WEIGHT_CLASSES[theme?.fontWeight] || 'font-medium'
|
||||||
|
const titleSizeClass = TITLE_SIZE_CLASSES[theme?.titleFontSize] || 'text-2xl'
|
||||||
|
const titleWeightClass = FONT_WEIGHT_CLASSES[theme?.titleFontWeight] || 'font-bold'
|
||||||
|
const profileLayout = theme?.profileLayout || 'centered'
|
||||||
|
const socialPosition = theme?.socialPosition || 'top'
|
||||||
|
const socialStyle = theme?.socialStyle || 'filled'
|
||||||
|
const galleryPosition = theme?.galleryPosition || 'below_links'
|
||||||
|
const galleryDisplayMode = theme?.galleryDisplayMode || 'collapsed'
|
||||||
|
const appsPosition = theme?.appsPosition || 'below_links'
|
||||||
|
const showDescription = theme?.showDescription !== false
|
||||||
|
const showContactInfo = theme?.showContactInfo !== false
|
||||||
|
const buttonBorderWidth = theme?.buttonBorderWidth || 0
|
||||||
|
const backgroundType = theme?.backgroundType || 'solid'
|
||||||
|
const backgroundOverlay = theme?.backgroundOverlay || false
|
||||||
|
const overlayOpacity = theme?.overlayOpacity || 50
|
||||||
|
const logoSize = LOGO_SIZES[theme?.logoSize] || LOGO_SIZES.lg
|
||||||
|
|
||||||
|
// New features settings
|
||||||
|
const showVisitCounter = theme?.showVisitCounter !== false
|
||||||
|
const showRating = theme?.showRating !== false
|
||||||
|
const reviewsPosition = theme?.reviewsPosition || 'below_links'
|
||||||
|
const bannerPosition = theme?.bannerPosition || 'top'
|
||||||
|
|
||||||
|
// Social icon styling
|
||||||
|
const socialIconSize = SOCIAL_ICON_SIZES[theme?.socialIconSize] || SOCIAL_ICON_SIZES.md
|
||||||
|
const socialIconShape = SOCIAL_ICON_SHAPES[theme?.socialIconShape] || SOCIAL_ICON_SHAPES.circle
|
||||||
|
const socialIconSpacing = SOCIAL_ICON_SPACING[theme?.socialIconSpacing] || SOCIAL_ICON_SPACING.normal
|
||||||
|
const socialIconColor = theme?.socialIconColor || '#FFFFFF'
|
||||||
|
const socialIconBgColor = theme?.socialIconBgColor || '#3B82F6'
|
||||||
|
const socialIconBorderWidth = theme?.socialIconBorderWidth || 0
|
||||||
|
const socialIconBorderColor = theme?.socialIconBorderColor || '#3B82F6'
|
||||||
|
const socialIconShadow = theme?.socialIconShadow || 'none'
|
||||||
|
const socialIconAnimation = theme?.socialIconAnimation || 'scale'
|
||||||
|
|
||||||
|
const getBackgroundStyle = () => {
|
||||||
|
if (backgroundType === 'image' && theme?.backgroundImageId) {
|
||||||
|
return {
|
||||||
|
backgroundImage: `url(${getFilePreview(theme.backgroundImageId, 1920, 1080)})`,
|
||||||
|
backgroundSize: 'cover',
|
||||||
|
backgroundPosition: 'center',
|
||||||
|
backgroundAttachment: 'fixed'
|
||||||
|
}
|
||||||
|
} else if (backgroundType === 'gradient') {
|
||||||
|
const direction = theme?.gradientDirection === 'to-b' ? 'to bottom' :
|
||||||
|
theme?.gradientDirection === 'to-r' ? 'to right' :
|
||||||
|
theme?.gradientDirection === 'to-br' ? 'to bottom right' : 'to bottom left'
|
||||||
|
return {
|
||||||
|
background: `linear-gradient(${direction}, ${theme?.gradientFrom || '#3B82F6'}, ${theme?.gradientTo || '#8B5CF6'})`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return { backgroundColor: theme?.backgroundColor || '#F3F4F6' }
|
||||||
|
}
|
||||||
|
|
||||||
|
const combinedItems = getCombinedItems()
|
||||||
|
|
||||||
|
// Social Icons Component
|
||||||
|
const SocialIcons = () => {
|
||||||
|
if (socialLinks.length === 0 || socialPosition === 'hidden') return null
|
||||||
|
|
||||||
|
const getShadowClass = () => {
|
||||||
|
switch (socialIconShadow) {
|
||||||
|
case 'sm': return 'shadow-sm'
|
||||||
|
case 'md': return 'shadow-md'
|
||||||
|
case 'lg': return 'shadow-lg'
|
||||||
|
case 'glow': return 'shadow-lg shadow-blue-500/50'
|
||||||
|
default: return ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const getAnimationClass = () => {
|
||||||
|
switch (socialIconAnimation) {
|
||||||
|
case 'scale': return 'hover:scale-110'
|
||||||
|
case 'bounce': return 'hover:-translate-y-1'
|
||||||
|
case 'rotate': return 'hover:rotate-12'
|
||||||
|
case 'shake': return 'hover:animate-pulse'
|
||||||
|
default: return ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const getBgStyle = () => {
|
||||||
|
switch (socialStyle) {
|
||||||
|
case 'filled':
|
||||||
|
return { backgroundColor: socialIconBgColor }
|
||||||
|
case 'gradient':
|
||||||
|
return { background: `linear-gradient(135deg, ${socialIconBgColor}, ${theme?.gradientTo || '#8B5CF6'})` }
|
||||||
|
case 'glass':
|
||||||
|
return { backgroundColor: 'rgba(255,255,255,0.2)', backdropFilter: 'blur(10px)' }
|
||||||
|
case 'outline':
|
||||||
|
case 'minimal':
|
||||||
|
return { backgroundColor: 'transparent' }
|
||||||
|
default:
|
||||||
|
return { backgroundColor: socialIconBgColor }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`flex justify-center mb-6 ${socialIconSpacing}`}>
|
||||||
|
{socialLinks.map((social) => {
|
||||||
|
const Icon = SOCIAL_ICONS[social.platform] || Globe
|
||||||
|
return (
|
||||||
|
<a
|
||||||
|
key={social.$id}
|
||||||
|
href={social.url}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className={`flex items-center justify-center transition-all ${socialIconShape} ${getShadowClass()} ${getAnimationClass()}`}
|
||||||
|
style={{
|
||||||
|
width: socialIconSize.size,
|
||||||
|
height: socialIconSize.size,
|
||||||
|
...getBgStyle(),
|
||||||
|
borderWidth: socialStyle === 'outline' ? `${socialIconBorderWidth || 2}px` : `${socialIconBorderWidth}px`,
|
||||||
|
borderColor: socialIconBorderColor,
|
||||||
|
borderStyle: 'solid',
|
||||||
|
color: socialStyle === 'minimal' ? socialIconBgColor : socialIconColor
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Icon size={socialIconSize.iconSize} />
|
||||||
|
</a>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Gallery Component
|
||||||
|
const GallerySection = () => {
|
||||||
|
if (gallery.length === 0 || galleryPosition === 'hidden') return null
|
||||||
|
|
||||||
|
if (galleryDisplayMode === 'collapsed') {
|
||||||
|
return (
|
||||||
|
<div className="mb-8">
|
||||||
|
<button
|
||||||
|
onClick={() => setShowGallery(!showGallery)}
|
||||||
|
className="w-full flex items-center justify-center gap-2 py-3 text-sm font-medium opacity-70 hover:opacity-100 transition-opacity"
|
||||||
|
style={{ color: theme?.textColor || '#111827' }}
|
||||||
|
>
|
||||||
|
{showGallery ? 'Hide' : 'View'} Gallery ({gallery.length})
|
||||||
|
{showGallery ? <ChevronUp size={18} /> : <ChevronDown size={18} />}
|
||||||
|
</button>
|
||||||
|
{showGallery && (
|
||||||
|
<div className="grid grid-cols-2 gap-2 mt-3">
|
||||||
|
{gallery.map((item) => (
|
||||||
|
<div key={item.$id} className="aspect-square rounded-lg overflow-hidden">
|
||||||
|
<img
|
||||||
|
src={getFilePreview(item.fileId, 400, 400)}
|
||||||
|
alt={item.title || 'Gallery item'}
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (galleryDisplayMode === 'expanded') {
|
||||||
|
return (
|
||||||
|
<div className="mb-8">
|
||||||
|
<div className="grid grid-cols-2 gap-2">
|
||||||
|
{gallery.map((item) => (
|
||||||
|
<div key={item.$id} className="aspect-square rounded-lg overflow-hidden">
|
||||||
|
<img
|
||||||
|
src={getFilePreview(item.fileId, 400, 400)}
|
||||||
|
alt={item.title || 'Gallery item'}
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="mb-8">
|
||||||
|
<div className="grid grid-cols-4 gap-1">
|
||||||
|
{gallery.map((item) => (
|
||||||
|
<div key={item.$id} className="aspect-square rounded overflow-hidden">
|
||||||
|
<img
|
||||||
|
src={getFilePreview(item.fileId, 200, 200)}
|
||||||
|
alt={item.title || 'Gallery item'}
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Apps Component
|
||||||
|
const AppsSection = () => {
|
||||||
|
if (apps.length === 0 || appsPosition === 'hidden') return null
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="mb-8">
|
||||||
|
<h3
|
||||||
|
className="text-sm font-semibold uppercase tracking-wide mb-3 text-center opacity-70"
|
||||||
|
style={{ color: theme?.textColor || '#111827' }}
|
||||||
|
>
|
||||||
|
Get the App
|
||||||
|
</h3>
|
||||||
|
<div className="flex justify-center gap-3 flex-wrap">
|
||||||
|
{apps.map((app) => {
|
||||||
|
const Icon = PLATFORM_ICONS[app.platform] || Smartphone
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={app.$id}
|
||||||
|
onClick={() => handleAppClick(app)}
|
||||||
|
className={`flex items-center gap-2 px-4 py-2 transition-all ${buttonStyle} ${shadowClass} ${buttonAnimationClass}`}
|
||||||
|
style={{
|
||||||
|
backgroundColor: theme?.buttonColor || '#3B82F6',
|
||||||
|
color: theme?.buttonTextColor || '#FFFFFF',
|
||||||
|
borderWidth: `${buttonBorderWidth}px`,
|
||||||
|
borderColor: theme?.buttonBorderColor || theme?.buttonColor || '#3B82F6',
|
||||||
|
borderStyle: 'solid'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Icon size={20} />
|
||||||
|
<span className="text-sm">
|
||||||
|
{app.platform === 'ios' ? 'iOS' : app.platform === 'android' ? 'Android' : app.name}
|
||||||
|
</span>
|
||||||
|
{app.isComingSoon && <Clock size={14} className="opacity-70" />}
|
||||||
|
</button>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Banner Slider Component
|
||||||
|
const BannerSlider = () => {
|
||||||
|
if (banners.length === 0 || bannerPosition === 'hidden') return null
|
||||||
|
|
||||||
|
const currentBannerData = banners[currentBanner]
|
||||||
|
if (!currentBannerData) return null
|
||||||
|
|
||||||
|
const nextBanner = () => setCurrentBanner((prev) => (prev + 1) % banners.length)
|
||||||
|
const prevBanner = () => setCurrentBanner((prev) => (prev - 1 + banners.length) % banners.length)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="mb-8 relative">
|
||||||
|
<div className="relative rounded-xl overflow-hidden">
|
||||||
|
<a
|
||||||
|
href={currentBannerData.linkUrl || '#'}
|
||||||
|
target={currentBannerData.linkUrl ? '_blank' : '_self'}
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className={currentBannerData.linkUrl ? 'block' : 'pointer-events-none'}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={getFilePreview(currentBannerData.imageFileId, 800, 400)}
|
||||||
|
alt={currentBannerData.title || 'Banner'}
|
||||||
|
className="w-full h-40 sm:h-48 object-cover"
|
||||||
|
/>
|
||||||
|
{(currentBannerData.title || currentBannerData.subtitle) && (
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-4">
|
||||||
|
<div className="text-white">
|
||||||
|
{currentBannerData.title && <h3 className="font-bold text-lg">{currentBannerData.title}</h3>}
|
||||||
|
{currentBannerData.subtitle && <p className="text-sm opacity-90">{currentBannerData.subtitle}</p>}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</a>
|
||||||
|
{banners.length > 1 && (
|
||||||
|
<>
|
||||||
|
<button
|
||||||
|
onClick={(e) => { e.preventDefault(); prevBanner(); }}
|
||||||
|
className="absolute left-2 top-1/2 -translate-y-1/2 w-8 h-8 bg-white/80 rounded-full flex items-center justify-center shadow-md hover:bg-white transition-colors"
|
||||||
|
>
|
||||||
|
<ChevronLeft size={18} />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={(e) => { e.preventDefault(); nextBanner(); }}
|
||||||
|
className="absolute right-2 top-1/2 -translate-y-1/2 w-8 h-8 bg-white/80 rounded-full flex items-center justify-center shadow-md hover:bg-white transition-colors"
|
||||||
|
>
|
||||||
|
<ChevronRight size={18} />
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{banners.length > 1 && (
|
||||||
|
<div className="flex justify-center gap-2 mt-3">
|
||||||
|
{banners.map((_, index) => (
|
||||||
|
<button
|
||||||
|
key={index}
|
||||||
|
onClick={() => setCurrentBanner(index)}
|
||||||
|
className="w-2 h-2 rounded-full transition-colors"
|
||||||
|
style={{
|
||||||
|
backgroundColor: index === currentBanner
|
||||||
|
? (theme?.primaryColor || '#3B82F6')
|
||||||
|
: `${theme?.textColor || '#111827'}30`
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Reviews Component
|
||||||
|
const ReviewsSection = () => {
|
||||||
|
if (reviews.length === 0 || reviewsPosition === 'hidden' || !showRating) return null
|
||||||
|
|
||||||
|
const avgRating = reviews.reduce((sum, r) => sum + r.rating, 0) / reviews.length
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="mb-8">
|
||||||
|
<div className="text-center mb-4">
|
||||||
|
<div className="flex justify-center gap-1 mb-1">
|
||||||
|
{[1, 2, 3, 4, 5].map((star) => (
|
||||||
|
<Star
|
||||||
|
key={star}
|
||||||
|
size={20}
|
||||||
|
className={star <= Math.round(avgRating) ? 'text-yellow-400 fill-yellow-400' : 'text-gray-300'}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<p className="text-sm opacity-70" style={{ color: theme?.textColor || '#111827' }}>
|
||||||
|
{avgRating.toFixed(1)} from {reviews.length} reviews
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-3">
|
||||||
|
{reviews.slice(0, 3).map((review) => (
|
||||||
|
<div
|
||||||
|
key={review.$id}
|
||||||
|
className="bg-white/10 backdrop-blur-sm rounded-xl p-4"
|
||||||
|
style={{ backgroundColor: `${theme?.textColor || '#111827'}10` }}
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-3 mb-2">
|
||||||
|
{review.avatarFileId ? (
|
||||||
|
<img
|
||||||
|
src={getFilePreview(review.avatarFileId, 80, 80)}
|
||||||
|
alt={review.name}
|
||||||
|
className="w-10 h-10 rounded-full object-cover"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div
|
||||||
|
className="w-10 h-10 rounded-full flex items-center justify-center"
|
||||||
|
style={{ backgroundColor: `${theme?.textColor || '#111827'}20` }}
|
||||||
|
>
|
||||||
|
<User size={18} style={{ color: theme?.textColor || '#111827' }} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div>
|
||||||
|
<h4 className="font-medium text-sm" style={{ color: theme?.textColor || '#111827' }}>
|
||||||
|
{review.name}
|
||||||
|
</h4>
|
||||||
|
<div className="flex gap-0.5">
|
||||||
|
{[1, 2, 3, 4, 5].map((star) => (
|
||||||
|
<Star
|
||||||
|
key={star}
|
||||||
|
size={12}
|
||||||
|
className={star <= review.rating ? 'text-yellow-400 fill-yellow-400' : 'text-gray-300'}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{review.comment && (
|
||||||
|
<p className="text-sm italic opacity-80" style={{ color: theme?.textColor || '#111827' }}>
|
||||||
|
"{review.comment}"
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Visit Counter Component
|
||||||
|
const VisitCounterDisplay = () => {
|
||||||
|
if (!showVisitCounter || visitCount === 0) return null
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="flex items-center justify-center gap-2 mb-6 text-sm opacity-60"
|
||||||
|
style={{ color: theme?.textColor || '#111827' }}
|
||||||
|
>
|
||||||
|
<Eye size={16} />
|
||||||
|
<span>{visitCount.toLocaleString()} visits</span>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="min-h-screen py-12 px-4 relative"
|
||||||
|
style={{
|
||||||
|
...getBackgroundStyle(),
|
||||||
|
fontFamily: `"${theme?.fontFamily || 'Inter'}", sans-serif`
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{backgroundType === 'image' && backgroundOverlay && (
|
||||||
|
<div className="absolute inset-0 bg-black" style={{ opacity: overlayOpacity / 100 }} />
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="max-w-md mx-auto relative z-10">
|
||||||
|
{bannerPosition === 'top' && <BannerSlider />}
|
||||||
|
|
||||||
|
<div className={`mb-8 ${
|
||||||
|
profileLayout === 'centered' ? 'text-center' :
|
||||||
|
profileLayout === 'compact' ? 'flex items-center gap-4' : 'text-left'
|
||||||
|
}`}>
|
||||||
|
{clientData?.logoFileId && (
|
||||||
|
<img
|
||||||
|
src={getFilePreview(clientData.logoFileId, logoSize * 2, logoSize * 2)}
|
||||||
|
alt={clientData.businessName}
|
||||||
|
className={`object-cover shadow-lg rounded-full ${
|
||||||
|
profileLayout === 'compact' ? '' : profileLayout === 'centered' ? 'mx-auto mb-4' : 'mb-4'
|
||||||
|
}`}
|
||||||
|
style={{ width: logoSize, height: logoSize }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className={profileLayout === 'compact' ? 'flex-1' : ''}>
|
||||||
|
<h1
|
||||||
|
className={`mb-2 ${titleSizeClass} ${titleWeightClass}`}
|
||||||
|
style={{ color: theme?.textColor || '#111827' }}
|
||||||
|
>
|
||||||
|
{clientData?.businessName}
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
{showDescription && clientData?.description && (
|
||||||
|
<p
|
||||||
|
className={`opacity-80 mb-4 ${fontSizeClass} ${fontWeightClass}`}
|
||||||
|
style={{ color: theme?.textColor || '#111827' }}
|
||||||
|
>
|
||||||
|
{clientData.description}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{showContactInfo && (
|
||||||
|
<div className={`flex flex-wrap gap-3 text-sm ${profileLayout === 'centered' ? 'justify-center' : ''}`} style={{ color: theme?.textColor || '#111827' }}>
|
||||||
|
{clientData?.location && (
|
||||||
|
<span className="flex items-center gap-1 opacity-70">
|
||||||
|
<MapPin size={14} />
|
||||||
|
{clientData.location}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{clientData?.email && (
|
||||||
|
<a href={`mailto:${clientData.email}`} className="flex items-center gap-1 opacity-70 hover:opacity-100">
|
||||||
|
<Mail size={14} />
|
||||||
|
{clientData.email}
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
{clientData?.phone && (
|
||||||
|
<a href={`tel:${clientData.phone}`} className="flex items-center gap-1 opacity-70 hover:opacity-100">
|
||||||
|
<Phone size={14} />
|
||||||
|
{clientData.phone}
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<VisitCounterDisplay />
|
||||||
|
|
||||||
|
{socialPosition === 'top' && <SocialIcons />}
|
||||||
|
|
||||||
|
{bannerPosition === 'above_links' && <BannerSlider />}
|
||||||
|
{reviewsPosition === 'above_links' && <ReviewsSection />}
|
||||||
|
{galleryPosition === 'above_links' && <GallerySection />}
|
||||||
|
{appsPosition === 'above_links' && <AppsSection />}
|
||||||
|
|
||||||
|
<div className="space-y-3 mb-8">
|
||||||
|
{combinedItems.map((item) => {
|
||||||
|
if (item.itemType === 'section') {
|
||||||
|
if (item.type === 'title') {
|
||||||
|
const sectionSizeClass = SECTION_SIZE_CLASSES[item.fontSize] || 'text-sm'
|
||||||
|
const sectionWeightClass = FONT_WEIGHT_CLASSES[item.fontWeight] || 'font-semibold'
|
||||||
|
const alignClass = item.textAlign === 'left' ? 'text-left' : item.textAlign === 'right' ? 'text-right' : 'text-center'
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div key={item.$id} className={`py-2 ${alignClass}`}>
|
||||||
|
<span
|
||||||
|
className={`uppercase tracking-wide opacity-60 ${sectionSizeClass} ${sectionWeightClass}`}
|
||||||
|
style={{ color: theme?.textColor || '#111827' }}
|
||||||
|
>
|
||||||
|
{item.title}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
} else if (item.type === 'divider') {
|
||||||
|
return (
|
||||||
|
<div key={item.$id} className="py-2">
|
||||||
|
<hr className="opacity-20" style={{ borderColor: theme?.textColor || '#111827' }} />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
} else if (item.type === 'spacer') {
|
||||||
|
return <div key={item.$id} className="h-6" />
|
||||||
|
}
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={item.$id}
|
||||||
|
onClick={() => handleLinkClick(item)}
|
||||||
|
className={`w-full py-4 px-6 transition-all flex items-center justify-center gap-2 ${buttonStyle} ${shadowClass} ${buttonAnimationClass} ${fontSizeClass} ${fontWeightClass}`}
|
||||||
|
style={{
|
||||||
|
backgroundColor: theme?.buttonColor || '#3B82F6',
|
||||||
|
color: theme?.buttonTextColor || '#FFFFFF',
|
||||||
|
borderWidth: `${buttonBorderWidth}px`,
|
||||||
|
borderColor: theme?.buttonBorderColor || theme?.buttonColor || '#3B82F6',
|
||||||
|
borderStyle: 'solid'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{item.title}
|
||||||
|
{item.isComingSoon ? (
|
||||||
|
<span className="flex items-center gap-1 text-xs bg-white/20 px-2 py-0.5 rounded-full">
|
||||||
|
<Clock size={12} />
|
||||||
|
Soon
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<ExternalLink size={16} className="opacity-70" />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{bannerPosition === 'below_links' && <BannerSlider />}
|
||||||
|
{reviewsPosition === 'below_links' && <ReviewsSection />}
|
||||||
|
{galleryPosition === 'below_links' && <GallerySection />}
|
||||||
|
{appsPosition === 'below_links' && <AppsSection />}
|
||||||
|
|
||||||
|
{socialPosition === 'bottom' && <SocialIcons />}
|
||||||
|
|
||||||
|
<div className="text-center pt-8 border-t border-black/10">
|
||||||
|
<p className="text-xs opacity-50" style={{ color: theme?.textColor || '#111827' }}>
|
||||||
|
Powered by ArkLinks
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
280
src/pages/admin/Apps.jsx
Normal file
280
src/pages/admin/Apps.jsx
Normal file
@@ -0,0 +1,280 @@
|
|||||||
|
import { useState, useEffect } from 'react'
|
||||||
|
import { Plus, Edit2, Trash2, Clock, Smartphone, Monitor, Apple } from 'lucide-react'
|
||||||
|
import { databases, DATABASE_ID, COLLECTIONS, generateId, Query } from '../../lib/appwrite'
|
||||||
|
|
||||||
|
const PLATFORMS = [
|
||||||
|
{ id: 'ios', name: 'iOS', icon: Apple, color: '#000000' },
|
||||||
|
{ id: 'android', name: 'Android', icon: Smartphone, color: '#3DDC84' },
|
||||||
|
{ id: 'web', name: 'Web App', icon: Monitor, color: '#4285F4' },
|
||||||
|
{ id: 'windows', name: 'Windows', icon: Monitor, color: '#0078D6' },
|
||||||
|
{ id: 'macos', name: 'macOS', icon: Apple, color: '#000000' },
|
||||||
|
]
|
||||||
|
|
||||||
|
export default function Apps({ clientData }) {
|
||||||
|
const [apps, setApps] = useState([])
|
||||||
|
const [loading, setLoading] = useState(true)
|
||||||
|
const [showModal, setShowModal] = useState(false)
|
||||||
|
const [editingApp, setEditingApp] = useState(null)
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
name: '',
|
||||||
|
platform: 'ios',
|
||||||
|
url: '',
|
||||||
|
isComingSoon: false
|
||||||
|
})
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (clientData?.$id) {
|
||||||
|
loadApps()
|
||||||
|
}
|
||||||
|
}, [clientData])
|
||||||
|
|
||||||
|
const loadApps = async () => {
|
||||||
|
try {
|
||||||
|
const response = await databases.listDocuments(DATABASE_ID, COLLECTIONS.APPS, [
|
||||||
|
Query.equal('clientId', clientData.$id),
|
||||||
|
Query.orderAsc('order')
|
||||||
|
])
|
||||||
|
setApps(response.documents)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error loading apps:', error)
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const getPlatformInfo = (platformId) => {
|
||||||
|
return PLATFORMS.find(p => p.id === platformId) || PLATFORMS[0]
|
||||||
|
}
|
||||||
|
|
||||||
|
const openModal = (app = null) => {
|
||||||
|
if (app) {
|
||||||
|
setEditingApp(app)
|
||||||
|
setFormData({
|
||||||
|
name: app.name,
|
||||||
|
platform: app.platform,
|
||||||
|
url: app.url || '',
|
||||||
|
isComingSoon: app.isComingSoon ?? false
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
setEditingApp(null)
|
||||||
|
setFormData({
|
||||||
|
name: '',
|
||||||
|
platform: 'ios',
|
||||||
|
url: '',
|
||||||
|
isComingSoon: false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
setShowModal(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSubmit = async (e) => {
|
||||||
|
e.preventDefault()
|
||||||
|
try {
|
||||||
|
const data = {
|
||||||
|
name: formData.name,
|
||||||
|
platform: formData.platform,
|
||||||
|
url: formData.url || null,
|
||||||
|
isComingSoon: formData.isComingSoon
|
||||||
|
}
|
||||||
|
|
||||||
|
if (editingApp) {
|
||||||
|
await databases.updateDocument(DATABASE_ID, COLLECTIONS.APPS, editingApp.$id, data)
|
||||||
|
} else {
|
||||||
|
await databases.createDocument(DATABASE_ID, COLLECTIONS.APPS, generateId(), {
|
||||||
|
...data,
|
||||||
|
clientId: clientData.$id,
|
||||||
|
order: apps.length
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
setShowModal(false)
|
||||||
|
loadApps()
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error saving app:', error)
|
||||||
|
alert('Error saving app')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const deleteApp = async (appId) => {
|
||||||
|
if (!confirm('Are you sure you want to delete this app?')) return
|
||||||
|
try {
|
||||||
|
await databases.deleteDocument(DATABASE_ID, COLLECTIONS.APPS, appId)
|
||||||
|
loadApps()
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error deleting app:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return <div className="flex justify-center py-12"><div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div></div>
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<h1 className="text-2xl font-bold text-gray-900">App Downloads</h1>
|
||||||
|
<button
|
||||||
|
onClick={() => openModal()}
|
||||||
|
className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
|
||||||
|
>
|
||||||
|
<Plus size={20} />
|
||||||
|
Add App
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{apps.length === 0 ? (
|
||||||
|
<div className="bg-white rounded-xl shadow-sm p-12 text-center">
|
||||||
|
<div className="flex justify-center gap-2 mb-4">
|
||||||
|
<div className="w-12 h-12 bg-gray-100 rounded-xl flex items-center justify-center">
|
||||||
|
<Apple className="w-6 h-6 text-gray-400" />
|
||||||
|
</div>
|
||||||
|
<div className="w-12 h-12 bg-gray-100 rounded-xl flex items-center justify-center">
|
||||||
|
<Smartphone className="w-6 h-6 text-gray-400" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-medium text-gray-900 mb-2">No apps yet</h3>
|
||||||
|
<p className="text-gray-500 mb-4">Add your app download links</p>
|
||||||
|
<button
|
||||||
|
onClick={() => openModal()}
|
||||||
|
className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
|
||||||
|
>
|
||||||
|
<Plus size={20} />
|
||||||
|
Add First App
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="bg-white rounded-xl shadow-sm divide-y">
|
||||||
|
{apps.map((app) => {
|
||||||
|
const platform = getPlatformInfo(app.platform)
|
||||||
|
const Icon = platform.icon
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div key={app.$id} className="p-4 flex items-center gap-4">
|
||||||
|
<div
|
||||||
|
className="w-12 h-12 rounded-xl flex items-center justify-center text-white"
|
||||||
|
style={{ backgroundColor: platform.color }}
|
||||||
|
>
|
||||||
|
<Icon size={24} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<h3 className="font-medium text-gray-900">{app.name}</h3>
|
||||||
|
{app.isComingSoon && (
|
||||||
|
<span className="inline-flex items-center gap-1 px-2 py-0.5 bg-yellow-100 text-yellow-700 text-xs rounded-full">
|
||||||
|
<Clock size={12} />
|
||||||
|
Coming Soon
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-gray-500">{platform.name}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<button
|
||||||
|
onClick={() => openModal(app)}
|
||||||
|
className="p-2 hover:bg-gray-100 rounded-lg text-gray-500"
|
||||||
|
>
|
||||||
|
<Edit2 size={18} />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => deleteApp(app.$id)}
|
||||||
|
className="p-2 hover:bg-red-50 rounded-lg text-red-500"
|
||||||
|
>
|
||||||
|
<Trash2 size={18} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Modal */}
|
||||||
|
{showModal && (
|
||||||
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
||||||
|
<div className="bg-white rounded-xl w-full max-w-md p-6">
|
||||||
|
<h2 className="text-xl font-bold text-gray-900 mb-4">
|
||||||
|
{editingApp ? 'Edit App' : 'Add App'}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">App Name *</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
required
|
||||||
|
value={formData.name}
|
||||||
|
onChange={(e) => setFormData(prev => ({ ...prev, name: e.target.value }))}
|
||||||
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||||
|
placeholder="My App"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-2">Platform</label>
|
||||||
|
<div className="grid grid-cols-3 gap-2">
|
||||||
|
{PLATFORMS.slice(0, 3).map((platform) => {
|
||||||
|
const Icon = platform.icon
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={platform.id}
|
||||||
|
type="button"
|
||||||
|
onClick={() => setFormData(prev => ({ ...prev, platform: platform.id }))}
|
||||||
|
className={`p-3 rounded-lg border-2 transition-colors flex flex-col items-center gap-1 ${
|
||||||
|
formData.platform === platform.id
|
||||||
|
? 'border-blue-500 bg-blue-50'
|
||||||
|
: 'border-gray-200 hover:border-gray-300'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<Icon size={20} style={{ color: platform.color }} />
|
||||||
|
<span className="text-xs">{platform.name}</span>
|
||||||
|
</button>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Store URL</label>
|
||||||
|
<input
|
||||||
|
type="url"
|
||||||
|
value={formData.url}
|
||||||
|
onChange={(e) => setFormData(prev => ({ ...prev, url: e.target.value }))}
|
||||||
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||||
|
placeholder="https://apps.apple.com/..."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<label className="flex items-center gap-2">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={formData.isComingSoon}
|
||||||
|
onChange={(e) => setFormData(prev => ({ ...prev, isComingSoon: e.target.checked }))}
|
||||||
|
className="w-4 h-4 text-yellow-600 rounded"
|
||||||
|
/>
|
||||||
|
<span className="text-sm text-gray-700">Coming Soon (not available yet)</span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div className="flex gap-3 pt-4">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setShowModal(false)}
|
||||||
|
className="flex-1 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="flex-1 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
|
||||||
|
>
|
||||||
|
{editingApp ? 'Update' : 'Add'} App
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
344
src/pages/admin/Banners.jsx
Normal file
344
src/pages/admin/Banners.jsx
Normal file
@@ -0,0 +1,344 @@
|
|||||||
|
import { useState, useEffect } from 'react'
|
||||||
|
import { Plus, Edit2, Trash2, Image, Upload, Link, GripVertical } from 'lucide-react'
|
||||||
|
import { databases, DATABASE_ID, COLLECTIONS, generateId, Query, uploadFile, deleteFile, getFilePreview } from '../../lib/appwrite'
|
||||||
|
|
||||||
|
export default function Banners({ clientData }) {
|
||||||
|
const [banners, setBanners] = useState([])
|
||||||
|
const [loading, setLoading] = useState(true)
|
||||||
|
const [showModal, setShowModal] = useState(false)
|
||||||
|
const [editingBanner, setEditingBanner] = useState(null)
|
||||||
|
const [imageFile, setImageFile] = useState(null)
|
||||||
|
const [imagePreview, setImagePreview] = useState(null)
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
title: '',
|
||||||
|
subtitle: '',
|
||||||
|
linkUrl: '',
|
||||||
|
isEnabled: true
|
||||||
|
})
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (clientData?.$id) {
|
||||||
|
loadBanners()
|
||||||
|
}
|
||||||
|
}, [clientData])
|
||||||
|
|
||||||
|
const loadBanners = async () => {
|
||||||
|
try {
|
||||||
|
const response = await databases.listDocuments(DATABASE_ID, COLLECTIONS.BANNERS, [
|
||||||
|
Query.equal('clientId', clientData.$id),
|
||||||
|
Query.orderAsc('order')
|
||||||
|
])
|
||||||
|
setBanners(response.documents)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error loading banners:', error)
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const openModal = (banner = null) => {
|
||||||
|
if (banner) {
|
||||||
|
setEditingBanner(banner)
|
||||||
|
setFormData({
|
||||||
|
title: banner.title || '',
|
||||||
|
subtitle: banner.subtitle || '',
|
||||||
|
linkUrl: banner.linkUrl || '',
|
||||||
|
isEnabled: banner.isEnabled ?? true
|
||||||
|
})
|
||||||
|
setImagePreview(getFilePreview(banner.imageFileId, 600, 300))
|
||||||
|
} else {
|
||||||
|
setEditingBanner(null)
|
||||||
|
setFormData({
|
||||||
|
title: '',
|
||||||
|
subtitle: '',
|
||||||
|
linkUrl: '',
|
||||||
|
isEnabled: true
|
||||||
|
})
|
||||||
|
setImageFile(null)
|
||||||
|
setImagePreview(null)
|
||||||
|
}
|
||||||
|
setShowModal(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleImageChange = (e) => {
|
||||||
|
const file = e.target.files[0]
|
||||||
|
if (file) {
|
||||||
|
setImageFile(file)
|
||||||
|
setImagePreview(URL.createObjectURL(file))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSubmit = async (e) => {
|
||||||
|
e.preventDefault()
|
||||||
|
|
||||||
|
if (!editingBanner && !imageFile) {
|
||||||
|
alert('Please upload a banner image')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
let imageFileId = editingBanner?.imageFileId || null
|
||||||
|
|
||||||
|
if (imageFile) {
|
||||||
|
if (editingBanner?.imageFileId) {
|
||||||
|
await deleteFile(editingBanner.imageFileId)
|
||||||
|
}
|
||||||
|
imageFileId = await uploadFile(imageFile)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (editingBanner) {
|
||||||
|
await databases.updateDocument(DATABASE_ID, COLLECTIONS.BANNERS, editingBanner.$id, {
|
||||||
|
title: formData.title || null,
|
||||||
|
subtitle: formData.subtitle || null,
|
||||||
|
linkUrl: formData.linkUrl || null,
|
||||||
|
imageFileId: imageFileId,
|
||||||
|
isEnabled: formData.isEnabled
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
await databases.createDocument(DATABASE_ID, COLLECTIONS.BANNERS, generateId(), {
|
||||||
|
clientId: clientData.$id,
|
||||||
|
title: formData.title || null,
|
||||||
|
subtitle: formData.subtitle || null,
|
||||||
|
linkUrl: formData.linkUrl || null,
|
||||||
|
imageFileId: imageFileId,
|
||||||
|
order: banners.length,
|
||||||
|
isEnabled: formData.isEnabled
|
||||||
|
})
|
||||||
|
}
|
||||||
|
setShowModal(false)
|
||||||
|
setImageFile(null)
|
||||||
|
setImagePreview(null)
|
||||||
|
loadBanners()
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error saving banner:', error)
|
||||||
|
alert('Error saving banner')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const deleteBanner = async (banner) => {
|
||||||
|
if (!confirm('Are you sure you want to delete this banner?')) return
|
||||||
|
try {
|
||||||
|
if (banner.imageFileId) {
|
||||||
|
await deleteFile(banner.imageFileId)
|
||||||
|
}
|
||||||
|
await databases.deleteDocument(DATABASE_ID, COLLECTIONS.BANNERS, banner.$id)
|
||||||
|
loadBanners()
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error deleting banner:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const toggleEnabled = async (banner) => {
|
||||||
|
try {
|
||||||
|
await databases.updateDocument(DATABASE_ID, COLLECTIONS.BANNERS, banner.$id, {
|
||||||
|
isEnabled: !banner.isEnabled
|
||||||
|
})
|
||||||
|
loadBanners()
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error toggling banner:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return <div className="flex justify-center py-12"><div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div></div>
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold text-gray-900">Banner Slider</h1>
|
||||||
|
<p className="text-sm text-gray-500 mt-1">Add promotional banners to your page</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={() => openModal()}
|
||||||
|
className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
|
||||||
|
>
|
||||||
|
<Plus size={20} />
|
||||||
|
Add Banner
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{banners.length === 0 ? (
|
||||||
|
<div className="bg-white rounded-xl shadow-sm p-12 text-center">
|
||||||
|
<div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<Image className="w-8 h-8 text-purple-500" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-medium text-gray-900 mb-2">No banners yet</h3>
|
||||||
|
<p className="text-gray-500 mb-4">Add eye-catching banners to promote offers or announcements</p>
|
||||||
|
<button
|
||||||
|
onClick={() => openModal()}
|
||||||
|
className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
|
||||||
|
>
|
||||||
|
<Plus size={20} />
|
||||||
|
Add First Banner
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{banners.map((banner) => (
|
||||||
|
<div key={banner.$id} className="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||||
|
<div className="flex">
|
||||||
|
<div className="w-48 h-24 flex-shrink-0">
|
||||||
|
<img
|
||||||
|
src={getFilePreview(banner.imageFileId, 400, 200)}
|
||||||
|
alt={banner.title || 'Banner'}
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 p-4 flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="text-gray-400 cursor-move">
|
||||||
|
<GripVertical size={20} />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-medium text-gray-900">
|
||||||
|
{banner.title || 'Untitled Banner'}
|
||||||
|
</h3>
|
||||||
|
{banner.subtitle && (
|
||||||
|
<p className="text-sm text-gray-500 truncate max-w-xs">{banner.subtitle}</p>
|
||||||
|
)}
|
||||||
|
{banner.linkUrl && (
|
||||||
|
<div className="flex items-center gap-1 text-xs text-blue-600 mt-1">
|
||||||
|
<Link size={12} />
|
||||||
|
<span className="truncate max-w-xs">{banner.linkUrl}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<button
|
||||||
|
onClick={() => toggleEnabled(banner)}
|
||||||
|
className={`px-3 py-1 text-sm rounded-full ${
|
||||||
|
banner.isEnabled
|
||||||
|
? 'bg-green-100 text-green-700'
|
||||||
|
: 'bg-gray-100 text-gray-500'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{banner.isEnabled ? 'Active' : 'Hidden'}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => openModal(banner)}
|
||||||
|
className="p-2 hover:bg-gray-100 rounded-lg text-gray-500"
|
||||||
|
>
|
||||||
|
<Edit2 size={18} />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => deleteBanner(banner)}
|
||||||
|
className="p-2 hover:bg-red-50 rounded-lg text-red-500"
|
||||||
|
>
|
||||||
|
<Trash2 size={18} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Modal */}
|
||||||
|
{showModal && (
|
||||||
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
||||||
|
<div className="bg-white rounded-xl w-full max-w-lg p-6">
|
||||||
|
<h2 className="text-xl font-bold text-gray-900 mb-4">
|
||||||
|
{editingBanner ? 'Edit Banner' : 'Add Banner'}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||||||
|
{/* Image Upload */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Banner Image {!editingBanner && '*'}
|
||||||
|
</label>
|
||||||
|
{imagePreview ? (
|
||||||
|
<div className="relative">
|
||||||
|
<img
|
||||||
|
src={imagePreview}
|
||||||
|
alt="Preview"
|
||||||
|
className="w-full h-40 object-cover rounded-lg"
|
||||||
|
/>
|
||||||
|
<label className="absolute inset-0 flex items-center justify-center bg-black/50 opacity-0 hover:opacity-100 transition-opacity rounded-lg cursor-pointer">
|
||||||
|
<span className="px-4 py-2 bg-white text-gray-700 rounded-lg text-sm">
|
||||||
|
Change Image
|
||||||
|
</span>
|
||||||
|
<input type="file" accept="image/*" onChange={handleImageChange} className="hidden" />
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<label className="block">
|
||||||
|
<div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center cursor-pointer hover:border-blue-500 transition-colors">
|
||||||
|
<Upload className="w-8 h-8 text-gray-400 mx-auto mb-2" />
|
||||||
|
<span className="text-sm text-gray-600">Upload banner image</span>
|
||||||
|
<p className="text-xs text-gray-400 mt-1">Recommended: 1200x400px</p>
|
||||||
|
</div>
|
||||||
|
<input type="file" accept="image/*" onChange={handleImageChange} className="hidden" />
|
||||||
|
</label>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Title (optional)</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formData.title}
|
||||||
|
onChange={(e) => setFormData(prev => ({ ...prev, title: e.target.value }))}
|
||||||
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||||
|
placeholder="Banner title"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Subtitle (optional)</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formData.subtitle}
|
||||||
|
onChange={(e) => setFormData(prev => ({ ...prev, subtitle: e.target.value }))}
|
||||||
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||||
|
placeholder="Short description"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Link URL (optional)</label>
|
||||||
|
<input
|
||||||
|
type="url"
|
||||||
|
value={formData.linkUrl}
|
||||||
|
onChange={(e) => setFormData(prev => ({ ...prev, linkUrl: e.target.value }))}
|
||||||
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||||
|
placeholder="https://example.com"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<label className="flex items-center gap-2">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={formData.isEnabled}
|
||||||
|
onChange={(e) => setFormData(prev => ({ ...prev, isEnabled: e.target.checked }))}
|
||||||
|
className="w-4 h-4 text-blue-600 rounded"
|
||||||
|
/>
|
||||||
|
<span className="text-sm text-gray-700">Show in slider</span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div className="flex gap-3 pt-4">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => { setShowModal(false); setImageFile(null); setImagePreview(null); }}
|
||||||
|
className="flex-1 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="flex-1 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
|
||||||
|
>
|
||||||
|
{editingBanner ? 'Update' : 'Add'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
168
src/pages/admin/Dashboard.jsx
Normal file
168
src/pages/admin/Dashboard.jsx
Normal file
@@ -0,0 +1,168 @@
|
|||||||
|
import { useState, useEffect } from 'react'
|
||||||
|
import { Link } from 'react-router-dom'
|
||||||
|
import {
|
||||||
|
Link2,
|
||||||
|
Share2,
|
||||||
|
Palette,
|
||||||
|
Image,
|
||||||
|
Smartphone,
|
||||||
|
QrCode,
|
||||||
|
Edit3,
|
||||||
|
MapPin,
|
||||||
|
Mail,
|
||||||
|
Phone
|
||||||
|
} from 'lucide-react'
|
||||||
|
import { databases, DATABASE_ID, COLLECTIONS, Query, getFilePreview } from '../../lib/appwrite'
|
||||||
|
|
||||||
|
const quickActions = [
|
||||||
|
{ path: '/admin/links', icon: Link2, label: 'Manage Links', color: 'bg-blue-500' },
|
||||||
|
{ path: '/admin/social', icon: Share2, label: 'Social Media', color: 'bg-pink-500' },
|
||||||
|
{ path: '/admin/theme', icon: Palette, label: 'Customize Theme', color: 'bg-purple-500' },
|
||||||
|
{ path: '/admin/gallery', icon: Image, label: 'Gallery', color: 'bg-green-500' },
|
||||||
|
{ path: '/admin/apps', icon: Smartphone, label: 'App Links', color: 'bg-orange-500' },
|
||||||
|
{ path: '/admin/qr-code', icon: QrCode, label: 'QR Code', color: 'bg-gray-700' },
|
||||||
|
]
|
||||||
|
|
||||||
|
export default function Dashboard({ clientData }) {
|
||||||
|
const [stats, setStats] = useState({
|
||||||
|
links: 0,
|
||||||
|
socialLinks: 0,
|
||||||
|
gallery: 0,
|
||||||
|
apps: 0
|
||||||
|
})
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (clientData?.$id) {
|
||||||
|
loadStats()
|
||||||
|
}
|
||||||
|
}, [clientData])
|
||||||
|
|
||||||
|
const loadStats = async () => {
|
||||||
|
try {
|
||||||
|
const [links, social, gallery, apps] = await Promise.all([
|
||||||
|
databases.listDocuments(DATABASE_ID, COLLECTIONS.LINKS, [
|
||||||
|
Query.equal('clientId', clientData.$id)
|
||||||
|
]),
|
||||||
|
databases.listDocuments(DATABASE_ID, COLLECTIONS.SOCIAL_LINKS, [
|
||||||
|
Query.equal('clientId', clientData.$id)
|
||||||
|
]),
|
||||||
|
databases.listDocuments(DATABASE_ID, COLLECTIONS.GALLERY, [
|
||||||
|
Query.equal('clientId', clientData.$id)
|
||||||
|
]),
|
||||||
|
databases.listDocuments(DATABASE_ID, COLLECTIONS.APPS, [
|
||||||
|
Query.equal('clientId', clientData.$id)
|
||||||
|
])
|
||||||
|
])
|
||||||
|
|
||||||
|
setStats({
|
||||||
|
links: links.total,
|
||||||
|
socialLinks: social.total,
|
||||||
|
gallery: gallery.total,
|
||||||
|
apps: apps.total
|
||||||
|
})
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error loading stats:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<h1 className="text-2xl font-bold text-gray-900">Dashboard</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Business Card */}
|
||||||
|
<div className="bg-white rounded-xl shadow-sm p-6">
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
{clientData?.logoFileId ? (
|
||||||
|
<img
|
||||||
|
src={getFilePreview(clientData.logoFileId, 100, 100)}
|
||||||
|
alt="Logo"
|
||||||
|
className="w-20 h-20 rounded-xl object-cover"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="w-20 h-20 bg-gray-100 rounded-xl flex items-center justify-center">
|
||||||
|
<span className="text-2xl font-bold text-gray-400">
|
||||||
|
{clientData?.businessName?.charAt(0) || 'A'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<h2 className="text-xl font-bold text-gray-900">{clientData?.businessName}</h2>
|
||||||
|
<Link to="/admin/theme" className="p-1 hover:bg-gray-100 rounded">
|
||||||
|
<Edit3 size={16} className="text-gray-400" />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{clientData?.description && (
|
||||||
|
<p className="text-gray-600 mt-1 line-clamp-2">{clientData.description}</p>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="flex flex-wrap gap-4 mt-3 text-sm text-gray-500">
|
||||||
|
{clientData?.location && (
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<MapPin size={14} />
|
||||||
|
{clientData.location}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{clientData?.email && (
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<Mail size={14} />
|
||||||
|
{clientData.email}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{clientData?.phone && (
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<Phone size={14} />
|
||||||
|
{clientData.phone}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Stats */}
|
||||||
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
||||||
|
<div className="bg-white rounded-xl shadow-sm p-4">
|
||||||
|
<div className="text-3xl font-bold text-blue-600">{stats.links}</div>
|
||||||
|
<div className="text-sm text-gray-500">Links</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white rounded-xl shadow-sm p-4">
|
||||||
|
<div className="text-3xl font-bold text-pink-600">{stats.socialLinks}</div>
|
||||||
|
<div className="text-sm text-gray-500">Social Links</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white rounded-xl shadow-sm p-4">
|
||||||
|
<div className="text-3xl font-bold text-green-600">{stats.gallery}</div>
|
||||||
|
<div className="text-sm text-gray-500">Gallery Items</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white rounded-xl shadow-sm p-4">
|
||||||
|
<div className="text-3xl font-bold text-orange-600">{stats.apps}</div>
|
||||||
|
<div className="text-sm text-gray-500">App Links</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Quick Actions */}
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 mb-4">Quick Actions</h3>
|
||||||
|
<div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
|
||||||
|
{quickActions.map(({ path, icon: Icon, label, color }) => (
|
||||||
|
<Link
|
||||||
|
key={path}
|
||||||
|
to={path}
|
||||||
|
className="bg-white rounded-xl shadow-sm p-4 hover:shadow-md transition-shadow flex items-center gap-3"
|
||||||
|
>
|
||||||
|
<div className={`${color} w-10 h-10 rounded-lg flex items-center justify-center text-white`}>
|
||||||
|
<Icon size={20} />
|
||||||
|
</div>
|
||||||
|
<span className="font-medium text-gray-900">{label}</span>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
280
src/pages/admin/Gallery.jsx
Normal file
280
src/pages/admin/Gallery.jsx
Normal file
@@ -0,0 +1,280 @@
|
|||||||
|
import { useState, useEffect } from 'react'
|
||||||
|
import { Plus, Edit2, Trash2, Upload, X, Image as ImageIcon } from 'lucide-react'
|
||||||
|
import { databases, DATABASE_ID, COLLECTIONS, generateId, Query, uploadFile, deleteFile, getFilePreview } from '../../lib/appwrite'
|
||||||
|
|
||||||
|
export default function Gallery({ clientData }) {
|
||||||
|
const [items, setItems] = useState([])
|
||||||
|
const [loading, setLoading] = useState(true)
|
||||||
|
const [showModal, setShowModal] = useState(false)
|
||||||
|
const [editingItem, setEditingItem] = useState(null)
|
||||||
|
const [uploading, setUploading] = useState(false)
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
title: '',
|
||||||
|
description: '',
|
||||||
|
file: null,
|
||||||
|
filePreview: null
|
||||||
|
})
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (clientData?.$id) {
|
||||||
|
loadItems()
|
||||||
|
}
|
||||||
|
}, [clientData])
|
||||||
|
|
||||||
|
const loadItems = async () => {
|
||||||
|
try {
|
||||||
|
const response = await databases.listDocuments(DATABASE_ID, COLLECTIONS.GALLERY, [
|
||||||
|
Query.equal('clientId', clientData.$id),
|
||||||
|
Query.orderAsc('order')
|
||||||
|
])
|
||||||
|
setItems(response.documents)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error loading gallery:', error)
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const openModal = (item = null) => {
|
||||||
|
if (item) {
|
||||||
|
setEditingItem(item)
|
||||||
|
setFormData({
|
||||||
|
title: item.title || '',
|
||||||
|
description: item.description || '',
|
||||||
|
file: null,
|
||||||
|
filePreview: getFilePreview(item.fileId, 400, 400)
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
setEditingItem(null)
|
||||||
|
setFormData({
|
||||||
|
title: '',
|
||||||
|
description: '',
|
||||||
|
file: null,
|
||||||
|
filePreview: null
|
||||||
|
})
|
||||||
|
}
|
||||||
|
setShowModal(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleFileChange = (e) => {
|
||||||
|
const file = e.target.files[0]
|
||||||
|
if (file) {
|
||||||
|
setFormData(prev => ({
|
||||||
|
...prev,
|
||||||
|
file,
|
||||||
|
filePreview: URL.createObjectURL(file)
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSubmit = async (e) => {
|
||||||
|
e.preventDefault()
|
||||||
|
if (!editingItem && !formData.file) {
|
||||||
|
alert('Please select an image')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
setUploading(true)
|
||||||
|
try {
|
||||||
|
let fileId = editingItem?.fileId
|
||||||
|
|
||||||
|
// Upload new file if provided
|
||||||
|
if (formData.file) {
|
||||||
|
// Delete old file if updating
|
||||||
|
if (editingItem?.fileId) {
|
||||||
|
await deleteFile(editingItem.fileId)
|
||||||
|
}
|
||||||
|
fileId = await uploadFile(formData.file)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (editingItem) {
|
||||||
|
await databases.updateDocument(DATABASE_ID, COLLECTIONS.GALLERY, editingItem.$id, {
|
||||||
|
title: formData.title || null,
|
||||||
|
description: formData.description || null,
|
||||||
|
fileId
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
await databases.createDocument(DATABASE_ID, COLLECTIONS.GALLERY, generateId(), {
|
||||||
|
clientId: clientData.$id,
|
||||||
|
title: formData.title || null,
|
||||||
|
description: formData.description || null,
|
||||||
|
fileId,
|
||||||
|
order: items.length
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
setShowModal(false)
|
||||||
|
loadItems()
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error saving gallery item:', error)
|
||||||
|
alert('Error saving gallery item')
|
||||||
|
} finally {
|
||||||
|
setUploading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const deleteItem = async (item) => {
|
||||||
|
if (!confirm('Are you sure you want to delete this image?')) return
|
||||||
|
try {
|
||||||
|
await deleteFile(item.fileId)
|
||||||
|
await databases.deleteDocument(DATABASE_ID, COLLECTIONS.GALLERY, item.$id)
|
||||||
|
loadItems()
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error deleting gallery item:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return <div className="flex justify-center py-12"><div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div></div>
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<h1 className="text-2xl font-bold text-gray-900">Gallery</h1>
|
||||||
|
<button
|
||||||
|
onClick={() => openModal()}
|
||||||
|
className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
|
||||||
|
>
|
||||||
|
<Plus size={20} />
|
||||||
|
Add Image
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{items.length === 0 ? (
|
||||||
|
<div className="bg-white rounded-xl shadow-sm p-12 text-center">
|
||||||
|
<div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<ImageIcon className="w-8 h-8 text-gray-400" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-medium text-gray-900 mb-2">No gallery items yet</h3>
|
||||||
|
<p className="text-gray-500 mb-4">Showcase your past works and projects</p>
|
||||||
|
<button
|
||||||
|
onClick={() => openModal()}
|
||||||
|
className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
|
||||||
|
>
|
||||||
|
<Plus size={20} />
|
||||||
|
Add First Image
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
||||||
|
{items.map((item) => (
|
||||||
|
<div key={item.$id} className="group relative bg-white rounded-xl shadow-sm overflow-hidden">
|
||||||
|
<img
|
||||||
|
src={getFilePreview(item.fileId, 400, 400)}
|
||||||
|
alt={item.title || 'Gallery item'}
|
||||||
|
className="w-full aspect-square object-cover"
|
||||||
|
/>
|
||||||
|
<div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
|
||||||
|
<button
|
||||||
|
onClick={() => openModal(item)}
|
||||||
|
className="p-2 bg-white rounded-lg text-gray-700 hover:bg-gray-100"
|
||||||
|
>
|
||||||
|
<Edit2 size={18} />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => deleteItem(item)}
|
||||||
|
className="p-2 bg-white rounded-lg text-red-500 hover:bg-red-50"
|
||||||
|
>
|
||||||
|
<Trash2 size={18} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{item.title && (
|
||||||
|
<div className="p-3">
|
||||||
|
<h4 className="font-medium text-gray-900 truncate">{item.title}</h4>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Modal */}
|
||||||
|
{showModal && (
|
||||||
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
||||||
|
<div className="bg-white rounded-xl w-full max-w-md p-6">
|
||||||
|
<div className="flex items-center justify-between mb-4">
|
||||||
|
<h2 className="text-xl font-bold text-gray-900">
|
||||||
|
{editingItem ? 'Edit Image' : 'Add Image'}
|
||||||
|
</h2>
|
||||||
|
<button onClick={() => setShowModal(false)} className="p-1 hover:bg-gray-100 rounded">
|
||||||
|
<X size={20} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||||||
|
{/* Image Upload */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-2">Image {!editingItem && '*'}</label>
|
||||||
|
{formData.filePreview ? (
|
||||||
|
<div className="relative">
|
||||||
|
<img
|
||||||
|
src={formData.filePreview}
|
||||||
|
alt="Preview"
|
||||||
|
className="w-full h-48 object-cover rounded-lg"
|
||||||
|
/>
|
||||||
|
<label className="absolute inset-0 flex items-center justify-center bg-black/50 opacity-0 hover:opacity-100 transition-opacity cursor-pointer rounded-lg">
|
||||||
|
<span className="text-white text-sm">Click to change</span>
|
||||||
|
<input type="file" accept="image/*" onChange={handleFileChange} className="hidden" />
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<label className="block">
|
||||||
|
<div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center cursor-pointer hover:border-blue-500 transition-colors">
|
||||||
|
<Upload className="w-8 h-8 text-gray-400 mx-auto mb-2" />
|
||||||
|
<span className="text-sm text-gray-600">Click to upload image</span>
|
||||||
|
</div>
|
||||||
|
<input type="file" accept="image/*" onChange={handleFileChange} className="hidden" />
|
||||||
|
</label>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Title (optional)</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formData.title}
|
||||||
|
onChange={(e) => setFormData(prev => ({ ...prev, title: e.target.value }))}
|
||||||
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||||
|
placeholder="Project name"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Description (optional)</label>
|
||||||
|
<textarea
|
||||||
|
value={formData.description}
|
||||||
|
onChange={(e) => setFormData(prev => ({ ...prev, description: e.target.value }))}
|
||||||
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||||
|
placeholder="Brief description..."
|
||||||
|
rows={2}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-3 pt-4">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setShowModal(false)}
|
||||||
|
className="flex-1 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={uploading}
|
||||||
|
className="flex-1 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 flex items-center justify-center"
|
||||||
|
>
|
||||||
|
{uploading ? (
|
||||||
|
<div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
||||||
|
) : (
|
||||||
|
editingItem ? 'Update' : 'Add'
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
618
src/pages/admin/Links.jsx
Normal file
618
src/pages/admin/Links.jsx
Normal file
@@ -0,0 +1,618 @@
|
|||||||
|
import { useState, useEffect } from 'react'
|
||||||
|
import { Plus, Edit2, Trash2, GripVertical, ExternalLink, Clock, Type, Minus, MoreVertical } from 'lucide-react'
|
||||||
|
import { databases, DATABASE_ID, COLLECTIONS, generateId, Query } from '../../lib/appwrite'
|
||||||
|
|
||||||
|
export default function Links({ clientData }) {
|
||||||
|
const [links, setLinks] = useState([])
|
||||||
|
const [sections, setSections] = useState([])
|
||||||
|
const [loading, setLoading] = useState(true)
|
||||||
|
const [showLinkModal, setShowLinkModal] = useState(false)
|
||||||
|
const [showSectionModal, setShowSectionModal] = useState(false)
|
||||||
|
const [editingLink, setEditingLink] = useState(null)
|
||||||
|
const [editingSection, setEditingSection] = useState(null)
|
||||||
|
const [linkFormData, setLinkFormData] = useState({
|
||||||
|
title: '',
|
||||||
|
url: '',
|
||||||
|
icon: '',
|
||||||
|
isEnabled: true,
|
||||||
|
isComingSoon: false
|
||||||
|
})
|
||||||
|
const [sectionFormData, setSectionFormData] = useState({
|
||||||
|
title: '',
|
||||||
|
type: 'title',
|
||||||
|
fontSize: 'md',
|
||||||
|
fontWeight: 'semibold',
|
||||||
|
textAlign: 'center'
|
||||||
|
})
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (clientData?.$id) {
|
||||||
|
loadData()
|
||||||
|
}
|
||||||
|
}, [clientData])
|
||||||
|
|
||||||
|
const loadData = async () => {
|
||||||
|
try {
|
||||||
|
const [linksRes, sectionsRes] = await Promise.all([
|
||||||
|
databases.listDocuments(DATABASE_ID, COLLECTIONS.LINKS, [
|
||||||
|
Query.equal('clientId', clientData.$id),
|
||||||
|
Query.orderAsc('order')
|
||||||
|
]),
|
||||||
|
databases.listDocuments(DATABASE_ID, COLLECTIONS.SECTIONS, [
|
||||||
|
Query.equal('clientId', clientData.$id),
|
||||||
|
Query.orderAsc('order')
|
||||||
|
])
|
||||||
|
])
|
||||||
|
setLinks(linksRes.documents)
|
||||||
|
setSections(sectionsRes.documents)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error loading data:', error)
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Combine links and sections into ordered list
|
||||||
|
const getCombinedItems = () => {
|
||||||
|
const all = [
|
||||||
|
...links.map(l => ({ ...l, itemType: 'link' })),
|
||||||
|
...sections.map(s => ({ ...s, itemType: 'section' }))
|
||||||
|
]
|
||||||
|
return all.sort((a, b) => a.order - b.order)
|
||||||
|
}
|
||||||
|
|
||||||
|
const openLinkModal = (link = null) => {
|
||||||
|
if (link) {
|
||||||
|
setEditingLink(link)
|
||||||
|
setLinkFormData({
|
||||||
|
title: link.title,
|
||||||
|
url: link.url,
|
||||||
|
icon: link.icon || '',
|
||||||
|
isEnabled: link.isEnabled ?? true,
|
||||||
|
isComingSoon: link.isComingSoon ?? false
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
setEditingLink(null)
|
||||||
|
setLinkFormData({
|
||||||
|
title: '',
|
||||||
|
url: '',
|
||||||
|
icon: '',
|
||||||
|
isEnabled: true,
|
||||||
|
isComingSoon: false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
setShowLinkModal(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
const openSectionModal = (section = null) => {
|
||||||
|
if (section) {
|
||||||
|
setEditingSection(section)
|
||||||
|
setSectionFormData({
|
||||||
|
title: section.title || '',
|
||||||
|
type: section.type,
|
||||||
|
fontSize: section.fontSize || 'md',
|
||||||
|
fontWeight: section.fontWeight || 'semibold',
|
||||||
|
textAlign: section.textAlign || 'center'
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
setEditingSection(null)
|
||||||
|
setSectionFormData({
|
||||||
|
title: '',
|
||||||
|
type: 'title',
|
||||||
|
fontSize: 'md',
|
||||||
|
fontWeight: 'semibold',
|
||||||
|
textAlign: 'center'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
setShowSectionModal(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleLinkSubmit = async (e) => {
|
||||||
|
e.preventDefault()
|
||||||
|
try {
|
||||||
|
const allItems = getCombinedItems()
|
||||||
|
if (editingLink) {
|
||||||
|
await databases.updateDocument(DATABASE_ID, COLLECTIONS.LINKS, editingLink.$id, {
|
||||||
|
title: linkFormData.title,
|
||||||
|
url: linkFormData.url,
|
||||||
|
icon: linkFormData.icon || null,
|
||||||
|
isEnabled: linkFormData.isEnabled,
|
||||||
|
isComingSoon: linkFormData.isComingSoon
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
await databases.createDocument(DATABASE_ID, COLLECTIONS.LINKS, generateId(), {
|
||||||
|
clientId: clientData.$id,
|
||||||
|
title: linkFormData.title,
|
||||||
|
url: linkFormData.url,
|
||||||
|
icon: linkFormData.icon || null,
|
||||||
|
order: allItems.length,
|
||||||
|
isEnabled: linkFormData.isEnabled,
|
||||||
|
isComingSoon: linkFormData.isComingSoon
|
||||||
|
})
|
||||||
|
}
|
||||||
|
setShowLinkModal(false)
|
||||||
|
loadData()
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error saving link:', error)
|
||||||
|
alert('Error saving link')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSectionSubmit = async (e) => {
|
||||||
|
e.preventDefault()
|
||||||
|
try {
|
||||||
|
const allItems = getCombinedItems()
|
||||||
|
if (editingSection) {
|
||||||
|
await databases.updateDocument(DATABASE_ID, COLLECTIONS.SECTIONS, editingSection.$id, {
|
||||||
|
title: sectionFormData.title || null,
|
||||||
|
type: sectionFormData.type,
|
||||||
|
fontSize: sectionFormData.fontSize,
|
||||||
|
fontWeight: sectionFormData.fontWeight,
|
||||||
|
textAlign: sectionFormData.textAlign
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
await databases.createDocument(DATABASE_ID, COLLECTIONS.SECTIONS, generateId(), {
|
||||||
|
clientId: clientData.$id,
|
||||||
|
title: sectionFormData.title || null,
|
||||||
|
type: sectionFormData.type,
|
||||||
|
order: allItems.length,
|
||||||
|
fontSize: sectionFormData.fontSize,
|
||||||
|
fontWeight: sectionFormData.fontWeight,
|
||||||
|
textAlign: sectionFormData.textAlign
|
||||||
|
})
|
||||||
|
}
|
||||||
|
setShowSectionModal(false)
|
||||||
|
loadData()
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error saving section:', error)
|
||||||
|
alert('Error saving section')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const deleteLink = async (linkId) => {
|
||||||
|
if (!confirm('Are you sure you want to delete this link?')) return
|
||||||
|
try {
|
||||||
|
await databases.deleteDocument(DATABASE_ID, COLLECTIONS.LINKS, linkId)
|
||||||
|
loadData()
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error deleting link:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const deleteSection = async (sectionId) => {
|
||||||
|
if (!confirm('Are you sure you want to delete this section?')) return
|
||||||
|
try {
|
||||||
|
await databases.deleteDocument(DATABASE_ID, COLLECTIONS.SECTIONS, sectionId)
|
||||||
|
loadData()
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error deleting section:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const toggleEnabled = async (link) => {
|
||||||
|
try {
|
||||||
|
await databases.updateDocument(DATABASE_ID, COLLECTIONS.LINKS, link.$id, {
|
||||||
|
isEnabled: !link.isEnabled
|
||||||
|
})
|
||||||
|
loadData()
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error toggling link:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const moveItem = async (item, direction) => {
|
||||||
|
const allItems = getCombinedItems()
|
||||||
|
const currentIndex = allItems.findIndex(i => i.$id === item.$id)
|
||||||
|
const newIndex = direction === 'up' ? currentIndex - 1 : currentIndex + 1
|
||||||
|
|
||||||
|
if (newIndex < 0 || newIndex >= allItems.length) return
|
||||||
|
|
||||||
|
const swapItem = allItems[newIndex]
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Swap orders
|
||||||
|
const collection = item.itemType === 'link' ? COLLECTIONS.LINKS : COLLECTIONS.SECTIONS
|
||||||
|
const swapCollection = swapItem.itemType === 'link' ? COLLECTIONS.LINKS : COLLECTIONS.SECTIONS
|
||||||
|
|
||||||
|
await Promise.all([
|
||||||
|
databases.updateDocument(DATABASE_ID, collection, item.$id, { order: swapItem.order }),
|
||||||
|
databases.updateDocument(DATABASE_ID, swapCollection, swapItem.$id, { order: item.order })
|
||||||
|
])
|
||||||
|
loadData()
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error reordering:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return <div className="flex justify-center py-12"><div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div></div>
|
||||||
|
}
|
||||||
|
|
||||||
|
const combinedItems = getCombinedItems()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<h1 className="text-2xl font-bold text-gray-900">Links & Sections</h1>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<button
|
||||||
|
onClick={() => openSectionModal()}
|
||||||
|
className="flex items-center gap-2 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50"
|
||||||
|
>
|
||||||
|
<Type size={20} />
|
||||||
|
Add Title
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => openLinkModal()}
|
||||||
|
className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
|
||||||
|
>
|
||||||
|
<Plus size={20} />
|
||||||
|
Add Link
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{combinedItems.length === 0 ? (
|
||||||
|
<div className="bg-white rounded-xl shadow-sm p-12 text-center">
|
||||||
|
<div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<ExternalLink className="w-8 h-8 text-gray-400" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-medium text-gray-900 mb-2">No links yet</h3>
|
||||||
|
<p className="text-gray-500 mb-4">Add your first link or section title to get started</p>
|
||||||
|
<div className="flex justify-center gap-3">
|
||||||
|
<button
|
||||||
|
onClick={() => openSectionModal()}
|
||||||
|
className="inline-flex items-center gap-2 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50"
|
||||||
|
>
|
||||||
|
<Type size={20} />
|
||||||
|
Add Title
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => openLinkModal()}
|
||||||
|
className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
|
||||||
|
>
|
||||||
|
<Plus size={20} />
|
||||||
|
Add Link
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="bg-white rounded-xl shadow-sm divide-y">
|
||||||
|
{combinedItems.map((item, index) => (
|
||||||
|
item.itemType === 'link' ? (
|
||||||
|
// Link Item
|
||||||
|
<div key={item.$id} className="p-4 flex items-center gap-4">
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<button
|
||||||
|
onClick={() => moveItem(item, 'up')}
|
||||||
|
disabled={index === 0}
|
||||||
|
className="p-1 hover:bg-gray-100 rounded disabled:opacity-30"
|
||||||
|
>
|
||||||
|
<GripVertical size={16} className="rotate-180" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => moveItem(item, 'down')}
|
||||||
|
disabled={index === combinedItems.length - 1}
|
||||||
|
className="p-1 hover:bg-gray-100 rounded disabled:opacity-30"
|
||||||
|
>
|
||||||
|
<GripVertical size={16} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
|
||||||
|
<ExternalLink size={18} className="text-blue-600" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<h3 className="font-medium text-gray-900 truncate">{item.title}</h3>
|
||||||
|
{item.isComingSoon && (
|
||||||
|
<span className="inline-flex items-center gap-1 px-2 py-0.5 bg-yellow-100 text-yellow-700 text-xs rounded-full">
|
||||||
|
<Clock size={12} />
|
||||||
|
Coming Soon
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-gray-500 truncate">{item.url}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<button
|
||||||
|
onClick={() => toggleEnabled(item)}
|
||||||
|
className={`px-3 py-1 text-sm rounded-full ${
|
||||||
|
item.isEnabled
|
||||||
|
? 'bg-green-100 text-green-700'
|
||||||
|
: 'bg-gray-100 text-gray-500'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{item.isEnabled ? 'Active' : 'Hidden'}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={() => openLinkModal(item)}
|
||||||
|
className="p-2 hover:bg-gray-100 rounded-lg text-gray-500"
|
||||||
|
>
|
||||||
|
<Edit2 size={18} />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={() => deleteLink(item.$id)}
|
||||||
|
className="p-2 hover:bg-red-50 rounded-lg text-red-500"
|
||||||
|
>
|
||||||
|
<Trash2 size={18} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
// Section Item
|
||||||
|
<div key={item.$id} className="p-4 flex items-center gap-4 bg-gray-50">
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<button
|
||||||
|
onClick={() => moveItem(item, 'up')}
|
||||||
|
disabled={index === 0}
|
||||||
|
className="p-1 hover:bg-gray-200 rounded disabled:opacity-30"
|
||||||
|
>
|
||||||
|
<GripVertical size={16} className="rotate-180" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => moveItem(item, 'down')}
|
||||||
|
disabled={index === combinedItems.length - 1}
|
||||||
|
className="p-1 hover:bg-gray-200 rounded disabled:opacity-30"
|
||||||
|
>
|
||||||
|
<GripVertical size={16} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
|
||||||
|
{item.type === 'title' ? (
|
||||||
|
<Type size={18} className="text-purple-600" />
|
||||||
|
) : item.type === 'divider' ? (
|
||||||
|
<Minus size={18} className="text-purple-600" />
|
||||||
|
) : (
|
||||||
|
<MoreVertical size={18} className="text-purple-600" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-xs uppercase tracking-wide text-purple-600 font-semibold">
|
||||||
|
{item.type === 'title' ? 'Section Title' : item.type === 'divider' ? 'Divider' : 'Spacer'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{item.title && (
|
||||||
|
<p className="font-medium text-gray-900">{item.title}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<button
|
||||||
|
onClick={() => openSectionModal(item)}
|
||||||
|
className="p-2 hover:bg-gray-200 rounded-lg text-gray-500"
|
||||||
|
>
|
||||||
|
<Edit2 size={18} />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={() => deleteSection(item.$id)}
|
||||||
|
className="p-2 hover:bg-red-50 rounded-lg text-red-500"
|
||||||
|
>
|
||||||
|
<Trash2 size={18} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Link Modal */}
|
||||||
|
{showLinkModal && (
|
||||||
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
||||||
|
<div className="bg-white rounded-xl w-full max-w-md p-6">
|
||||||
|
<h2 className="text-xl font-bold text-gray-900 mb-4">
|
||||||
|
{editingLink ? 'Edit Link' : 'Add Link'}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<form onSubmit={handleLinkSubmit} className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Title *</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
required
|
||||||
|
value={linkFormData.title}
|
||||||
|
onChange={(e) => setLinkFormData(prev => ({ ...prev, title: e.target.value }))}
|
||||||
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||||
|
placeholder="My Website"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">URL *</label>
|
||||||
|
<input
|
||||||
|
type="url"
|
||||||
|
required
|
||||||
|
value={linkFormData.url}
|
||||||
|
onChange={(e) => setLinkFormData(prev => ({ ...prev, url: e.target.value }))}
|
||||||
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||||
|
placeholder="https://example.com"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<label className="flex items-center gap-2">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={linkFormData.isEnabled}
|
||||||
|
onChange={(e) => setLinkFormData(prev => ({ ...prev, isEnabled: e.target.checked }))}
|
||||||
|
className="w-4 h-4 text-blue-600 rounded"
|
||||||
|
/>
|
||||||
|
<span className="text-sm text-gray-700">Visible</span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label className="flex items-center gap-2">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={linkFormData.isComingSoon}
|
||||||
|
onChange={(e) => setLinkFormData(prev => ({ ...prev, isComingSoon: e.target.checked }))}
|
||||||
|
className="w-4 h-4 text-yellow-600 rounded"
|
||||||
|
/>
|
||||||
|
<span className="text-sm text-gray-700">Coming Soon</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-3 pt-4">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setShowLinkModal(false)}
|
||||||
|
className="flex-1 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="flex-1 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
|
||||||
|
>
|
||||||
|
{editingLink ? 'Update' : 'Add'} Link
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Section Modal */}
|
||||||
|
{showSectionModal && (
|
||||||
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
||||||
|
<div className="bg-white rounded-xl w-full max-w-md p-6">
|
||||||
|
<h2 className="text-xl font-bold text-gray-900 mb-4">
|
||||||
|
{editingSection ? 'Edit Section' : 'Add Section'}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<form onSubmit={handleSectionSubmit} className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-2">Type</label>
|
||||||
|
<div className="grid grid-cols-3 gap-2">
|
||||||
|
{[
|
||||||
|
{ id: 'title', label: 'Title', icon: Type },
|
||||||
|
{ id: 'divider', label: 'Divider', icon: Minus },
|
||||||
|
{ id: 'spacer', label: 'Spacer', icon: MoreVertical }
|
||||||
|
].map(({ id, label, icon: Icon }) => (
|
||||||
|
<button
|
||||||
|
key={id}
|
||||||
|
type="button"
|
||||||
|
onClick={() => setSectionFormData(prev => ({ ...prev, type: id }))}
|
||||||
|
className={`p-3 rounded-lg border-2 transition-colors flex flex-col items-center gap-1 ${
|
||||||
|
sectionFormData.type === id
|
||||||
|
? 'border-purple-500 bg-purple-50'
|
||||||
|
: 'border-gray-200 hover:border-gray-300'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<Icon size={20} className="text-purple-600" />
|
||||||
|
<span className="text-xs">{label}</span>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{sectionFormData.type === 'title' && (
|
||||||
|
<>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Title Text</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={sectionFormData.title}
|
||||||
|
onChange={(e) => setSectionFormData(prev => ({ ...prev, title: e.target.value }))}
|
||||||
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||||
|
placeholder="Section Title"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-2">Size</label>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
{['sm', 'md', 'lg', 'xl'].map((size) => (
|
||||||
|
<button
|
||||||
|
key={size}
|
||||||
|
type="button"
|
||||||
|
onClick={() => setSectionFormData(prev => ({ ...prev, fontSize: size }))}
|
||||||
|
className={`flex-1 py-2 text-sm rounded-lg border-2 transition-colors ${
|
||||||
|
sectionFormData.fontSize === size
|
||||||
|
? 'border-purple-500 bg-purple-50 text-purple-700'
|
||||||
|
: 'border-gray-200 hover:border-gray-300'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{size.toUpperCase()}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-2">Weight</label>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
{[
|
||||||
|
{ id: 'normal', label: 'Normal' },
|
||||||
|
{ id: 'medium', label: 'Medium' },
|
||||||
|
{ id: 'semibold', label: 'Semi' },
|
||||||
|
{ id: 'bold', label: 'Bold' }
|
||||||
|
].map(({ id, label }) => (
|
||||||
|
<button
|
||||||
|
key={id}
|
||||||
|
type="button"
|
||||||
|
onClick={() => setSectionFormData(prev => ({ ...prev, fontWeight: id }))}
|
||||||
|
className={`flex-1 py-2 text-sm rounded-lg border-2 transition-colors ${
|
||||||
|
sectionFormData.fontWeight === id
|
||||||
|
? 'border-purple-500 bg-purple-50 text-purple-700'
|
||||||
|
: 'border-gray-200 hover:border-gray-300'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-2">Alignment</label>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
{['left', 'center', 'right'].map((align) => (
|
||||||
|
<button
|
||||||
|
key={align}
|
||||||
|
type="button"
|
||||||
|
onClick={() => setSectionFormData(prev => ({ ...prev, textAlign: align }))}
|
||||||
|
className={`flex-1 py-2 text-sm rounded-lg border-2 transition-colors capitalize ${
|
||||||
|
sectionFormData.textAlign === align
|
||||||
|
? 'border-purple-500 bg-purple-50 text-purple-700'
|
||||||
|
: 'border-gray-200 hover:border-gray-300'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{align}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="flex gap-3 pt-4">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setShowSectionModal(false)}
|
||||||
|
className="flex-1 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="flex-1 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700"
|
||||||
|
>
|
||||||
|
{editingSection ? 'Update' : 'Add'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
99
src/pages/admin/Login.jsx
Normal file
99
src/pages/admin/Login.jsx
Normal file
@@ -0,0 +1,99 @@
|
|||||||
|
import { useState } from 'react'
|
||||||
|
import { Lock, Eye, EyeOff, LogIn } from 'lucide-react'
|
||||||
|
|
||||||
|
export default function Login({ onLogin, clientData }) {
|
||||||
|
const [password, setPassword] = useState('')
|
||||||
|
const [showPassword, setShowPassword] = useState(false)
|
||||||
|
const [error, setError] = useState('')
|
||||||
|
const [loading, setLoading] = useState(false)
|
||||||
|
|
||||||
|
const handleSubmit = async (e) => {
|
||||||
|
e.preventDefault()
|
||||||
|
setError('')
|
||||||
|
setLoading(true)
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Simple password check (in production, use proper hashing)
|
||||||
|
if (password === clientData?.adminPassword) {
|
||||||
|
// Store auth state in sessionStorage
|
||||||
|
sessionStorage.setItem('arklinks_auth', 'true')
|
||||||
|
sessionStorage.setItem('arklinks_auth_time', Date.now().toString())
|
||||||
|
onLogin()
|
||||||
|
} else {
|
||||||
|
setError('Invalid password')
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
setError('An error occurred. Please try again.')
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gradient-to-br from-blue-600 to-purple-700 flex items-center justify-center p-4">
|
||||||
|
<div className="bg-white rounded-2xl shadow-2xl w-full max-w-md p-8">
|
||||||
|
<div className="text-center mb-8">
|
||||||
|
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<Lock className="w-8 h-8 text-blue-600" />
|
||||||
|
</div>
|
||||||
|
<h1 className="text-2xl font-bold text-gray-900">Admin Login</h1>
|
||||||
|
<p className="text-gray-500 mt-2">
|
||||||
|
Enter your password to access the dashboard
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-6">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Password
|
||||||
|
</label>
|
||||||
|
<div className="relative">
|
||||||
|
<input
|
||||||
|
type={showPassword ? 'text' : 'password'}
|
||||||
|
value={password}
|
||||||
|
onChange={(e) => setPassword(e.target.value)}
|
||||||
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 pr-12"
|
||||||
|
placeholder="Enter admin password"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setShowPassword(!showPassword)}
|
||||||
|
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
|
||||||
|
>
|
||||||
|
{showPassword ? <EyeOff size={20} /> : <Eye size={20} />}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div className="bg-red-50 text-red-600 px-4 py-3 rounded-lg text-sm">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={loading}
|
||||||
|
className="w-full flex items-center justify-center gap-2 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 font-medium"
|
||||||
|
>
|
||||||
|
{loading ? (
|
||||||
|
<div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<LogIn size={20} />
|
||||||
|
Sign In
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div className="mt-6 text-center">
|
||||||
|
<a href="/" className="text-sm text-gray-500 hover:text-gray-700">
|
||||||
|
Back to public page
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
317
src/pages/admin/Profile.jsx
Normal file
317
src/pages/admin/Profile.jsx
Normal file
@@ -0,0 +1,317 @@
|
|||||||
|
import { useState, useEffect } from 'react'
|
||||||
|
import { Save, Upload, User, Building, Mail, Phone, MapPin, FileText, Lock, Eye, EyeOff, Shield } from 'lucide-react'
|
||||||
|
import { databases, DATABASE_ID, COLLECTIONS, uploadFile, deleteFile, getFilePreview } from '../../lib/appwrite'
|
||||||
|
|
||||||
|
export default function Profile({ clientData, onUpdate }) {
|
||||||
|
const [saving, setSaving] = useState(false)
|
||||||
|
const [logoFile, setLogoFile] = useState(null)
|
||||||
|
const [logoPreview, setLogoPreview] = useState(null)
|
||||||
|
const [showPassword, setShowPassword] = useState(false)
|
||||||
|
const [passwordData, setPasswordData] = useState({
|
||||||
|
newPassword: '',
|
||||||
|
confirmPassword: '',
|
||||||
|
})
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
businessName: '',
|
||||||
|
description: '',
|
||||||
|
email: '',
|
||||||
|
phone: '',
|
||||||
|
location: '',
|
||||||
|
})
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (clientData) {
|
||||||
|
setFormData({
|
||||||
|
businessName: clientData.businessName || '',
|
||||||
|
description: clientData.description || '',
|
||||||
|
email: clientData.email || '',
|
||||||
|
phone: clientData.phone || '',
|
||||||
|
location: clientData.location || '',
|
||||||
|
})
|
||||||
|
if (clientData.logoFileId) {
|
||||||
|
setLogoPreview(getFilePreview(clientData.logoFileId, 200, 200))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [clientData])
|
||||||
|
|
||||||
|
const handleLogoChange = (e) => {
|
||||||
|
const file = e.target.files[0]
|
||||||
|
if (file) {
|
||||||
|
setLogoFile(file)
|
||||||
|
setLogoPreview(URL.createObjectURL(file))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSave = async () => {
|
||||||
|
// Validate password if being changed
|
||||||
|
if (passwordData.newPassword || passwordData.confirmPassword) {
|
||||||
|
if (passwordData.newPassword !== passwordData.confirmPassword) {
|
||||||
|
alert('Passwords do not match')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (passwordData.newPassword.length < 6) {
|
||||||
|
alert('Password must be at least 6 characters')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setSaving(true)
|
||||||
|
try {
|
||||||
|
let logoFileId = clientData?.logoFileId
|
||||||
|
|
||||||
|
// Upload new logo if changed
|
||||||
|
if (logoFile) {
|
||||||
|
if (clientData?.logoFileId) {
|
||||||
|
await deleteFile(clientData.logoFileId)
|
||||||
|
}
|
||||||
|
logoFileId = await uploadFile(logoFile)
|
||||||
|
setLogoFile(null)
|
||||||
|
}
|
||||||
|
|
||||||
|
const updateData = {
|
||||||
|
businessName: formData.businessName,
|
||||||
|
description: formData.description,
|
||||||
|
email: formData.email,
|
||||||
|
phone: formData.phone,
|
||||||
|
location: formData.location,
|
||||||
|
logoFileId: logoFileId,
|
||||||
|
}
|
||||||
|
|
||||||
|
// Only update password if new one provided
|
||||||
|
if (passwordData.newPassword) {
|
||||||
|
updateData.adminPassword = passwordData.newPassword
|
||||||
|
}
|
||||||
|
|
||||||
|
await databases.updateDocument(DATABASE_ID, COLLECTIONS.CLIENTS, clientData.$id, updateData)
|
||||||
|
|
||||||
|
// Clear password fields after save
|
||||||
|
setPasswordData({ newPassword: '', confirmPassword: '' })
|
||||||
|
|
||||||
|
if (onUpdate) onUpdate()
|
||||||
|
alert('Profile saved successfully!')
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error saving profile:', error)
|
||||||
|
alert('Error saving profile')
|
||||||
|
} finally {
|
||||||
|
setSaving(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<h1 className="text-2xl font-bold text-gray-900">Profile Settings</h1>
|
||||||
|
<button
|
||||||
|
onClick={handleSave}
|
||||||
|
disabled={saving}
|
||||||
|
className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{saving ? (
|
||||||
|
<div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
||||||
|
) : (
|
||||||
|
<Save size={20} />
|
||||||
|
)}
|
||||||
|
Save Changes
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white rounded-xl shadow-sm p-6">
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Logo Section */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-3">Profile Logo</label>
|
||||||
|
<div className="flex items-center gap-6">
|
||||||
|
{logoPreview ? (
|
||||||
|
<img
|
||||||
|
src={logoPreview}
|
||||||
|
alt="Logo"
|
||||||
|
className="w-24 h-24 rounded-xl object-cover shadow-md"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="w-24 h-24 bg-gray-100 rounded-xl flex items-center justify-center">
|
||||||
|
<User className="w-10 h-10 text-gray-400" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="flex-1">
|
||||||
|
<label className="block">
|
||||||
|
<div className="px-6 py-4 border-2 border-dashed border-gray-300 rounded-lg text-center cursor-pointer hover:border-blue-500 transition-colors">
|
||||||
|
<Upload className="w-6 h-6 mx-auto text-gray-400 mb-2" />
|
||||||
|
<span className="text-sm text-gray-600">Upload new logo</span>
|
||||||
|
<p className="text-xs text-gray-400 mt-1">PNG, JPG up to 5MB</p>
|
||||||
|
</div>
|
||||||
|
<input type="file" accept="image/*" onChange={handleLogoChange} className="hidden" />
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr className="border-gray-200" />
|
||||||
|
|
||||||
|
{/* Business Info */}
|
||||||
|
<div className="grid md:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<label className="flex items-center gap-2 text-sm font-medium text-gray-700 mb-2">
|
||||||
|
<Building size={16} />
|
||||||
|
Business Name
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formData.businessName}
|
||||||
|
onChange={(e) => setFormData(p => ({ ...p, businessName: e.target.value }))}
|
||||||
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||||
|
placeholder="Your Business Name"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="flex items-center gap-2 text-sm font-medium text-gray-700 mb-2">
|
||||||
|
<MapPin size={16} />
|
||||||
|
Location
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formData.location}
|
||||||
|
onChange={(e) => setFormData(p => ({ ...p, location: e.target.value }))}
|
||||||
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||||
|
placeholder="City, Country"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="flex items-center gap-2 text-sm font-medium text-gray-700 mb-2">
|
||||||
|
<Mail size={16} />
|
||||||
|
Email
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
value={formData.email}
|
||||||
|
onChange={(e) => setFormData(p => ({ ...p, email: e.target.value }))}
|
||||||
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||||
|
placeholder="contact@example.com"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="flex items-center gap-2 text-sm font-medium text-gray-700 mb-2">
|
||||||
|
<Phone size={16} />
|
||||||
|
Phone
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="tel"
|
||||||
|
value={formData.phone}
|
||||||
|
onChange={(e) => setFormData(p => ({ ...p, phone: e.target.value }))}
|
||||||
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||||
|
placeholder="+1 234 567 8900"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="md:col-span-2">
|
||||||
|
<label className="flex items-center gap-2 text-sm font-medium text-gray-700 mb-2">
|
||||||
|
<FileText size={16} />
|
||||||
|
Description
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
value={formData.description}
|
||||||
|
onChange={(e) => setFormData(p => ({ ...p, description: e.target.value }))}
|
||||||
|
rows={4}
|
||||||
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none"
|
||||||
|
placeholder="Tell visitors about your business..."
|
||||||
|
/>
|
||||||
|
<p className="text-xs text-gray-500 mt-1">
|
||||||
|
This will be displayed below your name on your public page
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Security Section */}
|
||||||
|
<div className="bg-white rounded-xl shadow-sm p-6">
|
||||||
|
<div className="flex items-center gap-3 mb-6">
|
||||||
|
<div className="w-10 h-10 bg-amber-100 rounded-lg flex items-center justify-center">
|
||||||
|
<Shield className="w-5 h-5 text-amber-600" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 className="text-lg font-semibold text-gray-900">Security</h2>
|
||||||
|
<p className="text-sm text-gray-500">Protect your admin dashboard with a password</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
|
||||||
|
<p className="text-sm text-blue-800">
|
||||||
|
{clientData?.adminPassword ? (
|
||||||
|
<>
|
||||||
|
<Lock className="inline w-4 h-4 mr-1" />
|
||||||
|
Password protection is <strong>enabled</strong>. Leave fields empty to keep current password.
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Lock className="inline w-4 h-4 mr-1" />
|
||||||
|
Password protection is <strong>disabled</strong>. Set a password to secure your admin panel.
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="flex items-center gap-2 text-sm font-medium text-gray-700 mb-2">
|
||||||
|
<Lock size={16} />
|
||||||
|
{clientData?.adminPassword ? 'New Password' : 'Set Password'}
|
||||||
|
</label>
|
||||||
|
<div className="relative">
|
||||||
|
<input
|
||||||
|
type={showPassword ? 'text' : 'password'}
|
||||||
|
value={passwordData.newPassword}
|
||||||
|
onChange={(e) => setPasswordData(p => ({ ...p, newPassword: e.target.value }))}
|
||||||
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 pr-12"
|
||||||
|
placeholder={clientData?.adminPassword ? 'Enter new password' : 'Enter password'}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setShowPassword(!showPassword)}
|
||||||
|
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
|
||||||
|
>
|
||||||
|
{showPassword ? <EyeOff size={20} /> : <Eye size={20} />}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="flex items-center gap-2 text-sm font-medium text-gray-700 mb-2">
|
||||||
|
<Lock size={16} />
|
||||||
|
Confirm Password
|
||||||
|
</label>
|
||||||
|
<div className="relative">
|
||||||
|
<input
|
||||||
|
type={showPassword ? 'text' : 'password'}
|
||||||
|
value={passwordData.confirmPassword}
|
||||||
|
onChange={(e) => setPasswordData(p => ({ ...p, confirmPassword: e.target.value }))}
|
||||||
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 pr-12"
|
||||||
|
placeholder="Confirm password"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{passwordData.newPassword && passwordData.confirmPassword && (
|
||||||
|
<div className={`text-sm ${
|
||||||
|
passwordData.newPassword === passwordData.confirmPassword
|
||||||
|
? 'text-green-600'
|
||||||
|
: 'text-red-600'
|
||||||
|
}`}>
|
||||||
|
{passwordData.newPassword === passwordData.confirmPassword
|
||||||
|
? 'Passwords match'
|
||||||
|
: 'Passwords do not match'}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<p className="text-xs text-gray-500">
|
||||||
|
Password must be at least 6 characters. After setting a password, you'll need to sign in to access the admin panel.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
204
src/pages/admin/QRCode.jsx
Normal file
204
src/pages/admin/QRCode.jsx
Normal file
@@ -0,0 +1,204 @@
|
|||||||
|
import { useState, useRef } from 'react'
|
||||||
|
import { QRCodeSVG } from 'qrcode.react'
|
||||||
|
import { Download, Copy, Check } from 'lucide-react'
|
||||||
|
import { getFilePreview } from '../../lib/appwrite'
|
||||||
|
|
||||||
|
export default function QRCode({ clientData }) {
|
||||||
|
const qrRef = useRef(null)
|
||||||
|
const [copied, setCopied] = useState(false)
|
||||||
|
const [settings, setSettings] = useState({
|
||||||
|
size: 256,
|
||||||
|
fgColor: '#000000',
|
||||||
|
bgColor: '#FFFFFF',
|
||||||
|
includeMargin: true,
|
||||||
|
includeLogo: true
|
||||||
|
})
|
||||||
|
|
||||||
|
const pageUrl = window.location.origin
|
||||||
|
|
||||||
|
const downloadQR = () => {
|
||||||
|
const svg = qrRef.current?.querySelector('svg')
|
||||||
|
if (!svg) return
|
||||||
|
|
||||||
|
const svgData = new XMLSerializer().serializeToString(svg)
|
||||||
|
const canvas = document.createElement('canvas')
|
||||||
|
const ctx = canvas.getContext('2d')
|
||||||
|
const img = new Image()
|
||||||
|
|
||||||
|
img.onload = () => {
|
||||||
|
canvas.width = settings.size
|
||||||
|
canvas.height = settings.size
|
||||||
|
ctx.fillStyle = settings.bgColor
|
||||||
|
ctx.fillRect(0, 0, canvas.width, canvas.height)
|
||||||
|
ctx.drawImage(img, 0, 0)
|
||||||
|
|
||||||
|
const pngUrl = canvas.toDataURL('image/png')
|
||||||
|
const link = document.createElement('a')
|
||||||
|
link.download = `${clientData?.businessName || 'arklinks'}-qrcode.png`
|
||||||
|
link.href = pngUrl
|
||||||
|
link.click()
|
||||||
|
}
|
||||||
|
|
||||||
|
img.src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgData)))
|
||||||
|
}
|
||||||
|
|
||||||
|
const copyUrl = () => {
|
||||||
|
navigator.clipboard.writeText(pageUrl)
|
||||||
|
setCopied(true)
|
||||||
|
setTimeout(() => setCopied(false), 2000)
|
||||||
|
}
|
||||||
|
|
||||||
|
const logoUrl = clientData?.logoFileId ? getFilePreview(clientData.logoFileId, 60, 60) : null
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<h1 className="text-2xl font-bold text-gray-900">QR Code</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid lg:grid-cols-2 gap-6">
|
||||||
|
{/* Settings */}
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="bg-white rounded-xl shadow-sm p-6">
|
||||||
|
<h3 className="font-semibold text-gray-900 mb-4">Settings</h3>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Size</label>
|
||||||
|
<select
|
||||||
|
value={settings.size}
|
||||||
|
onChange={(e) => setSettings(prev => ({ ...prev, size: Number(e.target.value) }))}
|
||||||
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg"
|
||||||
|
>
|
||||||
|
<option value={128}>Small (128px)</option>
|
||||||
|
<option value={256}>Medium (256px)</option>
|
||||||
|
<option value={512}>Large (512px)</option>
|
||||||
|
<option value={1024}>Extra Large (1024px)</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">QR Color</label>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<input
|
||||||
|
type="color"
|
||||||
|
value={settings.fgColor}
|
||||||
|
onChange={(e) => setSettings(prev => ({ ...prev, fgColor: e.target.value }))}
|
||||||
|
className="w-10 h-10 rounded cursor-pointer"
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={settings.fgColor}
|
||||||
|
onChange={(e) => setSettings(prev => ({ ...prev, fgColor: e.target.value }))}
|
||||||
|
className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Background</label>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<input
|
||||||
|
type="color"
|
||||||
|
value={settings.bgColor}
|
||||||
|
onChange={(e) => setSettings(prev => ({ ...prev, bgColor: e.target.value }))}
|
||||||
|
className="w-10 h-10 rounded cursor-pointer"
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={settings.bgColor}
|
||||||
|
onChange={(e) => setSettings(prev => ({ ...prev, bgColor: e.target.value }))}
|
||||||
|
className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<label className="flex items-center gap-2">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={settings.includeMargin}
|
||||||
|
onChange={(e) => setSettings(prev => ({ ...prev, includeMargin: e.target.checked }))}
|
||||||
|
className="w-4 h-4 text-blue-600 rounded"
|
||||||
|
/>
|
||||||
|
<span className="text-sm text-gray-700">Include margin</span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
{logoUrl && (
|
||||||
|
<label className="flex items-center gap-2">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={settings.includeLogo}
|
||||||
|
onChange={(e) => setSettings(prev => ({ ...prev, includeLogo: e.target.checked }))}
|
||||||
|
className="w-4 h-4 text-blue-600 rounded"
|
||||||
|
/>
|
||||||
|
<span className="text-sm text-gray-700">Include logo in center</span>
|
||||||
|
</label>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* URL */}
|
||||||
|
<div className="bg-white rounded-xl shadow-sm p-6">
|
||||||
|
<h3 className="font-semibold text-gray-900 mb-4">Your Link</h3>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
readOnly
|
||||||
|
value={pageUrl}
|
||||||
|
className="flex-1 px-4 py-2 bg-gray-50 border border-gray-300 rounded-lg text-sm"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
onClick={copyUrl}
|
||||||
|
className="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors flex items-center gap-2"
|
||||||
|
>
|
||||||
|
{copied ? <Check size={18} className="text-green-600" /> : <Copy size={18} />}
|
||||||
|
{copied ? 'Copied!' : 'Copy'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Preview */}
|
||||||
|
<div className="bg-white rounded-xl shadow-sm p-6">
|
||||||
|
<h3 className="font-semibold text-gray-900 mb-4">Preview</h3>
|
||||||
|
|
||||||
|
<div className="flex flex-col items-center">
|
||||||
|
<div
|
||||||
|
ref={qrRef}
|
||||||
|
className="p-4 rounded-lg"
|
||||||
|
style={{ backgroundColor: settings.bgColor }}
|
||||||
|
>
|
||||||
|
<QRCodeSVG
|
||||||
|
value={pageUrl}
|
||||||
|
size={Math.min(settings.size, 300)}
|
||||||
|
fgColor={settings.fgColor}
|
||||||
|
bgColor={settings.bgColor}
|
||||||
|
includeMargin={settings.includeMargin}
|
||||||
|
imageSettings={settings.includeLogo && logoUrl ? {
|
||||||
|
src: logoUrl,
|
||||||
|
height: Math.min(settings.size, 300) * 0.2,
|
||||||
|
width: Math.min(settings.size, 300) * 0.2,
|
||||||
|
excavate: true
|
||||||
|
} : undefined}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sm text-gray-500 mt-4 text-center">
|
||||||
|
{clientData?.businessName || 'ArkLinks'}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={downloadQR}
|
||||||
|
className="mt-6 flex items-center gap-2 px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
|
||||||
|
>
|
||||||
|
<Download size={20} />
|
||||||
|
Download QR Code
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
358
src/pages/admin/Reviews.jsx
Normal file
358
src/pages/admin/Reviews.jsx
Normal file
@@ -0,0 +1,358 @@
|
|||||||
|
import { useState, useEffect } from 'react'
|
||||||
|
import { Plus, Edit2, Trash2, Star, Upload, User } from 'lucide-react'
|
||||||
|
import { databases, DATABASE_ID, COLLECTIONS, generateId, Query, uploadFile, deleteFile, getFilePreview } from '../../lib/appwrite'
|
||||||
|
|
||||||
|
export default function Reviews({ clientData }) {
|
||||||
|
const [reviews, setReviews] = useState([])
|
||||||
|
const [loading, setLoading] = useState(true)
|
||||||
|
const [showModal, setShowModal] = useState(false)
|
||||||
|
const [editingReview, setEditingReview] = useState(null)
|
||||||
|
const [avatarFile, setAvatarFile] = useState(null)
|
||||||
|
const [avatarPreview, setAvatarPreview] = useState(null)
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
name: '',
|
||||||
|
rating: 5,
|
||||||
|
comment: '',
|
||||||
|
isEnabled: true
|
||||||
|
})
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (clientData?.$id) {
|
||||||
|
loadReviews()
|
||||||
|
}
|
||||||
|
}, [clientData])
|
||||||
|
|
||||||
|
const loadReviews = async () => {
|
||||||
|
try {
|
||||||
|
const response = await databases.listDocuments(DATABASE_ID, COLLECTIONS.REVIEWS, [
|
||||||
|
Query.equal('clientId', clientData.$id),
|
||||||
|
Query.orderAsc('order')
|
||||||
|
])
|
||||||
|
setReviews(response.documents)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error loading reviews:', error)
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const openModal = (review = null) => {
|
||||||
|
if (review) {
|
||||||
|
setEditingReview(review)
|
||||||
|
setFormData({
|
||||||
|
name: review.name,
|
||||||
|
rating: review.rating,
|
||||||
|
comment: review.comment || '',
|
||||||
|
isEnabled: review.isEnabled ?? true
|
||||||
|
})
|
||||||
|
if (review.avatarFileId) {
|
||||||
|
setAvatarPreview(getFilePreview(review.avatarFileId, 100, 100))
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
setEditingReview(null)
|
||||||
|
setFormData({
|
||||||
|
name: '',
|
||||||
|
rating: 5,
|
||||||
|
comment: '',
|
||||||
|
isEnabled: true
|
||||||
|
})
|
||||||
|
setAvatarFile(null)
|
||||||
|
setAvatarPreview(null)
|
||||||
|
}
|
||||||
|
setShowModal(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleAvatarChange = (e) => {
|
||||||
|
const file = e.target.files[0]
|
||||||
|
if (file) {
|
||||||
|
setAvatarFile(file)
|
||||||
|
setAvatarPreview(URL.createObjectURL(file))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSubmit = async (e) => {
|
||||||
|
e.preventDefault()
|
||||||
|
try {
|
||||||
|
let avatarFileId = editingReview?.avatarFileId || null
|
||||||
|
|
||||||
|
if (avatarFile) {
|
||||||
|
if (editingReview?.avatarFileId) {
|
||||||
|
await deleteFile(editingReview.avatarFileId)
|
||||||
|
}
|
||||||
|
avatarFileId = await uploadFile(avatarFile)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (editingReview) {
|
||||||
|
await databases.updateDocument(DATABASE_ID, COLLECTIONS.REVIEWS, editingReview.$id, {
|
||||||
|
name: formData.name,
|
||||||
|
rating: formData.rating,
|
||||||
|
comment: formData.comment,
|
||||||
|
avatarFileId: avatarFileId,
|
||||||
|
isEnabled: formData.isEnabled
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
await databases.createDocument(DATABASE_ID, COLLECTIONS.REVIEWS, generateId(), {
|
||||||
|
clientId: clientData.$id,
|
||||||
|
name: formData.name,
|
||||||
|
rating: formData.rating,
|
||||||
|
comment: formData.comment,
|
||||||
|
avatarFileId: avatarFileId,
|
||||||
|
order: reviews.length,
|
||||||
|
isEnabled: formData.isEnabled
|
||||||
|
})
|
||||||
|
}
|
||||||
|
setShowModal(false)
|
||||||
|
setAvatarFile(null)
|
||||||
|
setAvatarPreview(null)
|
||||||
|
loadReviews()
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error saving review:', error)
|
||||||
|
alert('Error saving review')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const deleteReview = async (review) => {
|
||||||
|
if (!confirm('Are you sure you want to delete this review?')) return
|
||||||
|
try {
|
||||||
|
if (review.avatarFileId) {
|
||||||
|
await deleteFile(review.avatarFileId)
|
||||||
|
}
|
||||||
|
await databases.deleteDocument(DATABASE_ID, COLLECTIONS.REVIEWS, review.$id)
|
||||||
|
loadReviews()
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error deleting review:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const toggleEnabled = async (review) => {
|
||||||
|
try {
|
||||||
|
await databases.updateDocument(DATABASE_ID, COLLECTIONS.REVIEWS, review.$id, {
|
||||||
|
isEnabled: !review.isEnabled
|
||||||
|
})
|
||||||
|
loadReviews()
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error toggling review:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Calculate average rating
|
||||||
|
const averageRating = reviews.length > 0
|
||||||
|
? (reviews.reduce((sum, r) => sum + r.rating, 0) / reviews.length).toFixed(1)
|
||||||
|
: 0
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return <div className="flex justify-center py-12"><div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div></div>
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold text-gray-900">Reviews & Ratings</h1>
|
||||||
|
{reviews.length > 0 && (
|
||||||
|
<div className="flex items-center gap-2 mt-1">
|
||||||
|
<div className="flex">
|
||||||
|
{[1, 2, 3, 4, 5].map((star) => (
|
||||||
|
<Star
|
||||||
|
key={star}
|
||||||
|
size={16}
|
||||||
|
className={star <= Math.round(averageRating) ? 'text-yellow-400 fill-yellow-400' : 'text-gray-300'}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<span className="text-sm text-gray-600">{averageRating} average from {reviews.length} reviews</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={() => openModal()}
|
||||||
|
className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
|
||||||
|
>
|
||||||
|
<Plus size={20} />
|
||||||
|
Add Review
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{reviews.length === 0 ? (
|
||||||
|
<div className="bg-white rounded-xl shadow-sm p-12 text-center">
|
||||||
|
<div className="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<Star className="w-8 h-8 text-yellow-500" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-medium text-gray-900 mb-2">No reviews yet</h3>
|
||||||
|
<p className="text-gray-500 mb-4">Add customer testimonials to build trust</p>
|
||||||
|
<button
|
||||||
|
onClick={() => openModal()}
|
||||||
|
className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
|
||||||
|
>
|
||||||
|
<Plus size={20} />
|
||||||
|
Add First Review
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="grid gap-4 md:grid-cols-2">
|
||||||
|
{reviews.map((review) => (
|
||||||
|
<div key={review.$id} className="bg-white rounded-xl shadow-sm p-5">
|
||||||
|
<div className="flex items-start justify-between mb-3">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
{review.avatarFileId ? (
|
||||||
|
<img
|
||||||
|
src={getFilePreview(review.avatarFileId, 50, 50)}
|
||||||
|
alt={review.name}
|
||||||
|
className="w-12 h-12 rounded-full object-cover"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center">
|
||||||
|
<User className="w-6 h-6 text-gray-400" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div>
|
||||||
|
<h3 className="font-medium text-gray-900">{review.name}</h3>
|
||||||
|
<div className="flex">
|
||||||
|
{[1, 2, 3, 4, 5].map((star) => (
|
||||||
|
<Star
|
||||||
|
key={star}
|
||||||
|
size={14}
|
||||||
|
className={star <= review.rating ? 'text-yellow-400 fill-yellow-400' : 'text-gray-300'}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<button
|
||||||
|
onClick={() => toggleEnabled(review)}
|
||||||
|
className={`px-2 py-1 text-xs rounded-full ${
|
||||||
|
review.isEnabled
|
||||||
|
? 'bg-green-100 text-green-700'
|
||||||
|
: 'bg-gray-100 text-gray-500'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{review.isEnabled ? 'Visible' : 'Hidden'}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => openModal(review)}
|
||||||
|
className="p-1.5 hover:bg-gray-100 rounded-lg text-gray-500"
|
||||||
|
>
|
||||||
|
<Edit2 size={16} />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => deleteReview(review)}
|
||||||
|
className="p-1.5 hover:bg-red-50 rounded-lg text-red-500"
|
||||||
|
>
|
||||||
|
<Trash2 size={16} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{review.comment && (
|
||||||
|
<p className="text-gray-600 text-sm italic">"{review.comment}"</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Modal */}
|
||||||
|
{showModal && (
|
||||||
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
||||||
|
<div className="bg-white rounded-xl w-full max-w-md p-6">
|
||||||
|
<h2 className="text-xl font-bold text-gray-900 mb-4">
|
||||||
|
{editingReview ? 'Edit Review' : 'Add Review'}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||||||
|
{/* Avatar */}
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
{avatarPreview ? (
|
||||||
|
<img src={avatarPreview} alt="Avatar" className="w-16 h-16 rounded-full object-cover" />
|
||||||
|
) : (
|
||||||
|
<div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center">
|
||||||
|
<User className="w-8 h-8 text-gray-400" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<label className="flex-1">
|
||||||
|
<div className="px-4 py-2 border-2 border-dashed border-gray-300 rounded-lg text-center cursor-pointer hover:border-blue-500 transition-colors">
|
||||||
|
<Upload className="w-4 h-4 mx-auto text-gray-400 mb-1" />
|
||||||
|
<span className="text-xs text-gray-600">Upload photo (optional)</span>
|
||||||
|
</div>
|
||||||
|
<input type="file" accept="image/*" onChange={handleAvatarChange} className="hidden" />
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Name *</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
required
|
||||||
|
value={formData.name}
|
||||||
|
onChange={(e) => setFormData(prev => ({ ...prev, name: e.target.value }))}
|
||||||
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||||
|
placeholder="Customer name"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-2">Rating *</label>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
{[1, 2, 3, 4, 5].map((star) => (
|
||||||
|
<button
|
||||||
|
key={star}
|
||||||
|
type="button"
|
||||||
|
onClick={() => setFormData(prev => ({ ...prev, rating: star }))}
|
||||||
|
className="p-1"
|
||||||
|
>
|
||||||
|
<Star
|
||||||
|
size={32}
|
||||||
|
className={`transition-colors ${
|
||||||
|
star <= formData.rating
|
||||||
|
? 'text-yellow-400 fill-yellow-400'
|
||||||
|
: 'text-gray-300 hover:text-yellow-200'
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Review (optional)</label>
|
||||||
|
<textarea
|
||||||
|
value={formData.comment}
|
||||||
|
onChange={(e) => setFormData(prev => ({ ...prev, comment: e.target.value }))}
|
||||||
|
rows={3}
|
||||||
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
|
||||||
|
placeholder="What did they say about you?"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<label className="flex items-center gap-2">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={formData.isEnabled}
|
||||||
|
onChange={(e) => setFormData(prev => ({ ...prev, isEnabled: e.target.checked }))}
|
||||||
|
className="w-4 h-4 text-blue-600 rounded"
|
||||||
|
/>
|
||||||
|
<span className="text-sm text-gray-700">Show on page</span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div className="flex gap-3 pt-4">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => { setShowModal(false); setAvatarFile(null); setAvatarPreview(null); }}
|
||||||
|
className="flex-1 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="flex-1 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
|
||||||
|
>
|
||||||
|
{editingReview ? 'Update' : 'Add'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
248
src/pages/admin/Setup.jsx
Normal file
248
src/pages/admin/Setup.jsx
Normal file
@@ -0,0 +1,248 @@
|
|||||||
|
import { useState } from 'react'
|
||||||
|
import { useNavigate } from 'react-router-dom'
|
||||||
|
import { Upload, ArrowRight, Building2 } from 'lucide-react'
|
||||||
|
import { databases, DATABASE_ID, COLLECTIONS, generateId, uploadFile, getFilePreview } from '../../lib/appwrite'
|
||||||
|
|
||||||
|
export default function Setup({ onSetupComplete }) {
|
||||||
|
const navigate = useNavigate()
|
||||||
|
const [step, setStep] = useState(1)
|
||||||
|
const [loading, setLoading] = useState(false)
|
||||||
|
const [logoPreview, setLogoPreview] = useState(null)
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
businessName: '',
|
||||||
|
description: '',
|
||||||
|
email: '',
|
||||||
|
phone: '',
|
||||||
|
location: '',
|
||||||
|
logoFile: null,
|
||||||
|
logoFileId: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
const handleLogoChange = async (e) => {
|
||||||
|
const file = e.target.files[0]
|
||||||
|
if (file) {
|
||||||
|
setFormData(prev => ({ ...prev, logoFile: file }))
|
||||||
|
setLogoPreview(URL.createObjectURL(file))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSubmit = async (e) => {
|
||||||
|
e.preventDefault()
|
||||||
|
setLoading(true)
|
||||||
|
|
||||||
|
try {
|
||||||
|
let logoFileId = ''
|
||||||
|
|
||||||
|
// Upload logo if exists
|
||||||
|
if (formData.logoFile) {
|
||||||
|
logoFileId = await uploadFile(formData.logoFile)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create client record
|
||||||
|
const clientId = generateId()
|
||||||
|
await databases.createDocument(
|
||||||
|
DATABASE_ID,
|
||||||
|
COLLECTIONS.CLIENTS,
|
||||||
|
clientId,
|
||||||
|
{
|
||||||
|
businessName: formData.businessName,
|
||||||
|
description: formData.description,
|
||||||
|
email: formData.email || null,
|
||||||
|
phone: formData.phone || null,
|
||||||
|
location: formData.location || null,
|
||||||
|
logoFileId: logoFileId || null,
|
||||||
|
isSetupComplete: true
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
// Create default theme
|
||||||
|
await databases.createDocument(
|
||||||
|
DATABASE_ID,
|
||||||
|
COLLECTIONS.THEMES,
|
||||||
|
generateId(),
|
||||||
|
{
|
||||||
|
clientId: clientId,
|
||||||
|
primaryColor: '#3B82F6',
|
||||||
|
secondaryColor: '#1D4ED8',
|
||||||
|
backgroundColor: '#F3F4F6',
|
||||||
|
textColor: '#111827',
|
||||||
|
buttonStyle: 'rounded',
|
||||||
|
buttonColor: '#3B82F6',
|
||||||
|
fontFamily: 'Inter',
|
||||||
|
backgroundType: 'solid'
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
onSetupComplete()
|
||||||
|
navigate('/admin')
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Setup error:', error)
|
||||||
|
alert('Setup failed. Please check your Appwrite configuration.')
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gradient-to-br from-blue-600 to-purple-700 flex items-center justify-center p-4">
|
||||||
|
<div className="bg-white rounded-2xl shadow-2xl w-full max-w-lg p-8">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="text-center mb-8">
|
||||||
|
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<Building2 className="w-8 h-8 text-blue-600" />
|
||||||
|
</div>
|
||||||
|
<h1 className="text-2xl font-bold text-gray-900">Welcome to ArkLinks</h1>
|
||||||
|
<p className="text-gray-500 mt-2">Let's set up your link page</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Progress */}
|
||||||
|
<div className="flex items-center justify-center gap-2 mb-8">
|
||||||
|
{[1, 2].map((s) => (
|
||||||
|
<div
|
||||||
|
key={s}
|
||||||
|
className={`h-2 w-16 rounded-full transition-colors ${
|
||||||
|
s <= step ? 'bg-blue-600' : 'bg-gray-200'
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmit}>
|
||||||
|
{step === 1 && (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Business Name *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
required
|
||||||
|
value={formData.businessName}
|
||||||
|
onChange={(e) => setFormData(prev => ({ ...prev, businessName: e.target.value }))}
|
||||||
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||||
|
placeholder="Your Business Name"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Description
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
value={formData.description}
|
||||||
|
onChange={(e) => setFormData(prev => ({ ...prev, description: e.target.value }))}
|
||||||
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||||
|
placeholder="Tell visitors about your business..."
|
||||||
|
rows={3}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Logo
|
||||||
|
</label>
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
{logoPreview ? (
|
||||||
|
<img src={logoPreview} alt="Logo preview" className="w-16 h-16 rounded-full object-cover" />
|
||||||
|
) : (
|
||||||
|
<div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center">
|
||||||
|
<Upload className="w-6 h-6 text-gray-400" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<label className="flex-1">
|
||||||
|
<div className="px-4 py-2 border-2 border-dashed border-gray-300 rounded-lg text-center cursor-pointer hover:border-blue-500 transition-colors">
|
||||||
|
<span className="text-sm text-gray-600">Click to upload</span>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
accept="image/*"
|
||||||
|
onChange={handleLogoChange}
|
||||||
|
className="hidden"
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setStep(2)}
|
||||||
|
disabled={!formData.businessName}
|
||||||
|
className="w-full py-3 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
|
||||||
|
>
|
||||||
|
Continue
|
||||||
|
<ArrowRight size={18} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{step === 2 && (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Email
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
value={formData.email}
|
||||||
|
onChange={(e) => setFormData(prev => ({ ...prev, email: e.target.value }))}
|
||||||
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||||
|
placeholder="contact@business.com"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Phone
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="tel"
|
||||||
|
value={formData.phone}
|
||||||
|
onChange={(e) => setFormData(prev => ({ ...prev, phone: e.target.value }))}
|
||||||
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||||
|
placeholder="+1 234 567 8900"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Location
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formData.location}
|
||||||
|
onChange={(e) => setFormData(prev => ({ ...prev, location: e.target.value }))}
|
||||||
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||||
|
placeholder="City, Country"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-3">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setStep(1)}
|
||||||
|
className="flex-1 py-3 border border-gray-300 text-gray-700 rounded-lg font-medium hover:bg-gray-50"
|
||||||
|
>
|
||||||
|
Back
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={loading}
|
||||||
|
className="flex-1 py-3 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 disabled:opacity-50 flex items-center justify-center gap-2"
|
||||||
|
>
|
||||||
|
{loading ? (
|
||||||
|
<div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
Complete Setup
|
||||||
|
<ArrowRight size={18} />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
291
src/pages/admin/Social.jsx
Normal file
291
src/pages/admin/Social.jsx
Normal file
@@ -0,0 +1,291 @@
|
|||||||
|
import { useState, useEffect } from 'react'
|
||||||
|
import { Plus, Edit2, Trash2, GripVertical } from 'lucide-react'
|
||||||
|
import {
|
||||||
|
Facebook, Twitter, Instagram, Linkedin, Youtube, Github,
|
||||||
|
MessageCircle, Send, Music2, Globe
|
||||||
|
} from 'lucide-react'
|
||||||
|
import { databases, DATABASE_ID, COLLECTIONS, generateId, Query } from '../../lib/appwrite'
|
||||||
|
|
||||||
|
const PLATFORMS = [
|
||||||
|
{ id: 'facebook', name: 'Facebook', icon: Facebook, color: '#1877F2' },
|
||||||
|
{ id: 'twitter', name: 'X (Twitter)', icon: Twitter, color: '#000000' },
|
||||||
|
{ id: 'instagram', name: 'Instagram', icon: Instagram, color: '#E4405F' },
|
||||||
|
{ id: 'linkedin', name: 'LinkedIn', icon: Linkedin, color: '#0A66C2' },
|
||||||
|
{ id: 'youtube', name: 'YouTube', icon: Youtube, color: '#FF0000' },
|
||||||
|
{ id: 'github', name: 'GitHub', icon: Github, color: '#181717' },
|
||||||
|
{ id: 'tiktok', name: 'TikTok', icon: Music2, color: '#000000' },
|
||||||
|
{ id: 'whatsapp', name: 'WhatsApp', icon: MessageCircle, color: '#25D366' },
|
||||||
|
{ id: 'telegram', name: 'Telegram', icon: Send, color: '#26A5E4' },
|
||||||
|
{ id: 'website', name: 'Website', icon: Globe, color: '#4B5563' },
|
||||||
|
]
|
||||||
|
|
||||||
|
export default function Social({ clientData }) {
|
||||||
|
const [socialLinks, setSocialLinks] = useState([])
|
||||||
|
const [loading, setLoading] = useState(true)
|
||||||
|
const [showModal, setShowModal] = useState(false)
|
||||||
|
const [editingLink, setEditingLink] = useState(null)
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
platform: 'facebook',
|
||||||
|
url: '',
|
||||||
|
isEnabled: true
|
||||||
|
})
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (clientData?.$id) {
|
||||||
|
loadSocialLinks()
|
||||||
|
}
|
||||||
|
}, [clientData])
|
||||||
|
|
||||||
|
const loadSocialLinks = async () => {
|
||||||
|
try {
|
||||||
|
const response = await databases.listDocuments(DATABASE_ID, COLLECTIONS.SOCIAL_LINKS, [
|
||||||
|
Query.equal('clientId', clientData.$id),
|
||||||
|
Query.orderAsc('order')
|
||||||
|
])
|
||||||
|
setSocialLinks(response.documents)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error loading social links:', error)
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const getPlatformInfo = (platformId) => {
|
||||||
|
return PLATFORMS.find(p => p.id === platformId) || PLATFORMS[PLATFORMS.length - 1]
|
||||||
|
}
|
||||||
|
|
||||||
|
const openModal = (link = null) => {
|
||||||
|
if (link) {
|
||||||
|
setEditingLink(link)
|
||||||
|
setFormData({
|
||||||
|
platform: link.platform,
|
||||||
|
url: link.url,
|
||||||
|
isEnabled: link.isEnabled ?? true
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
setEditingLink(null)
|
||||||
|
setFormData({
|
||||||
|
platform: 'facebook',
|
||||||
|
url: '',
|
||||||
|
isEnabled: true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
setShowModal(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSubmit = async (e) => {
|
||||||
|
e.preventDefault()
|
||||||
|
try {
|
||||||
|
if (editingLink) {
|
||||||
|
await databases.updateDocument(DATABASE_ID, COLLECTIONS.SOCIAL_LINKS, editingLink.$id, {
|
||||||
|
platform: formData.platform,
|
||||||
|
url: formData.url,
|
||||||
|
isEnabled: formData.isEnabled
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
await databases.createDocument(DATABASE_ID, COLLECTIONS.SOCIAL_LINKS, generateId(), {
|
||||||
|
clientId: clientData.$id,
|
||||||
|
platform: formData.platform,
|
||||||
|
url: formData.url,
|
||||||
|
order: socialLinks.length,
|
||||||
|
isEnabled: formData.isEnabled
|
||||||
|
})
|
||||||
|
}
|
||||||
|
setShowModal(false)
|
||||||
|
loadSocialLinks()
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error saving social link:', error)
|
||||||
|
alert('Error saving social link')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const deleteLink = async (linkId) => {
|
||||||
|
if (!confirm('Are you sure you want to delete this social link?')) return
|
||||||
|
try {
|
||||||
|
await databases.deleteDocument(DATABASE_ID, COLLECTIONS.SOCIAL_LINKS, linkId)
|
||||||
|
loadSocialLinks()
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error deleting social link:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const toggleEnabled = async (link) => {
|
||||||
|
try {
|
||||||
|
await databases.updateDocument(DATABASE_ID, COLLECTIONS.SOCIAL_LINKS, link.$id, {
|
||||||
|
isEnabled: !link.isEnabled
|
||||||
|
})
|
||||||
|
loadSocialLinks()
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error toggling link:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return <div className="flex justify-center py-12"><div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div></div>
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<h1 className="text-2xl font-bold text-gray-900">Social Media</h1>
|
||||||
|
<button
|
||||||
|
onClick={() => openModal()}
|
||||||
|
className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
|
||||||
|
>
|
||||||
|
<Plus size={20} />
|
||||||
|
Add Social
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{socialLinks.length === 0 ? (
|
||||||
|
<div className="bg-white rounded-xl shadow-sm p-12 text-center">
|
||||||
|
<div className="flex justify-center gap-2 mb-4">
|
||||||
|
{[Facebook, Instagram, Twitter].map((Icon, i) => (
|
||||||
|
<div key={i} className="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center">
|
||||||
|
<Icon className="w-6 h-6 text-gray-400" />
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-medium text-gray-900 mb-2">No social links yet</h3>
|
||||||
|
<p className="text-gray-500 mb-4">Connect your social media profiles</p>
|
||||||
|
<button
|
||||||
|
onClick={() => openModal()}
|
||||||
|
className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
|
||||||
|
>
|
||||||
|
<Plus size={20} />
|
||||||
|
Add Social Link
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="bg-white rounded-xl shadow-sm divide-y">
|
||||||
|
{socialLinks.map((link) => {
|
||||||
|
const platform = getPlatformInfo(link.platform)
|
||||||
|
const Icon = platform.icon
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div key={link.$id} className="p-4 flex items-center gap-4">
|
||||||
|
<div className="text-gray-400 cursor-move">
|
||||||
|
<GripVertical size={20} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className="w-10 h-10 rounded-full flex items-center justify-center text-white"
|
||||||
|
style={{ backgroundColor: platform.color }}
|
||||||
|
>
|
||||||
|
<Icon size={20} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<h3 className="font-medium text-gray-900">{platform.name}</h3>
|
||||||
|
<p className="text-sm text-gray-500 truncate">{link.url}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<button
|
||||||
|
onClick={() => toggleEnabled(link)}
|
||||||
|
className={`px-3 py-1 text-sm rounded-full ${
|
||||||
|
link.isEnabled
|
||||||
|
? 'bg-green-100 text-green-700'
|
||||||
|
: 'bg-gray-100 text-gray-500'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{link.isEnabled ? 'Active' : 'Hidden'}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={() => openModal(link)}
|
||||||
|
className="p-2 hover:bg-gray-100 rounded-lg text-gray-500"
|
||||||
|
>
|
||||||
|
<Edit2 size={18} />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={() => deleteLink(link.$id)}
|
||||||
|
className="p-2 hover:bg-red-50 rounded-lg text-red-500"
|
||||||
|
>
|
||||||
|
<Trash2 size={18} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Modal */}
|
||||||
|
{showModal && (
|
||||||
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
||||||
|
<div className="bg-white rounded-xl w-full max-w-md p-6">
|
||||||
|
<h2 className="text-xl font-bold text-gray-900 mb-4">
|
||||||
|
{editingLink ? 'Edit Social Link' : 'Add Social Link'}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-2">Platform</label>
|
||||||
|
<div className="grid grid-cols-5 gap-2">
|
||||||
|
{PLATFORMS.map((platform) => {
|
||||||
|
const Icon = platform.icon
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={platform.id}
|
||||||
|
type="button"
|
||||||
|
onClick={() => setFormData(prev => ({ ...prev, platform: platform.id }))}
|
||||||
|
className={`p-3 rounded-lg border-2 transition-colors ${
|
||||||
|
formData.platform === platform.id
|
||||||
|
? 'border-blue-500 bg-blue-50'
|
||||||
|
: 'border-gray-200 hover:border-gray-300'
|
||||||
|
}`}
|
||||||
|
title={platform.name}
|
||||||
|
>
|
||||||
|
<Icon size={20} className="mx-auto" style={{ color: platform.color }} />
|
||||||
|
</button>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">URL *</label>
|
||||||
|
<input
|
||||||
|
type="url"
|
||||||
|
required
|
||||||
|
value={formData.url}
|
||||||
|
onChange={(e) => setFormData(prev => ({ ...prev, url: e.target.value }))}
|
||||||
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||||
|
placeholder="https://facebook.com/yourpage"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<label className="flex items-center gap-2">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={formData.isEnabled}
|
||||||
|
onChange={(e) => setFormData(prev => ({ ...prev, isEnabled: e.target.checked }))}
|
||||||
|
className="w-4 h-4 text-blue-600 rounded"
|
||||||
|
/>
|
||||||
|
<span className="text-sm text-gray-700">Visible on page</span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div className="flex gap-3 pt-4">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setShowModal(false)}
|
||||||
|
className="flex-1 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="flex-1 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
|
||||||
|
>
|
||||||
|
{editingLink ? 'Update' : 'Add'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
1471
src/pages/admin/Theme.jsx
Normal file
1471
src/pages/admin/Theme.jsx
Normal file
File diff suppressed because it is too large
Load Diff
11
tailwind.config.js
Normal file
11
tailwind.config.js
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
export default {
|
||||||
|
content: [
|
||||||
|
"./index.html",
|
||||||
|
"./src/**/*.{js,ts,jsx,tsx}",
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
9
vite.config.js
Normal file
9
vite.config.js
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
server: {
|
||||||
|
port: 3000
|
||||||
|
}
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user