Hackathon: better frontend (#61)
* feat: enhance team browsing with member count and view team option * feat: add default banner image for teams without a custom banner * feat: implement user profile page and user layout component * feat: improve browse team filtering layout * feat: limit join request button visibility based on team member count * feat: enhance user profile and team dashboard layouts for improved responsiveness * feat: add location, bio, and skills fields to user profile schema and form * feat: enhance team display and user information layout for better readability * feat: update join request button visibility logic based on user team membership * feat: enhance team and user profile layouts with improved text truncation and responsiveness
This commit is contained in:
Ivan Rizkyanto
@@ -78,7 +78,7 @@ const TeamDashboardPage: FC = (): ReactElement => {
|
||||
{/* Header with Banner */}
|
||||
<div className="bg-white border-b">
|
||||
{team.banner && (
|
||||
<div className="w-full h-48 overflow-hidden">
|
||||
<div className="w-full h-32 md:h-48 overflow-hidden">
|
||||
<img
|
||||
src={team.banner}
|
||||
alt={team.name}
|
||||
@@ -86,20 +86,20 @@ const TeamDashboardPage: FC = (): ReactElement => {
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 md:py-6">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="flex items-center space-x-3 md:space-x-4">
|
||||
{team.logo && (
|
||||
<img
|
||||
src={team.logo}
|
||||
alt={team.name}
|
||||
className="w-20 h-20 rounded-full object-cover border-4 border-white shadow-lg -mt-10"
|
||||
className="w-16 h-16 md:w-20 md:h-20 rounded-full object-cover border-4 border-white shadow-lg -mt-8 md:-mt-10"
|
||||
/>
|
||||
)}
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900">{team.name}</h1>
|
||||
<p className="text-gray-600 mt-1">📍 {team.city}</p>
|
||||
<div className="flex items-center space-x-4 mt-2">
|
||||
<h1 className="text-xl md:text-3xl font-bold text-gray-900 line-clamp-2">{team.name}</h1>
|
||||
<p className="text-sm md:text-base text-gray-600 mt-1 line-clamp-1">📍 {team.city}</p>
|
||||
<div className="flex flex-wrap items-center gap-2 md:space-x-4 mt-2">
|
||||
<span className="text-sm text-gray-500">
|
||||
{members.length} {members.length === 1 ? 'Member' : 'Members'}
|
||||
</span>
|
||||
@@ -107,34 +107,34 @@ const TeamDashboardPage: FC = (): ReactElement => {
|
||||
{team.visibility === 'public' ? '🌐 Public' : '🔒 Private'}
|
||||
</span>
|
||||
{isLeader && (
|
||||
<span className="px-3 py-1 bg-blue-600 text-white rounded-md text-sm font-semibold shadow-sm">
|
||||
<span className="hidden md:inline-flex px-3 py-1 bg-blue-600 text-white rounded-md text-sm font-semibold shadow-sm">
|
||||
👑 Team Leader
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Link to="/dashboard">
|
||||
<Link to="/dashboard" className="hidden md:block">
|
||||
<Button variant="secondary">Back to Dashboard</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<div className="grid gap-6 lg:grid-cols-3">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 md:py-8">
|
||||
<div className="grid gap-4 md:gap-6 lg:grid-cols-3">
|
||||
{/* Main Content */}
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
<div className="lg:col-span-2 space-y-4 md:space-y-6">
|
||||
{/* Team Description */}
|
||||
<div className="bg-white rounded-lg shadow-md p-6">
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-4">About Team</h2>
|
||||
<div className="bg-white rounded-lg shadow-md p-4 md:p-6">
|
||||
<h2 className="text-lg md:text-xl font-bold text-gray-900 mb-3 md:mb-4">About Team</h2>
|
||||
<p className="text-gray-700 whitespace-pre-wrap">{team.description}</p>
|
||||
</div>
|
||||
|
||||
{/* Team Actions - Only for Leader */}
|
||||
{isLeader && (
|
||||
<div className="bg-white rounded-lg shadow-md p-6">
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-4">Team Management</h2>
|
||||
<div className="bg-white rounded-lg shadow-md p-4 md:p-6">
|
||||
<h2 className="text-lg md:text-xl font-bold text-gray-900 mb-3 md:mb-4">Team Management</h2>
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<Button
|
||||
className="w-full"
|
||||
@@ -187,8 +187,8 @@ const TeamDashboardPage: FC = (): ReactElement => {
|
||||
|
||||
{/* Quick Actions for Members */}
|
||||
{!isLeader && (
|
||||
<div className="bg-white rounded-lg shadow-md p-6">
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-4">Quick Actions</h2>
|
||||
<div className="bg-white rounded-lg shadow-md p-4 md:p-6">
|
||||
<h2 className="text-lg md:text-xl font-bold text-gray-900 mb-3 md:mb-4">Quick Actions</h2>
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<Link to={`/teams/${teamId}/chat`}>
|
||||
<Button className="w-full" variant="secondary">
|
||||
@@ -208,7 +208,7 @@ const TeamDashboardPage: FC = (): ReactElement => {
|
||||
|
||||
{/* Submission Status */}
|
||||
{team.has_submission && (
|
||||
<div className="bg-green-50 border border-green-200 rounded-lg p-6">
|
||||
<div className="bg-green-50 border border-green-200 rounded-lg p-4 md:p-6">
|
||||
<div className="flex items-center space-x-3">
|
||||
<span className="text-3xl">✅</span>
|
||||
<div>
|
||||
@@ -228,12 +228,15 @@ const TeamDashboardPage: FC = (): ReactElement => {
|
||||
</div>
|
||||
|
||||
{/* Sidebar */}
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-4 md:space-y-6">
|
||||
{/* Team Leader */}
|
||||
<div className="bg-white rounded-lg shadow-md p-6">
|
||||
<h3 className="font-bold text-gray-900 mb-4">Team Leader</h3>
|
||||
<div className="bg-white rounded-lg shadow-md p-4 md:p-6">
|
||||
<h3 className="text-base md:text-lg font-bold text-gray-900 mb-3 md:mb-4">Team Leader</h3>
|
||||
{team.leader && (
|
||||
<div className="flex items-center space-x-3">
|
||||
<button
|
||||
onClick={() => navigate(`/users/${team.leader.id}`)}
|
||||
className="w-full flex items-center space-x-3 hover:bg-gray-100 rounded-lg p-2 transition-colors text-left cursor-pointer"
|
||||
>
|
||||
{team.leader.avatar ? (
|
||||
<img
|
||||
src={team.leader.avatar}
|
||||
@@ -249,18 +252,22 @@ const TeamDashboardPage: FC = (): ReactElement => {
|
||||
<p className="font-medium text-gray-900">{team.leader.fullname}</p>
|
||||
<p className="text-sm text-gray-600">{team.leader.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Team Members */}
|
||||
<div className="bg-white rounded-lg shadow-md p-6">
|
||||
<h3 className="font-bold text-gray-900 mb-4">
|
||||
<div className="bg-white rounded-lg shadow-md p-4 md:p-6">
|
||||
<h3 className="text-base md:text-lg font-bold text-gray-900 mb-3 md:mb-4">
|
||||
Members ({members.length})
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
{members.map((member) => (
|
||||
<div key={member.id} className="flex items-center space-x-3">
|
||||
<button
|
||||
key={member.id}
|
||||
onClick={() => navigate(`/users/${member.user.id}`)}
|
||||
className="w-full flex items-center space-x-3 hover:bg-gray-100 rounded-lg p-2 transition-colors text-left cursor-pointer"
|
||||
>
|
||||
{member.user.avatar ? (
|
||||
<img
|
||||
src={member.user.avatar}
|
||||
@@ -280,7 +287,7 @@ const TeamDashboardPage: FC = (): ReactElement => {
|
||||
{member.role === ETeamMemberRole.LEADER ? 'Leader' : 'Member'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { FC, ReactElement, useState } from 'react';
|
||||
import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
|
||||
import { Button, Input, Select } from '@imphnen-frontend-service/ui/atoms';
|
||||
import { Link, useNavigate } from 'react-router';
|
||||
import { useTeams, useJoinTeam, useMyTeams, ETeamVisibility, joinTeamSchema, TJoinTeamForm } from '@imphnen-frontend-service/service';
|
||||
import { useForm } from 'react-hook-form';
|
||||
@@ -65,7 +65,7 @@ const BrowseTeamsPage: FC = (): ReactElement => {
|
||||
<h1 className="text-3xl font-bold text-gray-900">Browse Teams</h1>
|
||||
<p className="text-gray-600 mt-1">Find and join teams looking for members</p>
|
||||
</div>
|
||||
<Link to="/dashboard">
|
||||
<Link to="/dashboard" className="hidden md:block">
|
||||
<Button variant="secondary">Back to Dashboard</Button>
|
||||
</Link>
|
||||
</div>
|
||||
@@ -85,23 +85,24 @@ const BrowseTeamsPage: FC = (): ReactElement => {
|
||||
placeholder="Search by team name..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="h-12"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Filter by City
|
||||
</label>
|
||||
<select
|
||||
<Select
|
||||
value={selectedCity}
|
||||
onChange={(e) => setSelectedCity(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
className="w-full"
|
||||
>
|
||||
{INDONESIAN_CITIES.map((city) => (
|
||||
<option key={city} value={city}>
|
||||
{city}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -119,15 +120,13 @@ const BrowseTeamsPage: FC = (): ReactElement => {
|
||||
) : (
|
||||
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
{teams.map((team) => (
|
||||
<div key={team.id} className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
|
||||
{team.banner && (
|
||||
<img
|
||||
src={team.banner}
|
||||
alt={team.name}
|
||||
className="w-full h-32 object-cover"
|
||||
/>
|
||||
)}
|
||||
<div className="p-6">
|
||||
<div key={team.id} className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow flex flex-col">
|
||||
<img
|
||||
src={team.banner || '/images/banner-imphnen.png'}
|
||||
alt={team.name}
|
||||
className="w-full h-32 object-cover"
|
||||
/>
|
||||
<div className="p-6 flex flex-col flex-1">
|
||||
<div className="flex items-center space-x-3 mb-3">
|
||||
{team.logo ? (
|
||||
<img
|
||||
@@ -140,30 +139,46 @@ const BrowseTeamsPage: FC = (): ReactElement => {
|
||||
<span className="text-gray-500 text-xl">👥</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-bold text-gray-900">{team.name}</h3>
|
||||
<p className="text-sm text-gray-600">📍 {team.city}</p>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="text-lg font-bold text-gray-900 line-clamp-2">{team.name}</h3>
|
||||
<div className="text-sm text-gray-600 flex gap-2">
|
||||
<p className="truncate flex-1 min-w-0">📍 {team.city}</p>
|
||||
<p className="whitespace-nowrap shrink-0">👥 {team.members?.length || 0} members</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-gray-600 text-sm mb-4 line-clamp-3">
|
||||
{team.description}
|
||||
</p>
|
||||
{isMyTeam(team.id) ? (
|
||||
<Button
|
||||
className="w-full"
|
||||
variant="secondary"
|
||||
onClick={() => navigate(`/teams/${team.id}`)}
|
||||
>
|
||||
Your Team
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
className="w-full"
|
||||
onClick={() => handleJoinRequest(team.id)}
|
||||
>
|
||||
Request to Join
|
||||
</Button>
|
||||
)}
|
||||
<div className="space-y-3 mt-auto">
|
||||
{isMyTeam(team.id) ? (
|
||||
<Button
|
||||
className="w-full"
|
||||
variant="secondary"
|
||||
onClick={() => navigate(`/teams/${team.id}`)}
|
||||
>
|
||||
Your Team
|
||||
</Button>
|
||||
) : (
|
||||
<>
|
||||
{myTeams.length === 0 && (team.members?.length || 0) < 5 && (
|
||||
<Button
|
||||
className="w-full"
|
||||
onClick={() => handleJoinRequest(team.id)}
|
||||
>
|
||||
Request to Join
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
className="w-full"
|
||||
variant="secondary"
|
||||
onClick={() => navigate(`/teams/${team.id}`)}
|
||||
>
|
||||
View Team
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user