{"id":30160270,"url":"https://github.com/programmersiam/ps-organization","last_synced_at":"2025-08-11T15:38:30.886Z","repository":{"id":306488686,"uuid":"1026294637","full_name":"ProgrammerSiam/ps-Organization","owner":"ProgrammerSiam","description":null,"archived":false,"fork":false,"pushed_at":"2025-07-25T19:11:54.000Z","size":428,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-26T02:05:23.771Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ProgrammerSiam.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-25T16:28:02.000Z","updated_at":"2025-07-25T17:11:57.000Z","dependencies_parsed_at":"2025-07-26T02:05:31.003Z","dependency_job_id":"122c655f-2ecb-4bb5-a97a-7721c9d42997","html_url":"https://github.com/ProgrammerSiam/ps-Organization","commit_stats":null,"previous_names":["programmersiam/ps-organization"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/ProgrammerSiam/ps-Organization","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProgrammerSiam%2Fps-Organization","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProgrammerSiam%2Fps-Organization/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProgrammerSiam%2Fps-Organization/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProgrammerSiam%2Fps-Organization/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ProgrammerSiam","download_url":"https://codeload.github.com/ProgrammerSiam/ps-Organization/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProgrammerSiam%2Fps-Organization/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269915010,"owners_count":24495636,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-11T02:00:10.019Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-08-11T15:38:27.813Z","updated_at":"2025-08-11T15:38:30.877Z","avatar_url":"https://github.com/ProgrammerSiam.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Organization Management System\n\nA modern, feature-rich organization management application built with Next.js 15, React 19, and TypeScript. This application provides comprehensive team management capabilities with advanced permission controls and member invitation systems.\n\n## 🚀 Features\n\n### Core Functionality\n\n- **Member Management**: View and manage all organization members in a comprehensive data table\n- **Role-based Access Control**: Support for Owner and Member roles with different permission levels\n- **Member Invitation System**: Streamlined process for inviting new members to the organization\n- **Advanced Permissions Manager**: Granular permission controls for different libraries and features\n- **Status Tracking**: Monitor member status (Joined, Pending) with real-time updates\n\n### Advanced Features\n\n- **Library-specific Permissions**: Custom access controls for different content libraries\n- **Granular Permission System**: Fine-grained permissions for:\n  - Videos and content access\n  - Live streaming controls\n  - Player customization\n  - Encoding settings\n  - Analytics and reporting\n  - Usage tracking\n  - Security settings\n  - System preferences\n\n### UI/UX Features\n\n- **Modern Design**: Clean, professional interface with Tailwind CSS\n- **Responsive Layout**: Optimized for desktop and mobile devices\n- **Interactive Data Tables**: Advanced filtering, sorting, and pagination\n- **Modal-based Workflows**: Seamless user experience with modal dialogs\n- **Breadcrumb Navigation**: Clear navigation hierarchy\n- **Real-time Status Updates**: Live status indicators for member invitations\n\n## 🛠 Tech Stack\n\n### Frontend Framework\n\n- **Next.js 15.4.4** - React framework with App Router\n- **React 19.1.0** - Latest React with concurrent features\n- **TypeScript 5** - Type-safe development\n\n### UI Components \u0026 Styling\n\n- **Tailwind CSS 4** - Utility-first CSS framework\n- **Radix UI** - Accessible component primitives\n- **Lucide React** - Beautiful icon library\n- **Framer Motion** - Smooth animations and transitions\n- **Class Variance Authority** - Type-safe component variants\n\n### Data Management\n\n- **TanStack React Table** - Powerful data table functionality\n- **Zod** - TypeScript-first schema validation\n- **Date-fns** - Modern date utility library\n\n### Development Tools\n\n- **ESLint** - Code linting and quality assurance\n- **Turbopack** - Fast bundler for development\n- **PostCSS** - CSS processing\n\n## 📁 Project Structure\n\n```\norganization/\n├── public/                          # Static assets\n├── src/\n│   ├── app/                         # Next.js App Router\n│   │   ├── (modals)/               # Modal route groups\n│   │   │   └── invite-member/      # Member invitation modal\n│   │   ├── data-table-components/  # Data table implementation\n│   │   │   ├── columns.tsx         # Table column definitions\n│   │   │   ├── data-table.tsx      # Main data table component\n│   │   │   ├── data.json           # Sample member data\n│   │   │   └── ...                 # Table utilities and filters\n│   │   ├── globals.css             # Global styles\n│   │   ├── layout.tsx              # Root layout\n│   │   └── page.tsx                # Main dashboard page\n│   ├── components/                 # Reusable components\n│   │   ├── permissions-manager.tsx # Advanced permissions system\n│   │   ├── tree.tsx               # Tree view component\n│   │   ├── comp-567.tsx           # Custom component\n│   │   └── ui/                    # UI component library\n│   │       ├── avatar.tsx         # Avatar component\n│   │       ├── button.tsx         # Button component\n│   │       ├── dialog.tsx         # Modal dialog\n│   │       ├── table.tsx          # Table component\n│   │       └── ...                # Other UI components\n│   └── lib/\n│       └── utils.ts               # Utility functions\n├── package.json                    # Dependencies and scripts\n├── tsconfig.json                  # TypeScript configuration\n├── next.config.ts                 # Next.js configuration\n└── README.md                      # This file\n```\n\n## 🚀 Getting Started\n\n### Prerequisites\n\n- Node.js 18+\n- npm or yarn package manager\n\n### Installation\n\n1. **Clone the repository**\n\n   ```bash\n   git clone \u003crepository-url\u003e\n   cd organization\n   ```\n\n2. **Install dependencies**\n\n   ```bash\n   npm install\n   # or\n   yarn install\n   ```\n\n3. **Run the development server**\n\n   ```bash\n   npm run dev\n   # or\n   yarn dev\n   ```\n\n4. **Open your browser**\n   Navigate to [http://localhost:3000](http://localhost:3000) to view the application.\n\n### Available Scripts\n\n- `npm run dev` - Start development server with Turbopack\n- `npm run build` - Build the application for production\n- `npm run start` - Start the production server\n- `npm run lint` - Run ESLint for code quality checks\n\n## 🔧 Configuration\n\n### Environment Variables\n\nCreate a `.env.local` file in the root directory for environment-specific configurations:\n\n```env\n# Add your environment variables here\nNEXT_PUBLIC_API_URL=your_api_url\n```\n\n### Tailwind CSS\n\nThe project uses Tailwind CSS 4 with custom configurations. Styles are defined in `src/app/globals.css`.\n\n## 📊 Data Structure\n\n### Member Data Format\n\n```typescript\ninterface Member {\n  id: string;\n  name: string;\n  email: string;\n  role: \"Owner\" | \"Member\";\n  status: \"Joined\" | \"Pending\";\n  date: string; // ISO date format\n}\n```\n\n### Permission Structure\n\n```typescript\ninterface PermissionItem {\n  id: string;\n  name: string;\n  description: string;\n  icon: React.ReactNode;\n  enabled: boolean;\n}\n\ninterface LibraryPermissions {\n  id: string;\n  name: string;\n  accessType: \"Custom Access\" | \"Full Access\";\n  selected: boolean;\n  expanded: boolean;\n  permissions: PermissionItem[];\n}\n```\n\n## 🤝 Contributing\n\nWe welcome contributions! Please follow these guidelines:\n\n### Development Workflow\n\n1. **Fork the repository**\n2. **Create a feature branch**\n   ```bash\n   git checkout -b feature/your-feature-name\n   ```\n3. **Make your changes**\n\n   - Follow the existing code style\n   - Add TypeScript types for new features\n   - Include proper error handling\n   - Write meaningful commit messages\n\n4. **Test your changes**\n\n   ```bash\n   npm run lint\n   npm run build\n   ```\n\n5. **Submit a pull request**\n   - Provide a clear description of changes\n   - Include screenshots for UI changes\n   - Reference any related issues\n\n### Code Style Guidelines\n\n- Use TypeScript for all new code\n- Follow ESLint configuration\n- Use functional components with hooks\n- Implement proper error boundaries\n- Write meaningful component and function names\n- Add JSDoc comments for complex functions\n\n### Component Development\n\n- Place reusable components in `src/components/`\n- Use the UI component library in `src/components/ui/`\n- Follow the existing component patterns\n- Implement proper accessibility features\n- Use Radix UI primitives when possible\n\n## 🐛 Bug Reports\n\nWhen reporting bugs, please include:\n\n1. **Environment details** (OS, Node.js version, browser)\n2. **Steps to reproduce**\n3. **Expected vs actual behavior**\n4. **Screenshots or videos** (if applicable)\n5. **Console errors** (if any)\n\n## 📝 License\n\nThis project is licensed under the MIT License - see the LICENSE file for details.\n\n## 🆘 Support\n\nFor support and questions:\n\n1. Check the existing issues in the repository\n2. Create a new issue with detailed information\n3. Contact the development team\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprogrammersiam%2Fps-organization","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprogrammersiam%2Fps-organization","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprogrammersiam%2Fps-organization/lists"}