Skip to content

Frontend TASK #97: Add Chat UI, Dashboard, Home, and Ticket System components #146

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

Open
Pasupuletibhanupriya wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Frontend TASK #97: Add Chat UI, Dashboard, Home, and Ticket System components #146

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
Binary file added chatbot-frontend/.gitignore
View file
Open in desktop
Binary file not shown.
52 changes: 52 additions & 0 deletions chatbot-frontend/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
# AI ANM Assistant Frontend

This repository contains the frontend for the AI-Powered Chatbot System built with React and Tailwind CSS. It is designed as a standalone project with mock logic for guided issue reporting and ticket management. The UI is responsive and suitable for field workers and administrators.

## Features

- **Chat interface** with language toggle (EN/HI/TE), typing indicator, and guided ticket creation.
- **Sidebar** for navigation: New Chat, Ticket Dashboard, Clear Chat.
- **Ticket Dashboard** with summary cards, searchable/filterable ticket table.
- **Mock ticket state** stored in React context; easily replaceable with backend integration.
- **Responsive layout** and professional styling using Tailwind CSS.

## Folder Structure

```
src/
components/ # Reusable UI components
pages/ # Route-level pages (ChatPage, DashboardPage)
data/ # (empty for now) place mock data here
utils/ # Utility functions (ticket ID generator, etc.)
index.jsx # App entry point
App.jsx # Main application with routing and context
```

## Getting Started

1. **Install** dependencies:
```bash
npm install
```

2. **Run development server**:
```bash
npm run dev
```
Open [http://localhost:3000](http://localhost:3000) in your browser.

3. **Build for production**:
```bash
npm run build
```

## Next Steps

- Integrate with backend APIs (auth, ticket CRUD, chat service).
- Expand language support or integrate an i18n solution.
- Add unit tests and end-to-end testing.
- Enhance UX animations and error handling.

---

This project was bootstrapped manually according to frontend-only requirements. It is ready for further development and backend integration.
12 changes: 12 additions & 0 deletions chatbot-frontend/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AI ANM Assistant</title>
</head>
<body class="bg-gray-100">
<div id="root"></div>
<script type="module" src="/src/index.jsx"></script>
</body>
</html>
Loading