Skip to content

feat: add organization services and gallery management with UI integr… #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
codestcode merged 1 commit into from
Jul 10, 2026
Merged

feat: add organization services and gallery management with UI integr… #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
109 changes: 94 additions & 15 deletions app/client/organization/[id]/ClientPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,19 @@
import { useEffect, useState } from 'react'
import { useRouter } from 'next/navigation'
import Image from 'next/image'
import { ArrowLeft, Building2, Star, MapPin, User, Users } from 'lucide-react'
import { ArrowLeft, Building2, Star, MapPin, User, Users, Briefcase, Image as ImageIcon, Phone } from 'lucide-react'
import { createClient } from '@/lib/supabase/client'
import type { Organization, OrganizationWorker, OrganizationWorkerPortfolio } from '@/lib/types'
import type { Organization, OrganizationWorker, OrganizationWorkerPortfolio, OrganizationService, OrganizationGallery } from '@/lib/types'

interface OrgProfile extends Organization {
workers: (OrganizationWorker & { portfolio: OrganizationWorkerPortfolio[] })[]
services: OrganizationService[]
gallery: OrganizationGallery[]
owner_phone?: string | null
owner_email?: string | null
}

export default function OrgProfilePage({ params }: { params: any }) {
export default function OrgProfilePage({ id }: { id: string }) {
const router = useRouter()
const supabase = createClient()
const [org, setOrg] = useState<OrgProfile | null>(null)
Expand All @@ -22,20 +26,37 @@ export default function OrgProfilePage({ params }: { params: any }) {
const { data: orgData } = await supabase
.from('organizations')
.select('*')
.eq('id', params.id)
.eq('id', id)
.eq('is_active', true)
.single()

if (orgData) {
const { data: workerData } = await supabase
.from('organization_workers')
.select('*')
.eq('organization_id', orgData.id)
.eq('is_active', true)
.order('created_at', { ascending: true })
const [workerData, servicesData, galleryData, ownerProfile] = await Promise.all([
supabase
.from('organization_workers')
.select('*')
.eq('organization_id', orgData.id)
.eq('is_active', true)
.order('created_at', { ascending: true }),
supabase
.from('organization_services')
.select('*')
.eq('organization_id', orgData.id)
.order('sort_order', { ascending: true }),
supabase
.from('organization_gallery')
.select('*')
.eq('organization_id', orgData.id)
.order('sort_order', { ascending: true }),
supabase
.from('profiles')
.select('phone, email')
.eq('id', orgData.owner_id)
.maybeSingle(),
])

const workersWithPortfolio = await Promise.all(
(workerData || []).map(async (w) => {
(workerData.data || []).map(async (w) => {
const { data: portfolio } = await supabase
.from('organization_worker_portfolio')
.select('*')
Expand All @@ -45,12 +66,19 @@ export default function OrgProfilePage({ params }: { params: any }) {
})
)

setOrg({ ...orgData, workers: workersWithPortfolio })
setOrg({
...orgData,
workers: workersWithPortfolio,
services: servicesData.data || [],
gallery: galleryData.data || [],
owner_phone: ownerProfile.data?.phone || null,
owner_email: ownerProfile.data?.email || null,
})
}
setLoading(false)
}
fetchOrg()
}, [params.id, supabase])
}, [id, supabase])

if (loading) {
return (
Expand Down Expand Up @@ -97,6 +125,12 @@ export default function OrgProfilePage({ params }: { params: any }) {
<span>{org.city}</span>
</div>
)}
{org.owner_phone && (
<div className="flex items-center gap-2 text-[#C7C5CF] text-sm mt-2" dir="ltr">
<Phone size={16} className="text-[#22C55E]" />
<span>{org.owner_phone}</span>
</div>
)}
</div>

{/* Stats */}
Expand All @@ -108,13 +142,59 @@ export default function OrgProfilePage({ params }: { params: any }) {
</div>
<p className="text-white/70 text-sm mt-1">عمال</p>
</div>
<div className="flex-1 bg-[#0C1222] rounded-2xl py-4 text-center">
<Briefcase size={16} className="text-[#FF8A00]" />
<p className="text-white font-bold">{org.services.length}</p>
<p className="text-white/70 text-sm mt-1">خدمات</p>
</div>
<div className="flex-1 bg-[#0C1222] rounded-2xl py-4 text-center">
<Star size={20} className="text-[#FFB800] mx-auto" />
<p className="text-white/70 text-sm mt-1">قريباً</p>
</div>
</div>

{/* Workers Grid */}
{/* Gallery */}
{org.gallery.length > 0 && (
<div className="mt-8">
<h3 className="text-white font-bold text-base mb-4 flex items-center gap-2">
<ImageIcon size={16} className="text-[#FF8A00]" />
معرض الأعمال
</h3>
<div className="grid grid-cols-4 gap-2">
{org.gallery.map((photo) => (
<div key={photo.id} className="aspect-square rounded-xl overflow-hidden bg-[#1E2538]">
<Image src={photo.image_url} alt="" width={200} height={200} className="w-full h-full object-cover" />
</div>
))}
</div>
</div>
)}

{/* Services */}
{org.services.length > 0 && (
<div className="mt-8">
<h3 className="text-white font-bold text-base mb-4">الخدمات</h3>
<div className="flex flex-col gap-3">
{org.services.map((service) => (
<div key={service.id} className="bg-[#0C1222] rounded-2xl p-4 border border-white/5">
<div className="flex items-center justify-between">
<div>
<h4 className="text-white font-bold text-sm">{service.name}</h4>
{service.description && (
<p className="text-[#C7C5CF] text-xs mt-1 leading-5">{service.description}</p>
)}
</div>
{service.price && (
<span className="text-[#FF8A00] font-bold text-sm shrink-0 mr-3">{service.price} ج.م</span>
)}
</div>
</div>
))}
</div>
</div>
)}

{/* Workers */}
<div className="mt-8">
<h3 className="text-white font-bold text-base mb-4">فريق العمل</h3>
{org.workers.length === 0 ? (
Expand All @@ -141,7 +221,6 @@ export default function OrgProfilePage({ params }: { params: any }) {
</div>
</div>

{/* Portfolio Gallery */}
{worker.portfolio.length > 0 && (
<div className="mt-3 grid grid-cols-4 gap-2">
{worker.portfolio.map((photo) => (
Expand Down
5 changes: 3 additions & 2 deletions app/client/organization/[id]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ export function generateStaticParams() {
return [{ id: 'dummy' }];
}

export default function Page({ params }: { params: any }) {
return <ClientPage params={params} />;
export default async function Page({ params }: { params: Promise<{ id: string }> }) {
const { id } = await params;
return <ClientPage id={id} />;
}
83 changes: 81 additions & 2 deletions app/organization/home/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
'use client'

import { useState } from 'react'
import { useState, useEffect } from 'react'
import { useRouter } from 'next/navigation'
import {
Building2, Users, Plus, Pencil, Trash2, Camera, X, Upload,
Search, UserPlus, User, Crown, ArrowUpCircle
Search, UserPlus, User, Crown, ArrowUpCircle, Image as ImageIcon
} from 'lucide-react'
import { PageHeader } from '@/components/ui/PageHeader'
import { SubPageLayout } from '@/components/ui/SubPageLayout'
Expand Down Expand Up @@ -44,6 +44,49 @@ export default function OrgHomePage() {

const [uploadingWorkerId, setUploadingWorkerId] = useState<string | null>(null)

const [gallery, setGallery] = useState<{ id: string; image_url: string }[]>([])
const [uploadingGallery, setUploadingGallery] = useState(false)

useEffect(() => {
if (!org?.id) return
supabase.from('organization_gallery').select('id, image_url').eq('organization_id', org.id).order('sort_order', { ascending: true }).then(({ data }) => {
if (data) setGallery(data)
})
}, [org?.id, supabase, org?.worker_count])

const handleGalleryUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0]
if (!file || !org) return
setUploadingGallery(true)
const reader = new FileReader()
reader.onloadend = async () => {
try {
const res = await fetch('/api/upload-booking-images', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ images: [reader.result] }),
})
const result = await res.json()
if (result.success && result.urls[0]) {
await supabase.from('organization_gallery').insert({
organization_id: org.id,
image_url: result.urls[0],
sort_order: gallery.length,
})
const { data } = await supabase.from('organization_gallery').select('id, image_url').eq('organization_id', org.id).order('sort_order', { ascending: true })
if (data) setGallery(data)
}
} catch (err) { console.error(err) }
setUploadingGallery(false)
}
reader.readAsDataURL(file)
}

const handleRemoveGalleryPhoto = async (photoId: string) => {
await supabase.from('organization_gallery').delete().eq('id', photoId)
setGallery(p => p.filter(g => g.id !== photoId))
}

const categories = ['سباكة', 'كهرباء', 'نجارة', 'دهان', 'تكييف', 'تبريد', 'عزل أسطح', 'سيراميك', 'حدادة', 'زجاج']

const handleCreateOrg = async (e: React.FormEvent) => {
Expand Down Expand Up @@ -330,6 +373,42 @@ export default function OrgHomePage() {
</div>
)}

{/* Gallery Section */}
<div className="mx-6 mb-4">
<div className="flex items-center justify-between mb-3">
<h3 className="text-sm font-bold flex items-center gap-2">
<ImageIcon size={16} className="text-[#FF8A00]" />
معرض الأعمال
</h3>
{gallery.length < 4 && (
<>
<input type="file" accept="image/*" className="hidden" id="gallery-upload" onChange={handleGalleryUpload} />
<button onClick={() => document.getElementById('gallery-upload')?.click()} disabled={uploadingGallery} className="text-xs text-[#FF8A00] font-bold flex items-center gap-1">
<Upload size={12} />
{uploadingGallery ? 'جاري الرفع...' : `إضافة صورة (${gallery.length}/4)`}
</button>
</>
)}
</div>
{gallery.length === 0 ? (
<div className="bg-[#0A0D1A] rounded-2xl p-6 flex flex-col items-center text-center border border-dashed border-white/5">
<ImageIcon size={28} className="text-[#4B5A7A] mb-2" />
<p className="text-xs text-[#6B7A99]">أضف صوراً لأعمال المؤسسة (الحد الأقصى 4)</p>
</div>
) : (
<div className="grid grid-cols-4 gap-2">
{gallery.map((photo) => (
<div key={photo.id} className="relative aspect-square rounded-xl overflow-hidden bg-[#1E2538] group">
<Image src={photo.image_url} alt="" width={200} height={200} className="w-full h-full object-cover" />
<button onClick={() => handleRemoveGalleryPhoto(photo.id)} className="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<X size={16} className="text-white" />
</button>
</div>
))}
</div>
)}
</div>

<div className="px-6">
<div className="flex items-center justify-between mb-4">
<h3 className="text-sm font-bold">العمال والفنيين</h3>
Expand Down
Loading
Loading