@rishicds we can add a blog kind of cards gallery that can show the instances of pets being reported and getting the required help
will generate a trust and also add as a new feature
move the function that can be reused in other place in utils/functions and move the function that is not reusable but too long to the parent folder directory by creating a separate file for funtions in the parent folder of that page/component
currently all the pages are mobile friendly make them desktop frienldy too , before starting working on any page discuss below get assigned than start working on the page
if you can make atleast one page responsive your PR will be merged
We have transitioned to using Tailwind CSS in our project. However, there are still some files using the old module.css approach. This issue aims to remove the usage of module.css files and replace them with Tailwind CSS classes(prefered) or inline css to maintain consistency across the project.
Tasks
Identify all files using module.css.
Replace all module.css with tailwind css or inline css classes
Test to ensure everything works as expected after the changes.
in ngo Dashboard when their is no report in the selected catagory show a message that their is no report in that catagory
Example add a message no report is in progress in the middle of the page similarly for other catagories also
Number of Reports Received: Show the total number of reports received over a specific time period. This can help NGOs understand the volume of animal rescue needs in their area.
Geographic Distribution: Map the location of reported cases and rescues to identify hotspots and allocate resources effectively.
Donation Metrics: Display donation amounts, frequency, ( top donors)
Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
Describe the solution you'd like
A clear and concise description of what you want to happen.
Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
Additional context
Add any other context or screenshots about the feature request here.
Campaign Title: A clear and concise title that quickly conveys the purpose of the campaign.
Campaign Description: Detailed information about the campaign, including its goals, the specific activities involved, and the impact it aims to achieve.
Campaign Image: Visuals that represent the campaign, (optional field)
Location: The specific location(s) where the campaign activities will take place.This could include addresses for physical locations or details for virtual participation. (address)
Start Date and End Date: The duration of the campaign, including both the start and end dates.
Time Commitment: Expected time commitment from volunteers, which could be specified in hours per week or total hours for the campaign duration.
Age Restrictions: If there are any age restrictions for volunteers, specify the minimum age requirement.
Contact Information: Details of a contact person within the NGO for volunteers to reach out to with questions or for more information. (probably an email field)
Volunteer Benefits: Any benefits that volunteers might receive, such as community service hours, certificates, or practical experience.
Currently, the repository lacks a Code of Conduct file, which is an essential component for fostering a healthy and inclusive open-source community. A Code of Conduct serves as a guideline for expected behaviour, ensuring that contributors and participants feel safe, respected, and valued within our community space.
copy paste the base ui from Current registration page ( make sure to remove the ngo toggle in registration page )
change name place holder to Ngo name (ph and email should be taken as before )
supported animals input it will be a multiselect input ( libraries are their you can use like this https://github.com/sanusart/react-dropdown-select this one is not much beautiful if you find beautiful use them )
add a website input field (optional field )
location should be automatically taken ( no input field on ui needed ) fetch the lat long from the browser location api and send that to backend
show the address of the place from where the ngo is registering in the input field make sure its editable if location permission is given , else leave the input box blank
take emergency number input from ngo ( its optional to enter ngo ngo should be able to login without entering emergency number also )
probably you need to make smaller input boxes component for this or else have to make the big input box component customizable in size try it else contact @codewarnab
contact anirban for necessary changes to backend till then build the ui and console.log it just
after registration it should lead to the home page of the ngo which is current /dashboard make sure split out the code and conditionally importing modules( watch this https://youtu.be/JU6sl_yyZqs?si=W_SlgmxiLl_xWt0A )
nav bar , make sure actiive statte is shown in both user and ngo side create two diff componenet if not possible to show active state in one component - @anirbanmajumder0
Add function of adding a profile photo . proably this will work like this take the photo from user upload it in the cloudinary send the link to backened for persistence ,
add option of removing photo also
show the level of the user and collected badges which user earned for reporting (fetch them from backend)
make the showcasing of the details beautiful take inspiration from similar apps
Is your feature request related to a problem? Please describe.
The UI of the NGO register page has Poor layout form and a bad user Experience
Describe the solution you'd like
I would like to enhance the layout and user experience of the NGO register page by implementing a more intuitive design and improving its overall look and feel
Please Assign this issue to me under GSSoc'24 so that i can work on it
create a beautiful landing page for the web app
probably contains hero section , screenshots , about us section testimonial section etc
feel free to discuss your ideas below
Currently there is no option to change user/NGO details once created.
Add an edit option that will enable users to change their name, and number.
Create suitable UI for the same.
you have to make neccesary end points in the backend also if needed
Currently, during registration, we are collecting the emergency contact number, but we haven't utilized it anywhere. We need to add a feature where users can view the emergency contact number of the nearest NGO. This emergency contact number will be fetched using the same endpoint used in the popup that appears during the reporting of an animal at the image location page.
Implementation Details
Frontend (React)
Add a section to display the emergency contact number of the nearest NGO.
Fetch the emergency contact number using the same endpoint used in the popup that appears during the reporting of an animal at the image location page.
Implement the necessary frontend logic to display the emergency contact number.
Currently, on both NGO and USER sides, there is no option to upload the profile picture. We need to add the option to upload a photo in place of the profile icon on the profile page.
Solution:
Frontend (React):
Profile Page:
Replace the profile icon with an option to upload a photo.
Update the profile page to include the feature to upload a photo.
Backend (Django):
API Endpoints:
Create necessary API endpoints to handle profile picture upload.
Implement the necessary backend logic to handle profile picture upload.
Implementation Details:
Frontend (React):
Profile Page:
Locate the profile icon.
Replace the profile icon with an upload photo button.
Implement the functionality to upload a photo.
Display the uploaded photo in place of the profile icon.
Backend (Django):
API Endpoints:
Implement API endpoints to handle photo uploads.
Create an endpoint to receive the uploaded photo.
Implement logic to handle photo upload and storage.
Steps:
Frontend (React):
Profile Page:
Locate the profile icon component.
Replace it with an upload photo button.( Google similar component , discuss before implementing it )
Implement the functionality to upload a photo.
Display the uploaded photo in place of the profile icon.
Backend (Django):
API Endpoints:
Create an API endpoint to handle photo uploads.
Create a Django model for the user profile to store the uploaded photos.
Implement the logic to handle photo upload and storage.